/* =============================================
   ETC Compare — styles (matches etc-adv.com look)
   ============================================= */

/* ── SELF-HOSTED FONTS (same as the website) ─── */
@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-weight:600;font-display:swap;src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-weight:700;font-display:swap;src:url('../fonts/inter-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-weight:800;font-display:swap;src:url('../fonts/inter-latin-800-normal.woff2') format('woff2');}
@font-face{font-family:'Cairo';font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;src:url('../fonts/cairo-arabic-400-normal.woff2') format('woff2');}
@font-face{font-family:'Cairo';font-weight:600;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;src:url('../fonts/cairo-arabic-600-normal.woff2') format('woff2');}
@font-face{font-family:'Cairo';font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;src:url('../fonts/cairo-arabic-700-normal.woff2') format('woff2');}
@font-face{font-family:'Cairo';font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;src:url('../fonts/cairo-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Cairo';font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;src:url('../fonts/cairo-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Cairo';font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;src:url('../fonts/cairo-latin-700-normal.woff2') format('woff2');}

/* ── TOKENS ─────────────────────────────────── */
:root{
  --primary:#1B2A6B; --primary-light:#2c42a5; --primary-dark:#0f1a4a;
  --accent:#00AEEF; --accent-dark:#0090c8; --accent-glow:rgba(0,174,239,.25);
  --bg-main:#0a0e27; --bg-secondary:#080c1e;
  --bg-card:rgba(255,255,255,.04); --bg-card-hover:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.07); --border-accent:rgba(0,174,239,.45);
  --text-primary:#fff; --text-secondary:#e2e8f0; --text-muted:#94a3b8;
  --gradient:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);
  --shadow-glow:0 0 60px rgba(0,174,239,.2);
  --shadow-card:0 12px 48px rgba(0,0,0,.4);
  --radius:18px; --radius-lg:28px;
  --transition:all .38s cubic-bezier(.4,0,.2,1);
  --good:#34d399; --bad:#ff5d73; --warn:#fbbf24;
  --font-en:'Inter','Cairo',sans-serif; --font-ar:'Cairo','Inter',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:96px;}
body{background:var(--bg-main);color:var(--text-primary);line-height:1.65;-webkit-font-smoothing:antialiased;
  font-family:var(--font-en);overflow-x:hidden;min-height:100vh;}
html[dir=rtl] body{font-family:var(--font-ar);}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
img,svg{max-width:100%;}
::selection{background:rgba(0,174,239,.35);}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg-secondary)}
::-webkit-scrollbar-thumb{background:#1f2a5c;border-radius:10px}

/* ── BACKGROUND ─────────────────────────────── */
.bg-layer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.hero-bg-orb{position:absolute;border-radius:50%;filter:blur(100px);animation:orbFloat 8s ease-in-out infinite;}
.orb1{width:600px;height:600px;background:rgba(27,42,107,.45);top:-5%;left:-15%;}
.orb2{width:450px;height:450px;background:rgba(0,174,239,.18);bottom:0;right:-10%;animation-delay:-4s;}
.orb3{width:380px;height:380px;background:rgba(27,42,107,.35);top:45%;right:20%;animation-delay:-2s;}
.particles{position:absolute;inset:0;}
.particle{position:absolute;width:3px;height:3px;background:var(--accent);border-radius:50%;opacity:0;animation:particleFade var(--dur) linear var(--delay) infinite;}
@keyframes particleFade{0%{opacity:0;transform:translateY(0)}10%{opacity:.7;transform:translateY(-20px)}90%{opacity:.1;transform:translateY(-110px)}100%{opacity:0;transform:translateY(-130px)}}
@keyframes orbFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-30px) scale(1.04)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,174,239,.6)}50%{box-shadow:0 0 0 8px rgba(0,174,239,0)}}

main,footer,header{position:relative;z-index:1;}
.container{width:100%;max-width:1120px;margin:0 auto;padding:0 20px;}

/* ── NAVBAR ─────────────────────────────────── */
#navbar{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:1000;width:calc(100% - 40px);max-width:1120px;
  background:rgba(10,14,39,.8);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border:1px solid var(--border);border-radius:60px;transition:var(--transition);}
