/* Shared ANdotICTA support theme — light default, dark-mode opt-in via [data-theme="dark"]. */
:root{
  --navy:#0B1F3A; --navy-soft:#13294d; --gold:#C99A3F; --gold-deep:#a87f2c;
  --ice:#CAD4E2; --teal:#2FA39A;
  --bg:#f5f7fb; --panel:#ffffff; --ink:#0B1F3A; --muted:#5b6b82; --line:#e2e8f3;
  --grid:rgba(11,31,58,.05); --glow:rgba(47,163,154,.16); --glow2:rgba(201,154,63,.16);
  --shadow:0 18px 50px -20px rgba(11,31,58,.24);
}
html[data-theme="dark"]{
  --bg:#070d18; --panel:#0d1626; --ink:#e8eef9; --muted:#93a3bd; --line:#1c2a44;
  --grid:rgba(255,255,255,.04); --glow:rgba(47,163,154,.22); --glow2:rgba(201,154,63,.18);
  --shadow:0 18px 60px -22px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
html,body{margin:0; overflow-x:hidden}
/* long URLs / code examples must break on narrow screens, never force horizontal scroll */
code,.mono{overflow-wrap:anywhere; word-break:break-word}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased;
  min-height:100dvh; position:relative; overflow-x:hidden; line-height:1.6;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:46px 46px; mask-image:radial-gradient(ellipse 90% 50% at 50% 0%,#000 25%,transparent 70%);
}
body::after{
  content:""; position:fixed; inset:-20% -10% auto -10%; height:60vh; z-index:-2; pointer-events:none;
  background:radial-gradient(40% 60% at 18% 8%,var(--glow),transparent 60%),
             radial-gradient(40% 55% at 86% 0%,var(--glow2),transparent 60%);
}
header.bar{
  display:flex; align-items:center; gap:.75rem; padding:.85rem clamp(1rem,4vw,2.25rem);
  border-bottom:1px solid var(--line); backdrop-filter:blur(14px);
  background:color-mix(in srgb,var(--panel) 75%,transparent); position:sticky; top:0; z-index:20;
}
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; color:inherit}
.brand img{height:38px; width:auto; filter:drop-shadow(0 4px 10px rgba(11,31,58,.25))}
.brand b{font-size:1.02rem} .brand small{display:block; font-size:.62rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-deep)}
nav.top{margin-left:auto; display:flex; align-items:center; gap:.35rem}
nav.top a{color:var(--muted); text-decoration:none; font-size:.82rem; font-weight:600; padding:.4rem .6rem; border-radius:2px}
nav.top a:hover,nav.top a.active{color:var(--ink); background:color-mix(in srgb,var(--ink) 7%,transparent)}
.toggle{display:grid; place-items:center; height:36px; width:36px; border-radius:2px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); cursor:pointer; font-size:1rem}
@media(max-width:680px){nav.top a.hide-sm{display:none}}

.wrap{max-width:1480px; margin:0 auto; padding:clamp(1.4rem,4vw,3rem) clamp(1.1rem,5vw,4rem) 3.5rem}
.eyebrow{display:inline-flex; align-items:center; gap:.45rem; font-size:.72rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--teal); background:color-mix(in srgb,var(--teal) 12%,transparent);
  padding:.35rem .7rem; border-radius:2px; margin-bottom:1rem}
h1.page{font-size:clamp(1.8rem,5vw,2.8rem); line-height:1.08; letter-spacing:-.02em; margin:0 0 .6rem}
h1.page span{background:linear-gradient(120deg,var(--gold),var(--teal)); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{color:var(--muted); font-size:1.05rem; max-width:60ch; margin:0 0 2rem}
h2{font-size:1.35rem; margin:2.4rem 0 .8rem; letter-spacing:-.01em}
h3{font-size:1.05rem; margin:1.6rem 0 .5rem}
p{margin:0 0 1rem; color:var(--ink)}
.muted{color:var(--muted)}
a.inline{color:var(--teal); font-weight:600}
.card{background:color-mix(in srgb,var(--panel) 92%,transparent); border:1px solid var(--line); border-radius:2px; padding:1.3rem 1.5rem; box-shadow:var(--shadow); margin:1rem 0}
.card.accent{border-left:4px solid var(--gold)}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.92em;
  background:color-mix(in srgb,var(--teal) 10%,transparent); color:var(--teal); padding:.12em .45em; border-radius:2px}
.good{color:#1c8a5f} .bad{color:#c0413b}
ul.clean{list-style:none; padding:0; margin:0 0 1rem}
ul.clean li{position:relative; padding:.45rem 0 .45rem 1.8rem; border-bottom:1px solid var(--line)}
ul.clean li:last-child{border-bottom:none}
ul.clean li::before{content:"›"; position:absolute; left:.4rem; color:var(--teal); font-weight:800}
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); gap:1rem; margin:1rem 0}
.grid2 > *{min-width:0}
.num{display:grid; gap:1rem; counter-reset:step}
.num .step{position:relative; padding-left:3rem; counter-increment:step}
.num .step::before{content:counter(step); position:absolute; left:0; top:-.1rem; height:2rem; width:2rem; border-radius:2px;
  display:grid; place-items:center; background:var(--navy); color:#fff; font-weight:800; font-size:.95rem}
html[data-theme="dark"] .num .step::before{background:var(--gold); color:#0B1F3A}
.foot{display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; justify-content:center; align-items:center; color:var(--muted); font-size:.8rem; padding:2rem 1rem 2.4rem; border-top:1px solid var(--line)}
.foot a{color:var(--muted); text-decoration:none; font-weight:600}.foot a:hover{color:var(--teal)}
.backlink{display:inline-flex;align-items:center;gap:.4rem;color:var(--muted);text-decoration:none;font-weight:600;font-size:.85rem;margin-bottom:1.4rem}
.backlink:hover{color:var(--teal)}

/* forms */
label.fld{display:block; margin:1rem 0}
label.fld span{display:block; font-size:.82rem; font-weight:700; margin-bottom:.4rem; color:var(--ink)}
label.fld input,label.fld textarea,label.fld select{
  width:100%; border:1px solid var(--line); border-radius:2px; padding:.7rem .85rem; font:inherit; font-size:.95rem;
  background:var(--panel); color:var(--ink)}
label.fld input:focus,label.fld textarea:focus,label.fld select:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 20%,transparent)}
label.fld textarea{resize:vertical; min-height:120px}
.btn{border:none; border-radius:2px; padding:.8rem 1.6rem; background:var(--navy); color:#fff; font-weight:700; font-size:.95rem; cursor:pointer}
html[data-theme="dark"] .btn{background:var(--gold); color:#0B1F3A}
.btn:disabled{opacity:.55; cursor:not-allowed}
.ok-banner{background:color-mix(in srgb,var(--teal) 14%,transparent); border:1px solid var(--teal); color:var(--ink); border-radius:2px; padding:1.1rem 1.3rem; margin:1rem 0}