*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
@keyframes psec-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes psec-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}
.psec-entering {
  animation: psec-in 0.24s cubic-bezier(0.22, 0.68, 0, 1.2) both;
}
.psec-leaving {
  animation: psec-out 0.16s ease forwards;
  pointer-events: none;
}
:root {
  --brand-primary: #2563eb;
  --brand-primary-strong: #1d4ed8;
  --brand-primary-soft: #60a5fa;
  --brand-accent: #0ea5e9;
  --brand-accent-soft: #38bdf8;
  --brand-gradient: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
  /* Legacy aliases kept so older feature CSS inherits the blue system. */
  --purple: var(--brand-primary);
  --pink: var(--brand-accent-soft);
  --orange: #ff6b35;
  --green: #06d6a0;
  --blue: #4cc9f0;
  --bg: #eff6ff;
  --card: #fff;
  --text: #2d2d2d;
  --muted: #888;
  --sb-w: 240px;
  --sb-collapsed: 58px;
  --ai-w: 340px;
  --topbar-h: 54px;
  --shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
  --border: #dbeafe;
  --dp-bg: linear-gradient(135deg, #eff6ff 0%, #f8fafc 48%, #e0f2fe 100%);
  --dp-solid: #eff6ff;
  --dp-modal: linear-gradient(135deg, #ffffff, #eff6ff);
  /* adaptive semantic tokens */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(37, 99, 235, 0.2);
  --glass-border-top: rgba(255, 255, 255, 0.9);
  --on-glass: #0f172a;
  --on-glass-muted: #64748b;
  --on-glass-faint: rgba(100, 116, 139, 0.42);
  --card-inner: rgba(255, 255, 255, 0.7);
  --card-inner-border: rgba(37, 99, 235, 0.15);
  --row-bg: rgba(255, 255, 255, 0.5);
  --row-border: rgba(37, 99, 235, 0.12);
  --section-label: rgba(37, 99, 235, 0.55);
  --divider: rgba(37, 99, 235, 0.1);
  --badge-bg: rgba(37, 99, 235, 0.1);
  --badge-border: rgba(37, 99, 235, 0.18);
  --badge-color: rgba(30, 64, 175, 0.72);
  --slot-bg: rgba(255, 255, 255, 0.55);
}