:root {
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-soft: #f8f8fc;
  --text: #17182c;
  --muted: #83869b;
  --border: #e9eaf2;
  --purple: #6854ed;
  --purple-dark: #5542d8;
  --purple-soft: #eeebff;
  --green: #21ad8c;
  --green-soft: #e5f8f2;
  --orange: #ee9b3f;
  --orange-soft: #fff2e2;
  --blue: #4d8fe7;
  --blue-soft: #eaf3ff;
  --danger: #ee6969;
  --sidebar: 244px;
  --shadow: 0 10px 35px rgba(36, 34, 74, .06);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Manrope", system-ui, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
svg { display: block; }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); background: #171529; color: #fff; padding: 25px 17px 18px; display: flex; flex-direction: column; z-index: 30; transition: transform .3s ease; }
.brand { display: flex; align-items: center; padding: 0 8px 24px; font-size: 22px; font-weight: 800; letter-spacing: -.8px; }
.brand-mark { width: 30px; height: 30px; border-radius: 9px; margin-right: 10px; display: grid; place-items: center; background: linear-gradient(145deg,#8b7aff,#5a46dc); box-shadow: 0 7px 18px rgba(104,84,237,.35); }
.brand-mark svg { width: 20px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.brand-tag { color: #8170f1; font-size: 10px; font-weight: 800; letter-spacing: .5px; margin-left: 7px; background: rgba(129,112,241,.13); padding: 3px 5px; border-radius: 4px; }
.workspace-switcher { display: grid; grid-template-columns: 34px 1fr 16px; gap: 9px; align-items: center; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.07); padding: 10px; border-radius: 11px; margin-bottom: 25px; cursor: pointer; }
.workspace-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #d9d1ff; font-weight: 800; background: linear-gradient(145deg,#5e4dcc,#312960); }
.workspace-switcher strong,.workspace-switcher span { display: block; }
.workspace-switcher strong { font-size: 11px; margin-bottom: 2px; }
.workspace-switcher span { font-size: 8px; color: #77748c; }
.chevron { width: 14px; fill: none; stroke: #6f6b82; stroke-width: 2; }
.main-nav { flex: 1; }
.nav-caption { color: #5f5c72; font-size: 8px; font-weight: 800; letter-spacing: 1.1px; margin: 0 10px 9px; }
.nav-caption-second { margin-top: 27px; }
.nav-item { position: relative; text-decoration: none; display: flex; align-items: center; height: 42px; gap: 12px; color: #8c899d; font-size: 12px; font-weight: 600; border-radius: 9px; padding: 0 12px; margin-bottom: 4px; transition: all .2s ease; }
.nav-item svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.04); }
.nav-item.active { color: #fff; background: linear-gradient(90deg,rgba(105,84,237,.28),rgba(105,84,237,.12)); }
.nav-item.active:before { content:""; position: absolute; width: 3px; height: 23px; border-radius: 3px; background: #806df7; left: -17px; box-shadow: 0 0 12px #806df7; }
.nav-badge { margin-left: auto; min-width: 20px; height: 19px; border-radius: 6px; display: grid; place-items: center; color: #cfc7ff; font-size: 8px; background: rgba(105,84,237,.22); }
.nav-badge.muted { background: rgba(255,255,255,.06); color: #77748c; }
.sidebar-bottom { margin-top: auto; }
.help-card { display: grid; grid-template-columns: 32px 1fr 20px; align-items: center; gap: 9px; border-bottom: 1px solid rgba(255,255,255,.06); padding: 12px 7px 17px; margin-bottom: 14px; }
.help-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: #a99dff; background: rgba(105,84,237,.16); border: 1px solid rgba(105,84,237,.23); font-weight: 800; }
.help-card strong,.help-card span,.user-profile strong,.user-profile span { display:block; }
.help-card strong { font-size: 10px; margin-bottom: 3px; }.help-card span { font-size: 8px; color:#77748c; }
.help-arrow,.dots { border: 0; color:#77748c; background: transparent; }.help-arrow:hover,.dots:hover { color:#fff; }
.user-profile { display: grid; grid-template-columns: 35px 1fr 25px; gap: 9px; align-items: center; padding: 2px 5px; }
.avatar { border-radius: 50%; display: inline-grid; place-items: center; font-weight: 800; flex: 0 0 auto; }
.avatar-main { width: 35px; height: 35px; color:#23164a; background: linear-gradient(145deg,#f4c3dc,#b993e2); font-size: 9px; }
.user-profile strong { font-size: 10px; margin-bottom:2px; }.user-profile span { color:#77748c; font-size:8px; }

.main-content { margin-left: var(--sidebar); min-height: 100vh; }
.topbar { height: 72px; background: rgba(255,255,255,.88); backdrop-filter: blur(15px); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 30px; position: sticky; top:0; z-index:20; }
.search-wrap { position: relative; width: min(420px, 44vw); }
.search-wrap > svg { position:absolute; top:50%; transform:translateY(-50%); left:13px; width:16px; fill:none; stroke:#9a9caf; stroke-width:1.9; stroke-linecap:round; }
.search-wrap input { width:100%; border:1px solid transparent; outline:none; background:#f7f7fa; height:39px; padding:0 53px 0 39px; border-radius:10px; color:var(--text); font-size:11px; transition:.2s; }
.search-wrap input:focus { background:var(--surface); border-color:#cfc8ff; box-shadow:0 0 0 3px rgba(104,84,237,.08); }
.search-wrap kbd { position:absolute; right:11px; top:9px; color:#a4a5b4; background:var(--surface); border:1px solid var(--border); border-radius:5px; font-size:8px; padding:3px 6px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.search-results { position:absolute; top:47px; left:0; width:100%; padding:7px; background:var(--surface); border:1px solid var(--border); border-radius:11px; box-shadow:0 17px 40px rgba(25,23,50,.16); display:none; z-index:50; }
.search-results.show { display:block; }
.search-result { display:flex; align-items:center; gap:9px; padding:10px; border-radius:8px; color:var(--text); cursor:pointer; }
.search-result:hover { background:var(--surface-soft); }.search-result span { margin-left:auto; font-size:9px; color:var(--muted); }
.topbar-actions { margin-left:auto; display:flex; align-items:center; gap:8px; }
.icon-button { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:#74768b; position:relative; transition:.2s; }
.icon-button:hover { color:var(--purple); border-color:#d7d0ff; background:var(--purple-soft); }
.icon-button svg { width:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.notification-button span { position:absolute; width:6px; height:6px; border-radius:50%; background:#f06f73; border:2px solid var(--surface); top:7px; right:7px; box-sizing:content-box; }
.menu-toggle { display:none; }
.primary-button,.secondary-button { min-height:39px; padding:0 16px; border-radius:10px; border:0; display:inline-flex; gap:8px; align-items:center; justify-content:center; font-size:11px; font-weight:700; transition:.2s; }
.primary-button { color:#fff; background:linear-gradient(135deg,#7664f0,#5b48dc); box-shadow:0 7px 16px rgba(93,71,220,.19); }
.primary-button:hover { transform:translateY(-1px); box-shadow:0 10px 21px rgba(93,71,220,.28); }
.primary-button svg { width:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.secondary-button { background:var(--surface-soft); color:var(--text); border:1px solid var(--border); }
.page-wrap { max-width: 1510px; margin: 0 auto; padding: 29px 30px 40px; }
.page { display:none; animation:fadeUp .25s ease; }.page.active { display:block; }
@keyframes fadeUp { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
.page-heading,.simple-page-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:23px; }
.eyebrow { font-size:8px!important; letter-spacing:1.2px; font-weight:800; color:#9b9cad!important; margin:0 0 7px!important; }
.page-heading h1,.simple-page-header h1 { font-size:25px; margin:0 0 4px; letter-spacing:-1px; }.page-heading h1 span { font-size:22px; }
.page-heading p,.simple-page-header p { color:var(--muted); font-size:11px; margin:0; }
.period-control { display:flex; padding:4px; background:#eeeff4; border-radius:9px; }
.period-control button { border:0; background:transparent; color:#858799; border-radius:7px; height:30px; padding:0 13px; font-size:9px; font-weight:700; }
.period-control button.active { color:var(--text); background:var(--surface); box-shadow:0 2px 7px rgba(24,22,53,.08); }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:14px; }
.stat-card,.panel { background:var(--surface); border:1px solid var(--border); border-radius:13px; box-shadow:0 2px 4px rgba(31,28,65,.012); }
.stat-card { min-width:0; height:151px; padding:15px 17px 0; overflow:hidden; position:relative; }
.stat-top { display:flex; justify-content:space-between; align-items:center; }.stat-icon { width:29px; height:29px; display:grid; place-items:center; border-radius:8px; }.stat-icon svg { width:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.stat-icon.purple { color:var(--purple); background:var(--purple-soft); }.stat-icon.green { color:var(--green); background:var(--green-soft); }.stat-icon.orange { color:var(--orange); background:var(--orange-soft); }.stat-icon.blue { color:var(--blue); background:var(--blue-soft); }
.trend { font-size:8px; font-weight:800; padding:4px 6px; border-radius:6px; }.trend.positive { color:var(--green); background:var(--green-soft); }.trend.negative { color:var(--danger); background:#fff0f0; }
.stat-card > p { margin:10px 0 2px; color:var(--muted); font-size:9px; }.stat-card h2 { margin:0; font-size:21px; letter-spacing:-.8px; }
.sparkline { position:absolute; height:40px; inset:auto 0 0; opacity:.85; }.sparkline svg { width:100%; height:100%; overflow:visible; }.sparkline path:not(.area) { fill:none; stroke-width:2; vector-effect:non-scaling-stroke; }.sparkline .area { stroke:none; opacity:.13; }
.purple-line path { stroke:var(--purple); fill:var(--purple); }.green-line path { stroke:var(--green); fill:var(--green); }.orange-line path { stroke:var(--orange); fill:var(--orange); }.blue-line path { stroke:var(--blue); fill:var(--blue); }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(300px,.83fr); gap:14px; margin-bottom:14px; }
.panel { padding:18px; min-width:0; }.sales-panel,.funnel-panel { min-height:344px; }
.panel-header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }.panel-header h3 { font-size:13px; margin:0 0 3px; }.panel-header p { font-size:9px; color:var(--muted); margin:0; }
.legend { display:flex; gap:14px; font-size:8px; color:var(--muted); }.legend span { display:flex; align-items:center; gap:5px; }.dot { width:6px; height:6px; border-radius:50%; }.purple-dot { background:var(--purple); }.green-dot { background:var(--green); }
.chart-container { display:flex; height:260px; padding-top:22px; }.y-labels { width:40px; padding-bottom:26px; display:flex; flex-direction:column; justify-content:space-between; color:#a0a1b0; font-size:7px; }.chart-area { position:relative; flex:1; min-width:0; }.grid-lines { position:absolute; inset:0 0 25px; display:flex; flex-direction:column; justify-content:space-between; }.grid-lines i { width:100%; height:1px; background:var(--border); }.main-chart { position:absolute; inset:0 0 25px; width:100%; height:calc(100% - 25px); overflow:visible; }.chart-fill { fill:url(#chartFill); }.chart-line { fill:none; stroke:var(--purple); stroke-width:3; vector-effect:non-scaling-stroke; stroke-linecap:round; }.forecast-line { fill:none; stroke:var(--green); stroke-width:2; stroke-dasharray:5 5; vector-effect:non-scaling-stroke; }.chart-point { fill:var(--surface); stroke:var(--purple); stroke-width:3; vector-effect:non-scaling-stroke; }.tooltip-group rect { fill:#222036; }.tooltip-group text { fill:#fff; font-family:"Manrope"; font-size:8px; text-anchor:middle; }.tooltip-group text:last-child { font-size:10px; font-weight:700; }
.x-labels { position:absolute; bottom:0; width:100%; display:flex; justify-content:space-between; color:#9b9dab; font-size:7px; }
.text-button { border:0; background:transparent; color:var(--purple); font-size:9px; font-weight:700; padding:2px; }.text-button:hover { color:var(--purple-dark); }
.funnel-list { margin-top:22px; }.funnel-row { display:grid; grid-template-columns:1fr 34px; margin-bottom:13px; }.funnel-label { display:flex; justify-content:space-between; align-items:center; padding-right:10px; font-size:9px; }.funnel-label span { color:#66697c; }.funnel-label strong { font-size:9px; }.funnel-row em { grid-row:2; grid-column:2; font-size:8px; color:#898b9c; font-style:normal; text-align:right; padding-top:2px; }.progress-track { grid-row:2; height:5px; border-radius:5px; overflow:hidden; background:#eeeef5; margin-top:5px; }.progress-track span { display:block; height:100%; background:var(--bar); border-radius:5px; transition:width .5s ease; }
.conversion { background:var(--green-soft); color:#147e69; border-radius:9px; padding:10px; display:flex; align-items:center; gap:9px; margin-top:16px; }.conversion-icon { width:26px; height:26px; display:grid; place-items:center; border-radius:8px; background:rgba(33,173,140,.12); font-weight:800; }.conversion strong,.conversion span { display:block; }.conversion strong { font-size:8px; }.conversion div span { font-size:7px; opacity:.7; margin-top:2px; }
.bottom-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(300px,.83fr); gap:14px; }.deals-panel,.tasks-panel { min-height:280px; }
.table-wrap { overflow-x:auto; margin:15px -18px -18px; }table { width:100%; border-collapse:collapse; min-width:650px; }th { text-align:left; color:#a1a2b0; font-size:7px; letter-spacing:.5px; padding:9px 13px; background:#fafafd; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }th:first-child,td:first-child { padding-left:18px; }td { height:60px; padding:8px 13px; border-bottom:1px solid var(--border); font-size:9px; }tbody tr:last-child td { border-bottom:0; }tbody tr:hover { background:#fbfbfe; }
.client-cell,.manager-cell { display:flex; align-items:center; gap:9px; }.client-cell strong,.client-cell span { display:block; }.client-cell strong { font-size:9px; }.client-cell div span { font-size:7px; color:var(--muted); margin-top:2px; }.company-logo { width:29px; height:29px; display:inline-grid; place-items:center; border-radius:8px; font-size:10px; font-weight:800; flex:0 0 auto; }.logo-blue { background:#e7f0ff; color:#367ac9; }.logo-pink { background:#fae7f1; color:#bf5289; }.logo-green { background:#e3f6ee; color:#209c7d; }.logo-violet { background:#eee9ff; color:#7058d8; }.logo-orange { background:#fff0df; color:#d9892f; }
.stage { display:inline-block; padding:5px 7px; border-radius:6px; font-size:7px; font-weight:700; }.purple-stage { color:var(--purple); background:var(--purple-soft); }.orange-stage { color:#c87c27; background:var(--orange-soft); }.blue-stage { color:#397dcc; background:var(--blue-soft); }
.avatar-sm { width:24px; height:24px; font-size:7px; }.avatar-a { color:#44366f; background:#ded1ee; }.avatar-b { color:#664027; background:#f2cdb7; }.avatar-c { color:#1c6262; background:#bce3e0; }
.round-add { width:27px; height:27px; border-radius:8px; border:1px solid var(--border); color:var(--purple); background:var(--surface); font-size:16px; }.round-add:hover { background:var(--purple-soft); border-color:#d5ccff; }
.task-list { margin:13px -18px -18px; }.task-item { display:grid; grid-template-columns:16px 31px 1fr auto; align-items:center; gap:7px; min-height:49px; padding:7px 18px; border-top:1px solid var(--border); cursor:pointer; }.task-item:hover { background:#fbfbfe; }.task-item input { display:none; }.custom-check { width:14px; height:14px; border:1.5px solid #c8c9d5; border-radius:4px; position:relative; }.task-item input:checked + .custom-check { background:var(--purple); border-color:var(--purple); }.task-item input:checked + .custom-check:after { content:"✓"; color:#fff; position:absolute; font-size:9px; left:2px; top:-1px; }.task-time { font-size:8px; color:#9193a3; }.task-item strong,.task-item div span { display:block; }.task-item strong { font-size:8px; }.task-item div span { color:var(--muted); font-size:7px; margin-top:2px; }.task-item.completed strong { text-decoration:line-through; color:#9b9cab; }.priority { font-size:6px; padding:4px 5px; border-radius:5px; font-weight:800; }.priority.high { color:#d65b5f; background:#fff0f0; }.priority.medium { color:#c57d2d; background:#fff4e6; }

.simple-page-header { align-items:center; }.simple-page-header h1 { font-size:28px; }.kanban { display:grid; grid-template-columns:repeat(4,minmax(220px,1fr)); gap:13px; overflow-x:auto; padding-bottom:15px; }.kanban-column { min-width:220px; background:#eeeff5; border-radius:13px; padding:12px; min-height:620px; }.kanban-head { display:flex; align-items:center; justify-content:space-between; font-size:10px; font-weight:800; padding:2px 4px 12px; }.kanban-head span { display:flex; align-items:center; gap:7px; }.kanban-head b { color:#8f91a2; background:var(--surface); min-width:21px; height:20px; border-radius:6px; display:grid; place-items:center; font-size:8px; }.kanban-dot { width:7px; height:7px; border-radius:50%; }.kanban-dot.blue{background:var(--blue)}.kanban-dot.orange{background:var(--orange)}.kanban-dot.purple{background:var(--purple)}.kanban-dot.green{background:var(--green)}
.kanban-cards { display:flex; flex-direction:column; gap:10px; }.deal-card { background:var(--surface); border:1px solid var(--border); border-radius:11px; padding:13px; box-shadow:0 4px 10px rgba(31,28,65,.03); cursor:grab; transition:.2s; }.deal-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); }.deal-card-top { display:flex; align-items:flex-start; justify-content:space-between; }.deal-card-top button { border:0; background:transparent; color:var(--muted); }.deal-card h3 { margin:12px 0 2px; font-size:11px; }.deal-card > p { margin:0 0 13px; color:var(--muted); font-size:8px; }.deal-card > strong { font-size:12px; }.deal-meta { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--border); padding-top:10px; margin-top:13px; color:var(--muted); font-size:8px; }.won-mark { width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:var(--green-soft); color:var(--green); font-weight:800; }.closed-card { opacity:.86; }
.placeholder-page { text-align:center; min-height:calc(100vh - 145px); padding-top:17vh; }.placeholder-icon { margin:0 auto 20px; width:62px; height:62px; display:grid; place-items:center; background:var(--purple-soft); color:var(--purple); font-size:25px; border-radius:18px; }.placeholder-page h1 { font-size:28px; margin:0 0 8px; }.placeholder-page p { color:var(--muted); font-size:11px; margin:0 0 24px; }
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(11,10,25,.5); z-index:25; backdrop-filter:blur(2px); }
.notification-popover { position:fixed; z-index:60; right:82px; top:63px; width:310px; background:var(--surface); border:1px solid var(--border); border-radius:13px; box-shadow:0 20px 50px rgba(27,24,59,.19); display:none; overflow:hidden; }.notification-popover.show { display:block; animation:fadeUp .18s; }.popover-head { display:flex; justify-content:space-between; padding:14px; border-bottom:1px solid var(--border); }.popover-head strong { font-size:11px; }.popover-head button { border:0; background:transparent; color:var(--purple); font-size:8px; font-weight:700; }.notification-item { display:flex; gap:10px; padding:13px 14px; border-bottom:1px solid var(--border); position:relative; }.notification-item:last-child{border:0}.notification-item.unread:after { content:""; width:5px; height:5px; background:var(--purple); position:absolute; right:12px; top:17px; border-radius:50%; }.notification-symbol { width:29px; height:29px; display:grid; place-items:center; border-radius:8px; flex:0 0 auto; font-weight:800; }.notification-symbol.purple { color:var(--purple); background:var(--purple-soft); }.notification-symbol.orange { color:var(--orange); background:var(--orange-soft); }.notification-symbol.green { color:var(--green); background:var(--green-soft); }.notification-item strong { font-size:9px; }.notification-item p { font-size:8px; color:var(--muted); margin:3px 0; }.notification-item small { font-size:7px; color:#b2b3bf; }
.modal-backdrop { position:fixed; inset:0; z-index:100; background:rgba(16,14,36,.56); display:none; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(4px); }.modal-backdrop.show { display:flex; }.modal { width:min(470px,100%); background:var(--surface); border-radius:16px; padding:23px; box-shadow:0 30px 80px rgba(12,10,34,.3); animation:modalIn .22s ease; }@keyframes modalIn{from{opacity:0;transform:scale(.97) translateY(8px)}to{opacity:1;transform:none}}.modal-header { display:flex; align-items:flex-start; justify-content:space-between; }.modal-header h2 { margin:0; font-size:19px; }.modal-close { border:0; background:var(--surface-soft); color:var(--muted); width:31px; height:31px; border-radius:8px; font-size:20px; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-top:21px; }.field { display:flex; flex-direction:column; gap:6px; }.field.full { grid-column:1/-1; }.field span { font-size:9px; font-weight:700; color:#5f6175; }.field input,.field select { height:41px; border:1px solid var(--border); border-radius:9px; padding:0 11px; outline:none; color:var(--text); background:var(--surface); font-size:10px; }.field input:focus,.field select:focus { border-color:#b5aaff; box-shadow:0 0 0 3px rgba(104,84,237,.08); }.modal-actions { margin-top:21px; display:flex; justify-content:flex-end; gap:8px; }
.toast { position:fixed; z-index:110; right:25px; bottom:25px; width:250px; background:#222036; color:#fff; border-radius:11px; padding:12px; display:flex; gap:10px; align-items:center; box-shadow:0 18px 35px rgba(20,18,44,.25); transform:translateY(90px); opacity:0; transition:.3s; }.toast.show { transform:none; opacity:1; }.toast > span { width:29px; height:29px; display:grid; place-items:center; background:var(--green); border-radius:8px; }.toast strong { font-size:9px; }.toast p { margin:2px 0 0; font-size:8px; color:#aba9bc; }

body.dark { --bg:#11101b; --surface:#1c1a29; --surface-soft:#242231; --text:#f3f1fb; --muted:#9996aa; --border:#302e40; --shadow:0 10px 35px rgba(0,0,0,.2); }.dark .topbar { background:rgba(28,26,41,.88); }.dark .period-control,.dark .kanban-column { background:#171622; }.dark .search-wrap input { background:#242231; }.dark .tooltip-group rect { fill:#f2effc; }.dark .tooltip-group text { fill:#211f33; }.dark th { background:#22202f; }.dark tbody tr:hover,.dark .task-item:hover { background:#211f2e; }

@media (max-width:1180px){.stats-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid,.bottom-grid{grid-template-columns:1fr}.funnel-panel{min-height:auto}.funnel-list{display:grid;grid-template-columns:1fr 1fr;gap:0 25px}.conversion{grid-column:1/-1}.kanban{grid-template-columns:repeat(4,280px)}}
@media (max-width:780px){:root{--sidebar:240px}.sidebar{transform:translateX(-100%)}.sidebar.open{transform:none}.sidebar-overlay.show{display:block}.main-content{margin-left:0}.topbar{height:64px;padding:0 16px;gap:10px}.menu-toggle{display:grid}.search-wrap{width:auto;flex:1}.search-wrap kbd{display:none}.topbar-actions{margin:0}.topbar-actions .icon-button:first-child{display:none}.primary-button span{display:none}.page-wrap{padding:22px 16px 32px}.page-heading{align-items:flex-start;gap:17px;flex-direction:column}.simple-page-header{align-items:flex-start}.stats-grid{gap:10px}.stat-card{height:145px}.page-heading h1{font-size:22px}.dashboard-grid,.bottom-grid{gap:10px}.panel{padding:15px}.table-wrap,.task-list{margin-left:-15px;margin-right:-15px}.notification-popover{right:15px;top:59px;width:calc(100vw - 30px)}.funnel-list{display:block}.chart-container{height:230px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}}
@media (max-width:520px){.stats-grid{grid-template-columns:1fr}.stat-card{height:137px}.period-control{width:100%}.period-control button{flex:1}.page-heading p{line-height:1.6}.sales-panel{min-height:315px}.chart-container{height:220px}.legend{display:none}.bottom-grid{display:block}.tasks-panel{margin-top:10px}.topbar .primary-button{width:38px;padding:0}.simple-page-header .primary-button{width:auto}.simple-page-header .primary-button svg{display:none}.toast{left:15px;right:15px;width:auto;bottom:15px}}

/* Company website templates */
.site-nav-badge { font-size:6px; padding:0 5px; width:auto; }
.site-page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:20px; }
.site-page-head h1 { margin:0 0 7px; font-size:28px; letter-spacing:-1px; }
.site-page-head > div > p:last-child { margin:0; color:var(--muted); font-size:11px; }
.site-status { min-width:205px; display:flex; align-items:center; gap:10px; padding:11px 13px; background:var(--surface); border:1px solid var(--border); border-radius:8px; }
.site-status > i { width:9px; height:9px; border-radius:50%; background:#c5c7d2; box-shadow:0 0 0 4px #f0f1f5; }
.site-status.live > i { background:var(--green); box-shadow:0 0 0 4px var(--green-soft); }
.site-status span,.site-status b,.site-status small { display:block; }.site-status b { font-size:10px; }.site-status small { color:var(--muted); font-size:8px; margin-top:2px; }
.site-steps { height:48px; display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:14px; border:1px solid var(--border); background:var(--surface); border-radius:8px; }
.site-steps span { display:flex; align-items:center; gap:7px; color:#9294a4; font-size:9px; font-weight:700; }.site-steps span.active { color:var(--text); }
.site-steps b { width:21px; height:21px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#b8bac5; font-size:8px; }.site-steps .active b { background:var(--purple); }
.site-steps i { width:55px; height:1px; background:var(--border); }
.site-builder-panel { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:20px; box-shadow:0 4px 20px rgba(30,29,55,.025); }
.builder-title { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:17px; }
.builder-title h2 { margin:3px 0 4px; font-size:17px; }.builder-title p { margin:0; color:var(--muted); font-size:9px; }
.builder-kicker { color:var(--purple); font-size:7px; letter-spacing:1px; font-weight:800; }.template-count { color:var(--muted); font-size:8px; background:var(--surface-soft); padding:6px 8px; border-radius:6px; }
.template-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.template-card { min-width:0; padding:0; overflow:hidden; text-align:left; border:1px solid var(--border); border-radius:8px; background:var(--surface); transition:.2s; }
.template-card:hover { transform:translateY(-2px); border-color:#c8c1f9; box-shadow:0 10px 25px rgba(50,43,101,.1); }.template-card.selected { border-color:var(--purple); box-shadow:0 0 0 2px rgba(104,84,237,.11); }
.template-preview { display:block; height:145px; position:relative; overflow:hidden; border-bottom:1px solid var(--border); }
.template-preview i { display:block; position:absolute; }.mini-nav { left:9%; top:10%; width:82%; height:5px; border-radius:2px; opacity:.55; }.mini-copy { left:9%; top:29%; width:27%; height:4px; border-radius:3px; }.mini-title { left:9%; top:38%; width:48%; height:19px; border-radius:3px; }.mini-text { left:9%; top:58%; width:39%; height:9px; border-radius:2px; opacity:.52; }.mini-cta { left:9%; top:73%; width:21%; height:14px; border-radius:3px; }
.aurora-preview { background:#0d1220; }.aurora-preview .mini-nav,.aurora-preview .mini-title,.aurora-preview .mini-text { background:#f3f6fb; }.aurora-preview .mini-copy,.aurora-preview .mini-cta { background:#70e0bd; }.mini-orb { width:105px; height:105px; border-radius:50%; right:-8px; bottom:-16px; border:22px solid #6e5cf2; box-shadow:0 0 0 13px rgba(112,224,189,.16); }
.atelier-preview { background:#f6eee8; }.atelier-preview .mini-nav,.atelier-preview .mini-text { background:#7e6e65; }.atelier-preview .mini-copy,.atelier-preview .mini-cta { background:#b85166; }.atelier-preview .mini-title { background:#342f2c; width:43%; }.mini-photo { inset:21% 6% 0 61%; border-radius:50% 50% 0 0; background:linear-gradient(160deg,#d8aa9d,#845f58); }
.vertex-preview { background:#f5f6f7; }.vertex-preview .mini-nav,.vertex-preview .mini-title { background:#121418; }.vertex-preview .mini-copy,.vertex-preview .mini-cta { background:#ff5b35; }.vertex-preview .mini-text { background:#686c74; }.mini-grid-art { width:95px; height:95px; right:4%; bottom:5%; background:repeating-linear-gradient(0deg,transparent 0 15px,#c9ccd0 16px),repeating-linear-gradient(90deg,transparent 0 15px,#c9ccd0 16px); transform:rotate(-7deg); }
.terra-preview { background:#17382f; }.terra-preview .mini-nav,.terra-preview .mini-title,.terra-preview .mini-text { background:#f6f0dd; }.terra-preview .mini-copy,.terra-preview .mini-cta { background:#e1b95f; }.mini-arch { width:91px; height:110px; right:5%; bottom:-20px; border-radius:50px 50px 0 0; background:linear-gradient(145deg,#de8c5f,#78513c); box-shadow:inset 0 0 0 7px rgba(255,255,255,.2); }
.template-meta { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:11px; }.template-meta span,.template-meta b,.template-meta small { display:block; }.template-meta b { color:var(--text); font-size:10px; }.template-meta small { margin-top:2px; color:var(--muted); font-size:7px; }.template-meta em { color:var(--purple); font-size:7px; font-style:normal; font-weight:800; white-space:nowrap; }
.builder-columns { display:grid; grid-template-columns:minmax(400px,.86fr) minmax(470px,1.14fr); gap:14px; margin-top:14px; align-items:start; }.builder-title.compact { margin-bottom:14px; }
.site-publish-form { display:flex; flex-direction:column; gap:11px; }.site-publish-form label > span { display:block; margin-bottom:5px; color:#606276; font-size:8px; font-weight:800; }
.site-publish-form input,.site-publish-form textarea { width:100%; border:1px solid var(--border); border-radius:7px; background:var(--surface); color:var(--text); outline:none; padding:10px 11px; font-size:10px; resize:vertical; }.site-publish-form textarea { min-height:59px; }
.site-publish-form input:focus,.site-publish-form textarea:focus { border-color:#aaa0f4; box-shadow:0 0 0 3px rgba(104,84,237,.08); }.form-pair { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.subdomain-input { display:flex; align-items:center; border:1px solid var(--border); border-radius:7px; overflow:hidden; }.subdomain-input:focus-within { border-color:#aaa0f4; box-shadow:0 0 0 3px rgba(104,84,237,.08); }.subdomain-input input { border:0; border-radius:0; box-shadow:none!important; }.subdomain-input b { align-self:stretch; display:flex; align-items:center; padding:0 10px; color:#838596; background:var(--surface-soft); border-left:1px solid var(--border); font-size:8px; white-space:nowrap; }.site-publish-form label > small { display:block; margin-top:4px; color:var(--muted); font-size:7px; }
.publish-row { display:flex; justify-content:space-between; align-items:center; gap:14px; padding-top:7px; }.included-note { display:flex; align-items:center; gap:8px; }.included-note > span { width:24px; height:24px; display:grid; place-items:center; color:var(--green); background:var(--green-soft); border-radius:6px; font-weight:800; }.included-note p,.included-note b,.included-note small { display:block; margin:0; }.included-note b { font-size:8px; }.included-note small { margin-top:2px; color:var(--muted); font-size:7px; }
.publish-button { height:42px; display:flex; align-items:center; padding:0 4px 0 15px; gap:14px; border:0; border-radius:7px; color:#fff; background:#171529; font-size:9px; font-weight:800; }.publish-button b { width:33px; height:33px; display:grid; place-items:center; border-radius:5px; background:var(--purple); font-size:15px; }.publish-button:disabled { opacity:.6; cursor:wait; }
.preview-panel { position:sticky; top:87px; padding:0; overflow:hidden; }.preview-toolbar { height:59px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; border-bottom:1px solid var(--border); }.preview-toolbar > div:first-child span,.preview-toolbar > div:first-child b { display:block; }.preview-toolbar > div:first-child b { margin-top:3px; font-size:10px; }.device-toggle { display:flex; gap:3px; padding:3px; border-radius:6px; background:var(--surface-soft); }.device-toggle button { width:29px; height:25px; display:grid; place-items:center; border:0; border-radius:4px; color:#a1a3b0; background:transparent; font-size:11px; }.device-toggle button.active { color:var(--purple); background:var(--surface); box-shadow:0 1px 4px rgba(0,0,0,.08); }
.browser-mock { padding:13px; background:#e7e8ed; min-height:485px; display:flex; flex-direction:column; align-items:center; }.browser-bar { width:100%; height:31px; display:flex; align-items:center; gap:4px; padding:0 9px; border-radius:7px 7px 0 0; background:#fff; }.browser-bar i { width:5px; height:5px; border-radius:50%; background:#d4d5dc; }.browser-bar span { flex:1; height:17px; display:grid; place-items:center; margin-left:5px; border-radius:4px; color:#989aa6; background:#f4f4f6; font-size:6px; }
#sitePreview { width:100%; height:420px; border:0; background:#fff; transition:width .25s; }.browser-mock.mobile #sitePreview { width:250px; }.browser-mock.mobile .browser-bar { width:250px; }
@media (max-width:1180px){.template-grid{grid-template-columns:repeat(2,1fr)}.builder-columns{grid-template-columns:1fr}.preview-panel{position:static}}
@media (max-width:780px){.site-page-head{align-items:flex-start;flex-direction:column}.site-status{width:100%}.site-steps i{width:18px}.builder-columns{display:block}.preview-panel{margin-top:14px}.publish-row{align-items:stretch;flex-direction:column}.publish-button{width:100%;justify-content:space-between}}
@media (max-width:520px){.template-grid{grid-template-columns:1fr}.template-preview{height:180px}.form-pair{grid-template-columns:1fr}.site-builder-panel{padding:15px}.subdomain-input b{font-size:7px;padding:0 6px}.site-steps{gap:6px}.site-steps span{font-size:7px}.site-steps i{width:7px}.browser-mock{padding:8px;min-height:420px}#sitePreview{height:370px}}
.empty-state { padding:27px 18px; color:var(--muted); text-align:center; font-size:9px; }
.empty-chart { position:relative; }.chart-zero { position:absolute; inset:35px 20px 25px 50px; display:grid; place-content:center; text-align:center; color:var(--muted); border:1px dashed var(--border); border-radius:9px; }.chart-zero b,.chart-zero span{display:block}.chart-zero b{color:var(--text);font-size:10px}.chart-zero span{margin-top:5px;font-size:8px}
.kanban-empty { padding:34px 10px; text-align:center; color:#a0a2b0; font-size:9px; border:1px dashed #d8d9e1; border-radius:9px; }
.site-management { margin-bottom:14px; }.site-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:12px; }.site-metrics article { min-height:95px; display:flex; align-items:center; gap:12px; padding:17px; border:1px solid var(--border); border-radius:9px; background:var(--surface); }.metric-symbol { width:35px; height:35px; display:grid; place-items:center; border-radius:9px; font-weight:800; }.metric-symbol.purple{color:var(--purple);background:var(--purple-soft)}.metric-symbol.blue{color:var(--blue);background:var(--blue-soft)}.metric-symbol.green{color:var(--green);background:var(--green-soft)}.metric-symbol.orange{color:var(--orange);background:var(--orange-soft)}.site-metrics small,.site-metrics b,.site-metrics em { display:block; }.site-metrics small { color:var(--muted); font-size:7px; font-weight:700; }.site-metrics b { margin:3px 0 1px; font-size:20px; }.site-metrics em { color:#acaeba; font-size:6px; font-style:normal; }.site-crm-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:12px; }.catalog-panel,.leads-panel { padding:17px; }.catalog-panel .panel-header,.leads-panel .panel-header { margin-bottom:10px; }.leads-total { min-width:25px; height:25px; display:grid; place-items:center; border-radius:7px; color:var(--purple); background:var(--purple-soft); font-size:8px; font-weight:800; }.site-catalog,.site-leads-list { border-top:1px solid var(--border); }.catalog-site { display:grid; grid-template-columns:37px minmax(130px,1fr) auto auto; align-items:center; gap:11px; padding:12px 0; border-bottom:1px solid var(--border); }.catalog-site-icon { width:35px; height:35px; display:grid; place-items:center; border-radius:8px; color:#fff; background:var(--purple); }.catalog-site-icon.atelier{background:#b65367}.catalog-site-icon.vertex{background:#ff5a34}.catalog-site-icon.terra{background:#246451}.catalog-site b,.catalog-site a { display:block; }.catalog-site b{font-size:9px}.catalog-site a{margin-top:3px;color:var(--purple);font-size:7px;text-decoration:none}.catalog-site dl{display:flex;gap:18px;margin:0}.catalog-site dl>div{text-align:center}.catalog-site dt{color:var(--muted);font-size:6px}.catalog-site dd{margin:3px 0 0;font-size:10px;font-weight:800}.live-chip{padding:5px 7px;border-radius:6px;color:var(--green);background:var(--green-soft);font-size:6px;font-weight:800;white-space:nowrap}.site-lead{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:9px;padding:11px 0;border-bottom:1px solid var(--border)}.site-lead>span{width:29px;height:29px;display:grid;place-items:center;border-radius:8px;color:var(--purple);background:var(--purple-soft);font-size:8px;font-weight:800}.site-lead b,.site-lead a{display:block}.site-lead b{font-size:8px}.site-lead a{margin-top:2px;color:var(--text);font-size:7px;text-decoration:none}.site-lead small{text-align:right;color:var(--muted);font-size:6px;line-height:1.6}
@media (max-width:1180px){.site-metrics{grid-template-columns:repeat(2,1fr)}.site-crm-grid{grid-template-columns:1fr}}
@media (max-width:600px){.site-metrics{grid-template-columns:1fr}.catalog-site{grid-template-columns:37px 1fr auto}.catalog-site dl{grid-column:2/4}.live-chip{grid-column:3;grid-row:1}}
.priority.low{color:#3b84c8;background:#eaf3ff}.task-page-filters{display:flex;gap:7px;margin-bottom:12px}.task-page-filters button{height:34px;padding:0 12px;border:1px solid var(--border);border-radius:8px;color:var(--muted);background:var(--surface);font-size:8px;font-weight:700}.task-page-filters button.active{color:var(--purple);border-color:#cfc7ff;background:var(--purple-soft)}.task-page-filters b{margin-left:5px}.task-page-panel{padding:0;overflow:hidden}.task-page-row{min-height:70px;display:grid;grid-template-columns:25px 1fr 125px 55px 30px;align-items:center;gap:12px;padding:10px 17px;border-bottom:1px solid var(--border)}.task-page-row:last-child{border-bottom:0}.task-check{width:20px;height:20px;display:grid;place-items:center;border:1.5px solid #c5c6d1;border-radius:6px;color:#fff;background:transparent;font-size:10px}.task-page-row.completed .task-check{border-color:var(--green);background:var(--green)}.task-page-main b,.task-page-main span{display:block}.task-page-main b{font-size:10px}.task-page-main span{margin-top:3px;color:var(--muted);font-size:8px}.task-page-row.completed .task-page-main b{text-decoration:line-through;color:#a1a2ae}.task-page-row time{color:var(--muted);font-size:8px}.task-delete{width:26px;height:26px;border:0;border-radius:7px;color:#b0b1bc;background:transparent;font-size:18px}.task-delete:hover{color:var(--danger);background:#fff0f0}.client-toolbar{display:flex;gap:7px}.client-toolbar input,.client-toolbar select{height:36px;border:1px solid var(--border);border-radius:8px;padding:0 10px;color:var(--text);background:var(--surface);outline:none;font-size:8px}.client-toolbar input{width:210px}.client-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:12px}.client-stats article{padding:15px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}.client-stats small,.client-stats b{display:block}.client-stats small{color:var(--muted);font-size:7px}.client-stats b{margin-top:6px;font-size:21px}.clients-catalog{padding:0;overflow:hidden}.clients-catalog .table-wrap{margin:0}.phone-link,.source-link{color:var(--text);text-decoration:none;font-size:8px}.source-link{color:var(--purple)}.client-status{height:28px;border:0;border-radius:6px;padding:0 7px;color:#5f6073;background:var(--surface-soft);font-size:7px;font-weight:700}.call-button{display:inline-flex;height:27px;align-items:center;padding:0 9px;border-radius:6px;color:#fff;background:var(--purple);text-decoration:none;font-size:7px;font-weight:700}
@media(max-width:700px){.task-page-row{grid-template-columns:25px 1fr 30px}.task-page-row time,.task-page-row>.priority{grid-column:2}.client-toolbar{width:100%;flex-direction:column}.client-toolbar input{width:100%}.client-stats{grid-template-columns:1fr}.simple-page-header{gap:15px}}

/* Dark theme polish for task and client workspaces. */
.dark { color-scheme:dark; }
.dark .client-toolbar input,.dark .client-toolbar select,.dark .client-status { color:var(--text); background:#242231; border-color:var(--border); }
.dark .client-toolbar input::placeholder { color:#7f7c90; }
.dark .clients-catalog,.dark .client-stats article,.dark .task-page-panel { background:var(--surface); }
.dark .clients-catalog tbody tr:hover,.dark .task-page-row:hover { background:#22202f; }
.dark .call-button { color:#fff; }