/* ============================================================
   AiT Tools v2 — shared design layer
   Loaded last on every page (hub, kits, 84 tools) by _shared/build-v2.py.
   Remove the V2 block from a page to get the v1 look back.
   Layout idea: ink-glass panels floating over a faint blueprint grid,
   one ice-blue accent for navigation, gold reserved for Pro.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@500;600;700&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Heebo:wght@400;500;700&display=swap");

html:root{
  --ink:#05070d;
  --bg:#070a12;
  --glass:rgba(160,180,255,.045);
  --glass-2:rgba(160,180,255,.075);
  --surface:rgba(160,180,255,.045);
  --card:rgba(160,180,255,.06);
  --border:rgba(176,192,255,.13);
  --border-hi:rgba(200,214,255,.28);
  --text:#e9edf9;
  --muted:#8e97b5;
  --ice:#8fd3ff;
  --ice-ink:#04121d;
  --gold:#f2c46d;
  --gold-ink:#1d1405;
  --green:#5ee0a0;
  --r:16px;
  --display:"Unbounded","Heebo",ui-sans-serif,system-ui,sans-serif;
  --body:"Geist","Heebo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:dark;
}
html body[data-root]{--a:var(--ice)!important}

/* ---------- ground ---------- */
html body{
  font-family:var(--body);background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;position:relative;
}
html body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60vmax 40vmax at 12% -8%, rgba(70,110,255,.20), transparent 60%),
    radial-gradient(50vmax 36vmax at 105% 10%, rgba(20,190,220,.13), transparent 62%),
    radial-gradient(70vmax 50vmax at 50% 120%, rgba(120,80,255,.10), transparent 60%),
    var(--bg);
}
html body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(170,190,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(170,190,255,.045) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 0%,transparent 70%);
          mask-image:radial-gradient(ellipse at 50% 0%,#000 0%,transparent 70%);
}
html ::selection{background:color-mix(in srgb,var(--ice) 35%,transparent)}
html *{scrollbar-width:thin;scrollbar-color:rgba(170,190,255,.25) transparent}

/* ---------- type ---------- */
html header h1,html .v2-h1{
  font-family:var(--display);font-weight:600;letter-spacing:-.025em;line-height:1.08;text-wrap:balance;
}
html header h1{font-size:clamp(1.9rem,4.4vw,3.1rem)}
html header h1 span{color:var(--primary,var(--ice))}
html h2,html h3,html h4{letter-spacing:-.012em;text-wrap:balance}
html main>h2,html .ctr>h2{font-size:1.25rem;font-weight:600;display:flex;align-items:center;gap:10px}
html main>h2::before,html .ctr>h2::before{content:"";width:18px;height:1px;background:linear-gradient(90deg,var(--ice),transparent)}
html header p{color:var(--muted)}
html .kicker,html .badges span,html .v2-eyebrow{
  font-family:var(--mono);font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:.7rem;
}
html .kicker{
  background:color-mix(in srgb,var(--a,var(--ice)) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--a,var(--ice)) 35%,transparent);
  color:var(--a,var(--ice));padding:5px 12px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;
}
html .badges span{background:var(--glass);border:1px solid var(--border);color:var(--muted);border-radius:999px;padding:4px 10px}

