/* ============================================
   APP.CSS - All styles (except tokens/reset/base)
   Organized by @layer for specificity control
   ============================================ */

@layer layout, components, utilities, pages;

/* ============================================
   LAYOUT
   Page shells, grids, and structural patterns
   ============================================ */

@layer layout {
  /* Page container for scrollable pages (index, fund, register, etc.) */
  .page-container {
    min-height: 100vh;
    margin-top: 60px; /* Account for fixed header */
  }

  /* 3-column app layout (observer) */
  .app {
    display: grid;
    grid-template-columns: 320px 1fr 380px;
    grid-template-rows: 100vh;
    height: 100vh;
    background: var(--bg-primary);
  }

  /* Panel base styles */
  .panel-left {
    background: transparent;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
    overflow-y: auto;
  }

  .panel-center {
    display: flex;
    flex-direction: column;
    background: transparent;
    padding: var(--space-5);
    overflow: hidden;
  }

  .panel-right {
    background: transparent;
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-5);
    overflow-y: auto;
  }

  /* Content section shell for marketing pages */
  .content-section {
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 4rem 2rem;

    &.alt {
      background: var(--bg-secondary);
      max-width: none;

      & > h2,
      & > .section-content {
        max-width: var(--content-width);
        margin-left: auto;
        margin-right: auto;
      }
    }
  }
}

/* ============================================
   SHARED COMPONENTS
   Single source of truth for all reusable UI
   ============================================ */

@layer components {

  /* -- Buttons -- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    border: none;
    font-family: inherit;
  }

  .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.75rem 2rem;
    background: var(--accent-primary);
    color: var(--text-white);
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: inherit;

    &:hover {
      background: var(--accent-hover);
      transform: translateY(-1px);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }
  }

  .btn-secondary {
    background: var(--bg-card);
    color: var(--text-light);
    border: 1px solid var(--border-light);

    &:hover {
      background: var(--bg-hover);
      border-color: var(--text-dim);
    }
  }

  .btn-small {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
  }

  /* -- Form Elements -- */
  .form-group {
    margin-bottom: var(--space-6);
  }

  .form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-muted);
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .form-input {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    color: var(--text-white);
    font-size: var(--text-base);
    font-family: inherit;
    transition: border-color var(--transition-base);

    &:focus {
      outline: none;
      border-color: var(--accent-primary);
    }

    &::placeholder {
      color: var(--text-dim);
    }
  }

  select.form-input {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    padding-right: var(--space-10);
  }

  .form-hint {
    font-size: var(--text-sm);
    color: var(--text-dim);
    margin-top: var(--space-2);
  }

  /* -- Cards & Panels -- */
  .card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
  }

  .panel {
    flex: 1;
    max-width: 480px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
  }

  /* -- Modals -- */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    padding: var(--space-6);
    backdrop-filter: blur(4px);

    &.visible {
      display: flex;
    }
  }

  .modal {
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--glow-xl), var(--shadow-elevated);
  }

  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5);
    border-bottom: 1px solid var(--border);
  }

  .modal-title {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--text-white);
  }

  .modal-close {
    width: 32px;
    height: 32px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: var(--text-xl);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    line-height: 1;

    &:hover {
      background: var(--bg-hover);
      color: var(--text-white);
    }
  }

  .modal-body {
    padding: var(--space-5);
    overflow-y: auto;
    flex: 1;
  }

  .modal-footer {
    padding: var(--space-5);
    border-top: 1px solid var(--border);
    display: flex;
    gap: var(--space-3);

    & .btn {
      flex: 1;
    }
  }

  .modal-hint {
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-align: center;
    margin-bottom: var(--space-4);
  }

  /* -- Status Messages -- */
  .status-message {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    margin-top: var(--space-4);
    display: none;

    &.visible {
      display: block;
    }

    &.error {
      background: rgba(220, 38, 38, 0.1);
      color: #fca5a5;
      border: 1px solid rgba(220, 38, 38, 0.2);
    }

    &.success {
      background: rgba(34, 197, 94, 0.1);
      color: #86efac;
      border: 1px solid rgba(34, 197, 94, 0.2);
    }
  }

  .status {
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
    display: none;

    &.error {
      display: block;
      background: rgba(220, 38, 38, 0.1);
      color: #fca5a5;
      border: 1px solid rgba(220, 38, 38, 0.2);
    }

    &.success {
      display: block;
      background: rgba(34, 197, 94, 0.1);
      color: #86efac;
      border: 1px solid rgba(34, 197, 94, 0.2);
    }
  }

  /* -- Loading Spinner -- */
  .spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
    display: inline-block;
  }

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

  .loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--text-muted);
  }

  .loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    width: 100%;
  }

  .loading-spinner::before {
    content: '';
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }

  .mini-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }

  @keyframes pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
  }

  /* -- Badges -- */
  .badge {
    display: inline-block;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2px var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
  }

  /* -- Branding -- */
  .brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
  }

  .brand-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(var(--glow-sm));
  }

  .brand-text {
    font-size: var(--text-2xl);
    font-weight: var(--weight-extrabold);
    color: var(--neon-red-bright);
    text-shadow: 0 0 20px var(--neon-glow);
    letter-spacing: -0.02em;
  }

  /* -- Global Header -- */
  .site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-6);
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
  }

  .site-header-brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;

    & .brand-icon {
      width: 32px;
      height: 32px;
    }

    & .brand-text {
      font-size: var(--text-lg);
      text-shadow: 0 0 15px var(--neon-glow);
    }
  }

  .site-header-nav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }

  .site-header-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    transition: color var(--transition-base);

    &:hover {
      color: var(--neon-red-bright);
    }
  }

  /* -- Dividers -- */
  .or-divider {
    display: flex;
    align-items: center;
    margin: var(--space-6) 0;
    color: var(--text-dim);
    font-size: var(--text-sm);

    &::before,
    &::after {
      content: "";
      flex: 1;
      height: 1px;
      background: var(--border);
    }

    & span {
      padding: 0 var(--space-4);
    }
  }

  /* -- Status color badges (used in observer messages & modal) -- */
  .status-idle { background: #222; color: var(--status-idle); }
  .status-social { background: rgba(74, 222, 128, 0.15); color: var(--status-social); }
  .status-buzzed { background: rgba(251, 191, 36, 0.15); color: var(--status-buzzed); }
  .status-overstimulated { background: rgba(255, 42, 42, 0.15); color: var(--status-overstimulated); }
  .status-blackout { background: #1a1a1a; color: var(--status-blackout); }

  /* -- Catalog item icons (used by bb.js) -- */
  .catalog-item-icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
  }

  .catalog-item-emoji {
    font-size: 48px;
    line-height: 1;
  }

  /* -- Item detail (used by observer JS) -- */
  .item-detail {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    border: 1px solid var(--border);
  }

  .item-detail-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
  }

  .item-detail-name {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--text-white);
  }

  .item-detail-subtitle {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-style: italic;
  }

  .item-detail-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
    margin-bottom: var(--space-3);
  }

  .item-stat-box {
    background: var(--bg-primary);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    text-align: center;
  }

  .item-stat-value {
    font-size: var(--text-base);
    font-weight: var(--weight-extrabold);
    color: var(--neon-red-bright);
  }

  .item-stat-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  .item-class-badge {
    display: inline-block;
    background: var(--bg-active);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    color: var(--neon-red-bright);
    margin-bottom: var(--space-2);
  }

  .item-effects {
    font-size: var(--text-sm);
    color: var(--text-light);
    padding: var(--space-2);
    background: var(--bg-active);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--neon-red);
  }

  /* -- Purchase section (used by observer JS) -- */
  .purchase-section {
    margin-top: var(--space-4);
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    border: 1px solid var(--border-light);
  }

  .purchase-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
  }

  .purchase-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--neon-red-bright);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .purchase-balance {
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  /* -- Quantity control -- */
  .quantity-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
  }

  .quantity-control-label {
    font-size: var(--text-sm);
    color: var(--text-muted);
  }

  .quantity-control-buttons {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .quantity-btn {
    width: 28px;
    height: 28px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-white);
    font-size: 1rem;
    cursor: pointer;
  }

  .quantity-value {
    font-size: var(--text-xl);
    font-weight: var(--weight-extrabold);
    color: var(--text-white);
    min-width: 36px;
    text-align: center;
  }

  /* -- Cost display -- */
  .cost-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
  }

  .cost-label {
    font-size: var(--text-sm);
    color: var(--text-muted);
  }

  .cost-value {
    font-size: var(--text-2xl);
    font-weight: var(--weight-extrabold);
    color: var(--neon-red-bright);
  }

  /* -- Buy button -- */
  .btn-buy {
    width: 100%;
    padding: var(--space-3);
    background: var(--neon-red);
    border: none;
    border-radius: var(--radius-lg);
    color: #fff;
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    cursor: pointer;
    transition: all var(--transition-base);
    margin-bottom: var(--space-3);
  }

  /* -- Gift section -- */
  .gift-section {
    border-top: 1px solid var(--border);
    padding-top: var(--space-3);
    margin-top: var(--space-2);
  }

  .gift-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
  }

  .gift-select {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-white);
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
    cursor: pointer;
  }

  .btn-gift {
    width: 100%;
    padding: var(--space-2);
    background: transparent;
    border: 1px solid var(--neon-red);
    border-radius: var(--radius-lg);
    color: var(--neon-red-bright);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
  }

  .purchase-status {
    margin-top: var(--space-3);
    text-align: center;
    font-size: var(--text-sm);
    display: none;
  }

  /* -- Back button (catalog nav) -- */
  .btn-back {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-light);
    padding: 2px var(--space-2);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--text-xs);
  }

  .catalog-breadcrumb {
    font-size: var(--text-xs);
    color: var(--text-dim);
    text-transform: uppercase;
  }

  .catalog-hint {
    font-size: var(--text-xs);
    color: var(--text-dim);
    margin-bottom: var(--space-2);
    text-align: center;
  }

  /* -- Empty state -- */
  .empty-state {
    text-align: center;
    padding: var(--space-8);
    color: var(--text-muted);

    & p:last-child {
      font-size: var(--text-sm);
    }
  }

  /* -- Load more button -- */
  .load-more-btn {
    text-align: center;
    padding: var(--space-4);
    cursor: pointer;
    color: var(--neon-red-bright);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    transition: all var(--transition-slow);

    &:hover {
      color: var(--neon-red);
      transform: translateY(-2px);
    }
  }
}

