/* =========================================================================
   POSEIDON — Design System v2 (deep-ocean dark, anti-slop)
   One theme lock: dark. One accent: teal-300 (#5eead4).
   One radius scale: 10px (inputs/cards), 999px (pills/avatars only).
   Typography: Geist + Geist Mono.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* Surface ramp (off-black warm) */
  --ps-bg:        #06080d;
  --ps-bg-soft:   #0a0d14;
  --ps-elev-1:    #0e131c;
  --ps-elev-2:    #131927;
  --ps-line:      rgba(232, 234, 238, 0.07);
  --ps-line-2:    rgba(232, 234, 238, 0.12);

  /* Text ramp */
  --ps-text:      #e8eaee;
  --ps-text-2:    #b6bcc7;
  --ps-text-3:    #8a8f99;
  --ps-text-4:    #5d626d;

  /* Single accent (locked) */
  --ps-accent:        #5eead4;
  --ps-accent-2:      #2dd4bf;
  --ps-accent-ink:    #042f2a;
  --ps-accent-soft:   rgba(94, 234, 212, 0.10);
  --ps-accent-ring:   rgba(94, 234, 212, 0.22);

  /* Semantic states (used only where state is real) */
  --ps-danger:    #f87171;
  --ps-danger-soft: rgba(248, 113, 113, 0.10);
  --ps-success:   #86efac;
  --ps-success-soft: rgba(134, 239, 172, 0.10);
  --ps-warn:      #fbbf24;
  --ps-warn-soft: rgba(251, 191, 36, 0.10);

  /* Radius scale (one) */
  --ps-r:         10px;
  --ps-r-sm:      8px;
  --ps-r-pill:    999px;

  /* Type scale */
  --ps-font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ps-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Spacing rhythm */
  --ps-pad-section: clamp(40px, 6vw, 96px);
  --ps-gap: 24px;

  /* Tinted shadows (no pure black) */
  --ps-shadow-1: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 24px -8px rgba(6, 12, 24, 0.6);
  --ps-shadow-2: 0 1px 0 rgba(255,255,255,0.04) inset, 0 18px 48px -16px rgba(4, 47, 42, 0.5);

  /* Motion */
  --ps-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ps-dur: 220ms;
}

/* Hard reset (lean) */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html, body {
  background: var(--ps-bg);
  color: var(--ps-text);
  font-family: var(--ps-font-sans);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  scroll-behavior: smooth;
}

body { overflow-x: hidden; }

/* Background: deep ocean ink with one subtle, fixed radial. No animated orbs. */
body.ps-bg-aurora {
  background:
    radial-gradient(900px 600px at 78% 12%, rgba(45, 212, 191, 0.07) 0%, transparent 60%),
    radial-gradient(700px 500px at 8% 92%, rgba(94, 234, 212, 0.05) 0%, transparent 60%),
    var(--ps-bg);
}

/* Grain (fixed pseudo, pointer-events none, perf-safe) */
body.ps-bg-aurora::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.92  0 0 0 0 0.93  0 0 0 0 0.95  0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Selection */
::selection { background: var(--ps-accent-soft); color: var(--ps-text); }

/* Focus ring (single source) */
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ps-bg), 0 0 0 4px var(--ps-accent-ring);
  border-radius: var(--ps-r);
}

/* Typography primitives */
.ps-display {
  font-family: var(--ps-font-sans);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  font-size: clamp(2.4rem, 5vw, 4rem);
  color: var(--ps-text);
}
.ps-h2 {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--ps-text);
}
.ps-h3 { font-weight: 600; font-size: 1.125rem; letter-spacing: -0.01em; color: var(--ps-text); }
.ps-body { font-size: 0.95rem; line-height: 1.65; color: var(--ps-text-2); max-width: 62ch; }
.ps-muted { color: var(--ps-text-3); }
.ps-mono { font-family: var(--ps-font-mono); font-variant-numeric: tabular-nums; }

/* Layout */
.ps-shell { position: relative; z-index: 1; width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); }
.ps-stack > * + * { margin-top: var(--gap, 16px); }

/* ── Card ── */
.ps-card {
  background: linear-gradient(180deg, var(--ps-elev-1) 0%, var(--ps-bg-soft) 100%);
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-r);
  box-shadow: var(--ps-shadow-1);
}
.ps-card--lift { box-shadow: var(--ps-shadow-2); }

