/* ==========================================================
   FIXONE DESIGN SYSTEM — Home & Garden OS
   Autorski język wizualny: Garden Grid · FixShield · OneView
   ========================================================== */

:root {
  --green:        #72C142;
  --green-dark:   #1A5E30;
  --green-mid:    #4A9B2E;
  --green-light:  #EBF7E2;
  --green-muted:  #C5E8B0;
  --teal:         #2D7A5A;
  --bg:           #ECECEA;
  --white:        #FFFFFF;
  --text:         #141414;
  --text2:        #4A4A4A;
  --text3:        #8A8A8A;
  --border:       rgba(20,20,20,.06);
  --red:          #EF4444;
  --amber:        #F59E0B;
  --blue:         #3B82F6;
  --r-xs:  6px; --r-sm: 10px; --r-md: 16px;
  --r-lg:  20px; --r-xl: 24px; --r-pill: 100px;
  --sh:   0 2px 8px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03);
  --sh2:  0 8px 28px rgba(26,94,48,.12);
  --topbar-h: 76px;
  --content-max: 1440px;
  --pad-x: 32px;
  --pad-y: 32px;
  --pad-login: 48px;
  --toolbar-ctrl-h: 29px;
  --role-bo: #1A5E30;
  --role-gradient: linear-gradient(155deg, #1A5E30 0%, #0d3319 45%, #2D7A5A 100%);
  --role-accent: var(--role-bo);
  --role-glow: rgba(114,193,66,.12);
  --glass-bg: rgba(255,255,255,.06);
  --glass-border: rgba(255,255,255,.12);
  --font-display: 'Bricolage Grotesque', 'Inter', sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --fx-stripe: repeating-linear-gradient(
    -45deg, transparent, transparent 5px,
    rgba(114,193,66,.07) 5px, rgba(114,193,66,.07) 6px
  );
  --fx-garden-grid:
    linear-gradient(rgba(26,94,48,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,94,48,.04) 1px, transparent 1px);
  --fx-garden-size: 28px 28px;

  /* legacy aliases (inline styles in HTML / app.js) */
  --g50:  var(--green-light);
  --g200: var(--green-muted);
  --g500: var(--green);
  --g600: var(--green-mid);
  --g700: var(--green-dark);
  --a500: var(--amber);
  --b500: var(--blue);
  --b600: #2563EB;
  --r500: var(--red);
  --s50:  #F9FAFB;
  --s100: #F3F4F6;
  --s200: #E5E7EB;
  --s300: #D1D5DB;
  --s400: var(--text3);
  --s500: #6B7280;
  --s600: var(--text2);
  --s700: #374151;
  --s800: #1F2937;
  --s900: var(--text);
  --rS:   var(--r-sm);
  --rM:   var(--r-md);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { font-size:14px }
body { font-family:var(--font-body); background:var(--bg); color:var(--text); line-height:1.5; -webkit-font-smoothing:antialiased }
a { text-decoration:none; color:inherit }
button { cursor:pointer; font-family:inherit; border:none; outline:none; background:none }
input,select,textarea { font-family:inherit; outline:none }

/* ── FIXONE BRAND MARK ───────────────────────────────────── */
.fx-mark {
  width:40px; height:40px; border-radius:12px; overflow:hidden; flex-shrink:0;
  box-shadow:0 4px 16px rgba(13,51,25,.28);
  line-height:0;
}
.fx-mark svg,
.fx-loader-mark svg {
  display:block; width:100%; height:100%;
  shape-rendering:geometricPrecision;
}
.fx-mark.lg { width:56px; height:56px; border-radius:16px }
.fx-mark.sm { width:22px; height:22px; border-radius:7px; box-shadow:0 2px 8px rgba(13,51,25,.2) }
.fx-wordmark { letter-spacing:-.5px }
.fx-wordmark .fx-one { color:var(--green) }
.login-brand-name.fx-wordmark .fx-one,
.topbar-logo .fx-wordmark .fx-one { color:#A8E06C }
.login-logo-text.fx-wordmark .fx-one { color:var(--green-mid) }
.logo-tagline {
  font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text3); margin-top:1px;
}
.topbar-logo .logo-text { line-height:1.1 }

/* ── APP SHELL ───────────────────────────────────────────── */
.app {
  display:flex; flex-direction:column; min-height:100vh;
  width:100%;
  background:var(--bg);
  position:relative;
}
.app::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:var(--fx-garden-grid); background-size:var(--fx-garden-size);
  opacity:.35;
}
.topbar { position:sticky; top:0; z-index:200 }
.content, .app-brand-footer { position:relative; z-index:1 }

