:root {
  --bg-dark: #07080B;
  --bg-card: rgba(17, 19, 27, 0.75);
  --bg-card-hover: rgba(24, 27, 38, 0.85);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-active: rgba(255, 255, 255, 0.18);
  
  --text-primary: #F3F4F6;
  --text-secondary: #9CA3AF;
  --text-muted: #6B7280;

  --accent-emerald: #10B981;
  --accent-cyan: #06B6D4;
  --accent-purple: #A855F7;
  --accent-amber: #F59E0B;
  --accent-rose: #F43F5E;

  --font-main: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--bg-dark);
  color: var(--text-primary);
  font-family: var(--font-main);
  min-height: 100vh;
  min-height: -webkit-fill-available;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  position: relative;
}

/* Background Atmospheric Lighting */
.ambient-glow {
  position: fixed;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.15;
}

.glow-top {
  top: -150px;
  right: -100px;
  background: radial-gradient(circle, var(--accent-cyan), var(--accent-purple));
}

.glow-bottom {
  bottom: -150px;
  left: -100px;
  background: radial-gradient(circle, var(--accent-emerald), transparent);
}

/* Lock Screen Security Overlay */
.lock-screen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(7, 8, 11, 0.96);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lock-screen-overlay.unlocked {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.lock-card {
  max-width: 360px;
  width: 100%;
  padding: 36px 28px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}

.lock-orb {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(6, 182, 212, 0.1);
  border: 1px solid var(--accent-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.lock-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 2px;
  font-weight: 700;
  margin-bottom: 6px;
}

.lock-sub {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

/* Google Sign-in Buttons */
.google-auth-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.google-accounts-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.google-login-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-main);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.google-login-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--accent-cyan);
  transform: translateY(-1px);
}

.g-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 18px 0;
  color: var(--text-muted);
  font-size: 0.65rem;
  letter-spacing: 1px;
}

.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--border-subtle);
}

.auth-divider span {
  padding: 0 10px;
}

.pin-input-wrap input {
  width: 100%;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 2rem;
  letter-spacing: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-active);
  border-radius: var(--radius-md);
  color: #FFF;
  outline: none;
  margin-bottom: 16px;
}

.pin-input-wrap input:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.25);
}

.lock-btn {
  width: 100%;
  padding: 14px;
  font-size: 0.95rem;
}

.pin-error {
  margin-top: 12px;
  font-size: 0.75rem;
  color: var(--accent-rose);
}

/* Glassmorphism Classes */
.glass-card {
  background: var(--bg-card);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.glass-card:hover {
  border-color: var(--border-active);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* Top Navigation Bar */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(7, 8, 11, 0.85);
  backdrop-filter: blur(20px);
  position: sticky;
  top: 0;
  z-index: 50;
}

.brand-cluster {
  display: flex;
  align-items: center;
  gap: 14px;
}

.agent-orb {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orb-core {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-emerald));
  box-shadow: 0 0 16px var(--accent-emerald);
}

.pulse-ring {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--accent-emerald);
  animation: pulse 2.5s infinite ease-out;
}

@keyframes pulse {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

.brand-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tag-os {
  font-size: 0.65rem;
  font-weight: 600;
  background: rgba(6, 182, 212, 0.15);
  color: var(--accent-cyan);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  letter-spacing: 1px;
}

.brand-sub {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.status-tray {
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.status-dot.green { background: var(--accent-emerald); box-shadow: 0 0 6px var(--accent-emerald); }
.status-dot.cyan { background: var(--accent-cyan); box-shadow: 0 0 6px var(--accent-cyan); }
.status-dot.purple { background: var(--accent-purple); box-shadow: 0 0 6px var(--accent-purple); }

.btn-icon {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-icon:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: rotate(45deg);
}

/* Main Layout */
.main-content {
  flex: 1;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 20px 100px;
  position: relative;
  z-index: 10;
}

.view-panel {
  display: none;
}

.view-panel.active {
  display: block;
  animation: fadeIn 0.16s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(3px) translateZ(0); }
  to { opacity: 1; transform: translateY(0) translateZ(0); }
}

.view-header {
  margin-bottom: 24px;
}

.view-header h2 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.view-header .subtitle {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Grid Layouts */
.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 20px;
}

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

.card-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-secondary);
}