#navbar.scrolled{background:rgba(8,12,30,.97);box-shadow:var(--shadow-glow);border-color:rgba(0,174,239,.2);}
.nav-container{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;gap:12px;}
.nav-logo{display:flex;align-items:center;height:40px;}
.logo-svg{height:100%;width:auto;color:var(--text-primary);}
.nav-links{display:flex;align-items:center;gap:2px;}
.nav-link{padding:7px 15px;font-size:.875rem;font-weight:600;color:var(--text-muted);border-radius:50px;transition:var(--transition);}
.nav-link:hover{color:var(--text-primary);background:rgba(0,174,239,.12);}
.nav-link.active{color:var(--accent);background:rgba(0,174,239,.15);}
.nav-actions{display:flex;align-items:center;gap:10px;}
.lang-toggle-btn{border:1.5px solid var(--border);color:var(--text-secondary);padding:6px 16px;border-radius:50px;font-size:.82rem;font-weight:700;transition:var(--transition);}
.lang-toggle-btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(0,174,239,.08);}
@media(max-width:720px){.nav-links{display:none}}

/* ── HERO ───────────────────────────────────── */
.hero{padding:140px 0 56px;text-align:center;}
.availability-badge{display:inline-flex;align-items:center;gap:10px;padding:7px 18px;border-radius:50px;
  background:rgba(0,174,239,.1);border:1px solid var(--border-accent);color:var(--accent);font-size:.82rem;font-weight:700;letter-spacing:.03em;margin-bottom:22px;}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 2s infinite;}
