/*
 * premium.css — additive styles for the redesigned Login and Dashboard
 * pages only. Loaded via base.html's {% block extra_head %}. Reuses the
 * existing token contract from style.css (--bg, --card, --accent, --gold,
 * etc.) so both themes keep working automatically. Nothing here overrides
 * a shared selector (.panel, .btn, .jobs-table, ...) used elsewhere in the
 * app — every rule below is scoped under a page-specific class.
 *
 * Signature motif: a slow verdigris -> marigold -> gold "scan sweep",
 * echoing what the product actually does (reading a document, ink
 * settling into place). It appears once, large, on the login page, and
 * as a quiet one-shot accent on the dashboard's wallet card and
 * quick-tool tiles.
 */

/* ============================= LOGIN ============================= */

.lx-shell {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: calc(100vh - 180px);
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  background: var(--bg-elevated);
}

.lx-visual {
  position: relative;
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: #F7EFE0;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(226,150,60,0.45), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(47,143,122,0.35), transparent 55%),
    linear-gradient(155deg, var(--primary-dark) 0%, #241A2E 55%, var(--primary-dark) 100%);
}
:root:not([data-theme="dark"]) .lx-visual {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(226,150,60,0.5), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(47,143,122,0.4), transparent 55%),
    linear-gradient(155deg, #201A2C 0%, #2E2340 55%, #150F1F 100%);
}

.lx-orb { position: absolute; border-radius: 50%; filter: blur(2px); opacity: 0.5; pointer-events: none; }
.lx-orb-a { width: 300px; height: 300px; background: rgba(242,184,92,0.30); top: -90px; right: -70px; animation: lxDrift 22s ease-in-out infinite; }
.lx-orb-b { width: 240px; height: 240px; background: rgba(69,179,158,0.28); bottom: -80px; left: -60px; animation: lxDrift 26s ease-in-out infinite reverse; }
@keyframes lxDrift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(18px,-14px) scale(1.06); } }

.lx-visual-inner { position: relative; z-index: 2; max-width: 420px; }

.lx-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--gold-bright);
  background: rgba(242, 184, 92, 0.14);
  border: 1px solid rgba(242, 184, 92, 0.35);
  margin-bottom: 28px;
}
.lx-badge svg { width: 13px; height: 13px; }

.lx-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 34px; }
.lx-logo img { width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 6px 18px rgba(0,0,0,0.3); }
.lx-logo span { font-family: var(--font-heading); font-size: 20px; font-weight: 700; letter-spacing: 0.01em; }

.lx-visual h2 {
  font-family: var(--font-heading);
  font-size: 34px; line-height: 1.18; font-weight: 700;
  letter-spacing: -0.01em; margin: 0 0 14px;
}
.lx-visual .grad { background: linear-gradient(90deg, #F2CB84, #4FBBA3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lx-visual p { font-size: 15px; line-height: 1.65; color: rgba(245,243,255,0.78); margin: 0 0 30px; }

.lx-points { list-style: none; margin: 0 0 36px; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.lx-points li { display: flex; align-items: center; gap: 12px; font-size: 13.5px; font-weight: 600; color: rgba(245,243,255,0.92); }
.lx-points .pt-icon {
  width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); flex-shrink: 0;
}

/* Signature: layered document stack + scanning sweep + cycling tool names */
.lx-stage { position: relative; width: 190px; height: 132px; }
.lx-page {
  position: absolute; inset: 0; border-radius: 12px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 12px 30px rgba(0,0,0,0.28);
}
.lx-page span { position: absolute; left: 16px; right: 16px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.32); }
.lx-page-1 { transform: translate(-10px, 10px) rotate(-6deg); opacity: 0.55; }
.lx-page-2 { transform: translate(6px, 4px) rotate(3deg); opacity: 0.75; }
.lx-page-3 { transform: none; z-index: 2; }
.lx-page-3 span:nth-child(1) { top: 22px; width: 60%; }
.lx-page-3 span:nth-child(2) { top: 38px; width: 78%; background: rgba(255,255,255,0.2); }
.lx-page-3 span:nth-child(3) { top: 54px; width: 45%; background: rgba(255,255,255,0.2); }
.lx-scan-line {
  position: absolute; left: 4px; right: 4px; height: 3px; top: 0; z-index: 3; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #45B39E, #E8B85C, transparent);
  box-shadow: 0 0 14px rgba(69,179,158,0.7);
  animation: lxScan 3.2s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes lxScan { 0%,8% { top: 6px; opacity: 0; } 14% { opacity: 1; } 50% { top: 122px; opacity: 1; } 58%,100% { top: 122px; opacity: 0; } }

.lx-cycle { position: relative; height: 20px; margin-top: 14px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--gold-bright); }
.lx-cycle span { position: absolute; left: 0; opacity: 0; animation: lxCycle 10s linear infinite; }
.lx-cycle span:nth-child(1) { animation-delay: 0s; }
.lx-cycle span:nth-child(2) { animation-delay: 2s; }
.lx-cycle span:nth-child(3) { animation-delay: 4s; }
.lx-cycle span:nth-child(4) { animation-delay: 6s; }
.lx-cycle span:nth-child(5) { animation-delay: 8s; }
@keyframes lxCycle { 0% { opacity: 0; transform: translateY(4px); } 4%,16% { opacity: 1; transform: translateY(0); } 20% { opacity: 0; transform: translateY(-4px); } 100% { opacity: 0; } }

.lx-form-side { display: flex; align-items: center; justify-content: center; padding: 48px 40px; background: var(--bg-elevated); }
.lx-card { width: 100%; max-width: 380px; }
.lx-eyebrow { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.lx-card h2 { font-family: var(--font-heading); margin: 0 0 6px; font-size: 27px; font-weight: 700; letter-spacing: -0.01em; }
.lx-card .lx-sub { color: var(--text-muted); font-size: 13.5px; margin: 0 0 28px; }

.lx-field { margin-bottom: 18px; }
.lx-field label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 7px; color: var(--text); }
.lx-input-group { position: relative; display: flex; align-items: center; }
.lx-input-group .input-icon { position: absolute; left: 14px; color: var(--text-muted); display: flex; }
.lx-input-group input {
  width: 100%; padding: 13px 14px 13px 42px; border-radius: 11px;
  border: 1.5px solid var(--border); background: var(--surface-soft); color: var(--text);
  font-size: 14.5px; font-family: var(--font-body); transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.lx-input-group input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--tint); }