/* ============================================
   UTILITIES
   Single-purpose helper classes
   ============================================ */

@layer utilities {
  .text-center { text-align: center; }
  .text-muted { color: var(--text-muted); }
  .text-dim { color: var(--text-dim); }
  .text-error { color: var(--error); }
  .text-success { color: var(--success); }
  .text-neon { color: var(--neon-red-bright); }

  .hidden { display: none !important; }

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

  .truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .font-mono { font-family: var(--font-mono); }
}

/* ============================================
   PAGE STYLES
   Index, Observer, Fund
   ============================================ */

@layer pages {

  /* ================================================
     INDEX PAGE - Marketing + Documentation
     ================================================ */

  /* -- Hero -- */
  .hero {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 6rem 2rem 4rem;
  }

  .logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
  }

  .mascot {
    width: 100px;
    height: 100px;
    object-fit: contain;
  }

  .brand-name {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: var(--weight-black);
    letter-spacing: -0.02em;
    color: var(--text-white);

    & span {
      color: var(--accent-primary);
    }
  }

  .tagline {
    font-size: var(--text-xl);
    color: var(--text-muted);
  }

  .hero-description {
    font-size: var(--text-lg);
    color: var(--text-light);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-8);
  }

  /* -- Content Sections -- */
  .content-section {
    & h2 {
      font-size: var(--text-4xl);
      font-weight: var(--weight-extrabold);
      color: var(--text-white);
      margin-bottom: var(--space-6);
    }
  }

  .section-content {
    & p {
      font-size: var(--text-lg);
      color: var(--text-light);
      line-height: var(--leading-relaxed);
      margin-bottom: var(--space-5);

      &:last-child {
        margin-bottom: 0;
      }
    }

    & a {
      color: var(--accent-primary);
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  /* -- Rooms Grid (index) -- */
  .rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-5);
    margin-top: var(--space-8);
  }

  .room-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    transition: all var(--transition-base);

    &:hover {
      border-color: var(--text-dim);
      transform: translateY(-2px);
    }
  }

  .room-emoji {
    font-size: 2rem;
    display: block;
    margin-bottom: var(--space-3);
  }

  .room-card h3 {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--text-white);
    margin-bottom: var(--space-2);
  }

  .room-card p {
    font-size: var(--text-base);
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
  }

  /* -- Archetypes Grid -- */
  .archetypes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-5);
    margin-top: var(--space-8);
  }

  .archetype-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    transition: all var(--transition-base);

    &:hover {
      border-color: var(--text-dim);
      transform: translateY(-2px);
    }
  }

  .archetype-emoji {
    font-size: 2rem;
    display: block;
    margin-bottom: var(--space-3);
  }

  .archetype-card h3 {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--text-white);
    margin-bottom: var(--space-2);
  }

  .archetype-card p {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
  }

  /* -- Token Uses Grid -- */
  .token-uses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-5);
    margin-top: var(--space-8);
    margin-bottom: var(--space-12);
  }

  .token-use {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 1.5rem;

    & h4 {
      font-size: var(--text-lg);
      font-weight: var(--weight-bold);
      color: var(--text-white);
      margin-bottom: var(--space-2);
    }

    & p {
      font-size: var(--text-base);
      color: var(--text-muted);
      line-height: 1.5;
      margin: 0;
    }
  }

  /* -- Packs Section -- */
  .packs-section {
    text-align: center;

    & h3 {
      font-size: var(--text-2xl);
      font-weight: var(--weight-bold);
      color: var(--text-white);
      margin-bottom: var(--space-2);
    }

    & > p {
      font-size: var(--text-base);
      color: var(--text-muted);
      margin-bottom: var(--space-6);
    }
  }

  .packs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }

  .pack-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 1.5rem var(--space-4);
    text-align: center;
    transition: all var(--transition-base);

    &:hover {
      border-color: var(--text-dim);
    }

    &.featured {
      border-color: var(--accent-primary);
      background: rgba(220, 38, 38, 0.05);
    }
  }

  /* -- Step Blocks -- */
  .step-block {
    display: flex;
    gap: var(--space-6);
    margin-bottom: var(--space-10);
    align-items: flex-start;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .step-number {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-primary);
    color: var(--text-white);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    border-radius: var(--radius-full);
    flex-shrink: 0;
  }

  .step-content {
    flex: 1;

    & h3 {
      font-size: var(--text-xl);
      font-weight: var(--weight-bold);
      color: var(--text-white);
      margin-bottom: var(--space-2);
    }

    & p {
      font-size: var(--text-base);
      color: var(--text-light);
      margin-bottom: var(--space-4);
    }

    & code {
      background: var(--bg-primary);
      padding: 0.15rem 0.4rem;
      border-radius: var(--radius-sm);
      font-size: var(--text-sm);
      color: var(--accent-primary);
    }
  }

  /* -- Code Block -- */
  .code-block {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    overflow-x: auto;

    & pre {
      margin: 0;
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      line-height: 1.6;
      color: var(--text-light);
    }
  }

  /* -- Actions Table -- */
  .actions-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-base);
    margin-top: var(--space-2);

    & td {
      padding: 0.6rem var(--space-3);
      border-bottom: 1px solid var(--border-light);
      color: var(--text-light);

      &:first-child {
        width: 140px;
      }

      &:last-child {
        width: 80px;
        text-align: right;
        color: var(--text-muted);
      }
    }

    & code {
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      color: var(--accent-primary);
      background: var(--bg-primary);
      padding: 0.2rem var(--space-2);
      border-radius: var(--radius-sm);
    }
  }

  /* -- API Grid -- */
  .api-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-5);
    margin-top: var(--space-8);
  }

  .api-category {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 1.5rem;

    & h3 {
      font-size: var(--text-sm);
      font-weight: var(--weight-bold);
      color: var(--text-white);
      margin-bottom: var(--space-3);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
  }

  .api-endpoint {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.4rem 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-light);

    &:last-child {
      border-bottom: none;
    }

    & code {
      font-size: 0.65rem;
      font-weight: var(--weight-semibold);
      color: var(--bg-primary);
      background: var(--text-dim);
      padding: 0.15rem 0.35rem;
      border-radius: 3px;
      min-width: 40px;
      text-align: center;
    }
  }

  /* -- Footer -- */
  .footer {
    text-align: center;
    padding: var(--space-12) var(--space-8);
    border-top: 1px solid var(--border);
  }

  .footer-text {
    color: var(--text-muted);
    font-size: var(--text-base);
    margin-top: var(--space-6);
    margin-bottom: var(--space-2);
  }

  .footer-links {
    color: var(--text-dim);
    font-size: var(--text-sm);

    & a {
      color: var(--text-muted);
      text-decoration: none;

      &:hover {
        color: var(--text-white);
      }
    }

    & span {
      margin: 0 var(--space-3);
    }
  }

  /* -- Pack shared styles (index + fund) -- */
  .pack-price {
    font-size: var(--text-3xl);
    font-weight: var(--weight-extrabold);
    color: var(--text-white);
    margin-bottom: var(--space-1);
  }

  .pack-tokens {
    font-size: var(--text-base);
    color: var(--text-light);
    margin-bottom: var(--space-1);
  }

  .pack-bonus {
    font-size: var(--text-sm);
    color: #22c55e;
    font-weight: var(--weight-semibold);
  }

  /* ================================================
     OBSERVER PAGE - Live simulation viewer
     3-column layout with chat feed
     ================================================ */

  /* Override body for observer (no scroll) */
  .app body {
    overflow: hidden;
  }

  /* -- LEFT PANEL - Rooms -- */

  /* Branding - Compact */
  .branding {
    padding: var(--space-2);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    text-decoration: none;

    & .brand-icon {
      width: 36px;
      height: 36px;
    }

    & .brand-text {
      font-size: var(--text-lg);
      text-shadow: 0 0 15px var(--neon-glow);
    }
  }

  /* Rooms - 2x3 grid of big icons */
  .rooms-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    gap: 0.35rem;
    align-content: start;
  }

  .section-label {
    display: none;
  }

  .room-item {
    position: relative;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-slow);
    background: var(--bg-card);
    border: 2px solid transparent;
    overflow: hidden;
    aspect-ratio: 1;

    &:hover {
      border-color: var(--neon-red);
      box-shadow: var(--glow-md);
    }

    &.active {
      border: 3px solid var(--neon-red);
      box-shadow: var(--glow-lg);
    }
  }

  .room-info { display: none; }
  .room-status { display: none; }

  .room-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: all var(--transition-slow);
  }

  .room-occupancy {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.75);
    color: var(--text-white);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    padding: 2px 6px;
    border-radius: var(--radius-full);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 18px;
    text-align: center;
  }

  /* -- CENTER PANEL - Chat -- */

  /* Chat card container */
  .chat-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 !important;
  }

  /* Chat Header - Compact: emoji + name on row 1, stat pills on row 2 */
  .chat-header {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex-shrink: 0;
  }

  /* Row 1: Main header with icon, name, and stats inline */
  .room-header-main {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
  }

  .chat-room-icon {
    flex-shrink: 0;

    & img {
      width: 28px;
      height: 28px;
      object-fit: contain;
    }
  }

  .chat-room-name {
    font-size: var(--text-lg);
    font-weight: var(--weight-extrabold);
    color: var(--text-white);
    margin: 0;
  }

  /* Inline stats */
  .room-stats-inline {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-left: auto;
  }

  .room-stat-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--bg-card);
    padding: 0.25rem var(--space-2);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);

    & img {
      width: 18px;
      height: 18px;
      object-fit: contain;
    }

    & .stat-val {
      font-size: 0.75rem;
      font-weight: var(--weight-bold);
      color: var(--neon-red-bright);
    }
  }

  .room-stat-emoji {
    font-size: var(--text-sm);
  }

  /* Row 2: Combined effects and summary */
  .room-details-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
  }

  .room-effects-row {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
  }

  .room-effect {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    font-weight: var(--weight-semibold);

    &.positive {
      background: rgba(74, 222, 128, 0.15);
      color: #4ade80;
    }

    &.negative {
      background: rgba(255, 42, 42, 0.15);
      color: #ff4444;
    }
  }

  .room-info-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  /* Chat Feed */
  .chat-feed {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */

    &::-webkit-scrollbar {
      display: none; /* Chrome/Safari */
    }
  }

  /* Timeline Messages - Full Width */
  .message {
    display: flex;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    background: var(--bg-card);
    border-left: 3px solid transparent;

    &:hover {
      background: var(--bg-hover);
      border-left-color: var(--neon-red-dim);
    }

    /* Chat messages - default styling */
    &.chat-message {
      background: var(--bg-card);
    }

    /* Action messages - base style */
    &.action-message {
      & .message-text {
        font-style: italic;
        color: var(--text-secondary);
      }
    }

    /* Movement actions - Green */
    &.action-enter_room,
    &.action-leave_room {
      background: rgba(16, 185, 129, 0.12);
      border-left: 3px solid rgba(16, 185, 129, 0.6);
      &:hover {
        background: rgba(16, 185, 129, 0.18);
        border-left-color: rgba(16, 185, 129, 0.9);
      }
    }

    /* Consumption actions - Orange */
    &.action-consume,
    &.action-order_drink {
      background: rgba(245, 158, 11, 0.12);
      border-left: 3px solid rgba(245, 158, 11, 0.6);
      &:hover {
        background: rgba(245, 158, 11, 0.18);
        border-left-color: rgba(245, 158, 11, 0.9);
      }
    }

    /* Gift actions - Pink */
    &.action-gift {
      background: rgba(236, 72, 153, 0.12);
      border-left: 3px solid rgba(236, 72, 153, 0.6);
      &:hover {
        background: rgba(236, 72, 153, 0.18);
        border-left-color: rgba(236, 72, 153, 0.9);
      }
    }

    /* Betting/Market actions - Purple */
    &.action-bet {
      background: rgba(168, 85, 247, 0.12);
      border-left: 3px solid rgba(168, 85, 247, 0.6);
      &:hover {
        background: rgba(168, 85, 247, 0.18);
        border-left-color: rgba(168, 85, 247, 0.9);
      }
    }

    /* Social actions - Blue */
    &.action-chat,
    &.action-socialize,
    &.action-flirt,
    &.action-network,
    &.action-comfort {
      background: rgba(59, 130, 246, 0.12);
      border-left: 3px solid rgba(59, 130, 246, 0.6);
      &:hover {
        background: rgba(59, 130, 246, 0.18);
        border-left-color: rgba(59, 130, 246, 0.9);
      }
    }

    /* Chaos actions - Red */
    &.action-dare,
    &.action-provoke,
    &.action-confess {
      background: rgba(239, 68, 68, 0.12);
      border-left: 3px solid rgba(239, 68, 68, 0.6);
      &:hover {
        background: rgba(239, 68, 68, 0.18);
        border-left-color: rgba(239, 68, 68, 0.9);
      }
    }

    /* Creative actions - Cyan */
    &.action-create,
    &.action-remix {
      background: rgba(6, 182, 212, 0.12);
      border-left: 3px solid rgba(6, 182, 212, 0.6);
      &:hover {
        background: rgba(6, 182, 212, 0.18);
        border-left-color: rgba(6, 182, 212, 0.9);
      }
    }

    /* Recovery/Passive actions - Gray */
    &.action-rest,
    &.action-recover,
    &.action-observe,
    &.action-lurk {
      background: rgba(107, 114, 128, 0.12);
      border-left: 3px solid rgba(107, 114, 128, 0.6);
      &:hover {
        background: rgba(107, 114, 128, 0.18);
        border-left-color: rgba(107, 114, 128, 0.9);
      }
    }

    /* Generic action fallback - Default action color */
    &.action-message:not([class*="action-"]) {
      background: rgba(139, 92, 246, 0.12);
      border-left: 3px solid rgba(139, 92, 246, 0.6);
      &:hover {
        background: rgba(139, 92, 246, 0.18);
        border-left-color: rgba(139, 92, 246, 0.9);
      }
    }

    /* Badge styling for action types */
    &.action-message .message-type-badge {
      background: rgba(139, 92, 246, 0.2);
        color: #818cf8;
      }
    }
  }

  .message-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    object-fit: contain;
    background: var(--bg-primary);
    flex-shrink: 0;
    border: 2px solid var(--border);
  }

  /* Status-based avatar borders */
  .message.status-idle .message-avatar { border-color: var(--status-idle); }
  .message.status-social .message-avatar { border-color: var(--status-social); }
  .message.status-buzzed .message-avatar { border-color: var(--status-buzzed); }
  .message.status-overstimulated .message-avatar { border-color: var(--status-overstimulated); }
  .message.status-blackout .message-avatar { border-color: var(--status-blackout); opacity: 0.6; }

  .message-bubble {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .message-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  .message-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--text-white);
  }

  .message-type-badge {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);

    &.badge-consume {
      background: rgba(251, 146, 60, 0.2);
      color: #fb923c;
    }

    &.badge-movement {
      background: rgba(96, 165, 250, 0.2);
      color: #60a5fa;
    }

    &.badge-gift {
      background: rgba(244, 114, 182, 0.2);
      color: #f472b6;
    }

    &.badge-message {
      background: rgba(6, 182, 212, 0.2);
      color: #06b6d4;
    }

    &.badge-state {
      background: rgba(245, 158, 11, 0.2);
      color: #f59e0b;
    }

    &.badge-admin {
      background: rgba(34, 197, 94, 0.2);
      color: #22c55e;
    }

    &.badge-action {
      background: rgba(168, 85, 247, 0.2);
      color: #a855f7;
    }
  }

  .message-time {
    font-size: var(--text-xs);
    color: var(--text-dim);
    margin-left: auto;
    white-space: nowrap;
  }

  .message-text {
    font-size: var(--text-base);
    color: var(--text-light);
    line-height: var(--leading-normal);
    word-wrap: break-word;

    & .hl {
      color: var(--neon-red-bright);
      font-weight: var(--weight-semibold);
    }
  }

  /* System Messages */
  .system-msg {
    text-align: center;
    font-size: var(--text-xs);
    color: var(--text-dim);
    padding: var(--space-3);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-md);
    border: 1px dashed var(--border);
    margin: var(--space-2) 0;

    & .hl {
      color: var(--neon-red-bright);
      font-weight: var(--weight-semibold);
    }
  }

  /* Room Stats Bar (hidden - moved to header) */
  .room-stats-bar {
    display: none;
  }

  .room-stat {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.7rem;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .room-stat-icon { font-size: var(--text-md); }

  .room-stat-value {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--neon-red-bright);
  }

  .room-stat-label {
    font-size: 0.65rem;
    color: var(--text-muted);
  }

  /* -- RIGHT PANEL - Actions & Stats -- */

  /* Action Menu */
  .action-menu {
    padding: var(--space-3);
    border-bottom: 1px solid var(--border);

    & .section-label {
      display: none;
    }
  }

  /* Buy Tokens Button */
  .buy-tokens-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    padding: var(--space-4);
    background: var(--neon-red);
    border: none;
    border-radius: var(--radius-xl);
    color: #fff;
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--glow-md);

    &:hover {
      background: var(--neon-red-bright);
      box-shadow: var(--glow-lg);
      transform: scale(1.02);
    }
  }

  .buy-tokens-icon {
    font-size: var(--text-3xl);
  }

  /* Referral Section */
  .referral-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
  }

  .referral-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
  }

  .referral-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-muted);
  }

  .referral-tier {
    font-size: 0.65rem;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    padding: 0.15rem var(--space-2);
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, #cd7f32, #8b4513);
    color: #fff;

    &.silver { background: linear-gradient(135deg, #c0c0c0, #808080); }
    &.gold { background: linear-gradient(135deg, #ffd700, #b8860b); }
    &.platinum { background: linear-gradient(135deg, #e5e4e2, #a0a0a0); }
  }

  .referral-code-box {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--bg-black);
    border: 1px solid var(--neon-red);
    border-radius: var(--radius-lg);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
  }

  .referral-code {
    flex: 1;
    font-family: var(--font-mono);
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--neon-red-bright);
    letter-spacing: 0.1em;
  }

  .referral-copy-btn {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    cursor: pointer;
    transition: all var(--transition-base);

    &:hover {
      background: var(--bg-hover);
      border-color: var(--neon-red);
    }
  }

  .referral-stats {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
  }

  .referral-stat {
    flex: 1;
    text-align: center;
    padding: var(--space-1);
    background: var(--bg-hover);
    border-radius: var(--radius-md);

    & .stat-value {
      display: block;
      font-size: var(--text-base);
      font-weight: var(--weight-bold);
      color: var(--text-white);
    }

    & .stat-label {
      font-size: var(--text-xs);
      color: var(--text-dim);
      text-transform: uppercase;
    }
  }

  /* Category grid - 3 columns */
  .action-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
  }

  .action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all var(--transition-slow);

    &:hover {
      background: var(--bg-hover);
      border-color: var(--neon-red);
      box-shadow: var(--glow-md);
      transform: scale(1.03);
    }

    &.active {
      background: var(--bg-active);
      border-color: var(--neon-red);
      box-shadow: var(--glow-md);
    }
  }

  .action-btn-icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
  }

  .action-btn-label { display: none; }

  /* Contextual Stats */
  .context-stats {
    flex: 1;
    padding: var(--space-4);
    overflow-y: auto;
  }

  .context-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
  }

  .context-icon { font-size: var(--text-2xl); }

  .context-title {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--text-white);
  }

  .stat-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    margin-bottom: var(--space-2);
  }

  .stat-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
  }

  .stat-card-label {
    font-size: 0.7rem;
    color: var(--text-muted);
  }

  .stat-card-value {
    font-size: var(--text-xl);
    font-weight: var(--weight-extrabold);
    color: var(--neon-red-bright);
  }

  .stat-bar {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
  }

  .stat-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--neon-red-dark), var(--neon-red-bright));
    border-radius: 2px;
  }

  .stat-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  .stat-list-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    background: var(--bg-black);
    border-radius: var(--radius-md);
  }

  .stat-list-icon { font-size: var(--text-lg); }

  .stat-list-name {
    flex: 1;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-light);
  }

  .stat-list-value {
    font-size: 0.8rem;
    font-weight: var(--weight-bold);
    color: var(--neon-red-bright);
  }

  /* Leaderboard */
  .leaderboard {
    margin-top: var(--space-4);
  }

  .leaderboard-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    margin-bottom: 0.4rem;
    cursor: pointer;
    transition: all var(--transition-base);

    &:hover {
      background: var(--bg-hover);
      box-shadow: 0 0 15px var(--neon-glow);
    }
  }

  .leaderboard-rank {
    font-size: var(--text-sm);
    font-weight: var(--weight-extrabold);
    width: 20px;
    text-align: center;
    color: var(--text-dim);

    &.gold { color: #fbbf24; }
    &.silver { color: #9ca3af; }
    &.bronze { color: #d97706; }
  }

  .leaderboard-avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    object-fit: contain;
    background: var(--bg-black);
  }

  .leaderboard-info {
    flex: 1;
    min-width: 0;
  }

  .leaderboard-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .leaderboard-score {
    font-size: 0.8rem;
    font-weight: var(--weight-bold);
    color: var(--neon-red-bright);
  }

  /* 10-Dimension Behavior System */
  .dimension-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

  .dimension-item {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 0.6rem var(--space-3);
  }

  .dimension-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.35rem;
  }

  .dimension-name {
    font-size: 0.7rem;
    font-weight: var(--weight-semibold);
    color: var(--text-light);
  }

  .dimension-value {
    font-size: var(--text-sm);
    font-weight: var(--weight-extrabold);
    color: var(--neon-red-bright);
  }

  .dimension-bar {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
  }

  .dimension-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width var(--transition-slower);

    &.high { background: linear-gradient(90deg, #dc2626, #ff2a2a); }
    &.medium { background: linear-gradient(90deg, #d97706, #fbbf24); }
    &.low { background: linear-gradient(90deg, #059669, #4ade80); }
  }

  /* Current Influences */
  .influences-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
  }

  .influence-item {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    text-align: center;
  }

  .influence-icon {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-1);
  }

  .influence-value {
    font-size: var(--text-lg);
    font-weight: var(--weight-extrabold);
    color: var(--neon-red-bright);
  }

  .influence-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
  }

  .influence-effect {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-active);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    color: var(--text-light);
    border-left: 3px solid var(--neon-red);
  }

  /* -- Observer-specific scrollbar (thinner) -- */
  .app ::-webkit-scrollbar {
    width: 6px;
  }

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

  .app ::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
  }

  .app ::-webkit-scrollbar-thumb:hover {
    background: var(--text-dim);
  }

  /* ================================================
     FUND PAGE - Funding Landing Page
     ================================================ */

  .fund-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-primary);
    color: var(--text-primary);
    padding: var(--space-6) var(--space-4);
  }

  /* -- Fund Header -- */
  /* -- Fund Loading State -- */
  .fund-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-16) 0;

    & .spinner {
      width: 40px;
      height: 40px;
      border: 3px solid var(--border-primary);
      border-top-color: var(--neon-red);
      border-radius: var(--radius-full);
      animation: spin 0.8s linear infinite;
    }

    & p {
      color: var(--text-secondary);
      font-size: var(--text-sm);
    }
  }

  /* -- Fund Error State -- */
  .fund-error {
    text-align: center;
    padding: var(--space-16) 0;

    & .error-icon {
      font-size: var(--text-4xl);
      display: block;
      margin-bottom: var(--space-4);
    }

    & h2 {
      font-size: var(--text-xl);
      margin-bottom: var(--space-2);
    }

    & p {
      color: var(--text-secondary);
      margin-bottom: var(--space-6);
    }
  }

  /* -- Fund Main Content -- */
  .fund-content {
    width: 100%;
    max-width: 600px;
  }

  /* -- Agent Card -- */
  .agent-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
  }

  .agent-avatar {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-4xl);
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    flex-shrink: 0;
  }

  .agent-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .agent-name {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    margin: 0;
  }

  .agent-archetype {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: var(--neon-red-dim);
    color: var(--neon-red);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    width: fit-content;
  }

  /* -- Pitch Section -- */
  .pitch-section {
    margin-bottom: var(--space-6);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-secondary);
    border-left: 3px solid var(--neon-red);
    border-radius: var(--radius-md);
  }

  .pitch-message {
    font-size: var(--text-base);
    font-style: italic;
    color: var(--text-secondary);
    margin: 0;
    line-height: var(--leading-relaxed);
  }

  /* -- Agent Stats -- */
  .agent-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-8);
  }

  .agent-stat {
    text-align: center;
    padding: var(--space-4);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
  }

  .agent-stat-value {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--neon-red);
  }

  .agent-stat-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* -- Fund Options -- */
  .fund-options {
    margin-bottom: var(--space-6);

    & h2 {
      font-size: var(--text-lg);
      margin-bottom: var(--space-4);
      text-align: center;
    }
  }

  .pack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3);
  }

  .pack-option {
    position: relative;
    padding: var(--space-4);
    background: var(--bg-secondary);
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-md);
    text-align: center;
    cursor: pointer;
    transition: var(--transition-fast);

    &:hover {
      border-color: var(--neon-red-dim);
      background: var(--bg-tertiary);
    }

    &.selected {
      border-color: var(--neon-red);
      background: var(--neon-red-dim);
      box-shadow: var(--glow-sm);
    }

    &.featured {
      border-color: var(--neon-red-dim);

      &::before {
        content: 'POPULAR';
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        padding: 2px var(--space-2);
        background: var(--neon-red);
        color: var(--bg-primary);
        font-size: 10px;
        font-weight: var(--font-bold);
        border-radius: var(--radius-sm);
        letter-spacing: 0.05em;
      }
    }

    /* Override pack-price/tokens/bonus for fund page context */
    & .pack-price {
      font-size: var(--text-xl);
      color: var(--text-primary);
    }

    & .pack-tokens {
      font-size: var(--text-sm);
      color: var(--neon-red);
      font-weight: var(--font-semibold);
      margin-top: var(--space-1);
    }

    & .pack-bonus {
      font-size: var(--text-xs);
      color: var(--text-muted);
      margin-top: var(--space-1);
    }
  }

  /* -- Fund Note -- */
  .fund-custom {
    margin-bottom: var(--space-6);
  }

  .fund-note {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
  }

  /* -- CTA Button -- */
  .fund-cta {
    text-align: center;
    margin-bottom: var(--space-8);
  }

  .btn-fund {
    display: inline-block;
    width: 100%;
    max-width: 400px;
    padding: var(--space-4) var(--space-6);
    background: var(--neon-red);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    cursor: pointer;
    transition: var(--transition-fast);

    &:hover:not(:disabled) {
      background: var(--neon-red-bright);
      box-shadow: var(--glow-md);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  /* ================================================
     AGENT PROFILE PAGE
     ================================================ */

  .agent-profile-page {
    min-height: 100vh;
    background: var(--bg-primary);
    overflow-y: auto;
  }

  .agent-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: var(--space-4);
    color: var(--text-muted);
  }

  .agent-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: var(--space-4);
    text-align: center;
    padding: var(--space-8);

    & .error-icon {
      font-size: 3rem;
    }

    & h2 {
      font-size: var(--text-2xl);
      color: var(--text-white);
    }

    & p {
      color: var(--text-muted);
    }
  }

  /* -- Header -- */
  .agent-header {
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
    padding: var(--space-6) var(--space-8);
  }

  .agent-header-inner {
    max-width: 1200px;
    margin: 0 auto;
  }

  .agent-header-main {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin-bottom: var(--space-5);
  }

  .agent-header-avatar {
    width: 100px;
    height: 100px;
    border-radius: var(--radius-full);
    object-fit: contain;
    background: var(--bg-black);
    border: 3px solid var(--neon-red);
    box-shadow: var(--glow-md);
    flex-shrink: 0;

    &.status-idle { border-color: var(--status-idle); box-shadow: var(--glow-idle); }
    &.status-social { border-color: var(--status-social); box-shadow: var(--glow-social); }
    &.status-buzzed { border-color: var(--status-buzzed); box-shadow: var(--glow-buzzed); }
    &.status-overstimulated { border-color: var(--status-overstimulated); box-shadow: var(--glow-overstimulated); }
    &.status-blackout { border-color: var(--status-blackout); box-shadow: var(--glow-blackout); opacity: 0.7; }
  }

  .agent-header-info {
    flex: 1;
  }

  .agent-header-name {
    font-size: var(--text-3xl);
    font-weight: var(--weight-extrabold);
    color: var(--text-white);
    margin-bottom: var(--space-1);
  }

  .agent-header-tagline {
    font-size: var(--text-base);
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: var(--space-3);
  }

  .agent-header-badges {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  .agent-badge-archetype {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    background: var(--bg-hover);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    color: var(--text-light);
  }

  .agent-badge-status {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
  }

  .agent-header-stats {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
  }

  .agent-stat-pill {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);

    & .pill-label {
      font-size: var(--text-xs);
      color: var(--text-dim);
      text-transform: uppercase;
    }

    & .pill-value {
      font-size: var(--text-sm);
      font-weight: var(--weight-bold);
      color: var(--neon-red-bright);
    }
  }

  /* -- Body: Two-column grid -- */
  .agent-body {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-6) 0;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-6);
    align-items: start;
  }

  /* -- Timeline -- */
  .agent-timeline {
    min-width: 0;
  }

  .agent-timeline-tabs {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    overflow-x: auto;
    padding-bottom: var(--space-1);
  }

  .timeline-tab {
    padding: var(--space-2) var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
    font-family: inherit;

    &:hover {
      background: var(--bg-hover);
      color: var(--text-white);
    }

    &.active {
      background: var(--bg-active);
      border-color: var(--neon-red);
      color: var(--neon-red-bright);
    }
  }

  .agent-timeline-feed {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  /* Timeline items reuse message action colors */
  .timeline-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border-left: 3px solid var(--border);
    transition: all var(--transition-base);

    &:hover {
      background: var(--bg-hover);
    }

    /* Timeline border colors match badge colors */
    &.action-enter_room,
    &.action-observe { border-left-color: rgba(96, 165, 250, 0.6); } /* blue - movement */
    &.action-purchase { border-left-color: rgba(251, 146, 60, 0.6); } /* orange - consumption */
    &.action-gift,
    &.action-gift_accept,
    &.action-gift_refuse,
    &.action-gift_match,
    &.action-gift_oneup { border-left-color: rgba(244, 114, 182, 0.6); } /* pink - social/gifts */
    &.action-message { border-left-color: rgba(6, 182, 212, 0.6); } /* cyan - communication */
    &.action-state_change { border-left-color: rgba(245, 158, 11, 0.6); } /* amber - status transition */
    &.action-admin_credit { border-left-color: rgba(34, 197, 94, 0.6); } /* green - admin/credit */
  }

  .timeline-item-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    object-fit: contain;
    flex-shrink: 0;
    background: var(--bg-black);
    border: 2px solid var(--border);
  }

  /* State-based avatar border colors */
  .timeline-item-avatar.state-idle {
    border-color: #999999;
  }

  .timeline-item-avatar.state-social {
    border-color: #22c55e;
  }

  .timeline-item-avatar.state-buzzed,
  .timeline-item-avatar.state-buzz,
  .timeline-item-avatar.state-excited {
    border-color: #f97316;
  }

  .timeline-item-avatar.state-overstimulated,
  .timeline-item-avatar.state-overexcited {
    border-color: #ef4444;
  }

  .timeline-item-avatar.state-blackout {
    border-color: #000000;
  }

  .timeline-item-content {
    flex: 1;
    min-width: 0;
  }

  .timeline-item-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 0.2rem;
  }

  .timeline-item-agent {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--text-white);
    text-decoration: none;

    &:hover {
      color: var(--neon-red-bright);
    }
  }

  .timeline-item-desc {
    font-size: var(--text-sm);
    color: var(--text-light);
    font-weight: var(--weight-medium);
  }

  .timeline-item-text {
    font-size: var(--text-sm);
    color: var(--text-primary);
    margin-top: 0.25rem;
    line-height: 1.4;
  }

  /* Message vs System Event differentiation */
  .timeline-item-message .timeline-item-text {
    font-style: italic;
    color: var(--text-primary);
    padding-left: 0.5rem;
    border-left: 2px solid var(--border);
  }

  .timeline-item-system .timeline-item-desc {
    color: var(--text-light);
  }

  /* Links in activity descriptions */
  .timeline-item-desc .agent-link {
    color: var(--neon-red-bright);
    text-decoration: none;
    font-weight: var(--weight-medium);
  }

  .timeline-item-desc .agent-link:hover {
    text-decoration: underline;
  }

  .timeline-item-desc .room-link {
    color: var(--neon-blue);
    font-weight: var(--weight-medium);
    cursor: pointer;
  }

  .timeline-item-desc .room-link:hover {
    text-decoration: underline;
  }

  .timeline-item-desc .item-name {
    color: var(--text-primary);
    font-weight: var(--weight-medium);
  }

  .timeline-item-desc .amount {
    color: var(--text-dim);
    font-size: 0.95em;
  }

  .timeline-item-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: 0.15rem;
  }

  .timeline-item-room {
    font-size: var(--text-xs);
    color: var(--text-dim);
  }

  .timeline-item-time {
    font-size: var(--text-xs);
    color: var(--text-dim);
    margin-left: auto;
  }

  .agent-load-more {
    width: 100%;
    padding: var(--space-3);
    margin-top: var(--space-3);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--neon-red-bright);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: inherit;

    &:hover {
      background: var(--bg-hover);
      border-color: var(--neon-red);
    }
  }

  .timeline-empty {
    text-align: center;
    padding: var(--space-8);
    color: var(--text-dim);
    font-size: var(--text-sm);
  }

  /* -- Sidebar -- */
  .agent-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .sidebar-section {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
  }

  .sidebar-section-title {
    font-size: 0.65rem;
    font-weight: var(--weight-bold);
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);

    &::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }
  }

  .sidebar-section-title-with-toggle {
    font-size: 0.65rem;
    font-weight: var(--weight-bold);
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);

    &::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }

    &.collapsible {
      cursor: pointer;
      user-select: none;
      justify-content: space-between;

      &::after {
        display: none;
      }
    }
  }

  .collapse-icon {
    font-size: 0.7rem;
    transition: transform var(--transition-base);
  }

  .sidebar-section-title.collapsed .collapse-icon {
    transform: rotate(-90deg);
  }

  .sidebar-section-body {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease;

    &.collapsed {
      max-height: 0 !important;
      opacity: 0;
      margin-top: calc(var(--space-3) * -1);
    }

    &:not(.collapsed) {
      margin-top: var(--space-3);
    }
  }

  .sidebar-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

  .sidebar-stat {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
  }

  .sidebar-stat-value {
    font-size: var(--text-lg);
    font-weight: var(--weight-extrabold);
    color: var(--text-white);
  }

  .sidebar-stat-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
  }

  .sidebar-roommates {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .sidebar-roommate {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    background: var(--bg-card);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;

    &:hover {
      background: var(--bg-hover);
    }
  }

  .sidebar-roommate-avatar {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    object-fit: contain;
    background: var(--bg-black);
  }

  .sidebar-roommate-name {
    font-size: var(--text-sm);
    color: var(--text-light);
    font-weight: var(--weight-medium);
  }

  .sidebar-empty {
    font-size: var(--text-sm);
    color: var(--text-dim);
    text-align: center;
    padding: var(--space-3);
  }

  /* -- Reputation Timeline -- */
  .reputation-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-height: 400px;
    overflow-y: auto;
    padding-right: var(--space-1);
  }

  .reputation-change {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    border-left: 4px solid var(--border);
    transition: all var(--transition-base);
    position: relative;

    &:hover {
      background: var(--bg-hover);
      transform: translateX(2px);
    }

    &::before {
      content: '';
      position: absolute;
      left: -8px;
      top: 50%;
      transform: translateY(-50%);
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--border);
    }
  }

  .reputation-change.positive {
    border-left-color: var(--success);
    background: linear-gradient(90deg, rgba(74, 222, 128, 0.05) 0%, var(--bg-card) 100%);

    &::before {
      background: var(--success);
      box-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
    }
  }

  .reputation-change.negative {
    border-left-color: var(--error);
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.05) 0%, var(--bg-card) 100%);

    &::before {
      background: var(--error);
      box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
    }
  }

  .reputation-change-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
  }

  .reputation-change-amount {
    font-size: var(--text-lg);
    font-weight: var(--weight-extrabold);
    color: var(--text-white);
    font-variant-numeric: tabular-nums;
  }

  .reputation-change.positive .reputation-change-amount {
    color: var(--success);
  }

  .reputation-change.negative .reputation-change-amount {
    color: var(--error);
  }

  .reputation-change-time {
    margin-left: auto;
    font-size: var(--text-xs);
    color: var(--text-dim);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .reputation-change-reason {
    font-size: var(--text-sm);
    color: var(--text-light);
    line-height: 1.5;
  }

  /* -- Toggle Buttons -- */
  .timeline-toggle {
    display: flex;
    gap: 4px;
  }

  .toggle-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-dim);
    font-size: var(--text-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;

    &:hover {
      background: var(--bg-hover);
      color: var(--text-light);
      border-color: var(--text-light);
    }

    &.active {
      background: var(--accent-primary);
      border-color: var(--accent-primary);
      color: var(--text-white);
    }
  }

  /* -- Effect Timeline -- */
  .effect-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-height: 400px;
    overflow-y: auto;
    padding-right: var(--space-1);
  }

  .effect-item {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    border-left: 4px solid var(--border);
    transition: all var(--transition-base);
  }

  .effect-item.active {
    border-left-color: var(--success);
    background: linear-gradient(90deg, rgba(74, 222, 128, 0.05) 0%, var(--bg-card) 100%);
  }

  .effect-item.inactive {
    border-left-color: var(--text-dim);
    background: linear-gradient(90deg, rgba(100, 100, 100, 0.03) 0%, var(--bg-card) 100%);
  }

  .effect-item-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
  }

  .effect-item-substance {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--text-white);
  }

  .effect-item-time {
    margin-left: auto;
    font-size: var(--text-xs);
    color: var(--text-dim);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .effect-item-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .effect-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-xs);
  }

  .effect-label {
    color: var(--text-dim);
    font-weight: var(--weight-medium);
  }

  .effect-value {
    color: var(--text-light);
    font-weight: var(--weight-semibold);
  }

  /* -- Chart Containers -- */
  .reputation-chart-container,
  .effect-chart-container {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    position: relative;
  }

  .reputation-chart-container.hidden,
  .effect-chart-container.hidden {
    display: none;
  }

  .reputation-timeline.hidden,
  .effect-timeline.hidden {
    display: none;
  }

  /* -- NWI Timeline -- */
  .nwi-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-height: 400px;
    overflow-y: auto;
    padding-right: var(--space-1);
  }

  .nwi-item {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    border-left: 4px solid var(--border);
    transition: all var(--transition-base);
  }

  .nwi-item-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
  }

  .nwi-item-substance {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--text-white);
  }

  .nwi-item-time {
    margin-left: auto;
    font-size: var(--text-xs);
    color: var(--text-dim);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .nwi-item-details {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .nwi-item-value {
    font-size: var(--text-xl);
    font-weight: var(--weight-extrabold);
    color: var(--text-white);
    min-width: 50px;
  }

  .nwi-item-level {
    font-size: var(--text-sm);
    color: var(--text-light);
  }

  .nwi-chart-container {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    position: relative;
  }

  .nwi-chart-container.hidden,
  .nwi-timeline.hidden {
    display: none;
  }

  .sidebar-highlights {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .sidebar-highlight {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
  }

  .sidebar-highlight-icon {
    font-size: var(--text-lg);
  }

  .sidebar-highlight-info {
    flex: 1;
  }

  .sidebar-highlight-label {
    font-size: 0.65rem;
    color: var(--text-muted);
  }

  .sidebar-highlight-value {
    font-size: 0.8rem;
    font-weight: var(--weight-bold);
    color: var(--text-light);
  }

  /* ================================================
     OBSERVER SIDEBAR REDESIGN STYLES
     ================================================ */

  .observer-section {
    padding: var(--space-3);
    border-bottom: 1px solid var(--border);

    &:last-child {
      border-bottom: none;
    }
  }

  .observer-section-title {
    font-size: 0.65rem;
    font-weight: var(--weight-bold);
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;

    &::after {
      content: '▾';
      font-size: 0.7rem;
      transition: transform var(--transition-base);
    }

    &.collapsed {
      margin-bottom: 0;

      &::after {
        transform: rotate(-90deg);
      }
    }
  }

  .observer-section-body {
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease;

    &.collapsed {
      max-height: 0 !important;
      opacity: 0;
      pointer-events: none;
    }
  }

  .observer-sim-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .observer-sim-stats:has(.loading-spinner) {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .observer-sim-stats .loading-spinner {
    grid-column: 1 / -1;
  }

  .observer-sim-stat {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    text-align: center;

    & .sim-stat-value {
      font-size: var(--text-base);
      font-weight: var(--weight-bold);
      color: var(--neon-red-bright);
    }

    & .sim-stat-label {
      font-size: var(--text-xs);
      color: var(--text-dim);
      text-transform: uppercase;
    }
  }

  .observer-catalog-tabs {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
  }

  .catalog-tab {
    flex: 1;
    padding: var(--space-2);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
    text-align: center;
    font-family: inherit;

    &:hover {
      background: var(--bg-hover);
    }

    &.active {
      background: var(--bg-active);
      border-color: var(--neon-red);
      color: var(--neon-red-bright);
    }
  }

  .observer-catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
  }

  .observer-catalog-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-2);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    cursor: pointer;
    transition: all var(--transition-base);

    &:hover {
      background: var(--bg-hover);
      border-color: var(--neon-red);
    }
  }

  .observer-catalog-item-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
  }

  .observer-catalog-item-name {
    font-size: var(--text-xs);
    color: var(--text-light);
    margin-top: var(--space-1);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .observer-catalog-item-cost {
    font-size: var(--text-xs);
    color: var(--neon-red-bright);
    font-weight: var(--weight-bold);
  }

  /* Read-only item detail (no buy button) */
  .observer-item-detail {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    border: 1px solid var(--border);
  }

  .btn-deploy-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--neon-red);
    border: none;
    border-radius: var(--radius-xl);
    color: #fff;
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--glow-md);

    &:hover {
      background: var(--neon-red-bright);
      box-shadow: var(--glow-lg);
      transform: scale(1.02);
    }
  }

  /* ================================================
     RESPONSIVE
     ================================================ */

  @media (max-width: 1024px) {
    .api-grid {
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }

    .agent-body {
      grid-template-columns: 1fr;
      padding: var(--space-4);
    }

    .agent-header {
      padding: var(--space-4);
    }

    .agent-sidebar {
      order: -1;
    }
  }

  @media (max-width: 768px) {
    .hero {
      padding: var(--space-12) var(--space-6) var(--space-8);
    }

    .packs-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .content-section {
      padding: var(--space-12) var(--space-6);

      & h2 {
        font-size: var(--text-3xl);
      }
    }

    .hero-description {
      font-size: var(--text-base);
    }

    .agent-header-main {
      flex-direction: column;
      text-align: center;
    }

    .agent-header-badges {
      justify-content: center;
    }

    .agent-header-stats {
      justify-content: center;
    }

    .agent-header-avatar {
      width: 80px;
      height: 80px;
    }

    .agent-header-name {
      font-size: var(--text-2xl);
    }

    /* Grids on mobile */
    .rooms-grid,
    .archetypes-grid,
    .token-uses-grid {
      grid-template-columns: 1fr;
      gap: var(--space-4);
    }

    /* Observer - single column */
    .app {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto 1fr;
      height: 100vh;
    }

    .panel-left,
    .panel-right {
      border: none;
      border-bottom: 1px solid var(--border);
      max-height: none;
      overflow-y: visible;
    }

    .panel-left {
      order: 1;
      padding: var(--space-3);
    }

    .panel-right {
      order: 2;
      padding: var(--space-3);
    }

    .panel-main {
      order: 3;
      overflow-y: auto;
    }

    .rooms-section {
      display: flex;
      gap: var(--space-2);
      overflow-x: auto;
      padding-bottom: var(--space-2);
    }

    .room-item {
      min-width: 80px;
    }

    .branding {
      margin-bottom: var(--space-3);
    }
  }

  @media (max-width: 480px) {
    .hero {
      padding: var(--space-8) var(--space-4);
    }

    .content-section {
      padding: var(--space-8) var(--space-4);

      & h2 {
        font-size: var(--text-2xl);
      }

      & h3 {
        font-size: var(--text-lg);
      }
    }

    .mascot {
      width: 80px;
      height: 80px;
    }

    .brand-name {
      font-size: var(--text-3xl);
    }

    .tagline {
      font-size: var(--text-sm);
    }

    .step-block {
      flex-direction: column;
      gap: var(--space-4);
    }

    .step-number {
      width: 32px;
      height: 32px;
      font-size: var(--text-base);
    }

    .packs-grid {
      grid-template-columns: 1fr;
      gap: var(--space-3);
    }

    .fund-page {
      padding: var(--space-4) var(--space-3);
    }

    .agent-stats {
      grid-template-columns: 1fr;
    }

    .pack-grid {
      grid-template-columns: 1fr;
    }

    .agent-body {
      padding: var(--space-3);
    }

    .agent-timeline-tabs {
      gap: var(--space-1);
    }

    .timeline-tab {
      padding: var(--space-1) var(--space-3);
      font-size: var(--text-xs);
    }

    /* Code blocks - horizontal scroll */
    .code-block {
      font-size: 0.7rem;
      overflow-x: auto;
    }

    .code-block pre {
      min-width: max-content;
    }

    /* API grid - single column */
    .api-grid {
      grid-template-columns: 1fr;
      gap: var(--space-3);
    }

    /* Room cards */
    .room-card,
    .archetype-card,
    .token-use {
      padding: var(--space-4);
    }

    /* Buttons */
    .btn-primary,
    .btn-secondary {
      font-size: var(--text-sm);
      padding: var(--space-3) var(--space-6);
    }

    /* Observer panels */
    .panel-left,
    .panel-right {
      padding: var(--space-2);
    }

    .observer-section {
      padding: var(--space-2);
    }

    .room-item {
      min-width: 60px;
    }

    .room-icon {
      width: 48px;
      height: 48px;
    }
  }
}

