:root{
  color-scheme: dark;
  --bg: #000;
  --panel: #0b0b0b;
  --muted: #9aa0a6;
  --accent: #c6c6c6;
  --border: #1c1c1c;
  --glass: rgba(255,255,255,0.02);
  font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}

html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--accent);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

#app{
  display:flex;
  flex-direction:column;
  height:100vh;
  overflow:hidden;
}

/* Topbar */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 10px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  min-height:40px;
}
.topbar .brand{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:700;
  color:var(--accent);
  font-size:13px;
}
/* new: small brand logo */
.topbar .brand .brand-logo{
  width:20px;
  height:20px;
  object-fit:contain;
  border-radius:4px;
  background:transparent;
  display:inline-block;
}
/* small badge next to brand */
.topbar .brand .badge{
  font-size:10px;
  color:var(--accent);
  background:rgba(255,255,255,0.02);
  padding:3px 6px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--muted);
  font-weight:600;
  letter-spacing:0.2px;
  transform:translateY(-1px);
}
.toolbar{
  display:flex;
  gap:6px;
  align-items:center;
  margin-left:6px;
}
.toolbar button{
  background:var(--glass);
  border:1px solid var(--border);
  color:var(--accent);
  padding:4px 6px; /* reduced */
  border-radius:4px;
  cursor:pointer;
  font-size:12px;
}
.toolbar button:hover{ filter:brightness(1.08) }

.segmented{
  display:inline-flex;
  background:transparent;
  border-radius:6px;
  overflow:hidden;
  border:1px solid var(--border);
}
.segmented .view-mode{
  padding:6px 8px;
  border:none;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-size:13px;
}
.segmented .view-mode.active{
  background:rgba(255,255,255,0.03);
  color:var(--accent);
}

/* Main layout */
.main{
  display:flex;
  flex:1;
  min-height:0;
}

/* Panels */
.panel{
  width:200px; /* slightly narrower for compact sidebar */
  background:var(--panel);
  border-right:1px solid var(--border);
  box-sizing:border-box;
  padding:8px; /* tightened padding */
  overflow:auto;
}
.panel.right{ border-right:none; border-left:1px solid var(--border); }

.panel h3{
  margin:0 0 8px 0;
  font-size:13px;
  color:var(--muted);
}
/* add header container to hold title + mini button */
.panel-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
  flex-direction:column; /* stack tabs and actions to keep aligned */
  padding-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,0.02);
}
/* keep compact tab row */
.panel-header > div:first-child{ display:flex; gap:8px; align-items:center; }
/* compact action row beneath tabs */
.panel-header > div:nth-child(2){ display:flex; gap:6px; align-items:center; width:100%; justify-content:flex-start; margin-top:6px; }
.panel-tab{
  background:transparent;
  color:var(--muted);
  border:1px solid var(--border);
  padding:2px 4px; /* reduced further to match compact horizontal buttons */
  border-radius:6px;
  cursor:pointer;
  font-size:11px; /* kept compact */
  height:18px; /* enforce compact height */
  line-height:18px; /* center text vertically */
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.icon-mini{
  width:18px; /* reduced from 26px */
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:5px;
  background:transparent;
  border:1px solid var(--border);
  color:var(--muted);
  cursor:pointer;
  font-weight:700;
  font-size:12px; /* smaller icon text */
}
.icon-mini:hover{ background:rgba(255,255,255,0.03); color:var(--accent); border-color:rgba(255,255,255,0.04); }

/* Slight visual adjustment for undo/redo icons inside mini buttons */
/* ensure material-icons or <i> inside icon-mini don't intercept pointer events and fit size */
.icon-mini i,
.icon-mini .material-icons {
  pointer-events:none;
  display:inline-block;
  line-height:1;
  vertical-align:middle;
}
/* disabled look */
.icon-mini[disabled] { cursor:not-allowed; opacity:0.6; }

/* asset grid tiles */
#asset-grid .asset-tile{
  background:rgba(255,255,255,0.02);
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  cursor:pointer;
  transition:transform 140ms, background 120ms;
}
#asset-grid .asset-tile:hover{ transform:translateY(-4px); background:rgba(255,255,255,0.03); }
.asset-thumb{
  width:100%;
  height:78px;
  border-radius:6px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  font-size:12px;
  overflow:hidden;
}
.asset-label{ font-size:13px; color:var(--accent); text-align:center; }

