/* LTG 画布 — quiet product system
   One clean override layer. Visual rules only; application behavior is untouched. */

:root {
    --ui-bg: #f5f5f3;
    --ui-surface: #ffffff;
    --ui-surface-2: #f0f0ed;
    --ui-text: #171717;
    --ui-muted: #6f6f6a;
    --ui-faint: #9b9b95;
    --ui-line: rgba(23, 23, 23, .10);
    --ui-line-strong: rgba(23, 23, 23, .18);
    --ui-dark: #171717;
    --ui-dark-text: #ffffff;
    --ui-green: #10a37f;
    --ui-blue: #0071e3;
    --ui-danger: #d92d20;
    --ui-radius: 18px;
    --ui-radius-sm: 12px;
    --ui-shadow-sm: 0 1px 2px rgba(0,0,0,.03), 0 8px 24px rgba(0,0,0,.035);
    --ui-shadow: 0 18px 55px rgba(0,0,0,.075);
    --ui-ease: cubic-bezier(.22,1,.36,1);
}

html.studio-theme-dark,
html.theme-dark,
body.studio-theme-dark,
body.theme-dark {
    --ui-bg: #111110;
    --ui-surface: #1c1c1a;
    --ui-surface-2: #242422;
    --ui-text: #f4f4f1;
    --ui-muted: #aaa9a3;
    --ui-faint: #7d7d77;
    --ui-line: rgba(255,255,255,.10);
    --ui-line-strong: rgba(255,255,255,.18);
    --ui-dark: #f4f4f1;
    --ui-dark-text: #171716;
    --ui-shadow-sm: 0 1px 2px rgba(0,0,0,.12),0 8px 24px rgba(0,0,0,.18);
    --ui-shadow: 0 18px 55px rgba(0,0,0,.28);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Segoe UI", sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

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

/* ================================================================
   PRODUCT SHELL — horizontal product bar, content-first workspace
   ================================================================ */

body:has(.app-shell) {
    margin: 0;
    background: var(--ui-bg) !important;
}

.app-shell {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    background: var(--ui-bg) !important;
}

.app-shell > .sidebar,
.app-shell > .sidebar:hover {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 72px !important;
    min-height: 72px;
    padding: 0 22px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 24px;
    border: 0 !important;
    border-bottom: 1px solid var(--ui-line) !important;
    border-radius: 0 !important;
    background: color-mix(in srgb, var(--ui-bg) 86%, transparent) !important;
    box-shadow: none !important;
    backdrop-filter: blur(22px) saturate(1.35);
    -webkit-backdrop-filter: blur(22px) saturate(1.35);
}

.app-shell .brand-lockup {
    width: auto !important;
    height: 46px !important;
    min-width: 170px;
    align-self: auto;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: var(--ui-text) !important;
    transform: none !important;
}
.app-shell .brand-lockup:hover { background: var(--ui-surface-2) !important; transform: none !important; }
.app-shell .brand-mark {
    width: 28px !important;
    height: 28px !important;
    border-radius: 9px !important;
    background: var(--ui-text) !important;
    box-shadow: none !important;
}
.app-shell .brand-dot { width: 8px; height: 8px; background: var(--ui-bg) !important; }
.app-shell .brand-copy { display: flex !important; }
.app-shell .brand-copy strong { color: var(--ui-text); font-size: 13px; font-weight: 700; }
.app-shell .brand-copy small { color: var(--ui-muted); font-size: 9px; font-weight: 500; }
.app-shell .brand-api-link {
    height: 30px;
    padding: 0 10px;
    margin-left: -14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ui-line) !important;
    border-radius: 9px;
    color: var(--ui-muted) !important;
    background: transparent;
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}
.app-shell .brand-api-link:hover { color: var(--ui-text) !important; background: var(--ui-surface-2); }

.app-shell > .sidebar nav {
    width: auto !important;
    flex: 1;
    height: 100%;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center;
    gap: 4px !important;
}

