.inactivity-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.inactivity-modal {
  background: white;
  border-radius: 12px;
  padding: 32px;
  max-width: 450px;
  width: 90%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  text-align: center;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.inactivity-modal-icon {
  font-size: 48px;
  margin-bottom: 16px;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.inactivity-modal h2 {
  margin: 0 0 16px 0;
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

.inactivity-message {
  color: #666;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 24px;
}

.inactivity-countdown {
  font-size: 48px;
  font-weight: bold;
  color: #e74c3c;
  margin: 24px 0;
  font-family: 'Courier New', monospace;
  animation: countdownPulse 1s ease-in-out infinite;
}

@keyframes countdownPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.inactivity-hint {
  color: #888;
  font-size: 14px;
  margin-bottom: 24px;
}

.inactivity-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.inactivity-actions button {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.inactivity-actions .btn-primary {
  background: #3498db;
  color: white;
}

.inactivity-actions .btn-primary:hover {
  background: #2980b9;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.inactivity-actions .btn-secondary {
  background: #ecf0f1;
  color: #555;
}

.inactivity-actions .btn-secondary:hover {
  background: #bdc3c7;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .inactivity-modal {
    background: #2c3e50;
    color: #ecf0f1;
  }

  .inactivity-modal h2 {
    color: #ecf0f1;
  }

  .inactivity-message {
    color: #bdc3c7;
  }

  .inactivity-hint {
    color: #95a5a6;
  }

  .inactivity-actions .btn-secondary {
    background: #34495e;
    color: #ecf0f1;
  }

  .inactivity-actions .btn-secondary:hover {
    background: #2c3e50;
  }
}

/* Responsive for small screens */
@media (max-width: 480px) {
  .inactivity-modal {
    padding: 24px 20px;
    max-width: 90%;
    border-radius: 10px;
  }
  
  .inactivity-modal-icon {
    font-size: 40px;
    margin-bottom: 12px;
  }
  
  .inactivity-modal h2 {
    font-size: 20px;
    margin-bottom: 12px;
  }
  
  .inactivity-message {
    font-size: 14px;
    margin-bottom: 20px;
  }
  
  .inactivity-countdown {
    font-size: 40px;
    margin: 20px 0;
  }
  
  .inactivity-hint {
    font-size: 12px;
    margin-bottom: 20px;
  }
  
  .inactivity-actions {
    flex-direction: column;
    gap: 10px;
  }
  
  .inactivity-actions button {
    width: 100%;
    padding: 10px 20px;
    font-size: 14px;
  }
}
/* Language selector trigger (dark top-bar chrome) + a themed portal menu. */
.tn-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 9px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbc6bc;
  cursor: pointer;
  font-family: var(--display);
}

.tn-lang:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.tn-lang-ic {
  flex: 0 0 auto;
  opacity: 0.9;
}

.tn-lang-current {
  font-size: 12px;
  font-weight: 600;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tn-lang-chev {
  flex: 0 0 auto;
  opacity: 0.7;
}

/* Mobile topbar is space-constrained (≤375px), so the language toggle is
   icon-only — just the globe. The current language is still shown in the
   dropdown menu it opens. */
.tn-lang-mobile {
  height: 32px;
  width: 32px;
  padding: 0;
  gap: 0;
  justify-content: center;
  flex: 0 0 auto;
}
.tn-lang-mobile .tn-lang-current,
.tn-lang-mobile .tn-lang-chev {
  display: none;
}

/* Portal menu — a normal themed surface (readable in light/dark), mirrors UserMenu. */
.tn-lang-menu {
  position: fixed;
  z-index: 1000;
  min-width: 160px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(40, 34, 24, 0.18);
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: tn-lang-pop 0.12s ease both;
}

@keyframes tn-lang-pop {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.tn-lang-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: none;
  border-radius: 7px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink2);
  cursor: pointer;
  text-align: left;
}

.tn-lang-item:hover {
  background: var(--surface2);
  color: var(--ink);
}

.tn-lang-item.is-active {
  background: var(--accent-soft);
  color: var(--ink);
}

.tn-lang-item-check {
  display: inline-flex;
  width: 14px;
  flex: 0 0 auto;
  color: var(--accent-deep);
}
/* ============================================================
   Tooltip primitive — accessible hover/focus popover.
   Dark popover from tokens; positioned + reduced-motion aware.
   ============================================================ */

.tn-tip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Trigger: keep the label's own styling; just make it focus-reachable. */
.tn-tip-trigger {
  display: inline-flex;
  align-items: center;
  cursor: help;
  outline: none;
}
.tn-tip-trigger:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Info-icon variant. */
.tn-tip-info {
  background: none;
  border: none;
  padding: 0;
  margin-left: 4px;
  color: var(--ink3);
  cursor: help;
  display: inline-grid;
  place-items: center;
  line-height: 0;
}
.tn-tip-info:hover {
  color: var(--ink2);
}

/* Popover. */
.tn-tip-pop {
  position: absolute;
  left: 50%;
  z-index: 1200;
  max-width: 240px;
  width: max-content;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.1px;
  text-transform: none;
  text-align: left;
  white-space: normal;
  box-shadow: var(--sh-pop);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(2px);
  transition:
    opacity 0.12s ease,
    transform 0.12s ease,
    visibility 0.12s;
}
.tn-tip-top {
  bottom: calc(100% + 8px);
}
.tn-tip-bottom {
  top: calc(100% + 8px);
}
.tn-tip-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Portaled variant: rendered into <body>, positioned in fixed/viewport coords
   via inline top/left, so no ancestor `overflow` can clip it. The two-class
   selectors below override the absolute-mode `top/bottom` + `.tn-tip-open`
   transform. */
.tn-tip-portal {
  position: fixed;
  top: auto;
  bottom: auto;
}
.tn-tip-portal.tn-tip-bottom {
  transform: translate(-50%, 0);
}
.tn-tip-portal.tn-tip-top {
  /* `top` is the anchor (trigger top − margin); lift the popover fully above. */
  transform: translate(-50%, -100%);
}

/* Arrow. */
.tn-tip-arrow {
  position: absolute;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--ink);
  transform: translateX(-50%) rotate(45deg);
}
.tn-tip-top .tn-tip-arrow {
  bottom: -3px;
}
.tn-tip-bottom .tn-tip-arrow {
  top: -3px;
}

@media (prefers-reduced-motion: reduce) {
  .tn-tip-pop {
    transition: none;
    transform: translateX(-50%);
  }
  .tn-tip-open {
    transform: translateX(-50%);
  }
}
/* ============================================================
   NotificationCenter — anchored popover for the topbar bell.
   The trigger lives on the dark chrome topbar, but the panel itself
   uses themed design-system surface tokens so it reads correctly in
   both light and dark mode.
   ============================================================ */

.tn-noti-anchor {
  position: relative;
}

/* Invisible measuring marker kept inside the bell anchor (the panel itself is
   portaled to <body>). */
.tn-noti-marker {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Panel is portaled to <body> and fixed so the dark chrome can't clip it. */
.tn-noti {
  position: fixed;
  z-index: 1300;
  width: 360px;
  max-width: calc(100vw - 16px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--sh-lg);
  display: flex;
  flex-direction: column;
  max-height: min(560px, calc(100vh - 90px));
  overflow: hidden;
  color: var(--ink);
  animation: tn-noti-in 0.14s ease-out;
}

/* Desktop: top / right are set inline from the bell rect. */
.tn-noti-right {
  top: 64px;
  right: 12px;
}

/* Mobile: top-anchored sheet just under the 56px sticky topbar. */
.tn-noti-mobile {
  top: 60px;
  right: 8px;
  left: 8px;
  width: auto;
  max-width: none;
  max-height: min(70vh, calc(100vh - 80px));
}

.tn-noti-scrim {
  position: fixed;
  inset: 0;
  z-index: 1290;
  background: rgba(20, 16, 10, 0.4);
  animation: tn-noti-in 0.14s ease-out;
}

@keyframes tn-noti-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Header ---- */
.tn-noti-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 12px 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}

.tn-noti-head-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}

