:root {
  color-scheme: light;
  --bg: #e6e9ed; --panel: #f6f7f9; --panel-2: #ffffff; --line: #cdd3da; --line-soft: #e1e5ea;
  --text: #1c2731; --muted: #5b6874; --accent: #1a8cff; --accent-strong: #0b6fd6; --accent-soft: #dcecff;
  --select: #cfe5ff; --hover: #eaf2fb; --danger: #c93a32; --warn: #a86a00; --ok: #2b8a52;
  --code-bg: #ffffff; --code-text: #1c2731; --gutter: #f0f2f5;
  --lua-keyword: #0033b3; --lua-global: #7a3ec2; --lua-string: #067d17; --lua-number: #b35c00; --lua-comment: #7b8794; --lua-error: #c93a32;
  font: 13px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1b1f24; --panel: #262b31; --panel-2: #1f2328; --line: #3a4149; --line-soft: #30363d;
  --text: #e4e8ec; --muted: #9ba6b1; --accent: #3d9bff; --accent-strong: #6cb4ff; --accent-soft: #1d3550;
  --select: #22476e; --hover: #2d3540; --danger: #ff7b72; --warn: #e3b341; --ok: #56d364;
  --code-bg: #1e2227; --code-text: #d8dee4; --gutter: #22262b;
  --lua-keyword: #6cb4ff; --lua-global: #d2a8ff; --lua-string: #7ee787; --lua-number: #ffa657; --lua-comment: #8b949e; --lua-error: #ff7b72;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body.studio { background: var(--bg); color: var(--text); display: grid; grid-template-rows: 36px auto minmax(0, 1fr) 24px; overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
kbd { font: 11px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--muted); }
[hidden] { display: none !important; }
body.is-loading .st-main { visibility: hidden; }

