:root {
  --bg: #f3f0e8;
  --card: #ffffff;
  --ink: #173042;
  --muted: #647482;
  --brand: #1c3647;
  --brand2: #254f64;
  --accent: #f2b23f;
  --border: #ddd3c2;
  --danger: #9e2b25;
  --ok: #1f7a4d;
  --lock: #8a6515;
  --shadow: 0 18px 40px rgba(23,48,66,.13);
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
}
.app-shell {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding-bottom: 88px;
}
.hero {
  margin: 14px;
  padding: 24px;
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(circle at top right, rgba(242,178,63,.45), transparent 34%),
    linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: var(--shadow);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}
.eyebrow {
  margin: 0 0 8px;
  color: #ffd98c;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .75rem;
  font-weight: 900;
}
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(2.1rem, 5vw, 4rem); line-height: .95; margin-bottom: 12px; }
h2 { margin-bottom: 8px; }
p { line-height: 1.55; }
main { padding: 0 14px; }
.muted { color: var(--muted); }
.view { display: none; }
.view.active { display: block; }
.card, .ad-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 20px;
  margin: 14px 0;
  box-shadow: var(--shadow);
}
.title-row, .material-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 900;
  font-size: .82rem;
}
.badge.free { background: #e9f5ef; color: var(--ok); }
.badge.pro { background: #fff2ce; color: var(--lock); }
.quick-grid, .stats, .form-grid, .result-grid, .feature-list {
  display: grid;
  gap: 12px;
}
.quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quick {
  min-height: 135px;
  border: 1px solid var(--border);
  background: #fffaf1;
  border-radius: 20px;
  text-align: left;
  padding: 18px;
  color: var(--ink);
  display: grid;
  align-content: start;
  gap: 8px;
}
.quick strong { display: block; font-size: 1.1rem; }
.quick span { color: var(--muted); }
.quick em {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 4px 9px;
  background: #e9f5ef;
  color: var(--ok);
  font-style: normal;
  font-weight: 900;
  font-size: .76rem;
}
.quick.locked { background: #fff6dc; }
.quick.locked em { background: #fff2ce; color: var(--lock); }
.stats { grid-template-columns: repeat(3, 1fr); }
.stats div {
  background: #fffaf1;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
}
.stats span { display: block; font-size: 2rem; font-weight: 950; color: var(--brand); }
.stats small { color: var(--muted); }
.ad-box {
  background: #fff6dc;
  color: #5d4b2d;
  box-shadow: none;
  display: grid;
  gap: 5px;
}
button {
  font: inherit;
  border: 0;
  border-radius: 16px;
  padding: 13px 16px;
  font-weight: 900;
  cursor: pointer;
}
.install {
  background: rgba(255,255,255,.14);
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
  white-space: nowrap;
}
.primary { background: var(--accent); color: #2d2108; }
.secondary { background: #f8f4ec; color: var(--brand); border: 1px solid var(--border); }
.danger { background: #f8e6e3; color: var(--danger); }
.hidden { display: none !important; }
.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
label {
  display: grid;
  gap: 7px;
  font-weight: 850;
}
input, textarea, select {
  width: 100%;
  min-height: 50px;
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 12px 14px;
  font: inherit;
  color: var(--ink);
  background: #fffaf1;
}
textarea { resize: vertical; }
.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.results {
  margin-top: 18px;
  border-radius: 18px;
  border: 1px dashed #c7b99d;
  background: #f8f4ec;
  padding: 16px;
  min-height: 62px;
}
.result-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
}
.metric span { color: var(--muted); font-size: .9rem; }
.metric strong { display: block; font-size: 1.45rem; color: var(--brand); margin: 4px 0; }
.metric small { color: var(--muted); }
.cut-table, .material-cuts { display: grid; gap: 8px; margin-top: 10px; }
.cut-head, .cut-row {
  display: grid;
  grid-template-columns: 1fr 1fr 48px;
  gap: 8px;
  align-items: center;
}
.cut-head { color: var(--muted); font-weight: 900; font-size: .9rem; }
.icon-btn {
  min-height: 48px;
  padding: 0;
  background: #f8e6e3;
  color: var(--danger);
}
.hint-box {
  border-radius: 18px;
  padding: 14px;
  background: #eef5f8;
  border: 1px solid #cbdde5;
  color: #24495a;
  margin: 12px 0;
}
.material-groups {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}
.material-card {
  border: 1px solid var(--border);
  background: #fffaf1;
  border-radius: 22px;
  padding: 16px;
  display: grid;
  gap: 14px;
}
.material-card-header h3 { margin: 0; }
.material-grid {
  display: grid;
  grid-template-columns: 1.4fr .7fr .7fr 1.1fr .8fr;
  gap: 10px;
}
.group-result {
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--border);
  padding: 14px;
  margin: 12px 0;
}
.group-result h3 { margin-bottom: 8px; }
.locked-panel {
  border-radius: 18px;
  padding: 14px;
  background: #fff6dc;
  border: 1px solid #f0d58c;
  color: #5d4b2d;
  margin: 14px 0;
}
.locked-panel.ok {
  background: #e9f5ef;
  color: #1e5d3d;
  border-color: #b7dbc8;
}
.list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.list-item {
  border: 1px solid var(--border);
  background: #fffaf1;
  border-radius: 18px;
  padding: 14px;
  display: grid;
  gap: 8px;
}
.item-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.item-top strong { font-size: 1.05rem; }
.item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.item-actions button {
  padding: 9px 12px;
  font-size: .9rem;
}
.category {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: .75rem;
  font-weight: 900;
  background: #eef5f8;
  color: #24495a;
}
.manual-add {
  display: grid;
  grid-template-columns: 1.4fr .8fr .9fr auto;
  gap: 8px;
  align-items: center;
}
.pro-card {
  background:
    radial-gradient(circle at top right, rgba(242,178,63,.35), transparent 32%),
    #fff;
}
.price {
  display: inline-flex;
  align-items: baseline;
  font-size: 3.4rem;
  font-weight: 950;
  line-height: 1;
  color: var(--brand);
  margin: 8px 0 18px;
}
.feature-list { grid-template-columns: repeat(2, 1fr); margin-bottom: 18px; }
.feature-list div {
  border-radius: 16px;
  padding: 14px;
  background: #fffaf1;
  border: 1px solid var(--border);
  font-weight: 850;
}
.feature-list div::before {
  content: "✓ ";
  color: var(--ok);
  font-weight: 950;
}
.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(1120px, 100%);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  z-index: 50;
}
.nav {
  font-size: .78rem;
  padding: 11px 4px;
  background: transparent;
  color: var(--muted);
}
.nav.active { background: var(--brand); color: #fff; }
.footer {
  padding: 20px 14px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.footer a { color: var(--brand); font-weight: 900; }
.ok-text { color: var(--ok); font-weight: 900; }
.error-text { color: var(--danger); font-weight: 900; }

@media (max-width: 900px) {
  .material-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .hero {
    margin: 0 0 12px;
    border-radius: 0 0 28px 28px;
    display: block;
  }
  .install { margin-top: 14px; }
  main { padding: 0 10px; }
  .quick-grid, .stats, .form-grid, .result-grid, .feature-list, .manual-add, .material-grid {
    grid-template-columns: 1fr;
  }
  .item-top { display: grid; }
  .card { padding: 18px; }
}
@media print {
  body { background: white; color: #000; }
  .hero, .bottom-nav, .footer, .no-print, .actions, .locked-panel, .ad-box { display: none !important; }
  .app-shell { width: 100%; padding: 0; }
  main { padding: 0; }
  .view { display: none !important; }
  #shopping.view { display: block !important; }
  .card { box-shadow: none; border: 0; margin: 0; padding: 0; }
  .list-item { break-inside: avoid; border: 1px solid #999; background: white; }
}

.transport-card {
  border: 1px solid var(--border);
  background: #fffaf1;
  border-radius: 22px;
  padding: 16px;
  margin: 14px 0;
}
.transport-card h3 {
  margin-bottom: 10px;
}

.transport-row {
  display: flex;
  align-items: end;
  gap: 14px;
  flex-wrap: wrap;
}

.transport-row label {
  width: min(260px, 100%);
}

.short-input {
  max-width: 260px;
}

.transport-row .muted {
  margin: 0 0 8px;
  flex: 1 1 280px;
}

@media (max-width: 760px) {
  .transport-row {
    display: grid;
    gap: 8px;
  }
  .transport-row label,
  .short-input {
    max-width: 100%;
    width: 100%;
  }
  .transport-row .muted {
    margin: 0;
  }
}

.terrace-options {
  margin-top: 18px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: #fffaf1;
}

.shape-extra {
  margin-top: 12px;
}

.terrace-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.terrace-grid > div {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 18px;
  padding: 14px;
  display: grid;
  gap: 10px;
}

.check-row {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 10px;
  font-weight: 850;
}

.check-row input {
  width: auto;
  min-height: auto;
}

.terrace-preview-wrap {
  margin-top: 16px;
  border-radius: 18px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--border);
}

.terrace-preview svg {
  max-width: 100%;
  height: auto;
  display: block;
}

.terrace-note {
  padding: 12px;
  border-radius: 14px;
  background: #eef5f8;
  border: 1px solid #cbdde5;
  color: #24495a;
}

@media (max-width: 760px) {
  .terrace-grid {
    grid-template-columns: 1fr;
  }
}

.shape-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0;
}

.shape-card {
  display: grid;
  gap: 8px;
  background: #fff;
  color: var(--ink);
  border: 2px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  text-align: center;
}

.shape-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(242,178,63,.22);
}

.shape-card svg {
  width: 100%;
  height: 150px;
  border: 1px solid var(--border);
  background: #f8f4ec;
  border-radius: 12px;
}

.shape-card svg line {
  stroke: #fff2ce;
  stroke-width: 5;
}

.shape-card svg text {
  font-size: 20px;
  font-weight: 900;
  fill: var(--ink);
}

.dimension-card {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 18px;
  padding: 16px;
  margin: 14px 0;
}

.dimension-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.dim-input-group {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: #fffaf1;
}

.dim-input-group strong,
.dim-input-group span {
  padding: 0 12px;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  background: #f8f4ec;
}

.dim-input-group input {
  border: 0;
  border-radius: 0;
  background: #fff;
}

.terrace-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 16px 0;
}

.terrace-preview-3d svg {
  min-height: 220px;
}

.terrace-settings {
  margin-top: 16px;
}

@media (max-width: 900px) {
  .shape-card-grid,
  .terrace-preview-grid {
    grid-template-columns: 1fr;
  }

  .dimension-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .dimension-grid {
    grid-template-columns: 1fr;
  }
}

.stairs-card {
  margin-top: 16px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 18px;
  padding: 14px;
}

.stairs-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.stair-item {
  border: 1px solid var(--border);
  background: #fffaf1;
  border-radius: 16px;
  padding: 14px;
}

.stair-grid {
  display: grid;
  grid-template-columns: 1fr .8fr .8fr .8fr .8fr auto;
  gap: 10px;
  align-items: end;
}

.preview-legend {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: .85rem;
  color: var(--muted);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-swatch {
  width: 18px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  background: #c99058;
  border: 1px solid #8b5b32;
}

.legend-swatch.railing {
  background: #5d3a1f;
}

.legend-swatch.stairs {
  background: #d6a063;
}

@media (max-width: 900px) {
  .stair-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .stair-grid {
    grid-template-columns: 1fr;
  }
}

.board-lines-2d line,
.board-lines-3d line {
  stroke: #fff2ce;
  stroke-width: 3;
  opacity: .55;
}

.terrace-calc-modes,
.frame-models {
  margin-top: 16px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 18px;
  padding: 14px;
}

.terrace-calc-modes {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.terrace-calc-modes h4 {
  width: 100%;
  margin-bottom: 0;
}

.frame-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.frame-card {
  display: grid;
  gap: 10px;
  text-align: left;
  background: #fffaf1;
  border: 2px solid var(--border);
  color: var(--ink);
  border-radius: 18px;
  padding: 14px;
}

.frame-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(242,178,63,.22);
}

.frame-card svg {
  width: 100%;
  height: 145px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.frame-card span {
  color: var(--muted);
  font-weight: 600;
  line-height: 1.45;
}

.cost-card {
  margin-top: 14px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 16px;
  padding: 14px;
}

.cost-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.cost-cell {
  background: #fffaf1;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
}

.cost-cell strong {
  display: block;
  font-size: 1.25rem;
  color: var(--brand);
}

@media (max-width: 900px) {
  .frame-card-grid,
  .cost-grid {
    grid-template-columns: 1fr;
  }
}

.advanced-project-options {
  margin-top: 18px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: #fffaf1;
}

.advanced-section {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 18px;
  padding: 14px;
  margin: 14px 0;
}

.advanced-section h4 {
  margin-bottom: 10px;
}

.compact-note {
  font-size: .92rem;
  color: var(--muted);
  margin-top: 6px;
}

.project-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0;
}

.project-pill {
  background: #fffaf1;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 12px;
  font-weight: 900;
}

.frame-card svg {
  min-height: 190px;
}

.frame-card strong {
  font-size: 1.08rem;
}

.frame-card span {
  font-size: .98rem;
}

.stair-riser {
  fill: #b77d49;
  stroke: #704521;
  stroke-width: 1.4;
}

.stair-tread {
  fill: #d6a063;
  stroke: #704521;
  stroke-width: 1.4;
}

.interactive-3d-wrap {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #eef5f8;
  border: 1px solid #d8e4ea;
}

.interactive-3d-canvas {
  display: block;
  width: 100%;
  height: min(440px, 64vw);
  min-height: 300px;
  cursor: grab;
  touch-action: none;
}

.interactive-3d-canvas:active {
  cursor: grabbing;
}

.interactive-3d-help {
  position: absolute;
  left: 12px;
  top: 12px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(23,48,66,.12);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: .82rem;
  font-weight: 850;
  color: var(--brand);
  pointer-events: none;
}

.interactive-3d-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.interactive-3d-controls button {
  padding: 9px 12px;
  font-size: .9rem;
}

.frame-card svg { min-height: 230px; }
.frame-card span { line-height: 1.45; }

.frame-illustration-wrap {
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--border);
  padding: 12px;
  margin-bottom: 12px;
}
.frame-illustration-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: #f6f6f6;
}

.component-block-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.component-block {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 18px;
  padding: 14px;
  display: grid;
  gap: 10px;
}

.component-block.full-span {
  grid-column: 1 / -1;
}

.component-block h4 {
  margin: 0 0 4px;
}

.component-block .form-grid {
  margin-top: 2px;
}

@media (max-width: 900px) {
  .component-block-grid {
    grid-template-columns: 1fr;
  }
}


/* v1.8 etusivu ja rakenne */
.hero-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, #fffaf1 0%, #eef5f8 100%);
  border-radius: 26px;
  padding: 24px;
  margin-bottom: 18px;
}

.eyebrow {
  display: inline-block;
  font-weight: 900;
  color: var(--accent-dark);
  margin-bottom: 6px;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: .8rem;
}

.hero-panel h2 {
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  margin: 0 0 8px;
}

.hero-panel p {
  max-width: 700px;
  margin: 0;
  color: var(--muted);
  font-weight: 650;
}

.hero-badges {
  display: grid;
  gap: 8px;
  min-width: 230px;
}

.home-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.home-card {
  position: relative;
  min-height: 210px;
  display: grid;
  align-content: start;
  gap: 10px;
  text-align: left;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 10px 26px rgba(23, 48, 66, .06);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.home-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 14px 32px rgba(23, 48, 66, .10);
}

.home-card.featured {
  grid-column: span 2;
  background: linear-gradient(135deg, #fff4d8 0%, #ffffff 72%);
  border-color: rgba(242, 178, 63, .55);
}

.home-card strong {
  font-size: 1.18rem;
}

.home-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.home-card em {
  margin-top: auto;
  font-style: normal;
  font-weight: 900;
  color: var(--brand);
}

.home-card-badge {
  justify-self: start;
  display: inline-flex;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: .78rem;
  font-weight: 900;
}

.home-card-badge.free {
  background: #e8f6ed;
  color: #0d6933;
  border: 1px solid #b7dfc4;
}

.home-card-badge.pro {
  background: #f4eefd;
  color: #4a197d;
  border: 1px solid #d8c6ef;
}

.version-note {
  margin-top: 18px;
  border: 1px dashed var(--border);
  background: #fffaf1;
  border-radius: 18px;
  padding: 14px;
  color: var(--muted);
}

.shopping-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.shopping-summary-card {
  border: 1px solid var(--border);
  background: #fffaf1;
  border-radius: 16px;
  padding: 12px;
}

.shopping-summary-card span {
  display: block;
  color: var(--muted);
  font-weight: 750;
  font-size: .9rem;
}

.shopping-summary-card strong {
  display: block;
  font-size: 1.35rem;
  color: var(--brand);
}

@media (max-width: 1100px) {
  .home-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .hero-panel {
    grid-template-columns: 1fr;
  }

  .hero-badges {
    min-width: 0;
  }

  .home-card-grid,
  .shopping-summary {
    grid-template-columns: 1fr;
  }

  .home-card.featured {
    grid-column: span 1;
  }
}


/* v1.9 plan summary and grouped shopping list */
.plan-summary-card {
  border: 1px solid var(--border);
  background: #fffaf1;
  border-radius: 18px;
  padding: 14px;
  margin: 14px 0;
}

.plan-summary-card h3 {
  margin-bottom: 10px;
}

.plan-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.plan-summary-grid div {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
}

.plan-summary-grid span {
  display: block;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 800;
}

.plan-summary-grid strong {
  display: block;
  color: var(--brand);
  font-size: 1.05rem;
}

.plan-category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
}

.plan-category-pills span {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 850;
  color: var(--muted);
  font-size: .9rem;
}

.shopping-group {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  margin: 14px 0;
  overflow: hidden;
}

.shopping-group-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: #fffaf1;
  border-bottom: 1px solid var(--border);
}

.shopping-group-title h3 {
  margin: 0;
}

.shopping-group-title span {
  color: var(--muted);
  font-weight: 850;
}

.shopping-rows {
  display: grid;
}

.shopping-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.shopping-row:last-child {
  border-bottom: 0;
}

.shopping-row strong {
  display: block;
}

.shopping-row small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.35;
}

