:root{
      --sp-green:#92C83E;
      --sp-green-dark:#6aa725;
      --ink:#172033;
      --muted:#667085;
      --line:#e6e8ef;
      --bg:#f5f7fb;
      --card:#ffffff;
      --soft:#eef8df;
      --danger:#ffecec;
      --danger-text:#8a1f1f;
      --warn:#fff6df;
      --warn-text:#785700;
      --radius:22px;
      --shadow:0 18px 60px rgba(23,32,51,.10);
      --font:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    }
    *{box-sizing:border-box}
    .spreadmind-mbc-page{
      margin:0;
      font-family:var(--font);
      color:var(--ink);
      background:transparent;
      min-height:100vh;
    }
    a{color:var(--sp-green-dark);font-weight:700}
    .app{
      width:min(1120px, calc(100% - 32px));
      margin:32px auto;
      display:grid;
      grid-template-columns: 340px minmax(0,1fr);
      gap:24px;
      align-items:start;
    }
    .sidebar,.panel{
      background:rgba(255,255,255,.88);
      backdrop-filter: blur(16px);
      border:1px solid rgba(255,255,255,.75);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }
    .sidebar{padding:24px; position:sticky; top:24px}
    .brand{display:flex;align-items:center;gap:12px;margin-bottom:20px}
    .logo{
      width:46px;height:46px;border-radius:0;
      background:transparent;
      display:block;
      overflow:hidden;
      flex:0 0 auto;
    }
    .logo img{width:46px;height:46px;object-fit:contain;display:block}
    .eyebrow{text-transform:uppercase;letter-spacing:.11em;font-size:12px;color:var(--muted);font-weight:800}
    h1{font-size:34px;line-height:1.08;margin:8px 0 12px}
    .lead{font-size:16px;line-height:1.55;color:var(--muted);margin:0 0 22px}
    .steps{display:flex;flex-direction:column;gap:10px;margin:24px 0}
    .step-pill{
      display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:999px;
      color:var(--muted);font-weight:700;font-size:14px;border:1px solid transparent;
      background:transparent;width:100%;text-align:left;min-height:0;cursor:pointer
    }
    .step-pill:hover{background:#f4f6f2}
    .step-pill.active{background:var(--soft);color:#28440e;border-color:#d5ecb0}
    .step-pill.done{color:#2c5d0b}
    .num{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#eef0f5;color:#475467;font-size:13px}
    .active .num,.done .num{background:var(--sp-green);color:#16240b}
    .scorebox{
      border-radius:18px;background:#111827;color:#fff;padding:18px;margin-top:22px;
    }
    .scoreline{display:flex;justify-content:space-between;align-items:center;gap:12px}
    .score{font-size:30px;font-weight:900}
    .score small{font-size:13px;color:#cbd5e1;font-weight:700}
    .bar{height:10px;background:#2b3445;border-radius:999px;overflow:hidden;margin-top:12px}
    .bar span{display:block;height:100%;width:0%;background:var(--sp-green);border-radius:999px;transition:width .35s ease}
    .panel{padding:30px;min-height:620px}
    .screen{display:none;animation:fade .22s ease}
    .screen.active{display:block}
    @keyframes fade{from{opacity:.35;transform:translateY(6px)}to{opacity:1;transform:none}}
    .kicker{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--sp-green-dark);font-weight:900}
    h2{font-size:30px;line-height:1.14;margin:8px 0 10px}
    .sub{color:var(--muted);line-height:1.55;margin:0 0 24px}
    .grid{display:grid;gap:14px}
    .grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
    .grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
    .option{
      border:1.5px solid var(--line);
      border-radius:18px;
      background:#fff;
      padding:17px;
      cursor:pointer;
      transition:.18s ease;
      min-height:88px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:6px;
      user-select:none;
    }
    .option:hover{border-color:#b9d98e;transform:translateY(-1px)}
    .option.selected{border-color:var(--sp-green);background:var(--soft);box-shadow:0 0 0 4px rgba(146,200,62,.13)}
    .option b{font-size:16px}
    .option span{font-size:13px;color:var(--muted);line-height:1.35}

    .range-wrap{
      border:1.5px solid var(--line);
      border-radius:18px;
      background:#fff;
      padding:18px;
      margin-top:10px;
    }
    .range-top{display:flex;justify-content:space-between;gap:12px;align-items:end;margin-bottom:12px}
    .range-value{font-size:28px;font-weight:900;color:#172033}
    .range-value-input{
      font-size:28px;
      font-weight:900;
      border:none;
      background:transparent;
      width:200px; padding-right:4px;
      text-align:right;
      outline:none;
      color:#172033;
    }
    input[type="range"]{
      padding:0;
      border:0;
      box-shadow:none;
      accent-color:var(--sp-green);
      width:100%;
    }
    .range-scale{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:8px;width:100%}

    input[type="range"]{
      background:transparent;
    }
    input[type="range"]::-webkit-slider-runnable-track{
      height:10px;
      background:#2b3445;
      border-radius:999px;
    }
    input[type="range"]::-webkit-slider-thumb{
      -webkit-appearance:none;
      appearance:none;
      width:22px;
      height:22px;
      border-radius:50%;
      background:var(--sp-green);
      border:3px solid #fff;
      box-shadow:0 2px 8px rgba(23,32,51,.25);
      margin-top:-6px;
      cursor:pointer;
    }
    input[type="range"]::-moz-range-track{
      height:10px;
      background:#2b3445;
      border-radius:999px;
    }
    input[type="range"]::-moz-range-thumb{
      width:18px;
      height:18px;
      border-radius:50%;
      background:var(--sp-green);
      border:3px solid #fff;
      box-shadow:0 2px 8px rgba(23,32,51,.25);
      cursor:pointer;
    }

    .range-edit-hint{font-size:12px;color:var(--muted);text-align:right;margin-top:2px}

    .field{margin:16px 0}
    label{display:block;font-weight:800;margin:0 0 8px}
    input,textarea{
      width:100%;
      border:1.5px solid var(--line);
      border-radius:15px;
      padding:14px 15px;
      font:inherit;
      background:#fff;
      color:var(--ink);
      outline:none;
    }
    textarea{min-height:120px;resize:vertical}
    input:focus,textarea:focus{border-color:var(--sp-green);box-shadow:0 0 0 4px rgba(146,200,62,.14)}
    input.invalid, textarea.invalid{
      border-color:#e5484d !important;
      box-shadow:0 0 0 4px rgba(229,72,77,.16) !important;
      background:#fffafa;
    }
    .nav{display:flex;justify-content:space-between;gap:12px;margin-top:28px}
    button{
      border:0;border-radius:999px;padding:13px 20px;font-weight:900;font:inherit;cursor:pointer;
      min-height:48px;
    }
    .btn-primary{background:var(--sp-green);color:#17240a}
    .btn-primary:hover{background:#a6d95c}
    .btn-secondary{background:#eef0f5;color:#344054}
    .btn-ghost{background:transparent;color:var(--muted)}
    .hint,.notice{
      border-radius:16px;padding:14px 16px;line-height:1.45;margin:18px 0;
      border:1px solid;
    }
    .hint{background:#f7fbef;border-color:#d9efb7;color:#344a1b}
    .notice.warn{background:var(--warn);border-color:#ffe19b;color:var(--warn-text)}
    .notice.stop{background:var(--danger);border-color:#ffc6c6;color:var(--danger-text)}
    .result{
      border-radius:22px;padding:24px;margin:18px 0;
      background:linear-gradient(135deg,#f8fff0,#ffffff);
      border:1px solid #dff1c4;
    }
    .result h3{font-size:24px;margin:0 0 10px}
    .cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}
    .choice-card{
      border:1.5px solid var(--line);border-radius:20px;background:#fff;padding:20px;
      display:flex;flex-direction:column;gap:12px
    }
    .choice-card h3{margin:0;font-size:21px}
    .choice-card p{margin:0;color:var(--muted);line-height:1.5}
    .summary{
      background:#0f172a;color:#e5e7eb;border-radius:18px;padding:18px;
      font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
      white-space:pre-wrap;font-size:13px;line-height:1.5;max-height:320px;overflow:auto
    }
    .small{font-size:13px;color:var(--muted);line-height:1.45}
    .hidden{display:none!important}
    @media (max-width:900px){
      .app{grid-template-columns:1fr;margin:16px auto;width:min(100% - 20px,680px)}
      .sidebar{position:static}
      .grid.two,.grid.three,.cards{grid-template-columns:1fr}
      .panel{padding:22px;min-height:auto}
      h1{font-size:30px} h2{font-size:26px}
    }