.app-shell .nav-item,
.app-shell > .sidebar:hover .nav-item {
    width: auto !important;
    height: 38px !important;
    flex: 0 0 auto !important;
    padding: 0 13px !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 7px !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: var(--ui-muted) !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}
.app-shell .nav-item:hover { color: var(--ui-text) !important; background: var(--ui-surface-2) !important; }
.app-shell .nav-item.active {
    color: var(--ui-text) !important;
    background: var(--ui-surface) !important;
    box-shadow: inset 0 0 0 1px var(--ui-line), var(--ui-shadow-sm) !important;
}
.app-shell .nav-item.active::after { content: none !important; }
.app-shell .nav-item svg { width: 15px !important; height: 15px !important; }
.app-shell .nav-text {
    display: inline !important;
    max-width: none !important;
    margin: 0 !important;
    opacity: 1 !important;
    overflow: visible !important;
    color: inherit;
    font-size: 12px !important;
    line-height: 1;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

.app-shell .side-actions {
    width: auto !important;
    margin: 0 !important;
    flex: 0 0 auto;
    flex-direction: row !important;
    align-items: center !important;
    gap: 5px !important;
}
.app-shell .side-pill,
.app-shell > .sidebar:hover .side-pill {
    width: 36px !important;
    height: 36px !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: var(--ui-muted) !important;
    background: transparent !important;
}
.app-shell .side-pill:hover,
.app-shell .side-pill.active { color: var(--ui-text) !important; background: var(--ui-surface-2) !important; }
.app-shell .side-pill svg { width: 15px; height: 15px; }
.app-shell .side-pill-text { display: none !important; }
.app-shell .update-now-btn { display: none !important; }

.app-shell > .stage {
    position: relative !important;
    inset: auto !important;
    flex: 1;
    min-height: 0;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--ui-bg) !important;
    box-shadow: none !important;
}
.app-shell .stage-state { background: color-mix(in srgb,var(--ui-bg) 88%,transparent) !important; }
.app-shell .stage-state-card {
    border: 1px solid var(--ui-line) !important;
    border-radius: 18px !important;
    background: var(--ui-surface) !important;
    box-shadow: var(--ui-shadow) !important;
}
.app-shell .stage-state-spinner { border-top-color: var(--ui-green) !important; }
.app-shell .nano-monitor {
    left: 20px !important;
    bottom: 18px !important;
    padding: 5px 10px !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb,var(--ui-surface) 88%,transparent) !important;
    color: var(--ui-muted) !important;
    box-shadow: var(--ui-shadow-sm) !important;
    backdrop-filter: blur(16px);
}
.app-shell .nano-monitor .stat-group { color: var(--ui-muted) !important; font-size: 9px; }
.app-shell .nano-monitor .pulse-dot { background: var(--ui-green) !important; }

/* ================================================================
   ONLINE GENERATION — balanced studio, restrained hierarchy
   ================================================================ */

