:root {
  --blue: #035ba4;
  --blue-deep: #06447e;
  --sky: #eaf6ff;
  --ink: #20344a;
  --muted: #7f91a6;
  --line: #e8eef3;
  --white: #fff;
  --coral: #ff7769;
  --yellow: #ffcf4b;
  --purple: #b69af7;
  --shadow: 0 16px 40px rgba(30, 77, 116, .08);
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #fafdff; font-family: 'DM Sans', sans-serif; font-size: 14px; }
button { font: inherit; border: 0; cursor: pointer; color: inherit; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 230px; flex: 0 0 230px; min-height: 100vh; background: var(--white); border-right: 1px solid var(--line); padding: 29px 17px 18px; display: flex; flex-direction: column; }
.brand { color: var(--blue); display: flex; align-items: center; gap: 9px; text-decoration: none; font: 700 20px 'Fredoka', sans-serif; letter-spacing: .1px; padding: 0 12px 35px; }
.brand b { color: var(--coral); font-size: 14px; margin-left: 2px; }
.brand-mark { width: 25px; height: 25px; background: var(--blue); border-radius: 8px 11px 8px 11px; display: flex; align-items: center; justify-content: center; gap: 2px; transform: rotate(-7deg); }
.brand-mark span { width: 3px; height: 9px; border-radius: 4px; background: white; transform: rotate(35deg); } .brand-mark span:nth-child(2) { height: 15px; } .brand-mark span:nth-child(3) { height: 7px; }
.role-switcher { background: #f4f8fb; padding: 4px; border-radius: 12px; display: grid; gap: 2px; margin-bottom: 28px; }
.role-btn { color: #91a0af; background: transparent; font-size: 12px; font-weight: 600; padding: 9px 7px; border-radius: 9px; display: flex; align-items: center; gap: 7px; text-align: left; transition: .2s; } .role-btn.active { color: var(--blue); background: white; box-shadow: 0 3px 9px rgba(30,75,110,.07); }
.role-icon { font-size: 15px; width: 17px; text-align: center; }
.main-nav { display: grid; gap: 4px; } .nav-item, .settings-btn { display: flex; align-items: center; gap: 13px; padding: 11px 14px; border-radius: 10px; color: #8494a4; background: transparent; font-size: 13px; font-weight: 600; text-align: left; } .nav-item span, .settings-btn span { color: #a7b4c0; font-size: 20px; line-height: 13px; } .nav-item.active { color: var(--blue); background: #edf7ff; } .nav-item.active span { color: var(--blue); } .nav-item em { font-style: normal; background: #ffedea; color: var(--coral); padding: 2px 6px; font-size: 10px; margin-left: auto; border-radius: 6px; }
.sidebar-bottom { margin-top: auto; } .streak-card { background: #fff8e5; border: 1px solid #ffedba; border-radius: 12px; padding: 12px 10px; display: flex; gap: 9px; align-items: center; margin: 14px 3px 17px; } .streak-flame { color: #f2ab17; font-size: 24px; } .streak-card strong, .streak-card small { display: block; } .streak-card strong { font-size: 11px; } .streak-card small { color: #a9976c; font-size: 9px; margin-top: 3px; } .settings-btn { width: 100%; margin-bottom: 10px; } .profile-mini, .top-profile { display: flex; align-items: center; gap: 9px; } .profile-mini { border-top: 1px solid var(--line); padding: 16px 4px 0; } .avatar { width: 33px; height: 33px; color: white; display: grid; place-items: center; border-radius: 50%; font: 700 16px 'Fredoka'; } .coral { background: var(--coral); } .profile-mini strong, .profile-mini small, .top-profile strong, .top-profile small { display: block; } .profile-mini strong, .top-profile strong { font-size: 11px; } .profile-mini small, .top-profile small { color: #a1afbb; font-size: 9px; margin-top: 2px; } .more { color: #a4b0ba; margin-left: auto; letter-spacing: 2px; }
.main-content { flex: 1; min-width: 0; } .topbar { height: 83px; display: flex; align-items: center; justify-content: space-between; padding: 0 4.8%; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.75); } .breadcrumb { display: flex; gap: 13px; color: #adbac5; font-size: 11px; } .breadcrumb b { font-weight: 400; } .breadcrumb strong { color: var(--ink); font-weight: 600; } .top-actions { display: flex; align-items: center; gap: 25px; } .icon-btn { background: transparent; color: #8ea0ae; font-size: 22px; position: relative; } .notification-btn i { width: 5px; height: 5px; background: var(--coral); border-radius: 50%; position: absolute; right: 0; top: 1px; border: 1px solid white; } .chevron { color: #a2b0bd; font-size: 18px; margin-left: 9px; } .mobile-menu { display: none; background: transparent; font-size: 22px; color: var(--blue); }
.content { max-width: 1180px; margin: 0 auto; padding: 41px 4.8% 50px; } .hero-row { min-height: 275px; display: grid; grid-template-columns: .9fr 1.1fr; background: var(--sky); border-radius: 20px; overflow: hidden; position: relative; } .hero-copy { padding: 37px 20px 29px 45px; z-index: 1; } .eyebrow, .section-kicker { color: var(--blue); font-size: 10px; font-weight: 700; letter-spacing: 1.7px; } .eyebrow { display: flex; align-items: center; gap: 6px; } .eyebrow-star { color: var(--coral); font-size: 16px; } h1, h2, h3, p { margin: 0; } h1 { font: 700 38px/1.07 'Fredoka', sans-serif; letter-spacing: .1px; color: var(--blue-deep); margin: 14px 0 10px; } h1 span { color: var(--coral); } .hero-copy p { color: #718ca4; font-size: 12px; margin-bottom: 22px; } .primary-btn { border-radius: 8px; color: white; background: var(--blue); font-weight: 700; font-size: 11px; padding: 12px 14px; box-shadow: 0 7px 13px rgba(3,91,164,.2); transition: transform .2s, background .2s; } .primary-btn span { margin-left: 13px; font-size: 16px; vertical-align: -1px; } .primary-btn:hover { transform: translateY(-2px); background: var(--blue-deep); }
.hero-art { position: relative; min-height: 275px; overflow: hidden; background: #d8effd; } .ground-shape { position: absolute; width: 390px; height: 130px; right: 7%; bottom: -72px; border-radius: 50%; background: #c7e7f9; } .sun-doodle { position: absolute; top: 34px; right: 33%; color: #f7bc39; font-size: 23px; } .cloud { position: absolute; background: white; width: 56px; height: 20px; border-radius: 20px; opacity: .8; } .cloud:before, .cloud:after { content: ''; position: absolute; background: inherit; border-radius: 50%; } .cloud:before { width: 25px; height: 25px; left: 12px; top: -11px; } .cloud:after { width: 17px; height: 17px; left: 30px; top: -7px; } .cloud-one { top: 58px; right: 8%; } .cloud-two { transform: scale(.65); top: 113px; left: 12%; }
.character { position: absolute; left: 36%; bottom: 22px; z-index: 2; } .face { position: relative; width: 103px; height: 90px; border-radius: 45% 48% 49% 52%; background: #68bce9; border: 3px solid #258bc6; } .ear { position: absolute; width: 29px; height: 39px; top: 19px; background: #60b6e5; border: 3px solid #258bc6; border-radius: 50%; z-index: -1; } .ear.left { left: -21px; transform: rotate(-23deg); } .ear.right { right: -20px; transform: rotate(23deg); } .eye { position: absolute; width: 7px; height: 11px; background: #22557d; border-radius: 50%; top: 34px; } .left-eye { left: 28px; } .right-eye { right: 27px; } .cheek { position: absolute; width: 13px; height: 7px; border-radius: 50%; background: #ff9184; top: 53px; opacity: .8; } .left-cheek { left: 16px; } .right-cheek { right: 15px; } .smile { position: absolute; width: 16px; height: 8px; border-bottom: 3px solid #22557d; border-radius: 50%; top: 51px; left: 43px; } .tooth { position: absolute; width: 9px; height: 6px; background: white; border-radius: 1px 1px 5px 5px; left: 47px; top: 58px; } .body { width: 88px; height: 73px; border-radius: 42% 43% 8px 8px; background: var(--yellow); margin: -2px auto 0; border: 3px solid #e1a828; display: grid; place-items: center; } .shirt-star { color: white; font-size: 26px; } .arm { position: absolute; width: 45px; height: 18px; background: #60b6e5; border: 3px solid #258bc6; border-radius: 30px; right: -34px; bottom: 35px; transform: rotate(-30deg); } .speech-bubble { position: absolute; z-index: 3; right: 21%; top: 84px; color: var(--blue); background: white; border-radius: 12px 12px 12px 3px; padding: 9px 12px; font: 700 15px 'Fredoka'; box-shadow: 0 5px 12px rgba(44,111,150,.1); transform: rotate(4deg); } .speech-bubble small { color: var(--coral); display: block; font: 600 8px 'DM Sans'; margin-top: 2px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin: 37px 0 17px; } h2 { color: var(--blue-deep); font: 600 21px 'Fredoka', sans-serif; margin-top: 5px; } .text-btn { background: transparent; color: var(--blue); font-size: 11px; font-weight: 700; } .text-btn span, .card-link span { font-size: 15px; margin-left: 8px; } .journey-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; } .journey-card { border: 1px solid var(--line); border-radius: 13px; padding: 15px 17px 17px; background: white; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; cursor: pointer; } .journey-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(30,77,116,.13); } .card-top, .panel-heading { display: flex; justify-content: space-between; align-items: center; } .card-label { font-size: 9px; font-weight: 700; letter-spacing: 1.1px; color: var(--blue); } .card-time { font-size: 9px; color: #9aa9b7; } .lesson-illustration, .game-illustration, .story-illustration { height: 112px; border-radius: 9px; margin: 13px 0 13px; overflow: hidden; position: relative; } .lesson-illustration { background: #fff1e8; } .mini-sun { color: #f6bd44; position: absolute; right: 20px; top: 13px; font-size: 23px; } .speech-word { position: absolute; left: 26px; top: 30px; color: var(--coral); font: 700 20px 'Fredoka'; transform: rotate(-7deg); } .rainbow { position: absolute; border: 5px solid #ff9c7d; border-bottom: 0; border-radius: 70px 70px 0 0; width: 94px; height: 47px; bottom: -10px; left: 18px; } .rainbow.r2 { border-color: #ffcf4b; width: 72px; height: 35px; left: 29px; bottom: -4px; } .purple-card { background: #f1eeff; border-color: #e5ddfd; } .purple-card .card-label { color: #8061c9; } .game-illustration { background: #8b76da; } .game-letter { position: absolute; color: #fff5a8; font: 700 66px 'Fredoka'; left: 32px; top: 20px; transform: rotate(-8deg); } .small-letter { left: 84px; top: 39px; font-size: 35px; color: #d6c8ff; transform: rotate(9deg); } .game-spark { position: absolute; color: #fff; right: 29px; top: 15px; } .game-cloud { position: absolute; width: 70px; height: 25px; border-radius: 20px; background: #b8aaf4; right: 13px; bottom: 20px; } .yellow-card { background: #fff8dc; border-color: #f6e9b6; } .yellow-card .card-label { color: #ba8b13; } .story-illustration { background: #ffe9b7; } .book-emoji { position: absolute; left: 44%; top: 18px; font-size: 63px; color: #e19544; transform: rotate(-11deg); } .story-spark { color: #f2b42c; position: absolute; } .s1 { left: 23px; top: 25px; } .s2 { right: 28px; bottom: 25px; font-size: 11px; } .journey-card h3 { font: 600 15px 'Fredoka'; } .journey-card p { color: #93a1ae; font-size: 10px; margin: 5px 0 10px; } .dot { display: inline-block; width: 3px; height: 3px; background: #b4c1cb; border-radius: 50%; margin: 0 4px 2px; } .progress-line { height: 4px; background: #edf1f4; border-radius: 5px; margin-bottom: 13px; } .progress-line span { height: 100%; display: block; border-radius: 5px; background: var(--coral); } .purple-card .progress-line span { background: #8b76da; } .yellow-card .progress-line span { background: #eeb735; } .card-link { color: var(--blue); font-size: 10px; font-weight: 700; background: transparent; padding: 0; }
.lower-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 17px; margin-top: 17px; } .panel { background: white; border: 1px solid var(--line); border-radius: 13px; padding: 21px 22px; box-shadow: var(--shadow); } .round-more { background: #f5f8fa; border-radius: 50%; height: 27px; width: 27px; color: #9eacb7; letter-spacing: 1px; } .progress-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 23px 0 20px; } .stat { border-right: 1px solid var(--line); padding-left: 14px; } .stat:first-child { padding-left: 0; } .stat:last-child { border: 0; } .stat strong { display: block; color: var(--blue); font: 600 25px 'Fredoka'; } .stat span, .stat small { display: block; } .stat span { font-size: 10px; font-weight: 600; margin: 2px 0 5px; } .stat small { color: #6dc29d; font-size: 9px; } .week-chart { padding: 0 4px; } .chart-bars { height: 73px; display: flex; gap: 12px; align-items: end; border-bottom: 1px solid #edf1f4; } .chart-bars i { background: #b8dcf5; width: 17px; border-radius: 4px 4px 0 0; position: relative; display: block; } .chart-bars i.today { background: var(--blue); } .chart-bars b { display: none; position: absolute; top: -19px; left: 2px; color: var(--blue); font-size: 9px; font-style: normal; } .chart-bars i:hover b { display: block; } .chart-days { display: flex; justify-content: space-between; color: #a1afbb; font-size: 8px; padding-top: 8px; } .badge-new { color: #63ba91; font-size: 8px; border: 1px solid #b9e5ce; padding: 4px 7px; border-radius: 5px; font-weight: 700; } .badge-display { display: flex; align-items: center; gap: 18px; margin: 25px 0 19px; } .badge-medal { width: 73px; height: 73px; flex: 0 0 73px; border-radius: 50%; display: grid; place-items: center; color: white; font-size: 39px; background: var(--coral); border: 5px solid #ffb0a7; box-shadow: inset 0 0 0 3px #ff8b80; position: relative; } .badge-medal span { position: absolute; font: 700 10px 'DM Sans'; top: 32px; } .badge-display h3 { font: 600 15px 'Fredoka'; } .badge-display p { color: #91a0ad; font-size: 10px; line-height: 1.55; margin: 6px 0 9px; } .dots { display: flex; justify-content: center; gap: 6px; } .dots i { display: block; width: 5px; height: 5px; border-radius: 50%; background: #dbe3e8; } .dots i.active { background: var(--coral); width: 15px; border-radius: 4px; }
.toast { position: fixed; bottom: 25px; left: 50%; transform: translate(-50%, 90px); background: var(--blue-deep); color: white; padding: 12px 17px; border-radius: 8px; font-size: 12px; box-shadow: var(--shadow); transition: transform .25s; z-index: 10; } .toast.show { transform: translate(-50%, 0); }
@media (max-width: 900px) { .sidebar { width: 200px; flex-basis: 200px; } .hero-copy { padding-left: 30px; } .character { left: 28%; } .speech-bubble { right: 11%; } .journey-grid { gap: 10px; } }
@media (max-width: 700px) { .sidebar { position: fixed; z-index: 5; left: -230px; transition: left .25s; box-shadow: 12px 0 30px rgba(0,0,0,.08); } .sidebar.open { left: 0; } .mobile-menu { display: block; } .topbar { padding: 0 20px; gap: 15px; } .breadcrumb { margin-right: auto; } .top-profile div, .top-profile .chevron { display: none; } .top-actions { gap: 16px; } .content { padding: 24px 18px 40px; } .hero-row { grid-template-columns: 1fr; min-height: 445px; } .hero-copy { padding: 30px 25px 10px; } h1 { font-size: 34px; } .hero-art { min-height: 230px; } .character { left: 31%; bottom: 16px; } .speech-bubble { right: 16%; top: 55px; } .journey-grid, .lower-grid { grid-template-columns: 1fr; } .journey-card { padding: 13px 15px; } .lesson-illustration, .game-illustration, .story-illustration { height: 130px; } .chart-bars { gap: 8px; } .chart-bars i { flex: 1; } }
@media (max-width: 390px) { .character { left: 25%; } .speech-bubble { right: 7%; } h1 { font-size: 31px; } }