/* ══════════════════════════════════════════════════════════════
   SJS Imóveis — Complete Design System v1.0
   ══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..900;1,14..32,300..900&display=swap');

/* ──────────────────────────────────────────────────────────────
   1. DESIGN TOKENS
   ────────────────────────────────────────────────────────────── */
:root {
  /* Brand — sobrescrito por whitelabel */
  --accent:     #C9A347;
  --accent-rgb: 201, 163, 71;
  --accent-50:  rgba(201,163,71,.08);
  --accent-100: rgba(201,163,71,.15);
  --accent-600: #8B6D1F;
  --accent-700: #6B5118;

  /* Gradients */
  --gradient:       linear-gradient(135deg, #C9A347 0%, #E8C97A 100%);
  --gradient-warm:  linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
  --gradient-green: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);

  /* Neutrals */
  --white:     #ffffff;
  --black:     #0d1117;
  --gray-50:   #f8fafc;
  --gray-100:  #f1f5f9;
  --gray-200:  #e2e8f0;
  --gray-300:  #cbd5e1;
  --gray-400:  #94a3b8;
  --gray-500:  #64748b;
  --gray-600:  #475569;
  --gray-700:  #334155;
  --gray-800:  #1e293b;
  --gray-900:  #0f172a;

  /* Semantic */
  --success:      #10b981;
  --success-bg:   #d1fae5;
  --success-text: #065f46;
  --warning:      #f59e0b;
  --warning-bg:   #fef3c7;
  --warning-text: #92400e;
  --danger:       #ef4444;
  --danger-bg:    #fee2e2;
  --danger-text:  #991b1b;
  --info:         #C9A347;
  --info-bg:      rgba(201,163,71,.14);
  --info-text:    #6B5118;

  /* App Layout */
  --sidebar-w:      260px;
  --sidebar-w-sm:   72px;
  --topbar-h:       64px;
  --sidebar-bg:     #07090f;
  --sidebar-border: rgba(255,255,255,.07);
  --sidebar-text:   #6b7a99;
  --sidebar-hover:  rgba(255,255,255,.06);
  --sidebar-active: rgba(201,163,71,.18);

  /* Content */
  --content-bg: #f4f1e8;
  --card-bg:    #ffffff;
  --card-border: rgba(0,0,0,.05);

  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   .75rem;
  --text-sm:   .875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

  /* Border Radius */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 12px 24px rgba(0,0,0,.1), 0 4px 8px rgba(0,0,0,.04);
  --shadow-xl: 0 24px 40px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.06);
  --shadow-card: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.9);
  --shadow-accent: 0 8px 32px rgba(var(--accent-rgb),.35);
  --shadow-glow:   0 0 0 4px rgba(var(--accent-rgb),.18);

  /* Transitions */
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --t: 200ms;
  --t-fast: 120ms;
  --t-slow: 350ms;

  /* Z-index */
  --z-sidebar: 100;
  --z-topbar:  90;
  --z-modal:   200;
  --z-toast:   300;
  --z-dropdown: 150;
}

/* ──────────────────────────────────────────────────────────────
   2. RESET
   ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body {
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--gray-800);
  background: var(--content-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02','cv03','cv04','cv11';
}
img, video, svg { display: block; max-width: 100% }
input, button, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}
button { cursor: pointer }
a { color: inherit; text-decoration: none }
ul, ol { list-style: none }
h1,h2,h3,h4,h5,h6 { line-height: 1.2; font-weight: 700 }

/* ──────────────────────────────────────────────────────────────
   3. TYPOGRAPHY
   ────────────────────────────────────────────────────────────── */
.text-xs   { font-size: var(--text-xs) }
.text-sm   { font-size: var(--text-sm) }
.text-base { font-size: var(--text-base) }
.text-lg   { font-size: var(--text-lg) }
.text-xl   { font-size: var(--text-xl) }
.text-2xl  { font-size: var(--text-2xl) }
.text-3xl  { font-size: var(--text-3xl) }
.text-4xl  { font-size: var(--text-4xl) }
.text-5xl  { font-size: var(--text-5xl) }

.font-light    { font-weight: 300 }
.font-normal   { font-weight: 400 }
.font-medium   { font-weight: 500 }
.font-semibold { font-weight: 600 }
.font-bold     { font-weight: 700 }
.font-extrabold{ font-weight: 800 }
.font-black    { font-weight: 900 }

.text-left   { text-align: left }
.text-center { text-align: center }
.text-right  { text-align: right }

.text-primary   { color: var(--gray-900) }
.text-secondary { color: var(--gray-500) }
.text-muted     { color: var(--gray-400) }
.text-accent    { color: var(--accent) }
.text-success   { color: var(--success) }
.text-warning   { color: var(--warning) }
.text-danger    { color: var(--danger) }
.text-info      { color: var(--info) }
.text-white     { color: var(--white) }

.truncate       { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.uppercase      { text-transform: uppercase; letter-spacing: .05em }

/* ──────────────────────────────────────────────────────────────
   4. UTILITIES
   ────────────────────────────────────────────────────────────── */
.flex          { display: flex }
.flex-col      { display: flex; flex-direction: column }
.inline-flex   { display: inline-flex }
.grid          { display: grid }
.hidden        { display: none !important }
.block         { display: block }
.inline-block  { display: inline-block }

.items-start   { align-items: flex-start }
.items-center  { align-items: center }
.items-end     { align-items: flex-end }
.items-stretch { align-items: stretch }
.justify-start { justify-content: flex-start }
.justify-center{ justify-content: center }
.justify-end   { justify-content: flex-end }
.justify-between{ justify-content: space-between }
.gap-1  { gap: 4px }  .gap-2  { gap: 8px }  .gap-3  { gap: 12px }
.gap-4  { gap: 16px } .gap-5  { gap: 20px } .gap-6  { gap: 24px }
.gap-8  { gap: 32px }
.flex-1  { flex: 1 }
.flex-wrap { flex-wrap: wrap }

.w-full   { width: 100% }
.h-full   { height: 100% }
.w-auto   { width: auto }
.max-w-sm { max-width: 480px }
.max-w-md { max-width: 640px }
.max-w-lg { max-width: 800px }
.max-w-xl { max-width: 1024px }
.mx-auto  { margin-left: auto; margin-right: auto }

.relative { position: relative }
.absolute { position: absolute }
.fixed    { position: fixed }
.sticky   { position: sticky }
.overflow-hidden { overflow: hidden }
.overflow-auto   { overflow: auto }

.rounded-sm   { border-radius: var(--r-sm) }
.rounded      { border-radius: var(--r-md) }
.rounded-lg   { border-radius: var(--r-lg) }
.rounded-xl   { border-radius: var(--r-xl) }
.rounded-full { border-radius: var(--r-full) }

.p-0  { padding: 0 }    .p-2  { padding: 8px }   .p-3  { padding: 12px }
.p-4  { padding: 16px } .p-5  { padding: 20px }  .p-6  { padding: 24px }
.p-8  { padding: 32px }
.px-2 { padding-inline: 8px }  .px-3 { padding-inline: 12px }
.px-4 { padding-inline: 16px } .px-6 { padding-inline: 24px }
.py-2 { padding-block: 8px }   .py-3 { padding-block: 12px }
.py-4 { padding-block: 16px }  .py-6 { padding-block: 24px }

.m-auto { margin: auto }
.mt-2   { margin-top: 8px }  .mt-4  { margin-top: 16px }
.mb-2   { margin-bottom: 8px } .mb-4 { margin-bottom: 16px }
.mb-6   { margin-bottom: 24px }

.opacity-0  { opacity: 0 }
.opacity-50 { opacity: .5 }
.opacity-100 { opacity: 1 }

.cursor-pointer { cursor: pointer }
.select-none    { user-select: none }
.pointer-events-none { pointer-events: none }

/* ──────────────────────────────────────────────────────────────
   5. BUTTONS
   ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  transition: all var(--t) var(--ease);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-glow) }
.btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none }
.btn i { font-size: 1.1em; flex-shrink: 0 }

/* Primary */
.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-600) 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--accent-rgb),.35), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #8B6D1F 0%, var(--accent) 100%);
  box-shadow: var(--shadow-accent), inset 0 1px 0 rgba(255,255,255,.2);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); box-shadow: none }