.shopping-qty {
  font-weight: 900;
  color: var(--brand);
  white-space: nowrap;
}

button.small {
  padding: 7px 10px;
  font-size: .85rem;
}

@media (max-width: 800px) {
  .plan-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .shopping-qty {
    white-space: normal;
  }
}

@media (max-width: 520px) {
  .plan-summary-grid {
    grid-template-columns: 1fr;
  }
}


/* v1.10 compact cut plans */
.smart-warnings {
  border: 1px solid #f1c36d;
  background: #fff7dc;
  color: #664500;
  border-radius: 14px;
  padding: 10px 12px;
  margin: 8px 0 12px;
}

.smart-warnings p {
  margin: 0;
  font-weight: 800;
  line-height: 1.4;
}

.cut-details {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 16px;
  padding: 0;
  margin: 14px 0;
  overflow: hidden;
}

.cut-details > summary {
  cursor: pointer;
  list-style: none;
  padding: 13px 14px;
  font-weight: 950;
  color: var(--brand);
  background: #fffaf1;
  border-bottom: 1px solid var(--border);
}

.cut-details > summary::-webkit-details-marker {
  display: none;
}

.cut-details > summary::after {
  content: "Näytä/piilota";
  float: right;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 850;
}

.cut-details ul,
.cut-details p {
  margin-left: 14px;
  margin-right: 14px;
}

