:root {
  color-scheme: dark;
  --bg: #0b1213;
  --panel: #111b1c;
  --panel-2: #172526;
  --line: #2a3d3c;
  --muted: #91a5a1;
  --text: #e5efec;
  --accent: #55c7d0;
  --accent-strong: #218f98;
  --green: #42b99f;
  --red: #ed8e8e;
  --mono: ui-monospace, 'Cascadia Code', 'SFMono-Regular', Consolas, monospace;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: 14px var(--sans); }
button, input, textarea { font: inherit; }
button:focus-visible, input:focus-visible, label:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

.topbar {
  position: sticky; top: 0; z-index: 20; height: 62px; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  background: #0d1617; border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--text); text-decoration: none; }
.brand-mark { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 5px; background: #36aeb3; color: #071718; font-size: 19px; font-weight: 800; }
.brand strong { font-size: 12px; letter-spacing: .14em; }
.version-tag { color: #94b3af; border: 1px solid #304745; border-radius: 4px; padding: 5px 8px; font: 9px var(--mono); letter-spacing: .08em; }
.menu-toggle { display: none; }
.sidebar-backdrop { display: none; }

.app-shell { display: grid; grid-template-columns: 276px minmax(0, 1fr); min-height: calc(100vh - 62px); }
.sidebar { display: flex; flex-direction: column; gap: 23px; min-width: 0; padding: 23px 17px 18px; background: #101a1b; border-right: 1px solid var(--line); }
.side-section { display: flex; flex-direction: column; gap: 11px; }
.section-title { color: #82aaa6; font: 9px var(--mono); letter-spacing: .14em; }
.file-drop {
  position: relative; min-height: 83px; padding: 12px; display: flex; flex-direction: column;
  justify-content: center; align-items: center; gap: 5px; text-align: center; cursor: pointer;
  background: #142122; border: 1px dashed #42605c; border-radius: 6px; transition: .15s;
}
.file-drop:hover { background: #192b2b; border-color: var(--accent); }
.file-drop strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.upload-symbol { color: var(--accent); font-size: 21px; line-height: 1; }
.file-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.field-group { display: flex; flex-direction: column; gap: 6px; }
.field-group label { display: flex; justify-content: space-between; gap: 8px; color: #bfceca; font-size: 10px; }
.field-group label span { color: #7b9691; font: 8px var(--mono); }
.field-group input { width: 100%; padding: 9px 10px; color: var(--text); background: #0d1718; border: 1px solid #344a47; border-radius: 4px; }

.button { min-height: 35px; padding: 8px 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: 5px; color: var(--text); font-size: 10px; font-weight: 700; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s; }
.button:hover:not(:disabled) { filter: brightness(1.08); }
.button:disabled { opacity: .38; cursor: not-allowed; }
.button-primary { color: #f4ffff; background: #218f96; border-color: #218f96; }
.button-primary:hover:not(:disabled) { background: #27a3a6; border-color: #27a3a6; }
.button-secondary { color: #9fdbdc; background: #162829; border-color: #376260; }
.button-secondary:hover:not(:disabled) { background: #1b3535; }
.button-quiet { color: #c3d2ce; background: #151f20; border-color: #344543; }
.button-quiet:hover:not(:disabled) { background: #1c2b2b; }
.button-small { min-height: 29px; padding: 5px 9px; font-size: 9px; }
.full-width { width: 100%; }

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.stat { min-width: 0; padding: 8px 9px; display: flex; flex-direction: column; gap: 5px; background: #142021; border: 1px solid #293e3b; border-radius: 5px; }
.stat span { color: #819994; font: 8px var(--mono); letter-spacing: .09em; }
.stat strong { color: #d0ded9; font: 13px var(--mono); }
.technical-details { margin-top: auto; color: #b8c9c4; border-top: 1px solid #293e3b; padding-top: 12px; }
.technical-details summary { cursor: pointer; color: #9bb0ab; font-size: 10px; user-select: none; }
.technical-block { padding-top: 13px; }
.technical-label { margin: 10px 0 7px; color: #7f9c97; font: 8px var(--mono); letter-spacing: .1em; }
.extension-pills { display: flex; flex-wrap: wrap; gap: 5px; min-height: 18px; }
.muted { color: #7c9691; font-size: 9px; }
.pill { padding: 4px 7px; color: #8fd8c3; background: #17312d; border: 1px solid #2d5b50; border-radius: 4px; font: 8px var(--mono); }
.pill.warn { color: #e2bb70; background: #332a19; border-color: #65502b; }
.log-panel { max-height: 145px; min-height: 70px; padding: 9px; overflow: auto; color: #7fca9a; background: #0a1415; border: 1px solid #263a37; border-radius: 5px; white-space: pre-wrap; word-break: break-word; font: 9px/1.6 var(--mono); }
.log-warn { color: #e8b66e; }.log-error { color: #ef8585; }.log-info { color: #75cbd0; }.log-ok { color: #79cdb2; }

.main-content { width: 100%; max-width: 1500px; margin: 0 auto; padding: 25px clamp(16px, 3vw, 38px) 30px; }
.page-heading { min-height: 36px; margin-bottom: 15px; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.page-heading h1 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.035em; }
.app-status { padding: 5px 8px; color: #9ab4af; background: #142021; border: 1px solid #304643; border-radius: 4px; font: 8px var(--mono); letter-spacing: .08em; }
.preview-card, .export-card { overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: none; }
.card-topline { min-height: 48px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.card-topline strong { color: #d2e1dc; font-size: 11px; }
.viewport-hints { color: #819893; font: 9px var(--mono); }
.viewer { position: relative; height: min(52vh, 560px); min-height: 320px; overflow: hidden; background: #0c1516; }
.viewer canvas { position: relative; z-index: 0; display: block; width: 100% !important; height: 100% !important; }
.empty-viewer { position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #819994; pointer-events: none; background: #0c1516; }
.empty-cube { color: #377f7e; font-size: 46px; line-height: 1; }
.empty-viewer strong { color: #b7c9c4; font-size: 12px; }
.empty-viewer span { color: #829a95; font-size: 10px; }
.viewer.has-model .empty-viewer { display: none; }
#mode-badge { position: absolute; z-index: 2; top: 12px; left: 13px; padding: 6px 8px; color: #9bd1d0; background: #0b1516e8; border: 1px solid #31514e; border-radius: 4px; font: 9px var(--mono); pointer-events: none; }

.export-card { margin-top: 15px; padding: 17px; }
.export-header { min-height: 25px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.export-header h2 { margin: 0; font-size: 15px; }
.lua-count { color: #819b96; font: 9px var(--mono); }
.lua-status { margin-top: 11px; padding: 8px 10px; color: #adbfba; background: #142122; border: 1px solid #2c4441; border-radius: 5px; font-size: 10px; }
.lua-status[data-type=success] { color: #8bd8c0; background: #132923; border-color: #2e5b4e; }
.lua-status[data-type=error] { color: #f0a0a0; background: #251717; border-color: #5a3333; }
.script-list { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.script-item { padding: 9px 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #142021; border: 1px solid #2d4240; border-radius: 5px; }
.script-item-info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.script-item-info strong { overflow-wrap: anywhere; color: #c8d9d3; font: 10px var(--mono); }
.script-item-info span { color: #819994; font-size: 9px; }
.script-item-actions { display: flex; flex-shrink: 0; gap: 6px; }
.preview-script-heading { margin: 14px 0 7px; }
.preview-script-heading strong { font-size: 10px; }
.script-preview { display: block; width: 100%; height: 175px; padding: 11px; resize: vertical; color: #a5d6c7; background: #0a1415; border: 1px solid #2b423e; border-radius: 5px; outline: none; font: 9px/1.6 var(--mono); }
.script-preview:focus { border-color: #55c7d0; }
.script-actions { margin-top: 8px; display: flex; justify-content: flex-end; gap: 7px; }

@media (max-width: 980px) {
  .app-shell { grid-template-columns: 250px minmax(0, 1fr); }
  .sidebar { padding: 19px 14px; }
}
@media (max-width: 700px) {
  .topbar { height: 57px; padding: 0 13px; justify-content: flex-start; gap: 10px; }
  .menu-toggle { width: 33px; height: 33px; display: grid; place-items: center; color: #c8d9d4; background: #142122; border: 1px solid #304744; border-radius: 5px; }
  .brand { gap: 8px; }.brand-mark { width: 30px; height: 30px; }
  .version-tag { margin-left: auto; }
  .app-shell { display: block; min-height: calc(100vh - 57px); }
  .sidebar { position: fixed; z-index: 15; top: 57px; bottom: 0; left: 0; width: min(300px, 88vw); overflow: auto; transform: translateX(-105%); transition: transform .2s ease; box-shadow: 8px 0 20px #0005; }
  body.sidebar-open { overflow: hidden; }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; z-index: 12; top: 57px; right: 0; bottom: 0; left: 0; display: block; padding: 0; border: 0; background: rgba(2, 10, 10, .52); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s ease; }
  body.sidebar-open .sidebar-backdrop { opacity: 1; visibility: visible; pointer-events: auto; }
  .menu-toggle { position: relative; z-index: 22; font-size: 19px; line-height: 1; }
  .main-content { padding: 17px 11px 24px; }
  .page-heading h1 { font-size: 19px; }
  .viewer { height: 47vh; min-height: 260px; }
  .export-card { padding: 13px; }
  .script-item { align-items: flex-start; flex-direction: column; }
  .script-item-actions { width: 100%; }.script-item-actions .button { flex: 1; }
  .script-actions .button { flex: 1; }
}

/* ── Theme switch ─────────────────────────────────────────────────────────── */
.header-actions { display: inline-flex; align-items: center; gap: 10px; }
.icon-button { width: 34px; height: 34px; display: inline-grid; place-items: center; padding: 0; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; cursor: pointer; }
.icon-button:hover { border-color: var(--accent); color: var(--accent); }
.theme-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon-moon { display: none; }
html[data-theme="light"] .theme-icon-sun { display: none; }
html[data-theme="light"] .theme-icon-moon { display: block; }

/* ── Light theme ──────────────────────────────────────────────────────────── */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f1f7f6;
  --panel: #ffffff;
  --panel-2: #eaf3f1;
  --line: #cfddda;
  --muted: #657d78;
  --text: #19332f;
  --accent: #168f98;
  --accent-strong: #087b83;
  --green: #158d78;
  --red: #ba4b4b;
}

html[data-theme="light"] body { background: var(--bg); color: var(--text); }
html[data-theme="light"] .topbar { background: #fbfefd; border-color: var(--line); }
html[data-theme="light"] .sidebar { background: #f7fbfa; border-color: var(--line); }
html[data-theme="light"] .brand-mark { background: #39b8bb; color: #073638; }
html[data-theme="light"] .version-tag { color: #527c77; border-color: #c8dcd7; }
html[data-theme="light"] .section-title { color: #397e77; }
html[data-theme="light"] .file-drop { background: #edf7f5; border-color: #9bbfba; }
html[data-theme="light"] .file-drop:hover { background: #e5f3f0; border-color: var(--accent); }
html[data-theme="light"] .field-group label { color: #38534e; }
html[data-theme="light"] .field-group label span { color: #718b85; }
html[data-theme="light"] .field-group input { color: var(--text); background: #fff; border-color: #bdcfca; }
html[data-theme="light"] .button-primary { color: #f5ffff; background: #168b91; border-color: #168b91; }
html[data-theme="light"] .button-primary:hover:not(:disabled) { background: #087a81; border-color: #087a81; }
html[data-theme="light"] .button-secondary { color: #176c6e; background: #e6f3f1; border-color: #b5d5cf; }
html[data-theme="light"] .button-secondary:hover:not(:disabled) { background: #d9eeea; }
html[data-theme="light"] .button-quiet { color: #385650; background: #f4f8f7; border-color: #cbdad6; }
html[data-theme="light"] .button-quiet:hover:not(:disabled) { background: #eaf2f0; }
html[data-theme="light"] .stat { background: #eef6f4; border-color: #d1e0dc; }
html[data-theme="light"] .stat span { color: #68817b; }
html[data-theme="light"] .stat strong { color: #26443e; }
html[data-theme="light"] .technical-details { color: #49645e; border-color: #d5e1de; }
html[data-theme="light"] .technical-details summary { color: #456e67; }
html[data-theme="light"] .technical-label { color: #688780; }
html[data-theme="light"] .muted { color: #758b85; }
html[data-theme="light"] .pill { color: #146e5d; background: #e4f3ed; border-color: #b9dbce; }
html[data-theme="light"] .pill.warn { color: #805b1b; background: #fbf3df; border-color: #e5d4a7; }
html[data-theme="light"] .log-panel { color: #28775b; background: #f5faf8; border-color: #d2e2dd; }
html[data-theme="light"] .log-warn { color: #94631b; }
html[data-theme="light"] .log-error { color: #b23e3e; }
html[data-theme="light"] .log-info { color: #187c88; }
html[data-theme="light"] .log-ok { color: #247b62; }
html[data-theme="light"] .app-status { color: #4c706a; background: #edf5f3; border-color: #ccded9; }
html[data-theme="light"] .preview-card,
html[data-theme="light"] .export-card { background: var(--panel); border-color: var(--line); }
html[data-theme="light"] .card-topline { border-color: var(--line); }
html[data-theme="light"] .card-topline strong { color: #294640; }
html[data-theme="light"] .viewport-hints { color: #6c8580; }
html[data-theme="light"] .viewer,
html[data-theme="light"] .empty-viewer { background: #e8f1f0; }
html[data-theme="light"] .empty-viewer { color: #64817b; }
html[data-theme="light"] .empty-cube { color: #3d9690; }
html[data-theme="light"] .empty-viewer strong { color: #345851; }
html[data-theme="light"] .empty-viewer span { color: #69827c; }
html[data-theme="light"] #mode-badge { color: #256d6d; background: #f5fbf9ed; border-color: #b6d3cd; }
html[data-theme="light"] .lua-count { color: #68827c; }
html[data-theme="light"] .lua-status { color: #49615b; background: #f0f6f4; border-color: #d0dfda; }
html[data-theme="light"] .lua-status[data-type="success"] { color: #176d58; background: #e7f4ed; border-color: #b7dac8; }
html[data-theme="light"] .lua-status[data-type="error"] { color: #a43c3c; background: #fbefef; border-color: #e8caca; }
html[data-theme="light"] .script-item { background: #f7faf9; border-color: #d4e1dd; }
html[data-theme="light"] .script-item-info strong { color: #28483f; }
html[data-theme="light"] .script-item-info span { color: #6b837d; }
html[data-theme="light"] .script-preview { color: #236d58; background: #f7fbfa; border-color: #cfdfda; }
html[data-theme="light"] .script-preview:focus { border-color: var(--accent); }
html[data-theme="light"] .menu-toggle { color: #31564f; background: #edf6f3; border-color: #c8dcd6; }

@media (max-width: 700px) {
  .header-actions { gap: 7px; margin-left: auto; }
  .theme-toggle { width: 32px; height: 32px; }
  .version-tag { margin-left: 0; }
  .viewer canvas { touch-action: none; }
}