.hero h1{font-size:clamp(2rem,5.2vw,3.6rem);font-weight:800;line-height:1.2;letter-spacing:-.01em;margin-bottom:18px;}
html[dir=rtl] .hero h1{letter-spacing:0;line-height:1.35;}
.grad{background:linear-gradient(90deg,#fff,var(--accent),#fff);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 6s linear infinite;}
.hero p.lead{max-width:680px;margin:0 auto 28px;color:var(--text-muted);font-size:1.05rem;}
.hero-buttons{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}

/* ── BUTTONS ────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 28px;border-radius:50px;font-weight:700;font-size:.92rem;
  transition:var(--transition);letter-spacing:.02em;position:relative;overflow:hidden;}
.btn-primary{background:var(--gradient);color:#fff;box-shadow:0 4px 20px rgba(0,174,239,.3);}
.btn-primary:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 8px 36px rgba(0,174,239,.45);}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;}
.btn-outline{background:transparent;border:2px solid var(--border-accent);color:var(--accent);}
.btn-outline:hover{background:rgba(0,174,239,.1);transform:translateY(-3px);border-color:var(--accent);}
.btn-sm{padding:7px 16px;font-size:.8rem;border:1.5px solid var(--border);color:var(--text-secondary);border-radius:50px;font-weight:700;transition:var(--transition);}
.btn-sm:hover{border-color:var(--accent);color:var(--accent);background:rgba(0,174,239,.08);}

/* ── SECTIONS / CARDS ───────────────────────── */
section{padding:30px 0;}
.glass{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow-card);}
.tool{padding:30px;}
@media(max-width:600px){.tool{padding:18px;}}
.step-title{display:flex;align-items:center;gap:12px;font-size:1.05rem;font-weight:700;margin-bottom:16px;}
.step-n{width:30px;height:30px;border-radius:50%;background:var(--gradient);display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:800;flex-shrink:0;}
.step + .step{margin-top:28px;}

/* file type picker */
.types{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media(max-width:760px){.types{grid-template-columns:repeat(2,1fr);}}
.type-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius);padding:18px 14px;text-align:center;transition:var(--transition);color:var(--text-secondary);}
.type-card:hover{background:var(--bg-card-hover);border-color:var(--border-accent);transform:translateY(-3px);}
.type-card.active{border-color:var(--accent);background:rgba(0,174,239,.1);box-shadow:0 0 28px var(--accent-glow);color:#fff;}
.type-card svg{width:38px;height:38px;margin-bottom:8px;stroke:var(--accent);}
.type-card b{display:block;font-size:.98rem;}
.type-card small{display:block;color:var(--text-muted);font-size:.76rem;line-height:1.4;margin-top:2px;}

/* drop zones */
.drops{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:700px){.drops{grid-template-columns:1fr;}}
.drop{position:relative;background:var(--bg-card);border:2px dashed rgba(0,174,239,.3);border-radius:var(--radius);padding:26px 18px;text-align:center;cursor:pointer;transition:var(--transition);min-height:150px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;}
.drop:hover,.drop.drag{border-color:var(--accent);background:rgba(0,174,239,.08);box-shadow:0 0 28px var(--accent-glow);}
.drop.has{border-style:solid;border-color:rgba(52,211,153,.55);background:rgba(52,211,153,.06);}
.drop .tag{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
.drop b{font-size:1rem;}
.drop .hint{color:var(--text-muted);font-size:.82rem;}
.drop .fname{color:var(--good);font-size:.86rem;font-weight:700;word-break:break-all;max-width:100%;direction:ltr;}
.drop .fsize{color:var(--text-muted);font-size:.74rem;direction:ltr;}
.drop input{display:none;}
.drop .x{position:absolute;top:10px;inset-inline-end:12px;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.08);display:none;align-items:center;justify-content:center;font-size:.9rem;}
.drop.has .x{display:flex;}
.drop .x:hover{background:rgba(255,93,115,.3);}
.swap{display:flex;justify-content:center;margin-top:10px;}

/* options */
details.opts{margin-top:20px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:var(--radius);padding:4px 18px;}
details.opts summary{cursor:pointer;color:var(--text-secondary);font-weight:700;font-size:.9rem;padding:12px 0;list-style:none;display:flex;align-items:center;gap:8px;}
details.opts summary::-webkit-details-marker{display:none;}
details.opts summary::before{content:'▸';color:var(--accent);transition:var(--transition);}
html[dir=rtl] details.opts summary::before{content:'◂';}
details.opts[open] summary::before{content:'▾';}
.opt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px 22px;padding:6px 0 16px;}
.opt{display:flex;flex-direction:column;gap:5px;font-size:.84rem;color:var(--text-secondary);}
.opt small{color:var(--text-muted);font-size:.74rem;line-height:1.4;}
.opt input[type=number]{background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:10px;color:#fff;padding:8px 12px;font-family:inherit;width:130px;}
.opt input[type=number]:focus{outline:none;border-color:var(--accent);}
.toggle{display:flex;align-items:flex-start;gap:10px;cursor:pointer;}
.toggle input{margin-top:5px;accent-color:var(--accent);width:16px;height:16px;flex-shrink:0;}
.hide{display:none!important;}

.actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:24px;}
#status{color:var(--text-muted);font-size:.9rem;min-height:22px;display:flex;align-items:center;gap:10px;}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;}
.progress{height:5px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:14px;display:none;}
.progress i{display:block;height:100%;width:0;background:var(--gradient);transition:width .3s;}
.errbox{margin-top:16px;padding:14px 18px;border-radius:14px;background:rgba(255,93,115,.1);border:1px solid rgba(255,93,115,.4);color:#ffb4bf;font-size:.9rem;display:none;}

/* ── RESULTS ────────────────────────────────── */
#results{margin-top:26px;}
.verdict{display:flex;align-items:center;gap:16px;padding:20px 24px;border-radius:var(--radius);font-weight:700;font-size:1.05rem;margin-bottom:16px;border:1px solid;}
.verdict .ico{font-size:1.6rem;line-height:1;}
.verdict small{display:block;font-weight:400;font-size:.85rem;opacity:.85;margin-top:2px;}
.verdict.ok{background:rgba(52,211,153,.1);color:var(--good);border-color:rgba(52,211,153,.4);}
.verdict.mid{background:rgba(251,191,36,.1);color:var(--warn);border-color:rgba(251,191,36,.4);}
.verdict.bad{background:rgba(255,93,115,.1);color:var(--bad);border-color:rgba(255,93,115,.4);}
.filebar{display:flex;gap:10px 22px;flex-wrap:wrap;color:var(--text-muted);font-size:.84rem;margin-bottom:14px;}
.filebar b{color:var(--text-secondary);}
.filebar .nm{direction:ltr;unicode-bidi:embed;}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px;}
.chip{padding:7px 16px;border-radius:50px;border:1.5px solid var(--border);font-size:.82rem;font-weight:700;color:var(--text-muted);transition:var(--transition);}
.chip:hover{border-color:var(--accent);color:var(--accent);}
.chip.on{background:rgba(0,174,239,.15);border-color:var(--accent);color:var(--accent);}
.chip .n{opacity:.8;margin-inline-start:6px;}
.spacer{flex:1;}

