@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}

/* ── THEME TOKENS ── */
:root{
  --ink:#0B0F1A;--navy:#090C16;--slate:#141A2A;--slate2:#1C2438;
  --iris:#5B5BD6;--iris-l:#7B7BE6;--iris-dim:rgba(91,91,214,.12);--iris-glow:rgba(91,91,214,.06);
  --p1:rgba(255,255,255,.92);--p2:rgba(255,255,255,.55);--p3:rgba(255,255,255,.28);
  --border:rgba(255,255,255,.08);--border2:rgba(255,255,255,.14);
  --green:#16A34A;--green-dim:rgba(22,163,74,.12);
  --amber:#D97706;--amber-dim:rgba(217,119,6,.12);
  --red:#E5484D;--red-dim:rgba(229,72,77,.1);
  --bg:var(--navy);--surface:var(--slate);--surface2:var(--slate2);
  --text:var(--p1);--text2:var(--p2);--text3:var(--p3);
  --b:var(--border);--b2:var(--border2);
}
[data-theme="light"]{
  --bg:#F6F7FB;--surface:#FFFFFF;--surface2:#F0F1F7;
  --text:rgba(11,15,26,.92);--text2:rgba(11,15,26,.55);--text3:rgba(11,15,26,.35);
  --b:rgba(11,15,26,.08);--b2:rgba(11,15,26,.14);
  --navy:#F6F7FB;--ink:#F0F1F7;--slate:#FFFFFF;--slate2:#F0F1F7;
  --p1:rgba(11,15,26,.92);--p2:rgba(11,15,26,.55);--p3:rgba(11,15,26,.35);
  --border:rgba(11,15,26,.08);--border2:rgba(11,15,26,.14);
  --iris-dim:rgba(91,91,214,.08);--iris-glow:rgba(91,91,214,.04);
  --green-dim:rgba(22,163,74,.08);--amber-dim:rgba(217,119,6,.08);--red-dim:rgba(229,72,77,.07);
}

body{background:var(--bg);color:var(--p1);font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;line-height:1.7;min-height:100vh;transition:background .2s,color .2s;}

/* ── TOP NAV ── */
.topnav{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--b);padding:0 32px;height:56px;display:flex;align-items:center;gap:16px;}
.nav-logo{display:flex;align-items:center;gap:9px;text-decoration:none;flex-shrink:0;}
.logo-icon{width:28px;height:28px;border-radius:7px;object-fit:cover;flex-shrink:0;display:block;}
.logo-text{font-size:16px;font-weight:600;color:var(--p1);letter-spacing:-.3px;}
.nav-sep{color:var(--p3);font-size:18px;font-weight:300;}
.nav-label{font-size:14px;color:var(--p2);font-weight:500;}
.nav-search{flex:1;max-width:360px;margin-left:auto;position:relative;}
.nav-search input{width:100%;background:var(--slate);border:1px solid var(--b2);border-radius:8px;padding:7px 14px 7px 36px;font-family:inherit;font-size:13px;color:var(--p1);outline:none;transition:border-color .15s;}
.nav-search input::placeholder{color:var(--p3);}
.nav-search input:focus{border-color:var(--iris);}
.search-ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--p3);pointer-events:none;}
.theme-toggle{background:var(--slate);border:1px solid var(--b2);border-radius:8px;padding:6px 10px;cursor:pointer;font-size:16px;color:var(--p2);transition:all .15s;line-height:1;}
.theme-toggle:hover{border-color:var(--iris);color:var(--iris-l);}
.nav-wa{display:flex;align-items:center;gap:7px;background:var(--iris);color:#fff;text-decoration:none;font-size:13px;font-weight:500;padding:7px 14px;border-radius:8px;white-space:nowrap;transition:background .15s;flex-shrink:0;}
.nav-wa:hover{background:var(--iris-l);}
@media(max-width:640px){.nav-label{display:none;}.nav-wa span{display:none;}}

/* ── PAGE LAYOUT ── */
.page-wrap{max-width:1100px;margin:0 auto;padding:40px 32px 80px;display:grid;grid-template-columns:1fr 240px;gap:48px;align-items:start;}
@media(max-width:800px){.page-wrap{grid-template-columns:1fr;padding:24px 16px 60px;}.sidebar{display:none;}}

/* ── BREADCRUMB ── */
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--p3);margin-bottom:24px;flex-wrap:wrap;}
.breadcrumb a{color:var(--p2);text-decoration:none;transition:color .12s;}
.breadcrumb a:hover{color:var(--iris-l);}

