/* WordCrypt app: main-site theme (added 2026-09-25).
   Loaded after the app's original stylesheet. Matches wordcrypt.com's fonts and colors. */

/* ---- Fonts (self-hosted, same as the main site; replaces Google Fonts) ---- */
@font-face { font-family: "Inter"; src: url("/app/fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("/app/fonts/inter-tight-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/app/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }

:root {
  --wct-font-display: "Inter Tight", system-ui, sans-serif;
  --wct-font-body: "Inter", system-ui, sans-serif;
  --wct-font-mono: "JetBrains Mono", ui-monospace, monospace;
  --wct-page: #080d16;
  --wct-bg: oklch(16% .03 258);
  --wct-bg-2: oklch(20% .04 258);
  --wct-fg: oklch(96% .005 258);
  --wct-fg-2: oklch(78% .02 258);
  --wct-fg-3: oklch(68% .03 258);
  --wct-rule: oklch(28% .04 258);
  --wct-rule-2: oklch(34% .05 258);
  --wct-accent: #3B97E3;
  --wct-accent-fg: oklch(16% .03 258);
  --wct-warn: oklch(70% .18 28);
  --wct-pad: clamp(20px, 4vw, 56px);
}

/* ---- Logo in the generator header ---- */
.gen-logo-icon.wc-logo { width: auto; height: auto; background: none; border: 0; box-shadow: none; display: flex; align-items: center; }
.gen-logo-icon.wc-logo img { height: 40px; width: auto; display: block; }

/* ---- Registration page ---- */
.wcr-page {
  min-height: 100vh;
  background: var(--wct-bg);
  color: var(--wct-fg);
  font-family: var(--wct-font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
  display: flex;
  flex-direction: column;
}
.wcr-page *, .wcr-page *::before, .wcr-page *::after { box-sizing: border-box; }
.wcr-page a { color: inherit; text-decoration: none; }

.wcr-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklch, var(--wct-bg) 92%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--wct-rule);
}
.wcr-nav-inner {
  max-width: 1200px; height: 64px; margin: 0 auto; padding: 0 var(--wct-pad);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.wcr-brand { display: inline-flex; align-items: center; gap: 10px; }
.wcr-brand img { height: 46px; width: auto; display: block; }
.wcr-brand span { font-family: var(--wct-font-display); font-weight: 600; font-size: 24px; letter-spacing: -0.01em; line-height: 1; color: #fff; }
.wcr-nav-links { display: flex; gap: 4px; }
.wcr-nav-links a { padding: 8px 12px; border-radius: 4px; font-size: 0.9rem; color: var(--wct-fg-2); transition: color .15s, background .15s; }
.wcr-nav-links a:hover { color: var(--wct-fg); background: var(--wct-bg-2); }

.wcr-main {
  flex: 1; position: relative; overflow: hidden;
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(40px, 7vw, 96px) 20px clamp(48px, 7vw, 96px);
}
.wcr-main::before {
  content: ""; position: absolute; inset: -10% -5% auto; height: 80%; pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 50% 0, color-mix(in oklch, var(--wct-accent) 14%, transparent) 0, transparent 65%);
}

.wcr-card {
  position: relative; width: 100%; max-width: 480px;
  background: var(--wct-bg-2); border: 1px solid var(--wct-rule); border-radius: 8px;
  padding: clamp(24px, 4vw, 40px);
}
.wcr-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.wcr-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--wct-accent); }
.wcr-eyebrow {
  font-family: var(--wct-font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--wct-fg-3);
}
.wcr-title {
  margin: 0 0 12px; font-family: var(--wct-font-display); font-weight: 500;
  font-size: clamp(30px, 4vw, 40px); line-height: 1.05; letter-spacing: -0.025em; color: var(--wct-fg);
}
.wcr-sub { margin: 0 0 28px; font-size: 15px; color: var(--wct-fg-2); line-height: 1.55; }
.wcr-sub strong { color: var(--wct-fg); font-weight: 600; }

.wcr-form { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.wcr-field { display: flex; flex-direction: column; gap: 8px; }
.wcr-label {
  font-family: var(--wct-font-mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--wct-fg-3);
}
.wcr-input {
  width: 100%; padding: 12px 14px; border-radius: 4px;
  border: 1px solid var(--wct-rule-2); background: var(--wct-bg); color: var(--wct-fg);
  font: 15px var(--wct-font-body); outline: none; transition: border-color .15s, box-shadow .15s;
}
.wcr-input::placeholder { color: var(--wct-fg-3); opacity: .8; }
.wcr-input:focus { border-color: var(--wct-accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--wct-accent) 25%, transparent); }

.wcr-check { display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px; color: var(--wct-fg-2); line-height: 1.5; cursor: pointer; }
.wcr-check input { width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--wct-accent); cursor: pointer; }

.wcr-error { margin: 0; font-size: 13.5px; color: var(--wct-warn); }

.wcr-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; padding: 14px 22px; border: 1px solid transparent; border-radius: 4px;
  background: var(--wct-accent); color: var(--wct-accent-fg);
  font: 500 15px var(--wct-font-body); letter-spacing: -0.005em; cursor: pointer;
  transition: filter .15s, transform .12s;
}
.wcr-btn:hover { filter: brightness(1.08); }
.wcr-btn:active { transform: translateY(1px); }
.wcr-btn:focus-visible, .wcr-input:focus-visible, .wcr-page a:focus-visible, .wcr-check input:focus-visible { outline: 2px solid var(--wct-accent); outline-offset: 2px; }

