:root{
      --bg:#fffaf6;
      --card:#ffffff;
      --text:#172033;
      --muted:#6f7787;
      --primary:#ff7f61;
      --primary-dark:#ed684b;
      --green:#50c897;
      --line:#e6ebf2;
      --soft:#f7f9fc;
      --shadow:0 18px 45px rgba(31,42,68,.10);
      --radius:24px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:Arial,Helvetica,sans-serif;
      background:linear-gradient(180deg,#fffaf6 0%,#f7faf9 100%);
      color:var(--text);
    }
    .sl-wrap{
      width:min(760px,calc(100% - 24px));
      margin:24px auto;
    }
    .sl-card{
      background:var(--card);
      border:1px solid rgba(23,32,51,.06);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .sl-top{
      padding:18px 26px 0;
    }
    .sl-brand{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    .sl-logo{
      font-size:24px;
      font-weight:800;
      letter-spacing:-.5px;
    }
    .sl-logo span{color:var(--primary)}
    .sl-time{
      color:var(--muted);
      font-size:13px;
    }
    .sl-progress{
      height:8px;
      background:#edf0f4;
      border-radius:999px;
      overflow:hidden;
      margin-top:16px;
    }
    .sl-progress > div{
      width:0;
      height:100%;
      background:linear-gradient(90deg,var(--green),#79dcb8);
      transition:width .35s ease;
    }
    .sl-step-label{
      display:flex;
      justify-content:space-between;
      margin-top:9px;
      color:var(--muted);
      font-size:13px;
    }
    .sl-body{padding:30px 28px 32px}
    .screen{display:none;animation:fade .25s ease}
    .screen.active{display:block}
    @keyframes fade{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:none}}
    h1,h2,h3{margin:0 0 12px}
    h1{font-size:36px;line-height:1.18;letter-spacing:-1.1px}
    h2{font-size:28px;line-height:1.25;letter-spacing:-.5px}
    h3{font-size:20px}
    .lead{font-size:17px;line-height:1.6;color:var(--muted);margin:0 0 22px}
    .question{margin:0 0 26px}
    .question-title{
      font-size:18px;
      line-height:1.45;
      font-weight:700;
      margin-bottom:12px;
    }
    .hint{
      display:block;
      margin-top:5px;
      color:var(--muted);
      font-size:13px;
      font-weight:400;
    }
    .options{
      display:grid;
      grid-template-columns:1fr;
      gap:10px;
    }
    .option{
      display:flex;
      align-items:flex-start;
      gap:12px;
      padding:14px 15px;
      border:1.5px solid #dfe5ed;
      background:#fff;
      border-radius:15px;
      cursor:pointer;
      transition:.18s ease;
      line-height:1.4;
    }
    .option:hover{border-color:#a8d8c6;background:#fbfffd}
    .option input{margin-top:3px;accent-color:var(--green)}
    .option.selected{
      border-color:var(--green);
      background:#effbf6;
      box-shadow:0 0 0 2px rgba(80,200,151,.08);
    }
    .nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-top:10px;
    }
    button,.btn{
      border:0;
      border-radius:14px;
      padding:14px 21px;
      font-size:16px;
      font-weight:700;
      cursor:pointer;
      transition:.18s ease;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
    }
    .btn-primary{background:var(--primary);color:#fff}
    .btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px)}
    .btn-secondary{background:#f0f3f7;color:#354057}
    .btn-wide{width:100%}
    .btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
    .error{
      display:none;
      color:#b63a3a;
      background:#fff2f2;
      border:1px solid #ffd1d1;
      padding:10px 12px;
      border-radius:12px;
      margin:0 0 16px;
      font-size:14px;
    }
    .insight{
      text-align:center;
      padding:18px 4px 8px;
    }
    .insight-icon{
      width:62px;height:62px;border-radius:50%;
      display:grid;place-items:center;
      background:#eafaf3;
      margin:0 auto 18px;
      font-size:30px;
    }
    .insight-box{
      background:#f2fbf7;
      border:1px solid #c9eddc;
      border-radius:18px;
      padding:18px;
      margin:20px 0;
      font-size:16px;
      line-height:1.6;
      text-align:left;
    }
    .analysis-loader{
      height:8px;background:#edf0f4;border-radius:999px;overflow:hidden;margin:20px 0;
    }
    .analysis-loader span{
      display:block;height:100%;width:72%;
      background:linear-gradient(90deg,var(--green),#86e1bf);
      animation:pulse 1.2s infinite alternate;
    }
    @keyframes pulse{from{opacity:.45;width:45%}to{opacity:1;width:92%}}
    .teaser{
      background:#172033;
      color:white;
      padding:24px;
      border-radius:20px;
      margin:18px 0;
    }
    .teaser small{color:#8ce0bd;font-weight:800;letter-spacing:1.5px}
    .teaser h2{margin-top:8px;color:#fff}
    .teaser p{color:#d8dfeb;line-height:1.6}
    .locked-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:12px;
      margin:16px 0 22px;
    }
    .locked{
      background:#f7f9fc;
      border:1px solid var(--line);
      border-radius:16px;
      padding:16px;
      min-height:102px;
    }
    .locked strong{display:block;margin-bottom:7px}
    .lock{color:var(--muted);font-size:14px}
    .field{margin-bottom:14px}
    .field label{display:block;font-weight:700;margin-bottom:7px}
    .field input,.field select{
      width:100%;
      border:1.5px solid #dfe5ed;
      border-radius:14px;
      padding:14px 15px;
      font-size:16px;
      outline:none;
    }
    .field input:focus,.field select:focus{border-color:var(--green)}
    .consent{
      display:flex;gap:10px;align-items:flex-start;
      font-size:13px;color:var(--muted);line-height:1.45;margin:14px 0;
    }
    .report-hero{
      background:linear-gradient(135deg,#172033,#283652);
      color:#fff;border-radius:20px;padding:24px;margin-bottom:18px;
    }
    .report-hero p{color:#dbe3ef;line-height:1.6;margin-bottom:0}
    .report-section{
      border:1px solid var(--line);
      border-radius:18px;
      padding:19px;
      margin-bottom:14px;
      background:#fff;
    }
    .bars{display:grid;gap:12px}
    .bar-row{display:grid;grid-template-columns:145px 1fr 42px;gap:10px;align-items:center;font-size:14px}
    .bar{height:9px;background:#edf0f4;border-radius:99px;overflow:hidden}
    .bar span{display:block;height:100%;background:var(--green);border-radius:99px}
    .cta-box{
      margin-top:20px;padding:22px;border-radius:20px;
      background:#fff3ee;border:1px solid #ffd1c4;text-align:center;
    }
    .small{font-size:13px;color:var(--muted);line-height:1.5}
    @media(max-width:600px){
      .sl-wrap{margin:8px auto;width:min(100% - 12px,760px)}
      .sl-top{padding:15px 18px 0}
      .sl-body{padding:24px 17px 24px}
      h1{font-size:29px}
      h2{font-size:24px}
      .locked-grid{grid-template-columns:1fr}
      .bar-row{grid-template-columns:120px 1fr 36px}
      .nav button{flex:1}
    }