/* ── ARTICLE HEADER ── */
.eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--iris-l);background:var(--iris-dim);padding:4px 10px;border-radius:20px;margin-bottom:14px;}
.art-title{font-size:28px;font-weight:600;color:var(--p1);line-height:1.3;letter-spacing:-.5px;margin-bottom:14px;}
.art-meta{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--p3);padding-bottom:24px;border-bottom:1px solid var(--b);margin-bottom:32px;flex-wrap:wrap;}
.meta-dot{width:3px;height:3px;border-radius:50%;background:var(--p3);}
.art-intro{font-size:15px;color:var(--p2);line-height:1.75;margin-bottom:36px;padding:16px 20px;background:var(--iris-glow);border-left:3px solid var(--iris);border-radius:0 8px 8px 0;}
.art-intro strong{color:var(--p1);}

/* ── SECTION LABELS ── */
.sec-label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--p3);margin:44px 0 20px;display:flex;align-items:center;gap:10px;}
.sec-label::after{content:'';flex:1;height:1px;background:var(--b);}

/* ── STEPS ── */
.steps{display:flex;flex-direction:column;}
.step{display:grid;grid-template-columns:48px 1fr;gap:0 16px;position:relative;}
.step:not(:last-child)::before{content:'';position:absolute;left:23px;top:48px;bottom:0;width:1px;background:var(--b);}
.step-num{width:48px;height:48px;border-radius:50%;background:var(--slate);border:1px solid var(--b2);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:500;color:var(--iris-l);flex-shrink:0;position:relative;z-index:1;}
.step-body{padding:10px 0 36px;}
.step-title{font-size:16px;font-weight:600;color:var(--p1);margin-bottom:8px;}
.step-desc{font-size:14px;color:var(--p2);line-height:1.7;margin-bottom:14px;}
.step-desc strong{color:var(--p1);}

/* ── SCREEN MOCK ── */
.screen-mock{background:var(--slate);border:1px solid var(--b2);border-radius:12px;overflow:hidden;margin-top:4px;}
.screen-bar{background:var(--ink);border-bottom:1px solid var(--b);padding:10px 16px;display:flex;align-items:center;gap:10px;}
.screen-dots{display:flex;gap:5px;}
.dot{width:8px;height:8px;border-radius:50%;}
.dot-r{background:#E5484D;}.dot-y{background:#D97706;}.dot-g{background:#16A34A;}
.screen-url{flex:1;background:var(--slate2);border-radius:5px;padding:4px 10px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--p3);}
.screen-body{padding:18px;}

/* ── FORM ELEMENTS (mock) ── */
.form-row{margin-bottom:14px;}
.form-label{font-size:11px;font-weight:600;color:var(--p3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px;display:block;}
.form-input{width:100%;background:var(--ink);border:1px solid var(--b2);border-radius:8px;padding:9px 12px;font-size:13px;color:var(--p2);font-family:inherit;}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;}
.chip{padding:5px 12px;border-radius:20px;font-size:12px;font-weight:500;border:1px solid var(--b2);color:var(--p2);}
.chip.on{background:var(--iris-dim);border-color:var(--iris);color:var(--iris-l);}
.varpill{display:inline-block;background:var(--iris-dim);color:var(--iris-l);font-family:'JetBrains Mono',monospace;font-size:11px;padding:1px 6px;border-radius:4px;}

/* ── CALLOUTS ── */
.callout{display:flex;gap:12px;padding:14px 16px;border-radius:10px;font-size:13.5px;line-height:1.65;margin:20px 0;}
.callout-body{color:var(--p2);}
.callout-body strong{color:var(--p1);font-weight:600;}
.callout-body a{color:var(--iris-l);}
.callout.tip{background:var(--green-dim);border:1px solid rgba(22,163,74,.2);}
.callout.tip .ci{color:var(--green);}
.callout.warn{background:var(--amber-dim);border:1px solid rgba(217,119,6,.2);}
.callout.warn .ci{color:var(--amber);}
.callout.info{background:var(--iris-dim);border:1px solid rgba(91,91,214,.2);}
.callout.info .ci{color:var(--iris-l);}
.callout.danger{background:var(--red-dim);border:1px solid rgba(229,72,77,.2);}
.callout.danger .ci{color:var(--red);}
.ci{font-size:16px;flex-shrink:0;margin-top:2px;}

/* ── TABLES ── */
.help-table{width:100%;border-collapse:collapse;font-size:13px;margin:16px 0;}
.help-table th{text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--p3);padding:8px 12px;border-bottom:1px solid var(--b);}
.help-table td{padding:10px 12px;border-bottom:1px solid var(--b);color:var(--p2);vertical-align:top;}
.help-table tr:last-child td{border-bottom:none;}
.help-table code{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--iris-l);background:var(--iris-dim);padding:1px 6px;border-radius:4px;}

