:root { --navy:#0b1f3a; --navy2:#16325c; --gold:#c9a227; --bg:#f4f6fa; --card:#fff; --text:#1b2433; --muted:#667085; --ok:#117a4d; --warn:#b26a00; --bad:#b42318; --line:#e2e6ee; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--text); }
header { background:var(--navy); color:#fff; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
header .brand { font-weight:700; letter-spacing:.3px; } header .brand span { color:var(--gold); }
header .who { font-size:13px; opacity:.85; text-align:right; }
nav { background:var(--navy2); display:flex; overflow-x:auto; padding:0 8px; }
nav button { background:none; border:0; color:#cfd8e8; padding:12px 14px; font-size:15px; white-space:nowrap; cursor:pointer; border-bottom:3px solid transparent; }
nav button.on { color:#fff; border-bottom-color:var(--gold); font-weight:600; }
main { max-width:860px; margin:0 auto; padding:16px; }
h2 { margin:8px 0 12px; font-size:20px; } h3 { margin:0 0 8px; font-size:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:12px; }
label { display:block; font-size:13px; color:var(--muted); margin:10px 0 4px; }
input, select, textarea { width:100%; padding:11px 12px; font-size:16px; border:1px solid #c5ccda; border-radius:8px; background:#fff; color:var(--text); }
textarea { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; min-height:96px; }
input[type=checkbox] { width:auto; }
button.btn, a.btn { display:inline-block; background:var(--navy); color:#fff; border:0; border-radius:8px; padding:11px 16px; font-size:15px; cursor:pointer; text-decoration:none; margin:6px 6px 0 0; }
button.btn.gold, a.btn.gold { background:var(--gold); color:#1b2433; font-weight:600; }
button.btn.ghost { background:#fff; color:var(--navy); border:1px solid #c5ccda; }
button.btn.danger { background:var(--bad); }
button.btn:disabled { opacity:.55; cursor:wait; }
.row { display:flex; gap:10px; flex-wrap:wrap; } .row > * { flex:1 1 140px; }
.badge { display:inline-block; font-size:12px; font-weight:600; padding:2px 9px; border-radius:99px; background:#e8ecf4; color:#334; }
.badge.pago { background:#d9f2e5; color:var(--ok); } .badge.aguardando_pagamento,.badge.parcialmente_pago { background:#fff1d6; color:var(--warn); }
.badge.expirado,.badge.cancelado,.badge.reembolsado { background:#fde3e0; color:var(--bad); }
.muted { color:var(--muted); font-size:13px; } .between { display:flex; justify-content:space-between; gap:8px; align-items:baseline; flex-wrap:wrap; }
.chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; } .chip { background:#fff; border:1px solid var(--line); border-radius:99px; padding:4px 12px; font-size:13px; }
.chip.bad { border-color:var(--bad); color:var(--bad); font-weight:600; }
.late { color:var(--bad); font-weight:600; } .today { color:var(--warn); font-weight:600; }
.charge { border-top:1px dashed var(--line); padding-top:8px; margin-top:8px; font-size:14px; }
.notice { background:#fff8e1; border:1px solid #f0d98a; border-radius:10px; padding:10px 12px; font-size:14px; margin-bottom:12px; }
.login { max-width:380px; margin:12vh auto; padding:0 16px; } .login h1 { color:var(--navy); text-align:center; } .login h1 span { color:var(--gold); }
#toast { position:fixed; left:50%; bottom:18px; transform:translateX(-50%); max-width:92vw; background:var(--navy); color:#fff; padding:10px 16px; border-radius:10px; font-size:14px; display:none; z-index:9; }
#toast.err { background:var(--bad); } #toast.show { display:block; }
table { width:100%; border-collapse:collapse; font-size:14px; } td,th { text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:middle; }