/* ========================================
   JsonUI Maker — Studio redesign
   Web UI only. Preview internals stay functional.
   ======================================== */

@font-face {
    font-family: "Minecraftia";
    src: url("fonts/Minecraftia-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

:root {
    --bg-root: #090b10;
    --bg-shell: #10141c;
    --bg-panel: rgba(18, 23, 32, 0.9);
    --bg-panel-strong: rgba(24, 30, 42, 0.96);
    --bg-card: rgba(255, 255, 255, 0.04);
    --bg-card-hover: rgba(255, 255, 255, 0.07);
    --bg-input: rgba(7, 10, 16, 0.78);
    --bg-selected: rgba(59, 130, 246, 0.13);

    --border-color: rgba(148, 163, 184, 0.16);
    --border-strong: rgba(148, 163, 184, 0.28);
    --border-active: rgba(96, 165, 250, 0.72);

    --text-primary: #f8fafc;
    --text-secondary: #b6c2d9;
    --text-muted: #6f7c93;
    --text-accent: #93c5fd;

    --accent: #60a5fa;
    --accent-2: #93c5fd;
    --accent-3: #cbd5e1;
    --success: #38bdf8;
    --warning: #f59e0b;
    --danger: #fb7185;

    --preview-bg: #0b0f17;
    --preview-screen-bg: #242936;

    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 26px;

    --shadow-sm: 0 8px 18px rgba(0, 0, 0, 0.22);
    --shadow-md: 0 18px 45px rgba(0, 0, 0, 0.32);
    --shadow-glow: 0 0 0 1px rgba(96, 165, 250, 0.22), 0 16px 40px rgba(37, 99, 235, 0.12);

    --transition: 160ms ease;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 14px;
}

body {
    height: 100vh;
    overflow: hidden;
    color: var(--text-primary);
    font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    background:
        radial-gradient(circle at 16% 8%, rgba(96, 165, 250, 0.13), transparent 30%),
        radial-gradient(circle at 84% 6%, rgba(148, 163, 184, 0.10), transparent 28%),
        radial-gradient(circle at 50% 100%, rgba(30, 41, 59, 0.42), transparent 32%),
        var(--bg-root);
    display: flex;
    flex-direction: column;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    user-select: none;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
}

::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.28);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.42);
}

/* Header */
#app-header,
.app-shell-header {
    min-height: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(10, 15, 28, 0.76));
    backdrop-filter: blur(18px);
    position: relative;
    z-index: 20;
}

.brand-block {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 240px;
}

.brand-mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #08111f;
    font-size: 1.25rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 14px 34px rgba(56, 189, 248, 0.2);
}

.brand-block h1 {
    font-size: 1.2rem;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.brand-subtitle {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.header-command-strip {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.namespace-pill {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 265px;
    padding: 6px 8px 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.045);
}

.namespace-label {
    color: var(--text-muted);
}

.namespace-pill span {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

#namespace-input {
    width: 150px;
    height: 32px;
    color: var(--text-primary);
    background: rgba(2, 6, 23, 0.68);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0 12px;
    outline: none;
    font-family: Consolas, "SFMono-Regular", monospace;
    font-size: 0.86rem;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

#namespace-input:focus {
    border-color: var(--border-active);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.14);
    background: rgba(2, 6, 23, 0.92);
}

.user-section {
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-chip,
.plan-badge,
.plan-badge--local {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(96, 165, 250, 0.24);
    border-radius: 999px;
    color: #dbeafe;
    background: rgba(37, 99, 235, 0.12);
    font-size: 0.8rem;
    font-weight: 700;
}

.user-chip {
    color: var(--text-secondary);
    border-color: var(--border-color);
    background: rgba(255, 255, 255, 0.045);
}

/* Buttons */
.btn,
.btn-group-action,
.btn-grid-toggle,
.icon-button,
.el-layer-btn,
.el-delete {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.055);
    cursor: pointer;
    transition: transform var(--transition), border-color var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    padding: 8px 14px;
    font-weight: 700;
    font-size: 0.86rem;
    white-space: nowrap;
}

.btn:hover,
.btn-group-action:hover,
.btn-grid-toggle:hover,
.icon-button:hover {
    border-color: var(--border-strong);
    background: rgba(255, 255, 255, 0.09);
    transform: translateY(-1px);
}

.btn:active,
.btn-group-action:active,
.btn-grid-toggle:active,
.icon-button:active {
    transform: translateY(0) scale(0.98);
}

.btn-primary {
    border: none;
    color: #07111f;
    background: linear-gradient(135deg, var(--accent), #bfdbfe);
    box-shadow: var(--shadow-glow);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #bfdbfe, var(--accent));
    color: #07111f;
}

.btn-soft,
.btn-tool {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.045);
}

.btn-widget {
    width: 100%;
    justify-content: space-between;
    color: #dbeafe;
    border-color: rgba(56, 189, 248, 0.24);
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.11), rgba(167, 139, 250, 0.09));
}

.btn-danger,
.danger {
    color: var(--danger);
}

.btn-danger:hover,
.danger:hover {
    border-color: rgba(251, 113, 133, 0.5);
    background: rgba(251, 113, 133, 0.12);
}

.icon-button {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    line-height: 1;
}

.btn[disabled],
button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
}

/* Workspace */
.workspace {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 300px minmax(420px, 1fr) 380px;
    gap: 14px;
    padding: 14px;
    overflow: hidden;
}

.panel {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(9, 14, 26, 0.88));
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(18px);
}

.panel-left,
.panel-right {
    min-width: 0;
}

.panel-center {
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.72), rgba(8, 13, 24, 0.78)),
        rgba(8, 13, 24, 0.8);
}

.sidebar-section {
    margin: 12px;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
}

.sidebar-section + .sidebar-section {
    margin-top: 0;
}

.project-card {
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.15), transparent 44%),
        var(--bg-card);
}

.section-kicker,
.modal-eyebrow {
    color: var(--accent-2);
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.sidebar-section h2,
.properties-head h2,
.panel-header h2 {
    margin-top: 4px;
    color: var(--text-primary);
    font-size: 1rem;
    letter-spacing: -0.01em;
}

.sidebar-section p {
    margin: 7px 0 13px;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.section-title-row,
.elements-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.create-section .section-title-row {
    margin-bottom: 14px;
}

.widgets-preview {
    display: none;
    margin-top: 12px;
    padding: 10px;
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: var(--radius-sm);
    background: rgba(2, 6, 23, 0.42);
}

.widgets-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 800;
}

.widgets-preview img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    image-rendering: pixelated;
}