.cut-details-inline {
  margin-top: 6px;
}

.cut-details-inline summary {
  cursor: pointer;
  color: var(--brand);
  font-weight: 850;
}

.cut-details-inline p {
  margin: 6px 0 0;
}


/* v1.12 feedback */
.app-toast {
  position: fixed;
  left: 50%;
  bottom: 82px;
  transform: translateX(-50%) translateY(20px);
  background: var(--brand);
  color: #fff;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 900;
  box-shadow: 0 12px 30px rgba(23, 48, 66, .22);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 9999;
}

.app-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* v1.13: terassilla ei näytetä yleisiä päämateriaali/vaikeustaso-kenttiä */
.terrace-hidden-field {
  display: none !important;
}


/* v1.14 Kaiteen puutavararivit */
.railing-card {
  grid-column: 1 / -1;
}

.railing-materials-info {
  display: grid;
  gap: 2px;
  border: 1px dashed var(--border);
  background: #fffaf1;
  border-radius: 14px;
  padding: 10px 12px;
}

.railing-materials-info strong {
  color: var(--brand);
}

.railing-materials-info span {
  color: var(--muted);
  font-weight: 700;
}

.railing-materials {
  display: grid;
  gap: 12px;
}

.railing-material-row {
  border: 1px solid var(--border);
  background: #fffaf1;
  border-radius: 16px;
  padding: 14px;
}