/* ── STATUS BADGES ── */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:500;}
.badge .bd{width:5px;height:5px;border-radius:50%;}
.badge-ok{background:var(--green-dim);color:#4ADE80;border:1px solid rgba(22,163,74,.25);}
.badge-ok .bd{background:#4ADE80;}
.badge-pending{background:var(--amber-dim);color:#FCD34D;border:1px solid rgba(217,119,6,.25);}
.badge-pending .bd{background:#FCD34D;}
.badge-fail{background:var(--red-dim);color:#F87171;border:1px solid rgba(229,72,77,.2);}
.badge-fail .bd{background:#F87171;}

/* ── DO / DON'T ROWS ── */
.do-dont{display:flex;flex-direction:column;gap:10px;margin:16px 0;}
.dd-row{background:var(--slate);border:1px solid var(--b);border-radius:10px;padding:14px 16px;display:flex;gap:12px;}
.dd-icon{font-size:18px;flex-shrink:0;line-height:1.4;}
.dd-body .dd-title{font-size:14px;font-weight:500;color:var(--p1);margin-bottom:3px;}
.dd-body .dd-desc{font-size:13px;color:var(--p2);}
code.good{color:var(--green);}code.bad{color:var(--red);}

/* ── NEXT CARDS ── */
.next-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;}
@media(max-width:500px){.next-grid{grid-template-columns:1fr;}}
.next-card{background:var(--slate);border:1px solid var(--b2);border-radius:10px;padding:16px;text-decoration:none;display:flex;flex-direction:column;gap:6px;transition:border-color .15s,background .15s;}
.next-card:hover{border-color:var(--iris);background:var(--slate2);}
.nc-label{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--p3);}
.nc-title{font-size:14px;font-weight:500;color:var(--p1);line-height:1.4;}
.nc-arrow{font-size:16px;color:var(--iris);margin-top:auto;}

/* ── FEEDBACK ── */
.feedback{margin-top:48px;padding:24px;background:var(--slate);border:1px solid var(--b);border-radius:12px;text-align:center;}
.feedback p{font-size:14px;color:var(--p2);margin-bottom:14px;}
.fb-btns{display:flex;gap:10px;justify-content:center;}
.fb-btn{display:flex;align-items:center;gap:7px;padding:8px 20px;border-radius:8px;border:1px solid var(--b2);background:transparent;color:var(--p2);font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:all .12s;}
.fb-btn:hover{border-color:var(--iris);color:var(--iris-l);}
.fb-btn.yes:hover{background:var(--green-dim);border-color:var(--green);color:#4ADE80;}
.fb-btn.no:hover{background:var(--red-dim);border-color:var(--red);color:#F87171;}
.fb-thanks{display:none;font-size:14px;color:var(--green);font-weight:500;}

/* ── SIDEBAR ── */
.sidebar{position:sticky;top:80px;}
.sidebar-card{background:var(--slate);border:1px solid var(--b);border-radius:12px;padding:20px;margin-bottom:14px;}
.sidebar-title{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--p3);margin-bottom:14px;}
.toc-list{list-style:none;display:flex;flex-direction:column;gap:3px;}
.toc-list a{font-size:13px;color:var(--p2);text-decoration:none;padding:5px 10px;border-radius:6px;display:block;border-left:2px solid transparent;transition:all .12s;}
.toc-list a:hover,.toc-list a.active{color:var(--iris-l);border-left-color:var(--iris);background:var(--iris-glow);}
.wa-cta{display:flex;align-items:center;gap:10px;background:var(--iris-dim);border:1px solid rgba(91,91,214,.25);color:var(--iris-l);border-radius:10px;padding:14px 16px;text-decoration:none;font-size:13px;font-weight:500;transition:all .15s;width:100%;}
.wa-cta:hover{background:rgba(91,91,214,.2);border-color:var(--iris);}
.wa-cta span{line-height:1.3;}
.wa-cta small{display:block;font-size:11px;color:var(--p3);font-weight:400;margin-top:1px;}

/* ── FOOTER ── */
.help-footer{border-top:1px solid var(--b);padding:24px 32px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--p3);flex-wrap:wrap;gap:12px;}
.help-footer a{color:var(--p3);text-decoration:none;transition:color .12s;}
.help-footer a:hover{color:var(--p2);}
.footer-links{display:flex;gap:20px;}

/* ── MISC ── */
.prose p{font-size:14px;color:var(--p2);line-height:1.75;margin-bottom:14px;}
.prose ul,.prose ol{font-size:14px;color:var(--p2);padding-left:20px;display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.prose strong{color:var(--p1);}
.prose a{color:var(--iris-l);}
.inline-code{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--iris-l);background:var(--iris-dim);padding:2px 7px;border-radius:4px;}

@media(prefers-reduced-motion:reduce){*{transition:none!important;}}