/* Viewport */
.viewport-wrapper{
  flex:1;
  position:relative;
  display:flex;
  background:transparent;
}
.viewport{
  flex:1;
  background:transparent;
}

/* Overlay */
.overlay{
  position:absolute;
  z-index:10;
  pointer-events:none;
}
.overlay.top-left{
  left:12px;
  top:12px;
}
#info{
  font-size:12px;
  color:var(--muted);
  background:rgba(0,0,0,0.4);
  padding:6px 8px;
  border-radius:6px;
}

/* Scene list */
.scene-list{
  list-style:none;
  padding:6px 6px 12px 6px; /* reduce padding and align with header */
  margin:8px 0 0 0;
  max-height: calc(100vh - 220px); /* keep list scrollable and fit panels */
  overflow:auto;
  box-sizing:border-box;
}
.scene-list li{
  position:relative;
  padding:8px 44px 8px 40px; /* leave space for inline checkbox + menu */
  border-radius:6px;
  margin-bottom:6px;
  cursor:pointer;
  background:transparent;
  color:var(--accent);
  border:1px solid transparent;
  font-size:13px;
  display:flex;
  align-items:center;
  gap:8px;
}
/* inline checkbox placement tuned */
.scene-inline-cb{
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  display:none;
}
/* when visible, shift label nicely */
.scene-list li .scene-item-label{ padding-left:0; margin-left:0; }
.scene-list li:hover{ background:rgba(255,255,255,0.02); border-color:var(--border) }
.scene-list li.selected{ background:rgba(255,255,255,0.03); border-color:rgba(255,255,255,0.04) }

/* Scene item label */
.scene-item-label{ display:inline-block; vertical-align:middle; }

/* Properties */
.properties .prop{
  margin-bottom:10px;
  font-size:13px;
  color:var(--muted);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.properties .prop.rel { margin-top:6px; }
.properties .prop label{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px }
.properties .prop .value{ color:var(--accent); padding:6px 8px; background:rgba(255,255,255,0.02); border-radius:6px; font-size:13px }
.properties .prop.rel select {
  background:transparent;
  color:var(--accent);
  border:1px solid var(--border);
  padding:6px 8px; /* slightly larger for touch and readability */
  border-radius:6px;
  font-size:13px;
  width:100%;            /* ensure selects take the full available width */
  box-sizing:border-box;
  display:block;         /* force each select to sit on its own line */
  margin-top:0;          /* keep spacing controlled by container gap */
}
.properties .prop.rel select.full-width {
  width:100%;
}

/* simple modal menu for scene items */
.modal{ position:fixed; z-index:60; pointer-events:auto; }
.modal.hidden{ display:none; }
.modal-card{
  background:var(--panel);
  border:1px solid var(--border);
  padding:6px;
  border-radius:8px;
  min-width:160px;
  box-shadow:0 8px 24px rgba(0,0,0,0.6);
}
.scene-menu-list{ list-style:none; margin:0; padding:0; }
.scene-menu-list li{
  padding:8px 10px;
  font-size:13px;
  color:var(--muted);
  cursor:pointer;
  border-radius:6px;
}
.scene-menu-list li:hover{ background:rgba(255,255,255,0.02); color:var(--accent) }

.vector-row{ display:flex; gap:6px; align-items:center; }
.vector-row input{
  width:48px;
  min-width:44px;
  max-width:80px;
  padding:6px 6px;
  background:transparent;
  color:var(--accent);
  border:1px solid var(--border);
  border-radius:4px;
  font-size:13px;
  flex:1 1 auto;
}

/* Transform tools */
.transform-tools .tool{
  padding:6px 8px;
  border-radius:4px;
  background:transparent;
  border:1px solid var(--border);
  color:var(--muted);
  cursor:pointer;
}
.transform-tools .tool.active{
  background:rgba(255,255,255,0.03);
  color:var(--accent);
}

/* Footer */
.statusbar{
  height:32px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 12px;
  border-top:1px solid var(--border);
  font-size:12px;
  color:var(--muted);
  background:linear-gradient(0deg, rgba(255,255,255,0.01), transparent);
}

/* Group modal tweaks */
#group-modal .modal-card { min-width:300px; max-width:420px; }
#group-modal input[type="checkbox"] { width:16px; height:16px; accent-color:#1e6fff; }

/* Group confirm button vibrant style when enabled is applied inline in JS but keep fallback */
#group-confirm[disabled] { opacity:0.9; cursor:not-allowed; }

/* Responsive */
@media (max-width: 900px){
  /* Panels remain visible on small screens: use smaller fixed flex-basis and allow scrolling */
  .panel{ display:block; flex:0 0 160px; width:160px; min-width:120px; max-width:220px; }
  .panel.right{ flex:0 0 160px; width:160px; min-width:120px; max-width:220px; }
  .topbar{ padding:6px 8px }
}

@media (max-width: 600px){
  /* Tighter layout for very small screens while keeping panels visible */
  .properties .prop{ gap:6px; }
  .vector-row{ flex-direction:row; gap:6px; }
  .vector-row input{ width:36px; min-width:32px; font-size:12px; padding:5px 6px; }
}

/* Ensure canvas fills viewport area */
.viewport canvas{
  width:100%;
  height:100%;
  display:block;
}

.item-menu-btn{
  position:absolute;
  right:6px;
  width:30px;
  height:28px;
  top:50%;
  transform:translateY(-50%);
  font-size:13px;
  background:rgba(255,255,255,0.02);
  border:1px solid transparent;
  color:var(--muted);
  padding:0;
  border-radius:6px;
  cursor:pointer;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background 150ms, color 150ms, border-color 150ms, transform 120ms;
}
.item-menu-btn:hover{
  background:rgba(255,255,255,0.035);
  color:var(--accent);
  border-color:rgba(255,255,255,0.04);
  transform:translateY(-50%) scale(1.03);
}
.item-menu-btn:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(51,204,255,0.06);
  border-color:rgba(51,204,255,0.12);
}

