@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
/* ===== AgentR Base Theme (server-injected) ===== */
/* Reset + NEUTRAL ADAPTIVE fallbacks. These use the app's OWN CSS variables when it defines them
   (so they adapt to whatever palette the model chose) and a theme-neutral translucent value otherwise.
   NO fixed brand/background colours here, so this never homogenises the design — it only stops a
   section from rendering as unstyled raw text when the model's own CSS misses/breaks a class. The
   app's style.css loads AFTER this and overrides it wherever it defines the same selector. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;cursor:pointer}
input,textarea,select,button{font:inherit}

.container,.wrapper,.content-wrap{max-width:var(--maxw,1200px);margin:0 auto;padding:0 24px}
.card,.metric-card,.stat-card,.kpi-card,.metric,.summary-card,.overview-card,.info-card,.feature-card,.dashboard-card,.widget,.panel,.tile,.box{
  background:var(--surface,rgba(148,163,184,.08));
  border:1px solid var(--border,rgba(148,163,184,.16));
  border-radius:var(--radius,14px);
  padding:20px 22px;
}
.metric-value,.stat-value,.stat-number,.kpi-value,.metric-amount,.big-number,.amount{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;line-height:1.15}
.metric-label,.stat-label,.kpi-label,.metric-title,.card-label{opacity:.72;font-size:.88rem;font-weight:600}
.metric-sub,.stat-sub,.card-sub,.muted,.subtext,.hint{opacity:.6;font-size:.82rem}
.metric-grid,.stats-grid,.kpi-grid,.metrics,.cards,.card-grid,.grid-cards,.overview-grid,.summary-grid,.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.btn,.button,button.btn,a.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:var(--radius-sm,10px);border:1px solid var(--border,rgba(148,163,184,.25));background:var(--surface,rgba(148,163,184,.12));text-decoration:none;font-weight:600}
table{width:100%;border-collapse:collapse}
th,td{padding:11px 15px;text-align:left;border-bottom:1px solid var(--border,rgba(148,163,184,.14))}
th{opacity:.7;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
/* ===== End AgentR Base Theme ===== */

/* Auth pages: ALWAYS center the card, whatever wrapper class the model emitted (fixes off-center login) */
.auth-wrapper,.auth-container,.auth-page,.login-wrapper,.login-container,.login-page,.signin-wrapper,.signin-container,.register-wrapper,.register-container,.signup-wrapper,.signup-container{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;box-sizing:border-box}
.auth-card,.login-card,.signin-card,.register-card,.signup-card,.auth-form-card{width:100%;max-width:440px;margin:auto}

/* Online Contracts — Wax & Vellum */
:root {
  --paper: #f3eee4;
  --paper-2: #e8e0d2;
  --vellum: #faf6ee;
  --ink: #161412;
  --ink-soft: #3a342c;
  --muted: #7a7266;
  --line: rgba(22, 20, 18, 0.1);
  --line-strong: rgba(22, 20, 18, 0.16);
  --seal: #8f2d1e;
  --seal-hot: #b33a28;
  --seal-soft: #f3ddd6;
  --forest: #1a2e28;
  --forest-mid: #243f36;
  --gold: #b0894f;
  --gold-soft: #d4b483;
  --success: #2f6b4f;
  --success-soft: #dce8e1;
  --danger: #8f2d1e;
  --info: #3d5360;
  --info-soft: #dfe7ec;
  --shadow: 0 24px 60px rgba(22, 20, 18, 0.12);
  --shadow-tight: 0 10px 30px rgba(22, 20, 18, 0.08);
  --radius: 22px;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Outfit", "Avenir Next", "Segoe UI", sans-serif;
  --nav-h: 76px;
}

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

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  background-image:
    radial-gradient(1200px 500px at 10% -10%, rgba(176, 137, 79, 0.12), transparent 50%),
    radial-gradient(900px 400px at 110% 0%, rgba(143, 45, 30, 0.08), transparent 46%),
    repeating-linear-gradient(0deg, rgba(22, 20, 18, 0.015) 0 1px, transparent 1px 3px);
  min-height: 100vh;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

body.nav-open {
  overflow: hidden;
}

img {
  max-width: 100%;
}

a {
  color: var(--seal);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--seal-hot);
}

::selection {
  background: #e8c9b8;
  color: var(--ink);
}

.skip {
  position: absolute;
  left: 12px;
  top: -40px;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 12px;
  z-index: 100;
}

.skip:focus {
  top: 12px;
}

.site-nav,
.app-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(16px);
  background: rgba(243, 238, 228, 0.86);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  min-height: var(--nav-h);
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
}

.wordmark:hover {
  color: var(--ink);
}

.seal {
  width: 36px;
  height: 36px;
  color: var(--seal);
  display: block;
}

.wordmark-text {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.wordmark-text em {
  font-style: italic;
  font-weight: 500;
  margin-right: 0.22em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav-links a,
.nav-soon {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
}

.nav-links a:hover,
.nav-links a.is-active {
  color: var(--ink);
}

.nav-soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0.7;
  cursor: default;
}

.nav-soon i {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 2px 7px;
  color: var(--gold);
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
}

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--vellum);
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.user-chip-name {
  font-size: 13px;
  color: var(--ink);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 12px 18px;
  text-decoration: none;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.btn:hover {
  transform: translateY(-1px);
  text-decoration: none;
}

.btn:active {
  transform: translateY(0);
}

.btn-seal {
  background: var(--seal);
  color: #f8f1e6;
  box-shadow: 0 8px 20px rgba(143, 45, 30, 0.22);
}

.btn-seal:hover {
  background: var(--seal-hot);
  color: #f8f1e6;
}

.btn-forest {
  background: var(--forest);
  color: var(--paper);
}

.btn-forest:hover {
  background: var(--forest-mid);
  color: var(--paper);
}

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

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.4);
  color: var(--ink);
}

.btn-gold {
  background: var(--gold);
  color: #1a140c;
}

.btn-gold:hover {
  background: var(--gold-soft);
  color: #1a140c;
}

.btn-block {
  width: 100%;
}

.btn[disabled],
.btn.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

.hero {
  padding: 72px 0 40px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--seal);
  font-weight: 600;
}

.kicker::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--gold);
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 12px;
}

h1 {
  font-size: clamp(42px, 6vw, 72px);
  line-height: 0.96;
  margin-top: 14px;
}

h1 em {
  font-style: italic;
  color: var(--seal);
}

.lede {
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 18px 0 28px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  color: var(--muted);
  font-size: 13px;
}

.hero-meta strong {
  color: var(--ink);
  font-weight: 600;
}

.doc-stage {
  position: relative;
  min-height: 520px;
}

