/* Playful, readable styling */
:root{
    --bg: #f6f7fb;
    --card: #ffffff;
    --muted: #6b7280;
    --accent: #226216; /* coral */
    --accent-2: #3b82f6; /* blue */
    --good: #10b981;
    --radius: 12px;
    --max-width: 760px;
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    }
    *{box-sizing:border-box}
    body{background:linear-gradient(180deg,#eef2ff 0%,var(--bg) 40%);margin:0;color:#111}
    .container{max-width:var(--max-width);margin:36px auto;padding:20px}
    .hero{text-align:center;margin-bottom:18px}
    .hero h1{margin:.2em 0;font-size:clamp(1.6rem,2.6vw,2.4rem)}
    .lead{color:var(--muted);margin-top:0}
    .card{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:0 6px 18px rgba(20,20,50,0.06);}
    .hidden{display:none}
    .progress{height:10px;background:#eee;border-radius:999px;overflow:hidden;margin-bottom:12px}
    #progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .3s ease}
    .question{padding:10px 2px}
    .q-title{font-weight:600;margin:0 0 8px}
    .options{display:grid;grid-template-columns:repeat(1,1fr);gap:8px;margin-top:6px}
    .option{padding:10px;border-radius:8px;border:1px solid #eee;background:#fafafa;cursor:pointer}
    .option.selected {border-color: var(--accent);box-shadow: inset 0 0 0 2px var(--accent);background: var(--accent); /* fill color */color: #ffffff; /* text color */}
    .controls{display:flex;justify-content:space-between;gap:12px;margin-top:14px}
    .btn{padding:10px 14px;border-radius:10px;border:0;background:var(--accent);color:#fff;cursor:pointer}
    .btn.muted{background:#f3f4f6;color:var(--muted)}
    .result-title{font-size:1.25rem;margin:0}
    .result-body{color:var(--muted);margin-top:10px}
    .share-row{display:flex;gap:8px;margin-top:12px}
    .small{font-size:.85rem;color:var(--muted)}
    .footer{margin-top:18px;text-align:center;color:var(--muted)}
    @media(min-width:700px){.options{grid-template-columns:repeat(2,1fr)}}