:root { --blue: #1d4ed8; --line: #d4d4d8; --muted: #52525b; font-family: system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #f4f4f5; color: #18181b; }
.shell { max-width: 640px; margin: 0 auto; padding: 0.5rem 0.75rem 3rem; }
.shell.wide { max-width: 960px; }
.card { background: #fff; border-radius: 12px; padding: 1.25rem; margin: 1rem auto; border: 1px solid var(--line); }
.narrow { max-width: 420px; }
header, .status, .daybar, .row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.status { font-size: 0.85rem; color: var(--muted); padding: 0.25rem 0; }
.dot::before { content: '● '; }
.dot.on { color: #15803d; }
.dot.off { color: #b91c1c; }
label { display: block; margin: 0.6rem 0; font-size: 0.9rem; }
input, select, textarea { display: block; width: 100%; padding: 0.6rem; margin-top: 0.2rem; font: inherit; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
button, .btn { font: inherit; padding: 0.55rem 0.9rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; text-decoration: none; color: inherit; }
button.primary { background: var(--blue); border-color: var(--blue); color: #fff; margin: 0.4rem 0; }
button.big { width: 100%; padding: 1rem; font-size: 1.1rem; }
button:disabled { opacity: 0.6; }
.tabs { display: flex; gap: 0.4rem; margin: 0.5rem 0; overflow-x: auto; }
.tabs .on { background: var(--blue); color: #fff; border-color: var(--blue); }
.item { display: flex; align-items: center; gap: 0.75rem; width: 100%; text-align: start; margin: 0.4rem 0; background: #fff; }
.item.static { justify-content: space-between; border: 1px solid var(--line); border-radius: 8px; padding: 0.6rem 0.9rem; }
.item.col { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
.st { font-size: 1.4rem; }
.muted, small { color: var(--muted); }
.err { color: #b91c1c; }
.warn { background: #fef3c7; border: 1px solid #f59e0b; border-radius: 8px; padding: 0.6rem; margin: 0.5rem 0; }
.flag { color: #b45309; font-size: 0.85rem; }
table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin: 0.75rem 0; overflow-x: auto; display: block; }
th, td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--line); text-align: start; }
footer { margin-top: 2rem; font-size: 0.75rem; color: var(--muted); text-align: center; }
.shell.wide { max-width: 1040px; }
nav.tabs button { white-space: nowrap; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; margin: 0.6rem 0; }
.tile { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem; }
.tile b { display: block; font-size: 1.3rem; }
.tag { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 99px; font-size: 0.75rem; background: #e4e4e7; }
.tag.paid, .tag.active { background: #dcfce7; } .tag.overdue, .tag.suspended { background: #fee2e2; } .tag.partial, .tag.open, .tag.trial { background: #fef3c7; }
.keybox { word-break: break-all; font-family: ui-monospace, monospace; font-size: 0.75rem; background: #f4f4f5; border: 1px dashed #71717a; border-radius: 8px; padding: 0.6rem; margin: 0.5rem 0; max-height: 9rem; overflow: auto; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.75rem; }
.num { text-align: end; white-space: nowrap; }
.invoice { background: #fff; max-width: 720px; margin: 1rem auto; padding: 2rem; border: 1px solid var(--line); }
@media print { body { background: #fff; } .noprint, .tabs, header, footer { display: none !important; } .invoice { border: 0; margin: 0; padding: 0; max-width: none; } .shell { padding: 0; } }