/* ========================================================================== */
/* ========== MEU PC INTELIGENTE — HARDWARE TERMINAL SYSTEM ========== */
/* Linguagem de console técnico: fundo escuro, contornos de 1px, sem sombras  */
/* nem gradientes. Títulos em Space Grotesk, dados em JetBrains Mono.         */
/* ========================================================================== */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    color-scheme: dark;

    /* Superfícies (nível 0 → 2) */
    --bg: #121416;
    --surface-lowest: #0c0e10;
    --surface: #1a1c1e;
    --surface-2: #1e2022;
    --surface-3: #282a2c;
    --border: #333537;
    --border-warm: #594237;

    /* Texto */
    --text: #e2e2e5;
    --text-soft: #e1c0b2;
    --muted: #a88a7e;

    /* Status */
    --primary: #f26a1b;
    --primary-hover: #d9590f;
    --primary-soft: #ffb694;
    --on-primary: #121416;
    --on-primary-soft: #351000;
    --success: #73dc8d;
    --success-strong: #3ba55d;
    --danger: #fb5e5b;
    --danger-soft: #ffb3ae;
    --warning: #ffb694;

    --ok-bg: rgba(59, 165, 93, 0.12);
    --warn-bg: rgba(242, 106, 27, 0.1);
    --err-bg: rgba(217, 69, 69, 0.12);

    --font-head: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

    --radius-sm: 2px;
    --radius: 4px;
    --radius-lg: 8px;

    --nav-h: 72px;
}

html {
    scroll-padding-top: calc(var(--nav-h) + 1rem);
}

body {
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body > main {
    flex: 1;
}

::selection {
    background: var(--primary);
    color: var(--on-primary);
}

h1, h2, h3, h4 {
    font-family: var(--font-head);
    color: var(--text);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

a {
    color: var(--primary-soft);
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 1px solid var(--primary);
    outline-offset: 2px;
}

[hidden] {
    display: none !important;
}

code {
    font-family: var(--font-mono);
}

.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.container-narrow {
    max-width: 1040px;
}

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

/* ========================================================================== */
/* ========== ÍCONES SVG ========== */
/* ========================================================================== */

.ic {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.28em;
}

.ic-sm { width: 1em; height: 1em; vertical-align: -0.15em; }
.ic-lg { width: 1.5em; height: 1.5em; }

.ic-spin {
    animation: spin 1s linear infinite;
}

/* ========================================================================== */
/* ========== TIPOGRAFIA E PEÇAS COMUNS ========== */
/* ========================================================================== */

.eyebrow,
.label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary);
    margin-bottom: 0.75rem;
}

.eyebrow-dot::before,
.dot {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    flex: none;
}

.eyebrow-box {
    padding: 0.35rem 0.6rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--muted);
}

.label-accent {
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.label-accent .dot {
    background: var(--primary);
}

.lead {
    font-size: 16px;
    line-height: 1.6;
    color: var(--muted);
    max-width: 62ch;
}

.lead-accent {
    font-family: var(--font-head);
    font-size: 22px;
    line-height: 1.35;
    color: var(--primary-soft);
}

.muted { color: var(--muted); }
.accent { color: var(--primary); }
.ok-text { color: var(--success); }
.warn-text { color: var(--warning); }
.err-text { color: var(--danger); }

.page-header {
    padding: 3rem 0 1.5rem;
}

.page-header h1 {
    font-size: 40px;
    line-height: 48px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}

.page-header-split {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.section-head {
    margin-bottom: 1.5rem;
}

.section-head h2 {
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
}

.section-head p {
    color: var(--muted);
    font-size: 12px;
    margin-top: 0.25rem;
}

.section-head-split {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Painel: superfície nível 1 */
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    background: var(--surface-3);
    color: var(--primary);
    flex: none;
}

.icon-tile .ic {
    width: 22px;
    height: 22px;
}

.icon-tile-ok {
    color: var(--success);
}

/* Etiqueta retangular (não é pílula) */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tag-accent {
    color: var(--primary);
    border-color: var(--border-warm);
    background: transparent;
}

/* Selo de compatibilidade */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.45rem;
    border: 1px solid currentColor;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    background: transparent;
}

.chip-ok { color: var(--success); background: var(--ok-bg); }
.chip-warn { color: var(--primary); }
.chip-err { color: var(--danger); }

.notice {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 13px;
    color: var(--text);
    margin-bottom: 1.5rem;
}

.notice .ic {
    color: var(--primary);
}

.notice-err {
    border-color: var(--danger);
}

.notice-err .ic {
    color: var(--danger);
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.15s;
}

.link-arrow .ic {
    transition: transform 0.15s;
}

.link-arrow:hover {
    color: var(--text);
}

.link-arrow:hover .ic {
    transform: translateX(3px);
}

/* Medidor de consumo (TDP tracker) */
.meter-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 0.4rem;
}

.meter-head strong {
    color: var(--text);
}

.meter-bar {
    height: 6px;
    background: var(--surface-3);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.meter-bar span {
    display: block;
    height: 100%;
    background: var(--success-strong);
    transition: width 0.3s ease;
}

.meter-warn .meter-bar span { background: var(--primary); }
.meter-err .meter-bar span { background: var(--danger); }

.meter-note {
    margin-top: 0.4rem;
    font-size: 11px;
    color: var(--muted);
}

.meter-warn .meter-note { color: var(--warning); }
.meter-err .meter-note { color: var(--danger); }

.progress {
    height: 4px;
    background: var(--surface-3);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.progress span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--primary);
    transition: width 0.3s ease;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--muted);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
}

.empty-state .ic {
    width: 28px;
    height: 28px;
}

/* ========================================================================== */
/* ========== BOTÕES ========== */
/* ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

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

.btn-primary {
    background: var(--primary);
    color: var(--on-primary);
}

.btn-primary:hover:not(:disabled) {
    background: var(--primary-hover);
}

.btn-secondary,
.btn-outline {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

.btn-secondary:hover:not(:disabled),
.btn-outline:hover:not(:disabled) {
    border-color: var(--muted);
}

.btn-outline-accent {
    background: transparent;
    border-color: var(--border-warm);
    color: var(--primary);
}

.btn-outline-accent:hover {
    border-color: var(--primary);
}

.btn-danger,
.build-delete {
    background: transparent;
    border-color: var(--danger);
    color: var(--danger);
}

.btn-danger:hover:not(:disabled),
.build-delete:hover:not(:disabled) {
    background: var(--danger);
    color: var(--on-primary);
}

.btn-success {
    background: var(--success-strong);
    color: var(--on-primary);
}

.btn-small {
    padding: 0.4rem 0.75rem;
    font-size: 12px;
}

.btn-large {
    padding: 0.85rem 2rem;
    font-size: 14px;
}

.btn-block {
    width: 100%;
}

/* ========================================================================== */
/* ========== BARRA DO TOPO ========== */
/* ========================================================================== */

.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--surface-lowest);
    border-bottom: 1px solid var(--border);
}

.navbar .container {
    height: var(--nav-h);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--text);
    flex: none;
}

.brand-mark {
    width: 8px;
    height: 20px;
    background: var(--primary);
    border-radius: var(--radius-sm);
}

.brand-name {
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.brand-name span {
    color: var(--primary);
}

.nav-links {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 0.1rem;
}

.nav-link {
    position: relative;
    padding: 0.4rem 0.6rem;
    white-space: nowrap;
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.15s;
}

.nav-link:hover {
    color: var(--text);
}

.nav-link.active {
    color: var(--text);
    font-weight: 600;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    left: 0.7rem;
    right: 0.7rem;
    bottom: -1rem;
    height: 2px;
    background: var(--primary);
}

.nav-cta {
    flex: none;
}

/* Topo enxuto (confirmação de e-mail) */
.navbar-minimal .container {
    justify-content: center;
}

.navbar-minimal .fid-nav {
    display: none;
}

/* Login / menu do usuário na barra */
.fid-nav {
    display: flex;
    align-items: center;
}

.fid-nav-login {
    height: 36px;
    padding: 0 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s;
}

.fid-nav-login:hover {
    border-color: var(--muted);
}

.fid-menu {
    position: relative;
}

.fid-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 36px;
    padding: 0 0.6rem 0 0.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.fid-chip:hover {
    border-color: var(--muted);
}

.fid-avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--radius);
    background: var(--primary-soft);
    color: var(--on-primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex: none;
}

.fid-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    min-width: 240px;
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 1px solid var(--primary);
    border-radius: var(--radius-lg);
    z-index: 200;
}

.fid-dropdown-head {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.6rem 0.7rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--border);
}

.fid-dropdown-head strong {
    font-family: var(--font-head);
    font-size: 15px;
}

.fid-dropdown-head span {
    font-size: 11px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
}

.fid-dropdown a,
.fid-dropdown button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border: none;
    border-radius: var(--radius);
    background: none;
    color: var(--text);
    font-size: 13px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.fid-dropdown a:hover,
.fid-dropdown button:hover {
    background: var(--surface-3);
}

.fid-dropdown [data-action="logout"] {
    color: var(--danger);
}

/* ========== MENU LATERAL (CELULAR) ========== */

.menu-toggle,
.menu-fundo,
.menu-lateral {
    display: none;
}

@media (max-width: 1440px) {
    .navbar .nav-cta {
        display: none;
    }
}

@media (max-width: 1240px) {
    .navbar .nav-links,
    .navbar .nav-cta {
        display: none;
    }

    .nav-brand {
        margin-right: auto;
    }

    .navbar .fid-nav { order: 2; }
    .menu-toggle { order: 3; }

    .menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--surface);
        color: var(--text);
        cursor: pointer;
        flex: none;
    }

    .menu-toggle .ic {
        width: 20px;
        height: 20px;
    }

    .menu-fundo:not([hidden]),
    .menu-lateral:not([hidden]) {
        display: block;
    }

    .menu-fundo {
        position: fixed;
        inset: 0;
        z-index: 300;
        background: rgba(12, 14, 16, 0.7);
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .menu-lateral {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 301;
        width: min(84vw, 340px);
        padding: 4.5rem 1.5rem 2rem;
        background: var(--surface-lowest);
        border-left: 1px solid var(--border);
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.25s ease;
    }

    body.menu-aberto {
        overflow: hidden;
    }

    body.menu-aberto .menu-fundo {
        opacity: 1;
    }

    body.menu-aberto .menu-lateral {
        transform: translateX(0);
    }

    .menu-fechar {
        position: absolute;
        top: 1rem;
        right: 1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--surface);
        color: var(--text);
        cursor: pointer;
    }

    .menu-lista {
        list-style: none;
        border-top: 1px solid var(--border);
    }

    .menu-link {
        display: block;
        padding: 0.9rem 0.25rem;
        border-bottom: 1px solid var(--border);
        font-family: var(--font-head);
        font-size: 20px;
        font-weight: 600;
        color: var(--muted);
        text-decoration: none;
    }

    .menu-link:hover {
        color: var(--text);
    }

    .menu-link.active {
        color: var(--primary);
    }
}

@media (max-width: 1240px) and (prefers-reduced-motion: reduce) {
    .menu-fundo,
    .menu-lateral {
        transition: none;
    }
}

@media (max-width: 420px) {
    .navbar .container {
        gap: 0.5rem;
        padding: 0 1rem;
    }

    .brand-name {
        font-size: 16px;
    }

    .fid-chip-name {
        display: none;
    }
}

/* ========================================================================== */
/* ========== RODAPÉ ========== */
/* ========================================================================== */

.footer {
    margin-top: 4rem;
    background: var(--surface-lowest);
    border-top: 1px solid var(--border);
    padding: 3rem 0 1.5rem;
    font-size: 12px;
    color: var(--muted);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 2rem;
}

.footer-about p {
    margin: 0.75rem 0;
    max-width: 36ch;
    line-height: 1.6;
}

.footer-about .brand-name {
    font-size: 18px;
}

.footer-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--success);
    text-decoration: none;
    font-weight: 600;
}

.footer-status:hover {
    text-decoration: underline;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.footer-col h2 {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 0.35rem;
}

.footer-col a {
    color: var(--muted);
    text-decoration: none;
}

.footer-col a:hover {
    color: var(--text);
}

.footer-academico strong {
    color: var(--primary);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    font-size: 11px;
}

.footer-tech {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 520px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================================================== */
/* ========== PEÇAS SOLTAS (Aprenda e Melhore seu PC) ========== */
/* O Início usa o bloco "hx" no fim do arquivo; estas duas continuam em uso   */
/* ========================================================================== */

.path-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.75rem;
    font-weight: 600;
    color: var(--primary);
}

.step-num {
    display: block;
    margin-bottom: 0.75rem;
    font-family: var(--font-head);
    font-size: 22px;
    font-weight: 700;
    color: var(--primary);
}

@media (max-width: 560px) {
    .page-header h1 {
        font-size: 32px;
        line-height: 40px;
    }
}

/* ========================================================================== */
/* ========== MONTE SEU PC ========== */
/* ========================================================================== */

.build-header {
    padding-bottom: 2rem;
}

.build-header h1 {
    font-size: 48px;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin-bottom: 0.6rem;
}

.build-header .lead {
    font-family: var(--font-head);
    font-size: 17px;
    line-height: 1.5;
}

.build-ajuda {
    color: var(--text-soft);
    white-space: nowrap;
}

.builder {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 340px;
    gap: 1.25rem;
    align-items: start;
}

/* Colunas presas ao topo: quando ficam mais altas que a tela, rolam por dentro
   em vez de esconder o fim (era o caso do resumo com a build completa). */
.builder-steps,
.builder-summary {
    --painel-max: calc(100vh - var(--nav-h) - 2rem);
}

@media (min-width: 1241px) {
    .builder-summary {
        max-height: var(--painel-max);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* Categorias presas no topo: a LISTA rola por dentro quando passa da tela,
   e o rodapé (contagem e Recomeçar) fica sempre visível. */
.builder-steps {
    padding: 0.5rem;
    position: sticky;
    top: calc(var(--nav-h) + 1rem);
}

@media (min-width: 821px) {
    .builder-steps {
        display: flex;
        flex-direction: column;
        max-height: var(--painel-max);
    }

    .builder-steps .category-list {
        overflow-y: auto;
        min-height: 0;
        overscroll-behavior: contain;
    }

    .builder-steps .steps-foot {
        flex-shrink: 0;
    }
}

.category-list {
    list-style: none;
    display: flex;
    flex-direction: column;
}

.category-item {
    width: 100%;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

.category-item:hover {
    background: var(--surface-2);
}

.category-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.category-dot .ic {
    width: 14px;
    height: 14px;
    stroke-width: 3;
}

.category-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.category-name {
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 600;
    color: var(--muted);
}

.category-detail {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-item.is-done .category-name,
.category-item.is-active .category-name {
    color: var(--text);
}

.category-item.is-done .category-dot {
    background: var(--success-strong);
    border-color: var(--success-strong);
    color: var(--on-primary);
}

.category-item.is-active {
    background: var(--surface-2);
    border-color: var(--border-warm);
}

.category-item.is-active .category-dot {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

.steps-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0.25rem 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--muted);
}

.steps-foot .link-arrow {
    font-size: 11px;
}

.steps-foot .link-arrow .ic {
    width: 13px;
    height: 13px;
}

.steps-foot .link-arrow:hover .ic {
    transform: none;
}

/* Filtros */
.builder-main {
    scroll-margin-top: calc(var(--nav-h) + 1rem);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.builder-filters {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
}

/* Topo da lista: passo atual, o que escolher e por quê */
.step-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.step-head .eyebrow {
    margin-bottom: 0.4rem;
}

.step-head h2 {
    font-size: 26px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.step-hint {
    margin-top: 0.4rem;
    font-family: var(--font-head);
    font-size: 15px;
    color: var(--muted);
}

.step-head .search-field {
    flex: none;
    width: 240px;
}

.step-head .search-field input {
    padding: 0.55rem 0;
}

.search-field {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-lowest);
    color: var(--muted);
    transition: border-color 0.15s;
}

.search-field:focus-within {
    border-color: var(--primary);
}

.search-field input {
    flex: 1;
    min-width: 0;
    padding: 0.7rem 0;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    outline: none;
}

.search-field input::placeholder {
    color: var(--muted);
}

.filter-rows {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.25rem;
}

.filter-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filter-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.chip-btn,
.filter-btn-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-lowest);
    color: var(--text);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, background-color 0.15s;
}

.chip-btn:hover,
.filter-btn-inline:hover {
    border-color: var(--muted);
}

.chip-btn.active,
.filter-btn-inline.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
    font-weight: 600;
}

.filters-foot .select-inline {
    margin-left: auto;
}

.filters-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--muted);
}

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

select,
.select-inline select {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-lowest);
    color: var(--text);
    font-size: 12px;
}

select:focus {
    outline: none;
    border-color: var(--primary);
}

.toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}

.toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.toggle-track {
    position: relative;
    width: 28px;
    height: 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-3);
    transition: background-color 0.15s;
}

.toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--muted);
    transition: transform 0.15s, background-color 0.15s;
}

.toggle input:checked + .toggle-track {
    background: var(--primary);
    border-color: var(--primary);
}

.toggle input:checked + .toggle-track::after {
    transform: translateX(12px);
    background: var(--on-primary);
}

.toggle input:focus-visible + .toggle-track {
    outline: 1px solid var(--primary);
    outline-offset: 2px;
}

.results-count {
    margin-left: auto;
}

/* Cards de peça */
.parts-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.part-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color 0.15s;
}

.part-card:hover {
    border-color: var(--muted);
}

.part-card.is-selected {
    border-color: var(--primary);
    background: var(--surface-2);
}

.part-card.is-incompatible {
    opacity: 0.55;
}

.part-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-lowest);
    color: var(--muted);
}

.part-thumb .ic {
    width: 28px;
    height: 28px;
}

.part-card .part-thumb {
    width: 48px;
    height: 48px;
    border: none;
    background: var(--surface-3);
    color: var(--text-soft);
}

.part-card .part-thumb .ic {
    width: 24px;
    height: 24px;
}

.part-card.is-selected .part-thumb {
    color: var(--primary);
}

.part-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.part-body h3 {
    font-size: 17px;
    font-weight: 600;
}

.part-specs {
    font-size: 12px;
    color: var(--muted);
}

/* Motivo de compatibilidade em uma frase */
.part-why {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
}

.part-why .ic {
    width: 13px;
    height: 13px;
    flex: none;
}

.part-why.is-ok { color: var(--success); }
.part-why.is-warn { color: var(--primary); }
.part-why.is-err { color: var(--danger); }

.part-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.part-action .btn {
    min-width: 120px;
    padding: 0.4rem 0.9rem;
    font-size: 12px;
}

.btn.is-chosen .ic {
    width: 14px;
    height: 14px;
}

.part-price {
    font-family: var(--font-head);
    font-size: 19px;
    font-weight: 700;
    white-space: nowrap;
}

/* Incompatíveis: uma linha no fim da lista */
.parts-incompativeis {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.75rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.parts-incompativeis:hover:not(:disabled) {
    border-color: var(--muted);
    color: var(--text);
}

.parts-incompativeis:disabled {
    cursor: default;
}

/* Diagnóstico */
.diagnostics {
    margin-top: 1rem;
}

.diagnostics-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
    font-size: 11px;
}

#validation-result {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.diag {
    display: flex;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
}

.diag > .ic {
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

.diag strong {
    display: block;
    font-family: var(--font-head);
    font-size: 15px;
    margin-bottom: 0.2rem;
}

.diag p {
    color: var(--text);
}

.diag p + p {
    margin-top: 0.3rem;
}

.diag-ok { border-left-color: var(--success-strong); }
.diag-ok > .ic,
.diag-ok strong { color: var(--success); }

.diag-warn { border-left-color: var(--primary); }
.diag-warn > .ic,
.diag-warn strong { color: var(--primary); }

.diag-err {
    border-color: var(--danger);
    border-left-width: 3px;
    background: var(--err-bg);
}

.diag-err > .ic,
.diag-err strong { color: var(--danger); }

.diag-err strong {
    font-size: 18px;
}

.diag-neutral > .ic { color: var(--muted); }
.diag-neutral p { color: var(--muted); }

.diag-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.8rem;
}

