/* ========================================
   Gerador de CPF v2 — Lightweight & SEO-first
   System fonts · Mobile-first · Dark mode
   ======================================== */

:root {
    --accent: #059669;
    --accent-hover: #047857;
    --accent-light: #d1fae5;
    --accent-glow: rgba(5,150,105,.18);

    --bg: #ffffff;
    --bg-alt: #f8faf9;
    --bg-card: #ffffff;
    --text: #111827;
    --text2: #4b5563;
    --text3: #9ca3af;
    --border: #e5e7eb;
    --border-focus: #059669;

    --ok: #16a34a;
    --ok-bg: #dcfce7;
    --err: #dc2626;
    --err-bg: #fee2e2;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
    --shadow: 0 4px 12px rgba(0,0,0,.08);
    --shadow-lg: 0 12px 32px rgba(0,0,0,.1);

    --sans: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    --mono: 'SF Mono',SFMono-Regular,ui-monospace,'Cascadia Code','Segoe UI Mono','Roboto Mono','Courier New',monospace;

    --radius: .625rem;
    --radius-lg: 1rem;
    --speed: 180ms;
}

[data-theme="dark"] {
    --bg: #0b1120;
    --bg-alt: #111827;
    --bg-card: #1f2937;
    --text: #f3f4f6;
    --text2: #9ca3af;
    --text3: #6b7280;
    --border: #374151;
    --accent-light: rgba(5,150,105,.15);
    --ok-bg: rgba(22,163,74,.15);
    --err-bg: rgba(220,38,38,.15);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.2);
    --shadow: 0 4px 12px rgba(0,0,0,.25);
    --shadow-lg: 0 12px 32px rgba(0,0,0,.35);
}

/* ========================================
   Reset & Base
   ======================================== */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 72px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,svg { display:block; max-width:100% }
a { color:inherit; text-decoration:none }
ul { list-style:none }
button { font:inherit; cursor:pointer }
input,select { font:inherit }

/* Layout wrapper */
.wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* ========================================
   Header
   ======================================== */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    transition: background var(--speed);
}
[data-theme="dark"] .header {
    background: rgba(11,17,32,.92);
}

.header-inner {
    display: flex;
    align-items: center;
    height: 56px;
    max-width: 960px;
}

.logo {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .95rem;
    color: var(--text);
    flex-shrink: 0;
}
.logo strong { font-weight: 700 }
.logo-icon { flex-shrink:0 }

.nav {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    margin-right: .75rem;
}
.nav-list {
    display: flex;
    gap: 1.5rem;
}
.nav-link {
    font-size: .875rem;
    font-weight: 500;
    color: var(--text2);
    transition: color var(--speed);
    position: relative;
    padding: .25rem 0;
}
.nav-link:hover,
.nav-link.active {
    color: var(--accent);
}
.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0; right: 0;
    height: 2px;
    background: var(--accent);
    border-radius: 1px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Theme toggle */
.theme-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text2);
    transition: all var(--speed);
}
.theme-btn:hover { color: var(--text); border-color: var(--text3) }

.icon-sun { display:block }
.icon-moon { display:none }
[data-theme="dark"] .icon-sun { display:none }
[data-theme="dark"] .icon-moon { display:block }

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: none;
    border: none;
}
.hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform var(--speed), opacity var(--speed);
}
.hamburger.active span:nth-child(1) { transform: translateY(6px) rotate(45deg) }
.hamburger.active span:nth-child(2) { opacity: 0 }
.hamburger.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg) }

/* ========================================
   Hero / Generator
   ======================================== */
.hero {
    padding: 3rem 0 2rem;
    background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%);
}

