:root {
  color-scheme: dark;
  --pw-bg: #0c111a;
  --pw-surface: #101827;
  --pw-border: #2a3a54;
  --pw-text: #d8e2f0;
  --pw-text-muted: #b7c5da;
  --pw-heading: #f4f8ff;
  --pw-link: #74c8ff;
  --pw-link-hover: #9ad9ff;
  --pw-button: #2d9ff8;
  --pw-button-hover: #70c2ff;
  --pw-button-text: #03101d;
  --pw-theme-toggle-bg: #1e5aa6;
  --pw-theme-toggle-bg-hover: #2b6fc6;
  --pw-theme-toggle-fg: #ffffff;
  --pw-theme-toggle-ring: rgba(20, 40, 80, 0.5);
  --pw-hero-bg:
    radial-gradient(540px 200px at 100% -15%, rgba(69, 144, 255, 0.24), transparent 58%),
    radial-gradient(500px 220px at -10% 0%, rgba(79, 178, 255, 0.2), transparent 58%),
    linear-gradient(130deg, #101c31 0%, #0b1425 65%);
  --pw-kicker: #94d2ff;
  --pw-input-bg: #131d2e;
  --pw-input-focus-border: #4d6b96;
  --pw-input-focus-ring: rgba(77, 107, 150, 0.22);
  --pw-pill-bg: rgba(20, 30, 45, 0.55);
  --pw-pill-hover-bg: rgba(28, 44, 66, 0.7);
  --pw-pill-hover-border: #4d6b96;
  --pw-panel-bg: rgba(8, 15, 28, 0.2);
  --pw-status-border: #284365;
  --pw-status-bg: #121d30;
  --pw-status-text: #c8e7ff;
  --pw-status-error-border: #773a44;
  --pw-status-error-bg: #2a151b;
  --pw-status-error-text: #ffc4cc;
}
html[data-theme='light'] {
  color-scheme: light;
  --pw-bg: #f4f7fc;
  --pw-surface: #ffffff;
  --pw-border: #cfdaec;
  --pw-text: #1f2a3d;
  --pw-text-muted: #4f5f79;
  --pw-heading: #0f1b2d;
  --pw-link: #0f64bd;
  --pw-link-hover: #0a4f96;
  --pw-button: #2d9ff8;
  --pw-button-hover: #1d8be1;
  --pw-button-text: #03101d;
  --pw-theme-toggle-bg: #1e5aa6;
  --pw-theme-toggle-bg-hover: #184f93;
  --pw-theme-toggle-fg: #ffffff;
  --pw-theme-toggle-ring: rgba(30, 90, 166, 0.25);
  --pw-hero-bg:
    radial-gradient(520px 200px at 100% -15%, rgba(120, 170, 255, 0.24), transparent 60%),
    radial-gradient(480px 200px at -10% 0%, rgba(120, 205, 255, 0.22), transparent 58%),
    linear-gradient(130deg, #f5f9ff 0%, #e6eef9 65%);
  --pw-kicker: #2b6aa6;
  --pw-input-bg: #f7f9fd;
  --pw-input-focus-border: #2d6bb0;
  --pw-input-focus-ring: rgba(45, 107, 176, 0.18);
  --pw-pill-bg: #eef3fb;
  --pw-pill-hover-bg: #e1ebf8;
  --pw-pill-hover-border: #9db4d8;
  --pw-panel-bg: rgba(240, 245, 255, 0.6);
  --pw-status-border: #b7c7df;
  --pw-status-bg: #f1f6ff;
  --pw-status-text: #12385c;
  --pw-status-error-border: #e2b3bc;
  --pw-status-error-bg: #fff2f4;
  --pw-status-error-text: #7a2331;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--pw-text);
  background:
    radial-gradient(1200px 600px at 15% -10%, #1a2f52 0%, rgba(26, 47, 82, 0) 58%),
    radial-gradient(1200px 720px at 120% 0%, #102645 0%, rgba(16, 38, 69, 0) 52%),
    var(--pw-bg);
}
a { color: var(--pw-link); }
a:hover { color: var(--pw-link-hover); }
[hidden] { display: none !important; }
.shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.card {
  width: min(100%, 540px);
  border: 1px solid var(--pw-border);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(16, 24, 39, 0.98), rgba(12, 18, 30, 0.98));
  box-shadow: 0 18px 36px rgba(3, 6, 14, 0.4);
  overflow: hidden;
  position: relative;
}
html[data-theme='light'] .card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 255, 0.98));
}
.panel {
  border: 1px solid var(--pw-border);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.2rem;
  background: var(--pw-panel-bg);
}
.panel-title {
  margin: 0 0 0.4rem;
  font-size: 1rem;
}
.totp-details {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.75rem;
}
.qr-wrap {
  background: rgba(255, 255, 255, 0.08);
  padding: 0.6rem;
  border-radius: 12px;
  display: inline-flex;
}
.qr-wrap svg {
  max-width: 180px;
  height: auto;
}
.qr-wrap img {
  max-width: 180px;
  height: auto;
  display: block;
}
.secret-wrap textarea {
  resize: vertical;
}
.totp-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.6rem;
}
.hero {
  border-bottom: 1px solid var(--pw-border);
  padding: 1.4rem 1.3rem 1.1rem;
  background: var(--pw-hero-bg);
}
.kicker {
  margin: 0 0 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.77rem;
  color: var(--pw-kicker);
}
h1 {
  margin: 0 0 0.5rem;
  color: var(--pw-heading);
  letter-spacing: -0.015em;
  font-size: 1.9rem;
}
.muted { color: var(--pw-text-muted); margin: 0; }
.content { padding: 1rem 1.3rem 1.3rem; }
label {
  display: block;
  color: var(--pw-heading);
  font-weight: 600;
  margin-top: 0.55rem;
  margin-bottom: 0.2rem;
}
.recent-accounts {
  margin-top: 0.5rem;
}
.recent-label {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  color: var(--pw-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.recent-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.recent-pill {
  border-radius: 999px;
  border: 1px solid var(--pw-border);
  background: var(--pw-pill-bg);
  color: var(--pw-text);
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.recent-pill:hover {
  border-color: var(--pw-pill-hover-border);
  background: var(--pw-pill-hover-bg);
}
input, select {
  width: 100%;
  padding: 0.66rem 0.74rem;
  border-radius: 10px;
  border: 1px solid var(--pw-border);
  background: var(--pw-input-bg);
  color: var(--pw-text);
}
input:focus, select:focus {
  outline: none;
  border-color: var(--pw-input-focus-border);
  box-shadow: 0 0 0 2px var(--pw-input-focus-ring);
}
.row { display: flex; gap: 0.65rem; margin-top: 0.85rem; flex-wrap: wrap; }
.captcha-widget {
  margin-top: 0.7rem;
  min-height: 66px;
}
.captcha-help {
  margin-top: 0.35rem;
  color: var(--pw-text-muted);
  font-size: 0.85rem;
}
button {
  display: inline-block;
  padding: 0.58rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--pw-button);
  background: var(--pw-button);
  color: var(--pw-button-text);
  font-weight: 600;
  cursor: pointer;
}
button:hover { background: var(--pw-button-hover); border-color: var(--pw-button-hover); }
button.secondary {
  background: transparent;
  color: var(--pw-link);
  border-color: var(--pw-border);
}
button.secondary:hover {
  color: var(--pw-link-hover);
  border-color: #3b4f70;
  background: rgba(24, 37, 58, 0.75);
}
button:disabled { opacity: 0.65; cursor: not-allowed; }
.theme-toggle-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  border: 1px solid var(--pw-theme-toggle-ring);
  background: var(--pw-theme-toggle-bg);
  color: var(--pw-theme-toggle-fg);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  cursor: pointer;
}
.theme-toggle-btn .theme-glyph {
  width: 16px;
  height: 16px;
  line-height: 0;
  color: var(--pw-theme-toggle-fg);
  user-select: none;
}
.theme-toggle-btn .theme-glyph svg {
  width: 16px;
  height: 16px;
  display: block;
}
.theme-toggle-btn .icon-sun {
  display: none;
}
.theme-toggle-btn .icon-moon {
  display: inline-block;
}
html[data-theme='light'] .theme-toggle-btn .icon-sun {
  display: inline-block;
}
html[data-theme='light'] .theme-toggle-btn .icon-moon {
  display: none;
}
.theme-toggle-btn:hover {
  background: var(--pw-theme-toggle-bg-hover);
}
.status {
  margin-top: 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--pw-status-border);
  background: var(--pw-status-bg);
  color: var(--pw-status-text);
  padding: 0.7rem 0.8rem;
}
.status.error {
  border-color: var(--pw-status-error-border);
  background: var(--pw-status-error-bg);
  color: var(--pw-status-error-text);
}
.fineprint {
  margin-top: 0.7rem;
  color: var(--pw-text-muted);
  font-size: 0.9rem;
}
@media (max-width: 560px) {
  h1 { font-size: 1.62rem; }
}