.doc-card {
  position: relative;
  background: var(--vellum);
  border: 1px solid #d9cfbe;
  border-radius: 6px 22px 22px 22px;
  padding: 36px 34px 28px;
  box-shadow: var(--shadow);
  transform: rotate(-1.2deg);
  overflow: hidden;
}

.doc-card::before {
  content: "";
  position: absolute;
  inset: 10px 10px auto auto;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #c45c3a, var(--seal) 62%);
  opacity: 0.92;
  box-shadow: inset 0 0 0 6px rgba(243, 238, 228, 0.25);
}

.doc-card h3 {
  font-size: 28px;
  max-width: 14ch;
}

.doc-rule {
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin: 14px 0 18px;
  max-width: 180px;
}

.doc-lines span {
  display: block;
  height: 8px;
  border-radius: 99px;
  background: rgba(22, 20, 18, 0.08);
  margin: 10px 0;
}

.doc-lines span:nth-child(2) { width: 92%; }
.doc-lines span:nth-child(3) { width: 84%; }
.doc-lines span:nth-child(4) { width: 88%; }
.doc-lines span:nth-child(5) { width: 70%; }
.doc-lines span:nth-child(6) { width: 76%; }

.sign-block {
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.sign-col {
  border-top: 1px solid var(--line-strong);
  padding-top: 10px;
}

.sign-col small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.signature {
  font-family: var(--serif);
  font-style: italic;
  font-size: 32px;
  color: var(--forest);
  line-height: 1;
  margin: 8px 0 4px;
  background: linear-gradient(90deg, var(--forest), var(--forest) 60%, transparent);
  -webkit-background-clip: text;
  background-clip: text;
  animation: sign-draw 2.4s ease forwards;
}

@keyframes sign-draw {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: none; }
}

.stamp {
  position: absolute;
  left: -18px;
  bottom: 70px;
  width: 108px;
  height: 108px;
  border: 2px solid rgba(143, 45, 30, 0.55);
  border-radius: 50%;
  color: var(--seal);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: rotate(-18deg);
  background: rgba(243, 238, 228, 0.9);
}

.section {
  padding: 72px 0;
}

.section.alt {
  background: rgba(255, 255, 255, 0.28);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-head {
  max-width: 640px;
  margin-bottom: 36px;
}

.section-head h2 {
  font-size: clamp(32px, 4vw, 46px);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card {
  background: var(--vellum);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-tight);
}

.card h3 {
  font-size: 26px;
  margin-bottom: 8px;
}

.card p {
  margin: 0;
  color: var(--ink-soft);
}

.step-num {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
  font-size: 22px;
}

.trust-row {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}

.trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.trust-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  color: var(--ink-soft);
}

.dot {
  width: 10px;
  height: 10px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--seal);
  box-shadow: 0 0 0 6px var(--seal-soft);
}

.quote {
  background: var(--forest);
  color: #efe8da;
  border-radius: 28px;
  padding: 36px;
  position: relative;
}

.quote p {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.25;
  margin: 0 0 18px;
}

.quote cite {
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

.plan-note {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: 28px 32px;
  border: 1px dashed var(--gold);
  border-radius: 24px;
  background: rgba(176, 137, 79, 0.08);
}

.plan-note h2 {
  font-size: 34px;
  margin-bottom: 6px;
}

.site-foot {
  border-top: 1px solid var(--line);
  padding: 36px 0 48px;
  color: var(--muted);
  font-size: 13px;
}

.site-foot.is-compact {
  padding: 20px 0 28px;
}

.foot-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  gap: 12px;
}

.foot-inner strong {
  color: var(--ink);
  margin-right: 10px;
}

.foot-inner nav {
  display: flex;
  gap: 18px;
}

.foot-inner a {
  color: var(--ink-soft);
  text-decoration: none;
}

.auth-shell {
  min-height: calc(100vh - 0px);
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
}

.auth-panel {
  background: var(--forest);
  color: #efe8da;
  padding: 36px 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.auth-panel::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -120px;
  bottom: -80px;
  border-radius: 50%;
  border: 1px solid rgba(212, 180, 131, 0.18);
}

.auth-panel .wordmark {
  color: #efe8da;
}

.auth-panel .seal {
  color: #c45c3a;
}

.auth-panel h1 {
  color: #f6efe3;
  font-size: clamp(40px, 5vw, 58px);
  margin-top: 48px;
}

.auth-panel p {
  color: rgba(239, 232, 218, 0.78);
  font-size: 17px;
  max-width: 36ch;
}

.auth-form {
  padding: 48px 7vw 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-form h2 {
  font-size: 40px;
}

.form-intro {
  color: var(--muted);
  margin: 0 0 28px;
}

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}

.field input {
  width: 100%;
  border: 1px solid var(--line-strong);
  background: var(--vellum);
  color: var(--ink);
  border-radius: 14px;
  padding: 13px 14px;
  font-family: var(--sans);
  font-size: 16px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input:focus {
  border-color: var(--forest-mid);
  box-shadow: 0 0 0 4px rgba(36, 63, 54, 0.12);
}

.password-wrap {
  position: relative;
}

.password-wrap input {
  padding-right: 72px;
}

.password-wrap button {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.form-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin: 6px 0 18px;
  font-size: 14px;
}

.form-help {
  font-size: 13px;
  color: var(--muted);
  margin-top: 16px;
}

.demo-card {
  margin-top: 28px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(36, 63, 54, 0.06);
  border: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-soft);
}

.demo-card code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--forest);
}

.flash {
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 18px;
  font-size: 14px;
}

.flash-error {
  background: var(--seal-soft);
  color: var(--seal);
}

.flash-success {
  background: var(--success-soft);
  color: var(--success);
}

.flash-info {
  background: var(--info-soft);
  color: var(--info);
}

.legal {
  padding: 48px 0 72px;
  max-width: 760px;
}

.legal h1 {
  font-size: 48px;
}

.legal p,
.legal li {
  color: var(--ink-soft);
  font-size: 16px;
}

.app-main {
  padding: 36px 0 72px;
}

.page-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-end;
  margin-bottom: 28px;
}

.page-head h1 {
  font-size: 46px;
}

.eyebrow {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}

.stat {
  background: var(--vellum);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px 22px;
}

.stat b {
  display: block;
  font-family: var(--serif);
  font-size: 36px;
  line-height: 1;
  margin-bottom: 6px;
}

.stat span {
  color: var(--muted);
  font-size: 13px;
}

.empty {
  border: 1px dashed rgba(176, 137, 79, 0.55);
  border-radius: 28px;
  background:
    radial-gradient(circle at 88% 18%, rgba(143, 45, 30, 0.08), transparent 28%),
    var(--vellum);
  padding: 56px 36px;
  text-align: center;
}