/* ── Button system ── */
.ps-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--ps-r);
  background: transparent;
  color: var(--ps-text);
  font-family: var(--ps-font-sans);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--ps-dur) var(--ps-ease),
              background-color var(--ps-dur) var(--ps-ease),
              border-color var(--ps-dur) var(--ps-ease),
              color var(--ps-dur) var(--ps-ease);
  white-space: nowrap;
}
.ps-btn:active { transform: translateY(1px); }
.ps-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ps-btn--primary {
  background: var(--ps-accent);
  color: var(--ps-accent-ink);
  font-weight: 600;
}
.ps-btn--primary:hover { background: var(--ps-accent-2); }

.ps-btn--ghost {
  background: transparent;
  color: var(--ps-text-2);
  border-color: var(--ps-line);
}
.ps-btn--ghost:hover { border-color: var(--ps-line-2); color: var(--ps-text); background: var(--ps-elev-1); }

.ps-btn--quiet {
  background: var(--ps-elev-1);
  color: var(--ps-text);
  border-color: var(--ps-line);
}
.ps-btn--quiet:hover { background: var(--ps-elev-2); border-color: var(--ps-line-2); }

.ps-btn--danger {
  background: var(--ps-danger-soft);
  color: var(--ps-danger);
  border-color: rgba(248,113,113,0.18);
}
.ps-btn--danger:hover { background: rgba(248,113,113,0.18); }

.ps-btn--sm { height: 34px; padding: 0 12px; font-size: 0.82rem; }
.ps-btn--lg { height: 52px; padding: 0 26px; font-size: 1rem; }
.ps-btn--block { width: 100%; }

/* ── Inputs ── */
.ps-field { display: block; }
.ps-field-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ps-text-3);
  margin-bottom: 8px;
  letter-spacing: 0.005em;
}
.ps-input,
.ps-textarea,
.ps-select {
  width: 100%;
  background: var(--ps-bg-soft);
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-r);
  padding: 12px 14px;
  color: var(--ps-text);
  font-family: var(--ps-font-sans);
  font-size: 0.95rem;
  line-height: 1.4;
  transition: border-color var(--ps-dur) var(--ps-ease),
              background-color var(--ps-dur) var(--ps-ease),
              box-shadow var(--ps-dur) var(--ps-ease);
  appearance: none;
}
.ps-input:hover, .ps-textarea:hover, .ps-select:hover { border-color: var(--ps-line-2); }
.ps-input:focus, .ps-textarea:focus, .ps-select:focus {
  outline: none;
  border-color: var(--ps-accent);
  background: var(--ps-elev-1);
  box-shadow: 0 0 0 4px var(--ps-accent-ring);
}
.ps-input::placeholder, .ps-textarea::placeholder { color: var(--ps-text-4); }
.ps-textarea { min-height: 120px; resize: vertical; line-height: 1.55; font-family: var(--ps-font-mono); font-size: 0.88rem; }

.ps-input-group {
  display: flex;
  align-items: stretch;
  background: var(--ps-bg-soft);
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-r);
  overflow: hidden;
  transition: border-color var(--ps-dur) var(--ps-ease),
              box-shadow var(--ps-dur) var(--ps-ease),
              background-color var(--ps-dur) var(--ps-ease);
}
.ps-input-group:hover { border-color: var(--ps-line-2); }
.ps-input-group:focus-within {
  border-color: var(--ps-accent);
  background: var(--ps-elev-1);
  box-shadow: 0 0 0 4px var(--ps-accent-ring);
}
.ps-input-group__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  flex-shrink: 0;
  color: var(--ps-text-3);
  border-right: 1px solid var(--ps-line);
}
.ps-input-group:focus-within .ps-input-group__ico { color: var(--ps-accent); }
.ps-input-group__ico svg { width: 18px; height: 18px; stroke-width: 1.6; fill: none; stroke: currentColor; }
.ps-input-group input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--ps-text);
  padding: 12px 14px;
  font: 400 0.95rem/1.4 var(--ps-font-sans);
  outline: none;
  min-width: 0;
}
.ps-input-group input::placeholder { color: var(--ps-text-4); }
.ps-input-group__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--ps-text-3);
  cursor: pointer;
  transition: color var(--ps-dur) var(--ps-ease);
}
.ps-input-group__action:hover { color: var(--ps-text); }
.ps-input-group__action svg { width: 18px; height: 18px; stroke-width: 1.6; fill: none; stroke: currentColor; }