/* Gradient */
.btn-gradient {
  background: var(--gradient);
  color: #fff;
  box-shadow: var(--shadow-accent);
}
.btn-gradient:hover { opacity: .9; transform: translateY(-1px) }

/* Secondary */
.btn-secondary {
  background: var(--white);
  color: var(--gray-700);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--gray-200);
}
.btn-secondary:hover { background: var(--gray-50); box-shadow: var(--shadow-md); border-color: var(--gray-300) }

/* Ghost */
.btn-ghost {
  color: var(--gray-600);
  background: transparent;
}
.btn-ghost:hover { background: var(--gray-100); color: var(--gray-800) }

/* Danger */
.btn-danger {
  background: var(--danger);
  color: #fff;
  box-shadow: 0 2px 8px rgba(239,68,68,.3);
}
.btn-danger:hover { background: #dc2626; transform: translateY(-1px) }

/* Success */
.btn-success {
  background: var(--success);
  color: #fff;
  box-shadow: 0 2px 8px rgba(16,185,129,.3);
}
.btn-success:hover { background: #059669; transform: translateY(-1px) }

/* Sizes */
.btn-xs  { padding: 5px 10px; font-size: var(--text-xs); border-radius: var(--r-sm) }
.btn-sm  { padding: 7px 14px; font-size: var(--text-sm) }
.btn-lg  { padding: 13px 26px; font-size: var(--text-base) }
.btn-xl  { padding: 16px 32px; font-size: var(--text-lg) }
.btn-block { width: 100%; justify-content: center }

/* Icon button */
.btn-icon {
  width: 36px; height: 36px;
  padding: 0;
  border-radius: var(--r-md);
  justify-content: center;
}
.btn-icon.btn-sm { width: 30px; height: 30px }
.btn-icon.btn-lg { width: 44px; height: 44px }

/* Loading state */
.btn.loading { pointer-events: none }
.btn.loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  display: none;
  align-items: center;
  justify-content: center;
}
.btn.loading .btn-spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .6s linear infinite;
}

/* ──────────────────────────────────────────────────────────────
   6. BADGES
   ────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0 }
.badge-success { background: var(--success-bg); color: var(--success-text) }
.badge-warning { background: var(--warning-bg); color: var(--warning-text) }
.badge-danger  { background: var(--danger-bg);  color: var(--danger-text) }
.badge-info    { background: var(--info-bg);     color: var(--info-text) }
.badge-gray    { background: var(--gray-100);    color: var(--gray-600) }
.badge-accent  { background: var(--accent-100);  color: var(--accent-600) }
.badge-outline-success { border: 1px solid var(--success); color: var(--success); background: transparent }
.badge-outline-danger  { border: 1px solid var(--danger); color: var(--danger); background: transparent }

/* ──────────────────────────────────────────────────────────────
   7. CARDS
   ────────────────────────────────────────────────────────────── */
.card {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--r-xl);
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.05), inset 0 1px 0 rgba(255,255,255,.95);
  border: 1px solid rgba(255,255,255,.7);
  overflow: hidden;
}
.card-hover {
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
  cursor: pointer;
}
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.card-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(to bottom, rgba(255,255,255,.6), rgba(255,255,255,0));
}
.card-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gray-700);
  letter-spacing: -.01em;
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--gray-400);
}
.card-body { padding: 24px }
.card-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--gray-100);
  background: var(--gray-50);
}

/* ──────────────────────────────────────────────────────────────
   8. FORMS
   ────────────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px }

.form-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--gray-700);
}
.form-label .required { color: var(--danger); margin-left: 2px }

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--r-md);
  background: var(--white);
  font-size: var(--text-sm);
  color: var(--gray-800);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
  box-shadow: 0 1px 2px rgba(0,0,0,.04) inset;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.12), 0 1px 2px rgba(0,0,0,.04) inset;
  outline: none;
}
.form-input::placeholder { color: var(--gray-400) }
.form-input.error, .form-select.error { border-color: var(--danger) }
.form-input.error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.12) }

.form-textarea { resize: vertical; min-height: 100px; line-height: 1.5 }
.form-select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 20px; padding-right: 36px }

.form-hint { font-size: var(--text-xs); color: var(--gray-400); margin-top: 4px }
.form-error { font-size: var(--text-xs); color: var(--danger); margin-top: 4px; display: flex; align-items: center; gap: 4px }

/* Input with icon */
.input-wrapper { position: relative }
.input-wrapper .form-input { padding-left: 40px }
.input-wrapper .input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  font-size: 1.1em;
  pointer-events: none;
}
.input-wrapper .input-icon-right {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  font-size: 1.1em;
}
.input-wrapper.right .form-input { padding-right: 40px }

/* Checkbox / Radio */
.form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  appearance: none;
  width: 18px; height: 18px;
  border: 2px solid var(--gray-300);
  border-radius: 4px;
  flex-shrink: 0;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  position: relative;
}
.form-check input[type="radio"] { border-radius: 50% }
.form-check input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.form-check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 6px; height: 10px;
  border: 2px solid white;
  border-left: none; border-top: none;
  transform: rotate(45deg);
}
.form-check input[type="radio"]:checked {
  border-color: var(--accent);
  background: white;
}
.form-check input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--accent);
  border-radius: 50%;
}
.form-check-label { font-size: var(--text-sm); color: var(--gray-700) }

/* Toggle Switch */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.toggle input { display: none }
.toggle-track {
  width: 44px; height: 24px;
  background: var(--gray-300);
  border-radius: var(--r-full);
  position: relative;
  transition: background var(--t) var(--ease);
}
.toggle-track::after {
  content: '';
  position: absolute;
  left: 2px; top: 2px;
  width: 20px; height: 20px;
  background: white;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t) var(--ease-bounce);
}
.toggle input:checked + .toggle-track { background: var(--accent) }
.toggle input:checked + .toggle-track::after { transform: translateX(20px) }

/* Form grid */
.form-grid { display: grid; gap: 20px }
.form-grid-2 { grid-template-columns: 1fr 1fr }
.form-grid-3 { grid-template-columns: 1fr 1fr 1fr }
@media (max-width: 640px) {
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr }
}

/* ──────────────────────────────────────────────────────────────
   9. TABLES
   ────────────────────────────────────────────────────────────── */