.container-box {
    max-width: 1480px !important;
    min-height: 100vh;
    padding: 44px 42px 72px !important;
    background: var(--ui-bg) !important;
}
.container-box .page-header {
    align-items: flex-end !important;
    margin-bottom: 30px !important;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--ui-line);
}
.container-box .page-title {
    margin: 0 !important;
    color: var(--ui-text) !important;
    font-size: clamp(34px,3.5vw,50px) !important;
    line-height: 1 !important;
    font-weight: 680 !important;
    letter-spacing: -.05em !important;
}
.container-box .page-subtitle {
    margin-top: 11px !important;
    color: var(--ui-muted) !important;
    font-size: 13px !important;
    font-weight: 450 !important;
}
.container-box .workspace-badge {
    height: 30px !important;
    padding: 0 11px !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 999px !important;
    background: var(--ui-surface) !important;
    color: var(--ui-muted) !important;
    box-shadow: none !important;
    transform: none !important;
}
.container-box .workspace-badge::before { background: var(--ui-green) !important; box-shadow: none !important; }
.container-box .create-layout { gap: 28px !important; align-items: stretch !important; }
.container-box .creator-stack {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.container-box .creator-section {
    padding: 18px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-sm);
}
.container-box .creator-section + .creator-section { margin-top: 12px !important; }
.container-box .section-heading { margin-bottom: 11px !important; color: var(--ui-muted) !important; }
.container-box .section-heading-main { color: var(--ui-text); font-size: 11px; }
.container-box .section-index {
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 6px !important;
    background: var(--ui-surface-2) !important;
    color: var(--ui-muted) !important;
}
.container-box .nano-input {
    min-height: 142px !important;
    border: 1px solid transparent !important;
    border-radius: 13px !important;
    background: var(--ui-surface-2) !important;
    color: var(--ui-text) !important;
}
.container-box .nano-input:focus {
    border-color: color-mix(in srgb,var(--ui-blue) 55%,transparent) !important;
    background: var(--ui-surface) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb,var(--ui-blue) 10%,transparent) !important;
}
.container-box .upload-item {
    border: 1px dashed var(--ui-line-strong) !important;
    border-radius: 13px !important;
    background: var(--ui-surface-2) !important;
}
.container-box .upload-item:hover { border-color: var(--ui-muted) !important; background: var(--ui-surface) !important; transform: none !important; }
.container-box .tool-panel {
    margin-top: 12px !important;
    padding: 14px !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: var(--ui-radius) !important;
    background: var(--ui-surface) !important;
    box-shadow: var(--ui-shadow-sm);
}
.container-box .control-panel,
.container-box .model-pill { background: var(--ui-surface-2) !important; border-color: transparent !important; }
.container-box .size-select,
.container-box .size-custom,
.container-box .size-fit-btn { background: var(--ui-surface) !important; color: var(--ui-text) !important; border-color: var(--ui-line) !important; }
.container-box .glass-btn {
    min-height: 50px !important;
    margin-top: 12px !important;
    border-radius: 13px !important;
    background: var(--ui-dark) !important;
    color: var(--ui-dark-text) !important;
    box-shadow: none !important;
}
.container-box .glass-btn:hover { transform: translateY(-1px) !important; box-shadow: 0 10px 24px rgba(0,0,0,.12) !important; }
.container-box .result-frame {
    min-height: 650px !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 22px !important;
    background: var(--ui-surface-2) !important;
    background-image: none !important;
    box-shadow: none !important;
}
.container-box .archive-section { margin-top: 68px !important; }
.container-box .masonry-item { border-radius: 15px !important; border-color: var(--ui-line) !important; }

/* ================================================================
   GPT CHAT — OpenAI-like content focus, light composer
   ================================================================ */

