:root {
    --bg: #0f1117;
    --fg: #e6e6e6;
    --accent: #6c8cff;
    --accent-2: #a06bff;
    --surface: #1a1d27;
    --border: #2a2e3a;
    --muted: rgba(230, 230, 230, 0.6);
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    --glow: rgba(108, 140, 255, 0.18);
}

/* Explicit theme overrides (chosen on the settings page) */
[data-theme="dark"] {
    --bg: #0f1117;
    --fg: #e6e6e6;
    --accent: #6c8cff;
    --surface: #1a1d27;
    --border: #2a2e3a;
    --muted: rgba(230, 230, 230, 0.6);
}

[data-theme="light"] {
    --bg: #f6f7f9;
    --fg: #1a1a1a;
    --accent: #3b5bdb;
    --accent-2: #7c3aed;
    --surface: #ffffff;
    --border: #d9dbe2;
    --muted: rgba(0, 0, 0, 0.55);
    --shadow: 0 10px 30px rgba(20, 30, 80, 0.10);
    --glow: rgba(59, 91, 219, 0.16);
}

/* "Auto" follows the OS preference */
@media (prefers-color-scheme: light) {
    [data-theme="auto"] {
        --bg: #f6f7f9;
        --fg: #1a1a1a;
        --accent: #3b5bdb;
        --accent-2: #7c3aed;
        --surface: #ffffff;
        --border: #d9dbe2;
        --muted: rgba(0, 0, 0, 0.55);
        --shadow: 0 10px 30px rgba(20, 30, 80, 0.10);
        --glow: rgba(59, 91, 219, 0.16);
    }
}

* { box-sizing: border-box; }

/* Display serif for big page titles; body stays in Space Grotesk for legibility */
h1 {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    letter-spacing: -0.01em;
}

html { overflow-x: hidden; }  /* full-bleed hero uses 100vw; clip scrollbar-width overhang */

/* Text-size preference (settings → "Cỡ chữ"). Scaling the root font scales
   every rem-based size, so text and controls grow together — easier for
   older users. "normal" is the 100% default. */
html[data-text-size="large"]  { font-size: 112.5%; }
html[data-text-size="xlarge"] { font-size: 125%; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
    font-size: 1.06rem;          /* slightly larger base text for readability */
    background:
        radial-gradient(900px circle at 50% -15%, var(--glow), transparent 55%),
        var(--bg);
    background-attachment: fixed;
    color: var(--fg);
    line-height: 1.65;
}

/* Visually-hidden but readable by screen readers */
.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;
}

/* Clear keyboard-focus outline (helps low-vision and keyboard users) */
a:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible,
.preset-btn:focus-visible,
.hist-link:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 6px;
}

nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.9rem 2rem;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(12px);
    background: color-mix(in srgb, var(--bg) 78%, transparent);
}

nav a {
    color: var(--muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: color 0.15s ease;
}

nav a:hover { color: var(--fg); text-decoration: none; }

/* Desktop: links sit inline, pushed to the right edge of the bar. */
.nav-links-inline {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-left: auto;
}

/* Hamburger and off-canvas drawer are hidden until the mobile breakpoint. */
.nav-toggle { display: none; }
.sidebar { display: none; }

nav .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--fg);
    letter-spacing: -0.01em;
}

nav .brand-icon {
    width: 1.35rem;
    height: 1.35rem;
    color: var(--accent);
}

/* ── Mobile off-canvas sidebar ─────────────────────────────────────────── */
.nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.nav-backdrop[hidden] { display: none; }

body.nav-open { overflow: hidden; }   /* lock background scroll while open */

@media (max-width: 720px) {
    /* Tighter gutters everywhere so content stops overflowing on phones. */
    nav { padding: 0.8rem 1.1rem; }

    .nav-links-inline { display: none; }   /* swap inline links for the drawer */

    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        padding: 0.3rem;
        color: var(--fg);
        background: none;
        border: 0;
        cursor: pointer;
    }

    .nav-toggle-icon { width: 1.65rem; height: 1.65rem; }

    /* Drawer: anchored at the right edge and revealed with a fade. We do NOT
       park it off-screen (e.g. translateX(100%)) because it's position:fixed,
       and a fixed element sitting outside the viewport adds a horizontal
       scroll strip that html's overflow-x:hidden can't clip (its containing
       block is the viewport, not <html>). Fading in place keeps it in bounds.
       visibility:hidden also keeps the closed links out of the tab order. */
    .sidebar {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 50;
        height: 100%;
        width: min(80vw, 300px);
        padding: 1rem;
        background: var(--bg);
        border-left: 1px solid var(--border);
        box-shadow: -12px 0 40px rgba(0, 0, 0, 0.35);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease;
        overflow-y: auto;
    }

    .sidebar.is-open {
        opacity: 1;
        visibility: visible;
    }

    .sidebar a {
        padding: 0.85rem 0.75rem;
        border-radius: 10px;
        font-size: 1.05rem;        /* larger tap targets for older users */
    }

    .sidebar a:hover {
        background: color-mix(in srgb, var(--accent) 10%, transparent);
    }

    .sidebar-close {
        display: inline-flex;
        align-self: flex-end;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.5rem;
        padding: 0.3rem;
        color: var(--muted);
        background: none;
        border: 0;
        cursor: pointer;
    }

    .sidebar-close-icon { width: 1.5rem; height: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar { transition: none; }
    .tab-indicator { transition: none; }
}

main {
    max-width: 760px;
    margin: 0 auto;
    padding: 1.25rem 2rem 2rem;
}