.tn-noti-head-ic {
  width: 16px;
  height: 16px;
  color: var(--ink2);
}

.tn-noti-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--red-bg);
  color: var(--red);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
}

.tn-noti-head-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tn-noti-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--accent-deep);
  font-family: var(--mono);
  font-size: 11px;
  padding: 5px 7px;
  border-radius: var(--radius-sm);
  transition:
    background 0.14s,
    color 0.14s;
}

.tn-noti-link svg {
  width: 13px;
  height: 13px;
}

.tn-noti-link:hover:not(:disabled) {
  background: var(--accent-soft);
}

.tn-noti-link:disabled {
  color: var(--ink3);
  cursor: not-allowed;
}

.tn-noti-close {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink3);
  transition:
    background 0.14s,
    color 0.14s;
}

.tn-noti-close svg {
  width: 15px;
  height: 15px;
}

.tn-noti-close:hover {
  background: var(--bg2);
  color: var(--ink);
}

/* ---- Body ---- */
.tn-noti-body {
  overflow-y: auto;
  flex: 1;
}

/* ---- States (loading / error / empty) ---- */
.tn-noti-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 20px;
  text-align: center;
  color: var(--ink3);
  font-size: 12px;
}

.tn-noti-state svg {
  width: 18px;
  height: 18px;
}

.tn-noti-state-error {
  color: var(--red);
}

.tn-noti-retry,
.tn-noti-ack {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  border-radius: var(--radius-sm);
  transition:
    background 0.14s,
    border-color 0.14s,
    color 0.14s;
}

.tn-noti-retry {
  margin-top: 4px;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink2);
}

.tn-noti-retry:hover {
  border-color: var(--border2);
  color: var(--ink);
}

.tn-noti-retry svg {
  width: 13px;
  height: 13px;
}

.tn-noti-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border2);
  border-top-color: var(--accent);
  animation: tn-noti-spin 0.7s linear infinite;
}

@keyframes tn-noti-spin {
  to {
    transform: rotate(360deg);
  }
}

.tn-noti-empty {
  padding: 44px 20px;
}

.tn-noti-empty-ic {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--green-bg);
  color: var(--green);
  margin-bottom: 4px;
}

.tn-noti-empty-ic svg {
  width: 20px;
  height: 20px;
}

.tn-noti-empty-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}

.tn-noti-empty-sub {
  font-size: 11px;
  color: var(--ink3);
}

/* ---- Rows ---- */
.tn-noti-row {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.tn-noti-row:last-child {
  border-bottom: none;
}

.tn-noti-row.is-unread {
  background: var(--accent-soft);
}

.tn-noti-ic {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
}

.tn-noti-ic svg {
  width: 16px;
  height: 16px;
}

.tn-noti-ic.sev-critical {
  background: var(--red-bg);
  color: var(--red);
}

.tn-noti-ic.sev-high {
  background: var(--amber-bg);
  color: var(--amber);
}

.tn-noti-ic.sev-medium {
  background: var(--blue-bg);
  color: var(--blue);
}

.tn-noti-ic.sev-low {
  background: var(--bg2);
  color: var(--ink2);
}

.tn-noti-content {
  flex: 1;
  min-width: 0;
}

.tn-noti-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.tn-noti-title {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tn-noti-time {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink3);
}

.tn-noti-msg {
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink2);
  word-break: break-word;
}

.tn-noti-ack {
  margin-top: 8px;
  padding: 5px 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink2);
}

.tn-noti-ack:hover:not(:disabled) {
  border-color: var(--green-mid);
  color: var(--green);
}

.tn-noti-ack:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.tn-noti-ack svg {
  width: 12px;
  height: 12px;
}

.tn-noti-unread-dot {
  position: absolute;
  top: 14px;
  right: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red-mid);
}

/* ---- Footer ---- */
.tn-noti-foot {
  display: flex;
  justify-content: center;
  padding: 8px;
  border-top: 1px solid var(--border);
  background: var(--surface2);
}

@media (prefers-reduced-motion: reduce) {
  .tn-noti {
    animation: none;
  }
  .tn-noti-spinner {
    animation-duration: 1.4s;
  }
}
/* ============================================================
   UserMenu — avatar dropdown rendered via a portal as a fixed
   overlay (so the fixed-height dark chrome can't clip it). The
   panel itself uses themed surface tokens so it reads correctly
   in both light and dark mode.
   ============================================================ */

.tn-um-panel {
  position: fixed;
  z-index: 1300;
  width: 268px;
  max-width: calc(100vw - 16px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--sh-lg);
  color: var(--ink);
  overflow: hidden;
  animation: tn-um-in 0.14s ease-out;
}

.tn-um-desktop {
  /* top / right set inline from the trigger rect */
}

@keyframes tn-um-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Header (name + email + plan) ---- */
.tn-um-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}

.tn-um-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}

.tn-um-id {
  flex: 1;
  min-width: 0;
}

.tn-um-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tn-um-email {
  font-size: 11px;
  color: var(--ink3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tn-um-plan {
  flex-shrink: 0;
  align-self: flex-start;
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-radius: 20px;
  padding: 2px 9px;
  font-family: var(--display);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* ---- Items ---- */
.tn-um-items {
  padding: 6px;
}

.tn-um-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 10px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink2);
  transition:
    background 0.14s,
    color 0.14s;
}

.tn-um-item:hover {
  background: var(--bg2);
  color: var(--ink);
}

.tn-um-item-ic {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--ink3);
}

.tn-um-item:hover .tn-um-item-ic {
  color: var(--ink2);
}

.tn-um-divider {
  height: 1px;
  background: var(--border);
  margin: 2px 0;
}

.tn-um-signout {
  margin: 6px;
  width: calc(100% - 12px);
  color: var(--red);
}

.tn-um-signout:hover {
  background: var(--red-bg);
  color: var(--red);
}

.tn-um-signout .tn-um-item-ic {
  color: var(--red);
}

/* ---- Mobile bottom sheet ---- */
.tn-um-scrim {
  position: fixed;
  inset: 0;
  z-index: 1290;
  background: rgba(20, 16, 10, 0.45);
  animation: tn-um-fade 0.14s ease-out;
}

@keyframes tn-um-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.tn-um-mobile {
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: 100%;
  max-width: 100%;
  border-radius: var(--radius) var(--radius) 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
  animation: tn-um-sheet-in 0.18s ease-out;
}

