:root {
  --primary:#9EE771;--primary-dark:#76DD36;--primary-deep:#5AB22A;
  --primary-100:#F2F9E6;--primary-150:#E6F5D1;--primary-200:#DAF1BB;
  --text:#263717;--text-mid:#4a5e38;--text-soft:#7e9065;--text-faint:#afc49a;
  --bg:#FFFFFF;--bg-soft:#faf9f6;--bg-green:#F2F9E6;
  --border:#EDEFEC;--border-mid:#dedcd8;
  --gray-400:#c6c2bd;--gray-500:#aea9a4;
  --danger:#d4645a;--warning:#e8a84a;--success:#5AB22A;
  --radius:8px;--radius-lg:14px;
  --shadow:0 2px 12px rgba(38,55,23,.07);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg-soft);color:var(--text);font-family:'Inter',sans-serif;font-size:15px;font-weight:400;line-height:1.6;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:0 0 80px}

/* TOPBAR */
.topbar{width:100%;background:var(--bg);border-bottom:1px solid var(--border);padding:0 32px;display:flex;align-items:center;justify-content:space-between;height:64px;position:sticky;top:0;z-index:100}
.logo-mark{display:flex;align-items:center;gap:10px}
.logo-text{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:17px;color:var(--text)}
.topbar-right{display:flex;align-items:center;gap:16px}
.date-badge{font-size:12px;color:var(--text-soft)}
.pill-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;background:var(--primary-100);border:1px solid var(--primary-200);border-radius:20px;font-size:12px;font-weight:500;color:var(--primary-deep)}

/* PROGRESS */
.progress-wrap{width:100%;max-width:800px;padding:28px 0 0;margin-bottom:28px}
.step-nav{display:flex;align-items:center;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.step-nav::-webkit-scrollbar{display:none}
.step-node{display:flex;align-items:center;gap:8px;cursor:pointer;flex-shrink:0;padding:4px 6px 4px 0;transition:opacity .2s}
.step-node:not(.active):not(.done){opacity:.4;cursor:default}
.node-dot{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--border-mid);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--gray-500);background:var(--bg);flex-shrink:0;transition:all .25s;font-family:'Bricolage Grotesque',sans-serif}
.step-node.active .node-dot{border-color:var(--primary-dark);background:var(--primary);color:var(--text)}
.step-node.done .node-dot{border-color:var(--success);background:#e8f7e0;color:var(--success)}
.node-label{font-size:12px;font-weight:500;color:var(--text-soft);white-space:nowrap}
.step-node.active .node-label{color:var(--text)}
.step-node.done .node-label{color:var(--success)}
.step-node.step-ok .node-dot{border-color:var(--success);background:#e8f7e0;color:var(--success)}
.step-node.step-ok .node-label{color:var(--success)}
.step-node.step-warn .node-dot{border-color:var(--warning);background:#FFF8EC;color:var(--warning)}
.step-node.step-warn .node-label{color:var(--warning)}
.node-arrow{color:var(--border-mid);font-size:12px;margin:0 2px;flex-shrink:0}
.progress-bar{margin-top:14px;height:3px;background:var(--border);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-dark));border-radius:3px;transition:width .5s cubic-bezier(.4,0,.2,1)}

/* LAYOUT */
.page{width:100%;max-width:800px;padding:0 16px}
.card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:36px 40px;box-shadow:var(--shadow);animation:slideIn .3s cubic-bezier(.4,0,.2,1) both}
@keyframes slideIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.card-head{margin-bottom:32px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.step-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-deep);margin-bottom:6px}
.dot-green{width:6px;height:6px;border-radius:50%;background:var(--primary);display:inline-block}
.card-title{font-family:'Bricolage Grotesque',sans-serif;font-size:26px;font-weight:600;color:var(--text);line-height:1.2;letter-spacing:-.02em}
.card-desc{margin-top:6px;font-size:14px;color:var(--text-soft)}
.sec{font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:600;color:var(--text-mid);margin:28px 0 14px;display:flex;align-items:center;gap:10px}
.sec::after{content:'';flex:1;height:1px;background:var(--border)}

/* FIELDS */
.field-group{display:flex;flex-direction:column;gap:16px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:5px}
.field > span{font-size:12px;font-weight:500;color:var(--text-mid)}
.field input,.field textarea{background:var(--bg-soft);border:1.5px solid var(--border-mid);border-radius:var(--radius);padding:10px 14px;font-family:'Inter',sans-serif;font-size:14px;color:var(--text);outline:none;transition:border-color .18s,box-shadow .18s;resize:none}
.field input:focus,.field textarea:focus{border-color:var(--primary-dark);background:var(--bg);box-shadow:0 0 0 3px rgba(118,221,54,.15)}
.field input::placeholder,.field textarea::placeholder{color:var(--gray-400)}
.field textarea{min-height:76px;line-height:1.6}

