* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #0f1115;
  color: #f5f7fa;
  display: grid;
  grid-template-columns: 340px 1fr;
  min-height: 100vh;
}
.sidebar {
  border-right: 1px solid #252b34;
  background: linear-gradient(180deg, #161b22, #11161c);
  overflow: auto;
}
.sidebar-header, .sidebar-actions { padding: 18px 20px; }
.sidebar-header h1 { margin: 0 0 8px; font-size: 22px; }
.sidebar-header p { margin: 0; color: #98a2b3; line-height: 1.5; }
.sidebar-actions {
  display: flex;
  gap: 10px;
  border-top: 1px solid #252b34;
  border-bottom: 1px solid #252b34;
}
button {
  border: 1px solid #3a4656;
  background: #1a2330;
  color: #f5f7fa;
  border-radius: 10px;
  padding: 9px 12px;
  cursor: pointer;
}
button:hover { background: #243140; }
.scene-list {
  padding: 14px;
  display: grid;
  gap: 12px;
}
.scene-card {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 12px;
  padding: 10px;
  border: 1px solid #252b34;
  border-radius: 14px;
  background: #131922;
}
.scene-card.active { border-color: #78a6ff; box-shadow: 0 0 0 1px #78a6ff inset; }
.scene-card.deleted { opacity: 0.45; }
.scene-card img { width: 108px; height: 68px; object-fit: cover; border-radius: 10px; }
.scene-card-title { font-weight: 600; margin-bottom: 6px; }
.scene-card-meta { color: #98a2b3; font-size: 13px; line-height: 1.4; }
.main {
  display: grid;
  grid-template-rows: 1fr 240px;
  min-height: 100vh;
}
.viewer-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#panorama {
  position: relative;
  flex: 1;
  min-height: 0;
}
.flat-view {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
    #0d1117;
  overflow: auto;
  padding: 24px;
}
#panorama-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.35);
  background: #111;
}
.viewer-toolbar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 0 18px 18px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(9, 13, 18, 0.78);
  backdrop-filter: blur(10px);
}
.viewer-toolbar strong { display: block; font-size: 18px; margin-bottom: 4px; }
#scene-meta { color: #c9d1db; font-size: 14px; }
.toolbar-buttons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.exposure-panel {
  border-top: 1px solid #252b34;
  background: #121720;
  padding: 16px 18px 20px;
  overflow: auto;
}
.exposure-panel h2 { margin: 0 0 14px; font-size: 18px; }
.exposure-list {
  display: flex;
  gap: 14px;
}
.exposure-card {
  min-width: 240px;
  border: 1px solid #252b34;
  border-radius: 14px;
  overflow: hidden;
  background: #18202b;
}
.exposure-card.selected { border-color: #78a6ff; box-shadow: 0 0 0 1px #78a6ff inset; }
.exposure-card img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  display: block;
}
.exposure-card button {
  width: calc(100% - 20px);
  margin: 0 10px 12px;
}
.exposure-card-body {
  padding: 12px 12px 10px;
  line-height: 1.5;
  color: #c7d0da;
  font-size: 14px;
}
@media (max-width: 1100px) {
  body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .sidebar { max-height: 42vh; }
  .main { min-height: auto; }
}