:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f4f7fb;
  background: #07111d;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #12263d 0, #07111d 46%, #050a11 100%); }
button, select, input { font: inherit; }

.app-shell {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(340px, 430px) minmax(0, 1fr);
  gap: 20px;
  padding: 20px 0;
  align-items: start;
}

.controls-card, .viewer-card {
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(10,21,34,.86);
  backdrop-filter: blur(18px);
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
}

.controls-card { padding: 20px; display: flex; flex-direction: column; gap: 16px; max-height: calc(100vh - 40px); overflow: auto; }
.viewer-card { padding: 20px; min-height: calc(100vh - 40px); display: flex; flex-direction: column; position: sticky; top: 20px; }

h1 { margin: 3px 0 7px; font-size: clamp(1.7rem, 3vw, 2.35rem); letter-spacing: -.04em; }
h2 { margin: 4px 0 0; font-size: 1.1rem; font-weight: 650; }
.eyebrow { margin: 0; text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; color: #83dfff; font-weight: 700; }
.intro { color: #aab8c8; line-height: 1.45; margin: 0; font-size: .9rem; }

.config-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(0,0,0,.18);
  border-radius: 13px;
}
.config-tab {
  border: 0;
  background: transparent;
  color: #718096;
  border-radius: 9px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 700;
}
.config-tab.active { background: rgba(255,255,255,.12); color: #f8fbff; }
.tab-number {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid currentColor;
  display: inline-grid;
  place-items: center;
  font-size: .7rem;
  line-height: 1;
}
.config-tab.active .tab-number { background: #f5f8fb; color: #111820; border-color: #f5f8fb; }

.tab-panel { animation: tabFade .14s ease; }
@keyframes tabFade { from { opacity: .55; transform: translateY(2px); } to { opacity: 1; transform: none; } }

.control-group { display: grid; gap: 9px; }
.section-label-row, .label-row, .volume-readout, .viewer-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
label { font-weight: 650; font-size: .9rem; }
select {
  width: 100%;
  padding: 11px 12px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.1);
  background: #0c1928;
  color: white;
  outline: none;
}
select:focus { border-color: #6cdcff; box-shadow: 0 0 0 3px rgba(108,220,255,.12); }
.meta { min-height: 18px; color: #7f93a8; font-size: .78rem; line-height: 1.4; }

.dimension-panel {
  margin-top: 2px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 13px;
  background: rgba(255,255,255,.022);
}
.compact-panel { display: grid; gap: 4px; }
.dimension-control {
  display: grid;
  grid-template-columns: 68px 28px minmax(80px, 1fr) 28px 60px;
  gap: 7px;
  align-items: center;
  min-height: 39px;
}
.dimension-label { color: #92a2b1; font-size: .8rem; font-weight: 600; }
.dimension-value { color: #f2f8fc; font-size: .82rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; min-width: 0; accent-color: #eef6fb; margin: 0; }

.step-button {
  width: 28px;
  height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.025);
  color: #b7c3cd;
  cursor: pointer;
  line-height: 1;
  font-size: 1rem;
  user-select: none;
}
.step-button:hover { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.07); color: white; }
.step-button:active { transform: translateY(1px); }

.text-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #72dcff;
  cursor: pointer;
  font-size: .76rem;
}
.text-button:hover { text-decoration: underline; }

.fill-group { padding-top: 2px; }
.fill-slider-row { display: grid; grid-template-columns: 28px 1fr 28px; gap: 8px; align-items: center; }
.volume-readout { border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); padding: 10px 12px; border-radius: 12px; }
.volume-readout span { color: #9dafc0; font-size: .82rem; }
.volume-readout strong { font-size: 1.05rem; }

.fit-status { border-radius: 13px; padding: 12px 13px; font-weight: 650; line-height: 1.35; font-size: .86rem; }
.fit-status.good { border: 1px solid rgba(100,240,182,.25); background: rgba(51,181,128,.12); color: #a9f4d2; }
.fit-status.bad { border: 1px solid rgba(255,112,112,.25); background: rgba(194,64,64,.12); color: #ffc0c0; }
.fit-status.warn { border: 1px solid rgba(255,204,102,.25); background: rgba(191,137,28,.12); color: #ffe1a6; }

.details-card { border-top: 1px solid rgba(255,255,255,.08); padding-top: 12px; }
summary { cursor: pointer; color: #c8d4df; font-size: .84rem; }
.details-grid { margin-top: 10px; display: grid; gap: 7px; color: #91a4b7; font-size: .8rem; }
.details-grid div { display: flex; justify-content: space-between; gap: 12px; }
.details-grid strong { color: #dbe8f2; font-weight: 600; }

.viewer-heading { padding: 2px 3px 14px; }
.viewer-note { color: #7f93a8; font-size: .78rem; }
.viewer { flex: 1; min-height: 560px; border-radius: 17px; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); position: relative; }
.viewer canvas { width: 100%; height: 100%; display: block; }

[hidden] { display: none !important; }

@media (max-width: 850px) {
  .app-shell { grid-template-columns: 1fr; width: min(100% - 16px, 720px); padding: 8px 0 18px; }
  .controls-card { max-height: none; overflow: visible; }
  .viewer-card { position: static; min-height: 540px; }
  .viewer { min-height: 470px; }
}

@media (max-width: 430px) {
  .controls-card, .viewer-card { border-radius: 16px; padding: 14px; }
  .dimension-control { grid-template-columns: 60px 28px minmax(65px, 1fr) 28px 54px; gap: 5px; }
  .dimension-label, .dimension-value { font-size: .75rem; }
}

/* V1.4 segmented presets */
.preset-segments {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(0,0,0,.18);
  border-radius: 11px;
}
.preset-segment {
  min-width: 0;
  border: 0;
  background: transparent;
  color: #7f8e9d;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  font-size: .8rem;
  white-space: nowrap;
}
.preset-segment:hover { color: #dce7ef; background: rgba(255,255,255,.045); }
.preset-segment.active { color: #f8fbff; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.035); }
.ice-categories { margin-bottom: 3px; }
.preset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.ice-preset {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
  color: #9caab7;
  padding: 9px 8px;
  border-radius: 9px;
  cursor: pointer;
  font-weight: 650;
  font-size: .77rem;
  line-height: 1.2;
}
.ice-preset:hover { color: #e7f0f6; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.055); }
.ice-preset.active { color: #fff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.16); }

.brand-logo { display:block; width:min(210px,72%); max-height:74px; object-fit:contain; object-position:left center; margin:0 0 12px; }
.measurement-note { margin:5px 0 2px; padding:10px 12px; border:1px solid rgba(131,223,255,.18); background:rgba(131,223,255,.055); border-radius:10px; color:#9fb0c2; font-size:.78rem; line-height:1.45; }
.measurement-note strong { color:#dff7ff; }

/* V1.4.4 heading refinement */
.designer-title { font-size: 1.55rem; }


/* V1.4.5 share report */
.share-report-button {
  width:100%; min-height:46px; border:1px solid rgba(131,223,255,.22);
  background:linear-gradient(180deg,rgba(131,223,255,.12),rgba(131,223,255,.06));
  color:#eafaff; border-radius:12px; display:flex; align-items:center;
  justify-content:space-between; padding:0 15px; font-weight:750; cursor:pointer;
}
.share-report-button:hover { border-color:rgba(131,223,255,.5); background:rgba(131,223,255,.14); }
.report-modal[hidden] { display:none; }
.report-modal { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:18px; }
.report-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.74); backdrop-filter:blur(7px); }
.report-dialog {
  position:relative; width:min(520px,100%); max-height:min(720px,calc(100vh - 36px));
  overflow:auto; border:1px solid rgba(255,255,255,.12); background:#0b1623;
  color:#f4f7fb; border-radius:18px; box-shadow:0 30px 100px rgba(0,0,0,.55); padding:20px;
}
.report-header { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:16px; }
.report-header h2 { margin-top:3px; font-size:1.22rem; }
.report-close {
  width:34px; height:34px; border-radius:9px; border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04); color:#dbe8f4; font-size:1.35rem; cursor:pointer;
}
.report-preview { border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.035); border-radius:12px; overflow:hidden; }
.report-row { display:flex; justify-content:space-between; gap:20px; padding:11px 13px; border-bottom:1px solid rgba(255,255,255,.065); }
.report-row:last-child { border-bottom:0; }
.report-row span { color:#8194a8; font-size:.82rem; }
.report-row strong { text-align:right; font-size:.85rem; font-weight:700; }
.report-section-title {
  padding:9px 13px; background:rgba(131,223,255,.06); color:#83dfff;
  text-transform:uppercase; letter-spacing:.1em; font-size:.65rem; font-weight:800;
}
.report-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:14px; }
.report-action {
  min-height:42px; border-radius:10px; border:1px solid rgba(255,255,255,.1);
  background:#0f2032; color:#eaf2f9; cursor:pointer; font-weight:700;
}
.report-action:hover { border-color:rgba(131,223,255,.35); }
.report-action.primary { background:#dff7ff; color:#07111d; border-color:#dff7ff; }
.report-help { color:#74899d; font-size:.74rem; line-height:1.45; margin:11px 2px 0; }

.custom-ice-note {
  margin: 1px 0 8px;
  color: #7f93a8;
  font-size: .75rem;
  line-height: 1.4;
}

#glassRoundedControls[hidden] { display: none; }
#glassRoundedControls { display: grid; gap: 9px; }

.viewer-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.zoom-controls {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  border-radius: 9px;
}
.zoom-button {
  width: 30px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 7px;
  background: #0c1928;
  color: #dce9f3;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.zoom-button:hover {
  border-color: rgba(131,223,255,.35);
  color: #dff7ff;
}
.zoom-level {
  min-width: 43px;
  text-align: center;
  color: #7f93a8;
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}