.railing-row-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.railing-row-header strong {
  color: var(--brand);
}

.railing-grid {
  display: grid;
  grid-template-columns: 1.35fr 1.2fr repeat(5, minmax(110px, 1fr));
  gap: 10px;
  align-items: end;
}

.railing-material-row .muted {
  margin: 8px 0 0;
  font-size: .92rem;
}

@media (max-width: 1180px) {
  .railing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .railing-grid {
    grid-template-columns: 1fr;
  }

  .railing-row-header {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* v1.16 pintalaudoituksen vertailu */
.decking-comparison,
.decking-explanation {
  border: 1px solid var(--border);
  background: #fffaf1;
  border-radius: 18px;
  padding: 14px;
  margin: 14px 0;
}

.decking-comparison h3,
.decking-explanation h3 {
  margin-top: 0;
}

.deck-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0;
}

.deck-compare-card {
  display: grid;
  gap: 6px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 16px;
  padding: 12px;
}

.deck-compare-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(242,178,63,.20);
}

.deck-compare-card strong {
  color: var(--brand);
  font-size: 1.05rem;
}

.deck-compare-card span {
  color: var(--muted);
  font-weight: 750;
}

.decking-explanation ul {
  margin-top: 8px;
}

@media (max-width: 760px) {
  .deck-compare-grid {
    grid-template-columns: 1fr;
  }
}


