/* ========================================================================== NOVO Studio — application design system Dual theme: light (white, default) + dark (navy blue) via . Single source of truth for index.html. ========================================================================== */ :root { /* ------------------------------------------------ light theme (default) */ --bg-0: #ffffff; /* editor / viewport chrome */ --bg-1: #f7f9fc; /* panels */ --bg-2: #eef2f8; /* raised surfaces */ --bg-3: #e3eaf4; /* hover / inputs */ --line: #dbe3ef; /* borders */ --line-soft: #e7edf6; --text-1: #16233a; /* primary text */ --text-2: #4a5872; /* secondary text */ --text-3: #8b97ad; /* muted text */ --accent: #2f7df6; /* brand blue */ --accent-strong: #1d5fd0; --accent-contrast: #ffffff; --accent-2: #17b98a; /* brand green */ --danger: #d64545; --accent-dim: rgba(47, 125, 246, 0.10); --grad-brand: linear-gradient(135deg, #2f7df6, #17b98a); --code-text: #24344f; --chat-user-bg: linear-gradient(135deg, rgba(47, 125, 246, 0.10), rgba(23, 185, 138, 0.08)); --chat-user-border: rgba(47, 125, 246, 0.30); --scroll-thumb: #ccd6e6; /* type */ --font-ui: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: "Cascadia Code", "JetBrains Mono", "Fira Code", Consolas, monospace; /* metrics */ --radius-s: 6px; --radius-m: 10px; --shadow-1: 0 1px 2px rgba(13, 27, 46, 0.08); --shadow-2: 0 12px 40px rgba(13, 27, 46, 0.18); } /* ---------------------------------------------------- dark theme (navy) */ :root[data-theme="dark"] { --bg-0: #0a1220; --bg-1: #0e1828; --bg-2: #142033; --bg-3: #1a2a44; --line: #22334f; --line-soft: #182640; --text-1: #e8eefa; --text-2: #93a5c4; --text-3: #5b6c8c; --accent: #6eb3ff; --accent-strong: #85c0ff; --accent-contrast: #0a1220; --accent-2: #38d9a0; --danger: #ff6b6b; --accent-dim: rgba(110, 179, 255, 0.12); --grad-brand: linear-gradient(135deg, #6eb3ff, #38d9a0); --code-text: #c9d4e8; --chat-user-bg: linear-gradient(135deg, rgba(110, 179, 255, 0.16), rgba(56, 217, 160, 0.10)); --chat-user-border: rgba(110, 179, 255, 0.25); --scroll-thumb: #22334f; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 12px 40px rgba(0, 0, 0, 0.55); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-ui); background: var(--bg-1); color: var(--text-1); overflow: hidden; height: 100vh; font-size: 13px; -webkit-font-smoothing: antialiased; transition: background 0.2s; } ::selection { background: rgba(47, 125, 246, 0.25); } /* --------------------------------------------------------------- scrollbars */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 5px; border: 2px solid var(--bg-1); } /* ------------------------------------------------------------------- layout */ .app-shell { display: flex; flex-direction: column; height: 100vh; } .app-body { flex: 1; display: flex; min-height: 0; } /* ------------------------------------------------------------------ app bar */ .app-bar { display: flex; align-items: center; gap: 16px; height: 52px; padding: 0 16px; background: var(--bg-1); border-bottom: 1px solid var(--line); flex-shrink: 0; } .brand { display: flex; align-items: center; gap: 10px; padding-right: 16px; border-right: 1px solid var(--line); } .brand .logo { width: 28px; height: 28px; background: var(--grad-brand); border-radius: 7px; display: grid; place-items: center; font-size: 13px; color: #ffffff; font-weight: 800; letter-spacing: -0.5px; } .brand .name { font-size: 14px; font-weight: 700; letter-spacing: 0.2px; } .brand .name span { color: var(--text-3); font-weight: 500; } .app-bar .spacer { flex: 1; } .bar-group { display: flex; align-items: center; gap: 6px; } .bar-group + .bar-group { padding-left: 16px; border-left: 1px solid var(--line); } /* ------------------------------------------------------------------ buttons */ button { font-family: var(--font-ui); } .btn { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-2); color: var(--text-2); border: 1px solid var(--line); padding: 6px 12px; border-radius: var(--radius-s); font-size: 12px; font-weight: 500; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; white-space: nowrap; } .btn svg { width: 14px; height: 14px; flex-shrink: 0; } .btn:hover { background: var(--bg-3); border-color: var(--text-3); color: var(--text-1); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* --------------------------------------- facade (dollhouse) view toggle */ .facade-toggle { display: block; width: 100%; margin-bottom: 10px; padding: 8px 10px; background: var(--bg-2); color: var(--text-1); border: 1px solid var(--line); border-radius: var(--radius-s); font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .facade-toggle:hover:not(:disabled) { background: var(--bg-3); border-color: var(--accent); } .facade-toggle.active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent-strong); } .facade-toggle:disabled { opacity: 0.45; cursor: default; } .facade-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); font-weight: 600; } .btn.primary:hover { background: var(--accent-strong); } .btn.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); } .btn.ghost { background: transparent; border-color: transparent; } .btn.ghost:hover { background: var(--bg-3); } .btn.small { padding: 4px 8px; font-size: 11px; } select.control { background: var(--bg-2); color: var(--text-2); border: 1px solid var(--line); padding: 6px 10px; border-radius: var(--radius-s); font-size: 12px; font-family: var(--font-ui); cursor: pointer; transition: border-color 0.15s; } select.control:hover { border-color: var(--text-3); color: var(--text-1); } select.control:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* ------------------------------------------------------------- editor panel */ .editor-panel { width: 340px; min-width: 280px; display: flex; flex-direction: column; background: var(--bg-1); border-right: 1px solid var(--line); } .panel-title { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; font-size: 11px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.8px; border-bottom: 1px solid var(--line-soft); flex-shrink: 0; min-height: 38px; } .panel-title .actions { display: flex; gap: 4px; } #coords-input { flex: 1; width: 100%; background: var(--bg-0); color: var(--code-text); border: none; padding: 14px 16px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65; resize: none; outline: none; tab-size: 2; } #coords-input::placeholder { color: var(--text-3); } .status-bar { padding: 8px 14px; background: var(--bg-1); border-top: 1px solid var(--line); font-size: 11px; color: var(--text-3); font-family: var(--font-mono); min-height: 34px; line-height: 1.5; } .status-bar.err { color: var(--danger); } /* ----------------------------------------------------------------- viewport */ .viewport-panel { flex: 1; display: flex; flex-direction: column; position: relative; min-width: 0; } .main-viewport { flex: 1; position: relative; background: var(--bg-0); } .main-viewport .canvas-wrap { position: absolute; inset: 0; } #canvas-main { width: 100%; height: 100%; display: block; } .viewport-hint { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--text-3); background: color-mix(in srgb, var(--bg-1) 80%, transparent); border: 1px solid var(--line-soft); padding: 4px 12px; border-radius: 999px; pointer-events: none; backdrop-filter: blur(6px); } .edit-mode-active #canvas-main { cursor: crosshair; } #line-tooltip { position: fixed; background: var(--bg-1); color: var(--code-text); padding: 5px 10px; border-radius: var(--radius-s); font-size: 11px; font-family: var(--font-mono); pointer-events: none; z-index: 1000; border: 1px solid var(--line); box-shadow: var(--shadow-1); display: none; } #line-tooltip.hidden { display: none !important; } /* --------------------------------------------------------------- side panel */ .side-panel { width: 300px; min-width: 260px; background: var(--bg-1); border-left: 1px solid var(--line); display: flex; flex-direction: column; } .panel-section { border-bottom: 1px solid var(--line-soft); } .panel-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 11px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.8px; } .panel-header .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); } #layer-controls { padding: 4px 14px 12px; max-height: 180px; overflow-y: auto; } .layer-item { display: flex; align-items: center; gap: 8px; padding: 5px 6px; font-size: 12px; border-radius: var(--radius-s); } .layer-item:hover { background: var(--bg-2); } .layer-item input[type="checkbox"] { accent-color: var(--accent); } .layer-item label { cursor: pointer; color: var(--text-1); } .layer-color-indicator { width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--line); } .group-item { padding-left: 18px; color: var(--text-2); } .no-layers { font-size: 12px; color: var(--text-3); padding: 6px; } /* -------------------------------------------------------------- edit panel */ #edit-panel { padding: 4px 14px 14px; } #edit-panel.hidden { display: none; } #edit-info { font-size: 11px; color: var(--text-3); margin-bottom: 10px; } .edit-mode-selector { display: flex; gap: 14px; margin-bottom: 12px; } .edit-mode-selector label { font-size: 12px; color: var(--text-2); cursor: pointer; display: flex; align-items: center; gap: 5px; } .edit-mode-selector input[type="radio"] { accent-color: var(--accent); } .edit-field { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .edit-field label { width: 18px; font-size: 11px; color: var(--text-2); font-weight: 700; text-align: center; } .edit-field input { flex: 1; min-width: 0; background: var(--bg-0); border: 1px solid var(--line); color: var(--code-text); padding: 6px 8px; border-radius: var(--radius-s); font-size: 12px; font-family: var(--font-mono); } .edit-field input:focus { outline: none; border-color: var(--accent); } .edit-field .edit-label { font-size: 10px; color: var(--text-3); min-width: 52px; } .edit-buttons { display: flex; gap: 8px; margin-top: 10px; } .edit-buttons button { flex: 1; padding: 7px; border-radius: var(--radius-s); font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid var(--line); background: var(--bg-2); color: var(--text-2); transition: background 0.15s; } .edit-buttons button:hover { background: var(--bg-3); color: var(--text-1); } #edit-save-btn { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); font-weight: 600; } #edit-save-btn:hover { background: var(--accent-strong); } /* ---------------------------------------------------------------- assistant */ .assistant-section { flex: 1; display: flex; flex-direction: column; min-height: 0; border-bottom: none; } .assistant-panel { padding: 0 14px 14px; flex: 1; display: flex; flex-direction: column; min-height: 0; } .chat-messages { flex: 1; overflow-y: auto; padding: 4px 2px 10px; font-size: 12.5px; line-height: 1.55; display: flex; flex-direction: column; gap: 10px; } .chat-message { padding: 9px 12px; border-radius: var(--radius-m); white-space: pre-wrap; word-break: break-word; max-width: 92%; } .chat-message.assistant { background: var(--bg-2); border: 1px solid var(--line-soft); color: var(--text-1); align-self: flex-start; border-bottom-left-radius: 3px; } .chat-message.user { background: var(--chat-user-bg); border: 1px solid var(--chat-user-border); color: var(--text-1); align-self: flex-end; border-bottom-right-radius: 3px; } .chat-input-row { display: flex; gap: 8px; } .chat-input-row input { flex: 1; min-width: 0; background: var(--bg-0); border: 1px solid var(--line); color: var(--text-1); padding: 9px 12px; border-radius: var(--radius-s); font-size: 12.5px; font-family: var(--font-ui); transition: border-color 0.15s; } .chat-input-row input:focus { outline: none; border-color: var(--accent); } .chat-input-row input::placeholder { color: var(--text-3); } .chat-input-row button { background: var(--grad-brand); color: #ffffff; border: none; padding: 9px 16px; border-radius: var(--radius-s); font-size: 12px; font-weight: 700; cursor: pointer; transition: opacity 0.15s, transform 0.1s; } .chat-input-row button:hover { opacity: 0.9; } .chat-input-row button:active { transform: scale(0.97); } .chat-input-row button:disabled { opacity: 0.45; cursor: wait; } /* -------------------------------------------------------------------- modal */ .modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(10, 18, 32, 0.55); z-index: 2000; justify-content: center; align-items: center; backdrop-filter: blur(4px); } .modal { background: var(--bg-1); border: 1px solid var(--line); border-radius: 14px; width: 92%; max-width: 720px; max-height: 82vh; overflow-y: auto; padding: 26px 28px; box-shadow: var(--shadow-2); } .modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .modal-head h2 { font-size: 17px; color: var(--text-1); font-weight: 700; } .modal-close { background: none; border: 1px solid var(--line); color: var(--text-2); width: 30px; height: 30px; border-radius: var(--radius-s); cursor: pointer; font-size: 14px; display: grid; place-items: center; } .modal-close:hover { background: var(--bg-3); color: var(--text-1); } .lang-switch { display: flex; gap: 8px; margin-bottom: 18px; } .lang-switch .btn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } .help-doc { font-size: 12.5px; line-height: 1.8; color: var(--text-1); } .help-doc h3 { color: var(--accent); margin: 16px 0 8px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; } .help-doc h3:first-child { margin-top: 0; } .help-doc ul { list-style: none; padding: 0; } .help-doc li { margin-bottom: 2px; } .help-doc code { background: var(--bg-0); border: 1px solid var(--line-soft); padding: 2px 7px; border-radius: 4px; color: var(--accent-2); font-family: var(--font-mono); font-size: 11.5px; } /* --------------------------------------------------------------- responsive */ @media (max-width: 1100px) { .editor-panel { width: 300px; } .side-panel { width: 260px; } }