form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

textarea {
    width: 100%;
    padding: 0.75rem;
    font: inherit;
    color: var(--fg);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    resize: vertical;
}

textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--glow);
}

.input-area {
    width: 100%;
}

/* Uploaded-image preview (thumbnail + filename + remove) below the textarea */
.image-preview {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 0.7rem;
    padding: 0.5rem 0.7rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.image-preview[hidden] { display: none; }

.image-thumb {
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.image-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.9rem;
    color: var(--muted);
}

/* ── Tabbed input (text / image / voice) ───────────────────────────────── */
.input-tabs {
    position: relative;            /* anchors the sliding underline */
    display: flex;
    gap: 0.3rem;
    width: 100%;
    border-bottom: 1px solid var(--border);
}

.input-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1rem;
    margin-bottom: -1px;                  /* overlap the divider */
    color: var(--muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font: inherit;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.input-tab svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }

.input-tab:hover { color: var(--fg); }

.input-tab.is-active {
    color: var(--accent);
    /* underline is drawn by the gliding .tab-indicator, not a static border */
}

/* The animated underline that slides between tabs (sized/placed by JS). */
.tab-indicator {
    position: absolute;
    left: 0;
    bottom: -1px;                 /* sit on the divider line */
    width: 0;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
    transform: translateX(0);
    transition: transform 0.25s ease, width 0.25s ease;
    pointer-events: none;
}

.input-panel { width: 100%; }
.input-panel[hidden] { display: none; }
.input-panel .presets { margin-bottom: 0.8rem; }

/* ── Voice panel (mic + live transcript) ───────────────────────────────── */
.voice-pad {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-height: 11rem;
    padding: 1.5rem;
    text-align: center;
}

.voice-mic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 35%, transparent);
    transition: transform 0.12s ease, filter 0.15s ease;
}

.voice-mic:hover { filter: brightness(1.07); }
.voice-mic:active { transform: translateY(1px); }
.voice-mic svg { width: 2.2rem; height: 2.2rem; }

/* Recording state — red, with a pulsing ring. */
.voice-mic.is-listening { background: linear-gradient(135deg, #f85149, #d29922); }

@media (prefers-reduced-motion: no-preference) {
    .voice-mic.is-listening { animation: mic-pulse 1.5s ease-out infinite; }
}

@keyframes mic-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, #f85149 50%, transparent); }
    70% { box-shadow: 0 0 0 18px color-mix(in srgb, #f85149 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, #f85149 0%, transparent); }
}

.voice-status {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
}

.voice-transcript {
    margin: 0;
    width: 100%;
    padding: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
}

.voice-transcript[hidden] { display: none; }

.text-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

.text-meta .text-tools { margin-left: auto; }

.submit-row {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 0.4rem;
}

/* Drag-and-drop zone for the image tab */
.dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    width: 100%;
    min-height: 11rem;
    padding: 1.5rem;
    text-align: center;
    color: var(--muted);
    background: color-mix(in srgb, var(--surface) 60%, transparent);
    border: 2px dashed var(--border);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.dropzone:hover,
.dropzone:focus-visible {
    border-color: var(--accent);
    color: var(--fg);
    outline: none;
}

.dropzone-icon { width: 2.4rem; height: 2.4rem; color: var(--accent); }
.dropzone-text { margin: 0; font-size: 0.95rem; }

/* Once a file is chosen, drop the dashed frame and just show the preview card */
.dropzone.has-file {
    cursor: default;
    min-height: 0;
    padding: 0;
    border: none;
    background: transparent;
}

.dropzone.has-file .dropzone-icon,
.dropzone.has-file .dropzone-text { display: none; }

.dropzone .image-preview { margin-top: 0; width: 100%; }

/* Whole-form highlight while an image is being dragged over it */
form.drag-active {
    outline: 2px dashed var(--accent);
    outline-offset: 6px;
    border-radius: 14px;
}

.drag-active .dropzone {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--fg);
}

.home-header,
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    margin-bottom: 1rem;
}

.home-header h1,
.page-header h1 {
    margin: 0;
    font-size: clamp(1.8rem, 5vw, 2.55rem);
    line-height: 1.05;
}

.home-header h1 {
    font-weight: 800;
}

/* Generic button (Save, Clear, etc.). The special homepage Check button uses
   .sparkle-button (see bottom of file) and opts out of these rules via :not(). */
button:not(.sparkle-button):not(.preset-btn):not(.info-button):not(.text-tool-btn):not(.input-tab):not(.nav-toggle):not(.sidebar-close):not(.voice-mic) {
    padding: 0.6rem 1.4rem;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 32%, transparent);
    transition: filter 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

button:not(.sparkle-button):not(.preset-btn):not(.info-button):not(.text-tool-btn):not(.input-tab):not(.nav-toggle):not(.sidebar-close):not(.voice-mic):hover {
    filter: brightness(1.08);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 42%, transparent);
}
button:not(.sparkle-button):not(.preset-btn):not(.info-button):not(.text-tool-btn):not(.input-tab):not(.nav-toggle):not(.sidebar-close):not(.voice-mic):active { transform: translateY(1px); }

/* Quick-test preset chips above the textarea */
.presets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.presets-label {
    font-size: 0.85rem;
    color: var(--muted);
    margin-right: 0.15rem;
}

