:root {
  color-scheme: light;
  --app-height: 100dvh;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  --font-sans: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --bg: #f2f7f4;
  --bg-soft: #f7faf8;
  --surface: rgba(255, 255, 255, 0.94);
  --surface-solid: #ffffff;
  --surface-muted: #f4f7f5;
  --surface-hover: #edf7f2;
  --surface-elevated: #ffffff;
  --overlay: rgba(15, 23, 42, 0.46);

  --text: #15231d;
  --text-strong: #0c1712;
  --text-soft: #5f7168;
  --text-muted: #839189;
  --text-on-accent: #ffffff;

  --border: #dfe8e3;
  --border-strong: #cbd9d1;
  --ring: rgba(15, 159, 110, 0.22);

  --primary: #0f9f6e;
  --primary-strong: #087c56;
  --primary-soft: #e1f6ed;
  --primary-softer: #f0fbf6;
  --blue: #3978f6;
  --blue-soft: #eaf1ff;
  --amber: #e99a16;
  --amber-soft: #fff5df;
  --red: #e34b56;
  --red-soft: #fff0f1;
  --violet: #7557dc;
  --violet-soft: #f0edff;

  --success: #0f9f6e;
  --warning: #d9890b;
  --danger: #d93b49;
  --info: #2e72df;

  --shadow-xs: 0 1px 2px rgba(19, 47, 35, 0.05);
  --shadow-sm: 0 8px 24px rgba(25, 65, 47, 0.07);
  --shadow-md: 0 18px 50px rgba(25, 65, 47, 0.12);
  --shadow-lg: 0 26px 80px rgba(18, 46, 34, 0.18);

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --sidebar-width: 350px;
  --sidebar-collapsed-width: 82px;
  --topbar-height: 76px;
  --bottom-nav-height: 66px;
  --content-max: 1600px;
  --touch: 44px;
  --input-height: 48px;

  --transition-fast: 160ms cubic-bezier(.2,.8,.2,1);
  --transition: 260ms cubic-bezier(.2,.8,.2,1);
  --transition-slow: 380ms cubic-bezier(.16,1,.3,1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d1511;
  --bg-soft: #111c17;
  --surface: rgba(21, 33, 27, 0.94);
  --surface-solid: #15211b;
  --surface-muted: #1b2922;
  --surface-hover: #20362b;
  --surface-elevated: #1a2921;
  --overlay: rgba(0, 0, 0, 0.66);
  --text: #e8f1ec;
  --text-strong: #ffffff;
  --text-soft: #afbeb6;
  --text-muted: #82938a;
  --border: #293a31;
  --border-strong: #3a5044;
  --ring: rgba(43, 205, 145, 0.26);
  --primary: #2bcc91;
  --primary-strong: #19ae79;
  --primary-soft: #183c2e;
  --primary-softer: #142a21;
  --blue-soft: #17294c;
  --amber-soft: #3a2c15;
  --red-soft: #3e2025;
  --violet-soft: #28213f;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 20px 56px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 28px 84px rgba(0, 0, 0, 0.46);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --bg: #0d1511;
    --bg-soft: #111c17;
    --surface: rgba(21, 33, 27, 0.94);
    --surface-solid: #15211b;
    --surface-muted: #1b2922;
    --surface-hover: #20362b;
    --surface-elevated: #1a2921;
    --overlay: rgba(0, 0, 0, 0.66);
    --text: #e8f1ec;
    --text-strong: #ffffff;
    --text-soft: #afbeb6;
    --text-muted: #82938a;
    --border: #293a31;
    --border-strong: #3a5044;
    --ring: rgba(43, 205, 145, 0.26);
    --primary: #2bcc91;
    --primary-strong: #19ae79;
    --primary-soft: #183c2e;
    --primary-softer: #142a21;
    --blue-soft: #17294c;
    --amber-soft: #3a2c15;
    --red-soft: #3e2025;
    --violet-soft: #28213f;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.22);
    --shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.22);
    --shadow-md: 0 20px 56px rgba(0, 0, 0, 0.32);
    --shadow-lg: 0 28px 84px rgba(0, 0, 0, 0.46);
  }
}
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); font-family: var(--font-sans); -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body { margin: 0; color: var(--text); background: var(--bg); font-family: var(--font-sans); font-size: 15px; line-height: 1.5; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
svg { width: 21px; height: 21px; }
[hidden] { display: none !important; }
::selection { color: var(--text-on-accent); background: var(--primary); }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

.app-body { height: var(--app-height); min-height: var(--app-height); overflow: hidden; background: radial-gradient(circle at 80% -20%, rgba(15,159,110,.12), transparent 34%), linear-gradient(135deg, var(--bg-soft), var(--bg)); }
.app-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); width: 100%; height: var(--app-height); min-height: 0; transition: grid-template-columns var(--transition); }
.workspace { display: grid; grid-template-rows: var(--topbar-height) minmax(0, 1fr); min-width: 0; min-height: 0; padding: 10px 10px 10px 0; }
.content-viewport { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; border: 1px solid color-mix(in srgb, var(--border) 72%, transparent); border-radius: 0 0 var(--radius-xl) var(--radius-xl); background: color-mix(in srgb, var(--surface) 93%, transparent); box-shadow: var(--shadow-sm); }
.view-content { position: relative; min-height: 100%; }
.view-fragment { width: min(100%, var(--content-max)); min-height: 100%; margin: 0 auto; padding: 26px clamp(18px, 2.4vw, 38px) 44px; animation: view-enter var(--transition) both; }
@keyframes view-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Sidebar */
.sidebar { position: relative; z-index: 30; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; margin: 10px; padding: 14px; border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); border-radius: var(--radius-xl); background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: var(--shadow-md); backdrop-filter: blur(18px); overflow: hidden; }
.sidebar-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 54px; padding: 0 4px 10px; }
.brand-lockup { display: flex; align-items: center; min-width: 0; gap: 11px; }
.brand-mark { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 14px; color: #fff; background: linear-gradient(145deg, #11b77d, #087c56); box-shadow: 0 10px 22px rgba(15,159,110,.28); font-size: 13px; font-weight: 900; letter-spacing: -.03em; }
.brand-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.brand-copy strong { overflow: hidden; color: var(--text-strong); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.brand-copy small { overflow: hidden; margin-top: 4px; color: var(--text-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-collapse { flex: 0 0 auto; }

.sidebar-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; padding: 4px 0 13px; border-bottom: 1px solid var(--border); }
.nav-item { position: relative; display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 10px 12px; border-radius: 13px; color: var(--text-soft); font-size: 13px; font-weight: 700; transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); }
.nav-item:hover { color: var(--text-strong); background: var(--surface-hover); transform: translateY(-1px); }
.nav-item.active { color: var(--primary-strong); background: var(--primary-soft); }
.nav-icon { display: grid; place-items: center; flex: 0 0 24px; }
.nav-icon svg { width: 20px; height: 20px; }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-count { min-width: 21px; height: 21px; margin-left: auto; padding: 0 6px; border-radius: 999px; color: var(--text-on-accent); background: var(--primary); font-size: 10px; line-height: 21px; text-align: center; }
.sidebar-nav .nav-item { justify-content: center; flex-direction: column; gap: 4px; min-width: 0; padding: 8px 3px; font-size: 10px; }
.sidebar-nav .nav-count { position: absolute; top: 2px; right: 4px; margin: 0; }
.nav-section { padding: 16px 12px 7px; color: var(--text-muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.sidebar-explorer { display: grid; grid-template-rows: auto auto auto minmax(0,1fr); min-height: 0; padding-top: 15px; }
.explorer-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 3px 11px; }
.explorer-heading h2 { margin: 1px 0 0; color: var(--text-strong); font-size: 19px; line-height: 1.2; }
.eyebrow { display: block; color: var(--primary-strong); font-size: 10px; font-weight: 900; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; }
.round-action, .icon-btn { display: inline-grid; place-items: center; flex: 0 0 auto; width: var(--touch); height: var(--touch); min-width: var(--touch); min-height: var(--touch); border: 1px solid var(--border); border-radius: 50%; color: var(--text-soft); background: var(--surface-solid); box-shadow: var(--shadow-xs); cursor: pointer; transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); }
.round-action { color: #fff; border-color: transparent; background: var(--primary); }
.round-action:hover, .icon-btn:hover { color: var(--primary-strong); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); background: var(--primary-soft); transform: translateY(-1px); }
.round-action:hover { color: #fff; background: var(--primary-strong); }
.icon-btn svg, .round-action svg { width: 20px; height: 20px; }

.search-box { position: relative; display: flex; align-items: center; min-width: 0; height: var(--input-height); border: 1px solid var(--border); border-radius: 15px; background: var(--surface-solid); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); }
.search-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }
.search-icon { display: grid; place-items: center; flex: 0 0 42px; color: var(--text-muted); }
.search-icon svg { width: 18px; height: 18px; }
.search-box input { width: 100%; min-width: 0; height: 100%; padding: 0 7px 0 0; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 13px; }
.search-box input::placeholder { color: var(--text-muted); }
.search-clear { display: none; flex: 0 0 35px; height: 35px; margin-right: 4px; border-radius: 50%; color: var(--text-muted); background: transparent; cursor: pointer; }
.search-box.has-value .search-clear, .sidebar-search:focus-within .search-clear { display: grid; place-items: center; }

.filter-chips { display: flex; align-items: center; gap: 7px; min-width: 0; overflow-x: auto; padding: 10px 1px 9px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.filter-chips::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; min-height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--text-soft); background: var(--surface-solid); font-size: 11px; font-weight: 800; white-space: nowrap; cursor: pointer; transition: all var(--transition-fast); }
.chip span { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--surface-muted); font-size: 9px; }
.chip:hover { color: var(--text-strong); border-color: var(--border-strong); background: var(--surface-hover); }
.chip.active { color: var(--primary-strong); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); background: var(--primary-soft); }
.chip.active span { color: #fff; background: var(--primary); }

.scroll-area { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.scroll-area::-webkit-scrollbar { width: 7px; height: 7px; }
.scroll-area::-webkit-scrollbar-thumb { border-radius: 99px; background: var(--border-strong); }
.quick-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 1px 8px; }
.quick-item { position: relative; display: grid; grid-template-columns: 38px minmax(0,1fr) 10px; align-items: center; gap: 10px; min-height: 74px; padding: 10px 8px; border-radius: 16px; transition: background var(--transition-fast), transform var(--transition-fast); }
.quick-item:hover { background: var(--surface-hover); transform: translateX(2px); }
.quick-item.active { background: var(--primary-soft); }
.quick-avatar, .avatar { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 13px; color: var(--primary-strong); background: linear-gradient(145deg, var(--primary-soft), var(--primary-softer)); font-size: 11px; font-weight: 900; }
.quick-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.quick-copy > span { display: flex; align-items: center; min-width: 0; gap: 6px; }
.quick-copy strong { overflow: hidden; color: var(--text-strong); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.quick-copy > span small { flex: 0 0 auto; margin-left: auto; color: var(--text-muted); font-size: 9px; }
.quick-copy b { overflow: hidden; margin-top: 3px; color: var(--text-soft); font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.quick-copy > small { overflow: hidden; margin-top: 3px; color: var(--text-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.status-active { background: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.status-draft { background: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); }
.status-expired, .status-cancelled { background: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }
.quick-empty { display: grid; place-items: center; gap: 5px; padding: 30px 12px; color: var(--text-muted); text-align: center; }
.quick-empty > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 17px; background: var(--surface-muted); }
.quick-empty strong { color: var(--text-soft); font-size: 13px; }
.quick-empty small { font-size: 10px; }

.sidebar-footer { position: relative; padding-top: 10px; border-top: 1px solid var(--border); }
.profile-chip { display: grid; grid-template-columns: 38px minmax(0,1fr) 18px; align-items: center; width: 100%; min-height: 52px; gap: 10px; padding: 7px; border-radius: 15px; color: var(--text); background: transparent; cursor: pointer; text-align: left; transition: background var(--transition-fast); }
.profile-chip:hover { background: var(--surface-hover); }
.profile-copy { display: flex; flex-direction: column; min-width: 0; }
.profile-copy strong, .profile-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-copy strong { color: var(--text-strong); font-size: 12px; }
.profile-copy small { color: var(--text-muted); font-size: 10px; }
.profile-more { color: var(--text-muted); text-align: center; }

/* Topbar */
.topbar { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; min-width: 0; min-height: var(--topbar-height); gap: 16px; padding: calc(8px + var(--safe-top)) clamp(16px,2.4vw,30px) 8px; border: 1px solid color-mix(in srgb, var(--border) 72%, transparent); border-bottom: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: color-mix(in srgb, var(--surface) 93%, transparent); backdrop-filter: blur(18px); }
.topbar-left, .topbar-actions { display: flex; align-items: center; min-width: 0; gap: 10px; }
.page-heading { min-width: 0; }
.page-heading h1 { overflow: hidden; margin: 2px 0 0; color: var(--text-strong); font-size: clamp(20px,2vw,26px); line-height: 1.1; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { flex: 0 0 auto; }
.topbar-create { min-width: auto; }
.avatar-small { width: 38px; height: 38px; border-radius: 13px; }
.mobile-back, .mobile-menu { display: none; }
.notification-btn { position: relative; }
.notification-btn > span { position: absolute; top: 8px; right: 7px; width: 7px; height: 7px; border: 2px solid var(--surface-solid); border-radius: 50%; background: var(--red); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--touch); padding: 0 17px; border: 1px solid transparent; border-radius: 13px; font-size: 13px; font-weight: 800; line-height: 1; white-space: nowrap; cursor: pointer; transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn:disabled { opacity: .55; pointer-events: none; }
.btn svg { width: 18px; height: 18px; }
.btn-primary { color: #fff; background: linear-gradient(145deg, var(--primary), var(--primary-strong)); box-shadow: 0 9px 20px rgba(15,159,110,.2); }
.btn-primary:hover { box-shadow: 0 12px 26px rgba(15,159,110,.28); }
.btn-secondary { color: var(--text-strong); border-color: var(--border); background: var(--surface-solid); box-shadow: var(--shadow-xs); }
.btn-secondary:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); background: var(--surface-hover); }
.btn-danger { color: #fff; background: var(--danger); }
.btn-ghost { color: var(--text-soft); background: transparent; }
.btn-ghost:hover { color: var(--primary-strong); background: var(--primary-soft); }
.btn-small { min-height: 36px; padding: 0 12px; border-radius: 11px; font-size: 11px; }
.btn-block { width: 100%; }
.text-link { color: var(--primary-strong); font-size: 12px; font-weight: 800; }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.text-danger { color: var(--danger) !important; }

/* Page structure */
.page-section, .page-toolbar, .panel, .metric-card, .property-card, .template-card { border: 1px solid var(--border); background: var(--surface-solid); box-shadow: var(--shadow-xs); }
.page-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 20px; padding: clamp(20px,3vw,32px); border-radius: var(--radius-lg); background: radial-gradient(circle at 85% 0, rgba(15,159,110,.17), transparent 33%), linear-gradient(135deg, var(--surface-solid), var(--primary-softer)); overflow: hidden; }
.page-hero h2, .page-toolbar h2 { margin: 4px 0 6px; color: var(--text-strong); font-size: clamp(25px,3.2vw,38px); line-height: 1.06; letter-spacing: -.045em; }
.page-hero p, .page-toolbar p { max-width: 720px; margin: 0; color: var(--text-soft); }
.hero-actions, .toolbar-actions, .detail-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.page-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; padding: 23px 25px; border-radius: var(--radius-lg); }
.page-toolbar h2 { font-size: clamp(24px,2.5vw,32px); }
.page-toolbar p { font-size: 13px; }
.page-section + .page-section { margin-top: 18px; }
.section-label { margin: 4px 0 -2px; color: var(--text-muted); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }

.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.metric-card { position: relative; min-width: 0; min-height: 174px; padding: 17px; border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.metric-card:hover { z-index: 2; border-color: color-mix(in srgb, var(--primary) 25%, var(--border)); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.metric-card.attention { border-color: color-mix(in srgb, var(--red) 28%, var(--border)); }
.metric-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.metric-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; }
.metric-icon.emerald { color: var(--primary-strong); background: var(--primary-soft); }
.metric-icon.blue { color: var(--blue); background: var(--blue-soft); }
.metric-icon.red { color: var(--red); background: var(--red-soft); }
.metric-icon.amber { color: var(--amber); background: var(--amber-soft); }
.metric-icon svg { width: 20px; height: 20px; }
.metric-card > p { margin: 14px 0 3px; color: var(--text-soft); font-size: 12px; font-weight: 700; }
.metric-card > strong { display: block; overflow: hidden; color: var(--text-strong); font-size: clamp(23px,2.5vw,31px); line-height: 1.15; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.metric-card > small { display: block; margin-top: 4px; color: var(--text-muted); font-size: 10px; }
.trend { display: inline-flex; align-items: center; min-height: 25px; padding: 0 8px; border-radius: 999px; color: var(--text-muted); background: var(--surface-muted); font-size: 9px; font-weight: 900; white-space: nowrap; }
.trend.up { color: var(--primary-strong); background: var(--primary-soft); }
.trend.down { color: var(--danger); background: var(--red-soft); }
.sparkline { position: absolute; right: 0; bottom: 0; left: 0; width: 100%; height: 44px; opacity: .8; }
.sparkline path { fill: none; stroke: var(--primary); stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.metric-card.attention .sparkline path { stroke: var(--red); }

.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(280px,.75fr); gap: 16px; align-items: start; }
.panel { min-width: 0; border-radius: var(--radius-lg); overflow: visible; }
.panel-wide { grid-row: span 2; }
.panel-header { display: flex; align-items: center; justify-content: space-between; min-height: 70px; gap: 14px; padding: 16px 19px; border-bottom: 1px solid var(--border); }
.panel-header h3 { margin: 3px 0 0; color: var(--text-strong); font-size: 17px; line-height: 1.25; }
.panel > .form-stack, .panel > .mapping-list, .panel > .note-box { margin: 18px; }

/* Tables */
.table-scroll { width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.data-table th { position: sticky; top: 0; z-index: 2; height: 43px; padding: 0 14px; color: var(--text-muted); background: var(--surface-muted); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.data-table td { height: 62px; padding: 10px 14px; border-top: 1px solid var(--border); color: var(--text-soft); vertical-align: middle; }
.data-table tbody tr { transition: background var(--transition-fast); }
.data-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-muted) 46%, transparent); }
.data-table tbody tr:hover { background: var(--surface-hover); }
.data-table tbody tr[data-open-detail] { cursor: pointer; }
.data-table td strong { display: block; color: var(--text-strong); font-size: 12px; }
.data-table td small { display: block; margin-top: 3px; color: var(--text-muted); font-size: 9px; }
.data-table td a { display: block; }
.data-table .actions-col { width: 56px; text-align: right; }
.row-alert { background: color-mix(in srgb, var(--red-soft) 62%, transparent) !important; }
.person-cell { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.person-cell .avatar { width: 34px; height: 34px; border-radius: 11px; }

.badge { display: inline-flex; align-items: center; justify-content: center; min-height: 27px; padding: 0 9px; border: 1px solid transparent; border-radius: 999px; font-size: 9px; font-weight: 900; white-space: nowrap; }
.badge-success { color: var(--primary-strong); border-color: color-mix(in srgb, var(--primary) 18%, transparent); background: var(--primary-soft); }
.badge-warning { color: #9b6200; border-color: color-mix(in srgb, var(--amber) 22%, transparent); background: var(--amber-soft); }
.badge-danger { color: var(--danger); border-color: color-mix(in srgb, var(--red) 20%, transparent); background: var(--red-soft); }
.badge-info { color: var(--blue); border-color: color-mix(in srgb, var(--blue) 20%, transparent); background: var(--blue-soft); }
.badge-neutral { color: var(--text-soft); border-color: var(--border); background: var(--surface-muted); }

.search-filter-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 11px; border: 1px solid var(--border); border-radius: 17px; background: var(--surface-solid); }
.search-filter-bar .search-box { flex: 1 1 280px; }
.search-filter-bar .filter-chips { flex: 0 1 auto; padding: 0; }
.filter-button { display: none; }
.filter-drawer { padding: 12px; }

/* Forms */
.form-panel { overflow: hidden; }
.form-stack { display: grid; gap: 15px; }
.form-grid { display: grid; gap: 14px; }
.form-grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.form-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.form-grid.four { grid-template-columns: repeat(4,minmax(0,1fr)); }
.field { display: grid; align-content: start; gap: 7px; min-width: 0; color: var(--text); }
.field > span:first-child { color: var(--text-soft); font-size: 11px; font-weight: 800; }
.field input, .field select, .field textarea, .code-editor { width: 100%; min-width: 0; min-height: var(--input-height); padding: 11px 13px; border: 1px solid var(--border); border-radius: 13px; outline: 0; color: var(--text); background: var(--surface-solid); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); }
.field textarea, .code-editor { min-height: 110px; resize: vertical; line-height: 1.55; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--border-strong); }
.field input:focus, .field select:focus, .field textarea:focus, .code-editor:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 15%, transparent); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); }
.field small { color: var(--text-muted); font-size: 10px; }
.field small a { color: var(--primary-strong); font-weight: 800; }
.field-span { grid-column: 1 / -1; }
.input-prefix, .input-action { display: flex; align-items: center; min-width: 0; min-height: var(--input-height); border: 1px solid var(--border); border-radius: 13px; background: var(--surface-solid); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.input-prefix:focus-within, .input-action:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }
.input-prefix b { flex: 0 0 auto; padding-left: 13px; color: var(--text-muted); font-size: 11px; }
.input-prefix input, .input-action input { min-height: 46px; border: 0; box-shadow: none !important; background: transparent; }
.input-action .icon-btn { width: 38px; height: 38px; min-width: 38px; min-height: 38px; margin-right: 4px; border: 0; box-shadow: none; background: transparent; }
.form-section { padding: 23px 25px; border-bottom: 1px solid var(--border); }
.form-section:last-of-type { border-bottom: 0; }
.form-section > header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.form-section > header h3 { margin: 0; color: var(--text-strong); font-size: 16px; }
.form-section > header p { margin: 3px 0 0; color: var(--text-muted); font-size: 11px; }
.section-number { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 12px; color: var(--primary-strong); background: var(--primary-soft); font-size: 10px; font-weight: 900; }
.form-actions { position: sticky; bottom: 0; z-index: 8; display: flex; justify-content: flex-end; gap: 9px; padding: 14px 25px calc(14px + var(--safe-bottom)); border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(15px); }

