:root{--color-primary:#6e56cf;--color-secondary:#5b8df7;--color-primary-dark:#5a42b5;--color-primary-light:#8b72e0;--gradient-primary:linear-gradient(135deg, #6e56cf 0%, #5b8df7 100%);--gradient-hero:linear-gradient(135deg, #6e56cf 0%, #9b87f5 100%);--color-bg:#f5f7ff;--color-bg-alt:#eef1fb;--color-surface:#fff;--color-card:#fff;--color-text-high:#0f172a;--color-text-medium:#475569;--color-text-low:#94a3bb;--color-text-white:#fff;--color-border:#e2e8f0;--color-divider:#f1f5f9;--color-success:#22c55e;--color-warning:#f59e0b;--color-error:#ef4444;--color-info:#3b82f6;--color-primary-muted:#6e56cf1a;--color-primary-hover:#6e56cf14;--color-primary-pressed:#6e56cf26;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-14:56px;--space-16:64px;--radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-2xl:24px;--radius-3xl:28px;--radius-4xl:32px;--radius-full:9999px;--elevation-0:none;--elevation-1:0 1px 2px #0f172a0f, 0 1px 3px #0f172a1a;--elevation-2:0 2px 4px #0f172a0f, 0 4px 6px #0f172a12;--elevation-3:0 4px 6px #0f172a0d, 0 10px 15px #0f172a1a;--elevation-4:0 10px 15px #0f172a0a, 0 20px 25px #0f172a1a;--elevation-primary:0 8px 24px #6e56cf4d, 0 2px 8px #6e56cf26;--glass-blur:blur(20px) saturate(180%);--glass-bg:#ffffffb8;--glass-border:#fff9;--glass-tint:#6e56cf0a;--font-family:"Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;--font-display:32px;--font-h1:24px;--font-h2:20px;--font-body1:16px;--font-body2:14px;--font-caption:12px;--motion-fast:.15s cubic-bezier(.4, 0, .2, 1);--motion-normal:.25s cubic-bezier(.4, 0, .2, 1);--motion-slow:.35s cubic-bezier(.4, 0, .2, 1);--motion-spring:.4s cubic-bezier(.34, 1.56, .64, 1);--motion-ease-out:.3s cubic-bezier(0, 0, .2, 1);--app-bg:var(--color-bg);--app-text:var(--color-text-high);--app-hint:var(--color-text-low);--app-accent:var(--color-primary);--app-accent-soft:var(--color-primary-light);--app-accent-muted:var(--color-primary-muted);--app-accent-text:#fff;--app-secondary-bg:var(--color-bg-alt);--glass-bg-strong:#fffffff2;--glass-shadow:var(--elevation-2);--glass-shadow-elevated:var(--elevation-3)}*,:before,:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}img,a{-webkit-user-drag:none;-webkit-user-select:none;user-select:none}html{background:var(--color-bg)!important;background-attachment:fixed!important}body{font-family:var(--font-family);color:var(--color-text-high);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-user-select:none;user-select:none;line-height:1.5;font-size:var(--font-body1);margin:0;padding:0;background:0 0!important}input,textarea,[contenteditable]{-webkit-user-select:text!important;user-select:text!important;pointer-events:auto!important}.app-container{background:var(--color-bg);z-index:0;flex-direction:column;min-height:100dvh;max-height:100dvh;display:flex;position:relative;overflow:hidden auto}.page-content{padding:var(--space-5) var(--space-5) 96px;-webkit-overflow-scrolling:touch;flex:1;overflow:hidden auto}.page-header{padding:var(--space-5) var(--space-5) 0;justify-content:space-between;align-items:center;display:flex}.glass-card{background:var(--color-surface);border-radius:var(--radius-2xl);box-shadow:var(--elevation-2);border:1px solid var(--color-border);padding:var(--space-5);transition:var(--motion-normal)}.surface-card{background:var(--color-surface);border-radius:var(--radius-2xl);box-shadow:var(--elevation-1);border:1px solid var(--color-border);padding:var(--space-5)}.card{background:var(--color-card);border-radius:var(--radius-xl);box-shadow:var(--elevation-1);border:1px solid var(--color-border);padding:var(--space-4);transition:box-shadow var(--motion-normal), transform var(--motion-normal)}.card:active{transform:scale(.98)}.card-elevated{box-shadow:var(--elevation-3)}h1,h2,h3,h4,h5,h6{color:var(--color-text-high);margin:0;font-weight:600;line-height:1.3}h1{font-size:var(--font-h1);font-weight:700;line-height:1.33}h2{font-size:var(--font-h2);line-height:1.4}h3{font-size:18px;line-height:1.44}p{margin:0}.text-display{font-size:var(--font-display);letter-spacing:-.5px;font-weight:700;line-height:1.25}.text-h1{font-size:var(--font-h1);font-weight:600;line-height:1.33}.text-h2{font-size:var(--font-h2);font-weight:600;line-height:1.4}.text-body1{font-size:var(--font-body1);font-weight:400;line-height:1.5}.text-body2{font-size:var(--font-body2);font-weight:400;line-height:1.43}.text-caption{font-size:var(--font-caption);font-weight:400;line-height:1.33}.text-primary{color:var(--color-primary)}.text-medium{color:var(--color-text-medium)}.text-low{color:var(--color-text-low)}.text-success{color:var(--color-success)}.text-error{color:var(--color-error)}.btn-primary{justify-content:center;align-items:center;gap:var(--space-2);width:100%;padding:15px var(--space-6);background:var(--gradient-primary);color:var(--color-text-white);border-radius:var(--radius-xl);font-size:var(--font-body1);font-weight:600;font-family:var(--font-family);cursor:pointer;box-shadow:var(--elevation-primary);transition:transform var(--motion-fast), box-shadow var(--motion-fast);-webkit-tap-highlight-color:transparent;letter-spacing:.1px;border:none;outline:none;display:inline-flex}.btn-primary:active{transform:scale(.97);box-shadow:0 4px 12px #6e56cf40}@media (hover:hover){.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 32px #6e56cf66}}.btn-secondary{justify-content:center;align-items:center;gap:var(--space-2);width:100%;padding:14px var(--space-6);background:var(--color-primary-muted);color:var(--color-primary);border-radius:var(--radius-xl);font-size:var(--font-body1);font-weight:600;font-family:var(--font-family);cursor:pointer;transition:all var(--motion-fast);border:1px solid #6e56cf33;outline:none;display:inline-flex}.btn-secondary:active{transform:scale(.97)}.btn-ghost{justify-content:center;align-items:center;gap:var(--space-2);padding:14px var(--space-6);color:var(--color-primary);border-radius:var(--radius-xl);font-size:var(--font-body1);font-weight:600;font-family:var(--font-family);cursor:pointer;background:0 0;border:none;outline:none;display:inline-flex}.btn-icon{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);width:40px;height:40px;color:var(--color-text-medium);cursor:pointer;box-shadow:var(--elevation-1);transition:all var(--motion-fast);outline:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.btn-icon:active{transform:scale(.92)}.progress-track{background:var(--color-primary-muted);border-radius:var(--radius-full);height:6px;overflow:hidden}.progress-fill{background:var(--gradient-primary);border-radius:var(--radius-full);height:100%;transition:width .8s cubic-bezier(.4,0,.2,1)}.chip{align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:var(--font-caption);color:var(--color-text-medium);white-space:nowrap;cursor:pointer;transition:all var(--motion-fast);font-weight:500;display:inline-flex}.chip.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.badge{padding:2px var(--space-2);border-radius:var(--radius-full);justify-content:center;align-items:center;font-size:11px;font-weight:700;line-height:1;display:inline-flex}.badge-primary{background:var(--color-primary);color:#fff}.badge-success{color:var(--color-success);background:#22c55e26}.badge-warning{color:var(--color-warning);background:#f59e0b26}.badge-new{background:var(--color-success);color:#fff;border-radius:var(--radius-full);padding:3px 8px;font-size:11px;font-weight:700}.input-field{width:100%;padding:var(--space-3) var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--font-body1);font-family:var(--font-family);color:var(--color-text-high);transition:border-color var(--motion-fast), box-shadow var(--motion-fast);outline:none}.input-field::placeholder{color:var(--color-text-low)}.input-field:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #6e56cf1f}.input-search{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3BB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");background-position:13px;background-repeat:no-repeat;padding-left:40px}.action-button{padding:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--elevation-1);border-radius:var(--radius-xl);color:var(--color-text-high);cursor:pointer;transition:all var(--motion-normal);align-items:flex-start;gap:var(--space-2);font-family:var(--font-family);flex-direction:column;text-decoration:none;display:flex}.action-button .icon-wrapper{background:var(--color-primary-muted);color:var(--color-primary);padding:var(--space-2);border-radius:var(--radius-md);justify-content:center;align-items:center;display:flex}.action-button span{font-size:13px;font-weight:600}@media (hover:hover){.action-button:hover{box-shadow:var(--elevation-3);transform:translateY(-2px)}}.action-button:active{transform:scale(.96)}.action-button.primary{background:var(--gradient-primary);color:#fff;box-shadow:var(--elevation-primary);border:none;flex-direction:row;grid-column:1/-1;justify-content:center;align-items:center;font-size:16px;font-weight:700}.action-button.primary .icon-wrapper{color:#fff;background:#ffffff40}.quiz-option-button{width:100%;padding:var(--space-4) var(--space-5);margin-bottom:var(--space-3);border-radius:var(--radius-lg);border:1px solid var(--color-border);text-align:left;font-size:var(--font-body1);font-family:var(--font-family);cursor:pointer;background:var(--color-surface);box-shadow:var(--elevation-1);color:var(--color-text-high);transition:all var(--motion-normal);outline:none;display:block}.quiz-option-button:not(:disabled):active{transform:scale(.97)}.quiz-option-button.correct{font-weight:700;border-color:var(--color-success)!important;background:#22c55e14!important}.quiz-option-button.incorrect{border-color:var(--color-error)!important;background:#ef444414!important}.quiz-option-button.disabled{cursor:default;opacity:.5}.quiz-chip-button{padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);border:1px solid var(--color-border);font-size:var(--font-body2);font-family:var(--font-family);cursor:pointer;background:var(--color-surface);color:var(--color-text-high);transition:all var(--motion-normal);box-shadow:var(--elevation-1);outline:none}.quiz-chip-button:not(:disabled):active{transform:scale(.95)}.quiz-chip-button.correct{font-weight:700;border-color:var(--color-success)!important;background:#22c55e14!important}.quiz-chip-button.incorrect{border-color:var(--color-error)!important;background:#ef444414!important}.quiz-chip-button.disabled{cursor:default;opacity:.5}.flip-card{perspective:1000px;cursor:pointer;width:100%;min-height:300px;max-height:60vh;transition:transform var(--motion-normal);background-color:#0000;flex-direction:column;flex:1;display:flex}.flip-card:active{transform:scale(1.02)translateY(-4px)}.study-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-2xl);box-shadow:var(--elevation-3);padding:var(--space-8) var(--space-6);transition:box-shadow var(--motion-normal)}.flip-card-inner{text-align:center;width:100%;transform-style:preserve-3d;flex:1;transition:transform .6s cubic-bezier(.4,0,.2,1);position:relative}.flip-card.flipped .flip-card-inner{transform:rotateY(180deg)}.flip-card-front,.flip-card-back{backface-visibility:hidden;flex-direction:column;display:flex;position:absolute;inset:0}.flip-card-back{transform:rotateY(180deg)}.markdown-body{color:var(--color-text-high);font-size:var(--font-body1);line-height:1.7}.markdown-body h1,.markdown-body h2,.markdown-body h3{margin-top:var(--space-6);margin-bottom:var(--space-3);font-weight:700;line-height:1.3}.markdown-body h1{color:var(--color-primary);font-size:1.8em}.markdown-body h2{border-bottom:1px solid var(--color-border);padding-bottom:.3em;font-size:1.4em}.markdown-body h3{font-size:1.2em}.markdown-body p,.markdown-body ul,.markdown-body ol{margin-top:0;margin-bottom:var(--space-2)}.markdown-body p:last-child{margin-bottom:0}.markdown-body blockquote{margin:var(--space-6) 0;padding:var(--space-4) var(--space-5);color:var(--color-text-high);background:var(--color-primary-muted);border:1px solid #6e56cf33;border-left:4px solid var(--color-primary);border-radius:var(--radius-lg);font-size:1em;font-weight:500}.markdown-body blockquote p:last-child{margin-bottom:0}.markdown-body ul,.markdown-body ol{padding-left:1.5em}.markdown-body li{margin-bottom:var(--space-1)}.markdown-body li::marker{color:var(--color-primary);font-weight:700}.markdown-body strong{font-weight:700}.markdown-body em{color:var(--color-primary);font-style:italic;font-weight:500}.markdown-body code{background:var(--color-primary-muted);border-radius:var(--radius-xs);color:var(--color-primary);border:1px solid #6e56cf26;padding:.2em .45em;font-family:Consolas,Monaco,monospace;font-size:85%}.markdown-body pre{padding:var(--space-4);background:var(--color-text-high);border-radius:var(--radius-lg);color:#e2e8f0;font-size:85%;line-height:1.5;overflow:auto;box-shadow:inset 0 2px 8px #0000004d}.markdown-body pre code{color:inherit;background:0 0;border:none;padding:0}@keyframes shimmer{0%{background-position:-800px 0}to{background-position:800px 0}}.skeleton-item{border-radius:var(--radius-xl);background:var(--color-bg-alt);border:1px solid var(--color-border);height:80px;margin-bottom:var(--space-4);position:relative;overflow:hidden}.skeleton-item:before{content:"";background:linear-gradient(90deg,#0000 0%,#ffffffb3 50%,#0000 100%) 0 0/800px 100%;animation:1.8s linear infinite shimmer;position:absolute;inset:0}.skeleton-text{border-radius:var(--radius-full);background:var(--color-bg-alt);height:14px;position:relative;overflow:hidden}.skeleton-text:before{content:"";background:linear-gradient(90deg,#0000 0%,#ffffffb3 50%,#0000 100%) 0 0/800px 100%;animation:1.8s linear infinite shimmer;position:absolute;inset:0}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}@keyframes slideInBottom{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes blob-float{0%{transform:translate(0)scale(1)}50%{transform:translate(3%,5%)scale(1.05)}to{transform:translate(-2%,-3%)scale(.97)}}@keyframes glossy-sweep{0%{left:-150%}15%{left:200%}to{left:200%}}.animate-fadeInUp{animation:fadeInUp .4s var(--motion-ease-out) both}.animate-fadeIn{animation:fadeIn .3s var(--motion-ease-out) both}.animate-scaleIn{animation:scaleIn .3s var(--motion-spring) both}.delay-1{animation-delay:50ms}.delay-2{animation-delay:.1s}.delay-3{animation-delay:.15s}.delay-4{animation-delay:.2s}.dashboard-grid{gap:var(--space-3);margin-top:var(--space-5);grid-template-columns:1fr 1fr;display:grid}.ambient-bg{z-index:-10;pointer-events:none;background:var(--color-bg);position:fixed;inset:0;overflow:hidden}.ambient-bg:before{content:"";background:radial-gradient(#6e56cf14 0%,#0000 70%);border-radius:50%;width:60%;height:50%;animation:14s ease-in-out infinite alternate blob-float;position:absolute;top:-20%;right:-20%}.ambient-bg:after{content:"";background:radial-gradient(#5b8df712 0%,#0000 70%);border-radius:50%;width:50%;height:40%;animation:18s ease-in-out infinite alternate-reverse blob-float;position:absolute;bottom:5%;left:-15%}.empty-state{padding:var(--space-10) var(--space-6);text-align:center;justify-content:center;align-items:center;gap:var(--space-3);flex-direction:column;display:flex}.empty-state-icon{border-radius:var(--radius-2xl);background:var(--color-primary-muted);width:64px;height:64px;color:var(--color-primary);margin-bottom:var(--space-2);justify-content:center;align-items:center;display:flex}.stat-item{padding:var(--space-4);background:var(--color-surface);border-radius:var(--radius-xl);border:1px solid var(--color-border);box-shadow:var(--elevation-1);justify-content:center;align-items:center;gap:var(--space-1);text-align:center;flex-direction:column;display:flex}.stat-value{color:var(--color-text-high);font-size:24px;font-weight:700;line-height:1}.stat-label{font-size:var(--font-caption);color:var(--color-text-low);font-weight:500}.streak-dots{gap:var(--space-1);align-items:center;display:flex}.streak-dot{background:var(--color-border);border-radius:50%;width:8px;height:8px}.streak-dot.active{background:var(--color-primary)}.streak-dot.today{background:var(--color-primary);ring:2px solid #6e56cf4d;box-shadow:0 0 0 3px #6e56cf26}.section-header{margin-bottom:var(--space-4);justify-content:space-between;align-items:center;display:flex}.section-title{color:var(--color-text-high);font-size:18px;font-weight:600}.section-action{font-size:var(--font-body2);color:var(--color-primary);cursor:pointer;font-weight:600;font-family:var(--font-family);background:0 0;border:none;padding:0}.bottom-nav-container{z-index:100;pointer-events:none;width:100%;position:fixed;bottom:0;left:0}.bottom-nav{-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--color-border,#e2e8f0);padding:8px 0 max(12px, env(safe-area-inset-bottom));pointer-events:auto;background:#fffffff5;justify-content:space-around;align-items:center;display:flex;position:relative}.nav-item{color:var(--color-text-low,#94a3bb);-webkit-tap-highlight-color:transparent;transition:color var(--motion-fast,.15s ease), transform .2s cubic-bezier(.34, 1.56, .64, 1);cursor:pointer;background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:3px;padding:4px 0;font-family:inherit;text-decoration:none;display:flex}.nav-item:active{transform:scale(.9)}.nav-item.active{color:var(--color-primary,#6e56cf)}.nav-icon-wrapper{width:28px;height:28px;transition:background var(--motion-fast,.15s ease), transform .2s cubic-bezier(.34, 1.56, .64, 1);border-radius:8px;justify-content:center;align-items:center;display:flex}.nav-item.active .nav-icon-wrapper{background:#6e56cf1a;transform:translateY(-1px)}.nav-label{letter-spacing:.1px;transition:color var(--motion-fast,.15s ease);font-size:10px;font-weight:500;line-height:1}.nav-ai-btn{cursor:pointer;-webkit-tap-highlight-color:transparent;color:var(--color-text-low,#94a3bb);background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:3px;padding:0;font-family:inherit;text-decoration:none;transition:transform .2s cubic-bezier(.34,1.56,.64,1);display:flex}.nav-ai-btn:active{transform:scale(.9)}.nav-ai-btn.active{color:var(--color-primary,#6e56cf)}.nav-ai-icon{color:#fff;background:linear-gradient(135deg,#6e56cf 0%,#5b8df7 100%);border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;display:flex;transform:translateY(-8px);box-shadow:0 4px 16px #6e56cf66,0 2px 6px #6e56cf33}.nav-ai-btn:active .nav-ai-icon{transform:translateY(-8px)scale(.9);box-shadow:0 2px 8px #6e56cf4d,0 1px 3px #6e56cf26}.nav-ai-btn .nav-label{margin-top:-4px}.nav-ai-btn.active .nav-label{color:var(--color-primary,#6e56cf)}
