/* ACCTIOS auth modal + header auth (from app.css) */
.auth-bar { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.auth-bar .bal { font-weight:700; color:#047857; font-size:.9rem; }
.auth-bar .email { font-size:.85rem; color:#345850; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.modal-backdrop {
      position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:100;
      display:none; align-items:center; justify-content:center; padding:1rem;
    }
.modal-backdrop.open { display:flex; }
.toast-wrap {
      position:fixed; top:1rem; right:1rem; z-index:120; display:flex; flex-direction:column; gap:.5rem;
      max-width:min(360px,92vw);
    }
.toast {
      background:#076c50; border:1px solid rgba(255,255,255,.12); color:var(--text);
      padding:.75rem 1rem; border-radius:12px; box-shadow:var(--shadow); font-size:.9rem;
    }
.toast.bad { border-color:rgba(251,113,133,.5); }
.toast.ok { border-color:rgba(52,211,153,.5); }
/* Auth card — light SMS-Duo-like form on dim overlay */
    .modal-backdrop.auth-backdrop {
      background: rgba(5, 28, 25, .55);
      backdrop-filter: blur(6px);
    }
.modal.auth-card {
      background: #fff;
      color: #0b1f1c;
      width: min(420px, 94vw);
      padding: 1.6rem 1.5rem 1.35rem;
      border-radius: 18px;
      box-shadow: 0 24px 60px rgba(0,0,0,.35);
      border: 1px solid rgba(15,118,110,.12);
      position: relative;
    }
.modal.auth-card h3 {
      margin: 0 0 .25rem;
      font-size: 1.35rem;
      font-weight: 800;
      color: #0b1f1c;
    }
.modal.auth-card .auth-sub {
      margin: 0 0 1rem;
      color: #5b736c;
      font-size: .92rem;
    }
.modal.auth-card label {
      color: #345850;
      font-weight: 600;
    }
.modal.auth-card label .opt { font-weight: 500; color: #8aa39b; }
.modal.auth-card input[type="email"],
    .modal.auth-card input[type="password"],
    .modal.auth-card input[type="text"] {
      width: 100%;
      border: 1px solid rgba(15,118,110,.22);
      background: #f7fbfa;
      color: #0b1f1c;
      border-radius: 12px;
      padding: .7rem .85rem;
      outline: none;
    }
.modal.auth-card input:focus {
      border-color: #14b8a6;
      box-shadow: 0 0 0 3px rgba(20,184,166,.2);
      background: #fff;
    }
.auth-close {
      position: absolute; top: .7rem; right: .75rem;
      width: 32px; height: 32px; border: none; border-radius: 999px;
      background: #f0f5f3; color: #345850; font-size: 1.25rem; line-height: 1;
      cursor: pointer; font-weight: 700;
    }
.auth-close:hover { background: #e2eeea; }
.auth-check {
      display: flex !important; align-items: center; gap: .5rem;
      margin: .85rem 0 .35rem !important; cursor: pointer; user-select: none;
      font-size: .9rem !important; color: #345850 !important;
    }
.auth-check input { width: auto !important; accent-color: #0d9488; }
.auth-primary {
      width: 100%; margin-top: .75rem; border: none; border-radius: 999px;
      padding: .8rem 1rem; font-weight: 800; cursor: pointer;
      background: linear-gradient(145deg, #4ade80, #22c58b); color: #04382a;
      box-shadow: 0 8px 20px rgba(13,148,136,.35);
    }
.auth-primary:hover { filter: brightness(1.05); }
.auth-forgot {
      display: block; text-align: center; margin-top: .75rem;
      color: #0d9488; font-size: .9rem; font-weight: 600;
    }
.auth-forgot:hover { text-decoration: underline; }
.auth-switch {
      text-align: center; margin-top: 1rem; color: #5b736c; font-size: .9rem;
    }
.auth-link-btn {
      border: none; background: none; color: #0d9488; font-weight: 800;
      cursor: pointer; padding: 0; font: inherit;
    }
.auth-link-btn:hover { text-decoration: underline; }
.modal.auth-card .err { color: #be123c; }
/* conn status dot */
#connStatus.pill {
  font-size: 0; line-height: 0; color: transparent;
  width: 12px; height: 12px; min-width: 12px; padding: 0;
  border-radius: 50%; border: none; cursor: default;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.22), 0 0 10px rgba(34,197,94,.55);
  align-self: center;
}
#connStatus.pill.is-pending { background: #facc15; box-shadow: 0 0 0 3px rgba(250,204,21,.22); }
#connStatus.pill.is-bad { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.22), 0 0 10px rgba(239,68,68,.5); }
.auth-bar a.email { text-decoration: none; }
.auth-bar a.email:hover { color: #0d9488; text-decoration: underline; }
.topbar .lang-switch, .topbar #authBar { display: none; }
/* auth: forgot password box */
.auth-forgot-box {
  margin-top: .7rem; padding: .8rem .9rem; border-radius: 12px; text-align: left;
  background: #f0fdf9; border: 1px solid rgba(15,118,110,.22); color: #0b1f1c; font-size: .86rem; line-height: 1.55;
}
.auth-forgot-box b { display: block; margin-bottom: .25rem; color: #0f766e; }
.auth-forgot-box p { margin: .2rem 0; }
.auth-forgot-box .muted { color: #4b6b64; font-size: .8rem; }
.auth-forgot-box .auth-primary.sm { padding: .5rem .9rem; font-size: .85rem; margin-top: .4rem; width: auto; }
.modal-backdrop.bm-backdrop { z-index: 110; background: rgba(2,14,12,.62); backdrop-filter: blur(4px); }
@media (max-width: 640px) {
  .modal-backdrop.bm-backdrop { align-items: flex-end; padding: 0; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.topbar #connStatus { display: none !important; }
.topbar .auth-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap; }
.hb-btn { height: 36px; padding: 0 .95rem; border-radius: 10px; font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; }
.hb-btn.ghost { background: #fff; color: #0f766e; border: 1px solid #cfe3de; }
.hb-btn.ghost:hover { border-color: #14b8a6; }
.hb-btn.primary { background: #14b8a6; color: #fff; border: 1px solid #14b8a6; box-shadow: 0 4px 12px rgba(20,184,166,.28); }
.hb-btn.primary:hover { background: #0d9488; border-color: #0d9488; }
.hb-bal { height: 36px; display: inline-flex; align-items: center; gap: .4rem; padding: 0 .4rem 0 .75rem; border-radius: 10px; background: #ecfdf5; border: 1px solid #c7eee0; color: #065f46; font-size: .85rem; white-space: nowrap; }
.hb-bal-l { color: #4b7d6e; font-weight: 600; }
.hb-bal b { font-weight: 800; font-variant-numeric: tabular-nums; }
.hb-bal i { font-style: normal; width: 22px; height: 22px; border-radius: 7px; background: #14b8a6; color: #fff; display: grid; place-items: center; font-weight: 800; line-height: 1; }
.hb-bal:hover { border-color: #14b8a6; }
.hb-user { position: relative; }
.hb-user-btn { height: 36px; display: inline-flex; align-items: center; gap: .35rem; padding: 0 .45rem 0 .2rem; border-radius: 999px; border: 1px solid #dbe8e4; background: #fff; cursor: pointer; }
.hb-user-btn:hover, .hb-user-btn[aria-expanded="true"] { border-color: #14b8a6; }
.hb-av { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: linear-gradient(135deg, #14b8a6, #0f766e); color: #fff; font-weight: 800; font-size: .85rem; display: grid; place-items: center; }
.hb-caret { width: 7px; height: 7px; border-right: 2px solid #4b635d; border-bottom: 2px solid #4b635d; transform: translateY(-2px) rotate(45deg); }
.hb-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 248px; background: #fff; color: #0f2a26; border: 1px solid #dfe9e6; border-radius: 14px; box-shadow: 0 18px 40px rgba(15,42,38,.18); padding: .4rem; z-index: 60; display: flex; flex-direction: column; white-space: normal; }
.hb-menu-head { display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem .7rem; border-bottom: 1px solid #edf3f1; margin-bottom: .3rem; }
.hb-menu-head > span:last-child { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.hb-menu-head b { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-menu-head small { font-size: .78rem; color: #4b7d6e; }
.hb-menu a, .hb-menu-out { display: block; width: 100%; text-align: left; padding: .6rem .65rem; border-radius: 9px; font: inherit; font-size: .9rem; font-weight: 600; color: #0f2a26; background: none; border: none; cursor: pointer; }
.hb-menu a:hover, .hb-menu-out:hover { background: #f1f7f5; }
.hb-menu-out { color: #be123c; border-top: 1px solid #edf3f1; border-radius: 0 0 9px 9px; margin-top: .3rem; }
.hb-menu-conn { display: flex; align-items: center; gap: .45rem; padding: .45rem .65rem; font-size: .78rem; color: #4b635d; }
.hb-menu-conn i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.hb-menu-conn.pending i { background: #facc15; }
.hb-menu-conn.bad i { background: #ef4444; }
.hb-bal-l { display: none; }
.is-authed .seo-cta[data-auth-open] { display: none; }
/* keep the centred nav clear of the right group: compact the right side step by step */
@media (min-width: 901px) and (max-width: 1500px) { .hb-bal-l { display: none; }
.hb-caret { display: none; }
.hb-user-btn { padding: 0 .2rem; }
@media (min-width: 901px) and (max-width: 1140px) {
  .topbar #authBar .hb-btn { padding: 0 .6rem; font-size: .84rem; }
html.theme-dark .hb-btn.ghost { background: transparent; color: #a7f3d0; border-color: #2a3a36; }
html.theme-dark .hb-bal { background: #0f1b18; border-color: #1f3a33; color: #d1fae5; }
html.theme-dark .hb-bal-l { color: #9fb3ad; }
html.theme-dark .hb-user-btn { background: #111917; border-color: #263330; }
html.theme-dark .hb-caret { border-color: #9fb3ad; }
html.theme-dark .hb-menu { background: #0f1513; color: #e8f1ee; border-color: #1f2a27; box-shadow: 0 18px 40px rgba(0,0,0,.55); }
html.theme-dark .hb-menu-head { border-bottom-color: #1f2a27; }
html.theme-dark .hb-menu-head small, html.theme-dark .hb-menu-conn { color: #9fb3ad; }
html.theme-dark .hb-menu a, html.theme-dark .hb-menu-out { color: #e8f1ee; }
html.theme-dark .hb-menu a:hover, html.theme-dark .hb-menu-out:hover { background: #17201d; }
html.theme-dark .hb-menu-out { color: #fda4af; border-top-color: #1f2a27; }
/* auth modal (white in day mode) */
html.theme-dark .modal.auth-card { background: #0f1614; color: #e8f1ee; border-color: #1f2a27; }
html.theme-dark .modal.auth-card h3 { color: #f3faf7; }
html.theme-dark .modal.auth-card .auth-sub, html.theme-dark .modal.auth-card label .opt { color: #a9bdb7; }
html.theme-dark .modal.auth-card label, html.theme-dark .auth-check { color: #c9d8d3 !important; }
html.theme-dark .modal.auth-card input[type="email"], html.theme-dark .modal.auth-card input[type="password"], html.theme-dark .modal.auth-card input[type="text"] { background: #0a100f; color: #e8f1ee; border-color: #263330; }
html.theme-dark .modal.auth-card input:focus { background: #0a100f; }
html.theme-dark .auth-close { background: #17201d; color: #c9d8d3; }
html.theme-dark .auth-close:hover { background: #1f2a27; }
html.theme-dark .auth-forgot-box { background: #0c1412; border-color: #1f3a33; color: #e8f1ee; }
html.theme-dark .auth-forgot-box b { color: #5eead4; }
html.theme-dark .toast { background: #0d1513; }
.topbar #authBar .hb-btn { padding: 0 .5rem; font-size: .8rem; }
.hb-bal { padding: 0 .55rem; }
.hb-bal i { display: none; }
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .toast {
  background: #fff;
  color: #0f172a;
  border: 1px solid #e2e8f0;
}
html:not(.theme-dark) body:is(.page-home, .page-accounts, .page-tools, .page-dash) .modal:not(.auth-card) {
  background: #fff;
  color: #0f172a;
  border-color: #e2e8f0;
}
html:not(.theme-dark) body.page-dash .dash-nav.active,
html:not(.theme-dark) body.page-dash .cta,
html:not(.theme-dark) body.page-dash .auth-primary,
html:not(.theme-dark) body.page-dash .dash-nav.active {
  background: #0d9488; color: #fff; border-color: #0d9488;
}
html:not(.theme-dark) body.page-dash a.cta,
html:not(.theme-dark) body.page-dash button.cta,
html:not(.theme-dark) body.page-dash .auth-primary {
  color: #fff !important;
}
.is-authed .seo-cta-stack { display: none; }
/* register dialog */
.auth-gift { margin: -.2rem 0 .85rem; color: #0f766e; font-size: .82rem; font-weight: 700; }
.auth-ref-toggle { display: inline-block; margin: .65rem 0 .1rem; border: 0; background: none; padding: 0; color: #0d9488; font: inherit; font-weight: 700; cursor: pointer; }
.auth-ref-toggle:hover { text-decoration: underline; }
/* Day register dialog: dark text on the white card. Placeholders stay readable. */
html:not(.theme-dark) .modal.auth-card,
html:not(.theme-dark) .modal.auth-card h3,
html:not(.theme-dark) .modal.auth-card label,
html:not(.theme-dark) .modal.auth-card .auth-sub,
html:not(.theme-dark) .modal.auth-card .auth-gift,
html:not(.theme-dark) .modal.auth-card .auth-switch,
html:not(.theme-dark) .modal.auth-card .auth-check,
html:not(.theme-dark) .modal.auth-card .auth-ref-toggle {
  color: #0f172a;
}
html:not(.theme-dark) .modal.auth-card input[type="email"],
html:not(.theme-dark) .modal.auth-card input[type="password"],
html:not(.theme-dark) .modal.auth-card input[type="text"] {
  color: #0f172a;
  color-scheme: light;
  background: #f8fafc;
}
html:not(.theme-dark) .modal.auth-card input::placeholder {
  color: #334155;
  opacity: 1;
}
.topbar #authBar { gap: .25rem; }
.topbar #authBar .hb-btn { padding-left: .3rem; padding-right: .3rem; }