.check-control { display: inline-flex; align-items: flex-start; gap: 10px; min-height: 38px; color: var(--text-soft); font-size: 12px; cursor: pointer; }
.check-control input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.check-control > span { position: relative; display: grid; place-items: center; flex: 0 0 21px; width: 21px; height: 21px; margin-top: 1px; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface-solid); transition: all var(--transition-fast); }
.check-control input:checked + span { border-color: var(--primary); background: var(--primary); }
.check-control input:checked + span::after { content: ""; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg) translateY(-1px); }
.switch-line { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.switch-line > input { position: absolute; opacity: 0; pointer-events: none; }
.switch { position: relative; flex: 0 0 46px; width: 46px; height: 26px; border-radius: 999px; background: var(--border-strong); cursor: pointer; transition: background var(--transition-fast); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(0,0,0,.2); transition: transform var(--transition-fast); }
.switch-line input:checked + .switch { background: var(--primary); }
.switch-line input:checked + .switch::after { transform: translateX(20px); }
.switch-group { display: grid; gap: 10px; }

/* Cards and detail */
.property-grid, .template-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.property-card, .template-card { min-width: 0; border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.property-card:hover, .template-card:hover { border-color: color-mix(in srgb, var(--primary) 25%, var(--border)); box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.property-visual { position: relative; min-height: 112px; padding: 16px; background: linear-gradient(145deg, var(--primary-softer), var(--surface-muted)); overflow: hidden; }
.property-visual::after { content: ""; position: absolute; right: -24px; bottom: -36px; width: 120px; height: 120px; border: 18px solid color-mix(in srgb, var(--primary) 12%, transparent); border-radius: 36px; transform: rotate(24deg); }
.property-code { display: inline-flex; align-items: center; min-height: 27px; padding: 0 9px; border-radius: 999px; color: var(--primary-strong); background: var(--surface-solid); font-size: 9px; font-weight: 900; }
.building-art { position: absolute; right: 18px; bottom: 12px; width: 72px; height: 58px; opacity: .65; }
.property-body { padding: 16px; }
.property-body h3, .template-card h3 { margin: 0; color: var(--text-strong); font-size: 16px; }
.property-body p, .template-card p { margin: 5px 0 12px; color: var(--text-soft); font-size: 11px; }
.property-meta, .template-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 10px; }
.template-card { padding: 17px; }
.template-card.emerald { border-top: 3px solid var(--primary); }
.template-card.blue { border-top: 3px solid var(--blue); }
.template-card.amber { border-top: 3px solid var(--amber); }

.detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 16px; padding: 23px 25px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: radial-gradient(circle at 92% 0, rgba(15,159,110,.14), transparent 28%), var(--surface-solid); box-shadow: var(--shadow-xs); }
.detail-title { display: flex; align-items: flex-start; gap: 13px; min-width: 0; }
.detail-title h2 { margin: 3px 0 5px; color: var(--text-strong); font-size: clamp(24px,3vw,34px); letter-spacing: -.04em; }
.detail-title p { margin: 0; color: var(--text-soft); }
.detail-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(280px,.7fr); gap: 16px; align-items: start; }
.detail-main { min-width: 0; }
.detail-metrics, .mini-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.detail-metrics > div, .mini-metrics > div { padding: 14px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-muted); }
.detail-metrics small, .mini-metrics small { display: block; color: var(--text-muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.detail-metrics strong, .mini-metrics strong { display: block; margin-top: 4px; color: var(--text-strong); font-size: 15px; }
.detail-list { display: grid; gap: 0; }
.detail-list > div { display: grid; grid-template-columns: minmax(115px,.34fr) minmax(0,1fr); gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.detail-list > div:last-child { border-bottom: 0; }
.detail-list dt { color: var(--text-muted); font-size: 10px; font-weight: 800; }
.detail-list dd { margin: 0; color: var(--text-strong); font-size: 12px; }
.detail-timeline { min-width: 0; }
.timeline { display: grid; gap: 0; margin: 0; padding: 6px 19px 17px; list-style: none; }
.timeline li { position: relative; display: grid; grid-template-columns: 14px minmax(0,1fr); gap: 10px; min-height: 54px; padding: 9px 0; }
.timeline li:not(:last-child)::after { content: ""; position: absolute; top: 28px; bottom: -8px; left: 5px; width: 1px; background: var(--border); }
.timeline-dot { position: relative; z-index: 1; width: 11px; height: 11px; margin-top: 4px; border: 3px solid var(--primary-soft); border-radius: 50%; background: var(--primary); }
.timeline strong { display: block; color: var(--text-strong); font-size: 11px; }
.timeline small { display: block; margin-top: 3px; color: var(--text-muted); font-size: 9px; }

.payment-list { display: grid; padding: 7px 17px 17px; }
.payment-item { display: grid; grid-template-columns: 43px minmax(0,1fr) auto; align-items: center; gap: 11px; min-height: 65px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.payment-item:last-child { border-bottom: 0; }
.payment-item > div { min-width: 0; }
.payment-item > div strong, .payment-item > div small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.payment-item > div strong { color: var(--text-strong); font-size: 11px; }
.payment-item > div small { margin-top: 3px; color: var(--text-muted); font-size: 9px; }
.date-tile { display: grid; place-items: center; width: 43px; height: 45px; border-radius: 12px; color: var(--primary-strong); background: var(--primary-soft); line-height: 1; }
.date-tile strong { font-size: 15px; }
.date-tile small { margin-top: -4px; font-size: 8px; font-weight: 900; }

/* Editor, settings and import */
.template-editor { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 16px; align-items: start; }
.editor-main { min-width: 0; }
.code-editor { min-height: 550px; font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap; }
.variable-panel { position: sticky; top: 0; overflow: hidden; }
.variable-list { display: grid; max-height: 620px; overflow-y: auto; padding: 10px; }
.variable-list button { width: 100%; min-height: 38px; padding: 8px 10px; border-radius: 10px; color: var(--primary-strong); background: transparent; font-family: var(--font-mono); font-size: 10px; text-align: left; cursor: pointer; }
.variable-list button:hover { background: var(--primary-soft); }
.settings-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(260px,.7fr); gap: 16px; align-items: start; }
.preference-panel { padding: 19px; }
.preference-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.preference-row:last-child { border-bottom: 0; }
.preference-row strong { display: block; color: var(--text-strong); font-size: 12px; }
.preference-row p { margin: 3px 0 0; color: var(--text-muted); font-size: 10px; }
.import-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,.78fr); gap: 16px; align-items: start; }
.import-panel { overflow: hidden; }
.upload-zone { display: grid; place-items: center; min-height: 210px; gap: 8px; padding: 24px; border: 1.5px dashed var(--border-strong); border-radius: 18px; color: var(--text-soft); background: var(--surface-muted); text-align: center; cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast); }
.upload-zone:hover { border-color: var(--primary); background: var(--primary-softer); }
.upload-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-zone strong { color: var(--text-strong); }
.upload-zone small { max-width: 360px; color: var(--text-muted); font-size: 10px; }
.mapping-list { display: grid; gap: 4px; }
.mapping-list > div { display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: 8px; min-height: 42px; padding: 7px 9px; border-radius: 11px; }
.mapping-list > div:nth-child(odd) { background: var(--surface-muted); }
.mapping-list span { display: grid; place-items: center; color: var(--primary); }
.mapping-list svg { width: 16px; height: 16px; }
.mapping-list p { margin: 0; color: var(--text-soft); font-size: 11px; }
.note-box { padding: 14px; border: 1px solid color-mix(in srgb, var(--amber) 22%, var(--border)); border-radius: 14px; color: #8c5a08; background: var(--amber-soft); }
.note-box strong { display: block; font-size: 11px; }
.note-box p { margin: 4px 0 0; font-size: 10px; }

/* Empty, alerts and loading */
.empty-state { display: grid; place-items: center; min-height: 320px; padding: 36px 20px; color: var(--text-soft); text-align: center; }
.empty-state.compact { min-height: 220px; }
.empty-state h3, .empty-state h4, .empty-state h1 { margin: 10px 0 4px; color: var(--text-strong); }
.empty-state p { max-width: 460px; margin: 0 0 16px; color: var(--text-muted); }
.empty-illustration { position: relative; width: 84px; height: 68px; }
.empty-illustration::before, .empty-illustration::after, .empty-illustration span { content: ""; position: absolute; border: 2px solid color-mix(in srgb, var(--primary) 28%, var(--border)); border-radius: 16px; background: var(--primary-softer); }
.empty-illustration::before { inset: 10px 23px 2px 4px; transform: rotate(-9deg); }
.empty-illustration::after { inset: 3px 4px 9px 25px; transform: rotate(8deg); }
.empty-illustration span { z-index: 2; inset: 8px 13px; background: var(--surface-solid); }
.empty-inline { padding: 30px 12px; color: var(--text-muted); font-size: 11px; text-align: center; }
.alert { margin-bottom: 15px; padding: 13px 15px; border: 1px solid var(--border); border-radius: 13px; font-size: 11px; }
.alert-success { color: var(--primary-strong); border-color: color-mix(in srgb, var(--primary) 25%, var(--border)); background: var(--primary-soft); }
.alert-warning { color: #8c5a08; border-color: color-mix(in srgb, var(--amber) 25%, var(--border)); background: var(--amber-soft); }
.alert-danger { color: var(--danger); border-color: color-mix(in srgb, var(--red) 25%, var(--border)); background: var(--red-soft); }
.skeleton-view { padding: 8px 0; }
.skeleton { position: relative; overflow: hidden; border-radius: 12px; background: var(--surface-muted); }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface-solid) 72%, transparent), transparent); transform: translateX(-100%); animation: shimmer 1.35s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.skeleton-title { width: 260px; height: 36px; margin-bottom: 16px; }
.skeleton-toolbar { height: 68px; margin-bottom: 15px; }
.skeleton-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.skeleton-card { height: 160px; }
.skeleton-table { height: 320px; margin-top: 15px; }