.table-container {
  overflow-x: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  background: var(--card-bg);
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: var(--gray-500);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.table th:hover { color: var(--gray-700) }
.table td {
  padding: 14px 16px;
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-100);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none }
.table tbody tr {
  transition: background var(--t-fast) var(--ease);
}
.table-hover tbody tr:hover { background: var(--gray-50) }
.table-compact th, .table-compact td { padding: 8px 12px }

/* ──────────────────────────────────────────────────────────────
   10. AVATAR
   ────────────────────────────────────────────────────────────── */
.avatar {
  width: 40px; height: 40px;
  border-radius: var(--r-full);
  background: var(--gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: var(--text-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover }
.avatar-xs { width: 28px; height: 28px; font-size: var(--text-xs) }
.avatar-sm { width: 34px; height: 34px; font-size: var(--text-xs) }
.avatar-lg { width: 52px; height: 52px; font-size: var(--text-lg) }
.avatar-xl { width: 72px; height: 72px; font-size: var(--text-2xl) }
.avatar-2xl{ width: 96px; height: 96px; font-size: var(--text-3xl) }

/* ──────────────────────────────────────────────────────────────
   11. MODAL
   ────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.6);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: 16px;
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.modal-overlay.show { display: flex; opacity: 1 }
.modal {
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(16px) scale(.97);
  transition: transform var(--t) var(--ease-bounce);
}
.modal-overlay.show .modal { transform: none }
.modal-sm { max-width: 380px }
.modal-lg { max-width: 720px }
.modal-xl { max-width: 960px }
.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}
.modal-title { font-size: var(--text-lg); font-weight: 700; color: var(--gray-900) }
.modal-close {
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  transition: all var(--t-fast) var(--ease);
  flex-shrink: 0;
}
.modal-close:hover { background: var(--gray-100); color: var(--gray-700) }
.modal-body { padding: 24px; overflow-y: auto; flex: 1 }
.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
  background: var(--gray-50);
}

/* ──────────────────────────────────────────────────────────────
   12. TOAST
   ────────────────────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  min-width: 300px;
  max-width: 420px;
  pointer-events: auto;
  transform: translateX(110%);
  transition: transform var(--t) var(--ease-bounce);
}
.toast.show { transform: none }
.toast.hide { transform: translateX(110%); opacity: 0 }
.toast-icon {
  width: 32px; height: 32px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.1em;
}
.toast-success .toast-icon { background: var(--success-bg); color: var(--success) }
.toast-warning .toast-icon { background: var(--warning-bg); color: var(--warning) }
.toast-danger  .toast-icon { background: var(--danger-bg);  color: var(--danger) }
.toast-info    .toast-icon { background: var(--info-bg);    color: var(--info) }
.toast-body { flex: 1 }
.toast-title { font-weight: 600; font-size: var(--text-sm); color: var(--gray-800); margin-bottom: 2px }
.toast-msg { font-size: var(--text-sm); color: var(--gray-500); line-height: 1.4 }
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--accent);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  transition: width linear;
}

/* ──────────────────────────────────────────────────────────────
   13. DROPDOWN
   ────────────────────────────────────────────────────────────── */
.dropdown { position: relative }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--gray-100);
  min-width: 180px;
  z-index: var(--z-dropdown);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px) scale(.97);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  pointer-events: none;
}
.dropdown-menu.show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: var(--text-sm);
  color: var(--gray-700);
  transition: background var(--t-fast) var(--ease);
  cursor: pointer;
}
.dropdown-item:hover { background: var(--gray-50) }
.dropdown-item.danger { color: var(--danger) }
.dropdown-item.danger:hover { background: var(--danger-bg) }
.dropdown-sep { height: 1px; background: var(--gray-100); margin: 4px 0 }

/* ──────────────────────────────────────────────────────────────
   14. TABS
   ────────────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid var(--gray-100);
  margin-bottom: 24px;
  overflow-x: auto;
}
.tab {
  padding: 10px 18px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--gray-500);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--t-fast) var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.tab:hover { color: var(--gray-700) }
.tab.active { color: var(--accent); border-color: var(--accent) }
.tab-pane { display: none }
.tab-pane.active { display: block }

/* Tabs pill variant */
.tabs-pill {
  display: flex;
  gap: 6px;
  background: var(--gray-100);
  padding: 4px;
  border-radius: var(--r-lg);
  border-bottom: none;
  margin-bottom: 20px;
}
.tabs-pill .tab {
  border-radius: var(--r-md);
  border-bottom: none;
  margin-bottom: 0;
  padding: 8px 16px;
}
.tabs-pill .tab.active {
  background: var(--white);
  color: var(--gray-800);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
}

/* ──────────────────────────────────────────────────────────────
   15. PROGRESS BAR
   ────────────────────────────────────────────────────────────── */
.progress {
  height: 6px;
  background: var(--gray-100);
  border-radius: var(--r-full);
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  border-radius: var(--r-full);
  background: var(--accent);
  transition: width var(--t-slow) var(--ease);
}
.progress-bar.success { background: var(--success) }
.progress-bar.warning { background: var(--warning) }
.progress-bar.danger  { background: var(--danger) }
.progress-bar.gradient { background: var(--gradient) }

/* ──────────────────────────────────────────────────────────────
   16. SKELETON LOADER
   ────────────────────────────────────────────────────────────── */
@keyframes shimmer {
  0% { background-position: -468px 0 }
  100% { background-position: 468px 0 }
}
.skeleton {
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
  background-size: 936px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
}
.skeleton-text { height: 14px; margin-bottom: 8px; border-radius: var(--r-sm) }
.skeleton-text.w-3\/4 { width: 75% }
.skeleton-text.w-1\/2 { width: 50% }
.skeleton-circle { border-radius: 50% }
.skeleton-card { height: 120px; border-radius: var(--r-lg) }

/* ──────────────────────────────────────────────────────────────
   17. EMPTY STATE
   ────────────────────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  gap: 16px;
}
.empty-icon {
  width: 72px; height: 72px;
  border-radius: var(--r-xl);
  background: var(--accent-50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--accent);
}
.empty-title { font-size: var(--text-xl); font-weight: 700; color: var(--gray-800) }
.empty-desc { font-size: var(--text-sm); color: var(--gray-500); max-width: 340px; line-height: 1.6 }

/* ──────────────────────────────────────────────────────────────
   18. PAGINATION
   ────────────────────────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
}
.page-btn {
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--gray-600);
  transition: all var(--t-fast) var(--ease);
  border: 1px solid transparent;
}
.page-btn:hover { background: var(--gray-100); color: var(--gray-800) }
.page-btn.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(var(--accent-rgb),.3);
}
.page-btn:disabled { opacity: .4; cursor: not-allowed }

/* ══════════════════════════════════════════════════════════════
   APP LAYOUT (Dashboard / Reseller / Admin)
   ══════════════════════════════════════════════════════════════ */

.app-layout {
  display: flex;
  min-height: 100vh;
  background: var(--content-bg);
  opacity: 0;
  transition: opacity .18s ease;
}
.app-layout.nav-ready {
  opacity: 1;
}

/* ──────────────────────────────────────────────────────────────
   19. SIDEBAR
   ────────────────────────────────────────────────────────────── */
#sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: var(--z-sidebar);
  transition: width var(--t) var(--ease);
}
.sidebar {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #07090f 0%, #0a0e18 50%, #070b14 100%);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--sidebar-border);
  box-shadow: 4px 0 24px rgba(0,0,0,.18);
}

