:root{--primary: #4F46E5;--primary-dark: #4338CA;--primary-deep: #1E1B4B;--accent: #F59E0B;--success: #10B981;--danger: #EF4444;--info: #0EA5E9;--bg: #F4F5FB;--surface: #FFFFFF;--border: #E5E7EB;--text: #111827;--text-2: #6B7280;--radius: 12px;--sidebar-w: 240px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px)}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{font-family:Segoe UI,Inter,-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14px;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;border:none;background:none;cursor:pointer;color:inherit}input,select,textarea{font:inherit}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}.card-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border);gap:10px;flex-wrap:wrap}.section-title{font-weight:700;font-size:15px}.link{color:var(--primary);font-weight:600;font-size:12.5px;cursor:pointer;background:none;border:none}.page-title{font-size:22px;font-weight:700}.page-sub{color:var(--text-2);margin-top:3px;font-size:13px}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.kpi{padding:18px}.kpi .k-ico{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:12px}.kpi .k-val{font-size:26px;font-weight:800}.kpi .k-lab{color:var(--text-2);font-size:12.5px;margin-top:2px}.kpi .k-trend{font-size:11.5px;font-weight:600;margin-top:6px}.up{color:var(--success)}.down{color:var(--danger)}.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap}.b-green{background:#d1fae5;color:#065f46}.b-amber{background:#fef3c7;color:#92400e}.b-red{background:#fee2e2;color:#991b1b}.b-blue{background:#e0e7ff;color:#3730a3}.b-gray{background:#f3f4f6;color:#374151}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:9px;font-weight:600;font-size:13.5px;border:none;cursor:pointer;transition:filter .15s,transform .05s}.btn:active{transform:scale(.98)}.btn:hover{filter:brightness(1.05)}.btn-primary{background:var(--primary);color:#fff}.btn-ghost{background:#fff;border:1px solid var(--border);color:var(--text)}.btn-amber{background:var(--accent);color:#fff}.btn-danger{background:var(--danger);color:#fff}.progress{height:8px;background:#eef0f6;border-radius:999px;overflow:hidden}.progress>div{height:100%;border-radius:999px;background:var(--primary);transition:width .4s ease}table.tbl{width:100%;border-collapse:collapse;font-size:13px}.tbl th{text-align:left;color:var(--text-2);font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;padding:12px 16px;border-bottom:1px solid var(--border);background:#fafafe}.tbl td{padding:13px 16px;border-bottom:1px solid #F1F2F7;vertical-align:middle}.tbl tr:last-child td{border-bottom:none}.cell-user{display:flex;align-items:center;gap:10px}.cell-user b{display:block;font-size:13px}.cell-user span{color:var(--text-2);font-size:11.5px}.avatar{width:38px;height:38px;border-radius:50%;color:#fff;font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}.avatar.sm{width:32px;height:32px;font-size:11px}.chip{background:#fff;border:1px solid var(--border);border-radius:9px;padding:9px 14px;font-size:12.5px;color:#374151;cursor:pointer;white-space:nowrap}.chip.on{border-color:var(--primary);background:#eef0ff;color:var(--primary);font-weight:600}.chips{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.field{margin-bottom:16px}.field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:7px;color:#374151}.input{width:100%;border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;font-size:14px;background:#fff;color:var(--text);outline:none}.input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #e0e7ff}.search-input{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:9px 14px;color:var(--text);font-size:13px;width:100%;max-width:360px;outline:none}.search-input:focus{border-color:var(--primary)}.icon-btn{width:38px;height:38px;border-radius:10px;background:var(--bg);border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;font-size:16px;position:relative;cursor:pointer}.icon-btn .dot{position:absolute;top:7px;right:8px;width:8px;height:8px;background:var(--danger);border-radius:50%;border:2px solid #fff}.empty{text-align:center;padding:40px 20px;color:var(--text-2)}.empty .e-ico{font-size:40px;margin-bottom:10px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.grid-32{display:grid;grid-template-columns:3fr 2fr;gap:16px}.grid-23{display:grid;grid-template-columns:2fr 1fr;gap:16px}.bars{display:flex;align-items:flex-end;gap:14px;height:150px;padding:10px 6px 0}.bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}.bar>div{width:70%;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#6366f1,#4f46e5);min-height:4px}.bar span{font-size:10.5px;color:var(--text-2)}.donut{border-radius:50%;position:relative}.donut:after{content:"";position:absolute;inset:24%;background:#fff;border-radius:50%}.legend{font-size:12px;color:var(--text-2);display:flex;flex-direction:column;gap:8px}.legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:8px}.toast{position:fixed;bottom:calc(24px + var(--safe-bottom));left:50%;transform:translate(-50%);background:var(--primary-deep);color:#fff;padding:12px 22px;border-radius:12px;font-size:13.5px;font-weight:600;z-index:1000;box-shadow:0 10px 30px #1e1b4b59;animation:toast-in .25s ease}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%)}}@media(max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}.grid-2,.grid-3,.grid-32,.grid-23{grid-template-columns:1fr}.hide-mobile{display:none!important}}@media(min-width:901px){.hide-desktop{display:none!important}}:root{--ease: cubic-bezier(.22, 1, .36, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1)}@keyframes fade-up{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes scale-in{0%{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:none}}@keyframes slide-right{0%{opacity:0;transform:translate(-14px)}to{opacity:1;transform:none}}@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12);opacity:1}to{transform:scale(1)}}@keyframes pulse-dot{0%,to{box-shadow:0 0 #ef44448c}70%{box-shadow:0 0 0 7px #ef444400}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes grow-x{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes grow-y{0%{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-3px)}40%,60%{transform:translate(3px)}}@keyframes glow{0%,to{box-shadow:0 0 #4f46e500}50%{box-shadow:0 0 0 4px #4f46e51f}}.content>*{animation:fade-up .45s var(--ease) both}.card{animation:fade-up .5s var(--ease) both;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .2s}.kpis>.card:nth-child(1){animation-delay:.04s}.kpis>.card:nth-child(2){animation-delay:.1s}.kpis>.card:nth-child(3){animation-delay:.16s}.kpis>.card:nth-child(4){animation-delay:.22s}.grid-2>.card:nth-child(1),.grid-3>.card:nth-child(1),.grid-32>.card:nth-child(1),.grid-23>.card:nth-child(1){animation-delay:.06s}.grid-2>.card:nth-child(2),.grid-3>.card:nth-child(2),.grid-32>.card:nth-child(2),.grid-23>.card:nth-child(2){animation-delay:.12s}.grid-3>.card:nth-child(3){animation-delay:.18s}.grid-3>.card:nth-child(n+4),.grid-2>.card:nth-child(n+3){animation-delay:.24s}.card:hover{box-shadow:0 8px 26px #1e1b4b14}a.card:hover,.course-card:hover,.cat-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px #1e1b4b1f}.tbl tbody tr{animation:fade-in .4s var(--ease) both;transition:background .15s}.tbl tbody tr:nth-child(1){animation-delay:.03s}.tbl tbody tr:nth-child(2){animation-delay:.06s}.tbl tbody tr:nth-child(3){animation-delay:.09s}.tbl tbody tr:nth-child(4){animation-delay:.12s}.tbl tbody tr:nth-child(5){animation-delay:.15s}.tbl tbody tr:nth-child(6){animation-delay:.18s}.tbl tbody tr:nth-child(n+7){animation-delay:.21s}.tbl tbody tr:hover td{background:#fafafe}.chips>*{animation:slide-right .35s var(--ease) both}.chips>*:nth-child(2){animation-delay:.04s}.chips>*:nth-child(3){animation-delay:.08s}.chips>*:nth-child(4){animation-delay:.12s}.chips>*:nth-child(n+5){animation-delay:.16s}.chip{transition:background .2s,border-color .2s,color .2s,transform .15s var(--ease-spring)}.chip:hover{transform:translateY(-1px);border-color:#c7cbe8}.chip.on{animation:pop .3s var(--ease-spring)}.kpi .k-val{animation:pop .55s var(--ease-spring) both;animation-delay:.25s}.kpi .k-ico{transition:transform .3s var(--ease-spring)}.kpi:hover .k-ico{transform:scale(1.12) rotate(-6deg)}.btn{transition:filter .15s,transform .15s var(--ease-spring),box-shadow .2s;will-change:transform}.btn:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:0 6px 16px #1e1b4b24}.btn:active{transform:scale(.96);box-shadow:none}.btn-primary:hover{box-shadow:0 8px 20px #4f46e552}.btn[disabled]{transform:none!important;box-shadow:none!important}.link{transition:color .15s,transform .15s;display:inline-block}.link:hover{transform:translate(2px)}.icon-btn{transition:background .2s,transform .2s var(--ease-spring)}.icon-btn:hover{background:#eef0ff;transform:scale(1.08)}.icon-btn .dot{animation:pulse-dot 1.8s ease-out infinite}.input,.search-input{transition:border-color .2s,box-shadow .25s,transform .2s}.input:focus,.search-input:focus{transform:translateY(-1px)}.progress>div{transform-origin:left;animation:grow-x .9s var(--ease) both;animation-delay:.2s;transition:width .6s var(--ease),background .3s}.hbar{transform-origin:left;animation:grow-x .9s var(--ease) both}.bars .bar>div,.bars .duo>div{transform-origin:bottom;animation:grow-y .8s var(--ease) both}.bars .bar:nth-child(2)>div,.bars .bar:nth-child(2) .duo>div{animation-delay:.08s}.bars .bar:nth-child(3)>div,.bars .bar:nth-child(3) .duo>div{animation-delay:.16s}.bars .bar:nth-child(4)>div,.bars .bar:nth-child(4) .duo>div{animation-delay:.24s}.bars .bar:nth-child(5)>div,.bars .bar:nth-child(5) .duo>div{animation-delay:.32s}.bars .bar:nth-child(6)>div,.bars .bar:nth-child(6) .duo>div{animation-delay:.4s}.donut{animation:scale-in .7s var(--ease-spring) both;animation-delay:.2s}.badge{transition:transform .15s var(--ease-spring)}.badge:hover{transform:scale(1.06)}.avatar{transition:transform .25s var(--ease-spring),box-shadow .25s}.avatar:hover{transform:scale(1.08);box-shadow:0 4px 14px #1e1b4b33}.toast{animation:toast-in .35s var(--ease-spring)}.modal-backdrop{animation:fade-in .2s ease both}.modal{animation:scale-in .3s var(--ease-spring) both}.menu{animation:scale-in .22s var(--ease-spring) both;transform-origin:top right}.empty .e-ico{animation:float 3s ease-in-out infinite;display:inline-block}.err{animation:shake .5s var(--ease) both}.ok{animation:fade-up .4s var(--ease) both}.nav-item{transition:background .2s,color .2s,transform .2s var(--ease-spring),padding-left .2s}.nav-item:hover{transform:translate(3px)}.nav-item .ico{transition:transform .3s var(--ease-spring);display:inline-block}.nav-item:hover .ico,.nav-item.active .ico{transform:scale(1.18)}.nav-item.active{animation:glow 1.6s ease-in-out 1}.nav-badge{animation:pop .4s var(--ease-spring) both}.user-card{transition:background .2s,transform .2s}.user-card:hover{background:#ffffff1a}.m-tab{transition:color .2s,transform .2s var(--ease-spring)}.m-tab.on div{animation:pop .4s var(--ease-spring)}.logo-mark{transition:transform .4s var(--ease-spring),box-shadow .3s}.logo:hover .logo-mark{transform:rotate(-8deg) scale(1.08);box-shadow:0 6px 18px #6366f173}.lesson{transition:background .2s,border-color .2s,padding-left .2s}.lesson:hover:not(.locked){padding-left:22px}.check{transition:background .25s,transform .25s var(--ease-spring)}.lesson.done .check{animation:pop .45s var(--ease-spring)}.tab{transition:color .2s,border-color .25s;position:relative}.tab.active{animation:fade-in .3s}.tab-body{animation:fade-up .35s var(--ease) both}.bubble-row{animation:scale-in .3s var(--ease-spring) both;transform-origin:bottom left}.bubble-row.mine{transform-origin:bottom right}.conv{transition:background .2s,transform .2s}.conv:hover{transform:translate(2px)}.option{transition:border-color .2s,background .2s,transform .15s var(--ease-spring);animation:slide-right .35s var(--ease) both}.option:nth-child(2){animation-delay:.04s}.option:nth-child(3){animation-delay:.08s}.option:nth-child(4){animation-delay:.12s}.option:nth-child(5){animation-delay:.16s}.option:hover{transform:translate(3px)}.option.selected{animation:pop .3s var(--ease-spring)}.qdot{transition:background .2s,color .2s,transform .15s var(--ease-spring)}.qdot:hover{transform:scale(1.15)}.qdot.d-cur{animation:pop .3s var(--ease-spring)}.r-emoji{animation:pop .7s var(--ease-spring) both;display:inline-block}.r-score{animation:pop .6s var(--ease-spring) both;animation-delay:.15s}.r-row{animation:slide-right .35s var(--ease) both}.r-row:nth-child(2){animation-delay:.05s}.r-row:nth-child(3){animation-delay:.1s}.r-row:nth-child(4){animation-delay:.15s}.r-row:nth-child(n+5){animation-delay:.2s}.timer{animation:glow 2s ease-in-out infinite}.item,.mod{transition:background .2s,border-color .2s,box-shadow .25s}.mod.sel{animation:glow 1s ease-in-out 1}.p-item{transition:border-color .2s,background .2s,transform .2s var(--ease-spring)}.p-item:hover{transform:translate(4px)}.q-card{animation:fade-up .35s var(--ease) both}.cert{animation:scale-in .5s var(--ease-spring) both}.c-medal{animation:float 3.2s ease-in-out infinite;display:inline-block}.date-box{transition:transform .25s var(--ease-spring)}.row:hover .date-box,tr:hover .date-box,.cv:hover .date-box{transform:scale(1.06) rotate(-3deg)}.cover .emoji,.cover .tag,.mini-cover{transition:transform .3s var(--ease-spring)}.cat-card:hover .cover .emoji,.course:hover .cover .emoji{transform:scale(1.2) rotate(8deg)}tr:hover .mini-cover{transform:scale(1.1)}.sw,.swatch,.em{transition:transform .15s var(--ease-spring),border-color .15s}.sw:hover,.swatch:hover,.em:hover{transform:scale(1.15)}.sw.sel,.swatch.sel,.em.sel{animation:pop .3s var(--ease-spring)}.sec-row,.mail-row,.int,.res{transition:background .2s}.week .cal-day{transition:transform .2s var(--ease-spring),background .2s}.week .cal-day:hover{transform:scale(1.1)}.cal-day.today{animation:pop .5s var(--ease-spring) both}.pv-note{animation:slide-right .4s var(--ease) both}.video-frame{animation:scale-in .45s var(--ease) both}.alt-ico{animation:float 3s ease-in-out infinite}.brand-panel h1{animation:fade-up .7s var(--ease) both;animation-delay:.1s}.brand-panel .b-sub{animation:fade-up .7s var(--ease) both;animation-delay:.25s}.brand-panel .quote-card{animation:fade-up .7s var(--ease) both;animation-delay:.4s}.brand-panel .feat{animation:slide-right .5s var(--ease) both}.brand-panel .feat:nth-child(2){animation-delay:.5s}.brand-panel .feat:nth-child(3){animation-delay:.6s}.brand-panel .feat:nth-child(4){animation-delay:.7s}.circle{animation:float 7s ease-in-out infinite}.c2{animation-duration:9s;animation-delay:1s}.login-panel .form{animation:scale-in .55s var(--ease-spring) both;animation-delay:.15s}.login-panel .field{animation:fade-up .45s var(--ease) both}.login-panel .field:nth-of-type(2){animation-delay:.08s}.login-panel .field:nth-of-type(3){animation-delay:.16s}.boot-mark{animation:pulse 1.2s ease-in-out infinite,spin 6s linear infinite}.skeleton{background:linear-gradient(90deg,#eef0f6 25%,#f8f9ff,#eef0f6 75%);background-size:200% 100%;animation:shimmer 1.4s linear infinite;border-radius:8px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}::view-transition-old(root){animation:fade-in .18s ease reverse}::view-transition-new(root){animation:fade-up .32s var(--ease)}