* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: #f2f5f9; color: #1a1b23; }
main { max-width: 30rem; margin: 0 auto; padding: 1rem; }
h1 { margin: .5rem 0 0; font-size: 1.6rem; }
.sub { margin: 0 0 1rem; color: #5a6275; }
form { background: #fff; padding: 1rem; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
label { display: block; margin: .9rem 0 .3rem; font-weight: 600; font-size: .95rem; }
label:first-child { margin-top: 0; }
input, select { width: 100%; padding: .8rem; font-size: 1.2rem; border: 2px solid #cfd6e2; border-radius: 10px; background: #fff; }
input:focus, select:focus { outline: none; border-color: #2f5dff; }
.knob-wrap { display: flex; flex-direction: column; align-items: center; }
.knob { position: relative; width: min(16rem, 70vw); aspect-ratio: 1; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; border-radius: 50%; }
.knob:focus-visible { outline: 3px solid #2f5dff; outline-offset: 4px; }
.knob-ticks { position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 225deg, #2f5dff var(--fill, 0deg), #dde3ee var(--fill, 0deg) 270deg, transparent 270deg);
    -webkit-mask: radial-gradient(circle, transparent 66%, #000 67%);
    mask: radial-gradient(circle, transparent 66%, #000 67%); }
.knob-body { position: absolute; inset: 12%; border-radius: 50%; background: linear-gradient(145deg, #fff, #e3e8f1); box-shadow: 0 4px 10px rgba(0,0,0,.25), inset 0 -3px 6px rgba(0,0,0,.08); transform: rotate(var(--angle, -135deg)); }
.knob-pointer { position: absolute; left: 50%; top: 6%; width: 8%; height: 18%; margin-left: -4%; border-radius: 99px; background: #2f5dff; }
.knob-readout { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .15rem; font-weight: 700; font-size: 2.2rem; transform: rotate(calc(var(--angle, -135deg) * -1)); }
.knob-readout small { font-size: 1rem; color: #5a6275; }
.knob-buttons { display: flex; gap: 1rem; margin-top: .6rem; }
.knob-buttons button { width: 4rem; height: 3rem; font-size: 1.6rem; border: 2px solid #cfd6e2; background: #fff; border-radius: 10px; cursor: pointer; touch-action: manipulation; }
.hint { margin: .4rem 0 0; font-size: .8rem; color: #5a6275; }
.opioid-row { display: grid; grid-template-columns: 1fr 5.5rem 6.5rem auto; gap: .5rem; margin-bottom: .5rem; }
@media (max-width: 420px) { .opioid-row { grid-template-columns: 1fr 1fr auto; } .opioid-row select:first-child { grid-column: 1 / -1; } }
.opioid-row .del, .add { border: 2px solid #cfd6e2; background: #fff; border-radius: 10px; font-size: 1.2rem; cursor: pointer; padding: 0 .9rem; }
.add { width: 100%; padding: .7rem; font-size: 1rem; font-weight: 600; color: #2f5dff; }
.result { margin-top: 1rem; background: #fff; padding: 1rem; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.1); border-left: 8px solid #9aa3b5; }
.calc { margin-top: 1rem; border-top: 1px solid #e3e6ee; padding-top: .75rem; }
.calc summary { cursor: pointer; font-weight: 600; }
.calc ol { margin: .75rem 0 0; padding-left: 1.25rem; font-size: .9rem; line-height: 1.5; }
.calc li { margin-bottom: .4rem; }
.result.low { border-color: #e0a100; }
.result.ok { border-color: #1f9d55; }
.result.high { border-color: #d64545; }
.big-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.face { width: 7.5rem; height: 7.5rem; flex: none; }
.face .lid, .face #lid-l, .face #lid-r, .face #pupil-l, .face #pupil-r { transition: all .4s ease; }
.face #zzz { transition: opacity .4s ease; }
.big { font-size: 3rem; font-weight: 700; line-height: 1.1; }
.big small { font-size: 1.2rem; font-weight: 600; color: #5a6275; }
dl { display: grid; grid-template-columns: 1fr auto; gap: .4rem .8rem; margin: .8rem 0 0; }
dt { color: #5a6275; }
dd { margin: 0; font-weight: 600; text-align: right; }
.note { font-size: .8rem; color: #5a6275; }