.lx-input-group .input-toggle-btn { position: absolute; right: 12px; background: none; border: none; color: var(--text-muted); cursor: pointer; display: flex; padding: 4px; }

.lx-field-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.lx-field-row.lx-field-row-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 480px) { .lx-field-row { grid-template-columns: 1fr; } }
.lx-field-row .lx-field { margin-bottom: 0; }

/* Signup's First/Middle/Last row was clipping ("Middle nam...") because
   the shared .lx-shell two-pane layout only ever gave the form side
   ~340-380px, well under the 460px .lx-card-signup was asking for - the
   page's own .container capped the whole shell at 900px total, so the
   larger max-width never had room to apply. Signup now opts into the
   wider .container-wide page shell (1180px, see templates/signup.html's
   main_class block) and gives its two-pane shell a form-leaning split,
   so all three name fields get enough width to show their full label
   and placeholder on one line, at every size down to the point the row
   drops to a single column on phones (480px, existing rule below). */
.lx-signup-page .lx-shell { grid-template-columns: 0.85fr 1.15fr; }
.lx-card-signup { max-width: 560px; }
@media (max-width: 1100px) { .lx-card-signup { max-width: 480px; } }
@media (max-width: 900px) { .lx-signup-page .lx-shell { grid-template-columns: 1fr; } .lx-card-signup { max-width: 560px; } }
@media (max-width: 640px) { .lx-card-signup { max-width: 420px; } }
.lx-field label .lx-optional { font-weight: 500; color: var(--text-muted); text-transform: none; }
.lx-field input:not(.lx-input-group input), .lx-field select {
  width: 100%; padding: 13px 14px; border-radius: 11px;
  border: 1.5px solid var(--border); background: var(--surface-soft); color: var(--text);
  font-size: 14.5px; font-family: var(--font-body); transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.lx-field input:not(.lx-input-group input):focus, .lx-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--tint); }
.lx-field select { cursor: pointer; }

.lx-checkbox-row { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0; }
.lx-checkbox-row input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer;
}
.lx-checkbox-row label { font-size: 13px; color: var(--text-muted); line-height: 1.45; cursor: pointer; }
.lx-checkbox-row label a { color: var(--accent); }

.lx-forgot { text-align: right; margin: -6px 0 20px; }
.lx-forgot a { font-size: 12.5px; color: var(--text-muted); }
.lx-forgot a:hover { color: var(--accent); }

.lx-submit { width: 100%; }
.lx-switch { text-align: center; margin: 22px 0 0; font-size: 13.5px; color: var(--text-muted); }

/* ===================== OAuth (Google / Facebook) ===================== */