/* Resumo */
.builder-summary {
    padding: 0;
    overflow: hidden;
    position: sticky;
    top: calc(var(--nav-h) + 1rem);
}

/* Diagnóstico no topo do resumo: muda de cor ao vivo */
.summary-diag {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border: none;
    border-bottom: 1px solid var(--border);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.summary-diag > .ic {
    width: 20px;
    height: 20px;
    flex: none;
    margin-top: 2px;
}

.summary-diag > span {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.summary-diag strong {
    font-family: var(--font-head);
    font-size: 16px;
}

.summary-diag > span > span {
    font-size: 12px;
    color: var(--text-soft);
}

.summary-diag.is-ok > .ic,
.summary-diag.is-ok strong { color: var(--success); }
.summary-diag.is-warn { background: var(--warn-bg); }
.summary-diag.is-warn > .ic,
.summary-diag.is-warn strong { color: var(--primary); }
.summary-diag.is-err { background: var(--err-bg); }
.summary-diag.is-err > .ic,
.summary-diag.is-err strong { color: var(--danger); }
.summary-diag.is-neutral > .ic,
.summary-diag.is-loading > .ic { color: var(--muted); }

.summary-list {
    list-style: none;
    padding: 0.5rem 1.25rem;
}

.summary-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "cat price remove" "value price remove";
    align-items: center;
    column-gap: 0.5rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
}

.summary-cat {
    grid-area: cat;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.summary-value {
    grid-area: value;
    font-family: var(--font-head);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.summary-value em {
    font-style: normal;
    font-weight: 400;
    color: var(--muted);
}

.summary-value em.accent {
    color: var(--primary);
}

.summary-list li.is-active .summary-cat {
    color: var(--primary);
}

.summary-price {
    grid-area: price;
    font-size: 12px;
    color: var(--text-soft);
    white-space: nowrap;
}

.summary-remove {
    grid-area: remove;
    display: inline-flex;
    padding: 0.2rem;
    border: none;
    background: none;
    color: var(--muted);
    cursor: pointer;
    border-radius: var(--radius);
}

.summary-remove:hover {
    color: var(--danger);
    background: var(--err-bg);
}

.power {
    padding: 0.9rem 1.25rem;
}

.power .meter-head {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.power .meter-head span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.power .meter-head .ic {
    width: 13px;
    height: 13px;
    color: var(--primary);
}

.power .meter-bar {
    height: 8px;
}

.power .meter-ok .meter-bar span { background: var(--primary); }

.summary-foot {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border);
    background: var(--surface-lowest);
}

.summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 12px;
    color: var(--muted);
}

.summary-total strong {
    font-family: var(--font-head);
    font-size: 28px;
    letter-spacing: -0.02em;
    color: var(--text);
}

.summary-total small {
    width: 100%;
    text-align: right;
    font-size: 11px;
    color: var(--warning);
}

.summary-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.summary-actions-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
}

.summary-actions-row .btn {
    padding: 0.6rem 0.9rem;
    font-size: 12px;
}

#btn-mais[aria-expanded="true"] .ic {
    transform: rotate(180deg);
}

/* Menu "Mais": PDF, comparar e abrir salvo */
.summary-mais {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
}

.summary-mais button {
    padding: 0.6rem 0.75rem;
    border: none;
    border-bottom: 1px solid var(--border);
    background: transparent;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}

.summary-mais button:last-child {
    border-bottom: none;
}

.summary-mais button:hover:not(:disabled) {
    background: var(--surface-2);
    color: var(--primary);
}

.summary-mais button:disabled {
    color: var(--muted);
    cursor: not-allowed;
}

/* Barra fixa do celular (só aparece em telas estreitas) */
.build-barra {
    display: none;
}

@media (max-width: 1240px) {
    .builder {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .builder-summary {
        grid-column: 1 / -1;
        position: static;
        scroll-margin-top: calc(var(--nav-h) + 1rem);
    }
}

/* Celular: categorias viram abas no topo e o status fica fixo na base */
@media (max-width: 820px) {
    .build-page {
        padding-bottom: 7.5rem;
    }

    .build-header h1 {
        font-size: 32px;
    }

    .build-header .lead {
        font-size: 15px;
    }

    .builder {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .builder-steps {
        top: var(--nav-h);
        z-index: 50;
        min-width: 0;
        margin: 0 -1.5rem;
        padding: 0.75rem 1.5rem;
        border-width: 0 0 1px;
        border-radius: 0;
        background: var(--surface-lowest);
    }

    .category-list {
        flex-direction: row;
        gap: 0.4rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .category-list li {
        flex: none;
    }

    .category-item {
        display: inline-flex;
        gap: 0.35rem;
        min-height: 36px;
        padding: 0 0.8rem;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--surface);
        white-space: nowrap;
    }

    .category-item .category-dot,
    .category-item .category-detail {
        display: none;
    }

    .category-item.is-done .category-dot {
        display: inline-flex;
        width: auto;
        height: auto;
        border: none;
        background: none;
        color: var(--success);
    }

    .category-name {
        font-family: var(--font-mono);
        font-size: 12px;
    }

    .category-item.is-done .category-name {
        color: var(--success);
    }

    .category-item.is-active {
        background: var(--primary);
        border-color: var(--primary);
    }

    .category-item.is-active .category-name,
    .category-item.is-active.is-done .category-dot {
        color: var(--on-primary);
    }

    .steps-foot {
        display: none;
    }

    .builder-filters {
        padding: 1rem;
    }

    .builder-main {
        scroll-margin-top: calc(var(--nav-h) + 4.5rem);
    }

    .filters-foot .select-inline {
        margin-left: 0;
    }

    .step-head {
        flex-direction: column;
    }

    .step-head .search-field {
        width: 100%;
    }

    .step-head h2 {
        font-size: 24px;
    }

    .step-hint {
        font-size: 14px;
    }

    .part-card {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.75rem;
        padding: 0.75rem 0.9rem;
    }

    .part-card .part-thumb {
        display: none;
    }

    .part-body h3 {
        font-size: 15px;
    }

    .part-specs,
    .part-why {
        font-size: 11px;
    }

    .part-price {
        font-size: 15px;
    }

    .part-action .btn {
        min-width: 0;
        padding: 0.35rem 0.7rem;
        font-size: 11px;
    }

    .build-barra {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
        border-top: 1px solid var(--border);
        background: var(--surface-lowest);
    }

    .build-barra-status {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
        font-size: 11px;
    }

    #barra-diag {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 12px;
        font-weight: 600;
    }

    #barra-diag .ic {
        width: 15px;
        height: 15px;
    }

    #barra-diag.is-ok { color: var(--success); }
    #barra-diag.is-warn { color: var(--primary); }
    #barra-diag.is-err { color: var(--danger); }
    #barra-diag.is-neutral,
    #barra-diag.is-loading { color: var(--muted); }

    .build-barra-acoes {
        display: flex;
        gap: 0.6rem;
    }

    .build-barra-total,
    .build-barra-acoes .btn {
        flex: 1;
        height: 52px;
    }

    .build-barra-total {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 0.9rem;
        border: 1px solid var(--border);
        border-radius: var(--radius);
    }

    .build-barra-total small {
        font-size: 10px;
        color: var(--muted);
    }

    .build-barra-total strong {
        font-family: var(--font-head);
        font-size: 17px;
        line-height: 1.2;
    }

    .build-barra.is-escondida {
        display: none;
    }

    /* O botão de ajuda sobe para não cobrir a barra */
    body:has(.build-barra:not(.is-escondida)) .ajuda-flutuante {
        bottom: 8.5rem;
    }
    .page-header-split .btn {
        width: 100%;
        white-space: normal;
    }
}

/* ========================================================================== */
/* ========== ASSISTENTE (CHAT) ========== */
/* ========================================================================== */

.chat-column {
    max-width: 840px;
}

.chat-header {
    padding: 2.5rem 0 1.75rem;
}

.chat-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.chat-header-top .eyebrow {
    margin-bottom: 0;
}

.chat-header h1 {
    font-size: 40px;
    line-height: 48px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--muted);
    flex: none;
}

.status-dot.online { background: var(--success); }
.status-dot.offline { background: var(--danger); }

.chat-messages {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.message-welcome {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.quick-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 1.1rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s;
}

.quick-card:hover {
    border-color: var(--muted);
}

.quick-card .icon-tile {
    width: 34px;
    height: 34px;
    margin-bottom: 0.5rem;
}

.quick-card strong {
    font-family: var(--font-head);
    font-size: 19px;
    font-weight: 600;
}

.quick-card span:last-child {
    font-size: 12px;
    color: var(--muted);
}

.message {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.message-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.04em;
}

.message-meta strong {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.message-user {
    align-items: flex-end;
}

.message-user .message-meta strong {
    color: var(--primary-soft);
}

.message-ai .message-meta strong {
    color: var(--primary);
}

.message-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: var(--on-primary);
}

.message-avatar .ic {
    width: 13px;
    height: 13px;
    stroke-width: 2;
}

.message-content {
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    font-size: 14px;
    line-height: 1.75;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.message-user .message-content {
    max-width: 80%;
    background: var(--surface-3);
}

.message-ai .message-content {
    white-space: normal;
}

.message-error .message-content {
    border-color: var(--danger);
    color: var(--danger-soft);
}

/* Resposta da IA formatada (negrito, listas, títulos) */
.message-ai .message-content p {
    margin: 0 0 0.6rem;
}

.message-ai .message-content p:last-child {
    margin-bottom: 0;
}

.message-ai .message-content strong {
    color: var(--primary-soft);
}

.message-ai .message-content .msg-titulo {
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 600;
    margin-top: 0.9rem;
}

.message-ai .message-content ul {
    margin: 0 0 0.6rem;
    padding-left: 1.25rem;
}

.message-ai .message-content li {
    margin-bottom: 0.25rem;
}

.message-ai .message-content li::marker {
    color: var(--primary);
}

.message-ai .message-content hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0.75rem 0;
}

.message-ai .message-content code {
    background: var(--surface-lowest);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.05rem 0.3rem;
    color: var(--success);
    font-size: 0.92em;
}

.typing-dots {
    display: flex;
    gap: 0.3rem;
    padding: 0.3rem 0;
}

.typing-dots span {
    width: 6px;
    height: 6px;
    background: var(--primary);
    animation: typing 1.2s infinite ease-in-out;
}

.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing {
    0%, 60%, 100% { opacity: 0.25; }
    30% { opacity: 1; }
}

.chat-input-container {
    position: sticky;
    bottom: 0;
    margin-top: 1.5rem;
    padding: 1rem 0 1rem;
    background: var(--bg);
}

.chat-suggestions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.chat-suggestions .chip-btn .ic {
    color: var(--primary);
}

.chat-input-form {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    transition: border-color 0.15s;
}

.chat-input-form:focus-within {
    border-color: var(--primary);
}

.chat-input-icon {
    color: var(--muted);
    margin-bottom: 0.6rem;
}

.chat-input-form textarea {
    flex: 1;
    min-width: 0;
    max-height: 200px;
    padding: 0.55rem 0;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    resize: none;
    outline: none;
}

.chat-input-form textarea::placeholder {
    color: var(--muted);
}

.btn-send {
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.input-footer {
    margin-top: 0.5rem;
    text-align: center;
    font-size: 11px;
    color: var(--muted);
}

/* Chat bloqueado (sem login) */
.fid-chat-lock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-warm);
    border-radius: var(--radius);
    background: var(--warn-bg);
    font-size: 13px;
}

.fid-chat-lock strong {
    color: var(--primary);
}

.fid-chat-lock div {
    display: flex;
    gap: 0.5rem;
}

@media (max-width: 640px) {
    .message-welcome {
        grid-template-columns: 1fr;
    }

    .chat-header h1 {
        font-size: 32px;
        line-height: 40px;
    }

    .message-user .message-content {
        max-width: 92%;
    }

    .chat-input-icon {
        display: none;
    }
}

/* ========================================================================== */
/* ========== SOBRE ========== */
/* ========================================================================== */

.sobre-intro {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 14px;
}

.sobre-equipe {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    font-size: 13px;
}

.sobre-equipe > .ic {
    color: var(--primary);
}

.sobre-equipe p {
    flex: 1;
}

.sobre-bloco {
    margin-top: 3rem;
}

.layers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.layer-card {
    padding: 1.1rem;
}

.layer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.layer-top .ic {
    color: var(--muted);
}

.layer-card h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.layer-card p {
    font-size: 12px;
    color: var(--muted);
}

.formula {
    margin-top: 1rem;
}

.formula summary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 12px;
    cursor: pointer;
    list-style: none;
}

.formula summary::-webkit-details-marker {
    display: none;
}

.formula summary .ic {
    color: var(--primary);
    transition: transform 0.15s;
}

.formula[open] summary .ic {
    transform: rotate(180deg);
}

.formula-body {
    margin-top: 0.75rem;
    padding: 1.25rem;
    background: var(--surface-lowest);
}

.formula-line {
    display: block;
    margin-top: 0.6rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--primary);
    font-size: 13px;
    overflow-x: auto;
}

.formula-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-top: 1rem;
}

.formula-grid > div {
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12px;
}

.formula-grid span {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.formula-grid p,
.formula-note {
    color: var(--muted);
}

.formula-note {
    margin-top: 1rem;
    font-size: 11px;
}

/* Status dos serviços */
.status-topo-acoes {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.status-geral {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

.status-geral.online { color: var(--success); }
.status-geral.partial { color: var(--primary); }
.status-geral.offline { color: var(--danger); }

.table-panel {
    overflow: hidden;
}

.servicos {
    list-style: none;
}

.servicos-head,
.servico {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}

.servico:last-child {
    border-bottom: none;
}

.servicos-head {
    background: var(--surface-lowest);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.servico-nome {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.servico-nome .ic {
    color: var(--muted);
}

.servico-detalhe {
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.service-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}

.service-status-badge::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.service-status-badge.online { color: var(--success); }
.service-status-badge.offline { color: var(--danger); }
.service-status-badge.checking { color: var(--muted); }

.status-contagem {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-top: 0.9rem;
    font-size: 12px;
    color: var(--muted);
}

.status-contagem .ic {
    color: var(--primary);
}

.status-contagem strong {
    color: var(--text);
}

.sobre-avisos {
    margin-top: 3rem;
    padding: 1.5rem;
    font-size: 13px;
}

.sobre-avisos h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 17px;
    margin-bottom: 0.9rem;
}

.sobre-avisos h2 .ic {
    color: var(--primary);
}

.sobre-avisos p + p {
    margin-top: 0.6rem;
}

.sobre-avisos-foot {
    margin-top: 1.25rem !important;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--muted);
}

@media (max-width: 900px) {
    .layers-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .formula-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .layers-grid {
        grid-template-columns: 1fr;
    }

    .sobre-equipe {
        flex-direction: column;
        align-items: flex-start;
    }

    .servicos-head {
        display: none;
    }

    .servico {
        grid-template-columns: 1fr auto;
    }

    .servico-detalhe {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

/* ========================================================================== */
/* ========== COMPONENTES (BANCO DE DADOS) ========== */
/* ========================================================================== */

.db-chooser h2 {
    font-size: 24px;
    margin-bottom: 1.25rem;
}

.db-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-width: 820px;
}

.db-choice-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s;
}

.db-choice-card:hover,
.db-choice-card:focus-visible {
    border-color: var(--primary);
    outline: none;
}

.db-choice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 0.5rem;
    border-radius: var(--radius);
    background: var(--surface-3);
    color: var(--primary);
}

.db-choice-icon .ic {
    width: 24px;
    height: 24px;
}

.db-choice-card h3 {
    font-size: 20px;
}

.db-choice-card p {
    color: var(--muted);
    font-size: 12px;
}

.db-choice-count {
    margin-top: 0.6rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--border-warm);
    border-radius: var(--radius-sm);
    color: var(--primary);
    font-size: 11px;
    font-weight: 600;
}

.db-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.db-tabs {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.db-tabs .filter-btn-inline {
    padding: 0.4rem 0.8rem;
}

.db-card {
    padding: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.db-card h2 {
    font-size: 20px;
    margin-bottom: 1.25rem;
}

.db-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    margin-bottom: 1.25rem;
}

.db-filter {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1 1 180px;
    min-width: 0;
}

.db-filter-search {
    flex: 2 1 260px;
}

.db-filter-buttons,
.db-filter-clear {
    flex: 0 0 auto;
}

.db-filter label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.db-filter input,
.db-filter select,
.admin-head input,
.admin-table td input,
.admin-table td select,
.conta-form input {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-lowest);
    color: var(--text);
    font-size: 13px;
    transition: border-color 0.15s;
}

.db-filter input:focus,
.db-filter select:focus,
.admin-head input:focus,
.admin-table td input:focus,
.admin-table td select:focus,
.conta-form input:focus {
    outline: none;
    border-color: var(--primary);
}

.filter-buttons-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.db-filter .filter-btn-inline {
    padding: 0.45rem 0.7rem;
}

.db-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.db-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.db-table th {
    padding: 0.7rem 0.9rem;
    background: var(--surface-lowest);
    border-bottom: 1px solid var(--border);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-align: left;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.db-table th:hover {
    color: var(--primary);
}

.db-sort {
    margin-left: 0.25rem;
    color: var(--muted);
}

.db-table td {
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.db-table tbody tr:last-child td {
    border-bottom: none;
}

.db-table tbody tr:hover td {
    background: var(--surface-2);
}

.db-empty {
    text-align: center;
    color: var(--muted);
    padding: 2.5rem 1rem !important;
    white-space: normal !important;
}

.db-summary {
    margin-top: 0.9rem;
    font-size: 11px;
    color: var(--muted);
    text-align: right;
}

.db-brand,
.db-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.05rem 0.45rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
}

.db-brand { color: var(--text); }
.db-brand-amd { color: var(--danger-soft); border-color: #5c2a28; }
.db-brand-intel { color: #9ecaff; border-color: #24405f; }
.db-brand-nvidia { color: var(--success); border-color: #24502f; }

.db-badge-yes { color: var(--success); border-color: var(--success-strong); }
.db-badge-no { color: var(--danger); border-color: var(--danger); }

@media (max-width: 768px) {
    .db-choice-grid {
        grid-template-columns: 1fr;
    }

    .db-card {
        padding: 1rem;
    }

    .db-filter,
    .db-filter-search,
    .db-filter-buttons {
        flex: 1 1 100%;
    }
}

/* ========================================================================== */
/* ========== MINHA CONTA ========== */
/* ========================================================================== */

.tabs {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border);
}

.tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0;
    margin-bottom: -1px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--muted);
    font-size: 13px;
    cursor: pointer;
}

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

.tab.active {
    color: var(--text);
    font-weight: 600;
    border-bottom-color: var(--primary);
}

.tab-count {
    padding: 0 0.35rem;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    font-size: 11px;
}

.conta-builds-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.conta-builds-head h2 {
    font-size: 20px;
    font-weight: 600;
}

#builds-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

#builds-list > .conta-vazio,
#builds-list > .loading,
#builds-list > .empty-builds {
    grid-column: 1 / -1;
}

.build-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
}

.build-card-top {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.build-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.build-card-head h3 {
    font-size: 19px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.build-card .meter {
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.build-card-parts {
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-lowest);
    font-size: 12px;
}

.build-card-parts .label {
    display: block;
    margin-bottom: 0.3rem;
    text-transform: none;
    letter-spacing: 0.02em;
}

.build-card-foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: auto;
}

.empty-builds {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3.5rem 1.5rem;
    text-align: center;
}

.empty-builds .icon-tile {
    width: 56px;
    height: 56px;
    border: 1px solid var(--border);
    color: var(--muted);
}

.empty-builds h3 {
    font-size: 22px;
}

.empty-builds p {
    max-width: 52ch;
    color: var(--muted);
}

.empty-builds-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.75rem;
}