.card-body {
  padding: 20px;
}

/* Badges */
.badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-full);
}

.badge.green { background: rgba(16, 185, 129, 0.15); color: var(--accent-emerald); }
.badge.cyan { background: rgba(6, 182, 212, 0.15); color: var(--accent-cyan); }
.badge.blue { background: rgba(59, 130, 246, 0.15); color: #60A5FA; }
.badge.purple { background: rgba(168, 85, 247, 0.15); color: var(--accent-purple); }
.badge.yellow { background: rgba(245, 158, 11, 0.15); color: var(--accent-amber); }

/* Chat Assistant Panel */
.chat-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 180px);
  background: var(--bg-card);
  backdrop-filter: blur(24px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.quick-action-strip {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.2);
}

.quick-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.quick-chip:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--accent-cyan);
  transform: translateY(-1px);
}

.messages-feed {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.msg-bubble {
  max-width: 80%;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  line-height: 1.55;
  animation: fadeIn 0.2s ease;
}

.msg-bubble.user {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(255, 195, 235, 0.75) 0%, rgba(222, 202, 255, 0.68) 50%, rgba(185, 232, 255, 0.60) 100%);
  color: #1a0f22;
  border: none;
  outline: none;
  padding: 9px 16px;
  border-radius: 18px 18px 4px 18px;
}

.msg-bubble.assistant {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  outline: none;
  color: var(--text-primary);
  padding: 15px 20px;
  border-radius: 20px 20px 20px 4px;
}

.msg-bubble.assistant p {
  margin-bottom: 8px;
}

.msg-bubble.assistant p:last-child {
  margin-bottom: 0;
}

.msg-bubble.assistant strong {
  color: inherit;
  font-weight: 700;
}

.msg-bubble.assistant code {
  font-family: var(--font-mono);
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 0.85em;
  color: var(--accent-cyan);
}

.input-tray {
  padding: 16px;
  background: rgba(7, 8, 11, 0.8);
  border-top: 1px solid var(--border-subtle);
}

.chat-form {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 6px 8px 6px 18px;
  transition: border-color 0.2s;
}

.chat-form:focus-within {
  border-color: var(--accent-cyan);
}

.chat-form input {
  flex: 1;
  background: transparent;
  border: none;
  color: #FFF;
  font-size: 0.9rem;
  outline: none;
  font-family: var(--font-main);
}

.btn-voice, .btn-send {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-voice:hover {
  color: var(--accent-purple);
  background: rgba(168, 85, 247, 0.1);
}

.btn-send {
  background: var(--accent-cyan);
  color: #000;
}

.btn-send:hover {
  background: #22D3EE;
  transform: scale(1.05);
}

/* Housing & Domuso Widgets */
.housing-highlight {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.property-title {
  font-weight: 700;
  font-size: 1rem;
}

.property-sub {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.balance-badge {
  text-align: right;
}

.balance-label {
  display: block;
  font-size: 0.65rem;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.balance-val {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent-emerald);
}

.meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-secondary);
  padding: 10px 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 16px;
}

.meta-row strong {
  color: var(--text-primary);
}

.action-btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.btn-action {
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
  font-family: var(--font-main);
}

.btn-action.primary {
  background: linear-gradient(135deg, var(--accent-emerald), #059669);
  color: #000;
}

.btn-action.primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.btn-action.secondary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
}

.btn-action.secondary:hover {
  background: rgba(255, 255, 255, 0.15);
}

.btn-mini {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.large-btn {
  width: 100%;
  padding: 14px;
  font-size: 0.95rem;
  margin-top: 14px;
}

/* Ledger Breakdown */
.ledger-breakdown {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.ledger-item {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.ledger-item span:last-child {
  color: var(--text-primary);
  font-weight: 600;
}

.ledger-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  font-weight: 700;
  padding: 12px 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.total-highlight {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--accent-emerald);
}

.payment-method-strip {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 12px;
}

/* Timeline & Feed */
.timeline-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.timeline-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.timeline-time {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent-cyan);
  white-space: nowrap;
}

.timeline-info {
  flex: 1;
}

.timeline-title {
  font-size: 0.85rem;
  font-weight: 600;
}

.timeline-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.shield-tag {
  font-size: 0.65rem;
  background: rgba(168, 85, 247, 0.15);
  color: var(--accent-purple);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Subscriptions & Accounts */
.burn-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.stat-number {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  display: block;
}

/* Oura Ring Biometrics */
.oura-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.oura-metric-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 8px;
  text-align: center;
}

.oura-val {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent-cyan);
  display: block;
}

.oura-val small {
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 2px;
}

.oura-label {
  font-size: 0.65rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
  display: block;
}

.oura-rec-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.2);
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-primary);
}