/* Brand */
.sidebar-header {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  flex: 1;
}
.sidebar-logo {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  background: var(--gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.sidebar-logo img { width: 100%; height: 100%; object-fit: cover }
.logo-fallback {
  width: 100%; height: 100%;
  align-items: center;
  justify-content: center;
}
.logo-icon { color: white; font-weight: 900; font-size: 1.1rem }
.sidebar-brand-name {
  font-size: var(--text-base);
  font-weight: 800;
  color: white;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar-collapse-btn {
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  color: var(--sidebar-text);
  transition: all var(--t-fast) var(--ease);
  flex-shrink: 0;
}
.sidebar-collapse-btn:hover { background: var(--sidebar-hover); color: white }

/* Nav */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--sidebar-border) transparent;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  color: var(--sidebar-text);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: all var(--t-fast) var(--ease);
  position: relative;
  overflow: hidden;
}
.nav-link i { font-size: 1.15em; flex-shrink: 0; width: 20px; text-align: center }
.nav-label { flex: 1; white-space: nowrap }
.nav-link:hover { background: var(--sidebar-hover); color: rgba(255,255,255,.85) }
.nav-link.active {
  background: var(--sidebar-active);
  color: var(--accent);
  box-shadow: 0 0 24px rgba(var(--accent-rgb),.12), inset 0 0 12px rgba(var(--accent-rgb),.06);
}
.nav-link.active i { color: var(--accent); filter: drop-shadow(0 0 6px rgba(var(--accent-rgb),.5)) }
.nav-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  inset-block: 20%;
  width: 3px;
  background: linear-gradient(to bottom, transparent, var(--accent), transparent);
  border-radius: 0 var(--r-full) var(--r-full) 0;
  box-shadow: 0 0 8px rgba(var(--accent-rgb),.8);
}
.nav-sep {
  padding: 16px 12px 6px;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.2);
}
.nav-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--r-full);
  background: var(--accent);
  color: white;
  line-height: 1.4;
}

/* Sidebar footer */
.sidebar-footer {
  padding: 12px 10px;
  border-top: 1px solid var(--sidebar-border);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  padding: 8px;
  border-radius: var(--r-md);
  overflow: hidden;
  transition: background var(--t-fast) var(--ease);
}
.sidebar-user:hover { background: var(--sidebar-hover) }
.sidebar-avatar {
  position: relative;
  width: 34px; height: 34px;
  border-radius: var(--r-full);
  background: var(--gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: var(--text-sm);
  flex-shrink: 0;
  overflow: visible;
}
.sidebar-avatar img {
  width: 34px; height: 34px;
  border-radius: var(--r-full);
  object-fit: cover;
}
.avatar-dot {
  position: absolute;
  bottom: 0; right: -1px;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--sidebar-bg);
}
.avatar-dot.online { background: var(--success) }
.sidebar-user-info { flex: 1; overflow: hidden }
.user-name { display: block; font-size: var(--text-sm); font-weight: 600; color: white; truncate: true; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.user-role { display: block; font-size: 11px; color: var(--sidebar-text); margin-top: 1px }
.signout-btn {
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  color: var(--sidebar-text);
  transition: all var(--t-fast) var(--ease);
  flex-shrink: 0;
}
.signout-btn:hover { background: var(--danger-bg); color: var(--danger) }

/* Collapsed sidebar */
body.sidebar-collapsed #sidebar { width: var(--sidebar-w-sm) }
body.sidebar-collapsed .sidebar-brand-name,
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .nav-badge,
body.sidebar-collapsed .nav-sep span,
body.sidebar-collapsed .sidebar-user-info { display: none }
body.sidebar-collapsed .nav-link { justify-content: center; padding: 10px }
body.sidebar-collapsed .sidebar-user { padding: 8px; justify-content: center }
body.sidebar-collapsed .sidebar-brand { justify-content: center }
body.sidebar-collapsed .nav-link.active::before { display: none }
body.sidebar-collapsed .sidebar-brand-name { display: none }

/* ──────────────────────────────────────────────────────────────
   20. APP CONTENT + TOPBAR
   ────────────────────────────────────────────────────────────── */
.app-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: margin-left var(--t) var(--ease);
}
#topbar { flex-shrink: 0 }
.topbar {
  height: var(--topbar-h);
  background: rgba(241,244,252,.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(0,0,0,.07);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  box-shadow: 0 1px 0 rgba(255,255,255,.8), 0 4px 12px rgba(0,0,0,.04);
}
.topbar-mobile-btn {
  display: none;
  width: 36px; height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  color: var(--gray-600);
  font-size: 1.2rem;
  transition: all var(--t-fast) var(--ease);
}
.topbar-mobile-btn:hover { background: var(--gray-100) }
.topbar-left { flex: 1 }
.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar-icon-btn {
  width: 38px; height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  color: var(--gray-500);
  font-size: 1.15rem;
  transition: all var(--t-fast) var(--ease);
  position: relative;
}
.topbar-icon-btn:hover { background: var(--gray-100); color: var(--gray-700) }
.notif-badge {
  position: absolute;
  top: 4px; right: 4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--danger);
  color: white;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
}
.topbar-avatar {
  width: 36px; height: 36px;
  border-radius: var(--r-full);
  background: var(--gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: var(--text-sm);
  cursor: pointer;
  overflow: hidden;
  border: 2px solid white;
  box-shadow: var(--shadow-sm);
}
.topbar-avatar img { width: 100%; height: 100%; object-fit: cover }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--gray-500);
}
.breadcrumb a { color: var(--gray-500); transition: color var(--t-fast) var(--ease) }
.breadcrumb a:hover { color: var(--accent) }
.breadcrumb-sep { color: var(--gray-300) }
.breadcrumb-current { color: var(--gray-800); font-weight: 600 }

/* Page content */
.page-content {
  padding: 28px 28px 48px;
  flex: 1;
}
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.page-title { font-size: var(--text-2xl); font-weight: 800; color: var(--gray-900); line-height: 1.2; letter-spacing: -.03em }
.page-subtitle { font-size: var(--text-sm); color: var(--gray-400); margin-top: 4px }
.page-actions { display: flex; gap: 10px; flex-shrink: 0 }

/* ──────────────────────────────────────────────────────────────
   21. STATS CARDS
   ────────────────────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}
.stat-card {
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--r-xl);
  padding: 22px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.98);
  border: 1px solid rgba(255,255,255,.75);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.3), transparent);
  pointer-events: none;
}
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 4px 8px rgba(0,0,0,.06), 0 20px 40px rgba(0,0,0,.08) }
.stat-icon {
  width: 52px; height: 52px;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.stat-icon-purple { background: linear-gradient(135deg, #8B6D1F 0%, #E8C97A 100%); color: white }
.stat-icon-blue   { background: linear-gradient(135deg, #8B6D1F 0%, #E8C97A 100%); color: white }
.stat-icon-green  { background: linear-gradient(135deg, #059669 0%, #34d399 100%); color: white }
.stat-icon-orange { background: linear-gradient(135deg, #d97706 0%, #fbbf24 100%); color: white }
.stat-icon-pink   { background: linear-gradient(135deg, #db2777 0%, #f472b6 100%); color: white }
.stat-icon-red    { background: linear-gradient(135deg, #dc2626 0%, #f87171 100%); color: white }
.stat-body { flex: 1; min-width: 0 }
.stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--gray-900);
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -.03em;
}
.stat-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--r-full);
}
.stat-trend.up   { color: #065f46; background: #d1fae5 }
.stat-trend.down { color: #991b1b; background: #fee2e2 }
.stat-trend.neutral { color: var(--gray-500); background: var(--gray-100) }

/* ──────────────────────────────────────────────────────────────
   22. KANBAN BOARD
   ────────────────────────────────────────────────────────────── */