@keyframes tn-um-sheet-in {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tn-um-panel,
  .tn-um-scrim {
    animation: none;
  }
}
/* Slim beta/risk disclosure banner pinned above the page scroll area. */
.tn-beta-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: var(--amber-bg);
  border-bottom: 1px solid var(--border);
  color: var(--ink2);
  font-size: 10.5px;
  line-height: 1.4;
  flex-shrink: 0;
}

.tn-beta-banner-pill {
  font-family: var(--display);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--amber);
  border: 1px solid var(--amber-mid);
  border-radius: 3px;
  padding: 1px 6px;
  flex-shrink: 0;
}

.tn-beta-banner-text {
  flex: 1;
  min-width: 0;
}

.tn-beta-banner-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--ink3);
  cursor: pointer;
  flex-shrink: 0;
}

.tn-beta-banner-close:hover {
  background: var(--bg2);
  color: var(--ink);
}
/* ============================================================
   First-run onboarding tour — dismissible step-card overlay.
   Centered, non-blocking (purely informational), token-driven.
   ============================================================ */

.tn-tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(20, 16, 10, 0.55);
  backdrop-filter: blur(2px);
  animation: tn-tour-fade 0.2s ease both;
}

.tn-tour-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--sh-lg);
  padding: 26px 24px 20px;
  outline: none;
  animation: tn-tour-pop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

.tn-tour-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid transparent;
  color: var(--ink3);
  cursor: pointer;
  transition:
    background 0.14s,
    color 0.14s;
}
.tn-tour-close:hover {
  background: var(--bg2);
  color: var(--ink);
}

.tn-tour-ic {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-deep);
  margin-bottom: 14px;
}

.tn-tour-title {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.2;
}

.tn-tour-body {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink2);
  line-height: 1.55;
  margin: 0 0 18px;
}

.tn-tour-dots {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}
.tn-tour-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border2);
  transition:
    background 0.18s,
    width 0.18s;
}
.tn-tour-dot.tn-on {
  width: 20px;
  border-radius: 4px;
  background: var(--accent-deep);
}

.tn-tour-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tn-tour-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tn-tour-btn {
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background 0.14s,
    color 0.14s,
    border-color 0.14s;
}
.tn-tour-skip {
  background: none;
  color: var(--ink3);
  padding-left: 4px;
  padding-right: 4px;
}
.tn-tour-skip:hover {
  color: var(--ink);
}
.tn-tour-ghost {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink2);
}
.tn-tour-ghost:hover {
  background: var(--bg2);
  color: var(--ink);
}
.tn-tour-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent-deep);
}
.tn-tour-primary:hover {
  background: var(--accent-deep);
}
.tn-tour-btn:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
}

@keyframes tn-tour-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes tn-tour-pop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tn-tour-overlay,
  .tn-tour-card {
    animation: none;
  }
  .tn-tour-dot {
    transition: none;
  }
}
.tn-checklist {
  background: var(--surface);
  border: 1px solid var(--accent-deep);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 16px 20px 0;
  box-shadow: 0 1px 3px rgba(40, 34, 24, 0.05);
}

.tn-checklist-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.tn-checklist-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}

.tn-checklist-sub {
  font-size: 11.5px;
  color: var(--ink3);
  margin-top: 2px;
}

.tn-checklist-dismiss {
  background: none;
  border: none;
  color: var(--ink3);
  cursor: pointer;
  padding: 2px;
  display: inline-flex;
  border-radius: 6px;
}

.tn-checklist-dismiss:hover {
  color: var(--ink);
  background: var(--surface2);
}

.tn-checklist-steps {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tn-checklist-step {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tn-checklist-mark {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--ink3);
}

.tn-checklist-step.is-done .tn-checklist-mark {
  background: var(--green-bg);
  border-color: var(--green-mid);
  color: var(--green);
}

.tn-checklist-label {
  flex: 1;
  font-size: 13px;
  color: var(--ink2);
}

.tn-checklist-step.is-done .tn-checklist-label {
  color: var(--ink3);
  text-decoration: line-through;
}
/* UpgradePrompt — global plan-gate modal (opens on HTTP 402). Tokens only. */
.tn-up-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 12, 8, 0.55);
  backdrop-filter: blur(3px);
  animation: tn-fadeIn 0.16s ease both;
}
.tn-up-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--sh-lg);
  padding: 26px 24px 22px;
  animation: tn-fadeUp 0.2s ease both;
}
.tn-up-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--ink3);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.tn-up-close:hover {
  background: var(--bg2);
  color: var(--ink);
}
.tn-up-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  padding: 4px 10px;
  border-radius: 100px;
  margin-bottom: 14px;
}
.tn-up-badge svg {
  width: 13px;
  height: 13px;
}
.tn-up-title {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.2;
}
.tn-up-sub {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink2);
  margin: 0 0 20px;
}
.tn-up-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
@media (prefers-reduced-motion: reduce) {
  .tn-up-overlay,
  .tn-up-card {
    animation: none;
  }
}
/* ============================================================
   Dashboard app shell (redesign) — desktop CSS grid, mobile stack.
   Centralizes all shell chrome so TopBar/LeftNav/MobileNav/MobileTopBar
   stay markup-only. Tokens come from design-system.css.

   NOTE: `.main-content` and `.section-scroll` below are TRANSITIONAL bridges
   that keep not-yet-migrated pages scrolling correctly inside `.tn-main`.
   Each is removed once every page renders `.tn-main-scroll` / `.tn-view`.
   ============================================================ */

.tn-app {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: 232px 1fr;
  grid-template-rows: 56px 1fr;
  grid-template-areas:
    'brand topbar'
    'nav   main';
  background: var(--bg);
  transition: grid-template-columns 0.18s ease;
}

/* Collapsed desktop side nav — icons-only 64px rail. */
.tn-app.tn-nav-collapsed-app {
  grid-template-columns: 64px 1fr;
}

/* ---- Brand cell (top-left) ---- */
.tn-brand-cell {
  grid-area: brand;
  /* Dark chrome — pinned literal so it stays dark in both themes
     (var(--ink) flips light in dark mode; children are literal-light). */
  background: #1a1814;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 20px;
  text-decoration: none;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
/* When the side nav is collapsed the brand cell shrinks to 64px — center the
   mark and clip the wordmark. */
.tn-nav-collapsed-app .tn-brand-cell {
  padding: 0;
  justify-content: center;
}

/* ---- Topbar ---- */
.tn-topbar {
  grid-area: topbar;
  /* Dark chrome — pinned literal so it stays dark in both themes. */
  background: #1a1814;
  display: flex;
  align-items: center;
  padding: 0 8px 0 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.tn-kpi-rail {
  display: flex;
  align-items: stretch;
  flex: 1;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.tn-kpi-rail::-webkit-scrollbar {
  display: none;
}
.tn-kpi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 18px;
  height: 100%;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  white-space: nowrap;
}
.tn-kpi-label {
  display: flex;
  align-items: center;
  font-size: 8.5px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: #7d776c;
  margin-bottom: 3px;
}
.tn-kpi-value {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: #f3efe7;
  font-variant-numeric: tabular-nums;
}
.tn-kpi-value.tn-green {
  color: #6ddc8a;
}
.tn-kpi-value.tn-red {
  color: #f48484;
}
.tn-kpi-value.tn-amber {
  color: #f0bd55;
}
.tn-kpi-sub {
  font-size: 8.5px;
  color: #6a655c;
  margin-top: 2px;
}

.tn-topbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 10px;
  flex-shrink: 0;
}
.tn-live-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  color: #8e887d;
  padding: 0 6px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.tn-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6ddc8a;
  animation: tn-blink 2.2s infinite;
}
.tn-live-dot.tn-offline {
  background: #f0bd55;
  animation: none;
}
.tn-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbc6bc;
  transition:
    background 0.15s,
    color 0.15s;
  position: relative;
}
.tn-icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f3efe7;
}
.tn-icon-btn svg {
  width: 16px;
  height: 16px;
}
.tn-dot-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red-mid);
  border: 1.5px solid var(--ink);
}
.tn-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
}

