/* ============================================================
   PhysicsNP Design System v3
   Professional palette — Slate + Indigo + Amber
   ============================================================ */

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

/* ══════════════════════════════════════════
   LIGHT THEME — Crisp white, slate ink, indigo + amber
   ══════════════════════════════════════════ */
:root {
  --bg:           #f8f9fc;
  --bg-soft:      #f0f2f8;
  --surface:      #ffffff;
  --surface-2:    #f5f6fa;
  --surface-3:    #eef0f7;

  --glass:        rgba(255,255,255,0.82);
  --glass-soft:   rgba(255,255,255,0.50);
  --glass-border: rgba(99,102,241,0.10);
  --glass-blur:   blur(24px);
  --shadow-xs:    0 1px 3px rgba(15,23,42,0.06);
  --shadow-sm:    0 4px 12px rgba(15,23,42,0.08);
  --shadow-glass: 0 8px 32px rgba(99,102,241,0.08);
  --shadow-pop:   0 20px 64px rgba(99,102,241,0.14);

  --ink:          #0f172a;
  --ink-soft:     #475569;
  --ink-faint:    #94a3b8;

  /* Indigo — primary interactive */
  --brand:        #6366f1;
  --brand-light:  #818cf8;
  --brand-dark:   #4f46e5;
  --brand-glow:   rgba(99,102,241,0.25);

  /* Amber — accent / CTA */
  --accent:       #f59e0b;
  --accent-light: #fbbf24;
  --accent-dark:  #d97706;
  --accent-glow:  rgba(245,158,11,0.30);

  /* Teal — secondary accent */
  --teal:         #0ea5e9;
  --teal-glow:    rgba(14,165,233,0.25);

  --ok:           #10b981;
  --warn:         #f59e0b;
  --bad:          #ef4444;

  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  32px;
  --r-pill:999px;

  --nav-h:    68px;
  --tabbar-h: 64px;
  --ease:      cubic-bezier(.16,1,.3,1);
  --ease-snap: cubic-bezier(.34,1.56,.64,1);
}

/* ══════════════════════════════════════════
   DARK THEME — Deep graphite, vivid indigo + amber
   ══════════════════════════════════════════ */
[data-theme="dark"] {
  --bg:           #27374D;
  --bg-soft:      #13151e;
  --surface:      #526D82;
  --surface-2:    #1e2133;
  --surface-3:    #252840;

  --glass:        rgba(24,27,38,0.85);
  --glass-soft:   rgba(24,27,38,0.55);
  --glass-border: rgba(221,230,237,0.12);
  --shadow-xs:    0 1px 3px rgba(0,0,0,0.40);
  --shadow-sm:    0 4px 12px rgba(0,0,0,0.50);
  --shadow-glass: 0 8px 32px rgba(0,0,0,0.45);
  --shadow-pop:   0 24px 72px rgba(0,0,0,0.60);

  --ink:          #f1f5f9;
  --ink-soft:     #DDE6ED;
  --ink-faint:    #DDE6ED;

  --brand:        #818cf8;
  --brand-light:  #a5b4fc;
  --brand-dark:   #6366f1;
  --brand-glow:   rgba(129,140,248,0.30);

  --accent:       #fbbf24;
  --accent-light: #fcd34d;
  --accent-dark:  #f59e0b;
  --accent-glow:  rgba(251,191,36,0.28);

  --teal:         #38bdf8;
  --teal-glow:    rgba(56,189,248,0.25);

  --ok:           #34d399;
  --warn:         #fbbf24;
  --bad:          #f87171;
}

/* ══ Reset ══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--bg); color: var(--ink);
  line-height: 1.6; -webkit-font-smoothing: antialiased;
  transition: background .35s, color .35s;
  overscroll-behavior-y: none;
}
.disp { font-family: 'Sora', sans-serif; }
.mono { font-family: 'JetBrains Mono', monospace; }
img  { max-width: 100%; height: auto; display: block; }
a    { color: inherit; }

/* ══ Mesh backdrop ══ */
.mesh-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 15% 0%,   rgba(99,102,241,.12), transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 10%,  rgba(245,158,11,.08),  transparent 70%),
    radial-gradient(ellipse 55% 45% at 50% 100%, rgba(14,165,233,.07),  transparent 70%);
}
[data-theme="dark"] .mesh-bg {
  background:
    radial-gradient(ellipse 60% 50% at 15% 0%,   rgba(99,102,241,.18), transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 10%,  rgba(245,158,11,.10),  transparent 70%),
    radial-gradient(ellipse 55% 45% at 50% 100%, rgba(14,165,233,.08),  transparent 70%);
}

/* ══ Container ══ */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
@media (max-width: 768px) { .wrap { padding: 0 1.25rem; } }

/* ══ Glass ══ */
.glass {
  background: var(--glass); backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border);
}

