:root {
  --background: 220 30% 98%;
  --foreground: 224 26% 12%;
  --primary: 252 86% 62%;
  --primary-foreground: 0 0% 100%;
  --secondary: 190 84% 48%;
  --secondary-foreground: 0 0% 100%;
  --muted: 220 18% 92%;
  --muted-foreground: 222 10% 42%;
  --destructive: 0 82% 61%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 18% 86%;
  --card: 0 0% 100%;
  --ring: 252 86% 62%;
  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px hsl(224 26% 12% / 0.06);
  --shadow-md: 0 10px 25px hsl(224 26% 12% / 0.05);
  --shadow-lg: 0 20px 50px hsl(252 86% 62% / 0.1);
  --transition-fast: 150ms ease;
  --transition-smooth: 260ms cubic-bezier(.2,.8,.2,1);
}
.theme-mono { --background: 0 0% 98%; --foreground: 0 0% 10%; --primary: 0 0% 12%; --secondary: 0 0% 34%; --muted: 0 0% 92%; --muted-foreground: 0 0% 42%; --border: 0 0% 84%; --card: 0 0% 100%; --ring: 0 0% 18%; }
.dark { --background: 224 24% 8%; --foreground: 220 30% 96%; --primary: 256 88% 70%; --primary-foreground: 224 24% 8%; --secondary: 188 80% 58%; --secondary-foreground: 224 24% 8%; --muted: 224 18% 16%; --muted-foreground: 220 12% 68%; --destructive: 0 78% 65%; --destructive-foreground: 224 24% 8%; --border: 224 16% 22%; --card: 224 22% 11%; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at 20% 10%, hsl(var(--primary) / 0.05), transparent 30%), hsl(var(--background)); color: hsl(var(--foreground)); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; }
.theme-mono body { background: hsl(var(--background)); }
button, input, textarea, select { font: inherit; color: inherit; }
.rounded-xl { border-radius: 8px !important; }
.rounded-2xl { border-radius: 10px !important; }
.rounded-3xl { border-radius: 14px !important; }
.soft-card { background: hsl(var(--card) / 0.78); border: 1px solid hsl(var(--border) / 0.6); border-radius: var(--radius-lg); box-shadow: 0 4px 16px hsl(224 26% 12% / 0.03); backdrop-filter: blur(8px) saturate(1.04); -webkit-backdrop-filter: blur(8px) saturate(1.04); }
.soft-card:hover { border-color: hsl(var(--border)); box-shadow: 0 8px 24px hsl(224 26% 12% / 0.05); }
.dark .soft-card { border-color: hsl(var(--border) / .78); box-shadow: 0 14px 42px hsl(0 0% 0% / .24); }
.sidebar-shell, .sidebar-shell:hover { border-color: transparent; box-shadow: none; background: transparent; }
.dark .sidebar-shell, .dark .sidebar-shell:hover { background: transparent; }
.nav-separator { height: 1px; background: hsl(var(--border)); margin: 6px 0; }
.sidebar-premium-card { min-width: 230px; padding: 14px; border-radius: 14px; border: 1px solid hsl(var(--primary) / .18); background: radial-gradient(circle at 12% 0%, hsl(var(--primary) / .14), transparent 38%), radial-gradient(circle at 95% 15%, hsl(var(--secondary) / .12), transparent 34%), hsl(var(--card) / .72); box-shadow: inset 0 1px 0 hsl(0 0% 100% / .58), 0 14px 32px hsl(var(--primary) / .08); }
.premium-spark { width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 10px; color: hsl(var(--primary)); background: hsl(var(--primary) / .1); box-shadow: inset 0 1px 0 hsl(0 0% 100% / .55); }
.premium-usage-track { height: 8px; overflow: hidden; border-radius: 999px; background: hsl(var(--muted) / .78); box-shadow: inset 0 1px 2px hsl(224 26% 12% / .08); }
.premium-usage-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--secondary))); box-shadow: 0 0 14px hsl(var(--primary) / .22); }
.premium-upgrade-button { min-height: 36px; color: hsl(var(--primary-foreground)) !important; background: hsl(var(--primary)) !important; border-color: transparent !important; text-decoration: none; }
.premium-upgrade-button:hover { opacity: .94; }
.dark .sidebar-premium-card { box-shadow: inset 0 1px 0 hsl(0 0% 100% / .08), 0 16px 42px hsl(0 0% 0% / .22); }
.settings-shell { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .settings-shell { grid-template-columns: 240px minmax(0, 1fr); } }
.theme-card { background: hsl(var(--card) / .62); transition: transform var(--transition-fast), border-color var(--transition-fast); }
.theme-card:hover, .theme-card.is-selected { transform: translateY(-1px); border-color: hsl(var(--primary) / 0.4); }
.settings-logout-button { color: hsl(var(--destructive)); border-color: hsl(var(--destructive) / .35); background: hsl(var(--destructive) / .08); }
.settings-logout-button:hover:not(:disabled) { color: hsl(var(--destructive-foreground)); border-color: hsl(var(--destructive)); background: hsl(var(--destructive)); }
.calendar-new-badge { margin-left: auto; position: relative; border-radius: 10px; padding: 3px 8px; background: hsl(var(--destructive)); color: white; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.dashboard-chart-card { min-height: 356px; }
.dashboard-chart-stretch { display: flex; flex-direction: column; height: 100%; }
.dashboard-chart-frame { position: relative; flex: 1; min-height: 270px; width: 100%; }
.dashboard-recharts-frame { height: 100%; min-height: 292px; }
.dashboard-recharts-frame .recharts-wrapper, .dashboard-recharts-frame .recharts-surface { overflow: visible; }
.chart-change-pill { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 4px 8px; font-size: 12px; font-weight: 650; color: hsl(158 54% 32%); background: hsl(158 64% 42% / .08); }
.chart-range-tabs { display: inline-flex; align-items: center; gap: 2px; width: fit-content; border-radius: 999px; padding: 3px; background: hsl(var(--muted) / .48); border: 1px solid hsl(var(--border) / .55); }
.chart-range-tabs button { width: 34px; height: 28px; border: 0; border-radius: 999px; background: transparent; color: hsl(var(--muted-foreground)); font-size: 12px; font-weight: 700; transition: background var(--transition-fast), color var(--transition-fast); }
.chart-range-tabs button:hover, .chart-range-tabs button.is-active { background: hsl(var(--card)); color: hsl(var(--foreground)); box-shadow: 0 1px 5px hsl(224 26% 12% / .05); }
.chart-control-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.chart-metrics-strip { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.chart-metrics-strip button, .chart-compact-options button, .chart-compact-options select { min-height: 30px; border-radius: 999px; border: 1px solid hsl(var(--border) / .72); background: hsl(var(--card) / .7); color: hsl(var(--muted-foreground)); padding: 0 10px; font-size: 12px; font-weight: 650; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); }
.chart-metrics-strip button:hover, .chart-metrics-strip button.is-active, .chart-compact-options button:hover, .chart-compact-options button.is-active { background: hsl(var(--foreground)); border-color: transparent; color: hsl(var(--background)); }
.chart-compact-options { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chart-compact-options label { display: inline-flex; align-items: center; gap: 6px; color: hsl(var(--muted-foreground)); font-size: 12px; }
.chart-compact-options select { padding-right: 24px; outline: none; }
.chart-stats-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 520px; }
.chart-stats-row div { border-radius: 13px; border: 1px solid hsl(var(--border) / .5); background: hsl(var(--card) / .48); padding: 10px 12px; }
.chart-stats-row span { display: block; font-size: 11px; color: hsl(var(--muted-foreground)); }
.chart-stats-row strong { display: block; margin-top: 2px; font-size: 22px; line-height: 1; letter-spacing: -.04em; }
.dashboard-chart-svg { position: absolute; inset: 0 0 26px 0; width: 100%; height: calc(100% - 26px); overflow: visible; display: block; }
.dashboard-chart-labels { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding-left: 7.5%; padding-right: 3.8%; color: hsl(var(--muted-foreground)); font-size: 12px; }
.dark .dashboard-chart-card polyline { stroke: hsl(228 42% 82%); }
.canvas-dots { background-color: hsl(var(--card) / 0.58); background-image: radial-gradient(hsl(224 18% 60% / 0.15) 1px, transparent 1px); background-size: 22px 22px; }
.figma-canvas { isolation: isolate; touch-action: none; }
.workspace-block, .workspace-block-static { min-width: 180px; min-height: 72px; overflow: visible; background: hsl(var(--card) / 0.48); border: 1px solid hsl(var(--border) / 0.6); box-shadow: 0 4px 12px hsl(224 26% 12% / 0.02); backdrop-filter: blur(6px) saturate(1.03); -webkit-backdrop-filter: blur(6px) saturate(1.03); transition: background var(--transition-fast), border-color var(--transition-fast); }
.workspace-block textarea, .workspace-block input, .workspace-block-static textarea, .workspace-block-static input, .workspace-block [contenteditable] { position: relative; z-index: 2; }
.workspace-block.ai-block, .workspace-block-static.ai-block { position: relative; overflow: visible; border-color: hsl(var(--primary) / 0.2); background: hsl(var(--card) / 0.72); }
.workspace-block.ai-block::after, .workspace-block-static.ai-block::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: linear-gradient(110deg, #fb923c, #f472b6, #8b5cf6, #60a5fa, #22d3ee, #fb923c); background-size: 360% 360%; animation: aiRainbow 4.5s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1; }
.workspace-block.ai-block .canvas-block-chrome::after, .workspace-block-static.ai-block .canvas-block-chrome::after { content: "AI"; margin-left: auto; font-size: 10px; font-weight: 800; color: hsl(var(--primary)); background: hsl(var(--card) / .82); border-radius: 999px; padding: 2px 7px; }
@keyframes aiRainbow { to { background-position: 360% 0; } }
.workspace-block { resize: both; }
.workspace-block-static { position: relative; width: 100%; min-height: 150px; resize: vertical; }
.workspace-block:hover, .workspace-block:focus-within, .workspace-block-static:hover, .workspace-block-static:focus-within { background: hsl(var(--card) / 0.75); border-color: hsl(var(--border)); z-index: 3; }
.dark .workspace-block:hover, .dark .workspace-block:focus-within, .dark .workspace-block-static:hover, .dark .workspace-block-static:focus-within { background: hsl(var(--card) / .9); }
.canvas-block-chrome { height: 22px; display: flex; justify-content: space-between; align-items: center; opacity: 0; transition: opacity var(--transition-fast); }
.workspace-block:hover .canvas-block-chrome, .workspace-block:focus-within .canvas-block-chrome, .workspace-block-static:hover .canvas-block-chrome, .workspace-block-static:focus-within .canvas-block-chrome { opacity: 1; }
.drag-handle { cursor: grab; padding: 2px; color: hsl(var(--muted-foreground) / 0.5); }
.drag-handle:active { cursor: grabbing; }
.drag-handle:disabled { cursor: default; opacity: .35; }
.floating-tools { position: absolute; left: 12px; top: -42px; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity var(--transition-fast), transform var(--transition-fast); z-index: 1002; max-width: min(520px, calc(100vw - 48px)); }
.floating-tools.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.block-palette { border: 1px solid hsl(var(--border)); }
.workspace-dock { border-radius: 12px; align-items: center; }
.dock-caption { padding: 0 8px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.block-chip { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--foreground)); transition: background var(--transition-fast), border-color var(--transition-fast); }
.block-chip:hover { border-color: hsl(var(--primary) / 0.4); background: hsl(var(--muted) / 0.5); }
.block-chip:focus-visible { outline: 2px solid hsl(var(--ring) / 0.22); outline-offset: 2px; }
.soft-button { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--foreground)); font-size: 13px; font-weight: 600; padding: 8px 14px; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); }
.soft-button:hover:not(:disabled) { background: hsl(var(--muted) / 0.5); border-color: hsl(var(--border)); }
.soft-button:active:not(:disabled) { background: hsl(var(--muted)); }
.soft-button.bg-\[hsl\(var\(--foreground\)\)\] { background: hsl(var(--foreground)) !important; color: hsl(var(--background)) !important; border-color: transparent !important; }
.soft-button.bg-\[hsl\(var\(--foreground\)\)\]:hover:not(:disabled) { opacity: 0.92; }
.soft-button.bg-\[hsl\(var\(--primary\)\)\] { background: hsl(var(--primary)) !important; color: hsl(var(--primary-foreground)) !important; border-color: transparent !important; }
.soft-button.bg-\[hsl\(var\(--primary\)\)\]:hover:not(:disabled) { opacity: 0.92; }
.add-client-premium { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); font-weight: 650; font-size: 14px; background: hsl(var(--card)); transition: background var(--transition-fast), border-color var(--transition-fast); }
.add-client-premium:hover { background: hsl(var(--muted) / 0.5); }
.quick-setup-button { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 12px 0 15px; border-radius: 12px; border: 1px solid transparent; outline: none; color: hsl(252 62% 34%); font-weight: 720; font-size: 14px; background: linear-gradient(135deg, hsl(0 0% 100% / .96), hsl(252 92% 97% / .86) 54%, hsl(190 88% 97% / .84)); box-shadow: 0 8px 22px hsl(var(--primary) / .09), inset 0 1px 0 hsl(0 0% 100% / .82); transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast); }
.quick-setup-button:hover { transform: translateY(-1px); box-shadow: 0 12px 28px hsl(var(--primary) / .12), 0 0 18px hsl(var(--secondary) / .08), inset 0 1px 0 hsl(0 0% 100% / .86); filter: saturate(1.03); }
.quick-setup-button:focus-visible { box-shadow: 0 12px 28px hsl(var(--primary) / .12), 0 0 0 3px hsl(var(--primary) / .12), inset 0 1px 0 hsl(0 0% 100% / .86); }
.quick-setup-shine { position: absolute; inset: -40% auto -40% -35%; width: 42%; transform: rotate(18deg); background: linear-gradient(90deg, transparent, hsl(0 0% 100% / .62), transparent); opacity: .32; transition: left 520ms ease; }
.quick-setup-button:hover .quick-setup-shine { left: 110%; }
.quick-beta-badge { border-radius: 999px; padding: 2px 7px; font-size: 10px; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; color: hsl(var(--primary)); background: hsl(var(--primary) / .08); border: 1px solid hsl(var(--primary) / .12); }
.dark .quick-setup-button { color: hsl(256 88% 86%); background: linear-gradient(135deg, hsl(var(--card) / .96), hsl(256 40% 18% / .92), hsl(190 34% 16% / .9)); box-shadow: 0 14px 34px hsl(0 0% 0% / .24), 0 0 22px hsl(var(--primary) / .08), inset 0 1px 0 hsl(0 0% 100% / .08); }
.quick-setup-backdrop { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 18px; background: hsl(224 26% 12% / .18); backdrop-filter: blur(10px); }
.quick-setup-modal { position: relative; width: min(720px, 100%); max-height: min(92vh, 820px); overflow: auto; padding: 24px; background: radial-gradient(circle at 0% 0%, hsl(var(--primary) / .09), transparent 34%), radial-gradient(circle at 100% 10%, hsl(var(--secondary) / .08), transparent 32%), hsl(var(--card) / .96); box-shadow: 0 28px 90px hsl(224 26% 12% / .2), inset 0 1px 0 hsl(0 0% 100% / .65); }
.quick-setup-close { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; border: 1px solid hsl(var(--border)); background: hsl(var(--card) / .7); }
.quick-ai-kicker { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 750; color: hsl(var(--primary)); background: hsl(var(--primary) / .09); border: 1px solid hsl(var(--primary) / .14); }
.quick-field { display: grid; gap: 7px; font-size: 12px; font-weight: 700; color: hsl(var(--muted-foreground)); }
.quick-field input, .quick-field textarea, .quick-field select { width: 100%; border: 1px solid hsl(var(--border)); border-radius: 12px; background: hsl(var(--card) / .86); padding: 11px 12px; color: hsl(var(--foreground)); outline: none; }
.quick-field textarea { min-height: 86px; resize: vertical; }
.quick-field input:focus, .quick-field textarea:focus, .quick-field select:focus { border-color: hsl(var(--primary) / .42); box-shadow: 0 0 0 3px hsl(var(--primary) / .1); }
.quick-generate-button { width: 100%; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 13px; color: white; font-weight: 800; background: linear-gradient(135deg, hsl(var(--primary)), hsl(224 88% 58%), hsl(var(--secondary))); box-shadow: 0 16px 36px hsl(var(--primary) / .22), inset 0 1px 0 hsl(0 0% 100% / .26); transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast); }
.quick-generate-button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 20px 46px hsl(var(--primary) / .28), 0 0 28px hsl(var(--secondary) / .16); }
.quick-setup-error { border-radius: 12px; padding: 10px 12px; color: hsl(var(--destructive)); background: hsl(var(--destructive) / .08); border: 1px solid hsl(var(--destructive) / .2); font-size: 13px; }
.quick-loading { min-height: 360px; display: grid; place-items: center; align-content: center; gap: 14px; text-align: center; }
.quick-loading p { color: hsl(var(--muted-foreground)); }
.quick-orb { width: 88px; height: 88px; display: grid; place-items: center; border-radius: 28px; color: hsl(var(--primary)); background: radial-gradient(circle at 30% 20%, hsl(0 0% 100% / .96), hsl(var(--primary) / .12)); box-shadow: 0 0 46px hsl(var(--primary) / .2), inset 0 1px 0 hsl(0 0% 100% / .72); }
.quick-result-grid { display: grid; gap: 10px; }
.quick-result-grid div { display: grid; gap: 4px; border: 1px solid hsl(var(--border)); border-radius: 14px; padding: 13px; background: hsl(var(--card) / .68); }
.quick-result-grid strong { font-size: 13px; }
.quick-result-grid span { font-size: 13px; color: hsl(var(--muted-foreground)); }
.calendar-day { border: 1px solid hsl(var(--border) / 0.6); }
.calendar-day-button { width: 100%; text-align: left; cursor: pointer; }
.calendar-day-button:hover, .calendar-day-button:focus-visible { border-color: hsl(var(--primary) / .35); outline: none; }
.focus-ring:focus { outline: 3px solid hsl(var(--ring) / 0.22); outline-offset: 2px; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
[draggable="true"] { cursor: grab; }
[draggable="true"]:active { cursor: grabbing; }
.drawing-layer { position: absolute; inset: 0; width: 100%; height: 100%; min-height: inherit; display: block; z-index: 999; pointer-events: none; overflow: visible; touch-action: none; }
.drawing-hitbox { position:absolute; inset:0; z-index:1000; cursor:crosshair; touch-action:none; background:hsl(0 0% 100% / 0.001); }
.drawing-layer.is-active + .workspace-block, .drawing-layer.is-active ~ .workspace-block, .drawing-layer.is-active ~ .workspace-block-static { pointer-events: none; }
.profile-drawer { position: fixed; top: 24px; right: 24px; bottom: 24px; width: min(390px, calc(100vw - 32px)); z-index: 80; transform: translateX(calc(100% + 32px)); transition: transform var(--transition-smooth); }
.profile-drawer.is-open { transform: translateX(0); }
.profile-backdrop { position: fixed; inset: 0; z-index: 70; background: hsl(224 26% 12% / .1); backdrop-filter: blur(2px); }
[contenteditable]:empty::before { content: attr(placeholder); color: hsl(var(--muted-foreground) / 0.5); pointer-events: none; display: block; }
.soft-button:disabled, button:disabled { opacity: .5; cursor: not-allowed; }
.clients-directory-shell { max-width: 1120px; margin: 0 auto; background: hsl(var(--card)); }
.clients-directory-shell.clients-directory-wide { width: 100%; max-width: none; margin: 0; }
.client-metric-card { background: hsl(var(--card)); border-color: hsl(var(--border)); transition: border-color var(--transition-fast), background var(--transition-fast); }
.client-metric-card span { display: block; font-size: 13px; color: hsl(var(--muted-foreground)); }
.client-metric-card strong { display: block; margin-top: 8px; font-size: 22px; line-height: 1; }
.client-metric-card.is-active { border-color: hsl(var(--primary) / .6); }
.client-filter-button, .client-filter-chip, .client-filter-clear, .client-column-toggle { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; border-radius: 9px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); padding: 0 12px; font-size: 13px; font-weight: 600; color: hsl(var(--foreground)); }
.client-filter-chip.is-active, .client-column-toggle.is-active { background: hsl(var(--muted) / .5); border-color: hsl(var(--primary) / .28); }
.client-filter-clear { font-size: 12px; color: hsl(var(--muted-foreground)); }
.client-options-panel { background: hsl(var(--muted) / .22); }
.client-table-wrap { position: relative; overflow-y: visible; }
.client-table-row { display: grid; grid-template-columns: 34px minmax(220px, 1.25fr) minmax(180px, .8fr) minmax(150px, .65fr) 130px; gap: 14px; align-items: center; min-height: 62px; padding: 0 16px; border-top: 1px solid hsl(var(--border) / .6); }
.client-table-row.is-status-open { position: relative; z-index: 80; }
.client-table-head { min-height: 44px; border-top: 0; background: hsl(var(--muted) / .28); color: hsl(var(--muted-foreground)); font-size: 12px; font-weight: 700; }
.client-table-row.is-important { position: relative; overflow: visible; background: radial-gradient(circle at 4% 50%, hsl(47 96% 60% / .18), transparent 15%), linear-gradient(90deg, hsl(48 96% 62% / .16) 0%, hsl(48 96% 62% / .09) 18%, hsl(48 96% 62% / .035) 34%, transparent 48%); }
.client-table-row.is-important::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 999px; background: hsl(46 96% 56%); box-shadow: 0 0 16px hsl(46 96% 58% / .28); }
.client-table-row.is-important::after { content: ""; position: absolute; inset: 1px auto 1px 0; width: 28%; pointer-events: none; background: linear-gradient(90deg, hsl(0 0% 100% / .24), transparent 70%); opacity: .34; }
.client-table-row.is-important > * { position: relative; z-index: 1; }
.dark .client-table-row.is-important { background: radial-gradient(circle at 4% 50%, hsl(46 96% 58% / .14), transparent 15%), linear-gradient(90deg, hsl(46 96% 58% / .12) 0%, hsl(46 96% 58% / .065) 18%, hsl(46 96% 58% / .025) 34%, transparent 48%); }
.dark .client-table-row.is-important::after { opacity: .1; }
.client-row-actions { display: flex; align-items: center; gap: 6px; }
.client-row-action { width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 8px; border: 1px solid hsl(var(--border)); background: hsl(var(--card) / .72); color: hsl(var(--muted-foreground)); transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); }
.client-row-action:hover { background: hsl(var(--muted) / .55); color: hsl(var(--foreground)); }
.client-row-action.is-important { color: hsl(38 95% 48%); border-color: hsl(38 95% 58% / .34); background: hsl(43 96% 58% / .12); }
.client-row-action.is-danger:hover { color: hsl(var(--destructive)); border-color: hsl(var(--destructive) / .32); background: hsl(var(--destructive) / .08); }
.client-check { width: 15px; height: 15px; border-radius: 5px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.client-check.is-checked { border-color: hsl(var(--primary)); background: hsl(var(--primary)); box-shadow: inset 0 0 0 3px hsl(var(--card)); }
.client-name-status-cell { min-width: 0; display: flex; align-items: center; gap: 10px; }
.client-name-cell { min-width: 0; display: grid; gap: 3px; flex: 1 1 auto; }
.client-name-cell strong { font-size: 14px; font-weight: 650; color: hsl(var(--foreground)); }
.client-name-cell small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: hsl(var(--muted-foreground)); }
.client-status-dropdown { position: relative; flex: 0 0 auto; z-index: 90; }
.client-status-trigger, .client-status-option { display: inline-flex; align-items: center; gap: 5px; border: 1px solid transparent; border-radius: 999px; font-size: 12px; font-weight: 650; line-height: 1; white-space: nowrap; }
.client-status-trigger { min-height: 28px; padding: 6px 8px 6px 9px; box-shadow: none; transition: background var(--transition-fast), border-color var(--transition-fast), filter var(--transition-fast); }
.client-status-trigger:hover, .client-status-trigger:focus-visible, .client-status-trigger.is-open { border-color: currentColor; filter: brightness(.985) saturate(1.03); outline: none; }
.client-status-chevron { opacity: .55; transition: transform var(--transition-fast); }
.client-status-trigger.is-open .client-status-chevron { transform: rotate(180deg); }
.client-status-menu { position: absolute; top: calc(100% + 7px); left: 0; width: max-content; min-width: 142px; display: grid; gap: 5px; padding: 8px; border-radius: 14px; border: 1px solid hsl(var(--border) / .78); background: hsl(var(--card) / .98); box-shadow: 0 18px 44px hsl(224 26% 12% / .16), 0 3px 10px hsl(224 26% 12% / .08); backdrop-filter: blur(16px) saturate(1.05); -webkit-backdrop-filter: blur(16px) saturate(1.05); z-index: 999; }
.client-status-option { min-height: 29px; width: 100%; justify-content: flex-start; padding: 7px 9px; transition: background var(--transition-fast), border-color var(--transition-fast), filter var(--transition-fast); }
.client-status-option:hover, .client-status-option:focus-visible, .client-status-option.is-selected { filter: brightness(.985) saturate(1.03); border-color: currentColor; outline: none; }
.client-status-trigger.is-new, .client-status-option.is-new { color: hsl(262 55% 48%); background-color: hsl(262 60% 97%); }
.client-status-trigger.is-conversation, .client-status-option.is-conversation { color: hsl(205 64% 38%); background-color: hsl(204 70% 96%); }
.client-status-trigger.is-offer, .client-status-option.is-offer { color: hsl(34 66% 39%); background-color: hsl(38 78% 96%); }
.client-status-trigger.is-progress, .client-status-option.is-progress { color: hsl(222 62% 44%); background-color: hsl(214 74% 96%); }
.client-status-trigger.is-done, .client-status-option.is-done { color: hsl(148 48% 34%); background-color: hsl(145 54% 95%); }
.status-icon-spin { animation: statusSpin 1.6s linear infinite; }
@keyframes statusSpin { to { transform: rotate(360deg); } }
.dark .client-status-menu { background: hsl(var(--card) / .98); box-shadow: 0 20px 46px hsl(0 0% 0% / .36); }
.dark .client-status-trigger.is-new, .dark .client-status-option.is-new { background-color: hsl(262 36% 18% / .72); color: hsl(262 72% 78%); }
.dark .client-status-trigger.is-conversation, .dark .client-status-option.is-conversation { background-color: hsl(204 38% 17% / .78); color: hsl(204 72% 74%); }
.dark .client-status-trigger.is-offer, .dark .client-status-option.is-offer { background-color: hsl(38 42% 17% / .78); color: hsl(38 74% 72%); }
.dark .client-status-trigger.is-progress, .dark .client-status-option.is-progress { background-color: hsl(222 40% 18% / .76); color: hsl(222 76% 76%); }
.dark .client-status-trigger.is-done, .dark .client-status-option.is-done { background-color: hsl(148 34% 17% / .78); color: hsl(148 64% 72%); }
.client-status-select { flex: 0 0 auto; max-width: 122px; min-height: 29px; border: 1px solid transparent; border-radius: 999px; padding: 5px 25px 5px 10px; font-size: 12px; font-weight: 750; line-height: 1; outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; background-repeat: no-repeat; background-position: right 9px center; background-size: 10px 10px; background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); box-shadow: inset 0 1px 0 hsl(0 0% 100% / .74), 0 6px 14px hsl(224 26% 12% / .04); transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); }
.client-status-select:hover, .client-status-select:focus-visible { transform: translateY(-1px); box-shadow: inset 0 1px 0 hsl(0 0% 100% / .82), 0 8px 20px currentColor / .08; border-color: currentColor; }
.client-status-select.is-new { color: hsl(262 82% 56%); background-color: hsl(262 92% 96%); }
.client-status-select.is-conversation { color: hsl(205 82% 42%); background-color: hsl(204 96% 94%); }
.client-status-select.is-offer { color: hsl(34 86% 43%); background-color: hsl(38 96% 94%); }
.client-status-select.is-progress { color: hsl(222 80% 50%); background-color: hsl(214 96% 94%); }
.client-status-select.is-done { color: hsl(148 62% 38%); background-color: hsl(145 78% 93%); }
.dark .client-status-select { box-shadow: inset 0 1px 0 hsl(0 0% 100% / .08), 0 8px 18px hsl(0 0% 0% / .14); }
.dark .client-status-select.is-new { background-color: hsl(262 60% 20% / .72); color: hsl(262 90% 78%); }
.dark .client-status-select.is-conversation { background-color: hsl(204 60% 18% / .78); color: hsl(204 90% 74%); }
.dark .client-status-select.is-offer { background-color: hsl(38 68% 18% / .78); color: hsl(38 92% 72%); }
.dark .client-status-select.is-progress { background-color: hsl(222 62% 20% / .76); color: hsl(222 92% 76%); }
.dark .client-status-select.is-done { background-color: hsl(148 52% 18% / .78); color: hsl(148 80% 72%); }
.client-muted-cell { min-width: 0; font-size: 13px; color: hsl(var(--muted-foreground)); }
.client-status-cell { position: relative; z-index: 2; }
.client-table-row.is-status-open .client-status-cell { z-index: 90; }
.client-inline-field { width: 100%; min-width: 110px; border: 0; outline: none; border-radius: 8px; background: transparent; padding: 6px 4px; color: hsl(var(--foreground)); }
.client-inline-field:focus { background: hsl(var(--muted) / .38); }
@media (max-width: 720px) { .clients-directory-shell { margin: 0; } .client-table-row { grid-template-columns: 30px minmax(260px, 1.2fr) minmax(160px, .8fr) minmax(130px, .65fr) 118px; padding: 0 12px; } .client-name-status-cell { align-items: flex-start; flex-direction: column; gap: 6px; } .client-status-menu { left: 0; right: auto; } .quick-setup-modal { padding: 18px; } .quick-setup-button, .add-client-premium { width: 100%; } .chart-stats-row { grid-template-columns: 1fr; } }