/* ---------- glass surfaces ---------- */
html .card,html .tool,html .bc,html .tc,html .wf,html .plan,html .st,html details.panel,
html .tier,html .tier-box,html .stat,html .others a,html .faq details,html .xpn a,html .qr,html .aa,html .v2-panel{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  border:1px solid var(--border);
  border-radius:var(--r);
  -webkit-backdrop-filter:blur(14px) saturate(135%);backdrop-filter:blur(14px) saturate(135%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 18px 40px -28px rgba(0,0,0,.9);
}
html .stat{border-radius:12px}
html .tc{border-radius:14px}
html a.bc,html a.tc,html .others a,html .xpn a,html a.qr,html .wf{transition:border-color .2s,transform .2s,box-shadow .2s}
html a.bc:hover,html a.tc:hover,html .others a:hover,html .xpn a:hover,html a.qr:hover{
  border-color:color-mix(in srgb,var(--c,var(--ice)) 55%,transparent);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 22px 46px -26px color-mix(in srgb,var(--c,var(--ice)) 55%,transparent);
}
html .bc{border-top:1px solid color-mix(in srgb,var(--c) 70%,transparent)!important;position:relative;overflow:hidden}
html .bc::after{content:"";position:absolute;inset:0 0 auto;height:90px;pointer-events:none;
  background:radial-gradient(120% 100% at 0% 0%,color-mix(in srgb,var(--c) 16%,transparent),transparent 70%)}
html .bc .pr{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums}
html .bc .tl{color:#b9c1dc}
html .lock .ov{background:rgba(5,7,13,.45);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}

/* ---------- icons ---------- */
html .phi{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.16em;flex:none;line-height:0}
html .phi svg{width:100%;height:100%;display:block}
html .bc>.i,html .tool>.i,html .tc>.i,html .wf .wh .i,html .qr>.i,html .st>.i,html .v2-tile{
  display:grid;place-items:center;flex:none;font-size:1rem!important;line-height:0!important;
  width:2.5rem;height:2.5rem;border-radius:12px;
  color:var(--c,var(--a,var(--primary,var(--ice))));
  background:color-mix(in srgb,var(--c,var(--a,var(--primary,var(--ice)))) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--c,var(--a,var(--primary,var(--ice)))) 26%,transparent);
}
html .tc>.i{width:2.2rem;height:2.2rem;border-radius:10px}
html .bc>.i .phi,html .tool>.i .phi,html .tc>.i .phi,html .wf .wh .i .phi,html .qr>.i .phi,html .st>.i .phi,html .v2-tile .phi{width:1.35rem;height:1.35rem;vertical-align:0}
html header h1 .phi{vertical-align:-.08em}

/* ---------- navigation bars ---------- */
html .topnav,html .bar,html .xpbar{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:30;
  background:rgba(6,8,15,.62)!important;
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid var(--border)!important;
}
html .topnav a,html .bar a,html .xpbar a{color:#c3cbe6!important;transition:color .15s}
html .topnav a:hover,html .bar a:hover,html .xpbar a:hover,html .bar .on{color:#fff!important}
html .lang{background:var(--glass-2)!important;border:1px solid var(--border-hi)!important;color:var(--text)!important;border-radius:999px!important}

/* ---------- controls ---------- */
html input,html select,html textarea,html .search,html .filters select,html .pf input,html .pf select{
  background:rgba(4,6,12,.55)!important;color:var(--text)!important;border:1px solid var(--border)!important;
  border-radius:11px!important;transition:border-color .15s,box-shadow .15s;
}
html input[type=checkbox],html input[type=radio],html input[type=range],html input[type=color]{background:transparent!important}
html input:focus,html select:focus,html textarea:focus,html .search:focus{
  border-color:color-mix(in srgb,var(--primary,var(--ice)) 70%,transparent)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary,var(--ice)) 22%,transparent);outline:none;
}
html .search{max-width:520px;padding:13px 16px!important;font-size:15px}
html .btn{
  border-radius:11px;font-family:var(--body);font-weight:600;letter-spacing:.005em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 24px -14px color-mix(in srgb,var(--primary,var(--ice)) 80%,transparent);
  transition:transform .15s,filter .15s,box-shadow .15s;
}
html .btn:hover{transform:translateY(-1px)}
html .btn.sm{background:var(--glass)!important;color:var(--text)!important;border:1px solid var(--border)!important;box-shadow:none}
html .btn.sm:hover{border-color:var(--border-hi)!important}
html body[data-root] .btn:not(.sm){background:var(--ice);color:var(--ice-ink)}
html .chip{background:var(--glass)!important;border:1px solid var(--border)!important;color:#cdd4ec!important;border-radius:999px!important;transition:border-color .15s,background .15s}
html .chip:hover{border-color:var(--border-hi)!important}
html .chip.on,html .chip[aria-pressed=true]{
  border-color:color-mix(in srgb,var(--primary,var(--ice)) 65%,transparent)!important;
  background:color-mix(in srgb,var(--primary,var(--ice)) 14%,transparent)!important;color:#fff!important;
}
html body[data-root] .chip.on,html body[data-root] .chip[aria-pressed=true]{border-color:color-mix(in srgb,var(--ice) 65%,transparent)!important;background:color-mix(in srgb,var(--ice) 14%,transparent)!important}
html .cta{
  border-radius:12px!important;font-family:var(--body);font-weight:600!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 16px 34px -18px var(--a,var(--ice));
}
html .lnk{color:var(--muted)}

/* ---------- Pro (gold, waitlist) ---------- */
html .tag-pro,html .tc .pb,html .pro-tag,html .badge-pro,html .pro-b{
  font-family:var(--mono)!important;font-weight:600!important;letter-spacing:.06em;text-transform:uppercase;font-size:.6rem!important;
  background:color-mix(in srgb,var(--gold) 14%,transparent)!important;color:var(--gold)!important;
  border:1px solid color-mix(in srgb,var(--gold) 30%,transparent);border-radius:999px!important;padding:2px 7px!important;
}
html .tier.pro,html .tier-box.pro,html .tier.hi,html .plan.best{border-color:color-mix(in srgb,var(--gold) 45%,transparent)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px color-mix(in srgb,var(--gold) 18%,transparent),0 24px 50px -30px color-mix(in srgb,var(--gold) 60%,transparent)!important}
html .tier.pro .tp{color:var(--gold)!important}
html .tier .tp,html .plan .pp,html .price .now,html .stat b{font-family:var(--mono);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
html .price .now{font-family:var(--display);font-weight:600}
html .tier ul li::before,html .plan li::before{content:"";display:inline-block;width:.7em;height:.38em;border-left:1.5px solid var(--green);border-bottom:1.5px solid var(--green);transform:rotate(-45deg) translateY(-.15em);margin-inline-end:.55em}
html [data-v2wait]{
  background:linear-gradient(180deg,#f7d48a,var(--gold))!important;color:var(--gold-ink)!important;
  border:0!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 30px -16px var(--gold)!important;
}
html .price .save{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green);font-family:var(--mono);font-weight:600}

/* ---------- misc ---------- */
html footer{border-top:1px solid var(--border);color:var(--muted);font-size:.8rem}
html footer a{color:#c3cbe6}
html td{border-bottom:1px solid var(--border)}
html .faq summary{font-weight:600}
html details.panel>summary::after{color:var(--ice)}

/* ---------- v2 injected blocks ---------- */
.v2-strip{max-width:900px;margin:28px auto 8px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:grid;gap:12px}
body[data-root] .v2-strip,.v2-wide{max-width:960px}
.v2-panel{padding:18px 20px;display:flex;gap:14px 18px;align-items:center;flex-wrap:wrap}
.v2-panel .v2-tx{flex:1 1 260px;min-width:0}
.v2-panel b{display:block;font-size:1.02rem;font-weight:600}
.v2-panel p{color:var(--muted);font-size:.87rem;margin:2px 0 0;line-height:1.5}
.v2-eyebrow{color:var(--gold);display:inline-flex;align-items:center;gap:6px;margin-bottom:4px}
.v2-actions{display:flex;gap:8px;flex-wrap:wrap}
.v2-btn{appearance:none;cursor:pointer;font:600 .9rem/1 var(--body);padding:11px 16px;border-radius:11px;border:1px solid var(--border);background:var(--glass);color:var(--text);display:inline-flex;align-items:center;gap:8px;text-decoration:none;transition:transform .15s,border-color .15s}
.v2-btn:hover{transform:translateY(-1px);border-color:var(--border-hi)}
.v2-btn.gold{background:linear-gradient(180deg,#f7d48a,var(--gold));color:var(--gold-ink);border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 30px -16px var(--gold)}
.v2-btn:focus-visible,.v2-dlg button:focus-visible,.v2-dlg input:focus-visible,.v2-dlg textarea:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.v2-pro{border-color:color-mix(in srgb,var(--gold) 32%,transparent)!important;background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 9%,transparent),rgba(255,255,255,.02) 60%)!important}
.v2-local{display:flex;gap:10px;align-items:flex-start;font-size:.84rem;color:var(--muted)}
.v2-local .phi{color:var(--green);margin-top:2px}
.v2-more h3{font:500 .7rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:6px 0 10px}
.v2-apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:10px}
.ctr .v2-strip,main .v2-strip{padding-left:0;padding-right:0;margin-left:0;margin-right:0;max-width:none}
html body[data-root] .kicker{--a:var(--ice)!important}
.v2-app{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:14px;border:1px solid var(--border);background:var(--glass);text-decoration:none;color:var(--text);min-width:0}
.v2-app span{min-width:0}.v2-app b{display:block;font-size:.9rem;font-weight:600}.v2-app small{color:var(--muted);font-size:.78rem;display:block}
a.v2-app:hover{border-color:var(--border-hi)}
.v2-app em{font:500 .62rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-style:normal;margin-inline-start:auto;white-space:nowrap}
.v2-app .v2-tile{width:2.1rem;height:2.1rem;border-radius:10px}

/* survey dialog */
.v2-dlg{margin:auto;position:fixed;inset:0;height:fit-content;border:1px solid var(--border-hi);border-radius:20px;padding:0;max-width:min(560px,calc(100vw - 24px));width:100%;max-height:calc(100dvh - 24px);
  background:linear-gradient(180deg,rgba(22,28,46,.94),rgba(10,13,22,.96));color:var(--text);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08);font-family:var(--body)}
.v2-dlg::backdrop{background:rgba(3,4,8,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.v2-dlg form{display:grid;gap:18px;padding:22px 22px 20px}
.v2-dlg .v2-hd{display:flex;gap:12px;align-items:flex-start}
.v2-dlg .v2-hd .v2-tile{--c:var(--gold)}
.v2-dlg h2{font:600 1.2rem/1.2 var(--display);letter-spacing:-.02em;margin:0}
.v2-dlg .v2-sub{color:var(--muted);font-size:.86rem;margin:4px 0 0}
.v2-x{margin-inline-start:auto;background:none;border:0;color:var(--muted);cursor:pointer;padding:4px;border-radius:8px}
.v2-x:hover{color:#fff}
.v2-q{display:grid;gap:8px;border:0;margin:0;padding:0;min-width:0}
.v2-q legend,.v2-q>label{font-size:.86rem;font-weight:600;margin-bottom:2px;padding:0}
.v2-q .v2-hint{font-weight:400;color:var(--muted);font-size:.78rem}
.v2-opts{display:flex;flex-wrap:wrap;gap:6px}
.v2-opts label{position:relative;cursor:pointer}
.v2-opts input{position:absolute;opacity:0;width:1px;height:1px}
.v2-opts span{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:var(--glass);font-size:.84rem;color:#cdd4ec;transition:border-color .15s,background .15s}
.v2-opts input:checked+span{border-color:color-mix(in srgb,var(--gold) 70%,transparent);background:color-mix(in srgb,var(--gold) 15%,transparent);color:#fff}
.v2-opts input:focus-visible+span{outline:2px solid var(--ice);outline-offset:2px}
.v2-feat{display:grid;gap:6px;max-height:190px;overflow:auto;padding-inline-end:4px}
.v2-feat label{display:flex;gap:9px;align-items:flex-start;font-size:.85rem;color:#cdd4ec;cursor:pointer;padding:7px 10px;border-radius:10px;border:1px solid var(--border);background:var(--glass)}
.v2-feat input{width:auto!important;margin-top:3px;accent-color:var(--gold)}
.v2-dlg textarea,.v2-dlg input[type=email],.v2-dlg input[type=text]{width:100%;font:inherit;font-size:.9rem;padding:10px 12px}
.v2-dlg textarea{min-height:64px;resize:vertical;font-family:var(--body)!important}
.v2-foot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.v2-foot small{color:var(--muted);font-size:.76rem;flex:1 1 220px}
.v2-done{text-align:center;padding:34px 24px;display:grid;gap:10px;justify-items:center}
.v2-done .v2-tile{--c:var(--green);width:3rem;height:3rem}
@media (max-width:520px){.v2-dlg form{padding:18px 16px}.v2-panel{padding:16px}}
@media (prefers-reduced-motion:reduce){html *{transition:none!important;animation:none!important}html a.bc:hover,html a.tc:hover,html .btn:hover,.v2-btn:hover{transform:none}}
@media print{.v2-strip,html body::before,html body::after{display:none!important}}