:root {
  --blue: #005495;
  --deep: #09304d;
  --sky: #5095b3;
  --pale: #ccecff;
  --saffron: #ffbd59;
  --ink: #424143;
  --muted: #545454;
  --line: #e4e7eb;
  --bg: #f6f8fa;
  --card: #fff;
  --radius: 10px;
  --sidebar: 280px;
  --top: 60px;
  --ease-out: cubic-bezier(.22, .8, .24, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 140ms;
  --dur-2: 260ms;
  --dur-3: 420ms;
  --shadow-1: 0 1px 2px rgba(9, 48, 77, .05), 0 1px 3px rgba(9, 48, 77, .05);
  --shadow-2: 0 6px 22px rgba(9, 48, 77, .09), 0 2px 6px rgba(9, 48, 77, .05);
  font-family: Lato, system-ui, sans-serif;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; letter-spacing: -0.01em; color: var(--deep); margin: 0 0 .5em; line-height: 1.25; }
button, input, textarea { font: inherit; line-height: 1.4; }
.btn { background: var(--blue); color: #fff; border: 0; border-radius: 8px; padding: 10px 18px; font-weight: 700; cursor: pointer; }
.btn:disabled { opacity: .6; cursor: default; }
.btn.ghost { background: transparent; color: var(--blue); border: 1px solid var(--line); }
.field { display: block; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.error { color: #b3261e; min-height: 1.4em; margin: 8px 0 0; }
.muted { color: var(--muted); }

/* Sign-in */
.signin { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.signin .card { width: 100%; max-width: 400px; background: var(--card); border-radius: var(--radius); padding: 32px 24px; box-shadow: 0 6px 24px rgba(9, 48, 77, .08); text-align: center; }
.signin img { width: 56px; height: 56px; }
.signin form { display: grid; gap: 12px; margin-top: 16px; text-align: left; }

/* Shell */
.top { position: sticky; top: 0; z-index: 10; height: var(--top); display: flex; align-items: center; gap: 12px; padding: 0 16px; background: #fff; border-bottom: 1px solid var(--line); }
.top .brand { display: flex; align-items: center; gap: 10px; font-family: 'Playfair Display', serif; font-weight: 600; color: var(--deep); font-size: 19px; line-height: 1.3; }
.top .brand img { width: 32px; height: 32px; }
.top .spacer { flex: 1; }
.avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--pale); display: inline-grid; place-items: center; font-weight: 700; color: var(--deep); font-size: 13px; flex: none; }
.avatar.lg { width: 96px; height: 96px; font-size: 32px; }
.menu-toggle { display: none; background: none; border: 0; font-size: 22px; cursor: pointer; color: var(--deep); }
.layout { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: calc(100vh - var(--top)); }
.sidebar { background: #fff; border-right: 1px solid var(--line); padding: 12px 8px 40px; overflow-y: auto; height: calc(100vh - var(--top)); position: sticky; top: var(--top); }
.sidebar .group { margin-top: 14px; }
.sidebar .group > button { width: 100%; display: flex; justify-content: space-between; gap: 8px; background: none; border: 0; padding: 8px 10px; font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); cursor: pointer; text-align: left; }
/* Collapsible groups animate their height with the 0fr → 1fr grid trick. */
.sidebar .group-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out); }
.sidebar .group-body > ul { overflow: hidden; min-height: 0; }
.sidebar .group.closed .group-body { grid-template-rows: 0fr; opacity: 0; }
.sidebar .group > button .chev { flex: none; transition: transform var(--dur-2) var(--ease-out); }
.sidebar .group.closed > button .chev { transform: rotate(-90deg); }
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar li a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--ink); font-size: 14px; line-height: 1.45; }
.sidebar li a:hover { background: var(--bg); text-decoration: none; }
.sidebar li a.active { background: var(--pale); color: var(--deep); font-weight: 700; }
.sidebar li img, .sidebar li .dot { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; flex: none; background: var(--pale); }
.main { padding: 24px; min-width: 0; }
.panel { background: var(--card); border-radius: var(--radius); padding: 24px; max-width: 900px; margin: 0 auto; box-shadow: 0 1px 3px rgba(9, 48, 77, .06); }
.space-head { display: flex; gap: 16px; align-items: center; }
.space-head img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 20px 0; overflow-x: auto; }
.tabs a { padding: 10px 14px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a.active { color: var(--blue); border-color: var(--blue); font-weight: 700; }
.tabs a:hover { text-decoration: none; }
.placeholder { padding: 40px 16px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); }
.profile { text-align: center; }
.profile dl { text-align: left; display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin-top: 24px; }
.profile dt { font-weight: 700; }
.profile dd { margin: 0; }

@media (max-width: 800px) {
  .menu-toggle { display: block; }
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: var(--top); width: min(85vw, var(--sidebar)); z-index: 20; transform: translateX(-100%); transition: transform .2s; box-shadow: none; visibility: hidden; }
  body.nav-open .sidebar { box-shadow: 8px 0 28px rgba(9, 48, 77, .18); visibility: visible; }
  body.nav-open .sidebar { transform: none; }
  .main { padding: 16px; }
  .panel { padding: 16px; }
  .top .brand span { display: none; }
}