/* ── Pill / Badge ── */
.ps-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--ps-r-pill);
  background: var(--ps-elev-1);
  border: 1px solid var(--ps-line);
  color: var(--ps-text-2);
  font-size: 0.78rem;
  font-family: var(--ps-font-mono);
  font-weight: 500;
  letter-spacing: 0.005em;
  text-decoration: none;
  transition: all var(--ps-dur) var(--ps-ease);
}
.ps-pill:hover { border-color: var(--ps-line-2); color: var(--ps-text); }
.ps-pill--accent { background: var(--ps-accent-soft); color: var(--ps-accent); border-color: rgba(94, 234, 212, 0.18); }
.ps-pill--danger { background: var(--ps-danger-soft); color: var(--ps-danger); border-color: rgba(248,113,113,0.18); }
.ps-pill--success { background: var(--ps-success-soft); color: var(--ps-success); border-color: rgba(134, 239, 172, 0.18); }

/* ── Tables ── */
.ps-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
}
.ps-table thead th {
  text-align: left;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--ps-text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ps-line);
  background: var(--ps-bg-soft);
  position: sticky;
  top: 0;
  z-index: 1;
}
.ps-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--ps-line);
  color: var(--ps-text-2);
  vertical-align: middle;
}
.ps-table tbody tr { transition: background-color var(--ps-dur) var(--ps-ease); }
.ps-table tbody tr:hover { background: rgba(94, 234, 212, 0.025); }
.ps-table tbody tr:last-child td { border-bottom: none; }
.ps-table td .ps-mono { color: var(--ps-text); }

/* ── Toast ── */
.ps-toast {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--ps-elev-2);
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-r);
  color: var(--ps-text);
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 0 12px 40px -8px rgba(0,0,0,0.5);
  transform: translateX(calc(100% + 32px));
  transition: transform 320ms var(--ps-ease);
  max-width: min(380px, calc(100vw - 32px));
}
.ps-toast.show { transform: translateX(0); }
.ps-toast.error { border-color: rgba(248,113,113,0.3); color: var(--ps-danger); }
.ps-toast.success { border-color: rgba(134,239,172,0.3); color: var(--ps-success); }

/* ── Loading ── */
.ps-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--ps-line-2);
  border-top-color: var(--ps-accent);
  border-radius: 50%;
  animation: ps-spin 700ms linear infinite;
}
@keyframes ps-spin { to { transform: rotate(360deg); } }

.ps-skeleton {
  background: linear-gradient(90deg, var(--ps-elev-1) 0%, var(--ps-elev-2) 50%, var(--ps-elev-1) 100%);
  background-size: 200% 100%;
  animation: ps-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--ps-r-sm);
}
@keyframes ps-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Section divider ── */
.ps-rule { height: 1px; background: var(--ps-line); border: none; }

/* ── Nav (sidebar + topbar primitives reused by dashboard/user-panel) ── */
.ps-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--ps-r-sm);
  color: var(--ps-text-3);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--ps-dur) var(--ps-ease);
  text-decoration: none;
  border: 1px solid transparent;
}
.ps-nav-item:hover { background: var(--ps-elev-1); color: var(--ps-text); }
.ps-nav-item.active {
  background: var(--ps-accent-soft);
  color: var(--ps-accent);
  border-color: rgba(94, 234, 212, 0.18);
}
.ps-nav-item svg { width: 18px; height: 18px; stroke-width: 1.6; stroke: currentColor; fill: none; flex-shrink: 0; }

/* ── Stat tile ── */
.ps-stat {
  padding: 22px;
  background: var(--ps-elev-1);
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-r);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color var(--ps-dur) var(--ps-ease);
}
.ps-stat:hover { border-color: var(--ps-line-2); }
.ps-stat__label { font-size: 0.74rem; font-weight: 500; color: var(--ps-text-3); text-transform: uppercase; letter-spacing: 0.08em; }
.ps-stat__value { font-family: var(--ps-font-mono); font-size: 2rem; font-weight: 500; color: var(--ps-text); line-height: 1; letter-spacing: -0.02em; }
.ps-stat__delta { font-family: var(--ps-font-mono); font-size: 0.78rem; color: var(--ps-text-3); }
.ps-stat__delta.up { color: var(--ps-success); }
.ps-stat__delta.down { color: var(--ps-danger); }

/* ── Bento utility grid ── */
.ps-grid { display: grid; gap: var(--gap, 20px); }
.ps-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ps-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ps-grid--auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

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

/* Responsive breakpoints */
@media (max-width: 768px) {
  .ps-grid--3, .ps-grid--4 { grid-template-columns: 1fr; }
}