/* ═══════════════════════════════════════════════
   FreePDFtxt — accounts, dashboard & billing
   Follows the existing tokens in style.css (--lime,
   --surface, --line2 …) so light mode works for free.
═══════════════════════════════════════════════ */

/* ── navbar: login button (replaces the Private|Fast badge) ── */
/* Outlined, not filled — it sits next to the theme toggle and matches it.
   The .shine ring animation still runs: it lives on ::before/::after
   behind the button, so removing the fill doesn't affect it. The
   background must stay opaque though, or the ring shows through. */
.login-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 100px;
  background: var(--surface); color: var(--txt);
  border: 1.5px solid var(--line2);
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: .86rem;
  white-space: nowrap; transition: all .18s;
}
.login-btn:hover {
  border-color: var(--lime); color: var(--lime);
  transform: translateY(-1px);
}
.login-btn:active { transform: translateY(0); }
/* the arrow slides into the doorway on hover */
.login-btn svg { transition: transform .22s cubic-bezier(.3,.9,.4,1.3); }
.login-btn:hover svg { transform: translateX(3px); }

/* The navbar keeps its dark glass background in light mode, so the button
   has to stay light-on-dark there — same treatment as .theme-toggle. */
[data-theme="light"] .login-btn {
  background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.16); color: #ffffff;
}
[data-theme="light"] .login-btn:hover { border-color: var(--lime); color: var(--lime); }

@media (prefers-reduced-motion: reduce) {
  .login-btn, .login-btn svg { transition: none; }
  .login-btn:hover { transform: none; }
  .login-btn:hover svg { transform: none; }
}

/* The navbar account dropdown was replaced by a plain Log out button, and
   the drawer's account box by a single Dashboard link — the navbar already
   carries Login / Log out at mobile widths, so repeating them in the
   drawer was duplicate UI. Their styles are gone with them. */