.kanban-wrapper {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 16px;
  min-height: 500px;
  align-items: flex-start;
}
.kanban-col {
  min-width: 280px;
  width: 280px;
  border-radius: var(--r-lg);
  background: var(--gray-100);
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-shrink: 0;
  max-height: calc(100vh - 200px);
  overflow: hidden;
}
.kanban-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 10px;
}
.kanban-col-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gray-700);
  display: flex;
  align-items: center;
  gap: 8px;
}
.kanban-col-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.kanban-col-count {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--gray-500);
  background: var(--gray-200);
  width: 22px; height: 22px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kanban-cards {
  flex: 1;
  overflow-y: auto;
  padding: 4px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 60px;
  scrollbar-width: thin;
}
.kanban-card {
  background: var(--white);
  border-radius: var(--r-md);
  padding: 14px;
  box-shadow: var(--shadow-xs);
  cursor: grab;
  transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  border: 1px solid var(--gray-100);
}
.kanban-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px) }
.kanban-card.sortable-ghost { opacity: .4 }
.kanban-card.sortable-drag {
  cursor: grabbing;
  box-shadow: var(--shadow-xl);
  transform: rotate(2deg);
}
.kanban-card-title { font-size: var(--text-sm); font-weight: 600; color: var(--gray-800); margin-bottom: 8px }
.kanban-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  color: var(--gray-500);
  flex-wrap: wrap;
}
.kanban-card-value {
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: 4px;
}
.kanban-add-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin: 0 10px 10px;
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  color: var(--gray-500);
  transition: all var(--t-fast) var(--ease);
  border: 1px dashed var(--gray-300);
}
.kanban-add-btn:hover { background: white; color: var(--accent); border-color: var(--accent) }

/* ──────────────────────────────────────────────────────────────
   23. PROPERTY CARD (site público + dashboard)
   ────────────────────────────────────────────────────────────── */
.property-card {
  background: var(--white);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.property-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg) }
.property-img {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: var(--gray-100);
}
.property-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.property-card:hover .property-img img { transform: scale(1.05) }
.property-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,.5));
}
.property-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 6px;
}
.property-badge {
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
  backdrop-filter: blur(4px);
}
.property-badge-sale { background: rgba(var(--accent-rgb),.9); color: white }
.property-badge-rent { background: rgba(16,185,129,.9); color: white }
.property-fav {
  position: absolute;
  top: 12px; right: 12px;
  width: 34px; height: 34px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  font-size: 1.1rem;
  transition: all var(--t-fast) var(--ease);
  backdrop-filter: blur(4px);
}
.property-fav:hover { background: white; color: var(--danger) }
.property-fav.active { color: var(--danger) }
.property-body { padding: 18px }
.property-price {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: 6px;
}
.property-price small { font-size: var(--text-sm); font-weight: 400; color: var(--gray-400) }
.property-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.property-location {
  font-size: var(--text-xs);
  color: var(--gray-400);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 14px;
}
.property-specs {
  display: flex;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--gray-100);
}
.property-spec {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  color: var(--gray-500);
  font-weight: 500;
}
.property-spec i { font-size: 1em; color: var(--gray-400) }

/* ══════════════════════════════════════════════════════════════
   PUBLIC SITE COMPONENTS
   ══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   24. PUBLIC NAVIGATION
   ────────────────────────────────────────────────────────────── */
.pub-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-sidebar);
  height: 68px;
  display: flex;
  align-items: center;
  transition: all var(--t) var(--ease);
}
.pub-nav.scrolled {
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-sm);
}
.pub-nav-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.pub-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-lg);
  font-weight: 900;
  letter-spacing: -.03em;
  color: white;
}
.pub-nav.scrolled .pub-nav-brand { color: var(--gray-900) }
.pub-nav-logo {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  background: var(--gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 900;
  font-size: 1rem;
}
.pub-nav-links {
  display: flex;
  gap: 4px;
  flex: 1;
}
.pub-nav-link {
  padding: 8px 14px;
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255,255,255,.85);
  transition: all var(--t-fast) var(--ease);
}
.pub-nav-link:hover { color: white; background: rgba(255,255,255,.12) }
.pub-nav.scrolled .pub-nav-link { color: var(--gray-600) }
.pub-nav.scrolled .pub-nav-link:hover { color: var(--gray-900); background: var(--gray-100) }
.pub-nav-actions { display: flex; align-items: center; gap: 10px }

/* ──────────────────────────────────────────────────────────────
   25. HERO SECTION
   ────────────────────────────────────────────────────────────── */
.hero {
  min-height: 620px;
  background: var(--gradient);
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 100px 0 60px;
}
.hero::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.04'%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");
}
.hero-bg-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  animation: float 8s ease-in-out infinite;
}
.hero-inner {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
  text-align: center;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(4px);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 700;
  color: white;
  margin-bottom: 24px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hero h1 {
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 900;
  color: white;
  margin-bottom: 20px;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.hero-sub {
  font-size: var(--text-xl);
  color: rgba(255,255,255,.8);
  margin-bottom: 40px;
  max-width: 560px;
  margin-inline: auto;
  line-height: 1.5;
}

/* Search bar */
.hero-search {
  background: white;
  border-radius: var(--r-2xl);
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  max-width: 740px;
  margin: 0 auto;
}
.hero-search-input {
  flex: 1;
  padding: 10px 16px;
  font-size: var(--text-base);
  color: var(--gray-800);
  border: none;
  outline: none;
  background: none;
}
.hero-search-input::placeholder { color: var(--gray-400) }
.hero-search-sep {
  width: 1px;
  height: 32px;
  background: var(--gray-200);
  flex-shrink: 0;
}
.hero-search-select {
  padding: 10px 14px;
  font-size: var(--text-sm);
  color: var(--gray-700);
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
  font-weight: 500;
}
.hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-top: 48px;
  flex-wrap: wrap;
}
.hero-stat { text-align: center }
.hero-stat-value { font-size: var(--text-3xl); font-weight: 900; color: white; line-height: 1 }
.hero-stat-label { font-size: var(--text-sm); color: rgba(255,255,255,.7); margin-top: 4px }

/* ──────────────────────────────────────────────────────────────
   26. SECTION
   ────────────────────────────────────────────────────────────── */
.section { padding: 80px 0 }
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
}
.section-header { text-align: center; margin-bottom: 56px }
.section-label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  margin-bottom: 12px;
  padding: 4px 12px;
  background: var(--accent-50);
  border-radius: var(--r-full);
}
.section-title {
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 900;
  color: var(--gray-900);
  letter-spacing: -.02em;
  margin-bottom: 16px;
}
.section-desc { font-size: var(--text-lg); color: var(--gray-500); max-width: 560px; margin: 0 auto; line-height: 1.6 }