.empty-seal {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  color: var(--seal);
}

.empty-seal .seal {
  width: 72px;
  height: 72px;
}

.plan-pill .seal {
  width: 18px;
  height: 18px;
  color: #e8c9b8;
}

.empty h2 {
  font-size: 36px;
}

.empty p {
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 8px auto 22px;
}

.soon-note {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}

.account-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 22px;
}

.plan-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--forest);
  color: #efe8da;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
}

.muted {
  color: var(--muted);
}

hr.hair {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 22px 0;
}

@media (max-width: 980px) {
  .hero,
  .trust-row,
  .auth-shell,
  .account-grid,
  .grid-3,
  .stats {
    grid-template-columns: 1fr;
  }

  .auth-panel {
    display: none;
  }

  .auth-form {
    padding: 28px 22px 48px;
  }

  .plan-note {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 28px 24px;
    gap: 14px;
  }

  body.nav-open .nav-links {
    display: flex;
  }

  .page-head,
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .doc-stage {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .nav-inner,
  .wrap,
  .foot-inner {
    padding-left: 18px;
    padding-right: 18px;
  }

  .hero {
    padding-top: 36px;
  }

  .empty {
    padding: 36px 18px;
  }

  .sign-block {
    grid-template-columns: 1fr;
  }

  h1 {
    font-size: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}








/* ===== AgentR Dark Theme — Auto-Injected ===== */



:root{--bg:#0f0f0f;--surface:#111111;--surface2:#181818;--border:rgba(255,255,255,0.07);--text:#e8e8e8;--muted:#888;--primary:#6366f1;--primary-light:rgba(99,102,241,0.15)}



body{display:block;background:var(--bg);color:var(--text);margin:0;padding:0;min-height:100vh;font-family:'Inter','Plus Jakarta Sans',system-ui,sans-serif}







/* Layout */



.layout{display:flex;min-height:100vh}







/* Sidebar */



.layout>.sidebar{width:240px;background:var(--surface);border-right:1px solid var(--border);padding:0;flex-shrink:0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:none}.mobile-sidebar:not(.active,.open,.show,.visible){display:none!important}



.sidebar::-webkit-scrollbar{display:none}



.sidebar-logo{display:flex;align-items:center;gap:10px;padding:20px 20px 16px;font-size:18px;font-weight:800;letter-spacing:-0.5px;color:#fff;border-bottom:1px solid var(--border);margin-bottom:8px}



.sidebar-logo .logo-icon{color:var(--primary);flex-shrink:0}



.sidebar-nav{display:flex;flex-direction:column;padding:8px 12px;gap:2px;flex:1}



.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;font-size:14px;font-weight:500;color:var(--muted);transition:background .15s,color .15s;text-decoration:none}



.nav-item:hover{background:rgba(255,255,255,0.07);color:#fff}



.nav-item.active{background:var(--primary-light);color:#a5b4fc;font-weight:600}



.nav-item svg{flex-shrink:0;opacity:.8;display:block;min-width:20px}



.nav-item.active svg{opacity:1}



.sidebar-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#444;padding:16px 12px 6px}







/* Main Content */



.main-content{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg);overflow-y:auto}







/* Top Navbar (mobile-header used as sticky topbar on all viewports) */



.mobile-header{display:flex;align-items:center;gap:12px;padding:0 24px;height:60px;background:rgba(15,15,15,0.95);border-bottom:1px solid rgba(255,255,255,0.07);position:sticky;top:0;z-index:100;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}



.mobile-header .sidebar-logo{padding:0;border:none;margin:0;font-size:16px}



.header-actions{display:flex;align-items:center;gap:10px;margin-left:auto}



.mobile-menu-btn{display:none;background:none;border:none;color:var(--muted);cursor:pointer;padding:6px;border-radius:8px;flex-shrink:0;transition:color .15s}



.mobile-menu-btn:hover{color:#fff}







/* Search */



.search-form{display:flex;align-items:center;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:24px;overflow:hidden;transition:border-color .2s}



.search-form:focus-within{border-color:rgba(99,102,241,0.5)}



.search-input{background:none;border:none;outline:none;color:var(--text);font-size:14px;padding:8px 16px;width:220px;box-shadow:none!important}



.search-input::placeholder{color:#555}



.search-form .btn-icon{width:40px;height:36px;border-radius:0;background:rgba(99,102,241,.7);border:none;color:#fff;border-left:1px solid rgba(99,102,241,.3);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}



.search-form .btn-icon:hover{background:rgba(99,102,241,.9)}







/* Buttons */



.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);color:var(--muted);cursor:pointer;transition:background .15s,color .15s;flex-shrink:0;padding:0}



.btn-icon:hover{background:rgba(255,255,255,0.12);color:#fff}



.btn-secondary{padding:7px 18px;border-radius:20px;background:transparent;border:1px solid rgba(255,255,255,0.18);color:var(--text);font-size:13px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s;white-space:nowrap}



.btn-secondary:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.3)}







/* Avatar */



.avatar{border-radius:50%;object-fit:cover;flex-shrink:0}



.avatar-link{display:flex;align-items:center}



.avatar-link .avatar{width:32px;height:32px}



.avatar-sm{width:36px;height:36px}







/* Cards */



.card{background:var(--surface2);border:1px solid var(--border);border-radius:16px;padding:24px;margin-bottom:20px;transition:transform .2s,box-shadow .2s,border-color .2s}



.card:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,0.4);border-color:rgba(99,102,241,0.25)}







/* Page content */



.page-header{padding:28px 28px 8px}



.page-header h1{font-size:22px;font-weight:700;letter-spacing:-.3px;margin:0;color:#fff}



.section{padding:8px 28px 28px}



.section-title{font-size:16px;font-weight:700;color:var(--text);margin:0 0 16px;letter-spacing:-.2px}







/* Content grid */



.grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}







/* Video / content cards */



.video-card{background:var(--surface2);border-radius:14px;overflow:hidden;border:1px solid var(--border);transition:transform .2s,box-shadow .2s,border-color .2s;cursor:pointer}



.video-card:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,0.5);border-color:rgba(99,102,241,0.25)}