/* ── flash messages ── */
.flash-wrap {
  position: fixed; top: 88px; right: 22px; z-index: 900;
  display: flex; flex-direction: column; gap: 10px; max-width: min(400px, calc(100vw - 32px));
}
.flash {
  display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px;
  border-radius: 14px; background: var(--surface); border: 1px solid var(--line2);
  box-shadow: 0 20px 48px -20px rgba(0,0,0,0.7);
  color: var(--txt); font-size: .88rem; font-weight: 500; line-height: 1.45;
  animation: flashIn .3s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes flashIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.flash.out { opacity: 0; transform: translateX(24px); transition: all .3s; }
.flash-ic { flex: none; margin-top: 1px; }
.flash-success { border-color: rgba(46,230,107,0.4); }
.flash-success .flash-ic { color: #2ee66b; }
.flash-error { border-color: rgba(255,77,77,0.42); }
.flash-error .flash-ic { color: #ff5c5c; }
.flash-x {
  margin-left: auto; background: none; border: none; color: var(--txt3);
  font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0 2px; transition: color .15s;
}
.flash-x:hover { color: var(--txt); }
@media (max-width: 640px) { .flash-wrap { top: 76px; right: 12px; left: 12px; max-width: none; } }

/* ═══════════ auth pages (login / signup) ═══════════ */
.auth-wrap {
  min-height: calc(100vh - 320px); display: grid; place-items: center;
  padding: 120px 20px 80px;
}
.auth-card {
  width: 100%; max-width: 440px; padding: 38px 34px;
  background: var(--card); border: 1px solid var(--line2); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}
.auth-card h1 { font-size: 1.75rem; line-height: 1.2; margin-bottom: 8px; letter-spacing: -.02em; }
.auth-sub { color: var(--txt2); font-size: .93rem; margin-bottom: 26px; line-height: 1.55; }
.auth-mark {
  display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 18px;
  border-radius: 14px; background: var(--lime); color: #0a0b0d;
}

.field { margin-bottom: 16px; }
.field label {
  display: block; margin-bottom: 7px;
  font-family: 'JetBrains Mono', monospace; font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--txt3);
}
.field input[type="text"], .field input[type="email"], .field input[type="password"] {
  width: 100%; padding: 13px 15px; border-radius: 12px;
  background: var(--bg2); border: 1.5px solid var(--line2); color: var(--txt);
  font-family: inherit; font-size: .95rem; transition: all .16s;
}
.field input::placeholder { color: var(--txt3); }
.field input:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px rgba(194,240,74,0.14); }
[data-theme="light"] .field input:focus { box-shadow: 0 0 0 3px rgba(249,115,22,0.14); }
.field-pw { position: relative; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 36px; height: 36px;
  background: none; border: none; color: var(--txt3); cursor: pointer;
  border-radius: 9px; transition: color .15s, background .15s;
}
.pw-toggle:hover { color: var(--lime); background: var(--surface2); }
.pw-toggle:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
/* Both icons ship in the markup; the class decides which one shows, so
   there is no icon swap flicker and no second network request. */
.pw-toggle .pw-eye-off { display: none; }
.pw-toggle.on .pw-eye { display: none; }
.pw-toggle.on .pw-eye-off { display: block; }

.pw-meter { height: 4px; border-radius: 3px; background: var(--surface2); margin-top: 9px; overflow: hidden; }
.pw-meter span { display: block; height: 100%; width: 0; border-radius: 3px; transition: width .25s, background .25s; }
.pw-hint { font-size: .74rem; color: var(--txt3); margin-top: 6px; }

.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 22px; }
.check { display: inline-flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: .84rem; color: var(--txt2); line-height: 1.5; }
.check input { width: 17px; height: 17px; flex: none; margin-top: 1px; accent-color: var(--lime); cursor: pointer; }
.check a { color: var(--lime); text-decoration: underline; text-underline-offset: 2px; }
.auth-alt { margin-top: 22px; text-align: center; font-size: .88rem; color: var(--txt2); }
.auth-alt a { color: var(--lime); font-weight: 700; }
.auth-legal { margin-top: 18px; font-size: .74rem; color: var(--txt3); text-align: center; line-height: 1.6; }
.auth-trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px;
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: .76rem; color: var(--txt3);
}
.auth-trust span { display: inline-flex; align-items: center; gap: 6px; }

/* ═══════════ dashboard ═══════════ */
.dash { max-width: 1120px; margin: 0 auto; padding: 118px 20px 80px; }

/* ── hero ────────────────────────────────────────────────────────────
   A card rather than loose text, with a faint lime wash in the corner so
   the top of the page has something to anchor to. The old header floated
   on bare background directly above the stat cards, which made the whole
   screen read as one undifferentiated grid of boxes.                    */
.dash-hero {
  position: relative; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px; padding: 26px 28px; margin-bottom: 20px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.dash-hero::before {
  content: ''; position: absolute; inset: -60% 55% 30% -10%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(194,240,74,0.13), transparent 72%);
}
[data-theme="light"] .dash-hero::before { background: radial-gradient(closest-side, rgba(249,115,22,0.12), transparent 72%); }
.dash-hero-text, .dash-hero-side { position: relative; }
/* min-width:0 lets a long name wrap inside the flex row instead of
   forcing the row wider and shoving the buttons off the card. */
.dash-hero-text { min-width: 0; flex: 1 1 260px; }
.dash-hero h1 { font-size: 1.85rem; letter-spacing: -.025em; overflow-wrap: break-word; }
.dash-hero p { color: var(--txt2); font-size: .92rem; margin-top: 6px; }
.dash-hero-side { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dash-hello { font-family: 'JetBrains Mono', monospace; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); margin-bottom: 7px; }
.dash-head-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* legacy header, kept in case another template still uses it */
.dash-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 30px; }
.dash-head h1 { font-size: 2rem; letter-spacing: -.025em; }
.dash-head p { color: var(--txt2); font-size: .93rem; margin-top: 6px; }

