:root { --navy:#0b1f33; --ink:#173144; --soft:#607383; --teal:#1f8f83; --pale:#e7f5f3; --line:#d8e2e8; --paper:#f4f7f8; --red:#991b1b; font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
* { box-sizing:border-box; }body { margin:0; color:var(--ink); background:var(--paper); }header { min-height:72px; padding:1rem 4vw; display:flex; align-items:center; justify-content:space-between; background:#fff; border-bottom:1px solid var(--line); }.brand { display:flex; align-items:center; gap:.7rem; color:var(--navy); text-decoration:none; }.brand > span { width:42px;height:42px;display:grid;place-items:center;color:#fff;background:var(--navy);border-radius:12px;font-weight:900; }.brand strong { display:grid; }.brand small { color:var(--soft);font-weight:500; }main { width:min(1440px,94vw);margin:auto;padding:2.5rem 0 5rem; }.heading,.panel-heading,.dialog-heading { display:flex;align-items:center;justify-content:space-between;gap:1rem; }.eyebrow { margin:0;color:var(--teal);font-size:.7rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase; }h1 { margin:.2rem 0;color:var(--navy);font-size:clamp(2.2rem,5vw,4.5rem);letter-spacing:-.05em; }h2,h3 { color:var(--navy); }.button { padding:.7rem .95rem;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:9px;font:inherit;font-weight:800;text-decoration:none;cursor:pointer; }.button.primary { color:#fff;background:var(--teal);border-color:var(--teal); }.button.secondary { color:#fff;background:var(--navy);border-color:var(--navy); }.button.warning { color:#fff;background:#a16207;border-color:#a16207; }.button.danger { color:#fff;background:var(--red);border-color:var(--red); }.button.small { padding:.45rem .7rem;font-size:.75rem; }.metrics { margin:2rem 0;display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem; }.metrics article,.panel,.card { padding:1rem;background:#fff;border:1px solid var(--line);border-radius:14px; }.metrics article { min-height:130px;display:grid;align-content:start;gap:.55rem; }.metrics article > span { color:var(--soft);font-size:.75rem; }.metrics strong { color:var(--navy);font-size:2rem; }.metrics article div { display:flex;flex-wrap:wrap;gap:.35rem; }.metrics article div span { padding:.28rem .5rem;background:var(--pale);border-radius:999px;font-size:.7rem; }.panel { padding:1.2rem; }.filters { display:flex;gap:.5rem; }.filters input { min-width:240px; }input,select,textarea { width:100%;padding:.68rem;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:8px;font:inherit; }label { display:grid;gap:.35rem;color:var(--soft);font-size:.78rem;font-weight:700; }.table-wrap { overflow-x:auto; }table { width:100%;border-collapse:collapse; }th,td { padding:.75rem;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap; }th { color:var(--soft);font-size:.68rem;text-transform:uppercase; }.message { margin:1rem 0;padding:.8rem;color:#7c2d12;background:#ffedd5;border-radius:9px; }.message.success { color:#166534;background:#dcfce7; }.loading { padding:5rem;text-align:center; }.hidden { display:none!important; }dialog { width:min(560px,calc(100% - 2rem));padding:0;border:0;border-radius:16px;box-shadow:0 25px 80px rgba(11,31,51,.25); }dialog::backdrop { background:rgba(11,31,51,.62); }.wide-dialog { width:min(1180px,calc(100% - 2rem));max-height:90vh; }.dialog-content,dialog form { padding:1.2rem;display:grid;gap:.8rem; }.wide-dialog > .dialog-content { overflow-y:auto;max-height:90vh; }.detail-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem; }.card { display:grid;gap:.7rem; }.critical { border-color:#f59e0b;background:#fffbeb; }.danger-zone { margin-top:1rem;padding:1rem!important;background:#fff1f2;border:1px solid #fda4af;border-radius:14px; }.danger-zone h3 { color:var(--red); }.usage-item { display:grid;gap:.35rem; }.usage-item > div:first-child { display:flex;justify-content:space-between; }.usage-item > div:last-child { height:9px;overflow:hidden;background:var(--paper);border-radius:999px; }.usage-item i { height:100%;display:block;background:var(--teal); }.stack { display:grid;gap:.45rem;max-height:260px;overflow:auto; }.stack p { margin:0;padding:.55rem;background:var(--paper);border-radius:8px;font-size:.75rem;line-height:1.45; }.form-message { margin:0;color:var(--red);font-size:.75rem; }
@media (max-width:980px) { .metrics { grid-template-columns:repeat(2,1fr); }.detail-grid { grid-template-columns:1fr; } }
@media (max-width:620px) { main { width:min(100% - 1rem,1440px); }.heading,.panel-heading,.dialog-heading,.filters { align-items:stretch;flex-direction:column; }.metrics { grid-template-columns:1fr; }.filters input { min-width:0; } }