/* ===================================================================
   ERROR PANEL — Obsidian Design System
   Premium black glassmorphism. Shared across every page.
=================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Sora:wght@400;500;600;700;800&display=swap');

:root{
  /* Surfaces */
  --void:        #030303;
  --void-2:      #060607;
  --surface:     rgba(255,255,255,.035);
  --surface-2:   rgba(255,255,255,.055);
  --surface-hi:  rgba(255,255,255,.09);
  --border:      rgba(255,255,255,.09);
  --border-hi:   rgba(255,255,255,.16);

  /* Text */
  --ink:         #f2f0ec;
  --ink-dim:     #9c9993;
  --ink-faint:   #5c5952;

  /* Accent — champagne gold */
  --gold:        #d4af6a;
  --gold-bright: #f0c987;
  --gold-dim:    rgba(212,175,106,.14);

  /* Signal colors */
  --emerald:     #4ade80;
  --rose:        #fb7185;
  --amber:       #fbbf24;
  --sky:         #60a5fa;

  --radius:      18px;
  --radius-sm:   12px;
  --ease:        cubic-bezier(.22,1,.36,1);
}

*{ box-sizing:border-box; }
html{ color-scheme: dark; }
body{
  background: var(--void);
  color: var(--ink);
  font-family: 'Sora', system-ui, sans-serif;
  margin:0;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

.font-display{ font-family:'Instrument Serif', Georgia, serif; }

/* ---------- Atmosphere ---------- */
.bg-atmosphere{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.bg-atmosphere::before{
  content:''; position:absolute; inset:-20%;
  background:
    radial-gradient(600px 500px at 12% 8%,  rgba(212,175,106,.10), transparent 60%),
    radial-gradient(700px 600px at 88% 92%, rgba(96,165,250,.06), transparent 60%),
    radial-gradient(500px 500px at 90% 10%, rgba(212,175,106,.05), transparent 60%);
  animation: drift 26s ease-in-out infinite alternate;
}
.bg-atmosphere::after{
  content:''; position:absolute; inset:0; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
@keyframes drift{ to{ transform:translate3d(-2%,2%,0) scale(1.05); } }

/* ---------- Glass primitives ---------- */
.glass{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 20px 60px -20px rgba(0,0,0,.7);
}
.glass-hi{
  background: var(--surface-2);
  border:1px solid var(--border-hi);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Sora',sans-serif; font-weight:700; font-size:13px;
  padding:12px 20px; border-radius:12px; border:1px solid transparent;
  cursor:pointer; transition:.25s var(--ease); letter-spacing:.01em;
  text-decoration:none; white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-gold{
  background:linear-gradient(155deg,var(--gold-bright),var(--gold));
  color:#1a1305;
  box-shadow:0 8px 24px -8px rgba(212,175,106,.55);
}
.btn-gold:hover{ filter:brightness(1.08); box-shadow:0 10px 30px -8px rgba(212,175,106,.7); }
.btn-ghost{
  background:var(--surface); color:var(--ink); border-color:var(--border);
}
.btn-ghost:hover{ background:var(--surface-2); border-color:var(--border-hi); }
.btn-danger{ background:rgba(251,113,133,.12); color:var(--rose); border-color:rgba(251,113,133,.25); }
.btn-danger:hover{ background:rgba(251,113,133,.2); }
.btn-block{ width:100%; }
.btn-sm{ padding:8px 14px; font-size:11.5px; border-radius:10px; }

/* ---------- Inputs ---------- */
.field{ position:relative; }
.field label{
  display:block; font-size:11px; font-weight:700; color:var(--ink-dim);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px;
}
.field input, .field select, .field textarea{
  width:100%; background:rgba(0,0,0,.35); border:1px solid var(--border);
  color:var(--ink); font-family:'Sora',sans-serif; font-size:14.5px;
  padding:13px 16px; border-radius:12px; outline:none; transition:.2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--gold); background:rgba(0,0,0,.5);
  box-shadow:0 0 0 3px var(--gold-dim);
}
.field input::placeholder{ color:var(--ink-faint); }

/* ---------- Badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:800;
  text-transform:uppercase; letter-spacing:.06em; padding:4px 10px; border-radius:999px;
}
.badge-gold{ background:var(--gold-dim); color:var(--gold-bright); border:1px solid rgba(212,175,106,.3); }
.badge-green{ background:rgba(74,222,128,.12); color:var(--emerald); border:1px solid rgba(74,222,128,.25); }
.badge-red{ background:rgba(251,113,133,.12); color:var(--rose); border:1px solid rgba(251,113,133,.25); }
.badge-gray{ background:rgba(255,255,255,.06); color:var(--ink-dim); border:1px solid var(--border); }

/* ---------- Toast ---------- */
#toast-container{ position:fixed; top:20px; left:50%; transform:translateX(-50%); z-index:9999; width:min(92vw,380px); }
.toast{
  font-family:'Sora',sans-serif; font-weight:600; font-size:13.5px; color:var(--ink);
  padding:14px 18px; border-radius:14px; display:flex; align-items:center; gap:10px;
  margin-bottom:10px; background:rgba(10,10,12,.9); backdrop-filter:blur(20px);
  border:1px solid var(--border); box-shadow:0 20px 40px -12px rgba(0,0,0,.6);
  opacity:0; transform:translateY(-16px) scale(.95); transition:.35s cubic-bezier(.34,1.56,.64,1);
}
.toast.active{ opacity:1; transform:translateY(0) scale(1); }
.toast.err{ border-left:3px solid var(--rose); }
.toast.suc{ border-left:3px solid var(--emerald); }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(212,175,106,.3); }

/* ---------- Utility ---------- */
.mono{ font-variant-numeric:tabular-nums; font-feature-settings:'tnum'; }
.text-gold{ color:var(--gold); }
.text-dim{ color:var(--ink-dim); }
.text-faint{ color:var(--ink-faint); }
.divider{ height:1px; background:var(--border); }

a{ color:inherit; }