:root { --bg:#ffffff; --text:#0b0f14; --muted:#667085; --border:#e5e7eb;
        --primary:#0F4C81; --accent:#E69138; --card:#ffffff; --radius:18px;
        --shadow:0 10px 30px rgba(0,0,0,.06); --font: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; }
.so-kira.container { max-width: 980px; margin: 0 auto; padding: 20px; background:var(--bg); color:var(--text); font-family:var(--font) }
.so-kira h1 { margin:0; font-size:clamp(1.6rem,2.6vw,2.2rem); letter-spacing:-.02em }
.so-kira .small { color:var(--muted); font-size:.95rem }
.so-kira .card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px }
.so-kira .btn { display:inline-block; border:1px solid var(--border); background:#fff; padding:.65rem 1rem; border-radius:999px; cursor:pointer; font-weight:700 }
.so-kira .btn--primary { background:var(--primary); color:#fff; border-color:transparent }
.so-kira .btn--ghost { background:transparent }
.so-kira .badge { background:#f8fafc; border:1px solid var(--border); padding:.35rem .6rem; border-radius:999px; font-size:.9rem; color:var(--muted) }
.so-kira .mt { margin-top:12px } .so-kira .hidden { display:none !important }
.so-kira .progress { display:flex; align-items:center; gap:10px; color:var(--muted); }
.so-kira .progress-bar { width:240px; height:8px; border:1px solid var(--border); background:#f1f5f9; border-radius:999px; overflow:hidden }
.so-kira .progress-fill { height:100%; background:linear-gradient(90deg,var(--primary),var(--accent)); width:0% }
.so-kira .qtext { font-size:1.05rem; font-weight:800; }
.so-kira .slider { width:100%; accent-color:var(--primary) }
.so-kira .ticks, .so-kira .labels { display:flex; justify-content:space-between; color:var(--muted); font-size:.85rem }
.so-kira .labels { font-size:.8rem }
.so-kira .topbar { display:flex; justify-content:space-between; align-items:center; gap:8px }
.so-kira .gauge { --p:0; width:240px; aspect-ratio:1/1; border-radius:50%; background: conic-gradient(var(--primary) calc(var(--p) * 1%), #eef2f7 0); display:grid; place-items:center; border:8px solid #fff; box-shadow:var(--shadow) }
.so-kira .gauge-inner { width:80%; height:80%; border:1px solid var(--border); border-radius:50%; display:grid; place-items:center; text-align:center; }
.so-kira .gauge-score { font-size:2.2rem; font-weight:800 }
.so-kira .grid { display:grid; gap:10px } .so-kira .grid-2 { grid-template-columns: 260px 1fr }
.so-kira .pill { display:inline-block; background:#f1f5f9; border:1px solid var(--border); padding:.15rem .5rem; border-radius:999px }
.so-kira .kcat { display:grid; grid-template-columns: 220px 1fr 80px; gap:8px; align-items:center }
.so-kira .bar { height:12px; background:#f1f5f9; border:1px solid var(--border); border-radius:999px; overflow:hidden }
.so-kira .fill { height:100%; background:linear-gradient(90deg,var(--primary),var(--accent)) }
.so-kira .fill-gap { background:linear-gradient(90deg,var(--accent),var(--primary)) }
.so-kira .leg { color:var(--muted); font-size:.9rem }
.so-kira .result-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px }
.so-kira .result-head img { width:80px; height:auto }
/* Print */
@media print { .so-kira #so-kira-intro, .so-kira #so-kira-assessment, .so-kira .no-print { display:none !important } .so-kira.container { max-width:100%; padding:20px } .so-kira #so-kira-results { display:block !important } }