/* Properties grid */
.properties-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

/* ──────────────────────────────────────────────────────────────
   27. PUBLIC FOOTER
   ────────────────────────────────────────────────────────────── */
.pub-footer {
  background: var(--gray-900);
  color: var(--gray-400);
  padding: 64px 0 32px;
}
.pub-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.pub-footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-xl);
  font-weight: 900;
  color: white;
  margin-bottom: 16px;
  letter-spacing: -.02em;
}
.pub-footer-desc { font-size: var(--text-sm); line-height: 1.7; max-width: 280px }
.pub-footer-title { font-size: var(--text-sm); font-weight: 700; color: white; margin-bottom: 20px; text-transform: uppercase; letter-spacing: .06em }
.pub-footer-links { display: flex; flex-direction: column; gap: 10px }
.pub-footer-link { font-size: var(--text-sm); color: var(--gray-400); transition: color var(--t-fast) var(--ease) }
.pub-footer-link:hover { color: white }
.pub-footer-bottom {
  padding-top: 28px;
  border-top: 1px solid var(--gray-800);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--text-sm);
  flex-wrap: wrap;
}
.pub-footer-social { display: flex; gap: 12px }
.pub-footer-social-link {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  background: var(--gray-800);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  transition: all var(--t-fast) var(--ease);
}
.pub-footer-social-link:hover { background: var(--accent); color: white }

/* WhatsApp float button */
.wpp-float {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 56px; height: 56px;
  border-radius: var(--r-full);
  background: #25D366;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 4px 20px rgba(37,211,102,.4);
  z-index: 99;
  transition: transform var(--t) var(--ease-bounce), box-shadow var(--t) var(--ease);
  animation: float 3s ease-in-out infinite;
}
.wpp-float:hover { transform: scale(1.1) translateY(-2px); box-shadow: 0 8px 32px rgba(37,211,102,.5) }

/* ══════════════════════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════════════════════ */
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes float {
  0%, 100% { transform: translateY(0) }
  50% { transform: translateY(-8px) }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px) }
  to { opacity: 1; transform: none }
}
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(24px) }
  to { opacity: 1; transform: none }
}
@keyframes fadeIn {
  from { opacity: 0 }
  to { opacity: 1 }
}
@keyframes pulse {
  0%, 100% { opacity: 1 }
  50% { opacity: .5 }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.95) }
  to { opacity: 1; transform: scale(1) }
}

.animate-fade-in    { animation: fadeIn var(--t) var(--ease) forwards }
.animate-slide-up   { animation: slideInUp var(--t) var(--ease) forwards }
.animate-slide-right{ animation: slideInRight var(--t) var(--ease) forwards }
.animate-scale      { animation: scaleIn var(--t) var(--ease-bounce) forwards }

/* Staggered animations */
.stagger > * { opacity: 0; animation: slideInUp var(--t) var(--ease) forwards }
.stagger > *:nth-child(1) { animation-delay: 0ms }
.stagger > *:nth-child(2) { animation-delay: 60ms }
.stagger > *:nth-child(3) { animation-delay: 120ms }
.stagger > *:nth-child(4) { animation-delay: 180ms }
.stagger > *:nth-child(5) { animation-delay: 240ms }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: .1s }
.reveal-delay-2 { transition-delay: .2s }
.reveal-delay-3 { transition-delay: .3s }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none }
  .stagger > * { opacity: 1; animation: none }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .pub-footer-grid { grid-template-columns: 1fr 1fr }
}

/* ── Mobile Nav Hamburger ─────────────────────────────────── */
.pub-nav-hamburger {
  display: none;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  font-size: 1.4rem;
  color: var(--gray-700);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.pub-nav-hamburger:hover { background: var(--gray-100) }
[data-theme="dark"] .pub-nav-hamburger { color: rgba(255,255,255,.85) }
[data-theme="dark"] .pub-nav-hamburger:hover { background: rgba(255,255,255,.1) }

/* Mobile menu overlay */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t) var(--ease);
}
.mobile-menu-overlay.open { opacity: 1; pointer-events: auto }

.mobile-menu {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(320px, 85vw);
  background: white;
  z-index: 1000;
  transform: translateX(100%);
  transition: transform var(--t) var(--ease);
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 32px rgba(0,0,0,.15);
}
.mobile-menu.open { transform: translateX(0) }
[data-theme="dark"] .mobile-menu { background: #141414 }

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-100);
}
[data-theme="dark"] .mobile-menu-header { border-color: rgba(255,255,255,.08) }
.mobile-menu-close {
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  color: var(--gray-500);
  font-size: 1.2rem;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.mobile-menu-close:hover { background: var(--gray-100); color: var(--gray-800) }

.mobile-menu-nav {
  flex: 1;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}
.mobile-menu-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  font-size: 1rem;
  font-weight: 500;
  color: var(--gray-700);
  transition: all var(--t-fast) var(--ease);
}
.mobile-menu-link:hover,
.mobile-menu-link:active { background: var(--gray-50); color: var(--accent) }
[data-theme="dark"] .mobile-menu-link { color: rgba(255,255,255,.8) }
[data-theme="dark"] .mobile-menu-link:hover { background: rgba(255,255,255,.06) }

.mobile-menu-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--gray-100);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
[data-theme="dark"] .mobile-menu-footer { border-color: rgba(255,255,255,.08) }

/* Mobile CTA bar (sticky bottom) */
.mobile-cta-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: white;
  border-top: 1px solid var(--gray-100);
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 98;
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
  gap: 10px;
}
[data-theme="dark"] .mobile-cta-bar { background: #141414; border-color: rgba(255,255,255,.08) }

@media (max-width: 768px) {
  :root {
    --sidebar-w: 100%;
    --topbar-h: 56px;
  }

  #sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: var(--sidebar-w-sm);
    transform: translateX(-100%);
    transition: transform var(--t) var(--ease), width var(--t) var(--ease);
    width: 260px;
  }
  body.sidebar-open #sidebar { transform: none }

  .topbar-mobile-btn { display: flex }

  .page-content { padding: 20px 16px 40px }
  .page-header { flex-direction: column; gap: 12px }
  .page-actions { width: 100% }
  .page-actions .btn { flex: 1; justify-content: center }

  .stats-grid { grid-template-columns: 1fr 1fr }

  /* Public nav mobile */
  .pub-nav-links { display: none }
  .pub-nav-actions { display: none }
  .pub-nav-hamburger { display: flex }
  .pub-nav-inner { padding: 0 16px }

  /* Hero mobile */
  .hero { min-height: auto; padding: 100px 0 48px }
  .hero h1 { font-size: 1.8rem }
  .hero-sub { font-size: var(--text-base); margin-bottom: 24px }
  .hero-search {
    flex-direction: column;
    border-radius: var(--r-xl);
    gap: 0;
    padding: 12px;
  }
  .hero-search-sep { display: none }
  .hero-search-input { width: 100%; padding: 14px 16px; font-size: 1rem }
  .hero-search-select {
    width: 100%;
    padding: 12px 16px;
    border-top: 1px solid var(--gray-100);
  }
  .hero-search .btn { width: 100%; justify-content: center; margin-top: 8px }
  .hero-stats {
    gap: 20px;
    margin-top: 32px;
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-stat { text-align: left }
  .hero-stat-value { font-size: var(--text-2xl) }

  /* Sections */
  .section { padding: 48px 0 }
  .container { padding: 0 16px }
  .section-header { margin-bottom: 32px }
  .section-title { font-size: 1.5rem }
  .section-desc { font-size: var(--text-base) }

  /* Properties grid */
  .properties-grid { grid-template-columns: 1fr; gap: 16px }
  .property-img { height: 200px }

  /* Features grid */
  .features-grid { grid-template-columns: 1fr }

  /* Testimonials */
  .testimonials-grid { grid-template-columns: 1fr }

  /* CTA */
  .cta-section { padding: 40px 20px }
  .cta-section h2 { font-size: 1.4rem }
  .cta-btns { flex-direction: column }
  .cta-btns .btn { width: 100%; justify-content: center }

  /* Footer */
  .pub-footer { padding: 40px 0 24px }
  .pub-footer-grid { grid-template-columns: 1fr; gap: 32px }
  .pub-footer-bottom { flex-direction: column; text-align: center; gap: 8px }

  /* Mobile CTA bar visible */
  .mobile-cta-bar { display: flex }
  body { padding-bottom: 72px }

  /* Forms */
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr }

  /* Property detail */
  .prop-detail-grid { grid-template-columns: 1fr !important }
  .contact-card { position: static !important }
  .gallery-main { height: 240px !important }
  .gallery-thumbs { grid-template-columns: repeat(4, 1fr) !important }
  .detail-features { grid-template-columns: repeat(3, 1fr) }

  /* Contato */
  .container > div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr }
  .modal { border-radius: var(--r-xl) var(--r-xl) 0 0; max-height: 95vh }
  .modal-overlay { align-items: flex-end; padding: 0 }
}