/* The topbar's theme toggle inherits the dark icon-button look. */
.tn-topbar-right .ds-theme-toggle,
.tn-topbar-right .tn-foot-btn {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbc6bc;
}
.tn-topbar-right .ds-theme-toggle:hover,
.tn-topbar-right .tn-foot-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f3efe7;
}

/* ---- Side nav ---- */
.tn-sidenav {
  grid-area: nav;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 14px 12px 12px;
  overflow-y: auto;
  overflow-x: hidden;
}
.tn-nav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.tn-nav-group-label {
  font-size: 9px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink3);
  font-family: var(--display);
  font-weight: 700;
  padding: 14px 10px 6px;
  flex: 1;
}
.tn-nav-collapse {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink3);
  cursor: pointer;
  transition:
    background 0.14s,
    color 0.14s;
}
.tn-nav-collapse:hover {
  background: var(--bg2);
  color: var(--ink);
}

/* ---- Collapsed (icons-only) side nav ---- */
.tn-sidenav-collapsed {
  padding: 14px 8px 12px;
  align-items: stretch;
}
.tn-sidenav-collapsed .tn-nav-top {
  justify-content: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.tn-sidenav-collapsed .tn-nav-item {
  justify-content: center;
  padding: 10px 0;
}
.tn-sidenav-collapsed .tn-nav-tip {
  display: block;
}
.tn-sidenav-collapsed .tn-nav-tip .tn-tip-trigger {
  display: block;
}
.tn-sidenav-collapsed .tn-nav-foot {
  flex-direction: column;
  align-items: center;
  /* Center the avatar-only footer and give it an intentional divider that
     hugs the icons (paired with the shrunken spacer below). */
  justify-content: center;
  gap: 8px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
/* Collapse the footer with the rail: shrink the flex spacer so the footer
   sits near the icons instead of being pushed to the bottom. */
.tn-sidenav-collapsed .tn-nav-spacer {
  flex: 0 0 16px;
}
/* Avatar-only when collapsed — hide the name/plan/AUM text block. */
.tn-sidenav-collapsed .tn-nav-foot-info {
  display: none;
}
.tn-nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 9px;
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink2);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition:
    background 0.14s,
    color 0.14s;
  position: relative;
}
.tn-nav-item:hover {
  background: var(--bg2);
  color: var(--ink);
}
.tn-nav-item.tn-active {
  background: var(--ink);
  color: var(--bg);
  box-shadow: var(--sh-sm);
}
.tn-nav-item .tn-nav-ic {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--ink3);
}
.tn-nav-item:hover .tn-nav-ic {
  color: var(--ink2);
}
.tn-nav-item.tn-active .tn-nav-ic {
  color: var(--accent);
}
.tn-nav-label {
  flex: 1;
}
.tn-nav-badge {
  background: var(--bg2);
  color: var(--ink2);
  border-radius: 20px;
  padding: 1px 7px;
  font-size: 9.5px;
  font-family: var(--mono);
  font-weight: 500;
}
.tn-nav-item.tn-active .tn-nav-badge {
  background: rgba(127, 127, 127, 0.22);
  color: var(--bg);
}
.tn-nav-badge.tn-accent {
  background: var(--accent-soft);
  color: var(--accent-deep);
}
.tn-nav-item.tn-active .tn-nav-badge.tn-accent {
  background: var(--accent);
  color: var(--accent-ink);
}
.tn-nav-spacer {
  flex: 1;
}

.tn-nav-foot {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tn-nav-foot .tn-avatar-sm {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--blue-bg);
  color: var(--blue);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 11px;
  flex-shrink: 0;
}
.tn-nav-foot-info {
  flex: 1;
  min-width: 0;
}
.tn-nav-foot-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 11.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tn-nav-foot-plan {
  font-size: 9.5px;
  color: var(--ink3);
}
.tn-foot-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink2);
  flex-shrink: 0;
  transition:
    background 0.15s,
    color 0.15s;
}
.tn-foot-btn:hover {
  background: var(--bg2);
  color: var(--ink);
}

/* ---- Main content ---- */
.tn-main {
  grid-area: main;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tn-main-scroll {
  flex: 1;
  /* Allow this flex child to shrink below its content width so wide grids/
     tables don't force the whole page into a narrow lane on mobile. */
  min-width: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 22px 26px 40px;
  padding-left: max(26px, env(safe-area-inset-left));
  padding-right: max(26px, env(safe-area-inset-right));
}
.tn-view {
  animation: tn-fadeUp 0.3s ease both;
  max-width: 1320px;
  margin: 0 auto;
}

/* ---- TRANSITIONAL bridges (remove as pages migrate to .tn-main-scroll) ---- */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  min-width: 0;
}
.section-scroll {
  flex: 1;
  /* Same flex-shrink fix as .tn-main-scroll (transitional bridge). */
  min-width: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 22px 26px 40px;
  padding-left: max(26px, env(safe-area-inset-left));
  padding-right: max(26px, env(safe-area-inset-right));
  padding-bottom: max(40px, env(safe-area-inset-bottom));
}

/* ---- Mobile chrome (hidden on desktop) ---- */
.tn-mobile-topbar,
.tn-mobile-nav {
  display: none;
}