/* v1.17 kaideosion valmiit lisäyspainikkeet */
.railing-preset-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 14px;
}

.railing-preset-actions button {
  min-height: 42px;
}

.railing-gap-label {
  display: none;
}


/* v1.19: portaiden sijainti ilman prosenttikenttää */
.stair-grid {
  grid-template-columns: 1fr 1fr 1fr .9fr .9fr .8fr auto;
}

.stair-help {
  margin: 8px 0 0;
  font-size: .92rem;
}

.stair-offset-label {
  display: none;
}

@media (max-width: 1120px) {
  .stair-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .stair-grid {
    grid-template-columns: 1fr;
  }
}


/* v1.22 portaiden laskennan selitys */
.stair-summary {
  border: 1px solid var(--border);
  background: #fffaf1;
  border-radius: 18px;
  padding: 14px;
  margin: 14px 0;
}

.stair-summary h3 {
  margin-top: 0;
}

.stair-summary ul {
  margin-top: 8px;
}


/* v1.23 aitalaskuri */
.calc-fieldset {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  background: #fffaf1;
  margin: 14px 0;
}

.calc-fieldset h5 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: var(--brand);
}

.fence-model-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 16px;
}

.fence-model-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fffaf1;
  padding: 14px;
  text-align: left;
  display: grid;
  gap: 6px;
  min-height: 105px;
}