/* CHOICE CARDS */
.choice-grid{display:grid;gap:12px}
.choice-grid.cols2{grid-template-columns:1fr 1fr}
.choice-card{position:relative;border:1.5px solid var(--border-mid);border-radius:var(--radius-lg);padding:18px 20px;cursor:pointer;transition:all .2s;background:var(--bg-soft);user-select:none;-webkit-user-select:none}
.choice-card:hover{border-color:var(--primary);background:var(--primary-100)}
.choice-card.sel{border-color:var(--primary-dark);background:var(--primary-100);box-shadow:0 0 0 3px rgba(118,221,54,.2)}
.c-icon{font-size:22px;margin-bottom:8px;display:block}
.c-title{font-family:'Bricolage Grotesque',sans-serif;font-size:15px;font-weight:600;color:var(--text);margin-bottom:4px}
.c-desc{font-size:12px;color:var(--text-soft);line-height:1.5}
.c-check{position:absolute;top:12px;right:12px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border-mid);background:var(--bg);display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
.choice-card.sel .c-check{background:var(--primary-dark);border-color:var(--primary-dark)}

/* CHECK ROWS */
.check-list{display:flex;flex-direction:column;gap:8px}
.check-row{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;border:1.5px solid var(--border-mid);border-radius:var(--radius);cursor:pointer;transition:all .18s;background:var(--bg-soft);user-select:none;-webkit-user-select:none}
.check-row:hover{border-color:var(--primary);background:var(--primary-100)}
.check-row.sel{border-color:var(--primary-dark);background:var(--primary-100)}
.chk-box{width:18px;height:18px;border:1.5px solid var(--border-mid);border-radius:4px;background:var(--bg);flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;transition:all .18s}
.check-row.sel .chk-box{background:var(--primary-dark);border-color:var(--primary-dark)}
.chk-content{flex:1}
.chk-name{font-size:14px;font-weight:500;color:var(--text);display:block}
.chk-sub{font-size:12px;color:var(--text-soft);display:block;margin-top:1px}

/* PILLS */
.pill-row{display:flex;gap:8px;flex-wrap:wrap}
.pill{padding:7px 16px;border:1.5px solid var(--border-mid);border-radius:20px;font-size:13px;font-weight:500;cursor:pointer;transition:all .18s;color:var(--text-mid);background:var(--bg-soft);user-select:none;-webkit-user-select:none}
.pill:hover{border-color:var(--primary);color:var(--text);background:var(--primary-100)}
.pill.sel{border-color:var(--primary-dark);color:var(--text);background:var(--primary-100)}

/* COLORS */
.colors-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.color-entry{display:flex;align-items:center;gap:6px}
.color-entry input[type="color"]{width:32px;height:32px;border:1.5px solid var(--border-mid);border-radius:6px;cursor:pointer;padding:2px;background:none}
.color-entry input[type="text"]{width:82px;padding:6px 10px;font-size:12px;font-family:monospace;border:1.5px solid var(--border-mid);border-radius:6px;background:var(--bg-soft);color:var(--text);outline:none}
.color-entry input[type="text"]:focus{border-color:var(--primary-dark)}
.add-color-btn{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border:1.5px dashed var(--border-mid);border-radius:20px;font-size:12px;color:var(--text-soft);cursor:pointer;background:none;font-family:'Inter',sans-serif;transition:all .18s}
.add-color-btn:hover{border-color:var(--primary);color:var(--text)}
.remove-color-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1.5px solid var(--border-mid);border-radius:50%;font-size:14px;color:var(--gray-500);cursor:pointer;background:var(--bg);font-family:'Inter',sans-serif;transition:all .18s;padding:0;line-height:1}
.remove-color-btn:hover{border-color:var(--danger);color:var(--danger);background:#fef2f1}

/* NOTES */
.notes-wrap{border-left:3px solid var(--primary-200);border-radius:0 var(--radius) var(--radius) 0;background:var(--primary-100)}
.notes-wrap textarea{background:transparent;border:none;width:100%;padding:10px 14px;font-family:'Inter',sans-serif;font-size:13px;color:var(--text);outline:none;resize:none;min-height:68px;line-height:1.7}
.notes-wrap textarea::placeholder{color:var(--text-faint);font-style:italic}

/* RANGE */
.range-track{display:flex;flex-direction:column;gap:8px}
.range-val{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:600;color:var(--text)}
.range-sub{font-size:12px;color:var(--text-soft)}
input[type="range"]{-webkit-appearance:none;width:100%;height:4px;background:var(--border-mid);border-radius:4px;outline:none;cursor:pointer}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--primary-dark);border:3px solid var(--bg);box-shadow:0 0 0 1.5px var(--primary-dark);cursor:pointer}
.range-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--gray-500)}