@media (max-width: 880px) {
  .tn-app {
    /* minmax(0,…) — NOT plain 1fr — so the column never grows to a wide row's
       intrinsic content width (the mobile topbar). Plain 1fr let the topbar's
       fixed items expand the whole grid past the viewport, clipping page content
       on the right (body has overflow-x:hidden). */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 'mtop' 'main' 'mnav';
  }
  .tn-brand-cell,
  .tn-topbar,
  .tn-sidenav {
    display: none;
  }
  .tn-main-scroll,
  .section-scroll {
    padding: 16px 15px 28px;
  }
  /* Full-bleed content on mobile — drop the centered desktop max-width
     so pages use the full viewport width. */
  .tn-view {
    max-width: 100%;
    width: 100%;
    margin: 0;
  }

  .tn-mobile-topbar {
    grid-area: mtop;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 56px;
    padding: 0 12px;
    overflow: hidden;
    /* Dark chrome bar — pinned literal so it stays dark in both themes
       (its child colors below are literal-light, designed for a dark bar). */
    background: #1a1814;
    color: #f6f3ec;
    position: sticky;
    top: 0;
    z-index: 40;
  }
  .tn-mt-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 0 1 auto;       /* logo stays its size; never grows to shove the row */
    min-width: 0;
    text-decoration: none;
    color: inherit;
  }
  .tn-mt-value {
    margin-left: auto;    /* push value + the icon cluster to the right */
    min-width: 0;         /* allow it to shrink instead of overflowing */
    overflow: hidden;
    text-align: right;
    line-height: 1.1;
  }
  .tn-mt-value-num {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 500;
    color: #f3efe7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tn-mt-value-sub {
    font-size: 9px;
    color: #6ddc8a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tn-mt-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbc6bc;
    position: relative;
  }
  .tn-mt-icon svg {
    width: 17px;
    height: 17px;
  }

  .tn-mobile-nav {
    grid-area: mnav;
    display: flex;
    align-items: stretch;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0);
    z-index: 40;
    box-shadow: 0 -4px 20px rgba(40, 34, 24, 0.06);
  }
  .tn-mnav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 9px 4px 8px;
    background: none;
    border: none;
    min-height: 56px;
    color: var(--ink3);
    font-family: var(--display);
    font-size: 9.5px;
    font-weight: 600;
    position: relative;
    transition: color 0.14s;
  }
  .tn-mnav-item .tn-nav-ic {
    width: 21px;
    height: 21px;
  }
  /* Keep tab labels on one tidy line so a 5th tab / longer localized labels
     (e.g. Hindi) don't wrap or push the bar taller. */
  .tn-mnav-item span {
    max-width: 100%;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tn-mnav-item.tn-active {
    color: var(--ink);
  }
  .tn-mnav-item.tn-active .tn-nav-ic {
    color: var(--ink);
  }
  .tn-mnav-item.tn-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--accent);
  }
  .tn-mnav-badge {
    position: absolute;
    top: 6px;
    left: calc(50% + 8px);
    background: var(--red-mid);
    color: #fff;
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 600;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 8px;
    display: grid;
    place-items: center;
  }
}

@media (max-width: 480px) {
  .tn-main-scroll,
  .section-scroll {
    padding: 14px 12px 24px;
  }
}
/* Public layout wrapper — reserves space for the fixed nav. The top padding
   MUST equal the current nav height per breakpoint, otherwise the body's light
   background shows through the gap as an empty band under the nav. */
.pub-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: 56px;
}

/* Public nav */
.pub-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: rgba(26, 24, 20, 0.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #2a2820;
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 40px;
  gap: 0;
}

.pub-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 800;
  /* Pinned literal light — the nav is dark chrome in both themes, so var(--bg)
     would flip dark and hide the wordmark in dark mode. */
  color: #f4f1ec;
  letter-spacing: -0.5px;
  text-decoration: none;
  flex-shrink: 0;
  cursor: pointer;
}

.pub-nav-brand .tick {
  color: #e8f0a0;
}

.pub-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 40px;
  flex: 1;
}

.pub-nav-link {
  padding: 6px 14px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  color: #9a9580;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s;
  border: none;
  background: none;
}

.pub-nav-link:hover {
  color: #f4f1ec;
  background: rgba(255, 255, 255, 0.06);
}

.pub-nav-link.active {
  color: #f4f1ec;
}

.pub-nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Theme + language toggles grouped in the bar (desktop/tablet). */
.pub-nav-tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* The same pair, rendered inside the hamburger sheet on phones (hidden until
   the ≤480 media query reveals it). */
.pub-nav-menu-tools {
  display: none;
}

/* The theme toggle's default (light) chrome would clash on the dark nav bar —
   restyle it to match the language toggle's dark-chrome look. Applies to both
   the bar instance and the in-menu instance (the dropdown sheet is dark too). */
.pub-nav .ds-theme-toggle {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbc6bc;
}

.pub-nav .ds-theme-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Mobile hamburger — hidden on desktop, shown ≤480px (see media query). */
.pub-nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 32px;
  border-radius: 7px;
  border: 1.5px solid #3a3830;
  background: transparent;
  color: var(--bg);
  cursor: pointer;
}
.pub-nav-burger:hover {
  background: #2a2820;
}

.btn-login {
  padding: 7px 18px;
  border-radius: 7px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  border: 1.5px solid #3a3830;
  background: transparent;
  /* Pinned light — dark-chrome button; var(--bg) flips dark and made the
     "Sign In" label invisible against the dark bar in dark mode. */
  color: #f4f1ec;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-login:hover {
  background: #2a2820;
  border-color: #4a4840;
}

.btn-cta {
  padding: 7px 18px;
  border-radius: 7px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  border: none;
  background: #e8f0a0;
  /* Pinned dark — the CTA sits on a fixed lime fill, so the label must stay
     dark; var(--ink) flips light in dark mode and washed the text out. */
  color: #1a1814;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-cta:hover {
  background: #d8e080;
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 768px) {
  .pub-nav {
    padding: 0 20px;
  }
  
  .pub-nav-links {
    margin-left: 20px;
    gap: 2px;
  }
  
  .pub-nav-link {
    padding: 6px 10px;
    font-size: 12px;
  }
  
  .btn-login,
  .btn-cta {
    padding: 6px 14px;
    font-size: 12px;
  }

  /* Icon-only language toggle on small screens so the globe doesn't crowd the
     Sign In / Get Started CTAs (the language list still opens on tap). */
  .pub-nav .tn-lang-current,
  .pub-nav .tn-lang-chev {
    display: none;
  }
  .pub-nav .tn-lang {
    width: 34px;
    padding: 0;
    gap: 0;
    justify-content: center;
    flex: 0 0 auto;
  }
}

@media (max-width: 480px) {
  /* Nav shrinks to 44px here — match the layout's top padding so no light band
     of body background shows through under the nav. */
  .pub-layout {
    padding-top: 44px;
  }

  .pub-nav {
    height: 44px;
    padding: 0 12px;
  }

  .pub-nav-brand {
    font-size: 14px;
    gap: 6px;
  }

  /* Phone tier: drop the bar tool pair; theme + language move into the sheet. */
  .pub-nav-tools {
    display: none;
  }
  
  /* Links collapse into a hamburger-revealed dropdown sheet. */
  .pub-nav-links {
    display: none;
  }
  .pub-nav-links.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    margin: 0;
    padding: 8px 12px 12px;
    background: rgba(26, 24, 20, 0.99);
    border-bottom: 1px solid #2a2820;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  }
  .pub-nav-links.open .pub-nav-link {
    padding: 11px 12px;
    font-size: 14px;
    text-align: left;
    border-radius: 8px;
  }

  /* Theme + language row at the bottom of the open sheet, divided from the
     links. There's room here, so show the language label (override the ≤768
     icon-only rule scoped to the in-menu instance). */
  .pub-nav-links.open .pub-nav-menu-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    padding: 10px 4px 2px;
    border-top: 1px solid #2a2820;
  }
  .pub-nav-links.open .pub-nav-menu-tools .tn-lang {
    width: auto;
    padding: 0 9px;
    gap: 6px;
    flex: 1;
    justify-content: flex-start;
  }
  .pub-nav-links.open .pub-nav-menu-tools .tn-lang-current {
    display: inline;
  }
  .pub-nav-links.open .pub-nav-menu-tools .tn-lang-chev {
    display: inline-flex;
    margin-left: auto;
  }

  .pub-nav-burger {
    display: inline-flex;
  }

  .pub-nav-right {
    margin-left: auto;
    gap: 6px;
  }
  
  .btn-login,
  .btn-cta {
    padding: 5px 10px;
    font-size: 10px;
    border-radius: 5px;
    min-height: 32px;
  }
}
/* ── FOOTER ── */
.site-footer {
  background: #1a1814;
  color: #f4f1ec;
  padding: 48px 40px 28px;
  margin-top: auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto 40px;
}