/* ══════════════════════════════════════════════════════════════
   UTILS / HELPERS EXTRAS
   ══════════════════════════════════════════════════════════════ */
.bg-white     { background: var(--white) }
.bg-gray-50   { background: var(--gray-50) }
.bg-gray-100  { background: var(--gray-100) }
.bg-accent    { background: var(--accent) }
.bg-gradient  { background: var(--gradient) }
.bg-success   { background: var(--success) }
.bg-danger    { background: var(--danger) }

.border       { border: 1px solid var(--gray-200) }
.border-top   { border-top: 1px solid var(--gray-200) }
.border-bottom{ border-bottom: 1px solid var(--gray-200) }

.shadow-sm  { box-shadow: var(--shadow-sm) }
.shadow-md  { box-shadow: var(--shadow-md) }
.shadow-lg  { box-shadow: var(--shadow-lg) }
.shadow-xl  { box-shadow: var(--shadow-xl) }

.no-scroll { overflow: hidden }

/* Color chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 600;
  background: var(--gray-100);
  color: var(--gray-600);
}

/* Divider */
.divider {
  height: 1px;
  background: var(--gray-100);
  margin: 20px 0;
}
.divider-vertical {
  width: 1px;
  background: var(--gray-200);
  align-self: stretch;
}

/* Alert */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  font-size: var(--text-sm);
}
.alert i { font-size: 1.1em; flex-shrink: 0; margin-top: 1px }
.alert-success { background: var(--success-bg); color: var(--success-text); border-color: rgba(16,185,129,.2) }
.alert-warning { background: var(--warning-bg); color: var(--warning-text); border-color: rgba(245,158,11,.2) }
.alert-danger  { background: var(--danger-bg);  color: var(--danger-text);  border-color: rgba(239,68,68,.2) }
.alert-info    { background: var(--info-bg);    color: var(--info-text);    border-color: rgba(59,130,246,.2) }

/* Accent glass card */
.glass-card {
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}

/* Floating action button */
.fab {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 52px; height: 52px;
  border-radius: var(--r-full);
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: var(--shadow-accent);
  z-index: 99;
  transition: all var(--t) var(--ease-bounce);
}
.fab:hover { transform: scale(1.1); box-shadow: 0 12px 40px rgba(var(--accent-rgb),.4) }

/* Scrollbar customization */
::-webkit-scrollbar { width: 5px; height: 5px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: var(--r-full) }
::-webkit-scrollbar-thumb:hover { background: var(--gray-300) }

/* Selection */
::selection { background: rgba(var(--accent-rgb),.2); color: inherit }

/* ══════════════════════════════════════════════════════════════
   SJS v2 — Modern Design Layer
   ══════════════════════════════════════════════════════════════ */

/* App content background — mesh gradient + dot grid */
.app-content {
  background-color: #f4f1e8;
  background-image:
    radial-gradient(ellipse 80% 50% at 10% 0%, rgba(201,163,71,.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 100%, rgba(139,109,31,.08) 0%, transparent 60%),
    radial-gradient(rgba(201,163,71,.18) .8px, transparent .8px);
  background-size: auto, auto, 24px 24px;
  background-attachment: local, local, local;
}

/* Table container upgrade */
.table-container {
  border-radius: var(--r-xl);
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.05), inset 0 1px 0 rgba(255,255,255,.95);
  border: 1px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
}
.table th {
  background: linear-gradient(to bottom, rgba(241,244,252,.9), rgba(241,244,252,.4));
  font-size: .68rem;
  letter-spacing: .07em;
}
.table tbody tr:hover { background: rgba(var(--accent-rgb),.06) }

/* Modal upgrade */
.modal {
  box-shadow: 0 32px 64px rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.06);
  border-radius: var(--r-2xl);
}
.modal-header {
  background: linear-gradient(to bottom, rgba(255,255,255,.6), transparent);
}
.modal-footer {
  background: rgba(248,250,252,.8);
}

/* Toast upgrade */
.toast {
  box-shadow: 0 16px 40px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.05);
  border-radius: var(--r-xl);
  backdrop-filter: blur(12px);
}

/* Sidebar logo glow */
.sidebar-logo {
  box-shadow: 0 0 20px rgba(var(--accent-rgb),.4);
}

/* Sidebar header subtle glow */
.sidebar-header {
  background: rgba(255,255,255,.02);
}

/* Nav sep styling */
.nav-sep {
  font-size: 9px;
  letter-spacing: .12em;
}

/* Page header bottom line */
.page-header {
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  margin-bottom: 28px;
}

/* Stat grid spacing */
.stats-grid {
  gap: 16px;
}

/* Badge upgrade */
.badge {
  font-size: .68rem;
  letter-spacing: .04em;
  font-weight: 700;
}

/* Dropdown upgrade */
.dropdown-menu {
  box-shadow: 0 16px 40px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06);
  border-radius: var(--r-xl);
  backdrop-filter: blur(8px);
}

/* Progress bar upgrade */
.progress {
  height: 5px;
  background: var(--gray-100);
}

/* Alert/notices */
.alert {
  border-radius: var(--r-lg);
  border: 1px solid;
  padding: 12px 16px;
  font-size: var(--text-sm);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.alert-danger { background: var(--danger-bg); border-color: rgba(239,68,68,.2); color: var(--danger-text) }
.alert-success { background: var(--success-bg); border-color: rgba(16,185,129,.2); color: var(--success-text) }
.alert-warning { background: var(--warning-bg); border-color: rgba(245,158,11,.2); color: var(--warning-text) }
.alert-info { background: var(--info-bg); border-color: rgba(59,130,246,.2); color: var(--info-text) }

/* Kanban upgrade */
.kanban-col {
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.04);
  border-radius: var(--r-xl);
}