.conta-grid {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.conta-card {
    padding: 1.5rem;
}

.conta-card h3 {
    font-size: 17px;
    margin-bottom: 0.9rem;
}

.conta-card h3:not(:first-child) {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.senha-card {
    max-width: 460px;
    margin: 0 auto;
}

.conta-perfil {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.75rem 1.5rem;
    text-align: center;
}

.conta-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 0.5rem;
    border-radius: var(--radius-lg);
    background: var(--primary-soft);
    color: var(--on-primary-soft);
    font-family: var(--font-head);
    font-size: 26px;
    font-weight: 700;
}

.conta-perfil h2 {
    font-size: 20px;
}

.conta-email {
    color: var(--muted);
    font-size: 12px;
    word-break: break-all;
}

.conta-desde {
    margin-bottom: 0.75rem;
    font-size: 11px;
    color: var(--muted);
}

.conta-perfil .btn {
    width: 100%;
}

.conta-form {
    display: grid;
    gap: 0.45rem;
    max-width: 440px;
}

.conta-form label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.conta-form .btn {
    justify-self: start;
}

.conta-msg {
    min-height: 1.2rem;
    font-size: 12px;
}

.conta-msg.ok { color: var(--success); }
.conta-msg.erro { color: var(--danger); }

.conta-vazio {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--muted);
}

.conta-vazio code,
.fid-gate code {
    padding: 0.05rem 0.35rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-lowest);
}

@media (max-width: 860px) {
    .conta-grid {
        grid-template-columns: 1fr;
    }

    #builds-list {
        grid-template-columns: 1fr;
    }
}

/* ========================================================================== */
/* ========== ADMINISTRAÇÃO ========== */
/* ========================================================================== */

.admin-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.db-card .admin-head h2 {
    margin-bottom: 0;
}

.admin-head input {
    width: auto;
    min-width: 220px;
}

.admin-msg {
    margin-bottom: 1rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid;
    border-radius: var(--radius);
    font-size: 13px;
}

.admin-msg.ok {
    border-color: var(--success-strong);
    background: var(--ok-bg);
    color: var(--success);
}

.admin-msg.erro {
    border-color: var(--danger);
    background: var(--err-bg);
    color: var(--danger-soft);
}

.admin-msg.aviso {
    border-color: var(--primary);
    background: var(--warn-bg);
    color: var(--primary-soft);
}

.admin-table td input,
.admin-table td select {
    min-width: 80px;
    padding: 0.35rem 0.5rem;
    font-size: 12px;
}

.admin-table tr.admin-editing td {
    background: var(--warn-bg);
}

.admin-actions {
    display: flex;
    gap: 0.35rem;
}

.admin-actions .btn {
    padding: 0.3rem 0.6rem;
    font-size: 11px;
}

/* ========================================================================== */
/* ========== F-ID: JANELA DE LOGIN E AVISOS ========== */
/* ========================================================================== */

body.fid-lock {
    overflow: hidden;
}

.fid-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(12, 14, 16, 0.8);
}

.fid-modal {
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 1.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 2px solid var(--primary);
    border-radius: var(--radius-lg);
    animation: slideIn 0.2s ease;
}

.fid-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

.fid-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
}

.fid-title {
    margin-top: 0.15rem;
    font-size: 26px;
    font-weight: 700;
}

.fid-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-lowest);
    color: var(--muted);
    cursor: pointer;
    flex: none;
}

.fid-close:hover {
    color: var(--text);
    border-color: var(--muted);
}

.fid-reason {
    margin-bottom: 1rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border-warm);
    border-radius: var(--radius);
    background: var(--warn-bg);
    color: var(--primary-soft);
    font-size: 12px;
}

.fid-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
    margin-bottom: 1.25rem;
    padding: 0.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-lowest);
}

.fid-tab {
    padding: 0.5rem;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.fid-tab.active {
    background: var(--surface-3);
    color: var(--text);
}

.fid-field {
    margin-bottom: 1rem;
}

.fid-field label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.fid-field input {
    width: 100%;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-lowest);
    color: var(--text);
    font-size: 13px;
    transition: border-color 0.15s;
}

.fid-field input:focus {
    outline: none;
    border-color: var(--primary);
}

.fid-error {
    min-height: 1.2rem;
    margin-bottom: 0.5rem;
    font-size: 12px;
    color: var(--danger);
}

.fid-help {
    margin-bottom: 1rem;
    font-size: 13px;
    line-height: 1.6;
}

.fid-submit {
    width: 100%;
    padding: 0.8rem;
    border: none;
    border-radius: var(--radius);
    background: var(--primary);
    color: var(--on-primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background-color 0.15s, opacity 0.15s;
}

.fid-submit:hover:not(:disabled) {
    background: var(--primary-hover);
}

.fid-submit:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Esperando a verificação do Turnstile (não é carregamento) */
form:not([data-busy="1"]) .fid-submit:disabled {
    cursor: not-allowed;
}

/* Widget "confirme que você é humano" (Cloudflare Turnstile) */
.fid-captcha {
    display: flex;
    justify-content: center;
    min-height: 65px;
    margin: 0.25rem 0 0.5rem;
}

.fid-captcha > div {
    width: 100%;
}

.fid-captcha-msg {
    margin-bottom: 0.5rem;
    font-size: 12px;
    line-height: 1.5;
    color: var(--danger);
}

.fid-link {
    display: block;
    width: 100%;
    margin-top: 0.85rem;
    border: none;
    background: none;
    color: var(--primary-soft);
    font-size: 12px;
    cursor: pointer;
}

.fid-link:hover {
    text-decoration: underline;
}

.fid-link.fid-inline-link {
    display: inline;
    width: auto;
    padding: 0;
    margin: 0;
}

/* Aviso "entre para continuar" (conta, admin, nova senha) */
.fid-gate {
    max-width: 560px;
    margin: 0 auto;
    padding: 3rem 2rem;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    animation: slideIn 0.3s ease;
}

.fid-gate-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-3);
    color: var(--primary);
}

.fid-gate-icon .ic {
    width: 26px;
    height: 26px;
}

.fid-gate h2 {
    margin-bottom: 0.5rem;
    font-size: 24px;
}

.fid-gate p {
    margin-bottom: 1.5rem;
    color: var(--muted);
}

.fid-gate-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Confirmação de e-mail: círculo girando, depois tique (ou X) desenhado */
.confirm-page {
    padding-top: 3rem;
}

.confirm-card {
    min-height: 320px;
}

.confirm-mark {
    display: block;
    width: 88px;
    height: 88px;
    margin: 0 auto 1.25rem;
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.confirm-mark.is-loading .track {
    stroke: var(--border);
}

.confirm-mark.is-loading .arc {
    stroke: var(--primary);
    stroke-dasharray: 40 151;
    transform-origin: center;
    animation: spin 0.9s linear infinite;
}

.confirm-mark.is-ok { stroke: var(--success); }
.confirm-mark.is-erro { stroke: var(--danger); }
.confirm-mark.is-ok circle { fill: var(--ok-bg); }
.confirm-mark.is-erro circle { fill: var(--err-bg); }

.confirm-mark.is-ok circle,
.confirm-mark.is-erro circle {
    stroke-dasharray: 151;
    stroke-dashoffset: 151;
    animation: confirm-draw 0.6s ease-out forwards;
}

.confirm-mark.is-ok path,
.confirm-mark.is-erro path {
    stroke-dasharray: 46;
    stroke-dashoffset: 46;
    animation: confirm-draw 0.4s 0.5s ease-out forwards;
}

.confirm-mark.is-ok {
    animation: confirm-pop 0.35s 0.85s ease-out;
}

@keyframes confirm-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes confirm-pop {
    50% { transform: scale(1.08); }
}

.confirm-redirect {
    margin-top: 1.75rem;
}

.fid-gate .confirm-redirect p {
    margin-bottom: 0.5rem;
    font-size: 12px;
}

.confirm-progress {
    max-width: 240px;
    height: 4px;
    margin: 0 auto;
    background: var(--surface-3);
    overflow: hidden;
}

.confirm-progress span {
    display: block;
    height: 100%;
    background: var(--primary);
    transform-origin: left;
    animation: confirm-countdown var(--redirect-seconds, 15s) linear forwards;
}

@keyframes confirm-countdown {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

/* ========================================================================== */
/* ========== CARREGANDO E ANIMAÇÕES ========== */
/* ========================================================================== */

.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    color: var(--muted);
    font-size: 13px;
}

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

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

@keyframes slideIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .confirm-mark circle,
    .confirm-mark path {
        stroke-dashoffset: 0 !important;
    }
}

/* ========================================================================== */
/* ========== ENCONTRE SEU PC — QUESTIONÁRIO ========== */
/* ========================================================================== */

.quiz-container {
    max-width: 880px;
}

.quiz-progress-side {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.quiz-restart {
    padding: 0;
    border: 0;
    background: none;
    font-size: 12px;
    color: var(--text-soft);
    cursor: pointer;
}

.quiz-restart:hover {
    color: var(--primary);
}

.quiz-page {
    padding: 2.5rem 0 3rem;
}

.quiz-progress {
    margin-bottom: 2.5rem;
}

.quiz-progress-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-bottom: 0.6rem;
}

.quiz-step h1 {
    font-size: 40px;
    line-height: 48px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
    outline: none;
}

.quiz-step > .lead {
    margin-bottom: 2rem;
}

.quiz-step .eyebrow .ic {
    width: 16px;
    height: 16px;
}

/* Cartões de opção (checkbox/radio escondido, o cartão inteiro é clicável) */
.option-card input,
.option-row input,
.seg input,
.check-row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.option-grid {
    display: grid;
    gap: 1rem;
}

.option-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.option-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 200px;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

.option-card .icon-tile {
    margin-bottom: auto;
    color: var(--text-soft);
}

.option-card strong {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    font-family: var(--font-head);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.2;
}

.option-card > span:last-child,
.option-row > span:last-child > span:last-child {
    color: var(--muted);
    font-size: 13px;
}

.option-card-wide {
    grid-column: span 2;
}

.option-card:hover,
.option-row:hover {
    border-color: var(--muted);
}

.option-card:focus-within,
.option-row:focus-within,
.seg label:focus-within,
.check-row:focus-within {
    outline: 1px solid var(--primary);
    outline-offset: 2px;
}

.option-card.is-checked,
.option-row.is-checked {
    border-color: var(--primary);
    background: var(--surface-2);
}

.option-card.is-checked .icon-tile {
    color: var(--primary);
}

.option-card.is-checked > span:last-child {
    color: var(--text-soft);
}

.option-card::after,
.option-row:not(.option-radio)::after {
    content: '';
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 20px;
    height: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.option-card.is-checked::after,
.option-row.is-checked:not(.option-radio)::after {
    background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121416' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 14px no-repeat;
    border-color: var(--primary);
}

.option-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.option-row {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.4rem 3.5rem 1.4rem 1.4rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}

.option-row .icon-tile {
    width: 48px;
    height: 48px;
    color: var(--text-soft);
}

.option-row.is-checked .icon-tile {
    color: var(--primary);
}

.option-row > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.option-row strong {
    font-family: var(--font-head);
    font-size: 21px;
    font-weight: 600;
}

.option-row strong .label {
    margin-left: 0.35rem;
    vertical-align: middle;
}

.option-radio {
    padding-right: 1.4rem;
}

.option-radio.is-checked {
    box-shadow: inset 3px 0 0 var(--primary);
}

.radio-dot {
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 0.25rem;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface-3);
}

.option-radio.is-checked .radio-dot {
    background: radial-gradient(circle, var(--primary) 0 5px, var(--surface-3) 6px);
    border-color: var(--primary);
}

.option-radio .chip {
    align-self: flex-start;
}

.quiz-note {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--surface-lowest);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.quiz-note > .ic {
    color: var(--success);
    width: 22px;
    height: 22px;
}

.quiz-note > div {
    flex: 1;
}

.quiz-auto {
    display: flex;
    margin: 1.75rem auto 0;
}

/* Títulos de jogos */
.titles-field {
    margin-top: 2rem;
}

.titles-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.6rem;
}

.titles-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.titles-box:focus-within {
    border-color: var(--primary);
}

#titulos-chips {
    display: contents;
}

.title-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.4rem 0.3rem 0.6rem;
    background: var(--surface-3);
    border-radius: var(--radius);
    font-size: 13px;
}

.title-chip .dot {
    background: var(--primary);
    width: 6px;
    height: 6px;
}

.title-chip button {
    display: inline-flex;
    padding: 0.1rem;
    border: none;
    background: none;
    color: var(--muted);
    cursor: pointer;
}

.titles-box input {
    flex: 1;
    min-width: 200px;
    padding: 0.4rem;
    border: none;
    background: none;
    outline: none;
}

.hint {
    margin-top: 0.5rem;
    font-size: 11px;
    color: var(--muted);
}

.hint.center {
    text-align: center;
}

/* Orçamento */
.budget {
    padding: 2rem;
}

.budget-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.75rem 1rem;
    margin-bottom: 2rem;
    background: var(--surface-2);
    border-radius: var(--radius-lg);
}

.budget-value {
    font-family: var(--font-head);
    font-size: 56px;
    font-weight: 700;
    line-height: 1;
    border-right: 5px solid var(--primary);
    padding-right: 0.5rem;
}

.budget-value small {
    font-size: 28px;
    color: var(--muted);
    margin-right: 0.25rem;
}

.budget-fine {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

input[type="range"] {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(90deg, var(--primary) var(--fill, 50%), var(--surface-3) var(--fill, 50%));
    border-radius: var(--radius-sm);
    cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary);
    border: 3px solid var(--bg);
}

input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary);
    border: 3px solid var(--bg);
}

.budget-scale {
    display: flex;
    justify-content: space-between;
    margin: 0.6rem 0 2rem;
    font-size: 11px;
    color: var(--muted);
}

.budget-scale span {
    display: flex;
    flex-direction: column;
}

.budget-scale span:last-child {
    text-align: right;
}

.budget-scale strong {
    color: var(--text);
    font-size: 12px;
}

.budget-shortcuts {
    margin: 0.6rem 0 1.75rem;
}

.budget-shortcuts .chip-btn {
    padding: 0.5rem 0.9rem;
    font-size: 13px;
}

.check-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--surface-2);
    border-radius: var(--radius-lg);
    cursor: pointer;
}

.check-row > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.check-row > span:last-child > span {
    font-size: 12px;
    color: var(--muted);
}

.check-box {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: transparent;
}

.check-row input:checked + .check-box {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

.check-box .ic {
    width: 16px;
    height: 16px;
    stroke-width: 3;
}

/* Preferências */
.pref-block {
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}

.pref-block legend {
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    font-family: var(--font-head);
    font-size: 21px;
    font-weight: 500;
}

.pref-tag {
    margin-left: auto;
}

.pref-block .hint {
    clear: both;
}

.seg {
    clear: both;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.seg label span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-lowest);
    text-align: center;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s;
}

.seg label:hover span {
    border-color: var(--muted);
}

.seg input:checked + span {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
    font-weight: 600;
}

/* Revisão */
.review-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.review {
    padding: 1.75rem;
}

.review-sentence {
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.75rem;
    background: var(--surface-lowest);
    border-radius: var(--radius-lg);
}

.review-sentence p {
    margin-top: 0.75rem;
    font-size: 18px;
    line-height: 1.8;
}

.review-link {
    border: none;
    border-bottom: 1px dashed var(--muted);
    background: none;
    color: var(--text);
    font-weight: 700;
    cursor: pointer;
}

.review-link:hover {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.review-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.75rem 0 1.75rem;
}

.review-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    background: var(--surface-2);
    border-radius: var(--radius);
    font-size: 14px;
}

.review-list .ic {
    color: var(--muted);
}

.review-edit {
    margin-left: auto;
    border: none;
    background: none;
    color: var(--muted);
    cursor: pointer;
}

.review-edit:hover {
    color: var(--primary);
}

.btn-xl {
    padding: 1.1rem;
    font-family: var(--font-head);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0;
}

.quiz-reset {
    margin-top: 1.5rem;
}

.quiz-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
}

.quiz-error {
    flex: 1;
    text-align: right;
    font-size: 13px;
    color: var(--danger);
}

@media (max-width: 760px) {
    .option-grid-3 {
        grid-template-columns: 1fr 1fr;
    }

    .option-card {
        min-height: 170px;
    }

    .seg {
        grid-template-columns: 1fr 1fr;
    }

    .quiz-step h1 {
        font-size: 30px;
        line-height: 38px;
    }

    .budget {
        padding: 1.25rem;
    }

    .budget-value {
        font-size: 44px;
    }
}

@media (max-width: 480px) {
    .option-grid-3 {
        grid-template-columns: 1fr;
    }

    .option-card-wide {
        grid-column: auto;
    }

    .option-card {
        min-height: 0;
    }

    .option-row {
        padding: 1rem 2.75rem 1rem 1rem;
        gap: 0.9rem;
    }

    .option-row .icon-tile {
        width: 40px;
        height: 40px;
    }

    .pref-tag {
        display: none;
    }
}

/* ========================================================================== */
/* ========== ENCONTRE SEU PC — RESULTADOS ========== */
/* ========================================================================== */

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1.25rem 0 1rem;
    font-size: 12px;
    color: var(--muted);
}

.breadcrumb a {
    color: var(--text-soft);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--primary);
}

.breadcrumb [aria-current] {
    color: var(--text);
}

.alert {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--primary);
    border-radius: var(--radius-lg);
    font-size: 13px;
}

.alert > .ic {
    color: var(--primary);
    width: 22px;
    height: 22px;
}

.alert p {
    flex: 1;
}

.alert-err {
    border-color: var(--danger);
}

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

.results-header {
    padding-top: 2rem;
}

.pc-grid.is-loading {
    opacity: 0.45;
    pointer-events: none;
}

.kit-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.tag-solid {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

.kit-price {
    font-family: var(--font-head);
    font-size: 28px;
    font-weight: 700;
}

.kit-price small {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    color: var(--muted);
}

.meter-bar-accent span {
    background: var(--primary);
}

.adjust {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-top: 1.5rem;
    padding: 1.5rem 1.75rem;
}

.adjust-main {
    flex: 1;
}

.adjust h2 {
    font-size: 22px;
    margin-bottom: 0.4rem;
}

.adjust-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.adjust-head p {
    font-size: 12px;
    color: var(--muted);
}

.adjust-value {
    font-family: var(--font-head);
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
}

.adjust-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 0.6rem;
    font-size: 11px;
    color: var(--muted);
}

.results-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
    padding: 3rem 1.5rem;
    text-align: center;
}

.results-empty .icon-tile {
    width: 56px;
    height: 56px;
}

.results-empty h2 {
    font-size: 24px;
}

.results-empty p {
    max-width: 60ch;
}

.price-status {
    list-style: none;
    width: 100%;
    max-width: 420px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12px;
}

.price-status li {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0.8rem;
    border-bottom: 1px solid var(--border);
}

.price-status li:last-child {
    border-bottom: none;
}

@media (max-width: 1000px) {
    .adjust {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
}

/* ========================================================================== */
/* ========== DETALHES DO PC ========== */
/* ========================================================================== */

.pc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    flex-wrap: wrap;
    padding: 1rem 0 2rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.75rem;
}

.pc-header > div:first-child {
    flex: 1 1 460px;
    min-width: 0;
}

.pc-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.pc-header h1 {
    font-size: 36px;
    line-height: 44px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.pc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-top: 0.5rem;
    font-size: 13px;
    color: var(--muted);
}

.pc-meta strong {
    color: var(--text);
}

.pc-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    text-align: right;
}

.pc-total strong {
    font-family: var(--font-head);
    font-size: 36px;
}

