/* ==========================================================================
   Painel do Jogo — tema "HUD de engine"
   Tokens + componentes. Tudo em @layer components para que as utilitárias
   do Tailwind (camada utilities) continuem podendo sobrescrever (ex.: hidden).
   ========================================================================== */

@layer theme, base, components, utilities;

@property --spin {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

:root {
    color-scheme: dark;

    /* Fundo e superfícies (neutros levemente frios) */
    --bg: #070812;
    --bg-deep: #03040a;
    --surface: rgb(11 14 28 / 0.88);
    --surface-solid: #0b0e1c;
    --surface-2: #11152d;
    --surface-3: #181d3d;
    --field: rgb(5 7 16 / 0.85);
    --line: rgb(128 146 230 / 0.14);
    --line-strong: rgb(128 146 230 / 0.28);
    --grid-line: rgb(128 146 230 / 0.05);
    --grid-line-major: rgb(128 146 230 / 0.09);

    /* Texto */
    --ink: #e8ecff;
    --ink-2: #a6aed6;
    --ink-3: #7c86b4;
    --ink-inverse: #03121a;

    /* Neon */
    --cyan: #22e4ff;
    --cyan-hi: #8af2ff;
    --magenta: #ff3dc8;
    --violet: #8b5cff;
    --accent: var(--cyan);

    /* Semânticas */
    --success: #3dfca6;
    --warning: #ffc147;
    --danger: #ff5577;
    --danger-ink: #ffd3dc;
    --danger-surface: #1d0812;
    --success-ink: #c9ffe6;
    --info: var(--cyan);
    --spark: #ffffff;
    --legendary-hi: #fff3d6;

    /* Raridade (prioridade) */
    --rarity-common: #a6aed6;
    --rarity-rare: #4cb4ff;
    --rarity-legendary: #ffb03a;

    /* Tipografia */
    --font-display: "Chakra Petch", ui-sans-serif, system-ui, sans-serif;
    --font-code: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Forma e movimento */
    --radius-sm: 2px;
    --radius: 4px;
    --cut-sm: 6px;
    --cut: 10px;
    --dur: 180ms;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

html {
    background: var(--bg-deep);
}

body.app-body {
    min-height: 100dvh;
    font-family: var(--font-display);
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink);
    background:
        radial-gradient(1100px 600px at 12% -10%, rgb(139 92 255 / 0.14), transparent 60%),
        radial-gradient(900px 520px at 100% 0%, rgb(34 228 255 / 0.09), transparent 60%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

@layer components {

    /* ---------------------------------------------------------------- Fundo */

    .bg-grid,
    .bg-canvas,
    .bg-fx {
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
    }

    .bg-canvas {
        width: 100%;
        height: 100%;
        display: block;
    }

    /* Grid de editor de níveis: células de 48px, linhas maiores a cada 4 */
    .bg-grid {
        background-image:
            linear-gradient(var(--grid-line-major) 1px, transparent 1px),
            linear-gradient(90deg, var(--grid-line-major) 1px, transparent 1px),
            linear-gradient(var(--grid-line) 1px, transparent 1px),
            linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
        background-size: 192px 192px, 192px 192px, 48px 48px, 48px 48px;
        background-position: -1px -1px;
        mask-image: radial-gradient(ellipse 90% 65% at 50% 0%, #000 25%, transparent 75%);
    }

    /* Scanlines + vinheta, atrás do conteúdo (não afetam a leitura) */
    .bg-fx {
        background:
            repeating-linear-gradient(180deg, rgb(255 255 255 / 0.018) 0 1px, transparent 1px 3px),
            radial-gradient(ellipse at 50% 40%, transparent 55%, rgb(0 0 0 / 0.55) 100%);
    }

    .skip-link {
        position: fixed;
        top: 8px;
        left: 8px;
        z-index: 60;
        padding: 8px 16px;
        font: 600 14px/1.5 var(--font-display);
        color: var(--ink-inverse);
        background: var(--cyan);
        transform: translateY(-200%);
        transition: transform var(--dur) var(--ease);
    }

    .skip-link:focus {
        transform: none;
        outline: 2px solid var(--ink);
        outline-offset: 2px;
    }

    /* --------------------------------------------------------------- Ícones */

    .icon {
        width: 16px;
        height: 16px;
        flex: none;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.75;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .icon-lg {
        width: 20px;
        height: 20px;
    }

    .icon-xl {
        width: 24px;
        height: 24px;
    }

    /* --------------------------------------------------------------- Header */

    /* Fixo no topo só a partir de 768px (no mobile ocuparia espaço demais) */
    .app-header {
        position: relative;
        top: 0;
        z-index: 30;
        background: rgb(5 6 14 / 0.8);
        backdrop-filter: blur(12px) saturate(140%);
        border-bottom: 1px solid var(--line);
    }

    .app-header::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, var(--cyan) 30%, var(--magenta) 50%, transparent 70%);
        background-size: 200% 100%;
        opacity: 0.6;
        animation: header-scan 9s linear infinite;
    }

    .header-inner {
        max-width: 1536px;
        margin-inline: auto;
        padding-inline: 16px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 16px;
        min-height: 64px;
    }

    .brand {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 64px;
        color: var(--ink);
        text-decoration: none;
    }

    .brand:focus-visible {
        outline: 2px solid var(--cyan);
        outline-offset: 4px;
    }

    .brand-mark {
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        flex: none;
        color: var(--ink-inverse);
        background: var(--cyan);
        clip-path: polygon(var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm));
    }

    .brand-mark--lg {
        width: 64px;
        height: 64px;
        --cut-sm: 12px;
    }

    .brand-mark--danger {
        background: var(--danger);
    }

    .brand-name {
        display: block;
        font: 700 16px/1.1 var(--font-display);
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .brand-sub {
        display: block;
        font: 500 12px/1.3 var(--font-code);
        color: var(--ink-3);
    }

    .main-nav {
        order: 3;
        width: calc(100% + 32px);
        display: flex;
        margin-inline: -16px;
        padding-inline: 8px;
        border-top: 1px solid var(--line);
    }

    .nav-link {
        position: relative;
        flex: 1 1 auto;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-width: 0;
        min-height: 52px;
        padding-inline: 4px;
        font: 600 12px/1 var(--font-display);
        letter-spacing: 0.02em;
        text-transform: uppercase;
        white-space: nowrap;
        color: var(--ink-2);
        text-decoration: none;
        transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
    }

    .nav-link:hover {
        color: var(--ink);
        background: rgb(34 228 255 / 0.05);
    }

    .nav-link:focus-visible {
        outline: 2px solid var(--cyan);
        outline-offset: -4px;
    }

    .nav-link::after {
        content: "";
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 0;
        height: 2px;
        background: var(--cyan);
        box-shadow: 0 0 12px var(--cyan);
        transform: scaleX(0);
        transition: transform var(--dur) var(--ease);
    }

    .nav-link[aria-current="page"] {
        color: var(--cyan);
    }

    .nav-link[aria-current="page"]::after {
        transform: scaleX(1);
    }

    .header-user {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .user-chip {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 40px;
        padding: 4px 8px 4px 4px;
        font-size: 14px;
        font-weight: 500;
        color: var(--ink-2);
        text-decoration: none;
        border: 1px solid transparent;
        border-radius: var(--radius-sm);
        transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
    }

    .user-chip:hover,
    .user-chip[aria-current="page"] {
        color: var(--ink);
        border-color: var(--line-strong);
        background: rgb(34 228 255 / 0.05);
    }

    .user-chip:focus-visible {
        outline: 2px solid var(--cyan);
        outline-offset: 2px;
    }

    /* Tablet: nav continua na segunda linha, mas com ícone ao lado do texto */
    @media (min-width: 640px) {
        .nav-link {
            flex-direction: row;
            gap: 8px;
            min-height: 48px;
            padding-inline: 12px;
            font-size: 14px;
            letter-spacing: 0.06em;
        }
    }

    /* Desktop: nav entra na linha do logo e o header fica fixo */
    @media (min-width: 1024px) {
        .app-header {
            position: sticky;
        }

        .header-inner {
            padding-inline: 24px;
            column-gap: 24px;
        }

        .main-nav {
            order: 0;
            width: auto;
            margin-inline: 0;
            padding-inline: 0;
            border-top: 0;
            align-self: stretch;
        }

        .nav-link {
            flex: none;
            min-height: 64px;
        }
    }

    /* ----------------------------------------------------------------- Main */

    .app-main {
        position: relative;
        z-index: 1;
        max-width: 1536px;
        margin-inline: auto;
        padding: 24px 16px 64px;
    }

    .app-main:focus {
        outline: none;
    }

    @media (min-width: 768px) {
        .app-main {
            padding: 32px 24px 80px;
        }
    }

    /* ------------------------------------------------------ Cabeçalho de página */

    .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font: 500 12px/1 var(--font-code);
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--cyan);
    }

    .eyebrow::before {
        content: "";
        width: 6px;
        height: 6px;
        background: currentColor;
        box-shadow: 0 0 8px currentColor;
    }

    .eyebrow--danger {
        color: var(--danger);
    }

    .page-title {
        margin-top: 8px;
        font: 700 24px/1.15 var(--font-display);
        letter-spacing: 0.01em;
        color: var(--ink);
    }

    .page-sub {
        margin-top: 4px;
        max-width: 65ch;
        font-size: 14px;
        color: var(--ink-2);
    }

    @media (min-width: 640px) {
        .page-title {
            font-size: 32px;
        }
    }

    .back-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font: 500 12px/1 var(--font-code);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink-3);
        text-decoration: none;
        padding-block: 4px;
        transition: color var(--dur) var(--ease);
    }

    .back-link:hover {
        color: var(--cyan);
    }

    .back-link:focus-visible {
        outline: 2px solid var(--cyan);
        outline-offset: 4px;
    }

    .section-title {
        display: flex;
        align-items: baseline;
        gap: 12px;
        font: 600 20px/1.2 var(--font-display);
        color: var(--ink);
    }

    .section-index {
        font: 500 12px/1 var(--font-code);
        letter-spacing: 0.1em;
        color: var(--ink-3);
    }

    /* ---------------------------------------------------------------- Painel */

    .panel {
        --bracket: rgb(34 228 255 / 0.6);
        --bracket-size: 14px;
        position: relative;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius);
    }

    /* Brackets de HUD nos quatro cantos */
    .panel::before {
        content: "";
        position: absolute;
        inset: -1px;
        pointer-events: none;
        border-radius: inherit;
        background:
            linear-gradient(var(--bracket), var(--bracket)) left top / var(--bracket-size) 2px no-repeat,
            linear-gradient(var(--bracket), var(--bracket)) left top / 2px var(--bracket-size) no-repeat,
            linear-gradient(var(--bracket), var(--bracket)) right top / var(--bracket-size) 2px no-repeat,
            linear-gradient(var(--bracket), var(--bracket)) right top / 2px var(--bracket-size) no-repeat,
            linear-gradient(var(--bracket), var(--bracket)) left bottom / var(--bracket-size) 2px no-repeat,
            linear-gradient(var(--bracket), var(--bracket)) left bottom / 2px var(--bracket-size) no-repeat,
            linear-gradient(var(--bracket), var(--bracket)) right bottom / var(--bracket-size) 2px no-repeat,
            linear-gradient(var(--bracket), var(--bracket)) right bottom / 2px var(--bracket-size) no-repeat;
    }

    .panel--danger {
        --bracket: rgb(255 85 119 / 0.7);
    }

    .panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 16px;
        border-bottom: 1px solid var(--line);
        font: 500 12px/1 var(--font-code);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--ink-3);
    }

    /* --------------------------------------------------------------- Botões */

    .btn {
        --cut: var(--cut-sm);
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 40px;
        padding: 0 16px;
        font: 600 14px/1 var(--font-display);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        white-space: nowrap;
        text-decoration: none;
        color: var(--ink-2);
        background: transparent;
        border: 1px solid transparent;
        border-radius: 0;
        cursor: pointer;
        user-select: none;
        overflow: hidden;
        clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
        transition:
            color var(--dur) var(--ease),
            background-color var(--dur) var(--ease),
            border-color var(--dur) var(--ease);
    }

    .btn:focus-visible {
        outline: 2px solid var(--ink);
        outline-offset: -5px;
    }

    .btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .btn-sm {
        min-height: 32px;
        padding: 0 12px;
        font-size: 12px;
    }

    .btn-icon {
        width: 40px;
        padding: 0;
    }

    .btn-icon.btn-sm {
        width: 32px;
    }

    /* Primário: ciano sólido + faísca girando na borda + reflexo no hover */
    .btn-primary {
        color: var(--ink-inverse);
        border: 2px solid transparent;
        background:
            linear-gradient(var(--cyan), var(--cyan)) padding-box,
            conic-gradient(from var(--spin), var(--cyan) 0 62%, var(--spark) 74%, var(--magenta) 82%, var(--cyan) 92%) border-box;
        animation: btn-spin 5s linear infinite;
    }

    .btn-primary::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / 0.55) 50%, transparent 65%);
        transform: translateX(-120%);
        transition: transform 600ms var(--ease);
        pointer-events: none;
    }

    .btn-primary:hover {
        background:
            linear-gradient(var(--cyan-hi), var(--cyan-hi)) padding-box,
            conic-gradient(from var(--spin), var(--cyan-hi) 0 62%, var(--spark) 74%, var(--magenta) 82%, var(--cyan-hi) 92%) border-box;
    }

    .btn-primary:hover::after {
        transform: translateX(120%);
    }

    .btn-primary:focus-visible {
        outline-color: var(--ink-inverse);
    }

    .btn-ghost {
        color: var(--ink-2);
        border-color: transparent;
    }

    .btn-ghost:hover {
        color: var(--ink);
        background: rgb(34 228 255 / 0.07);
        border-color: var(--line-strong);
    }

    .btn-outline {
        color: var(--cyan);
        border-color: rgb(34 228 255 / 0.4);
        background: rgb(34 228 255 / 0.04);
    }

    .btn-outline:hover {
        color: var(--cyan-hi);
        border-color: var(--cyan);
        background: rgb(34 228 255 / 0.1);
    }

    .btn-danger {
        color: var(--danger);
        background: rgb(255 85 119 / 0.08);
        border-color: rgb(255 85 119 / 0.35);
    }

    .btn-danger:hover {
        color: var(--danger-ink);
        background: rgb(255 85 119 / 0.2);
        border-color: var(--danger);
    }

    /* ------------------------------------------------------------ Formulário */

    .label {
        display: block;
        margin-bottom: 8px;
        font: 500 12px/1.2 var(--font-code);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink-2);
    }

    .input {
        display: block;
        width: 100%;
        min-height: 40px;
        padding: 8px 12px;
        font: 400 14px/1.5 var(--font-display);
        color: var(--ink);
        background-color: var(--field);
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-sm);
        transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    }

    .input::placeholder {
        color: var(--ink-3);
    }

    .input:hover {
        border-color: rgb(34 228 255 / 0.4);
    }

    .input:focus {
        outline: none;
        border-color: var(--cyan);
        box-shadow: 0 0 0 3px rgb(34 228 255 / 0.18), 0 0 20px -6px rgb(34 228 255 / 0.7);
    }

    select.input {
        appearance: none;
        padding-right: 36px;
        cursor: pointer;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a6aed6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 16px;
    }

    select.input option {
        color: var(--ink);
        background: var(--surface-solid);
    }

    textarea.input {
        resize: vertical;
        min-height: 112px;
    }

    input[type="date"].input {
        color-scheme: dark;
    }

    .input-icon {
        position: relative;
    }

    .input-icon > .icon {
        position: absolute;
        left: 12px;
        top: 50%;
        translate: 0 -50%;
        color: var(--ink-3);
        pointer-events: none;
    }

    .input-icon > .input {
        padding-left: 36px;
    }

    .field-error {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 8px;
        font: 500 12px/1.4 var(--font-display);
        color: var(--danger);
    }

    .field-error::before {
        content: "";
        width: 6px;
        height: 6px;
        flex: none;
        background: currentColor;
        transform: rotate(45deg);
    }

    .hint {
        font-size: 12px;
        color: var(--ink-3);
    }

    .fieldset {
        padding: 16px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: rgb(5 7 16 / 0.4);
    }

    .fieldset > legend {
        padding-inline: 8px;
        font: 600 14px/1 var(--font-display);
        color: var(--ink);
    }

    /* Checkbox e radio customizados */
    .check,
    .radio {
        appearance: none;
        display: inline-grid;
        place-content: center;
        width: 18px;
        height: 18px;
        flex: none;
        margin: 0;
        background: var(--field);
        border: 1px solid var(--line-strong);
        cursor: pointer;
        transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
    }

    .check {
        border-radius: var(--radius-sm);
    }

    .radio {
        border-radius: 50%;
    }

    .check::after {
        content: "";
        width: 10px;
        height: 6px;
        border-left: 2px solid var(--ink-inverse);
        border-bottom: 2px solid var(--ink-inverse);
        transform: translateY(-1px) rotate(-45deg) scale(0);
        transition: transform var(--dur) var(--ease);
    }

    .radio::after {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--cyan);
        box-shadow: 0 0 8px var(--cyan);
        transform: scale(0);
        transition: transform var(--dur) var(--ease);
    }

    .check:checked {
        background: var(--cyan);
        border-color: var(--cyan);
    }

    .check:checked::after {
        transform: translateY(-1px) rotate(-45deg) scale(1);
    }

    .radio:checked {
        border-color: var(--cyan);
    }

    .radio:checked::after {
        transform: scale(1);
    }

    .check:hover,
    .radio:hover {
        border-color: var(--cyan);
    }

    .check:focus-visible,
    .radio:focus-visible {
        outline: 2px solid var(--cyan);
        outline-offset: 2px;
    }

    .check:disabled,
    .radio:disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }

    /* Switch (checkbox estilizado) */
    .switch {
        appearance: none;
        position: relative;
        width: 40px;
        height: 22px;
        flex: none;
        margin: 0;
        background: var(--field);
        border: 1px solid var(--line-strong);
        border-radius: 999px;
        cursor: pointer;
        transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
    }

    .switch::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--ink-3);
        transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
    }

    .switch:checked {
        background: rgb(61 252 166 / 0.15);
        border-color: var(--success);
    }

    .switch:checked::after {
        transform: translateX(18px);
        background: var(--success);
        box-shadow: 0 0 8px var(--success);
    }

    .switch:focus-visible {
        outline: 2px solid var(--cyan);
        outline-offset: 2px;
    }

    .switch:disabled {
        cursor: not-allowed;
    }

    /* Cartões de escolha (papel, prioridade, fase) */
    .choice {
        position: relative;
        display: flex;
        gap: 12px;
        padding: 12px;
        background: rgb(5 7 16 / 0.5);
        border: 1px solid var(--line-strong);
        border-radius: var(--radius);
        cursor: pointer;
        transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    }

    .choice:hover {
        border-color: rgb(34 228 255 / 0.45);
    }

    .choice:has(:checked) {
        border-color: var(--cyan);
        background: rgb(34 228 255 / 0.08);
        box-shadow: inset 0 0 0 1px rgb(34 228 255 / 0.25), 0 0 20px -8px rgb(34 228 255 / 0.6);
    }

    .choice:has(:focus-visible) {
        outline: 2px solid var(--cyan);
        outline-offset: 2px;
    }

    .choice:has(:disabled) {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .choice-title {
        display: block;
        font: 600 14px/1.3 var(--font-display);
        color: var(--ink);
    }

    .choice-sub {
        display: block;
        margin-top: 2px;
        font-size: 12px;
        color: var(--ink-2);
    }

    /* Raridade no formulário */
    .choice-rarity {
        --r: var(--rarity-common);
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .choice-rarity.rarity-medium { --r: var(--rarity-rare); }
    .choice-rarity.rarity-high { --r: var(--rarity-legendary); }

    .choice-rarity .choice-sub {
        font: 500 12px/1 var(--font-code);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--r);
    }

    .choice-rarity:has(:checked) {
        border-color: var(--r);
        background: color-mix(in oklab, var(--r) 10%, transparent);
        box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--r) 30%, transparent), 0 0 20px -8px var(--r);
    }

    /* Segmentado de fase */
    .segmented {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        padding: 4px;
        background: var(--field);
        border: 1px solid var(--line-strong);
        border-radius: var(--radius);
    }

    .segment {
        --phase: var(--violet);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 36px;
        padding-inline: 8px;
        font: 600 14px/1 var(--font-display);
        color: var(--ink-2);
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
    }

    .segment.phase--doing { --phase: var(--cyan); }
    .segment.phase--done { --phase: var(--success); }

    .segment:hover {
        color: var(--ink);
        background: rgb(255 255 255 / 0.04);
    }

    .segment-dot {
        width: 8px;
        height: 8px;
        flex: none;
        background: var(--phase);
        opacity: 0.5;
    }

    .segment:has(:checked) {
        color: var(--ink);
        background: color-mix(in oklab, var(--phase) 16%, transparent);
        box-shadow: inset 0 -2px 0 var(--phase);
    }

    .segment:has(:checked) .segment-dot {
        opacity: 1;
        box-shadow: 0 0 8px var(--phase);
    }

    .segment:has(:focus-visible) {
        outline: 2px solid var(--cyan);
        outline-offset: 1px;
    }

    /* Input de cor */
    .swatch-input {
        appearance: none;
        width: 40px;
        height: 40px;
        flex: none;
        padding: 4px;
        background: var(--field);
        border: 1px solid var(--line-strong);
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: border-color var(--dur) var(--ease);
    }

    .swatch-input:hover {
        border-color: var(--cyan);
    }

    .swatch-input:focus-visible {
        outline: 2px solid var(--cyan);
        outline-offset: 2px;
    }

    .swatch-input::-webkit-color-swatch-wrapper {
        padding: 0;
    }

    .swatch-input::-webkit-color-swatch {
        border: 0;
        border-radius: 1px;
    }

    .swatch-input::-moz-color-swatch {
        border: 0;
        border-radius: 1px;
    }

    /* --------------------------------------------------------------- Alertas */

    .alert {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 24px;
        padding: 12px 16px;
        font-size: 14px;
        border: 1px solid;
        border-left-width: 3px;
        border-radius: var(--radius-sm);
    }

    .alert > .icon {
        margin-top: 2px;
    }

    .alert-success {
        color: var(--success-ink);
        background: rgb(61 252 166 / 0.08);
        border-color: rgb(61 252 166 / 0.35);
        border-left-color: var(--success);
    }

    .alert-success > .icon {
        color: var(--success);
    }

    .alert-danger {
        color: var(--danger-ink);
        background: rgb(255 85 119 / 0.08);
        border-color: rgb(255 85 119 / 0.35);
        border-left-color: var(--danger);
    }

    .alert-danger > .icon {
        color: var(--danger);
    }

    .toast {
        position: fixed;
        z-index: 50;
        right: 16px;
        bottom: 16px;
        left: 16px;
        max-width: 420px;
        margin-left: auto;
        padding: 12px 16px;
        font: 500 14px/1.4 var(--font-display);
        color: var(--danger-ink);
        background: var(--danger-surface);
        border: 1px solid var(--danger);
        border-left-width: 3px;
        box-shadow: 0 0 32px -8px rgb(255 85 119 / 0.6), 0 12px 32px -8px rgb(0 0 0 / 0.6);
        animation: toast-in 240ms var(--ease);
    }

    /* ---------------------------------------------------------------- Avatar */

    .avatar {
        --hue: 190;
        --size: 32px;
        display: inline-grid;
        place-items: center;
        width: var(--size);
        height: var(--size);
        flex: none;
        font: 700 12px/1 var(--font-code);
        letter-spacing: 0.02em;
        color: oklch(0.93 0.06 var(--hue));
        background: oklch(0.32 0.1 var(--hue));
        border: 1px solid oklch(0.72 0.15 var(--hue));
        border-radius: var(--radius-sm);
        box-shadow: inset 0 0 12px oklch(0.55 0.15 var(--hue) / 0.45);
    }

    .avatar-sm { --size: 28px; }
    .avatar-lg { --size: 40px; }

    .avatar-xl {
        --size: 64px;
        font-size: 20px;
    }

    .avatar-empty {
        display: inline-grid;
        place-items: center;
        width: 28px;
        height: 28px;
        color: var(--ink-3);
        border: 1px dashed var(--line-strong);
        border-radius: var(--radius-sm);
    }

    /* --------------------------------------------------------- Chips/badges */

    .chip {
        --cut: 4px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 24px;
        padding: 0 8px;
        font: 600 12px/1 var(--font-display);
        letter-spacing: 0.02em;
        white-space: nowrap;
        border: 1px solid var(--line-strong);
        clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
    }

    .chip-cat {
        color: color-mix(in oklab, var(--cat) 55%, white);
        background: color-mix(in oklab, var(--cat) 16%, transparent);
        border-color: color-mix(in oklab, var(--cat) 45%, transparent);
    }

    .chip-role {
        font-family: var(--font-code);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--ink-2);
        background: rgb(255 255 255 / 0.03);
    }

    .chip-role.is-admin {
        color: var(--cyan);
        border-color: rgb(34 228 255 / 0.4);
        background: rgb(34 228 255 / 0.08);
    }

    .rarity {
        --r: var(--rarity-common);
        color: color-mix(in oklab, var(--r) 70%, white);
        border-color: color-mix(in oklab, var(--r) 40%, transparent);
        background: color-mix(in oklab, var(--r) 10%, transparent);
    }

    .rarity-medium { --r: var(--rarity-rare); }
    .rarity-high { --r: var(--rarity-legendary); }

    .rarity-tier {
        padding-left: 6px;
        border-left: 1px solid color-mix(in oklab, var(--r) 40%, transparent);
        font: 500 12px/1 var(--font-code);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--r);
    }

    .gem {
        width: 8px;
        height: 8px;
        flex: none;
        background: var(--r);
        transform: rotate(45deg);
        box-shadow: 0 0 8px var(--r);
    }

    .status-dot {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
    }

    .status-dot::before {
        content: "";
        width: 8px;
        height: 8px;
        background: currentColor;
        box-shadow: 0 0 8px currentColor;
    }

    .status-dot.is-on { color: var(--success); }

    .status-dot.is-off {
        color: var(--ink-3);
    }

    .status-dot.is-off::before {
        box-shadow: none;
    }

    /* --------------------------------------------------------------- Kanban */

    .progress-hud {
        min-width: 220px;
    }

    .progress-value {
        font: 600 24px/1 var(--font-code);
        font-variant-numeric: tabular-nums;
        color: var(--success);
        text-shadow: 0 0 16px rgb(61 252 166 / 0.45);
    }

    .meter {
        --p: 0%;
        position: relative;
        height: 6px;
        background: rgb(255 255 255 / 0.06);
        overflow: hidden;
    }

    .meter-fill {
        display: block;
        width: var(--p);
        height: 100%;
        --fill: var(--phase, var(--success));
        background: linear-gradient(90deg, color-mix(in oklab, var(--fill) 45%, transparent), var(--fill));
        box-shadow: 0 0 12px var(--fill);
        transition: width 700ms var(--ease);
    }

    /* Segmentos tipo barra de XP */
    .meter::after {
        content: "";
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), var(--surface-solid) calc(10% - 2px) 10%);
        pointer-events: none;
    }

    .phase {
        --phase: var(--violet);
        --bracket: color-mix(in oklab, var(--phase) 75%, transparent);
        display: flex;
        flex-direction: column;
    }

    @media (min-width: 768px) {
        .phase {
            min-height: 60vh;
        }
    }

    .phase--doing { --phase: var(--cyan); }
    .phase--done { --phase: var(--success); }

    .phase-head {
        padding: 16px;
        border-bottom: 1px solid var(--line);
        background: linear-gradient(180deg, color-mix(in oklab, var(--phase) 8%, transparent), transparent);
    }

    .phase-index {
        font: 500 12px/1 var(--font-code);
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--phase);
    }

    .phase-title {
        font: 600 20px/1.2 var(--font-display);
        color: var(--ink);
    }

    .phase-share {
        font: 500 12px/1 var(--font-code);
        font-variant-numeric: tabular-nums;
        color: var(--ink-3);
    }

    .hud-count {
        --cut: 6px;
        display: inline-grid;
        place-items: center;
        min-width: 40px;
        height: 32px;
        padding-inline: 8px;
        font: 600 16px/1 var(--font-code);
        font-variant-numeric: tabular-nums;
        color: var(--phase);
        background: color-mix(in oklab, var(--phase) 10%, transparent);
        border: 1px solid color-mix(in oklab, var(--phase) 45%, transparent);
        clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
        text-shadow: 0 0 10px color-mix(in oklab, var(--phase) 60%, transparent);
    }

    .kanban-column {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 12px;
        transition: background-color var(--dur) var(--ease), outline-color var(--dur) var(--ease);
        outline: 1px dashed transparent;
        outline-offset: -6px;
    }

    body.is-sorting .kanban-column {
        outline-color: color-mix(in oklab, var(--phase) 45%, transparent);
        background: color-mix(in oklab, var(--phase) 4%, transparent);
    }

    /* Estado vazio: aparece e some sozinho conforme cartões entram/saem */
    .kanban-column:not(:has(.task-card))::after {
        content: "Nenhuma tarefa nesta fase. Arraste um cartão para cá ou use o +.";
        display: grid;
        place-items: center;
        flex: 1;
        min-height: 160px;
        padding: 24px;
        text-align: center;
        font: 500 12px/1.6 var(--font-code);
        letter-spacing: 0.04em;
        color: var(--ink-3);
        border: 1px dashed var(--line-strong);
        border-radius: var(--radius);
        background: repeating-linear-gradient(135deg, transparent 0 10px, rgb(128 146 230 / 0.03) 10px 20px);
    }

    /* Cartão de tarefa */
    .task-card {
        --r: transparent;
        position: relative;
        padding: 12px 12px 12px 16px;
        background: linear-gradient(180deg, rgb(24 29 61 / 0.92), rgb(13 16 33 / 0.96));
        border: 1px solid var(--line);
        border-radius: var(--radius);
        transition:
            border-color var(--dur) var(--ease),
            box-shadow var(--dur) var(--ease),
            opacity var(--dur) var(--ease);
    }

    /* Faixa lateral na cor da categoria */
    .task-card::before {
        content: "";
        position: absolute;
        left: -1px;
        top: 12px;
        bottom: 12px;
        width: 3px;
        background: var(--cat, var(--line-strong));
        box-shadow: 0 0 10px var(--cat, transparent);
    }

    /* Linha superior na cor da raridade */
    .task-card::after {
        content: "";
        position: absolute;
        top: -1px;
        left: 16px;
        right: 16px;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--r), transparent);
        background-size: 200% 100%;
        background-position: 50% 0;
    }

    .task-card.rarity-medium { --r: var(--rarity-rare); }

    .task-card.rarity-high {
        --r: var(--rarity-legendary);
        border-color: rgb(255 176 58 / 0.22);
    }

    .task-card.rarity-high::after {
        background: linear-gradient(90deg, transparent 0%, rgb(255 176 58 / 0.4) 30%, var(--legendary-hi) 50%, rgb(255 176 58 / 0.4) 70%, transparent 100%);
        background-size: 200% 100%;
        animation: legendary-shine 4.5s var(--ease) infinite;
    }

    .task-card:hover {
        border-color: rgb(34 228 255 / 0.45);
        box-shadow: 0 0 0 1px rgb(34 228 255 / 0.12), 0 10px 28px -14px rgb(34 228 255 / 0.7);
    }

    .task-card:focus-within {
        border-color: rgb(34 228 255 / 0.45);
    }

    .task-card.is-chosen,
    .task-card.is-dragging {
        border-color: var(--cyan);
        box-shadow:
            0 0 0 1px var(--cyan),
            0 0 32px -4px rgb(34 228 255 / 0.65),
            0 0 64px -16px rgb(255 61 200 / 0.5),
            0 24px 48px -16px rgb(0 0 0 / 0.8);
    }

    .task-card.is-dragging {
        cursor: grabbing;
    }

    .task-card.is-ghost {
        border: 1px dashed var(--cyan);
        box-shadow: none;
        background: rgb(34 228 255 / 0.06);
    }

    .task-card.is-ghost > * {
        opacity: 0.25;
    }

    .card-title {
        font: 600 16px/1.35 var(--font-display);
        color: var(--ink);
        overflow-wrap: anywhere;
        text-decoration-color: var(--ink-3);
        text-decoration-thickness: 1px;
    }

    .card-desc {
        margin-top: 4px;
        font-size: 14px;
        line-height: 1.5;
        color: var(--ink-2);
        overflow-wrap: anywhere;
    }

    /* Ações do cartão (editar / mover para a lixeira) */
    .card-actions {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-left: auto;
    }

    .card-action {
        display: inline-grid;
        place-items: center;
        width: 28px;
        height: 28px;
        color: var(--ink-3);
        background: transparent;
        border: 1px solid transparent;
        border-radius: var(--radius-sm);
        cursor: pointer;
        opacity: 0;
        transition:
            opacity var(--dur) var(--ease),
            color var(--dur) var(--ease),
            border-color var(--dur) var(--ease),
            background-color var(--dur) var(--ease);
    }

    .task-card:hover .card-action,
    .task-card:focus-within .card-action {
        opacity: 1;
    }

    .card-action:hover {
        color: var(--cyan);
        border-color: rgb(34 228 255 / 0.4);
    }

    .card-delete:hover {
        color: var(--danger);
        border-color: rgb(255 85 119 / 0.45);
        background: rgb(255 85 119 / 0.1);
    }

    .card-action:focus-visible {
        opacity: 1;
        outline: 2px solid var(--cyan);
        outline-offset: 1px;
    }

    .card-delete:focus-visible {
        outline-color: var(--danger);
    }

    /* Toque: sempre visíveis, discretos e com área maior */
    @media (hover: none) {
        .card-action {
            width: 32px;
            height: 32px;
            opacity: 0.7;
        }
    }

    /* ------------------------------------------------ Modal de confirmação */

    .confirm-dialog {
        width: min(440px, calc(100% - 32px));
        max-width: none;
        max-height: calc(100dvh - 32px);
        margin: auto;
        padding: 0;
        color: var(--ink);
        background: transparent;
        border: 0;
        overflow: visible;
    }

    .confirm-dialog::backdrop {
        background: rgb(3 4 10 / 0.75);
        backdrop-filter: blur(4px);
    }

    .confirm-dialog[open] {
        animation: dialog-in 220ms var(--ease);
    }

    .confirm-dialog[open]::backdrop {
        animation: backdrop-in 220ms ease-out;
    }

    .confirm-panel {
        padding: 24px;
        background: var(--surface-solid);
        border-color: var(--line-strong);
        box-shadow: 0 24px 64px -16px rgb(0 0 0 / 0.85), 0 0 48px -20px rgb(34 228 255 / 0.5);
    }

    .confirm-dialog.is-danger .confirm-panel {
        --bracket: rgb(255 85 119 / 0.75);
        box-shadow: 0 24px 64px -16px rgb(0 0 0 / 0.85), 0 0 48px -20px rgb(255 85 119 / 0.55);
    }

    .confirm-head {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .confirm-dialog.is-danger .brand-mark {
        background: var(--danger);
    }

    .confirm-dialog.is-danger .eyebrow {
        color: var(--danger);
    }

    .confirm-title {
        margin-top: 8px;
        font: 600 20px/1.2 var(--font-display);
        color: var(--ink);
    }

    .confirm-item {
        margin-top: 16px;
        padding: 8px 12px;
        font: 600 14px/1.4 var(--font-display);
        color: var(--ink);
        background: var(--field);
        border-left: 2px solid var(--cyan);
        overflow-wrap: anywhere;
    }

    .confirm-dialog.is-danger .confirm-item {
        border-left-color: var(--danger);
    }

    .confirm-message {
        margin-top: 12px;
        font-size: 14px;
        color: var(--ink-2);
    }

    .confirm-actions {
        display: flex;
        flex-wrap: wrap-reverse;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 24px;
        padding-top: 16px;
        border-top: 1px solid var(--line);
    }

    @media (max-width: 479px) {
        .confirm-actions > .btn {
            flex: 1 1 auto;
        }
    }

    @keyframes dialog-in {
        from { opacity: 0; transform: translateY(8px) scale(0.98); }
        to { opacity: 1; transform: none; }
    }

    @keyframes backdrop-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @media (prefers-reduced-motion: reduce) {
        .confirm-dialog[open],
        .confirm-dialog[open]::backdrop {
            animation: none;
        }
    }

    .card-foot {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--line);
        font: 500 12px/1 var(--font-code);
        color: var(--ink-3);
    }

    .due {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-variant-numeric: tabular-nums;
        color: var(--ink-2);
    }

    .due.is-overdue {
        --cut: 4px;
        min-height: 24px;
        padding: 0 8px;
        font-weight: 700;
        color: var(--danger);
        background: rgb(255 85 119 / 0.1);
        border: 1px solid rgb(255 85 119 / 0.4);
        clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
    }

    .kanban-column[data-status="done"] .task-card::before {
        background: var(--success);
        box-shadow: 0 0 10px var(--success);
    }

    /* ---------------------------------------------------------------- Stats */

    .stat {
        padding: 16px;
    }

    .stat-value {
        font: 600 32px/1 var(--font-code);
        font-variant-numeric: tabular-nums;
        color: var(--ink);
    }

    .stat-label {
        margin-top: 8px;
        font: 500 12px/1.2 var(--font-code);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink-3);
    }

    .stat--accent .stat-value {
        color: var(--success);
        text-shadow: 0 0 16px rgb(61 252 166 / 0.4);
    }

    .stat--cyan .stat-value {
        color: var(--cyan);
        text-shadow: 0 0 16px rgb(34 228 255 / 0.4);
    }

    /* ---------------------------------------------------------------- Tabela */

    .table-scroll {
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }

    .data-table {
        width: 100%;
        min-width: 760px;
        border-collapse: collapse;
        text-align: left;
        font-size: 14px;
    }

    .data-table th {
        height: 44px;
        padding: 0 16px;
        font: 500 12px/1 var(--font-code);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink-3);
        text-align: left;
        border-bottom: 1px solid var(--line-strong);
        white-space: nowrap;
    }

    .data-table td.empty-state {
        height: auto;
        padding: 48px 16px;
    }

    .data-table td {
        height: 56px;
        padding: 8px 16px;
        border-bottom: 1px solid var(--line);
        vertical-align: middle;
    }

    .data-table tbody tr {
        transition: background-color var(--dur) var(--ease);
    }

    .data-table tbody tr:hover {
        background: rgb(34 228 255 / 0.035);
    }

    .data-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .data-table .num {
        text-align: right;
        font-family: var(--font-code);
        font-variant-numeric: tabular-nums;
    }

    .row-actions {
        display: flex;
        justify-content: flex-end;
        gap: 4px;
        opacity: 0.75;
        transition: opacity var(--dur) var(--ease);
    }

    tr:hover .row-actions,
    tr:focus-within .row-actions {
        opacity: 1;
    }

    .table-link {
        color: var(--ink);
        text-decoration: none;
        border-bottom: 1px dashed var(--line-strong);
        transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
    }

    .table-link:hover {
        color: var(--cyan);
        border-color: var(--cyan);
    }

    .table-link:focus-visible {
        outline: 2px solid var(--cyan);
        outline-offset: 2px;
    }

    .empty-state {
        padding: 48px 16px;
        text-align: center;
        color: var(--ink-3);
        font-size: 14px;
    }

    .empty-state strong {
        display: block;
        margin-bottom: 4px;
        font: 600 16px/1.3 var(--font-display);
        color: var(--ink-2);
    }

    /* Lista (categorias) */
    .list-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        border-bottom: 1px solid var(--line);
        transition: background-color var(--dur) var(--ease);
    }

    .list-row:last-child {
        border-bottom: 0;
    }

    .list-row:hover {
        background: rgb(34 228 255 / 0.03);
    }

    /* --------------------------------------------------------------- Quadros */
    /* Escolha do quadro: cartões coloridos com o progresso de cada área do jogo */
    .board-grid {
        display: grid;
        gap: 16px;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    }

    .board-card {
        --bracket: color-mix(in oklab, var(--board) 60%, transparent);
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 18px 18px 18px 22px;
        color: inherit;
        text-decoration: none;
        overflow: hidden;
        transition:
            border-color var(--dur) var(--ease),
            box-shadow var(--dur) var(--ease),
            transform var(--dur) var(--ease);
    }

    /* Faixa lateral na cor do quadro, como a de categoria nos cartões de tarefa */
    .board-card::after {
        content: "";
        position: absolute;
        left: -1px;
        top: 16px;
        bottom: 16px;
        width: 3px;
        background: var(--board);
        box-shadow: 0 0 12px var(--board);
    }

    .board-card:hover,
    .board-card:focus-visible {
        border-color: color-mix(in oklab, var(--board) 50%, transparent);
        box-shadow: 0 0 0 1px color-mix(in oklab, var(--board) 30%, transparent), 0 12px 32px rgb(0 0 0 / 0.35);
        transform: translateY(-2px);
        outline: none;
    }

    .board-card-head {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .board-card-title {
        flex: 1;
        min-width: 0;
        font: 700 20px/1.2 var(--font-display);
        letter-spacing: 0.01em;
        color: var(--ink);
        overflow-wrap: anywhere;
    }

    .board-card-desc {
        flex: 1;
        font-size: 13px;
        line-height: 1.5;
        color: var(--ink-3);
    }

    .board-card-foot {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .board-phases {
        --phase: var(--violet);
        display: flex;
        flex-wrap: wrap;
        gap: 6px 14px;
        font: 500 12px/1 var(--font-code);
        color: var(--ink-2);
    }

    .board-phases > span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .board-phases .segment-dot {
        opacity: 1;
    }

    .board-dot {
        display: inline-block;
        width: 10px;
        height: 10px;
        flex: none;
        background: var(--board, var(--cat));
        box-shadow: 0 0 10px var(--board, var(--cat));
        clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    }

    .board-title {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .board-title .board-dot {
        width: 14px;
        height: 14px;
    }

    .board-owner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 10px;
        font-size: 13px;
        color: var(--ink-2);
    }

    .board-card.is-done {
        opacity: 0.75;
    }

    .board-card.is-done:hover,
    .board-card.is-done:focus-visible {
        opacity: 1;
    }

    .board-card.is-done .board-card-title {
        color: var(--ink-2);
    }

    .chip-done {
        color: var(--success);
        background: color-mix(in oklab, var(--success) 14%, transparent);
        border-color: color-mix(in oklab, var(--success) 45%, transparent);
    }

    .section-head {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        margin-bottom: 14px;
    }

    .section-title {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font: 600 14px/1 var(--font-display);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--ink-2);
    }

    .chip-board {
        color: color-mix(in oklab, var(--board) 55%, white);
        background: color-mix(in oklab, var(--board) 16%, transparent);
        border-color: color-mix(in oklab, var(--board) 45%, transparent);
        text-decoration: none;
    }

    a.chip-board:hover {
        background: color-mix(in oklab, var(--board) 28%, transparent);
    }

    /* Lixeira */
    .trash-row {
        position: relative;
        align-items: flex-start;
        gap: 16px;
        padding-block: 16px;
    }

    .trash-row::before {
        content: "";
        position: absolute;
        left: 0;
        top: 16px;
        bottom: 16px;
        width: 2px;
        background: var(--cat, var(--line-strong));
        opacity: 0.6;
    }

    .trash-title {
        font: 600 16px/1.35 var(--font-display);
        color: var(--ink-2);
        overflow-wrap: anywhere;
    }

    .trash-row:hover .trash-title {
        color: var(--ink);
    }

    .chip-phase {
        --phase: var(--violet);
        color: color-mix(in oklab, var(--phase) 70%, white);
        background: color-mix(in oklab, var(--phase) 10%, transparent);
        border-color: color-mix(in oklab, var(--phase) 40%, transparent);
    }

    .chip-phase.phase--doing { --phase: var(--cyan); }
    .chip-phase.phase--done { --phase: var(--success); }

    .chip-phase .segment-dot {
        width: 6px;
        height: 6px;
        opacity: 1;
    }

    .empty-icon {
        display: grid;
        place-items: center;
        width: 64px;
        height: 64px;
        margin: 0 auto 16px;
        color: var(--ink-3);
        border: 1px dashed var(--line-strong);
        border-radius: var(--radius);
        background: repeating-linear-gradient(135deg, transparent 0 8px, rgb(128 146 230 / 0.04) 8px 16px);
    }

    .meta {
        font: 500 12px/1.2 var(--font-code);
        font-variant-numeric: tabular-nums;
        color: var(--ink-3);
        white-space: nowrap;
    }

    .text-link {
        font-weight: 600;
        color: var(--cyan);
        text-decoration: none;
        border-bottom: 1px solid rgb(34 228 255 / 0.35);
        transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
    }

    .text-link:hover {
        color: var(--cyan-hi);
        border-color: var(--cyan-hi);
    }

    .text-link:focus-visible {
        outline: 2px solid var(--cyan);
        outline-offset: 2px;
    }

    /* ------------------------------------------------------ Tela de título */

    .title-screen {
        min-height: calc(100dvh - 112px);
        display: grid;
        place-items: center;
        padding-block: 24px;
    }

    .title-stack {
        width: 100%;
        max-width: 400px;
    }

    .title-logo {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-bottom: 32px;
    }

    .glitch {
        position: relative;
        margin-top: 24px;
        font: 700 32px/1.05 var(--font-display);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink);
        text-shadow: 0 0 24px rgb(34 228 255 / 0.35);
        overflow-wrap: anywhere;
    }

    .glitch::before,
    .glitch::after {
        content: attr(data-text);
        content: attr(data-text) / "";
        position: absolute;
        inset: 0;
        opacity: 0;
        pointer-events: none;
    }

    .glitch::before {
        color: var(--cyan);
        animation: glitch-a 7s steps(1) infinite;
    }

    .glitch::after {
        color: var(--magenta);
        animation: glitch-b 7s steps(1) infinite;
    }

    @media (min-width: 640px) {
        .glitch {
            font-size: 48px;
        }
    }

    .glitch--sm {
        font-size: 24px;
    }

    @media (min-width: 640px) {
        .glitch--sm {
            font-size: 32px;
        }
    }

    .press-start {
        margin-top: 16px;
        font: 600 12px/1 var(--font-code);
        letter-spacing: 0.4em;
        text-transform: uppercase;
        color: var(--cyan);
        animation: blink 1.6s steps(1) infinite;
    }

    .title-foot {
        margin-top: 24px;
        text-align: center;
        font-size: 14px;
        color: var(--ink-2);
    }

    /* -------------------------------------------------------------- Keyframes */

    @keyframes btn-spin {
        to { --spin: 360deg; }
    }

    @keyframes header-scan {
        from { background-position: 100% 0; }
        to { background-position: -100% 0; }
    }

    @keyframes legendary-shine {
        0%, 55% { background-position: 150% 0; }
        100% { background-position: -50% 0; }
    }

    @keyframes blink {
        0%, 60% { opacity: 1; }
        61%, 100% { opacity: 0.25; }
    }

    @keyframes toast-in {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: none; }
    }

    @keyframes glitch-a {
        0%, 88%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 0 0); }
        89% { opacity: 0.85; transform: translate(-3px, 1px); clip-path: inset(12% 0 58% 0); }
        91% { opacity: 0.85; transform: translate(3px, -1px); clip-path: inset(62% 0 10% 0); }
        93% { opacity: 0.85; transform: translate(-2px, 0); clip-path: inset(38% 0 36% 0); }
        94% { opacity: 0; }
    }

    @keyframes glitch-b {
        0%, 89%, 100% { opacity: 0; transform: none; clip-path: inset(0 0 0 0); }
        90% { opacity: 0.85; transform: translate(3px, 0); clip-path: inset(48% 0 22% 0); }
        92% { opacity: 0.85; transform: translate(-3px, 1px); clip-path: inset(8% 0 70% 0); }
        94% { opacity: 0; }
    }

    /* Movimento reduzido: tudo parado, nada piscando */
    @media (prefers-reduced-motion: reduce) {
        .app-header::after,
        .btn-primary,
        .task-card.rarity-high::after,
        .press-start,
        .toast {
            animation: none;
        }

        .glitch::before,
        .glitch::after {
            animation: none;
            opacity: 0;
        }

        .btn-primary::after {
            display: none;
        }

        .meter-fill {
            transition: none;
        }
    }
}