:root{
  --bg:#07111a;--nav:#07131d;--surface:#0b1b28;--surface-2:#0e2231;--surface-3:#132434;--border:#1f4155;--border-soft:#173143;
  --text:#e6edf3;--muted:#8fa2b3;--accent:#e03a3a;--accent-2:#ff2d2d;--success:#2ecc71;--warning:#f5a623;--info:#4aa3ff;
  --shadow:0 10px 30px rgba(0,0,0,.28);--ease:cubic-bezier(.2,.75,.25,1);
}
*{box-sizing:border-box}html,body{margin:0;background:#050d14;color:var(--text);font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:13px;overflow:auto}button{font:inherit;color:inherit}
body{min-width:1180px}.app-shell{min-height:100vh;display:grid;grid-template-columns:242px minmax(0,1fr);background:radial-gradient(circle at 8% 4%,rgba(122,0,13,.18),transparent 30%),linear-gradient(180deg,#06121c,#07131d 60%,#07121a)}
.boro-nav{position:sticky;top:0;height:100vh;border-right:1px solid #203240;background:linear-gradient(180deg,rgba(36,3,12,.76),rgba(5,18,28,.97) 28%,#061722);display:flex;flex-direction:column;padding:10px 10px 8px;z-index:3}.brand-zone{height:56px;display:flex;align-items:center;gap:11px}.crest{width:43px;height:43px;border:1px solid #8d1515;border-radius:50%;display:grid;place-items:center;position:relative;background:radial-gradient(circle at 55% 35%,#351213,#11090a 70%);box-shadow:inset 0 0 16px rgba(255,32,32,.15)}.crest:before,.crest:after{content:"";position:absolute;background:#9d1515;opacity:.8}.crest:before{width:1px;height:34px;transform:rotate(28deg)}.crest:after{height:1px;width:33px;transform:rotate(-18deg)}.crest span{font-size:9px;color:#d84949;letter-spacing:.5px}.brand-name{font-size:18px;font-weight:700;letter-spacing:-.3px}.brand-sub{font-size:10px;color:#c0b2b3;letter-spacing:.45px;margin-top:2px}
.profile-card{width:100%;height:73px;border:1px solid #5b1d24;background:linear-gradient(90deg,rgba(47,9,15,.76),rgba(5,23,34,.86));border-radius:3px;display:grid;grid-template-columns:39px 1fr 14px;align-items:center;gap:8px;text-align:left;padding:8px;cursor:pointer;transition:.22s var(--ease)}.profile-card:hover{border-color:#b42c31;transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.22),inset 2px 0 0 var(--accent)}.avatar{width:37px;height:37px;border:1px solid #b72a2f;border-radius:50%;display:grid;place-items:center;background:#191219}.profile-copy{display:flex;flex-direction:column;min-width:0}.profile-copy strong{font-size:14px}.profile-copy em{font-style:normal;color:#f7a51c;font-size:11px;margin-top:2px}.profile-copy small{font-size:10px;color:#aab5bf;margin-top:2px}.online-pulse{width:8px;height:8px;background:#3bd05c;border-radius:50%;box-shadow:0 0 0 4px rgba(59,208,92,.09),0 0 12px rgba(59,208,92,.7);animation:pulse 2s infinite}@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(59,208,92,0),0 0 16px rgba(59,208,92,.8)}}
.nav-title{font-size:10px;color:#acb3b9;letter-spacing:.5px;margin:18px 4px 8px}.nav-list{display:flex;flex-direction:column;gap:5px}.nav-item{height:44px;border:1px solid transparent;background:transparent;border-radius:4px;display:grid;grid-template-columns:31px 1fr 16px;align-items:center;text-align:left;padding:0 8px;cursor:pointer;transition:background .24s var(--ease),border-color .24s var(--ease),transform .24s var(--ease),box-shadow .24s var(--ease)}.nav-item:hover{background:linear-gradient(90deg,rgba(121,20,27,.36),rgba(12,30,42,.45));border-color:#6c242a;transform:translateX(3px)}.nav-item.active{background:linear-gradient(90deg,rgba(128,20,26,.72),rgba(44,19,27,.74));border-color:#c42d32;box-shadow:inset 3px 0 0 #ff3131,0 0 20px rgba(190,25,35,.12)}.nav-icon{color:#f23636;font-weight:800;font-size:17px;text-align:center}.nav-label{font-size:13px}.nav-chevron{font-size:20px;color:#d2dce2;opacity:.9;transition:transform .2s}.nav-item:hover .nav-chevron{transform:translateX(2px)}.nav-bottom{margin-top:auto;border-top:1px solid #142b39;padding-top:12px}.privacy-card{height:58px;border:1px solid #16405a;border-radius:3px;background:#081d29;display:flex;align-items:center;gap:10px;padding:10px}.lock{width:28px;height:28px;border:1px solid #214d68;border-radius:50%;display:grid;place-items:center;color:#6f98ad}.privacy-card span:last-child{display:flex;flex-direction:column}.privacy-card strong{font-size:11px}.privacy-card small{font-size:10px;color:#9aacb8;margin-top:2px}.nav-links{display:flex;justify-content:space-around;margin-top:10px}.nav-links button{border:0;background:none;color:#a8afb6;font-size:10px;cursor:pointer;transition:color .18s}.nav-links button:hover{color:#fff}
.main-shell{min-width:0;display:grid;grid-template-rows:auto 46px minmax(0,1fr) 54px;min-height:100vh}.boro-dock{display:grid;grid-template-columns:1.1fr 1.02fr 1.08fr .83fr .78fr;gap:7px;padding:10px 10px 6px 12px}.dock-card{appearance:none;border:1px solid #1b526a;background:linear-gradient(180deg,rgba(7,26,39,.98),rgba(4,20,30,.98));border-radius:3px;min-height:146px;padding:9px 10px 8px;text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(2,7,10,.2);transition:transform .2s var(--ease),border-color .2s,box-shadow .2s,background .2s}.dock-card:hover,.dock-card.selected{transform:translateY(-2px);border-color:#2a7da0;box-shadow:0 10px 24px rgba(0,0,0,.26),0 0 0 1px rgba(46,151,192,.1);background:linear-gradient(180deg,#0a2637,#071d2b)}.vitals-card{border-color:#78252a}.vitals-card:hover,.vitals-card.selected{border-color:#d22f35}.dock-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.2px;margin-bottom:8px}.dock-head strong{font-weight:800}.live{color:#58ef32}.chev{color:#ff8e1a;font-size:18px;line-height:10px}.dock-feature{display:flex;justify-content:space-between;gap:6px;margin-bottom:8px}.dock-feature span{font-weight:600}.dock-feature em{font-style:normal;color:#f39c12;white-space:nowrap;font-size:11px}.dock-card dl{margin:0;display:grid;gap:6px}.dock-card dl>div{display:flex;justify-content:space-between;gap:8px}.dock-card dt{color:#c3cbd1}.dock-card dd{margin:0;color:#f0f4f6}.dock-card dd.danger{color:#ff3838;font-weight:700}.dock-card dd.good{color:#57d928;font-weight:700}.vital-row{margin-top:7px}.vital-line{display:grid;grid-template-columns:1fr auto 43px;gap:7px;align-items:center;font-size:11px}.vital-line b{font-weight:700}.vital-line small{color:#9eb1bd;text-align:right}.meter{height:2px;background:#31323a;margin-top:3px}.meter i{display:block;height:100%}.meter .energy{background:#ff2d43}.meter .nerve{background:#f07b20}.meter .happy{background:#9bc627}.meter .life{background:#40aee8}.completion{height:3px;background:#5b2217;margin-top:5px}.completion i{display:block;width:60%;height:100%;background:#46ad2f}.alert-dot{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;background:#f42c35;font-size:9px;margin-left:3px}.alert-dot.muted{background:#4b5964}.systems{border-top:1px solid #153242;margin-top:6px;padding-top:7px;color:#aab7bf;font-size:10px}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;box-shadow:0 0 7px currentColor}.dot.online{background:#35b62e;color:#35b62e}.dot.idle{background:#ff8d00;color:#ff8d00}.dot.offline{background:#ff2f3b;color:#ff2f3b}.dot.abroad{background:#3b9fe0;color:#3b9fe0}.dot.back{background:#45b6d7;color:#45b6d7}
.boro-tabs{height:46px;display:flex;align-items:end;padding-left:12px;border-bottom:1px solid #174252;background:linear-gradient(180deg,#071824,#06131d)}.boro-tab{height:40px;min-width:96px;padding:0 18px;border:1px solid #143448;border-bottom:0;background:#071824;color:#dce4e9;cursor:pointer;position:relative;transition:background .25s var(--ease),color .25s,border-color .25s,transform .25s,box-shadow .25s}.boro-tab:first-child{border-radius:4px 0 0 0}.boro-tab:last-of-type{border-radius:0 4px 0 0}.boro-tab:hover{background:linear-gradient(180deg,rgba(95,22,29,.42),#0a1c29);color:#fff;border-color:#6b2b30;transform:translateY(-1px)}.boro-tab:after{content:"";position:absolute;left:20%;right:20%;bottom:0;height:2px;background:#ff3038;transform:scaleX(0);transition:transform .28s var(--ease)}.boro-tab:hover:after{transform:scaleX(.65)}.boro-tab.active{background:linear-gradient(180deg,#6d2026,#43151b);border-color:#b52b31;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 -6px 16px rgba(208,33,41,.08);color:#fff}.boro-tab.active:after{left:0;right:0;transform:scaleX(1)}.tabs-fill{flex:1;height:1px}
.workspace{padding:10px 10px 10px 12px;min-height:0;background:radial-gradient(circle at 87% 38%,rgba(0,71,101,.08),transparent 32%),#071723}.tab-panel{display:none;height:100%;min-height:0}.tab-panel.active{display:grid}.tab-panel[data-panel="overview"]{grid-template-columns:1.1fr 1.1fr .8fr;grid-template-rows:1fr 1.27fr;gap:10px}.panel{border:1px solid #274255;border-radius:4px;background:linear-gradient(180deg,rgba(8,29,42,.96),rgba(7,24,35,.98));box-shadow:inset 0 1px 0 rgba(255,255,255,.012);min-width:0}.panel h2{font-size:11px;color:#ff4545;margin:0 0 14px;font-weight:800;letter-spacing:.25px}.panel h3{font-size:9px;color:#d9e0e4;margin:13px 0 9px;font-weight:700}.typography-panel{grid-row:1/3;padding:14px 16px;overflow:hidden}.table-panel{grid-column:2;grid-row:1;padding:14px 14px 10px;overflow:hidden}.states-panel{grid-column:2;grid-row:2;padding:14px;overflow:hidden}.right-stack{grid-column:3;grid-row:1/3;display:grid;grid-template-rows:1.32fr .63fr .98fr;gap:10px;min-height:0}.right-stack .panel{padding:14px;overflow:hidden}.type-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:20px}.type-list{display:flex;flex-direction:column;gap:16px}.h1-sample{font-size:21px;font-weight:700;font-style:italic}.h2-sample{font-size:18px;font-weight:600}.h3-sample{font-size:15px;font-weight:600}.h4-sample{font-size:13px;font-weight:700}.body-lg{font-size:12px}.body-def{font-size:11px}.body-sm{font-size:10px}.caption{font-size:9px;color:#a8b2bb}.overline{font-size:9px;font-weight:800;color:#ff4141;letter-spacing:.4px}.copy-list{display:flex;flex-direction:column;gap:22px;padding-top:39px}.copy-list p{margin:0;font-size:9px;line-height:1.65;color:#c3ced5}.copy-list .secondary{color:#9baab4}.copy-list .accent-copy{color:#f14b4b}.section-rule{height:1px;background:#264050;margin:18px 0}.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 20px}.palette div{display:grid;grid-template-rows:38px auto auto;gap:4px}.palette span{display:block;background:var(--sw);border:1px solid #263e4d;border-radius:4px}.palette b{font-size:9px;font-weight:500}.palette small{font-size:8px;color:#8fa2b3}
table{width:100%;border-collapse:collapse;font-size:9px}th{font-size:8px;color:#d6dce0;text-align:left;padding:7px 6px;border-bottom:1px solid #284151}td{padding:8px 6px;border-bottom:1px solid #173041;color:#d7e0e6}tbody tr{transition:background .16s,transform .16s;cursor:pointer}tbody tr:hover,tbody tr.selected{background:#0e2d3f;transform:translateX(2px)}.rank-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border-radius:4px;background:#48a922;color:white;font-weight:800;font-size:8px}.table-foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;font-size:9px;color:#c0cad1}.pagination{display:flex;align-items:center;gap:3px}.pagination button{width:24px;height:22px;border:1px solid #173446;background:#071a27;border-radius:3px;color:#dce4e9;font-size:8px;cursor:pointer;transition:.18s}.pagination button:hover{border-color:#a63338;background:#4b1820}.pagination button.active{border-color:#e43a3f;background:#131b23;box-shadow:0 0 0 1px rgba(228,58,63,.15)}
.button-demo{margin-bottom:12px}.button-demo h3{margin:0 0 7px;color:#9cacb6}.button-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.btn{height:31px;border-radius:3px;cursor:pointer;transition:.18s var(--ease);font-size:9px}.btn:not(:disabled):hover{transform:translateY(-2px)}.btn.primary{border:1px solid #df3339;background:linear-gradient(#9d252c,#6e1c22)}.btn.primary:hover{background:linear-gradient(#c92b33,#861e25);box-shadow:0 7px 15px rgba(187,31,40,.2)}.btn.secondary{border:1px solid #395166;background:#091925}.btn.secondary:hover{border-color:#697e8e;background:#102636}.btn.ghost{border:1px solid #2d4557;background:transparent}.btn.ghost:hover{border-color:#9b3d41;background:rgba(150,35,42,.12)}.btn.active-demo{box-shadow:inset 0 0 0 1px rgba(255,255,255,.11)}.btn:disabled{opacity:.36;cursor:not-allowed}.icon-row{display:flex;gap:9px}.icon-btn{width:34px;height:31px;border:1px solid #385062;border-radius:3px;background:#081924;cursor:pointer;transition:.18s}.icon-btn:hover{transform:translateY(-2px);border-color:#8f4549;background:#122637}.icon-btn.accent,.danger-text{color:#ff4646}.icon-btn.accent{border-color:#7f2a2e}
.presence{display:flex;flex-wrap:wrap;gap:10px 18px;font-size:9px;color:#dce4e9}.standing{display:flex;align-items:center;gap:13px;color:#54d72e;font-size:9px}.standing-bar{width:110px;height:5px;background:linear-gradient(90deg,#56b829 0 45%,#f1a321 45% 70%,#9d290d 70%);position:relative}.standing-bar i{display:block;position:absolute;left:62%;top:-2px;width:2px;height:9px;background:#fff}.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.badge{height:29px;border-radius:4px;background:#0b1821;cursor:pointer;font-size:9px;transition:.18s}.badge:hover{transform:translateY(-2px);filter:brightness(1.18)}.badge.purple{border:1px solid #8f4aa7;color:#e69cff}.badge.blue{border:1px solid #1680bb;color:#71c8f6}.badge.amber{border:1px solid #9b6000;color:#ffb632}.badge.cyan{border:1px solid #1783a1;color:#6ad3ef}.badge.green{border:1px solid #287839;color:#6bdf79}.badge.grey{border:1px solid #56626b;color:#c8d0d5}.alerts-panel{display:flex;flex-direction:column}.alert{height:39px;border-radius:4px;display:grid;grid-template-columns:22px 1fr 20px;align-items:center;padding:0 7px;margin-bottom:10px;font-size:9px;transition:.22s}.alert b{width:17px;height:17px;border-radius:50%;display:grid;place-items:center}.alert button{border:0;background:none;color:#e6edf3;cursor:pointer;font-size:18px;opacity:.8}.alert button:hover{opacity:1;transform:scale(1.1)}.alert.critical{border:1px solid #8b2830;background:#3a171d}.alert.critical b{background:#e6333b}.alert.warning{border:1px solid #9b5a06;background:#2e2112}.alert.warning b{background:#d9880c}.alert.info{border:1px solid #176a96;background:#102838}.alert.info b{background:#2d91c8}.alert.dismissed{opacity:0;transform:translateX(20px);pointer-events:none}
.simple-panel{display:none}.simple-panel.active{display:block}.fill-panel{height:100%;padding:18px}.fill-panel p{color:#aebac2;margin:0 0 18px}.demo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.demo-card{min-height:90px;border:1px solid #29465a;border-radius:5px;background:linear-gradient(180deg,#0b2231,#081a26);padding:14px;color:#dce5ea;text-align:left;cursor:pointer;transition:.22s var(--ease)}.demo-card:hover{transform:translateY(-4px);border-color:#a4373c;box-shadow:0 12px 24px rgba(0,0,0,.24);background:linear-gradient(180deg,#102c3d,#0a1e2c)}.demo-card.selected{border-color:#e03a3a;box-shadow:inset 3px 0 0 #e03a3a}.member-card{display:flex;flex-direction:column;gap:7px}.member-card em{font-style:normal;color:#aebac2}.success-card{border-color:#2f6b3c}.warning-card{border-color:#76541c}.danger-card{border-color:#7d272d}.compact-demo{display:flex;flex-direction:column;align-items:flex-start}.compact .boro-dock{gap:5px;padding-top:6px}.compact .dock-card{min-height:130px}.compact .nav-item{height:39px}.compact .workspace{padding-top:6px}.compact .panel{font-size:95%}
.boro-footer{height:54px;border-top:1px solid #1c3545;background:#06131d;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:0 18px;color:#a7b0b7;font-size:10px}.boro-footer>div:first-child strong{color:#ff4545;margin-right:16px}.boro-footer>div:nth-child(2){text-align:center}.footer-status{display:flex;justify-content:flex-end;gap:20px}.footer-status span+span{border-left:1px solid #2b3b47;padding-left:20px}.footer-status b{font-weight:500}
.toast{position:fixed;right:22px;bottom:67px;background:#0d2735;border:1px solid #2d5c73;border-left:3px solid #e03a3a;color:#f1f4f6;padding:10px 14px;border-radius:4px;box-shadow:var(--shadow);opacity:0;transform:translateY(10px);pointer-events:none;transition:.24s var(--ease);z-index:30;font-size:11px}.toast.show{opacity:1;transform:translateY(0)}
@media(max-width:1450px){body{min-width:1100px}.app-shell{grid-template-columns:236px minmax(0,1fr)}.boro-dock{grid-template-columns:1.08fr 1fr 1fr .82fr .8fr}.dock-card{padding:7px;font-size:11px}.tab-panel[data-panel="overview"]{grid-template-columns:1.05fr 1.08fr .82fr}.palette{gap:10px}.footer-status{gap:10px}.footer-status span+span{padding-left:10px}}


/* ========================================================================
   BoroShell Master v0.1.1 — Browser Fit & Readability Pass
   Refines the locked shell without changing its structure.
   ======================================================================== */
:root{
  --border:#263b49;
  --border-soft:#1b303d;
  --surface:#0b1a26;
  --surface-2:#0e202d;
  --tab-crimson:#8f2028;
  --tab-crimson-deep:#44141a;
  --ease:cubic-bezier(.16,.78,.24,1);
}
html,body{height:100%;}
html{background:#050d14;}
body{
  min-width:1180px;
  height:100dvh;
  overflow:hidden;
  font-size:14px;
}
.app-shell{
  width:100%;
  height:100dvh;
  min-height:0;
  grid-template-columns:250px minmax(0,1fr);
}
.boro-nav{
  position:relative;
  height:100dvh;
  min-height:0;
  padding:10px 11px 8px;
  border-right-color:#26333c;
}
.brand-zone{height:58px;gap:12px;}
.crest{width:44px;height:44px;}
.brand-name{font-size:19px;}
.brand-sub{font-size:10.5px;}
.profile-card{height:74px;padding:8px 9px;grid-template-columns:40px 1fr 14px;}
.profile-copy strong{font-size:14.5px;}
.profile-copy em{font-size:11.5px;}
.profile-copy small{font-size:10.5px;}
.nav-title{font-size:10.5px;margin:17px 5px 8px;}
.nav-list{gap:5px;}
.nav-item{
  height:45px;
  grid-template-columns:32px 1fr 16px;
  padding:0 9px;
  transition:background .30s var(--ease),border-color .30s var(--ease),transform .30s var(--ease),box-shadow .30s var(--ease);
}
.nav-item:hover{
  transform:translateX(2px);
  background:linear-gradient(90deg,rgba(128,24,31,.40),rgba(12,29,40,.42));
  border-color:#713038;
  box-shadow:inset 2px 0 0 rgba(240,50,57,.55);
}
.nav-item.active{
  background:linear-gradient(90deg,rgba(138,25,32,.75),rgba(47,18,26,.72));
  border-color:#c22f36;
  box-shadow:inset 3px 0 0 #ff343b,0 0 18px rgba(190,25,35,.10);
}
.nav-icon{font-size:16px;opacity:.95;}
.nav-label{font-size:14px;}
.nav-chevron{font-size:19px;}
.privacy-card{height:58px;}
.privacy-card strong{font-size:11.5px;}
.privacy-card small,.nav-links button{font-size:10.5px;}

.main-shell{
  height:100dvh;
  min-height:0;
  grid-template-rows:154px 45px minmax(0,1fr) 44px;
  overflow:hidden;
}
.boro-dock{
  height:154px;
  min-height:0;
  grid-template-columns:1.1fr 1.02fr 1.08fr .83fr .78fr;
  gap:8px;
  padding:9px 11px 6px 12px;
  align-items:stretch;
}
.dock-card{
  min-height:0;
  height:139px;
  padding:9px 10px 8px;
  border-color:#274457;
  transition:transform .30s var(--ease),border-color .30s var(--ease),box-shadow .30s var(--ease),background .30s var(--ease);
}
.dock-card:hover,.dock-card.selected{
  transform:translateY(-2px);
  border-color:#39718b;
  box-shadow:0 9px 22px rgba(0,0,0,.24),0 0 0 1px rgba(46,151,192,.07);
}
.vitals-card{border-color:#6f2a2f;}
.vitals-card:hover,.vitals-card.selected{border-color:#c73a40;}
.dock-head{font-size:12px;margin-bottom:7px;}
.dock-feature{font-size:12px;margin-bottom:7px;}
.dock-feature em{font-size:11.5px;}
.dock-card dl{gap:5px;font-size:12px;}
.vital-row{margin-top:6px;}
.vital-line{font-size:12px;grid-template-columns:1fr auto 44px;}
.systems{font-size:10.5px;padding-top:6px;}

.boro-tabs{
  height:45px;
  padding-left:12px;
  border-bottom-color:#243b48;
  background:linear-gradient(180deg,#081925,#06131d);
}
.boro-tab{
  height:39px;
  min-width:102px;
  padding:0 20px;
  font-size:13px;
  border-color:#203541;
  background:linear-gradient(180deg,#081a27,#071620);
  transition:background .34s var(--ease),color .34s var(--ease),border-color .34s var(--ease),transform .34s var(--ease),box-shadow .34s var(--ease);
}
.boro-tab:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  background:radial-gradient(circle at 50% 105%,rgba(255,47,56,.20),transparent 58%);
  transition:opacity .34s var(--ease);
  pointer-events:none;
}
.boro-tab:hover{
  background:linear-gradient(180deg,rgba(91,25,31,.50),#0a1c28);
  border-color:#704047;
  transform:translateY(-1px);
  box-shadow:0 -6px 14px rgba(188,34,43,.055);
}
.boro-tab:hover:before,.boro-tab.active:before{opacity:1;}
.boro-tab:after{height:2px;background:linear-gradient(90deg,#a71f28,#ff3b44,#a71f28);transition:transform .36s var(--ease);}
.boro-tab.active{
  background:linear-gradient(180deg,#92262e 0%,#681c23 50%,#45151b 100%);
  border-color:#c73b42;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.075),0 -7px 20px rgba(208,33,41,.12),0 0 14px rgba(208,33,41,.045);
}

.workspace{
  min-height:0;
  overflow:hidden;
  padding:9px 11px 9px 12px;
  background:radial-gradient(circle at 87% 38%,rgba(0,71,101,.065),transparent 32%),#071723;
}
.tab-panel{min-height:0;overflow:hidden;}
.tab-panel[data-panel="overview"]{
  grid-template-columns:1.08fr 1.12fr .80fr;
  grid-template-rows:minmax(0,.93fr) minmax(0,1.07fr);
  gap:12px;
}
.panel{
  min-height:0;
  border-color:#2b404c;
  background:linear-gradient(180deg,rgba(9,29,41,.96),rgba(7,23,33,.98));
}
.panel h2{font-size:12px;margin-bottom:12px;}
.panel h3{font-size:10px;margin:11px 0 8px;}
.typography-panel{padding:13px 16px;}
.table-panel{padding:13px 14px 9px;}
.states-panel{padding:13px 14px;}
.right-stack{gap:12px;grid-template-rows:1.24fr .65fr 1fr;}
.right-stack .panel{padding:13px;}
.type-grid{gap:20px;}
.type-list{gap:12px;}
.h1-sample{font-size:22px;}
.h2-sample{font-size:19px;}
.h3-sample{font-size:16px;}
.h4-sample{font-size:14px;}
.body-lg{font-size:13px;}
.body-def{font-size:12px;}
.body-sm{font-size:11px;}
.caption,.overline{font-size:10px;}
.copy-list{gap:17px;padding-top:35px;}
.copy-list p{font-size:10px;line-height:1.55;}
.section-rule{margin:14px 0;}
.palette{grid-template-columns:repeat(5,1fr);gap:9px 15px;}
.palette div{grid-template-rows:31px auto auto;gap:3px;}
.palette b{font-size:9.5px;}
.palette small{font-size:8.5px;}

table{font-size:10px;}
th{font-size:9px;padding:6px;}
td{padding:7px 6px;}
.rank-badge{min-width:18px;height:18px;font-size:9px;}
.table-foot{margin-top:8px;font-size:9.5px;}
.pagination button{width:24px;height:22px;font-size:9px;}
.button-demo{margin-bottom:9px;}
.button-demo h3{font-size:9.5px;margin-bottom:6px;}
.button-row{gap:9px;}
.btn{height:30px;font-size:10px;transition:.26s var(--ease);}
.icon-btn{height:30px;transition:.26s var(--ease);}
.presence,.standing{font-size:10px;}
.badges{gap:8px;}
.badge{height:28px;font-size:10px;transition:.26s var(--ease);}
.alert{height:36px;margin-bottom:8px;font-size:10px;}
.fill-panel{padding:16px;}
.demo-card{padding:13px;transition:.30s var(--ease);}

.boro-footer{
  height:44px;
  padding:0 16px;
  border-top-color:#263743;
  font-size:10.5px;
}
.boro-footer>div:first-child strong{margin-right:13px;}
.footer-status{gap:14px;}
.footer-status span+span{padding-left:14px;}
.toast{bottom:55px;font-size:11.5px;}

/* Keep the shell one-screen in typical desktop browser viewports. */
@media (max-height:860px){
  .main-shell{grid-template-rows:148px 43px minmax(0,1fr) 40px;}
  .boro-dock{height:148px;padding-top:7px;}
  .dock-card{height:135px;padding-top:8px;}
  .dock-head{margin-bottom:5px;}
  .dock-feature{margin-bottom:5px;}
  .dock-card dl{gap:4px;}
  .vital-row{margin-top:5px;}
  .boro-tabs{height:43px;}
  .boro-tab{height:37px;}
  .workspace{padding-top:7px;padding-bottom:7px;}
  .tab-panel[data-panel="overview"]{gap:10px;}
  .right-stack{gap:10px;}
  .typography-panel,.table-panel,.states-panel,.right-stack .panel{padding-top:11px;padding-bottom:10px;}
  .type-list{gap:10px;}
  .copy-list{gap:14px;padding-top:31px;}
  .section-rule{margin:11px 0;}
  .palette div{grid-template-rows:28px auto auto;}
  td{padding:6px;}
  .button-demo{margin-bottom:7px;}
  .btn,.icon-btn{height:28px;}
  .alert{height:33px;margin-bottom:6px;}
  .boro-footer{height:40px;}
}
@media (max-height:760px){
  .brand-zone{height:52px;}
  .profile-card{height:68px;}
  .nav-title{margin-top:12px;}
  .nav-item{height:40px;}
  .main-shell{grid-template-rows:139px 41px minmax(0,1fr) 38px;}
  .boro-dock{height:139px;padding-top:6px;}
  .dock-card{height:128px;}
  .dock-card dl{gap:3px;}
  .dock-feature{margin-bottom:4px;}
  .vital-row{margin-top:4px;}
  .boro-tabs{height:41px;}
  .boro-tab{height:35px;}
  .type-list{gap:8px;}
  .copy-list{gap:11px;padding-top:28px;}
  .section-rule{margin:8px 0;}
  .palette div{grid-template-rows:24px auto auto;}
  .right-stack{grid-template-rows:1.2fr .65fr 1fr;}
}
@media(max-width:1450px){
  body{min-width:1100px;}
  .app-shell{grid-template-columns:236px minmax(0,1fr);}
  .nav-label{font-size:13px;}
  .boro-dock{grid-template-columns:1.08fr 1fr 1fr .82fr .8fr;}
  .dock-card{font-size:11.5px;}
  .dock-card dl,.vital-line{font-size:11.5px;}
  .boro-tab{min-width:94px;padding-inline:16px;}
  .tab-panel[data-panel="overview"]{grid-template-columns:1.05fr 1.08fr .82fr;gap:9px;}
  .right-stack{gap:9px;}
  .palette{gap:8px 10px;}
  .footer-status{gap:9px;}
  .footer-status span+span{padding-left:9px;}
}

/* ========================================================================
   BoroShell Master v0.1.2 — Identity & Interaction Polish
   Browser-tested refinement of v0.1.1. No structural redesign.
   ======================================================================== */
:root{
  --shell-crimson:#e33a42;
  --shell-crimson-bright:#ff4650;
  --shell-crimson-deep:#5a171e;
  --shell-border:#263944;
  --shell-border-soft:#1d313c;
  --shell-hover:#713038;
  --ease:cubic-bezier(.16,.84,.24,1);
}

/* Give BoroNav a little more visual authority without changing the shell balance. */
.app-shell{grid-template-columns:258px minmax(0,1fr);}
.boro-nav{
  padding:10px 12px 8px;
  border-right-color:#2a343b;
  box-shadow:10px 0 28px rgba(0,0,0,.08);
}
.brand-zone{height:59px;gap:12px;}
.crest{width:45px;height:45px;border-color:#9c1d23;box-shadow:inset 0 0 18px rgba(255,43,50,.17),0 0 14px rgba(126,15,23,.06);}
.brand-name{font-size:19.5px;}
.profile-card{
  height:79px;
  padding:9px 10px;
  grid-template-columns:42px 1fr 14px;
  gap:9px;
  border-color:#672128;
  background:linear-gradient(90deg,rgba(59,10,17,.78),rgba(6,24,35,.88));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
.profile-card:hover{
  border-color:#c0343c;
  box-shadow:0 9px 20px rgba(0,0,0,.20),inset 3px 0 0 var(--shell-crimson-bright),0 0 16px rgba(205,38,48,.06);
}
.avatar{width:40px;height:40px;border-color:#c02f37;background:radial-gradient(circle at 50% 38%,#261319,#121117 70%);}
.profile-copy strong{font-size:15px;}
.profile-copy em{font-size:11.5px;}
.profile-copy small{font-size:10.5px;}

/* BoroNav and BoroTabs now share the same crimson active-state language. */
.nav-item{
  height:45px;
  border-radius:4px;
  position:relative;
  overflow:hidden;
  transition:background .32s var(--ease),border-color .32s var(--ease),transform .32s var(--ease),box-shadow .32s var(--ease),color .32s var(--ease);
}
.nav-item::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  background:radial-gradient(circle at 20% 50%,rgba(255,59,68,.13),transparent 60%);
  transition:opacity .32s var(--ease);
}
.nav-item:hover::after,.nav-item.active::after{opacity:1;}
.nav-item:hover{
  transform:translateX(2px);
  background:linear-gradient(90deg,rgba(122,24,31,.40),rgba(11,29,40,.40));
  border-color:#74323a;
  box-shadow:inset 2px 0 0 rgba(244,58,65,.62),0 5px 16px rgba(0,0,0,.08);
}
.nav-item.active{
  background:linear-gradient(90deg,#8d252d 0%,#651b22 49%,#3f151b 100%);
  border-color:#c83a42;
  box-shadow:inset 3px 0 0 var(--shell-crimson-bright),inset 0 1px 0 rgba(255,255,255,.05),0 0 18px rgba(213,38,48,.10);
}
.nav-item.active .nav-label{font-weight:600;color:#fff;}
.nav-icon{width:22px;height:22px;display:grid;place-items:center;font-size:16px;color:#f33a42;filter:drop-shadow(0 0 4px rgba(238,49,58,.12));}
.nav-item.active .nav-icon{color:#ff4b53;}
.nav-chevron{opacity:.84;}

/* Dock: preserve height, improve breathing room, and mute blue-grey outlines. */
.boro-dock{gap:8px;padding:9px 11px 6px 12px;}
.dock-card{
  padding:10px 11px 9px;
  border-color:#233a47;
  position:relative;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.012);
}
.dock-card::after{
  content:"";
  position:absolute;
  left:12%;right:12%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(91,166,197,.18),transparent);
  opacity:.55;
  transition:opacity .30s var(--ease),background .30s var(--ease);
}
.dock-card:hover,.dock-card.selected{
  border-color:#365768;
  transform:translateY(-2px);
  box-shadow:0 9px 22px rgba(0,0,0,.22),0 0 0 1px rgba(61,116,139,.045);
}
.dock-card:hover::after,.dock-card.selected::after{opacity:1;}
.vitals-card{border-color:#70292f;}
.vitals-card::after{background:linear-gradient(90deg,transparent,rgba(238,57,66,.26),transparent);}
.vitals-card:hover,.vitals-card.selected{border-color:#c83a42;}
.dock-head{margin-bottom:7px;}
.dock-feature{margin-bottom:7px;}
.dock-card dl{gap:5px;}

/* BoroTabs: richer crimson depth, smoother hover, no extra height. */
.boro-tabs{
  border-bottom-color:#24343e;
  background:linear-gradient(180deg,#081925 0%,#06131d 100%);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.012);
}
.boro-tab{
  border-color:#1d3441;
  background:linear-gradient(180deg,#081a27,#071620);
  color:#d9e2e7;
  isolation:isolate;
  transition:background .38s var(--ease),color .38s var(--ease),border-color .38s var(--ease),transform .38s var(--ease),box-shadow .38s var(--ease);
}
.boro-tab::before{
  z-index:-1;
  background:radial-gradient(circle at 50% 115%,rgba(255,54,64,.24),transparent 60%);
  transition:opacity .38s var(--ease);
}
.boro-tab::after{
  height:2px;
  left:22%;right:22%;
  background:linear-gradient(90deg,transparent,#e52f38 24%,#ff4b54 50%,#e52f38 76%,transparent);
  box-shadow:0 0 8px rgba(239,47,57,.28);
  transition:transform .40s var(--ease),left .40s var(--ease),right .40s var(--ease),opacity .40s var(--ease);
}
.boro-tab:hover{
  background:linear-gradient(180deg,rgba(100,27,34,.53),#0a1b27);
  border-color:#71343b;
  box-shadow:0 -7px 17px rgba(201,36,46,.075);
}
.boro-tab:hover::after{transform:scaleX(.78);}
.boro-tab.active{
  background:linear-gradient(180deg,#982831 0%,#6c1d25 48%,#47151c 100%);
  border-color:#cb3c44;
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.075),inset 0 -1px 0 rgba(74,4,10,.45),0 -7px 22px rgba(208,33,41,.13),0 0 16px rgba(208,33,41,.045);
}
.boro-tab.active::after{left:0;right:0;transform:scaleX(1);}

/* Workspace panels: quieter borders so crimson/navy identity dominates. */
.workspace{background:radial-gradient(circle at 87% 38%,rgba(0,71,101,.05),transparent 32%),#071723;}
.panel{
  border-color:#253844;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.010),0 1px 0 rgba(0,0,0,.10);
}
.section-rule{background:#233741;}
table th{border-bottom-color:#263b46;}
table td{border-bottom-color:#18303b;}

/* Controls inherit the same gentler motion language. */
.btn,.icon-btn,.badge,.demo-card,.profile-card{transition-duration:.30s;transition-timing-function:var(--ease);}
.btn:not(:disabled):hover,.icon-btn:hover,.badge:hover{transform:translateY(-1px);}
.btn.primary:hover{box-shadow:0 6px 14px rgba(187,31,40,.16);}

/* Footer remains compact and understated. */
.boro-footer{border-top-color:#24343e;background:#06131d;}
.boro-footer>div:first-child strong{color:#ff464e;}

/* Browser-fit refinements at the viewport size used in /test/. */
@media (max-height:860px){
  .profile-card{height:75px;}
  .brand-zone{height:56px;}
  .nav-title{margin-top:14px;}
  .dock-card{padding:8px 9px 7px;}
}
@media (max-height:760px){
  .app-shell{grid-template-columns:252px minmax(0,1fr);}
  .profile-card{height:68px;}
  .nav-item{height:40px;}
}
@media(max-width:1450px){
  .app-shell{grid-template-columns:244px minmax(0,1fr);}
}
.nav-item.just-selected,.boro-tab.just-selected{animation:boroSelect .42s var(--ease);}
@keyframes boroSelect{0%{filter:brightness(1)}42%{filter:brightness(1.18)}100%{filter:brightness(1)}}
@media (max-height:860px){.dock-card{padding:8px 10px 7px;}}

/* =========================================================
   v0.1.3 — Static Hover Boxes
   Interaction rule: clickable boxes remain physically fixed.
   Feedback comes from colour, border, glow, background and
   text/icon emphasis. BoroTabs intentionally retain their
   subtle 1px hover lift.
   ========================================================= */
.profile-card:hover,
.nav-item:hover,
.dock-card:hover,
.dock-card.selected,
.btn:not(:disabled):hover,
.icon-btn:hover,
.badge:hover,
.demo-card:hover,
tbody tr:hover,
tbody tr.selected {
  transform: none !important;
}

/* Preserve highlight feedback without physical movement. */
.profile-card:hover {
  border-color:#b42c31;
  box-shadow:0 0 18px rgba(180,44,49,.13),inset 2px 0 0 var(--accent);
}
.nav-item:hover {
  box-shadow:inset 2px 0 0 rgba(255,49,49,.55),0 0 14px rgba(170,31,39,.08);
}
.dock-card:hover,.dock-card.selected {
  box-shadow:0 0 18px rgba(25,104,139,.12),inset 0 0 0 1px rgba(46,151,192,.10);
}
.vitals-card:hover,.vitals-card.selected {
  box-shadow:0 0 18px rgba(200,48,56,.11),inset 0 0 0 1px rgba(200,48,56,.08);
}
.btn.primary:hover {
  box-shadow:0 0 14px rgba(187,31,40,.18),inset 0 0 0 1px rgba(255,255,255,.04);
}
.icon-btn:hover {
  box-shadow:0 0 12px rgba(143,69,73,.12);
}
.badge:hover {
  filter:brightness(1.18);
  box-shadow:0 0 12px rgba(255,255,255,.04);
}
.demo-card:hover {
  box-shadow:0 0 18px rgba(164,55,60,.10);
}
tbody tr:hover,tbody tr.selected {
  box-shadow:inset 2px 0 0 rgba(224,58,58,.45);
}

/* Explicitly retain the subtle BoroTab movement. */
.boro-tab:hover {
  transform:translateY(-1px) !important;
}

/* =========================================================
   Tables tab — Faction Members 100-player prototype
   The BoroShell remains unchanged; these rules apply only to
   the Tables workspace and its context key in BoroNav.
   ========================================================= */
.member-status-key{display:none;position:absolute;left:10px;right:10px;bottom:82px;z-index:20;border:1px solid #244354;border-radius:4px;background:linear-gradient(180deg,#0a2230,#071a25);box-shadow:0 12px 26px rgba(0,0,0,.28);overflow:hidden}
.members-table-active .member-status-key{display:block}
.member-status-key-head{width:100%;height:32px;border:0;border-bottom:1px solid #1b3747;background:transparent;color:#e5ecf0;display:flex;align-items:center;justify-content:space-between;padding:0 10px;cursor:pointer;font-size:10px;letter-spacing:.3px}
.member-status-key-head span{color:#aab8c1;transition:transform .24s var(--ease)}
.members-table-active:not(.members-key-open) .member-status-key-body{display:none}
.members-table-active:not(.members-key-open) .member-status-key-head span{transform:rotate(180deg)}
.member-status-key-body{display:grid;gap:7px;padding:9px 10px 10px}
.member-status-key-body>div{display:grid;grid-template-columns:13px 1fr;align-items:center;font-size:10px;color:#d2dce2}
.member-status-key-body small{border-top:1px solid #173443;padding-top:8px;margin-top:2px;color:#91a4af;font-size:9px;line-height:1.35}
.rank-key{width:9px;height:9px;border-radius:50%;box-shadow:0 0 7px currentColor}.rank-key.online{background:#2fb849;color:#2fb849}.rank-key.idle{background:#ee8a18;color:#ee8a18}.rank-key.offline{background:#df343f;color:#df343f}.rank-key.abroad{background:#914ed0;color:#914ed0}.rank-key.home{background:#48badb;color:#48badb}.rank-key.outbound{background:#2d6ec7;color:#2d6ec7}

.members-panel{display:none;height:100%;min-height:0}.members-panel.active{display:block}
.members-page{height:100%;min-height:0;display:grid;grid-template-rows:28px 36px minmax(0,1fr);gap:6px}
.members-summary{min-width:0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:0 3px;color:#cbd5db;font-size:10px}
.members-summary-copy,.members-status-summary{display:flex;align-items:center;gap:7px;white-space:nowrap}.members-summary-copy strong{font-size:11px;color:#f2f5f7}.members-summary-copy span:last-child{color:#aeb9c0}.members-status-summary{justify-content:center}.members-status-summary i{font-style:normal;color:#5c6d78}.members-status-summary b{font-weight:700}.summary-online{color:#58d45a}.summary-idle{color:#f1a12b}.summary-abroad{color:#b07adb}.summary-travelling-home{color:#69c9e5}.summary-travelling-abroad{color:#5b93db}.summary-offline{color:#ff545c}.members-sort-note{justify-self:end;color:#aab7bf;font-size:9px}
.members-filters{display:grid;grid-template-columns:minmax(210px,1.15fr) repeat(3,minmax(120px,.72fr)) minmax(160px,.88fr) 36px;gap:8px;align-items:stretch}
.member-search{border:1px solid #263f4f;border-radius:3px;background:#081b27;display:grid;grid-template-columns:30px 1fr;align-items:center;color:#9fb1bd}.member-search span{text-align:center;font-size:16px}.member-search input,.members-filters select{min-width:0;border:1px solid #263f4f;border-radius:3px;background:#081b27;color:#dbe4e9;font:inherit;font-size:10px;padding:0 10px;outline:none}.member-search input{height:100%;border:0;background:transparent;padding-left:0}.member-search:focus-within,.members-filters select:focus{border-color:#7d3036;box-shadow:0 0 0 1px rgba(220,52,63,.12)}.members-reset{border:1px solid #384b57;border-radius:3px;background:#091b27;color:#c8d3d9;font-size:18px;cursor:pointer}.members-reset:hover{border-color:#a4383e;color:#fff;background:#1e151b}
.members-columns{min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.members-column{min-width:0;min-height:0;border:1px solid #263d4a;border-radius:4px;background:linear-gradient(180deg,#081d2a,#071925);overflow:hidden;display:grid;grid-template-rows:30px minmax(0,1fr)}
.members-column-title{display:flex;align-items:center;padding:0 10px;border-bottom:1px solid #1e3441;color:#ff424a;font-size:11px;font-weight:700}
.members-table-wrap{min-height:0;overflow:hidden;padding:0 7px 5px}
.members-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:9px}.members-table thead{height:25px}.members-table th{padding:0 2px;border-bottom:1px solid #2a3d48;color:#c7d2d8;font-size:8px;font-weight:700;white-space:nowrap;text-align:left}.members-table th button{border:0;background:transparent;color:inherit;font:inherit;font-weight:inherit;padding:0;cursor:pointer;white-space:nowrap}.members-table th button:hover,.members-table th button.sort-active{color:#fff}.sort-glyph{display:inline-block;min-width:8px;margin-left:2px;color:#7f929e}.sort-active .sort-glyph{color:#ff444c}.member-rank-head{display:flex!important;align-items:center;gap:2px}.status-key-trigger{width:14px;height:14px!important;border:1px solid #4c606b!important;border-radius:50%!important;color:#9fb2be!important;font-size:8px!important;display:inline-grid!important;place-items:center;padding:0!important}.bsp-head{display:flex!important;align-items:center;gap:3px}.bsp-info{width:13px;height:13px;border:1px solid #4c606b;border-radius:50%;display:inline-grid;place-items:center;color:#9fb2be;font-size:8px}
.members-table th:nth-child(1),.members-table td:nth-child(1){width:30px}.members-table th:nth-child(3),.members-table td:nth-child(3){width:35px;text-align:right}.members-table th:nth-child(4),.members-table td:nth-child(4){width:48px;text-align:right}.members-table th:nth-child(5),.members-table td:nth-child(5){width:72px}.members-table th:nth-child(6),.members-table td:nth-child(6){width:92px;text-align:right}
.members-table td{height:15px;padding:0 2px;border-bottom:1px solid #142e39;color:#cdd8de;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:15px}.members-table tbody tr{cursor:pointer}.members-table tbody tr:hover{background:rgba(87,127,149,.075);box-shadow:inset 2px 0 0 rgba(224,58,58,.45)}.members-table tbody tr.is-you{background:linear-gradient(90deg,rgba(117,25,31,.23),rgba(33,25,29,.12));outline:1px solid rgba(213,54,62,.62);outline-offset:-1px}.members-table tbody tr.is-you .member-name{color:#ffbd32}.members-table tbody tr.is-you .member-name em{color:#ff5a61;font-style:normal;font-size:8px}
.member-rank{display:inline-grid;place-items:center;min-width:20px;height:14px;padding:0 3px;border-radius:2px;color:#fff;font-size:8px;font-weight:800;line-height:1;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}.status-online{background:#249b3c}.status-idle{background:#d97d14}.status-offline{background:#bd2e37}.status-abroad{background:#7d42ad}.status-travelling-home{background:#2e9fc0}.status-travelling-abroad{background:#285fae}
.member-name{display:flex;align-items:center;gap:4px}.travel-flag{font-size:10px;line-height:1;flex:0 0 auto}.member-name>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}.member-bsp{display:flex;align-items:center;justify-content:flex-end;gap:5px}.member-bsp>span{color:#8ccf4b}.member-bsp b{width:17px;text-align:right;font-size:8px;font-weight:700}.conf-vh{color:#ff9f1c}.conf-h{color:#e9b83d}.conf-m{color:#d7d765}.conf-l{color:#9cb0bb}.conf-vl{color:#758993}
.member-empty{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);border:1px solid #334a57;background:#0a202d;color:#b9c5cc;padding:14px 18px;border-radius:4px}

@media(max-height:860px){
  .members-page{grid-template-rows:26px 33px minmax(0,1fr);gap:5px}
  .members-table td{height:13.5px;line-height:13.5px;font-size:8.5px}.member-rank{height:13px}.members-column-title{height:27px}.members-column{grid-template-rows:27px minmax(0,1fr)}
}
@media(max-width:1370px){
  .members-summary{gap:8px}.members-status-summary{gap:4px}.members-filters{grid-template-columns:minmax(170px,1fr) repeat(3,minmax(105px,.65fr)) minmax(145px,.8fr) 34px}
  .members-table{font-size:8.2px}.members-table th{font-size:7.5px}.members-table th:nth-child(5),.members-table td:nth-child(5){width:62px}.members-table th:nth-child(6),.members-table td:nth-child(6){width:82px}
}
.boro-nav{position:relative}
.members-page{position:relative}
.member-rank-head,.bsp-head{white-space:nowrap}
.member-rank-head{display:table-cell!important}
.bsp-head{display:table-cell!important}
.member-rank-head>button,.bsp-head>button{vertical-align:middle}
.members-table tbody tr.selected{background:rgba(112,31,38,.20);box-shadow:inset 2px 0 0 #e03a3a}

/* =========================================================
   Canonical BoroShell — 0.0.10
   Shared Member / Staff / Founder shell standard.
   ========================================================= */
:root{--shell-nav:242px;--shell-red:#e23138;--shell-gold:#f2a400;--shell-cyan:#1b536b}
.app-shell{grid-template-columns:var(--shell-nav) minmax(0,1fr);background:radial-gradient(circle at 7% 3%,rgba(107,0,15,.18),transparent 26%),linear-gradient(180deg,#06111a,#061722 58%,#06131c)}
.boro-nav{padding:8px 10px 7px;background:linear-gradient(180deg,rgba(31,3,11,.8),rgba(5,18,28,.98) 25%,#061722);border-right-color:#203947}
.brand-zone{height:66px;gap:10px}.brand-crest{width:48px;height:54px;display:grid;place-items:center;flex:0 0 auto}.brand-crest svg{width:44px;height:53px;overflow:visible}.brand-crest svg>path:first-child{fill:#11131a;stroke:#dc2f36;stroke-width:1.5}.brand-crest .brand-lion{fill:#dc2f36;stroke:none}.brand-name{font-size:19px;line-height:1;font-weight:750}.brand-sub{color:#dfb8ba;font-size:10px;margin-top:5px;letter-spacing:.55px}
.profile-card{height:75px;border-color:#662027;background:linear-gradient(90deg,rgba(49,7,14,.76),rgba(6,24,35,.88));grid-template-columns:42px 1fr 14px;padding:8px 9px}.profile-card:hover{transform:none!important}.avatar{width:39px;height:39px}.profile-copy strong{font-size:13px}.profile-copy em{font-size:10px}.profile-copy small{font-size:9px}.nav-title{margin:17px 5px 7px;font-size:9px;color:#aab4bb}.nav-list{gap:3px}.nav-item{height:41px;border-radius:3px;grid-template-columns:31px 1fr 16px;padding:0 8px}.nav-item:hover{transform:none!important;background:linear-gradient(90deg,rgba(86,15,23,.26),rgba(10,28,39,.42));border-color:#5f252c}.nav-item.active{background:linear-gradient(90deg,rgba(128,21,29,.78),rgba(54,18,25,.72));border-color:#ca3137;box-shadow:inset 3px 0 0 #ff383f,0 0 18px rgba(193,29,39,.1)}.nav-icon{font-size:15px}.nav-label{font-size:12px}.nav-chevron{font-size:17px}.staff-nav-group{border:1px solid transparent;border-radius:3px;overflow:hidden}.staff-nav-group.open{border-color:#6f591a;background:linear-gradient(180deg,rgba(44,36,7,.18),rgba(6,23,33,.45))}.staff-nav-group>.staff-nav-item{border:0;border-radius:0}.staff-nav-group>.staff-nav-item.active{background:linear-gradient(90deg,rgba(99,72,9,.28),rgba(18,29,34,.25));box-shadow:none;color:#f4bd35}.staff-nav-group>.staff-nav-item.active .nav-icon{color:#f3b625}.staff-nav-children{display:none;padding:2px 5px 6px}.staff-nav-group.open .staff-nav-children{display:grid;gap:2px}.staff-child{height:32px;display:grid;grid-template-columns:26px 1fr;align-items:center;padding:0 7px;border:1px solid transparent;border-radius:2px;color:#cad5db;text-decoration:none;font-size:10px}.staff-child span{text-align:center;color:#a8b7bf}.staff-child b{font-weight:550}.staff-child:hover{background:#0a2230;border-color:#284757;color:#fff}.staff-child.active{background:linear-gradient(90deg,rgba(112,26,31,.64),rgba(51,15,24,.55));border-color:#b12c33;color:#fff}.staff-child.active span{color:#ed3e46}
.nav-bottom{padding-top:9px}.privacy-card{height:54px}.nav-links{margin-top:8px}.member-status-key{bottom:76px}
.main-shell{grid-template-rows:auto 43px minmax(0,1fr) 50px}.boro-dock{grid-template-columns:1.1fr 1.02fr 1.08fr .83fr .78fr;gap:7px;padding:7px 8px 5px 12px}.dock-card{min-height:141px;padding:8px 9px 7px;border-color:#1d4b60;background:linear-gradient(180deg,#061d2b,#051722);transform:none!important}.dock-card:hover,.dock-card.selected{transform:none!important;border-color:#2a718d;box-shadow:0 0 18px rgba(25,104,139,.12),inset 0 0 0 1px rgba(46,151,192,.08)}.vitals-card{border-color:#702228}.vitals-card:hover,.vitals-card.selected{border-color:#c62d34}.dock-head{font-size:10px;margin-bottom:7px}.dock-feature{font-size:11px}.dock-card dl{gap:5px;font-size:10px}.vital-row{margin-top:6px}.vital-line{font-size:10px}.boro-tabs{height:43px;padding-left:12px;background:linear-gradient(180deg,#061723,#05131d);border-bottom-color:#183c4c}.boro-tab{height:38px;min-width:96px;font-size:11px}.boro-tab:hover{transform:translateY(-1px)!important}.tabs-spacer{height:8px;border-bottom:1px solid #183c4c}.workspace{padding:8px 8px 8px 12px;background:radial-gradient(circle at 88% 35%,rgba(0,72,100,.065),transparent 34%),#061723}.boro-footer{min-height:50px;padding:0 13px;border-top:1px solid #183443;background:#061620}.boro-footer strong{color:#ef343c}.boro-footer span{font-size:10px}.footer-status{gap:14px}

/* =========================================================
   BoroBoz Typography Standard — 0.0.10.2
   Default UI: 14px | Headers: 18px
   Dense data tables may define a smaller purpose-built scale.
   ========================================================= */
html,body{font-size:14px;line-height:1.35}
button,input,select,textarea{font-size:14px}

/* Shared BoroShell */
.brand-name{font-size:18px}
.brand-sub{font-size:12px}
.profile-copy strong{font-size:14px}
.profile-copy em,.profile-copy small{font-size:12px}
.nav-title{font-size:12px}
.nav-label{font-size:14px}
.staff-child{font-size:14px}
.privacy-card strong{font-size:14px}
.privacy-card small,.nav-links button{font-size:12px}
.dock-head,.dock-feature,.dock-feature em,.dock-card dl,.vital-line,.systems{font-size:14px}
.boro-tab{font-size:14px}
.boro-footer,.boro-footer span,.toast{font-size:14px}

/* Shared content primitives */
.panel h1,.panel h2,.panel h3{font-size:18px}
.panel p,.panel dl,.panel label,.panel button,.panel input,.panel select,.panel textarea{font-size:14px}
.btn,.badge,.alert,.presence,.standing{font-size:14px}
.caption,.overline,.table-foot{font-size:12px}

/* Normal tables use the standard scale. Dense page tables can override below. */
table{font-size:14px}
th{font-size:13px}

/* Approved exception: 100-player Faction Members table stays compact. */
.members-table{font-size:9px}
.members-table th{font-size:8px}
.members-table td{font-size:9px}
.member-rank,.member-bsp b,.members-table tbody tr.is-you .member-name em{font-size:8px}
.travel-flag{font-size:10px}
@media(max-width:1370px){
  .members-table{font-size:8.2px}
  .members-table th{font-size:7.5px}
  .members-table td{font-size:8.2px}
}
@media(max-height:860px){
  .members-table td{font-size:8.5px}
}

/* =========================================================
   BoroShell Alignment & Typography Fit — 0.0.10.2
   Refit the shared shell around the approved 14px / 18px
   typography without redesigning the canonical shell.
   ========================================================= */

/* Keep the complete left identity band aligned to the BoroDock. */
.brand-zone{height:77px;flex:0 0 77px}
.profile-card{height:75px;min-height:75px;flex:0 0 75px}

/* The old 139–141px card height clipped 14px dock rows. Give the
   same five cards enough room while preserving the one-screen shell. */
.main-shell{grid-template-rows:160px 43px minmax(0,1fr) 50px;height:100dvh;min-height:0;overflow:hidden}
.boro-dock{height:160px;min-height:160px;padding:7px 8px 5px 12px;align-items:stretch;overflow:hidden}
.dock-card{height:148px;min-height:148px;max-height:148px;padding:7px 9px 6px;overflow:hidden;line-height:1.15}
.dock-head{font-size:14px;line-height:1.15;margin-bottom:5px;min-height:16px}
.dock-feature{font-size:14px;line-height:1.15;margin-bottom:5px;min-width:0}
.dock-feature span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dock-feature em{font-size:14px;line-height:1.15}
.dock-card dl{gap:4px;font-size:14px;line-height:1.15}
.dock-card dl>div{min-width:0;align-items:center}
.dock-card dt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dock-card dd{white-space:nowrap;line-height:1.15}
.vital-row{margin-top:4px}
.vital-line{font-size:14px;line-height:1.15;grid-template-columns:minmax(0,1fr) auto 43px;gap:6px}
.vital-line span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vital-line small{font-size:12px;line-height:1.15}
.meter{margin-top:2px}
.completion{margin-top:4px}
.systems{font-size:12px;line-height:1.15;margin-top:4px;padding-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Tabs, workspace and footer share one exact vertical grid. */
.boro-tabs{height:43px;min-height:43px;align-items:end}
.boro-tab{height:39px;min-height:39px;font-size:14px;line-height:1.15;padding:0 18px}
.tabs-spacer{height:43px;min-height:43px}
.workspace{min-height:0;padding:8px 8px 10px 12px;overflow:hidden}
.boro-footer{height:50px;min-height:50px;max-height:50px;padding:0 13px;font-size:14px;line-height:1.2}
.boro-footer span{font-size:14px}
.boro-footer>div{min-width:0}
.footer-status{gap:12px;align-items:center;white-space:nowrap}
.footer-status span+span{padding-left:12px}

/* 14px navigation needs a little more line-height, not a redesign. */
.nav-item{height:42px;min-height:42px;line-height:1.2}
.nav-label{font-size:14px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.staff-child{height:34px;min-height:34px;font-size:14px;line-height:1.2}
.privacy-card{height:58px;min-height:58px}
.privacy-card strong{font-size:14px;line-height:1.15}
.privacy-card small,.nav-links button,.nav-links a{font-size:12px;line-height:1.15}

/* Drawers are anchored below the newly refitted dock/tabs band. */
.shell-drawer{top:214px}

/* Compact-height desktops: preserve 14px text and reduce spacing only. */
@media(max-height:860px){
  .brand-zone{height:73px;flex-basis:73px}
  .main-shell{grid-template-rows:156px 41px minmax(0,1fr) 46px}
  .boro-dock{height:156px;min-height:156px;padding-top:6px}
  .dock-card{height:145px;min-height:145px;max-height:145px;padding:6px 8px 5px}
  .dock-head,.dock-feature{margin-bottom:4px}
  .dock-card dl{gap:3px}
  .vital-row{margin-top:3px}
  .systems{margin-top:3px;padding-top:3px}
  .boro-tabs{height:41px;min-height:41px}
  .boro-tab{height:37px;min-height:37px}
  .workspace{padding-top:7px;padding-bottom:8px}
  .boro-footer{height:46px;min-height:46px;max-height:46px}
  .shell-drawer{top:205px}
}

/* =========================================================
   BoroShell Profile Dock — 0.0.11
   Canonical red/navy shell refinement.
   Page content and existing member-facing BoroTabs are not
   redesigned here; only the shared shell/navigation changes.
   ========================================================= */
:root{
  --shell-nav:238px;
  --shell-red:#e23840;
  --shell-red-bright:#ff3c45;
  --shell-navy:#061722;
  --shell-navy-2:#081d2a;
  --shell-gold:#e9ad28;
  --shell-gold-deep:#6e5312;
}

.app-shell{grid-template-columns:var(--shell-nav) minmax(0,1fr);}
.boro-nav{
  padding:9px 10px 8px;
  background:
    radial-gradient(circle at 18% 3%,rgba(122,9,22,.18),transparent 25%),
    linear-gradient(180deg,#16070d 0%,#07131e 24%,#061722 100%);
  border-right:1px solid #273842;
  overflow:hidden;
}
.brand-zone{
  height:82px;flex:0 0 82px;display:flex;align-items:center;gap:10px;
  color:#fff;text-decoration:none;border-bottom:1px solid rgba(150,33,42,.28);
  padding:4px 4px 8px;
}
.brand-official-logo{
  width:58px;height:58px;object-fit:cover;border-radius:50%;flex:0 0 auto;
  box-shadow:0 0 16px rgba(214,42,50,.10);
}
.brand-copy{min-width:0;display:flex;flex-direction:column;gap:4px;}
.brand-name{font-size:18px;line-height:1.05;font-weight:750;white-space:nowrap;}
.brand-sub{font-size:12px;line-height:1.1;color:#ddb7ba;letter-spacing:.45px;white-space:nowrap;}

.nav-title{font-size:12px;margin:13px 4px 7px;color:#9eabb4;}
.nav-list{gap:4px;flex:0 0 auto;}
.nav-item{height:41px;min-height:41px;grid-template-columns:29px 1fr 15px;padding:0 8px;}
.nav-icon{font-size:15px;}
.nav-label{font-size:14px;}

.nav-status-key{
  position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;
  margin:9px 0 0;display:block!important;box-shadow:none;
  background:linear-gradient(180deg,#091f2c,#071924);
}
.nav-status-key .member-status-key-body{grid-template-columns:1fr 1fr;gap:5px 8px;padding:8px;}
.nav-status-key .member-status-key-body>div{font-size:12px;}
.nav-status-key .member-status-key-body small{grid-column:1/-1;font-size:11px;}

.staff-companion-box{
  margin-top:auto;border:1px solid #8c6b16;border-radius:4px;
  background:linear-gradient(180deg,rgba(67,49,7,.40),rgba(22,27,25,.60));
  box-shadow:inset 0 1px 0 rgba(255,218,112,.05),0 0 18px rgba(197,145,18,.035);
  padding:7px;
}
.staff-companion-box.active{border-color:#b58a21;}
.staff-companion-title{
  min-height:30px;display:flex;align-items:center;gap:8px;padding:0 5px 6px;
  color:#f0bb36;border-bottom:1px solid rgba(176,132,26,.28);font-size:14px;
}
.staff-companion-title span{font-size:15px;}
.staff-companion-title strong{font-size:14px;letter-spacing:.15px;}
.staff-companion-actions{display:grid;gap:5px;padding-top:7px;}
.staff-companion-button{
  min-height:36px;width:100%;display:grid;grid-template-columns:25px 1fr 13px;align-items:center;
  padding:0 8px;border:1px solid #765a18;border-radius:3px;background:linear-gradient(180deg,rgba(66,48,10,.34),rgba(20,27,27,.74));
  color:#f1c65e;text-decoration:none;text-align:left;cursor:pointer;font-size:14px;
  transition:border-color .22s var(--ease),background .22s var(--ease),box-shadow .22s var(--ease),color .22s var(--ease);
}
.staff-companion-button span{color:#efb52a;text-align:center;}
.staff-companion-button b{font-weight:600;}
.staff-companion-button i{font-style:normal;text-align:right;color:#dbad37;font-size:17px;}
.staff-companion-button:hover,.staff-companion-button.active{
  border-color:#c29526;background:linear-gradient(90deg,rgba(101,70,9,.48),rgba(42,28,15,.58));
  color:#fff2c2;box-shadow:inset 2px 0 0 #e3af2c,0 0 12px rgba(204,155,39,.07);
}

.boro-nav-footer{
  flex:0 0 auto;margin-top:8px;padding:9px 5px 2px;border-top:1px solid #1d3440;color:#9eabb3;
}
.nav-footer-brand{display:grid;grid-template-columns:34px 1fr;gap:8px;align-items:start;}
.nav-footer-brand img{width:32px;height:32px;border-radius:50%;object-fit:cover;margin-top:1px;}
.nav-footer-brand span{display:flex;flex-direction:column;gap:2px;}
.nav-footer-brand strong{font-size:12px;color:#e8edf0;letter-spacing:.3px;}
.nav-footer-brand small{font-size:10.5px;line-height:1.35;color:#9aa8b1;}
.nav-footer-version{margin:7px 0 6px 42px;font-size:10px;color:#72848f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nav-footer-links{display:flex;justify-content:space-between;border-top:1px solid #17303d;padding-top:6px;}
.nav-footer-links button{border:0;background:none;padding:0;color:#8ea0aa;font-size:10px;cursor:pointer;}
.nav-footer-links button:hover{color:#fff;}

.main-shell{grid-template-rows:160px 43px minmax(0,1fr) 36px;}
.boro-dock{
  height:160px;min-height:160px;grid-template-columns:1.08fr 1.28fr 1.42fr 1.02fr;
  gap:8px;padding:7px 8px 5px 10px;
}
.dock-card{height:148px;min-height:148px;max-height:148px;padding:8px 10px 7px;}
.profile-dock-card{
  border-color:#6f2930;background:linear-gradient(180deg,rgba(30,11,18,.95),rgba(7,24,34,.98));
  cursor:default;display:grid;grid-template-rows:auto auto auto;gap:6px;overflow:hidden;
}
.profile-dock-card:hover{border-color:#8f3038!important;box-shadow:0 0 16px rgba(205,45,54,.07)!important;}
.profile-dock-main{display:grid;grid-template-columns:56px minmax(0,1fr) 10px;gap:9px;align-items:center;min-width:0;}
.profile-dock-avatar{width:56px;height:56px;border-radius:50%;border:1px solid #d6373f;object-fit:cover;background:#11151a;box-shadow:0 0 0 3px rgba(218,46,55,.05);}
.profile-dock-fallback{display:grid;place-items:center;color:#fff;font-size:18px;font-weight:700;background:radial-gradient(circle at 50% 35%,#34161d,#111720 68%);}
.profile-dock-copy{min-width:0;display:flex;flex-direction:column;gap:2px;}
.profile-dock-copy strong{font-size:18px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.profile-dock-copy>span{font-size:12px;color:#aebbc2;}
.profile-dock-copy em{font-size:12px;font-style:normal;color:#8fa0aa;}
.profile-dock-copy em.good{color:#51d95a;}
.verified-mark{display:inline-grid;place-items:center;width:16px;height:16px;margin-left:5px;border-radius:50%;background:#149a43;color:#fff;font-size:10px;vertical-align:2px;}
.profile-online{align-self:start;margin-top:8px;}
.profile-dock-counters{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;}
.profile-dock-counters button{
  height:29px;border:1px solid #263f4c;background:#081b27;color:#dbe4e8;border-radius:3px;cursor:pointer;
  display:grid;grid-template-columns:15px auto 1fr;gap:4px;align-items:center;padding:0 6px;text-align:left;
}
.profile-dock-counters button:hover{border-color:#754047;background:#151a22;}
.profile-dock-counters span{color:#e2aa31;font-size:12px;text-align:center;}
.profile-dock-counters b{font-size:12px;color:#fff;}
.profile-dock-counters small{font-size:10px;color:#93a5af;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.profile-dock-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.profile-dock-actions a,.profile-dock-actions button{
  height:29px;width:100%;display:grid;place-items:center;border:1px solid #3a5665;border-radius:3px;background:#081b27;
  color:#e7edf0;text-decoration:none;cursor:pointer;font-size:12px;
}
.profile-dock-actions form{margin:0;}
.profile-dock-actions a:hover{border-color:#4c7a91;background:#0b2533;}
.profile-dock-actions button{border-color:#8e3137;background:linear-gradient(180deg,#541b22,#291218);}
.profile-dock-actions button:hover{border-color:#ca3a42;background:linear-gradient(180deg,#72212a,#39131a);}

.identity-dock-card{border-color:#334852;}
.identity-dock-list{gap:0!important;}
.identity-dock-list>div{display:grid!important;grid-template-columns:62px minmax(0,1fr);gap:8px;align-items:center;min-height:24px;}
.identity-dock-list dt{color:#aebbc3;overflow:visible!important;}
.identity-dock-list dd{text-align:left!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#edf2f5!important;font-weight:600;}
.identity-dock-list .identity-divider{border-top:1px solid #243a46;margin-top:4px;padding-top:5px;min-height:30px;}
.achievements-card dl{gap:4px;font-size:14px;}
.achievements-card .completion{margin-top:5px;}

.boro-tab{display:grid;place-items:center;text-decoration:none;}
.boro-status-footer{height:36px;min-height:36px;max-height:36px;grid-template-columns:1fr 1fr auto;padding:0 14px;background:#05131d;}
.boro-status-footer .footer-status{font-size:12px;}
.boro-status-footer .footer-status span,.boro-status-footer .footer-status b{font-size:12px;}
.shell-drawer{top:205px;}
.toast{bottom:47px;}

@media(max-width:1450px){
  :root{--shell-nav:224px;}
  .brand-official-logo{width:52px;height:52px;}
  .brand-zone{height:75px;flex-basis:75px;}
  .staff-companion-button{font-size:13px;}
  .boro-dock{grid-template-columns:1.05fr 1.25fr 1.38fr 1fr;gap:6px;}
  .profile-dock-main{grid-template-columns:50px minmax(0,1fr) 9px;gap:7px;}
  .profile-dock-avatar{width:50px;height:50px;}
  .profile-dock-copy strong{font-size:16px;}
  .profile-dock-counters small{display:none;}
}
@media(max-height:860px){
  .main-shell{grid-template-rows:156px 41px minmax(0,1fr) 34px;}
  .boro-dock{height:156px;min-height:156px;}
  .dock-card{height:145px;min-height:145px;max-height:145px;}
  .brand-zone{height:70px;flex-basis:70px;}
  .brand-official-logo{width:50px;height:50px;}
  .nav-item{height:38px;min-height:38px;}
  .staff-companion-button{min-height:32px;}
  .staff-companion-actions{gap:4px;}
  .boro-status-footer{height:34px;min-height:34px;max-height:34px;}
  .shell-drawer{top:201px;}
  .toast{bottom:45px;}
  .nav-footer-brand small{font-size:9.5px;}
  .nav-footer-version{margin-top:5px;margin-bottom:4px;}
}

/* =========================================================
   BoroShell Polish — 0.0.11.1
   Shared-shell refinement only. Page content and page tabs
   remain unchanged.
   ========================================================= */

/* Brand band: let the supplied official crest lead the identity. */
.brand-zone{
  height:82px;flex-basis:82px;gap:12px;padding:4px 3px 8px;
  border-bottom-color:rgba(177,42,50,.34);
}
.brand-official-logo{
  width:64px;height:64px;flex-basis:64px;
  border:1px solid rgba(210,49,58,.28);
  box-shadow:0 0 0 1px rgba(255,255,255,.015),0 0 18px rgba(210,42,50,.12);
}
.brand-copy{gap:3px}
.brand-name{font-size:18px;letter-spacing:-.15px}
.brand-sub{font-size:12px;color:#d7b9bb;letter-spacing:.5px}

/* BoroDock: four disciplined columns with the identity tile given room. */
.boro-dock{
  grid-template-columns:minmax(0,1.08fr) minmax(0,1.30fr) minmax(0,1.48fr) minmax(0,1.04fr);
  gap:8px;padding:7px 9px 5px 10px;
  align-items:stretch;
}
.dock-card{
  height:148px;min-height:148px;max-height:148px;
  padding:8px 10px 7px;
  display:block;
}
.profile-dock-card{display:grid;grid-template-rows:58px 29px 29px;gap:4px}
.profile-dock-main{grid-template-columns:56px minmax(0,1fr) 10px;gap:10px;align-items:center}
.profile-dock-avatar{width:56px;height:56px}
.profile-dock-copy{gap:2px}
.profile-dock-copy strong{font-size:18px;line-height:1.08}
.profile-dock-copy>span,.profile-dock-copy em{font-size:12px;line-height:1.15}
.profile-online{margin-top:7px}
.profile-dock-counters{gap:5px}
.profile-dock-counters button{
  height:29px;grid-template-columns:16px auto minmax(0,1fr);gap:5px;padding:0 7px;
  border-color:#2a4654;background:linear-gradient(180deg,#0a202c,#071924);
}
.profile-dock-counters span,.profile-dock-counters b{font-size:12px}
.profile-dock-counters small{font-size:11px}
.profile-dock-actions{gap:6px}
.profile-dock-actions a,.profile-dock-actions button{height:29px;font-size:12px}

/* Shared dock rhythm: same top line, same bottom line. */
.vitals-card,.identity-dock-card,.achievements-card{display:flex;flex-direction:column}
.dock-head{flex:0 0 18px;min-height:18px;margin-bottom:5px;align-items:center}
.vitals-card .vital-row{flex:1;display:flex;flex-direction:column;justify-content:center;margin-top:0}
.identity-dock-list{flex:1;align-content:center}
.identity-dock-list>div{min-height:25px}
.identity-dock-list .identity-divider{margin-top:3px;padding-top:5px}
.achievements-card dl{flex:1;align-content:center;gap:4px}
.achievements-card .completion{flex:0 0 3px;margin-top:4px}

/* BoroNav: maintain the same hierarchy but make privileged tools feel built in. */
.staff-companion-box{
  margin-left:-1px;margin-right:-1px;padding:6px 6px 7px;
  border-radius:3px;border-color:#866614;border-left:2px solid #d0a22d;
  background:linear-gradient(180deg,rgba(65,47,8,.29),rgba(8,24,31,.72));
  box-shadow:inset 0 1px 0 rgba(255,220,121,.04);
}
.staff-companion-box.active{border-color:#a8801c;border-left-color:#e0ad31}
.staff-companion-title{min-height:29px;padding:0 5px 5px}
.staff-companion-actions{gap:4px;padding-top:6px}
.staff-companion-button{
  min-height:35px;border-color:#705718;background:rgba(8,25,32,.74);
}
.staff-companion-button:hover,.staff-companion-button.active{
  border-color:#b18924;background:linear-gradient(90deg,rgba(89,63,9,.39),rgba(16,28,31,.78));
  box-shadow:inset 2px 0 0 #dcab2f;
}

/* BoroNav footer: one brand statement, no duplicate crest. */
.boro-nav-footer{margin-top:7px;padding:8px 4px 2px}
.nav-footer-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.nav-footer-copy strong{font-size:12px;color:#f0f3f5;letter-spacing:.2px}
.nav-footer-copy small{font-size:10.5px;line-height:1.25;color:#9ba9b2}
.nav-footer-copy span{font-size:10px;line-height:1.25;color:#6f838e;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-footer-links{margin-top:6px;padding-top:6px;gap:6px}
.nav-footer-links button{font-size:10px;flex:1;text-align:center}

/* Keep the footer/status rail visually subordinate to page content. */
.boro-status-footer{border-top-color:#18323f;color:#9aa9b1}

@media(max-width:1540px){
  .boro-dock{grid-template-columns:minmax(0,1.08fr) minmax(0,1.29fr) minmax(0,1.47fr) minmax(0,1.02fr)}
  .brand-official-logo{width:58px;height:58px;flex-basis:58px}
  .profile-dock-main{grid-template-columns:52px minmax(0,1fr) 9px;gap:8px}
  .profile-dock-avatar{width:52px;height:52px}
}
@media(max-width:1370px){
  .boro-dock{grid-template-columns:1.08fr 1.28fr 1.43fr 1.01fr;gap:6px}
  .profile-dock-counters small{display:none}
}
@media(max-height:860px){
  .brand-zone{height:72px;flex-basis:72px}
  .brand-official-logo{width:52px;height:52px;flex-basis:52px}
  .profile-dock-card{grid-template-rows:57px 29px 29px;gap:4px}
  .profile-dock-main{grid-template-columns:52px minmax(0,1fr) 9px}
  .profile-dock-avatar{width:52px;height:52px}
  .profile-dock-counters button,.profile-dock-actions a,.profile-dock-actions button{height:29px}
  .staff-companion-button{min-height:32px}
  .nav-footer-copy small{font-size:9.5px}
  .nav-footer-links button{font-size:9px}
}


/* =========================================================
   BoroProfile Final Polish — 0.0.11.2
   Shared shell only. Page content and page-specific BoroTabs
   remain intentionally untouched.
   ========================================================= */
:root{
  --dock-border:#294553;
  --dock-border-red:#7b2a31;
  --dock-radius:3px;
}

/* Brand: official crest and wordmark share one centred baseline. */
.brand-zone{align-items:center;gap:11px;padding-left:4px;padding-right:4px}
.brand-official-logo{width:62px;height:62px;flex-basis:62px}
.brand-copy{justify-content:center;min-height:56px}
.brand-name{font-size:18px;line-height:1.02}
.brand-sub{margin-top:2px;font-size:11.5px;line-height:1.05}

/* One border language across the complete top shell. */
.dock-card{
  border-radius:var(--dock-radius);
  border-color:var(--dock-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
.profile-dock-card,.api-dock-card{border-color:var(--dock-border-red)}
.profile-dock-card:hover,.api-dock-card:hover{border-color:#a7353d!important}
.torn-identity-card,.privacy-api-card{border-color:var(--dock-border)}
.torn-identity-card:hover,.privacy-api-card:hover{border-color:#3b6477!important}

/* BoroProfile: image-led identity, live facts and compact destinations. */
.profile-dock-card{grid-template-rows:60px 32px 29px;gap:5px}
.profile-dock-main{grid-template-columns:60px minmax(0,1fr) 10px;gap:10px}
.profile-dock-avatar-shell{
  position:relative;width:60px;height:60px;display:block;border-radius:50%;overflow:hidden;
  background:#111720;box-shadow:0 0 0 3px rgba(218,46,55,.045)
}
.profile-dock-avatar{position:absolute;inset:0;width:60px;height:60px;border-radius:50%;border:1px solid #d6373f}
.profile-dock-avatar-img{z-index:2;object-fit:cover;background:#111720}
.profile-dock-fallback{z-index:1;display:grid;place-items:center;font-size:19px}
.profile-dock-copy strong{font-size:18px;line-height:1.04}
.profile-dock-id{font-size:10.5px!important;letter-spacing:.25px;color:#8fa3ae!important}
.profile-dock-id b{color:#d8e2e7;font-weight:650;font-variant-numeric:tabular-nums}
.profile-dock-status{display:flex;align-items:center;gap:4px;min-width:0}
.profile-dock-status em,.profile-dock-status span{
  min-width:0;padding:2px 5px;border:1px solid #28424e;border-radius:2px;background:#081a24;
  color:#9cb0ba;font-size:8px!important;font-style:normal;line-height:1;letter-spacing:.35px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis
}
.profile-dock-status em.good{border-color:#236738;background:rgba(24,92,44,.2);color:#61df72}
.profile-dock-status span{border-color:#5b4820;background:rgba(87,62,15,.18);color:#efc35a}
.profile-dock-facts{display:grid!important;grid-template-columns:.55fr .92fr 1.53fr;gap:4px!important;margin:0;min-width:0}
.profile-dock-facts>div{
  display:flex!important;min-width:0;flex-direction:column;justify-content:center!important;align-items:flex-start!important;
  gap:1px!important;padding:3px 6px;border:1px solid #263f4b;border-radius:3px;background:linear-gradient(180deg,#0a202c,#071923)
}
.profile-dock-facts dt{
  width:100%;color:#718995!important;font-size:8px!important;line-height:1;letter-spacing:.45px;overflow:hidden;text-overflow:ellipsis
}
.profile-dock-facts dd{
  width:100%;margin:0;color:#eef3f5!important;font-size:11px!important;line-height:1.15;font-weight:700;
  text-align:left!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.profile-dock-actions{grid-template-columns:minmax(0,1.22fr) minmax(0,1fr) minmax(0,.68fr);gap:4px}
.profile-dock-actions form{min-width:0}
.profile-dock-actions a,.profile-dock-actions button{min-width:0;padding:0 3px;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-dock-actions .profile-public-link{border-color:#6f2930;background:linear-gradient(180deg,#26131a,#111821)}
.profile-dock-actions .profile-public-link:hover{border-color:#ad343d;background:linear-gradient(180deg,#39151d,#151a22)}

/* API Connection: safe metadata, current sync state and encrypted-key posture. */
.api-dock-card,.torn-identity-card,.privacy-api-card{display:flex;flex-direction:column;gap:4px;cursor:pointer}
.api-dock-card .dock-head,.torn-identity-card .dock-head,.privacy-api-card .dock-head{margin-bottom:1px}
.api-state{
  max-width:92px;padding:2px 5px;border:1px solid #4b3f26;border-radius:2px;background:#1d1a10;
  color:#d2ad4f;font-size:8px;line-height:1;letter-spacing:.45px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.api-state.connected{border-color:#25633a;background:rgba(24,92,44,.18);color:#5ee46f}
.api-dock-primary{display:grid;grid-template-columns:34px minmax(0,1fr);gap:7px;align-items:center;min-height:34px}
.api-signal{
  width:32px;height:32px;display:flex;align-items:flex-end;justify-content:center;gap:3px;padding:6px;
  border:1px solid #6d2a31;border-radius:3px;background:linear-gradient(180deg,#28131a,#101822);box-sizing:border-box
}
.api-signal i{display:block;width:4px;border-radius:1px;background:#e33b43;box-shadow:0 0 6px rgba(227,59,67,.25)}
.api-signal i:nth-child(1){height:7px}.api-signal i:nth-child(2){height:12px}.api-signal i:nth-child(3){height:18px}
.api-dock-primary>div{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 6px;align-items:center}
.api-dock-primary small{grid-column:1/-1;color:#708894;font-size:8px;letter-spacing:.45px}
.api-dock-primary b{min-width:0;color:#f0f4f6;font-size:12px;letter-spacing:.55px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.api-dock-primary em{color:#efbd53;font-size:9px;font-style:normal;white-space:nowrap}
.api-dock-list{display:grid!important;grid-template-columns:1fr 1fr;gap:4px!important;margin:0}
.api-dock-list>div{
  display:flex!important;min-width:0;flex-direction:column;gap:1px!important;padding:4px 6px;border:1px solid #253e4a;
  border-radius:3px;background:#071923
}
.api-dock-list dt{color:#718a96!important;font-size:8px!important}.api-dock-list dd{margin:0;color:#dce5e9!important;font-size:10px!important;font-weight:700;white-space:nowrap}
.api-dock-foot,.identity-faction,.privacy-key{
  min-height:20px;display:grid;align-items:center;gap:5px;padding:0 6px;border-top:1px solid #203946;color:#8fa3ae;font-size:8.5px
}
.api-dock-foot{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 8px}
.api-dock-foot span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.api-dock-foot span:first-child{color:#75badd}.api-dock-foot span:nth-child(2){color:#7ecb8a}.api-dock-foot i{color:#e8a33a;font-size:15px;font-style:normal}

/* Torn Identity: public profile facts returned by the connected Torn identity. */
.identity-id{color:#6eb7d9;font-size:9px;font-variant-numeric:tabular-nums;letter-spacing:.3px}
.identity-status{
  min-height:24px;display:grid;grid-template-columns:auto minmax(0,1fr) 10px;gap:7px;align-items:center;padding:0 7px;
  border:1px solid #254351;border-radius:3px;background:linear-gradient(90deg,#071b27,#0a222d)
}
.identity-status span,.privacy-mode span{color:#718a96;font-size:8px;letter-spacing:.45px}.identity-status b{min-width:0;color:#62de70;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.identity-status .dot{margin:0;width:6px;height:6px}
.identity-metrics{display:grid!important;grid-template-columns:.55fr 1.25fr .8fr;gap:4px!important;margin:0}
.identity-metrics>div{
  display:flex!important;min-width:0;flex-direction:column;gap:2px!important;padding:5px 6px;border:1px solid #253e4a;
  border-radius:3px;background:#071923
}
.identity-metrics dt{color:#718a96!important;font-size:8px!important;letter-spacing:.4px}.identity-metrics dd{margin:0;color:#edf2f4!important;font-size:11px!important;font-weight:700;text-align:left!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.identity-faction{grid-template-columns:auto minmax(0,1fr) auto 8px}
.identity-faction span{color:#718a96;letter-spacing:.4px}.identity-faction b{min-width:0;color:#e4ebee;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.identity-faction em{color:#efbd53;font-style:normal}.identity-faction i{color:#e8a33a;font-size:15px;font-style:normal}

/* Privacy & Access: user-controlled visibility with API-key storage state. */
.privacy-lock{color:#e8b64d;font-size:12px}.privacy-mode{
  min-height:25px;display:flex;justify-content:space-between;align-items:center;padding:0 7px;border:1px solid #574720;
  border-radius:3px;background:linear-gradient(90deg,rgba(79,58,14,.22),#081b25)
}
.privacy-mode b{color:#f1c860;font-size:10px;letter-spacing:.45px}
.privacy-dock-list{display:grid!important;gap:0!important;margin:0;flex:1}
.privacy-dock-list>div{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center;min-height:19px;border-bottom:1px solid #19323e}
.privacy-dock-list>div:last-child{border-bottom:0}.privacy-dock-list dt{color:#91a4ad!important;font-size:9px!important}.privacy-dock-list dd{margin:0;color:#dce5e9!important;font-size:9px!important;font-weight:700;text-align:right!important;white-space:nowrap}
.privacy-key{grid-template-columns:auto minmax(0,1fr) 8px}.privacy-key span{color:#718a96;letter-spacing:.4px}.privacy-key b{color:#67d979;text-align:right}.privacy-key i{color:#e8a33a;font-size:15px;font-style:normal}

/* Faction & Company: label/value rows read as a compact data table. */
.identity-dock-list{padding-top:1px;padding-bottom:1px}
.identity-dock-list>div{grid-template-columns:72px minmax(0,1fr);min-height:26px;gap:10px}
.identity-dock-list dt{font-size:13px;color:#a9b8c0;text-align:left}
.identity-dock-list dd{font-size:13.5px;line-height:1.15;font-weight:650}
.identity-dock-list .identity-divider{margin-top:3px;padding-top:6px;min-height:32px}

/* Staff Companion: exact row rhythm and tighter title-to-action relationship. */
.staff-companion-box{padding:6px 6px 7px}
.staff-companion-title{min-height:27px;padding:0 5px 4px}
.staff-companion-actions{gap:4px;padding-top:5px}
.staff-companion-button{height:35px;min-height:35px;padding:0 8px;grid-template-columns:25px minmax(0,1fr) 13px}
.staff-companion-button b{line-height:1.1}

/* Footer: stronger site identity, quieter legal/version detail. */
.boro-nav-footer{padding-top:8px}
.nav-footer-copy strong{font-size:12.5px;font-weight:750;color:#f2f5f6}
.nav-footer-copy small{font-size:10px;color:#8497a2}
.nav-footer-copy span{font-size:9.5px;color:#657b87}
.nav-footer-links button{font-size:10px;color:#a2b1b9}
.nav-footer-links button:hover{color:#f1c65e}

@media(max-width:1540px){
  .brand-official-logo{width:57px;height:57px;flex-basis:57px}
  .profile-dock-main{grid-template-columns:54px minmax(0,1fr) 9px}
  .profile-dock-avatar-shell,.profile-dock-avatar{width:54px;height:54px}
}
@media(max-height:860px){
  .brand-official-logo{width:51px;height:51px;flex-basis:51px}
  .profile-dock-card{grid-template-rows:52px 32px 29px}
  .profile-dock-main{grid-template-columns:51px minmax(0,1fr) 9px}
  .profile-dock-avatar-shell,.profile-dock-avatar{width:51px;height:51px}
  .profile-dock-copy strong{font-size:16px}
  .profile-dock-actions a,.profile-dock-actions button{font-size:10px}
}

/* =========================================================
   BoroShell Crimson Glass
   Shared shell surfaces only: BoroNav, BoroDock, BoroTabs,
   Staff Companion, drawers and status rail. Page content is
   intentionally untouched.
   ========================================================= */
:root{
  --shell-navy-0:#041019;
  --shell-navy-1:#061722;
  --shell-navy-2:#08202c;
  --shell-line:rgba(71,113,133,.34);
  --shell-line-soft:rgba(65,102,120,.2);
  --shell-crimson:#d7353e;
  --shell-crimson-bright:#ff4a52;
  --shell-crimson-deep:#5f1821;
  --shell-cyan:#67b8d8;
  --shell-gold:#e4b74d;
  --shell-shadow:0 14px 30px rgba(0,0,0,.22);
}

body{background:var(--shell-navy-0)}
.app-shell{
  background:
    radial-gradient(circle at 8% 2%,rgba(153,18,31,.17),transparent 24%),
    radial-gradient(circle at 86% 0,rgba(18,99,132,.1),transparent 28%),
    linear-gradient(180deg,#06131d,#05131c 58%,#041019);
}
.main-shell{background:linear-gradient(180deg,#061722,#05141e)}

/* BoroNav: stronger identity, quieter rows, unmistakable active state. */
.boro-nav{
  border-right:1px solid rgba(74,117,137,.38);
  background:
    radial-gradient(circle at 48% 3%,rgba(132,17,29,.22),transparent 22%),
    linear-gradient(180deg,#07131d 0,#061722 48%,#05131c 100%);
  box-shadow:8px 0 24px rgba(0,0,0,.16),inset -1px 0 rgba(255,255,255,.012);
}
.brand-zone{
  position:relative;border-bottom:0;background:linear-gradient(180deg,rgba(64,13,20,.22),transparent);
}
.brand-zone::after{
  content:"";position:absolute;left:4px;right:4px;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(221,48,58,.7) 18%,rgba(55,94,112,.38) 72%,transparent);
}
.brand-official-logo{filter:drop-shadow(0 5px 12px rgba(0,0,0,.3)) drop-shadow(0 0 8px rgba(198,43,52,.09))}
.brand-name{letter-spacing:-.12px;text-shadow:0 1px 8px rgba(0,0,0,.38)}
.brand-sub{color:#d7b9bc;letter-spacing:.62px}
.nav-title{margin-top:15px;color:#718a96;font-size:9px;font-weight:750;letter-spacing:1.3px}
.nav-list{gap:4px}
.nav-item{
  position:relative;border-color:transparent;border-radius:4px;color:#c8d3d9;
  background:linear-gradient(90deg,transparent,rgba(11,32,44,.2));
  transition:color .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.nav-item::before{
  content:"";position:absolute;left:-1px;top:9px;bottom:9px;width:2px;border-radius:2px;
  background:transparent;box-shadow:none;transition:background .16s ease,box-shadow .16s ease;
}
.nav-item:hover{
  transform:none;color:#f2f6f8;border-color:rgba(70,111,130,.38);
  background:linear-gradient(90deg,rgba(103,27,36,.2),rgba(9,32,44,.64));
}
.nav-item:hover::before{background:#8f3139}
.nav-item.active{
  border-color:rgba(220,50,59,.76);color:#fff;
  background:linear-gradient(90deg,rgba(132,26,36,.88),rgba(62,18,27,.72) 55%,rgba(9,31,42,.7));
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 7px 16px rgba(0,0,0,.12),0 0 18px rgba(196,38,48,.08);
}
.nav-item.active::before{top:6px;bottom:6px;width:3px;background:var(--shell-crimson-bright);box-shadow:0 0 12px rgba(255,65,74,.55)}
.nav-item.active .nav-icon{color:#ff5960;text-shadow:0 0 10px rgba(255,58,66,.22)}
.nav-icon{color:#d83a43}.nav-chevron{color:#7f98a4}
.nav-item:hover .nav-chevron,.nav-item.active .nav-chevron{color:#d9e5e9}

/* BoroDock: four clear instruments on a single visual deck. */
.boro-dock{
  position:relative;border-bottom:1px solid rgba(54,91,108,.32);
  background:
    linear-gradient(180deg,rgba(7,25,36,.98),rgba(5,20,30,.96)),
    radial-gradient(circle at 12% 0,rgba(151,28,39,.16),transparent 32%);
  box-shadow:0 9px 22px rgba(0,0,0,.12);
}
.dock-card{
  position:relative;overflow:hidden;border-radius:5px;
  border-color:rgba(67,105,122,.52);
  background:linear-gradient(155deg,rgba(9,32,44,.98),rgba(5,21,31,.98) 68%);
  box-shadow:inset 0 1px rgba(255,255,255,.028),0 6px 15px rgba(0,0,0,.12);
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease,filter .16s ease;
}
.dock-card::before{
  content:"";position:absolute;z-index:3;left:0;right:0;top:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(89,153,180,.65),transparent);opacity:.54;
}
.profile-dock-card::before,.api-dock-card::before{background:linear-gradient(90deg,transparent,rgba(226,53,63,.84),transparent);opacity:.75}
.privacy-api-card::before{background:linear-gradient(90deg,transparent,rgba(221,177,66,.7),transparent);opacity:.65}
.dock-card:hover,.dock-card.selected{
  transform:translateY(-1px)!important;filter:brightness(1.035);
  border-color:rgba(94,151,177,.72)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.04),0 10px 22px rgba(0,0,0,.2),0 0 16px rgba(39,124,158,.08)!important;
}
.profile-dock-card:hover,.api-dock-card:hover{
  border-color:rgba(210,55,65,.82)!important;box-shadow:inset 0 1px rgba(255,255,255,.04),0 10px 22px rgba(0,0,0,.2),0 0 17px rgba(204,45,55,.09)!important;
}
.dock-head strong{color:#f3f6f7;letter-spacing:.45px;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.dock-head::after{content:"";position:absolute;left:10px;right:10px;top:26px;height:1px;background:linear-gradient(90deg,rgba(76,112,129,.22),transparent 74%);pointer-events:none}
.profile-dock-avatar-shell{box-shadow:0 0 0 3px rgba(213,47,57,.07),0 7px 17px rgba(0,0,0,.28)}
.profile-dock-avatar{border-color:#db3a43;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.profile-dock-copy strong{color:#f7f9fa;text-shadow:0 1px 9px rgba(0,0,0,.5)}
.profile-dock-facts>div,.api-dock-list>div,.identity-metrics>div{
  border-color:rgba(55,93,110,.52);background:linear-gradient(180deg,rgba(9,31,43,.92),rgba(6,24,34,.92));
  box-shadow:inset 0 1px rgba(255,255,255,.018);
}
.profile-dock-actions a,.profile-dock-actions button{
  border-color:rgba(64,104,122,.62);background:linear-gradient(180deg,#0a2634,#071b27);
  transition:border-color .15s ease,background .15s ease,color .15s ease,box-shadow .15s ease;
}
.profile-dock-actions a:hover{color:#fff;border-color:#5f9ab3;background:linear-gradient(180deg,#0d3141,#092331);box-shadow:0 5px 12px rgba(0,0,0,.15)}
.profile-dock-actions .profile-public-link{border-color:rgba(147,45,54,.78);background:linear-gradient(180deg,#32151c,#121923)}
.profile-dock-actions button{border-color:rgba(148,47,55,.76);background:linear-gradient(180deg,#5b1d25,#2a1218)}
.api-signal{box-shadow:inset 0 1px rgba(255,255,255,.025),0 6px 12px rgba(0,0,0,.18)}
.identity-status,.privacy-mode{box-shadow:inset 0 1px rgba(255,255,255,.02)}
.api-dock-foot,.identity-faction,.privacy-key{border-top-color:rgba(55,93,110,.42)}

/* BoroTabs: a calm segmented rail with one crimson focal point. */
.boro-tabs{
  gap:3px;padding:4px 10px 0 12px;border-bottom-color:rgba(58,97,114,.45);
  background:linear-gradient(180deg,#061925,#05141e);
  box-shadow:inset 0 1px rgba(255,255,255,.014);
}
.boro-tab{
  position:relative;height:39px;border:1px solid transparent;border-bottom:0;border-radius:4px 4px 0 0;
  color:#9eafb7;background:transparent;font-weight:620;letter-spacing:.05px;
  transition:color .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
.boro-tab::after{
  content:"";position:absolute;left:22%;right:22%;bottom:0;height:2px;border-radius:2px 2px 0 0;
  background:transparent;transition:left .15s ease,right .15s ease,background .15s ease,box-shadow .15s ease;
}
.boro-tab:hover{transform:none!important;color:#edf3f5;border-color:rgba(55,94,112,.38);background:rgba(10,35,47,.7)}
.boro-tab.active{
  color:#fff;border-color:rgba(194,47,57,.72);
  background:linear-gradient(180deg,rgba(116,26,35,.82),rgba(54,18,26,.76));
  box-shadow:inset 0 1px rgba(255,255,255,.04),0 -5px 16px rgba(190,38,49,.08);
}
.boro-tab.active::after{left:12%;right:12%;background:var(--shell-crimson-bright);box-shadow:0 0 10px rgba(255,60,69,.42)}
.tabs-fill{border-bottom:0}

/* Staff and footer remain privileged but visually subordinate. */
.staff-companion-box{
  border-color:rgba(168,126,28,.7);border-left-color:#d8a72f;
  background:linear-gradient(180deg,rgba(64,46,9,.24),rgba(6,24,32,.76));
  box-shadow:inset 0 1px rgba(255,224,130,.035),0 7px 18px rgba(0,0,0,.1);
}
.staff-companion-title{border-bottom-color:rgba(153,117,31,.32)}
.staff-companion-button{border-color:rgba(117,91,28,.66);background:linear-gradient(90deg,rgba(13,35,42,.92),rgba(7,26,34,.88));color:#e4d49f}
.staff-companion-button:hover,.staff-companion-button.active{border-color:#b58b28;background:linear-gradient(90deg,rgba(87,62,10,.42),rgba(10,31,38,.9));box-shadow:inset 2px 0 #e1ac30}
.boro-nav-footer{border-top-color:rgba(55,90,105,.36)}
.nav-footer-links{border-top-color:rgba(55,90,105,.3)}
.boro-status-footer{
  border-top-color:rgba(53,91,108,.42);background:linear-gradient(180deg,#061722,#04131c);
  box-shadow:0 -7px 20px rgba(0,0,0,.08);
}
.boro-status-footer .footer-status{color:#8fa2ab}
.boro-status-footer .footer-status span:first-child{color:#b5c3c9}

/* Shared overlays inherit the same visual language. */
.shell-drawer{
  border-left-color:rgba(105,154,176,.55);background:linear-gradient(180deg,#08202c,#05151f);
  box-shadow:-18px 0 36px rgba(0,0,0,.34);
}
.shell-drawer-head{border-bottom-color:rgba(71,112,131,.4);background:linear-gradient(180deg,rgba(74,19,28,.5),rgba(8,30,41,.78))}
.toast{border-color:rgba(83,129,149,.58);background:linear-gradient(180deg,#0b2836,#071b27);box-shadow:var(--shell-shadow)}

@media(prefers-reduced-motion:reduce){
  .nav-item,.dock-card,.boro-tab,.profile-dock-actions a,.profile-dock-actions button{transition:none!important}
}

/* Selected direction C: richer depth without moving shell geometry. */
.app-shell{
  background:
    radial-gradient(circle at 7% 1%,rgba(158,19,35,.24),transparent 25%),
    radial-gradient(circle at 76% -8%,rgba(19,92,121,.13),transparent 32%),
    linear-gradient(180deg,#07121c,#05131c 55%,#040f17);
}
.boro-nav{
  border-right-color:rgba(110,47,59,.58);
  background:
    radial-gradient(circle at 50% 3%,rgba(167,22,39,.32),transparent 24%),
    linear-gradient(180deg,#10101a 0,#071721 38%,#05131c 100%);
  box-shadow:10px 0 28px rgba(0,0,0,.2),inset -1px 0 rgba(229,57,68,.035);
}
.brand-zone{background:linear-gradient(180deg,rgba(100,19,31,.26),rgba(10,22,31,.04))}
.brand-zone::after{background:linear-gradient(90deg,transparent,rgba(238,62,72,.82) 22%,rgba(101,46,58,.46) 76%,transparent)}
.brand-official-logo{filter:drop-shadow(0 7px 14px rgba(0,0,0,.34)) drop-shadow(0 0 12px rgba(226,51,62,.16))}
.nav-item{border-radius:7px}
.nav-item:hover{border-color:rgba(100,66,76,.5);background:linear-gradient(90deg,rgba(102,25,37,.3),rgba(10,31,42,.7))}
.nav-item.active{
  border-color:rgba(222,56,66,.82);border-radius:7px;
  background:linear-gradient(100deg,rgba(146,30,43,.92),rgba(67,22,32,.82) 57%,rgba(10,31,42,.76));
  box-shadow:inset 0 1px rgba(255,255,255,.055),0 9px 20px rgba(0,0,0,.18),0 0 20px rgba(210,42,54,.13);
}

.boro-dock{
  background:
    radial-gradient(circle at 10% -12%,rgba(163,29,44,.25),transparent 37%),
    radial-gradient(circle at 78% 0,rgba(22,91,119,.12),transparent 34%),
    linear-gradient(180deg,rgba(8,27,38,.98),rgba(5,19,28,.98));
  border-bottom-color:rgba(78,51,60,.55);box-shadow:0 11px 26px rgba(0,0,0,.16);
}
.dock-card{
  border-radius:9px;border-color:rgba(108,75,84,.76);
  background:linear-gradient(145deg,rgba(25,31,43,.98),rgba(7,25,35,.97) 65%,rgba(5,20,29,.98));
  box-shadow:inset 0 1px rgba(255,255,255,.04),0 10px 23px rgba(0,0,0,.2);
}
.profile-dock-card,.api-dock-card{border-color:rgba(130,47,58,.86)}
.dock-card::before{height:3px;background:linear-gradient(90deg,transparent,rgba(103,186,218,.78),transparent);opacity:.7}
.profile-dock-card::before,.api-dock-card::before{background:linear-gradient(90deg,transparent,rgba(245,71,81,.94),transparent);opacity:.88}
.privacy-api-card::before{background:linear-gradient(90deg,transparent,rgba(236,190,72,.82),transparent)}
.dock-card:hover,.dock-card.selected{
  transform:translateY(-2px)!important;filter:brightness(1.045);
  box-shadow:inset 0 1px rgba(255,255,255,.055),0 14px 28px rgba(0,0,0,.25),0 0 19px rgba(54,139,174,.1)!important;
}
.profile-dock-card:hover,.api-dock-card:hover{
  border-color:rgba(233,65,75,.9)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.055),0 14px 28px rgba(0,0,0,.25),0 0 21px rgba(217,47,59,.14)!important;
}
.profile-dock-avatar-shell{box-shadow:0 0 0 3px rgba(229,55,66,.1),0 9px 20px rgba(0,0,0,.34),0 0 16px rgba(216,47,59,.1)}
.profile-dock-facts>div,.api-dock-list>div,.identity-metrics>div,.identity-status,.privacy-mode{
  border-radius:5px;background:linear-gradient(150deg,rgba(12,38,50,.94),rgba(7,25,35,.94));
}
.profile-dock-actions a,.profile-dock-actions button{border-radius:5px}
.profile-dock-actions .profile-public-link{background:linear-gradient(160deg,#401923,#151923);box-shadow:inset 0 1px rgba(255,255,255,.025)}
.profile-dock-actions button{background:linear-gradient(160deg,#6b222b,#30141b)}
.api-signal{border-radius:6px;background:linear-gradient(150deg,#34151e,#111923);box-shadow:0 7px 15px rgba(0,0,0,.23),0 0 12px rgba(213,49,60,.07)}

.boro-tabs{background:linear-gradient(180deg,#081925,#05141e);border-bottom-color:rgba(76,49,58,.56)}
.boro-tab{border-radius:8px 8px 0 0}
.boro-tab:hover{background:linear-gradient(180deg,rgba(20,45,57,.82),rgba(8,30,41,.76))}
.boro-tab.active{
  border-color:rgba(207,56,67,.82);
  background:linear-gradient(180deg,rgba(139,38,51,.94),rgba(58,23,32,.9));
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 -8px 20px rgba(205,43,56,.12);
}
.boro-tab.active::after{background:#ff5961;box-shadow:0 0 14px rgba(255,74,83,.56)}

.staff-companion-box{border-radius:7px;background:linear-gradient(160deg,rgba(73,53,12,.34),rgba(8,27,34,.84));box-shadow:inset 0 1px rgba(255,226,135,.045),0 10px 22px rgba(0,0,0,.15)}
.staff-companion-button{border-radius:5px}
.boro-status-footer{background:linear-gradient(180deg,#071722,#04121b);box-shadow:0 -8px 22px rgba(0,0,0,.11)}
.shell-drawer{background:linear-gradient(150deg,#0c2632,#061620);border-left-color:rgba(137,53,65,.75);box-shadow:-22px 0 42px rgba(0,0,0,.4),-3px 0 18px rgba(195,43,55,.08)}
.shell-drawer-head{background:linear-gradient(120deg,rgba(104,24,36,.74),rgba(9,31,42,.9))}
.toast{border-radius:7px;background:linear-gradient(145deg,#122c37,#081a25);box-shadow:0 18px 36px rgba(0,0,0,.34),0 0 18px rgba(194,45,56,.08)}

/* BoroNav brand utilities: live Torn time, honest API capacity and refresh. */
.brand-zone{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center}
.brand-logo-link{display:grid;place-items:center;color:inherit;text-decoration:none}
.brand-home-copy{min-width:0;display:flex;flex-direction:column;gap:3px;color:inherit;text-decoration:none}
.brand-copy{min-height:0;display:grid;grid-template-rows:auto 17px;gap:4px;justify-content:stretch}
.brand-utility-strip{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto 20px;gap:4px;align-items:center}
.brand-torn-clock,.brand-api-limit,.brand-refresh{
  height:17px;min-width:0;border:1px solid rgba(78,114,130,.48);border-radius:4px;
  background:linear-gradient(180deg,rgba(11,38,50,.9),rgba(6,25,35,.94));color:#b8c8cf;
  box-shadow:inset 0 1px rgba(255,255,255,.025);font-size:8px;line-height:1
}
.brand-torn-clock{display:grid;grid-template-columns:4px minmax(0,1fr) auto;gap:3px;align-items:center;padding:0 4px;font-variant-numeric:tabular-nums}
.brand-torn-clock i{width:4px;height:4px;border-radius:50%;background:#4cdb66;box-shadow:0 0 7px rgba(76,219,102,.65)}
.brand-torn-clock b{min-width:0;color:#edf3f5;font-size:8.5px;font-weight:700;letter-spacing:.15px;white-space:nowrap;overflow:hidden}
.brand-torn-clock small{color:#6db7d7;font-size:7px;font-weight:750;letter-spacing:.3px}
.brand-api-limit,.brand-refresh{display:grid;place-items:center;padding:0;cursor:pointer;font-family:inherit}
.brand-api-limit{padding:0 4px;border-color:rgba(125,93,35,.58);color:#e9bd58;white-space:nowrap}
.brand-api-limit:hover,.brand-api-limit:focus-visible{border-color:#d6a93f;background:linear-gradient(180deg,rgba(72,53,15,.68),rgba(19,31,32,.94));color:#ffe08a;outline:0}
.brand-refresh{color:#dce6ea;font-size:14px}
.brand-refresh:hover,.brand-refresh:focus-visible{border-color:#d33f49;background:linear-gradient(180deg,rgba(101,25,36,.78),rgba(27,23,30,.94));color:#fff;outline:0}
.brand-refresh:disabled{cursor:wait;opacity:.72}
.brand-refresh.refreshing span{animation:brand-refresh-spin .65s linear infinite}
@keyframes brand-refresh-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.brand-refresh.refreshing span{animation:none}}

/* Footerless BoroShell: reclaim the former status rail for page content. */
.main-shell{grid-template-rows:160px 43px minmax(0,1fr)}
.toast{bottom:12px}
@media(max-height:860px){
  .main-shell{grid-template-rows:156px 41px minmax(0,1fr)}
  .toast{bottom:12px}
}

/* Staff shell reflow: management in BoroDock, personal settings in BoroNav. */
.staff-dock-card{
  display:flex;flex-direction:column;gap:6px;cursor:default;border-color:rgba(151,47,60,.9);
  background:linear-gradient(145deg,rgba(48,18,27,.98),rgba(10,27,37,.98) 62%,rgba(6,21,30,.98))
}
.staff-dock-card::before{background:linear-gradient(90deg,transparent,rgba(249,72,83,.96),transparent);opacity:.9}
.staff-dock-card:hover{border-color:rgba(224,63,74,.94)!important}
.staff-dock-role{
  padding:2px 5px;border:1px solid rgba(199,56,68,.72);border-radius:3px;background:rgba(99,25,36,.4);
  color:#ff858c;font-size:8px;line-height:1;letter-spacing:.55px
}
.staff-dock-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;min-height:0;flex:1}
.staff-dock-action{
  min-width:0;min-height:38px;display:grid;grid-template-columns:20px minmax(0,1fr) 9px;align-items:center;gap:4px;
  padding:0 7px;border:1px solid rgba(100,60,70,.76);border-radius:5px;background:linear-gradient(155deg,rgba(47,20,28,.82),rgba(7,29,39,.94));
  color:#d9e3e7;text-decoration:none;text-align:left;cursor:pointer;font-family:inherit
}
.staff-dock-action span{color:#f0525b;text-align:center;font-size:12px}.staff-dock-action b{min-width:0;font-size:10px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.staff-dock-action i{color:#cc6970;font-size:14px;font-style:normal;text-align:right}
.staff-dock-action:hover,.staff-dock-action.active{border-color:#dc4550;background:linear-gradient(145deg,rgba(126,31,44,.82),rgba(31,25,34,.94));color:#fff;box-shadow:inset 2px 0 #ff5660,0 0 13px rgba(214,47,59,.1)}
.staff-dock-foot{min-height:18px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 5px;border-top:1px solid rgba(108,51,62,.52);color:#8fa2ab;font-size:8.5px}
.staff-dock-foot span:first-child{color:#ed6a72}.staff-dock-foot span:last-child{white-space:nowrap}

.user-settings-box{
  margin-top:auto;padding:6px 6px 7px;border:1px solid rgba(177,48,60,.86);border-left:2px solid #ef4853;border-radius:7px;
  background:linear-gradient(155deg,rgba(74,20,31,.46),rgba(8,27,36,.92));box-shadow:inset 0 1px rgba(255,255,255,.035),0 10px 22px rgba(0,0,0,.16),0 0 17px rgba(201,43,55,.07)
}
.user-settings-box.active{border-color:#e24b56}
.user-settings-title{min-height:27px;display:flex;align-items:center;gap:8px;padding:0 5px 4px;border-bottom:1px solid rgba(163,54,66,.42);color:#ff6871}
.user-settings-title span{font-size:13px}.user-settings-title strong{font-size:14px;letter-spacing:.15px}
.user-settings-actions{display:grid;gap:4px;padding-top:5px}.user-settings-actions form{margin:0}
.user-settings-button{
  width:100%;height:35px;min-height:35px;display:grid;grid-template-columns:25px minmax(0,1fr) 13px;align-items:center;
  padding:0 8px;border:1px solid rgba(126,52,63,.78);border-radius:5px;background:linear-gradient(90deg,rgba(47,20,28,.78),rgba(7,28,38,.92));
  color:#e5d7da;text-decoration:none;text-align:left;cursor:pointer;font-family:inherit;font-size:13px
}
.user-settings-button span{color:#f0525b;text-align:center}.user-settings-button b{min-width:0;font-weight:600;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-settings-button i{color:#cf6971;font-size:17px;font-style:normal;text-align:right}
.user-settings-button:hover,.user-settings-button.active{border-color:#e14954;background:linear-gradient(90deg,rgba(124,30,43,.76),rgba(28,26,35,.92));color:#fff;box-shadow:inset 2px 0 #ff5660,0 0 13px rgba(204,43,55,.09)}
.user-settings-logout{border-color:rgba(162,50,61,.86);background:linear-gradient(90deg,rgba(92,24,35,.76),rgba(23,23,31,.94))}
@media(max-height:860px){
  .user-settings-button{height:32px;min-height:32px}
  .staff-dock-action{min-height:35px}
}