:root { color-scheme:dark; --bg:#101219; --panel:#1a1f2b; --panel-alt:#222839; --border:#343d50; --text:#edf2fa; --muted:#a1acc0; --blue:#4da6ff; --green:#30ce88; }
* { box-sizing:border-box } body { margin:0; background:var(--bg); color:var(--text); font:15px/1.5 system-ui,-apple-system,'Segoe UI',sans-serif; }
a { color:var(--blue); text-decoration:none } a:hover { text-decoration:underline } h1,h2,h3,p { margin-top:0 } h1 { font-size:clamp(26px,3vw,36px); margin-bottom:6px } h2 { font-size:20px; margin-bottom:8px } .muted { color:var(--muted) } .overline { color:var(--blue); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin-bottom:9px } .soft { color:var(--muted); font-weight:400 } .button { display:inline-flex;align-items:center;justify-content:center;padding:10px 15px;gap:6px;border-radius:9px;background:var(--panel-alt);color:var(--text);border:1px solid var(--border);cursor:pointer;font:inherit;font-weight:650;text-decoration:none;white-space:nowrap } .button:hover { text-decoration:none;filter:brightness(1.12) } .button.primary { color:#071725; background:var(--blue); border-color:var(--blue) } .button.ghost { background:transparent } .button.danger { border-color:#9c4959; color:#ff9da8 } .button.secondary { background:#2a3142 } input,select { width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:#141824;color:var(--text);font:inherit;min-width:0 } input:focus,select:focus { outline:2px solid var(--blue);outline-offset:1px } label { display:grid;gap:6px;font-weight:620;color:#d7e2f3 } label input, label select { font-weight:400 } .stack { display:grid;gap:14px } .form-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px } .form-grid .wide { grid-column:1/-1 } .checkbox-label { display:flex;align-items:center;gap:10px } .checkbox-label input { width:auto }
.auth-page { min-height:100vh;display:grid;place-items:center;padding:18px;background:radial-gradient(circle at 50% -30%,#27425e,transparent 60%),var(--bg) } .login-card { width:min(100%,420px);padding:36px;border:1px solid var(--border);border-radius:18px;background:var(--panel);box-shadow:0 18px 70px #0007 }.login-card h1 { margin:14px 0 3px }.login-card .stack { margin-top:26px }.login-card .primary { margin-top:6px }.brand-icon { color:var(--blue);font-size:30px;line-height:1;vertical-align:middle }.app-header { min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px clamp(20px,4vw,56px);border-bottom:1px solid var(--border);background:#181d28 }.brand { color:var(--text);font-weight:800;font-size:20px;white-space:nowrap }.header-actions { display:flex;align-items:center;gap:12px;flex-wrap:wrap }.header-actions form { margin:0 }.user-chip { display:flex;flex-direction:column;line-height:1.2;font-weight:650 }.user-chip small { color:var(--muted);font-weight:400;margin-top:3px }.page-wrap { max-width:1440px;margin:0 auto;padding:35px clamp(20px,4vw,56px) 80px }.intro-row { display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px }.intro-row p:last-child { margin-bottom:0 }.count-bubble { display:inline-block;flex:none;padding:5px 12px;background:#27354b;color:#9bcaff;border-radius:40px;font-size:13px;font-weight:700 }.notice { padding:12px 15px;border:1px solid #486183;background:#23344e;border-radius:9px;margin-bottom:20px }.create-panel { background:var(--panel);padding:17px 20px;border:1px dashed #566a86;border-radius:12px;margin-bottom:22px }.create-panel summary { cursor:pointer;color:#a5d4ff;font-weight:800 }.create-panel summary:hover { color:white }.filters { display:flex;align-items:center;gap:16px;margin:25px 0 20px }.search-field { flex:1;max-width:460px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--border);background:var(--panel);border-radius:10px }.search-field input { border:0;background:transparent }.diagram-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));align-items:start;gap:18px }.diagram-card { padding:23px;background:var(--panel);border:1px solid var(--border);border-radius:15px;min-width:0;box-shadow:0 8px 20px #0002 }.diagram-card[hidden] { display:none }.diagram-card h2 { margin:20px 0 7px;overflow-wrap:anywhere }.card-top { display:flex;align-items:center;justify-content:space-between }.client-label { padding:5px 11px;background:#283c50;border-radius:7px;color:#9bcaff;font-size:12px;font-weight:700 }.diagram-dot { height:9px;width:9px;border-radius:50%;background:var(--green) }.card-description { min-height:44px;color:var(--muted);overflow-wrap:anywhere }.card-meta { color:#8594ac;font-size:12px;border-top:1px solid var(--border);padding-top:14px }.card-actions { display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:16px }.card-options { width:100% }.card-options summary { list-style:none;cursor:pointer;width:fit-content }.card-options summary::-webkit-details-marker { display:none }.card-options[open] { padding-top:10px }.card-options .stack { margin-top:14px }.sub-actions { display:flex;gap:10px;margin-top:10px }.empty-state { padding:50px;text-align:center;background:var(--panel);border:1px dashed var(--border);border-radius:14px }.admin-section { margin:24px 0 42px }.section-heading { margin-bottom:20px }.section-heading h2 { display:flex;align-items:center;gap:14px }.admin-rows { display:grid;gap:10px }.admin-row { border:1px solid var(--border);border-radius:10px;background:var(--panel) }.admin-row summary { cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 19px;flex-wrap:wrap }.admin-row > form { padding:0 19px 20px }.admin-row .muted { font-size:13px }
@media (max-width:700px) { .app-header { align-items:flex-start;flex-direction:column }.intro-row { align-items:flex-start;flex-direction:column }.page-wrap { padding-top:25px }.form-grid { grid-template-columns:1fr }.user-chip { display:none }.card-actions { flex-direction:column;align-items:stretch }.card-actions>.button { width:100% } .diagram-grid { grid-template-columns:1fr }.login-card { padding:26px } }

.filters select { width:min(100%,260px);background:var(--panel) }
.client-picker[hidden] { display:none !important }
@media(max-width:700px){.filters {flex-direction:column;align-items:stretch}.filters .search-field{max-width:none}.filters select{width:100%}}