/* Ajaira.site — playful on the surface, serious underneath.
   Every colour is a token so light and dark stay in step. */

:root {
    color-scheme: light;

    /* surfaces, back to front */
    --paper:      #fbfaf7;
    --card:       #ffffff;
    --raised:     #fcfbf8;
    --sunken:     #f5f2ec;
    --line:       #e6e2db;
    --line-soft:  #f0ede7;

    /* text */
    --ink:        #14121a;
    --ink-soft:   #4b4658;
    --ink-faint:  #6b6577;
    --on-brand:   #ffffff;

    /* brand */
    --brand:      #e0301f;
    --brand-hot:  #ff6a4d;
    --brand-dark: #b82415;
    --brand-tint: #fff0ed;
    --accent:     #1f6feb;
    --accent-tint:#eef4ff;
    --lime:       #b9f227;

    /* status */
    --ok:         #0b7040;
    --ok-tint:    #e8f7ee;
    --warn:       #96590a;
    --warn-tint:  #fdf3e2;
    --bad:        #c62828;
    --bad-tint:   #fdecec;

    --code-bg:    #14121a;
    --code-ink:   #f4f2ef;

    --ease:       cubic-bezier(.22,.61,.36,1);
    --ease-out:   cubic-bezier(.16,1,.3,1);

    --radius:     14px;
    --radius-sm:  9px;
    --shadow:     0 1px 2px rgba(20,18,26,.05), 0 8px 24px -12px rgba(20,18,26,.18);
    --shadow-lg:  0 2px 4px rgba(20,18,26,.05), 0 24px 48px -20px rgba(20,18,26,.25);

    --sidebar:    248px;

    --sans: "Inter", "Hind Siliguri", "Noto Sans Bengali", ui-sans-serif, system-ui,
            -apple-system, "Segoe UI", Roboto, sans-serif;
    --bn:   "Hind Siliguri", "Noto Sans Bengali", "Inter", ui-sans-serif, system-ui, sans-serif;
    --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

/* Dark is a full re-tint, not an inversion: the brand warms up so it still
   reads against a dark ground, and shadows give way to lighter surfaces. */
[data-theme="dark"] {
    color-scheme: dark;

    /* Neutral greys, not the blue-purple ones this had before — a cool base
       fought the warm brand and made the whole thing look muddy. The brand
       now supplies all the warmth, against a genuinely neutral ground. */
    --sunken:     #0c0c0e;
    --paper:      #121214;
    --card:       #1a1a1d;
    --raised:     #222226;
    --line:       #2c2c31;
    --line-soft:  #212125;

    /* Off-white, never #fff: pure white on near-black haloes badly at body size. */
    --ink:        #ededec;
    --ink-soft:   #a1a1a6;
    --ink-faint:  #6f6f76;

    /* Lightened so it reads on a dark ground. At this lightness white text on
       it only manages ~3:1, so the text that sits on the brand goes dark. */
    --brand:      #ff7a5e;
    --brand-hot:  #ff9679;
    --brand-dark: #ff9075;
    --brand-tint: #2b1512;
    --on-brand:   #1d0f0b;

    --accent:     #7fb2ff;
    --accent-tint:#131d31;
    --lime:       #cdf95a;

    --ok:         #56d39b;
    --ok-tint:    #0f251c;
    --warn:       #eab765;
    --warn-tint:  #2a2114;
    --bad:        #ff8585;
    --bad-tint:   #2d1719;

    --code-bg:    #0a0a0c;
    --code-ink:   #e8e8e6;

    /* Depth comes from surface steps and hairlines here, not from big shadows. */
    --shadow:     0 1px 2px rgba(0,0,0,.5), 0 6px 18px -10px rgba(0,0,0,.7);
    --shadow-lg:  0 1px 3px rgba(0,0,0,.5), 0 20px 40px -22px rgba(0,0,0,.85);
}


* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Bengali needs more vertical room than Latin at the same size. */
.bn {
    font-family: var(--bn);
    line-height: 1.55;
    letter-spacing: 0;
}
.bn h1, .bn h2, h1.bn, h2.bn { line-height: 1.28; letter-spacing: -.01em; }
:lang(bn) { font-family: var(--bn); }

h1, h2, h3, h4 {
    line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.02em;
    text-wrap: balance;
}
p { text-wrap: pretty; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1em; }
a  { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, kbd, pre { font-family: var(--mono); font-size: .92em; }
code { background: var(--line-soft); padding: .12em .4em; border-radius: 5px; }
pre { background: var(--code-bg); color: var(--code-ink); padding: 1rem 1.1rem; border-radius: var(--radius-sm); overflow-x: auto; }
pre code { background: none; padding: 0; color: inherit; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

/* ---------- layout ---------- */
.shell { width: min(1120px, 100% - 2.5rem); margin-inline: auto; }
.shell.narrow  { width: min(720px, 100% - 2.5rem); }
.shell.medium  { width: min(900px, 100% - 2.5rem); }
.section { padding: 4.5rem 0; }
.section-tight { padding: 2.75rem 0; }
.section-alt { background: var(--sunken); border-block: 1px solid var(--line); }

.skip-link {
    position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper);
    padding: .6rem 1rem; z-index: 100; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---------- header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.scrolled { border-bottom-color: var(--line); box-shadow: 0 1px 12px -6px rgba(20,18,26,.25); }
.site-header .bar { display: flex; align-items: center; gap: 1.25rem; height: 62px; }
.brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.06rem; color: var(--ink); letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }

.nav { display: flex; gap: .25rem; margin-left: auto; align-items: center; }
.nav a {
    color: var(--ink-soft); font-size: .92rem; font-weight: 500;
    padding: .45rem .7rem; border-radius: 8px;
}
.nav a:hover { background: var(--line-soft); color: var(--ink); text-decoration: none; }
.nav a.active { color: var(--ink); background: var(--line-soft); }
/* The burger: three bars that become a cross. Transform-only so a rapid
   tap never queues layout work. */
.burger {
    display: none; align-items: center; gap: .5rem; flex: none;
    background: none; border: 0; padding: .4rem; margin-left: .35rem;
    color: var(--ink); cursor: pointer; font: inherit;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.burger-box { position: relative; display: block; width: 22px; height: 16px; }
.burger-bars,
.burger-bars::before,
.burger-bars::after {
    position: absolute; left: 0; width: 22px; height: 2px; border-radius: 2px;
    background: currentColor; transition: transform .28s var(--ease-out), opacity .12s linear;
}
.burger-bars { top: 7px; }
.burger-bars::before { content: ""; top: -7px; }
.burger-bars::after  { content: ""; top: 7px; }

.burger[aria-expanded="true"] .burger-bars { transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger-bars::before { transform: translateY(7px) rotate(-90deg); }
.burger[aria-expanded="true"] .burger-bars::after  { opacity: 0; transform: translateY(-7px); }

.burger-inline { display: inline-flex; }
.burger-label { font-size: .88rem; font-weight: 600; }

/* Panels swing in from the right edge, hinged like a door. */
.nav {
    display: flex; gap: .25rem; margin-left: auto; align-items: center;
}
.nav a {
    color: var(--ink-soft); font-size: .92rem; font-weight: 500;
    padding: .45rem .7rem; border-radius: 8px;
}
.nav a:hover { background: var(--line-soft); color: var(--ink); text-decoration: none; }
.nav a.active { color: var(--ink); background: var(--line-soft); }

@media (max-width: 900px) {
    .burger { display: inline-flex; }
    .site-header .bar { gap: .5rem; }
    .theme-toggle { margin-left: auto; }

    .nav {
        position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
        width: min(310px, 84vw); margin: 0;
        flex-direction: column; align-items: stretch; gap: .1rem;
        padding: 5rem 1.1rem 1.5rem;
        background: var(--card); border-left: 1px solid var(--line);
        overflow-y: auto; overscroll-behavior: contain;

        transform-origin: right center;
        transform: perspective(1400px) translate3d(100%, 0, 0) rotateY(-12deg);
        opacity: 0; visibility: hidden;
        transition: transform .34s var(--ease-out), opacity .22s linear, visibility 0s linear .34s;
        box-shadow: var(--shadow-lg);
    }
    .nav.open {
        transform: perspective(1400px) translate3d(0, 0, 0) rotateY(0deg);
        opacity: 1; visibility: visible;
        transition: transform .34s var(--ease-out), opacity .18s linear, visibility 0s;
    }
    .nav a { padding: .75rem .8rem; font-size: 1rem; }
    .nav .btn { width: 100%; justify-content: center; margin-top: .5rem; }
}

/* ---------- buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    font: inherit; font-weight: 600; font-size: .94rem;
    padding: .62rem 1.15rem; border-radius: 10px; border: 1px solid transparent;
    cursor: pointer; text-decoration: none; white-space: nowrap; position: relative;
    transition: transform .12s var(--ease), background .18s var(--ease),
                border-color .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
}
.btn-block { width: 100%; }
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: var(--on-brand); box-shadow: 0 1px 2px rgba(224,48,31,.2); }
.btn-primary:hover { background: var(--brand-dark); color: var(--on-brand); box-shadow: 0 6px 18px -6px rgba(224,48,31,.45); transform: translateY(-1px); }
.btn-dark:hover, .btn-ghost:hover { transform: translateY(-1px); }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark:hover { background: var(--ink-soft); color: var(--paper); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--line-soft); }
.btn-danger { background: var(--bad-tint); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.btn-danger:hover { background: var(--bad); color: var(--paper); }
.btn-sm { padding: .4rem .75rem; font-size: .85rem; border-radius: 8px; }
.btn-lg { padding: .8rem 1.5rem; font-size: 1.02rem; border-radius: 12px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .chip:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
}

/* A submitted button says so, so nobody double-fires a DNS write. */
.btn.is-busy { pointer-events: none; opacity: .75; }
.btn.is-busy::after {
    content: ""; width: .85em; height: .85em; margin-left: .1em;
    border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; animation: spin .6s linear infinite;
}
.btn.is-copied { background: var(--ok); border-color: var(--ok); color: #fff; }

@keyframes spin { to { transform: rotate(360deg); } }
.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ---------- hero ---------- */
.hero { padding: 4.5rem 0 3rem; position: relative; overflow: hidden; }
.hero::before,
.hero::after {
    content: ""; position: absolute; pointer-events: none; z-index: 0;
}
.hero::before {
    inset: -35% 45% 35% -15%;
    background: radial-gradient(closest-side, var(--brand-tint), transparent 70%);
    animation: drift 18s var(--ease) infinite alternate;
}
.hero::after {
    inset: -20% -15% 55% 55%;
    background: radial-gradient(closest-side, var(--accent-tint), transparent 70%);
    animation: drift 22s var(--ease) infinite alternate-reverse;
}

@keyframes drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(3%, 4%, 0) scale(1.12); }
}
.hero-inner { position: relative; max-width: 760px; }
.eyebrow {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--brand-dark); background: var(--brand-tint);
    padding: .35rem .75rem; border-radius: 999px; margin-bottom: 1.1rem;
}
.hero h1 { font-family: var(--bn); line-height: 1.15; margin-bottom: .6rem; }
.hero .lede { font-size: 1.12rem; color: var(--ink-soft); max-width: 58ch; }
.lede { font-size: 1.06rem; color: var(--ink-soft); }

/* ---------- availability checker ---------- */
.checker { margin-top: 2rem; max-width: 620px; }
.checker-field {
    display: flex; align-items: stretch; background: var(--card);
    border: 2px solid var(--ink); border-radius: 12px; overflow: hidden;
    box-shadow: var(--shadow); flex-wrap: wrap;
}
/* The text side is one unit so the button can drop below it intact. */
.checker-input {
    display: flex; align-items: center; flex: 1 1 260px; min-width: 0;
}
.checker-field {
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.checker-field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint), var(--shadow); }
.checker-field.is-ok      { border-color: var(--ok); box-shadow: 0 0 0 4px var(--ok-tint), var(--shadow); }
.checker-field.is-bad     { border-color: var(--bad); box-shadow: 0 0 0 4px var(--bad-tint), var(--shadow); }
.checker-field.is-invalid { border-color: var(--bad); }

.checker-spinner {
    width: 0; height: 16px; margin-right: 0; align-self: center; flex: none;
    border-radius: 50%; border: 2px solid var(--ink-faint); border-right-color: transparent;
    opacity: 0; transition: opacity .2s var(--ease), width .2s var(--ease), margin .2s var(--ease);
}
.checker-field.is-checking .checker-spinner {
    width: 16px; margin-right: .7rem; opacity: 1; animation: spin .6s linear infinite;
}

/* The honeypot: off-screen for people, present in the DOM for bots. */
.hp-field {
    position: absolute !important; left: -9999px !important; top: auto !important;
    width: 1px !important; height: 1px !important; overflow: hidden !important;
    opacity: 0 !important; pointer-events: none !important;
}
.checker-field input {
    flex: 1 1 auto; min-width: 0; width: 100%; border: 0; outline: 0; padding: .95rem .85rem .95rem 1rem;
    font: inherit; font-size: 1.05rem; font-weight: 600; background: transparent; color: var(--ink);
}
.checker-field input:focus { box-shadow: none; }
.checker-field .zone {
    display: flex; align-items: center; padding-right: .75rem; flex: none;
    color: var(--ink-faint); font-family: var(--mono); font-size: .92rem; white-space: nowrap;
}
.checker-field button {
    border-radius: 0; border: 0; padding-inline: 1.3rem; flex: 0 0 auto;
}

@media (max-width: 560px) {
    .checker-field { flex-direction: column; align-items: stretch; }
    .checker-input { flex: 1 1 auto; border-bottom: 1px solid var(--line); }
    .checker-field input { font-size: 1rem; padding: .85rem .5rem .85rem .9rem; }
    .checker-field .zone { font-size: .85rem; }
    .checker-field button { width: 100%; padding-block: .85rem; }
}
.checker-hint { font-size: .85rem; color: var(--ink-faint); margin: .55rem .2rem 0; }

.check-result {
    margin-top: .9rem; max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height .3s var(--ease-out), opacity .25s var(--ease), margin .25s var(--ease);
}
.check-result.show { max-height: 320px; opacity: 1; }
.result-mark { display: inline-flex; }
.result-mark .icon { width: 18px; height: 18px; stroke-width: 2.4; }
.result-card {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .75rem;
    padding: .9rem 1.1rem; border-radius: var(--radius-sm); border: 1px solid var(--line);
    background: var(--card); font-weight: 600;
}
.result-card .fqdn { font-family: var(--mono); font-weight: 700; }
.result-card .grow { flex: 1; }
.result-card.is-available { border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: var(--ok-tint); color: var(--ok); }
.result-card.is-taken     { border-color: color-mix(in srgb, var(--bad) 40%, transparent); background: var(--bad-tint); color: var(--bad); }
.result-card.is-reserved,
.result-card.is-premium   { border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-tint); color: var(--warn); }
.result-card.is-invalid,
.result-card.is-blocked   { border-color: var(--line); background: var(--line-soft); color: var(--ink-soft); }
.result-card { animation: pop .28s var(--ease-out) both; }