/* Dropdowns, drawers, modals, toasts */
.dropdown-menu { position: fixed; z-index: 300; display: none; min-width: 190px; padding: 7px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-elevated); box-shadow: var(--shadow-lg); }
.dropdown-menu.open { display: grid; animation: pop var(--transition-fast) both; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.dropdown-menu a, .dropdown-menu button { display: flex; align-items: center; width: 100%; min-height: 39px; padding: 0 11px; border-radius: 10px; color: var(--text-soft); background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; text-align: left; }
.dropdown-menu a:hover, .dropdown-menu button:hover { color: var(--text-strong); background: var(--surface-hover); }
.dropdown-up { position: absolute; right: 0; bottom: 60px; left: auto !important; top: auto !important; }

.drawer-backdrop, .modal-backdrop { position: fixed; inset: 0; z-index: 210; background: var(--overlay); opacity: 0; pointer-events: none; transition: opacity var(--transition); backdrop-filter: blur(4px); }
.drawer { position: fixed; z-index: 220; visibility: hidden; background: var(--surface-elevated); box-shadow: var(--shadow-lg); transition: transform var(--transition-slow), visibility 0s var(--transition-slow); }
.drawer.open { visibility: visible; transform: translate3d(0,0,0); transition-delay: 0s; }
.drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; }
.mobile-drawer { top: 0; bottom: 0; left: 0; width: min(92vw, 390px); padding: calc(14px + var(--safe-top)) 14px calc(14px + var(--safe-bottom)) calc(14px + var(--safe-left)); transform: translate3d(-105%,0,0); }
.drawer-handle { display: none; width: 42px; height: 4px; margin: 2px auto 12px; border-radius: 99px; background: var(--border-strong); }
.drawer-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.drawer-body { height: calc(100% - 69px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.drawer-nav { display: grid; gap: 4px; padding: 14px 0; }
.drawer-nav .nav-item { min-height: 50px; font-size: 13px; }
.mobile-user-card { display: flex; align-items: center; gap: 11px; margin-top: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-muted); }
.mobile-user-card div { min-width: 0; }
.mobile-user-card strong, .mobile-user-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-user-card strong { font-size: 12px; }
.mobile-user-card small { color: var(--text-muted); font-size: 10px; }

.modal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; visibility: hidden; padding: max(18px,var(--safe-top)) max(18px,var(--safe-right)) max(18px,var(--safe-bottom)) max(18px,var(--safe-left)); pointer-events: none; }
.modal.open { visibility: visible; pointer-events: auto; }
.modal.open .modal-backdrop { opacity: 1; pointer-events: auto; }
.modal-panel { position: relative; z-index: 220; width: min(100%, 570px); max-height: min(88vh, 780px); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface-elevated); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(18px) scale(.97); transition: transform var(--transition-slow), opacity var(--transition); }
.modal.open .modal-panel { opacity: 1; transform: translateY(0) scale(1); }
.modal-header, .modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 19px; }
.modal-header { border-bottom: 1px solid var(--border); }
.modal-header h2 { margin: 2px 0 0; color: var(--text-strong); font-size: 19px; }
.modal-body { max-height: calc(min(88vh,780px) - 150px); overflow-y: auto; padding: 19px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.modal-body > p { margin: 0; color: var(--text-soft); }
.modal-footer { justify-content: flex-end; border-top: 1px solid var(--border); }
.modal-handle { display: none; }

.toast-stack { position: fixed; z-index: 600; right: calc(18px + var(--safe-right)); bottom: calc(18px + var(--safe-bottom)); display: grid; width: min(390px, calc(100vw - 36px)); gap: 9px; pointer-events: none; }
.toast { display: grid; grid-template-columns: 12px minmax(0,1fr) 30px; align-items: start; gap: 10px; padding: 13px 12px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-elevated); box-shadow: var(--shadow-md); pointer-events: auto; animation: toast-in var(--transition-slow) both; }
@keyframes toast-in { from { opacity: 0; transform: translateX(18px) scale(.98); } to { opacity: 1; transform: translateX(0) scale(1); } }
.toast.closing { opacity: 0; transform: translateX(15px); transition: var(--transition); }
.toast-icon { width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--info); box-shadow: 0 0 0 4px var(--blue-soft); }
.toast-success .toast-icon { background: var(--success); box-shadow: 0 0 0 4px var(--primary-soft); }
.toast-warning .toast-icon { background: var(--warning); box-shadow: 0 0 0 4px var(--amber-soft); }
.toast-danger .toast-icon { background: var(--danger); box-shadow: 0 0 0 4px var(--red-soft); }
.toast strong { display: block; color: var(--text-strong); font-size: 11px; }
.toast p { margin: 2px 0 0; color: var(--text-soft); font-size: 10px; }
.toast button { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--text-muted); background: transparent; cursor: pointer; }
.toast button:hover { background: var(--surface-muted); }