.pc-total .muted {
    font-size: 11px;
    margin-top: -0.4rem;
}

.pc-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
}

.pc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    transition: opacity 0.15s;
}

.pc-main,
.pc-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.pc-why {
    padding: 1.25rem 1.5rem;
}

.pc-why-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.pc-why h2,
.pc-ask h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 19px;
}

.pc-why h2 .ic,
.pc-ask h2 .ic {
    color: var(--primary);
}

.pc-why p {
    font-size: 13px;
    line-height: 1.8;
}

.pc-parts-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
    font-size: 12px;
}

.pc-parts-head h2 {
    font-size: 20px;
}

.pc-parts {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.part-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
}

.part-row.is-open {
    border-color: var(--primary);
}

.part-row .part-thumb {
    width: 56px;
    height: 56px;
    color: var(--primary);
}

.part-row-body p:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem;
    font-size: 15px;
}

.part-row-body .muted {
    margin-top: 0.25rem;
    font-size: 12px;
}

.part-row-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.part-row-price {
    font-family: var(--font-head);
    font-size: 19px;
}

.alts {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.alts-head {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
}

.alt {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-lowest);
    font-size: 13px;
}

.alt p:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.alt .muted {
    font-size: 11px;
    margin-top: 0.2rem;
}

.alt-delta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 11px;
    white-space: nowrap;
}

.alt-price {
    font-family: var(--font-head);
    white-space: nowrap;
}

.pc-sum {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
}

.pc-sum > div {
    flex: 1;
}

.pc-sum .muted {
    font-size: 12px;
}

.pc-sum-total {
    font-family: var(--font-head);
    font-size: 24px;
    font-weight: 700;
    white-space: nowrap;
}

.pc-diag,
.pc-caps,
.pc-analysis,
.pc-ask {
    padding: 1.25rem;
}

.pc-diag-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.pc-diag-head h2 {
    font-size: 22px;
}

.pc-score {
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--muted);
}

.pc-score strong {
    font-family: var(--font-head);
    font-size: 36px;
    color: var(--primary);
}

.score-row {
    margin-bottom: 0.75rem;
}

.score-row .meter-head {
    font-size: 11px;
    font-weight: 600;
}

.tdp-box {
    margin-top: 1rem;
    padding: 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-lowest);
    font-size: 12px;
}

.tdp-head {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 11px;
    font-weight: 600;
}

.tdp-head .ic {
    color: var(--success);
}

.tdp-segs {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 3px;
    margin-bottom: 0.6rem;
}

.tdp-segs span {
    height: 8px;
    background: var(--surface-3);
}

.tdp-segs .ok { background: var(--success-strong); }
.tdp-segs .warn { background: var(--primary); }
.tdp-segs .err { background: var(--danger); }

.pc-caps-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.pc-caps h2,
.pc-analysis h2 {
    font-size: 19px;
}

.pc-caps ul {
    list-style: none;
}

.pc-caps li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 0;
    font-size: 12px;
}

.cap-level {
    font-size: 11px;
    color: var(--muted);
}

.cap-bar {
    display: flex;
    gap: 3px;
}

.cap-bar i {
    width: 12px;
    height: 5px;
    background: var(--surface-3);
}

.cap-bar i.on {
    background: var(--primary);
}

.pc-analysis h3 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 1rem 0 0.5rem;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pc-analysis ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-size: 12px;
}

.pc-analysis li {
    display: flex;
    gap: 0.5rem;
}

.pc-analysis li .ic {
    margin-top: 0.2rem;
}

.pc-ask-form {
    display: flex;
    gap: 0.5rem;
    margin: 0.9rem 0 0.75rem;
}

.pc-ask-form input {
    flex: 1;
    min-width: 0;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-lowest);
    font-size: 12px;
}

.pc-ask-form input:focus {
    outline: none;
    border-color: var(--primary);
}

@media (max-width: 1000px) {
    .pc-grid {
        grid-template-columns: 1fr;
    }

    .pc-total {
        align-items: flex-start;
        text-align: left;
    }

    .pc-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .pc-header h1 {
        font-size: 28px;
        line-height: 36px;
    }

    .part-row {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .part-row .part-thumb {
        width: 44px;
        height: 44px;
    }

    .part-row-side {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .alt {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .alt-price {
        display: none;
    }

    .alt .btn {
        grid-column: 1 / -1;
    }
}

/* ========================================================================== */
/* ========== COMPARAR PCs ========== */
/* ========================================================================== */

.compare-shortcut {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 90;
}

.tag-ok {
    color: var(--success);
    border-color: var(--success-strong);
    background: transparent;
}

.cmp-controls {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.cmp-modos {
    margin-bottom: 1.25rem;
}

.cmp-cats {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 100%;
}

.cmp-cats[hidden] {
    display: none;
}

.compare-page .notice {
    margin-bottom: 1rem;
}

.cmp-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    flex: 1;
}

.cmp-slot {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    flex: 0 1 300px;
}

.cmp-slot-row {
    display: flex;
    gap: 0.25rem;
}

.cmp-slot select {
    width: 100%;
    min-width: 0;
    padding: 0.5rem;
}

.cmp-slot.is-ref select {
    border-color: var(--primary);
}

.cmp-diff {
    align-items: flex-start;
}

.cmp-diff > span:last-child {
    display: flex;
    flex-direction: column;
    font-size: 12px;
}

.cmp-diff small {
    color: var(--muted);
    font-size: 11px;
}

#cmp-root {
    transition: opacity 0.15s;
}

#cmp-root.is-loading {
    opacity: 0.45;
}

.cmp-table-wrap {
    overflow-x: auto;
}

.cmp-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    min-width: 760px;
    font-size: 12px;
}

.cmp-table th,
.cmp-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.cmp-table thead th {
    padding: 1rem;
    border-right: 1px solid var(--border);
    font-weight: 400;
}

.cmp-table thead th:last-child {
    border-right: none;
}

.cmp-table .cmp-dims {
    width: 24%;
}

.cmp-dims strong {
    display: block;
    margin: 0.3rem 0;
    font-family: var(--font-head);
    font-size: 17px;
}

.cmp-dims small,
.cmp-table td small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    margin-top: 0.15rem;
}

.cmp-table tbody th {
    font-weight: 400;
    color: var(--muted);
    white-space: nowrap;
}

.cmp-table tbody th .ic {
    margin-right: 0.35rem;
}

.cmp-table tbody tr:hover td,
.cmp-table tbody tr:hover th {
    background: var(--surface-2);
}

.cmp-best {
    display: block;
    margin-top: 0.2rem;
    color: var(--success);
    font-size: 11px;
}

.cmp-head {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-lowest);
}

.cmp-head.is-ref {
    border-color: var(--primary);
}

.cmp-head.is-missing {
    color: var(--danger);
}

.cmp-title {
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 600;
}

.cmp-head .kit-price {
    font-size: 24px;
}

.cmp-delta {
    margin-top: -0.4rem;
    font-size: 11px;
    color: var(--primary);
}

.cmp-score-row td p {
    margin-bottom: 0.4rem;
}

.cmp-score-row strong {
    font-family: var(--font-head);
    font-size: 15px;
}

.worth-box {
    margin-top: 1.5rem;
    padding: 1.5rem;
}

.worth-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.worth-head h2 {
    font-size: 22px;
    margin-top: 0.3rem;
}

.verdict {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border: 1px solid;
    border-radius: var(--radius);
    font-family: var(--font-head);
    font-size: 19px;
    font-weight: 600;
}

.verdict.is-yes { color: var(--success); border-color: var(--success-strong); }
.verdict.is-no { color: var(--warning); border-color: var(--primary); }

.worth-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.worth-points > div {
    padding: 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-lowest);
    font-size: 12px;
}

.worth-points .label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.4rem;
}

.worth-foot {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12px;
    color: var(--muted);
}

.worth-foot .tag {
    margin-left: auto;
}

.cmp-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
}

.cmp-actions .link-arrow {
    margin-left: auto;
    color: var(--primary);
}

.cmp-empty {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding: 1.5rem;
}

.cmp-empty > div {
    flex: 1;
    min-width: 240px;
}

.cmp-empty h2 {
    font-size: 19px;
}

@media (max-width: 760px) {
    .worth-points {
        grid-template-columns: 1fr;
    }
}

@media print {
    .navbar, .footer, .cmp-controls, .cmp-actions, .compare-shortcut, .menu-toggle {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    .panel, .cmp-head {
        background: #fff !important;
        border-color: #999 !important;
    }

    .cmp-table, .cmp-table th, .cmp-table td, .cmp-title, .kit-price, h1, h2 {
        color: #000 !important;
    }
}

/* ========================================================================== */
/* ========== APRENDA ========== */
/* ========================================================================== */

.breadcrumb-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.aprenda-tabs {
    margin: 0.5rem 0 0;
}

.aprenda-tabs .tab {
    text-decoration: none;
}

.title-upper {
    text-transform: uppercase;
}

.aprenda-search {
    margin-bottom: 0.75rem;
}

.aprenda-search input {
    padding: 0.9rem 0;
    font-size: 14px;
}

.aprenda-atalhos {
    align-items: center;
    margin-bottom: 2rem;
}

.aprenda-atalhos .chip-btn {
    text-decoration: none;
}

.topics-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.topic-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.5rem;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s;
}

a.topic-card:hover {
    border-color: var(--muted);
}

.topic-card.is-featured {
    border-color: var(--primary);
}

.topic-flag {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.topic-card .icon-tile {
    margin-bottom: 0.75rem;
}

.topic-card h2 {
    font-size: 21px;
    font-weight: 600;
}

.topic-card p {
    flex: 1;
    font-size: 12px;
    color: var(--text-soft);
}

.topic-meta {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--muted);
}

.topic-card .path-link {
    margin-top: 0;
    color: var(--text);
}

.topic-card.is-featured .path-link {
    color: var(--primary);
}

.aprenda-cta,
.guide-ai {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
    padding: 1.75rem;
}

.aprenda-cta > div,
.guide-ai > div:first-child {
    flex: 1;
    min-width: 260px;
}

.aprenda-cta h2,
.guide-ai h2 {
    font-size: 22px;
    margin: 0.3rem 0;
}

.aprenda-cta .label,
.guide-ai .label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

/* Glossário */
.glossary {
    padding: 0.5rem 1.25rem;
}

.glossary-item {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border);
    scroll-margin-top: calc(var(--nav-h) + 1rem);
}

.glossary-item:last-child {
    border-bottom: none;
}

.glossary-item:target {
    background: var(--warn-bg);
}

.glossary dt {
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 600;
    color: var(--primary);
}

.glossary dd {
    font-size: 13px;
}

/* Guia de um tema */
.guide-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1.25rem;
    align-items: start;
    margin-top: 0.5rem;
}

.guide {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.guide-hero {
    padding: 1.5rem;
}

.guide-hero h1 {
    font-size: 34px;
    line-height: 42px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.4rem;
}

.guide-hero .lead-accent {
    font-size: 18px;
}

.guide-meta {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.75rem;
    font-size: 11px;
    color: var(--muted);
}

.guide-section {
    padding: 1.5rem;
}

.guide-section h2,
.guide-section-head h2 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 19px;
    margin-bottom: 1rem;
}

.guide-section h2::before {
    content: '';
    width: 4px;
    height: 18px;
    background: var(--primary);
}

.guide-section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.guide-section > p {
    font-size: 13px;
    line-height: 1.8;
}

.guide-analogy {
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    border-left: 3px solid var(--primary);
    background: var(--surface-lowest);
    font-size: 12px;
}

.guide-analogy .label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.3rem;
}

.guide-steps {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.guide-steps li {
    display: flex;
    gap: 1rem;
    padding: 0.9rem;
    background: var(--surface-2);
    border-radius: var(--radius);
}

.guide-steps .step-num {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    background: var(--surface-3);
    font-size: 16px;
}

.guide-steps h3,
.guide-mistake h3,
.guide-related h3 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 16px;
    margin-bottom: 0.25rem;
}

.guide-steps p,
.guide-mistake p,
.guide-related p {
    font-size: 12px;
    color: var(--text-soft);
}

.guide-table td {
    white-space: normal;
    vertical-align: top;
}

.guide-table tr.is-highlight td {
    background: var(--ok-bg);
}

.guide-table tr.is-highlight td:first-child strong {
    color: var(--success);
}

.guide-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.guide-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.guide-mistake,
.guide-related {
    padding: 0.9rem;
    background: var(--surface-2);
    border-radius: var(--radius);
}

.guide-mistake h3 .ic {
    color: var(--primary);
}

.guide-related {
    color: inherit;
    text-decoration: none;
    border: 1px solid transparent;
}

.guide-related:hover {
    border-color: var(--muted);
}

.guide-related h3 .ic {
    color: var(--primary);
}

.faq-item {
    border-bottom: 1px solid var(--border);
}

.faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 0;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary .ic {
    color: var(--primary);
    transition: transform 0.15s;
}

.faq-item[open] summary .ic {
    transform: rotate(180deg);
}

.faq-item p {
    padding-bottom: 0.9rem;
    font-size: 13px;
    color: var(--text-soft);
}

.guide-ai {
    margin-top: 0;
}

.guide-ai-q {
    width: 100%;
    align-items: center;
}

.guide-side {
    position: sticky;
    top: calc(var(--nav-h) + 1rem);
}

.guide-toc {
    padding: 1.25rem;
}

.guide-toc-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.guide-toc ol {
    list-style: none;
    counter-reset: toc;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 1rem;
}

.guide-toc li {
    counter-increment: toc;
}

.guide-toc ol a {
    display: block;
    padding: 0.4rem 0.5rem;
    border-radius: var(--radius);
    color: var(--text-soft);
    font-size: 12px;
    text-decoration: none;
}

.guide-toc ol a::before {
    content: counter(toc) '. ';
    color: var(--muted);
}

.guide-toc ol a:hover {
    background: var(--surface-3);
    color: var(--text);
}

.guide-rule {
    padding: 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-lowest);
    font-size: 12px;
}

.guide-rule .label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.3rem;
}

.guide-catalog {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: inherit;
    text-decoration: none;
}

.guide-catalog > span {
    display: flex;
    flex-direction: column;
}

.guide-catalog strong {
    font-size: 12px;
}

.guide-catalog .ic {
    color: var(--primary);
}

.guide-catalog:hover {
    border-color: var(--primary);
}

/* Conheça as peças */
.pecas-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.pecas-filtros {
    padding: 1.1rem;
    position: sticky;
    top: calc(var(--nav-h) + 1rem);
}

.pecas-filtros-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.pecas-filtros-head .label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.pecas-filtros fieldset {
    border: none;
    border-top: 1px solid var(--border);
    padding: 0.9rem 0;
}

.pecas-filtros legend {
    float: left;
    width: 100%;
    margin-bottom: 0.6rem;
}

.pecas-filtros fieldset > *:not(legend) {
    clear: both;
}

.filter-list {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.filter-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: none;
    color: var(--text-soft);
    font-size: 12px;
    text-align: left;
    cursor: pointer;
}

.filter-item span:first-child {
    display: flex;
    flex-direction: column;
}

.filter-item small {
    font-size: 10px;
    color: var(--muted);
}

.filter-item:hover {
    background: var(--surface-3);
}

.filter-item.active {
    border-color: var(--border-warm);
    background: var(--warn-bg);
    color: var(--primary);
    font-weight: 600;
}

.check-row-sm {
    margin-top: 0.75rem;
    padding: 0.5rem 0.6rem;
    font-size: 12px;
}

.check-row-sm .check-box {
    width: 18px;
    height: 18px;
}

.pecas-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
}

.pecas-toolbar .search-field {
    flex: 1;
    min-width: 220px;
}

.pecas-info {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0.75rem 0;
    font-size: 11px;
    color: var(--muted);
}

.pecas-lista {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.peca-card {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1rem;
}

.peca-thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background:
        linear-gradient(var(--border) 1px, transparent 1px) 0 0 / 16px 16px,
        linear-gradient(90deg, var(--border) 1px, transparent 1px) 0 0 / 16px 16px,
        var(--surface-lowest);
    color: var(--primary);
}

.peca-thumb .tag {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
}

.peca-thumb .ic {
    width: 44px;
    height: 44px;
    stroke-width: 1.2;
}

.peca-body {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.peca-top {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.peca-body h3 {
    font-size: 19px;
}

.peca-specs {
    font-size: 11px;
}

.peca-uso {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-lowest);
    font-size: 12px;
}

.peca-foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.peca-foot > div:first-child {
    display: flex;
    flex-direction: column;
}

.peca-foot strong {
    font-family: var(--font-head);
    font-size: 22px;
}

.peca-acoes {
    display: flex;
    gap: 0.4rem;
}

.pecas-paginas {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1rem;
    padding: 0.75rem;
}

@media (max-width: 1000px) {
    .topics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .guide-layout,
    .pecas-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .guide-side {
        position: static;
        order: -1;
    }

    .pecas-filtros {
        position: static;
    }

    .guide-grid-3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .topics-grid,
    .guide-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .glossary-item {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.25rem;
    }

    .guide-hero h1 {
        font-size: 26px;
        line-height: 34px;
    }

    .peca-card {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 0.9rem;
    }

    .peca-thumb .tag {
        display: none;
    }

    .peca-thumb .ic {
        width: 30px;
        height: 30px;
    }
}

/* ========================================================================== */
/* ========== MELHORE SEU PC ========== */
/* ========================================================================== */

.upgrade-page {
    padding: 2.5rem 0 3rem;
}

.up-step h1 {
    font-size: 40px;
    line-height: 48px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}

.up-step .lead-accent {
    font-size: 20px;
    max-width: 48ch;
}

.up-help-link {
    margin: 0.75rem 0 1.5rem;
}

.up-form {
    padding: 1.75rem;
}

.up-form .notice {
    border-left: 3px solid var(--primary);
}

.up-field {
    margin-bottom: 1.1rem;
}

.up-field-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.4rem;
}

.up-field-head label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
}

.up-field-head label .ic {
    color: var(--primary);
}

.up-field-row {
    display: flex;
    gap: 0.6rem;
}

.up-input {
    position: relative;
    flex: 1;
}

.up-input input {
    width: 100%;
    padding: 0.7rem 2.5rem 0.7rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-lowest);
    color: var(--text);
    font-size: 13px;
}

.up-input input:focus {
    outline: none;
    border-color: var(--primary);
}

.up-input input:disabled {
    opacity: 0.4;
}

.up-ok {
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--success);
    opacity: 0;
}

.up-input.is-ok .up-ok {
    opacity: 1;
}

.up-naosei {
    flex: none;
    margin-top: 0;
}

.up-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.up-nav .btn-xl {
    font-size: 19px;
}

.up-setup {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 12px;
}

.up-setup .link-arrow {
    margin-left: auto;
}

.option-row > span:last-child > .label {
    margin-top: 0.2rem;
}

.up-budget {
    margin-top: 1.5rem;
    padding: 1.5rem;
}

.up-budget-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.up-budget-head h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 19px;
}

.up-budget-head h2 .ic {
    color: var(--primary);
}

.up-budget-head .muted {
    font-size: 12px;
}

.up-budget-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-lowest);
}

.up-budget-value output {
    font-family: var(--font-head);
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
}

.up-budget-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.9rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius);
    background: var(--surface-lowest);
    font-size: 12px;
}

.up-budget-note .ic {
    color: var(--success);
}

/* Resultado */
.up-result-head {
    padding-top: 0.5rem;
}

.up-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.up-stat {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.1rem;
}

.up-stat strong {
    font-family: var(--font-head);
    font-size: 19px;
}

.up-stat small {
    font-size: 11px;
}

.meter-bar-soft span {
    background: var(--primary-soft);
}

.up-alert {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 1.25rem;
    border: 2px solid var(--primary);
}

.up-alert-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    color: var(--primary);
}

.up-alert h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 18px;
    margin-bottom: 0.3rem;
}

.up-alert p {
    font-size: 12px;
}

