: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);
  --gold:      #c9a84c;
  --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; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: var(--syne); }

/* NAV */
nav {
  position: sticky; top: 0; z-index: 200;
  background: rgba(10,12,10,0.85); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  height: 64px; display: flex; align-items: center; padding: 0 2rem; gap: 2rem;
}
.logo { display: flex; align-items: center; gap: 10px; font-family: 'Bebas Neue', var(--syne); font-size: 1.6rem; letter-spacing: 0.05em; color: var(--text); flex-shrink: 0; font-weight: 400;}
.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; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }
.btn-ghost { background: none; border: 1px solid var(--border2); color: var(--text-2); font-size: 0.82rem; font-weight: 500; padding: 7px 16px; border-radius: var(--radius-sm); transition: all 0.15s; }
.btn-ghost:hover { border-color: var(--red); color: var(--red); }
.btn-primary { background: var(--green); border: none; color: #0a0c0a; font-size: 0.82rem; font-weight: 700; padding: 8px 18px; border-radius: var(--radius-sm); transition: all 0.15s; }
.btn-primary:hover { background: #7dd67c; }

/* LAYOUT */
.page-wrap {
  max-width: 1000px; margin: 0 auto; padding: 2rem;
  display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; align-items: start;
}

/* SIDEBAR NAV */
.account-nav {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; position: sticky; top: 80px;
}
.account-nav-header {
  padding: 1.25rem; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 0.75rem;
}
.avatar {
  width: 40px; height: 40px; 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-family: var(--syne); font-size: 1rem; font-weight: 700; color: var(--green);
  flex-shrink: 0;
}
.nav-user-name { font-weight: 700; font-size: 0.88rem; color: var(--text); }
.nav-user-email { font-size: 0.68rem; color: var(--text-2); font-family: var(--mono); margin-top: 1px; }

.nav-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem; color: var(--text-2);
  font-size: 0.82rem; font-weight: 500; cursor: pointer;
  transition: all 0.12s; border-left: 2px solid transparent;
  border-bottom: 1px solid var(--border);
}
.nav-item:last-child { border-bottom: none; }
.nav-item:hover { color: var(--text); background: var(--surface2); }
.nav-item.active { color: var(--green); border-left-color: var(--green); background: var(--green-dim); }
.nav-item .nav-icon { font-size: 1rem; flex-shrink: 0; }

/* PANELS */
.panel { display: none; flex-direction: column; gap: 1.25rem; }
.panel.active { display: flex; }

.panel-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.panel-header {
  background: var(--bg); border-bottom: 1px solid var(--border);
  padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between;
}
.panel-title { font-family: var(--syne); font-size: 0.92rem; font-weight: 700; margin: 0; }
.panel-sub { font-size: 0.72rem; color: var(--text-2); margin-top: 2px; }
.panel-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }

/* FORM */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group.full { grid-column: span 2; }
.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.88rem; 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:disabled { opacity: 0.5; cursor: not-allowed; }
.form-hint { font-size: 0.65rem; color: var(--text-2); font-family: var(--mono); }

/* BUTTONS */
.save-btn {
  background: var(--green); border: none; color: #0a0c0a;
  font-family: var(--syne); font-size: 0.88rem; font-weight: 700;
  padding: 10px 24px; border-radius: var(--radius-sm); transition: all 0.15s;
}
.save-btn:hover { background: #7dd67c; transform: translateY(-1px); box-shadow: 0 4px 16px var(--green-glow); }
.save-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.danger-btn {
  background: none; border: 1px solid var(--red); color: var(--red);
  font-family: var(--syne); font-size: 0.82rem; font-weight: 600;
  padding: 8px 18px; border-radius: var(--radius-sm); transition: all 0.15s;
}
.danger-btn:hover { background: var(--red-dim); }

/* ALERT */
.alert { padding: 0.75rem 1rem; border-radius: var(--radius-sm); font-size: 0.78rem; line-height: 1.5; }
/* Hidden without display:none. Each 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, so the panel's
   gap does not open up around an empty alert. */
.alert:not(.show), .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;
}
.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); }

/* MFA */
.mfa-status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem; background: var(--bg); border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.mfa-status-label { font-size: 0.88rem; font-weight: 600; }
.mfa-badge {
  font-family: var(--mono); font-size: 0.65rem; padding: 3px 10px;
  border-radius: 100px; font-weight: 600; letter-spacing: 0.06em;
}
.mfa-badge.enabled { background: var(--green-dim); color: var(--green); border: 1px solid rgba(106,191,105,0.3); }
.mfa-badge.disabled { background: var(--red-dim); color: var(--red); border: 1px solid rgba(224,85,85,0.3); }

.qr-wrap { text-align: center; padding: 1rem; background: white; border-radius: var(--radius-sm); }
.qr-wrap img { max-width: 180px; }

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

