/* Neon Marble Royale — shared neon-cyber design system */
:root {
  --cyan: #00f0ff;
  --magenta: #ff2bd6;
  --acid: #a3ff00;
  --purple: #a855f7;
  --amber: #ffb000;
  --blood: #ff2e63;
  --void: #04060a;
  --panel: #0d131e;
  --line: #1c2740;
  --edge: #2a3956;
  --fg: #e8f1ff;
  --dim: #8aa1c8;
  --muted: #4d5d7a;
  --bevel: polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  font-family: 'Rajdhani', 'Chakra Petch', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(0, 240, 255, 0.10), transparent 55%),
    radial-gradient(120% 120% at 90% 110%, rgba(255, 43, 214, 0.12), transparent 60%),
    radial-gradient(100% 100% at 8% 100%, rgba(168, 85, 247, 0.10), transparent 60%),
    linear-gradient(160deg, #04060c 0%, #06091a 55%, #0a0614 100%);
  color: var(--fg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* scanline / grid atmosphere */
.fx-scan::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 9000;
  background: repeating-linear-gradient(0deg, rgba(0, 240, 255, 0.025) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
}

h1, h2, h3, .title {
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  line-height: 1.05;
}
.mono { font-family: 'Share Tech Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }

.panel {
  position: relative;
  background: linear-gradient(180deg, rgba(13, 19, 30, 0.92), rgba(8, 12, 20, 0.92));
  border: 1px solid var(--edge);
  clip-path: var(--bevel);
  padding: 18px;
}
.panel--glow { box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.12), 0 0 26px rgba(0, 240, 255, 0.10), inset 0 0 30px rgba(4, 6, 12, 0.6); }

.label { color: var(--dim); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; }

.btn {
  font-family: 'Rajdhani', sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 15px; color: var(--fg);
  background: rgba(20, 28, 44, 0.9); border: 1px solid var(--edge);
  clip-path: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  padding: 12px 18px; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.2s, background 0.2s;
}
.btn:hover { background: rgba(28, 39, 64, 0.95); box-shadow: 0 0 16px rgba(0, 240, 255, 0.25); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.btn--primary { color: var(--void); background: linear-gradient(180deg, var(--acid), #7ad400); border-color: #c9ff5e; text-shadow: none; box-shadow: 0 0 22px rgba(163, 255, 0, 0.4); }
.btn--primary:hover { box-shadow: 0 0 30px rgba(163, 255, 0, 0.6); }
.btn--cyan { border-color: var(--cyan); box-shadow: 0 0 14px rgba(0, 240, 255, 0.2); }
.btn--danger { border-color: var(--blood); }

.input {
  font-family: 'Rajdhani', sans-serif; font-size: 18px; color: var(--fg); width: 100%;
  background: rgba(4, 6, 12, 0.8); border: 1px solid var(--edge);
  clip-path: polygon(0 7px, 7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
  padding: 13px 14px; outline: none; transition: border 0.2s, box-shadow 0.2s;
}
.input:focus { border-color: var(--cyan); box-shadow: 0 0 18px rgba(0, 240, 255, 0.3); }

.glow-cyan { color: var(--cyan); text-shadow: 0 0 10px rgba(0, 240, 255, 0.6); }
.glow-magenta { color: var(--magenta); text-shadow: 0 0 10px rgba(255, 43, 214, 0.6); }
.glow-acid { color: var(--acid); text-shadow: 0 0 10px rgba(163, 255, 0, 0.6); }