.rec-icon {
  font-size: 1.1rem;
}

.burn-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: var(--accent-amber);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  max-width: 55%;
}

.mini-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mini-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
}

.accounts-detail-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.account-detail-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
}

.acc-badge-icon {
  font-size: 1.6rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
}

.acc-detail-info {
  flex: 1;
}

.acc-detail-title {
  font-size: 0.95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

.acc-detail-email {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.acc-services-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.service-chip {
  font-size: 0.65rem;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}

.btn-danger:hover {
  background: rgba(244, 63, 94, 0.2);
  border-color: var(--accent-rose);
  color: var(--accent-rose);
}

.account-box {
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  text-align: center;
}

.acc-icon {
  font-size: 1.2rem;
  margin-bottom: 4px;
}

.acc-name {
  font-size: 0.75rem;
  font-weight: 600;
}

.acc-sub {
  font-size: 0.65rem;
  color: var(--text-muted);
}

/* Builder Studio */
.builder-form .form-group {
  margin-bottom: 14px;
}

.form-group label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.form-group input, .form-group select {
  width: 100%;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: #FFF;
  font-family: var(--font-main);
  font-size: 0.85rem;
  outline: none;
}

.form-group input:focus, .form-group select:focus {
  border-color: var(--accent-cyan);
}

.form-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
}

.modules-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.module-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.module-icon {
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
}

.module-info {
  flex: 1;
}

.module-title {
  font-size: 0.85rem;
  font-weight: 700;
}

.module-tagline {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Bottom Navigation Bar */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(7, 8, 11, 0.9);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-around;
  padding: 8px 12px 24px;
  z-index: 100;
}

.nav-item {
  background: transparent;
  border: none;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  transition: all 0.2s;
}

.nav-item.active {
  color: var(--accent-cyan);
}

.nav-icon {
  font-size: 1.2rem;
}

.nav-text {
  font-size: 0.65rem;
  font-weight: 600;
}

/* Modal */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}

.modal-backdrop.open {
  display: flex;
}

.modal-content {
  max-width: 460px;
  width: 100%;
  padding: 24px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.modal-header h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .status-tray .status-pill {
    display: none;
  }
  .grid-layout {
    grid-template-columns: 1fr;
  }
  .chat-container {
    height: calc(100vh - 200px);
  }
}

/* Autonomous Relay Trace Pill */
.relay-trace-pill {
  display: inline-flex;
  align-items: center;
  margin-top: 14px;
  padding: 6px 12px;
  background: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.25);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent-cyan);
  letter-spacing: 0.02em;
  word-break: break-word;
}

/* =========================================================================
   🪼 JELLYFISH 1.0 THEME: PURE LIQUID GLASS PRISMATIC TRANSLUCENCY
   Universal Helvetica Typography & Deep Organic Membrane Mechanics
   ========================================================================= */
