/* Auth — account chip (top-left), sign-in modal, toast. Matches the app's dark theme. */
.acct { position: fixed; top: 10px; left: 12px; z-index: 30; }
.acct-btn {
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  border-radius: 10px; padding: 7px 12px; font-size: .9rem; line-height: 1; cursor: pointer;
}
.acct-btn:hover { border-color: var(--accent); }
.acct-btn.in { color: var(--accent2); border-color: #26415f; }
.acct-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 190px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.55);
}
.acct-menu[hidden] { display: none; }
.acct-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); opacity: .75; padding: 2px 4px 0; }
.acct-email { font-size: .78rem; color: var(--muted); padding: 2px 4px 8px; word-break: break-all; }
.acct-signout {
  width: 100%; background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  border-radius: 9px; padding: 8px 10px; font-size: .85rem; cursor: pointer;
}
.acct-signout:hover { border-color: var(--pink); }

.auth-overlay {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(4,7,12,.66); padding: 18px;
}
.auth-overlay[hidden] { display: none; }
.auth-modal {
  position: relative; width: 100%; max-width: 400px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 26px 24px 20px; box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.auth-x {
  position: absolute; top: 12px; right: 14px; background: transparent; border: 0;
  color: var(--dim); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.auth-x:hover { color: var(--ink); }
.auth-brand { font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--dim); font-weight: 700; }
.auth-modal h2 { font-size: 1.2rem; margin: .5rem 0 .35rem; letter-spacing: -.01em; }
.auth-sub { color: var(--muted); font-size: .92rem; margin: 0 0 16px; line-height: 1.45; }
#authForm { display: flex; flex-direction: column; gap: 10px; }
#authEmail { width: 100%; font-size: 1rem; }
.auth-submit {
  background: var(--accent); color: #20150a; font-weight: 700; border: 0;
  border-radius: 10px; padding: 12px 14px; font-size: .98rem; cursor: pointer;
}
.auth-submit:hover { filter: brightness(1.05); }
.auth-submit:disabled { opacity: .6; cursor: default; }
.auth-status {
  margin-top: 14px; font-size: .9rem; line-height: 1.45; border-radius: 10px;
  padding: 12px 13px; background: var(--panel2); border: 1px solid var(--line); color: var(--ink);
}
.auth-status[hidden] { display: none; }
.auth-status.ok { border-color: #26415f; color: var(--accent2); }
.auth-status.err { border-color: #4a2a35; color: var(--pink); }
.auth-fine { color: var(--dim); font-size: .76rem; margin: 14px 0 0; line-height: 1.45; }

.auth-toast {
  position: fixed; top: 68px; left: 50%; transform: translateX(-50%); z-index: 70;
  background: var(--panel2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 12px; padding: 12px 18px; font-size: .9rem; box-shadow: 0 12px 34px rgba(0,0,0,.55);
}
.auth-toast[hidden] { display: none; }
.auth-toast.ok { border-color: #26415f; }
.auth-toast.err { border-color: #4a2a35; }

html.light .acct-btn, html.light .acct-menu, html.light .auth-modal,
html.light .auth-status, html.light .auth-toast { color: #1a2230; }
html.light .auth-overlay { background: rgba(120,130,150,.4); }