:root { --ink:#20282d; --muted:#6b777d; --quiet:#8c989d; --canvas:#f3f6f5; --surface:#ffffff; --surface-soft:#f8faf9; --line:#dce4e1; --line-strong:#c9d4d0; --sidebar:#173239; --sidebar-muted:#aabec0; --accent:#117b74; --accent-strong:#0b625c; --accent-soft:#d9f0e9; --green:#1b7451; --green-soft:#e1f4e9; --amber:#925d00; --amber-soft:#fff2d7; --red:#a13740; --red-soft:#fae6e8; }
* { box-sizing:border-box; }
html, body { max-width:100%; overflow-x:hidden; }
body { margin:0; color:var(--ink); background:var(--canvas); font:14px/1.5 Arial, sans-serif; }
.app-frame { min-height:100vh; display:grid; grid-template-columns:232px minmax(0, 1fr); }
.sidebar { display:flex; position:sticky; top:0; height:100vh; flex-direction:column; padding:22px 14px 16px; background:var(--sidebar); color:#edf5f4; }
.brand { display:flex; align-items:center; gap:10px; padding:2px 8px 26px; color:#fff; font-size:16px; font-weight:700; line-height:1.05; text-decoration:none; }
.brand-mark { display:grid; width:34px; height:34px; place-items:center; border:1px solid #83c9bd; border-radius:6px; color:#bff2e8; font-size:11px; letter-spacing:0; }
.sidebar-section > p { margin:0 8px 8px; color:#8fa7aa; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0; }
nav { display:grid; gap:3px; } nav a { display:flex; align-items:center; min-height:37px; padding:0 11px; border-radius:5px; color:var(--sidebar-muted); text-decoration:none; } nav a:hover { color:#fff; background:#24474e; } nav a.active { color:#fff; background:var(--accent); box-shadow:inset 3px 0 #a9e5d6; } nav a span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account { display:flex; align-items:center; gap:9px; margin-top:auto; padding:13px 8px 2px; border-top:1px solid #31545a; }
.account-avatar { display:grid; width:29px; height:29px; flex:0 0 29px; place-items:center; border-radius:50%; background:#3b6870; color:#fff; font-size:12px; font-weight:700; }.account-name { display:grid; min-width:0; gap:1px; }.account-name strong { overflow:hidden; color:#f4faf9; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.account-name span { color:#9db7ba; font-size:11px; }
.link-button { padding:3px; border:0; background:none; color:#b6cbcc; cursor:pointer; font:inherit; font-size:11px; }.link-button:hover { color:#fff; }
.workspace { min-width:0; }.workspace-header { display:flex; align-items:center; justify-content:space-between; height:54px; padding:0 34px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.9); color:var(--muted); font-size:13px; }.header-status { padding:3px 8px; border-radius:4px; background:var(--accent-soft); color:var(--accent-strong); font-size:11px; font-weight:700; }
main { min-width:0; max-width:1480px; margin:0 auto; padding:30px 34px 44px; }main, section, aside { min-width:0; }.page-title { display:flex; align-items:flex-end; min-height:58px; margin-bottom:24px; }.eyebrow { margin:0 0 5px; color:var(--accent); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0; }h1, h2, p { margin-top:0; } h1 { margin-bottom:0; color:#1a272b; font-size:29px; line-height:1.1; letter-spacing:0; }h2 { margin-bottom:7px; color:#26343a; font-size:17px; line-height:1.3; }.muted, .section-header p { color:var(--muted); }.notice { margin:0 0 20px; padding:11px 13px; border-left:3px solid var(--green); background:var(--green-soft); color:var(--green); font-weight:700; }
.metrics { display:grid; grid-template-columns:repeat(4, minmax(150px, 1fr)); gap:12px; margin-bottom:32px; }.metric { display:flex; min-height:106px; flex-direction:column; justify-content:space-between; padding:16px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink); text-decoration:none; box-shadow:0 1px 2px rgba(30,51,49,.03); }.metric:hover { border-color:#99b9b2; transform:translateY(-1px); }.metric span { color:var(--muted); font-size:12px; }.metric strong { color:#1d3938; font-size:27px; line-height:1; }
.section-header { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin:26px 0 13px; }.section-header p { margin-bottom:0; max-width:650px; }.two-column { display:grid; grid-template-columns:minmax(0, 1fr) 350px; gap:28px; align-items:start; }.form-panel { padding:20px; border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:6px; background:var(--surface); box-shadow:0 1px 2px rgba(30,51,49,.03); }.form-panel h2 { margin-bottom:17px; }
.rule-summary { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px 22px; margin:0; padding:16px 18px; border:1px solid var(--line); border-radius:6px; background:var(--surface); list-style:none; }.rule-summary li { display:flex; align-items:baseline; justify-content:space-between; gap:12px; min-width:0; padding:7px 0; border-bottom:1px solid #e5ebe8; }.rule-summary strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.rule-summary span { flex:0 0 auto; color:var(--muted); font-size:12px; }
.table-wrap a, .rule-summary a { color:var(--accent-strong); font-weight:700; text-decoration:none; }.table-wrap a:hover, .rule-summary a:hover { text-decoration:underline; }.response-variants { display:grid; gap:12px; }.response-variants > h2 { margin:0; }.response-variant { padding:18px; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:6px; background:var(--surface); }.response-variant h3 { margin:0 0 9px; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:0; }.response-variant p { margin:0; white-space:pre-wrap; }
.stack { display:grid; gap:14px; }label { display:grid; gap:5px; color:#3d4b50; font-size:12px; font-weight:700; }input, select, textarea { width:100%; min-width:0; border:1px solid var(--line-strong); border-radius:4px; padding:8px 9px; outline:0; color:var(--ink); background:#fff; font:14px/1.4 Arial, sans-serif; }input:focus, select:focus, textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(17,123,116,.13); }textarea { resize:vertical; }.checkbox { display:flex; align-items:center; gap:8px; font-weight:400; }.checkbox input { width:auto; accent-color:var(--accent); }
button, .secondary-button { display:inline-flex; min-height:36px; align-items:center; justify-content:center; padding:7px 12px; border:1px solid var(--accent); border-radius:4px; background:var(--accent); color:#fff; cursor:pointer; font:700 13px Arial, sans-serif; text-decoration:none; }button:hover { border-color:var(--accent-strong); background:var(--accent-strong); }.secondary-button, .small-button { background:#fff; color:var(--accent-strong); }.secondary-button:hover, .small-button:hover { background:#edf8f5; }.small-button { min-height:29px; padding:4px 8px; font-size:12px; }.danger { border-color:#e0aaaf; color:var(--red); }.danger:hover { border-color:var(--red); background:var(--red); color:#fff; }
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:6px; background:var(--surface); box-shadow:0 1px 2px rgba(30,51,49,.03); }table { width:100%; min-width:640px; border-collapse:collapse; }th, td { padding:11px 12px; border-bottom:1px solid #e5ebe8; text-align:left; vertical-align:top; }th { background:var(--surface-soft); color:#627076; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0; }tbody tr:hover td { background:#fbfdfc; }tbody tr:last-child td { border-bottom:0; }.template-body { max-width:310px; white-space:pre-wrap; }.empty { padding:25px; color:var(--quiet); text-align:center; }.actions { display:flex; gap:6px; }.actions form { margin:0; }
.status { display:inline-flex; align-items:center; min-height:23px; padding:2px 7px; border-radius:4px; font-size:11px; font-weight:700; }.status.success { background:var(--green-soft); color:var(--green); }.muted-status { background:var(--amber-soft); color:var(--amber); }.danger-status { background:var(--red-soft); color:var(--red); }.health { margin-top:18px; padding:15px; border-left:3px solid var(--amber); background:var(--amber-soft); }.health.ready { border-color:var(--green); background:var(--green-soft); }.health ul { margin:8px 0 0; padding-left:18px; }.form-error { padding:11px 13px; border-left:3px solid var(--red); background:var(--red-soft); color:var(--red); font-weight:700; }
.login-body { min-height:100vh; display:grid; place-items:center; padding:22px; background:#e8efee; }.login-panel { width:min(100%, 410px); padding:32px; border:1px solid var(--line); border-top:4px solid var(--accent); border-radius:6px; background:var(--surface); box-shadow:0 14px 36px rgba(24,50,55,.12); }.login-panel h1 { margin-bottom:9px; font-size:27px; }.login-panel .muted { margin-bottom:24px; }
@media (max-width:980px) { .app-frame { display:block; }.sidebar { position:static; height:auto; overflow:hidden; padding:12px 16px; }.brand { padding:0 0 12px; }.sidebar-section > p { display:none; }nav { display:flex; overflow-x:auto; gap:4px; }nav a { flex:0 0 auto; }.account { position:absolute; top:9px; right:12px; margin:0; padding:0; border:0; }.workspace-header { padding:0 20px; }main { padding:24px 20px 38px; }.two-column { grid-template-columns:minmax(0, 1fr); }.form-panel { max-width:520px; }.table-wrap { max-width:100%; }.metrics { grid-template-columns:repeat(2, minmax(0, 1fr)); }}
@media (max-width:560px) { .account-name, .link-button { display:none; }.sidebar { padding-right:64px; }.workspace-header { height:46px; padding:0 16px; }.header-status { display:none; }main { padding:20px 16px 32px; }.page-title { min-height:0; margin-bottom:20px; }h1 { font-size:25px; }.metrics { grid-template-columns:1fr; gap:9px; }.metric { min-height:84px; }.section-header { align-items:flex-start; flex-direction:column; }.two-column { gap:20px; }.form-panel { padding:17px; } }
@media (max-width:720px) { .rule-summary { grid-template-columns:1fr; }.rule-summary li { align-items:flex-start; flex-direction:column; gap:2px; } }
@media (max-width:980px) { nav { scrollbar-width:none; }nav::-webkit-scrollbar { display:none; } }