@keyframes pop {
    from { opacity: 0; transform: translateY(-4px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
.suggestions { margin-top: .7rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.suggestions span { font-size: .85rem; color: var(--ink-faint); }
.chip {
    font-family: var(--mono); font-size: .82rem; background: var(--card);
    border: 1px solid var(--line); border-radius: 999px; padding: .28rem .7rem;
    cursor: pointer; color: var(--ink);
}
.chip { transition: border-color .15s var(--ease), transform .15s var(--ease), background .15s var(--ease); }
.chip:hover { border-color: var(--ink); text-decoration: none; transform: translateY(-1px); }

/* ---------- scroll reveal ---------- */
/* Hidden only once JS is known to be running, so a failed script can never
   leave the page blank. */
.js .reveal {
    opacity: 0; transform: translateY(14px);
    transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
    transition-delay: var(--d, 0s);
}
.js .reveal.shown { opacity: 1; transform: none; }

/* ---------- stat strip ---------- */
.stat-strip { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 2.5rem; }
.stat b { display: block; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat span { font-size: .84rem; color: var(--ink-faint); }

/* ---------- cards ---------- */
.grid { display: grid; gap: 1.1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow);
}
.card h3 { margin-bottom: .35rem; }
.card p:last-child { margin-bottom: 0; }
.card .icon { font-size: 1.6rem; display: block; margin-bottom: .6rem; }
.card { transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s var(--ease); }
.lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--ink) 22%, transparent); }
.card-link:hover { border-color: var(--ink); text-decoration: none; }
.accent-card { background: var(--brand-tint); border-color: color-mix(in srgb, var(--brand) 25%, transparent); }
.card-quiet { box-shadow: none; }

.section-head { max-width: 62ch; margin-bottom: 2rem; }
.section-head p:last-child { margin-bottom: 0; }

.pull {
    font-family: var(--bn); font-size: clamp(1.25rem, 3vw, 1.7rem); font-weight: 600;
    line-height: 1.45; border-left: 4px solid var(--brand); padding-left: 1.1rem; margin: 0;
}

/* ---------- terminal-ish block ---------- */
.term {
    background: var(--code-bg); color: var(--code-ink); border-radius: var(--radius);
    padding: 1.2rem 1.3rem; font-family: var(--mono); font-size: .88rem; line-height: 1.75;
    overflow-x: auto; box-shadow: var(--shadow-lg);
}
.term .t-dim { color: #8d879c; }
.term .t-ok  { color: #7ee2a8; }
.term .t-key { color: var(--lime); }

/* ---------- forms ---------- */
.form-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.75rem; box-shadow: var(--shadow);
}
.field { margin-bottom: 1.05rem; }
.field:last-child { margin-bottom: 0; }
.field label { display: block; font-size: .86rem; font-weight: 600; margin-bottom: .35rem; color: var(--ink); }
.field .help { font-size: .8rem; color: var(--ink-faint); margin: .35rem 0 0; }
input[type=text], input[type=email], input[type=password], input[type=search], select, textarea {
    width: 100%; font: inherit; font-size: .95rem; color: var(--ink);
    padding: .62rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--raised); outline: 0;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
input.has-error, select.has-error, textarea.has-error { border-color: var(--bad); }
textarea { min-height: 120px; resize: vertical; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%), linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%); background-position: right 1rem center, right .75rem center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2rem; }
.field-error { color: var(--bad); font-size: .82rem; margin: .35rem 0 0; font-weight: 500; }
.field-row { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.checkline { display: flex; align-items: flex-start; gap: .6rem; }
.checkline input { width: auto; margin-top: .3rem; }
.checkline label { margin: 0; font-weight: 500; }
.radio-row { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.radio-row label { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; margin: 0; }
.radio-row input { width: auto; }
fieldset { border: 0; padding: 0; margin: 0 0 1.05rem; }
legend { font-size: .86rem; font-weight: 600; padding: 0; margin-bottom: .4rem; }

/* ---------- flashes ---------- */
.flashes { margin: 1.25rem 0 0; display: grid; gap: .55rem; }
.flash {
    padding: .75rem 1rem; border-radius: var(--radius-sm); font-size: .92rem;
    border: 1px solid var(--line); background: var(--card); font-weight: 500;
    animation: slide-in .35s var(--ease-out) both;
}

@keyframes slide-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}
.flash-success { background: var(--ok-tint); border-color: color-mix(in srgb, var(--ok) 40%, transparent); color: var(--ok); }
.flash-error   { background: var(--bad-tint); border-color: color-mix(in srgb, var(--bad) 40%, transparent); color: var(--bad); }
.flash-info    { background: var(--accent-tint); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); }

