:root {
  color-scheme: dark;
  --page: #05070b;
  --surface: #0d0e12;
  --raised: #111216;
  --hover: #17191f;
  --ink: #d4d6dc;
  --muted: #9b9fa9;
  --line: #292d35;
  --control-line: #626772;
  --accent: #aab6d0;
  --primary-fill: #11141b;
  --primary-hover: #191e28;
  --on-accent: #d2d7e2;
  --danger: #10050a;
  --danger-hover: #18070f;
  --danger-ink: #fff2f5;
  --control-stop-boundary: #d85050;
  --control-stop-key: #a82f38;
  --success: #86d4be;
  --warning: #efc78b;
  --focus: #aab6d0;
  --radius: 14px;
  --ease: cubic-bezier(.16,1,.3,1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); line-height: 1.5; scrollbar-color: #5f636c var(--page); }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }
button, a, input, textarea { transition: color 160ms var(--ease), background-color 160ms var(--ease), border-color 160ms var(--ease), transform 140ms var(--ease); }
button:disabled { cursor: not-allowed; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
::selection { background: #060d1a; color: #ecedf0; }
input, textarea { caret-color: var(--accent); }
input::placeholder, textarea::placeholder { color: #9fa4ac; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 29px; line-height: 1.25; letter-spacing: -.025em; font-weight: 650; }
h2 { font-size: 16px; font-weight: 600; letter-spacing: -.012em; }
h3 { font-size: 14px; font-weight: 600; }
p { color: var(--muted); }
code, pre { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 20; padding: 12px 18px; background: var(--primary-fill); color: var(--on-accent); border-color: #858b9c; border-radius: 8px; }
.skip-link:focus { top: 10px; }
.muted { color: var(--muted); font-size: 12px; line-height: 1.7; }
.count { display: inline-flex; align-items: center; justify-content: center; padding: 1px 7px; min-width: 23px; color: #ced2dc; background: var(--hover); border-radius: 5px; font-size: 12px; font-variant-numeric: tabular-nums; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 24px; font-weight: 650; letter-spacing: -.025em; }
.header-right { display: flex; align-items: center; gap: 17px; }
.connection { display: inline-flex; align-items: center; gap: 8px; color: #c3c8cc; font-size: 12px; }
.connection i { width: 6px; height: 6px; background: #86d4be; border-radius: 50%; }
.account { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 50%; background: var(--raised); color: #d2d5dd; border: 1px solid #50545d; font-size: 12px; font-weight: 600; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 23px; }
.page-heading p { margin-top: 9px; font-size: 13px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 10px 15px; border: 1px solid transparent; border-radius: 8px; font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.button .icon { width: 17px; height: 17px; }
.button:active:not(:disabled), .icon-button:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.button:disabled { background: #0b0c10; color: #9ca0a7; border-color: #484c54; opacity: 1; }
.primary { background: var(--primary-fill); color: var(--on-accent); border-color: #858b9c; }
.primary:hover:not(:disabled) { background: var(--primary-hover); }
.secondary { background: var(--raised); color: #d8dbe1; border-color: #636873; }
.secondary:hover:not(:disabled) { background: var(--hover); border-color: #9a9fab; }
.danger { background: var(--danger); color: var(--danger-ink); border-color: #b85a71; }
.danger:hover:not(:disabled) { background: var(--danger-hover); }
.stop-icon { fill: currentColor; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; padding: 7px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #c0c4cc; }
.icon-button .icon { width: 17px; height: 17px; }
.icon-button:hover:not(:disabled) { color: #eeeff2; background: var(--hover); }
.icon-button:disabled { opacity: .38; }
.icon-button.destructive { color: #f0a3b0; }
.icon-button.destructive:hover:not(:disabled) { background: #10050a; color: #ffd1da; }
.text-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 32px; padding: 3px 0; border: 0; background: none; color: #c5cad7; font-size: 12px; }
.text-button:hover:not(:disabled) { color: #e4e6ec; }
.text-button .icon { width: 14px; height: 14px; }
.text-button:disabled { color: #9699a0; opacity: .6; }
.notice { display: flex; align-items: center; gap: 11px; padding: 12px 15px; margin-bottom: 18px; color: #ced2db; background: var(--surface); border-radius: 8px; font-size: 12px; line-height: 1.7; }
.demo-notice { background: var(--surface); border: 1px dashed #474b54; color: #bbbfc6; }
.demo-tag { padding: 2px 6px; border-radius: 4px; background: var(--raised); color: #dbdee6; font-size: 12px; letter-spacing: .04em; font-weight: 650; }
.error-notice { background: #0e050a; color: #f5b5c1; }
.dot-separator { padding: 0 7px; color: #868c94; }
.power-group { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex: none; }
.power-button { min-width: 132px; min-height: 48px; font-size: 14px; padding: 12px 21px; }
.power-button .icon { width: 18px; height: 18px; }
.power-button:hover:not(:disabled) .icon { transform: scale(1.08); }
.power-button .icon { transition: transform 160ms var(--ease); }
.main-lane, .context-lane, .view, .console-section { min-width: 0; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 18px; }
.section-heading h2 { font-size: 14px; }
.heading-with-icon { display: flex; align-items: center; gap: 9px; min-width: 0; }
.heading-with-icon > .icon { color: #babfcb; width: 18px; height: 18px; }
.live-label { margin-left: 5px; font-size: 12px; color: #b2b6bd; }
.terminal { background: #090a0e; border: 1px solid #30415e; border-radius: 12px; overflow: hidden; }
.terminal-toolbar { min-height: 46px; background: var(--raised); padding: 7px 17px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #b6bcc5; }
.terminal-toolbar code { font-size: 12px; }
.terminal-follow { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 2px 0; font-size: 12px; color: #c6c9d0; background: none; border: 0; }
.terminal-follow .icon { width: 12px; height: 12px; }
#console-output { height: 310px; padding: 20px 18px; margin: 0; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 2.05; color: #caced5; font-variant-numeric: tabular-nums; scrollbar-width: thin; scrollbar-color: #465c85 #090a0e; }
#command-form { display: flex; align-items: center; gap: 11px; padding: 7px 12px 7px 18px; border-top: 1px solid #293d5d; }
#command-form > span { color: #b0b5c4; font: 16px ui-monospace,monospace; }
#command { min-width: 0; flex: 1; border: 0; outline: none; padding: 10px 0; font: 12px ui-monospace,SFMono-Regular,Consolas,monospace; color: #eaecf1; background: none; }
#command:focus-visible { outline: 1px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
.send-command { display: grid; place-items: center; width: 35px; height: 35px; background: var(--raised); color: #dfe2e9; border: 0; border-radius: 6px; }
.send-command:hover { background: var(--hover); }
.send-command .icon { width: 17px; height: 17px; }
.console-hint { font-size: 12px; line-height: 1.8; margin-top: 13px; }
.inline-command { font: 12px ui-monospace,monospace; border: 0; padding: 3px 7px; background: var(--hover); color: #d3d7e1; border-radius: 4px; }
meter, progress { width: 100%; height: 5px; border: 0; border-radius: 3px; display: block; background: var(--raised); overflow: hidden; accent-color: #9699a2; }
meter::-webkit-meter-bar { border: 0; height: 5px; border-radius: 3px; background: var(--raised); }
meter::-webkit-meter-optimum-value { background: #7f91b5; border-radius: 3px; }
meter::-moz-meter-bar { background: #7f91b5; border-radius: 3px; }
progress::-webkit-progress-bar { background: var(--raised); }
progress::-webkit-progress-value { background: #aab6d0; border-radius: 3px; }
progress::-moz-progress-bar { background: #aab6d0; }
.players-section, .backup-brief { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 22px; }
.players-list { display: flex; flex-direction: column; gap: 13px; margin-bottom: 15px; }
.player-row { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 12px; }
.player-avatar { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 7px; background: var(--hover); color: #dadde4; font-size: 12px; font-weight: 600; }
.player-row:nth-child(2n) .player-avatar { background: var(--raised); color: #e0c7e2; }
.player-row:nth-child(3n) .player-avatar { background: var(--hover); color: #c2cdce; }
.player-name { overflow-wrap: anywhere; }
.player-indicator { width: 5px; height: 5px; border-radius: 50%; background: #8cd0bd; margin-left: auto; }
.workspace-footer { display: flex; justify-content: space-between; gap: 15px; margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line); color: #a6aab2; font-size: 12px; }
.workspace-footer > span > span { padding: 0 8px; color: #7e848e; }
#expanded-console #console-output { height: 53vh; min-height: 330px; }
#expanded-console .section-heading > .text-button { display: none; }
.workspace-panel { background: var(--surface); border: 1px solid #30405d; border-radius: var(--radius); overflow: hidden; }
.panel-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.panel-toolbar h2 { font-size: 16px; }
.panel-toolbar p { margin-top: 6px; }
.toolbar-actions { display: flex; align-items: center; gap: 9px; }
.search-field { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--control-line); background: #090a0e; border-radius: 7px; }
.search-field:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.search-field .icon { width: 16px; height: 16px; color: #afb4bf; }
.search-field input { width: 180px; min-width: 0; background: none; color: var(--ink); outline: none; border: 0; font-size: 12px; }
.mutation-notice { display: flex; align-items: center; gap: 11px; padding: 15px 24px; background: #0b0905; border-bottom: 1px solid #574932; color: #edce9a; }
.mutation-notice > .icon { width: 18px; height: 18px; }
.mutation-notice p { color: #e4cba6; font-size: 12px; line-height: 1.7; flex: 1; }
.mutation-notice .button { min-height: 35px; padding: 7px 11px; background: #0b0905; border-color: #8b785b; color: #f0d9b4; font-size: 12px; }
.file-location { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 16px 23px; border-bottom: 1px solid var(--line); }
#file-breadcrumb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
#file-breadcrumb button { padding: 4px 2px; min-height: 30px; border: 0; background: none; color: #c7ccd9; font: 12px ui-monospace,SFMono-Regular,Consolas,monospace; overflow-wrap: anywhere; }
#file-breadcrumb button:last-of-type { color: #e6e8ed; }
#file-breadcrumb .icon { width: 12px; height: 12px; color: #848a93; }
.file-location > div { display: flex; align-items: center; gap: 7px; }
.trash-summary, .files-error { padding: 16px 24px; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.trash-summary { color: var(--muted); }
.files-error { color: var(--danger-ink); background: var(--danger); }
.drop-hint { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-bottom: 1px dashed #494d56; background: var(--raised); color: #b9bdc6; font-size: 12px; }
.drop-hint > .icon { color: #b2b5bc; width: 18px; height: 18px; }
.drop-hint button { border: 0; background: none; color: #d1d5e0; padding: 2px; text-decoration: underline; text-underline-offset: 3px; font-size: 12px; }
.drop-hint small { margin-left: auto; white-space: nowrap; color: #aeb4bc; font-size: 12px; }
.workspace-panel.is-dragging { outline: 3px solid #aab6d0; outline-offset: 2px; }
.workspace-panel.is-dragging .drop-hint { background: var(--hover); color: #e8eaef; }
.table-scroll { overflow: auto; max-height: 62vh; scrollbar-width: thin; scrollbar-color: #5b606a var(--surface); }
.file-table { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: left; }
.file-table th { padding: 13px 23px; background: var(--raised); color: #b1b6be; font-size: 12px; font-weight: 500; position: sticky; top: 0; z-index: 1; }
.file-table td { border-top: 1px solid #25344f; padding: 13px 23px; color: #cccfd5; font-size: 12px; }
.file-table tbody tr { transition: background-color 140ms var(--ease); }
.file-table tbody tr:hover { background: var(--hover); }
.file-table .size-col { width: 115px; }
.file-table .modified-col { width: 185px; }
.file-table .actions-col { width: 143px; }
.file-table td.actions-col { padding-left: 6px; padding-right: 18px; white-space: nowrap; }
.file-name { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; min-height: 35px; padding: 3px 0; color: #e7e9ed; background: none; border: 0; font-size: 13px; text-align: left; }
.file-name > .icon { width: 21px; height: 21px; color: #bec4d3; }
.file-name > .icon.folder-icon { color: #e5c28a; }
.file-name > span { min-width: 0; overflow-wrap: anywhere; }
.file-name:disabled { color: #9ca0a6; }
.file-name:disabled > .icon { color: #9699a0; }
.table-size { font-variant-numeric: tabular-nums; color: #b8bcc4; white-space: nowrap; }
.table-date { color: #aeb2ba; font-size: 12px; white-space: nowrap; }
.table-empty { padding: 38px 24px !important; line-height: 1.8; text-align: center; color: #b7bcc4 !important; }
.just-changed { animation: row-added 700ms var(--ease); }
@keyframes row-added { from { background: var(--hover); } to { background: transparent; } }
.panel-foot { padding: 15px 23px; min-height: 60px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 15px; color: #b5b9c1; font-size: 12px; }
.pagination { display: flex; gap: 4px; }
.reverse { transform: rotate(180deg); }
.section-note { margin-top: 20px; max-width: 85ch; font-size: 12px; line-height: 1.9; }
.trash-original { display: block; color: #abb0b9; font: 12px ui-monospace,SFMono-Regular,Consolas,monospace; margin-top: 5px; overflow-wrap: anywhere; }
.restore-button { min-height: 34px; font-size: 12px; padding: 7px 10px; }
.upload-status { padding: 16px 19px; margin-bottom: 20px; background: var(--raised); border: 1px solid #575e69; border-radius: 10px; }
.upload-status > div { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; min-width: 0; }
.upload-status strong { font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
#upload-percent { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; }
.upload-status p { margin-top: 10px; font-size: 12px; color: #bec4cc; }
.upload-status > div > .icon { color: #c6cad7; width: 18px; height: 18px; }
.section-intro { display: flex; align-items: flex-start; gap: 17px; margin: 5px 0 27px; max-width: 800px; }
.section-intro > .icon { width: 27px; height: 27px; color: #c1c6d3; }
.section-intro h2 { font-size: 18px; }
.section-intro p { margin-top: 10px; font-size: 13px; line-height: 1.9; }
.backups-list { padding: 8px 24px 20px; }
.backup-row { display: grid; grid-template-columns: minmax(0,1fr) 95px 115px; gap: 20px; padding: 17px 0; border-bottom: 1px solid var(--line); align-items: center; font-size: 12px; }
.backup-row strong { display: block; overflow-wrap: anywhere; font-size: 13px; font-weight: 500; }
.backup-row small { display: block; margin-top: 5px; color: #aeb4bc; font-size: 12px; overflow-wrap: anywhere; }
.backup-state { justify-self: end; color: #c4d2ce; background: #030b0d; padding: 4px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap; }
.reading-panel { padding: 27px; }
.intro-text { margin: 12px 0 24px; font-size: 13px; max-width: 76ch; line-height: 1.9; }
.check-row { padding: 20px 0; border-top: 1px solid var(--line); display: flex; align-items: flex-start; gap: 13px; }
.check-marker { display: grid; place-items: center; width: 23px; height: 23px; flex: none; border-radius: 50%; background: #0d0a04; color: #efd099; font-size: 13px; }
.check-marker.is-ready { background: #030b0d; color: #cedad5; }
.check-marker .icon { width: 14px; height: 14px; }
.check-row strong { font-size: 13px; font-weight: 500; }
.check-row p { font-size: 12px; margin-top: 5px; }
.migration-facts { display: grid; grid-template-columns: repeat(3,1fr); gap: 25px; padding: 25px 0; }
.migration-facts span { display: block; color: #b0b4bc; font-size: 12px; }
.migration-facts strong { display: block; margin-top: 7px; font-size: 13px; font-weight: 500; }
.settings-list { margin: 0; }
.settings-list > div { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); font-size: 13px; }
.settings-list dt { color: #b2b6be; }
.settings-list dd { margin: 0; overflow-wrap: anywhere; }
.settings-list code { font-size: 12px; }
dialog { width: calc(100% - 34px); max-width: 450px; border: 0; border-radius: 15px; padding: 29px; color: var(--ink); background: var(--surface); box-shadow: 0 18px 70px #0008; }
dialog::backdrop { background: #010309dc; }
dialog[open] { animation: dialog-reveal 200ms var(--ease); }
@keyframes dialog-reveal { from { opacity: .5; transform: translateY(7px) scale(.99); } to { opacity: 1; transform: none; } }
dialog h2 { font-size: 22px; margin-bottom: 15px; }
dialog p { font-size: 13px; line-height: 1.9; }
.dialog-note { color: #e7c591; font-size: 12px; margin-top: 14px; }
#dialog-path { display: block; color: #dcdfe7; background: var(--surface); border-radius: 6px; padding: 11px 13px; margin-top: 15px; font-size: 12px; overflow-wrap: anywhere; }
.dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 27px; }
#file-form label { display: block; margin: 22px 0 8px; color: #cdd0d6; font-size: 12px; }
#file-form-name, #password { width: 100%; min-height: 44px; padding: 10px 12px; background: #090a0e; color: var(--ink); border: 1px solid var(--control-line); border-radius: 7px; }
.form-error { color: #ffb5c1; font-size: 12px; min-height: 19px; margin-top: 9px; }
.editor-dialog { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(880px,94vw); max-width: none; height: 100dvh; max-height: 100dvh; padding: 0; border-radius: 14px 0 0 14px; overflow: hidden; }
.editor-dialog[open] { display: flex; flex-direction: column; animation: editor-reveal 240ms var(--ease); }
@keyframes editor-reveal { from { opacity: .6; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
.editor-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px; border-bottom: 1px solid #41464d; }
.editor-header h2 { margin: 0 0 7px; font-size: 18px; overflow-wrap: anywhere; }
.editor-header code { color: #b3b9c2; font-size: 12px; overflow-wrap: anywhere; }
.editor-info { display: flex; justify-content: space-between; padding: 11px 24px; background: var(--raised); font-size: 12px; color: #b3b8c0; }
#editor-content { display: block; flex: 1; width: 100%; min-height: 0; padding: 24px; border: 0; outline: none; resize: none; background: #08090c; color: #dcdfe6; font: 13px/1.95 ui-monospace,SFMono-Regular,Consolas,monospace; tab-size: 2; scrollbar-color: #516b98 #08090c; }
#editor-content:focus-visible { box-shadow: inset 0 0 0 2px #91a9e5; }
#editor-content[readonly] { color: #bec2c9; }
.editor-dialog > .form-error { margin: 0; min-height: 0; padding: 0 24px; }
.editor-dialog > .form-error:not(:empty) { padding-top: 12px; padding-bottom: 12px; }
.editor-footer { padding: 18px 24px; border-top: 1px solid #41464d; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.editor-footer p { font-size: 12px; max-width: 30ch; line-height: 1.7; }
.editor-footer > div { display: flex; gap: 8px; }
.toast { position: fixed; right: 26px; bottom: 24px; z-index: 30; max-width: min(500px,calc(100vw - 32px)); padding: 15px 19px; border-radius: 9px; background: var(--raised); color: #dcdfe7; border: 1px solid #6e737e; font-size: 13px; animation: toast-reveal 180ms var(--ease); }
@keyframes toast-reveal { from { opacity: .4; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes signal-wait { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
body[data-page-hidden=true] .state-label::before { animation-play-state: paused; }
.loading-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; font-size: 14px; }
.login-page { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100vh; }
.login-story { padding: 60px 10%; background: var(--surface); display: flex; flex-direction: column; justify-content: space-between; gap: 70px; }
.login-story h2 { font-size: 37px; line-height: 1.3; letter-spacing: -.025em; font-weight: 600; }
.login-story p { margin-top: 25px; font-size: 14px; line-height: 1.9; color: #b7bcc4; }
.login-trust { display: flex; align-items: center; gap: 9px; color: #b2b8c0; font-size: 12px; }
.login-trust .icon { width: 17px; }
#login-form { align-self: center; justify-self: center; width: min(440px,100%); padding: 35px; }
#login-form h1 { font-size: 26px; }
#login-form > p { margin-top: 16px; font-size: 13px; line-height: 1.9; }
#login-form label { display: block; margin: 30px 0 9px; font-size: 13px; }
#login-form .button { width: 100%; margin-top: 16px; }
#login-form small { display: block; color: #acb0b9; margin-top: 24px; font-size: 12px; text-align: center; }

@media(min-width:1550px) {
  #console-output { height: 340px; }
}
@media(max-width:1100px) {
  .header-inner, .primary-nav { padding-left: 25px; padding-right: 25px; }
  .power-button { min-width: 110px; padding: 12px 16px; }
  .panel-toolbar { align-items: flex-start; }
  .toolbar-actions { flex-wrap: wrap; justify-content: flex-end; }
  .file-table .modified-col { width: 155px; }
}
@media(max-width:850px) {
  .file-table .modified-col { display: none; }
  .panel-toolbar { flex-direction: column; gap: 17px; align-items: stretch; }
  .toolbar-actions { justify-content: flex-start; }
  .search-field input { width: 160px; }
  .drop-hint small { display: none; }
  .migration-facts { grid-template-columns: 1fr; gap: 20px; }
}
@media(max-width:620px) {
  .brand { font-size: 23px; }
  .header-right { gap: 12px; }
  .connection { font-size: 12px; }
  .account { width: 29px; height: 29px; }
  h1 { font-size: 25px; }
  .page-heading { align-items: flex-start; margin-bottom: 21px; gap: 12px; }
  .page-heading p { font-size: 12px; max-width: 27ch; line-height: 1.8; }
  .page-heading > .button { min-height: 37px; font-size: 12px; padding: 9px 11px; }
  .page-heading > .button .icon { width: 15px; }
  .notice { align-items: flex-start; gap: 8px; font-size: 12px; padding: 12px; }
  .demo-tag { margin-top: 2px; font-size: 12px; }
  .power-group { align-items: stretch; width: 100%; gap: 7px; }
  .power-button { min-height: 49px; padding: 12px 16px; font-size: 14px; }
  .power-group > .text-button { align-self: center; }
  .live-label { display: none; }
  .section-heading h2 { font-size: 15px; }
  .section-heading { margin-bottom: 14px; }
  .terminal-toolbar { padding-left: 12px; padding-right: 12px; }
  .terminal-toolbar code { font-size: 12px; }
  .terminal-follow { font-size: 12px; gap: 4px; }
  #console-output { height: 270px; font-size: 12px; padding: 16px 13px; line-height: 2; }
  #command-form { padding-left: 13px; }
  #command { font-size: 12px; }
  .console-hint { font-size: 12px; }
  .workspace-footer { flex-direction: column; gap: 7px; font-size: 12px; padding-top: 17px; }
  .panel-toolbar { padding: 20px 16px; }
  .toolbar-actions { gap: 8px; }
  .toolbar-actions .button { min-height: 38px; font-size: 12px; padding: 9px 11px; }
  .toolbar-actions .button .icon { width: 15px; }
  .search-field { padding: 10px 11px; }
  .toolbar-actions > .search-field { width: 100%; }
  .search-field input { width: 100%; }
  .mutation-notice { padding: 13px 16px; flex-wrap: wrap; gap: 10px; }
  .mutation-notice p { font-size: 12px; }
  .mutation-notice .button { margin-left: 28px; }
  .file-location { align-items: stretch; flex-direction: column; padding: 14px 16px; gap: 9px; }
  .file-location .search-field { flex: 1; }
  .file-location > div { align-items: center; }
  #file-breadcrumb button { font-size: 12px; }
  .drop-hint { padding: 13px 16px; font-size: 12px; gap: 10px; }
  .drop-hint button { font-size: 12px; }
  .file-table th, .file-table td { padding: 10px 13px; }
  .file-table th { font-size: 12px; }
  .file-table .size-col { display: none; }
  .file-table .actions-col { width: 144px; }
  .file-table td.actions-col { padding-left: 0; padding-right: 8px; }
  .file-table td.actions-col .icon-button { width: 44px; height: 44px; padding: 10px; }
  .file-table .restore-button { min-height: 44px; }
  .trash-summary, .files-error { padding: 16px; font-size: 14px; }
  #file-search, #mod-search, #file-form-name, #editor-content { font-size: 16px; }
  #file-breadcrumb button, .file-name { min-height: 44px; }
  .file-table td.actions-col .icon { width: 15px; height: 15px; }
  .file-name { gap: 8px; font-size: 12px; }
  .file-name > .icon { width: 17px; height: 17px; }
  .table-size, .table-date { font-size: 12px; }
  .panel-foot { padding: 13px 16px; font-size: 12px; flex-wrap: wrap; }
  .panel-foot .text-button { font-size: 12px; }
  .section-note { font-size: 12px; }
  .section-intro { gap: 12px; }
  .section-intro > .icon { width: 22px; }
  .section-intro h2 { font-size: 17px; }
  .section-intro p { font-size: 12px; }
  .backups-list { padding-left: 16px; padding-right: 16px; }
  .backup-row { grid-template-columns: minmax(0,1fr) 75px; gap: 13px; }
  .backup-state { grid-column: 1/3; justify-self: start; }
  .reading-panel { padding: 23px 18px; }
  .settings-list > div { grid-template-columns: 1fr; gap: 7px; font-size: 12px; }
  .settings-list code { font-size: 12px; }
  .intro-text { font-size: 12px; }
  .check-row p { font-size: 12px; }
  dialog { padding: 25px; }
  dialog h2 { font-size: 20px; }
  dialog p { font-size: 12px; }
  .editor-dialog { width: 100%; border-radius: 0; padding: 0; }
  .editor-header { padding: 20px; }
  .editor-info { padding: 10px 20px; font-size: 12px; }
  #editor-content { padding: 19px; font-size: 12px; }
  .editor-footer { flex-direction: column; align-items: stretch; padding: 17px 20px; gap: 14px; }
  .editor-footer p { max-width: none; font-size: 12px; }
  .editor-footer > div { justify-content: flex-end; }
  .toast { right: 16px; bottom: 16px; font-size: 12px; }
  .login-page { grid-template-columns: 1fr; }
  .login-story { padding: 26px; gap: 25px; }
  .login-story > div, .login-trust { display: none; }
  #login-form { align-self: start; padding: 36px 27px; }
  #login-form h1 { font-size: 25px; }
}
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { transition-duration: 100ms !important; scroll-behavior: auto !important; }
  dialog[open], .editor-dialog[open], .toast, .just-changed, .state-label::before { animation: none !important; }
  .button:active:not(:disabled), .icon-button:active:not(:disabled), .power-button:hover:not(:disabled) .icon { transform: none; }
}

#app { display: grid; grid-template-columns: 212px minmax(0,1fr); grid-template-rows: 74px minmax(0,1fr); min-height: 100vh; }
.nav-shell { position: fixed; inset: 0 auto 0 0; width: 212px; display: flex; flex-direction: column; padding: 28px 15px 20px; background: #0b0c10; border-right: 1px solid var(--line); }
.nav-shell > .brand { margin: 0 13px 32px; font-size: 25px; }
.primary-nav { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: #526488 #0b0c10; }
.primary-nav a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 44px; border: 1px solid transparent; border-radius: 7px; color: #b3b7be; font-size: 13px; white-space: nowrap; }
.primary-nav a > .icon { width: 18px; height: 18px; }
.primary-nav a:hover { color: #ecedf0; background: var(--hover); }
.primary-nav a[aria-current=page] { color: #dde0e8; background: var(--raised); border-color: #5c616d; }
.primary-nav .count { margin-left: auto; }
.app-header { grid-column: 2; background: #0b0c10; border-bottom: 1px solid var(--line); }
.header-inner { max-width: 1440px; height: 74px; margin: auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.global-state { display: flex; align-items: center; gap: 9px; color: #c6cad0; font-size: 12px; }
.global-state i { width: 7px; height: 7px; border-radius: 50%; background: #8494ad; }
.global-state[data-state=ready] i { background: #86d4be; }
.global-state[data-state=busy] i { background: #efc78b; }
.global-state[data-state=failed] i { background: #f09aaf; }
.workspace { grid-column: 2; min-width: 0; width: 100%; max-width: 1440px; margin: 0 auto; padding: 30px 32px 24px; }
.page-heading { margin-bottom: 25px; }
.server-control { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 27px 24px; border: 1px solid #40444c; border-radius: 14px; background: var(--surface); padding: 28px 28px 0; margin-bottom: 24px; }
.server-main { min-width: 0; }
.status-headline { display: flex; align-items: center; gap: 14px; margin-top: 21px; }
.state-orb { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid #687072; color: #c0d0cb; background: #03090d; border-radius: 50%; flex: none; }
.state-orb .icon { width: 22px; height: 22px; }
.state-label { font-size: clamp(26px,2.7vw,38px); font-weight: 600; letter-spacing: -.03em; line-height: 1.2; color: #e5eae9; }
.server-detail { color: #c2c6cd; font-size: 13px; line-height: 1.8; margin-top: 13px; }
.server-version { font-size: 12px; margin-top: 9px; color: #a4aab1; }
.server-control[data-state=inactive] .state-label { color: #ced0d5; }
.server-control[data-state=inactive] .state-orb { color: #a8acb3; border-color: #51565c; }
.server-control[data-state=failed] .state-label, .server-control[data-state=failed] .state-orb { color: #f2a7b9; }
.server-control[data-busy=true] .state-label, .server-control[data-busy=true] .state-orb { color: #efc78b; }
.server-control[data-busy=true] .state-orb { animation: signal-wait 1100ms ease-in-out infinite; }
.power-group { align-self: center; }
.power-button { min-height: 49px; min-width: 125px; font-size: 14px; }
.server-readiness { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-column: 1/-1; margin: 0 -28px; padding: 20px 28px; border-top: 1px solid #263650; gap: 20px; }
.server-readiness div + div { border-left: 1px solid var(--line); padding-left: 24px; }
.server-readiness dt { color: #a1a6ae; font-size: 12px; margin-bottom: 7px; }
.server-readiness dd { margin: 0; color: #d4d7dc; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.resource-strip { margin: 0 0 29px; padding: 2px 0 23px; border-bottom: 1px solid var(--line); }
.resource-section { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; }
.resource-section > .section-heading { display: none; }
.resource { padding: 0; min-width: 0; }
.resource > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 12px; }
.resource span { color: #c2c6cc; }
.resource small { display: block; color: #aeb2ba; font-size: 12px; line-height: 1.8; margin-top: 8px; }
.resource strong { font-size: 17px; color: #eaecf0; font-variant-numeric: tabular-nums; font-weight: 550; white-space: nowrap; }
.overview-grid { display: grid; grid-template-columns: minmax(0,1fr) 285px; gap: 28px; }
.context-lane { min-width: 0; border-left: 1px solid var(--line); padding-left: 25px; }
.context-lane h2 { font-size: 14px; }
.quick-actions > p { font-size: 12px; margin: 8px 0 13px; line-height: 1.8; }
.quick-action { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 13px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: #ced2d9; font-size: 12px; text-align: left; }
.quick-action > span { display: flex; gap: 10px; align-items: center; }
.quick-action .icon { width: 16px; height: 16px; }
.quick-action:hover:not(:disabled) { color: #eaecf1; background: var(--hover); }
.quick-action:disabled { color: #868a92; }
#announcement-form { margin-top: 18px; }
#announcement-form label, #whitelist-form label { display: block; font-size: 12px; color: #bbc0c7; margin-bottom: 8px; }
#announcement-form > div { display: flex; border: 1px solid #666c75; border-radius: 7px; padding: 4px; background: #090a0e; }
#announcement { width: 100%; min-width: 0; padding: 7px; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
#announcement-form > div:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
#quick-result { font-size: 12px; overflow-wrap: anywhere; color: #cdd3d9; margin-top: 12px; }
.players-section, .backup-brief { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 22px; }
.player-workspace { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; }
.management-list { margin-top: 21px; }
.managed-player { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 13px; }
.managed-player > .text-button { margin-left: auto; color: #e7a2b6; }
.input-action { display: flex; gap: 9px; }
#player-name { width: 100%; min-width: 0; background: #090a0e; color: var(--ink); border: 1px solid #6e737e; border-radius: 7px; padding: 10px 12px; font-size: 12px; }
.activity-list { padding: 0 24px; }
.activity-row { display: grid; grid-template-columns: 135px minmax(0,1fr) auto; gap: 18px; align-items: start; padding: 19px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.activity-row:last-child { border-bottom: 0; }
.activity-row time { font-size: 12px; color: #a6acb3; line-height: 1.8; font-variant-numeric: tabular-nums; }
.activity-row code { display: block; color: #acb2ba; margin-top: 5px; font-size: 12px; overflow-wrap: anywhere; }
.activity-row > span { color: #c0d0cb; font-size: 12px; }
.activity-row > span.is-error { color: #f2a7b9; }
@media(min-width:1550px) { .overview-grid { grid-template-columns: minmax(0,1fr) 310px; gap: 32px; } }
@media(max-width:1200px) {
  #app { grid-template-columns: 192px minmax(0,1fr); }
  .nav-shell { width: 192px; padding-left: 10px; padding-right: 10px; }
  .workspace { padding-left: 25px; padding-right: 25px; }
  .header-inner { padding: 0 25px; }
  .overview-grid { grid-template-columns: minmax(0,1fr); }
  .context-lane { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 25px; padding: 23px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .context-lane .players-section, .context-lane .backup-brief { margin: 0; padding: 0; border: 0; }
  .power-button { min-width: 105px; padding-left: 14px; padding-right: 14px; }
}
@media(max-width:850px) {
  #app { display: block; }
  .nav-shell { position: static; width: auto; padding: 18px 17px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .nav-shell > .brand { margin: 0 0 18px; font-size: 23px; }
  .primary-nav { flex-direction: row; overflow-x: auto; gap: 5px; margin: 0 -17px; padding: 0 17px 12px; }
  .primary-nav a { min-height: 40px; padding: 9px 12px; font-size: 12px; }
  .header-inner { height: 49px; padding: 0 18px; }
  .global-state { font-size: 12px; }
  .header-right { gap: 12px; }
  .account { width: 26px; height: 26px; }
  .workspace { padding: 25px 18px 20px; }
  .player-workspace { grid-template-columns: minmax(0,1fr); }
}
@media(max-width:620px) {
  .server-control { grid-template-columns: minmax(0,1fr); padding: 22px 18px 0; gap: 22px; }
  .status-headline { gap: 11px; margin-top: 18px; }
  .state-label { font-size: 28px; }
  .state-orb { width: 36px; height: 36px; }
  .server-detail { font-size: 12px; }
  .power-group { align-items: stretch; width: 100%; }
  .server-readiness { grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0 -18px; padding: 18px; gap: 20px 16px; }
  .server-readiness div + div { border: 0; padding: 0; }
  .server-readiness div:nth-child(2n) { border-left: 1px solid var(--line); padding-left: 17px; }
  .server-readiness dd { font-size: 12px; }
  .resource-section { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .resource strong { font-size: 16px; }
  .resource-strip { padding-bottom: 23px; }
  .context-lane { display: block; }
  .context-lane .players-section, .context-lane .backup-brief { margin-top: 24px; padding-top: 23px; border-top: 1px solid var(--line); }
  .activity-list { padding: 0 17px; }
  .activity-row { grid-template-columns: minmax(0,1fr) auto; gap: 9px; }
  .activity-row time { grid-column: 1/-1; }
  .input-action { flex-wrap: wrap; }
  #player-name { min-height: 42px; }
}
@media(prefers-reduced-motion:reduce) { .state-orb { animation: none !important; } }

/* A compact game-launcher shell with optional tools. */
#app { display: block; min-height: 100vh; }
.app-header { background: #0b0c10; border-bottom: 0; }
.header-inner { max-width: 1224px; height: 56px; padding: 0 32px; }
.header-left { display: flex; align-items: center; gap: 28px; min-width: 0; }
.header-left .brand { font-size: 24px; }
.header-left .global-state { font-size: 12px; }
.navigation-strip { border-bottom: 1px solid var(--line); background: #0b0c10; }
.nav-shell { position: relative; inset: auto; width: auto; max-width: 1224px; margin: auto; display: flex; flex-direction: row; align-items: center; gap: 22px; padding: 0 32px; border: 0; overflow: visible; }
.primary-nav { flex: 1; flex-direction: row; overflow: visible; gap: 25px; padding: 0; margin: 0; scrollbar-width: thin; }
.primary-nav a { flex: none; position: relative; min-height: 48px; padding: 10px 0; border: 0; border-radius: 0; background: transparent; font-size: 14px; font-weight: 500; color: #9199a9; gap: 8px; }
.primary-nav a > .icon { display: none; }
.primary-nav a:hover { color: #e2e5ed; background: transparent; }
.primary-nav a[aria-current=page] { color: #e2e5ed; background: transparent; border: 0; }
.primary-nav a[aria-current=page]::after { content: ''; position: absolute; bottom: 0; height: 2px; left: 0; right: 0; border-radius: 1px; background: #a2aec6; }
.primary-nav .count { margin-left: 1px; font-weight: 400; padding: 1px 5px; }
.advanced-nav { position: relative; flex: none; padding: 0; margin: 0; border: 0; }
.advanced-nav summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 0 10px 10px; color: #a3aab8; font-size: 13px; cursor: pointer; list-style: none; }
.advanced-nav summary::-webkit-details-marker, .status-details summary::-webkit-details-marker { display: none; }
.advanced-nav summary .icon { width: 13px; height: 13px; }
.advanced-nav[open] > summary .icon, .status-details[open] > summary .icon { transform: rotate(90deg); }
.advanced-nav nav { position: absolute; top: calc(100% + 3px); right: -12px; z-index: 20; width: 235px; padding: 7px; background: #111216; border: 1px solid #3c424d; border-radius: 10px; display: flex; flex-direction: column; gap: 3px; }
.advanced-nav a { display: flex; align-items: center; gap: 11px; min-height: 42px; padding: 10px 12px; color: #bcc2ce; font-size: 13px; border-radius: 6px; }
.advanced-nav a > .icon { width: 17px; height: 17px; }
.advanced-nav a:hover, .advanced-nav a[aria-current=page] { background: #1b1e25; color: #e6e9ef; }
.workspace { width: 100%; max-width: 1224px; padding: 29px 32px 24px; margin: auto; }
#app[data-view=overview] .page-heading { display: none; }
#view-overview { width: 100%; }
.demo-explainer { margin: 0 0 19px; color: #9b9fa9; font-size: 12px; }
.demo-explainer summary { cursor: pointer; min-height: 26px; line-height: 1.8; }
.demo-explainer summary span { color: #8d95a4; }
.demo-explainer p { margin-top: 7px; font-size: 12px; max-width: 75ch; line-height: 1.8; }
.server-control { display: block; padding: 0; margin: 0; border: 0; border-radius: 16px; background: var(--surface); overflow: hidden; }
.launch-scene { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 32px; min-height: 285px; padding: 37px 36px 32px; position: relative; overflow: hidden; isolation: isolate; }
.world-cover { position: absolute; inset: 0; z-index: -2; background: #0d0e12 url('/world-cover.png') center 40% / cover no-repeat; opacity: .75; filter: brightness(.72) saturate(.7); }
.launch-scene::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#0d0e12 0%,#0d0e12ed 34%,#0d0e1255 72%,#0d0e122e 100%); }
#server-name { font-size: 28px; line-height: 1.35; font-weight: 600; letter-spacing: -.025em; color: #dfe3eb; overflow-wrap: anywhere; }
.status-headline { margin-top: 17px; gap: 7px; display: inline-flex; padding: 5px 9px; border: 1px solid #40564f; background: #090d11bd; border-radius: 5px; }
.state-label { font-size: 13px; letter-spacing: 0; font-weight: 500; color: #b5d3c6; }
.state-orb { width: 15px; height: 15px; background: none; border: 0; }
.state-orb .icon { width: 14px; height: 14px; }
.server-detail { font-size: 14px; margin-top: 14px; max-width: 57ch; color: #b5bdcc; }
.home-players { font-size: 13px; color: #c0cada; margin-top: 19px; }
.home-players .icon { width: 16px; height: 16px; }
.power-group { position: relative; align-self: end; align-items: stretch; min-width: 196px; gap: 11px; }
.power-button { min-width: 196px; min-height: 51px; font-size: 14px; border-radius: 10px; background: #111722; border-color: #66728c; }
.power-button.danger { background: #191015; border-color: #925b68; }
.power-button.danger:hover:not(:disabled) { background: #25151d; }
.power-group .text-button { font-size: 13px; justify-content: center; color: #bac3d3; }
.server-control[data-state=inactive] .status-headline { border-color: #505864; }
.server-control[data-state=failed] .status-headline { border-color: #925b68; }
.server-control[data-busy=true] .status-headline { border-color: #75603f; }
.server-control[data-busy=true] .power-button .icon { animation: power-working 1300ms linear infinite; }
@keyframes power-working { to { transform: rotate(360deg); } }
.status-details { padding: 13px 36px 16px; border-top: 1px solid #272e3a; }
.status-details summary { display: inline-flex; gap: 8px; align-items: center; min-height: 28px; color: #9da7b9; font-size: 12px; cursor: pointer; list-style: none; }
.status-details summary .icon { width: 12px; height: 12px; }
.status-details .server-version { margin-top: 15px; font-size: 12px; }
.status-details .server-readiness { margin: 0; padding: 22px 0; border: 0; }
.technical-notes { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.technical-notes p { font-size: 12px; line-height: 1.8; }
.resource-strip { margin: 0; padding: 26px 4px; border: 0; }
.resource-section { gap: 42px; }
.resource > div { font-size: 13px; margin-bottom: 11px; }
.resource strong { font-size: 16px; }
.home-shortcuts { display: flex; gap: 35px; padding-top: 15px; border-top: 1px solid var(--line); margin: 0 4px; }
.home-shortcuts a { flex: 1; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 15px 12px; border-radius: 10px; transition: transform 180ms var(--ease), background-color 180ms var(--ease); }
.home-shortcuts a > .icon { width: 22px; height: 22px; color: #aebbd4; }
.home-shortcuts a > .icon:last-child { margin-left: auto; width: 17px; height: 17px; }
.home-shortcuts strong { display: block; font-size: 14px; font-weight: 500; color: #d0d6e2; }
.home-shortcuts small { display: block; font-size: 13px; color: #929dae; margin-top: 4px; }
.home-shortcuts a:hover { background: #0e1118; transform: translateY(-2px); }
.workspace-footer { margin-top: 28px; font-size: 12px; border-top: 0; }
@media(max-width:850px) {
  .header-inner { height: 56px; padding: 0 22px; }
  .nav-shell { padding: 0 22px; gap: 18px; }
  .primary-nav { gap: 22px; }
  .primary-nav a { min-height: 48px; font-size: 13px; }
  .workspace { padding: 24px 22px 20px; }
  .launch-scene { padding: 30px; gap: 25px; }
  #server-name { font-size: 25px; }
  .power-group, .power-button { min-width: 180px; }
}
@media(max-width:620px) {
  .header-inner { height: 56px; padding: 0 19px; }
  .header-left .brand { font-size: 23px; }
  .header-left .global-state { display: none; }
  .nav-shell { padding: 0 19px; gap: 17px; }
  .primary-nav { gap: 21px; }
  .primary-nav a { min-height: 48px; }
  .advanced-nav summary { font-size: 12px; padding-left: 0; }
  .advanced-nav nav { right: -4px; width: 220px; }
  .workspace { padding: 22px 17px 20px; }
  .demo-explainer { margin-bottom: 15px; }
  .server-control { border-radius: 14px; }
  .launch-scene { grid-template-columns: minmax(0,1fr); padding: 26px 24px 21px; gap: 24px; min-height: 0; }
  .world-cover { background-position: 87% center; opacity: .45; }
  .launch-scene::before { background: linear-gradient(90deg,#0d0e12e8,#0d0e1291); }
  #server-name { font-size: 23px; }
  .status-headline { margin-top: 15px; }
  .server-detail { font-size: 13px; }
  .home-players { margin-top: 15px; }
  .power-group { width: 100%; gap: 8px; }
  .power-button { min-height: 48px; }
  .power-group .text-button { min-height: 34px; }
  .status-details { padding: 12px 24px 14px; }
  .status-details .server-readiness { gap: 18px; padding: 19px 0; }
  .resource-strip { padding: 24px 3px; }
  .resource-section { gap: 19px; }
  .resource > div { margin-bottom: 8px; }
  .resource strong { font-size: 15px; }
  .home-shortcuts { flex-direction: column; gap: 0; margin: 0 3px; padding-top: 9px; }
  .home-shortcuts a { padding: 14px 7px; }
  .home-shortcuts a + a { border-top: 1px solid var(--line); }
  .home-shortcuts small { font-size: 12px; }
}
@media(prefers-reduced-motion:reduce) {
  .power-button .icon { animation: none !important; transition: none !important; }
  .home-shortcuts a:hover { transform: none; }
}
/* Cover-first composition: a panorama, then one clear server/action row. */
.launch-scene { min-height: 0; padding-top: 253px; }
.world-cover { inset: 0 0 auto; height: 220px; opacity: .86; background-position: center 57%; }
.launch-scene::before { inset: 0 0 auto; height: 220px; background: linear-gradient(0deg,#0d0e12ba,transparent 65%); }
.server-main { position: relative; }
.power-group { align-self: center; }
#server-name { font-size: 25px; }
@media(max-width:850px) { .launch-scene { padding-top: 230px; } .world-cover, .launch-scene::before { height: 200px; } }
@media(max-width:620px) {
  .launch-scene { padding-top: 177px; }
  .world-cover, .launch-scene::before { height: 150px; }
  .world-cover { background-position: 72% 48%; opacity: .7; }
  #server-name { font-size: 21px; }
}

.advanced-nav[data-active=true] summary { color: #dde2ec; }

.minecraft-logo { display: block; width: 180px; height: auto; }
@media(max-width:620px) { .minecraft-logo { width: 155px; } }

.editor-state { margin: 0; padding: 11px 24px; background: #0b0905; color: #e4cba6; border-bottom: 1px solid #574932; font-size: 12px; line-height: 1.7; }

/* Optional performance tools keep the resting launcher compact. */
.health-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 4px; padding: 0 0 20px; font-size: 13px; }
.health-summary p { color: var(--ink); }
.performance-section { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--line); }
.performance-section > h2, .performance-section > h3 { margin-bottom: 12px; }
.performance-readings { display: flex; flex-wrap: wrap; gap: 20px 48px; margin: 24px 0 12px; }
.performance-readings div { min-width: 160px; }
.performance-readings dt { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.performance-readings dd { margin: 0; font-size: 16px; font-weight: 550; font-variant-numeric: tabular-nums; }
.history-disclosure { margin-top: 24px; }
.history-disclosure summary { min-height: 44px; padding: 10px 0; cursor: pointer; color: var(--ink); font-size: 14px; }
.history-table { max-height: 320px; overflow: auto; }
#view-performance .file-table { min-width: 0; }
#view-performance .file-table td, #view-performance .file-table th { font-variant-numeric: tabular-nums; }
.performance-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; border: 0; margin: 24px 0; padding: 0; }
.performance-fields label { display: block; margin-bottom: 10px; font-size: 13px; color: var(--ink); }
.performance-fields input { width: 100%; min-height: 44px; padding: 10px 12px; background: var(--terminal, #090a0e); color: var(--ink); border: 1px solid var(--control-line); border-radius: 7px; }
.performance-fields small { display: block; margin-top: 9px; font-size: 12px; line-height: 1.8; color: var(--muted); }
.settings-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.diagnostic-output { max-height: 260px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; padding: 16px; background: var(--terminal, #090a0e); color: var(--terminal-ink, #caced5); border-radius: 7px; }
#profile-reports .management-row { gap: 16px; overflow-wrap: anywhere; }
#maintenance-mods p { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13px; overflow-wrap: anywhere; }
#maintenance-crash { gap: 10px; }
#maintenance-note { margin-bottom: 24px; }
@media(max-width:620px) {
  .health-summary { display: block; font-size: 12px; padding-bottom: 16px; }
  .health-summary a { margin-top: 5px; }
  .performance-fields { grid-template-columns: 1fr; gap: 20px; }
  .performance-readings { gap: 22px; }
  .performance-readings div { min-width: 130px; }
  .performance-section { padding-top: 22px; margin-top: 24px; }
  #view-performance .file-table td, #view-performance .file-table th { padding-left: 10px; padding-right: 10px; font-size: 12px; }
}

/* Direct power controls: a tactile action key with honest pending feedback. */
.power-group { width: 276px; min-width: 0; gap: 10px; }
.power-switch, .restart-control { display: flex; align-items: center; width: 100%; gap: 14px; padding: 16px; border: 1px solid var(--control-line); border-radius: 12px; background: var(--raised); color: var(--ink); text-align: left; }
.power-switch { min-height: 88px; }
.power-switch:hover:not(:disabled), .restart-control:hover:not(:disabled) { border-color: var(--accent); background: var(--hover); }
.power-switch:active:not(:disabled), .restart-control:active:not(:disabled) { transform: translateY(1px); }
.power-copy, .restart-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.power-copy strong, .restart-copy strong { font-size: 14px; font-weight: 600; line-height: 1.45; }
.power-copy small, .restart-copy small { font-size: 12px; line-height: 1.55; color: var(--muted); }
.power-key { position: relative; display: grid; place-items: center; width: 44px; height: 48px; flex: none; background: var(--primary-fill); color: var(--accent); border-radius: 9px; transition: background-color 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease); }
.power-key .icon { position: absolute; width: 23px; height: 23px; transition: opacity 160ms var(--ease), transform 200ms var(--ease); }
.power-key .power-stop, .power-key .power-busy { opacity: 0; transform: scale(.7); }
.power-key .power-stop { fill: currentColor; stroke: none; }
.power-switch[data-power-state=off] .power-key { color: var(--success); }
.power-switch[data-power-state=on], .power-switch[data-power-state=on]:hover:not(:disabled) { border-color: var(--control-stop-boundary); }
.power-switch[data-power-state=on] .power-key { color: var(--danger-ink); background: var(--control-stop-key); }
.power-switch[data-power-state=on] .power-idle { opacity: 0; transform: scale(.7); }
.power-switch[data-power-state=on] .power-stop { opacity: 1; transform: scale(1); }
.power-switch:active:not(:disabled) .power-key { transform: scale(.94); }
.power-switch[data-pending=true] { border-color: #80704f; }
.power-switch[data-pending=true] .power-key { color: var(--warning); background: var(--primary-fill); }
.power-switch[data-pending=true] .power-idle, .power-switch[data-pending=true] .power-stop { opacity: 0; }
.power-switch[data-pending=true] .power-busy { opacity: 1; transform: none; animation: power-key-working 1100ms linear infinite; }
.power-switch[data-power-state=unknown] .power-key { color: var(--muted); }
.power-switch:disabled, .restart-control:disabled { cursor: not-allowed; }
.restart-control { min-height: 64px; padding-top: 12px; padding-bottom: 12px; background: var(--surface); border-color: var(--line); }
.restart-glyph { display: grid; place-items: center; width: 44px; height: 34px; flex: none; color: var(--accent); }
.restart-glyph svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8px; stroke-linecap: square; stroke-linejoin: miter; }
.restart-arrows { transform-origin: 16px 16px; transition: transform 240ms var(--ease); }
.restart-control:hover:not(:disabled) .restart-arrows { transform: rotate(90deg); }
.restart-control[data-busy=true] .restart-arrows { animation: restart-cycle 1400ms steps(4,end) infinite; }
.restart-control:disabled:not([data-busy=true]) strong, .restart-control:disabled:not([data-busy=true]) .restart-glyph { color: var(--muted); }
.restart-control[data-busy=true] { border-color: #80704f; }
.restart-control[data-busy=true] .restart-glyph { color: var(--warning); }
@keyframes power-key-working { to { transform: rotate(360deg); } }
@keyframes restart-cycle { to { transform: rotate(360deg); } }
body[data-page-hidden=true] .power-busy, body[data-page-hidden=true] .restart-arrows { animation-play-state: paused; }
@media(max-width:850px) { .power-group { width: 260px; } }
@media(max-width:620px) {
  .power-group { width: 100%; gap: 10px; }
  .power-switch { min-height: 89px; }
  .power-copy strong, .restart-copy strong { font-size: 15px; }
  .power-copy small, .restart-copy small { font-size: 13px; }
  .restart-control { min-height: 67px; }
}
@media(prefers-reduced-motion:reduce) {
  .power-switch .power-key, .power-key .icon, .restart-control .restart-arrows { transition: none; }
  .power-switch[data-pending=true] .power-busy, .restart-control .restart-arrows { animation: none !important; }
  .restart-control:hover:not(:disabled) .restart-arrows { transform: none; }
  .power-switch:active:not(:disabled), .power-switch:active:not(:disabled) .power-key, .restart-control:active:not(:disabled) { transform: none; }
}