:root { --ink:#15202b; --muted:#62707b; --line:#dbe2e8; --paper:#f5f7f9; --card:#fff; --accent:#0d6b5d; --soft:#e2f2ee; --danger:#a12b32; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font:15px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif; }
.shell { width:min(1280px,calc(100% - 2rem)); margin:auto; padding:2rem 0 3rem; }
.page-head,.section-head,.head-actions { display:flex; align-items:end; justify-content:space-between; gap:1rem; }
.page-head { margin-bottom:1.5rem; }
h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:.4rem; font-size:clamp(2rem,5vw,3.25rem); line-height:1.03; letter-spacing:-.04em; } h2 { margin-bottom:1rem; font-size:1.15rem; }
.lede { margin:0; color:var(--muted); font-size:1.05rem; }.eyebrow { margin-bottom:.35rem; color:var(--accent); font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.card { padding:1.15rem; border:1px solid var(--line); border-radius:15px; background:var(--card); box-shadow:0 8px 25px #15202b0b; }
.connection,.filters,.table-card,.detail { margin-bottom:1.1rem; }.connection-grid,.filters-grid { display:grid; gap:.8rem 1rem; }.connection-grid { grid-template-columns:1fr 1fr; }.filters-grid { grid-template-columns:repeat(5,minmax(130px,1fr)); }
label { display:grid; gap:.3rem; color:var(--muted); font-size:.8rem; font-weight:700; } input,select { width:100%; min-height:2.45rem; padding:.5rem .6rem; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--card); font:inherit; }
code { padding:.1rem .25rem; border-radius:4px; background:var(--soft); }.hint,.status { margin:.65rem 0 0; color:var(--muted); font-size:.82rem; }.status.error { color:var(--danger); font-weight:700; }
button { min-height:2.45rem; padding:.5rem .8rem; border:1px solid var(--accent); border-radius:8px; color:var(--accent); background:var(--card); font:inherit; font-weight:750; cursor:pointer; } button.primary { color:#fff; background:var(--accent); } button.quiet { border-color:var(--line); color:var(--ink); } button:disabled { cursor:not-allowed; opacity:.48; } button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #76cfc0; outline-offset:2px; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:1rem; margin:1.1rem 0; }.kpi { display:grid; gap:.4rem; }.kpi.test { border-style:dashed; }.kpi span,.kpi small { color:var(--muted); font-size:.8rem; }.kpi strong { font-size:1.45rem; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; min-width:850px; } th,td { padding:.75rem .6rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; } th { color:var(--muted); font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; } td { font-size:.88rem; } tbody tr:last-child td { border-bottom:0; } .store-name { font-weight:750; }.store-id { display:block; color:var(--muted); font-size:.74rem; }.usage { color:var(--muted); font-size:.78rem; }.status-pill { display:inline-block; padding:.2rem .45rem; border-radius:99px; background:var(--soft); font-size:.76rem; }.status-pill.inactive { color:var(--danger); background:#fcebed; }.empty { padding:1.8rem .5rem; color:var(--muted); text-align:center; }
.detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }.detail-item { display:grid; gap:.15rem; padding:.7rem; border:1px solid var(--line); border-radius:9px; }.detail-item dt { color:var(--muted); font-size:.76rem; }.detail-item dd { margin:0; font-weight:700; }.detail-wide { grid-column:1/-1; }
dialog { width:min(620px,calc(100% - 2rem)); padding:0; border:0; border-radius:15px; color:var(--ink); background:var(--card); box-shadow:0 24px 70px #15202b40; } dialog::backdrop { background:#15202b80; } dialog form { padding:1.2rem; } .store-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .store-form-grid label:first-child { grid-column:1/-1; } .store-form-grid button { align-self:end; } .credential-warning { color:var(--danger); font-weight:700; } .credential-grid { display:grid; gap:.7rem; } .credential-grid div { min-width:0; } .credential-grid dt { color:var(--muted); font-size:.76rem; } .credential-grid dd { margin:.15rem 0 0; overflow-wrap:anywhere; user-select:all; } .credential-grid code { display:block; padding:.55rem; }
footer { margin-top:1.8rem; color:var(--muted); text-align:center; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:850px) { .connection-grid,.filters-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }.detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .shell { width:calc(100% - 1rem); padding-top:1rem; }.page-head,.section-head { align-items:start; flex-direction:column; }.page-head button { width:100%; }.head-actions { display:grid; width:100%; }.connection-grid,.filters-grid,.kpis,.detail-grid,.store-form-grid { grid-template-columns:1fr; }.store-form-grid label:first-child { grid-column:auto; }.detail-wide { grid-column:auto; } }