:root {
    --ink: #10231c;
    --ink-2: #1b3329;
    --leaf: #1b7a4e;
    --leaf-2: #146640;
    --cream: #f3efe6;
    --paper: #fffdf8;
    --line: #d9d0c2;
    --muted: #6b6458;
    --err: #9b2c2c;
    --warn: #9a6b12;
    --ok: #1b7a4e;
    --info: #2c5f8a;
    --gold: #c4a574;
    --shadow: 0 18px 40px rgba(16, 35, 28, .08);
    --radius: 18px;
    --sidebar: 248px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
    font-family: Sora, sans-serif;
    color: var(--ink);
    background: var(--cream);
    line-height: 1.5;
}
a { color: var(--leaf-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: Newsreader, Georgia, serif; font-weight: 650; letter-spacing: -.02em; margin: 0 0 .4em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.25rem; }
p { margin: 0 0 1rem; }
code { font-size: .82em; background: #efe8d8; padding: .1em .35em; border-radius: 6px; }
img { max-width: 100%; }

.guest-body {
    min-height: 100vh;
    background:
        radial-gradient(1200px 500px at 10% -10%, #2d6a4f 0%, transparent 55%),
        linear-gradient(180deg, #10231c 0%, #163328 48%, #f3efe6 48%);
    color: var(--paper);
}

.topbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 22px 8vw; color: #fff;
}
.topbar a { color: #fff; }
.topbar-actions { display: flex; gap: 18px; align-items: center; }

.brand { display: flex; gap: 10px; align-items: center; font-weight: 700; color: inherit; }
.brand small { display: block; font-weight: 400; opacity: .7; font-size: .72rem; }
.brand-mark {
    width: 38px; height: 38px; border-radius: 12px;
    background: var(--gold); color: var(--ink);
    display: grid; place-items: center; font-size: .78rem; font-weight: 700;
}
.brand-light { color: #fff; text-decoration: none; }

.hero { padding: 4vh 8vw 8vh; max-width: 880px; color: #fff; }
.hero h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1.05; }
.lead { font-size: 1.15rem; max-width: 560px; opacity: .88; }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .7rem; color: var(--gold); font-weight: 600; margin-bottom: .4rem; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 1.5rem; }

.plans { padding: 40px 8vw 80px; color: var(--ink); }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.plan-card {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 22px; box-shadow: var(--shadow);
}
.plan-card.is-current { outline: 2px solid var(--leaf); }
.price { font-family: Newsreader, serif; font-size: 2rem; margin: .2rem 0 1rem; }
.price small { font-size: 1rem; color: var(--muted); }
.plan-card ul { padding-left: 1.1rem; margin: 0 0 1.2rem; color: var(--muted); }
.site-foot { padding: 0 8vw 40px; color: var(--muted); }

.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.auth-card {
    width: 100%; max-width: 420px; background: var(--paper); color: var(--ink);
    border-radius: 24px; padding: 36px 32px; box-shadow: var(--shadow);
}
.auth-wide { max-width: 560px; }
.auth-card h1 { margin-top: .6rem; }
.center { text-align: center; }
.muted { color: var(--muted); }

.app-body { display: flex; min-height: 100vh; background: var(--cream); }
.sidebar {
    width: var(--sidebar); background: var(--ink); color: #e8efe9;
    display: flex; flex-direction: column; padding: 22px 0; flex-shrink: 0;
}
.sidebar-sa { background: #1a1713; }
.sidebar .brand { padding: 0 20px 24px; color: #fff; text-decoration: none; }
.sidebar nav { display: flex; flex-direction: column; gap: 4px; padding: 0 10px; flex: 1; }
.sidebar nav a {
    color: #c5d4cb; text-decoration: none; padding: 10px 14px; border-radius: 12px; font-weight: 500;
}
.sidebar nav a.on, .sidebar nav a:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.sidebar-foot { padding: 16px 18px 8px; }
.uso-mini { background: rgba(255,255,255,.06); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; font-size: .78rem; }
.uso-mini strong { display: block; margin: 4px 0; }
.uso-mini i { display: block; height: 4px; background: rgba(255,255,255,.15); border-radius: 9px; }
.uso-mini i::after { content: ""; display: block; width: var(--p); height: 4px; background: var(--gold); border-radius: 9px; }
.who { display: flex; justify-content: space-between; gap: 8px; font-size: .82rem; }
.who a { color: var(--gold); }

.main { flex: 1; padding: 28px 32px 60px; min-width: 0; }
.page-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; margin-bottom: 22px; flex-wrap: wrap; }
.card {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 22px; box-shadow: var(--shadow); margin-bottom: 18px;
}
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.empty { color: var(--muted); padding: 12px 0; }
.form-narrow { max-width: 640px; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.stat span { color: var(--muted); font-size: .78rem; }
.stat strong { display: block; font-size: 1.6rem; font-family: Newsreader, serif; margin-top: 4px; }
.stat small { font-size: 1rem; color: var(--muted); }

.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th { text-align: left; color: var(--muted); font-weight: 500; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.table th, .table td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table td .muted { margin-top: 2px; }

.bar { height: 6px; background: #efe8d8; border-radius: 9px; overflow: hidden; min-width: 90px; }
.bar i { display: block; height: 100%; background: var(--leaf); }

.badge { display: inline-flex; align-items: center; border-radius: 999px; padding: .15em .6em; font-size: .75rem; font-weight: 600; }
.badge-ok { background: #d7f0e2; color: #146640; }
.badge-err { background: #f8d7d7; color: #9b2c2c; }
.badge-warn { background: #f8e7c5; color: #7a5410; }
.badge-info { background: #d7e6f4; color: #2c5f8a; }
.badge-muted { background: #ece7dc; color: #5c564b; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: #fff; color: var(--ink); border: 1px solid var(--line);
    border-radius: 999px; padding: 10px 16px; font: inherit; font-weight: 600;
    cursor: pointer; text-decoration: none;
}
.btn:hover { text-decoration: none; background: #f7f2e8; }
.btn-primary { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.btn-primary:hover { background: var(--leaf-2); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn-danger { color: var(--err); border-color: #e7c3c3; }
.btn-sm { padding: 6px 10px; font-size: .8rem; }
.btn-block { width: 100%; }
.btn-sm.btn-primary { color: #fff; }

.stack { display: grid; gap: 12px; }
.stack label, label { display: grid; gap: 6px; font-size: .86rem; font-weight: 500; }
input, select, textarea {
    font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
    background: #fff; color: var(--ink); width: 100%;
}
textarea { resize: vertical; }
.grid-2, .grid-3 { display: grid; gap: 12px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.hint { font-size: .8rem; color: var(--muted); margin: 0; }
.split { display: grid; grid-template-columns: 1.5fr .9fr; gap: 16px; align-items: start; }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-form.wrap { align-items: flex-end; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row-actions form { margin: 0; }

.flash { border-radius: 12px; padding: 10px 14px; margin-bottom: 16px; }
.flash-ok { background: #d7f0e2; color: #146640; }
.flash-erro { background: #f8d7d7; color: #9b2c2c; }
.flash-center { max-width: 640px; margin: 12px auto; }
.banner { background: #efe4c8; color: #5c430d; padding: 10px 14px; border-radius: 12px; margin-bottom: 14px; }
.banner-err { background: #f8d7d7; color: #9b2c2c; }
.banner-warn { background: #f3e0b5; }

.qr-box { margin-top: 18px; text-align: center; padding-top: 12px; border-top: 1px solid var(--line); }
.qr-box img { width: 220px; height: 220px; background: #fff; padding: 8px; border-radius: 12px; }
.model-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.model-card img { border-radius: 12px; height: 120px; object-fit: cover; width: 100%; margin-bottom: 10px; }
.group-pick { border: 1px solid var(--line); border-radius: 14px; padding: 12px; max-height: 320px; overflow: auto; }
.group-pick legend { padding: 0 6px; }
.check, .check-all { display: flex; gap: 8px; align-items: center; font-weight: 400; margin: 6px 0; }
.check input, .check-all input { width: auto; }
.check span { flex: 1; }
.check small { color: var(--muted); }
.msg-preview { white-space: pre-wrap; background: #f7f2e8; padding: 14px; border-radius: 12px; }
.clip { word-break: break-all; }
.pix-card textarea { font-family: ui-monospace, monospace; font-size: .8rem; }
details { background: #f7f2e8; padding: 10px 12px; border-radius: 12px; }
details summary { cursor: pointer; font-weight: 600; }

@media (max-width: 980px) {
    .app-body { flex-direction: column; }
    .sidebar { width: 100%; }
    .sidebar nav { flex-direction: row; overflow: auto; }
    .stat-grid, .split, .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .main { padding: 18px; }
}