:root {
  /* Logo colours — navy blue (B dark), royal blue (B bright), vivid green (arrow) */
  --bg: #f0f4ff;
  --surface: #ffffff;
  --surface-soft: #f7f9ff;
  --surface-tint: #edfaf3;
  --sidebar: #0b3591;
  --sidebar-soft: #1652cc;
  --line: #dde3f0;
  --line-strong: #c4cde0;
  --ink: #0e1f3d;
  --ink2: #5b6b88;
  --ink3: #8fa0b8;
  --muted: #5b6b88;
  --accent: #2060e8;
  --accent-strong: #1348c8;
  --accent-soft: #eef3ff;
  --teal: #22c55e;
  --teal-soft: #f0fdf4;
  --success: #22c55e;
  --success-soft: #f0fdf4;
  --warning: #d97706;
  --warning-soft: #fffbeb;
  --danger: #bf342d;
  --danger-soft: #fdebea;
  --blue: #2060e8;
  --blue-soft: #eef3ff;
  --shadow: 0 10px 24px rgba(11, 53, 145, 0.10);
  --shadow-sm: 0 2px 8px rgba(11, 53, 145, 0.07);
  --radius: 8px;
  --radius-lg: 12px;
  --chart-1: #2060e8;
  --chart-2: #22c55e;
  --chart-3: #f59e0b;
  --chart-4: #60a5fa;
  --chart-5: #86efac;
}

* {
  box-sizing: border-box;
}

[data-action] { cursor: pointer; }

.no-transitions, .no-transitions * {
  transition: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  transition: background-color .22s ease, color .22s ease;
}

/* ── Auth Overlay — 3-view system ────────────────────────────────────────── */
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--surface);
}

.auth-view {
  position: absolute;
  inset: 0;
  overflow-y: auto;
}
.auth-view--hidden { display: none !important; }

/* ── Landing page nav ── */
.lp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 56px;
  background: #0b3591;
  position: sticky;
  top: 0;
  z-index: 10;
}
.lp-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
}
.lp-nav-brand img {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: rgba(255,255,255,0.15);
  padding: 4px;
  object-fit: contain;
}
.lp-nav-right { display: flex; align-items: center; gap: 10px; }
.lp-nav-signin {
  height: 38px; padding: 0 18px;
  background: transparent;
  color: rgba(255,255,255,0.85);
  font-size: 14px; font-weight: 600;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.lp-nav-signin:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.5); }
.lp-nav-getstarted {
  height: 38px; padding: 0 18px;
  background: var(--teal);
  color: #fff;
  font-size: 14px; font-weight: 700;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s;
}
.lp-nav-getstarted:hover { background: #1aad52; }

/* Landing scrollable body */
.lp-left { background: var(--surface); }

/* Hero */
.lp-hero {
  padding: 80px 56px 90px;
  background: linear-gradient(165deg, #0f42b8 0%, #0b3591 28%, #082070 65%, #060e38 100%);
  position: relative;
  overflow: hidden;
  text-align: left;
}
.lp-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 48px;
  align-items: center;
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.lp-hero-left { display: flex; flex-direction: column; align-items: flex-start; }
.lp-hero-right { display: flex; align-items: center; justify-content: flex-end; }
.lp-hero::before {
  content: '';
  position: absolute;
  width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(circle, rgba(32,96,232,0.30) 0%, transparent 65%);
  top: -200px; right: -80px; pointer-events: none;
}
.lp-hero::after {
  content: '';
  position: absolute;
  width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(34,197,94,0.18) 0%, transparent 65%);
  bottom: -80px; left: 10%; pointer-events: none;
}
.lp-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(34,197,94,0.18);
  color: #4ade80;
  border: 1px solid rgba(34,197,94,0.32);
  padding: 5px 16px; border-radius: 20px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px;
  margin-bottom: 20px; position: relative; z-index: 1;
  overflow: hidden; isolation: isolate; align-self: flex-start;
}
.lp-hero-eyebrow::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
  background-size: 220% 100%; background-position: 160% 0;
  animation: badge-shimmer 4.2s ease-in-out infinite;
  pointer-events: none;
}
.lp-hero-h1 {
  font-size: 56px; font-weight: 900;
  color: #fff; line-height: 1.06;
  margin: 0 0 22px; letter-spacing: -2px;
  position: relative; z-index: 1;
}
.lp-hero-body {
  font-size: 17px; color: rgba(255,255,255,0.72);
  line-height: 1.75; margin: 0 0 32px;
  max-width: 500px; position: relative; z-index: 1;
}
.lp-hero-cta {
  display: flex; align-items: center; justify-content: flex-start;
  flex-wrap: wrap;
  gap: 14px; margin-bottom: 16px; position: relative; z-index: 1;
}

.lp-auth-rule {
  max-width: 560px;
  margin: 0 0 28px;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.70);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  position: relative;
  z-index: 1;
}
/* Module icons row */
.lp-hero-modules {
  display: flex; flex-wrap: wrap; gap: 18px;
  margin-bottom: 32px; position: relative; z-index: 1;
}
.lp-hero-module {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.lp-hero-module-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.88);
  transition: background 0.15s;
}
.lp-hero-module-icon svg { width: 20px; height: 20px; }
.lp-hero-module-icon:hover { background: rgba(255,255,255,0.20); }
.lp-hero-module span:last-child {
  font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.60);
  text-transform: uppercase; letter-spacing: 0.4px;
}

.lp-auth-notice {
  max-width: 640px;
  min-height: 0;
  margin: -28px auto 36px;
  color: #fed7aa;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
  position: relative;
  z-index: 1;
}

.lp-auth-notice:empty {
  display: none;
}
.cta-ring-wrap { position: relative; display: inline-flex; isolation: isolate; }
.cta-ring-wrap::before, .cta-ring-wrap::after {
  content: ''; position: absolute; inset: -2px; z-index: -1;
  border: 2px solid rgba(34,197,94,0.55); border-radius: 11px;
  animation: cta-ring-pulse 2.8s ease-out infinite;
  pointer-events: none;
}
.cta-ring-wrap::after { animation-delay: 1.4s; }
@keyframes cta-ring-pulse {
  0%   { transform: scale(1);    opacity: 0.65; }
  70%  { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}
.lp-btn-primary {
  height: 52px; padding: 0 32px;
  background: var(--teal); color: #fff;
  font-size: 16px; font-weight: 700; border-radius: 8px;
  box-shadow: 0 4px 20px rgba(34,197,94,0.38);
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  position: relative; z-index: 1;
}
.lp-btn-primary:hover {
  background: #1aad52; transform: translateY(-2px);
  box-shadow: 0 7px 24px rgba(34,197,94,0.48);
}
.lp-btn-ghost {
  height: 52px; padding: 0 28px;
  background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.88);
  font-size: 16px; font-weight: 600; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.3);
  transition: background 0.15s, border-color 0.15s;
}
.lp-btn-ghost:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.5);
}
.lp-feature-tags {
  display: flex; flex-wrap: wrap; justify-content: flex-start;
  gap: 8px; margin-bottom: 52px; position: relative; z-index: 1;
}
.lp-feature-tags span {
  background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 6px 16px; border-radius: 20px;
  font-size: 13px; font-weight: 500;
  display: inline-block;
  animation: tag-bob 4.4s ease-in-out infinite;
}
.lp-feature-tags span:nth-child(1) { animation-delay: 0s; }
.lp-feature-tags span:nth-child(2) { animation-delay: 0.5s; }
.lp-feature-tags span:nth-child(3) { animation-delay: 1s; }
.lp-feature-tags span:nth-child(4) { animation-delay: 1.5s; }
.lp-feature-tags span:nth-child(5) { animation-delay: 2s; }
.lp-feature-tags span:nth-child(6) { animation-delay: 2.5s; }
@keyframes tag-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.lp-hero-stats {
  display: flex; align-items: center; justify-content: flex-start;
  position: relative; z-index: 1;
}
.lp-hstat { display: flex; flex-direction: column; gap: 3px; padding-right: 40px; }
.lp-hstat strong { font-size: 28px; font-weight: 900; color: #fff; line-height: 1; }
.lp-hstat span { font-size: 11px; color: rgba(255,255,255,0.48); text-transform: uppercase; letter-spacing: 0.5px; }
.lp-hstat-div { width: 1px; height: 40px; background: rgba(255,255,255,0.2); margin-right: 40px; flex-shrink: 0; }

/* ── Hero right column — laptop mockup ──────────────────────────── */
.hero-visual-wrap {
  position: relative;
  width: 100%;
  max-width: 680px;
  margin-left: auto;
  padding: 40px 20px 56px;
}

/* Laptop shell */
.hero-laptop {
  position: relative; width: 100%;
  filter: drop-shadow(0 36px 72px rgba(2,10,40,0.55));
  animation: hero-mock-float 6s ease-in-out infinite;
}
@keyframes hero-mock-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* Lid */
.hero-laptop-lid {
  background: #1c2035;
  border-radius: 12px 12px 3px 3px;
  border: 6px solid #252840;
  border-bottom: 3px solid #1a1d30;
  padding: 10px 10px 7px;
}
.hero-laptop-cam {
  width: 5px; height: 5px; border-radius: 50%;
  background: #2e3250; margin: 0 auto 7px;
}
.hero-laptop-screen {
  background: #fff; border-radius: 4px;
  overflow: hidden; aspect-ratio: 16/10;
}

/* Base */
.hero-laptop-base {
  background: linear-gradient(180deg, #252840 0%, #1a1d30 100%);
  height: 22px; border-radius: 0 0 10px 10px;
  display: flex; align-items: center; justify-content: center;
}
.hero-laptop-base::before {
  content: ''; position: absolute;
  top: 0; left: 22%; right: 22%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
}
.hero-laptop-pad {
  width: 60px; height: 9px; background: #151728; border-radius: 3px;
}

/* ── Dashboard inside the screen ── */
.hdash { display: flex; height: 100%; overflow: hidden; }

.hdash-sb {
  width: 74px; background: #0f172a;
  padding: 9px 6px; flex-shrink: 0;
}
.hdash-logo {
  display: flex; align-items: center; gap: 4px;
  padding-bottom: 8px; margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.hdash-logo-mark {
  width: 15px; height: 15px; background: #2060e8;
  border-radius: 3px; display: flex; align-items: center;
  justify-content: center; font-size: 8px; font-weight: 900; color: #fff;
  flex-shrink: 0;
}
.hdash-logo span:last-child { font-size: 7.5px; font-weight: 700; color: #fff; }
.hdash-nav { display: flex; flex-direction: column; gap: 2px; }
.hdash-navitem {
  font-size: 7px; color: rgba(255,255,255,0.40);
  padding: 4px 6px; border-radius: 4px; white-space: nowrap;
}
.hdash-navitem--on { background: rgba(32,96,232,0.22); color: #93c5fd; }

.hdash-main {
  flex: 1; background: #f1f5f9; padding: 9px 8px;
  display: flex; flex-direction: column; gap: 5px; overflow: hidden;
}
.hdash-topbar {
  display: flex; justify-content: space-between; align-items: center;
}
.hdash-title { font-size: 8px; font-weight: 800; color: #0f172a; }
.hdash-period { font-size: 7px; color: #94a3b8; }

.hdash-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }
.hdash-stat {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 5px; padding: 5px 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.hdash-stat span { font-size: 6px; color: #94a3b8; }
.hdash-stat strong { font-size: 9px; font-weight: 800; color: #0f172a; line-height: 1; }
.hdash-stat--g strong { color: #16a34a; }

.hdash-chart-area {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 5px;
  padding: 6px 6px 3px; flex: 1; min-height: 0;
  display: flex; align-items: flex-end; gap: 3px;
}
.hdash-chart-area span {
  flex: 1; height: var(--h); min-height: 8%;
  background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
  border-radius: 2px 2px 0 0;
}

.hdash-rows { display: flex; flex-direction: column; gap: 3px; }
.hdash-row {
  display: flex; align-items: center; gap: 5px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 4px;
  padding: 4px 7px; font-size: 7px; color: #334155;
}
.hdash-row span:nth-child(2) { flex: 1; overflow: hidden; white-space: nowrap; }
.hdash-row em { font-style: normal; font-weight: 700; color: #16a34a; }
.hdash-row em.neg { color: #ef4444; }
.hdash-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.hdash-dot--g { background: #22c55e; }
.hdash-dot--r { background: #ef4444; }
.hdash-dot--b { background: #3b82f6; }

/* ── Floating notification cards ── */
.hero-notif {
  position: absolute;
  display: flex; align-items: center; gap: 10px;
  background: rgba(18,28,62,0.72);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px; padding: 10px 16px;
  box-shadow: 0 8px 32px rgba(2,10,40,0.4);
  z-index: 10; white-space: nowrap;
}
.hero-notif--a { top: 4px; right: -8px; animation: hna 5s ease-in-out infinite; }
.hero-notif--b { bottom: 20px; left: -8px; animation: hnb 6.5s ease-in-out infinite; }
@keyframes hna { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@keyframes hnb { 0%,100%{transform:translateY(0)} 50%{transform:translateY(9px)} }

.hero-notif-ico {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hero-notif-ico svg { width: 16px; height: 16px; }
.hero-notif-ico--green { background: rgba(34,197,94,0.22); color: #4ade80; }
.hero-notif-ico--blue  { background: rgba(59,130,246,0.22); color: #60a5fa; }
.hero-notif-body { display: flex; flex-direction: column; gap: 2px; }
.hero-notif-body strong { font-size: 12px; font-weight: 700; color: #fff; }
.hero-notif-body span   { font-size: 11px; color: rgba(255,255,255,0.60); }

/* ── Decorative rising bar chart ── */
.hero-bars-deco {
  position: absolute; bottom: 2px; right: -4px;
  display: flex; align-items: flex-end; gap: 5px;
  height: 72px; z-index: 0; pointer-events: none;
}
.hero-bars-deco i {
  display: block; width: 13px; height: var(--h);
  border-radius: 3px 3px 0 0;
}
.hero-bars-deco i:nth-child(1) { background: rgba(96,165,250,0.55); }
.hero-bars-deco i:nth-child(2) { background: rgba(59,130,246,0.65); }
.hero-bars-deco i:nth-child(3) { background: rgba(37,99,235,0.75); }
.hero-bars-deco i:nth-child(4) { background: rgba(34,197,94,0.60); }
.hero-bars-deco i:nth-child(5) { background: rgba(22,163,74,0.75); }

/* Responsive */
@media (max-width: 980px) {
  .lp-hero-inner { grid-template-columns: 1fr; }
  .lp-hero-right { display: none; }
  .lp-hero-left { align-items: center; text-align: center; }
  .lp-hero-body { margin: 0 auto 32px; }
  .lp-hero-cta { justify-content: center; }
  .lp-feature-tags { justify-content: center; }
  .lp-hero-stats { justify-content: center; }
  .lp-hero-modules { justify-content: center; }
  .lp-auth-rule { text-align: center; }
}

/* Floating glass chips drifting around the home hero */
.hero-float-chips { position: absolute; inset: 0; z-index: 1; pointer-events: none; display: none; }
.hf-chip {
  position: absolute; display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 999px; padding: 10px 18px 10px 14px;
  font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,0.86);
  white-space: nowrap; box-shadow: 0 18px 50px rgba(4,18,56,0.3);
}
.hf-chip svg { width: 14px; height: 14px; color: #4ade80; flex-shrink: 0; }
.hf-chip--a { top: 13%; left: 4%;   animation: pf-chip-drift-a 9.4s ease-in-out infinite; }
.hf-chip--b { bottom: 20%; right: 4%; animation: pf-chip-drift-b 11.6s ease-in-out infinite; }
.hf-chip--c { top: 40%; right: 8%;  animation: pf-chip-drift-c 10.2s ease-in-out infinite; }
@media (min-width: 1180px) { .hero-float-chips { display: block; } }

/* Scroll-down cue */
.hero-scroll-cue {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  width: 26px; height: 40px; border: 2px solid rgba(255,255,255,0.26);
  border-radius: 14px; z-index: 1;
}
.hero-scroll-cue span {
  position: absolute; top: 7px; left: 50%; width: 4px; height: 8px;
  background: #4ade80; border-radius: 2px; transform: translateX(-50%);
  animation: scroll-cue-drop 2s ease-in-out infinite;
}
@keyframes scroll-cue-drop {
  0%   { opacity: 1; top: 7px; }
  70%  { opacity: 0; top: 22px; }
  100% { opacity: 0; top: 7px; }
}
@media (max-width: 760px) { .hero-scroll-cue { display: none; } }

/* Features section */
.lp-features { padding: 88px 56px 96px; background: var(--surface); }
.lp-section-h { font-size: 32px; font-weight: 800; color: var(--ink); margin: 0 0 10px; letter-spacing: -0.5px; }
.lp-section-sub { font-size: 16px; color: var(--ink2); margin: 0 0 48px; line-height: 1.65; }
.lp-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lp-feat-card {
  background: var(--surface-soft); border: 1px solid var(--line);
  border-radius: 14px; padding: 28px 24px;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}
.lp-feat-card:hover {
  box-shadow: 0 10px 32px rgba(11,53,145,0.10);
  border-color: var(--line-strong); transform: translateY(-2px);
}
.lp-feat-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.lp-feat-icon svg { width: 22px; height: 22px; }
.lp-icon-blue { background: var(--accent-soft); color: var(--accent); }
.lp-icon-green { background: var(--teal-soft); color: var(--success); }
.lp-feat-card h3 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 7px; }
.lp-feat-card p { font-size: 13px; color: var(--ink2); margin: 0; line-height: 1.6; }

/* ── Home: "System showcase" — product preview with mock dashboard ── */
.lp-showcase {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
  padding: 96px 56px;
  background: var(--surface-soft);
}
.showcase-glow {
  position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
  filter: blur(70px);
}
.showcase-glow--a {
  width: 460px; height: 460px; top: -160px; right: -120px;
  background: radial-gradient(circle, rgba(32,96,232,0.16) 0%, transparent 70%);
}
.showcase-glow--b {
  width: 360px; height: 360px; bottom: -140px; left: -100px;
  background: radial-gradient(circle, rgba(34,197,94,0.14) 0%, transparent 70%);
}
.showcase-trust {
  display: flex; align-items: center; gap: 22px; margin-top: 32px;
  padding-top: 24px; border-top: 1px solid var(--line);
}
.showcase-trust-item { display: flex; flex-direction: column; gap: 2px; }
.showcase-trust-item strong { font-size: 19px; font-weight: 800; color: var(--accent-strong); letter-spacing: -0.4px; }
.showcase-trust-item span { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.showcase-trust-div { width: 1px; height: 30px; background: var(--line); flex-shrink: 0; }
.lp-mock-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; color: #16a34a;
  background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 999px; padding: 4px 10px 4px 8px;
}
.lp-showcase-eyebrow {
  display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: 0.4px;
  color: var(--accent); background: var(--accent-soft);
  border-radius: 999px; padding: 7px 16px; margin-bottom: 16px;
}
.lp-showcase-text .lp-section-h { margin-bottom: 12px; }
.lp-showcase-list { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.lp-showcase-list li { display: flex; align-items: flex-start; gap: 14px; }
.lp-showcase-list li strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.lp-showcase-list li span { font-size: 13px; color: var(--muted); line-height: 1.6; }
.lp-showcase-dot { flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px; border-radius: 7px; position: relative; }
.lp-showcase-dot::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 9px; height: 9px;
  background: currentColor; border-radius: 3px;
}
.lp-showcase-dot--blue  { background: var(--accent-soft); color: var(--accent); }
.lp-showcase-dot--green { background: #f0fdf4; color: #22c55e; }

/* Mock dashboard "window" — illustrates the product without a screenshot */
.lp-showcase-visual { position: relative; }
.lp-mock-window {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(11,53,145,0.16);
}
.lp-mock-titlebar {
  display: flex; align-items: center; gap: 7px;
  padding: 13px 16px; background: var(--surface-soft); border-bottom: 1px solid var(--line);
}
.lp-mock-dotbtn { width: 10px; height: 10px; border-radius: 50%; }
.lp-mock-dotbtn--red    { background: #f87171; }
.lp-mock-dotbtn--yellow { background: #facc15; }
.lp-mock-dotbtn--green  { background: #4ade80; }
.lp-mock-titlebar-label { margin-left: 10px; font-size: 12px; font-weight: 600; color: var(--muted); }
.lp-mock-body { padding: 22px; }
.lp-mock-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.lp-mock-stat {
  background: var(--surface-soft); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.lp-mock-stat span { font-size: 11px; font-weight: 600; color: var(--muted); }
.lp-mock-stat strong { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -0.4px; }
.lp-mock-stat-positive { color: #16a34a; }
.lp-mock-chart {
  display: flex; align-items: flex-end; gap: 8px; height: 92px;
  padding: 14px 14px 0; margin-bottom: 20px;
  background: var(--surface-soft); border: 1px solid var(--line); border-radius: 10px;
}
.lp-mock-chart span {
  flex: 1; height: var(--h); border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, #5b9bff, #2060e8);
}
.lp-mock-chart span:nth-child(even) { background: linear-gradient(180deg, #6ee7a0, #22c55e); }
.lp-mock-rows { display: flex; flex-direction: column; gap: 10px; }
.lp-mock-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  background: var(--surface-soft); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px;
}
.lp-mock-row em { margin-left: auto; font-style: normal; font-weight: 800; color: var(--success); }
.lp-mock-row-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.lp-mock-row-dot--green { background: #22c55e; }
.lp-mock-row-dot--blue  { background: #2060e8; }
.lp-mock-float {
  position: absolute; display: inline-flex; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 16px; font-size: 12px; font-weight: 700; color: var(--ink);
  box-shadow: 0 16px 40px rgba(11,53,145,0.16);
}
.lp-mock-float--a { top: -18px; right: 6%; }
.lp-mock-float--b { bottom: -16px; left: 4%; }
@media (max-width: 980px) {
  .lp-showcase { grid-template-columns: 1fr; padding: 64px 28px; gap: 40px; }
  .lp-mock-float { display: none; }
}

/* Footer */
.lp-footer {
  padding: 28px 56px; background: #0b3591;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.lp-footer-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: 15px; }
.lp-footer-brand img { width: 30px; height: 30px; border-radius: 7px; object-fit: contain; background: rgba(255,255,255,0.12); padding: 3px; }
.lp-footer-copy { margin: 0; font-size: 12px; color: rgba(255,255,255,0.42); }

/* ── Landing nav page links (Home / About / Pricing / Contact) ── */
.lp-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.lp-nav-link {
  height: 38px; padding: 0 16px;
  background: transparent;
  color: rgba(255,255,255,0.68);
  font-size: 14px; font-weight: 600;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.lp-nav-link:hover { background: rgba(255,255,255,0.08); color: #fff; }
.lp-nav-link.active { background: rgba(255,255,255,0.14); color: #fff; }

/* ══════════════════════════════════════════════════════════════════════════
   Shared animated page banner (About / Pricing / Contact)
   ══════════════════════════════════════════════════════════════════════════ */
.page-banner {
  position: relative;
  overflow: hidden;
  padding: 92px 56px 88px;
  background: linear-gradient(165deg, #0f42b8 0%, #0b3591 28%, #082070 65%, #060e38 100%);
  text-align: center;
}
.page-banner-content { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }
.page-banner-h1 {
  font-size: 48px; font-weight: 900; color: #fff;
  line-height: 1.1; letter-spacing: -1.5px;
  margin: 0 0 18px;
}
.page-banner-body {
  font-size: 17px; color: rgba(255,255,255,0.62);
  line-height: 1.75; margin: 0 auto;
  max-width: 560px;
}

/* Drifting particle dots shared across banners */
.banner-particles, .contact-particles {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.banner-particles span, .contact-particles span {
  position: absolute;
  bottom: -40px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.28);
  animation: particle-rise 13s linear infinite;
}
.banner-particles span:nth-child(1) { left: 6%;  animation-delay: 0s;   background: rgba(74,222,128,0.5); }
.banner-particles span:nth-child(2) { left: 18%; animation-delay: 2.2s; width: 5px; height: 5px; }
.banner-particles span:nth-child(3) { left: 33%; animation-delay: 4.4s; background: rgba(74,222,128,0.4); width: 9px; height: 9px; }
.banner-particles span:nth-child(4) { left: 51%; animation-delay: 1.1s; }
.banner-particles span:nth-child(5) { left: 67%; animation-delay: 6.5s; width: 6px; height: 6px; background: rgba(74,222,128,0.45); }
.banner-particles span:nth-child(6) { left: 82%; animation-delay: 3.3s; }
.banner-particles span:nth-child(7) { left: 92%; animation-delay: 8s;   width: 5px; height: 5px; }
@keyframes particle-rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(-540px) translateX(26px); opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   About Us — orbiting rings animation
   ══════════════════════════════════════════════════════════════════════════ */
.about-banner { padding-bottom: 64px; }
.orbit-system {
  position: absolute; z-index: 1;
  top: 50%; right: 9%;
  width: 290px; height: 290px;
  transform: translateY(-50%);
  display: none;
}
.orbit-ring {
  position: absolute; inset: 0;
  border: 1px dashed rgba(255,255,255,0.16);
  border-radius: 50%;
}
.orbit-ring--1 { inset: 50px; animation: orbit-spin 16s linear infinite; }
.orbit-ring--2 { inset: 22px; animation: orbit-spin 24s linear infinite reverse; }
.orbit-ring--3 { inset: 0;    animation: orbit-spin 34s linear infinite; }
.orbit-dot {
  position: absolute; top: -5px; left: 50%;
  width: 11px; height: 11px; border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 16px currentColor;
}
.orbit-dot--blue  { background: #5b9bff; color: #5b9bff; }
.orbit-dot--green { background: #4ade80; color: #4ade80; }
.orbit-core {
  position: absolute; inset: 0; margin: auto;
  width: 86px; height: 86px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 0 50px rgba(74,222,128,0.22);
  animation: orbit-pulse 4s ease-in-out infinite;
}
.orbit-core img { width: 50px; height: 50px; object-fit: contain; }
@keyframes orbit-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes orbit-pulse {
  0%, 100% { box-shadow: 0 0 50px rgba(74,222,128,0.22); transform: scale(1); }
  50%      { box-shadow: 0 0 70px rgba(74,222,128,0.38); transform: scale(1.05); }
}
@media (min-width: 1180px) {
  .orbit-system { display: block; }
  .about-banner .page-banner-content { margin: 0; text-align: left; }
  .about-banner .page-banner-body { margin: 0; }
}

.about-stats-section { padding: 0 56px; margin-top: -38px; position: relative; z-index: 3; }
.about-stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  background: #fff; border-radius: 16px; padding: 28px 20px;
  box-shadow: 0 18px 48px rgba(11,53,145,0.14);
  border: 1px solid #e8ecf6;
}
.about-stat-card { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.about-stat-num { font-size: 34px; font-weight: 900; color: var(--accent-strong); letter-spacing: -1px; }
.about-stat-card span { font-size: 12.5px; color: var(--muted); font-weight: 600; }

.about-mission-section { padding-top: 64px; }
.about-mv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.about-mv-card {
  padding: 32px 28px; border-radius: 16px;
  border: 1px solid var(--line);
  transition: transform 0.2s, box-shadow 0.2s;
}
.about-mv-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(11,53,145,0.12); }
.about-mv-card--mission { background: linear-gradient(165deg, #eef3ff 0%, #f7f9ff 100%); }
.about-mv-card--vision  { background: linear-gradient(165deg, #f0fdf4 0%, #f7f9ff 100%); }
.about-mv-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.about-mv-icon svg { width: 24px; height: 24px; }
.about-mv-icon--blue  { background: #fff; color: #2060e8; box-shadow: 0 6px 18px rgba(32,96,232,0.18); }
.about-mv-icon--green { background: #fff; color: #22c55e; box-shadow: 0 6px 18px rgba(34,197,94,0.18); }
.about-mv-card h3 { font-size: 19px; font-weight: 800; margin: 0 0 10px; color: #0e1f3d; }
.about-mv-card p { font-size: 14px; color: #5b6b88; line-height: 1.7; margin: 0; }

.about-team-section { padding-top: 24px; }
.about-team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.about-team-card {
  padding: 26px 20px; text-align: center;
  border: 1px solid var(--line); border-radius: 14px;
  background: #f7f9ff;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.about-team-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(11,53,145,0.12); border-color: #b8c5e0; }
.about-team-avatar {
  width: 72px; height: 72px; margin: 0 auto 14px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 20px; font-weight: 800; color: #fff;
  box-shadow: 0 8px 22px rgba(11,53,145,0.18);
}
.about-avatar--blue  { background: linear-gradient(150deg, #2060e8, #0b3591); }
.about-avatar--green { background: linear-gradient(150deg, #4ade80, #16a34a); }
.about-team-card h3 { font-size: 15px; font-weight: 800; margin: 0 0 3px; color: #0e1f3d; }
.about-team-role { display: block; font-size: 12px; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.about-team-card p { font-size: 12.5px; color: #5b6b88; line-height: 1.6; margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   Pricing — morphing gradient blob animation
   ══════════════════════════════════════════════════════════════════════════ */
.pricing-banner { padding-bottom: 76px; }
.blob-system { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.pricing-blob {
  position: absolute;
  filter: blur(2px);
  opacity: 0.5;
  animation: blob-morph 14s ease-in-out infinite, blob-drift 22s ease-in-out infinite;
}
.pricing-blob--1 {
  width: 360px; height: 360px; top: -120px; left: -80px;
  background: radial-gradient(circle at 35% 35%, rgba(32,96,232,0.55), transparent 70%);
  animation-duration: 16s, 26s;
}
.pricing-blob--2 {
  width: 300px; height: 300px; bottom: -100px; right: 4%;
  background: radial-gradient(circle at 60% 40%, rgba(34,197,94,0.4), transparent 70%);
  animation-duration: 13s, 19s;
  animation-direction: reverse;
}
.pricing-blob--3 {
  width: 220px; height: 220px; top: 18%; right: 26%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.18), transparent 70%);
  animation-duration: 11s, 30s;
}
@keyframes blob-morph {
  0%, 100% { border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; }
  33%      { border-radius: 65% 35% 40% 60% / 55% 65% 35% 45%; }
  66%      { border-radius: 35% 65% 55% 45% / 40% 55% 45% 60%; }
}
@keyframes blob-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(36px, -28px) scale(1.08); }
}

.pricing-toggle {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin-top: 36px; position: relative; z-index: 2;
}
.pricing-toggle-label {
  font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.5);
  transition: color 0.2s; cursor: default;
}
.pricing-toggle-label.active { color: #fff; }
.pricing-toggle-label em {
  font-style: normal; margin-left: 6px;
  background: rgba(74,222,128,0.2); color: #4ade80;
  border: 1px solid rgba(74,222,128,0.35);
  border-radius: 12px; padding: 2px 9px; font-size: 11px; font-weight: 800;
}
.pricing-switch {
  position: relative;
  width: 56px; height: 30px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s;
}
.pricing-switch[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); }
.pricing-switch-knob {
  position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transition: transform 0.25s cubic-bezier(.4,1.6,.4,1);
}
.pricing-switch[aria-pressed="true"] .pricing-switch-knob { transform: translateX(26px); }

.pricing-cards-section { padding-top: 0; margin-top: -46px; position: relative; z-index: 3; }
.pricing-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.pricing-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 30px 26px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 16px 44px rgba(11,53,145,0.12);
  transition: transform 0.25s, box-shadow 0.25s;
}
.pricing-card:hover { transform: translateY(-6px); box-shadow: 0 24px 56px rgba(11,53,145,0.18); }
.pricing-card--highlight {
  border-color: var(--accent);
  background: linear-gradient(180deg, #f5f9ff 0%, #fff 32%);
  transform: scale(1.035);
}
.pricing-card--highlight:hover { transform: scale(1.035) translateY(-6px); }
.pricing-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: 0.4px;
  padding: 6px 16px; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(32,96,232,0.4);
  animation: badge-pulse 2.4s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 6px 16px rgba(32,96,232,0.4); }
  50%      { box-shadow: 0 6px 22px rgba(32,96,232,0.65); }
}
.pricing-card h3 { font-size: 20px; font-weight: 800; margin: 0 0 4px; color: #0e1f3d; }
.pricing-card-sub { font-size: 13px; color: var(--muted); margin: 0 0 18px; }
.pricing-amount { display: flex; align-items: baseline; gap: 6px; margin-bottom: 22px; }
.pricing-currency { font-size: 14px; font-weight: 700; color: var(--muted); }
.pricing-price { font-size: 38px; font-weight: 900; color: #0e1f3d; letter-spacing: -1px; transition: opacity 0.15s; }
.pricing-period { font-size: 13px; color: var(--muted); }
.pricing-feature-list { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.pricing-feature-list li {
  font-size: 13.5px; color: #405064; padding-left: 26px; position: relative; line-height: 1.4;
}
.pricing-feature-list li::before {
  content: ''; position: absolute; left: 0; top: 2px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--success-soft);
  box-shadow: inset 0 0 0 1px rgba(34,197,94,0.35);
}
.pricing-feature-list li::after {
  content: ''; position: absolute; left: 5px; top: 6px;
  width: 4px; height: 8px;
  border: 2px solid var(--teal); border-top: 0; border-left: 0;
  transform: rotate(40deg);
}
.pricing-cta { width: 100%; text-align: center; justify-content: center; }

.pricing-faq-section { padding-top: 16px; }
.pricing-faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin: 0 auto; }
.pricing-faq-item { border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.pricing-faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 18px 22px;
  background: transparent; text-align: left;
  font-size: 15px; font-weight: 700; color: #0e1f3d;
}
.pricing-faq-icon {
  display: grid; place-items: center; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  font-size: 16px; font-weight: 800; line-height: 1;
  transition: transform 0.25s, background 0.2s, color 0.2s;
}
.pricing-faq-item.open .pricing-faq-icon { transform: rotate(135deg); background: var(--accent); color: #fff; }
.pricing-faq-answer {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
  overflow: hidden;
}
.pricing-faq-answer p {
  overflow: hidden; margin: 0; padding: 0 22px;
  font-size: 13.5px; color: #5b6b88; line-height: 1.7;
  min-height: 0;
}
.pricing-faq-item.open .pricing-faq-answer { grid-template-rows: 1fr; }
.pricing-faq-item.open .pricing-faq-answer p { padding: 0 22px 18px; }

/* ══════════════════════════════════════════════════════════════════════════
   Contact Us — drifting particles + pulsing location marker
   ══════════════════════════════════════════════════════════════════════════ */
.contact-banner { padding-bottom: 64px; }
.contact-particles span {
  animation-name: particle-drift;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  background: rgba(255,255,255,0.22);
}
.contact-particles span:nth-child(1) { left: 8%;  top: 22%; width: 10px; height: 10px; animation-duration: 9s;  animation-delay: 0s; }
.contact-particles span:nth-child(2) { left: 22%; top: 65%; width: 6px;  height: 6px;  animation-duration: 12s; animation-delay: 1.4s; background: rgba(74,222,128,0.4); }
.contact-particles span:nth-child(3) { left: 38%; top: 35%; width: 8px;  height: 8px;  animation-duration: 8s;  animation-delay: 2.6s; }
.contact-particles span:nth-child(4) { left: 54%; top: 18%; width: 5px;  height: 5px;  animation-duration: 11s; animation-delay: 0.8s; }
.contact-particles span:nth-child(5) { left: 64%; top: 70%; width: 9px;  height: 9px;  animation-duration: 10s; animation-delay: 3.4s; background: rgba(74,222,128,0.35); }
.contact-particles span:nth-child(6) { left: 78%; top: 28%; width: 6px;  height: 6px;  animation-duration: 13s; animation-delay: 1.9s; }
.contact-particles span:nth-child(7) { left: 88%; top: 60%; width: 7px;  height: 7px;  animation-duration: 9.5s; animation-delay: 4.2s; }
.contact-particles span:nth-child(8) { left: 47%; top: 80%; width: 5px;  height: 5px;  animation-duration: 14s; animation-delay: 2.1s; }
@keyframes particle-drift {
  0%, 100% { transform: translate(0, 0); opacity: 0.35; }
  50%      { transform: translate(22px, -34px); opacity: 0.85; }
}

.contact-pulse-marker {
  position: absolute; z-index: 1;
  top: 50%; right: 12%;
  width: 26px; height: 26px;
  transform: translateY(-50%);
  display: none;
}
.pulse-ring {
  position: absolute; inset: 0;
  border: 2px solid rgba(74,222,128,0.55);
  border-radius: 50%;
  animation: pulse-ring-grow 2.6s ease-out infinite;
}
.pulse-ring--delay { animation-delay: 1.3s; }
.pulse-dot {
  position: absolute; inset: 8px;
  background: #4ade80;
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(74,222,128,0.7);
}
@keyframes pulse-ring-grow {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(4.2); opacity: 0; }
}
@media (min-width: 1180px) {
  .contact-pulse-marker { display: block; }
}

.contact-section { padding-top: 56px; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 28px; align-items: start; }
.contact-info-col { display: flex; flex-direction: column; gap: 14px; }
.contact-info-card {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--line); border-radius: 14px;
  background: #f7f9ff;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.contact-info-card:hover { transform: translateX(4px); box-shadow: 0 10px 28px rgba(11,53,145,0.1); border-color: #b8c5e0; }
.contact-info-icon {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
}
.contact-info-icon svg { width: 21px; height: 21px; }
.contact-icon--blue  { background: #eef3ff; color: #2060e8; }
.contact-icon--green { background: #f0fdf4; color: #22c55e; }
.contact-info-card strong { display: block; font-size: 14px; font-weight: 800; color: #0e1f3d; margin-bottom: 2px; }
.contact-info-card span { font-size: 13px; color: var(--muted); }

.contact-form-card {
  padding: 32px 30px;
  border: 1px solid var(--line); border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(11,53,145,0.08);
}
.contact-form-card h3 { margin: 0 0 6px; font-size: 20px; font-weight: 800; color: #0e1f3d; }
.contact-form-card > p { margin: 0 0 22px; font-size: 13.5px; color: var(--muted); }
.contact-form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.contact-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.contact-field label { font-size: 13px; font-weight: 750; color: var(--ink); }
.contact-field input, .contact-field textarea {
  border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 11px 13px; font-size: 14px; color: var(--ink);
  background: #fff; resize: vertical;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.contact-field input:focus, .contact-field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(32,96,232,0.14);
}
.contact-form-note { margin: 0 0 6px; font-size: 13px; min-height: 18px; color: var(--success); font-weight: 700; }
.contact-submit { width: 100%; text-align: center; justify-content: center; }

@media (max-width: 980px) {
  .about-stats-grid, .pricing-cards-grid, .about-mv-grid { grid-template-columns: repeat(2, 1fr); }
  .about-team-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid, .contact-form-row { grid-template-columns: 1fr; }
  .pricing-card--highlight { transform: none; }
  .lp-nav { flex-wrap: wrap; gap: 10px; }
  .lp-nav-links {
    order: 3;
    width: 100%;
    display: flex;
    justify-content: center;
    overflow-x: auto;
    padding-top: 2px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Scroll-reveal entrance animations (used across About / Pricing / Contact)
   ══════════════════════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.21, 0.6, 0.35, 1), transform 0.7s cubic-bezier(0.21, 0.6, 0.35, 1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.21, 0.6, 0.35, 1), transform 0.6s cubic-bezier(0.21, 0.6, 0.35, 1);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.03s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.10s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.17s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.31s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.38s; }

/* ── Animated gradient-glow border on hover (modern "spotlight card" look) ── */
@property --glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.glow-card { position: relative; isolation: isolate; }
.glow-card::before {
  content: "";
  position: absolute; inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  z-index: -1;
  opacity: 0;
  background: conic-gradient(from var(--glow-angle), transparent 0%, rgba(32,96,232,0) 8%, rgba(32,96,232,0.65) 26%, rgba(74,222,128,0.65) 50%, rgba(32,96,232,0) 74%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  transition: opacity 0.35s ease;
  animation: glow-rotate 3.6s linear infinite;
  animation-play-state: paused;
}
.glow-card:hover::before { opacity: 1; animation-play-state: running; }
@keyframes glow-rotate { to { --glow-angle: 360deg; } }

/* ══════════════════════════════════════════════════════════════════════════
   Aurora gradient-mesh layer — sits behind each banner's unique animation
   ══════════════════════════════════════════════════════════════════════════ */
.banner-aurora {
  position: absolute; inset: -20%;
  z-index: 0; pointer-events: none;
  opacity: 0.55;
  background:
    radial-gradient(38% 50% at 18% 28%, rgba(91,155,255,0.40), transparent 70%),
    radial-gradient(34% 46% at 82% 18%, rgba(74,222,128,0.28), transparent 70%),
    radial-gradient(46% 60% at 60% 86%, rgba(32,96,232,0.32), transparent 72%);
  filter: blur(46px) saturate(130%);
  animation: aurora-drift 26s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(2%, -3%, 0) rotate(8deg) scale(1.08); }
  100% { transform: translate3d(-3%, 2%, 0) rotate(-6deg) scale(1.04); }
}

/* ══════════════════════════════════════════════════════════════════════════
   About — "Inside the Platform" system showcase
   ══════════════════════════════════════════════════════════════════════════ */
.about-platform-section { padding-top: 24px; }
.platform-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 36px; }
.platform-intro p { max-width: 480px; font-size: 14.5px; color: var(--muted); line-height: 1.75; margin: 0; }
.platform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.platform-card {
  position: relative;
  padding: 26px 24px; border-radius: 16px;
  background: linear-gradient(165deg, #f7f9ff 0%, #fff 100%);
  border: 1px solid var(--line);
  transition: transform 0.25s cubic-bezier(0.21,0.6,0.35,1), box-shadow 0.25s, border-color 0.25s;
  overflow: hidden;
}
.platform-card:hover { transform: translateY(-5px); box-shadow: 0 20px 46px rgba(11,53,145,0.14); border-color: transparent; }
.platform-card-icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; position: relative; z-index: 1;
}
.platform-card-icon svg { width: 21px; height: 21px; }
.platform-card h3 { font-size: 15.5px; font-weight: 800; color: var(--ink); margin: 0 0 7px; position: relative; z-index: 1; }
.platform-card p { font-size: 13px; color: var(--muted); line-height: 1.65; margin: 0; position: relative; z-index: 1; }
.platform-card-tag {
  position: absolute; top: 22px; right: 22px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--accent-strong); background: var(--accent-soft);
  padding: 4px 10px; border-radius: 20px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Pricing — refreshed hero, comparison cards, stats strip & closing CTA
   ══════════════════════════════════════════════════════════════════════════ */
.text-gradient {
  background: linear-gradient(95deg, #5b9bff 0%, #4ade80 45%, #5b9bff 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: text-gradient-shift 7s ease-in-out infinite;
}
@keyframes text-gradient-shift {
  0%, 100% { background-position: 0% center; }
  50%      { background-position: 100% center; }
}
.pricing-eyebrow-badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(74,222,128,0.14);
  border: 1px solid rgba(74,222,128,0.35);
  color: #4ade80; font-size: 12px; font-weight: 800;
  letter-spacing: 1.4px; text-transform: uppercase;
  padding: 8px 18px 8px 13px; border-radius: 999px;
  margin-bottom: 24px; position: relative; z-index: 2;
  overflow: hidden; isolation: isolate;
}
.pricing-eyebrow-badge::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
  background-size: 220% 100%; background-position: 160% 0;
  animation: badge-shimmer 3.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes badge-shimmer {
  0%        { background-position: 160% 0; }
  55%, 100% { background-position: -60% 0; }
}
.pi-pulse-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ade80; box-shadow: 0 0 10px rgba(74,222,128,0.8);
  animation: orbit-pulse 2.6s ease-in-out infinite;
}
.pricing-save-badge {
  background: rgba(74,222,128,0.18); color: #4ade80;
  border: 1px solid rgba(74,222,128,0.4);
  border-radius: 999px; padding: 4px 12px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.3px;
}

.pricing-hero-note {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
  position: relative;
  z-index: 2;
}

.pricing-hero-note span {
  padding: 8px 13px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.78);
  font-size: 12px;
  font-weight: 800;
}

/* Floating glass trust-chips drifting around the pricing hero */
.pricing-float-chips { position: absolute; inset: 0; z-index: 1; pointer-events: none; display: none; }
.pf-chip {
  position: absolute; display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 999px; padding: 10px 18px 10px 14px;
  font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,0.86);
  white-space: nowrap; box-shadow: 0 18px 50px rgba(4,18,56,0.3);
}
.pf-chip svg { width: 14px; height: 14px; color: #4ade80; flex-shrink: 0; }
.pf-chip--a { top: 17%; left: 5%; animation: pf-chip-drift-a 9s ease-in-out infinite; }
.pf-chip--b { bottom: 12%; left: 9%; animation: pf-chip-drift-b 11s ease-in-out infinite; }
.pf-chip--c { top: 21%; right: 6%; animation: pf-chip-drift-c 10s ease-in-out infinite; }
@keyframes pf-chip-drift-a {
  0%, 100% { transform: translate(0, 0) rotate(-2deg); opacity: 0.82; }
  50%      { transform: translate(16px, -18px) rotate(1deg); opacity: 1; }
}
@keyframes pf-chip-drift-b {
  0%, 100% { transform: translate(0, 0) rotate(1.5deg); opacity: 0.78; }
  50%      { transform: translate(-16px, 14px) rotate(-1deg); opacity: 1; }
}
@keyframes pf-chip-drift-c {
  0%, 100% { transform: translate(0, 0) rotate(-1deg); opacity: 0.82; }
  50%      { transform: translate(12px, 16px) rotate(2deg); opacity: 1; }
}
@media (min-width: 1180px) {
  .pricing-float-chips { display: block; }
}

/* Comparison-style feature lists with included / excluded rows */
.pricing-cards-grid--two {
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  max-width: 980px;
  margin: 0 auto;
}

.pricing-card--basic {
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.pricing-card .pricing-cta { margin-bottom: 24px; }
.pricing-plan-kicker {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 11px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(11, 99, 216, 0.08);
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pricing-card--highlight .pricing-plan-kicker {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

.pricing-card--highlight .pricing-price {
  color: #0b3591;
}

.pricing-card--highlight .pricing-amount {
  padding: 15px 16px;
  border: 1px solid rgba(32,96,232,0.14);
  border-radius: 16px;
  background: rgba(255,255,255,0.72);
}

.pricing-card .lp-btn-ghost.pricing-cta {
  border: 1px solid rgba(11, 99, 216, 0.2);
  background: #eef5ff;
  color: #0b3591;
  box-shadow: 0 10px 22px rgba(11, 99, 216, 0.08);
}

.pricing-card .lp-btn-ghost.pricing-cta:hover {
  background: #e2edff;
  border-color: rgba(11, 99, 216, 0.34);
}

.pricing-feature-list { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 13px; flex: 1; }
.pricing-feature-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 13.5px; line-height: 1.5; color: #405064; }
.pricing-feature-list li::before,
.pricing-feature-list li::after {
  content: none;
  display: none;
}
.pricing-feature-list li.pf-no { color: var(--muted); }
.pf-icon {
  flex-shrink: 0; width: 19px; height: 19px; margin-top: 1px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.pf-icon svg { width: 10px; height: 10px; }
.pricing-feature-list li.pf-yes .pf-icon { background: var(--success-soft); color: var(--teal); box-shadow: inset 0 0 0 1px rgba(34,197,94,0.32); }
.pricing-feature-list li.pf-no .pf-icon { background: #f1f3f8; color: #aab4c8; box-shadow: inset 0 0 0 1px #dde3f0; }
.pricing-allplans-note { text-align: center; font-size: 13.5px; color: var(--muted); margin: 32px 0 0; }
.pricing-allplans-note strong { color: var(--ink); font-weight: 700; }

/* Stats strip */
.pricing-stats-section { padding: 12px 56px 96px; }
.pricing-stats-strip {
  background: linear-gradient(180deg, #f7f9ff 0%, #eef3ff 100%);
  border: 1px solid var(--line);
  border-radius: 20px; padding: 44px 32px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  text-align: center;
}
.pricing-stat-num {
  display: block; font-size: 36px; font-weight: 900; letter-spacing: -1.2px; margin-bottom: 7px;
  background: linear-gradient(95deg, #2060e8, #22c55e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pricing-stat span { font-size: 13px; font-weight: 600; color: var(--muted); }

/* FAQ refresh — centered eyebrow + heading */
.pricing-faq-eyebrow {
  display: block; text-align: center;
  font-size: 12px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}

/* Closing CTA banner */
.pricing-final-cta-section { padding-top: 0; }
.pricing-cta-banner {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(120deg, #0f42b8 0%, #0b3591 50%, #082070 100%);
  border-radius: 22px; padding: 60px 40px; text-align: center;
  box-shadow: 0 30px 70px rgba(11,53,145,0.26);
}
.pricing-cta-banner > * { position: relative; z-index: 1; }
.pricing-cta-banner h2 { font-size: 32px; font-weight: 900; color: #fff; margin: 0 0 12px; letter-spacing: -0.7px; }
.pricing-cta-banner p { font-size: 15px; color: rgba(255,255,255,0.66); max-width: 520px; margin: 0 auto 30px; line-height: 1.75; }
.pricing-cta-banner-actions { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* Purchase modal */
.purchase-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  place-items: center;
  padding: clamp(14px, 3vw, 32px);
  overflow-x: hidden;
  overflow-y: auto;
}

.purchase-modal.open {
  display: grid;
}

.purchase-modal-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 12%, rgba(38, 145, 255, 0.2), transparent 34%),
    radial-gradient(circle at 80% 84%, rgba(34, 197, 94, 0.2), transparent 34%),
    rgba(2, 8, 28, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.purchase-modal-card {
  position: relative;
  z-index: 1;
  width: min(760px, calc(100vw - 28px));
  max-height: min(860px, calc(100dvh - 28px));
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 30px;
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 58%, #eef5ff 100%);
  box-shadow:
    0 42px 120px rgba(2, 8, 28, 0.42),
    inset 0 1px 0 rgba(255,255,255,0.82);
  scrollbar-gutter: stable;
}

.purchase-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.82);
  color: #102a5f;
  font-size: 23px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 12px 30px rgba(11, 53, 145, 0.16);
  transition: transform 0.18s, background 0.18s;
}

.purchase-modal-close:hover {
  transform: translateY(-1px);
  background: #fff;
}

.purchase-modal-head {
  margin: 0;
  padding: 30px 76px 26px 30px;
  border-bottom: 1px solid rgba(159, 179, 214, 0.32);
  background:
    radial-gradient(circle at 10% -20%, rgba(34, 197, 94, 0.18), transparent 38%),
    linear-gradient(135deg, #f9fffc 0%, #f7fbff 46%, #eef5ff 100%);
}

.purchase-modal-kicker,
.purchase-plan-label {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 10px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(11, 99, 216, 0.09);
  color: #0b3b93;
  font-size: 10.5px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.purchase-modal-head h2,
.purchase-summary-card h3 {
  margin: 0;
  color: #0e1f3d;
}

.purchase-modal-head h2 {
  font-size: clamp(26px, 4vw, 34px);
  letter-spacing: -1.1px;
}

.purchase-modal-head p,
.purchase-summary-card p {
  color: #63718c;
  line-height: 1.65;
}

.purchase-modal-head p {
  max-width: 580px;
  margin: 10px 0 0;
  font-size: 15px;
}

.purchase-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.purchase-trust-row span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 11px;
  border: 1px solid rgba(32, 96, 232, 0.14);
  border-radius: 999px;
  background: rgba(255,255,255,0.68);
  color: #31456b;
  font-size: 12px;
  font-weight: 850;
  box-shadow: 0 10px 24px rgba(21, 47, 89, 0.06);
}

.purchase-summary-card {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  margin: 24px 30px 18px;
  padding: 20px;
  border: 1px solid rgba(159, 179, 214, 0.36);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(250,252,255,0.92));
  box-shadow: 0 18px 42px rgba(21, 47, 89, 0.08);
}

.purchase-summary-card > div:first-child {
  min-width: 0;
}

.purchase-plan-price {
  min-width: 160px;
  padding: 18px 16px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 16% 12%, rgba(255,255,255,0.22), transparent 28%),
    linear-gradient(135deg, #092a78, #1451c9);
  color: #fff;
  text-align: center;
  box-shadow: 0 18px 34px rgba(11, 53, 145, 0.24);
}

.purchase-plan-price span {
  font-size: 16px;
  font-weight: 900;
  vertical-align: top;
}

.purchase-plan-price strong {
  font-size: 42px;
  line-height: 1;
  letter-spacing: -1px;
}

.purchase-plan-price em {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,0.72);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.purchase-form-grid {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 14px;
  margin: 0 30px;
}

.purchase-field {
  display: grid;
  gap: 7px;
  color: #34435e;
  font-size: 12px;
  font-weight: 900;
  min-width: 0;
}

.purchase-field input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 1px solid #c9d7ef;
  border-radius: 14px;
  background: rgba(255,255,255,0.92);
  color: #0e1f3d;
  padding: 11px 13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.74);
}

.purchase-field input:focus {
  outline: none;
  border-color: #2060e8;
  box-shadow: 0 0 0 3px rgba(32,96,232,0.13);
}

.purchase-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 30px;
  padding: 17px 20px;
  border: 1px solid rgba(34, 197, 94, 0.14);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 20%, rgba(34,197,94,0.12), transparent 30%),
    linear-gradient(120deg, #eff6ff, #f0fff6);
  color: #0e1f3d;
  font-weight: 900;
}

.purchase-total-row strong {
  font-size: 26px;
  color: #0b3591;
}

.purchase-payment-box {
  margin: 0 30px 18px;
  padding: 18px;
  border: 1px solid rgba(159, 179, 214, 0.38);
  border-radius: 20px;
  background: rgba(255,255,255,0.88);
  box-shadow: 0 16px 36px rgba(21, 47, 89, 0.07);
}

.purchase-payment-title {
  display: block;
  margin-bottom: 10px;
  color: #34435e;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.purchase-payment-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(11, 99, 216, 0.22);
  border-radius: 16px;
  background:
    radial-gradient(circle at 0% 0%, rgba(32,96,232,0.08), transparent 35%),
    linear-gradient(120deg, #f7fbff, #ffffff);
  color: #0e1f3d;
}

.purchase-payment-option input {
  accent-color: #0b63d8;
}

.purchase-card-icon {
  display: grid;
  place-items: center;
  flex: 0 0 54px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, #0b3591, #2060e8);
  color: #fff;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  box-shadow: 0 10px 20px rgba(11, 53, 145, 0.18);
}

.purchase-payment-option strong,
.purchase-payment-option em {
  display: block;
}

.purchase-payment-option strong {
  font-size: 14px;
}

.purchase-payment-option em {
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

.purchase-card-secure-note {
  margin-top: 10px;
  padding: 11px 13px;
  border: 1px solid rgba(34,197,94,0.16);
  border-radius: 14px;
  background: linear-gradient(135deg, #f0fdf4, #f7fffb);
  color: #166534;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

.purchase-card-form {
  display: grid;
  gap: 12px;
  margin: 0 30px 18px;
  padding: 18px;
  border: 1px solid rgba(159, 179, 214, 0.38);
  border-radius: 20px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 16px 36px rgba(21, 47, 89, 0.07);
}

.purchase-card-form-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 4px;
}

.purchase-card-form-head span {
  color: #0e1f3d;
  font-size: 15px;
  font-weight: 950;
}

.purchase-card-form-head strong {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.purchase-field--wide {
  width: 100%;
}

.purchase-card-row {
  display: grid;
  grid-template-columns: 1fr 0.8fr 1fr;
  gap: 12px;
}

.purchase-card-error {
  min-height: 18px;
  margin: 0;
  color: #b42318;
  font-size: 12px;
  font-weight: 850;
}

.purchase-next-steps {
  margin: 0 30px 22px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.purchase-next-steps li {
  position: relative;
  padding-left: 24px;
  color: #53627e;
  font-size: 13px;
  line-height: 1.5;
}

.purchase-next-steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #dcfce7;
  box-shadow: inset 0 0 0 1px rgba(34,197,94,0.34);
}

.purchase-next-steps li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 7px;
  width: 3px;
  height: 7px;
  border: solid #16a34a;
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

.purchase-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
  padding: 18px 30px 30px;
  border-top: 1px solid rgba(159, 179, 214, 0.28);
  background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(238,245,255,0.98));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.purchase-primary {
  flex: 1 1 260px;
  min-width: 230px;
  border-radius: 14px;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  box-shadow: 0 16px 38px rgba(34,197,94,0.3);
}

.purchase-secondary {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #c9d7ef;
  border-radius: 14px;
  background: rgba(255,255,255,0.92);
  color: #0b3591;
  font-size: 14px;
  font-weight: 850;
  box-shadow: 0 10px 24px rgba(21, 47, 89, 0.06);
}

@media (min-width: 760px) {
  .purchase-modal-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 16px;
  }

  .purchase-modal-head,
  .purchase-summary-card,
  .purchase-form-grid,
  .purchase-total-row,
  .purchase-next-steps,
  .purchase-actions {
    grid-column: 1 / -1;
  }

  .purchase-payment-box {
    grid-column: 1;
    margin-right: 0;
  }

  .purchase-card-form {
    grid-column: 2;
    margin-left: 0;
  }

  .purchase-card-row {
    grid-template-columns: 1fr 0.8fr;
  }

  .purchase-card-row .purchase-field:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .purchase-modal { padding: 10px; }
  .purchase-modal-card {
    width: min(100%, calc(100vw - 20px));
    max-height: calc(100dvh - 20px);
    border-radius: 22px;
  }
  .purchase-modal-head { padding: 26px 66px 22px 22px; }
  .purchase-summary-card,
  .purchase-form-grid,
  .purchase-total-row,
  .purchase-payment-box,
  .purchase-card-form,
  .purchase-next-steps {
    margin-left: 22px;
    margin-right: 22px;
  }
  .purchase-summary-card,
  .purchase-form-grid,
  .purchase-card-row {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }
  .purchase-plan-price { width: 100%; }
  .purchase-card-form-head {
    flex-direction: column;
  }
  .purchase-card-form-head strong {
    text-align: left;
  }
  .purchase-actions {
    padding: 18px 22px 24px;
  }
  .purchase-actions button { width: 100%; }
}

@media (max-width: 420px) {
  .purchase-modal-head { padding-right: 22px; }
  .purchase-modal-close {
    position: sticky;
    top: 14px;
    float: right;
    margin: 14px 14px -52px 0;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Contact — "Why teams trust Braynix Books" benefit row
   ══════════════════════════════════════════════════════════════════════════ */
.contact-trust-section { padding-top: 0; }
.contact-trust-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.contact-trust-card {
  padding: 24px 22px; border-radius: 16px;
  background: linear-gradient(165deg, #f7f9ff 0%, #fff 100%);
  border: 1px solid var(--line);
  transition: transform 0.25s cubic-bezier(0.21,0.6,0.35,1), box-shadow 0.25s, border-color 0.25s;
}
.contact-trust-card:hover { transform: translateY(-5px); box-shadow: 0 18px 42px rgba(11,53,145,0.13); border-color: transparent; }
.contact-trust-num { display: block; font-size: 26px; font-weight: 900; color: var(--accent-strong); letter-spacing: -0.8px; margin-bottom: 6px; }
.contact-trust-card h4 { margin: 0 0 6px; font-size: 14.5px; font-weight: 800; color: var(--ink); }
.contact-trust-card p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.65; }

@media (max-width: 980px) {
  .platform-grid, .contact-trust-row, .pricing-stats-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .platform-grid, .contact-trust-row, .pricing-stats-strip, .about-stats-grid, .about-mv-grid, .about-team-grid, .pricing-cards-grid { grid-template-columns: 1fr; }
  .platform-intro { flex-direction: column; align-items: flex-start; }
}

/* ── Signup / Login split-screen pages ── */
.auth-page-bg {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
}

/* LEFT: Dark brand panel */
.auth-page-left {
  flex: 0 0 52%;
  background: linear-gradient(145deg, #0d3da8 0%, #0b3591 22%, #071f6e 62%, #04113a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 72px;
  position: relative;
  overflow: hidden;
}
.auth-page-left::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

/* Decorative orbs */
.ap-orb { position: absolute; border-radius: 50%; pointer-events: none; }
.ap-orb--1 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(32,96,232,0.30) 0%, transparent 65%);
  top: -160px; right: -130px;
}
.ap-orb--2 {
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(34,197,94,0.18) 0%, transparent 65%);
  bottom: -90px; left: -70px;
}
.ap-orb--3 {
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(34,197,94,0.12) 0%, transparent 65%);
  top: 58%; right: 9%;
}

.ap-brand-content { position: relative; z-index: 1; max-width: 400px; width: 100%; }

.ap-brand-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 36px;
}
.ap-brand-logo {
  width: 62px; height: 62px; border-radius: 50%;
  object-fit: contain;
  background: #fff;
  padding: 5px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.18);
}
.ap-brand-name { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -0.2px; }

.ap-brand-headline {
  font-size: 40px; font-weight: 900; color: #fff;
  line-height: 1.08; letter-spacing: -1.2px; margin: 0 0 18px;
}
.ap-brand-sub {
  font-size: 15px; color: rgba(255,255,255,0.62);
  line-height: 1.75; margin: 0 0 36px;
}

.ap-trust-list { display: flex; flex-direction: column; gap: 22px; margin-bottom: 40px; }
.ap-trust-item { display: flex; align-items: flex-start; gap: 14px; }
.ap-check {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--teal); position: relative; margin-top: 2px;
  box-shadow: 0 0 14px rgba(34,197,94,0.45);
}
.ap-check::after {
  content: ''; position: absolute;
  left: 6px; top: 3px; width: 5px; height: 10px;
  border: 2.5px solid #fff;
  border-top: none; border-left: none;
  transform: rotate(42deg);
}
.ap-trust-item strong { display: block; font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.ap-trust-item span { font-size: 13px; color: rgba(255,255,255,0.52); line-height: 1.45; }

.ap-stats-row {
  display: flex; align-items: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 12px; padding: 18px 24px;
}
.ap-mini-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ap-mini-stat strong { font-size: 18px; font-weight: 800; color: #fff; }
.ap-mini-stat span { font-size: 11px; color: rgba(255,255,255,0.48); text-transform: uppercase; letter-spacing: 0.5px; }
.ap-mini-stat-div { width: 1px; height: 30px; background: rgba(255,255,255,0.18); margin: 0 8px; }

/* RIGHT: Soft gradient form panel */
.auth-page-right {
  flex: 0 0 48%;
  background: linear-gradient(160deg, #e8f0fe 0%, #eef3fc 50%, #f0f5ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 56px;
  overflow-y: auto;
  position: relative;
}
.auth-page-right::before {
  content: '';
  position: absolute;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(32,96,232,0.08) 0%, transparent 70%);
  top: -80px; right: -60px; pointer-events: none;
}
.auth-page-right::after {
  content: '';
  position: absolute;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(32,96,232,0.06) 0%, transparent 70%);
  bottom: -60px; left: -40px; pointer-events: none;
}

.auth-page-panel {
  width: 100%; max-width: 400px;
  background: #fff;
  border-radius: 24px;
  padding: 48px 44px;
  box-shadow: 0 24px 64px rgba(11,53,145,0.12), 0 4px 16px rgba(11,53,145,0.06);
  position: relative; z-index: 1;
}

.auth-page-top { text-align: center; margin-bottom: 36px; }
.auth-page-logo {
  width: 82px; height: 82px; border-radius: 50%;
  object-fit: contain;
  background: #fff;
  padding: 6px;
  box-shadow: 0 16px 38px rgba(11,53,145,0.18), 0 0 0 1px rgba(226,232,240,.9);
  display: block; margin: 0 auto 18px;
}

.auth-page-logo[data-page-view] {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, outline-color 0.15s ease;
}

.auth-page-logo[data-page-view]:hover,
.auth-page-logo[data-page-view]:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(11,53,145,0.22), 0 0 0 1px rgba(37,99,235,0.2);
  outline: 3px solid rgba(37,99,235,0.18);
  outline-offset: 3px;
}
.auth-page-title {
  font-size: 26px; font-weight: 900; color: var(--ink);
  margin: 0 0 8px; letter-spacing: -0.5px;
}
.auth-page-sub { font-size: 14px; color: var(--ink2); margin: 0; line-height: 1.55; }

/* Google / social buttons */
.auth-social { margin-bottom: 0; }
.auth-google-btn {
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.auth-google-btn:hover {
  background: var(--surface-soft);
  border-color: var(--ink3);
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  transform: translateY(-1px);
}
.auth-google-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* "or continue with email" divider */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0;
  color: var(--ink3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.auth-divider span { white-space: nowrap; }

.auth-page-form { display: flex; flex-direction: column; gap: 18px; }

.auth-page-submit {
  height: 52px; width: 100%;
  background: linear-gradient(135deg, #1248b8 0%, #1a52d4 50%, #2060e8 100%);
  color: #fff;
  font-size: 16px; font-weight: 800;
  border-radius: 12px; border: none; cursor: pointer;
  margin-top: 6px;
  letter-spacing: -0.1px;
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
  box-shadow: 0 6px 22px rgba(18,72,184,0.38), inset 0 1px 0 rgba(255,255,255,0.15);
}
.auth-page-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(18,72,184,0.45), inset 0 1px 0 rgba(255,255,255,0.15);
  filter: brightness(1.05);
}
.auth-page-submit:active { transform: translateY(0); }
.auth-page-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }

.auth-page-footer {
  margin-top: 32px; text-align: center;
  display: flex; flex-direction: column; gap: 14px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.auth-page-footer p { font-size: 14px; color: var(--ink2); margin: 0; }
.auth-link-btn {
  background: none; border: none; cursor: pointer;
  color: var(--accent); font-weight: 700; font-size: 14px;
  padding: 0; text-decoration: none;
  transition: color 0.15s;
}
.auth-link-btn:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
.auth-back-btn {
  background: none; border: none; cursor: pointer;
  color: var(--ink3); font-size: 13px; font-weight: 500;
  padding: 0; transition: color 0.15s;
}
.auth-back-btn:hover { color: var(--ink2); }

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--bg);
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 24px;
}

.auth-tab {
  padding: 9px;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
  transition: background 0.15s, color 0.15s;
}

.auth-tab.active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.10);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-hidden {
  display: none !important;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-field label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.auth-field input {
  height: 48px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 0 14px;
  font-size: 15px;
  color: var(--ink);
  background: var(--surface-soft);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.auth-field input:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(32, 96, 232, 0.12);
}

.auth-field input::placeholder { color: var(--ink3); }

.auth-error {
  margin: 0;
  font-size: 13px;
  color: var(--danger);
  min-height: 18px;
}

.auth-success {
  margin: 0;
  font-size: 13px;
  color: var(--success);
  min-height: 18px;
  background: var(--success-soft);
  border: 1px solid rgba(34,197,94,0.3);
  border-radius: 8px;
  padding: 10px 14px;
  display: none;
}
.auth-success.is-visible { display: block; }

.auth-forgot-row {
  display: flex;
  justify-content: flex-end;
  margin-top: -4px;
  margin-bottom: 4px;
}

.auth-submit {
  height: 44px;
  font-size: 15px;
  font-weight: 750;
  margin-top: 4px;
}

/* Sidebar account/logout */
.sidebar-account {
  margin: 10px 12px 4px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}

.sidebar-account-label {
  display: block;
  margin: 0 0 7px;
  color: rgba(237, 245, 251, 0.62);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.sidebar-logout {
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  text-align: center;
  font-size: 13px;
  font-weight: 850;
  transition: background 0.15s, color 0.15s;
}

.sidebar-logout:hover {
  background: rgba(220, 38, 38, 0.92);
  color: #edf5fb;
}

.topbar-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--ink2);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
  flex-shrink: 0;
}
.topbar-theme-toggle:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}
.topbar-theme-toggle .theme-icon--moon { display: none; }
.topbar-theme-toggle .theme-icon--sun  { display: block; }
.topbar-theme-toggle.is-dark .theme-icon--moon { display: block; }
.topbar-theme-toggle.is-dark .theme-icon--sun  { display: none; }

.topbar-logout {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid rgba(220, 38, 38, 0.18);
  border-radius: 8px;
  background: #fff7f7;
  color: #b42318;
  font-size: 13px;
  font-weight: 850;
  box-shadow: 0 8px 18px rgba(180, 35, 24, 0.08);
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
}

.topbar-logout:hover {
  background: #fff1f1;
  border-color: rgba(220, 38, 38, 0.32);
  transform: translateY(-1px);
}

.subscription-badge {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid rgba(34, 197, 94, 0.22);
  border-radius: 999px;
  background: #f0fdf4;
  color: #166534;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

button[disabled] {
  cursor: not-allowed;
  opacity: 0.58;
}

.app-shell {
  display: grid;
  grid-template-columns: 278px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100vh;
  overflow: auto;
  padding: 16px 12px;
  background: var(--sidebar);
  color: #edf5fb;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 6px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.brand-block > div {
  min-width: 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 15px;
  background: #fff;
  overflow: hidden;
  padding: 6px;
  box-shadow: 0 12px 28px -20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.32);
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
}

.sidebar-close {
  display: none;
}

.eyebrow {
  margin: 0 0 4px;
  letter-spacing: 0;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
}

.sidebar .eyebrow {
  color: #9fb6c9;
}

.brand-block h1,
.topbar h2,
.section-header h3,
.section-header h4 {
  margin: 0;
  letter-spacing: 0;
}

.brand-block h1 {
  font-size: 17px;
  line-height: 1.15;
}

.nav-list {
  display: grid;
  gap: 12px;
}

.nav-group {
  display: grid;
  gap: 3px;
}

.nav-group + .nav-group {
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-group-label {
  display: block;
  padding: 0 10px 5px;
  color: #8ea8bb;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: var(--radius);
  background: transparent;
  color: #d9e7f2;
  text-align: left;
  font-size: 14px;
  transition: background 160ms ease, color 160ms ease;
}

.nav-item::before {
  content: attr(data-icon);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #bcd0e1;
  font-size: 11px;
  font-weight: 900;
}

.nav-item.nested {
  padding-left: 18px;
}

.nav-item:hover,
.nav-item.active {
  background: var(--sidebar-soft);
  color: #fff;
}

.nav-item:hover::before,
.nav-item.active::before {
  background: var(--teal);
  color: #fff;
}

.sidebar-card {
  margin-top: auto;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
}

.sidebar-card strong {
  display: block;
  margin: 4px 0 12px;
  color: #fff;
  font-size: 20px;
}

.sidebar-mini-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 10px;
  color: #c4d4e2;
  font-size: 12px;
}

.sidebar-mini-grid b {
  color: #fff;
}

.workspace {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: 18px 22px 28px;
}

/* Mobile sidebar toggle — hidden on desktop */
.sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.sidebar-toggle:hover { background: var(--surface-soft); }

/* Drawer backdrop — hidden on desktop */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s;
}
.sidebar-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.topbar h2 {
  font-size: 26px;
  line-height: 1.15;
}

.topbar-actions,
.inline-actions,
.quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.topbar-search {
  flex: 1 1 280px;
  max-width: 420px;
}

.topbar-search input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface-soft);
  padding: 8px 11px;
  color: var(--ink);
}

.ghost-button,
.primary-button,
.danger-button,
.table-action {
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 750;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.ghost-button {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}

.ghost-button:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.primary-button {
  background: var(--accent);
  color: #fff;
}

.primary-button:hover {
  background: var(--accent-strong);
}

.danger-button {
  border: 1px solid var(--danger-soft);
  background: var(--surface);
  color: var(--danger);
}

.danger-button:hover {
  background: var(--danger-soft);
}

.table-action {
  min-height: 30px;
  padding: 5px 9px;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.table-action:hover {
  background: var(--accent-soft);
}

.convert-action {
  background: var(--accent);
  color: #fff;
}

.convert-action:hover {
  background: var(--accent-strong);
}

.danger-lite {
  background: var(--danger-soft);
  color: var(--danger);
}

.page-section {
  display: none;
  animation: reveal 180ms ease;
}

.page-section.active {
  display: block;
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.panel,
.metric-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.panel {
  padding: 16px;
}

.metric-card {
  padding: 14px;
}

.setup-layout,
.content-grid,
.split-layout,
.report-grid {
  display: grid;
  gap: 16px;
}

.setup-layout {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
}

.content-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  margin-top: 16px;
}

.split-layout {
  grid-template-columns: minmax(330px, 0.58fr) minmax(0, 1.42fr);
}

.report-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 16px;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

/* ── Dashboard header ─────────────────────────────────────────────────────── */
.dash-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 4px;
  padding: 20px 24px 20px;
  background: linear-gradient(135deg, #0b3591 0%, #1652cc 55%, #2060e8 100%);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 24px rgba(11,53,145,0.22);
}
.dash-header-left { display: flex; flex-direction: column; gap: 4px; }
.dash-greeting { font-size: 13px; color: rgba(255,255,255,0.7); font-weight: 500; }
.dash-company {
  font-size: 22px; font-weight: 800; color: #fff; margin: 0;
  letter-spacing: -0.3px;
}
.dash-period { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.dash-period-pill {
  font-size: 12px; color: rgba(255,255,255,0.75); font-weight: 500;
  background: rgba(255,255,255,0.12); padding: 3px 10px; border-radius: 20px;
}
.dash-profit-pill {
  font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px;
}
.dash-profit-pill--pos { background: rgba(34,197,94,0.25); color: var(--success); }
.dash-profit-pill--neg { background: rgba(191,52,45,0.3); color: var(--danger); }
.dash-header-actions { display: flex; gap: 8px; align-items: center; }
.dash-header-actions .ghost-button {
  background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3);
  color: #fff;
}
.dash-header-actions .ghost-button:hover {
  background: rgba(255,255,255,0.25); color: #fff; border-color: rgba(255,255,255,0.6);
}
.dash-header-actions .primary-button {
  background: #fff; color: var(--accent-strong); border: none; font-weight: 700;
}
.dash-header-actions .primary-button:hover { background: #f0f4ff; }

/* ── Quick Actions strip ───────────────────────────────────────────────────── */
.dash-quick-actions {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 4px;
}
.dash-quick-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, transform 0.12s, box-shadow 0.12s;
}
.dash-quick-btn:hover {
  background: var(--accent-soft); border-color: var(--accent);
  color: var(--accent-strong); transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(32,96,232,0.1);
}

.dashboard-focus-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: 14px;
  margin: 10px 0 16px;
}

.dashboard-focus-grid--single {
  grid-template-columns: 1fr;
}

.dashboard-setup-panel,
.dashboard-empty-guide {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.dashboard-setup-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.dashboard-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboard-setup-head h3,
.dashboard-empty-guide h3 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 850;
}

.dashboard-setup-head strong {
  color: var(--accent-strong);
  font-size: 18px;
  line-height: 1;
}

.dashboard-setup-progress {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

.dashboard-setup-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--success));
}

.dashboard-setup-list {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.dashboard-setup-step {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 88px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  color: var(--ink);
  text-align: left;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}

.dashboard-setup-step:hover {
  border-color: var(--accent);
  background: #fff;
  transform: translateY(-1px);
}

.dashboard-setup-step.is-done {
  border-color: rgba(34, 197, 94, 0.32);
  background: var(--success-soft);
}

.dashboard-setup-check {
  justify-self: start;
  min-width: 34px;
  padding: 2px 6px;
  border-radius: 5px;
  background: #fff;
  color: var(--ink2);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.dashboard-setup-step.is-done .dashboard-setup-check {
  background: var(--success);
  color: #fff;
}

.dashboard-setup-copy {
  display: grid;
  gap: 2px;
}

.dashboard-setup-copy strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.dashboard-setup-copy small {
  color: var(--ink3);
  font-size: 11px;
  line-height: 1.35;
}

.dashboard-empty-guide {
  display: grid;
  align-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #f8fbff 0%, #f0fdf4 100%);
}

.dashboard-empty-guide p {
  margin: 0;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.45;
}

.dashboard-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}

.dashboard-empty-guide .dashboard-empty-actions {
  justify-content: flex-start;
}

.dashboard-empty-action {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}

.dashboard-empty-action:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-1px);
}

/* Legacy title (keep for any remaining code) */
.zoho-home-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.zoho-home-title h3 {
  margin: 0;
  font-size: 24px;
}

.zoho-home-title p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.zoho-home-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* ── KPI summary bar ──────────────────────────────────────────────────────── */
.zoho-summary-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 4px;
}

.zoho-summary-tile {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 20px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  position: relative; overflow: hidden;
}
.zoho-summary-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(11,53,145,0.12);
  border-color: var(--accent);
}
.zoho-summary-tile::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.zoho-summary-tile--blue   { background: linear-gradient(150deg, #eff6ff 0%, #dbeafe 100%); }
.zoho-summary-tile--orange { background: linear-gradient(150deg, #fffbeb 0%, #fef3c7 100%); }
.zoho-summary-tile--green  { background: linear-gradient(150deg, #f0fdf4 0%, #dcfce7 100%); }
.zoho-summary-tile--blue::after   { background: linear-gradient(90deg, #2060e8, #60a5fa); }
.zoho-summary-tile--orange::after { background: linear-gradient(90deg, #d97706, #fbbf24); }
.zoho-summary-tile--green::after  { background: linear-gradient(90deg, #16a34a, #22c55e); }

.zoho-summary-tile-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px; flex-shrink: 0;
}
.zoho-summary-tile--blue   .zoho-summary-tile-icon { background: var(--accent-soft); color: var(--accent); }
.zoho-summary-tile--orange .zoho-summary-tile-icon { background: var(--warning-soft); color: var(--warning); }
.zoho-summary-tile--green  .zoho-summary-tile-icon { background: var(--success-soft); color: var(--success); }

.zoho-summary-label {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--ink2);
}

.zoho-summary-value {
  font-size: 30px; font-weight: 800; color: var(--ink);
  line-height: 1.1; margin: 4px 0 2px; letter-spacing: -0.5px;
}

.zoho-summary-split {
  display: flex; gap: 20px;
  margin-top: 8px; padding-top: 10px;
  border-top: 1px solid var(--line);
}

.zoho-summary-split span {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 11px; color: var(--ink2); font-weight: 600;
}

.zoho-summary-split b {
  font-size: 13px; color: var(--ink); font-weight: 700;
}

.zoho-summary-count {
  margin-top: 5px; font-size: 12px; color: var(--ink3);
}

/* ── Recent Activity feed ─────────────────────────────────────────────────── */
.zoho-activity-feed { display: flex; flex-direction: column; gap: 3px; }

.zoho-activity-row {
  display: grid;
  grid-template-columns: 72px 1fr 1fr auto auto;
  align-items: center; gap: 8px;
  width: 100%; padding: 9px 10px; border-radius: var(--radius);
  background: transparent; color: var(--ink);
  text-align: left; font-size: 13px;
  transition: background 0.12s;
}
.zoho-activity-row:hover { background: var(--accent-soft); }

.zoho-activity-type {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 7px; border-radius: 5px; white-space: nowrap;
}
/* Color by type */
.zoho-activity-type--invoice  { background: var(--accent-soft);   color: var(--accent); }
.zoho-activity-type--payment  { background: var(--success-soft);  color: var(--success); }
.zoho-activity-type--payment-made { background: #e0f2fe; color: #0369a1; }
.zoho-activity-type--bill     { background: var(--warning-soft);  color: var(--warning); }
.zoho-activity-type--expense  { background: #fce7f3; color: #9d174d; }
.zoho-activity-type--receipt  { background: #ede9fe; color: #6d28d9; }
/* fallback */
.zoho-activity-type:not([class*="--"]) { background: var(--accent-soft); color: var(--accent); }

.zoho-activity-ref {
  font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zoho-activity-party {
  color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zoho-activity-row b { font-size: 13px; font-weight: 700; white-space: nowrap; }
.zoho-activity-row small { font-size: 11px; color: var(--ink3); white-space: nowrap; }

.zoho-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.zoho-widget {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s;
}
.zoho-widget:hover { box-shadow: var(--shadow); }

.zoho-widget-wide { grid-column: span 2; }

.zoho-widget-head {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px; margin-bottom: 16px;
}

.zoho-widget-head h3 {
  margin: 0; color: var(--ink); font-size: 15px; font-weight: 800;
  letter-spacing: -0.2px;
}
.zoho-widget-sub {
  margin: 3px 0 0; font-size: 12px; color: var(--ink3); font-weight: 400;
}

.zoho-filter,
.zoho-segment {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--ink2);
  font-size: 12px;
  font-weight: 700;
}

.zoho-filter {
  padding: 5px 9px;
}

.zoho-segment {
  display: inline-flex;
  overflow: hidden;
  padding: 2px;
}

.zoho-segment span {
  display: grid;
  place-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 4px;
}

.zoho-segment .active {
  background: var(--surface);
  color: var(--accent-strong);
  box-shadow: 0 1px 4px rgba(24, 34, 45, 0.08);
}

.zoho-small-label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.zoho-money-total {
  display: block;
  margin: 6px 0 4px;
  color: var(--ink);
  font-size: 26px;
  line-height: 1.1;
}

.zoho-money-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
}

.zoho-money-split button {
  display: grid;
  gap: 5px;
  min-height: 84px;
  padding: 12px;
  background: var(--surface-soft);
  color: var(--ink);
  text-align: left;
}

.zoho-money-split button:hover {
  background: var(--surface);
}

.zoho-money-split span,
.zoho-cashflow-stats span,
.zoho-income-summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.zoho-money-split b {
  font-size: 18px;
}

.zoho-cashflow {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

.zoho-cashflow-stats {
  display: grid;
  gap: 10px;
  align-content: start;
}

.zoho-cashflow-stats > div,
.zoho-income-summary > div {
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}
.zoho-cashflow-stat { padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.zoho-cashflow-stat--balance { background: var(--surface-soft); }
.zoho-cashflow-stat--in      { background: var(--success-soft, #f0fdf4); border-color: #bbf7d0; }
.zoho-cashflow-stat--out     { background: var(--danger-soft, #fef2f2); border-color: #fecaca; }

.zoho-cashflow-stats strong,
.zoho-income-summary strong {
  display: block;
  margin-top: 5px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.zoho-flow-chart,
.zoho-income-chart {
  display: grid;
  grid-template-columns: repeat(6, minmax(54px, 1fr));
  gap: 10px;
  align-items: end;
  min-height: 220px;
  padding: 8px 4px 0;
}

.zoho-flow-month,
.zoho-income-month {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
}

.zoho-flow-bars,
.zoho-income-bars {
  display: flex;
  align-items: end;
  gap: 5px;
  width: 100%;
  max-width: 68px;
  height: 170px;
  padding: 0 6px;
  border-bottom: 1px solid var(--line-strong);
}

.zoho-flow-bars span,
.zoho-income-bars span {
  flex: 1;
  min-height: 0;
  border-radius: 5px 5px 0 0;
}

.zoho-flow-bars .in,
.zoho-income-bars .income {
  background: var(--teal);
}

.zoho-flow-bars .out,
.zoho-income-bars .expense {
  background: var(--accent);
}

.zoho-flow-month b,
.zoho-income-month b {
  color: var(--muted);
  font-size: 12px;
}

.zoho-income-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.zoho-income-stat {
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.zoho-income-stat--income  { background: var(--success-soft, #f0fdf4); border-color: #bbf7d0; }
.zoho-income-stat--expense { background: var(--danger-soft, #fef2f2); border-color: #fecaca; }
.zoho-income-stat--profit  { background: var(--accent-soft); border-color: var(--line-strong); }

.zoho-expense-list,
.zoho-bank-list,
.zoho-watchlist {
  display: grid;
  gap: 6px;
}

.zoho-expense-row,
.zoho-bank-row,
.zoho-watch-row {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  color: var(--ink);
  text-align: left;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}

.zoho-expense-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto 50px;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  background: linear-gradient(90deg, var(--accent-soft) var(--pct, 0%), var(--surface-soft) var(--pct, 0%));
}

.zoho-expense-row:hover,
.zoho-bank-row:hover,
.zoho-watch-row:hover {
  border-color: var(--accent);
  background: #fff;
  transform: translateX(2px);
}

.zoho-dot {
  width: 10px; height: 10px; border-radius: 999px; flex-shrink: 0;
}

.zoho-expense-row b,
.zoho-bank-row b,
.zoho-watch-row b { font-size: 13px; font-weight: 700; }

.zoho-expense-row small { color: var(--ink2); text-align: right; font-size: 12px; }

.zoho-project-card {
  display: grid;
  justify-items: start;
  gap: 8px;
  min-height: 172px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #f8fbff 0%, #eef8f2 100%);
}

.zoho-project-card > strong {
  color: var(--accent-strong);
  font-size: 42px;
  line-height: 1;
}

.zoho-project-card > span,
.zoho-project-card div span {
  color: var(--muted);
  font-size: 13px;
}

.zoho-project-card div {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.zoho-bank-row {
  display: flex; align-items: center; gap: 12px;
  min-height: 58px; padding: 12px 14px;
}
.zoho-bank-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--surface-soft); color: var(--ink2); flex-shrink: 0; }
.zoho-bank-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.zoho-bank-info span { font-size: 13px; font-weight: 600; color: var(--ink); }
.zoho-bank-info small { font-size: 11px; color: var(--ink2); }
.zoho-bank-row > b { font-size: 14px; font-weight: 800; white-space: nowrap; }

.zoho-watch-row span {
  display: grid;
  gap: 2px;
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
}

.zoho-watch-row span small {
  color: var(--ink3);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.zoho-watch-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 42px; padding: 10px 14px 10px 12px;
  border-left-width: 3px;
}
.zoho-watch-row--pos { border-left-color: var(--success) !important; }
.zoho-watch-row--neg { border-left-color: var(--danger) !important; }

.zoho-empty-small {
  display: grid; place-items: center;
  min-height: 120px; padding: 20px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  color: var(--ink2); background: var(--surface-soft);
  text-align: center; font-size: 13px; line-height: 1.5;
}

.dashboard-empty-card {
  align-content: center;
  gap: 7px;
}

.dashboard-empty-card strong,
.dashboard-empty-chart-copy strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
}

.dashboard-empty-card span,
.dashboard-empty-chart-copy span {
  color: var(--ink2);
  font-size: 13px;
}

.dashboard-empty-chart {
  display: grid;
  grid-template-columns: minmax(180px, 0.56fr) minmax(220px, 0.44fr);
  align-items: center;
  gap: 18px;
  min-height: 250px;
  padding: 18px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-soft);
}

.dashboard-empty-chart-bars {
  display: flex;
  align-items: end;
  gap: 10px;
  height: 150px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line-strong);
}

.dashboard-empty-chart-bars span {
  flex: 1;
  min-width: 12px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, rgba(32, 96, 232, 0.28), rgba(34, 197, 94, 0.34));
}

.dashboard-empty-chart-copy {
  display: grid;
  gap: 8px;
}

.dashboard-empty-chart-copy .dashboard-empty-actions {
  justify-content: flex-start;
}

.zoho-update-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.zoho-update-grid > div {
  display: grid;
  gap: 8px;
}

.dashboard-command {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  border-left: 4px solid var(--accent);
}

.dashboard-command h3 {
  margin: 0;
  font-size: 22px;
}

.dashboard-command p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.command-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.quick-create-strip {
  display: grid;
  grid-template-columns: repeat(8, minmax(92px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.quick-create-tile {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-height: 78px;
  padding: 10px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 6px 16px rgba(24, 34, 45, 0.05);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.quick-create-tile:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 10px 24px rgba(24, 34, 45, 0.09);
}

.quick-create-tile span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 900;
}

.quick-create-tile strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.books-overview-grid,
.dashboard-widget-grid {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.books-overview-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-widget-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-total {
  display: block;
  margin: 2px 0 14px;
  font-size: 28px;
  line-height: 1.1;
}

.aging-list,
.pipeline-list,
.tile-list,
.mini-ledger ul {
  display: grid;
  gap: 8px;
}

.aging-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(104px, auto);
  gap: 10px;
  align-items: center;
  min-height: 30px;
  color: #405064;
  font-size: 13px;
}

.aging-row b {
  text-align: right;
}

.aging-meter {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-soft, #edf1f5);
}

.aging-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
}

.aging-card:nth-child(2) .aging-meter span {
  background: var(--warning);
}

.income-expense-bars {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}

.income-expense-bars > div {
  display: grid;
  gap: 5px;
}

.income-expense-bars span,
.mini-ledger-title span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.income-expense-bars strong {
  font-size: 18px;
}

.income-track span {
  background: var(--teal);
}

.expense-track span {
  background: var(--accent);
}

.mini-ledger {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.mini-ledger-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.mini-ledger ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mini-ledger li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 28px;
  color: #405064;
  font-size: 13px;
}

.pipeline-row,
.status-tile {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  color: var(--ink);
  text-align: left;
}

.pipeline-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px minmax(112px, auto);
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 9px 10px;
}

.pipeline-row:hover,
.status-tile:hover {
  border-color: var(--accent);
  background: #fff;
}

.pipeline-row span,
.status-tile span {
  color: #405064;
  font-weight: 750;
}

.pipeline-row b {
  display: grid;
  place-items: center;
  min-width: 30px;
  min-height: 26px;
  border-radius: 999px;
  background: #fff;
  color: var(--accent-strong);
}

.pipeline-row strong {
  text-align: right;
}

.pipeline-row.alert b,
.status-tile.alert strong {
  background: var(--danger-soft);
  color: var(--danger);
}

.tile-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.status-tile {
  display: grid;
  gap: 5px;
  min-height: 92px;
  padding: 11px;
}

.status-tile strong {
  display: inline-grid;
  place-items: center;
  width: max-content;
  min-width: 36px;
  min-height: 30px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 18px;
}

.status-tile small {
  color: var(--muted);
  line-height: 1.35;
}

.portal-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
}

.portal-card > div {
  min-height: 112px;
  padding: 14px;
  background: var(--surface-soft);
}

.portal-card strong {
  display: block;
  margin-top: 8px;
  font-size: 24px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.section-header h3 {
  font-size: 18px;
}

.section-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.metric-label,
.mini-stat-label {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.muted-copy {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.metric-card strong {
  display: block;
  margin: 6px 0;
  font-size: 22px;
  line-height: 1.18;
}

.metric-card.compact strong {
  font-size: 18px;
}

.metric-trend {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--teal-soft);
  color: var(--teal);
  font-size: 12px;
  font-weight: 800;
}

.metric-trend.alert {
  background: var(--danger-soft);
  color: var(--danger);
}

.form-grid,
.queue-list,
.setup-list,
.bank-grid {
  display: grid;
  gap: 10px;
}

.edit-banner {
  padding: 9px 10px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 850;
}

.compact-form {
  margin-bottom: 14px;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.field label {
  display: block;
  margin-bottom: 5px;
  color: #405064;
  font-size: 13px;
  font-weight: 750;
}

.field input,
.field select,
.field textarea,
.line-editor input,
.line-editor select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  padding: 8px 10px;
  color: var(--ink);
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.line-editor input:focus,
.line-editor select:focus {
  outline: 2px solid #c4e2f8;
  border-color: var(--accent);
}

.field textarea {
  min-height: 88px;
  resize: vertical;
}

.customer-picker {
  display: grid;
  gap: 10px;
}

.inline-customer-fields {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.customers-module,
.vendors-module {
  display: grid;
  gap: 16px;
}

.customer-create-panel {
  display: none;
  padding: 0;
  overflow: hidden;
}

.customer-create-panel.open {
  display: block;
}

.customer-form-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 30px;
  border-bottom: 1px solid var(--line);
}

.customer-form-title-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.customer-title-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}

.customer-close-button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--ink2);
  cursor: pointer;
  flex-shrink: 0;
}

.customer-close-button:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.customer-form-title h3 {
  margin: 0;
  color: var(--ink);
  font-size: 30px;
  font-weight: 500;
}

.customer-zoho-form {
  display: grid;
}

.customer-form-body {
  display: grid;
  gap: 26px;
  padding: 28px 30px 40px;
}

.customer-main-fields {
  display: grid;
  gap: 16px;
}

.customer-form-line {
  display: grid;
  grid-template-columns: 190px minmax(0, 640px);
  gap: 18px;
  align-items: center;
}

.customer-form-line label,
.customer-line-label {
  color: var(--ink);
  font-size: 16px;
}

.info-dot {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  border: 1px solid var(--ink3);
  border-radius: 50%;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.customer-form-line input,
.customer-form-line select,
.customer-form-line textarea,
.customer-address-grid input,
.customer-address-grid select,
.customer-address-grid textarea {
  width: 100%;
  min-height: 43px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  padding: 9px 11px;
  color: var(--ink);
  font-size: 16px;
}

.customer-form-line textarea,
.customer-address-grid textarea {
  min-height: 96px;
  resize: vertical;
}

.customer-form-line input:focus,
.customer-form-line select:focus,
.customer-form-line textarea:focus,
.customer-address-grid input:focus,
.customer-address-grid select:focus,
.customer-address-grid textarea:focus {
  outline: 2px solid var(--accent);
  border-color: var(--accent);
}

.customer-radio-row,
.customer-check-row {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 43px;
}

.customer-radio-row label,
.customer-check-row {
  color: var(--ink);
  font-size: 16px;
}

.customer-radio-row input,
.customer-check-row input {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
}

.customer-contact-row {
  display: grid;
  grid-template-columns: 174px minmax(150px, 1fr) minmax(150px, 1fr);
  gap: 10px;
}

.customer-phone-row,
.customer-balance-row {
  display: grid;
  grid-template-columns: minmax(0, 262px) minmax(0, 262px);
  gap: 36px;
}

.customer-phone-group {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
}

.customer-phone-group select,
.customer-phone-group input,
.customer-addon-field span,
.customer-addon-field input {
  border-radius: 0;
}

.customer-phone-group select {
  border-radius: 6px 0 0 6px;
}

.customer-phone-group input {
  border-left: 0;
  border-radius: 0 6px 6px 0;
}

.customer-addon-field {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
}

.customer-addon-field span {
  display: grid;
  place-items: center;
  min-height: 43px;
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: 6px 0 0 6px;
  background: var(--surface-soft);
  color: var(--ink3);
  font-weight: 800;
}

.customer-addon-field input {
  border-radius: 0 6px 6px 0;
}

.customer-tabs {
  display: flex;
  gap: 32px;
  max-width: 1040px;
  margin-top: 22px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.customer-tab-button {
  position: relative;
  min-height: 44px;
  background: transparent;
  color: var(--ink2);
  white-space: nowrap;
  font-size: 16px;
}

.customer-tab-button.active {
  color: var(--ink);
  font-weight: 800;
}

.customer-tab-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.customer-tab-button.active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
}

.customer-tab-panel {
  display: none;
  max-width: 1040px;
}

.customer-tab-panel.active {
  display: block;
}

.customer-address-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.customer-upload-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink2);
  cursor: pointer;
}

.customer-file-note {
  margin: 8px 0 0;
  color: var(--ink3);
  font-size: 14px;
}

.customer-link-button {
  justify-self: start;
  background: transparent;
  color: var(--accent);
  font-size: 16px;
  padding: 0;
}

.customer-owner-note {
  margin: 44px 0 0;
  color: var(--ink3);
  font-size: 16px;
}

.customer-owner-note strong {
  color: var(--ink3);
}

.customer-owner-note span {
  color: var(--accent);
}

.customer-form-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 10px;
  padding: 20px 30px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 -8px 18px rgba(24, 34, 45, 0.06);
  z-index: 2;
}

.quotes-module {
  display: grid;
  gap: 16px;
}

.quote-create-panel {
  display: none;
  padding: 0;
  overflow: hidden;
}

.quote-create-panel.open {
  display: block;
}

.quote-form-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.quote-form-title > div {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.quote-form-title h3 {
  margin: 0;
  color: var(--ink);
  font-size: 30px;
  font-weight: 500;
}

.quote-title-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}

.quote-close-button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: transparent;
  color: var(--ink2);
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.quote-close-button:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.quote-zoho-form {
  display: grid;
}

.quote-form-body {
  display: grid;
  gap: 30px;
  padding: 0 28px 28px;
}

.quote-band {
  display: grid;
  gap: 14px;
  margin: 0 -28px;
  padding: 34px 28px 28px;
  background: var(--surface-soft);
}

.quote-details-grid,
.quote-spaced-grid {
  display: grid;
  grid-template-columns: minmax(0, 640px) minmax(0, 640px);
  gap: 16px 64px;
}

.quote-spaced-grid {
  padding: 26px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.quote-form-line {
  display: grid;
  grid-template-columns: 190px minmax(0, 410px);
  gap: 18px;
  align-items: center;
}

.quote-form-line.inline {
  grid-template-columns: 150px minmax(0, 410px);
}

.quote-form-line label {
  color: var(--ink);
  font-size: 16px;
}

.quote-form-line input,
.quote-form-line select,
.quote-form-line textarea,
.quote-item-table input,
.quote-item-table select,
.retainer-item-table input {
  width: 100%;
  min-height: 43px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  padding: 9px 11px;
  color: var(--ink);
  font-size: 16px;
}

.quote-form-line textarea {
  min-height: 54px;
  resize: vertical;
}

.quote-form-line input:focus,
.quote-form-line select:focus,
.quote-form-line textarea:focus,
.quote-item-table input:focus,
.quote-item-table select:focus,
.retainer-item-table input:focus {
  outline: 2px solid var(--accent);
  border-color: var(--accent);
}

.quote-customer-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
}

.quote-customer-picker select {
  border-radius: 6px 0 0 6px;
}

.quote-customer-picker button {
  border-radius: 0 6px 6px 0;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
}

.quote-help-text {
  margin: 7px 0 0;
  color: var(--ink3);
  font-size: 14px;
}

.quote-item-table {
  display: grid;
  gap: 14px;
}

.quote-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: var(--surface-soft);
}

.quote-item-head strong {
  color: var(--ink);
  font-size: 18px;
}

.quote-item-head button {
  background: transparent;
  color: var(--accent);
  font-size: 15px;
}

.quote-table-shell {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 0 0 8px 8px;
  background: var(--bg);
}

.quote-table-shell table {
  min-width: 1080px;
}

.quote-table-shell th {
  background: var(--surface-soft);
}

.quote-table-shell td:first-child {
  min-width: 420px;
}

.quote-table-shell td:first-child select {
  margin-bottom: 8px;
}

.quote-table-shell td:nth-child(2),
.quote-table-shell td:nth-child(3),
.quote-table-shell td:nth-child(4),
.quote-table-shell td:nth-child(6) {
  text-align: right;
}

.quote-table-shell td:nth-child(6) strong {
  display: block;
  padding-top: 9px;
  color: var(--ink);
  font-size: 17px;
}

.quote-discount-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
}

.quote-discount-input input {
  border-radius: 6px 0 0 6px;
}

.quote-discount-input span {
  display: grid;
  place-items: center;
  min-height: 43px;
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 6px 6px 0;
  background: var(--surface-soft);
}

.quote-line-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.quote-notes-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  gap: 40px;
  align-items: start;
}

.quote-notes-grid textarea,
.quote-terms-grid textarea {
  min-height: 76px;
}

.quote-total-card {
  display: grid;
  gap: 16px;
  padding: 20px;
  border-radius: 10px;
  background: var(--surface-soft);
}

.quote-total-card div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.quote-total-card div + div {
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 21px;
  font-weight: 800;
}

.quote-terms-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 28px;
  margin: 0 -28px;
  padding: 26px 28px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.quote-upload-block {
  display: grid;
  align-content: start;
  gap: 9px;
}

.quote-retainer-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 16px;
}

.quote-retainer-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.quote-form-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 28px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 -8px 18px rgba(24, 34, 45, 0.06);
  z-index: 2;
}

.quote-form-actions > span {
  margin-left: auto;
  color: var(--ink2);
}

.quote-form-actions > span button {
  background: transparent;
  color: var(--accent);
}

.retainer-module {
  display: grid;
  gap: 16px;
}

.retainer-form-title-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.retainer-form-title h3 {
  font-size: 30px;
}

.retainer-title-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}

.retainer-close-button {
  color: var(--ink2);
}

.retainer-number-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
}

.retainer-number-input input {
  border-radius: 6px 0 0 6px;
}

.retainer-number-input button {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-left: 0;
  border-radius: 0 6px 6px 0;
  background: var(--surface-soft);
  color: var(--accent);
}

.retainer-item-table {
  display: grid;
  gap: 16px;
  padding-top: 28px;
}

.retainer-table-shell {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}

.retainer-table-shell table {
  min-width: 920px;
}

.retainer-table-shell th {
  background: var(--surface-soft);
  color: var(--ink3);
}

.retainer-table-shell th:last-child,
.retainer-table-shell td:last-child {
  width: 310px;
  text-align: right;
}

.retainer-table-shell input {
  border: 0;
  border-radius: 0;
  min-height: 48px;
  background: transparent;
}

.retainer-table-shell input:focus {
  outline-offset: -2px;
}

.retainer-line-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 28px;
  align-items: center;
}

.retainer-line-footer .ghost-button {
  justify-self: start;
}

.retainer-total-line {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 8px 6px;
  color: var(--ink);
}

.retainer-notes-block {
  max-width: 530px;
}

.retainer-notes-block textarea {
  min-height: 68px;
}

.retainer-terms-grid {
  grid-template-columns: minmax(0, 860px);
}

.retainer-terms-grid textarea {
  min-height: 118px;
}

.so-module {
  display: grid;
  gap: 16px;
}

.so-form-title-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.so-form-title h3 {
  font-size: 26px;
  font-weight: 600;
}

.so-title-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}

.so-close-button {
  color: var(--ink2);
}

.so-zoho-form .quote-form-body {
  padding: 24px 32px 0;
}

.so-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  margin: 0 -32px;
  padding: 0 32px;
}

.so-details-grid .quote-form-line {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
  margin: 0;
}

.so-details-grid .quote-form-line label {
  min-width: 160px;
  font-size: 13px;
  color: var(--ink2);
}

.so-warehouse-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink2);
  border-bottom: 2px solid var(--accent);
  margin-bottom: 8px;
}

.so-warehouse-bar select {
  border: none;
  border-bottom: 2px solid var(--accent);
  border-radius: 0;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  padding: 2px 4px;
  cursor: pointer;
}

.so-form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ── Invoice Zoho-style panel ── */
.inv-module {
  display: grid;
  gap: 16px;
}

.inv-form-title h3 {
  font-size: 26px;
  font-weight: 600;
}

.inv-form-title-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.inv-title-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}

.inv-close-button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--ink2);
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.inv-close-button:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.inv-zoho-form .quote-form-body {
  padding: 24px 32px 0;
}

.inv-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 0 32px;
}

.inv-details-grid .quote-form-line {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
  margin: 0;
}

.inv-details-grid .quote-form-line label {
  min-width: 130px;
  font-size: 13px;
  color: var(--ink2);
}

.inv-terms-row,
.inv-branch-billing-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}

.inv-terms-row input[name="dueDate"] {
  flex: 1;
}

.inv-branch-billing-row select {
  flex: 1;
}

.inv-branch-billing-row textarea {
  flex: 2;
  min-height: 72px;
  resize: vertical;
}

.inv-description-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 32px;
  border-top: 1px solid var(--line);
}

.inv-description-row label {
  min-width: 130px;
  font-size: 13px;
  color: var(--ink2);
  padding-top: 6px;
}

.inv-description-row textarea {
  flex: 1;
  min-height: 56px;
  resize: vertical;
}

.inv-form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.record-link {
  display: grid;
  gap: 3px;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.record-link:hover strong {
  color: var(--accent);
}

.invoice-record-shell {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  min-height: 680px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}

.invoice-record-list {
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: var(--surface);
}

.invoice-record-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

.invoice-record-list-body {
  max-height: 680px;
  overflow: auto;
}

.invoice-record-list-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  transition: background 0.1s;
}

.invoice-record-list-item:hover,
.invoice-record-list-item.active {
  background: var(--accent-soft);
}

.invoice-record-list-main,
.invoice-record-list-side {
  display: grid;
  gap: 4px;
}

.invoice-record-list-main span,
.invoice-record-list-side em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.invoice-record-list-side {
  justify-items: end;
}

.invoice-record-detail {
  min-width: 0;
  overflow: auto;
  background: var(--bg);
}

.invoice-record-titlebar,
.invoice-record-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.invoice-record-titlebar {
  justify-content: space-between;
}

.invoice-record-titlebar h3 {
  margin: 0;
  font-size: 22px;
}

.invoice-record-toolbar {
  flex-wrap: wrap;
}

.table-action.primary-lite {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.invoice-next-panel,
.invoice-payments-panel {
  margin: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.invoice-next-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
}

.invoice-next-panel div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.invoice-payments-panel {
  overflow: hidden;
}

.invoice-payments-panel summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  font-weight: 700;
  color: var(--ink2);
  cursor: pointer;
}

.invoice-payments-panel summary span {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
}

.invoice-preview-paper {
  position: relative;
  max-width: 920px;
  margin: 26px auto 34px;
  padding: 58px 64px 48px;
  border: 1px solid #e5e7eb;
  background: #fff;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12);
}

.invoice-preview-ribbon {
  position: absolute;
  top: 20px;
  left: -9px;
  padding: 7px 18px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  transform: rotate(-45deg) translate(-24px, -18px);
}

.invoice-preview-ribbon.overdue {
  background: #f59e0b;
}

.invoice-preview-top,
.invoice-preview-meta {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.invoice-preview-top span,
.invoice-preview-meta span,
.invoice-preview-notes p {
  display: block;
  color: var(--ink2);
  line-height: 1.6;
}

.invoice-preview-title {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.invoice-preview-title h2 {
  margin: 0;
  color: var(--ink);
  font-size: 42px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.invoice-preview-title b {
  font-size: 18px;
}

.invoice-preview-meta {
  margin-top: 72px;
}

.invoice-preview-meta > div:last-child {
  display: grid;
  grid-template-columns: auto auto;
  gap: 12px 28px;
  align-content: start;
}

.invoice-preview-lines {
  width: 100%;
  margin-top: 28px;
  border-collapse: collapse;
}

.invoice-preview-lines th {
  padding: 11px 12px;
  background: #343835;
  color: #fff;
  text-align: left;
}

.invoice-preview-lines th:nth-child(n+3),
.invoice-preview-lines td:nth-child(n+3) {
  text-align: right;
}

.invoice-preview-lines td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--line);
}

.invoice-preview-lines td span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.invoice-preview-totals {
  display: grid;
  grid-template-columns: minmax(160px, auto) minmax(130px, auto);
  justify-content: end;
  gap: 14px 34px;
  margin-top: 18px;
  padding-right: 12px;
}

.invoice-preview-totals span,
.invoice-preview-totals strong {
  text-align: right;
}

.invoice-preview-totals .negative {
  color: var(--danger);
}

.invoice-preview-totals .balance {
  padding: 14px 12px;
  background: var(--surface-soft);
  font-size: 15px;
  font-weight: 700;
}

.invoice-preview-notes {
  margin-top: 62px;
}

.invoice-list-filter,
.invoice-icon-button,
.invoice-close-button,
.invoice-create-button,
.invoice-create-menu,
.invoice-more-button,
.inline-link-button {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.invoice-record-shell {
  border-radius: 0;
  min-height: 720px;
}

.invoice-record-panel {
  padding: 0;
  overflow: hidden;
}

.invoice-record-list-head {
  min-height: 56px;
}

.invoice-list-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 18px;
  font-weight: 800;
}

.invoice-list-filter span {
  color: var(--accent);
  font-size: 13px;
}

.invoice-record-list-actions,
.invoice-record-title-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.invoice-create-button,
.invoice-create-menu {
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 38px;
  background: var(--accent);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

.invoice-create-button {
  border-radius: 6px 0 0 6px;
}

.invoice-create-menu {
  min-width: 34px;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0 6px 6px 0;
  font-size: 12px;
}

.invoice-more-button,
.invoice-icon-button {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink2);
  font-size: 13px;
  transition: background 0.12s, color 0.12s;
}

.invoice-more-button:hover,
.invoice-icon-button:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.invoice-close-button {
  min-width: 36px;
  height: 36px;
  color: var(--danger);
  font-size: 18px;
}

.invoice-record-list-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: start;
  padding: 14px 12px;
}

.invoice-record-check {
  width: 14px;
  height: 14px;
  margin-top: 3px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--surface);
}

.invoice-record-list-main em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  letter-spacing: 0;
}

.invoice-record-list-main .invoice-record-overdue {
  color: #ff4f19;
  font-size: 13px;
  font-weight: 700;
}

.invoice-record-list-side strong {
  white-space: nowrap;
  color: var(--ink);
  font-size: 13px;
}

.inv-balance-due {
  display: block;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.invoice-record-titlebar {
  min-height: 68px;
  padding-left: 24px;
}

.invoice-record-toolbar {
  gap: 0;
  padding: 0 18px;
  min-height: 48px;
  background: var(--surface-soft);
}

.invoice-record-toolbar .table-action {
  min-height: 48px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink2);
  padding: 0 14px;
  font-size: 13px;
  transition: background 0.1s, color 0.1s;
}

.invoice-record-toolbar .table-action:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.invoice-record-toolbar .primary-lite {
  color: var(--accent);
  font-weight: 700;
}

.invoice-next-panel {
  display: grid;
  padding: 0;
}

.invoice-next-main,
.invoice-next-secondary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
}

.invoice-next-main {
  flex-wrap: wrap;
}

.invoice-next-secondary {
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--ink2);
  font-size: 13px;
}

.invoice-next-mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ede9fe;
  color: #7c3aed;
}

.invoice-gateway-icon {
  width: 18px;
  height: 14px;
  border: 1px solid #6b7280;
  border-radius: 3px;
  box-shadow: inset 0 -4px 0 #d1d5db;
}

.inline-link-button {
  display: inline;
  padding: 0;
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Sales Receipt Zoho-style panel ── */
.sr-module {
  display: grid;
  gap: 16px;
}

.sr-form-title-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sr-form-title h3 {
  font-size: 26px;
  font-weight: 600;
}

.sr-title-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}

.sr-close-button {
  color: var(--ink2);
}

.sr-zoho-form .quote-form-body {
  padding: 24px 32px 0;
}

.sr-top-band {
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
  margin-bottom: 0;
}

.sr-second-band {
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
  margin-bottom: 0;
}

.sr-payment-section {
  padding: 24px 0 8px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}

.sr-payment-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 16px;
}

.sr-payment-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.sr-payment-grid .quote-form-line {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
  margin: 0;
}

.sr-payment-grid .quote-form-line label {
  min-width: 130px;
  font-size: 13px;
  color: var(--ink2);
}

.sr-form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ── Payments Received Zoho-style panel ── */
.pmt-module {
  display: grid;
  gap: 16px;
}

.pmt-create-panel {
  display: none;
  background: var(--surface);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 0;
  overflow: hidden;
}

.pmt-create-panel.open {
  display: block;
}

.pmt-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px 16px;
  border-bottom: 1px solid var(--line);
}

.pmt-form-title-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pmt-title-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}

.pmt-form-title-text {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.pmt-close-btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--ink2);
  cursor: pointer;
  flex-shrink: 0;
}

.pmt-close-btn:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.pmt-zoho-form { display: flex; flex-direction: column; }

.pmt-form-body {
  padding: 24px 32px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.pmt-fields-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.pmt-form-line {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}

.pmt-fields-section .pmt-form-line:last-child { border-bottom: none; }

.pmt-label {
  min-width: 200px;
  font-size: 13px;
  color: var(--ink2);
  flex-shrink: 0;
}

.pmt-fields-section select,
.pmt-fields-section input[type="number"],
.pmt-fields-section input[type="date"],
.pmt-fields-section input[type="text"] {
  flex: 1;
  max-width: 480px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 14px;
}

.pmt-amount-input {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  flex: 1;
  max-width: 480px;
}

.pmt-currency {
  padding: 8px 10px;
  background: var(--surface-soft);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink2);
  border-right: 1px solid var(--line);
}

.pmt-amount-input input {
  flex: 1;
  border: none;
  padding: 8px 10px;
  font-size: 14px;
  outline: none;
}

.pmt-invoices-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pmt-invoices-bar {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pmt-invoices-bar strong {
  font-size: 15px;
  color: var(--ink);
}

.pmt-filter-label {
  font-size: 13px;
  color: var(--ink2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: default;
}

.pmt-clear-btn-link {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.pmt-table-shell {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: auto;
}

.pmt-invoice-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}

.pmt-invoice-table th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink3);
  background: var(--surface-soft);
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.pmt-invoice-table td {
  padding: 12px;
  font-size: 13px;
  color: var(--ink2);
  border-bottom: 1px solid var(--line);
}

.pmt-empty-row {
  text-align: center;
  color: var(--ink3);
  padding: 40px 12px !important;
}

.pmt-row-amount {
  width: 110px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 13px;
  text-align: right;
}

.pmt-received-on { color: var(--ink3); }

.pmt-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--surface-soft);
  border-top: 1px solid var(--line);
}

.pmt-list-note { font-size: 11px; color: var(--ink3); }

.pmt-table-total {
  display: flex;
  gap: 32px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink2);
}

.pmt-summary-box {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: flex-end;
  min-width: 380px;
}

.pmt-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink2);
}

.pmt-excess-row {
  color: var(--danger, #e53e3e);
  font-weight: 600;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.pmt-notes-field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink2);
  display: block;
  margin-bottom: 6px;
}

.pmt-notes-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px;
  font-size: 13px;
  resize: vertical;
}

.pmt-attachments-block {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pmt-attach-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink2);
}

.pmt-form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 16px 32px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.pmt-create-panel {
  border-radius: 0;
}

.pmt-form-header {
  min-height: 66px;
  padding: 14px 28px;
}

.pmt-form-body {
  padding: 0;
  gap: 0;
}

.pmt-top-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: 24px;
  align-items: center;
  padding: 26px 28px;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--line);
}

.pmt-top-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  max-width: 520px;
}

.pmt-customer-context {
  justify-self: stretch;
}

.pmt-customer-pill {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  width: 100%;
  padding: 13px 14px;
  border: 0;
  border-radius: 7px;
  background: #4b5570;
  color: #fff;
  text-align: left;
  cursor: default;
}

.pmt-customer-pill strong,
.pmt-customer-pill span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pmt-customer-pill span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}

.pmt-customer-pill b {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-size: 18px;
}

.pmt-amount-section,
.pmt-details-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 44px;
  padding: 26px 28px;
  border-bottom: 1px solid var(--line);
}

.pmt-details-section {
  align-items: start;
}

.pmt-top-fields .pmt-form-line,
.pmt-amount-section .pmt-form-line,
.pmt-details-section .pmt-form-line {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 0;
  border: 0;
}

.pmt-details-section .pmt-notes-inline {
  align-items: start;
}

.pmt-label {
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
  text-align: right;
}

.pmt-top-fields select,
.pmt-top-fields input,
.pmt-amount-section input,
.pmt-details-section select,
.pmt-details-section input,
.pmt-details-section textarea {
  width: 100%;
  max-width: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--surface);
  font-size: 14px;
  color: var(--ink);
}

.pmt-details-section textarea {
  min-height: 88px;
  resize: vertical;
}

.pmt-invoices-section {
  padding: 24px 28px 0;
}

.pmt-summary-box {
  margin: 22px 28px 0 auto;
}

.pmt-attachments-block {
  padding: 22px 28px;
  border-top: 1px solid var(--line);
}

.pmt-form-actions {
  position: sticky;
  bottom: 0;
  gap: 16px;
  padding: 14px 28px;
  background: var(--surface);
  box-shadow: 0 -5px 18px rgba(15, 23, 42, 0.06);
  z-index: 5;
}

/* ── Recurring Invoices Zoho-style panel ── */
.ri-module {
  display: grid;
  gap: 16px;
}

.ri-form-title-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ri-form-title h3 {
  font-size: 26px;
  font-weight: 600;
}

.ri-title-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}

.ri-close-button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--ink2);
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.ri-close-button:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.ri-zoho-form .quote-form-body {
  padding: 24px 32px 0;
}

.ri-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 0 32px;
}

.ri-details-grid .quote-form-line {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
  margin: 0;
}

.ri-details-grid .quote-form-line label {
  min-width: 140px;
  font-size: 13px;
  color: var(--ink2);
  flex-shrink: 0;
}

.ri-start-ends-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  grid-column: span 2;
}

.ri-start-ends-row input[type="date"] {
  flex: 1;
  max-width: 160px;
}

.ri-never-expires-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink2);
  cursor: pointer;
  min-width: auto;
}

.ri-never-expires-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.ri-no-projects-hint {
  font-size: 13px;
  color: var(--ink3);
  font-style: italic;
}

.ri-total-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  min-width: 260px;
}

.ri-total-card > div {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.ri-round-off-row {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.ri-round-off-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.ri-no-rounding {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
}

.ri-total-row {
  border-top: 1px solid var(--line);
  padding-top: 8px;
  font-weight: 700;
  font-size: 15px;
}

.ri-payment-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0 8px;
  font-size: 13px;
  color: var(--ink2);
  border-top: 1px solid var(--line);
  margin-top: 8px;
}

.ri-payment-logos {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
}

.ri-form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ── Credit Notes Zoho-style panel ── */
.cn-module {
  display: grid;
  gap: 16px;
}

.cn-form-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px 16px;
  border-bottom: 1px solid var(--line);
}

.cn-form-title-left { display: flex; align-items: center; gap: 12px; }

.cn-title-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.cn-form-title h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.cn-close-button {
  width: 32px; height: 32px; display: grid; place-items: center;
  color: var(--ink2); background: none; border: none; cursor: pointer; border-radius: 6px;
}
.cn-close-button:hover { color: var(--ink); background: var(--surface-soft); }

.cn-zoho-form .quote-form-body {
  padding: 24px 32px 0;
}

.cn-customer-band,
.cn-location-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.cn-customer-band label,
.cn-location-band label {
  min-width: 180px;
  font-size: 13px;
  color: var(--ink2);
  flex-shrink: 0;
}

.cn-customer-band select,
.cn-location-band select {
  flex: 1;
  max-width: 420px;
}

.cn-supply-note {
  font-size: 12px;
  color: var(--ink3);
  flex-basis: 100%;
  padding-left: 192px;
}

.cn-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 16px 0;
}

.cn-details-grid .quote-form-line {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.cn-details-grid .quote-form-line label {
  min-width: 150px;
  font-size: 13px;
  color: var(--ink2);
  flex-shrink: 0;
}

.cn-details-grid .quote-form-line input,
.cn-details-grid .quote-form-line select,
.cn-details-grid .quote-form-line textarea {
  flex: 1;
}

.cn-description-row {
  grid-column: span 2;
  align-items: flex-start !important;
}

.cn-description-row textarea {
  width: 100%;
  resize: vertical;
}

.cn-info-icon {
  font-size: 12px;
  color: var(--ink3);
  vertical-align: middle;
}

.cn-form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 16px 32px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

/* ── Expense Form ──────────────────────────────────── */
.exp-module { display: grid; gap: 16px; }

.exp-create-panel {
  display: none;
  padding: 0;
  overflow: hidden;
}
.exp-create-panel.open { display: block; }

.exp-form-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px 16px;
  border-bottom: 1px solid var(--line);
}
.exp-form-title-left { display: flex; align-items: center; gap: 12px; }
.exp-title-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.exp-form-title h3 { font-size: 22px; font-weight: 700; color: var(--ink); margin: 0; }
.exp-close-button {
  width: 32px; height: 32px; display: grid; place-items: center;
  color: var(--ink2); background: none; border: none;
  cursor: pointer; border-radius: 6px;
}
.exp-close-button:hover { color: var(--ink); background: var(--surface-soft); }

.exp-form-body {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 0;
  align-items: start;
}

.exp-form-fields {
  padding: 24px 32px 8px;
  display: grid;
  gap: 0;
  border-right: 1px solid var(--line);
}

.exp-form-line {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.exp-form-line label { font-size: 13px; color: var(--ink2); }
.exp-form-line input,
.exp-form-line select,
.exp-form-line textarea {
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 7px 10px;
  width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  color: var(--ink);
}
.exp-form-line input:focus,
.exp-form-line select:focus,
.exp-form-line textarea:focus { outline: none; border-color: var(--accent); }

.exp-account-field { display: flex; flex-direction: column; gap: 6px; }
.exp-itemize-btn {
  align-self: flex-start;
  background: none; border: none;
  color: var(--accent); font-size: 13px;
  cursor: pointer; padding: 0;
  display: flex; align-items: center; gap: 4px;
}

.exp-amount-row { display: flex; gap: 8px; align-items: center; }
.exp-currency-select { width: 80px !important; flex-shrink: 0; }

.exp-radio-row { display: flex; gap: 20px; align-items: center; }
.exp-radio-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink2); cursor: pointer; }
.exp-radio-label input[type="radio"] { width: auto; }

.exp-form-divider { height: 16px; }

.exp-search-row { display: flex; gap: 8px; align-items: center; }
.exp-search-row select { flex: 1; }
.exp-search-btn {
  background: var(--accent); color: #fff; border: none;
  border-radius: 4px; padding: 7px 10px;
  cursor: pointer; display: flex; align-items: center;
  flex-shrink: 0;
}
.exp-search-btn:hover { opacity: 0.85; }

.exp-description-line { align-items: flex-start; padding-top: 14px; }
.exp-description-line textarea { resize: vertical; min-height: 72px; }

.exp-section-divider {
  height: 1px;
  background: var(--line);
  margin: 8px 0;
  grid-column: 1 / -1;
}

.exp-receipt-card {
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 260px;
  align-items: center;
  background: var(--surface-soft);
}
.exp-receipt-dropzone {
  border: 2px dashed var(--line-strong);
  border-radius: 8px;
  padding: 32px 20px;
  text-align: center;
  background: var(--bg);
  width: 100%;
  box-sizing: border-box;
}
.exp-receipt-icon { color: var(--ink3); margin-bottom: 10px; display: flex; justify-content: center; }
.exp-receipt-title { font-weight: 600; font-size: 13px; margin: 0 0 4px; color: var(--ink); }
.exp-receipt-note { font-size: 11px; color: var(--ink3); margin: 0; }
.exp-upload-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
  color: var(--ink2);
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
}
.exp-upload-btn:hover { background: var(--bg); border-color: var(--accent); color: var(--ink); }

.exp-form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 16px 32px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

/* ── Purchase Order Form ───────────────────────────── */
.po-module { display: grid; gap: 16px; }
.po-create-panel { display: none; padding: 0; overflow: hidden; }
.po-create-panel.open { display: block; }

.po-form-title {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 32px 16px; border-bottom: 1px solid var(--line);
}
.po-form-title-left { display: flex; align-items: center; gap: 12px; }
.po-title-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.po-form-title h3 { font-size: 22px; font-weight: 700; color: var(--ink); margin: 0; }
.po-close-button {
  width: 32px; height: 32px; display: grid; place-items: center;
  color: var(--ink2); background: none; border: none; cursor: pointer; border-radius: 6px;
}
.po-close-button:hover { color: var(--ink); background: var(--surface-soft); }

.po-form-body { padding: 24px 32px 8px; display: grid; gap: 0; }

.po-form-line {
  display: grid; grid-template-columns: 190px minmax(0, 560px);
  gap: 16px; align-items: center; padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.po-form-line label { font-size: 13px; color: var(--ink2); }
.po-form-line select, .po-form-line input {
  font-size: 13px; border: 1px solid var(--line); border-radius: 4px;
  padding: 7px 10px; width: 100%; box-sizing: border-box;
  background: var(--bg); color: var(--ink);
}
.po-form-line select:focus, .po-form-line input:focus { outline: none; border-color: var(--accent); }

.po-search-row { display: flex; gap: 0; align-items: center; }
.po-search-row select { flex: 1; }
.po-search-btn {
  background: var(--accent); color: #fff; border: none;
  border-radius: 0 4px 4px 0; padding: 7px 10px;
  cursor: pointer; display: flex; align-items: center; flex-shrink: 0;
}
.po-search-btn:hover { opacity: 0.85; }

/* PO Vendor Picker */
.po-vendor-picker { position: relative; flex: 1; }
.po-vendor-display-row { display: flex; gap: 0; align-items: stretch; }
.po-vendor-btn {
  flex: 1; display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border: 1px solid var(--line); border-right: none;
  border-radius: 4px 0 0 4px; background: var(--bg); cursor: pointer;
  font-size: 14px; color: var(--ink); min-height: 38px; text-align: left;
  transition: border-color 0.15s;
}
.po-vendor-btn:hover { border-color: var(--ink3); }
.po-vendor-btn:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.po-vendor-chevron { color: var(--ink3); font-size: 11px; margin-left: 8px; flex-shrink: 0; }
.po-vendor-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 300;
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.po-vendor-dropdown.hidden { display: none; }
.po-vendor-search-wrap {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.po-vendor-search-icon { color: var(--ink3); display: flex; align-items: center; flex-shrink: 0; }
.po-vendor-search-input {
  flex: 1; border: none; outline: none; font-size: 14px; color: var(--ink);
  background: transparent;
}
.po-vendor-list { list-style: none; margin: 0; padding: 0; max-height: 200px; overflow-y: auto; }
.po-vendor-list li { padding: 9px 16px; font-size: 14px; cursor: pointer; color: var(--ink); }
.po-vendor-list li:hover { background: var(--accent-soft); }
.po-vendor-no-results { color: var(--ink3) !important; font-size: 12px; cursor: default !important; }
.po-vendor-no-results:hover { background: none !important; }
.po-vendor-add-btn {
  width: 100%; padding: 10px 16px; text-align: left; font-size: 14px;
  color: var(--accent); background: none; border: none; border-top: 1px solid var(--line);
  cursor: pointer; display: flex; align-items: center; gap: 6px;
}
.po-vendor-add-btn:hover { background: var(--accent-soft); }

/* Quick-add Vendor Modal */
.quick-vendor-modal {
  position: fixed; inset: 0; z-index: 700;
  display: none; align-items: center; justify-content: center;
  background: rgba(7,22,42,0.45);
}
.quick-vendor-modal.open { display: flex; }
.qvm-card {
  background: var(--surface); border-radius: var(--radius);
  width: 820px; max-width: 96vw; max-height: 92vh;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,0.22); overflow: hidden;
}
.qvm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.qvm-header h3 { font-size: 17px; font-weight: 600; color: var(--ink); margin: 0; }
.qvm-close {
  width: 32px; height: 32px; display: grid; place-items: center;
  background: none; border: none; color: var(--ink2);
  cursor: pointer; border-radius: 6px;
}
.qvm-close:hover { background: var(--surface-soft); color: var(--ink); }
.qvm-form { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; }
.qvm-body { flex: 1; overflow-y: auto; }
.qvm-row {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 11px 24px; border-bottom: 1px solid var(--line);
}
.qvm-label {
  width: 168px; min-width: 168px; font-size: 13px; color: var(--ink2);
  padding-top: 7px; line-height: 1.4; flex-shrink: 0;
}
.qvm-req-label { color: #ef4444; font-weight: 500; }
.qvm-info-icon { color: var(--ink3); font-size: 12px; cursor: help; vertical-align: middle; }
.qvm-field-input {
  flex: 1; max-width: 400px; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 4px; font-size: 14px;
  color: var(--ink); background: var(--bg);
}
.qvm-field-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(59,130,246,0.12); }
.qvm-contact-row { display: flex; gap: 8px; flex: 1; }
.qvm-salutation {
  width: 128px; flex-shrink: 0; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 4px; font-size: 14px;
  color: var(--ink); background: var(--bg);
}
.qvm-salutation:focus { outline: none; border-color: var(--accent); }
.qvm-name-input {
  flex: 1; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 4px; font-size: 14px; color: var(--ink);
  background: var(--bg);
}
.qvm-name-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(59,130,246,0.12); }
.qvm-phone-row { display: flex; gap: 10px; flex: 1; }
.qvm-phone-group {
  display: flex; align-items: center; flex: 1;
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--bg);
}
.qvm-phone-code {
  padding: 6px 10px; background: var(--surface-soft); font-size: 13px; color: var(--ink2);
  border-right: 1px solid var(--line); white-space: nowrap;
}
.qvm-phone-input {
  flex: 1; border: none; padding: 6px 10px; font-size: 14px;
  color: var(--ink); outline: none; background: transparent; min-width: 0;
}
.qvm-ob-row {
  display: flex; align-items: center; flex: 1; max-width: 220px;
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--bg);
}
.qvm-ob-currency {
  padding: 6px 10px; background: var(--surface-soft); font-size: 13px; color: var(--ink2);
  border-right: 1px solid var(--line); white-space: nowrap;
}
.qvm-ob-input {
  flex: 1; border: none; padding: 6px 10px; font-size: 14px;
  color: var(--ink); outline: none; background: transparent; min-width: 0;
}
.qvm-tabs-bar {
  display: flex; border-bottom: 1px solid var(--line);
  padding: 0 24px; margin-top: 8px; flex-shrink: 0;
}
.qvm-tab {
  padding: 9px 14px; font-size: 13px; color: var(--ink3);
  background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px; cursor: pointer; font-weight: 500; transition: color 0.15s;
}
.qvm-tab:hover { color: var(--ink2); }
.qvm-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.qvm-panel { display: block; }
.qvm-panel-hidden { display: none; }
.qvm-empty-tab { padding: 20px 24px; font-size: 13px; color: var(--ink3); margin: 0; }
.qvm-footer {
  display: flex; gap: 10px; padding: 14px 24px;
  border-top: 1px solid var(--line); background: var(--surface); flex-shrink: 0;
}

.po-delivery-line { align-items: flex-start; padding-top: 14px; }
.po-delivery-body { display: flex; flex-direction: column; gap: 10px; }
.po-delivery-radios { display: flex; gap: 20px; }
.po-radio-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink2); cursor: pointer; }
.po-radio-label input[type="radio"] { width: auto; }
.po-delivery-select { max-width: 320px; }
.po-address-preview { font-size: 13px; color: var(--ink2); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.po-company-name { font-weight: 600; }
.po-edit-addr-btn { color: var(--accent); cursor: pointer; display: flex; align-items: center; }
.po-addr-line { margin: 0; color: var(--ink3); width: 100%; }
.po-change-dest-btn {
  background: none; border: none; color: var(--accent); font-size: 13px; cursor: pointer; padding: 0; text-align: left;
}

.po-details-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--line); border-radius: 6px; margin: 16px 0;
}
.po-details-cell {
  padding: 12px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
}
.po-details-cell:nth-child(2n) { border-right: none; }
.po-details-cell:nth-last-child(-n+2) { border-bottom: none; }
.po-details-cell label { font-size: 12px; color: var(--ink3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.po-details-cell input, .po-details-cell select {
  font-size: 13px; border: 1px solid var(--line); border-radius: 4px;
  padding: 6px 8px; background: var(--bg); color: var(--ink); width: 100%; box-sizing: border-box;
}
.po-details-cell input:focus, .po-details-cell select:focus { outline: none; border-color: var(--accent); }
.po-shipment-cell { grid-column: span 2; border-bottom: none; }
.po-number-row { display: flex; align-items: center; gap: 8px; }
.po-number-row input { flex: 1; background: var(--surface-soft); }
.po-settings-icon { color: var(--ink3); display: flex; align-items: center; cursor: pointer; }

.po-warehouse-bar {
  display: flex; gap: 16px; align-items: center;
  padding: 10px 0; border-bottom: 2px solid var(--line); margin-bottom: 0;
  flex-wrap: wrap;
}
.po-warehouse-item { display: flex; align-items: center; gap: 8px; }
.po-warehouse-label { font-size: 13px; color: var(--ink2); white-space: nowrap; }
.po-warehouse-select {
  font-size: 13px; border: none; border-bottom: 2px solid var(--accent);
  padding: 4px 8px; background: transparent; color: var(--ink); cursor: pointer;
}
.po-warehouse-select:focus { outline: none; }

/* PO Item Table */
.po-item-table { margin: 0 -0px; }
.po-item-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; font-size: 14px; font-weight: 600; color: var(--ink);
}
.po-bulk-btn { background: none; border: none; color: var(--accent); font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.po-table-shell { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; }
.po-table-shell table { width: 100%; border-collapse: collapse; min-width: 700px; }
.po-table-shell thead th {
  background: var(--surface-soft); padding: 10px 12px; text-align: left;
  font-size: 11px; font-weight: 600; color: var(--ink3); letter-spacing: 0.05em;
  border-bottom: 1px solid var(--line);
}
.po-th-item { width: 35%; }
.po-th-account { width: 20%; }
.po-th-qty, .po-th-rate, .po-th-vat, .po-th-amount { width: 10%; text-align: right; }
.po-table-shell tbody tr { border-bottom: 1px solid var(--line); }
.po-table-shell tbody tr:last-child { border-bottom: none; }
.po-table-shell td { padding: 10px 12px; vertical-align: middle; }
.po-item-cell { display: flex; align-items: center; gap: 8px; }
.po-item-thumb { color: var(--line-strong); flex-shrink: 0; display: flex; align-items: center; }
.po-item-select, .po-account-select, .po-vat-select {
  font-size: 12px; border: 1px solid var(--line); border-radius: 4px;
  padding: 5px 6px; background: var(--bg); color: var(--ink); width: 100%;
}
.po-qty-input, .po-rate-input {
  font-size: 12px; border: 1px solid var(--line); border-radius: 4px;
  padding: 5px 6px; text-align: right; width: 70px;
  background: var(--bg); color: var(--ink);
}
.po-item-select:focus, .po-account-select:focus, .po-vat-select:focus,
.po-qty-input:focus, .po-rate-input:focus { outline: none; border-color: var(--accent); }
.po-amount-cell { text-align: right; font-size: 13px; color: var(--ink); }

.po-line-actions { display: flex; gap: 10px; padding: 12px 0; }
.po-add-row-btn, .po-bulk-add-btn {
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent);
  border-radius: 4px; padding: 7px 14px; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
}
.po-add-row-btn:hover, .po-bulk-add-btn:hover { opacity: 0.85; }
.po-add-caret { font-size: 10px; }

.po-bottom-grid {
  display: grid; grid-template-columns: 1fr 340px; gap: 24px;
  padding: 16px 0; border-top: 1px solid var(--line);
}
.po-notes-cell label { display: block; font-size: 13px; color: var(--ink2); margin-bottom: 6px; font-weight: 600; }
.po-notes-cell textarea {
  width: 100%; box-sizing: border-box; font-size: 13px;
  border: 1px solid var(--line); border-radius: 4px; padding: 8px;
  resize: vertical; background: var(--bg); color: var(--ink);
}
.po-notes-cell textarea:focus { outline: none; border-color: var(--accent); }
.po-totals-cell { display: flex; flex-direction: column; gap: 0; }
.po-total-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.po-total-row:last-child { border-bottom: none; }
.po-total-label { font-size: 14px; color: var(--ink2); }
.po-total-value { font-size: 14px; color: var(--ink); min-width: 80px; text-align: right; }
.po-grand-total .po-total-label, .po-grand-total .po-total-value { font-weight: 700; font-size: 15px; }
.po-discount-input { display: flex; align-items: center; gap: 4px; margin-right: 8px; }
.po-discount-field {
  width: 60px; font-size: 13px; border: 1px solid var(--line); border-radius: 4px;
  padding: 4px 6px; text-align: right; background: var(--bg); color: var(--ink);
}
.po-discount-pct { font-size: 13px; color: var(--ink3); }

.po-footer-grid {
  display: grid; grid-template-columns: 1fr 340px; gap: 24px;
  padding: 16px 0; border-top: 1px solid var(--line);
}
.po-terms-cell-wide label { display: block; font-size: 13px; color: var(--ink2); margin-bottom: 6px; font-weight: 600; }
.po-terms-cell-wide textarea {
  width: 100%; box-sizing: border-box; font-size: 13px;
  border: 1px solid var(--line); border-radius: 4px; padding: 8px;
  resize: vertical; background: var(--bg); color: var(--ink);
}
.po-terms-cell-wide textarea:focus { outline: none; border-color: var(--accent); }
.po-attach-cell { display: flex; flex-direction: column; gap: 8px; }
.po-attach-label { font-size: 13px; color: var(--ink2); font-weight: 600; margin: 0; }
.po-upload-btn {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-soft); border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 14px; font-size: 13px; cursor: pointer; color: var(--ink2);
}
.po-upload-btn:hover { background: var(--bg); border-color: var(--accent); color: var(--ink); }
.po-attach-note { font-size: 11px; color: var(--ink3); margin: 0; }

.po-form-actions {
  display: flex; gap: 10px; align-items: center;
  padding: 16px 32px; border-top: 1px solid var(--line); background: var(--surface);
}

/* ── Recurring Bill Form ────────────────────────── */
.re-module { display: grid; gap: 16px; }

.re-create-panel {
  display: none;
  padding: 0;
  overflow: hidden;
}
.re-create-panel.open { display: block; }

.re-form-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px 16px;
  border-bottom: 1px solid var(--line);
}
.re-form-title-left { display: flex; align-items: center; gap: 12px; }
.re-title-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.re-form-title h3 { font-size: 22px; font-weight: 700; color: var(--ink); margin: 0; }
.re-close-button {
  width: 32px; height: 32px; display: grid; place-items: center;
  color: var(--ink2); background: none; border: none; cursor: pointer; border-radius: 6px;
}
.re-close-button:hover { color: var(--ink); background: var(--surface-soft); }

.re-form-body {
  padding: 24px 32px 8px;
  display: grid;
  gap: 0;
  max-width: 860px;
}

.re-form-line {
  display: grid;
  grid-template-columns: 190px minmax(0, 540px);
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.re-form-line label { font-size: 13px; color: var(--ink2); }
.re-form-line input[type="text"],
.re-form-line input[type="date"],
.re-form-line input[type="number"],
.re-form-line select,
.re-form-line textarea {
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 7px 10px;
  width: 100%;
  box-sizing: border-box;
  background: var(--bg);
  color: var(--ink);
}
.re-form-line input:focus, .re-form-line select:focus, .re-form-line textarea:focus {
  outline: none; border-color: var(--accent);
}

.re-next-hint { font-size: 12px; color: var(--ink3); margin: 4px 0 0; }

.re-never-expires-label {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px; font-size: 13px; color: var(--ink2); cursor: pointer;
}
.re-never-expires-label input[type="checkbox"] { width: auto; }

.re-form-divider { height: 16px; }

.re-amount-row { display: flex; gap: 8px; align-items: center; }
.re-currency-select { width: 80px !important; flex-shrink: 0; }

.re-radio-row { display: flex; gap: 20px; align-items: center; }
.re-radio-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink2); cursor: pointer; }
.re-radio-label input[type="radio"] { width: auto; }

.re-search-row { display: flex; gap: 8px; align-items: center; }
.re-search-row select { flex: 1; }
.re-search-btn {
  background: var(--accent); color: #fff; border: none;
  border-radius: 4px; padding: 7px 10px; cursor: pointer;
  display: flex; align-items: center; flex-shrink: 0;
}
.re-search-btn:hover { opacity: 0.85; }

.re-description-line { align-items: flex-start; padding-top: 14px; }
.re-description-line textarea { resize: vertical; min-height: 72px; }

.re-section-divider {
  height: 1px; background: var(--line); margin: 8px 0; grid-column: 1 / -1;
}

.re-tag-link {
  background: none; border: none; color: var(--accent);
  font-size: 13px; cursor: pointer; padding: 0;
  display: flex; align-items: center; gap: 4px;
}

.re-form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 16px 32px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

/* Recurring Bill Zoho-style form */
.recurring-bill-create-panel {
  background: var(--surface);
  border-radius: var(--radius);
}

.recurring-bill-zoho-form {
  display: flex;
  flex-direction: column;
  min-height: 760px;
  background: var(--surface);
}

.rb-form-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.rb-form-title-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rb-title-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.rb-form-title h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--ink);
}

.rb-close-button {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; background: transparent;
  color: var(--ink2); border-radius: 6px; cursor: pointer;
}

.rb-close-button:hover {
  color: var(--ink);
  background: var(--surface-soft);
}

.rb-form-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.rb-top-band {
  padding: 22px 22px 18px;
  background: var(--surface-soft);
  display: grid;
  gap: 10px;
}

.rb-details-section {
  padding: 20px 22px 42px;
  display: grid;
  gap: 0;
}

.rb-field-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 47px;
}

.rb-label {
  width: 170px;
  min-width: 170px;
  color: var(--ink2);
  font-size: 14px;
}

.rb-required {
  color: #ef4444;
}

.rb-input {
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  padding: 6px 10px;
}

.rb-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.14);
}

.rb-short-input {
  width: 330px;
  max-width: min(330px, 100%);
}

.rb-date-input {
  width: 150px;
}

.rb-search-select {
  display: flex;
  align-items: stretch;
  width: min(545px, 100%);
}

.rb-vendor-select {
  width: 100%;
  max-width: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.rb-search-button {
  width: 35px;
  border: 1px solid var(--accent);
  border-left: 0;
  border-radius: 0 5px 5px 0;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.rb-search-button:hover { opacity: 0.85; }

.rb-inline-label {
  margin-left: 20px;
  color: var(--ink2);
  font-size: 14px;
  white-space: nowrap;
}

.rb-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  color: var(--ink2);
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}

.rb-checkbox-label input {
  width: auto;
  accent-color: var(--accent);
}

.rb-date-row {
  display: grid;
  grid-template-columns: 170px minmax(220px, 330px) 70px 150px;
  gap: 10px;
}

.rb-date-row .rb-label,
.rb-date-row .rb-inline-label {
  width: auto;
  min-width: 0;
  margin: 0;
}

.rb-date-row .rb-short-input,
.rb-date-row .rb-date-input {
  width: 100%;
  max-width: none;
}

.rb-date-row .rb-checkbox-label {
  grid-column: 2 / -1;
  margin: 0;
}

.rb-table-controls {
  margin: 0 22px 12px;
  padding: 25px 0 12px;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.recurring-bill-item-section {
  margin: 0 22px 16px;
  overflow-x: auto;
}

.recurring-bill-item-section .bill-item-header {
  padding: 0 10px 10px;
}

.recurring-bill-item-table {
  min-width: 1080px;
  border-radius: 5px;
  overflow: hidden;
}

.recurring-bill-item-table th,
.recurring-bill-item-table td {
  border-right: 1px solid var(--line);
}

.recurring-bill-item-table th:last-child,
.recurring-bill-item-table td:last-child {
  border-right: 0;
}

.bill-customer-cell {
  min-width: 145px;
}

.bill-customer-select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--bg);
  color: var(--ink2);
  font-size: 12px;
  padding: 4px 6px;
}

.bill-customer-select:focus {
  outline: none;
  border-color: var(--accent);
}

.rb-totals-section {
  justify-content: center;
  margin: 4px 22px 28px;
}

.rb-totals-box {
  width: min(510px, 100%);
  min-width: 0;
  border: 0;
  background: var(--surface-soft);
  padding: 18px 10px;
}

.rb-totals-box .bill-total-row {
  display: grid;
  grid-template-columns: 1fr 155px 120px;
  gap: 10px;
  padding: 4px 0;
}

.rb-totals-box .bill-total-row > span:last-child {
  text-align: right;
}

.rb-totals-box .bill-total-final {
  grid-template-columns: 1fr 120px;
  margin-top: 10px;
  padding-top: 13px;
}

.rb-totals-box .bill-total-final span:last-child {
  font-size: 18px;
}

.rb-notes-section {
  padding: 24px 62px 34px;
  background: var(--surface-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.rb-notes-section .bill-notes-label {
  color: var(--ink);
  font-weight: 500;
}

.rb-notes-section .bill-notes-textarea {
  width: min(990px, 100%);
  min-height: 55px;
  background: var(--bg);
}

.rb-form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 12px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.is-hidden {
  display: none !important;
}

.line-editor {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.line-editor-head,
.line-editor-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.9fr) minmax(190px, 1.4fr) 82px 110px 86px minmax(170px, 1fr);
  gap: 8px;
  min-width: 880px;
  padding: 8px;
}

.line-editor-head {
  color: var(--ink3);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.line-editor-row + .line-editor-row {
  border-top: 1px solid var(--line);
}

.table-shell {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
}

th,
td {
  padding: 10px 11px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-size: 14px;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--ink2);
  background: var(--surface-soft);
}

tbody tr:hover {
  background: var(--surface-soft);
}

.statement-table {
  min-width: auto;
}

.statement-table td {
  padding: 9px 0;
}

.statement-table td:last-child {
  text-align: right;
}

.statement-table tr.total-row td {
  font-weight: 800;
  color: var(--ink);
}

.status-pill,
.type-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.status-draft,
.status-inactive,
.status-void {
  background: var(--surface-soft);
  color: var(--ink2);
}

.status-active,
.status-paid,
.status-accepted,
.status-confirmed,
.status-fulfilled,
.status-invoiced,
.status-completed,
.status-reconciled,
.status-service {
  background: var(--success-soft);
  color: var(--success);
}

.status-sent,
.status-approved,
.status-pending {
  background: var(--accent-soft);
  color: var(--accent);
}

.status-prospect,
.status-part-paid,
.status-open,
.status-paused,
.status-product,
.status-revenue,
.status-asset {
  background: var(--warning-soft);
  color: var(--warning);
}

.status-overdue,
.status-unpaid,
.status-declined,
.status-cancelled,
.status-unreconciled,
.status-liability,
.status-expense {
  background: var(--danger-soft);
  color: var(--danger);
}

.status-equity,
.status-customer,
.status-vendor,
.status-item,
.status-estimate,
.status-invoice,
.status-payment,
.status-bill,
.status-bank,
.status-account,
.status-journal,
.status-settings,
.status-recurring,
.status-system {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.stats-inline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.mini-stat,
.queue-item,
.setup-step {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.mini-stat strong {
  display: block;
  margin-top: 4px;
  font-size: 16px;
}

.queue-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.queue-item strong,
.queue-item span,
.muted-block {
  display: block;
}

.queue-item span,
.muted-block {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.setup-step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.setup-step.done {
  border-color: #b8dfcb;
  background: #fbfffd;
}

.step-check {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--success);
  font-size: 10px;
  font-weight: 900;
}

.setup-step.done .step-check {
  border-color: var(--success);
  background: var(--success-soft);
}

.progress-label {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e1e8f0;
  margin-bottom: 14px;
}

.progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
}

.bank-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.bank-grid.wide {
  margin-bottom: 16px;
}

.bank-card {
  padding: 13px;
  border: 1px solid #0e4ba8;
  border-radius: var(--radius);
  background: #07306c;
  color: #fff;
}

.bank-card .mini-stat-label,
.bank-card .eyebrow {
  color: #c8dcff;
}

.bank-card strong {
  display: block;
}

.bank-balance {
  margin: 8px 0 10px;
  font-size: 23px;
  font-weight: 800;
}

.bar-chart {
  display: flex;
  align-items: end;
  gap: 12px;
  min-height: 230px;
  padding-top: 6px;
}

.bar-group {
  flex: 1;
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 58px;
}

.bar-stack {
  width: 100%;
  max-width: 74px;
  height: 170px;
  display: flex;
  align-items: end;
  gap: 5px;
}

.bar {
  flex: 1;
  min-height: 0;
  border-radius: 6px 6px 0 0;
}

.bar.inflow {
  background: var(--teal);
}

.bar.outflow {
  background: var(--accent);
}

.bar-label {
  color: var(--muted);
  font-size: 12px;
}

.empty-state {
  padding: 12px;
  border-radius: var(--radius);
  border: 1px dashed var(--line-strong);
  color: var(--muted);
  background: var(--surface-soft);
}

.table-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 56px 24px;
  text-align: center;
}
.table-empty-state svg {
  color: var(--ink3);
  opacity: 0.55;
}
.table-empty-state p {
  margin: 0;
  font-size: 14px;
  color: var(--ink2);
  max-width: 340px;
  line-height: 1.5;
}

.positive {
  color: var(--success);
  font-weight: 750;
}

.negative {
  color: var(--danger);
  font-weight: 750;
}

.zoho-module {
  display: grid;
  gap: 14px;
}

.module-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.module-toolbar h3 {
  margin: 0;
  font-size: 22px;
}

.module-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.more-wrap {
  position: relative;
  display: inline-block;
}

.more-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 170px;
  z-index: 200;
  padding: 4px 0;
  list-style: none;
  margin: 0;
}

.more-menu.open {
  display: block;
}

.more-item {
  display: block;
  width: 100%;
  padding: 9px 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 13.5px;
  color: var(--ink);
  transition: background .12s;
}

.more-item:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.module-summary-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.module-list {
  display: grid;
  gap: 12px;
}

.list-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 180px 150px;
  gap: 10px;
  align-items: center;
}

.list-controls .report-search {
  margin: 0;
}

.list-controls select {
  min-height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  padding: 8px 10px;
  color: var(--ink);
}

/* Payments Made Zoho-style workspace */
.pmade-module { display: grid; gap: 16px; }
.pmade-create-panel { display: none; padding: 0; overflow: hidden; }
.pmade-create-panel.open { display: block; }

.pmade-register-panel {
  padding: 0;
  overflow: hidden;
  background: var(--surface);
}

.pmade-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.pmade-view-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pmade-view-button {
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  padding: 5px 0;
}

.pmade-star-button {
  border: 0;
  background: transparent;
  color: var(--ink3);
  font-size: 19px;
  cursor: pointer;
}

.pmade-list-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pmade-summary-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.pmade-summary-row > div {
  padding: 14px 18px;
  border-right: 1px solid var(--line);
}

.pmade-summary-row > div:last-child { border-right: 0; }
.pmade-summary-row span {
  display: block;
  color: var(--ink3);
  font-size: 12px;
  margin-bottom: 4px;
}
.pmade-summary-row strong {
  color: var(--ink);
  font-size: 18px;
}

.pmade-filter-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.pmade-filter-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pmade-filter-tabs button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink2);
  border-radius: 4px;
  padding: 6px 11px;
  font-size: 13px;
  cursor: pointer;
}

.pmade-filter-tabs button.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.pmade-search input {
  min-width: 240px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 6px 10px;
  font-size: 13px;
}

.pmade-table-wrap {
  overflow-x: auto;
  background: var(--surface);
}

.pmade-table {
  min-width: 1080px;
  border-collapse: collapse;
}

.pmade-table th {
  padding: 10px 12px;
  background: var(--surface-soft);
  color: var(--ink3);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}

.pmade-table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.pmade-table .amount,
.pmade-bills-table .amount {
  text-align: right;
  font-weight: 600;
}

.pmade-check-cell {
  width: 42px;
  text-align: center;
}

.pmade-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 54px 18px;
  text-align: center;
}

.pmade-empty-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}

.pmade-form {
  display: flex;
  flex-direction: column;
  min-height: 760px;
  background: var(--surface);
}

.pmade-form-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.pmade-form-title-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pmade-title-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}

.pmade-form-title h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
}

.pmade-close-button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--ink2);
  cursor: pointer;
  flex-shrink: 0;
}

.pmade-close-button:hover {
  color: var(--ink);
  background: var(--surface-soft);
}

.pmade-top-band {
  padding: 22px;
  background: var(--surface-soft);
  display: grid;
  gap: 10px;
}

.pmade-details {
  padding: 22px;
  display: grid;
  gap: 0;
  max-width: 860px;
}

.pmade-field-row {
  min-height: 47px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pmade-label {
  width: 170px;
  min-width: 170px;
  color: var(--ink);
  font-size: 14px;
}

.pmade-required { color: var(--danger, #e60000); }

.pmade-input {
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  padding: 6px 10px;
}

.pmade-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, .14);
}

.pmade-short { width: 330px; max-width: 100%; }

.pmade-search-select {
  display: flex;
  align-items: stretch;
  width: min(545px, 100%);
}

.pmade-search-select .pmade-input {
  flex: 1;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.pmade-search-button {
  width: 35px;
  border: 1px solid var(--accent);
  border-left: 0;
  border-radius: 0 5px 5px 0;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.pmade-money-row {
  display: flex;
  align-items: center;
  width: 330px;
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
  background: var(--surface);
}

.pmade-money-row span {
  padding: 8px 10px;
  border-right: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--ink2);
  font-size: 13px;
}

.pmade-money-row .pmade-input {
  flex: 1;
  border: 0;
  border-radius: 0;
  min-width: 0;
}

.pmade-bills-section {
  margin: 10px 22px 20px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.pmade-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.pmade-section-head h4 {
  margin: 0 0 3px;
  font-size: 15px;
  color: var(--ink);
}

.pmade-section-head p {
  margin: 0;
  color: var(--ink3);
  font-size: 13px;
}

.pmade-bills-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 5px;
}

.pmade-bills-table {
  min-width: 920px;
  border-collapse: collapse;
}

.pmade-bills-table th {
  background: var(--surface-soft);
  color: var(--ink3);
  font-size: 12px;
  text-transform: uppercase;
  padding: 10px;
  border-bottom: 1px solid var(--line);
}

.pmade-bills-table td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
}

.pmade-bill-amount {
  width: 112px;
  text-align: right;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 8px;
}

.pmade-bill-empty {
  padding: 18px;
  color: var(--ink3);
  text-align: center;
}

.pmade-summary-notes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  padding: 22px;
  background: var(--surface-soft);
  border-top: 1px solid var(--line);
}

.pmade-notes label {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.pmade-notes textarea {
  width: 100%;
  min-height: 70px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 8px 10px;
  resize: vertical;
}

.pmade-notes span {
  display: block;
  margin-top: 5px;
  color: var(--ink3);
  font-size: 11px;
}

.pmade-total-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px 16px;
  display: grid;
  gap: 10px;
}

.pmade-total-box div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink2);
  font-size: 14px;
}

.pmade-total-final {
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-weight: 800;
  color: var(--ink);
}

.pmade-form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.items-module {
  display: grid;
  gap: 14px;
}

.items-module .module-summary-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.item-create-panel {
  position: fixed;
  inset: 0 0 0 278px;
  z-index: 600;
  display: none;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: var(--surface);
  color: var(--ink);
  box-shadow: -12px 0 34px rgba(7, 22, 42, 0.14);
}

.item-create-panel.open {
  display: grid;
}

.item-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
}

.item-modal-header-left { display: flex; align-items: center; gap: 12px; }

.item-title-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.item-modal-header h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0;
}

.item-modal-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--ink2);
  cursor: pointer;
}

.item-modal-close:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.item-modal-form {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
}

.item-modal-body {
  overflow: auto;
  padding: 16px 18px 20px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.item-main-grid {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(240px, 290px);
  gap: 36px;
  align-items: start;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.item-main-fields,
.item-modal-section,
.zoho-form-grid {
  display: grid;
  gap: 16px;
}

.item-field-line {
  display: grid;
  grid-template-columns: 180px minmax(0, 420px);
  gap: 14px;
  align-items: center;
}

.item-field-line label,
.item-line-label {
  color: var(--ink);
  font-size: 16px;
}

.required-label {
  color: var(--danger, #d20a0a) !important;
}

.item-field-line input,
.item-field-line select,
.item-field-line textarea {
  width: 100%;
  min-height: 43px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  padding: 9px 11px;
  color: var(--ink);
  font-size: 16px;
}

.item-field-line textarea {
  min-height: 66px;
  resize: vertical;
}

.item-field-line input:focus,
.item-field-line select:focus,
.item-field-line textarea:focus {
  outline: 2px solid var(--accent-soft);
  border-color: var(--accent);
}

.radio-row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 43px;
}

.radio-row label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 16px;
}

.radio-row input {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
}

.search-field,
.money-input {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.search-field input,
.money-input input {
  min-width: 0;
  flex: 1;
}

.search-field span {
  display: grid;
  place-items: center;
  width: 40px;
  color: var(--accent);
  font-weight: 800;
}

.money-input span {
  display: grid;
  place-items: center;
  min-width: 54px;
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: 6px 0 0 6px;
  background: var(--surface-soft);
  color: var(--ink2);
  font-size: 16px;
}

.money-input input {
  border-radius: 0 6px 6px 0;
}

.item-image-drop {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-height: 264px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink2);
  text-align: center;
  cursor: pointer;
}

.item-image-drop strong {
  font-weight: 500;
}

.item-image-drop em {
  color: var(--accent);
  font-style: normal;
}

.image-drop-icon {
  color: var(--ink3);
  margin-bottom: 4px;
}

.item-modal-section {
  padding: 18px 22px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.item-section-title {
  display: grid;
  gap: 7px;
  margin-bottom: 8px;
}

.item-section-title label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 23px;
  font-weight: 500;
}

.item-section-title input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.item-section-title span {
  padding-left: 28px;
  color: var(--ink2);
  font-size: 16px;
}

/* ── Item section card header ── */
.item-section-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.item-section-hd-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.item-section-icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.item-section-hd-title {
  font-size: 12px; font-weight: 700; color: var(--ink);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.item-section-hd-note {
  font-size: 12px; color: var(--ink3);
}

/* ── Item section toggle switch ── */
.item-section-switch {
  position: relative; display: inline-flex; cursor: pointer;
}
.item-section-switch input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.item-section-switch-track {
  width: 36px; height: 20px;
  background: var(--line-strong); border-radius: 20px;
  position: relative; transition: background 0.2s;
}
.item-section-switch-track::after {
  content: ""; position: absolute; left: 3px; top: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}
.item-section-switch input:checked + .item-section-switch-track { background: var(--accent); }
.item-section-switch input:checked + .item-section-switch-track::after { transform: translateX(16px); }

/* ── Item type segmented control ── */
.item-type-seg {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-soft);
  min-height: 43px;
}
.item-type-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 8px 14px; border: none; background: transparent;
  color: var(--ink2); font-size: 14px; font-weight: 500; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.item-type-btn + .item-type-btn { border-left: 1px solid var(--line); }
.item-type-btn.active { background: var(--accent); color: #fff; }

.zoho-form-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 58px;
}

.zoho-form-grid.is-disabled {
  opacity: 0.65;
}

.zoho-form-grid.is-disabled .required-label {
  color: var(--ink3) !important;
}

.zoho-form-grid.is-disabled input,
.zoho-form-grid.is-disabled select,
.zoho-form-grid.is-disabled textarea,
.zoho-form-grid.is-disabled .money-input span {
  background: var(--surface-soft);
  color: var(--ink3);
  cursor: not-allowed;
}

.item-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 13px 26px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.new-customer-option {
  color: var(--accent);
  font-weight: 500;
}

.new-customer-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 0;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}

.new-customer-link:hover {
  text-decoration: underline;
}

.retainer-customer-modal,
.new-customer-modal {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(7, 22, 42, 0.5);
}

.retainer-customer-modal.open,
.new-customer-modal.open {
  display: flex;
}

.retainer-customer-modal-card {
  background: var(--surface);
  border-radius: 10px;
  box-shadow: var(--shadow);
  width: min(520px, calc(100vw - 32px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: calc(100vh - 48px);
  overflow: hidden;
}

.retainer-customer-modal-form {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
}

.ncm-card {
  background: var(--surface);
  border-radius: 10px;
  box-shadow: var(--shadow);
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ncm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.ncm-header h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
}

.ncm-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: none;
  border: none;
  color: var(--ink2);
  cursor: pointer;
}

.ncm-close:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.ncm-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ncm-form .customer-form-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 28px 16px;
}

.ncm-actions {
  padding: 14px 28px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}

.retainer-customer-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
}

.retainer-customer-modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
}

.retainer-customer-modal-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: none;
  border: none;
  color: var(--ink2);
  cursor: pointer;
}

.retainer-customer-modal-close:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.retainer-customer-modal-body {
  padding: 20px 24px 24px;
  overflow: auto;
  display: grid;
  gap: 14px;
}

.retainer-customer-modal-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.retainer-customer-modal-field {
  display: grid;
  gap: 5px;
}

.retainer-customer-modal-field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink2);
}

.retainer-customer-modal-field input {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  width: 100%;
  box-sizing: border-box;
}

.retainer-customer-modal-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.retainer-customer-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 13px 24px;
  border-top: 1px solid var(--line);
}

.compact-list-controls {
  grid-template-columns: minmax(220px, 1fr) 160px;
  min-width: min(100%, 460px);
}

.item-name-button {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 0;
  background: transparent;
  color: var(--accent);
  text-align: left;
}

.item-name-button strong {
  color: var(--accent);
  font-weight: 750;
}

.item-name-button:hover strong {
  color: var(--accent-strong);
  text-decoration: underline;
}

.item-detail-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.item-detail-hero {
  background: var(--accent-soft);
  border-bottom: 1px solid var(--line);
}

.item-detail-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 58px;
  padding: 14px 24px 8px;
  color: var(--ink);
  font-size: 25px;
  font-weight: 800;
}

.item-back-button,
.item-icon-button {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-weight: 800;
}

.item-back-button {
  font-size: 24px;
}

.item-back-button:hover,
.item-icon-button:hover {
  border-color: var(--line-strong);
  background: var(--surface);
}

.item-detail-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.item-icon-button {
  padding: 6px 10px;
  color: #273447;
  font-size: 13px;
}

.item-detail-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 28px;
  align-items: center;
  padding: 18px 34px 30px;
}

.item-detail-summary h3 {
  margin: 0 0 20px;
  color: #111827;
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: 0;
}

.item-price-stack {
  display: grid;
  gap: 3px;
  margin-top: 18px;
}

.item-price-stack span {
  color: #283545;
  font-size: 18px;
}

.item-price-stack strong {
  color: #0d1727;
  font-size: 24px;
  font-weight: 850;
}

.item-add-image {
  display: grid;
  place-items: center;
  width: 132px;
  min-height: 132px;
  justify-self: end;
  border: 1px solid #e0e3ea;
  border-radius: 6px;
  background: #fff;
  color: #444b57;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.22;
  text-align: center;
  box-shadow: 0 6px 14px rgba(17, 24, 39, 0.05);
}

.item-add-image:hover {
  border-color: #b9c7da;
  color: var(--accent);
}

.item-detail-tabs {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.item-detail-tab {
  min-height: 64px;
  padding: 0 34px;
  border-bottom: 4px solid transparent;
  background: #fff;
  color: #1f2b3a;
  font-size: 18px;
  font-weight: 850;
  letter-spacing: 0;
}

.item-detail-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.item-detail-tab:hover {
  background: #f8fbff;
}

.item-detail-body {
  min-height: 260px;
  padding: 20px 24px 28px;
  background: #fff;
}

.item-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
}

.item-detail-field {
  display: grid;
  gap: 6px;
  min-height: 82px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfcff;
}

.item-detail-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.item-detail-field strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.item-transactions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.item-transactions-head select {
  min-width: 230px;
  min-height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: #111827;
  padding: 8px 12px;
  font-size: 18px;
  font-weight: 800;
}

.item-transaction-tools {
  display: flex;
  gap: 8px;
}

.item-transaction-tools button {
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: #344154;
  font-size: 13px;
  font-weight: 800;
}

.item-transaction-tools button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.item-transaction-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 230px;
  padding: 42px 16px;
  color: var(--muted);
  text-align: center;
}

.item-transaction-empty .empty-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 4px;
  border: 1px solid var(--line);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 14px;
}

.item-transaction-empty strong {
  color: var(--ink);
  font-size: 18px;
}

.item-transaction-empty span {
  font-size: 14px;
}

.module-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 42px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-soft);
  text-align: center;
}

.module-empty h3 {
  margin: 0;
  font-size: 18px;
}

.module-empty p {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.empty-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 20px;
  font-weight: 900;
}

.reports-module {
  display: grid;
  grid-template-columns: 306px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.reports-catalog {
  position: sticky;
  top: 18px;
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 14px;
}

.catalog-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.catalog-title h3,
.report-action-bar h3,
.report-paper-title h3 {
  margin: 0;
  letter-spacing: 0;
}

.report-search {
  margin-bottom: 12px;
}

.report-search input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 8px 10px;
}

.favorite-strip {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  margin-bottom: 12px;
}

.favorite-strip span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.favorite-strip button {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--surface);
  color: var(--accent);
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  transition: background 0.12s, color 0.12s;
}

.favorite-strip button:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.report-group + .report-group {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.report-group h4 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 7px;
  color: var(--ink2);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.report-link {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--ink);
  text-align: left;
  transition: background 0.12s, border-color 0.12s;
}

.report-link:hover {
  background: var(--surface-soft);
}

.report-link.active {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}

.report-link span {
  font-size: 13px;
  font-weight: 600;
}

.report-link small {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
}

.report-workspace {
  display: grid;
  gap: 12px;
  min-width: 0;
  align-content: start;
}

/* Reports home page — card grid */
.reports-home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  border-left: 4px solid var(--accent);
}

.reports-home-header h3 {
  margin: 0 0 4px;
  font-size: 20px;
  letter-spacing: 0;
}

.reports-home-header p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.reports-home-stat {
  text-align: right;
}

.reports-home-stat strong {
  display: block;
  font-size: 28px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}

.reports-home-stat span {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.reports-home-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.reports-home-card {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.reports-home-card-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 13px 16px 12px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink2);
  border-bottom: 1px solid var(--line);
}

.rpt-cat-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--cat, var(--accent)) 14%, transparent);
  color: var(--cat, var(--accent));
}

.rpt-group-icon {
  display: inline-flex;
  align-items: center;
  color: var(--cat, var(--accent));
}

.rpt-cat-count {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--ink2);
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.reports-home-card-links {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.report-home-link {
  display: block;
  width: 100%;
  padding: 6px 8px;
  border-radius: 5px;
  background: transparent;
  color: var(--accent);
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  transition: background 0.12s, color 0.12s;
}

.report-home-link:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.rpt-group-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  margin-left: auto;
}

.report-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.report-action-bar p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.report-filter-bar {
  display: grid;
  grid-template-columns: 1.1fr repeat(4, minmax(120px, 0.8fr)) auto;
  gap: 10px;
  align-items: end;
}

.report-filter-bar label {
  display: grid;
  gap: 5px;
  color: var(--ink2);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.report-filter-bar input,
.report-filter-bar select {
  min-height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 7px 9px;
  background: var(--surface);
  color: var(--ink);
}

.report-customize {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  background: var(--surface-soft);
}

.report-customize h4 {
  margin: 0 0 8px;
  font-size: 14px;
}

.report-customize label,
.column-toggle-grid label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  color: var(--ink2);
  font-size: 13px;
}

.column-toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 8px;
}

.items-column-panel {
  display: grid;
  gap: 12px;
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.items-column-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.items-column-panel-head strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
}

.items-column-panel-head span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.items-column-grid {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.report-paper {
  padding: 24px;
  background: var(--surface);
}

.report-paper-title {
  text-align: center;
  margin-bottom: 22px;
}

.report-paper-title span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.report-paper-title h3 {
  margin-top: 4px;
  font-size: 22px;
}

.report-paper-title p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.report-statement,
.report-table {
  width: 100%;
  min-width: auto;
  border-collapse: collapse;
}

.report-statement td,
.report-table th,
.report-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
}

.report-table th {
  background: var(--surface-soft);
  color: var(--ink2);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.report-drill-link {
  display: inline;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.report-drill-link:hover {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.report-statement td:last-child,
.report-table td:last-child,
.report-table th:last-child {
  text-align: right;
}

.report-section-row td {
  padding-top: 16px;
  padding-bottom: 8px;
  color: var(--ink2);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--surface-soft);
  border-bottom: none;
}

.report-total-row td {
  border-top: 2px solid var(--line-strong);
  color: var(--ink);
  font-weight: 800;
  background: var(--surface-soft);
}

.report-table-shell {
  overflow: auto;
}

/* ── Live Chart.js wrapper ── */
.live-chart-wrap {
  position: relative;
  width: 100%;
  height: 240px;
}

.live-chart-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.chart-fallback {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
  border: 1px dashed rgba(11, 53, 145, 0.22);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(11, 99, 216, 0.08), rgba(38, 165, 47, 0.07)),
    #f8fbff;
  color: #405064;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
}

/* ── Banking Overview (Zoho Books style) ── */

.bk-overview {
  display: grid;
  gap: 14px;
}

.bk-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.bk-toolbar-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
}

.bk-toolbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.bk-reconcile-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.bk-reconcile-card {
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.bk-reconcile-card span,
.bk-reconcile-card small {
  display: block;
}

.bk-reconcile-card span {
  color: var(--ink2);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bk-reconcile-card strong {
  display: block;
  margin: 5px 0 2px;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}

.bk-reconcile-card small {
  color: var(--ink3);
  font-size: 11.5px;
  line-height: 1.35;
}

.bk-reconcile-card--good {
  border-color: rgba(34, 197, 94, 0.32);
  background: var(--success-soft);
}

.bk-reconcile-card--good strong {
  color: var(--success);
}

.bk-auto-link {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  margin-right: 4px;
}

.bk-auto-link:hover {
  text-decoration: underline;
}

.bk-sm-btn {
  min-height: 32px;
  padding: 6px 11px;
  font-size: 13px;
}

/* Auto-upload banner */
.bk-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fef8f0;
  border: 1px solid #f5debb;
  border-radius: var(--radius);
  position: relative;
}

.bk-banner-gears {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 38px;
}

.bk-gear {
  position: absolute;
  font-size: 26px;
  line-height: 1;
}

.bk-gear-1 {
  top: 0;
  left: 0;
  color: #e07a1f;
  font-size: 24px;
}

.bk-gear-2 {
  bottom: 0;
  right: 0;
  color: #7b4fa6;
  font-size: 20px;
}

.bk-banner-body {
  flex: 1;
}

.bk-banner-body strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 5px;
}

.bk-banner-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12.5px;
  color: #405064;
}

.bk-banner-steps span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.bk-banner-steps span::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #000;
}

.bk-setup-link {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.bk-setup-link:hover {
  text-decoration: underline;
}

.bk-banner-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  color: #687482;
  font-size: 16px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 4px;
}

.bk-banner-close:hover {
  background: rgba(0,0,0,0.06);
}

/* All Accounts card */
.bk-accounts-card {
  padding: 0;
  overflow: hidden;
}

.bk-accounts-toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}

.bk-accounts-selector {
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 5px;
}

.bk-date-filter {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #405064;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}

.bk-caret {
  color: #687482;
  font-size: 11px;
}

.bk-account-summary-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 10px;
}

.bk-acct-icon-box {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #f0f4f8;
  flex: 0 0 auto;
}

.bk-acct-label {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.bk-acct-balance {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  margin-top: 2px;
}

.bk-chart-toggle-row {
  padding: 4px 18px 10px;
}

.bk-chart-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}

.bk-chart-toggle:hover {
  color: var(--accent-strong);
}

.bk-chart-arrow {
  font-size: 10px;
}

.bk-chart-area {
  padding: 0 18px 4px;
}

.bk-chart-legend {
  display: flex;
  gap: 16px;
  padding: 10px 4px 14px;
}

.bk-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #405064;
}

.bk-legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: #687482;
}

/* Active Accounts table */
.bk-active-section {
  padding: 0;
  overflow: hidden;
}

.bk-active-header {
  padding: 14px 18px 0;
}

.bk-active-title {
  background: transparent;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
}

.bk-active-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 500px;
}

.bk-active-table thead th {
  padding: 10px 18px;
  background: var(--surface-soft);
  color: var(--ink2);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.bk-active-table thead th:last-child {
  text-align: center;
}

.bk-active-table tbody tr {
  border-bottom: 1px solid var(--line);
  transition: background 120ms ease;
}

.bk-active-table tbody tr:last-child {
  border-bottom: 0;
}

.bk-active-table tbody tr:hover {
  background: var(--surface-soft);
}

.bk-active-table td {
  padding: 13px 18px;
  font-size: 14px;
  color: var(--ink);
  vertical-align: middle;
}

.bk-acct-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bk-acct-icon-wrap {
  flex: 0 0 auto;
}

.bk-acct-name {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.bk-acct-name:hover {
  text-decoration: underline;
}

.bk-amount-cell {
  font-weight: 700;
}

.bk-action-cell {
  text-align: right;
}

.bk-uncat-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--warning-soft);
  color: var(--warning);
  font-size: 12px;
  font-weight: 800;
}

.bk-expand-btn {
  background: transparent;
  padding: 2px;
  display: grid;
  place-items: center;
}

/* Forms section (collapsible) */
.bk-forms-section {
  display: none;
}

.bk-forms-section.open {
  display: block;
}

/* Banking root wrapper */
.bk-root { display: flex; flex-direction: column; gap: 20px; }

/* Banking detail page */
.bk-detail-wrap { display: flex; flex-direction: column; gap: 16px; }

.bk-detail-topbar {
  padding: 20px 24px;
}

.bk-detail-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.bk-breadcrumb {
  font-size: 13px;
  color: var(--muted);
}

.bk-detail-acct-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.bk-detail-institution {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 2px;
}

.bk-detail-acct-name {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 6px;
}

.bk-detail-balance {
  font-size: 28px;
  font-weight: 800;
  color: var(--accent-strong);
  line-height: 1;
}

.bk-detail-balance-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}

.bk-detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Tabs bar */
.bk-tabs-bar {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 0 4px;
}

.bk-tab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color .15s, border-color .15s;
}

.bk-tab:hover { color: var(--accent); }

.bk-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.bk-tab-count {
  background: #eef2f7;
  color: #555;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 7px;
}

.bk-tab.active .bk-tab-count {
  background: var(--accent-soft);
  color: var(--accent);
}

.bk-txn-table-wrap { padding: 0; overflow: hidden; border-radius: 0 0 var(--radius) var(--radius); }

/* Transaction detail panel */
.bk-txn-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.bk-txn-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: #f8fafb;
  flex-wrap: wrap;
}

.bk-txn-back {
  display: flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.bk-txn-back:hover {
  background: var(--accent-soft);
}

.bk-txn-acct-info {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: 1;
}

.bk-txn-acct-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}

.bk-txn-acct-bal {
  font-size: 20px;
  font-weight: 800;
  color: var(--accent-strong);
}

.bk-txn-count {
  color: var(--muted);
  font-size: 13px;
}

.bk-txn-desc {
  max-width: 340px;
  color: #263747;
}

.bk-txn-credit {
  color: var(--success);
  font-weight: 700;
}

.bk-txn-debit {
  color: var(--danger);
  font-weight: 700;
}

.bk-txn-bal {
  font-weight: 700;
  color: var(--ink);
}

/* ── PDF / Documents Section ─────────────────────────── */
.pdf-section { display: flex; flex-direction: column; gap: 20px; }

.pdf-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.pdf-toolbar-left h3 { margin: 0 0 2px; font-size: 17px; }
.pdf-toolbar-right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pdf-upload-label { display: inline-flex; align-items: center; }

.pdf-stats-row { display: flex; gap: 14px; flex-wrap: wrap; }
.pdf-stats-row .metric-card { flex: 1; min-width: 120px; }

.pdf-generate-panel h4 { margin: 0 0 4px; font-size: 15px; }
.pdf-gen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin: 16px 0 12px;
}
.pdf-gen-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 12px;
  background: var(--surface, #f8fafc);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  text-align: center;
}
.pdf-gen-tile:hover { border-color: var(--accent, #2563eb); box-shadow: 0 2px 10px rgba(37,99,235,.1); }
.pdf-gen-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
.pdf-gen-label { font-size: 13px; font-weight: 600; color: var(--ink, #1e293b); }
.pdf-gen-sub { font-size: 11px; color: var(--muted, #64748b); }
.pdf-tip { font-size: 12.5px; color: var(--muted, #64748b); margin: 0; }

.pdf-list-panel { margin-top: 0; }
.pdf-file-icon { margin-right: 6px; }

.table-action.danger { color: #dc2626; border-color: #fca5a5; }
.table-action.danger:hover { background: #fee2e2; }

.pdf-check-col { width: 36px; text-align: center; }

.pdf-bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
  background: var(--accent-soft);
  border: 1px solid rgba(32,96,232,0.2);
  border-radius: 8px;
  flex-wrap: wrap;
}
.pdf-bulk-count { font-size: 13.5px; font-weight: 600; color: var(--accent-strong); margin-right: 4px; flex: 1; }
.pdf-bulk-bar .ghost-button.danger { color: var(--danger); border-color: var(--danger-soft); }
.pdf-bulk-bar .ghost-button.danger:hover { background: var(--danger-soft); }

@media print {
  .sidebar,
  .topbar,
  .reports-catalog,
  .report-action-bar,
  .report-filter-bar,
  .report-customize,
  .invoice-list-panel,
  .invoice-record-list,
  .invoice-action-bar,
  .bill-list-panel,
  .bill-record-list,
  .table-action,
  .module-actions,
  .quick-create-strip,
  #scroll-top-btn,
  button:not([data-print-keep]) {
    display: none !important;
  }

  .app-shell,
  .workspace,
  .reports-module,
  .report-workspace {
    display: block;
    padding: 0;
  }

  .report-paper {
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  .invoice-preview-paper {
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  .invoice-preview-ribbon {
    border: 2px solid currentColor !important;
    background: transparent !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  @page {
    margin: 1.5cm;
  }
}

@media (max-width: 1360px) {
  .metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-setup-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .bk-reconcile-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .quick-create-strip {
    grid-template-columns: repeat(4, minmax(92px, 1fr));
  }

  .books-overview-grid,
  .dashboard-widget-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1260px) {
  .zoho-cashflow {
    grid-template-columns: 1fr;
  }

  .zoho-cashflow-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1120px) {
  .item-create-panel {
    inset: 0;
  }

  .item-main-grid,
  .zoho-form-grid,
  .customer-form-line,
  .customer-contact-row,
  .customer-phone-row,
  .customer-balance-row,
  .quote-details-grid,
  .quote-spaced-grid,
  .quote-form-line,
  .quote-form-line.inline,
  .quote-notes-grid,
  .quote-terms-grid,
  .retainer-line-footer {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .item-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    max-height: 46vh;
    overflow: auto;
  }

  .nav-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
  }

  .setup-layout,
  .content-grid,
  .split-layout,
  .invoice-record-shell,
  .report-grid,
  .zoho-dashboard-grid,
  .books-overview-grid,
  .dashboard-widget-grid,
  .reports-module,
  .item-form-columns,
  .items-module .module-summary-row,
  .report-customize {
    grid-template-columns: 1fr;
  }

  .zoho-widget-wide {
    grid-column: span 1;
  }

  .reports-catalog {
    position: static;
    max-height: none;
  }

  .report-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .invoice-record-list-body {
    max-height: 320px;
  }

  .invoice-preview-paper {
    margin: 16px;
    padding: 42px 22px 30px;
  }

  .invoice-preview-top,
  .invoice-preview-meta {
    display: grid;
    gap: 24px;
  }

  .invoice-preview-title {
    justify-items: start;
  }

  .pmt-top-band,
  .pmt-amount-section,
  .pmt-details-section {
    grid-template-columns: 1fr;
  }

  .pmt-customer-context {
    max-width: 360px;
  }
}

@media (max-width: 760px) {
  .workspace {
    padding: 12px;
  }

  .item-modal-header,
  .item-modal-body,
  .item-modal-actions {
    padding-left: 16px;
    padding-right: 16px;
  }

  .item-modal-header h3 {
    font-size: 24px;
  }

  .item-main-grid {
    gap: 18px;
  }

  .item-field-line {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .item-image-drop {
    min-height: 190px;
  }

  .item-section-title label {
    font-size: 20px;
  }

  .item-modal-actions {
    flex-direction: column;
  }

  .item-modal-actions button {
    width: 100%;
  }

  .invoice-record-titlebar,
  .invoice-record-toolbar,
  .invoice-next-main,
  .invoice-next-secondary {
    padding-left: 14px;
    padding-right: 14px;
  }

  .invoice-record-list-item {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .invoice-record-list-side {
    grid-column: 2;
    justify-items: start;
  }

  .pmt-form-header,
  .pmt-top-band,
  .pmt-amount-section,
  .pmt-details-section,
  .pmt-invoices-section,
  .pmt-attachments-block,
  .pmt-form-actions {
    padding-left: 16px;
    padding-right: 16px;
  }

  .pmt-top-fields .pmt-form-line,
  .pmt-amount-section .pmt-form-line,
  .pmt-details-section .pmt-form-line {
    grid-template-columns: 1fr;
  }

  .pmt-label {
    text-align: left;
  }

  .pmt-summary-box {
    width: auto;
    min-width: 0;
    margin-right: 16px;
    margin-left: 16px;
  }

  .item-detail-topbar {
    padding: 12px 16px 6px;
    font-size: 22px;
  }

  .item-detail-summary {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 16px;
  }

  .item-detail-summary h3 {
    font-size: 29px;
  }

  .item-add-image {
    justify-self: start;
    width: min(100%, 180px);
    min-height: 118px;
  }

  .item-detail-tabs {
    overflow-x: auto;
  }

  .item-detail-tab {
    min-width: 132px;
    padding: 0 18px;
    font-size: 15px;
  }

  .item-detail-grid {
    grid-template-columns: 1fr;
  }

  .item-transactions-head {
    align-items: stretch;
    flex-direction: column;
  }

  .item-transactions-head select,
  .item-transaction-tools button {
    width: 100%;
  }

  .zoho-home-title,
  .zoho-widget-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .zoho-home-actions,
  .zoho-home-actions button,
  .zoho-widget-head .table-action,
  .zoho-filter {
    width: 100%;
  }

  .topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .topbar h2 {
    font-size: 23px;
  }

  .dashboard-command {
    align-items: flex-start;
    flex-direction: column;
  }

  .command-actions,
  .command-actions button {
    width: 100%;
  }

  .topbar-actions,
  .topbar-search,
  .topbar-actions button {
    width: 100%;
    max-width: none;
  }

  .metric-grid,
  .quick-create-strip,
  .zoho-cashflow-stats,
  .zoho-income-summary,
  .zoho-update-grid,
  .stats-inline,
  .field-row,
  .module-summary-row,
  .tile-list,
  .portal-card,
  .list-controls,
  .report-filter-bar,
  .column-toggle-grid {
    grid-template-columns: 1fr;
  }

  .customer-form-title,
  .customer-form-body,
  .customer-form-actions,
  .quote-form-title,
  .quote-form-body,
  .quote-form-actions {
    padding-left: 16px;
    padding-right: 16px;
  }

  .customer-form-title h3 {
    font-size: 25px;
  }

  .customer-phone-group,
  .customer-addon-field {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .customer-address-grid {
    grid-template-columns: 1fr;
  }

  .customer-tabs {
    gap: 22px;
  }

  .customer-form-actions {
    flex-direction: column;
  }

  .customer-form-actions button {
    width: 100%;
  }

  .quote-band,
  .quote-terms-grid {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .quote-form-title h3 {
    font-size: 25px;
  }

  .quote-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .quote-form-actions button,
  .quote-form-actions > span {
    width: 100%;
  }

  .quote-form-actions > span {
    margin-left: 0;
  }

  .zoho-money-split {
    grid-template-columns: 1fr;
  }

  .zoho-flow-chart,
  .zoho-income-chart {
    overflow-x: auto;
    grid-template-columns: repeat(6, 64px);
  }

  .module-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .module-actions,
  .module-actions button {
    width: 100%;
  }

  .report-action-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .report-actions,
  .report-actions button,
  .report-filter-bar .primary-button {
    width: 100%;
  }

  .report-paper {
    padding: 14px;
  }

  .panel,
  .metric-card {
    padding: 14px;
  }

  .nav-list {
    grid-template-columns: 1fr;
  }

  .sidebar {
    gap: 12px;
  }

  .sidebar-card {
    display: none;
  }

  .setup-step {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .setup-step .table-action {
    grid-column: 2;
    justify-self: start;
  }

  .coa-list-header,
  .coa-filter-row {
    align-items: stretch;
    flex-direction: column;
  }

  .coa-list-actions,
  .coa-list-actions button,
  .coa-bulk-actions,
  .coa-bulk-actions button,
  .coa-search input,
  .coa-view-select {
    width: 100%;
  }

  .coa-summary-row > div,
  .coa-type-row > div {
    min-width: calc(50% - 10px);
  }

  .coa-field-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .coa-option-row {
    padding-left: 0;
  }

  .coa-form-title,
  .coa-form-body,
  .coa-form-actions {
    padding-left: 16px;
    padding-right: 16px;
  }

  .coa-form-actions {
    flex-direction: column;
  }

  .coa-form-actions button {
    width: 100%;
  }

  table {
    min-width: 700px;
  }
}

/* ===== Bill Module ===== */
.bill-module { display: grid; gap: 16px; }
.bill-create-panel { display: none; padding: 0; overflow: hidden; }
.bill-create-panel.open { display: block; }

/* ── Bill Record Payment Panel ─────────────────────────────────── */
.bill-payment-panel { display: none; padding: 0; overflow: hidden; }
.bill-payment-panel.open { display: block; }

.bpay-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.bpay-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.bpay-header-left { display: flex; align-items: center; gap: 12px; }
.bpay-header-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bpay-header h3 { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0; }
.bpay-subtitle { font-size: 13px; color: var(--ink2); margin: 2px 0 0; }
.bpay-close {
  width: 32px; height: 32px; border-radius: 6px;
  background: transparent; color: var(--ink2);
  font-size: 16px; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.bpay-close:hover { background: var(--surface-soft); color: var(--ink); }

.bpay-form { display: flex; flex-direction: column; }
.bpay-body { padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.bpay-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--ink3);
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.bpay-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 20px;
}
.bpay-field { display: flex; flex-direction: column; gap: 5px; }
.bpay-field--full { display: flex; flex-direction: column; gap: 5px; }
.bpay-field--highlight .bpay-input {
  border-color: var(--accent);
  font-weight: 700; font-size: 15px;
}
.bpay-label {
  font-size: 12px; font-weight: 600; color: var(--ink2);
}
.bpay-required::after { content: '*'; color: #ef4444; margin-left: 2px; }
.bpay-input {
  height: 38px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--ink);
  font-size: 13px; width: 100%;
  transition: border-color 0.15s;
}
.bpay-input:focus { outline: none; border-color: var(--accent); }
.bpay-textarea {
  height: auto; padding: 8px 10px; resize: vertical; min-height: 72px;
}
select.bpay-input { cursor: pointer; }

.bpay-attachments {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--surface-soft);
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
}
.bpay-attach-label { font-size: 12px; font-weight: 600; color: var(--ink2); }
.bpay-attach-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink2);
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background 0.15s;
}
.bpay-attach-btn:hover { background: var(--bg); }
.bpay-file-input { display: none; }
.bpay-attach-hint { font-size: 11px; color: var(--ink3); }

.bpay-actions {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
}
.bpay-cancel { margin-left: auto; }

/* Bill Zoho Form */
.bill-zoho-form { display: flex; flex-direction: column; }
.bill-form-header { padding: 16px 24px 0; }
.bill-form-title-row { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.bill-form-title-left { display: flex; align-items: center; gap: 10px; }
.bill-title-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bill-form-title-row h3 { font-size: 18px; font-weight: 600; color: var(--ink); margin: 0; }
.bill-close-button { background: none; border: none; width: 32px; height: 32px; display: grid; place-items: center; color: var(--ink2); cursor: pointer; border-radius: 6px; }
.bill-close-button:hover { color: var(--ink); background: var(--surface-soft); }
.bill-form-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 0; }
.bill-form-section { display: flex; flex-direction: column; margin-bottom: 16px; }
.bill-form-line { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.bill-label { width: 160px; min-width: 160px; font-size: 13px; color: var(--ink2); flex-shrink: 0; }
.bill-req-label { color: var(--danger, #ef4444); font-weight: 500; }
.bill-info-icon { color: var(--ink3); font-size: 12px; cursor: help; }
.bill-input { flex: 1; max-width: 380px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 4px; font-size: 14px; color: var(--ink); background: var(--bg); }
.bill-input:focus { outline: none; border-color: var(--accent); }
.bill-select { flex: 1; max-width: 280px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 4px; font-size: 14px; color: var(--ink); background: var(--bg); }
.bill-select:focus { outline: none; border-color: var(--accent); }
.bill-textarea { flex: 1; max-width: 600px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 4px; font-size: 14px; color: var(--ink); background: var(--bg); resize: vertical; min-height: 72px; }
.bill-textarea:focus { outline: none; border-color: var(--accent); }
.bill-details-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.bill-due-line { grid-column: 1 / -1; }
.bill-inline-label { font-size: 13px; color: var(--ink2); white-space: nowrap; margin-left: 16px; }
.bill-settings-icon { color: var(--ink3); display: flex; align-items: center; cursor: pointer; }

/* Bill vendor picker — reuses po-vendor-picker CSS, just needs the wrapper */
.bill-vendor-picker-wrap { flex: 1; max-width: 480px; }

/* Table controls */
.bill-table-controls { display: flex; gap: 24px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.bill-ctrl-item { display: flex; align-items: center; gap: 6px; }
.bill-ctrl-label { font-size: 13px; color: var(--ink2); white-space: nowrap; }
.bill-ctrl-icon { display: flex; align-items: center; color: var(--ink3); }
.bill-ctrl-select { border: none; border-bottom: 2px dashed var(--line-strong); background: none; font-size: 13px; color: var(--ink); padding: 4px 4px; cursor: pointer; }
.bill-ctrl-select:focus { outline: none; border-bottom-color: var(--accent); }

/* Item Table */
.bill-item-section { margin-bottom: 16px; }
.bill-item-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 10px; }
.bill-item-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.bill-bulk-actions-btn { background: none; border: none; font-size: 13px; color: var(--accent); cursor: pointer; }
.bill-item-table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); }
.bill-item-table th { padding: 8px 12px; font-size: 11px; font-weight: 600; color: var(--ink3); text-align: left; background: var(--surface-soft); border-bottom: 1px solid var(--line); letter-spacing: 0.04em; }
.bill-item-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.bill-item-table tr:last-child td { border-bottom: none; }
.bill-item-cell { min-width: 220px; }
.bill-item-inner { display: flex; align-items: flex-start; gap: 8px; }
.bill-item-img { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--line-strong); font-size: 16px; flex-shrink: 0; }
.bill-item-fields { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.bill-item-select { width: 100%; border: none; border-bottom: 1px solid var(--line); background: transparent; font-size: 13px; color: var(--ink); padding: 2px 0; outline: none; }
.bill-item-select:focus { border-bottom-color: var(--accent); }
.bill-item-desc { width: 100%; border: none; border-bottom: 1px solid var(--line); background: transparent; font-size: 12px; color: var(--ink3); padding: 2px 0; outline: none; }
.bill-item-desc:focus { border-bottom-color: var(--accent); }
.bill-account-cell { min-width: 140px; }
.bill-account-select { width: 100%; border: 1px solid var(--line); border-radius: 3px; font-size: 12px; padding: 4px 6px; background: var(--bg); color: var(--ink); }
.bill-account-select:focus { outline: none; border-color: var(--accent); }
.bill-qty-cell, .bill-rate-cell { width: 90px; }
.bill-num-input { width: 100%; text-align: right; border: 1px solid var(--line); border-radius: 3px; padding: 4px 6px; font-size: 13px; color: var(--ink); background: var(--bg); }
.bill-num-input:focus { outline: none; border-color: var(--accent); }
.bill-vat-cell { min-width: 120px; }
.bill-vat-select { width: 100%; border: 1px solid var(--line); border-radius: 3px; font-size: 12px; padding: 4px 6px; background: var(--bg); color: var(--ink); }
.bill-vat-select:focus { outline: none; border-color: var(--accent); }
.bill-amount-cell { width: 90px; text-align: right; font-size: 13px; font-weight: 600; color: var(--ink); }
.bill-line-row.is-hidden { display: none; }
.bill-add-row-wrap { padding: 10px 0; }
.bill-add-row-btn { display: flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--accent); color: var(--accent); font-size: 13px; padding: 6px 14px; border-radius: 16px; cursor: pointer; }
.bill-add-row-btn:hover { background: var(--accent-soft); }
.bill-add-row-icon { display: flex; align-items: center; }
.bill-add-row-caret { font-size: 10px; }

/* Bill Totals */
.bill-totals-section { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.bill-totals-box { min-width: 340px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 6px; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.bill-total-row { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: var(--ink2); }
.bill-total-final { font-weight: 700; font-size: 15px; color: var(--ink); padding-top: 8px; border-top: 1px solid var(--line); }
.bill-discount-wrap { display: flex; align-items: center; gap: 6px; }
.bill-discount-input { width: 60px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 4px; font-size: 13px; text-align: right; background: var(--bg); color: var(--ink); }
.bill-discount-pct { font-size: 13px; color: var(--ink3); }

/* Bill Bottom */
.bill-bottom-section { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 20px 0; border-top: 1px solid var(--line); margin-bottom: 16px; }
.bill-notes-label { font-size: 13px; font-weight: 500; color: var(--ink2); display: block; margin-bottom: 6px; }
.bill-notes-textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; font-size: 13px; color: var(--ink); background: var(--bg); resize: vertical; min-height: 80px; }
.bill-notes-textarea:focus { outline: none; border-color: var(--accent); }
.bill-notes-hint { font-size: 11px; color: var(--ink3); margin-top: 4px; display: block; }
.bill-attach-label { font-size: 13px; font-weight: 500; color: var(--ink2); margin-bottom: 8px; }
.bill-upload-btn { display: flex; align-items: center; gap: 6px; padding: 7px 16px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); font-size: 13px; cursor: pointer; color: var(--ink2); }
.bill-upload-btn:hover { border-color: var(--ink3); }
.bill-attach-hint { font-size: 11px; color: var(--ink3); margin-top: 6px; display: block; }

/* Bill Form Actions */
.bill-form-actions { display: flex; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--line); background: var(--surface); }

/* Vendor Credits Zoho-style workspace */
.vc-module { display: grid; gap: 16px; }
.vc-create-panel { display: none; padding: 0; overflow: hidden; }
.vc-create-panel.open { display: block; }
.vc-register-panel { padding: 0; overflow: hidden; background: var(--surface); }
.vc-list-header { border-bottom: 1px solid var(--line); }
.vc-summary-row { border-bottom: 1px solid var(--line); }
.vc-table-wrap { overflow-x: auto; }
.vc-register-table { min-width: 860px; }
.vc-register-table .amount { text-align: right; font-weight: 700; }
.vc-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 54px 18px;
  text-align: center;
}
.vc-empty-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
.vc-title-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
}
.vc-form-header { padding: 16px 24px 0; }
.vc-form-body { padding: 0; }
.vc-top-band {
  margin: 0;
  padding: 22px 24px 18px;
  background: var(--surface-soft);
}
.vc-details-section {
  padding: 20px 24px 4px;
  margin: 0;
}
.vc-details-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.vc-search-select {
  display: flex;
  align-items: stretch;
  flex: 1;
  max-width: 545px;
}
.vc-search-select .bill-select {
  max-width: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.vc-search-button {
  width: 35px;
  border: 1px solid var(--accent);
  border-left: 0;
  border-radius: 0 5px 5px 0;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.vc-search-button:hover { opacity: 0.85; }
.vc-table-controls {
  margin: 10px 24px 16px;
}
.vc-item-section {
  margin: 0 24px 16px;
  overflow-x: auto;
}
.vc-item-table { min-width: 980px; }
.vc-bottom-section {
  margin: 0 24px 16px;
}
.vc-form-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  box-shadow: 0 -5px 18px rgba(15, 23, 42, 0.06);
}

/* Chart of Accounts Zoho-style workspace */
.coa-module {
  display: grid;
  gap: 16px;
}

.coa-create-panel {
  display: none;
  padding: 0;
  overflow: hidden;
}

.coa-create-panel.open {
  display: block;
}

.coa-register-panel {
  padding: 0;
  overflow: hidden;
  background: #fff;
}

.coa-list-header,
.coa-filter-row,
.coa-summary-row,
.coa-type-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
}

.coa-view-title,
.coa-list-actions,
.coa-bulk-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.coa-view-select {
  min-width: 198px;
  height: 36px;
  border: 0;
  background: transparent;
  color: #111827;
  font-size: 17px;
  font-weight: 700;
}

.coa-view-select:focus {
  outline: 2px solid #9cc5ff;
  border-radius: 5px;
}

.coa-summary-row,
.coa-type-row {
  justify-content: flex-start;
  background: #fbfcff;
}

.coa-summary-row > div,
.coa-type-row > div {
  min-width: 142px;
  padding-right: 18px;
  border-right: 1px solid #e5e7eb;
}

.coa-summary-row > div:last-child,
.coa-type-row > div:last-child {
  border-right: 0;
}

.coa-summary-row span,
.coa-type-row span,
.coa-bulk-actions span {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.coa-summary-row strong,
.coa-type-row strong {
  display: block;
  margin-top: 4px;
  color: #0f172a;
  font-size: 17px;
  font-weight: 800;
}

.coa-type-row {
  flex-wrap: wrap;
  padding-top: 12px;
  padding-bottom: 12px;
  background: #fff;
}

.coa-filter-row {
  align-items: center;
  background: #fbfcff;
}

.coa-bulk-actions label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
}

.coa-bulk-actions input {
  width: 15px;
  height: 15px;
  accent-color: #4285f4;
}

.coa-search input {
  min-width: 260px;
}

.coa-table-wrap {
  overflow-x: auto;
}

.coa-register-table {
  min-width: 1040px;
}

.coa-register-table th {
  color: #536076;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.coa-register-table td {
  vertical-align: middle;
}

.coa-register-table .amount {
  text-align: right;
  font-weight: 700;
}

.coa-check-cell {
  width: 42px;
  text-align: center;
}

.coa-check-cell input {
  width: 15px;
  height: 15px;
  accent-color: #4285f4;
}

.coa-account-cell {
  display: grid;
  gap: 3px;
}

.coa-account-name {
  width: max-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1f6feb;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}

.coa-account-name:hover {
  text-decoration: underline;
}

.coa-account-cell span {
  color: #64748b;
  font-size: 12.5px;
}

.coa-system-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid #d8dde6;
  border-radius: 5px;
  background: #f8fafc;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.coa-form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: calc(100vh - 118px);
  background: #fff;
}

.coa-form-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 66px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
}

.coa-form-title-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.coa-title-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}

.coa-form-title h3 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  font-weight: 700;
}

.coa-close-button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--ink2);
  cursor: pointer;
}

.coa-close-button:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.coa-form-body {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 26px 28px 34px;
  background: var(--bg);
}

.coa-field-row {
  display: grid;
  grid-template-columns: 190px minmax(260px, 430px);
  gap: 14px;
  align-items: center;
}

.coa-label {
  color: var(--ink);
  font-size: 14px;
}

.coa-required {
  color: var(--danger, #e60000);
}

.coa-input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  padding: 8px 10px;
  color: var(--ink);
  font-size: 14px;
}

.coa-input:focus {
  outline: 2px solid var(--accent-soft);
  border-color: var(--accent);
}

.coa-textarea-row {
  align-items: start;
}

.coa-textarea-row textarea {
  min-height: 78px;
  resize: vertical;
}

.coa-option-row {
  display: grid;
  gap: 10px;
  padding-left: 204px;
}

.coa-option-row label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink2);
  font-size: 14px;
}

.coa-option-row input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.coa-form-actions {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  padding: 14px 28px;
  border-top: 1px solid #dfe5ee;
  background: #fff;
}

@media (max-width: 760px) {
  .coa-list-header,
  .coa-filter-row {
    align-items: stretch;
    flex-direction: column;
  }

  .coa-list-actions,
  .coa-list-actions button,
  .coa-bulk-actions,
  .coa-bulk-actions button,
  .coa-search input,
  .coa-view-select {
    width: 100%;
  }

  .coa-summary-row > div,
  .coa-type-row > div {
    min-width: calc(50% - 10px);
  }

  .coa-field-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .coa-option-row {
    padding-left: 0;
  }

  .coa-form-title,
  .coa-form-body,
  .coa-form-actions {
    padding-left: 16px;
    padding-right: 16px;
  }

  .coa-form-actions {
    flex-direction: column;
  }

  .coa-form-actions button {
    width: 100%;
  }
}

/* ── COA Account Type Pills ───────────────────────────────────────────────── */
.acct-type-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 11px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.acct-type-asset     { background: #dbeafe; color: #1d4ed8; }
.acct-type-liability { background: #fee2e2; color: #b91c1c; }
.acct-type-equity    { background: #ede9fe; color: #7c3aed; }
.acct-type-revenue   { background: #dcfce7; color: #15803d; }
.acct-type-expense   { background: #fef9c3; color: #a16207; }

/* ── COA Type Row dots ───────────────────────────────────────────────────── */
.coa-type-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
  flex-shrink: 0;
}
.coa-ts-asset .coa-type-dot     { background: #3b82f6; }
.coa-ts-liability .coa-type-dot { background: #ef4444; }
.coa-ts-equity .coa-type-dot    { background: #8b5cf6; }
.coa-ts-revenue .coa-type-dot   { background: #22c55e; }
.coa-ts-expense .coa-type-dot   { background: #f59e0b; }

.coa-type-stat span {
  display: flex;
  align-items: center;
}

/* ── Generic modal overlay & card ────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 22, 50, 0.50);
  padding: 20px;
}
.modal-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.22);
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.modal-header h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}
.modal-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  color: var(--ink2);
  cursor: pointer;
  border-radius: 6px;
  flex-shrink: 0;
}
.modal-close:hover { color: var(--ink); background: var(--surface-soft); }
.modal-body {
  padding: 18px 22px;
  flex: 1;
  overflow-y: auto;
}
.modal-footer {
  display: flex;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.form-row { margin-bottom: 14px; }
.form-row label {
  display: block;
  margin-bottom: 5px;
  color: #405064;
  font-size: 13px;
  font-weight: 700;
}
.form-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.field-input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  padding: 8px 10px;
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
}
.field-input:focus { outline: 2px solid #c4e2f8; border-color: var(--accent); }
.muted { color: var(--muted); font-size: 13px; }
/* ── Manual Journal form ─────────────────────────────────────────────────── */
.je-form-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 0 16px;
}
.je-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.je-back-btn:hover { text-decoration: underline; }
.je-form-heading {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}
.je-form-card { padding: 24px 28px; }
.je-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 5px;
}
.je-req { color: var(--danger); }
.je-field, .je-field-ro {
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  font-family: inherit;
}
.je-field:focus { outline: 2px solid #c4e2f8; border-color: var(--accent); }
.je-field-ro { background: var(--surface-soft); color: var(--muted); cursor: default; }
.je-header-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.je-header-field {}
.je-notes-row { margin-bottom: 24px; max-width: 640px; }
/* Line items table */
.je-lines-section { margin-bottom: 20px; }
.je-lines-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.je-lines-table thead th {
  background: var(--surface-soft);
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.je-th-amount { text-align: right !important; }
.je-th-del { width: 36px; }
.je-line-row { border-bottom: 1px solid var(--line); }
.je-line-row:last-of-type { border-bottom: none; }
.je-cell-account { padding: 6px 8px; width: 32%; }
.je-cell-desc { padding: 6px 8px; width: 30%; }
.je-cell-amount { padding: 6px 8px; width: 16%; }
.je-cell-del { padding: 6px 6px; width: 36px; }
.je-select, .je-input {
  width: 100%;
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 13px;
  color: var(--ink);
  background: transparent;
  font-family: inherit;
  transition: border-color 0.12s;
}
.je-select:hover, .je-input:hover { border-color: var(--line-strong); background: #fff; }
.je-select:focus, .je-input:focus { outline: 2px solid #c4e2f8; border-color: var(--accent); background: #fff; }
.je-amount { text-align: right; }
.je-del-btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  color: var(--ink3);
  cursor: pointer;
  border-radius: 4px;
}
.je-del-btn:hover { color: var(--danger); background: var(--danger-soft); }
.je-total-row { background: var(--surface-soft); border-top: 2px solid var(--line); }
.je-total-label { padding: 10px 12px; font-weight: 700; font-size: 13px; text-align: right; color: var(--ink); }
.je-total-cell { padding: 10px 12px; font-weight: 700; font-size: 14px; text-align: right; color: var(--ink); }
.je-diff-cell { padding: 6px 12px; text-align: right; font-size: 13px; }
.je-add-line-btn {
  margin-top: 10px;
  background: none;
  border: 1px dashed var(--line-strong);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
}
.je-add-line-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
.je-form-footer {
  display: flex;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}
@media (max-width: 768px) {
  .je-header-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .je-header-grid { grid-template-columns: 1fr; }
  .je-form-card { padding: 16px; }
}

.proj-budget-wrap { min-width: 120px; }
.proj-budget-label { font-size: 13px; line-height: 1.4; }
.proj-budget-bar-track {
  margin-top: 5px;
  height: 5px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.proj-budget-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
.proj-budget-bar--ok   { background: var(--success); }
.proj-budget-bar--warn { background: var(--warning); }
.proj-budget-bar--over { background: var(--danger); }
.proj-budget-over-label { font-size: 11px; color: var(--danger); font-weight: 700; margin-top: 2px; display: block; }

/* Item Picker (shared floating dropdown for PO + Bill item tables) */
.item-picker-wrap { position: relative; flex: 1; min-width: 0; }
.item-text-input {
  width: 100%; border: none; border-bottom: 1px solid var(--line);
  background: transparent; font-size: 13px; color: var(--ink);
  padding: 4px 0; outline: none; cursor: pointer;
}
.item-text-input:focus { border-bottom-color: var(--accent); }
.item-picker-dropdown {
  position: fixed; z-index: 900; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 6px;
  box-shadow: var(--shadow); min-width: 340px; max-width: 520px;
  overflow: hidden;
}
.item-picker-dropdown.hidden { display: none; }
.item-picker-list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; }
.item-picker-list li {
  padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--line);
}
.item-picker-list li:last-child { border-bottom: none; }
.item-picker-list li:hover, .item-picker-list li.selected { background: var(--accent); color: #fff; }
.item-picker-list li.selected .ipl-rate, .item-picker-list li:hover .ipl-rate { color: rgba(255,255,255,0.65); }
.item-picker-list li.selected .ipl-stock, .item-picker-list li:hover .ipl-stock { color: rgba(255,255,255,0.65); }
.ipl-row1 { display: flex; align-items: baseline; justify-content: space-between; }
.ipl-name { font-size: 13px; font-weight: 600; color: inherit; }
.ipl-stock { font-size: 12px; color: var(--ink2); }
.ipl-row2 { display: flex; align-items: baseline; justify-content: space-between; margin-top: 2px; }
.ipl-rate { font-size: 12px; color: var(--ink2); }
.ipl-qty { font-size: 12px; color: var(--success); }
.item-picker-no-results { padding: 12px 14px; font-size: 13px; color: var(--ink3); text-align: center; }
.item-picker-add-btn {
  width: 100%; padding: 10px 14px; text-align: left; font-size: 13px;
  color: var(--accent); background: none; border: none; border-top: 1px solid var(--line);
  cursor: pointer; display: flex; align-items: center; gap: 6px; font-weight: 500;
}
.item-picker-add-btn:hover { background: var(--accent-soft); }
.item-picker-add-icon { font-size: 15px; }

/* Quick-add Item Modal — Zoho style */
.quick-item-modal {
  position: fixed; inset: 0; z-index: 800;
  display: none; align-items: center; justify-content: center;
  background: rgba(7,22,42,0.45);
}
.quick-item-modal.open { display: flex; }
.qim-card {
  background: var(--surface); border-radius: 4px;
  width: 960px; max-width: 97vw; max-height: 94vh;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,0.22); overflow: hidden;
}
.qim-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.qim-header h3 { font-size: 17px; font-weight: 600; color: var(--ink); margin: 0; }
.qim-close {
  display: grid; place-items: center; width: 28px; height: 28px;
  background: none; border: none; color: var(--ink3);
  cursor: pointer; border-radius: 6px; flex-shrink: 0;
}
.qim-close:hover { color: var(--ink); background: var(--surface-soft); }
#quick-item-form { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; }
.qim-body { flex: 1; overflow-y: auto; padding: 0; }

/* Top section */
.qim-top-section { display: grid; grid-template-columns: 1fr 280px; gap: 0; padding: 20px 24px 16px; background: var(--surface-soft); }
.qim-top-left { display: flex; flex-direction: column; gap: 0; }
.qim-field-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; min-height: 38px; }
.qim-field-row-top { align-items: flex-start; padding-top: 10px; }
.qim-label { width: 110px; min-width: 110px; font-size: 13px; color: var(--ink); flex-shrink: 0; }
.qim-req-label { color: var(--danger); font-weight: 500; }
.qim-info-icon { color: var(--ink3); font-size: 12px; cursor: help; margin-left: 2px; }
.qim-text-input {
  flex: 1; max-width: 320px; padding: 6px 10px;
  border: 1px solid var(--line-strong); border-radius: 4px; font-size: 14px; color: var(--ink);
}
.qim-text-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(32,96,232,0.12); }
.qim-select {
  flex: 1; max-width: 320px; padding: 6px 10px;
  border: 1px solid var(--line-strong); border-radius: 4px; font-size: 14px; color: var(--ink); background: var(--surface);
}
.qim-select:focus { outline: none; border-color: var(--accent); }
.qim-radio-group { display: flex; gap: 20px; }
.qim-radio-label { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink); cursor: pointer; }
.qim-radio-label input[type="radio"] { width: auto; accent-color: var(--accent); }
.qim-top-right { display: flex; align-items: flex-start; justify-content: center; padding-top: 4px; }
.qim-image-drop {
  width: 240px; height: 160px; border: 2px dashed var(--line-strong); border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: var(--ink3); cursor: pointer;
}
.qim-image-drop:hover { border-color: var(--accent); }
.qim-image-icon { display: flex; align-items: center; justify-content: center; color: var(--ink3); }
.qim-image-text { font-size: 13px; color: var(--ink3); margin: 0; }
.qim-browse-link { font-size: 13px; color: var(--accent); cursor: pointer; }
.qim-section-divider { height: 1px; background: var(--line); }

/* Sections (Sales, Purchase, Inventory) */
.qim-section { padding: 16px 24px; }
.qim-section-head { margin-bottom: 12px; }
.qim-cb-label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.qim-cb {
  width: 16px; height: 16px; accent-color: var(--accent);
  cursor: pointer; flex-shrink: 0;
}
.qim-section-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.qim-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.qim-price-row {
  display: flex; align-items: center; flex: 1; max-width: 320px;
  border: 1px solid var(--line-strong); border-radius: 4px; overflow: hidden; background: var(--surface);
}
.qim-currency-badge {
  padding: 6px 10px; background: var(--surface-soft); font-size: 13px; color: var(--ink);
  border-right: 1px solid var(--line-strong); white-space: nowrap; flex-shrink: 0;
}
.qim-price-input {
  flex: 1; border: none; padding: 6px 10px; font-size: 14px; color: var(--ink);
  outline: none; background: transparent; min-width: 0;
}
.qim-textarea {
  flex: 1; max-width: 320px; padding: 6px 10px;
  border: 1px solid var(--line-strong); border-radius: 4px; font-size: 14px;
  color: var(--ink); resize: vertical; min-height: 72px;
}
.qim-textarea:focus { outline: none; border-color: var(--accent); }
.qim-hidden { display: none; }
.qim-inventory-section { background: var(--surface); }
.qim-inventory-hint { font-size: 12px; color: var(--ink2); margin: 4px 0 12px 26px; }
.qim-footer {
  display: flex; gap: 10px; padding: 14px 24px;
  border-top: 1px solid var(--line); background: var(--surface); flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Projects — Complete Visual System
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Shared wrapper ── */
.proj-list-wrap,
.proj-form-wrap,
.proj-detail-wrap { display: flex; flex-direction: column; gap: 20px; }

/* ── List: top bar ── */
.proj-list-topbar {
  display: flex; align-items: center; justify-content: space-between;
}
.proj-list-title {
  font-size: 22px; font-weight: 800; color: var(--ink); margin: 0;
  letter-spacing: -0.3px;
}

/* ── Stat tiles ── */
.proj-stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.proj-stat-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 6px;
  position: relative; overflow: hidden;
}
.proj-stat-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
}
.proj-stat-card--total::before  { background: var(--accent); }
.proj-stat-card--active::before { background: var(--success); }
.proj-stat-card--done::before   { background: var(--warning); }
.proj-stat-card--unbilled::before { background: #8b5cf6; }
.proj-stat-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--ink3);
}
.proj-stat-value {
  font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1;
  letter-spacing: -0.5px;
}
.proj-stat-sub {
  font-size: 12px; color: var(--ink2); margin-top: 2px;
}

/* ── Status tabs ── */
.proj-status-tabs {
  display: flex; gap: 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 4px; box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
.proj-status-tab {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 14px; border: none; background: none;
  font-size: 13px; font-weight: 500; color: var(--ink2); cursor: pointer;
  border-radius: 6px; white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.proj-status-tab:hover { background: var(--surface-soft); color: var(--ink); }
.proj-status-tab.active {
  background: var(--accent-soft); color: var(--accent-strong);
  font-weight: 700;
}
.proj-status-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--bg); border-radius: 10px;
  font-size: 11px; font-weight: 700; color: var(--ink2);
}
.proj-status-tab.active .proj-status-count {
  background: var(--accent); color: #fff;
}

/* ── Project table rows ── */
.proj-row td { transition: background 0.1s; }
.proj-row:hover td { background: var(--surface-soft); }
.proj-row:active td { background: var(--accent-soft); }
.proj-name-cell strong { font-size: 14px; color: var(--ink); }
.proj-name-cell small { color: var(--ink2); font-size: 12px; }

/* ── Form view ── */
.proj-form-wrap { max-width: 860px; }

.proj-section {
  padding: 24px 28px;
  border-bottom: 1px solid var(--line);
}
.proj-section:last-child { border-bottom: none; padding-bottom: 12px; }

.proj-section-title {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--accent);
  margin: 0 0 18px; padding-left: 10px;
  border-left: 3px solid var(--accent);
}

.proj-tasks-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.proj-tasks-table { width: 100%; }
.proj-tasks-empty {
  font-size: 13px; color: var(--ink3); padding: 20px 0;
  text-align: center; font-style: italic;
}

/* ── Detail: breadcrumb ── */
.proj-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; padding: 2px 0;
}
.proj-breadcrumb-link {
  border: none; background: none; color: var(--accent); cursor: pointer;
  font-size: 13px; padding: 0; font-weight: 600;
  transition: color 0.12s;
}
.proj-breadcrumb-link:hover { color: var(--accent-strong); text-decoration: underline; }
.proj-breadcrumb-sep { color: var(--ink3); font-size: 15px; }
.proj-breadcrumb-cur { color: var(--ink); font-weight: 600; }

/* ── Detail: header card ── */
.proj-detail-header {
  background: linear-gradient(135deg, #0b3591 0%, #1652cc 60%, #2060e8 100%);
  border-radius: var(--radius-lg); padding: 28px 28px 24px;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  box-shadow: 0 6px 24px rgba(11,53,145,0.22);
  border: none;
}
.proj-detail-meta { display: flex; flex-direction: column; gap: 8px; }
.proj-detail-name {
  font-size: 24px; font-weight: 800; color: #fff; margin: 0;
  letter-spacing: -0.4px; line-height: 1.2;
}
.proj-detail-customer {
  font-size: 14px; color: rgba(255,255,255,0.75); font-weight: 500;
}
.proj-detail-meta-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.proj-deadline-meta { font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.6); }
.proj-deadline--overdue { color: #fca5a5; }
.proj-detail-header .status-pill {
  border: 1.5px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.15);
  color: #fff;
  backdrop-filter: blur(4px);
}
.proj-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.proj-detail-actions .ghost-button {
  background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3);
  color: #fff; backdrop-filter: blur(4px);
  font-size: 13px;
}
.proj-detail-actions .ghost-button:hover {
  background: rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.6);
  color: #fff;
}
.proj-detail-actions .danger-lite {
  background: rgba(191,52,45,0.25); border-color: rgba(255,120,120,0.4);
  color: #ffb3b0;
}
.proj-detail-actions .danger-lite:hover {
  background: rgba(191,52,45,0.45); color: #fff;
}
.proj-detail-actions .convert-action {
  background: rgba(255,255,255,0.9); color: var(--accent-strong);
  border-color: transparent; font-weight: 600;
}
.proj-detail-actions .convert-action:hover { background: #fff; }

/* ── Detail: tabs ── */
.proj-detail-tabs {
  display: flex; gap: 0;
  border-bottom: 2px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--shadow-sm);
}
.proj-tab-btn {
  padding: 13px 20px; border: none; background: none;
  font-size: 14px; font-weight: 500; color: var(--ink2); cursor: pointer;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.proj-tab-btn:hover { color: var(--accent); }
.proj-tab-btn.active {
  color: var(--accent); border-bottom-color: var(--accent); font-weight: 700;
}
.proj-tab-content {
  background: var(--surface);
  border: 1px solid var(--line); border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
}
.proj-tab-content > .panel {
  border: none; border-radius: 0; box-shadow: none;
}

/* ── Detail: overview grid ── */
.proj-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.proj-info-card {
  padding: 22px 24px;
  border-right: 1px solid var(--line);
}
.proj-info-card:last-child { border-right: none; }
.proj-info-card-title {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--ink2);
  margin: 0 0 16px; display: flex; align-items: center; gap: 6px;
}
.proj-info-card-title::before {
  content: ""; display: block; width: 12px; height: 12px;
  border-radius: 3px; background: var(--accent-soft);
  border: 2px solid var(--accent);
  flex-shrink: 0;
}
.proj-info-row {
  display: flex; align-items: flex-start; gap: 0;
  padding: 9px 0; border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.proj-info-row:last-child { border-bottom: none; }
.proj-info-row--col { flex-direction: column; gap: 6px; }
.proj-info-label {
  color: var(--ink3); min-width: 130px; flex-shrink: 0;
  font-size: 12px; font-weight: 600;
  padding-top: 1px;
}
.proj-info-value { color: var(--ink); font-size: 13px; font-weight: 500; }

/* ── Budget progress bar ── */
.proj-budget-wrap { min-width: 140px; }
.proj-budget-label { font-size: 12px; color: var(--ink); margin-bottom: 5px; }
.proj-budget-bar-track {
  height: 7px; background: var(--bg); border-radius: 4px; overflow: hidden;
  border: 1px solid var(--line);
}
.proj-budget-bar {
  height: 100%; border-radius: 4px; transition: width 0.4s ease;
}
.proj-budget-bar--ok   { background: linear-gradient(90deg, #22c55e, #16a34a); }
.proj-budget-bar--warn { background: linear-gradient(90deg, #f59e0b, #d97706); }
.proj-budget-bar--over { background: linear-gradient(90deg, #ef4444, #bf342d); }
.proj-budget-over-label {
  font-size: 11px; color: var(--danger); font-weight: 700; margin-top: 3px;
  display: block;
}

/* ── Landing + Auth pages — Tablet ───────────────────────────────────────── */
@media (max-width: 960px) {
  .auth-page-left { flex: 0 0 46%; padding: 48px 40px; }
  .auth-page-right { flex: 0 0 54%; padding: 48px 40px; }
  .ap-brand-headline { font-size: 28px; }
  .lp-feat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Landing + Auth pages — Mobile ───────────────────────────────────────── */
@media (max-width: 768px) {
  /* Landing */
  .lp-nav { padding: 14px 20px; }
  .lp-nav-right { gap: 8px; }
  .lp-nav-signin, .lp-nav-getstarted { height: 34px; padding: 0 12px; font-size: 13px; }
  .lp-hero { padding: 64px 24px 72px; }
  .lp-hero-h1 { font-size: 36px; letter-spacing: -1px; }
  .lp-hero-body { font-size: 15px; }
  .lp-feat-grid { grid-template-columns: 1fr; }
  .lp-features { padding: 56px 24px 64px; }
  .lp-footer { padding: 20px 24px; flex-direction: column; align-items: flex-start; gap: 8px; }
  /* Auth pages: stack - hide brand panel, full-width form */
  .auth-page-bg { flex-direction: column; }
  .auth-page-left { display: none; }
  .auth-page-right {
    flex: 1; padding: 48px 24px 60px;
    background: linear-gradient(160deg, #f0f4ff 0%, #e8efff 60%, #fff 100%);
  }
  .auth-page-panel {
    background: #fff; border-radius: 20px;
    padding: 36px 28px; max-width: 100%;
    box-shadow: 0 12px 48px rgba(11,53,145,0.12);
  }
}

/* ── Mobile Responsive ───────────────────────────────────────────────────── */
@media (max-width: 680px) {
  /* Sidebar becomes a slide-in drawer */
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 280px;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    z-index: 1001;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 12px;
    gap: 16px;
    border-right: 1px solid rgba(255,255,255,0.08);
    box-shadow: none;
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 32px rgba(0,0,0,0.35);
  }

  /* Show backdrop */
  .sidebar-backdrop { display: block; }

  /* Show hamburger */
  .sidebar-toggle { display: flex; }

  /* Restore sidebar children hidden by previous breakpoints */
  .brand-block { display: flex; }
  .sidebar-card { display: block; }
  .sidebar-account { display: flex; }
  .nav-group-label { display: block; }

  /* Nav list stays vertical */
  .nav-list {
    display: grid;
    gap: 12px;
    width: auto;
    overflow-x: visible;
    padding-bottom: 0;
  }

  .nav-item, .nav-item.nested {
    padding: 9px 10px;
    font-size: 13px;
    border-radius: 8px;
    white-space: normal;
    flex-shrink: 1;
  }

  .nav-group {
    display: grid;
    gap: 3px;
  }

  .workspace {
    grid-column: 1;
    grid-row: 2;
    padding-bottom: 0;
  }

  /* Topbar */
  .topbar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }

  .topbar-search { width: 100%; order: 3; }
  .topbar-search input { width: 100%; }

  /* Dashboard summary bar stacks to 1 column */
  .zoho-summary-bar {
    grid-template-columns: 1fr;
  }

  .zoho-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .zoho-widget-wide {
    grid-column: span 1;
  }

  /* Reports module stacks */
  .reports-module {
    grid-template-columns: 1fr;
  }

  .reports-catalog {
    position: static;
    max-height: none;
  }

  .reports-home-grid {
    grid-template-columns: 1fr;
  }

  /* Report filter bar stacks */
  .report-filter-bar {
    grid-template-columns: 1fr 1fr;
  }

  /* Cashflow stacks */
  .zoho-cashflow {
    grid-template-columns: 1fr;
  }

  /* Modals go full screen */
  .new-customer-modal .ncm-card,
  .quick-vendor-modal .qvm-card,
  .quick-item-modal .qim-card,
  .modal-card {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  .new-customer-modal,
  .quick-vendor-modal,
  .quick-item-modal,
  .modal-overlay {
    padding: 0;
  }

  /* Auth card fills screen */
  .auth-card {
    padding: 28px 20px 24px;
  }

  /* Invoice/bill line tables scroll horizontally */
  .invoice-preview-table,
  .report-table,
  .report-statement,
  .data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Module summary tiles stack */
  .module-summary-row {
    flex-wrap: wrap;
  }

  .module-summary-tile {
    flex: 1 1 calc(50% - 8px);
  }

  /* COA and form grids go single column */
  .qvm-contact-row,
  .qvm-phone-row {
    flex-direction: column;
  }

  .zoho-money-split {
    grid-template-columns: 1fr;
  }

  .report-action-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .report-actions {
    width: 100%;
  }
}

/* ── Timesheet (Zoho-style) ──────────────────────────────────────────────────── */
.ts-module {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.ts-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}

.ts-log-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.ts-log-btn svg { width: 14px; height: 14px; }
.ts-log-btn:hover { background: var(--accent-strong); }

.ts-summary-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.ts-summary-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 24px;
  border-right: 1px solid var(--line);
}
.ts-summary-tile:last-child { border-right: none; }

.ts-tile-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink3);
}

.ts-tile-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.ts-tile-blue { color: var(--accent); }
.ts-tile-green { color: var(--success); }

.ts-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--line);
  gap: 12px;
  flex-wrap: wrap;
}

.ts-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ts-filter-select {
  padding: 6px 28px 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235b6b88' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  transition: border-color 0.15s;
}
.ts-filter-select:focus { outline: none; border-color: var(--accent); }

.ts-filter-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ts-entry-count {
  font-size: 12px;
  color: var(--ink3);
  white-space: nowrap;
}

.ts-perpage-label {
  font-size: 12px;
  color: var(--ink2);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ts-perpage-select {
  padding: 5px 24px 5px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235b6b88' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
}

.ts-table-wrap {
  background: var(--surface);
  overflow-x: auto;
}

.ts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ts-table thead tr {
  background: var(--surface-soft);
  border-bottom: 1px solid var(--line);
}

.ts-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink3);
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}

.ts-th-check { width: 36px; }
.ts-th-sort {
  cursor: pointer;
  user-select: none;
}
.ts-th-sort:hover { color: var(--accent); }

.ts-sort-icon {
  width: 10px;
  height: 14px;
  vertical-align: middle;
  margin-left: 4px;
  color: var(--ink3);
  opacity: 0.5;
  display: inline-block;
}
.ts-sort-icon.ts-sort-active {
  color: var(--accent);
  opacity: 1;
}

.ts-table tbody tr {
  border-bottom: 1px solid var(--line);
  transition: background 0.1s;
}
.ts-table tbody tr:last-child { border-bottom: none; }
.ts-table tbody tr:hover { background: var(--accent-soft); }

.ts-table td {
  padding: 11px 14px;
  color: var(--ink);
  vertical-align: middle;
}

.ts-td-check { width: 36px; }
.ts-td-date { color: var(--ink2); white-space: nowrap; }
.ts-td-project { font-weight: 500; }
.ts-td-task { color: var(--ink2); max-width: 220px; }

.ts-td-hours {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.ts-td-hours svg { width: 14px; height: 14px; color: var(--ink3); flex-shrink: 0; }

.ts-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.ts-pill-billable    { background: #e8f5ff; color: #1a6fbf; }
.ts-pill-nonbillable { background: var(--surface-soft); color: var(--ink3); }
.ts-pill-unbilled    { background: var(--warning-soft); color: var(--warning); }
.ts-pill-billed      { background: var(--success-soft); color: #16a34a; }

.ts-td-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}
.ts-table tbody tr:hover .ts-td-actions { opacity: 1; }

.ts-act-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink2);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ts-act-btn svg { width: 13px; height: 13px; }
.ts-act-btn:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.ts-act-danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }

.ts-empty-cell { padding: 48px 24px; }
.ts-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  color: var(--ink3);
}
.ts-empty-state svg { width: 48px; height: 48px; opacity: 0.4; }
.ts-empty-state p { margin: 0; font-size: 14px; }

.ts-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 10px;
}

.ts-page-info {
  font-size: 12px;
  color: var(--ink3);
}

.ts-page-btns {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ts-page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink2);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}
.ts-page-btn svg { width: 8px; height: 12px; }
.ts-page-btn:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.ts-page-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.ts-page-btn.ts-page-active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

.ts-page-ellipsis {
  padding: 0 4px;
  font-size: 13px;
  color: var(--ink3);
  line-height: 32px;
}

@media (max-width: 768px) {
  .ts-summary-bar { grid-template-columns: repeat(2, 1fr); }
  .ts-filter-bar { flex-direction: column; align-items: flex-start; }
  .ts-header { padding: 14px 16px 12px; }
  .ts-summary-tile { padding: 12px 16px; }
  .ts-table th, .ts-table td { padding: 9px 10px; }
  .ts-td-task { max-width: 120px; }
  .ts-td-actions { opacity: 1; }
  .ts-pagination { flex-direction: column; align-items: flex-start; }
}

/* ── Settings ────────────────────────────────────────────────────────────────── */
.stg-layout {
  display: flex;
  min-height: calc(100vh - 56px);
  background: var(--bg);
}
.stg-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.stg-sidebar-header {
  padding: 18px 20px 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.stg-sidebar-header::before {
  content: "";
  width: 4px;
  height: 18px;
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
}
.stg-nav {
  padding: 10px 0 16px;
  flex: 1;
  overflow-y: auto;
}
.stg-nav-group { margin-bottom: 6px; }
.stg-nav-group-label {
  padding: 10px 20px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink3);
}
.stg-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 16px 8px 18px;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  text-align: left;
  font-size: 13px;
  color: var(--ink2);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  border-radius: 0;
}
.stg-nav-item:hover {
  background: var(--accent-soft);
  color: var(--ink);
}
.stg-nav-item.stg-nav-active {
  background: var(--accent-soft);
  border-left-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.stg-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--bg);
  transition: background 0.12s, color 0.12s;
}
.stg-nav-icon svg { width: 14px; height: 14px; }
.stg-main {
  flex: 1;
  padding: 28px 36px;
  overflow-y: auto;
}
.stg-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink3);
  margin-bottom: 14px;
}
.stg-breadcrumb-sep { color: var(--line-strong); }
.stg-breadcrumb-current { color: var(--ink2); font-weight: 500; }
.stg-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 760px;
  box-shadow: var(--shadow-sm);
}
.stg-content-header {
  padding: 20px 24px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.stg-content-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
}
.stg-content-icon svg { width: 20px; height: 20px; }
.stg-content-text { flex: 1; min-width: 0; }
.stg-content-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.stg-content-desc {
  margin: 0;
  font-size: 13px;
  color: var(--ink3);
  line-height: 1.5;
}
.stg-form {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.stg-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.stg-card-header {
  padding: 10px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink3);
}
.stg-card-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.stg-copy {
  margin: 0;
  font-size: 13px;
  color: var(--ink2);
  line-height: 1.6;
}
.stg-action-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.stg-backup-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  color: var(--ink2);
  font-size: 12px;
}
.stg-backup-meta strong {
  color: var(--ink);
  font-size: 13px;
}
.role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 0 24px 24px;
}
.role-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 16px;
}
.role-card--active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.role-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.role-card-head strong {
  color: var(--ink);
}
.role-card-head span {
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
}
.role-card p {
  margin: 8px 0 12px;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.5;
}
.role-perms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.role-perms span {
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
}
.role-perms .allowed {
  background: var(--success-soft);
  color: var(--success);
}
.role-perms .blocked {
  background: var(--danger-soft);
  color: var(--danger);
}
.health-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.health-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px 16px;
}
.health-card span {
  display: block;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.health-card strong {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-size: 22px;
}
.health-card--healthy {
  border-color: rgba(34, 197, 94, 0.35);
  background: var(--success-soft);
}
.health-card--review {
  border-color: rgba(245, 158, 11, 0.35);
  background: var(--warning-soft);
}
.health-card--needs-attention {
  border-color: rgba(220, 38, 38, 0.35);
  background: var(--danger-soft);
}
.stg-form-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink3);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.stg-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.stg-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.stg-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink2);
}
.stg-req { color: var(--danger); }
.stg-input {
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
.stg-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(32, 96, 232, 0.1);
}
.stg-textarea { resize: vertical; min-height: 80px; }
.stg-hint { font-size: 11px; color: var(--ink3); line-height: 1.4; }
.stg-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
}
.stg-save-btn {
  padding: 9px 22px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.stg-save-btn:hover { background: var(--accent-strong); }
.stg-discard-btn {
  padding: 9px 18px;
  background: none;
  color: var(--ink2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.stg-discard-btn:hover { background: var(--bg); border-color: var(--ink3); color: var(--ink); }
.stg-avatar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 2px 0 6px;
}
.stg-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  border: 2px dashed rgba(32,96,232,0.3);
  letter-spacing: -1px;
}
.stg-avatar-meta { display: flex; flex-direction: column; gap: 3px; }
.stg-avatar-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.stg-avatar-sub { font-size: 11.5px; color: var(--ink3); }
.stg-info-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--accent-soft);
  border-radius: var(--radius);
  border: 1px solid rgba(32,96,232,0.12);
  font-size: 12.5px;
  color: var(--ink2);
  line-height: 1.5;
}
.stg-danger-zone {
  border: 1px solid rgba(191,52,45,0.2);
  border-radius: var(--radius);
  overflow: hidden;
}
.stg-danger-header {
  padding: 10px 16px;
  background: var(--danger-soft);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--danger);
}
.stg-danger-body {
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--surface);
}
.stg-danger-body p { margin: 0; font-size: 13px; color: var(--ink2); line-height: 1.5; }
.stg-danger-btn {
  padding: 8px 16px;
  background: none;
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.stg-danger-btn:hover { background: var(--danger); color: #fff; }
/* Recurring table in settings panel */
.stg-panel .data-table-wrap,
.stg-panel table.data-table {
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
}

@media (max-width: 900px) {
  .stg-layout { flex-direction: column; }
  .stg-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--line); }
  .stg-nav { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 12px; }
  .stg-nav-group { display: contents; }
  .stg-nav-group-label { display: none; }
  .stg-nav-item { width: auto; border-left: none; border-bottom: 2px solid transparent; border-radius: var(--radius); padding: 7px 14px; }
  .stg-nav-item.stg-nav-active { border-bottom-color: var(--accent); border-left-color: transparent; }
  .stg-main { padding: 16px; }
  .stg-field-row { grid-template-columns: 1fr; }
  .stg-content-header { padding: 16px 18px; }
  .stg-form { padding: 16px 18px; }
  .stg-form-actions { padding: 12px 18px; }
}

/* ── Dark Mode ───────────────────────────────────────────────────────────────── */

/* Root element inherits page background */
[data-theme="dark"],
[data-theme="dark"] html,
[data-theme="dark"] body { background: #0d1117; color: #f0f4ff; }

[data-theme="dark"] {
  /* ─ Surface elevation — neutral dark, minimal blue saturation ─ */
  --bg:           #0d1117;   /* page canvas: near-black, subtle cool tint */
  --surface:      #161b22;   /* cards/panels: clearly lighter than bg (+7 luminance) */
  --surface-soft: #1e2530;   /* hover, nested surface, table rows */
  --surface-tint: #0d1a11;   /* success/teal tint areas */

  /* ─ Borders — visible but not harsh ─ */
  --line:         #2d3748;   /* standard divider — clearly visible */
  --line-strong:  #3a4a5e;   /* emphasized border */

  /* ─ Typography — strong contrast hierarchy ─ */
  --ink:          #f0f4ff;   /* primary: near-white, crisp */
  --ink2:         #8b9eb8;   /* secondary: readable gray-blue */
  --ink3:         #4e6278;   /* muted/disabled */
  --muted:        #8b9eb8;

  /* ─ Brand accent ─ */
  --accent:       #58a6ff;
  --accent-strong:#388bfd;
  --accent-soft:  #0d1f3c;

  /* ─ Semantic surfaces ─ */
  --teal-soft:    #0d1a11;
  --success-soft: #0d1a11;
  --warning-soft: #1a1500;
  --danger-soft:  #1c0a0a;
  --blue-soft:    #0d1f3c;

  /* ─ Shadows — stronger for better depth perception ─ */
  --shadow:       0 8px 32px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.4);
  --shadow-sm:    0 2px 12px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);

  /* ─ Chart colors ─ */
  --chart-1: #5a9cf8;
  --chart-2: #30d394;
  --chart-3: #fbbf24;
  --chart-4: #93c5fd;
  --chart-5: #6ee7b7;
}

/* ── Sidebar — flat dark, professional ── */
[data-theme="dark"] .sidebar {
  background: #0a0e16;
  border-right: 1px solid #1e2533;
  color: #c9d1d9;
  box-shadow: none;
}
[data-theme="dark"] .sidebar-nav { background: transparent; }
[data-theme="dark"] .brand-block {
  border-bottom: 1px solid #1e2533;
  padding-bottom: 14px;
  margin-bottom: 4px;
}
[data-theme="dark"] .brand-mark {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
[data-theme="dark"] .sidebar .eyebrow { color: rgba(255,255,255,0.22); }
[data-theme="dark"] .nav-group + .nav-group {
  border-top: 1px solid #1e2533;
  padding-top: 8px;
  margin-top: 4px;
}
[data-theme="dark"] .nav-group-label {
  color: #484f58;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
[data-theme="dark"] .nav-item {
  color: #8b949e;
  font-size: 13.5px;
}
[data-theme="dark"] .nav-item::before {
  background: #161b22;
  color: #8b949e;
  border: 1px solid #2d3748;
  font-weight: 700;
}
[data-theme="dark"] .nav-item:hover {
  background: rgba(255,255,255,0.05);
  color: #c9d1d9;
}
[data-theme="dark"] .nav-item:hover::before {
  background: #1e2530;
  color: #c9d1d9;
  border-color: #3a4a5e;
}
[data-theme="dark"] .nav-item.active {
  background: rgba(56,139,253,0.1);
  color: #58a6ff;
}
[data-theme="dark"] .nav-item.active::before {
  background: rgba(56,139,253,0.2);
  color: #58a6ff;
  border-color: rgba(56,139,253,0.4);
}
[data-theme="dark"] .sidebar-card {
  background: #111720;
  border: 1px solid #1e2533;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
[data-theme="dark"] .sidebar-card strong { color: #e6edf3; }
[data-theme="dark"] .sidebar-mini-grid { color: #484f58; }
[data-theme="dark"] .sidebar-mini-grid b { color: #8b949e; }
[data-theme="dark"] .sidebar-account-label { color: #484f58; }
[data-theme="dark"] .sidebar-logout {
  background: transparent;
  border-color: rgba(220,38,38,0.25);
  color: #f87171;
}
[data-theme="dark"] .sidebar-logout:hover {
  background: rgba(220,38,38,0.1);
  border-color: rgba(220,38,38,0.45);
}
[data-theme="dark"] .sidebar-account { border-top: 1px solid #1e2533; }

/* ── Topbar ── */
[data-theme="dark"] .topbar {
  background: #0d1117;
  border: none;
  border-bottom: 1px solid #21262d;
  border-radius: 0;
  box-shadow: none;
  margin: -18px -22px 0;
  padding: 14px 22px;
  width: calc(100% + 44px);
}
[data-theme="dark"] .topbar h2 {
  color: #e6edf3;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
[data-theme="dark"] .topbar .eyebrow { color: #484f58; font-size: 10px; letter-spacing: 0.08em; }
[data-theme="dark"] .topbar-search input {
  background: #161b22;
  border: 1px solid #30363d;
  color: #c9d1d9;
  border-radius: 6px;
}
[data-theme="dark"] .topbar-search input:focus { border-color: #58a6ff; box-shadow: 0 0 0 3px rgba(56,139,253,0.12); }
[data-theme="dark"] .topbar-search input::placeholder { color: #484f58; }
[data-theme="dark"] .topbar-theme-toggle {
  background: #161b22;
  border: 1px solid #30363d;
  color: #8b949e;
  border-radius: 6px;
}
[data-theme="dark"] .topbar-theme-toggle:hover { background: #1c2128; border-color: #58a6ff; color: #58a6ff; }
[data-theme="dark"] .topbar-logout {
  background: transparent;
  border: 1px solid rgba(248,81,73,0.3);
  color: #f85149;
  border-radius: 6px;
}
[data-theme="dark"] .topbar-logout:hover { background: rgba(248,81,73,0.1); border-color: rgba(248,81,73,0.5); }

/* ── Buttons ── */
[data-theme="dark"] .ghost-button {
  background: #21262d;
  border: 1px solid #30363d;
  color: #c9d1d9;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), inset 0 1px 0 rgba(255,255,255,0.04);
}
[data-theme="dark"] .ghost-button:hover {
  background: #30363d;
  border-color: #8b949e;
  color: #e6edf3;
}
[data-theme="dark"] .primary-button {
  background: #238636;
  border: 1px solid rgba(240,246,252,0.1);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04);
}
[data-theme="dark"] .primary-button:hover { background: #2ea043; }
[data-theme="dark"] .danger-button {
  background: transparent;
  border: 1px solid rgba(248,81,73,0.3);
  color: #f85149;
}
[data-theme="dark"] .danger-button:hover { background: rgba(248,81,73,0.1); border-color: rgba(248,81,73,0.5); }
[data-theme="dark"] .table-action {
  background: transparent;
  border: 1px solid #30363d;
  color: #58a6ff;
}
[data-theme="dark"] .table-action:hover { background: rgba(56,139,253,0.1); border-color: #58a6ff; }

/* ── Tables ── */
[data-theme="dark"] .table-shell {
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 8px;
  box-shadow: none;
  overflow: hidden;
}
[data-theme="dark"] thead th {
  background: #161b22 !important;
  color: #8b949e !important;
  border-bottom: 1px solid #21262d !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
  padding: 10px 12px !important;
}
[data-theme="dark"] tbody tr { border-bottom: 1px solid #21262d; }
[data-theme="dark"] tbody tr:hover { background: #1c2128 !important; }
[data-theme="dark"] th, [data-theme="dark"] td { border-bottom-color: #21262d; color: #c9d1d9; }

/* ── Forms & inputs ── */
[data-theme="dark"] .field-input,
[data-theme="dark"] .je-field,
[data-theme="dark"] .je-select,
[data-theme="dark"] .je-input,
[data-theme="dark"] .bill-account-select,
[data-theme="dark"] .bill-vat-select { background: #0d1117; border-color: #3a4a5e; color: #f0f4ff; }
[data-theme="dark"] .field-input:focus,
[data-theme="dark"] .je-field:focus,
[data-theme="dark"] .je-select:focus,
[data-theme="dark"] .je-input:focus { outline: 2px solid rgba(77,143,248,0.45); border-color: var(--accent); background: #0d1117; }
[data-theme="dark"] .form-row label { color: #8b9eb8; }
[data-theme="dark"] select option { background: #1e2530; color: #f0f4ff; }

/* ── Modals ── */
[data-theme="dark"] .modal-backdrop { background: rgba(0,0,0,0.75); }
[data-theme="dark"] .modal-card { background: #161b22; border: 1px solid #3a4a5e; box-shadow: 0 24px 72px rgba(0,4,20,0.88); }
[data-theme="dark"] .modal-header { border-bottom-color: #2d3748; }
[data-theme="dark"] .modal-footer { border-top-color: #2d3748; }

/* ── Status pills ── */
[data-theme="dark"] .status-draft,
[data-theme="dark"] .status-inactive,
[data-theme="dark"] .status-void { background: #1e2530; color: #8b9ab5; }
[data-theme="dark"] .status-sent,
[data-theme="dark"] .status-approved,
[data-theme="dark"] .status-pending { background: #0d1f3c; color: #7aa2f7; }

/* ── Dashboard tiles ── */
[data-theme="dark"] .zoho-summary-tile--blue   { background: linear-gradient(150deg, #141e32 0%, #192846 100%); border-color: #2d3748; }
[data-theme="dark"] .zoho-summary-tile--orange { background: linear-gradient(150deg, #211700 0%, #2b1e00 100%); border-color: #2e1f00; }
[data-theme="dark"] .zoho-summary-tile--green  { background: linear-gradient(150deg, #0c1f14 0%, #102616 100%); border-color: #153320; }
[data-theme="dark"] .zoho-summary-tile:hover { box-shadow: 0 8px 32px rgba(0,4,20,0.65); transform: translateY(-1px); }

/* ── Setup / getting started ── */
[data-theme="dark"] .setup-step.done { border-color: #163325; background: #0c1f14; }
[data-theme="dark"] .step-check { background: #161b22; }
[data-theme="dark"] .progress-track { background: #2d3748; }

/* ── Panels & cards ── */
[data-theme="dark"] .panel { background: #161b22; border-color: #2d3748; box-shadow: 0 2px 12px rgba(0,4,20,0.4); }
/* ── Navigation ── */

/* Period / date filter pill buttons */
[data-theme="dark"] .period-btn {
  background: #1e2530;
  border-color: #3a4a5e;
  color: #4e6278;
}
[data-theme="dark"] .period-btn:hover { border-color: var(--accent); color: var(--accent); }
[data-theme="dark"] .period-btn--active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Status filter bar (already has overrides, reinforce) */
[data-theme="dark"] .status-filter-bar { border-color: #2d3748; }

/* pmade / payments-made filter tabs */
[data-theme="dark"] .pmade-filter-tabs button {
  background: #1e2530;
  border-color: #3a4a5e;
  color: #8b9eb8;
}
[data-theme="dark"] .pmade-filter-tabs button.active {
  background: #0d1f3c;
  border-color: var(--accent);
  color: var(--accent);
}
[data-theme="dark"] .pmade-search input {
  background: #0d1117;
  border-color: #3a4a5e;
  color: #f0f4ff;
}

/* Project detail tabs */
[data-theme="dark"] .proj-detail-tabs {
  background: #161b22;
  border-color: #2d3748;
}
[data-theme="dark"] .proj-tab-btn { color: #4e6278; }
[data-theme="dark"] .proj-tab-btn:hover { color: var(--accent); }
[data-theme="dark"] .proj-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
[data-theme="dark"] .proj-tab-content {
  background: #161b22;
  border-color: #2d3748;
}

/* Customer / item tab bars */
[data-theme="dark"] .customer-tab-button { border-bottom-color: #2d3748; }
[data-theme="dark"] .customer-tab-button.active::after { background: var(--accent); }

/* Keyboard shortcut panel */
[data-theme="dark"] .kbd-card {
  background: #161b22;
  border: 1px solid #3a4a5e;
  box-shadow: 0 12px 48px rgba(0,0,0,0.65);
}
[data-theme="dark"] .kbd-head { border-bottom-color: #2d3748; }
[data-theme="dark"] .kbd-head h3 { color: #f0f4ff; }
[data-theme="dark"] .kbd-close-btn { color: #4e6278; }
[data-theme="dark"] .kbd-close-btn:hover { background: #1e2530; }
[data-theme="dark"] .kbd-row { color: #bccedd; }
[data-theme="dark"] .kbd-row span { color: #445568; }
[data-theme="dark"] .kbd-section-label { color: #445568; border-bottom-color: #2d3748; }
[data-theme="dark"] kbd {
  background: #1e2530;
  border-color: #445568;
  color: #bccedd;
}

/* Sidebar account area */

/* Settings page */
[data-theme="dark"] .stg-layout { background: #0d1117; }
[data-theme="dark"] .stg-sidebar { background: #0d1117; border-right-color: #2d3748; }
[data-theme="dark"] .stg-sidebar-header { color: #f0f4ff; border-bottom-color: #2d3748; }
[data-theme="dark"] .stg-nav-group-label { color: #445568; }
[data-theme="dark"] .stg-nav-icon { background: #1e2530; }
[data-theme="dark"] .stg-nav-item { color: #8b9eb8; }
[data-theme="dark"] .stg-nav-item:hover { background: #1e2530; color: #bccedd; }
[data-theme="dark"] .stg-nav-item.stg-nav-active { background: #0d1f3c; border-left-color: var(--accent); color: var(--accent); }
[data-theme="dark"] .stg-nav-item.stg-nav-active .stg-nav-icon { background: rgba(32,96,232,0.15); color: var(--accent); }
[data-theme="dark"] .stg-panel { background: #161b22; border-color: #2d3748; box-shadow: 0 2px 10px rgba(0,0,0,0.4); }
[data-theme="dark"] .stg-content-header { border-bottom-color: #2d3748; }
[data-theme="dark"] .stg-content-title { color: #f0f4ff; }
[data-theme="dark"] .stg-content-desc { color: #4e6278; }
[data-theme="dark"] .stg-card { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .stg-card-header { background: #0d1117; border-bottom-color: #2d3748; color: #445568; }
[data-theme="dark"] .stg-card-body { background: #161b22; }
[data-theme="dark"] .stg-form-section-label { color: #445568; border-bottom-color: #2d3748; }
[data-theme="dark"] .stg-input { background: #0d1117; border-color: #3a4a5e; color: #f0f4ff; }
[data-theme="dark"] .stg-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(32,96,232,0.15); }
[data-theme="dark"] .stg-hint { color: #445568; }
[data-theme="dark"] .stg-info-row { background: #0d1f3c; border-color: rgba(32,96,232,0.2); color: #8b9eb8; }
[data-theme="dark"] .stg-danger-zone { border-color: rgba(191,52,45,0.25); }
[data-theme="dark"] .stg-avatar { background: #0d1f3c; border-color: rgba(32,96,232,0.2); }
[data-theme="dark"] .stg-breadcrumb { color: #445568; }
[data-theme="dark"] .stg-breadcrumb-current { color: #8b9eb8; }

/* Branding logo box */
[data-theme="dark"] .brand-logo-box { background: #0d1117; border-color: #3a4a5e; color: #445568; }

/* Sub-plan cards */
[data-theme="dark"] .sub-plan-info { border-color: #2d3748; }
[data-theme="dark"] .sub-plan-info--pro { background: #0d1f3c; border-color: var(--accent); }
[data-theme="dark"] .sub-plan-info-desc { color: #4e6278; }

/* Appearance theme preview cards */
[data-theme="dark"] .appear-theme-card { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .appear-theme-card.active { background: #0d1f3c; border-color: var(--accent); }
[data-theme="dark"] .appear-theme-preview--auto { background: linear-gradient(90deg, #1e2530 50%, #0d1117 50%); }

/* Subscription badge */
[data-theme="dark"] .subscription-badge { background: #0d2218; color: #4ade80; border-color: #1a3d2b; }

/* Quick-view panel */
[data-theme="dark"] .qv-backdrop { background: rgba(0,0,0,0.6); }
[data-theme="dark"] .qv-panel {
  background: #161b22;
  border-left: 1px solid #2d3748;
  box-shadow: -8px 0 48px rgba(0,0,0,0.6);
}
[data-theme="dark"] .qv-panel-header {
  background: #0d1117;
  border-bottom: 1px solid #2d3748;
}
[data-theme="dark"] .qv-panel-header h3 { color: #f0f4ff; }
[data-theme="dark"] .qv-close-btn { color: #4e6278; }
[data-theme="dark"] .qv-close-btn:hover { background: #1e2530; color: #bccedd; }
[data-theme="dark"] .qv-panel-body { background: #161b22; }
[data-theme="dark"] .qv-stat { background: #1e2530; border: 1px solid #2d3748; }
[data-theme="dark"] .qv-stat span { color: #445568; }
[data-theme="dark"] .qv-stat strong { color: #f0f4ff; }
[data-theme="dark"] .qv-section-title { color: #445568; }
[data-theme="dark"] .qv-contact { color: #4e6278; }
[data-theme="dark"] .qv-list-row { border-bottom-color: #2d3748; }
[data-theme="dark"] .qv-list-id { color: #bccedd; }
[data-theme="dark"] .qv-list-date { color: #445568; }
[data-theme="dark"] .qv-list-amount { color: #f0f4ff; }
[data-theme="dark"] .qv-empty { color: #445568; }
[data-theme="dark"] .qv-footer-actions { border-top: 1px solid #2d3748; }

/* ── Workspace & panels ── */
[data-theme="dark"] .workspace { background: #0d1117; }
[data-theme="dark"] .panel,
[data-theme="dark"] .metric-card {
  background: #161b22;
  border: 1px solid #21262d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 3px rgba(0,0,0,0.3);
}
[data-theme="dark"] .section-header { border-color: #21262d; }
[data-theme="dark"] .module-toolbar { background: #161b22; border-color: #21262d; }

/* Dashboard header */
[data-theme="dark"] .dash-header {
  background: #161b22;
  border: 1px solid #21262d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
[data-theme="dark"] .dash-header-actions .ghost-button {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.15);
  color: #c9d1d9;
}
[data-theme="dark"] .dash-header-actions .ghost-button:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.3);
  color: #e6edf3;
}
[data-theme="dark"] .dash-header-actions .primary-button { background: #238636; border-color: rgba(240,246,252,0.1); }
[data-theme="dark"] .dash-header-actions .primary-button:hover { background: #2ea043; }

/* Dashboard KPI tiles */
[data-theme="dark"] .zoho-summary-tile {
  border: 1px solid #21262d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 1px 3px rgba(0,0,0,0.3);
}
[data-theme="dark"] .zoho-summary-tile:hover {
  border-color: #30363d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 16px rgba(0,0,0,0.4);
  transform: translateY(-1px);
}

/* Cashflow & income stats */
[data-theme="dark"] .zoho-cashflow-stat--in  { background: #0d2218; border-color: #1a3d2b; }
[data-theme="dark"] .zoho-cashflow-stat--out { background: #1f0c0c; border-color: #3d1a1a; }

/* Activity type badges */
[data-theme="dark"] .zoho-activity-type--invoice { background: #0d1f3c; color: #7aa2f7; }
[data-theme="dark"] .zoho-activity-type--payment { background: #0d2218; color: #4ade80; }
[data-theme="dark"] .zoho-activity-type--bill    { background: #241b00; color: #fbbf24; }
[data-theme="dark"] .zoho-activity-type--expense { background: #2a1030; color: #e879f9; }
[data-theme="dark"] .zoho-activity-type--receipt { background: #1e1040; color: #a78bfa; }
[data-theme="dark"] .zoho-activity-row:hover { background: #1e2530; }

/* Section/module empty states */
[data-theme="dark"] .module-empty-state { background: #161b22; border-color: #2d3748; color: #8b9eb8; }
[data-theme="dark"] .table-empty-state svg { color: #4a5568; opacity: 1; }
[data-theme="dark"] .table-empty-state p { color: #6b7fa3; }

/* Detail pages & item views */
[data-theme="dark"] .item-detail-card,
[data-theme="dark"] .item-detail-header,
[data-theme="dark"] .detail-card { background: #161b22; border-color: #2d3748; }

/* Line editor & inline tables */
[data-theme="dark"] .line-editor { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .line-editor-row { border-color: #2d3748; }
[data-theme="dark"] .line-editor input,
[data-theme="dark"] .line-editor select { background: #0d1117; border-color: #3a4a5e; color: #f0f4ff; }

/* Trial / banner */
[data-theme="dark"] .trial-banner { background: #241b00; border-color: #3d3000; color: #fbbf24; }

/* Confirm / toast */
[data-theme="dark"] .confirm-card { background: #161b22; border: 1px solid #3a4a5e; box-shadow: 0 16px 56px rgba(0,0,0,0.7); }
[data-theme="dark"] .toast { background: #1e2530; border: 1px solid #3a4a5e; color: #f0f4ff; }

/* ── Detail pages ── */

/* Invoice record/detail */
[data-theme="dark"] .invoice-record-shell { background: #0d1117; }
[data-theme="dark"] .invoice-record-list { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .invoice-record-list-item { background: #161b22; border-bottom-color: #2d3748; }
[data-theme="dark"] .invoice-record-list-item:hover,
[data-theme="dark"] .invoice-record-list-item.active { background: #1e2530; }
[data-theme="dark"] .invoice-record-detail { background: #0d1117; }
[data-theme="dark"] .invoice-record-titlebar,
[data-theme="dark"] .invoice-record-toolbar { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .invoice-record-toolbar { background: #1e2530; }
[data-theme="dark"] .invoice-record-toolbar .table-action { border-right-color: #2d3748; color: #8b9eb8; }
[data-theme="dark"] .invoice-record-toolbar .table-action:hover { background: #0d1f3c; color: #bccedd; }
[data-theme="dark"] .invoice-record-toolbar .primary-lite { color: #7aa2f7; }
[data-theme="dark"] .invoice-next-panel,
[data-theme="dark"] .invoice-payments-panel { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .invoice-next-secondary { background: #1e2530; border-top-color: #2d3748; color: #8b9eb8; }
[data-theme="dark"] .invoice-next-mark { background: #1e1335; color: #c084fc; }
[data-theme="dark"] .invoice-payments-panel summary { color: #8b9eb8; }
[data-theme="dark"] .invoice-record-list-side strong { color: #f0f4ff; }
[data-theme="dark"] .inv-balance-due { color: #7aa2f7; }
[data-theme="dark"] .invoice-record-overdue { color: #f87171 !important; }
[data-theme="dark"] .invoice-record-check { background: #0d1117; border-color: #3a4a5e; }
[data-theme="dark"] .invoice-more-button,
[data-theme="dark"] .invoice-icon-button { background: #1e2530; color: #8b9eb8; border-color: #3a4a5e; }
[data-theme="dark"] .invoice-more-button:hover,
[data-theme="dark"] .invoice-icon-button:hover { background: #192848; color: #bccedd; }
[data-theme="dark"] .table-action.primary-lite { border-color: #1e3a5f; }
[data-theme="dark"] .invoice-preview-paper { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .invoice-preview-lines th { background: #1e2530; color: #8b9eb8; }
[data-theme="dark"] .invoice-preview-lines td { border-bottom-color: #2d3748; }
[data-theme="dark"] .invoice-preview-totals .balance { background: #1e2530; color: #f0f4ff; }
[data-theme="dark"] .invoice-preview-title h2 { color: #f0f4ff; }
[data-theme="dark"] .invoice-preview-title b { color: #bccedd; }
[data-theme="dark"] .inline-link-button { color: #7aa2f7; }

/* Item detail */
[data-theme="dark"] .item-detail-hero { background: #0d1f3c; border-bottom-color: #2d3748; }
[data-theme="dark"] .item-detail-topbar { color: #f0f4ff; }
[data-theme="dark"] .item-back-button,
[data-theme="dark"] .item-icon-button { color: #bccedd; border-color: #3a4a5e; background: #161b22; }
[data-theme="dark"] .item-back-button:hover,
[data-theme="dark"] .item-icon-button:hover { background: #1e2530; border-color: #445568; }
[data-theme="dark"] .item-detail-summary h3 { color: #f0f4ff; }
[data-theme="dark"] .item-price-stack span { color: #8b9eb8; }
[data-theme="dark"] .item-price-stack strong { color: #f0f4ff; }
[data-theme="dark"] .item-add-image { background: #161b22; border-color: #3a4a5e; color: #4e6278; }
[data-theme="dark"] .item-add-image:hover { border-color: #445568; }
[data-theme="dark"] .item-detail-tabs { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .item-detail-tab { background: #161b22; color: #8b9eb8; }
[data-theme="dark"] .item-detail-tab:hover { background: #1e2530; }
[data-theme="dark"] .item-detail-tab.active { color: #f0f4ff; border-bottom-color: var(--accent); }
[data-theme="dark"] .item-detail-body { background: #161b22; }
[data-theme="dark"] .item-detail-field { background: #1e2530; border-color: #2d3748; }
[data-theme="dark"] .item-transactions-head select { background: #0d1117; color: #f0f4ff; border-color: #3a4a5e; }
[data-theme="dark"] .item-transaction-tools button { background: #1e2530; color: #bccedd; border-color: #3a4a5e; }
[data-theme="dark"] .item-transaction-empty .empty-icon { border-color: #2d3748; }
[data-theme="dark"] .item-transaction-empty strong { color: #8b9eb8; }

/* Banking / book detail */
[data-theme="dark"] .bk-tab-count { background: #1e2530; color: #8b9eb8; }
[data-theme="dark"] .bk-txn-header { background: #0d1117; border-color: #2d3748; }
[data-theme="dark"] .bk-txn-desc { color: #bccedd; }

/* Project detail */
[data-theme="dark"] .proj-detail-header {
  background: linear-gradient(135deg, #0d1117 0%, #161b22 55%, #1e2530 100%);
  border-bottom: 1px solid #2d3748;
}
[data-theme="dark"] .proj-detail-name { color: #f0f4ff; }
[data-theme="dark"] .proj-detail-customer { color: #8b9eb8; }
[data-theme="dark"] .proj-detail-header .status-pill { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); color: #bccedd; }
[data-theme="dark"] .proj-detail-actions .ghost-button { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: #bccedd; }
[data-theme="dark"] .proj-detail-actions .ghost-button:hover { background: rgba(255,255,255,0.12); }
[data-theme="dark"] .proj-detail-actions .convert-action { background: var(--accent); color: #fff; }
[data-theme="dark"] .proj-detail-actions .convert-action:hover { background: var(--accent-strong); }

/* Sales order detail */
[data-theme="dark"] .so-details-grid { border-color: #2d3748; }
[data-theme="dark"] .so-details-grid .quote-form-line { border-color: #2d3748; }
[data-theme="dark"] .so-details-grid .quote-form-line label { color: #8b9eb8; }
[data-theme="dark"] .so-warehouse-bar { border-bottom-color: var(--accent); color: #8b9eb8; }
[data-theme="dark"] .so-warehouse-bar select { color: #f0f4ff; border-bottom-color: var(--accent); }

/* Payment detail */
[data-theme="dark"] .pmt-details-section { border-bottom-color: #2d3748; }
[data-theme="dark"] .pmt-label { color: #8b9eb8; }
[data-theme="dark"] .pmt-attachments-block { border-top-color: #2d3748; }
[data-theme="dark"] .pmt-form-actions { background: #161b22; border-top-color: #2d3748; }

/* Recurring invoice / credit note detail */
[data-theme="dark"] .ri-details-grid,
[data-theme="dark"] .cn-details-grid { border-color: #2d3748; }
[data-theme="dark"] .ri-details-grid .quote-form-line,
[data-theme="dark"] .cn-details-grid .quote-form-line { border-color: #2d3748; }
[data-theme="dark"] .ri-details-grid .quote-form-line label,
[data-theme="dark"] .cn-details-grid .quote-form-line label { color: #8b9eb8; }
[data-theme="dark"] .ri-total-card { background: #1e2530; border-color: #2d3748; }
[data-theme="dark"] .ri-round-off-row,
[data-theme="dark"] .ri-total-row { border-top-color: #2d3748; }
[data-theme="dark"] .cn-form-actions { background: #161b22; border-top-color: #2d3748; }

/* Bill detail */
[data-theme="dark"] .bill-table-controls { border-color: #2d3748; }
[data-theme="dark"] .bill-inline-label,
[data-theme="dark"] .bill-ctrl-label { color: #8b9eb8; }
[data-theme="dark"] .bill-ctrl-select { border-bottom-color: #3a4a5e; color: #bccedd; }
[data-theme="dark"] .bill-ctrl-select:focus { border-bottom-color: var(--accent); }
[data-theme="dark"] .bill-item-title { color: #f0f4ff; }
[data-theme="dark"] .bill-item-img { border-color: #3a4a5e; color: #445568; }
[data-theme="dark"] .bill-item-select,
[data-theme="dark"] .bill-item-desc { border-bottom-color: #2d3748; color: #bccedd; }
[data-theme="dark"] .bill-item-select:focus,
[data-theme="dark"] .bill-item-desc:focus { border-bottom-color: var(--accent); }
[data-theme="dark"] .bill-num-input { border-color: #3a4a5e; color: #f0f4ff; }
[data-theme="dark"] .bill-amount-cell { color: #f0f4ff; }
[data-theme="dark"] .bill-add-row-btn:hover { background: #0d1f3c; }

/* Journal entry focus rings */
[data-theme="dark"] .je-field:focus,
[data-theme="dark"] .je-select:focus,
[data-theme="dark"] .je-input:focus { outline-color: rgba(32,96,232,0.45); }
[data-theme="dark"] .je-select:hover,
[data-theme="dark"] .je-input:hover { background: #0d1117; }

/* ── Inputs & search fields ── */

/* Report filter bar */
[data-theme="dark"] .report-filter-bar input,
[data-theme="dark"] .report-filter-bar select { background: #0d1117; border-color: #3a4a5e; color: #f0f4ff; }
[data-theme="dark"] .report-filter-bar label { color: #8b9eb8; }

/* Payment amount input */
[data-theme="dark"] .pmt-amount-input { border-color: #3a4a5e; background: #0d1117; }
[data-theme="dark"] .pmt-currency { background: #1e2530; color: #8b9eb8; border-right-color: #3a4a5e; }
[data-theme="dark"] .pmt-amount-input input { background: #0d1117; color: #f0f4ff; }

/* Retainer number stepper */
[data-theme="dark"] .retainer-number-input button { border-color: #3a4a5e; background: #1e2530; color: #bccedd; }
[data-theme="dark"] .retainer-number-input button:hover { background: #192848; }

/* PO number row */
[data-theme="dark"] .po-number-row input { background: var(--bg); }

/* Banking date filter */
[data-theme="dark"] .bk-date-filter { color: #8b9eb8; }
[data-theme="dark"] .bk-caret { color: #445568; }

/* Search field wrapper */
[data-theme="dark"] .search-field input,
[data-theme="dark"] .money-input input { background: #0d1117; border-color: #3a4a5e; color: #f0f4ff; }
[data-theme="dark"] .search-field span { color: var(--accent); background: #1e2530; border-color: #3a4a5e; }

/* RB (recurring bill) search */
[data-theme="dark"] .rb-search-button { background: #0d1f3c; border-color: var(--accent); color: var(--accent); }

/* Period bar buttons & date filters */
[data-theme="dark"] .period-btn,
[data-theme="dark"] .date-filter-btn { background: #1e2530; border-color: #3a4a5e; color: #8b9eb8; }
[data-theme="dark"] .period-btn.active,
[data-theme="dark"] .date-filter-btn.active { background: #0d1f3c; border-color: var(--accent); color: var(--accent); }
[data-theme="dark"] .period-btn:hover,
[data-theme="dark"] .date-filter-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Column toggle */
[data-theme="dark"] .column-toggle-grid label { color: #8b9eb8; }
[data-theme="dark"] .column-toggle-grid input[type="checkbox"] { accent-color: var(--accent); }

/* Status badges & pills ── */

/* Core status pills */
[data-theme="dark"] .status-draft,
[data-theme="dark"] .status-inactive,
[data-theme="dark"] .status-void       { background: #1e2530; color: #4e6278; }

[data-theme="dark"] .status-active,
[data-theme="dark"] .status-paid,
[data-theme="dark"] .status-accepted,
[data-theme="dark"] .status-confirmed,
[data-theme="dark"] .status-fulfilled,
[data-theme="dark"] .status-invoiced,
[data-theme="dark"] .status-completed,
[data-theme="dark"] .status-reconciled,
[data-theme="dark"] .status-service    { background: #0d2218; color: #4ade80; }

[data-theme="dark"] .status-sent,
[data-theme="dark"] .status-approved,
[data-theme="dark"] .status-pending    { background: #0d1f3c; color: #7aa2f7; }

[data-theme="dark"] .status-prospect,
[data-theme="dark"] .status-part-paid,
[data-theme="dark"] .status-open,
[data-theme="dark"] .status-paused,
[data-theme="dark"] .status-product,
[data-theme="dark"] .status-revenue,
[data-theme="dark"] .status-asset      { background: #241b00; color: #fbbf24; }

[data-theme="dark"] .status-overdue,
[data-theme="dark"] .status-unpaid,
[data-theme="dark"] .status-declined,
[data-theme="dark"] .status-cancelled,
[data-theme="dark"] .status-unreconciled,
[data-theme="dark"] .status-liability,
[data-theme="dark"] .status-expense    { background: #1f0c0c; color: #f87171; }

[data-theme="dark"] .status-equity,
[data-theme="dark"] .status-customer,
[data-theme="dark"] .status-vendor,
[data-theme="dark"] .status-item,
[data-theme="dark"] .status-estimate,
[data-theme="dark"] .status-invoice,
[data-theme="dark"] .status-payment,
[data-theme="dark"] .status-bill,
[data-theme="dark"] .status-bank,
[data-theme="dark"] .status-account,
[data-theme="dark"] .status-journal,
[data-theme="dark"] .status-settings,
[data-theme="dark"] .status-recurring,
[data-theme="dark"] .status-system     { background: #0d1f3c; color: #7aa2f7; }

/* Timesheet pills */
[data-theme="dark"] .ts-pill-billable    { background: #0d1f3c; color: #7aa2f7; }
[data-theme="dark"] .ts-pill-billed      { background: #0d2218; color: #4ade80; }

/* Nav notification badges */
[data-theme="dark"] .nav-badge { background: #b91c1c; color: #fff; }

/* Status filter bar */
[data-theme="dark"] .status-flt-btn { background: #1e2530; border-color: #3a4a5e; color: #4e6278; }
[data-theme="dark"] .status-flt-btn:hover { border-color: var(--accent); color: var(--accent); }
[data-theme="dark"] .status-flt-btn--active { background: #e6edf3; border-color: #f0f4ff; color: #0d1117; }

/* Dashboard profit pills */
[data-theme="dark"] .dash-profit-pill--pos { background: rgba(34,197,94,0.18); color: #4ade80; }
[data-theme="dark"] .dash-profit-pill--neg { background: rgba(239,68,68,0.18); color: #f87171; }

/* Subscription status cards */
[data-theme="dark"] .sub-status--trial   { background: #241b00; border-color: #3d3000; }
[data-theme="dark"] .sub-status--active  { background: #0d2218; border-color: #1a3d2b; }
[data-theme="dark"] .sub-status--expired { background: #1f0c0c; border-color: #3d1a1a; }
[data-theme="dark"] .sub-status-label,
[data-theme="dark"] .sub-status-sub      { color: #4e6278; }
[data-theme="dark"] .sub-trial-bar       { background: #2d3748; }

/* ── Buttons ── */

/* Tab buttons */
[data-theme="dark"] .customer-tab-button { color: #8b9eb8; }
[data-theme="dark"] .customer-tab-button.active { color: #f0f4ff; }

/* Close / icon buttons */
[data-theme="dark"] .bill-close-button { color: var(--ink3); }
[data-theme="dark"] .bill-close-button:hover { color: var(--ink); background: var(--danger-soft); }
[data-theme="dark"] .po-close-button,
[data-theme="dark"] .quote-close-button,
[data-theme="dark"] .retainer-close-button,
[data-theme="dark"] .inv-close-button,
[data-theme="dark"] .invoice-close-button,
[data-theme="dark"] .pmt-close-btn,
[data-theme="dark"] .exp-close-button,
[data-theme="dark"] .ri-close-button,
[data-theme="dark"] .cn-close-button,
[data-theme="dark"] .re-close-button,
[data-theme="dark"] .rb-close-button,
[data-theme="dark"] .so-close-button,
[data-theme="dark"] .sr-close-button { color: #4e6278; }
[data-theme="dark"] .pmt-close-btn:hover,
[data-theme="dark"] .exp-close-button:hover { color: #f87171; }

/* Link-style buttons */
[data-theme="dark"] .exp-itemize-btn,
[data-theme="dark"] .po-edit-addr-btn,
[data-theme="dark"] .po-bulk-btn,
[data-theme="dark"] .bill-bulk-actions-btn,
[data-theme="dark"] .customer-link-button { color: var(--accent); }

/* Upload / file buttons */
[data-theme="dark"] .exp-upload-btn { background: var(--surface-soft); border-color: var(--line-strong); color: var(--ink); }
[data-theme="dark"] .exp-upload-btn:hover { background: var(--surface-tint); }
[data-theme="dark"] .po-upload-btn { background: var(--surface-soft); border-color: var(--line-strong); color: var(--ink); }
[data-theme="dark"] .po-upload-btn:hover { background: var(--surface-tint); }

/* Add-row / add-item buttons */
[data-theme="dark"] .po-add-row-btn,
[data-theme="dark"] .po-bulk-add-btn { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
[data-theme="dark"] .po-add-row-btn:hover,
[data-theme="dark"] .po-bulk-add-btn:hover { background: var(--accent-soft); }
[data-theme="dark"] .po-vendor-add-btn { color: var(--accent); border-top-color: var(--line); }
[data-theme="dark"] .po-vendor-add-btn:hover { background: var(--accent-soft); }
[data-theme="dark"] .item-picker-add-btn:hover { background: var(--accent-soft); }

/* Vendor picker dropdown */
[data-theme="dark"] .po-vendor-dropdown { background: var(--surface); border-color: var(--line-strong); box-shadow: var(--shadow); }
[data-theme="dark"] .po-vendor-search-wrap { border-bottom-color: var(--line); }
[data-theme="dark"] .po-vendor-search-input { color: var(--ink); }
[data-theme="dark"] .po-vendor-chevron { color: var(--ink3); }
[data-theme="dark"] .po-vendor-list li { color: var(--ink); }
[data-theme="dark"] .po-vendor-list li:hover { background: var(--surface-soft); }

/* Form action bars */
[data-theme="dark"] .exp-form-actions { background: var(--surface); border-top-color: var(--line); }
[data-theme="dark"] .exp-section-divider { background: var(--line); }
[data-theme="dark"] .exp-radio-label { color: var(--ink); }

/* Receipt drop-zone */
[data-theme="dark"] .exp-receipt-dropzone { background: var(--bg); border-color: var(--line-strong); }
[data-theme="dark"] .exp-receipt-title { color: var(--ink); }
[data-theme="dark"] .exp-receipt-note { color: var(--ink3); }

/* Dashboard quick-action buttons */
[data-theme="dark"] .dash-quick-btn { background: #161b22; border-color: #2d3748; color: #bccedd; }
[data-theme="dark"] .dash-quick-btn:hover { background: #0d1f3c; border-color: var(--accent); color: var(--accent); box-shadow: 0 4px 12px rgba(32,96,232,0.15); }

[data-theme="dark"] .dashboard-setup-panel,
[data-theme="dark"] .dashboard-empty-guide,
[data-theme="dark"] .dashboard-empty-chart {
  background: #121923;
  border-color: #2b384b;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 18px 40px rgba(0,0,0,0.26);
}

[data-theme="dark"] .dashboard-empty-guide {
  background: linear-gradient(135deg, #121923 0%, #102318 100%);
}

[data-theme="dark"] .dashboard-kicker {
  color: #7aa2f7;
}

[data-theme="dark"] .dashboard-setup-head h3,
[data-theme="dark"] .dashboard-empty-guide h3,
[data-theme="dark"] .dashboard-empty-card strong,
[data-theme="dark"] .dashboard-empty-chart-copy strong,
[data-theme="dark"] .dashboard-setup-copy strong {
  color: #f4f7fb;
}

[data-theme="dark"] .dashboard-setup-head strong {
  color: #8ab4ff;
}

[data-theme="dark"] .dashboard-setup-progress,
[data-theme="dark"] .dashboard-empty-chart-bars {
  background: #172130;
  border-color: #344257;
}

[data-theme="dark"] .dashboard-setup-step,
[data-theme="dark"] .dashboard-empty-action {
  background: #182232;
  border-color: #2c3a50;
  color: #edf3fb;
}

[data-theme="dark"] .dashboard-setup-step:hover,
[data-theme="dark"] .dashboard-empty-action:hover {
  background: #202c3d;
  border-color: var(--accent);
}

[data-theme="dark"] .dashboard-setup-step.is-done {
  background: #0c1f14;
  border-color: #1f6a4b;
}

[data-theme="dark"] .dashboard-setup-check {
  background: #111923;
  color: #9aa9bb;
}

[data-theme="dark"] .dashboard-setup-step.is-done .dashboard-setup-check {
  background: #238636;
  color: #fff;
}

[data-theme="dark"] .dashboard-empty-guide p,
[data-theme="dark"] .dashboard-empty-card span,
[data-theme="dark"] .dashboard-empty-chart-copy span,
[data-theme="dark"] .dashboard-setup-copy small,
[data-theme="dark"] .zoho-watch-row span small {
  color: #9aa9bb;
}

/* ── Charts & Graphs ── */

/* Bar chart baselines */
[data-theme="dark"] .zoho-flow-bars,
[data-theme="dark"] .zoho-income-bars { border-bottom-color: #3a4a5e; }
[data-theme="dark"] .zoho-flow-month b,
[data-theme="dark"] .zoho-income-month b { color: #445568; }

/* Income/expense/profit stat tiles */
[data-theme="dark"] .zoho-income-stat--income  { background: #0d2218; border-color: #1a3d2b; }
[data-theme="dark"] .zoho-income-stat--expense { background: #1f0c0c; border-color: #3d1a1a; }
[data-theme="dark"] .zoho-income-stat--profit  { background: #0d1f3c; border-color: #1e3a5f; }

/* Expense / bank / watchlist rows */
[data-theme="dark"] .zoho-bank-row,
[data-theme="dark"] .zoho-watch-row { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .zoho-expense-row { background: linear-gradient(90deg, var(--accent-soft) var(--pct, 0%), #161b22 var(--pct, 0%)); border-color: #2d3748; }
[data-theme="dark"] .zoho-expense-row:hover,
[data-theme="dark"] .zoho-bank-row:hover,
[data-theme="dark"] .zoho-watch-row:hover { background: #1e2a38; border-color: var(--accent); }
/* Watchlist / bank row text — bright and legible */
[data-theme="dark"] .zoho-watch-row span { color: #f0f4ff !important; font-weight: 600; }
[data-theme="dark"] .zoho-watch-row b { color: #f0f4ff; }
[data-theme="dark"] .zoho-bank-info span { color: #f0f4ff !important; }
[data-theme="dark"] .zoho-bank-info small { color: #8b9eb8; }
[data-theme="dark"] .zoho-bank-row > b { color: #f0f4ff; }

/* Project card on dashboard */
[data-theme="dark"] .zoho-project-card { background: linear-gradient(180deg, #161b22 0%, #1e2530 100%); border-color: #2d3748; }

/* Aging chart */
[data-theme="dark"] .aging-row { color: #8b9eb8; }
[data-theme="dark"] .aging-meter { background: #2d3748; }

/* Income/expense horizontal bars */
[data-theme="dark"] .income-track,
[data-theme="dark"] .expense-track { background: #2d3748; }

/* Progress bar (getting started etc.) */
[data-theme="dark"] .progress-track { background: #2d3748; }

/* bk (banking/reconciliation) chart */
[data-theme="dark"] .bk-legend-item { color: #8b9eb8; }
[data-theme="dark"] .bk-legend-swatch { background: #484f58; }
[data-theme="dark"] .bk-chart-area { border-color: #2d3748; }

/* SVG chart text/lines rendered inline */
[data-theme="dark"] .zoho-flow-chart text,
[data-theme="dark"] .zoho-income-chart text { fill: #484f58; }
[data-theme="dark"] .zoho-flow-chart line,
[data-theme="dark"] .zoho-income-chart line { stroke: #2d3748; }

/* Tables ── */
[data-theme="dark"] th,
[data-theme="dark"] td { border-bottom-color: #2d3748; color: #bccedd; }

[data-theme="dark"] .quote-table-shell th,
[data-theme="dark"] .retainer-table-shell th { background: #0d1117; color: #8b9eb8; border-bottom-color: #2d3748; }

[data-theme="dark"] .pmt-invoice-table th { background: #0d1117; color: #8b9eb8; border-bottom-color: #2d3748; }
[data-theme="dark"] .pmt-invoice-table td { color: #bccedd; border-bottom-color: #2d3748; }
[data-theme="dark"] .pmt-table-footer { background: #161b22; border-top-color: #2d3748; }
[data-theme="dark"] .pmt-table-shell { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .pmt-received-on { color: #445568; }
[data-theme="dark"] .pmt-list-note { color: #445568; }

[data-theme="dark"] .po-table-shell { border-color: var(--line); }
[data-theme="dark"] .po-table-shell thead th { background: var(--bg); color: var(--ink2); border-bottom-color: var(--line); }
[data-theme="dark"] .po-table-shell tbody tr { border-bottom-color: var(--line); }
[data-theme="dark"] .po-table-shell tbody tr:hover { background: var(--surface-soft); }
[data-theme="dark"] .po-table-shell td { color: var(--ink); }

[data-theme="dark"] .bill-item-table { border-color: var(--line); }
[data-theme="dark"] .bill-item-table th { background: var(--bg); color: var(--ink2); border-bottom-color: var(--line); }
[data-theme="dark"] .bill-item-table td { border-bottom-color: var(--line); color: var(--ink); }

[data-theme="dark"] .recurring-bill-item-table th,
[data-theme="dark"] .recurring-bill-item-table td { border-color: var(--line); color: var(--ink); }
[data-theme="dark"] .recurring-bill-item-table th { background: var(--bg); color: var(--ink2); }

[data-theme="dark"] .quote-item-table input,
[data-theme="dark"] .quote-item-table select,
[data-theme="dark"] .retainer-item-table input { background: #0d1117; border-color: #3a4a5e; color: #f0f4ff; }

[data-theme="dark"] .statement-table td { border-bottom-color: #2d3748; color: #bccedd; }

[data-theme="dark"] .report-drill-link {
  color: #7aa2f7;
}

[data-theme="dark"] .report-drill-link:hover {
  color: #a8c7ff;
}

[data-theme="dark"] .bk-reconcile-card {
  background: #161b22;
  border-color: #2d3748;
  box-shadow: 0 2px 12px rgba(0,4,20,0.35);
}

[data-theme="dark"] .bk-reconcile-card span,
[data-theme="dark"] .bk-reconcile-card small {
  color: #8b9eb8;
}

[data-theme="dark"] .bk-reconcile-card strong {
  color: #f0f4ff;
}

[data-theme="dark"] .bk-reconcile-card--good {
  background: #0c1f14;
  border-color: #1f6a4b;
}

[data-theme="dark"] .bk-reconcile-card--good strong {
  color: #4ade80;
}

/* ── Forms ── */
[data-theme="dark"] .customer-zoho-form,
[data-theme="dark"] .customer-form-body,
[data-theme="dark"] .customer-form-title { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .customer-form-title h3 { color: #f0f4ff; }
[data-theme="dark"] .customer-form-line label { color: #8b9eb8; }
[data-theme="dark"] .customer-form-line input,
[data-theme="dark"] .customer-form-line select,
[data-theme="dark"] .customer-form-line textarea,
[data-theme="dark"] .customer-address-grid input,
[data-theme="dark"] .customer-address-grid select,
[data-theme="dark"] .customer-address-grid textarea { background: #0d1117; border-color: #3a4a5e; color: #f0f4ff; }
[data-theme="dark"] .customer-form-actions { background: #161b22; border-top-color: #2d3748; }
[data-theme="dark"] .customer-upload-button { background: #161b22; border-color: #3a4a5e; color: #8b9eb8; }

[data-theme="dark"] .quote-form-title,
[data-theme="dark"] .quote-form-body { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .quote-form-line label { color: #8b9eb8; }
[data-theme="dark"] .quote-form-line input,
[data-theme="dark"] .quote-form-line select,
[data-theme="dark"] .quote-form-line textarea { background: #0d1117; border-color: #3a4a5e; color: #f0f4ff; }

[data-theme="dark"] .form-grid label,
[data-theme="dark"] .compact-form label { color: #8b9eb8; }
[data-theme="dark"] .form-grid input,
[data-theme="dark"] .form-grid select,
[data-theme="dark"] .form-grid textarea,
[data-theme="dark"] .compact-form input,
[data-theme="dark"] .compact-form select,
[data-theme="dark"] .compact-form textarea { background: #0d1117; border-color: #3a4a5e; color: #f0f4ff; }

[data-theme="dark"] .stg-form,
[data-theme="dark"] .stg-content,
[data-theme="dark"] .stg-main { background: #0d1117; }
[data-theme="dark"] .stg-card-header { border-bottom-color: #2d3748; color: #8b9eb8; }
[data-theme="dark"] .stg-field label { color: #8b9eb8; }
[data-theme="dark"] .stg-field input,
[data-theme="dark"] .stg-field select,
[data-theme="dark"] .stg-field textarea { background: #0d1117; border-color: #3a4a5e; color: #f0f4ff; }
[data-theme="dark"] .stg-form-actions { background: #161b22; border-top-color: #2d3748; }

/* ── Modals ── */
[data-theme="dark"] .purchase-modal-card { background: #161b22; border: 1px solid #3a4a5e; }
[data-theme="dark"] .purchase-modal-backdrop { background: rgba(0,0,0,0.75); }
[data-theme="dark"] .confirm-overlay { background: rgba(0,0,0,0.7); }
[data-theme="dark"] .confirm-card { background: #161b22; border: 1px solid #3a4a5e; box-shadow: 0 16px 56px rgba(0,0,0,0.7); }
[data-theme="dark"] .upgrade-modal-backdrop { background: rgba(0,0,0,0.75); }

/* ── Toasts ── */
[data-theme="dark"] .toast--error   { background: #1f0c0c; border-left-color: #ef4444; color: #fca5a5; }
[data-theme="dark"] .toast--success { background: #0d2218; border-left-color: #22c55e; color: #4ade80; }
[data-theme="dark"] .toast--warning { background: #241b00; border-left-color: #f59e0b; color: #fbbf24; }
[data-theme="dark"] .toast--info    { background: #0d1f3c; border-left-color: #3b82f6; color: #7aa2f7; }

/* ── Overdue alerts ── */
[data-theme="dark"] .overdue-alert { border-color: #3d3000; color: #fbbf24; }
[data-theme="dark"] .overdue-alert:hover { background: #2e2200; }
[data-theme="dark"] .overdue-alert--bills { border-color: #3d1a1a; border-left-color: #ef4444; color: #fca5a5; }
[data-theme="dark"] .overdue-alert--bills:hover { background: #2a1010; }

/* ── Content cards & record panels ── */
[data-theme="dark"] .invoice-record-list,
[data-theme="dark"] .invoice-record-toolbar,
[data-theme="dark"] .invoice-payments-panel,
[data-theme="dark"] .pmt-create-panel,
[data-theme="dark"] .pmt-details-section,
[data-theme="dark"] .pmade-register-panel,
[data-theme="dark"] .pmade-table-wrap,
[data-theme="dark"] .pmade-form,
[data-theme="dark"] .vc-register-panel,
[data-theme="dark"] .coa-register-panel,
[data-theme="dark"] .coa-form,
[data-theme="dark"] .coa-form-actions,
[data-theme="dark"] .coa-type-row,
[data-theme="dark"] .item-detail-tabs,
[data-theme="dark"] .item-detail-body,
[data-theme="dark"] .item-create-panel,
[data-theme="dark"] .retainer-customer-modal-card,
[data-theme="dark"] .ncm-card,
[data-theme="dark"] .qvm-card,
[data-theme="dark"] .qim-card,
[data-theme="dark"] .quick-create-tile,
[data-theme="dark"] .status-tile,
[data-theme="dark"] .report-filter-bar,
[data-theme="dark"] .bk-active-table,
[data-theme="dark"] .bill-form-actions,
[data-theme="dark"] .proj-detail-actions,
[data-theme="dark"] .list-controls,
[data-theme="dark"] .quote-table-shell,
[data-theme="dark"] .retainer-table-shell { background: #161b22; border-color: #2d3748; }

[data-theme="dark"] .invoice-record-list-item { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .invoice-record-list-item:hover { background: #1e2530; }

[data-theme="dark"] .customer-address-grid { background: #0d1117; border-color: #2d3748; }

/* ── Dropdown menus ── */
[data-theme="dark"] .more-menu { background: #161b22; border-color: #3a4a5e; box-shadow: 0 8px 32px rgba(0,0,0,0.6); }
[data-theme="dark"] .more-menu button,
[data-theme="dark"] .more-menu a { color: #bccedd; }
[data-theme="dark"] .more-menu button:hover,
[data-theme="dark"] .more-menu a:hover { background: #1e2530; color: #f0f4ff; }

/* ── All generic inputs & selects not yet covered ── */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea { background: #0d1117; border-color: #3a4a5e; color: #f0f4ff; }
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #445568; }
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus { border-color: var(--accent); outline-color: rgba(32,96,232,0.4); background: #0d1117; }

[data-theme="dark"] .rb-input,
[data-theme="dark"] .coa-input,
[data-theme="dark"] .qvm-field-input,
[data-theme="dark"] .po-form-line,
[data-theme="dark"] .bill-add-row-btn,
[data-theme="dark"] .bill-upload-btn { background: var(--bg); border-color: var(--line-strong); color: var(--ink); }
[data-theme="dark"] .po-vendor-btn { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
[data-theme="dark"] .po-vendor-btn:hover { background: var(--surface-soft); }

/* ── Project detail ── */
[data-theme="dark"] .proj-budget-over-label { background: #1f0c0c; color: #f87171; border-color: #3d1a1a; }

/* Scrollbar (webkit) */
[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: #0d1117; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a4a5e; border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #484f58; }

/* ── Dashboard dark mode additions ── */
[data-theme="dark"] .zoho-summary-tile--blue   .zoho-summary-tile-icon { color: #7aa2f7; }
[data-theme="dark"] .zoho-summary-tile--orange .zoho-summary-tile-icon { color: #fbbf24; }
[data-theme="dark"] .zoho-summary-tile--green  .zoho-summary-tile-icon { color: #4ade80; }
[data-theme="dark"] .zoho-filter,
[data-theme="dark"] .zoho-segment { background: #1e2530; border-color: #3a4a5e; color: #8b9eb8; }
[data-theme="dark"] .zoho-segment .active { background: #0d1117; color: #7aa2f7; box-shadow: 0 1px 4px rgba(0,0,0,0.4); }
[data-theme="dark"] .zoho-cashflow-stat--in  { border-color: #1a3d2b; }
[data-theme="dark"] .zoho-cashflow-stat--out { border-color: #3d1a1a; }
[data-theme="dark"] .zoho-income-stat--income  { border-color: #1a3d2b; }
[data-theme="dark"] .zoho-income-stat--expense { border-color: #3d1a1a; }
[data-theme="dark"] .zoho-income-stat--profit  { border-color: #1e3a5f; }
[data-theme="dark"] .zoho-bank-icon { background: #1e2530; color: #8b9eb8; }
[data-theme="dark"] .zoho-money-split button:hover { background: #1e2530; }
[data-theme="dark"] .zoho-cashflow-stat--balance { background: #1e2530; }

/* ── Reports dark mode ── */
[data-theme="dark"] .reports-catalog { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .favorite-strip { background: #0d1117; border-color: #2d3748; }
[data-theme="dark"] .favorite-strip button { background: #1e2530; color: #7aa2f7; }
[data-theme="dark"] .favorite-strip button:hover { background: #2d3748; }
[data-theme="dark"] .report-group + .report-group { border-top-color: #2d3748; }
[data-theme="dark"] .report-link.active { background: #0d1f3c; border-left-color: var(--accent); }
[data-theme="dark"] .report-link:hover { background: #1e2530; }
[data-theme="dark"] .report-action-bar,
[data-theme="dark"] .report-filter-bar { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .report-customize { background: #0d1117; border-color: #2d3748; }
[data-theme="dark"] .report-paper { background: #161b22; }
[data-theme="dark"] .report-paper-title span { color: #8b9eb8; }
[data-theme="dark"] .report-paper-title h3 { color: #f0f4ff; }
[data-theme="dark"] .report-paper-title p { color: #4e6278; }
[data-theme="dark"] .report-statement td,
[data-theme="dark"] .report-table th,
[data-theme="dark"] .report-table td { border-bottom-color: #2d3748; }
[data-theme="dark"] .report-table th { background: #1e2530; color: #8b9eb8; }
[data-theme="dark"] .report-section-row td { background: #1e2530; color: #8b9eb8; }
[data-theme="dark"] .report-total-row td { background: #1e2530; border-top-color: #3a4a5e; color: #f0f4ff; }
[data-theme="dark"] .reports-home-header { border-left-color: var(--accent); }
[data-theme="dark"] .reports-home-card { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .reports-home-card-title { border-bottom-color: #2d3748; color: #8b9eb8; }
[data-theme="dark"] .rpt-cat-count { background: #1e2530; color: #4e6278; }
[data-theme="dark"] .rpt-group-count { background: #1e2530; color: #4e6278; }
[data-theme="dark"] .catalog-title .progress-label { background: #1e2530; color: #8b9eb8; }

/* ── COA dark mode ── */
[data-theme="dark"] .coa-list-header { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .coa-filter-row { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .coa-summary-row { background: #0d1117; border-color: #2d3748; }
[data-theme="dark"] .coa-summary-row > div { border-color: #2d3748; }
[data-theme="dark"] .coa-summary-row span { color: #8b9eb8; }
[data-theme="dark"] .coa-summary-row strong { color: #f0f4ff; }
[data-theme="dark"] .coa-view-select { color: #f0f4ff; background: transparent; }
[data-theme="dark"] .coa-form-title { background: #161b22; border-color: #2d3748; }
[data-theme="dark"] .coa-form-title h3 { color: #f0f4ff; }
[data-theme="dark"] .coa-title-icon { background: #1e2530; border-color: #3a4a5e; color: #bccedd; }
[data-theme="dark"] .coa-close-button { color: #4e6278; }
[data-theme="dark"] .coa-close-button:hover { background: #1e2530; color: #f0f4ff; }
[data-theme="dark"] .coa-form-body { background: #0d1117; }
[data-theme="dark"] .coa-label { color: #bccedd; }
[data-theme="dark"] .coa-system-tag { background: #1e2530; border-color: #3a4a5e; color: #8b9eb8; }
[data-theme="dark"] .coa-account-name { color: #7aa2f7; }
[data-theme="dark"] .coa-account-cell span { color: #4e6278; }
[data-theme="dark"] .coa-bulk-actions label { color: #bccedd; }
[data-theme="dark"] .coa-bulk-actions > span { color: #8b9eb8; }

/* COA account type pills — dark */
[data-theme="dark"] .acct-type-asset     { background: #0d1f3c; color: #7aa2f7; }
[data-theme="dark"] .acct-type-liability { background: #1f0c0c; color: #f87171; }
[data-theme="dark"] .acct-type-equity    { background: #1e1335; color: #c084fc; }
[data-theme="dark"] .acct-type-revenue   { background: #0d2218; color: #4ade80; }
[data-theme="dark"] .acct-type-expense   { background: #241b00; color: #fbbf24; }

/* ── Remaining white-background fixes ───────────────────────────────────────── */

/* Pipeline / status tile hover */
[data-theme="dark"] .pipeline-row:hover,
[data-theme="dark"] .status-tile:hover { background: #1e2530; }

/* Upgrade modal card — correct the card itself (backdrop is separate) */
[data-theme="dark"] .upgrade-modal-card { background: #161b22; border: 1px solid #3a4a5e; box-shadow: 0 24px 60px rgba(0,0,0,0.7); }
[data-theme="dark"] .upgrade-modal-backdrop { background: rgba(0,0,0,0.75); }

/* Upgrade plan cards */
[data-theme="dark"] .upgrade-plan-card { background: #161b22; border-color: #3a4a5e; }
[data-theme="dark"] .upgrade-plan-card--featured { background: #0d1f3c; border-color: var(--accent); }
[data-theme="dark"] .upgrade-plan-btn { background: #1e2530; border-color: #3a4a5e; color: #bccedd; }
[data-theme="dark"] .upgrade-plan-btn:hover { border-color: var(--accent); color: var(--accent); background: #0d1f3c; }
[data-theme="dark"] .upgrade-plan-btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Subscription plan info cards */
[data-theme="dark"] .sub-plan-info { background: #161b22; border-color: #3a4a5e; }
[data-theme="dark"] .sub-plan-info--pro { background: #0d1f3c; border-color: var(--accent); }
[data-theme="dark"] .sub-plan-info-name { color: #f0f4ff; }
[data-theme="dark"] .sub-plan-info-desc { color: #4e6278; }

/* Upgrade modal close & header text */
[data-theme="dark"] .upgrade-modal-close { color: #4e6278; }
[data-theme="dark"] .upgrade-modal-close:hover { color: #f0f4ff; }
[data-theme="dark"] .upgrade-modal-header h2 { color: #f0f4ff; }
[data-theme="dark"] .upgrade-modal-header p { color: #8b9eb8; }

/* Appearance settings cards */
[data-theme="dark"] .appear-theme-card { background: #161b22; border-color: #3a4a5e; }
[data-theme="dark"] .appear-theme-card:hover { border-color: var(--accent); }
[data-theme="dark"] .appear-theme-card.active { border-color: var(--accent); background: #0d1f3c; }
[data-theme="dark"] .appear-theme-name { color: #f0f4ff; }
[data-theme="dark"] .appear-theme-sub { color: #4e6278; }

/* Branding settings logo box */
[data-theme="dark"] .brand-logo-box { background: #0d1117; border-color: #3a4a5e; color: #445568; }

/* ── Remaining white-background fixes ── */

/* Pipeline row count badge (white circle) */
[data-theme="dark"] .pipeline-row b { background: #1e2530; color: var(--accent); }

/* Toggle knob — stays white for contrast on checked accent track */
[data-theme="dark"] .item-section-switch-track::after { background: #e8f0ff; }

/* Sidebar brand logo box — transparent in dark */
[data-theme="dark"] .brand-mark { background: rgba(255,255,255,0.07); }

/* ── Final polish ────────────────────────────────────────────────────────────── */

/* Metric card typography */
[data-theme="dark"] .metric-label { color: #8b949e; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
[data-theme="dark"] .metric-card strong { color: #e6edf3; }

/* KPI tile colours — readable tinted gradients */
[data-theme="dark"] .zoho-summary-tile--blue {
  background: linear-gradient(150deg, #141d2e 0%, #192442 100%);
  border-color: #253050 !important;
}
[data-theme="dark"] .zoho-summary-tile--orange {
  background: linear-gradient(150deg, #1c1500 0%, #241c00 100%);
  border-color: #3d2f00 !important;
}
[data-theme="dark"] .zoho-summary-tile--green {
  background: linear-gradient(150deg, #0e1e13 0%, #122718 100%);
  border-color: #1a3f26 !important;
}
[data-theme="dark"] .zoho-summary-label { color: #8b949e; }
[data-theme="dark"] .zoho-summary-value { color: #e6edf3; }
[data-theme="dark"] .zoho-summary-tile-icon { opacity: 0.9; }

/* Activity feed */
[data-theme="dark"] .zoho-activity-row { border-bottom: 1px solid #21262d; }
[data-theme="dark"] .zoho-activity-row:hover { background: #1c2128; }

/* Trial banner — subtle amber strip */
[data-theme="dark"] .trial-banner {
  background: #1a1400;
  border: 1px solid #2d2500;
  border-left: 3px solid #9e6a03;
  color: #d29922;
}

/* Eyebrow labels */
[data-theme="dark"] .eyebrow { color: #484f58; }

/* Section header */
[data-theme="dark"] .section-header h3,
[data-theme="dark"] .section-header h4 { color: #c9d1d9; }

/* Sub-plan info card improvements */
[data-theme="dark"] .sub-plan-info { background: #161b22; }
[data-theme="dark"] .sub-plan-info-name { color: #e6edf3; }

/* ── Appearance Settings ─────────────────────────────────────────────────────── */
.appear-theme-row { display: flex; gap: 12px; }
.appear-theme-card {
  flex: 1;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
}
.appear-theme-card:hover { border-color: var(--accent); }
.appear-theme-card.active { border-color: var(--accent); background: var(--accent-soft); }
.appear-theme-preview {
  width: 34px;
  height: 26px;
  border-radius: 5px;
  flex-shrink: 0;
  border: 1px solid var(--line);
}
.appear-theme-preview--light { background: linear-gradient(135deg, #f0f4ff 50%, #fff 50%); }
.appear-theme-preview--dark { background: linear-gradient(135deg, #0f172a 50%, #1e293b 50%); border-color: #3d5070; }
.appear-theme-preview--auto { background: linear-gradient(90deg, #f0f4ff 50%, #0f172a 50%); }
.appear-theme-info { display: flex; flex-direction: column; gap: 2px; }
.appear-theme-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.appear-theme-sub { font-size: 11px; color: var(--ink3); }
.appear-accent-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.appear-accent-chip {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
  position: relative;
  flex-shrink: 0;
}
.appear-accent-chip:hover { transform: scale(1.1); }
.appear-accent-chip.active { outline: 2px solid var(--ink2); outline-offset: 2px; }
.appear-accent-chip.active::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

/* ── Branding Settings ───────────────────────────────────────────────────────── */
.brand-logo-row { display: flex; align-items: center; gap: 18px; }
.brand-logo-box {
  width: 80px;
  height: 80px;
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  overflow: hidden;
  flex-shrink: 0;
  color: var(--ink3);
}
.brand-logo-box img { width: 100%; height: 100%; object-fit: contain; }
.brand-logo-meta { display: flex; flex-direction: column; gap: 8px; }
.brand-logo-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Custom Fields ───────────────────────────────────────────────────────────── */
.cf-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cf-table th { padding: 8px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink3); text-align: left; background: var(--bg); border-bottom: 1px solid var(--line); }
.cf-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--ink2); vertical-align: middle; }
.cf-table tr:last-child td { border-bottom: none; }
.cf-empty { padding: 24px; text-align: center; color: var(--ink3); font-size: 13px; }
.cf-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.cf-badge-type { background: var(--bg); color: var(--ink3); border: 1px solid var(--line); }
.cf-badge-invoice  { background: var(--blue-soft); color: var(--accent); }
.cf-badge-customer { background: var(--teal-soft); color: var(--teal); }
.cf-badge-vendor   { background: var(--warning-soft); color: var(--warning); }

/* ── Custom Modules ──────────────────────────────────────────────────────────── */
.cs-item { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; }
.cs-item-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--bg); border-bottom: 1px solid var(--line); }
.cs-item-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.cs-item-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.cs-kv-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px; align-items: center; }
.cs-kv-key { font-size: 12px; font-weight: 600; color: var(--ink2); }
.cs-kv-val { font-size: 13px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 6px 10px; width: 100%; font-family: inherit; transition: border-color 0.15s; }
.cs-kv-val:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(32,96,232,0.1); }
.cs-add-row { display: flex; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line); }

/* -- Custom Modules --------------------------------------------------------- */
.custom-module-card-header {
  align-items: flex-start;
  gap: 12px;
}
.custom-module-card-header > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.custom-module-sub,
.module-description {
  color: var(--ink3);
  font-size: 12.5px;
  line-height: 1.4;
}
.module-description {
  margin: 5px 0 0;
  max-width: 680px;
}
.custom-module-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.custom-module-field-list {
  display: grid;
  gap: 8px;
}
.custom-module-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.custom-module-field-row div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.custom-module-field-row strong {
  color: var(--ink);
  font-size: 13px;
}
.custom-module-field-row span {
  color: var(--ink3);
  font-size: 11.5px;
}
.cm-bulk-bar {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface-soft);
  border-radius: var(--radius);
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--ink2);
}
.cm-check-col {
  width: 36px;
  text-align: center;
}
.cm-filter-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cm-filter-bar .stg-input {
  height: 32px;
  padding: 0 8px;
  font-size: 13px;
}
.cm-filter-clear-btn {
  color: var(--danger);
  border-color: var(--danger);
}
.cm-sortable-th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.cm-sortable-th:hover {
  background: var(--surface-soft);
}
.cm-sort-icon {
  font-style: normal;
  color: var(--ink3);
  font-size: 11px;
  margin-left: 3px;
}
.cm-sort-active {
  color: var(--accent);
}
.cm-edit-fields {
  display: flex;
  gap: 8px;
  flex: 1;
  flex-wrap: wrap;
}
.cm-edit-fields .stg-input {
  flex: 1;
  min-width: 120px;
}
.cm-field-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.cm-reorder-btn {
  padding: 4px 6px;
  min-width: 0;
  color: var(--ink3);
}
.cm-reorder-btn:disabled {
  opacity: 0.25;
  pointer-events: none;
}
.custom-module-add-field {
  align-items: center;
  flex-wrap: wrap;
}
.custom-module-add-field select {
  max-width: 160px;
}
.custom-module-required,
.custom-check-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink2);
  font-size: 13px;
  font-weight: 600;
}
.custom-module-page {
  max-width: 100%;
}
.custom-module-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.custom-record-form-panel {
  padding: 0;
  overflow: hidden;
}
.custom-record-form-panel .section-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.custom-record-form {
  padding: 18px 20px 0;
}
.custom-record-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}
.custom-record-actions {
  margin: 18px -20px 0;
}
.custom-check-field {
  min-height: 42px;
  padding: 10px 0;
}
.custom-module-controls {
  grid-template-columns: minmax(220px, 1fr) 180px 150px;
}

@media (max-width: 760px) {
  .custom-module-card-header,
  .custom-module-card-actions,
  .custom-record-grid,
  .custom-module-controls {
    grid-template-columns: 1fr;
  }
  .custom-module-card-header,
  .custom-module-card-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .custom-module-summary {
    grid-template-columns: 1fr;
  }
  .custom-module-add-field select {
    max-width: none;
    width: 100%;
  }
}

/* ── Trial Banner ──────────────────────────────────────────────────────────── */
.trial-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
}
.trial-banner--warning {
  background: #fffbeb;
  border-bottom: 1px solid #fcd34d;
  color: #92400e;
}
.trial-banner--expired {
  background: #fef2f2;
  border-bottom: 1px solid #fca5a5;
  color: #991b1b;
}
.trial-banner-btn {
  flex-shrink: 0;
  padding: 6px 16px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  background: var(--accent, #2563eb);
  color: #fff;
}
.trial-banner-btn:hover { opacity: 0.88; }

/* ── Locked nav items ──────────────────────────────────────────────────────── */
.nav-item--locked {
  opacity: 0.5;
  position: relative;
}
.nav-item--locked::after {
  content: "🔒";
  font-size: 10px;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

/* ── Upgrade Modal ─────────────────────────────────────────────────────────── */
.upgrade-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.upgrade-modal-overlay[hidden] { display: none; }
.upgrade-modal-card {
  background: var(--surface, #fff);
  border-radius: 16px;
  padding: 36px;
  max-width: 560px;
  width: 100%;
  position: relative;
  box-shadow: 0 24px 60px rgba(0,0,0,0.18);
}
.upgrade-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--text-muted, #6b7280);
  line-height: 1;
  padding: 4px 8px;
}
.upgrade-modal-close:hover { color: var(--text, #111); }
.upgrade-modal-header { margin-bottom: 28px; }
.upgrade-modal-header h2 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.upgrade-modal-header p { font-size: 14px; color: var(--text-muted, #6b7280); }
.upgrade-modal-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.upgrade-plan-card {
  border: 1.5px solid var(--line, #e5e7eb);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.upgrade-plan-card--featured {
  border-color: var(--accent, #2563eb);
  background: #f0f7ff;
}
.upgrade-plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent, #2563eb);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 20px;
  white-space: nowrap;
}
.upgrade-plan-name { font-size: 16px; font-weight: 700; }
.upgrade-plan-price { font-size: 32px; font-weight: 800; line-height: 1; }
.upgrade-plan-price span { font-size: 14px; font-weight: 500; color: var(--text-muted, #6b7280); }
.upgrade-plan-desc { font-size: 13px; color: var(--text-muted, #6b7280); line-height: 1.5; flex: 1; }
.upgrade-plan-btn {
  margin-top: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1.5px solid var(--line, #e5e7eb);
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  width: 100%;
}
.upgrade-plan-btn:hover { border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); }
.upgrade-plan-btn--primary {
  background: var(--accent, #2563eb);
  color: #fff;
  border-color: var(--accent, #2563eb);
}
.upgrade-plan-btn--primary:hover { opacity: 0.88; }
.upgrade-plan-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.upgrade-modal-error {
  margin-top: 14px;
  font-size: 13px;
  color: #dc2626;
  text-align: center;
  min-height: 18px;
}

/* ── Toast notification ────────────────────────────────────────────────────── */
.bb-toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 99999;
  padding: 13px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  max-width: 360px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}
.bb-toast--visible { opacity: 1; transform: translateY(0); }
.bb-toast--success { background: var(--success); color: #fff; }
.bb-toast--warning { background: var(--warning); color: #fff; }
.bb-toast--error   { background: var(--danger);  color: #fff; }

/* ── Subscription settings panel ──────────────────────────────────────────── */
.sub-status-card {
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  border: 1.5px solid var(--line, #e5e7eb);
}
.sub-status--trial  { background: #fffbeb; border-color: #fcd34d; }
.sub-status--active { background: #f0fdf4; border-color: #86efac; }
.sub-status--expired { background: #fef2f2; border-color: #fca5a5; }
.sub-status-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted, #6b7280); margin-bottom: 6px; }
.sub-status-big { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.sub-status-sub { font-size: 13px; color: var(--text-muted, #6b7280); line-height: 1.5; }
.sub-trial-bar { height: 6px; background: #e5e7eb; border-radius: 99px; margin: 12px 0; overflow: hidden; }
.sub-trial-fill { height: 100%; background: #f59e0b; border-radius: 99px; transition: width 0.4s; }
.sub-status--active .sub-trial-fill { background: #22c55e; }
.sub-actions { margin-top: 16px; }
.sub-plans-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.sub-plan-info {
  border: 1.5px solid var(--line, #e5e7eb);
  border-radius: 10px;
  padding: 16px;
}
.sub-plan-info--pro { border-color: var(--accent, #2563eb); background: #f0f7ff; }
.sub-plan-info-name { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.sub-plan-info-desc { font-size: 12px; color: var(--text-muted, #6b7280); line-height: 1.5; }

/* ── Toast Notifications ──────────────────────────────────────────────────── */
#toast-container {
  position: fixed; top: 20px; right: 20px; z-index: 99999;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  min-width: 260px; max-width: 420px;
  padding: 12px 14px; border-radius: 10px;
  font-size: 13px; font-weight: 500; line-height: 1.45;
  box-shadow: 0 4px 20px rgba(0,0,0,0.13);
  pointer-events: all;
  animation: toast-in 0.18s ease;
}
.toast--error   { background: #fef2f2; border-left: 4px solid #ef4444; color: #991b1b; }
.toast--success { background: #f0fdf4; border-left: 4px solid #22c55e; color: #15803d; }
.toast--warning { background: #fffbeb; border-left: 4px solid #f59e0b; color: #92400e; }
.toast--info    { background: #eff6ff; border-left: 4px solid #3b82f6; color: #1e40af; }
.toast-msg { flex: 1; white-space: pre-wrap; }
.toast-action {
  align-self: center;
  border: 1px solid currentColor;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 9px;
  white-space: nowrap;
}
.toast-action:hover {
  background: rgba(255, 255, 255, 0.45);
}
[data-theme="dark"] .toast-action:hover {
  background: rgba(255, 255, 255, 0.12);
}
.toast-close {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  font-size: 18px; line-height: 1; opacity: 0.45; padding: 0; color: inherit;
}
.toast-close:hover { opacity: 1; }
.toast.toast--out { animation: toast-out 0.18s ease forwards; }
@keyframes toast-in  { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toast-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(16px); } }

/* ── Confirm Dialog ──────────────────────────────────────────────────────── */
.confirm-overlay {
  position: fixed; inset: 0; z-index: 99998;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
}
.confirm-overlay[hidden] { display: none; }
.confirm-card {
  background: var(--surface, #fff); border-radius: 12px;
  padding: 24px 28px; max-width: 420px; width: calc(100% - 32px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  animation: toast-in 0.15s ease;
}
.confirm-msg-text {
  font-size: 15px; line-height: 1.55; color: var(--ink);
  margin: 0 0 22px;
}
.confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ── Button Loading Spinner ──────────────────────────────────────────────── */
@keyframes btn-spin { to { transform: translateY(-50%) rotate(360deg); } }
.btn--loading {
  position: relative !important; pointer-events: none;
  padding-right: 34px !important;
}
.btn--loading::after {
  content: ""; position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.15);
  border-top-color: var(--accent, #2563eb);
  animation: btn-spin 0.55s linear infinite;
}
.primary-button.btn--loading::after,
.lp-btn-primary.btn--loading::after,
.auth-google-btn.btn--loading::after {
  border-color: rgba(255,255,255,0.35);
  border-top-color: #fff;
}

/* ── Field-level validation ───────────────────────────────────────────────── */
input.field-error, select.field-error, textarea.field-error {
  border-color: var(--danger, #dc2626) !important;
  box-shadow: 0 0 0 2px rgba(220,38,38,0.18);
  outline: none;
}

/* ── Password strength meter ─────────────────────────────────────────────── */
.pw-strength {
  margin-top: 6px;
  height: 4px;
  background: var(--line, #dde3f0);
  border-radius: 4px;
  overflow: hidden;
}
.pw-strength-bar {
  height: 100%;
  width: 0%;
  transition: width 0.25s, background 0.25s;
  border-radius: 4px;
}
.pw-strength-bar.pw--weak    { background: #ef4444; }
.pw-strength-bar.pw--fair    { background: #f97316; }
.pw-strength-bar.pw--good    { background: #eab308; }
.pw-strength-bar.pw--strong  { background: #22c55e; }
.pw-strength-bar.pw--vstrong { background: #16a34a; }
.pw-strength-label {
  display: block;
  font-size: 11px;
  margin-top: 3px;
  font-weight: 600;
}
.pw-strength-label.pw--weak    { color: #ef4444; }
.pw-strength-label.pw--fair    { color: #f97316; }
.pw-strength-label.pw--good    { color: #eab308; }
.pw-strength-label.pw--strong  { color: #22c55e; }
.pw-strength-label.pw--vstrong { color: #16a34a; }

/* ── Sidebar nav badge ───────────────────────────────────────────────────── */
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  background: #ef4444; color: #fff;
  border-radius: 9px; font-size: 10px; font-weight: 800;
  margin-left: auto; flex-shrink: 0;
}

/* ── Last-saved indicator ────────────────────────────────────────────────── */
.last-saved-indicator {
  font-size: 11px; color: var(--ink-muted, #8896a6);
  white-space: nowrap; opacity: 0.8;
}
.last-saved-indicator[data-tone="success"] {
  color: var(--success, #16a34a);
  opacity: 1;
  font-weight: 750;
}
.last-saved-indicator[data-tone="warning"],
.last-saved-indicator[data-tone="syncing"] {
  color: var(--warning, #d97706);
  opacity: 1;
  font-weight: 750;
}
.last-saved-indicator[data-tone="error"] {
  color: var(--danger, #dc2626);
  opacity: 1;
  font-weight: 700;
}

/* ── Status filter bar ───────────────────────────────────────────────────── */
.status-filter-bar {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 4px 0 10px;
}
.status-flt-btn {
  padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700;
  border: 1px solid var(--line, #dde3f0); background: var(--surface, #fff);
  color: var(--ink-muted, #8896a6); cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.status-flt-btn:hover { border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); }
.status-flt-btn--active {
  background: var(--ink, #1a2332); border-color: var(--ink, #1a2332); color: #fff;
}

/* ── Module empty state CTA ──────────────────────────────────────────────── */
.module-empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 48px 24px; text-align: center;
  color: var(--ink-muted, #8896a6); font-size: 14px;
}
.module-empty-state p { margin: 0; }
.module-empty-state button { margin-top: 4px; }

/* ── Copy ID button ──────────────────────────────────────────────────────── */
.copy-action {
  font-size: 13px; opacity: 0.6;
}
.copy-action:hover { opacity: 1; }

/* ── Note snippet in table rows ─────────────────────────────────────────── */
.note-snip {
  font-size: 10px; color: var(--ink-muted, #8896a6);
  font-style: italic; display: block; max-width: 200px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Aging buckets ───────────────────────────────────────────────────────── */
.aging-panel {
  background: var(--surface); border: 1px solid var(--line, #dde3f0);
  border-radius: 12px; padding: 16px 20px; margin-bottom: 16px;
}
.aging-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.aging-panel-head h3 { margin: 0; font-size: 14px; }
.ghost-button.tiny { font-size: 11px; padding: 3px 8px; }
.aging-buckets { display: flex; flex-direction: column; gap: 8px; }
.aging-bucket { display: grid; grid-template-columns: 90px 1fr 110px; align-items: center; gap: 10px; }
.aging-label { font-size: 12px; color: var(--ink-muted, #8896a6); }
.aging-bar-track { height: 8px; background: var(--line, #dde3f0); border-radius: 4px; overflow: hidden; }
.aging-bar { height: 100%; border-radius: 4px; transition: width 0.4s; min-width: 2px; }
.aging--current { background: var(--success); }
.aging--mild    { background: var(--warning, #eab308); }
.aging--warn    { background: #f97316; }
.aging--danger  { background: var(--danger); }
.aging-amount { font-size: 12px; font-weight: 700; text-align: right; color: var(--ink); }

/* ── Bulk action bar ─────────────────────────────────────────────────────── */
/* ── Quick-view panel ────────────────────────────────────────────────────── */
.qv-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.35);
  z-index: 8999; cursor: pointer;
}
.qv-backdrop[hidden] { display: none; }
.qv-panel {
  position: fixed; right: 0; top: 0; bottom: 0; width: 360px; max-width: 92vw;
  background: var(--surface, #fff); z-index: 9000;
  box-shadow: -4px 0 40px rgba(0,0,0,0.2);
  display: flex; flex-direction: column; overflow: hidden;
}
.qv-panel[hidden] { display: none; }
.qv-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--line, #dde3f0);
  flex-shrink: 0;
}
.qv-panel-header h3 { margin: 0; font-size: 15px; }
.qv-close-btn {
  background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer;
  color: var(--ink-muted, #8896a6); padding: 2px 6px; border-radius: 6px;
}
.qv-close-btn:hover { background: var(--surface-soft, #f7f9ff); }
.qv-panel-body { overflow-y: auto; flex: 1; padding: 16px 20px 24px; }
.qv-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.qv-stat { background: var(--surface-soft, #f7f9ff); border-radius: 8px; padding: 10px 12px; }
.qv-stat span { display: block; font-size: 10px; color: var(--ink-muted, #8896a6); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.qv-stat strong { font-size: 14px; }
.qv-contact { margin-bottom: 16px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--ink-muted, #8896a6); }
.qv-section-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted, #8896a6); margin-bottom: 8px; }
.qv-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.qv-list-row { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 6px 0; border-bottom: 1px solid var(--line, #dde3f0); }
.qv-list-id { font-weight: 700; color: var(--ink); flex-shrink: 0; }
.qv-list-amount { margin-left: auto; font-weight: 700; }
.qv-list-date { color: var(--ink-muted, #8896a6); font-size: 11px; flex-shrink: 0; }
.qv-empty { font-size: 13px; color: var(--ink-muted, #8896a6); text-align: center; padding: 12px 0; }
.qv-footer-actions { display: flex; gap: 8px; padding-top: 8px; }
.qv-trigger {
  background: none; border: none; cursor: pointer; text-align: left; padding: 0;
  color: var(--accent, #2563eb);
}
.qv-trigger:hover strong { text-decoration: underline; }
.qv-trigger .muted-block { color: var(--ink-muted, #8896a6); }

/* ── Overdue alert banner ────────────────────────────────────────────────── */
.overdue-alert {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  background: var(--warning-soft); border: 1px solid var(--warning);
  border-left: 4px solid var(--warning);
  border-radius: 8px; padding: 10px 14px;
  font-size: 13px; color: var(--ink2); cursor: pointer;
  margin-bottom: 4px;
  transition: background 0.15s;
}
.overdue-alert:hover { background: color-mix(in srgb, var(--warning) 14%, var(--surface)); }
.overdue-alert--bills { background: var(--danger-soft); border-color: var(--danger); border-left-color: var(--danger); color: var(--danger); }
.overdue-alert--bills:hover { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); }
.overdue-alert-icon { font-size: 16px; flex-shrink: 0; }

/* ── Period filter bar ───────────────────────────────────────────────────── */
.period-filter-bar {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 0 8px;
}
.period-btn {
  padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--line, #dde3f0); background: var(--surface, #fff);
  color: var(--ink-muted, #8896a6); cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.period-btn:hover { border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); }
.period-btn--active {
  background: var(--accent, #2563eb); border-color: var(--accent, #2563eb);
  color: #fff;
}

/* ── Sortable table headers ──────────────────────────────────────────────── */
th { cursor: pointer; user-select: none; }
th::after { content: " ⇅"; opacity: 0.25; font-size: 10px; font-weight: 400; }
th[data-sort-dir="asc"]::after  { content: " ↑"; opacity: 0.85; }
th[data-sort-dir="desc"]::after { content: " ↓"; opacity: 0.85; }

/* ── Number input formatted hint ─────────────────────────────────────────── */
.num-hint {
  display: block;
  font-size: 11px;
  color: var(--ink-muted, #8896a6);
  margin-top: 2px;
  pointer-events: none;
}

/* ── Keyboard shortcuts panel ────────────────────────────────────────────── */
.kbd-card {
  background: var(--surface, #fff);
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.22);
  min-width: 340px;
  max-width: 480px;
  width: 90vw;
  overflow: hidden;
}
.kbd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line, #dde3f0);
}
.kbd-head h3 { margin: 0; font-size: 15px; }
.kbd-close-btn {
  background: none; border: none; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--ink-muted, #8896a6);
  padding: 2px 6px; border-radius: 6px;
}
.kbd-close-btn:hover { background: var(--surface-soft, #f7f9ff); }
.kbd-body { padding: 14px 20px 20px; display: flex; flex-direction: column; gap: 8px; max-height: 70vh; overflow-y: auto; }
.kbd-section-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink3, #8fa0b8); margin-top: 10px; padding-bottom: 4px;
  border-bottom: 1px solid var(--line, #dde3f0); display: flex; align-items: center; gap: 8px;
}
.kbd-section-label:first-child { margin-top: 0; }
.kbd-hint { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--ink3); }
.kbd-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ink, #1a2332);
}
.kbd-row span { margin-left: auto; color: var(--ink-muted, #8896a6); font-size: 12px; }
kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px; padding: 0 5px;
  background: var(--surface-soft, #f7f9ff);
  border: 1px solid var(--line-strong, #c4cde0);
  border-bottom-width: 2px;
  border-radius: 5px;
  font-family: inherit; font-size: 11px; font-weight: 700;
  color: var(--ink, #1a2332);
}

/* ── Skeleton shimmer ─────────────────────────────────────────────────────── */
@keyframes skel-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
.skel {
  background: linear-gradient(90deg, var(--line) 0%, var(--surface) 50%, var(--line) 100%);
  background-size: 1200px 100%;
  animation: skel-shimmer 1.6s ease-in-out infinite;
  border-radius: var(--radius);
  display: block;
}

/* screen wrapper — matches page-section padding */
.skel-screen {
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px 24px;
  animation: none;
}
/* dashboard header block */
.skel-dash-hd {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 20px 22px;
  background: linear-gradient(135deg, #0b3591 0%, #1652cc 55%, #2060e8 100%);
  border-radius: var(--radius-lg);
  min-height: 96px;
}
.skel-dash-hd-btns { display: flex; gap: 8px; align-items: center; }

/* 3-column KPI row */
.skel-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.skel-kpi-tile {
  padding: 18px 20px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* 2-column panel row (charts) */
.skel-panel-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
}
.skel-panel {
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* activity feed */
.skel-activity-panel {
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.skel-activity-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.skel-activity-row:first-of-type { border-top: none; }
.skel-avatar {
  width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
}
.skel-activity-lines { flex: 1; }

/* ── Sync bar (Supabase fetch indicator) ─────────────────────────────────── */
@keyframes sync-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.sync-bar {
  position: sticky;
  top: 0;
  left: 0; right: 0;
  height: 2px;
  z-index: 100;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent), var(--teal), var(--accent), var(--accent-soft));
  background-size: 400% 100%;
  animation: sync-sweep 1.4s linear infinite;
  margin-bottom: -2px;
}

/* dark mode skeletons */
[data-theme="dark"] .skel {
  background: linear-gradient(90deg, #1e2530 0%, #252d3a 50%, #1e2530 100%);
  background-size: 1200px 100%;
}
[data-theme="dark"] .skel-kpi-tile,
[data-theme="dark"] .skel-panel,
[data-theme="dark"] .skel-activity-panel {
  background: #161b22;
  border-color: #2d3748;
}
[data-theme="dark"] .skel-activity-row { border-top-color: #2d3748; }

/* ── Field error flash ────────────────────────────────────────────────────── */
@keyframes field-error-ring {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  40%       { box-shadow: 0 0 0 3px var(--danger); }
}
.field-flash-error {
  animation: field-error-ring 0.55s ease;
  outline: none;
}

/* ── Scroll-to-top button ─────────────────────────────────────────────────── */
#scroll-top-btn {
  position: fixed;
  bottom: 28px;
  left: 28px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s, background 0.15s, color 0.15s;
  pointer-events: none;
  z-index: 1000;
}
#scroll-top-btn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#scroll-top-btn:hover { background: var(--surface-soft); color: var(--ink); }

/* ── Professional dashboard dark mode polish ─────────────────────────────── */
[data-theme="dark"] {
  --bg: #0b1017;
  --surface: #121923;
  --surface-soft: #182231;
  --surface-tint: #10271d;
  --line: #263244;
  --line-strong: #35445a;
  --ink: #f4f7fb;
  --ink2: #a7b4c5;
  --ink3: #74849a;
  --muted: #a7b4c5;
  --success: #30d394;
  --warning: #f2b84b;
  --danger: #ff6b6b;
  --teal: #30d394;
  --success-soft: #0d261b;
  --warning-soft: #2b2110;
  --danger-soft: #2a1214;
  --chart-1: #76a9ff;
  --chart-2: #30d394;
  --chart-3: #f2b84b;
  --chart-4: #b69cff;
  --chart-5: #6ee7d8;
  --shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
  --shadow-sm: 0 10px 26px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] body,
[data-theme="dark"] .workspace {
  background:
    radial-gradient(circle at 18% -10%, rgba(48, 211, 148, 0.08), transparent 30%),
    linear-gradient(180deg, #0b1017 0%, #0d121a 100%);
}

[data-theme="dark"] .topbar {
  background: rgba(15, 21, 30, 0.96);
  border-bottom: 1px solid #253145;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24);
}

[data-theme="dark"] .topbar-search input {
  background: #0d141e;
  border-color: #334158;
  color: #edf3fb;
}

[data-theme="dark"] .sidebar {
  background: #090e15;
  border-right-color: #243044;
}

[data-theme="dark"] .nav-item {
  color: #a6b3c4;
}

[data-theme="dark"] .nav-item.active {
  background: linear-gradient(90deg, rgba(106, 167, 255, 0.18), rgba(48, 211, 148, 0.08));
  color: #d9e9ff;
}

[data-theme="dark"] .nav-item.active::before {
  background: rgba(106, 167, 255, 0.18);
  color: #9cc7ff;
  border-color: rgba(106, 167, 255, 0.42);
}

[data-theme="dark"] .dash-header {
  background:
    linear-gradient(135deg, rgba(106, 167, 255, 0.12) 0%, transparent 38%),
    linear-gradient(145deg, #151d28 0%, #101722 54%, #102119 100%);
  border: 1px solid #2b394e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 16px 38px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .dash-greeting,
[data-theme="dark"] .dash-period-pill {
  color: #aab7c7;
}

[data-theme="dark"] .dash-period-pill {
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .dash-header-actions .ghost-button,
[data-theme="dark"] .dash-quick-btn,
[data-theme="dark"] .table-action,
[data-theme="dark"] .zoho-filter,
[data-theme="dark"] .zoho-segment {
  background: #151e2a;
  border-color: #344257;
  color: #d6e0ec;
}

[data-theme="dark"] .dash-header-actions .ghost-button:hover,
[data-theme="dark"] .dash-quick-btn:hover,
[data-theme="dark"] .table-action:hover,
[data-theme="dark"] .zoho-filter:hover {
  background: #1b2635;
  border-color: var(--accent);
  color: var(--accent-strong);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .dash-header-actions .primary-button,
[data-theme="dark"] .primary-button {
  background: linear-gradient(180deg, #2fbd73, #23894f);
  border: 1px solid rgba(126, 231, 187, 0.28);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(22, 163, 74, 0.22);
}

[data-theme="dark"] .dash-header-actions .primary-button:hover,
[data-theme="dark"] .primary-button:hover {
  background: linear-gradient(180deg, #39cf82, #28995a);
}

[data-theme="dark"] .zoho-summary-tile {
  border-color: #2d3b50;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 14px 30px rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .zoho-summary-tile--blue {
  background: linear-gradient(150deg, #121b2c 0%, #17263d 100%);
  border-color: #315079;
}

[data-theme="dark"] .zoho-summary-tile--orange {
  background: linear-gradient(150deg, #211b10 0%, #2c2310 100%);
  border-color: #5a4218;
}

[data-theme="dark"] .zoho-summary-tile--green {
  background: linear-gradient(150deg, #0d1f18 0%, #10291f 100%);
  border-color: #25543d;
}

[data-theme="dark"] .zoho-summary-tile-icon {
  background: rgba(255, 255, 255, 0.055) !important;
  border: 1px solid rgba(255, 255, 255, 0.075);
}

[data-theme="dark"] .zoho-summary-label,
[data-theme="dark"] .zoho-summary-split span {
  color: #9aa9bb;
}

[data-theme="dark"] .zoho-summary-value,
[data-theme="dark"] .zoho-summary-split b,
[data-theme="dark"] .zoho-summary-count strong {
  color: #f6f9fc;
}

[data-theme="dark"] .zoho-summary-split {
  border-top-color: rgba(255, 255, 255, 0.16);
}

[data-theme="dark"] .zoho-summary-count {
  color: #8a9bb0;
}

[data-theme="dark"] .zoho-widget {
  background: #121923;
  color: #edf3fb;
  border-color: #2b384b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 18px 40px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .zoho-widget:hover {
  border-color: #34465f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 22px 48px rgba(0, 0, 0, 0.34);
}

[data-theme="dark"] .zoho-widget-head h3 {
  color: #f4f7fb;
}

[data-theme="dark"] .zoho-widget-sub,
[data-theme="dark"] .zoho-cashflow-stats span,
[data-theme="dark"] .zoho-income-summary span {
  color: #9aa9bb;
}

[data-theme="dark"] .zoho-income-stat,
[data-theme="dark"] .zoho-cashflow-stat {
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .zoho-income-stat--income,
[data-theme="dark"] .zoho-cashflow-stat--in {
  background: linear-gradient(145deg, #0f3224, #0b271c);
  border-color: #1f6a4b;
}

[data-theme="dark"] .zoho-income-stat--expense,
[data-theme="dark"] .zoho-cashflow-stat--out {
  background: linear-gradient(145deg, #351619, #270f11);
  border-color: #733036;
}

[data-theme="dark"] .zoho-income-stat--profit,
[data-theme="dark"] .zoho-cashflow-stat--balance {
  background: linear-gradient(145deg, #16233a, #121d30);
  border-color: #34527d;
}

[data-theme="dark"] .zoho-income-stat strong,
[data-theme="dark"] .zoho-cashflow-stat strong {
  color: #ffffff;
}

[data-theme="dark"] .live-chart-wrap {
  padding: 10px 12px 4px;
  border: 1px solid #263447;
  border-radius: 8px;
  background: linear-gradient(180deg, #0f1620 0%, #111a26 100%);
}

[data-theme="dark"] .zoho-empty-small {
  background: #182232;
  border-color: #35445a;
  color: #9fb0c3;
}

[data-theme="dark"] .zoho-bank-row,
[data-theme="dark"] .zoho-watch-row,
[data-theme="dark"] .zoho-expense-row {
  background: #182232;
  border-color: #2c3a50;
  color: #edf3fb;
}

[data-theme="dark"] .zoho-bank-row:hover,
[data-theme="dark"] .zoho-watch-row:hover,
[data-theme="dark"] .zoho-expense-row:hover {
  background: #202c3d;
  border-color: var(--accent);
}

[data-theme="dark"] .zoho-watch-row span,
[data-theme="dark"] .zoho-bank-info span,
[data-theme="dark"] .zoho-expense-row span {
  color: #edf3fb;
}

[data-theme="dark"] .zoho-bank-info small,
[data-theme="dark"] .zoho-expense-row small {
  color: #95a5b8;
}

[data-theme="dark"] .chart-fallback {
  background: linear-gradient(145deg, #131d2a, #111923);
  border-color: #324155;
  color: #9fb0c3;
}

[data-theme="dark"] #scroll-top-btn {
  background: #172130;
  border-color: #344257;
  color: #d6e0ec;
}

/* ── Mobile layout improvements ──────────────────────────────────────────── */
@media (max-width: 680px) {
  /* --- Topbar ------------------------------------------------------------ */
  .topbar h2         { font-size: 18px; }
  .topbar .eyebrow   { font-size: 11px; }

  /* Keep the topbar to one tight row: hamburger | title | actions
     Search moves to its own row (order:3 already set) */
  .topbar { gap: 8px; }
  .topbar > div:first-of-type { flex: 1; min-width: 0; } /* title block fills */

  /* --- Section header ---------------------------------------------------- */
  /* Stack title+description above the action button(s) */
  .section-header {
    flex-direction: column;
    align-items: stretch;
  }
  .section-header > div { flex: 1; }
  /* Button row aligns to the right */
  .section-header > div:last-child,
  .section-header > button,
  .section-header > a {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .section-header > .primary-button,
  .section-header > .ghost-button {
    flex: 1;
  }

  .stg-action-grid {
    flex-direction: column;
  }
  .stg-action-grid .primary-button,
  .stg-action-grid .ghost-button {
    width: 100%;
    justify-content: center;
  }
  .role-grid,
  .health-summary {
    grid-template-columns: 1fr;
  }
  .role-grid {
    padding: 0 12px 12px;
  }

  /* --- Touch targets ----------------------------------------------------- */
  /* Nav items: 44 px min-height for comfortable tapping */
  .nav-item, .nav-item.nested { min-height: 44px; }

  /* Form controls: 16px prevents iOS from auto-zooming on focus;
     44px min-height gives a comfortable tap area */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea {
    font-size: 16px;
    min-height: 44px;
  }
  textarea { min-height: 80px; }

  /* Table action buttons — room to tap */
  .table-action, .inline-actions button { min-height: 36px; min-width: 36px; }

  /* --- Tables ------------------------------------------------------------ */
  /* Tighter cell padding, smaller text to fit more columns */
  th, td { padding: 8px 9px; font-size: 13px; }
  table  { min-width: 560px; }

  /* Touch-momentum scroll */
  .table-shell { -webkit-overflow-scrolling: touch; position: relative; }

  /* Right-edge gradient → signals horizontal scroll to the user */
  .table-shell::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 40px;
    background: linear-gradient(to left, var(--surface) 0%, transparent 100%);
    pointer-events: none;
    border-radius: 0 var(--radius) var(--radius) 0;
  }

  /* --- Dashboard header -------------------------------------------------- */
  .dash-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    min-height: auto;
  }
  .dash-header-actions { width: 100%; }
  .dash-header-actions button { flex: 1; justify-content: center; }

  .dashboard-focus-grid,
  .dashboard-focus-grid--single,
  .dashboard-empty-chart {
    grid-template-columns: 1fr;
  }

  .dashboard-setup-list {
    grid-template-columns: 1fr;
  }

  .dashboard-setup-step {
    min-height: 0;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  .dashboard-empty-chart {
    min-height: 0;
  }

  .dashboard-empty-chart-bars {
    height: 96px;
  }

  .bk-reconcile-strip {
    grid-template-columns: 1fr;
  }

  /* --- Dashboard KPI tiles: already 1-col via existing rule -------------- */
  /* Make tiles slightly more compact vertically */
  .zoho-summary-tile { padding: 14px 16px 12px; }

  /* --- Skeleton layout on mobile ---------------------------------------- */
  .skel-screen    { padding: 12px; gap: 10px; }
  .skel-panel-row { grid-template-columns: 1fr; }

  /* --- Module metric cards: 2 per row ------------------------------------ */
  .module-summary-row { flex-wrap: wrap; }
  .metric-card.compact {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
  }

  /* --- Item picker dropdown: don't overflow viewport --------------------- */
  .item-picker-dropdown {
    min-width: 0;
    max-width: calc(100vw - 32px);
  }

  /* --- Quick view panel: full width on mobile ---------------------------- */
  #quick-view-panel {
    width: 100% !important;
    max-width: 100%;
    border-left: none;
    border-top: 1px solid var(--line);
  }

  /* --- Workspace: tighter gap -------------------------------------------- */
  .workspace { gap: 12px; }
}

/* Very small phones (< 420px) -------------------------------------------- */
@media (max-width: 420px) {
  .workspace  { padding: 8px; gap: 8px; }
  .topbar     { padding: 8px 10px; border-radius: 6px; }
  .topbar h2  { font-size: 16px; }
  th, td      { padding: 7px 7px; font-size: 12px; }
  table       { min-width: 480px; }
  .section-header h3 { font-size: 16px; }
  .skel-kpi-row { grid-template-columns: 1fr; }
  .skel-dash-hd { min-height: 80px; padding: 14px 14px; }
}

/* ── Custom Module Overview / Dashboard ──────────────────────────────────── */
.cm-overview { padding: 20px 24px; }
.cm-overview-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.cm-overview-card { min-width: 150px; }
.cm-overview-sub {
  font-size: 11px;
  color: var(--text-muted, #888);
  margin-top: 2px;
}
.cm-progress-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  margin: 6px 0 4px;
  overflow: hidden;
}
.cm-progress-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  transition: width .3s;
}
.cm-recent-section { border-top: 1px solid var(--line); padding-top: 14px; }
.cm-recent-section > .eyebrow { display: block; margin-bottom: 10px; }
.cm-recent-list { display: flex; flex-direction: column; gap: 6px; }
.cm-recent-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--surface-soft);
}
.cm-recent-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cm-recent-date { font-size: 12px; color: var(--text-muted, #888); flex-shrink: 0; }

/* ── Custom Module Record Detail View ────────────────────────────────────── */
.cm-detail-panel { padding: 24px; }
.cm-detail-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin: 20px 0;
}
.cm-detail-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cm-detail-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted, #888);
}
.cm-detail-value {
  font-size: 14px;
  color: var(--text);
  word-break: break-word;
}
.cm-detail-textarea { white-space: pre-wrap; }
.cm-detail-empty { color: var(--text-muted, #aaa); }
.cm-detail-yes { color: var(--success, #16a34a); font-weight: 500; }
.cm-detail-no  { color: var(--text-muted, #888); }
.cm-detail-link { color: var(--accent); text-decoration: none; }
.cm-detail-link:hover { text-decoration: underline; }
.cm-detail-image {
  max-width: 160px;
  max-height: 160px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.cm-detail-meta {
  display: flex;
  gap: 20px;
  font-size: 12px;
  color: var(--text-muted, #888);
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}

/* ── Custom Module Comments / Notes ──────────────────────────────────────── */
.cm-comments-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.cm-comments-header {
  margin-bottom: 10px;
}
.cm-comments-empty {
  color: var(--text-muted, #888);
  font-size: 13px;
  margin: 0 0 12px;
}
.cm-comment {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-soft);
  margin-bottom: 8px;
}
.cm-comment-body {
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.cm-comment-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted, #888);
}
.cm-comment-delete {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: var(--danger, #e11d48);
  cursor: pointer;
  opacity: 0.6;
}
.cm-comment-delete:hover { opacity: 1; }
.cm-comment-add {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin-top: 10px;
}
.cm-comment-add .cm-comment-input {
  flex: 1;
  resize: none;
}
.cm-attachment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--surface-soft);
  margin-bottom: 6px;
}
.cm-attachment-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cm-attachment-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cm-attachment-name:hover { text-decoration: underline; }
.cm-attachment-size {
  font-size: 12px;
  color: var(--text-muted, #888);
}

/* ── Custom Module Status Field ───────────────────────────────────────────── */
.cm-status-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Custom Module Link Fields ────────────────────────────────────────────── */
.cm-link-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  background: var(--accent-soft, rgba(99,102,241,.10));
  color: var(--accent);
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Custom Module Image Fields ───────────────────────────────────────────── */
.cm-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--line);
  vertical-align: middle;
  display: inline-block;
}
.cm-image-field {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.cm-image-preview {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.cm-image-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cm-image-controls .stg-input[type="file"] {
  padding: 6px 8px;
  cursor: pointer;
}

/* ── Custom Module Activity Log ───────────────────────────────────────────── */
.cm-history-list { display: flex; flex-direction: column; gap: 0; }
.cm-history-entry {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.cm-history-entry:last-child { border-bottom: none; }
.cm-history-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 4px;
  background: var(--text-muted, #888);
}
.cm-history-dot--create  { background: #16a34a; }
.cm-history-dot--update  { background: var(--accent); }
.cm-history-dot--note    { background: #0284c7; }
.cm-history-dot--attach  { background: #7c3aed; }
.cm-history-dot--delete  { background: #dc2626; }
.cm-history-body {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.cm-history-detail { font-size: 13px; color: var(--text, #111); }
.cm-history-date   { font-size: 12px; color: var(--text-muted, #888); flex-shrink: 0; }

/* ── Production mobile experience polish ─────────────────────────────────── */
@media (max-width: 900px) {
  body {
    overflow-x: hidden;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .workspace {
    width: 100%;
    padding: 12px;
    gap: 12px;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1001;
    width: min(86vw, 340px);
    min-height: 100vh;
    height: 100dvh;
    gap: 14px;
    padding: 14px 14px calc(16px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, #0b3591 0%, #0a2c76 52%, #081f55 100%);
    transform: translateX(-104%);
    transition: transform .22s ease, box-shadow .22s ease;
    border-right: 0;
    box-shadow: none;
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: 22px 0 55px rgba(7, 18, 46, 0.28);
  }

  .sidebar-backdrop {
    display: block;
  }

  .sidebar-toggle {
    display: inline-flex;
  }

  .sidebar-card {
    display: none;
  }

  .brand-block {
    position: sticky;
    top: -12px;
    z-index: 2;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 10px;
    margin: -2px -2px 2px;
    padding: 12px 7px 16px;
    border-bottom-color: rgba(255, 255, 255, 0.16);
    background: linear-gradient(180deg, rgba(11, 53, 145, 0.98), rgba(10, 44, 118, 0.92));
  }

  .brand-mark {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    padding: 6px;
  }

  .brand-block h1 {
    font-size: 16px;
  }

  .sidebar .eyebrow {
    color: rgba(237, 245, 251, 0.64);
    font-size: 10px;
    letter-spacing: 0;
  }

  .sidebar-close {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
  }

  .sidebar-close:hover,
  .sidebar-close:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    outline: none;
  }

  .nav-list {
    gap: 13px;
    padding: 0 1px 4px;
  }

  .nav-group {
    gap: 5px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.055);
  }

  .nav-group + .nav-group {
    margin-top: 0;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.11);
  }

  .nav-group-label {
    padding: 2px 9px 6px;
    color: rgba(237, 245, 251, 0.62);
    font-size: 10px;
    letter-spacing: 0;
  }

  .nav-item,
  .nav-item.nested {
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.045);
    color: rgba(237, 245, 251, 0.88);
    font-size: 14px;
    font-weight: 720;
  }

  .nav-item.nested {
    padding-left: 10px;
  }

  .nav-item::before {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.10);
    color: rgba(237, 245, 251, 0.80);
  }

  .nav-item:hover {
    background: rgba(255, 255, 255, 0.11);
    color: #fff;
  }

  .nav-item.active {
    border-color: rgba(255, 255, 255, 0.72);
    background: #fff;
    color: #0b3591;
    box-shadow: 0 10px 28px -18px rgba(0, 0, 0, 0.65);
  }

  .nav-item.active::before {
    background: var(--teal);
    color: #fff;
  }

  .nav-item--locked::after {
    right: 12px;
  }

  .sidebar-account {
    margin: auto 2px 0;
    padding: 12px;
    border-color: rgba(255, 255, 255, 0.13);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.075);
  }

  .sidebar-account-label {
    color: rgba(237, 245, 251, 0.62);
    letter-spacing: 0;
  }

  .sidebar-logout {
    min-height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.12);
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 900;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
  }

  .topbar > div:first-of-type {
    min-width: 0;
  }

  .topbar h2 {
    overflow: hidden;
    font-size: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar .eyebrow {
    font-size: 10px;
  }

  .topbar-search {
    grid-column: 1 / -1;
    order: 4;
    flex-basis: auto;
    max-width: none;
  }

  .topbar-search input {
    min-height: 44px;
    font-size: 16px;
  }

  .topbar-actions {
    justify-content: flex-end;
    flex-wrap: nowrap;
    min-width: 0;
  }

  .last-saved-indicator {
    max-width: 104px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .subscription-badge,
  .topbar-logout {
    display: none !important;
  }

  .topbar-theme-toggle,
  .sidebar-toggle {
    width: 42px;
    height: 42px;
    border-radius: 10px;
  }

  .panel,
  .metric-card,
  .zoho-widget,
  .dashboard-setup-panel,
  .dashboard-empty-guide,
  .modal-card,
  .bk-reconcile-card,
  .bk-accounts-card,
  .bk-active-section {
    border-radius: 10px;
  }

  .content-grid,
  .split-layout,
  .setup-layout,
  .report-grid,
  .zoho-dashboard-grid,
  .dashboard-focus-grid,
  .dashboard-focus-grid--single,
  .zoho-summary-bar,
  .metric-grid,
  .stats-inline,
  .zoho-income-summary,
  .bk-reconcile-strip,
  .bk-account-summary-row,
  .form-row-2col,
  .field-row,
  .sr-payment-grid,
  .stg-form-grid,
  .custom-record-grid,
  .cm-overview-kpis {
    grid-template-columns: 1fr;
  }

  .module-summary-row,
  .pmade-summary-row,
  .ts-summary-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-setup-list {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    padding: 2px 2px 10px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .dashboard-setup-step {
    min-width: 190px;
    min-height: 92px;
    scroll-snap-align: start;
  }

  .dash-header {
    align-items: stretch;
    padding: 16px;
    border-radius: 12px;
  }

  .dash-header,
  .module-toolbar,
  .pmade-list-header,
  .pmade-filter-row,
  .bk-toolbar,
  .bk-detail-acct-row,
  .bk-txn-header,
  .stg-content-header,
  .modal-footer {
    flex-direction: column;
  }

  .dash-header-actions,
  .module-actions,
  .pmade-list-actions,
  .pmade-filter-tabs,
  .pmade-search,
  .bk-toolbar-actions,
  .bk-detail-actions,
  .dashboard-empty-actions,
  .inline-actions,
  .quick-links,
  .modal-footer {
    width: 100%;
  }

  .dash-header-actions .ghost-button,
  .dash-header-actions .primary-button,
  .module-actions > *,
  .pmade-list-actions > *,
  .bk-toolbar-actions > *,
  .bk-detail-actions > *,
  .modal-footer > *,
  .dashboard-empty-action,
  .dash-quick-btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .dash-quick-actions,
  .quick-create-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .dash-quick-btn,
  .quick-create-tile {
    min-width: 0;
    white-space: normal;
  }

  .table-shell,
  .pmade-table-wrap,
  .pmade-bills-table-wrap,
  .bk-txn-table-wrap,
  .report-table-shell,
  .line-editor,
  .items-table-wrap,
  .ts-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 620px;
  }

  th,
  td {
    padding: 9px 10px;
    font-size: 13px;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea,
  .field-input,
  .pmade-input,
  .stg-input {
    min-height: 44px;
    font-size: 16px;
  }

  textarea,
  .field textarea {
    min-height: 92px;
  }

  .table-action,
  .ghost-button,
  .primary-button,
  .danger-button,
  .pmade-filter-tabs button,
  .bk-tab {
    min-height: 42px;
  }

  .pmade-summary-row > div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .pmade-summary-row > div:last-child {
    border-bottom: 0;
  }

  .pmade-search input {
    width: 100%;
    min-width: 0;
  }

  .invoice-record-shell {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .invoice-record-list {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .invoice-record-list-body {
    max-height: 320px;
  }

  .invoice-record-titlebar {
    min-height: 0;
    padding: 14px;
  }

  .invoice-record-titlebar h3 {
    font-size: 20px;
  }

  .invoice-record-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 8px;
  }

  .invoice-record-toolbar .table-action {
    flex: 0 0 auto;
  }

  .invoice-preview-paper {
    margin: 12px 0 20px;
    padding: 28px 16px 24px;
    box-shadow: var(--shadow-sm);
  }

  .invoice-preview-top,
  .invoice-preview-meta,
  .invoice-next-main,
  .invoice-next-secondary {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  .invoice-preview-title {
    justify-items: start;
  }

  .invoice-preview-title h2 {
    font-size: 30px;
  }

  .invoice-preview-meta {
    margin-top: 34px;
  }

  .invoice-preview-lines {
    min-width: 560px;
  }

  .invoice-preview-totals {
    grid-template-columns: 1fr auto;
    padding-right: 0;
  }

  .bk-detail-topbar {
    padding: 16px;
  }

  .bk-detail-balance {
    font-size: 24px;
  }

  .bk-tabs-bar {
    overflow-x: auto;
    padding: 0;
    -webkit-overflow-scrolling: touch;
  }

  .bk-tab {
    flex: 0 0 auto;
    padding: 11px 14px;
  }

  .bk-txn-acct-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .stg-layout {
    flex-direction: column;
    min-height: 0;
  }

  .stg-sidebar {
    width: 100%;
    max-height: 250px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .stg-main {
    padding: 14px;
    overflow: visible;
  }

  .stg-panel {
    max-width: 100%;
  }

  .modal-overlay {
    align-items: stretch;
    padding: 0;
  }

  .modal-card {
    max-height: 100dvh;
    border-radius: 0;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .auth-page-bg {
    min-height: 100dvh;
  }

  .auth-page-right {
    padding: 22px 16px;
  }

  .auth-page-panel {
    max-width: 100%;
  }

  .auth-page-logo {
    width: 62px;
    height: 62px;
  }
}

@media (max-width: 520px) {
  .workspace {
    padding: 8px;
  }

  .topbar {
    border-radius: 8px;
  }

  .last-saved-indicator {
    display: none;
  }

  .module-summary-row,
  .pmade-summary-row,
  .ts-summary-bar,
  .dash-quick-actions,
  .quick-create-strip {
    grid-template-columns: 1fr;
  }

  .zoho-summary-tile,
  .zoho-widget,
  .panel,
  .metric-card {
    padding: 14px;
  }

  .zoho-summary-value {
    font-size: 26px;
  }

  .table-empty-state {
    padding: 38px 16px;
  }
}

/* ── Platform owner dashboard ─────────────────────────────────────────────── */
.platform-admin-nav[hidden] {
  display: none !important;
}

.admin-page {
  display: grid;
  gap: 16px;
}

.admin-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px;
}

.admin-hero h3 {
  margin: 4px 0 8px;
  font-size: 22px;
}

.admin-hero p {
  margin: 0;
  color: var(--muted);
  max-width: 760px;
}

.admin-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.admin-summary-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.admin-summary-card span,
.admin-summary-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.admin-summary-card strong {
  display: block;
  margin: 8px 0 4px;
  color: var(--text);
  font-size: 26px;
}

.admin-summary-card--good {
  border-color: rgba(34, 197, 94, .34);
  background: linear-gradient(180deg, rgba(34, 197, 94, .08), var(--card));
}

.admin-summary-card--warn {
  border-color: rgba(245, 158, 11, .38);
  background: linear-gradient(180deg, rgba(245, 158, 11, .09), var(--card));
}

.admin-panel {
  padding: 0;
  overflow: hidden;
}

.admin-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  align-items: center;
}

.admin-search input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: var(--input-bg);
  color: var(--text);
}

.admin-status-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.admin-status-tabs button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--muted);
  padding: 0 10px;
  font-weight: 700;
  cursor: pointer;
}

.admin-status-tabs button.active {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(37, 99, 235, .08);
}

.admin-error,
.admin-loading {
  margin: 14px 16px 0;
  border-radius: 8px;
  padding: 12px 14px;
  font-weight: 700;
}

.admin-error {
  border: 1px solid rgba(239, 68, 68, .25);
  color: #b91c1c;
  background: rgba(254, 226, 226, .75);
}

.admin-loading {
  border: 1px solid rgba(37, 99, 235, .18);
  color: var(--primary);
  background: rgba(37, 99, 235, .07);
}

.admin-table-shell {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.admin-table-shell td strong,
.admin-table-shell td small {
  display: block;
}

.admin-table-shell td small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-actions .table-action {
  min-height: 32px;
  padding: 0 9px;
}

.admin-empty {
  padding: 28px;
}

.admin-empty h3 {
  margin: 0 0 8px;
}

.admin-empty p {
  margin: 0;
  color: var(--muted);
}

@media (max-width: 980px) {
  .admin-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-toolbar {
    grid-template-columns: 1fr;
  }

  .admin-status-tabs {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .admin-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-summary-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@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;
  }
}