html.jellyfish,
body.jellyfish {
  --jf-ink: #181118;
  --jf-ink-light: #2e222d;
  --jf-muted: #5e515d;
  --jf-faint: #887a85;
  --jf-pink: rgba(255, 164, 215, 0.38);
  --jf-violet: rgba(193, 158, 255, 0.34);
  --jf-blue: rgba(123, 224, 255, 0.38);
  --jf-lime: rgba(205, 255, 157, 0.30);
  --jf-glow: 1;
  --jf-translucence: 1;
  
  background:
    radial-gradient(ellipse 70% 60% at 88% 12%, rgba(194, 239, 255, 0.58), transparent 70%),
    radial-gradient(ellipse 75% 65% at 12% 88%, rgba(255, 188, 224, 0.52), transparent 70%),
    radial-gradient(ellipse 60% 50% at 75% 75%, rgba(220, 211, 255, 0.42), transparent 65%),
    radial-gradient(ellipse 55% 45% at 25% 25%, rgba(205, 255, 157, 0.26), transparent 60%),
    linear-gradient(135deg, #ffffff 0%, #faf8fc 50%, #f4f8fe 100%) !important;
  color: var(--jf-ink) !important;
  font-family: "Helvetica Neue", Helvetica, Arial, -apple-system, sans-serif !important;
  position: relative;
  overflow-x: hidden;
}

/* =========================================================================
   UNIVERSAL HELVETICA TYPOGRAPHY THROUGHOUT
   (Preserving Monospace/Techy Tokens as explicit exceptions)
   ========================================================================= */
body.jellyfish,
body.jellyfish *,
body.jellyfish button,
body.jellyfish input,
body.jellyfish select,
body.jellyfish textarea,
body.jellyfish h1,
body.jellyfish h2,
body.jellyfish h3,
body.jellyfish h4,
body.jellyfish h5,
body.jellyfish h6,
body.jellyfish p,
body.jellyfish span,
body.jellyfish div,
body.jellyfish label,
body.jellyfish a,
body.jellyfish li,
body.jellyfish strong,
body.jellyfish b,
body.jellyfish em,
body.jellyfish small,
body.jellyfish .brand-title,
body.jellyfish .brand-sub,
body.jellyfish .section-title,
body.jellyfish .section-sub,
body.jellyfish .card-title,
body.jellyfish .property-title,
body.jellyfish .property-sub,
body.jellyfish .radar-val,
body.jellyfish .balance-val,
body.jellyfish .balance-label,
body.jellyfish .radar-sub,
body.jellyfish .stat-number,
body.jellyfish .subtitle,
body.jellyfish .jf-display,
body.jellyfish .jf-card-title,
body.jellyfish .jf-eyebrow,
body.jellyfish .jf-brand-tag,
body.jellyfish .jf-live-tag,
body.jellyfish .jf-copy {
  font-family: "Helvetica Neue", Helvetica, Arial, -apple-system, sans-serif !important;
}

/* Techy Monospace / Code Accents */
body.jellyfish code,
body.jellyfish pre,
body.jellyfish .mono,
body.jellyfish .relay-trace-pill,
body.jellyfish .tag-os,
body.jellyfish .timeline-time,
body.jellyfish .token-val {
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace !important;
}

/* Techy Serif Accent (Editorial & Quote Highlights) */
body.jellyfish .tech-serif,
body.jellyfish .serif-accent,
body.jellyfish .editorial-serif {
  font-family: "Newsreader", "Instrument Serif", Georgia, "Times New Roman", serif !important;
}

/* Ambient Diffuse Chromatic Sheet Behind Canvas */
body.jellyfish::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 55% at calc(45% + var(--jf-field-x, 0px)) calc(50% + var(--jf-field-y, 0px)), rgba(255, 180, 225, 0.38) 0%, rgba(215, 195, 255, 0.28) 32%, rgba(160, 230, 255, 0.28) 60%, rgba(200, 255, 180, 0.16) 80%, transparent 100%);
  filter: blur(65px) saturate(1.45);
  opacity: calc(0.95 * var(--jf-glow));
  will-change: transform;
  transform: translate3d(var(--jf-field-x, 0px), var(--jf-field-y, 0px), 0);
}

/* Transparent Chat Container (Prevents Milky Double-Layer Box) */
body.jellyfish .chat-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}

body.jellyfish .chat-container::before,
body.jellyfish .chat-container::after {
  display: none !important;
}

