:root { font-family: Inter, Segoe UI, Arial, sans-serif; }
body { margin: 0; color: #eef1ff; background: linear-gradient(160deg, #0b1020, #121a34); }
.container { max-width: 980px; margin: 0 auto; padding: 22px 16px 40px; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.topbar h1 { font-size: 28px; margin: 0; }
.card { background: #171f3d; border: 1px solid #303f7b; border-radius: 14px; padding: 16px; margin: 12px 0; }
.hidden { display: none; }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
label { display: block; margin: 10px 0; font-size: 14px; }
input, select, button { padding: 10px; border-radius: 10px; border: 1px solid #3a4270; margin-top: 6px; }
input, select { width: 100%; background: #0f1330; color: #fff; }
button { background: #5b7cfa; color: #fff; border: none; cursor: pointer; font-weight: 600; }
button.secondary { background: #3d466d; }
button.danger { background: #b23a48; }
.badge { background: #2b3154; border: 1px solid #45508a; border-radius: 999px; padding: 4px 10px; font-size: 12px; }
.choice { display: block; width: 100%; text-align: left; margin: 8px 0; background: #121735; color: #fff; border: 1px solid #2f3968; }
.choice.selected { border-color: #86a2ff; background: #1b2454; }
#desmosCalc { height: 260px; border: 1px solid #3a4270; border-radius: 8px; overflow: hidden; }
#fallbackCalc { margin-top: 10px; padding: 10px; border: 1px dashed #4b578f; border-radius: 10px; background: #101633; }
#calcExpr { min-width: 260px; flex: 1; }
.table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.table th, .table td { border: 1px solid #2f3968; padding: 8px; text-align: left; }
.table th { background: #121735; }
.muted { color: #bcc4ea; }
.small { font-size: 12px; }
.explain { border: 1px solid #334076; border-radius: 10px; padding: 10px; margin-bottom: 8px; background: #101633; }
.flash-overlay { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity .18s ease; z-index: 999; }
.flash-overlay.good { background: rgba(35, 206, 107, 0.25); opacity: 1; }
.flash-overlay.bad { background: rgba(255, 57, 57, 0.28); opacity: 1; }
.mascot-wrap { display: flex; gap: 10px; align-items: center; margin: 8px 0 10px; }
.mascot { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; background: #111936; border: 1px solid #32427f; transition: transform .2s ease, box-shadow .2s ease; }
.mascot.good { transform: scale(1.12) rotate(-8deg); box-shadow: 0 0 18px rgba(35,206,107,.55); }
.mascot.bad { transform: scale(1.1) rotate(8deg); box-shadow: 0 0 18px rgba(255,57,57,.6); }
.mascot.neutral { transform: scale(1); box-shadow: none; }