/* The Academy app frame (app-shell.js), on app.tanimawoai.com only (html.taa-app).
   Laid out like the Nova AI Ops app: a fixed sidebar with section headings and flat rows,
   a slim top bar, the page in the content area. The website's own top bars, header menu
   and footer are hidden here. */
html.taa-app { --as-w: 252px; --as-rail: 70px; --as-top: 56px; --as-bg: #070d1c; --as-panel: #0a1226; --as-line: rgba(255, 255, 255, 0.08); --as-mute: #8b93ad; --as-act: #38b6ff; }
html.taa-app-wait body { visibility: hidden; }

/* The website's chrome */
html.taa-app .beta-bar, html.taa-app header.nav, html.taa-app .mobile-panel, html.taa-app footer.footer, html.taa-app .sup-bar,
html.taa-app .nav-progress, html.taa-app .site-links-bar, html.taa-app .class-bar { display: none !important; }

/* Layout */
html.taa-app body.as-on { padding-left: var(--as-w); padding-top: var(--as-top); background: var(--bg, #020b1f); }
html.taa-app.as-rail body.as-on { padding-left: var(--as-rail); }

.as-side {
  position: fixed; z-index: 1100; left: 0; top: 0; bottom: 0; width: var(--as-w); display: flex; flex-direction: column;
  background: var(--as-panel); border-right: 1px solid var(--as-line); font-family: var(--font-body, Inter, "Segoe UI", sans-serif); color: #e8ecf8;
  transition: width 0.2s ease, transform 0.25s ease;
}
html.as-rail .as-side { width: var(--as-rail); }
.as-brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: var(--as-top); padding: 0 10px 0 14px; border-bottom: 1px solid var(--as-line); flex-shrink: 0; }
.as-logo { display: flex; align-items: center; gap: 10px; min-width: 0; color: #fff; text-decoration: none; }
.as-logo img { width: 84px; height: 84px; object-fit: contain; flex-shrink: 0; } /* logo only, no text (founder request) */
html.as-rail .as-logo img { width: 44px; height: 44px; }
.as-logo span { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.as-logo strong { font-family: var(--font-head, inherit); font-size: 0.98rem; white-space: nowrap; }
.as-logo small { font-size: 0.7rem; color: var(--as-mute); white-space: nowrap; }
.as-fold { display: inline-grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; padding: 0; border: 0; border-radius: 8px; color: var(--as-mute); background: transparent; cursor: pointer; }
.as-fold:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.as-fold svg { width: 18px; height: 18px; }
html.as-rail .as-logo span, html.as-rail .as-h, html.as-rail .as-tx, html.as-rail .as-whotx, html.as-rail .as-out span { display: none; }
html.as-rail .as-brand { flex-direction: column; justify-content: center; height: auto; padding: 10px 0; gap: 6px; }

.as-nav { flex: 1 1 auto; overflow-y: auto; padding: 8px 10px 12px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.14) transparent; }
.as-grp { padding: 6px 0; }
.as-grp + .as-grp { border-top: 1px solid var(--as-line); }
.as-h { margin: 6px 10px 6px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--as-mute); }
.as-link {
  position: relative; display: flex; align-items: center; gap: 11px; min-height: 36px; padding: 7px 10px; border-radius: 8px;
  font-size: 0.86rem; color: #c3cae0; text-decoration: none; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease;
}
.as-link:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.as-link[aria-current="page"] { color: #fff; background: color-mix(in srgb, var(--as-act) 14%, transparent); }
.as-link[aria-current="page"]::before { content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--as-act); }
.as-ic { display: inline-grid; place-items: center; width: 18px; height: 18px; flex-shrink: 0; color: var(--as-mute); }
.as-link[aria-current="page"] .as-ic, .as-link:hover .as-ic { color: var(--as-act); }
.as-ic svg { width: 17px; height: 17px; }
.as-tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.as-link .taa-link-pill { margin-left: auto; }
html.as-rail .as-link { justify-content: center; padding: 8px 0; }
html.as-rail .as-link .taa-link-pill { display: none; }
.as-link:focus-visible, .as-fold:focus-visible, .as-out:focus-visible, .as-burger:focus-visible, .as-site:focus-visible { outline: 2px solid var(--as-act); outline-offset: 1px; }

.as-foot { flex-shrink: 0; padding: 10px; border-top: 1px solid var(--as-line); display: flex; flex-direction: column; gap: 6px; }
.as-who { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 4px; }
.as-av, .as-chip {
  display: inline-grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
  font-size: 0.78rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--accent, #1f7bff), var(--accent-2, #38b6ff));
}
.as-whotx { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.as-whotx strong { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-whotx small { font-size: 0.72rem; color: var(--as-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.as-rail .as-who { justify-content: center; }
.as-out { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 8px; font: inherit; font-size: 0.84rem; color: #c3cae0; background: transparent; cursor: pointer; }
.as-out:hover { color: #fff; background: rgba(255, 99, 99, 0.12); }
.as-out svg { width: 17px; height: 17px; flex-shrink: 0; }
html.as-rail .as-out { justify-content: center; }

.as-top {
  position: fixed; z-index: 1050; top: 0; right: 0; left: var(--as-w); height: var(--as-top); display: flex; align-items: center; gap: 12px; padding: 0 18px;
  background: color-mix(in srgb, var(--as-bg) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--as-line); font-family: var(--font-body, Inter, sans-serif); color: #e8ecf8; transition: left 0.2s ease;
}
html.as-rail .as-top { left: var(--as-rail); }
.as-burger { display: none; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--as-line); border-radius: 9px; color: #e8ecf8; background: transparent; cursor: pointer; }
.as-burger svg { width: 20px; height: 20px; }
/* Back, desktop app only (app-shell.js, 2026-10-10). */
.as-back { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 9px; border: 1px solid var(--as-line); border-radius: 9px; color: #e8ecf8; background: rgba(255, 255, 255, 0.04); font: 600 0.86rem var(--font-body, Inter, sans-serif); cursor: pointer; flex-shrink: 0; transition: background 0.15s, border-color 0.15s; }
.as-back svg { width: 18px; height: 18px; }
.as-back:hover { background: rgba(56, 182, 255, 0.12); border-color: rgba(56, 182, 255, 0.55); }
.as-back:focus-visible { outline: 2px solid var(--as-act); outline-offset: 1px; }
@media (max-width: 640px) { .as-back { width: 36px; padding: 0; justify-content: center; } .as-back span { display: none; } }
.as-title { margin: 0; flex: 1 1 auto; min-width: 0; font-family: var(--font-head, inherit); font-size: 1.02rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.as-pts { padding: 5px 11px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; color: #fde68a; background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.35); }
.as-pts[hidden] { display: none; }
.as-site { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 8px; font-size: 0.8rem; color: #c3cae0; text-decoration: none; border: 1px solid var(--as-line); }
.as-site:hover { color: #fff; border-color: rgba(255, 255, 255, 0.2); }
.as-site svg { width: 14px; height: 14px; }
.as-scrim { display: none; }

/* Pages inside the app: a little less top space (the app has its own top bar) */
html.taa-app body.as-on > main > section:first-child, html.taa-app body.as-on main > .page-header:first-child { padding-top: 28px; }

/* Phones and tablets: the menu slides in */
@media (max-width: 1023px) {
  html.taa-app body.as-on, html.taa-app.as-rail body.as-on { padding-left: 0; }
  .as-side, html.as-rail .as-side { width: min(84vw, 300px); transform: translateX(-102%); box-shadow: none; }
  html.as-drawer .as-side { transform: none; box-shadow: 20px 0 60px -20px rgba(0, 0, 0, 0.8); }
  html.as-rail .as-logo span, html.as-rail .as-h, html.as-rail .as-tx, html.as-rail .as-whotx, html.as-rail .as-out span { display: revert; }
  html.as-rail .as-link { justify-content: flex-start; padding: 7px 10px; }
  .as-fold { display: none; }
  .as-top, html.as-rail .as-top { left: 0; padding: 0 12px; }
  .as-burger { display: inline-grid; }
  .as-site span, .as-pts { display: none; }
  html.as-drawer .as-scrim { display: block; position: fixed; inset: 0; z-index: 1090; background: rgba(2, 6, 18, 0.6); }
}
@media (prefers-reduced-motion: reduce) { .as-side, .as-top { transition: none; } }

/* ===== Sign-in page (login.html) and app home (app.html) ===== */
.al-wrap { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; background: radial-gradient(60% 50% at 50% 0%, rgba(31, 123, 255, 0.16), transparent 70%), var(--bg, #020b1f); }
.al-card { width: min(440px, 100%); padding: 36px 32px 26px; border-radius: 16px; background: #0a1226; border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.9); color: #e8ecf8; }
.al-logo { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); text-align: center; }
.al-logo img { width: 64px; height: 64px; object-fit: contain; }
.al-logo h1 { margin: 0; font-family: var(--font-head, inherit); font-size: 1.5rem; letter-spacing: -0.01em; }
.al-logo p { margin: 0; font-size: 0.9rem; color: #8b93ad; }
.al-label { display: block; margin: 0 0 7px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8b93ad; }
.al-input { width: 100%; box-sizing: border-box; height: 46px; padding: 0 14px; border-radius: 10px; font: inherit; font-size: 1rem; color: #fff; background: #050b1a; border: 1px solid rgba(255, 255, 255, 0.14); }
.al-input:focus { outline: none; border-color: #38b6ff; box-shadow: 0 0 0 3px rgba(56, 182, 255, 0.22); }
.al-code { letter-spacing: 0.4em; text-align: center; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.al-btn { width: 100%; height: 46px; margin-top: 14px; border: 0; border-radius: 10px; font: inherit; font-weight: 700; font-size: 0.98rem; color: #fff; cursor: pointer; background: linear-gradient(135deg, #1f7bff, #38b6ff); box-shadow: 0 10px 26px -12px rgba(31, 123, 255, 0.9); }
.al-btn:disabled { opacity: 0.6; cursor: wait; }
.al-msg { min-height: 1.2em; margin: 12px 0 0; font-size: 0.86rem; color: #8b93ad; }
.al-msg.is-err { color: #ff8a8a; }
.al-back { display: inline-block; margin-top: 10px; font-size: 0.85rem; color: #8b93ad; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font: inherit; }
.al-sep { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.08); text-align: center; font-size: 0.9rem; color: #8b93ad; }
.al-sep a { color: #fff; font-weight: 600; }
.al-links { display: flex; justify-content: center; gap: 14px; margin: 12px 0 0; font-size: 0.8rem; }
.al-links a { color: #8b93ad; text-decoration: none; }
.al-links a:hover { color: #fff; }
[hidden] { display: none !important; }

.ah { max-width: 1180px; margin: 0 auto; padding: 28px 28px 64px; color: #e8ecf8; }
.ah-hi { margin: 0 0 4px; font-family: var(--font-head, inherit); font-size: clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing: -0.015em; }
.ah-sub { margin: 0 0 22px; color: #8b93ad; }
.ah-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.ah-tile { padding: 16px 18px; border-radius: 14px; background: #0a1226; border: 1px solid rgba(255, 255, 255, 0.08); }
.ah-tile small { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #8b93ad; margin-bottom: 6px; }
.ah-tile strong { display: block; font-family: var(--font-head, inherit); font-size: 1.35rem; line-height: 1.2; }
.ah-tile span { display: block; font-size: 0.82rem; color: #8b93ad; margin-top: 4px; }
.ah-tile a { color: #38b6ff; font-size: 0.84rem; font-weight: 600; text-decoration: none; }
.ah-cont { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; padding: 16px 18px; border-radius: 14px; background: linear-gradient(135deg, rgba(31, 123, 255, 0.18), rgba(56, 182, 255, 0.06)); border: 1px solid rgba(56, 182, 255, 0.3); }
.ah-cont p { margin: 0; color: #c3cae0; }
.ah-cont strong { color: #fff; }
.ah-cont a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 10px; font-weight: 700; font-size: 0.9rem; color: #fff; text-decoration: none; background: linear-gradient(135deg, #1f7bff, #38b6ff); }
.ah-h2 { margin: 0 0 12px; font-family: var(--font-head, inherit); font-size: 1.1rem; }
.ah-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ah-card { padding: 16px 16px 12px; border-radius: 14px; background: #0a1226; border: 1px solid rgba(255, 255, 255, 0.08); }
.ah-card h3 { margin: 0 0 10px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8b93ad; }
.ah-card a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin: 0 -8px; border-radius: 8px; font-size: 0.9rem; color: #dbe1f2; text-decoration: none; }
.ah-card a:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.ah-card a svg { width: 16px; height: 16px; color: #38b6ff; flex-shrink: 0; }
.ah-card a .taa-link-pill { margin-left: auto; }
@media (max-width: 980px) { .ah-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ah-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ah { padding: 20px 16px 48px; } .ah-grid { grid-template-columns: minmax(0, 1fr); } .al-card { padding: 28px 20px 22px; } }
/* The achievements toast (achievements.js, bottom left) sits beside the app menu. */
@media (min-width: 1024px) {
  html.taa-app .ach-toast { left: calc(var(--as-w) + 16px); }
  html.taa-app.as-rail .ach-toast { left: calc(var(--as-rail) + 16px); }
}

/* ===== Notifications bell + panel (like the Nova AI Ops top bar) ===== */
.as-bell { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 9px; cursor: pointer; color: #c3cae0; background: transparent; border: 1px solid var(--as-line); }
.as-bell:hover, .as-bell[aria-expanded="true"] { color: #fff; border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.04); }
.as-bell svg { width: 18px; height: 18px; }
.as-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: 0.66rem; font-weight: 700; line-height: 18px; color: #fff; background: #ef4444; box-shadow: 0 0 0 2px var(--as-bg); }
.as-badge[hidden] { display: none; }
.as-np {
  position: fixed; z-index: 1150; top: calc(var(--as-top) + 6px); right: 14px; width: min(400px, calc(100vw - 24px)); max-height: calc(100vh - var(--as-top) - 24px); max-height: calc(100dvh - var(--as-top) - 24px);
  display: flex; flex-direction: column; border-radius: 14px; background: #0c1428; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.85);
  color: #e8ecf8; font-family: var(--font-body, Inter, sans-serif); overflow: hidden;
}
.as-np[hidden] { display: none; }
.as-np-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; }
.as-np-head > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.as-np-head strong { font-size: 1rem; }
.as-np-chip { padding: 2px 9px; border-radius: 999px; font-size: 0.7rem; font-weight: 600; color: #8b93ad; background: rgba(255, 255, 255, 0.06); }
.as-np-chip.is-on { color: #fff; background: rgba(239, 68, 68, 0.85); }
.as-np-mark { padding: 5px 10px; border-radius: 7px; font: inherit; font-size: 0.74rem; color: #c3cae0; background: transparent; border: 1px solid rgba(255, 255, 255, 0.12); cursor: pointer; }
.as-np-mark:disabled { opacity: 0.45; cursor: default; }
/* Turn off / Turn on (2026-10-09): the head's buttons sit in a row; the bell shows a crossed-out bell while off */
.as-np-head > .as-np-acts { flex-direction: row; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.as-np-toggle { display: inline-flex; align-items: center; gap: 5px; }
.as-np-toggle svg { width: 13px; height: 13px; }
.as-np-toggle:hover, .as-np-mark:not(:disabled):hover { color: #fff; border-color: rgba(255, 255, 255, 0.28); }
.as-np-toggle.is-on { color: #04140c; font-weight: 700; background: #34d399; border-color: #34d399; }
.as-np-toggle.is-on:hover { color: #04140c; background: #4ee0ad; }
.as-np-chip.is-off { color: #fbbf24; background: rgba(251, 191, 36, 0.12); }
.as-bell.is-off { color: #8b93ad; }
.as-np-offbox { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 22px 22px; text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.as-np-offbox > svg { width: 38px; height: 38px; color: #fbbf24; padding: 10px; border-radius: 50% !important; background: rgba(251, 191, 36, 0.1); box-sizing: content-box; }
.as-np-offbox strong { font-size: 0.95rem; }
.as-np-offbox p { margin: 0; max-width: 300px; font-size: 0.82rem; line-height: 1.45; color: #b4bcd6; }
.as-np-onbtn { margin-top: 6px; padding: 9px 16px; border-radius: 9px; font: inherit; font-size: 0.84rem; font-weight: 700; color: #04140c; background: #34d399; border: 0; cursor: pointer; }
.as-np-onbtn:hover { background: #4ee0ad; }
.as-np-peek { padding: 4px 8px; font: inherit; font-size: 0.76rem; color: #8b93ad; background: transparent; border: 0; text-decoration: underline; cursor: pointer; }
.as-np-peek:hover { color: #e8ecf8; }
.as-np-tabs { display: flex; gap: 4px; padding: 0 12px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
/* Up to 8 tabs (Visitors, Websites, 2026-10-08): the row scrolls sideways instead of overflowing */
.as-np-tabs { overflow-x: auto; scrollbar-width: none; }
.as-np-tabs::-webkit-scrollbar { display: none; }
.as-np-tab { flex: none; padding: 5px 10px; border-radius: 7px; font: inherit; font-size: 0.76rem; font-weight: 600; color: #8b93ad; background: transparent; border: 0; cursor: pointer; }
.as-np-tab.is-on { color: #fff; background: rgba(255, 255, 255, 0.08); }
.as-np-list { flex: 1 1 auto; overflow-y: auto; padding: 6px; }
.as-np-empty { margin: 0; padding: 34px 16px; text-align: center; color: #8b93ad; font-size: 0.86rem; }
.as-np-item { display: flex; gap: 10px; padding: 10px; border-radius: 10px; color: inherit; text-decoration: none; }
.as-np-item:hover { background: rgba(255, 255, 255, 0.05); }
.as-np-dot { flex: 0 0 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: transparent; }
.as-np-item.is-new .as-np-dot { background: #38b6ff; box-shadow: 0 0 8px #38b6ff; }
.as-np-item[data-kind="student"].is-new .as-np-dot { background: #34d399; box-shadow: 0 0 8px #34d399; }
.as-np-item[data-kind="class"].is-new .as-np-dot { background: #fbbf24; box-shadow: 0 0 8px #fbbf24; }
.as-np-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.as-np-tx strong { font-size: 0.86rem; }
.as-np-tx span { font-size: 0.8rem; color: #b4bcd6; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.as-np-tx small { font-size: 0.72rem; color: #6f789a; }
.as-np-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.76rem; color: #8b93ad; }
.as-np-foot a { color: #e8ecf8; font-weight: 600; text-decoration: none; }

/* Page Control marks (founder) and blocked pages (students) */
.as-hid { margin-left: auto; padding: 1px 7px; border-radius: 999px; font-size: 0.64rem; font-weight: 700; color: #fca5a5; background: rgba(239, 68, 68, 0.14); border: 1px solid rgba(239, 68, 68, 0.35); }
html.as-rail .as-hid { display: none; }
.as-grp-founder .as-h { color: #fbbf24; }
.as-blocked { max-width: 520px; margin: 80px auto; padding: 28px; text-align: center; border-radius: 16px; background: #0a1226; border: 1px solid rgba(255, 255, 255, 0.08); color: #e8ecf8; }
.as-blocked h2 { margin: 0 0 14px; font-size: 1.2rem; }
.as-blocked a { color: #38b6ff; font-weight: 600; }

/* ===== Founder pages (founder-*.html) and Notifications page ===== */
.fp { max-width: 1240px; margin: 0 auto; padding: 26px 28px 64px; color: #e8ecf8; }
.fp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; padding: 20px 22px; border-radius: 14px; background: #0a1226; border: 1px solid rgba(255, 255, 255, 0.08); }
.fp-head h1 { margin: 0 0 4px; font-family: var(--font-head, inherit); font-size: 1.55rem; }
.fp-head p { margin: 0; color: #8b93ad; }
.fp-role { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; font-weight: 700; font-size: 0.86rem; color: #1a1200; background: linear-gradient(135deg, #fde68a, #f59e0b); }
.fp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.fp-tile { padding: 16px 18px; border-radius: 12px; background: #0a1226; border: 1px solid rgba(255, 255, 255, 0.08); }
.fp-tile strong { display: block; font-family: var(--font-head, inherit); font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fp-tile span { font-size: 0.8rem; color: #8b93ad; }
.fp-tile.is-ok strong { color: #34d399; } .fp-tile.is-bad { border-color: rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.08); } .fp-tile.is-bad strong { color: #f87171; }
.fp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.fp-search { flex: 1 1 260px; height: 40px; padding: 0 12px; border-radius: 9px; font: inherit; font-size: 0.9rem; color: #fff; background: #050b1a; border: 1px solid rgba(255, 255, 255, 0.14); }
.fp-search:focus { outline: none; border-color: #38b6ff; }
.fp-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: #050b1a; border: 1px solid rgba(255, 255, 255, 0.1); }
.fp-seg button { padding: 6px 12px; border-radius: 7px; font: inherit; font-size: 0.8rem; font-weight: 600; color: #8b93ad; background: transparent; border: 0; cursor: pointer; }
.fp-seg button.is-on { color: #fff; background: rgba(255, 255, 255, 0.1); }
.fp-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border-radius: 8px; font: inherit; font-size: 0.82rem; font-weight: 600; color: #e8ecf8; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); cursor: pointer; }
.fp-btn:hover { background: rgba(255, 255, 255, 0.12); }
.fp-btn.is-danger { color: #fff; background: #dc2626; border-color: transparent; }
.fp-btn.is-primary { color: #fff; background: linear-gradient(135deg, #1f7bff, #38b6ff); border-color: transparent; }
.fp-btn:disabled { opacity: 0.55; cursor: wait; }
.fp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.fp-card { padding: 14px 16px; border-radius: 12px; background: #0a1226; border: 1px solid rgba(52, 211, 153, 0.35); }
.fp-card.is-hidden { border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.05); }
.fp-card-top { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.fp-card-ic { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; color: #8b93ad; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); flex-shrink: 0; }
.fp-card-ic svg { width: 18px; height: 18px; }
.fp-card strong { display: block; font-size: 0.95rem; }
.fp-card code { font-size: 0.74rem; color: #8b93ad; }
.fp-card-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fp-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 6px; font: inherit; font-size: 0.74rem; font-weight: 600; text-decoration: none; cursor: pointer; color: #c3cae0; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); }
.fp-chip.is-show { color: #34d399; border-color: rgba(52, 211, 153, 0.4); }
.fp-chip.is-hide { color: #f87171; border-color: rgba(239, 68, 68, 0.4); }
.fp-state { margin-left: auto; padding: 3px 8px; border-radius: 5px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; }
.fp-state.on { color: #34d399; border: 1px solid rgba(52, 211, 153, 0.5); } .fp-state.off { color: #f87171; border: 1px solid rgba(239, 68, 68, 0.5); }
.fp-grp { margin: 18px 0 8px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8b93ad; }
.fp-table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08); background: #0a1226; }
.fp-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.fp-table th { position: sticky; top: 0; padding: 10px 12px; text-align: left; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8b93ad; background: #0c1630; border-bottom: 1px solid rgba(255, 255, 255, 0.08); white-space: nowrap; }
.fp-table td { padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); vertical-align: middle; }
.fp-table tr:hover td { background: rgba(255, 255, 255, 0.025); }
.fp-user { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.fp-user .as-av { width: 30px; height: 30px; font-size: 0.72rem; }
.fp-user small { display: block; color: #8b93ad; font-size: 0.76rem; }
.fp-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; background: rgba(255, 255, 255, 0.06); color: #c3cae0; white-space: nowrap; }
.fp-pill.is-ok { color: #34d399; background: rgba(52, 211, 153, 0.12); }
.fp-muted { color: #8b93ad; }
.fp-pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; color: #8b93ad; font-size: 0.84rem; }
.fp-panels { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin-bottom: 12px; }
.fp-panel { padding: 16px 18px; border-radius: 12px; background: #0a1226; border: 1px solid rgba(255, 255, 255, 0.08); min-width: 0; }
.fp-panel h2 { margin: 0 0 12px; font-size: 0.95rem; }
.fp-chart { display: flex; align-items: flex-end; gap: 4px; height: 170px; padding-top: 6px; }
.fp-chart div { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; height: 100%; }
.fp-chart i { display: block; width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #38b6ff, #1f7bff); }
.fp-chart small { font-size: 0.6rem; color: #6f789a; }
.fp-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fp-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; font-size: 0.85rem; }
.fp-rows li i { grid-column: 1 / -1; display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.fp-rows li i b { display: block; height: 100%; background: linear-gradient(90deg, #1f7bff, #38b6ff); }
.fp-empty { padding: 26px; text-align: center; color: #8b93ad; }
.fp-form { display: grid; gap: 8px; margin-bottom: 16px; padding: 16px 18px; border-radius: 12px; background: #0a1226; border: 1px solid rgba(251, 191, 36, 0.3); }
.fp-form h2 { margin: 0 0 4px; font-size: 0.95rem; }
.fp-form input, .fp-form textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 9px; font: inherit; font-size: 0.9rem; color: #fff; background: #050b1a; border: 1px solid rgba(255, 255, 255, 0.14); }
.fp-form textarea { min-height: 70px; resize: vertical; }
.fp-form p { margin: 0; font-size: 0.82rem; color: #8b93ad; }
.fp-nlist { display: grid; gap: 8px; }
.fp-n { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: #0a1226; border: 1px solid rgba(255, 255, 255, 0.08); color: inherit; text-decoration: none; }
.fp-n .as-np-tx strong { font-size: 0.95rem; }
.fp-n button { margin-left: auto; }
@media (max-width: 900px) { .fp-panels { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .fp { padding: 18px 14px 48px; } .fp-head { padding: 16px; } }
.al-founder { margin: 14px 0 0; text-align: center; }

/* ===== The student's own menu: search, Favourites, drag to reorder (like the Nova AI Ops app) ===== */
.as-find { position: relative; flex-shrink: 0; margin: 10px 10px 2px; }
.as-find-ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); display: inline-grid; color: var(--as-mute); pointer-events: none; }
.as-find-ic svg { width: 15px; height: 15px; }
.as-q {
  width: 100%; box-sizing: border-box; height: 36px; padding: 0 58px 0 32px; border-radius: 9px; font: inherit; font-size: 0.84rem; color: #fff;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--as-line); -webkit-appearance: none; appearance: none;
}
.as-q::placeholder { color: #737c99; }
.as-q::-webkit-search-cancel-button { display: none; }
.as-q:focus { outline: none; border-color: var(--as-act); background: rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 3px rgba(56, 182, 255, 0.18); }
.as-kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 1px 6px; border-radius: 5px; font: 600 0.66rem/1.5 var(--font-body, Inter, sans-serif); color: #7c85a3; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--as-line); pointer-events: none; }
.as-q:focus + .as-kbd, .as-q:not(:placeholder-shown) + .as-kbd { display: none; }
.as-none { margin: 18px 10px; font-size: 0.82rem; color: var(--as-mute); text-align: center; }
html.as-rail .as-find { display: none; }

.as-row { position: relative; }
.as-row[hidden], .as-grp[hidden] { display: none; }
.as-row .as-link { padding-right: 34px; }
.as-star, .as-grip {
  position: absolute; top: 50%; transform: translateY(-50%); display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: #6f789a; cursor: pointer; opacity: 0; transition: opacity 0.12s ease, color 0.12s ease;
}
.as-star { right: 4px; width: 26px; height: 26px; }
.as-star svg { width: 14px; height: 14px; }
.as-star:hover { color: #fbbf24; background: rgba(255, 255, 255, 0.06); }
.as-star.is-on { opacity: 1; color: #f59e0b; }
.as-star.is-on svg { fill: currentColor; }
.as-grip { left: -9px; width: 14px; height: 24px; cursor: grab; touch-action: none; }
.as-grip svg { width: 12px; height: 14px; fill: currentColor; stroke: none; }
.as-row:hover .as-star, .as-row:focus-within .as-star, .as-row:hover .as-grip { opacity: 1; }
.as-grip:hover { color: #c3cae0; }
.as-link[aria-current="page"] + .as-star + .as-grip { display: none; }
html.as-dragging, html.as-dragging * { cursor: grabbing !important; user-select: none; }
.as-row.is-drag { z-index: 2; border-radius: 8px; background: #13203f; box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(56, 182, 255, 0.45); }
.as-row.is-drag .as-grip { opacity: 1; color: var(--as-act); }
html.as-searching .as-grip { display: none; }
.as-grp-fav .as-h { color: #fbbf24; }
.as-star:focus-visible, .as-q:focus-visible { outline: 2px solid var(--as-act); outline-offset: 1px; }
html.as-rail .as-star, html.as-rail .as-grip { display: none; }
html.as-rail .as-row .as-link { padding-right: 0; }
/* Touch screens have no hover: keep the stars and grips in view. */
@media (hover: none) { .as-star, .as-grip { opacity: 1; } .as-star:not(.is-on) { color: #4b5372; } .as-kbd { display: none; } }
@media (max-width: 1023px) { html.as-rail .as-find { display: block; } html.as-rail .as-star, html.as-rail .as-grip { display: inline-grid; } html.as-rail .as-row .as-link { padding-right: 34px; } }

/* Sidebar user card = a link to Profile & settings; photos in every avatar */
a.as-who { border-radius: 9px; color: inherit; text-decoration: none; }
a.as-who:hover { background: rgba(255, 255, 255, 0.05); }
a.as-who:focus-visible, .as-chip:focus-visible { outline: 2px solid var(--as-act); outline-offset: 2px; }
.as-av, .as-chip { overflow: hidden; }
.as-av img, .as-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.as-chip { padding: 0; border: 0; cursor: pointer; font-family: inherit; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08); }
.as-chip:hover, .as-chip[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--as-act); }

/* Account menu under the top-bar photo */
.as-um {
  position: fixed; z-index: 1150; top: calc(var(--as-top) + 6px); right: 14px; width: 260px; padding: 6px; border-radius: 14px;
  background: #0c1428; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.85); color: #e8ecf8; font-family: var(--font-body, Inter, sans-serif);
}
.as-um[hidden] { display: none; }
.as-um-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.as-um-head .as-av { width: 38px; height: 38px; }
.as-um-item { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 8px; font: inherit; font-size: 0.86rem; color: #c3cae0; background: transparent; text-decoration: none; cursor: pointer; text-align: left; }
.as-um-item:hover, .as-um-item:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.06); outline: none; }
.as-um-item .as-ic svg { width: 16px; height: 16px; }
.as-um-out { margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0 0 8px 8px; }
.as-um-out:hover { background: rgba(255, 99, 99, 0.12); }

/* ===== Profile & settings (settings.html + settings.js), like the Nova AI Ops Settings page ===== */
.st { max-width: 1120px; margin: 0 auto; padding: 26px 28px 72px; color: #e8ecf8; }
.st-loading { color: #8b93ad; }
.st-head { margin-bottom: 18px; }
.st-head h1 { margin: 0 0 4px; font-family: var(--font-head, inherit); font-size: 1.6rem; letter-spacing: -0.01em; }
.st-head p { margin: 0; color: #8b93ad; }
.st-wrap { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 20px; align-items: start; }
.st-side { position: sticky; top: calc(var(--as-top, 56px) + 18px); display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 14px; background: #0a1226; border: 1px solid rgba(255, 255, 255, 0.08); }
.st-side-h { margin: 4px 10px 6px; font-size: 0.7rem; font-weight: 700; color: #8b93ad; }
.st-tab { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; font-size: 0.88rem; color: #c3cae0; text-decoration: none; }
.st-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.st-tab[aria-current="page"] { color: #fff; background: rgba(56, 182, 255, 0.14); }
.st-tab-ic { display: inline-grid; color: #8b93ad; } .st-tab[aria-current="page"] .st-tab-ic { color: #38b6ff; }
.st-tab-ic svg { width: 16px; height: 16px; }
.st-card { border-radius: 16px; background: #0a1226; border: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; }
.st-card[hidden] { display: none; }
.st-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 20px 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.st-card-head h2 { margin: 0 0 4px; font-family: var(--font-head, inherit); font-size: 1.15rem; }
.st-card-head p { margin: 0; font-size: 0.86rem; color: #8b93ad; max-width: 52ch; }
.st-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.st-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: 9px; font: inherit; font-size: 0.86rem; font-weight: 600; color: #e8ecf8; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); cursor: pointer; }
.st-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.11); }
.st-btn:disabled { opacity: 0.45; cursor: default; }
.st-btn svg { width: 15px; height: 15px; }
.st-btn.is-primary { color: #fff; border-color: transparent; background: linear-gradient(135deg, #1f7bff, #38b6ff); box-shadow: 0 8px 22px -12px rgba(31, 123, 255, 0.9); }
.st-btn.is-quiet { background: transparent; }
.st-btn.is-danger { color: #fca5a5; border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.08); }
.st-btn.is-danger:hover { color: #fff; background: #dc2626; }
.st-btn:focus-visible, .st-in:focus-visible, .st-tab:focus-visible { outline: 2px solid #38b6ff; outline-offset: 2px; }

.st-photo { display: flex; align-items: center; gap: 22px; padding: 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); transition: background 0.15s ease; }
.st-photo.is-over { background: rgba(56, 182, 255, 0.08); box-shadow: inset 0 0 0 2px rgba(56, 182, 255, 0.5); }
.st-big {
  position: relative; display: grid; place-items: center; width: 104px; height: 104px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
  font-family: var(--font-head, inherit); font-size: 2.1rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--accent, #1f7bff), var(--accent-2, #38b6ff));
  box-shadow: 0 0 0 4px #0a1226, 0 0 0 6px rgba(56, 182, 255, 0.45);
}
.st-big img { width: 100%; height: 100%; object-fit: cover; }
.st-big.is-busy::after { content: ""; position: absolute; inset: 0; background: rgba(5, 11, 26, 0.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4'%3E%3Cpath d='M12 3a9 9 0 1 0 9 9'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") center / 30px no-repeat; }
.st-drop strong { display: block; font-size: 0.98rem; margin-bottom: 3px; }
.st-drop p { margin: 0 0 12px; font-size: 0.84rem; color: #8b93ad; max-width: 46ch; }

.st-rows { display: flex; flex-direction: column; }
.st-row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); gap: 10px 28px; align-items: start; padding: 18px 22px; }
.st-row + .st-row { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.st-lab label, .st-lab > :first-child { display: block; font-size: 0.92rem; font-weight: 600; color: #fff; margin-top: 8px; }
.st-lab p { margin: 4px 0 0; font-size: 0.8rem; line-height: 1.45; color: #8b93ad; }
.st-in { width: 100%; box-sizing: border-box; min-height: 42px; padding: 9px 12px; border-radius: 9px; font: inherit; font-size: 0.92rem; color: #fff; background: #050b1a; border: 1px solid rgba(255, 255, 255, 0.14); }
.st-in:focus { outline: none; border-color: #38b6ff; box-shadow: 0 0 0 3px rgba(56, 182, 255, 0.2); }
select.st-in { cursor: pointer; }
select.st-in option { background: #0a1226; }
textarea.st-in { resize: vertical; min-height: 84px; line-height: 1.5; }
.st-area { position: relative; }
.st-count { display: block; margin-top: 4px; text-align: right; font-size: 0.72rem; color: #6f789a; font-variant-numeric: tabular-nums; }
.st-note { display: block; margin-top: 6px; font-size: 0.76rem; color: #6f789a; }
.st-static { min-height: 42px; display: flex; align-items: center; font-size: 0.92rem; color: #dbe1f2; word-break: break-all; }
.st-favs { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; }
.st-fav { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 0.8rem; color: #fde68a; background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.35); }
.st-fav::before { content: "★"; color: #f59e0b; }
.st-muted { font-size: 0.84rem; color: #8b93ad; }
.st-keys { list-style: none; margin: 0; padding: 4px 0 0; display: grid; gap: 8px; }
.st-keys li { display: flex; align-items: center; gap: 12px; font-size: 0.84rem; color: #c3cae0; }
.st-keys kbd { flex: 0 0 110px; padding: 3px 8px; border-radius: 6px; font: 600 0.74rem/1.4 var(--font-body, Inter, sans-serif); color: #e8ecf8; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); text-align: center; }
.st-err { margin: 0; padding: 24px 22px; color: #fca5a5; }
.st-toast { position: fixed; z-index: 1200; left: 50%; bottom: 26px; transform: translate(-50%, 20px); padding: 11px 18px; border-radius: 10px; font-size: 0.88rem; font-weight: 600; color: #04120b; background: #34d399; box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.8); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; }
.st-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.st-toast.is-bad { color: #fff; background: #dc2626; }
@media (max-width: 860px) {
  .st { padding: 18px 14px 56px; }
  .st-wrap { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .st-side { position: static; flex-direction: row; overflow-x: auto; padding: 6px; }
  .st-side-h { display: none; }
  .st-tab { flex-shrink: 0; }
  .st-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px; }
  .st-lab label, .st-lab > :first-child { margin-top: 0; }
  .st-card-head, .st-photo { padding: 16px; }
  .st-photo { flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) { .st-toast { transition: none; } }

/* ===== View as student: the banner (founder) ===== */
.as-vbar { position: fixed; z-index: 1300; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px); padding: 9px 10px 9px 14px; border-radius: 12px; font: 500 0.86rem/1.35 var(--font-body, Inter, sans-serif); color: #1a1200; background: linear-gradient(135deg, #fde68a, #f59e0b); box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.8); }
.as-vbar .as-ic { color: #1a1200; }
.as-vbar-x { flex-shrink: 0; padding: 6px 12px; border: 0; border-radius: 8px; font: inherit; font-weight: 700; color: #fff; background: #1a1200; cursor: pointer; }
html.as-viewas .as-out, html.as-viewas .as-um-out { display: none; }

/* ===== Dialogs: feedback + keyboard shortcuts ===== */
.as-modal-back { position: fixed; inset: 0; z-index: 1250; display: grid; place-items: center; padding: 16px; background: rgba(2, 6, 18, 0.66); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.as-modal { width: min(480px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; border-radius: 16px; background: #0c1428; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9); color: #e8ecf8; font-family: var(--font-body, Inter, sans-serif); }
.as-modal.is-wide { width: min(640px, 100%); }
.as-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.as-modal-head h2 { margin: 0; font-family: var(--font-head, inherit); font-size: 1.1rem; }
.as-modal-x { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; color: #8b93ad; background: transparent; cursor: pointer; }
.as-modal-x:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.as-modal-x svg { width: 18px; height: 18px; }
.as-fb { padding: 16px 18px 18px; }
.as-fb-lead { margin: 0 0 12px; font-size: 0.88rem; color: #b4bcd6; }
.as-fb-kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.as-fb-kind { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 10px; font: inherit; font-size: 0.8rem; font-weight: 600; color: #c3cae0; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; }
.as-fb-kind svg { width: 20px; height: 20px; color: #8b93ad; }
.as-fb-kind.is-on { color: #fff; border-color: #38b6ff; background: rgba(56, 182, 255, 0.12); }
.as-fb-kind.is-on svg { color: #38b6ff; }
.as-fb-text { width: 100%; box-sizing: border-box; min-height: 120px; padding: 11px 12px; border-radius: 10px; font: inherit; font-size: 0.92rem; line-height: 1.5; color: #fff; background: #050b1a; border: 1px solid rgba(255, 255, 255, 0.14); resize: vertical; }
.as-fb-text:focus { outline: none; border-color: #38b6ff; box-shadow: 0 0 0 3px rgba(56, 182, 255, 0.2); }
.as-fb-meta { margin: 8px 0 0; font-size: 0.76rem; color: #6f789a; }
.as-fb-acts { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 14px; }
.as-fb-msg { margin-right: auto; font-size: 0.8rem; color: #8b93ad; }
.as-fb-msg.is-bad { color: #fca5a5; }
.as-fb-send { height: 40px; padding: 0 18px; border: 0; border-radius: 10px; font: inherit; font-weight: 700; font-size: 0.9rem; color: #fff; background: linear-gradient(135deg, #1f7bff, #38b6ff); cursor: pointer; }
.as-fb-send:disabled { opacity: 0.55; cursor: default; }
.as-fb-done { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 10px; text-align: center; }
.as-fb-done svg { width: 40px; height: 40px; color: #34d399; }
.as-fb-done span { font-size: 0.86rem; color: #8b93ad; }
.as-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; padding: 16px 18px 20px; }
.as-keys h3 { margin: 0 0 8px; font-size: 0.78rem; font-weight: 700; color: #8b93ad; }
.as-keys-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 0.85rem; color: #c3cae0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.as-keys kbd { flex-shrink: 0; padding: 2px 8px; border-radius: 6px; font: 600 0.74rem/1.5 var(--font-body, Inter, sans-serif); color: #e8ecf8; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); border-bottom-width: 2px; white-space: nowrap; }
.as-modal button:focus-visible, .as-modal textarea:focus-visible, .as-vbar-x:focus-visible { outline: 2px solid #38b6ff; outline-offset: 2px; }

/* ===== Getting-started tour ===== */
.as-tour { position: fixed; inset: 0; z-index: 1280; }
.as-tour-hole { position: fixed; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(2, 6, 18, 0.72), 0 0 0 2px #38b6ff; pointer-events: none; transition: all 0.25s ease; }
.as-tour-card { position: fixed; padding: 16px 16px 14px; border-radius: 14px; background: #0c1428; border: 1px solid rgba(56, 182, 255, 0.5); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.9); color: #e8ecf8; font-family: var(--font-body, Inter, sans-serif); transition: top 0.25s ease, left 0.25s ease; }
.as-tour-n { display: block; font-size: 0.72rem; font-weight: 700; color: #38b6ff; margin-bottom: 4px; }
.as-tour-card h2 { margin: 0 0 6px; font-family: var(--font-head, inherit); font-size: 1.05rem; }
.as-tour-card p { margin: 0 0 14px; font-size: 0.86rem; line-height: 1.5; color: #b4bcd6; }
.as-tour-acts { display: flex; align-items: center; gap: 8px; }
.as-tour-skip { margin-right: auto; padding: 0; border: 0; font: inherit; font-size: 0.8rem; color: #8b93ad; background: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.as-tour-back, .as-tour-next { height: 34px; padding: 0 14px; border-radius: 8px; font: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer; }
.as-tour-back { color: #e8ecf8; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); }
.as-tour-next { color: #fff; border: 0; background: linear-gradient(135deg, #1f7bff, #38b6ff); }
.as-tour button:focus-visible { outline: 2px solid #38b6ff; outline-offset: 2px; }
html.as-touring .as-scrim { display: none !important; }
@media (prefers-reduced-motion: reduce) { .as-tour-hole, .as-tour-card { transition: none; } }

/* ===== App home: Get started + Pick up where you left off ===== */
.ah-start { margin: 0 0 22px; padding: 18px 20px 16px; border-radius: 16px; background: #0a1226; border: 1px solid rgba(56, 182, 255, 0.28); }
.ah-st-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ah-st-head .ah-h2 { margin: 0 0 2px; }
.ah-st-head p { margin: 0; font-size: 0.86rem; color: #8b93ad; }
.ah-st-acts { display: flex; gap: 8px; align-items: center; }
.ah-st-tour { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border: 0; border-radius: 9px; font: inherit; font-size: 0.84rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #1f7bff, #38b6ff); cursor: pointer; }
.ah-st-tour svg { width: 16px; height: 16px; }
.ah-st-hide { height: 36px; padding: 0 12px; border-radius: 9px; font: inherit; font-size: 0.82rem; color: #8b93ad; background: transparent; border: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; }
.ah-st-bar { height: 6px; margin: 14px 0 12px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.ah-st-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #34d399, #38b6ff); }
.ah-st-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ah-st-item { display: flex; align-items: flex-start; gap: 10px; height: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 11px; color: inherit; text-decoration: none; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); }
a.ah-st-item:hover { border-color: rgba(56, 182, 255, 0.45); background: rgba(56, 182, 255, 0.06); }
.ah-st-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; color: #38b6ff; background: rgba(56, 182, 255, 0.12); }
.ah-st-ic svg { width: 15px; height: 15px; }
.ah-st-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ah-st-tx strong { font-size: 0.88rem; }
.ah-st-tx small { font-size: 0.76rem; line-height: 1.4; color: #8b93ad; }
.ah-st-list li.is-done .ah-st-ic { color: #04120b; background: #34d399; }
.ah-st-list li.is-done strong { color: #8b93ad; text-decoration: line-through; text-decoration-color: rgba(139, 147, 173, 0.6); }
.ah-recent { margin: 0 0 26px; }
.ah-rlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ah-r { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; color: inherit; text-decoration: none; background: #0a1226; border: 1px solid rgba(255, 255, 255, 0.08); }
.ah-r:hover { border-color: rgba(56, 182, 255, 0.45); }
.ah-r-ic { display: inline-grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; color: #38b6ff; background: rgba(56, 182, 255, 0.1); }
.ah-r-ic svg { width: 17px; height: 17px; }
.ah-r-tx { display: flex; flex-direction: column; min-width: 0; }
.ah-r-tx strong { font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ah-r-tx small { font-size: 0.76rem; color: #8b93ad; }
@media (max-width: 980px) { .ah-st-list, .ah-rlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ah-st-list, .ah-rlist { grid-template-columns: minmax(0, 1fr); } .ah-start { padding: 16px; } }

/* ===== My Notes (notes.html) ===== */
.nt { max-width: 1180px; margin: 0 auto; padding: 26px 28px 72px; color: #e8ecf8; }
.nt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.nt-wrap { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; min-height: 60vh; }
.nt-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.nt-list { display: flex; flex-direction: column; gap: 6px; max-height: 70vh; overflow-y: auto; }
.nt-item { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 11px 12px; border-radius: 11px; text-align: left; font: inherit; color: inherit; background: #0a1226; border: 1px solid rgba(255, 255, 255, 0.08); cursor: pointer; }
.nt-item:hover { border-color: rgba(255, 255, 255, 0.2); }
.nt-item.is-on { border-color: #38b6ff; background: rgba(56, 182, 255, 0.08); }
.nt-item strong { font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-item span { font-size: 0.8rem; color: #8b93ad; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-item small { font-size: 0.72rem; color: #6f789a; }
.nt-empty { margin: 8px 2px; font-size: 0.85rem; color: #8b93ad; }
.nt-ed { display: flex; flex-direction: column; min-width: 0; padding: 16px 20px; border-radius: 16px; background: #0a1226; border: 1px solid rgba(255, 255, 255, 0.08); }
.nt-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.nt-meta { font-size: 0.76rem; color: #6f789a; }
.nt-page { font-size: 0.78rem; color: #38b6ff; text-decoration: none; }
.nt-del { margin-left: auto; height: 32px; font-size: 0.8rem; }
.nt-title { margin: 12px 0 6px; padding: 4px 0; border: 0; font-family: var(--font-head, inherit); font-size: 1.4rem; font-weight: 600; color: #fff; background: transparent; outline: none; }
.nt-body { flex: 1 1 auto; min-height: 50vh; padding: 4px 0; border: 0; font: inherit; font-size: 0.98rem; line-height: 1.7; color: #dbe1f2; background: transparent; resize: none; outline: none; }
.nt-title::placeholder, .nt-body::placeholder { color: #4b5372; }
.nt-status { min-height: 1.2em; font-size: 0.74rem; color: #6f789a; text-align: right; }
.nt-blank { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 34ch; padding: 40px 0; text-align: center; color: #8b93ad; font-size: 0.86rem; }
.nt-blank svg { width: 34px; height: 34px; color: #38b6ff; }
.nt-blank strong { color: #e8ecf8; font-size: 1rem; }
@media (max-width: 860px) { .nt { padding: 18px 14px 56px; } .nt-wrap { grid-template-columns: minmax(0, 1fr); } .nt-list { max-height: 34vh; } .nt-body { min-height: 40vh; } }

/* ===== Settings: switches ===== */
.st-switch { display: inline-flex; align-items: center; gap: 10px; padding-top: 8px; cursor: pointer; }
.st-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.st-switch-ui { position: relative; width: 42px; height: 24px; flex-shrink: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.14); transition: background 0.15s ease; }
.st-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.15s ease; }
.st-switch input:checked + .st-switch-ui { background: #1f7bff; }
.st-switch input:checked + .st-switch-ui::after { transform: translateX(18px); }
.st-switch input:focus-visible + .st-switch-ui { outline: 2px solid #38b6ff; outline-offset: 2px; }
.st-switch-tx { font-size: 0.86rem; color: #c3cae0; }

/* ===== Founder: Overview + Feedback ===== */
.ov-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.ov-card { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 14px; color: inherit; text-decoration: none; background: #0a1226; border: 1px solid rgba(255, 255, 255, 0.08); }
a.ov-card:hover { border-color: rgba(56, 182, 255, 0.45); }
.ov-lab { font-size: 0.8rem; color: #8b93ad; }
.ov-card strong { font-family: var(--font-head, inherit); font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ov-chg { font-size: 0.76rem; font-weight: 600; }
.ov-chg.is-up { color: #34d399; } .ov-chg.is-down { color: #f87171; } .ov-chg.is-flat { color: #8b93ad; }
.ov-strip { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 12px; padding: 12px 18px; border-radius: 12px; font-size: 0.86rem; color: #8b93ad; background: #0a1226; border: 1px solid rgba(255, 255, 255, 0.08); }
.ov-strip strong { color: #fff; font-variant-numeric: tabular-nums; }
.ov-fb { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; font-size: 0.85rem; color: #c3cae0; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.ov-fb strong { color: #fff; }
.ov-foot { margin: 6px 0 0; font-size: 0.78rem; }
.fb-kind { display: inline-block; flex-shrink: 0; padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; color: #93c5fd; background: rgba(56, 182, 255, 0.12); }
.fb-kind.is-problem { color: #fca5a5; background: rgba(239, 68, 68, 0.14); }
.fb-kind.is-praise { color: #6ee7b7; background: rgba(52, 211, 153, 0.12); }
.fb-card { padding: 14px 16px; border-radius: 12px; background: #0a1226; border: 1px solid rgba(255, 255, 255, 0.08); }
.fb-card.is-done { opacity: 0.6; }
.fb-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 0.86rem; }
.fb-when { margin-left: auto; }
.fb-text { margin: 10px 0 12px; font-size: 0.92rem; line-height: 1.55; color: #dbe1f2; white-space: pre-wrap; }
.fp-chip svg { width: 13px; height: 13px; }
@media (max-width: 900px) { .ov-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ov-cards { grid-template-columns: minmax(0, 1fr); } }

/* ===== Connect (chat) button in the top bar ===== */
.as-cn { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 9px; font-size: 0.82rem; font-weight: 600; color: #e8ecf8; text-decoration: none; background: rgba(56, 182, 255, 0.1); border: 1px solid rgba(56, 182, 255, 0.35); }
.as-cn:hover, .as-cn.is-on { color: #fff; background: rgba(56, 182, 255, 0.2); border-color: rgba(56, 182, 255, 0.6); }
.as-cn svg { width: 17px; height: 17px; color: #38b6ff; }
.as-cn:focus-visible { outline: 2px solid var(--as-act); outline-offset: 2px; }
/* Support (sponsor.html) at the top right, red like the website's Support button (2026-10-08) */
.as-sup { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 9px; font-size: 0.82rem; font-weight: 700; color: #fff; text-decoration: none; background: linear-gradient(135deg, #ef4444, #dc2626); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 6px 16px -8px rgba(239, 68, 68, 0.8); }
.as-sup:hover, .as-sup.is-on { background: linear-gradient(135deg, #f05252, #b91c1c); }
.as-sup svg { width: 16px; height: 16px; }
.as-sup:focus-visible { outline: 2px solid var(--as-act); outline-offset: 2px; }
@media (max-width: 1023px) { .as-sup { width: 36px; padding: 0; justify-content: center; } .as-sup-tx { display: none; } }
@media (max-width: 1023px) { .as-cn { width: 36px; padding: 0; justify-content: center; } .as-cn-tx { display: none; } }

/* ===== Founder Users: every column header sorts (click again to reverse) ===== */
.fp-table th.fp-sortable { padding: 0; }
.fp-sort { display: inline-flex; align-items: center; gap: 6px; width: 100%; padding: 10px 12px; border: 0; font: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: transparent; cursor: pointer; white-space: nowrap; text-align: left; }
.fp-sort:hover { color: #e8ecf8; background: rgba(255, 255, 255, 0.04); }
.fp-sort:focus-visible { outline: 2px solid #38b6ff; outline-offset: -2px; }
.fp-arrow { display: inline-grid; width: 14px; height: 14px; opacity: 0.45; }
.fp-arrow svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fp-sort:hover .fp-arrow { opacity: 0.8; }
th.is-sorted .fp-sort { color: #7cc4ff; }
th.is-sorted .fp-arrow { opacity: 1; }
.fp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Website-only bits on app pages: the "Questions about Sunday's free class?" teaser bubble
   (chat-widget.js) is a website nudge; the assistant's button stays. */
html.taa-app .chat-teaser { display: none !important; }
/* ---------- Feature pages look like an app, not website pages (founder, 2026-10-03) ----------
   The feature pages come from the website. In the app their banner headings become a compact
   app heading: left-aligned, a small title and one line of intro, no "LABEL" eyebrow, no hero
   panels or illustrations (the top bar already names the page). Section eyebrows go too, and the
   website's class sign-up prompts that aren't plain sentences (app-identity.js hides the
   sentences and the "your email" boxes). */
html.taa-app main > .page-header { text-align: left !important; padding: 22px 0 2px !important; min-height: 0 !important; }
html.taa-app main > .page-header::before, html.taa-app main > .page-header::after { display: none !important; }
html.taa-app main > .page-header > .container { text-align: left !important; }
/* Hero panels (tools, Remove background, Code Lab): drop the box, keep the alignment. */
html.taa-app .tk-header > .container, html.taa-app .rb-header > .container, html.taa-app .lab-header.lh > .container.lh-grid {
  background: none !important; box-shadow: none !important; border-radius: 0 !important;
  padding-block: 0 !important; padding-inline: 0 !important; margin-inline: clamp(16px, 2vw, 40px) !important;
}
html.taa-app .tk-header > .container::before, html.taa-app .rb-header > .container::before, html.taa-app .lab-header.lh > .container.lh-grid::before { display: none !important; }
html.taa-app .lab-header.lh > .container.lh-grid { display: block !important; }
html.taa-app main > .page-header .eyebrow, html.taa-app .tk-crumb, html.taa-app .rb-crumb,
html.taa-app .lh-badge, html.taa-app .lh-chips, html.taa-app .lh-win { display: none !important; }
html.taa-app main > .page-header h1 {
  font-size: clamp(1.45rem, 1.1rem + 1vw, 1.85rem) !important; line-height: 1.2 !important; letter-spacing: -0.01em !important;
  margin: 0 0 6px !important; text-align: left !important; max-width: none !important;
}
html.taa-app main > .page-header .lede { max-width: 72ch !important; margin: 0 !important; font-size: 0.98rem !important; line-height: 1.55 !important; text-align: left !important; }
html.taa-app main > .page-header .lh-actions, html.taa-app main > .page-header .gal-actions { margin-top: 14px !important; justify-content: flex-start !important; }
html.taa-app main > .page-header .arc-total { margin: 12px 0 0 !important; justify-content: flex-start !important; }
html.taa-app main > .page-header + section, html.taa-app main > .page-header + div { padding-top: 18px !important; }
/* Section "LABEL" eyebrows read as website marketing in an app. */
html.taa-app main .eyebrow { display: none !important; }
/* Website class sign-up prompts: "Want to learn it live?" sections, "Join the free class"
   buttons and "Go" links to the register form (app students are already registered). */
html.taa-app main section#community:has(a[href*="#register"]),
html.taa-app main a[href$="#register"], html.taa-app main a[data-track="arcade-to-schedule"] { display: none !important; }
/* Assignments: its section heading repeats the page title. */
html.taa-app #assignments .section-head { display: none !important; }

/* A bigger logo (founder request, 2026-10-03): the open sidebar's logo area has its own
   height instead of the top bar's 56px, the 84px logo is centred in the sidebar's width, and
   the fold button sits in the top-right corner. No line under it (it would not line up with
   the top bar's), the search box follows. The folded rail keeps its column layout. */
html.taa-app:not(.as-rail) .as-brand { position: relative; justify-content: center; height: auto; padding: 14px 10px 6px; border-bottom: 0; }
html.taa-app:not(.as-rail) .as-brand .as-fold { position: absolute; top: 8px; right: 8px; }

/* ===== App home, "Everything in your app" (founder: "clean and neat", 2026-10-03). Instead of six
   boxes stretched to the same height (Play's three links in a tall, mostly empty box), each
   group is a small heading over a grid of same-size tiles, icon in a tinted square: every row
   is even and nothing is left empty. Same links, same order. ===== */
.ah-grid { display: flex; flex-direction: column; gap: 24px; }
.ah-grid .ah-card { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; padding: 0; border: 0; border-radius: 0; background: none; }
.ah-grid .ah-card h3 { grid-column: 1 / -1; margin: 0 0 2px; }
.ah-grid .ah-card a { margin: 0; gap: 12px; padding: 11px 12px; border-radius: 12px; font-weight: 500; background: #0a1226; border: 1px solid rgba(255, 255, 255, 0.08); transition: border-color 0.15s, background 0.15s, transform 0.15s; }
.ah-grid .ah-card a:hover { background: rgba(56, 182, 255, 0.07); border-color: rgba(56, 182, 255, 0.4); transform: translateY(-1px); }
.ah-grid .ah-card a svg { box-sizing: content-box; width: 16px; height: 16px; padding: 8px; border-radius: 9px; background: rgba(56, 182, 255, 0.12); }
@media (max-width: 600px) {
  .ah-grid .ah-card { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ah-grid .ah-card a { min-height: 64px; box-sizing: border-box; line-height: 1.25; }
  .ah-grid .ah-card a { padding: 10px; gap: 10px; font-size: 0.86rem; }
}
@media (prefers-reduced-motion: reduce) { .ah-grid .ah-card a { transition: none; } .ah-grid .ah-card a:hover { transform: none; } }

/* ===== Every app page the same container width, no filler text (founder request, 2026-10-03:
   "make sure every page is container width", "no unnecessary texts in the app page"). App only.
   - One width: the app home's (1180px at most, filling the area beside the menu). The app's
     own pages that were narrower or wider (Study Tools 1080, Settings 1120, Notifications
     1240) match it, and the website panels that were capped narrow inside it (720-980px:
     practice coach, portal, my learning, live quiz, assignment form, rooms lobby, creator,
     earn, gigs, partners, groups, suggest, video downloader) fill it. Connect (chat) stays
     full screen.
   - No intro line under the page title (the menu and the top bar already say where you are):
     the website pages' .lede, the app home's .ah-sub and the app pages' header lines. Titles,
     scores, progress and instructions inside the tools stay. ===== */
html.taa-app main .register-panel, html.taa-app main .section-head, html.taa-app main .coach-method,
html.taa-app main .coach-box, html.taa-app main .inviters-grid, html.taa-app main .live-box,
html.taa-app main .room-lobby, html.taa-app main .gal-empty, html.taa-app main .container.px-wrap,
html.taa-app main .container.tk-app { max-width: none !important; } /* !important: some carry an inline max-width */
html.taa-app main.sd, html.taa-app .st, html.taa-app .fp { max-width: 1180px; }
html.taa-app .page-header .lede, html.taa-app .ah-sub, html.taa-app .sd-head p, html.taa-app .st-head p,
html.taa-app .nt-head p, html.taa-app .fp-head p, html.taa-app main .section-head > p { display: none !important; }
html.taa-app .ah-hi { margin-bottom: 18px; }

/* ---------- Every app page uses the full width beside the menu (founder, 2026-10-04: "I want all
   the pages to extend to the container width") ----------
   The website pages' 1180px container and the app pages' own caps (.ah home, .fp founder pages,
   .st settings, .nt notes, .sd study tools) are lifted inside the app; the side margins match
   the tool pages. Paragraphs keep their own reading width (max-width in ch). */
html.taa-app main .container, html.taa-app main.sd, html.taa-app .ah, html.taa-app .fp, html.taa-app .st, html.taa-app .nt { max-width: none !important; }
html.taa-app main .container { padding-left: clamp(16px, 2vw, 40px) !important; padding-right: clamp(16px, 2vw, 40px) !important; }
html.taa-app main.sd, html.taa-app .ah, html.taa-app .fp, html.taa-app .st, html.taa-app .nt { padding-left: clamp(16px, 2vw, 40px) !important; padding-right: clamp(16px, 2vw, 40px) !important; }

/* ===== 2026-10-08: clean and neat like app.novaaiops.com (founder) ===== */
/* Home: "Everything in your app" in tabs, one group at a time (app-home.js) */
.ah-grid.ah-tabbed { display: block; }
.ah-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin: 0 0 16px; }
.ah-tabs::-webkit-scrollbar { display: none; }
.ah-tab { flex: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 14px; color: #8b93ad; font: 700 0.86rem/1.2 inherit; cursor: pointer; white-space: nowrap; }
.ah-tab:hover { color: #dbe1f2; }
.ah-tab[aria-selected="true"] { color: #fff; border-bottom-color: #38b6ff; }
.ah-tab:focus-visible { outline: 2px solid #38b6ff; outline-offset: -2px; }
.ah-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.ah-panel[hidden] { display: none; }
.ah-panel a { display: flex; align-items: center; gap: 12px; padding: 13px 14px; background: #0a1226; border: 1px solid rgba(255, 255, 255, 0.08); color: #dbe1f2; font-size: 0.92rem; text-decoration: none; transition: border-color .2s, background .2s, transform .2s; }
.ah-panel a:hover { border-color: rgba(56, 182, 255, 0.55); background: #0d1730; color: #fff; transform: translateY(-1px); }
.ah-panel a svg { width: 18px; height: 18px; color: #38b6ff; flex-shrink: 0; }
/* Phones: the bottom tab bar (app-shell.js), like Nova's */
.as-tabs { display: none; }
@media (max-width: 760px) {
  html.as-has-tabs body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .as-tabs { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 940;
    height: calc(62px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box;
    background: rgba(7, 13, 28, 0.97); border-top: 1px solid rgba(255, 255, 255, 0.09); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .as-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #8b93ad; font-size: 0.7rem; font-weight: 700; text-decoration: none; position: relative; -webkit-tap-highlight-color: transparent; }
  .as-tab-ic svg { width: 22px; height: 22px; display: block; }
  .as-tab.is-on { color: #fff; }
  .as-tab.is-on .as-tab-ic { color: #38b6ff; }
  .as-tab.is-on::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 2px; background: #38b6ff; }
  html.as-has-tabs #chatLauncher, html.as-has-tabs .chat-launcher { bottom: calc(76px + env(safe-area-inset-bottom)) !important; }
}
/* breathing room above "Everything in your app"; achievement pop-ups sit above the phone tab bar */
.ah-grid.ah-tabbed { margin-top: 0; }
.ah > .ah-h2:not(:first-child) { margin-top: 34px; }
@media (max-width: 760px) { html.as-has-tabs .ach-toast { bottom: calc(76px + env(safe-area-inset-bottom)) !important; } }

/* ---------- Account menu at the bottom left (founder 2026-10-08: "This panel should be at the bottom left") ----------
   The photo + name at the foot of the side menu (.as-who) is now a button that opens the account menu (.as-um); the
   top-bar photo button and the separate Sign out button are gone. app-shell.js places .as-um just above the button
   (left/bottom set inline each time it opens), so the top/right values in the .as-um rule above no longer apply.
   z-index 1150 already sits over the phone drawer (1100) and its scrim (1090). */
.as-who { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; padding: 6px; }
.as-who[aria-expanded="true"] { background: rgba(255, 255, 255, 0.07); }
.as-who::after { content: ""; margin-left: auto; flex-shrink: 0; width: 7px; height: 7px; border-right: 2px solid #8a93ad; border-top: 2px solid #8a93ad; transform: rotate(-45deg); opacity: 0.8; }
html.as-rail .as-who::after { display: none; }
.as-um { transform-origin: bottom left; }

/* Notifications panel fits its content (founder 2026-10-08: "Should be no vertical scroll bar here ... it should adjust
   dynamically"). The old 560px cap made five replays scroll inside the panel; now only the screen height limits it
   (rule above), so the list scrolls only when the window is too short to show everything. */
.as-np-list { overflow-y: auto; scrollbar-width: thin; }

/* Page Control in the frame (2026-10-08): app-shell.js sets [hidden] on the Connect button, bell, account-menu links and
   phone tabs that lead only to pages hidden from students; their display rules would otherwise override [hidden]. */
.as-cn[hidden], .as-bell[hidden], .as-um-item[hidden], .as-tab[hidden], .as-tabs[hidden] { display: none !important; }

/* Top-bar quick buttons (2026-10-08): My Websites + starred pages, styled like the Connect button next to them. */
.as-qb { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.as-qbtn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 9px; flex-shrink: 0; font-size: 0.82rem; font-weight: 600; color: #e8ecf8; text-decoration: none; white-space: nowrap; background: rgba(56, 182, 255, 0.1); border: 1px solid rgba(56, 182, 255, 0.35); }
.as-qbtn.is-fav { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.14); }
.as-qbtn:hover, .as-qbtn.is-on { color: #fff; background: rgba(56, 182, 255, 0.2); border-color: rgba(56, 182, 255, 0.6); }
.as-qbtn:focus-visible { outline: 2px solid var(--as-act); outline-offset: 2px; }
.as-qbtn .as-ic { display: inline-grid; place-items: center; }
.as-qbtn svg { width: 17px; height: 17px; color: #38b6ff; }
.as-qbtn.is-fav svg { color: #f5c542; }
@media (max-width: 1279px) { .as-qbtn.is-fav { width: 36px; padding: 0; justify-content: center; } .as-qbtn.is-fav .as-qb-tx { display: none; } }
@media (max-width: 1023px) { .as-qbtn { width: 36px; padding: 0; justify-content: center; } .as-qb-tx { display: none; } }
@media (max-width: 760px) { .as-qbtn.is-fav { display: none; } }

/* Text wordmark in the sidebar (founder 2026-10-08: "Remove the logo at the top navigation and use text to write
   AI Academy"): "AI Academy" (AI in the brand blue) with a small TANIMAWO line; an "AI" badge when the sidebar is folded. */
.as-logo .as-word { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; min-width: 0; }
html.taa-app:not(.as-rail) .as-logo .as-word { align-items: center; }
.as-logo .as-word strong { font-family: var(--font-head, inherit); font-size: 1.36rem; font-weight: 800; letter-spacing: -0.02em; color: #fff; white-space: nowrap; }
.as-logo .as-word strong b { font-weight: 800; background: linear-gradient(135deg, #1f7bff, #4fd1ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.as-logo .as-word small { margin-top: 5px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.34em; text-transform: uppercase; color: var(--as-mute); white-space: nowrap; padding-left: 0.34em; }
.as-logo .as-mono { display: none; }
html.as-rail .as-logo .as-mono {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; font: 800 1rem/1 var(--font-head, inherit); font-style: normal;
  color: #fff; background: linear-gradient(135deg, #1f7bff, #4fd1ff);
}
html.taa-app:not(.as-rail) .as-brand { padding-top: 18px; padding-bottom: 12px; }
/* Phones and tablets: the menu slides in at full width, so always the wordmark, never the badge. */
@media (max-width: 1023px) { html.as-rail .as-logo .as-word { display: flex; } html.as-rail .as-logo .as-mono { display: none; } }

/* The favicon at the top left, the wordmark beside it, the fold button on the right (founder 2026-10-08: "Put the
   favicon logo on the top left of the navigation and make it fit nicely"). Folded: the icon alone, centred. */
html.taa-app:not(.as-rail) .as-brand { justify-content: flex-start; padding: 14px 46px 12px 14px; }
html.taa-app:not(.as-rail) .as-brand .as-fold { top: 50%; transform: translateY(-50%); }
html.taa-app:not(.as-rail) .as-logo .as-word { align-items: flex-start; }
.as-logo { gap: 11px; }
.as-logo .as-mark {
  width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(79, 209, 255, 0.28), 0 6px 18px -8px rgba(31, 123, 255, 0.7);
}
.as-logo .as-word strong { font-size: 1.2rem; }
.as-logo .as-word small { margin-top: 4px; font-size: 0.56rem; letter-spacing: 0.3em; padding-left: 0; }
html.as-rail .as-logo .as-mark { width: 40px; height: 40px; }
html.as-rail .as-logo .as-mono { display: none; }
@media (max-width: 1023px) { html.as-rail .as-logo .as-mark { width: 42px; height: 42px; } }

/* The robot on its own, no box (founder 2026-10-08: "Hide the edges of the logo. I don't want to see the rectangles"):
   app-mark.png has a see-through background, so no corners, ring or shadow around it. */
.as-logo .as-mark { width: 44px; height: 44px; border-radius: 0; box-shadow: none; object-fit: contain; background: none; }
html.as-rail .as-logo .as-mark { width: 42px; height: 42px; }
@media (max-width: 1023px) { html.as-rail .as-logo .as-mark { width: 44px; height: 44px; } }

/* Founder alerts: a new sign-up or sign-in pops up under the top bar (app-shell.js popAlert). */
.as-alerts { position: fixed; top: calc(var(--as-top, 56px) + 10px); right: 14px; z-index: 1200; display: flex; flex-direction: column; gap: 8px; width: min(340px, calc(100vw - 28px)); pointer-events: none; }
.as-alert { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 12px 14px; border-radius: 12px; text-decoration: none; color: #e2e5ea;
  background: #0f1a33; border: 1px solid rgba(79, 209, 255, 0.35); box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.8); animation: as-alert-in 0.25s ease-out; transition: opacity 0.35s, transform 0.35s; }
.as-alert.is-out { opacity: 0; transform: translateY(-6px); }
.as-alert-dot { flex-shrink: 0; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18); }
.as-alert span { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.as-alert strong { font-size: 0.9rem; color: #fff; }
.as-alert small { font-size: 0.8rem; color: #9aa3b8; }
.as-alert-x { flex-shrink: 0; width: 26px; height: 26px; border: 0; border-radius: 7px; background: transparent; color: #8b93ad; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.as-alert-x:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
@keyframes as-alert-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .as-alert { animation: none; transition: none; } }
/* Connect button pulses when a new message comes in (app-shell.js connectUnread, 2026-10-08) */
.as-cn.is-ping { animation: asCnPing 1.2s ease-out 2; }
@keyframes asCnPing { 0% { box-shadow: 0 0 0 0 rgba(31, 123, 255, 0.7); } 100% { box-shadow: 0 0 0 14px rgba(31, 123, 255, 0); } }
@media (prefers-reduced-motion: reduce) { .as-cn.is-ping { animation: none; } }

/* The full logo at the top left (founder 2026-10-09: "Use this as the logo for the app to left side at the top
   navigation part"): app-logo.webp in place of the robot + text whenever the menu is open (and in the phone/tablet
   drawer); the folded sidebar keeps the robot alone. */
.as-logo .as-full { display: block; width: 196px; max-width: 100%; height: auto; flex-shrink: 1; filter: drop-shadow(0 6px 16px rgba(31, 123, 255, 0.35)); }
html:not(.as-rail) .as-logo .as-mark, html:not(.as-rail) .as-logo .as-word { display: none !important; }
html.as-rail .as-logo .as-full { display: none; }
html.taa-app:not(.as-rail) .as-brand { padding: 10px 44px 8px 10px; }
@media (max-width: 1023px) {
  html.as-rail .as-logo .as-full { display: block; }
  html.as-rail .as-logo .as-mark, html.as-rail .as-logo .as-word { display: none !important; }
}
/* A count on a menu item (Website Reviews; app-shell.js setNavBadge). */
.as-nbadge { margin-left: auto; flex: none; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px !important; font-size: 0.66rem; font-weight: 700; line-height: 18px; text-align: center; color: #fff; background: linear-gradient(135deg, #f472b6, #8b5cf6); box-shadow: 0 0 12px -2px rgba(244, 114, 182, 0.7); }
.as-rail .as-nbadge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; line-height: 16px; font-size: 0.6rem; }

/* ---------- Full screen (founder 2026-10-12): the side menu and the top bar are hidden, the page fills the screen; a small
   corner button leaves full screen (app-shell.js fsState). ---------- */
html.taa-app.as-full { --as-w: 0px; --as-rail: 0px; --as-top: 0px; }
html.taa-app.as-full body.as-on { padding-left: 0 !important; padding-top: 0 !important; }
html.as-full .as-side, html.as-full .as-top, html.as-full .as-scrim { display: none !important; }
/* Phones: full screen hides the bottom menu too (2026-10-12: "make sure the phone version is also updated"). */
html.as-full .as-tabs { display: none !important; }
html.as-full.as-has-tabs body { padding-bottom: env(safe-area-inset-bottom) !important; }
.as-fs-exit { position: fixed; z-index: 2147483000; top: 8px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(7, 13, 28, 0.72); color: #e8ecf8; font: 600 0.8rem Inter, "Segoe UI", sans-serif; cursor: pointer; opacity: 0.55; transition: opacity 0.2s; backdrop-filter: blur(6px); }
.as-fs-exit:hover, .as-fs-exit:focus-visible { opacity: 1; outline: 2px solid #38b6ff; outline-offset: 2px; }
.as-fs-exit[hidden] { display: none !important; }
.as-fs-exit svg { width: 16px; height: 16px; }
/* centred at the top on big screens (page headers keep their buttons on the right); a small icon in the corner on phones */
@media (max-width: 700px) { .as-fs-exit span { display: none; } .as-fs-exit { padding: 8px; left: auto; right: 10px; transform: none; } }
/* Phones never scroll sideways (founder 2026-10-12, iPhone 15 Pro Max: "make sure the mobile app width fits perfectly ...
   The mobile version should adjust dynamically to users phone"). Pages fit the screen on their own (checked at 430 and
   360px); this catches what is drawn a little wider for a moment, like a card waiting for its slide-in (.afx-pre tilts it
   about 5px past the edge). clip, not hidden, on body: it makes no new scroll box, so sticky bars and page scrolling work
   as before. iPhones before iOS 16 get hidden on html only. */
@media (max-width: 760px) {
  html { overflow-x: hidden; }
  @supports (overflow-x: clip) { html, body { overflow-x: clip; } }
}
/* The top bar adapts to small phones (founder 2026-10-12: "The mobile version should adjust dynamically to users phone"):
   below 480px the buttons sit closer and the menu button keeps its size (it was squeezed to 22px at 375px); at 360px and
   under the website link leaves the bar, so the page name still shows and nothing is cut off at 320px. */
@media (max-width: 480px) {
  .as-burger { flex: none; }
  .as-right { gap: 6px; }
  .as-site { padding: 6px 8px; }
}
@media (max-width: 360px) {
  .as-right { gap: 4px; }
  .as-right > .as-site { display: none; }
}