/* ShopSphere - base.css : resets, variables, typography */
:root{
  --bg:#0f1226;
  --bg2:#151a3a;
  --page:#f5f6fb;
  --card:#ffffff;
  --ink:#1b1f3b;
  --muted:#6b7280;
  --line:#e4e7f0;
  --brand:#5b5bd6;
  --brand2:#00c2a8;
  --danger:#e2445c;
  --ok:#17a673;
  --warn:#f5a623;
  --ring:0 0 0 3px rgba(91,91,214,.25);
  --shadow:0 18px 45px rgba(10,14,40,.18);
  --shadow-sm:0 6px 20px rgba(15,18,38,.07);
  --radius:16px;
}

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

html{scroll-behavior:smooth}

body{
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:var(--page);
  color:var(--ink);
  min-height:100vh;
  line-height:1.5;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}

h1{font-size:34px;line-height:1.15}
h2{font-size:26px;line-height:1.2}
h3{font-size:21px}
h4{font-size:15px;line-height:1.35}

.container{max-width:1240px;margin:0 auto;padding:0 28px}
.muted{color:var(--muted)}
.center{text-align:center}
.mt-8{margin-top:8px}
.mt-16{margin-top:16px}
.mt-24{margin-top:24px}
.mt-40{margin-top:40px}

.spinner{
  width:26px;height:26px;border-radius:50%;
  border:3px solid #dfe3ec;border-top-color:var(--brand);
  animation:spin .7s linear infinite;margin:24px auto;
}
@keyframes spin{to{transform:rotate(360deg)}}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-28px)}}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}