:root{--red:#b91c3c;--bg:#f8f9fa;--border:#e5e7eb;--ink:#111827;--grey:#6b7280;--green:#16a34a;--amber:#d97706;--blue:#2563eb}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:14px}
a{color:inherit;text-decoration:none}
.app{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
.side{background:#fff;border-right:1px solid var(--border);padding:18px 0}
.brand{padding:0 18px 14px;border-bottom:1px solid var(--border);margin-bottom:12px}
.brand .t1{color:var(--red);font-weight:800;font-size:19px;letter-spacing:.3px}
.brand .t2{font-weight:800;font-style:italic;font-size:15px;color:#111}
.brand .sub{font-size:10px;color:var(--grey);text-transform:uppercase;letter-spacing:1.5px;margin-top:3px}
.nav a{display:block;padding:9px 18px;color:#374151;font-weight:600;font-size:13.5px;border-left:3px solid transparent}
.nav a:hover{background:#fdf2f4}
.nav a.on{color:var(--red);background:#fdf2f4;border-left-color:var(--red)}
.nav .grp{font-size:10px;color:#9ca3af;text-transform:uppercase;letter-spacing:1.2px;padding:14px 18px 5px}
.main{padding:22px 28px 60px}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.crumb{color:var(--grey);font-size:12.5px}
.crumb b{color:var(--ink)}
.build{font-size:10.5px;color:#9ca3af;text-align:right;line-height:1.5}
h1{font-size:22px;margin-bottom:4px}
.sub1{color:var(--grey);margin-bottom:18px}
.cards{display:grid;gap:14px;margin-bottom:18px}
.c4{grid-template-columns:repeat(4,1fr)}.c5{grid-template-columns:repeat(5,1fr)}
.c3{grid-template-columns:repeat(3,1fr)}.c2{grid-template-columns:1fr 1fr}
.card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:16px}
.kpi .v{font-size:24px;font-weight:800}
.kpi .l{font-size:11px;color:var(--grey);text-transform:uppercase;letter-spacing:.6px;margin-top:2px}
.kpi .d{font-size:11.5px;font-weight:700;margin-top:6px}
.up{color:var(--green)}.down{color:var(--red)}.flat{color:var(--grey)}
.card h3{font-size:14.5px;margin-bottom:12px}
table{width:100%;border-collapse:collapse;background:#fff}
th{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--grey);text-align:left;padding:9px 10px;border-bottom:2px solid var(--border)}
td{padding:9px 10px;border-bottom:1px solid #f1f2f4;font-size:13px}
tr:hover td{background:#fafbfc}
td.r,th.r{text-align:right}
.tbl{background:#fff;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700}
.b-act{background:#dcfce7;color:#15803d}.b-trial{background:#dbeafe;color:#1d4ed8}
.b-susp{background:#fef3c7;color:#92400e}.b-term{background:#f3f4f6;color:#6b7280}
.b-paid{background:#dcfce7;color:#15803d}.b-sent{background:#dbeafe;color:#1d4ed8}
.b-over{background:#fee2e2;color:#b91c1c}.b-draft{background:#f3f4f6;color:#6b7280}
.btn{display:inline-block;background:var(--red);color:#fff;border:none;border-radius:7px;padding:8px 16px;font-weight:700;font-size:13px;cursor:pointer}
.btn.sec{background:#fff;color:var(--ink);border:1px solid var(--border)}
.btn.sm{padding:5px 10px;font-size:12px}
.btn.warn{background:var(--amber)}.btn.ghost{background:transparent;color:var(--red);border:1px solid var(--red)}
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.inp,select.inp{border:1px solid var(--border);border-radius:7px;padding:8px 12px;font-size:13px;background:#fff;font-family:inherit}
.bars{display:flex;align-items:flex-end;gap:8px;height:120px;padding-top:8px}
.bars .b{flex:1;background:linear-gradient(180deg,#d64560,var(--red));border-radius:4px 4px 0 0;position:relative}
.bars .b span{position:absolute;top:-18px;left:0;right:0;text-align:center;font-size:10px;color:var(--grey);font-weight:700}
.bars .b i{position:absolute;bottom:-18px;left:0;right:0;text-align:center;font-size:10px;color:#9ca3af;font-style:normal}
.hbar{margin:7px 0}
.hbar .lbl{display:flex;justify-content:space-between;font-size:12px;margin-bottom:3px}
.hbar .trk{background:#f1f2f4;border-radius:4px;height:9px}
.hbar .fil{background:var(--red);border-radius:4px;height:9px}
.pricebox{display:flex;align-items:center;gap:14px}
.pricebox .val{font-size:30px;font-weight:800;color:var(--red)}
.pricebox input{width:90px;font-size:20px;font-weight:800;text-align:right;border:2px solid var(--red);border-radius:8px;padding:6px 8px;color:var(--red)}
.note{font-size:12px;color:var(--grey)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ok{color:var(--green);font-weight:800}.ko{color:var(--red);font-weight:800}
.chain{font-family:ui-monospace,monospace;font-size:11.5px;color:var(--grey)}
.tabs{display:flex;gap:2px;border-bottom:2px solid var(--border);margin-bottom:14px}
.tabs a{padding:9px 16px;font-weight:700;font-size:13px;color:var(--grey);border-bottom:2px solid transparent;margin-bottom:-2px}
.tabs a.on{color:var(--red);border-bottom-color:var(--red)}
.field{margin-bottom:13px}
.field label{display:block;font-size:12px;font-weight:700;color:#374151;margin-bottom:4px}
.field .inp{width:100%}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.detail-row td{background:#fbfbfc;color:var(--grey);font-size:12px}
.slider{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.slider label{width:170px;font-size:12.5px;font-weight:700}
.slider input[type=range]{flex:1;accent-color:var(--red)}
.slider .v{width:80px;text-align:right;font-weight:800}
.banner{border-radius:8px;padding:10px 14px;font-size:13px;font-weight:600;margin-bottom:14px}
.banner.info{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af}
.banner.okb{background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d}
.banner.kob{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}
.mock{position:fixed;bottom:12px;right:14px;background:#111827;color:#fff;font-size:10.5px;padding:4px 10px;border-radius:14px;opacity:.75}
svg text{font-family:Inter,system-ui,sans-serif}