@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";:root{--bg:#06080f;--bg2:#0c0f1a;--bg3:#111525;--border:#ffffff0f;--border2:#ffffff1a;--green:#39ff6a;--green-dim:#39ff6a1f;--green-glow:#39ff6a4d;--blue:#1a6bff;--blue-dim:#1a6bff1f;--orange:#ff8c3b;--purple:#a855f7;--text:#f0f2ff;--text2:#7c82a0;--text3:#4a5070;--card:#0e1220;--card2:#131829;--success:#39ff6a;--error:#ef4444;--warning:#ff8c3b;--font:"Inter", system-ui, -apple-system, sans-serif;--font-heading:"Inter", system-ui, -apple-system, sans-serif;--font-mono:"DM Sans", monospace;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--shadow-card:0 4px 24px #0006;--shadow-glow:0 0 40px #39ff6a14}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100vh}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--bg3);border-radius:3px}.btn-primary{background:var(--green);color:#000;border-radius:var(--radius-md);font-family:var(--font);cursor:pointer;border:none;align-items:center;gap:6px;padding:11px 22px;font-size:13.5px;font-weight:700;text-decoration:none;transition:all .15s;display:flex}.btn-primary:hover{background:#4dff7c;transform:translateY(-1px);box-shadow:0 8px 24px #39ff6a40}.btn-ghost{color:var(--text2);border:1px solid var(--border2);border-radius:var(--radius-md);font-family:var(--font);cursor:pointer;background:0 0;align-items:center;gap:6px;padding:11px 20px;font-size:13.5px;font-weight:500;transition:all .15s;display:flex}.btn-ghost:hover{background:var(--bg3);color:var(--text);border-color:var(--border2)}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}.animate-in{animation:.4s forwards fadeUp}.page-layout{min-height:100vh;display:flex}.sidebar{background:var(--bg2);border-right:1px solid var(--border);z-index:100;flex-direction:column;width:240px;min-height:100vh;display:flex;position:fixed;top:0;bottom:0;left:0}.sidebar-logo{border-bottom:1px solid var(--border);align-items:center;gap:10px;padding:28px 24px 24px;display:flex}.sidebar-logo-icon{background:var(--green);width:36px;height:36px;font-family:var(--font-heading);color:#000;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;font-size:18px;font-weight:800;display:flex}.sidebar-logo-text{flex-direction:column;gap:0;display:flex}.sidebar-logo-text span:first-child{font-family:var(--font-heading);color:var(--text);font-size:14px;font-weight:700;line-height:1.1}.sidebar-logo-text span:last-child{color:var(--text3);text-transform:uppercase;letter-spacing:1.5px;font-size:10px}.sidebar-nav{flex-direction:column;flex:1;gap:2px;padding:20px 12px;display:flex}.sidebar-nav-label{text-transform:uppercase;letter-spacing:2px;color:var(--text3);padding:12px 12px 6px;font-size:9px;font-weight:600}.sidebar-nav-item{cursor:pointer;color:var(--text2);border-radius:10px;align-items:center;gap:10px;padding:10px 12px;font-size:13.5px;font-weight:500;text-decoration:none;transition:all .15s;display:flex}.sidebar-nav-item:hover{background:var(--bg3);color:var(--text)}.sidebar-nav-item.active{background:var(--green-dim);color:var(--green);border:1px solid #39ff6a26}.sidebar-nav-item .icon{opacity:.7;flex-shrink:0;width:18px;height:18px}.sidebar-nav-item.active .icon{opacity:1}.sidebar-nav-badge{background:var(--green);color:#000;border-radius:20px;margin-left:auto;padding:2px 6px;font-size:10px;font-weight:700}.sidebar-footer{border-top:1px solid var(--border);padding:16px 12px}.sidebar-user{cursor:pointer;border-radius:10px;align-items:center;gap:10px;padding:10px 12px;transition:background .15s;display:flex}.sidebar-user:hover{background:var(--bg3)}.sidebar-avatar{background:linear-gradient(135deg, var(--blue), var(--purple));width:34px;height:34px;font-family:var(--font-heading);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:13px;font-weight:700;display:flex}.sidebar-user-info{flex:1;overflow:hidden}.sidebar-user-name{white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:600;overflow:hidden}.sidebar-user-role{color:var(--text3);font-size:11px}.main-content{flex-direction:column;flex:1;min-height:100vh;margin-left:240px;display:flex}.topbar{border-bottom:1px solid var(--border);background:var(--bg);z-index:50;align-items:center;gap:16px;height:64px;padding:0 32px;display:flex;position:sticky;top:0}.topbar-title{font-family:var(--font-heading);font-size:17px;font-weight:700}.topbar-right{align-items:center;gap:12px;margin-left:auto;display:flex}.topbar-streak{color:var(--orange);background:#ff8c3b1f;border:1px solid #ff8c3b33;border-radius:20px;align-items:center;gap:6px;padding:6px 12px;font-size:13px;font-weight:600;display:flex}.topbar-notif{background:var(--bg3);border:1px solid var(--border);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;display:flex;position:relative}.topbar-notif-dot{background:var(--green);border:2px solid var(--bg);border-radius:50%;width:8px;height:8px;position:absolute;top:6px;right:6px}.page-content{flex-direction:column;flex:1;gap:28px;padding:32px;display:flex}.grid-3{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.grid-2-1{grid-template-columns:1fr 340px;gap:24px;display:grid}.stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;flex-direction:column;gap:12px;padding:20px 22px;transition:all .2s;display:flex;position:relative;overflow:hidden}.stat-card:before{content:"";background:0 0;height:2px;transition:background .2s;position:absolute;top:0;left:0;right:0}.stat-card:hover{border-color:var(--border2);transform:translateY(-2px)}.stat-card:hover:before{background:var(--green)}.stat-header{justify-content:space-between;align-items:flex-start;display:flex}.stat-icon{border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;font-size:18px;display:flex}.stat-arrow{color:var(--text3);align-items:center;gap:4px;font-size:11px;display:flex}.stat-arrow.up{color:var(--green)}.stat-value{font-family:var(--font-heading);color:var(--text);font-size:30px;font-weight:800;line-height:1}.stat-label{color:var(--text2);font-size:12px}.stat-bar{background:var(--bg3);border-radius:2px;height:4px;overflow:hidden}.stat-bar-fill{background:var(--green);border-radius:2px;height:100%}.section-header{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.section-title{font-family:var(--font-heading);align-items:center;gap:8px;font-size:16px;font-weight:700;display:flex}.section-dot{background:var(--green);border-radius:50%;width:7px;height:7px}.section-link{color:var(--text3);cursor:pointer;font-size:12px;text-decoration:none;transition:color .15s}.section-link:hover{color:var(--green)}.continue-cards{flex-direction:column;gap:10px;margin-top:12px;display:flex}.continue-card{background:var(--card2);border:1px solid var(--border);cursor:pointer;border-radius:14px;align-items:center;gap:14px;padding:16px 18px;transition:all .15s;display:flex}.continue-card:hover{border-color:var(--border2);background:var(--bg3)}.continue-icon{border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:18px;display:flex}.continue-info{flex:1}.continue-name{margin-bottom:2px;font-size:14px;font-weight:600}.continue-meta{color:var(--text2);font-size:12px}.continue-progress{flex-direction:column;flex-shrink:0;align-items:flex-end;gap:4px;display:flex}.continue-pct{font-family:var(--font-heading);color:var(--green);font-size:14px;font-weight:700}.mini-bar{background:var(--bg3);border-radius:2px;width:60px;height:3px;overflow:hidden}.mini-bar-fill{background:var(--green);border-radius:2px;height:100%}.right-panel{flex-direction:column;gap:16px;display:flex}.perf-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px}.perf-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.perf-title{color:var(--text2);text-transform:uppercase;letter-spacing:.5px;font-size:13px;font-weight:600}.perf-period{background:var(--bg3);border:1px solid var(--border);color:var(--text2);cursor:pointer;border-radius:6px;padding:3px 8px;font-size:11px}.perf-circle-wrap{justify-content:center;margin-bottom:20px;display:flex}.perf-circle{width:120px;height:120px;position:relative}.perf-circle svg{transform:rotate(-90deg)}.perf-center{flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.perf-pct{font-family:var(--font-heading);color:var(--text);font-size:26px;font-weight:800}.perf-pct-label{color:var(--text3);font-size:10px}.perf-rows{flex-direction:column;gap:8px;display:flex}.perf-row{align-items:center;gap:8px;font-size:12px;display:flex}.perf-dot{border-radius:50%;flex-shrink:0;width:6px;height:6px}.perf-row-label{color:var(--text2);flex:1}.perf-row-val{color:var(--text);font-weight:600}.streak-card{border-radius:var(--radius-lg);background:linear-gradient(135deg,#ff8c3b14 0%,#ff3c3c0d 100%);border:1px solid #ff8c3b26;padding:20px 22px}.streak-header{align-items:center;gap:8px;margin-bottom:12px;display:flex}.streak-emoji{font-size:22px}.streak-label{color:var(--text2);text-transform:uppercase;letter-spacing:.5px;font-size:12px;font-weight:600}.streak-count{font-family:var(--font-heading);color:var(--orange);margin-bottom:4px;font-size:36px;font-weight:800;line-height:1}.streak-sub{color:var(--text2);margin-bottom:14px;font-size:12px}.streak-days{gap:6px;display:flex}.streak-day{flex-direction:column;flex:1;align-items:center;gap:4px;display:flex}.streak-day-label{color:var(--text3);text-transform:uppercase;font-size:9px}.streak-day-dot{border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:11px;display:flex}.streak-day-dot.done{background:var(--orange);color:#000}.streak-day-dot.today{background:var(--bg3);border:2px solid var(--orange);color:var(--orange)}.streak-day-dot.miss{background:var(--bg3);color:var(--text3)}.topics-grid{grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px;display:grid}.topic-card{background:var(--card);border:1px solid var(--border);cursor:pointer;border-radius:14px;padding:16px;transition:all .2s;position:relative;overflow:hidden}.topic-card:hover{border-color:var(--border2);transform:translateY(-2px)}.topic-icon-wrap{margin-bottom:10px;font-size:22px}.topic-name{color:var(--text);margin-bottom:2px;font-size:13px;font-weight:600}.topic-count{color:var(--text3);font-size:11px}.topic-badge{background:var(--green-dim);color:var(--green);text-transform:uppercase;border-radius:6px;padding:2px 6px;font-size:9px;font-weight:600;position:absolute;top:10px;right:10px}.hero-banner{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-xl);align-items:stretch;min-height:200px;display:flex;position:relative;overflow:hidden}.hero-content{z-index:2;flex-direction:column;flex:1;justify-content:center;gap:12px;padding:36px 40px;display:flex;position:relative}.hero-badge{background:var(--green-dim);color:var(--green);text-transform:uppercase;letter-spacing:1px;border:1px solid #39ff6a33;border-radius:20px;align-items:center;gap:6px;width:fit-content;padding:4px 12px;font-size:11px;font-weight:600;display:inline-flex}.hero-title{font-family:var(--font-heading);color:var(--text);font-size:36px;font-weight:800;line-height:1.1}.hero-title span{color:var(--green)}.hero-sub{color:var(--text2);max-width:420px;font-size:14px;line-height:1.6}.hero-actions{gap:10px;margin-top:4px;display:flex}.hero-visual{flex-shrink:0;justify-content:center;align-items:flex-end;width:280px;display:flex;position:relative;overflow:hidden}.hero-glow{pointer-events:none;background:radial-gradient(circle,#39ff6a26 0%,#0000 70%);width:200px;height:200px;position:absolute;bottom:-20px;left:50%;transform:translate(-50%)}.dida-bar{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);align-items:center;gap:16px;padding:20px 24px;display:flex}.dida-robot{background:var(--bg3);border:1px solid var(--border2);border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;font-size:24px;display:flex}.dida-message{flex:1}.dida-message p{color:var(--text2);font-size:13.5px;line-height:1.5}.dida-message strong{color:var(--green);font-weight:600}.dida-sig{font-family:var(--font-heading);color:var(--text3);flex-shrink:0;font-size:13px;font-weight:700}.hamburger{background:var(--bg3);border:1px solid var(--border);cursor:pointer;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:none}.sidebar-overlay{z-index:99;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0009;display:none;position:fixed;inset:0}.sidebar-overlay.open{display:block}@media (width>=769px) and (width<=1024px){.sidebar{width:64px;overflow:hidden}.sidebar-logo-text,.sidebar-nav-label,.sidebar-nav-item span:not(.icon):not(.nav-badge),.nav-badge,.sidebar-user-info,.sidebar-footer svg{display:none}.sidebar-logo{justify-content:center;padding:20px 14px}.sidebar-nav{align-items:center;padding:16px 8px}.sidebar-nav-item,.sidebar-user{justify-content:center;padding:10px}.main-content{margin-left:64px}.topbar{padding:0 20px}.page-content{padding:20px}.grid-2-1{grid-template-columns:1fr}.right-panel{grid-template-columns:1fr 1fr;gap:16px;display:grid}}@media (width<=768px){body{display:block}.sidebar{z-index:200;width:240px;transition:transform .25s;transform:translate(-100%);background:#0c0f1a!important}.sidebar.open{transform:translate(0)}.sidebar-logo-text,.sidebar-nav-label,.sidebar-nav-badge,.sidebar-user-info,.sidebar-footer svg{display:flex!important}.sidebar-nav-item span:not(.icon){color:#fff!important}.sidebar-nav-item{justify-content:flex-start;padding:10px 12px;color:#fff!important}.sidebar-nav-item:hover,.sidebar-nav-item.active{background:var(--bg3)!important;color:#fff!important}.sidebar-nav-item:hover span:not(.icon),.sidebar-nav-item.active span:not(.icon),.sidebar-nav-label,.sidebar-user-name{color:#fff!important}.sidebar-user-role{color:#9ca3af!important}.sidebar-user-info{color:#fff!important}.sidebar-user{background:var(--bg2);color:#fff!important}.sidebar-footer{background:var(--bg2);margin:0 -12px;padding:16px}.sidebar-logo{justify-content:flex-start;padding:24px 20px}.sidebar-nav{align-items:stretch;padding:16px 12px}.main-content{margin-left:0}.hamburger{display:flex}.topbar{height:56px;padding:0 16px}.topbar-title{font-size:14px}.topbar-streak{display:none}.page-content{gap:18px;padding:16px}.hero-banner{flex-direction:column;min-height:auto}.hero-visual{display:none}.hero-content{padding:24px 20px}.hero-title{font-size:26px}.hero-sub{font-size:13px}.hero-actions{flex-wrap:wrap}.btn-ghost{display:none}.grid-3{grid-template-columns:1fr;gap:10px}.grid-2-1{grid-template-columns:1fr;gap:18px}.right-panel{flex-direction:column;gap:14px;display:flex}.topics-grid{grid-template-columns:repeat(2,1fr)}.dida-bar{flex-direction:column;align-items:flex-start;gap:12px;padding:16px}.btn-primary{padding:10px 18px;font-size:13px}}