.scene-item-label{
  display:inline-block;
  vertical-align:middle;
  max-width: calc(100% - 56px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Settings icon button in toolbar */
.icon-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px; /* reduced from 28px */
  height:20px;
  border-radius:6px;
  background:transparent;
  border:1px solid var(--border);
  color:var(--muted);
  cursor:pointer;
  padding:0;
  font-size:12px;
}
.icon-btn:hover { background:rgba(255,255,255,0.03); color:var(--accent); border-color:rgba(255,255,255,0.04); }
.icon-btn:focus { outline:none; box-shadow:0 0 0 4px rgba(51,204,255,0.06); border-color:rgba(51,204,255,0.12); }
.icon-btn.active { background:rgba(30,111,255,0.12); color:#dfefff; border-color:rgba(30,111,255,0.22); }
/* small additional visual hint specifically for map toggle when active */
#toggle-map-btn.active { box-shadow:0 6px 18px rgba(30,111,255,0.06); transform:rotate(12deg); transition:transform 160ms, box-shadow 160ms; }

/* Renderizer fullscreen overlay */
#renderizer-overlay { position:fixed; inset:0; z-index:75; pointer-events:auto; background:transparent; transition:background 240ms ease; }

/* renderizer hint and indicator polish */
#renderizer-hint {
  position:fixed;
  left:12px;
  top:12px;
  color:var(--muted);
  font-size:13px;
  z-index:80;
  pointer-events:none;
  background:rgba(0,0,0,0.36);
  padding:8px 10px;
  border-radius:8px;
  border:1px solid var(--border);
  box-shadow:0 6px 20px rgba(0,0,0,0.6);
}

/* improved renderizer indicator styles (recording / photo / error) */
#renderizer-indicator {
  position:fixed;
  right:12px;
  top:12px;
  color:#fff;
  font-size:13px;
  z-index:90;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-end;
  min-width:160px;
  justify-content:center;
  transition:transform 180ms ease, opacity 220ms ease;
}
#renderizer-indicator .ind-row { display:flex; align-items:center; gap:8px; background:rgba(0,0,0,0.36); padding:8px 10px; border-radius:8px; border:1px solid var(--border); box-shadow:0 8px 26px rgba(0,0,0,0.6); }
#renderizer-indicator .ind-row i { font-size:16px; width:18px; text-align:center; color:inherit; }
#renderizer-indicator .ind-text { font-size:13px; color:var(--accent); }

/* recording specific */
#renderizer-indicator.recording-indicator .ind-row { background: linear-gradient(90deg, rgba(30,111,255,0.12), rgba(30,111,255,0.06)); border-color: rgba(30,111,255,0.15); }
#renderizer-indicator.recording-indicator .ind-row i { color:#ff5a5a; transform:scale(1.04); }

