/* FundaRoute: Tutors (Premium).
   Layout and dark neutrals follow Discord's own design tokens, read out of its web bundle with REA
   (BACKGROUND_BASE_LOWEST #121214, BASE_LOWER #1a1a1e, BASE_LOW #202024, SURFACE_HIGH #242429,
   TEXT_DEFAULT #efeff1, TEXT_MUTED #96979e, CHANNEL_ICON #81828a, STATUS_POSITIVE #23a55a ...).
   The accent stays FundaRoute's jacaranda violet instead of Discord's blurple. */
.hub, .hub-modal {
  --d-rail: #121214; --d-side: #1a1a1e; --d-chat: #202024; --d-high: #242429; --d-higher: #28282d;
  --d-hover: rgba(151, 151, 159, .12); --d-active: rgba(151, 151, 159, .2); --d-line: rgba(151, 151, 159, .12);
  --d-text: #efeff1; --d-strong: #fbfbfb; --d-muted: #96979e; --d-subtle: #abacb2; --d-icon: #81828a;
  --d-accent: #6d68e8; --d-accent-2: #5a55d6; --d-link: #4d96ee;
  --d-green: #23a55a; --d-red: #f23f43; --d-yellow: #f0b232;
  --d-mention-bg: rgba(109, 104, 232, .24); --d-mention-fg: #c4c2ff;
  --d-hl: rgba(240, 178, 50, .08); --d-hl-bar: #f0b232;
}

/* ---------- nav additions ---------- */
.pro-tag { display: inline-block; font: 700 .68rem/1 var(--body); letter-spacing: .04em; text-transform: uppercase;
  background: var(--hi); color: var(--deep); padding: 4px 6px; border-radius: 5px; }
.tabs .tab-pro .pro-tag { margin-left: 2px; }
.tabs a[aria-current=page] .pro-tag { background: var(--deep); color: var(--hi); }
@media (min-width: 761px) and (max-width: 1099px) { .tabs .tab-pro .pro-tag { display: none; } }
@media (max-width: 760px) { .bottom-bar { grid-template-columns: repeat(6, 1fr); } .bottom-bar a { font-size: .7rem; } }