/* Add tools */
.add-buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.btn-add {
    position: relative;
    min-height: 42px;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 12px 10px 18px;
    border-radius: 10px;
    text-align: left;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

.btn-add::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, #f2cf7a, #d9a643);
    box-shadow: 0 0 10px rgba(217, 166, 67, 0.36);
}

.btn-add::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(90deg, rgba(217, 166, 67, 0.14), transparent 52%);
    transition: opacity var(--transition);
}

.btn-add > span {
    position: relative;
    z-index: 1;
    color: var(--text-primary);
    font-size: 0.84rem;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.btn-add .tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 24px;
    padding: 0 7px;
    border-radius: 9px;
    color: #08111f;
    font-size: 0.68rem;
    font-weight: 900;
    background: var(--accent-2);
}

.btn-add.type-image .tool-icon { background: #93c5fd; }
.btn-add.type-text .tool-icon { background: #cbd5e1; }
.btn-add.type-head .tool-icon { background: #a5b4fc; }
.btn-add.type-bar .tool-icon { background: #60a5fa; }
.btn-add.type-xp .tool-icon { background: #94a3b8; }
.btn-add.type-nameplate .tool-icon { background: #bfdbfe; }

.btn-add:hover {
    color: var(--text-primary);
    border-color: rgba(217, 166, 67, 0.45);
    background:
        linear-gradient(90deg, rgba(217, 166, 67, 0.10), transparent 58%),
        rgba(255, 255, 255, 0.04);
    box-shadow: 0 0 0 1px rgba(217, 166, 67, 0.12), 0 10px 22px rgba(0, 0, 0, 0.22);
}

.btn-add:hover::after {
    opacity: 1;
}

.btn-add.type-image::before { background: linear-gradient(180deg, #f2cf7a, #b88932); }
.btn-add.type-text::before { background: linear-gradient(180deg, #f6deb0, #d9a643); }
.btn-add.type-head::before { background: linear-gradient(180deg, #e3c16d, #8f6a2c); }
.btn-add.type-bar::before { background: linear-gradient(180deg, #ffd878, #d18f2c); }
.btn-add.type-xp::before { background: linear-gradient(180deg, #e8d6a0, #a78342); }
.btn-add.type-nameplate::before { background: linear-gradient(180deg, #fff0b8, #d9a643); }

.btn-add.type-nameplate {
    min-height: 46px;
    border-color: rgba(217, 166, 67, 0.26);
}

/* Add Element comfort layout: organized 2×3 cards, no inner abbreviations. */
.add-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.btn-add {
    min-height: 52px;
    justify-content: center;
    padding: 10px 8px;
    text-align: center;
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)),
        rgba(10, 10, 11, 0.76);
}

.btn-add::before {
    display: none;
}

.btn-add::after {
    background: radial-gradient(circle at center, rgba(217, 166, 67, 0.10), transparent 66%);
}

.btn-add > span {
    font-size: 0.82rem;
    line-height: 1;
}

.btn-add:hover {
    transform: translateY(-1px);
    background:
        linear-gradient(180deg, rgba(217, 166, 67, 0.08), rgba(255, 255, 255, 0.025)),
        rgba(12, 12, 13, 0.86);
}

.btn-add.type-nameplate {
    min-height: 52px;
}

/* Groups and elements */
.layer-section {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.elements-layer-controls,
.history-controls,
.zoom-controls,
.toolbar-cluster {
    display: flex;
    align-items: center;
    gap: 8px;
}

.element-groups-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
}

.active-group-select,
.prop-row select,
.prop-row input[type="number"],
.prop-row input[type="text"],
.prop-row input[type="range"],
.prop-row textarea,
#save-project-name {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    background: var(--bg-input);
    padding: 8px 11px;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.active-group-select:focus,
.prop-row select:focus,
.prop-row input[type="number"]:focus,
.prop-row input[type="text"]:focus,
.prop-row textarea:focus,
#save-project-name:focus {
    border-color: var(--border-active);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.12);
}

.btn-group-action {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    font-size: 1.05rem;
    font-weight: 900;
}

.btn-del-group {
    color: var(--danger);
}

.element-list {
    flex: 1;
    min-height: 0;
    overflow: auto;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 2px 2px 0;
}

.element-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 9px 10px;
    border: 1px solid var(--border-color);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-secondary);
    cursor: pointer;
}

.element-item::before {
    content: "";
    width: 3px;
    height: 20px;
    border-radius: 999px;
    background: rgba(217, 166, 67, 0.34);
    flex: 0 0 auto;
}

.element-item:hover {
    border-color: var(--border-strong);
    background: var(--bg-card-hover);
}

.element-item.selected {
    color: var(--text-primary);
    border-color: var(--border-active);
    background: var(--bg-selected);
    box-shadow: inset 4px 0 0 var(--accent);
}

.element-item .el-main {
    flex: 1;
    min-width: 0;
}

.element-item .el-name {
    display: block;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--text-primary);
    font-weight: 850;
}

.element-item .el-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    opacity: 0;
    transition: opacity var(--transition);
}

.element-item:hover .el-actions,
.element-item.selected .el-actions {
    opacity: 1;
}

.element-item .el-layer-btn,
.element-item .el-delete {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.045);
}

.element-item .el-delete:hover {
    color: var(--danger);
    border-color: rgba(251, 113, 133, 0.45);
}

/* Center toolbar and preview shell */
.preview-toolbar {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.035);
    overflow-x: auto;
}

.toolbar-label {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.toolbar-status {
    margin-left: auto;
}

.preview-info {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.82rem;
}

#zoom-level {
    min-width: 52px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.btn-grid-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 14px;
    color: var(--text-secondary);
    font-weight: 800;
}

.btn-grid-toggle.active {
    color: #07111f;
    border-color: transparent;
    background: linear-gradient(135deg, var(--accent), #bfdbfe);
    box-shadow: var(--shadow-glow);
}

.preview-wrapper {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: grid;
    place-items: center;
    padding: 28px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        radial-gradient(circle at center, rgba(56, 189, 248, 0.10), transparent 50%),
        var(--preview-bg);
    background-size: 42px 42px, 42px 42px, auto, auto;
}

.preview-stage-frame {
    display: inline-block;
    width: min(100%, 826px);
    padding: 13px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
    box-shadow: 0 32px 90px rgba(0, 0, 0, 0.45);
}

.preview-screen {
    display: inline-block;
    text-align: left;
    width: 100%;
    max-width: 800px;
    aspect-ratio: 16 / 9;
    background: var(--preview-screen-bg);
    background-image: url('img/editor_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.preview-elements {
    position: absolute;
    inset: 0;
}

.preview-element {
    position: absolute;
    cursor: move;
    user-select: none;
    box-sizing: border-box;
    outline: 1px solid transparent;
    transition: outline-color var(--transition), box-shadow var(--transition);
}

.preview-element:hover {
    outline-color: rgba(56, 189, 248, 0.75);
}

.preview-element.selected {
    outline: 2px solid var(--accent);
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.16);
}

.preview-element.is-image img,
.preview-element.is-player-head img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    pointer-events: none;
}

.preview-element.is-text {
    color: #fff;
    text-shadow: 1px 1px 0 #000;
    font-family: Minecraftia, monospace;
}

.preview-element.is-xp-label,
.preview-element.is-nameplate {
    font-family: Minecraftia, monospace;
    color: #fff;
}

.preview-element.is-nameplate .nameplate-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* symmetric — horizontal padding comes from JS (scaled); the old 8px-right/3px-left skewed text left */
    min-height: 0;
    padding: 0;
}

.preview-element.is-nameplate .nameplate-badge-bg {
    position: absolute;
    inset: 0;
    opacity: 0.6;
    pointer-events: none;
}

.preview-element.is-nameplate .text-content {
    position: relative;
    z-index: 1;
}

.preview-grid-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
}

.preview-screen:hover .preview-grid-overlay {
    opacity: 1;
}

#marquee-select {
    position: absolute;
    display: none;
    z-index: 9999;
    pointer-events: none;
    border: 1.5px dashed var(--accent-2);
    border-radius: 8px;
    background: rgba(56, 189, 248, 0.10);
}

.grid-toggle-container {
    position: absolute;
    inset: 0;
    display: none;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    pointer-events: none;
    z-index: 10;
}

.grid-toggle-container.active {
    display: grid;
}

.grid-cell {
    position: relative;
    border: 1px dashed rgba(125, 211, 252, 0.42);
    background: rgba(56, 189, 248, 0.045);
}

.grid-cell.active,
.grid-cell:hover {
    background: rgba(96, 165, 250, 0.16);
}

.grid-cell .cell-label {
    position: absolute;
    top: 8px;
    left: 8px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.72rem;
    font-weight: 900;
}

/* Inspector */
.properties-head,
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
}

.properties-hint {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.properties-content {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 14px;
}

.no-selection {
    min-height: 210px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    text-align: center;
    color: var(--text-muted);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.035);
    padding: 20px;
}

.no-selection strong {
    color: var(--text-primary);
    font-size: 1rem;
}

.prop-group {
    margin-bottom: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
}

.prop-group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 14px;
    color: var(--text-primary);
    font-weight: 900;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.045);
}

.prop-group-title::after {
    content: "−";
    color: var(--text-muted);
    font-weight: 900;
}

.prop-group.collapsed .prop-group-title::after {
    content: "+";
}

.prop-group-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
}

.prop-group.collapsed .prop-group-body {
    display: none;
}

.prop-row,
.prop-row-stack {
    display: grid;
    gap: 7px;
}

.prop-row label,
.prop-row-stack > label {
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 850;
}

.prop-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
}

.prop-row input[type="range"] {
    padding: 0;
    accent-color: var(--accent);
}

.range-value {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.dual-input,
.size-inputs,
.color-input-wrapper,
.prop-row .dual-input {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.input-with-label {
    position: relative;
}

.axis-label {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 900;
    pointer-events: none;
}

.input-with-label input {
    padding-left: 28px !important;
}

.color-input-group,
.prop-row .color-input-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.color-swatch {
    width: 38px;
    height: 38px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18);
}

.color-input-wrapper {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.label-r { color: #fb7185; }
.label-g { color: #60a5fa; }
.label-b { color: #93c5fd; }

.anchor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

.anchor-grid .anchor-cell {
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.anchor-grid .anchor-cell:hover {
    border-color: var(--accent-2);
    transform: translateY(-1px);
}

.anchor-grid .anchor-cell.active {
    border-color: var(--border-active);
    background: rgba(96, 165, 250, 0.18);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.28);
}

.align-toolbar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.align-btn {
    min-height: 38px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
}

.align-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent-2);
}

.prop-actions,
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 12px;
}

.prop-type-badge,
.multi-select-header,
.bar-fill-scale-panel,
.prop-image-preview {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.045);
    padding: 12px;
}

.prop-type-badge {
    display: flex;
    align-items: center;
    gap: 11px;
}

.prop-type-badge .badge-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #08111f;
    background: var(--accent-2);
    font-weight: 900;
}

.badge-type {
    color: var(--accent-2);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.badge-name {
    margin-top: 2px;
    color: var(--text-primary);
    font-weight: 800;
}

.prop-image-preview {
    display: grid;
    place-items: center;
    min-height: 120px;
}

.prop-image-preview img {
    max-width: 100%;
    max-height: 160px;
    object-fit: contain;
    border-radius: 10px;
}

.prop-image-preview .placeholder {
    color: var(--text-muted);
}

.bar-scale-row,
.bar-scale-note,
.bar-scale-warn {
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.bar-scale-warn {
    color: var(--warning);
}

.bar-preview {
    position: relative;
}

.validation-error {
    border-color: rgba(251, 113, 133, 0.78) !important;
    box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.12) !important;
}

/* Modals and project list */
.modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(14px);
}

.modal-content {
    position: relative;
    width: min(520px, 100%);
    max-height: min(86vh, 820px);
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.12), transparent 44%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(8, 13, 24, 0.98));
    padding: 22px;
    box-shadow: var(--shadow-md);
}

.modal-wide {
    width: min(720px, 100%);
}

.modal-content h2 {
    margin: 5px 0 10px;
    font-size: 1.25rem;
}

.modal-copy {
    color: var(--text-muted);
    line-height: 1.5;
}

.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
}

.export-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0;
}

.export-summary > div,
.checkbox-card,
.project-item {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.045);
    padding: 13px;
}