/* Title bar */
.st-titlebar { display: flex; align-items: center; gap: 10px; padding: 0 10px; background: var(--panel-2); border-bottom: 1px solid var(--line); min-width: 0; }
.st-logo { display: inline-flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; font-weight: 600; white-space: nowrap; }
.st-logo b { color: var(--accent); }
.st-menubar { display: flex; align-items: center; gap: 2px; }
.st-menu { position: relative; }
.st-menu-button, .st-icon-button { border: 1px solid transparent; background: none; border-radius: 4px; padding: 4px 9px; }
.st-menu-button:hover, .st-icon-button:hover:not(:disabled), .st-menu-button[aria-expanded="true"] { background: var(--hover); border-color: var(--line-soft); }
.st-icon-button { font-size: 16px; line-height: 1; padding: 4px 7px; }
.st-menu-list { position: absolute; top: calc(100% + 2px); left: 0; z-index: 60; min-width: 230px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 24px rgb(0 0 0 / .18); padding: 4px; display: flex; flex-direction: column; }
.st-menu-list [role="menuitem"], .context-menu [role="menuitem"] { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: none; border-radius: 4px; padding: 6px 10px; white-space: nowrap; }
.st-menu-list [role="menuitem"] kbd, .context-menu [role="menuitem"] kbd { margin-left: auto; padding-left: 16px; }
.st-menu-list [role="menuitem"]:hover:not(:disabled), .st-menu-list [role="menuitem"]:focus, .context-menu [role="menuitem"]:hover:not(:disabled), .context-menu [role="menuitem"]:focus { background: var(--accent-soft); outline: none; }
.st-place-name { margin: 0 auto 0 8px; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.st-game-link { font-size: 12px; color: var(--accent-strong); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.st-save-state { color: var(--muted); font-size: 12px; white-space: nowrap; }
.st-save-state.is-dirty { color: var(--warn); }
.st-team { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; }
.st-team[hidden] { display: none; }
.st-team .team-label { color: var(--muted); margin-right: 2px; }
.team-user { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 3px; border-radius: 11px; background: var(--team-color, #7a8797); color: #fff; font-size: 10px; font-weight: 700; }
.tree-row.is-team-selected { box-shadow: inset 3px 0 0 var(--team-color, #2d9cdb); }
.st-account { font-size: 12px; color: var(--muted); white-space: nowrap; }
.st-account a { color: var(--accent); }

/* Ribbon */
.st-ribbon { background: var(--panel-2); border-bottom: 1px solid var(--line); min-width: 0; }
.st-ribbon-tabs { display: flex; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--line-soft); }
.st-ribbon-tabs [role="tab"] { border: 0; background: none; padding: 5px 14px; font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid transparent; }
.st-ribbon-tabs [role="tab"][aria-selected="true"] { color: var(--accent-strong); border-bottom-color: var(--accent); }
.ribbon-panel { display: flex; align-items: stretch; gap: 0; padding: 4px 6px 0; overflow-x: auto; min-height: 78px; }
.ribbon-group { display: flex; align-items: flex-start; gap: 2px; padding: 0 8px 18px; border-right: 1px solid var(--line-soft); position: relative; }
.ribbon-label { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--muted); }
.ribbon-big { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 54px; height: 56px; border: 1px solid transparent; border-radius: 4px; background: none; padding: 2px 6px; font-size: 12px; }
#official-items-ribbon a {color:inherit;text-decoration:none}
.ribbon-glyph { font-size: 20px; line-height: 1.2; }
.ribbon-big:hover:not(:disabled), .ribbon-stack button:hover:not(:disabled) { background: var(--hover); border-color: var(--line-soft); }
.ribbon-big[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.ribbon-big.is-play .ribbon-glyph { color: var(--ok); }
.ribbon-big.is-stop .ribbon-glyph { color: var(--danger); }
.ribbon-big.is-publish .ribbon-glyph { color: var(--accent); }
.ribbon-stack { display: flex; flex-direction: column; gap: 1px; justify-content: flex-start; }
.ribbon-stack button { border: 1px solid transparent; background: none; border-radius: 4px; padding: 2px 8px; text-align: left; font-size: 12px; white-space: nowrap; }
.ribbon-field { display: flex; align-items: center; gap: 5px; font-size: 12px; padding: 1px 6px; white-space: nowrap; }
.ribbon-field input[type="number"] { width: 56px; padding: 1px 4px; border: 1px solid var(--line); border-radius: 3px; background: var(--panel-2); }
.ribbon-field select { max-width: 130px; padding: 1px 2px; border: 1px solid var(--line); border-radius: 3px; background: var(--panel-2); }
.ribbon-field input[type="color"] { width: 34px; height: 20px; padding: 0; border: 1px solid var(--line); background: none; }
.ribbon-note { max-width: 520px; margin: 4px 12px; color: var(--muted); font-size: 12px; align-self: center; }

/* Docked layout */
.st-main { --left-width: 260px; --right-width: 300px; --output-height: 150px; --properties-share: 55%;
  display: grid; grid-template-columns: var(--left-width) 5px minmax(0, 1fr) 5px var(--right-width); min-height: 0; min-width: 0; }
.st-main.hide-toolbox { grid-template-columns: 0 0 minmax(0, 1fr) 5px var(--right-width); }
.st-main.hide-toolbox .st-toolbox, .st-main.hide-toolbox [data-splitter="left"] { display: none; }
.st-main.hide-explorer.hide-properties { grid-template-columns: var(--left-width) 5px minmax(0, 1fr) 0 0; }
.st-main.hide-explorer.hide-properties.hide-toolbox { grid-template-columns: 0 0 minmax(0, 1fr) 0 0; }
.st-main.hide-explorer.hide-properties .st-right, .st-main.hide-explorer.hide-properties [data-splitter="right"] { display: none; }
.st-splitter { background: var(--bg); cursor: col-resize; touch-action: none; }
.st-splitter.is-horizontal { cursor: row-resize; }
.st-splitter:hover, .st-splitter:focus-visible { background: var(--accent-soft); outline: none; }
.st-dock { background: var(--panel); display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }
.dock-title { display: flex; align-items: center; gap: 4px; height: 26px; padding: 0 4px 0 8px; background: var(--panel-2); border-bottom: 1px solid var(--line); flex: none; }
.dock-title h2 { margin: 0 auto 0 0; font-size: 12px; font-weight: 600; }
.dock-close, .dock-action { border: 0; background: none; border-radius: 3px; padding: 1px 6px; color: var(--muted); font-size: 13px; }
.dock-close:hover, .dock-action:hover { background: var(--hover); color: var(--text); }
.dock-filter { margin: 4px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 3px; background: var(--panel-2); flex: none; }
.dock-hint, .panel-empty { color: var(--muted); font-size: 12px; margin: 8px; }
.st-center { display: grid; grid-template-rows: 28px minmax(0, 1fr) 5px var(--output-height); min-width: 0; min-height: 0; }
.st-main.hide-output .st-center { grid-template-rows: 28px minmax(0, 1fr) 0 0; }
.st-main.hide-output .st-output, .st-main.hide-output [data-splitter="output"] { display: none; }
.st-right { display: grid; grid-template-rows: minmax(0, 1fr) 5px minmax(90px, var(--properties-share)); min-height: 0; min-width: 0; }
.st-main.hide-explorer .st-right { grid-template-rows: 0 0 minmax(0, 1fr); }
.st-main.hide-explorer #explorer-panel, .st-main.hide-explorer [data-splitter="properties"] { display: none; }
.st-main.hide-properties .st-right { grid-template-rows: minmax(0, 1fr) 0 0; }
.st-main.hide-properties #properties-panel, .st-main.hide-properties [data-splitter="properties"] { display: none; }

/* Document tabs and the 3D view */
.doc-tabs { display: flex; align-items: flex-end; gap: 2px; padding: 3px 4px 0; background: var(--bg); overflow-x: auto; }
.doc-tab { display: flex; align-items: center; background: var(--panel); border: 1px solid var(--line); border-bottom: 0; border-radius: 5px 5px 0 0; max-width: 220px; }
.doc-tab[aria-selected="true"] { background: var(--panel-2); border-top: 2px solid var(--accent); }
.doc-tab-open { border: 0; background: none; padding: 4px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-tab-close { border: 0; background: none; padding: 2px 7px 2px 0; color: var(--muted); }
.doc-tab-close:hover { color: var(--danger); }
.doc-host { position: relative; min-height: 0; background: #000; }
.stage { position: absolute; inset: 0; overflow: hidden; }
#viewport, .play-canvas, .play-frame { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
#viewport:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.is-playing #viewport { visibility: hidden; }
.play-frame { border: 0; background: #000; z-index: 2; }
.is-playing .gui-layer { display: none; }
.gui-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.gui-screen { position: absolute; inset: 0; }
.gui-object { position: absolute; display: block; margin: 0; padding: 0; font: 14px/1.2 system-ui, sans-serif; overflow: hidden; border-radius: 0; }
button.gui-object { cursor: pointer; }
.is-playing .gui-layer button.gui-object { pointer-events: auto; }
.is-playing .gui-layer input.gui-object, .is-playing .gui-layer textarea.gui-object, .is-playing .gui-layer .gui-scroll { pointer-events: auto; }
.gui-image { position: absolute; inset: 0; background-size: 100% 100%; background-repeat: no-repeat; }
input.gui-object, textarea.gui-object { border-radius: 0; outline: none; }
.gui-text { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; }
.play-banner { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: rgb(20 26 32 / .78); color: #fff; padding: 5px 14px; border-radius: 999px; font-size: 12px; display: flex; align-items: center; gap: 6px; pointer-events: none; }
.play-banner kbd { color: #cfd8e0; }
.play-dot { width: 8px; height: 8px; border-radius: 50%; background: #56d364; }
.viewport-status { position: absolute; left: 10px; bottom: 8px; margin: 0; padding: 3px 8px; border-radius: 4px; background: rgb(20 26 32 / .72); color: #fff; font-size: 12px; pointer-events: none; }
.viewport-status:empty { display: none; }
.viewport-help { position: absolute; right: 10px; top: 10px; background: rgb(20 26 32 / .72); color: #eef2f5; border-radius: 6px; font-size: 12px; max-width: 280px; }
.viewport-help summary { padding: 4px 10px; cursor: pointer; }
.viewport-help ul { margin: 0; padding: 0 12px 8px 26px; }
.viewport-help li { margin: 3px 0; }
.is-playing .viewport-help { display: none; }
.is-playing .st-toolbox, .is-playing .st-right { opacity: .55; }

/* Toolbox */
.toolbox-controls { display: flex; gap: 4px; padding: 4px; flex: none; }
.toolbox-controls select, .toolbox-controls input { min-width: 0; padding: 3px 5px; border: 1px solid var(--line); border-radius: 3px; background: var(--panel-2); }
.toolbox-controls input { flex: 1; }
.toolbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 4px; padding: 4px; overflow-y: auto; align-content: start; flex: 1; }
.toolbox-item { display: flex; flex-direction: column; align-items: center; gap: 3px; border: 1px solid var(--line-soft); border-radius: 5px; background: var(--panel-2); padding: 4px 2px 5px; }
.toolbox-item:hover { border-color: var(--accent); background: var(--hover); }
.toolbox-image { width: 64px; height: 64px; display: grid; place-items: center; }
.toolbox-image img { width: 64px; height: 64px; object-fit: contain; }
.toolbox-image .class-icon svg { width: 34px; height: 34px; }
.toolbox-name { font-size: 11px; text-align: center; line-height: 1.2; }
.class-icon { display: inline-grid; place-items: center; flex: none; }

/* Explorer */
.explorer-tree { flex: 1; overflow: auto; padding: 2px 0; }
.tree-row { display: flex; align-items: center; gap: 3px; height: 21px; padding-left: calc(var(--depth, 0) * 14px + 2px); padding-right: 6px; white-space: nowrap; cursor: default; user-select: none; }
.tree-row:hover { background: var(--hover); }
.tree-row[aria-selected="true"] { background: var(--select); }
.tree-row:focus { outline: 1px dotted var(--accent); outline-offset: -1px; }
.tree-row.is-disabled .tree-name { color: var(--muted); font-style: italic; }
.tree-row.is-service .tree-name { font-weight: 500; }
.tree-row.is-drop-target { box-shadow: inset 0 0 0 2px var(--accent); }
.tree-row.is-drop-invalid { box-shadow: inset 0 0 0 2px var(--danger); }
.tree-toggle { width: 12px; flex: none; color: var(--muted); font-size: 10px; text-align: center; cursor: pointer; }
.tree-name { overflow: hidden; text-overflow: ellipsis; }
.tree-rename { font: inherit; padding: 0 3px; height: 19px; border: 1px solid var(--accent); min-width: 80px; background: var(--panel-2); }
.tree-more { color: var(--muted); font-style: italic; padding-left: calc(var(--depth, 0) * 14px + 18px); height: 20px; }

/* Properties */
.properties-body { flex: 1; overflow-y: auto; }
.props-heading { padding: 5px 8px; font-weight: 600; font-size: 12px; border-bottom: 1px solid var(--line-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.props-group summary { padding: 3px 6px; background: var(--bg); font-weight: 600; font-size: 12px; cursor: pointer; border-bottom: 1px solid var(--line-soft); }
.prop-row { display: grid; grid-template-columns: minmax(80px, 42%) minmax(0, 1fr); align-items: center; min-height: 23px; border-bottom: 1px solid var(--line-soft); }
.prop-row label { padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.prop-row input:not([type="checkbox"]):not([type="color"]), .prop-row select, .prop-row textarea { width: 100%; min-width: 0; border: 0; border-left: 1px solid var(--line-soft); background: transparent; padding: 2px 6px; height: 22px; font-size: 12px; }
.prop-row textarea { height: auto; resize: vertical; font-family: inherit; }
.prop-row input:focus, .prop-row select:focus, .prop-row textarea:focus { background: var(--panel-2); outline: 1px solid var(--accent); outline-offset: -1px; }
.prop-row input[type="checkbox"] { justify-self: start; margin: 0 8px; }
.prop-row input:disabled, .prop-row select:disabled { color: var(--muted); }
.prop-static { padding: 0 8px; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 1px solid var(--line-soft); height: 100%; display: flex; align-items: center; }
.prop-color { display: flex; align-items: center; min-width: 0; border-left: 1px solid var(--line-soft); padding-left: 4px; }
.prop-color input[type="color"] { width: 22px; height: 16px; padding: 0; border: 1px solid var(--line); flex: none; }
.prop-color input:not([type="color"]) { border-left: 0 !important; }
.prop-button { margin: 1px 6px; border: 1px solid var(--line); background: var(--panel-2); border-radius: 3px; font-size: 12px; padding: 1px 8px; justify-self: start; }

/* Output */
.command-bar { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--border, #3a4756); padding: 3px 8px; background: var(--panel, #1f2730); }
.command-prompt { color: var(--accent, #59b0ff); font-weight: 700; }
.command-bar input { flex: 1; border: 0; outline: 0; background: transparent; color: inherit; font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.output-log { flex: 1; overflow-y: auto; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 3px 8px; background: var(--panel-2); user-select: text; }
.output-line { display: flex; gap: 8px; }
.output-line time { color: var(--muted); flex: none; }
.output-line.is-warn span { color: var(--warn); }
.output-line.is-error span { color: var(--danger); }

/* Script editor */
.script-editor { position: absolute; inset: 0; display: grid; grid-template-rows: 26px minmax(0, 1fr); background: var(--code-bg); }
.script-toolbar { display: flex; align-items: center; gap: 12px; padding: 0 10px; border-bottom: 1px solid var(--line); background: var(--panel-2); min-width: 0; }
.script-title { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.script-status { margin-left: auto; font-size: 12px; color: var(--ok); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.script-status.has-problem { color: var(--danger); }
.code-body { display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 0; font: 13px/20px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 4; }
.code-gutter { background: var(--gutter); color: var(--muted); text-align: right; padding: 8px 8px 8px 12px; overflow: hidden; user-select: none; min-width: 44px; }
.code-gutter .has-problem { color: #fff; background: var(--danger); border-radius: 3px; padding: 0 3px; }
.code-layers { position: relative; min-width: 0; min-height: 0; }
.code-highlight, .code-input { position: absolute; inset: 0; margin: 0; padding: 8px 12px; border: 0; font: inherit; tab-size: 4; white-space: pre; overflow: auto; }
.code-highlight { color: var(--code-text); pointer-events: none; overflow: hidden; }
.code-input { background: transparent; color: transparent; caret-color: var(--code-text); resize: none; outline: none; }
.code-input::selection { background: rgb(61 155 255 / .3); color: transparent; }
.lua-keyword { color: var(--lua-keyword); font-weight: 600; }
.lua-global { color: var(--lua-global); }
.lua-string { color: var(--lua-string); }
.lua-number { color: var(--lua-number); }
.lua-comment { color: var(--lua-comment); font-style: italic; }
.lua-error { color: var(--lua-error); text-decoration: wavy underline; }

/* Status bar */
.st-statusbar { display: flex; gap: 18px; align-items: center; padding: 0 10px; background: var(--panel-2); border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; min-width: 0; }
.st-statusbar span { overflow: hidden; text-overflow: ellipsis; }
#status-count { margin-left: auto; }

/* Menus and dialogs */
.context-menu { position: fixed; z-index: 70; min-width: 210px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 24px rgb(0 0 0 / .2); padding: 4px; }
.context-menu hr { border: 0; border-top: 1px solid var(--line-soft); margin: 3px 0; }
.st-dialog { border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--text); padding: 16px; width: min(420px, calc(100vw - 32px)); box-shadow: 0 16px 40px rgb(0 0 0 / .3); }
.st-dialog::backdrop { background: rgb(10 14 18 / .45); }
.st-dialog h2 { margin: 0 0 8px; font-size: 16px; }
.st-dialog label { display: block; margin: 6px 0 4px; }
.st-dialog input { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
.dialog-note { color: var(--muted); margin: 0 0 8px; font-size: 12px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.dialog-actions button { border: 1px solid var(--line); background: var(--panel); border-radius: 4px; padding: 5px 14px; }
.dialog-actions .is-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.publish-games { border: 1px solid var(--line-soft); border-radius: 4px; margin: 0 0 8px; padding: 4px 8px 6px; max-height: 40vh; overflow-y: auto; }
.publish-games legend { font-size: 12px; color: var(--muted); padding: 0 4px; }
.publish-option { display: flex !important; align-items: center; gap: 8px; margin: 2px 0 !important; padding: 4px 2px; cursor: pointer; }
.st-dialog select { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
.insert-list { max-height: 50vh; overflow-y: auto; margin-top: 8px; border: 1px solid var(--line-soft); border-radius: 4px; }
.insert-category { padding: 4px 8px; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--bg); text-transform: uppercase; letter-spacing: .4px; }
.insert-option { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 4px 10px; text-align: left; }
.insert-option:hover:not(:disabled), .insert-option:focus { background: var(--accent-soft); outline: none; }

/* Start page */
.start-page { position: fixed; inset: 0; z-index: 40; background: var(--bg); overflow-y: auto; }
.start-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 100%; }
.start-nav { background: var(--panel-2); border-right: 1px solid var(--line); padding: 18px 14px; display: flex; flex-direction: column; gap: 14px; }
.start-nav .st-logo { font-size: 16px; }
.start-nav nav { display: flex; flex-direction: column; gap: 2px; }
.start-nav nav a { color: var(--text); text-decoration: none; padding: 6px 10px; border-radius: 4px; }
.start-nav nav a:hover { background: var(--hover); }
.start-open { border: 1px solid var(--accent); color: var(--accent-strong); background: none; border-radius: 5px; padding: 7px 10px; }
.start-open:hover { background: var(--accent-soft); }
.start-open.is-resume { background: var(--accent); color: #fff; }
.start-open.is-resume:hover { background: var(--accent-strong); }
.start-back { margin-top: auto; color: var(--muted); font-size: 12px; }
.start-main { padding: 22px 30px 40px; max-width: 1180px; }
.start-main h2 { font-size: 20px; margin: 18px 0 4px; }
.start-lead { color: var(--muted); margin: 0 0 12px; }
.start-status { color: var(--danger); margin: 0; min-height: 1em; }
.start-status:empty { display: none; }
.template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.template-card { display: flex; flex-direction: column; gap: 4px; text-align: left; border: 1px solid var(--line); background: var(--panel-2); border-radius: 8px; padding: 0 0 10px; overflow: hidden; }
.template-card:hover, .template-card:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.template-image { aspect-ratio: 16 / 9; background: linear-gradient(180deg, #9ecbf0, #cfe3f2); display: block; }
.template-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.template-card strong { padding: 4px 10px 0; font-size: 14px; }
.template-card span { padding: 0 10px; color: var(--muted); font-size: 12px; }
.draft-list { display: flex; flex-direction: column; gap: 6px; max-width: 720px; }
.draft-row { display: flex; align-items: stretch; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.draft-open { flex: 1; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; border: 0; background: none; padding: 8px 12px; text-align: left; min-width: 0; }
.draft-open:hover { background: var(--hover); }
.draft-open span { color: var(--muted); font-size: 12px; }
.draft-delete { border: 0; border-left: 1px solid var(--line-soft); background: none; color: var(--danger); padding: 0 14px; }
.draft-delete:hover { background: var(--hover); }
.start-empty { color: var(--muted); }

@media (max-width: 760px) {
  .st-main { --right-width: 220px; }
  .st-account, .st-save-state, .st-team { display: none; }
  .start-shell { grid-template-columns: 1fr; }
  .start-nav { border-right: 0; border-bottom: 1px solid var(--line); }
  .start-main { padding: 14px 16px 30px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

.import-lines { margin: 0 0 12px; padding: 0 0 0 18px; max-height: 50vh; overflow: auto; font-size: 13px; line-height: 1.45; }
.import-lines li { margin: 0 0 6px; }
.import-progress { margin: 8px 0 0; }
.import-bar { height: 10px; border-radius: 5px; background: rgba(128, 128, 128, .3); overflow: hidden; }
.import-bar-fill { height: 100%; width: 0; background: #2f8cff; transition: width .15s linear; }
.import-eta { margin: 4px 0 0; font-size: 12px; opacity: .8; }
.start-open small { opacity: 0.7; font-weight: normal; }
.community-toolbox { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }.community-toolbox>h3,.community-toolbox>p,.community-toolbox>a { grid-column: 1 / -1; margin: 2px 0; font-size: 11px; }.community-toolbox>a { color: #68b9ff; margin-bottom: 8px; }.community-asset { min-height: 74px; text-align: left; padding: 9px; }.community-asset strong,.community-asset small { display: block; overflow-wrap: anywhere; }.community-asset small { font-size: 10px; opacity: .7; margin-top: 6px; }
.roblox-import-options { margin: 10px 0 22px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; }
.roblox-import-options summary { cursor: pointer; font-weight: 600; }
.roblox-import-options p { font-size: 13px; line-height: 1.5; }
.roblox-import-options label { display: block; margin-bottom: 6px; }
.roblox-import-options textarea { width: 100%; box-sizing: border-box; padding: 10px; font: 12px/1.5 monospace; color: inherit; background: transparent; border: 1px solid var(--line); border-radius: 4px; resize: vertical; }
.asset-library { position: absolute; inset: 0; overflow: auto; padding: 22px; background: var(--bg, #20252b); color: var(--text, #eee); }
.asset-heading,.asset-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.asset-heading h2 { margin: 0; font-size: 24px; }.asset-heading p,.asset-hint { opacity: .75; font-size: 13px; line-height: 1.5; }
.asset-library button,.asset-library input { font: inherit; }.asset-library button { padding: 7px 11px; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: inherit; cursor: pointer; }.asset-library button:hover { background: #3890ff24; }.asset-library button:disabled { opacity: .5; cursor: wait; }
.asset-kind-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0; }.asset-kind-tabs [aria-selected="true"] { background: #2379ce; color: white; border-color: #56a9ff; }
.asset-import-box,.asset-preview,.asset-scan { padding: 16px; border: 1px solid var(--line); border-radius: 7px; }.asset-import-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; }.asset-import-fields label { display: grid; gap: 5px; font-size: 13px; }.asset-library input:not([type="checkbox"]):not([type="file"]) { min-width: 0; padding: 8px; color: inherit; background: transparent; border: 1px solid var(--line); border-radius: 4px; }.asset-check { display: block; margin: 10px 0; font-size: 13px; }.asset-status { margin-bottom: 0; font-size: 13px; line-height: 1.5; color: #78baff; }
.asset-workspace { display: grid; grid-template-columns: minmax(0, 3fr) minmax(250px, 2fr); gap: 20px; margin-top: 22px; }.asset-workspace h3 { margin: 6px 0; }.asset-library-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(165px,1fr)); gap: 12px; }.asset-card { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 6px; }.asset-card img,.asset-card-icon { width: 100%; height: 95px; object-fit: contain; background: #80808018; border-radius: 4px; }.asset-card-icon { display: grid; place-items: center; font-size: 42px; color: #78baff; }.asset-card strong,.asset-card small { display: block; overflow-wrap: anywhere; margin-top: 8px; }.asset-card small { opacity: .7; font-size: 11px; }.asset-card-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }.asset-card-actions button { font-size: 12px; padding: 5px 7px; }.asset-preview { min-height: 200px; }.asset-preview canvas,.asset-preview img { width: 100%; max-height: 300px; object-fit: contain; }.asset-preview audio { width: 100%; }.asset-scan { margin-top: 14px; }.asset-scan ul { padding-left: 18px; max-height: 260px; overflow: auto; }.asset-scan li { margin: 9px 0; font-size: 12px; overflow-wrap: anywhere; }.asset-scan li button { margin-left: 8px; }.asset-import-results { color: #ffb596; }
@media(max-width:1100px) { .asset-workspace { grid-template-columns: 1fr; }.asset-import-fields { grid-template-columns: 1fr; }.asset-library { padding: 14px; } }
.roblox-toolbox { margin: 16px 0 24px; background: #80808008; }.roblox-toolbox h3 { margin-top: 0; }.roblox-toolbox form input { flex: 1; min-width: 150px; }.roblox-toolbox .asset-library-list { margin-top: 16px; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); }.roblox-score { font-size: 14px; font-weight: 700; color: #78baff; }.roblox-reasons { padding-left: 16px; font-size: 12px; line-height: 1.6; opacity: .85; }.roblox-toolbox .asset-card a { display: inline-block; margin-top: 10px; font-size: 12px; }
.roblox-model-preview { min-height: 150px; display: grid; place-items: center; background: #80808012; border-radius: 5px; overflow: hidden; }.roblox-model-preview img { width: 150px; height: 150px; object-fit: contain; }.roblox-model-preview span { font-size: 12px; opacity: .65; padding: 16px; text-align: center; }