/* SAVED SEARCHES */
.search-item {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0.85rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.search-item-name { font-weight: 600; font-size: 0.85rem; }
.search-item-detail { font-size: 0.72rem; color: var(--text-2); margin-top: 2px; font-family: var(--mono); }
.delete-btn {
  background: none; border: none; color: var(--text-2);
  font-size: 1rem; padding: 4px 8px; border-radius: 4px;
  transition: all 0.12s;
}
.delete-btn:hover { color: var(--red); background: var(--red-dim); }

/* PRICE ALERTS */
.alert-item {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0.85rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.alert-caliber { font-weight: 600; font-size: 0.85rem; }
.alert-target { font-family: var(--mono); font-size: 0.72rem; color: var(--green); margin-top: 2px; }

/* SESSIONS */
.session-item {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0.85rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.session-device { font-size: 0.82rem; font-weight: 600; }
.session-meta { font-size: 0.68rem; color: var(--text-2); font-family: var(--mono); margin-top: 2px; }
.session-current {
  font-family: var(--mono); font-size: 0.6rem; color: var(--green);
  background: var(--green-dim); padding: 2px 8px; border-radius: 100px;
}

/* EMPTY STATE */
.empty-state {
  padding: 2.5rem; text-align: center;
  font-size: 0.82rem; color: var(--text-2);
}
.empty-icon { font-size: 2rem; margin-bottom: 0.75rem; opacity: 0.4; }

/* ADD FORM */
.add-form {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 1rem;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.add-form-title { font-size: 0.82rem; font-weight: 600; margin-bottom: 0.25rem; }
.add-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.form-select {
  background: var(--bg2); border: 1px solid var(--border); color: var(--text);
  font-family: var(--syne); font-size: 0.85rem; padding: 9px 12px;
  border-radius: var(--radius-sm); outline: none; width: 100%;
  appearance: none; -webkit-appearance: none;
}
.form-select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(106,191,105,0.12); }

/* 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%; }

@media (max-width: 768px) {
  .page-wrap { grid-template-columns: 1fr; }
  .account-nav { position: static; }
  .form-row, .add-form-row { grid-template-columns: 1fr; }
  .form-group.full { grid-column: span 1; }
}

/* Converted from inline style="" attributes for CSP style-src */
.hidden { display: none; }
.flex-col { display: flex; flex-direction: column; gap: 1rem; }
.hidden-flex-col { display: none; flex-direction: column; gap: 1rem; }
.flex-end-row { display: flex; justify-content: flex-end; }
.hint-sm { font-size: 0.72rem; color: var(--text-2); margin-top: 2px; }
.hint-text { font-size: 0.78rem; color: var(--text-2); line-height: 1.6; }
.hint-text-82 { font-size: 0.82rem; color: var(--text-2); line-height: 1.6; }
.hidden-note-82 { display: none; font-size: 0.82rem; color: var(--text-2); line-height: 1.6; }
.text-78-muted { font-size: 0.78rem; color: var(--text-2); }
.text-82-muted { font-size: 0.82rem; color: var(--text-2); }
.text-82-bold { font-size: 0.82rem; font-weight: 600; }
.mono-hint-sm { font-size: 0.72rem; color: var(--text-2); font-family: var(--mono); }
.mono-hint-xs { font-size: 0.68rem; color: var(--text-2); font-family: var(--mono); }
.code-input-style { text-align: center; font-size: 1.4rem; letter-spacing: 0.2em; font-family: var(--mono); }
.align-start { align-self: flex-start; }
.align-start-mt { align-self: flex-start; margin-top: 0.5rem; }
.text-red { color: var(--red); }


/* ============================================================
   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;
  }
}

.site-footer-sm { max-width: 1000px; margin: 0 auto; padding: 1.5rem 2rem 2rem; text-align: center; font-family: var(--mono); font-size: 0.65rem; color: var(--text-3); line-height: 1.6; }
.footer-disclaimer-sm { color: var(--text-3); }
/* Anchors inherit colour globally, so without this the footer legal
   links are indistinguishable from the text around them. */
.site-footer-sm a { color: var(--text-2); }
.site-footer-sm a:hover { color: var(--green); }


/* ============================================================
   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 */
  }
}

/* account had no breakpoint below 768px at all */
@media (max-width: 560px) {
  .page-wrap { padding: 1rem; gap: 1rem; }
  .form-row { grid-template-columns: 1fr; }
  .form-group.full { grid-column: span 1; }
  .backup-grid { grid-template-columns: 1fr; }
  nav { padding: 0 0.75rem; gap: 0.5rem; }
  .nav-right { gap: 0.4rem; }
  .btn-ghost { padding: 7px 10px; font-size: 0.75rem; }
  .panel-header { flex-wrap: wrap; gap: 0.5rem; }
}


/* 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; }


/* ============================================================
   FOOTER
   Appended last so it overrides whatever this sheet defined earlier --
   every page used to carry its own footer, and they had drifted into
   five different layouts with four different disclaimers.
============================================================ */
footer {
  border-top: 1px solid var(--border);
  padding: 3rem 2rem 2rem;
  text-align: left;
  font-family: var(--dm, var(--syne));
  font-size: 1rem;
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto 2.5rem;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
.footer-logo-size { font-size: 1.15rem; }
.footer-brand-desc {
  font-size: 0.78rem;
  color: var(--text-2);
  line-height: 1.6;
  margin-top: 0.75rem;
  max-width: 220px;
}
.footer-col-title {
  font-family: var(--syne);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.75rem;
  letter-spacing: 0.02em;
}
.footer-links-list { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; margin: 0; padding: 0; }
.footer-links-list a { font-size: 0.78rem; color: var(--text-2); transition: color 0.12s; }
.footer-links-list a:hover { color: var(--green); }
.footer-bottom {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.footer-copy { font-size: 0.72rem; color: var(--text-3); font-family: var(--mono); flex-shrink: 0; }
.footer-disclaimer { font-size: 0.68rem; color: var(--text-3); max-width: 500px; line-height: 1.5; text-align: left; }
.footer-disclaimer strong { color: var(--text-2); }
.footer-disclaimer a { color: var(--text-2); text-decoration: underline; }

@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 560px) {
  footer { padding: 2rem 1rem 1.5rem; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
}

/* Links now carry these classes directly instead of wrapping a <button>. */
a.btn-ghost, a.btn-primary { display: inline-block; text-align: center; text-decoration: none; }