.video-thumbnail-link{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:#252525}



.video-thumbnail{width:100%;height:100%;object-fit:cover;transition:transform .3s;display:block}



.video-card:hover .video-thumbnail{transform:scale(1.04)}



.video-info{display:flex;gap:10px;padding:12px}



.video-details{display:flex;flex-direction:column;gap:3px;min-width:0}



.video-title{font-size:14px;font-weight:600;color:var(--text);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .15s}



.video-title:hover{color:#a5b4fc}



.channel-name{font-size:12px;color:var(--muted);transition:color .15s;font-weight:500}



.channel-name:hover{color:#bbb}



.video-meta{font-size:12px;color:#555}







/* Empty state */



.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;color:#555;gap:12px}



.empty-state h3{font-size:18px;font-weight:700;color:#888;margin:0}



.empty-state p{font-size:14px;margin:0;color:#555}



.empty-state .btn-primary{margin-top:8px;width:auto;padding:10px 24px}







/* Toast */



#toast-container{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:10px;z-index:9999}



.toast{padding:12px 20px;border-radius:12px;font-size:14px;font-weight:600;color:#fff;opacity:0;transform:translateY(10px);transition:opacity .25s,transform .25s;background:#1e1e2e;border:1px solid rgba(255,255,255,0.1)}



.toast.show{opacity:1;transform:none}



.toast-success{background:rgba(16,185,129,0.15);border-color:rgba(16,185,129,0.35);color:#34d399}



.toast-error{background:rgba(239,68,68,0.15);border-color:rgba(239,68,68,0.35);color:#f87171}







/* Badges */



.badge{display:inline-flex;align-items:center;padding:4px 12px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}



.badge-success{background:rgba(16,185,129,.15);color:#34d399;border:1px solid rgba(16,185,129,.3)}



.badge-warning{background:rgba(245,158,11,.15);color:#fbbf24;border:1px solid rgba(245,158,11,.3)}



.badge-danger{background:rgba(239,68,68,.15);color:#f87171;border:1px solid rgba(239,68,68,.3)}



.badge-info{background:rgba(99,102,241,.15);color:#a5b4fc;border:1px solid rgba(99,102,241,.3)}







/* Animations */



@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}



.fade-in{animation:fadeIn .4s ease both}



.fade-in-delay-1{animation:fadeIn .4s ease .08s both}



.fade-in-delay-2{animation:fadeIn .4s ease .16s both}



.fade-in-delay-3{animation:fadeIn .4s ease .24s both}







/* Utilities */



.mt-4{margin-top:16px}.hide-mobile{display:block}



@media(max-width:768px){.hide-mobile{display:none!important}}







/* Responsive */



@media(max-width:900px){.sidebar{width:200px}.grid-auto{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}}



@media(max-width:768px){



  .sidebar{position:fixed;left:-260px;top:0;height:100vh;width:260px;z-index:200;transition:left .25s ease;box-shadow:4px 0 30px rgba(0,0,0,0.5)}



  .sidebar.open{left:0}



  .mobile-menu-btn{display:flex}



  .page-header{padding:16px 16px 8px}



  .section{padding:8px 16px 20px}



  .grid-auto{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}



  .search-input{width:140px}



}



@media(max-width:480px){.grid-auto{grid-template-columns:1fr 1fr;gap:10px}.video-info{padding:8px;gap:8px}.mobile-header{padding:0 14px}}







/* Stats/Metrics grid — always 4 columns on desktop, responsive below */



.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}



.stat-card{background:var(--surface2);border:1px solid var(--border);border-radius:16px;padding:20px 24px;display:flex;flex-direction:column;gap:6px;transition:transform .2s,box-shadow .2s}



.stat-card:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,0.4)}



.stat-card .stat-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--primary-light);color:var(--primary);margin-bottom:4px}



.stat-card .stat-value{font-size:28px;font-weight:800;color:#fff;letter-spacing:-1px;line-height:1}



.stat-card .stat-label{font-size:13px;color:var(--muted);font-weight:500}



@media(max-width:900px){.stats-grid{grid-template-columns:repeat(2,1fr)}}



@media(max-width:480px){.stats-grid{grid-template-columns:1fr 1fr;gap:12px}.stat-card{padding:16px}}







/* User dropdown in header — proper positioned menu, not inline text */



.user-menu{position:relative;display:flex;align-items:center;gap:8px;cursor:pointer}



.user-menu .avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid var(--border)}



.user-menu-toggle{display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;color:var(--text);font-size:14px;font-weight:600;padding:6px 10px;border-radius:10px;transition:background .15s}



.user-menu-toggle:hover{background:rgba(255,255,255,0.06)}



.user-dropdown{position:absolute;right:0;top:calc(100% + 8px);min-width:160px;background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:6px;z-index:500;box-shadow:0 8px 32px rgba(0,0,0,0.5);display:none}



.user-dropdown.show{display:block}



.user-dropdown a,.user-dropdown button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:8px;font-size:14px;font-weight:500;color:var(--text);background:none;border:none;cursor:pointer;text-decoration:none;transition:background .12s,color .12s}



.user-dropdown a:hover,.user-dropdown button:hover{background:rgba(255,255,255,0.07);color:#fff}



.user-dropdown .dropdown-divider{height:1px;background:var(--border);margin:4px 0}



.user-dropdown .logout-item,.user-dropdown a[href*="logout"]{color:#f87171}



.user-dropdown .logout-item:hover,.user-dropdown a[href*="logout"]:hover{background:rgba(239,68,68,0.1)}







/* ===== AgentR Universal Fixes (prevents common AI generation bugs) ===== */



/* FIX 1: Remove browser-default underline on ALL links — prevents underlines on nav links and buttons */



a{text-decoration:none}



a:hover{text-decoration:none}







/* FIX 2: Universal navbar layout fallback — prevents stacked/unstyled nav when AI CSS is missing */



/* Applies to any element that looks like a navbar */



nav,header,.navbar,.nav-bar,.topbar,.top-bar,.site-header,.page-header-nav,.header-nav,.main-header,.app-header{display:flex;align-items:center}



/* Nav link lists should always be horizontal */



nav ul,.navbar ul,.nav-links,.nav-items,.nav-menu,.header-links,.header-nav-links,.menu-links{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:24px}



nav ul li,.navbar ul li,.nav-links li,.nav-items li,.nav-menu li{list-style:none;margin:0;padding:0}



/* All links inside navbars/headers should never be underlined and inherit color */



nav a,header a,.navbar a,.nav-bar a,.topbar a,.top-bar a,.site-header a,.header a,.nav-links a,.nav-menu a,.nav-items a{text-decoration:none;color:inherit}



/* Buttons/CTAs that are <a> tags should never have underlines */



a.btn,a.button,a.btn-primary,a.btn-secondary,a.cta-btn,a.cta-button,a.nav-btn,a.header-btn,a.get-started,.btn>a,.button>a{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}



/* ===== AgentR Systemic Layout Fixes ===== */



/* FIX: Sidebar nav must never be position:fixed — override global nav selector */

nav.sidebar-nav,nav[class*="sidebar"]{position:static!important;top:auto!important;left:auto!important;width:auto!important;height:auto!important;z-index:auto!important;background:transparent!important;border-bottom:none!important;backdrop-filter:none!important;display:flex!important;flex-direction:column!important}



/* FIX: Dashboard/app layout enforcement — sidebar left, main content fills rest */

.layout,.dashboard-layout,.app-layout,.admin-layout{display:flex!important;min-height:100vh}

.layout>.sidebar,.layout>aside,.dashboard-sidebar,.app-sidebar,.admin-sidebar{position:sticky!important;top:0!important;height:100vh!important;flex-shrink:0!important;overflow-y:auto}

.layout>.main-content,.layout>main,.dashboard-main,.app-main{flex:1!important;min-width:0!important}



/* FIX: Mobile nav hidden on desktop — only show when toggled open */

.mobile-nav:not(.open,.active,.show,.visible){display:none!important}

.mobile-sidebar:not(.open,.active,.show,.visible){display:none!important}

.mobile-menu-btn{display:none}

@media(max-width:768px){.mobile-menu-btn{display:flex!important}}



/* FIX: User avatar in topbar — circular button, not raw letter+link text */

.user-avatar:not([class*="img"]):not(img){display:flex!important;align-items:center!important;justify-content:center!important;width:36px!important;height:36px!important;border-radius:50%!important;cursor:pointer!important;position:relative!important;flex-shrink:0!important;font-weight:700!important;font-size:14px!important}

.user-menu-dropdown,.user-avatar-dropdown{position:absolute!important;top:calc(100% + 8px)!important;right:0!important;min-width:140px!important;border-radius:10px!important;z-index:500!important;display:none!important}

.user-menu-dropdown.show,.user-avatar-dropdown.show{display:block!important}

.user-menu-dropdown a,.user-avatar-dropdown a{display:block!important;padding:10px 16px!important;font-size:14px!important;text-decoration:none!important;transition:background .15s!important}



/* ===== End AgentR Dark Theme ===== */




/* ===== AgentR Layout Alignment Guardian ===== */
/* Appended by FileGenerator — fixes common AI layout mistakes */
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden}
body{display:block!important}
.layout,.dashboard-layout,.app-layout,.admin-layout{display:flex!important;min-height:100vh}
img{max-width:100%;height:auto}
.hero:has(.hero-image),.hero:has(.hero-visual),.hero:has(.hero-img),.hero-section:has(.hero-image),.hero-section:has(.hero-visual){display:grid!important;grid-template-columns:1fr 1fr!important;gap:60px!important;align-items:center!important;max-width:1400px!important;margin-left:auto!important;margin-right:auto!important;overflow:hidden!important}
.hero>*,.hero-section>*{min-width:0;overflow-wrap:break-word}
.hero h1,.hero h2,.hero-content h1,.hero-inner h1{max-width:700px;overflow-wrap:break-word;word-break:break-word}
.hero-image img,.hero-visual img,.hero-img img{width:100%!important;height:auto!important;max-width:100%!important;border-radius:16px}
.product-grid,.products-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:24px!important;max-width:1400px;margin-left:auto;margin-right:auto}
.product-grid>*,.products-grid>*{min-width:0}
.product-card img,.products-grid img{width:100%!important;aspect-ratio:4/3!important;object-fit:cover!important;min-height:200px}
.features-grid,.feature-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:24px!important}
.features-grid>*,.feature-grid>*{min-width:0}
.stats-grid{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:20px!important}
.stats-grid>*{min-width:0}
.topbar,.top-bar,.dash-topbar{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:24px!important;flex-shrink:0!important}
.topbar .greeting h2,.topbar .greeting h3,.topbar .user-greeting{white-space:nowrap}
.topbar .search-form,.topbar .search-bar{flex:1;min-width:0;max-width:480px}
.search-form svg,.search-bar svg,.search-icon{width:20px!important;height:20px!important;flex-shrink:0!important}
.property-grid,.listing-grid,.listings-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:24px!important}
.property-grid>*,.listing-grid>*,.listings-grid>*{min-width:0}
.sidebar-nav,aside nav,[class*='sidebar'] nav{position:static!important;top:auto!important;left:auto!important;width:100%!important;height:auto!important;z-index:1!important;backdrop-filter:none!important;border-bottom:none!important;display:flex!important;flex-direction:column!important;background:transparent!important}
nav ul,nav ol,.nav-links,.nav-menu,.menu-items,.navbar-links,.nav-list{display:flex!important;align-items:center!important;gap:24px!important;list-style:none!important;margin:0!important;padding:0!important;flex-wrap:nowrap!important}
header nav a,.topbar nav a,.navbar a,.nav-links a,.nav-menu a{white-space:nowrap!important;text-decoration:none!important;padding:6px 4px!important}
aside nav ul,aside nav ol,.sidebar-nav ul,.sidebar-nav ol,[class*='sidebar'] nav ul,[class*='sidebar'] nav ol{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:2px!important;flex-wrap:nowrap!important;list-style:none!important;margin:0!important;padding:0!important}
aside nav a,.sidebar-nav a,[class*='sidebar'] nav a{white-space:normal!important;display:flex!important;align-items:center!important;gap:12px!important;padding:10px 12px!important;width:100%!important;box-sizing:border-box!important}
.hero-tags,.hero-trust,.trust-bar,.tag-list,.tag-row,.badges-row,.feature-tags,.story-tags{display:flex!important;align-items:center!important;gap:12px!important;flex-wrap:wrap!important}
.hero-tags span,.hero-trust span,.trust-bar span,.tag-list span,.story-tags span{white-space:nowrap!important;display:inline-flex!important;align-items:center!important}
@media(min-width:769px){.mobile-menu-btn,.mobile-header,.hamburger,.nav-toggle,.mobile-nav-btn,.menu-toggle{display:none!important}}
.mobile-sidebar,.mobile-menu,.mobile-nav,.mobile-drawer,.mobile-overlay{display:none!important}
.mobile-sidebar.open,.mobile-menu.open,.mobile-nav.open,.mobile-drawer.open{display:flex!important;flex-direction:column}
section,.section{overflow-x:hidden}
@media(max-width:1200px){.stats-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:900px){
  .hero:has(.hero-image),.hero:has(.hero-visual),.hero:has(.hero-img),.hero-section:has(.hero-image),.hero-section:has(.hero-visual){grid-template-columns:1fr!important;gap:40px!important;padding-top:80px!important;padding-bottom:60px!important}
  .product-grid,.products-grid,.features-grid,.feature-grid,.property-grid,.listing-grid{grid-template-columns:1fr 1fr!important}
  .stats-grid{grid-template-columns:1fr 1fr!important}
}
@media(max-width:600px){
  .product-grid,.products-grid,.features-grid,.feature-grid,.property-grid,.listing-grid{grid-template-columns:1fr!important}
  .stats-grid{grid-template-columns:1fr 1fr!important}
  .hero h1,.hero-content h1{font-size:clamp(28px,8vw,42px)!important}
}
.user-menu,.user-avatar-wrap,.user-profile,.topbar-user,.header-user,[class*='user-btn'],[class*='user-toggle']{position:relative!important}
.user-dropdown,.user-menu-dropdown,.user-avatar-dropdown,.profile-dropdown,.account-dropdown{position:absolute!important;top:calc(100% + 8px)!important;right:0!important;left:auto!important;min-width:160px!important;z-index:9999!important;display:none!important}
.user-dropdown.show,.user-menu-dropdown.show,.user-avatar-dropdown.show,.profile-dropdown.show,.account-dropdown.show{display:block!important}
.welcome-text em,.greeting em,.page-header em,.welcome em,h1 em[class*='accent'],h2 em[class*='accent'],h3 em[class*='accent']{font-style:normal!important;font-family:inherit!important;color:inherit!important;background:none!important;-webkit-text-fill-color:inherit!important}
.hero::before,.hero::after,.hero-section::before,.hero-section::after,.hero-content::before,.hero-content::after,[class*='hero']::before,[class*='hero']::after,.testimonial::before,.testimonial::after,.quote-block::before,.quote-block::after,blockquote::before,blockquote::after,[class*='testimonial']::before,[class*='testimonial']::after,[class*='quote']::before,[class*='quote']::after{font-size:min(60px,4vw)!important;opacity:0.12!important;pointer-events:none!important;z-index:0!important}
/* ===== End Layout Alignment Guardian ===== */

/* AgentR-QuoteFix: Prevent decorative pseudo-elements from covering hero sections */
.hero::before,.hero::after,.hero-section::before,.hero-section::after,.hero-content::before,.hero-content::after,.hero-inner::before,.hero-inner::after,[class*='hero']::before,[class*='hero']::after,.testimonial::before,.testimonial::after,.quote-block::before,.quote-block::after,blockquote::before,blockquote::after,[class*='testimonial']::before,[class*='testimonial']::after,[class*='quote']::before,[class*='quote']::after{font-size:min(60px,4vw)!important;opacity:0.12!important;pointer-events:none!important;z-index:0!important;}


/* ===== AgentR safety net — gap-fill only; your own CSS overrides every line below ===== */
*, *::before, *::after { box-sizing: border-box; }
* { min-width: 0; }
img, video, canvas, svg { max-width: 100%; height: auto; }
form input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]):not([type=hidden]),
form select, form textarea { width: 100%; }
button, input[type=submit], input[type=button] { cursor: pointer; }
body { overflow-x: hidden; }
/* ===== end AgentR safety net ===== */

/* ===== Online Contracts — upload + field editor ===== */
body.page-editor {
  background: #f3eee4 !important;
  color: #161412 !important;
  font-family: "Outfit", "Avenir Next", "Segoe UI", sans-serif !important;
}

body.page-editor .app-nav {
  background: rgba(243, 238, 228, 0.94);
}

.page-head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.upload-card .lede {
  max-width: 54ch;
}

.upload-drop {
  position: relative;
  margin: 8px 0 22px;
  padding: 36px 24px;
  border: 1.5px dashed rgba(176, 137, 79, 0.7);
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 18%, rgba(143, 45, 30, 0.08), transparent 32%),
    #faf6ee;
  text-align: center;
  color: #3a342c;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.upload-drop.is-over {
  border-color: #8f2d1e;
  background: #f3ddd6;
  transform: translateY(-1px);
}

.upload-drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.upload-drop-art {
  color: #8f2d1e;
  margin-bottom: 10px;
}

.upload-drop-art svg {
  width: 48px;
  height: 48px;
  max-width: none;
}

.upload-drop p {
  margin: 0;
}

.upload-drop strong {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 26px;
  font-weight: 600;
}

.upload-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.doc-list-card h2 {
  margin-bottom: 8px;
}

.doc-list {
  display: flex;
  flex-direction: column;
}

.doc-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid rgba(22, 20, 18, 0.1);
}