.up-section {
    margin-bottom: 1.25rem;
    padding: 1.5rem;
}

.up-section-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.up-section-head h2 {
    font-size: 22px;
}

.up-section > p {
    font-size: 13px;
}

.up-section.is-keep {
    background: var(--surface);
}

.up-gain {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
    padding: 0.9rem 1rem;
    border: 1px solid var(--success-strong);
    border-radius: var(--radius);
    background: var(--ok-bg);
    font-size: 13px;
}

.up-gain > .ic {
    color: var(--success);
    width: 24px;
    height: 24px;
}

.up-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.up-option {
    display: flex;
    gap: 0.9rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-lowest);
}

.up-option .part-thumb {
    flex: none;
    width: 56px;
    height: 56px;
    color: var(--primary);
}

.up-option-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.up-option h3 {
    font-size: 18px;
}

.up-option .muted {
    font-size: 11px;
}

.up-option-compat {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 11px;
}

.up-option-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: auto;
    padding-top: 0.4rem;
}

.up-option-foot strong {
    font-family: var(--font-head);
    font-size: 22px;
}

.up-option-foot span {
    font-size: 12px;
}

.up-total {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.25rem;
}

.up-total > div {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.up-total strong {
    font-family: var(--font-head);
    font-size: 26px;
}

.up-total-status {
    font-size: 12px;
    text-align: right;
}

.up-total-status span {
    color: var(--muted);
}

.up-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.up-actions .link-arrow:last-child {
    margin-left: auto;
}

/* Ajuda: como descobrir as peças */
.up-help-modal {
    max-width: 640px;
}

.up-help-step {
    padding: 1rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    font-size: 13px;
}

.up-help-step h3 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-size: 16px;
    margin-bottom: 0.5rem;
}

.up-help-step h3 .label {
    margin-left: auto;
}

.up-help-step .step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: 0;
    background: var(--surface-3);
    font-size: 14px;
}

.up-help-step ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem;
    background: var(--surface-lowest);
    border-radius: var(--radius);
}

kbd {
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    color: var(--primary-soft);
    font-family: var(--font-mono);
    font-size: 12px;
}

.up-help-step code {
    padding: 0.05rem 0.35rem;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    color: var(--primary-soft);
}

@media (max-width: 860px) {
    .up-stats,
    .up-options {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .up-step h1 {
        font-size: 30px;
        line-height: 38px;
    }

    .up-field-row {
        flex-direction: column;
        gap: 0.4rem;
    }

    .up-form {
        padding: 1.1rem;
    }

    .up-total-status {
        text-align: left;
    }
}

@media print {
    .up-actions, .up-help, .navbar, .footer {
        display: none !important;
    }
}

/* ========================================================================== */
/* ========== ASSISTENTE: PAINEL LATERAL E EXPLICAÇÕES ========== */
/* ========================================================================== */

.ai-panel-wrap {
    position: fixed;
    inset: 0;
    z-index: 900;
}

.ai-panel-fundo {
    position: absolute;
    inset: 0;
    background: rgba(12, 14, 16, 0.75);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.ai-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(100vw, 480px);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    background: var(--surface-lowest);
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform 0.25s ease;
}

.ai-panel-wrap.is-open .ai-panel-fundo { opacity: 1; }
.ai-panel-wrap.is-open .ai-panel { transform: translateX(0); }

.ai-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.ai-panel-head h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 22px;
}

.ai-panel-head .dot {
    background: var(--primary);
}

.ai-panel-sub {
    margin-top: 0.3rem;
    font-size: 13px;
    color: var(--text-soft);
}

.ai-panel-msgs {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-right: 0.25rem;
}

.ai-session {
    text-align: center;
    margin: 0.5rem 0;
}

.ai-msg {
    padding: 0.85rem 1rem;
    border-radius: var(--radius-lg);
    font-size: 13px;
    line-height: 1.7;
}

.ai-msg-user {
    align-self: flex-end;
    max-width: 85%;
    background: var(--surface-3);
}

.ai-msg-ai {
    background: var(--surface);
    border: 1px solid var(--border);
}

.ai-msg-ai p {
    margin-bottom: 0.5rem;
}

.ai-msg-ai p:last-child {
    margin-bottom: 0;
}

.ai-msg-ai strong {
    color: var(--primary-soft);
}

.ai-msg-ai ul {
    padding-left: 1.2rem;
    margin-bottom: 0.5rem;
}

.ai-panel-sug .chip-btn .ic {
    color: var(--primary);
}

.ai-panel-form {
    display: flex;
    gap: 0.5rem;
}

.ai-panel-form input {
    flex: 1;
    min-width: 0;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 13px;
}

.ai-panel-form input:focus {
    outline: none;
    border-color: var(--primary);
}

.ai-panel-foot {
    text-align: center;
    font-size: 11px;
    color: var(--text-soft);
}

/* Convite para entrar (no lugar do "limite de perguntas" do mockup) */
.ai-login {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--primary);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.ai-login-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    color: var(--primary);
}

.ai-login h3 {
    font-size: 17px;
    margin-bottom: 0.3rem;
}

.ai-login p {
    font-size: 12px;
    color: var(--text-soft);
}

.ai-login-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

/* Diagnóstico de incompatibilidade na montagem */
.diag-err {
    border-width: 2px;
    border-left-width: 2px;
}

.diag-err > div {
    flex: 1;
    min-width: 0;
}

.diag-err-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.tag-err {
    color: var(--danger);
    border-color: var(--danger);
    background: var(--err-bg);
}

.diag-pecas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin: 0.6rem 0;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-lowest);
    font-size: 12px;
}

.diag-sep {
    color: var(--border);
}

.diag-explain {
    margin-top: 0.75rem;
}

.diag-ai {
    margin-top: 0.75rem;
    background: var(--surface-lowest);
    font-size: 13px;
}

.diag-ai ol,
.diag-ai ul {
    padding-left: 1.2rem;
}

.diag-err .diag-actions {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

@media (prefers-reduced-motion: reduce) {
    .ai-panel,
    .ai-panel-fundo {
        transition: none;
    }
}

.diag .diag-pecas strong {
    display: inline;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text);
}

/* ========================================================================== */
/* ========== ENTRAR (LOGIN EM PÁGINA) ========== */
/* ========================================================================== */

.entrar-page {
    padding: 2rem 1.5rem 1rem;
}

.entrar-col {
    max-width: 520px;
    margin: 0 auto;
}

.eyebrow-square::before {
    content: '';
    width: 7px;
    height: 7px;
    background: var(--primary);
}

.fid-inline .fid-modal {
    max-width: none;
    max-height: none;
    animation: none;
    border-top-width: 1px;
}

.fid-inline .fid-close {
    display: none;
}

/* Título só quando não há abas (recuperar senha, avisos) */
.fid-inline .fid-modal:has(.fid-tabs:not([hidden])) .fid-head {
    display: none;
}

.fid-inline .fid-tabs {
    grid-template-columns: 1fr 1fr;
    padding: 0;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: none;
}

.fid-inline .fid-tab {
    padding: 0.8rem;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    font-size: 13px;
}

.fid-inline .fid-tab.active {
    background: none;
    border-bottom-color: var(--primary);
}

.entrar-nota {
    margin-top: 1rem;
}

.entrar-ajuda {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    font-size: 12px;
    color: var(--text-soft);
    text-align: center;
}

.entrar-rodape {
    margin-top: 0.75rem;
    text-align: center;
}

.entrar-rodape a {
    color: var(--muted);
}

/* ========================================================================== */
/* ========== MINHA CONTA: PERFIL E CONFIGURAÇÕES ========== */
/* ========================================================================== */

.conta-topo {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border);
}

.conta-topo .tabs {
    margin-bottom: -1px;
    border-bottom: none;
}

.conta-topo-acoes {
    display: flex;
    gap: 0.5rem;
    padding-bottom: 0.6rem;
}

.pref-intro {
    margin-bottom: 1.25rem;
}

.pref-intro h2 {
    font-size: 24px;
}

.pref-active,
.pref-card,
.pref-redo {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1rem;
    padding: 1.25rem 1.5rem;
}

.pref-active > div,
.pref-card > div,
.pref-redo > div {
    flex: 1;
    min-width: 0;
}

.pref-active p {
    margin-top: 0.25rem;
    font-weight: 600;
}

.pref-card h3 {
    margin: 0.3rem 0 0.25rem;
    font-size: 20px;
}

.pref-card h3 small {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
}

.pref-card p {
    font-size: 12px;
}

.pref-bar {
    max-width: 520px;
    margin-top: 0.6rem;
}

.pref-redo > .ic {
    width: 28px;
    height: 28px;
    color: var(--muted);
}

.pref-redo h3 {
    font-size: 19px;
}

.conta-config {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 820px;
}

.conta-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.conta-card-head h3 {
    margin-bottom: 0.25rem !important;
    padding-top: 0 !important;
    border-top: none !important;
}

.conta-card-head p {
    font-size: 12px;
}

.conta-box {
    padding: 1rem;
    margin-bottom: 0.75rem;
    border-radius: var(--radius);
    background: var(--surface-2);
    max-width: none;
}

.conta-inline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.conta-inline > input,
.conta-inline > div {
    flex: 1;
    min-width: 0;
}

.conta-inline .muted {
    font-size: 11px;
}

.conta-inline-end {
    justify-content: space-between;
    margin-top: 0.75rem;
}

.conta-form-row {
    max-width: none;
}

.conta-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.conta-grid-2 > div {
    display: grid;
    gap: 0.4rem;
}

.conta-hint {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 11px;
    color: var(--muted);
}

.conta-danger {
    padding: 1.1rem;
    border: 1px solid var(--danger);
    border-radius: var(--radius);
    background: var(--surface-lowest);
}

.conta-danger h4 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 17px;
    color: var(--danger-soft);
    margin-bottom: 0.4rem;
}

.conta-danger p {
    font-size: 12px;
}

.conta-danger .check-row {
    margin: 0.75rem 0;
    background: none;
    padding-left: 0;
}

.conta-danger .btn {
    margin-left: auto;
    display: flex;
}

@media (max-width: 640px) {
    .pref-active,
    .pref-card,
    .pref-redo,
    .conta-inline {
        flex-direction: column;
        align-items: stretch;
    }

    .conta-grid-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .breadcrumb-row .tag,
    #pecas-total {
        white-space: normal;
    }

    .peca-acoes {
        flex-wrap: wrap;
        width: 100%;
    }

    .peca-acoes .btn {
        flex: 1;
    }
}

/* Notas do Geekbench nos cartões do catálogo */
.peca-gb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
}

.peca-gb div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-lowest);
}

.peca-gb dt {
    color: var(--muted);
    font-size: 11px;
}

.peca-gb dd {
    margin: 0;
    font-family: var(--font-mono, inherit);
    font-weight: 700;
}

/* Vencedor da comparação */
.cmp-winner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem 1.25rem;
    align-items: center;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    border-color: var(--primary);
}

.cmp-winner .icon-tile {
    color: var(--primary);
}

.cmp-winner h2 {
    font-size: 22px;
    margin: 0.2rem 0 0.35rem;
}

.cmp-winner p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.cmp-winner-extra {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
    font-size: 13px;
}

.cmp-winner-extra strong {
    color: var(--text);
}

.cmp-selos {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
}

.chip-winner {
    color: var(--on-primary);
    background: var(--primary);
    border-color: var(--primary);
}

@media (max-width: 600px) {
    .cmp-winner {
        grid-template-columns: 1fr;
    }
}

/* ========================================================================== */
/* ========== PCs SALVOS (janela de salvar e de escolher) ========== */
/* ========================================================================== */

.pcs-modal {
    max-width: 520px;
}

.pcs-form .fid-field {
    margin-bottom: 0.75rem;
}

.pcs-origem-aviso {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: var(--gray-500);
    margin-bottom: 0.75rem;
}

/* Lista de peças, usada ao salvar e em cada PC da lista */
.pcs-pecas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.pcs-pecas span {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: var(--gray-100);
    color: var(--gray-700);
}

.pcs-sucesso {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 0 1.25rem;
}

.pcs-sucesso-icone {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--success);
}

.pcs-sucesso-icone .ic {
    width: 44px;
    height: 44px;
    stroke-width: 1.5;
}

.pcs-sucesso p {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--gray-700);
}

.pcs-submit-link {
    display: block;
    text-align: center;
    text-decoration: none;
    line-height: 1.4;
}

/* ---- lista de PCs salvos ---- */
.pcs-lista {
    max-height: 60vh;
    overflow-y: auto;
    margin: 0 -0.25rem;
    padding: 0 0.25rem;
}

.pcs-busca {
    width: 100%;
    margin-bottom: 0.75rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: inherit;
    font-family: inherit;
    font-size: 0.9375rem;
}

.pcs-itens {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pcs-item-botao {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.pcs-item-botao:hover,
.pcs-item-botao:focus-visible {
    border-color: var(--primary);
    background: var(--tint);
}

.pcs-item-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}

.pcs-item-topo strong {
    font-size: 0.975rem;
    color: var(--gray-900);
    overflow-wrap: anywhere;
}

.pcs-item-botao .pcs-pecas {
    margin-bottom: 0.4rem;
}

.pcs-item-data {
    font-size: 0.75rem;
    color: var(--gray-400);
}

.pcs-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
    padding: 1.5rem 0.5rem;
    color: var(--gray-500);
    font-size: 0.9375rem;
}

.pcs-vazio .ic {
    width: 40px;
    height: 40px;
    stroke-width: 1.4;
    color: var(--gray-400);
}

/* ---- selo de origem (janela e Minha conta) ---- */
.pcs-origem,
.tag-origem {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--gray-100);
    color: var(--gray-700);
}

.pcs-origem-build,
.tag-origem-build {
    background: var(--tint);
    color: var(--primary);
}

.pcs-origem-encontre,
.tag-origem-encontre {
    background: var(--ok-bg);
    color: var(--ok-fg);
}

.pcs-origem-upgrade,
.tag-origem-upgrade {
    background: rgba(245, 158, 11, 0.16);
    color: var(--warning);
}

/* Botão "usar um PC salvo" no Melhore seu PC */
.up-abrir-salvo {
    margin-bottom: 0.75rem;
}

/* ========================================================================== */
/* ========== JANELA DE CONFIRMACAO ========== */
/* ========================================================================== */

.dialogo-modal {
    max-width: 460px;
}

.dialogo-corpo {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

.dialogo-icone {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--tint);
    color: var(--primary);
}

.dialogo-icone.is-perigo {
    background: var(--err-bg);
    color: var(--err-fg);
}

.dialogo-icone .ic {
    width: 22px;
    height: 22px;
}

.dialogo-corpo .fid-title {
    margin-bottom: 0.35rem;
}

.dialogo-corpo .fid-help {
    margin-bottom: 0;
}

.dialogo-acoes {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

@media (max-width: 480px) {
    .dialogo-acoes .btn {
        flex: 1 1 100%;
    }
}

/* ========== ARMAZENAMENTO (Melhore seu PC) ========== */

.up-armazenamento {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chip-radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.chip-radio span {
    display: inline-block;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    font-size: 0.875rem;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.chip-radio:hover span {
    border-color: var(--primary);
}

.chip-radio input:checked + span {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 600;
}

.chip-radio input:focus-visible + span {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.up-armazenamento-dica {
    margin-top: 0.5rem;
}

.up-ssd-lista {
    list-style: none;
    margin: 0.75rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.up-ssd-lista li {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
}

.up-ssd-preco {
    margin-left: auto;
    font-weight: 700;
    color: var(--primary);
}

/* ========================================================================== */
/* ========== TEMA CLARO (escolha da pessoa ou do sistema) ========== */
/* ========================================================================== */

/* As mesmas variáveis do :root, com valores claros. Quem escolheu "claro"
   manda no sistema; quem nunca escolheu segue o prefers-color-scheme. */
:root[data-theme="claro"] {
    color-scheme: light;

    --bg: #f4f2f0;
    --surface-lowest: #ffffff;
    --surface: #ffffff;
    --surface-2: #faf8f6;
    --surface-3: #efebe7;
    --border: #ddd6d0;
    --border-warm: #e8c4ad;

    --text: #1c1a19;
    --text-soft: #4a3b33;
    --muted: #6d5c53;

    --primary: #d9560d;
    --primary-hover: #b8460a;
    --primary-soft: #a33f08;
    --on-primary: #ffffff;
    --on-primary-soft: #ffffff;
    --success: #1d7a3d;
    --success-strong: #166b34;
    --danger: #c62f2c;
    --danger-soft: #96201e;
    --warning: #a85a12;

    --ok-bg: rgba(29, 122, 61, 0.1);
    --warn-bg: rgba(217, 86, 13, 0.1);
    --err-bg: rgba(198, 47, 44, 0.1);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="escuro"]) {
        color-scheme: light;

        --bg: #f4f2f0;
        --surface-lowest: #ffffff;
        --surface: #ffffff;
        --surface-2: #faf8f6;
        --surface-3: #efebe7;
        --border: #ddd6d0;
        --border-warm: #e8c4ad;

        --text: #1c1a19;
        --text-soft: #4a3b33;
        --muted: #6d5c53;

        --primary: #d9560d;
        --primary-hover: #b8460a;
        --primary-soft: #a33f08;
        --on-primary: #ffffff;
        --success: #1d7a3d;
        --success-strong: #166b34;
        --danger: #c62f2c;
        --danger-soft: #96201e;
        --warning: #a85a12;

        --ok-bg: rgba(29, 122, 61, 0.1);
        --warn-bg: rgba(217, 86, 13, 0.1);
        --err-bg: rgba(198, 47, 44, 0.1);
    }
}

/* Botão de troca na barra do topo */
.tema-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    margin-left: auto;
    margin-right: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.tema-toggle:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.tema-toggle .ic {
    width: 18px;
    height: 18px;
}

/* No celular o ☰ já fica na ponta: o botão de tema vem antes dele */
@media (max-width: 1240px) {
    .tema-toggle {
        margin-left: auto;
        margin-right: 0.5rem;
    }
}

/* ========== QUANTIDADE (memória e armazenamento) ========== */

.qtd-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    overflow: hidden;
    vertical-align: middle;
}

.qtd-stepper button {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.qtd-stepper button:hover:not(:disabled) {
    background: var(--surface-3);
    color: var(--primary);
}

.qtd-stepper button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.qtd-stepper strong {
    min-width: 1.4em;
    text-align: center;
    font-size: 0.875rem;
}

.part-qtd {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.summary-disco {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

.summary-disco:last-child {
    margin-bottom: 0;
}

/* ========== MOTOR DE VALIDAÇÃO EM DESTAQUE ========== */
/* Com a build completa, o diagnóstico deixa de ser um rodapé da lista */

.diagnostics.is-destaque {
    border: 1px solid var(--primary);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    padding: 1rem 1.1rem 1.2rem;
    box-shadow: 0 0 0 4px var(--warn-bg);
    scroll-margin-top: calc(var(--nav-h) + 1rem);
}

.diagnostics.is-destaque .diagnostics-head {
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.6rem;
    margin-bottom: 0.9rem;
}

.diagnostics.is-destaque .diagnostics-head h2 {
    color: var(--primary);
}

.diagnostics.is-destaque .diagnostics-head::after {
    content: 'Build completa';
    margin-left: auto;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
}

/* Aviso de rascunho restaurado */
.notice.notice-rascunho {
    border-color: var(--primary);
    flex-wrap: wrap;
}

.notice-rascunho .link-arrow {
    margin-left: auto;
}

/* ========== TELA DE RESULTADO (etapa final da bancada) ========== */
/* Sem lista de peças: fica só o diagnóstico, como uma etapa própria */

.builder-main.is-resultado .builder-filters .search-field,
.builder-main.is-resultado .filters-foot,
.builder-main.is-resultado .parts-list,
.builder-main.is-resultado #parts-more {
    display: none;
}

/* Durante a escolha das peças o diagnóstico completo fica fora da tela: o
   acompanhamento é pelo diagnóstico no topo do resumo, que leva até aqui. */
.builder-main:not(.is-resultado) .diagnostics {
    display: none;
}

.builder-main.is-resultado .diagnostics {
    margin-top: 0;
}

.builder-main.is-resultado .parts-incompativeis {
    display: none;
}

/* ========================================================================== */
/* ========== AJUDA CONTEXTUAL (botão flutuante em todas as páginas) ========== */
/* ========================================================================== */

.ajuda-flutuante {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 880;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 0.95rem;
    border: 1px solid var(--primary);
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    transition: transform 0.15s ease, background 0.15s ease;
}

.ajuda-flutuante:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
}

.ajuda-flutuante:focus-visible {
    outline: 2px solid var(--primary-soft);
    outline-offset: 2px;
}

.ajuda-flutuante .ic {
    width: 16px;
    height: 16px;
}

/* No celular o botão vira só o ícone, para não cobrir o conteúdo */
@media (max-width: 640px) {
    .ajuda-flutuante {
        right: 0.9rem;
        bottom: 0.9rem;
        padding: 0.7rem;
    }

    .ajuda-flutuante span {
        display: none;
    }
}

/* Impressão e painel aberto: o botão sai da frente */
.fid-lock .ajuda-flutuante { display: none; }

@media print {
    .ajuda-flutuante { display: none !important; }
}

/* ========================================================================== */
/* ========== HISTÓRICO DE RECOMENDAÇÕES ========== */
/* ========================================================================== */

.historico-painel {
    margin-bottom: 1.5rem;
    padding: 1.1rem 1.25rem;
}

.historico-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.historico-head h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 15px;
}

.historico-painel > .muted,
.historico-dobra > .muted {
    margin: 0.35rem 0 0.9rem;
    font-size: 13px;
}

/* Questionário: o histórico abre e fecha clicando no cabeçalho */
.historico-dobra > summary {
    list-style: none;
    cursor: pointer;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.historico-dobra > summary::-webkit-details-marker {
    display: none;
}

.historico-dobra > summary h2 {
    flex: 1;
}

.historico-dobra > summary:hover h2 {
    color: var(--primary);
}

.historico-seta {
    display: grid;
    place-items: center;
    color: var(--muted);
    transition: transform 0.2s;
}

.historico-dobra[open] .historico-seta {
    transform: rotate(180deg);
}

.historico-dobra[open] > summary {
    margin-bottom: 0.1rem;
}

.historico-aviso {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.5rem 0 0.9rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-warm);
    border-radius: var(--radius);
    background: var(--warn-bg);
    font-size: 13px;
    color: var(--text-soft);
}

.historico-aviso .ic {
    flex: none;
    margin-top: 0.2rem;
    color: var(--primary);
}

.historico-aviso .link-arrow {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}

.historico-limpar {
    margin-top: 0.9rem;
    font-size: 12px;
}

.historico-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.historico-lista li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
}

.historico-lista a {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 0.15rem;
    text-decoration: none;
    color: inherit;
}

.historico-lista a:hover strong { color: var(--primary); }

.historico-lista strong { font-size: 14px; }

.historico-lista span.muted {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .historico-lista li { flex-wrap: wrap; }
    .historico-lista .tag { order: 3; }
}

/* Atalhos para trazer PCs de outros módulos para o comparador */
.cmp-fontes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* ========================================================================== */
/* ========== COMO ESCOLHEMOS (critérios do algoritmo) ========== */
/* ========================================================================== */

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

.criterio-card h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0.6rem 0 0.4rem;
    font-size: 16px;
}

