/* ═══════════════ BASE ═══════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0b0f19;
  --bg-alt:#0d1322;
  --bg-card:#131a2b;
  --bg-card-hover:#171f34;
  --border:#1e2738;
  --border-hover:#2d3a55;
  --text:#f1f5f9;
  --text-2:#cbd5e1;
  --text-3:#94a3b8;
  --primary:#10b981;
  --primary-hover:#34d399;
  --primary-dim:rgba(16,185,129,.12);
  --accent:#22d3ee;
  --accent-hover:#67e8f9;
  --warning:#f59e0b;
  --danger:#ef4444;
  --r:10px;
  --r-lg:14px;
  --r-xl:20px;
  --shadow:0 1px 2px rgba(0,0,0,.3);
  --shadow-lg:0 20px 50px -10px rgba(0,0,0,.6);
  --ease:cubic-bezier(.22,.61,.36,1);
}
html{font-family:'Inter',system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.6;color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth}
body{overflow-x:hidden;background:var(--bg);
  background-image:
    radial-gradient(1100px 620px at 12% -6%,rgba(34,211,238,.04),transparent 60%),
    radial-gradient(900px 500px at 92% 8%,rgba(16,185,129,.035),transparent 55%);
  background-attachment:fixed}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{display:block;max-width:100%}
code{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
::selection{background:rgba(34,211,238,.28);color:#fff}

.container{max-width:1200px;margin:0 auto;padding:0 32px}

/* ═══════════════ GLOBAL SECTION SEPARATION ═══════════════ */
/* Every page defines its own .vhero / .section / .section-alt, but none of
   them set a border — which made the hero blend into the following section on
   most pages. These global defaults add a hairline boundary so the hero and
   alternating sections are always visually distinct. Page-level rules keep
   their padding / positioning but inherit these borders unless they explicitly
   opt out. */
.hero,.vhero{border-bottom:1px solid var(--border)}
.section-alt{border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

/* ═══════════════ HEADER ═══════════════ */
.hdr{position:sticky;top:0;z-index:100;background:rgba(11,15,25,.78);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--border);height:64px}
.hdr-inner{max-width:1200px;margin:0 auto;padding:0 32px;display:flex;align-items:center;height:100%;gap:28px}

.brand{display:flex;align-items:center;gap:11px;flex-shrink:0;font-weight:800;font-size:17px;letter-spacing:-.4px;color:var(--text)}
.brand-mark-img{display:block;border-radius:8px;object-fit:cover;flex-shrink:0;
  box-shadow:0 2px 10px rgba(34,211,238,.15),0 0 0 1px rgba(255,255,255,.04)}
.brand-txt{display:inline-block}
.brand-tld{color:var(--text-3);font-weight:600}

.nav{display:flex;align-items:center;gap:2px;height:64px}
.nav a{position:relative;display:flex;align-items:center;height:64px;padding:0 14px;font-size:13.5px;font-weight:500;color:var(--text-2);transition:color .15s var(--ease)}
.nav a:hover{color:var(--text)}
.nav a.active{color:var(--text)}
.nav a.active::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:linear-gradient(90deg,#22d3ee,#10b981);border-radius:2px}
.nav a::before{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--text);border-radius:2px;opacity:0;transform:scaleX(.3);transition:.15s var(--ease)}
.nav a:hover::before{opacity:.2;transform:scaleX(1)}
.nav a.active::before{display:none}

.hdr-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0}

/* Authenticated user chip in the header — avatar initial + "Panel" label. */
.hdr-user{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:100px;
  background:rgba(255,255,255,.03);border:1px solid var(--border);color:var(--text-2);
  text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.1px;transition:.18s}
