:root { --ink:#171a38; --muted:#7a7d98; --line:#e7e8f1; --paper:#fbfbfe; --violet:#6e63e9; --blue:#4c8ef7; --mint:#5fc7b3; --coral:#f08b7e; --yellow:#f4c95d; --navy:#171a3a; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); font-family:"DM Sans", sans-serif; background:#f3f4fa; min-height:100vh; } button,input,select { font:inherit; } button { cursor:pointer; } .ambient { position:fixed; width:45vw; height:45vw; border-radius:50%; filter:blur(100px); opacity:.24; pointer-events:none; } .ambient-one { background:#bfc1ff; top:-25vw; right:-15vw; } .ambient-two { background:#b5f2df; bottom:-30vw; left:-20vw; }
.app-shell { position:relative; display:flex; min-height:100vh; max-width:1600px; margin:0 auto; background:rgba(255,255,255,.75); box-shadow:0 0 60px rgba(35,39,78,.08); } .sidebar { width:246px; flex:none; padding:29px 18px 22px; border-right:1px solid var(--line); display:flex; flex-direction:column; background:rgba(250,250,254,.75); } .brand { display:flex; align-items:center; gap:10px; padding:0 10px; color:var(--ink); font-weight:700; letter-spacing:-.8px; font-size:20px; text-decoration:none; } .brand-mark { background:var(--ink); color:white; width:27px; height:27px; border-radius:9px; display:grid; place-items:center; font-family:Newsreader,serif; font-size:19px; } .nav { margin-top:55px; display:grid; gap:7px; } .nav-link,.quiet-action { border:0; background:none; color:#777a92; display:flex; align-items:center; gap:13px; text-align:left; padding:12px 12px; border-radius:10px; font-weight:600; font-size:14px; } .nav-link span { font-size:19px; width:19px; text-align:center; font-weight:400; } .nav-link:hover,.nav-link.active { background:#ecebfe; color:#554abf; } .sidebar-bottom { margin-top:auto; } .quiet-action { width:100%; border-bottom:1px solid var(--line); border-radius:0; padding:13px 12px 17px; } .quiet-action:hover { color:#554abf; } .profile { margin-top:17px; display:flex; width:100%; align-items:center; gap:9px; border:0; background:none; color:var(--ink); text-align:left; padding:4px; } .avatar { display:grid; place-items:center; width:32px;height:32px;border-radius:50%; background:#f0b7a9;color:#80392d; font-size:10px;font-weight:700; } .profile strong,.profile small { display:block;font-size:11px;line-height:1.35; } .profile small { color:var(--muted); font-size:10px; } .more { margin-left:auto; color:var(--muted); }
.workspace { width:calc(100% - 246px); padding:41px clamp(28px,4vw,66px) 70px; } .topbar,.section-heading,.panel-head,.focus-content,.focus-footer,.streak-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; } .eyebrow { margin:0 0 7px; color:#8a8da5; font:500 10px "DM Mono", monospace; letter-spacing:1.15px; } h1,h2,p { margin-top:0; } h1 { margin-bottom:0; letter-spacing:-1.4px; font:600 clamp(29px,3vw,39px)/1.05 Newsreader,serif; } h2 { margin:0; letter-spacing:-.8px; font-size:19px; } .top-actions { display:flex; gap:11px; align-items:center; } .icon-button { position:relative; width:40px;height:40px;border:1px solid var(--line);background:white;border-radius:50%;color:#656984;font-size:19px; } .icon-button i { position:absolute; width:6px;height:6px;border-radius:50%;background:#ee7768;top:9px;right:9px;border:1px solid white; } .primary-button,.light-button { border:0;border-radius:10px;padding:12px 16px;background:var(--ink);color:white;font-size:13px;font-weight:700;box-shadow:0 7px 14px rgba(23,26,56,.12); } .primary-button:hover { transform:translateY(-1px); background:#292e61; } .primary-button span { color:#a9a5ff; margin-right:4px; font-size:17px; line-height:0; } .hero-grid { display:grid;grid-template-columns:minmax(0,1fr) 255px;gap:17px;margin-top:37px; } .focus-card { overflow:hidden;position:relative;min-height:230px;padding:26px 29px;border-radius:17px;color:#fff;background:linear-gradient(113deg,#202650,#5149bc);box-shadow:0 16px 26px rgba(63,59,142,.23); } .card-label { color:#cac8ff;font:500 10px "DM Mono",monospace;letter-spacing:.9px; } .pulsing-dot { display:inline-block;width:7px;height:7px;border-radius:50%;background:#79dbbc;margin-right:8px;box-shadow:0 0 0 4px rgba(121,219,188,.12); } .focus-content { justify-content:flex-start;gap:24px;margin-top:31px;position:relative;z-index:1; } .focus-time { font:500 41px/.9 Newsreader,serif;letter-spacing:-1.5px; } .focus-content h2 { font-size:24px; } .focus-content p { margin:7px 0 0;color:#d1d1eb;font-size:12px; } .focus-footer { position:absolute;bottom:21px;left:29px;right:23px;z-index:1;font-size:12px;color:#d9d8ef; } .light-button { background:#fff;color:#36335c;padding:10px 13px;box-shadow:none; } .light-button span { margin-left:8px; } .orb { position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.14); } .orb-one { height:255px;width:255px;right:-66px;top:-108px; } .orb-two { height:170px;width:170px;right:88px;bottom:-133px;background:rgba(125,216,193,.16); }
.streak-card,.panel,.schedule-card,.study-summary { background:rgba(255,255,255,.84);border:1px solid rgba(232,233,240,.9);box-shadow:0 10px 30px rgba(37,40,78,.045);border-radius:16px; } .streak-card { padding:23px; } .streak-heading { align-items:flex-start;font-weight:700;font-size:12px; } .streak-heading strong { color:#584fc7; font:500 22px Newsreader,serif; } .streak-ring { margin:16px auto 9px;width:102px;height:102px;border-radius:50%;background:conic-gradient(#6b61e8 0 72%,#ebeaf8 72% 100%);padding:9px;display:grid;place-items:center; } .streak-ring:before { content:"";position:absolute;width:84px;height:84px;border-radius:50%;background:#fff; } .streak-ring span { position:relative;font:600 25px Newsreader,serif;letter-spacing:-.8px; } .streak-ring small { font:500 11px "DM Sans";letter-spacing:0;color:var(--muted);margin-left:2px; } .streak-card p { color:var(--muted);font-size:11px;text-align:center;margin:0; } .day-dots { display:flex;justify-content:center;gap:8px;margin-top:17px; } .day-dots i { width:9px;height:9px;border-radius:50%;background:#e5e5f0; } .day-dots i.done { background:#655ce1; }
.section-heading { margin:43px 0 17px; } .schedule-heading { margin-top:43px; } .week-control { display:flex;align-items:center;gap:15px;color:#565a76;font-size:12px; } .week-control button { border:0;background:none;color:#767993;font-size:17px;padding:0; } .schedule-card { overflow:auto; padding:15px 0 0; } .schedule-grid { min-width:680px;display:grid;grid-template-columns:64px repeat(7,minmax(81px,1fr));grid-template-rows:37px repeat(12,46px);position:relative; } .time-label { color:#a2a4b5;font:10px "DM Mono",monospace;text-align:right;padding:1px 12px 0 0;border-top:1px solid transparent; } .day-label { text-align:center;font-size:11px;font-weight:700;color:#777a91; } .day-label span { display:block;margin-top:5px;color:#292c4a;font-size:13px; } .day-label.today span { background:#5f57d9;color:white;width:25px;height:25px;line-height:25px;border-radius:50%;margin:5px auto 0; } .grid-line { border-top:1px solid #f0f0f5; grid-column:2 / -1; } .schedule-event { z-index:2;margin:2px 3px;border-radius:6px;padding:6px 7px;color:#313550;font-size:10px;overflow:hidden;box-shadow:inset 3px 0 rgba(0,0,0,.08); } .schedule-event strong { display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .schedule-event span { display:block;opacity:.7;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .event-class { background:#e5e2ff;color:#4f46a2; } .event-study { background:#dff5ed;color:#25715f; } .event-personal { background:#ffe9da;color:#a75e3f; } .event-exam { background:#ffdede;color:#a14f5b; } .lower-grid { display:grid;grid-template-columns:1fr 1fr;gap:17px;margin-top:23px; } .panel { padding:23px; } .panel-head { align-items:flex-start; } .text-button { border:0;background:none;color:#6057d4;font-size:11px;font-weight:700;padding:1px; } .exam-list,.plan-list { margin-top:18px;display:grid;gap:11px; } .exam-row,.plan-row { display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid #efeff4; } .exam-date { width:37px;height:39px;border-radius:8px;background:#f3efff;color:#665cd8;display:grid;place-items:center;font:600 15px Newsreader,serif;line-height:.8; } .exam-date small {font:500 8px "DM Mono";letter-spacing:.5px; } .exam-row strong,.plan-row strong { display:block;font-size:12px; } .exam-row span,.plan-row span { color:var(--muted);font-size:10px; } .exam-row > em { margin-left:auto;color:#6c62dd;background:#f0efff;border-radius:20px;padding:5px 8px;font:500 9px "DM Mono";font-style:normal; } .plan-check { width:18px;height:18px;border:1.5px solid #c7c8d7;border-radius:50%;flex:none; } .plan-check.complete { background:#66c3ad;border-color:#66c3ad;position:relative; } .plan-check.complete:after { content:"✓";color:white;font-size:11px;position:absolute;left:3px;top:0; } .plan-row button { margin-left:auto;border:0;background:#f0efff;color:#645bd6;padding:5px 7px;border-radius:7px;font-size:10px; }
.view { display:none; } .view.active { display:block; } .muted { color:var(--muted);font-size:13px;margin:8px 0 0; } .large-schedule { margin-top:10px; } .study-summary { display:grid;grid-template-columns:repeat(3,1fr);gap:1px;overflow:hidden;margin-top:25px; } .study-stat { padding:23px;background:white; } .study-stat strong { display:block;font:600 30px Newsreader,serif;letter-spacing:-1px; } .study-stat span { color:var(--muted);font-size:11px; } .study-list { margin-top:18px;display:grid;gap:10px; } .study-block { display:grid;grid-template-columns:82px 1fr auto;align-items:center;gap:18px;padding:19px 22px;background:white;border:1px solid var(--line);border-radius:13px; } .study-block time { color:#6159d5;font:500 11px "DM Mono",monospace; } .study-block h3 { margin:0;font-size:14px; } .study-block p { margin:4px 0 0;color:var(--muted);font-size:11px; } .study-block button { border:1px solid #d9d8ed;background:#fff;color:#6057cf;border-radius:8px;padding:7px 10px;font-size:11px;font-weight:700; } .study-block.completed { opacity:.56; } .results-grid { display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:17px;margin-top:24px; } .grade-card strong,.course-card strong { display:block;font:600 42px Newsreader,serif;letter-spacing:-1.5px;margin:17px 0 4px; } .course-card strong { font-size:24px; } .grade-card span,.course-card span { color:var(--muted);font-size:11px; } .grade-line { height:7px;background:#ededf3;border-radius:6px;margin-top:20px;overflow:hidden; } .grade-line i { display:block;height:100%;background:linear-gradient(90deg,#5d56d8,#78cbb7);border-radius:inherit;width:0;transition:.4s; } .result-table-panel { margin-top:17px; } .result-table { width:100%;border-collapse:collapse;margin-top:17px;font-size:12px; } .result-table th { text-align:left;color:#9698aa;font:500 9px "DM Mono";letter-spacing:.8px;padding:0 7px 9px; } .result-table td { border-top:1px solid #f0f0f4;padding:13px 7px; } .result-table td:last-child { font-weight:700;color:#544cbd; } .grade-note { color:#888ba0;font-size:10px;line-height:1.45;margin:14px 7px 0; } .empty-state { color:var(--muted);font-size:13px;padding:28px 0;text-align:center; }
.modal { width:min(470px,calc(100% - 28px));border:0;border-radius:17px;padding:0;box-shadow:0 25px 70px rgba(23,26,56,.25); } .modal::backdrop { background:rgba(20,22,46,.42);backdrop-filter:blur(4px); } .modal form { padding:26px; } .modal-head { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:23px; } .modal-head h2 { font:600 27px Newsreader,serif;letter-spacing:-.9px; } .close-button { border:0;background:#f2f2f7;border-radius:50%;width:31px;height:31px;font-size:21px;color:#686b83; } label { display:grid;gap:7px;color:#5a5d76;font-size:11px;font-weight:700;margin:14px 0; } input,select { border:1px solid #dedfe9;border-radius:8px;padding:11px 10px;color:var(--ink);outline-color:#7770e6;background:#fff; } .form-row { display:grid;grid-template-columns:1fr 1fr;gap:13px; } .submit { width:100%;margin-top:12px;justify-content:center; } .toast { position:fixed;right:24px;bottom:24px;background:#22264a;color:white;border-radius:10px;padding:13px 16px;font-size:12px;font-weight:600;box-shadow:0 10px 25px rgba(27,30,70,.25);transform:translateY(80px);opacity:0;transition:.25s; } .toast.show { transform:translateY(0);opacity:1; }
.study-leave-banner { margin-top:24px;padding:19px 23px;background:linear-gradient(115deg,#edecff,#f6fffc);border:1px solid #dedcf9;border-radius:14px;display:flex;align-items:center;justify-content:space-between;gap:18px; } .study-leave-banner h3 { margin:0;font-size:16px; } .study-leave-banner p { margin:4px 0 0;color:#686b83;font-size:11px; } .switch { position:relative;width:47px;height:27px;margin:0;display:block;flex:none; } .switch input { opacity:0;width:0;height:0; } .switch span { position:absolute;inset:0;background:#cfd0de;border-radius:20px;transition:.2s;cursor:pointer; } .switch span:after { content:"";position:absolute;width:21px;height:21px;border-radius:50%;background:#fff;left:3px;top:3px;box-shadow:0 1px 4px #8b8ca1;transition:.2s; } .switch input:checked + span { background:#645bd9; } .switch input:checked + span:after { transform:translateX(20px); } .coursework-grid { display:grid;grid-template-columns:1.3fr 1fr;gap:17px;margin-top:24px; } .time-chip { color:#5e56d2;background:#efeeff;border-radius:18px;padding:6px 9px;font:500 10px "DM Mono",monospace; } .task-list,.feedback-list,.checklist-list,.deadline-list { margin-top:18px;display:grid;gap:9px; } .task-row,.feedback-row,.checklist-group,.deadline-row { border-top:1px solid #efeff4;padding:13px 0; } .task-row { display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:10px; } .task-row h3,.feedback-row h3 { margin:0;font-size:12px; } .task-row p,.feedback-row p,.deadline-row p { color:var(--muted);font-size:10px;margin:4px 0 0; } .task-check { width:18px;height:18px;border:1.5px solid #c8cada;border-radius:50%;background:#fff; } .task-check.complete { background:#65c2ae;border-color:#65c2ae;color:#fff; } .task-check.complete:after { content:"✓";display:block;text-align:center;font-size:11px;line-height:15px; } .task-time { color:#5d56cf;font:500 10px "DM Mono",monospace; } .feedback-row { border-left:3px solid #f3c75d;padding:10px 0 10px 12px; } .feedback-row strong { color:#8f7424;font:500 9px "DM Mono",monospace;letter-spacing:.4px; } .checklist-panel { margin-top:17px; } .checklist-list { grid-template-columns:repeat(2,minmax(0,1fr));gap:16px; } .checklist-group { border:1px solid #ededf4;border-radius:11px;padding:16px; } .checklist-group h3 { margin:0 0 3px;font-size:13px; } .checklist-group > p { margin:0 0 10px;color:var(--muted);font-size:10px; } .component-item { display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid #f2f2f6;color:#575a72;font-size:11px; } .component-item input { accent-color:#665ddc; } .deadline-tools { display:flex;align-items:center;gap:15px;margin-top:23px;padding:16px 19px;border-radius:13px;background:#f0f8f5;border:1px solid #dcefe8; } .deadline-tools p { margin:0;color:#698178;font-size:11px; } .import-control { display:inline-flex;align-items:center;gap:7px;margin:0;color:#356b5d;font-size:11px;white-space:nowrap;cursor:pointer; } .import-control input { display:none; } .deadline-row { display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:13px; } .deadline-date { color:#5f57d4;background:#f0efff;border-radius:8px;text-align:center;padding:7px 3px;font:600 16px Newsreader,serif; } .deadline-date small { display:block;font:500 8px "DM Mono",monospace;letter-spacing:.4px; } .deadline-row h3 { margin:0;font-size:13px; } .deadline-type { color:#57766e;background:#e9f5f0;border-radius:12px;padding:5px 7px;font:500 9px "DM Mono",monospace; } textarea { min-height:90px;resize:vertical;border:1px solid #dedfe9;border-radius:8px;padding:11px 10px;color:var(--ink);outline-color:#7770e6;background:#fff;font:inherit; } .form-hint { color:#80839a;font-size:10px;line-height:1.45;margin:2px 0 0; }
.month-control { display:flex;align-items:center;gap:14px;color:#4f5370;font-size:13px; } .month-control button { border:1px solid #e3e3ee;background:white;border-radius:50%;width:30px;height:30px;color:#696d87;font-size:16px; } .calendar-layout { display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:17px;margin-top:24px; } .month-card { overflow:hidden;background:rgba(255,255,255,.85);border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 30px rgba(37,40,78,.045); } .calendar-weekdays,.month-grid { display:grid;grid-template-columns:repeat(7,1fr); } .calendar-weekdays { border-bottom:1px solid #ececf3;background:#fbfbfd; } .calendar-weekdays span { padding:13px 0;text-align:center;color:#9a9caf;font:500 9px "DM Mono",monospace;letter-spacing:.7px; } .calendar-day { min-height:111px;padding:8px;border-right:1px solid #efeff4;border-bottom:1px solid #efeff4;background:white;transition:.15s;cursor:pointer; } .calendar-day:nth-child(7n) { border-right:0; } .calendar-day:hover,.calendar-day.selected { background:#f5f4ff; } .calendar-day.outside { background:#fbfbfd;opacity:.5; } .calendar-day.today .calendar-number { background:#6158d8;color:#fff; } .calendar-number { display:grid;place-items:center;width:23px;height:23px;border-radius:50%;font:600 11px "DM Mono",monospace;color:#555870;margin-bottom:5px; } .calendar-event { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:4px;padding:3px 5px;margin-top:3px;font-size:9px;font-weight:600; } .cal-class { color:#51469e;background:#e6e3ff; } .cal-study { color:#25705e;background:#dff4ed; } .cal-homework { color:#9f623c;background:#ffeada; } .cal-assessment { color:#a14e5a;background:#ffdfdf; } .cal-deadline { color:#3a7287;background:#def0f7; } .more-events { color:#716bd0;font:500 9px "DM Mono",monospace;margin:4px 0 0 4px; } .calendar-agenda { min-height:510px; } .calendar-agenda h2 { font:600 24px Newsreader,serif;letter-spacing:-.6px; } .agenda-list { margin-top:19px;display:grid;gap:9px; } .agenda-item { display:grid;grid-template-columns:5px 1fr;gap:9px;padding:10px 0;border-top:1px solid #efeff4; } .agenda-item i { display:block;width:5px;border-radius:9px;background:#d4d4dd; } .agenda-item strong { display:block;font-size:11px; } .agenda-item span { display:block;color:var(--muted);font-size:10px;margin-top:3px; } .calendar-legend { display:flex;flex-wrap:wrap;gap:13px;margin:15px 2px;color:#777a91;font-size:10px; } .calendar-legend span { display:flex;align-items:center;gap:5px; } .calendar-legend i { width:9px;height:9px;border-radius:3px; } .legend-class { background:#cfc9ff; }.legend-study{background:#bfeadf;}.legend-homework{background:#ffd5bd;}.legend-assessment{background:#ffc8c8;}.legend-deadline{background:#c9e8f2;}
.calendar-controls { display:flex;align-items:center;gap:14px; } .calendar-zoom { display:flex;align-items:center;border:1px solid #e4e4ed;border-radius:9px;background:#fff;overflow:hidden; } .calendar-zoom button { border:0;background:transparent;width:28px;height:29px;color:#656984;font-size:18px;transition:.18s; } .calendar-zoom button:hover { background:#f1f0fb;color:#5850ca; } .calendar-zoom span { min-width:40px;text-align:center;color:#6e718a;font:500 10px "DM Mono",monospace; } .month-card { --cal-zoom:1; } .calendar-day { min-height:calc(111px * var(--cal-zoom));padding:calc(8px * var(--cal-zoom));transition:background .18s,transform .18s,box-shadow .18s; } .calendar-day:hover { transform:translateY(-1px);box-shadow:inset 0 0 0 1px #dcd9fb; } .calendar-event { font-size:calc(9px * var(--cal-zoom));padding:calc(3px * var(--cal-zoom)) calc(5px * var(--cal-zoom));transition:transform .16s; } .calendar-event:hover { transform:translateX(2px); } .view.active { animation:view-in .38s cubic-bezier(.2,.7,.25,1) both; } .panel,.focus-card,.schedule-card,.month-card { transition:transform .2s,box-shadow .2s; } .panel:hover { transform:translateY(-2px);box-shadow:0 14px 34px rgba(37,40,78,.075); } .primary-button,.light-button,.text-button,.nav-link { transition:transform .18s,background .18s,color .18s,box-shadow .18s; } .nav-link:active,.primary-button:active,.light-button:active { transform:scale(.97); } @keyframes view-in { from { opacity:0;transform:translateY(10px); } to { opacity:1;transform:translateY(0); } } .courses-hero { margin-top:24px;padding:24px 26px;border-radius:16px;background:linear-gradient(110deg,#eeecff,#e9f8f2);display:flex;justify-content:space-between;align-items:center;gap:25px;border:1px solid #dddcf5; } .courses-hero label { display:block;color:#656079;font:500 10px "DM Mono",monospace;letter-spacing:.7px;margin-bottom:8px; } .courses-hero select { min-width:245px;border:0;background:transparent;padding:0;color:#302d54;font:600 24px Newsreader,serif;letter-spacing:-.5px; } .courses-hero p { max-width:330px;margin:0;color:#62677c;font-size:12px;line-height:1.5; } .course-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px; } .course-card { position:relative;overflow:hidden;padding:22px;background:#fff;border:1px solid var(--line);border-radius:14px;min-height:205px;display:flex;flex-direction:column;animation:course-in .35s both; } .course-card:nth-child(2) { animation-delay:.06s; } .course-card:nth-child(3) { animation-delay:.12s; } .course-card:before { content:"";position:absolute;width:95px;height:95px;border-radius:50%;background:#f0eeff;right:-28px;top:-30px; } .course-provider { position:relative;color:#635bd1;font:500 10px "DM Mono",monospace;letter-spacing:.5px; } .course-card h3 { position:relative;margin:15px 0 6px;font:600 21px Newsreader,serif;letter-spacing:-.5px; } .course-card p { position:relative;margin:0;color:#70738a;font-size:11px;line-height:1.5; } .course-tags { position:relative;display:flex;gap:6px;flex-wrap:wrap;margin-top:14px; } .course-tags span { color:#5e7380;background:#edf5f5;border-radius:12px;padding:4px 7px;font-size:9px; } .course-actions { position:relative;margin-top:auto;padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:10px; } .course-link { color:#fff;background:#242849;border-radius:8px;padding:9px 11px;text-decoration:none;font-size:10px;font-weight:700; } .course-save { border:0;background:transparent;color:#635bd1;font-size:10px;font-weight:700; } .course-disclaimer { margin:15px 2px;color:#8a8d9f;font-size:10px; } @keyframes course-in { from { opacity:0;transform:translateY(8px); } to { opacity:1;transform:translateY(0); } }
:root { --card-radius:16px; --control-radius:10px; --motion:cubic-bezier(.2,.7,.25,1); } .section-heading > div > h2 { font:600 29px/1.08 Newsreader,serif;letter-spacing:-1px; } .section-heading > div > .muted { max-width:500px;line-height:1.5; } .panel,.schedule-card,.month-card,.course-card,.courses-hero,.study-leave-banner { border-radius:var(--card-radius); } .primary-button,.light-button,.month-control button,.calendar-zoom,.course-link { border-radius:var(--control-radius); } button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid rgba(103,94,224,.28);outline-offset:3px; } .panel,.schedule-card,.month-card,.course-card,.courses-hero,.study-leave-banner { border-color:#e7e7f0; } .courses-hero { box-shadow:0 10px 28px rgba(37,40,78,.035); } .course-card { box-shadow:0 8px 22px rgba(37,40,78,.035); } .course-card:hover { transform:translateY(-3px);box-shadow:0 16px 33px rgba(37,40,78,.09); } .calendar-zoom,.month-control { box-shadow:0 5px 13px rgba(38,40,78,.035); } .calendar-controls { flex-wrap:wrap;justify-content:flex-end; } .agenda-item i.cal-class { background:#cfc9ff; }.agenda-item i.cal-study{background:#bfeadf;}.agenda-item i.cal-homework{background:#ffd5bd;}.agenda-item i.cal-assessment{background:#ffc8c8;}.agenda-item i.cal-deadline{background:#c9e8f2;} @media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important; } } @media (max-width:760px) { .calendar-layout,.coursework-grid { grid-template-columns:1fr; } .calendar-agenda { min-height:0; } .calendar-day { min-height:82px; } .calendar-event { overflow:hidden;text-overflow:ellipsis; } .courses-hero { align-items:flex-start;flex-direction:column; } .courses-hero select { min-width:0;width:100%;font-size:22px; } .course-list { grid-template-columns:1fr; } .calendar-controls { justify-content:flex-start; } .checklist-list { grid-template-columns:1fr; } }
.learning-course-card { position:relative;overflow:hidden;padding:22px;background:#fff;border:1px solid var(--line);border-radius:var(--card-radius);min-height:205px;display:flex;flex-direction:column;box-shadow:0 8px 22px rgba(37,40,78,.035);animation:course-in .35s both;transition:transform .2s,box-shadow .2s; } .learning-course-card:nth-child(2) { animation-delay:.06s; } .learning-course-card:nth-child(3) { animation-delay:.12s; } .learning-course-card:before { content:"";position:absolute;width:95px;height:95px;border-radius:50%;background:#f0eeff;right:-28px;top:-30px; } .learning-course-card:hover { transform:translateY(-3px);box-shadow:0 16px 33px rgba(37,40,78,.09); } .learning-course-card .course-provider,.learning-course-card h3,.learning-course-card p,.learning-course-card .course-tags,.learning-course-card .course-actions { position:relative; } .learning-course-card h3 { margin:15px 0 6px;font:600 21px Newsreader,serif;letter-spacing:-.5px; } .results-grid .course-card { position:static;overflow:visible;padding:23px;min-height:0;display:block;animation:none;box-shadow:none;transform:none; } .results-grid .course-card:before { display:none; } .results-grid .course-card h3 { margin:0;font:inherit;letter-spacing:normal; }
.chooser-label { display:block;color:#656079;font:500 10px "DM Mono",monospace;letter-spacing:.7px;margin-bottom:9px; } .career-tabs { display:flex;flex-wrap:wrap;gap:6px;max-width:525px; } .career-tabs button { border:1px solid #d8d7ec;border-radius:20px;background:#fff;color:#575873;padding:7px 10px;font-size:10px;font-weight:700;transition:all .18s var(--motion); } .career-tabs button:hover { border-color:#928be8;color:#554bc1; } .career-tabs button.active { background:#5e56d5;border-color:#5e56d5;color:#fff;box-shadow:0 6px 12px rgba(94,86,213,.2); } .courses-hero > div { flex:1; } .course-access { position:relative;display:inline-flex;align-self:flex-start;margin-top:10px;color:#25715f;background:#e3f5ed;border-radius:12px;padding:4px 7px;font:500 9px "DM Mono",monospace; } .course-access.paid { color:#9b6642;background:#fff0e6; } .learning-course-card.paid-course { background:#fffcfa;border-color:#f1dfd2; } .course-credential { position:relative;margin:12px 0 0 !important;color:#5e56cf !important;font-size:10px !important;font-weight:700; } .course-checks { position:relative;display:grid;gap:6px;margin:13px 0 0;padding:10px 0;border-top:1px solid #ededf3; } .course-checks label { display:flex;align-items:center;gap:7px;margin:0;color:#686b82;font-size:10px;font-weight:500; } .course-checks input { width:14px;height:14px;padding:0;accent-color:#6259d9; } .achievement-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px; } .achievement-stat { min-height:145px;position:relative;overflow:hidden; } .achievement-stat:after { content:"";position:absolute;width:82px;height:82px;border-radius:50%;right:-22px;bottom:-28px;background:#f0efff; } .achievement-stat > span { color:#6057cf;font-size:19px; } .achievement-stat strong { display:block;margin:15px 0 2px;font:600 38px Newsreader,serif;letter-spacing:-1px; } .achievement-stat p { margin:0;color:#777a91;font-size:11px; } .achievement-panel { margin-top:17px; } .achievement-list { margin-top:17px;display:grid;gap:9px; } .achievement-row { display:flex;align-items:center;gap:11px;padding:12px 0;border-top:1px solid #efeff4; } .achievement-row i { display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#f0efff;color:#706ac9;font-style:normal; } .achievement-row i.earned { color:#795e12;background:#fff1c5; } .achievement-row strong { display:block;font-size:12px; } .achievement-row span { display:block;margin-top:3px;color:#85889b;font-size:10px; } @media (max-width:760px) { .achievement-stats { grid-template-columns:1fr; } .career-tabs { max-width:none; } }
.ai-skills-panel { display:grid;grid-template-columns:minmax(210px,.8fr) minmax(0,1.6fr);gap:28px;margin-top:18px;padding:21px 24px;border:1px solid #dfe7ee;border-radius:var(--card-radius);background:linear-gradient(120deg,#f7f6ff,#f5fbf9);box-shadow:0 8px 22px rgba(37,40,78,.03); } .ai-skills-heading h3 { margin:7px 0;font:600 23px/1.05 Newsreader,serif;letter-spacing:-.6px;color:#2d3150; } .ai-skills-heading > p:last-child { margin:0;color:#74778b;font-size:11px;line-height:1.55; } .ai-skills-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;margin:0;padding:0;list-style:none;counter-reset:ai-skill; } .ai-skills-list li { position:relative;min-height:45px;padding:2px 0 2px 34px;counter-increment:ai-skill; } .ai-skills-list li::before { content:"0" counter(ai-skill);position:absolute;left:0;top:2px;color:#655bd3;font:500 10px "DM Mono",monospace; } .ai-skills-list strong { display:block;color:#3f415d;font-size:11px; } .ai-skills-list span { display:block;margin-top:3px;color:#7b7e91;font-size:10px;line-height:1.4; } @media (max-width:760px) { .ai-skills-panel { grid-template-columns:1fr;gap:17px;padding:19px; } .ai-skills-list { grid-template-columns:1fr; } }
@media (max-width:900px) { .sidebar { width:72px;padding:25px 10px; } .brand { padding:0;justify-content:center; } .brand > span:last-child,.nav-link:not(.active)::after,.nav-link { font-size:0; } .nav-link { justify-content:center;padding:13px; } .nav-link span { font-size:19px;width:auto; } .quiet-action { justify-content:center;font-size:0; } .quiet-action span { font-size:19px; } .profile > span:not(.avatar) { display:none; } .workspace { width:calc(100% - 72px); } }
@media (max-width:680px) { .app-shell { display:block; } .sidebar { position:fixed;z-index:5;bottom:0;left:0;right:0;width:100%;height:64px;padding:8px 13px;background:#ffffffed;backdrop-filter:blur(14px);border-right:0;border-top:1px solid var(--line);flex-direction:row;justify-content:center; } .brand,.sidebar-bottom { display:none; } .nav { margin:0;display:flex;gap:5px;width:100%;justify-content:space-around; } .nav-link { flex:1;padding:10px; } .workspace { width:100%;padding:27px 17px 91px; } h1 { font-size:30px; } .topbar { align-items:flex-start; } .top-actions .icon-button { display:none; } .primary-button { padding:11px 12px; } .hero-grid,.lower-grid,.results-grid { grid-template-columns:1fr; } .streak-card { display:none; } .focus-card { min-height:212px;padding:23px; } .focus-footer { left:23px;right:17px; } .section-heading { margin-top:31px;align-items:flex-end; } .week-control { gap:8px; } .week-control strong { font-size:11px; } .study-summary { grid-template-columns:1fr; } .study-block { grid-template-columns:66px 1fr;gap:10px; } .study-block button { grid-column:2;justify-self:start; } }