.plan-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 15px; border-radius: 100px;
  background: var(--surface); border: 1px solid var(--line2); color: var(--txt2);
  font-weight: 700; font-size: .84rem; white-space: nowrap;
}
.plan-chip.is-paid {
  background: rgba(194,240,74,0.12); border-color: rgba(194,240,74,0.34); color: var(--lime);
}
[data-theme="light"] .plan-chip.is-paid { background: rgba(249,115,22,0.12); border-color: rgba(249,115,22,0.34); }

.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat {
  position: relative; overflow: hidden;
  padding: 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: border-color .2s, transform .2s;
}
/* A hairline that lights up on hover — enough to make the cards feel
   interactive without adding another visible border in the resting
   state, which would fight with the panel grid below. */
.stat::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--lime); opacity: 0; transition: opacity .2s;
}
.stat:hover::after { opacity: .75; }
.stat:hover { border-color: var(--line2); transform: translateY(-2px); }
.stat-label { font-family: 'JetBrains Mono', monospace; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--txt3); }
.stat-value { font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; margin: 10px 0 4px; color: var(--txt); }
.stat-value small { font-size: .95rem; font-weight: 600; color: var(--txt3); letter-spacing: 0; }
.stat-note { font-size: .8rem; color: var(--txt2); }
.stat-accent .stat-value { color: var(--lime); }

.meter { height: 8px; border-radius: 5px; background: var(--surface2); overflow: hidden; margin: 12px 0 9px; }
.meter span { display: block; height: 100%; border-radius: 5px; background: var(--lime); transition: width .5s cubic-bezier(.2,.8,.3,1); }
.meter.warn span { background: #ffb020; }
.meter.full span { background: #ff5c5c; }

/* ── dashboard rows ──────────────────────────────────────────────────
   Paired rows rather than two long columns. `align-items` is left at its
   default (stretch), which is the whole point: a short panel grows to
   match its partner instead of ending early and leaving a rectangle of
   bare page showing through. The old `.dash-cols` rule did the opposite
   and is what produced the large empty area beside the panels.          */
.dash-row { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
.dash-row.split      { grid-template-columns: 1fr 1fr; }
.dash-row.split-wide { grid-template-columns: 1.35fr 1fr; }
@media (max-width: 900px) {
  .dash-row.split, .dash-row.split-wide { grid-template-columns: 1fr; }
}

/* Kept so any other template still using the old class keeps working. */
.dash-cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .dash-cols { grid-template-columns: 1fr; } }

/* Flex column so a stretched panel can push its footer to the bottom
   instead of leaving the gap under the content. */
.panel {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 17px 22px; border-bottom: 1px solid var(--line);
}
.panel-head h2 {
  display: flex; align-items: center; gap: 9px;
  font-size: 1.02rem; letter-spacing: -.01em;
}
.panel-ic { flex: none; color: var(--txt3); }
.panel-head a { font-size: .8rem; color: var(--lime); font-weight: 700; white-space: nowrap; }
.panel-body { padding: 22px; flex: 1; }
.panel-body-fill { display: flex; flex-direction: column; }
.push-down { margin-top: auto; padding-top: 16px; }
.panel-lede { color: var(--txt2); font-size: .86rem; line-height: 1.6; margin-bottom: 14px; }
.link-lime { color: var(--lime); font-weight: 700; font-size: .8rem; }
.panel-empty { padding: 40px 22px; text-align: center; color: var(--txt3); font-size: .88rem; }

/* ── empty states ────────────────────────────────────────────────────
   A bare centred "No activity yet." in a tall box reads as a rendering
   failure rather than an intentional state. An icon, a reason and a way
   forward makes the same emptiness look deliberate.                     */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 168px; padding: 26px 18px; text-align: center;
}
.empty-ic {
  display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 6px;
  border-radius: 14px; color: var(--txt3);
  background: var(--bg2); border: 1px solid var(--line);
}
.empty p { color: var(--txt); font-weight: 600; font-size: .92rem; }
.empty-sub { color: var(--txt3); font-size: .82rem; line-height: 1.55; max-width: 42ch; }
.empty-cta { margin-top: 12px; padding: 9px 18px; font-size: .83rem; }
.empty-row { min-height: 150px; }

/* ── key / value list (Account panel) ── */
.kv-list { display: flex; flex-direction: column; }
.kv-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.kv-row:last-child { border-bottom: none; }
.kv-k { color: var(--txt2); font-size: .86rem; font-weight: 600; flex: none; }
.kv-v {
  font-family: 'JetBrains Mono', monospace; font-size: .76rem; color: var(--txt3);
  text-align: right; overflow-wrap: anywhere; min-width: 0;
}

/* usage bar chart */
.chart { display: flex; align-items: flex-end; gap: 9px; height: 128px; padding-top: 8px; }
.chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.chart-bar {
  width: 100%; min-height: 4px; border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, var(--lime), rgba(194,240,74,0.28));
  transition: height .6s cubic-bezier(.2,.8,.3,1);
}
[data-theme="light"] .chart-bar { background: linear-gradient(180deg, var(--lime), rgba(249,115,22,0.3)); }
.chart-bar.zero { background: var(--surface2); }
.chart-day { font-family: 'JetBrains Mono', monospace; font-size: .62rem; color: var(--txt3); }
.chart-n { font-family: 'JetBrains Mono', monospace; font-size: .68rem; color: var(--txt2); font-weight: 600; }

