:root{--black: #000000;--black2: #242529;--white: #ffffff;--white2: #FAF6FF;--white50: #ffffff50;--primary: #5D80FA;--primary2: #2D6CE9;--primary3: #4D81E7;--primary4: #4E74F9;--text: #131217;--placeholder: #6C7278;--border: #EDF1F3;--border2: #E6E6E6;--success: #00C853;--error: #E61D1D;--option1: #FFDAB9;--option2: #E6CEFA;--option3: #96BFFF;--option4: #A3E1DE;--radius-xl: 20px;--radius-lg: 16px;--radius-md: 12px;--shadow-card: 0 10px 30px rgba(0,0,0,.08);--shadow-soft: 0 8px 24px rgba(0,0,0,.06);--container: 1200px}.bg-grid{min-height:100vh;background-image:url(/assets/images/screen-background-with-grid.png);background-size:cover;background-position:center top;background-repeat:no-repeat;background-color:#cfe8ff}.bg-classic{min-height:100vh;background-image:url(/assets/images/screen-background.png);background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#cfe8ff}.bg-overlay:before{content:"";position:fixed;inset:0;pointer-events:none;background:none}.app-shell{min-height:100vh;display:flex}.app-main{flex:1;display:flex;flex-direction:column;min-width:0}.app-content{padding:28px;position:relative;overflow:hidden}.app-content:before{content:"";position:absolute;inset:-120px;pointer-events:none;background:radial-gradient(560px 360px at 18% 18%,#5d80fa38,#5d80fa00 65%),radial-gradient(520px 360px at 82% 28%,#4ade8029,#4ade8000 65%),radial-gradient(540px 380px at 72% 88%,#fbbf241f,#fbbf2400 65%);filter:blur(8px);opacity:.9;z-index:0}.app-content>*{position:relative;z-index:1}.container{max-width:var(--container);margin:0 auto}.fade-in{animation:fadeIn .42s ease both}.slide-up{animation:slideUp .52s ease both}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.topbar{height:66px;background:#ffffffd1;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,.06);display:flex;justify-content:space-between;align-items:center;padding:0 24px}.topbar-title{color:var(--text);font-weight:700}.topbar-action{padding:10px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.08);background:#ffffffe6;cursor:pointer;transition:.25s ease}.topbar-action:hover{transform:translateY(-1px);box-shadow:var(--shadow-soft)}.sidebar{width:270px;padding:24px;background:#ffffffe0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-right:1px solid rgba(0,0,0,.06)}.sidebar-profile{padding:14px 14px 12px;border-radius:18px;background:linear-gradient(180deg,#ffffffeb,#ffffffb3);border:1px solid rgba(0,0,0,.06);box-shadow:var(--shadow-soft);margin-bottom:14px;transition:.25s ease}.sidebar-profile:hover{transform:translateY(-1px);box-shadow:0 18px 42px #0000001a}.sidebar-header{display:flex;align-items:center;gap:12px}.sidebar-avatar{width:52px;height:52px;border-radius:999px;overflow:hidden;background:#0000000f;display:grid;place-items:center;flex-shrink:0}.sidebar-brand{display:grid;gap:2px;min-width:0}.sidebar-brand-top{display:flex;align-items:center;gap:8px;min-width:0}.sidebar-brand-name{font-weight:950;letter-spacing:.4px}.sidebar-brand-email{font-size:12px;color:var(--placeholder);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:165px}.role-pill{font-size:11px;padding:4px 8px;border-radius:999px;background:#5d80fa24;border:1px solid rgba(93,128,250,.24);color:var(--text);white-space:nowrap}.sidebar-greeting{margin-top:10px;font-size:13px;color:var(--text);opacity:.85}.sidebar-divider{height:1px;background:#0000000f;margin:12px 0 14px}.sidebar-nav{display:grid;gap:10px}.nav-link{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:14px;transition:.25s ease;color:var(--text);border:1px solid transparent;white-space:nowrap}.nav-link:hover{background:#5d80fa1a;border-color:#5d80fa2e;transform:translateY(-1px)}.nav-link.active{background:#5d80fa29;border-color:#5d80fa38}.sidebar-logout{width:100%;padding:10px 12px;border-radius:14px;border:1px solid rgba(0,0,0,.08);background:transparent;text-align:left;cursor:pointer;margin-top:8px;transition:.25s ease}.sidebar-logout:hover{background:#00000008;transform:translateY(-1px)}.ui-page{display:grid;gap:14px}.ui-page-title{margin:0;font-size:38px;line-height:1.06;letter-spacing:-.8px;color:var(--text)}.ui-title-accent{display:inline-block;position:relative}.ui-title-accent:after{content:"";position:absolute;left:-4px;right:-4px;bottom:3px;height:10px;border-radius:999px;background:#5d80fa2e;z-index:-1}.ui-page-subtitle{margin:8px 0 0;color:var(--placeholder)}.ui-page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}.ui-card{background:#ffffffd6;border-radius:20px;border:1px solid rgba(0,0,0,.06);box-shadow:var(--shadow-soft);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:.25s ease}.ui-card.hover:hover{transform:translateY(-3px);box-shadow:0 22px 54px #0000001f}.ui-card-pad{padding:16px}.ui-card-hero{border:1px solid rgba(93,128,250,.18);background:radial-gradient(520px 320px at 12% 28%,#5d80fa2e,#5d80fa00 70%),radial-gradient(520px 320px at 78% 70%,#4ade801f,#4ade8000 70%),linear-gradient(180deg,#ffffffeb,#ffffffbd)}.ui-stat{display:grid;gap:8px}.ui-stat-label{font-size:12px;color:var(--placeholder);display:flex;align-items:center;gap:8px}.ui-stat-value{font-weight:950;font-size:24px}.ui-chip{font-size:12px;padding:4px 10px;border-radius:999px;background:#5d80fa1f;border:1px solid rgba(93,128,250,.2);white-space:nowrap}.ui-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}@media(max-width:1100px){.ui-grid-3{grid-template-columns:repeat(2,1fr)}}@media(max-width:720px){.ui-grid-3{grid-template-columns:1fr}}.ui-btn{height:48px;border-radius:16px;padding:0 16px;font-weight:900;cursor:pointer;transition:.25s ease;border:1px solid transparent}.ui-btn-primary{background:linear-gradient(180deg,#5d80fa,#4069f5);color:#fff;box-shadow:0 16px 34px #5d80fa4d}.ui-btn-primary:hover{transform:translateY(-1px);box-shadow:0 22px 48px #5d80fa5c}.ui-btn-ghost{background:#ffffffa6;border-color:#0000001a;color:var(--text)}.ui-btn-ghost:hover{background:#ffffffd1;transform:translateY(-1px)}.ui-btn-danger{background:#f871711f;border-color:#f871714d;color:#b00020}.ui-btn-danger:hover{background:#f8717129;transform:translateY(-1px)}.is-disabled{opacity:.6;cursor:not-allowed;transform:none!important}.class-card{position:relative;overflow:hidden}.class-card-accent{position:absolute;inset:0 auto 0 0;width:10px;border-radius:20px 0 0 20px;filter:blur(0)}.ui-overlay{position:fixed;inset:0;background:#00000047;display:grid;place-items:center;padding:16px;z-index:50}.ui-alert-error{border-radius:18px;background:#f871711f;border:1px solid rgba(248,113,113,.25);color:#8b0018;padding:12px 14px}.ui-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}@media(max-width:920px){.ui-grid-2{grid-template-columns:1fr}}.ui-field-label,.ui-field-hint{font-size:12px;color:var(--placeholder)}.ui-textarea{width:100%;min-height:170px;border-radius:16px;border:1px solid rgba(0,0,0,.1);padding:12px 14px;outline:none;background:#ffffffc7;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:.25s ease;font-family:inherit;resize:vertical}.ui-textarea:focus{border-color:#5d80fa47;box-shadow:0 0 0 4px #5d80fa1a}.ui-select{width:100%;height:48px;border-radius:16px;border:1px solid rgba(0,0,0,.1);padding:0 14px;outline:none;background:#ffffffc7;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:.25s ease;font-family:inherit}.ui-select:focus{border-color:#5d80fa47;box-shadow:0 0 0 4px #5d80fa1a}.ui-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:860px){.ui-form-grid{grid-template-columns:1fr}}.ui-upload{border-radius:18px;border:1px dashed rgba(0,0,0,.14);background:#ffffffad;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.ui-upload-btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 14px;border-radius:14px;cursor:pointer;border:1px solid rgba(0,0,0,.1);background:#ffffffd1;transition:.25s ease;font-weight:900}.ui-upload-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-soft)}.ui-link-danger{border:none;background:transparent;color:#b00020;cursor:pointer;font-weight:800;padding:8px 6px}.ui-link-danger:hover{text-decoration:underline}.ui-toggle-row{display:flex;gap:12px;align-items:center}.ui-toggle{position:relative;width:46px;height:28px;flex-shrink:0}.ui-toggle input{display:none}.ui-toggle-ui{position:absolute;inset:0;border-radius:999px;background:#0000001f;transition:.25s ease;border:1px solid rgba(0,0,0,.08)}.ui-toggle-ui:after{content:"";position:absolute;top:50%;left:3px;width:22px;height:22px;border-radius:999px;transform:translateY(-50%);background:#fffffff2;box-shadow:0 10px 20px #00000024;transition:.25s ease}.ui-toggle input:checked+.ui-toggle-ui{background:#5d80fa61;border-color:#5d80fa47}.ui-toggle input:checked+.ui-toggle-ui:after{left:21px}.quiz-options{display:grid;gap:10px}.quiz-option-edit{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;border:1px solid rgba(0,0,0,.08);background:#ffffffc7;cursor:pointer;transition:.25s ease}.quiz-option-edit:hover{transform:translateY(-1px);box-shadow:var(--shadow-soft)}.quiz-option-edit.is-correct{background:#4ade8033;border-color:#4ade8073}.quiz-option-edit.is-wrong{background:#f8717129;border-color:#f8717159}.quiz-letter{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;font-weight:900;background:#0000000f;flex-shrink:0}.page-header{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}.page-header h1{font-size:42px;font-weight:900}.page-actions{display:flex;gap:12px}.stats{display:flex;gap:12px;margin:18px 0 28px}.stats span{background:#fff9;padding:6px 14px;border-radius:999px;font-weight:600}.classes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}.classes-grid .class-card{position:relative;background:linear-gradient(180deg,var(--class-accent),rgba(255,255,255,.85));border-radius:18px;padding:18px;cursor:pointer;transition:all .25s ease;box-shadow:0 12px 30px #00000014}.classes-grid .class-card:hover,.classes-grid .class-card.selected{box-shadow:0 20px 45px var(--class-shadow);transform:translateY(-4px)}.delete-btn{position:absolute;top:12px;right:12px;background:#ffffffd9;border:none;border-radius:50%;width:32px;height:32px;font-size:18px;cursor:pointer}.delete-btn:hover{background:#fee2e2;color:#dc2626}.class-header{display:flex;justify-content:space-between;align-items:center;gap:12px}.class-header h3{font-size:20px;font-weight:800;cursor:text}.class-footer{margin-top:16px;font-weight:600;color:#475569}.ui-card.class-tile{position:relative}.class-delete{position:absolute;top:14px;right:14px;z-index:5}.ui-card.class-tile .class-card{display:grid;gap:14px}.class-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.class-title{text-align:left;padding:0;border:0;background:transparent;cursor:text;font-weight:950;font-size:26px;line-height:1.05;color:var(--text);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.class-sub{margin-top:6px;color:var(--placeholder);font-size:14px;font-weight:600}.class-title-input{width:100%;height:52px;border-radius:16px;border:1px solid rgba(0,0,0,.1);background:#ffffffc7;padding:0 14px;font-weight:950;font-size:20px;outline:none}.class-title-input:focus{border-color:#5d80fa47;box-shadow:0 0 0 4px #5d80fa1a}.class-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}.class-hint{color:var(--placeholder);font-size:13px;font-weight:600}@media(max-width:720px){.class-title{font-size:22px}.class-bottom{flex-direction:column;align-items:stretch}.class-bottom .ui-btn{width:100%}}.ui-list{display:grid;gap:12px}.ui-card.chapter-row{position:relative;width:100%;overflow:hidden;background:radial-gradient(760px 420px at 12% 18%,var(--class-accent),rgba(255,255,255,0) 62%),radial-gradient(760px 420px at 86% 82%,var(--class-accent),rgba(255,255,255,0) 68%),linear-gradient(180deg,#ffffffeb,#ffffffbd)}.ui-card.chapter-row.hover:hover{transform:translateY(-2px);box-shadow:0 22px 54px var(--class-shadow)}.ui-card.chapter-row.is-selected{transform:translateY(-1px);box-shadow:0 26px 70px var(--class-shadow);border-color:#00000014}.chapter-content{display:flex;align-items:center;justify-content:space-between;gap:14px}.chapter-left{display:grid;gap:8px;min-width:0}.chapter-right{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0}@media(max-width:720px){.chapter-content{flex-direction:column;align-items:stretch}.chapter-right .ui-btn{width:100%}}.ui-card.chapter-row .chapter-content{padding-right:54px}.ui-card.chapter-row .chapter-right{margin-right:10px}.ui-card.chapter-row .class-delete{top:14px;right:14px}.ui-upload.is-dragging{border-color:#5d80fa59;box-shadow:0 0 0 5px #5d80fa1a}.quiz-list{display:grid;gap:14px;margin-top:16px}.quiz-item{border-radius:22px;overflow:hidden}.quiz-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;background:transparent;border:none;cursor:pointer;text-align:left}.quiz-item:hover .quiz-row{transform:translateY(-1px)}.quiz-left{display:flex;align-items:flex-start;gap:12px;min-width:0}.quiz-index{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;font-weight:950;background:#5d80fa24;box-shadow:0 10px 22px #5d80fa29;flex:0 0 auto}.quiz-q{min-width:0;display:grid;gap:4px}.quiz-q-title{font-weight:950;font-size:16px;line-height:1.25;color:var(--text, #111);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.quiz-q-meta{font-size:13px;color:var(--placeholder)}.quiz-chevron{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:#ffffffb3;border:1px solid rgba(0,0,0,.06);transition:transform .18s ease;flex:0 0 auto}.quiz-chevron.open{transform:rotate(180deg)}.quiz-panel{max-height:0;overflow:hidden;transition:max-height .24s ease}.quiz-panel.open{max-height:650px}.quiz-answers{padding:0 18px 18px;display:grid;gap:10px}.quiz-answer{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:#ffffffb8;border:1px solid rgba(0,0,0,.06)}.quiz-answer-bullet{width:30px;height:30px;border-radius:12px;display:grid;place-items:center;font-weight:950;background:#0000000d;flex:0 0 auto}.quiz-answer-text{flex:1;font-weight:650}.quiz-answer.is-correct{border-color:#22c55e59;background:#22c55e1a}.quiz-answer.is-correct .quiz-answer-bullet{background:#22c55e29}.quiz-badge{font-size:12px;font-weight:900;padding:6px 10px;border-radius:999px;background:#22c55e24;border:1px solid rgba(34,197,94,.25)}.sidebar-profile--minimal{width:100%;display:grid;place-items:center;cursor:pointer;padding:16px;background:transparent;border:none;appearance:none}.sidebar-profile.sidebar-profile--minimal{background:linear-gradient(180deg,#ffffffeb,#ffffffb3)}.ui-card.class-tile{aspect-ratio:1 / 1;display:flex;flex-direction:column;overflow:hidden}.ui-card.class-tile .class-card{height:100%;display:flex;flex-direction:column}.ui-card.class-tile .class-bottom{margin-top:auto}.classes-grid .class-card{aspect-ratio:1 / 1;display:flex;flex-direction:column}.classes-grid .class-footer,.classes-grid .class-bottom{margin-top:auto}@media(max-width:720px){.ui-card.class-tile,.classes-grid .class-card{aspect-ratio:auto;min-height:180px}}.classes-grid-app{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px}@media(max-width:900px){.classes-grid-app{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}}.ui-card.class-tile-app{aspect-ratio:1 / 1;background:var(--tile-bg, rgba(93,128,250,.14));border:1px solid var(--tile-border, rgba(93,128,250,.2));border-radius:22px;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-user-select:none;user-select:none;box-shadow:0 10px 28px #0000000f;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;overflow:hidden}.ui-card.class-tile-app:hover{transform:translateY(-3px);box-shadow:0 14px 34px #00000014}.ui-card.class-tile-app.is-selected{border-width:2px;border-color:#5d80fabf}.class-tile-app__inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:22px;text-align:center;width:100%;height:100%}.class-tile-app__icon{width:64px;height:64px;border-radius:999px;background:#fffffff2;display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:0 6px 18px #0000000f}.class-title-app{cursor:default;background:transparent;border:0;padding:0;font-size:22px;line-height:1.15;font-weight:800;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.class-sub-app{margin-top:-2px;font-size:14px;font-weight:600;opacity:.7}.class-title-input-app{width:min(90%,280px);height:44px;text-align:center;border-radius:16px}.class-delete-app{position:absolute;top:12px;right:12px;z-index:5;width:28px;height:28px;border-radius:999px;border:1px solid rgba(0,0,0,.08);background:#ffffffd9;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px #0000000f}.class-delete-app:hover{background:#fffffffa}html,body{height:100%}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#cfe8ff}*{box-sizing:border-box}a{color:inherit;text-decoration:none}h1,h2,h3{margin:0;letter-spacing:-.4px}p{margin:0;line-height:1.5}