.criterio-card p { margin-bottom: 0.5rem; font-size: 14px; }

.etapas-lista {
    margin: 0;
    padding-left: 1.2rem;
    display: grid;
    gap: 0.6rem;
    font-size: 14px;
}

.etapas-lista ul {
    margin: 0.4rem 0 0 0.2rem;
    padding-left: 1rem;
    display: grid;
    gap: 0.25rem;
    color: var(--muted);
}

.lista-simples {
    margin: 0;
    padding-left: 1.2rem;
    display: grid;
    gap: 0.4rem;
    font-size: 14px;
}

.tabela-wrap { overflow-x: auto; margin: 0.75rem 0 1rem; }

.tabela-dados {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.tabela-dados th,
.tabela-dados td {
    text-align: left;
    padding: 0.5rem 0.65rem;
    border-bottom: 1px solid var(--border);
}

.tabela-dados thead th {
    background: var(--surface-2);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.tabela-dados tbody tr:hover { background: var(--surface-2); }

/* ========================================================================== */
/* ========== MELHORE SEU PC: lista de sugestões e preenchimento manual ====== */
/* ========================================================================== */

.up-input { position: relative; }

/* Lista própria no lugar do datalist: abre para baixo e cabe muito mais item */
.up-sugestoes {
    position: absolute;
    z-index: 60;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: 0.25rem;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}

.up-sugestoes li {
    display: grid;
    gap: 0.1rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 14px;
}

.up-sugestoes li span {
    font-size: 12px;
    color: var(--muted);
}

.up-sugestoes li:hover,
.up-sugestoes li.is-ativo {
    background: var(--surface-3);
}

.up-sugestao-manual {
    position: sticky;
    bottom: 0;
    margin-top: 0.25rem;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--primary);
}

.up-sugestao-manual .ic { width: 14px; height: 14px; }

.up-manual {
    margin-top: 0.75rem;
    padding: 0.85rem;
    border: 1px dashed var(--border-warm);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
}

.up-manual-campos {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    margin: 0.5rem 0 0.75rem;
}

.up-manual-campos label { display: grid; gap: 0.25rem; }
.up-manual-campos span { font-size: 12px; color: var(--muted); }

.up-manual-acoes {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.up-manual-status { margin-top: 0.5rem; font-size: 12px; color: var(--muted); }
.up-manual-aviso { margin-top: 0.6rem; }

/* Resumo da configuração atual no resultado do upgrade */
.up-atual-resumo { margin-bottom: 1.25rem; }

.up-atual-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.up-atual-head h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 15px;
}

.up-atual-lista {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    margin: 0;
}

.up-atual-lista dt {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.up-atual-lista dd {
    margin: 0.15rem 0 0;
    font-size: 14px;
    font-weight: 600;
}

/* Peça atual ao lado de cada objetivo */
.up-atual {
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.3rem;
    color: var(--muted);
}

.up-atual strong { color: var(--text); }

/* ========================================================================== */
/* ========== ILUSTRAÇÃO DOS PCs (arte.js) ========== */
/* ========================================================================== */

.arte-pc {
    width: 100%;
    max-width: 128px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.arte-case { fill: var(--surface-3); stroke: var(--border); stroke-width: 2; }
.arte-vidro { fill: var(--surface-lowest); stroke: var(--border); stroke-width: 1.5; }
.arte-mobo { fill: var(--surface-2); stroke: var(--border); stroke-width: 1; }
.arte-cpu { fill: var(--primary); opacity: 0.85; }
.arte-ram { fill: var(--primary-soft); opacity: 0.8; }
.arte-gpu { fill: var(--surface-3); stroke: var(--primary); stroke-width: 1.5; }
.arte-gpu-fan { fill: var(--surface-lowest); stroke: var(--primary-soft); stroke-width: 1; }
.arte-psu { fill: var(--surface-2); stroke: var(--border); stroke-width: 1; }
.arte-fan-aro { fill: var(--surface-lowest); stroke: var(--border); stroke-width: 1.5; }
.arte-pa { fill: var(--primary); opacity: 0.55; }
.arte-fan-eixo { fill: var(--primary); }
.arte-led { fill: var(--success); }
.arte-glow { fill: var(--warn-bg); }

.arte-pc.is-top .arte-pa { opacity: 0.85; }

/* Gira devagar; quem pediu menos movimento no sistema não vê animação */
@media (prefers-reduced-motion: no-preference) {
    .pc-arte:hover .arte-fan {
        animation: arte-girar 2.4s linear infinite;
        transform-box: fill-box;
        transform-origin: center;
    }
}

@keyframes arte-girar {
    to { transform: rotate(360deg); }
}

/* Ilustração do PC no cabeçalho da página do PC e nos PCs salvos */
.pc-arte { flex-shrink: 0; }
.pc-arte .arte-pc { max-width: 110px; }

.build-card-arte {
    float: right;
    margin: 0 0 0.5rem 0.75rem;
}

.build-card-arte .arte-pc { max-width: 76px; }

@media (max-width: 520px) {
    .build-card-arte { display: none; }
}

/* ========================================================================== */
/* ========== CAMPO DE SENHA COM BOTÃO DE OLHO ========== */
/* ========================================================================== */

.campo-senha {
    position: relative;
    display: block;
}

.campo-senha input { width: 100%; padding-right: 2.6rem; }

.olho-senha {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.olho-senha:hover { color: var(--primary); background: var(--surface-3); }

.olho-senha:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.olho-senha .ic { width: 17px; height: 17px; }

/* ========================================================================== */
/* ========== AVISO DE ARMAZENAMENTO NO NAVEGADOR ========== */
/* ========================================================================== */

.aviso-cache {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 890;
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-warm);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}

.aviso-cache p { margin: 0; font-size: 13px; line-height: 1.45; }
.aviso-cache a { color: var(--primary); }

.aviso-cache-icone { color: var(--primary); flex-shrink: 0; }
.aviso-cache-icone .ic { width: 20px; height: 20px; }

.aviso-cache .btn { flex-shrink: 0; }

/* Não briga com o botão de dúvidas */
.aviso-cache ~ .ajuda-flutuante { bottom: 5.5rem; }

@media (max-width: 640px) {
    .aviso-cache {
        flex-wrap: wrap;
        bottom: 0.75rem;
    }

    .aviso-cache .btn { margin-left: auto; }
}

/* Confirmação de login na página /entrar */
.fid-entrou {
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    text-align: center;
    padding: 2rem 1.5rem;
}

.fid-entrou-icone { color: var(--success); }
.fid-entrou-icone .ic { width: 42px; height: 42px; }

/* ========================================================================== */
/* ========== CELULAR: toque confortável e sem zoom indesejado ============== */
/* ========================================================================== */

/* iOS dá zoom em campo com fonte menor que 16px: no celular, todos sobem */
@media (max-width: 640px) {
    /* Os campos de cada tela têm regra própria: todas sobem para 16px aqui */
    input,
    select,
    textarea,
    .up-input input,
    .fid-field input,
    .ai-panel-form input,
    .pc-ask-form input,
    .aprenda-search input,
    .search-field input,
    .chat-input-form textarea,
    .db-filter input,
    .db-filter select {
        font-size: 16px;
    }

    .up-sugestoes { max-height: 55vh; }

    /* Modais e painéis ocupam a tela toda, com rolagem interna */
    .fid-modal,
    .dialogo-modal {
        max-height: 92vh;
        overflow-y: auto;
    }
}

/* Em tela de toque, o alvo mínimo recomendado é 40px */
@media (hover: none) and (pointer: coarse) {
    .btn,
    .fid-submit,
    .fid-link,
    .chip-btn,
    .tab,
    .pcs-item-botao,
    .category-item {
        min-height: 40px;
    }

    .btn-small {
        min-height: 38px;
        padding-inline: 0.9rem;
    }

    .link-arrow,
    .footer-col a,
    .footer-status {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
    }

    .summary-remove,
    .olho-senha,
    .fid-close {
        min-width: 38px;
        min-height: 38px;
    }
}

/* Armazenamento recomendado no cartão do kit */

/* Armazenamento recomendado na página do PC */
.pc-storage {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: 1rem;
}

.pc-storage div { flex: 1; min-width: 0; }
.pc-storage p { margin: 0.15rem 0 0; font-size: 13px; }

/* Perfil que gerou o PC salvo */
.build-card-perfil {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin: 0.5rem 0 0;
    font-size: 12px;
    color: var(--muted);
}

.build-card-perfil strong { color: var(--text); }

/* Filtro e ordenação do painel de administração */
.admin-filtros {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.admin-filtro {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.admin-filtro select {
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-lowest);
    color: var(--text);
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
}

@media (max-width: 720px) {
    .admin-filtros { width: 100%; }
    .admin-filtros input[type="search"] { flex: 1; min-width: 140px; }
}

/* Ações do topo do admin (histórico + adicionar) */
.admin-toolbar-acoes {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.admin-table s { color: var(--muted); }

/* Armazenamento: confirmação antes de seguir (dá para somar discos) */
.discos-confirmar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--primary);
    border-radius: var(--radius-lg);
    background: var(--warn-bg);
}

.discos-confirmar strong {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 14px;
}

.discos-confirmar span { font-size: 12px; color: var(--muted); }

.discos-confirmar-acoes {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.discos-confirmar.is-cheio { border-color: var(--border-warm); }

/* ========================================================================== */
/* ========== MELHORE SEU PC: cartões das peças e janela de escolha ========== */
/* ========================================================================== */

/* Janela de escolha */
.up-picker-modal {
    width: min(640px, 100%);
    max-width: 640px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}

.up-picker-corpo {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
    overflow-y: auto;
}

.up-picker-busca {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-lowest);
}

.up-picker-busca input {
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    outline: none;
}

.up-picker-busca:focus-within { border-color: var(--primary); }

.up-picker-dica { margin: 0; font-size: 12px; }

.up-picker-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}

.up-picker-item {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.1rem 0.5rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.up-picker-item strong { font-size: 14px; }
.up-picker-item span { grid-column: 1; font-size: 12px; color: var(--muted); }
.up-picker-item .tag { grid-column: 2; grid-row: 1 / span 2; }

.up-picker-item:hover,
.up-picker-item:focus-visible {
    border-color: var(--primary);
    background: var(--surface-3);
    outline: none;
}

.up-picker-item.is-atual { border-color: var(--success-strong); }

.up-picker-vazio { padding: 1rem; color: var(--muted); font-size: 13px; text-align: center; }

.up-picker-extras {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}


/* Comparar meus PCs salvos */
.cmp-salvos { width: min(620px, 100%); max-width: 620px; }

.cmp-salvos-lista {
    list-style: none;
    margin: 0.5rem 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
    max-height: 50vh;
    overflow-y: auto;
}

.cmp-salvos-lista .check-row {
    align-items: flex-start;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    cursor: pointer;
}

.cmp-salvos-lista .check-row:has(input:checked) { border-color: var(--primary); }

.cmp-salvos-texto { display: grid; gap: 0.15rem; min-width: 0; }
.cmp-salvos-texto strong { font-size: 14px; }
.cmp-salvos-texto span { display: flex; align-items: center; gap: 0.3rem; font-size: 12px; color: var(--muted); }

/* ========================================================================== */
/* ========== MINHA CONTA: PC atual, recomendados e filtro ========== */
/* ========================================================================== */

.pc-atual-destaque {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    border-color: var(--primary);
    background: linear-gradient(135deg, var(--warn-bg), transparent 60%), var(--surface);
}

.pc-atual-arte .arte-pc { max-width: 110px; }

.pc-atual-corpo { display: grid; gap: 0.4rem; min-width: 0; }
.pc-atual-corpo h2 { margin: 0; font-size: 20px; }
.pc-atual-pecas { margin: 0; font-size: 13px; }

.pc-atual-acoes { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.3rem; }

.pc-atual-vazio,
.recomendados-vazio {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.pc-atual-vazio > div { flex: 1; min-width: 220px; }
.pc-atual-vazio h2 { margin: 0 0 0.25rem; font-size: 17px; }
.pc-atual-vazio p, .recomendados-vazio p { margin: 0; }

.recomendados-conta { margin-bottom: 1.75rem; }
.recomendados-conta h2 { display: flex; align-items: center; gap: 0.45rem; }

.recomendados-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: 0.75rem;
}

.recomendado-card {
    display: grid;
    gap: 0.35rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.recomendado-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.recomendado-card.is-featured { border-color: var(--primary); }
.recomendado-card strong { font-size: 15px; }
.recomendado-card .kit-price { margin: 0; font-size: 18px; }
.recomendado-card .muted { font-size: 12px; }

.conta-filtros {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.conta-busca {
    min-width: 220px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-lowest);
    color: var(--text);
}

@media (max-width: 640px) {
    .pc-atual-destaque { flex-direction: column; align-items: flex-start; }
    .conta-busca { width: 100%; }
}

/* Chat: preferências que o assistente está usando */
.chat-preferencias {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border-warm);
    border-radius: 999px;
    background: var(--warn-bg);
    font-size: 12px;
}

/* ========================================================================== */
/* ========== INÍCIO (hx) E RESULTADOS (rx) — LAYOUT EDITORIAL ========== */
/* Títulos e textos corridos em Space Grotesk; rótulos, dados e botões em    */
/* JetBrains Mono. Blocos ligados por linhas de 1px em vez de cartões soltos. */
/* ========================================================================== */

.hx,
.rx {
    --hx-pad: 1.5rem;          /* respiro interno dos cartões e faixas */
    --hx-gap: 1.5rem;          /* espaço entre cartões */
    --hx-section: clamp(3.5rem, 7vw, 6rem);
}

/* ---------------- Peças comuns ---------------- */

/* Rótulo em caixa alta (tipo do kit, perfil, etiqueta da faixa) */
.hx-label,
.rx-kit-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--muted);
}

.hx-label-accent,
.is-featured :is(.hx-label, .rx-kit-label) {
    color: var(--primary);
}

/* Selo verde "Compatível" (o do JS vem como .chip) */
.hx-chip,
.rx-kit-head .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--success-strong);
    border-radius: var(--radius-sm);
    background: var(--ok-bg);
    color: var(--success);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.rx-kit-head .chip-warn { border-color: var(--primary); background: var(--warn-bg); color: var(--primary); }
.rx-kit-head .chip-err  { border-color: var(--danger);  background: var(--err-bg);  color: var(--danger); }

/* Links de texto em mono */
.hx-link,
.rx-link {
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-soft);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s;
}

.hx-link:hover,
.rx-link:hover,
.rx-link-accent {
    color: var(--primary);
}

/* Link com setinha (anda um pouco ao passar o mouse) */
.hx-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.hx-link-arrow .ic {
    width: 14px;
    height: 14px;
    transition: transform 0.15s;
}

.hx-link-arrow:hover .ic {
    transform: translateX(3px);
}

.rx-link-icone {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.rx-link-icone .ic {
    width: 14px;
    height: 14px;
}

.rx-underline {
    color: var(--text-soft);
    text-decoration: underline;
    text-underline-offset: 5px;
}

.rx-underline:hover {
    color: var(--primary);
}

/* Chamada laranja no pé de um bloco clicável */
.hx-cta {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    text-underline-offset: 4px;
}

/* Quadrado do ícone */
.hx-tile {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-3);
    color: var(--primary);
}

.hx-tile .ic {
    width: 20px;
    height: 20px;
}

/* Upgrade: seta para cima com "UP" embaixo */
.hx-tile-up {
    align-content: center;
    gap: 1px;
}

.hx-tile-up .ic {
    width: 15px;
    height: 15px;
    stroke-width: 2.25;
}

.hx-tile-up b {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
}

/* Barra de consumo / índice */
.hx-bar,
.rx-kit-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--surface-3);
    overflow: hidden;
}

.hx-bar span,
.rx-kit-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
}

.hx-bar-ok span {
    background: var(--success-strong);
}

.hx-meter {
    display: grid;
    gap: 0.45rem;
    font-family: var(--font-mono);
}

.hx-meter-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 12px;
    color: var(--text-soft);
}

.hx-meter-head strong {
    white-space: nowrap;
    color: var(--text);
}

.hx-meter p {
    font-size: 11px;
    color: var(--muted);
}

/* Texto mono pequeno (lista de peças, notas) */
.hx-mono,
.hx-note {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.7;
    color: var(--muted);
}

.hx-note {
    margin-top: var(--hx-gap);
}