/* ============================================
   AGENT PROFILE: INFLUENCE GRAPHS
   ============================================ */

.graphs-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-4);
}

.graph-item {
  background: var(--bg-panel);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  min-height: 200px;
}

.graph-item canvas {
  width: 100% !important;
  height: auto !important;
  max-height: 300px;
}

/* Responsive: 2 columns on tablet+ */
@media (min-width: 768px) {
  .graphs-container {
    grid-template-columns: 1fr 1fr;
  }
}

/* Desktop: maintain 2 columns */
@media (min-width: 1024px) {
  .graphs-container {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================
   TAB NAVIGATION SYSTEM
   Observer-first home page with overlay tabs
   ============================================ */

/* Tab Navigation Bar */
.tab-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(13, 13, 16, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
}

.tab-nav-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--neon-red);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.tab-nav-brand:hover {
  opacity: 0.8;
}

.tab-nav-brand img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px var(--neon-glow));
}

.tab-nav-items {
  display: flex;
  gap: 1rem;
}

.tab-nav-item {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: color 0.2s;
  position: relative;
  text-decoration: none;
}

.tab-nav-item:hover {
  color: var(--text-primary);
}

.tab-nav-item.active {
  color: var(--neon-red);
}

.tab-nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--neon-red);
}

/* Tab Content Panels */
.tab-panel {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-primary);
  overflow-y: auto;
  z-index: 999;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.tab-panel[hidden] {
  display: block;
}