.export-summary span {
    display: block;
    margin-bottom: 5px;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.export-summary strong {
    font-size: 1.05rem;
}

#export-plan-info,
#export-coin-warning,
#export-breakdown-rows {
    display: none;
}

.checkbox-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.45;
}

.checkbox-card input {
    margin-top: 3px;
    accent-color: var(--accent);
}

.project-list,
#project-list {
    max-height: 420px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.project-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.project-item:hover {
    border-color: var(--border-strong);
    background: var(--bg-card-hover);
}

/* Toast */
.toast {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 3000;
    max-width: 360px;
    padding: 13px 15px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    color: var(--text-primary);
    background: rgba(15, 23, 42, 0.96);
    box-shadow: var(--shadow-md);
    transform: translateY(20px);
    opacity: 0;
    transition: opacity var(--transition), transform var(--transition);
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast.success {
    border-color: rgba(96, 165, 250, 0.55);
}

.toast.error {
    border-color: rgba(251, 113, 133, 0.55);
}

@media (max-width: 1280px) {
    .workspace {
        grid-template-columns: 270px minmax(360px, 1fr) 340px;
    }

    .header-command-strip {
        gap: 8px;
    }

    .namespace-pill {
        min-width: 220px;
    }
}

@media (max-width: 1040px) {
    body {
        overflow: auto;
    }

    .workspace {
        height: auto;
        min-height: 100vh;
        overflow: visible;
        grid-template-columns: 1fr;
    }

    .panel {
        min-height: 320px;
    }

    .panel-center {
        min-height: 620px;
    }

    #app-header {
        height: auto;
        flex-wrap: wrap;
    }

    .header-command-strip {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

/* ========================================
   Minecraft Dungeons inspired ornamental skin
   ======================================== */
:root {
    --bg-root: #100f0d;
    --bg-shell: #15110f;
    --bg-panel: rgba(18, 15, 14, 0.92);
    --bg-panel-strong: rgba(26, 21, 18, 0.98);
    --bg-card: rgba(255, 196, 86, 0.045);
    --bg-card-hover: rgba(255, 202, 103, 0.08);
    --bg-input: rgba(6, 9, 13, 0.82);
    --bg-selected: rgba(128, 245, 255, 0.13);

    --border-color: rgba(255, 210, 128, 0.18);
    --border-strong: rgba(128, 245, 255, 0.46);
    --border-active: rgba(128, 245, 255, 0.82);

    --text-primary: #fff8e7;
    --text-secondary: #e7d3ac;
    --text-muted: #9b8668;
    --text-accent: #80f5ff;

    --accent: #80f5ff;
    --accent-2: #ffbd42;
    --accent-3: #ff7a18;
    --success: #80f5ff;
    --warning: #ffbd42;
    --danger: #ff5e57;

    --ornament-cyan: #86f8ff;
    --ornament-cyan-soft: rgba(134, 248, 255, 0.22);
    --ornament-gold: #ffbd42;
    --ornament-orange: #ff6b18;
    --shadow-glow: 0 0 0 1px rgba(255, 189, 66, 0.24), 0 0 28px rgba(255, 107, 24, 0.18), 0 18px 50px rgba(0, 0, 0, 0.42);
}

body {
    background:
        linear-gradient(45deg, rgba(255, 189, 66, 0.035) 25%, transparent 25%, transparent 75%, rgba(255, 189, 66, 0.035) 75%),
        linear-gradient(45deg, rgba(128, 245, 255, 0.025) 25%, transparent 25%, transparent 75%, rgba(128, 245, 255, 0.025) 75%),
        radial-gradient(circle at 12% 8%, rgba(255, 122, 24, 0.28), transparent 27%),
        radial-gradient(circle at 82% 16%, rgba(128, 245, 255, 0.20), transparent 30%),
        radial-gradient(circle at 50% 100%, rgba(255, 189, 66, 0.10), transparent 38%),
        #0f0f0d;
    background-position: 0 0, 18px 18px, 0 0, 0 0, 0 0, 0 0;
    background-size: 36px 36px, 36px 36px, auto, auto, auto, auto;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent, rgba(128, 245, 255, 0.055), transparent),
        radial-gradient(circle at center, transparent 0, rgba(0, 0, 0, 0.34) 74%);
    mix-blend-mode: screen;
    opacity: 0.7;
    z-index: 0;
}

#app-header,
.app-shell-header,
.panel,
.modal-content {
    position: relative;
}

#app-header,
.app-shell-header {
    background:
        linear-gradient(90deg, rgba(255, 122, 24, 0.14), transparent 18%, transparent 82%, rgba(128, 245, 255, 0.12)),
        linear-gradient(180deg, rgba(25, 20, 17, 0.98), rgba(11, 12, 14, 0.9));
    border-bottom-color: rgba(255, 189, 66, 0.34);
    box-shadow: 0 0 0 1px rgba(128, 245, 255, 0.08), 0 10px 36px rgba(0, 0, 0, 0.38);
}

.brand-mark {
    border-radius: 6px;
    color: #180c03;
    background: linear-gradient(135deg, var(--ornament-gold), #ffe083 48%, var(--ornament-orange));
    box-shadow: 0 0 0 2px rgba(255, 122, 24, 0.35), 0 0 24px rgba(255, 122, 24, 0.45);
    clip-path: polygon(10% 0, 100% 0, 100% 76%, 78% 100%, 0 100%, 0 18%);
}

.brand-block h1 {
    color: #fff1c7;
    text-shadow: 0 0 16px rgba(255, 189, 66, 0.34);
}

.brand-subtitle,
.section-kicker,
.modal-eyebrow {
    color: var(--ornament-cyan);
    text-shadow: 0 0 13px rgba(128, 245, 255, 0.32);
}

.namespace-pill,
.user-chip,
.plan-badge,
.btn,
.btn-grid-toggle,
.active-group-select,
.prop-row select,
.prop-row input[type="number"],
.prop-row input[type="text"],
.prop-row textarea,
#save-project-name {
    border-color: rgba(255, 189, 66, 0.22);
}

#namespace-input:focus,
.active-group-select:focus,
.prop-row select:focus,
.prop-row input[type="number"]:focus,
.prop-row input[type="text"]:focus,
.prop-row textarea:focus,
#save-project-name:focus {
    border-color: var(--ornament-cyan);
    box-shadow: 0 0 0 3px rgba(128, 245, 255, 0.13), 0 0 22px rgba(128, 245, 255, 0.12);
}