/* Cabeçalho de seção: título e texto à esquerda, link à direita */
.hx-head,
.rx-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem 2rem;
}

.hx-head {
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.hx-head h2 {
    font-size: clamp(26px, 2.6vw, 36px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.hx-head p,
.rx-head p {
    margin-top: 0.6rem;
    font-family: var(--font-head);
    font-size: 17px;
    line-height: 1.55;
    color: var(--muted);
}

.hx-head .hx-link,
.rx-head-meta {
    padding-bottom: 0.3rem;   /* alinha pela linha de base do subtítulo */
}

/* ---------------- HERO ---------------- */
.hx-hero {
    padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
}

.hx-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 6rem);
}

.hx-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.1rem;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--success);
}

.hx-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 4px var(--ok-bg);
}

.hx-hero h1 {
    font-size: clamp(38px, 4.6vw, 66px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.035em;
}

.hx-quebra {
    display: block;
}

.hx-lead {
    max-width: 38rem;
    margin-top: 1.25rem;
    font-family: var(--font-head);
    font-size: clamp(16px, 1.3vw, 18px);
    line-height: 1.55;
    color: var(--muted);
}

.hx-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 2rem;
    margin-top: 2rem;
}

.hx-btn-xl {
    min-width: 200px;
    padding: 0.9rem 1.75rem;
    font-size: 14px;
}

/* Linha com as três garantias */
.hx-trust {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--muted);
}

.hx-trust li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hx-trust .ic {
    color: var(--success);
}

/* Cartão do PC de exemplo */
.hx-card {
    display: grid;
    gap: 1.25rem;
    padding: var(--hx-pad);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.hx-card-top,
.hx-example-top,
.rx-kit-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem 1rem;
}

.hx-specs {
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-lowest);
    font-family: var(--font-mono);
    font-size: 12px;
}

.hx-specs li {
    display: grid;
    grid-template-columns: 16px auto 1fr;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
}

.hx-specs li + li {
    border-top: 1px solid var(--border);
}

.hx-specs .ic {
    width: 16px;
    height: 16px;
    color: var(--muted);
}

.hx-specs span {
    white-space: nowrap;
    color: var(--text-soft);
}

.hx-specs strong {
    text-align: right;
    font-weight: 600;
    color: var(--text);
}

.hx-btn {
    padding-block: 0.8rem;
}

/* ---------------- SEÇÕES ---------------- */
.hx-section {
    padding-block: var(--hx-section);
}

.hx-section-line {
    border-top: 1px solid var(--border);
}

.hx-paths {
    padding-bottom: var(--hx-section);
}

/* Faixa de blocos ligados por linhas (caminhos e perfis). As divisórias são
   o fundo da grade aparecendo pelo gap de 1px: funcionam com qualquer número
   de colunas, sem regra por posição. */
.hx-strip {
    --cols: 4;
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--border);
    overflow: hidden;
}

.hx-strip-3 {
    --cols: 3;
}

.hx-strip-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.75rem var(--hx-pad);
    background: var(--bg);
    color: inherit;
    text-decoration: none;
    transition: background 0.15s;
}

.hx-strip-item:hover {
    background: var(--surface);
}

.hx-strip-item:hover .hx-cta {
    text-decoration: underline;
}

.hx-strip-item .hx-tile {
    margin-bottom: 0.5rem;
}

.hx-strip-item :is(h2, h3) {
    font-size: 21px;
    font-weight: 600;
}

.hx-strip-item p {
    flex: 1;   /* empurra a chamada para o pé: todas na mesma linha */
    font-family: var(--font-head);
    font-size: 15px;
    line-height: 1.55;
    color: var(--muted);
}

/* Linha do tempo do "Como funciona" */
.hx-steps {
    --step-gap: 2rem;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.5rem var(--step-gap);
}

.hx-steps li {
    position: relative;
    padding-top: 2.75rem;
}

/* trilho (vai até o próximo passo) e marcador quadrado */
.hx-steps li::before,
.hx-steps li::after {
    content: '';
    position: absolute;
    left: 0;
}

.hx-steps li::before {
    top: 4px;
    right: calc(-1 * var(--step-gap));
    height: 1px;
    background: var(--border);
}

.hx-steps li:last-child::before {
    right: 0;
}

.hx-steps li::after {
    top: 0;
    width: 9px;
    height: 9px;
    background: var(--primary);
}

.hx-step-num {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
}

.hx-steps h3 {
    margin-block: 0.75rem;
    font-size: clamp(19px, 1.6vw, 23px);
    font-weight: 600;
}

.hx-steps p {
    font-family: var(--font-head);
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted);
}

/* ---------------- CARTÕES DE PC (exemplos do Início e resultados) ---------------- */
/* As linhas de cada cartão são as mesmas da grade (subgrid): título, preço,
   lista e botões ficam na mesma altura nos três cartões, mesmo quando um
   título quebra em duas linhas. */
.hx-examples,
.rx-kits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--hx-gap);
}

.hx-example,
.rx-kit {
    display: grid;
    grid-template-rows: subgrid;
    align-content: start;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
}

.hx-example { grid-row: span 5; }   /* topo, título, peças, consumo, botão */
.rx-kit     { grid-row: span 6; }   /* topo, peças-chave, números, pontos, specs, ações */

/* destaque sem engrossar a borda (não desloca o conteúdo) */
.hx-example.is-featured,
.rx-kit.is-featured {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

.hx-example-top,
.rx-kit-head {
    padding: 1rem var(--hx-pad);
    border-bottom: 1px solid var(--border);
}

.is-featured :is(.hx-example-top, .rx-kit-head) {
    background: var(--warn-bg);
}

/* cada linha do cartão recebe o mesmo recuo; a última fecha com o respiro de baixo */
:is(.hx-example, .rx-kit) > :not(:first-child) {
    margin: 1.2rem var(--hx-pad) 0;
}

:is(.hx-example, .rx-kit) > :last-child {
    align-self: end;
    margin-bottom: var(--hx-pad);
}

/* o botão ocupa a linha pelo esticamento da grade; com width: 100% (btn-block)
   somado ao recuo, ele vazava pela borda direita */
:is(.hx-example, .rx-kit) > .btn {
    width: auto;
}

.hx-example h3 {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
}

/* Sem subgrid (navegador antigo): cada cartão em coluna, sem alinhar entre si */
@supports not (grid-template-rows: subgrid) {
    .hx-examples,
    .rx-kits {
        align-items: start;
    }

    .hx-example,
    .rx-kit {
        display: flex;
        flex-direction: column;
        grid-row: auto;
    }

    /* em coluna, "align-self: end" empurrava os botões para a direita */
    :is(.hx-example, .rx-kit) > :last-child {
        align-self: stretch;
    }
}

/* ---------------- RESULTADOS ---------------- */
.rx-crumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 1.75rem;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted);
}

.rx-crumb a {
    color: var(--primary);
    text-decoration: none;
}

.rx-crumb a:hover {
    text-decoration: underline;
}

.rx-head {
    margin-block: 2.25rem 2rem;
}

.rx-head h1 {
    font-size: clamp(36px, 5vw, 68px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.rx-head p {
    max-width: 44rem;
    margin-top: 1rem;
    font-size: clamp(16px, 1.4vw, 19px);
}

.rx-head-meta {
    display: grid;
    justify-items: end;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-soft);
}

.rx-count {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.rx-bar {
    display: grid;
    gap: 0.5rem;
    padding: 1.25rem var(--hx-pad);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.rx-bar strong {
    font-family: var(--font-head);
    font-size: clamp(17px, 1.6vw, 21px);
    font-weight: 600;
}

.rx-bar-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 2rem;
}

/* Girar cartas: Voltar | Girar | Avançar, no fim da linha */
.rx-cartas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.rx-carta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text-soft);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, opacity 0.15s;
}

.rx-carta-btn .ic {
    width: 14px;
    height: 14px;
}

.rx-carta-btn:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
}

.rx-carta-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.rx-carta-girar {
    border-color: var(--primary);
    background: var(--warn-bg);
    color: var(--primary);
}

.rx-carta-girar.is-girando .ic {
    animation: rx-gira-icone 0.6s linear infinite;
}

.rx-carta-rodada {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
}

@keyframes rx-gira-icone {
    to { transform: rotate(360deg); }
}

/* Cartas virando: saem até ficar de lado, o conteúdo troca e voltam de frente */
.rx-kits {
    perspective: 1600px;
}

.rx-kit.vira-sai {
    animation: rx-vira-sai 0.32s ease-in forwards;
    animation-delay: calc(var(--i, 0) * 70ms);
}

.rx-kit.vira-entra {
    animation: rx-vira-entra 0.38s ease-out both;
    animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes rx-vira-sai {
    to { transform: rotateY(90deg); opacity: 0.5; }
}

@keyframes rx-vira-entra {
    from { transform: rotateY(-90deg); opacity: 0.5; }
    to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .rx-kit.vira-sai,
    .rx-kit.vira-entra,
    .rx-carta-girar.is-girando .ic {
        animation: none;
    }
}

.rx-kits {
    margin-top: var(--hx-gap);
    transition: opacity 0.15s;
}

.rx-kits > .loading {
    grid-column: 1 / -1;
}

.rx-kits.is-loading {
    opacity: 0.45;
    pointer-events: none;
}

/* Arte + título + subtítulo */
.rx-kit-id {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.rx-kit-art {
    flex: none;
    width: 64px;
    height: 64px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background:
        linear-gradient(var(--border) 1px, transparent 1px) 0 0 / 12px 12px,
        linear-gradient(90deg, var(--border) 1px, transparent 1px) 0 0 / 12px 12px,
        var(--surface-lowest);
}

.rx-kit-art svg {
    display: block;
    width: 100%;
    height: 100%;
}

.rx-kit h2 {
    font-size: clamp(20px, 1.7vw, 24px);
    font-weight: 600;
    line-height: 1.2;
}

.rx-kit-sub {
    margin-top: 0.35rem;
    font-family: var(--font-head);
    font-size: 15px;
    line-height: 1.45;
    color: var(--muted);
}

/* Preço | Índice Meu PC */
.rx-kit-nums {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-lowest);
}

.rx-kit-price,
.rx-kit-index {
    display: grid;
    align-content: center;
    gap: 0.35rem;
    min-width: 0;
    padding: 1rem 1.1rem;
}

.rx-kit-index {
    border-left: 1px solid var(--border);
}

.rx-kit-price strong {
    font-family: var(--font-head);
    font-size: clamp(24px, 2.2vw, 30px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.rx-kit-price span {
    font-family: var(--font-mono);
    font-size: 11px;
}

.rx-kit-index-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.15rem 0.5rem;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-soft);
}

.rx-kit-index-head span {
    white-space: nowrap;
}

.rx-kit-index-head strong {
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--primary);
}

.rx-kit-pontos {
    display: grid;
    align-content: start;
    gap: 0.55rem;
    padding-left: 1.25rem;
    font-family: var(--font-head);
    font-size: 16px;
    line-height: 1.4;
}

.rx-kit-pontos li::marker {
    color: var(--primary);
}

.rx-kit-specs {
    display: grid;
    align-content: start;
    gap: 0.6rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.7;
    color: var(--muted);
}

.rx-kit-disco strong {
    color: var(--text);
}

.rx-kit-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.rx-kit-actions > :first-child,
.rx-kit-actions > :last-child {
    grid-column: 1 / -1;   /* Ver detalhes em cima, Abrir na montagem embaixo; Comparar e Salvar no meio */
}

.rx-kit-actions .btn {
    padding-block: 0.8rem;
}

.rx-btn-muted {
    color: var(--text-soft);
}

/* Vale a pena gastar mais? */
.rx-worth {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem 2rem;
    margin-top: var(--hx-gap);
    padding: 1.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.rx-worth-num {
    display: grid;
    place-items: center;
    gap: 0.25rem;
    min-width: 120px;
    padding: 1.1rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-lowest);
}

.rx-worth-num strong {
    font-family: var(--font-head);
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-soft);
}

.rx-worth-num.is-big strong {
    color: var(--success);
}

.rx-worth-num span {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
}

.rx-worth-text h2 {
    font-size: clamp(21px, 2vw, 27px);
    font-weight: 700;
}

.rx-worth-text p {
    margin-top: 0.5rem;
    font-family: var(--font-head);
    font-size: 16px;
    line-height: 1.5;
}

.rx-worth-actions {
    display: grid;
    justify-items: center;
    gap: 0.9rem;
}

.rx-share {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 0 3rem;
}

/* ---------------- TELAS MENORES ---------------- */
@media (max-width: 1100px) {
    .hx-strip { --cols: 2; }
    .hx-strip-3 { --cols: 3; }

    /* uma coluna: cada cartão volta a ser independente */
    .hx-examples,
    .rx-kits {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--hx-gap);
        max-width: 640px;
    }

    .hx-example,
    .rx-kit {
        display: flex;
        flex-direction: column;
        grid-row: auto;
    }

    /* em coluna, "align-self: end" empurrava os botões para a direita */
    :is(.hx-example, .rx-kit) > :last-child {
        align-self: stretch;
    }

    .rx-worth { grid-template-columns: auto minmax(0, 1fr); }
    .rx-worth-actions { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; align-items: center; }
}

@media (max-width: 900px) {
    .hx-hero-grid { grid-template-columns: minmax(0, 1fr); }
    .hx-strip-3 { --cols: 1; }
    .hx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hx-steps li:nth-child(2n)::before { right: 0; }
    .rx-head-meta { justify-items: start; }
}

@media (max-width: 560px) {
    .hx-quebra { display: inline; }
    .hx-actions { flex-direction: column; align-items: stretch; text-align: center; }
    .hx-actions .hx-link-arrow { justify-content: center; }
    .hx-btn-xl { min-width: 0; }
    .hx-specs li { grid-template-columns: 16px 1fr; }
    .hx-specs strong { grid-column: 2; text-align: left; }
    .hx-strip { --cols: 1; }
    .hx-steps { grid-template-columns: minmax(0, 1fr); }
    .hx-steps li::before { right: 0; }
    .rx-kit-nums { grid-template-columns: minmax(0, 1fr); }
    .rx-kit-index { border-left: 0; border-top: 1px solid var(--border); }
    .rx-worth { grid-template-columns: minmax(0, 1fr); padding: 1.25rem; }
    .rx-worth-num { justify-self: start; }
    .rx-worth-actions { grid-auto-flow: row; justify-items: stretch; text-align: center; }
    .rx-share { justify-content: center; }
    .rx-cartas { margin-left: 0; width: 100%; }
    .rx-cartas { gap: 0.35rem; }
    .rx-carta-btn { flex: 1 1 auto; justify-content: center; padding-inline: 0.45rem; }
    .rx-carta-rodada { width: 100%; text-align: center; }
}

/* Salvar PC sem conta: aviso de que fica um só, neste navegador */
.pcs-aviso-navegador {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--border-warm);
    border-radius: var(--radius);
    background: var(--warn-bg);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-soft);
}

.pcs-aviso-navegador .ic {
    flex: none;
    margin-top: 0.2rem;
    color: var(--primary);
}

/* ========================================================================== */
/* ========== MINHA CONTA — MENU LATERAL, SEU PC E LISTA (ct) ========== */
/* ========================================================================== */

.conta-page {
    padding: clamp(2rem, 5vw, 3.5rem) 0 4rem;
}

.ct {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
    gap: clamp(1.5rem, 4vw, 3.5rem);
}

/* ---------- coluna lateral ---------- */
.ct-lado {
    position: sticky;
    top: calc(var(--nav-h) + 1.5rem);
    display: grid;
    gap: 0.35rem;
}

.ct-lado h1 {
    font-size: clamp(30px, 3vw, 40px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.ct-email {
    margin-top: 0.35rem;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-soft);
    overflow-wrap: anywhere;
}

.ct-desde {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
}

.ct-menu {
    display: grid;
    gap: 0.25rem;
    margin-top: 1.5rem;
}

.ct-menu-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    background: none;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    color: var(--text-soft);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.ct-menu-item:hover {
    color: var(--text);
    background: var(--surface);
}

.ct-menu-item.active {
    border-color: var(--border);
    background: var(--surface);
    color: var(--text);
}

.ct-menu-item.active .ic {
    color: var(--primary);
}

.ct-menu-qtd {
    margin-left: auto;
    font-size: 12px;
    color: var(--muted);
}

.ct-sair {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-self: start;
    margin-top: 1rem;
    padding: 0.5rem 0.9rem;
    border: 0;
    background: none;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--danger);
    border-radius: var(--radius);
    cursor: pointer;
}

.ct-sair:hover {
    background: color-mix(in srgb, var(--danger) 12%, transparent);
}

/* ---------- Seu PC (destaque) ---------- */
.ct-seupc {
    display: grid;
    gap: 1.1rem;
    margin-bottom: 2.5rem;
    padding: 1.5rem;
    border: 1px solid var(--primary);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg, var(--warn-bg), transparent 55%),
        var(--surface);
    box-shadow: 0 0 0 1px var(--primary);
}

.ct-seupc-rotulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary);
}

.ct-seupc-sub {
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--muted);
}

.ct-seupc-corpo {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem;
}

.ct-seupc-arte {
    width: 72px;
    height: 72px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-lowest);
}

.ct-seupc-arte svg {
    display: block;
    width: 100%;
    height: 100%;
}

.ct-seupc h2 {
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 700;
    line-height: 1.2;
}

.ct-seupc-numeros {
    display: grid;
    justify-items: end;
    gap: 0.6rem;
    min-width: 170px;
}

.ct-seupc-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.ct-seupc-acoes .ct-icone {
    margin-left: auto;
}

.ct-seupc-vazio {
    border-style: dashed;
    box-shadow: none;
    background: var(--surface);
}

.ct-seupc-vazio-corpo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
}

.ct-seupc-vazio-corpo p {
    max-width: 52ch;
    margin-top: 0.35rem;
    font-family: var(--font-head);
    font-size: 15px;
    color: var(--muted);
}

/* ---------- cabeçalho, busca e filtros ---------- */
.ct-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.ct-head h2 {
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.ct-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.ct-busca {
    flex: 1 1 260px;
    min-width: 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-lowest);
    font-family: var(--font-mono);
    font-size: 13px;
}

.ct-busca:focus {
    border-color: var(--primary);
    outline: none;
}

.ct-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ct-chip {
    padding: 0.6rem 0.95rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: none;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.ct-chip:hover {
    color: var(--text);
}

.ct-chip.is-active {
    border-color: var(--primary);
    background: var(--warn-bg);
    color: var(--primary);
}

/* ---------- lista em linhas ---------- */
#builds-list.ct-lista {
    display: block;
}

.ct-linhas {
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
}

.ct-linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px 120px auto;
    align-items: center;
    gap: 1.5rem;
    padding: 1.15rem 1.4rem;
    transition: background 0.15s;
}

.ct-linha + .ct-linha {
    border-top: 1px solid var(--border);
}

.ct-linha:hover {
    background: var(--surface-2);
}

.ct-linha.is-selecionado {
    background: var(--warn-bg);
    box-shadow: inset 3px 0 0 var(--primary);
}

.ct-linha-nome {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
}

.ct-linha-titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
}

.ct-linha h3 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
}

.ct-origem {
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--text-soft);
}

.ct-specs {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted);
}

.ct-specs-extra {
    margin-top: 0.15rem;
}

.ct-linha-selo .chip {
    font-size: 11px;
}

/* Índice e preço (lista e Seu PC) */
.ct-indice {
    display: grid;
    gap: 0.45rem;
    width: 100%;
    max-width: 170px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-soft);
}

.ct-indice strong {
    color: var(--primary);
}

.ct-indice-barra {
    height: 5px;
    border-radius: 999px;
    background: var(--surface-3);
    overflow: hidden;
}

.ct-indice-barra span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
}

.ct-indice-vazio {
    color: var(--muted);
}

.ct-preco {
    display: grid;
    gap: 0.15rem;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
}

