:root{--blue-50:#eff6ff;--blue-100:#dbeafe;--blue-600:#1d4ed8;--blue-700:#1e40af;--ink-900:#1b2236;--ink-600:#4a5468;--ink-300:#c5cad6;--ink-500:#6b7385;--bg:#faf8f4;--surface:#fff;--border:#e6e2d9;--amber-100:#fef3c7;--amber-500:#d99a06;--amber-700:#8a5a00;--teal-100:#ccf1ec;--teal-600:#0f7c70;--rose-100:#fde2e4;--rose-600:#b4233a;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--tap-min:48px;--font-base:16px;--font-stack:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--focus-ring:3px solid var(--amber-700)}*,:before,:after{box-sizing:border-box}html{scroll-padding-bottom:120px}html,body,#root{min-height:100%;margin:0}body{background:var(--bg);color:var(--ink-900);font-family:var(--font-stack);font-size:var(--font-base);line-height:1.5}button{font:inherit;min-height:var(--tap-min);cursor:pointer}:focus-visible{outline:var(--focus-ring);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.app{flex-direction:column;max-width:520px;min-height:100vh;margin:0 auto;display:flex}.app__header{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border);background:var(--surface)}.app__name{color:var(--blue-700);font-weight:700}.app__main{padding:var(--space-4);padding-bottom:calc(88px + env(safe-area-inset-bottom,0px));flex:1}.app__main:focus{outline:none}h1{margin:0 0 var(--space-4);font-size:1.5rem}h2{margin:0 0 var(--space-2);font-size:1.15rem}h3{margin:0 0 var(--space-3);font-size:1rem}p{margin:0 0 var(--space-3)}.muted{color:var(--ink-600)}.screen{gap:var(--space-4);flex-direction:column;display:flex}.screen>h1{margin-bottom:0}.banner{padding:var(--space-3) var(--space-4);font-size:.95rem;font-weight:600}.banner--demo{background:var(--amber-100);color:#5c3d00;border-bottom:2px solid var(--amber-500)}.banner--warn{background:var(--rose-100);color:#7d1426}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4)}.field{margin-bottom:var(--space-3)}.field label{margin-bottom:var(--space-1);font-weight:600;display:block}.field input,.field select{width:100%;min-height:var(--tap-min);padding:0 var(--space-3);font:inherit;color:var(--ink-900);border:2px solid var(--ink-500);border-radius:var(--radius-sm);background:#fff}.field input[aria-invalid=true],.field select[aria-invalid=true]{border-color:var(--rose-600)}.field__hint{color:var(--ink-600);margin:var(--space-1) 0 0;font-size:.9rem}.field__error{color:var(--rose-600);margin:var(--space-1) 0 0;font-size:.9rem;font-weight:600}.status{min-height:1.5em;color:var(--teal-600);margin:var(--space-2) 0 0;font-weight:600}.notice{background:var(--amber-100);border-radius:var(--radius-md);padding:var(--space-3);margin-top:var(--space-3)}.subform{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px dashed var(--border)}.form-actions{gap:var(--space-2);justify-content:flex-end;display:flex}.toggle{align-items:center;gap:var(--space-3);min-height:var(--tap-min);font-weight:600;display:flex}.toggle input{width:24px;height:24px}.schedule-list{margin:0 0 var(--space-3);padding:0;list-style:none}.schedule-item{justify-content:space-between;align-items:center;gap:var(--space-2);padding:var(--space-3) 0;border-bottom:1px solid var(--border);display:flex}.schedule-item p{margin:0}.schedule-item__title{font-weight:700}.schedule-item__actions{flex-shrink:0;display:flex}.btn{min-height:var(--tap-min);padding:0 var(--space-4);border-radius:var(--radius-md);border:2px solid #0000;justify-content:center;align-items:center;font-weight:700;display:inline-flex}.btn:disabled{opacity:.6;cursor:not-allowed}.btn--primary{background:var(--blue-600);color:#fff}.btn--primary:hover:not(:disabled){background:var(--blue-700)}.btn--secondary{background:var(--blue-50);color:var(--blue-700);border-color:var(--blue-100);margin-bottom:var(--space-3)}.btn--ghost{color:var(--blue-700);background:0 0}.btn--danger{background:var(--rose-600);color:#fff}.btn--danger-outline{color:var(--rose-600);border-color:var(--rose-600);background:#fff}.dialog{border-radius:var(--radius-lg);max-width:min(92vw,420px);color:var(--ink-900);border:none;padding:0}.dialog::backdrop{background:#1b22368c}.dialog__body{padding:var(--space-5)}.dialog__actions{gap:var(--space-2);justify-content:flex-end;display:flex}.bottom-nav{background:var(--surface);border-top:1px solid var(--border);width:100%;max-width:520px;padding-bottom:env(safe-area-inset-bottom,0px);z-index:10;position:fixed;bottom:0;left:50%;transform:translate(-50%)}.bottom-nav ul{grid-template-columns:repeat(4,1fr);max-width:520px;margin:0 auto;padding:0;list-style:none;display:grid}.bottom-nav__link{min-height:64px;padding:var(--space-2) 0;color:var(--ink-600);flex-direction:column;justify-content:center;align-items:center;gap:2px;font-size:.8rem;font-weight:600;text-decoration:none;display:flex}.bottom-nav__link[aria-current=page]{color:var(--blue-700);background:var(--blue-50);box-shadow:inset 0 3px 0 var(--blue-600)}.backup-actions{gap:var(--space-2);margin-top:var(--space-3);flex-wrap:wrap;display:flex}.backup-actions .btn{margin-bottom:0}.backup-status p,.backup-error p{margin:0 0 var(--space-1)}.backup-summary{margin-bottom:var(--space-3)}.backup-summary p{margin:0 0 var(--space-1)}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}a.btn{text-decoration:none}.btn--block{width:100%}.btn--checkin{min-height:56px;margin-top:var(--space-3);font-size:1.1rem}.home-header{justify-content:space-between;align-items:flex-start;gap:var(--space-3);display:flex}.home-header h1{margin-bottom:0}.home-header__date{margin:0}.streak-chip{align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-3);background:var(--amber-100);color:#5c3d00;white-space:nowrap;border-radius:999px;margin:0;font-weight:700;display:inline-flex}.companion{align-items:center;gap:var(--space-4);display:flex}.companion__info{flex:1;min-width:0}.companion__stage{margin:0;font-size:1.25rem;font-weight:800}.companion__xp{margin:0 0 var(--space-1);font-weight:700}.companion__next{margin:var(--space-1) 0 0;font-size:.9rem}.progress{background:var(--blue-100);border-radius:999px;height:12px;overflow:hidden}.progress__bar{background:var(--blue-600);border-radius:999px;height:100%}.pet-art{flex-shrink:0;animation:3.2s ease-in-out infinite pet-bob;display:inline-block}.pet-art svg{display:block}@keyframes pet-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.streak-week{gap:var(--space-1);margin:var(--space-4) 0 0;padding:var(--space-3) 0 0;border-top:1px solid var(--border);grid-template-columns:repeat(7,1fr);list-style:none;display:grid}.streak-day{align-items:center;gap:var(--space-1);color:var(--ink-600);flex-direction:column;font-size:.75rem;font-weight:600;display:flex;position:relative}.streak-day__mark{border:2px solid var(--ink-500);background:#fff;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;display:inline-flex}.streak-day--good .streak-day__mark{background:var(--teal-100);border-color:var(--teal-600);color:var(--teal-600)}.streak-day--missed .streak-day__mark{background:var(--rose-100);border-color:var(--rose-600);color:var(--rose-600)}.streak-day--pending .streak-day__mark{border-color:var(--amber-700);color:var(--amber-700)}.streak-day--none .streak-day__mark{color:var(--ink-300)}.streak-day--today .streak-day__name{color:var(--blue-700);text-underline-offset:3px;font-weight:800;text-decoration:underline}.weather{justify-content:space-between;align-items:center;gap:var(--space-2);background:var(--blue-50);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);flex-wrap:wrap;display:flex}.weather p{margin:0}.weather--off{background:var(--amber-100)}.weather__heading{color:var(--ink-600)}.chip{padding:2px var(--space-2);border-radius:999px;margin:0;font-size:.8rem;font-weight:700;line-height:1.5;display:inline-block}.chip--demo{background:var(--amber-100);color:#5c3d00;border:1px solid var(--amber-500)}.chip--warn{background:var(--rose-100);color:#7d1426}.chip--rain{background:var(--blue-100);color:var(--blue-700)}.chip--state{background:var(--bg);border:1px solid var(--border);color:var(--ink-600)}.chip--berikutnya{background:var(--blue-50);border-color:var(--blue-600);color:var(--blue-700)}.chip--selesai{background:var(--teal-100);border-color:var(--teal-600);color:#0a5a50}.chip--terlewat{background:var(--rose-100);border-color:var(--rose-600);color:#7d1426}.task-list{gap:var(--space-3);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.task{gap:var(--space-3);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4);display:flex}.task--berikutnya{border:2px solid var(--blue-600);box-shadow:0 2px 0 var(--blue-100)}.task__marker{border:2px solid var(--ink-500);width:32px;height:32px;color:var(--ink-600);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.task--selesai .task__marker{background:var(--teal-100);border-color:var(--teal-600);color:var(--teal-600)}.task--berikutnya .task__marker{border-color:var(--blue-600);color:var(--blue-600)}.task--terlewat .task__marker{background:var(--rose-100);border-color:var(--rose-600);color:var(--rose-600)}.task__main{flex:1;min-width:0}.task__head{align-items:center;gap:var(--space-2);display:flex}.task__time{margin:0;font-size:1.1rem;font-weight:800}.task__title{margin:0;font-weight:700}.task__place{margin:0 0 var(--space-2);font-size:.9rem}.next__depart{margin:0 0 var(--space-1);font-weight:700}.next .muted{margin:0 0 var(--space-1)}.next__demo{margin-top:var(--space-2)}.feedback{min-height:0}.feedback__error{margin:var(--space-3) 0 var(--space-2);padding:var(--space-3);border-radius:var(--radius-md);background:var(--rose-100);color:#7d1426;font-weight:600}.result--full{border:2px solid var(--teal-600)}.result__head{align-items:center;gap:var(--space-3);display:flex}.result__title{margin:0}.result__big{margin:0;font-size:1.25rem;font-weight:800}.result__good{color:var(--teal-600)}.result__late{color:var(--rose-600)}.result__xp{margin:var(--space-3) 0 var(--space-1);font-size:1.6rem;font-weight:800}.result__breakdown{margin:0 0 var(--space-3);padding-left:var(--space-5);color:var(--ink-600)}.result__badge{color:#5c3d00;background:var(--amber-100);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);font-weight:700}.result__notice{font-weight:600}.result--compact .result__line{margin:0}.auto-gps{justify-content:space-between;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--blue-50);border:1px solid var(--blue-100);flex-wrap:wrap;display:flex}.auto-gps--stopped,.auto-gps--denied,.auto-gps--unsupported{background:var(--amber-100);border-color:var(--amber-500)}.auto-gps--idle{background:var(--bg);border-color:var(--border)}.auto-gps__text{flex:1;min-width:0;margin:0;font-weight:600}.auto-gps__button{margin:0}.auto-gps__dot{width:10px;height:10px;margin-right:var(--space-2);background:var(--blue-600);border-radius:50%;animation:1.6s ease-in-out infinite auto-gps-pulse;display:inline-block}@keyframes auto-gps-pulse{0%,to{opacity:1}50%{opacity:.35}}.confirm-arrival{border:2px solid var(--blue-600)}.confirm-arrival h2{margin-bottom:var(--space-2)}.confirm-arrival__actions{gap:var(--space-2);flex-wrap:wrap;align-items:center;display:flex}.confirm-arrival__actions .btn--checkin{margin-top:0}.pet-hero{text-align:center;flex-direction:column;align-items:center;display:flex}.pet-hero__stage{margin:var(--space-2) 0 var(--space-1);font-size:1.6rem}.pet-hero__xp{width:100%;max-width:320px}.pet-hero__streak{align-items:center;gap:var(--space-2);margin:var(--space-3) 0;padding:var(--space-2) var(--space-3);background:var(--amber-100);color:#5c3d00;border-radius:999px;display:inline-flex}.stage-list{margin:0;padding:0;list-style:none}.stage-list__item{align-items:center;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-md);grid-template-columns:1fr auto auto;display:grid}.stage-list__item+.stage-list__item{margin-top:var(--space-1)}.stage-list__item--current{background:var(--blue-50);box-shadow:inset 0 0 0 2px var(--blue-600)}.stage-list__name{font-weight:700}.badge-grid{gap:var(--space-3);margin:0;padding:0;list-style:none;display:grid}.badge{gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-md);border:2px solid var(--border);background:var(--bg);display:flex}.badge--earned{background:var(--amber-100);border-color:var(--amber-500)}.badge__icon{border:2px solid var(--ink-500);width:40px;height:40px;color:var(--ink-600);background:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.badge--earned .badge__icon{border-color:var(--amber-700);color:#5c3d00}.badge p{margin:0}.badge__name{font-weight:800}.badge__status{font-weight:600}.badge__hint{font-size:.9rem}.stats{gap:var(--space-3);grid-template-columns:1fr 1fr;display:grid}.stat{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-3)}.stat__label{color:var(--ink-600);margin:0;font-size:.85rem;font-weight:600}.stat__value{margin:var(--space-1) 0 0;font-size:1.15rem;font-weight:800}.stats__note{margin:calc(-1 * var(--space-1)) 0 0;color:var(--ink-600);grid-column:1/-1;font-size:.85rem}.history-list{gap:var(--space-3);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.history-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4)}.history-item p{margin:0 0 var(--space-1)}.history-item__top{justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-1);color:var(--ink-600);font-size:.9rem;display:flex}.history-item__xp{color:var(--ink-900);font-size:1.05rem}.history-item__meta{font-size:.9rem}.history-item__chips{gap:var(--space-2);margin-top:var(--space-2);flex-wrap:wrap;display:flex}