:root{
  color-scheme:light;
  --bg:#f6f7fb;
  --panel:#ffffff;
  --ink:#111827;
  --muted:#667085;
  --line:#d9deea;
  --accent:#ce2f63;
  --accent-strong:#a91f4c;
  --blue:#2563eb;
  --shadow:0 20px 58px rgba(28,35,56,.16);
}

*{box-sizing:border-box}

html,
body{
  width:100%;
  min-height:100%;
  margin:0;
}

body{
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--ink);
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(238,241,249,.92) 52%, rgba(255,255,255,.96)),
    var(--bg);
}

button,
input{
  font:inherit;
}

.app-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 372px;
  gap:22px;
  padding:22px;
}

.viewer-panel,
.control-panel{
  background:var(--panel);
  border:1px solid rgba(217,222,234,.8);
  box-shadow:var(--shadow);
}

.viewer-panel{
    position: relative;
    min-height: calc(100vh - 44px);
    display: grid;
    /* grid-template-rows: auto 1fr; */
    overflow: hidden;
}

.viewer-toolbar{
  height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 18px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px);
  z-index:2;
}

.brand-link{
  color:var(--ink);
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  letter-spacing:.02em;
}

.view-buttons{
  display:flex;
  gap:8px;
}

.icon-btn{
  width:36px;
  height:36px;
  border:1px solid var(--line);
  border-radius:8px;
  color:#253047;
  background:#fff;
  cursor:pointer;
  font-size:12px;
  font-weight:900;
}

.icon-btn:hover{
  border-color:#b8c1d6;
  background:#f8fafc;
}

.turntable-wrap{
  position:relative;
  min-height:0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.7) 24%, rgba(239,243,250,.28) 48%, rgba(219,226,239,.64) 100%),
    linear-gradient(180deg, #fbfcff 0%, #edf1f8 100%);
}

.turntable-canvas{
  display:block;
  width:100%;
  height:100%;
  min-height:640px;
  outline:none;
  cursor:grab;
}

.turntable-canvas:active{
  cursor:grabbing;
}

.drag-hint{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  padding:8px 12px;
  border:1px solid rgba(170,180,204,.76);
  border-radius:999px;
  color:#344054;
  background:rgba(255,255,255,.78);
  font-size:12px;
  font-weight:800;
  pointer-events:none;
}

.control-panel{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px;
  overflow:auto;
}

.panel-head h1{
  margin:0;
  font-size:20px;
  line-height:1.1;
}

.panel-head p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}

.control-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.hidden{
  display:none !important;
}

.cert-form{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 98px;
  gap:8px;
}

.cert-input{
  width:100%;
  min-height:36px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:0 12px;
  color:var(--ink);
  background:#fff;
  font-size:12px;
  font-weight:750;
  outline:none;
}

.cert-input:focus{
  border-color:#9fb0d5;
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}

.cert-button{
  min-height:36px;
}

.status-line{
  min-height:18px;
  color:var(--muted);
  font-size:12px;
  font-weight:750;
}

.field,
.range-field{
  display:grid;
  gap:6px;
}

.field span,
.range-field span{
  color:#263249;
  font-size:11px;
  font-weight:850;
}

.field input[type="color"]{
  width:100%;
  height:44px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
}

.compact-select{
  width:100%;
  min-height:34px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:0 8px;
  color:var(--ink);
  background:#fff;
  font-size:12px;
  font-weight:700;
}

.mode-layout-row{
  display:grid;
  gap:6px;
}

.mode-layout-label{
  color:#263249;
  font-size:11px;
  font-weight:850;
}

.color-row{
    display: flex;
}

.color-chip{
    display: grid;
    gap: 1px;
    padding: 10px 30px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fcfdff;
}

.color-chip span{
  color:#263249;
  font-size:11px;
  font-weight:850;
}

.color-chip input[type="color"]{
  width:100%;
  height:34px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
}

.color-chip-handle{
  width:22px;
  height:16px;
  border:1px solid var(--line);
  border-radius:6px;
  color:#667085;
  font-size:11px;
  font-weight:900;
  line-height:14px;
  text-align:center;
  cursor:grab;
  user-select:none;
}

.color-chip.dragging{
  opacity:.56;
}

.color-chip.drop-target{
  border-color:#9fb0d5;
  background:#f4f8ff;
}

.transparent-toggle{
  display:none;
  align-items:center;
  gap:6px;
  font-size:10px;
  font-weight:800;
  color:#475467;
}

.transparent-toggle input[type="checkbox"]{
  width:13px;
  height:13px;
  accent-color:var(--accent);
}

.color-chip.is-transparent input[type="color"]{
  opacity:.6;
}

.segmented{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:4px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#f8fafc;
}

.segment{
  min-height:30px;
  border:0;
  border-radius:7px;
  color:#4b5567;
  background:transparent;
  cursor:pointer;
  font-size:11px;
  font-weight:850;
}

.segment.active{
  color:#fff;
  background:linear-gradient(135deg, var(--accent), var(--blue));
  box-shadow:0 8px 18px rgba(79,70,229,.18);
}

.range-field strong{
  color:var(--accent-strong);
  font-weight:900;
}

input[type="range"]{
  width:100%;
  accent-color:var(--accent);
}

.switch-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.sparkle-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 0.85fr 0.55fr 0.72fr;
  gap:8px;
  align-items:center;
}

.switch{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:0 8px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  color:#354052;
  font-size:11px;
  font-weight:800;
}

.sparkle-switch{
  min-width:0;
}

.sparkle-select{
  min-width:0;
  min-height:34px;
  padding:0 7px;
  font-size:11px;
  font-weight:800;
}

.sparkle-select:disabled{
  color:#98a2b3;
  background:#f8fafc;
}

.switch input{
  width:15px;
  height:15px;
  accent-color:var(--accent);
}

.button-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.file-button,
.primary-button{
  display:grid;
  place-items:center;
  min-height:34px;
  border-radius:8px;
  cursor:pointer;
  text-align:center;
  font-size:12px;
  font-weight:900;
}

.file-button{
  border:1px solid #b9c2d7;
  color:#243149;
  background:#fff;
}

.primary-button{
  border:1px solid var(--accent-strong);
  color:#fff;
  background:linear-gradient(135deg, var(--accent), var(--accent-strong));
}

@media (max-width: 980px){
  .app-shell{
    grid-template-columns:1fr;
    padding:12px;
  }

  .viewer-panel{
    min-height:68vh;
  }

  .turntable-canvas{
    min-height:520px;
  }

  .control-panel{
    overflow:visible;
  }
}

@media (max-width: 560px){
  .viewer-toolbar{
    height:auto;
    min-height:54px;
    padding:10px 12px;
  }

  .brand-link{
    font-size:12px;
  }

  .turntable-canvas{
    min-height:430px;
  }

  .control-grid,
  .cert-form,
  .switch-row,
  .button-row{
    grid-template-columns:1fr;
  }

  .sparkle-row{
    grid-template-columns:1fr 1fr 64px 76px;
  }

  .color-row{
    grid-template-columns:1fr;
  }

}