.overview-banner {
    min-height: 195px; margin-bottom:18px; padding:30px 34px; position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:space-between; gap:30px;
    border-radius:var(--radius-lg); border:1px solid rgba(13,156,166,.13);
    background:linear-gradient(120deg, color-mix(in srgb,var(--accent-soft) 72%,var(--surface-solid)), var(--surface-solid) 56%, color-mix(in srgb,var(--bg-soft) 75%,var(--surface-solid)));
    box-shadow:var(--shadow-sm);
}
.overview-banner::before { content:""; position:absolute; width:270px; height:270px; right:-80px; top:-140px; border-radius:50%; border:1px solid rgba(13,156,166,.10); box-shadow:0 0 0 30px rgba(13,156,166,.025),0 0 0 60px rgba(13,156,166,.018); }
.overview-banner-copy { max-width:680px; position:relative; z-index:2; }
.banner-label { display:inline-flex; margin-bottom:12px; padding:5px 9px; border-radius:7px; background:var(--surface); border:1px solid var(--border); color:var(--accent-strong); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.13em; }
.overview-banner h2 { max-width:620px; margin-bottom:10px; font-size:clamp(1.55rem,2.4vw,2.25rem); }
.overview-banner p { max-width:590px; margin:0; font-size:13.5px; }
.overview-banner-orbit { width:150px; height:150px; position:relative; flex:0 0 150px; }
.orbit-ring { position:absolute; border-radius:50%; border:1px solid rgba(13,156,166,.18); }
.ring-one { inset:13px; }.ring-two { inset:34px; border-style:dashed; }
.orbit-center { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); width:54px; height:54px; display:grid; place-items:center; border-radius:18px; color:white; background:linear-gradient(145deg,#0a8e97,#28b0b8); font-size:23px; font-weight:800; box-shadow:0 13px 35px rgba(13,156,166,.25); }
.orbit-dot { position:absolute; width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px rgba(13,156,166,.08); }
.dot-one { left:12px; top:68px; }.dot-two { right:26px; bottom:20px; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.metric-card { padding:18px; min-height:156px; display:flex; flex-direction:column; }
.metric-card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.metric-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; color:var(--accent-strong); background:var(--accent-soft); }
.metric-value { display:block; margin-bottom:3px; color:var(--text-strong); font-size:1.65rem; line-height:1.15; letter-spacing:-.04em; }
.metric-label { color:var(--text); font-size:11.5px; font-weight:800; }
.metric-card > small { margin-top:3px; color:var(--muted); font-size:10px; }
.metric-foot { margin-top:auto; padding-top:14px; display:flex; align-items:center; gap:8px; }
.chart-card, .response-card { min-height:340px; }
.sparkline-wrap { position:relative; height:275px; padding:22px 22px 32px; overflow:hidden; }
.chart-grid-lines { position:absolute; inset:25px 22px 48px; display:flex; flex-direction:column; justify-content:space-between; }
.chart-grid-lines span { height:1px; background:var(--border); }
.sparkline { width:100%; height:205px; position:relative; z-index:2; color:var(--accent); overflow:visible; }
.spark-area { fill:url(#areaFill); stroke:none; }.spark-line { fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; }
.chart-axis { display:flex; justify-content:space-between; color:var(--muted-2); font-size:9px; }
.health-score { display:grid; place-items:center; padding:24px 20px 18px; }
.score-ring { width:135px; height:135px; position:relative; display:grid; place-items:center; align-content:center; border-radius:50%; background:conic-gradient(var(--accent) 0 94%,var(--bg-soft) 94% 100%); }
.score-ring::before { content:""; position:absolute; inset:10px; border-radius:50%; background:var(--surface-solid); }
.score-ring strong,.score-ring span { position:relative; z-index:2; }.score-ring strong { color:var(--text-strong); font-size:1.6rem; }.score-ring span { color:var(--muted); font-size:10px; }
.health-list { padding:0 22px 20px; display:grid; gap:8px; }
.health-list div { display:flex; align-items:center; justify-content:space-between; padding-top:8px; border-top:1px solid var(--border); font-size:11px; }.health-list span{color:var(--muted)}.health-list strong{color:var(--text-strong)}
.channel-health-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:20px 22px 22px; }
.channel-health-card { padding:14px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:center; border:1px solid var(--border); border-radius:14px; background:var(--surface-2); transition:.22s var(--ease); }
.channel-health-card:hover { transform:translateY(-2px); border-color:var(--border-strong); box-shadow:var(--shadow-sm); }
.channel-health-card > div { display:grid; min-width:0; }.channel-health-card strong { color:var(--text-strong); font-size:11.5px; }.channel-health-card small { color:var(--muted); font-size:9.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.connected-label { grid-column:1/-1; display:flex; align-items:center; gap:7px; padding-top:9px; margin-top:2px; border-top:1px solid var(--border); color:var(--muted); font-size:9.5px; font-weight:700; }
.conversation-table-wrap { overflow:auto; padding:10px 10px 14px; }
.conversation-table { width:100%; border-collapse:separate; border-spacing:0; min-width:760px; }
.conversation-table th { padding:10px 12px; color:var(--muted-2); text-align:left; text-transform:uppercase; letter-spacing:.08em; font-size:8.5px; }
.conversation-table td { padding:12px; border-top:1px solid var(--border); color:var(--muted); font-size:11px; }
.conversation-table tbody tr { transition:.18s ease; }.conversation-table tbody tr:hover td { background:var(--surface-hover); }
.truncate-cell { max-width:260px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* LIVE CHAT */
.channel-tabs-shell { margin-bottom:14px; padding:5px; overflow-x:auto; border:1px solid var(--border); border-radius:15px; background:var(--surface); box-shadow:var(--shadow-sm); }
.channel-tabs { display:flex; align-items:center; gap:4px; min-width:max-content; }
.channel-tab { min-height:47px; padding:0 12px; display:flex; align-items:center; gap:8px; border:1px solid transparent; background:transparent; color:var(--muted); border-radius:11px; cursor:pointer; font-size:11.5px; font-weight:700; transition:.2s var(--ease); }
.channel-tab .channel-logo { width:30px; height:30px; border-radius:9px; }.channel-tab small { min-width:20px; height:20px; padding:0 6px; display:grid; place-items:center; background:var(--bg-soft); border-radius:10px; color:var(--muted); font-size:9px; }
.channel-tab:hover { background:var(--surface-hover); color:var(--text-strong); }.channel-tab.active { background:var(--accent-faint); color:var(--text-strong); border-color:rgba(13,156,166,.10); }
.chat-workspace { min-height:670px; height:calc(100vh - 230px); display:grid; grid-template-columns:310px minmax(420px,1fr) 285px; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow-md); }
.conversation-pane { min-width:0; border-right:1px solid var(--border); display:flex; flex-direction:column; background:color-mix(in srgb,var(--surface-solid) 75%,transparent); }
.conversation-pane-head { display:flex; justify-content:space-between; align-items:center; padding:17px 16px 12px; }.conversation-pane-head h2 { margin:0; font-size:16px; }.conversation-pane-head .eyebrow { margin-bottom:3px; font-size:8px; }
.conversation-search { margin:0 12px 10px; min-height:38px; display:flex; align-items:center; gap:8px; padding:0 10px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); color:var(--muted); }
.conversation-search input { flex:1; min-width:0; border:0; background:transparent; color:var(--text); font-size:11px; }.conversation-search input::placeholder{color:var(--muted-2)}
.conversation-list { min-height:0; flex:1; overflow:auto; padding:0 6px 8px; }
.conversation-item { width:100%; position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; padding:12px 10px; border:1px solid transparent; background:transparent; text-align:left; border-radius:12px; cursor:pointer; transition:.18s ease; }
.conversation-item:hover { background:var(--surface-hover); }.conversation-item.active { background:var(--accent-faint); border-color:rgba(13,156,166,.10); }
.avatar-wrap { position:relative; }.mini-channel { position:absolute; right:-3px; bottom:-3px; width:17px; height:17px; display:grid; place-items:center; border-radius:6px; border:2px solid var(--surface-solid); }
.conversation-item-copy { min-width:0; display:grid; gap:3px; }.conversation-item-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }.conversation-item-row strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-strong); font-size:11.5px; }.conversation-item-row small { color:var(--muted-2); font-size:8.5px; }
.conversation-preview { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:10px; }.conversation-meta { display:flex; gap:6px; }.conversation-meta em { font-style:normal; color:var(--muted-2); font-size:8.5px; }
.unread-count { position:absolute; right:9px; bottom:11px; min-width:18px; height:18px; padding:0 5px; display:grid; place-items:center; border-radius:9px; background:var(--accent); color:#fff; font-size:8.5px; font-weight:800; }
.empty-list { display:none; padding:40px 15px; color:var(--muted); text-align:center; font-size:11px; }.empty-list.show { display:block; }
.message-pane { min-width:0; position:relative; background:linear-gradient(180deg,var(--surface-2),var(--surface-solid)); }
.chat-view { height:100%; display:none; grid-template-rows:auto 1fr auto; }.chat-view.active { display:grid; }
.chat-view-head { min-height:70px; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:11px 16px; border-bottom:1px solid var(--border); background:color-mix(in srgb,var(--surface-solid) 92%,transparent); }
.chat-person { display:flex; align-items:center; gap:10px; }.chat-person div{display:grid}.chat-person strong { color:var(--text-strong); font-size:12px; }.chat-person span { margin-top:2px; display:flex; align-items:center; gap:6px; color:var(--muted); font-size:9.5px; }.chat-person .status-dot { width:6px; height:6px; }
.chat-head-actions { display:flex; align-items:center; gap:8px; }
.chat-message-area { min-height:0; overflow:auto; padding:24px 24px 18px; background-image:radial-gradient(rgba(85,110,115,.06) .7px, transparent .7px); background-size:16px 16px; }
.message-date { display:flex; align-items:center; justify-content:center; margin-bottom:20px; }.message-date span { padding:4px 9px; border-radius:7px; background:var(--surface); border:1px solid var(--border); color:var(--muted); font-size:8.5px; box-shadow:var(--shadow-sm); }
.message-row { display:flex; margin:8px 0; }.message-row.outgoing { justify-content:flex-end; }.message-bubble { max-width:min(520px,78%); padding:10px 12px 7px; border:1px solid var(--border); border-radius:14px 14px 14px 4px; background:var(--surface-solid); box-shadow:0 5px 15px rgba(20,50,55,.035); }.outgoing .message-bubble { background:var(--accent-soft); border-color:rgba(13,156,166,.10); border-radius:14px 14px 4px 14px; }
.message-bubble p { margin:0; color:var(--text); font-size:11.5px; line-height:1.55; }.message-bubble small { display:block; margin-top:4px; color:var(--muted-2); text-align:right; font-size:8px; }
.message-composer { margin:12px; min-height:54px; display:grid; grid-template-columns:auto 1fr auto; align-items:end; gap:7px; padding:6px 7px; border:1px solid var(--border); background:var(--surface-solid); border-radius:14px; box-shadow:var(--shadow-sm); }.message-composer textarea { min-height:36px; max-height:110px; padding:8px 4px; resize:none; border:0; background:transparent; color:var(--text); font-size:11.5px; }.message-composer textarea::placeholder{color:var(--muted-2)}
.composer-tools { padding-bottom:1px; }.send-btn { width:39px; height:39px; border:0; display:grid; place-items:center; border-radius:11px; background:var(--accent); color:#fff; cursor:pointer; transition:.2s var(--ease); }.send-btn:hover{background:var(--accent-strong);transform:translateY(-1px)}
.customer-pane { min-width:0; border-left:1px solid var(--border); background:color-mix(in srgb,var(--surface-solid) 80%,transparent); overflow:auto; }.customer-view{display:none;padding:22px 18px}.customer-view.active{display:block}.customer-profile{text-align:center;padding:5px 0 22px;border-bottom:1px solid var(--border)}.customer-profile .avatar{margin:0 auto 10px}.customer-profile h3{margin:0 0 8px;font-size:14px}.customer-profile .channel-pill{margin:0 auto}.detail-group{padding:18px 0;border-bottom:1px solid var(--border)}.detail-label{display:block;margin-bottom:11px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.1em;font-size:8.5px;font-weight:800}.detail-row{display:grid;gap:2px;margin-top:10px}.detail-row small{color:var(--muted);font-size:8.5px}.detail-row strong{color:var(--text);font-size:10.5px;font-weight:700;word-break:break-word}.customer-note{padding-top:18px}.customer-note p{margin:0;font-size:10px;line-height:1.6}.chat-empty-state{display:none;position:absolute;inset:0;place-items:center;align-content:center;text-align:center;padding:20px;color:var(--muted)}.chat-empty-state.show{display:grid}.chat-empty-state>span{width:60px;height:60px;display:grid;place-items:center;border-radius:20px;background:var(--accent-soft);color:var(--accent-strong);margin-bottom:12px}.chat-empty-state h3{margin:0 0 5px}.chat-empty-state p{margin:0;font-size:11px}

/* CONTACTS */
.contact-tools { margin-bottom:14px; padding:12px; display:flex; align-items:center; justify-content:space-between; gap:12px; }.contact-search{flex:1;max-width:560px;min-height:40px;display:flex;align-items:center;gap:9px;padding:0 11px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2);color:var(--muted)}.contact-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);font-size:11.5px}.contact-filter-pills{display:flex;gap:6px}.filter-chip{min-height:34px;padding:0 11px;border:1px solid var(--border);border-radius:9px;background:transparent;color:var(--muted);font-size:10px;font-weight:700;cursor:pointer}.filter-chip.active,.filter-chip:hover{background:var(--accent-soft);color:var(--accent-strong);border-color:transparent}.contacts-card{overflow:hidden}.contacts-list{padding:12px}.contacts-list-head,.contact-row{display:grid;grid-template-columns:minmax(220px,1.4fr) .8fr 1fr .7fr .8fr .6fr;align-items:center;gap:14px;padding:10px 12px}.contacts-list-head{color:var(--muted-2);text-transform:uppercase;letter-spacing:.07em;font-size:8px;font-weight:800}.contact-row{min-height:66px;border-top:1px solid var(--border);color:var(--muted);font-size:10.5px;transition:.18s ease}.contact-row:hover{background:var(--surface-hover)}