.notice {
    border: 1px dashed var(--line); background: var(--line-soft);
    border-radius: var(--radius-sm); padding: .9rem 1.05rem; font-size: .9rem; color: var(--ink-soft);
}
.notice strong { color: var(--ink); }
.notice-warn { background: var(--warn-tint); border-color: color-mix(in srgb, var(--warn) 40%, transparent); color: var(--warn); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .7rem .85rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
th { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); background: var(--sunken); font-weight: 700; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--sunken); }
td.mono, .mono { font-family: var(--mono); }
td.truncate { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-actions { display: flex; gap: .35rem; justify-content: flex-end; }

.badge {
    display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .03em;
    text-transform: uppercase; padding: .18rem .5rem; border-radius: 999px;
    background: var(--line-soft); color: var(--ink-soft);
}
.badge-active    { background: var(--ok-tint); color: var(--ok); }
.badge-pending   { background: var(--warn-tint); color: var(--warn); }
.badge-expired   { background: var(--bad-tint); color: var(--bad); }
.badge-suspended { background: var(--bad-tint); color: var(--bad); }
.badge-released  { background: var(--line-soft); color: var(--ink-faint); }
.badge-open      { background: var(--warn-tint); color: var(--warn); }
.badge-type      { background: var(--accent-tint); color: var(--accent); font-family: var(--mono); }
.badge-proxied   { background: var(--warn-tint); color: var(--warn); }

.empty { text-align: center; padding: 3rem 1.5rem; color: var(--ink-faint); }
.empty h3 { color: var(--ink); }

/* ---------- expiry meter ---------- */
.term-meter { margin-top: .85rem; }
.term-meter .bar {
    height: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden;
}
.term-meter .fill {
    height: 100%; border-radius: 999px; background: var(--ok);
    transition: width .8s var(--ease-out);
}
.term-meter.warn .fill { background: var(--warn); }
.term-meter.danger .fill { background: var(--bad); }
.term-meter .legend {
    display: flex; justify-content: space-between; gap: 1rem;
    font-size: .8rem; color: var(--ink-faint); margin-top: .4rem;
}
.term-meter .legend strong { color: var(--ink); font-weight: 600; }

/* ---------- app shell (dashboard + admin) ---------- */

.app-head .bar { display: flex; align-items: center; gap: 1rem; height: 60px; }
.app-tabs { display: flex; gap: .2rem; overflow-x: auto; padding-bottom: 0; }
.app-tabs a {
    font-size: .9rem; font-weight: 500; color: var(--ink-soft);
    padding: .45rem .75rem; border-radius: 8px; white-space: nowrap;
}
.app-tabs a:hover { background: var(--line-soft); color: var(--ink); text-decoration: none; }
.app-tabs a { transition: background .18s var(--ease), color .18s var(--ease); }
.app-tabs a.active { background: var(--ink); color: var(--paper); }
.app-body { padding: 2.25rem 0 4rem; }

.page-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; margin-bottom: 1.75rem; }
.page-head .grow { flex: 1; min-width: 240px; }
.page-head h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .25rem; }
.page-head p { color: var(--ink-soft); margin: 0; }

.crumb { font-size: .85rem; color: var(--ink-faint); margin-bottom: .5rem; }
.crumb a { color: var(--ink-faint); }

.sub-card { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.sub-card .host { font-family: var(--mono); font-size: 1.05rem; font-weight: 700; }
.sub-card .meta { font-size: .84rem; color: var(--ink-faint); }

.stat-tiles { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.tile {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.1rem 1.2rem; transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ink) 22%, transparent); }
.tile b {
    display: block; font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em;
    line-height: 1.1; font-variant-numeric: tabular-nums;
}
.tile span { font-size: .8rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.tile.alert b { color: var(--bad); }

.share-box {
    background: var(--brand-tint);
    border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
    border-radius: var(--radius); padding: 1.5rem; text-align: center;
}
.share-box .host { font-family: var(--mono); font-size: 1.3rem; font-weight: 800; display: block; margin: .5rem 0 1rem; }

.copy-line { display: flex; gap: .5rem; align-items: center; }
.copy-line input { font-family: var(--mono); font-size: .88rem; }

.toc { display: grid; gap: .4rem; }
.toc a { display: block; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font-size: .9rem; font-weight: 500; }
.toc a:hover { border-color: var(--ink); text-decoration: none; }

.prose h2 { margin-top: 2.5rem; }
.prose h3 { margin-top: 1.75rem; }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 1em; }
.prose li { margin-bottom: .4em; }
.prose table { margin-bottom: 1.5rem; }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.steps li { counter-increment: step; padding-left: 3rem; position: relative; }
.steps li::before {
    content: counter(step); position: absolute; left: 0; top: -.15rem;
    width: 2rem; height: 2rem; border-radius: 50%; background: var(--ink); color: var(--paper);
    display: grid; place-items: center; font-weight: 700; font-size: .9rem;
    transition: background .2s var(--ease), transform .2s var(--ease);
}
.steps li:hover::before { background: var(--brand); transform: scale(1.06); }
.steps li h3 { margin-bottom: .2rem; }
.steps li p { margin-bottom: 0; color: var(--ink-soft); }

.pager { display: flex; gap: .5rem; align-items: center; justify-content: center; margin-top: 1.5rem; font-size: .9rem; }
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1.25rem; }
.filter-bar form { display: flex; gap: .5rem; flex: 1; min-width: 220px; }
.inline-form { display: inline; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--sunken); padding: 3rem 0 2rem; margin-top: 4rem; }
.foot-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.foot-grid h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); margin-bottom: .7rem; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.foot-grid a { color: var(--ink-soft); font-size: .9rem; }
.foot-grid a:hover { color: var(--ink); }
.foot-bottom {
    margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft);
    display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between;
    font-size: .84rem; color: var(--ink-faint);
}
.partner-line { font-size: .9rem; color: var(--ink-soft); }
.partner-line strong { color: var(--ink); }