.chat-shell { background: var(--ui-bg) !important; }
.chat-shell .topbar {
    height: 66px !important;
    padding: 0 30px !important;
    border-bottom: 1px solid var(--ui-line) !important;
    background: color-mix(in srgb,var(--ui-bg) 88%,transparent) !important;
    backdrop-filter: blur(18px) !important;
}
.chat-shell .topbar-inner { width: min(1080px,100%) !important; height: 100% !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.chat-shell .title-block h1 { color: var(--ui-text); font-size: 14px !important; font-weight: 650 !important; }
.chat-shell .title-block p { color: var(--ui-green) !important; font-size: 9px !important; font-weight: 650 !important; }
.chat-shell .top-actions .action-btn {
    height: 34px !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 10px !important;
    background: var(--ui-surface) !important;
    color: var(--ui-muted) !important;
}
.chat-shell .messages { padding: 48px 34px 238px !important; gap: 22px !important; }
.chat-shell .bubble-row { width: min(880px,100%) !important; }
.chat-shell .bubble { font-size: 14px !important; line-height: 1.72 !important; }
.chat-shell .bubble.user {
    max-width: min(620px,78%) !important;
    border-radius: 17px 17px 5px 17px !important;
    background: var(--ui-surface-2) !important;
    color: var(--ui-text) !important;
}
.chat-shell .bubble.assistant {
    padding: 5px 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.chat-shell .chat-empty {
    width: min(760px,100%) !important;
    align-items: center !important;
    text-align: center !important;
}
.chat-shell .chat-empty-icon {
    width: 44px !important;
    height: 44px !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 14px !important;
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    box-shadow: var(--ui-shadow-sm) !important;
    transform: none !important;
}
.chat-shell .chat-empty h2 { margin-top: 18px !important; color: var(--ui-text); font-size: clamp(26px,3vw,38px) !important; font-weight: 650 !important; letter-spacing: -.04em !important; }
.chat-shell .chat-empty p { color: var(--ui-muted) !important; }
.chat-shell .chat-suggestions { margin-top: 26px !important; gap: 9px !important; }
.chat-shell .chat-suggestion {
    min-height: 74px !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 14px !important;
    background: var(--ui-surface) !important;
    color: var(--ui-muted) !important;
    box-shadow: none !important;
}
.chat-shell .chat-suggestion:hover { border-color: var(--ui-line-strong) !important; color: var(--ui-text) !important; transform: none !important; }
.chat-shell .composer-wrap {
    padding: 18px 34px 24px !important;
    background: linear-gradient(to top,var(--ui-bg) 76%,transparent) !important;
}
.chat-shell .composer {
    width: min(920px,100%) !important;
    min-height: 154px !important;
    padding: 8px !important;
    border: 1px solid var(--ui-line-strong) !important;
    border-radius: 20px !important;
    background: var(--ui-surface) !important;
    box-shadow: 0 12px 38px rgba(0,0,0,.09) !important;
}
.chat-shell .composer-body { min-height: 136px !important; border-radius: 13px !important; background: var(--ui-surface) !important; }
.chat-shell textarea { color: var(--ui-text) !important; }
.chat-shell .mode-switch,
.chat-shell .provider-switch,
.chat-shell .mini-ratio,
.chat-shell .resolution-toggle { background: var(--ui-surface-2) !important; border-color: transparent !important; }
.chat-shell .provider-select,
.chat-shell .gpt2-size-select,
.chat-shell .attach-btn { background: var(--ui-surface) !important; color: var(--ui-text) !important; border-color: var(--ui-line) !important; }
.chat-shell .send-btn { width: 36px !important; height: 36px !important; border-radius: 11px !important; background: var(--ui-dark) !important; color: var(--ui-dark-text) !important; }

/* ================================================================
   API SETTINGS — horizontal provider switcher, single content column
   ================================================================ */

.page {
    min-height: 100vh;
    padding: 42px 34px 70px !important;
    background: var(--ui-bg) !important;
}
.page .wrap { max-width: 1180px !important; }
.page .page-head {
    align-items: flex-end !important;
    padding-bottom: 24px !important;
    margin-bottom: 18px !important;
    border-bottom: 1px solid var(--ui-line) !important;
}
.page .title { color: var(--ui-text); font-size: clamp(32px,3.4vw,46px) !important; font-weight: 680 !important; letter-spacing: -.045em !important; }
.page .sub { margin-top: 8px !important; color: var(--ui-muted) !important; font-size: 12px !important; }
.page .layout { display: block !important; }
.page .sidebar {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 16px !important;
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    box-shadow: var(--ui-shadow-sm) !important;
}
.page .side-section-title { flex: 0 0 auto; padding: 0 8px; color: var(--ui-faint) !important; }
.page .provider-list { flex: 1; display: flex !important; flex-direction: row !important; gap: 6px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; overflow-x: auto; }
.page .provider-card {
    width: auto !important;
    min-width: 190px;
    min-height: 46px;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    background: var(--ui-surface-2) !important;
    color: var(--ui-muted) !important;
}
.page .provider-card:hover { color: var(--ui-text) !important; border-color: var(--ui-line) !important; }
.page .provider-card.active {
    border-color: var(--ui-text) !important;
    background: var(--ui-text) !important;
    color: var(--ui-bg) !important;
}
.page .provider-card.active .provider-name,
.page .provider-card.active .provider-meta { color: var(--ui-bg) !important; }
.page .provider-card.active .provider-mark { background: rgba(255,255,255,.12) !important; color: var(--ui-bg) !important; }
.page .api-link-btn {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 112px;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 10px !important;
    color: var(--ui-muted) !important;
    background: var(--ui-surface) !important;
}
.page .content {
    margin-top: 14px;
    padding: 26px !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 20px !important;
    background: var(--ui-surface) !important;
    box-shadow: var(--ui-shadow-sm) !important;
}
.page .content-head { padding: 0 0 20px !important; border-bottom: 1px solid var(--ui-line); }
.page .editor-title { color: var(--ui-text); font-size: 19px !important; }
.page .block {
    margin-top: 16px !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 16px !important;
    background: var(--ui-surface) !important;
}
.page .block-head { border-bottom-color: var(--ui-line) !important; }
.page .field-frame,
.page .key-group-card,
.page .model-row { background: var(--ui-surface-2) !important; border-color: transparent !important; }
.page .key-group-grid { gap: 10px !important; }
.page .key-group-card { border-radius: 13px !important; box-shadow: none !important; }
.page .key-group-card:first-child,
.page .key-group-card:nth-child(2) { box-shadow: none !important; }
.page .key-group-tag { background: var(--ui-surface); border-color: var(--ui-line) !important; }
.page .action-btn.save-btn {
    border-color: var(--ui-dark) !important;
    border-radius: 10px !important;
    background: var(--ui-dark) !important;
    color: var(--ui-dark-text) !important;
}

/* ================================================================
   CLASSIC CANVAS — neutral workspace, no decorative hero card
   ================================================================ */

.canvas-gate {
    padding: 34px !important;
    background-color: var(--ui-bg) !important;
    background-image: radial-gradient(var(--ui-line-strong) .7px,transparent .7px) !important;
    background-size: 26px 26px !important;
}
.canvas-gate .gate-panel {
    width: min(1120px,100%) !important;
    padding: 28px !important;
    overflow: visible !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 22px !important;
    background: color-mix(in srgb,var(--ui-surface) 94%,transparent) !important;
    box-shadow: var(--ui-shadow) !important;
    backdrop-filter: blur(22px);
}
.canvas-gate .gate-head {
    margin: 0 0 22px !important;
    padding: 0 0 22px !important;
    align-items: center !important;
    border-bottom: 1px solid var(--ui-line);
    background: transparent !important;
    color: var(--ui-text) !important;
}
.canvas-gate .gate-title { color: var(--ui-text) !important; font-size: 27px !important; font-weight: 680 !important; letter-spacing: -.035em !important; }
.canvas-gate .gate-subtitle { color: var(--ui-muted) !important; }
.canvas-gate .gate-count-pill { background: var(--ui-surface-2) !important; border-color: transparent !important; color: var(--ui-muted) !important; }
.canvas-gate .gate-icon-btn { background: var(--ui-surface) !important; border-color: var(--ui-line) !important; color: var(--ui-muted) !important; }
.canvas-gate #gateCreateBtn { background: var(--ui-dark) !important; color: var(--ui-dark-text) !important; border-color: var(--ui-dark) !important; }
.canvas-gate .gate-tools {
    margin-top: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.canvas-gate .gate-list { margin-top: 18px !important; }
.canvas-gate .canvas-item {
    border: 1px solid var(--ui-line) !important;
    border-radius: 16px !important;
    background: var(--ui-surface) !important;
    box-shadow: none !important;
}
.canvas-gate .canvas-item:hover { border-color: var(--ui-line-strong) !important; transform: translateY(-2px); box-shadow: var(--ui-shadow-sm) !important; }
.canvas-gate .canvas-item.active { border-color: var(--ui-text) !important; background: var(--ui-surface) !important; }
.shell .panel {
    border: 1px solid var(--ui-line) !important;
    border-radius: 14px !important;
    background: color-mix(in srgb,var(--ui-surface) 88%,transparent) !important;
    box-shadow: var(--ui-shadow-sm) !important;
}
.shell .tool-btn { border-radius: 10px !important; background: var(--ui-surface) !important; color: var(--ui-muted) !important; border-color: var(--ui-line) !important; }
.shell .board { background-color: var(--ui-bg) !important; background-image: radial-gradient(var(--ui-line-strong) .7px,transparent .7px) !important; background-size: 26px 26px !important; }
.shell .canvas-empty-help { border-radius: 18px !important; background: var(--ui-surface) !important; }

/* ================================================================
   SMART CANVAS — quiet floating controls, content remains central
   ================================================================ */

.world {
    background-color: var(--ui-bg) !important;
    background-image: radial-gradient(var(--ui-line-strong) .7px,transparent .7px) !important;
    background-size: 26px 26px !important;
}
.smart-back,
.smart-quick-add,
.smart-help-toggle,
.smart-view-controls,
.asset-toggle {
    border-color: var(--ui-line) !important;
    background: color-mix(in srgb,var(--ui-surface) 92%,transparent) !important;
    color: var(--ui-text) !important;
    box-shadow: var(--ui-shadow-sm) !important;
    backdrop-filter: blur(18px);
}
.smart-back { border-radius: 12px !important; }
.smart-quick-add { border-radius: 12px !important; background: var(--ui-dark) !important; color: var(--ui-dark-text) !important; }
.smart-help-toggle { border-radius: 12px !important; color: var(--ui-muted) !important; }
.smart-empty-start {
    width: min(520px,calc(100vw - 40px)) !important;
    padding: 26px !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 20px !important;
    background: color-mix(in srgb,var(--ui-surface) 94%,transparent) !important;
    box-shadow: var(--ui-shadow) !important;
}
.smart-empty-icon {
    border: 1px solid var(--ui-line) !important;
    border-radius: 13px !important;
    background: var(--ui-surface-2) !important;
    color: var(--ui-text) !important;
    transform: none !important;
}
.smart-empty-start h2 { color: var(--ui-text) !important; font-size: 20px !important; font-weight: 680 !important; }
.smart-empty-start p { color: var(--ui-muted) !important; }
.smart-empty-action,
.smart-empty-action:nth-child(2),
.smart-empty-action:nth-child(3) {
    min-height: 70px !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 13px !important;
    background: var(--ui-surface) !important;
    color: var(--ui-muted) !important;
}
.smart-empty-action:hover { border-color: var(--ui-line-strong) !important; color: var(--ui-text) !important; background: var(--ui-surface-2) !important; }
.composer-card {
    border: 1px solid var(--ui-line) !important;
    border-radius: 18px !important;
    background: color-mix(in srgb,var(--ui-surface) 96%,transparent) !important;
    box-shadow: var(--ui-shadow) !important;
}
.composer-card .prompt-input { background: var(--ui-surface-2) !important; color: var(--ui-text) !important; }
.composer-card .run-btn { background: var(--ui-dark) !important; color: var(--ui-dark-text) !important; }
.asset-panel { border-color: var(--ui-line) !important; background: var(--ui-surface) !important; }

/* ================================================================
   DARK MODE CORRECTIONS
   ================================================================ */

html.studio-theme-dark .container-box,
html.studio-theme-dark .chat-shell,
html.studio-theme-dark .page,
.theme-dark .canvas-gate,
.theme-dark .world { background: var(--ui-bg) !important; }
html.studio-theme-dark .container-box .creator-section,
html.studio-theme-dark .container-box .tool-panel,
html.studio-theme-dark .page .sidebar,
html.studio-theme-dark .page .content,
html.studio-theme-dark .page .block,
.theme-dark .canvas-gate .gate-panel,
.theme-dark .smart-empty-start,
.theme-dark .composer-card { background: var(--ui-surface) !important; }
html.studio-theme-dark .chat-shell .composer-wrap { background: linear-gradient(to top,var(--ui-bg) 76%,transparent) !important; }
html.studio-theme-dark .chat-shell .composer,
html.studio-theme-dark .chat-shell .composer-body { background: var(--ui-surface) !important; }
html.studio-theme-dark .page .provider-card.active { background: var(--ui-text) !important; color: var(--ui-bg) !important; }

/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 980px) {
    .app-shell > .sidebar,
    .app-shell > .sidebar:hover { gap: 10px; padding-inline: 14px !important; }
    .app-shell .brand-lockup { min-width: 42px; width: 42px !important; padding: 0 7px !important; }
    .app-shell .brand-copy { display: none !important; }
    .app-shell .brand-api-link { margin-left: -6px; }
    .app-shell .nav-item,
    .app-shell > .sidebar:hover .nav-item { padding-inline: 10px !important; }
    .container-box { padding-inline: 24px !important; }
}

@media (max-width: 700px) {
    .app-shell > .sidebar,
    .app-shell > .sidebar:hover {
        position: fixed !important;
        inset: auto 10px 8px !important;
        width: calc(100% - 20px) !important;
        height: calc(66px + env(safe-area-inset-bottom)) !important;
        min-height: 0 !important;
        padding: 7px 10px calc(7px + env(safe-area-inset-bottom)) !important;
        border: 1px solid var(--ui-line) !important;
        border-radius: 18px !important;
        background: color-mix(in srgb,var(--ui-surface) 92%,transparent) !important;
        box-shadow: var(--ui-shadow) !important;
    }
    .app-shell .brand-lockup { display: none !important; }
    .app-shell .brand-api-link { display: none !important; }
    .app-shell > .sidebar nav { justify-content: space-around !important; }
    .app-shell .nav-item,
    .app-shell > .sidebar:hover .nav-item {
        width: 50px !important;
        height: 50px !important;
        flex-basis: 50px !important;
        padding: 5px 3px !important;
        flex-direction: column !important;
        gap: 4px !important;
    }
    .app-shell .nav-text { font-size: 9px !important; }
    .app-shell .side-actions { gap: 2px !important; }
    .app-shell .side-actions .side-pill,
    .app-shell > .sidebar:hover .side-actions .side-pill { width: 32px !important; height: 42px !important; }
    .app-shell .side-actions .side-pill { display: none !important; }
    .app-shell .side-actions .side-pill:nth-child(1),
    .app-shell .side-actions .side-pill:nth-child(3) { display: flex !important; }
    .app-shell > .stage { position: fixed !important; inset: 0 0 calc(84px + env(safe-area-inset-bottom)) !important; }
    .container-box { padding: 28px 14px 52px !important; }
    .container-box .page-header { align-items: flex-start !important; }
    .container-box .page-title { font-size: 32px !important; }
    .container-box .creator-section,
    .container-box .tool-panel,
    .container-box .result-frame { border-radius: 15px !important; }
    .chat-shell .topbar { padding-inline: 14px !important; }
    .chat-shell .messages { padding-inline: 16px !important; }
    .chat-shell .composer-wrap { padding-inline: 12px !important; }
    .chat-shell .composer { border-radius: 16px !important; }
    .page { padding: 28px 14px 56px !important; }
    .page .page-head { align-items: flex-start !important; }
    .page .sidebar { align-items: stretch !important; flex-wrap: wrap; }
    .page .side-section-title { width: 100%; }
    .page .provider-list { width: 100%; }
    .page .provider-card { min-width: 160px; }
    .page .api-link-btn { width: 100%; }
    .page .content { padding: 16px !important; border-radius: 16px !important; }
    .canvas-gate { padding: 12px !important; }
    .canvas-gate .gate-panel { padding: 20px !important; border-radius: 18px !important; }
    .canvas-gate .gate-head { align-items: stretch !important; }
}

@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}