:root {
  --purple: rgb(88, 54, 136);
  --purple-dark: rgb(68, 34, 116);
  --tan: rgb(188, 171, 122);
  --tan-light: rgba(188, 171, 122, 0.4);
  --cyan: rgb(88, 176, 209);
  --cyan-light: rgba(88, 176, 209, 0.1);
  --cyan-border: rgba(88, 176, 209, 0.4);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Roboto', system-ui, -apple-system, sans-serif; line-height: 1.6; color: #1a1a1a; max-width: 640px; margin: 0 auto; padding: 2rem 1rem; }
h1, h2 { font-family: 'Rubik', sans-serif; }
h1 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--purple); }
h2 { font-size: 1.2rem; margin: 2.5rem 0 0.5rem; color: var(--purple); border-bottom: 2px solid var(--tan); padding-bottom: 0.25rem; }
p { margin-bottom: 0.75rem; }
p:last-child { margin-bottom: 0; }
a { color: var(--purple); }
form { margin: 1rem 0; }
form.inline { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
input, button, select { font-size: 1rem; padding: 0.5rem 1rem; border: 1px solid var(--tan); border-radius: 4px; }
button { background: var(--purple); color: white; border: none; cursor: pointer; }
button:hover { background: var(--purple-dark); }
.balance { display: inline-block; font-size: 2rem; font-weight: bold; margin: 1rem 0; color: white; background: var(--cyan); padding: 0.25rem 0.75rem; border-radius: 8px; }
table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
th, td { text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--tan-light); }
th { font-weight: 600; color: var(--purple); }
.nav { margin-bottom: 2rem; display: flex; gap: 1rem; align-items: center; border-bottom: 2px solid var(--tan); padding-bottom: 0.75rem; }
.nav a { text-decoration: none; color: var(--purple); font-weight: normal; }
.nav a.active { font-weight: bold; }
.logo-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--cyan); color: white; font-weight: bold; margin-right: 0.3em; transition: transform 0.2s ease; }
.nav a:hover .logo-icon { transform: scale(1.15); }
.service-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--cyan-light); flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.recommended { border-color: var(--purple) !important; }
.msg { padding: 1rem; background: var(--cyan-light); border: 1px solid var(--cyan-border); border-radius: 4px; margin: 1rem 0; }
.err { padding: 1rem; background: #fef2f2; border: 1px solid #fecaca; border-radius: 4px; margin: 1rem 0; }
.mono { font-family: monospace; font-size: 1.2rem; letter-spacing: 0.1em; }
.toggle { position: relative; display: inline-block; width: 2.5rem; height: 1.4rem; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; background: #ccc; border-radius: 1.4rem; transition: background 0.2s; cursor: pointer; }
.toggle-slider::before { content: ""; position: absolute; left: 0.2rem; top: 0.2rem; width: 1rem; height: 1rem; background: white; border-radius: 50%; transition: transform 0.2s; }
.toggle input:checked + .toggle-slider { background: var(--cyan); }
.toggle input:checked + .toggle-slider::before { transform: translateX(1.1rem); }
.toggle input:disabled + .toggle-slider { opacity: 0.5; cursor: default; }
footer { margin-top: 3rem; color: var(--tan); font-size: 0.85rem; border-top: 1px solid var(--tan-light); padding-top: 1rem; }