:root {
  --bg:        #0a0c0a;
  --bg2:       #0f120f;
  --surface:   #141a14;
  --surface2:  #1a221a;
  --border:    #222e22;
  --border2:   #2a382a;
  --green:     #6abf69;
  --green-dim: rgba(106,191,105,0.10);
  --green-glow:rgba(106,191,105,0.18);
  --red:       #e05555;
  --red-dim:   rgba(224,85,85,0.10);
  --text:      #e8ede8;
  --text-2:    #8fa08f;
  --text-3:    #7a8c7a;
  --syne: 'Outfit', sans-serif;
  --mono: 'DM Mono', monospace;
  --radius: 10px;
  --radius-sm: 6px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--syne);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background-image: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(106,191,105,0.05) 0%, transparent 70%);
}

a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: var(--syne); }

/* LOGO */
.logo {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Bebas Neue', var(--syne);
  font-size: 1.6rem; font-weight: 400;
  letter-spacing: 0.05em; color: var(--text);
  margin-bottom: 2rem; text-decoration: none;
}
.logo-icon { width: 32px; height: 32px; border-radius: 0; background: none; box-shadow: none; display: block; object-fit: contain; flex-shrink: 0; }
.logo span { color: var(--green); }
.logo-tld {
  font-size: 0.7rem; color: var(--text-2); font-family: var(--mono);
  border: 1px solid var(--border); padding: 2px 7px;
  border-radius: 100px; letter-spacing: 0.04em; font-weight: 400;
}

/* CARD */
.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 100%;
  max-width: 420px;
  overflow: hidden;
}

.card-header {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 1.5rem;
  text-align: center;
}
.card-title {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 0.25rem;
}
.card-sub {
  font-size: 0.78rem;
  color: var(--text-2);
  font-weight: 400;
}

.card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* TABS */
.auth-tabs {
  display: flex;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
  margin-bottom: 0.5rem;
}
.auth-tab {
  flex: 1; background: none; border: none;
  color: var(--text-2); font-family: var(--syne);
  font-size: 0.82rem; font-weight: 600;
  padding: 8px; border-radius: 5px;
  transition: all 0.15s; cursor: pointer;
}
.auth-tab.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* FORM */
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-label {
  font-family: var(--mono); font-size: 0.65rem;
  color: var(--text-2); text-transform: uppercase;
  letter-spacing: 0.1em;
}
.form-input {
  background: var(--bg2); border: 1px solid var(--border);
  color: var(--text); font-family: var(--syne);
  font-size: 0.9rem; padding: 10px 14px;
  border-radius: var(--radius-sm); outline: none; width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(106,191,105,0.12);
}
.form-input.error { border-color: var(--red); }
.form-input::placeholder { color: var(--text-3); }

.form-hint {
  font-size: 0.65rem; color: var(--text-2);
  font-family: var(--mono); line-height: 1.4;
}
.form-error {
  font-size: 0.7rem; color: var(--red);
  font-family: var(--mono); display: none;
}
.form-error.show { display: block; }

/* SUBMIT */
.submit-btn {
  background: var(--green); border: none; color: #0a0c0a;
  font-family: var(--syne); font-size: 0.95rem; font-weight: 800;
  padding: 13px; border-radius: var(--radius-sm); width: 100%;
  transition: all 0.15s; letter-spacing: 0.01em; margin-top: 0.5rem;
}
.submit-btn:hover {
  background: #7dd67c;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px var(--green-glow);
}
.submit-btn:disabled {
  opacity: 0.5; cursor: not-allowed;
  transform: none; box-shadow: none;
}

/* DIVIDER */
.divider {
  display: flex; align-items: center; gap: 0.75rem;
  font-family: var(--mono); font-size: 0.65rem; color: var(--text-3);
}
.divider::before, .divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ALERT */
.alert {
  padding: 0.75rem 1rem; border-radius: var(--radius-sm);
  font-size: 0.78rem; line-height: 1.5;
}
/* Hidden without display:none. The alert is a live region, and a live region
   has to be in the accessibility tree before its text changes or screen
   readers miss the announcement (WCAG 4.1.3). Out of flow, too, so the
   card's gap does not open up around an empty alert. */
.alert:not(.show) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.alert.success {
  background: var(--green-dim);
  border: 1px solid rgba(106,191,105,0.3);
  color: var(--green);
}
.alert.error {
  background: var(--red-dim);
  border: 1px solid rgba(224,85,85,0.3);
  color: var(--red);
}

/* TERMS ACCEPTANCE. Unchecked by default: agreeing has to be something
   the person does, or it is not agreement. */
