/* Response — design system compartilhado entre public/ e admin/.
   Extraído do app.html v1. Mudou de lugar, não de identidade visual. */
:root {
  --red:#a3182a; --red-deep:#7d1220; --ink:#222222; --paper:#fbfaf8;
  --quiet:#e9e6e1; --mist:#f2f0ed; --muted:#6a6865; --line:#d9d5d1;
  --alert-bg:#fdeeee; --ok:#1e7d46; --faint:#8d8883;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,system-ui,sans-serif; font-size:15px; line-height:1.55; }
button { font:inherit; color:inherit; cursor:pointer; }
input, textarea, select { font:inherit; color:inherit; }
::selection { background:var(--red); color:#fff; }
:focus-visible { outline:2px solid var(--red); outline-offset:2px; }
@media (prefers-reduced-motion:reduce) { .view { animation:none; } }

/* ---------- Estrutura ---------- */
.topbar { position:sticky; top:0; z-index:20; background:rgba(251,250,248,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.topbar-in { max-width:1080px; margin:auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.wordmark { font-weight:800; letter-spacing:-.045em; font-size:19px; line-height:1; text-decoration:none; color:var(--ink); }
.wordmark em { font-style:normal; color:var(--red); }
.wordmark small { display:block; font:500 8px "DM Mono",monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:5px; }
.topnav { display:flex; align-items:center; gap:18px; margin-left:auto; }
.topnav a { font:500 11px "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:var(--muted); }
.topnav a:hover { color:var(--red); }

.view { max-width:1080px; margin:auto; padding:0 20px 90px; animation:rise .45s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.narrow { max-width:600px; }
.wide { max-width:1080px; }

.eyebrow { display:flex; align-items:center; gap:10px; font:500 10px "DM Mono",monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin:44px 0 0; }
.eyebrow::before { content:""; width:26px; height:1px; background:var(--red); }
h1 { font-size:clamp(38px,8.4vw,64px); line-height:.96; letter-spacing:-.065em; font-weight:800; margin:18px 0 18px; }
h1 .dot-red { color:var(--red); }
.lede { color:#55514e; font-size:15.5px; line-height:1.7; max-width:520px; margin:0 0 34px; }
.serif { font-family:Newsreader,serif; font-weight:500; }

/* ---------- Formulário ---------- */
.field { margin-bottom:26px; }
.flabel { display:block; font:800 10px Manrope,sans-serif; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.flabel .opt { font-weight:500; text-transform:none; letter-spacing:.02em; color:var(--faint); }
textarea, .tin { width:100%; border:1px solid var(--line); background:#fff; padding:14px 15px; font-size:15px; line-height:1.5; border-radius:0; outline:none; transition:border-color .15s; appearance:none; }
textarea:focus, .tin:focus { border-color:var(--ink); }
textarea { min-height:110px; resize:vertical; }
.hint { font-size:12px; color:#8b8783; margin-top:7px; }

.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip { border:1px solid var(--line); background:#fff; padding:10px 15px; font-size:13px; font-weight:600; border-radius:0; transition:all .15s; }
.chip.on { background:var(--ink); border-color:var(--ink); color:#fff; }
.chip.on.urgent { background:var(--red); border-color:var(--red); }

.seg { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); background:#fff; }
.seg button { border:0; background:transparent; padding:14px 6px; font-size:13px; font-weight:600; }
.seg button + button { border-left:1px solid var(--line); }
.seg button small { display:block; font:400 9px "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
.seg button.on { background:var(--ink); color:#fff; }
.seg button.on small { color:#c9c5c1; }

.attach-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.attach-btn { border:1px dashed #c4bfba; background:#fff; padding:12px 16px; font-size:13px; font-weight:600; color:#55514e; }
.thumb { width:58px; height:58px; object-fit:cover; border:1px solid var(--line); }
.thumb-vid { width:58px; height:58px; border:1px solid var(--line); background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font:500 9px "DM Mono",monospace; }

.cta { display:block; width:100%; border:0; background:var(--red); color:#fff; padding:19px 20px; font-size:15px; font-weight:800; letter-spacing:-.01em; text-align:center; border-radius:0; transition:background .15s; margin-top:34px; }
.cta:hover { background:var(--red-deep); }
.cta:disabled { background:#c9c5c1; cursor:not-allowed; }
.btn-ghost { border:1px solid var(--ink); background:transparent; color:var(--ink); padding:13px 18px; font-size:13px; font-weight:700; border-radius:0; }
.btn-ghost:hover { background:var(--ink); color:#fff; }
.btn-line { border:1px solid var(--line); background:#fff; padding:12px 16px; font-size:13px; font-weight:600; border-radius:0; }
.btn-line:hover { border-color:var(--ink); }

/* ---------- Selo ---------- */
.seal { background:var(--red); color:#fff; padding:30px 28px; margin-top:56px; }
.seal small { font:500 9px "DM Mono",monospace; letter-spacing:.14em; text-transform:uppercase; opacity:.85; }
.seal strong { display:block; font-size:26px; line-height:1.05; letter-spacing:-.045em; margin:12px 0 14px; }
.seal .promise { font-size:13px; line-height:1.55; opacity:.92; margin:0; border-top:1px solid rgba(255,255,255,.35); padding-top:14px; }

/* ---------- Painéis genéricos (usados no admin e em telas de confirmação) ---------- */
.proto { font:500 11px "DM Mono",monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.panel { background:#fff; border:1px solid var(--line); padding:22px; margin-bottom:16px; }
.back { display:inline-block; margin-top:34px; font:500 11px "DM Mono",monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-decoration:none; }
.back:hover { color:var(--ink); }
.empty { padding:44px 22px; text-align:center; color:var(--muted); font-size:13.5px; }
.foot-sig { margin-top:70px; padding-top:18px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font:400 10px "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.pill { display:inline-block; font:800 9px Manrope,sans-serif; letter-spacing:.1em; text-transform:uppercase; padding:5px 9px; border:1px solid var(--line); color:var(--muted); }
.pill.red { border-color:var(--red); color:var(--red); }
.pill.ink { background:var(--ink); border-color:var(--ink); color:#fff; }
.pill.ok { border-color:var(--ok); color:var(--ok); }

@media (max-width:760px) {
  .topbar-in { padding:12px 16px; }
  .view { padding:0 16px 70px; }
}