.fence-model-card strong {
  color: var(--brand);
  font-size: 1.05rem;
}

.fence-model-card span {
  color: var(--muted);
  font-weight: 700;
  font-size: .92rem;
}

.fence-model-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(242,178,63,.22);
}

.fence-summary {
  border: 1px solid var(--border);
  background: #fffaf1;
  border-radius: 18px;
  padding: 14px;
  margin: 14px 0;
}

.fence-summary h3 {
  margin-top: 0;
}

@media (max-width: 900px) {
  .fence-model-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .fence-model-grid {
    grid-template-columns: 1fr;
  }
}


/* v1.24 aidan mallikortit ja elementtilaskenta */
.fence-model-grid.six-models {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fence-model-card svg {
  width: 100%;
  max-height: 130px;
  display: block;
  margin-bottom: 10px;
}

.fence-model-card span {
  display: block;
  color: var(--muted);
  font-weight: 700;
  font-size: .92rem;
  margin-top: 4px;
}

.fence-element-only {
  display: none;
}

@media (max-width: 980px) {
  .fence-model-grid.six-models {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .fence-model-grid.six-models {
    grid-template-columns: 1fr;
  }
}


/* v1.33 varmistaa, ettei väärän rakennuskohteen lohko jää näkyviin */
.project-type-hidden {
  display: none !important;
}


/* v1.34 projektityypin mukaan pakotettu näkyvyys */
body[data-project-type]:not([data-project-type="terrace"]) #terraceOptions {
  display: none !important;
}

body[data-project-type="terrace"] #advancedProjectOptions {
  display: none !important;
}