.error-page { text-align: center; padding: 5rem 0; }
.error-code { font-family: var(--mono); font-size: 4rem; font-weight: 800; color: var(--brand); margin: 0; line-height: 1; }
.error-page h1 { font-family: var(--bn); margin-top: .5rem; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

tbody tr { transition: background .12s var(--ease); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .reveal { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Announcement banner
   ========================================================================== */
.announce {
    font-size: .88rem; font-weight: 500; padding: .6rem 0;
    border-bottom: 1px solid transparent; text-align: center;
}
.announce-info { background: var(--accent-tint); color: var(--accent); border-bottom-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.announce-warn { background: var(--warn-tint); color: var(--warn); border-bottom-color: color-mix(in srgb, var(--warn) 35%, transparent); }

/* ==========================================================================
   Tickets
   ========================================================================== */
.badge-ticket-open      { background: var(--warn-tint); color: var(--warn); }
.badge-ticket-reviewing { background: var(--accent-tint); color: var(--accent); }
.badge-ticket-waiting   { background: var(--line-soft); color: var(--ink-soft); }
.badge-ticket-resolved  { background: var(--ok-tint); color: var(--ok); }
.badge-ticket-closed    { background: var(--line-soft); color: var(--ink-faint); }

.badge-prio-low    { background: var(--line-soft); color: var(--ink-faint); }
.badge-prio-normal { background: var(--line-soft); color: var(--ink-soft); }
.badge-prio-high   { background: var(--warn-tint); color: var(--warn); }
.badge-prio-urgent { background: var(--bad-tint); color: var(--bad); }

.tab-count {
    display: inline-block; min-width: 1.25rem; padding: 0 .35rem; margin-left: .25rem;
    background: var(--brand); color: var(--on-brand); border-radius: 999px;
    font-size: .7rem; font-weight: 700; line-height: 1.25rem; text-align: center;
}
.app-tabs a.active .tab-count { background: var(--paper); color: var(--ink); }

.row-unread td { background: var(--warn-tint); font-weight: 500; }
.dot-unread {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint);
}

.thread { display: grid; gap: .9rem; }
.msg {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--card); padding: 1rem 1.15rem;
    animation: slide-in .3s var(--ease-out) both;
}
.msg header {
    display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between;
    align-items: baseline; margin-bottom: .5rem;
}
.msg header strong { font-size: .9rem; }
.msg header span { font-size: .78rem; color: var(--ink-faint); }
.msg .body { font-size: .94rem; line-height: 1.65; overflow-wrap: anywhere; }
.msg-staff { border-color: color-mix(in srgb, var(--accent) 30%, transparent); background: var(--accent-tint); }
.msg-system {
    border-style: dashed; background: transparent;
    font-size: .85rem; color: var(--ink-faint);
}
.msg-internal { background: var(--warn-tint); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 900px) {
    .shell, .shell.narrow, .shell.medium { width: min(100% - 2rem, 100%); }
    .section { padding: 3rem 0; }
    .hero { padding: 2.75rem 0 2rem; }
    .grid { gap: .9rem; }
}

@media (max-width: 680px) {
    body { font-size: 15.5px; }

    .shell, .shell.narrow, .shell.medium { width: calc(100% - 1.75rem); }
    .section { padding: 2.5rem 0; }
    .section-tight { padding: 2rem 0; }

    .hero { padding: 2.25rem 0 1.5rem; }
    .hero h1 { font-size: clamp(1.75rem, 8vw, 2.4rem); }
    .hero .lede, .lede { font-size: 1rem; }

    /* Full-width buttons stack better than a wrapped row of half-width ones. */
    .btn-row { gap: .5rem; }
    .btn-row .btn-lg { width: 100%; }
    .btn-lg { padding: .75rem 1.1rem; font-size: .96rem; }

    .stat-strip { gap: 1.25rem 2rem; }
    .stat b { font-size: 1.35rem; }

    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .card { padding: 1.15rem; }
    .form-card { padding: 1.25rem; }

    .page-head { gap: .75rem; margin-bottom: 1.25rem; }
    .page-head .btn, .page-head form { width: 100%; }
    .page-head .btn { justify-content: center; }

    .field-row { grid-template-columns: 1fr; gap: 0; }
    .field-row .field { margin-bottom: 1.05rem; }

    /* Tables are wide by nature; let them scroll rather than crush the page. */
    .table-wrap { border-radius: var(--radius-sm); }
    table { font-size: .85rem; }
    th, td { padding: .55rem .6rem; }
    td.truncate { max-width: 160px; }
    .table-actions { flex-wrap: wrap; justify-content: flex-start; }

    .app-head .bar { height: auto; padding: .5rem 0; flex-wrap: wrap; gap: .5rem; }
    .app-tabs { width: 100%; -webkit-overflow-scrolling: touch; }
    .app-head .bar > form,
    .app-head .bar > .btn { margin-left: 0 !important; width: 100%; }
    .app-head .bar > form .btn { width: 100%; }

    .filter-bar { gap: .4rem; }
    .filter-bar form { width: 100%; }

    .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tile { padding: .9rem 1rem; }
    .tile b { font-size: 1.4rem; }

    .steps li { padding-left: 2.6rem; }
    .steps li::before { width: 1.75rem; height: 1.75rem; font-size: .82rem; }

    .term { font-size: .8rem; padding: 1rem; }
    .pull { font-size: 1.1rem; padding-left: .85rem; }

    .copy-line { flex-wrap: wrap; }
    .copy-line input { flex: 1 1 100%; }
    .copy-line .btn { width: 100%; }

    .share-box { padding: 1.25rem; }
    .share-box .host { font-size: 1.05rem; overflow-wrap: anywhere; }

    .sub-card .host { font-size: .98rem; overflow-wrap: anywhere; }
    .term-meter .legend { flex-direction: column; gap: .15rem; }

    .msg { padding: .85rem .95rem; }
    .foot-grid { gap: 1.5rem; }
    .foot-bottom { flex-direction: column; gap: .4rem; }
    .error-page { padding: 3rem 0; }
    .error-code { font-size: 3rem; }
}

@media (max-width: 420px) {
    .checker-field input { font-size: .95rem; }
    .stat-tiles { grid-template-columns: 1fr; }
    .result-card { font-size: .9rem; }
    .result-card .btn { width: 100%; }
    .suggestions { gap: .3rem; }
    .chip { font-size: .78rem; }
}

/* Touch targets stay comfortable regardless of viewport width. */
@media (pointer: coarse) {
    .btn-sm { padding: .5rem .8rem; }
    .nav a { padding: .6rem .7rem; }
    .app-tabs a { padding: .55rem .8rem; }
}

/* ==========================================================================
   SweetAlert, wearing the Ajaira palette
   ========================================================================== */
.aj-toast.swal2-popup {
    font-family: var(--sans);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: .9rem 1rem;
    background: var(--card);
}
.aj-toast .swal2-title {
    font-size: .93rem; font-weight: 600; color: var(--ink);
    margin: 0; padding: 0; line-height: 1.45; text-align: left;
}
.aj-toast .swal2-icon { margin: 0 .7rem 0 0; width: 1.6em; height: 1.6em; border-width: 2px; }
.aj-toast .swal2-icon .swal2-icon-content { font-size: 1.1em; }
.aj-toast .swal2-timer-progress-bar { background: var(--brand); }
.aj-toast .swal2-close { color: var(--ink-faint); font-size: 1.4rem; }
.aj-toast .swal2-close:hover { color: var(--ink); }
.aj-toast.swal2-icon-success .swal2-icon { border-color: var(--ok); color: var(--ok); }
.aj-toast.swal2-icon-error   .swal2-icon { border-color: var(--bad); color: var(--bad); }
.aj-toast.swal2-icon-info    .swal2-icon { border-color: var(--accent); color: var(--accent); }

.swal2-container { padding: 1rem; }

.aj-modal.swal2-popup {
    font-family: var(--sans);
    border-radius: var(--radius);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    background: var(--card);
    padding: 1.75rem 1.5rem 1.5rem;
}
.aj-modal .swal2-title {
    font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink);
}
.aj-modal .swal2-html-container {
    font-size: .95rem; line-height: 1.6; color: var(--ink-soft); margin-top: .5rem;
}
.aj-modal .swal2-actions { gap: .55rem; margin-top: 1.5rem; }

/* buttonsStyling is off, so these are the real buttons. */
.aj-btn {
    display: inline-flex; align-items: center; justify-content: center;
    font: inherit; font-weight: 600; font-size: .94rem;
    padding: .62rem 1.15rem; border-radius: 10px; border: 1px solid transparent;
    cursor: pointer; transition: background .18s var(--ease), transform .12s var(--ease);
}
.aj-btn:active { transform: translateY(1px); }
.aj-btn-primary { background: var(--brand); color: var(--on-brand); }
.aj-btn-primary:hover { background: var(--brand-dark); }
.aj-btn-danger { background: var(--bad); color: var(--paper); }
.aj-btn-danger:hover { background: var(--bad); filter: brightness(.9); }
.aj-btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.aj-btn-ghost:hover { background: var(--line-soft); }

@media (max-width: 480px) {
    .swal2-container { padding: .5rem; }
    .aj-toast.swal2-popup { width: calc(100vw - 1rem); }
    .aj-modal .swal2-actions { flex-direction: column-reverse; width: 100%; }
    .aj-modal .swal2-actions .aj-btn { width: 100%; }
}

/* ==========================================================================
   Brand mark
   ========================================================================== */
.brand { gap: .55rem; }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; flex: none; display: block; }
.brand-word { font-weight: 800; letter-spacing: -.03em; }
.brand-word span { color: var(--ink-faint); font-weight: 700; }

/* ==========================================================================
   Theme switcher
   ========================================================================== */