.sec{margin-bottom:18px;padding:22px;}
.sec h2{font-size:1.02rem;font-weight:800;color:var(--accent);margin-bottom:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.sec h2 .cnt{font-size:.74rem;font-weight:700;color:var(--text-muted);background:rgba(255,255,255,.06);padding:2px 10px;border-radius:20px;}
.note{color:var(--text-muted);font-size:.85rem;margin:6px 0;}
.note.warn{color:var(--warn);}
.note.good{color:var(--good);}
.empty-ok{color:var(--good);font-size:.9rem;padding:4px 0;}

.item{border:1px solid var(--border);border-inline-start:4px solid var(--bad);background:rgba(255,255,255,.03);border-radius:14px;padding:12px 16px;margin-bottom:10px;}
.item.note{border-inline-start-color:var(--warn);}
.item-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px;}
.badge{font-size:.7rem;font-weight:800;padding:3px 11px;border-radius:20px;letter-spacing:.03em;}
.badge.diff{background:rgba(255,93,115,.18);color:var(--bad);}
.badge.note{background:rgba(251,191,36,.18);color:var(--warn);}
.kind{font-size:.82rem;font-weight:700;color:var(--text-secondary);}
.loc{font-size:.78rem;color:var(--text-muted);margin-inline-start:auto;}
.rx{padding:3px 11px;border:1px solid var(--border);border-radius:20px;font-size:.72rem;color:var(--text-muted);transition:var(--transition);}
.rx:hover{border-color:var(--accent);color:var(--accent);}
.diffbox{direction:auto;unicode-bidi:plaintext;background:rgba(0,0,0,.25);border-radius:10px;padding:10px 14px;font-size:.95rem;line-height:1.9;word-break:break-word;white-space:pre-wrap;}
.diffbox ins{background:rgba(52,211,153,.22);color:#6ee7b7;text-decoration:none;border-radius:4px;padding:1px 3px;}
.diffbox del{background:rgba(255,93,115,.22);color:#ff9aa9;text-decoration:line-through;border-radius:4px;padding:1px 3px;}
.diffbox .ws{opacity:.7;font-size:.75em;}
.diffbox ins.tiny,.diffbox del.tiny{padding:2px 6px;font-weight:800;font-size:1.15em;box-shadow:0 0 0 2px currentColor;margin:0 2px;}
.ab{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media(max-width:640px){.ab{grid-template-columns:1fr;}}
.ab > div{background:rgba(0,0,0,.25);border-radius:10px;padding:8px 12px;font-size:.88rem;word-break:break-word;direction:auto;unicode-bidi:plaintext;white-space:pre-wrap;}
.ab .lbl{display:block;font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;margin-bottom:3px;}
.ab .a .lbl{color:#ff9aa9;} .ab .b .lbl{color:#6ee7b7;}
.mono{font-family:Consolas,'SFMono-Regular',monospace;direction:ltr;text-align:left;unicode-bidi:plaintext;}
table.chg{border-collapse:collapse;margin-top:8px;font-size:.85rem;width:100%;}
table.chg td,table.chg th{padding:5px 10px;border-bottom:1px solid var(--border);text-align:start;}
table.chg th{color:var(--text-muted);font-weight:600;font-size:.75rem;}
table.chg td.a{color:#ff9aa9;} table.chg td.b{color:#6ee7b7;}
table.chg td{direction:auto;unicode-bidi:plaintext;}
.snippet{color:var(--text-muted);font-size:.84rem;margin-top:6px;direction:auto;unicode-bidi:plaintext;}
.imgchip{display:inline-block;background:rgba(0,174,239,.15);border:1px solid var(--border-accent);color:var(--accent);border-radius:8px;padding:0 8px;font-size:.74rem;font-weight:700;direction:ltr;}
.trunc{color:var(--warn);font-size:.84rem;margin-top:8px;}
.more{margin-top:8px;}

/* PDF region cards */
.regions{display:grid;grid-template-columns:repeat(auto-fill,minmax(480px,1fr));gap:14px;margin-top:12px;}
@media(max-width:560px){.regions{grid-template-columns:1fr;}}
.reg{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:14px;padding:12px;}
.reg.red{border-color:rgba(255,93,115,.5);} .reg.note{border-color:rgba(251,191,36,.45);}
.reg .t{font-size:.9rem;font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:8px;}
.reg .t .n{display:inline-block;background:var(--bad);color:#fff;border-radius:20px;padding:0 10px;font-size:.8rem;}
.reg.note .t .n{background:var(--warn);color:#222;}
.reg.weak .t .n{background:#6b7280;} .reg.color .t .n{background:#4c9aff;}
.reg .d{font-size:.78rem;color:var(--text-muted);margin-bottom:6px;}
.reg .why{font-size:.8rem;color:var(--warn);margin:4px 0;}
.reg .txt{font-size:.8rem;direction:auto;unicode-bidi:plaintext;margin:4px 0;background:rgba(0,0,0,.25);border-radius:8px;padding:6px 9px;word-break:break-word;}
.reg .txt b{color:var(--text-muted);font-weight:600;}
.reg img{max-width:100%;border-radius:8px;display:block;background:#fff;margin-top:6px;}
.reg .acts{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap;}
img.diffimg{max-width:100%;border-radius:12px;border:1px solid var(--border);margin-top:8px;display:block;}
details.inner{margin-top:12px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;padding:8px 14px;}
details.inner summary{cursor:pointer;color:var(--text-muted);font-size:.84rem;}
.wordlist{direction:ltr;text-align:left;font-family:Consolas,monospace;font-size:.78rem;color:var(--text-muted);background:rgba(0,0,0,.25);padding:10px;border-radius:10px;margin-top:6px;}

/* ── HOW IT WORKS ───────────────────────────── */
.sec-title{text-align:center;margin-bottom:26px;}
.sec-title h2{font-size:clamp(1.5rem,3.4vw,2.2rem);font-weight:800;}
.sec-title p{color:var(--text-muted);margin-top:6px;}
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;}
.how .glass{padding:22px;}
.how h3{font-size:1.02rem;margin-bottom:8px;color:var(--accent);}
.how p,.how li{color:var(--text-muted);font-size:.88rem;}
.how ul{padding-inline-start:18px;}

/* ── LOGIN ──────────────────────────────────── */
.login{max-width:420px;margin:0 auto;padding:30px;text-align:center;}
.login input[type=password]{width:100%;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:50px;color:#fff;padding:13px 20px;font-size:1rem;text-align:center;margin:16px 0;font-family:inherit;}
.login input:focus{outline:none;border-color:var(--accent);}

/* ── FOOTER ─────────────────────────────────── */
footer{padding:46px 0 34px;text-align:center;color:var(--text-muted);font-size:.84rem;border-top:1px solid var(--border);margin-top:40px;}
footer .logo-svg{height:34px;margin-bottom:10px;color:#fff;}
footer .tag{color:var(--text-secondary);margin-bottom:4px;}

@media print{.bg-layer,#navbar,.hero,.tool,.how,footer,.toolbar .btn-sm,.rx{display:none!important}}

.opt select{background:#141a37;border:1px solid var(--border);border-radius:10px;color:#fff;padding:9px;font-family:inherit;width:100%;max-width:360px}
.opt select:focus{outline:none;border-color:var(--accent)}
.opt select option{background:#141a37;color:#fff}
.opt select option:disabled{color:#777}