/* Rotation homes, faithful clinical media, and quiet interaction feedback. */
:root{--muted:#786d80}
.main{max-width:1440px;margin-inline:auto}.btn,.rotation-card,.media-enlarge{touch-action:manipulation}
.hero-secondary{display:inline-flex;align-items:center;gap:4px;margin-left:16px;min-height:44px;font-size:12px;font-weight:500}
.rotation-hub{margin:28px 0 30px}.rotation-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.rotation-card{min-height:94px;display:flex;align-items:center;gap:12px;padding:18px 15px;border:1px solid var(--line);background:#fff;border-radius:14px;text-align:left;transition:transform .18s,border-color .18s,box-shadow .18s}
.rotation-card:hover{transform:translateY(-2px);border-color:#aa95b7;box-shadow:0 6px 18px #4f3f620a}.rotation-card.selected{background:#f4f0f7;border-color:#9a82ab}
.rotation-icon{display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;border-radius:11px;background:#f3f0f6;color:#867095}.rotation-copy{display:grid;gap:7px;min-width:0}.rotation-copy strong{font-size:12px;font-weight:600;line-height:1.5}.rotation-copy small{font-size:10px;color:var(--muted);line-height:1.5}.rotation-state{margin-left:auto;color:#8e7a9c}.rotation-state svg{width:15px;height:15px}
.other-rotations{margin-top:13px}.other-rotations>summary{cursor:pointer;font-size:12px;color:var(--deep);padding:12px 0;min-height:44px}.other-rotations .rotation-grid{margin-top:8px}
.rotation-empty{max-width:760px;margin:32px auto;text-align:center;padding:54px 35px}.rotation-empty h1{font-size:32px;margin-top:15px}.rotation-empty p{margin:18px auto 24px;max-width:430px;color:var(--muted);font-size:13px}.rotation-empty p.small{font-size:11px;margin-bottom:0}.empty-rotation-icon{display:grid;place-items:center;margin:0 auto 23px;width:64px;height:64px;background:var(--pale);border-radius:19px;color:var(--purple)}.empty-rotation-icon svg{width:28px;height:28px}
.setup-title{margin-bottom:22px}.setup-card .format-grid{margin-top:0}.option{transition:background .18s,border-color .18s,box-shadow .18s,transform .12s}.option:active{transform:scale(.995)}.option.selected{box-shadow:inset 3px 0 0 #9271a7}.option:disabled{opacity:1;cursor:default}
.question-figure{margin:22px 0 28px;padding:16px;border:1px solid var(--line);border-radius:13px;background:#faf9fb}.media-enlarge{display:block;border:0;background:white;width:100%;padding:8px;border-radius:8px;overflow:hidden}.question-image{display:block;width:100%;height:auto;max-height:480px;object-fit:contain}.media-enlarge>span{display:flex;justify-content:flex-end;align-items:center;gap:7px;color:var(--deep);font-size:11px;padding:13px 5px 5px;min-height:44px}.media-enlarge svg{width:15px;height:15px}.question-figure figcaption{font-size:11px;color:var(--muted);margin-top:12px;line-height:1.7}.media-error{font-size:12px;color:#8d4d53;border-top:1px solid #ead9dc;padding-top:14px;margin-top:14px}.media-error[hidden]{display:none}.media-error .btn{margin-left:10px;font-size:11px}.media-error p{margin-top:10px}.media-dialog{padding:22px;overflow:auto}.media-dialog img{display:block;max-width:none;width:max(100%,800px);height:auto}.media-dialog p{margin-top:18px;font-size:12px;color:var(--muted)}#modal:has(.media-dialog){max-width:1180px}.modal-header .btn{flex-shrink:0}
.session-review{text-align:left;margin:20px 0 25px}.session-review summary{min-height:44px;padding:10px 0;font-size:13px;color:var(--deep);cursor:pointer}.review-item{display:flex;gap:14px;padding:18px 0;border-top:1px solid var(--line)}.review-outcome{width:30px;height:30px;display:grid;place-items:center;background:#f0edf4;color:var(--purple);border-radius:9px;flex-shrink:0}.review-item strong{font-size:12px}.review-item p{font-size:12px;line-height:1.8;color:var(--ink);margin:8px 0}.review-item small{font-size:10px;color:var(--muted)}
.quiz-progress,.subject-progress{transition:all .35s ease}.quiz-progress::-webkit-progress-value,.subject-progress::-webkit-progress-value{transition:width .35s ease}
.view-enter>.page-heading,.view-enter>.quiz-wrap,.view-enter>.results,.view-enter>.rotation-empty{animation:view-arrive .26s ease both}.view-enter .rotation-card{animation:card-arrive .32s ease both}.view-enter .rotation-card:nth-child(2){animation-delay:.035s}.view-enter .rotation-card:nth-child(3){animation-delay:.07s}.view-enter .rotation-card:nth-child(4){animation-delay:.105s}
.feedback{animation:feedback-arrive .28s ease both}.feedback.good .pill svg{stroke-dasharray:28;stroke-dashoffset:0;animation:mark-arrive .4s ease both}.results .result-orbit{animation:result-arrive .4s ease both}
.hero .study-book,.login-art .study-book{animation:book-breathe 8s ease-in-out infinite}.hero .hero-art{pointer-events:none}.day-dot.studied{animation:mark-arrive .32s ease both}
body.offline .topbar::after{content:'Offline · jawaban belum terkirim';font-size:10px;color:#815d34;background:#f7efdf;border-radius:8px;padding:6px 10px}
@keyframes view-arrive{from{opacity:.4;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes card-arrive{from{opacity:.4;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes feedback-arrive{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes mark-arrive{from{opacity:.3;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes result-arrive{from{transform:translateY(5px) scale(.93)}to{transform:translateY(0) scale(1)}}
@keyframes book-breathe{0%,100%{transform:translateY(0) rotate(4deg)}50%{transform:translateY(-5px) rotate(5deg)}}
@media(max-width:1150px){.rotation-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-secondary{margin-left:10px}.rotation-card{min-height:88px}}
@media(max-width:650px){.rotation-hub{margin:23px 0}.rotation-grid{gap:9px}.rotation-card{padding:14px 11px;gap:9px;min-height:96px}.rotation-icon{width:29px;height:29px;border-radius:9px}.rotation-icon svg{width:16px;height:16px}.rotation-copy strong{font-size:11px}.rotation-copy small{font-size:9px}.rotation-state{display:none}.rotation-hub .section-title{align-items:flex-start;gap:8px}.rotation-hub .section-title h2{font-size:17px}.rotation-hub .section-title>span{font-size:9px}.hero-secondary{font-size:11px;margin-left:7px}.rotation-empty{padding:34px 22px}.rotation-empty h1{font-size:27px}.question-figure{padding:10px;margin-inline:-5px}.media-enlarge{padding:2px}.media-enlarge>span{font-size:10px}.question-figure figcaption{font-size:10px}.media-dialog{padding:12px}.modal-header h2{font-size:12px}.modal-header .btn{font-size:11px}.results .result-actions{display:flex;flex-wrap:wrap;gap:10px}.result-actions .btn{flex:1}.topbar::after{position:fixed;bottom:15px;left:15px;z-index:12}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.connection-page{display:grid;place-items:center;min-height:100svh;padding:24px}.connection-error{max-width:600px;text-align:center;padding:45px 30px}.connection-error h1{font-size:30px}.connection-error p{margin:20px auto 25px;max-width:420px;color:var(--muted);font-size:13px;line-height:1.9}.media-status{padding-top:10px}.media-status[hidden]{display:none}.other-topics{margin-top:17px}.other-topics .topic-grid{margin-top:10px}

.mobile-menu{width:44px;height:44px}.password-wrap button{width:44px;height:44px;top:0}.password-wrap input,input,select{min-height:44px}