.theme-toggle {
    display: inline-flex; align-items: center; gap: .15rem;
    background: var(--sunken); border: 1px solid var(--line);
    border-radius: 999px; padding: 2px; flex: none;
}
.theme-toggle button {
    display: grid; place-items: center;
    width: 34px; height: 30px; border: 0; border-radius: 999px;
    background: transparent; color: var(--ink-faint);
    cursor: pointer; line-height: 1; touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background .18s var(--ease), color .18s var(--ease);
}
.theme-toggle button:hover { color: var(--ink); }
.theme-toggle button[aria-pressed="true"] {
    background: var(--card); color: var(--ink); box-shadow: var(--shadow);
}
.theme-toggle svg { width: 16px; height: 16px; display: block; }

/* ==========================================================================
   Dashboard / admin shell — sidebar
   ========================================================================== */
.shell-app {
    display: grid;
    grid-template-columns: var(--sidebar) minmax(0, 1fr);
    min-height: calc(100vh - 62px);
}

.side {
    border-right: 1px solid var(--line);
    background: var(--sunken);
    padding: 1.5rem 1rem 2rem;
    position: sticky; top: 62px; align-self: start;
    max-height: calc(100vh - 62px); overflow-y: auto;
}
.side-group + .side-group { margin-top: 1.5rem; }
.side-group h4 {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
    color: var(--ink-faint); margin: 0 0 .5rem .65rem; font-weight: 700;
}
.side a {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem .65rem; border-radius: 9px; margin-bottom: 1px;
    color: var(--ink-soft); font-size: .9rem; font-weight: 500;
    transition: background .16s var(--ease), color .16s var(--ease);
}
.side a:hover { background: var(--line-soft); color: var(--ink); text-decoration: none; }
.side a.active { background: var(--brand); color: var(--on-brand); font-weight: 600; }
.side a.active .side-icon { opacity: 1; }
.side-icon { width: 17px; height: 17px; flex: none; opacity: .75; }
.side a .grow { flex: 1; }
.side .tab-count { margin-left: auto; }
.side a.active .tab-count { background: var(--on-brand); color: var(--brand); }

.side-foot {
    margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line);
}
.side-user { padding: .35rem .65rem .75rem; }
.side-user b { display: block; font-size: .88rem; }
.side-user span { font-size: .76rem; color: var(--ink-faint); word-break: break-all; }

.app-main { padding: 2rem 0 4rem; min-width: 0; }
.app-main > .shell,
.app-main > .shell.narrow,
.app-main > .shell.medium { width: min(100% - 3rem, 940px); margin-inline: auto 0; margin-left: 2rem; }

.side-toggle {
    display: none; align-items: center; gap: .5rem;
    background: var(--card); border: 1px solid var(--line); border-radius: 9px;
    padding: .45rem .7rem; font: inherit; font-size: .88rem; font-weight: 600;
    color: var(--ink); cursor: pointer;
}
.side-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 55;
    opacity: 0; pointer-events: none;
    transition: opacity .26s var(--ease);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.side-backdrop.open { opacity: 1; pointer-events: auto; }

/* Nothing should slide anywhere for someone who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
    .nav, .side { transition: opacity .12s linear, visibility 0s !important; transform: none !important; }
    .nav:not(.open), .side:not(.open) { transform: none !important; }
    .burger-bars, .burger-bars::before, .burger-bars::after { transition: none; }
}

@media (max-width: 900px) {
    .shell-app { grid-template-columns: minmax(0, 1fr); }
    .side {
        position: fixed; top: 0; right: 0; bottom: 0; left: auto;
        width: min(292px, 84vw); z-index: 60;
        max-height: none; padding: 1.25rem 1rem 1.5rem;
        background: var(--card); border-right: 0; border-left: 1px solid var(--line);
        overflow-y: auto; overscroll-behavior: contain;

        transform-origin: right center;
        transform: perspective(1400px) translate3d(100%, 0, 0) rotateY(-12deg);
        opacity: 0; visibility: hidden;
        transition: transform .34s var(--ease-out), opacity .22s linear, visibility 0s linear .34s;
        box-shadow: var(--shadow-lg);
    }
    .side.open {
        transform: perspective(1400px) translate3d(0, 0, 0) rotateY(0deg);
        opacity: 1; visibility: visible;
        transition: transform .34s var(--ease-out), opacity .18s linear, visibility 0s;
    }
    .app-main { padding-top: 1rem; }
    .app-main > .shell,
    .app-main > .shell.narrow,
    .app-main > .shell.medium { width: calc(100% - 1.75rem); margin-inline: auto; }
    .app-bar {
        display: flex; align-items: center; gap: .75rem;
        padding: .75rem 0; border-bottom: 1px solid var(--line);
        margin-bottom: 1rem;
    }
}
@media (min-width: 901px) { .app-bar { display: none; } .burger-inline { display: none; } }

/* ==========================================================================
   Accordion (FAQ)
   ========================================================================== */
.faq { display: grid; gap: .6rem; }
.faq details {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--card); overflow: hidden;
    transition: border-color .2s var(--ease);
}
.faq details[open] { border-color: color-mix(in srgb, var(--brand) 35%, transparent); }
.faq summary {
    padding: 1rem 3rem 1rem 1.15rem; cursor: pointer; position: relative;
    font-weight: 600; font-size: .98rem; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+"; position: absolute; right: 1.15rem; top: 50%;
    transform: translateY(-50%); font-size: 1.3rem; font-weight: 400;
    color: var(--ink-faint); transition: transform .22s var(--ease);
}
.faq details[open] summary::after { content: "−"; }
.faq summary:hover { background: var(--sunken); }
.faq .answer { padding: 0 1.15rem 1.15rem; color: var(--ink-soft); font-size: .94rem; line-height: 1.7; }
.faq .answer > :last-child { margin-bottom: 0; }
.faq-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.75rem; }

/* ==========================================================================
   OAuth buttons
   ========================================================================== */
.oauth-row { display: grid; gap: .55rem; margin-bottom: 1.25rem; }
.btn-oauth {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    width: 100%; padding: .7rem 1rem; border-radius: 10px;
    border: 1px solid var(--line); background: var(--raised); color: var(--ink);
    font: inherit; font-size: .94rem; font-weight: 600; cursor: pointer;
    transition: background .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease);
}
.btn-oauth:hover { background: var(--sunken); border-color: var(--ink-faint); text-decoration: none; transform: translateY(-1px); }
.btn-oauth svg { width: 18px; height: 18px; flex: none; }
.oauth-sep {
    display: flex; align-items: center; gap: .9rem;
    color: var(--ink-faint); font-size: .8rem; margin: 1.25rem 0;
    text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
}
.oauth-sep::before, .oauth-sep::after {
    content: ""; flex: 1; height: 1px; background: var(--line);
}
.linked-account {
    display: flex; align-items: center; gap: .7rem; padding: .7rem .85rem;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--sunken);
}
.linked-account svg { width: 18px; height: 18px; flex: none; }
.linked-account .grow { flex: 1; min-width: 0; }
.linked-account b { display: block; font-size: .9rem; }
.linked-account span { font-size: .78rem; color: var(--ink-faint); word-break: break-all; }

/* SweetAlert follows the theme too. */
[data-theme="dark"] .swal2-popup { background: var(--card); color: var(--ink); }
[data-theme="dark"] .aj-toast .swal2-title,
[data-theme="dark"] .aj-modal .swal2-title { color: var(--ink); }
[data-theme="dark"] .aj-modal .swal2-html-container { color: var(--ink-soft); }

/* ==========================================================================
   Dark-mode polish
   Depth in dark comes from surface steps and hairlines, not drop shadows.
   ========================================================================== */
[data-theme="dark"] {
    /* Cards get a 1px top highlight, the cheapest convincing sense of lift. */
    --edge: inset 0 1px 0 rgba(255,255,255,.045);
}
[data-theme="dark"] .card,
[data-theme="dark"] .tile,
[data-theme="dark"] .form-card,
[data-theme="dark"] .table-wrap,
[data-theme="dark"] .msg,
[data-theme="dark"] .faq details { box-shadow: var(--edge), var(--shadow); }

[data-theme="dark"] .lift:hover,
[data-theme="dark"] .tile:hover {
    border-color: #3a3a41;
    box-shadow: var(--edge), var(--shadow-lg);
}

/* The hero blobs read as smoke at full strength on a dark ground. */
[data-theme="dark"] .hero::before { opacity: .5; }
[data-theme="dark"] .hero::after  { opacity: .35; }

/* The header blur needs a solid floor or content ghosts through it. */
[data-theme="dark"] .site-header { background: color-mix(in srgb, var(--paper) 92%, transparent); }
[data-theme="dark"] .site-header.scrolled { box-shadow: 0 1px 0 var(--line); }