.doc-row:first-child {
  border-top: 0;
}

.doc-row h3 {
  font-size: 22px;
  margin: 0 0 4px;
}

.doc-row-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.doc-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(176, 137, 79, 0.16);
  color: #6b5228;
}

.doc-status.is-draft { background: rgba(61, 83, 96, 0.12); color: #3d5360; }
.doc-status.is-sent,
.doc-status.is-partially_signed { background: rgba(176, 137, 79, 0.18); color: #8a6a32; }
.doc-status.is-completed { background: #dce8e1; color: #2f6b4f; }
.doc-status.is-voided,
.doc-status.is-declined { background: #f3ddd6; color: #8f2d1e; }

.field select {
  width: 100%;
  border: 1px solid rgba(22, 20, 18, 0.16);
  background: #faf6ee;
  color: #161412;
  border-radius: 14px;
  padding: 13px 14px;
  font-family: inherit;
  font-size: 16px;
  outline: none;
}

.field select:focus {
  border-color: #243f36;
  box-shadow: 0 0 0 4px rgba(36, 63, 54, 0.12);
}

.editor-main {
  padding: 0 !important;
  flex: none !important;
}

.editor-mobile-bar {
  display: none;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(22, 20, 18, 0.1);
  background: #faf6ee;
}

.editor-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 280px;
  min-height: calc(100vh - 148px);
  background: #f3eee4;
  color: #161412;
}

.editor-recipients,
.editor-tools {
  background: #faf6ee;
  border-right: 1px solid rgba(22, 20, 18, 0.1);
  padding: 22px 18px 32px;
  overflow-y: auto;
  height: calc(100vh - 148px);
  position: sticky;
  top: 76px;
}

.editor-tools {
  border-right: 0;
  border-left: 1px solid rgba(22, 20, 18, 0.1);
}

.editor-side-head h2 {
  font-size: 28px;
  margin: 0 0 8px;
}

.editor-hint {
  color: #7a7266;
  font-size: 13px;
  margin: 0 0 16px;
  line-height: 1.45;
}

.recipient-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}

.recipient-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(22, 20, 18, 0.1);
  background: #f3eee4;
  border-radius: 14px;
  padding: 10px 10px 10px 12px;
  cursor: pointer;
  color: #161412;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.recipient-chip:hover,
.recipient-chip.is-selected {
  border-color: var(--chip-color, #8f2d1e);
  box-shadow: 0 0 0 3px var(--chip-fill, rgba(143, 45, 30, 0.18));
}

.recipient-swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--chip-color, #8f2d1e);
  flex-shrink: 0;
}

.recipient-copy {
  min-width: 0;
  flex: 1;
}

.recipient-copy b {
  display: block;
  font-size: 14px;
}

.recipient-copy small {
  display: block;
  color: #7a7266;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recipient-remove {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #7a7266;
  flex-shrink: 0;
}

.recipient-remove:hover {
  background: #f3ddd6;
  color: #8f2d1e;
}

.recipient-add {
  padding-top: 8px;
  border-top: 1px solid rgba(22, 20, 18, 0.1);
}

.form-error {
  color: #8f2d1e;
  font-size: 13px;
  margin: 8px 0 0;
}

.editor-canvas {
  background:
    radial-gradient(circle at 50% 0, rgba(176, 137, 79, 0.12), transparent 42%),
    #d8cfc0;
  overflow: auto;
  height: calc(100vh - 148px);
  min-width: 0;
}

.editor-canvas-bar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-end;
  padding: 18px 22px 0;
}

.editor-canvas-bar h1 {
  font-size: 32px;
  margin: 0;
}

.editor-canvas-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.save-pill {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2f6b4f;
  background: #dce8e1;
  border-radius: 999px;
  padding: 6px 10px;
}

.save-pill.is-busy { color: #6b5228; background: rgba(176, 137, 79, 0.22); }
.save-pill.is-error { color: #8f2d1e; background: #f3ddd6; }

.preview-toggle {
  display: inline-flex;
  background: #faf6ee;
  border: 1px solid rgba(22, 20, 18, 0.16);
  border-radius: 999px;
  padding: 3px;
}

.preview-toggle button {
  border: 0;
  background: transparent;
  color: #3a342c;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 13px;
}

.preview-toggle button.is-on {
  background: #1a2e28;
  color: #f3eee4;
}

.preview-who {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #3a342c;
}

.preview-who select {
  border: 1px solid rgba(22, 20, 18, 0.16);
  background: #faf6ee;
  border-radius: 999px;
  padding: 7px 10px;
}

.editor-hash {
  padding: 6px 22px 0;
  margin: 0;
}

.editor-scroller {
  padding: 18px 0 40px;
}

.editor-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 8px 24px 48px;
}

.editor-pages.is-placing {
  cursor: crosshair;
}

.editor-loading {
  margin: 48px auto;
  padding: 18px 22px;
  background: #faf6ee;
  border-radius: 16px;
  color: #3a342c;
}

.pdf-sheet {
  width: min(100%, 860px);
  background: #faf6ee;
  border-radius: 8px;
  box-shadow: 0 22px 48px rgba(22, 20, 18, 0.16);
  overflow: hidden;
}

.pdf-sheet-cap {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a7266;
  padding: 8px 12px;
  background: rgba(22, 20, 18, 0.04);
  border-bottom: 1px solid rgba(22, 20, 18, 0.08);
}

.pdf-sheet-stage {
  position: relative;
  background: #fff;
}

.pdf-sheet-stage canvas {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.pdf-field-layer {
  position: absolute;
  inset: 0;
}

.pdf-field {
  position: absolute;
  box-sizing: border-box;
  border: 1.5px dashed var(--field-color, #8f2d1e);
  background: var(--field-fill, rgba(143, 45, 30, 0.18));
  border-radius: 4px;
  cursor: move;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  user-select: none;
  touch-action: none;
}

.pdf-field.is-selected {
  border-style: solid;
  z-index: 4;
  box-shadow: 0 0 0 3px rgba(22, 20, 18, 0.08);
}

.pdf-field.is-preview {
  cursor: default;
  border-style: solid;
  overflow: hidden;
}

.pdf-field.is-checkbox {
  border-radius: 3px;
}

.pdf-field-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
  padding: 0 6px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.pdf-field-label.is-script {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 16px;
  font-weight: 600;
}

.preview-check {
  display: block;
  width: 12px;
  height: 12px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  background: #fff;
}

.pdf-field-handle {
  position: absolute;
  width: 9px;
  height: 9px;
  background: #fff;
  border: 1.5px solid var(--field-color, #8f2d1e);
  border-radius: 1px;
  z-index: 5;
}

.pdf-field-handle.nw { left: -5px; top: -5px; cursor: nwse-resize; }
.pdf-field-handle.ne { right: -5px; top: -5px; cursor: nesw-resize; }
.pdf-field-handle.sw { left: -5px; bottom: -5px; cursor: nesw-resize; }
.pdf-field-handle.se { right: -5px; bottom: -5px; cursor: nwse-resize; }

.tool-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}

.tool-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1px solid rgba(22, 20, 18, 0.12);
  background: #f3eee4;
  color: #161412;
  border-radius: 14px;
  padding: 11px 12px;
  cursor: grab;
  text-align: left;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.tool-chip svg {
  width: 18px;
  height: 18px;
  max-width: none;
  flex-shrink: 0;
  color: #8f2d1e;
}

.tool-chip:hover,
.tool-chip.is-armed {
  border-color: #8f2d1e;
  box-shadow: 0 8px 18px rgba(22, 20, 18, 0.08);
  transform: translateY(-1px);
}

.tool-chip.is-armed {
  background: #f3ddd6;
}

.tool-chip.is-dragging {
  opacity: 0.55;
}

.tool-chip.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.field-inspector {
  padding-top: 14px;
  border-top: 1px solid rgba(22, 20, 18, 0.1);
}

.inspector-type {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 22px;
  margin: 0 0 12px;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 14px;
  font-size: 14px;
  cursor: pointer;
}

.check-row input {
  width: auto;
}

body.page-editor .site-foot.is-compact {
  padding: 12px 0 16px;
  background: #f3eee4;
  color: #7a7266;
}

@media (max-width: 1024px) {
  .editor-mobile-bar {
    display: flex;
  }

  .editor-shell {
    grid-template-columns: 1fr;
    min-height: calc(100vh - 190px);
  }

  .editor-recipients,
  .editor-tools {
    position: fixed;
    top: 124px;
    bottom: 0;
    width: min(320px, 92vw);
    height: auto;
    z-index: 50;
    box-shadow: 0 24px 60px rgba(22, 20, 18, 0.18);
    transform: translateX(-110%);
    transition: transform 0.2s ease;
  }

  .editor-tools {
    right: 0;
    left: auto;
    transform: translateX(110%);
  }

  .editor-shell[data-open-panel="recipients"] .editor-recipients,
  .editor-shell[data-open-panel="tools"] .editor-tools {
    transform: none;
  }

  .editor-canvas {
    height: calc(100vh - 190px);
  }

  .editor-canvas-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .doc-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-head-actions {
    width: 100%;
  }
}

.field-split {
  display: grid;
  grid-template-columns: 1fr 88px;
  gap: 10px;
}

.field textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  background: var(--vellum);
  color: var(--ink);
  border-radius: 14px;
  padding: 13px 14px;
  font-family: inherit;
  font-size: 16px;
  outline: none;
  resize: vertical;
  min-height: 96px;
}

.field textarea:focus {
  border-color: var(--forest-mid);
  box-shadow: 0 0 0 4px rgba(36, 63, 54, 0.12);
}

.recipient-order {
  width: 46px;
  flex-shrink: 0;
  border: 1px solid rgba(22, 20, 18, 0.16);
  background: #faf6ee;
  border-radius: 10px;
  padding: 6px 4px;
  text-align: center;
  font-size: 13px;
  color: #161412;
}

.recipient-copy-link {
  flex-shrink: 0;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8f2d1e;
  padding: 4px 6px;
  border-radius: 999px;
}

.recipient-copy-link:hover {
  background: #f3ddd6;
}

.editor-flash {
  padding: 16px 22px 0;
}

.editor-send-error {
  padding: 8px 22px 0;
}

.sign-nav-mark {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

body.page-sign {
  background: var(--paper);
}

.sign-main {
  padding: 0 !important;
  flex: none !important;
  min-height: calc(100vh - 148px);
}

.sign-status-wrap,
.sign-consent {
  min-height: calc(100vh - 148px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px 64px;
}

.sign-consent[hidden],
.sign-shell[hidden] {
  display: none !important;
}

.sign-status-card,
.sign-consent-card {
  width: 100%;
  max-width: 560px;
}

.sign-status-card h1,
.sign-consent-card h1 {
  font-size: clamp(32px, 5vw, 46px);
}

.sign-consent-lede {
  max-width: none;
}

.sign-consent-legal {
  background: rgba(26, 46, 40, 0.05);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  margin: 8px 0 18px;
}

.sign-consent-legal p {
  margin: 0 0 10px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}

.sign-consent-legal p:last-child {
  margin-bottom: 0;
}

.sign-consent-check {
  align-items: flex-start;
  margin-bottom: 18px;
  line-height: 1.45;
}

.sign-consent-check input {
  margin-top: 3px;
}

.sign-shell {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 148px);
  background:
    radial-gradient(circle at 50% 0, rgba(176, 137, 79, 0.12), transparent 42%),
    #d8cfc0;
}

.sign-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-end;
  padding: 18px 22px 10px;
  background: rgba(250, 246, 238, 0.88);
  border-bottom: 1px solid rgba(22, 20, 18, 0.1);
  position: sticky;
  top: 76px;
  z-index: 20;
}

.sign-toolbar h1 {
  font-size: 28px;
  margin: 0;
}

.sign-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.sign-progress {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2f6b4f;
  background: #dce8e1;
  border-radius: 999px;
  padding: 6px 10px;
}

.sign-decline-btn {
  color: var(--seal);
  border-color: rgba(143, 45, 30, 0.28);
}

.sign-scroller {
  padding: 18px 0 48px;
}

.sign-pdf-field.is-locked {
  cursor: default;
  border-style: solid;
  filter: grayscale(0.35);
  opacity: 0.72;
}

.sign-pdf-field.is-active {
  cursor: pointer;
  border-style: dashed;
}

.sign-pdf-field.is-filled {
  border-style: solid;
  background: rgba(255, 255, 255, 0.55);
}

.sign-pdf-field.is-current {
  box-shadow: 0 0 0 3px rgba(143, 45, 30, 0.28);
  animation: sign-pulse 1.4s ease infinite;
}

@keyframes sign-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(143, 45, 30, 0.22); }
  50% { box-shadow: 0 0 0 6px rgba(143, 45, 30, 0.12); }
}

.sign-field-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  display: block;
}