.terms-check {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 0.78rem; color: var(--text-2); line-height: 1.5; cursor: pointer;
}
.terms-check input {
  flex: none; width: 18px; height: 18px; margin: 1px 0 0;
  accent-color: var(--green); cursor: pointer;
}
.terms-check input[aria-invalid="true"] { outline: 2px solid var(--red); outline-offset: 2px; }
.terms-check a { color: var(--green); }
.terms-check a:hover { text-decoration: underline; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* LINKS */
.auth-link {
  font-size: 0.78rem; color: var(--text-2);
  text-align: center; line-height: 1.6;
}
.auth-link a { color: var(--green); }
.auth-link a:hover { text-decoration: underline; }

/* MFA SETUP */
.qr-container {
  background: white; border-radius: var(--radius-sm);
  padding: 1rem; text-align: center; display: none;
}
.qr-container img { max-width: 180px; }
.qr-container.show { display: block; }

.backup-codes {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 1rem;
  display: none;
}
.backup-codes.show { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.backup-code {
  font-family: var(--mono); font-size: 0.82rem;
  color: var(--green); letter-spacing: 0.05em;
  background: var(--green-dim); padding: 4px 8px;
  border-radius: 4px; text-align: center;
}

/* VIEWS */
.view { display: none; }
.view.active { display: flex; flex-direction: column; gap: 1rem; }

/* MFA ICON */
.mfa-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--green-dim); border: 1px solid rgba(106,191,105,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin: 0 auto;
}

/* PASSWORD STRENGTH */
.strength-bar {
  height: 3px; background: var(--border);
  border-radius: 2px; overflow: hidden; margin-top: 4px;
}
.strength-fill {
  height: 100%; border-radius: 2px;
  transition: width 0.3s, background 0.3s;
  width: 0%;
}

/* Footer */
.auth-footer {
  margin-top: 1.5rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--text-3);
  text-align: center;
}
.auth-footer a { color: var(--text-2); }

/* Converted from inline style="" attributes for CSP style-src */
.auth-link-right { text-align: right; margin-top: -0.5rem; }
.text-red { color: var(--red); }
.text-center { text-align: center; }
.title-bold { font-weight: 700; font-size: inherit; margin: 0 0 4px; }
.text-78-muted { font-size: 0.78rem; color: var(--text-2); }
.text-72-muted { font-size: 0.72rem; color: var(--text-2); }
.text-78-bold { font-size: 0.78rem; font-weight: 600; color: var(--text); margin: 0; }
.hint-text-82 { font-size: 0.82rem; color: var(--text-2); line-height: 1.6; }
.mono-secret { font-family: var(--mono); font-size: 0.65rem; color: #333; margin-top: 0.5rem; }
.code-input-style { text-align: center; font-size: 1.4rem; letter-spacing: 0.2em; font-family: var(--mono); }
.success-center { text-align: center; padding: 1rem 0; }
.success-emoji { font-size: 2.5rem; margin-bottom: 0.75rem; }
.success-title-style { font-family: var(--syne); font-size: 1.1rem; font-weight: 800; margin: 0 0 0.4rem; }
.success-msg-style { font-size: 0.82rem; color: var(--text-2); line-height: 1.5; }


/* ============================================================
   ACCESSIBILITY (WCAG 2.1 AA)
   ============================================================ */

/* 2.4.7 Focus Visible — the palette previously styled :focus on form
   inputs only, leaving buttons, links and the role="button" elements with
   no visible keyboard indicator at all. */
:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
  border-radius: 3px;
}

/* 2.4.1 Bypass Blocks — lets keyboard/screen-reader users skip the nav. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  background: var(--green);
  color: #0a0c0a;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 0 0 6px 0;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* role="button" elements should look interactive */
[role="button"] { cursor: pointer; }

/* 2.3.3 / prefers-reduced-motion — honour the OS setting. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.footer-disclaimer-sm { display: inline-block; max-width: 420px; margin-top: 0.5rem; line-height: 1.6; color: var(--text-3); }


/* ============================================================
   SMALL PHONES (<=480px)
   The smallest breakpoint on most pages was 600-800px, so on a 375-430px
   handset two-column grids stayed two-column and content was cramped.
   ============================================================ */
@media (max-width: 480px) {
  nav { padding: 0 0.75rem; gap: 0.5rem; }
  .logo { font-size: 1.15rem; }
  .logo-tld { display: none; }
}

/* Comfortable touch targets on touch devices (WCAG 2.5.5 / 2.5.8).
   Buttons were ~30px tall from padding alone. Scoped to coarse pointers
   so the desktop layout is untouched. */
@media (pointer: coarse) {
  button, .btn-ghost, .btn-primary, .cat-tab, .filter-chip, .quick-chip,
  .feed-tab, .chart-tab, .save-btn, .danger-btn, .submit-btn, .placement-btn {
    min-height: 44px;
  }
  input, select, textarea, .form-input, .form-select, .field-select {
    min-height: 44px;
    font-size: 16px;   /* iOS zooms the page for anything under 16px */
  }
  /* The rule above would stretch the checkbox itself; the whole label is
     the touch target instead. */
  .terms-check { min-height: 44px; align-items: center; }
  .terms-check input { min-height: 0; }
}

/* auth.css previously had no media queries at all */
@media (max-width: 480px) {
  body { padding: 1rem; }
  .auth-card { max-width: 100%; }
  .card-body { padding: 1.25rem; }
  .card-header { padding: 1.25rem 1rem; }
  .backup-codes.show { grid-template-columns: 1fr; }
  .logo { font-size: 1.35rem; }
}


/* Long unbreakable strings (product URLs, feed URLs, emails) must not push
   the layout wider than the viewport. Previously body{overflow-x:hidden}
   would have quietly clipped them; that mask has been removed now that the
   decorative glows are viewport-constrained. */
body { overflow-wrap: break-word; }
td, .card-product, .card-retailer, .search-item-detail,
.retailer-detail-meta, .deal-desc, .session-device { overflow-wrap: anywhere; }
table { max-width: 100%; }
img, canvas, svg { max-width: 100%; height: auto; }