/* ═══════════════════════════════════════════════════════════════════════
   OperationDesk ERP — Public marketing site (home, about, contact, blog,
   invoice generator, signin/signup). Kept separate from app.css (the
   authenticated ERP shell) since this is an unauthenticated, full-width
   layout with its own header/footer instead of a sidebar.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --navy:    #0a1628;
  --navy2:   #0f2044;
  --blue:    #1a56db;
  --blue2:   #2563eb;
  --blue3:   #3b82f6;
  --blue-lt: #dbeafe;
  --accent:  #f59e0b;
  --white:   #ffffff;
  --gray50:  #f8fafc;
  --gray100: #f1f5f9;
  --gray300: #cbd5e1;
  --gray400: #94a3b8;
  --gray600: #475569;
  --gray800: #1e293b;
  --green:   #16a34a;
  --whatsapp:#25d366;
  --radius:  14px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body.pub-body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--gray800);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { max-width: 100%; }

/* ── Header ──────────────────────────────────────────────────────────── */
.pub-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.pub-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.pub-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.pub-logo-icon {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--blue2), var(--blue3));
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(37,99,235,.35);
  flex-shrink: 0;
}
.pub-logo-text { line-height: 1.1; }
.pub-logo-name { font-size: 15px; font-weight: 700; color: var(--white); letter-spacing: -.2px; }
.pub-logo-tag  { font-size: 9.5px; color: var(--gray400); font-weight: 500; }

.pub-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.pub-nav-link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gray300);
  text-decoration: none;
  transition: color .15s;
  white-space: nowrap;
}
.pub-nav-link:hover, .pub-nav-link.active { color: var(--white); }

.pub-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.pub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.pub-btn-ghost {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,.25);
}
.pub-btn-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); }
.pub-btn-solid {
  background: var(--blue2);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(37,99,235,.35);
}
.pub-btn-solid:hover { background: var(--blue); }
.pub-btn-outline {
  background: transparent;
  color: var(--blue2);
  border: 1.5px solid var(--blue3);
}
.pub-btn-outline:hover { background: var(--blue-lt); }

.pub-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--white);
  cursor: pointer;
  padding: 6px;
}
.pub-mobile-nav {
  display: none;
  flex-direction: column;
  background: var(--navy2);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 10px 24px 18px;
}
.pub-mobile-nav.open { display: flex; }
.pub-mobile-nav a {
  padding: 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray300);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.pub-mobile-nav .pub-mobile-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.pub-mobile-actions .pub-btn { flex: 1; }

@media (max-width: 900px) {
  .pub-nav, .pub-header-actions { display: none; }
  .pub-hamburger { display: flex; }
}

/* ── Footer ──────────────────────────────────────────────────────────── */
.pub-footer {
  background: var(--navy);
  color: var(--gray400);
  padding: 48px 24px 24px;
}
.pub-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.pub-footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.pub-footer-brand { max-width: 320px; }
.pub-footer-brand .pub-logo-name { font-size: 16px; }
.pub-footer-brand p { font-size: 12.5px; margin-top: 10px; line-height: 1.7; }
.pub-footer-cols {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}
.pub-footer-col h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray300);
  margin-bottom: 14px;
}
.pub-footer-col a {
  display: block;
  font-size: 13px;
  color: var(--gray400);
  text-decoration: none;
  margin-bottom: 10px;
}
.pub-footer-col a:hover { color: var(--white); }
.pub-footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 20px;
  font-size: 12px;
}

