/* Rota 10 — paleta azul e branco */
:root {
  --bg: #f6f4ee;
  --soft: #eeece4;
  --line: #d8d7cd;
  --text: #262b24;
  --muted: #66695f;
  --blue: #be432e;
  --blue-dark: #262b24;
  --blue-light: #f3e6df;
  --ok: #15803d;
  --ok-bg: #ecfdf3;
  --bad: #b91c1c;
  --bad-bg: #fef2f2;
  --radius: 3px;
  --mono: "Courier New", monospace;
  --font: "Helvetica Neue", Arial, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.55; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; color: var(--blue-dark); }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
.muted { color: var(--muted); }
.hidden { display: none !important; }
.center { text-align: center; }

.container { width: min(1080px, 100% - 32px); margin-inline: auto; }
.narrow { width: min(760px, 100% - 32px); margin-inline: auto; }

/* Cabeçalho */
.topbar { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--line); }
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; color: var(--blue-dark); letter-spacing: -.01em; }
.brand:hover { text-decoration: none; }
.brand svg { flex: none; }
.nav { display: flex; align-items: center; gap: 22px; }
.nav a:not(.btn), .nav button.link { color: var(--text); font-weight: 500; font-size: .95rem; }
.nav a:not(.btn):hover { color: var(--blue); text-decoration: none; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--blue-light); color: var(--blue-dark); }

