:root {
    --bg: #23262b;
    --panel: #2c3036;
    --panel-2: #353a42;
    --panel-3: #3d434d;
    --line: #414852;
    --line-strong: #56606d;
    --text: #f1f3f5;
    --muted: #abb3be;
    --dim: #7d8794;
    --red: #ff6b7a;
    --orange: #ff9f66;
    --yellow: #ffd166;
    --green: #56e39f;
    --cyan: #56cfe1;
    --blue: #68a7ff;
    --canvas: #292c32;
    --surface-hover: #454c57;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: Inter, "Segoe UI", system-ui, sans-serif;
}

.app {
    grid-template-columns: 220px minmax(420px, 1fr) 252px;
    grid-template-rows: 54px minmax(0, 1fr) 32px;
    gap: 0;
    background: var(--bg);
}

.header,
.left-panel,
.right-panel,
.footer {
    background: var(--panel);
}

.header {
    padding: 0 14px;
    gap: 12px;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 2px 8px rgba(17, 19, 22, .18);
}

.header h1 {
    color: var(--green);
    font: 900 15px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: 1px;
}

.header .subtitle {
    color: var(--dim);
    font-size: 10px;
}

.project-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.header-action,
.info-toggle {
    min-height: 32px;
    padding: 5px 10px;
    color: var(--muted);
    background: var(--panel-2);
    border: 1px solid transparent;
    border-radius: 4px;
    font: 750 9px/1 "Segoe UI", system-ui, sans-serif;
    text-transform: uppercase;
    cursor: pointer;
}

