:root { color-scheme: light; --ink:#17252a; --muted:#637377; --paper:#f5f7f4; --surface:#fff; --line:#d9e1dc; --brand:#103f49; --brand-soft:#dcebed; --accent:#d9a755; --danger:#9b2c2c; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--paper); }
button,input,select { font:inherit; } button { cursor:pointer; } [hidden] { display:none!important; }
.topbar { min-height:92px; padding:20px clamp(20px,4vw,64px); display:flex; align-items:center; justify-content:space-between; color:#fff; background:linear-gradient(120deg,#0d343d,#175867); box-shadow:0 8px 24px rgba(16,63,73,.15); }
.topbar h1 { margin:2px 0 0; font-size:clamp(1.7rem,3vw,2.35rem); }
.eyebrow { margin:0; color:var(--accent); font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.ghost { padding:10px 14px; color:#fff; border:1px solid rgba(255,255,255,.5); border-radius:10px; background:transparent; }
.session-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; } .session-actions span { font-size:.88rem; }
main { padding:clamp(20px,3vw,42px); } footer { padding:18px clamp(20px,4vw,64px); color:var(--muted); font-size:.85rem; }
.login-card,.notice { max-width:480px; margin:8vh auto; padding:32px; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:0 20px 60px rgba(27,52,58,.1); }
.login-card h2 { margin:8px 0 12px; font-size:1.8rem; } .login-card form { display:grid; gap:10px; margin-top:24px; }
label,.search-label { font-weight:700; } input,select { width:100%; padding:12px 13px; border:1px solid #bdcac5; border-radius:10px; background:#fff; color:var(--ink); }
input:focus { outline:3px solid rgba(23,88,103,.18); border-color:var(--brand); }
.primary { padding:12px 16px; color:#fff; border:0; border-radius:10px; background:var(--brand); font-weight:800; }
.form-error,.notice.error { color:var(--danger); }
.help { margin:0; color:var(--muted); font-size:.85rem; } code { overflow-wrap:anywhere; }
.app-shell { max-width:1500px; min-height:640px; margin:0 auto; display:grid; grid-template-columns:minmax(280px,370px) 1fr; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--surface); box-shadow:0 18px 50px rgba(27,52,58,.08); }
.sidebar { padding:22px; border-right:1px solid var(--line); background:#f9fbf9; }
.tabs { display:grid; gap:8px; margin-bottom:22px; } .tab { display:flex; justify-content:space-between; padding:11px 12px; border:1px solid transparent; border-radius:10px; color:var(--ink); background:transparent; text-align:left; font-weight:750; }
.tab:hover,.tab.active { border-color:#b9ced1; background:var(--brand-soft); color:var(--brand); } .tab span { min-width:2.2em; text-align:right; }
.search-label { display:block; margin-bottom:7px; font-size:.85rem; } .results { display:grid; gap:8px; max-height:510px; margin-top:16px; overflow-y:auto; }
.result { display:grid; gap:5px; width:100%; padding:13px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); text-align:left; }
.result span { color:var(--muted); font-size:.82rem; line-height:1.35; } .result:hover,.result.selected { border-color:var(--brand); box-shadow:0 0 0 2px rgba(16,63,73,.08); }
.detail { min-width:0; padding:clamp(24px,4vw,52px); } .detail h2 { margin:6px 0 24px; font-size:clamp(1.7rem,3vw,2.45rem); } .detail h3 { margin:32px 0 13px; }
.empty { display:grid; min-height:480px; place-content:center; color:var(--muted); text-align:center; }
.facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--line); }
.facts div { min-width:0; padding:14px; background:#fff; } .facts dt { margin-bottom:5px; color:var(--muted); font-size:.78rem; font-weight:800; text-transform:uppercase; } .facts dd { margin:0; overflow-wrap:anywhere; }
.cards { display:grid; gap:10px; } .cards article { display:grid; gap:5px; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:#fbfcfb; } .cards span { color:var(--muted); font-size:.9rem; }
.loading,.empty-list { color:var(--muted); }
.query-shell { max-width:1200px; margin:0 auto; padding:clamp(24px,4vw,48px); border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:0 18px 50px rgba(27,52,58,.08); }
.query-heading { display:flex; justify-content:space-between; align-items:start; gap:20px; }
.query-heading h2 { margin:6px 0 18px; font-size:clamp(1.7rem,3vw,2.4rem); }
.query-heading > span { padding:7px 10px; border-radius:999px; color:var(--brand); background:var(--brand-soft); font-size:.82rem; font-weight:800; }
#query-form { display:grid; gap:10px; margin-top:26px; }
textarea { min-height:230px; width:100%; resize:vertical; padding:15px; border:1px solid #bdcac5; border-radius:10px; color:#d8f3e7; background:#102b32; font:500 .95rem/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; tab-size:2; }
textarea:focus { outline:3px solid rgba(23,88,103,.18); border-color:var(--brand); }
#query-form .primary { justify-self:start; min-width:170px; }
.query-status { min-height:1.5em; margin:22px 0 10px; font-weight:700; }
.query-result { max-height:520px; overflow:auto; border:1px solid var(--line); border-radius:12px; }
.query-result:empty { display:none; }
.query-result table { width:100%; border-collapse:collapse; background:#fff; font-size:.88rem; }
.query-result th,.query-result td { padding:10px 12px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); text-align:left; white-space:pre-wrap; vertical-align:top; }
.query-result th { position:sticky; top:0; color:#fff; background:var(--brand); }
.query-result td { max-width:460px; overflow-wrap:anywhere; }
dialog { width:min(860px,calc(100vw - 32px)); max-height:calc(100vh - 32px); padding:28px; border:1px solid var(--line); border-radius:18px; color:var(--ink); background:var(--surface); overflow:auto; } dialog::backdrop { background:rgba(9,31,36,.62); } .dialog-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; } .dialog-heading h2 { margin:5px 0; } .close-button { border:0; background:transparent; color:var(--muted); font-size:2rem; line-height:1; } .user-create-form { display:grid; grid-template-columns:1fr 1fr 180px auto; gap:10px; align-items:end; margin:24px 0 30px; } .user-create-form label { display:grid; gap:7px; } .user-create-form .form-error { grid-column:1/-1; margin:0; } .user-list { display:grid; gap:12px; } .user-row { display:grid; grid-template-columns:minmax(120px,1fr) minmax(150px,1fr) 130px minmax(180px,1fr) auto; gap:12px; align-items:end; padding:15px; border:1px solid var(--line); border-radius:12px; } .user-row label { display:grid; gap:6px; font-size:.82rem; } .user-row label span { color:var(--muted); font-weight:400; } .user-row .checkbox { display:flex; align-items:center; gap:8px; padding-bottom:12px; } .user-row .checkbox input { width:auto; } .row-error { grid-column:1/-1; margin:0; }
@media (max-width:820px) { .app-shell { grid-template-columns:1fr; } .sidebar { border-right:0; border-bottom:1px solid var(--line); } .results { max-height:330px; } .facts { grid-template-columns:1fr; } }
@media (max-width:900px) { .user-create-form,.user-row { grid-template-columns:1fr; } .user-row .checkbox { padding:0; } }