/* TOPBAR – styl jak lewy panel logowania (stała kolorystyka BO) */
.topbar {
  width:100%;
  height:var(--topbar-h);
  background:var(--role-gradient);
  display:flex; align-items:center; padding:0 var(--pad-x); gap:24px;
  box-shadow:0 4px 24px rgba(0,0,0,.18);
  flex-shrink:0;
  overflow:visible;
}
.topbar::before {
  content:''; position:absolute; inset:0;
  background:var(--fx-garden-grid); background-size:var(--fx-garden-size);
  opacity:.1; pointer-events:none;
}
.topbar > * { position:relative; z-index:1 }
.topbar-logo .logo-text { color:#fff }
.topbar-logo .logo-tagline { color:rgba(255,255,255,.5) }
.topbar-logo .fx-mark { box-shadow:0 4px 18px rgba(0,0,0,.3) }

.topnav-item {
  color:rgba(255,255,255,.75);
}
.topnav-item:hover {
  background:var(--glass-bg); color:#fff;
  border:1px solid var(--glass-border);
}
.topnav-item.active {
  background:rgba(255,255,255,.95); color:var(--role-accent);
  box-shadow:0 2px 12px rgba(0,0,0,.15);
  font-weight:700;
}
.topnav-item:not(.active) .topnav-badge {
  background:rgba(255,255,255,.15); color:#fff;
}
.topnav-item.active .topnav-badge {
  background:var(--role-glow); color:var(--role-accent);
}

.topbar-role {
  background:var(--glass-bg); border:1px solid var(--glass-border);
  backdrop-filter:blur(6px);
}
.role-tab { color:rgba(255,255,255,.55) }
.role-tab:hover { color:#fff; background:rgba(255,255,255,.08) }
.role-tab.active { background:rgba(255,255,255,.95); color:var(--role-accent) }

.tb-icon-btn { color:rgba(255,255,255,.8) }
.tb-icon-btn:hover { background:var(--glass-bg); color:#fff }
.tb-notif-pip { border-color:var(--green-dark) }


/* CONTENT – jasna „karta” jak prawy panel logowania */
.content {
  flex:1; padding:var(--pad-y) var(--pad-x); overflow-y:auto;
  width:100%; max-width:var(--content-max); margin:0 auto;
  background:linear-gradient(180deg, var(--bg) 0%, #e8e8e6 100%);
}

/* PAGE HEAD – jak lewy panel logowania */
.ph {
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:24px; gap:16px; flex-wrap:wrap;
  background:var(--role-gradient);
  border-radius:var(--r-xl); padding:24px; color:#fff;
  position:relative; overflow:hidden;
  border:1px solid var(--glass-border);
  box-shadow:0 8px 32px rgba(26,94,48,.15);
}
.ph::before {
  content:''; position:absolute; inset:0;
  background:var(--fx-garden-grid); background-size:var(--fx-garden-size);
  opacity:.1; pointer-events:none;
}
.ph::after {
  content:''; position:absolute; width:220px; height:220px; border-radius:50%;
  background:var(--role-glow); right:-60px; bottom:-80px; pointer-events:none;
}
.ph > * { position:relative; z-index:1 }
.ph-title {
  font-family:var(--font-display); font-size:28px; font-weight:800;
  color:#fff; letter-spacing:-.8px; line-height:1.15;
}
.ph-sub {
  font-size:14px; color:rgba(255,255,255,.72);
  margin-top:6px; max-width:520px; line-height:1.55;
}
.ph-actions { flex-shrink:0; align-items:center }
.ph-actions .btn-sm,
.ph > .flex.g8.fac .btn-sm,
.card-hd .btn-sm,
.card-hd .flex .btn-sm {
  min-height:var(--toolbar-ctrl-h);
}
.ph .search,
.ph > .flex.g8.fac .search {
  padding:0 14px;
  min-height:var(--toolbar-ctrl-h);
}
.ph .search input { font-size:12px; line-height:1 }
.ph .btn-secondary {
  background:var(--glass-bg); color:#fff;
  border-color:var(--glass-border); backdrop-filter:blur(4px);
}
.ph .btn-secondary:hover { background:rgba(255,255,255,.14) }
.ph .btn-primary { background:var(--green); border:none; box-shadow:0 2px 12px rgba(0,0,0,.2) }
.ph .btn-primary:hover { background:var(--green-mid) }
.ph .btn-ghost { color:rgba(255,255,255,.8) }
.ph .btn-ghost:hover { background:var(--glass-bg); color:#fff }
.ph-select, .ph .fc {
  background-color:rgba(255,255,255,.1); color:#fff;
  border:1.5px solid var(--glass-border); backdrop-filter:blur(4px);
  transition:background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ph .ph-select:hover,
.ph .select-field:hover .ph-select {
  background-color:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.22);
}
.ph .ph-select:focus,
.ph .select-field:focus-within .ph-select {
  background-color:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.3);
  box-shadow:0 0 0 3px rgba(255,255,255,.12);
  outline:none;
}
.ph .search {
  background:var(--glass-bg); border-color:var(--glass-border);
  backdrop-filter:blur(4px);
  transition:background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ph .search:hover {
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.22);
}
.ph .search:focus-within {
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.3);
  box-shadow:0 0 0 3px rgba(255,255,255,.12);
}
.ph .search input { color:#fff }
.ph .search input::placeholder { color:rgba(255,255,255,.5) }
.ph .search::before {
  border-color:rgba(255,255,255,.55);
  box-shadow:3px 3px 0 -2px rgba(255,255,255,.55);
}
.ph-select option { color:var(--text); background:#fff }

.page-back {
  display:inline-flex; align-items:center; gap:4px;
  font-size:12px; font-weight:600; color:var(--text3);
  margin-bottom:8px; cursor:pointer; transition:color .15s;
  background:none; border:none; padding:0; font-family:inherit;
}
.page-back:hover { color:var(--role-accent) }

.page-hero, .profile-hero, .kl-hero {
  background:var(--role-gradient);
  border-radius:var(--r-xl); padding:24px; color:#fff;
  margin-bottom:24px; display:flex; align-items:center; gap:20px;
  position:relative; overflow:hidden;
  border-left:4px solid rgba(255,255,255,.35);
  box-shadow:0 12px 40px rgba(13,51,25,.18);
}
.page-hero::before, .profile-hero::before, .kl-hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:var(--fx-garden-grid); background-size:var(--fx-garden-size);
  opacity:.1;
}
.topbar-logo { display:flex; align-items:center; gap:12px; flex-shrink:0; min-width:150px }
.logo-mark { display:none }
.logo-text { font-family:var(--font-display); font-size:18px; font-weight:800; letter-spacing:-.4px }

/* TOP NAV */
.topnav {
  display:flex; align-items:center; gap:4px; flex:1;
  overflow-x:auto; scrollbar-width:none; padding:4px 0;
}
.topnav::-webkit-scrollbar { display:none }
.topnav-item {
  display:inline-flex; align-items:center; gap:8px; padding:9px 18px;
  border-radius:var(--r-pill); font-size:13px; font-weight:500;
  cursor:pointer; white-space:nowrap;
  border:1px solid transparent; background:transparent; font-family:inherit;
  transition:background .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease, font-weight .12s ease;
}
.topnav-icon { display:flex; align-items:center; justify-content:center }
.topnav-icon .ico { width:16px; height:16px }
.topnav-badge {
  font-size:10px; font-weight:700; padding:2px 7px; border-radius:var(--r-pill);
  margin-left:2px;
}

/* TOPBAR RIGHT */
.topbar-right { margin-left:auto; display:flex; align-items:center; gap:6px; flex-shrink:0 }
.topbar-role {
  display:flex; gap:2px; border-radius:var(--r-pill);
  padding:3px; margin-right:4px;
}
.role-tab {
  padding:5px 11px; border-radius:var(--r-pill); font-size:10px; font-weight:700;
  cursor:pointer; transition:all .15s; letter-spacing:.3px;
}
.tb-icon-btn {
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; cursor:pointer;
  transition:background .15s; position:relative; border:none; background:transparent;
}
.tb-notif-pip {
  position:absolute; top:8px; right:9px; width:8px; height:8px;
  background:var(--red); border-radius:50%; border:2px solid rgba(255,255,255,.3);
}
.tb-avatar {
  width:36px; height:36px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:12px; font-weight:700; color:#fff; flex-shrink:0;
}
.tb-avatar.lg { width:42px; height:42px; font-size:14px }

/* User dropdown */
.user-menu { position:relative }
.user-menu-trigger {
  display:flex; align-items:center; gap:6px; padding:4px 8px 4px 4px;
  border-radius:var(--r-pill); border:none; background:transparent; cursor:pointer;
  transition:background .15s;
}
.user-menu-trigger:hover, .user-menu.open .user-menu-trigger {
  background:var(--glass-bg);
}
.user-chevron { color:rgba(255,255,255,.6); transition:transform .15s }
.user-menu.open .user-chevron { transform:rotate(180deg) }
.user-dropdown {
  display:none; position:absolute; right:0; top:calc(100% + 8px);
  background:var(--white); border-radius:var(--r-lg); box-shadow:var(--sh2);
  border:1px solid var(--border); min-width:220px; padding:12px; z-index:300;
}
.user-menu.open .user-dropdown { display:block }
.user-dropdown-hd { display:flex; align-items:center; gap:12px; padding:8px 4px 12px; border-bottom:1px solid var(--bg) }
.user-dropdown-name { font-size:14px; font-weight:700; color:var(--text) }
.user-dropdown-role { font-size:12px; color:var(--text3); margin-top:2px }
.user-dropdown-nav { display:flex; flex-direction:column; gap:4px; padding:8px 0 }
.user-dropdown-item {
  display:flex; align-items:center; gap:10px; width:100%;
  padding:10px 8px; border:none; border-radius:var(--r-sm);
  background:transparent; font-size:13px; font-weight:600;
  color:var(--text2); cursor:pointer; font-family:inherit; text-align:left;
  transition:background .15s, color .15s;
}
.user-dropdown-item svg { flex-shrink:0; color:var(--text3) }
.user-dropdown-item:hover { background:var(--green-light); color:var(--green-dark) }
.user-dropdown-item:hover svg { color:var(--green-dark) }
.user-dropdown-logout {
  width:100%; margin-top:4px; padding:10px; border-radius:var(--r-sm);
  border:1px solid var(--border); background:var(--white);
  font-size:13px; font-weight:600; color:var(--text2); cursor:pointer;
  transition:all .15s;
}
.user-dropdown-logout:hover { background:#FEF2F2; color:var(--red); border-color:#FECACA }

.account-toast {
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(12px);
  padding:12px 20px; border-radius:var(--r-md); font-size:13px; font-weight:600;
  box-shadow:var(--sh2); z-index:500; opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.account-toast.visible { opacity:1; transform:translateX(-50%) translateY(0) }
.account-toast.ok { background:var(--green-dark); color:#fff }
.account-toast.warn { background:#FFFBEB; color:#92400E; border:1px solid #FEF3C7 }
.account-unsaved { margin-bottom:16px }
.account-saved-at { font-size:11px }
.tac { text-align:center }

/* ── TOOLTIPS ────────────────────────────────────────────── */
[data-tip] { cursor:help }
button[data-tip], .role-card[data-tip], .page-back[data-tip] { cursor:pointer }
.pipe-col[data-tip], .status-step[data-tip], .chart-bar[data-tip], .progress[data-tip], .gauge-wrap[data-tip] { cursor:help }
.kl-order-card .progress { cursor:default }
.fx-tip {
  position:fixed; z-index:650; pointer-events:none;
  padding:8px 12px; max-width:280px;
  background:var(--green-dark); color:#fff;
  font-size:12px; font-weight:500; line-height:1.45;
  border-radius:var(--r-sm);
  box-shadow:0 6px 20px rgba(0,0,0,.22);
  opacity:0; transform:translateY(4px);
  transition:opacity .14s ease, transform .14s ease;
}
.fx-tip.visible { opacity:1; transform:none }
@media (prefers-reduced-motion: reduce) {
  .fx-tip { transition:none }
}

/* Topbar search + notifications */
.tb-menu { position:relative; z-index:20 }
.tb-menu.open .tb-icon-btn { background:var(--glass-bg); color:#fff }
.tb-dropdown {
  display:none; position:absolute; right:0; top:calc(100% + 10px);
  background:var(--white); border-radius:var(--r-lg); box-shadow:var(--sh2);
  border:1px solid var(--border); z-index:400; overflow:hidden;
}
.tb-menu.open .tb-dropdown { display:block }
.tb-dropdown-search { width:min(360px, 92vw) }
.tb-dropdown-notif { width:min(340px, 92vw) }
.tb-dropdown-hd {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px 10px; border-bottom:1px solid var(--bg);
}
.tb-dropdown-title { font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--text) }
.tb-dropdown-link {
  border:none; background:none; font-size:11px; font-weight:700; color:var(--green-dark);
  cursor:pointer; padding:4px 0; font-family:inherit;
}
.tb-dropdown-link:hover { text-decoration:underline }
.tb-search-wrap { padding:10px 16px 12px; border-bottom:1px solid var(--bg) }
.tb-search-input {
  width:100%; padding:10px 14px; border:1.5px solid var(--border);
  border-radius:var(--r-md); font-size:13px; color:var(--text); background:var(--bg);
}
.tb-search-input:focus { border-color:var(--green-muted); background:var(--white) }
.tb-dropdown-list { max-height:min(320px, 50vh); overflow-y:auto }
.tb-dropdown-item {
  display:flex; align-items:flex-start; gap:10px; width:100%;
  padding:12px 16px; border:none; background:transparent; text-align:left;
  cursor:pointer; font-family:inherit; border-bottom:1px solid var(--bg);
  transition:background .15s;
}
.tb-dropdown-item:last-child { border-bottom:none }
.tb-dropdown-item:hover { background:var(--green-light) }
.tb-dropdown-item.unread { background:rgba(235,247,226,.65) }
.tb-dropdown-item.unread:hover { background:var(--green-light) }
.tb-dropdown-item-body { flex:1; min-width:0 }
.tb-dropdown-item-title { font-size:13px; font-weight:600; color:var(--text); line-height:1.35 }
.tb-dropdown-item-sub { font-size:11px; color:var(--text3); margin-top:2px }
.tb-dropdown-item-time { font-size:10px; color:var(--text3); flex-shrink:0; margin-top:2px }
.tb-dropdown-empty {
  padding:20px 16px; font-size:12px; color:var(--text3); text-align:center;
}
.tb-dropdown-section {
  padding:8px 16px 4px; font-size:10px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text3);
}
.tb-notif-pip.hidden { display:none }

/* Role accent – page-hero (stała kolorystyka BO) */
.page-hero { --hero-accent: var(--role-bo) }

/* ── UNIFIED PAGE SHELL ───────────────────────────────────── */
.view {
  display:none;
  opacity:0;
  transform:translateY(10px);
}
.view.active {
  display:block;
  opacity:1;
  transform:none;
}
.view.view-enter {
  animation:viewEnter .38s cubic-bezier(.22,1,.36,1) forwards;
}
.view.view-leaving {
  animation:viewLeave .22s ease forwards;
}
@keyframes viewEnter {
  from { opacity:0; transform:translateY(12px) }
  to   { opacity:1; transform:none }
}
@keyframes viewLeave {
  from { opacity:1; transform:none }
  to   { opacity:0; transform:translateY(-6px) }
}
.view.active > .ph,
.view.active > .page-back,
.view.active > .card:first-of-type,
.view.active > .kpi-grid,
.view.active > .alert:first-of-type {
  animation:staggerIn .42s cubic-bezier(.22,1,.36,1) backwards;
}
.view.active > .ph { animation-delay:.04s }
.view.active > .page-back { animation-delay:.02s }
.view.active > .card:first-of-type,
.view.active > .kpi-grid { animation-delay:.08s }
@keyframes staggerIn {
  from { opacity:0; transform:translateY(8px) }
  to   { opacity:1; transform:none }
}

/* ── LOADER & PROGRESS ───────────────────────────────────── */
.fx-progress {
  position:fixed; top:0; left:0; right:0; height:3px; z-index:9998;
  background:transparent; pointer-events:none; opacity:0;
  transition:opacity .2s;
}
.fx-progress.active { opacity:1 }
.fx-progress::after {
  content:''; display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--green-dark), var(--green), var(--teal));
  border-radius:0 2px 2px 0;
  animation:fxProgress 1.1s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes fxProgress {
  0%   { width:0 }
  40%  { width:72% }
  100% { width:100% }
}
.fx-loader {
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(236,236,234,.72);
  backdrop-filter:blur(10px);
  opacity:0; visibility:hidden;
  transition:opacity .28s ease, visibility .28s;
}
.fx-loader.visible { opacity:1; visibility:visible }
.fx-loader-panel {
  text-align:center; padding:32px 40px;
  background:var(--role-gradient); border-radius:var(--r-xl);
  box-shadow:0 12px 40px rgba(0,0,0,.25); border:1px solid var(--glass-border);
  min-width:min(280px, 88vw); color:#fff;
  position:relative; overflow:hidden;
}
.fx-loader-panel::before {
  content:''; position:absolute; inset:0;
  background:var(--fx-garden-grid); background-size:var(--fx-garden-size);
  opacity:.1; pointer-events:none;
}
.fx-loader-panel > * { position:relative; z-index:1 }
.fx-loader-mark {
  width:56px; height:56px; margin:0 auto 20px;
  border-radius:16px; overflow:hidden; line-height:0;
  animation:loaderPulse 1.4s ease-in-out infinite;
}
.fx-loader-ring {
  width:40px; height:40px; margin:0 auto 16px;
  border:3px solid rgba(255,255,255,.2);
  border-top-color:#fff;
  border-radius:50%;
  animation:loaderSpin .75s linear infinite;
}
.fx-loader-text {
  font-family:var(--font-display); font-size:16px; font-weight:800;
  color:#fff; letter-spacing:-.3px;
}
.fx-loader-sub {
  font-size:11px; color:rgba(255,255,255,.55); margin-top:4px;
  letter-spacing:.06em; text-transform:uppercase;
}
@keyframes loaderSpin { to { transform:rotate(360deg) } }
@keyframes loaderPulse {
  0%,100% { transform:scale(1) }
  50%     { transform:scale(1.04) }
}
#screen-login, #screen-app {
  transition:opacity .35s ease, transform .35s ease;
}
#screen-login.screen-hide,
#screen-app.screen-hide {
  opacity:0; transform:scale(.985);
  pointer-events:none;
}

.page-hero::after, .profile-hero::after, .kl-hero::after {
  content:''; position:absolute; width:200px; height:200px; border-radius:50%;
  background:rgba(255,255,255,.06); right:-40px; bottom:-60px;
}
.page-hero-av, .profile-hero .av-lg { flex-shrink:0; position:relative; z-index:1 }
.page-hero-body, .profile-info, .kl-hero-content { flex:1; position:relative; z-index:1 }
.page-hero-name, .profile-name, .kl-hello {
  font-family:var(--font-display);
  font-size:22px; font-weight:800; margin-bottom:4px; letter-spacing:-.3px;
}
.page-hero-meta, .profile-meta, .kl-tagline {
  font-size:13px; color:rgba(255,255,255,.75); line-height:1.5;
}
.page-hero-stats, .profile-stats {
  display:flex; gap:28px; margin-left:auto; position:relative; z-index:1;
}
.kl-hero-logo {
  position:relative; z-index:1; flex-shrink:0;
}
.kl-hero-logo svg {
  display:block; width:52px; height:52px;
  shape-rendering:geometricPrecision;
}
#v-kl-dash .page-hero { border-left:none }

.meta-line { font-size:13px; color:var(--text3) }
.meta-line strong { color:var(--text2) }

.btn-stack { display:flex; flex-direction:column; gap:8px }
.btn-stack .btn { width:100%; justify-content:center }

.ord-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px }
.ord-card-lg {
  background:rgba(255,255,255,.92); border-radius:var(--r-lg);
  box-shadow:0 4px 20px rgba(26,94,48,.06);
  padding:20px; cursor:pointer;
  border:1.5px solid var(--border);
  backdrop-filter:blur(6px);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.ord-card-lg:hover,
.mob-ord-link:hover {
  border-color:rgba(114,193,66,.45);
  box-shadow:0 4px 20px rgba(26,94,48,.06), 0 0 0 3px rgba(114,193,66,.08);
  background:var(--white);
}
.ord-card-lg .ord-meta { display:flex; gap:16px; flex-wrap:wrap; margin-top:8px }
.ord-card-lg .ord-meta span { font-size:12px; color:var(--text3) }

.photo-placeholder {
  width:100%; aspect-ratio:4/3; border:2px dashed var(--border);
  border-radius:var(--r-md); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px;
  background:var(--s50); cursor:pointer; transition:all .15s;
}
.photo-placeholder:hover { border-color:var(--green); background:var(--green-light) }
.photo-placeholder-title { font-size:13px; font-weight:600; color:var(--text2) }
.photo-thumb.clean {
  background:var(--green-light); color:var(--green-dark);
  font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center;
}

.material-list .mat-item {
  display:flex; align-items:center; gap:10px; font-size:13px;
  color:var(--text2); margin-bottom:8px;
}
.material-list .mat-item.warn { color:var(--amber) }
.mat-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0 }
.mat-dot.ok { background:var(--green) }
.mat-dot.pending { background:var(--amber) }
.mat-dot.warn { background:var(--amber) }

.sig-pad {
  border:2px dashed var(--border); border-radius:var(--r-md); min-height:120px;
  background:var(--s50); display:flex; align-items:center; justify-content:center;
  color:var(--text3); font-size:13px; cursor:pointer; transition:all .15s;
}
.sig-pad:hover { border-color:var(--green); background:var(--green-light) }
.sig-pad.signed { border-color:var(--green); background:var(--green-light) }
.sig-sample { font-size:22px; font-family:Georgia,serif; color:var(--text); font-style:italic }

.prod-tag {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:4px; font-size:9px; font-weight:800;
  background:var(--green-light); color:var(--green-dark); margin-right:8px; flex-shrink:0;
}
.prod-cell { display:flex; align-items:center }

.stage-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--amber) }
.stage-dot.pending { animation:pulse 1.5s infinite }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.stage-check { color:var(--green); font-weight:700 }

.file-icon {
  width:20px; height:20px; border-radius:4px; background:var(--green-light);
  color:var(--green-dark); font-size:9px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
}
.search::before {
  content:''; width:12px; height:12px; border:2px solid var(--text3);
  border-radius:50%; flex-shrink:0;
  box-shadow:3px 3px 0 -2px var(--text3);
}
.search {
  display:flex; align-items:center; gap:8px; padding:0 14px;
  min-height:var(--toolbar-ctrl-h);
  background:var(--bg); border-radius:var(--r-pill);
  border:1.5px solid var(--border);
  transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.search:hover { border-color:#aaa; background:var(--white) }
.search:focus-within {
  border-color:var(--green-muted); background:var(--white);
  box-shadow:0 0 0 3px rgba(114,193,66,.15);
}
.search input { border:none; background:transparent; font-size:13px; color:var(--text); width:200px }
.search input::placeholder { color:var(--text3) }

.kl-success-icon {
  width:48px; height:48px; border-radius:50%; background:var(--green-light);
  color:var(--green-dark); font-size:14px; font-weight:800;
  display:flex; align-items:center; justify-content:center; margin:0 auto 12px;
}
.kl-notif-icon.clean {
  background:var(--green-light)!important; color:var(--green-dark);
  font-size:10px; font-weight:800;
}
.p-stat-val { font-size:22px; font-weight:800 }
.p-stat-lbl { font-size:11px; color:rgba(255,255,255,.5) }

/* Views – display rules merged above */

/* ── MOBILE BOTTOM NAV (RWD) ─────────────────────────────── */
.mobile-nav {
  display:none;
  position:fixed; bottom:0; left:0; right:0; z-index:190;
  background:linear-gradient(180deg, rgba(13,51,25,.94) 0%, rgba(8,32,16,.98) 100%);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--glass-border);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  gap:4px;
  overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  box-shadow:0 -8px 32px rgba(0,0,0,.25);
  justify-content:space-around;
}
.mobile-nav::-webkit-scrollbar { display:none }
.mobile-nav-item {
  flex:1; min-width:64px; max-width:96px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:8px 6px; border:none; background:transparent;
  border-radius:var(--r-md); cursor:pointer;
  color:rgba(255,255,255,.55); font-family:inherit;
  transition:background .15s, color .15s, transform .15s;
}
.mobile-nav-item:active { transform:scale(.94) }
.mobile-nav-item.active {
  color:#fff; background:rgba(255,255,255,.12);
}
.mobile-nav-icon { display:flex; align-items:center; justify-content:center }
.mobile-nav-icon .ico { width:20px; height:20px }
.mobile-nav-label {
  font-size:9px; font-weight:700; letter-spacing:.02em;
  text-align:center; line-height:1.2;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mobile-nav-badge {
  position:absolute; top:4px; right:calc(50% - 22px);
  background:var(--red); color:#fff; font-size:8px; font-weight:800;
  min-width:14px; height:14px; border-radius:var(--r-pill);
  display:flex; align-items:center; justify-content:center; padding:0 3px;
}
.mobile-nav-item { position:relative }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:7px; padding:9px 18px;
  border-radius:var(--r-pill); font-size:13px; font-weight:600;
  transition:all .18s ease; white-space:nowrap; cursor:pointer;
}
.btn:active { transform:scale(.97) }
.btn-primary { background:var(--green-dark); color:#fff }
.btn-primary:hover { background:#154d27; box-shadow:var(--sh2) }
.btn-green { background:var(--green); color:#fff }
.btn-green:hover { background:var(--green-mid) }
.btn-secondary {
  background:var(--white); color:var(--text);
  border:1.5px solid var(--border); box-shadow:var(--sh);
}
.btn-secondary:hover { background:var(--bg) }
.btn-ghost { background:transparent; color:var(--text2); border-radius:var(--r-pill) }
.btn-ghost:hover { background:var(--bg); color:var(--text) }
.btn-danger { background:var(--red); color:#fff }
.btn-dark { background:var(--text); color:#fff }
.btn-dark:hover { background:#333 }
.btn-lg { padding:12px 26px; font-size:15px }
.btn-sm { padding:6px 14px; font-size:12px }
.btn-icon {
  padding:8px; border-radius:50%; background:transparent; color:var(--text2);
  display:inline-flex; align-items:center; justify-content:center;
}
.btn-icon:hover { background:var(--bg); color:var(--text) }

/* ── CARDS ───────────────────────────────────────────────── */
.card {
  background:rgba(255,255,255,.92); border-radius:var(--r-lg);
  box-shadow:0 4px 24px rgba(26,94,48,.06); padding:22px;
  border:1px solid var(--border);
  backdrop-filter:blur(8px);
  transition:box-shadow .2s ease, transform .2s ease;
}
.card:hover { box-shadow:var(--sh2) }
.card-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px }
.card-title { font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--text) }
.card-sub { font-size:12px; color:var(--text3); margin-top:2px }

/* ── KPI CARDS ───────────────────────────────────────────── */
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px }
.kpi-grid-3 { grid-template-columns:repeat(3,1fr) }
.kpi-grid-2 { grid-template-columns:repeat(2,1fr) }
.kpi {
  background:rgba(255,255,255,.92); border-radius:var(--r-lg);
  box-shadow:0 4px 20px rgba(26,94,48,.06);
  padding:24px; position:relative; overflow:hidden;
  border:1px solid var(--border);
  backdrop-filter:blur(6px);
}
/* Accent (green) KPI */
.kpi.accent {
  background:var(--green);
  background-image:linear-gradient(135deg,var(--green) 0%,var(--green-mid) 100%);
}
/* Decorative circle on green card */
.kpi.accent::after {
  content:''; position:absolute; width:160px; height:160px;
  border-radius:50%; background:rgba(255,255,255,.1);
  right:-30px; bottom:-40px;
}
.kpi.accent::before {
  content:''; position:absolute; width:100px; height:100px;
  border-radius:50%; background:rgba(255,255,255,.08);
  right:60px; bottom:10px;
}
.kpi-label { font-size:13px; font-weight:500; color:var(--text2); margin-bottom:10px }
.kpi.accent .kpi-label { color:rgba(255,255,255,.8) }
.kpi-value { font-family:var(--font-display); font-size:32px; font-weight:800; color:var(--text); letter-spacing:-1px; line-height:1 }
.kpi-value.sm { font-size:26px }
.kpi.accent .kpi-value { color:#fff }
.kpi.target { padding-bottom:20px }
.kpi-more {
  position:absolute; top:20px; right:20px; font-size:20px; color:var(--text3);
  background:none; border:none; cursor:pointer; line-height:1;
}
.target-bar {
  display:flex; height:10px; border-radius:var(--r-pill); overflow:hidden;
  margin:14px 0 10px; gap:2px;
}
.target-seg { height:100%; border-radius:var(--r-pill) }
.target-seg.profit { background:var(--green-dark) }
.target-seg.earning { background:var(--green) }
.target-seg.goal {
  background:repeating-linear-gradient(-45deg,var(--green-muted),var(--green-muted) 3px,#fff 3px,#fff 6px);
}
.target-legend { display:flex; gap:14px; flex-wrap:wrap; font-size:11px; color:var(--text3) }
.target-legend span { display:flex; align-items:center; gap:5px }
.target-legend .dot { width:8px; height:8px; border-radius:50%; display:inline-block }
.target-legend .dot.dark { background:var(--green-dark) }
.target-legend .dot.mid { background:var(--green) }
.target-legend .dot.light { background:var(--green-muted) }
.kpi-change {
  display:inline-flex; align-items:center; gap:5px; margin-top:10px;
  padding:4px 10px; border-radius:var(--r-pill); font-size:11px; font-weight:700;
}
.kpi-change.up { background:rgba(255,255,255,.25); color:#fff }
.kpi-change.up-w { background:var(--green-light); color:var(--green-dark) }
.kpi-change.down { background:#FEF2F2; color:var(--red) }
/* Arrow icon */
.kpi-arrow {
  width:30px; height:30px; background:rgba(255,255,255,.22); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  position:absolute; top:20px; right:20px; cursor:pointer; border:none; color:inherit;
  transition:background .15s;
}
.kpi-arrow:hover { background:rgba(255,255,255,.35) }
.kpi:not(.accent) .kpi-arrow { background:var(--bg); color:var(--text2) }
.kpi:not(.accent) .kpi-arrow:hover { background:var(--green-light); color:var(--green-dark) }
/* Diagonal stripe decoration for white KPI */
.kpi.striped::after {
  content:'';
  position:absolute; right:-20px; top:-20px;
  width:120px; height:120px; border-radius:50%;
  background:repeating-linear-gradient(
    45deg, transparent, transparent 4px,
    rgba(114,193,66,.12) 4px, rgba(114,193,66,.12) 8px
  );
}

/* ── BADGES ──────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:4px; padding:4px 10px;
  border-radius:var(--r-pill); font-size:11px; font-weight:700; white-space:nowrap;
}
.bg { background:var(--green-light); color:var(--green-dark) }
.ba { background:#FEF9C3; color:#A16207 }
.br { background:#FEF2F2; color:var(--red) }
.bb { background:#EFF6FF; color:#1D4ED8 }
.bs { background:var(--bg); color:var(--text2) }
.bd { background:var(--text); color:#fff }

/* ── FILTERS / CHIPS ─────────────────────────────────────── */
.filters { display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap }
.chip {
  padding:6px 16px; border-radius:var(--r-pill);
  border:1.5px solid var(--border); background:var(--white);
  font-size:12px; font-weight:600; color:var(--text2); cursor:pointer; transition:all .15s;
  box-shadow:var(--sh);
}
.chip:hover { border-color:#aaa }
.chip.active { background:var(--green-dark); color:#fff; border-color:var(--green-dark) }
.chip-group { display:flex; gap:6px; flex-wrap:wrap }

/* clickable prototype links */
.link-to-client, .link-to-order, .mob-ord-link { cursor:pointer }

/* sales flow sub-views */
.sales-subview { display:block }

/* ── TABLE ───────────────────────────────────────────────── */
.tbl-wrap { overflow-x:auto }
table { width:100%; border-collapse:collapse }
th {
  text-align:left; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; color:var(--text3); padding:10px 16px;
  border-bottom:2px solid var(--bg);
}
td { padding:12px 16px; font-size:13px; color:var(--text2); border-bottom:1px solid var(--bg) }
tr:last-child td { border-bottom:none }
tbody tr:hover td { background:#FAFAFA }
.tbl-click tbody tr { cursor:pointer }

/* ── FORM ────────────────────────────────────────────────── */
.fg { margin-bottom:14px }
.fl { display:block; font-size:12px; font-weight:600; color:var(--text2); margin-bottom:6px }
.fc {
  width:100%; padding:10px 14px; border:1.5px solid var(--border);
  border-radius:var(--r-sm); font-size:13px; color:var(--text);
  background-color:var(--white); transition:border-color .15s;
}
.fc:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(114,193,66,.15) }
select.fc {
  cursor:pointer;
  appearance:none; -webkit-appearance:none;
  padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  transition:background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
select.fc:hover { background-color:var(--bg); border-color:#aaa }
textarea.fc { resize:vertical; min-height:80px }

/* ── AVATARS ─────────────────────────────────────────────── */
.av { display:inline-flex; align-items:center; justify-content:center; font-weight:700; border-radius:50%; flex-shrink:0 }
.av-sm { width:28px; height:28px; font-size:11px }
.av-md { width:36px; height:36px; font-size:13px }
.av-lg { width:52px; height:52px; font-size:18px }
.av-row { display:flex; align-items:center; gap:8px }

/* ── PROGRESS ────────────────────────────────────────────── */
.progress { height:8px; background:var(--bg); border-radius:var(--r-pill); overflow:hidden }
.progress-fill { height:100%; background:var(--green); border-radius:var(--r-pill); transition:width .3s }

/* ── ALERTS ──────────────────────────────────────────────── */
.alert {
  display:flex; align-items:flex-start; gap:10px; padding:12px 16px;
  border-radius:var(--r-md); font-size:13px; margin-bottom:16px; line-height:1.5;
}
.alert-warn {
  --alert-dot-ring:rgba(245,158,11,.34);
  position:relative;
  background:linear-gradient(120deg, rgba(255,247,235,.92) 0%, rgba(255,255,255,.98) 52%, #fff 100%);
  border:1px solid rgba(245,158,11,.14);
  border-radius:var(--r-lg);
  color:var(--text2);
  box-shadow:0 1px 2px rgba(0,0,0,.03), 0 10px 28px rgba(245,158,11,.09);
  padding:14px 18px 14px 44px;
  overflow:hidden;
}
.alert-warn::before {
  content:''; position:absolute; left:18px; top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%; background:var(--amber);
  animation:alertDotPulse 2.4s cubic-bezier(.45,0,.2,1) infinite;
}
.alert-warn::after {
  content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(245,158,11,.28), transparent);
}
.alert-warn strong { color:var(--text) }
.alert-err  {
  --alert-dot-ring:rgba(239,68,68,.28);
  position:relative;
  background:linear-gradient(120deg, rgba(254,242,242,.92) 0%, rgba(255,255,255,.98) 52%, #fff 100%);
  border:1px solid rgba(239,68,68,.14);
  border-radius:var(--r-lg);
  color:var(--text2);
  box-shadow:0 1px 2px rgba(0,0,0,.03), 0 10px 28px rgba(239,68,68,.08);
  padding:14px 18px 14px 44px;
  overflow:hidden;
}
.alert-err::before {
  content:''; position:absolute; left:18px; top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%; background:var(--red);
  animation:alertDotPulse 2.4s cubic-bezier(.45,0,.2,1) infinite;
}
.alert-err::after {
  content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(239,68,68,.25), transparent);
}
.alert-err strong { color:var(--text) }
.alert-ok   {
  --alert-dot-ring:rgba(114,193,66,.28);
  position:relative;
  background:linear-gradient(120deg, rgba(235,247,226,.92) 0%, rgba(255,255,255,.98) 52%, #fff 100%);
  border:1px solid rgba(114,193,66,.14);
  border-radius:var(--r-lg);
  color:var(--text2);
  box-shadow:0 1px 2px rgba(0,0,0,.03), 0 10px 28px rgba(26,94,48,.08);
  padding:14px 18px 14px 44px;
  overflow:hidden;
}
.alert-ok::before {
  content:''; position:absolute; left:18px; top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%; background:var(--green);
  animation:alertDotPulse 2.4s cubic-bezier(.45,0,.2,1) infinite;
}
.alert-ok::after {
  content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(114,193,66,.25), transparent);
}
.alert-ok strong { color:var(--green-dark) }
.alert-info {
  --alert-dot-ring:rgba(59,130,246,.28);
  position:relative;
  background:linear-gradient(120deg, rgba(239,246,255,.92) 0%, rgba(255,255,255,.98) 52%, #fff 100%);
  border:1px solid rgba(59,130,246,.14);
  border-radius:var(--r-lg);
  color:var(--text2);
  box-shadow:0 1px 2px rgba(0,0,0,.03), 0 10px 28px rgba(59,130,246,.08);
  padding:14px 18px 14px 44px;
  overflow:hidden;
}
.alert-info::before {
  content:''; position:absolute; left:18px; top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%; background:var(--blue);
  animation:alertDotPulse 2.4s cubic-bezier(.45,0,.2,1) infinite;
}
.alert-info::after {
  content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(59,130,246,.25), transparent);
}
.alert-info strong { color:#1E40AF }
.alert-info.insight-card {
  padding:14px 18px;
  background:var(--white);
  border:1px solid var(--border);
  box-shadow:var(--sh);
}
.alert-info.insight-card::before,
.alert-info.insight-card::after { display:none }

@keyframes alertDotPulse {
  0% {
    transform:translateY(-50%) scale(1);
    box-shadow:0 0 0 0 var(--alert-dot-ring);
  }
  55% {
    transform:translateY(-50%) scale(1.06);
    box-shadow:0 0 0 10px transparent;
  }
  100% {
    transform:translateY(-50%) scale(1);
    box-shadow:0 0 0 0 transparent;
  }
}

/* ── LAYOUT HELPERS ──────────────────────────────────────── */
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px }
.grid21 { display:grid; grid-template-columns:2fr 1fr; gap:20px }
.grid12 { display:grid; grid-template-columns:1fr 2fr; gap:20px }
.flex { display:flex } .fac { align-items:center } .fjb { justify-content:space-between }
.g8{gap:8px}.g10{gap:10px}.g12{gap:12px}.g16{gap:16px}.g20{gap:20px}.g24{gap:24px}
.mb4{margin-bottom:4px}.mb6{margin-bottom:6px}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}
.mb16{margin-bottom:16px}.mb20{margin-bottom:20px}.mb24{margin-bottom:24px}
.mt4{margin-top:4px}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}
.mt20{margin-top:20px}.mt24{margin-top:24px}
.divider { height:1px; background:var(--bg); margin:18px 0 }
.ts{font-size:12px}.txs{font-size:11px}.tmuted{color:var(--text3)}.tsemibold{font-weight:600}.tbold{font-weight:700}
.tgreen{color:var(--green-dark)}.tred{color:var(--red)}

.ph-select {
  width:auto !important; min-width:120px;
  height:var(--toolbar-ctrl-h);
  padding:0 34px 0 14px;
  border-radius:var(--r-pill);
  font-size:12px; font-weight:600; line-height:1;
  appearance:none; -webkit-appearance:none;
  cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
}
.card .card-hd .ph-select,
.card .ph-select {
  background-color:var(--white);
  color:var(--text);
  border-color:var(--border);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.card .ph-select:hover,
.card .select-field:hover .ph-select {
  background-color:var(--bg);
  border-color:#aaa;
}
.card .ph-select:focus,
.card .select-field:focus-within .ph-select {
  border-color:var(--green-muted);
  box-shadow:0 0 0 3px rgba(114,193,66,.15);
  outline:none;
}

/* Dropdown chevron overlay (ph-select w nagłówkach) */
.select-field {
  position:relative; display:inline-flex; align-items:center;
  height:var(--toolbar-ctrl-h);
}
.ph-actions .select-field,
.ph > .flex.g8.fac .select-field,
.card-hd .select-field,
.card-hd .flex .select-field {
  height:var(--toolbar-ctrl-h);
}
.select-field .ph-select {
  background-image:none; padding-right:34px;
  height:100%; min-height:0;
}
.select-field::after {
  content:''; position:absolute; right:14px; top:50%;
  width:7px; height:7px; margin-top:-4px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); pointer-events:none; opacity:.8;
  transition:opacity .18s ease, transform .18s ease;
}
.select-field:hover::after,
.select-field:focus-within::after { opacity:1 }
.ph .select-field:hover::after,
.ph .select-field:focus-within::after { transform:rotate(45deg) translateY(1px) }
.ph .select-field { color:rgba(255,255,255,.85) }
.card .select-field { color:var(--text3) }
.card .select-field:hover,
.card .select-field:focus-within { color:var(--text2) }

/* ── ACTIVITY FEED ───────────────────────────────────────── */
.act-item { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--bg) }
.act-item:last-child { border-bottom:none }
.act-dot { width:8px; height:8px; border-radius:50%; margin-top:5px; flex-shrink:0 }
.act-text { font-size:13px; color:var(--text2); flex:1 }
.act-time { font-size:11px; color:var(--text3); flex-shrink:0 }

/* ── CHART BARS ──────────────────────────────────────────── */
.chart-bars { display:flex; align-items:flex-end; gap:6px; height:80px }
.chart-bars.tall { height:140px }
.chart-bar {
  flex:1; border-radius:5px 5px 0 0; min-height:6px;
  background:repeating-linear-gradient(
    -45deg, var(--green), var(--green) 4px,
    var(--green-mid) 4px, var(--green-mid) 8px
  );
  opacity:.7; transition:opacity .15s;
}
.chart-bar:hover { opacity:1 }
.chart-bar.hi {
  background:var(--green);
  box-shadow:0 -4px 12px rgba(114,193,66,.4);
  opacity:1;
}
.chart-labels { display:flex; gap:6px; margin-top:6px }
.chart-lbl { flex:1; text-align:center; font-size:10px; color:var(--text3) }

/* ── GAUGE (CSAT) ────────────────────────────────────────── */
.gauge-card { text-align:center }
.gauge-wrap { position:relative; max-width:260px; margin:0 auto 16px }
.gauge-svg { width:100%; height:auto; display:block }
.gauge-center { position:absolute; left:50%; bottom:8px; transform:translateX(-50%); text-align:center }
.gauge-num { font-size:28px; font-weight:800; color:var(--text); letter-spacing:-1px }
.gauge-lbl { font-size:12px; color:var(--text3); margin-top:2px }
.gauge-badge {
  display:inline-flex; align-items:center; gap:6px; padding:6px 14px;
  border-radius:var(--r-pill); background:var(--green-light); color:var(--green-dark);
  font-size:12px; font-weight:600; margin-bottom:10px;
}
.gauge-note { font-size:13px; color:var(--text3); line-height:1.5 }

/* ── PIPELINE ────────────────────────────────────────────── */
.pipeline { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:24px }
.garden-flow-card {
  position:relative; overflow:hidden;
}
.garden-flow-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--green-dark), var(--green), var(--green-mid), var(--teal), var(--green-dark));
}
.garden-flow-card .card-sub { font-size:12px; color:var(--text3) }
.pipe-col { position:relative }
.pipe-col:not(:last-child)::after {
  content:''; position:absolute; top:18px; right:-8px; width:16px; height:2px;
  background:linear-gradient(90deg, var(--green-muted), var(--green));
  border-radius:var(--r-pill); z-index:1;
}
.pipe-col {}
.pipe-hd {
  padding:8px 12px; border-radius:var(--r-sm) var(--r-sm) 0 0;
  margin-bottom:6px; display:flex; align-items:center; justify-content:space-between;
}
.pipe-title { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.5px }
.pipe-cnt { font-size:12px; font-weight:800 }
.pipe-card {
  background:var(--white); border-radius:var(--r-sm); box-shadow:var(--sh);
  padding:10px; margin-bottom:6px; cursor:pointer; transition:box-shadow .15s;
}
.pipe-card:hover { box-shadow:var(--sh2) }
.pipe-name { font-size:12px; font-weight:700; color:var(--text); margin-bottom:3px }
.pipe-meta { font-size:11px; color:var(--text3) }
.pipe-val { font-size:12px; font-weight:800; color:var(--green-dark); margin-top:6px }

/* ── STATUS BAR ──────────────────────────────────────────── */
.status-bar { display:flex; align-items:center; gap:0; overflow-x:auto; margin-bottom:20px }
.status-step { display:flex; align-items:center; gap:7px; flex-shrink:0 }
.status-step-dot {
  width:28px; height:28px; border-radius:50%; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:var(--text3); flex-shrink:0;
}
.status-step.done .status-step-dot { background:var(--green); color:#fff }
.status-step.current .status-step-dot { background:var(--green-dark); color:#fff; box-shadow:0 0 0 4px rgba(26,94,48,.15) }
.status-step-label { font-size:11px; font-weight:600; color:var(--text3) }
.status-step.done .status-step-label { color:var(--green-mid) }
.status-step.current .status-step-label { color:var(--text); font-weight:700 }
.status-connector { height:2px; width:28px; background:var(--bg); flex-shrink:0 }
.status-connector.done { background:var(--green) }

/* ── PROFILE HERO (legacy aliases → page-hero) ─────────── */

/* ── TIMELINE ────────────────────────────────────────────── */
.tl-item { display:flex; gap:12px; margin-bottom:14px }
.tl-line { display:flex; flex-direction:column; align-items:center; flex-shrink:0; width:12px }
.tl-dot { width:10px; height:10px; border-radius:50%; background:var(--green); flex-shrink:0 }
.tl-conn { width:2px; flex:1; background:var(--bg); margin-top:4px }
.tl-content { flex:1; padding-bottom:10px }
.tl-title { font-size:13px; font-weight:600; color:var(--text) }
.tl-desc { font-size:12px; color:var(--text3); margin-top:2px }

/* ── SALES FLOW STEPS ────────────────────────────────────── */
.flow-steps {
  display:flex; align-items:center; background:var(--white);
  border-radius:var(--r-lg); box-shadow:var(--sh);
  padding:14px 22px; margin-bottom:24px; overflow-x:auto;
}
.fs { display:flex; align-items:center; gap:8px; flex-shrink:0 }
.fs-num {
  width:26px; height:26px; border-radius:50%; background:var(--bg);
  color:var(--text3); display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800;
}
.fs.done .fs-num { background:var(--green); color:#fff }
.fs.current .fs-num { background:var(--green-dark); color:#fff }
.fs-label { font-size:12px; font-weight:600; color:var(--text3) }
.fs.done .fs-label { color:var(--green-mid) }
.fs.current .fs-label { color:var(--text); font-weight:700 }
.fs-arrow { margin:0 10px; color:#ccc; font-size:12px; flex-shrink:0 }

/* ── PRODUCT CONFIGURATOR ────────────────────────────────── */
.cat-tabs { display:flex; gap:6px; margin-bottom:18px }
.cat-tab {
  padding:9px 18px; border-radius:var(--r-pill);
  border:2px solid var(--border); font-size:13px; font-weight:700;
  cursor:pointer; transition:all .15s; background:var(--white);
  box-shadow:var(--sh);
}
.cat-tab:hover { border-color:#aaa }
.cat-tab.active { border-color:var(--green); background:var(--green-light); color:var(--green-dark) }
.prod-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.prod-card {
  border:2px solid var(--border); border-radius:var(--r-lg);
  padding:18px; cursor:pointer; transition:all .15s; background:var(--white);
  box-shadow:var(--sh);
}
.prod-card:hover { border-color:var(--green); box-shadow:0 0 0 3px rgba(114,193,66,.2) }
.prod-card.sel { border-color:var(--green); background:var(--green-light) }
.prod-tag {
  width:40px; height:40px; border-radius:var(--r-sm); background:var(--green-light);
  color:var(--green-dark); font-size:11px; font-weight:800; display:flex;
  align-items:center; justify-content:center; margin-bottom:10px;
}
.prod-card.sel .prod-tag { background:var(--green); color:#fff }
.prod-icon { display:none }
.prod-name { font-size:14px; font-weight:700; color:var(--text); margin-bottom:4px }
.prod-desc { font-size:12px; color:var(--text3); margin-bottom:10px; line-height:1.4 }
.prod-price { font-size:14px; font-weight:800; color:var(--green-dark) }
.variants { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px }
.variant {
  padding:7px 16px; border:2px solid var(--border); border-radius:var(--r-pill);
  font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; background:var(--white);
}
.variant:hover { border-color:#aaa }
.variant.sel { border-color:var(--green); background:var(--green-light); color:var(--green-dark) }
.swatches { display:flex; gap:8px; flex-wrap:wrap }
.swatch { width:30px; height:30px; border-radius:50%; cursor:pointer; border:3px solid transparent; transition:all .15s }
.swatch.sel { border-color:var(--text); transform:scale(1.18) }

/* ── MARGIN CALCULATOR ───────────────────────────────────── */
.calc-dark {
  background:var(--text); border-radius:var(--r-xl);
  padding:26px; color:#fff;
}
.calc-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 0; border-bottom:1px solid rgba(255,255,255,.08);
}
.calc-row:last-child { border-bottom:none }
.calc-row-label { font-size:13px; color:rgba(255,255,255,.55) }
.calc-row-val { font-size:15px; font-weight:700 }
.calc-row-val.big { font-size:26px; font-weight:800; color:var(--green) }
.calc-row-val.earn { color:#FDE047 }
input[type=range] { width:100%; accent-color:var(--green); cursor:pointer; margin:6px 0 }
.range-labels { display:flex; justify-content:space-between; font-size:11px; color:var(--text3); margin-top:2px }

/* ── CHECKLIST ───────────────────────────────────────────── */
.cl-item {
  display:flex; align-items:flex-start; gap:10px; padding:12px 14px;
  border:1.5px solid var(--border); border-radius:var(--r-sm);
  background:var(--white); margin-bottom:6px; cursor:pointer; transition:all .15s;
  box-shadow:var(--sh);
}
.cl-item:hover { border-color:#aaa }
.cl-item.checked { border-color:var(--green-muted); background:var(--green-light) }
.cl-box {
  width:20px; height:20px; border-radius:5px; border:2px solid #ccc;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-top:1px; transition:all .15s; font-size:12px;
}
.cl-item.checked .cl-box { background:var(--green); border-color:var(--green); color:#fff }
.cl-main { font-size:13px; font-weight:600; color:var(--text) }
.cl-sub { font-size:11px; color:var(--text3); margin-top:2px }

/* ── VISUALIZATION ───────────────────────────────────────── */
.viz-box {
  position:relative; background:linear-gradient(135deg,#1e3a5f,#0f2040);
  border-radius:var(--r-xl); overflow:hidden; aspect-ratio:16/9;
  margin-bottom:16px; display:flex; align-items:center; justify-content:center;
}
.viz-scene {
  position:absolute; inset:0;
  background:linear-gradient(180deg,#87CEEB 0%,#87CEEB 45%,#5a9e4a 45%,#3d7a32 100%);
}
.viz-scene::after {
  content:''; position:absolute; bottom:28%; left:15%; width:35%; height:22%;
  background:linear-gradient(135deg,#8B7355,#6B5344); border-radius:4px 4px 0 0;
  box-shadow:40px 0 0 -5px #7a6348;
}
.viz-house { display:none }
.viz-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center }
.viz-product {
  background:rgba(114,193,66,.2); border:2px solid var(--green);
  border-radius:var(--r-md); padding:20px 32px; color:#fff; text-align:center; backdrop-filter:blur(6px);
}
.viz-product-title { font-size:14px; font-weight:700; margin-bottom:4px }
.viz-product-size { font-size:12px; color:rgba(255,255,255,.7) }
.viz-badge {
  position:absolute; top:12px; right:12px; background:rgba(0,0,0,.55);
  color:#fff; padding:4px 12px; border-radius:var(--r-pill); font-size:11px; font-weight:600;
}
.viz-tools { display:flex; gap:8px; flex-wrap:wrap }
.viz-btn {
  padding:7px 14px; background:var(--white); border:1.5px solid var(--border);
  border-radius:var(--r-pill); font-size:12px; font-weight:600; cursor:pointer; transition:all .15s;
  box-shadow:var(--sh);
}
.viz-btn:hover { background:var(--bg) }
.viz-scene.viz-before::after { opacity: 0.35; filter: grayscale(0.6) }
.viz-scene.viz-after::after { opacity: 1 }
.viz-mode-toggle { display:flex; gap:8px }
.viz-product { transition: opacity .35s ease, transform .35s ease, border-color .2s }
.chart-bar-hover { filter: brightness(1.08); transform: scaleY(1.02); transform-origin: bottom }
.chart-bar { transition: filter .15s, transform .15s }

/* ── HD DEALS PIPELINE ───────────────────────────────────── */
.hd-deals-summary {
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px;
}
.hd-deal-stat {
  background:var(--bg); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:14px; text-align:center;
}
.hd-deal-stat.accent { background:var(--g50); border-color:var(--g200) }
.hd-deal-num { display:block; font-size:22px; font-weight:800; color:var(--text) }
.hd-deal-lbl { font-size:11px; color:var(--text3); font-weight:600 }
.hd-deals-list { display:flex; flex-direction:column; gap:8px }
.hd-deal-row {
  display:grid; grid-template-columns:1fr auto auto; gap:16px; align-items:center;
  padding:12px 14px; border:1px solid var(--border); border-radius:var(--r-md);
}

/* ── CRM TOAST ───────────────────────────────────────────── */
.crm-toast {
  display:flex; align-items:center; padding:10px 14px; margin-bottom:12px;
  background:var(--g50); border:1px solid var(--g200); border-radius:var(--r-md);
  font-size:13px; font-weight:600; color:var(--g700);
}

/* ── CONTRACT ────────────────────────────────────────────── */
.contract {
  background:var(--white); border-radius:var(--r-lg);
  box-shadow:var(--sh); padding:32px; max-width:680px; margin:0 auto;
}
.contract-hd { text-align:center; margin-bottom:24px; padding-bottom:20px; border-bottom:2px solid var(--bg) }
.contract-company { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--green-dark); margin-bottom:6px }
.contract-title { font-size:20px; font-weight:800; color:var(--text); margin-bottom:4px }
.contract-nr { font-size:13px; color:var(--text3) }
.c-section { margin-bottom:20px }
.c-sec-title { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--text3); margin-bottom:10px; padding-bottom:6px; border-bottom:2px solid var(--bg) }
.c-row { display:flex; gap:16px; margin-bottom:6px }
.c-lbl { font-size:12px; color:var(--text3); width:150px; flex-shrink:0 }
.c-val { font-size:13px; color:var(--text); font-weight:600 }
.c-total { background:var(--green-light); border:1.5px solid var(--green-muted); border-radius:var(--r-sm); padding:14px 18px; margin:16px 0 }
.c-total-row { display:flex; justify-content:space-between; font-size:15px; font-weight:800; color:var(--green-dark) }
.sig-boxes { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:28px }
.sig-box { border:2px dashed #ccc; border-radius:var(--r-sm); padding:20px; text-align:center; min-height:80px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end }
.sig-lbl { font-size:11px; color:var(--text3); margin-top:8px }
.sig-done { font-size:24px }

/* ── PHOTO ZONE ──────────────────────────────────────────── */
.photo-zone {
  border:2px dashed #ccc; border-radius:var(--r-lg); padding:24px;
  text-align:center; cursor:pointer; transition:all .15s;
}
.photo-zone:hover { border-color:var(--green); background:var(--green-light) }
.photo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px }
.photo-grid-4 { grid-template-columns:repeat(4,1fr) }
.photo-thumb {
  aspect-ratio:1; background:var(--bg); border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center; font-size:24px; position:relative;
  overflow:hidden;
}
.photo-thumb img {
  width:100%; height:100%; object-fit:cover; display:block;
}
.photo-thumb-add {
  border:2px dashed var(--border); background:transparent; color:var(--text3);
  font-size:22px; cursor:pointer; transition:all .15s;
}
.photo-thumb-add:hover { border-color:var(--green); color:var(--green-dark); background:var(--green-light) }
.photo-thumb-more img { filter:brightness(.5) }
.photo-thumb-more span {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:800; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.35);
}
.photo-thumb .check-mark {
  position:absolute; top:4px; right:4px; background:var(--green); color:#fff;
  border-radius:50%; width:18px; height:18px; display:flex; align-items:center; justify-content:center; font-size:10px;
}

/* ── CLIENT PANEL ────────────────────────────────────────── */
.kl-order-card {
  background:var(--white); border-radius:var(--r-xl); box-shadow:var(--sh);
  padding:22px; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.kl-order-card-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:4px }
.kl-order-id { font-size:11px; font-weight:700; color:var(--text3); margin-bottom:4px }
.kl-order-name { font-size:18px; font-weight:800; color:var(--text) }
.kl-order-meta { font-size:12px; color:var(--text3); margin-top:4px }
.kl-order-progress-block { margin:16px 0 4px; width:100% }
.kl-order-progress-bar { height:8px; width:100% }
.kl-stepper { width:100%; margin-top:14px }
.kl-stepper-track {
  position:relative; width:100%; height:22px; margin-bottom:6px;
}
.kl-stepper-rail {
  position:absolute; top:50%; left:0; right:0; width:100%; height:3px;
  transform:translateY(-50%);
  background:var(--bg); border-radius:var(--r-pill); overflow:hidden;
}
.kl-stepper-rail-fill {
  height:100%; border-radius:var(--r-pill);
  background:linear-gradient(90deg, var(--green-dark), var(--green));
  transition:width .45s cubic-bezier(.4,0,.2,1);
}
.kl-stepper-markers {
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(5, 1fr);
  width:100%; height:100%; align-items:center;
}
.kl-stepper-markers .kl-stepper-marker:nth-child(1) { justify-self:start }
.kl-stepper-markers .kl-stepper-marker:nth-child(5) { justify-self:end }
.kl-stepper-markers .kl-stepper-marker:nth-child(2),
.kl-stepper-markers .kl-stepper-marker:nth-child(3),
.kl-stepper-markers .kl-stepper-marker:nth-child(4) { justify-self:center }
.kl-stepper-marker {
  width:22px; height:22px; border-radius:50%; background:var(--white);
  border:2px solid var(--s200); display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800; color:var(--text3);
  box-shadow:0 1px 4px rgba(0,0,0,.06); transition:all .2s ease;
}
.kl-stepper-marker.is-done {
  background:var(--green); border-color:var(--green); color:#fff;
  box-shadow:0 2px 8px rgba(26,94,48,.18);
}
.kl-stepper-marker.is-active {
  border-color:var(--green-dark); box-shadow:0 0 0 4px rgba(26,94,48,.12);
  animation:klStepPulse 2.4s cubic-bezier(.45,0,.2,1) infinite;
}
.kl-stepper-marker.is-active::after {
  content:''; width:8px; height:8px; border-radius:50%; background:var(--green-dark);
}
.kl-stepper-labels {
  display:grid; grid-template-columns:repeat(5, 1fr); gap:4px; width:100%;
}
.kl-stepper-labels span {
  font-size:10px; font-weight:600; color:var(--text3); text-align:center;
  line-height:1.25; min-width:0;
}
.kl-stepper-labels span.is-done { color:var(--green-dark) }
.kl-stepper-labels span.is-active { color:var(--text); font-weight:700 }
@keyframes klStepPulse {
  0%, 100% { box-shadow:0 0 0 4px rgba(26,94,48,.12) }
  55% { box-shadow:0 0 0 7px rgba(26,94,48,.04) }
}
.kl-quick-card {
  background:rgba(255,255,255,.92); border-radius:var(--r-lg);
  box-shadow:0 4px 20px rgba(26,94,48,.06);
  padding:18px; text-align:center; cursor:pointer;
  border:1.5px solid var(--border);
  backdrop-filter:blur(6px);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.kl-quick-card:hover {
  border-color:rgba(114,193,66,.45);
  box-shadow:0 4px 20px rgba(26,94,48,.06), 0 0 0 3px rgba(114,193,66,.08);
  background:var(--white);
}
.kl-quick-icon {
  width:44px; height:44px; margin:0 auto 8px;
  background:var(--green-light); color:var(--green-dark); border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
}
.kl-quick-icon .ico { width:22px; height:22px }
.kl-quick-label { font-size:12px; font-weight:700; color:var(--text2) }
.kl-hist-item { display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--bg) }
.kl-hist-item:last-child { border-bottom:none }
.kl-hist-icon {
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:var(--green-light); color:var(--green-dark); border-radius:var(--r-md); flex-shrink:0;
}
.kl-hist-icon .ico { width:22px; height:22px }
.kl-hist-icon.is-active {
  background:var(--white); border:1.5px solid rgba(59,130,246,.35); color:var(--blue);
  box-shadow:0 0 0 3px rgba(59,130,246,.08);
}
.kl-guarantee { background:var(--green-light); border:1.5px solid var(--green-muted); border-radius:var(--r-sm); padding:10px 12px; display:flex; align-items:flex-start; gap:8px; font-size:12px; color:var(--green-dark) }
.kl-timeline { display:flex; flex-direction:column }
.kl-tl-item { display:flex; gap:12px; position:relative; min-height:48px }
.kl-tl-dot { width:24px; height:24px; border-radius:50%; background:var(--bg); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:var(--text3); flex-shrink:0; z-index:1 }
.kl-tl-dot.done { background:var(--green); color:#fff }
.kl-tl-dot.active { background:var(--green-dark); color:#fff; box-shadow:0 0 0 4px rgba(26,94,48,.15) }
.kl-tl-line { position:absolute; left:11px; top:24px; bottom:-4px; width:2px; background:var(--bg) }
.kl-tl-line.done { background:var(--green) }
.kl-tl-body { flex:1; padding-bottom:20px; padding-top:2px }
.kl-tl-title { font-size:13px; font-weight:600; color:var(--text) }
.kl-tl-date { font-size:12px; color:var(--text3); margin-top:2px }
.kl-notif-item { display:flex; align-items:flex-start; gap:12px; padding:14px 0; border-bottom:1px solid var(--bg); cursor:pointer; transition:background .15s }
.kl-notif-item:last-child { border-bottom:none }
.kl-notif-item.unread { background:var(--green-light); margin:0 -22px; padding:14px 22px; border-radius:var(--r-sm) }
.kl-notif-icon { width:40px; height:40px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0 }
.kl-notif-dot { width:8px; height:8px; background:var(--green); border-radius:50%; flex-shrink:0; margin-top:5px }
.kl-stars { display:flex; gap:6px }
.kl-star { font-size:32px; color:#ddd; cursor:pointer; transition:color .1s; user-select:none }
.kl-star.hover,.kl-star.active { color:var(--amber) }
.kl-success-box { text-align:center; padding:48px 24px; background:var(--white); border-radius:var(--r-xl); box-shadow:var(--sh) }
.kl-success-icon { font-size:60px; margin-bottom:16px }
.kl-success-title { font-size:24px; font-weight:800; color:var(--text); margin-bottom:8px }
.kl-success-sub { font-size:14px; color:var(--text3); max-width:400px; margin:0 auto; line-height:1.6 }
.kl-toggle { position:relative; display:inline-block; width:44px; height:24px }
.kl-toggle input { opacity:0; width:0; height:0 }
.kl-toggle span { position:absolute; inset:0; background:#ccc; border-radius:100px; cursor:pointer; transition:.2s }
.kl-toggle span::before { content:''; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s }
.kl-toggle input:checked+span { background:var(--green) }
.kl-toggle input:checked+span::before { transform:translateX(20px) }

/* ── MOBILE / CONTRACTOR (legacy → full layout) ─────────────── */
.mobile-wrap { max-width:none; margin:0 }
.mob-topbar {
  display:none;
}
.mob-back { display:none }
.ord-card { background:var(--white); border-radius:var(--r-lg); box-shadow:var(--sh); padding:16px; margin-bottom:10px; cursor:pointer; transition:box-shadow .15s }
.ord-card:hover { box-shadow:var(--sh2) }
.ord-id { font-size:11px; font-weight:700; color:var(--text3); margin-bottom:2px }
.ord-name { font-size:14px; font-weight:700; color:var(--text) }
.ord-meta { font-size:12px; color:var(--text3); display:flex; gap:12px; margin-top:6px }
.escrow-pill, .fx-shield-pill {
  background:linear-gradient(135deg, var(--green-light) 0%, #fff 100%);
  border:1.5px solid var(--green-muted); border-radius:var(--r-lg);
  padding:14px 18px; display:flex; align-items:center; gap:14px; margin-bottom:16px;
  position:relative; overflow:hidden;
}
.fx-shield-pill::before {
  content:''; position:absolute; inset:0; background:var(--fx-stripe); opacity:.5; pointer-events:none;
}
.escrow-icon, .fx-shield-icon {
  width:40px; height:40px; border-radius:var(--r-sm); background:var(--green-dark);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  color:#fff; font-size:12px; font-weight:800; letter-spacing:.5px;
  position:relative; z-index:1;
}
.fx-shield-icon.sm { width:32px; height:32px; font-size:10px }
.fx-shield-label { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--green-dark); position:relative; z-index:1 }
.escrow-amount { font-size:18px; font-weight:800; color:var(--green-dark); position:relative; z-index:1 }

/* ── LOGIN SCREEN ────────────────────────────────────────── */
.login-screen {
  min-height:100vh; display:grid; grid-template-columns:1.1fr 1fr;
  position:relative; overflow:hidden;
}
.login-brand-panel {
  background:linear-gradient(155deg, var(--green-dark) 0%, #0d3319 45%, var(--teal) 100%);
  display:flex; align-items:center; justify-content:center; padding:var(--pad-login);
  position:relative; overflow:hidden;
}
.login-brand-panel::before {
  content:''; position:absolute; inset:0;
  background:var(--fx-garden-grid); background-size:var(--fx-garden-size);
  opacity:.12;
}
.login-brand-panel::after {
  content:''; position:absolute; width:420px; height:420px; border-radius:50%;
  background:rgba(114,193,66,.08); right:-120px; bottom:-80px;
}
.login-brand-inner { position:relative; z-index:1; max-width:420px; color:#fff }
.login-brand-logo { display:flex; align-items:center; gap:12px; margin-bottom:32px }
.login-brand-name { font-family:var(--font-display); font-size:28px; font-weight:800; letter-spacing:-.5px }
.login-brand-os { font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-top:2px }
.login-brand-headline { font-family:var(--font-display); font-size:36px; font-weight:800; line-height:1.1; letter-spacing:-1px; margin-bottom:16px }
.login-brand-lead { font-size:14px; color:rgba(255,255,255,.72); line-height:1.65; margin-bottom:32px }
.login-brand-pillars { list-style:none; display:flex; flex-direction:column; gap:14px; margin-bottom:40px }
.login-brand-pillars li {
  display:flex; align-items:flex-start; gap:14px; padding:14px 16px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-md); backdrop-filter:blur(4px);
}
.pillar-icon {
  width:36px; height:36px; border-radius:var(--r-sm); background:rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800;
  flex-shrink:0; letter-spacing:.3px;
}
.login-brand-pillars strong { display:block; font-size:13px; font-weight:700; margin-bottom:2px }
.login-brand-pillars span { font-size:12px; color:rgba(255,255,255,.6) }
.login-brand-footer { font-size:11px; color:rgba(255,255,255,.35) }

.login-form-panel {
  display:flex; align-items:center; justify-content:center; padding:var(--pad-login);
  background:var(--bg); position:relative;
}
.login-form-panel::before {
  content:''; position:absolute; inset:0; background:var(--fx-stripe); opacity:.4;
}
.login-card {
  background:var(--white); border-radius:var(--r-xl); padding:32px; width:100%; max-width:440px;
  position:relative; z-index:1; box-shadow:var(--sh2); border:1px solid var(--border);
}
.login-logo { display:flex; align-items:center; gap:12px; margin-bottom:24px }
.login-logo-text { font-family:var(--font-display); font-size:22px; font-weight:800; color:var(--text); letter-spacing:-.4px }
.login-headline { font-family:var(--font-display); font-size:22px; font-weight:800; margin-bottom:6px }
.login-sub { font-size:13px; color:var(--text3); margin-bottom:24px }
.login-footnote { text-align:center; font-size:12px; color:var(--text3); margin-top:16px }
.role-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:24px }
.role-card {
  border:2px solid var(--border); border-radius:var(--r-lg); padding:14px 12px;
  cursor:pointer; transition:border-color .15s, background .15s, box-shadow .15s;
  text-align:center; box-shadow:var(--sh);
}
.role-card:hover { border-color:var(--green-muted); background:#fafafa }
.role-card.sel { border-color:var(--green); background:var(--green-light); box-shadow:var(--sh) }
.role-card-name { font-size:14px; font-weight:700; color:var(--text) }
.role-card-desc { font-size:11px; color:var(--text3); margin-top:4px; line-height:1.4 }

/* ── APP BRAND FOOTER ────────────────────────────────────── */
.app-brand-footer {
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
  padding:var(--pad-y) var(--pad-x); font-size:11px; font-weight:600;
  color:rgba(255,255,255,.45);
  border-top:1px solid var(--glass-border);
  background:linear-gradient(155deg, #1A5E30 0%, #0d3319 100%);
  backdrop-filter:blur(8px);
}
.app-brand-footer .app-brand-muted { color:rgba(255,255,255,.35) }
.app-brand-sep { opacity:.4 }
.app-brand-muted { font-weight:500; color:var(--text3); letter-spacing:.02em }

@media(max-width:900px) {
  .login-screen { grid-template-columns:1fr }
  .login-brand-panel { min-height:auto }
  .login-brand-headline { font-size:28px }
  .login-brand-pillars { margin-bottom:24px }
}


/* ── STATS ROW ─────────────────────────────────────────────── */
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px }
.stat-card {
  background:var(--white); border-radius:var(--r-lg); box-shadow:var(--sh);
  padding:18px 20px;
}
.stat-card-label { font-size:12px; font-weight:600; color:var(--text3); margin-bottom:6px }
.stat-card-val { font-size:26px; font-weight:800; color:var(--text); letter-spacing:-.5px }
.stat-card-sub { font-size:11px; color:var(--text3); margin-top:4px }
.stat-card-sub.up { color:var(--green-dark); font-weight:600 }

/* ── CATEGORY PILLS ──────────────────────────────────────── */
.cat-pill {
  display:inline-flex; padding:4px 10px; border-radius:var(--r-pill);
  font-size:11px; font-weight:700;
}
.cat-pill.og { background:var(--green-light); color:var(--green-dark) }
.cat-pill.bu { background:#EFF6FF; color:#1D4ED8 }
.cat-pill.wn { background:#F5F3FF; color:#6D28D9 }

/* ── MODAL ─────────────────────────────────────────────────── */
.fx-modal {
  position:fixed; inset:0; z-index:700;
  display:none; align-items:center; justify-content:center; padding:20px;
  background:rgba(15,23,42,.45); backdrop-filter:blur(4px);
}
.fx-modal.open { display:flex }
.fx-modal-panel {
  width:min(480px,100%); max-height:90vh; overflow-y:auto;
  background:var(--white); border-radius:var(--r-lg); box-shadow:var(--sh2);
  padding:24px; border:1px solid var(--border);
}
.fx-modal-hd {
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--border);
}
.fx-modal-title { font-size:18px; font-weight:800; color:var(--text); margin-bottom:4px }
.fx-modal-sub { font-size:13px; color:var(--text3) }
.fx-modal-actions {
  display:flex; justify-content:flex-end; gap:8px; margin-top:8px;
  padding-top:16px; border-top:1px solid var(--border);
}

/* ── VISIT CARDS ───────────────────────────────────────────── */
.visit-list { display:flex; flex-direction:column; gap:8px }
.visit-card {
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  border-radius:var(--r-md); border:1.5px solid var(--border);
  background:var(--white); transition:all .15s;
}
.visit-card.done { background:var(--green-light); border-color:var(--green-muted) }
.visit-card.active { border-color:var(--green-dark); box-shadow:0 0 0 3px rgba(26,94,48,.12) }
.visit-card.pending { opacity:.65; background:var(--s50) }
.visit-card.link-to-client { cursor:pointer }
.visit-card.link-to-client:hover { box-shadow:var(--sh2) }
.visit-time { font-size:13px; font-weight:800; color:var(--green-dark); width:48px; flex-shrink:0 }
.visit-card.active .visit-time { color:var(--text) }
.visit-body { flex:1; min-width:0 }
.visit-name { font-weight:600; font-size:13px; margin-bottom:2px }
.visit-meta { font-size:12px; color:var(--text3) }

/* ── INSIGHT CARD ──────────────────────────────────────────── */
.insight-text { font-size:13px; color:var(--text2); line-height:1.65 }

/* ── BAR LIST / RANK ───────────────────────────────────────── */
.bar-list { display:flex; flex-direction:column; gap:14px }
.bar-list-item { display:flex; align-items:center; gap:12px }
.bar-list-lbl { width:72px; font-size:12px; font-weight:600; color:var(--text2); flex-shrink:0 }
.bar-list-track { flex:1; height:10px; background:var(--bg); border-radius:var(--r-pill); overflow:hidden }
.bar-list-fill { height:100%; background:var(--green-dark); border-radius:var(--r-pill) }
.bar-list-fill.mid { background:var(--green) }
.bar-list-fill.light { background:var(--green-muted) }
.bar-list-val { width:36px; text-align:right; font-size:12px; font-weight:700 }
.rank-list { display:flex; flex-direction:column; gap:10px }
.rank-item { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--bg) }
.rank-item:last-child { border-bottom:none }
.rank-pos {
  width:28px; height:28px; border-radius:50%; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; color:var(--text3); flex-shrink:0;
}
.rank-pos.gold { background:var(--green); color:#fff }
.rank-name { flex:1; font-size:13px; font-weight:600 }
.rank-val { font-size:13px; font-weight:700; color:var(--green-dark) }

/* ── SETTINGS ──────────────────────────────────────────────── */
.settings-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0; border-bottom:1px solid var(--bg); font-size:13px;
}
.settings-row:last-child { border-bottom:none }
.settings-lbl { color:var(--text2); font-weight:500 }
.settings-val { font-weight:700; color:var(--text) }

.conf-dims .fg:last-child { margin-bottom:0 }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:1100px) {
  .kpi-grid,.kpi-grid-3{grid-template-columns:repeat(2,1fr)}
  .kpi-grid-2{grid-template-columns:1fr 1fr}
  .pipeline{grid-template-columns:repeat(3,1fr)}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .topnav-item { padding:8px 14px; font-size:12px }
}
@media(max-width:900px)  {
  :root { --pad-x:24px; --pad-y:24px; --pad-login:32px }
  .grid21{grid-template-columns:1fr} .grid3{grid-template-columns:1fr 1fr}
  .prod-grid{grid-template-columns:repeat(2,1fr)} .profile-stats{display:none}
  .pipeline{grid-template-columns:repeat(2,1fr)}
  .topbar-role { display:none }
}
@media(max-width:700px)  {
  :root { --pad-x:16px; --pad-y:20px; --pad-login:24px }
  .kpi-grid,.kpi-grid-3,.kpi-grid-2{grid-template-columns:1fr}
  .hd-deals-summary { grid-template-columns:repeat(2,1fr) }
  .hd-deal-row { grid-template-columns:1fr; gap:8px }
  .topnav { display:none }
  .mobile-nav { display:flex }
  .content {
    padding:var(--pad-y) var(--pad-x) calc(88px + env(safe-area-inset-bottom));
  }
  .topbar { gap:12px }
  .app-brand-footer { padding:var(--pad-y) var(--pad-x) calc(72px + env(safe-area-inset-bottom)) }
  .ph { flex-direction:column; align-items:flex-start !important; gap:12px }
  .ph-title { font-size:24px }
  .ph-actions { width:100%; flex-wrap:wrap }
  .ph-actions .btn { flex:1; min-width:120px; justify-content:center }
  .page-hero { flex-direction:column; align-items:flex-start; text-align:left }
  .ord-grid { grid-template-columns:1fr }
  .flow-steps { overflow-x:auto; padding-bottom:4px }
  .fx-loader-panel { padding:28px 24px }
}
@media(max-width:480px)  {
  .ph-title{font-size:22px}
  .login-brand-headline { font-size:24px }
  .role-grid { grid-template-columns:1fr }
  .stats-row { grid-template-columns:1fr }
  .prod-grid { grid-template-columns:1fr }
  .grid3 { grid-template-columns:1fr }
  .mobile-nav-label { font-size:8px }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .view.view-enter, .view.view-leaving { animation:none }
  .fx-loader-ring { animation:none; border-top-color:var(--green) }
}