.hdr-user:hover{background:rgba(34,211,238,.08);border-color:rgba(34,211,238,.32);color:#f1f5f9;transform:translateY(-1px)}
.hdr-user-avatar{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:800;color:#06080f;letter-spacing:0;
  background:linear-gradient(135deg,#22d3ee,#10b981);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}

/* ═══════════════ LANGUAGE SWITCHER ═══════════════
   Compact flag + ISO code trigger that expands into a glass-panel dropdown.
   Desktop: sits next to the Panel / Sign-in chip. Mobile: rendered at the
   top of the slide-out drawer so the locale choice is reachable one tap
   after tapping the ☰ toggle.
   Active row gets the brand cyan→emerald gradient; native scripts render
   with their own fonts and the RTL locales (ar, fa) stay right-aligned. */
.lang-sw{position:relative;display:inline-block}
.lang-sw-trigger{display:inline-flex;align-items:center;gap:7px;
  padding:5px 10px 5px 8px;border-radius:100px;
  background:rgba(255,255,255,.03);border:1px solid var(--border);
  color:var(--text-2);font-family:inherit;font-size:12px;font-weight:700;
  letter-spacing:.3px;cursor:pointer;transition:.16s var(--ease);height:34px}
.lang-sw-trigger:hover,
.lang-sw.open .lang-sw-trigger{
  background:rgba(34,211,238,.08);border-color:rgba(34,211,238,.32);
  color:#f1f5f9}
.lang-sw-trigger .fi{width:18px;height:13px;border-radius:2px;flex-shrink:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 2px 4px rgba(0,0,0,.35)}
.lang-sw-code{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.5px}
.lang-sw-chev{font-size:13px;color:var(--text-3);transition:transform .2s var(--ease),color .15s}
.lang-sw.open .lang-sw-chev{transform:rotate(180deg);color:var(--accent)}

/* Menu — glass card, gradient border, slight rise animation */
.lang-sw-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:200;
  display:none;width:min(280px,calc(100vw - 32px));padding:6px;
  border:1px solid var(--border);border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,rgba(19,26,43,.97),rgba(11,15,25,.99));
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.8),0 0 0 1px rgba(34,211,238,.05);
  transform-origin:top right;animation:langRise .24s cubic-bezier(.22,.61,.36,1) both}
.lang-sw-menu::before{content:"";position:absolute;inset:-1px;border-radius:15px;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(34,211,238,.32),transparent 45%,transparent 55%,rgba(16,185,129,.28));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.lang-sw.open .lang-sw-menu{display:block}
@keyframes langRise{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}

.lang-sw-head{padding:10px 14px 8px;font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--text-3);border-bottom:1px dashed rgba(148,163,184,.18);margin-bottom:4px}

/* Each option — flag, native name, ISO code, optional check */
.lang-sw-opt{display:grid;grid-template-columns:22px 1fr auto auto;align-items:center;gap:10px;
  padding:9px 12px;border-radius:9px;text-decoration:none;color:var(--text-2);
  font-size:13px;font-weight:500;line-height:1.2;transition:.15s var(--ease);position:relative}
