.account-summary,
.cloud-status {
  position: fixed;
  z-index: 20;
  pointer-events: none;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: .02em;
  font-size: 11px;
  color: rgba(207, 227, 255, .78);
  text-shadow: 0 0 14px rgba(56, 225, 255, .28);
}

.account-summary { top: 14px; left: 18px; }
.cloud-status { right: 18px; bottom: 14px; }
.cloud-status[data-tone="online"] { color: #8dffb0; }
.cloud-status[data-tone="saving"] { color: #ffd166; }
.cloud-status[data-tone="offline"] { color: #9fb2c8; }

.account-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2, 4, 12, .78);
  backdrop-filter: blur(8px);
}
.account-modal[hidden] { display: none; }
.account-card {
  position: relative;
  width: min(430px, 100%);
  padding: 30px 28px 26px;
  color: #dbe7ff;
  background: linear-gradient(145deg, rgba(8, 20, 42, .98), rgba(8, 10, 25, .98));
  border: 1px solid rgba(56, 225, 255, .62);
  border-radius: 16px;
  box-shadow: 0 0 42px rgba(56, 225, 255, .18), inset 0 0 30px rgba(27, 61, 110, .2);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}
.account-card h2 { margin: 0 0 10px; color: #eaf6ff; text-align: center; letter-spacing: .16em; font-size: 22px; text-shadow: 0 0 16px rgba(56,225,255,.65); }
.account-lead, .account-choice p { margin: 0 0 20px; color: #9fd8ff; text-align: center; line-height: 1.5; font-size: 13px; white-space: pre-line; }
.account-close { position: absolute; top: 8px; right: 12px; border: 0; background: none; color: #9fd8ff; font-size: 28px; cursor: pointer; }
.account-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.account-tabs button, .account-primary, .account-secondary, .account-link { font: 700 12px/1.2 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: .08em; cursor: pointer; }
.account-tabs button { padding: 11px 8px; color: #7e9ab8; border: 1px solid rgba(126, 154, 184, .3); border-radius: 8px; background: rgba(4, 10, 24, .65); }
.account-tabs button.is-active { color: #eaf6ff; border-color: rgba(56,225,255,.75); box-shadow: 0 0 16px rgba(56,225,255,.16); }
.account-card form { display: grid; gap: 10px; }
.account-card input { width: 100%; padding: 13px 14px; color: #eaf6ff; border: 1px solid rgba(126,154,184,.4); border-radius: 8px; outline: none; background: rgba(2,7,18,.8); }
.account-card input:focus { border-color: #38e1ff; box-shadow: 0 0 14px rgba(56,225,255,.18); }
.account-primary, .account-secondary { width: 100%; padding: 13px 12px; border-radius: 8px; }
.account-primary { color: #06111c; border: 1px solid #8dffb0; background: #8dffb0; }
.account-secondary { color: #dbe7ff; border: 1px solid rgba(56,225,255,.55); background: rgba(10,24,45,.9); }
.account-link { display: block; margin: 14px auto 0; padding: 4px; color: #9fd8ff; border: 0; background: none; }
.account-message { min-height: 20px; margin: 12px 0 0; color: #ffd166; text-align: center; font-size: 12px; line-height: 1.4; }
.account-message[data-tone="error"] { color: #ff9aa2; }
.account-message[data-tone="success"] { color: #8dffb0; }
.account-choice-buttons { display: grid; gap: 10px; }
.account-modal[data-view="choice"] [data-auth-view="auth"], .account-modal[data-view="auth"] [data-auth-view="choice"] { display: none; }

@media (max-width: 600px) {
  .account-summary { top: 8px; left: 10px; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cloud-status { right: 10px; bottom: 8px; font-size: 10px; }
  .account-card { padding: 26px 18px 20px; }
}