/* ==========================================================================
   Tyo Tjuan — shared UI kit (light/dark theme, theme switch, credits, PWA)
   Used by tyotjuan.com and every tool under it. Palette: emerald & imperial
   gold on warm ivory by day; emerald & gold on deep forest-black by night.
   ========================================================================== */
:root{
  --tyo-bg:#FBF8F1; --tyo-surface:#FFFFFF; --tyo-surface-2:#F4EFE2; --tyo-text:#1B1917; --tyo-muted:#57534E;
  --tyo-line:rgba(184,134,11,.22); --tyo-emerald:#0F7B52; --tyo-emerald-2:#128A5B; --tyo-gold:#B8860B; --tyo-gold-2:#D4AF37;
  --tyo-footer:#0F1115;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --tyo-bg:#0D120F; --tyo-surface:#141B17; --tyo-surface-2:#1A231E; --tyo-text:#EDE8DC; --tyo-muted:#A9A396;
    --tyo-line:rgba(212,175,55,.22); --tyo-emerald:#2BB37F; --tyo-emerald-2:#38C98F; --tyo-gold:#D4AF37; --tyo-gold-2:#E6C65C;
    --tyo-footer:#080B09; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --tyo-bg:#0D120F; --tyo-surface:#141B17; --tyo-surface-2:#1A231E; --tyo-text:#EDE8DC; --tyo-muted:#A9A396;
  --tyo-line:rgba(212,175,55,.22); --tyo-emerald:#2BB37F; --tyo-emerald-2:#38C98F; --tyo-gold:#D4AF37; --tyo-gold-2:#E6C65C;
  --tyo-footer:#080B09; color-scheme:dark;
}

/* Theme switch (floating, bottom-left so it never covers WhatsApp / back-to-top buttons) */
.tyo-theme-btn{
  position:fixed; left:18px; bottom:18px; z-index:9990; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; padding:0;
  background:var(--tyo-surface); color:var(--tyo-gold); border:1px solid var(--tyo-line);
  box-shadow:0 8px 24px rgba(0,0,0,.14); transition:transform .25s ease, background .25s ease;
}
.tyo-theme-btn:hover{ transform:translateY(-2px) rotate(-12deg); }
.tyo-theme-btn:focus-visible{ outline:2px solid var(--tyo-emerald); outline-offset:3px; }
.tyo-theme-btn svg{ width:20px; height:20px; }
.tyo-theme-btn .i-sun{ display:none; }
:root[data-theme="dark"] .tyo-theme-btn .i-sun{ display:block; }
:root[data-theme="dark"] .tyo-theme-btn .i-moon{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tyo-theme-btn .i-sun{ display:block; }
  :root:not([data-theme="light"]) .tyo-theme-btn .i-moon{ display:none; }
}
@media print{ .tyo-theme-btn{ display:none !important; } }

/* Credits strip */
body:has(> .tyo-credit){ flex-wrap:wrap; }
.tyo-credit{
  flex:1 0 100%; width:100%; box-sizing:border-box; align-self:flex-end;
  font:500 12.5px/1.6 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  text-align:center; padding:14px 16px calc(14px + env(safe-area-inset-bottom)); margin:0;
  background:var(--tyo-footer); color:#A8A29E; border-top:1px solid rgba(212,175,55,.18); letter-spacing:.2px;
}
.tyo-credit a{ color:#D4AF37; text-decoration:none; font-weight:700; }
.tyo-credit a:hover{ color:#E6C65C; text-decoration:underline; }
.tyo-credit .sep{ opacity:.45; margin:0 8px; }