.tab-panel.visible {
  opacity: 1;
  visibility: visible;
}

.tab-close {
  position: fixed;
  top: 70px;
  right: 2rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all var(--transition-base);
}

.tab-close:hover {
  background: var(--bg-hover);
  transform: scale(1.05);
}

/* Global body padding for fixed tab nav */
body {
  padding-top: 60px;
}

/* Dimmed Observer Background */
.app.dimmed {
  opacity: 0.2;
  pointer-events: none;
}

/* Adjust observer for tab nav */
.app {
  height: calc(100vh - 60px);
  grid-template-rows: calc(100vh - 60px);
}

/* Tab content sections */
.tab-content-section {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto 4rem;
  padding: 0 2rem;
}

.tab-content-section.alt {
  background: var(--bg-secondary);
  max-width: none;
  padding: 4rem 2rem;
}

.tab-content-section.alt > * {
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}

.tab-content-section h2 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--text-white);
  margin-bottom: var(--space-6);
  text-align: center;
}

.tab-content-section h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--text-white);
  margin-bottom: var(--space-3);
}

.tab-content-section p {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}

.tab-content-section code {
  background: var(--bg-card);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 0.9em;
  color: var(--neon-red-bright);
}

.tab-content-section a {
  color: var(--neon-red-bright);
  text-decoration: none;
}