/* INFO BOXES */
.info-box{padding:14px 16px;border-radius:var(--radius);font-size:13px;line-height:1.7}
.info-box.green{background:var(--primary-100);border:1.5px solid var(--primary-200);color:var(--text-mid)}
.info-box.yellow{background:#FFF8EC;border:1.5px solid #F0D99A;color:#7a6020}
.info-box.blue{background:#EEF4FF;border:1.5px solid #C7D9F8;color:#2a4080}

/* ACTIONS */
.actions{display:flex;align-items:center;justify-content:space-between;margin-top:32px;padding-top:24px;border-top:1px solid var(--border)}
.btn{display:inline-flex;align-items:center;gap:6px;padding:11px 24px;border-radius:var(--radius);font-family:'Inter',sans-serif;font-size:14px;font-weight:500;cursor:pointer;border:none;transition:all .18s}
.btn-ghost{background:transparent;color:var(--text-soft);border:1.5px solid var(--border-mid)}
.btn-ghost:hover{border-color:var(--gray-500);color:var(--text)}
.btn-primary{background:var(--primary);color:var(--text);font-weight:600;box-shadow:0 2px 8px rgba(118,221,54,.3)}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-outline{background:transparent;color:var(--primary-deep);border:1.5px solid var(--primary)}
.btn-outline:hover{background:var(--primary-100)}
.btn-sm{padding:6px 14px;font-size:12px}
.btn-icon-reset{background:none;border:1.5px solid var(--border-mid);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;color:var(--gray-500);transition:all .18s}
.btn-icon-reset:hover{border-color:var(--danger);color:var(--danger);background:#fef2f1}
.test-btns{display:flex;gap:4px}
.btn-test{padding:4px 10px;border-radius:14px;font-size:11px;font-weight:600;cursor:pointer;border:1.5px solid var(--border-mid);background:var(--bg-soft);font-family:'Inter',sans-serif;transition:all .18s}
.btn-test.cold{color:#5b8fbd}.btn-test.cold:hover{border-color:#5b8fbd;background:#eef4ff}
.btn-test.warm{color:#c8882a}.btn-test.warm:hover{border-color:#c8882a;background:#fff8ec}
.btn-test.hot{color:#c0392b}.btn-test.hot:hover{border-color:#c0392b;background:#fef2f1}

/* SUMMARY */
.summary-sections{display:flex;flex-direction:column;gap:16px}
.sum-block{border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden}
.sum-head{background:var(--bg-green);border-bottom:1px solid var(--border);padding:10px 18px}
.sum-head-label{font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:600;color:var(--primary-deep)}
.sum-body{padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.sum-row{display:flex;gap:12px;align-items:baseline;font-size:14px}
.sum-k{min-width:160px;flex-shrink:0;font-size:12px;color:var(--text-soft);font-weight:500}
.sum-v{color:var(--text);line-height:1.5}
.sum-tag{display:inline-flex;padding:3px 10px;background:var(--primary-100);border:1px solid var(--primary-200);color:var(--primary-deep);border-radius:20px;font-size:12px;font-weight:500;margin:2px 3px 2px 0}
.sum-note{font-size:12px;color:var(--text-soft);font-style:italic;padding:10px 18px;border-top:1px solid var(--border);background:rgba(158,231,113,.04)}
.score-card{display:flex;align-items:center;gap:20px;padding:20px 24px;background:linear-gradient(135deg,var(--primary-100),var(--bg));border:1.5px solid var(--primary-200);border-radius:var(--radius-lg);margin-bottom:20px}
.score-ring{width:68px;height:68px;border-radius:50%;border:2.5px solid var(--primary-dark);display:flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque',sans-serif;font-size:26px;font-weight:700;color:var(--text);background:var(--primary-100);flex-shrink:0}
.score-info strong{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:17px;font-weight:600;color:var(--text);margin-bottom:4px}
.score-info p{font-size:13px;color:var(--text-soft)}
.export-row{display:flex;gap:10px;flex-wrap:wrap}

/* SUMMARY FOOTER */
.summary-footer{margin-top:32px;padding-top:24px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:20px}
.summary-footer-top{display:flex;align-items:center;justify-content:space-between}
.btn-lg{padding:13px 32px;font-size:15px;border-radius:var(--radius-lg)}
.summary-footer-exports{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius)}
.export-label{font-size:11px;font-weight:500;color:var(--text-faint);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.export-btns{display:flex;gap:6px;flex-wrap:wrap}
.btn-export{padding:5px 14px;border:1px solid var(--border-mid);border-radius:16px;font-size:12px;font-weight:500;cursor:pointer;background:var(--bg);color:var(--text-mid);font-family:'Inter',sans-serif;transition:all .18s}
.btn-export:hover{border-color:var(--primary);color:var(--text);background:var(--primary-100)}
.color-swatches{display:flex;gap:5px;flex-wrap:wrap}
.swatch{width:22px;height:22px;border-radius:4px;border:1px solid rgba(0,0,0,.08)}

/* CHECK ICON */
.ico-check-w{display:inline-flex}
.ico-check-d{display:inline-flex}

@media print{.topbar,.progress-wrap,.actions,.export-row{display:none!important}body{background:white;padding:0}.page{max-width:100%;padding:0}.card{box-shadow:none;border:none;padding:20px 0}}
@media(max-width:600px){.topbar{padding:0 16px}.card{padding:24px 20px}.row2,.choice-grid.cols2{grid-template-columns:1fr}.node-label{display:none}}