/* plan card */
.panel-plan { position: relative; overflow: hidden; border-color: var(--line2); }
.panel-plan::before {
  content: ''; position: absolute; inset: -40% -20% 55% -20%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(194,240,74,0.10), transparent 70%);
}
[data-theme="light"] .panel-plan::before { background: radial-gradient(closest-side, rgba(249,115,22,0.10), transparent 70%); }
.panel-plan .panel-body { position: relative; display: flex; flex-direction: column; }
.plan-cta { margin-top: auto; padding-top: 4px; }
.plan-card { text-align: center; }
.plan-badge {
  display: inline-block; padding: 5px 13px; border-radius: 100px;
  background: rgba(194,240,74,0.14); border: 1px solid rgba(194,240,74,0.3); color: var(--lime);
  font-family: 'JetBrains Mono', monospace; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
}
[data-theme="light"] .plan-badge { background: rgba(249,115,22,0.14); border-color: rgba(249,115,22,0.3); }
.plan-name { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; margin: 14px 0 6px; }
.plan-expiry { font-size: .84rem; color: var(--txt2); margin-bottom: 18px; }
.plan-feats { text-align: left; display: flex; flex-direction: column; gap: 9px; margin: 18px 0 22px; }
.plan-feats li { display: flex; gap: 10px; font-size: .86rem; color: var(--txt2); line-height: 1.45; list-style: none; }
.plan-feats svg { flex: none; margin-top: 2px; color: var(--lime); }

/* tables */
.dtable { width: 100%; border-collapse: collapse; font-size: .86rem; }
.dtable th {
  text-align: left; padding: 0 14px 11px; font-family: 'JetBrains Mono', monospace;
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--txt3); font-weight: 600;
}
.dtable td { padding: 13px 14px; border-top: 1px solid var(--line); color: var(--txt2); }
.dtable td:first-child { color: var(--txt); font-weight: 600; }
.dtable tr:hover td { background: var(--surface); }
.mono-cell { font-family: 'JetBrains Mono', monospace; font-size: .76rem; }
.pill {
  display: inline-block; padding: 4px 11px; border-radius: 100px;
  font-family: 'JetBrains Mono', monospace; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
}
.pill-paid { background: rgba(46,230,107,0.14); color: #2ee66b; border: 1px solid rgba(46,230,107,0.3); }
.pill-pending { background: rgba(255,176,32,0.14); color: #ffb020; border: 1px solid rgba(255,176,32,0.3); }
.pill-failed, .pill-cancelled { background: rgba(255,92,92,0.13); color: #ff5c5c; border: 1px solid rgba(255,92,92,0.3); }
.table-scroll { overflow-x: auto; }

.recent-list { display: flex; flex-direction: column; gap: 2px; }
.recent-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--line); }
.recent-row:last-child { border-bottom: none; }
.recent-tool { font-weight: 600; font-size: .87rem; color: var(--txt); }
.recent-time { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--txt3); }

