*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      /* Värimaailma: AluXPS-levyn vaalea sininen + hopea + musta */
      --orange: #5a9dc0;       /* "oranssi" → AluXPS-sininen, käytetään aksenttina */
      --orange-dark: #3d7d9e;
      --orange-light: #eef5fa; /* Hyvin vaalea sininen */
      --silver: #a8b8bf;       /* Hopea — alumiinilevyn väri */
      --silver-light: #dce4e8; /* Vaalea hopea/harmaa */
      --bg: #e4eff6;           /* Hyvin vaalea AluXPS-sininen */
      --surface: #ffffff;
      --text: #1a2028;         /* Lähes musta */
      --muted: #5a6e78;
      --nav: #2a3840;
      --border: #b8ccd4;       /* Hopea-sininen reunaviiva */
      --error: #993322;
      --wet: #3d7d9e;          /* Tumma sininen kosteille tiloille */
      --wet-light: #d8ecf5;
      --radius: 3px;
      --accent: var(--orange);
      --accent-light: var(--orange-light);
    }
    body { font-family: Arial, Helvetica, sans-serif; background: #dceaf2; background-image: linear-gradient(160deg, #d0e4f0 0%, #dceaf2 60%, #cfe2ed 100%); background-attachment: fixed; color: var(--text); min-height: 100vh; padding: 20px 14px 60px; font-size: 13px; line-height: 1.5; }

    /* Sivun otsikko: valkoinen kortti, oranssi alajuova — kuten topway.fi sisältösivut */
    header { background: #1a2028; border: 1px solid #0e151a; border-top: 4px solid var(--silver); border-radius: var(--radius); padding: 3px 24px 3px; max-width: 920px; margin: 0 auto 14px; }
    header h1 { font-size: 1.3rem; font-weight: 700; color: #ffffff; }
    header p { margin-top: 4px; color: #a8cce8; font-size: 0.84rem; }

    /* Kortit — kuten topway.fi tuote/kategoriasivut */
    .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; max-width: 920px; margin: 0 auto 12px; box-shadow: 0 1px 4px rgba(30,74,122,0.10); }
    .card h2 { font-size: 0.9rem; font-weight: 700; color: var(--text); margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--silver); text-transform: uppercase; letter-spacing: 0.04em; }
    .floor-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 24px; max-width: 920px; margin: 0 auto 10px; animation: fadeIn 0.2s ease; box-shadow: 0 1px 4px rgba(30,74,122,0.08); }
    @keyframes fadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
    .floor-section h3 { font-size: 0.95rem; font-weight: 700; color: var(--text); margin-bottom: 3px; border-left: 3px solid var(--silver); padding-left: 8px; letter-spacing: 0.06em; }
    .floor-meta { font-size: 0.8rem; color: var(--muted); margin-bottom: 14px; margin-left: 11px; }

    /* Lomakekentät */
    .field-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
    .field-row label { font-size: 0.83rem; font-weight: 600; color: var(--nav); min-width: 80px; }
    input[type="number"] { border: 1px solid #c8c8c8; border-radius: var(--radius); padding: 5px 9px; font-family: inherit; font-size: 0.88rem; width: 95px; color: var(--text); background: #fff; transition: border-color 0.1s; outline: none; }
    input[type="number"]:focus { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(90,157,192,0.15); }
    input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--orange); }
    select { border: 1px solid #c8c8c8; border-radius: var(--radius); padding: 5px 9px; font-family: inherit; font-size: 0.88rem; color: var(--text); background: #fff; outline: none; cursor: pointer; transition: border-color 0.1s; min-width: 145px; }
    select:focus { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(90,157,192,0.15); }

    /* Napit — topway.fi tyyli: oranssi pää, harmaa sekundaari */
    .btn { display: inline-flex; align-items: center; gap: 5px; padding: 8px 18px; border-radius: var(--radius); font-family: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer; border: none; transition: background 0.1s; }
    .floor-stepper-btn { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; font-size:1.4rem; font-weight:700; cursor:pointer; border:1px solid var(--border); background:var(--orange); color:white; transition:background 0.1s; line-height:1; padding:0; font-family:inherit; }
    .floor-stepper-btn:hover { background:var(--orange-dark); }
    .floor-stepper-btn:disabled { background:#c8d8e0; border-color:#b8c8d0; cursor:not-allowed; }
    .btn-primary { background: var(--orange); color: white; letter-spacing:0.02em; }
    .btn-primary:hover { background: var(--orange-dark); }
    .btn-secondary { background: #fff; color: var(--nav); border: 1px solid #c0c0c0; }
    .btn-secondary:hover { background: #f0f6fa; border-color: var(--orange); color: var(--orange); }

    /* Kerros-inputit */
    .floor-inputs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
    .floor-input-row { display: flex; align-items: center; gap: 12px; background: var(--orange-light); border: 1px solid var(--border); border-left: 4px solid var(--orange); border-radius: var(--radius); padding: 10px 16px; }
    .floor-input-row .floor-label { font-size: 0.9rem; font-weight: 700; color: var(--nav); min-width: 80px; }
    .floor-input-row .floor-arrow { font-size: 0.85rem; color: var(--orange); }
    .floor-input-row .floor-sub { font-size: 0.82rem; color: var(--muted); }
    .floor-input-row .floor-m2-badge { display:none; font-size:0.82rem; font-weight:700; color: var(--orange-dark); background: white; border: 1px solid var(--border); border-radius: 20px; padding: 2px 10px; margin-left: auto; }
    .floor-input-row .floor-m2-badge.visible { display:inline-block; }

    /* Huone-rivi */
    .rooms-header { display: grid; grid-template-columns: 34px 86px 170px 132px 1fr; gap: 7px; padding: 0 2px 5px; border-bottom: 1px solid #ddd; margin-bottom: 1px; font-size: 0.7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
    .room-row { display: grid; grid-template-columns: 34px 86px 170px 132px 1fr; gap: 7px; align-items: center; padding: 4px 2px; border-bottom: 1px solid #f2f2f2; }
    .room-row:hover { background: #fafafa; }
    .room-number { font-size: 0.8rem; font-weight: 700; color: var(--muted); text-align: center; }
    .room-row input[type="number"] { width: 100%; }
    .room-row select { width: 100%; min-width: unset; }
    /* Lattiamateriaalit piilotettu — ei poisteta, vain piilotetaan */
    [id^="room-mat-"] { display: none; pointer-events: none; }
    .sub-row { display: none; padding: 3px 2px 6px 41px; align-items: center; gap: 9px; flex-wrap: wrap; background: var(--wet-light); border-bottom: 1px solid #d4e6f5; }
    .sub-row label { font-size: 0.78rem; color: var(--muted); }
    .sub-row.wet-active { display: flex; }
    /* Linkitys room-row:n sisällä — desktop: koko rivin leveys, mobiili: järjestyksellä */
    .room-link-inner { display: none; align-items: center; gap: 8px; flex-wrap: wrap; padding: 2px 0 2px 41px; background: var(--orange-light); border-top: 1px solid var(--border); }
    .room-link-inner.wet-active { display: flex; }
    .room-link-inner label { font-size: 0.82rem; color: var(--muted); }
    .wet-label { font-size: 0.74rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-right: 4px; }
    .cb-group { display: flex; align-items: center; gap: 5px; }
    .huone-count-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
    .huone-count-row label { font-size: 0.86rem; font-weight: 600; }

    /* Yhteenveto-taulukot */
    .summary-box { margin-top: 16px; padding-top: 14px; border-top: 2px solid var(--silver); }
    .summary-box h4 { font-size: 0.88rem; font-weight: 700; color: var(--text); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.03em; }
    .summary-table { width: 100%; border-collapse: collapse; font-size: 0.81rem; margin-bottom: 10px; }
    .summary-table th { background: var(--silver-light); padding: 4px 8px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--nav); font-weight: 700; text-align: left; border-bottom: 1px solid var(--silver); }
    .summary-table td { padding: 4px 8px; border-bottom: 1px solid #f2f2f2; }
    .summary-table tr:last-child td { border-bottom: none; }

    /* Chip-kortit — hillitty, ei oranssi-dominoiva */
    .stat-chips { display: flex; flex-wrap: wrap; gap: 7px; }
    .stat-chips-col { display: flex; flex-direction: column; gap: 7px; }
    .chip { border-radius: var(--radius); padding: 8px 13px; flex: 1; min-width: 140px; border: 1px solid var(--border); }
    .chip-row { border-radius: var(--radius); padding: 9px 16px; width: 100%; box-sizing: border-box; border: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .chip-light { background: #f0f4f6; }
    .chip-dark { background: #2a3840; color: white; border-color: #1e2e38; }
    .chip-wet { background: #d8ecf5; border-color: #8ab8d0; }
    .chip-label { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 2px; font-weight: 700; word-break: break-word; line-height: 1.3; }
    .chip-dark .chip-label { color: rgba(255,255,255,0.75); }
    .chip-row .chip-label { text-transform: none; letter-spacing: 0; font-size: 0.82rem; font-weight: 600; margin-bottom: 0; }
    .chip-dark.chip-row .chip-label { color: rgba(255,255,255,0.85); }
    .chip-light.chip-row .chip-label { color: var(--nav); }
    .chip-row .chip-value { font-size: 0.95rem; white-space: nowrap; }
    .chip-light .chip-label { color: var(--muted); }
    .chip-wet .chip-label { color: var(--muted); }
    .chip-value { font-size: 1rem; font-weight: 700; }
    .chip-dark .chip-value { color: white; }
    .chip-light .chip-value { color: var(--text); }
    .chip-wet .chip-value { color: var(--text); }

    #floors-container { margin-top: 8px; }

    /* Yhteenveto modal */
    #yhteenveto-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:2000; overflow-y:auto; padding:28px 12px; }
    #yhteenveto-modal.open { display:block; }
    #yhteenveto-inner { background:var(--bg); border-radius:var(--radius); max-width:880px; margin:0 auto; padding:28px 32px 40px; box-shadow:0 8px 40px rgba(0,0,0,0.18); }
    #yhteenveto-inner h2 { font-size:1.2rem; font-weight:700; color: var(--text); margin-bottom:4px; border-bottom: 2px solid var(--orange); padding-bottom: 8px; }
    #yhteenveto-inner h3 { font-size:0.9rem; font-weight:700; color: var(--text); margin:18px 0 7px; padding-bottom:5px; border-bottom:1px solid #ddd; text-transform:uppercase; letter-spacing:0.03em; }
    .yht-section h3 { font-size:0.95rem; font-weight:700; color:var(--nav); margin:0 0 10px; padding-bottom:6px; border-bottom:1px solid var(--border); text-transform:uppercase; letter-spacing:0.03em; }
    .yht-table { width:100%; border-collapse:collapse; font-size:0.81rem; margin-bottom:6px; }
    .yht-table th { background:var(--silver-light); padding:5px 9px; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--nav); font-weight:700; text-align:left; border-bottom:1px solid var(--border); }
    .yht-table td { padding:5px 9px; border-bottom:1px solid var(--silver-light); vertical-align:top; }
    .yht-table tr:last-child td { border-bottom:none; }
    .yht-table td:first-child { font-weight:600; }
    .yht-section { margin-bottom:16px; padding:16px 20px; background:#fff; border-radius:var(--radius); border:1px solid var(--border); }
    .yht-section:last-child { margin-bottom:0; }
    /* Hinta-yhteenveto: oranssi vain tähän, se on "ostos" */
    .yht-total { background: var(--nav); color:white; border-radius:var(--radius); padding:16px 20px; margin-top:6px; }
    .yht-total h3 { color:white; border-bottom:1px solid rgba(255,255,255,0.3); margin-top:0; text-transform:uppercase; }
    .yht-total .yht-table th { background:rgba(255,255,255,0.15); color:rgba(255,255,255,0.85); border-bottom:1px solid rgba(255,255,255,0.15); }
    .yht-total .yht-table td { border-bottom:1px solid rgba(255,255,255,0.1); color:white; }
    .yht-modal-btns { display:flex; gap:9px; margin-bottom:20px; flex-wrap:wrap; }
    @media print {
      @page { size: A4; margin: 16mm 14mm 16mm 14mm; }
      body > *:not(#yhteenveto-modal) { display:none !important; }
      #yhteenveto-modal { display:block !important; position:static; background:none; padding:0; overflow:visible; }
      #yhteenveto-inner { box-shadow:none; border-radius:0; padding:0; max-width:100%; }
      #yhteenveto-modal-close, .yht-modal-btns { display:none !important; }
      .yht-section { page-break-inside: avoid; }
      .yht-total { page-break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
      .yht-table { page-break-inside: auto; }
      .yht-table tr { page-break-inside: avoid; }
      a { text-decoration: none; }
    }

    /* ═══════════════════════════════════════════════════════
       MOBIILI — aktivoituu alle 640px leveydellä
       Tietokonenäkymä ei muutu lainkaan.
       ═══════════════════════════════════════════════════════ */
    @media (max-width: 640px) {

      /* Perusasettelu */
      body { padding: 10px 8px 60px; font-size: 14px; }
      header { padding: 14px 16px 12px; margin-bottom: 10px; }
      header h1 { font-size: 1.1rem; }
      .card { padding: 14px 14px; margin-bottom: 10px; }
      .floor-section { padding: 14px 14px; margin-bottom: 8px; }

      /* Napit — suurempi kosketusalue */
      .btn { padding: 11px 16px; font-size: 0.92rem; min-height: 44px; }

      /* Kerrosinputit — pinotetaan allekkain pienillä näytöillä */
      .floor-input-row { flex-wrap: wrap; gap: 6px; padding: 8px 12px; }
      .floor-input-row .floor-label { min-width: unset; }
      .floor-input-row .floor-m2-badge { margin-left: auto; }
      input[type="number"] { font-size: 1rem; padding: 8px 10px; }
      select { font-size: 1rem; padding: 8px 10px; min-width: unset; width: 100%; max-width: 100%; }

      /* Huonelaskuri-rivi */
      .huone-count-row { flex-wrap: wrap; gap: 8px; }
      .huone-count-row label { width: 100%; }
      .huone-count-row input[type="number"] { width: 80px; }

      /* ── Huonetaulukko → pinokortti-asettelu ────────────────
         Piilotetaan otsikkorivi ja muutetaan jokainen rivi
         omaksi kortiksi jossa kentät ovat allekkain          */
      .rooms-header { display: none; }

      .room-row {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 10px 10px 8px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        margin-bottom: 6px;
        background: #fafcfd;
        border-bottom: 1px solid var(--border);
      }
      .room-row:hover { background: #f5f9fc; }

      /* Huonenumero omalle rivilleen pienenä otsikkona */
      .room-number {
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-align: left;
        border-bottom: 1px solid var(--silver-light);
        padding-bottom: 4px;
        margin-bottom: 2px;
      }

      /* Kaikki selectit ja inputit täysleveiksi */
      .room-row select,
      .room-row input[type="number"] { width: 100%; max-width: 100%; }

      /* Sub-row (kosteatila) — koko leveys, ei sisennystä */
      .sub-row { padding: 8px 10px; flex-direction: column; align-items: flex-start; gap: 8px; }
      .sub-row select { width: 100%; }
      /* Linkitys room-row:n sisällä — mobiilissa heti tyypin jälkeen */
      .room-link-inner { padding: 6px 0 2px 0; border-top: none; background: transparent;
        flex-direction: column; align-items: flex-start; gap: 5px; order: 2; width: 100%; }
      .room-link-inner select { width: 100%; }
      /* Järjestys flex-columnissa: numero=1, tyyppi=2, linkitys=3, m²=4, materiaali=5 */
      .room-row .room-number { order: 1; }
      .room-row > div:nth-child(3) { order: 2; } /* tyyppi */
      .room-link-inner { order: 3; }
      .room-row > div:nth-child(2) { order: 4; } /* m² */
      .room-row > div:nth-child(4) { order: 5; } /* materiaali */
      .room-row > div:nth-child(5) { order: 6; } /* nimi */
      .room-row > span { order: 7; }             /* varoitus */

      /* Lomakerivit termostaatti/syöttöputki-osioissa */
      .field-row { flex-direction: column; align-items: flex-start; gap: 6px; }
      .field-row label { min-width: unset; width: 100%; }
      .field-row select,
      .field-row input[type="number"] { width: 100%; max-width: 100%; }

      /* Yleiset flex-rivit osioissa — pinoa mobiililla */
      .floor-section > div[style*="display:flex"],
      .floor-section > div > div[style*="display:flex;align-items:center;gap:14px"] {
        flex-wrap: wrap;
      }

      /* Chip-kortit — koko leveys mobiililla */
      .stat-chips { flex-direction: column; }
      .chip { min-width: unset; width: 100%; flex: unset; }

      /* Yhteenveto-modal — koko näyttö */
      #yhteenveto-modal { padding: 0; }
      #yhteenveto-inner { border-radius: 0; padding: 16px 14px 40px; min-height: 100vh; }
      #yhteenveto-inner h2 { font-size: 1.05rem; }
      .yht-modal-btns { flex-direction: column; }
      .yht-modal-btns .btn { width: 100%; justify-content: center; }

      /* Yhteenveto-taulukot — vaakaselaus sallitaan */
      .yht-table, .summary-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

      /* Inline-style flex-rivit osioissa — pakota wrappaus */
      [style*="display:flex;align-items:center;gap:14px"] { flex-direction: column; align-items: flex-start !important; gap: 6px !important; }
      [style*="display:flex;align-items:center;gap:10px;flex-wrap:wrap"] { flex-direction: column; align-items: flex-start !important; gap: 6px !important; }
      [style*="min-width:140px"], [style*="min-width:180px"],
      [style*="min-width:200px"], [style*="min-width:220px"],
      [style*="min-width:260px"], [style*="min-width:300px"],
      [style*="min-width:340px"] { min-width: unset !important; width: 100% !important; max-width: 100% !important; }

      /* Jakotukin lisävarusteet-osio */
      [id^="ilmaus-sulku-section"] select { width: 100%; }
    }