:root{
  --bg0: #070a12;
  --bg1: rgba(7,10,18,.55);
  --bg2: rgba(7,10,18,.78);
  --glass: rgba(12, 16, 28, .62);
  --glass2: rgba(12, 16, 28, .74);
  --stroke: rgba(255,255,255,.10);
  --stroke2: rgba(255,255,255,.16);
  --text: #ffffff;
  --muted: rgba(255,255,255,.78);
  --muted2: rgba(255,255,255,.62);
  --accent: #ffd000;
  --accent2: rgba(255,208,0,.18);
  --shadow: 0 18px 70px rgba(0,0,0,.50);
  --shadow2: 0 10px 30px rgba(0,0,0,.35);
  --radius: 18px;
  --radius2: 14px;
  --blur: 12px;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 18% 8%, rgba(255,208,0,.10), transparent 55%),
    radial-gradient(900px 520px at 82% 12%, rgba(110,160,255,.12), transparent 60%),
    linear-gradient(var(--bg1), rgba(0,0,0,.82)),
    url("/static/www/img/hero-bg.png") center/cover fixed no-repeat;
}

body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color: var(--text);
  background:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.85)),
    url("/static/www/img/hero-bg.png") center/cover fixed no-repeat;
}
a{color:inherit}
.page-content{padding-top:78px;min-height:calc(100vh - 120px)}
.container{width:min(1100px, calc(100% - 32px));margin:0 auto}
.card{
  background: var(--glass);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:14px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  text-decoration:none;color:var(--text);
}
.btn:hover{border-color: rgba(255,255,255,.24)}
.badge{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}

.inp{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color: #fff;
  outline:none;
}
.inp:focus{
  border-color: rgba(255, 208, 0, .55);
  box-shadow: 0 0 0 3px rgba(255,208,0,.12);
}

/* Premium polish */
.card{
  background: var(--glass);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}
.card:hover{
  border-color: var(--stroke2);
  box-shadow: var(--shadow);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius: var(--radius2);
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  text-decoration:none;
  color: var(--text);
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
  user-select:none;
}
.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.24);
  background: rgba(255,255,255,.10);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}
.btn:active{ transform: translateY(0px) scale(.99); }

.btn-accent{
  background: var(--accent2);
  border-color: rgba(255,208,0,.32);
}
.btn-accent:hover{
  border-color: rgba(255,208,0,.55);
  box-shadow: 0 12px 32px rgba(0,0,0,.34), 0 0 0 1px rgba(255,208,0,.16) inset;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color: var(--muted);
  font-size:13px;
}

.page-content{padding-top:78px;min-height:calc(100vh - 120px)}
.container{width:min(1120px, calc(100% - 32px));margin:0 auto}

.inp{
  width:100%;
  padding:12px 12px;
  border-radius: var(--radius2);
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color: #fff;
  outline:none;
  transition: box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.inp:focus{
  border-color: rgba(255, 208, 0, .55);
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 0 3px rgba(255,208,0,.12);
}