* { box-sizing: border-box; }
body { background: #0F172A; color: #E2E8F0; font-family: 'DM Sans', system-ui, sans-serif; overflow-x: hidden; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0F172A; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

.grid-bg {
  background-image: linear-gradient(rgba(59,130,246,0.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(59,130,246,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}
.glow-blue { box-shadow: 0 0 20px rgba(59,130,246,0.2), 0 0 60px rgba(59,130,246,0.05); }

.drop-zone { transition: all .2s ease; border: 2px dashed #334155; }
.drop-zone.dragging { border-color: #3B82F6; background: rgba(59,130,246,0.05); }
.drop-zone:hover { border-color: #475569; }

.log-entry { font-family: 'JetBrains Mono', monospace; font-size: 11px; padding: 2px 0; }
.log-entry.info { color: #60A5FA; }
.log-entry.success { color: #34D399; }
.log-entry.error { color: #F87171; }
.log-entry.warn { color: #FBBF24; }

.btn-primary { background: linear-gradient(135deg,#3B82F6,#2563EB); transition: all .2s ease; }
.btn-primary:hover { background: linear-gradient(135deg,#60A5FA,#3B82F6); box-shadow: 0 0 20px rgba(59,130,246,.4); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-secondary { background:#1E293B; border:1px solid #334155; transition: all .15s ease; }
.btn-secondary:hover { background:#293548; border-color:#475569; }

.spinner { border:2px solid rgba(255,255,255,.1); border-top-color:#fff; border-radius:50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.panel-accent { border-top: 1px solid #3B82F6; }
.accordion-btn { width:100%; display:flex; align-items:center; justify-content:space-between; padding:8px 0 4px; cursor:pointer; }
.accordion-title { font-size:11px; font-weight:600; color:#94A3B8; text-transform:uppercase; letter-spacing:.08em; }
.accordion-arrow { transition: transform .2s; color:#64748B; }
.accordion-arrow.open { transform: rotate(180deg); }

.furn-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:6px; border:1px solid #334155; background:rgba(51,65,85,.4); color:#94A3B8; font-size:11px; cursor:pointer; transition:all .15s; user-select:none; }
.furn-chip:hover { border-color:#475569; color:#CBD5E1; }
input[type=checkbox].furn-input:checked + .furn-chip { background:rgba(59,130,246,.15); border-color:#3B82F6; color:#60A5FA; }
input[type=checkbox].furn-input { display:none; }

.mat-swatch-label { display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer; }
.mat-swatch { width:28px; height:28px; border-radius:6px; border:2px solid transparent; transition:all .15s; }
.mat-swatch:hover { transform: scale(1.1); }
input[type=radio].mat-radio { display:none; }
input[type=radio].mat-radio:checked + .mat-swatch { border-color:#3B82F6; box-shadow: 0 0 0 2px rgba(59,130,246,.3); }
.mat-swatch-label span { font-size:9px; color:#64748B; white-space:nowrap; text-align:center; }

.badge { font-size:10px; font-weight:600; letter-spacing:.05em; padding:2px 8px; border-radius:20px; }

/* Tabs */
.tab-btn { padding:6px 14px; border-radius:8px; font-size:13px; font-weight:600; color:#94A3B8; cursor:pointer; border:1px solid transparent; transition:all .15s; }
.tab-btn:hover { color:#CBD5E1; }
.tab-btn.active { background:rgba(59,130,246,.15); color:#60A5FA; border-color:#3B82F6; }
.tab-panel { display:none; }
.tab-panel.active { display:flex; }

/* 2D editor canvas */
#editor-canvas { width:100% !important; height:100% !important; display:block; cursor:crosshair; border-radius:12px; }
#viewer-canvas { width:100% !important; height:100% !important; display:block; }

/* Chat */
.chat-msg { font-size:12px; padding:6px 10px; border-radius:8px; margin-bottom:6px; max-width:100%; }
.chat-msg.user { background:rgba(59,130,246,.18); color:#dbeafe; align-self:flex-end; }
.chat-msg.ai { background:rgba(51,65,85,.6); color:#cbd5e1; }
.chat-msg.preview { background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.4); color:#a7f3d0; }

#toast { transition: all .3s ease; }
.field-input { background:rgba(51,65,85,.5); border:1px solid #334155; color:#e2e8f0; font-size:12px; border-radius:6px; padding:4px 8px; width:100%; }
.field-input:focus { outline:none; border-color:#3B82F6; }

@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } }