/* Shared styles for FunZon tool / game / quiz pages. Each page sets --accent on <body>. */
:root{--accent:#ff6f00;--accent-soft:#fff3e0;--ink:#2b2b2b;--muted:#666}
*{box-sizing:border-box}
body{font-family:Arial,sans-serif;background:#fff3e0;margin:0;color:var(--ink)}
.fz-wrap{max-width:960px;margin:0 auto;padding:20px 16px}
.fz-crumb{font-size:13px;color:#777;margin:8px 0 0}
.fz-crumb a{color:var(--accent)}
.fz-title{color:var(--accent);text-align:center;margin:12px 0 4px;font-size:clamp(1.5rem,4.6vw,2.3rem)}
.fz-sub{text-align:center;color:var(--muted);font-size:15px;margin:0 auto 16px;max-width:640px}
.fz-card{background:#fff;border-radius:16px;box-shadow:0 6px 20px rgba(0,0,0,.08);padding:20px}
.fz-controls{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:0 0 12px}
.fz-btn{padding:9px 16px;border-radius:9px;border:2px solid var(--accent);background:var(--accent);color:#fff;font-weight:700;font-size:15px;cursor:pointer;font-family:inherit}
.fz-btn.alt{background:#fff;color:var(--accent)}
.fz-btn:disabled{opacity:.5;cursor:default}
.fz-controls select,.fz-controls input,.fz-input{padding:8px 10px;border-radius:9px;border:2px solid var(--accent);background:#fff;font-size:15px;font-family:inherit}
.fz-stats{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:0 0 10px}
.fz-stat{background:#fff;padding:7px 16px;border-radius:20px;box-shadow:0 2px 6px rgba(0,0,0,.1);font-weight:700;font-size:14px}
.fz-stat span{color:var(--accent)}
.fz-msg{text-align:center;font-weight:700;color:var(--accent);min-height:22px;margin:6px 0 10px}
.fz-seo{max-width:900px;margin:32px auto;padding:22px;background:#fff;border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.05);line-height:1.75}
.fz-seo h2{color:var(--accent);margin:26px 0 8px;font-size:1.35rem}
.fz-seo h2:first-child{margin-top:0}
.fz-seo h3{margin:18px 0 4px;font-size:1.05rem}
.fz-seo table{border-collapse:collapse;width:100%;margin:10px 0;font-size:15px}
.fz-seo th,.fz-seo td{border:1px solid #eee;padding:8px;text-align:left;vertical-align:top}
.fz-seo th{background:var(--accent-soft)}
.fz-seo a{color:var(--accent)}
.fz-tablewrap{overflow-x:auto}
.faq-q{font-weight:700;margin:14px 0 2px}
/* multiple-choice quiz */
.fz-q{font-size:1.25rem;font-weight:700;margin:0 0 14px}
.fz-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fz-opt{padding:13px;border-radius:10px;border:2px solid #e0e0e0;background:#fff;font-size:16px;font-weight:600;cursor:pointer;text-align:left;color:var(--ink);font-family:inherit}
.fz-opt:hover:not(:disabled){border-color:var(--accent)}
.fz-opt.right{background:#e8f5e9;border-color:#2e7d32;color:#2e7d32}
.fz-opt.wrong{background:#ffebee;border-color:#c62828;color:#c62828}
.fz-note{margin:14px 0 0;padding:12px 14px;background:#fff8e1;border-radius:8px;font-size:15px;line-height:1.6}
.fz-progress{display:flex;justify-content:space-between;font-size:14px;font-weight:700;color:var(--muted);margin-bottom:8px}
.fz-bar{height:8px;background:#eee;border-radius:6px;overflow:hidden;margin-bottom:16px}
.fz-bar div{height:100%;background:var(--accent);transition:width .3s}
.fz-big{font-size:3rem;font-weight:800;color:var(--accent);margin:6px 0;text-align:center}
@media(max-width:520px){.fz-opts{grid-template-columns:1fr}.fz-q{font-size:1.1rem}}
@media print{header,footer,nav,.fz-controls,.fz-seo,.gn-wrap{display:none!important}body{background:#fff}.fz-card{box-shadow:none}}
/* Dark "vibe check" personality quiz theme (FZQuiz.personality with cls 'pq') */
body.vc{background:#0b0f1c;font-family:'Poppins',Arial,sans-serif}
.vc-hero{background:linear-gradient(135deg,#0b0f1c 0%,#14203a 55%,#1b1036 100%);text-align:center;padding:52px 20px 34px;color:#fff}
.vc-badge{display:inline-block;border:1px solid rgba(255,255,255,.3);color:var(--accent);padding:6px 18px;border-radius:6px;font-size:.7rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;font-family:monospace;margin-bottom:16px}
.vc-hero h1{font-size:clamp(1.8rem,6vw,2.9rem);font-weight:900;margin:0 0 10px;line-height:1.15}
.vc-hero p{color:rgba(255,255,255,.65);margin:0 auto;max-width:560px}
.vc-wrap{max-width:680px;margin:0 auto;padding:24px 16px 10px}
.vc-card{background:#151b2e;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:24px;color:#fff}
.pq-prog{display:flex;justify-content:space-between;font-family:monospace;font-size:.8rem;color:rgba(255,255,255,.5);margin-bottom:8px}
.pq-bar{height:6px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden;margin-bottom:20px}
.pq-bar div{height:100%;background:var(--accent);transition:width .3s}
.pq-q{font-size:1.2rem;font-weight:700;margin:0 0 16px;line-height:1.4}
.pq-opt{display:block;width:100%;text-align:left;padding:14px 16px;margin-bottom:10px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#fff;font-family:inherit;font-size:15px;cursor:pointer}
.pq-opt:hover{border-color:var(--accent);background:rgba(255,255,255,.08)}
.pq-back{background:none;border:none;color:rgba(255,255,255,.5);font-family:inherit;cursor:pointer;padding:4px 0}
.pq-res{text-align:center}
.pq-emoji{font-size:3.4rem}
.pq-res h2{font-size:1.8rem;margin:6px 0 10px}
.pq-res p,.pq-res ul{text-align:left;color:rgba(255,255,255,.82);line-height:1.7}
.pq-second{font-size:.9rem;color:rgba(255,255,255,.6)!important;text-align:center!important}
.pq-again{margin-top:14px;padding:12px 26px;border:none;border-radius:12px;background:var(--accent);color:#0b0f1c;font-weight:800;font-family:inherit;font-size:15px;cursor:pointer}
body.vc .fz-seo{background:#151b2e;color:rgba(255,255,255,.82)}
body.vc .fz-seo th{background:rgba(255,255,255,.06);color:#fff}
body.vc .fz-seo th,body.vc .fz-seo td{border-color:rgba(255,255,255,.1)}
body.vc .fz-seo .faq-q{color:#fff}
