/* extracted from bridge/index.html by ops/inline_style_extract.py — linked in the same document position to preserve cascade order */
:root{
--mono:ui-monospace,"Cascadia Code","SF Mono",Menlo,monospace;--serif:"Iowan Old Style","Palatino Linotype",Georgia,serif;
--surf:#0e0f11;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:radial-gradient(130% 90% at 50% -10%,var(--panel),var(--bg) 60%);color:var(--ink);font-family:var(--mono);-webkit-font-smoothing:antialiased;min-height:100%}
.shell{max-width:1180px;margin:0 auto;padding:0 var(--space-16) var(--space-64);min-height:100%;display:flex;flex-direction:column}
/* topbar */
.topbar{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-16) var(--space-2);font-size:var(--text-12);color:var(--faint);position:sticky;top:0;background:linear-gradient(180deg,var(--bg) 70%,transparent);z-index:10}
.brand{display:flex;align-items:center;gap:var(--space-8);color:var(--sand);font-weight:600;letter-spacing:.14em}
.brand .dot{width:9px;height:9px;border-radius:var(--radius-2);background:var(--sand);transform:rotate(45deg)}
.brand b{color:var(--ink);font-weight:600;letter-spacing:.04em}
.tstatus{margin-left:auto;display:flex;gap:var(--space-8);align-items:center;flex-wrap:wrap}
.pill{font-size:var(--text-11);padding:var(--space-4) var(--space-8);border:1px solid var(--edge2);border-radius:var(--radius-16);color:var(--mist)}
.pill.g{color:var(--act);border-color:color-mix(in srgb, var(--act) 35%, transparent)}
/* hero */
.hero{padding:var(--space-24) 0 var(--space-12)}
.hero h1{font-family:var(--serif);font-size:clamp(var(--text-28),4vw,var(--text-40));color:var(--sand);line-height:1.05;margin-bottom:var(--space-4)}
.hero p{color:var(--mist);font-size:var(--text-16);margin-bottom:var(--space-16)}
.route{display:flex;gap:var(--space-8);max-width:680px}
.route input{flex:1;background:var(--bg);border:1px solid var(--edge2);border-radius:var(--radius-8);padding:var(--space-12) var(--space-16);color:var(--ink);font-family:inherit;font-size:var(--text-16)}
.route input:focus{outline:none;border-color:var(--move)}
.route button{background:var(--act);color: var(--bg);border:0;border-radius:var(--radius-8);padding:0 var(--space-24);font-family:var(--mono);font-weight:700;cursor:pointer}
/* filter */
.filters{display:flex;gap:var(--space-8);flex-wrap:wrap;margin:var(--space-16) 0 var(--space-4)}
.fchip{font-family:var(--mono);font-size:var(--text-12);padding:var(--space-4) var(--space-12);border:1px solid var(--edge2);border-radius:var(--radius-16);color:var(--mist);background:transparent;cursor:pointer}
.fchip.on{color:var(--ink);border-color:var(--sand);background:color-mix(in srgb, var(--sand) 8%, transparent)}
.rooms-ledger{margin-top:var(--space-24)}
.roomdeck{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-12)}
.roomcard{display:flex;flex-direction:column;gap:var(--space-12);padding:var(--space-16);border:1px solid var(--edge);border-radius:var(--radius-8);background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(14,15,17,.96));box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.roomcard.reclaim{border-color:color-mix(in srgb, var(--rose) 45%, transparent)}
.roomhead{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-12)}
.roomname{font-size:var(--text-16);color:var(--ink);font-weight:700}
.roomsummary{color:var(--mist);font-size:var(--text-13);line-height:1.55}
.roommetrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8)}
.roommetric{border:1px solid var(--edge);border-radius:var(--radius-8);padding:var(--space-8) var(--space-8);background:rgba(0,0,0,.2)}
.roommetric .mk{display:block;color:var(--faint);font-size:var(--text-10);letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--space-4)}
.roommetric .mv{display:block;color:var(--ink);font-size:var(--text-16)}
.roomtruth{display:flex;flex-wrap:wrap;gap:var(--space-8)}
.truthpill{font-size:var(--text-11);letter-spacing:.08em;text-transform:uppercase;padding:var(--space-4) var(--space-8);border-radius:var(--radius-16);border:1px solid var(--edge2);color:var(--mist)}
.truthpill.live{color:var(--act);border-color:color-mix(in srgb, var(--act) 32%, transparent)}
.truthpill.warn{color:var(--util);border-color:color-mix(in srgb, var(--rose) 38%, transparent)}
.truthpill.idle{color:var(--move);border-color:color-mix(in srgb, var(--move) 28%, transparent)}
.roomsim{display:flex;flex-direction:column;gap:var(--space-8);padding-top:var(--space-2)}
.roomsim-label{font-size:var(--text-11);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.roomroles{display:flex;flex-wrap:wrap;gap:var(--space-8)}
.roomrole{font-family:var(--mono);font-size:var(--text-11);padding:var(--space-4) var(--space-8);border:1px solid var(--edge2);border-radius:var(--radius-pill);background:transparent;color:var(--mist);cursor:pointer}
.roomrole.on{border-color:var(--sand);color:var(--ink);background:color-mix(in srgb, var(--sand) 8%, transparent)}
.roomadmit{border-left:2px solid var(--move);padding-left:var(--space-8);color:var(--mist);font-size:var(--text-13);line-height:1.5}
.roomadmit b{color:var(--ink)}
.roomfoot{display:flex;justify-content:space-between;align-items:center;gap:var(--space-12)}
.roomfoot .detailbtn{font-family:var(--mono);font-size:var(--text-12);color:var(--move);background:transparent;border:0;cursor:pointer;padding:0}
.roomfoot .detailbtn:hover{color:var(--sand)}
.roomproof{color:var(--faint);font-size:var(--text-12)}
/* zones */
.zone{margin-top:var(--space-24)}
.zlabel{display:flex;align-items:baseline;gap:var(--space-12);margin-bottom:var(--space-12);border-bottom:1px solid var(--edge);padding-bottom:var(--space-8)}
.zlabel h2{font-size:var(--text-14);letter-spacing:.18em;color:var(--ink);text-transform:uppercase}
.zlabel span{font-size:var(--text-12);color:var(--faint)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:var(--space-12)}
.card{display:flex;flex-direction:column;gap:var(--space-8);padding:var(--space-16) var(--space-16);border:1px solid var(--edge);border-radius:var(--radius-8);background:var(--surf);cursor:pointer;transition:all .15s;min-height:118px}
.card:hover{border-color:var(--sand);transform:translateY(var(--gm-lift));background:var(--panel)}
.card.sel{border-color:var(--move);box-shadow:0 0 0 1px var(--move),0 0 14px color-mix(in srgb, var(--move) 30%, transparent);background:var(--panel)}
.card.hidden{display:none}
.card .ch{display:flex;align-items:center;gap:var(--space-8)}
.card .ci{font-size:var(--text-20);width:26px;text-align:center;color:var(--sand)}
.card .cn{font-weight:700;color:var(--ink);font-size:var(--text-16);flex:1}
.card .cl{color:var(--mist);font-size:var(--text-13);line-height:1.5;flex:1}
.card .cf{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8)}
.badge{font-family:var(--mono);font-size:var(--text-10);font-weight:700;letter-spacing:.09em;padding:var(--space-2) var(--space-8) var(--space-2) var(--space-8);border-radius:var(--radius-16);border:1px solid currentColor;display:inline-flex;align-items:center;gap:var(--space-4)}
.badge .bd{width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.pulse .bd{animation:bpulse 1.9s ease-in-out infinite}
@keyframes bpulse{0%,100%{opacity:.35}50%{opacity:1;box-shadow:0 0 6px currentColor}}
.st-live,.st-verified{color:var(--act)} .st-building,.st-prototype{color:var(--sand)} .st-dream{color:var(--tab)} .st-blocked{color:var(--util)} .st-retired{color:var(--faint)}
.cact{font-size:var(--text-12);color:var(--move)}
/* dream ledger */
.ledger{margin-top:var(--space-40)}
.ledger .zlabel .add{margin-left:auto;font-family:var(--mono);font-size:var(--text-12);color: var(--bg);background:var(--tab);border:0;border-radius:var(--radius-8);padding:var(--space-8) var(--space-12);font-weight:700;cursor:pointer}
.dcard{display:flex;gap:var(--space-12);padding:var(--space-12) var(--space-16);border:1px solid var(--edge);border-left:3px solid var(--tab);border-radius:var(--radius-8);background:var(--surf);margin-bottom:var(--space-8)}
.dcard .did{color:var(--faint);font-size:var(--text-11);font-family:var(--mono);flex:none;padding-top:var(--space-2);min-width:118px}
.dcard .dbody b{color:var(--ink);font-size:var(--text-14)} .dcard .dbody .dl{color:var(--mist);font-size:var(--text-13);line-height:1.5;margin:var(--space-2) 0}
.dcard .dbody .dnext{color:var(--act);font-size:var(--text-12);margin-top:var(--space-4)} .dcard .dbody .dnext span{color:var(--faint)}
.dcard .dmeta{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-4);flex:none}
.dcard{cursor:pointer;transition:border-color .15s,transform .15s}
.dcard:hover{border-color:var(--tab);transform:translateX(var(--gm-nudge))}
.dcard .lchips{display:flex;gap:var(--space-4);align-items:center;margin-top:var(--space-8)}
.lchip{font-size:var(--text-13);opacity:.26;filter:grayscale(1)}
.lchip.on{opacity:1;filter:none}
.lopen{margin-left:auto;font-size:var(--text-11);color:var(--tab);opacity:.85}
.packet .p4{display:flex;flex-direction:column;gap:var(--space-8);margin-bottom:var(--space-4)}
.packet .p4 .pk{color:var(--faint);display:inline-block;min-width:82px;font-size:var(--text-11);text-transform:uppercase;letter-spacing:.08em}
.packet .p4>div{color:var(--mist);font-size:var(--text-14);line-height:1.5}
.packet .plabel{color:var(--faint);font-size:var(--text-10);text-transform:uppercase;letter-spacing:.1em;margin:var(--space-16) 0 var(--space-8)}
.packet .players{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8)}
.packet .pslot{border:1px solid var(--edge);border-radius:var(--radius-8);padding:var(--space-8) var(--space-12);display:flex;flex-direction:column;gap:var(--space-2);opacity:.45}
.packet .pslot.has{opacity:1;border-color:var(--edge2);background:var(--surf)}
.packet .pslot .pico{font-size:var(--text-16)} .packet .pslot b{font-size:var(--text-13);color:var(--ink)} .packet .pslot .pn{font-size:var(--text-11);color:var(--mist)}
.packet .pnote{color:var(--faint);font-size:var(--text-13);margin-top:var(--space-12);line-height:1.55}
/* modal / detail content styling (inside GLEE.panel) */
.dform label{display:block;color:var(--mist);font-size:var(--text-12);margin:var(--space-12) 0 var(--space-4)}
.dform input,.dform textarea,.dform select{width:100%;background:var(--bg);border:1px solid var(--edge2);border-radius:var(--radius-8);padding:var(--space-8) var(--space-12);color:var(--ink);font-family:var(--mono);font-size:var(--text-14)}
.dform textarea{min-height:56px;resize:vertical}
.dform .row{display:flex;gap:var(--space-8)} .dform .row>div{flex:1}
.dform .go{margin-top:var(--space-16);background:var(--tab);color: var(--bg);border:0;border-radius:var(--radius-8);padding:var(--space-12) var(--space-16);font-family:var(--mono);font-weight:700;cursor:pointer}
.ddetail p{margin:var(--space-8) 0;color:var(--mist);font-size:var(--text-14);line-height:1.55} .ddetail b{color:var(--ink)}
.ddetail .k{color:var(--faint);display:inline-block;min-width:88px}
.ddetail .open{margin-top:var(--space-12);display:inline-block;background:var(--act);color: var(--bg);border-radius:var(--radius-8);padding:var(--space-8) var(--space-16);font-family:var(--mono);font-weight:700;text-decoration:none}
@media(max-width:620px){
.dcard{display:grid;grid-template-columns:1fr;gap:var(--space-8)}
.dcard .did{min-width:0}
.dcard .dmeta{margin-left:0;align-items:flex-start;flex-direction:row;flex-wrap:wrap}
}
/* ambient presence deck */
.presence-section{margin-top:var(--space-20)}
.presence-deck{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-12)}
.presence-card{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-12) var(--space-16);border:1px solid var(--edge);border-radius:var(--radius-8);background:var(--surf);transition:border-color .15s,transform .15s}
.presence-card:hover{border-color:var(--move);transform:translateY(var(--gm-lift))}
.presence-info{display:flex;flex-direction:column;gap:var(--space-2)}
.presence-name{font-size:var(--text-13);font-weight:700;color:var(--ink)}
.presence-role{font-size:var(--text-11);color:var(--mist)}
.presence-status{font-size:var(--text-10);color:var(--move);text-transform:uppercase;letter-spacing:.05em}