.info-popover {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.info-button {
    min-height: 2.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.45rem 0.75rem;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
}

.info-button:hover,
.info-button[aria-expanded="true"] {
    color: var(--fg);
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    border-color: var(--accent);
}

.info-button svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

.info-panel {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    z-index: 20;
    width: min(21rem, calc(100vw - 4rem));
    padding: 1rem;
    color: var(--fg);
    background: color-mix(in srgb, var(--surface) 96%, var(--bg));
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.info-panel[hidden] { display: none; }

.info-panel::before {
    content: "";
    position: absolute;
    top: -0.42rem;
    right: 0.52rem;
    width: 0.8rem;
    height: 0.8rem;
    background: inherit;
    border-left: 1px solid var(--border);
    border-top: 1px solid var(--border);
    transform: rotate(45deg);
}

.info-panel h2 {
    margin: 0 0 0.45rem;
    font-size: 1rem;
    line-height: 1.25;
}

.info-panel p {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.info-panel ol {
    margin: 0.75rem 0 0;
    padding-left: 1.2rem;
    font-size: 0.9rem;
    line-height: 1.45;
}

.info-panel li + li { margin-top: 0.4rem; }

.preset-btn {
    padding: 0.35rem 0.85rem;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--fg);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.preset-btn:hover {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    border-color: var(--accent);
}

.preset-btn:active { transform: translateY(1px); }

.back-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    color: var(--fg);
    background: color-mix(in srgb, var(--surface) 86%, var(--accent));
    border: 1px solid var(--border);
    border-radius: 8px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
    transition: border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.back-button:hover {
    color: var(--accent);
    border-color: var(--accent);
    text-decoration: none;
}

.back-button:active { transform: translateY(1px); }

.back-button svg {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
}

.text-tools {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Small ghost pill buttons (clear / paste / remove image / dismiss) */
.text-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.8rem;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.text-tool-btn svg {
    width: 0.95rem;
    height: 0.95rem;
    flex-shrink: 0;
}

.text-tool-btn:hover,
.text-tool-btn:focus-visible {
    color: var(--accent);
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* The voice button is revealed by JS only where speech recognition works;
   the author display:inline-flex above would otherwise beat the hidden attr. */
.text-tool-btn[hidden] { display: none; }

/* Recording state for the voice (mic) button — red, gently pulsing. */
.text-tool-btn.is-listening,
.text-tool-btn.is-listening:hover {
    color: #f85149;
    border-color: color-mix(in srgb, #f85149 55%, transparent);
    background: color-mix(in srgb, #f85149 12%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
    .text-tool-btn.is-listening { animation: pulse-rec 1.4s ease-in-out infinite; }
}

@keyframes pulse-rec {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.toast {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1100;
    max-width: min(24rem, calc(100vw - 2rem));
    padding: 0.75rem 0.9rem;
    color: var(--fg);
    background: color-mix(in srgb, var(--surface) 94%, var(--bg));
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow);
    font-size: 0.9rem;
    line-height: 1.4;
}

.toast[hidden] { display: none; }

.toast.success { border-color: rgba(63, 185, 80, 0.7); }
.toast.error { border-color: rgba(248, 81, 73, 0.75); }
.toast.notice { border-color: var(--accent); }

.action-toast {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.toast-form {
    display: block;
    margin: 0;
}

.toast-action {
    padding: 0;
    color: var(--accent);
    background: transparent;
    border: none;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.toast-action:hover,
.toast-action:focus-visible {
    color: var(--fg);
}

/* Loading overlay shown while a check is being analyzed */
.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.loading-overlay.show { display: flex; }

.spinner {
    width: 54px;
    height: 54px;
    border: 4px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.loading-text {
    margin: 0;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--fg);
}

@media (prefers-reduced-motion: reduce) {
    .spinner { animation-duration: 2s; }
}

.char-count {
    font-size: 0.85rem;
    color: var(--muted);
}

.char-count.over {
    color: #f85149;
    font-weight: 600;
}

/* ── Offline banner ────────────────────────────────────────────────────── */
.offline-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--fg);
    background: rgba(210, 153, 34, 0.16);
    border-bottom: 1px solid rgba(210, 153, 34, 0.5);
    text-align: center;
}

.offline-banner[hidden] {
    display: none;
}

.offline-icon {
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
    color: #d29922;
}

/* ── Alerts / notices ──────────────────────────────────────────────────── */
.alert {
    margin-top: 1.5rem;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    background: rgba(248, 81, 73, 0.12);
    border: 1px solid rgba(248, 81, 73, 0.5);
    color: var(--fg);
}

.notice {
    margin-bottom: 1.2rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: rgba(63, 185, 80, 0.14);
    border: 1px solid rgba(63, 185, 80, 0.5);
    color: var(--fg);
}

/* ── Scam-check result card ────────────────────────────────────────────── */
.result {
    margin-top: 1.5rem;
    padding: 1.4rem 1.5rem;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--fg) 3%, transparent), transparent 120px),
        var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 14px;
    box-shadow: var(--shadow);
}

.result .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    font-size: 1.05rem;        /* larger, easier to read */
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.badge-icon {
    width: 1.3em;
    height: 1.3em;
    flex-shrink: 0;
}

.result.level-1 { border-left-color: #3fb950; }
.result.level-1 .badge { background: #3fb950; }

.result.level-2 { border-left-color: #d29922; }
.result.level-2 .badge { background: #d29922; }

.result.level-3 { border-left-color: #f85149; }
.result.level-3 .badge { background: #f85149; }

.result .analysis {
    margin: 0.85rem 0 0;
    font-size: 1.05rem;
}

.result h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.4rem 0 0.6rem;
    font-size: 1.1rem;          /* clearer section headings */
    font-weight: 700;
}

/* small accent tick before each result section heading */
.result h3::before {
    content: "";
    width: 0.28rem;
    height: 1.1em;
    border-radius: 999px;
    background: linear-gradient(var(--accent), var(--accent-2));
    flex-shrink: 0;
}

.result ul.signals,
.result ul.actions {
    margin: 0;
    padding-left: 1.3rem;
    color: var(--fg);
    font-size: 1.05rem;         /* larger list text for readability */
    line-height: 1.65;
}

.result ul.signals li,
.result ul.actions li {
    margin: 0.5rem 0;
}

.result .snippet {
    margin-top: 0.25rem;
    font-size: 0.98rem;
    font-style: italic;
    color: var(--muted);
}

/* "Cô tâm lý" — gentle, reassuring note about the manipulation tactic */
.psych-note {
    margin: 0 0 1.4rem;
    padding: 1.1rem 1.3rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
    border-left: 4px solid var(--accent);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--accent) 14%, transparent),
            color-mix(in srgb, var(--accent-2) 12%, transparent));
    box-shadow: var(--shadow);
}

.psych-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.55rem;
    color: var(--accent);
    font-size: 1.15rem;
    font-weight: 700;
}

.psych-icon {
    width: 1.3em;
    height: 1.3em;
    flex-shrink: 0;
    color: var(--accent-2);
}

.psych-note p {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.75;
    color: var(--fg);
}

/* ── "Người ứng cứu" (first responder) ─────────────────────────────────── */
/* The "have you already acted?" question callout (amber, attention-getting) */
.rescue-ask {
    margin-top: 1.4rem;
    padding: 1.1rem 1.3rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, #d29922 48%, transparent);
    background: color-mix(in srgb, #d29922 11%, transparent);
}

.rescue-ask[hidden] { display: none; }
.rescue-ask-heading { margin: 0 0 0.4rem; font-size: 1.15rem; }
.rescue-ask p { margin: 0 0 0.9rem; }

.rescue-ask-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.rescue-ask-form { display: block; margin: 0; }

/* Urgent call-to-action (overrides the generic blue gradient button) */
.rescue-yes {
    background: linear-gradient(135deg, #f85149, #d29922) !important;
    box-shadow: 0 4px 14px color-mix(in srgb, #f85149 35%, transparent) !important;
}

/* Praise shown when the user says they did NOT act on the scam (green/positive) */
.rescue-praise {
    margin-top: 1.4rem;
    padding: 1.1rem 1.3rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, #3fb950 45%, transparent);
    border-left: 4px solid #3fb950;
    background: color-mix(in srgb, #3fb950 11%, transparent);
    box-shadow: var(--shadow);
}

.rescue-praise[hidden] { display: none; }

.rescue-praise-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    color: #3fb950;
    font-size: 1.15rem;
    font-weight: 700;
}

.rescue-praise-icon { width: 1.3em; height: 1.3em; flex-shrink: 0; }

.rescue-praise p {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.75;
    color: var(--fg);
}

/* The generated guidance (red-accented — this is the emergency path) */
.rescue {
    margin-top: 1.4rem;
    padding: 1.3rem 1.5rem;
    border-radius: 14px;
    border: 1px solid var(--border);
    border-left: 4px solid #f85149;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.rescue-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.6rem;
    font-size: 1.25rem;
    color: #f85149;
}

.rescue-icon { width: 1.4rem; height: 1.4rem; flex-shrink: 0; }

.rescue-steps {
    margin: 0.4rem 0 0;
    padding-left: 1.5rem;
    line-height: 1.6;
}

.rescue-steps > li {
    margin: 0.9rem 0;
    padding-left: 0.3rem;
}

.rescue-action { font-weight: 600; }

/* Phone number in the step header — emphasized and tap-to-call (tel:). */
.rescue-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.9rem;
    border-radius: 10px;
    background: color-mix(in srgb, #f85149 14%, transparent);
    border: 1px solid color-mix(in srgb, #f85149 50%, transparent);
    color: var(--fg);
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.rescue-phone:hover,
.rescue-phone:focus-visible {
    background: color-mix(in srgb, #f85149 22%, transparent);
    border-color: #f85149;
}

.rescue-phone svg {
    width: 1.15rem;
    height: 1.15rem;
    color: #f85149;
    flex-shrink: 0;
}

.rescue-phone-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
}

.rescue-phone-number {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

/* Sample line to read aloud on the call */
.rescue-say {
    margin-top: 0.4rem;
    padding: 0.55rem 0.8rem;
    border-left: 3px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 9%, transparent);
    border-radius: 0 8px 8px 0;
}

.rescue-say-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
    margin-bottom: 0.1rem;
}

.rescue-say-text { font-style: italic; }

/* ── Result page ───────────────────────────────────────────────────────── */
/* Badge + analysis-time row at the top of the result card */
.result-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
}

.result-time {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--muted);
}

.result-time-icon {
    width: 1rem;
    height: 1rem;
}

/* Flagged/dangerous snippets highlighted inside the analyzed content */
mark.flag {
    background: rgba(248, 81, 73, 0.28);
    color: var(--fg);
    padding: 0.05em 0.22em;
    border-radius: 3px;
    font-weight: 600;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Label above the analyzed text on the dedicated result page */
.checked-label {
    margin: 1rem 0 0;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.result-actions {
    margin-top: 1.5rem;
}

/* ── Subtle entrance animations (only when motion is welcome) ──────────── */
@media (prefers-reduced-motion: no-preference) {
    @keyframes fade-up {
        from { opacity: 0; transform: translateY(10px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes badge-pop {
        from { opacity: 0; transform: scale(0.92); }
        to   { opacity: 1; transform: scale(1); }
    }

    /* Psych note comes in first, then the result card just after it */
    .psych-note { animation: fade-up 0.4s ease both; }
    .result     { animation: fade-up 0.42s ease 0.08s both; }

    /* Gentle pop on the verdict badge */
    .result .badge { animation: badge-pop 0.4s ease 0.18s both; }

    /* Staggered reveal for history rows */
    .hist-row { animation: fade-up 0.34s ease both; }
    .hist-row:nth-child(1) { animation-delay: 0.03s; }
    .hist-row:nth-child(2) { animation-delay: 0.07s; }
    .hist-row:nth-child(3) { animation-delay: 0.11s; }
    .hist-row:nth-child(4) { animation-delay: 0.15s; }
    .hist-row:nth-child(5) { animation-delay: 0.19s; }
    .hist-row:nth-child(6) { animation-delay: 0.23s; }
    .hist-row:nth-child(7) { animation-delay: 0.27s; }
    .hist-row:nth-child(8) { animation-delay: 0.31s; }
    .hist-row:nth-child(9) { animation-delay: 0.35s; }
    .hist-row:nth-child(10) { animation-delay: 0.39s; }

    /* Toasts slide in */
    .toast { animation: fade-up 0.3s ease both; }
}

/* ── Settings page ─────────────────────────────────────────────────────── */
.settings-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    align-items: stretch;
    max-width: 420px;
}

.settings-form label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-weight: 600;
}

.settings-form select {
    padding: 0.55rem 0.6rem;
    font: inherit;
    color: var(--fg);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.settings-form button {
    align-self: flex-start;
}

h2 { margin-top: 2.2rem; }

/* ── History table ─────────────────────────────────────────────────────── */
/* Compact overview; each row links to its result page (/result/{public_id}).
   Only verdict / message preview / time are shown — details on the result page. */
.hist-table-wrap {
    margin-top: 1rem;
    overflow-x: auto;            /* let the table scroll rather than break layout on narrow screens */
}

.hist-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;         /* so the message column can truncate predictably */
}

.hist-table thead th {
    text-align: left;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
    padding: 0.4rem 0.8rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

/* column widths: verdict / message (flex) / signals / arrow */
.hist-table th:nth-child(1) { width: 8.5rem; }
.hist-table th:nth-child(3) { width: 6rem; }
.hist-table th:nth-child(4) { width: 2.5rem; }

.hist-row {
    border-bottom: 1px solid var(--border);
    border-left: 3px solid transparent;
    transition: background 0.12s ease;
}

.hist-row.level-1 { border-left-color: #3fb950; }
.hist-row.level-2 { border-left-color: #d29922; }
.hist-row.level-3 { border-left-color: #f85149; }

.hist-row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* Compact colored pill for the table (the .result .badge rules are scoped to
   the result card, so the badge needs its own styling here). */
.hist-verdict .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.hist-verdict .badge-icon { width: 1.05em; height: 1.05em; }

.hist-row.level-1 .badge { background: #3fb950; }
.hist-row.level-2 .badge { background: #d29922; }
.hist-row.level-3 .badge { background: #f85149; }

.hist-table td {
    padding: 0.65rem 0.8rem;
    vertical-align: middle;
}

.hist-msg {
    max-width: 0;                /* with table-layout:fixed, forces the cell to truncate */
}

.hist-link {
    display: block;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hist-link:hover {
    color: var(--accent);
    text-decoration: none;
}

.hist-signals {
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    white-space: nowrap;
}

.hist-arrow { text-align: right; }

/* Checked-content block on the result page (verbatim message + <mark> flags) */
.hist-message {
    margin: 0.7rem 0 0;
    font-size: 1.05rem;
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
}

.hist-view-icon {
    width: 1rem;
    height: 1rem;
    color: var(--muted);
    transition: transform 0.15s ease, color 0.15s ease;
}

.hist-row:hover .hist-view-icon {
    transform: translateX(3px);
    color: var(--accent);
}

/* History pagination (prev / page X of Y / next) */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.page-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--fg);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

a.page-btn:hover,
a.page-btn:focus-visible {
    color: var(--accent);
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.page-btn.is-disabled {
    opacity: 0.45;
    color: var(--muted);
    pointer-events: none;
}

.page-status {
    color: var(--muted);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

/* ── Stats page ────────────────────────────────────────────────────────── */
.stats-card {
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.stats-total {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.stats-total-num {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.stats-total-label { color: var(--muted); }

.stats-flagged {
    margin: 0 0 1.2rem;
    font-size: 1.05rem;
    color: var(--fg);
}

/* Proportional stacked bar (segment flex-grow set inline = count) */
.stats-bar {
    display: flex;
    width: 100%;
    height: 0.9rem;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--fg) 8%, transparent);
}

.stats-seg { display: block; height: 100%; }
.stats-seg.level-1 { background: #3fb950; }
.stats-seg.level-2 { background: #d29922; }
.stats-seg.level-3 { background: #f85149; }

.stats-legend {
    list-style: none;
    margin: 1.1rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.5rem;
}

.stats-legend li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.stats-dot {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.stats-dot.level-1 { background: #3fb950; }
.stats-dot.level-2 { background: #d29922; }
.stats-dot.level-3 { background: #f85149; }

.stats-legend-label { color: var(--muted); }
.stats-legend-val { font-weight: 800; font-variant-numeric: tabular-nums; }

/* Share / print row (result + stats pages) */
.report-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.4rem;
}

/* ── Print / Save-as-PDF layout ────────────────────────────────────────────
   Triggered by the "In / Lưu PDF" button (window.print). Forces a light,
   ink-friendly palette regardless of theme and hides all the chrome. */
@media print {
    html {
        --bg: #fff;
        --fg: #111;
        --muted: #444;
        --surface: #fff;
        --border: #bbb;
        --glow: transparent;
        --shadow: none;
        --accent: #1a4fd0;
        --accent-2: #6b2fd0;
    }

    body { background: #fff; }

    /* Drop everything interactive / navigational from the printout */
    nav, footer, .offline-banner, .sidebar, .nav-backdrop,
    .report-actions, .result-actions, .info-popover,
    .rescue-ask, #rescue-praise, .pagination, .clear-form {
        display: none !important;
    }

    main { max-width: 100%; margin: 0; padding: 0; }

    .result, .psych-note, .rescue, .stats-card {
        box-shadow: none;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Keep meaningful colors (red = danger, the level bar, hotline) on paper */
    .badge, .stats-seg, .stats-dot, .rescue-phone, mark.flag,
    .result, .psych-note, .rescue {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

.clear-form {
    display: block;
    margin: 0;
}

#clear-history {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
    box-shadow: none;
}

#clear-history:hover {
    background: transparent;
    color: var(--fg);
    border-color: var(--accent);
    box-shadow: none;
    filter: none;
}

@media (max-width: 560px) {
    .home-header,
    .page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .info-button {
        white-space: normal;
        text-align: left;
    }

    .info-panel {
        right: auto;
        left: 0;
        width: min(21rem, calc(100vw - 4rem));
    }

    .info-panel::before {
        right: auto;
        left: 1rem;
    }
}

table.specs {
    margin-top: 0.6rem;
    border-collapse: collapse;
    width: 100%;
    max-width: 420px;
}

table.specs td {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--border);
}

table.specs td:first-child {
    color: var(--muted);
    width: 45%;
}

/* ── Homepage hero header ──────────────────────────────────────────────── */
/* Full-bleed: break out of main's 760px column to span the whole viewport,
   and fill the screen height so it's the first thing seen on load. */
.hero {
    margin-top: -2rem;                 /* cancel main's top padding */
    margin-left: calc(50% - 50vw);     /* exact full-bleed even with padding */
    margin-right: calc(50% - 50vw);
    margin-bottom: 2rem;
    /* Compact band — not full-height, so the input box shows without scrolling */
    padding: clamp(1.75rem, 5vh, 2.75rem) clamp(1.5rem, 6vw, 4rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-bottom: 1px solid var(--border);
    background:
        radial-gradient(800px circle at 50% 30%, var(--glow), transparent 60%),
        radial-gradient(600px circle at 85% 80%,
            color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 55%),
        color-mix(in srgb, var(--surface) 35%, transparent);
}

/* Keep the copy in a readable centered column inside the wide section */
.hero > * {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.hero .eyebrow {
    margin: 0 0 1.25rem;
    display: inline-block;
    padding: 0.3rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hero h1 {
    margin: 0;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(2.2rem, 5.5vw, 3.4rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.015em;
    background: linear-gradient(120deg, var(--fg) 35%, var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ── Footer ────────────────────────────────────────────────────────────── */
footer {
    max-width: 760px;
    margin: 3rem auto 0;
    padding: 1.2rem 2rem 2rem;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.5;
    text-align: center;
}

/* ════════════════════════════════════════════════════════════════════════
   Special homepage "Check" button — sparkle button (Uiverse.io by JkHuger).
   The original ships with JS that randomises the particle positions and a few
   container vars; since we don't load that JS, the vars (--transition/--spark/
   --cut) are set here and the particles are scattered via :nth-of-type below.
   ════════════════════════════════════════════════════════════════════════ */
.sp {
    --transition: 0.25s;
    --spark: 1.8s;
    --cut: 0.08em;
    position: relative;
    display: inline-block;
}

.sparkle-button {
  --active: 0;
  --bg: radial-gradient(
            40% 50% at center 100%,
            hsl(246 calc(var(--active) * 97%) 72% / var(--active)),
            transparent
        ),
        radial-gradient(
            80% 100% at center 120%,
            hsl(234 calc(var(--active) * 97%) 70% / var(--active)),
            transparent
        ),
        hsl(234 calc(var(--active) * 97%) calc((var(--active) * 44%) + 12%));
  background: var(--bg);
  font-family: inherit;
  font-size: 1.2rem;
  font-weight: 500;
  border: 0;
  cursor: pointer;
  padding: 0.55em 1.1em;
  display: flex;
  align-items: center;
  gap: 0.25em;
  white-space: nowrap;
  border-radius: 100px;
  position: relative;
  box-shadow: 0 0 calc(var(--active) * 3em) calc(var(--active) * 1em) hsl(234 97% 61% / 0.75),
        0 0em 0 0 hsl(234 calc(var(--active) * 97%) calc((var(--active) * 50%) + 30%)) inset,
        0 -0.05em 0 0 hsl(234 calc(var(--active) * 97%) calc(var(--active) * 60%)) inset;
  transition: box-shadow var(--transition), scale var(--transition), background var(--transition);
  scale: calc(1 + (var(--active) * 0.1));
  transition: .3s;
}

.sparkle-button:active {
  scale: 1;
  transition: .3s;
}

.sparkle path {
  color: hsl(0 0% calc((var(--active, 0) * 70%) + var(--base)));
  transform-box: fill-box;
  transform-origin: center;
  fill: currentColor;
  stroke: currentColor;
  animation-delay: calc((var(--transition) * 1.5) + (var(--delay) * 1s));
  animation-duration: 0.6s;
  transition: color var(--transition);
}

.sparkle-button:is(:hover, :focus-visible) path {
  animation-name: bounce;
}

@keyframes bounce {
  35%, 65% {
    scale: var(--scale);
  }
}

.sparkle path:nth-of-type(1) {
  --scale: 0.5;
  --delay: 0.1;
  --base: 40%;
}

.sparkle path:nth-of-type(2) {
  --scale: 1.5;
  --delay: 0.2;
  --base: 20%;
}

.sparkle path:nth-of-type(3) {
  --scale: 2.5;
  --delay: 0.35;
  --base: 30%;
}

.sparkle-button:before {
  content: "";
  position: absolute;
  inset: -0.2em;
  z-index: -1;
  border: 0.25em solid hsl(234 97% 50% / 0.5);
  border-radius: 100px;
  opacity: var(--active, 0);
  transition: opacity var(--transition);
}

.spark {
  position: absolute;
  inset: 0;
  border-radius: 100px;
  rotate: 0deg;
  overflow: hidden;
  mask: linear-gradient(white, transparent 50%);
  animation: flip calc(var(--spark) * 2) infinite steps(2, end);
}

@keyframes flip {
  to {
    rotate: 360deg;
  }
}

.spark:before {
  content: "";
  position: absolute;
  width: 200%;
  aspect-ratio: 1;
  top: 0%;
  left: 50%;
  z-index: -1;
  translate: -50% -15%;
  rotate: 0;
  transform: rotate(-90deg);
  opacity: calc((var(--active)) + 0.4);
  background: conic-gradient(
        from 0deg,
        transparent 0 340deg,
        white 360deg
    );
  transition: opacity var(--transition);
  animation: rotate var(--spark) linear infinite both;
}

.spark:after {
  content: "";
  position: absolute;
  inset: var(--cut);
  border-radius: 100px;
}

.backdrop {
  position: absolute;
  inset: var(--cut);
  background: var(--bg);
  border-radius: 100px;
  transition: background var(--transition);
}

@keyframes rotate {
  to {
    transform: rotate(90deg);
  }
}

@supports(selector(:has(:is(+ *)))) {
  body:has(.sparkle-button:not(.is-empty):is(:hover, :focus-visible)) {
    --active: 1;
    --play-state: running;
  }

  .bodydrop {
    display: none;
  }
}

.sparkle-button:not(.is-empty):is(:hover, :focus-visible) ~ :is(.bodydrop, .particle-pen) {
  --active: 1;
  --play-state: running;
}

.sparkle-button:not(.is-empty):is(:hover, :focus-visible) {
  --active: 1;
  --play-state: running;
}

.sparkle-button.is-empty,
.sparkle-button.is-empty:is(:hover, :focus-visible),
.sparkle-button.is-empty ~ :is(.bodydrop, .particle-pen) {
  --active: 0;
  --play-state: paused;
}

.sparkle-button.is-empty {
  cursor: default;
  filter: grayscale(1);
  opacity: 0.62;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--border) 90%, var(--fg) 10%);
  scale: 1;
}

.sparkle-button.is-empty:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--surface) 82%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--border) 90%, var(--fg) 10%);
}

.sparkle-button.is-empty .backdrop {
  background: color-mix(in srgb, var(--surface) 82%, var(--border));
}

.sparkle-button.is-empty .spark,
.sparkle-button.is-empty .particle-pen {
  display: none;
}

.particle-pen {
  position: absolute;
  width: 200%;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  -webkit-mask: radial-gradient(white, transparent 65%);
  mask: radial-gradient(white, transparent 65%);
  z-index: -1;
  opacity: var(--active, 0);
  transition: opacity var(--transition);
}

.particle {
  fill: white;
  width: calc(var(--size, 0.25) * 1rem);
  aspect-ratio: 1;
  position: absolute;
  top: calc(var(--y) * 1%);
  left: calc(var(--x) * 1%);
  opacity: var(--alpha, 1);
  animation: float-out calc(var(--duration, 1) * 1s) calc(var(--delay) * -1s) infinite linear;
  transform-origin: var(--origin-x, 1000%) var(--origin-y, 1000%);
  z-index: -1;
  animation-play-state: var(--play-state, paused);
}

.particle path {
  fill: hsl(0 0% 90%);
  stroke: none;
}

.particle:nth-of-type(even) {
  animation-direction: reverse;
}

@keyframes float-out {
  to {
    rotate: 360deg;
  }
}

/* Scatter the particles (the original randomises these via JS) */
.particle:nth-of-type(1)  { --x: 5;  --y: 20; --size: 0.4;  --delay: 0.2; --duration: 2.2; }
.particle:nth-of-type(2)  { --x: 18; --y: 72; --size: 0.25; --delay: 1.1; --duration: 1.8; }
.particle:nth-of-type(3)  { --x: 30; --y: 10; --size: 0.5;  --delay: 0.6; --duration: 2.6; }
.particle:nth-of-type(4)  { --x: 42; --y: 86; --size: 0.3;  --delay: 1.4; --duration: 2.0; }
.particle:nth-of-type(5)  { --x: 55; --y: 30; --size: 0.45; --delay: 0.3; --duration: 2.4; }
.particle:nth-of-type(6)  { --x: 68; --y: 76; --size: 0.25; --delay: 0.9; --duration: 1.7; }
.particle:nth-of-type(7)  { --x: 80; --y: 18; --size: 0.5;  --delay: 1.6; --duration: 2.8; }
.particle:nth-of-type(8)  { --x: 92; --y: 60; --size: 0.3;  --delay: 0.5; --duration: 2.1; }
.particle:nth-of-type(9)  { --x: 10; --y: 50; --size: 0.35; --delay: 1.2; --duration: 2.3; }
.particle:nth-of-type(10) { --x: 25; --y: 90; --size: 0.25; --delay: 0.7; --duration: 1.9; }
.particle:nth-of-type(11) { --x: 38; --y: 40; --size: 0.5;  --delay: 1.5; --duration: 2.7; }
.particle:nth-of-type(12) { --x: 50; --y: 5;  --size: 0.3;  --delay: 0.4; --duration: 2.0; }
.particle:nth-of-type(13) { --x: 63; --y: 55; --size: 0.45; --delay: 1.0; --duration: 2.5; }
.particle:nth-of-type(14) { --x: 75; --y: 95; --size: 0.25; --delay: 0.8; --duration: 1.6; }
.particle:nth-of-type(15) { --x: 88; --y: 35; --size: 0.4;  --delay: 1.3; --duration: 2.2; }
.particle:nth-of-type(16) { --x: 15; --y: 82; --size: 0.3;  --delay: 0.6; --duration: 2.4; }
.particle:nth-of-type(17) { --x: 33; --y: 65; --size: 0.5;  --delay: 1.7; --duration: 2.9; }
.particle:nth-of-type(18) { --x: 48; --y: 22; --size: 0.25; --delay: 0.2; --duration: 1.8; }
.particle:nth-of-type(19) { --x: 70; --y: 45; --size: 0.4;  --delay: 1.1; --duration: 2.3; }
.particle:nth-of-type(20) { --x: 85; --y: 78; --size: 0.35; --delay: 0.9; --duration: 2.0; }

.text {
  translate: 2% -6%;
  letter-spacing: 0.01ch;
  background: linear-gradient(90deg, hsl(0 0% calc((var(--active) * 100%) + 65%)), hsl(0 0% calc((var(--active) * 100%) + 26%)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background var(--transition);
}

.sparkle-button svg {
  inline-size: 1.25em;
  translate: -25% -5%;
}

/* ── Light-theme variant ───────────────────────────────────────────────────
   At rest: a near-white pill with a lavender border + soft shadow (instead of
   the near-black base). On hover it still blooms into the purple gradient/glow,
   so the white shimmer + particles read fine. */
[data-theme="light"] .sparkle-button,
[data-theme="light"] .backdrop {
  --bg: radial-gradient(
            40% 50% at center 100%,
            hsl(246 calc(var(--active) * 97%) 72% / var(--active)),
            transparent
        ),
        radial-gradient(
            80% 100% at center 120%,
            hsl(234 calc(var(--active) * 97%) 70% / var(--active)),
            transparent
        ),
        hsl(234 calc(var(--active) * 60%) calc(96% - (var(--active) * 40%)));
}

[data-theme="light"] .sparkle-button {
  box-shadow:
        0 0 calc(var(--active) * 3em) calc(var(--active) * 1em) hsl(234 97% 61% / 0.5),
        0 0 0 1px hsl(234 35% 82% / calc(1 - var(--active))),
        0 2px 6px hsl(234 30% 55% / calc(0.25 * (1 - var(--active))));
}

/* Darker text at rest so it stays legible on the white pill */
[data-theme="light"] .text {
  background: linear-gradient(
        90deg,
        hsl(234 30% calc(45% - (var(--active) * 45%))),
        hsl(234 35% calc(25% - (var(--active) * 25%)))
    );
  -webkit-background-clip: text;
  background-clip: text;
}

@media (prefers-color-scheme: light) {
  [data-theme="auto"] .sparkle-button,
  [data-theme="auto"] .backdrop {
    --bg: radial-gradient(
            40% 50% at center 100%,
            hsl(246 calc(var(--active) * 97%) 72% / var(--active)),
            transparent
        ),
        radial-gradient(
            80% 100% at center 120%,
            hsl(234 calc(var(--active) * 97%) 70% / var(--active)),
            transparent
        ),
        hsl(234 calc(var(--active) * 60%) calc(96% - (var(--active) * 40%)));
  }

  [data-theme="auto"] .sparkle-button {
    box-shadow:
        0 0 calc(var(--active) * 3em) calc(var(--active) * 1em) hsl(234 97% 61% / 0.5),
        0 0 0 1px hsl(234 35% 82% / calc(1 - var(--active))),
        0 2px 6px hsl(234 30% 55% / calc(0.25 * (1 - var(--active))));
  }

  [data-theme="auto"] .text {
    background: linear-gradient(
        90deg,
        hsl(234 30% calc(45% - (var(--active) * 45%))),
        hsl(234 35% calc(25% - (var(--active) * 25%)))
    );
    -webkit-background-clip: text;
    background-clip: text;
  }
}

/* ── Mobile gutters ────────────────────────────────────────────────────────
   Placed at the end of the file on purpose: it must override the base `main`
   and `footer` rules (which appear earlier), so tighter phone gutters win. */
@media (max-width: 720px) {
    main { padding: 1.1rem 1.1rem 2rem; }
    footer { padding: 1.2rem 1.1rem 2rem; }
}