.hero-text {
    text-align: center;
    margin-bottom: 2rem;
}
.hero-text h1 {
    font-size: clamp(1.6rem, 5vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    margin-bottom: .5rem;
}
.hero-sub {
    font-size: 1.05rem;
    color: var(--text2);
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Card */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}

/* CPF output area */
.cpf-output {
    background: var(--bg-alt);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem 1rem;
    text-align: center;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: border-color var(--speed);
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cpf-output:hover { border-color: var(--accent) }

.cpf-value {
    font-family: var(--mono);
    font-size: clamp(1.5rem, 5vw, 2.25rem);
    font-weight: 600;
    color: var(--text);
    letter-spacing: .04em;
    user-select: all;
}
.cpf-value.placeholder {
    font-family: var(--sans);
    font-size: .95rem;
    font-weight: 400;
    color: var(--text3);
    letter-spacing: normal;
}

/* Bulk list */
.cpf-list {
    max-height: 320px;
    overflow-y: auto;
    margin-bottom: 1rem;
    background: var(--bg-alt);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: .5rem;
}
.cpf-list-item {
    display: flex;
    align-items: center;
    padding: .5rem .75rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: .375rem;
    margin-bottom: .375rem;
    transition: border-color var(--speed);
}
.cpf-list-item:last-child { margin-bottom:0 }
.cpf-list-item:hover { border-color: var(--accent) }

.cpf-list-num {
    font-size: .7rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-light);
    padding: .15rem .4rem;
    border-radius: .25rem;
    min-width: 24px;
    text-align: center;
}
.cpf-list-val {
    font-family: var(--mono);
    font-size: .95rem;
    font-weight: 500;
    color: var(--text);
    letter-spacing: .02em;
    flex: 1;
    padding: 0 .75rem;
    user-select: all;
}
.cpf-list-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: .25rem;
    color: var(--text3);
    transition: all var(--speed);
}
.cpf-list-copy:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.cpf-list-copy.copied {
    background: var(--ok);
    border-color: var(--ok);
    color: #fff;
}

/* Action buttons */
.actions {
    display: flex;
    gap: .75rem;
    margin-bottom: 1rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .65rem 1.25rem;
    font-size: .9rem;
    font-weight: 600;
    border-radius: var(--radius);
    border: none;
    transition: all var(--speed);
}
.btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.btn-gen {
    flex: 1;
    background: var(--accent);
    color: #fff;
    box-shadow: 0 2px 8px var(--accent-glow);
}
.btn-gen:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px var(--accent-glow);
}
.btn-gen:active { transform: translateY(0) }

.btn-copy {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
}
.btn-copy:hover {
    background: var(--bg-alt);
    border-color: var(--text3);
}
.btn-copy.copied {
    background: var(--ok);
    border-color: var(--ok);
    color: #fff;
}

