:root{--color-bg: #fafafa;--color-bg-card: #ffffff;--color-bg-hover: #f5f5f5;--color-border: #e5e5e5;--color-border-light: #f0f0f0;--color-text-primary: #171717;--color-text-secondary: #525252;--color-text-muted: #a3a3a3;--color-safe: #22c55e;--color-safe-bg: #f0fdf4;--color-borderline: #f59e0b;--color-borderline-bg: #fffbeb;--color-risk: #ef4444;--color-risk-bg: #fef2f2;--color-primary: #3b82f6;--color-primary-hover: #2563eb;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.25rem;--font-size-xl: 1.5rem;--font-size-2xl: 2rem;--font-size-3xl: 3rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.25;--line-height-normal: 1.5;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .07), 0 2px 4px -2px rgb(0 0 0 / .05);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .08), 0 4px 6px -4px rgb(0 0 0 / .05);--transition-fast: .15s ease;--transition-normal: .2s ease;--max-width: 800px;--header-height: 64px}[data-theme=dark]{--color-bg: #0a0a0a;--color-bg-card: #171717;--color-bg-hover: #262626;--color-border: #262626;--color-border-light: #1f1f1f;--color-text-primary: #fafafa;--color-text-secondary: #a3a3a3;--color-text-muted: #525252;--color-safe-bg: #052e16;--color-borderline-bg: #451a03;--color-risk-bg: #450a0a;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .3);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .4), 0 2px 4px -2px rgb(0 0 0 / .3);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .5), 0 4px 6px -4px rgb(0 0 0 / .4)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-bg);min-height:100vh}h1,h2,h3,h4,h5,h6{font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight)}h1{font-size:var(--font-size-2xl)}h2{font-size:var(--font-size-xl)}h3{font-size:var(--font-size-lg)}.text-muted{color:var(--color-text-muted)}.text-secondary{color:var(--color-text-secondary)}.text-sm{font-size:var(--font-size-sm)}.text-xs{font-size:var(--font-size-xs)}.text-lg{font-size:var(--font-size-lg)}.text-xl{font-size:var(--font-size-xl)}.text-2xl{font-size:var(--font-size-2xl)}.text-3xl{font-size:var(--font-size-3xl)}.font-medium{font-weight:var(--font-weight-medium)}.font-semibold{font-weight:var(--font-weight-semibold)}.font-bold{font-weight:var(--font-weight-bold)}.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 var(--space-lg)}.page{padding:var(--space-xl) 0}.card{background:var(--color-bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--color-border-light);padding:var(--space-lg)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-md)}.card-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold)}.card-subtitle{font-size:var(--font-size-sm);color:var(--color-text-muted)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);border-radius:var(--radius-md);border:none;cursor:pointer;transition:all var(--transition-fast)}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-hover)}.btn-secondary{background:var(--color-bg-hover);color:var(--color-text-primary);border:1px solid var(--color-border)}.btn-secondary:hover{background:var(--color-border)}.btn-ghost{background:transparent;color:var(--color-text-secondary)}.btn-ghost:hover{background:var(--color-bg-hover);color:var(--color-text-primary)}.btn-lg{padding:var(--space-md) var(--space-lg);font-size:var(--font-size-base)}.input{width:100%;padding:var(--space-sm) var(--space-md);font-size:var(--font-size-base);font-family:inherit;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-card);color:var(--color-text-primary);transition:border-color var(--transition-fast)}.input:focus{outline:none;border-color:var(--color-primary)}.input::placeholder{color:var(--color-text-muted)}.label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);margin-bottom:var(--space-xs)}.checkbox-wrapper{display:flex;align-items:center;gap:var(--space-sm);cursor:pointer}.checkbox{width:20px;height:20px;border-radius:var(--radius-sm);border:2px solid var(--color-border);cursor:pointer;accent-color:var(--color-primary)}.checkbox:checked{border-color:var(--color-primary)}.badge{display:inline-flex;align-items:center;padding:var(--space-xs) var(--space-sm);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);border-radius:var(--radius-full)}.badge-safe{background:var(--color-safe-bg);color:var(--color-safe)}.badge-borderline{background:var(--color-borderline-bg);color:var(--color-borderline)}.badge-risk{background:var(--color-risk-bg);color:var(--color-risk)}.percentage{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);line-height:1}.percentage-unit{font-size:var(--font-size-lg);font-weight:var(--font-weight-normal);color:var(--color-text-muted)}.weekly-strip{display:flex;gap:var(--space-sm)}.day-indicator{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.day-indicator.submitted{background:var(--color-safe-bg);color:var(--color-safe)}.day-indicator.missed{background:var(--color-risk-bg);color:var(--color-risk)}.day-indicator.today{background:var(--color-primary);color:#fff}.day-indicator.future{background:var(--color-bg-hover);color:var(--color-text-muted)}.snackbar{position:fixed;bottom:var(--space-xl);left:50%;transform:translate(-50%);background:var(--color-text-primary);color:var(--color-bg);padding:var(--space-md) var(--space-lg);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:var(--space-md);z-index:1000}.snackbar-action{color:var(--color-primary);background:none;border:none;font-weight:var(--font-weight-medium);cursor:pointer}.form-group{margin-bottom:var(--space-lg)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.mt-xl{margin-top:var(--space-xl)}.mb-sm{margin-bottom:var(--space-sm)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.skeleton{background:linear-gradient(90deg,var(--color-bg-hover) 25%,var(--color-border-light) 50%,var(--color-bg-hover) 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:var(--radius-sm)}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}@media(max-width:640px){:root{--font-size-2xl: 1.75rem;--font-size-3xl: 2.5rem;--space-xl: 1.5rem;--space-2xl: 2rem}.container{padding:0 var(--space-md)}}.grid{display:grid}.grid-cols-2{grid-template-columns:repeat(2,1fr)}.grid-cols-7{grid-template-columns:repeat(7,1fr)}.text-center{text-align:center}.uppercase{text-transform:uppercase}.tracking-wider{letter-spacing:.05em}.relative{position:relative}.absolute{position:absolute}.w-full{width:100%}.h-full{height:100%}.h-10{height:2.5rem}.bottom-1{bottom:4px}.bg-primary{background-color:var(--color-primary)}.bg-hover{background-color:var(--color-bg-hover)}.text-primary{color:var(--color-primary)}.text-primary-fg{color:#fff}.border{border:1px solid var(--color-border)}.rounded-md{border-radius:var(--radius-md)}.rounded-full{border-radius:var(--radius-full)}.overflow-hidden{overflow:hidden}.hover\:bg-hover:hover{background-color:var(--color-bg-hover)}.transition-colors{transition:background-color var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast)}.text-safe{color:var(--color-safe)}.text-warning{color:var(--color-borderline)}.text-risk{color:var(--color-risk)}.bg-safe{background-color:var(--color-safe)}.bg-warning{background-color:var(--color-borderline)}.bg-risk{background-color:var(--color-risk)}.opacity-30{opacity:.3}.p-md{padding:var(--space-md)}.rounded{border-radius:var(--radius-md)}@media(max-width:768px){.desktop-nav{display:none!important}.mobile-menu-toggle{display:flex!important}.container{padding-left:var(--space-md);padding-right:var(--space-md)}h1{font-size:var(--font-size-xl)}h2{font-size:var(--font-size-lg)}.card{padding:var(--space-md)}.flex-mobile-col{flex-direction:column}}@media(min-width:769px){.mobile-menu-toggle,.mobile-menu{display:none!important}}.toast-container{position:fixed;bottom:var(--space-lg);left:50%;transform:translate(-50%);z-index:1000;display:flex;flex-direction:column;gap:var(--space-sm);max-width:90vw;width:400px}.toast{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-lg);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);animation:toast-in .3s ease}.toast.toast-success{border-left:4px solid var(--color-safe)}.toast.toast-error{border-left:4px solid var(--color-risk)}.toast.toast-warning{border-left:4px solid var(--color-borderline)}.toast-message{flex:1;font-size:var(--font-size-sm)}.toast-dismiss{background:none;border:none;color:var(--color-text-muted);cursor:pointer;padding:var(--space-xs);margin-left:var(--space-sm);font-size:var(--font-size-lg)}.toast-dismiss:hover{color:var(--color-text-primary)}@keyframes toast-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.error-boundary{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:50vh;padding:var(--space-xl);text-align:center}.error-boundary h2{color:var(--color-risk);margin-bottom:var(--space-md)}.error-boundary p{color:var(--color-text-secondary);margin-bottom:var(--space-lg)}.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--color-bg-card);border-top:1px solid var(--color-border);padding:var(--space-sm) 0;padding-bottom:env(safe-area-inset-bottom,var(--space-sm));z-index:100}@media(max-width:768px){.bottom-nav{display:flex;justify-content:space-around}.page{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}}.bottom-nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--space-xs) var(--space-md);text-decoration:none;color:var(--color-text-muted);transition:color var(--transition-fast);border-radius:var(--radius-md)}.bottom-nav-item.active{color:var(--color-primary)}.bottom-nav-item:active{background:var(--color-bg-hover)}.bottom-nav-icon{font-size:1.25rem}.bottom-nav-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium)}.weekly-chart{padding:var(--space-md);background:var(--color-bg-hover);border-radius:var(--radius-md)}.weekly-chart-bars{display:flex;justify-content:space-between;align-items:flex-end;height:80px;gap:var(--space-xs)}.weekly-chart-bar-container{flex:1;display:flex;flex-direction:column;align-items:center;height:100%}.weekly-chart-bar{width:100%;max-width:24px;border-radius:var(--radius-sm) var(--radius-sm) 0 0;transition:height .3s ease;margin-top:auto}.weekly-chart-label{font-size:var(--font-size-xs);color:var(--color-text-muted);margin-top:var(--space-xs)}.subject-comparison-list{display:flex;flex-direction:column;gap:var(--space-sm)}.subject-comparison-item{display:flex;flex-direction:column;gap:4px}.subject-comparison-label{font-size:var(--font-size-sm)}.subject-comparison-bar-container{display:flex;align-items:center;gap:var(--space-sm);height:20px;background:var(--color-bg-hover);border-radius:var(--radius-sm);overflow:hidden;position:relative}.subject-comparison-bar{height:100%;border-radius:var(--radius-sm);transition:width .5s ease;min-width:2px}.subject-comparison-value{position:absolute;right:var(--space-sm);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold)}.ml-sm{margin-left:var(--space-sm)}@keyframes confetti-fall{0%{transform:translateY(-100%) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}.celebration-overlay{position:fixed;inset:0;pointer-events:none;z-index:1000;overflow:hidden}.confetti{position:absolute;width:10px;height:10px;animation:confetti-fall 3s ease-out forwards}.card-collapsible{overflow:hidden;transition:max-height .3s ease}.card-collapsible.collapsed{max-height:60px}.card-collapsible.expanded{max-height:500px}.card-expand-toggle{display:flex;align-items:center;justify-content:center;padding:var(--space-xs);cursor:pointer;color:var(--color-text-muted);transition:color var(--transition-fast)}.card-expand-toggle:hover{color:var(--color-text-primary)}.timetable-cell{transition:all .2s ease}.timetable-cell:hover{transform:scale(1.02);box-shadow:var(--shadow-md)}.timetable-row:hover .timetable-cell{background:var(--color-bg-hover)}.swipe-hint{display:none;text-align:center;padding:var(--space-xs);font-size:var(--font-size-xs);color:var(--color-text-muted)}@media(max-width:768px){.swipe-hint{display:block}}.streak-counter{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);background:linear-gradient(135deg,#ff6b35,#f7c59f);border-radius:var(--radius-full);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:#fff}.streak-icon{animation:flame-flicker .5s ease-in-out infinite alternate}@keyframes flame-flicker{0%{transform:scale(1)}to{transform:scale(1.1)}}.flex-1{flex:1}.flex-wrap{flex-wrap:wrap}.anim-fade-in{animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.anim-pulse{animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@keyframes marching-ants{0%{background-position:0 0,0 100%,0 0,100% 0}to{background-position:20px 0,-20px 100%,0 -20px,100% 20px}}:root{--rc-drag-handle-size: 12px;--rc-drag-handle-mobile-size: 24px;--rc-drag-handle-bg-colour: rgba(0, 0, 0, .2);--rc-drag-bar-size: 6px;--rc-border-color: rgba(255, 255, 255, .7);--rc-focus-color: #0088ff}.ReactCrop{position:relative;display:inline-block;cursor:crosshair;max-width:100%}.ReactCrop *,.ReactCrop *:before,.ReactCrop *:after{box-sizing:border-box}.ReactCrop--disabled,.ReactCrop--locked{cursor:inherit}.ReactCrop__child-wrapper{overflow:hidden;max-height:inherit}.ReactCrop__child-wrapper>img,.ReactCrop__child-wrapper>video{display:block;max-width:100%;max-height:inherit}.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>img,.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>video{touch-action:none}.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection{touch-action:none}.ReactCrop__crop-mask{position:absolute;inset:0;pointer-events:none;width:calc(100% + .5px);height:calc(100% + .5px)}.ReactCrop__crop-selection{position:absolute;top:0;left:0;transform:translateZ(0);cursor:move}.ReactCrop--disabled .ReactCrop__crop-selection{cursor:inherit}.ReactCrop--circular-crop .ReactCrop__crop-selection{border-radius:50%}.ReactCrop--circular-crop .ReactCrop__crop-selection:after{pointer-events:none;content:"";position:absolute;inset:-1px;border:1px solid var(--rc-border-color);opacity:.3}.ReactCrop--no-animate .ReactCrop__crop-selection{outline:1px dashed white}.ReactCrop__crop-selection:not(.ReactCrop--no-animate .ReactCrop__crop-selection){animation:marching-ants 1s;background-image:linear-gradient(to right,#fff 50%,#444 50%),linear-gradient(to right,#fff 50%,#444 50%),linear-gradient(to bottom,#fff 50%,#444 50%),linear-gradient(to bottom,#fff 50%,#444 50%);background-size:10px 1px,10px 1px,1px 10px,1px 10px;background-position:0 0,0 100%,0 0,100% 0;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;color:#fff;animation-play-state:running;animation-timing-function:linear;animation-iteration-count:infinite}.ReactCrop__crop-selection:focus{outline:2px solid var(--rc-focus-color);outline-offset:-1px}.ReactCrop--invisible-crop .ReactCrop__crop-mask,.ReactCrop--invisible-crop .ReactCrop__crop-selection{display:none}.ReactCrop__rule-of-thirds-vt:before,.ReactCrop__rule-of-thirds-vt:after,.ReactCrop__rule-of-thirds-hz:before,.ReactCrop__rule-of-thirds-hz:after{content:"";display:block;position:absolute;background-color:#fff6}.ReactCrop__rule-of-thirds-vt:before,.ReactCrop__rule-of-thirds-vt:after{width:1px;height:100%}.ReactCrop__rule-of-thirds-vt:before{left:33.3333333333%}.ReactCrop__rule-of-thirds-vt:after{left:66.6666666667%}.ReactCrop__rule-of-thirds-hz:before,.ReactCrop__rule-of-thirds-hz:after{width:100%;height:1px}.ReactCrop__rule-of-thirds-hz:before{top:33.3333333333%}.ReactCrop__rule-of-thirds-hz:after{top:66.6666666667%}.ReactCrop__drag-handle{position:absolute;width:var(--rc-drag-handle-size);height:var(--rc-drag-handle-size);background-color:var(--rc-drag-handle-bg-colour);border:1px solid var(--rc-border-color)}.ReactCrop__drag-handle:focus{background:var(--rc-focus-color)}.ReactCrop .ord-nw{top:0;left:0;transform:translate(-50%,-50%);cursor:nw-resize}.ReactCrop .ord-n{top:0;left:50%;transform:translate(-50%,-50%);cursor:n-resize}.ReactCrop .ord-ne{top:0;right:0;transform:translate(50%,-50%);cursor:ne-resize}.ReactCrop .ord-e{top:50%;right:0;transform:translate(50%,-50%);cursor:e-resize}.ReactCrop .ord-se{bottom:0;right:0;transform:translate(50%,50%);cursor:se-resize}.ReactCrop .ord-s{bottom:0;left:50%;transform:translate(-50%,50%);cursor:s-resize}.ReactCrop .ord-sw{bottom:0;left:0;transform:translate(-50%,50%);cursor:sw-resize}.ReactCrop .ord-w{top:50%;left:0;transform:translate(-50%,-50%);cursor:w-resize}.ReactCrop__disabled .ReactCrop__drag-handle{cursor:inherit}.ReactCrop__drag-bar{position:absolute}.ReactCrop__drag-bar.ord-n{top:0;left:0;width:100%;height:var(--rc-drag-bar-size);transform:translateY(-50%)}.ReactCrop__drag-bar.ord-e{right:0;top:0;width:var(--rc-drag-bar-size);height:100%;transform:translate(50%)}.ReactCrop__drag-bar.ord-s{bottom:0;left:0;width:100%;height:var(--rc-drag-bar-size);transform:translateY(50%)}.ReactCrop__drag-bar.ord-w{top:0;left:0;width:var(--rc-drag-bar-size);height:100%;transform:translate(-50%)}.ReactCrop--new-crop .ReactCrop__drag-bar,.ReactCrop--new-crop .ReactCrop__drag-handle,.ReactCrop--fixed-aspect .ReactCrop__drag-bar,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w{display:none}@media(pointer:coarse){.ReactCrop .ord-n,.ReactCrop .ord-e,.ReactCrop .ord-s,.ReactCrop .ord-w{display:none}.ReactCrop__drag-handle{width:var(--rc-drag-handle-mobile-size);height:var(--rc-drag-handle-mobile-size)}}