/* Course */
.small { font-size: 13px; line-height: 1.45; }
.progress-card { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 20px; }
.progress-card .btn { justify-self: start; }
.progress-text { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; line-height: 1.45; }
.bar { height: 8px; background: var(--bg); border-radius: 99px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--blue); border-radius: 99px; }
.course, .course ul { list-style: none; margin: 0; padding: 0; }
.course > li { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }
.course details > summary { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 16px; cursor: pointer; background: var(--bg); list-style: none; }
.course details > summary::-webkit-details-marker { display: none; }
.section-title { font-weight: 700; color: var(--deep); line-height: 1.4; }
.course ul ul .section-title { font-weight: 700; font-size: 15px; }
.lesson-row { display: grid; grid-template-columns: 24px 1fr auto; align-items: start; gap: 10px; padding: 12px 16px; color: var(--ink); border-top: 1px solid var(--line); line-height: 1.45; }
a.lesson-row:hover { background: var(--bg); text-decoration: none; }
.is-locked .lesson-row { color: var(--muted); }
.lesson-row .small { grid-column: 2 / -1; }
@media (min-width: 640px) { .lesson-row .small { grid-column: auto; } }
.state { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; line-height: 1; }
.state.done { background: var(--blue); color: #fff; }
.state.open { border: 2px solid var(--line); }
.state.locked { font-size: 13px; }

/* Lesson and rich content */
.rich { line-height: 1.7; overflow-wrap: anywhere; }
.rich img { max-width: 100%; height: auto; border-radius: 8px; }
.rich p { margin: 0 0 1em; }
.rich h1, .rich h2, .rich h3 { line-height: 1.3; margin: 1.2em 0 .5em; }
.rich ul, .rich ol { padding-left: 1.4em; }
.rich li { margin: .3em 0; }
.rich blockquote { margin: 1em 0; padding: .2em 1em; border-left: 3px solid var(--sky); color: var(--muted); }
.overview { margin-bottom: 20px; }
.crumb { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; line-height: 1.45; }
.lesson h1 { font-size: 30px; }
.lesson-video { margin: 1em 0; position: relative; }
.lesson-video img { width: 100%; display: block; }
.lesson-video figcaption { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.lesson-video video { width: 100%; display: block; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; }
.lesson-video.tracked { position: relative; }
.watch-bar { height: 4px; margin-top: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.watch-bar span { display: block; height: 100%; width: 0; background: var(--blue); border-radius: 4px; transition: width .4s ease; }
.lesson-video.done .watch-bar span { background: #2f9e6b; }
.watch-hint { line-height: 1.4; }
#complete.ready { box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 45%, transparent); animation: ready-glow 1.6s ease-out 2; }
@keyframes ready-glow { to { box-shadow: 0 0 0 12px transparent; } }
@media (prefers-reduced-motion: reduce) { #complete.ready { animation: none; } .watch-bar span { transition: none; } }
.lesson-audio { margin: 1em 0; }
.lesson-audio figcaption { font-size: 14px; line-height: 1.45; margin-bottom: 6px; }
.lesson-audio audio { width: 100%; }
.attachments { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.attachments a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; line-height: 1.4; text-decoration: none; color: inherit; transition: border-color .2s, box-shadow .2s; }
.attachments a:hover { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 15%, transparent); }
.attachments svg { flex: none; color: var(--blue); }
.complete-row { margin: 24px 0 8px; }
.lesson-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; }

/* Comments */
.comments { margin-top: 16px; }
.composer { display: grid; gap: 8px; margin-bottom: 20px; }
.composer .btn { justify-self: end; }
.comment-list, .replies { list-style: none; margin: 0; padding: 0; }
.comment { padding: 14px 0; border-top: 1px solid var(--line); }
.comment-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; line-height: 1.4; }
.comment-head .name { font-weight: 700; color: var(--ink); }
.comment-body { margin: 8px 0 0 42px; }
.comment-body p:last-child { margin-bottom: 0; }
.comment-actions { margin-left: 42px; display: flex; gap: 14px; }
.link { background: none; border: 0; padding: 4px 0; color: var(--blue); cursor: pointer; font-size: 13px; line-height: 1.45; }
.replies { margin: 8px 0 0 42px; }
.replies .comment { padding: 10px 0; }
.reply-form { margin: 10px 0 0 42px; }
@media (max-width: 640px) {
  .comment-body, .comment-actions, .replies, .reply-form { margin-left: 0; }
  .lesson h1 { font-size: 24px; }
}

/* Reactions */
.reactions { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; position: relative; }
.comment .reactions { margin: 8px 0 0 42px; }
.chip { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 99px; background: #fff; color: var(--ink); font-size: 13px; line-height: 1.4; cursor: pointer; }
.chip .emo { font-size: 15px; line-height: 1.2; }
.chip:hover { background: var(--bg); }
.chip.mine { background: var(--pale); border-color: var(--sky); color: var(--deep); font-weight: 700; }
.chip.add { color: var(--muted); padding: 3px 9px; }
.chip.add:hover { color: var(--blue); }
.chip svg { display: block; }
.quick-picks { position: absolute; z-index: 30; display: flex; gap: 2px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(9, 48, 77, .15); margin-top: 4px; }
.quick-picks button { width: 38px; height: 38px; border: 0; background: none; border-radius: 8px; font-size: 22px; line-height: 1; cursor: pointer; }
.quick-picks button:hover, .quick-picks button:focus-visible { background: var(--bg); }
.quick-picks .more { color: var(--muted); display: grid; place-items: center; }

/* Quiz */
.quiz { display: grid; gap: 16px; margin: 20px 0; }
.quiz-question { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 0; }
.quiz-question legend { font-weight: 700; color: var(--deep); line-height: 1.45; padding: 0 4px; }
.qnum { color: var(--sky); }
.quiz-question.right { border-color: #2e7d4f; }
.quiz-question.wrong { border-color: #b3261e; }
.choice { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; margin-top: 6px; border-radius: 8px; line-height: 1.45; cursor: pointer; }
.choice:hover { background: var(--bg); }
.choice input { margin-top: 4px; flex: none; }
.choice.is-correct { background: #e7f5ec; }
.choice.is-wrong { background: #fdecea; }
.quiz-result { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--radius); line-height: 1.5; }
.quiz-result.pass { background: #e7f5ec; color: #1e5c39; }
.quiz-result.fail { background: #fff4e0; color: #7a4b00; }
@media (max-width: 640px) { .comment .reactions { margin-left: 0; } }

/* Feed */
.page-title { font-size: 28px; margin: 4px 0 16px; }
.feed-col { max-width: 720px; margin: 0 auto; display: grid; gap: 16px; }
.feed-col > .panel, .main > .panel + .feed-col { margin: 0; width: 100%; }
.main > .panel + .feed-col { margin-top: 16px; }
.sidebar .primary { margin-bottom: 4px; }
.nav-icon { width: 24px; height: 24px; display: grid; place-items: center; flex: none; color: var(--blue); }
.post-card { padding: 18px 20px; }
.post-head { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.post-meta { flex: 1; min-width: 0; line-height: 1.4; }
.post-meta .name { font-weight: 700; color: var(--ink); }
.post-meta a { color: inherit; }
.pinned { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 1.4; color: var(--blue); background: var(--pale); border-radius: 99px; padding: 2px 8px; }
.post-menu { display: flex; gap: 12px; width: 100%; justify-content: flex-end; margin-top: -4px; }
@media (min-width: 640px) { .post-menu { width: auto; margin-top: 0; } }
.post-title { font-size: 21px; margin: 12px 0 6px; }
.post-title a { color: var(--deep); }
.post-title.question::before { content: 'Q'; display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 8px; border-radius: 6px; background: var(--saffron); color: var(--deep); font: 700 14px/1 Lato, sans-serif; vertical-align: 3px; }
h1.post-title { font-size: 28px; }
.post-body { margin-top: 10px; }
.post-body.clamp { max-height: 15em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.post-images { display: grid; gap: 6px; margin-top: 12px; }
.post-images.n2, .post-images.n4 { grid-template-columns: 1fr 1fr; }
.post-images.n3 { grid-template-columns: 2fr 1fr; }
.post-images img { width: 100%; max-height: 520px; object-fit: cover; border-radius: 8px; display: block; }
.link-card { display: grid; grid-template-columns: 120px 1fr; gap: 12px; margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--ink); line-height: 1.45; }
.link-card:hover { text-decoration: none; background: var(--bg); }
.link-card img { width: 100%; height: 100%; object-fit: cover; }
.link-card > span { display: grid; gap: 4px; padding: 10px 12px 10px 0; }
.link-card:not(:has(img)) { grid-template-columns: 1fr; }
.link-card:not(:has(img)) > span { padding-left: 12px; }
.post-foot { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.comment-link { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; line-height: 1.4; }
.load-more { justify-self: center; }
.edit-form { display: grid; gap: 8px; margin-top: 12px; }

/* Composer */
.post-composer { display: grid; gap: 10px; }
.kind-tabs { display: flex; gap: 6px; }
.kind-tabs button { border: 1px solid var(--line); background: #fff; border-radius: 99px; padding: 5px 14px; line-height: 1.4; cursor: pointer; color: var(--muted); white-space: nowrap; flex: none; }
.kind-tabs button[aria-selected="true"] { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 700; }
.poll-fields { display: grid; gap: 8px; }
.composer-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.composer-foot .error { margin: 0; }

/* Polls */
.poll { display: grid; gap: 8px; margin-top: 14px; }
.poll-choice { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; line-height: 1.45; cursor: pointer; }
.poll-choice.mine { border-color: var(--sky); }
.poll-choice input, .poll-text, .poll-pct { position: relative; z-index: 1; }
.poll-text { flex: 1; }
.poll-pct { font-weight: 700; font-size: 13px; color: var(--deep); }
.poll-bar { position: absolute; inset: 0 auto 0 0; background: var(--pale); z-index: 0; }
.poll-foot { display: flex; justify-content: space-between; align-items: center; }
@media (max-width: 640px) { .link-card { grid-template-columns: 88px 1fr; } .post-card { padding: 14px; } }

/* Members */
.avatar.md { width: 48px; height: 48px; font-size: 16px; }
.dir-tools { display: grid; gap: 10px; }
@media (min-width: 640px) { .dir-tools { grid-template-columns: 1fr auto; align-items: center; } }
.dir-count { margin: 12px 0 4px; }
.member-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.member-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); line-height: 1.45; height: 100%; }
.member-card:hover { background: var(--bg); text-decoration: none; }
.member-info { display: grid; gap: 2px; min-width: 0; }
.member-info .bio { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.avatar-wrap { position: relative; flex: none; }
.online-dot { position: absolute; right: 0; bottom: 2px; width: 12px; height: 12px; border-radius: 50%; background: #2e9d5b; border: 2px solid #fff; }
.role-tag { font-size: 11px; line-height: 1.4; padding: 1px 7px; border-radius: 99px; background: var(--pale); color: var(--deep); font-weight: 700; }
.profile-bio { max-width: 560px; margin: 8px auto; white-space: pre-line; }
.profile-section { margin-top: 16px; }
.profile-section h2 { font-size: 20px; }
.plain-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.plain-list li { display: grid; gap: 2px; line-height: 1.45; }
.space-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.space-chips a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--line); border-radius: 99px; color: var(--ink); font-size: 14px; line-height: 1.4; }
.space-chips a:hover { background: var(--bg); text-decoration: none; }
.space-chips img { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; }

/* Chat */
.icon-link { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--deep); }
.icon-link:hover { background: var(--bg); }
.badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #d44ba0; color: #fff; font: 700 11px/18px Lato, sans-serif; text-align: center; }
.icon-link .badge { position: absolute; top: 0; right: -2px; }
.chat-page { display: grid; grid-template-columns: 260px 1fr; padding: 0; max-width: 1100px; height: calc(100vh - var(--top) - 48px); overflow: hidden; }
.room-list { border-right: 1px solid var(--line); padding: 16px 10px; overflow-y: auto; }
.room-list h2 { font: 700 12px/1.5 Lato, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 8px 8px 6px; }
.room-list ul { list-style: none; margin: 0 0 12px; padding: 0; }
.room-list a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; color: var(--ink); line-height: 1.4; }
.room-list a:hover { background: var(--bg); text-decoration: none; }
.room-list a.active { background: var(--pale); font-weight: 700; }
.room-list .room-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-view { display: flex; min-height: 0; }
.room-view > .placeholder { margin: auto; border: 0; }
.chat { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat-title { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); font: 500 18px/1.4 'Playfair Display', serif; }
.chat-title a { color: var(--deep); }
.back-to-list { display: none; }
.chat-scroll { flex: 1; overflow-y: auto; padding: 12px 18px; }
.chat-scroll .older { display: block; margin: 0 auto 12px; }
.msgs, .thread-msgs { list-style: none; margin: 0; padding: 0; }
.msg { display: flex; gap: 10px; padding: 8px 0; }
.msg-main { flex: 1; min-width: 0; }
.msg-head { display: flex; gap: 8px; align-items: baseline; line-height: 1.4; }
.msg-body { margin-top: 2px; }
.msg-body p { margin: 0 0 .4em; }
.msg .reactions { margin: 4px 0 0; }
.msg-actions { display: flex; gap: 14px; }
.thread { margin-top: 6px; padding-left: 12px; border-left: 2px solid var(--line); }
.thread-reply { display: flex; gap: 8px; margin-top: 6px; }
.day-sep { text-align: center; margin: 14px 0 6px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.day-sep span { background: var(--card); padding: 0 10px; }
.day-sep::before { content: ''; display: block; border-top: 1px solid var(--line); transform: translateY(.7em); }
.chat-composer { display: flex; gap: 8px; align-items: flex-end; padding: 12px 18px; border-top: 1px solid var(--line); }
.chat-composer textarea, .thread-reply textarea { resize: none; min-height: 42px; }
.space-chat { margin-top: 16px; padding: 0; height: 65vh; display: flex; overflow: hidden; }
@media (max-width: 800px) {
  .chat-page { grid-template-columns: 1fr; height: calc(100vh - var(--top) - 32px); }
  .chat-page.has-room .room-list { display: none; }
  .chat-page:not(.has-room) .room-view { display: none; }
  .back-to-list { display: inline; font-family: Lato, sans-serif; }
  .chat-scroll, .chat-composer { padding-left: 12px; padding-right: 12px; }
}

/* Events */
.event-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.event-card { display: flex; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); line-height: 1.45; }
.event-card:hover { background: var(--bg); text-decoration: none; }
.date-badge { flex: none; width: 54px; text-align: center; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.date-badge span { display: block; background: var(--blue); color: #fff; font-size: 12px; line-height: 1.6; text-transform: uppercase; letter-spacing: .04em; }
.date-badge strong { display: block; font: 700 22px/1.5 Lato, sans-serif; color: var(--deep); }
.event-info { display: grid; gap: 2px; flex: 1; min-width: 0; }
.rsvp-tag { font-size: 12px; line-height: 1.4; padding: 2px 9px; border-radius: 99px; background: var(--pale); color: var(--deep); font-weight: 700; flex: none; }
.rsvp-tag.no { background: var(--bg); color: var(--muted); }
.event-page h1 { font-size: 30px; }
.event-image { width: 100%; max-height: 360px; object-fit: cover; border-radius: var(--radius); margin-bottom: 14px; }
.event-when { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.event-when > span { display: grid; gap: 2px; }
.event-when svg { color: var(--blue); margin-top: 2px; flex: none; }
.event-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.rsvp { display: inline-flex; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; margin-bottom: 14px; }
.rsvp button { border: 0; background: #fff; padding: 8px 16px; line-height: 1.4; cursor: pointer; color: var(--ink); }
.rsvp button + button { border-left: 1px solid var(--line); }
.rsvp button[aria-pressed="true"] { background: var(--blue); color: #fff; font-weight: 700; }
.small-h { font: 700 14px/1.5 Lato, sans-serif; color: var(--muted); margin: 18px 0 6px; }
.people { display: flex; flex-wrap: wrap; gap: 4px; }
.event-form { display: grid; gap: 12px; margin: 12px 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); }
.event-form label { display: grid; gap: 4px; font-weight: 700; font-size: 14px; line-height: 1.45; }
.event-form .field { font-weight: 400; }
.row2 { display: grid; gap: 12px; }
@media (min-width: 640px) { .row2 { grid-template-columns: 1fr 1fr; } }

/* ── Motion ───────────────────────────────────────────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(4px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(.85); } }

/* Page content rises in; list items follow one after another. */
.main.enter > * { animation: rise var(--dur-3) var(--ease-out) both; }
.main.enter > *:nth-child(2) { animation-delay: 50ms; }
.main.enter > *:nth-child(3) { animation-delay: 100ms; }
.main.enter > *:nth-child(n+4) { animation-delay: 140ms; }
:is(.post-card, .member-grid > li, .event-list > li, .course > li, .comment-list > .comment, .plain-list > li) { animation: rise var(--dur-3) var(--ease-out) both; }
:is(.member-grid, .event-list, .course, .comment-list, .plain-list) > :nth-child(2) { animation-delay: 30ms; }
:is(.member-grid, .event-list, .course, .comment-list, .plain-list) > :nth-child(3) { animation-delay: 60ms; }
:is(.member-grid, .event-list, .course, .comment-list, .plain-list) > :nth-child(4) { animation-delay: 90ms; }
:is(.member-grid, .event-list, .course, .comment-list, .plain-list) > :nth-child(5) { animation-delay: 120ms; }
:is(.member-grid, .event-list, .course, .comment-list, .plain-list) > :nth-child(n+6) { animation-delay: 150ms; }
#posts > .post-card:nth-child(2) { animation-delay: 40ms; }
#posts > .post-card:nth-child(3) { animation-delay: 80ms; }
#posts > .post-card:nth-child(n+4) { animation-delay: 120ms; }
.msg, .thread-msgs > .msg, .replies > .comment { animation: fade var(--dur-2) var(--ease-out) both; }

/* Surfaces and controls respond softly. */
.panel { box-shadow: var(--shadow-1); transition: box-shadow var(--dur-2) var(--ease-out); }
:is(.member-card, .event-card, a.lesson-row, .link-card, .space-chips a, .room-list a, .sidebar li a, .poll-choice, .choice) { transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
:is(.member-card, .event-card, .link-card):hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.post-card:hover { box-shadow: var(--shadow-2); }
.btn, .chip, .kind-tabs button, .rsvp button, .link, .icon-link, .quick-picks button { transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), opacity var(--dur-1); }
.btn:hover:not(:disabled) { box-shadow: 0 4px 14px rgba(0, 84, 149, .22); }
.btn.ghost:hover:not(:disabled) { box-shadow: none; background: var(--bg); }
:is(.btn, .chip, .kind-tabs button, .rsvp button, .quick-picks button, .icon-link):active:not(:disabled) { transform: scale(.97); }
.chip .emo { display: inline-block; }
.chip.just .emo { animation: pop var(--dur-3) var(--ease-out); }
.field { transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
.field:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgba(80, 149, 179, .2); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.bar span { transition: width var(--dur-3) var(--ease-out); }
.poll-bar { transition: width var(--dur-3) var(--ease-out); }
.quick-picks { animation: pop-in var(--dur-2) var(--ease-out) both; transform-origin: top left; }
.purnam-emoji-picker { animation: pop-in var(--dur-2) var(--ease-out) both; }
.edit-form, .reply-form, .thread, .event-form { animation: rise var(--dur-2) var(--ease-out) both; }
.course details > summary { transition: background-color var(--dur-1) var(--ease-out); }
.course details > summary:hover { background: #eef3f7; }
.course details::details-content { transition: height var(--dur-2) var(--ease-out), content-visibility var(--dur-2) allow-discrete; height: 0; overflow: clip; }
.course details[open]::details-content { height: auto; }
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }

/* Thin progress line while a page loads. */
.progress-line { position: fixed; z-index: 100; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--sky), var(--blue)); transform-origin: left; transform: scaleX(0); opacity: 0; pointer-events: none; }
.progress-line.on { opacity: 1; animation: progress 2.4s var(--ease-out) forwards; }
.progress-line.done { transform: scaleX(1); opacity: 0; animation: none; transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-3) ease var(--dur-2); }

/* Phone menu: the sidebar slides over a dimmed backdrop. */
.nav-backdrop { display: none; }
@media (max-width: 800px) {
  .sidebar { transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3), visibility 0s linear var(--dur-3); }
  body.nav-open .sidebar { transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3), visibility 0s; }
  .nav-backdrop { display: block; position: fixed; inset: var(--top) 0 0; z-index: 15; background: rgba(9, 48, 77, .28); opacity: 0; pointer-events: none; transition: opacity var(--dur-3) var(--ease-out); }
  body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
}
.menu-toggle { display: none; place-items: center; width: 38px; height: 38px; border-radius: 50%; }
@media (max-width: 800px) { .menu-toggle { display: grid; } }
.top { backdrop-filter: saturate(1.4) blur(10px); background: rgba(255, 255, 255, .86); }

/* Sign-in card eases in. */
.signin .card { animation: rise var(--dur-3) var(--ease-out) both; }
.signin form:not([hidden]) { animation: fade var(--dur-2) var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Notifications */
.bell-wrap { position: relative; }
.bell-wrap .icon-link { border: 0; background: none; cursor: pointer; }
.bell-wrap .badge { position: absolute; top: 0; right: -2px; }
.bell-panel { position: absolute; right: -60px; top: calc(100% + 8px); width: min(380px, 92vw); max-height: 70vh; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 48px rgba(9, 48, 77, .18); z-index: 40; animation: pop-in var(--dur-2) var(--ease-out) both; transform-origin: top right; }
.bell-panel header, .bell-panel footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; line-height: 1.4; }
.bell-panel header { border-bottom: 1px solid var(--line); }
.bell-panel footer { border-top: 1px solid var(--line); justify-content: center; }
.bell-panel ul, .note-list { list-style: none; margin: 0; padding: 0; }
.pad { padding: 14px 16px; margin: 0; }
.note { display: flex; gap: 10px; align-items: flex-start; padding: 11px 16px; color: var(--ink); line-height: 1.45; position: relative; transition: background-color var(--dur-1) var(--ease-out); }
.note:hover { background: var(--bg); text-decoration: none; }
.note.unread { background: #f1f8fd; }
.note.unread::after { content: ''; position: absolute; right: 14px; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.note-body { display: grid; gap: 2px; padding-right: 14px; }
.note-list .note { border-radius: 10px; }
.note-list > li { animation: rise var(--dur-3) var(--ease-out) both; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.prefs { display: grid; gap: 12px; }
.switch { display: flex; gap: 12px; align-items: center; line-height: 1.45; cursor: pointer; }
.switch input { appearance: none; width: 40px; height: 24px; border-radius: 99px; background: #cfd8e0; position: relative; flex: none; cursor: pointer; transition: background-color var(--dur-2) var(--ease-out); }
.switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform var(--dur-2) var(--ease-out); }
.switch input:checked { background: var(--blue); }
.switch input:checked::after { transform: translateX(16px); }
@media (max-width: 640px) { .bell-panel { position: fixed; right: 8px; left: 8px; top: calc(var(--top) + 4px); width: auto; } }
.device-push { margin-top: 14px; }

/* Recognition */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { display: grid; justify-items: center; gap: 2px; padding: 14px 8px; border: 1px solid var(--line); border-radius: var(--radius); line-height: 1.35; text-align: center; }
.stat svg { color: var(--sky); }
.stat strong { font: 500 26px/1.2 'Playfair Display', serif; color: var(--deep); }
.achievements h2 { font-size: 20px; margin-top: 20px; }
.badge-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.badge-grid li { display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 13px; line-height: 1.4; animation: rise var(--dur-3) var(--ease-out) both; }
.badge-grid img, .badge-dot { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow-1); transition: transform var(--dur-2) var(--ease-out); }
.badge-grid li:hover img { transform: translateY(-2px) scale(1.04); }
.badge-dot { display: grid; place-items: center; background: var(--pale); color: var(--blue); }
.gift-row { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gift-row li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--line); border-radius: 99px; line-height: 1.4; font-size: 14px; }
.gift-row img, .gift-choices img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
#send-gift { display: inline-flex; align-items: center; gap: 8px; }
.gift-form { display: grid; gap: 10px; margin-top: 10px; animation: rise var(--dur-2) var(--ease-out) both; }
.gift-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.gift-choices label { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--line); border-radius: 99px; cursor: pointer; line-height: 1.4; transition: border-color var(--dur-1), background-color var(--dur-1); }
.gift-choices input { position: absolute; opacity: 0; pointer-events: none; }
.gift-choices label:has(input:checked) { border-color: var(--blue); background: var(--pale); font-weight: 700; }
.scroll-x { overflow-x: auto; padding-bottom: 4px; }
.leaders { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 4px; }
.leaders li { display: grid; grid-template-columns: 36px 1fr auto auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; line-height: 1.4; animation: rise var(--dur-3) var(--ease-out) both; }
.leaders li:nth-child(-n+3) { background: #f7fbfe; }
.leaders a { display: flex; align-items: center; gap: 10px; color: var(--ink); min-width: 0; }
.leaders a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--muted); }
.rank.top1 { background: #ffd978; color: #6b4a00; }
.rank.top2 { background: #e3e7ec; color: #42505c; }
.rank.top3 { background: #f2c9a4; color: #6b3d14; }

/* Admin */
.admin h2 { font-size: 20px; margin: 22px 0 10px; }
.admin h3 { font: 700 14px/1.5 Lato, sans-serif; color: var(--deep); margin: 0 0 8px; }
.admin-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: 10px; }
.chart { width: 100%; height: 120px; display: block; }
.chart rect { fill: var(--sky); transition: fill var(--dur-1); }
.chart rect:hover { fill: var(--blue); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.data { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.data th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--bg); padding: 10px 12px; white-space: nowrap; }
.data td { padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: top; }
.data tbody tr { transition: background-color var(--dur-1); }
.data tbody tr:hover { background: #f8fbfd; }
.cell-person { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; }
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-bottom: 12px; }
.table-meta { display: flex; justify-content: space-between; gap: 12px; }
.pager { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.member-head { display: flex; gap: 16px; align-items: center; margin-bottom: 8px; }
.member-head h2 { margin: 0; }
.admin-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.admin-grid > section { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.chips { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--bg); border-radius: 99px; font-size: 13px; line-height: 1.4; }
.add-row { display: flex; gap: 6px; }
.add-row .field { min-width: 0; }
.inline { display: flex; align-items: center; gap: 8px; }
.role-tag.danger, .btn.danger { color: #b3261e; }
.btn.ghost.danger { border-color: #f1c6c3; }
.plan-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.plan-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.plan-top { display: flex; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.plan-top strong { flex: 1; }
.check-grid { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; max-height: 300px; overflow: auto; }
.check-grid legend { font-weight: 700; font-size: 14px; padding: 0 4px; }
.check-grid label { font-weight: 400; display: flex; gap: 8px; align-items: center; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
.collection-block { margin-top: 18px; }
.collection-head { display: flex; align-items: center; gap: 10px; }
.collection-head h3 { flex: 1; margin: 0; }
.space-rows { list-style: none; padding: 0; margin: 8px 0 0; border: 1px solid var(--line); border-radius: var(--radius); }
.space-rows > li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; line-height: 1.4; }
.space-rows > li + li { border-top: 1px solid var(--line); }
.space-rows img, .space-rows .dot { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; background: var(--pale); flex: none; }
.space-rows .archived { opacity: .55; }
.space-name { flex: 1; display: grid; min-width: 0; }
.order-btns { display: inline-flex; gap: 2px; }
.icon-btn { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); background: #fff; border-radius: 6px; color: var(--muted); cursor: pointer; transition: background-color var(--dur-1), color var(--dur-1); }
.icon-btn:hover { background: var(--bg); color: var(--blue); }
.item-tree, .item-tree ul { list-style: none; margin: 0; padding: 0; }
.item-tree { border: 1px solid var(--line); border-radius: var(--radius); margin-top: 12px; }
.item-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px calc(12px + var(--depth) * 24px); border-top: 1px solid var(--line); line-height: 1.4; }
.item-tree > li:first-child > .item-row { border-top: 0; }
.item-title { flex: 1; min-width: 0; }
.hidden-item > .item-row { opacity: .6; }
.rte { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.rte-tools { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; background: var(--bg); border-bottom: 1px solid var(--line); }
.rte-tools button { min-width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; border-radius: 6px; cursor: pointer; color: var(--ink); transition: background-color var(--dur-1); }
.rte-tools button:hover { background: #e6edf2; }
.rte-h { font: 700 12px/1 Lato, sans-serif; }
.rte-area { min-height: 220px; max-height: 60vh; overflow-y: auto; padding: 14px 16px; outline: none; font-weight: 400; }
.chart rect.zero { fill: var(--line); }
.add-row .btn { white-space: nowrap; flex: none; }
.add-row .field { flex: 1; }

/* Feed spacing: separate cards clearly; even rhythm inside each card. */
#posts, .feed-list { display: grid; gap: 20px; }
.feed-col { gap: 20px; }
.post-card { padding: 22px 24px 16px; border-radius: 14px; }
.post-head { margin-bottom: 4px; }
.post-body { margin-top: 12px; }
.post-body p { margin: 0 0 .75em; }
.post-body p:last-child { margin-bottom: 0; }
.post-images, .link-card, .poll { margin-top: 16px; }
.post-card .reactions { margin-top: 16px; }
.post-foot { margin-top: 12px; padding-top: 12px; }
/* Mighty uses empty paragraphs as spacers; margins already provide the rhythm. */
.rich p:empty, .rich p:has(> br:only-child) { display: none; }
@media (max-width: 640px) { .post-card { padding: 16px 16px 12px; } #posts { gap: 14px; } }

/* ── Frame: profile menu, phone tab bar ────────────────────────────────── */
.avatar:not(img) { background: hsl(var(--h, 205) 60% 92%); color: hsl(var(--h, 205) 45% 30%); }
.me-wrap { position: relative; }
.me-button { border: 0; background: none; padding: 2px; border-radius: 50%; cursor: pointer; display: grid; transition: box-shadow var(--dur-1); }
.me-button:hover, .me-button[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--pale); }
.me-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 260px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 48px rgba(9, 48, 77, .18); padding: 6px; z-index: 40; animation: pop-in var(--dur-2) var(--ease-out) both; transform-origin: top right; }
.me-card { display: flex; gap: 10px; align-items: center; padding: 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; line-height: 1.35; }
.me-card > span { display: grid; min-width: 0; }
.me-card .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-menu a, .me-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 0; background: none; border-radius: 8px; color: var(--ink); font: inherit; line-height: 1.4; cursor: pointer; text-align: left; }
.me-menu a:hover, .me-menu button:hover { background: var(--bg); text-decoration: none; }
.me-menu svg { color: var(--muted); flex: none; }
.tabbar { display: none; }
@media (max-width: 800px) {
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; inset: auto 0 0; z-index: 25; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.4) blur(12px); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .tabbar a, .tabbar button { display: grid; justify-items: center; gap: 3px; padding: 4px 0; border: 0; background: none; color: var(--muted); font: 600 11px/1.3 Lato, sans-serif; cursor: pointer; border-radius: 10px; }
  .tabbar svg { width: 22px; height: 22px; }
  .tabbar a.active { color: var(--blue); }
  .tabbar a:hover { text-decoration: none; }
  .main { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .top .brand span { display: inline; font-size: 17px; }
  .top { gap: 6px; padding: 0 10px; }
}
@media (max-width: 380px) { .top .brand span { display: none; } }

/* ── Toasts, dialogs, skeletons ────────────────────────────────────────── */
#toasts { position: fixed; z-index: 200; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; gap: 8px; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
@media (max-width: 800px) { #toasts { bottom: calc(92px + env(safe-area-inset-bottom)); } }
.toast { background: var(--deep); color: #fff; padding: 12px 16px; border-radius: 12px; box-shadow: 0 10px 30px rgba(9, 48, 77, .3); line-height: 1.45; animation: rise var(--dur-2) var(--ease-out) both; transition: opacity var(--dur-2), transform var(--dur-2); }
.toast.error { background: #8c1d18; }
.toast.out { opacity: 0; transform: translateY(6px); }
.modal { border: 0; border-radius: 16px; padding: 0; width: min(440px, calc(100vw - 32px)); box-shadow: 0 30px 80px rgba(9, 48, 77, .3); animation: pop-in var(--dur-2) var(--ease-out) both; }
.modal::backdrop { background: rgba(9, 48, 77, .35); backdrop-filter: blur(2px); animation: fade var(--dur-2) both; }
.modal form { padding: 24px; display: grid; gap: 8px; }
.modal h2 { font-size: 22px; margin: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.btn.danger-solid { background: #b3261e; }
.btn.danger-solid:hover { box-shadow: 0 4px 14px rgba(179, 38, 30, .25); }
@keyframes shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } }
.skeleton-wrap { display: grid; gap: 16px; }
.skeleton-card { background: #fff; border-radius: 14px; padding: 22px; display: grid; gap: 12px; box-shadow: var(--shadow-1); }
.sk { height: 12px; border-radius: 8px; background: linear-gradient(90deg, #eef2f5 0, #f7f9fb 40%, #eef2f5 80%); background-size: 800px 100%; animation: shimmer 1.4s linear infinite; }
.sk-head { height: 36px; width: 40%; }
.sk-line.short { width: 60%; }

/* ── Admin portal ──────────────────────────────────────────────────────── */
.admin-layout { grid-template-columns: 248px 1fr; min-height: 100vh; }
.admin-side { background: var(--deep); color: #dbe7f0; padding: 18px 12px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.admin-brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 16px; line-height: 1.3; }
.admin-brand img { width: 34px; height: 34px; background: #fff; border-radius: 50%; padding: 3px; }
.admin-brand strong { display: block; color: #fff; font: 500 20px/1.2 'Playfair Display', serif; }
.admin-side nav { display: grid; gap: 2px; }
.admin-side a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: #c8d8e4; line-height: 1.4; transition: background-color var(--dur-1), color var(--dur-1); }
.admin-side a:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
.admin-side a.active { background: rgba(255, 255, 255, .14); color: #fff; font-weight: 700; }
.admin-back { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, .12); border-radius: 0 !important; padding-top: 16px !important; }
.admin-main { padding: 28px 32px 60px; min-width: 0; max-width: 1200px; }
.admin-main .page-title { font-size: 32px; }
@media (max-width: 800px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-side { position: sticky; top: 0; z-index: 20; height: auto; flex-direction: row; align-items: center; padding: 8px; gap: 4px; overflow-x: auto; }
  .admin-brand { display: none; }
  .admin-side nav { display: flex; gap: 2px; }
  .admin-side a { white-space: nowrap; padding: 8px 10px; font-size: 14px; }
  .admin-side a svg { display: none; }
  .admin-back { margin: 0 0 0 auto; border: 0; padding-top: 8px !important; }
  .admin-main { padding: 18px 14px 40px; }
}
.settings-form { display: grid; gap: 16px; }
.settings-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; display: grid; gap: 12px; margin-bottom: 16px; }
.settings-card h2 { font-size: 20px; margin: 0; }
.settings-card label:not(.switch) { display: grid; gap: 4px; font-weight: 700; font-size: 14px; line-height: 1.45; }
.settings-card .field { font-weight: 400; }
.switch.feature > span { display: grid; }
.sticky-save { position: sticky; bottom: 12px; display: flex; justify-content: flex-end; }
.sticky-save .btn { box-shadow: 0 8px 24px rgba(0, 84, 149, .3); }
.nav-editor { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 8px; }
.nav-editor li { display: grid; grid-template-columns: auto 1fr 1.4fr auto auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.nav-kind { padding-left: 4px; }
@media (max-width: 700px) { .nav-editor li { grid-template-columns: auto 1fr; } .nav-editor li > :nth-child(n+3) { grid-column: 2; } }
.spacer { flex: 1; }
.link.danger { color: #b3261e; }
.badge-admin { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.badge-admin li { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; }
.badge-admin li span { flex: 1; }
.badge-admin img, .badge-admin .badge-dot { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--pale); }

/* ── Sign-in ───────────────────────────────────────────────────────────── */
.signin { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; padding: 0; place-items: stretch; background: #fff; }
.signin-brand { background: radial-gradient(120% 90% at 20% 10%, #5095b3 0%, #005495 45%, #09304d 100%); color: #e8f2f9; display: grid; align-content: center; justify-items: start; gap: 14px; padding: 56px; position: relative; overflow: hidden; }
.signin-brand::after { content: ''; position: absolute; inset: auto -120px -160px auto; width: 420px; height: 420px; border-radius: 50%; background: rgba(255, 255, 255, .06); }
.signin-brand img { width: 72px; height: 72px; background: #fff; border-radius: 50%; padding: 6px; animation: rise var(--dur-3) var(--ease-out) both; }
.signin-brand h1 { color: #fff; font-size: clamp(32px, 4vw, 48px); margin: 8px 0 0; animation: rise var(--dur-3) var(--ease-out) 60ms both; }
.signin-brand p { font-size: 18px; line-height: 1.6; margin: 0; opacity: .85; animation: rise var(--dur-3) var(--ease-out) 120ms both; }
.signin .card { align-self: center; justify-self: center; max-width: 420px; width: 100%; box-shadow: none; text-align: left; padding: 40px 28px; }
.signin .card h2 { font-size: 30px; }
.code-field { font: 600 26px/1.2 Lato, sans-serif; letter-spacing: .5em; text-align: center; padding: 14px 10px 14px calc(10px + .5em); }
.signin .btn { padding: 12px 18px; }
@media (max-width: 800px) {
  .signin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .signin-brand { padding: 40px 24px 32px; justify-items: center; text-align: center; }
  .signin-brand img { width: 56px; height: 56px; }
  .signin .card { align-self: start; padding: 28px 20px; }
}

/* ── Home, courses ─────────────────────────────────────────────────────── */
.home { max-width: 860px; margin: 0 auto; display: grid; gap: 28px; }
.hero { padding: 8px 4px 0; }
.eyebrow { margin: 0; color: var(--sky); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; }
.hero h1 { font-size: clamp(30px, 4vw, 40px); margin: 2px 0 4px; }
.hero p { margin: 0; }
.welcome { border-left: 4px solid var(--saffron); }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.block-head h2 { font-size: 22px; margin: 0; }
.course-strip { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.course-card { display: flex; gap: 14px; align-items: center; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); box-shadow: var(--shadow-1); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); animation: rise var(--dur-3) var(--ease-out) both; }
.course-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); text-decoration: none; }
.course-art { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; flex: none; display: grid; place-items: center; background: var(--pale); color: var(--blue); }
.course-art img { width: 100%; height: 100%; object-fit: cover; }
.course-body { display: grid; gap: 6px; min-width: 0; flex: 1; line-height: 1.35; }
.course-body strong { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.course-body .bar { height: 6px; }
.group-title { font-size: 20px; margin: 18px 0 10px; }
.event-list.compact { margin-top: 0; }
.empty-state { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 40px 16px; line-height: 1.5; }
.empty-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--pale); color: var(--blue); margin-bottom: 6px; }
.empty-icon svg { width: 26px; height: 26px; }

/* ── Space header ──────────────────────────────────────────────────────── */
.space-hero { margin: -24px -24px 0; position: relative; }
.space-cover { height: 120px; border-radius: var(--radius) var(--radius) 0 0; background: linear-gradient(120deg, hsl(var(--h) 45% 32%), hsl(calc(var(--h) + 40) 50% 55%)); }
.space-id { display: flex; gap: 16px; align-items: flex-end; padding: 0 24px; margin-top: -36px; }
.space-avatar { width: 84px; height: 84px; border-radius: 18px; object-fit: cover; border: 4px solid #fff; box-shadow: var(--shadow-2); background: var(--pale); display: grid; place-items: center; font: 600 28px/1 'Playfair Display', serif; color: var(--deep); flex: none; }
.space-id h1 { font-size: clamp(24px, 3vw, 32px); margin: 0 0 2px; }
.space-id p { margin: 0 0 4px; }
.space-tabs { position: sticky; top: var(--top); z-index: 5; background: #fff; margin: 16px -24px 20px; padding: 0 16px; }
@media (max-width: 640px) {
  .space-hero { margin: -16px -16px 0; }
  .space-cover { height: 84px; }
  .space-id { padding: 0 16px; margin-top: -28px; gap: 12px; }
  .space-avatar { width: 64px; height: 64px; border-radius: 14px; }
  .space-id p { font-size: 14px; }
  .space-tabs { margin: 12px -16px 16px; padding: 0 8px; }
}

/* ── Posts: menu, composer ─────────────────────────────────────────────── */
.kebab { position: relative; margin-left: auto; }
.kebab-btn { width: 34px; height: 34px; border-radius: 50%; border: 0; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: background-color var(--dur-1); }
.kebab-btn:hover, .kebab-btn[aria-expanded="true"] { background: var(--bg); color: var(--ink); }
.kebab .post-menu { position: absolute; right: 0; top: 100%; z-index: 10; display: grid; min-width: 140px; margin: 4px 0 0; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(9, 48, 77, .16); animation: pop-in var(--dur-2) var(--ease-out) both; transform-origin: top right; }
.kebab .post-menu .link { padding: 9px 10px; text-align: left; color: var(--ink); font-size: 14px; border-radius: 8px; }
.kebab .post-menu .link:hover { background: var(--bg); }
.kebab .post-menu .delete { color: #b3261e; }
.post-head .pinned { order: 0; }
.composer-who { display: flex; align-items: center; gap: 12px; cursor: text; }
.composer-prompt { flex: 1; padding: 11px 16px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); background: var(--bg); transition: border-color var(--dur-1); line-height: 1.4; }
.composer-who:hover .composer-prompt { border-color: var(--sky); }
.post-composer:not(.expanded) > :not(.composer-who) { display: none; }
.post-composer.expanded .composer-who { display: none; }
.post-composer.expanded > * { animation: rise var(--dur-2) var(--ease-out) both; }

/* ── Lessons: reading layout, navigation ───────────────────────────────── */
.lesson { max-width: 760px; margin: 0 auto; }
.lesson .rich { font-size: 17px; line-height: 1.75; }
.comments { max-width: 760px; margin-left: auto; margin-right: auto; }
.lesson-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.nav-card { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); line-height: 1.4; transition: border-color var(--dur-1), box-shadow var(--dur-2), transform var(--dur-2) var(--ease-out); }
.nav-card:hover { border-color: var(--sky); box-shadow: var(--shadow-2); transform: translateY(-1px); text-decoration: none; }
.nav-card.next { text-align: right; }
.next-mobile { display: none; }
.complete-row { display: flex; gap: 10px; }
@media (max-width: 800px) {
  .complete-row { position: sticky; bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 6; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); margin: 20px -16px 0; padding: 10px 16px; border-top: 1px solid var(--line); }
  .complete-row .btn { flex: 1; }
  .next-mobile { display: inline-flex; justify-content: center; }
  .lesson-nav { grid-template-columns: 1fr; }
  .lesson .rich { font-size: 16.5px; }
}

/* ── Account ───────────────────────────────────────────────────────────── */
.account { max-width: 760px; margin: 0 auto; }
.photo-row { display: flex; gap: 16px; align-items: center; }
.file-btn { display: inline-flex; cursor: pointer; }
.settings-fields { display: grid; gap: 12px; }
.settings-fields label { display: grid; gap: 4px; font-weight: 700; font-size: 14px; }
.settings-fields .field { font-weight: 400; }
.devices li { padding: 6px 0; }
.danger-zone { border-color: #f1c6c3; }
.post-card { width: 100%; max-width: none; margin: 0; }
.top .brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 800px) { .top .brand { min-width: 0; } .top .brand span { font-size: 16px; max-width: 46vw; } }

/* ── Space header fix: text sits below the cover ──────────────────────── */
.space-id { align-items: flex-start; }
.space-id > div { padding-top: 44px; min-width: 0; }
@media (max-width: 640px) { .space-id > div { padding-top: 34px; } .space-id h1 { font-size: 22px; } }
.space-cover { background: linear-gradient(120deg, #09304d 0%, hsl(var(--h) 70% 28%) 45%, hsl(calc(var(--h) - 10) 45% 55%) 100%); position: relative; overflow: hidden; }
.space-cover::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 120% at 85% 0%, rgba(255, 189, 89, .28), transparent 60%), radial-gradient(40% 80% at 10% 100%, rgba(204, 236, 255, .18), transparent 70%); }
.complete-row .btn { white-space: nowrap; }

/* ── Beautiful touches ─────────────────────────────────────────────────── */
@property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes spin-angle { to { --angle: 360deg; } }
/* A light that travels around the border of key actions. */
.glow { position: relative; isolation: isolate; }
.glow::before { content: ''; position: absolute; inset: -3px; border-radius: inherit; padding: 2px; z-index: -1;
  background: conic-gradient(from var(--angle), transparent 0 55%, #5095b3 70%, #ffbd59 82%, #ccecff 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin-angle 3.2s linear infinite; }
.glow::after { content: ''; position: absolute; inset: -6px; border-radius: inherit; z-index: -2; background: radial-gradient(closest-side, rgba(80, 149, 179, .35), transparent); filter: blur(8px); opacity: .7; animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .25; } }
.post-composer.expanded { position: relative; isolation: isolate; }
.post-composer.expanded::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; z-index: -1; background: conic-gradient(from var(--angle), transparent 0 60%, #5095b3 75%, #ffbd59 88%, transparent); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin-angle 4s linear infinite; }

/* Light sweep across primary buttons. */
.btn:not(.ghost) { position: relative; overflow: hidden; }
.btn:not(.ghost):not(.glow)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-120%); transition: transform 700ms var(--ease-out); pointer-events: none; }
.btn:not(.ghost):not(.glow):hover::after { transform: translateX(120%); }
.btn.glow { overflow: visible; }

/* Cards: soft blue edge on hover. */
.course-card:hover, .event-card:hover, .member-card:hover, .nav-card:hover { border-color: rgba(80, 149, 179, .55); box-shadow: 0 0 0 4px rgba(204, 236, 255, .55), var(--shadow-2); }

/* Reactions: a ring of light around the one you just tapped. */
.chip.just { position: relative; }
.chip.just::after { content: ''; position: absolute; inset: -4px; border-radius: 99px; border: 2px solid #5095b3; animation: ring-out 600ms var(--ease-out) forwards; pointer-events: none; }
@keyframes ring-out { from { opacity: .9; transform: scale(.85); } to { opacity: 0; transform: scale(1.35); } }

/* New notifications pulse once. */
.badge.ping { animation: badge-ping 900ms var(--ease-out); }
@keyframes badge-ping { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(212, 75, 160, .6); } 40% { transform: scale(1.25); } 100% { transform: scale(1); box-shadow: 0 0 0 10px rgba(212, 75, 160, 0); } }

/* In-progress bars shimmer softly. */
.course-card .bar span, .progress-card .bar span { position: relative; overflow: hidden; background: linear-gradient(90deg, #005495, #5095b3); }
.course-card .bar span::after, .progress-card .bar span::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); transform: translateX(-100%); animation: bar-sheen 2.6s ease-in-out infinite; }
@keyframes bar-sheen { 60%, 100% { transform: translateX(100%); } }

/* Greeting name in a soft brand gradient. */
.hero h1 { background: linear-gradient(90deg, #09304d, #005495 60%, #5095b3); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Completion moment. */
.celebrate { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; pointer-events: none; background: radial-gradient(circle at center, rgba(204, 236, 255, .45), transparent 60%); animation: fade var(--dur-2) both; transition: opacity 300ms; }
.celebrate.out { opacity: 0; }
.celebrate-card { position: relative; display: grid; justify-items: center; gap: 12px; padding: 26px 34px; background: rgba(255, 255, 255, .96); border-radius: 22px; box-shadow: 0 30px 80px rgba(9, 48, 77, .25), 0 0 0 1px rgba(80, 149, 179, .25); animation: pop-in 420ms var(--ease-out) both; }
.celebrate-card strong { font: 500 22px/1.3 'Playfair Display', serif; color: var(--deep); }
.c-ring { fill: none; stroke: #5095b3; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 214; stroke-dashoffset: 214; transform: rotate(-90deg); transform-origin: center; animation: draw 650ms var(--ease-out) 80ms forwards; filter: drop-shadow(0 0 6px rgba(80, 149, 179, .6)); }
.c-check { fill: none; stroke: #005495; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: draw 380ms var(--ease-out) 560ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.burst { position: absolute; top: 70px; left: 50%; width: 0; height: 0; }
.burst i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #ffbd59; transform: rotate(var(--a)) translateY(0); opacity: 0; animation: burst 700ms var(--ease-out) 600ms forwards; box-shadow: 0 0 8px rgba(255, 189, 89, .9); }
.burst i:nth-child(3n) { background: #5095b3; box-shadow: 0 0 8px rgba(80, 149, 179, .9); }
@keyframes burst { 0% { opacity: 1; transform: rotate(var(--a)) translateY(-10px) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-70px) scale(.4); } }
.space-id { position: relative; z-index: 1; }
.glow::after { inset: -4px; opacity: .45; }
.badge-admin .badge-dot { flex: none; }