/* photo success specific */
#renderizer-indicator.photo-indicator .ind-row { background: linear-gradient(90deg, rgba(34,197,94,0.08), rgba(34,197,94,0.03)); border-color: rgba(34,197,94,0.12); }
#renderizer-indicator.photo-indicator .ind-row i { color:#22c55e; }

/* error specific */
#renderizer-indicator.error-indicator .ind-row { background: linear-gradient(90deg, rgba(220,38,38,0.06), rgba(220,38,38,0.03)); border-color: rgba(220,38,38,0.12); }
#renderizer-indicator.error-indicator .ind-row i { color:#ff6b6b; }

/* color preset buttons inside properties */
.color-preset { cursor:pointer; outline:none; }
.color-preset:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,0.5); border-color:rgba(255,255,255,0.04); }
/* ensure color input blends with theme */
.properties input[type="color"] { border:1px solid var(--border); background:transparent; padding:2px; border-radius:6px; }

/* Settings modal centered card tweaks */
#settings-modal .settings-card {
  min-width:520px;
  max-width:720px;
  padding:12px;
}
/* layout: nav + content */
.settings-grid {
  display:flex;
  gap:12px;
}
/* Shadow compare floating panel */
.shadow-compare-panel{
  position:fixed;
  right:18px;
  top:84px;
  z-index:120;
  background:var(--panel);
  border:1px solid var(--border);
  padding:8px;
  border-radius:10px;
  box-shadow:0 8px 30px rgba(0,0,0,0.6);
  display:flex;
  gap:8px;
  align-items:center;
}
.shadow-compare-panel .label { color:var(--muted); font-size:13px; padding-right:6px; }
.shadow-compare-panel .toggle-btn { padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--accent); cursor:pointer; }
.shadow-compare-panel .toggle-btn.active { background:#1e6fff; color:#fff; border-color:rgba(30,111,255,0.15); }

/* layout: nav + content */
.settings-grid {
  display:flex;
  gap:12px;
}
.settings-nav {
  width:140px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.settings-tab {
  text-align:left;
  padding:8px 10px;
  border-radius:8px;
  background:transparent;
  color:var(--muted);
  border:1px solid var(--border);
  cursor:pointer;
  font-size:13px;
}
.settings-tab.active { background:rgba(255,255,255,0.02); color:var(--accent); border-color:rgba(255,255,255,0.03); }
.settings-content {
  flex:1;
  min-height:120px;
}
.settings-panel { display:none; }
.settings-panel.active { display:block; }
.settings-section-title { font-weight:700; color:var(--accent); margin-bottom:8px; font-size:13px; }
.setting-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px;
  border-radius:8px;
  background:transparent;
  border:1px solid transparent;
  margin-bottom:8px;
  color:var(--muted);
}
.setting-row input[type="checkbox"] { width:18px; height:18px; accent-color:#1e6fff; }

/* FPS controls small input style */
#opt-fps-select {
  background:transparent;
  color:var(--accent);
  border:1px solid var(--border);
  padding:6px 8px;
  border-radius:6px;
  font-size:13px;
}
#opt-fps-custom {
  background:transparent;
  color:var(--accent);
  border:1px solid var(--border);
  padding:6px 8px;
  border-radius:6px;
  font-size:13px;
}

/* buttons used in settings */
.btn-primary {
  background:#1e6fff;
  color:#fff;
  padding:8px 12px;
  border-radius:8px;
  border:1px solid rgba(30,111,255,0.15);
  cursor:pointer;
}
.btn-secondary {
  background:transparent;
  color:var(--muted);
  padding:8px 12px;
  border-radius:8px;
  border:1px solid var(--border);
  cursor:pointer;
}

/* startup prompt centering fallback: modal already fixed, ensure visible */
#startup-prompt .modal-card { text-align:left; }

/* center all modals to viewport where appropriate */
.modal-card {
  background:var(--panel);
  border:1px solid var(--border);
  padding:6px;
  border-radius:8px;
  min-width:160px;
  box-shadow:0 8px 24px rgba(0,0,0,0.6);
  position:relative;
}
/* ensure modals like settings/startup appear centered */
#settings-modal,
#startup-prompt {
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  position:fixed;
  z-index:70;
  pointer-events:auto;
}

/* ensure scene menu remains absolute near items (override positioning) */
#scene-menu { position:fixed; transform:none; top:auto; left:auto; }