/* Pure Liquid Glass Surfaces (High Translucency, Zero Hard Outlines) */
body.jellyfish .glass-card,
body.jellyfish .radar-card,
body.jellyfish .account-card,
body.jellyfish .builder-card,
body.jellyfish .lock-card,
body.jellyfish .modal-content {
  position: relative;
  background: linear-gradient(137deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.06)) !important;
  border: none !important;
  border-radius: 40px 52px 42px 48px / 46px 40px 52px 42px !important;
  box-shadow:
    inset 1.5px 1.5px 3.5px rgba(255, 255, 255, 0.95),
    inset 8px 12px 30px rgba(255, 255, 255, 0.18),
    inset -8px -10px 20px rgba(132, 94, 134, 0.015),
    0 20px 50px rgba(100, 60, 95, 0.035) !important;
  backdrop-filter: blur(28px) saturate(1.7) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.7) !important;
  color: var(--jf-ink) !important;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease !important;
}

/* Internal Refraction Caustic Glow on Cards */
body.jellyfish .glass-card::before,
body.jellyfish .radar-card::before,
body.jellyfish .account-card::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: 0;
  pointer-events: none;
  border-radius: 46% 54% 58% 42% / 50% 44% 56% 50%;
  background:
    radial-gradient(ellipse at var(--jf-light-x, 38%) var(--jf-light-y, 30%), rgba(255, 255, 255, 0.70) 0 3%, rgba(255, 255, 255, 0.14) 12%, transparent 28%),
    radial-gradient(ellipse at 80% 68%, rgba(155, 226, 255, 0.14), transparent 32%),
    radial-gradient(ellipse at 25% 80%, rgba(255, 164, 215, 0.14), transparent 30%),
    linear-gradient(118deg, transparent 35%, rgba(255, 255, 255, 0.22) 48%, transparent 62%);
  filter: blur(14px) saturate(1.4);
  opacity: 0.85;
  transition: all 0.5s ease;
}

/* Prismatic Dynamic Optical Dispersion Highlight (Soft Rim Membrane) */
body.jellyfish .glass-card::after,
body.jellyfish .radar-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from 208deg, rgba(255, 255, 255, 0.18), rgba(255, 188, 224, 0.38), rgba(220, 211, 255, 0.32), rgba(194, 239, 255, 0.38), rgba(233, 255, 192, 0.24), rgba(255, 255, 255, 0.18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.40;
}

/* Ensure Inner Content Sits Above Caustic Layers */
body.jellyfish .glass-card > *,
body.jellyfish .radar-card > * {
  position: relative;
  z-index: 2;
}

/* Liquid Translucent Top Bar & Bottom Nav */
body.jellyfish .top-bar {
  background: rgba(255, 255, 255, 0.30) !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(100, 60, 95, 0.025) !important;
  backdrop-filter: blur(28px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.8) !important;
  color: var(--jf-ink) !important;
}

body.jellyfish .bottom-nav {
  background: rgba(255, 255, 255, 0.35) !important;
  border: none !important;
  box-shadow: 0 -4px 24px rgba(100, 60, 95, 0.03) !important;
  backdrop-filter: blur(28px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.8) !important;
}

/* Quick Action Strip & Translucent Chips */
body.jellyfish .quick-action-strip {
  background: transparent !important;
  border: none !important;
  padding: 14px 20px !important;
}

body.jellyfish .quick-chip {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.10)) !important;
  border: none !important;
  color: var(--jf-ink) !important;
  border-radius: 9999px !important;
  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.95),
    0 4px 14px rgba(100, 60, 90, 0.03) !important;
  backdrop-filter: blur(20px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
  font-weight: 500 !important;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease !important;
}

body.jellyfish .quick-chip:hover {
  background: rgba(255, 255, 255, 0.60) !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 1),
    0 8px 24px rgba(193, 158, 255, 0.22) !important;
}

/* Liquid Chat Stream & Translucent Droplet Bubbles (High Clarity) */
body.jellyfish .messages-feed {
  background: transparent !important;
  gap: 18px !important;
}

body.jellyfish .msg-bubble.assistant {
  background: rgba(255, 255, 255, 0.92) !important;
  border: none !important;
  outline: none !important;
  color: var(--jf-ink) !important;
  padding: 15px 20px !important;
  box-shadow: 0 4px 16px rgba(120, 95, 150, 0.04), 0 1px 4px rgba(120, 95, 150, 0.02) !important;
  backdrop-filter: blur(28px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.8) !important;
  border-radius: 20px 20px 20px 4px !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease !important;
}

body.jellyfish .msg-bubble.assistant:hover {
  transform: translateY(-1px) translateZ(0) !important;
  box-shadow: 0 8px 24px rgba(120, 95, 150, 0.06), 0 2px 6px rgba(120, 95, 150, 0.03) !important;
}

body.jellyfish .msg-bubble.assistant strong {
  color: #110e11 !important;
  font-weight: 700 !important;
}

body.jellyfish .msg-bubble.assistant p,
body.jellyfish .msg-bubble.assistant span,
body.jellyfish .msg-bubble.assistant li,
body.jellyfish .msg-bubble.assistant div {
  color: var(--jf-ink) !important;
}

body.jellyfish .msg-bubble.assistant code {
  background: rgba(193, 158, 255, 0.15) !important;
  color: #582490 !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: "JetBrains Mono", monospace !important;
}

body.jellyfish .msg-bubble.user {
  background: linear-gradient(135deg, rgba(255, 195, 235, 0.75) 0%, rgba(222, 202, 255, 0.68) 50%, rgba(185, 232, 255, 0.60) 100%) !important;
  border: none !important;
  outline: none !important;
  color: #1a0f22 !important;
  font-weight: 500 !important;
  padding: 9px 16px !important;
  box-shadow: 0 4px 14px rgba(195, 130, 215, 0.12), 0 1px 4px rgba(195, 130, 215, 0.05) !important;
  backdrop-filter: blur(28px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.8) !important;
  border-radius: 18px 18px 4px 18px !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease !important;
}

body.jellyfish .msg-bubble.user:hover {
  transform: translateY(-1px) translateZ(0) !important;
  box-shadow: 0 8px 20px rgba(195, 130, 215, 0.18), 0 2px 6px rgba(195, 130, 215, 0.08) !important;
}

/* Floating Translucent Input Capsule */
body.jellyfish .input-tray {
  background: transparent !important;
  border: none !important;
  padding: 12px 20px 18px !important;
}

body.jellyfish .chat-form {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.12)) !important;
  border: none !important;
  outline: none !important;
  border-radius: 9999px !important;
  box-shadow:
    inset 1.5px 1.5px 3.5px rgba(255, 255, 255, 0.95),
    inset 6px 8px 20px rgba(255, 255, 255, 0.20),
    0 12px 30px rgba(100, 60, 95, 0.04) !important;
  backdrop-filter: blur(28px) saturate(1.7) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.7) !important;
  padding: 6px 10px 6px 20px !important;
}

body.jellyfish #chat-input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--jf-ink) !important;
  font-size: 15px !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

body.jellyfish #chat-input::placeholder {
  color: var(--jf-faint) !important;
}

/* Sculpted Liquid Action Buttons */
body.jellyfish .btn-send,
body.jellyfish .btn-action.primary {
  background: radial-gradient(circle at 33% 24%, rgba(255, 255, 255, 0.98) 0 5%, rgba(255, 188, 224, 0.75) 38%, rgba(193, 158, 255, 0.85) 100%) !important;
  border: none !important;
  color: var(--jf-ink) !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 22px rgba(193, 158, 255, 0.30) !important;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease !important;
}

body.jellyfish .btn-send:hover,
body.jellyfish .btn-action.primary:hover {
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 12px 30px rgba(193, 158, 255, 0.45) !important;
}

body.jellyfish .btn-action.secondary {
  background: rgba(255, 255, 255, 0.35) !important;
  border: none !important;
  color: var(--jf-ink) !important;
  font-weight: 600 !important;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.9), 0 4px 12px rgba(100, 60, 90, 0.03) !important;
  backdrop-filter: blur(20px) saturate(1.5) !important;
}

body.jellyfish .btn-action.secondary:hover {
  background: rgba(255, 255, 255, 0.65) !important;
}