[data-theme="dark"] .checker-field { border-color: #43434b; }
[data-theme="dark"] .checker-field:focus-within { border-color: var(--brand); }

[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea {
    border-color: #33333a;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #5f5f66; }

/* Chrome paints autofilled inputs a hard blue-white otherwise. */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ink);
    -webkit-box-shadow: 0 0 0 1000px var(--raised) inset;
    caret-color: var(--ink);
}

[data-theme="dark"] .term { border: 1px solid var(--line); }
[data-theme="dark"] pre    { border: 1px solid var(--line); }
[data-theme="dark"] code   { background: var(--raised); }

[data-theme="dark"] .btn-ghost { background: var(--raised); border-color: #34343b; }
[data-theme="dark"] .btn-ghost:hover { background: #2b2b31; border-color: #43434b; }
[data-theme="dark"] .btn-dark { background: var(--raised); color: var(--ink); border-color: #3a3a41; }
[data-theme="dark"] .btn-dark:hover { background: #2e2e35; color: var(--ink); }
[data-theme="dark"] .btn-oauth { background: var(--raised); border-color: #34343b; }
[data-theme="dark"] .btn-oauth:hover { background: #2b2b31; border-color: #4a4a52; }

[data-theme="dark"] .side { background: var(--sunken); }
[data-theme="dark"] .side a:hover { background: var(--raised); }
[data-theme="dark"] .theme-toggle { background: var(--sunken); border-color: #2f2f36; }
[data-theme="dark"] .theme-toggle button[aria-pressed="true"] { background: var(--raised); }

[data-theme="dark"] th { background: var(--sunken); }
[data-theme="dark"] tbody tr:hover { background: var(--raised); }
[data-theme="dark"] .row-unread td { background: color-mix(in srgb, var(--warn-tint) 70%, var(--card)); }

[data-theme="dark"] .aj-toast.swal2-popup,
[data-theme="dark"] .aj-modal.swal2-popup { box-shadow: var(--edge), var(--shadow-lg); }
[data-theme="dark"] .swal2-container.swal2-backdrop-show { background: rgba(0,0,0,.66); }

/* ==========================================================================
   Shared refinements
   ========================================================================== */
::selection { background: color-mix(in srgb, var(--brand) 30%, transparent); color: var(--ink); }

* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--line); border-radius: 99px;
    border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); background-clip: content-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Anchored headings must clear the sticky header. */
[id] { scroll-margin-top: 84px; }

/* ==========================================================================
   Icons — replacing the emoji that used to sit here
   ========================================================================== */
.icon {
    width: 1.15em; height: 1.15em; flex: none;
    vertical-align: -.16em; stroke-width: 1.75;
}
.icon-lg { width: 1.7rem; height: 1.7rem; }
.icon-xl { width: 2.4rem; height: 2.4rem; }

/* The block that opens a card, where an emoji used to be. */
.card .icon-tile {
    display: grid; place-items: center;
    width: 40px; height: 40px; border-radius: 11px;
    background: var(--brand-tint); color: var(--brand);
    margin-bottom: .85rem;
}
.card .icon-tile .icon { width: 20px; height: 20px; }
.accent-card .icon-tile { background: color-mix(in srgb, var(--brand) 18%, transparent); }

.empty .icon-tile {
    width: 52px; height: 52px; border-radius: 15px; margin: 0 auto 1rem;
    background: var(--sunken); color: var(--ink-faint);
}
.empty .icon-tile .icon { width: 26px; height: 26px; }
.empty .icon-tile.is-ok   { background: var(--ok-tint); color: var(--ok); }
.empty .icon-tile.is-warn { background: var(--warn-tint); color: var(--warn); }

.heading-icon {
    display: inline-flex; align-items: center; gap: .5rem;
}
.heading-icon .icon { color: var(--brand); }

/* ==========================================================================
   The banter block — the running joke, told as a conversation
   ========================================================================== */
.banter {
    max-width: 34ch; margin-inline: auto; text-align: center;
    font-family: var(--bn);
}
.banter-q {
    font-size: clamp(1.15rem, 3.2vw, 1.5rem); font-weight: 600;
    color: var(--ink); margin: 0 0 .6rem;
}
.banter-a {
    font-size: clamp(1.5rem, 5vw, 2.3rem); font-weight: 700;
    color: var(--brand); margin: 0 0 .9rem; letter-spacing: -.01em;
    min-height: 1.5em; display: flex; align-items: center;
    justify-content: center; gap: .1em;
}
.banter-caret {
    width: 3px; height: 1.05em; border-radius: 2px;
    background: var(--brand); opacity: .65;
    animation: blink 1.05s steps(1) infinite;
}
.banter-tail {
    font-size: clamp(1rem, 2.6vw, 1.2rem); color: var(--ink-soft);
    margin: 0; font-weight: 500;
}
[data-banter] { display: inline-block; }

@keyframes blink { 0%, 55% { opacity: .65; } 56%, 100% { opacity: 0; } }

/* No JS, or motion turned down: the first answer just sits there, which is
   still the joke. */
html:not(.js) .banter-caret { display: none; }
@media (prefers-reduced-motion: reduce) {
    .banter-caret { animation: none; opacity: .65; }
}

/* Locking the page behind an open drawer, without the iOS scroll-jump that
   position:fixed on <body> causes. */
body.drawer-open { overflow: hidden; }

/* ==========================================================================
   DNS manager
   Records are a list, not a table — a table forces a horizontal scroll on a
   phone and this is the page people use most.
   ========================================================================== */
.dns-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
    margin-bottom: 1.5rem;
}
.dns-head .grow { flex: 1; min-width: 200px; }
.dns-head h1 {
    font-size: clamp(1.15rem, 3.2vw, 1.6rem); margin: 0;
    overflow-wrap: anywhere; letter-spacing: -.01em;
}

.dns-meter { min-width: 128px; }
.dns-meter .bar {
    height: 5px; border-radius: 99px; background: var(--line-soft); overflow: hidden;
}
.dns-meter .fill {
    height: 100%; border-radius: 99px; background: var(--ok);
    transition: width .5s var(--ease-out);
}
.dns-meter .fill.full { background: var(--warn); }
.dns-meter span { display: block; font-size: .78rem; color: var(--ink-faint); margin-top: .35rem; }
.dns-meter strong { color: var(--ink); }

.dns-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); margin-bottom: 1.25rem; overflow: hidden;
}
.dns-card-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--line-soft);
    background: var(--sunken);
}
.dns-card-head h2 { font-size: 1rem; margin: 0; flex: 1; }
.dns-card-head .help { margin: 0; font-size: .8rem; }
.dns-card > .dns-form,
.dns-card > p,
.dns-card > .preset-grid,
.dns-card > .btn-row { padding-inline: 1.25rem; }
.dns-card > .dns-form { padding-block: 1.25rem; }
.dns-card > p:first-of-type { padding-top: 1.1rem; }
.dns-card > .btn-row { padding-bottom: 1.25rem; }

/* ---- record rows ---- */
.rec-list { list-style: none; margin: 0; padding: 0; }
.rec {
    display: grid; align-items: center; gap: .25rem .9rem;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    padding: .85rem 1.25rem; border-bottom: 1px solid var(--line-soft);
    transition: background .14s var(--ease);
}
.rec:last-child { border-bottom: 0; }
.rec:hover { background: var(--sunken); }
.rec-ns { background: color-mix(in srgb, var(--accent) 7%, transparent); }

.rec-type { align-self: start; margin-top: .15rem; }
.rec-body { min-width: 0; }
.rec-name { font-size: .82rem; color: var(--ink-faint); overflow-wrap: anywhere; }
.rec-value {
    font-size: .95rem; font-weight: 600; color: var(--ink);
    overflow-wrap: anywhere; line-height: 1.4;
}
.rec-value .help { font-weight: 400; margin-left: .35rem; }
.rec-ttl { white-space: nowrap; font-size: .8rem; }
.rec-actions { display: flex; gap: .35rem; }

@media (max-width: 620px) {
    .rec {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "type body" ". ttl" ". actions";
        row-gap: .45rem;
    }
    .rec-type { grid-area: type; }
    .rec-body { grid-area: body; }
    .rec-ttl { grid-area: ttl; }
    .rec-actions { grid-area: actions; }
}

/* ---- the add form ---- */
.dns-grid {
    display: grid; gap: .9rem; margin-bottom: 1.05rem;
    grid-template-columns: 110px minmax(0, 1fr) 130px;
}
.dns-grid .field { margin-bottom: 0; }
.dns-grid .field[hidden] { display: none; }
@media (max-width: 700px) { .dns-grid { grid-template-columns: 1fr; } }

/* The zone suffix sits in the field, so nobody types it twice. */
.suffixed { display: flex; align-items: stretch; }
.suffixed input {
    border-top-right-radius: 0; border-bottom-right-radius: 0;
    border-right: 0; min-width: 0;
}
.suffix {
    display: flex; align-items: center; padding: 0 .7rem;
    background: var(--sunken); border: 1px solid var(--line); border-left: 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: .82rem; color: var(--ink-faint); white-space: nowrap;
    max-width: 46%; overflow: hidden; text-overflow: ellipsis;
}

/* ---- delegation ---- */
.dns-delegated {
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    background: var(--accent-tint); border-radius: var(--radius);
    padding: 1.15rem 1.25rem; margin-bottom: 1.25rem;
}
.dns-delegated h3 { font-size: 1rem; margin: 0 0 .5rem; }
.dns-delegated p { margin: 0 0 .5rem; font-size: .93rem; }
.ns-list { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .3rem; }
.ns-list li {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: .4rem .65rem; font-size: .88rem;
}

/* ---- presets ---- */
.preset-grid { display: grid; gap: .55rem; padding-block: 1.1rem; }
.preset {
    display: flex; align-items: center; gap: 1rem;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: .8rem .95rem; background: var(--raised);
    transition: border-color .16s var(--ease);
}
.preset:hover { border-color: color-mix(in srgb, var(--ink) 25%, transparent); }
.preset .grow { flex: 1; min-width: 0; }
.preset b { display: block; font-size: .92rem; }
.preset span { display: block; font-size: .82rem; color: var(--ink-faint); line-height: 1.5; }

/* ==========================================================================
   Partners
   ========================================================================== */
.partner-group { margin-bottom: 2.5rem; }
.partner-group-head { margin-bottom: 1rem; }
.partner-group-head h2 { font-size: 1.15rem; margin: 0 0 .2rem; }
.partner-group-head p { margin: 0; font-size: .88rem; color: var(--ink-faint); }

.partner-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.partner-card {
    display: flex; gap: .9rem; align-items: flex-start;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.15rem; box-shadow: var(--shadow);
}
.partner-card .grow { flex: 1; min-width: 0; }
.partner-card h3 {
    font-size: 1rem; margin: 0 0 .3rem;
    display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
}
.partner-card p { font-size: .89rem; color: var(--ink-soft); margin: 0 0 .55rem; line-height: 1.6; }

/* A monogram, so a partner without a logo file still looks deliberate. */
.partner-logo {
    flex: none; width: 42px; height: 42px; border-radius: 12px;
    display: grid; place-items: center;
    background: var(--brand-tint); color: var(--brand);
    font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em;
}

.partner-link {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .85rem; font-weight: 600; word-break: break-all;
}
.partner-link .icon { width: .85em; height: .85em; }

.partner-pitch {
    background: var(--sunken); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.5rem; margin-top: 1rem;
}
.partner-pitch h2 { font-size: 1.15rem; margin: 0 0 .3rem; }

.partner-cta {
    text-align: center; margin-top: 2.5rem; padding: 2rem 1.5rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--brand-tint);
    border-color: color-mix(in srgb, var(--brand) 25%, transparent);
}
.partner-cta h2 { margin: 0 0 .4rem; }
.partner-cta p { max-width: 48ch; margin: 0 auto 1.25rem; color: var(--ink-soft); }