.tab-content-section a:hover {
  text-decoration: underline;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .tab-nav {
    padding: 0 1rem;
  }

  .tab-nav-brand span {
    display: none;
  }

  .tab-nav-items {
    gap: 0.5rem;
  }

  .tab-nav-item {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
  }

  .tab-panel {
    padding: 1rem;
  }

  .tab-close {
    top: 65px;
    right: 1rem;
    width: 36px;
    height: 36px;
  }

  .tab-content-section {
    padding: 0 1rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REPUTATION SYSTEM TABLES
   ═══════════════════════════════════════════════════════════════════════════ */

.reputation-formula-table,
.streak-bonus-table,
.prestige-tiers-table {
  width: 100%;
  margin: 1.5rem 0;
  border-collapse: collapse;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.reputation-formula-table thead,
.streak-bonus-table thead,
.prestige-tiers-table thead {
  background: linear-gradient(135deg, rgba(255, 0, 100, 0.15), rgba(200, 0, 255, 0.15));
}

.reputation-formula-table th,
.streak-bonus-table th,
.prestige-tiers-table th {
  padding: 1rem;
  text-align: left;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--neon-red-bright);
  border-bottom: 2px solid var(--border-color);
}

.reputation-formula-table td,
.streak-bonus-table td,
.prestige-tiers-table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.reputation-formula-table tbody tr:hover,
.streak-bonus-table tbody tr:hover,
.prestige-tiers-table tbody tr:hover {
  background: rgba(255, 0, 100, 0.05);
}

/* Penalty rows in reputation formula */
.penalty-row td {
  background: rgba(255, 0, 0, 0.08);
  color: var(--text-primary);
}

.penalty-row:hover {
  background: rgba(255, 0, 0, 0.15) !important;
}

/* Highlight row (for best streak bonus and transcendent tier) */
.highlight-row td {
  font-weight: 600;
  background: rgba(255, 215, 0, 0.1);
  color: var(--neon-yellow-bright);
}

.highlight-row:hover {
  background: rgba(255, 215, 0, 0.15) !important;
}

/* Prestige tier badges */
.prestige-tiers-table td:nth-child(3) {
  font-size: 1.5rem;
  text-align: center;
}

/* Mobile responsive tables */
@media (max-width: 768px) {
  .reputation-formula-table,
  .streak-bonus-table,
  .prestige-tiers-table {
    font-size: 0.875rem;
  }

  .reputation-formula-table th,
  .streak-bonus-table th,
  .prestige-tiers-table th {
    padding: 0.75rem 0.5rem;
    font-size: 0.75rem;
  }

  .reputation-formula-table td,
  .streak-bonus-table td,
  .prestige-tiers-table td {
    padding: 0.625rem 0.5rem;
  }

  .prestige-tiers-table td:nth-child(3) {
    font-size: 1.25rem;
  }
}