/* Mobile navigation and FAB */
.bottom-nav, .fab { display: none; }

/* Auth and installer */
.auth-body { min-height: var(--app-height, 100dvh); overflow-x: hidden; background: radial-gradient(circle at 15% 0, rgba(15,159,110,.18), transparent 30%), radial-gradient(circle at 90% 100%, rgba(57,120,246,.12), transparent 34%), var(--bg); }
.auth-shell { display: grid; place-items: center; min-height: var(--app-height, 100dvh); padding: max(24px,var(--safe-top)) max(18px,var(--safe-right)) max(24px,var(--safe-bottom)) max(18px,var(--safe-left)); }
.auth-card { width: min(100%, 450px); padding: clamp(22px,4vw,34px); border: 1px solid var(--border); border-radius: var(--radius-xl); background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: var(--shadow-lg); backdrop-filter: blur(18px); }
.install-card { width: min(100%, 720px); }
.auth-header { margin: 27px 0 20px; }
.auth-header h1 { margin: 0; color: var(--text-strong); font-size: clamp(27px,5vw,36px); letter-spacing: -.045em; }
.auth-header p { margin: 6px 0 0; color: var(--text-soft); }
.auth-footer { display: flex; justify-content: center; gap: 8px; margin-top: 20px; color: var(--text-muted); font-size: 9px; }