.oauth-row { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.btn-oauth {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 16px; border-radius: 11px;
  border: 1.5px solid var(--border); background: var(--surface-soft); color: var(--text);
  font-size: 14px; font-weight: 600; font-family: var(--font-body); text-decoration: none;
  transition: border-color .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease);
}
.btn-oauth:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-oauth svg { flex-shrink: 0; }
.btn-oauth-facebook { color: #1877F2; }
:root:not([data-theme="light"]) .btn-oauth-facebook { color: #4d9fff; }

.oauth-divider { position: relative; text-align: center; margin: 0 0 22px; }
.oauth-divider::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--border);
}
.oauth-divider span {
  position: relative; background: var(--bg-elevated); padding: 0 12px;
  font-size: 12px; color: var(--text-muted); font-weight: 600;
}

/* ===================== OTP input (forgot-password) ===================== */

.otp-input { letter-spacing: 0.5em; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.otp-input::placeholder { letter-spacing: 0.5em; }

@media (max-width: 900px) {
  .lx-shell { grid-template-columns: 1fr; min-height: auto; border-radius: 18px; }
  .lx-visual { padding: 40px 26px; align-items: center; text-align: center; }
  .lx-visual-inner { max-width: 480px; }
  .lx-logo, .lx-points li { justify-content: center; }
  .lx-points li { flex-direction: column; gap: 6px; }
  .lx-stage { margin: 0 auto; }
  .lx-form-side { padding: 36px 22px 44px; }
}

/* ===================== MINI AUTH (forgot/reset password) ===================== */

.mini-auth-wrap { display: flex; justify-content: center; padding: 40px 0 20px; }
.mini-auth-card { width: 100%; max-width: 400px; text-align: center; padding: 36px 34px; }
.mini-auth-icon {
  width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 18px; display: flex;
  align-items: center; justify-content: center; color: var(--accent);
  background: var(--tint); border: 1px solid var(--tint-border);
}
.mini-auth-card .lx-field { text-align: left; }
.mini-auth-card form { margin-top: 10px; }

/* ============================ DASHBOARD ============================ */

.wallet-card {
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding: 30px 30px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 160% at 100% 0%, var(--gold-tint), transparent 60%),
    var(--card);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow);
  margin-bottom: 22px;
}
.wallet-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--accent), var(--gold));
  background-size: 200% 100%;
  animation: wcShift 6s ease-in-out infinite;
}
@keyframes wcShift { 0%,100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

.wallet-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 6px; }
.wallet-greeting { font-family: var(--font-heading); font-size: 21px; font-weight: 700; margin: 0 0 16px; }
.wallet-balance-row { display: flex; align-items: baseline; gap: 10px; }
.wallet-balance-num { font-family: var(--font-heading); font-size: 44px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; background: linear-gradient(90deg, var(--text), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wallet-balance-label { font-size: 13.5px; color: var(--text-muted); font-weight: 600; }
.wallet-badges { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
/* Per-purchase expiry breakdown (see credit_expiry.get_active_credit_lots) -
   each still-open credit pack gets its own line/pill rather than folding
   several different purchase dates into one vague "valid for 1 year"
   sentence, which stops meaning much the moment someone has bought credits
   more than once. */
.wallet-lots { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.wallet-lot {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content; font-size: 12.5px; color: var(--text-muted);
  background: var(--gold-tint); border: 1px solid var(--gold-tint-border); border-radius: 999px; padding: 3px 11px 3px 9px;
}
.wallet-lot svg { flex: none; color: var(--gold); }
.wallet-lot strong { color: var(--ink); font-weight: 700; }
.wallet-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
@media (max-width: 640px) { .wallet-actions { align-items: flex-start; width: 100%; } .wallet-card { padding: 24px 20px; } .wallet-balance-num { font-size: 36px; } }

.qt-rail-wrap { margin-bottom: 22px; }
.qt-rail-title { font-size: 13px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 12px; }
.qt-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 132px; gap: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.qt-rail a {
  display: flex; flex-direction: column; gap: 10px; padding: 16px 14px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--card); text-decoration: none; color: var(--text);
  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.qt-rail a:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.qt-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--tint); color: var(--accent); }
.qt-label { font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.qt-price { font-size: 10.5px; color: var(--text-muted); font-weight: 600; }

.converter-panel { position: relative; }
.converter-panel::before {
  content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.6;
}

.activity-panel .jobs-table { border-spacing: 0; }
.activity-panel .jobs-table th { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.activity-panel .jobs-table tr:hover td { background: var(--surface-soft); }
.activity-panel .jobs-table td, .activity-panel .jobs-table th { padding: 12px 10px; }

.dash-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .dash-grid-2 { grid-template-columns: 1fr; } }
.dash-grid-2 .panel { margin-bottom: 0; }

/* ============ Dashboard, dressed (round 23) ============
   Additive: every rule here either styles a NEW element added to
   templates/dashboard.html (the wallet's own graphic, the four-figure
   strip under it, the empty-state drawings) or deepens an existing one.
   No id, class or handler the dashboard's JavaScript uses is touched,
   and the whole page still works with none of it applied. */

/* --- The wallet card ------------------------------------------------ */
/* A ruled-paper ground under the existing warm gradient, so the card
   reads as a document rather than a coloured rectangle - the same
   engraved-paper motif the homepage hero uses, at the same weight. */
.wallet-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    repeating-linear-gradient(to right, var(--paper-line) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(to bottom, var(--paper-line) 0 1px, transparent 1px 30px);
  -webkit-mask-image: radial-gradient(120% 140% at 0% 0%, #000, transparent 70%);
  mask-image: radial-gradient(120% 140% at 0% 0%, #000, transparent 70%);
}
.wallet-left, .wallet-actions { position: relative; z-index: 1; }
.wallet-card { padding: 32px 32px 30px; }

/* The stacked-sheets-and-seal drawing. Hidden on a narrow screen, where
   the buttons need the whole width. */
.wallet-art {
  width: 104px; height: 104px; color: var(--ink); opacity: 0.9;
  margin: 0 6px 4px 0; flex: none;
}
@media (max-width: 900px) { .wallet-art { display: none; } }
.wallet-actions { align-items: center; }
@media (min-width: 641px) { .wallet-actions { align-items: flex-end; } .wallet-actions .btn { min-width: 170px; justify-content: center; } }

/* --- The four-figure strip ------------------------------------------ */
.dash-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px;
}
@media (max-width: 760px) { .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dash-stat {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 16px 14px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--card);
  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.dash-stat:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow); }
/* A tinted disc bleeding in from the corner - the same accent the tool
   cards and the "How it works" steps use, so the page reads as one set. */
.dash-stat::after {
  content: ""; position: absolute; right: -34px; top: -34px; width: 96px; height: 96px;
  border-radius: 50%; background: var(--tint); opacity: 0.5; pointer-events: none;
}
.dash-stat > * { position: relative; z-index: 1; }
.dash-stat-icon {
  width: 30px; height: 30px; border-radius: 8px; margin-bottom: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-elevated); border: 1px solid var(--tint-border); color: var(--accent);
}
.dash-stat-num {
  font-family: var(--font-heading); font-size: 27px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.dash-stat-label { font-size: 11.5px; font-weight: 600; color: var(--text-muted); line-height: 1.35; }

/* --- Quick launch --------------------------------------------------- */
/* A marigold hairline that only appears on hover, so the rail has some
   life without twelve permanently-coloured edges competing for
   attention. */
.qt-rail a { position: relative; overflow: hidden; }
.qt-rail a::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  transform: translateY(-2px); transition: transform .18s var(--ease);
}
.qt-rail a:hover::before { transform: none; }
.qt-rail a:hover .qt-icon { background: var(--gold-tint); color: var(--gold); }
.qt-icon { transition: background .18s var(--ease), color .18s var(--ease); }

/* --- Empty states --------------------------------------------------- */
/* A table with no rows is the first thing a new account sees, and a
   single grey sentence is a poor welcome. */
.dash-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; padding: 26px 16px 20px; color: var(--accent);
}
.dash-empty svg { width: 64px; height: 64px; opacity: 0.75; }
.dash-empty .dash-sub { margin: 0; max-width: 42ch; }

/* --- The converter panel -------------------------------------------- */
.converter-panel { overflow: hidden; }
/* The seal watermark, small and low-contrast, bottom-right of the panel
   that does the actual work. */
.converter-panel::after {
  content: ""; position: absolute; right: -48px; bottom: -56px; width: 200px; height: 200px;
  pointer-events: none; background-repeat: no-repeat; background-size: contain; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23A83B2C' stroke-opacity='0.10' stroke-width='2.5'%3E%3Ccircle cx='100' cy='100' r='78'/%3E%3Ccircle cx='100' cy='100' r='62' stroke-dasharray='5 7'/%3E%3Ccircle cx='100' cy='100' r='42'/%3E%3C/g%3E%3C/svg%3E");
}
.converter-panel > * { position: relative; z-index: 1; }