@media (max-width: 620px) {
    .partner-cta { padding: 1.5rem 1.15rem; }
    .partner-cta .btn { width: 100%; }
}

/* ==========================================================================
   API tokens
   ========================================================================== */
.token-fresh {
    background: var(--ok-tint);
    border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent);
    border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.5rem;
}
.token-fresh h3 { font-size: 1rem; margin: 0; }
.token-fresh input { font-size: .82rem; }

/* Endpoint rows on the docs page. */
.api-method {
    display: inline-block; min-width: 62px; text-align: center;
    font-family: var(--mono); font-size: .72rem; font-weight: 700;
    padding: .2rem .45rem; border-radius: 5px; letter-spacing: .03em;
}
.m-get    { background: var(--accent-tint); color: var(--accent); }
.m-post   { background: var(--ok-tint);     color: var(--ok); }
.m-patch  { background: var(--warn-tint);   color: var(--warn); }
.m-delete { background: var(--bad-tint);    color: var(--bad); }

.api-table td:first-child { white-space: nowrap; }
.api-table code { font-size: .85rem; }

/* ==========================================================================
   Partner logos
   ========================================================================== */
.logo-wall {
    display: flex; flex-wrap: wrap; justify-content: center;
    align-items: center; gap: .6rem; margin-top: 1rem;
}
.logo-chip {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .55rem .95rem; border-radius: 10px;
    border: 1px solid var(--line); background: var(--card);
    color: var(--ink-soft); font-size: .9rem; font-weight: 600;
    transition: border-color .18s var(--ease), transform .18s var(--ease);
}
a.logo-chip:hover {
    border-color: color-mix(in srgb, var(--ink) 28%, transparent);
    transform: translateY(-1px); text-decoration: none; color: var(--ink);
}
.logo-chip img { display: block; max-height: 26px; width: auto; object-fit: contain; }

.partner-logo.is-image {
    background: var(--card); object-fit: contain; padding: 4px;
    border: 1px solid var(--line);
}

.logo-row { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.logo-row .grow { flex: 1; min-width: 0; }
.logo-row label { display: block; font-size: .86rem; font-weight: 600; margin-bottom: .35rem; }
.logo-row input[type=file] { font-size: .84rem; }
.logo-preview {
    flex: none; width: 52px; height: 52px; border-radius: 12px;
    object-fit: contain; background: var(--card);
    border: 1px solid var(--line); padding: 4px;
}
.logo-preview.is-empty {
    display: grid; place-items: center; padding: 0;
    background: var(--brand-tint); color: var(--brand);
    font-weight: 800; font-size: 1.25rem;
}

/* ==========================================================================
   Premium names
   ========================================================================== */
.premium-grid { display: grid; gap: .6rem; }
.premium-card {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1rem 1.15rem;
    transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.premium-card:hover {
    border-color: color-mix(in srgb, var(--brand) 40%, transparent);
    transform: translateY(-1px);
}
.premium-card .grow { flex: 1; min-width: 160px; }
.premium-card h3 { font-size: 1.1rem; margin: 0; letter-spacing: -.01em; }
.premium-card h3 span { color: var(--ink-faint); font-weight: 500; font-size: .85em; }
.premium-card .help { margin: .15rem 0 0; }
.premium-buy { display: flex; align-items: center; gap: .75rem; }
.premium-buy b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   WHOIS
   ========================================================================== */
.whois-card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.5rem; margin-top: 1.5rem;
    box-shadow: var(--shadow);
}
.whois-card.is-free { border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: var(--ok-tint); }
.whois-head {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line-soft);
}
.whois-head h2 { font-size: 1.15rem; margin: 0; flex: 1; overflow-wrap: anywhere; }

.whois-list { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: .7rem 1rem; margin: 0; }
.whois-list dt {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink-faint); font-weight: 700; padding-top: .12rem;
}
.whois-list dd { margin: 0; font-size: .93rem; min-width: 0; overflow-wrap: anywhere; }
.whois-list dd .help { display: block; margin-top: .2rem; }
.whois-redacted {
    display: inline-flex; align-items: center; gap: .35rem;
    color: var(--ink-faint); font-style: italic;
}
@media (max-width: 560px) {
    .whois-list { grid-template-columns: 1fr; gap: .15rem; }
    .whois-list dd { margin-bottom: .8rem; }
}

/* ==========================================================================
   Share post picker
   ========================================================================== */
.post-picker { display: grid; gap: .5rem; margin-top: 1rem; }
.post-option {
    display: block; width: 100%; text-align: left; cursor: pointer;
    background: var(--raised); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: .75rem .9rem; font: inherit;
    transition: border-color .16s var(--ease), background .16s var(--ease);
}
.post-option:hover { border-color: color-mix(in srgb, var(--ink) 25%, transparent); }
.post-option.is-active {
    border-color: var(--brand);
    background: var(--brand-tint);
}
.post-option b {
    display: block; font-size: .78rem; text-transform: uppercase;
    letter-spacing: .05em; color: var(--ink-faint); margin-bottom: .3rem;
}
.post-option.is-active b { color: var(--brand); }
.post-option span {
    display: block; font-family: var(--bn); font-size: .92rem;
    line-height: 1.6; color: var(--ink);
}

/* ==========================================================================
   What you've lost
   ========================================================================== */
.lost { margin-top: 2.5rem; }
.lost-head { margin-bottom: .85rem; }
.lost-head h2 { font-size: 1.1rem; margin: 0 0 .15rem; }
.lost-head .help { margin: 0; }
.lost-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.lost-list li {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    padding: .7rem .9rem; border: 1px dashed var(--line);
    border-radius: var(--radius-sm); background: var(--sunken);
}
.lost-list .mono { flex: 1; min-width: 160px; color: var(--ink-faint); text-decoration: line-through; }
.lost-list .btn { margin-left: auto; }

/* ==========================================================================
   Showcase
   ========================================================================== */