.ct-preco strong {
    font-family: var(--font-head);
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap;
    color: var(--text);
}

.ct-seupc .ct-preco {
    justify-items: end;
}

.ct-seupc .ct-preco strong {
    font-size: 26px;
}

.ct-linha-acoes {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ct-icone {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: none;
    color: var(--text-soft);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.ct-icone:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
}

.ct-icone.is-on {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--on-primary);
}

.ct-icone:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.ct-icone-perigo:hover:not(:disabled) {
    border-color: var(--danger);
    color: var(--danger);
}

/* Barra de comparação */
.ct-comparar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-top: 1rem;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--muted);
}

.ct-comparar p {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ct-comparar .ic {
    color: var(--primary);
}

.ct-main #recomendados-conta {
    margin-top: 3rem;
}

/* ---------- telas menores ---------- */
@media (max-width: 1100px) {
    .ct-linha {
        grid-template-columns: minmax(0, 1fr) 150px auto;
        grid-template-areas: "nome indice preco" "acoes acoes acoes";
    }

    .ct-linha-nome { grid-area: nome; }
    .ct-linha .ct-indice { grid-area: indice; }
    .ct-linha .ct-preco { grid-area: preco; }
    .ct-linha-acoes { grid-area: acoes; justify-content: flex-end; }
}

@media (max-width: 860px) {
    .ct {
        grid-template-columns: minmax(0, 1fr);
    }

    .ct-lado {
        position: static;
    }

    .ct-menu {
        display: flex;
        flex-wrap: wrap;
        margin-top: 1rem;
    }

    .ct-menu-item {
        width: auto;
        border-color: var(--border);
    }

    .ct-sair {
        margin-top: 0.25rem;
        padding-left: 0;
    }
}

@media (max-width: 600px) {
    .ct-seupc-corpo {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .ct-seupc-arte {
        width: 56px;
        height: 56px;
    }

    .ct-seupc-numeros {
        grid-column: 1 / -1;
        grid-template-columns: 1fr auto;
        align-items: end;
        justify-items: stretch;
    }

    .ct-linha {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "nome nome" "indice preco" "acoes acoes";
        gap: 0.9rem 1rem;
        padding: 1rem;
    }

    .ct-linha .ct-preco { justify-items: end; }
    .ct-linha-acoes .btn { flex: 1; }
}

/* Minhas preferências: os dois "refazer" ficam juntos no fim */
.pref-redo-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: flex-end;
}

.pref-redo {
    flex-wrap: wrap;
}

.pref-redo > div:not(.pref-redo-acoes) {
    flex: 1 1 320px;   /* o texto não espreme: os botões descem para a linha de baixo */
}

.pref-redo > .pref-redo-acoes {
    flex: 0 1 auto;
    margin-left: auto;
}

/* Resultados: botão Salvar com borda verde pulsando; ao passar o mouse, fica todo verde */
.rx-btn-salvar {
    border-color: var(--success-strong);
    color: var(--success);
    animation: rx-salvar-brilho 2.4s ease-in-out infinite;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.rx-btn-salvar:hover:not(:disabled),
.rx-btn-salvar:focus-visible {
    border-color: var(--success-strong);
    background: var(--success-strong);
    color: var(--on-primary);
    animation: none;
}

@keyframes rx-salvar-brilho {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59, 165, 93, 0); }
    50%      { box-shadow: 0 0 0 3px rgba(59, 165, 93, 0.35); }
}

@media (prefers-reduced-motion: reduce) {
    .rx-btn-salvar { animation: none; }
}

/* Conta e segurança: limpar partes dos dados */
.conta-limpar {
    display: grid;
    gap: 0.75rem;
}

.conta-limpar > .muted {
    margin-top: -0.4rem;
}

.conta-limpar-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.conta-limpar-item > div {
    flex: 1 1 260px;
}

.conta-limpar-item span {
    font-weight: 600;
}

.conta-limpar-item .btn:hover:not(:disabled) {
    border-color: var(--danger);
    color: var(--danger);
}

/* Minha conta: título no topo, ocupando a largura toda */
.ct-topo {
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.ct-topo h1 {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.ct-topo p {
    margin-top: 0.5rem;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--muted);
}

.ct-topo .ct-email {
    color: var(--text-soft);
}

.ct-lado .ct-menu {
    margin-top: 0;
}

/* Favoritos */
.ct-estrela {
    display: grid;
    flex: none;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-left: -0.35rem;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--muted);
    cursor: pointer;
    transition: color 0.15s, transform 0.15s;
}

.ct-estrela:hover {
    color: var(--warning);
    transform: scale(1.1);
}

.ct-estrela.is-on {
    color: #f5b300;
}

.ct-estrela.is-on .ic {
    fill: currentColor;
}

.ct-chip-favorito {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.ct-chip-favorito .ic {
    color: #f5b300;
}

/* Recomendados para você, no mesmo visual da lista */
.ct-recs-sub {
    margin-top: 0.35rem;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted);
}

.ct-recs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.ct-rec {
    display: grid;
    align-content: start;
    gap: 0.45rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
}

.ct-rec:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.ct-rec.is-featured {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}

.ct-rec-tipo {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.ct-rec.is-featured .ct-rec-tipo {
    color: var(--primary);
}

.ct-rec strong {
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
}

.ct-rec-preco {
    font-family: var(--font-head);
    font-size: 22px;
    font-weight: 700;
}

/* Monte seu PC: o resumo não corta mais os botões. Em tela larga ele é uma
   coluna presa na tela: a lista de peças rola por dentro e o total com os
   botões fica sempre visível embaixo. */
@media (min-width: 1241px) {
    .builder-summary {
        display: flex;
        flex-direction: column;
        max-height: var(--painel-max);
        overflow: hidden;
    }

    .builder-summary > .summary-diag,
    .builder-summary > .power,
    .builder-summary > .summary-foot {
        flex: none;
    }

    .builder-summary > .summary-list {
        flex: 1 1 auto;
        min-height: 6rem;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* Botões do resumo, iguais aos dos cartões de resultado */
.summary-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.summary-actions > #btn-ask {
    grid-column: 1 / -1;
}

.summary-actions .btn {
    gap: 0.4rem;
    padding: 0.65rem 0.6rem;
    font-size: 12px;
}


.rx-btn-salvar:disabled {
    animation: none;
    border-color: var(--border);
    color: var(--muted);
}

/* Monte seu PC: o seletor de pentes de memória não some atrás das reticências */
.summary-value:has(.qtd-stepper) {
    overflow: visible;
    white-space: normal;
}

.summary-ram .summary-nome {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Monte seu PC: memórias diferentes (a principal e as extras) */
.summary-ram-extra {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px dashed var(--border);
}

.summary-ram-tirar {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--muted);
    cursor: pointer;
}

.summary-ram-tirar:hover {
    color: var(--danger);
}

.summary-add-ram {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.4rem;
    padding: 0.25rem 0;
    border: 0;
    background: none;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
}

.summary-add-ram:hover {
    text-decoration: underline;
}

.summary-ram-limite {
    display: block;
    margin-top: 0.35rem;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    color: var(--muted);
}

.summary-value:has(.summary-ram) {
    display: grid;
    justify-items: start;
}

/* Diagnóstico: Atenção técnica em amarelo; Recomendação (não tira o "Compatível") em laranja */
:root {
    --amarelo: #f5c542;
    --amarelo-bg: rgba(245, 197, 66, 0.1);
}

.diag.diag-warn {
    border-left-color: var(--amarelo);
    background: var(--amarelo-bg);
}

.diag-warn > .ic,
.diag-warn strong {
    color: var(--amarelo);
}

.diag-rec {
    border-left: 3px solid var(--primary);
    background: var(--warn-bg);
}

.diag-rec > .ic,
.diag-rec strong {
    color: var(--primary);
}


/* No tema claro, o amarelo escurece para continuar legível */
:root[data-theme="claro"] {
    --amarelo: #a87700;
    --amarelo-bg: rgba(200, 150, 0, 0.1);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="escuro"]) {
        --amarelo: #a87700;
        --amarelo-bg: rgba(200, 150, 0, 0.1);
    }
}

/* Dados da montagem dentro do "Compatível" (ex.: armazenamento total) */
.diag .diag-info {
    margin-top: 0.35rem;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted);
}

/* ========================================================================== */
/* ========== MELHORE SEU PC: passos, cartões das peças e barra de baixo ===== */
/* ========================================================================== */


/* Passos no topo: 1 Peças · 2 Objetivo · 3 Teto · 4 Diagnóstico */
.up-passos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted);
}

.up-passos li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.up-passos li > span {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: 11px;
}

.up-passos li.is-atual {
    color: var(--text);
    font-weight: 700;
}

.up-passos li.is-atual > span {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--on-primary, #1a0f08);
}

.up-passos li.is-feito > span {
    border-color: var(--success-strong);
    color: var(--success);
}

/* Cartões das 8 peças */
.up-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
}

.up-card {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
    min-height: 134px;
    padding: 1rem 1.1rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    background: transparent;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.up-card:hover {
    border-color: var(--text-soft);
    background: var(--surface);
}

.up-card.is-obrigatorio {
    border-color: color-mix(in srgb, var(--primary) 70%, transparent);
}

.up-card.is-ok {
    border-style: solid;
    border-color: var(--success-strong);
    background: var(--surface);
}

.up-card-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}

.up-card-icone {
    display: inline-flex;
    color: var(--muted);
}

.up-card-icone .ic {
    width: 20px;
    height: 20px;
}

.up-card.is-obrigatorio .up-card-icone {
    color: var(--primary);
}

.up-card.is-ok .up-card-icone {
    color: var(--success);
}

.up-card-selo {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.up-card-selo.is-obrigatorio {
    color: var(--primary);
}

.up-card-selo.is-ok {
    color: var(--success);
}

.up-card-rotulo {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted);
}

.up-card-valor {
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.up-card-valor.is-vazio {
    font-weight: 600;
    color: var(--text-soft);
}

.up-card-detalhe {
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted);
}

.up-card-pentes {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.2rem;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted);
}

.up-card-discos {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.up-card-discos li {
    display: flex;
    flex-wrap: wrap;               /* card estreito: a quantidade desce para a linha de baixo */
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.5rem;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
}

.up-card-discos li > span:first-child {
    flex: 1 1 8rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.up-card-discos .qtd-stepper {
    flex-shrink: 0;
    margin-left: auto;
}

.up-card-acao {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    margin-top: auto;
    padding: 0.35rem 0 0;
    border: 0;
    background: none;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    cursor: pointer;
}

.up-card.is-ok .up-card-acao {
    color: var(--text-soft);
}

.up-card-acao:hover:not(:disabled) {
    text-decoration: underline;
}

.up-card-acao:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Resultado do validador para o PC informado */
.up-validacao {
    margin-top: 1rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.up-validacao.is-ok { border-color: var(--success-strong); }
.up-validacao.is-aviso { border-color: var(--amarelo); }
.up-validacao.is-erro { border-color: var(--danger); }

.up-validacao-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 14px;
}

.up-validacao-head .label {
    margin-left: auto;
}

.up-validacao.is-ok .up-validacao-head > .ic { color: var(--success); }
.up-validacao.is-aviso .up-validacao-head > .ic { color: var(--amarelo); }
.up-validacao.is-erro .up-validacao-head > .ic { color: var(--danger); }

.up-validacao-lista {
    display: grid;
    gap: 0.35rem;
    margin: 0.65rem 0 0;
    padding-left: 1.1rem;
    font-size: 13px;
    line-height: 1.5;
}

.up-validacao-lista .is-erro { color: var(--danger); }
.up-validacao-lista .is-aviso { color: var(--amarelo); }
.up-validacao-lista .is-rec { color: var(--primary); }

/* Linha de ajuda + Usar um PC salvo / Salvar PC */
.up-rodape-pecas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-top: 1.25rem;
}

.up-ajuda-linha {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-mono);
    font-size: 12px;
    text-align: left;
    color: var(--muted);
    cursor: pointer;
}

.up-ajuda-linha > .ic {
    flex-shrink: 0;
    color: var(--primary);
}

.up-ajuda-linha:hover {
    color: var(--text-soft);
}

.up-ajuda-linha kbd {
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface-2);
    font-size: 11px;
    font-weight: 700;
    color: var(--text);
}

.up-rodape-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.up-acao-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
}

.up-acao-link:hover {
    color: var(--primary);
}

.up-step .notice-rascunho {
    margin-bottom: 1rem;
}

.up-step .up-setup {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.up-step .up-setup .link-arrow {
    margin: 0;
    white-space: nowrap;
}

#up-avancar.is-pendente {
    opacity: 0.55;
}

/* Janela de escolha com opções em cartões (Dialogo.escolher) */
.dialogo-opcoes {
    display: grid;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.dialogo-opcao {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    font: inherit;
    text-align: left;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.dialogo-opcao:hover,
.dialogo-opcao:focus-visible {
    border-color: var(--primary);
    background: var(--warn-bg);
    outline: none;
}

.dialogo-opcao-icone {
    display: inline-flex;
    margin-top: 0.1rem;
    color: var(--primary);
}

.dialogo-opcao strong {
    display: block;
    font-size: 14px;
}

.dialogo-opcao strong + span {
    display: block;
    margin-top: 0.15rem;
    font-size: 12.5px;
    color: var(--muted);
}

.up-option-validador {
    color: var(--amarelo);
}

@media (max-width: 900px) {
    .up-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 600px) {
    .up-passos {
        gap: 0.4rem 0.9rem;
    }

    .up-passos li:not(.is-atual) {
        font-size: 0;
        gap: 0;
    }

    .up-cards {
        gap: 0.6rem;
    }

    .up-card {
        min-height: 118px;
        padding: 0.85rem;
    }

    .up-card-topo {
        margin-bottom: 0.5rem;
    }

    .up-card-valor {
        font-size: 14px;
    }

    .up-card-detalhe {
        display: none;
    }

}

/* ========================================================================== */
/* ========== COMPARAR: resumo, tabela lado a lado e rodapé ================== */
/* ========================================================================== */

.cx-page {
    padding: 2.5rem 0 3.5rem;
}

.cx-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    margin-bottom: 1.75rem;
}

.cx-topo h1 {
    margin: 0 0 0.5rem;
    font-size: 48px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.cx-topo .lead {
    max-width: 52ch;
    margin: 0;
}

/* Recomeçar + PC completo | Peça a peça */
.cx-topo-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
}

/* PC completo | Peça a peça */
.cx-modos {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.3rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg);
}

.cx-modos button {
    padding: 0.6rem 1.4rem;
    border: 0;
    border-radius: calc(var(--radius-lg) - 2px);
    background: none;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-soft);
    cursor: pointer;
}

.cx-modos button:hover {
    color: var(--text);
}

.cx-modos button.active {
    background: var(--surface-3);
    color: var(--text);
}

.cx-cats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    margin-bottom: 1.25rem;
}

.cx-cats[hidden] {
    display: none;
}

/* Resumo da comparação */
.cx-resumo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.cx-resumo-icone {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    background: var(--warn-bg);
    color: var(--primary);
}

.cx-resumo-icone .ic {
    width: 24px;
    height: 24px;
}

.cx-resumo-rotulo {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary);
}

.cx-resumo h2 {
    margin: 0;
    font-size: 21px;
    line-height: 1.35;
}

.cx-resumo p {
    margin: 0.4rem 0 0;
    font-family: var(--font-head);
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-soft);
}

/* Tabela */
.cx-tabela-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.cx-tabela {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    table-layout: fixed;
}

.cx-tabela th,
.cx-tabela td {
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    text-align: left;
}

.cx-tabela tbody > tr:last-child > * {
    border-bottom: 0;
}

.cx-tabela th + th,
.cx-tabela th + td,
.cx-tabela td + td {
    border-left: 1px solid var(--border);
}

.cx-tabela thead th {
    background: var(--bg);
    vertical-align: bottom;
}

/* Primeira coluna (rótulos das linhas) */
.cx-tabela tbody th {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-soft);
}

.cx-canto {
    width: 22%;
    vertical-align: middle !important;
}

.cx-contagem {
    display: block;
    margin-bottom: 0.75rem;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted);
}

.cx-diff {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
}

.cx-diff .toggle-track {
    width: 40px;
    height: 22px;
}

.cx-diff .toggle-track::after {
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
}

.cx-diff input:checked + .toggle-track::after {
    transform: translateX(18px);
}

/* Cabeçalho de cada PC / peça */
.cx-col.is-destaque {
    background: color-mix(in srgb, var(--primary) 9%, var(--bg)) !important;
    box-shadow: inset 0 3px 0 var(--primary);
}

.cx-col-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

.cx-col-rotulo {
    min-width: 0;
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--muted);
}

.cx-col.is-destaque .cx-col-rotulo {
    color: var(--primary);
}

/* "Trocar" e "+ Adicionar": o select nativo fica invisível por cima do texto */
.cx-trocar,
.cx-add {
    position: relative;
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-soft);
    cursor: pointer;
}

.cx-trocar select,
.cx-add select {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    cursor: pointer;
}

.cx-trocar:hover,
.cx-trocar:focus-within {
    color: var(--primary);
}

.cx-trocar:focus-within {
    text-decoration: underline;
}

.cx-col-titulo {
    margin: 0 0 0.75rem;
    font-family: var(--font-head);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
}

.cx-col-preco {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
}

.cx-col-preco strong {
    font-family: var(--font-head);
    font-size: 26px;
    line-height: 1.1;
    white-space: nowrap;
}

.cx-col-preco span {
    font-family: var(--font-mono);
    font-size: 12px;
    white-space: nowrap;
    color: var(--muted);
}

.cx-tabela .cx-col-add {
    vertical-align: middle;
}

.cx-add {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    font-weight: 700;
    color: var(--primary);
}

.cx-add span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.cx-add:hover,
.cx-add:focus-within {
    border-color: var(--primary);
    background: var(--warn-bg);
}

/* Faixa de seção (Preço e nota, Desempenho...) */
.cx-tabela .cx-secao th {
    padding: 0.85rem 1.4rem;
    background: var(--surface-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Células */
.cx-valor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.7rem;
}

.cx-num {
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.cx-num small {
    display: block;
    margin-top: 0.35rem;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
}

.cx-selo {
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--success-strong) 22%, transparent);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--success);
}

.cx-barra {
    display: block;
    height: 4px;
    margin-top: 0.85rem;
    border-radius: 999px;
    background: var(--surface-3);
    overflow: hidden;
}

.cx-barra > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: color-mix(in srgb, var(--primary) 45%, var(--surface-3));
}

.cx-tabela td.is-melhor {
    background: var(--ok-bg);
}

.cx-tabela td.is-melhor .cx-num {
    color: var(--success);
}

.cx-tabela td.is-melhor .cx-barra > span {
    background: var(--success);
}

.cx-vazio {
    margin: 0;
    padding: 1.25rem 1.4rem;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-soft);
}

/* Rodapé: outras formas de comparar + imprimir */
.cx-rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
}

.cx-rodape-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.cx-rodape-acoes[hidden] {
    display: none;
}

.cx-imprimir {
    font-size: 13px;
}

#cmp-root.is-loading .cx-tabela-wrap {
    opacity: 0.55;
}

@media (max-width: 760px) {
    .cx-topo h1 {
        font-size: 36px;
    }

    .cx-resumo {
        grid-template-columns: 1fr;
        padding: 1.25rem;
    }

    .cx-resumo-icone {
        display: none;
    }

    .cx-resumo .btn {
        width: 100%;
    }

    .cx-tabela th,
    .cx-tabela td {
        padding: 0.9rem 1rem;
    }

    .cx-col-preco strong {
        font-size: 21px;
    }
}

@media print {
    .cx-modos,
    .cx-cats,
    .cx-rodape,
    .cx-resumo .btn,
    .cx-trocar,
    .cx-col-add,
    .cx-diff {
        display: none !important;
    }

    .cx-tabela-wrap {
        overflow: visible;
    }
}