#surveySection {
    --bg:#f6f8fb;
    --card:#ffffff;
    --muted:#6b7280;
    --accent:#2563eb;
    --accent-2:#10b981;
    --radius:14px;
    --max-width:90%;
    font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color:#0f172a;
  }

  #surveySection .survey-wrap{
    width:100%;
    max-width:var(--max-width);
    background:var(--card);
    border-radius:var(--radius);
    box-shadow:0 6px 30px rgba(16,24,40,0.08);
    padding:28px;
    margin:auto;
    box-sizing:border-box;
  }

  #surveySection header{
    display:flex;
    gap:16px;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
  }
  #surveySection h1{font-size:1.25rem;margin:0;}
  #surveySection .prog{width:50%;min-width:220px;}
  #surveySection .progress-bar{
    height:10px;
    background:rgba(15, 23, 42, 0.08);
    border-radius:999px;
    overflow:hidden;
  }
  #surveySection .progress-fill{
    height:100%;width:0%;
    background:linear-gradient(90deg,var(--accent), #7c3aed);
    border-radius:999px;
    transition:width .35s ease;
  }
  #surveySection .page-indicator{font-size:.9rem;color:var(--muted)}
  #surveySection main{padding:4px 0 12px}

  #surveySection .card{
    background:linear-gradient(180deg, rgba(255,255,255,0.9), var(--card));
    border-radius:12px;
    padding:18px;
    margin-bottom:14px;
    box-shadow:0 3px 12px rgba(2,6,23,0.04);
  }
  #surveySection .question{margin-bottom:12px;}
  #surveySection .q-number{display:inline-block;min-width:30px;font-weight:600;color:var(--accent);}
  #surveySection .q-text{display:inline-block;font-weight:600;}

  #surveySection .scale{
    display:flex;
    gap:8px;
    margin-top:10px;
    align-items:center;
  }
  #surveySection .scale label{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    flex:1;
    padding:8px;
    border-radius:10px;
    cursor:pointer;
    user-select:none;
    border:1px solid transparent;
  }
  #surveySection .scale input[type="radio"]{display:none;}
  #surveySection .scale .tick{
    width:34px;height:34px;border-radius:8px;display:inline-grid;place-items:center;
    font-weight:600;background:transparent;border:1px solid rgba(15,23,42,0.06);
  }
  #surveySection .scale label:hover{background:rgba(37,99,235,0.06);}
  #surveySection .scale input[type="radio"]:checked + .tick{
    background:linear-gradient(180deg,var(--accent), #7c3aed);
    color:white;border-color:transparent;box-shadow:0 6px 18px rgba(124,58,237,0.12);
  }

  #surveySection .helper{font-size:.86rem;color:var(--muted);margin-top:4px}

  #surveySection footer{
    display:flex;
    gap:10px;
    justify-content:space-between;
    align-items:center;
    margin-top:6px;
    flex-wrap:wrap;
  }
  #surveySection .nav{display:flex;gap:10px;}
  #surveySection button{
    border:0;padding:10px 14px;border-radius:10px;font-weight:600;cursor:pointer;
    box-shadow:0 4px 14px rgba(2,6,23,0.06);
  }
  #surveySection .btn-ghost{background:transparent;color:var(--accent);border:1px solid rgba(37,99,235,0.12)}
  #surveySection .btn-primary{background:linear-gradient(90deg,var(--accent), #7c3aed);color:white}
  #surveySection .btn-disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
  #surveySection .small{font-size:.9rem;color:var(--muted)}
  #surveySection .save-state{font-size:.85rem;color:var(--muted);margin-left:8px}

  @media (max-width:640px){
    #surveySection .progress-bar{display:none}
    #surveySection .prog{width:auto}
    #surveySection .scale label{padding:6px}
  }