/* zFi shared theme — base variables, resets, nav, dark toggle */

:root {
  --bg:#fff;--fg:#000;--fg-muted:#666;--fg-dim:#999;
  --border:#000;--border-muted:#ddd;
  --surface:#f9f9f9;--surface-hover:#f5f5f5;
  --btn-bg:#000;--btn-fg:#fff;--btn-hover:#333;
  --link-fg:inherit;
  --modal-overlay:rgba(0,0,0,0.8);--modal-bg:#fff;--modal-border:#000;
  --status-error:#fff0f0;--status-success:#f0fff0;
}
.dark {
  --bg:#0a0a0a;--fg:#e8e8e0;--fg-muted:#888;--fg-dim:#666;
  --border:#333;--border-muted:#333;
  --surface:#111;--surface-hover:#151515;
  --btn-bg:#e8e8e0;--btn-fg:#0a0a0a;--btn-hover:#ccc;
  --link-fg:#e8e8e0;
  --modal-overlay:rgba(0,0,0,0.85);--modal-bg:#111;--modal-border:#333;
  --status-error:#1a0000;--status-success:#001a00;
}

/* Reset */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body {
  font-family:Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--fg);
  min-height:100vh; padding:60px 20px 20px;
  max-width:480px; margin:0 auto;
  overflow-x:hidden;
}
a { color:var(--link-fg); }

/* Dark mode toggle */
.dark-toggle {
  position:fixed;
  bottom:max(20px, env(safe-area-inset-bottom, 0px));
  right:max(20px, env(safe-area-inset-right, 0px));
  border:none; cursor:pointer; padding:13px; margin:-13px;
  opacity:0.5; transition:opacity 0.2s; z-index:100;
  background:#000; border-radius:50%; width:40px; height:40px; background-clip:content-box;
}
:root.dark .dark-toggle { background:#fff; }
.dark-toggle:hover { opacity:1; }