/* Responsive shrink for settings modal */
@media (max-width:800px){
  #settings-modal .settings-card { min-width:360px; max-width:92vw; }
  .settings-grid { flex-direction:column; }
  .settings-nav { width:100%; flex-direction:row; gap:6px; overflow:auto; }
  .settings-tab { flex:1; white-space:nowrap; }
}

/* Time popup styles */
.time-popup {
  position:fixed;
  z-index:95;
  left:50%;
  bottom:48px;
  transform:translateX(-50%);
  background:var(--panel);
  border:1px solid var(--border);
  padding:10px;
  border-radius:10px;
  box-shadow:0 10px 40px rgba(0,0,0,0.6);
  min-width:260px;
  max-width:92%;
  backdrop-filter: blur(6px);
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:stretch;
}
.time-popup.hidden { display:none; }
.time-row {
  display:flex;
  justify-content:center;
  gap:8px;
  margin:0;
  align-items:center;
}
/* compact control buttons */
.time-btn {
  background:transparent;
  border:1px solid var(--border);
  color:var(--muted);
  padding:8px;
  width:38px;
  height:38px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:16px;
}
.time-btn.primary {
  background:rgba(30,111,255,0.12);
  color:#dfefff;
  border-color:rgba(30,111,255,0.18);
}
.time-btn.playing { box-shadow:0 6px 20px rgba(30,111,255,0.08); }
.time-btn:hover { transform:translateY(-2px); color:var(--accent); border-color:rgba(255,255,255,0.04); }

.timeline-row {
  display:flex;
  gap:8px;
  align-items:center;
  width:100%;
}
.time-text {
  font-size:12px;
  color:var(--muted);
  min-width:48px;
  text-align:center;
}
/* make range expand to available width and visually clear */
#time-range {
  -webkit-appearance:none;
  appearance:none;
  height:8px;
  background:linear-gradient(90deg,#1e6fff 0%, #1e6fff 0%, rgba(255,255,255,0.06) 0%);
  border-radius:8px;
  width:100%;
  flex:1 1 auto;
  outline:none;
}
#time-range::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:14px; height:14px; border-radius:50%; background:#fff; border:2px solid #1e6fff; cursor:pointer;
}
#time-range::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:#fff; border:2px solid #1e6fff; cursor:pointer; }

/* ensure Material Symbols font matches sizing used */
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24; display:inline-block; line-height:1; }

/* Frames track editor styles — tightened and more compact */
.frames-editor {
  display:flex;
  gap:8px;
  margin-top:6px;
  align-items:center;
  width:100%;
}
#time-preview {
  background:rgba(0,0,0,0.6);
  border-radius:6px;
  border:1px solid var(--border);
  box-shadow:0 6px 18px rgba(0,0,0,0.5);
  flex:0 0 56px;
  width:56px;
  height:36px;
  display:block;
}
.frames-track {
  flex:1 1 auto;
  display:flex;
  gap:6px;
  overflow-x:auto;
  padding:4px;
  align-items:center;
  height:36px;
  border-radius:8px;
  background:linear-gradient(90deg, rgba(255,255,255,0.01), transparent);
  border:1px solid rgba(255,255,255,0.02);
  scrollbar-width: thin;
}
.frame-thumb {
  width:44px;
  height:28px;
  flex:0 0 auto;
  background:#111;
  border-radius:6px;
  overflow:hidden;
  border:2px solid transparent;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.frame-thumb img, .frame-thumb canvas { width:100%; height:100%; object-fit:cover; display:block; }
.frame-thumb .frame-index {
  position:absolute;
  left:6px;
  bottom:4px;
  font-size:10px;
  line-height:1;
  color:var(--muted);
  background:rgba(0,0,0,0.36);
  padding:2px 5px;
  border-radius:4px;
  border:1px solid var(--border);
}
.frame-thumb.selected { border-color:#1e6fff; box-shadow:0 6px 10px rgba(30,111,255,0.06); transform:translateY(-1px); }
.frame-thumb:hover { transform:translateY(-1px); box-shadow:0 8px 16px rgba(0,0,0,0.5); }
/* ensure preview canvas scales nicely on small screens */
@media (max-width:600px){
  .frames-editor { gap:6px; }
  #time-preview { flex:0 0 48px; width:48px; height:30px; }
  .frame-thumb { width:36px; height:24px; }
  .time-text { min-width:44px; font-size:11px; }
  .time-btn { width:34px; height:34px; padding:6px; font-size:14px; }
}