.wcr-note { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--wct-rule); display: grid; gap: 8px; }
.wcr-note p { margin: 0; font-size: 14px; color: var(--wct-fg-2); line-height: 1.55; }

@media (max-width: 560px) {
  .wcr-nav-links { display: none; }
  .wcr-card { padding: 24px 20px; }
}

/* ======================================================================
   Password generator page, main-site style (added 2026-09-25, v2.1.2).
   Style-only overrides: the generator's code and password logic are unchanged.
   ====================================================================== */
.password-generator {
  background: var(--wct-bg);
  color: var(--wct-fg);
  font-family: var(--wct-font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
  position: relative;
  overflow-x: clip;
}
.password-generator.has-ad { padding-bottom: 0; }
.password-generator::before {
  content: ""; position: absolute; left: -5%; right: -5%; top: 0; height: 640px; pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 50% 0, color-mix(in oklch, var(--wct-accent) 14%, transparent) 0, transparent 65%);
}

/* Header */
.password-generator .gen-nav {
  padding: 0;
  background: color-mix(in oklch, var(--wct-bg) 92%, transparent);
  border-bottom: 1px solid var(--wct-rule);
}
.password-generator .gen-nav-container { height: 64px; padding: 0 var(--wct-pad); gap: 16px; }
.password-generator .gen-nav-logo { gap: 10px; }
.password-generator .gen-nav-logo:hover { opacity: 1; }
.password-generator .gen-logo-icon.wc-logo img { height: 46px; }
.password-generator .gen-logo-text { font-family: var(--wct-font-display); font-weight: 600; font-size: 24px; letter-spacing: -0.01em; line-height: 1; color: #fff; }
.password-generator .gen-nav-right { display: flex; align-items: center; gap: 12px; }
.password-generator .gen-nav-links { gap: 4px; }
.password-generator .gen-nav-links a { display: block; padding: 8px 12px; border-radius: 4px; font-size: 0.9rem; color: var(--wct-fg-2); transition: color .15s, background .15s; }
.password-generator .gen-nav-links a:hover { color: var(--wct-fg); background: var(--wct-bg-2); }
.password-generator .gen-account-btn {
  padding: 9px 14px; border-radius: 4px; background: transparent; border: 1px solid var(--wct-rule-2);
  color: var(--wct-fg-2); font: 13.5px var(--wct-font-body); transition: background .15s, border-color .15s, color .15s;
}
.password-generator .gen-account-btn:hover { background: var(--wct-bg-2); border-color: var(--wct-fg-3); color: var(--wct-fg); }
.password-generator .gen-account-menu { background: var(--wct-bg-2); border: 1px solid var(--wct-rule); border-radius: 8px; box-shadow: 0 16px 40px #0008; }
.password-generator .gen-account-label { font-family: var(--wct-font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wct-fg-3); }
.password-generator .gen-account-value { color: var(--wct-fg); }
.password-generator .gen-account-logout { border-radius: 4px; font-family: var(--wct-font-body); }

/* Heading */
.password-generator .gen-content { position: relative; max-width: 520px; padding-top: calc(64px + clamp(40px, 7vw, 88px)); }
.password-generator .gen-header { text-align: left; margin-bottom: 24px; }
.password-generator .gen-header::before {
  content: "Password generator"; display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  font-family: var(--wct-font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wct-fg-3);
}
.password-generator .gen-title {
  font-family: var(--wct-font-display); font-weight: 500; font-size: clamp(30px, 4vw, 40px); line-height: 1.05; letter-spacing: -0.025em;
  margin: 0 0 12px; background: none; -webkit-text-fill-color: currentColor; color: var(--wct-fg);
}
.password-generator .gen-subtitle { color: var(--wct-fg-2); font-size: 15px; margin: 0; }
.password-generator .gen-identity-badge {
  justify-content: flex-start; padding: 12px 16px; margin-bottom: 16px;
  background: var(--wct-bg-2); border: 1px solid var(--wct-rule); border-radius: 8px;
  font-size: 13.5px; color: var(--wct-fg-2);
}
.password-generator .gen-identity-badge svg { color: var(--wct-accent); fill: var(--wct-accent); }
.password-generator .gen-identity-badge strong { color: var(--wct-accent); font-weight: 500; }

/* Form card */
.password-generator .gen-card { background: var(--wct-bg-2); border: 1px solid var(--wct-rule); border-radius: 8px; padding: clamp(24px, 4vw, 36px); animation: none; }
.password-generator .gen-form-group { margin-bottom: 18px; }
.password-generator .gen-label { font-family: var(--wct-font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wct-fg-3); margin-bottom: 8px; }
.password-generator .gen-input {
  padding: 12px 14px; border-radius: 4px; border: 1px solid var(--wct-rule-2); background: var(--wct-bg); color: var(--wct-fg);
  font: 15px var(--wct-font-body); transition: border-color .15s, box-shadow .15s;
}
.password-generator .gen-input::placeholder { color: var(--wct-fg-3); opacity: .8; }
.password-generator .gen-input:focus { border-color: var(--wct-accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--wct-accent) 25%, transparent); }
.password-generator .gen-icon-btn { color: var(--wct-fg-3); }
.password-generator .gen-icon-btn:hover { color: var(--wct-accent); }

/* Advanced options */
.password-generator .options-toggle { background: var(--wct-bg); border: 1px solid var(--wct-rule-2); border-radius: 4px; color: var(--wct-fg-3); font-family: var(--wct-font-body); font-size: 14px; }
.password-generator .options-toggle:hover:not(.disabled) { background: var(--wct-bg-2); }
.password-generator .options-panel { background: var(--wct-bg); border: 1px solid var(--wct-rule); border-radius: 4px; }
.password-generator .option-label { font-family: var(--wct-font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wct-fg-3); }
.password-generator .option-btn { border-radius: 4px; border-color: var(--wct-rule-2); background: transparent; color: var(--wct-fg-2); }
.password-generator .option-btn.active { background: var(--wct-accent); border-color: var(--wct-accent); color: var(--wct-accent-fg); }

/* Generate button */
.password-generator .gen-button {
  padding: 14px 22px; border-radius: 4px; margin-top: 8px;
  font: 500 15px var(--wct-font-body); letter-spacing: 0.04em;
}
.password-generator .gen-button::before { display: none; }
.password-generator .gen-button.enabled { background: var(--wct-accent); color: var(--wct-accent-fg); box-shadow: none; }
.password-generator .gen-button.enabled:hover { transform: none; box-shadow: none; filter: brightness(1.08); }
.password-generator .gen-button.enabled:active { transform: translateY(1px); }
.password-generator .gen-button.disabled { background: var(--wct-rule); color: var(--wct-fg-3); }
.password-generator .gen-error { color: var(--wct-warn); background: color-mix(in oklch, var(--wct-warn) 10%, transparent); border: 1px solid color-mix(in oklch, var(--wct-warn) 35%, transparent); border-radius: 4px; }

/* Result */
.password-generator .password-result { margin-top: 24px; }
.password-generator .result-label { font-family: var(--wct-font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wct-fg-3); }
.password-generator .password-box { background: var(--wct-bg); border: 1px solid var(--wct-accent); border-radius: 4px; }
.password-generator .password-text { font-family: var(--wct-font-mono); font-size: 17px; color: var(--wct-fg); padding: 13px 14px; }
.password-generator .password-text:hover { background: color-mix(in oklch, var(--wct-accent) 8%, transparent); }
.password-generator .copy-btn { color: var(--wct-fg-2); border-left: 1px solid var(--wct-rule-2); }
.password-generator .copy-btn:hover { color: var(--wct-accent); background: var(--wct-bg-2); }
.password-generator .password-hint { color: var(--wct-fg-3); font-size: 12.5px; }

/* Free tier + bookmarklet */
.password-generator .gen-tier-info,
.password-generator .gen-bookmarklet { background: var(--wct-bg-2); border: 1px solid var(--wct-rule); border-radius: 8px; padding: 20px 24px; }
.password-generator .gen-tier-info { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; text-align: left; }
.password-generator .gen-remaining { margin: 0; color: var(--wct-fg-2); font-size: 14px; }
.password-generator .gen-upgrade-link,
.password-generator .gen-bookmarklet-link {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 4px;
  background: transparent; border: 1px solid var(--wct-rule-2); color: var(--wct-fg);
  font: 500 14px var(--wct-font-body); transition: background .15s, border-color .15s;
}
.password-generator .gen-upgrade-link:hover,
.password-generator .gen-bookmarklet-link:hover { background: var(--wct-bg); border-color: var(--wct-fg-3); }
.password-generator .gen-bookmarklet { margin-top: 16px; text-align: left; }
.password-generator .gen-bookmarklet-title { font-family: var(--wct-font-display); font-weight: 500; font-size: 18px; letter-spacing: -0.01em; color: var(--wct-fg); margin: 0 0 6px; }
.password-generator .gen-bookmarklet-desc { color: var(--wct-fg-2); font-size: 14px; margin: 0 0 14px; }

/* Ad placeholder: in the page flow (it used to be pinned over the Generate button on phones) */
.password-generator .ad-banner { position: static; background: none; border: 0; padding: 16px 20px 48px; }
.password-generator .ad-container { max-width: 520px; padding: 0 1.5rem; }
.password-generator .ad-placeholder {
  height: 72px; border-radius: 8px; background: transparent; border: 1px dashed var(--wct-rule-2);
  color: var(--wct-fg-3); font-family: var(--wct-font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
}

/* Notices */
.offline-indicator { background: var(--wct-warn); color: #111; font-family: var(--wct-font-body); }
.install-prompt { background: var(--wct-bg-2); border-bottom: 1px solid var(--wct-rule); font-family: var(--wct-font-body); color: var(--wct-fg); }
.install-btn { background: var(--wct-accent); color: var(--wct-accent-fg); border-radius: 4px; }

@media (max-width: 560px) {
  .password-generator .gen-nav-links { display: none; }
  .password-generator .gen-content { padding-left: 20px; padding-right: 20px; }
  .password-generator .ad-container { padding: 0 4px; }
}
.password-generator .gen-account-id { max-width: 240px; }
@media (max-width: 560px) { .password-generator .gen-account-id { max-width: none; } }

/* Email confirmation step (2.1.34) */
.wcr-code { font-family: var(--wct-font-mono, ui-monospace, monospace); font-size: 22px; letter-spacing: 0.3em; text-align: center; }
.wcr-btn:disabled { opacity: .6; cursor: default; filter: none; transform: none; }
.wcr-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; }
.wcr-linkbtn { background: none; border: 0; padding: 4px 0; font: inherit; font-size: 13.5px; color: var(--wct-accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.wcr-linkbtn:disabled { opacity: .5; cursor: default; }
.wcr-linkbtn:focus-visible { outline: 2px solid var(--wct-accent); outline-offset: 2px; }

/* ---- Sign-in demo (2.1.35): a generic website login with the WordCrypt popup ---- */
.password-generator .wcd-content .gen-header::before { content: "Live demo"; }
.wcd-window {
  border-radius: 14px; overflow: hidden; border: 1px solid var(--wct-rule-2);
  box-shadow: 0 24px 60px rgba(0,0,0,.45); background: #f4f6f9;
}
.wcd-chrome { display: flex; align-items: center; gap: 14px; padding: 9px 14px; background: #e3e7ee; border-bottom: 1px solid #d3d9e2; }
.wcd-dots { display: flex; gap: 7px; flex: none; }
.wcd-dots span { width: 11px; height: 11px; border-radius: 50%; background: #c3cad5; }
.wcd-url {
  flex: 1; max-width: 340px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px; background: #fff; border: 1px solid #d3d9e2;
  font: 13px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #3a4357;
}
.wcd-url svg { color: #1e8a4c; flex: none; }
.wcd-site-brand { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: #2f4b8f; }
.wcd-site-brand b { font-weight: 700; color: #e07a2f; }
.wcd-site-mark { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, #2f4b8f, #4f6fc0); color: #fff; font-size: 20px; font-weight: 800; }
/* The "website" is deliberately plain and light so it reads as someone else's site, not WordCrypt. */
.wcd-site { padding: 36px clamp(20px, 6vw, 48px) 32px; color: #1d2433; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; display: flex; flex-direction: column; gap: 16px; }
.wcd-site h2 { margin: 0 0 4px; font-size: 22px; font-weight: 650; text-align: center; color: #1d2433; }
.wcd-site-logo { width: 44px; height: 44px; border-radius: 12px; margin: 0 auto; background: linear-gradient(135deg, #9aa5b8, #6b778c); }
.wcd-site-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: #3a4357; }
.wcd-site-field input {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 8px; border: 1px solid #c9d0db; background: #fff;
  font: 16px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #1d2433; outline: none;
}
.wcd-site-field input:focus { border-color: #5b7bd5; box-shadow: 0 0 0 3px rgba(91,123,213,.2); }
.wcd-site-field input::placeholder { color: #8a93a5; }
.wcd-pw { position: relative; }
.wcd-pw input { padding-right: 92px; cursor: pointer; letter-spacing: .04em; }
.wcd-pw-wc, .wcd-pw-eye {
  position: absolute; top: 50%; transform: translateY(-50%); border: 0; cursor: pointer;
  display: grid; place-items: center; border-radius: 8px;
}
.wcd-pw-wc { right: 6px; width: 38px; height: 34px; background: #eaf4fd; box-shadow: inset 0 0 0 1px #b9d6f2; }
.wcd-pw-wc img { width: 20px !important; }
.wcd-pw-wc img { width: 18px; height: auto; display: block; }
.wcd-pw-wc:hover, .wcd-pw-wc:focus-visible { outline: 2px solid var(--wct-accent); outline-offset: 1px; }
.wcd-pw-wc.pulse { animation: wcdPulse 1.8s ease-out infinite; }
@keyframes wcdPulse { 0% { box-shadow: 0 0 0 0 rgba(59,151,227,.55); } 70% { box-shadow: 0 0 0 10px rgba(59,151,227,0); } 100% { box-shadow: 0 0 0 0 rgba(59,151,227,0); } }
.wcd-pw-eye { right: 48px; width: 34px; height: 34px; background: none; color: #6b778c; }
.wcd-site-btn {
  margin-top: 4px; padding: 13px; border: 0; border-radius: 8px; background: #2f4b8f; color: #fff;
  font: 600 15px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; cursor: pointer;
}
.wcd-site-btn:disabled { background: #a9b3c6; cursor: default; }
.wcd-site-foot { margin: 0; text-align: center; font-size: 13px; color: #5b7bd5; }
.wcd-done { align-items: center; text-align: center; padding-top: 48px; padding-bottom: 44px; }
.wcd-done p { margin: 0; color: #4a5468; }
.wcd-check { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #e2f5ea; color: #1e8a4c; }

/* The WordCrypt popup */
.wcd-backdrop {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px;
  background: rgba(3, 7, 15, .62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: wcdFade .18s ease-out;
}
.wcd-pop {
  width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; box-sizing: border-box;
  background: linear-gradient(160deg, #13203a, #0b1424); border: 1px solid color-mix(in oklch, var(--wct-accent) 45%, transparent);
  border-radius: 18px; padding: 22px 24px 24px; color: var(--wct-fg);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset; animation: wcdRise .22s ease-out;
}
.wcd-pop-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.wcd-pop-head span { font-family: var(--wct-font-display); font-weight: 600; font-size: 20px; color: #fff; flex: 1; }
.wcd-pop-x { background: none; border: 0; color: var(--wct-fg-3); cursor: pointer; padding: 6px; border-radius: 6px; display: grid; }
.wcd-pop-x:hover { color: var(--wct-fg); background: rgba(255,255,255,.06); }
.wcd-with-icons { position: relative; }
.wcd-with-icons .gen-input { padding-right: 92px; }
.wcd-bio { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; gap: 2px; }
.wcd-bio .gen-icon-btn { position: static; transform: none; color: var(--wct-accent); padding: 6px; border-radius: 6px; }
.wcd-bio .gen-icon-btn:hover { background: rgba(77,166,255,.12); }
.wcd-bio-note { margin: 8px 0 0; font-size: 13px; color: var(--wct-fg-2); }
@keyframes wcdFade { from { opacity: 0; } }
@keyframes wcdRise { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .wcd-pw-wc.pulse, .wcd-backdrop, .wcd-pop { animation: none; } }

/* Upgrade link is now a real link to /pro/ (2.1.36) */
.password-generator a.gen-upgrade-link { display: inline-block; text-decoration: none; }
.wcd-pw input:placeholder-shown { padding-right: 52px; text-overflow: ellipsis; }

/* Secret Phrase label note + info balloon (2.1.39) */
.wcd-label-row { display: flex; align-items: center; gap: 6px; margin-bottom: .5rem; }
.wcd-label-row .gen-label { margin-bottom: 0; }
.wcd-label-note { text-transform: none; letter-spacing: 0; font-family: var(--wct-font-body); font-size: 12.5px; color: var(--wct-fg-3); }
.wcd-tip { position: relative; display: inline-flex; }
.wcd-tip-btn { background: none; border: 0; padding: 2px; color: var(--wct-fg-3); cursor: help; display: grid; border-radius: 50%; }
.wcd-tip-btn:hover, .wcd-tip-btn:focus-visible, .wcd-tip.open .wcd-tip-btn { color: var(--wct-accent); }
.wcd-tip-btn:focus-visible { outline: 2px solid var(--wct-accent); outline-offset: 1px; }
.wcd-tip-box {
  position: absolute; z-index: 5; left: 50%; top: calc(100% + 10px); transform: translateX(-50%);
  width: max-content; max-width: min(260px, 70vw); padding: 10px 12px; border-radius: 8px;
  background: #f4f7fb; color: #1d2433; font: 13px/1.45 var(--wct-font-body); text-transform: none; letter-spacing: 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.45); opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s;
  pointer-events: none;
}
.wcd-tip-box::after { content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-bottom-color: #f4f7fb; }
.wcd-tip:hover .wcd-tip-box, .wcd-tip.open .wcd-tip-box, .wcd-tip-btn:focus-visible + .wcd-tip-box { opacity: 1; visibility: visible; }
@media (max-width: 480px) { .wcd-tip-box { left: auto; right: -40px; transform: none; } .wcd-tip-box::after { left: auto; right: 44px; } }

/* Demo refresh (2.1.47): infinity logo, bigger WordCrypt button, larger biometric icons + phrase eye */
.wcd-site-mark { font-size: 0; }
.wcd-site-mark svg { display: block; }
.wcd-pw input, .wcd-pw input:placeholder-shown { min-height: 52px; }
.wcd-pw input { padding-right: 112px; }
.wcd-pw input:placeholder-shown { padding-right: 66px; }
.wcd-pw-wc { right: 6px; width: 52px; height: 42px; border-radius: 10px; }
.wcd-pw-wc img, .wcd-pw-wc img[width] { width: 27px !important; height: auto; }
.wcd-pw-eye { right: 62px; }
.wcd-with-icons .gen-input { padding-right: 132px; }
.wcd-bio { right: 6px; gap: 0; }
.wcd-bio .gen-icon-btn { padding: 7px; }
.wcd-bio .gen-icon-btn svg { width: 24px; height: 24px; display: block; }
.wcd-bio .wcd-eye { color: var(--wct-fg-3); }
.wcd-bio .wcd-eye:hover { color: var(--wct-accent); }

/* 2.1.53: secret fields are plain text fields masked by style, so browsers never offer saved passwords there */
.wc-mask { -webkit-text-security: disc; text-security: disc; }

/* 2.1.54: fingerprint and face icons (Jim's artwork, as masks so they take the accent colour); white eye icons */
.wc-ico-face { --wc-ico: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAALFElEQVR42u1da6xcVRX+1pm5I9BCSwXEhFRRa4jQooBiNTQ+QgqJjZWqkKDRmAqpxGiMj2irUX9hqQmWGCNGUEmIBsHHD21MSQRRpLaaRqvU0qrYH0Wwtc295fbOzPn8MWv1rtl3z3vOzLm3ZyUnczJn9pm112uvtfbeawv6BJKit+Uem6YiUkcOgWQJQNJrf7RPHBWSCckEBcTo0qswQnr5AwBi0ktyKQAC2ALgAr2XDpKSAPg1gAcB1EUkzZHkE8BGAKsdruiiPz8B8JiIHHeWQYbaN0XQ7leR3EZykuQU+4NV4XvHLLmi/eoXpkhuJ/lh994JZ6b7t/MkK3p/I8k9JI8Hf14jWe3ymtbf73BalQfpB8k3K24v9tCfaoQZfyF5Q2Ss7HuQBckNipyB/XGq39dI1jtcKckZbfdkDhnwVsVtRnHt1B/f7zRgyLRqxKK+NN0IQ3IJyc2BtKd6X28hAZ1gP8lX5mUwNzxILid5oE8TVA/ujUa/I3lBO2GTFpJfAnA2gJ8DeJsOOKIXg7a/BzCjv/2Fto25mTZIHxGRYyRlZK5bF9ouIiS5DMDL2jgU1rcbAbwHQBXAFQAuVBpBB2bqswqAPwJ4J4BJdVfTbqX/V8rFU4EGGOwh+b5BzVuO3Ejps91rVNJjNDIL8ZuuTK6zh+uDF3g1O0lyYzBQl0mWnDq3u3JH/KAv3fShpFfZtbuZ5K4I3ez+Jv1dqZ0tLKktPOUGG8/VXSSXuzZlnOHghYrk2Y4JtcBRSUm+2pjXTvq/FbzAGLFPg6+C8HFGTFiAqrRKIwL83ahX5IKRy0n+z43kqfPz3+3/qIC2Jnyt0iwN6Hic5FVm6mLcu8P5wt5+3V0Qv2sm2LjwMUd478zcrs8rTY1UCz7vAibj3CGSF+d9AM3buKCfu4KgLiX5FMlzVAsEbgBZomE4g6j11sLu964FKrC3BtG1wTLznpJIsOSDpqMAnnXZwgK65IFeh5SGnn6TAE7MCUBUA04Gtn9nIf0DjwU7HU0tf/RZ+02nXEylsPsDR9cVl7qhasNV9l0nBjAv+Zr5CEq7GP2m4BJHBYwekhgDClMzTk4AOFWQYzwMMMm/BM35/gJGxABLDG0BcBYaEw6FORoReP++MkLXLPQUxu0qZolPvZMG2A++pu6RTamlWWiCiNBfeXAVM8ZnCWanKxHSNXE2/2kAixxTkk7c60PaJkieFVxJv5LrZqb6nU5MIvgMK+NrdP2eo6XRdSaWilikkzGWkDugMzgDZ0FdunsryWMk/0PyBb1/vT4r9Ws2Wn3Xpr3l7a9UHP6rOB0judXjPIhpU9qdpytBDJ4guczoWja1E5EpAJtIfkPV5qCIvDDk1QuLASxF86qDcq8d0xUMiwCs0K+fEZHJPnCdUHzgcFo8LNNGEiJyguRqh+teEZk2XMuhpIrI02Fnh2iFaphdsmEeWK/vF010Pe5yKntJrgXwvHaaPZgJqmlIlSG1YY4vSsOjAJ6K0TUJGlTd5HySwaAkkasnm63ratYr8WtqT68EcI8+K40Sp26Z4McrT9dypEEuViy38dpSALeheSFUqjFMLkEJXu+UiphPcCLAPQlcvXmZC5pPUMICgSIdnaNUxEgifzUVqRsAxw1pcHEhM6CiWveSwAsZtxVIRp0TGzUDzLf+MoDtwbND6imMbOek+699AC4PHh8NcJ7/DHDR9hEAR3LkHk4D+Gs7nBeUCbIdhHmKOyLJwJFmacsjljgiZzNu4xaAwg0t4oCCAQUUDCgYUEDBgDMT5tuy8zJJFgwYbaBU0uAt1cgVC4kJ5ZwTP/E5IpLr0CglcJ1+1aosQsGAYUi+iNRJ3gbgvYrr28NAtsV9wYAhEf8jAL7tHtWc5HuC26qGAobEAFvI9TPd3vmi2/hs+61m9LLd6K/TNlJowBB5oa7yBJrngUO87wKw3zSnYMDgYObkAQA3mBeE2UJ5D6AxmVIC8KyI/Gi+anvu1VUrTjVtHBGRFyLeUlowIBs3NI1970wSRaRWaEDvxG2aHWslwbFBdRgzVsFMWLEdV+sryKg064zVALe8fAmAVygONRHZl7U9VwYnGmNchsbyGAI4LCJH81RIMFMfX1cLfz0o/biN5GLThmETPqj+e0vw3/foqvCJhU58q6NzhSvlVXNFjXaSfLkzSeXTdXX6I3pTZSqSLyW5xZViq7mgbqVF4QuZASUlymW6LchHt1af6LBVE4loTttxwlVwnAi+v5Dk50j+w9VDSoN6blePnQFhacaM0wzbXJnfWAXah0neqUXwym3wTGJVeElWdH/WGpLPRMpIeuKfJPmqrAbosKRnr4MWMrDHtnnt0UhFqXpQ/HSS5G6St5Pc1M5Oq5Zs0t/u1ra+cmE9UhFsiuT6rKS/xYbCpMkLMs+D5B1o1NAHgEdF5NNZ5FecJ1QB8GMA6/RRVQOsBI3Mp2DuXoC/AziJuWWUCeAcAK9tkdqwTtdcCuaXAD4uIgezMrnqcW0FcL3ieZ+IbD/t7bltqhcHdc1I8q6sJUPV896gRLKvTm5F72ac1LYDnyVNI5XOTeo/6sxhFv2zrbBfiuD4odPenkPiO4rgKb1qJHdn4RaGnoreX6Pu4MEA2WpQg7PdeQU197tqC4Y96AZcySoocyXLdilep3S8S0n+0EymJ2wNs2vlTfVPZBoFatCjJmk3gN0kvwLgJgAfRCMNfW3QrFtptb5NAtgL4CEAO13AV9YcUtaB15TPWyltp0IkAeD8SOORuGQ6HiQASprpvFcvkLwFjU3On0BvZ7vcjcbegwMi8odwABxhAi9p910Zs7n3HQA2oLl+xOhyIo30Q2rpApckM3W9s8f3VQN7zHZJv3GBZ8APAHxTPYmxpXfDPbVqS+kJ2sMgKNo2t7Nk3gQtRQ7nB/o1FfNlatLbp3m9vma+QrE2NOcMkKJy7ngZUC0q5w4c7Us7urdigOVWLiJ5SeNdhSb06dHNuCCsBGAajf3SAFBPIoQ3xtgZWW9UV7WooN6bC0yS1wF4g8symGA/Zz9tWhmg3PFRMAGsa1fvpoC4aVc3eDmAZZh7MFwl5JjN024OZqcsk7giy8TVApN+m3hZoce/hOdoftHPP/uQn2gs96tGBowdyrXiHJnOMKHpjs0ALkXzMZBVAH/T55zDOf3cE0wP2qed+lApNCHu8bijfz8VOYstJfknT+tWqnMNyX8FJ6faPOpnQoYV0EwLkp9sc6bku9wgHX2RTc7cF4wFTUywE/XsZXZq0BlG9LLvN8lzA8n3wpuSfEyL47Ze2eG0YLU7OTs8E9HOBF4ZWf5RdgxpdZVyTNROuJ++gnYrSf65xZnLNkO3pq30R8aCtY7grZZyHCa5UU8SvfQM04B12u/73elTtci8dp3kBhNQtAi85jBBV0msAvAFADfrCG4SH5uZeg7AfrQuIWnewG9FZLNKQpqHVIfiMqER6mp0N/O2JtI/a1PH7Gzi+0XkITcF2hNSdv+wGxNqgWpVu1yt4OGrXanj6IgPktf2cYz5TLByo+asxfPuANTKIDbRTNL3Wyz/SB0C1Q7XtLb5Z148KceANylu0130I1ylEQrg/STPG0ofg6Uj7yD5uNr+QeADOdSAtwzYp3/r0ebXx6wI2mQ9u2aEW0ZyERqbp6kRXyzf0WoMeBKNyf/JPIwBbhHA+QAeAXA1ZndnokN/EgA/BfAEgEe0KOEceg2NAfqH9CsLtI5/15lSETneC4KjYoJbGnNujynn44EHKZkLlpqliX5XzOUxnzTAMShGi77ayzgQz+ss2zj68n9bzyTT1btelgAAAABJRU5ErkJggg==); }
.wc-ico { display: block; width: 26px; height: 26px; background: currentColor;
  -webkit-mask: var(--wc-ico) center / contain no-repeat; mask: var(--wc-ico) center / contain no-repeat; }
.wcd-bio .gen-icon-btn { color: #3B97E3; }
.wcd-bio .gen-icon-btn:hover { color: #8dc0f0; }
.wcd-bio .wcd-eye, .password-generator .wcd-pin-eye { color: #ffffff; }
.wcd-bio .wcd-eye:hover, .password-generator .wcd-pin-eye:hover { color: #cfe9ff; }
.wcd-eye svg { width: 26px !important; height: 26px !important; display: block; }
.password-generator .wcd-pin-eye { padding: 7px; border-radius: 6px; }

/* 2.1.55: simpler fingerprint drawn as lines so it reads clearly at field size */
.wcd-bio svg.wc-fp { width: 26px !important; height: 26px !important; display: block; }

/* 2.1.56: biometrics get their own row under the phrase field; the field keeps only the eye; character count */
.wcd-with-icons .gen-input { padding-right: 56px; }
.wcd-count { margin-left: auto; font-size: 12px; color: var(--wct-fg-3); font-variant-numeric: tabular-nums; }
.wcd-bio-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 10px; padding: 8px 8px 8px 14px; border: 1px dashed rgba(120,170,220,.28); border-radius: 8px;
  font-size: 14px; color: var(--wct-fg-2);
}
.wcd-bio-btns { display: flex; gap: 4px; flex-shrink: 0; }
.wcd-bio-btns .gen-icon-btn { position: static; transform: none; color: #3B97E3; padding: 6px; border-radius: 8px; }
.wcd-bio-btns .gen-icon-btn:hover { color: #8dc0f0; background: rgba(77,166,255,.12); }
.wcd-bio-btns .wc-ico, .wcd-bio-btns svg.wc-fp { width: 30px !important; height: 30px !important; }
.wcd-bio-row span { font-size: 13.5px; line-height: 1.35; }
.wcd-label-row { flex-wrap: wrap; row-gap: 2px; }
.wcd-label-note, .wcd-count { white-space: nowrap; }

/* 2.1.89: "You're signed in." screen: Try it again + Back to site side by side */
.wcd-done-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.wcd-done-actions .wcd-site-btn { width: auto; padding-left: 20px; padding-right: 20px; }
a.wcd-site-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: #fff; }

/* 2.1.98: WordCrypt field icon 25% larger (27px -> 34px) */
.wcd-pw-wc { width: 56px; }
.wcd-pw-wc img, .wcd-pw-wc img[width] { width: 34px !important; }
.wcd-pw input { padding-right: 116px; }
.wcd-pw input:placeholder-shown { padding-right: 66px; }
.wcd-pw-eye { right: 66px; }

/* 2.1.100: the WordCrypt button (icon + light-blue box) pops in, no motion, shortly after the demo opens */
@keyframes wcdAppear { from { visibility: hidden; } to { visibility: visible; } }
.wcd-pw-wc { animation: wcdAppear 0s linear .6s both; }
.wcd-pw-wc.pulse { animation: wcdAppear 0s linear .6s both, wcdPulse 1.8s ease-out .6s infinite; }
@media (prefers-reduced-motion: reduce) { .wcd-pw-wc.pulse { animation: wcdAppear 0s linear .6s both; } }
/* 2.1.94: demo honesty labels */
.wcd-planned { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: #8ea0ba; border: 1px solid #2b3d58; vertical-align: 1px; }
.wcd-demo-note { display: block; margin-top: 6px; font-size: 13.5px; color: #8ea0ba; }
.wcd-bio-row span.wcd-planned { font-size: 10px; line-height: 1.5; padding: 0 6px; margin-left: 6px; white-space: nowrap; }

/* 2.1.107: Advanced Options stays visible but locked in the demo, with a "Pro version" balloon on hover/tap/focus */
.password-generator .advanced-options.wcd-locked { position: relative; }
.password-generator .advanced-options.wcd-locked::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  padding: 7px 12px; border-radius: 8px; background: #f4f7fb; color: #0b1626; font: 600 13px/1.3 var(--wct-font-body);
  white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.35); pointer-events: none; z-index: 5;
  opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s;
}
.password-generator .advanced-options.wcd-locked::before {
  content: ""; position: absolute; left: 50%; bottom: 100%; margin-left: -6px; border: 6px solid transparent;
  border-top-color: #f4f7fb; border-bottom: 0; pointer-events: none; z-index: 5; opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s;
}
@media (hover: hover) {
  .password-generator .advanced-options.wcd-locked:hover::after, .password-generator .advanced-options.wcd-locked:hover::before { opacity: 1; visibility: visible; }
}
.password-generator .advanced-options.wcd-locked.tip-on::after, .password-generator .advanced-options.wcd-locked.tip-on::before,
.password-generator .advanced-options.wcd-locked:focus-within::after, .password-generator .advanced-options.wcd-locked:focus-within::before { opacity: 1; visibility: visible; }

/* 2.1.109: PIN rule under the PIN field (4 to 8 letters or numbers; capitals and spaces ignored) */
.wcd-pin-rule { margin: 6px 0 0; font-size: 12.5px; color: var(--wct-fg-3); }
.wcd-pin-rule.bad { color: var(--wct-warn); }

/* 2.1.175: demo site is YourBankSite.example (Jim): bank-style "YB$" monogram, the address shows the .example
   extension, and the WordCrypt popup names the site so it's clear each site gets its own password. */
.wcd-site-brand { color: #14365c; }
.wcd-site-brand b { color: #b8892b; }
.wcd-site-mark { width: 52px; height: 40px; border-radius: 9px; background: linear-gradient(135deg, #0f2a4a, #1d4a7a); box-shadow: inset 0 0 0 1.5px rgba(212,175,85,.55); }
.wcd-site-mark svg { width: 52px; height: 40px; }
.wcd-yb { font: 700 15px Georgia, "Times New Roman", serif; fill: #fff; }
.wcd-yb-s { font: 700 27px Georgia, "Times New Roman", serif; fill: #d9b25c; }
.wcd-pop-site { margin: -8px 0 16px; font-size: 13.5px; color: var(--wct-fg-2, #b6c0d4); }
.wcd-pop-site b { color: #fff; font-weight: 600; }

/* 2.1.177: less space above the demo so more of the sign-in form shows (Jim, 1366x768 laptop); title on one line from 640px wide. */
.password-generator .wcd-content { padding-top: calc(64px + clamp(28px, 2.6vw, 36px)); } /* 2.1.178: same as the site pages */
.password-generator .wcd-content .gen-header { margin-bottom: 18px; }
@media (max-height: 800px) { .password-generator .wcd-content { padding-top: calc(64px + 24px); } }
@media (min-width: 640px) { .password-generator .wcd-content .gen-title { white-space: nowrap; font-size: 36px; } }