.header-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.header-action i { font-size: 16px; }
.header-action.primary { color: #15271f; background: var(--green); }
.header-action:hover,
.info-toggle:hover { color: var(--text); background: var(--surface-hover); border-color: var(--line-strong); }
.header-action.primary:hover { color: #101b16; background: #76eab5; border-color: transparent; }
.header-action:disabled { opacity: .36; cursor: not-allowed; }
.info-toggle { width: 32px; margin-left: 0; padding: 0; justify-content: center; color: var(--cyan); }

.left-panel,
.right-panel {
    scrollbar-color: var(--line-strong) transparent;
    scrollbar-width: thin;
}

.left-panel {
    padding: 14px 12px;
    border-right: 1px solid var(--line);
}

.right-panel {
    padding: 12px;
    border-left: 1px solid var(--line);
}

.panel-section {
    margin: 0 0 14px;
    padding: 0 0 14px;
    border-bottom: 1px solid #3a4048;
}

.panel-section:last-child { border-bottom: 0; }

.panel-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 9px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .7px;
}

.panel-label i { color: var(--orange); font-size: 14px; }
.source-panel .panel-label i { color: var(--green); }

.source-import {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 56px;
    padding: 9px;
    color: var(--muted);
    background: var(--panel-2);
    border: 1px solid transparent;
    border-radius: 5px;
    text-align: left;
    cursor: pointer;
}

.source-import:hover { background: var(--surface-hover); border-color: var(--green); }
.source-import > i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #173126;
    background: var(--green);
    border-radius: 4px;
    font-size: 20px;
}
.source-import strong,
.source-import small { display: block; }
.source-import strong { color: var(--text); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.source-import small { margin-top: 4px; color: var(--dim); font-size: 8px; line-height: 1.25; }

.grid-size-row { gap: 5px; }
.grid-size-btn,
.pixel-size-btn,
.view-btn,
.toggle-btn,
.tool-action,
.context-btn,
.gizmo-mode,
.tool-jump {
    min-height: 30px;
    color: var(--muted);
    background: var(--panel-2);
    border: 1px solid transparent;
    border-radius: 3px;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-weight: 700;
}

.grid-size-btn:hover,
.pixel-size-btn:hover,
.view-btn:hover,
.toggle-btn:hover,
.tool-action:hover,
.context-btn:hover,
.gizmo-mode:hover,
.tool-jump:hover {
    color: var(--text);
    background: var(--surface-hover);
    border-color: var(--line-strong);
}

.grid-size-btn.active {
    color: #13251d;
    background: var(--green);
    border-color: var(--green);
}

.pixel-size-btn.active {
    color: #261419;
    background: var(--red);
    border-color: var(--red);
}

.view-btn.active {
    color: #101923;
    background: var(--blue);
    border-color: var(--blue);
}

.toggle-btn.active {
    color: #13251d;
    background: var(--green);
    border-color: var(--green);
}

.color-row { gap: 9px; color: var(--muted); }
.color-input {
    width: 38px;
    height: 38px;
    padding: 3px;
    background: var(--panel-3);
    border: 1px solid var(--line-strong);
    border-radius: 5px;
}

.primary-mode {
    min-height: 68px;
    grid-template-columns: 30px 1fr;
    gap: 9px;
    padding: 10px;
    background: #33413c;
    border: 1px solid #496057;
    border-radius: 5px;
    box-shadow: none;
}

.primary-mode::after { display: none; }
.primary-mode i { color: var(--green); font-size: 22px; }
.primary-mode strong { color: var(--green); font: 800 11px/1.1 "Segoe UI", system-ui, sans-serif; }
.primary-mode span { max-width: none; margin-top: 4px; color: #c0c8c3; font-size: 8px; line-height: 1.35; }

.advanced-tools {
    margin-top: 9px;
    overflow: hidden;
    background: var(--panel-2);
    border: 1px solid transparent;
    border-radius: 5px;
}

.advanced-tools[open] { border-color: var(--line-strong); }
.advanced-tools summary {
    min-height: 38px;
    padding: 9px 10px;
    color: var(--cyan);
    border-left: 0;
    font-size: 9px;
}
.advanced-tools summary:hover { background: var(--surface-hover); }
.advanced-grid { gap: 5px; padding: 5px 8px 8px; }
.tool-jump { justify-content: flex-start; }
.edit-help { margin-top: 9px; color: var(--dim); font-size: 8px; line-height: 1.45; }

#clear-btn {
    color: #d9a0a7;
    background: #39353b;
    border: 1px solid transparent;
    border-radius: 4px;
}
#clear-btn:hover { color: #fff; background: #50363e; border-color: var(--red); }

.viewport { background: var(--canvas); }
.viewport-info { color: #89929e; }

.context-toolbar {
    margin-left: 0;
    gap: 4px;
    max-width: min(710px, calc(100vw - 450px));
    padding: 4px;
    background: #343941;
    border: 1px solid var(--line-strong);
    border-left: 0;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(17, 19, 22, .24);
}
.context-title { padding: 0 6px; color: var(--green); }
.transform-gizmo { padding: 2px; background: #2d3239; border: 0; border-radius: 3px; }
.gizmo-mode { min-height: 26px; padding: 4px 8px; }
.gizmo-mode.active { color: #14231c; background: var(--green); border-color: var(--green); }
.context-btn { min-width: 0; min-height: 26px; padding: 4px 8px; }
.context-btn.copy { color: var(--cyan); }
.context-btn.cut { color: var(--red); }
.context-btn.fill { color: var(--yellow); }
.context-btn.clear { color: var(--orange); }
.context-btn.icon-only { width: 28px; padding: 0; }

.object-header { margin-bottom: 8px; }
.object-count {
    color: #13251d;
    background: var(--green);
    border: 0;
    border-radius: 3px;
}
.object-toolbar { gap: 6px; }
.object-toolbar .tool-action { color: var(--green); }
.object-toolbar .danger { color: var(--red); }
.object-list { gap: 6px; }
.object-row {
    min-height: 48px;
    padding: 8px;
    color: var(--muted);
    background: var(--panel-2);
    border: 1px solid transparent;
    border-left: 4px solid var(--cyan);
    border-radius: 4px;
}
.object-row strong { color: var(--text); }
.object-row small { color: var(--dim); }
.object-row.active { background: #36463f; border-color: var(--green); }
.object-empty { padding: 10px; color: var(--dim); background: #30343a; border: 1px dashed var(--line-strong); border-radius: 4px; }

.view-grid { gap: 5px; }
.view-btn { font-size: 8px; }
.toggle-row { gap: 5px; }

.inspector-details {
    overflow: hidden;
    background: var(--panel-2);
    border: 1px solid transparent;
    border-radius: 4px;
}
.inspector-details[open] { border-color: var(--line-strong); }
.inspector-details summary { color: var(--cyan); }
.stat-box { background: var(--panel-3); border: 0; border-left: 3px solid var(--cyan); border-radius: 3px; }

.footer {
    padding: 0 14px;
    color: var(--dim);
    border-top: 1px solid var(--line);
}
.footer kbd { color: #c3cad3; background: var(--panel-3); border-radius: 3px; }

.modal-backdrop { background: rgba(28, 30, 35, .78); backdrop-filter: blur(2px); }
.modal-card {
    background: var(--panel);
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    box-shadow: 0 24px 70px rgba(10, 12, 15, .42);
}
.modal-head,
.modal-actions { border-color: var(--line); }
.modal-head strong { color: var(--green); }
.icon-btn { color: var(--muted); background: var(--panel-2); border: 1px solid transparent; border-radius: 3px; }
.icon-btn:hover { color: var(--text); background: var(--surface-hover); border-color: var(--line-strong); }
.modal-choice,
.import-kind-btn {
    color: var(--text);
    background: var(--panel-2);
    border: 1px solid transparent;
    border-radius: 4px;
}
.modal-choice:hover,
.import-kind-btn:hover { background: var(--surface-hover); border-color: var(--line-strong); }
.modal-choice i { color: var(--green); }
.import-kind-btn.active { color: #15271f; background: var(--green); border-color: var(--green); }
.import-card { width: min(520px, calc(100vw - 28px)); }
.import-kind { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.import-kind-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; font-weight: 800; text-transform: uppercase; cursor: pointer; }
.import-kind-btn i { font-size: 18px; }
.file-input-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.texture-import { display: grid; gap: 8px; }
.projection-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.texture-import .upload-zone {
    min-height: 68px;
    margin: 0;
    padding: 9px;
    align-items: center;
    background: #30343b;
    border: 1px dashed var(--line-strong);
    border-radius: 4px;
}
.texture-import .upload-zone:hover { background: #39423f; border-color: var(--green); }
.texture-import .upload-zone.has-image { background: #34443d; border-color: var(--green); }
.import-submit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.import-submit-row .tool-action { min-height: 38px; }

@media (max-width: 900px) {
    .app {
        grid-template-columns: 174px minmax(260px, 1fr);
        grid-template-rows: 50px minmax(250px, 1fr) 194px 32px;
    }
    .header { grid-row: 1; }
    .header .subtitle { display: none; }
    .header-action span { display: none; }
    .context-title { display: none; }
    .left-panel { grid-column: 1; grid-row: 2; padding: 10px; }
    .viewport { grid-column: 2; grid-row: 2; }
    .right-panel {
        display: grid;
        grid-column: 1 / -1;
        grid-row: 3;
        grid-template-columns: minmax(210px, 1fr) minmax(210px, 1fr);
        align-items: start;
        gap: 10px;
        overflow-y: auto;
        border-top: 1px solid var(--line);
        border-left: 0;
    }
    .right-panel > .panel-section { margin: 0; padding: 0; border: 0; }
    .right-panel > .panel-section:first-child { grid-row: span 2; }
    .right-panel > .inspector-details { display: none; }
    .footer { grid-row: 4; }
    .primary-mode span { font-size: 8px; }
    .advanced-tools summary { font-size: 8px; }
    .context-toolbar { max-width: calc(100vw - 275px); }
}

@media (max-width: 560px) {
    .app { grid-template-columns: 174px minmax(220px, 1fr); }
    .header { padding: 0 9px; }
    .header h1 { font-size: 13px; }
    .project-actions { display: none; }
    .context-toolbar { margin-left: auto; max-width: calc(100vw - 84px); overflow-x: auto; }
    .context-btn span { display: none; }
    .context-btn { width: 28px; padding: 0; }
    .gizmo-mode { padding: 3px 6px; }
    .left-panel .panel-label { font-size: 8px; }
    .source-import { grid-template-columns: 29px 1fr; padding: 7px; }
    .source-import > i { width: 29px; height: 29px; font-size: 17px; }
    .source-import strong { font-size: 9px; }
    .source-import small { font-size: 7px; }
    .primary-mode { grid-template-columns: 22px 1fr; min-height: 62px; padding: 8px; }
    .primary-mode i { font-size: 18px; }
    .primary-mode strong { font-size: 9px; }
    .edit-help { display: none; }
    .right-panel { grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; }
    .object-toolbar .tool-action { min-height: 28px; font-size: 8px; }
    .object-row { min-height: 36px; padding: 5px; }
    .object-row small { display: none; }
    .right-panel .view-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 4px; margin-bottom: 5px; }
    .view-btn { min-height: 21px; padding: 2px; font-size: 7px; }
    .footer { gap: 8px; padding: 0 8px; overflow: hidden; white-space: nowrap; }
}