/* Bethebest sitewide brand layer. Loaded after route styles. */
:root {
  --brand: #00483D;
  --brand-title: #073F37;
  --brand-deep: #004A3F;
  --mint: #A8D8CB;
  --mint-soft: #EAF5F1;
  --page: #FAFBFA;
  --surface: #FFFFFF;
  --text: #4E5452;
  --muted: #6D7470;
  --muted-reference: #747B78;
  --border: #E3E8E5;
  --divider: #D9DFDC;
  --focus: color-mix(in srgb, var(--brand) 72%, white);
  --brand-shadow: 0 8px 30px rgb(0 72 61 / 0.05);
  --brand-shadow-raised: 0 18px 48px rgb(0 72 61 / 0.12);
  --brand-font: "PingFang SC", "Source Han Sans SC", "HarmonyOS Sans SC", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --brand-radius-control: 12px;
  --brand-radius-card: 20px;
  color-scheme: light;
}

html.theme-dark {
  --page: #071712;
  --surface: #0D241E;
  --text: #DCEAE5;
  --muted: #A9BDB6;
  --border: #234139;
  --divider: #2C4B42;
  --brand-title: #D9F1E9;
  --mint: #7DB7A7;
  --mint-soft: #15372E;
  --focus: #A8D8CB;
  --brand-shadow: 0 8px 30px rgb(0 0 0 / 0.18);
  --brand-shadow-raised: 0 18px 48px rgb(0 0 0 / 0.28);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html:not(.theme-light) {
    --page: #071712;
    --surface: #0D241E;
    --text: #DCEAE5;
    --muted: #A9BDB6;
    --border: #234139;
    --divider: #2C4B42;
    --brand-title: #D9F1E9;
    --mint: #7DB7A7;
    --mint-soft: #15372E;
    --focus: #A8D8CB;
    --brand-shadow: 0 8px 30px rgb(0 0 0 / 0.18);
    --brand-shadow-raised: 0 18px 48px rgb(0 0 0 / 0.28);
    color-scheme: dark;
  }
}

html {
  background: var(--page);
  font-family: var(--brand-font);
}