/* ── Generic content-page shell (About / Contact / Blog / Signup / Tool) ── */
.pub-page-hero {
  background: linear-gradient(160deg, #0a1628 0%, #0f2044 45%, #102a55 100%);
  color: var(--white);
  padding: 56px 24px 64px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pub-page-hero h1 { font-size: clamp(26px, 4vw, 36px); font-weight: 800; margin-bottom: 12px; letter-spacing: -.5px; position: relative; z-index: 1; }
.pub-page-hero p  { font-size: 15px; color: var(--gray400); max-width: 620px; margin: 0 auto; position: relative; z-index: 1; }

/* ── Hero illustration (shared by the homepage hero and the secondary-page
   banners below, so it only needs to be tuned in one place) ────────────── */
.hero-illust { position: relative; width: 100%; max-width: 640px; aspect-ratio: 640 / 560; margin: 0 auto; }
.hi-connectors { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hi-connectors path { fill: none; stroke: var(--blue3); stroke-width: 1.5; opacity: .55; filter: drop-shadow(0 0 4px rgba(59,130,246,.7)); }
.hi-connectors circle { fill: var(--blue3); filter: drop-shadow(0 0 4px rgba(59,130,246,.9)); }

.hi-card {
  position: absolute; z-index: 2;
  background: rgba(15,26,50,.9); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
  padding: 10px 14px; width: 152px;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.hi-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.hi-card-icon { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hi-card-label { font-size: 12px; font-weight: 700; color: var(--white); }
.hi-card-desc { font-size: 9.5px; color: var(--gray400); line-height: 1.4; margin-bottom: 6px; }
.hi-spark { width: 100%; height: 16px; display: block; }

.hi-card-production { top: 0%; left: 30%; }
.hi-card-inventory   { top: 4%; right: 0%; }
.hi-card-accounts    { top: 32%; right: -4%; }
.hi-card-reports     { top: 60%; right: 2%; }
.hi-card-sales       { top: 26%; left: -20%; }
.hi-card-purchases   { top: 60%; left: -18%; }

.hi-laptop { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-46%); width: 78%; z-index: 1; }
.hi-screen {
  background: #0b1424; border: 6px solid #1c2942; border-bottom: none;
  border-radius: 10px 10px 0 0; padding: 10px; box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
.hi-screen-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.hi-screen-brand { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; color: var(--white); }
.hi-screen-brand .dot { width: 14px; height: 14px; border-radius: 4px; background: var(--blue2); }
.hi-screen-user { display: flex; align-items: center; gap: 6px; font-size: 8px; color: var(--gray400); }
.hi-screen-avatar { width: 16px; height: 16px; border-radius: 50%; background: var(--blue3); }
.hi-screen-body { display: grid; grid-template-columns: 68px 1fr; gap: 8px; }
.hi-sidebar { display: flex; flex-direction: column; gap: 5px; }
.hi-sidebar span { font-size: 6.2px; color: var(--gray400); padding: 3px 5px; border-radius: 4px; }
.hi-sidebar span.active { background: var(--blue2); color: var(--white); font-weight: 700; }
.hi-main-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin-bottom: 6px; }
.hi-kpi { background: rgba(255,255,255,.04); border-radius: 5px; padding: 5px 6px; }
.hi-kpi .kl { font-size: 5.4px; color: var(--gray400); text-transform: uppercase; }
.hi-kpi .kv { font-size: 8px; font-weight: 800; color: var(--white); margin-top: 1px; }
.hi-kpi .kd { font-size: 5.2px; color: #4ade80; margin-top: 1px; }
.hi-main-lower { display: grid; grid-template-columns: 1.3fr 1fr; gap: 6px; }
.hi-panel { background: rgba(255,255,255,.04); border-radius: 5px; padding: 6px; }
.hi-panel-title { font-size: 5.6px; color: var(--gray300); font-weight: 700; margin-bottom: 4px; }
.hi-chart-line { width: 100%; height: 34px; display: block; }
.hi-toplist-row { display: flex; justify-content: space-between; font-size: 5.4px; color: var(--gray400); padding: 2px 0; }
.hi-toplist-row strong { color: var(--white); font-size: 5.4px; }
.hi-base { height: 14px; background: linear-gradient(180deg, #1c2942, #0f1830); border-radius: 0 0 10px 10px; position: relative; }
.hi-base::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: 34%; height: 7px; background: #0f1830; border-radius: 0 0 6px 6px; }

.hi-base-row { position: absolute; bottom: -6%; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-end; z-index: 0; padding: 0 2%; }
.hi-base-icon { width: 56px; height: 56px; opacity: .9; }

/* Below 900px there isn't room for the floating cards + connector lines
   without them overlapping or running off-screen, so show a simplified
   version: just the laptop/dashboard, centered, nothing absolutely
   positioned relative to viewport width. Placed after the base .hi-*
   rules above so it actually wins the cascade at matching widths. */
@media (max-width: 900px) {
  .hero-illust { max-width: 380px; aspect-ratio: unset; height: auto; margin: 8px auto 0; }
  .hi-connectors, .hi-card, .hi-base-row { display: none; }
  .hi-laptop { position: static; transform: none; width: 100%; }
}

/* ── Secondary-page banner illustration ──────────────────────────────────
   A cropped, faded version of the homepage hero's dashboard mockup, offset
   to one side as a background flourish. The floating module cards and
   connector SVG are dropped entirely here (there's no room in a short
   banner to place them without clutter/overlap), so only the laptop/
   dashboard piece is reused, at reduced opacity, sitting behind the
   heading/copy (which get position:relative + z-index:1 above, on
   .pub-page-hero h1/p, so they stay legible over it). */
.pub-hero-illust {
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
  width: 340px;
  max-width: 40%;
  opacity: .22;
  pointer-events: none;
  z-index: 0;
}
.pub-hero-illust .hi-laptop { position: static; transform: none; width: 100%; }
@media (max-width: 640px) {
  .pub-hero-illust {
    right: 50%;
    top: 60%;
    transform: translate(50%, -50%);
    width: 220px;
    max-width: 70%;
    opacity: .14;
  }
}

.pub-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 24px;
}
.pub-section-narrow { max-width: 760px; }

.pub-card {
  background: var(--white);
  border: 1px solid #e5e9f0;
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

/* ── Forms (Contact / Signup / Invoice Generator) ───────────────────────── */
.pub-form-row { margin-bottom: 18px; }
.pub-form-row label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gray800);
  margin-bottom: 6px;
}
.pub-form-row input,
.pub-form-row select,
.pub-form-row textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--gray300);
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--gray800);
  background: var(--gray50);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.pub-form-row textarea { resize: vertical; min-height: 110px; }
.pub-form-row input:focus,
.pub-form-row select:focus,
.pub-form-row textarea:focus {
  border-color: var(--blue2);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.pub-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .pub-form-grid-2 { grid-template-columns: 1fr; } }

.pub-alert {
  border-radius: 9px;
  padding: 12px 16px;
  font-size: 13px;
  margin-bottom: 18px;
}
.pub-alert-error   { background: #fef2f2; border: 1px solid #fca5a5; color: #b91c1c; }
.pub-alert-success { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.pub-alert-info     { background: #eff6ff; border: 1px solid #93c5fd; color: #1d4ed8; }

/* ── Pricing cards (Pricing page + homepage teaser) ─────────────────────── */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }

.price-card {
  position: relative;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}
.price-card:hover { box-shadow: 0 20px 40px rgba(10,22,40,.10); transform: translateY(-3px); }
.price-card.featured { border: 2px solid var(--blue3); box-shadow: 0 20px 40px rgba(37,99,235,.14); }

.price-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--blue2); color: var(--white);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 5px 14px; border-radius: 100px; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(37,99,235,.35);
}

.price-name { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue2); margin-bottom: 10px; }
.price-amount { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.price-amount .cur { font-size: 16px; font-weight: 700; color: var(--gray800); }
.price-amount .num { font-size: 40px; font-weight: 800; color: var(--gray800); letter-spacing: -1px; }
.price-amount .per { font-size: 13px; color: var(--gray600); }
.price-term { font-size: 12.5px; color: var(--gray600); margin-bottom: 22px; }
.price-term strong { color: var(--gray800); }

.price-features { list-style: none; padding: 0; margin: 0 0 26px; flex: 1; }
.price-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--gray800); margin-bottom: 13px; line-height: 1.5; }
.price-features .ck { width: 19px; height: 19px; border-radius: 50%; background: #dcfce7; color: #16a34a; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }

.price-cta { width: 100%; padding: 12px; text-align: center; }

.pricing-compare-note { text-align: center; font-size: 13px; color: var(--gray600); margin-top: 32px; }

.pricing-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; margin-top: 44px; }
.pricing-trust-item { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--gray600); font-weight: 600; }
.pricing-trust-item .ic { width: 30px; height: 30px; border-radius: 8px; background: var(--blue-lt); color: var(--blue2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ── Blog ────────────────────────────────────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-card {
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform .15s, box-shadow .15s;
}
.blog-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.blog-card-cover {
  height: 160px;
  background: linear-gradient(135deg, #dbeafe, #eef2ff);
  background-size: cover;
  background-position: center;
  display: flex; align-items: center; justify-content: center;
  color: var(--blue2);
  font-size: 13px;
  font-weight: 700;
}
.blog-card-body { padding: 18px 20px; }
.blog-card-body h3 { font-size: 15.5px; font-weight: 700; margin-bottom: 8px; }
.blog-card-body p  { font-size: 13px; color: var(--gray600); line-height: 1.6; }
.blog-card-meta { font-size: 11.5px; color: var(--gray400); margin-top: 12px; }

/* ── FAQ accordion (shared across home, invoice generator, etc.) ────── */
.faq-item { border: 1px solid var(--gray100); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.faq-q { width: 100%; background: var(--white); border: none; text-align: left; padding: 18px 22px; font-size: 14px; font-weight: 700; color: var(--gray800); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.faq-arrow { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--gray100); display: flex; align-items: center; justify-content: center; transition: transform .25s; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-a-inner { padding: 2px 22px 20px; font-size: 13px; color: var(--gray600); line-height: 1.75; }
.faq-item.open .faq-arrow { transform: rotate(180deg); }
.faq-item.open .faq-a { max-height: 320px; }

/* ── Trusted-by strip (shared across pages) ─────────────────────────── */
.trusted-strip { background: var(--gray50); padding: 44px 24px; border-top: 1px solid var(--gray100); }
.trusted-inner { max-width: 1000px; margin: 0 auto; text-align: center; }
.trusted-label { font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--gray400); opacity: .8; margin-bottom: 20px; }
.trusted-logos { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 32px 36px; }
.trusted-logo { font-size: 15px; font-weight: 800; color: var(--gray300); letter-spacing: .02em; line-height: 1; }
@media (max-width: 560px) { .trusted-logos { gap: 18px 26px; } }

.team-cta {
  text-align: center;
  background: var(--gray50);
  border-radius: 14px;
  padding: 32px;
}

.blog-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--gray400);
  font-size: 14px;
}

.blog-post-body { font-size: 15px; line-height: 1.8; color: var(--gray800); }
.blog-post-body p { margin-bottom: 16px; }

/* ── Signin / Signup card ────────────────────────────────────────────── */
.auth-wrap {
  min-height: calc(100vh - 68px - 240px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  background: var(--gray50);
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(10,22,40,.12);
  padding: 40px 36px;
}
.auth-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}
.auth-logo-icon {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, var(--blue), var(--blue3));
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(37,99,235,.35);
  margin-bottom: 10px;
}
.auth-brand { font-size: 18px; font-weight: 800; color: var(--navy); }
.auth-brand span { color: var(--blue2); }
.auth-title { font-size: 17px; font-weight: 700; color: var(--gray800); margin: 16px 0 2px; text-align: center; }
.auth-sub   { font-size: 12.5px; color: var(--gray400); text-align: center; margin-bottom: 24px; }

.auth-field { position: relative; margin-bottom: 16px; }
.auth-field label { display: block; font-size: 12px; font-weight: 600; color: var(--gray800); margin-bottom: 6px; }
.auth-field-icon { position: absolute; left: 12px; top: 38px; color: var(--gray400); pointer-events: none; }
.auth-input {
  width: 100%;
  padding: 11px 40px 11px 38px;
  border: 1.5px solid var(--gray300);
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--gray800);
  background: var(--gray50);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.auth-input:focus { border-color: var(--blue2); background: var(--white); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.auth-toggle { position: absolute; right: 12px; top: 38px; background: none; border: none; cursor: pointer; color: var(--gray400); padding: 2px; display: flex; }
.auth-toggle:hover { color: var(--blue2); }

.auth-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; font-size: 12px; }
.auth-remember { display: flex; align-items: center; gap: 7px; color: var(--gray600); cursor: pointer; }
.auth-forgot { font-weight: 600; color: var(--blue2); text-decoration: none; }
.auth-forgot:hover { text-decoration: underline; }

.auth-btn {
  width: 100%;
  padding: 13px;
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  color: var(--white);
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 4px 14px rgba(37,99,235,.35);
  transition: all .2s;
}
.auth-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37,99,235,.45); }

