:root{
    color-scheme:light;
    --ink:#18201d;
    --muted:#69736f;
    --line:#dfe5e2;
    --surface:#f5f7f6;
    --green:#2e6c52;
    --red:#9b3d3d;
    font:15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}
body{margin:0;
    background:var(--surface);
    color:var(--ink)}
button,input{font:inherit}
.auth-card{
    width:min(420px,calc(100% - 32px));
    margin:10vh auto;
    padding:34px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px}
.brand-mark{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    background:var(--ink);
    color:#fff;
    border-radius:11px;
    font-weight:700}
.brand-mark.small{
    width:30px;
    height:30px;
    border-radius:8px}
.eyebrow{
    text-transform:uppercase;
    letter-spacing:.11em;
    font-size:12px;
    color:var(--green);
    font-weight:700;
    margin:22px 0 5px}
.auth-card h1{margin:0 0 8px}
.muted{color:var(--muted)}
label{display:grid;gap:6px;margin:18px 0;font-weight:600}
input{width:100%;padding:12px;border:1px solid #bfc8c4;border-radius:9px;background:#fff}
input:focus{outline:3px solid #cfe3d9;border-color:var(--green)}button{border:0;border-radius:9px;padding:11px 16px;background:var(--ink);color:#fff;font-weight:650;cursor:pointer}form button{width:100%}.method{display:flex;align-items:center;font-weight:400}.method input{width:auto}.error{min-height:22px;color:var(--red)}.shell{min-height:100vh;display:grid;grid-template-columns:248px 1fr}aside{position:sticky;top:0;height:100vh;background:#fff;border-right:1px solid var(--line);padding:24px 18px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:10px}.environment{margin:24px 5px 16px;color:var(--muted);font-size:13px}.environment span{display:inline-block;width:8px;height:8px;border-radius:50%;background:#42a874;margin-right:7px}nav{display:grid;gap:3px}nav a{padding:9px 10px;border-radius:8px;text-decoration:none;color:var(--muted);text-transform:capitalize}nav a:hover,nav a.active{background:#edf3f0;color:var(--ink)}.account{margin-top:auto;padding:16px 6px 0;border-top:1px solid var(--line);display:grid;gap:8px}.quiet{padding:0;background:none;color:var(--muted);text-align:left}.workspace header{height:62px;border-bottom:1px solid var(--line);background:#fff;display:flex;align-items:center;padding:0 28px}.workspace header button{display:none;background:none;color:var(--ink);padding:8px}.workspace article{padding:34px;max-width:1080px}.workspace h1{font-size:32px;margin:0 0 26px}.placeholder,.session-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:25px;margin-bottom:18px}.placeholder h2,.session-card h2{margin-top:0;font-size:18px}.placeholder p{color:var(--muted)}dl{display:grid;grid-template-columns:130px 1fr;gap:7px;margin:0 0 18px}dt{color:var(--muted)}dd{margin:0}.secondary{background:#edf3f0;color:var(--ink)}[hidden]{display:none!important}@media(max-width:720px){.shell{display:block}aside{position:fixed;z-index:3;inset:0 auto 0 0;width:min(82vw,290px);transform:translateX(-105%);transition:transform .18s ease;box-shadow:8px 0 28px #13201925}aside.open{transform:translateX(0)}.workspace header{padding:0 16px;gap:9px}.workspace header button{display:block}.workspace article{padding:22px 16px}.workspace h1{font-size:27px}.auth-card{margin:5vh auto;padding:25px}dl{grid-template-columns:1fr;gap:2px}dd{margin-bottom:8px}}

/* Mobile Safari may overlay the bottom browser bar on a 100vh drawer. Keep
   account actions inside the dynamic viewport and make the drawer itself
   scrollable when its navigation is taller than the visible area. */
@media(max-width:720px){
    aside{
        height:100dvh;
        min-height:0;
        overflow-y:auto;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
        padding-bottom:calc(24px + env(safe-area-inset-bottom));
    }
    nav,.account{flex-shrink:0}
}

/* Phase 10 operational screens */
nav a.disabled{opacity:.45;cursor:not-allowed;background:transparent}.workspace article{max-width:1240px}.workspace h1{margin:0}.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px}.page-heading .eyebrow{margin-top:0}.panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:16px}.panel h2{font-size:16px;margin:0 0 16px}.page-state.loading,.page-state.failure,.empty{padding:28px;border:1px dashed #cdd5d1;border-radius:12px;color:var(--muted);background:#fafbfa}.page-state.failure{color:var(--red);margin-bottom:16px}.freshness{font-size:12px;color:var(--muted);margin:-12px 0 14px}.freshness.stale{color:#936b27}.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px}.metric-card,.mini-stat{background:#f6f8f7;border-radius:10px;padding:15px;display:grid;gap:4px}.metric-label,.mini-stat span{font-size:12px;color:var(--muted)}.metric-value{font-size:25px;line-height:1.15}.metric-grid.compact .mini-stat strong{font-size:20px}.period-select,.filters select{padding:9px 32px 9px 11px;border:1px solid #c8d0cc;border-radius:9px;background:#fff;color:var(--ink)}
.activity-list{display:grid}.activity-row{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:start;gap:12px;padding:11px 0;border-bottom:1px solid #edf0ee}.activity-row:last-child{border:0}.activity-row time{font-variant-numeric:tabular-nums;color:var(--muted)}.activity-row>div{display:grid;gap:2px}.subtle-link{color:var(--green);font-size:12px;text-decoration:none}.activity-row.actor-owner{border-left:3px solid #78a58f;padding-left:10px}.activity-row.actor-customer{border-left:3px solid #b8cfc3;padding-left:10px}.badge{display:inline-flex;width:max-content;align-items:center;padding:3px 8px;border-radius:999px;background:#edf1ef;color:#59635f;font-size:11px;font-weight:700;text-transform:capitalize}.badge-critical{background:#f6dddd;color:#8f2929}.badge-error,.badge-disconnected{background:#f8e7e4;color:#963f38}.badge-warning{background:#f5ecd6;color:#8b651f}.badge-new,.badge-investigating{background:#f3e8d4;color:#7e5c1e}.badge-resolved,.badge-connected{background:#e1f1e8;color:#276747}.badge-ignored{background:#eceeed;color:#69716d}.badge-orders,.badge-commerce{background:#e5e9f2;color:#495c82}
.filters{display:flex;gap:8px;flex-wrap:wrap}.filters input{margin:0;min-width:230px;padding:9px}.filters button{padding:9px 14px}.responsive-list{display:grid;gap:9px}.list-card{display:grid;grid-template-columns:minmax(220px,1.5fr) minmax(220px,1fr) auto;align-items:center;gap:18px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}.list-main{display:grid;min-width:0}.list-title{color:var(--ink);font-weight:700;text-decoration:none;overflow-wrap:anywhere}.list-title:hover,.plain:hover{text-decoration:underline}.muted-small{font-size:12px;color:var(--muted)}.compact-stats,.list-meta,.hero-line,.status-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.mini-stat{padding:7px 10px;min-width:68px}.list-meta{justify-content:flex-end;font-size:12px;color:var(--muted)}.simple-list{display:grid}.simple-row{display:grid;grid-template-columns:minmax(110px,1fr) auto auto auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid #edf0ee}.simple-row:last-child{border:0}.plain{color:var(--ink);text-decoration:none}.button-link{display:inline-block;margin-top:8px;padding:8px 11px;border-radius:8px;background:#edf3f0;color:var(--ink);text-decoration:none;font-weight:650;width:max-content}.tech-grid{display:grid;grid-template-columns:150px 1fr;gap:8px;margin:0}.tech-grid dt{color:var(--muted)}.tech-grid dd{margin:0;overflow-wrap:anywhere}.trace{margin-top:18px}.trace summary{cursor:pointer;color:var(--green);font-weight:650}.trace pre{max-height:430px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;background:#17201c;color:#e8efeb;border-radius:10px;padding:15px;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}.tabs{display:flex;gap:3px;flex-wrap:wrap}.tabs a{padding:7px 9px;color:var(--muted);text-decoration:none;border-radius:7px;font-size:12px}.tabs a.active{background:#e8efeb;color:var(--ink)}.quiet-button{background:transparent;border:1px solid var(--line);color:var(--ink)}code{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--muted)}
.lifecycle{list-style:none;margin:0;padding:0;display:grid}.lifecycle li{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;padding:0 0 22px;color:#9ba39f}.lifecycle li:not(:last-child)::before{content:"";position:absolute;left:6px;top:14px;bottom:0;border-left:1px solid #d8dfdc}.step-dot{width:13px;height:13px;border:2px solid #c9d0cd;background:#fff;border-radius:50%;z-index:1}.lifecycle li.reached{color:var(--ink)}.lifecycle li.reached .step-dot{background:var(--green);border-color:var(--green)}.lifecycle time{font-size:12px;color:var(--muted)}#toast{position:fixed;right:20px;bottom:20px;z-index:10;transform:translateY(90px);opacity:0;transition:.18s;background:var(--ink);color:#fff;padding:11px 15px;border-radius:9px}#toast.show{transform:none;opacity:1}
@media(max-width:720px){.workspace article{padding:20px 14px 90px}.page-heading{align-items:flex-start;flex-direction:column;gap:12px}.page-heading #page-actions,.filters,.period-select{width:100%}.filters input,.filters select,.filters button{width:100%;min-width:0}.panel{padding:17px}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metric-value{font-size:22px}.list-card{grid-template-columns:1fr;gap:11px}.list-meta{justify-content:flex-start}.compact-stats{display:grid;grid-template-columns:repeat(3,1fr)}.simple-row{grid-template-columns:1fr auto}.simple-row time,.simple-row code{grid-column:1/-1}.activity-row{grid-template-columns:48px minmax(0,1fr)}.activity-row>.badge{display:none}.tech-grid{grid-template-columns:1fr;gap:2px}.tech-grid dd{margin-bottom:8px}.lifecycle li{grid-template-columns:20px 1fr}.lifecycle time{grid-column:2}.status-actions{width:100%}.status-actions button{flex:1}.tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px}.tabs a{white-space:nowrap}.freshness{margin-top:0}}