/* ═══════════ pricing ═══════════ */
.pricing-wrap { max-width: 1120px; margin: 0 auto; padding: 118px 20px 80px; }
.pricing-head { text-align: center; max-width: 660px; margin: 0 auto 46px; }
.pricing-head h1 { font-size: clamp(2rem, 5vw, 2.9rem); letter-spacing: -.035em; margin: 14px 0 14px; }
.pricing-head p { color: var(--txt2); font-size: 1.02rem; line-height: 1.6; }
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; align-items: stretch; }
.price-card {
  display: flex; flex-direction: column; padding: 30px 26px;
  background: var(--card); border: 1px solid var(--line2); border-radius: var(--r-xl); transition: all .22s;
}
.price-card:hover { transform: translateY(-4px); border-color: var(--txt3); }
.price-card.featured { border-color: var(--lime); box-shadow: var(--glow); }
.price-tag {
  align-self: flex-start; padding: 5px 12px; border-radius: 100px; margin-bottom: 16px;
  background: var(--lime); color: #0a0b0d;
  font-family: 'JetBrains Mono', monospace; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
}
.price-name { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.price-tagline { color: var(--txt2); font-size: .87rem; margin: 8px 0 20px; line-height: 1.5; min-height: 42px; }
.price-amount { display: flex; align-items: baseline; gap: 7px; margin-bottom: 6px; }
.price-num { font-size: 2.7rem; font-weight: 800; letter-spacing: -.04em; }
.price-per { color: var(--txt3); font-size: .88rem; font-weight: 600; }
.price-alt { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: var(--txt3); margin-bottom: 24px; }
.price-feats { display: flex; flex-direction: column; gap: 11px; margin-bottom: 26px; flex: 1; }
.price-feats li { display: flex; gap: 10px; font-size: .88rem; color: var(--txt2); line-height: 1.45; list-style: none; }
.price-feats svg { flex: none; margin-top: 2px; color: var(--lime); }
.price-feats li.no { color: var(--txt3); }
.price-feats li.no svg { color: var(--txt3); opacity: .6; }
.price-cta { margin-top: auto; }
.price-current {
  display: block; width: 100%; text-align: center; padding: 13px;
  border-radius: 100px; border: 1.5px dashed var(--line2); color: var(--txt3);
  font-weight: 700; font-size: .88rem;
}
.pay-methods {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
  margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--line);
}
.pay-chip {
  padding: 8px 15px; border-radius: 100px; background: var(--surface);
  border: 1px solid var(--line2); color: var(--txt2);
  font-family: 'JetBrains Mono', monospace; font-size: .74rem; font-weight: 600;
}
.gateway-note { text-align: center; color: var(--txt3); font-size: .82rem; margin-top: 16px; }
/* Same problem the verify bar had: a 10%-opacity amber wash disappears
   against the light theme's near-white page, leaving pale text on pale
   background. Solid deep amber instead, so the notice reads as a notice
   in both themes. Matched to .verify-bar so the two never look like two
   different systems. */
