/* ============================================================
   Automation Practice Hub — themed to navtutorial.com
   Light by default, dark via [data-theme="dark"].
   Poppins + JetBrains Mono. Blue (#2563eb/#3b82f6) + cyan (#06b6d4).
   Class names are kept stable so all pages restyle at once.
   ============================================================ */
:root{
  --void:#020817; --void2:#050d1e; --deep:#080f24; --panel:#0c1a30; --surface:#101f38;
  --rim:rgba(255,255,255,.07); --rim2:rgba(255,255,255,.12);
  --b1:#172554; --b2:#1e3a8a; --b3:#1d4ed8; --b4:#2563eb; --b5:#3b82f6; --b6:#60a5fa; --b7:#93c5fd; --b8:#dbeafe;
  --c1:#0e7490; --c2:#06b6d4; --c3:#22d3ee; --c4:#67e8f9;
  --g1:#047857; --g2:#059669; --g3:#10b981; --g4:#34d399;
  --a1:#92400e; --a2:#b45309; --a3:#d97706; --a4:#fbbf24;
  --v1:#3b0764; --v2:#6b21a8; --v3:#7c3aed; --v4:#a78bfa;
  --fail:#e11d48; --fail2:#fb7185;
  --sans:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --disp:var(--sans);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:10px; --r2:16px; --r3:22px; --r4:32px;
  --s0:0 1px 3px rgba(0,0,0,.05);
  --s1:0 2px 10px rgba(0,0,0,.07),0 10px 30px rgba(0,0,0,.06);
  --s2:0 4px 24px rgba(0,0,0,.10),0 24px 64px rgba(0,0,0,.09);
  --s-blue:0 8px 30px rgba(37,99,235,.30);
  --grad-primary:linear-gradient(135deg,var(--b5),var(--b3));
  --grad-cyan:linear-gradient(135deg,var(--b4),var(--c2));
  --accent:var(--b4); --accent-2:var(--c2); --accent-ink:#ffffff;
  --pass:var(--g3); --warn:var(--a3);
}
:root, [data-theme="light"], [data-theme="dark"]{
  --bg:#0a0f1e; --bg-alt:#0d1526; --bg-soft:linear-gradient(180deg,#0d1526 0%,#0a0f1e 100%); --bg-card:#111827;
  --ink:#f0f6ff; --ink2:#d4e2f7; --mid:#8fa8c8; --muted:#6882a4; --ghost:#4a6280;
  --hr:rgba(255,255,255,.08); --hr2:rgba(255,255,255,.05); --hr3:rgba(59,130,246,.2); --slate:rgba(255,255,255,.06); --slate2:rgba(255,255,255,.10);
  --nav-bg:rgba(10,15,30,.9); --nav-stuck:rgba(10,15,30,.97); --nav-border:rgba(255,255,255,.07);
  --footer-bg:#050810; --code-bg:#050810; --code-ink:#cfe0f5;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;transition:background .25s,color .25s}
a{color:var(--b4);text-decoration:none}
a:hover{color:var(--b3)}
h1,h2,h3,h4{font-family:var(--disp);font-weight:800;line-height:1.2;margin:0 0 .4em;letter-spacing:-.3px;color:var(--ink)}
h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.08rem}h4{font-size:.95rem}
p{margin:0 0 .8em}
code{font-family:var(--mono);font-size:.85em;background:var(--slate);padding:.12em .4em;border-radius:5px;color:var(--b3)}
:focus-visible{outline:2px solid var(--b4);outline-offset:2px;border-radius:4px}
hr{border:none;border-top:1px solid var(--hr);margin:16px 0}
img{max-width:100%}

.wrap{max-width:1080px;margin:0 auto;padding:26px}
.wrap-narrow{max-width:640px;margin:0 auto;padding:26px}
.lead{color:var(--mid);max-width:72ch;margin-bottom:22px}
.grid{display:grid;gap:16px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.grid.three{grid-template-columns:repeat(3,1fr)}
.grid.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.grid.two,.grid.three,.grid.four{grid-template-columns:1fr}}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.spacer{flex:1}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}
.center{text-align:center}

.appbar{display:flex;align-items:center;gap:14px;padding:0 26px;height:64px;
  border-bottom:1px solid var(--nav-border);position:sticky;top:0;z-index:9999;
  background:var(--nav-bg);backdrop-filter:blur(30px) saturate(200%);-webkit-backdrop-filter:blur(30px) saturate(200%)}