.footer-brand {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 800;
  color: #f4f1ec;
  margin-bottom: 12px;
}

.footer-brand .tick {
  color: #e8f0a0;
}

.footer-tagline {
  font-size: 11px;
  color: #6a6860;
  line-height: 1.6;
  max-width: 240px;
  margin-bottom: 20px;
}

.footer-social {
  display: flex;
  gap: 8px;
}

.social-btn {
  width: 32px;
  height: 32px;
  background: #2a2820;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
  border: none;
  color: #9a9580;
}

.social-btn:hover {
  background: #3a3830;
  color: #f4f1ec;
}

.footer-col-title {
  /* now a <button> — reset chrome so it reads as the heading it replaces */
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  color: #9a9580;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 14px;
}

/* chevron: hidden on desktop, shown + rotatable on mobile (see breakpoints) */
.footer-col-chev {
  display: none;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.18s ease;
  flex: 0 0 auto;
  margin-left: 12px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-link {
  font-size: 12px;
  color: #6a6860;
  cursor: pointer;
  transition: color 0.12s;
  background: none;
  border: none;
  text-align: left;
  padding: 0;
  font-family: var(--mono);
}

.footer-link:hover {
  color: #f4f1ec;
}

.footer-bottom {
  max-width: 1100px;
  margin: 0 auto;
  border-top: 1px solid #2a2820;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: #4a4840;
}

/* Responsive */

/* Desktop (>=768px): accordion is OFF — every panel is always expanded and the
   chevrons stay hidden, so the multi-column layout is identical to before. */
@media (min-width: 768px) {
  .footer-links {
    display: flex !important;
  }
  .footer-col-chev {
    display: none;
  }
  .footer-col-title {
    cursor: default;
  }
}

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .site-footer {
    padding: 40px 20px 20px;
  }
  
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .footer-tagline {
    max-width: 100%;
  }
  
  .footer-bottom {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}

/* Mobile (<=767px): columns become collapsible accordions. Headings are
   full-width tappable rows with a chevron that rotates open; collapsed panels
   are hidden. Brand blurb, social, disclaimer, and copyright stay visible. */
@media (max-width: 767px) {
  .footer-col {
    border-top: 1px solid #2a2820;
    padding: 4px 0;
  }
  .footer-col-title {
    /* full-width tappable row with breathing room for the touch target */
    padding: 12px 2px;
    margin-bottom: 0;
    font-size: 12px;
  }
  .footer-col-chev {
    display: block;
  }
  /* expanded heading: rotate chevron to point up + brighten the label */
  .footer-col-title[aria-expanded='true'] {
    color: #f4f1ec;
  }
  .footer-col-title[aria-expanded='true'] .footer-col-chev {
    transform: rotate(-135deg);
  }
  /* collapsed by default; the .is-open class (driven by React state) reveals it */
  .footer-links {
    display: none;
    padding: 0 2px 12px;
  }
  .footer-links.is-open {
    display: flex;
  }
  /* slightly larger tap targets for the links themselves */
  .footer-link {
    padding: 4px 0;
  }
}

@media (max-width: 480px) {
  .site-footer {
    padding: 32px 16px 16px;
  }
  
  .footer-grid {
    gap: 24px;
    margin-bottom: 24px;
  }
  
  .footer-brand {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .footer-tagline {
    font-size: 10px;
    margin-bottom: 16px;
  }
  
  .social-btn {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  
  .footer-col-title {
    font-size: 10px;
    margin-bottom: 12px;
  }
  
  .footer-link {
    font-size: 11px;
  }
  
  .footer-bottom {
    padding-top: 16px;
    font-size: 9px;
  }
}
/* TickNeuro Design System - Based on Mockup */

:root {
  /* Colors — refined per the redesign handoff (warm-cream + ink) */
  --bg: #f4f1ec;
  --bg2: #ece8e1;
  --surface: #ffffff;
  --surface2: #f8f6f2;
  --border: #e1ddd4;
  --border2: #cfc9bd;
  --ink: #1a1814;
  --ink2: #57524b;
  --ink3: #6e685e; /* muted/eyebrow labels — darkened to clear WCAG AA 4.5:1 on surface/bg/bg2 */

  /* Accent — lime (fixed; no runtime picker shipped) */
  --accent: #c8d65a;
  --accent-deep: #aab83e;
  --accent-ink: #1a1814;
  --accent-soft: #f0f3d8;

  /* Semantic Colors */
  --green: #1a6b3c;
  --green-bg: #e8f3ec;
  --green-mid: #2d9b5a;
  --red: #a82828;
  --red-bg: #fbeaea;
  --red-mid: #d94646;
  --amber: #8a5800;
  --amber-bg: #fbf0d8;
  --amber-mid: #a96e0c; /* darkened from #d18a14 so amber-as-text clears AA (was 2.85:1) */
  --blue: #1c3f6b;
  --blue-bg: #e8f0fa;
  --blue-mid: #2f66bd;
  --teal: #0d5c5c;
  --teal-bg: #e2f2f2;
  --teal-mid: #1a9090;
  --violet: #6b2a8b;
  --violet-bg: #f2e9f8;

  /* Typography */
  --display: 'Bricolage Grotesque', sans-serif;
  --mono: 'DM Mono', monospace;

  /* Elevation */
  --sh-sm: 0 1px 2px rgba(40, 34, 24, 0.05);
  --sh-md: 0 4px 16px rgba(40, 34, 24, 0.07);
  --sh-lg: 0 12px 40px rgba(40, 34, 24, 0.13);
  --sh-pop: 0 18px 50px rgba(20, 16, 10, 0.22);

  /* Spacing scale (single fixed density). */
  --pad-card: 18px;
  --pad-row: 11px;
  --gap: 14px;
  --radius: 12px;
  --radius-sm: 8px;

  color-scheme: light;
}

/* ============================================================
   Dark theme — activated by data-theme="dark" on <html>.
   Overrides the same tokens so anything using var(--x) flips.
   Accent hues are brightened for legibility on dark surfaces and
   the tinted "-bg" badge fills become dark tints.
   ============================================================ */
:root[data-theme='dark'] {
  --bg: #14120f;
  --bg2: #1b1814;
  --surface: #211e19;
  --surface2: #2a2620;
  --border: #353029;
  --border2: #4a443b;
  --ink: #efeae1;
  --ink2: #b4aea2;
  --ink3: #928c80; /* lightened to clear WCAG AA 4.5:1 on dark surface/surface2 */

  /* Accent hue stays; only the soft tint darkens */
  --accent-soft: #2b2e16;

  --green: #4cc47e;
  --green-bg: #14301f;
  --green-mid: #3fb36e;
  --red: #ef8585;
  --red-bg: #371a1a;
  --red-mid: #e25555;
  --amber: #e0a73a;
  --amber-bg: #342608;
  --amber-mid: #d4820a;
  --blue: #6aa0e8;
  --blue-bg: #16233a;
  --blue-mid: #4a8de0;
  --teal: #4cc4c4;
  --teal-bg: #123030;
  --teal-mid: #1fa3a3;
  --violet: #c79de8;
  --violet-bg: #2a1838;

  --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --sh-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --sh-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
  --sh-pop: 0 18px 50px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}

/* Smooth the toggle so it doesn't flash. */
body,
.section-scroll,
.card,
.panel {
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  body,
  .section-scroll,
  .card,
  .panel {
    transition: none;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Stop iOS from auto-inflating text in landscape. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ============ Accessibility ============ */

/* Visible keyboard-focus ring for all interactive elements. Mouse clicks
   (which match :focus but not :focus-visible) stay ring-free. */
:focus-visible {
  outline: 2px solid var(--blue-mid);
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}

/* Skip-to-content link — first tab stop, hidden until focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--ink);
  color: var(--bg);
  padding: 10px 16px;
  border-radius: 0 0 6px 0;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* Screen-reader-only utility. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Media never forces the page wider than the viewport. */
img,
svg,
canvas,
video {
  max-width: 100%;
}

/* Horizontal-scroll wrapper for wide tables on small screens.
   Wrap a wide <table> in this so it scrolls instead of breaking the layout. */
.ds-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

#root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  flex: 1;
  overflow-x: hidden;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: 2px;
}

/* Responsive breakpoints */
@media (max-width: 768px) {
  body {
    font-size: 11px;
  }
  
  /* Ensure minimum touch target sizes for mobile accessibility */
  .btn,
  .icon-btn,
  .sub-tab,
  .port-tab,
  .stock-tab,
  button {
    min-height: 44px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  
  /* Icon-only / compact controls: keep them comfortably tappable (>=40px)
     without forcing the full 44px text-button height. */
  .modal-close-btn,
  .nav-toggle-btn,
  .mobile-sidebar-toggle,
  .mobile-menu-btn {
    min-width: 40px;
    min-height: 40px;
  }

  /* Chips/tags can be denser but must still be tappable. */
  .filter-chip,
  .chip,
  .tag-x {
    min-height: 32px;
  }
  
  /* Improve heading sizes on mobile */
  h1 {
    font-size: clamp(24px, 5vw, 36px);
  }
  
  h2 {
    font-size: clamp(18px, 4vw, 24px);
  }
  
  h3 {
    font-size: clamp(16px, 3vw, 20px);
  }
}

/* Extra optimizations for small screens */
@media (max-width: 480px) {
  body {
    font-size: 10px;
  }
  
  /* Reduce card padding */
  .card,
  .panel,
  .stat-card,
  .kpi-card,
  .feature-card {
    padding: 12px !important;
  }
  
  /* Reduce heading sizes further */
  h1 {
    font-size: clamp(18px, 5vw, 24px);
  }
  
  h2 {
    font-size: clamp(14px, 4vw, 18px);
  }
  
  h3 {
    font-size: clamp(12px, 3vw, 16px);
  }
  
  h4 {
    font-size: clamp(11px, 2.5vw, 14px);
  }
  
  /* Smaller buttons - maintain touch targets */
  .btn,
  button {
    font-size: 10px;
    padding: 8px 12px;
    min-height: 36px;
  }
  
  /* Icon buttons */
  .icon-btn {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
  
  /* Smaller form inputs */
  input,
  select,
  textarea {
    font-size: 14px; /* Prevent zoom on iOS */
    padding: 8px 10px;
  }
  
  /* Reduce gaps and spacing */
  .section-scroll {
    padding: 12px;
  }
}

/* ============================================================
   Shared design-system primitives (ds-*)
   Prefixed to avoid colliding with existing per-component styles.
   ============================================================ */

/* Spinner — replaces PrimeReact ProgressSpinner (no theme CSS was loaded) */
.ds-spinner {
  display: inline-block;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--blue-mid);
  animation: ds-spin 0.7s linear infinite;
}

@keyframes ds-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Skeleton placeholder — replaces the broken `<style jsx>` pulse */
.ds-skeleton {
  background: var(--surface2);
  border-radius: 4px;
  animation: ds-pulse 1.5s ease-in-out infinite;
}

@keyframes ds-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds-spinner,
  .ds-skeleton {
    animation: none;
  }
}

/* Button — replaces PrimeReact Button; reusable across shared components */
.ds-btn {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  padding: 10px 18px;
  border-radius: 6px;
  border: 1px solid var(--border2);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    opacity 0.15s ease;
}

.ds-btn:hover {
  background: var(--surface2);
}

.ds-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ds-btn--primary {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.ds-btn--primary:hover {
  background: var(--green-mid);
}

.ds-btn--outline {
  background: transparent;
}

/* Theme toggle button */
.ds-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink2);
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.ds-theme-toggle:hover {
  background: var(--surface2);
  color: var(--ink);
}

/* Toast notifications — replaces PrimeReact Toast */
.ds-toast-region {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}

.ds-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  border-left-width: 3px;
  animation: ds-toast-in 0.18s ease-out;
}

.ds-toast--success {
  border-left-color: var(--green-mid);
}
.ds-toast--error {
  border-left-color: var(--red-mid);
}
.ds-toast--info {
  border-left-color: var(--blue-mid);
}

.ds-toast__body {
  flex: 1;
  min-width: 0;
}

.ds-toast__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 2px;
}

.ds-toast__message {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink2);
  word-break: break-word;
  white-space: pre-line;
}

.ds-toast__close {
  flex: none;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--ink3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
}
.ds-toast__close:hover {
  color: var(--ink);
  background: var(--surface2);
}

@keyframes ds-toast-in {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds-toast {
    animation: none;
  }
}

/* On phones, dock toasts to the bottom and stretch full width. */
@media (max-width: 480px) {
  .ds-toast-region {
    top: auto;
    bottom: 12px;
    left: 12px;
    right: 12px;
    max-width: none;
  }
}
/* ============================================================
   TickNeuro redesign — shared base classes (tn-* prefix)
   Ported from the approved Claude Design handoff. Prefixed to avoid
   colliding with legacy component CSS during the phased migration;
   legacy co-located CSS is removed as each page is migrated.
   Tokens (colors / density / elevation) live in design-system.css.
   ============================================================ */

/* ---- Brand (mark + wordmark) — shared by app shell & public nav ---- */
.tn-brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.tn-brand-mark svg {
  width: 60%;
  height: 60%;
  display: block;
}
.tn-brand-text {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--ink);
}
.tn-brand-text .tn-tick {
  color: var(--accent-deep);
}
/* On dark chrome the wordmark is light with an accent "Neuro". */
.tn-brand-text.tn-on-dark {
  color: #f6f3ec;
}
.tn-brand-text.tn-on-dark .tn-tick {
  color: var(--accent);
}