.demo-banner {
  max-width: 760px; margin: 0 auto 34px; padding: 14px 20px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(120,72,8,0.55), rgba(96,58,6,0.55));
  border: 1px solid rgba(255,176,32,0.42);
  box-shadow: 0 6px 22px rgba(0,0,0,0.28);
  color: #ffca6a; font-size: .86rem; text-align: center; line-height: 1.55;
}
[data-theme="light"] .demo-banner {
  background: linear-gradient(180deg, #7a4a08, #5f3a06);
  border-color: rgba(255,176,32,0.5);
  color: #ffd489;
}
.demo-banner strong { color: #ffe0a8; }

/* ═══════════ payment result / demo checkout / invoice ═══════════ */
.result-wrap { min-height: calc(100vh - 320px); display: grid; place-items: center; padding: 120px 20px 80px; }
.result-card {
  width: 100%; max-width: 500px; padding: 42px 34px; text-align: center;
  background: var(--card); border: 1px solid var(--line2); border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
}
.result-ic { display: inline-grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; margin-bottom: 22px; }
.result-ok  { background: rgba(46,230,107,0.14); color: #2ee66b; border: 1px solid rgba(46,230,107,0.34); }
.result-bad { background: rgba(255,92,92,0.12); color: #ff5c5c; border: 1px solid rgba(255,92,92,0.32); }
.result-card h1 { font-size: 1.6rem; letter-spacing: -.02em; margin-bottom: 12px; }
.result-card p { color: var(--txt2); font-size: .93rem; line-height: 1.6; }
.result-meta {
  margin: 26px 0; padding: 18px; border-radius: 14px;
  background: var(--bg2); border: 1px solid var(--line); text-align: left;
}
.result-meta div { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; font-size: .85rem; }
.result-meta dt, .result-meta .k { color: var(--txt3); }
.result-meta .v { color: var(--txt); font-weight: 600; font-family: 'JetBrains Mono', monospace; font-size: .8rem; }
.result-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }

.invoice-wrap { max-width: 760px; margin: 0 auto; padding: 118px 20px 80px; }
.invoice-paper { padding: 40px; background: var(--card); border: 1px solid var(--line2); border-radius: var(--r-lg); }
.invoice-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.invoice-top h1 { font-size: 1.5rem; letter-spacing: -.02em; }
.invoice-rows { margin: 26px 0; }
.invoice-rows div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.invoice-rows div:last-child { border-bottom: none; }
.invoice-total { display: flex; justify-content: space-between; padding-top: 18px; border-top: 2px solid var(--line2); font-size: 1.15rem; font-weight: 800; }
@media print {
  .header, .footer, .trust-strip, .invoice-actions, .flash-wrap { display: none !important; }
  .invoice-wrap { padding: 0; }
  .invoice-paper { border: none; }
}

@media (max-width: 860px) {
  .login-btn { padding: 8px 15px; font-size: .82rem; }
  .dash, .pricing-wrap, .invoice-wrap { padding-top: 100px; }
  .dash-hero { padding: 22px 20px; }
  .dash-hero h1 { font-size: 1.55rem; }
  .dash-hero-side { width: 100%; justify-content: space-between; }
  .auth-card { padding: 30px 22px; }
}

/* ── "Your limits" grid on the dashboard ── */
.limit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.limit-grid > div {
  padding: 14px 16px; border-radius: 13px;
  background: var(--bg2); border: 1px solid var(--line);
}
.limit-n { display: block; font-size: 1.22rem; font-weight: 800; letter-spacing: -.02em; color: var(--txt); }
.limit-l {
  display: block; margin-top: 3px; font-family: 'JetBrains Mono', monospace;
  font-size: .64rem; letter-spacing: .09em; text-transform: uppercase; color: var(--txt3);
}
.recent-badge {
  margin-left: 7px; padding: 2px 8px; border-radius: 100px;
  background: var(--surface2); border: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace; font-size: .6rem; color: var(--txt3); font-weight: 600;
}

.limit-intro { color: var(--txt2); font-size: .85rem; line-height: 1.6; margin-bottom: 16px; }
.limit-intro strong { color: var(--lime); }

/* pricing: always-free tools callout */
.free-callout {
  max-width: 900px; margin: 0 auto 30px; padding: 16px 22px; border-radius: 16px;
  background: rgba(194,240,74,0.08); border: 1px solid rgba(194,240,74,0.26);
  color: var(--txt2); font-size: .87rem; line-height: 1.7; text-align: center;
}
.free-callout strong { display: block; color: var(--lime); margin-bottom: 5px; font-size: .92rem; }
[data-theme="light"] .free-callout { background: rgba(249,115,22,0.08); border-color: rgba(249,115,22,0.28); }

/* ── signed-in corner: logout button ── */
.logout-form { margin: 0; display: inline-flex; }
.logout-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 100px; cursor: pointer;
  background: var(--surface); color: var(--txt);
  border: 1.5px solid var(--line2);
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: .86rem;
  white-space: nowrap; transition: all .18s;
}
.logout-btn:hover { border-color: #ff6b6b; color: #ff6b6b; transform: translateY(-1px); }
.logout-btn:active { transform: translateY(0); }
.logout-btn svg { transition: transform .22s cubic-bezier(.3,.9,.4,1.3); }
.logout-btn:hover svg { transform: translateX(3px); }
[data-theme="light"] .logout-btn {
  background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.16); color: #ffffff;
}
[data-theme="light"] .logout-btn:hover { border-color: #ff6b6b; color: #ff6b6b; }
/* The signed-in nav carries an extra Dashboard link and a wider button
   than "Login", so it runs out of room sooner. Drop the label and keep
   the icon before the tool menus start wrapping to two lines. The title
   and aria-label keep it clear for screen readers and on hover. */
@media (max-width: 1600px) {
  .logout-btn { padding: 9px; width: 40px; height: 40px; justify-content: center; gap: 0; }
  .logout-btn .logout-label { display: none; }
}
@media (max-width: 860px) { .logout-btn { padding: 8px 15px; font-size: .82rem; } }
@media (prefers-reduced-motion: reduce) {
  .logout-btn, .logout-btn svg { transition: none; }
  .logout-btn:hover, .logout-btn:hover svg { transform: none; }
}

/* ═══════════ pricing: monthly / yearly toggle ═══════════ */
.cycle-toggle {
  display: inline-flex; gap: 4px; padding: 4px; margin: 0 auto 28px;
  border-radius: 100px; background: var(--surface); border: 1px solid var(--line2);
}
.cycle-toggle-wrap { display: flex; justify-content: center; }
.cycle-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 100px; border: none; cursor: pointer;
  background: transparent; color: var(--txt2);
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: .88rem;
  transition: background .18s, color .18s;
}
.cycle-btn:hover { color: var(--txt); }
.cycle-btn.is-on { background: var(--lime); color: #0a0b0d; }
.cycle-btn.is-on .cycle-save { background: rgba(10,11,13,0.14); color: #0a0b0d; }
.cycle-save {
  padding: 3px 9px; border-radius: 100px;
  background: rgba(194,240,74,0.16); color: var(--lime);
  font-family: 'JetBrains Mono', monospace; font-size: .62rem;
  letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
}
[data-theme="light"] .cycle-save { background: rgba(249,115,22,0.16); }
.cycle-btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

/* Both price variants ship in the HTML; the container's data-cycle picks
   one. No layout shift and no request when the toggle is clicked. */
.price-grid[data-cycle="month"] .cycle-year { display: none; }
.price-grid[data-cycle="year"]  .cycle-month { display: none; }
.price-grid[data-cycle="year"] .price-amount.cycle-year { display: flex; }
.price-strike {
  color: var(--txt3); font-size: .95rem; font-weight: 600;
  text-decoration: line-through; text-decoration-thickness: 1.5px;
}
.feat-bonus span { color: var(--lime) !important; font-weight: 600; }
.renew-year { margin-top: 10px; }

/* Two cards look stranded across a 1120px container. */
.price-grid.two-up { max-width: 780px; margin-left: auto; margin-right: auto; }

@media (prefers-reduced-motion: reduce) { .cycle-btn { transition: none; } }

/* ── coupon redemption form ── */
.coupon-form { display: flex; gap: 9px; flex-wrap: wrap; }
.coupon-input {
  flex: 1 1 140px; min-width: 0; padding: 12px 14px; border-radius: 12px;
  background: var(--bg2); border: 1.5px solid var(--line2); color: var(--txt);
  font-family: 'JetBrains Mono', monospace; font-size: .9rem;
  letter-spacing: .08em; text-transform: uppercase; transition: all .16s;
}
.coupon-input::placeholder { color: var(--txt3); letter-spacing: .08em; }
.coupon-input:focus {
  outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px rgba(194,240,74,0.14);
}
[data-theme="light"] .coupon-input:focus { box-shadow: 0 0 0 3px rgba(249,115,22,0.14); }
.coupon-form .btn { flex: 0 0 auto; }

/* payment being confirmed — not an error, so not red.
   Same solid amber as .demo-banner and .verify-bar. */
.result-wait {
  background: linear-gradient(180deg, rgba(120,72,8,0.55), rgba(96,58,6,0.55));
  color: #ffca6a; border: 1px solid rgba(255,176,32,0.42);
}
[data-theme="light"] .result-wait {
  background: linear-gradient(180deg, #7a4a08, #5f3a06);
  border-color: rgba(255,176,32,0.5); color: #ffd489;
}

/* ── unconfirmed email banner ──────────────────────────────────────────
   Was a full-bleed strip on a near-transparent amber wash, which read as
   part of the page chrome and washed out badly in light mode — the third
   screenshot is almost white on white.

   Now it is a contained card: max-width matches the dashboard's 1120px
   container so its edges line up with the panels underneath, rounded to
   match them, and on a solid deep amber that holds its colour in both
   themes instead of depending on what is behind it. */
.verify-bar {
  position: relative; z-index: 300;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: wrap; padding: 13px 22px;
  max-width: 1120px; margin: 84px auto 0; width: calc(100% - 40px);
  background: linear-gradient(180deg, rgba(120,72,8,0.55), rgba(96,58,6,0.55));
  border: 1px solid rgba(255,176,32,0.42);
  border-radius: var(--r-lg);
  box-shadow: 0 6px 22px rgba(0,0,0,0.28);
  color: #ffca6a; font-size: .85rem; line-height: 1.5; text-align: center;
}
[data-theme="light"] .verify-bar {
  background: linear-gradient(180deg, #7a4a08, #5f3a06);
  border-color: rgba(255,176,32,0.5);
  color: #ffd489;
}
.verify-bar strong { color: #ffe0a8; }
.verify-bar-btn {
  padding: 6px 15px; border-radius: 100px; white-space: nowrap;
  border: 1px solid rgba(255,201,92,0.55); color: #ffd489;
  font-weight: 700; font-size: .8rem; transition: all .16s;
}
.verify-bar-btn:hover { background: rgba(255,201,92,0.18); color: #fff1d4; }
/* The banner sits under the fixed navbar, so anything that already
   compensated for the navbar must not double up. The dashboard and the
   other account pages clear the navbar with padding-top rather than a
   margin, so they need their own reset — without it the banner pushes a
   second navbar-height gap above the content. */
.verify-bar ~ main > *:first-child { margin-top: 0; }
.verify-bar ~ main .dash,
.verify-bar ~ main .pricing-wrap,
.verify-bar ~ main .invoice-wrap { padding-top: 26px; }
@media (max-width: 640px) {
  .verify-bar { margin-top: 72px; font-size: .8rem; padding: 12px 16px; }
}