body {
  background: var(--page);
  color: var(--text);
  font-family: var(--brand-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where(h1, h2, h3, h4, h5, h6) {
  color: var(--brand-title);
  font-family: var(--brand-font);
  text-wrap: balance;
}

:where(p, li, blockquote) {
  text-wrap: pretty;
}

:where(a) {
  color: var(--brand);
  text-underline-offset: 0.18em;
}

:where(button, input, textarea, select) {
  font: inherit;
}

:where(button, [type="button"], [type="submit"], [role="button"]) {
  border-radius: var(--brand-radius-control);
}

:where(input, textarea, select) {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
  border-radius: var(--brand-radius-control);
}

:where(input, textarea)::placeholder {
  color: color-mix(in srgb, var(--text) 72%, var(--surface));
  opacity: 1;
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

#bbThemeToggle {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--brand-title);
  box-shadow: var(--brand-shadow);
}

#bbThemeToggle:hover {
  background: var(--mint-soft);
  border-color: var(--mint);
}

::selection {
  background: var(--mint);
  color: #073F37;
}

/* Legacy token bridge: every existing route consumes the same palette. */
:root,
html.theme-dark {
  --bg: var(--page);
  --bg-top: var(--page);
  --card: var(--surface);
  --ink: var(--text);
  --title: var(--brand-title);
  --deep: var(--brand-deep);
  --surface-raised: var(--surface);
  --surface-muted: var(--mint-soft);
  --surface-subtle: color-mix(in srgb, var(--mint-soft) 70%, var(--surface));
  --muted-strong: color-mix(in srgb, var(--text) 84%, var(--brand));
  --line: var(--border);
  --line-strong: var(--divider);
  --accent: var(--brand);
  --accent-hover: var(--brand-title);
  --accent-strong: var(--brand-title);
  --accent-soft: var(--mint-soft);
  --primary: var(--brand);
  --primary-hover: var(--brand-title);
  --primary-soft: var(--mint-soft);
  --project: var(--brand);
  --settlement: #08705F;
  --success: #08705F;
  --success-soft: color-mix(in srgb, var(--mint-soft) 82%, var(--surface));
  --warning: #8A5A10;
  --warning-soft: #FFF6E7;
  --danger: #A33A34;
  --danger-soft: #FFF3F1;
  --shadow-sm: 0 1px 2px rgb(0 72 61 / 0.05);
  --shadow-panel: var(--brand-shadow);
  --shadow-lift: var(--brand-shadow-raised);
  --radius: var(--brand-radius-card);
  --radius-sm: var(--brand-radius-control);
  --radius-lg: var(--brand-radius-card);
}

html.theme-dark {
  --warning-soft: #352814;
  --danger-soft: #351C1A;
  --success-soft: #15372E;
}

body.page,
.settlement-page,
.rules-page,
.about-page {
  background: var(--page);
  color: var(--text);
}

body.page::before,
body.page::after {
  background: none;
}

/* Public navigation and layout */
.site-sidebar {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 10px 0 32px rgb(0 72 61 / 0.035);
}

.sidebar-brand,
.sidebar-brand:visited {
  color: var(--brand-title);
  letter-spacing: -0.02em;
}

.sidebar-brand .o {
  color: var(--brand);
}

.sidebar-label {
  color: var(--muted);
  font-family: var(--brand-font);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: none;
}

.sidebar-link {
  color: var(--text);
  border: 1px solid transparent;
  border-radius: var(--brand-radius-control);
}

.sidebar-link:hover,
.sidebar-link.is-active {
  color: var(--brand-title);
  background: var(--mint-soft);
  border-color: color-mix(in srgb, var(--mint) 58%, var(--border));
}

.sidebar-link.is-active::before {
  content: none;
}

.sidebar-foot {
  color: var(--muted);
  border-color: var(--divider);
}

.user-header,
.topbar,
.home-brand {
  border-color: var(--divider) !important;
}

.home-brand a,
.home-brand span,
.topbar h1,
.panel-title h1,
.user-header h1 {
  color: var(--brand-title) !important;
}

.home-brand span,
.page-subtitle,
.contact-note,
.feed-note,
.action-hint,
.form-message,
.count-pill {
  color: var(--muted) !important;
}

.eyebrow,
.hero-kicker,
.project-kicker,
.ideas-hero::before {
  color: var(--brand) !important;
}

/* Public hero: large, left aligned, restrained. */
.home-hero,
.ideas-hero,
.project-hero {
  background: var(--page);
}

.home-copy,
.home-hero .home-copy {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.home-copy h1,
.home-hero h1,
.ideas-hero h1,
.project-hero h1 {
  max-width: 900px !important;
  color: var(--brand-title) !important;
  font-size: clamp(2.65rem, 6vw, 5.25rem) !important;
  font-weight: 800 !important;
  line-height: 1.04 !important;
  letter-spacing: -0.035em !important;
  text-wrap: balance;
}

.home-lede,
.ideas-hero p,
.project-intro p,
.tool-hero-copy,
.tool-detail-text,
.tool-detail-list {
  color: var(--text) !important;
  max-width: 68ch;
}

/* Public surfaces */
.content-shell,
.home-panel,
.service-card,
.post-card,
.ticker-window,
.home-settlement-ticker,
.ideas-note,
.ideas-summary,
.tool-action-panel,
.ledger-query-shell,
.ledger-table-wrap,
.project-apple-page .content-shell,
.project-apple-page .post-card,
.project-apple-page .ledger-table-wrap {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: var(--brand-shadow) !important;
}

.content-shell,
.home-panel,
.service-card,
.ticker-window,
.home-settlement-ticker,
.ideas-note,
.ideas-summary,
.tool-action-panel,
.ledger-query-shell {
  border-radius: var(--brand-radius-card) !important;
}

.post-card {
  border-radius: 16px !important;
  box-shadow: none !important;
}

.post-card:hover,
.home-panel:hover,
.ledger-admin-card:hover {
  background: var(--mint-soft) !important;
  border-color: var(--mint) !important;
  transform: none;
}

.feed-head,
.ticker-head,
.ledger-table th,
.ledger-table td {
  border-color: var(--divider) !important;
}

.project-apple-page .feed-head {
  background: var(--surface) !important;
}

.feed-head h2,
.home-panel h2,
.about-section h2,
.section-head h2 {
  color: var(--brand-title) !important;
  letter-spacing: -0.02em;
}

.feed-head h2::before,
.home-panel h2::before,
.field-label::before,
.post-meta::before {
  content: none !important;
}

.post-card p,
.post-card time,
.about-section p,
.ticker-list,
.ledger-table,
.tool-detail-list li {
  color: var(--text);
}

.count-pill,
.live-status {
  background: var(--mint-soft) !important;
  border-color: var(--border) !important;
  color: var(--brand-title) !important;
}

.live-status.connected span,
.state-dot,
.live-dot {
  background: var(--brand) !important;
}

/* Shared actions */
button,
.btn-primary,
.home-panel a,
.ideas-explore-button,
.tool-actions a {
  background: var(--brand);
  color: #FFFFFF;
  border-color: var(--brand);
  box-shadow: none;
}

button:hover,
.btn-primary:hover,
.home-panel a:hover,
.ideas-explore-button:hover,
.tool-actions a:hover {
  background: var(--brand-title);
  color: #FFFFFF;
  border-color: var(--brand-title);
  box-shadow: none;
}

.btn-ghost,
.ghost-button,
.text-button,
.button-quiet {
  background: var(--surface) !important;
  color: var(--brand-title) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

.btn-ghost:hover,
.ghost-button:hover,
.text-button:hover,
.button-quiet:hover {
  background: var(--mint-soft) !important;
  border-color: var(--mint) !important;
}

.ledger-query-form input,
.composer-form :where(input, textarea),
.field :where(input, textarea, select) {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.ledger-query-form input:focus,
.composer-form :where(input, textarea):focus,
.field :where(input, textarea, select):focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mint) 60%, transparent) !important;
}

.ledger-table th {
  background: var(--mint-soft) !important;
  color: var(--brand-title) !important;
}

.ledger-table td {
  background: var(--surface);
}

.about-section a,
.project-contact strong {
  color: var(--brand) !important;
}

.project-apple-page,
html.theme-dark .project-apple-page {
  --project-apple-bg: var(--page);
  --project-apple-surface: var(--surface);
  --project-apple-surface-soft: var(--mint-soft);
  --project-apple-ink: var(--brand-title);
  --project-apple-secondary: var(--text);
  --project-apple-tertiary: var(--muted);
  --project-apple-line: var(--border);
  --project-apple-blue: var(--brand);
  --project-apple-mint: var(--mint);
  background: var(--page) !important;
}

/* Compact administrator workspace */
.admin-page {
  background: var(--page);
  color: var(--text);
}

.admin-page .admin-layout {
  width: min(1320px, calc(100% - 40px));
  gap: 16px;
}

.login-panel {
  max-width: 440px;
  padding: 28px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--brand-radius-card) !important;
  box-shadow: var(--brand-shadow) !important;
}