/* Options */
.options {
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.format-toggle {
    display: flex;
    gap: .5rem;
    justify-content: center;
    margin-bottom: 1rem;
}
.chip {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.chip input { position:absolute; opacity:0; pointer-events:none }
.chip span {
    display: block;
    font-size: .8125rem;
    font-weight: 500;
    padding: .35rem .85rem;
    border: 1px solid var(--border);
    border-radius: 2rem;
    color: var(--text2);
    transition: all var(--speed);
}
.chip:hover span { border-color: var(--accent); color: var(--text) }
.chip input:checked + span {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}
[data-theme="dark"] .chip input:checked + span { color: #34d399 }

.selects {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
.select-group {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.select-group label {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text2);
}
.select-group select {
    font-size: .8125rem;
    padding: .4rem .6rem;
    border: 1px solid var(--border);
    border-radius: .375rem;
    background: var(--bg);
    color: var(--text);
    transition: border-color var(--speed);
}
.select-group select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Trust badges */
.trust {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}
.trust-item {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text2);
}
.trust-item svg { color: var(--accent); flex-shrink:0 }

/* ========================================
   Sections
   ======================================== */
.section {
    padding: 3.5rem 0;
}
.section-alt {
    background: var(--bg-alt);
}
.section h2 {
    font-size: clamp(1.35rem, 3.5vw, 1.75rem);
    font-weight: 700;
    text-align: center;
    letter-spacing: -.015em;
    margin-bottom: .5rem;
}
.section-sub {
    font-size: .95rem;
    color: var(--text2);
    text-align: center;
    margin-bottom: 2rem;
}

/* ========================================
   Validator
   ======================================== */
.validator { max-width: 560px; margin: 0 auto }

.validator-row {
    display: flex;
    gap: .75rem;
    margin-bottom: .75rem;
}
.input {
    flex: 1;
    font-family: var(--mono);
    font-size: .95rem;
    padding: .65rem .85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    transition: border-color var(--speed), box-shadow var(--speed);
}
.input::placeholder { font-family: var(--sans); color: var(--text3) }
.input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.result {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .5rem;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: .9rem;
    transition: all var(--speed);
}
.result.valid  { background: var(--ok-bg);  color: var(--ok)  }
.result.invalid { background: var(--err-bg); color: var(--err) }

/* ========================================
   Steps (How it works)
   ======================================== */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.step {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    transition: box-shadow var(--speed), transform var(--speed);
}
.step:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}
.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    background: var(--accent-light);
    color: var(--accent);
    font-size: .8rem;
    font-weight: 700;
    border-radius: 50%;
    margin-bottom: .75rem;
}
[data-theme="dark"] .step-num { color: #34d399 }
.step h3 {
    font-size: .95rem;
    font-weight: 600;
    margin-bottom: .4rem;
}
.step p {
    font-size: .85rem;
    color: var(--text2);
    line-height: 1.6;
}

/* Code box */
.code-box {
    max-width: 560px;
    margin: 0 auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #1e293b;
    border: 1px solid #334155;
}
.code-bar {
    padding: .5rem .85rem;
    background: #334155;
    font-size: .75rem;
    color: #94a3b8;
    font-weight: 500;
}
.code-box pre {
    padding: 1rem;
    margin: 0;
    overflow-x: auto;
}
.code-box code {
    font-family: var(--mono);
    font-size: .8rem;
    line-height: 1.7;
    color: #e2e8f0;
}

/* ========================================
   FAQ (native <details>)
   ======================================== */
.faq-list {
    max-width: 640px;
    margin: 0 auto;
}
.faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: .5rem;
    background: var(--bg-card);
    overflow: hidden;
    transition: border-color var(--speed);
}
.faq-item[open] { border-color: var(--accent) }

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1rem;
    font-size: .925rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    transition: background var(--speed);
}
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after {
    content: '';
    width: 8px; height: 8px;
    border-right: 2px solid var(--text3);
    border-bottom: 2px solid var(--text3);
    transform: rotate(45deg);
    transition: transform var(--speed);
    flex-shrink: 0;
    margin-left: 1rem;
}
.faq-item[open] summary::after { transform: rotate(-135deg) }
.faq-item summary:hover { background: var(--bg-alt) }

.faq-item p {
    padding: 0 1rem 1rem;
    font-size: .875rem;
    color: var(--text2);
    line-height: 1.7;
}

/* ========================================
   Footer
   ======================================== */
.footer {
    background: #111827;
    color: #9ca3af;
    padding: 2.5rem 0 1.5rem;
}
[data-theme="dark"] .footer { background: #030712 }

.footer .wrap { max-width: 960px }

.footer-top {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.footer-brand { max-width: 260px }
.footer-brand .logo { color: #f3f4f6; margin-bottom: .5rem }
.footer-brand p { font-size: .8125rem; color: #6b7280; line-height: 1.5 }

.footer-nav {
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
}
.footer-nav h4 {
    font-size: .75rem;
    font-weight: 700;
    color: #f3f4f6;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .75rem;
}
.footer-nav ul li { margin-bottom: .4rem }
.footer-nav a {
    font-size: .8125rem;
    color: #6b7280;
    transition: color var(--speed);
}
.footer-nav a:hover { color: #f3f4f6 }

.footer-bottom {
    padding-top: 1.25rem;
    border-top: 1px solid #1f2937;
}
.disclaimer {
    font-size: .75rem;
    color: #6b7280;
    margin-bottom: .75rem;
    padding: .75rem;
    background: rgba(220,38,38,.08);
    border-radius: .375rem;
    border-left: 3px solid #dc2626;
    line-height: 1.5;
}
.copy {
    font-size: .75rem;
    color: #4b5563;
    text-align: center;
}

/* ========================================
   Toast
   ======================================== */
.toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .6rem 1.1rem;
    background: #111827;
    color: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    font-size: .85rem;
    font-weight: 500;
    opacity: 0;
    visibility: hidden;
    transition: all 250ms cubic-bezier(.4,0,.2,1);
    z-index: 1000;
}
.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
}
.toast svg { color: #34d399 }
[data-theme="dark"] .toast { background: #1f2937 }

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 768px) {
    .nav { display: none }
    .hamburger { display: flex }

    .nav.open {
        display: flex;
        position: absolute;
        top: 56px;
        left: 0; right: 0;
        background: var(--bg);
        border-bottom: 1px solid var(--border);
        padding: .75rem 1.25rem;
        box-shadow: var(--shadow);
    }
    .nav.open .nav-list {
        flex-direction: column;
        gap: .75rem;
        width: 100%;
    }
    .nav.open .nav-link { padding: .5rem 0 }

    .hero { padding: 2rem 0 1.5rem }
    .section { padding: 2.5rem 0 }

    .actions { flex-direction: column }
    .validator-row { flex-direction: column }

    .footer-top { flex-direction: column }
    .footer-nav { gap: 1.5rem }

    .steps { grid-template-columns: 1fr }
}

    .steps { grid-template-columns: 1fr 1fr }
    .state-table-wrap { margin: 0 -1rem }
}

@media (max-width: 480px) {
    .wrap { padding: 0 1rem }
    .card { padding: 1.15rem }
    .cpf-output { padding: 1rem .75rem }
    .selects { flex-direction: column; align-items: center }
    .trust { gap: 1rem }
    .steps { grid-template-columns: 1fr }
}

/* Prevent iOS zoom on focus */
@supports (-webkit-touch-callout: none) {
    .input, select { font-size: 16px }
}

/* ========================================
   Content Blocks (prose sections)
   ======================================== */
.content-block {
    max-width: 640px;
    margin: 0 auto;
}
.content-block h2 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 2rem 0 .5rem;
    color: var(--text);
}
.content-block h2:first-child {
    margin-top: 0;
}
.content-block h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 1.75rem 0 .5rem;
    color: var(--text);
}
.content-block h3:first-child {
    margin-top: 0;
}
.content-block p {
    font-size: .9rem;
    color: var(--text2);
    line-height: 1.75;
    margin-bottom: .75rem;
}
.content-block p:last-child {
    margin-bottom: 0;
}
.content-block a {
    color: var(--accent);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.content-block a:hover {
    color: var(--accent-hover);
}
.content-block code {
    font-family: var(--mono);
    font-size: .85em;
    background: var(--bg-alt);
    padding: .15em .4em;
    border-radius: .25rem;
    border: 1px solid var(--border);
}

/* ========================================
   State Table
   ======================================== */
.state-table-wrap {
    margin-top: 1.25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.state-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}
.state-table th,
.state-table td {
    padding: .6rem .85rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.state-table thead th {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text3);
    background: var(--bg-alt);
}
.state-table tbody td {
    color: var(--text2);
}
.state-table tbody td:first-child {
    font-family: var(--mono);
    font-weight: 600;
    color: var(--accent);
    width: 64px;
}
.state-table tbody tr:hover {
    background: var(--accent-light);
}

/* ========================================
   Examples Box (auto-generated CPFs)
   ======================================== */
.examples-box {
    max-width: 640px;
    margin: 2rem auto 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
}
.examples-box h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: .25rem;
}
.examples-box .section-sub {
    font-size: .8rem;
    margin-bottom: 1rem;
}
.examples-table {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .5rem;
}
.examples-table .example-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: .375rem;
    font-family: var(--mono);
    font-size: .85rem;
    font-weight: 500;
    color: var(--text);
    letter-spacing: .02em;
    user-select: all;
}
.examples-table .example-item .ex-num {
    font-size: .65rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-light);
    padding: .1rem .35rem;
    border-radius: .2rem;
    font-family: var(--sans);
}
[data-theme="dark"] .examples-table .example-item .ex-num { color: #34d399 }