:root {
  font-family: 'Aptos', 'Microsoft YaHei UI', 'Microsoft YaHei', sans-serif;
  color: #12234d;
  background: #edf3ff;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --navy: #102858;
  --navy-deep: #0a1b43;
  --blue: #1768f6;
  --blue-bright: #1387ff;
  --cyan: #16c8e8;
  --ink: #12234d;
  --muted: #7888ad;
  --line: #e3ebfb;
  --surface: #fff;
  --wash: #f4f7ff;
  --shadow: 0 12px 34px rgba(49, 88, 164, .09);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 360px; min-height: 100vh; background: #edf3ff; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(22, 123, 255, .3); outline-offset: 2px; }
a { color: inherit; text-decoration: none; }
.boot { height: 100vh; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--muted); }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid #d8e5ff; border-top-color: var(--blue); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.sidebar { background: radial-gradient(ellipse at 5% 100%, rgba(19, 122, 252, .2), transparent 32%), linear-gradient(180deg, #10295e 0%, #0b1f4c 100%); color: #d8e6ff; display: flex; flex-direction: column; min-height: 100vh; padding: 22px 14px 18px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 25px; }
.brand-mark { width: 44px; height: 44px; border-radius: 15px; color: #27d3f3; display: grid; place-items: center; background: linear-gradient(145deg, rgba(16, 200, 237, .22), rgba(31, 111, 247, .1)); border: 1px solid rgba(91, 197, 255, .25); box-shadow: 0 0 25px rgba(12, 152, 247, .18) inset; }
.brand-mark svg { width: 31px; height: 31px; }
.brand-name { font-weight: 800; letter-spacing: .035em; font-size: 18px; color: white; line-height: 1.2; }
.brand-sub { font-size: 10px; color: #89a9e3; margin-top: 4px; letter-spacing: .12em; }
.nav-caption { text-transform: uppercase; font-size: 10px; color: #708cbf; font-weight: 800; letter-spacing: .13em; padding: 10px 12px 8px; }
.nav-list { display: grid; gap: 5px; }
.nav-item { position: relative; width: 100%; border: 0; color: #b8c9e8; display: flex; align-items: center; gap: 13px; background: transparent; border-radius: 13px; min-height: 46px; padding: 0 13px; text-align: left; transition: .2s ease; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.07); transform: translateX(2px); }
.nav-item.active { color: white; font-weight: 700; background: linear-gradient(100deg, #1674fa, #1458e9); box-shadow: 0 8px 22px rgba(14, 83, 230, .3); }
.nav-item svg { width: 20px; height: 20px; flex: 0 0 20px; }
.nav-label { flex: 1; font-size: 13px; }
.nav-badge { background: #fa5570; color: white; min-width: 20px; height: 20px; border-radius: 99px; display: grid; place-items: center; padding: 0 5px; font-size: 10px; font-weight: 800; }
.sidebar-foot { margin-top: auto; border-top: 1px solid rgba(190, 212, 255, .14); padding-top: 15px; }
.profile-mini { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; color: #dbe7ff; background: transparent; padding: 8px; border-radius: 12px; text-align: left; }
.profile-mini:hover { background: rgba(255,255,255,.07); }
.avatar { width: 36px; height: 36px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: linear-gradient(135deg,#c8edff,#69a7ff); color: #164fa5; font-size: 13px; font-weight: 800; flex: 0 0 auto; }
.avatar.large { width: 64px; height: 64px; font-size: 22px; }
.profile-mini-text { flex: 1; min-width: 0; }
.profile-mini-name { color: white; font-weight: 700; font-size: 12px; }
.profile-mini-meta { color: #819ac6; font-size: 10px; margin-top: 3px; }

.main-area { min-width: 0; }
.topbar { height: 76px; background: linear-gradient(100deg, #122b62, #0e2454 72%, #112b60); display: flex; align-items: center; padding: 0 30px; gap: 18px; position: sticky; top: 0; z-index: 20; box-shadow: 0 4px 18px rgba(9, 30, 78, .12); }
.top-search { width: min(440px, 43vw); height: 40px; border: 1px solid rgba(180, 207, 255, .24); background: rgba(225, 237, 255, .1); border-radius: 12px; color: white; display: flex; align-items: center; gap: 9px; padding: 0 13px; }
.top-search svg { width: 17px; color: #aac4f3; }
.top-search input { width: 100%; background: transparent; border: 0; outline: 0; color: white; font-size: 12px; }
.top-search input::placeholder { color: #9bb3dc; }
.top-spacer { flex: 1; }
.top-action { height: 40px; display: inline-flex; align-items: center; gap: 9px; padding: 0 14px; border: 1px solid rgba(181, 210, 255, .17); color: white; background: rgba(197, 220, 255, .1); border-radius: 99px; font-size: 12px; font-weight: 700; transition: .18s ease; }
.top-action:hover { background: rgba(197, 220, 255, .19); }
.top-action svg { width: 18px; height: 18px; }
.top-icon { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #bed0f2; background: transparent; }
.top-icon:hover { background: rgba(255,255,255,.1); color: white; }
.top-icon svg { width: 19px; }
.notification-dot { position: absolute; top: 4px; right: 5px; height: 7px; width: 7px; border-radius: 50%; background: #fb5471; box-shadow: 0 0 0 2px #10295e; }
.top-user { color: white; display: flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 4px; }
.top-user-info { text-align: left; }
.top-user-name { font-size: 12px; font-weight: 700; }
.top-user-meta { font-size: 10px; color: #9cb5e3; margin-top: 3px; }
.top-user .avatar { width: 38px; height: 38px; border: 2px solid rgba(198, 222, 255, .7); }
.main-content { padding: 25px 28px 40px; max-width: 1740px; margin: auto; }
.page-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 0 0 20px; }
.eyebrow { color: var(--blue); text-transform: uppercase; font-size: 10px; font-weight: 800; letter-spacing: .14em; margin-bottom: 7px; }
.page-title { color: #0d2050; font-size: 25px; font-weight: 800; letter-spacing: -.03em; margin: 0; }
.page-subtitle { color: var(--muted); margin: 7px 0 0; font-size: 12px; }
.head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.panel { background: rgba(255,255,255,.92); border: 1px solid #e4ecfb; border-radius: 17px; box-shadow: var(--shadow); }
.panel-pad { padding: 20px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.panel-title { margin: 0; color: var(--ink); font-size: 14px; font-weight: 800; }
.panel-sub { color: var(--muted); font-size: 11px; margin-top: 4px; }
.text-link { border: 0; background: transparent; color: #2469e9; font-size: 11px; font-weight: 700; padding: 4px; }
.text-link:hover { color: #064bc7; }
.btn { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 13px; border-radius: 10px; border: 1px solid var(--line); background: white; color: #35517f; font-size: 11px; font-weight: 700; transition: .18s ease; }
.btn:hover { border-color: #aac7ff; color: var(--blue); transform: translateY(-1px); }
.btn svg { width: 15px; height: 15px; }
.btn.primary { background: linear-gradient(100deg,#1682ff,#135ef1); color: white; border-color: transparent; box-shadow: 0 7px 16px rgba(23,104,246,.2); }
.btn.primary:hover { box-shadow: 0 10px 23px rgba(23,104,246,.3); color: white; }
.btn.ghost-blue { background: #edf4ff; color: #1765e9; border-color: #d7e5ff; }
.btn.danger { color: #d04c63; border-color: #ffdee4; background: #fff8f9; }
.btn.small { min-height: 30px; border-radius: 8px; font-size: 10px; padding: 0 10px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.field { min-height: 38px; width: 100%; border: 1px solid #dfe8fa; border-radius: 10px; padding: 0 12px; color: var(--ink); background: #fbfcff; font-size: 12px; }
.field::placeholder { color: #99a8c4; }
textarea.field { resize: vertical; min-height: 90px; padding: 11px 12px; line-height: 1.6; }
.select.field { cursor: pointer; }
.field-label { display: block; color: #607394; font-size: 10px; font-weight: 700; margin: 0 0 6px; }
.field-group { margin-bottom: 13px; }
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 15px; }
.toolbar .field { width: auto; min-width: 150px; }
.toolbar .search-field { flex: 1; min-width: 190px; }
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; border: 1px solid #e3ebfb; border-radius: 99px; padding: 0 11px; color: #637898; background: #f9fbff; font-size: 10px; font-weight: 700; }
.chip:hover { border-color: #bcd2fc; color: #1d63df; }
.chip.active { color: #fff; background: var(--blue); border-color: var(--blue); }
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.grid.four { grid-template-columns: repeat(4,minmax(0,1fr)); }
.stat-card { min-height: 104px; padding: 16px; position: relative; overflow: hidden; }
.stat-card::after { content: ''; position: absolute; height: 75px; width: 75px; border-radius: 50%; right: -16px; top: -22px; background: var(--tint,#e4f0ff); opacity: .56; }
.stat-top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.stat-icon { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--tone,#1d6ff4); background: var(--tint,#ebf3ff); }
.stat-icon svg { width: 17px; height: 17px; }
.stat-value { color: #102554; font-size: 22px; font-weight: 800; margin-top: 12px; letter-spacing: -.03em; }
.stat-label { color: #8391ac; font-size: 10px; margin-top: 2px; }
.hero { min-height: 214px; overflow: hidden; position: relative; padding: 28px 31px; background: radial-gradient(circle at 78% 22%, rgba(14, 211, 238, .3), transparent 22%), radial-gradient(circle at 88% 85%, rgba(28, 111, 246, .52), transparent 36%), linear-gradient(112deg,#112c69 0%,#124c9b 55%,#0b336d 100%); color: #fff; }
.hero::before { content: ''; position: absolute; inset: 0; opacity: .15; background: repeating-linear-gradient(145deg,transparent 0 28px,rgba(126,221,255,.4) 29px 30px,transparent 31px 60px); mask-image: linear-gradient(90deg,transparent,black); }
.hero::after { content: ''; position: absolute; right: 7%; bottom: -100px; width: 440px; height: 180px; border: 1px solid rgba(48,219,247,.36); border-radius: 50%; transform: rotate(-12deg); box-shadow: 0 -18px 0 -1px rgba(51,207,255,.12),0 -36px 0 -2px rgba(51,207,255,.1),0 -56px 0 -3px rgba(51,207,255,.08); }
.hero-content { position: relative; z-index: 1; max-width: 650px; }
.hero-kicker { color: #74e6ff; font-size: 10px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.hero h2 { font-size: clamp(22px,2.6vw,34px); line-height: 1.2; letter-spacing: -.04em; margin: 10px 0; }
.hero p { font-size: 12px; color: #c3dfff; margin: 0 0 18px; max-width: 520px; }
.hero .btn { color: #083674; border: 0; background: linear-gradient(90deg,#31dcf1,#65e5ff); }
.hero-symbol { position: absolute; right: 8%; top: 34px; width: 180px; height: 140px; display: grid; place-items: center; color: rgba(107,224,255,.77); filter: drop-shadow(0 0 32px rgba(31,206,255,.6)); }
.hero-symbol svg { width: 125px; height: 125px; stroke-width: 1.1; }
.dashboard-top { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(320px,1fr); gap: 16px; margin-bottom: 16px; }
.learning-summary { display: flex; gap: 15px; align-items: center; }
.ring { --progress: 0; width: 108px; height: 108px; border-radius: 50%; background: conic-gradient(#1386ff calc(var(--progress) * 1%),#e7efff 0); display: grid; place-items: center; position: relative; flex: 0 0 auto; }
.ring::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: white; }
.ring-content { position: relative; text-align: center; }
.ring-value { font-size: 22px; font-weight: 800; color: #0c2a64; }
.ring-label { font-size: 9px; color: #7b8ead; margin-top: 2px; }
.summary-list { flex: 1; display: grid; gap: 10px; }
.summary-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 11px; color: #6b7d9e; }
.summary-line strong { color: #1b315d; font-size: 12px; }
.course-card { padding: 12px; transition: .2s ease; cursor: pointer; }
.course-card:hover { transform: translateY(-3px); border-color: #bad2ff; box-shadow: 0 15px 30px rgba(29,89,186,.14); }
.course-cover { height: 120px; border-radius: 11px; padding: 13px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; position: relative; color: #fff; background: linear-gradient(135deg,#123b83,#087ddd 55%,#19bfe4); }
.course-cover::after { content: ''; position: absolute; width: 170px; height: 170px; right: -27px; bottom: -75px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; box-shadow: 0 0 0 17px rgba(255,255,255,.05),0 0 0 35px rgba(255,255,255,.04); }
.course-cover-icon { width: 34px; height: 34px; border-radius: 11px; background: rgba(255,255,255,.17); display: grid; place-items: center; backdrop-filter: blur(9px); }
.course-cover-icon svg { width: 19px; }
.course-cover-title { font-size: 15px; font-weight: 800; position: relative; z-index: 1; }
.course-card h3 { font-size: 13px; margin: 11px 2px 5px; color: #142957; }
.course-description { color: #7d8ca9; font-size: 10px; line-height: 1.5; min-height: 29px; margin: 0 2px; }
.progress-track { height: 6px; background: #e8effb; border-radius: 99px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg,#1678f4,#29b9ef); border-radius: inherit; }
.course-progress { margin: 12px 2px 5px; display: flex; justify-content: space-between; font-size: 9px; color: #8998b3; }
.course-progress strong { color: #3462a9; }
.list { display: grid; }
.list-row { display: flex; align-items: center; gap: 12px; border-top: 1px solid #edf1f9; padding: 12px 0; min-width: 0; }
.list-row:first-child { border-top: 0; padding-top: 0; }
.list-row:last-child { padding-bottom: 0; }
.row-icon { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #1a6ced; background: #edf4ff; flex: 0 0 auto; }
.row-icon svg { width: 18px; height: 18px; }
.row-main { min-width: 0; flex: 1; }
.row-title { font-size: 11px; color: #1c315a; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.row-sub { color: #8a98b1; font-size: 9px; margin-top: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.row-end { color: #6a7c9f; font-size: 10px; flex: 0 0 auto; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 11px; }
th { color: #8090ad; font-size: 9px; font-weight: 800; text-align: left; padding: 11px 12px; border-bottom: 1px solid #e7edf8; white-space: nowrap; }
td { color: #304467; padding: 13px 12px; border-bottom: 1px solid #edf1f8; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 99px; color: #54719e; background: #eff4fc; font-size: 9px; font-weight: 700; white-space: nowrap; }
.pill.blue { color: #1d66d9; background: #edf4ff; }
.pill.green { color: #168660; background: #eaf9f2; }
.pill.amber { color: #a86e12; background: #fff5dd; }
.pill.red { color: #cb5367; background: #fff0f2; }
.empty { text-align: center; padding: 34px 15px; color: #8b9ab5; }
.empty-icon { width: 42px; height: 42px; border-radius: 14px; margin: 0 auto 11px; display: grid; place-items: center; background: #f0f5ff; color: #6e97df; }
.empty-icon svg { width: 20px; }
.empty strong { display: block; color: #506585; font-size: 11px; }
.empty p { font-size: 10px; margin: 6px 0 0; }
.notice { padding: 11px 13px; border: 1px solid #dceaff; background: #f2f7ff; border-radius: 11px; color: #52709d; font-size: 10px; line-height: 1.6; }
.notice.warning { border-color: #ffe3b0; background: #fffaf0; color: #936b25; }
.notice.error { border-color: #ffdce0; background: #fff7f8; color: #a84756; }
.toast-area { position: fixed; right: 22px; bottom: 20px; z-index: 80; display: grid; gap: 8px; }
.toast { background: #102858; color: white; border-radius: 11px; padding: 12px 16px; font-size: 11px; box-shadow: 0 10px 30px rgba(5,30,80,.2); animation: toast-in .24s ease both; max-width: 360px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 22px; background: rgba(8,22,52,.46); backdrop-filter: blur(5px); }
.modal { width: min(520px,100%); max-height: min(84vh,760px); overflow: auto; padding: 22px; background: white; border-radius: 18px; box-shadow: 0 28px 80px rgba(5,23,64,.28); animation: modal-in .2s ease both; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.99); } }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.modal-title { margin: 0; font-size: 16px; color: #142855; }
.close-btn { width: 30px; height: 30px; border: 0; background: #f3f6fc; color: #7383a1; border-radius: 9px; display: grid; place-items: center; }
.modal-actions { display: flex; justify-content: end; gap: 8px; margin-top: 18px; }
.split-layout { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(250px,.8fr); gap: 17px; }
.two-col-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.detail-hero { padding: 22px; color: white; background: linear-gradient(105deg,#143a83,#137de1); border-radius: 16px; margin-bottom: 15px; position: relative; overflow: hidden; }
.detail-hero::after { content: ''; position: absolute; right: -50px; top: -90px; width: 260px; height: 260px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); box-shadow: 0 0 0 20px rgba(255,255,255,.05),0 0 0 50px rgba(255,255,255,.04); }
.detail-hero h2 { margin: 7px 0; font-size: 21px; position: relative; z-index: 1; }
.detail-hero p { margin: 0; color: #c5e1ff; font-size: 11px; position: relative; z-index: 1; }
.detail-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 15px; position: relative; z-index: 1; }
.lesson-row { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 11px 5px; border-bottom: 1px solid #eef2f9; }
.lesson-row:last-child { border-bottom: 0; }
.lesson-index { color: #6693df; font-size: 10px; font-weight: 800; }
.lesson-name { color: #33486e; font-size: 11px; font-weight: 700; }
.lesson-meta { color: #8a99b2; font-size: 9px; margin-top: 3px; }
.live-screen { min-height: 300px; display: grid; place-items: center; color: #d8ecff; border-radius: 15px; background: radial-gradient(circle at 50% 45%,rgba(26,159,255,.28),transparent 37%),linear-gradient(135deg,#0d214c,#07152f); overflow: hidden; position: relative; }
.live-screen svg { width: 70px; height: 70px; opacity: .78; }
.live-screen-label { position: absolute; bottom: 17px; left: 18px; color: #adc5e8; font-size: 10px; }
.chat-box { max-height: 310px; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; padding: 6px 0; }
.chat-bubble { align-self: start; max-width: 88%; padding: 9px 11px; background: #f0f5ff; border-radius: 4px 12px 12px; color: #435a7f; font-size: 10px; line-height: 1.55; }
.chat-bubble.mine { align-self: end; background: #e4f0ff; color: #1e4f9f; border-radius: 12px 4px 12px 12px; }
.chat-author { font-size: 8px; font-weight: 800; color: #6983ab; margin-bottom: 3px; }
.chat-compose { display: flex; gap: 7px; margin-top: 10px; }
.chat-compose .field { flex: 1; }
.project-card { overflow: hidden; }
.project-art { min-height: 120px; padding: 16px; display: flex; align-items: end; color: white; background: linear-gradient(135deg,#173d8a,#117bda 65%,#3ec8e0); position: relative; }
.project-art::after { content: ''; position: absolute; right: -16px; top: -60px; width: 160px; height: 160px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; box-shadow: 0 0 0 15px rgba(255,255,255,.07),0 0 0 35px rgba(255,255,255,.05); }
.project-art svg { width: 29px; height: 29px; position: absolute; top: 16px; left: 16px; opacity: .92; }
.project-art-title { position: relative; z-index: 1; font-size: 15px; font-weight: 800; }
.project-body { padding: 14px; }
.project-body p { color: #7183a2; font-size: 10px; line-height: 1.6; min-height: 34px; margin: 7px 0 12px; }
.project-actions { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #eef2f8; padding-top: 10px; }
.auth-screen { min-height: 100vh; display: grid; grid-template-columns: minmax(340px,.95fr) minmax(380px,1.05fr); background: #f1f5ff; }
.auth-art { min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: 42px 46px; color: white; background: radial-gradient(circle at 75% 27%,rgba(15,209,241,.3),transparent 18%),radial-gradient(circle at 34% 92%,rgba(38,114,254,.5),transparent 35%),linear-gradient(140deg,#0d214f,#104999 70%,#0e2d68); position: relative; overflow: hidden; }
.auth-art::after { content: ''; position: absolute; width: 700px; height: 250px; left: -70px; bottom: 70px; border: 1px solid rgba(92,220,255,.3); border-radius: 50%; transform: rotate(-12deg); box-shadow: 0 -22px 0 -1px rgba(66,191,255,.12),0 -45px 0 -2px rgba(66,191,255,.1); }
.auth-art-content { position: relative; z-index: 1; margin: auto 0; max-width: 500px; }
.auth-art-content h1 { font-size: clamp(32px,4vw,52px); line-height: 1.15; letter-spacing: -.05em; margin: 18px 0; }
.auth-art-content p { color: #bfd9ff; font-size: 13px; line-height: 1.7; max-width: 400px; }
.auth-art-foot { position: relative; z-index: 1; color: #81a9e5; font-size: 10px; }
.auth-panel-wrap { display: grid; place-items: center; padding: 30px; }
.auth-panel { width: min(390px,100%); padding: 31px; background: white; border: 1px solid #e4ebf7; border-radius: 19px; box-shadow: 0 18px 55px rgba(40,76,142,.1); }
.auth-panel h2 { font-size: 22px; color: #122957; margin: 0 0 7px; }
.auth-panel > p { color: #8492aa; font-size: 11px; margin: 0 0 24px; }
.auth-error { display: none; margin-bottom: 14px; }
.auth-error.show { display: block; }
.full-width { width: 100%; }
.login-footer { font-size: 9px; text-align: center; color: #9ba8bd; margin-top: 16px; }
.teacher-entry-link { display:block; margin-top:12px; color:#1768d8; font-size:10px; font-weight:750; text-align:center; text-decoration:none; }
.teacher-entry-link:hover { color:#0a4db3; }
.course-layout { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(300px,.85fr); gap: 16px; }
.course-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.course-cover.category-0 { background: linear-gradient(135deg,#142c68,#126dde 70%,#1dc8e2); }
.course-cover.category-1 { background: linear-gradient(135deg,#20426e,#1385d5 65%,#53d4db); }
.course-cover.category-2 { background: linear-gradient(135deg,#0d3665,#179c9b 65%,#46dbb7); }
.course-cover.category-3 { background: linear-gradient(135deg,#313f8c,#6667de 65%,#9a87ff); }
.course-cover.category-4 { background: linear-gradient(135deg,#173966,#176ca4 65%,#1dc4c7); }
.course-cover.category-5 { background: linear-gradient(135deg,#5a3a22,#dd8d32 65%,#f5cd50); }
.course-hero-side { min-width: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.form-grid .field-group.full { grid-column: 1/-1; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid #edf1f8; }
.settings-row:last-child { border-bottom: 0; }
.toggle { appearance: none; width: 36px; height: 21px; background: #d7e1f2; border-radius: 99px; position: relative; cursor: pointer; transition: .2s; }
.toggle::after { content: ''; position: absolute; width: 15px; height: 15px; left: 3px; top: 3px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: .2s; }
.toggle:checked { background: #2c80f5; }
.toggle:checked::after { left: 18px; }
.notification-layout { display: grid; grid-template-columns: minmax(330px,.8fr) minmax(0,1.2fr); gap: 16px; }
.notification-item { padding: 12px; border-radius: 11px; border: 1px solid transparent; display: flex; gap: 10px; cursor: pointer; transition: .18s; }
.notification-item:hover { background: #f6f9ff; }
.notification-item.active { background: #edf5ff; border-color: #d8e8ff; }
.notification-item.unread .row-title::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #ed5d6f; margin-right: 7px; vertical-align: 1px; }
.timeline { position: relative; display: grid; gap: 0; padding-left: 15px; }
.timeline::before { content: ''; position: absolute; left: 4px; top: 9px; bottom: 10px; width: 1px; background: #dce7f7; }
.timeline-item { position: relative; padding: 0 0 17px 13px; }
.timeline-item::before { content: ''; position: absolute; left: -15px; top: 4px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid white; background: #3485f6; box-shadow: 0 0 0 1px #bcd2f6; }
.timeline-date { font-size: 9px; color: #8b9ab2; margin-bottom: 4px; }
.timeline-title { font-size: 11px; color: #30476d; font-weight: 700; }
.wide-table { min-width: 650px; }
.pagination { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; color: #8b9ab3; font-size: 10px; }
.pagination-controls { display: flex; gap: 6px; }
.page-btn { min-width: 29px; height: 29px; border-radius: 8px; border: 1px solid #e4ebf7; color: #60769d; background: white; font-size: 10px; }
.page-btn.active { color: white; background: var(--blue); border-color: var(--blue); }
.page-btn:disabled { opacity: .45; cursor: default; }
.tag-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.spacer-12 { height: 12px; }
.spacer-16 { height: 16px; }
.stack-12 { display: grid; gap: 12px; }
.stack-16 { display: grid; gap: 16px; }
.mono { font-family: ui-monospace, 'Cascadia Code', 'SFMono-Regular', monospace; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.word-break { overflow-wrap: anywhere; }
.clickable { cursor: pointer; }
.scroll-region { max-height: 340px; overflow: auto; }
.file-input { display: none; }
.assignment-stats .stat-card { min-width: 0; }
.assignment-list { display: grid; gap: 9px; }
.assignment-card { width: 100%; display: flex; align-items: center; gap: 13px; padding: 15px; text-align: left; cursor: pointer; transition: .18s ease; }
.assignment-card:hover { transform: translateY(-2px); border-color: #bad2ff; box-shadow: 0 12px 24px rgba(29,89,186,.12); }
.assignment-icon, .award-icon { width: 42px; height: 42px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 13px; color: #1a6ced; background: #edf4ff; }
.assignment-main { min-width: 0; flex: 1; display: grid; gap: 5px; }
.assignment-title { font-size: 12px; font-weight: 800; color: #1c315a; }
.assignment-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; color: #8795ad; }
.trend-chart { height: 185px; display: flex; align-items: end; gap: 6px; padding: 12px 2px 0; overflow-x: auto; border-bottom: 1px solid #e6edf8; }
.trend-column { min-width: 25px; flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: end; align-items: center; gap: 7px; color: #8b9ab2; font-size: 8px; }
.trend-bar { width: min(24px,75%); min-height: 3px; border-radius: 7px 7px 2px 2px; background: linear-gradient(180deg,#3bc9eb,#2475f3); box-shadow: 0 4px 12px rgba(33,119,241,.16); }
.award-card { padding: 17px; }
.award-card strong { display: block; color: #1c315a; font-size: 12px; margin: 11px 0 5px; }
.award-card p { min-height: 27px; margin: 0 0 9px; color: #8492aa; font-size: 10px; line-height: 1.5; }
.notification-list { display: grid; gap: 5px; }
.notification-item { width: 100%; text-align: left; color: inherit; background: transparent; }
.notification-detail { display: grid; gap: 16px; align-content: start; min-height: 300px; }
.notification-detail h2 { color: #152a56; font-size: 18px; margin: 0; }
.notification-content { color: #506585; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.9; min-height: 115px; padding: 16px; background: #f8faff; border-radius: 12px; }
.profile-overview { display: flex; align-items: center; gap: 15px; }
.profile-overview h2 { margin: 0; color: #162d5c; font-size: 17px; }
.profile-badges { display: flex; justify-content: end; gap: 7px; flex-wrap: wrap; margin-left: auto; }
.profile-overview + .spacer-16 { clear: both; }
.settings-row strong { color: #304467; font-size: 11px; }
.profile-overview + .spacer-16 + .grid .panel .btn + .btn { margin-left: 7px; }
.modal { width: min(620px,100%); }
.modal:has(.notification-content), .modal:has(.trend-chart) { width: min(760px,100%); }
.project-card-open { display: block; width: 100%; padding: 0; border: 0; background: transparent; text-align: left; }
.project-card-open:hover .project-art { filter: saturate(1.12); }
.list-row.clickable { width: 100%; color: inherit; background: transparent; text-align: left; }
.list-row.clickable:hover { background: #f8faff; }
.row-end svg { vertical-align: middle; }
.modal-content > .stack-16 > .field-label { margin: 0; }
.notification-layout > .panel { min-width: 0; }
.word-break { white-space: pre-wrap; }

/* Desktop reference layout: deep-blue frame, bright compact workspace. */
@media (min-width: 1281px) {
  .app-shell { grid-template-columns: 260px minmax(0,1fr); }
  .sidebar { padding: 18px 16px; }
  .nav-caption { display: none; }
  .nav-list { gap: 6px; margin-top: 18px; }
  .nav-item { min-height: 56px; padding: 0 19px; border-radius: 9px; gap: 16px; }
  .nav-item svg { width: 24px; height: 24px; }
  .nav-label { font-size: 16px; }
  .nav-item:nth-child(8) { margin-bottom: 14px; }
  .nav-item:nth-child(9) { border-top: 1px solid rgba(190,212,255,.14); border-radius: 0 0 9px 9px; padding-top: 12px; }
  .brand { padding: 0 5px 18px; gap: 11px; }
  .brand-mark { width: 54px; height: 48px; border: 0; background: transparent; box-shadow: none; }
  .brand-mark svg { width: 48px; height: 48px; }
  .brand-name { font-size: 22px; letter-spacing: 0; }
  .brand-sub { font-size: 10px; color: #a9c5f6; letter-spacing: .02em; }
}
.app-shell { background: #eaf2ff; }
.sidebar { background: radial-gradient(ellipse at 55% 105%,rgba(0,153,255,.24),transparent 22%),linear-gradient(180deg,#0b1c43 0%,#102e69 100%); }
.sidebar::after { content:""; position:absolute; pointer-events:none; inset:auto 0 0; height:140px; opacity:.48; background:repeating-radial-gradient(ellipse at 25% 120%,transparent 0 17px,rgba(17,191,255,.24) 18px 19px,transparent 20px 34px); mask-image:linear-gradient(0deg,#000,transparent); }
.sidebar > * { position:relative; z-index:1; }
.nav-item { color:#d2dff8; }
.nav-item.active { background:linear-gradient(105deg,#1897ff,#1558f4); box-shadow:0 9px 24px rgba(5,91,245,.32); }
.nav-live { background:#f54b58; color:#fff; border-radius:20px; padding:3px 8px; font-size:10px; font-weight:800; }
.nav-badge { min-width:23px; height:23px; font-size:12px; background:#fb4c5c; }
.topbar { background:linear-gradient(100deg,#10285f,#0b2255 65%,#102b62); height:80px; padding:0 30px; gap:20px; box-shadow:none; }
.top-search { width:min(480px,42vw); height:44px; border-radius:24px; border-color:rgba(184,211,255,.28); background:rgba(210,227,255,.14); }
.top-search input { font-size:14px; }
.top-action { height:44px; padding:0 20px; font-size:15px; background:rgba(139,179,255,.17); border:0; }
.top-action svg { width:24px; height:24px; }
.top-icon svg { width:23px; height:23px; }
.top-user .avatar { width:44px; height:44px; }
.main-content { max-width:none; padding:10px 12px 30px; }
.page-banner { min-height:112px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 12px; padding:17px 26px; border-radius:14px; color:#fff; background:radial-gradient(ellipse at 78% 12%,rgba(0,205,255,.42),transparent 26%),radial-gradient(ellipse at 57% 130%,rgba(8,117,255,.65),transparent 40%),linear-gradient(105deg,#092a76 0%,#0751c4 56%,#0a276b 100%); isolation:isolate; box-shadow:0 5px 14px rgba(20,79,175,.12); }
.page-banner::before { content:""; position:absolute; z-index:-1; inset:0; opacity:.36; background:repeating-linear-gradient(147deg,transparent 0 42px,rgba(67,207,255,.31) 43px,transparent 46px 78px),radial-gradient(ellipse at 91% 118%,transparent 0 25%,rgba(47,208,255,.55) 25.2% 25.5%,transparent 26% 31%,rgba(59,193,255,.42) 31.2% 31.5%,transparent 32% 38%,rgba(59,193,255,.3) 38.2% 38.5%,transparent 39%); }
.page-banner-copy { display:flex; align-items:center; gap:20px; z-index:1; }
.page-banner-mark { display:grid; place-items:center; width:82px; height:76px; color:#22d7ff; filter:drop-shadow(0 2px 10px rgba(0,198,255,.45)); }
.page-banner-mark svg { width:62px; height:62px; stroke-width:1.7; }
.page-title { color:#fff; font-size:34px; letter-spacing:0; margin:0; }
.page-subtitle { color:#e0edff; font-size:15px; margin:5px 0 0; }
.page-banner-scene { position:absolute; inset:0 4% 0 48%; display:flex; align-items:center; justify-content:flex-end; gap:26px; overflow:hidden; opacity:.95; }
.scene-drone { color:#d7fbff; filter:drop-shadow(0 2px 12px #00ccff); transform:translateY(-5px); }
.scene-drone svg { width:90px;height:70px;stroke-width:1.25; }
.scene-screen,.scene-code { display:grid;place-items:center;width:90px;height:60px;border:1px solid rgba(90,229,255,.75);border-radius:8px;background:linear-gradient(145deg,rgba(8,221,255,.35),rgba(36,103,255,.4));color:#7cf0ff;font-size:30px;font-weight:900;box-shadow:0 0 22px rgba(0,198,255,.45),inset 0 0 16px rgba(68,215,255,.25);transform:skewY(-7deg); }
.scene-code { font-size:23px; }
.scene-wave { position:absolute; z-index:-1; left:0; right:-5%; bottom:-68px; height:100px; border-top:1px solid rgba(61,223,255,.7); border-radius:50%; box-shadow:0 -13px 0 -1px rgba(53,190,255,.24),0 -25px 0 -1px rgba(42,189,255,.2),0 -40px 0 -2px rgba(42,189,255,.16); transform:rotate(-4deg); }
.page-banner-actions { position:relative; z-index:3; }
.page-banner-actions .btn { background:linear-gradient(105deg,#16c8ee,#1267f8); color:#fff; border:0; font-size:14px; min-height:42px; }
.panel { border-radius:15px; border-color:#e2ecfc; box-shadow:0 6px 18px rgba(34,93,176,.1); }
.panel-pad { padding:16px; }
.panel-head { margin-bottom:12px; }
.panel-title { font-size:16px; }
.panel-sub { font-size:11px; }
.grid { gap:12px; }
.spacer-16 { height:12px; }
.page-dashboard { padding-top:20px; padding-right:16px; padding-left:16px; }
.page-dashboard .hero { min-height:225px; border-radius:14px; padding:26px 32px; }
.page-dashboard .hero h2 { font-size:36px; }
.page-dashboard .hero p { font-size:16px; }
.page-dashboard .hero .btn { min-height:42px; border-radius:20px; font-size:15px; color:#fff; background:linear-gradient(90deg,#18c6e9,#1462f6); }
.dashboard-top { grid-template-columns:minmax(0,1.8fr) minmax(370px,.86fr); gap:12px; margin-bottom:17px; }
.dashboard-top .summary-panel { min-height:225px; }
.dashboard-middle { display:grid; grid-template-columns:1.35fr 1fr 1.05fr; gap:12px; margin-bottom:16px; }
.dashboard-middle > .panel { min-height:220px; }
.dashboard-middle .list-row { padding:11px 0; }
.quick-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.quick-link { display:grid; place-items:center; gap:8px; min-height:78px; border:1px solid #edf2fc; border-radius:13px; background:linear-gradient(150deg,#f1f6ff,#fff); color:#172c58; }
.quick-link span { display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:#0878ff;background:linear-gradient(145deg,#e8f2ff,#fff);box-shadow:0 3px 9px rgba(34,117,242,.12); }
.quick-link:nth-child(3n+2) span { color:#7156ee;background:#f1efff; }
.quick-link b { font-size:12px; }
.dashboard-bottom { display:grid; grid-template-columns:1.55fr .95fr 1fr; gap:12px; }
.dashboard-bottom > .panel { min-height:236px; }
.dashboard-bottom .grid.four { grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.dashboard-bottom .course-card { padding:8px; }
.dashboard-bottom .course-cover { height:82px; }
.dashboard-bottom .course-description { display:none; }
.dashboard-bottom .course-card h3 { font-size:12px; margin:7px 2px; }
.dashboard-bottom .course-progress { margin-top:8px; }
.dashboard-bottom .list-row { padding:11px 0; }
.course-layout { grid-template-columns:minmax(0,1.7fr) minmax(320px,.9fr); gap:14px; }
.course-layout > .stack-16:first-child > .panel:first-child { padding:12px 15px; }
.course-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
.course-card { padding:9px; }
.course-cover { height:110px; border-radius:10px; }
.course-card h3 { font-size:15px; }
.course-description { font-size:11px; min-height:32px; }
.course-progress { font-size:10px; }
.course-hero-side .detail-hero { min-height:180px; }
.assistant-welcome { min-height:155px; display:flex; align-items:center; gap:16px; margin-bottom:12px; overflow:hidden; border:1px solid #dbeaff; border-radius:15px; padding:13px 20px; background:radial-gradient(ellipse at 13% 120%,rgba(89,174,255,.4),transparent 34%),linear-gradient(110deg,#d8eaff,#f4f9ff 50%,#e8f3ff); }
.assistant-robot { flex:0 0 150px; display:grid; place-items:center; height:130px; color:#0e8fff; }
.assistant-robot svg { width:115px;height:115px;stroke-width:1.2;filter:drop-shadow(0 6px 10px rgba(0,127,255,.25)); }
.assistant-welcome-copy { display:flex;flex-direction:column;gap:8px;min-width:220px; }
.assistant-welcome-copy strong { color:#092a69;font-size:30px; }
.assistant-welcome-copy span { color:#5077b7;font-size:14px; }
.assistant-shortcuts { display:flex;gap:9px;margin-left:auto; }
.assistant-shortcut { display:flex;align-items:center;gap:9px;min-width:126px;padding:12px;border:1px solid #dceafe;border-radius:12px;background:#fff;color:#21406c;text-align:left; }
.assistant-shortcut span { display:grid;place-items:center;width:35px;height:35px;border-radius:10px;color:#1780f4;background:#eaf3ff; }
.assistant-shortcut b { font-size:12px; }
.assistant-layout { display:grid;grid-template-columns:minmax(220px,.65fr) minmax(440px,1.75fr) minmax(280px,1fr);gap:12px;align-items:stretch; }
.assistant-layout > .panel,.assistant-right > .panel { min-width:0; }
.assistant-history { min-height:590px; }
.assistant-chat-panel { min-height:590px;display:flex;flex-direction:column; }
.assistant-chat-panel .ai-chat { flex:1;min-height:230px;max-height:430px; }
.assistant-right { display:grid;align-content:start;gap:12px; }
.assistant-tool-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
.assistant-tool-grid .assistant-shortcut { min-width:0; padding:9px; }
.assistant-tool-grid .assistant-shortcut span { flex:0 0 34px; }
.recommend-row { width:100%;display:flex;align-items:center;gap:10px;padding:10px 0;border:0;border-top:1px solid #edf2fa;background:transparent;text-align:left;color:#193461; }
.recommend-icon { width:40px;height:40px;display:grid;place-items:center;border-radius:10px;color:#1878ee;background:#eaf3ff; }
.recommend-row > span:nth-child(2) { display:grid;gap:4px;min-width:0;flex:1; }
.recommend-row b { font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.recommend-row small { color:#91a1ba;font-size:10px; }
.assistant-usage { display:grid;gap:7px; }
.assistant-usage strong { font-size:26px;color:#1458d2; }
.assistant-usage span,.assistant-usage small { color:#8495b0;font-size:11px; }
.project-page-layout { display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:13px; }
.project-main { min-width:0;display:grid;align-content:start;gap:12px; }
.project-category-tabs { display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px; }
.project-category-button { min-height:61px;display:flex;align-items:center;justify-content:center;gap:8px;position:relative;border:1px solid #dfebfd;border-radius:13px;background:linear-gradient(150deg,#fff,#f1f6ff);color:#21375f;font-weight:800; }
.project-category-button svg { color:#1677f3;width:24px;height:24px; }
.project-category-button small { display:none; }
.project-category-button.active { color:#fff;background:linear-gradient(105deg,#14a5ff,#0759ef); }
.project-category-button.active svg { color:#fff; }
.project-gallery-panel { min-height:540px; }
.project-toolbar { display:flex;align-items:center;gap:9px;margin-bottom:13px; }
.project-tabs { display:flex;align-items:center;gap:20px;flex:1; }
.project-tab { position:relative;border:0;background:transparent;color:#5b6e90;font-weight:700;padding:9px 2px; }
.project-tab.active { color:#095be7; }
.project-tab.active::after { content:"";position:absolute;bottom:0;left:0;right:0;height:3px;border-radius:3px;background:#1168fa; }
.project-search { max-width:235px; }
.project-gallery-panel .grid.three { gap:11px; }
.project-card { padding:7px; }
.project-art { min-height:124px;border-radius:10px;background:radial-gradient(circle at 70% 25%,rgba(38,215,255,.7),transparent 22%),linear-gradient(135deg,#122c73,#075fce 62%,#12bee4); }
.project-art::before { content:"";position:absolute;inset:0;background:repeating-linear-gradient(165deg,transparent 0 20px,rgba(118,216,255,.2) 21px,transparent 23px 39px); }
.project-body { padding:10px 8px; }
.project-body p { margin:7px 0;min-height:30px; }
.project-sidebar { display:grid;align-content:start;gap:12px; }
.project-summary-numbers { display:grid;grid-template-columns:repeat(2,1fr);gap:10px 6px; }
.project-summary-numbers div { display:grid;place-items:center;gap:3px;padding:9px 2px;border-radius:10px;background:#f3f7ff; }
.project-summary-numbers strong { font-size:21px;color:#122a61; }
.project-summary-numbers span { font-size:10px;color:#7285a8; }
.honor-row { display:flex;align-items:center;gap:8px;padding:10px 0;border-top:1px solid #edf2f9; }
.honor-row span { color:#f5a50d; }
.honor-row strong { flex:1;font-size:11px; }
.honor-row small { font-size:9px;color:#8495b0; }
.project-promo { min-height:148px;display:grid;align-content:center;justify-items:start;gap:6px;position:relative;overflow:hidden;padding:18px;border-radius:14px;color:#fff;background:radial-gradient(circle at 86% 46%,rgba(255,199,58,.48),transparent 26%),linear-gradient(110deg,#0876f5,#062e84); }
.project-promo > span { position:absolute;right:20px;top:20px;color:#ffe783; }
.project-promo strong { font-size:22px; }
.project-promo p { margin:0;color:#cfdeff;font-size:11px; }
.project-promo .btn { margin-top:5px;background:white;color:#1260cc;border:0; }
.assignment-page-layout { display:grid;grid-template-columns:minmax(0,1.8fr) minmax(305px,.8fr);gap:13px; }
.assignment-main-panel { min-height:600px; }
.assignment-type-tabs { display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:14px; }
.assignment-type { min-height:58px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #e1eafa;border-radius:12px;background:linear-gradient(160deg,#fff,#f2f6fd);color:#243b64; }
.assignment-type svg { color:#116cf1;width:24px;height:24px; }
.assignment-type.active { color:#fff;background:linear-gradient(100deg,#119cff,#0859ef); }
.assignment-type.active svg { color:#fff; }
.assignment-toolbar { display:flex;align-items:center;gap:8px;margin-bottom:12px; }
.assignment-toolbar .chips { flex:1; }
.assignment-toolbar .field { max-width:185px; }
.assignment-toolbar .search-field { max-width:225px; }
.assignment-toolbar .chip i { font-style:normal;display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border-radius:20px;color:#fff;background:#fa5362; }
.assignment-list { gap:0;padding:0 10px; }
.assignment-card { min-height:93px;padding:11px 0;border:0;border-top:1px solid #e8eef7;border-radius:0;box-shadow:none;background:transparent; }
.assignment-card:hover { transform:none;box-shadow:none;background:#f8fbff; }
.assignment-card::before { content:"";width:145px;height:82px;flex:0 0 145px;border-radius:9px;background:radial-gradient(circle at 70% 25%,rgba(33,205,255,.62),transparent 24%),linear-gradient(135deg,#092763,#087bdf 68%,#36c8ee); }
.assignment-card:nth-child(3n)::before { background:radial-gradient(circle at 50% 50%,#23d5fa,transparent 28%),linear-gradient(135deg,#071b51,#1453d7); }
.assignment-card .assignment-icon { display:none; }
.assignment-card .assignment-main { gap:7px; }
.assignment-title { font-size:15px; }
.assignment-meta { font-size:10px;white-space:normal; }
.assignment-sidebar { display:grid;align-content:start;gap:12px; }
.assignment-progress { display:flex;align-items:center;justify-content:space-around;gap:12px; }
.assignment-progress .ring { width:112px;height:112px; }
.assignment-progress .summary-list { gap:13px; }
.assignment-progress .summary-line { font-size:12px; }
.dot { display:inline-block;width:11px;height:11px;margin-right:8px;border-radius:50%; }
.blue-dot { background:#1783ff; }.green-dot { background:#1bbd87; }.red-dot { background:#fa5568; }.gray-dot { background:#dce5f3; }
.growth-overview-row { display:grid;grid-template-columns:270px minmax(0,1fr);gap:12px;margin-bottom:12px; }
.growth-student { display:flex;align-items:center;gap:12px;padding:12px;min-height:81px;background:linear-gradient(120deg,#d9eaff,#fff); }
.growth-student > div { display:grid;gap:4px; }
.growth-student strong { font-size:15px;color:#14295a; }
.growth-student small { color:#677d9f;font-size:10px; }
.level-badge { color:#b87600;font-size:10px;font-weight:800; }
.growth-kpis { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px; }
.growth-kpis .stat-card { min-height:81px;padding:9px 12px; }
.growth-kpis .stat-icon { width:26px;height:26px; }
.growth-kpis .stat-value { margin-top:5px;font-size:19px; }
.growth-kpis .stat-label { font-size:9px; }
.growth-layout { display:grid;grid-template-columns:minmax(0,1.9fr) minmax(300px,.8fr);gap:12px; }
.growth-main,.growth-sidebar { display:grid;align-content:start;gap:12px; }
.growth-top-panels,.growth-bottom-panels,.growth-lower-panels { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.growth-progress-layout { display:flex;align-items:center;gap:25px; }
.large-ring { width:132px;height:132px; }
.growth-bars { flex:1;display:grid;gap:14px; }
.purple-fill { background:linear-gradient(90deg,#8757ff,#4a64ff); }
.growth-progress-layout .empty { padding:8px; }
.report-card { position:relative;overflow:hidden;min-height:100px;display:grid;align-content:center;gap:6px;padding:14px;border-radius:12px;color:#17417e;background:linear-gradient(110deg,#e5efff,#f7fbff); }
.report-card strong { font-size:17px; }
.report-card span { font-size:10px;color:#637da7; }
.report-graphic { position:absolute;right:18px;top:18px;color:#1486ff; }
.report-stats { display:grid;margin:10px 0; }
.report-stats div { display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #edf2f9;font-size:11px;color:#526a8d; }
.report-stats strong { color:#182c56; }
.notification-type-tabs { display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin:0 0 12px; }
.notification-type { display:flex;align-items:center;justify-content:center;gap:7px;min-height:56px;border:1px solid #dfeafb;border-radius:12px;background:#f9fbff;color:#21375e; }
.notification-type svg { color:#0875fb;width:24px;height:24px; }
.notification-type.active { color:#fff;background:linear-gradient(105deg,#0baaff,#075bf0); }
.notification-type.active svg { color:#fff; }
.notification-layout { grid-template-columns:minmax(350px,.72fr) minmax(0,1.28fr);gap:12px; }
.notification-list-toolbar { display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:11px;margin-bottom:10px;border-bottom:1px solid #eaf0f8;color:#506687;font-size:11px; }
.notification-list-toolbar .field { width:150px;min-width:0; }
.notification-search { width:180px; }
.notification-item { padding:11px 9px;border-bottom:1px solid #edf2fa;border-radius:9px; }
.notification-item.active { background:#eaf3ff;border-color:#d8e8ff; }
.notification-item .row-icon { width:42px;height:42px;border-radius:12px; }
.notification-detail { min-height:475px;gap:14px; }
.notification-detail h2 { font-size:20px; }
.notification-content { min-height:110px;background:#f0f5ff;font-size:14px;color:#263d64; }
.profile-overview { min-height:150px;background:radial-gradient(ellipse at 100% 0,#e9f4ff,transparent 35%),linear-gradient(120deg,#d8eaff,#fff); }
.profile-overview .avatar.large { width:92px;height:92px;font-size:30px;border:5px solid white;box-shadow:0 4px 16px rgba(27,94,174,.18); }
.profile-overview h2 { font-size:24px; }
.profile-overview .row-sub { font-size:13px; }
.profile-badges { margin-left:12px; }
.profile-overview + .spacer-16 + .grid.two { align-items:start; }
.profile-overview + .spacer-16 + .grid.two > section:first-child { grid-column:1; }
.profile-overview + .spacer-16 + .grid.two > div { grid-column:2; }
.profile-overview + .spacer-16 + .grid.two + .spacer-16 + .grid.two { grid-template-columns:1fr 1fr; }
.course-detail .page-banner { min-height:88px; }
@media (max-width:1280px) {
  .page-banner-scene { opacity:.45; }
  .assistant-layout { grid-template-columns:220px minmax(0,1fr); }
  .assistant-right { grid-column:1/-1;grid-template-columns:repeat(3,1fr); }
  .assignment-page-layout,.growth-layout { grid-template-columns:minmax(0,1fr) 300px; }
}
@media (max-width:960px) {
  .page-banner { min-height:100px;padding:14px; }
  .page-title { font-size:25px; }
  .page-subtitle { font-size:12px; }
  .page-banner-mark { width:52px;height:52px; }
  .page-banner-mark svg { width:44px;height:44px; }
  .dashboard-middle,.dashboard-bottom { grid-template-columns:1fr; }
  .project-page-layout,.assignment-page-layout,.growth-layout { grid-template-columns:1fr; }
  .project-sidebar,.growth-sidebar { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .assignment-type-tabs,.notification-type-tabs { grid-template-columns:repeat(3,1fr); }
  .growth-overview-row { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .page-banner { min-height:94px;padding:12px;border-radius:12px; }
  .page-banner-copy { gap:8px; }
  .page-banner-mark { width:42px;height:42px; }
  .page-banner-mark svg { width:36px;height:36px; }
  .page-title { font-size:21px; }
  .page-subtitle { font-size:10px;max-width:230px; }
  .page-banner-scene { opacity:.22;left:40%; }
  .page-banner-actions { position:absolute;right:10px;top:10px; }
  .page-banner-actions .btn { min-height:32px;font-size:10px;padding:0 8px; }
  .dashboard-top,.course-layout,.assistant-layout,.notification-layout { grid-template-columns:1fr; }
  .dashboard-bottom .grid.four { grid-template-columns:repeat(2,1fr); }
  .quick-grid { grid-template-columns:repeat(4,1fr); }
  .quick-link { min-height:66px; }
  .assistant-welcome { align-items:flex-start;min-height:115px;padding:10px; }
  .assistant-robot { flex-basis:55px;height:80px; }
  .assistant-robot svg { width:60px;height:60px; }
  .assistant-welcome-copy { min-width:0; }
  .assistant-welcome-copy strong { font-size:20px; }
  .assistant-welcome-copy span { font-size:10px; }
  .assistant-shortcuts { display:none; }
  .assistant-right,.project-sidebar { grid-template-columns:1fr; }
  .project-category-tabs { grid-template-columns:repeat(3,1fr); }
  .project-toolbar { flex-wrap:wrap; }
  .project-tabs { width:100%;gap:10px;overflow:auto; }
  .project-search { max-width:none;flex:1; }
  .project-gallery-panel .grid.three,.growth-top-panels,.growth-bottom-panels,.growth-lower-panels { grid-template-columns:1fr; }
  .assignment-type-tabs,.notification-type-tabs { grid-template-columns:repeat(2,1fr); }
  .assignment-toolbar { flex-wrap:wrap; }
  .assignment-card::before { width:64px;height:56px;flex-basis:64px; }
  .assignment-card { gap:8px; }
  .assignment-card .pill { white-space:normal; }
  .growth-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .growth-student { min-height:74px; }
  .notification-list-toolbar { flex-wrap:wrap; }
  .notification-list-toolbar .field,.notification-search { width:100%; }
  .profile-overview + .spacer-16 + .grid.two > section:first-child,.profile-overview + .spacer-16 + .grid.two > div { grid-column:auto; }
}

@media (max-width: 720px) {
  .auth-screen { grid-template-columns: 1fr; }
  .auth-art { display: none; }
  .auth-panel-wrap { min-height: 100vh; padding: 22px; }
  .auth-panel { padding: 26px; }
}

@media (max-width: 1280px) {
  .app-shell { grid-template-columns: 216px minmax(0,1fr); }
  .main-content { padding: 22px 20px 34px; }
  .grid.four { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .course-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hero-symbol { right: 3%; opacity: .65; }
}
@media (max-width: 960px) {
  .app-shell { grid-template-columns: 68px minmax(0,1fr); }
  .sidebar { padding: 17px 8px; }
  .brand { justify-content: center; padding: 0 0 20px; }
  .brand-copy, .nav-caption, .nav-label, .nav-badge, .profile-mini-text { display: none; }
  .nav-item { justify-content: center; padding: 0; }
  .nav-item svg { width: 21px; height: 21px; }
  .profile-mini { justify-content: center; padding: 7px 0; }
  .dashboard-top, .course-layout, .split-layout { grid-template-columns: 1fr; }
  .notification-layout { grid-template-columns: 1fr; }
  .topbar { padding: 0 16px; gap: 9px; }
  .top-search { width: min(390px,40vw); }
  .top-action .action-label, .top-user-info { display: none; }
  .hero-symbol { right: 2%; opacity: .4; }
}
@media (max-width: 640px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 30; height: 61px; min-height: 0; inset: auto 0 0; padding: 5px 8px calc(5px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.1); overflow: visible; }
  .brand, .sidebar-foot, .nav-caption { display: none; }
  .nav-list { display: flex; justify-content: space-around; gap: 2px; }
  .nav-item { width: auto; min-width: 38px; height: 48px; min-height: 48px; flex-direction: column; gap: 2px; padding: 3px 6px; border-radius: 11px; }
  .nav-item svg { width: 18px; height: 18px; }
  .nav-label { display: block; font-size: 8px; }
  .nav-badge { display: grid; position: absolute; min-width: 15px; height: 15px; font-size: 8px; top: 0; right: 1px; padding: 0 3px; }
  .nav-item:nth-child(n+6) { display: none; }
  .topbar { height: 60px; padding: 0 12px; }
  .top-search { width: auto; flex: 1; height: 36px; }
  .top-action { width: 36px; padding: 0; justify-content: center; }
  .top-icon { width: 32px; height: 32px; }
  .top-user { display: none; }
  .main-content { padding: 17px 12px 80px; }
  .page-title { font-size: 21px; }
  .page-head { align-items: start; }
  .profile-overview { align-items: start; flex-wrap: wrap; }
  .profile-badges { width: 100%; justify-content: start; margin-left: 0; }
  .head-actions { justify-content: end; }
  .hero { min-height: 198px; padding: 22px 19px; }
  .hero-symbol { display: none; }
  .grid.two, .grid.three, .grid.four, .course-grid, .two-col-layout { grid-template-columns: 1fr; }
  .course-cover { height: 145px; }
  .learning-summary { align-items: start; }
  .ring { width: 90px; height: 90px; }
  .auth-screen { grid-template-columns: 1fr; }
  .auth-art { display: none; }
  .auth-panel-wrap { min-height: 100vh; padding: 18px; }
  .auth-panel { padding: 24px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .field-group.full { grid-column: auto; }
  .pagination { align-items: start; gap: 10px; flex-direction: column; }
}

.sidebar-foot { display:none; }
.window-controls { display:flex;align-items:center;gap:0;margin-left:4px;border-left:1px solid rgba(186,207,241,.18);padding-left:10px;color:#d7e4fa;font-size:18px;line-height:1; }
.window-controls span { display:grid;place-items:center;width:34px;height:34px;border-radius:4px; }
.window-controls span:last-child { font-size:25px; }
.window-controls span:hover { background:rgba(255,255,255,.12); }
.brand-mark svg { width:58px;height:52px;filter:drop-shadow(0 2px 5px rgba(0,196,255,.2)); }
.page-dashboard { min-height:calc(100vh - 86px); }
.dashboard-bottom { flex:1; }
.dashboard-middle > .panel { min-height:278px; }
.dashboard-bottom > .panel { min-height:268px; }
.dashboard-bottom .grid.four { align-content:start; }
.dashboard-middle .empty,.dashboard-bottom .empty { padding:18px 10px; }
.classroom-toolbar { display:flex;align-items:center;justify-content:space-between;gap:20px;padding:8px 12px 13px;margin-bottom:10px;border-bottom:1px solid #d9e5f8; }
.classroom-course-title { display:grid;grid-template-columns:auto 1fr;align-items:center;gap:3px 10px; }
.classroom-course-title .text-link { grid-row:1/3;align-self:center; }
.classroom-course-title strong { color:#122656;font-size:19px; }
.classroom-course-title span { color:#7183a3;font-size:11px; }
.classroom-service-status { display:flex;align-items:center;gap:11px;color:#577098;font-size:11px; }
.classroom-service-status > span { display:flex;align-items:center;gap:5px; }
.classroom-layout { display:grid;grid-template-columns:minmax(220px,.7fr) minmax(420px,2fr) minmax(270px,1fr);gap:11px;align-items:stretch; }
.classroom-outline { min-height:570px;padding:14px; }
.classroom-panel-title { display:flex;align-items:center;gap:9px;margin-bottom:12px;color:#155cda;font-size:15px;font-weight:800; }
.classroom-schedule-list { display:grid;gap:6px; }
.classroom-schedule-item { display:grid;grid-template-columns:25px minmax(0,1fr) auto;align-items:center;gap:8px;padding:10px 8px;border-radius:9px;background:#f4f7fd;color:#293f69; }
.classroom-schedule-item.selected { color:#075ce9;background:#e8f1ff; }
.classroom-schedule-item > div { display:grid;gap:4px;min-width:0; }
.classroom-schedule-item b { font-size:11px; }
.classroom-schedule-item small { color:#8293af;font-size:9px; }
.classroom-material-note { display:flex;align-items:center;gap:8px;margin-top:18px;padding-top:13px;border-top:1px solid #edf1f8;color:#8797af;font-size:10px;line-height:1.5; }
.classroom-main { min-width:0;display:grid;grid-template-rows:minmax(300px,1fr) auto auto;gap:9px; }
.classroom-stage { min-height:350px;position:relative;overflow:hidden;display:grid;place-items:center;border:1px solid #dce8fa;border-radius:13px;background:radial-gradient(ellipse at 50% 40%,rgba(12,130,255,.34),transparent 38%),linear-gradient(135deg,#071a44,#0c3275 58%,#071631);color:#fff; }
.classroom-stage::before { content:"";position:absolute;inset:0;opacity:.2;background:repeating-linear-gradient(145deg,transparent 0 40px,rgba(68,202,255,.28) 41px 42px,transparent 44px 70px); }
.stage-status { position:absolute;top:13px;left:14px;z-index:1;padding:6px 10px;border-radius:8px;background:rgba(242,68,90,.92);font-size:10px;font-weight:800; }
.stage-status i { display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:#fff; }
.classroom-stage-graphic { position:relative;z-index:1;display:flex;align-items:center;gap:17px;color:#79dfff; }
.classroom-stage-graphic > svg { width:76px;height:76px;stroke-width:1.3;filter:drop-shadow(0 0 14px rgba(38,175,255,.5)); }
.classroom-stage-graphic > div { display:grid;gap:9px; }
.classroom-stage-graphic strong { color:white;font-size:22px; }
.classroom-stage-graphic span { color:#aacaf3;font-size:12px; }
.stage-caption { position:absolute;left:15px;bottom:12px;color:#a7c0e6;font-size:10px; }
.classroom-thumbnail-row { display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:8px; }
.classroom-thumbnail-row > div { display:grid;grid-template-columns:25px 1fr;gap:4px 7px;align-items:center;padding:10px;border:1px solid #e1eafa;border-radius:10px;background:white; }
.classroom-thumbnail-row svg { grid-row:1/3;color:#0b6ceb; }
.classroom-thumbnail-row b { font-size:10px;color:#264069; }
.classroom-thumbnail-row span { color:#8495b0;font-size:9px; }
.classroom-controlbar { display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #e1eafa;border-radius:11px;background:#fff; }
.classroom-controlbar button { display:grid;justify-items:center;gap:3px;min-width:62px;border:0;background:transparent;color:#24416e;font-size:9px; }
.classroom-controlbar button svg { width:21px;height:21px;color:#125ce4; }
.classroom-controlbar .classroom-recording-note { display:flex;align-items:center;gap:5px;margin-left:auto;color:#8494ad; }
.classroom-controlbar .classroom-recording-note svg { width:15px;height:15px;color:#7387aa; }
.classroom-right { min-width:0;display:grid;grid-template-rows:auto 1fr auto;gap:10px; }
.classroom-chat-empty { min-height:130px;display:grid;place-content:center;justify-items:center;gap:8px;color:#8093b2;text-align:center; }
.classroom-chat-empty svg { color:#2b7ff0;width:31px;height:31px; }
.classroom-chat-empty strong { color:#324b71;font-size:12px; }
.classroom-chat-empty span { max-width:210px;font-size:10px;line-height:1.5; }
.classroom-chat-disabled { color:#a0aec2;background:#f7f9fd; }
.classroom-policy-note { display:flex;align-items:center;gap:7px;padding:10px 7px;color:#8393ad;font-size:10px; }
.classroom-policy-note > svg { color:#2573e5; }
.profile-dashboard { display:grid;grid-template-columns:minmax(250px,.56fr) minmax(0,1.9fr);gap:12px;align-items:start; }
.profile-left,.profile-right { display:grid;align-content:start;gap:11px; }
.profile-identity { padding:17px;background:radial-gradient(ellipse at 100% 0,#c9e3ff,transparent 43%),linear-gradient(125deg,#e0efff,#fff); }
.profile-identity-top { display:flex;align-items:center;gap:14px; }
.profile-avatar-img { object-fit:cover; }
.profile-identity-top .avatar { width:90px;height:90px;border:5px solid #fff;font-size:30px;box-shadow:0 4px 15px rgba(30,99,180,.18); }
.profile-identity-top > div { display:grid;gap:5px; }
.profile-identity-top strong { font-size:18px;color:#172b59; }
.profile-identity-top span:not(.avatar) { font-size:11px;color:#4d668e; }
.profile-identity-top small { font-size:10px;color:#7d8ea8; }
.profile-identity-badge { margin:12px 0 0;padding:7px 10px;border-radius:18px;background:#fff0bf;color:#a86e00;font-size:10px;font-weight:800; }
.profile-level { display:flex;align-items:center;gap:12px; }
.profile-level-icon { display:grid;place-items:center;width:54px;height:54px;border-radius:15px;color:#7447ef;background:linear-gradient(145deg,#f1eaff,#fff); }
.profile-level > div:last-child { flex:1;display:grid;gap:7px; }
.profile-level strong { color:#203561;font-size:12px; }
.profile-level small { color:#6f81a1;font-size:10px; }
.profile-next-level { margin-top:10px;padding-top:10px;border-top:1px solid #eef2f8;color:#8494ac;font-size:10px; }
.profile-menu { display:grid;padding:5px 13px;border:1px solid #e2ebf9;border-radius:14px;background:#fff;box-shadow:0 6px 18px rgba(34,93,176,.1); }
.profile-menu button { display:flex;align-items:center;gap:10px;padding:12px 2px;border:0;border-bottom:1px solid #edf2fa;background:transparent;text-align:left;color:#1268e7; }
.profile-menu button:last-child { border-bottom:0; }
.profile-menu button > span { display:grid;gap:3px;flex:1; }
.profile-menu b { color:#21375f;font-size:11px; }
.profile-menu small { color:#8b9ab2;font-size:9px; }
.profile-kpis { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px; }
.profile-kpis .stat-card { min-height:82px;padding:9px 12px; }
.profile-kpis .stat-icon { width:27px;height:27px; }
.profile-kpis .stat-value { margin-top:5px;font-size:19px; }
.profile-kpis .stat-label { font-size:9px; }
.profile-learning-row,.profile-feature-row { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.profile-learning-row > .panel,.profile-feature-row > .panel { min-width:0; }
.profile-learning-row .learning-summary { gap:14px; }
.profile-learning-row .ring { width:112px;height:112px; }
.profile-feature-row .empty { padding:16px 8px; }
.profile-awards { display:grid;grid-template-columns:repeat(5,1fr);gap:5px; }
.profile-award { display:grid;justify-items:center;gap:5px;padding:9px 3px;border-radius:10px;background:#f4f7ff;color:#e59a16;text-align:center; }
.profile-award b { color:#3d5278;font-size:9px; }
.profile-projects { display:grid;grid-template-columns:repeat(3,1fr);gap:6px; }
.profile-project { display:grid;justify-items:center;align-content:center;gap:6px;min-height:88px;border:0;border-radius:10px;background:linear-gradient(145deg,#123572,#1483e6);color:white; }
.profile-project b { max-width:100%;padding:0 3px;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.profile-ability-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:11px; }
.profile-ability-grid > div { display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:center; }
.profile-ability-grid span { color:#52698f;font-size:10px; }
.profile-ability-grid strong { color:#16914f;font-size:12px; }
.profile-ability-grid .progress-track { grid-column:1/-1; }
.profile-settings-layout { display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.8fr);gap:12px;margin-top:12px;align-items:start; }
.profile-settings-layout.profile-records { grid-template-columns:1fr 1fr; }
.profile-settings-layout > section > .panel { min-height:100%;box-shadow:none; }
.profile-records .panel-pad { padding:3px; }
.profile-records .panel-pad > .panel { padding:13px; }
.page-assistant .page-banner,.page-lab .page-banner { color:#17417a;background:radial-gradient(ellipse at 15% 120%,rgba(73,154,255,.44),transparent 32%),linear-gradient(105deg,#d9eaff,#eef6ff 55%,#e2efff);border:1px solid #d8e8fd; }
.page-assistant .page-banner::before,.page-lab .page-banner::before { opacity:.18; }
.page-assistant .page-title,.page-lab .page-title { color:#14346c; }
.page-assistant .page-subtitle,.page-lab .page-subtitle { color:#5575a7; }
.page-assistant .page-banner-mark,.page-lab .page-banner-mark { color:#1378f5; }
.page-assistant .page-banner-scene,.page-lab .page-banner-scene { opacity:.45; }
.page-classroom .page-banner { min-height:86px;margin-bottom:0; }
.page-classroom .page-banner .page-title { font-size:26px; }
.page-classroom .page-banner .page-subtitle { font-size:11px; }
@media(max-width:1280px) {
  .classroom-layout { grid-template-columns:220px minmax(0,1fr); }
  .classroom-right { grid-column:1/-1;grid-template-columns:repeat(3,1fr); }
  .profile-dashboard { grid-template-columns:1fr; }
  .profile-left { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .profile-menu { grid-column:1/-1;grid-template-columns:repeat(3,1fr); }
  .profile-menu button { padding:10px; }
}
@media(max-width:640px) {
  .window-controls { display:none; }
  .classroom-toolbar { align-items:flex-start;flex-direction:column; }
  .classroom-service-status { flex-wrap:wrap; }
  .classroom-layout { grid-template-columns:1fr; }
  .classroom-outline,.classroom-right { grid-column:auto;min-height:0; }
  .classroom-right { grid-template-columns:1fr; }
  .classroom-thumbnail-row { grid-template-columns:1fr 1fr; }
  .classroom-controlbar { flex-wrap:wrap; }
  .classroom-controlbar .classroom-recording-note { width:100%;margin-left:0; }
  .profile-left { grid-template-columns:1fr; }
  .profile-menu { grid-template-columns:1fr; }
  .profile-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .profile-learning-row,.profile-feature-row,.profile-settings-layout,.profile-settings-layout.profile-records { grid-template-columns:1fr; }
}

/* Reference screenshot alignment: dense desktop workspace with page-specific headers. */
.course-page-heading { display:flex; align-items:center; min-height:58px; padding:4px 18px 10px; background:#fff; border-bottom:1px solid #e6eefb; }
.course-page-heading h1 { margin:0; color:#102454; font-size:25px; letter-spacing:-.03em; }
.course-page-heading p { margin:5px 0 0; color:#7386a8; font-size:11px; }
.page-courses .main-content { padding-top:10px; }
.page-assistant .main-content, .page-classroom .main-content { padding-top:0; }
.page-courses .course-layout { grid-template-columns:minmax(0,1.58fr) minmax(380px,1fr); gap:12px; }
.page-courses .course-catalog-panel { padding-top:10px; }
.course-catalog-heading { padding:0 0 8px; }
.course-catalog-heading h1 { margin:0; color:#102454; font-size:25px; letter-spacing:-.03em; }
.course-catalog-heading p { margin:4px 0 0; color:#7386a8; font-size:11px; }
.page-courses .course-catalog-panel { display:flex; flex-direction:column; min-height:820px; }
.page-courses .course-catalog-panel > .empty { padding:145px 15px; }
.page-courses .course-catalog-panel > .pagination { margin-top:auto; }
.page-courses .course-hero-side { align-content:start; }
.course-spotlight-empty { display:grid; align-content:start; gap:12px; min-height:0; padding:0; border:0; border-radius:0; background:transparent; text-align:left; }
.course-spotlight-placeholder-hero { position:relative; display:grid; align-content:center; gap:8px; min-height:172px; overflow:hidden; padding:22px; border-radius:14px; color:white; background:radial-gradient(circle at 82% 20%,rgba(45,222,255,.46),transparent 24%),linear-gradient(130deg,#071f59,#086bcb 65%,#0b2f78); }
.course-spotlight-placeholder-hero::after { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(145deg,transparent 0 25px,rgba(94,214,255,.18) 26px 27px,transparent 29px 49px); }
.course-spotlight-placeholder-hero .spotlight-symbol { width:44px; height:44px; border-radius:13px; color:#7ef0ff; background:rgba(15,68,159,.55); }
.course-spotlight-placeholder-hero h2,.course-spotlight-placeholder-hero p,.course-spotlight-placeholder-hero .detail-meta { position:relative; z-index:1; }
.course-spotlight-placeholder-hero h2 { margin:0; color:#fff; font-size:19px; }
.course-spotlight-placeholder-hero p { max-width:300px; margin:0; color:#d8eaff; font-size:11px; line-height:1.55; }
.course-spotlight-placeholder-hero .pill { color:#eaf6ff; background:rgba(56,139,255,.28); border-color:rgba(173,218,255,.32); }
.course-spotlight-empty-note { margin-top:11px; color:#8193ad; font-size:10px; }
.course-status-tabs { display:flex; align-items:center; gap:26px; min-height:44px; border-bottom:1px solid #edf2fa; }
.course-status-tab { position:relative; border:0; background:transparent; color:#23385f; font-size:13px; font-weight:700; padding:12px 3px; }
.course-status-tab.active { color:#075fea; }
.course-status-tab.active::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:4px; border-radius:4px 4px 0 0; background:#176bfa; }
.course-exchange { margin-left:auto; min-height:34px; }
.course-category-row { display:flex; align-items:center; gap:15px; padding:12px 0 9px; }
.course-category-label { color:#7183a5; font-size:11px; white-space:nowrap; }
.course-category-row .chips { gap:7px; }
.course-category-row .chip { min-height:29px; padding:0 13px; background:#f2f6ff; }
.course-category-row .chip.active { background:#1467f5; }
.course-filter-toolbar { margin:5px 0 13px; padding:9px 0; border-top:1px solid #edf2fa; border-bottom:1px solid #edf2fa; }
.course-filter-toolbar .field { min-width:135px; height:34px; min-height:34px; }
.course-filter-toolbar .search-field { max-width:230px; }
.page-assistant .assistant-welcome { margin-top:7px; min-height:162px; }
.page-assistant .assistant-layout { min-height:650px; }
.assistant-robot { overflow:visible; }
.assistant-robot .robot-render { width:175px; height:140px; filter:drop-shadow(0 8px 12px rgba(25,114,227,.16)); }
.page-assistant .assistant-welcome-copy strong { font-size:31px; }
.page-assistant .assistant-welcome-copy span { font-size:13px; }
.page-assistant .assistant-shortcut { min-width:118px; }
.page-classroom .classroom-toolbar { padding-top:10px; }
.page-classroom .classroom-layout { min-height:660px; }
.page-classroom .classroom-stage { min-height:430px; }
.page-classroom .classroom-stage-graphic .drone-render { width:90px; }
.page-projects .page-banner, .page-assignments .page-banner, .page-growth .page-banner, .page-notifications .page-banner, .page-profile .page-banner { min-height:112px; }
.page-projects .project-page-layout { grid-template-columns:minmax(0,1fr) 340px; }
.page-projects .project-gallery-panel { min-height:590px; }
.page-projects .project-gallery-panel .grid.four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.page-projects .project-art { min-height:158px; }
.page-assignments .assignment-page-layout { grid-template-columns:minmax(0,1.82fr) minmax(315px,.78fr); }
.page-assignments .assignment-main-panel { min-height:630px; }
.page-assignments .assignment-type-tabs { gap:9px; }
.page-assignments .assignment-card::before { background:linear-gradient(135deg,#0b2e7e,#137af1 70%,#5ae4ff); }
.page-growth .growth-overview-row { margin-top:0; }
.page-growth .growth-layout { grid-template-columns:minmax(0,1.9fr) minmax(315px,.8fr); }
.page-notifications .notification-layout { grid-template-columns:minmax(420px,.88fr) minmax(0,1.2fr); }
.page-profile .profile-dashboard { grid-template-columns:minmax(340px,.56fr) minmax(0,1.9fr); }
.hero-symbol .robot-render { width:195px; height:150px; }
.hero-drone { position:absolute; right:-16px; bottom:-4px; width:134px; opacity:.9; transform:rotate(-3deg); }
.hero-drone .drone-render { width:134px; height:auto; }
.hero-code-panel { position:absolute; right:138px; top:18px; display:grid; place-items:center; width:72px; height:52px; border:1px solid rgba(111,231,255,.72); border-radius:8px; color:#8df5ff; background:rgba(42,178,255,.22); font-size:24px; font-weight:900; transform:skewY(-7deg); }
.page-dashboard .hero-symbol { width:340px; height:180px; right:6%; top:25px; }

@media (max-width:1280px) {
  .page-projects .project-gallery-panel .grid.four { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .page-courses .course-layout { grid-template-columns:minmax(0,1.4fr) minmax(330px,1fr); }
}
@media (max-width:960px) {
  .course-status-tabs { gap:13px; overflow:auto; }
  .course-category-row { align-items:flex-start; flex-direction:column; gap:7px; }
  .page-courses .course-layout, .page-projects .project-page-layout, .page-assignments .assignment-page-layout, .page-growth .growth-layout, .page-notifications .notification-layout { grid-template-columns:1fr; }
  .page-projects .project-gallery-panel .grid.four { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .page-dashboard .hero-symbol { opacity:.62; right:0; }
}

/* Tighten the page geometry to the supplied desktop student-workspace references. */
@media (min-width: 1281px) {
  .nav-item:nth-child(8) { margin-bottom: 0; }
  .nav-item:nth-child(9) { border-top: 0; border-radius: 9px; padding-top: 0; }
  .nav-item:nth-child(11) { margin-top: 0; margin-bottom: 14px; border-top: 0; border-radius: 9px; padding-top: 0; }
  .nav-item:nth-child(12) { border-top: 1px solid rgba(190,212,255,.18); border-radius: 0 0 9px 9px; padding-top: 12px; }
}

.course-cover { position:relative; }
.course-cover-image { position:absolute; inset:0; width:100%; height:100%; border-radius:inherit; object-fit:cover; }
.course-cover .pill,.course-cover-icon { position:relative; z-index:1; }
.course-cover:has(.course-cover-image)::before { content:""; position:absolute; z-index:1; inset:0; border-radius:inherit; background:linear-gradient(180deg,rgba(6,26,76,.05),rgba(5,22,59,.35)); }
.course-cover:has(.course-cover-image) .pill { background:rgba(17,104,241,.95); }
.course-cover:has(.course-cover-image) .course-cover-icon { display:none; }
.course-spotlight-card,.course-spotlight-progress,.course-spotlight-outline { padding:14px; border:1px solid #e0eafa; border-radius:14px; background:#fff; box-shadow:0 6px 18px rgba(34,93,176,.08); }
.course-spotlight-card { overflow:hidden; }
.course-spotlight-art { position:relative; display:grid; place-items:center; height:166px; overflow:hidden; border-radius:11px; color:#9defff; background:radial-gradient(circle at 72% 25%,rgba(28,219,255,.7),transparent 24%),linear-gradient(135deg,#082566,#0b76df 65%,#27cbe9); }
.course-spotlight-art::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(145deg,transparent 0 24px,rgba(135,229,255,.22) 25px 26px,transparent 28px 46px); }
.course-spotlight-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.course-spotlight-art img + * { display:none; }
.spotlight-symbol { position:relative; z-index:1; display:grid; place-items:center; width:78px; height:78px; border-radius:22px; color:#8bedff; background:rgba(7,33,100,.5); border:1px solid rgba(126,229,255,.65); box-shadow:0 8px 25px rgba(0,25,93,.25); }
.course-spotlight-card h2 { margin:13px 0 7px; color:#142a5b; font-size:19px; }
.course-spotlight-card p { min-height:33px; margin:0 0 10px; color:#7185a8; font-size:11px; line-height:1.55; }
.course-spotlight-progress { padding-top:13px; }
.course-spotlight-progress .panel-head { margin-bottom:9px; }
.course-spotlight-progress .panel-head strong { color:#125fe0; font-size:20px; }
.course-spotlight-metrics { display:flex; justify-content:space-between; gap:12px; margin-top:12px; color:#7890b2; font-size:10px; }
.course-spotlight-metrics b { margin-left:5px; color:#263c67; }
.course-spotlight-outline { padding-bottom:10px; }
.course-spotlight-outline .panel-head { margin-bottom:8px; }
.course-spotlight-chapters { display:grid; gap:5px; }
.course-spotlight-chapter { display:grid; grid-template-columns:25px minmax(0,1fr) auto; align-items:center; gap:8px; padding:9px 7px; border-radius:9px; color:#2a4068; background:#f5f8ff; font-size:10px; }
.course-spotlight-chapter .lesson-index { display:grid; place-items:center; width:21px; height:21px; border-radius:7px; color:#1169e7; background:#e7f0ff; font-size:9px; }
.course-spotlight-chapter small { color:#8193ad; }
.project-card-open { overflow:hidden; border-radius:10px; }
.project-art { position:relative; display:grid; place-items:center; overflow:hidden; }
.project-art > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.project-art-icon { position:relative; z-index:1; display:grid; place-items:center; width:72px; height:72px; border:1px solid rgba(164,233,255,.65); border-radius:20px; color:#91edff; background:rgba(8,43,115,.42); box-shadow:0 10px 26px rgba(0,22,82,.18); backdrop-filter:blur(5px); }
.project-art-title { z-index:1; position:absolute; left:12px; right:12px; bottom:10px; color:#fff; font-size:13px; font-weight:800; text-shadow:0 2px 9px rgba(0,16,51,.78); }
.project-art:has(img)::after { content:""; position:absolute; inset:30% 0 0; background:linear-gradient(transparent,rgba(4,20,59,.6)); }

.growth-overview-row { grid-template-columns:270px minmax(0,1fr); }
.growth-student { min-height:86px; }
.growth-kpis .stat-card { min-height:86px; }
.growth-layout { grid-template-columns:minmax(0,1.9fr) minmax(315px,.8fr); }
.growth-top-panels > .panel { min-height:265px; }
.growth-bottom-panels > .panel { min-height:192px; }
.growth-lower-panels > .panel { min-height:170px; }
.growth-progress-layout { min-height:195px; gap:18px; }
.growth-progress-layout .ring { flex:0 0 132px; }
.growth-course-list { display:grid; flex:1; min-width:0; gap:13px; }
.growth-course-row { display:flex; align-items:center; gap:9px; min-width:0; padding:0; border:0; background:transparent; text-align:left; }
.growth-course-icon { display:grid; place-items:center; flex:0 0 32px; width:32px; height:32px; border-radius:10px; color:#176df1; background:#edf4ff; }
.growth-course-icon.category-1,.growth-course-icon.category-4 { color:#12a4ad; background:#e9fbfb; }
.growth-course-icon.category-2 { color:#7959e8; background:#f0edff; }
.growth-course-detail { display:grid; flex:1; min-width:0; gap:7px; }
.growth-course-detail b { overflow:hidden; color:#263b63; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.growth-course-detail .progress-track { height:8px; }
.growth-course-row > strong { color:#23375c; font-size:11px; }
.growth-radar-wrap { position:relative; display:grid; place-items:center; min-height:210px; }
.ability-radar { display:block; width:min(100%, 475px); height:auto; max-height:235px; overflow:visible; }
.growth-radar-score { position:absolute; left:50%; top:50%; display:grid; place-items:center; transform:translate(-50%,-50%); pointer-events:none; }
.growth-radar-score strong { color:#126cdd; font-size:30px; line-height:1; }
.growth-radar-score span { color:#4e668f; font-size:10px; }
.growth-awards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.growth-award { display:grid; justify-items:center; gap:6px; padding:10px 4px; border-radius:10px; background:#f4f7ff; text-align:center; }
.growth-award > span { color:#e9a218; }
.growth-award strong { display:-webkit-box; max-width:100%; overflow:hidden; color:#415578; font-size:9px; line-height:1.4; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.growth-award small { color:#8a9ab3; font-size:8px; }
.trend-line-chart { display:block; width:100%; height:auto; max-height:178px; }
.growth-sidebar > .panel { min-width:0; }
.growth-sidebar > .panel .empty { padding:15px 8px; }

.profile-dashboard { grid-template-columns:minmax(320px,.56fr) minmax(0,1.9fr); }
.profile-left,.profile-right { gap:10px; }
.profile-kpis { gap:8px; }
.profile-identity { min-height:132px; }
.profile-identity .avatar { width:84px; height:84px; }
.profile-menu { gap:0; }
.profile-learning-row { grid-template-columns:1fr 1.12fr; }
.profile-learning-row > .panel { min-height:205px; }
.profile-learning-row .learning-summary { min-height:138px; }
.profile-learning-row .trend-line-chart { min-height:135px; }
.profile-feature-row > .panel { min-height:185px; }
.profile-feature-row .empty { padding:19px 8px; }
.profile-feature-row .ability-radar { max-height:185px; }
.profile-feature-row .trend-line-chart { max-height:155px; }
.profile-settings-layout { align-items:start; }
.page-growth .main-content,
.page-profile .main-content,
.page-projects .main-content,
.page-assignments .main-content,
.page-notifications .main-content { padding-top:10px; }

.assignment-card { position:relative; }
.assignment-card::before { background:radial-gradient(circle at 24% 28%,rgba(104,229,255,.68),transparent 20%),radial-gradient(circle at 72% 65%,rgba(35,122,255,.66),transparent 30%),linear-gradient(135deg,#092763,#087bdf 68%,#36c8ee); }
.assignment-card:nth-child(3n)::before { background:radial-gradient(circle at 46% 38%,rgba(28,217,255,.7),transparent 24%),linear-gradient(135deg,#071b51,#1453d7); }

.project-gallery-panel:has(.empty) { min-height:350px; }
.project-gallery-panel:has(.empty) .empty { padding:82px 15px; }
.assignment-main-panel:has(.empty) { min-height:400px; }
.assignment-main-panel:has(.empty) .empty { padding:75px 15px; }
.classroom-outline:has(.empty) .empty { padding:28px 8px; }
.dashboard-middle .empty,.dashboard-bottom .empty { padding:23px 8px; }

@media (max-width: 1280px) {
  .growth-top-panels > .panel { min-height:0; }
  .growth-progress-layout { min-height:0; }
}
@media (max-width: 960px) {
  .growth-top-panels,.growth-bottom-panels,.growth-lower-panels { grid-template-columns:1fr; }
  .growth-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .growth-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .growth-progress-layout { align-items:flex-start; flex-direction:column; }
  .growth-course-list { width:100%; }
  .growth-awards { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .profile-learning-row { grid-template-columns:1fr; }
}

/* Reference-matched student workspace at the supplied 1672 × 941 desktop size. */
@media (min-width: 1281px) {
  .topbar { height:72px; }
  .page-dashboard { padding-top:28px; }
  .sidebar { padding-top:16px; }
  .brand { padding-bottom:12px; }
  .nav-list { margin-top:18px; }
  .nav-item { min-height:54px; }
  .nav-item:nth-child(8) { margin-bottom:0; }
  .nav-item:nth-child(9) { border:0; border-radius:9px; padding-top:0; margin:0; }
  .nav-item:nth-child(10) { margin-top:0; border-top:1px solid rgba(190,212,255,.2); border-radius:0 0 9px 9px; padding-top:12px; }
  .main-content { padding-top:10px; }
  .page-dashboard { padding-top:28px; }
  .page-courses .course-layout { grid-template-columns:minmax(0,1.45fr) minmax(500px,1fr); }

  .page-dashboard .hero {
    background-image:url('/assets/home-art.png'),radial-gradient(circle at 78% 22%,rgba(14,211,238,.3),transparent 22%),radial-gradient(circle at 88% 85%,rgba(28,111,246,.52),transparent 36%),linear-gradient(112deg,#112c69 0%,#124c9b 55%,#0b336d 100%);
    background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
    background-position:right center,center,center,center;
    background-size:auto 100%,auto,auto,auto;
  }
  .page-dashboard .hero-symbol { display:none; }
  .page-dashboard .hero::before,.page-dashboard .hero::after { display:none; }
  .sidebar::after { height:147px; opacity:1; background-image:url('/assets/sidebar-wave.png'); background-repeat:no-repeat; background-size:100% 147px; background-position:center bottom; mask-image:none; }

  .page-banner { margin-bottom:12px; }
  .page-banner-scene { display:none; }
  .page-projects .main-content,
  .page-assignments .main-content,
  .page-growth .main-content,
  .page-notifications .main-content,
  .page-profile .main-content { padding-top:10px; }
  .page-projects .page-banner { min-height:116px; margin:0; background-image:url('/assets/projects-banner.png'); background-repeat:no-repeat; background-position:right center; background-size:auto 100%; }
  .page-assignments .page-banner { min-height:118px; margin:0; background-image:url('/assets/assignments-banner.png'); background-repeat:no-repeat; background-position:right center; background-size:auto 100%; }
  .page-growth .page-banner { min-height:109px; margin:0; background-image:url('/assets/growth-banner.png'); background-repeat:no-repeat; background-position:right center; background-size:auto 100%; }
  .page-notifications .page-banner { min-height:112px; background-image:url('/assets/notifications-banner.png'); background-repeat:no-repeat; background-position:right center; background-size:auto 100%; }
  .page-profile .page-banner { min-height:110px; background-image:url('/assets/profile-banner.png'); background-repeat:no-repeat; background-position:right center; background-size:auto 100%; }
  .page-projects .page-banner::before,
  .page-assignments .page-banner::before,
  .page-growth .page-banner::before,
  .page-notifications .page-banner::before,
  .page-profile .page-banner::before { display:none; }

  .project-page-layout { grid-template-columns:minmax(0,1fr) 368px; gap:12px; align-items:start; }
  .project-main { gap:12px; grid-template-rows:auto auto minmax(0,1fr); }
  .project-summary { min-height:192px; padding:15px; }
  .project-summary-numbers { grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin-top:20px; }
  .project-summary-numbers div { min-height:82px; border-right:1px solid #e3ecfb; border-radius:0; background:linear-gradient(180deg,#f6f9ff,#eaf2ff); }
  .project-summary-numbers div:last-child { border-right:0; }
  .project-summary-numbers strong { font-size:20px; }
  .project-category-tabs { grid-template-columns:repeat(6,minmax(0,1fr)); gap:9px; }
  .project-category-button { min-height:61px; }
  .project-gallery-panel,.project-gallery-panel:has(.empty) { min-height:560px; }
  .project-gallery-panel:has(.empty) .empty { padding:120px 15px; }
  .project-toolbar { gap:9px; }
  .project-tabs { gap:18px; }
  .project-search { width:235px; flex:0 1 235px; }
  .project-toolbar > .field.select { width:90px; min-width:90px; }
  .project-category-distribution { display:grid; grid-template-columns:142px minmax(0,1fr); align-items:center; gap:10px; }
  .project-donut { width:136px; height:136px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(var(--category-stops)); }
  .project-donut::before { content:""; position:absolute; width:88px; height:88px; border-radius:50%; background:#fff; }
  .project-donut > span { position:relative; z-index:1; display:grid; justify-items:center; gap:2px; }
  .project-donut strong { color:#112b63; font-size:22px; }
  .project-donut small { color:#7184a8; font-size:10px; }
  .project-category-legend { display:grid; gap:9px; min-width:0; }
  .project-category-legend > div,.project-category-legend > div > span { display:flex; align-items:center; justify-content:space-between; gap:5px; }
  .project-category-legend > div > span { justify-content:flex-start; color:#53698e; font-size:10px; white-space:nowrap; }
  .project-category-legend i { width:10px; height:10px; flex:0 0 10px; border-radius:50%; background:var(--category-color); }
  .project-category-legend strong { color:#263b66; font-size:10px; white-space:nowrap; }
  .project-category-legend strong small { color:#8292aa; font-size:9px; }
  .project-sidebar { gap:12px; }
  .project-sidebar > .panel:nth-child(2) { min-height:192px; }
  .project-promo { min-height:156px; }

  .assignment-page-layout { grid-template-columns:minmax(0,1fr) 368px; gap:12px; align-items:start; }
  .assignment-main-column { min-width:0; display:grid; align-content:start; gap:12px; }
  .assignment-main-panel,.assignment-main-panel:has(.empty) { min-height:510px; }
  .assignment-main-panel:has(.empty) .empty { padding:120px 15px; }
  .assignment-sidebar { display:grid; align-content:start; gap:12px; }
  .assignment-sidebar > .panel:first-child { min-height:216px; }
  .assignment-sidebar > .panel:nth-child(2) { min-height:240px; }
  .assignment-sidebar > .panel:nth-child(3) { min-height:230px; }
  .assignment-type-tabs { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .assignment-type { min-width:0; gap:6px; }
  .assignment-toolbar { gap:8px; }

  .growth-layout { grid-template-columns:minmax(0,1fr) 368px; gap:12px; align-items:start; }
  .growth-main { gap:12px; }
  .growth-overview-row { grid-template-columns:270px minmax(0,1fr); gap:12px; margin:0; }
  .growth-student,.growth-kpis .stat-card { min-height:86px; }
  .growth-kpis { grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
  .growth-kpis .stat-card { padding:8px; }
  .growth-top-panels > .panel { min-height:282px; }
  .growth-bottom-panels > .panel { min-height:192px; }
  .growth-lower-panels > .panel { min-height:142px; }
  .growth-sidebar { gap:12px; }
  .growth-sidebar > .panel:first-child { min-height:403px; }
  .growth-sidebar > .panel:nth-child(2) { min-height:166px; }
  .growth-sidebar > .panel:nth-child(3) { min-height:220px; }

  .notification-layout { grid-template-columns:minmax(420px,.62fr) minmax(0,1.12fr); gap:12px; }
  .notification-type-tabs { grid-template-columns:repeat(6,minmax(0,1fr)); gap:9px; }
  .notification-type { min-width:0; gap:6px; padding:0 6px; }
  .notification-detail { min-height:475px; }
  .profile-dashboard { grid-template-columns:356px minmax(0,1fr); }

  .assistant-layout { grid-template-columns:minmax(0,1fr) 412px; gap:12px; align-items:start; min-height:820px; }
  .assistant-main { display:grid; grid-template-rows:166px minmax(0,1fr); gap:12px; min-width:0; }
  .assistant-welcome { display:grid; grid-template-columns:194px minmax(0,1fr); grid-template-rows:1fr 58px; column-gap:14px; min-height:166px; height:166px; margin:0; padding:0 14px 8px 0; }
  .assistant-robot { grid-column:1; grid-row:1 / 3; width:194px; height:166px; flex:none; margin:0; background:url('/assets/assistant-robot.png') center / 100% 100% no-repeat; }
  .assistant-robot .robot-render { display:none; }
  .assistant-welcome-copy { grid-column:2; grid-row:1; min-width:0; align-self:end; gap:4px; padding-bottom:5px; }
  .assistant-welcome-copy strong { font-size:30px; }
  .assistant-welcome-copy span { font-size:13px; }
  .assistant-shortcuts { grid-column:2; grid-row:2; display:flex; gap:8px; margin:0; align-self:end; min-width:0; }
  .assistant-shortcut { min-width:0; flex:1 1 0; padding:8px; gap:7px; }
  .assistant-shortcut span { width:34px; height:34px; flex:0 0 34px; }
  .assistant-shortcut b { font-size:11px; white-space:nowrap; }
  .assistant-conversation-grid { display:grid; grid-template-columns:264px minmax(0,1fr); gap:12px; min-height:640px; }
  .assistant-history,.assistant-chat-panel { min-height:640px; }
  .assistant-chat-panel { display:flex; flex-direction:column; }
  .assistant-chat-panel .ai-chat { flex:1; min-height:230px; max-height:450px; }
  .assistant-right { display:grid; grid-template-columns:1fr; align-content:start; gap:12px; }
  .assistant-right > .panel:first-child { min-height:218px; }
  .assistant-tool-grid { gap:9px; }
  .assistant-tool-grid .assistant-shortcut { min-height:68px; padding:9px; }
}

@media (max-width:1280px) {
  .project-page-layout,.assignment-page-layout,.growth-layout { grid-template-columns:minmax(0,1fr) 300px; }
  .assistant-layout { grid-template-columns:minmax(0,1fr) 320px; }
  .assistant-main { grid-template-rows:auto minmax(580px,1fr); }
  .assistant-welcome { grid-template-columns:130px minmax(0,1fr); }
  .assistant-robot { width:130px; }
  .assistant-shortcut { padding:7px; }
  .assistant-shortcut span { width:28px; height:28px; flex-basis:28px; }
}

@media (max-width:960px) {
  .project-page-layout,.assignment-page-layout,.growth-layout,.assistant-layout { grid-template-columns:1fr; }
  .assistant-main { grid-template-rows:auto auto; }
  .assistant-conversation-grid { grid-template-columns:220px minmax(0,1fr); }
  .assistant-right { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .assistant-right > .panel:first-child { grid-column:1/-1; }
  .project-category-distribution { grid-template-columns:142px minmax(0,1fr); }
}

@media (max-width:640px) {
  .assistant-welcome { display:flex; height:auto; min-height:112px; padding:10px; }
  .assistant-robot { display:none; }
  .assistant-welcome-copy { padding:0; }
  .assistant-shortcuts { display:none; }
  .assistant-conversation-grid { grid-template-columns:1fr; }
  .assistant-right { grid-template-columns:1fr; }
  .project-category-distribution { grid-template-columns:1fr; justify-items:center; }
}