.login-panel h1 {
  color: var(--brand-title) !important;
}

.admin-topbar {
  min-height: 64px;
  padding: 10px 14px !important;
  background: color-mix(in srgb, var(--page) 92%, transparent) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: var(--brand-shadow);
  backdrop-filter: blur(12px);
}

.admin-topbar-actions,
.admin-view-switch,
.composer-actions,
.ledger-sidebar-actions,
.leaderboard-actions {
  gap: 10px;
}

.admin-view-switch {
  padding: 4px;
  background: var(--mint-soft);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.admin-view-switch .ghost-button {
  min-height: 38px;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
}

.admin-view-switch .ghost-button.is-active,
.admin-view-switch .ghost-button[aria-pressed="true"] {
  background: var(--surface) !important;
  color: var(--brand-title) !important;
  box-shadow: 0 2px 8px rgb(0 72 61 / 0.08) !important;
}

.admin-page .dashboard,
.admin-page .admin-sections,
.admin-page .user-sections,
.thinking-workspace,
.thinking-main,
.thinking-sidebar {
  gap: 16px;
}

.admin-panel,
.billing-summary-shell,
.net-profit-growth-shell,
.profit-leaderboard,
.profit-leaderboard-shell,
.weekly-review-shell,
.thinking-overview-shell,
.thinking-support-shell,
.thinking-draft-form,
.thinking-editor-form,
.thinking-detail-card,
.thinking-detail-block,
.llm-chat,
.llm-chat-shell,
.ledger-batch-box,
.ledger-recent-block {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: var(--brand-shadow) !important;
}

.admin-panel,
.billing-summary-shell,
.net-profit-growth-shell,
.profit-leaderboard-shell,
.weekly-review-shell,
.thinking-overview-shell,
.thinking-support-shell,
.llm-chat-shell {
  padding: 18px !important;
}

.admin-panel:focus-within,
.thinking-draft-form:focus-within,
.thinking-editor-form:focus-within,
.llm-chat-shell:focus-within {
  border-color: var(--mint) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mint) 45%, transparent) !important;
}