body[data-project-type]:not([data-project-type="terrace"]) #advancedProjectOptions {
  display: block !important;
}


/* v1.35: terassilohko siirretään parkkipaikkaan, kun valittuna ei ole terassi */
#terraceOptionsParking {
  display: none !important;
}

#terraceOptionsAnchor {
  display: none !important;
}

/* ---------------------------------------------------------------
   v1.39 – parannetut 2D- ja 3D-esikatselut
   --------------------------------------------------------------- */

#advancedPreview2d svg,
#advancedPreview3d svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  background: #fff;
}

#advancedPreview2d svg {
  min-height: 190px;
}

#advancedPreview3d svg {
  min-height: 200px;
}

#advancedPreview2d svg text,
#advancedPreview3d svg text {
  font-family: inherit;
}

@media (max-width: 900px) {
  #advancedPreview2d svg,
  #advancedPreview3d svg {
    min-height: 0;
  }
}

/* ---------------------------------------------------------------
   v1.42 – kevyempi käyttöliittymä: kokoontaitettavat asetuslohkot
   --------------------------------------------------------------- */

details.collapsible > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 4px;
  min-height: 44px;
  user-select: none;
}

details.collapsible > summary::-webkit-details-marker { display: none; }

details.collapsible > summary::after {
  content: "";
  margin-left: auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: .5;
  transition: transform .18s ease;
}

