:root{
  --bg:#0d1424;
  --fg:#e5ecff;
  --accent:#30a8ff;
  --danger:#ff6666;
  --radius:6px;
}

html,body{
  margin:0;
  padding:0;
  font-family:'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--fg);
  font-size:18px;
  height:100%;
}
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main.center.flex-center {
  flex: 1 0 auto;
  display: absolute;
  top: 0;
  left: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding-top: 60px;
}

/*  fixed header + nav */
header{
  position:fixed;top:0;left:0;width: calc(100% - 52px);;
  background:rgba(13,20,36,.9);
  backdrop-filter:blur(6px);
  padding:10px 26px;
  display:flex;justify-content:space-between;align-items:center;
  z-index:100;
}
.logo{font-weight:700;font-size:24px;}
nav ul{
  list-style:none;margin:0;padding:0;display:flex;gap:22px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 100vw;
}
nav a{color:var(--fg);text-decoration:none;}
nav a:hover{color:var(--accent);}

/*  cart badge */
#cart-count{
  background:var(--danger);color:#fff;
  border-radius:12px;padding:0 6px;font-size:14px;margin-left:4px;
  display:none;                /* hidden when count = 0 */
}

/*  generic page container */
.container{
  max-width:960px;margin:0 auto;
  padding:120px 1rem 60px;     /* clears header */
  text-align:center;
}

h1{font-size:2.2rem;margin-bottom:1rem;}
.lead{font-size:1.2rem;margin-bottom:2rem;}

/*  buttons */
.btn{
  background:var(--accent);border:none;color:#fff;
  padding:12px 24px;border-radius:var(--radius);
  font-size:1rem;cursor:pointer;
}
.btn:hover{opacity:.9;}

/*  nice bullets */
ul{list-style-position:inside;padding-left:0;line-height:1.6;}

/*  cart table */
.cart-table{width:100%;border-collapse:collapse;margin-top:1rem;}
.cart-table th,.cart-table td{
  padding:8px 6px;border-bottom:1px solid rgba(255,255,255,.1);
}

#support-msg{margin-top:1rem;color:var(--danger);}