/* ANALYTICS */
.analytics-chart-card{margin-bottom:18px;min-height:400px}.chart-legend{display:flex;gap:12px;flex-wrap:wrap}.chart-legend span{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:9px}.legend-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.legend-dot.green,.bar.whatsapp{background:#3ebd80}.legend-dot.blue,.bar.facebook{background:#578be0}.legend-dot.pink,.bar.instagram{background:#d8739c}.legend-dot.violet,.bar.email{background:#8d76d4}.bar-chart{height:325px;padding:28px 30px 22px;display:flex;align-items:flex-end;justify-content:space-around;gap:18px;background:linear-gradient(to top,var(--border) 1px,transparent 1px);background-size:100% 64px}.bar-day{height:100%;display:flex;flex:1;max-width:90px;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px}.bar-stack{height:270px;display:flex;align-items:flex-end;gap:3px}.bar{width:9px;height:var(--h);max-height:250px;border-radius:5px 5px 2px 2px;transform-origin:bottom;animation:growBar .7s var(--ease) both}.bar-day small{color:var(--muted);font-size:9px}.analytics-bottom-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:18px}.performance-list{padding:14px 20px 20px}.performance-row{display:grid;grid-template-columns:auto minmax(150px,1fr) 90px 60px;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--border)}.performance-row:first-child{border-top:0}.performance-name{display:grid}.performance-name strong,.performance-row>div strong{color:var(--text-strong);font-size:10.5px}.performance-name small,.performance-row>div small{color:var(--muted);font-size:8.5px}.performance-row>div:not(.performance-name){display:grid}.donut-wrap{padding:28px 22px;display:flex;align-items:center;gap:26px}.donut{width:145px;height:145px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:conic-gradient(#4db780 0 88.8%,#d69448 88.8% 92%,#809399 92% 100%);position:relative}.donut::before{content:"";position:absolute;inset:14px;border-radius:50%;background:var(--surface-solid)}.donut span{position:relative;z-index:2;display:grid;text-align:center}.donut strong{color:var(--text-strong);font-size:18px}.donut small{color:var(--muted);font-size:8.5px}.donut-legend{flex:1;display:grid;gap:9px}.donut-legend div{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px}.donut-legend span{color:var(--muted);font-size:9.5px}.donut-legend strong{color:var(--text-strong);font-size:10px}.legend-dot.resolved{background:#4db780}.legend-dot.open{background:#809399}.legend-dot.pending{background:#d69448}

/* SETTINGS */
.settings-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px}.settings-nav{height:max-content;padding:7px}.settings-nav-item{width:100%;min-height:42px;padding:0 10px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;border:0;border-radius:10px;background:transparent;color:var(--muted);text-align:left;cursor:pointer;font-size:11px;font-weight:700;transition:.18s ease}.settings-nav-item:hover{background:var(--surface-hover);color:var(--text-strong)}.settings-nav-item.active{background:var(--accent-soft);color:var(--accent-strong)}.settings-content{min-height:480px;padding:26px}.settings-panel{display:none}.settings-panel.active{display:block}.settings-panel-head{max-width:650px;padding-bottom:20px;border-bottom:1px solid var(--border);margin-bottom:22px}.settings-panel-head h2{margin:0 0 7px;font-size:20px}.settings-panel-head p{margin:0;font-size:11.5px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:grid;gap:6px}.field-wide{grid-column:1/-1}.field>span{color:var(--text);font-size:10px;font-weight:800}.field input,.field textarea{width:100%;border:1px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:10px;padding:10px 11px;font-size:11.5px}.field input:focus,.field textarea:focus{border-color:rgba(13,156,166,.45);box-shadow:0 0 0 3px rgba(13,156,166,.07)}.field input:disabled{opacity:.6}.settings-save{padding-top:18px}.toggle-list{display:grid}.toggle-row{min-height:70px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px;border-bottom:1px solid var(--border);cursor:pointer}.toggle-row span{display:grid}.toggle-row strong{color:var(--text-strong);font-size:11.5px}.toggle-row small{margin-top:3px;color:var(--muted);font-size:10px}.toggle-row input{position:absolute;opacity:0}.toggle-row i{width:40px;height:22px;position:relative;border-radius:20px;background:var(--bg-soft);border:1px solid var(--border);transition:.2s ease}.toggle-row i::after{content:"";position:absolute;width:16px;height:16px;left:2px;top:2px;border-radius:50%;background:var(--muted-2);transition:.2s ease}.toggle-row input:checked+i{background:var(--accent);border-color:var(--accent)}.toggle-row input:checked+i::after{transform:translateX(18px);background:white}.theme-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:760px}.theme-choice{padding:13px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2);text-align:left;cursor:pointer;transition:.2s var(--ease)}.theme-choice:hover,.theme-choice.active{border-color:rgba(13,156,166,.35);box-shadow:0 8px 24px rgba(13,156,166,.07)}.theme-choice>span:last-child{display:grid;padding:11px 3px 2px}.theme-choice strong{color:var(--text-strong);font-size:11.5px}.theme-choice small{color:var(--muted);font-size:9.5px;margin-top:2px}.theme-preview{height:120px;display:grid;grid-template-columns:27% 1fr;grid-template-rows:30% 1fr;gap:7px;padding:10px;border-radius:10px;overflow:hidden}.theme-preview i{display:block;border-radius:5px}.theme-preview i:first-child{grid-row:1/-1}.light-preview{background:#eef3f4}.light-preview i{background:#fff;border:1px solid #dfe7e9}.dark-preview{background:#111b1e}.dark-preview i{background:#1d2a2e;border:1px solid #2b3a3e}.appearance-note{max-width:760px;margin-top:15px;padding:12px 13px;display:flex;gap:9px;border-radius:11px;background:var(--accent-faint);color:var(--accent-strong)}.appearance-note p{margin:0;color:var(--muted);font-size:10.5px}


/* =========================================================
   CYAN CONNECT V6 - Page-specific template system
   ========================================================= */
.page-intro { margin-bottom: 22px; }
.page-intro p { max-width: 760px; font-size: 15.5px; line-height: 1.65; }
.page-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.surface-card { border-radius: 18px; }
.btn { min-height: 44px; padding: 10px 15px; font-size: 14.5px; border-radius: 11px; }
.btn-primary { display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#fff; border:1px solid var(--accent); }
.btn-primary:hover { background:var(--accent-strong); transform:translateY(-1px); }
.btn-secondary { display:inline-flex; align-items:center; gap:8px; background:var(--surface-solid); color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover { border-color:var(--border-strong); background:var(--surface-hover); }
.btn-ghost { display:inline-flex; align-items:center; gap:8px; background:transparent; border:1px solid transparent; color:var(--muted); }
.btn-ghost:hover { background:var(--surface-hover); color:var(--text); }
.icon-only { width:40px; height:40px; display:grid; place-items:center; border-radius:10px; border:1px solid var(--border); background:var(--surface-solid); cursor:pointer; }

.stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.stat-card { padding:19px; display:grid; gap:8px; position:relative; overflow:hidden; }
.stat-card::after { content:""; position:absolute; width:90px; height:90px; right:-35px; top:-35px; border-radius:50%; background:var(--accent-faint); }
.stat-card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.stat-card-label { font-size:13.5px; color:var(--muted); font-weight:700; }
.stat-card-value { font-size:28px; line-height:1; color:var(--text-strong); letter-spacing:-.04em; }
.stat-card-meta { font-size:12.5px; color:var(--muted); }
.stat-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:var(--accent-soft); color:var(--accent-strong); }
.delta { font-size:12px; font-weight:800; color:var(--success); }

.toolbar-card { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px; margin-bottom:16px; }
.toolbar-left, .toolbar-right { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.search-control { min-width:260px; height:42px; display:flex; align-items:center; gap:9px; padding:0 12px; background:var(--surface-2); border:1px solid var(--border); border-radius:11px; color:var(--muted); }
.search-control input { width:100%; border:0; background:transparent; color:var(--text); font-size:14.5px; }
.select-control { height:42px; padding:0 34px 0 12px; border:1px solid var(--border); border-radius:11px; background:var(--surface-solid); color:var(--text); }
.segment-tabs { display:inline-flex; gap:4px; padding:4px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border); }
.segment-tab { border:0; border-radius:9px; padding:8px 12px; background:transparent; color:var(--muted); font-size:13.5px; font-weight:700; cursor:pointer; }
.segment-tab.active { color:var(--text-strong); background:var(--surface-solid); box-shadow:var(--shadow-sm); }

.data-card { overflow:hidden; }
.data-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:20px 20px 14px; }
.data-card-head h3 { margin:0 0 5px; }
.data-card-head p { margin:0; font-size:14px; }
.table-wrap { overflow:auto; }
.data-table { width:100%; border-collapse:collapse; min-width:880px; }
.data-table th { padding:12px 16px; text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); background:var(--surface-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); white-space:nowrap; }
.data-table td { padding:15px 16px; font-size:14px; border-bottom:1px solid var(--border); vertical-align:middle; }
.data-table tbody tr { transition:background .2s ease; }
.data-table tbody tr:hover { background:var(--surface-hover); }
.data-table tbody tr[hidden] { display:none; }
.cell-title { display:flex; align-items:center; gap:10px; min-width:0; }
.cell-title strong { color:var(--text-strong); font-size:14.5px; }
.cell-title small { color:var(--muted); font-size:12.5px; display:block; }
.cell-stack { display:grid; gap:2px; }
.cell-stack strong { font-size:14px; color:var(--text-strong); }
.cell-stack small { font-size:12px; color:var(--muted); }
.status-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:999px; font-size:11.5px; font-weight:800; white-space:nowrap; }
.status-badge.success { color:#16734d; background:rgba(37,168,107,.12); }
.status-badge.warning { color:#9a5e16; background:rgba(217,139,50,.13); }
.status-badge.danger { color:#a63e3e; background:rgba(215,99,99,.13); }
.status-badge.neutral { color:var(--muted); background:var(--bg-soft); }
.channel-chip { display:inline-flex; align-items:center; gap:7px; padding:6px 9px; border-radius:9px; background:var(--surface-2); border:1px solid var(--border); font-size:12.5px; font-weight:700; }
.channel-chip.green { color:#168653; } .channel-chip.blue { color:#3479d1; } .channel-chip.pink { color:#c14d83; } .channel-chip.violet { color:#7c63ca; } .channel-chip.cyan { color:var(--accent-strong); }
.table-actions { display:flex; gap:6px; justify-content:flex-end; }
.mini-action { width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--border); border-radius:9px; background:var(--surface-solid); color:var(--muted); cursor:pointer; }
.mini-action:hover { color:var(--accent-strong); border-color:var(--accent); background:var(--accent-faint); }

.progress { height:7px; border-radius:999px; background:var(--bg-soft); overflow:hidden; }
.progress > span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),#49c1c7); }
.progress-meta { display:flex; justify-content:space-between; gap:12px; margin-top:6px; font-size:11.5px; color:var(--muted); }

.two-column { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,.75fr); gap:16px; }
.three-column { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.stack { display:grid; gap:16px; }
.info-card { padding:20px; }
.info-card .section-head { margin-bottom:16px; }
.list-stack { display:grid; }
.list-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; border-top:1px solid var(--border); }
.list-row:first-child { border-top:0; padding-top:0; }
.list-row:last-child { padding-bottom:0; }
.list-row-main { display:flex; align-items:center; gap:11px; min-width:0; }
.list-row-main strong { display:block; font-size:14px; color:var(--text-strong); }
.list-row-main small { display:block; font-size:12.5px; color:var(--muted); }

.chart-card-v6 { padding:20px; }
.chart-bars { height:230px; display:flex; align-items:flex-end; gap:12px; padding:24px 8px 8px; border-bottom:1px solid var(--border); background:repeating-linear-gradient(to top, transparent 0, transparent 54px, var(--border) 55px); }
.chart-bar-item { flex:1; display:grid; gap:8px; align-items:end; min-width:28px; height:100%; }
.chart-bar { width:100%; min-height:8px; border-radius:8px 8px 3px 3px; background:linear-gradient(180deg,#38b9c1,var(--accent)); transform-origin:bottom; animation:barRise .8s var(--ease) both; }
.chart-bar-item small { text-align:center; font-size:11.5px; color:var(--muted); }
.legend { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:14px; }
.legend span { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.legend i { width:8px; height:8px; border-radius:50%; background:var(--accent); }

.drawer { position:fixed; inset:0 0 0 auto; width:min(470px,100%); background:var(--surface-solid); border-left:1px solid var(--border); z-index:90; box-shadow:-18px 0 60px rgba(10,40,45,.14); transform:translateX(105%); transition:transform .34s var(--ease); display:flex; flex-direction:column; }
.drawer.open { transform:translateX(0); }
.drawer-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:22px; border-bottom:1px solid var(--border); }
.drawer-head h3 { margin:3px 0 0; }
.drawer-body { padding:22px; overflow:auto; display:grid; gap:18px; }
.drawer-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.drawer-field { padding:13px; border:1px solid var(--border); background:var(--surface-2); border-radius:12px; }
.drawer-field span { display:block; font-size:11.5px; color:var(--muted); margin-bottom:4px; }
.drawer-field strong { font-size:13.5px; color:var(--text-strong); }
.drawer-note { padding:15px; border-radius:12px; background:var(--accent-faint); color:var(--text); font-size:13.5px; line-height:1.6; }
.drawer-backdrop { position:fixed; inset:0; background:rgba(8,24,27,.28); backdrop-filter:blur(2px); z-index:89; opacity:0; pointer-events:none; transition:opacity .25s ease; }
.drawer-backdrop.show { opacity:1; pointer-events:auto; }

.empty-state { padding:42px 20px; text-align:center; color:var(--muted); }
.empty-state h3 { margin:12px 0 6px; }

.calendar-shell { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:16px; }
.calendar-card { overflow:hidden; }
.calendar-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--border); }
.calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(120px,1fr)); min-width:840px; }
.calendar-weekday { padding:11px; font-size:11.5px; font-weight:800; color:var(--muted); text-transform:uppercase; background:var(--surface-2); border-right:1px solid var(--border); border-bottom:1px solid var(--border); }
.calendar-day { min-height:128px; padding:10px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--surface-solid); }
.calendar-day.muted { opacity:.45; }
.calendar-day-number { display:block; font-size:12.5px; font-weight:800; color:var(--muted); margin-bottom:8px; }
.calendar-event { padding:7px 8px; margin-top:6px; border-radius:8px; background:var(--accent-faint); border-left:3px solid var(--accent); font-size:11.5px; line-height:1.35; color:var(--text); }
.calendar-event small { display:block; margin-top:2px; font-size:10.5px; color:var(--muted); }