/* Botões e formulários */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 3px; border: 1px solid var(--blue);
  font: inherit; font-weight: 600; cursor: pointer; background: var(--blue); color: #fff;
}
.btn:hover { background: var(--blue-dark); border-color: var(--blue-dark); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.secondary { background: #fff; color: var(--blue); }
.btn.secondary:hover { background: var(--blue-light); }
.btn.light { background: #fff; color: var(--blue); border-color: #fff; }
.btn.small { padding: 6px 12px; font-size: .9rem; }
.btn.block { width: 100%; }
button.link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--blue); }

label { display: block; font-weight: 600; margin-bottom: 6px; }
.field { margin-bottom: 18px; }
.hint { font-size: .85rem; color: var(--muted); margin-top: 4px; }
input[type=text], input[type=email], input[type=tel], input[type=password], select, textarea {
  width: 100%; padding: 10px 12px; border-radius: 3px; border: 1px solid var(--line);
  background: #fff; color: var(--text); font: inherit;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); }
input[type=range] { width: 100%; accent-color: var(--blue); }

.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.choice { position: relative; margin: 0; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span { display: block; padding: 11px 12px; border: 1px solid var(--line); border-radius: 3px; background: #fff; cursor: pointer; font-weight: 600; text-align: center; }
.choice span small { display: block; font-weight: 400; color: var(--muted); font-size: .8rem; }
.choice input:checked + span { border-color: var(--blue); background: var(--blue-light); color: var(--blue-dark); }
.choice input:focus-visible + span { outline: 2px solid var(--blue); }
.choice input:disabled + span { opacity: .5; cursor: not-allowed; }

/* Cards e grids */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Entrar */
.auth-wrap { min-height: calc(100vh - 58px); display: grid; place-items: center; padding: 32px 16px; background: var(--soft); }
.auth-card { width: min(420px, 100%); }
.auth-card h1 { text-align: center; }
.auth-foot { text-align: center; margin-top: 18px; font-size: .95rem; }

/* App */
.page { padding: 28px 0 64px; }
.name-form { margin-top: 16px; max-width: 460px; }
.name-form label { display: block; font-weight: 600; margin-bottom: 8px; }
.name-form-row { display: flex; gap: 10px; }
.name-form-row input { flex: 1; min-width: 0; }
.dedication { text-align: center; color: var(--muted); font-size: 15px; margin: 48px 0 0; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.list { display: flex; flex-direction: column; gap: 8px; }
.list-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 3px; background: #fff; color: var(--text); width: 100%; font: inherit; text-align: left; cursor: pointer; }
.list-item:hover { border-color: var(--blue); text-decoration: none; }
.list-item .meta { font-size: .85rem; color: var(--muted); }
.empty { text-align: center; padding: 24px; color: var(--muted); }
.stat { font-size: 1.7rem; font-weight: 800; color: var(--blue-dark); }

.progress { display: flex; gap: 6px; margin-bottom: 20px; }
.progress span { flex: 1; height: 4px; border-radius: 99px; background: var(--line); }
.progress span.done { background: var(--blue); }
.step { display: none; }
.step.active { display: block; }
.wizard-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }

.dropzone { border: 2px dashed var(--line); border-radius: 3px; padding: 26px; text-align: center; background: var(--soft); cursor: pointer; }
.dropzone.drag { border-color: var(--blue); background: var(--blue-light); }
.file-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.file-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 99px; background: var(--blue-light); color: var(--blue-dark); font-size: .85rem; }
.file-chip button { border: 0; background: none; color: var(--blue-dark); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; }

/* Prova */
.question { padding: 18px 0; border-bottom: 1px solid var(--line); }
.question:last-child { border-bottom: 0; }
.q-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.q-num { font-weight: 800; color: var(--blue); }
.q-points { font-size: .82rem; color: var(--muted); white-space: nowrap; }
.q-statement { white-space: pre-wrap; margin-bottom: 12px; }
.option { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-radius: 3px; border: 1px solid var(--line); margin-bottom: 8px; cursor: pointer; font-weight: 400; }
.option:hover { border-color: var(--blue); }
.option input { margin-top: 5px; accent-color: var(--blue); }
.option.correct { border-color: var(--ok); background: var(--ok-bg); }
.option.wrong { border-color: var(--bad); background: var(--bad-bg); }

.score { font-size: 3rem; font-weight: 800; color: var(--blue); line-height: 1; margin-bottom: 8px; }
.verdict { display: inline-block; padding: 1px 9px; border-radius: 99px; font-size: .78rem; font-weight: 700; margin-left: 6px; }
.verdict.correct { background: var(--ok-bg); color: var(--ok); }
.verdict.partial { background: var(--blue-light); color: var(--blue-dark); }
.verdict.incorrect, .verdict.blank { background: var(--bad-bg); color: var(--bad); }
.fb-box { background: var(--soft); border-radius: 3px; padding: 10px 12px; margin-top: 10px; font-size: .95rem; white-space: pre-wrap; }
.fb-box strong { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 3px; }
.actions-bar { display: flex; gap: 8px; flex-wrap: wrap; }

/* Carregando / avisos */
.overlay { position: fixed; inset: 0; background: rgba(255, 255, 255, .92); display: grid; place-items: center; z-index: 50; text-align: center; padding: 16px; }
.spinner { width: 40px; height: 40px; border: 4px solid var(--line); border-top-color: var(--blue); border-radius: 50%; animation: spin .9s linear infinite; margin: 0 auto 14px; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 60; background: var(--blue-dark); color: #fff; padding: 11px 16px; border-radius: 3px; max-width: calc(100% - 32px); }
.toast.error { background: var(--bad); }

@media (max-width: 600px) {
  .card { padding: 16px; }
  .nav .hide-sm { display: none; }
}

/* Diálogo de checkout */
#checkout { background: rgba(15, 31, 61, .55); }

/* Painel /processamento */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stats .card { padding: 14px 16px; }
.stats .muted { font-size: .85rem; }
.tabs-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.tabs-bar button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; }
.tabs-bar button.active { color: var(--blue); border-bottom-color: var(--blue); }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar input, .toolbar select { width: auto; flex: 1; min-width: 180px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { background: var(--soft); color: var(--blue-dark); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
tr:last-child td { border-bottom: 0; }
td .btn { padding: 4px 10px; font-size: .82rem; }
.tag { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: .78rem; font-weight: 600; background: var(--blue-light); color: var(--blue-dark); }
.tag.ok { background: var(--ok-bg); color: var(--ok); }
.tag.bad { background: var(--bad-bg); color: var(--bad); }
.tag.off { background: var(--soft); color: var(--muted); }
.grant-form { display: grid; grid-template-columns: 2fr 1fr 110px auto; gap: 10px; align-items: end; }
.grant-form .field { margin: 0; }
@media (max-width: 700px) { .grant-form { grid-template-columns: 1fr; } }

/* Editorial application system */
:root { color-scheme:light; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
::selection { background:#e8efae;color:#262b24; }
:focus-visible { outline:2px solid var(--blue);outline-offset:4px; }
.container { width:min(1160px,100% - 80px); }
.topbar { background:var(--bg); }
.topbar .container { height:84px; }
.brand { gap:8px;font-size:26px;font-weight:700;letter-spacing:-1.5px; }
.brand img { margin-right:3px; }
.brand-number { font-weight:400;margin-left:-7px; }
.nav { gap:28px; }
.nav a:not(.btn),.nav button.link { font-size:13px; }
.btn { border-radius:3px;font-size:13px;padding:12px 19px;transition:background .15s; }
.btn span[aria-hidden] { margin-left:18px; }
.btn.secondary { background:transparent;color:var(--text);border-color:var(--line); }
.btn.light { background:#e8efae;border-color:#e8efae;color:var(--text); }
.btn.light:hover { background:#dbe494; }
h1,h2,h3 { color:var(--text); }
.card { padding:28px;background:#fffdf8; }
.page { padding-top:48px; }
.page-head { margin-bottom:32px; }
.page-head h1 { font-size:36px;letter-spacing:-1.5px;font-weight:500; }
.stat { font:48px/1.4 Georgia,serif; }
#dashboard>.grid.cols-3 { gap:0;border:1px solid var(--line);background:#eeece4; }
#dashboard>.grid.cols-3>.card { background:none;border:0;border-right:1px solid var(--line);border-radius:0; }
#dashboard>.grid.cols-3>.card:last-child { border:0; }
#dashboard>.grid.cols-2 { grid-template-columns:1.2fr 1fr;gap:24px; }
#dashboard h3 { font-size:18px;letter-spacing:-.4px;font-weight:500;padding-bottom:17px;border-bottom:1px solid var(--line); }
#dashboard>.card:last-child { background:#e8efae; }
.list-item { border-width:0 0 1px;border-radius:0;padding:17px 0;background:transparent; }
.empty { padding:40px 15px;font-size:14px; }
label { font-size:13px; }
input[type=text],input[type=email],input[type=tel],input[type=password],select,textarea { padding:13px;background:#fffdf8;font-size:15px; }
.field { margin-bottom:23px; }
.auth-wrap { grid-template-columns:1fr 1fr;gap:80px;max-width:1160px;margin:auto;min-height:calc(100vh - 85px);padding:70px 40px;background:transparent; }
.auth-story h2 { font-size:clamp(45px,6vw,78px);font-weight:500;line-height:1.02;letter-spacing:-.065em; }
.auth-product h2 { font-size:clamp(38px,4.2vw,58px);line-height:1.12;letter-spacing:-.045em; }
.auth-story em { font-family:Georgia,serif;color:var(--blue);font-weight:400; }
.auth-story p { color:var(--muted);font-size:14px;line-height:1.8;margin-top:30px; }
.auth-index { display:block;margin-top:70px;font:10px var(--mono);letter-spacing:.08em; }
.eyebrow { display:block;font:10px var(--mono);letter-spacing:.1em;color:var(--blue);margin-bottom:25px; }
.auth-card { padding:36px; }
.auth-card h1 { text-align:left;font-size:30px;font-weight:500;letter-spacing:-1px; }
.auth-card>.center { text-align:left;font-size:14px;margin:15px 0 30px; }
.auth-foot { font-size:12px; }
#checkout .auth-card { max-height:calc(100dvh - 32px);overflow-y:auto; }
#checkout { background:#262b24b3; }
.dropzone { padding:40px 20px;border-width:1px; }
.question { padding:27px 0; }
.q-num { font-family:var(--mono); }
.tabs-bar button { font-size:13px; }
th { font:10px var(--mono); }
.badge,.tag,.file-chip,.verdict { border-radius:3px; }
.skip-link { position:fixed;top:-100px;left:20px;z-index:100;padding:14px;background:var(--text);color:white; }
.skip-link:focus { top:10px; }
@media(max-width:800px){.container{width:calc(100% - 48px)}.auth-wrap{gap:30px;padding:45px 24px}.auth-card{padding:25px}.nav{gap:16px}}
@media(max-width:640px){.container{width:calc(100% - 40px)}.topbar .container{height:76px}.brand{font-size:24px}.brand img{width:32px;height:32px}.auth-wrap{grid-template-columns:1fr;padding:35px 20px;gap:25px}.auth-story h2{font-size:45px}.auth-story h2 br:nth-child(2){display:none}.auth-story p,.auth-index{display:none}.auth-story .eyebrow{margin-bottom:18px}.auth-card{width:100%;max-width:440px}.page{padding-top:30px}.page-head h1{font-size:30px}#dashboard>.grid.cols-3{grid-template-columns:1fr}#dashboard>.grid.cols-3>.card{border-right:0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:16px 20px}.stat{font-size:32px}#dashboard>.grid.cols-2{grid-template-columns:1fr}.card{padding:20px}.narrow{width:calc(100% - 32px)}#wizard.narrow{width:100%}.tabs-bar{overflow-x:auto}.tabs-bar button{white-space:nowrap}.grid.cols-2{grid-template-columns:1fr}.actions-bar .btn{flex:1 1 140px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition:none!important}}
