/* themes/Resonance/style.css */
:root{
  --bg0:#070910;
  --bg1:#0a0f1d;
  --ink:#e9eefc;
  --muted:rgba(233,238,252,.72);
  --line:rgba(233,238,252,.14);
  --good:#78dcff;
  --evil:#ff7a53;
  --gold:#f2e6b5;
  --glass:rgba(10,16,30,.62);
  --radius:18px;
  --shadow:0 20px 60px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--ink);
  background:
    radial-gradient(1200px 900px at 18% 8%, rgba(120,220,255,.12), transparent 55%),
    radial-gradient(1200px 900px at 80% 22%, rgba(255,122,83,.10), transparent 58%),
    radial-gradient(900px 700px at 50% 55%, rgba(242,230,181,.08), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:22px 18px 64px}

.nav{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:10px 12px;border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(10,16,30,.65), rgba(10,16,30,.45));
  border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  backdrop-filter:blur(10px);
  position:sticky;top:10px;z-index:50;
}
.brand{display:flex;align-items:center;gap:12px}
.logo{
  width:34px;height:34px;border-radius:12px;
  border:1px solid rgba(233,238,252,.18);
  background:rgba(255,255,255,.06);
  overflow:hidden;display:grid;place-items:center;
}
.logo img{width:100%;height:100%;object-fit:cover;display:block}
.brand h1{font-size:14px;margin:0;letter-spacing:.3px}
.brand p{margin:0;font-size:12px;color:var(--muted)}
.navlinks{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.navlinks a{
  font-size:13px;color:rgba(233,238,252,.85);
  padding:8px 10px;border-radius:12px;border:1px solid transparent;
}
.navlinks a:hover{border-color:rgba(233,238,252,.16);background:rgba(255,255,255,.04)}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:999px;
  border:1px solid rgba(233,238,252,.18);
  background:rgba(255,255,255,.05);
  font-size:12px;color:rgba(233,238,252,.92);
}
.dot{width:10px;height:10px;border-radius:999px;background:rgba(120,220,255,.65);box-shadow:0 0 18px rgba(120,220,255,.22)}
.dot.evil{background:rgba(255,122,83,.65);box-shadow:0 0 18px rgba(255,122,83,.18)}
.dot.gold{background:rgba(242,230,181,.65);box-shadow:0 0 18px rgba(242,230,181,.16)}

.card{
  border:1px solid rgba(233,238,252,.14);
  background:var(--glass);
  border-radius:var(--radius);
  padding:16px;
  backdrop-filter:blur(10px);
  box-shadow:0 12px 40px rgba(0,0,0,.25);
}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:980px){.grid3{grid-template-columns:1fr}}
.secTitle{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:18px 0 10px}
.secTitle h3{margin:0;font-size:14px;letter-spacing:.25px}
.secTitle span{color:var(--muted);font-size:12px}

.hero{
  margin-top:16px;border-radius:26px;border:1px solid rgba(233,238,252,.14);
  background:linear-gradient(180deg, rgba(10,16,30,.75), rgba(10,16,30,.35));
  box-shadow:var(--shadow);
  overflow:hidden;position:relative;
}
.hero img.bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.62;filter:contrast(1.05) saturate(1.02);
  transform:scale(1.02);
}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.35))}
.hero .content{position:relative;z-index:2;padding:28px;min-height:520px;display:grid;grid-template-columns:1.2fr .8fr;gap:22px}
@media (max-width:980px){.hero .content{grid-template-columns:1fr;min-height:unset}}

.btn{
  appearance:none;border:1px solid rgba(233,238,252,.18);
  background:rgba(255,255,255,.05);
  color:rgba(233,238,252,.92);
  padding:11px 14px;border-radius:14px;
  font-weight:700;font-size:13px;cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;
}
.btn:hover{background:rgba(255,255,255,.07);border-color:rgba(233,238,252,.28)}
.btn.primary{border-color:rgba(120,220,255,.35);background:linear-gradient(180deg, rgba(120,220,255,.16), rgba(10,16,30,.15))}
.btn.secondary{border-color:rgba(255,122,83,.28);background:linear-gradient(180deg, rgba(255,122,83,.12), rgba(10,16,30,.12))}

.formBox{max-width:460px;margin:24px auto}
.field-row{margin-bottom:10px}
.field-row input{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(233,238,252,.18);background:rgba(0,0,0,.20);color:var(--ink)}
.field-row label{font-size:13px;color:rgba(233,238,252,.88);display:block}
.alert{margin:10px 0;border:1px solid rgba(255,122,83,.22);background:rgba(255,122,83,.08);border-radius:12px;padding:10px 12px}
footer{margin-top:26px;border-top:1px solid rgba(233,238,252,.10);padding-top:18px;color:rgba(233,238,252,.55);font-size:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}