.account-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.account-card { padding:18px; display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; }
.account-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:14px; background:var(--accent-faint); color:var(--accent-strong); }
.account-card h3 { margin:0 0 3px; font-size:15px; }
.account-card p { margin:0; font-size:12.5px; }
.account-meta { text-align:right; }

.template-preview { padding:20px; }
.phone-preview { width:min(310px,100%); margin:0 auto; border:8px solid var(--text-strong); border-radius:30px; background:var(--surface-2); min-height:450px; overflow:hidden; box-shadow:var(--shadow-md); }
.phone-preview-head { padding:16px; background:#0d5961; color:#fff; display:flex; gap:10px; align-items:center; }
.phone-preview-body { padding:18px 14px; }
.preview-bubble { padding:12px; border-radius:10px; background:var(--surface-solid); box-shadow:var(--shadow-sm); font-size:13px; line-height:1.55; }
.preview-bubble strong { display:block; margin-bottom:5px; }
.preview-bubble small { display:block; margin-top:8px; color:var(--muted); text-align:right; }

@keyframes barRise { from { transform:scaleY(.05); opacity:.35; } to { transform:scaleY(1); opacity:1; } }

@media (max-width:1150px) {
    .stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .two-column, .calendar-shell { grid-template-columns:1fr; }
    .account-grid { grid-template-columns:1fr; }
}
@media (max-width:720px) {
    .stat-grid { grid-template-columns:1fr; }
    .toolbar-card { align-items:stretch; flex-direction:column; }
    .toolbar-left, .toolbar-right { width:100%; }
    .search-control { min-width:0; width:100%; }
    .three-column { grid-template-columns:1fr; }
    .drawer-grid { grid-template-columns:1fr; }
}