:root{
    --bg:#F6F8FA;
    --bg-2:#FFFFFF;
    --panel:#FFFFFF;
    --panel-2:#EEF3F7;
    --grid-line: rgba(15,76,129,0.05);
    --border:#D7E0E8;
    --border-soft:#E4EAEF;
    --text:#1B2733;
    --text-dim:#5B6B7A;
    --text-faint:#8B98A5;
    --accent:#0080CC;
    --accent-dim: rgba(18,122,91,0.10);
    --signal:#0F4C81;
    --signal-dim: rgba(15,76,129,0.08);
    --danger:#C4443A;
    --radius: 10px;
    --font-disp: 'Noto Sans TC', sans-serif;
    --font-body: 'Noto Sans TC', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background-color: #FFFFFF;
    color: var(--text);
    font-family: var(--font-body);
    line-height:1.6;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }
  a{color:var(--accent); text-decoration:none;}
  a:hover{text-decoration:underline;}
  ::selection{background: var(--accent-dim); color: var(--text);}
  :focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

  .wrap{max-width:1240px; margin:0 auto; padding:0 24px;}

  /* ---------- header ---------- */
  header.site{
    position:sticky; top:0; z-index:40;
    background: rgba(246,248,250,0.92);
    backdrop-filter: blur(10px);
    border-bottom:1px solid var(--border-soft);
  }
  .header-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 24px; gap:16px; flex-wrap:wrap;
  }
  .brand{display:flex; align-items:center; gap:12px;}
  .brand-mark{
    width:40px; height:40px; flex:0 0 auto;
    border:1.5px solid var(--signal);
    border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-weight:700; font-size:13px;
    color:var(--signal);
    background: var(--signal-dim);
  }
  .brand-text .name{font-family:var(--font-disp); font-weight:900; font-size:16px; letter-spacing:.02em;}
  .brand-text .tag{font-family:var(--font-mono); font-size:11px; color:var(--text-dim); letter-spacing:.06em;}

  /* Nav Tabs */
  .nav-tabs{
    display:flex; gap:6px; background:var(--panel-2); padding:4px;
    border-radius:8px; border:1px solid var(--border-soft);
  }
  .nav-tab{
    font-family:var(--font-mono); font-size:12.5px; font-weight:600;
    padding:8px 14px; border-radius:6px; cursor:pointer; color:var(--text-dim);
    transition:all .15s ease; border:none; background:transparent; display:flex; align-items:center; gap:6px;
  }
  .nav-tab:hover{color:var(--text);}
  .nav-tab.active{background:var(--signal); color:#FFFFFF; box-shadow:0 2px 8px rgba(15,76,129,0.25);}

  .mode-switch{
    display:flex; align-items:center; gap:10px;
    font-family:var(--font-mono); font-size:12px; letter-spacing:.05em;
  }
  .mode-switch .lbl{color:var(--text-faint); transition:color .2s;}
  .mode-switch .lbl.active{color:var(--accent);}
  .switch-track{
    position:relative; width:56px; height:28px;
    background:var(--panel-2); border:1px solid var(--border);
    border-radius:999px; cursor:pointer;
  }
  .switch-thumb{
    position:absolute; top:2px; left:2px; width:22px; height:22px;
    background:var(--accent); border-radius:50%;
    transition:transform .25s cubic-bezier(.4,0,.2,1);
    box-shadow:0 0 10px rgba(18,122,91,.4);
  }
  body.mode-pro .switch-thumb{ transform:translateX(28px); background:var(--signal); box-shadow:0 0 10px rgba(15,76,129,.4);}
  body.mode-pro .mode-switch .lbl.simple{color:var(--text-faint);}
  body.mode-pro .mode-switch .lbl.pro{color:var(--signal);}
  body:not(.mode-pro) .mode-switch .lbl.simple{color:var(--accent);}

  /* ---------- hero ---------- */
  .hero{padding:36px 0 24px; border-bottom:1px solid var(--border-soft);}
  .eyebrow{
    font-family:var(--font-mono); font-size:12px; letter-spacing:.14em;
    color:var(--accent); text-transform:uppercase; margin-bottom:10px;
    display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{content:''; width:22px; height:1px; background:var(--accent);}
  h1{
    font-family:var(--font-disp); font-weight:900; font-size:clamp(26px,3.5vw,38px);
    line-height:1.25; max-width:800px; letter-spacing:-0.01em;
  }
  .hero p.lead{
    margin-top:12px; max-width:750px; color:var(--text-dim); font-size:14.5px;
  }

  /* ---------- Tab Views ---------- */
  .tab-content{display:none;}
  .tab-content.active{display:block;}

  /* ---------- layout ---------- */
  .layout{
    display:grid; grid-template-columns: 1fr 360px; gap:28px;
    padding:28px 0 80px; align-items:start;
  }
  @media (max-width: 960px){
    .layout{grid-template-columns: 1fr;}
  }

  .panel{
    background: var(--panel);
    border:1px solid var(--border-soft);
    border-radius: var(--radius);
    padding:24px;
    box-shadow: 0 1px 2px rgba(27,39,51,0.04), 0 8px 24px rgba(27,39,51,0.05);
  }
  .panel + .panel{margin-top:24px;}
  .panel-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px; gap:12px; flex-wrap:wrap;}
  .panel-head h2{font-family:var(--font-disp); font-weight:700; font-size:17px;}
  .panel-head .idx{font-family:var(--font-mono); font-size:11px; color:var(--text-faint); letter-spacing:.08em;}

  /* ---------- form ---------- */
  .field-grid{display:grid; grid-template-columns: 1fr 1fr; gap:16px 18px;}
  @media (max-width:560px){.field-grid{grid-template-columns:1fr;}}
  .field{display:flex; flex-direction:column; gap:6px;}
  .field.span2{grid-column: 1 / -1;}
  .field label{
    font-family:var(--font-mono); font-size:11.5px; color:var(--text-dim);
    letter-spacing:.03em; display:flex; justify-content:space-between; gap:8px;
  }
  .field label .hint{color:var(--text-faint); font-weight:400;}
  .field input, .field select{
    background: var(--panel-2);
    border:1px solid var(--border);
    color:var(--text);
    border-radius:7px;
    padding:10px 12px;
    font-family:var(--font-mono);
    font-size:13.5px;
    transition:border-color .15s;
  }
  .field input:focus, .field select:focus{border-color:var(--accent); outline:none;}
  .radio-row{display:flex; gap:10px; flex-wrap:wrap;}
  .radio-chip{
    font-family:var(--font-mono); font-size:12.5px;
    border:1px solid var(--border); border-radius:999px;
    padding:7px 14px; cursor:pointer; color:var(--text-dim);
    background:var(--panel-2); transition:all .15s;
  }
  .radio-chip input{display:none;}
  .radio-chip.checked{border-color:var(--accent); color:var(--accent); background:var(--accent-dim);}

  .pro-only{display:none;}
  body.mode-pro .pro-only{display:flex;}
  body.mode-pro .pro-only.field-grid-block{display:block;}

  .divider-label{
    font-family:var(--font-mono); font-size:11px; color:var(--signal);
    letter-spacing:.08em; margin:22px 0 12px; padding-top:14px;
    border-top:1px dashed var(--border); text-transform:uppercase;
  }

  .btn{
    font-family:var(--font-mono); font-size:13.5px; font-weight:600;
    letter-spacing:.03em; border:none; border-radius:8px;
    padding:13px 22px; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
    transition:transform .12s, box-shadow .12s;
  }
  .btn-primary{background:var(--accent); color:#FFFFFF;}
  .btn-primary:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(18,122,91,.22);}
  .btn-block{width:100%; justify-content:center; margin-top:22px;}

  /* ---------- gauge ---------- */
  .gauge-wrap{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
  .gauge-readout{font-family:var(--font-mono);}
  .gauge-readout .big{font-size:30px; font-weight:700; color:var(--accent);}
  .gauge-readout .lbl{font-size:11px; color:var(--text-dim); letter-spacing:.06em; text-transform:uppercase; margin-top:4px;}
  #gaugeNeedle{transform-origin:100px 100px; transform:rotate(-90deg); transition:transform .6s cubic-bezier(.34,1.56,.64,1);}

  /* ---------- stat grid ---------- */
  .stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-top:16px;}
  .stat-card{
    background:var(--panel-2); border:1px solid var(--border-soft); border-radius:8px; padding:12px 14px;
  }
  .stat-card .lbl{font-family:var(--font-mono); font-size:10.5px; color:var(--text-dim); letter-spacing:.05em; text-transform:uppercase;}
  .stat-card .val{font-family:var(--font-mono); font-size:20px; font-weight:700; color:var(--text); margin-top:4px;}
  .stat-card .val .unit{font-size:11px; color:var(--text-faint); font-weight:400; margin-left:4px;}

  /* ---------- Q & Theory Grids ---------- */
  .q-breakdown-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin-top:16px;}
  .q-card{
    position:relative; background:var(--panel-2); border:1px solid var(--border-soft); border-radius:10px;
    padding:16px 12px 12px; text-align:center;
  }
  .q-card .q-badge{
    position:absolute; top:8px; right:8px;
    font-family:var(--font-mono); font-size:9.5px; font-weight:700; color:var(--signal);
    background:var(--signal-dim); border-radius:999px; padding:2px 6px;
  }
  .q-card .q-title{font-size:12px; font-weight:700; color:var(--text); line-height:1.4;}
  .q-card .q-desc{font-size:10.5px; color:var(--text-faint); margin-top:4px; line-height:1.4; min-height:28px;}
  .q-card .q-value{font-family:var(--font-mono); font-size:15px; font-weight:700; color:var(--signal); margin-top:8px;}

  /* Theory Box Styles */
  .theory-card{
    background: var(--panel-2); border:1px solid var(--border-soft);
    border-radius: 8px; padding: 18px; margin-top: 14px;
  }
  .theory-card h3{ font-size:15px; color:var(--signal); font-family:var(--font-disp); margin-bottom:8px;}
  .theory-card p{ font-size:13px; color:var(--text-dim); line-height:1.6; }
  .formula-box{
    background: var(--panel); border:1px solid var(--border); border-radius:6px;
    padding:12px; margin:10px 0; font-family:var(--font-mono); font-size:13px; color:var(--accent);
  }

  .note{font-size:12px; color:var(--text-faint); margin-top:12px; line-height:1.65;}

  /* ---------- tables ---------- */
  .custom-table{
    width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px;
  }
  .custom-table th, .custom-table td{
    border: 1px solid var(--border); padding: 10px 12px; text-align: left;
  }
  .custom-table th{ background: var(--panel-2); color: var(--text); font-family: var(--font-mono); }
  .custom-table td{ color: var(--text-dim); }

  /* ---------- unit recommendation card ---------- */
  .unit-card{
    border:1px solid var(--signal); background:var(--signal-dim);
    border-radius:999px; padding:20px; margin-top:16px; text-align:center;
  }
  .unit-card{ border-radius:9px; }
  .unit-lbl{font-family:var(--font-mono); font-size:12px; color:var(--signal); letter-spacing:.06em; text-transform:uppercase;}
  .unit-count{font-family:var(--font-disp); font-weight:900; color:var(--signal); line-height:1; margin-top:8px;}
  .unit-count span#productUnits{font-size:56px;}
  .unit-count .unit-suffix{font-size:20px; font-weight:700; margin-left:8px;}
  .unit-note{font-size:12px; color:var(--text-dim); margin-top:10px; max-width:480px; margin-left:auto; margin-right:auto; line-height:1.6;}

  .saving-card{
    border:1px solid var(--accent); background:var(--accent-dim);
    border-radius:9px; padding:18px; margin-top:16px;
  }
  .saving-card .headline{font-family:var(--font-mono); font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em;}
  .saving-card .amount{font-family:var(--font-disp); font-weight:900; font-size:32px; color:var(--accent); margin-top:4px;}
  .saving-card .sub{font-family:var(--font-mono); font-size:11.5px; color:var(--text-dim); margin-top:6px;}

  .results-empty{color:var(--text-faint); font-size:13.5px; padding:30px 0; text-align:center;}

  /* ---------- QA ---------- */
  aside.qa{position:sticky; top:88px;}
  .staff-dot{
    width:9px; height:9px; border-radius:50%; padding:0; border:none;
    background: var(--border); cursor:pointer; flex:0 0 auto; align-self:center;
    transition: background .2s, transform .2s;
  }
  .staff-dot:hover{ transform:scale(1.3); }
  .staff-dot.unlocked{ background: var(--accent); }
  .qa-list{max-height:380px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; padding-right:4px;}
  .qa-list::-webkit-scrollbar{width:6px;}
  .qa-list::-webkit-scrollbar-thumb{background:var(--border); border-radius:3px;}
  .qa-item{background:var(--panel-2); border:1px solid var(--border-soft); border-radius:8px; padding:12px 14px;}
  .qa-item .q{font-size:13px; color:var(--text);}
  .qa-item .meta{display:flex; justify-content:space-between; align-items:center; margin-top:6px;}
  .qa-item .who{font-family:var(--font-mono); font-size:10.5px; color:var(--text-faint);}
  .badge{font-family:var(--font-mono); font-size:10px; padding:2px 8px; border-radius:999px; letter-spacing:.04em;}
  .badge.pending{background:var(--signal-dim); color:var(--signal);}
  .badge.answered{background:var(--accent-dim); color:var(--accent);}
  .qa-item .a{margin-top:8px; padding-top:8px; border-top:1px dashed var(--border); font-size:12.5px; color:var(--text-dim);}
  .qa-item .a b{color:var(--accent); font-family:var(--font-mono); font-size:11px;}
  .qa-reply{display:flex; gap:6px; margin-top:8px;}
  .qa-reply textarea{
    flex:1; background:var(--panel-2); border:1px solid var(--border); color:var(--text);
    border-radius:6px; padding:6px 8px; font-size:12px; font-family:var(--font-body); resize:vertical; min-height:34px;
  }
  .qa-reply button{
    font-family:var(--font-mono); font-size:11px; background:var(--signal); color:#FFFFFF;
    border:none; border-radius:6px; padding:0 12px; cursor:pointer;
  }
  .qa-form{margin-top:16px; border-top:1px solid var(--border-soft); padding-top:16px;}
  .qa-form textarea{
    width:100%; background:var(--panel-2); border:1px solid var(--border); color:var(--text);
    border-radius:7px; padding:10px 12px; font-family:var(--font-body); font-size:13px; min-height:60px; resize:vertical;
  }
  .qa-form input{
    width:100%; margin-top:8px; background:var(--panel-2); border:1px solid var(--border); color:var(--text);
    border-radius:7px; padding:9px 12px; font-family:var(--font-body); font-size:13px;
  }
  .qa-shared-note{font-size:11px; color:var(--text-faint); margin-top:8px; line-height:1.6;}

  /* ---------- footer ---------- */
  footer{background:#0080CC; padding:36px 0 42px; margin-top:20px;}
  footer .wrap{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;}
  footer .disclaimer{font-size:12px; color:rgba(255,255,255,0.85); max-width:680px; line-height:1.7;}
  footer .contact{font-family:var(--font-mono); font-size:12px; color:#FFFFFF; text-align:right;}
  footer .contact a{color:#FFFFFF; text-decoration:underline;}

  /* ---------- glossary helper ---------- */
  .glossary-fab{
    position:fixed; bottom:24px; right:24px; z-index:60;
    width:52px; height:52px; border-radius:50%; border:none;
    background:var(--signal); color:#FFFFFF; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 20px rgba(15,76,129,.35);
    transition:transform .15s;
  }
  .glossary-fab svg{width:24px; height:24px;}
  .glossary-fab:hover{transform:scale(1.06);}

  .glossary-overlay{
    position:fixed; inset:0; z-index:70;
    background:rgba(15,23,32,0.45);
    display:none; align-items:center; justify-content:center;
    padding:20px;
  }
  .glossary-overlay.open{display:flex;}
  .glossary-panel{
    width:100%; max-width:560px; max-height:80vh;
    background:var(--panel); border:1px solid var(--border-soft); border-radius:14px;
    box-shadow:0 20px 60px rgba(15,23,32,.25);
    display:flex; flex-direction:column; overflow:hidden;
  }
  .glossary-head{
    display:flex; align-items:flex-start; justify-content:space-between;
    padding:20px 22px 14px; border-bottom:1px solid var(--border-soft);
  }
  .glossary-title{font-family:var(--font-disp); font-weight:900; font-size:17px;}
  .glossary-sub{font-family:var(--font-mono); font-size:11px; color:var(--text-dim); margin-top:4px;}
  .glossary-close{
    background:var(--panel-2); border:1px solid var(--border); color:var(--text-dim);
    width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:14px; flex:0 0 auto;
  }
  .glossary-close:hover{color:var(--text); border-color:var(--signal);}
  .glossary-search{
    margin:14px 22px 4px; background:var(--panel-2); border:1px solid var(--border);
    color:var(--text); border-radius:8px; padding:10px 12px; font-family:var(--font-body); font-size:13.5px;
  }
  .glossary-list{overflow-y:auto; padding:10px 22px 22px; flex:1; display:flex; flex-direction:column; gap:10px;}
  .glossary-item{
    background:var(--panel-2); border:1px solid var(--border-soft); border-radius:10px;
    padding:14px 16px;
  }
  .glossary-item-head{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
  }
  .glossary-term{font-family:var(--font-mono); font-weight:700; font-size:13.5px; color:var(--signal);}
  .glossary-full{font-size:11.5px; color:var(--text-faint); margin-top:2px;}
  .glossary-desc{
    font-size:12.5px; color:var(--text-dim); line-height:1.7; margin-top:8px;
    padding-top:8px; border-top:1px dashed var(--border);
  }

  @media (prefers-reduced-motion: reduce){
    *{transition:none !important;}
  }

  /* ---------- PDF & Print Optimizations ---------- */
  @media print {
    header.site, .hero, aside.qa, .glossary-fab, .glossary-overlay, 
    footer, #exportCsvBtn, #exportPdfBtn, #calcBtn, .nav-tabs {
      display: none !important;
    }

    body {
      background: #ffffff !important;
      color: #000000 !important;
      font-size: 11pt;
    }

    .wrap {
      max-width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    .layout {
      display: block !important;
      padding: 0 !important;
    }

    .panel {
      border: 1px solid #ccc !important;
      box-shadow: none !important;
      page-break-inside: avoid;
      margin-bottom: 20px !important;
    }

    body::before {
      content: "奇鼎科技 - 無塵室空調與熱負荷設計評估報告";
      display: block;
      font-size: 18pt;
      font-weight: bold;
      text-align: center;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 2px solid #0F4C81;
    }
  }