body.jellyfish .btn-mini {
  background: rgba(255, 255, 255, 0.35) !important;
  border: none !important;
  color: var(--jf-ink) !important;
  font-weight: 600 !important;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(16px) !important;
}

body.jellyfish .btn-voice {
  color: var(--jf-muted) !important;
}

body.jellyfish .btn-voice:hover {
  color: #c9448a !important;
  background: rgba(255, 164, 215, 0.18) !important;
}

/* Badges with Rich Contrast in Jellyfish Mode */
body.jellyfish .badge {
  background: rgba(255, 255, 255, 0.45) !important;
  border: none !important;
  font-weight: 600 !important;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.9), 0 2px 8px rgba(100, 60, 90, 0.025) !important;
  backdrop-filter: blur(16px) !important;
}
body.jellyfish .badge.green { color: #0d7042 !important; }
body.jellyfish .badge.blue { color: #1e5cb8 !important; }
body.jellyfish .badge.purple { color: #6a21a8 !important; }
body.jellyfish .badge.yellow { color: #945800 !important; }
body.jellyfish .badge.cyan { color: #086a7d !important; }

/* Subordinate Meta, Labels, and Structural Rows */
body.jellyfish .brand-title,
body.jellyfish .section-title,
body.jellyfish .card-title,
body.jellyfish .property-title,
body.jellyfish .radar-val,
body.jellyfish .balance-val,
body.jellyfish .stat-number {
  color: var(--jf-ink) !important;
  font-weight: 700 !important;
  letter-spacing: -0.035em !important;
}

body.jellyfish .brand-sub,
body.jellyfish .section-sub,
body.jellyfish .property-sub,
body.jellyfish .balance-label,
body.jellyfish .radar-sub,
body.jellyfish .text-secondary,
body.jellyfish .text-muted,
body.jellyfish .subtitle,
body.jellyfish label,
body.jellyfish p {
  color: var(--jf-muted) !important;
}

body.jellyfish .meta-row span {
  color: #584c55 !important;
}

body.jellyfish .meta-row strong {
  color: var(--jf-ink) !important;
  font-weight: 700 !important;
}

body.jellyfish .timeline-meta {
  color: #6e616c !important;
}

body.jellyfish .nav-item.active {
  color: #c9448a !important;
  font-weight: 700 !important;
}

body.jellyfish .nav-item.active .nav-icon {
  filter: drop-shadow(0 0 10px rgba(255, 164, 215, 0.8)) !important;
}

body.jellyfish .relay-trace-pill {
  background: rgba(193, 158, 255, 0.15) !important;
  border: none !important;
  color: #5d259c !important;
  border-radius: 9999px !important;
  font-weight: 600 !important;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(16px) !important;
}

body.jellyfish .status-pill {
  background: rgba(255, 255, 255, 0.38) !important;
  border: none !important;
  color: var(--jf-ink) !important;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px) !important;
}

body.jellyfish .timeline-card,
body.jellyfish .oura-metric-box,
body.jellyfish .oura-rec-box,
body.jellyfish .burn-stat,
body.jellyfish .account-box,
body.jellyfish .module-card {
  background: rgba(255, 255, 255, 0.22) !important;
  border: none !important;
  color: var(--jf-ink) !important;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(24px) saturate(1.6) !important;
}

body.jellyfish .timeline-title,
body.jellyfish .oura-val,
body.jellyfish .acc-name,
body.jellyfish .module-title {
  color: var(--jf-ink) !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   JELLYFISH 1.0 — PRODUCTION FOUNDATION
   The application layout lives in this file; the optical skin is completed in
   jellyfish.css. These rules also keep the pre-hydration frame on-brand.
   ========================================================================== */
:root {
  --bg-dark: #f5f4f7;
  --bg-card: rgba(255, 255, 255, 0.10);
  --bg-card-hover: rgba(255, 255, 255, 0.16);
  --border-subtle: transparent;
  --border-active: transparent;
  --text-primary: #17131a;
  --text-secondary: #5f5664;
  --text-muted: #827887;
  --accent-emerald: #16845d;
  --accent-cyan: #167b96;
  --accent-purple: #7542aa;
  --accent-amber: #946111;
  --accent-rose: #b43b6c;
  --font-main: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}

html,
body,
button,
input,
select,
textarea {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

code,
pre,
kbd,
samp,
.mono,
.tag-os,
.relay-trace-pill,
.timeline-time,
.token-val,
.service-chip {
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace !important;
}

.tech-serif,
.serif-accent,
.editorial-serif,
blockquote.editorial {
  font-family: "Newsreader", Georgia, "Times New Roman", serif !important;
}

body {
  background:
    radial-gradient(ellipse 70% 58% at 8% 12%, rgba(255, 178, 220, 0.56), transparent 69%),
    radial-gradient(ellipse 64% 54% at 92% 9%, rgba(151, 226, 255, 0.55), transparent 70%),
    radial-gradient(ellipse 58% 52% at 74% 91%, rgba(199, 178, 255, 0.50), transparent 68%),
    radial-gradient(ellipse 54% 46% at 19% 84%, rgba(208, 255, 164, 0.40), transparent 67%),
    linear-gradient(145deg, #fbfafc 0%, #f3f7fb 48%, #faf6fa 100%);
  background-attachment: fixed;
  color: var(--text-primary);
}

/* There are no structural strokes in Jellyfish. Depth comes from refraction. */
:where(
  .glass-card, .card, .lock-card, .modal-content, .top-bar, .bottom-nav,
  .status-pill, .btn-icon, .quick-chip, .msg-bubble, .chat-form,
  .btn-action, .btn-mini, .google-login-btn, .pin-input-wrap input,
  .timeline-card, .oura-metric-box, .oura-rec-box, .burn-stat,
  .account-box, .account-detail-card, .module-card, .service-chip,
  .relay-trace-pill, .badge, .form-group input, .form-group select,
  .form-group textarea
) {
  border: 0 !important;
  outline: 0;
}

:where(
  .glass-card, .card, .lock-card, .modal-content, .top-bar, .bottom-nav,
  .status-pill, .quick-chip, .chat-form, .google-login-btn,
  .timeline-card, .oura-metric-box, .oura-rec-box, .burn-stat,
  .account-box, .account-detail-card, .module-card, .service-chip,
  .relay-trace-pill, .badge, .form-group input, .form-group select,
  .form-group textarea
) {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)) !important;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.62),
    inset -12px -14px 30px rgba(118, 91, 136, 0.025),
    0 16px 42px rgba(80, 52, 91, 0.055);
  backdrop-filter: blur(28px) saturate(1.7);
  -webkit-backdrop-filter: blur(28px) saturate(1.7);
}

.lock-screen-overlay {
  background: rgba(241, 238, 246, 0.16);
  backdrop-filter: blur(40px) saturate(1.45);
  -webkit-backdrop-filter: blur(40px) saturate(1.45);
}

.modal-backdrop {
  background: rgba(49, 37, 55, 0.12);
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
}

.ambient-glow {
  opacity: 0.42;
  filter: blur(110px) saturate(1.35);
}

.glow-top {
  background: radial-gradient(circle, rgba(129, 221, 255, 0.64), rgba(208, 170, 255, 0.24), transparent 72%);
}

.glow-bottom {
  background: radial-gradient(circle, rgba(211, 255, 164, 0.52), rgba(255, 177, 220, 0.22), transparent 72%);
}

.top-bar,
.bottom-nav {
  background: rgba(255, 255, 255, 0.10) !important;
  color: var(--text-primary);
}

.chat-container,
.quick-action-strip,
.messages-feed,
.input-tray {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.btn-action.primary,
.btn-send {
  background: linear-gradient(140deg, rgba(255, 182, 224, 0.20), rgba(185, 170, 255, 0.18), rgba(142, 224, 255, 0.16)) !important;
  color: #26182a;
}

.btn-action.secondary,
.btn-mini,
.btn-icon,
.btn-voice {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--text-primary);
}

.auth-divider::before,
.auth-divider::after,
.card-header,
.meta-row,
.ledger-total,
.input-tray,
.top-bar,
.bottom-nav {
  border-color: transparent !important;
}