/* ---- Legal pages (privacy/terms/usage) ---- */
.tn-legal-hero {
  background: var(--ink);
  color: var(--bg);
  padding: 56px 24px 40px;
}
.tn-legal-eyebrow {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 10px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.tn-legal-title {
  font-family: var(--display);
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 800;
  letter-spacing: -1px;
  max-width: 1100px;
  margin: 0 auto;
}
.tn-legal-updated {
  font-family: var(--mono);
  font-size: 11px;
  color: #8e887d;
  margin-top: 12px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.tn-legal-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
}
.tn-legal-toc {
  position: sticky;
  top: 80px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tn-legal-toc-title {
  font-family: var(--display);
  font-size: 9px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink3);
  font-weight: 700;
  margin-bottom: 4px;
}
.tn-legal-toc-link {
  font-size: 11.5px;
  color: var(--ink2);
  text-decoration: none;
  padding: 4px 0 4px 10px;
  border-left: 2px solid var(--border);
}
.tn-legal-toc-link:hover {
  color: var(--ink);
  border-left-color: var(--accent-deep);
}
.tn-legal-callout {
  background: var(--amber-bg);
  border: 1px solid var(--amber-mid);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 11.5px;
  color: var(--amber);
  line-height: 1.55;
  margin-bottom: 24px;
}
.tn-legal-section {
  margin-bottom: 24px;
}
.tn-legal-section h2 {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}
.tn-legal-section p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink2);
}
@media (max-width: 760px) {
  .tn-legal-wrap {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .tn-legal-toc {
    position: static;
  }
}

/* ---- Public footer market-risk disclaimer ---- */
.footer-disclaimer {
  max-width: 1100px;
  margin: 20px auto 0;
  padding: 14px 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 10px;
  line-height: 1.6;
  color: #8e887d;
  text-align: center;
}

/* ---- Plan badge (nav footer) ---- */
.tn-plan-badge {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-radius: 5px;
  padding: 1px 6px;
  font-family: var(--display);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* ---- Type / text utilities ---- */
.tn-disp {
  font-family: var(--display);
}
.tn-mono {
  font-family: var(--mono);
}
.tn-num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.tn-pos {
  color: var(--green);
}
.tn-neg {
  color: var(--red);
}
.tn-muted {
  color: var(--ink3);
}

/* ---- Animations (entrances no-op under reduced-motion, see bottom) ---- */
@keyframes tn-fadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes tn-fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes tn-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

/* ---- Page header ---- */
.tn-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.tn-page-eyebrow {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink3);
  font-family: var(--display);
  font-weight: 700;
  margin-bottom: 5px;
}
.tn-page-title {
  font-family: var(--display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -0.8px;
  line-height: 1.05;
}
.tn-page-sub {
  font-size: 11.5px;
  color: var(--ink2);
  margin-top: 6px;
  max-width: 540px;
  line-height: 1.55;
}
.tn-page-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

/* ---- Buttons ---- */
.tn-btn {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 9px;
  border: 1px solid var(--border2);
  background: var(--surface);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  line-height: 1;
  transition:
    background 0.15s,
    border-color 0.15s,
    transform 0.12s;
}
.tn-btn:hover {
  background: var(--bg2);
}
.tn-btn:active {
  transform: translateY(1px);
}
.tn-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.tn-btn svg {
  width: 14px;
  height: 14px;
}
.tn-btn-primary {
  background: var(--ink);
  color: #f6f3ec;
  border-color: var(--ink);
}
.tn-btn-primary:hover {
  background: #2e2a24;
}
.tn-btn-accent {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent-deep);
}
.tn-btn-accent:hover {
  background: var(--accent-deep);
}
.tn-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink2);
}
.tn-btn-ghost:hover {
  background: var(--bg2);
  color: var(--ink);
}
.tn-btn-sm {
  padding: 6px 11px;
  font-size: 11px;
}

