:root{--bg:#f3f7f4;--surface:#ffffff;--surface-quiet:#f7faf8;--ink:#10291d;--muted:#66786d;--line:#dce7e0;--green:#0e7a4f;--green-dark:#08271a;--mint:#dff8e9;--danger:#c74750;--shadow:0 14px 38px rgba(8,39,26,.09)}
body{background:linear-gradient(145deg,#f8fcf9 0,#edf5ef 100%);letter-spacing:.005em}
.app{grid-template-columns:244px 1fr}.app>aside{width:244px;background:linear-gradient(160deg,#061b11 0%,#0d3220 58%,#0b4b31 100%);box-shadow:8px 0 32px #06201414}.brand{padding:5px 10px 34px}.brand-mark{background:linear-gradient(135deg,#16a66b,#0b633f);box-shadow:0 8px 20px #0b633f55}.nav{gap:6px}.nav .nav{display:flex;align-items:center;min-height:44px;border-radius:12px;transition:background .15s,transform .15s}.nav .nav:hover{transform:translateX(2px)}.nav .nav.active{background:#ffffff1a;box-shadow:inset 0 0 0 1px #ffffff12}.nav .nav::first-letter{font-size:17px}.aside-foot{padding-top:18px}
main{background:radial-gradient(circle at 85% 0,#dcf7e7 0,transparent 31rem)}header{position:sticky;top:0;z-index:12;height:86px;padding:0 clamp(18px,4vw,58px);background:#fffffff0;backdrop-filter:blur(18px);border-bottom-color:#d9e8df}header h2{font-family:Inter,ui-sans-serif,system-ui;font-size:22px;font-weight:800;letter-spacing:-.03em}.header-actions{align-items:center}.server-selector{border-radius:10px;padding:9px 11px;min-width:150px;box-shadow:0 2px 8px #0b38200b}.icon-btn,.avatar{border-radius:11px}.avatar{box-shadow:0 4px 12px #0e7a4f25}
.page{max-width:1560px;padding:30px clamp(18px,4vw,58px) 56px}.hero{border-radius:22px;padding:32px 34px;background:linear-gradient(120deg,#08291a,#0d7047 125%);box-shadow:0 20px 46px #0b3d2824;overflow:hidden;position:relative}.hero:after{content:"";position:absolute;width:270px;height:270px;border-radius:50%;right:-100px;top:-170px;background:#72e9a638}.hero>*{position:relative;z-index:1}.hero h1{font-family:Inter,ui-sans-serif,system-ui;font-weight:800;letter-spacing:-.045em}.controls{flex-wrap:wrap}.control{border-radius:10px;font-weight:700}.stats{gap:14px}.stats article,.panel{border-radius:18px;border-color:#dce8e0;box-shadow:0 4px 16px #0d39200a}.stats article{padding:20px}.panel{padding:24px}.panel h3{font-family:Inter,ui-sans-serif,system-ui;font-size:19px;font-weight:800;letter-spacing:-.025em}.status-pill.compact{border-radius:999px}.primary{border-radius:10px;background:linear-gradient(135deg,#0c8555,#096841);box-shadow:0 6px 13px #0d704730;transition:transform .15s,box-shadow .15s}.primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 18px #0d70473a}.text-btn{border-radius:8px;padding:5px 7px}.text-btn:hover{background:#e8f8ee}.network-card,.bot-card,.npc-card,.plugin-card{border-radius:14px;background:#fff;box-shadow:0 3px 10px #0d392008}.network-address{border-radius:12px}.network-actions button,.bot-actions button{min-height:38px}.network-log,#consoleLog{border-radius:12px}.command{border-radius:12px;overflow:hidden}.settings-form textarea{border-radius:12px}.confirm-modal{border-radius:20px;box-shadow:var(--shadow)}
@media(max-width:760px){
  body{font-size:14px;padding-bottom:84px}.app{display:block;min-height:100dvh}.app>aside{position:fixed;z-index:30;inset:auto 0 0 0;width:100%;height:76px;padding:7px 8px max(7px,env(safe-area-inset-bottom));display:block;background:#08271af5;backdrop-filter:blur(18px);box-shadow:0 -8px 28px #07180f2e}.brand,.aside-foot{display:none}.app>aside nav{display:flex;gap:2px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}.app>aside nav::-webkit-scrollbar{display:none}.nav .nav{flex:0 0 68px;min-height:61px;padding:5px 2px;display:grid;place-content:center;text-align:center;gap:2px;border-radius:12px;font-size:17px}.nav .nav span{margin:0;font-size:9px;line-height:1.1;letter-spacing:0;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav .nav.active{box-shadow:none;background:#ffffff18}main{min-width:0}header{height:74px;padding:0 16px;align-items:center}header .eyebrow{display:none}header h2{font-size:19px}.header-actions{gap:6px}.server-selector{max-width:135px;min-width:0;padding:8px;font-size:12px}.icon-btn,.avatar{width:36px;height:36px}.page{padding:18px 14px 28px}.hero{padding:23px 20px;border-radius:17px;display:block}.hero h1{font-size:27px;line-height:1.1}.controls{margin-top:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.control{padding:10px 6px;font-size:12px}.stats{grid-template-columns:1fr;gap:9px;margin:11px 0}.stats article{padding:15px}.stats strong{font-size:23px}.metrics-grid,.grid{grid-template-columns:1fr;gap:10px}.metrics-heading{margin-top:25px}.metric-panel{padding:16px}.metrics-note{font-size:11px}.panel{padding:17px;border-radius:15px}.panel-head{gap:10px;margin-bottom:14px}.panel-head h3{font-size:18px}.network-create-form,.npc-create{grid-template-columns:1fr!important}.network-create-form label,.npc-create label,.npc-create label:first-child,.npc-create label:nth-child(2),.npc-create label:nth-child(6),.npc-create label:nth-child(7){grid-column:auto!important}.network-list,.bot-list,.npc-list{grid-template-columns:1fr}.network-card{padding:15px}.network-card header{display:flex}.network-actions{gap:5px}.network-actions button{flex:1}.network-console{grid-template-columns:1fr}.network-console button{min-height:40px}.bot-create{align-items:stretch}.bot-card,.npc-card{padding:14px}.npc-edit{grid-template-columns:repeat(2,minmax(0,1fr))}.npc-edit label:first-child,.npc-edit label:nth-child(2),.npc-edit .npc-check{grid-column:span 2}.npc-actions{gap:4px}.npc-actions button{font-size:12px}.npc-remove{margin-left:0}.npc-skin{gap:5px}.console-panel{padding:12px}.console-panel #consoleLog{height:calc(100dvh - 250px);min-height:280px}.command{grid-template-columns:20px 1fr auto}.command input{min-width:0}.player-list{grid-template-columns:1fr}.inventory-workspace{grid-template-columns:1fr}.item-editor{position:static}.inventory-grid{grid-template-columns:repeat(9,minmax(28px,1fr));gap:3px}.inventory-slot{min-width:0;aspect-ratio:1}.inventory-actions{position:sticky;bottom:76px;background:#fff;padding:12px;box-shadow:0 -8px 18px #12271915}.plugin-search{grid-template-columns:1fr}.plugin-search button{min-height:42px}.plugin-row{grid-template-columns:1fr auto;gap:8px}.plugin-row .muted{grid-column:1}.settings-form textarea{min-height:55dvh;font-size:12px}.confirm-modal{width:min(100% - 24px,460px);padding:20px}.modal-actions{display:grid;grid-template-columns:1fr 1fr}.modal-actions button{min-height:44px}
}
@media(min-width:761px) and (max-width:1050px){.app{grid-template-columns:78px 1fr}.app>aside{width:78px;padding:24px 10px}.brand span,.nav span,.aside-foot div:not(.server-dot){display:none}.brand{justify-content:center;padding-bottom:24px}.nav .nav{justify-content:center;padding:11px}.nav .nav span{margin:0}.page{padding-left:28px;padding-right:28px}.stats{gap:10px}.stats article{padding:16px}.stats article{gap:10px}.grid{grid-template-columns:1fr}.network-create-form{grid-template-columns:1fr 1fr}.network-create-form .primary{grid-column:1/-1}}

/* Existing navigation buttons are direct children of <nav>, not nested .nav elements. */
aside nav .nav{display:flex;align-items:center;min-height:44px;border-radius:12px;transition:background .15s,transform .15s}aside nav .nav:hover{transform:translateX(2px)}aside nav .nav.active{background:#ffffff1a;box-shadow:inset 0 0 0 1px #ffffff12}aside nav .nav::first-letter{font-size:17px}
@media(max-width:760px){aside nav .nav{flex:0 0 68px;min-height:61px;padding:5px 2px;display:grid;place-content:center;text-align:center;gap:2px;border-radius:12px;font-size:17px}aside nav .nav span{margin:0;font-size:9px;line-height:1.1;letter-spacing:0;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}aside nav .nav.active{box-shadow:none;background:#ffffff18}}
@media(min-width:761px) and (max-width:1050px){aside nav .nav{justify-content:center;padding:11px}aside nav .nav span{margin:0}}

/* Mobile PWA: header actions stay clear of the system status bar and every
   navigation destination fits into one reachable bottom bar. */
.lucide{width:1em;height:1em;stroke-width:2;flex:none;vertical-align:middle}aside nav .nav .lucide{width:18px;height:18px;margin-right:11px}.icon-btn .lucide{width:18px;height:18px}
@media(max-width:760px){
  html{-webkit-text-size-adjust:100%;touch-action:manipulation}body{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  header{height:auto;min-height:112px;padding:calc(8px + env(safe-area-inset-top)) 14px 8px;display:grid;grid-template-columns:1fr;gap:7px;align-items:center}
  header .eyebrow{display:none}header h2{font-size:18px}.header-actions{display:grid;grid-template-columns:minmax(0,1fr) 38px 38px;gap:7px;width:100%}.server-selector{width:100%;max-width:none;min-width:0;height:38px;padding:7px 10px;font-size:14px}.icon-btn,.avatar{width:38px;height:38px}
  .app>aside{height:calc(68px + env(safe-area-inset-bottom));padding:5px 5px max(5px,env(safe-area-inset-bottom))}.app>aside nav{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:1px;overflow:visible;width:100%}aside nav .nav{width:100%;min-width:0;height:56px;min-height:56px;padding:4px 0;display:grid;place-items:center;border-radius:10px}aside nav .nav .lucide{width:20px;height:20px;margin:0}aside nav .nav span{display:none}
  input,select,textarea{font-size:16px!important}
}

/* Legacy components use fixed light surfaces; keep them synchronized with the selected theme. */
html[data-theme="dark"] .support-view-tabs button,html[data-theme="dark"] .support-player,html[data-theme="dark"] .support-case,html[data-theme="dark"] .support-ban,html[data-theme="dark"] .danger-btn,html[data-theme="dark"] .network-wizard,html[data-theme="dark"] .network-wizard input,html[data-theme="dark"] .network-wizard select,html[data-theme="dark"] .network-wizard textarea,html[data-theme="dark"] .player,html[data-theme="dark"] .item-editor,html[data-theme="dark"] .item-editor input{background:var(--surface);color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .support-player:hover,html[data-theme="dark"] .support-player.selected,html[data-theme="dark"] .support-view-tabs button:hover{background:var(--surface-quiet)}
html[data-theme="dark"] .support-view-tabs button.active{background:var(--green);border-color:var(--green);color:#fff}
html[data-theme="dark"] .network-log,html[data-theme="dark"] #consoleLog{background:#0d1118;color:#c9d2de}
html[data-theme="dark"] .item-picker{background:#252b35}html[data-theme="dark"] .picker-item{background:#3a4350}html[data-theme="dark"] .inventory-section-title{color:#e9edf2}
html[data-theme="dark"] .log-line,html[data-theme="dark"] .quick>button{border-color:var(--line)}html[data-theme="dark"] .quick>button{background:var(--surface)}
@media(max-width:760px){body{min-width:320px;padding-bottom:calc(78px + env(safe-area-inset-bottom))}.page{padding-bottom:calc(34px + 78px + env(safe-area-inset-bottom))}#toast{right:14px;left:14px;bottom:calc(78px + env(safe-area-inset-bottom));text-align:center}.panel-head{align-items:flex-start;flex-wrap:wrap}.panel-head>.text-btn,.panel-head>.count-badge{margin-left:auto}.network-panel-actions{width:100%}.network-panel-actions button{min-height:40px}.network-card{min-width:0}.network-card header{position:static;min-height:0;background:transparent}.quick>button{padding-inline:0}.quick>button b,.quick>button small{overflow-wrap:anywhere}#themeToggle{order:-1}}

/* Phone navigation: a real labelled drawer instead of nine compressed icons. */
.mobile-menu-toggle,.nav-scrim{display:none}
@media(max-width:760px){
  body{padding-bottom:0;overscroll-behavior-y:none}.page{padding:18px 14px 34px}
  .mobile-menu-toggle{display:grid;place-items:center;grid-column:1;grid-row:1;width:40px;height:40px;border-radius:10px}
  header{grid-template-columns:40px minmax(0,1fr);gap:10px;min-height:106px;padding:calc(8px + env(safe-area-inset-top)) 14px 10px}
  .header-page-heading{grid-column:2;grid-row:1;min-width:0}.header-page-heading h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .header-actions{grid-column:1/-1;grid-row:2;grid-template-columns:minmax(0,1fr) 38px 38px}
  .app>aside{inset:0 auto 0 0;width:min(82vw,304px);height:100dvh;padding:calc(18px + env(safe-area-inset-top)) 12px max(18px,env(safe-area-inset-bottom));display:flex;transform:translateX(-105%);transition:transform .22s ease;background:var(--bb-nav);color:var(--bb-nav-ink);border:0;border-right:1px solid var(--line);box-shadow:16px 0 40px rgba(0,0,0,.2)}
  body.nav-open .app>aside{transform:translateX(0)}
  .nav-scrim{position:fixed;z-index:29;inset:0;border:0;background:rgba(7,12,18,.48);opacity:0;pointer-events:none;transition:opacity .22s ease}
  body.nav-open .nav-scrim{display:block;opacity:1;pointer-events:auto}
  .brand{display:flex;padding:4px 10px 26px}.aside-foot{display:flex;margin-top:auto;padding:18px 10px 0}
  .app>aside nav{display:grid;grid-template-columns:1fr;gap:4px;overflow:visible;width:100%}
  aside nav .nav{width:100%;height:48px;min-height:48px;padding:10px 12px;display:flex;place-items:initial;align-items:center;text-align:left;gap:12px;border-radius:9px;font-size:14px}
  aside nav .nav .lucide{width:19px;height:19px;margin:0}aside nav .nav span{display:block;max-width:none;font-size:14px;line-height:1.2;white-space:normal;overflow:visible;text-overflow:clip}
  .hero{padding:22px 20px}.hero h1{font-size:26px}.controls{gap:6px}.control{min-height:42px}
  .inventory-actions{bottom:0}.console-panel #consoleLog{height:calc(100dvh - 238px)}
  #toast{right:14px;left:14px;bottom:16px}
}