.admin-page :where(.panel-title, .feed-head, .net-profit-growth-head, .billing-block-head) h2,
.admin-page :where(.panel-title, .feed-head, .net-profit-growth-head, .billing-block-head) h3 {
  color: var(--brand-title) !important;
}

.billing-kpi-grid {
  gap: 12px;
}

.billing-kpi,
.billing-chart-block,
.billing-recent-block,
.net-profit-growth-copy,
.net-profit-growth-chart-wrap,
.net-profit-growth-stats {
  background: var(--mint-soft) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

.billing-kpi {
  padding: 16px !important;
}

.billing-kpi strong,
.net-profit-growth-copy strong,
.net-profit-growth-chart-head strong,
.net-profit-growth-stats dd,
.ideas-panel-stats dd {
  color: var(--brand-title) !important;
  font-variant-numeric: tabular-nums;
}

.billing-bar-track,
.billing-rank-track {
  background: color-mix(in srgb, var(--border) 70%, var(--surface)) !important;
}

.billing-bar-track span,
.billing-rank-track span,
.net-profit-growth-line {
  background: var(--brand) !important;
  stroke: var(--brand) !important;
}

.net-profit-growth-area {
  fill: color-mix(in srgb, var(--mint) 45%, transparent) !important;
}

.net-profit-growth-y-axis line,
.net-profit-growth-cursor-line {
  stroke: var(--divider) !important;
}

.net-profit-growth-y-axis text,
.net-profit-growth-axis,
.net-profit-growth-label,
.billing-kpi span,
.billing-kpi small {
  color: var(--muted) !important;
  fill: var(--muted) !important;
}

.period-toggle {
  padding: 4px;
  background: var(--mint-soft) !important;
  border: 1px solid var(--border);
}

.period-toggle button {
  min-height: 36px;
  background: transparent !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.period-toggle button.is-active,
.period-toggle button[aria-pressed="true"] {
  background: var(--brand) !important;
  color: #FFFFFF !important;
}

.ledger-table-wrap,
.profit-leaderboard-table {
  border-color: var(--border) !important;
  box-shadow: none !important;
}

.ledger-table th,
.profit-leaderboard-table th {
  background: var(--mint-soft) !important;
  color: var(--brand-title) !important;
  border-color: var(--divider) !important;
}

.ledger-table td,
.profit-leaderboard-table td {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--divider) !important;
}

.rank-badge {
  background: var(--mint-soft) !important;
  color: var(--brand-title) !important;
}

.llm-chat-messages,
.llm-chat-empty {
  background: var(--mint-soft) !important;
  border-color: var(--border) !important;
}

.llm-chat-user {
  background: var(--brand) !important;
  color: #FFFFFF !important;
}

.llm-chat-assistant {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border);
}