.lang-sw-opt:hover{background:rgba(34,211,238,.06);color:#f1f5f9}
.lang-sw-opt:hover .lang-sw-iso{color:#67e8f9}
.lang-sw-opt .fi{width:22px;height:16px;border-radius:3px;flex-shrink:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 2px 5px rgba(0,0,0,.4)}
.lang-sw-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:#f1f5f9}
.lang-sw-iso{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.5px;
  color:var(--text-3);padding:2px 6px;border-radius:5px;
  background:rgba(255,255,255,.03);border:1px solid var(--border);transition:.15s}
.lang-sw-chk{font-size:15px;color:#06080f}
.lang-sw-opt.active{
  background:linear-gradient(135deg,rgba(34,211,238,.14),rgba(16,185,129,.1));
  color:#f5f9ff;box-shadow:inset 0 0 0 1px rgba(34,211,238,.32)}
.lang-sw-opt.active .lang-sw-iso{
  background:linear-gradient(90deg,#22d3ee,#10b981);color:#06080f;border-color:transparent;font-weight:800}
.lang-sw-opt.active .lang-sw-chk{color:#6ee7b7}

/* Mobile variant: inline in the drawer, stretched to the full width.
   Menu opens INLINE (not floating) so it doesn't cover the nav items. */
.lang-sw[data-variant="mobile"]{display:block;width:100%;margin:4px 16px 10px;width:calc(100% - 32px)}
.lang-sw[data-variant="mobile"] .lang-sw-trigger{width:100%;justify-content:space-between;height:44px;padding:8px 14px;font-size:13px}
.lang-sw[data-variant="mobile"] .lang-sw-trigger .fi{width:20px;height:15px}
.lang-sw[data-variant="mobile"] .lang-sw-code{font-size:12px;margin-right:auto;margin-left:8px}
.lang-sw[data-variant="mobile"] .lang-sw-menu{position:relative;top:8px;right:auto;width:100%;max-height:60vh;overflow-y:auto;overscroll-behavior:contain}

/* RTL — flip the menu anchor so Arabic / Persian visitors see it opening from the logical "end" */
[dir="rtl"] .lang-sw-menu{right:auto;left:0;transform-origin:top left}
[dir="rtl"] .lang-sw-opt{grid-template-columns:22px auto auto 1fr;direction:rtl}

/* ═══════════════ BUTTONS ═══════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 16px;border-radius:8px;
  font-size:13px;font-weight:600;line-height:1.2;white-space:nowrap;transition:all .18s var(--ease);
  border:1px solid transparent;cursor:pointer}
.btn i{font-size:15px}
.btn-primary{background:linear-gradient(180deg,#10b981,#059669);color:#06080f;box-shadow:0 0 0 1px rgba(16,185,129,.35),0 8px 24px -8px rgba(16,185,129,.4)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(16,185,129,.5),0 12px 28px -6px rgba(16,185,129,.5);filter:brightness(1.05)}
.btn-primary:active{transform:translateY(0)}
.btn-outline{color:var(--text);background:rgba(255,255,255,.02);border-color:var(--border)}
.btn-outline:hover{border-color:var(--border-hover);background:rgba(255,255,255,.04)}
.btn-ghost{color:var(--text-2);background:transparent}
.btn-ghost:hover{color:var(--text);background:rgba(255,255,255,.04)}
.btn-lg{padding:13px 26px;font-size:14.5px;border-radius:10px;gap:8px}
.btn-lg i{font-size:17px}
.btn-sm{padding:6px 12px;font-size:12px;border-radius:6px}

/* ═══════════════ MOBILE ═══════════════ */
.mob-toggle{display:none;width:40px;height:40px;border-radius:10px;align-items:center;justify-content:center;
  color:var(--text);font-size:20px;background:rgba(255,255,255,.03);border:1px solid var(--border);transition:.15s}
.mob-toggle:hover{background:rgba(255,255,255,.06);border-color:var(--border-hover)}

.mob-overlay{display:none;position:fixed;inset:0;background:rgba(4,7,15,.6);backdrop-filter:blur(4px);z-index:998}
.mob-panel{position:fixed;top:0;right:-340px;width:340px;max-width:88vw;height:100dvh;
  background:var(--bg);border-left:1px solid var(--border);z-index:999;
  transition:right .3s var(--ease);display:flex;flex-direction:column;overflow-y:auto;
  box-shadow:-20px 0 60px -10px rgba(0,0,0,.7)}
.mob-panel-head{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--border)}
.mob-close{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:var(--text-2);font-size:20px;background:rgba(255,255,255,.03);border:1px solid var(--border);transition:.15s}
.mob-close:hover{color:var(--text);background:rgba(255,255,255,.06)}
.mob-nav{flex:1;padding:12px 0;display:flex;flex-direction:column}
.mob-nav a{display:flex;align-items:center;gap:14px;padding:14px 22px;font-size:14.5px;font-weight:500;color:var(--text-2);transition:.15s;border-left:3px solid transparent}
.mob-nav a i{font-size:18px;color:var(--text-3);width:20px}
.mob-nav a:hover{color:var(--text);background:rgba(255,255,255,.03);border-left-color:var(--primary)}
.mob-nav a:hover i{color:var(--primary)}
.mob-actions{padding:18px 22px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:10px}
.mob-btn{width:100%;justify-content:center;padding:12px}
.mob-meta{display:flex;align-items:center;gap:8px;padding-top:6px;font-size:11.5px;font-weight:600;color:var(--text-3);justify-content:center}

body.cs-mob-open{overflow:hidden}
body.cs-mob-open .mob-overlay{display:block}
body.cs-mob-open .mob-panel{right:0}

/* ═══════════════ FOOTER ═══════════════
   Desktop: 2-col (brand • 4 link columns). Mobile: single column, centered
   brand block, trust items as compact pills, link columns in a 2-col grid.
   Bottom padding respects iOS home-indicator via env(safe-area-inset-bottom). */
.ftr{border-top:1px solid var(--border);background:var(--bg-alt);
  padding:72px 0 calc(28px + env(safe-area-inset-bottom,0px));
  margin-top:48px;position:relative}
.ftr::before{content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:240px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.4),rgba(16,185,129,.4),transparent)}

/* The inner wrapper is a single vertical rhythm — brand, band, nav, legal. */
.ftr-inner{display:flex;flex-direction:column;gap:36px}

/* 1. Brand */
.ftr-brand{max-width:420px}
.ftr-brand .brand{margin-bottom:12px}
.ftr-desc{font-size:13px;color:var(--text-3);line-height:1.7;margin:0}

/* 2. Coins + trust band — horizontal on desktop, wraps on mid-width */
.ftr-bands{display:flex;align-items:center;justify-content:space-between;gap:28px;
  padding:18px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.ftr-coins{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ftr-coins img{height:16px;opacity:.55;transition:opacity .2s var(--ease)}
.ftr-coins span:hover img{opacity:1}
.ftr-trust{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;list-style:none;margin:0;padding:0}
.ftr-trust li{display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:100px;
  background:rgba(255,255,255,.02);border:1px solid var(--border);
  font-size:11.5px;color:var(--text-2);font-weight:500;white-space:nowrap}
.ftr-trust li i{color:var(--primary);font-size:13px}

/* 3. Navigation — 4-col grid on desktop. Accordion semantics hidden via CSS
      so the <summary>/<details> pair behaves like a static h4 + list. */
.ftr-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.ftr-sec{display:block}
.ftr-sec > summary{list-style:none;padding:0;cursor:default;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;
  color:var(--text);margin-bottom:14px}
.ftr-sec > summary::-webkit-details-marker{display:none}
.ftr-sec > summary::marker{content:""}
.ftr-sec-title{display:block}
.ftr-sec-mark{display:none}
.ftr-sec-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ftr-sec-links li{margin:0}
.ftr-sec-links a{display:block;font-size:13px;color:var(--text-3);padding:5px 0;
  transition:color .15s var(--ease)}
.ftr-sec-links a:hover{color:var(--accent)}

/* 4. Legal strip */
.ftr-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding-top:24px;border-top:1px solid var(--border);
  font-size:12px;color:var(--text-3)}
.ftr-copy{color:var(--text-2);font-weight:600}
.ftr-sep{color:var(--border-hover)}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width:1024px){
  .ftr{padding:56px 0 calc(28px + env(safe-area-inset-bottom,0px));margin-top:40px}
  .ftr-inner{gap:32px}
  .ftr-nav{grid-template-columns:repeat(2,1fr);gap:28px 24px}
  .ftr-bands{gap:20px}
  .ftr-trust{justify-content:flex-start}
}
@media (max-width:768px){
  .container{padding:0 20px}
  .hdr-inner{padding:0 20px;gap:16px}
  .hdr{height:60px}
  .nav,.desktop-only{display:none!important}
  .mob-toggle{display:inline-flex}
  /* Every non-button CTA tap-area lifts to a comfortable touch size. */
  .btn{min-height:40px}
  .btn-lg{padding:13px 22px;font-size:14px;min-height:48px}
  .btn-sm{min-height:34px}

  /* ══ Mobile footer ═════════════════════════════════════════════════════
     Vertical flow:
       1. Centered brand + description
       2. Coin row (centered)
       3. Trust pill row (centered, wrapping)
       4. Accordion of 4 <details> sections (collapsed by default — JS strips
          the `open` attribute on viewport match ≤ 768px).
       5. Centered legal strip.
     Each <summary> is a 56-px-tall tappable row with an animated "+" / "–"
     marker; every link inside a section gets its own 44-px touch row. */
  .ftr{padding:40px 0 calc(36px + env(safe-area-inset-bottom,0px));margin-top:32px}
  .ftr::before{width:160px}
  .ftr-inner{gap:28px}

  /* 1. Brand */
  .ftr-brand{max-width:none;text-align:center;display:flex;flex-direction:column;align-items:center}
  .ftr-brand .brand{margin:0 auto 10px}
  .ftr-desc{font-size:13px;line-height:1.65;max-width:440px;margin:0 auto}

  /* 2+3. Bands */
  .ftr-bands{flex-direction:column;gap:14px;padding:16px 0}
  .ftr-coins{justify-content:center;gap:18px;width:100%}
  .ftr-coins img{height:15px}
  .ftr-trust{justify-content:center;width:100%;gap:6px}
  .ftr-trust li{font-size:11px;padding:5px 10px}

  /* 4. Accordion shell — hairline dividers, no outer card. */
  .ftr-nav{display:flex;flex-direction:column;grid-template-columns:none;gap:0;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border)}
  .ftr-sec{border-bottom:1px solid var(--border)}
  .ftr-sec:last-child{border-bottom:none}

  /* Summary becomes a tappable row. */
  .ftr-sec > summary{
    display:flex;align-items:center;justify-content:space-between;
    gap:14px;padding:16px 4px;margin:0;min-height:56px;
    font-size:14px;font-weight:700;text-transform:none;letter-spacing:.1px;
    color:var(--text-2);cursor:pointer;user-select:none;
    transition:color .2s var(--ease)}
  .ftr-sec > summary:hover,
  .ftr-sec[open] > summary{color:#f5f9ff}
  .ftr-sec-title{font-size:14px}

  /* "+" / "–" marker — pure CSS, no icon font dependency. */
  .ftr-sec-mark{display:block;position:relative;width:22px;height:22px;flex-shrink:0;
    color:var(--text-3);transition:color .2s var(--ease)}
  .ftr-sec-mark::before,
  .ftr-sec-mark::after{content:"";position:absolute;top:50%;left:50%;
    background:currentColor;border-radius:2px;
    transition:transform .25s var(--ease),opacity .2s var(--ease)}
  .ftr-sec-mark::before{width:12px;height:2px;transform:translate(-50%,-50%)}
  .ftr-sec-mark::after{width:2px;height:12px;transform:translate(-50%,-50%)}
  .ftr-sec[open] > summary .ftr-sec-mark{color:var(--accent)}
  .ftr-sec[open] > summary .ftr-sec-mark::after{
    transform:translate(-50%,-50%) rotate(90deg);opacity:0}

  /* Opened link list */
  .ftr-sec-links{padding:2px 4px 12px}
  .ftr-sec-links a{display:flex;align-items:center;
    font-size:14.5px;padding:11px 0;min-height:44px;
    color:var(--text-2);line-height:1.25}
  .ftr-sec-links a:hover,
  .ftr-sec-links a:focus-visible{color:var(--accent)}

  /* 5. Legal — centered column, subtle separators hidden. */
  .ftr-bottom{flex-direction:column;align-items:center;gap:6px;
    padding-top:22px;text-align:center;font-size:11.5px;line-height:1.55}
  .ftr-sep{display:none}
}

@media (max-width:480px){
  html{font-size:14.5px}
  .container{padding:0 14px}
  .hdr-inner{padding:0 14px;gap:10px}
  .brand{font-size:15px;gap:9px}
  .brand-mark-img{width:28px;height:28px}
  .brand-tld{display:none}
  .ftr{padding:36px 0 calc(32px + env(safe-area-inset-bottom,0px))}
  .ftr-desc{font-size:12.5px}
  .ftr-coins{gap:14px}
  .ftr-coins img{height:14px}
  .ftr-trust li{font-size:10.5px;padding:4px 9px;gap:5px}
  .ftr-trust li i{font-size:12px}
  .ftr-sec > summary{padding:14px 4px;font-size:13.5px}
  .ftr-sec-links a{font-size:14px;padding:10px 0;min-height:42px}
}

/* ═══════════════ MOBILE POLISH ═══════════════
   Broad-stroke rules that every page inherits. Form inputs stay ≥16px on
   iOS (kills the focus-zoom), tables/pre never burst the viewport, and the
   mobile menu hits comfortable touch sizes. */
@media (max-width:768px){
  input,select,textarea{font-size:16px!important}
  /* Prevent any stray table or pre from bursting the viewport */
  table,pre{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* Comfortable touch padding on mobile nav links */
  .mob-nav a{padding:16px 22px;font-size:15px;min-height:44px}
  .mob-nav a i{font-size:19px}
  .mob-actions .btn{padding:14px 16px;font-size:14.5px;min-height:48px}
  .mob-close{width:44px;height:44px;font-size:22px}
  .mob-toggle{width:44px;height:44px}
  /* Auth modal close button — was 34px (below tap minimum). Keep visually compact
     by tightening the inner padding, but give the hit-area a full 44×44. */
  .auth-close{width:44px;height:44px;top:10px;right:10px}
}

/* Ensure inputs in the auth modal stay 16px even on tiny screens (iOS zoom fix) */
.auth-field input[type=text],.auth-field input[type=email],.auth-field input[type=password]{font-size:16px}

/* ═══════════════ TOUCH + MOTION PREFERENCES ═══════════════
   1. On touch devices (no fine pointer), suppress every hover `transform` so
      a tap doesn't leave a lifted/rotated card "stuck" until the next tap.
      Background/colour hovers stay — they're harmless because browsers clear
      them on the next touch anyway. This is the one place `!important` earns
      its keep: it overrides per-component hover rules without touching them.
   2. Users who opted into reduced motion get a near-still page: infinite
      decorative animations stop, transitions collapse to near-zero so their
      browser can still fire transitionend events. */
@media (hover:none){
  *:hover{transform:none!important}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important}
}

/* ═══════════════ AUTH MODAL ═══════════════
   Site-wide sign-in / register dialog. Clicks on the backdrop are intentionally
   ignored — only the × button or ESC close it, so a fat-finger tap never loses
   typed input. Animated fade + scale on open; focus trap is handled in JS. */
.auth-modal{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;padding:24px;overflow-y:auto}
.auth-modal.open{display:flex}
body.cs-auth-open{overflow:hidden}
.auth-backdrop{position:absolute;inset:0;background:rgba(3,6,13,.72);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);animation:authFade .28s var(--ease) both}
@keyframes authFade{from{opacity:0}to{opacity:1}}
@keyframes authRise{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}

.auth-card{position:relative;z-index:1;width:100%;max-width:440px;background:linear-gradient(180deg,rgba(19,26,43,.96),rgba(11,15,25,.98));
  border:1px solid var(--border);border-radius:18px;overflow:hidden;
  box-shadow:0 40px 100px -20px rgba(0,0,0,.8),0 0 0 1px rgba(34,211,238,.06);
  animation:authRise .35s cubic-bezier(.22,.61,.36,1) both}
.auth-card::before{content:"";position:absolute;inset:-1px;border-radius:19px;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(34,211,238,.32),transparent 45%,transparent 55%,rgba(16,185,129,.28));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}

.auth-close{position:absolute;top:14px;right:14px;z-index:2;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text-2);font-size:18px;cursor:pointer;transition:.16s}
.auth-close:hover{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.32);color:#fca5a5;transform:rotate(90deg)}

.auth-head{padding:32px 32px 18px;text-align:center}
.auth-brand{width:48px;height:48px;border-radius:12px;margin:0 auto 14px;overflow:hidden;
  box-shadow:0 12px 30px -10px rgba(34,211,238,.4),0 0 0 1px rgba(255,255,255,.04)}
.auth-brand img{width:100%;height:100%;object-fit:cover;display:block}
.auth-head h2{font-size:22px;font-weight:800;color:#f5f9ff;margin:0 0 6px;letter-spacing:-.3px;line-height:1.2}
.auth-head p{font-size:13px;color:#cbd5e1;line-height:1.55;max-width:340px;margin:0 auto}

/* Segmented tabs with animated underline indicator */
.auth-tabs{position:relative;display:flex;padding:0 32px;margin-bottom:6px}
.auth-tab{flex:1;padding:12px 4px;background:transparent;border:none;color:#94a3b8;font-size:13.5px;font-weight:700;letter-spacing:.2px;cursor:pointer;transition:color .2s;font-family:inherit}
.auth-tab:hover{color:#cbd5e1}
.auth-tab.active{color:#f5f9ff}
.auth-tab-indicator{position:absolute;left:32px;bottom:0;height:2px;width:0;background:linear-gradient(90deg,#22d3ee,#10b981);border-radius:2px 2px 0 0;transition:transform .3s var(--ease),width .3s var(--ease)}
.auth-tabs::after{content:"";position:absolute;left:32px;right:32px;bottom:0;height:1px;background:var(--border)}

/* Inline flash (error/info/success) */
.auth-flash{max-height:0;overflow:hidden;transition:max-height .28s var(--ease);font-size:12.5px;line-height:1.5;margin:0 32px}
.auth-flash.on{max-height:140px;padding:10px 14px;border-radius:10px;margin:14px 32px 0}
.auth-flash.err {background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.32);color:#fecaca}
.auth-flash.ok  {background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.32);color:#bbf7d0}
.auth-flash.info{background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.32);color:#bae6fd}

/* Form panels */
.auth-form{padding:22px 32px 26px;display:flex;flex-direction:column;gap:16px}
.auth-form[hidden]{display:none}

.auth-field{display:flex;flex-direction:column;gap:7px;position:relative}
.auth-field label{font-size:10.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#cbd5e1;display:flex;align-items:center;gap:6px;justify-content:space-between}
.auth-field label .auth-opt{font-weight:600;letter-spacing:.2px;text-transform:none;color:#94a3b8;font-size:10.5px}
.auth-field input[type=text],.auth-field input[type=email],.auth-field input[type=password]{width:100%;padding:13px 14px;border-radius:10px;border:1px solid var(--border-hover);
  background:rgba(10,14,24,.65);color:var(--text);font-family:'Inter',sans-serif;font-size:14.5px;line-height:1.4;outline:none;transition:.18s var(--ease);
  box-shadow:0 1px 0 rgba(255,255,255,.02) inset}
.auth-field input:focus{border-color:rgba(34,211,238,.55);box-shadow:0 0 0 3px rgba(34,211,238,.16);background:rgba(10,14,24,.92)}
.auth-hint{font-size:11px;color:#94a3b8;line-height:1.45}

.auth-pwd-wrap{position:relative;display:flex}
.auth-pwd-wrap input{flex:1;padding-right:48px!important}
.auth-pwd-toggle{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;color:#94a3b8;font-size:17px;cursor:pointer;border-radius:8px;transition:.15s}
.auth-pwd-toggle:hover{background:rgba(34,211,238,.1);color:#67e8f9}

.auth-forgot{align-self:flex-end;margin-top:2px;font-size:11.5px;color:#94a3b8;text-decoration:none;transition:.15s}
.auth-forgot:hover{color:#67e8f9;text-decoration:underline;text-underline-offset:2px}

/* Password strength meter */
.auth-strength{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;color:#94a3b8}
.auth-strength-bar{flex:1;display:flex;gap:3px;height:5px}
.auth-strength-bar span{flex:1;background:rgba(255,255,255,.06);border-radius:2px;transition:.22s}
.auth-strength[data-score="1"] .auth-strength-bar span:nth-child(-n+1){background:#ef4444}
.auth-strength[data-score="2"] .auth-strength-bar span:nth-child(-n+2){background:#f59e0b}
.auth-strength[data-score="3"] .auth-strength-bar span:nth-child(-n+3){background:#22d3ee}
.auth-strength[data-score="4"] .auth-strength-bar span{background:linear-gradient(90deg,#22d3ee,#10b981)}
.auth-strength[data-score="1"] .auth-strength-lbl{color:#fca5a5}
.auth-strength[data-score="2"] .auth-strength-lbl{color:#fbbf24}
.auth-strength[data-score="3"] .auth-strength-lbl{color:#67e8f9}
.auth-strength[data-score="4"] .auth-strength-lbl{color:#6ee7b7}
.auth-strength-lbl{min-width:54px;text-align:right}

/* Terms checkbox */
.auth-terms{display:flex;gap:10px;font-size:12.5px;color:#cbd5e1;cursor:pointer;line-height:1.5;user-select:none;align-items:flex-start;margin-top:2px;position:relative}
.auth-terms input{position:absolute;opacity:0;pointer-events:none}
.auth-terms-box{width:20px;height:20px;border-radius:5px;border:1.5px solid var(--border-hover);background:rgba(255,255,255,.02);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;transition:.18s}
.auth-terms-box i{font-size:13px;color:#06080f;opacity:0;transition:.15s}
.auth-terms input:checked + .auth-terms-box{background:linear-gradient(135deg,#22d3ee,#10b981);border-color:transparent}
.auth-terms input:checked + .auth-terms-box i{opacity:1}
.auth-terms a{color:#67e8f9;text-decoration:none;border-bottom:1px solid rgba(34,211,238,.3)}

/* Submit CTA */
.auth-submit{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 16px;border-radius:11px;border:none;cursor:pointer;
  font-size:14.5px;font-weight:800;color:#06080f;letter-spacing:.1px;font-family:inherit;margin-top:4px;
  background:linear-gradient(90deg,#22d3ee,#10b981);
  box-shadow:0 0 0 1px rgba(16,185,129,.4),0 14px 32px -10px rgba(16,185,129,.48);
  transition:.18s var(--ease)}
.auth-submit:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(16,185,129,.55),0 18px 36px -8px rgba(16,185,129,.58);filter:brightness(1.05)}
.auth-submit:disabled{opacity:.75;cursor:progress}
.auth-submit i{font-size:16px}
.auth-submit .auth-submit-lbl{display:inline-flex;align-items:center;gap:8px}
.auth-submit .auth-spinner{position:absolute;width:18px;height:18px;border:2px solid rgba(6,8,15,.22);border-top-color:#06080f;border-radius:50%;animation:authSpin .7s linear infinite;display:none}
.auth-submit.loading .auth-submit-lbl{visibility:hidden}
.auth-submit.loading .auth-spinner{display:block}
@keyframes authSpin{to{transform:rotate(360deg)}}

/* Footer trust chips */
.auth-foot{padding:14px 24px 22px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;font-size:10.5px;font-weight:700;color:#94a3b8;letter-spacing:.2px;border-top:1px dashed rgba(148,163,184,.16)}
.auth-foot span{display:inline-flex;align-items:center;gap:5px}
.auth-foot i{font-size:13px;color:#67e8f9}

/* ─── Auth modal: TOTP verification panel ─── */
.auth-totp-head{display:flex;gap:14px;align-items:flex-start;padding:4px 0 18px;border-bottom:1px dashed rgba(148,163,184,.16);margin-bottom:4px}
.auth-totp-ico{width:38px;height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  background:linear-gradient(135deg,rgba(34,211,238,.2),rgba(16,185,129,.12));border:1px solid rgba(34,211,238,.35);color:#a5f3fc}
.auth-totp-ico i{font-size:19px}
.auth-totp-head h3{font-size:14px;font-weight:800;color:#f5f9ff;margin:0 0 2px;letter-spacing:-.1px}
.auth-totp-head p{font-size:12px;color:#94a3b8;margin:0;line-height:1.5}
.auth-totp-input{letter-spacing:8px;font-size:19px!important;font-weight:700;text-align:center;font-family:'JetBrains Mono',monospace}
.auth-totp-back{margin-top:10px;display:inline-flex;align-items:center;gap:6px;background:none;border:none;padding:4px 0;color:#94a3b8;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;transition:.15s;align-self:flex-start}
.auth-totp-back i{font-size:13px}
.auth-totp-back:hover{color:#67e8f9}

/* Responsive */
@media (max-width:520px){
  .auth-modal{padding:12px;align-items:flex-end}         /* slide up from bottom on phones */
  .auth-card{max-width:100%;border-radius:18px 18px 0 0;animation:authRiseMob .35s cubic-bezier(.22,.61,.36,1) both}
  .auth-head{padding:28px 22px 14px}
  .auth-head h2{font-size:20px}
  .auth-tabs{padding:0 22px}
  .auth-tab-indicator{left:22px}
  .auth-tabs::after{left:22px;right:22px}
  .auth-flash{margin:0 22px}
  .auth-flash.on{margin:14px 22px 0}
  .auth-form{padding:20px 22px 22px}
  .auth-foot{padding:12px 18px 20px;gap:10px;font-size:10px}
}
@keyframes authRiseMob{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}