/* ============================================================
   Account Factory — visual skin
   Industrial / factory aesthetic: signal-orange + black,
   white work-surface cards, Oswald (condensed, mechanical)
   headings + Roboto body. Asymmetric "cut-metal" corners.
   NB: только визуальный слой. Все id/классы-хуки JS сохранены.
   ============================================================ */

:root{
  /* Brand */
  --af-orange:#e8940c;
  --af-orange-strong:#cf7f06;
  --af-orange-soft:#f6b85a;
  --af-orange-tint:#fdeccd;
  --af-black:#0c0c0d;
  --af-ink-panel:#15161a;

  /* Surface */
  --bg:#edeef1;
  --panel:#ffffff;
  --text:#17181c;
  --muted:#5c6470;
  --line:#e3e6ec;
  --line-strong:#d3d8e2;

  /* Semantic (bootstrap store colours) */
  --accent:var(--af-orange);
  --ok:#5cb85c;
  --ok-strong:#4cae4c;
  --bad:#d9534f;
  --bad-strong:#c9302c;
  --ok-text:#2e7d32;       /* dark green for success TEXT on light (WCAG AA) */
  --eta-text:#a05f00;      /* dark orange for ETA text on white (WCAG AA) */

  /* Asymmetric "cut-metal" corner used across brand elements */
  --cut:0 50px 0 50px;
  --cut-sm:0 18px 0 18px;

  /* Fonts (loaded via <link> in HTML) */
  --font-head:'Oswald', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body:'Roboto', system-ui, -apple-system, "Segoe UI", Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* shiny border vars (recoloured to brand orange) */
  --shiny-cta-bg:#ffffff;
  --shiny-cta-bg-subtle:#eceef3;
  --shiny-cta-fg:#17181c;
  --shiny-cta-highlight:#e8940c;
  --shiny-cta-highlight-subtle:#f6b85a;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:
    radial-gradient(1100px 420px at 85% -12%, rgba(232,148,12,.12), transparent 62%),
    radial-gradient(900px 500px at -10% 0%, rgba(12,12,13,.05), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}

/* ============================================================
   Top bar — black brand header with AF logo
   ============================================================ */
.topbar{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg,#141416,#0c0c0d);
  border-bottom:2px solid var(--af-orange);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.topbar::before{
  /* тонкая «сигнальная» штриховка над брендом */
  content:"";display:block;height:4px;
  background:repeating-linear-gradient(135deg,
    var(--af-orange) 0 14px, #0c0c0d 14px 26px);
  opacity:.9;
}
.topbar-inner{
  max-width:1180px;margin:0 auto;padding:12px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.af-brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.af-logo{
  flex:0 0 auto;
  height:46px;width:auto;display:block;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.5));
}
.topbar-right{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.af-tag{
  font-family:var(--font-head);
  font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:#8b9099;
  border:1px solid #2a2c31;
  border-radius:var(--cut-sm);
  padding:4px 12px;
}
/* Theme toggle — sits on the (always-dark) header; light icon */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:0 0 auto;
  background:rgba(255,255,255,.06);
  border:1px solid #2a2c31;border-radius:var(--cut-sm);
  color:#f6b85a;cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.theme-toggle:hover{background:rgba(232,148,12,.16);border-color:var(--af-orange);color:var(--af-orange)}
.theme-toggle:focus-visible{outline:3px solid var(--af-orange-soft);outline-offset:2px}
.theme-toggle svg{display:block}
:root[data-theme="dark"] .theme-toggle .ic-moon{display:none}
:root[data-theme="light"] .theme-toggle .ic-sun{display:none}
.icon-btn{background:transparent;border:1px solid var(--line-strong);color:var(--text);padding:6px 10px;border-radius:var(--cut-sm);cursor:pointer}

.error{
  background:#fdecea;color:#8a211c;border:1px solid #f3b6b1;
  border-left:4px solid var(--bad);
  padding:11px 14px;border-radius:10px;margin-bottom:14px;
  font-size:14px;
}

/* ============================================================
   Preloader (cosmetic, must not catch clicks)
   ============================================================ */
.preloader{position:fixed;inset:0;background:#0c0c0d;display:flex;align-items:center;justify-content:center;z-index:9999;pointer-events:none}
.preloader.hidden{display:none}
.preloader svg{height:150px;width:150px}

/* ============================================================
   Layout
   ============================================================ */
.container{max-width:1180px;margin:30px auto;padding:0 18px}

h1{margin:0 0 16px 0;font-family:var(--font-head);font-size:26px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}

.grid{display:grid;grid-template-columns:1fr;gap:16px}

.card{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
  box-shadow:0 10px 26px rgba(15,18,28,.05);
}

/* ============================================================
   Hero card
   ============================================================ */
.hero-card{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:18px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:20px 20px 20px 24px;
  box-shadow:0 14px 30px rgba(15,18,28,.07);
  margin-bottom:18px;
  overflow:hidden;
}
.hero-card::before{
  /* оранжевый «станочный» акцент слева */
  content:"";position:absolute;left:0;top:0;bottom:0;width:6px;
  background:linear-gradient(180deg,var(--af-orange),var(--af-orange-strong));
}
.hero-left{display:flex;flex-direction:column;gap:12px;align-items:flex-start;min-width:0}
.hero-lang{display:flex;gap:6px}
.lang-btn{
  border:1px solid var(--line-strong);background:#fff;border-radius:10px;
  padding:6px 9px;cursor:pointer;font-size:16px;line-height:1;
}
.lang-btn:hover{border-color:var(--af-orange)}
.lang-btn.active{outline:2px solid var(--af-orange);border-color:var(--af-orange)}
.hero-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:var(--cut-sm);
  background:var(--af-orange-tint);border:1px solid #f3d199;
}
.hero-text{min-width:0}
.hero-text h2{
  margin:0 0 8px 0;
  overflow-wrap:anywhere;
  font-family:var(--font-head);
  font-size:25px;font-weight:600;letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--af-ink-panel);
}
.hero-text p{margin:5px 0;color:var(--muted);line-height:1.55;font-size:14.5px;overflow-wrap:anywhere}
/* Clickable store banner (links to the Account Factory shop) */
.hero-right{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;
  padding:20px 18px;border-radius:14px;text-decoration:none;
  background:linear-gradient(155deg,#17181c,#0c0c0d);
  border:1px solid #2a2c31;color:#fff;
}
.hero-right::before{
  content:"";position:absolute;left:0;top:0;right:0;height:4px;
  background:repeating-linear-gradient(135deg,var(--af-orange) 0 12px,#0c0c0d 12px 22px);
}
.hero-right:hover{border-color:var(--af-orange);box-shadow:0 12px 30px rgba(232,148,12,.20)}
.hero-banner-logo{height:54px;width:auto;margin-top:4px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))}
.hero-banner-title{font-family:var(--font-head);text-transform:uppercase;letter-spacing:1px;font-size:18px;font-weight:600;color:#fff}
.hero-banner-sub{font-size:12.5px;color:#b8bcc4;line-height:1.45;max-width:240px}
.hero-banner-cta{
  margin-top:4px;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-head);text-transform:uppercase;letter-spacing:1px;font-size:13px;font-weight:600;
  color:#0c0c0d;background:var(--af-orange);padding:9px 16px;border-radius:var(--cut-sm);
}
.hero-right:hover .hero-banner-cta{background:var(--af-orange-soft)}

/* ============================================================
   Labels & fields
   ============================================================ */
label{
  display:block;font-family:var(--font-head);
  font-size:13px;font-weight:500;letter-spacing:1px;text-transform:uppercase;
  color:var(--af-ink-panel);margin-bottom:9px;
}
label::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;background:var(--af-orange);border-radius:0 4px 0 4px;vertical-align:middle}

textarea{
  width:100%;min-height:260px;resize:vertical;
  background:#fff;color:var(--text);
  border:none;border-radius:10px;padding:12px;line-height:1.45;
  white-space:pre;overflow:auto;
  font-family:var(--font-mono);font-size:14px;
}

.controls{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.field-actions{display:flex;gap:8px;margin-bottom:9px}

/* ============================================================
   Buttons — black, asymmetric cut, orange hover (brand)
   ============================================================ */
button{appearance:none;border:none;cursor:pointer;font-weight:600}

.btn{
  outline:none;height:44px;min-width:140px;padding:0 22px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-head);font-weight:600;font-size:14px;
  letter-spacing:1.4px;text-transform:uppercase;
  color:#fff;background:var(--af-black);
  border:2px solid var(--af-black);
  border-radius:var(--cut);
  box-shadow:0 6px 16px rgba(12,12,13,.18);
}
.btn:hover{background:var(--af-orange);border-color:var(--af-orange);color:#0c0c0d;box-shadow:0 8px 20px rgba(232,148,12,.34)}
.btn:active{transform:translateY(1px);letter-spacing:1.8px}
.btn:focus-visible{outline:3px solid var(--af-orange-soft);outline-offset:2px}
/* consistent keyboard-focus ring across all interactive controls (WCAG 2.4.7) */
.lang-btn:focus-visible,.app-nav-link:focus-visible,.otp-code:focus-visible,.result-link:focus-visible,.hero-right:focus-visible{outline:3px solid var(--af-orange-soft);outline-offset:2px}

.btn.btn--sm{min-width:auto;height:36px;padding:0 12px;font-size:15px;letter-spacing:0;border-radius:var(--cut-sm)}

/* Clear all — secondary outline */
.btn.btn--alt{background:#fff;color:var(--af-black);border-color:var(--af-black)}
.btn.btn--alt:hover{background:var(--af-orange);border-color:var(--af-orange);color:#0c0c0d}

/* Stop — danger */
.btn.btn--stop{background:#fff;color:var(--bad-strong);border-color:var(--bad)}
.btn.btn--stop:hover{background:var(--bad);border-color:var(--bad);color:#fff;box-shadow:0 8px 20px rgba(217,83,79,.32)}

/* icon buttons (copy/save) */
.icon-btn.btn--sm{background:#fff;color:var(--af-ink-panel);border:2px solid var(--line-strong)}
.icon-btn.btn--sm:hover{background:var(--af-orange-tint);border-color:var(--af-orange);color:#0c0c0d}

button:disabled{opacity:.6;cursor:not-allowed}

/* ============================================================
   Toast
   ============================================================ */
.toast{
  position:fixed;right:16px;bottom:16px;max-width:300px;
  padding:11px 14px;border-radius:var(--cut-sm);
  background:var(--af-black);color:#fff;
  border-left:4px solid var(--af-orange);
  box-shadow:0 12px 34px rgba(0,0,0,.3);
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease;z-index:99999;
  font-family:var(--font-body);font-size:14px;
}
.toast.show{opacity:1;transform:translateY(0)}
.toast.success{border-left-color:var(--ok)}
.toast.info{border-left-color:var(--af-orange)}

/* ============================================================
   Stats / summary
   ============================================================ */
#stats{color:var(--muted);font-size:13px;font-family:var(--font-body)}
.ok{color:var(--ok-text)}
.bad{color:var(--bad-strong)}
.summary{font-family:var(--font-head);font-size:16px;font-weight:600;letter-spacing:.4px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

/* ============================================================
   Shiny border for fields (recoloured to orange)
   ============================================================ */
@property --gradient-angle { syntax:"<angle>"; initial-value:0deg; inherits:false; }
@property --gradient-angle-offset { syntax:"<angle>"; initial-value:0deg; inherits:false; }
@property --gradient-percent { syntax:"<percentage>"; initial-value:5%; inherits:false; }
@property --gradient-shine { syntax:"<color>"; initial-value:white; inherits:false; }

.shiny-field{
  --animation: gradient-angle linear infinite;
  --duration: 4s;
  --shadow-size: 2px;
  position:relative;isolation:isolate;outline:none;
  border:1px solid transparent;
  background:linear-gradient(var(--shiny-cta-bg),var(--shiny-cta-bg)) padding-box,
    conic-gradient(
      from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
      transparent,
      var(--shiny-cta-highlight) var(--gradient-percent),
      var(--gradient-shine) calc(var(--gradient-percent) * 2),
      var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),
      transparent calc(var(--gradient-percent) * 4)
    ) border-box;
  box-shadow:inset 0 0 0 1px var(--shiny-cta-bg-subtle);
}
.shiny-field, .shiny-field::before, .shiny-field::after{
  animation:var(--animation) var(--duration),
            var(--animation) calc(var(--duration) / 0.4) reverse paused;
  animation-composition:add;
}
.shiny-field:hover, .shiny-field:focus{
  --gradient-percent:20%;
  --gradient-angle-offset:95deg;
  --gradient-shine:var(--shiny-cta-highlight-subtle);
  animation-play-state:running;
}
@keyframes gradient-angle { to { --gradient-angle:360deg; } }
/* explicit focus ring — the animated border is not a reliable focus signal */
.shiny-field:focus-visible{outline:3px solid var(--af-orange-soft);outline-offset:2px}

/* ============================================================
   Progress bar
   ============================================================ */
.progress-wrap{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.progress-row{display:flex;align-items:center;gap:10px}
.progress-track{flex:1;height:9px;background:#e6e8ee;border-radius:9px;overflow:hidden}
.progress-bar-fill{
  height:100%;width:0%;border-radius:9px;
  background:linear-gradient(90deg,var(--af-orange-strong),var(--af-orange),var(--af-orange-soft));
}
.progress-label{font-size:13px;color:var(--muted);white-space:nowrap;min-width:96px;text-align:right;font-variant-numeric:tabular-nums}

/* Ratio valid/invalid live bar */
.ratio-wrap{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
.ratio-bar{flex:1;height:7px;background:#e6e8ee;border-radius:7px;overflow:hidden;display:flex}
.ratio-segment{height:100%;border-radius:0}
.ratio-valid{background:var(--ok)}
.ratio-invalid{background:var(--bad)}
.ratio-label{white-space:nowrap;min-width:96px;text-align:right;font-variant-numeric:tabular-nums}
.ratio-label .v{color:var(--ok-text)}
.ratio-label .x{color:var(--bad-strong)}

/* ============================================================
   File upload zone
   ============================================================ */
.upload-zone{
  display:flex;align-items:center;justify-content:center;
  min-height:58px;padding:12px 16px;margin-bottom:10px;
  border:2px dashed var(--line-strong);border-radius:12px;
  background:#fafbfc;color:var(--muted);
  font-family:var(--font-head);letter-spacing:.6px;font-size:13.5px;text-transform:uppercase;
  cursor:pointer;
}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--af-orange);background:var(--af-orange-tint);color:var(--af-ink-panel)}
.upload-text{pointer-events:none}

/* ETA */
.eta-label{font-size:13px;color:var(--eta-text);font-weight:600;white-space:nowrap;min-width:74px;text-align:right}

/* ============================================================
   Nav Checker / 2FA
   ============================================================ */
.app-nav{display:flex;gap:10px;margin-bottom:18px}
.app-nav-link{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 20px;border-radius:var(--cut);
  border:2px solid var(--line-strong);background:#fff;color:var(--muted);
  text-decoration:none;
  font-family:var(--font-head);font-weight:500;font-size:13.5px;letter-spacing:1px;text-transform:uppercase;
}
.app-nav-link:hover{border-color:var(--af-orange);color:var(--af-ink-panel)}
.app-nav-link.active{border-color:var(--af-black);background:var(--af-black);color:#fff}
.app-nav-link.active:hover{background:var(--af-orange);border-color:var(--af-orange);color:#0c0c0d}

/* ============================================================
   Valid-profile links
   ============================================================ */
.result-links{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.result-link{
  display:inline-block;max-width:100%;
  padding:4px 12px;border-radius:var(--cut-sm);
  border:1px solid #bfe3bf;background:#eef8ee;color:var(--ok-text);
  font-size:12px;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.result-link:hover{background:var(--ok-text);color:#fff;border-color:var(--ok-text)}

/* ============================================================
   2FA generator
   ============================================================ */
.otp-card{display:flex;flex-direction:column}
.otp-input{
  width:100%;border-radius:10px;padding:15px 14px;
  font-size:18px;letter-spacing:1px;background:#fff;color:var(--text);
  border:1px solid transparent;font-family:var(--font-mono);
}
.otp-block{display:flex;flex-direction:column;align-items:center;gap:9px;margin-top:20px}
.otp-code{
  font-family:var(--font-mono);font-size:46px;font-weight:700;letter-spacing:6px;
  color:var(--af-ink-panel);background:#fafbfc;
  border:1px solid var(--line);border-radius:var(--cut-sm);
  padding:16px 30px;cursor:pointer;min-width:250px;max-width:100%;text-align:center;
}
.otp-code:hover{background:var(--af-orange-tint);border-color:var(--af-orange)}
.otp-code:active{transform:scale(.98)}
.otp-copy{font-size:13px;color:var(--muted)}
.otp-block .progress-wrap{width:100%;max-width:360px;margin-top:6px}
.otp-next{font-size:14px;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums}
.otp-hint{font-size:12px;color:var(--muted);margin-top:16px}

/* ============================================================
   Tablet-edge: collapse hero before the 300px banner crushes the text
   ============================================================ */
@media (max-width:820px){
  .hero-card{grid-template-columns:1fr}
  .hero-right{min-height:80px}
}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width:600px){
  .topbar-inner{padding:10px 14px}
  .af-brand{gap:10px}
  .af-logo{height:38px}
  .af-tag{display:none}
  .otp-code{font-size:36px;letter-spacing:4px;min-width:210px;padding:13px 20px}
  .container{padding:0 13px;margin:20px auto}
  h1{font-size:21px;margin-bottom:12px}
  .hero-card{grid-template-columns:1fr;gap:12px;padding:14px 14px 14px 18px}
  .hero-text h2{font-size:21px}
  .hero-right{min-height:80px}
  .card{padding:13px}
  label{font-size:12.5px}
  textarea{min-height:180px;font-size:14px}
  .controls{flex-wrap:wrap;gap:8px}
  .controls #stats{width:100%;order:3;margin-top:4px}
  .btn{width:100%}
  .btn.btn--sm{width:auto;height:34px}
  .field-actions{gap:6px}
  .app-nav{flex-wrap:wrap}
  .progress-label{min-width:64px}
  .eta-label{min-width:auto}
  .toast{left:12px;right:12px;bottom:12px;max-width:none}
}

/* ============================================================
   Dark theme — overrides surface tokens + the few hardcoded light
   colours. Brand (orange/black header, banner, buttons) stays the same.
   Activated by data-theme="dark" on <html> (set early in <head>).
   ============================================================ */
:root[data-theme="dark"]{
  --bg:#0e1014;
  --panel:#181b22;
  --text:#e8eaf0;
  --muted:#a4adbc;
  --line:#272c36;
  --line-strong:#3a4151;
  --af-ink-panel:#eceef4;            /* headings/labels become light */
  --shiny-cta-bg:#181b22;            /* field interior (shiny border keeps orange) */
  --shiny-cta-bg-subtle:#252b36;
  --shiny-cta-fg:#e8eaf0;
  /* lighter semantic TEXT colours, readable on dark surfaces */
  --ok-text:#5fd27c;
  --bad-strong:#ff7069;
  --eta-text:#f4ad44;
}
:root[data-theme="dark"] body{
  background:
    radial-gradient(1100px 460px at 85% -12%, rgba(232,148,12,.16), transparent 60%),
    radial-gradient(900px 520px at -10% 0%, rgba(255,255,255,.03), transparent 60%),
    var(--bg);
}
:root[data-theme="dark"] .btn{border-color:#4d5566;box-shadow:0 6px 18px rgba(0,0,0,.5)}
:root[data-theme="dark"] .btn.btn--alt{background:transparent;color:var(--text);border-color:var(--line-strong)}
:root[data-theme="dark"] .btn.btn--alt:hover{background:var(--af-orange);border-color:var(--af-orange);color:#0c0c0d}
:root[data-theme="dark"] .btn.btn--stop{background:transparent}
:root[data-theme="dark"] .otp-input{background:#12151b;border-color:#2a2f3a}
:root[data-theme="dark"] .lang-btn{background:#1e222b}
:root[data-theme="dark"] .icon-btn.btn--sm{background:#1e222b}
:root[data-theme="dark"] .app-nav-link{background:#181b22}
:root[data-theme="dark"] .progress-track,
:root[data-theme="dark"] .ratio-bar{background:#2a3039}
:root[data-theme="dark"] .upload-zone{background:#12151b}
:root[data-theme="dark"] .otp-code{background:#12151b}
:root[data-theme="dark"] .hero-icon{background:#2a2113;border-color:#5a4a22}
:root[data-theme="dark"] .upload-zone:hover,
:root[data-theme="dark"] .upload-zone.dragover,
:root[data-theme="dark"] .otp-code:hover{background:#2a2113;border-color:var(--af-orange);color:var(--text)}
:root[data-theme="dark"] .result-link{background:#15241a;border-color:#2c4a33;color:#7fe093}
:root[data-theme="dark"] .result-link:hover{background:var(--ok);border-color:var(--ok);color:#06210c}
:root[data-theme="dark"] .error{background:#2a1517;color:#ffb1aa;border-color:#5c2329}

/* Utility: must come AFTER all component rules so equal-specificity
   display rules (.btn, .progress-wrap, .otp-block …) don't beat it.
   .preloader.hidden in the anti-jank block below intentionally overrides
   this to enable the fade-out. */
.hidden{display:none}

/* ============================================================
   Smoothness (anti-jank)
   ============================================================ */
html{scroll-behavior:smooth}

@keyframes fadeInUp{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

.container{animation:fadeInUp .40s ease both}
#results{animation:fadeInUp .34s ease both}
.progress-wrap:not(.hidden){animation:fadeInUp .30s ease both}
#stopBtn:not(.hidden){animation:fadeInUp .20s ease both}
.eta-label:not(.hidden){animation:fadeInUp .25s ease both}
.result-link{animation:fadeInUp .25s ease both;transition:background .18s ease,color .18s ease,border-color .18s ease}

.btn{transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,letter-spacing .12s ease,transform .08s ease}
.lang-btn{transition:outline-color .18s ease,background .18s ease,border-color .18s ease}
.icon-btn{transition:background .18s ease,color .18s ease,border-color .18s ease}
.app-nav-link{transition:background .2s ease,color .2s ease,border-color .2s ease}
.upload-zone{transition:border-color .2s ease,background .2s ease,color .2s ease}
.otp-code{transition:background .15s ease,border-color .15s ease,transform .08s ease}

.progress-bar-fill{transition:width .30s cubic-bezier(.4,0,.2,1)}
.ratio-segment{transition:width .30s cubic-bezier(.4,0,.2,1)}

.preloader{transition:opacity .40s ease,visibility .40s ease}
.preloader.hidden{display:flex;opacity:0;visibility:hidden;pointer-events:none}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}