*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-mono: "Courier New", monospace;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-full: 9999px;--transition: .15s ease;--sidebar-w: 220px}[data-theme=dark]{--bg: #080A12;--surface: #10121E;--surface-2: #181B2C;--surface-3: #1E2236;--border: rgba(255,255,255,.08);--border-focus: rgba(6,182,212,.5);--text: #EEF0FA;--text-2: #8890B8;--text-3: #454870;--primary: #06B6D4;--primary-dim: rgba(6,182,212,.12);--primary-glow: rgba(6,182,212,.3);--gold: #F5CC45;--gold-dim: rgba(245,204,69,.15);--green: #34D399;--green-dim: rgba(52,211,153,.15);--red: #F87171;--red-dim: rgba(248,113,113,.12);--blue: #60A5FA;--purple: #A78BFA;--shadow: 0 8px 40px rgba(0,0,0,.6);--shadow-sm: 0 2px 12px rgba(0,0,0,.4);--glow-primary: 0 0 24px rgba(6,182,212,.2)}[data-theme=light]{--bg: #F0F2FA;--surface: #FFFFFF;--surface-2: #E8ECF6;--surface-3: #DDE2F0;--border: rgba(0,0,0,.07);--border-focus: rgba(6,182,212,.4);--text: #0F1228;--text-2: #404870;--text-3: #8890B0;--primary: #0891B2;--primary-dim: rgba(8,145,178,.1);--primary-glow: rgba(8,145,178,.25);--gold: #B45309;--gold-dim: rgba(180,83,9,.1);--green: #059669;--green-dim: rgba(5,150,105,.1);--red: #DC2626;--red-dim: rgba(220,38,38,.08);--blue: #2563EB;--purple: #7C3AED;--shadow: 0 8px 32px rgba(0,0,0,.08);--shadow-sm: 0 2px 10px rgba(0,0,0,.06);--glow-primary: 0 0 20px rgba(8,145,178,.15)}body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;transition:background var(--transition),color var(--transition)}input,button,textarea,select{font-family:var(--font)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input[type=number]{-moz-appearance:textfield}input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.5);cursor:pointer}button{cursor:pointer}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}::-webkit-scrollbar-thumb:hover{background:var(--text-3)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes slideRight{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}@keyframes scaleInCenter{0%{opacity:0;transform:translate(-50%,-50%) scale(.94)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes successPop{0%{transform:scale(1)}40%{transform:scale(1.12)}70%{transform:scale(.97)}to{transform:scale(1)}}@keyframes bounceDot{0%,80%,to{transform:translateY(0)}40%{transform:translateY(-6px)}}.page-enter{animation:slideUp .28s cubic-bezier(.22,1,.36,1) both}.fade-in{animation:fadeIn .2s ease both}.app-root{min-height:100vh;background:var(--bg)}.app-container{max-width:clamp(720px,88vw,1400px);margin:0 auto;min-height:100vh;position:relative}@media(min-width:768px){.app-container{display:flex;align-items:flex-start}.app-main{flex:1;min-width:0;padding-bottom:48px}}@media(max-width:767px){.app-main{padding-bottom:72px}}.app-sidebar{display:none}@media(min-width:768px){.app-root{background:linear-gradient(var(--border),var(--border)) var(--sidebar-right, 220px) 0 / 1px 100% no-repeat,linear-gradient(to right,var(--surface) var(--sidebar-right, 220px),var(--bg) var(--sidebar-right, 220px));transition:background var(--transition)}.app-sidebar{position:sticky;top:0;z-index:1}.app-main{position:relative;z-index:1}.app-sidebar{display:flex;flex-direction:column;width:var(--sidebar-w);min-height:100vh;position:sticky;top:0;background:var(--surface);padding:20px 12px;gap:4px;flex-shrink:0}}.sidebar-logo{display:flex;align-items:center;gap:10px;padding:6px 10px 18px;margin-bottom:4px;border-bottom:1px solid var(--border)}.sidebar-logo-icon{font-size:24px}.sidebar-logo-text{font-size:15px;font-weight:800;color:var(--text);letter-spacing:-.4px}.sidebar-nav{display:flex;flex-direction:column;gap:2px;flex:1;padding-top:8px}.sidebar-nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-md);background:none;border:none;color:var(--text-2);font-size:14px;font-weight:600;cursor:pointer;transition:background .15s ease,color .15s ease,transform .15s ease;text-align:left;width:100%}.sidebar-nav-item:hover{background:var(--surface-2);color:var(--text);transform:translate(2px)}.sidebar-nav-item.active{background:var(--primary-dim);color:var(--primary)}.sidebar-nav-item.active:hover{background:var(--primary-dim);transform:translate(2px)}.sidebar-nav-icon{font-size:16px;width:22px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.sidebar-footer{display:flex;flex-direction:column;gap:4px;padding-top:8px;border-top:1px solid var(--border);margin-top:auto}.sidebar-meta{padding:4px 10px;font-size:9px;color:var(--text-3);letter-spacing:0}.bottom-nav{display:none}@media(max-width:767px){.bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;height:64px;background:var(--surface);border-top:1px solid var(--border);z-index:50;padding-bottom:env(safe-area-inset-bottom,0)}}.bottom-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:none;border:none;color:var(--text-3);padding:8px 0;cursor:pointer;transition:color .15s ease,transform .15s ease;-webkit-tap-highlight-color:transparent}.bottom-nav-item.active{color:var(--primary)}.bottom-nav-item:active{transform:scale(.93)}.bottom-nav-icon{font-size:18px;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}.bottom-nav-item.active .bottom-nav-icon{transform:translateY(-2px) scale(1.1)}.bottom-nav-label{font-size:10px;font-weight:600;letter-spacing:.3px}.mobile-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:40}@media(min-width:768px){.mobile-header{display:none}}.mobile-header-logo{font-size:15px;font-weight:800;color:var(--text);letter-spacing:-.3px}.btn{cursor:pointer;outline:none;border:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease,border-color .15s ease,filter .15s ease;-webkit-tap-highlight-color:transparent}.btn:active{transform:scale(.96)!important}.btn-primary{background:var(--primary);color:#fff;border-radius:var(--radius-md);font-weight:700;letter-spacing:.2px}.btn-primary:hover:not(:disabled){filter:brightness(1.1);box-shadow:0 4px 20px var(--primary-glow);transform:translateY(-1px)}.btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none!important}.btn-primary.success{background:var(--green);animation:successPop .35s ease both}.btn-ghost{background:var(--surface-2);color:var(--text-2);border:1px solid var(--border);border-radius:var(--radius-md)}.btn-ghost:hover{background:var(--surface-3);color:var(--text);border-color:var(--border-focus);transform:translateY(-1px)}.btn-icon{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border);color:var(--text-2);font-size:16px;flex-shrink:0}.btn-icon:hover{background:var(--surface-3);color:var(--text);border-color:var(--border-focus);transform:translateY(-1px)}.btn-dashed{background:transparent;border:1.5px dashed var(--border);border-radius:var(--radius-sm);color:var(--text-3);font-weight:600}.btn-dashed:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-dim);transform:translateY(-1px)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}@media(min-width:768px){.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:var(--border-focus)}}.card-interactive{cursor:pointer}@media(min-width:768px){.card-interactive:hover{border-color:var(--border-focus)}}.stat-chip{display:inline-flex;flex-direction:column;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:8px 14px;min-width:76px;flex-shrink:0;transition:transform .2s ease,box-shadow .2s ease}.stat-chip:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}.toggle-group{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:3px}.toggle-btn{flex:1;padding:6px 8px;border-radius:calc(var(--radius-md) - 3px);background:transparent;border:none;color:var(--text-3);font-size:12px;font-weight:700;transition:background .15s ease,color .15s ease,transform .1s ease}.toggle-btn:hover{color:var(--text-2)}.toggle-btn.active{background:var(--surface);color:var(--primary);box-shadow:var(--shadow-sm)}.input{width:100%;padding:11px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:14px;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.input:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--primary-dim)}.input::placeholder{color:var(--text-3)}.score-card{position:relative;height:84px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 4px 4px;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}.score-card:focus-within{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--primary-dim);transform:translateY(-1px)}.score-card.valid{border-color:#06b6d44d}.history-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;transition:border-color .15s ease,box-shadow .15s ease}.history-item:hover{border-color:var(--border-focus);box-shadow:var(--shadow-sm)}.history-item-row{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;-webkit-tap-highlight-color:transparent}.history-item-detail{background:var(--surface-2);border-top:1px solid var(--border);padding:12px 14px;animation:slideUp .2s ease both}.loading-spinner{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}.loading-dots span{display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;margin:0 2px;animation:bounceDot 1.2s ease infinite}.loading-dots span:nth-child(2){animation-delay:.2s}.loading-dots span:nth-child(3){animation-delay:.4s}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:72px 24px;text-align:center;animation:fadeIn .3s ease both}.empty-state-icon{font-size:52px;margin-bottom:16px;animation:scaleIn .4s cubic-bezier(.34,1.56,.64,1) both}.empty-state-text{color:var(--text-2);font-size:14px}.sheet-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;z-index:100;animation:fadeIn .2s ease both;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.sheet-content{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:20px 18px 32px;width:100%;max-height:75vh;overflow-y:auto;animation:slideUp .25s cubic-bezier(.22,1,.36,1) both}@media(min-width:768px){.sheet-content{border-radius:var(--radius-xl);max-width:480px;margin:auto;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);animation:scaleInCenter .22s cubic-bezier(.22,1,.36,1) both}}