/* Form section upgrade */
.form-section {
  background: white;
  border-radius: var(--r-xl);
  padding: 24px;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(0,0,0,.04);
  margin-bottom: 20px;
}
.form-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-100);
}
.form-section-icon {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  background: var(--accent-50);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.form-section-title {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--gray-800);
}

/* Smooth page transitions */
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(6px) }
  to   { opacity: 1; transform: translateY(0) }
}
.page-content {
  animation: pageFadeIn .3s var(--ease) both;
}

/* Glow focus ring */
*:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.3);
  border-radius: var(--r-sm);
}

/* Filter chip upgrade */
.filter-chip {
  padding: 6px 14px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--gray-200);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--gray-600);
  transition: all var(--t-fast) var(--ease);
  background: white;
}
.filter-chip.active,
.filter-chip:has(input:checked) {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-50);
  font-weight: 600;
}


/* ══════════════════════════════════════════════════════════════
   TEMA: LIGHT (DEFAULT) + DARK (TOGGLE)
   Light = off-white elegante como padrão
   Dark  = ativado via [data-theme="dark"] no <html>
   ══════════════════════════════════════════════════════════════ */

/* ── Hero: luz por padrão ──────────────────────────────────── */
.hero {
  background: linear-gradient(160deg, #FAF7F2 0%, #F2E8D5 60%, #EDE0C2 100%);
}
.hero::before { opacity: 0 }
.hero-bg-circle { background: rgba(201,163,71,.07) }

.hero-badge {
  background: rgba(201,163,71,.14);
  color: #7A5C10;
  border: 1px solid rgba(201,163,71,.35);
  backdrop-filter: none;
}
.hero h1       { color: #0A0A0A }
.hero-sub      { color: #475569 }
.hero-stat-value { color: #0A0A0A }
.hero-stat-label { color: #64748b }

/* Chips do hero */
.hero-chip {
  background: white !important;
  border-color: rgba(201,163,71,.4) !important;
  color: #7A5C10 !important;
}
.hero-chip.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: white !important;
}

/* Nav sobre hero claro */
.pub-nav-brand { color: var(--gray-900) }
.pub-nav-link  { color: var(--gray-600) }
.pub-nav-link:hover { color: var(--accent) }


/* Botão toggle de tema */
.theme-toggle {
  width: 36px; height: 36px;
  border-radius: var(--r-full);
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.06);
  color: var(--gray-700);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all .2s var(--ease);
  flex-shrink: 0;
}
.theme-toggle:hover { background: rgba(0,0,0,.1); color: var(--accent) }

/* ── Dark mode overrides ───────────────────────────────────── */
[data-theme="dark"] {
  --gray-900: #F8FAFC;
  --gray-800: #E5E7EB;
  --gray-700: #CBD5E1;
  --gray-600: #A9B3C4;
  --gray-500: #94A3B8;
  --gray-400: #7C8799;
}
[data-theme="dark"] body { background: #0A0A0A; color: var(--gray-200) }

[data-theme="dark"] .hero {
  background: linear-gradient(135deg, #1C1A14 0%, #0A0A0A 100%);
}
[data-theme="dark"] .hero::before { opacity: 1 }
[data-theme="dark"] .hero-bg-circle { background: rgba(255,255,255,.07) }
[data-theme="dark"] .hero-badge {
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.9);
  border: none;
}
[data-theme="dark"] .hero h1        { color: white }
[data-theme="dark"] .hero-sub       { color: rgba(255,255,255,.78) }
[data-theme="dark"] .hero-stat-value { color: white }
[data-theme="dark"] .hero-stat-label { color: rgba(255,255,255,.65) }

[data-theme="dark"] .hero-chip {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.82) !important;
}
[data-theme="dark"] .hero-chip.active {
  background: rgba(255,255,255,.22) !important;
  border-color: rgba(255,255,255,.35) !important;
  color: white !important;
}

[data-theme="dark"] .pub-nav-brand { color: white }
[data-theme="dark"] .pub-nav-link  { color: rgba(255,255,255,.78) }
[data-theme="dark"] .pub-nav-link:hover { color: var(--accent) }
[data-theme="dark"] .pub-nav.scrolled {
  background: rgba(10,10,10,.92);
}

[data-theme="dark"] .theme-toggle {
  border-color: rgba(255,255,255,.15);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.8);
}
[data-theme="dark"] .theme-toggle:hover {
  background: rgba(255,255,255,.14);
  color: var(--accent);
}

[data-theme="dark"] .card {
  background: #141414;
  border-color: rgba(255,255,255,.07);
}
[data-theme="dark"] .card:hover { border-color: rgba(255,255,255,.12) }

[data-theme="dark"] .section { background: #0A0A0A }
[data-theme="dark"] section[style*="background:white"],
[data-theme="dark"] section[style*="background: white"] {
  background: #111111 !important;
}
[data-theme="dark"] section[style*="background:var(--gray-50)"],
[data-theme="dark"] section[style*="background: var(--gray-50)"] {
  background: #0D0D0D !important;
}
[data-theme="dark"] .section-title { color: white }
[data-theme="dark"] .section-desc  { color: var(--gray-400) }
[data-theme="dark"] .section-label { background: rgba(201,163,71,.15); color: var(--accent) }

[data-theme="dark"] .pub-footer {
  background: #070707;
  border-top-color: rgba(255,255,255,.07);
}
[data-theme="dark"] .pub-footer-desc  { color: var(--gray-500) }
[data-theme="dark"] .pub-footer-title { color: rgba(255,255,255,.9) }
[data-theme="dark"] .pub-footer-link  { color: var(--gray-500) }
[data-theme="dark"] .pub-footer-link:hover { color: var(--accent) }
[data-theme="dark"] .pub-footer-bottom { color: var(--gray-600); border-top-color: rgba(255,255,255,.06) }

[data-theme="dark"] .property-card { background: #141414 }
[data-theme="dark"] .property-body { background: #141414 }
[data-theme="dark"] .property-price { color: var(--accent) }
[data-theme="dark"] .form-label { color: var(--gray-700) }
[data-theme="dark"] .card [style*="color:var(--gray-900)"] { color: var(--gray-900) !important }
[data-theme="dark"] .property-title { color: white }
[data-theme="dark"] .property-location { color: var(--gray-500) }
[data-theme="dark"] .feature-card { background: #141414 }
[data-theme="dark"] .feature-title { color: white }
[data-theme="dark"] .testimonial-card { background: #141414 }
[data-theme="dark"] .testimonial-text { color: var(--gray-400) }
[data-theme="dark"] .testimonial-name { color: rgba(255,255,255,.9) }
[data-theme="dark"] .filter-bar { background: #111111; border-bottom-color: rgba(255,255,255,.07) }
[data-theme="dark"] .filter-chip { background: #1a1a1a; border-color: rgba(255,255,255,.1); color: var(--gray-400) }
[data-theme="dark"] .filter-chip:hover { border-color: var(--accent); color: var(--accent) }
[data-theme="dark"] .skeleton { background: #1a1a1a }

/* ── Script de inicialização (inline no head para evitar flash) ── */
/* Lido via localStorage antes do primeiro render */