/* Print compatibility helpers */
.contract { color: var(--text); }
.document { background: #fff; }
.signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.signature-date { text-align: center; }
.contract-meta { display: flex; justify-content: space-between; }
.legal-note { color: var(--text-soft); }

/* Collapsed sidebar */
.sidebar-collapsed .app-shell { grid-template-columns: var(--sidebar-collapsed-width) minmax(0,1fr); }
.sidebar-collapsed .sidebar { padding-inline: 10px; }
.sidebar-collapsed .brand-copy, .sidebar-collapsed .sidebar-explorer, .sidebar-collapsed .profile-copy, .sidebar-collapsed .profile-more, .sidebar-collapsed .nav-label, .sidebar-collapsed .nav-count { display: none; }
.sidebar-collapsed .sidebar-header { justify-content: center; flex-direction: column; }
.sidebar-collapsed .sidebar-collapse svg { transform: rotate(180deg); }
.sidebar-collapsed .sidebar-nav { grid-template-columns: 1fr; border-bottom: 0; }
.sidebar-collapsed .sidebar-nav .nav-item { min-height: 48px; }
.sidebar-collapsed .profile-chip { grid-template-columns: 1fr; justify-items: center; }
.sidebar-collapsed .sidebar-footer { border-top: 0; }

.sidebar-admin-links { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; margin-bottom: 8px; }
.admin-shortcut { display: grid; place-items: center; min-width: 0; min-height: 46px; gap: 2px; border-radius: 12px; color: var(--text-muted); transition: color var(--transition-fast), background var(--transition-fast); }
.admin-shortcut:hover, .admin-shortcut.active { color: var(--primary-strong); background: var(--primary-soft); }
.admin-shortcut span { display: grid; place-items: center; }
.admin-shortcut svg { width: 17px; height: 17px; }
.admin-shortcut small { overflow: hidden; width: 100%; font-size: 7px; font-weight: 800; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-collapsed .sidebar-admin-links { grid-template-columns: 1fr; }
.sidebar-collapsed .admin-shortcut small { display: none; }
.search-filter-bar .search-box > span:not(.search-icon) { display: grid; place-items: center; flex: 0 0 42px; color: var(--text-muted); }
.search-filter-bar .search-box > span svg { width: 18px; height: 18px; }
.inline-form { display: inline-flex; }
.property-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 16px 15px; }
.mini-metrics { margin-bottom: 14px; }
.mini-metrics > article { display: flex; align-items: center; gap: 11px; padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-solid); box-shadow: var(--shadow-xs); }
.mini-metrics > article div { min-width: 0; }
.mini-metrics > article small { display: block; color: var(--text-muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.mini-metrics > article strong { display: block; overflow: hidden; margin-top: 3px; color: var(--text-strong); font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }

.back-link { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; margin-top: 1px; color: var(--text-soft); font-size: 11px; font-weight: 800; }
.back-link:hover { color: var(--primary-strong); }
.back-link svg { width: 17px; height: 17px; }
.detail-metrics { grid-template-columns: repeat(4,minmax(0,1fr)); margin-bottom: 16px; }
.detail-metrics > article { min-width: 0; padding: 15px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-solid); box-shadow: var(--shadow-xs); }
.detail-metrics > article small { display: block; color: var(--text-muted); font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.detail-metrics > article strong { display: block; overflow: hidden; margin-top: 4px; color: var(--text-strong); font-size: 19px; text-overflow: ellipsis; white-space: nowrap; }
.detail-metrics > article span { display: block; margin-top: 4px; color: var(--text-muted); font-size: 9px; }
.detail-list dd strong, .detail-list dd small { display: block; }
.detail-list dd small { margin-top: 3px; color: var(--text-muted); font-size: 10px; }
.detail-main > .note-box { margin: 0 19px 19px; }

.property-visual > .badge { position: absolute; top: 15px; right: 15px; z-index: 2; }
.building-art { display: grid; grid-template-columns: repeat(2,1fr); gap: 5px; padding: 10px; border-radius: 14px 14px 4px 4px; background: color-mix(in srgb, var(--primary) 24%, var(--surface-solid)); box-shadow: inset 0 -8px 0 color-mix(in srgb, var(--primary) 15%, transparent); }
.building-art i { display: block; min-height: 12px; border-radius: 3px; background: color-mix(in srgb, var(--surface-solid) 86%, transparent); }
.type-commercial { background: linear-gradient(145deg, var(--blue-soft), var(--surface-muted)); }
.type-rural { background: linear-gradient(145deg, var(--amber-soft), var(--surface-muted)); }
.property-card > footer .btn-ghost { flex: 1 1 auto; justify-content: flex-start; }

.template-card > header { display: flex; align-items: flex-start; gap: 12px; }
.template-card > header > div { min-width: 0; }
.template-card > header h3 { margin-top: 9px; }
.template-card > header p { margin-bottom: 0; }
.template-card > footer { display: flex; padding-top: 14px; }
.template-card > footer .btn { width: 100%; }
.editor-main { padding: 19px 19px 0; overflow: hidden; }
.editor-main > .form-grid { margin-bottom: 15px; }
.editor-main > .field { margin-bottom: 15px; }
.variable-panel > p { margin: 14px 16px 3px; color: var(--text-muted); font-size: 10px; }
.variable-list button { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.variable-list code { overflow: hidden; color: inherit; text-overflow: ellipsis; white-space: nowrap; }
.switch-group { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; min-height: 52px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 13px; }
.switch-group > span { color: var(--text-soft); font-size: 11px; font-weight: 800; }
.switch-group > input { position: absolute; opacity: 0; pointer-events: none; }
.switch-group > input:checked + .switch { background: var(--primary); }
.switch-group > input:checked + .switch::after { transform: translateX(20px); }
.preference-row small { display: block; margin-top: 3px; color: var(--text-muted); font-size: 10px; }

@media (max-width: 1180px) {
  .detail-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 860px) {
  .detail-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .editor-main { padding: 15px 15px 0; }
  .template-card > header { align-items: center; }
}
@media (max-width: 430px) {
  .detail-metrics { grid-template-columns: 1fr 1fr; gap: 8px; }
  .detail-metrics > article { padding: 12px; }
  .detail-metrics > article strong { font-size: 16px; }
  .back-link { display: none; }
}

.nav-item.danger { color: var(--danger); }
.nav-item.danger:hover { color: var(--danger); background: var(--danger-soft); }
@media (max-width: 1180px) {
  :root { --sidebar-width: 305px; }
  .sidebar { margin-right: 8px; }
  .sidebar-nav { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .sidebar-nav .nav-item { font-size: 9px; }
  .metrics-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-grid { grid-template-columns: minmax(0,1.4fr) minmax(270px,.75fr); }
  .property-grid, .template-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .form-grid.four { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .topbar-create span { display: none; }
  .topbar-create { width: var(--touch); min-width: var(--touch); padding: 0; border-radius: 50%; }
}

@media (max-width: 1000px) {
  :root { --sidebar-width: 280px; }
  .sidebar { padding: 11px; }
  .quick-item { grid-template-columns: 34px minmax(0,1fr) 8px; gap: 8px; padding-inline: 6px; }
  .quick-avatar { width: 34px; height: 34px; border-radius: 11px; }
  .dashboard-grid, .detail-grid, .settings-grid, .import-grid, .template-editor { grid-template-columns: 1fr; }
  .panel-wide { grid-row: auto; }
  .variable-panel { position: static; }
}

@media (max-width: 860px) {
  :root {
    --topbar-height: 64px;
    --bottom-nav-height: 68px;
    --input-height: 46px;
  }

  .app-shell { display: block; height: var(--app-height); }
  .sidebar { display: none; }
  .workspace { display: grid; grid-template-rows: var(--topbar-height) minmax(0,1fr); width: 100%; height: var(--app-height); padding: 0; }
  .topbar { min-height: var(--topbar-height); padding: calc(7px + var(--safe-top)) calc(11px + var(--safe-right)) 7px calc(11px + var(--safe-left)); border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: var(--shadow-xs); }
  .mobile-menu { display: inline-grid; }
  .mobile-back { display: none; }
  .page-heading .eyebrow { display: none; }
  .page-heading h1 { margin: 0; font-size: 20px; }
  .topbar-actions { gap: 5px; }
  .topbar-actions .avatar-small { display: none; }
  .topbar-create { display: none; }
  .topbar .icon-btn { width: 42px; height: 42px; min-width: 42px; min-height: 42px; }

  .content-viewport { position: relative; height: calc(var(--app-height) - var(--topbar-height) - var(--bottom-nav-height) - var(--safe-bottom)); overflow: hidden; border: 0; border-radius: 0; background: var(--bg); box-shadow: none; }
  .view-content { height: 100%; min-height: 0; overflow: hidden; }
  .view-content > .view-fragment { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; overflow-x: hidden; overflow-y: auto; margin: 0; padding: 15px 13px calc(24px + var(--safe-bottom)); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--bg); transition: transform var(--transition-slow), opacity var(--transition); animation: none; }
  .view-content > .view-fragment[data-mobile-detail="true"] { z-index: 8; transform: translate3d(100%,0,0); box-shadow: -20px 0 50px rgba(16,48,34,.12); }
  .app-open .view-content > .view-fragment:not([data-mobile-detail="true"]) { opacity: .55; transform: translate3d(-18%,0,0); pointer-events: none; }
  .app-open .view-content > .view-fragment[data-mobile-detail="true"] { transform: translate3d(0,0,0); }
  .app-open .mobile-menu { display: none; }
  .app-open .mobile-back { display: inline-grid; }
  .app-open .fab { opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none; }

  .bottom-nav { position: fixed; z-index: 90; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); min-height: calc(var(--bottom-nav-height) + var(--safe-bottom)); padding: 5px calc(4px + var(--safe-right)) calc(5px + var(--safe-bottom)) calc(4px + var(--safe-left)); border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: 0 -8px 26px rgba(23,66,47,.08); backdrop-filter: blur(18px); }
  .bottom-nav-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 54px; gap: 2px; border-radius: 12px; color: var(--text-muted); background: transparent; cursor: pointer; }
  .bottom-nav-item span { display: grid; place-items: center; }
  .bottom-nav-item svg { width: 20px; height: 20px; }
  .bottom-nav-item small { overflow: hidden; width: 100%; font-size: 8px; font-weight: 800; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
  .bottom-nav-item.active { color: var(--primary-strong); background: var(--primary-soft); }
  .bottom-nav-item.active::before { content: ""; position: absolute; top: 3px; width: 20px; height: 3px; border-radius: 99px; background: var(--primary); }

  .fab { position: fixed; z-index: 110; right: calc(17px + var(--safe-right)); bottom: calc(var(--bottom-nav-height) + 17px + var(--safe-bottom)); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: #fff; background: linear-gradient(145deg,var(--primary),var(--primary-strong)); box-shadow: 0 15px 32px rgba(15,159,110,.35); transition: transform var(--transition), opacity var(--transition); }
  .fab svg { width: 24px; height: 24px; }

  .page-hero, .page-toolbar, .detail-header { align-items: stretch; flex-direction: column; gap: 15px; margin-bottom: 13px; padding: 18px 16px; border-radius: 18px; }
  .page-hero h2, .page-toolbar h2, .detail-title h2 { font-size: 25px; }
  .page-hero p, .page-toolbar p { font-size: 12px; }
  .hero-actions, .toolbar-actions, .detail-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
  .hero-actions > *, .toolbar-actions > *, .detail-actions > * { width: 100%; }

  .metrics-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 13px; }
  .metric-card { min-height: 155px; padding: 14px; border-radius: 17px; }
  .metric-card > strong { font-size: 23px; }
  .metric-icon { width: 37px; height: 37px; }
  .trend { max-width: 112px; overflow: hidden; text-overflow: ellipsis; }

  .dashboard-grid, .detail-grid, .settings-grid, .import-grid, .template-editor { grid-template-columns: 1fr; gap: 12px; }
  .panel, .property-card, .template-card { border-radius: 18px; }
  .panel-header { min-height: 62px; padding: 14px 15px; }
  .panel-header h3 { font-size: 15px; }
  .table-scroll { border-radius: 0 0 18px 18px; }
  .data-table { min-width: 720px; }
  .data-table th { top: 0; }

  .search-filter-bar { position: sticky; top: -15px; z-index: 12; align-items: stretch; flex-direction: column; margin-inline: -2px; padding: 10px; border-radius: 16px; box-shadow: var(--shadow-sm); }
  .search-filter-bar .search-box { flex-basis: auto; width: 100%; }
  .search-filter-bar .filter-chips { width: 100%; }

  .property-grid, .template-grid { grid-template-columns: 1fr; gap: 11px; }
  .property-visual { min-height: 100px; }

  .form-section { padding: 18px 15px; }
  .form-section > header { margin-bottom: 15px; }
  .form-grid.two, .form-grid.three, .form-grid.four { grid-template-columns: 1fr; }
  .form-actions { margin: 0 -15px -1px; padding: 11px 15px calc(11px + var(--safe-bottom)); }
  .form-actions .btn { flex: 1 1 0; }
  .field input, .field select, .field textarea, .code-editor { font-size: 16px; }
  .code-editor { min-height: 420px; }

  .detail-title { align-items: center; }
  .detail-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mini-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .detail-list > div { grid-template-columns: 100px minmax(0,1fr); gap: 12px; }

  .modal { place-items: stretch; padding: 0; }
  .modal-panel { width: 100%; height: var(--app-height); max-height: none; border: 0; border-radius: 0; transform: translate3d(0,100%,0); }
  .modal.open .modal-panel { transform: translate3d(0,0,0); }
  .modal-handle { display: block; width: 42px; height: 4px; margin: 8px auto 0; border-radius: 99px; background: var(--border-strong); }
  .modal-header { padding: calc(11px + var(--safe-top)) calc(14px + var(--safe-right)) 12px calc(14px + var(--safe-left)); }
  .modal-body { max-height: none; flex: 1 1 auto; overflow-y: auto; padding: 16px calc(14px + var(--safe-right)) 20px calc(14px + var(--safe-left)); }
  .modal-footer { padding: 11px calc(14px + var(--safe-right)) calc(11px + var(--safe-bottom)) calc(14px + var(--safe-left)); }
  .modal-footer .btn { flex: 1 1 0; }

  .mobile-drawer { top: auto; right: 0; bottom: 0; left: 0; width: 100%; height: min(92%, 740px); padding: 0 calc(14px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(14px + var(--safe-left)); border-radius: 24px 24px 0 0; transform: translate3d(0,105%,0); }
  .mobile-drawer .drawer-handle { display: block; }
  .drawer-header { padding-top: 2px; }
  .drawer-body { height: calc(100% - 76px); }

  .toast-stack { right: calc(10px + var(--safe-right)); bottom: calc(var(--bottom-nav-height) + 10px + var(--safe-bottom)); width: calc(100vw - 20px - var(--safe-left) - var(--safe-right)); }
  .app-open .toast-stack { bottom: calc(10px + var(--safe-bottom)); }
}

@media (max-width: 560px) {
  .metrics-grid { grid-template-columns: 1fr 1fr; }
  .metric-card { min-height: 147px; }
  .metric-card > strong { font-size: 20px; }
  .detail-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mini-metrics { grid-template-columns: 1fr; }
  .hero-actions, .toolbar-actions, .detail-actions { grid-template-columns: 1fr; }
  .payment-item { grid-template-columns: 42px minmax(0,1fr); }
  .payment-item > .badge, .payment-item > .btn { grid-column: 2; justify-self: start; }
}

@media (max-width: 430px) {
  :root {
    --topbar-height: 58px;
    --bottom-nav-height: 62px;
    --touch: 42px;
    --input-height: 44px;
  }
  body { font-size: 14px; }
  .topbar { padding-top: calc(5px + var(--safe-top)); padding-bottom: 5px; }
  .topbar .icon-btn { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
  .topbar-actions .notification-btn { display: none; }
  .page-heading h1 { font-size: 18px; }
  .view-content > .view-fragment { padding: 11px 9px calc(20px + var(--safe-bottom)); }
  .bottom-nav { padding-inline: calc(2px + var(--safe-right)) calc(2px + var(--safe-left)); }
  .bottom-nav-item { min-height: 49px; border-radius: 10px; }
  .bottom-nav-item svg { width: 18px; height: 18px; }
  .bottom-nav-item small { font-size: 7px; }
  .fab { right: calc(12px + var(--safe-right)); bottom: calc(var(--bottom-nav-height) + 12px + var(--safe-bottom)); width: 52px; height: 52px; }

  .page-hero, .page-toolbar, .detail-header { padding: 15px 13px; border-radius: 16px; }
  .page-hero h2, .page-toolbar h2, .detail-title h2 { font-size: 22px; }
  .page-hero p, .page-toolbar p { font-size: 11px; }
  .metrics-grid { gap: 8px; }
  .metric-card { min-height: 138px; padding: 12px; border-radius: 15px; }
  .metric-head { align-items: flex-start; }
  .metric-icon { width: 34px; height: 34px; border-radius: 11px; }
  .metric-icon svg { width: 18px; height: 18px; }
  .trend { max-width: 88px; min-height: 22px; padding-inline: 6px; font-size: 8px; }
  .metric-card > p { margin-top: 10px; font-size: 10px; }
  .metric-card > strong { font-size: 18px; }
  .metric-card > small { font-size: 8px; }
  .sparkline { height: 35px; }

  .panel-header { min-height: 57px; padding: 12px; }
  .panel-header h3 { font-size: 14px; }
  .text-link { font-size: 10px; }
  .form-section { padding: 15px 12px; }
  .form-section > header { gap: 9px; }
  .section-number { flex-basis: 31px; height: 31px; }
  .form-actions { margin-inline: -12px; padding-inline: 12px; }
  .btn { min-height: 42px; padding-inline: 13px; font-size: 11px; }
  .detail-list > div { grid-template-columns: 1fr; gap: 4px; }
  .property-body, .template-card { padding: 14px; }
  .auth-card { padding: 20px 16px; border-radius: 20px; }
}

@media (max-height: 620px) and (max-width: 860px) {
  :root { --topbar-height: 52px; --bottom-nav-height: 54px; }
  .topbar { padding-top: calc(3px + var(--safe-top)); padding-bottom: 3px; }
  .topbar .icon-btn { width: 38px; height: 38px; min-width: 38px; min-height: 38px; }
  .page-heading h1 { font-size: 17px; }
  .bottom-nav { padding-top: 2px; padding-bottom: calc(2px + var(--safe-bottom)); }
  .bottom-nav-item { min-height: 44px; }
  .bottom-nav-item small { display: none; }
  .fab { width: 48px; height: 48px; bottom: calc(var(--bottom-nav-height) + 8px + var(--safe-bottom)); }
  .search-filter-bar { top: -11px; padding: 7px; }
  .filter-chips { padding-block: 6px; }
  .chip { min-height: 31px; }
  .page-hero { padding-block: 13px; }
}

@media (orientation: landscape) and (max-width: 860px) and (max-height: 520px) {
  .bottom-nav-item small { display: none; }
  .modal-panel { height: var(--app-height); }
  .mobile-drawer { height: 100%; max-height: none; border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  .sidebar, .topbar, .bottom-nav, .fab, .drawer, .drawer-backdrop, .toast-stack { display: none !important; }
  .app-body, .app-shell, .workspace, .content-viewport, .view-content, .view-fragment { height: auto !important; min-height: 0 !important; overflow: visible !important; padding: 0 !important; background: #fff !important; box-shadow: none !important; }
  .app-shell { display: block !important; }
}


/* Instalação PWA no mesmo padrão do OS Sonda */
[data-install-pwa][hidden] { display: none !important; }
.pwa-install-trigger { font-size: 19px; }
.dropdown-action {
  width: 100%; min-height: 42px; padding: 10px 12px; border: 0; background: transparent;
  color: inherit; text-align: left; border-radius: 10px; cursor: pointer; font: inherit;
}
.dropdown-action:hover { background: var(--surface-soft, rgba(15,159,110,.08)); }
.pwa-drawer-install { width: 100%; border: 0; background: transparent; color: inherit; text-align: left; }
.auth-install-btn { margin-top: 10px; }
@media (max-width: 430px) {
  .pwa-install-trigger { width: 42px; height: 42px; font-size: 17px; }
}

/* Financeiro mensal e recibos de aluguel */
.finance-toolbar .toolbar-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.section-tabs { display: flex; align-items: center; gap: 8px; margin: 0 0 15px; padding: 5px; border: 1px solid var(--border); border-radius: 15px; background: color-mix(in srgb, var(--surface-solid) 92%, transparent); box-shadow: var(--shadow-sm); overflow-x: auto; scrollbar-width: none; }
.section-tabs::-webkit-scrollbar { display: none; }
.section-tab { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 15px; border-radius: 11px; color: var(--text-soft); font-size: 11px; font-weight: 850; white-space: nowrap; transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast); }
.section-tab svg { width: 17px; height: 17px; }
.section-tab:hover { color: var(--text-strong); background: var(--surface-hover); }
.section-tab.active { color: #fff; background: linear-gradient(135deg,var(--primary),var(--primary-strong)); box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 25%, transparent); }
.four-metrics { grid-template-columns: repeat(4,minmax(0,1fr)); }
.finance-filter-form { display: grid; grid-template-columns: minmax(240px,1fr) minmax(150px,190px) minmax(150px,190px) auto; align-items: end; gap: 10px; }
.compact-field { display: grid; gap: 5px; min-width: 0; }
.compact-field > span { color: var(--text-muted); font-size: 9px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.compact-field input,.compact-field select { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 12px; color: var(--text); background: var(--surface-solid); outline: 0; }
.compact-field input:focus,.compact-field select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }
.finance-table { min-width: 930px; }
.receipt-table { min-width: 980px; }
.row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.row-muted { opacity: .63; }
.modal-panel-wide { width: min(100%,760px); }
.payment-context-card { display: grid; grid-template-columns: 45px minmax(0,1fr) auto; align-items: center; gap: 12px; margin-bottom: 17px; padding: 13px; border: 1px solid var(--border); border-radius: 15px; background: linear-gradient(145deg,color-mix(in srgb,var(--primary) 7%,var(--surface-solid)),var(--surface-solid)); }
.payment-context-card > div { min-width: 0; }
.payment-context-card strong,.payment-context-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.payment-context-card strong { color: var(--text-strong); font-size: 12px; }
.payment-context-card small { margin-top: 3px; color: var(--text-muted); font-size: 10px; }
.payment-form-grid { margin-bottom: 16px; }
.receipt-calculator { display: grid; gap: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-muted); }
.receipt-calculator > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 43px; padding: 0 15px; border-bottom: 1px solid var(--border); color: var(--text-soft); font-size: 11px; }
.receipt-calculator > div strong { color: var(--text-strong); }
.receipt-calculator .discount { color: var(--warning); }
.receipt-calculator .receipt-total { min-height: 55px; color: var(--primary-strong); background: color-mix(in srgb,var(--primary) 10%,var(--surface-solid)); font-size: 13px; font-weight: 850; }
.receipt-calculator .receipt-total strong { color: var(--primary-strong); font-size: 20px; }
.receipt-calculator > small { padding: 10px 15px; color: var(--text-muted); font-size: 9px; line-height: 1.45; }
.receipt-mini-list { display: grid; padding: 8px 17px 17px; }
.receipt-mini-item { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 64px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.receipt-mini-item:last-child { border-bottom: 0; }
.receipt-mini-item > div { min-width: 0; }
.receipt-mini-item strong,.receipt-mini-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.receipt-mini-item strong { color: var(--text-strong); font-size: 11px; }
.receipt-mini-item small { margin-top: 3px; color: var(--text-muted); font-size: 9px; }
.receipt-mini-item b { color: var(--primary-strong); font-size: 11px; white-space: nowrap; }
.receipt-mini-item.cancelled { opacity: .55; text-decoration: line-through; }
.contract-payments-panel { margin-top: 15px; }
.detail-metrics article.attention { border-color: color-mix(in srgb,var(--danger) 40%,var(--border)); background: color-mix(in srgb,var(--danger) 5%,var(--surface-solid)); }
.dashboard-receipts { padding-top: 5px; }

@media (max-width:1180px) {
  .four-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .finance-filter-form { grid-template-columns: minmax(220px,1fr) repeat(2,minmax(140px,180px)); }
  .finance-filter-form > .btn { grid-column: 1 / -1; justify-self: end; }
}
@media (max-width:860px) {
  .finance-toolbar .toolbar-actions { width: 100%; justify-content: stretch; }
  .finance-toolbar .toolbar-actions .btn { flex: 1 1 150px; }
  .finance-filter-form { grid-template-columns: 1fr 1fr; }
  .finance-filter-form .search-box { grid-column: 1 / -1; }
  .finance-filter-form > .btn { grid-column: 1 / -1; width: 100%; }
  .payment-context-card { grid-template-columns: 42px minmax(0,1fr); }
  .payment-context-card > .badge { grid-column: 2; justify-self: start; }
}
@media (max-width:430px) {
  .four-metrics { grid-template-columns: 1fr; }
  .section-tab { flex: 1 0 auto; padding-inline: 12px; }
  .finance-filter-form { grid-template-columns: 1fr; }
  .finance-filter-form .search-box,.finance-filter-form > .btn { grid-column: auto; }
  .payment-context-card { margin-bottom: 13px; }
  .receipt-calculator .receipt-total strong { font-size: 17px; }
  .receipt-mini-item { grid-template-columns: 38px minmax(0,1fr); }
  .receipt-mini-item b { grid-column: 2; justify-self: start; }
}