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

:root{
  --stage-black: #0a0a0d;
  --stage-black-2: #131217;
  --stage-black-3: #1b1a21;
  --paper: #f3ede4;
  --paper-dim: #a9a29a;
  --neon-magenta: #ff2e7e;
  --neon-amber: #ffb020;
  --deep-violet: #4b3fa8;
  --danger: #ff4d4d;
  --ok: #35d488;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  background: var(--stage-black);
  color: var(--paper);
  font-family:'Work Sans', sans-serif;
  min-height:100vh;
}
.display{ font-family:'Anton', sans-serif; text-transform:uppercase; letter-spacing:0.01em; }
.mono{ font-family:'JetBrains Mono', monospace; }

nav{
  position: sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 40px;
  background: linear-gradient(180deg, rgba(10,10,13,0.98) 0%, rgba(10,10,13,0.9) 100%);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(243,237,228,0.08);
}
.logo{ font-size: 22px; }
.logo span{ color: var(--neon-magenta); text-shadow: 0 0 18px rgba(255,46,126,0.5); }
.logo .tag{
  font-family:'JetBrains Mono', monospace;
  font-size:10px; letter-spacing:0.15em;
  color: var(--paper-dim); text-transform:uppercase;
  margin-left:10px; padding: 3px 8px;
  border: 1px solid rgba(243,237,228,0.2);
  vertical-align: middle;
}
.back-link{
  font-family:'JetBrains Mono', monospace;
  font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  color: var(--paper-dim); text-decoration:none;
  border: 1px solid rgba(243,237,228,0.25);
  padding: 10px 18px;
  transition: all .2s ease;
  background:transparent;
  cursor:pointer;
}
.back-link:hover{ color: var(--stage-black); background: var(--paper); border-color: var(--paper); }

.btn{
  font-family:'JetBrains Mono', monospace;
  font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  padding: 13px 22px;
  border: none;
  cursor:pointer;
  transition: all .2s ease;
  display:inline-flex; align-items:center; gap:8px;
}
.btn-primary{ background: var(--neon-magenta); color:#fff; }
.btn-primary:hover{ box-shadow: 0 0 22px rgba(255,46,126,0.5); transform: translateY(-1px); }
.btn-primary:disabled{ opacity:0.35; cursor:not-allowed; box-shadow:none; transform:none; }
.btn-ghost{ background: transparent; color: var(--paper); border: 1px solid rgba(243,237,228,0.25); }
.btn-ghost:hover{ border-color: var(--paper); }
.btn-danger{ background: transparent; color: var(--danger); border: 1px solid rgba(255,77,77,0.4); }
.btn-danger:hover{ background: rgba(255,77,77,0.12); border-color: var(--danger); }
.btn-sm{ padding: 8px 14px; font-size:11px; }
.btn:focus-visible{ outline: 2px solid var(--neon-amber); outline-offset: 2px; }

.field{ margin-bottom: 18px; }
.field label{
  display:block;
  font-family:'JetBrains Mono', monospace;
  font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color: var(--paper-dim);
  margin-bottom: 8px;
}
.field input, .field textarea, .field select{
  width:100%;
  background: var(--stage-black);
  border: 1px solid rgba(243,237,228,0.18);
  color: var(--paper);
  padding: 12px 14px;
  font-family:'Work Sans', sans-serif;
  font-size:14px;
  transition: border-color .2s ease;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color: var(--neon-magenta);
}
.field textarea{ resize:vertical; min-height:70px; }
.field-hint{ font-size:11px; color: var(--paper-dim); margin-top:6px; font-weight:300; }
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }

.overlay{
  position:fixed; inset:0; z-index:200;
  background: rgba(6,6,8,0.85);
  backdrop-filter: blur(4px);
  display:none;
  align-items:flex-start;
  justify-content:center;
  overflow-y:auto;
  padding: 60px 20px;
}
.overlay.open{ display:flex; }
.modal{
  background: var(--stage-black-2);
  border: 1px solid rgba(243,237,228,0.12);
  width: 100%; max-width: 560px;
  padding: 34px;
  position:relative;
}
.modal::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--neon-magenta), var(--neon-amber));
}
.modal h2{ font-size:26px; margin-bottom: 22px; }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top: 26px; }

.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background: var(--paper); color: var(--stage-black);
  font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.05em;
  padding: 14px 22px;
  z-index: 300;
  opacity:0; pointer-events:none;
  transition: all .35s cubic-bezier(.2,.8,.2,1);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}