.llm-chat-form textarea,
.thinking-draft-form textarea,
.thinking-editor-form :where(input, textarea, select),
.composer-form :where(input, textarea) {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.ledger-sidebar {
  background: var(--surface) !important;
  color: var(--text);
  border-color: var(--border) !important;
  box-shadow: -18px 0 48px rgb(0 72 61 / 0.12) !important;
}

.ledger-sidebar .feed-head {
  background: var(--surface) !important;
  border-color: var(--divider) !important;
}

.ledger-quick-chips button,
.chips-row button {
  min-height: 36px;
  background: var(--mint-soft) !important;
  color: var(--brand-title) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

.delete-button,
.clear-button,
button.danger {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border)) !important;
  box-shadow: none !important;
}

.delete-button:hover,
.clear-button:hover,
button.danger:hover {
  background: color-mix(in srgb, var(--danger-soft) 78%, var(--danger)) !important;
}

/* Daily todo */
.todo-app {
  background: var(--page);
  color: var(--text);
}

.todo-app .app-shell {
  width: min(1180px, calc(100% - 40px));
  gap: 18px;
}

.todo-app .topbar {
  border-color: var(--divider);
}

.todo-app .kicker,
.todo-app .calendar-kicker,
.todo-app .form-hint,
.todo-app .list-header p,
.todo-app .calendar-legend {
  color: var(--muted) !important;
}

.todo-app .entry-panel,
.todo-app .list-panel,
.todo-app .calendar-panel,
.todo-app .summary-item,
.todo-app .task-item {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: var(--brand-shadow) !important;
}

.todo-app .entry-panel,
.todo-app .list-panel,
.todo-app .calendar-panel {
  border-radius: var(--brand-radius-card) !important;
}

.todo-app .summary-item,
.todo-app .task-item {
  border-radius: 14px !important;
  box-shadow: none !important;
}

.todo-app .summary-item span,
.todo-app .task-title,
.todo-app .task-duration {
  color: var(--brand-title) !important;
}

.todo-app .task-item:hover {
  background: var(--mint-soft) !important;
  border-color: var(--mint) !important;
}

.todo-app .task-item.is-done {
  background: color-mix(in srgb, var(--mint-soft) 72%, var(--surface)) !important;
}

.todo-app .primary-button {
  background: var(--brand) !important;
  color: #FFFFFF !important;
  border-radius: var(--brand-radius-control) !important;
  box-shadow: none !important;
}

.todo-app .icon-button,
.todo-app .calendar-nav-button,
.todo-app .text-button {
  background: var(--surface) !important;
  color: var(--brand-title) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

.todo-app .status-pill {
  background: var(--surface) !important;
  border-color: var(--mint) !important;
}

.todo-app .task-check:checked + .status-pill {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}

.todo-app .calendar-day {
  border: 1px solid transparent;
  box-shadow: none;
}

.todo-app .calendar-day--complete,
.todo-app .legend-dot--complete {
  background: var(--brand) !important;
  color: #FFFFFF !important;
}

.todo-app .calendar-day--incomplete,
.todo-app .legend-dot--incomplete {
  background: color-mix(in srgb, var(--brand) 64%, var(--muted)) !important;
  color: #FFFFFF !important;
}

.todo-app .calendar-day--empty,
.todo-app .legend-dot--empty {
  background: var(--mint-soft) !important;
  color: var(--brand-title) !important;
  border-color: var(--border);
}

.todo-app .calendar-day.is-selected {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand) !important;
}

.todo-app .empty-mark {
  background: var(--mint-soft) !important;
  color: var(--brand) !important;
}

/* Fragment inbox */
.inbox-app {
  background: var(--page);
  color: var(--text);
}

.inbox-app .gate-card,
.inbox-app .composer,
.inbox-app .fragment {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: var(--brand-shadow) !important;
}

.inbox-app .gate-card,
.inbox-app .composer,
.inbox-app .fragment {
  border-radius: 16px !important;
}