.auth-security-note {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 11.5px; color: var(--gray400); margin-top: 16px;
}
.auth-footer-link { text-align: center; font-size: 12.5px; color: var(--gray600); margin-top: 22px; }
.auth-footer-link a { color: var(--blue2); font-weight: 700; text-decoration: none; }
.auth-footer-link a:hover { text-decoration: underline; }

/* ── Invoice generator ───────────────────────────────────────────────── */
.ig-lines-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
/* Line-item tables (invoice/quotation) have too many columns to shrink
   losslessly on narrow screens, so they scroll horizontally instead of
   squeezing inputs down to unusable widths. */
.qm-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) {
  .qm-table-wrap .ig-lines-table { min-width: 560px; }
}
.ig-lines-table th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--gray600); text-align: left; padding: 10px 8px; border-bottom: 2px solid var(--gray100);
}
.ig-lines-table th.ig-col-num, .ig-lines-table td.ig-col-num { text-align: right; }
.ig-lines-table tbody tr { border-bottom: 1px solid var(--gray50); transition: background .12s; }
.ig-lines-table tbody tr:hover { background: var(--gray50); }
.ig-lines-table td { padding: 8px; vertical-align: middle; }
.ig-lines-table input {
  width: 100%;
  padding: 9px 11px;
  border: 1.5px solid var(--gray300);
  border-radius: 8px;
  font-size: 13px;
  color: var(--gray800);
  background: var(--gray50);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.ig-lines-table input:focus {
  border-color: var(--blue2);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.ig-lines-table td.ig-amount { text-align: right; font-weight: 700; color: var(--gray800); font-size: 13px; white-space: nowrap; }
.ig-remove-row {
  background: none; border: none; color: var(--gray400); cursor: pointer;
  font-size: 18px; line-height: 1; padding: 6px 8px; border-radius: 6px; transition: all .15s;
}
.ig-remove-row:hover { color: var(--blue2); background: var(--blue-lt); }

.ig-summary {
  background: var(--gray50);
  border-radius: 12px;
  padding: 18px 22px;
  margin-top: 4px;
}
.ig-summary-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--gray600); padding: 5px 0; }
.ig-summary-row.ig-total {
  border-top: 1px solid var(--gray100);
  margin-top: 8px;
  padding-top: 12px;
  font-size: 19px;
  font-weight: 800;
  color: var(--navy);
}
.ig-summary-row.ig-total strong { color: var(--blue2); }