/* Shared AutoTopup identity and Apple-inspired theme. */
:root {
  color-scheme:light;
  --canvas:#f5f5f7; --paper:#fff; --white:#fff; --soft:#f0f0f3;
  --ink:#1d1d1f; --muted:#6e6e73; --faint:#737378; --line:rgba(0,0,0,.075);
  --accent:#0071e3; --accent-hover:#0077ed; --accent-soft:#eaf3ff;
  --green:#248a3d; --green-soft:#eaf5ed; --red:#b83b32; --red-soft:#fcecea;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI Variable","Segoe UI","PingFang SC","Microsoft YaHei UI",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
html[data-theme="dark"] {
  color-scheme:dark;
  --canvas:#101012; --paper:#1c1c1e; --white:#242426; --soft:#28282b;
  --ink:#f5f5f7; --muted:#b5b5bc; --faint:#a1a1a6; --line:rgba(255,255,255,.09);
  --accent:#0a84ff; --accent-hover:#409cff; --accent-soft:#152d4b;
  --green:#6cc881; --green-soft:#1e3525; --red:#f29790; --red-soft:#3c2525;
}
.wordmark { display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); white-space:nowrap; }
.brand-symbol { display:block; width:34px; height:34px; color:var(--ink); flex-shrink:0; }
.brand-piece { transform:translate(0,0); transition:transform 500ms var(--ease); }
.wordmark strong { display:inline-block; font-family:var(--font); font-size:21px; font-weight:650; letter-spacing:-.8px; transform:translateY(0); transition:transform 500ms var(--ease),color 300ms ease; }
.wordmark:focus-visible .brand-piece { transform:translate(-3px,3px); }
.wordmark:focus-visible strong { transform:translateY(-2px); color:var(--accent); }
.theme-toggle { display:inline-grid; place-items:center; width:34px; height:34px; flex-shrink:0; padding:0; border:0; border-radius:10px; background:transparent; color:var(--muted); cursor:pointer; }
.theme-toggle svg { width:18px; height:18px; }
.theme-toggle:hover { color:var(--ink); background:var(--soft); }
.theme-toggle:focus-visible,.wordmark:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
@media(hover:hover) {
  .wordmark:hover .brand-piece,.welcome-icon:hover .brand-piece { transform:translate(-3px,3px); }
  .wordmark:hover strong { transform:translateY(-2px); color:var(--accent); }
}
@media(max-width:640px) {
  .wordmark strong { font-size:19px; }
  .brand-symbol { width:30px; height:30px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .brand-piece,.wordmark:hover .brand-piece,.welcome-icon:hover .brand-piece,.wordmark:focus-visible .brand-piece,.wordmark strong,.wordmark:hover strong,.wordmark:focus-visible strong { transform:none; }
}