:root{--bg-deep:#f4f8ff;--bg-card:#ffffff;--bg-input:#f7faff;--bg-hover:#edf3ff;--border:#d8e3f4;--border-accent:#7aa8f5;--teal:#0f2f78;--teal-dim:#163c96;--green:#1f9a58;--green-dim:#167541;--amber:#d28a00;--red:#d64b5c;--text-primary:#0a0a0a;--text-secondary:#1f2937;--text-dim:#374151;--label:#3f77df;--input-bg:#ffffff;--input-border:#cfdcf1;--input-focus:#477ee0;--tab-inactive:#edf3ff;--tab-active:#477ee0;--section-header:#eef4ff;--output-bg:#f8fbff;--output-border:#b8cdf1;--proceed:#1f9a58;--caution:#d28a00;--reject:#d64b5c}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Roboto,sans-serif;background:var(--bg-deep);color:var(--text-primary);min-height:100vh;font-size:16px;line-height:1.55}.app-title,.data-table,.field input,.field label,.field select,.header-meta,.info-badge,.kpi-card .kpi-label,.kpi-card .kpi-val,.meter-label,.output-row .out-label,.output-row .out-val,.score-table,.section-header h3,.tab-btn{font-family:Roboto,sans-serif}.app-header{background:linear-gradient(135deg,#fdfefe 0,#eff5ff 45%,#e8f1ff 100%);border-bottom:1px solid var(--border-accent);padding:18px 32px;display:flex;align-items:center;justify-content:space-between}.app-header .logo-area{display:flex;align-items:center;gap:16px}.hp-icon{width:44px;height:44px;background:linear-gradient(135deg,#5f94ee,#2f58bc);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 8px 20px rgba(63,119,223,.25)}.app-title{font-family:Roboto,sans-serif}.app-title h1{font-size:22px;font-weight:600;color:var(--teal);letter-spacing:.5px}.app-title p{font-size:14px;color:var(--text-secondary);margin-top:2px}.header-meta{font-size:13px;color:var(--text-secondary);text-align:right;line-height:1.7}.tab-bar{background:linear-gradient(90deg,#eef4ff 0,#e4eeff 50%,#dce9ff 100%);border-bottom:1px solid var(--border);display:flex;padding:0 24px;gap:0;overflow-x:auto}.tab-btn{padding:14px 20px;cursor:pointer;font-size:13px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;color:var(--text-secondary);border-bottom:2px solid transparent;background:0 0;border-top:none;border-left:none;border-right:none;transition:.2s;white-space:nowrap;display:flex;align-items:center;gap:8px}.tab-btn:hover{color:var(--text-primary);background:var(--bg-hover)}.tab-btn.active{color:var(--teal);border-bottom-color:var(--teal);background:var(--bg-hover)}.tab-btn .tab-num{width:20px;height:20px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:10px}.tab-btn.active .tab-num{background:var(--teal-dim);color:#fff}.tab-content{display:none;padding:24px 32px;max-width:1400px;margin:0 auto}.tab-content.active{display:block}.section{margin-bottom:24px;border:1px solid var(--border);border-radius:8px;overflow:hidden}.section-header{background:var(--section-header);padding:12px 18px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border)}.section-header h3{font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--teal)}.section-header .sh-icon{font-size:16px;color:var(--teal-dim);width:18px;text-align:center}.section-body{padding:18px;background:var(--bg-card)}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}.grid-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:14px}.col-span-2{grid-column:span 2}.field{display:flex;flex-direction:column;gap:5px}.field label{font-size:12px;font-weight:500;color:var(--text-secondary);letter-spacing:.5px;text-transform:uppercase}.field .hint{font-size:12px;color:var(--text-dim);font-style:italic;line-height:1.4}.field input,.field select{background:var(--input-bg);border:1px solid var(--input-border);border-radius:5px;padding:10px 12px;font-size:15px;color:#000;outline:0;transition:border-color .2s;width:100%}.field input:focus,.field select:focus{border-color:var(--input-focus);box-shadow:0 0 0 2px rgba(71,126,224,.18)}.field input[readonly]{background:var(--bg-deep);color:var(--teal);cursor:default;border-color:var(--border-accent);font-weight:600}.field select option{background:var(--bg-deep)}.output-panel{background:var(--output-bg);border:1px solid var(--output-border);border-radius:8px;padding:16px}.output-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(184,205,241,.8)}.output-row:last-child{border-bottom:none}.output-row .out-label{font-family:Roboto,sans-serif;font-size:11px;color:#111827;max-width:65%}.output-row .out-val{font-family:Roboto,sans-serif;font-size:14px;font-weight:600;color:var(--teal);text-align:right}.out-val.good{color:var(--green)}.out-val.warn{color:var(--amber)}.out-val.bad{color:var(--red)}.rec-box{padding:16px 20px;border-radius:8px;display:flex;align-items:center;gap:16px;margin-top:16px}.rec-box.proceed{background:rgba(31,154,88,.1);border:1px solid var(--proceed)}.rec-box.caution{background:rgba(210,138,0,.1);border:1px solid var(--caution)}.rec-box.reject{background:rgba(214,75,92,.1);border:1px solid var(--reject)}.rec-icon{font-size:28px}.rec-content h4{font-size:14px;font-weight:600;margin-bottom:4px}.rec-content p{font-size:12px;color:var(--text-secondary);line-height:1.5}.proceed .rec-content h4{color:var(--proceed)}.caution .rec-content h4{color:var(--caution)}.reject .rec-content h4{color:var(--red)}.scoreboard{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:24px;text-align:center}.score-circle{width:140px;height:140px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto 20px;position:relative;border:5px solid var(--teal);background:var(--output-bg);box-shadow:0 0 30px rgba(63,119,223,.2)}.score-num{font-family:Roboto,sans-serif;font-size:48px;font-weight:600;line-height:1;color:var(--teal)}.score-label{font-size:11px;color:var(--text-secondary);letter-spacing:1px}.score-table{width:100%;border-collapse:collapse;margin-top:16px;font-family:Roboto,sans-serif;font-size:11px}.score-table td,.score-table th{padding:8px 12px;border:1px solid var(--border);text-align:center}.score-table th{background:var(--bg-deep);color:var(--text-secondary)}.score-table .highlight{background:rgba(63,119,223,.12);color:var(--teal);font-weight:600}.meter-wrap{margin:8px 0}.meter-label{display:flex;justify-content:space-between;font-family:Roboto,sans-serif;font-size:11px;color:var(--text-secondary);margin-bottom:4px}.meter-bar{height:6px;background:var(--border);border-radius:3px;overflow:hidden}.meter-fill{height:100%;border-radius:3px;transition:width .5s}.meter-fill.good{background:linear-gradient(90deg,#1f7a30,#39d353)}.meter-fill.warn{background:linear-gradient(90deg,#7a5500,#f0a500)}.meter-fill.bad{background:linear-gradient(90deg,#7a1c1c,#f25c5c)}.divider{border:none;border-top:1px solid var(--border);margin:16px 0}.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}.kpi-card{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:16px;border-top:2px solid var(--teal)}.kpi-card .kpi-label{font-family:Roboto,sans-serif;font-size:10px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}.kpi-card .kpi-val{font-family:Roboto,sans-serif;font-size:24px;font-weight:600;color:var(--teal)}.kpi-card .kpi-unit{font-size:11px;color:var(--text-dim);margin-top:3px}.kpi-card.green{border-top-color:var(--green)}.kpi-card.green .kpi-val{color:var(--green)}.kpi-card.amber{border-top-color:var(--amber)}.kpi-card.amber .kpi-val{color:var(--amber)}.kpi-card.red{border-top-color:var(--red)}.kpi-card.red .kpi-val{color:var(--red)}.chart-wrap{background:var(--bg-deep);border:1px solid var(--border);border-radius:8px;padding:16px;height:220px;position:relative;overflow:hidden}.bar-chart{display:flex;align-items:flex-end;gap:8px;height:170px;padding:0 8px}.bar-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}.bar-val{font-family:Roboto,sans-serif;font-size:10px;color:var(--text-secondary)}.bar{width:100%;border-radius:4px 4px 0 0;transition:height .5s;min-height:2px}.bar-name{font-family:Roboto,sans-serif;font-size:9px;color:var(--text-dim);text-align:center;margin-top:4px}.info-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:rgba(63,119,223,.08);border:1px solid rgba(63,119,223,.28);border-radius:4px;font-family:Roboto,sans-serif;font-size:10px;color:var(--teal);margin-top:6px}.two-panel{display:grid;grid-template-columns:1fr 1fr;gap:20px}.data-table{width:100%;border-collapse:collapse;font-size:13px}.data-table th{padding:8px 12px;background:var(--bg-deep);color:var(--text-secondary);text-align:left;border:1px solid var(--border);letter-spacing:.5px;font-size:10px;text-transform:uppercase}.data-table td{padding:8px 12px;border:1px solid var(--border);color:#000}.data-table tr:hover td{background:var(--bg-hover)}.data-table .key-row td{color:var(--teal);font-weight:600}[data-tip]{position:relative;cursor:help;border-bottom:1px dashed var(--text-dim)}[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:120%;left:0;background:#fff;border:1px solid var(--border);border-radius:6px;padding:8px 12px;font-size:11px;color:var(--text-secondary);max-width:300px;white-space:normal;z-index:100;line-height:1.5;box-shadow:0 8px 24px rgba(31,68,140,.16)}@media (max-width:900px){.grid-3,.grid-4,.kpi-grid,.two-panel{grid-template-columns:1fr 1fr}.tab-content{padding:16px}}.calc-btn{background:linear-gradient(135deg,#477ee0,#2e56b3);color:#fff;border:none;padding:12px 28px;border-radius:6px;font-family:Roboto,sans-serif;font-size:12px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;cursor:pointer;transition:.2s;margin-top:16px}.calc-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(63,119,223,.35)}.nav-footer{display:flex;justify-content:space-between;align-items:center;margin-top:24px;padding-top:16px;border-top:1px solid var(--border)}.nav-btn{padding:10px 20px;border-radius:6px;cursor:pointer;font-family:Roboto,sans-serif;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;border:1px solid var(--border);background:var(--bg-hover);color:var(--text-secondary);transition:.2s}.nav-btn.primary{background:var(--teal-dim);color:#fff;border-color:var(--teal)}.nav-btn:hover{border-color:var(--teal);color:var(--teal)}.site-footer{margin-top:32px;border-top:1px solid var(--border-accent);background:linear-gradient(180deg,#f8fbff 0,#eef4ff 100%);padding:20px 32px 28px}.site-footer-inner{max-width:1400px;margin:0 auto;text-align:center}.site-footer-wwf{font-family:Roboto,sans-serif;font-size:11px;line-height:1.65;color:var(--text-secondary);max-width:720px;margin:0 auto 10px}.site-footer-wwf sup{font-size:.65em;vertical-align:super}.site-footer-credit{font-family:Roboto,sans-serif;font-size:12px;font-weight:500;color:var(--teal);letter-spacing:.3px;margin:0}@media (max-width:600px){.grid-2,.grid-3,.grid-4,.kpi-grid,.two-panel{grid-template-columns:1fr}.site-footer{padding:16px 16px 22px}}