.inbox-app .composer textarea,
.inbox-app .search-input,
.inbox-app .field input {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.inbox-app .filter-tabs {
  background: var(--mint-soft) !important;
  border-color: var(--border) !important;
  border-radius: 14px !important;
}

.inbox-app .filter-tab {
  min-height: 36px;
  background: transparent !important;
  color: var(--text) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.inbox-app .filter-tab.is-active {
  background: var(--surface) !important;
  color: var(--brand-title) !important;
  border-radius: 10px !important;
}

.inbox-app .fragment:hover,
.inbox-app .fragment:focus-within {
  background: var(--mint-soft) !important;
  border-color: var(--mint) !important;
}

.inbox-app .fragment.is-promoted {
  border-left-width: 1px !important;
  background: var(--success-soft) !important;
}

.inbox-app .fragment.is-new {
  border-left-width: 1px !important;
  background: var(--warning-soft) !important;
}

.inbox-app .source-badge,
.inbox-app .status-chip,
.inbox-app .tag-chip,
.inbox-app .count-pill {
  background: var(--mint-soft) !important;
  color: var(--brand-title) !important;
}

.inbox-app .action {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

.inbox-app .action:hover,
.inbox-app .action.promote:hover {
  background: var(--mint-soft) !important;
  color: var(--brand-title) !important;
  border-color: var(--mint) !important;
}

.inbox-app .action.danger:hover {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  border-color: var(--danger) !important;
}

.inbox-app .toast {
  background: var(--brand-deep) !important;
  color: #FFFFFF !important;
}

/* Editable student credential demo */
.student-demo {
  --phone-bg: var(--surface);
  --page-bg: var(--page);
  --green-a: var(--brand);
  --green-b: var(--brand);
  --blue: var(--brand);
  background: var(--page);
  color: var(--text);
}

.student-demo .mock-screen,
.student-demo .editor-panel {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: var(--brand-shadow) !important;
}

.student-demo .mock-screen {
  border-radius: 24px;
}

.student-demo .app-status,
.student-demo .app-nav,
.student-demo .detail-list {
  background: var(--surface) !important;
  color: var(--brand-title) !important;
  border-color: var(--divider) !important;
}

.student-demo .status-icons::before {
  background: var(--brand) !important;
  width: 30px;
  height: 4px;
  border-radius: 999px;
}

.student-demo .status-icons::after {
  border-color: var(--brand) !important;
  box-shadow: inset 28px 0 0 var(--mint) !important;
}

.student-demo .notice-bar {
  background: var(--mint-soft) !important;
  color: var(--brand-title) !important;
}

.student-demo .survey-banner {
  background: var(--mint-soft) !important;
  color: var(--brand-title) !important;
  border: 1px solid var(--border);
  border-radius: 16px !important;
}

.student-demo .survey-banner span {
  background: var(--surface) !important;
  color: var(--brand-title) !important;
}

.student-demo .banner-buildings {
  background: var(--mint) !important;
  border-radius: 18px 18px 4px 4px;
  opacity: 0.58;
}

.student-demo .student-card {
  background: var(--brand-deep) !important;
  border: 1px solid color-mix(in srgb, var(--mint) 38%, var(--brand-deep));
  border-radius: 20px !important;
  box-shadow: 0 16px 38px rgb(0 72 61 / 0.16) !important;
}

.student-demo .student-card :where(h1, p, strong, span) {
  color: #FFFFFF !important;
}

.student-demo .student-card .school-line span {
  background: color-mix(in srgb, var(--mint) 34%, var(--brand-deep)) !important;
  border-color: color-mix(in srgb, var(--mint) 52%, var(--brand-deep)) !important;
}

.student-demo .student-card .major-line i {
  background: color-mix(in srgb, var(--mint) 60%, transparent) !important;
}

.student-demo .portrait-frame,
.student-demo .portrait-placeholder {
  border-color: color-mix(in srgb, var(--mint) 60%, #FFFFFF) !important;
  background: color-mix(in srgb, var(--surface) 88%, var(--mint)) !important;
}

.student-demo .portrait-placeholder span {
  position: relative;
  background: none !important;
}

.student-demo .portrait-placeholder span::before,
.student-demo .portrait-placeholder span::after {
  position: absolute;
  left: 50%;
  background: color-mix(in srgb, var(--mint) 58%, var(--border));
  content: "";
  transform: translateX(-50%);
}

.student-demo .portrait-placeholder span::before {
  top: 8%;
  width: 36%;
  aspect-ratio: 1;
  border-radius: 50%;
}

.student-demo .portrait-placeholder span::after {
  bottom: 0;
  width: 66%;
  height: 60%;
  border-radius: 999px 999px 12px 12px;
}

.student-demo .editor-form label,
.student-demo .editor-form input {
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.student-demo .editor-form input {
  background: var(--surface) !important;
}

.student-demo .editor-form button,
.student-demo .photo-labels button {
  background: var(--brand) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

/* 365GPT support workspace */
.support-app {
  --card: var(--surface);
  --title: var(--brand-title);
  --deep: var(--brand-deep);
  --danger-bg: var(--danger-soft);
  --danger-border: color-mix(in srgb, var(--danger) 30%, var(--border));
  --font: var(--brand-font);
  background: var(--page);
  color: var(--text);
}

.support-app::before {
  content: none;
}

.support-app .topbar,
.support-app .support-shell,
.support-app .page-shell {
  border-color: var(--divider);
}

.support-app .hero h1 {
  color: var(--brand-title) !important;
  letter-spacing: -0.035em !important;
}

.support-app .work-card,
.support-app .input-card,
.support-app .decision-card,
.support-app .response-card,
.support-app .source-details {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: var(--brand-shadow) !important;
}

.support-app .work-card {
  border-radius: var(--brand-radius-card) !important;
}

.support-app #conversationInput,
.support-app #replyDraft {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.support-app .button-primary,
.support-app .copy-button {
  background: var(--brand) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

.support-app .button-secondary,
.support-app .button-quiet,
.support-app .file-button {
  background: var(--surface) !important;
  color: var(--brand-title) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

.support-app .step,
.support-app .empty-icon,
.support-app .result-badge,
.support-app .status-chip {
  background: var(--mint-soft) !important;
  color: var(--brand) !important;
}

.support-app .evidence-list li {
  background: var(--mint-soft) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
}

.support-app .candidate-track {
  background: var(--mint-soft) !important;
}

.support-app .candidate-track i {
  background: var(--brand) !important;
}

.support-app .safety-box {
  background: var(--warning-soft) !important;
  border-color: color-mix(in srgb, var(--warning) 30%, var(--border)) !important;
}

.support-app .safety-box.danger {
  background: var(--danger-soft) !important;
  border-color: var(--danger-border) !important;
}

.support-app .safety-box.success {
  background: var(--success-soft) !important;
  border-color: color-mix(in srgb, var(--success) 30%, var(--border)) !important;
}

.support-app .source-details summary:hover {
  background: var(--mint-soft) !important;
}

html.theme-dark .support-app :where(.step, .empty-icon, .result-badge, .status-chip) {
  color: var(--brand-title) !important;
}

@media (max-width: 900px) {
  .todo-app .app-shell,
  .inbox-app .page-shell {
    width: min(100% - 24px, 1180px);
  }

  .student-demo .phone-shell {
    width: min(100% - 24px, 1180px);
  }
}

@media (max-width: 720px) {
  .admin-page .admin-layout {
    width: min(100% - 24px, 1320px);
  }

  .admin-topbar {
    position: static;
    align-items: stretch;
  }

  .admin-topbar-actions,
  .admin-view-switch {
    width: 100%;
  }

  .admin-view-switch .ghost-button {
    flex: 1 1 0;
  }
}

@media (max-width: 860px) {
  .page.has-sidebar,
  body.has-sidebar {
    padding-top: 108px !important;
    padding-left: 0 !important;
  }

  .site-sidebar {
    min-height: 96px;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    overflow: visible;
    border-color: var(--border);
    box-shadow: 0 8px 24px rgb(0 72 61 / 0.06);
  }

  .site-sidebar .sidebar-brand {
    width: 100%;
    justify-content: center;
    margin: 0;
    line-height: 1.2;
  }

  .site-sidebar .sidebar-link {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
    padding: 7px 5px;
    font-size: 12px;
  }

  .user-sections,
  .single-user-section,
  .settlement-shell,
  .ledger-query-shell,
  .content-shell {
    min-width: 0;
  }

  .ledger-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }

  .home-copy h1,
  .home-hero h1,
  .ideas-hero h1,
  .project-hero h1 {
    font-size: clamp(2.2rem, 11vw, 3.4rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}