.preview-check.is-checked {
  background: #1a2e28;
  color: #f3eee4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  border-color: #1a2e28;
}

.sign-modal {
  position: fixed;
  inset: 0;
  background: rgba(22, 20, 18, 0.46);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 80;
}

.sign-modal[hidden] {
  display: none !important;
}

.sign-modal-card {
  width: min(640px, 100%);
  background: #faf6ee;
  border: 1px solid #d9cfbe;
  border-radius: 22px;
  padding: 22px 22px 18px;
  box-shadow: var(--shadow);
  max-height: calc(100vh - 40px);
  overflow: auto;
}

.sign-modal-card-narrow {
  width: min(440px, 100%);
}

.sign-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.sign-modal-head h2 {
  font-size: 28px;
  margin: 0;
}

.sign-modal-close {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 28px;
  line-height: 1;
  border-radius: 50%;
}

.sign-modal-close:hover {
  background: rgba(22, 20, 18, 0.06);
  color: var(--ink);
}

.sig-tabs {
  display: flex;
  gap: 6px;
  background: #f3eee4;
  border: 1px solid rgba(22, 20, 18, 0.1);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 16px;
}

.sig-tab {
  flex: 1;
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 8px 10px;
  color: var(--ink-soft);
}

.sig-tab.is-on {
  background: var(--forest);
  color: var(--paper);
}

.sig-font-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sig-font {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(22, 20, 18, 0.12);
  background: #fff;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 32px;
  line-height: 1.2;
  color: var(--forest);
}

.sig-font.is-on {
  border-color: var(--seal);
  box-shadow: 0 0 0 3px rgba(143, 45, 30, 0.16);
}

#sig-draw {
  width: 100%;
  height: 220px;
  display: block;
  background: #fff;
  border: 1px dashed rgba(22, 20, 18, 0.2);
  border-radius: 14px;
  touch-action: none;
  margin: 8px 0 12px;
  cursor: crosshair;
}

.sig-upload-preview {
  margin-top: 12px;
  background: #fff;
  border-radius: 14px;
  padding: 10px;
  border: 1px solid rgba(22, 20, 18, 0.1);
}

.sig-upload-preview img {
  display: block;
  width: 100%;
  max-height: 160px;
  object-fit: contain;
}

.sign-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

@media (max-width: 768px) {
  .sign-toolbar {
    flex-direction: column;
    align-items: flex-start;
    top: 0;
  }

  .sign-toolbar h1 {
    font-size: 24px;
  }

  .field-split {
    grid-template-columns: 1fr 1fr;
  }
}