/* ══ Buttons ══ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: 600; font-size: .9rem;
  border: none; border-radius: var(--r-pill);
  padding: .7rem 1.5rem; cursor: pointer; letter-spacing: -.01em;
  transition: transform .2s var(--ease-snap), box-shadow .2s, opacity .2s, background .2s;
  text-decoration: none; white-space: nowrap; min-height: 44px;
}
.btn:active { transform: scale(.97); }
.btn i { font-size: .85em; }

.btn-brand {
  background: var(--brand); color: #fff;
  box-shadow: 0 4px 14px var(--brand-glow);
}
.btn-brand:hover { background: var(--brand-dark); box-shadow: 0 8px 24px var(--brand-glow); transform: translateY(-1px); }

.btn-accent {
  background: var(--accent); color: #fff;
  box-shadow: 0 4px 14px var(--accent-glow);
}
.btn-accent:hover { background: var(--accent-dark); box-shadow: 0 8px 24px var(--accent-glow); transform: translateY(-1px); }

.btn-ghost {
  background: transparent; border: 1.5px solid var(--glass-border);
  color: var(--ink-soft); backdrop-filter: var(--glass-blur);
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); background: rgba(99,102,241,.06); }

.btn-surface { background: var(--surface); border: 1.5px solid var(--glass-border); color: var(--ink); box-shadow: var(--shadow-xs); }
.btn-surface:hover { border-color: var(--brand); color: var(--brand); }

.btn-sm  { padding: .45rem 1rem; font-size: .82rem; min-height: 36px; }
.btn-lg  { padding: .85rem 2rem; font-size: .975rem; }
.btn-xl  { padding: 1rem 2.5rem; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn-icon  { width: 40px; height: 40px; padding: 0; border-radius: 50%; flex-shrink: 0; }
.btn-danger { background: rgba(239,68,68,.1); color: var(--bad); border: 1px solid rgba(239,68,68,.2); }
.btn-danger:hover { background: rgba(239,68,68,.15); }

/* ══ Pills ══ */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: .68rem; font-weight: 700; letter-spacing: .2px;
}
.pill-brand  { background: rgba(99,102,241,.12); color: var(--brand); }
.pill-accent { background: rgba(245,158,11,.12);  color: var(--accent-dark); }
.pill-ok     { background: rgba(16,185,129,.12);  color: var(--ok); }
.pill-warn   { background: rgba(245,158,11,.14);  color: var(--warn); }
.pill-bad    { background: rgba(239,68,68,.12);   color: var(--bad); }
.pill-ink    { background: var(--surface-3); color: var(--ink-soft); border: 1px solid var(--glass-border); }

/* ══ Cards ══ */
.card {
  background: var(--surface); border: 1px solid var(--glass-border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
}

/* ══ Forms ══ */
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: .78rem; font-weight: 600; color: var(--ink-soft); margin-bottom: .4rem; }
.input, select.input, textarea.input {
  width: 100%; font-family: inherit; font-size: .9rem;
  background: var(--surface-2); border: 1.5px solid var(--glass-border);
  border-radius: var(--r-sm); padding: .7rem .9rem; color: var(--ink);
  transition: border-color .2s, box-shadow .2s; min-height: 44px;
}
.input:focus, select.input:focus, textarea.input:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-glow);
}
@media (max-width:768px){ .input, select.input, textarea.input { font-size: 16px; } }

/* ══ Scrollbars ══ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* ══ Toast ══ */
#toast-stack { position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999; display:flex; flex-direction:column; gap:.5rem; }
.toast {
  background: var(--surface); border:1px solid var(--glass-border); box-shadow: var(--shadow-pop);
  border-radius: var(--r-md); padding: .8rem 1.1rem; font-size:.85rem; font-weight:600;
  display:flex; align-items:center; gap:10px; min-width:240px;
  animation: toastIn .3s var(--ease-snap);
}
@keyframes toastIn { from{opacity:0;transform:translateY(10px) scale(.96)} to{opacity:1;transform:none} }

/* ══ Modal ══ */
.modal-layer {
  position:fixed; inset:0; z-index:600; background:rgba(0,0,0,.5); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; padding:1rem;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.modal-layer.open { opacity:1; pointer-events:all; }
.modal-box {
  background:var(--surface); border:1px solid var(--glass-border); border-radius:var(--r-xl);
  width:100%; max-width:520px; max-height:88vh; overflow-y:auto; padding:2rem;
  transform:scale(.94) translateY(10px); transition:transform .3s var(--ease-snap);
  box-shadow: var(--shadow-pop);
}
.modal-layer.open .modal-box { transform:none; }

/* ══ Skip link ══ */
.skip { position:absolute; top:-100px; left:1rem; background:var(--brand); color:#fff; padding:.5rem 1rem; border-radius:0 0 8px 8px; font-weight:700; z-index:9999; transition:top .2s; }
.skip:focus { top:0; }