.pro-strip { display: grid; gap: 4px; margin: 18px 0 0; padding: 18px 20px; border-radius: var(--radius); text-decoration: none;
  background: var(--deep); color: #d3d6ea; border: 1px solid var(--deep); }
.pro-strip strong { color: #fff; font: 700 1.2rem var(--hand); }
.pro-strip .pro-tag { justify-self: start; }
@media (hover: hover) { .pro-strip:hover { box-shadow: var(--lift); border-color: var(--ink); } }

/* ---------- landing ---------- */
.tut-landing .page-head .pro-tag { margin-bottom: 10px; }
.tut-grid { display: grid; gap: 22px; grid-template-columns: 1fr; padding-bottom: 20px; }
@media (min-width: 1000px) { .tut-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.tut-list { list-style: none; display: grid; gap: 12px; margin-bottom: 20px; }
.tut-list li { background: var(--page); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.tut-list strong { color: var(--deep); }
.tut-price h2 { margin-bottom: .3em; }
.tut-price input[type=range] { width: 100%; accent-color: var(--ink); }
.tut-total { font: 800 1.6rem var(--hand); color: var(--deep); margin: 6px 0 0; }
.tut-total span { color: var(--ink); }
.tut-role { display: flex; width: 100%; margin-bottom: 10px; }
.tut-role button { font-size: 1.02rem; }
.tut-role button[aria-selected=true] { background: #fff; color: var(--deep); box-shadow: 0 1px 3px rgba(27, 30, 56, .18); }
.tut-mode { margin-bottom: 16px; flex-wrap: wrap; }
.tut-mode button[hidden] { display: none; }
.tut-mode button[aria-selected=true] { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 700; }
.tut-role-note { background: var(--hi-soft); border-radius: 10px; padding: 10px 12px; margin: 0; }
#t-grade { display: flex; }
#t-grade button { min-width: 48px; }
.tut-book .stack-form label { display: grid; gap: 4px; }
.tut-sum { background: var(--hi-soft); border-radius: 10px; padding: 10px 12px; }
.form-err { color: var(--margin); font-weight: 700; min-height: 1.2em; margin: 0; }
.form-err:empty { display: none; }
.tut-sub-h { margin: 0; font-size: 1.15rem; }
#t-fg-ok:empty { display: none; }
.tut-preview-note { margin: 14px 0 0; border-top: 1px solid var(--line); padding-top: 12px; }
.tut-accounts { list-style: none; display: grid; gap: 8px; }
.tut-acct { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; background: var(--page);
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.tut-acct:hover { border-color: var(--ink); }
.tut-acct > span:last-child { display: grid; }

/* ---------- hub: full-height app ---------- */
body.hub-on .foot { display: none; }
body.hub-on .view[data-view=tutors] { padding-bottom: 0; }
.hub {
  display: grid; grid-template-columns: 72px 240px minmax(0, 1fr) 240px;
  height: calc(100vh - var(--top-h)); height: calc(100dvh - var(--top-h));
  background: var(--d-chat); color: var(--d-text); font-size: 16px; line-height: 1.375; overflow: hidden; position: relative;
}
.hub.members-hidden { grid-template-columns: 72px 240px minmax(0, 1fr) 0; }
.hub.members-hidden .hub-members { display: none; }
.hub[hidden] { display: none; }
.hub button { cursor: pointer; background: none; border: 0; color: inherit; font: inherit; padding: 0; }
.hub :focus-visible { outline: 2px solid var(--d-accent); outline-offset: 1px; }
.hub h2, .hub h3, .hub h4 { color: var(--d-strong); font-family: var(--body); }
.hub a { color: var(--d-link); }

/* server rail */
.hub-rail { background: var(--d-rail); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0; overflow-y: auto; scrollbar-width: none; }
.hub-rail-item { position: relative; width: 72px; display: flex; justify-content: center; }
.hub-pill { position: absolute; left: 0; top: 50%; width: 4px; height: 0; border-radius: 0 4px 4px 0; background: var(--d-strong); transform: translateY(-50%); transition: height .15s; }
.hub-rail-item.unread .hub-pill { height: 8px; }
.hub-rail-item:hover .hub-pill { height: 20px; }
.hub-rail-item.active .hub-pill { height: 40px; }
.hub-rail-btn { width: 48px; height: 48px; border-radius: 50%; background: var(--d-high) !important; color: var(--d-strong) !important;
  display: grid; place-items: center; font-weight: 700 !important; font-size: .95rem !important; transition: border-radius .15s, background .15s; }
.hub-rail-btn:hover, .hub-rail-item.active .hub-rail-btn { border-radius: 16px; background: var(--d-accent) !important; }
.hub-home { color: #c9c6ff !important; }
.hub-rail-item.active .hub-home, .hub-home:hover { color: #fff !important; }
.hub-add { color: var(--d-green) !important; font-size: 1.6rem !important; font-weight: 400 !important; }
.hub-add:hover { background: var(--d-green) !important; color: #fff !important; border-radius: 16px; }
.hub-rail-sep { width: 32px; height: 2px; border-radius: 1px; background: var(--d-line); flex: none; }
.hub-badge { background: var(--d-red); color: #fff; font: 700 .72rem/16px var(--body); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; text-align: center; }
.hub-rail-item .hub-badge { position: absolute; right: 10px; bottom: -2px; box-shadow: 0 0 0 3px var(--d-rail); min-width: 20px; height: 20px; line-height: 20px; border-radius: 10px; }

/* channel sidebar */
.hub-side { background: var(--d-side); display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--d-line); }
.hub-side-head { height: 48px; flex: none; display: flex; align-items: center; padding: 0 8px; border-bottom: 1px solid var(--d-line); }
.hub-srv-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 6px 8px !important; border-radius: 6px;
  font-weight: 700 !important; color: var(--d-strong) !important; }
.hub-srv-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-srv-btn:hover { background: var(--d-hover) !important; }
.hub .hub-find { width: 100%; min-height: 0; background: var(--d-rail); border: 0; color: var(--d-text); border-radius: 6px; padding: 6px 8px; font-size: .88rem; }
.hub-channels { flex: 1; overflow-y: auto; padding: 8px 8px 12px; scrollbar-width: thin; scrollbar-color: var(--d-rail) transparent; }
.hub-cat { display: flex; align-items: center; gap: 2px; width: 100%; padding: 16px 4px 4px 2px !important; color: var(--d-icon) !important;
  font-size: .75rem !important; font-weight: 700 !important; letter-spacing: .02em; text-transform: uppercase; text-align: left; }
.hub-cat:hover { color: var(--d-text) !important; }
.hub-cat svg { flex: none; transition: transform .15s; }
.hub-cat.shut svg { transform: rotate(-90deg); }
.hub-cat > span:first-of-type { flex: 1; }
.hub-cat-add { font-size: 1.15rem; line-height: 1; padding: 0 4px; }
.hub-ch { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 34px; padding: 6px 8px !important; margin: 1px 0;
  border-radius: 6px; color: var(--d-icon) !important; text-align: left; position: relative; }
.hub-ch:hover { background: var(--d-hover) !important; color: var(--d-subtle) !important; }
.hub-ch.active { background: var(--d-active) !important; color: var(--d-strong) !important; }
.hub-ch.unread { color: var(--d-strong) !important; font-weight: 700; }
.hub-ch.unread:not(.active)::before { content: ''; position: absolute; left: -8px; top: 50%; width: 4px; height: 8px; margin-top: -4px; border-radius: 0 4px 4px 0; background: var(--d-strong); }
.hub-ch-ico { width: 20px; text-align: center; font-size: 1.3rem; line-height: 1; color: var(--d-icon); position: relative; flex: none; }
.hub-ch-ico .lock { position: absolute; right: -2px; top: -2px; background: var(--d-side); border-radius: 2px; }
.hub-ch-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: grid; }
.hub-ch.dm { min-height: 42px; }
.hub-ch.hub-centre { min-height: 42px; }
.hub-centre-ic { flex: none; width: 32px; height: 32px; border-radius: 10px; display: inline-grid; place-items: center; font-size: .72rem; font-weight: 700; color: #fff; background: #4b5bd6; }
.hub-sub { font-size: .75rem; color: var(--d-muted); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-empty { color: var(--d-muted); font-size: .85rem; padding: 4px 8px; margin: 0; }

/* me panel */
.hub-me { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px; background: rgba(0, 0, 0, .22); }
.hub-me-txt { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.hub-me-txt strong { color: var(--d-strong); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-me-txt span { color: var(--d-muted); font-size: .76rem; }
.hub-ico { width: 34px; height: 34px; display: grid !important; place-items: center; border-radius: 6px; color: var(--d-subtle) !important; flex: none; }
.hub-ico:hover { background: var(--d-hover) !important; color: var(--d-strong) !important; }
.hub-ico[aria-pressed=true] { color: var(--d-strong) !important; }

/* avatars */
.hub-av { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-weight: 700; font-size: .95rem; flex: none; user-select: none; }
.hub-av.sm { width: 32px; height: 32px; font-size: .8rem; }
.hub-av.xs { width: 16px; height: 16px; font-size: .5rem; }
.hub-av.lg { width: 68px; height: 68px; font-size: 1.6rem; }
.hub-av.xl { width: 80px; height: 80px; font-size: 1.8rem; box-shadow: 0 0 0 6px var(--d-side); }
.hub-av-wrap { position: relative; display: inline-flex; flex: none; }
.hub-dot { position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; border-radius: 50%; background: var(--d-icon);
  box-shadow: 0 0 0 3px var(--d-side); }
.hub-dot::after { content: ''; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--d-side); }
.hub-dot.on { background: var(--d-green); }
.hub-dot.on::after { display: none; }
.hub-me .hub-dot { box-shadow: 0 0 0 3px #151518; }

/* chat */
.hub-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--d-chat); }
.hub-chat-head { height: 48px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--d-line); }
.hub-chat-head h2 { font-size: 1rem; margin: 0; white-space: nowrap; }
.hub-hash { color: var(--d-icon); font-size: 1.5rem; line-height: 1; }
.hub-topic { flex: 1; min-width: 0; color: var(--d-muted); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--d-line); }
.hub-topic:empty { border: 0; }
.hub-burger { display: none !important; font-size: 1.3rem !important; }
.hub-note { margin: 8px 16px 0; padding: 8px 12px; border-radius: 8px; background: var(--d-high); color: var(--d-subtle); font-size: .88rem; border-left: 3px solid var(--d-yellow); }
.hub-link { color: var(--d-link) !important; text-decoration: underline; }
.hub-msgs { flex: 1; overflow-y: auto; padding: 0 0 20px; scrollbar-width: thin; scrollbar-color: var(--d-rail) transparent; overflow-wrap: anywhere; }
.hub-intro { padding: 32px 16px 8px; }
.hub-intro h3 { font-size: 2rem; margin: 8px 0 4px; font-family: var(--hand); }
.hub-intro p { color: var(--d-muted); margin: 0; }
.hub-intro-ico { width: 68px; height: 68px; border-radius: 50%; background: var(--d-higher); display: inline-grid; place-items: center; font-size: 2.6rem; color: var(--d-strong); }
.hub-day, .hub-new { display: flex; align-items: center; margin: 24px 16px 8px; height: 0; border-top: 1px solid var(--d-line); justify-content: center; }
.hub-day span { background: var(--d-chat); padding: 0 6px; font-size: .75rem; font-weight: 700; color: var(--d-muted); transform: translateY(-1px); }
.hub-new { border-color: var(--d-red); justify-content: flex-end; margin-right: 0; }
.hub-new span { background: var(--d-red); color: #fff; font-size: .65rem; font-weight: 700; text-transform: uppercase; padding: 1px 6px 1px 8px; border-radius: 6px 0 0 6px; transform: translateY(-1px); }

.hub-msg { position: relative; padding: 2px 48px 2px 72px; min-height: 22px; }
.hub-msg.head { margin-top: 17px; padding-top: 2px; }
.hub-msg:hover { background: rgba(0, 0, 0, .1); }
.hub-msg.mentioned { background: var(--d-hl); }
.hub-msg.mentioned::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--d-hl-bar); }
.hub-av-btn { position: absolute; left: 16px; top: 4px; border-radius: 50%; }
.hub-reply-ref + .hub-av-btn { top: 26px; }
.hub-msg-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hub-name { font-weight: 700 !important; color: var(--d-strong); }
.hub-name:hover { text-decoration: underline; }
.hub-msg-head time { font-size: .75rem; color: var(--d-muted); }
.hub-bot { background: var(--d-accent); color: #fff; font-size: .62rem; font-weight: 700; padding: 1px 4px; border-radius: 3px; align-self: center; }
.hub-gutter { position: absolute; left: 0; width: 64px; text-align: right; top: 5px; font-size: .68rem; color: var(--d-muted); opacity: 0; }
.hub-msg:hover .hub-gutter { opacity: 1; }
.hub-body { color: var(--d-text); white-space: normal; }
.hub-body code { background: var(--d-rail); border-radius: 4px; padding: 1px 4px; font-size: .86em; font-family: ui-monospace, Consolas, monospace; }
.hub-body pre { background: var(--d-side); border: 1px solid var(--d-line); border-radius: 6px; padding: 8px 10px; margin: 4px 0; overflow-x: auto; max-width: 90ch; }
.hub-body pre code { background: none; padding: 0; }
.hub-quote { display: block; border-left: 4px solid var(--d-icon); padding-left: 10px; }
.hub-mention { background: var(--d-mention-bg); color: var(--d-mention-fg) !important; border-radius: 3px; padding: 0 2px; font-weight: 600; text-decoration: none; }
.hub-mention.me { background: rgba(240, 178, 50, .2); color: #fbd88a !important; }
.hub-spoiler { background: var(--d-rail); color: transparent; border-radius: 3px; cursor: pointer; }
.hub-spoiler:focus, .hub-spoiler:hover { color: inherit; background: var(--d-higher); }
.hub-edited { font-size: .65rem; color: var(--d-muted); }
.hub-reply-ref { display: flex; align-items: center; gap: 4px; font-size: .84rem; color: var(--d-subtle); margin: 0 0 2px; position: relative; overflow: hidden; white-space: nowrap; }
.hub-reply-ref::before { content: ''; position: absolute; left: -36px; top: 50%; width: 32px; height: 12px; border: 2px solid var(--d-icon); border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.hub-reply-ref strong { color: var(--d-strong); font-weight: 600; }
.hub-reply-ref span { overflow: hidden; text-overflow: ellipsis; }
.hub-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.hub-react { display: inline-flex !important; align-items: center; gap: 5px; padding: 2px 7px !important; border-radius: 8px; background: var(--d-high) !important;
  border: 1px solid transparent !important; font-size: .9rem !important; }
.hub-react span { font-size: .8rem; font-weight: 700; color: var(--d-subtle); }
.hub-react.on { background: var(--d-mention-bg) !important; border-color: var(--d-accent) !important; }
.hub-react.on span { color: var(--d-mention-fg); }
.hub-tools { position: absolute; right: 16px; top: -16px; display: none; background: var(--d-high); border: 1px solid var(--d-line); border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3); padding: 2px; z-index: 2; }
.hub-msg:hover .hub-tools, .hub-msg:focus-within .hub-tools { display: flex; }
/* touch screens: hover sticks after a tap, so the toolbar opens on a tap and closes on the next */
@media (hover: none) {
  .hub-msg:hover .hub-tools, .hub-msg:focus-within .hub-tools { display: none; }
  .hub-msg.sel .hub-tools { display: flex; }
  .hub-msg:hover { background: none; }
  .hub-msg.sel { background: rgba(0, 0, 0, .14); }
  .hub-msg.mentioned:hover { background: var(--d-hl); }
}
.hub-tools button { width: 32px; height: 32px; display: grid !important; place-items: center; border-radius: 6px; color: var(--d-subtle) !important; font-size: 1.05rem; }
.hub-tools button:hover { background: var(--d-hover) !important; color: var(--d-strong) !important; }
.hub-tools button.danger:hover { color: var(--d-red) !important; }
.hub-picker { position: absolute; right: 16px; top: 20px; z-index: 3; display: flex; gap: 2px; padding: 6px; background: var(--d-higher); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.hub-picker button { font-size: 1.3rem; width: 36px; height: 36px; border-radius: 6px; }
.hub-picker button:hover { background: var(--d-hover) !important; }
.hub-edit-box { width: 100%; background: var(--d-high); color: var(--d-text); border: 0; border-radius: 8px; padding: 10px 12px; resize: vertical; font: inherit; }
.hub-edit .small { color: var(--d-muted); font-size: .75rem; }

/* composer */
.hub-compose { flex: none; padding: 0 16px 4px; position: relative; }
.hub-compose[hidden] { display: none; }
.hub-replying { display: flex; align-items: center; justify-content: space-between; background: var(--d-side); color: var(--d-subtle); font-size: .84rem;
  padding: 4px 4px 4px 14px; border-radius: 8px 8px 0 0; }
.hub-replying strong { color: var(--d-strong); }
.hub-replying .hub-ico { width: 24px; height: 24px; font-size: 1.1rem; }
.hub-replying:not([hidden]) + .hub-compose-row { border-radius: 0 0 8px 8px; }
#hub-input { display: block; width: 100%; resize: none; background: var(--d-high); color: var(--d-text); border: 1px solid var(--d-line); border-radius: 8px;
  padding: 11px 16px; font: inherit; line-height: 1.375; max-height: 220px; min-height: 44px; }
#hub-input::placeholder { color: var(--d-muted); }
#hub-input:focus, #hub-input:focus-visible { outline: none; box-shadow: none; border-color: rgba(151, 151, 159, .35); }
.hub-edit-box:focus, .hub-find:focus, .hub-form input:focus { outline: none; box-shadow: 0 0 0 2px var(--d-accent); }
#hub-input, .hub-edit-box, .hub-find, .hub-form input { min-height: 0; }
.hub-edit-box { min-height: 60px; }
#hub-input:disabled { cursor: not-allowed; opacity: .7; }
.hub-typing { height: 22px; font-size: .78rem; color: var(--d-subtle); display: flex; align-items: center; gap: 6px; }
.hub-typing strong { color: var(--d-strong); }
.hub-dots { display: inline-flex; gap: 3px; }
.hub-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--d-subtle); animation: hub-blink 1.2s infinite; }
.hub-dots i:nth-child(2) { animation-delay: .15s; } .hub-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes hub-blink { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }

/* member list */
.hub-members { background: var(--d-side); overflow-y: auto; padding: 8px 8px 16px; border-left: 1px solid var(--d-line); scrollbar-width: thin; scrollbar-color: var(--d-rail) transparent; }
.hub-mhead { font: 700 .75rem var(--body) !important; text-transform: uppercase; letter-spacing: .02em; color: var(--d-icon) !important; margin: 16px 8px 4px; }
.hub-seats { margin: 8px; font-size: .8rem; color: var(--d-subtle); background: var(--d-high); border-radius: 6px; padding: 6px 8px; }
.hub-member { display: flex !important; align-items: center; gap: 10px; width: 100%; padding: 5px 8px !important; border-radius: 6px; text-align: left; }
.hub-member > span:last-child { display: grid; min-width: 0; }
.hub-member:hover { background: var(--d-hover) !important; }
.hub-member.off { opacity: .45; }
.hub-member.off:hover { opacity: 1; }
.hub-mname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* profile card (members pane in DMs, and modal) */
.hub-profile { position: relative; padding: 60px 14px 14px; background: var(--d-side); border-radius: 8px; overflow: hidden; }
.hub-profile-band { position: absolute; left: 0; right: 0; top: 0; height: 64px; opacity: .85; }
.hub-profile .hub-av-wrap { position: relative; margin-top: -26px; }
.hub-profile .hub-dot { width: 20px; height: 20px; box-shadow: 0 0 0 4px var(--d-side); }
.hub-profile h3 { margin: 10px 0 0; font-size: 1.25rem; color: var(--d-strong); font-family: var(--body); }
.hub-profile h4 { font-family: var(--body); }
.hub-modal button.hub-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.hub-profile h4 { margin: 14px 0 2px; font-size: .75rem; text-transform: uppercase; color: var(--d-subtle); }
.hub-profile p { margin: 0; color: var(--d-text); font-size: .9rem; }
.hub-profile .hub-btn { margin-top: 16px; width: 100%; }

/* modal */
.hub-modal { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .7); display: grid; place-items: center; padding: 16px; }
.hub-modal[hidden] { display: none; }
.hub-modal-card { background: var(--d-chat); color: var(--d-text); border-radius: 12px; padding: 22px; width: min(440px, 100%); max-height: 90vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
.hub-modal-card h2 { color: var(--d-strong); font-size: 1.35rem; }
.hub-modal-card p { color: var(--d-subtle); }
.hub-modal-card .hub-profile { margin: -22px -22px 0; border-radius: 12px 12px 0 0; }
.hub-modal-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.hub-btn, .hub .hub-btn { background: var(--d-accent); color: #fff; border: 0; border-radius: 8px; padding: 10px 16px; font: 600 .95rem var(--body); cursor: pointer; min-height: 40px; }
.hub-btn:hover, .hub .hub-btn:hover { background: var(--d-accent-2); }
.hub-btn.ghost, .hub .hub-btn.ghost { background: var(--d-high); color: var(--d-text); }
.hub-btn.ghost:hover { background: var(--d-higher); }
.hub-code { background: var(--d-rail); color: var(--d-strong); padding: 3px 8px; border-radius: 6px; font: 700 1rem ui-monospace, Consolas, monospace; letter-spacing: .06em; }
.hub-bill { display: flex; justify-content: space-between; gap: 10px; background: var(--d-side); border-radius: 8px; padding: 12px 14px; color: var(--d-text) !important; }
.hub-bill strong { color: var(--d-strong); }
.hub-set { border-top: 1px solid var(--d-line); padding-top: 12px; margin-top: 12px; }
.hub-set h4 { margin: 0 0 6px; font-size: .75rem; text-transform: uppercase; color: var(--d-subtle); }
.hub-seat-row { display: flex; align-items: center; gap: 12px; margin: 6px 0; }
.hub-seat-row .hub-btn { width: 40px; padding: 0; font-size: 1.2rem; }
.hub-seat-row strong { font-size: 1.3rem; color: var(--d-strong); min-width: 2ch; text-align: center; }
.hub-form { display: grid; gap: 12px; }
.hub-form label { display: grid; gap: 6px; font-size: .75rem; font-weight: 700; text-transform: uppercase; color: var(--d-subtle); }
.hub-modal .hub-form input { min-height: 0; background: var(--d-rail); border: 0; color: var(--d-text); border-radius: 6px; padding: 10px; font: 400 1rem var(--body); text-transform: none; }
.hub-scrim { display: none; }
.hub-cat-tag { flex: none !important; font-size: .6rem; padding: 1px 5px; border-radius: 4px; background: var(--d-high); color: var(--d-subtle); letter-spacing: .04em; margin-right: 4px; }
.hub-note.good { border-left-color: var(--d-green); }
.hub-pay-note { margin-top: 12px !important; padding: 8px 10px; border-radius: 6px; background: rgba(35, 165, 90, .14); border-left: 3px solid var(--d-green); font-size: .85rem !important; }
.hub-dm-note { margin-top: 14px !important; white-space: normal; }
.hub-grades { border: 0; padding: 0; margin: 0; }
.hub-grades legend { font-size: .75rem; font-weight: 700; text-transform: uppercase; color: var(--d-subtle); margin-bottom: 6px; }
.hub-grades > div { display: flex; flex-wrap: wrap; gap: 6px; }
.hub-check { display: inline-flex !important; cursor: pointer; }
.hub-modal .hub-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hub-check span { display: grid; place-items: center; min-width: 44px; height: 40px; padding: 0 10px; border-radius: 8px; background: var(--d-rail); color: var(--d-text); font-size: .95rem; text-transform: none; }
.hub-check input:checked + span { background: var(--d-accent); color: #fff; }
.hub-check input:focus-visible + span { outline: 2px solid var(--d-accent); outline-offset: 2px; }

/* ---------- tablet: member list becomes a drawer ---------- */
@media (max-width: 1099px) {
  .hub, .hub.members-hidden { grid-template-columns: 72px 220px minmax(0, 1fr); }
  .hub-members { display: block !important; position: absolute; right: 0; top: 48px; bottom: 0; width: 260px; z-index: 6;
    transform: translateX(100%); transition: transform .2s; box-shadow: -8px 0 24px rgba(0, 0, 0, .3); }
  .hub.members-open .hub-members { transform: none; }
  .hub-ico[aria-pressed=true] { color: var(--d-subtle) !important; }
}
/* ---------- phone: servers + channels become a drawer, like the Discord app ---------- */
@media (max-width: 760px) {
  .hub, .hub.members-hidden { grid-template-columns: minmax(0, 1fr); height: calc(100vh - var(--top-h) - var(--bar-h)); height: calc(100dvh - var(--top-h) - var(--bar-h) - env(safe-area-inset-bottom)); }
  .hub-rail, .hub-side { position: absolute; top: 0; bottom: 0; z-index: 7; transition: transform .2s; }
  .hub-rail { left: 0; width: 72px; transform: translateX(-312px); }
  .hub-side { left: 72px; width: min(240px, calc(100vw - 112px)); transform: translateX(-312px); }
  .hub.drawer-open .hub-rail, .hub.drawer-open .hub-side { transform: none; }
  .hub-burger { display: grid !important; margin-left: -8px; }
  .hub-chat-head { padding-left: 8px; }
  .hub-topic { display: none; }
  .hub-chat-head h2 { flex: 1; overflow: hidden; text-overflow: ellipsis; }
  .hub-scrim { position: absolute; inset: 0; z-index: 5; background: rgba(0, 0, 0, .5); }
  .hub.drawer-open .hub-scrim, .hub.members-open .hub-scrim { display: block; }
  .hub-msg { padding-right: 12px; padding-left: 64px; }
  .hub-av-btn { left: 12px; }
  .hub-gutter { width: 56px; }
  .hub-tools { right: 8px; }
  .hub-compose { padding: 0 8px 2px; }
  .hub-intro h3 { font-size: 1.6rem; }
  .hub-members { top: 48px; width: min(280px, 85vw); }
}
@media (prefers-reduced-motion: reduce) { .hub-dots i { animation: none; } }
.hub-legend-note { text-transform: none; font-weight: 400; color: var(--d-muted); }
.hub-modal .hub-form select { min-height: 0; background: var(--d-rail); border: 0; color: var(--d-text); border-radius: 6px; padding: 10px; font: 400 1rem var(--body); text-transform: none; }
.hub-modal-row.hub-left { justify-content: flex-start; margin-top: 4px; }

/* ---------- create / edit channels (Discord style) ---------- */
@media (min-width: 761px) { .hub-side { position: relative; } }   /* phones: it is an absolute drawer */
.hub-menu { position: absolute; top: 52px; left: 8px; right: 8px; z-index: 9; background: #111214; border-radius: 8px; padding: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5); display: grid; gap: 2px; }
.hub-menu[hidden] { display: none; }
.hub-menu button { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 8px !important;
  border-radius: 4px; color: var(--d-subtle) !important; font-size: .88rem !important; font-weight: 600 !important; text-align: left; }
.hub-menu button:hover, .hub-menu button:focus-visible { background: var(--d-accent) !important; color: #fff !important; }
.hub-menu-sep { height: 1px; background: var(--d-line); margin: 4px 6px; }
.hub-gear { display: none; place-items: center; width: 20px; height: 20px; color: var(--d-icon); flex: none; border-radius: 4px; }
.hub-gear svg { width: 16px; height: 16px; }
.hub-gear:hover { color: var(--d-strong); }
.hub-ch:hover .hub-gear, .hub-ch.active .hub-gear, .hub-ch:focus-visible .hub-gear, .hub-cat:hover .hub-gear { display: grid; }
@media (hover: none) { .hub-ch.active .hub-gear, .hub-cat .hub-gear { display: grid; } }
.hub-cat-add { border-radius: 4px; }
.hub-cat-add:hover { color: var(--d-strong); }
.hub-ch-new { color: var(--d-subtle) !important; font-size: .9rem; margin-top: 8px !important; }
.hub-modal-sub { margin: -6px 0 14px; color: var(--d-muted) !important; }
.hub-modal .hub-form select { width: 100%; }
.hub-hash-input { display: flex; align-items: center; background: var(--d-rail); border-radius: 6px; padding-left: 10px; text-transform: none; }
.hub-hash-input > span { color: var(--d-icon); font-size: 1.2rem; font-weight: 400; }
.hub-modal .hub-hash-input input { flex: 1; background: none !important; padding-left: 6px !important; }
.hub-acc { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.hub-acc legend { font-size: .75rem; font-weight: 700; text-transform: uppercase; color: var(--d-subtle); margin-bottom: 6px; }
#hub-acc { display: grid; gap: 6px; }
.hub-radio { display: flex !important; gap: 10px; align-items: flex-start; background: var(--d-side); border-radius: 8px; padding: 10px 12px; cursor: pointer;
  text-transform: none !important; font-weight: 400 !important; font-size: .9rem !important; color: var(--d-text) !important; border: 1px solid transparent; }
.hub-radio:has(input:checked) { border-color: var(--d-accent); background: var(--d-high); }
.hub-radio input { margin-top: 3px; accent-color: var(--d-accent); min-height: 0; }
.hub-radio span { display: grid; gap: 2px; }
.hub-radio strong { color: var(--d-strong); }
.hub-radio small { color: var(--d-muted); font-size: .8rem; }
.hub-pick { background: var(--d-side); border-radius: 8px; padding: 8px; max-height: 200px; overflow-y: auto; display: grid; gap: 2px; }
.hub-pick[hidden] { display: none; }
.hub-pick-h { font-size: .75rem; color: var(--d-muted); padding: 2px 4px 4px; }
.hub-pick-row { display: flex !important; align-items: center; gap: 8px; padding: 6px !important; border-radius: 6px; cursor: pointer; text-transform: none !important;
  font-weight: 500 !important; font-size: .9rem !important; color: var(--d-text) !important; }
.hub-pick-row:hover { background: var(--d-hover); }
.hub-pick-row input { accent-color: var(--d-accent); min-height: 0; }
.hub-btn.danger { background: transparent; color: var(--d-red); }
.hub-btn.danger:hover { background: var(--d-red); color: #fff; }
.hub-push { margin-right: auto; }
.hub-modal .hub-hash-input input:focus { box-shadow: none !important; }
.hub-hash-input:focus-within { box-shadow: 0 0 0 2px var(--d-accent); }

/* ================= teaching tools (js/teach.js) ================= */
/* composer: [+] message [mic], one rounded box like Discord */
.hub-compose-row { position: relative; display: flex; align-items: flex-end; background: var(--d-high); border: 1px solid var(--d-line); border-radius: 8px; }
.hub-compose-row:focus-within { border-color: rgba(151, 151, 159, .35); }
.hub-compose-row #hub-input { border: 0; background: none; flex: 1; min-width: 0; padding-left: 12px; }
.hub-compose-row #hub-plus:not([hidden]) + .hub-plus-menu + #hub-input { padding-left: 4px; }
.hub-cbtn { flex: none; width: 44px; height: 44px; display: grid !important; place-items: center; color: var(--d-subtle) !important; border-radius: 8px; }
.hub-cbtn:hover { color: var(--d-strong) !important; }
.hub-cbtn[hidden] { display: none !important; }
.hub-send { color: #8f8cf5 !important; }   /* phone keyboards often turn Enter into a new line, so sending needs a button */
#hub-plus[aria-expanded=true] { color: var(--d-strong) !important; }
#hub-plus[aria-expanded=true] svg { transform: rotate(45deg); }
#hub-plus svg { transition: transform .15s; }
.hub-plus-menu { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 8; width: min(300px, calc(100vw - 32px)); background: #111214; border-radius: 10px; padding: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5); display: grid; gap: 2px; }
.hub-plus-menu[hidden] { display: none; }
.hub-plus-menu button { display: flex !important; align-items: center; gap: 12px; padding: 8px !important; border-radius: 6px; text-align: left; }
.hub-plus-menu button:hover, .hub-plus-menu button:focus-visible { background: var(--d-hover) !important; outline: none; }
.hub-plus-menu strong { display: block; color: var(--d-strong); font-size: .95rem; }
.hub-plus-menu small { display: block; color: var(--d-muted); font-size: .78rem; }
.tc-mico { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; background: var(--tc, var(--d-accent)); }
.tc-k-quiz { --tc: #8e6fe0; } .tc-k-lesson { --tc: #23a55a; } .tc-k-task { --tc: #e8a33d; } .tc-k-board { --tc: #4d96ee; }

/* recording bar replaces the message box */
.hub-compose.recording #hub-input, .hub-compose.recording .hub-cbtn { display: none !important; }
.hub-rec { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; }
.hub-rec[hidden] { display: none; }
.tc-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--d-red); animation: tc-pulse 1s infinite; flex: none; }
@keyframes tc-pulse { 50% { opacity: .3; } }
.tc-rec-time { font-variant-numeric: tabular-nums; color: var(--d-strong); font-weight: 700; min-width: 3.2em; }
.tc-rec-lv { flex: 1; display: flex; align-items: center; gap: 2px; height: 26px; overflow: hidden; }
.tc-rec-lv i { flex: 1; min-width: 2px; max-width: 4px; background: var(--d-red); border-radius: 2px; height: 10%; transition: height .1s; }
.tc-rec-max { color: var(--d-muted); font-size: .75rem; }
.tc-rec-x { color: var(--d-subtle) !important; }
.tc-rec-x:hover { color: var(--d-red) !important; }
.tc-rec-send { width: 38px; height: 38px; border-radius: 50%; background: var(--d-accent) !important; color: #fff !important; display: grid !important; place-items: center; flex: none; }
.tc-rec-send:hover { background: var(--d-accent-2) !important; }

/* cards in the chat */
.hub-msg.flash { animation: tc-flash 1.8s ease; }
@keyframes tc-flash { 0%, 40% { background: rgba(109, 104, 232, .22); } }
.tc { margin: 4px 0 2px; max-width: 480px; background: var(--d-side); border: 1px solid var(--d-line); border-left: 4px solid var(--tc, var(--d-accent)); border-radius: 8px; padding: 10px 14px 12px; }
.tc-quiz { --tc: #8e6fe0; } .tc-lesson { --tc: #23a55a; } .tc-task { --tc: #e8a33d; } .tc-board { --tc: #4d96ee; }
.tc-head { display: flex; align-items: center; gap: 6px; color: var(--tc); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.tc-extra { margin-left: auto; color: var(--d-muted); text-transform: none; letter-spacing: 0; font-weight: 600; text-align: right; }
.tc h4 { margin: 2px 0 2px; font-size: 1.05rem; color: var(--d-strong); }
.tc-q { margin: 2px 0 10px; color: var(--d-strong); font-weight: 600; font-size: 1.02rem; }
.tc-when, .tc-foot, .tc-note { margin: 6px 0 0; color: var(--d-muted); font-size: .84rem; }
.tc-foot .hub-link { font-size: inherit; }
.tc-status { margin: 6px 0 0; color: var(--d-text); font-weight: 600; font-size: .9rem; }
.tc-lesson[data-lstate=open] .tc-status { color: var(--d-green); }
.tc-lesson[data-lstate=cancelled] h4, .tc-lesson[data-lstate=over] h4 { color: var(--d-muted); }
.tc-lesson[data-lstate=cancelled] h4 { text-decoration: line-through; }
.tc-body { color: var(--d-text); margin: 4px 0 0; }
.tc-good { color: var(--d-green); }
.tc-warn { color: var(--d-yellow); }
.tc-live, .tc-pill { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; border-radius: 4px; padding: 2px 6px; }
.tc-live { background: var(--d-red); color: #fff; }
.tc-row-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.hub a.hub-btn, .hub-modal a.hub-btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: #fff; }
.hub a.hub-btn.ghost { color: var(--d-text); }
.tc-join svg { flex: none; }

/* quiz answers */
.tc-answers { display: grid; gap: 6px; }
.tc-ans { position: relative; display: flex !important; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 42px; padding: 8px 12px !important;
  border-radius: 6px; background: var(--d-high) !important; border: 1px solid var(--d-line) !important; color: var(--d-text) !important; text-align: left; overflow: hidden; isolation: isolate; }
button.tc-ans:hover { border-color: var(--tc, var(--d-accent)) !important; background: var(--d-higher) !important; }
div.tc-ans::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: rgba(142, 111, 224, .22); z-index: -1; transition: width .4s; }
.tc-ans.picked { border-color: var(--d-accent) !important; }
.tc-ans.right { border-color: var(--d-green) !important; }
.tc-ans.right::before { background: rgba(35, 165, 90, .26) !important; }
.tc-ans.right .tc-ans-txt::after { content: '  \2713'; color: var(--d-green); font-weight: 700; }
.tc-ans.wrong { border-color: var(--d-red) !important; }
.tc-ans.wrong::before { background: rgba(242, 63, 67, .2) !important; }
.tc-ans-n { font-weight: 700; color: var(--d-strong); font-size: .88rem; flex: none; }
.tc-who { margin-top: 8px; border-top: 1px solid var(--d-line); padding-top: 6px; font-size: .84rem; }
.tc-who p { margin: 2px 0; color: var(--d-subtle); }

/* voice note */
.tc-voice { display: inline-flex; align-items: center; gap: 10px; margin: 2px 0; padding: 6px 10px 6px 6px; border-radius: 22px; background: var(--d-side); border: 1px solid var(--d-line); max-width: 100%; }
.tc-play { width: 34px; height: 34px; border-radius: 50%; background: var(--d-accent) !important; color: #fff !important; display: grid !important; place-items: center; flex: none; }
.tc-play:hover { background: var(--d-accent-2) !important; }
.tc-bars { display: flex; align-items: center; gap: 2px; height: 28px; width: 150px; }
.tc-bars i { flex: 1; background: var(--d-icon); border-radius: 2px; min-height: 3px; }
.tc-bars i.p { background: var(--d-accent); }
.tc-vtime { font-variant-numeric: tabular-nums; font-size: .82rem; color: var(--d-subtle); min-width: 2.6em; }
.tc-speed { font-size: .75rem !important; font-weight: 700 !important; color: var(--d-subtle) !important; background: var(--d-high) !important; border-radius: 10px; padding: 2px 7px !important; }

/* whiteboard card */
.tc-thumb { position: relative; display: block !important; width: 100%; margin-top: 6px; border-radius: 6px; overflow: hidden; background: #fbfaf6 !important; }
.tc-thumb canvas { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; }
.tc-thumb span { position: absolute; inset: auto 8px 8px auto; background: rgba(27, 30, 56, .85); color: #fff; font-size: .8rem; font-weight: 700; padding: 5px 10px; border-radius: 6px; }
.tc-thumb:hover span { background: var(--d-accent); }

/* homework */
.tc-mark { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-top: 10px; padding: 8px 12px; border-radius: 6px; background: rgba(35, 165, 90, .14); }
.tc-score { font: 800 1.4rem var(--hand); color: var(--d-strong); }
.tc-mark > span:nth-child(2) { color: var(--d-green); font-weight: 700; }
.tc-fb { flex-basis: 100%; margin: 0; color: var(--d-text); font-size: .9rem; }
.tc-brief { background: var(--d-side); border-radius: 8px; padding: 10px 12px; color: var(--d-text); max-height: 160px; overflow-y: auto; }
.tc-sub { background: var(--d-side); border-radius: 8px; padding: 10px 12px; display: grid; gap: 8px; }
.tc-sub-h { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--d-text) !important; }
.tc-sub-h span { margin-left: auto; color: var(--d-muted); font-size: .78rem; }
.tc-sub-a { background: var(--d-rail); border-radius: 6px; padding: 8px 10px; color: var(--d-text); font-size: .9rem; max-height: 180px; overflow-y: auto; white-space: normal; }

/* forms */
.tc-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tc-fs { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.tc-fs legend { font-size: .75rem; font-weight: 700; text-transform: uppercase; color: var(--d-subtle); margin-bottom: 6px; }
.tc-opt { display: flex; align-items: center; gap: 8px; }
.tc-opt input[type=radio], .tc-check input { accent-color: var(--d-green); width: 20px; height: 20px; flex: none; min-height: 0; }
.hub-modal .tc-opt .tc-opt-in { flex: 1; }
.tc-check { display: flex !important; align-items: center; gap: 8px; text-transform: none !important; font-weight: 400 !important; font-size: .9rem !important; color: var(--d-text) !important; }
.tc-add { justify-self: start; font-size: .88rem; }
.hub-modal .hub-form textarea, .hub-modal .hub-form input[type=date], .hub-modal .hub-form input[type=time], .hub-modal .hub-form input[type=number] {
  min-height: 0; background: var(--d-rail); border: 0; color: var(--d-text); border-radius: 6px; padding: 10px; font: 400 1rem var(--body); text-transform: none; width: 100%; resize: vertical; color-scheme: dark; }
.hub-modal .hub-form textarea:focus, .hub-modal .hub-form input:focus { outline: none; box-shadow: 0 0 0 2px var(--d-accent); }

/* live lesson banner */
.tc-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; border-left-color: var(--d-green); }
.tc-banner > span:nth-child(2) { flex: 1; min-width: 160px; }
.tc-banner .tc-row-btns { margin: 0; }
.tc-banner .hub-btn { min-height: 34px; padding: 6px 12px; font-size: .85rem; }
.tc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--d-green); box-shadow: 0 0 0 4px rgba(35, 165, 90, .25); animation: tc-pulse 1.4s infinite; }

/* Lessons & homework list */
.hub-agenda { color: var(--d-subtle) !important; }
.hub-agenda svg { flex: none; margin: 0 4px 0 2px; }
.tc-agenda { padding: 0 16px 24px; }
.tc-agenda .hub-intro { padding-left: 0; padding-right: 0; }
.tc-agenda section { margin-top: 18px; }
.tc-agenda h4 { margin: 0 0 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--d-subtle); }
.tc-agenda .hub-empty { padding: 0; }
.tc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 10px 12px; margin-bottom: 6px; border-radius: 8px; background: var(--d-side); border: 1px solid var(--d-line); }
.tc-row.live { border-color: var(--d-green); }
.tc-row-main { flex: 1; min-width: 180px; display: grid; }
.tc-row-main strong { color: var(--d-strong); }
.tc-row-main span { color: var(--d-muted); font-size: .84rem; }
.tc-row .tc-row-btns { margin: 0; }
.tc-row .hub-btn { min-height: 34px; padding: 6px 12px; font-size: .85rem; }
.tc-pill { background: var(--d-high); color: var(--d-subtle); }
.tc-pill.warn { background: rgba(240, 178, 50, .18); color: var(--d-yellow); }
.tc-pill.bad { background: rgba(242, 63, 67, .18); color: #ff8c8f; }
.tc-pill.good { background: rgba(35, 165, 90, .2); color: #5fd38d; font-size: .82rem; }

/* whiteboard overlay */
body.tb-on { overflow: hidden; }
.tb { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: #2b2d31; color: var(--d-text);
  --d-chat: #202024; --d-accent: #6d68e8; --d-accent-2: #5a55d6; --d-strong: #fbfbfb; --d-muted: #96979e; --d-high: #242429; --d-text: #efeff1; }
.tb[hidden] { display: none; }
.tb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 12px; background: #1a1a1e; border-bottom: 1px solid rgba(151, 151, 159, .12); }
.tb-name { display: grid; min-width: 0; flex: 1 1 140px; }
.tb-name strong { color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-here { font-size: .78rem; color: #96979e; }
.tb-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tb-tools[hidden] { display: none; }
.tb-tools button { width: 40px; height: 40px; border-radius: 8px; border: 0; background: none; color: #c9cad1; cursor: pointer; display: grid; place-items: center; }
.tb-tools button:hover { background: rgba(151, 151, 159, .16); }
.tb-tools button[aria-pressed=true] { background: rgba(109, 104, 232, .35); color: #fff; }
.tb-tools button[hidden] { display: none; }
.tb-color::after { content: ''; width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #fff inset; }
.tb-color[aria-pressed=true]::after { box-shadow: 0 0 0 3px #fff; }
.tb-btn i { display: block; width: var(--s); height: var(--s); border-radius: 50%; background: currentColor; }
.tb-sep { width: 1px; height: 24px; background: rgba(151, 151, 159, .25); margin: 0 4px; }
.tb-done { min-height: 38px; }
.tb-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 8px; }
.tb-stage canvas { background-color: #fbfaf6; background-image: linear-gradient(rgba(27, 30, 56, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(27, 30, 56, .07) 1px, transparent 1px);
  border-radius: 6px; box-shadow: 0 6px 24px rgba(0, 0, 0, .4); touch-action: none; cursor: crosshair; }
.tb-stage canvas.erasing { cursor: cell; }
.tb-view { margin: 0; padding: 8px 12px; text-align: center; color: #96979e; font-size: .85rem; background: #1a1a1e; }
@media (max-width: 760px) {
  .tc-2 { grid-template-columns: 1fr; }
  .tc { max-width: none; }
  .tc-bars { width: 96px; }
  .tc-rec-max { display: none; }
  .tb-bar { padding: 6px 8px; gap: 6px; }
  .tb-tools button { width: 36px; height: 36px; }
  .tb-sep { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tc-rec-dot, .tc-dot, .hub-msg.flash { animation: none; } }


/* ================= connect (js/connect.js): bookings, reviews, rooms, challenges, safety, parents ================= */
.cx-k-booking { --tc: #2aa198; } .cx-k-room { --tc: #4d96ee; } .cx-k-chal { --tc: #e8a33d; } .cx-k-office { --tc: #23a55a; }
.cx-booking { --tc: #2aa198; } .cx-room { --tc: #4d96ee; } .cx-chal { --tc: #e8a33d; } .cx-office { --tc: #23a55a; }
.tc-mico.cx-k-clock, .tc-mico.tc-k-cx-office { --tc: #23a55a; } .tc-mico.tc-k-cx-room { --tc: #4d96ee; } .tc-mico.tc-k-cx-challenge { --tc: #e8a33d; }
.cx-booking[data-bkst=declined] h4, .cx-booking[data-bkst=cancelled] h4 { color: var(--d-muted); text-decoration: line-through; }
.cx-booking[data-bkst=open] .tc-status, .cx-booking[data-bkst=accepted] .tc-status { color: var(--d-green); }
.cx-timer { margin: 8px 0 0; font: 800 1.25rem var(--body); color: var(--d-strong); font-variant-numeric: tabular-nums; }
.cx-live { flex: none; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 5px; border-radius: 4px; background: var(--d-green); color: #fff; }
.cx-office-note { display: flex; align-items: center; gap: 10px; border-left-color: var(--d-green); }
.cx-muted { display: flex; align-items: center; gap: 8px; border-left-color: var(--d-red); }

/* verified tick */
.cx-tick { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--d-accent); color: #fff; margin-left: 4px; vertical-align: -2px; flex: none; }
.cx-tick svg { width: 11px; height: 11px; stroke-width: 3.2; }
.hub-profile h3 .cx-tick { width: 20px; height: 20px; vertical-align: -1px; }
.hub-profile h3 .cx-tick svg { width: 13px; height: 13px; }

/* message tools: saved + helpful */
.hub-tools button.on { color: var(--d-yellow) !important; }
.hub-tools button[data-cx=helpful].on { color: var(--d-green) !important; }
.cx-helpful { display: inline-flex; align-items: center; gap: 5px; margin: 4px 0 0; padding: 2px 8px; border-radius: 6px; background: rgba(35, 165, 90, .16); color: #5fd38d; font-size: .8rem; font-weight: 600; }
.hub-msg.cx-helpful-msg { box-shadow: inset 2px 0 0 var(--d-green); }
.cx-blocked-msg .hub-body { color: var(--d-muted); font-style: italic; }

/* top helpers */
.cx-top .hub-mhead { display: flex; align-items: center; gap: 6px; color: var(--d-yellow) !important; }
.cx-rank { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--d-high); color: var(--d-yellow); font-weight: 800; flex: none; }

/* reviews */
.cx-stars { color: var(--d-yellow); letter-spacing: 1px; }
.cx-reviews { display: grid; gap: 8px; margin-top: 6px; }
.cx-review { background: var(--d-chat); border-radius: 6px; padding: 8px 10px; font-size: .86rem; }
.hub-modal-card .cx-review { background: var(--d-side); }
.cx-review strong { color: var(--d-strong); }
.cx-review-d { float: right; color: var(--d-muted); font-size: .75rem; }
.cx-review p { margin: 4px 0 0 !important; font-size: .86rem !important; }
.cx-reply { padding-left: 8px; border-left: 2px solid var(--d-line); color: var(--d-subtle) !important; }
.cx-starpick { display: flex; gap: 4px; }
.cx-starpick label { cursor: pointer; text-transform: none !important; }
.cx-starpick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cx-starpick span[aria-hidden] { font-size: 2rem; line-height: 1; color: var(--d-icon); transition: color .1s; }
.cx-starpick label:has(~ label input:checked) span[aria-hidden], .cx-starpick label:has(input:checked) span[aria-hidden] { color: var(--d-yellow); }
.cx-starpick:hover label span[aria-hidden] { color: var(--d-yellow); }
.cx-starpick label:hover ~ label span[aria-hidden] { color: var(--d-icon); }
.cx-starpick input:focus-visible + span { outline: 2px solid var(--d-accent); outline-offset: 2px; border-radius: 4px; }
.hub-profile .hub-btn + .hub-btn { margin-top: 8px; }
.hub-profile .cx-block { background: transparent; color: var(--d-muted); min-height: 34px; }
.hub-profile .cx-block:hover { color: var(--d-red); background: var(--d-high); }

/* search */
.hub-modal-card.wide { width: min(620px, 100%); }
.cx-results { display: grid; gap: 4px; margin-top: 8px; max-height: 55vh; overflow-y: auto; }
.cx-hit { display: grid; gap: 2px; width: 100%; text-align: left; background: var(--d-side); border: 1px solid var(--d-line); border-radius: 8px; padding: 8px 10px; color: var(--d-text); cursor: pointer; font: inherit; }
.cx-hit:hover, .cx-hit:focus-visible { border-color: var(--d-accent); }
.cx-hit-h { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .8rem; }
.cx-hit-h strong { color: var(--d-strong); }
.cx-hit-h span { color: var(--d-muted); }
.cx-hit-t { font-size: .9rem; overflow-wrap: anywhere; }
.cx-hit mark { background: rgba(240, 178, 50, .35); color: var(--d-strong); border-radius: 2px; padding: 0 1px; }

/* progress */
.cx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 16px; }
.cx-stats div { background: var(--d-side); border: 1px solid var(--d-line); border-radius: 8px; padding: 10px 12px; display: grid; }
.cx-stats strong { font: 800 1.5rem var(--body); color: var(--d-strong); }
.cx-stats span { color: var(--d-muted); font-size: .78rem; }
.cx-chart { display: block; width: 100%; max-width: 560px; height: auto; margin-top: 14px; background: var(--d-side); border: 1px solid var(--d-line); border-radius: 8px; }
.cx-chart line { stroke: var(--d-line); stroke-width: 1; }
.cx-chart text { fill: var(--d-muted); font-size: 8px; font-family: var(--body); }
.cx-chart polyline { fill: none; stroke: var(--d-accent); stroke-width: 2.5; stroke-linejoin: round; }
.cx-chart circle { fill: var(--d-strong); stroke: var(--d-accent); stroke-width: 2; }
.cx-kid { border-top: 1px solid var(--d-line); padding-top: 6px; }
.cx-kid > h4 { font-size: 1rem !important; color: var(--d-strong) !important; text-transform: none !important; letter-spacing: 0 !important; }
.cx-share { margin-top: 18px; color: var(--d-muted); }
.cx-rep.done { opacity: .6; }
.cx-reasons { display: grid; gap: 6px; }

/* ask a tutor buttons on the study pages */
.ask-row { margin: 10px 0 0; }
.ask-row .link-btn { font-weight: 600; }
#ask-card-row { text-align: center; }

/* study buddies */
.hub-modal .hub-form input#cx-un, .cx-page .cx-bq { min-height: 0; width: 100%; max-width: 420px; background: var(--d-rail); border: 0; color: var(--d-text); border-radius: 6px; padding: 10px 12px; font: 400 1rem var(--body); }
.cx-page .cx-bq:focus { outline: none; box-shadow: 0 0 0 2px var(--d-accent); }
.cx-bres { margin-top: 8px; }
.cx-buddy .hub-av-wrap { align-self: center; }
.cx-buddy .hub-dot { box-shadow: 0 0 0 3px var(--d-side); }
.cx-page .cx-room { max-width: 560px; margin-bottom: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cx-page .tc h4 { text-transform: none; letter-spacing: 0; font-size: 1.05rem; color: var(--d-strong); margin: 2px 0; }

/* classes */
.cx-add-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cx-add { background: var(--d-side); border: 1px solid var(--d-line); border-radius: 8px; padding: 12px 14px; display: grid; gap: 4px; align-content: start; }
.cx-add strong { color: var(--d-strong); }
.cx-add p { margin: 0; }
.cx-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cx-inline .cx-bq { flex: 1 1 160px; min-width: 0; width: auto; }
.cx-page .cx-bq { min-height: 0; background: var(--d-rail); border: 0; color: var(--d-text); border-radius: 6px; padding: 10px 12px; font: 400 1rem var(--body); }

/* ---- quizzes with many questions ---- */
.hub-modal-card.wide { width: min(720px, 100%); }
.tc-qs { display: grid; gap: 12px; }
.tc-qb { border: 1px solid var(--d-high); border-radius: 8px; padding: 10px 12px 12px; margin: 0; display: grid; gap: 8px; min-width: 0; }
.tc-qb legend { padding: 0 6px; font-size: .78rem; font-weight: 700; text-transform: uppercase; color: var(--d-subtle); }
.tc-qb-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tc-qb-top select { width: auto; min-width: 0; }
.tc-qmarks-l { display: flex !important; align-items: center; gap: 6px; flex-direction: row !important; margin: 0 !important; }
.tc-qmarks { width: 72px !important; }
.tc-qdel { margin-left: auto; color: var(--d-red) !important; }
.tc-qopts { display: grid; gap: 6px; }
.tc-qhint { margin: 0; color: var(--d-muted); font-size: .8rem; }
.tc-qm { text-transform: none; font-weight: 600; color: var(--d-muted); margin-left: 4px; }
.tc-qadd { justify-self: start; }
.tc-take-opts { display: grid; gap: 6px; }
.tc-take-text { width: 100%; }
.tc-review-q { gap: 6px; }
.tc-review-q .tc-q { margin: 0; }
.tc-qtxt { margin-left: 0 !important; color: var(--d-text) !important; font-size: .88rem !important; overflow: hidden; text-overflow: ellipsis; }
.tc-fb { margin: 0; padding: 6px 10px; border-left: 3px solid var(--d-accent); color: var(--d-text); font-size: .88rem; }
.tc-qstats { margin: 0 0 10px; padding-left: 18px; color: var(--d-text); font-size: .88rem; columns: 2; }
details.tc-sub > summary { cursor: pointer; list-style: none; }
details.tc-sub > summary::-webkit-details-marker { display: none; }
details.tc-sub[open] > summary { margin-bottom: 6px; }
.tc-warn-t { color: var(--d-yellow, #f0b232); font-size: .85rem; }
@media (max-width: 560px) { .tc-qstats { columns: 1; } .tc-qb { padding: 8px 10px 10px; } }

/* ---- tutor ID-check gate ---- */
.tut-gate { min-height: calc(100vh - 140px); display: grid; place-items: start center; padding: 32px 16px 48px; }
.tg-card { width: min(560px, 100%); background: var(--page); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px 24px; box-shadow: 0 10px 30px rgba(20, 22, 50, .08); }
.tg-card h2 { margin: 14px 0 6px; }
.tg-top { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.tg-top > span { display: grid; min-width: 0; }
.tg-top .hub-link { margin-left: auto; color: var(--ink); }
.tg-steps { padding-left: 20px; display: grid; gap: 6px; margin: 12px 0; }
.tg-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.tg-bad { background: #fdecec; color: #8a1d1d; border-radius: 8px; padding: 10px 12px; }
.tg-wait { background: #eef0ff; color: #2e2b8f; border-radius: 8px; padding: 10px 12px; }
#tut-signin-form { margin-bottom: 4px; }
.tc-sub-h > .hub-av { margin-left: 0 !important; }
.tc-sub-h > strong { margin-right: auto; }
.tg-top .hub-link { background: none; border: 0; padding: 6px 4px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }