*{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:0; }
*{ -webkit-tap-highlight-color: transparent; }

/* Theme tokens */
:root{
  --bg1:#f4f1ff;
  --bg2:#efe9ff;
  --bg3:#ece6fb;

  --text:#3b3550;
  --muted: rgba(59,53,80,.62);

  --card: rgba(255,255,255,.75);
  --stroke: rgba(30,20,60,.08);

  --shadow: 0 18px 50px rgba(50,30,90,.12);
  --shadow2: 0 14px 34px rgba(50,30,90,.09);

  --radius: 26px;
  --radius2: 22px;

  /* user settings */
  --textScale: 1;

  /* accent (default lavender) */
  --accentTint: rgba(200,186,255,.30);
  --accentTintSoft: rgba(200,186,255,.22);
  --accentRing: rgba(200,186,255,.85);
}

body{
  background: linear-gradient(180deg,var(--bg1) 0%,var(--bg2) 60%,var(--bg3) 100%);
  color: var(--text);
  font-family:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight:500;
  letter-spacing:.2px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: calc(16px * var(--textScale));
}

body.dark{
  --text: rgba(245,244,255,.92);
  --muted: rgba(245,244,255,.66);
  --card: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.12);
  background: linear-gradient(180deg,#1f1a29 0%, #1b1724 100%);
}

/* watermark */
.watermark{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url("icon.png");
  background-repeat:no-repeat;
  background-position:center 55%;
  background-size:420px;
  opacity:.07;
}
body.dark .watermark{ opacity:.12; }

/* container */
.wrap{
  max-width: 520px;
  margin: 0 auto;
  padding: 80px 14px 36px;
  position:relative;
  z-index:1;
}

/* moon button (HOME ONLY because markup only exists on home) */
.moon{
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 9999 !important;

  width:44px;
  height:44px;
  border-radius:999px;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;

  background: var(--card);
  box-shadow: var(--shadow2);
  font-size:18px;
  color:inherit;
  cursor:pointer;
}

/* typography */
h1{ font-size:28px; margin:0 0 6px; font-weight:700; letter-spacing:.3px; }
h2{ font-size:18px; margin:0 0 8px; font-weight:600; }

.page-sub{
  font-weight:500;
  opacity:.75;
  line-height:1.5;
  margin: 0 0 12px;
}

.label{ font-weight:600; }
.label.small{ font-weight:600; }

/* topbar (non-home pages) */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}

.back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: var(--card);
  box-shadow: var(--shadow2);
  color:inherit;
  text-decoration:none;
  font-weight:500;
  min-width:44px;
}

/* sections */
.section{ margin:16px 0 18px; }

/* cards */
.card{
  background: var(--card);
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding: 14px;
}

/* wide buttons */
.wide{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius: var(--radius);
  margin-bottom: 12px;
  text-decoration:none;
  color:inherit;
  border:1px solid var(--stroke);
  box-shadow: var(--shadow);
}

/* grid tiles */
.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.tile{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius: var(--radius2);
  background: var(--card);
  border:1px solid var(--stroke);
  box-shadow: var(--shadow2);
  text-decoration:none;
  color:inherit;
  min-height: 76px;
}

/* icons + arrows */
.ico{
  width:38px;
  height:38px;
  border-radius: 16px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.62);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  flex-shrink:0;
}
body.dark .ico{ background: rgba(255,255,255,.10); }

.arrow{
  margin-left:auto;
  opacity:.55;
  font-weight:700;
  font-size:22px;
  line-height:1;
}
.arrow.small{ font-size:20px; }

/* ✅ pills — FIXED: all equal size */
.pill-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

.pill{
  width:100%;
  justify-content:center;
  text-align:center;
  height:48px;
  display:flex;
  align-items:center;
  gap:8px;
  border-radius: 999px;
  background: var(--card);
  border:1px solid var(--stroke);
  box-shadow: var(--shadow2);
  text-decoration:none;
  color:inherit;
  font-weight:600;
}

/* inputs */
input, select, textarea{
  width:100%;
  border-radius: 16px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.62);
  color: var(--text);
  padding: 12px 12px;
  font-family: inherit;
  font-weight: 500;
  outline: none;
}
body.dark input,
body.dark select,
body.dark textarea{
  background: rgba(255,255,255,.08);
}
textarea{ min-height: 140px; resize: vertical; }

/* buttons */
.btn{
  border:none;
  border-radius: 999px;
  padding: 12px 14px;
  background: var(--card);
  border:1px solid var(--stroke);
  box-shadow: var(--shadow2);
  cursor:pointer;
  color: inherit;
  font-weight:600;
}
.btn.primary{ background: var(--accentTint); }

hr.sep{
  border:none;
  height:1px;
  background: var(--stroke);
  margin:18px 0;
}

/* ✅ remove blue focus highlight */
button:focus,
button:active,
button:focus-visible,
a:focus,
a:active,
a:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* pressed */
a:active, button:active{ transform: translateY(1px); }
a{ color:inherit; }