:root{
  --bg: #0b1220;
  --bg-soft: #0e1730;
  --glass: rgba(255,255,255,0.06);
  --stroke: rgba(255,255,255,0.08);
  --text: #e6eefc;
  --muted: #9bb0d3;
  --accent: #6ee7ff;
  --accent-2: #6c7cff;
  --danger: #ff4d6d;
  --success: #22d3a3;
  --warn: #ffd166;
  --shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(108,124,255,.12), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(110,231,255,.10), transparent 60%),
    linear-gradient(180deg, #0b1220, #0b1220 40%, #0a1120 100%);
}

/* Header */
header{
  position: sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(10,17,32,.7), rgba(10,17,32,.25));
  border-bottom: 1px solid var(--stroke);
}
header .wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 18px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{
  color:var(--text); font-weight:800; letter-spacing:.3px;
  text-shadow: 0 0 18px rgba(110,231,255,.25);
}
nav a{
  color:var(--muted);
  margin-left: 16px;
  position: relative;
  padding: 6px 2px;
}
nav a:after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0); transform-origin:left; transition: transform .25s ease;
  border-radius: 2px;
}
nav a:hover{ color:var(--text) }
nav a:hover:after{ transform: scaleX(1) }

/* Main */
main{ max-width:1200px; margin:0 auto; padding:24px 18px }

/* Cards / Glass */
.card{
  background: var(--glass);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  animation: fadeUp .6s ease both;
}
.card:hover{ transform: translateY(-2px); border-color: rgba(110,231,255,.25); }

.grid{ display:grid; gap:16px }
.grid-3{ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* Tables */
.table{ width:100%; border-collapse: collapse; font-variant-numeric: tabular-nums }
.table th, .table td{
  padding:10px 12px; text-align:left;
  border-bottom: 1px solid var(--stroke);
}
.table thead th{ color: var(--muted); font-weight:600; letter-spacing:.2px }
.table tbody tr:hover{ background: rgba(255,255,255,.03) }

/* Inputs */
.input, textarea, input[type=number], input[type=text], input[type=email], input[type=password]{
  width:100%; border:1px solid var(--stroke); border-radius: 12px; padding:12px 14px; margin-top:6px;
  background: rgba(255,255,255,.04); color:var(--text); outline:none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.input:focus, textarea:focus, input:focus{ border-color: rgba(110,231,255,.5); box-shadow: 0 0 0 4px rgba(110,231,255,.12) }

/* Buttons */
.btn{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#081120; border:0; border-radius: 12px; padding:10px 14px; cursor:pointer;
  display:inline-block; font-weight:700; letter-spacing:.2px;
  box-shadow: 0 10px 20px rgba(110,231,255,.2), inset 0 1px 0 rgba(255,255,255,.3);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 14px 28px rgba(110,231,255,.28) }
.btn:active{ transform: translateY(0) scale(.98) }

/* Secondary buttons for quantity controls */
.controls .btn{
  background: rgba(255,255,255,.06);
  color: var(--text);
  border: 1px solid var(--stroke);
  box-shadow: none;
}
.controls .btn:hover{ background: rgba(255,255,255,.1) }

/* Text helpers */
.muted{ color: var(--muted) }
.price{ font-variant-numeric: tabular-nums }
.notice{
  background: rgba(255,209,102,.08);
  border: 1px solid rgba(255,209,102,.35);
  color: #ffe3a3;
  padding: 10px 12px; border-radius: 12px;
}

/* Badges */
.badge{ display:inline-block; padding:4px 10px; border-radius: 999px; font-size:12px; border:1px solid var(--stroke) }
.badge.pending{ background: rgba(255,209,102,.12); color:#ffe3a3; border-color: rgba(255,209,102,.35) }
.badge.paid{ background: rgba(34,211,163,.12); color:#a7f3d0; border-color: rgba(34,211,163,.35) }
.badge.failed{ background: rgba(255,77,109,.12); color:#ffb3c0; border-color: rgba(255,77,109,.35) }
.badge.cancelled{ background: rgba(148,163,184,.15); color:#cbd5e1; border-color: rgba(148,163,184,.35) }

/* Images */
img{ border-radius: 14px }
a{ color: var(--accent) }
a:hover{ color: #9be9ff }

/* Layout helpers */
.row{ display:grid; grid-template-columns: 1.2fr .8fr; gap:22px }
@media (max-width: 900px){ .row{ grid-template-columns: 1fr } }

/* LTC */
.ltc-amount{ font-size:32px; font-weight:800; letter-spacing:.6px; text-shadow: 0 0 18px rgba(110,231,255,.25) }

/* Animations */
@keyframes fadeUp{ from{ opacity:0; transform: translateY(8px) } to{ opacity:1; transform: translateY(0) } }
.reveal{ opacity:0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease }
.reveal.in{ opacity:1; transform: translateY(0) }

/* Footer */
footer{
  max-width:1200px; margin: 0 auto; padding: 28px 18px; color:var(--muted);
  border-top: 1px solid var(--stroke);
}