.appbar .brand{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:900;letter-spacing:-.5px;color:var(--ink)}
.appbar .logo{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  font-family:var(--mono);font-size:11px;font-weight:700;color:#fff;
  background:linear-gradient(145deg,var(--b4),var(--b2));
  box-shadow:0 4px 16px rgba(37,99,235,.38),inset 0 1px 0 rgba(255,255,255,.22)}
.appbar a.home{color:var(--mid);font-size:.85rem;font-weight:600}
.appbar a.home:hover{color:var(--b4)}
.appbar .path{font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.appbar .path b{color:var(--b4)}
/* announcement bar (mirrors site .announce) */
.announce{background:linear-gradient(90deg,#0f2460,var(--b3),var(--c2),var(--b3),#0f2460);background-size:300% 100%;animation:gradShift 7s ease infinite;padding:9px 0;color:#fff}
.announce-inner{max-width:1080px;margin:0 auto;padding:0 26px;display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:.8rem;font-weight:600}
.announce-inner a{color:#fff;text-decoration:underline;font-weight:700}
@keyframes gradShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

.panel{background:var(--bg-card);border:1px solid var(--hr);border-radius:var(--r2);padding:20px;margin-bottom:20px;box-shadow:var(--s0)}
.panel h3{display:flex;align-items:center;gap:9px;margin-bottom:4px}
.panel .hint{color:var(--muted);font-size:.85rem;margin-bottom:14px}
.tag{font-family:var(--mono);font-size:.66rem;padding:2px 9px;border-radius:100px;border:1px solid var(--hr3);color:var(--b3);background:var(--slate);letter-spacing:.3px}
.tag.adv{color:var(--a2);border-color:#fde68a;background:#fef3c7}
[data-theme="dark"] .tag.adv{color:#fcd34d;border-color:rgba(245,158,11,.25);background:rgba(245,158,11,.15)}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:.82rem;font-weight:700}
.field small{color:var(--muted);font-size:.75rem}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],
input[type=tel],input[type=url],input[type=date],input[type=color],textarea,select{
  background:var(--bg);border:1px solid var(--hr);color:var(--ink);border-radius:var(--r);
  padding:9px 12px;font-family:var(--sans);font-size:.9rem;width:100%;transition:border-color .15s,box-shadow .15s}
input:focus,textarea:focus,select:focus{border-color:var(--b4);outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.15)}
input:disabled,button:disabled,select:disabled{opacity:.5;cursor:not-allowed}
textarea{min-height:80px;resize:vertical}
input[type=range]{accent-color:var(--b4);width:100%}
.check{display:flex;align-items:center;gap:9px;margin:7px 0;font-size:.9rem;cursor:pointer}
.check input{width:17px;height:17px;accent-color:var(--b4);cursor:pointer}
.err{color:var(--fail);font-size:.8rem;margin-top:4px}

.btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:none;border-radius:var(--r);
  padding:10px 18px;font-weight:700;font-family:var(--sans);font-size:.9rem;
  background:linear-gradient(135deg,var(--b5),var(--b3));color:#fff;box-shadow:var(--s-blue);
  transition:transform .12s,box-shadow .2s,filter .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 34px rgba(37,99,235,.45)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:var(--slate);border:1px solid var(--hr);color:var(--ink);box-shadow:none}
.btn.ghost:hover{border-color:var(--b4);color:var(--b4);transform:none}
.btn.danger{background:linear-gradient(135deg,var(--fail2),var(--fail));color:#fff}
.btn.violet{background:linear-gradient(135deg,var(--v4),var(--v3));color:#fff}
.btn.small{padding:6px 12px;font-size:.8rem;box-shadow:none}
.btn.block{width:100%;justify-content:center}
.btnrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

.out{background:var(--code-bg);border:1px solid var(--rim2);border-radius:var(--r);font-family:var(--mono);
  font-size:.82rem;color:var(--code-ink);padding:12px 14px;margin-top:14px;min-height:44px;
  white-space:pre-wrap;word-break:break-word}
.out.empty{color:#5f7290}
.out .ok,.ok{color:var(--g4)} .out .no,.no{color:var(--fail2)} .out .wr,.wr{color:var(--a4)}

.badge{font-family:var(--mono);font-size:.72rem;padding:3px 9px;border-radius:6px;display:inline-flex;
  align-items:center;gap:6px;border:1px solid var(--hr);color:var(--muted);background:var(--slate)}
.badge.pass{color:var(--g2);border-color:#a7f3d0;background:#d1fae5}
.badge.fail{color:#be123c;border-color:#fecaca;background:#fee2e2}
[data-theme="dark"] .badge.pass{color:#6ee7b7;border-color:rgba(16,185,129,.25);background:rgba(16,185,129,.15)}
[data-theme="dark"] .badge.fail{color:#fca5a5;border-color:rgba(239,68,68,.25);background:rgba(239,68,68,.15)}
.badge.count{background:var(--b4);color:#fff;border:none;font-weight:700}

table{width:100%;border-collapse:collapse;font-size:.87rem}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--hr)}
th{color:var(--muted);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;user-select:none}
th.sortable{cursor:pointer}
th.sortable:hover{color:var(--b4)}
tbody tr:hover{background:var(--slate)}
.pager{display:flex;gap:6px;align-items:center;margin-top:12px;font-size:.82rem;color:var(--muted)}

.spinner{width:26px;height:26px;border:3px solid var(--hr);border-top-color:var(--b4);border-radius:50%;animation:spin .8s linear infinite;display:inline-block;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.bar{background:var(--bg-alt);border:1px solid var(--hr);border-radius:100px;height:16px;overflow:hidden}
.bar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--b4),var(--c2));transition:width .3s}
.dropzone{border:2px dashed var(--hr);border-radius:var(--r2);padding:24px;text-align:center;color:var(--muted)}
.dropzone.over{border-color:var(--b4);color:var(--b4);background:var(--slate)}
.drag-item{display:inline-flex;padding:10px 16px;background:var(--slate);border:1px solid var(--hr);border-radius:var(--r);cursor:grab;font-weight:700;font-size:.85rem;color:var(--ink)}
.modal-back{position:fixed;inset:0;background:rgba(3,7,18,.55);display:none;place-items:center;z-index:100;padding:20px}
.modal-back.open{display:grid}
.modal{background:var(--bg-card);border:1px solid var(--hr);border-radius:var(--r2);padding:24px;max-width:460px;width:100%;box-shadow:var(--s2)}
.pill{display:inline-block;font-family:var(--mono);font-size:.7rem;padding:2px 10px;border-radius:100px;border:1px solid var(--hr);color:var(--muted);background:var(--bg-alt)}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.card{background:var(--bg-card);border:1px solid var(--hr);border-radius:var(--r2);padding:18px;display:flex;flex-direction:column;box-shadow:var(--s0);transition:transform .16s,box-shadow .2s,border-color .2s}
.card:hover{border-color:var(--hr3);box-shadow:var(--s1);transform:translateY(-2px)}
.card h3{margin-bottom:6px}
.card p{color:var(--muted);font-size:.85rem;flex:1}

.shell{display:grid;grid-template-columns:230px 1fr;min-height:calc(100vh - 64px)}
.side{background:var(--bg-alt);border-right:1px solid var(--hr);padding:14px 10px;position:sticky;top:64px;height:calc(100vh - 64px);overflow-y:auto}
.side a{display:flex;align-items:center;gap:9px;color:var(--mid);padding:8px 10px;border-radius:9px;font-size:.88rem;font-weight:600}
.side a:hover{background:var(--slate);color:var(--ink)}
.side a.active{background:var(--slate);color:var(--b3)}
.side .group{color:var(--muted);font-size:.66rem;font-family:var(--mono);text-transform:uppercase;letter-spacing:1px;padding:12px 10px 5px}
.view{display:none}
.view.active{display:block;animation:fade .22s ease}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:820px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;display:flex;flex-wrap:wrap;gap:4px}
  .side .group{width:100%}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.guide{max-width:920px;margin:0 auto;padding:26px}
.guide h2{margin-top:8px}
.guide h3{margin-top:26px;padding-top:6px}
.guide .step{color:var(--muted);font-size:.72rem;font-family:var(--mono);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
.codeblock{position:relative;margin:12px 0 20px}
.codeblock pre{margin:0;background:var(--code-bg);border:1px solid var(--rim2);border-radius:var(--r2);padding:16px;overflow:auto;font-family:var(--mono);font-size:.82rem;line-height:1.6;color:var(--code-ink)}
.codeblock code{background:none;padding:0;color:inherit;font-size:inherit}
.copybtn{position:absolute;top:8px;right:8px;font-family:var(--mono);font-size:.68rem;padding:4px 9px;border:1px solid rgba(255,255,255,.14);border-radius:6px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.6);cursor:pointer}
.copybtn:hover{color:var(--b6);border-color:var(--b6)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--hr);margin-bottom:-1px}
.tabs button{font-family:var(--sans);font-size:.8rem;font-weight:700;padding:7px 13px;border:1px solid transparent;border-bottom:none;border-radius:10px 10px 0 0;background:transparent;color:var(--muted);cursor:pointer}
.tabs button.active{color:var(--b6);background:var(--code-bg);border-color:var(--rim2)}
.tabgroup .pane{display:none}
.tabgroup .pane.active{display:block}
.tokline code{font-family:var(--mono);font-size:.82rem}
.callout{border:1px solid var(--hr);border-left:3px solid var(--b4);border-radius:var(--r);background:var(--bg-alt);padding:12px 16px;margin:14px 0;font-size:.88rem}
.callout.warn{border-left-color:var(--a3)}
.callout b{color:var(--b4)}
.map-table td:first-child{font-family:var(--mono);font-size:.8rem;color:var(--b3);white-space:nowrap}

.method{font-family:var(--mono);font-weight:700;font-size:.7rem;padding:2px 8px;border-radius:5px;display:inline-block;min-width:52px;text-align:center}
.m-get{background:rgba(16,185,129,.15);color:#6ee7b7;border:1px solid rgba(16,185,129,.3)}
.m-post{background:rgba(37,99,235,.18);color:#93c5fd;border:1px solid rgba(37,99,235,.35)}
.m-put{background:rgba(245,158,11,.15);color:#fcd34d;border:1px solid rgba(245,158,11,.3)}
.m-del{background:rgba(225,29,72,.15);color:#fda4af;border:1px solid rgba(225,29,72,.3)}

.console{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:820px){.console{grid-template-columns:1fr}}
.reqbar{display:flex;gap:8px;margin-bottom:12px}
.reqbar select{max-width:110px;font-family:var(--mono);font-weight:700}
.respmeta{display:flex;gap:10px;align-items:center;margin-bottom:8px;font-family:var(--mono);font-size:.82rem}
.status-pill{font-family:var(--mono);font-weight:700;padding:2px 10px;border-radius:6px}
.s2{background:rgba(16,185,129,.15);color:#6ee7b7}.s3{background:rgba(245,158,11,.15);color:#fcd34d}.s4{background:rgba(225,29,72,.15);color:#fda4af}.s5{background:rgba(225,29,72,.15);color:#fda4af}

.sitefooter{background:var(--footer-bg);border-top:1px solid var(--rim);margin-top:44px;padding:56px 0 28px;color:rgba(255,255,255,.4)}
.sitefooter .wrap{padding:0 32px}
.sitefooter .ft-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;margin-bottom:40px}
@media(max-width:820px){.sitefooter .ft-grid{grid-template-columns:1fr}}
.sitefooter .brandmark{font-family:var(--disp);font-weight:900;color:#fff;font-size:1.05rem;display:flex;align-items:center;gap:10px}
.sitefooter .brandmark em{color:var(--b5);font-style:normal}
.sitefooter .ft-brand p{color:rgba(255,255,255,.30);font-size:.85rem;line-height:1.9;margin-top:12px;max-width:300px}
.sitefooter .ft-col h4{font-family:var(--disp);font-size:.68rem;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.24);margin-bottom:16px}
.sitefooter .ft-col a{display:block;color:rgba(255,255,255,.42);font-size:.85rem;padding:5px 0}
.sitefooter .ft-col a:hover{color:#fff}
.sitefooter .ft-social{display:flex;gap:10px;margin-top:18px}
.sitefooter .ft-sc{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.5);font-size:13px;transition:all .2s}
.sitefooter .ft-sc:hover{background:rgba(37,99,235,.25);border-color:rgba(37,99,235,.4);color:var(--b6);transform:translateY(-2px)}
.sitefooter .ft-bottom{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding-top:22px;border-top:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.24);font-size:.8rem}
.sitefooter .ft-bottom a{color:rgba(255,255,255,.4)}
.sitefooter .logo{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:700;color:#fff;background:linear-gradient(145deg,var(--b4),var(--b2))}

/* ---------- compatibility aliases (legacy token names used inline) ---------- */
:root, [data-theme="light"], [data-theme="dark"]{
  --line:var(--hr);
  --surface:var(--bg-card);
  --surface-2:var(--slate);
  --text:var(--ink);
}