details.collapsible[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

details.collapsible > summary .block-title {
  font-weight: 800;
  font-size: 1.02rem;
}

details.collapsible > summary .block-hint {
  font-size: .82rem;
  opacity: .62;
  font-weight: 500;
}

@media (max-width: 720px) {
  details.collapsible > summary .block-hint { display: none; }
}

/* Kevyempi ylätunniste puhelimessa */
@media (max-width: 720px) {
  .hero { padding-top: 18px; padding-bottom: 18px; }
  .hero h1 { font-size: 1.5rem; margin: 0 0 4px; }
  .hero p { font-size: .92rem; margin: 0; }
}

/* Kosketuskohteiden vähimmäiskoko puhelimessa (44 px suositus) */
.nav {
  min-height: 46px;
}

.check-row {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.check-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

button.danger,
button.secondary {
  min-height: 40px;
}

.interactive-3d-controls button {
  min-height: 42px;
}

/* v1.43 – kaiderivit kokoontaitettavina */
details.railing-material-row > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 6px 2px;
}
details.railing-material-row > summary::-webkit-details-marker { display: none; }
details.railing-material-row > summary::after {
  content: "";
  margin-left: auto;
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .45;
}
details.railing-material-row[open] > summary::after { transform: rotate(-135deg); }
.railing-row-tools { display: flex; justify-content: flex-end; margin: 4px 0 8px; }

/* v1.43 – tiiviimpi etusivu */
.hero-panel.compact { padding: 18px 20px; }
.hero-panel.compact h2 { margin: 0 0 6px; font-size: 1.35rem; }
.hero-panel.compact p { margin: 0; font-size: .93rem; opacity: .78; }

.home-group-title {
  margin: 22px 4px 10px;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  opacity: .6;
}

.home-card-grid.compact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.home-card-grid.compact .home-card {
  padding: 14px;
  min-height: 108px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  text-align: left;
}

.home-card-grid.compact .home-card strong { font-size: 1rem; line-height: 1.25; }
.home-card-grid.compact .home-card p { margin: 0; font-size: .82rem; opacity: .72; line-height: 1.35; }
.home-card-grid.compact .home-card-badge { font-size: .68rem; padding: 2px 7px; }

@media (min-width: 760px) {
  .home-card-grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* v1.43 – Pro-lukituksen myyntipaneeli */
.locked-panel.upsell {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 16px;
  line-height: 1.45;
}

.locked-panel.upsell button {
  min-height: 44px;
  padding: 0 20px;
}

/* ---------------------------------------------------------------
   v1.44 – aloitusruutu ja suora avaus puutavaralaskuriin
   --------------------------------------------------------------- */

.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: linear-gradient(160deg, #12303f 0%, #0d2430 100%);
  color: #f4efe4;
  cursor: pointer;
  opacity: 1;
  transition: opacity .3s ease;
}

.splash img {
  width: 96px;
  height: 96px;
  border-radius: 22px;
}

.splash strong {
  font-size: 1.55rem;
  letter-spacing: -.01em;
}

.splash span {
  font-size: .86rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .62;
}

.splash-out {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .splash { display: none; }
}

/* ---------------------------------------------------------------
   v1.45 – isompi aloituskuva leveammilla naytoilla.
   Puhelimessa 96 px riittaa; tyopoydalla se hukkuu tyhjaan tilaan.
   Naiden on oltava tiedoston lopussa, jotta ne voittavat .splash-
   perussaannot (sama tarkkuus, myohempi voittaa).
   --------------------------------------------------------------- */

@media (min-width: 760px) {
  .splash { gap: 20px; }
  .splash img { width: 150px; height: 150px; border-radius: 34px; }
  .splash strong { font-size: 2.1rem; }
  .splash span { font-size: .95rem; }
}

@media (min-width: 1200px) {
  .splash img { width: 190px; height: 190px; border-radius: 42px; }
  .splash strong { font-size: 2.5rem; }
}