:root{font-family:Inter,"Segoe UI",Arial,sans-serif;color:#edf4ff;background:#041118;font-synthesis:none;--border:#203e4e;--muted:#abc0d3;--card:#0a1a23;--green:#00df83;--blue:#007bff}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0,#12303b55,transparent 70%);font-size:14px}main{max-width:1800px;margin:auto;padding:0 20px 12px}button,input,select{font:inherit;color:inherit}button,input,select{border:1px solid #294b60;border-radius:6px;background:linear-gradient(120deg,#142b39,#10222d)}button{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:10px 13px;cursor:pointer;white-space:nowrap}button:hover{filter:brightness(1.22);border-color:#6189a2}button:active{transform:translateY(1px)}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid #6bc5ff;outline-offset:3px}svg{width:23px;height:23px;flex-shrink:0}i{display:inline-flex;color:#c8e0fa;font-style:normal}h1,h2,h3,p{margin:0}h1{font-size:29px;letter-spacing:-.5px}h2{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;min-width:0}h2 svg{width:27px;height:27px}h3{font-size:12px;font-weight:500}h3 span,.muted{color:var(--muted)}.panel{border:1px solid var(--border);border-radius:10px;background:linear-gradient(115deg,#0b1e29df,#081820ed);box-shadow:0 5px 18px #0001}.hero{min-height:202px;display:grid;grid-template-columns:1fr 320px;gap:16px;background:linear-gradient(90deg,#03141bd9,transparent 53%,#03141b40),url('../images/header-sunset.png') center center/cover;border-radius:0 0 10px 10px;margin:0 0 14px;position:relative}.hero-main{padding-top:14px}.brand{display:flex;align-items:center;gap:18px;margin:0 8px 12px}.brand p{font-size:17px;margin-top:3px}.server-logo{width:64px;height:64px;object-fit:contain;flex-shrink:0;display:block}.demo-badge{font-size:10px;letter-spacing:1px;background:#102733bd;padding:5px 7px;border:1px solid #44616d;border-radius:4px;align-self:flex-start}.server-control{max-width:580px;padding:12px;background:#021016cd}.status-line{display:flex;align-items:center;gap:18px;margin-bottom:14px}.status-line strong{font-size:20px}.status-line>span{border-left:1px solid #254350;padding-left:15px}.online,.live{color:var(--green)}.server-buttons{display:flex;gap:11px}.server-buttons button{flex:1;font-size:16px;min-height:50px}.primary{background:linear-gradient(#088bff,#006df1);border-color:#0088ff;color:#fff}.danger{background:linear-gradient(#e72c36,#bd1a24);border-color:#ea3642;color:white}.start{background:#008e60;color:#fff}.hero-side nav{display:flex;justify-content:space-between;min-height:51px;align-items:center}.hero-side nav button{background:#04131dc9;border:0;padding:8px;font-size:12px}.address{padding:10px 12px;margin-top:6px}.address label{display:block;font-size:12px;margin-bottom:4px}.address>div{display:flex;align-items:center;justify-content:space-between;background:#122632;border:1px solid #29495e;border-radius:5px;padding-left:10px;margin-bottom:7px;height:36px}.address>div:last-child{margin-bottom:0}.address button{border:0;background:none;padding:7px}.address svg{width:17px;height:17px}.metrics{display:grid;grid-template-columns:1.05fr 1fr .9fr 1fr 1.05fr;gap:13px;margin-bottom:13px}.metric{padding:15px 18px;min-height:116px;display:grid;grid-template-columns:58px 1fr;column-gap:20px;align-items:center}.metric-icon{width:55px;height:55px;display:grid;place-items:center;background:linear-gradient(135deg,#1a3445,#132735);border:1px solid #244455;border-radius:6px}.metric-icon svg{width:32px;height:32px}.metric strong{display:block;font-size:21px;margin-top:7px}.metric small{font-size:10px;color:var(--muted);display:block;margin-top:4px}.meter{grid-column:1/-1;height:18px;background:#1d3747;border-radius:12px;margin-top:8px;overflow:hidden}.meter span{display:block;height:100%;border-radius:12px;background:var(--blue)}.meter .green{background:#00ce7b}.meter .purple{background:#8237ed}.main-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(200px,.51fr) minmax(350px,1fr);gap:13px}.main-grid>.panel{padding:10px;min-width:0}.card-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;min-height:28px}.tools{display:flex;align-items:center;gap:7px}.square{width:31px;height:31px;padding:5px}.square svg{width:20px;height:20px}.live{display:flex;align-items:center;gap:9px;margin-right:8px}.console-filter{display:flex;gap:10px;align-items:center;font-size:11px;color:var(--muted);margin-bottom:6px}.console-filter input[type=search]{flex:1;min-width:0;padding:5px 9px;font-size:11px}.console-filter label{white-space:nowrap}.console{height:290px;overflow:auto;background:#020d14;border:1px solid #193442;border-radius:5px;padding:8px;font:12px/1.58 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre;scrollbar-color:#476982 #0b202b}.log-prefix{color:#00d5f4}.log-JOIN{color:#00f164}.log-WARN{color:#ffe100}#command-form{display:flex;gap:7px;margin-top:7px}input:not([type=checkbox]),select{padding:9px 11px;min-width:0}#command{flex:1;width:0}#command-form .primary{padding-inline:25px}input::placeholder{color:#93b4cc}.quick-card>h2{margin:3px 0 15px}.quick-card button{width:100%;justify-content:flex-start;text-align:left;margin-bottom:6px;padding:7px 12px;gap:15px}.quick-card button:last-child{margin-bottom:0}.quick-card svg{width:28px;height:28px}.quick-card small{display:block;color:#bdd0e2;font-size:10px;margin-top:3px}.table-scroll{overflow:auto;scrollbar-color:#476982 #0b202b}table{width:100%;border-collapse:collapse;text-align:left;font-size:12px}th{font-weight:400;color:#c0d4e7;background:#102530;padding:7px}td{padding:5px 7px;border-bottom:1px solid #16313f}td:first-child{white-space:nowrap}.players td{height:42px;padding:4px}.players th{padding:7px 4px}.players .name{display:flex;align-items:center;gap:9px}.avatar{width:31px;height:32px;display:inline-block;flex-shrink:0;background:linear-gradient(0deg,transparent 70%,#593f2c 70%),linear-gradient(90deg,transparent 20%,#fcdfb4 20% 80%,transparent 80%);background-color:var(--skin);border-radius:3px;box-shadow:inset 0 0 0 3px #0001;position:relative;image-rendering:pixelated}.avatar:after{content:'';position:absolute;left:7px;top:13px;width:5px;height:5px;background:#366581;box-shadow:13px 0 #366581,7px 9px #8d533c}.player-actions{display:flex;gap:4px}.player-actions button{padding:9px 8px;font-size:11px}.kick{background:#ff8000;border-color:#f90}.ban{background:#e52638;border-color:#f34}.op{background:#007bff;border-color:#008cff}.wide{width:100%;margin-top:12px}.activity{border-top:1px solid #203a48;margin-top:12px;padding-top:8px}.activity ol{padding:0;list-style:none;color:var(--muted);font-size:10px;margin:6px 0 0;max-height:37px;overflow:auto}.activity li{padding:3px 0}.count{font-size:11px;color:var(--green)}.bottom-grid{display:grid;grid-template-columns:1.4fr 1.15fr .94fr .98fr;gap:13px;margin-top:13px}.bottom-grid>.panel{padding:10px 13px;min-width:0}.bottom-grid h2{font-size:12px;gap:10px}.compact{font-size:11px;padding:6px 10px;gap:7px}.compact svg{width:16px;height:16px}.backups-card .table-scroll{max-height:151px}.backups-card td{padding:3px 7px;font-size:11px}.backup-actions{display:flex;gap:5px}.backup-actions button{padding:2px 9px;color:#00acff;min-height:22px}.backup-actions svg{width:15px;height:15px}.backup-actions .delete{color:#ff4148;background:#331e27}.inline-fields{display:flex;align-items:center;gap:9px;font-size:11px;margin:10px 0}.inline-fields select{padding:8px}.inline-fields span{line-height:1.5}.timer-box{display:flex;gap:13px;padding:16px 10px;background:#112631;border-radius:6px;align-items:center;margin-top:14px}.timer-box>i svg{width:34px;height:34px}.timer-box strong{font-size:13px;font-weight:500}.timer-box p{font-size:11px;color:#bdcfe1;margin:8px 0;line-height:1.5}.text-button{border:0;background:none;padding:0;color:#8fc8ff;font-size:11px}.check-label{display:flex;align-items:center;gap:8px;font-size:11px;line-height:1.6;margin-top:12px}.restart-card .muted{font-size:10px;margin-top:15px}input[type=checkbox]{accent-color:#0087ff;width:17px;height:17px;flex-shrink:0}input[role=switch]{appearance:none;width:40px;height:23px;border-radius:15px;background:#284451;border:1px solid #3c6171;position:relative;margin:0;cursor:pointer}input[role=switch]:before{content:'';width:18px;height:18px;background:#eefaff;border-radius:50%;position:absolute;top:1px;left:2px;transition:transform .2s}input[role=switch]:checked{background:#00cc79;border-color:#00ec8c}input[role=switch]:checked:before{transform:translateX(15px)}dl{margin:7px 0 0;font-size:11px}dl>div{display:grid;grid-template-columns:1fr 1fr;padding:4px 8px;gap:7px}dl>div:nth-child(odd){background:#0f2530;border-radius:5px}dd{margin:0}footer{display:flex;justify-content:space-between;gap:12px;color:#8ca5b7;font-size:10px;padding:12px 2px 0}dialog{background:#0b1e29;color:#edf4ff;border:1px solid #345769;border-radius:12px;width:min(480px,calc(100% - 30px));padding:23px;box-shadow:0 24px 80px #0009}dialog::backdrop{background:#000a;backdrop-filter:blur(4px)}dialog p{color:#b6ccde;font-size:13px;line-height:1.65;margin:14px 0}dialog input:not([type=checkbox]),dialog textarea{width:100%;margin:7px 0 13px}dialog textarea{background:#102632;color:#fff;border:1px solid #345769;border-radius:5px;padding:10px;min-height:130px;font:inherit}dialog label{display:block;font-size:12px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);padding:13px 20px;border:1px solid #2b755d;background:#10342b;color:#defff3;border-radius:8px;max-width:90%;box-shadow:0 5px 30px #0008;opacity:0;pointer-events:none;transition:opacity .2s;z-index:5}#toast.visible{opacity:1}.console-card.expanded{position:fixed;inset:20px;z-index:3;display:flex;flex-direction:column;background:#071720}.console-card.expanded .console{flex:1}.brighter{filter:brightness(1.22)}
@media(min-width:1600px){.console{height:330px}.quick-card button{padding-block:10px}}@media(max-width:1250px){main{padding-inline:14px}.main-grid{grid-template-columns:minmax(0,1fr) 220px}.players-card{grid-column:1/-1}.players-card .table-scroll{max-height:240px}.activity{margin-top:8px}.bottom-grid{grid-template-columns:1fr 1fr}.metrics{gap:9px}.metric{padding:12px;column-gap:9px;grid-template-columns:43px 1fr}.metric-icon{width:42px;height:45px}.metric strong{font-size:18px}.metric small{font-size:9px}.hero{grid-template-columns:1fr 290px}}@media(max-width:800px){.metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.metric{min-height:112px}.hero{grid-template-columns:1fr}.hero-side{display:flex;gap:15px;align-items:flex-start}.hero-side nav{flex:1;flex-wrap:wrap;justify-content:flex-start}.address{width:260px;margin-bottom:12px}.server-control{max-width:none}.main-grid{grid-template-columns:minmax(0,1fr) 200px}.console{height:310px}.tools{gap:4px}.live{font-size:11px;gap:4px;margin-right:0}h1{font-size:26px}}@media(max-width:600px){main{padding:0 10px 12px}.hero{gap:7px}.brand{gap:10px}.brand p{font-size:14px}.brand h1{font-size:23px}.server-logo{width:48px;height:48px}.demo-badge{font-size:8px}.status-line{gap:9px;font-size:11px}.status-line strong{font-size:17px}.status-line>span{padding-left:9px}.server-buttons{gap:6px}.server-buttons button{font-size:13px;padding:8px;gap:6px;min-height:44px}.hero-side{display:block}.hero-side nav{justify-content:flex-end}.address{width:100%;margin-top:0}.metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.metric{padding:10px;column-gap:8px}.metric:last-child{grid-column:1/-1;grid-template-columns:44px 1fr}.metric strong{font-size:17px}.main-grid,.bottom-grid{grid-template-columns:minmax(0,1fr)}.players-card{grid-column:auto}.quick-card #quick{display:grid;grid-template-columns:1fr 1fr;gap:6px}.quick-card button{margin:0;padding:8px;gap:8px;white-space:normal;font-size:12px}.quick-card small{font-size:9px}.quick-card svg{width:22px;height:22px}.card-heading{gap:5px}.tools .square{width:27px;height:28px}.tools{gap:4px}h2{font-size:13px;gap:7px}.live{font-size:0}.console{font-size:11px;height:290px}.console-filter{gap:5px}#command-form .primary{padding-inline:13px}.players{font-size:11px}.player-actions button{padding:8px 6px;font-size:10px}.players .name{gap:5px}.avatar{width:26px;height:29px}.players td{padding:4px 2px}.bottom-grid>.panel{min-height:190px}.inline-fields{font-size:12px}footer{align-items:flex-start;line-height:1.6}.console-card.expanded{inset:6px}.info-card dl{font-size:12px}.activity ol{max-height:60px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Viewport dashboard: fixed page shell, independently scrolling cards. */
html,body{height:100%;overflow:hidden}
main{height:100vh;height:100dvh;display:grid;grid-template-rows:minmax(0,190px) minmax(0,88px) minmax(0,1fr) minmax(0,205px);gap:10px;padding-bottom:8px;overflow:hidden}
main>*,.main-grid>*,.bottom-grid>*{min-height:0;min-width:0}
.hero,.metrics,.bottom-grid{margin:0}
.hero{min-height:0;overflow:auto;scrollbar-width:thin}
.hero-main{padding-top:10px}.brand{margin-bottom:7px}.server-control{padding:9px 12px}.status-line{margin-bottom:9px}.server-buttons button{min-height:44px}
.metrics{gap:10px}
.metric{min-height:0;padding:9px 13px;grid-template-columns:40px minmax(0,1fr);column-gap:12px;align-content:center}
.metric-icon{width:40px;height:40px}.metric-icon svg{width:26px;height:26px}
.metric>div>span{font-size:12px}.metric strong{font-size:18px;margin-top:3px}.metric small{font-size:9px;margin-top:2px}
.meter{height:9px;margin-top:6px}
.main-grid{grid-template-columns:minmax(0,1.8fr) minmax(180px,.51fr) minmax(330px,1fr);overflow:hidden}
.main-grid>.panel{overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#476982 #0b202b}
.console-card{display:flex;flex-direction:column}
.console-card>.card-heading,.console-filter,#command-form{flex-shrink:0}
.console-card .console{height:auto;min-height:0;flex:1;overflow:auto;scrollbar-gutter:stable}
.quick-card{display:flex;flex-direction:column}.quick-card>h2{flex-shrink:0;margin:3px 0 10px}
#quick{min-height:0;overflow-y:auto;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#476982 #0b202b}
.quick-card button{padding:7px 10px}
.players-card{grid-column:auto;display:flex;flex-direction:column}
.players-card>.card-heading,.players-card>.wide,.players-card>.activity{flex-shrink:0}
.players-card .table-scroll{min-height:0;max-height:none;flex:1;overflow:auto;scrollbar-gutter:stable}
.players thead{position:sticky;top:0;z-index:1}.players-card .wide{margin-top:8px;padding:8px}.activity{margin-top:8px}.activity ol{max-height:34px}
.bottom-grid{grid-template-columns:1.4fr 1.15fr .94fr .98fr;overflow:hidden}
.bottom-grid>.panel{min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-gutter:stable;scrollbar-color:#476982 #0b202b}
.backups-card{display:flex;flex-direction:column}.backups-card>.card-heading{flex-shrink:0}.backups-card .table-scroll{max-height:none;min-height:0;flex:1}
footer{padding:0;align-items:center;overflow:auto;scrollbar-width:thin}
.console-card.expanded{height:auto;overflow:hidden}.console-card.expanded .console{height:auto;min-height:0}
dialog{max-height:calc(100dvh - 24px);overflow:auto}
@media(max-height:800px) and (min-width:1001px){
 main{grid-template-rows:minmax(0,165px) minmax(0,76px) minmax(0,1fr) minmax(0,175px);gap:8px}
 .hero-main{padding-top:6px}.server-logo{width:48px;height:48px}.brand h1{font-size:25px}.brand p{font-size:14px}.brand{margin-bottom:5px}.server-control{padding:7px 10px}.server-buttons button{min-height:37px;padding:6px}.status-line{margin-bottom:7px}.hero-side nav{min-height:39px}.address{margin-top:0;padding:7px 10px}.address>div{height:30px;margin-bottom:4px}
 .metric{padding:6px 11px}.metric-icon{height:34px;width:34px}.metric strong{font-size:17px}.metric small{font-size:8px}.meter{height:7px;margin-top:4px}
 .bottom-grid>.panel{padding:8px 10px}.bottom-grid h2{font-size:11px}.timer-box{padding:10px;margin-top:8px}.inline-fields{margin:6px 0}.info-card dl{font-size:10px}dl>div{padding-block:3px}
}
@media(max-width:1000px){
 main{grid-template-rows:minmax(0,23fr) minmax(0,13fr) minmax(0,36fr) minmax(0,25fr);gap:8px}
 .hero{grid-template-columns:minmax(0,1fr) 260px}.hero-side{display:block}.hero-side nav{justify-content:space-between}.address{width:auto;margin-bottom:0}.brand h1{font-size:23px}.brand p{font-size:14px}.server-logo{width:46px;height:46px}.server-buttons button{font-size:12px;padding:7px;gap:5px}.status-line{font-size:11px;gap:8px}.status-line strong{font-size:16px}
 .metrics{grid-template-columns:repeat(5,minmax(0,1fr));overflow:auto}.metric{padding:7px;grid-template-columns:1fr;gap:3px}.metric-icon{display:none}.metric strong{font-size:15px}.metric>div>span{font-size:10px}.metric small{font-size:8px}.metric:last-child{grid-column:auto;grid-template-columns:1fr}
 .main-grid{grid-template-columns:minmax(0,1.5fr) minmax(150px,.7fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
 .console-card{grid-row:1/3}.quick-card{grid-column:2;grid-row:1}.players-card{grid-column:2;grid-row:2}.quick-card #quick{display:block}.quick-card button{font-size:11px;padding:6px}.quick-card small{font-size:9px}.quick-card svg{width:20px;height:20px}
 .players-card h2{font-size:11px;gap:5px}.players-card h2 svg{width:18px;height:18px}.players-card .activity{display:none}.players-card .wide{font-size:10px;padding:5px}.players{min-width:320px}.players-card .table-scroll{flex:1}.players-card .count{font-size:9px}
 .bottom-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}.bottom-grid>.panel{min-height:0;padding:7px 10px}.bottom-grid .card-heading{margin-bottom:5px}.bottom-grid h2{font-size:11px}.bottom-grid .timer-box{margin-top:6px;padding:8px}.bottom-grid .inline-fields{margin:5px 0}.bottom-grid .muted{margin-top:6px}.bottom-grid dl{margin-top:5px}
}
@media(max-width:600px){
 main{padding:0 7px 5px;gap:6px;grid-template-rows:minmax(0,23fr) minmax(0,15fr) minmax(0,35fr) minmax(0,24fr)}
 .hero{grid-template-columns:1fr;gap:5px}.hero-main{padding:6px}.hero-side{padding:0 6px 6px}.hero-side nav{min-height:35px}.brand{gap:9px}.brand h1{font-size:21px}.brand p{font-size:12px}.server-logo{width:45px;height:45px}.server-control{padding:7px}.status-line{margin-bottom:7px}.server-buttons button{min-height:34px}.address{margin:0}
 .metrics{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:5px}.metric{padding:5px 7px;overflow:auto}.metric strong{font-size:13px;margin-top:2px}.metric small{font-size:8px}.metric:last-child{grid-column:2/4}.meter{height:5px;margin-top:3px}
 .main-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:5px}
 .console-card{grid-column:1;grid-row:1}.quick-card{grid-column:1;grid-row:2}.players-card{grid-column:1;grid-row:3}.main-grid>.panel{padding:6px}.main-grid h2{font-size:11px}.main-grid .card-heading{margin-bottom:5px}.console-filter{margin-bottom:4px}.console-filter input[type=search]{padding:3px 6px}.console{padding:4px;font-size:10px}.tools .square{width:24px;height:24px}.tools svg{width:16px;height:16px}.console-filter label{font-size:9px}#command-form{margin-top:4px;gap:4px}#command-form input,#command-form button{padding:5px;font-size:11px}#command-form .primary{padding-inline:8px}
 .quick-card>h2{margin:0 0 5px}.quick-card #quick{display:grid;grid-template-columns:1fr 1fr;gap:4px}.quick-card button{margin:0;padding:5px;font-size:10px}.quick-card small{font-size:8px}
 .players-card .wide{margin-top:4px}.players-card>.card-heading{min-height:24px}.players-card .square{height:24px;width:24px}
 .bottom-grid{gap:5px}.bottom-grid>.panel{padding:6px}.bottom-grid .card-heading{flex-wrap:wrap;gap:4px}.bottom-grid h2{font-size:10px;gap:5px}.bottom-grid h2 svg{height:18px;width:18px}.bottom-grid input[role=switch]{width:34px;height:21px}.bottom-grid input[role=switch]:before{width:16px;height:16px}.bottom-grid input[role=switch]:checked:before{transform:translateX(12px)}.compact{font-size:9px;padding:4px}.inline-fields{flex-wrap:wrap;font-size:10px}.check-label{font-size:10px}.bottom-grid .timer-box p{font-size:10px}.info-card dl{font-size:10px}footer{font-size:8px;gap:5px;line-height:1.3}footer .text-button{font-size:9px}
}

/* Use the full viewport width with side padding matching the card gutters. */
main{max-width:none;width:100%;padding-inline:13px}
@media(max-width:600px){main{padding-inline:5px}}

/* Compact header: keep both columns visible without an inner scrollbar. */
.hero{overflow:hidden;grid-template-columns:minmax(0,1fr) 280px;gap:12px}
.hero-main,.hero-side{min-width:0;min-height:0}
.hero-main{padding-top:6px}
.brand{gap:12px;margin:0 6px 5px}
.server-logo{width:46px;height:46px}
.brand h1{font-size:24px;line-height:1.15}
.brand p{font-size:13px;margin-top:2px}
.server-control{padding:7px 10px}
.status-line{gap:10px;margin-bottom:6px;font-size:12px;min-width:0}
.status-line strong{font-size:17px;flex-shrink:0}
.status-line>span{padding-left:10px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.server-buttons{gap:7px}
.server-buttons button{min-height:34px;padding:6px 10px;font-size:14px}
.hero-side nav{min-height:32px}
.hero-side nav button{padding:5px;font-size:11px;gap:5px}
.hero-side nav svg{width:19px;height:19px}
.address{margin-top:3px;padding:6px 9px}
.address label{font-size:11px;margin-bottom:2px}
.address>div{height:28px;margin-bottom:4px;padding-left:8px;font-size:12px;min-width:0}
.address>div>strong,.address>div>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.address button{padding:4px;flex-shrink:0}
@media(max-width:1000px){
 .hero{grid-template-columns:minmax(0,1fr) 230px;gap:8px}
 .brand h1{font-size:21px}.brand p{font-size:12px}
 .server-buttons button{font-size:12px;padding:6px}
}
@media(max-width:600px){
 .hero{grid-template-columns:minmax(0,1fr) minmax(125px,.8fr);gap:5px}
 .hero-main{padding:4px 0}.hero-side{padding:0}
 .brand{gap:6px;margin:0 0 5px}.server-logo{width:32px;height:32px}
 .brand h1{font-size:clamp(12px,3.4vw,18px)}.brand p{font-size:10px}
 .demo-badge{font-size:8px;padding:2px}
 .server-control{padding:5px}
 .status-line{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:5px;font-size:9px}
 .status-line strong{font-size:12px}.status-line>span{border:0;padding:0;flex-basis:100%}
 .server-buttons{gap:3px}.server-buttons button{min-width:0;min-height:28px;padding:4px 2px;font-size:9px;gap:3px}
 .server-buttons button svg{width:12px;height:12px}
 .hero-side nav{min-height:26px;gap:2px}.hero-side nav button{font-size:9px;padding:3px;gap:3px}
 .hero-side nav svg{width:13px;height:13px}
 .address{padding:4px 5px;margin-top:0}.address label{font-size:9px}
 .address>div{height:23px;font-size:10px;margin-bottom:3px;padding-left:4px}
 .address button{padding:3px}.address svg{width:13px;height:13px}
}
@media(max-width:380px){.brand{gap:4px}.demo-badge{display:none}.server-buttons button i{display:none}}

/* Extend only the header background across the page gutters. */
main{--dashboard-gutter:13px}
.hero{margin-inline:calc(-1 * var(--dashboard-gutter));padding-inline:var(--dashboard-gutter);border-radius:0}
@media(max-width:600px){main{--dashboard-gutter:5px}}