/* ===== Think Nest app (student demo) ===== */
.app-top { background: var(--white); display: flex; align-items: center; justify-content: space-between; padding: 14px 64px; box-shadow: 0 1px 0 #E4E5EE; position: relative; z-index: 2; }
.app-top-logo { height: 72px; width: auto; }
.app-exit { color: var(--blue); font-weight: 600; font-size: 1.15rem; }
.app-exit:hover { color: var(--red); }
.auth-bg { background: var(--blue); min-height: calc(100vh - 100px); padding: 70px 24px; display: grid; place-items: center; }
.auth-card { background: var(--white); border-radius: 40px; width: min(1280px, 100%); padding: 40px 48px 50px; text-align: center; position: relative; }
.bird { width: 125px; margin: 0 auto 10px; }
.auth-card h1 { color: var(--blue); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; }
.auth-sub { font-size: 1.2rem; margin-top: 6px; }
.roles-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 40px auto 36px; max-width: 1030px; }
.pick { background: var(--white); border: 1px solid #BFBFC4; border-radius: 24px; padding: 34px 16px 40px; display: flex; flex-direction: column; align-items: center; gap: 28px; font: inherit; font-weight: 700; font-size: 1.35rem; color: #2F3241; cursor: pointer; transition: border-color .15s, background .15s; }
.pick img { width: 127px; height: 127px; object-fit: contain; }
.pick:hover { border-color: var(--blue); }
.pick[aria-checked="true"] { border: 2px solid var(--blue); background: #F1F2FA; }
.auth-btn { width: min(290px, 100%); padding: 14px; border: 0; cursor: pointer; font-family: inherit; text-transform: uppercase; font-size: .95rem; }
.auth-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.not-me { position: absolute; left: 48px; top: 44px; font-size: 1.3rem; color: #2F3241; }
.not-me:hover { color: var(--blue); }
.auth-form { width: min(460px, 100%); margin: 36px auto 0; text-align: left; display: flex; flex-direction: column; gap: 18px; }
.auth-form label { display: flex; flex-direction: column; gap: 10px; font-weight: 500; color: #111; }
.auth-form input[type=email], .auth-form input[type=password], .auth-form input[type=text] { font: inherit; border: 1px solid #2F3241; border-radius: 6px; padding: 13px 16px; width: 100%; }
.pw { position: relative; display: block; }
.pw-eye { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; font-size: 1rem; }
.forgot { color: var(--blue); text-decoration: underline; font-size: .85rem; margin-top: -8px; }
.remember { flex-direction: row !important; align-items: center; gap: 10px !important; font-size: .9rem; }
.remember input { width: 22px; height: 22px; }
.auth-form .auth-btn { width: 100%; margin-top: 8px; }
.switch { text-align: center; font-size: .85rem; color: #2F3241; }
.switch a { color: var(--red); font-weight: 700; }
.demo-note { text-align: center; font-size: .8rem; background: #F1F2FA; padding: 8px; border-radius: 8px; }

/* ----- App layout ----- */
body.app { background: #F7F8FC; display: grid; grid-template-columns: 250px 1fr; }
.side { background: var(--navy); color: var(--white); padding: 40px 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.side-logo img { height: 75px; width: auto; margin: 0 0 50px 40px; }
.side h5 { font-size: .8rem; font-weight: 600; padding: 22px 34px 10px; border-top: 1px solid rgba(255,255,255,.15); margin-top: 16px; }
.side ul { display: grid; gap: 2px; }
.side a { display: flex; align-items: center; gap: 14px; padding: 10px 34px; font-size: .9rem; font-weight: 500; border-left: 4px solid transparent; }
.side a:hover { background: rgba(255,255,255,.06); }
.side a.active { border-left-color: var(--white); background: linear-gradient(90deg, rgba(255,255,255,.12), transparent); font-weight: 700; }
.side svg, .app svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.app-main { min-width: 0; }
.app-bar { display: flex; align-items: center; gap: 16px; padding: 16px 40px; background: var(--white); position: sticky; top: 0; z-index: 5; box-shadow: 0 1px 0 #E4E5EE; }
.search { flex: 0 1 420px; display: flex; align-items: center; gap: 10px; background: #F1F2F6; border-radius: 8px; padding: 9px 14px; color: #555; }
.search input { border: 0; background: none; font: inherit; font-size: .9rem; width: 100%; outline: none; }
.bar-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.bell { background: none; border: 0; cursor: pointer; position: relative; color: #2F3241; }
.bell i { position: absolute; top: 0; right: 0; width: 8px; height: 8px; background: var(--red); border-radius: 50%; }
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.side-toggle { display: none; background: none; border: 0; cursor: pointer; color: #2F3241; }
.dash { padding: 28px 40px 60px; max-width: 1640px; }
.panel { background: var(--white); border: 1px solid #E4E5EE; border-radius: 16px; padding: 24px 28px; }
.dash-top { display: grid; grid-template-columns: 2.2fr 1fr; gap: 20px; }
.profile { display: flex; align-items: center; gap: 28px; }
.profile img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; }
.profile h2 { color: #2F3241; font-size: 1.4rem; }
.profile p { font-size: .9rem; }
.profile .pill, .wallet .pill { margin-left: auto; }
.wallet { display: flex; align-items: center; gap: 16px; }
.wallet span { display: block; font-size: .9rem; color: #2F3241; font-weight: 600; }
.wallet strong { font-size: 1.6rem; color: #2F3241; }
.pill { font: inherit; font-weight: 600; font-size: .8rem; border: 0; border-radius: 6px; padding: 7px 18px; cursor: pointer; }
.pill.big { padding: 13px 26px; font-size: .95rem; }
.pill-soft { background: #FFE6E3; color: var(--red); }
.pill-live { background: var(--red); color: var(--white); }
.pill:hover { filter: brightness(.97); }
.dash-h { color: #2F3241; font-size: 1.35rem; font-weight: 700; margin: 34px 0 16px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat { border-radius: 10px; padding: 22px; display: flex; gap: 18px; align-items: center; color: #2F3241; }
.stat b { display: block; font-size: 1.5rem; font-weight: 600; }
.stat span { font-size: .85rem; }
.stat-ic { width: 56px; height: 56px; border-radius: 8px; background: var(--white); display: grid; place-items: center; }
.stat-ic svg { width: 26px; height: 26px; }
.s1 { background: #FFEEE8; } .s1 .stat-ic { color: #FF6636; }
.s2 { background: #EBEBFF; } .s2 .stat-ic { color: #564FFD; }
.s3 { background: #E1F7E3; } .s3 .stat-ic { color: #23BD33; }
.s4 { background: #FFF2E5; } .s4 .stat-ic { color: #FD8E1F; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.arrows { display: flex; gap: 8px; }
.arrows button { width: 40px; height: 40px; border: 0; border-radius: 6px; background: #FFE6E3; color: var(--red); font-size: 1.1rem; cursor: pointer; }
.scroller { display: grid; grid-auto-flow: column; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
.scroller > * { scroll-snap-align: start; }
.scroller.two { grid-auto-columns: calc(50% - 10px); }
.scroller.three { grid-auto-columns: calc(33.333% - 14px); }
.scroller.four { grid-auto-columns: calc(25% - 15px); }
.meta { font-size: .75rem; color: #6E7485; }
.app h4 { color: #1D2026; font-size: .95rem; font-weight: 600; margin: 4px 0 10px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; }
.when { font-size: .8rem; color: var(--blue); font-weight: 500; }
.done { font-size: .8rem; color: #23BD33; font-weight: 500; }
.tag { font-size: .75rem; background: #E9EAF4; color: #2F3241; padding: 4px 10px; border-radius: 6px; font-weight: 600; }
.tag-now { background: #23BD33; color: var(--white); }
.journey { background: var(--white); border: 1px solid #E4E5EE; border-radius: 12px; display: grid; grid-template-columns: 200px 1fr; overflow: hidden; }
.journey img { width: 100%; height: 100%; min-height: 200px; object-fit: cover; }
.journey > div { padding: 20px; display: flex; flex-direction: column; justify-content: center; }
.mentor { background: var(--white); border: 1px solid #E4E5EE; border-radius: 12px; padding: 16px; }
.mentor-top { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.mentor-top img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; }
.mentor-top h4 { margin: 0; font-size: 1.05rem; }
.mentor-top span { font-size: .8rem; }
.learn { background: var(--white); border-radius: 12px; overflow: hidden; box-shadow: 0 6px 24px rgba(30,35,82,.08); display: flex; flex-direction: column; }
.learn img { width: 100%; aspect-ratio: 312 / 220; object-fit: cover; }
.learn-body { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.learn-body .btn { margin-top: auto; }
.code-head { margin-top: 50px; }
.code-head p { margin-top: -8px; font-size: .9rem; }
.curriculum { margin-top: 22px; padding: 0; overflow: hidden; }
.curriculum h4 { padding: 18px 20px; margin: 0; border-bottom: 1px solid #E4E5EE; }
.curriculum ol { display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; background: linear-gradient(90deg, #fff, #EDEEFA); }
.curriculum li { padding: 22px 20px; font-size: .9rem; color: #2F3241; border-right: 1px solid #E4E5EE; }
.curriculum li:last-child { border-right: 0; }
.curriculum b { display: block; font-size: 1.6rem; font-weight: 800; color: #1D2026; }
.course-meta { display: flex; gap: 8px; align-items: center; margin: 14px 0; }
.course-meta span { border: 1px solid #E4E5EE; border-radius: 6px; padding: 3px 10px; font-size: .8rem; }
.course-meta em { margin-left: auto; font-style: normal; color: #2F3241; font-weight: 500; }
.app-footer { padding-top: 60px; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 30px); background: var(--navy); color: var(--white); padding: 14px 22px; border-radius: 10px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50; max-width: calc(100% - 32px); text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.side-shade { display: none; }

@media (max-width: 1100px) {
  .roles-pick { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .scroller.four { grid-auto-columns: calc(50% - 10px); }
  .scroller.three { grid-auto-columns: calc(50% - 10px); }
  .curriculum ol { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  body.app { grid-template-columns: 1fr; }
  .side { position: fixed; left: 0; top: 0; z-index: 30; width: 260px; transform: translateX(-100%); transition: transform .25s; }
  .side.open { transform: none; }
  .side-shade.show { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 20; }
  .side-toggle { display: block; }
  .app-bar, .dash { padding-inline: 18px; }
  .dash-top { grid-template-columns: 1fr; }
  .profile { flex-wrap: wrap; }
  .scroller.two { grid-auto-columns: 90%; }
}
@media (max-width: 640px) {
  .app-top { padding: 10px 18px; }
  .app-top-logo { height: 54px; }
  .auth-bg { padding: 30px 14px; }
  .auth-card { padding: 30px 20px 36px; border-radius: 24px; }
  .not-me { position: static; display: block; text-align: left; margin-bottom: 12px; font-size: 1rem; }
  .pick { padding: 20px 10px 24px; gap: 14px; font-size: 1.05rem; }
  .pick img { width: 80px; height: 80px; }
  .stats { grid-template-columns: 1fr; }
  .scroller.four, .scroller.three { grid-auto-columns: 80%; }
  .journey { grid-template-columns: 1fr; }
  .journey img { min-height: 160px; height: 160px; }
  .curriculum ol { grid-template-columns: 1fr 1fr; }
  .search { display: none; }
}
@media (prefers-reduced-motion: reduce) { .side, .toast { transition: none; } }
/* the public site adds space above every section; the app doesn't need it */
.app section, .auth section { margin-top: 0; }
.app .scroller { margin-top: 0; }
.app .curriculum { margin-top: 22px; }

/* sign up steps, errors, loading */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.steps { display: flex; justify-content: center; gap: 8px; margin: 18px 0 0; list-style: none; flex-wrap: wrap; }
.steps li { font-size: .85rem; padding: 6px 14px; border-radius: 20px; background: #EEF0F8; color: var(--grey); font-weight: 600; }
.steps li.on { background: var(--blue); color: var(--white); }
.step { border: 0; display: flex; flex-direction: column; gap: 18px; }
.step[hidden] { display: none; }
.auth-form select, .auth-form input[type=text] { font: inherit; border: 1px solid #2F3241; border-radius: 6px; padding: 13px 16px; width: 100%; background: var(--white); }
.note { font-size: .9rem; background: #F1F2FA; padding: 10px 12px; border-radius: 8px; color: #2F3241; }
.remember a { color: var(--blue); text-decoration: underline; }
.step-buttons { display: flex; gap: 12px; }
.step-buttons .auth-btn { flex: 1; width: auto; }
.auth-btn.outline { border: 1px solid var(--red); }
.form-error { background: #FFE6E3; color: #A3302B; border-radius: 8px; padding: 10px 12px; font-size: .9rem; font-weight: 500; }
.privacy { text-align: left; max-width: 760px; display: flex; flex-direction: column; gap: 14px; color: #2F3241; }
.privacy h1 { text-align: center; }
.privacy .auth-btn { align-self: center; }
body.loading .app-main { visibility: hidden; }
.empty { color: var(--grey); padding: 18px 0; }
.learn .desc { font-size: .8rem; margin: -4px 0 12px; flex: 1; }
a.pill { display: inline-block; }
.wallet strong { font-size: 1.1rem; }
.initials { width: 40px; height: 40px; border-radius: 50%; background: var(--red); color: var(--white); display: grid; place-items: center; font-weight: 700; font-size: .95rem; flex: none; }
.initials.big { width: 110px; height: 110px; font-size: 2.2rem; background: var(--blue); }
[hidden] { display: none !important; }

/* ===== Student sections ===== */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head .dash-h, .dash > h1.dash-h { font-size: 1.7rem; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.empty-box { grid-column: 1 / -1; background: var(--white); border: 1px dashed #C9CBDA; border-radius: 14px; padding: 36px; text-align: center; display: grid; gap: 14px; justify-items: center; color: #2F3241; }
.hint { margin: -6px 0 16px; font-size: .9rem; }
.bar { height: 8px; background: #EEF0F8; border-radius: 6px; overflow: hidden; margin: 6px 0; }
.bar i { display: block; height: 100%; background: #23BD33; border-radius: 6px; }
.filter input { font: inherit; border: 1px solid #C9CBDA; border-radius: 8px; padding: 10px 14px; width: min(320px, 70vw); }
.search { margin: 0; }
.search .sr { position: absolute; }

/* course page */
.course-hero { display: grid; grid-template-columns: 320px 1fr; gap: 28px; align-items: center; margin-top: 10px; }
.course-hero img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.course-hero h1 { color: #1D2026; font-size: 1.8rem; margin: 6px 0 10px; }
.course-hero .by { font-weight: 600; color: var(--blue); margin: 8px 0 14px; }
.course-hero .bar { max-width: 360px; }
.lesson-list { display: grid; gap: 10px; }
.lesson { display: flex; align-items: center; gap: 14px; background: var(--white); border: 1px solid #E4E5EE; border-radius: 10px; padding: 14px 18px; flex-wrap: wrap; }
.lesson b { font-size: 1.2rem; color: var(--blue); }
.lesson-title { flex: 1; color: #1D2026; font-weight: 600; min-width: 160px; }
.lesson.is-done { background: #F1FBF2; border-color: #BFE8C4; }
.tick { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #2F3241; cursor: pointer; }
.tick input { width: 20px; height: 20px; accent-color: #23BD33; }

/* calendar */
.cal { padding: 22px; }
.cal h2 { color: #1D2026; font-size: 1.2rem; margin-bottom: 14px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-days span { text-align: center; font-size: .8rem; font-weight: 600; color: var(--grey); padding-bottom: 4px; }
.cal-day { font: inherit; background: #F7F8FC; border: 1px solid transparent; border-radius: 10px; min-height: 74px; padding: 8px; text-align: left; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; color: #1D2026; }
.cal-day:hover { border-color: var(--blue); }
.cal-day.today { background: #EEF0FB; font-weight: 700; }
.cal-day.picked { border: 2px solid var(--blue); }
.cal-day em { display: flex; gap: 4px; flex-wrap: wrap; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot-class { background: var(--blue); }
.dot-book { background: var(--red); }
.cal-key { margin-top: 14px; font-size: .85rem; display: flex; gap: 8px; align-items: center; }
.cal-key .dot-book { margin-left: 14px; }
.event-list { display: grid; gap: 12px; }
.event { display: flex; justify-content: space-between; gap: 16px; align-items: center; background: var(--white); border: 1px solid #E4E5EE; border-left: 5px solid var(--blue); border-radius: 10px; padding: 16px 18px; flex-wrap: wrap; }
.event.ev-book { border-left-color: var(--red); }
.event h4 { margin: 0 0 4px; }
.event .meta, .event .when { display: block; }
.event-actions { display: flex; gap: 8px; align-items: center; }

/* mentors + booking dialog */
.mentor.big { display: flex; flex-direction: column; gap: 10px; }
.mentor.big .desc { flex: 1; font-size: .9rem; }
.dlg { border: 0; border-radius: 20px; padding: 28px; width: min(480px, calc(100% - 32px)); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.dlg::backdrop { background: rgba(30,35,82,.45); }
.dlg h2 { color: var(--blue); font-size: 1.3rem; }
.dlg .auth-form { margin: 0; width: 100%; }
.auth-form textarea, .auth-form input[type=date], .auth-form input[type=time] { font: inherit; border: 1px solid #2F3241; border-radius: 6px; padding: 12px 14px; width: 100%; }

/* files */
.upload-btn { cursor: pointer; }
.file-list { padding: 6px 18px; }
.file-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid #EEF0F8; flex-wrap: wrap; }
.file-row:last-child { border-bottom: 0; }
.file-ic { font-size: 1.6rem; }
.file-name { flex: 1; min-width: 160px; display: flex; flex-direction: column; }
.file-name b { color: #1D2026; word-break: break-word; }

/* recordings + certificates */
.rec iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; background: #000; }
.rec-link { display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--navy); color: var(--white); font-weight: 700; }
.cert { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cert-ic { font-size: 2.2rem; }
.cert h4 { margin: 0; }

/* settings */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.auth-form.wide { width: 100%; margin: 0; }
.auth-form.wide h2 { color: #1D2026; font-size: 1.2rem; }

@media (max-width: 900px) {
  .course-hero, .settings-grid { grid-template-columns: 1fr; }
  .cal-day { min-height: 54px; padding: 6px; font-size: .85rem; }
}
.app-main { display: flex; flex-direction: column; min-height: 100vh; }
.app-main .dash { flex: 1; width: 100%; }

/* ===== Teacher area ===== */
.side h5.first { border-top: 0; margin-top: 0; }
.bar-title { font-weight: 700; color: var(--blue); }
.t-name { color: #2F3241; font-size: 1.4rem; }
.tabs { display: flex; gap: 6px; margin: 28px 0 16px; border-bottom: 1px solid #E4E5EE; }
.tabs button { font: inherit; font-weight: 600; background: none; border: 0; padding: 12px 18px; cursor: pointer; color: var(--grey); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs button[aria-selected="true"] { color: var(--blue); border-bottom-color: var(--blue); }
.inline-form { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.inline-form h3 { color: #1D2026; font-size: 1.1rem; }
.inline-form label { display: flex; flex-direction: column; gap: 8px; font-weight: 500; color: #2F3241; font-size: .95rem; flex: 1; }
.inline-form input, .inline-form select, .inline-form textarea { font: inherit; border: 1px solid #C9CBDA; border-radius: 6px; padding: 11px 14px; width: 100%; background: var(--white); }
.inline-form .btn { align-self: flex-start; border: 0; cursor: pointer; font-family: inherit; }
.form-row { display: flex; gap: 14px; flex-wrap: wrap; }
.form-row label { min-width: 180px; }
.table-wrap { overflow-x: auto; padding: 0; }
.t-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.t-table th, .t-table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid #EEF0F8; color: #2F3241; white-space: nowrap; }
.t-table th { font-size: .8rem; color: var(--grey); font-weight: 700; background: #FAFBFE; }
.bar.small { display: inline-block; width: 90px; vertical-align: middle; margin: 0 6px 0 0; }
.row.start { justify-content: flex-start; flex-wrap: wrap; }
.pill.danger { background: #FDECEC; color: #B3261E; }
.pill:disabled { opacity: .4; cursor: default; }
.rec-row { display: flex; flex-direction: column; gap: 6px; }
.rec-row h4 { margin: 0; }
.step-buttons.narrow { max-width: 460px; margin: 28px auto 0; }
.stat-ic { font-size: 1.5rem; }
.auth-form input[type=tel], .auth-form input[type=url], .auth-form input[type=number] { font: inherit; border: 1px solid #2F3241; border-radius: 6px; padding: 13px 16px; width: 100%; background: var(--white); }

/* admin approvals */
.count { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 14px; background: #EEF0F8; color: var(--blue); font-size: .9rem; margin-left: 6px; vertical-align: middle; }
.approve-list { display: grid; gap: 12px; }
.person { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 22px; }
.person .initials { width: 48px; height: 48px; }
.person-info { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.person-info h4 { margin: 0; }
.person-actions { display: flex; gap: 8px; align-items: center; }
.declined-box { margin-top: 28px; }
.declined-box summary { cursor: pointer; font-weight: 700; color: #2F3241; }
.declined-box .approve-list { margin-top: 14px; }
.admin-link { margin-top: 22px; font-size: .95rem; }
.admin-link a { color: var(--blue); font-weight: 600; text-decoration: underline; }
.admin-link a:hover { color: var(--red); }
.roles-pick { grid-template-columns: repeat(5, 1fr); max-width: 1180px; }
.pick-ic { width: 127px; height: 127px; display: grid; place-items: center; }
.pick-ic svg { width: 100px; height: 100px; }
@media (max-width: 1100px) { .roles-pick { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .roles-pick { grid-template-columns: repeat(2, 1fr); } .pick-ic, .pick-ic svg { width: 80px; height: 80px; } }

/* ===== Parent area ===== */
.kid-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 20px; }
.kid-tabs button { font: inherit; font-weight: 600; display: flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: 30px; border: 1px solid #D9DBE8; background: var(--white); cursor: pointer; color: #2F3241; }
.kid-tabs button .initials { width: 34px; height: 34px; font-size: .8rem; }
.kid-tabs button[aria-selected="true"] { border: 2px solid var(--blue); background: #EEF0FB; }
#kid-view .stats { margin-top: 20px; }
.kid-courses { display: grid; gap: 12px; }
.kid-course { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.kid-course h4 { margin: 0 0 4px; }
.kid-bar { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.kid-bar .bar { flex: 1; margin: 0; }
.add-kid { margin-top: 34px; display: grid; gap: 12px; color: #2F3241; }
.add-kid h2 { color: var(--blue); font-size: 1.3rem; }
.row-form { flex-direction: row !important; align-items: center; margin-top: 4px !important; flex-wrap: wrap; }
.row-form input { text-transform: uppercase; letter-spacing: .15em; font-weight: 700; max-width: 260px; }
.family .code { font-size: 2rem; font-weight: 800; letter-spacing: .2em; color: var(--blue); background: #EEF0FB; border-radius: 10px; padding: 12px 18px; display: inline-block; }
.family { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; color: #2F3241; }
.family h2 { font-size: 1.2rem; color: #1D2026; }
.settings-grid .family { grid-column: 1 / -1; }
.app .add-kid { margin-top: 34px; }
.row-form label { flex: 0 1 280px; }
.row-form input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 500; }

/* parent requests */
.pending h3 { font-size: 1rem; color: #1D2026; margin: 8px 0 8px; }
.pending-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #EEF0F8; }
.pending-row > div { flex: 1; display: flex; flex-direction: column; }
.pending-row .initials { width: 36px; height: 36px; font-size: .8rem; }
.tag-wait { background: #FFF2E5; color: #B25E09; }
.code-way { margin-top: 6px; border-top: 1px solid #EEF0F8; padding-top: 14px; }
.code-way summary { cursor: pointer; font-weight: 600; color: var(--blue); }
.code-way p { margin: 10px 0; }
.row-form .code-input { text-transform: uppercase; letter-spacing: .15em; font-weight: 700; }
.row-form input[type=email] { text-transform: none; letter-spacing: 0; font-weight: 500; }
.row-form label { flex: 0 1 360px; }
.parent-req { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border: 2px solid var(--blue); background: #F1F2FA; margin-bottom: 20px; }
.req-ic { font-size: 2rem; }
.req-text { flex: 1; min-width: 240px; color: #2F3241; display: flex; flex-direction: column; gap: 4px; }
.req-actions { display: flex; gap: 8px; }

/* ===== Parent area (Phase 3 design) ===== */
.kid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-bottom: 10px; }
.kid-card { display: flex; align-items: center; gap: 18px; padding: 22px; border-radius: 16px; color: #1D2026; transition: transform .15s; }
.kid-card:hover { transform: translateY(-2px); }
.kid-card b { display: block; font-size: 1.25rem; }
.kid-card span span { font-size: .9rem; }
.kc-pink { background: #FFECEC; } .kc-yellow { background: #FFF6E6; } .kc-green { background: #E8F7EA; } .kc-blue { background: #EAF2FF; }
.kc-add { background: #E3E5F4; }
.kc-add b { font-weight: 500; font-size: 1.3rem; }
.plus { width: 44px; height: 44px; border-radius: 8px; background: var(--blue); color: var(--white); display: grid; place-items: center; font-size: 1.6rem; }
.initials.big2 { width: 76px; height: 76px; font-size: 1.5rem; background: var(--blue); }
.child-banner { height: 170px; margin: -28px -40px 0; background: var(--blue) radial-gradient(rgba(255,255,255,.25) 2px, transparent 2.5px) 0 0 / 28px 28px; }
.child-head { display: flex; align-items: flex-end; gap: 24px; margin-top: -90px; padding-left: 30px; flex-wrap: wrap; }
.initials.huge { width: 170px; height: 170px; font-size: 3rem; border: 6px solid var(--white); background: var(--red); }
.child-head h1 { color: var(--navy); font-size: 2rem; margin-bottom: 6px; }
.badge { display: inline-block; background: #D9DCF0; color: var(--blue); border-radius: 14px; padding: 3px 14px; font-size: .85rem; font-weight: 600; }
.big-back { font-size: 1.8rem; font-weight: 800; margin: 30px 0 10px; }
.child-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.child-card { border-color: #FAD7D5; }
.child-card h3 { color: #2F3241; font-size: 1.3rem; font-weight: 600; margin-bottom: 14px; }
.cc-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cc-row span { display: block; font-size: .9rem; color: #2F3241; }
.cc-row b { font-size: 2rem; color: #1D2026; }
.unlink-row { margin-top: 30px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.narrow-box { width: min(460px, 100%); margin: 20px auto 0; text-align: left; }
.auth-form select { font: inherit; border: 1px solid #2F3241; border-radius: 6px; padding: 13px 16px; width: 100%; background: var(--white); }
.auth-form input:disabled { background: #F1F2F6; color: var(--grey); }
@media (max-width: 760px) {
  .child-cards, .two { grid-template-columns: 1fr; }
  .child-banner { margin: -28px -18px 0; height: 120px; }
  .child-head { margin-top: -60px; padding-left: 0; }
  .initials.huge { width: 110px; height: 110px; font-size: 2rem; }
}
/* teacher phase 4 additions */
.form-sub { color: var(--blue); font-size: 1.15rem; margin-top: 8px; text-align: center; }
.req-banner { display: flex; align-items: center; gap: 16px; margin-top: 22px; border: 2px solid var(--red); background: #FFF4F3; color: #2F3241; }
.req-banner .pill { margin-left: auto; }
.vacancies { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.person-info .bio { font-style: italic; }
.auth-form textarea { font: inherit; border: 1px solid #2F3241; border-radius: 6px; padding: 12px 14px; width: 100%; }

/* ===== Community ===== */
.dash.community { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.comm-rules { background: #F1F2FA; border-radius: 10px; padding: 10px 14px; font-size: .9rem; color: #2F3241; margin-bottom: 16px; }
.composer { margin-bottom: 20px; }
.composer-top { display: flex; gap: 14px; align-items: flex-start; }
.grow { flex: 1; }
.composer textarea { width: 100%; font: inherit; border: 0; background: #EEF0F8; border-radius: 22px; padding: 14px 20px; resize: vertical; min-height: 54px; }
.composer-bar { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #EEF0F8; }
.pic-btn { cursor: pointer; font-weight: 600; color: var(--blue); }
.pic-name { font-size: .85rem; cursor: pointer; color: var(--grey); }
.composer-bar .btn { margin-left: auto; border: 0; cursor: pointer; font-family: inherit; padding: 10px 34px; }
.post { margin-bottom: 18px; padding: 20px 22px; }
.post-head { display: flex; gap: 12px; align-items: center; }
.post-head .meta { display: block; }
.post-menu { margin-left: auto; display: flex; gap: 12px; }
.link-btn { background: none; border: 0; font: inherit; font-size: .8rem; color: var(--grey); cursor: pointer; text-decoration: underline; padding: 0; }
.link-btn:hover { color: var(--red); }
.post-body { margin: 14px 0; color: #2F3241; line-height: 1.6; white-space: normal; word-break: break-word; }
.post-img { width: calc(100% + 44px); max-width: none; margin: 0 -22px 12px; max-height: 520px; object-fit: cover; }
.post-actions { display: flex; gap: 6px; border-top: 1px solid #EEF0F8; padding-top: 10px; }
.act { flex: 1; background: none; border: 0; font: inherit; font-weight: 600; color: #6E7485; padding: 8px; border-radius: 8px; cursor: pointer; }
.act:hover { background: #F1F2FA; }
.act.on { color: var(--blue); }
.comments { margin-top: 10px; display: grid; gap: 10px; }
.comment { display: flex; gap: 10px; }
.comment .initials { width: 32px; height: 32px; font-size: .75rem; }
.bubble { background: #F1F2FA; border-radius: 14px; padding: 8px 14px; flex: 1; }
.bubble p { margin: 2px 0; color: #2F3241; font-size: .92rem; word-break: break-word; }
.comment-form { display: flex; gap: 8px; }
.comment-form input { width: 100%; font: inherit; border: 1px solid #D9DBE8; border-radius: 20px; padding: 9px 16px; }
.role-tag { font-size: .7rem; font-weight: 700; background: #E3E5F4; color: var(--blue); border-radius: 10px; padding: 2px 8px; vertical-align: middle; }
.role-tag.admin { background: #FFE6E3; color: var(--red); }
.more { display: block; margin: 10px auto 0; }
.comm-side { position: sticky; top: 90px; }
.comm-side h2 { font-size: 1.1rem; color: #1D2026; margin: 6px 0 12px; }
.side-list { display: grid; gap: 4px; margin-bottom: 26px; padding: 14px; }
.side-row { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 8px; color: #2F3241; }
a.side-row { flex-direction: column; align-items: flex-start; gap: 2px; }
a.side-row:hover { background: #F1F2FA; }
.side-row .initials { width: 36px; height: 36px; font-size: .8rem; }
.recent-text { font-size: .9rem; font-weight: 500; }
@media (max-width: 1100px) { .dash.community { grid-template-columns: 1fr; } .comm-side { position: static; } }
.post-head b, .bubble b, .side-row span { color: #1D2026; }
/* friends */
.find { margin: 10px 0 10px; display: grid; gap: 12px; }
.find h2 { font-size: 1.15rem; color: #1D2026; }
.friend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.friend { display: flex; align-items: center; gap: 12px; padding: 16px; }
.friend > div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.friend b { color: #1D2026; }
.friend-menu { flex: 0 0 auto !important; gap: 4px; align-items: flex-end; }
.role-tag.parent { background: #E8F7EA; color: #1E7A2B; }
.app .req-banner { margin-bottom: 16px; }
.app .find { margin-top: 22px; } .app #incoming .approve-list { margin-bottom: 4px; }
/* study groups */
.group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.group-card { display: flex; flex-direction: column; gap: 6px; color: #1D2026; transition: transform .15s; }
.group-card:hover { transform: translateY(-2px); }
.group-card b { font-size: 1.15rem; }
.group-ic { width: 52px; height: 52px; border-radius: 14px; background: var(--blue); color: var(--white); display: grid; place-items: center; font-weight: 800; margin-bottom: 6px; }
.group-ic.big { width: 84px; height: 84px; font-size: 1.6rem; border-radius: 20px; margin: 0; }
.group-head { display: flex; gap: 20px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.group-head h1 { color: #1D2026; font-size: 1.7rem; }
.group-head .pill { margin-left: auto; }
.avatars { display: flex; align-items: center; margin-top: 10px; }
.avatars .initials { width: 32px; height: 32px; font-size: .7rem; border: 2px solid var(--white); margin-right: -8px; }
.avatars .meta { margin-left: 16px; }
.readonly-note { background: #FFF6E6; border-radius: 10px; padding: 10px 14px; margin-top: 14px; color: #6B4B00; }
.res-list { display: grid; gap: 10px; margin-top: 16px; }
.res-list .file-row { padding: 14px 18px; border-bottom: 0; }
.invite-box { margin-bottom: 18px; display: grid; gap: 12px; }
.invite-box h3 { color: #1D2026; }
.invite-box .two { align-items: start; }
.invite-box .approve-list { margin-top: 8px; }
#gcomposer textarea { width: 100%; font: inherit; border: 0; background: #EEF0F8; border-radius: 16px; padding: 14px 18px; resize: vertical; }
.pending-row .role-tag { align-self: flex-start; } .app #invites + .group-grid, .app #invites .approve-list { margin-bottom: 18px; }

/* ===== Chat ===== */
.dash.chat-page { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; height: calc(100vh - 140px); min-height: 520px; padding-bottom: 28px; }
.chat-list { display: flex; flex-direction: column; padding: 18px; overflow: hidden; }
.chat-list-head { display: flex; align-items: center; justify-content: space-between; }
.chat-list-head h1 { font-size: 1.4rem; color: #1D2026; }
.chat-safety { font-size: .8rem; background: #F1F2FA; border-radius: 8px; padding: 8px 10px; margin: 10px 0; color: #2F3241; }
#convs { overflow-y: auto; flex: 1; margin: 0 -8px; }
.conv { width: 100%; display: flex; gap: 12px; align-items: center; background: none; border: 0; text-align: left; font: inherit; padding: 10px 8px; border-radius: 10px; cursor: pointer; }
.conv:hover { background: #F5F6FB; }
.conv.on { background: #EEF0FB; }
.conv .initials { width: 44px; height: 44px; flex: none; }
.initials.grp { background: var(--blue); }
.conv-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.conv-text b { color: #1D2026; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-text .meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.unread { background: var(--red); color: var(--white); border-radius: 10px; font-size: .72rem; font-weight: 700; padding: 1px 7px; }
.chat-box { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.chat-empty { flex: 1; display: grid; place-content: center; text-align: center; color: var(--grey); gap: 8px; }
.chat-empty span { font-size: 3rem; }
.chat-head { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid #EEF0F8; }
.chat-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-head b { color: #1D2026; font-size: 1.05rem; }
.chat-head .meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.back-chats { display: none; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 10px; background: #FAFBFE; }
.msg { display: flex; gap: 8px; align-items: flex-end; max-width: 78%; }
.msg .initials { width: 30px; height: 30px; font-size: .7rem; flex: none; }
.msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.msg-bubble { background: var(--white); border: 1px solid #E4E5EE; border-radius: 16px 16px 16px 4px; padding: 8px 14px; }
.msg.mine .msg-bubble { background: var(--blue); border-color: var(--blue); color: var(--white); border-radius: 16px 16px 4px 16px; }
.msg-bubble b { font-size: .8rem; color: var(--blue); }
.msg-bubble p { margin: 2px 0; word-break: break-word; }
.msg.mine .meta, .msg.mine .link-btn { color: rgba(255,255,255,.75); }
.msg-bubble .meta { font-size: .7rem; }
.chat-ro { padding: 12px 20px; background: #FFF6E6; color: #6B4B00; font-size: .9rem; margin: 0; }
.chat-form { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid #EEF0F8; align-items: flex-end; }
.chat-form textarea { width: 100%; font: inherit; border: 1px solid #D9DBE8; border-radius: 20px; padding: 10px 16px; resize: none; max-height: 120px; }
.chat-form .btn { border: 0; cursor: pointer; font-family: inherit; padding: 10px 24px; }
.empty.center { text-align: center; margin: auto; }
.pending-row.pick { width: 100%; background: none; border: 0; border-top: 1px solid #EEF0F8; font: inherit; text-align: left; cursor: pointer; }
.ghead-actions { margin-left: auto; display: flex; gap: 8px; }
.group-head .ghead-actions .pill { margin-left: 0; }
.nav-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); margin-left: auto; }
a.pending-row { color: inherit; }
@media (max-width: 900px) {
  .dash.chat-page { grid-template-columns: 1fr; height: calc(100vh - 120px); }
  .chat-page .chat-box { display: none; }
  .chat-page.has-chat .chat-box { display: flex; }
  .chat-page.has-chat .chat-list { display: none; }
  .back-chats { display: inline-block; }
  .msg { max-width: 92%; }
}
.big-note { font-size: 1rem; line-height: 1.6; padding: 16px; }
/* notifications bell */
.bell { position: relative; background: none; border: 0; cursor: pointer; padding: 6px; border-radius: 50%; display: grid; place-items: center; }
.bell:hover { background: #F1F2FA; }
.bell svg { width: 24px; height: 24px; fill: none; stroke: #1D2026; stroke-width: 2; }
.bell .bell-count { position: absolute; top: 0; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center; }
.bell > i { display: none; }
.notif-panel { position: absolute; top: calc(100% + 10px); right: 0; width: min(380px, 92vw); max-height: 70vh; background: #fff; border-radius: 14px; box-shadow: 0 12px 40px rgba(29,32,38,.18); z-index: 60; display: flex; flex-direction: column; overflow: hidden; }
.notif-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid #EEF0F8; }
.notif-head b { color: #1D2026; }
.notif-list { overflow-y: auto; }
.notif { display: flex; gap: 12px; padding: 12px 16px; color: #2F3241; border-bottom: 1px solid #F3F4F9; font-size: .92rem; line-height: 1.4; }
.notif:hover { background: #F5F6FB; }
.notif.unread { background: #F1F3FD; }
.notif { position: relative; }
.notif.unread::after { content: ""; position: absolute; right: 14px; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.notif.unread .notif-text { padding-right: 16px; font-weight: 600; }
.notif-ic { font-size: 1.2rem; }
.notif-text { display: flex; flex-direction: column; gap: 2px; }
.notif-list .empty { padding: 20px 16px; }
/* moderation */
.mod-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: #FFF6E6; color: #6B4B00; border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; font-size: .9rem; }
.mod-bar.rejected { background: #FDECEC; color: #8A1F1F; }
.mod-actions { display: flex; gap: 8px; }
.pending-box { margin-bottom: 20px; }
.post-pending { border: 2px dashed #F2C46D; }
.post.flash { animation: flash 2s ease; }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 4px #FFB4AB; } 100% { box-shadow: none; } }
/* chat attachments */
.attach-btn { cursor: pointer; font-size: 1.3rem; padding: 8px; border-radius: 50%; }
.attach-btn:hover { background: #F1F2FA; }
.chat-form .grow { display: flex; flex-direction: column; gap: 6px; }
.attach-name { font-size: .8rem; background: #EEF0FB; color: var(--blue); border-radius: 8px; padding: 4px 10px; cursor: pointer; align-self: flex-start; }
.msg-img { display: block; max-width: 260px; max-height: 260px; border-radius: 10px; margin: 4px 0; cursor: zoom-in; background: #EEF0F8; min-height: 60px; min-width: 80px; object-fit: cover; }
.msg-file { background: rgba(62,75,148,.08); border: 0; border-radius: 10px; padding: 8px 12px; font: inherit; color: inherit; cursor: pointer; margin: 4px 0; text-align: left; }
.msg.mine .msg-file { background: rgba(255,255,255,.18); }
.wide-card { max-width: 720px; }
.auth-form select { font: inherit; border: 1px solid #2F3241; border-radius: 6px; padding: 12px 14px; width: 100%; background: #fff; }
.privacy a:not(.btn) { color: var(--blue); text-decoration: underline; }
/* ===== Curriculum guide ===== */
.cur-page { background: #F5F6FB; min-height: calc(100vh - 88px); padding: 40px 20px 60px; }
.cur-wrap { max-width: 980px; margin: 0 auto; display: grid; gap: 18px; }
.cur-tabs { flex-wrap: wrap; }
.cur-intro h2 { color: #1D2026; font-size: 1.4rem; }
.cur-intro p { margin-top: 8px; line-height: 1.65; color: #2F3241; }
.cur-link { display: inline-block; margin-top: 10px; color: var(--blue); font-weight: 600; text-decoration: underline; }
.cur-grades { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid #D9DBE8; background: #fff; border-radius: 20px; padding: 8px 16px; font: inherit; font-weight: 600; color: #2F3241; cursor: pointer; }
.chip:hover { border-color: var(--blue); }
.chip.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.cur-body h3 { color: var(--blue); font-size: 1.5rem; margin-bottom: 6px; }
.cur-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cur-stage { background: #EEF0FB; color: var(--blue); font-weight: 700; border-radius: 20px; padding: 4px 14px; }
.cur-overview { margin: 12px 0; line-height: 1.65; color: #2F3241; font-size: 1.02rem; }
.cur-details { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 8px; }
.cur-sub { background: #FAFBFE; border: 1px solid #ECEEF6; border-radius: 12px; padding: 14px 16px; }
.cur-sub h4 { color: #1D2026; margin-bottom: 8px; }
.cur-sub ul { padding-left: 18px; display: grid; gap: 6px; color: #2F3241; line-height: 1.5; }
.cur-help { background: #F1F3FD; border-radius: 12px; padding: 14px 16px; display: grid; gap: 6px; text-align: left; font-size: .92rem; }
.cur-help b { color: var(--blue); }
.cur-help .cur-overview { margin: 4px 0; font-size: .92rem; }
.cur-help a { color: var(--blue); font-weight: 600; text-decoration: underline; }
.cur-card { margin-top: 18px; }
.cur-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cur-card-head h2 { color: #1D2026; font-size: 1.2rem; }
.cur-editor { align-items: start; }
.cur-editor .mono { font-family: ui-monospace, Menlo, monospace; font-size: .88rem; }
.req-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.cur-sub ul { list-style: disc; } .cur-wrap > .title { justify-self: start; } .cur-head .cur-stage { display: inline-block; }
/* ===== Objectives & activities ===== */
.plan-step { margin-top: 18px; display: grid; gap: 14px; }
.plan-step h2 { color: #1D2026; font-size: 1.2rem; display: flex; align-items: center; gap: 10px; }
.step-num { width: 30px; height: 30px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: .95rem; }
.obj-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.obj-filters label, .gen-form > label, .plan-box label, #plan-box label, .act-edit label, #assign-form label { display: grid; gap: 6px; font-weight: 600; color: #2F3241; font-size: .9rem; }
.plan-step select, .plan-step input[type=text], .plan-step input[type=search], .plan-step input[type=date], .plan-step input[type=number], .plan-step textarea { font: inherit; font-weight: 400; border: 1px solid #C9CCDA; border-radius: 8px; padding: 9px 12px; width: 100%; background: #fff; }
.obj-list { max-height: 420px; overflow-y: auto; border: 1px solid #ECEEF6; border-radius: 12px; padding: 6px 12px; }
.obj-group h4 { color: var(--blue); margin: 12px 0 6px; font-size: .95rem; }
.obj-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: #2F3241; line-height: 1.45; }
.obj-row:hover { background: #F5F6FB; }
.obj-row.on { background: #EEF0FB; outline: 2px solid var(--blue); }
.obj-row input { margin-top: 4px; }
.obj-row span { flex: 1; }
.own-obj summary { cursor: pointer; color: var(--blue); font-weight: 700; }
.own-obj form { margin-top: 10px; display: grid; gap: 10px; }
.chosen-obj { background: #F1F3FD; border-radius: 10px; padding: 12px 14px; display: grid; gap: 4px; }
.chosen-obj:empty { display: none; }
.gen-form { display: grid; gap: 12px; }
#plan-box { display: grid; gap: 12px; border-top: 1px solid #EEF0F8; padding-top: 14px; }
#plan-box[hidden] { display: none; }
.plan-editor { display: grid; gap: 12px; }
.act-edit { display: grid; gap: 10px; background: #FAFBFE; border: 1px solid #ECEEF6; }
.act-edit-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.act-edit-top input[data-f=name] { flex: 1; min-width: 180px; font-weight: 700; }
.act-edit-top select { width: auto; }
.act-edit-top input[type=number] { width: 70px; }
.act-num { width: 26px; height: 26px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-size: .8rem; font-weight: 700; flex: none; }
.stud-list { display: grid; gap: 12px; max-height: 320px; overflow-y: auto; border: 1px solid #ECEEF6; border-radius: 12px; padding: 12px; }
.stud-group { display: grid; gap: 4px; }
.stud-group .stud { padding-left: 24px; font-weight: 400; }
#assign-form { display: grid; gap: 14px; }
.asg-list { display: grid; gap: 12px; }
.asg > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.asg > summary::-webkit-details-marker { display: none; }
.asg > summary > div { display: flex; flex-direction: column; }
.asg > summary b { color: #1D2026; }
.asg[open] > summary { margin-bottom: 12px; }
.asg.is-done { opacity: .85; }
.prog { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: #6E7485; white-space: nowrap; }
.prog .bar { width: 90px; height: 8px; border-radius: 4px; background: #EEF0F8; overflow: hidden; }
.prog .bar i { display: block; height: 100%; background: #2FA84F; }
.obj-line { background: #F1F3FD; border-radius: 10px; padding: 10px 12px; color: #2F3241; margin-bottom: 10px; }
.teacher-msg { background: #FFF6E6; border-radius: 10px; padding: 10px 12px; color: #6B4B00; margin-bottom: 10px; }
.sc-box { background: #EAF7EE; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; }
.sc-box b { color: #1E7A2B; }
.sc-box ul { list-style: disc; padding-left: 20px; margin-top: 4px; }
.act-list { display: grid; gap: 12px; }
.act-card { border: 1px solid #ECEEF6; border-radius: 12px; padding: 14px 16px; background: #fff; display: grid; gap: 8px; }
.act-top { display: flex; gap: 10px; align-items: center; }
.act-top h4 { color: #1D2026; }
.act-top .meta { text-transform: capitalize; }
.act-steps { list-style: decimal; padding-left: 22px; display: grid; gap: 4px; color: #2F3241; line-height: 1.5; }
.act-mat, .act-extra { font-size: .92rem; color: #2F3241; }
.asg-plan summary { cursor: pointer; color: var(--blue); font-weight: 600; margin: 10px 0; }
.asg-progress { display: grid; }
.submit-box { margin-top: 14px; display: grid; gap: 10px; background: #FAFBFE; }
.submit-box h4 { color: #1D2026; }
.submit-box label { display: grid; gap: 6px; font-weight: 600; font-size: .9rem; }
.submit-box textarea { font: inherit; border: 1px solid #C9CCDA; border-radius: 8px; padding: 9px 12px; }
#assign-form .remember, .stud-group .remember { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: .95rem; } #assign-form .remember .meta { margin-left: 4px; }
.signed-in { display: grid; gap: 12px; text-align: left; }
/* ===== Lessons with objectives, worksheets and tests ===== */
.lesson-extra { display: grid; gap: 14px; border-top: 1px solid #EEF0F8; padding-top: 14px; }
.lb-objective { display: grid; gap: 8px; }
.lb-objective label, .lb-gen label, .lb-editor label { display: grid; gap: 6px; font-weight: 600; font-size: .9rem; color: #2F3241; }
.lesson-extra select, .lesson-extra input[type=text], .lesson-extra input[type=number], .lesson-extra textarea { font: inherit; font-weight: 400; border: 1px solid #C9CCDA; border-radius: 8px; padding: 9px 12px; width: 100%; background: #fff; }
#lb-obj { max-width: 100%; }
.lb-kind { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.lb-kind legend { font-weight: 700; color: #1D2026; margin-bottom: 6px; width: 100%; }
.lb-kind .remember { display: flex; align-items: center; gap: 6px; }
.lb-gen { display: grid; gap: 12px; background: #F7F8FD; border-radius: 12px; padding: 14px; }
.lb-gen[hidden] { display: none; }
.lb-editor { display: grid; gap: 12px; }
.lb-editor .act-edit-top select { width: auto; }
.lb-editor .act-edit-top input[type=number] { width: 70px; }
.key-field { background: #FFF6E6; border-radius: 8px; padding: 8px 10px; }
.lesson-obj { display: block; margin-top: 2px; font-weight: 400; }
.tag-kind { background: #EEF0FB; color: var(--blue); }
.lesson-material { margin: 6px 0 14px; display: grid; gap: 12px; }
.lesson-quiz { display: grid; gap: 14px; }
.quiz-instr { font-weight: 600; color: #1D2026; }
.quiz-q { border: 1px solid #ECEEF6; border-radius: 12px; padding: 12px 16px; display: grid; gap: 8px; background: #fff; }
.quiz-q legend { display: flex; gap: 8px; align-items: center; font-weight: 600; color: #1D2026; padding: 0 4px; }
.quiz-q .remember { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.quiz-q input[type=text], .quiz-q textarea { font: inherit; border: 1px solid #C9CCDA; border-radius: 8px; padding: 9px 12px; width: 100%; }
.result-box { background: #EAF7EE; border-radius: 10px; padding: 12px 14px; color: #1E4D27; }
.wide-dlg { width: min(860px, 95vw); }
.results-body { display: grid; gap: 12px; max-height: 65vh; overflow-y: auto; }
.result { display: grid; gap: 8px; }
.result header { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.result-answers { list-style: decimal; padding-left: 22px; display: grid; gap: 6px; }
.result label { display: grid; gap: 4px; font-weight: 600; font-size: .9rem; }
.result input { font: inherit; border: 1px solid #C9CCDA; border-radius: 8px; padding: 8px 10px; }
.key-box { background: #FFF6E6; border-radius: 10px; padding: 10px 14px; }
.key-box summary { cursor: pointer; font-weight: 700; }
.key-box ol { list-style: decimal; padding-left: 22px; margin-top: 8px; display: grid; gap: 6px; }
@media print { .side, .app-bar, .footer, .tabs, .lesson:not(:has(+ .lesson-material:not([hidden]))), .step-buttons, .course-hero .btn { display: none !important; } .lesson-material { border: 0; } }
.lesson-extra .lb-kind label.remember, .quiz-q label.remember { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px; }
.imp-box { display: grid; gap: 10px; } .imp-box textarea { font-family: ui-monospace, Menlo, monospace; font-size: .85rem; }
/* ===== Lesson tools ===== */
.item-dlg { width: min(900px, 96vw); max-height: 92vh; padding: 0; }
.item-wrap { padding: 22px 26px 26px; display: grid; gap: 14px; }
.item-wrap .path-head { display: flex; justify-content: space-between; align-items: center; }
.item-wrap h2 { display: flex; align-items: center; gap: 10px; color: var(--blue); font-size: 1.35rem; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.tool { position: relative; text-align: left; border: 2px solid #E4E6F1; background: #fff; border-radius: 14px; padding: 14px; font: inherit; cursor: pointer; display: grid; gap: 4px; color: #2F3241; }
.tool:hover, .tool:focus-visible { border-color: var(--blue); background: #F7F8FD; }
.tool b { color: #1D2026; }
.tool > span:last-of-type { font-size: .82rem; color: #6E7485; line-height: 1.4; }
.tool-ic { font-size: 1.8rem; line-height: 1; }
.tool-ic.sm { font-size: 1.4rem; }
.ai-badge { position: absolute; top: 10px; right: 10px; font-style: normal; font-size: .68rem; font-weight: 700; background: #EEF0FB; color: var(--blue); border-radius: 10px; padding: 2px 8px; }
.item-form { display: grid; gap: 12px; }
.item-form > label, .item-form .two label, .ai-row label { display: grid; gap: 6px; font-weight: 600; font-size: .9rem; color: #2F3241; }
.item-form input[type=text], .item-form input[type=url], .item-form input[type=number], .item-form input[type=date], .item-form textarea, .item-form select, .ai-row input, .ai-row select { font: inherit; font-weight: 400; border: 1px solid #C9CCDA; border-radius: 8px; padding: 9px 12px; width: 100%; background: #fff; }
.item-form .remember.row { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.item-form .due { max-width: 240px; }
.ai-row { background: #F7F8FD; display: grid; gap: 10px; }
.ai-row .btn { justify-self: start; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.helper-row { display: flex; gap: 10px; flex-wrap: wrap; }
.fc-edit { display: grid; grid-template-columns: auto 1fr 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
#q-editor, #a-editor { display: grid; gap: 12px; }
.items-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 14px 46px; }
.items-row.student { display: grid; gap: 8px; }
.item-chip { display: inline-flex; align-items: center; gap: 8px; background: #F7F8FD; border: 1px solid #E4E6F1; border-radius: 10px; padding: 8px 12px; font: inherit; color: #2F3241; }
.item-chip b { color: #1D2026; }
.item-chip.open { cursor: pointer; width: 100%; text-align: left; }
.item-chip.open:hover { border-color: var(--blue); }
.item-chip.open .tag { margin-left: auto; }
.add-item { border: 1px dashed var(--red); }
.item-view { margin: 8px 0 4px; display: grid; gap: 12px; }
.file-open { display: flex; align-items: center; gap: 14px; border: 1px solid #ECEEF6; border-radius: 12px; padding: 12px 16px; }
.file-open > div { display: flex; flex-direction: column; flex: 1; }
.file-open .btn, .item-view .btn { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.form-box iframe { width: 100%; height: 640px; border: 1px solid #ECEEF6; border-radius: 12px; background: #fff; }
.video-box { position: relative; aspect-ratio: 16 / 9; }
.video-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 12px; }
.writing-prompt { background: #F1F3FD; border-radius: 12px; padding: 14px 16px; display: grid; gap: 6px; }
.writing-prompt b { color: var(--blue); }
.sc-box.tips { background: #FFF6E6; }
.sc-box.tips b { color: #6B4B00; }
.written { background: #FAFBFE; border: 1px solid #ECEEF6; border-radius: 10px; padding: 12px 14px; line-height: 1.6; white-space: normal; }
.fc { display: grid; gap: 12px; justify-items: center; }
.fc-card { width: min(520px, 100%); min-height: 200px; border: 0; border-radius: 18px; background: linear-gradient(135deg, var(--blue), #6A78C9); color: #fff; font: inherit; cursor: pointer; display: grid; place-content: center; gap: 10px; padding: 24px; text-align: center; box-shadow: 0 10px 30px rgba(62,75,148,.25); transition: transform .3s; }
.fc-card.back { background: linear-gradient(135deg, var(--red), #F6A49B); transform: rotateY(360deg); }
.fc-face { font-size: 1.4rem; font-weight: 700; line-height: 1.4; }
.fc-card .meta { color: rgba(255,255,255,.8); }
.fc-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
.item-dlg, .wide-dlg { margin: auto; inset: 0; }
.item-form .act-edit-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.item-form .act-edit-top select { width: auto; }
.item-form .act-edit-top input[type=number] { width: 72px; }
.item-form .act-edit-top input[type=text] { flex: 1; min-width: 180px; width: auto; }
.item-form .act-edit label { display: grid; gap: 6px; font-weight: 600; font-size: .9rem; }

/* objective chooser */
.op { display: grid; gap: 10px; }
.op-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.op label { display: grid; gap: 6px; font-weight: 600; font-size: .9rem; color: #2F3241; }
.op select, .op input { font: inherit; font-weight: 400; border: 1px solid #C9CCDA; border-radius: 8px; padding: 9px 12px; width: 100%; background: #fff; }
.op-box { background: #F1F3FD; border: 0; }
.item-form label.remember.row { display: flex !important; justify-content: flex-start; grid-template-columns: none; }
/* simpler new-course form */
.course-form-v2 { gap: 12px; }
#course-dialog { width: min(640px, 96vw); margin: auto; inset: 0; max-height: 92vh; }
.cf-step { display: flex; align-items: center; gap: 10px; margin-top: 6px; color: #1D2026; }
.cf-num { width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: .85rem; font-weight: 700; }
.cf-subjects { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cf-subjects button { border: 2px solid #E4E6F1; background: #fff; border-radius: 12px; padding: 10px 6px; font: inherit; font-weight: 700; color: #2F3241; cursor: pointer; display: grid; gap: 4px; justify-items: center; }
.cf-subjects button span { font-size: 1.3rem; }
.cf-subjects button:hover { border-color: var(--blue); }
.cf-subjects button.on { border-color: var(--blue); background: #EEF0FB; color: var(--blue); }
.cf-grades .chip { padding: 6px 12px; font-size: .85rem; }
.cf-more summary { cursor: pointer; color: var(--blue); font-weight: 700; }
.cf-more { display: grid; gap: 10px; }
.cf-more[open] { padding-bottom: 4px; }
.cf-more label { margin-top: 10px; }
.cf-card { display: flex; align-items: center; gap: 12px; border: 1px dashed #C9CCDA; border-radius: 12px; padding: 10px 12px; }
.cf-card > div:not(.cf-art) { display: flex; flex-direction: column; flex: 1; }
.cf-card b { color: #1D2026; }
.cf-art { width: 46px; height: 46px; border-radius: 12px; color: #fff; display: grid; place-items: center; font-weight: 800; }
@media (max-width: 520px) { .cf-subjects { grid-template-columns: repeat(3, 1fr); } }
/* ===== Community, more colourful ===== */
.comm-hero { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; background: linear-gradient(120deg, #3E4B94 0%, #6A78C9 55%, #F27A6F 120%); color: #fff; border-radius: 22px; padding: 26px 28px; position: relative; overflow: hidden; margin-bottom: 14px; }
.comm-hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.12); }
.comm-hero h1 { font-size: 2rem; color: #fff; }
.comm-hero p { opacity: .9; margin-top: 4px; }
.comm-hero .meta { color: rgba(255,255,255,.85); font-size: .95rem; }
.hero-rw { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.16); border-radius: 16px; padding: 10px 16px; position: relative; z-index: 1; }
.hero-rw .rw-ic { font-size: 2rem; }
.hero-rw div { display: flex; flex-direction: column; }
.comm-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.comm-tabs button { border: 0; background: #fff; border-radius: 30px; padding: 10px 18px; font: inherit; font-weight: 700; color: #2F3241; cursor: pointer; box-shadow: 0 2px 8px rgba(62,75,148,.08); }
.comm-tabs button[aria-selected=true] { background: var(--blue); color: #fff; }
.post-types { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.post-types label { cursor: pointer; }
.post-types input { position: absolute; opacity: 0; }
.post-types span { display: inline-block; border: 1px solid #E4E6F1; border-radius: 20px; padding: 6px 12px; font-size: .85rem; font-weight: 600; }
.post-types input:checked + span { background: #EEF0FB; border-color: var(--blue); color: var(--blue); }
.post-types input:focus-visible + span { outline: 2px solid var(--blue); }
.feed-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.feed-filter .chip { padding: 6px 12px; font-size: .85rem; }
.pt-badge { display: inline-block; font-size: .78rem; font-weight: 700; border-radius: 20px; padding: 3px 10px; margin-bottom: 8px; background: #EEF0FB; color: var(--blue); }
.post.pt-question { border-left: 5px solid #3E8EDE; }
.post.pt-idea { border-left: 5px solid #E3A43B; }
.post.pt-idea .pt-badge { background: #FFF3DC; color: #8A5A00; }
.post.pt-celebrate { border-left: 5px solid #F27A6F; background: linear-gradient(180deg, #FFF7F6, #fff 60%); }
.post.pt-celebrate .pt-badge { background: #FFE6E3; color: #B23A2F; }
.post.pt-showcase { border-left: 5px solid #2FA08A; }
.post.pt-showcase .pt-badge { background: #E2F5F0; color: #1B6B5B; }
.side-card { margin-bottom: 18px; display: grid; gap: 8px; }
.side-card h3 { color: #1D2026; font-size: 1rem; }
.side-group { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; color: #2F3241; }
.side-group:hover { background: #F5F6FB; }
.side-group > span:last-child { display: flex; flex-direction: column; }
.g-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--blue); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .8rem; flex: none; }
.g-ic.cls, .group-ic.cls { background: #2FA08A; }
.g-ic.big { width: 54px; height: 54px; font-size: 1rem; }
.group-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 18px; }
.group-tile { display: grid; gap: 6px; color: #2F3241; transition: transform .15s; }
.group-tile:hover { transform: translateY(-2px); }
.group-tile b { color: #1D2026; }
.tile-go { color: var(--blue); font-weight: 700; font-size: .9rem; }
a.gp-post { display: block; color: inherit; }
.class-flag { background: #E2F5F0; color: #1B6B5B; border-radius: 20px; padding: 4px 12px; font-weight: 700; font-size: .85rem; }
.class-card { border-top: 4px solid #2FA08A; }
.head-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.class-studs { display: grid; gap: 4px; max-height: 240px; overflow-y: auto; border: 1px solid #ECEEF6; border-radius: 10px; padding: 10px; }
.class-studs .remember { display: flex; align-items: center; gap: 8px; }
/* ===== Rewards ===== */
.rw-mini { display: grid; gap: 8px; }
.rw-level { display: flex; align-items: center; gap: 10px; }
.rw-level div { display: flex; flex-direction: column; }
.rw-level b { color: #1D2026; }
.rw-ic { font-size: 2rem; }
.rw-bar { height: 10px; border-radius: 6px; background: #EEF0F8; overflow: hidden; }
.rw-bar i { display: block; height: 100%; background: linear-gradient(90deg, #F27A6F, #E3A43B); border-radius: 6px; }
.rw-bar.big { height: 14px; margin: 10px 0 6px; background: rgba(255,255,255,.25); }
.rw-badges-mini { display: flex; gap: 6px; font-size: 1.4rem; }
.rw-link { color: var(--blue); font-weight: 700; font-size: .9rem; }
.rw-card h2 { font-size: 1.1rem; color: #1D2026; margin-bottom: 8px; }
.rw-hero { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; background: linear-gradient(120deg, #3E4B94, #6A78C9); color: #fff; border-radius: 22px; padding: 26px; }
.rw-hero h2 { color: #fff; font-size: 1.8rem; }
.rw-hero .meta { color: rgba(255,255,255,.8); }
.rw-hero-ic { font-size: 4.5rem; line-height: 1; }
.rw-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.rw-stats div { background: rgba(255,255,255,.15); border-radius: 14px; padding: 10px 14px; display: grid; text-align: center; }
.rw-stats b { font-size: 1.3rem; }
.rw-stats span { font-size: .8rem; opacity: .9; }
.rw-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.rw-badges.small { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); margin-top: 8px; }
.rw-badge { background: #fff; border-radius: 16px; padding: 14px; text-align: center; display: grid; gap: 4px; justify-items: center; opacity: .55; border: 2px dashed #E4E6F1; }
.rw-badge.on { opacity: 1; border: 2px solid #F6C84C; background: linear-gradient(180deg, #FFFBEA, #fff); }
.rw-badge > span:first-child { font-size: 2.2rem; }
.rw-badge b { color: #1D2026; font-size: .95rem; }
.rw-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.rw-cols h3 { color: #1D2026; margin-bottom: 10px; }
.rw-how, .rw-recent { display: grid; gap: 8px; }
.rw-how li, .rw-recent li { display: flex; gap: 10px; align-items: baseline; }
.rw-how b, .rw-recent b { color: #2FA08A; min-width: 34px; }
.rw-recent li span:nth-child(2) { flex: 1; }
.rw-boards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.rw-board { background: #fff; border-radius: 16px; padding: 14px 16px; }
.rw-board h4 { color: #1D2026; margin-bottom: 8px; }
.rw-board ol { display: grid; gap: 4px; }
.rw-board li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; }
.rw-board li span:nth-child(2) { flex: 1; }
.rw-board li.me { background: #FFF6E6; font-weight: 700; }
.rw-pos { width: 22px; text-align: center; color: #6E7485; font-weight: 700; }
#class-board .rw-board { border: 1px solid #ECEEF6; margin-bottom: 14px; }
.star-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.star-pick input { position: absolute; opacity: 0; }
.star-pick span { display: inline-block; border: 1px solid #E4E6F1; border-radius: 20px; padding: 6px 10px; cursor: pointer; }
.star-pick input:checked + span { background: #FFF6E6; border-color: #E3A43B; }
@media (max-width: 800px) { .rw-hero { grid-template-columns: 1fr; text-align: center; } .rw-cols { grid-template-columns: 1fr; } }
.class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.class-tile { display: grid; gap: 12px; border-top: 5px solid #2FA08A; }
.class-top { display: flex; gap: 12px; align-items: center; color: #2F3241; }
.class-top > div { display: flex; flex-direction: column; }
.class-top b { color: #1D2026; font-size: 1.1rem; }
.class-links { display: flex; flex-wrap: wrap; gap: 6px; }
.class-links .pill { text-decoration: none; }
.class-tile .rw-board { padding: 0; }
/* ===== Attendance ===== */
.att { display: grid; gap: 14px; }
.att-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.att-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.att-top label { display: grid; gap: 6px; font-weight: 600; font-size: .9rem; color: #2F3241; }
.att-top input, .att-top select { font: inherit; border: 1px solid #C9CCDA; border-radius: 8px; padding: 9px 12px; background: #fff; }
.att-list { display: grid; gap: 8px; }
.att-row { display: grid; grid-template-columns: auto minmax(140px, 1fr) auto minmax(140px, 220px); gap: 12px; align-items: center; background: #fff; border: 1px solid #ECEEF6; border-left: 5px solid #ECEEF6; border-radius: 12px; padding: 10px 14px; }
.att-row.st-present { border-left-color: #2FA84F; } .att-row.st-late { border-left-color: #E3A43B; } .att-row.st-absent { border-left-color: #E5484D; } .att-row.st-excused { border-left-color: #6A78C9; }
.att-name { display: flex; flex-direction: column; } .att-name b { color: #1D2026; }
.att-btns { display: flex; gap: 6px; }
.att-b { border: 1px solid #E4E6F1; background: #fff; border-radius: 10px; padding: 6px 10px; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; display: flex; gap: 4px; align-items: center; color: #2F3241; }
.att-b:hover { border-color: var(--blue); }
.att-b.on.present { background: #EAF7EE; border-color: #2FA84F; color: #1E7A2B; }
.att-b.on.late { background: #FFF6E6; border-color: #E3A43B; color: #8A5A00; }
.att-b.on.absent { background: #FDECEC; border-color: #E5484D; color: #B3261E; }
.att-b.on.excused { background: #EEF0FB; border-color: #6A78C9; color: #3E4B94; }
.att-note { font: inherit; border: 1px solid #E4E6F1; border-radius: 8px; padding: 7px 10px; width: 100%; }
.att-save { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: sticky; bottom: 0; background: #F5F6FB; padding: 10px 0; }
.att-save .btn { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.att-table-wrap { overflow-x: auto; }
.att-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; }
.att-table th, .att-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #EEF0F8; }
.att-table th { background: #F7F8FD; font-size: .85rem; }
.att-pct { display: inline-block; font-weight: 800; border-radius: 20px; padding: 3px 10px; background: #EEF0F8; }
.att-pct.good { background: #EAF7EE; color: #1E7A2B; } .att-pct.ok { background: #FFF6E6; color: #8A5A00; } .att-pct.low { background: #FDECEC; color: #B3261E; }
.att-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.att-day { text-align: left; font: inherit; cursor: pointer; display: grid; gap: 4px; border: 1px solid #ECEEF6; }
.att-day:hover { border-color: var(--blue); }
.att-day b { color: #1D2026; }
.checkin { display: flex; align-items: center; gap: 14px; background: #FFF4F3; border: 2px solid var(--red); border-radius: 14px; padding: 12px 16px; margin: 12px 0; }
.checkin.done { background: #EAF7EE; border-color: #2FA84F; }
.checkin > span { font-size: 1.6rem; }
.checkin > div { display: flex; flex-direction: column; flex: 1; }
.checkin .btn { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.att-me { display: flex; align-items: center; gap: 10px; margin: 8px 0 14px; color: #2F3241; }
.att-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.att-card { border: 1px solid #ECEEF6; border-radius: 12px; padding: 12px; display: grid; gap: 4px; background: #fff; }
.att-card b { color: #1D2026; }
.att-card .att-pct { justify-self: start; font-size: 1.1rem; }
.att-recent-h { margin-top: 12px; } .att-recent { display: grid; gap: 4px; margin-top: 4px; }
.att-h { font-size: 1.1rem; color: #1D2026; margin-bottom: 8px; }
#my-att-box { margin-top: 16px; }
@media (max-width: 900px) { .att-row { grid-template-columns: auto 1fr; } .att-btns, .att-note { grid-column: 1 / -1; } .att-b span { display: none; } }
.hub-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.hub-head b { color: #1D2026; }
.hub-list { display: grid; gap: 8px; }
.hub-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; border: 1px solid #ECEEF6; border-left: 5px solid #E3A43B; border-radius: 12px; padding: 10px 14px; background: #fff; }
.hub-row.done { border-left-color: #2FA84F; }
.hub-row > div { display: flex; flex-direction: column; }
.hub-row b { color: #1D2026; }
.hub-ic { font-size: 1.4rem; }
.hub-status { font-size: .85rem; color: #2F3241; }
.hub-row .btn { border: 0; cursor: pointer; font: inherit; font-weight: 700; padding: 9px 16px; }
.hub-row .btn.outline { border: 1px solid var(--red); }
@media (max-width: 760px) { .hub-row { grid-template-columns: auto 1fr; } .hub-status, .hub-row .btn { grid-column: 1 / -1; } }
.hub-row b { font-size: 1rem; } .hub-row .btn { font-size: .9rem; }
/* ===== Sidebar with sections and drop-downs ===== */
.side nav.nav2 { display: grid; gap: 4px; padding: 10px 14px 24px; }
.nav2-top { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; color: rgba(255,255,255,.88); font: inherit; font-weight: 600; font-size: .98rem; padding: 11px 14px; border-radius: 12px; cursor: pointer; text-align: left; text-decoration: none; }
.nav2-top:hover, .nav2-top:focus-visible { background: rgba(255,255,255,.08); color: #fff; }
.nav2-top.active, .nav2-sec.has-active > .nav2-toggle { background: rgba(255,255,255,.12); color: #fff; }
.nav2-ic { width: 24px; text-align: center; font-size: 1.1rem; }
.nav2-arrow { margin-left: auto; transition: transform .2s; font-size: .85rem; opacity: .8; }
.nav2-toggle[aria-expanded=true] .nav2-arrow { transform: rotate(180deg); }
.nav2-sub { list-style: none; margin: 2px 0 6px; padding: 0 0 0 36px; display: grid; gap: 2px; border-left: 2px solid rgba(255,255,255,.12); margin-left: 26px; }
.nav2-sub[hidden] { display: none; }
.nav2-sub a { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.75); padding: 8px 12px; border-radius: 10px; font-size: .92rem; text-decoration: none; }
.nav2-sub a:hover, .nav2-sub a:focus-visible { background: rgba(255,255,255,.08); color: #fff; }
.nav2-sub a.active { background: var(--red); color: #fff; font-weight: 700; }
.nav2-sub .nav-dot { margin-left: auto; }
.side nav.nav2 a.nav2-top { padding: 11px 14px; border-left: 0; font-size: .98rem; font-weight: 600; }
.side nav.nav2 a.nav2-top.active { background: rgba(255,255,255,.12); }
.side nav.nav2 .nav2-sub a { padding: 8px 12px; border-left: 0; font-size: .92rem; font-weight: 500; gap: 8px; }
.side nav.nav2 .nav2-sub a.active { background: var(--red); font-weight: 700; }
.side nav.nav2 .nav2-sub { padding-left: 10px; }
.side nav.nav2 .nav2-arrow { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.14); display: grid; place-items: center; opacity: 1; transition: transform .2s, background .2s; }
.side nav.nav2 .nav2-arrow svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2.6; fill: none; }
.side nav.nav2 .nav2-toggle:hover .nav2-arrow { background: rgba(255,255,255,.25); }
.side nav.nav2 .nav2-toggle[aria-expanded=true] .nav2-arrow { transform: rotate(180deg); background: var(--red); }
/* ===== Revision Hub ===== */
.rv-filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rv-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.rv-board { background: #F7F8FD; border-radius: 12px; padding: 12px 14px; }
.rv-board b { color: #1D2026; }
.rv-board p { margin-top: 4px; font-size: .92rem; line-height: 1.55; }
.rv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.rv-card { border: 0; border-top: 5px solid var(--c); background: #fff; border-radius: 14px; padding: 16px; font: inherit; cursor: pointer; display: grid; gap: 6px; justify-items: start; text-align: left; box-shadow: 0 4px 14px rgba(62,75,148,.07); transition: transform .15s; }
.rv-card:hover { transform: translateY(-2px); }
.rv-card.on { outline: 3px solid var(--c); }
.rv-card b { color: #1D2026; }
.rv-ic { font-size: 1.8rem; }
.rv-detail { display: grid; gap: 14px; }
.rv-dh { display: flex; gap: 14px; align-items: flex-start; border-left: 6px solid var(--c); padding-left: 14px; }
.rv-dh h2 { color: #1D2026; }
.rv-dh p { margin-top: 4px; color: #2F3241; }
.rv-dh .link-btn { margin-left: auto; }
.rv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rv-cols h3, .rv-detail > h3 { color: #1D2026; font-size: 1.05rem; margin-bottom: 8px; }
.rv-cols ul { list-style: disc; padding-left: 20px; display: grid; gap: 5px; line-height: 1.5; margin-bottom: 12px; }
.rv-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.rv-link { border: 1px solid #ECEEF6; border-radius: 12px; padding: 12px 14px; display: grid; gap: 4px; color: #2F3241; background: #FAFBFE; }
.rv-link:hover { border-color: var(--blue); }
.rv-link b { color: var(--blue); }
@media (max-width: 760px) { .rv-cols { grid-template-columns: 1fr; } }
/* ===== Founders page ===== */
.fd-main .cur-wrap { gap: 28px; }
.fd-hero { text-align: center; display: grid; gap: 12px; justify-items: center; }
.fd-story { max-width: 760px; font-size: 1.08rem; line-height: 1.7; color: #2F3241; }
.fd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.fd-card { background: #fff; border-radius: 22px; padding: 28px 24px; text-align: center; display: grid; gap: 8px; justify-items: center; box-shadow: 0 10px 30px rgba(62,75,148,.08); border-top: 6px solid var(--c); }
.fd-photo { width: 140px; height: 140px; border-radius: 50%; overflow: hidden; border: 5px solid #fff; box-shadow: 0 6px 18px rgba(0,0,0,.12); margin-bottom: 6px; }
.fd-photo.sm { width: 80px; height: 80px; border-width: 3px; margin: 0; }
.fd-photo img { width: 100%; height: 100%; object-fit: cover; }
.fd-ini { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; font-size: 2.4rem; font-weight: 800; }
.fd-photo.sm .fd-ini { font-size: 1.4rem; }
.fd-card h3 { color: #1D2026; font-size: 1.3rem; }
.fd-role { color: var(--c); font-weight: 700; font-size: .95rem; }
.fd-card p { color: #2F3241; line-height: 1.65; text-align: left; }
.fd-link { color: var(--blue); font-weight: 700; text-decoration: underline; }
.fd-cta { background: linear-gradient(120deg, #3E4B94, #6A78C9); color: #fff; border-radius: 22px; padding: 30px; text-align: center; display: grid; gap: 10px; justify-items: center; }
.fd-cta h2 { color: #fff; }
.fd-form { display: grid; gap: 16px; }
.fd-edit { display: grid; gap: 12px; border: 1px solid #ECEEF6; }
.fd-edit legend { font-weight: 800; color: var(--blue); padding: 0 6px; }
.fd-edit label { display: grid; gap: 6px; font-weight: 600; font-size: .9rem; }
.fd-edit input, .fd-edit textarea { font: inherit; font-weight: 400; border: 1px solid #C9CCDA; border-radius: 8px; padding: 9px 12px; width: 100%; }
.fd-edit-top { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.fd-photo-btns { display: grid; gap: 6px; justify-items: start; }
.fd-photo-btns .pill { cursor: pointer; }
.fd-save { position: sticky; bottom: 0; background: #F5F6FB; padding: 10px 0; }
.cf-aud .chip { padding: 8px 14px; }
.cf-hubtopics { display: flex; flex-wrap: wrap; gap: 8px; } .cf-hubtopics .chip { padding: 7px 12px; font-size: .88rem; } .cf-hub[hidden], .cf-school[hidden] { display: none; }
.hubreq-done { margin-top: 10px; } .hubreq-done summary { cursor: pointer; font-weight: 700; color: var(--blue); }

/* ===== Founders: neat, aligned cards (founders page + home page) ===== */
.fd-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 340px)) !important; justify-content: center; align-items: stretch; gap: 26px; }
.fd-grid.count-1 { grid-template-columns: minmax(280px, 420px) !important; }
.fd-card { display: flex !important; flex-direction: column; align-items: center; text-align: center; height: 100%; padding: 30px 26px 28px !important; gap: 6px !important; }
.fd-photo { width: 150px !important; height: 150px !important; flex: none; margin-bottom: 10px !important; }
.fd-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.fd-card h3 { min-height: 1.4em; margin: 0; }
.fd-role { display: block; min-height: 2.6em; line-height: 1.3; }
.fd-line { width: 48px; height: 3px; border-radius: 3px; background: var(--c); opacity: .5; margin: 6px 0 10px; }
.fd-card p.fd-bio { text-align: left; line-height: 1.65; margin: 0; width: 100%; }
.fd-link { margin-top: auto; padding-top: 14px; }
@media (max-width: 640px) { .fd-grid { grid-template-columns: minmax(0, 420px) !important; } }

.pending-card { text-align: center; } .pend-ic { font-size: 3.4rem; } .pend-steps { list-style: none; padding: 0; display: grid; gap: 8px; margin: 14px auto; max-width: 320px; text-align: left; font-weight: 600; } .pending-card .link-btn { margin-top: 12px; display: inline-block; }
.pending-card { max-width: 560px; margin: 0 auto; display: grid; justify-items: center; gap: 6px; } .pending-card .auth-btn { width: 100%; max-width: 320px; } .pending-card .link-btn { margin-top: 6px; }
.dual-role { margin-bottom: 18px; display: grid; gap: 10px; } .dual-role h2 { color: #1D2026; font-size: 1.15rem; } .switch-row { display: flex; align-items: center; gap: 10px; font-weight: 600; } .switch-row input { width: 22px; height: 22px; accent-color: #3E4B94; }
.dual-role .switch-row { display: flex !important; flex-direction: row !important; justify-content: flex-start !important; align-items: center; gap: 10px; text-align: left; } .dual-role .meta { font-size: .92rem; }
.also-parent-box { display: flex !important; gap: 10px; align-items: flex-start; background: #F7F8FD; border: 1px solid #E4E6F1; border-radius: 12px; padding: 12px 14px; font-weight: 400; line-height: 1.5; text-align: left; } .also-parent-box input { margin-top: 3px; width: 18px; height: 18px; accent-color: #3E4B94; flex: none; }
/* "Are you also a parent?" on teacher sign-up */
.parent-q { border: 2px solid #3E4B94; border-radius: 16px; padding: 14px 16px 16px; margin: 6px 0; background: #F4F5FD; display: grid; gap: 8px; }
.parent-q legend { font-weight: 800; color: #1D2026; padding: 0 6px; font-size: 1.02rem; }
.parent-q .meta { margin: 0; }
.parent-q-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.parent-q-btns label { display: block !important; margin: 0; cursor: pointer; }
.parent-q-btns input { position: absolute; opacity: 0; }
.parent-q-btns span { display: block; text-align: center; border: 2px solid #C9CCDA; background: #fff; border-radius: 12px; padding: 12px 10px; font-weight: 700; color: #2F3241; transition: border-color .15s, background .15s; }
.parent-q-btns label:hover span { border-color: #3E4B94; }
.parent-q-btns input:checked + span { border-color: #3E4B94; background: #3E4B94; color: #fff; }
.parent-q-btns input:focus-visible + span { outline: 3px solid #F27A6F; outline-offset: 2px; }
.side nav.nav2 .nav2-switch { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: #F27A6F; color: #fff; font-weight: 800; font-size: .92rem; border-left: 0; text-align: center; }
.side nav.nav2 .nav2-switch:hover { background: #F5938A; }
.also-parent-hint { margin-bottom: 12px; text-align: left; }
/* ===== Family: children on parent sign-up ===== */
.fam-section { display: grid; gap: 12px; border-top: 1px solid #ECEEF6; padding-top: 16px; margin-top: 4px; }
.fam-h { font-size: 1.15rem; color: #1D2026; }
.fam-q { font-weight: 700; color: #2F3241; margin: 0; }
.fam-count { display: flex; gap: 8px; }
.fam-count button { width: 52px; height: 52px; border-radius: 14px; border: 2px solid #C9CCDA; background: #fff; font: inherit; font-weight: 800; font-size: 1.2rem; cursor: pointer; color: #2F3241; }
.fam-count button:hover { border-color: #3E4B94; }
.fam-count button[aria-pressed=true] { background: #3E4B94; border-color: #3E4B94; color: #fff; }
.fam-child { border: 1px solid #E4E6F1; border-radius: 14px; padding: 12px 14px 14px; display: grid; gap: 10px; background: #FAFBFE; }
.fam-child legend { font-weight: 800; color: #3E4B94; padding: 0 6px; }
.fam-has { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: .92rem; font-weight: 600; }
.fam-has label { display: inline-flex !important; align-items: center; gap: 6px; flex-direction: row !important; font-weight: 600; }
.fam-joined span { font-size: .9rem; }
.fam-wait { display: grid; gap: 10px; margin-bottom: 14px; }
.fam-card { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.fam-card > div:nth-child(2) { display: flex; flex-direction: column; }
.fam-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fam-add { margin-bottom: 20px; }
.fam-add summary { cursor: pointer; font-weight: 800; color: var(--blue); }
.fam-add .auth-form { margin-top: 12px; }
#fam-box { margin: 16px 0 6px; }
/* under-13 message on student sign-up */
.age-stop { background: #FFF6E6; border: 2px solid #F6C431; border-radius: 16px; padding: 18px; display: grid; gap: 10px; justify-items: center; text-align: center; }
.age-stop .age-ic { font-size: 2.4rem; }
.age-stop b { color: #1D2026; font-size: 1.05rem; }
.age-stop p { margin: 0; color: #4A4E5E; line-height: 1.55; }
.age-stop .btn { text-decoration: none; }
.msg-card { display: grid; gap: 6px; } .msg-card header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .msg-card header .meta { margin-left: auto; } .msg-body { white-space: pre-wrap; line-height: 1.6; background: #F7F8FD; border-radius: 10px; padding: 10px 12px; margin: 4px 0; } .msg-card.done { opacity: .7; }
/* ===================== CAFÉ THEME ===================== */
body.cafe-theme .dash { background: radial-gradient(circle at 90% 0, #FFF1DE 0 220px, transparent 221px), #FFF9F1; }
body.cafe-theme .comm-hero { background: linear-gradient(120deg, #5B3A29 0%, #8B5A3C 45%, #D08C5B 100%); }
body.cafe-theme .comm-hero::after { background: rgba(255,236,210,.14); }
body.cafe-theme .comm-hero::before { content: "☕"; position: absolute; right: 34px; bottom: 10px; font-size: 5.5rem; opacity: .22; transform: rotate(-12deg); }
body.cafe-theme .comm-hero h1 { font-size: 2.3rem; }
body.cafe-theme .comm-rules { background: #FFF1DE; border: 1px dashed #D9A877; color: #5B3A29; }
body.cafe-theme .composer { border: 2px solid #F1DCC4; }
body.cafe-theme .post-types input:checked + span { background: #FFF1DE; border-color: #8B5A3C; color: #5B3A29; }
body.cafe-theme .feed-filter .chip.on { background: #8B5A3C; border-color: #8B5A3C; color: #fff; }
body.cafe-theme #post-btn { background: #8B5A3C; }
body.cafe-theme .post { border-radius: 20px; }
.cafe-types { gap: 6px; }
.cafe-tool { display: grid; gap: 8px; background: #FFF9F1; border: 1px solid #F1DCC4; border-radius: 14px; padding: 12px; margin-top: 10px; }
.cafe-tool b { color: #5B3A29; }
.cafe-tool input, .cafe-tool select { font: inherit; border: 1px solid #E2CDB6; border-radius: 10px; padding: 9px 12px; background: #fff; }
/* post badges for new types */
.post.pt-hack { border-left: 5px solid #E3A43B; } .post.pt-hack .pt-badge { background: #FFF3DC; color: #8A5A00; }
.post.pt-resource { border-left: 5px solid #2FA08A; } .post.pt-resource .pt-badge { background: #E2F5F0; color: #1B6B5B; }
.post.pt-help { border-left: 5px solid #E5484D; } .post.pt-help .pt-badge { background: #FDECEC; color: #B3261E; }
.post.pt-funny { border-left: 5px solid #8A5CF6; } .post.pt-funny .pt-badge { background: #F1ECFF; color: #5B36B5; }
.post.pt-shoutout { border-left: 5px solid #F27A6F; background: linear-gradient(180deg, #FFF4F2, #fff 60%); } .post.pt-shoutout .pt-badge { background: #FFE6E3; color: #B23A2F; }
.post.pt-poll { border-left: 5px solid #3E8EDE; } .post.pt-poll .pt-badge { background: #E7F1FC; color: #1F5F9E; }
.shout { display: inline-block; background: #FFE6E3; color: #8A2A22; border-radius: 30px; padding: 6px 14px; font-size: .92rem; margin: 6px 0; }
/* reactions */
.reacts { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.react { border: 1px solid #EEE3D6; background: #FFFBF6; border-radius: 30px; padding: 5px 11px; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-size: 1.05rem; transition: transform .15s, background .15s; }
.react b { font-size: .82rem; color: #5B3A29; }
.react:hover { transform: translateY(-1px); background: #FFF1DE; }
.react.on { background: #FFE9CC; border-color: #D9A877; }
.react.pop { animation: react-pop .4s ease; }
@keyframes react-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
/* polls */
.poll { display: grid; gap: 8px; margin: 10px 0; }
.poll-opt { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 2px solid #E4E6F1; background: #fff; border-radius: 12px; padding: 10px 14px; font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.poll-opt:hover { border-color: #3E8EDE; }
.poll-opt.on { border-color: #3E8EDE; }
.poll-bar { position: absolute; left: 0; top: 0; bottom: 0; background: #E7F1FC; transition: width .5s ease; z-index: 0; }
.poll-txt, .poll-opt b { position: relative; z-index: 1; }
.poll-opt b { color: #1F5F9E; }
/* Daily Brew */
.brew { background: linear-gradient(160deg, #FFF1DE, #FFE2C2); border: 0; }
.brew h3 { color: #5B3A29; }
.brew-q { font-size: 1.05rem; font-weight: 700; color: #3E2A1E; line-height: 1.5; margin: 4px 0 8px; }
.brew .btn { justify-self: start; background: #8B5A3C; border: 0; cursor: pointer; font: inherit; font-weight: 700; padding: 9px 16px; }
@media (prefers-reduced-motion: reduce) { .react.pop { animation: none; } .poll-bar { transition: none; } }
/* ===== Coffee, Chats & Connections ===== */
#cx-page { display: grid; gap: 18px; }
.cx-hero { display: flex; gap: 18px; align-items: center; background: linear-gradient(120deg, #5B3A29 0%, #8B5A3C 45%, #D08C5B 100%); color: #fff; border-radius: 24px; padding: 26px 28px; }
.cx-hero h1 { color: #fff; font-size: 2rem; }
.cx-hero p { opacity: .92; margin-top: 4px; max-width: 640px; }
.cx-cup { font-size: 3.6rem; background: rgba(255,255,255,.16); border-radius: 24px; width: 96px; height: 96px; display: grid; place-items: center; flex: none; }
.cx-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.cx-tabs button { border: 0; background: #fff; border-radius: 30px; padding: 11px 20px; font: inherit; font-weight: 800; cursor: pointer; color: #5B3A29; box-shadow: 0 2px 8px rgba(91,58,41,.08); }
.cx-tabs button[aria-selected=true] { background: #8B5A3C; color: #fff; }
#cx-body { display: grid; gap: 16px; }
.cx-roulette { text-align: center; display: grid; gap: 12px; justify-items: center; background: linear-gradient(180deg, #FFF6EA, #fff); border: 2px solid #F1DCC4; padding: 30px 24px; }
.cx-roulette h2 { color: #3E2A1E; }
.cx-roulette p { max-width: 520px; color: #4A4E5E; line-height: 1.6; }
.cx-cups { font-size: 2.6rem; display: flex; gap: 10px; align-items: center; }
.cx-plus { font-size: 1.4rem; color: #8B5A3C; font-weight: 800; }
.cx-roulette .btn, .cx-me .btn, .cx-head .btn, .cx-meet .btn, .cx-hi { background: #8B5A3C; border: 0; cursor: pointer; font: inherit; font-weight: 800; }
.cx-match { display: flex; gap: 14px; align-items: center; background: #fff; border-radius: 18px; padding: 14px 20px; box-shadow: 0 6px 18px rgba(91,58,41,.1); text-align: left; }
.cx-match div { display: flex; flex-direction: column; }
.initials.big { width: 56px; height: 56px; font-size: 1.2rem; }
.initials.sm { width: 28px; height: 28px; font-size: .7rem; margin-right: -6px; border: 2px solid #fff; }
.cx-opt { justify-content: center; font-size: .92rem; }
.cx-me { display: grid; gap: 10px; max-width: 640px; }
.cx-me label { display: grid; gap: 6px; font-weight: 600; font-size: .9rem; }
.cx-me input, .cx-search { font: inherit; border: 1px solid #E2CDB6; border-radius: 10px; padding: 10px 12px; }
.cx-me .btn { justify-self: start; }
.cx-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cx-head h2 { color: #1D2026; }
.cx-form { border: 2px solid #F1DCC4; }
.cx-meetups { display: grid; gap: 12px; }
.cx-meet { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; }
.cx-date { width: 64px; height: 70px; border-radius: 16px; background: #FFF1DE; color: #5B3A29; display: grid; place-items: center; align-content: center; }
.cx-date b { font-size: 1.6rem; line-height: 1; }
.cx-date span { font-size: .8rem; font-weight: 800; text-transform: uppercase; }
.cx-meet-info { display: grid; gap: 4px; }
.cx-meet-info h3 { color: #1D2026; }
.cx-going { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.cx-going .meta { margin-left: 12px; }
.cx-meet-btns { display: grid; gap: 6px; justify-items: end; }
.cx-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.cx-person { display: grid; gap: 6px; justify-items: center; text-align: center; }
.cx-person b { color: #1D2026; }
.cx-tag { font-size: .85rem; border-radius: 12px; padding: 6px 10px; margin: 0; width: 100%; }
.cx-tag.help { background: #E2F5F0; color: #1B6B5B; }
.cx-tag.learn { background: #FFF3DC; color: #8A5A00; }
.cx-hi { margin-top: 6px; padding: 9px 18px; text-decoration: none; }
.cx-promo { display: grid; gap: 4px; background: #fff; border: 2px dashed #D9A877; color: #5B3A29; }
.cx-promo span { font-size: .88rem; }
@media (max-width: 700px) { .cx-meet { grid-template-columns: auto 1fr; } .cx-meet-btns { grid-column: 1 / -1; justify-items: start; } .cx-hero { flex-direction: column; align-items: flex-start; } }
/* professional-only safeguards */
.cx-code { display: grid; gap: 12px; max-width: 760px; border: 2px solid #F1DCC4; }
.cx-code h2 { color: #3E2A1E; }
.cx-code ul { list-style: none; padding: 0; display: grid; gap: 8px; line-height: 1.55; }
.cx-code .btn { justify-self: start; background: #8B5A3C; border: 0; cursor: pointer; font: inherit; font-weight: 800; }
.cx-code .btn:disabled { opacity: .5; cursor: not-allowed; }
.cx-note { font-size: .88rem; color: #5B3A29; background: #FFF6EA; border-radius: 12px; padding: 8px 12px; margin: 0; }
.cx-note a { color: #8B5A3C; font-weight: 700; text-decoration: underline; }
.cx-contact { display: grid; gap: 6px; justify-items: center; margin-top: 6px; }
.cx-contact .link-btn { font-size: .85rem; }
.chat-pro { background: #FFF6EA; color: #5B3A29; border-radius: 12px; padding: 8px 12px; font-size: .85rem; line-height: 1.5; margin: 8px 12px 0; }
.cx-switches { display: grid; gap: 10px; margin-bottom: 14px; }
.cx-adm-h { color: #1D2026; font-size: 1rem; margin: 6px 0; }
.email-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; } .email-list { display: grid; gap: 4px; max-height: 340px; overflow-y: auto; }
/* ===== Privacy notice & Terms of use ===== */
.legal-page { background: #F5F6FB; }
.legal-wrap { padding: 30px 16px 60px; }
.legal { max-width: 820px; margin: 0 auto; background: #fff; border-radius: 22px; padding: 36px 40px; box-shadow: 0 10px 30px rgba(30,35,82,.06); line-height: 1.7; color: #2F3241; }
.legal h1 { color: #3E4B94; font-size: 2.2rem; }
.legal h2 { color: #1D2026; font-size: 1.25rem; margin: 28px 0 8px; scroll-margin-top: 20px; }
.legal ul { padding-left: 20px; display: grid; gap: 6px; list-style: disc; }
.legal p { margin: 8px 0; }
.legal a { color: #3E4B94; text-decoration: underline; }
.legal-meta { color: #6E7485; font-size: .9rem; }
.legal-lead { font-size: 1.08rem; background: #F7F8FD; border-radius: 14px; padding: 14px 18px; }
.legal-toc { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 16px 0 6px; font-size: .92rem; }
.legal-toc b { width: 100%; color: #1D2026; }
.legal-links { margin-top: 24px; font-weight: 700; }
@media (max-width: 600px) { .legal { padding: 24px 18px; } .legal h1 { font-size: 1.7rem; } }
.agree-box { display: flex !important; gap: 10px; align-items: flex-start; text-align: left; font-weight: 400; line-height: 1.5; margin: 6px 0; }
.agree-box input { margin-top: 3px; width: 18px; height: 18px; accent-color: #3E4B94; flex: none; }
.agree-box a { color: #3E4B94; text-decoration: underline; font-weight: 700; }
.delete-req { margin-top: 22px; border: 1px solid #F6D3D3; }
.danger-btn { border-color: #E5484D !important; color: #B3261E !important; }
.captcha-box { min-height: 66px; margin: 6px 0 4px; display: flex; justify-content: center; }
/* ===== Admin dashboard ===== */
.admin-dash .stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 18px; }
.stat-wait { background: linear-gradient(135deg, #F27A6F, #F6A49B) !important; color: #fff; }
.stat-wait b, .stat-wait span { color: #fff !important; }
.adm-tabs { display: flex; gap: 8px; flex-wrap: wrap; position: sticky; top: 0; z-index: 5; background: #F5F6FB; padding: 10px 0; margin-bottom: 8px; }
.adm-tabs button { position: relative; display: inline-flex; align-items: center; gap: 8px; border: 0; background: #fff; border-radius: 30px; padding: 11px 18px; font: inherit; font-weight: 800; color: #2F3241; cursor: pointer; box-shadow: 0 2px 8px rgba(62,75,148,.08); }
.adm-tabs button span { font-size: 1.1rem; }
.adm-tabs button[aria-selected=true] { background: #3E4B94; color: #fff; }
.adm-tabs button:focus-visible { outline: 3px solid #F27A6F; outline-offset: 2px; }
.adm-badge { font-style: normal; background: #E5484D; color: #fff; font-size: .75rem; min-width: 22px; height: 22px; border-radius: 11px; display: inline-grid; place-items: center; padding: 0 6px; }
.adm-tabs button[aria-selected=true] .adm-badge { background: #fff; color: #E5484D; }
.adm-pane { display: grid; gap: 6px; animation: adm-in .2s ease; }
.adm-pane[hidden] { display: none; }
.adm-pane > h2.dash-h:first-child { margin-top: 6px; }
@keyframes adm-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .adm-pane { animation: none; } }
.admin-dash .stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; } .admin-dash .stat div span { line-height: 1.3; }
/* top search results */
.search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 300px; background: #fff; border-radius: 14px; box-shadow: 0 14px 34px rgba(30,35,82,.18); padding: 6px; z-index: 50; max-height: 420px; overflow-y: auto; }
.sr-item { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; color: #2F3241; text-decoration: none; }
.sr-item:hover, .sr-item.on { background: #F1F2FA; }
.sr-item > span:last-child { display: flex; flex-direction: column; }
.sr-item b { color: #1D2026; font-size: .95rem; }
.sr-item small { color: #6E7485; font-size: .8rem; }
.sr-ic { width: 32px; height: 32px; border-radius: 10px; background: #F5F6FB; display: grid; place-items: center; flex: none; }
.sr-none { padding: 12px; color: #6E7485; margin: 0; font-size: .9rem; }
.moved-note { margin-bottom: 16px; }
.moved-note a { color: #3E4B94; font-weight: 700; text-decoration: underline; }
.adm-head-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .adm-head-right .btn { border: 1px solid #3E4B94; color: #3E4B94; font: inherit; font-weight: 700; cursor: pointer; padding: 9px 16px; }
/* ===== Help Centre ===== */
.help-search input { width: 100%; font: inherit; font-size: 1.05rem; border: 2px solid #E4E6F1; border-radius: 14px; padding: 13px 16px; margin: 6px 0 4px; }
.help-search input:focus { border-color: #3E4B94; outline: none; }
.help-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.help-tabs button { display: inline-flex; gap: 6px; align-items: center; border: 2px solid #E4E6F1; background: #fff; border-radius: 30px; padding: 9px 16px; font: inherit; font-weight: 800; cursor: pointer; color: #2F3241; }
.help-tabs button[aria-selected=true] { background: #3E4B94; border-color: #3E4B94; color: #fff; }
.help-list { display: grid; gap: 8px; }
.help-q { border: 1px solid #ECEEF6; border-radius: 14px; padding: 4px 16px; background: #FAFBFE; }
.help-q summary { cursor: pointer; font-weight: 700; color: #1D2026; padding: 10px 0; list-style-position: outside; }
.help-q[open] { background: #fff; border-color: #C9CCDA; }
.help-q div { padding: 0 0 12px; color: #2F3241; }
.help-tag { display: inline-block; font-size: .75rem; background: #EEF0FB; color: #3E4B94; border-radius: 20px; padding: 2px 8px; margin-right: 8px; }
.help-more { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; background: #F7F8FD; border-radius: 16px; padding: 18px 20px; margin-top: 24px; }
.help-more h2 { margin: 0 !important; }
.help-more-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.help-more .btn { border: 0; cursor: pointer; font: inherit; font-weight: 700; text-decoration: none; }
.help-more .outline { border: 1px solid #3E4B94; color: #3E4B94; }
/* ===== Welcome tour ===== */
dialog.tour { border: 0; border-radius: 26px; padding: 30px 30px 24px; width: min(440px, 92vw); text-align: center; box-shadow: 0 30px 70px rgba(30,35,82,.3); }
dialog.tour::backdrop { background: rgba(30,35,82,.55); }
.tour-ic { font-size: 3.4rem; line-height: 1; margin-bottom: 8px; }
.tour h2 { color: #3E4B94; font-size: 1.5rem; margin-bottom: 8px; }
.tour p { color: #2F3241; line-height: 1.6; }
.tour-dots { display: flex; justify-content: center; gap: 6px; margin: 16px 0; }
.tour-dots i { width: 8px; height: 8px; border-radius: 50%; background: #D9DCEB; }
.tour-dots i.on { background: #F27A6F; width: 22px; border-radius: 6px; }
.tour-btns { display: flex; justify-content: space-between; align-items: center; }
.tour-btns .btn { border: 0; cursor: pointer; font: inherit; font-weight: 800; padding: 11px 22px; }
.tour-help { font-size: .85rem; color: #6E7485 !important; margin-top: 12px; }
.tour-help a { color: #3E4B94; font-weight: 700; }
dialog.tour { position: fixed; inset: 0; margin: auto; height: fit-content; max-height: 90vh; }
/* ===== Parent Café + Parent Connections: rose & peach ===== */
body.parent-cafe .dash { background: radial-gradient(circle at 90% 0, #FFE6E1 0 220px, transparent 221px), #FFF8F6; }
body.parent-cafe .comm-hero { background: linear-gradient(120deg, #C0505E 0%, #F27A6F 50%, #FFB38A 100%); }
body.parent-cafe .comm-rules { background: #FFEDEA; border-color: #F2A99F; color: #7A2E2A; }
body.parent-cafe .composer { border-color: #F7D3CC; }
body.parent-cafe .post-types input:checked + span { background: #FFEDEA; border-color: #E0606B; color: #8A2E36; }
body.parent-cafe .feed-filter .chip.on, body.parent-cafe #post-btn, body.parent-cafe .brew .btn { background: #E0606B; border-color: #E0606B; }
body.parent-cafe .brew { background: linear-gradient(160deg, #FFEDEA, #FFD9CC); }
body.parent-cafe .brew h3, body.parent-cafe .brew-q { color: #7A2E2A; }
body.parent-cafe .cafe-tool { background: #FFF8F6; border-color: #F7D3CC; }
body.parent-cafe .cx-promo { border-color: #F2A99F; color: #7A2E2A; }
body.parent-cafe .react:hover, body.parent-cafe .react.on { background: #FFE6E1; border-color: #F2A99F; }
.parent-connect .cx-hero { background: linear-gradient(120deg, #C0505E 0%, #F27A6F 50%, #FFB38A 100%); }
.parent-connect .cx-tabs button { color: #8A2E36; }
.parent-connect .cx-tabs button[aria-selected=true], .parent-connect .cx-roulette .btn, .parent-connect .cx-me .btn, .parent-connect .cx-head .btn, .parent-connect .cx-meet .btn, .parent-connect .cx-hi, .parent-connect .cx-code .btn { background: #E0606B; }
.parent-connect .cx-roulette, .parent-connect .cx-code { border-color: #F7D3CC; background: linear-gradient(180deg, #FFF3F0, #fff); }
.parent-connect .cx-date { background: #FFEDEA; color: #8A2E36; }
.parent-connect .cx-note { background: #FFF3F0; color: #7A2E2A; }
.parent-connect .cx-plus { color: #E0606B; }
/* ===== Weekly calendar ===== */
.wc { display: grid; gap: 12px; }
.wc-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wc-title { color: #1D2026; font-size: 1.15rem; margin: 0; }
.wc-bar .meta { margin-left: auto; }
.wc-nav { display: flex; gap: 6px; }
.wc-nav button { border: 1px solid #E4E6F1; background: #fff; border-radius: 10px; padding: 7px 12px; font: inherit; font-weight: 800; cursor: pointer; color: #3E4B94; }
.wc-nav button:hover { border-color: #3E4B94; }
.wc-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: .85rem; color: #4A4E5E; }
.wc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.wc-legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.wc-scroll { overflow: auto; max-height: 620px; border: 1px solid #ECEEF6; border-radius: 14px; }
.wc-grid { display: grid; grid-template-columns: 56px repeat(7, minmax(110px, 1fr)); grid-template-rows: auto calc(var(--rows) * var(--h)); min-width: 830px; position: relative; }
.wc-head { position: sticky; top: 0; z-index: 3; background: #fff; border-bottom: 1px solid #ECEEF6; padding: 8px 4px; text-align: center; display: grid; }
.wc-head span { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: #6E7485; font-weight: 700; }
.wc-head b { font-size: 1.2rem; color: #1D2026; }
.wc-head.today b { background: #F27A6F; color: #fff; border-radius: 50%; width: 34px; height: 34px; display: grid; place-items: center; margin: 2px auto 0; }
.wc-times { position: relative; border-right: 1px solid #ECEEF6; }
.wc-times span { position: absolute; right: 6px; transform: translateY(-50%); font-size: .72rem; color: #8A8FA0; }
.wc-times span:first-child { transform: none; }
.wc-day { position: relative; border-right: 1px solid #F1F2F8; background-image: repeating-linear-gradient(to bottom, #F1F2F8 0 1px, transparent 1px var(--h)); }
.wc-day.today { background-color: #FFF8F6; }
.wc-now { position: absolute; left: 0; right: 0; height: 2px; background: #E5484D; z-index: 2; }
.wc-now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #E5484D; }
.wc-ev { position: absolute; border: 0; border-left: 4px solid var(--c); background: color-mix(in srgb, var(--c) 16%, #fff); border-radius: 8px; padding: 4px 6px; text-align: left; font: inherit; cursor: pointer; overflow: hidden; display: grid; align-content: start; gap: 1px; color: #1D2026; z-index: 1; transition: transform .12s, box-shadow .12s; }
.wc-ev:hover, .wc-ev:focus-visible { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(30,35,82,.16); z-index: 4; }
.wc-ev b { font-size: .8rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-ev span { font-size: .72rem; color: #4A4E5E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
dialog.wc-dialog { border: 0; border-radius: 20px; padding: 0; width: min(380px, 92vw); position: fixed; inset: 0; margin: auto; height: fit-content; box-shadow: 0 24px 60px rgba(30,35,82,.3); }
dialog.wc-dialog::backdrop { background: rgba(30,35,82,.45); }
.wc-d-top { background: var(--c); color: #fff; padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.wc-d-top b { font-size: 1.1rem; } .wc-d-top .link-btn { color: #fff; }
.wc-dialog p { padding: 0 18px; margin: 12px 0 0; line-height: 1.6; }
.wc-d-btns { display: flex; gap: 8px; padding: 14px 18px 18px; flex-wrap: wrap; }
.wc-d-btns .btn { text-decoration: none; font-weight: 800; }
.wc-switch { display: inline-flex; background: #EEF0F8; border-radius: 30px; padding: 4px; }
.wc-switch button { border: 0; background: transparent; border-radius: 30px; padding: 7px 18px; font: inherit; font-weight: 800; cursor: pointer; color: #4A4E5E; }
.wc-switch button[aria-selected=true] { background: #fff; color: #3E4B94; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.month-arrows { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 8px; }