.showcase-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.show-card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.15rem;
    display: flex; flex-direction: column; gap: .5rem;
    transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .2s var(--ease);
}
.show-card:hover {
    transform: translateY(-3px); box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--brand) 35%, transparent);
}
.show-host { font-size: 1rem; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.show-host span { color: var(--ink-faint); font-weight: 500; }
.show-host:hover { color: var(--brand); text-decoration: none; }
.show-note { font-size: .89rem; color: var(--ink-soft); margin: 0; flex: 1; line-height: 1.55; }
.show-foot {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    padding-top: .6rem; border-top: 1px solid var(--line-soft); font-size: .78rem;
}
.show-by { font-weight: 600; color: var(--ink-soft); }
.show-whois { margin-left: auto; font-family: var(--mono); }

.showcase-cta {
    text-align: center; margin-top: 2.5rem; padding: 2rem 1.5rem;
    border-radius: var(--radius); background: var(--sunken);
    border: 1px solid var(--line);
}
.showcase-cta p { font-size: 1.05rem; color: var(--ink-soft); margin: 0 0 1.1rem; }

/* ==========================================================================
   Error page animation
   The logo's dot, refusing to land. Four keyframe sets, no library.
   ========================================================================== */
.err-anim { max-width: 320px; margin: 0 auto 1.25rem; }
.err-anim svg { width: 100%; height: auto; display: block; overflow: visible; }

.err-ground {
    stroke: var(--line); stroke-width: 2; stroke-linecap: round; fill: none;
}
.err-trail {
    stroke: var(--ink-faint); stroke-width: 3; stroke-linecap: round; fill: none;
    stroke-dasharray: 0.1 11; opacity: .55;
}
.err-dot { fill: var(--brand); }

/* 404 — it rolls off the edge and comes back in from the other side. */
.err-404 .err-dot { animation: err-escape 4.2s var(--ease-out) infinite; }
@keyframes err-escape {
    0%           { transform: translate(0, 0); opacity: 1; }
    45%          { transform: translate(160px, -34px); opacity: 1; }
    58%          { transform: translate(232px, -34px); opacity: 0; }
    59%          { transform: translate(-24px, 0); opacity: 0; }
    72%, 100%    { transform: translate(0, 0); opacity: 1; }
}

/* 403 — it runs at the wall and bounces straight back. */
.err-wall { stroke: var(--ink-faint); stroke-width: 3; stroke-linecap: round; fill: none; opacity: .7; }
.err-403 .err-dot { animation: err-bounce 3s var(--ease) infinite; }
@keyframes err-bounce {
    0%        { transform: translate(0, 0); }
    38%       { transform: translate(138px, -34px); }
    44%       { transform: translate(128px, -34px) scale(1.15, .85); }
    80%, 100% { transform: translate(0, 0) scale(1); }
}

/* 500 — it wobbles apart and pulls itself back together. */
.err-bits circle { fill: var(--bad); opacity: 0; }
.err-500 .err-dot { fill: var(--bad); animation: err-wobble 2.4s var(--ease) infinite; }
.err-500 .err-bits circle { animation: err-scatter 2.4s var(--ease) infinite; }
.err-500 .err-bits circle:nth-child(2) { animation-delay: .1s; }
.err-500 .err-bits circle:nth-child(3) { animation-delay: .2s; }
@keyframes err-wobble {
    0%, 100%  { transform: translate(0, 0) rotate(0); }
    30%       { transform: translate(132px, -46px) rotate(0); }
    45%       { transform: translate(130px, -44px) rotate(-8deg) scale(.9); }
    60%       { transform: translate(134px, -48px) rotate(8deg) scale(1.05); }
    85%       { transform: translate(132px, -46px) rotate(0) scale(1); }
}
@keyframes err-scatter {
    0%, 40%   { opacity: 0; transform: translate(0, 0); }
    55%       { opacity: .9; transform: translate(6px, -8px); }
    80%, 100% { opacity: 0; transform: translate(14px, -18px); }
}

/* 429 — it makes it, then sits there steaming. */
.err-heat path { stroke: var(--warn); stroke-width: 2.5; stroke-linecap: round; fill: none; opacity: 0; }
.err-429 .err-dot { fill: var(--warn); animation: err-tired 3.4s var(--ease) infinite; }
.err-429 .err-heat path { animation: err-steam 2s linear infinite; }
.err-429 .err-heat path:nth-child(2) { animation-delay: .6s; }
@keyframes err-tired {
    0%        { transform: translate(0, 0) scale(1); }
    35%       { transform: translate(132px, -46px) scale(1); }
    50%       { transform: translate(132px, -44px) scale(1.1, .9); }
    65%       { transform: translate(132px, -46px) scale(.95, 1.05); }
    85%, 100% { transform: translate(132px, -46px) scale(1); }
}
@keyframes err-steam {
    0%   { opacity: 0; transform: translateY(4px); }
    35%  { opacity: .8; }
    100% { opacity: 0; transform: translateY(-14px); }
}

/* Someone who asked for less motion gets a still frame, not a blank box. */
@media (prefers-reduced-motion: reduce) {
    .err-anim .err-dot,
    .err-anim .err-bits circle,
    .err-anim .err-heat path { animation: none !important; }
    .err-anim .err-dot { transform: translate(132px, -46px); }
}

.error-page { padding: 3.5rem 0 4.5rem; }
.error-code {
    font-family: var(--mono); font-size: 2.4rem; font-weight: 800;
    color: var(--ink-faint); margin: 0; line-height: 1; letter-spacing: .04em;
}
.error-page h1 { font-family: var(--bn); margin-top: .6rem; font-size: clamp(1.4rem, 4.5vw, 2.1rem); }
.error-page .lede { max-width: 46ch; margin-inline: auto; }
.error-page .btn-row { margin-top: 1.75rem; }

/* ==========================================================================
   Dashboard subdomain list
   Rows, not cards. Five subdomains as five big boxes is a lot of scrolling
   for very little information.
   ========================================================================== */
.sub-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.sub-row {
    display: grid; align-items: center; gap: .35rem 1rem;
    grid-template-columns: minmax(0, 1fr) auto auto;
    background: var(--card); border: 1px solid var(--line);
    border-left: 3px solid var(--line);
    border-radius: var(--radius-sm); padding: .8rem 1rem;
    transition: border-color .16s var(--ease), transform .16s var(--ease);
}
.sub-row:hover { border-color: color-mix(in srgb, var(--ink) 22%, transparent); transform: translateX(2px); }
.sub-row.status-active    { border-left-color: var(--ok); }
.sub-row.status-pending   { border-left-color: var(--warn); }
.sub-row.status-expired   { border-left-color: var(--bad); }
.sub-row.status-suspended { border-left-color: var(--bad); }

.sub-name {
    grid-column: 1; font-size: 1rem; font-weight: 700; color: var(--ink);
    overflow-wrap: anywhere; line-height: 1.3;
}
.sub-name span { color: var(--ink-faint); font-weight: 500; }
.sub-name:hover { color: var(--brand); text-decoration: none; }

.sub-meta {
    grid-column: 1; grid-row: 2;
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    font-size: .8rem;
}
.sub-meta .help { margin: 0; }
.sub-meta .is-soon { color: var(--warn); font-weight: 600; }

.sub-actions { grid-column: 3; grid-row: 1 / span 2; display: flex; gap: .35rem; }
.sub-actions .icon { width: 15px; height: 15px; }

.filter-bar .filter-n {
    display: inline-block; min-width: 1.1rem; padding: 0 .25rem; margin-left: .2rem;
    border-radius: 99px; background: color-mix(in srgb, currentColor 14%, transparent);
    font-size: .72rem; font-weight: 700;
}

@media (max-width: 560px) {
    .sub-row { grid-template-columns: minmax(0, 1fr); }
    .sub-actions { grid-column: 1; grid-row: 3; margin-top: .35rem; }
    .sub-actions .btn { flex: 1; justify-content: center; }
}

/* ==========================================================================
   Narrow-screen corrections found in the responsive pass
   ========================================================================== */
@media (max-width: 400px) {
    /* A fixed 42px logo beside text with no wrap squeezes the name column. */
    .partner-card { flex-wrap: wrap; }
    .partner-card .grow { flex-basis: 100%; }

    /* Long premium names and their price should not fight for one line. */
    .premium-card { align-items: flex-start; }
    .premium-buy { width: 100%; justify-content: space-between; }

    /* Token strings never fit; let them scroll rather than blow out the page. */
    .token-fresh input { font-size: .74rem; }

    .post-option span { font-size: .88rem; }
    .lost-list li { gap: .4rem; }
    .lost-list .btn { margin-left: 0; width: 100%; justify-content: center; }
    .show-foot { font-size: .74rem; }
    .err-anim { max-width: 250px; }
}

/* Nothing in the layout may push the page sideways. */
html, body { max-width: 100%; overflow-x: hidden; }