@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto+Mono:wght@400;700&display=swap');

/* Dark theme: #0b0b0b bg, white text, red accents #d60000 */
:root { --bg:#0b0b0b; --fg:#fff; --red:#d60000; --muted:#9aa0a6; --panel:#141414; }
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--fg); font-family:'Roboto Mono', monospace; }
a{ color:#ff4d4d; text-decoration:none; }
.topbar{ display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:#111; border-bottom:1px solid #222; position:sticky; top:0; z-index:5; }
.logo{ font-family:'Orbitron', sans-serif; color:var(--fg); font-size:20px; }
nav a{ margin-left:12px; }
.container{ max-width:1100px; margin:24px auto; padding:0 16px; }
.hero{ text-align:center; padding:60px 0; }
.btn{ background:var(--red); color:#fff; padding:10px 14px; border:none; border-radius:6px; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; display:inline-block; }
.btn:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(214,0,0,.35); }
.btn.outline{ background:transparent; border:1px solid var(--red); }
.btn.danger{ background:#7a0000; }
.btn.small{ padding:6px 10px; font-size:12px; }
.alert{ padding:10px 12px; border-radius:6px; margin:10px 0; background:#111; border-left:4px solid #444; }
.alert.success{ border-color:#2ecc71; }
.alert.error{ border-color:#e74c3c; }
.table-wrap{ overflow:auto; background:#0f0f0f; border:1px solid #222; border-radius:8px; }
table{ width:100%; border-collapse:collapse; }
th,td{ padding:10px; border-bottom:1px solid #222; text-align:left; }
.auth-card{ max-width:400px; margin:80px auto; background:#101010; padding:22px; border-radius:10px; border:1px solid #222; box-shadow:0 10px 30px rgba(0,0,0,.4); }
.auth-card h2{ margin-top:0; font-family:'Orbitron', sans-serif; }
label{ display:block; margin:10px 0; color:#ddd; }
input{ width:100%; padding:10px; border-radius:6px; border:1px solid #222; background:#0e0e0e; color:#fff; }
.cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:16px; }
.card{ background:#111; padding:14px; border-radius:10px; border:1px solid #222; }
.card-title{ font-weight:bold; }
.card-cost{ color:var(--muted); margin:8px 0 12px; }
.balance-card{ background:#121212; border:1px solid #222; padding:16px; border-radius:10px; margin-bottom:18px; }
.actions form{ display:inline-block; margin:0 6px; }
.inline{ display:flex; gap:8px; margin:10px 0; flex-wrap:wrap; }
.muted{ color:var(--muted); margin-top:10px; }

/* subtle spider web canvas overlay */
#web-bg{ position:fixed; inset:0; z-index:-1; }

/* Modern enhancements */
:root{
  --radius:10px;
  --radius-sm:6px;
  --shadow-1:0 6px 18px rgba(0,0,0,.35);
  --shadow-2:0 12px 40px rgba(0,0,0,.45);
  --accent:var(--red);
}

h1,h2,h3{ line-height:1.2; margin:0 0 12px; }
h1{ font-family:'Orbitron', sans-serif; font-size:clamp(28px, 5vw, 42px); letter-spacing:.5px; }
h2{ font-size:clamp(20px, 3.2vw, 28px); }
p{ color:#d6d6d6; }

.topbar{ backdrop-filter:saturate(120%) blur(6px); background:rgba(17,17,17,.9); }
.topbar .btn{ margin-left:12px; }
nav a{ color:#fff; opacity:.9; }
nav a:hover{ opacity:1; }

.container{ padding-left:20px; padding-right:20px; }
.hero{ padding:56px 0 70px; }
.hero p{ max-width:720px; margin:10px auto 0; font-size:clamp(14px, 2.6vw, 16px); color:#c8c8c8; }

.btn{ border-radius:var(--radius-sm); font-weight:600; letter-spacing:.2px; box-shadow:var(--shadow-1); }
.btn:focus{ outline:2px solid rgba(214,0,0,.6); outline-offset:2px; }
.btn.outline{ color:#fff; }
.btn.outline:hover{ background:rgba(214,0,0,.08); box-shadow:none; }
.btn[disabled], .btn:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; filter:grayscale(.2); }

input, select, textarea{ width:100%; padding:12px 12px; border-radius:var(--radius-sm); border:1px solid #252525; background:#0e0e0e; color:#fff; transition:border-color .15s ease, box-shadow .15s ease; }
input:focus, select:focus, textarea:focus{ border-color:rgba(214,0,0,.5); box-shadow:0 0 0 3px rgba(214,0,0,.2); outline:none; }
select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%, #aaa 50%), linear-gradient(135deg, #aaa 50%, transparent 50%); background-position:calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px); background-size:5px 5px,5px 5px; background-repeat:no-repeat; }

.auth-card{ border-radius:var(--radius); box-shadow:var(--shadow-2); padding:26px; }
.auth-card form{ display:grid; gap:10px; }

.table-wrap{ border-radius:var(--radius); box-shadow:inset 0 1px 0 rgba(255,255,255,.02); }
table{ font-size:14px; }
thead th{ position:sticky; top:0; background:#121212; font-weight:700; }
tbody tr:hover{ background:rgba(255,255,255,.02); }
tbody tr:nth-child(even){ background:rgba(255,255,255,.01); }
th,td{ vertical-align:middle; }

.cards{ gap:18px; }
.card{ border-radius:var(--radius); transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.card:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.35); border-color:#2a2a2a; }
.card .btn{ width:100%; }

.balance-card{ display:flex; align-items:center; justify-content:space-between; gap:12px; border-radius:var(--radius); box-shadow:var(--shadow-1); }
.balance-card .balance{ font-size:18px; }

.inline{ align-items:center; }
.inline .btn{ white-space:nowrap; }

.alert{ background:linear-gradient(180deg, #111, #0c0c0c); border-left-width:3px; }
.alert.success{ background:linear-gradient(180deg, rgba(46,204,113,.12), rgba(46,204,113,.06)); }
.alert.error{ background:linear-gradient(180deg, rgba(231,76,60,.12), rgba(231,76,60,.06)); }

/* Scrollbar styling (WebKit) */
::-webkit-scrollbar{ height:10px; width:10px; }
::-webkit-scrollbar-track{ background:#0f0f0f; }
::-webkit-scrollbar-thumb{ background:#2a2a2a; border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:#333; }

/* Responsive */
@media (max-width: 900px){
  .container{ padding-left:16px; padding-right:16px; }
  .topbar{ padding:10px 12px; }
  .logo{ font-size:18px; }
}
@media (max-width: 700px){
  .hero{ padding:42px 0 54px; }
  .cards{ grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:14px; }
  .inline{ gap:6px; }
  th,td{ padding:9px; }
  .auth-card{ margin:48px 12px; padding:20px; }
}
@media (max-width: 480px){
  nav a{ margin-left:8px; font-size:14px; }
  .btn.small{ padding:6px 8px; font-size:11px; }
  table{ font-size:13px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}