/* ---- Cards ---- */
.tn-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--sh-sm);
}
.tn-card-pad {
  padding: var(--pad-card);
}
.tn-card-head {
  padding: 13px var(--pad-card);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tn-card-title {
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 9px;
}
.tn-card-title .tn-ic {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.tn-card-title .tn-ic svg {
  width: 14px;
  height: 14px;
}

/* ---- Stat grid (responsive card row) ---- */
.tn-statgrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--gap);
  margin-bottom: 18px;
}
.tn-statgrid.tn-cols-5 {
  grid-template-columns: repeat(5, 1fr);
}
.tn-statgrid.tn-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) {
  .tn-statgrid,
  .tn-statgrid.tn-cols-5,
  .tn-statgrid.tn-cols-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 560px) {
  .tn-statgrid,
  .tn-statgrid.tn-cols-5,
  .tn-statgrid.tn-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Mobile shell breakpoint — force every stat grid to 2 columns so the
   768–880px dead band doesn't keep 3-up cards cramped. */
@media (max-width: 880px) {
  .tn-statgrid,
  .tn-statgrid.tn-cols-4,
  .tn-statgrid.tn-cols-5,
  .tn-statgrid.tn-cols-6 {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Phone tier — single column, and shrink the stat value to fit. */
@media (max-width: 480px) {
  .tn-statgrid {
    grid-template-columns: 1fr;
  }
  .tn-statcard-value {
    font-size: 20px;
  }
}

/* ---- Stat / KPI card ---- */
.tn-statcard {
  display: flex;
  flex-direction: column;
}
.tn-statcard-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 9px;
}
.tn-statcard-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink3);
  font-weight: 700;
  line-height: 1.3;
  min-height: 23px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tn-statcard-value {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.tn-statcard-sub {
  font-size: 10px;
  color: var(--ink3);
  margin-top: 4px;
}

/* ---- Badges (decision) ---- */
.tn-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 6px;
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.tn-badge svg {
  width: 11px;
  height: 11px;
}
.tn-b-buy,
.tn-b-strong_buy {
  background: var(--green-bg);
  color: var(--green);
}
.tn-b-sell,
.tn-b-strong_sell {
  background: var(--red-bg);
  color: var(--red);
}
.tn-b-hold,
.tn-b-neutral {
  background: var(--amber-bg);
  color: var(--amber);
}
.tn-b-avoid {
  background: var(--violet-bg);
  color: var(--violet);
}

/* ---- Chips ---- */
.tn-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 20px;
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 600;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--ink2);
  transition: all 0.14s;
  white-space: nowrap;
}
.tn-chip:hover {
  border-color: var(--ink3);
  color: var(--ink);
}
.tn-chip.tn-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.tn-chip .tn-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

/* ---- Pill ---- */
.tn-pill {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 5px;
}

/* ---- Bars ---- */
.tn-track {
  height: 6px;
  background: var(--bg2);
  border-radius: 4px;
  overflow: hidden;
}
.tn-track .tn-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Tables ---- */
.tn-tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.tn-tbl th {
  background: var(--surface2);
  padding: 9px 14px;
  text-align: left;
  font-family: var(--display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink3);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
.tn-tbl td {
  padding: var(--pad-row) 14px;
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tn-tbl tbody tr {
  transition: background 0.12s;
}
.tn-tbl tbody tr:hover td {
  background: var(--surface2);
}
.tn-tbl tbody tr:last-child td {
  border-bottom: none;
}
.tn-tbl-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- Search box ---- */
.tn-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
}
.tn-search input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  outline: none;
  min-width: 0;
}
.tn-search input::placeholder {
  color: var(--ink3);
}

/* ---- Reasoning quote (shared across agent panels) ---- */
.tn-reasoning {
  background: var(--bg2);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.tn-reasoning p {
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--ink2);
}

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