.btn-primary {
    color: #190c03;
    border: 1px solid rgba(255, 235, 170, 0.55);
    background: linear-gradient(180deg, #ffe083, var(--ornament-gold) 52%, var(--ornament-orange));
    box-shadow: 0 0 0 1px rgba(255, 122, 24, 0.35), 0 0 28px rgba(255, 122, 24, 0.32);
}

.btn-primary:hover {
    color: #190c03;
    background: linear-gradient(180deg, #fff0a8, #ffc84f 48%, #ff7a18);
    box-shadow: 0 0 0 1px rgba(255, 224, 131, 0.7), 0 0 34px rgba(255, 122, 24, 0.46);
}

.btn-soft,
.btn-tool,
.btn-grid-toggle {
    background: linear-gradient(180deg, rgba(255, 222, 150, 0.055), rgba(255, 255, 255, 0.025));
}

.btn-widget {
    color: #fff1c7;
    border-color: rgba(255, 189, 66, 0.4);
    background:
        linear-gradient(90deg, rgba(255, 122, 24, 0.14), rgba(128, 245, 255, 0.08)),
        rgba(255, 255, 255, 0.035);
}

.btn-grid-toggle.active {
    color: #071719;
    background: linear-gradient(180deg, #d8fdff, var(--ornament-cyan));
    box-shadow: 0 0 0 1px rgba(128, 245, 255, 0.55), 0 0 26px rgba(128, 245, 255, 0.36);
}

.panel {
    border-color: rgba(255, 189, 66, 0.18);
    background:
        linear-gradient(135deg, rgba(255, 122, 24, 0.065), transparent 23%, transparent 77%, rgba(128, 245, 255, 0.055)),
        linear-gradient(180deg, rgba(20, 16, 14, 0.95), rgba(9, 11, 14, 0.94));
}

.panel::before,
.sidebar-section::before,
.prop-group::before,
.modal-content::before {
    content: "";
    position: absolute;
    inset: 8px;
    pointer-events: none;
    background:
        linear-gradient(var(--ornament-gold), var(--ornament-gold)) left top / 34px 3px no-repeat,
        linear-gradient(var(--ornament-gold), var(--ornament-gold)) left top / 3px 34px no-repeat,
        linear-gradient(var(--ornament-cyan), var(--ornament-cyan)) right top / 34px 3px no-repeat,
        linear-gradient(var(--ornament-cyan), var(--ornament-cyan)) right top / 3px 34px no-repeat,
        linear-gradient(var(--ornament-cyan), var(--ornament-cyan)) left bottom / 34px 3px no-repeat,
        linear-gradient(var(--ornament-cyan), var(--ornament-cyan)) left bottom / 3px 34px no-repeat,
        linear-gradient(var(--ornament-gold), var(--ornament-gold)) right bottom / 34px 3px no-repeat,
        linear-gradient(var(--ornament-gold), var(--ornament-gold)) right bottom / 3px 34px no-repeat;
    opacity: 0.58;
    filter: drop-shadow(0 0 6px rgba(128, 245, 255, 0.32));
}

.sidebar-section,
.prop-group,
.export-summary > div,
.checkbox-card,
.project-item {
    position: relative;
    border-color: rgba(255, 189, 66, 0.2);
    background:
        linear-gradient(135deg, rgba(255, 189, 66, 0.055), transparent 48%, rgba(128, 245, 255, 0.035)),
        rgba(10, 12, 15, 0.72);
}

.project-card {
    background:
        radial-gradient(circle at top right, rgba(255, 122, 24, 0.22), transparent 46%),
        radial-gradient(circle at bottom left, rgba(128, 245, 255, 0.12), transparent 42%),
        rgba(10, 12, 15, 0.74);
}

.btn-add {
    border-color: rgba(128, 245, 255, 0.18);
    background:
        linear-gradient(135deg, rgba(128, 245, 255, 0.06), rgba(255, 189, 66, 0.045)),
        rgba(7, 10, 13, 0.7);
}

.btn-add .tool-icon,
.element-item .el-icon {
    color: #0d1013;
    background: linear-gradient(180deg, #e7feff, var(--ornament-cyan));
    box-shadow: 0 0 16px rgba(128, 245, 255, 0.24);
}

.btn-add.type-text .tool-icon,
.btn-add.type-nameplate .tool-icon,
.element-item .el-icon.icon-text,
.element-item .el-icon.icon-nameplate {
    background: linear-gradient(180deg, #ffe9a3, var(--ornament-gold));
    box-shadow: 0 0 16px rgba(255, 189, 66, 0.24);
}

.element-item {
    border-color: rgba(255, 189, 66, 0.16);
    background:
        linear-gradient(90deg, rgba(128, 245, 255, 0.045), transparent 34%, rgba(255, 189, 66, 0.035)),
        rgba(255, 255, 255, 0.028);
}

.element-item.selected {
    border-color: var(--ornament-cyan);
    background:
        linear-gradient(90deg, rgba(128, 245, 255, 0.17), transparent),
        rgba(255, 255, 255, 0.04);
    box-shadow: inset 4px 0 0 var(--ornament-cyan), 0 0 20px rgba(128, 245, 255, 0.12);
}

.preview-wrapper {
    background:
        linear-gradient(rgba(128, 245, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(128, 245, 255, 0.035) 1px, transparent 1px),
        radial-gradient(circle at center, rgba(255, 189, 66, 0.10), transparent 45%),
        #080a0d;
    background-size: 48px 48px, 48px 48px, auto, auto;
}

.preview-stage-frame {
    position: relative;
    border-color: rgba(128, 245, 255, 0.7);
    border-radius: 8px;
    background:
        linear-gradient(90deg, transparent 34px, var(--ornament-cyan) 34px, var(--ornament-cyan) calc(100% - 34px), transparent calc(100% - 34px)) top / 100% 5px no-repeat,
        linear-gradient(90deg, transparent 34px, var(--ornament-cyan) 34px, var(--ornament-cyan) calc(100% - 34px), transparent calc(100% - 34px)) bottom / 100% 5px no-repeat,
        linear-gradient(180deg, transparent 34px, var(--ornament-cyan) 34px, var(--ornament-cyan) calc(100% - 34px), transparent calc(100% - 34px)) left / 5px 100% no-repeat,
        linear-gradient(180deg, transparent 34px, var(--ornament-cyan) 34px, var(--ornament-cyan) calc(100% - 34px), transparent calc(100% - 34px)) right / 5px 100% no-repeat,
        rgba(1, 12, 17, 0.55);
    box-shadow: 0 0 0 1px rgba(128, 245, 255, 0.5), 0 0 34px rgba(128, 245, 255, 0.30), 0 32px 90px rgba(0, 0, 0, 0.58);
}

.preview-stage-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(var(--ornament-cyan), var(--ornament-cyan)) left 0 top 0 / 28px 28px no-repeat,
        linear-gradient(var(--ornament-cyan), var(--ornament-cyan)) right 0 top 0 / 28px 28px no-repeat,
        linear-gradient(var(--ornament-cyan), var(--ornament-cyan)) left 0 bottom 0 / 28px 28px no-repeat,
        linear-gradient(var(--ornament-cyan), var(--ornament-cyan)) right 0 bottom 0 / 28px 28px no-repeat;
    clip-path: polygon(0 0, 42px 0, 42px 8px, 12px 8px, 12px 42px, 0 42px, 0 100%, 42px 100%, 42px calc(100% - 8px), 12px calc(100% - 8px), 12px calc(100% - 42px), 0 calc(100% - 42px), 100% calc(100% - 42px), calc(100% - 12px) calc(100% - 42px), calc(100% - 12px) calc(100% - 8px), calc(100% - 42px) calc(100% - 8px), calc(100% - 42px) 100%, 100% 100%, 100% 0, calc(100% - 42px) 0, calc(100% - 42px) 8px, calc(100% - 12px) 8px, calc(100% - 12px) 42px, 100% 42px);
    filter: drop-shadow(0 0 10px rgba(128, 245, 255, 0.72));
}

.preview-screen {
    border-radius: 4px;
}

.prop-group-title,
.properties-head,
.panel-header,
.preview-toolbar {
    background:
        linear-gradient(90deg, rgba(255, 122, 24, 0.08), transparent 55%, rgba(128, 245, 255, 0.06)),
        rgba(255, 255, 255, 0.035);
}

.anchor-grid .anchor-cell.active,
.grid-cell.active,
.grid-cell:hover {
    border-color: var(--ornament-cyan);
    background: rgba(128, 245, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(128, 245, 255, 0.26);
}

.toast {
    border-color: rgba(255, 189, 66, 0.34);
    background:
        linear-gradient(135deg, rgba(255, 122, 24, 0.10), rgba(128, 245, 255, 0.08)),
        rgba(12, 13, 14, 0.97);
}

/* ========================================
   Obsidian gold correction
   Requested direction: black/graphite/gold, no blue cyan ornaments.
   ======================================== */
:root {
    --bg-root: #0b0b0c;
    --bg-shell: #101012;
    --bg-panel: rgba(18, 18, 20, 0.94);
    --bg-panel-strong: rgba(25, 25, 27, 0.98);
    --bg-card: rgba(255, 255, 255, 0.04);
    --bg-card-hover: rgba(255, 255, 255, 0.07);
    --bg-input: rgba(4, 4, 5, 0.84);
    --bg-selected: rgba(217, 166, 67, 0.14);

    --border-color: rgba(214, 173, 91, 0.18);
    --border-strong: rgba(214, 173, 91, 0.42);
    --border-active: rgba(230, 180, 76, 0.86);

    --text-primary: #f5f0e7;
    --text-secondary: #c8c0b4;
    --text-muted: #81786d;
    --text-accent: #e6b44c;

    --accent: #d9a643;
    --accent-2: #f2cf7a;
    --accent-3: #8f6a2c;
    --success: #d9a643;
    --warning: #e6b44c;
    --danger: #d66b5f;

    --ornament-cyan: #d9a643;
    --ornament-cyan-soft: rgba(217, 166, 67, 0.16);
    --ornament-gold: #d9a643;
    --ornament-orange: #9a6320;
    --shadow-glow: 0 0 0 1px rgba(217, 166, 67, 0.22), 0 0 20px rgba(217, 166, 67, 0.14), 0 18px 46px rgba(0, 0, 0, 0.5);
}

body {
    background:
        linear-gradient(45deg, rgba(255, 255, 255, 0.018) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.018) 75%),
        radial-gradient(circle at 12% 8%, rgba(217, 166, 67, 0.16), transparent 25%),
        radial-gradient(circle at 86% 14%, rgba(255, 255, 255, 0.05), transparent 28%),
        #0b0b0c;
    background-size: 34px 34px, auto, auto, auto;
}

body::before {
    background:
        radial-gradient(circle at center, transparent 0, rgba(0, 0, 0, 0.42) 72%),
        linear-gradient(90deg, transparent, rgba(217, 166, 67, 0.035), transparent);
    mix-blend-mode: normal;
    opacity: 0.9;
}

#app-header,
.app-shell-header {
    background:
        linear-gradient(90deg, rgba(217, 166, 67, 0.12), transparent 22%, transparent 78%, rgba(217, 166, 67, 0.08)),
        linear-gradient(180deg, rgba(22, 22, 24, 0.98), rgba(10, 10, 11, 0.92));
    border-bottom-color: rgba(217, 166, 67, 0.36);
}

.brand-mark {
    color: #15110a;
    background: linear-gradient(180deg, #f2cf7a, #d9a643 58%, #8f6a2c);
    box-shadow: 0 0 0 2px rgba(217, 166, 67, 0.25), 0 0 22px rgba(217, 166, 67, 0.26);
    clip-path: none;
    border-radius: 8px;
}

.brand-subtitle,
.section-kicker,
.modal-eyebrow {
    color: #d9a643;
    text-shadow: 0 0 12px rgba(217, 166, 67, 0.18);
}

#namespace-input:focus,
.active-group-select:focus,
.prop-row select:focus,
.prop-row input[type="number"]:focus,
.prop-row input[type="text"]:focus,
.prop-row textarea:focus,
#save-project-name:focus {
    border-color: #d9a643;
    box-shadow: 0 0 0 3px rgba(217, 166, 67, 0.11);
}

.user-chip,
.plan-badge,
.plan-badge--local {
    color: #f2cf7a;
    border-color: rgba(217, 166, 67, 0.24);
    background: rgba(217, 166, 67, 0.10);
}

.btn-primary {
    color: #181108;
    border-color: rgba(242, 207, 122, 0.46);
    background: linear-gradient(180deg, #f2cf7a, #d9a643 58%, #8f6a2c);
    box-shadow: 0 0 0 1px rgba(217, 166, 67, 0.28), 0 0 22px rgba(217, 166, 67, 0.22);
}

.btn-primary:hover {
    color: #181108;
    background: linear-gradient(180deg, #ffe29a, #ddb052 58%, #9b7027);
    box-shadow: 0 0 0 1px rgba(242, 207, 122, 0.55), 0 0 26px rgba(217, 166, 67, 0.30);
}

.btn-grid-toggle.active {
    color: #17110a;
    background: linear-gradient(180deg, #f2cf7a, #d9a643);
    box-shadow: 0 0 0 1px rgba(217, 166, 67, 0.42), 0 0 22px rgba(217, 166, 67, 0.22);
}

.panel,
.sidebar-section,
.prop-group,
.modal-content {
    border-radius: 14px;
}

.panel {
    border-color: rgba(217, 166, 67, 0.18);
    background:
        linear-gradient(135deg, rgba(217, 166, 67, 0.04), transparent 25%, transparent 75%, rgba(255, 255, 255, 0.025)),
        linear-gradient(180deg, rgba(22, 22, 24, 0.96), rgba(9, 9, 10, 0.95));
}

.panel::before,
.sidebar-section::before,
.prop-group::before,
.modal-content::before {
    inset: 10px;
    background:
        linear-gradient(#d9a643, #d9a643) left top / 22px 2px no-repeat,
        linear-gradient(#d9a643, #d9a643) left top / 2px 22px no-repeat,
        linear-gradient(#d9a643, #d9a643) right top / 22px 2px no-repeat,
        linear-gradient(#d9a643, #d9a643) right top / 2px 22px no-repeat,
        linear-gradient(#d9a643, #d9a643) left bottom / 22px 2px no-repeat,
        linear-gradient(#d9a643, #d9a643) left bottom / 2px 22px no-repeat,
        linear-gradient(#d9a643, #d9a643) right bottom / 22px 2px no-repeat,
        linear-gradient(#d9a643, #d9a643) right bottom / 2px 22px no-repeat;
    opacity: 0.42;
    filter: drop-shadow(0 0 5px rgba(217, 166, 67, 0.28));
}

.sidebar-section,
.prop-group,
.export-summary > div,
.checkbox-card,
.project-item {
    border-color: rgba(217, 166, 67, 0.17);
    background:
        linear-gradient(135deg, rgba(217, 166, 67, 0.045), transparent 50%, rgba(255, 255, 255, 0.025)),
        rgba(12, 12, 13, 0.78);
}

.project-card {
    background:
        radial-gradient(circle at top right, rgba(217, 166, 67, 0.16), transparent 44%),
        rgba(12, 12, 13, 0.78);
}

.btn-add .tool-icon,
.btn-add.type-text .tool-icon,
.btn-add.type-nameplate .tool-icon {
    color: #15110a;
    background: linear-gradient(180deg, #f2cf7a, #d9a643);
    box-shadow: 0 0 12px rgba(217, 166, 67, 0.16);
}

.btn-add,
.element-item {
    border-color: rgba(217, 166, 67, 0.16);
    background:
        linear-gradient(90deg, rgba(217, 166, 67, 0.035), transparent 38%, rgba(255, 255, 255, 0.02)),
        rgba(255, 255, 255, 0.025);
}

.element-item.selected {
    border-color: #d9a643;
    background:
        linear-gradient(90deg, rgba(217, 166, 67, 0.14), transparent),
        rgba(255, 255, 255, 0.035);
    box-shadow: inset 4px 0 0 #d9a643, 0 0 16px rgba(217, 166, 67, 0.12);
}

.preview-wrapper {
    background:
        linear-gradient(rgba(217, 166, 67, 0.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(217, 166, 67, 0.026) 1px, transparent 1px),
        radial-gradient(circle at center, rgba(217, 166, 67, 0.07), transparent 42%),
        #090909;
    background-size: 48px 48px, 48px 48px, auto, auto;
}

.preview-stage-frame {
    padding: 10px;
    border: 2px solid rgba(217, 166, 67, 0.72);
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(217, 166, 67, 0.10), rgba(255, 255, 255, 0.02)),
        rgba(9, 9, 10, 0.76);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.95), 0 0 18px rgba(217, 166, 67, 0.18), 0 30px 80px rgba(0, 0, 0, 0.62);
}

.preview-stage-frame::before {
    inset: 8px;
    background:
        linear-gradient(#d9a643, #d9a643) left top / 28px 3px no-repeat,
        linear-gradient(#d9a643, #d9a643) left top / 3px 28px no-repeat,
        linear-gradient(#d9a643, #d9a643) right top / 28px 3px no-repeat,
        linear-gradient(#d9a643, #d9a643) right top / 3px 28px no-repeat,
        linear-gradient(#d9a643, #d9a643) left bottom / 28px 3px no-repeat,
        linear-gradient(#d9a643, #d9a643) left bottom / 3px 28px no-repeat,
        linear-gradient(#d9a643, #d9a643) right bottom / 28px 3px no-repeat,
        linear-gradient(#d9a643, #d9a643) right bottom / 3px 28px no-repeat;
    clip-path: none;
    filter: drop-shadow(0 0 8px rgba(217, 166, 67, 0.36));
}

.preview-screen {
    border-radius: 3px;
}

.prop-group-title,
.properties-head,
.panel-header,
.preview-toolbar {
    background:
        linear-gradient(90deg, rgba(217, 166, 67, 0.075), transparent 55%, rgba(255, 255, 255, 0.025)),
        rgba(255, 255, 255, 0.028);
}

.anchor-grid .anchor-cell.active,
.grid-cell.active,
.grid-cell:hover {
    border-color: #d9a643;
    background: rgba(217, 166, 67, 0.15);
    box-shadow: inset 0 0 0 1px rgba(217, 166, 67, 0.24);
}

.toast {
    border-color: rgba(217, 166, 67, 0.34);
    background:
        linear-gradient(135deg, rgba(217, 166, 67, 0.10), rgba(255, 255, 255, 0.025)),
        rgba(12, 12, 13, 0.98);
}

/* Final gold-only cleanup for Grid + Widgets. Keep this at the end. */
#widgets-preview,
.widgets-preview {
    border-color: rgba(217, 166, 67, 0.28) !important;
    background:
        linear-gradient(135deg, rgba(217, 166, 67, 0.055), transparent),
        rgba(8, 8, 9, 0.78) !important;
}

.widgets-preview-head {
    color: #d9a643 !important;
}

#widgets-preview-img {
    border: 1px solid rgba(217, 166, 67, 0.20);
    background: #090909;
}

.btn-widget {
    color: #f2cf7a !important;
    border-color: rgba(217, 166, 67, 0.34) !important;
    background:
        linear-gradient(180deg, rgba(217, 166, 67, 0.11), rgba(255, 255, 255, 0.025)),
        rgba(10, 10, 11, 0.84) !important;
}

.grid-toggle-container .grid-cell,
.grid-cell {
    border-color: rgba(217, 166, 67, 0.36) !important;
    background: rgba(217, 166, 67, 0.035) !important;
}

.grid-cell .cell-label {
    color: rgba(242, 207, 122, 0.82) !important;
}

.grid-cell.active,
.grid-cell:hover,
.grid-toggle-container.active .grid-cell:hover {
    border-color: #d9a643 !important;
    background: rgba(217, 166, 67, 0.14) !important;
    box-shadow: inset 0 0 0 1px rgba(217, 166, 67, 0.26) !important;
}

.preview-grid-overlay {
    background-image:
        linear-gradient(rgba(217, 166, 67, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(217, 166, 67, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* ============================================================
   Converter-aligned CHROME redesign — buttons, header, inputs,
   exact novaic crate icon. CHROME ONLY.
   Never touches .preview-* / .preview-screen / element positions.
   All button IDs, handlers, and features remain unchanged.
   ============================================================ */
:root { --cv-bevel: inset 0 2px 0 rgba(255,255,255,.16), inset 0 -3px 0 rgba(0,0,0,.35); }

/* --- Exact novaic crate icon (from the handoff, scaled) --- */
.brand-mark {
    width: 32px !important; height: 32px !important; flex: none !important;
    border-radius: 8px !important; overflow: hidden !important; background: none !important; padding: 0 !important;
    box-shadow: 0 0 0 1px rgba(217,166,67,.34), 0 6px 16px -6px rgba(217,166,67,.55) !important;
}
.brand-mark .crate-flat { position: relative; width: 100px; height: 100px; transform: scale(.32); transform-origin: top left; }
.brand-mark .crate-flat .panel { position: absolute; inset: 6px;
    background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 1px, transparent 1px 22px), linear-gradient(160deg, #C8912E, #8E641F);
    border: 3px solid #F2CE77; box-shadow: inset 0 0 0 2px rgba(0,0,0,.28); }
.brand-mark .crate-flat .gv { position: absolute; left: 41px; top: 6px; bottom: 6px; width: 18px; background: linear-gradient(180deg,#7C561B,#5A3E14); }
.brand-mark .crate-flat .gh { position: absolute; top: 41px; left: 6px; right: 6px; height: 18px; background: linear-gradient(90deg,#7C561B,#5A3E14); }
.brand-mark .crate-flat .rv { position: absolute; width: 9px; height: 9px; background: #F2CE77; }
.brand-mark .crate-flat .rv.tl { left: 14px; top: 14px; } .brand-mark .crate-flat .rv.tr { right: 14px; top: 14px; }
.brand-mark .crate-flat .rv.bl { left: 14px; bottom: 14px; } .brand-mark .crate-flat .rv.br { right: 14px; bottom: 14px; }
.brand-mark .crate-flat .gem { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%,-50%) rotate(45deg);
    background: linear-gradient(135deg,#FCE6A2,#E3AE42); box-shadow: 0 0 0 2px rgba(0,0,0,.35), inset 0 0 0 3px rgba(120,80,20,.55); }

/* --- Header --- */
.app-shell-header {
    background: linear-gradient(180deg, rgba(22,22,24,.98), rgba(10,10,11,.92)) !important;
    border-bottom: 1px solid rgba(217,166,67,.32) !important;
}

/* --- Buttons: primary (gold, chiseled) --- */
.btn.btn-primary {
    color: #1a1204 !important; font-weight: 700 !important;
    background: linear-gradient(180deg, #f2cf7a, #8f6a2c) !important; border: 0 !important; border-radius: 10px !important;
    box-shadow: var(--cv-bevel), 0 8px 20px -10px rgba(217,166,67,.6) !important;
}
.btn.btn-primary:hover { filter: brightness(1.05) !important; }

/* --- Secondary / soft / tool / widget / group-action --- */
.btn.btn-soft, .btn.btn-tool, .btn.btn-widget, .btn-group-action, .btn-grid-toggle {
    color: #f5f0e7 !important; background: #1f1c17 !important;
    border: 1px solid rgba(217,166,67,.3) !important; border-radius: 9px !important; box-shadow: none !important;
}
.btn.btn-soft:hover, .btn.btn-tool:hover, .btn.btn-widget:hover, .btn-group-action:hover, .btn-grid-toggle:hover {
    background: #272219 !important; border-color: rgba(217,166,67,.5) !important; color: #ffe9a8 !important;
}

/* --- Add-element buttons: keep their colored icon accents, unify frame --- */
.btn.btn-add {
    color: #f5f0e7 !important; background: #161513 !important;
    border: 1px solid rgba(217,166,67,.2) !important; border-left: 3px solid #d9a643 !important; border-radius: 9px !important;
}
.btn.btn-add:hover { background: #221f19 !important; }

/* --- Icon buttons --- */
.btn.icon-button { color: #c8c0b4 !important; background: #1f1c17 !important; border: 1px solid rgba(217,166,67,.24) !important; border-radius: 8px !important; }
.btn.icon-button:hover { color: #ffe9a8 !important; border-color: rgba(217,166,67,.5) !important; }
.icon-button.danger:hover { color: #ffb4ac !important; border-color: rgba(194,81,70,.6) !important; }

/* --- Namespace pill + inputs / selects (chrome only; NOT the preview) --- */
.namespace-pill { border: 1px solid rgba(217,166,67,.3) !important; background: #131210 !important; border-radius: 999px !important; }
.header-command-strip input[type="text"], .panel input[type="text"], .panel input[type="number"], .panel select, .panel textarea {
    color: #f5f0e7 !important; background: #0e0d0a !important; border: 1px solid rgba(217,166,67,.3) !important; border-radius: 8px !important;
}
.panel input:focus, .panel select:focus, .panel textarea:focus, .header-command-strip input:focus { outline: 2px solid #f2cf7a !important; outline-offset: 1px !important; }