/* shared.css — design tokens and base styles for PDA 777
 * Loaded by every page via <link rel="stylesheet" href="shared.css">
 * Pages override only what they need in their own <style> block.
 */

/* ── Design Tokens ───────────────────────────────────────────────────────── */
:root {
  /* Colors */
  --bg:      #080808;
  --panel:   #111111;
  --border:  rgba(255,255,255,0.08);
  --border2: rgba(255,255,255,0.16);
  --text:    #ffffff;
  --muted:   rgba(255,255,255,0.45);
  --font:    'Inter', sans-serif;
  --green:   #34d399;
  --amber:   #fbbf24;
  --red:     #f87171;
  --blue:    #60a5fa;

  /* Radius scale */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-2xl: 28px;

  /* Duration scale */
  --t-fast:  0.14s;
  --t-base:  0.18s;
  --t-slow:  0.3s;
  --t-xslow: 0.5s;

  /* Font scale */
  --fs-xs:   0.68rem;
  --fs-sm:   0.75rem;
  --fs-base: 0.85rem;
  --fs-md:   1rem;
  --fs-lg:   1.2rem;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
button:not(:disabled):hover { transform: scale(1.05); }
button {
  cursor: pointer;
  transition:
    transform var(--t-fast) cubic-bezier(0.34,1.5,0.64,1),
    background var(--t-base),
    color var(--t-base),
    border-color var(--t-base),
    box-shadow var(--t-base),
    opacity var(--t-base);
}

/* ── Base ────────────────────────────────────────────────────────────────── */
html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  overflow: hidden;
}

/* ── Background gradient ─────────────────────────────────────────────────── */
body::before {
  content: ''; position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 15% 85%, rgba(255,255,255,0.025) 0%, transparent 65%),
    radial-gradient(ellipse 40% 35% at 85% 10%, rgba(255,255,255,0.02)  0%, transparent 60%);
  pointer-events: none; z-index: 0;
}

/* ── App shell ───────────────────────────────────────────────────────────── */
.app {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  height: 100vh; overflow: hidden;
}

/* ── Header (hidden in iframe by page.js; kept for structure) ────────────── */
header {
  padding: 14px 32px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  background: rgba(8,8,8,0.92); backdrop-filter: blur(16px); flex-shrink: 0;
}
.logo          { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.logo-icon     { width: 48px; height: 28px; display: flex; align-items: center; justify-content: center; }
.logo-icon img { width: 48px; height: 28px; object-fit: contain; filter: invert(1); }
.logo-text     { font-size: var(--fs-md); font-weight: 700; color: var(--text); }
nav            { display: flex; gap: 4px; margin-left: 28px; }
nav a {
  text-decoration: none; color: var(--muted);
  font-size: var(--fs-base); font-weight: 500;
  padding: 5px 12px; border-radius: var(--r-sm);
  transition: color var(--t-base), background var(--t-base);
}
nav a:hover  { color: var(--text); background: rgba(255,255,255,0.06); }
nav a.active { color: var(--text); background: rgba(255,255,255,0.1); }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar        { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: rgba(255,255,255,0.1); border-radius: 4px; }

/* ── Section label ───────────────────────────────────────────────────────── */
.section-label {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}

/* ── Modal overlay ───────────────────────────────────────────────────────── */
.modal-overlay, .modal-backdrop {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
}
.modal-overlay.open, .modal-backdrop.open { display: flex; }

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

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

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

@keyframes rowIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

@keyframes chatdot {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40%           { opacity: 1;   transform: scale(1); }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(255,255,255,0.06), inset 0 1px 0 rgba(255,255,255,0.08); }
  50%       { box-shadow: 0 0 32px rgba(255,255,255,0.13), inset 0 1px 0 rgba(255,255,255,0.08); }
}

@keyframes ai-glow {
  0%, 100% { box-shadow: 0 0 24px rgba(255,255,255,0.06), inset 0 1px 0 rgba(255,255,255,0.08); }
  50%       { box-shadow: 0 0 38px rgba(255,255,255,0.14), inset 0 1px 0 rgba(255,255,255,0.08); }
}