/* Compatibility layer for the implementation modules. Loaded last by design. */
.card { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-xs);overflow:hidden;min-width:0;padding:0; }
.card.pad { padding:14px; }
.card-header { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px 10px; }
.card-header h2,.card-header h3 { margin:0;font-size:13px;letter-spacing:-.015em; }
.card-subtitle { color:var(--muted);font-size:10.5px;margin-top:3px; }
.card-body { padding:0 14px 14px; }
.metric-card { min-height:106px;padding:14px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-xs);display:flex;flex-direction:column;justify-content:space-between; }
.metric-top { display:flex;align-items:center;gap:10px; }
.metric-icon { width:36px;height:36px;flex:0 0 36px;border-radius:12px;display:grid;place-items:center;color:var(--primary);background:var(--primary-soft); }
.metric-icon.green { color:var(--green);background:var(--green-soft); }.metric-icon.red { color:var(--red);background:var(--red-soft); }.metric-icon.orange { color:var(--orange);background:var(--orange-soft); }.metric-icon.blue { color:var(--blue);background:var(--blue-soft); }
.metric-copy { min-width:0; }.metric-label { color:var(--text-soft);font-size:10.5px;font-weight:650; }.metric-value { margin-top:5px;font-size:24px;font-weight:750;letter-spacing:-.04em; }.metric-foot { margin-top:10px;color:var(--muted);font-size:9.5px; }.metric-foot.positive { color:var(--green); }.metric-foot.negative { color:var(--red); }
.btn { min-height:38px;border:1px solid var(--border);border-radius:9px;padding:0 13px;background:var(--surface);color:var(--text-soft);display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-size:11.5px;font-weight:700;transition:transform var(--ease),box-shadow var(--ease),background var(--ease),border-color var(--ease),color var(--ease); }
.btn:hover { background:var(--surface-muted);border-color:var(--border-strong); }.btn:active { transform:translateY(1px); }.btn.primary { border-color:var(--primary);background:linear-gradient(135deg,#625fe8,#5144d8);color:#fff;box-shadow:0 7px 16px rgba(91,92,226,.22); }.btn.success { border-color:var(--green);background:var(--green);color:#fff; }.btn.danger { border-color:#ffc6cc;color:var(--red);background:#fff; }.btn.warning { border-color:#ffdcb5;color:#b96b10;background:var(--orange-soft); }.btn.ghost { border-color:transparent;background:transparent; }.btn.soft { border-color:transparent;background:var(--primary-soft);color:var(--primary); }.btn.small { min-height:31px;padding:0 10px;font-size:10.5px; }.btn.wide { width:100%; }.btn[disabled] { opacity:.5;cursor:not-allowed;box-shadow:none; }
.button-group { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.field { display:grid;gap:6px;margin:0; }.field label { font-size:10.5px;font-weight:700;color:var(--text-soft); }.input,.select,.textarea { width:100%;min-height:38px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);padding:0 11px;font-size:11.5px; }.textarea { padding:10px 11px;line-height:1.55;resize:vertical;min-height:100px; }.input:focus,.select:focus,.textarea:focus { outline:0;border-color:#aaa8f4;box-shadow:0 0 0 3px rgba(91,92,226,.12); }
.input-with-icon { position:relative; }.input-with-icon .input { padding-left:35px; }.input-with-icon>.icon { position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;z-index:1; }
.filter-row { display:flex;align-items:flex-end;gap:9px;flex-wrap:wrap;margin-bottom:14px; }.filter-row .field { min-width:145px; }
.segmented { display:inline-flex;align-items:center;padding:3px;border-radius:10px;border:1px solid var(--border);background:var(--surface-muted); }.segmented button { border:0;background:transparent;color:var(--muted);padding:7px 11px;border-radius:7px;cursor:pointer;font-size:10.5px;font-weight:700; }.segmented button.active { color:var(--text);background:#fff;box-shadow:var(--shadow-xs); }
.tabs { display:flex;align-items:center;gap:20px;border-bottom:1px solid var(--border);overflow-x:auto; }.tab { position:relative;flex:0 0 auto;border:0;background:transparent;color:var(--muted);cursor:pointer;padding:10px 0;font-size:11px;font-weight:700; }.tab.active { color:var(--primary); }.tab.active:after { content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--primary); }
.badge,.status-chip { display:inline-flex;align-items:center;gap:5px;max-width:100%;min-height:22px;padding:3px 8px;border-radius:999px;font-size:9.5px;font-weight:750;white-space:nowrap;color:var(--text-soft);background:var(--surface-muted);border:1px solid transparent; }
.status-chip.success,.badge.success { color:#08764a;background:var(--green-soft); }.status-chip.warning,.badge.warning { color:#af670d;background:var(--orange-soft); }.status-chip.danger,.badge.danger { color:#c82e43;background:var(--red-soft); }.status-chip.info,.badge.info { color:#2868c9;background:var(--blue-soft); }.status-chip.purple,.badge.purple { color:#6642bd;background:var(--purple-soft); }.status-chip.neutral,.badge.neutral { color:#5f6c80;background:#f0f2f6; }
.platform-badge { width:28px;height:28px;flex:0 0 28px;border-radius:8px;display:grid;place-items:center;font-size:11px;font-weight:850;color:#fff;background:var(--platform-color,#5b5ce2); }.platform-badge.round { border-radius:50%; }.platform-badge.small { width:22px;height:22px;flex-basis:22px;border-radius:6px;font-size:8px; }
.platform-inline { display:flex;align-items:center;gap:8px;min-width:0; }.platform-inline .copy { min-width:0; }.platform-inline strong { display:block;font-size:10.5px; }.platform-inline span { display:block;font-size:9px;color:var(--muted);margin-top:2px; }
.table-wrap { overflow:auto; }.data-table { width:100%;border-collapse:collapse;min-width:720px; }.data-table th { text-align:left;color:var(--muted);font-size:9.5px;font-weight:750;padding:10px 11px;border-bottom:1px solid var(--border);background:var(--surface-subtle); }.data-table td { font-size:10.5px;padding:10px 11px;border-bottom:1px solid var(--border);vertical-align:middle; }.data-table tbody tr:hover { background:#fafbff; }.data-table tr.selected { background:var(--primary-pale);box-shadow:inset 3px 0 0 var(--primary); }
.progress { height:7px;border-radius:999px;background:var(--surface-muted);overflow:hidden; }.progress>span { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7167ed,#4e6fe8); }.progress.green>span { background:var(--green); }
.switch { position:relative;width:36px;height:20px;display:inline-flex; }.switch input { position:absolute;opacity:0;pointer-events:none; }.switch span { width:36px;height:20px;border-radius:999px;background:#cfd5e0;cursor:pointer;transition:background var(--ease); }.switch span:after { content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.15);transition:transform var(--ease); }.switch input:checked+span { background:var(--primary); }.switch input:checked+span:after { transform:translateX(16px); }
.list { display:grid; }.list-row { display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 0;border-bottom:1px solid var(--border); }.list-row:last-child { border-bottom:0; }.list-row-main { flex:1;min-width:0; }.list-row-main strong { display:block;font-size:10.5px; }.list-row-main span { display:block;margin-top:3px;color:var(--muted);font-size:9.5px; }.list-row-meta { color:var(--muted);font-size:9px;white-space:nowrap; }
.chip-row { display:flex;align-items:center;flex-wrap:wrap;gap:6px; }.chip { display:inline-flex;align-items:center;gap:5px;min-height:25px;padding:4px 8px;border-radius:8px;background:var(--surface-muted);color:var(--text-soft);font-size:9.5px;font-weight:650; }.divider { height:1px;background:var(--border);margin:12px 0; }
.toast-stack { position:fixed;z-index:130;right:18px;bottom:18px;display:grid;gap:8px;width:min(360px,calc(100vw - 36px)); }.toast { display:flex;align-items:flex-start;gap:10px;padding:12px 13px;border-radius:12px;color:var(--text);background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-lg);animation:toast-in .2s ease-out; }.toast-icon { width:27px;height:27px;flex:0 0 27px;border-radius:9px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary); }.toast.success .toast-icon { background:var(--green-soft);color:var(--green); }.toast.warning .toast-icon { background:var(--orange-soft);color:var(--orange); }.toast.danger .toast-icon { background:var(--red-soft);color:var(--red); }.toast-copy strong { display:block;font-size:11px; }.toast-copy span { display:block;color:var(--muted);font-size:9.5px;margin-top:3px;line-height:1.4; } @keyframes toast-in { from { opacity:0;transform:translateY(10px); } }
.modal-backdrop { position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:18px;background:rgba(14,21,42,.35);backdrop-filter:blur(4px); }.modal { width:min(520px,100%);max-height:min(760px,90vh);overflow:auto;border-radius:16px;background:#fff;box-shadow:var(--shadow-lg); }.modal-header { display:flex;align-items:center;justify-content:space-between;padding:15px 16px;border-bottom:1px solid var(--border); }.modal-header h2 { margin:0;font-size:15px; }.modal-body { padding:16px; }.modal-footer { display:flex;justify-content:flex-end;gap:8px;padding:13px 16px;border-top:1px solid var(--border); }.command-dialog { width:min(650px,100%); }.command-search { display:flex;align-items:center;gap:8px;padding:14px;border-bottom:1px solid var(--border); }.command-search input { flex:1;border:0;outline:0;font-size:14px; }.command-results { padding:8px;max-height:430px;overflow:auto; }.command-result { width:100%;display:flex;align-items:center;gap:10px;border:0;background:transparent;border-radius:9px;padding:10px;cursor:pointer;text-align:left; }.command-result:hover { background:var(--surface-muted); }.command-result .command-copy { flex:1;min-width:0; }.command-result strong { display:block;font-size:11px; }.command-result span { display:block;margin-top:2px;font-size:9.5px;color:var(--muted); }
.stepper { display:flex;align-items:center;gap:0;margin:0 0 16px; }.step { display:flex;align-items:center;min-width:150px;color:var(--muted);font-size:10px;font-weight:700; }.step:after { content:"";height:1px;flex:1;margin:0 12px;background:var(--border); }.step:last-child:after { display:none; }.step-number { width:23px;height:23px;border-radius:50%;display:grid;place-items:center;margin-right:7px;background:#fff;border:1px solid var(--border); }.step.active { color:var(--primary); }.step.active .step-number { color:#fff;border-color:var(--primary);background:var(--primary); }
.pagination { display:flex;align-items:center;justify-content:center;gap:4px;padding:12px; }.pagination button { width:30px;height:30px;border-radius:8px;border:1px solid transparent;background:transparent;cursor:pointer;font-size:10px;color:var(--muted); }.pagination button.active { color:var(--primary);border-color:#bfc3ff;background:var(--primary-soft); }
/* Dashboard */
.dashboard-top-grid { grid-template-columns:repeat(6,minmax(0,1fr))!important; }.dashboard-middle { grid-template-columns:minmax(0,1.35fr) minmax(280px,.95fr) minmax(260px,.82fr)!important; }.dashboard-lower { grid-template-columns:minmax(0,.95fr) minmax(0,1fr) minmax(0,1.15fr)!important; }.chart-area { position:relative;min-height:230px;padding:0 4px; }.chart-svg { width:100%;height:225px;overflow:visible; }.chart-grid-line { stroke:#edf0f6;stroke-width:1; }.chart-axis-label { fill:#8b96a9;font-size:9px; }.chart-line-primary { fill:none!important;stroke:#3978ef;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round; }.chart-line-secondary { fill:none!important;stroke:#7258df;stroke-width:2;stroke-dasharray:5 4; }.chart-line-danger { fill:none!important;stroke:#ef4d5e;stroke-width:1.8;stroke-dasharray:3 4; }.chart-point { fill:#fff;stroke-width:2; }.chart-legend { display:flex;gap:14px;color:var(--muted);font-size:9px; }.legend-item { display:inline-flex;align-items:center;gap:6px; }.legend-line { width:18px;height:2px;background:var(--blue); }.legend-line.dashed { background:repeating-linear-gradient(90deg,var(--purple) 0 5px,transparent 5px 8px); }.legend-line.dotted { background:repeating-linear-gradient(90deg,var(--red) 0 3px,transparent 3px 6px); }.donut-layout { display:grid;grid-template-columns:148px 1fr;align-items:center;gap:14px;padding:4px 8px 16px; }.donut { width:140px;height:140px;border-radius:50%;position:relative;background:conic-gradient(#2d73ea 0 24%,#f44e83 24% 46%,#1b2335 46% 62%,#1e9fe0 62% 76%,#ef3f43 76% 86%,#111827 86% 94%,#d93045 94% 100%); }.donut:after { content:"";position:absolute;inset:27px;border-radius:50%;background:#fff; }.donut-center { position:absolute;inset:0;z-index:1;display:grid;place-content:center;text-align:center; }.donut-center strong { font-size:21px; }.donut-center span { color:var(--muted);font-size:9px; }.platform-legend { display:grid;gap:8px; }.platform-legend-row { display:flex;align-items:center;gap:7px;font-size:9.5px; }.platform-legend-row span:nth-child(2) { flex:1; }.platform-dot { width:8px;height:8px;border-radius:50%;background:var(--dot); }.schedule-list { display:grid; }.schedule-item { appearance:none;border:0;background:transparent;width:100%;display:grid;grid-template-columns:58px 22px 1fr auto;align-items:center;gap:6px;min-height:38px;border-bottom:1px solid var(--border);font-size:9.5px;text-align:left;cursor:pointer; }.schedule-time { font-weight:700;color:var(--text-soft); }.sparkline { width:70px;height:20px; }.health-row { display:grid;grid-template-columns:26px 1fr auto 72px 38px;gap:8px;align-items:center;min-height:38px;font-size:9.5px; }.health-bars { display:flex;align-items:end;gap:2px;height:19px; }.health-bars i { width:2px;background:var(--green);border-radius:2px; }.health-bars.warning i { background:var(--orange); }.campaign-table { width:100%;border-collapse:collapse; }.campaign-table th,.campaign-table td { padding:9px 4px;border-bottom:1px solid var(--border);font-size:9.5px;text-align:left; }.campaign-table th { color:var(--muted);font-weight:650; }.mini-bar { width:62px;height:5px;background:var(--surface-muted);border-radius:99px;overflow:hidden; }.mini-bar span { display:block;height:100%;background:var(--primary); }
/* Composer */
.composer-layout { display:grid;grid-template-columns:minmax(280px,.85fr) minmax(420px,1.15fr) minmax(300px,.82fr);gap:14px;align-items:start; }.composer-source,.composer-preview { position:sticky;top:calc(var(--topbar-height) + 18px); }.editor-shell { border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#fff; }.editor-shell textarea { border:0;border-radius:0;min-height:205px; }.editor-toolbar { display:flex;align-items:center;gap:3px;padding:7px 9px;border-top:1px solid var(--border); }.editor-tool { width:28px;height:28px;border:0;border-radius:7px;background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--text-soft); }.editor-tool:hover { background:var(--surface-muted); }.editor-counter { margin-left:auto;color:var(--muted);font-size:9.5px; }.media-strip { display:flex;gap:8px;overflow-x:auto;padding-bottom:4px; }.media-thumb { position:relative;flex:0 0 80px;height:80px;border-radius:9px;overflow:hidden;color:#fff;background:linear-gradient(145deg,#273ab8,#7d52e8 60%,#f670b2);display:flex;align-items:flex-end;padding:8px;font-size:9px;font-weight:800; }.media-thumb.video { background:linear-gradient(135deg,#65b9ef,#3d65b9,#1e2d5e); }.media-thumb.photo { background:linear-gradient(140deg,#efe8dd,#d8c7ad,#9c785c); }.media-thumb .remove { position:absolute;top:4px;right:4px;width:20px;height:20px;border:0;border-radius:50%;color:#fff;background:rgba(17,24,39,.62);cursor:pointer; }.add-media-tile { flex:0 0 80px;height:80px;border-radius:9px;border:1px dashed #b7bee0;color:var(--primary);background:#fafaff;display:grid;place-items:center;text-align:center;font-size:9px;cursor:pointer; }.destination-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px; }.destination-card { border:1px solid var(--border);border-radius:10px;padding:10px;background:#fff; }.destination-card:hover { border-color:#c9ccf8;box-shadow:var(--shadow-sm); }.destination-card.disabled { opacity:.68;background:#fafbfe; }.destination-card-head { display:flex;align-items:center;gap:8px;margin-bottom:9px; }.destination-card-head .platform-inline { flex:1; }.destination-meta { display:grid;gap:7px; }.destination-meta-row { display:flex;justify-content:space-between;gap:10px;font-size:9.5px;color:var(--muted); }.destination-meta-row strong { color:var(--text-soft);font-weight:650;text-align:right; }.preview-platforms { display:flex;align-items:center;gap:6px;overflow-x:auto;padding-bottom:7px; }.preview-platform { width:28px;height:28px;border:1px solid var(--border);border-radius:50%;background:#fff;cursor:pointer;display:grid;place-items:center;padding:0; }.preview-platform.active { box-shadow:0 0 0 2px var(--primary); }.social-preview { border:1px solid var(--border);border-radius:12px;padding:11px; }.social-preview-head { display:flex;align-items:center;gap:8px; }.social-preview-copy { min-width:0;flex:1; }.social-preview-copy strong { display:block;font-size:10.5px; }.social-preview-copy span { color:var(--muted);font-size:9px; }.social-preview-text { margin:10px 0;font-size:10.5px;line-height:1.58;white-space:pre-wrap; }.preview-art { height:190px;border-radius:10px;padding:20px;display:flex;align-items:flex-end;overflow:hidden;color:#fff;font-size:28px;font-weight:850;letter-spacing:-.04em;background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.32),transparent 22%),linear-gradient(145deg,#2030b5,#644ee6 58%,#e56ec0); }.preview-reactions { display:flex;align-items:center;gap:11px;color:var(--muted);font-size:9px;padding:9px 0 2px; }.publish-settings { display:grid;gap:10px; }.settings-row { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }.guideline-row { display:flex;flex-wrap:wrap;gap:6px; }.guideline { display:inline-flex;align-items:center;gap:4px;padding:5px 7px;border-radius:7px;background:var(--green-soft);color:#19704e;font-size:8.5px; }
/* Calendar */
.calendar-layout { display:grid;grid-template-columns:185px minmax(620px,1fr) 260px;gap:12px;align-items:start; }.calendar-sidebar { display:grid;gap:12px; }.mini-calendar { padding:11px; }.mini-calendar-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:9px; }.mini-calendar-grid { display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center; }.mini-calendar-grid span { height:23px;border-radius:7px;display:grid;place-items:center;color:var(--muted);font-size:8.5px; }.mini-calendar-grid .weekday { height:18px;color:var(--faint);font-weight:700; }.mini-calendar-grid .selected { color:#fff;background:var(--primary); }.mini-calendar-grid .range { color:var(--primary);background:var(--primary-soft); }.quick-filter-row { appearance:none;border:0;background:transparent;width:100%;display:flex;align-items:center;gap:8px;padding:6px 0;font-size:9.5px;text-align:left; }.quick-filter-row .dot { width:9px;height:9px;border-radius:50%;background:var(--dot,var(--primary)); }.quick-filter-row span:nth-child(2) { flex:1; }.calendar-main { overflow:hidden; }.week-grid { position:relative;display:grid;grid-template-columns:46px repeat(7,minmax(90px,1fr));min-width:780px; }.week-grid .corner,.week-day-head { min-height:44px;border-bottom:1px solid var(--border);background:var(--surface-subtle); }.week-day-head { padding:10px 7px;text-align:center;font-size:9.5px;font-weight:750; }.week-day-head.today { color:var(--primary); }.time-cell { min-height:62px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:5px 4px;color:var(--faint);font-size:8px;text-align:right; }.day-cell { position:relative;min-height:62px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:3px; }.calendar-event { position:absolute!important;z-index:2;left:4px!important;right:4px!important;top:5px!important;width:auto!important;min-height:54px!important;border-radius:7px!important;padding:6px!important;border:0!important;border-left:3px solid var(--event-color,var(--primary))!important;background:var(--event-bg,var(--primary-soft))!important;cursor:pointer!important;overflow:hidden!important;box-shadow:0 1px 2px rgba(0,0,0,.03)!important; }.calendar-event strong { display:block;font-size:8.5px;line-height:1.25; }.calendar-event span { display:block;font-size:7.5px;color:var(--muted);margin-top:3px; }.calendar-event .event-status { display:inline-flex;align-items:center;gap:3px;font-size:7px;font-weight:700;color:var(--event-color,var(--primary)); }.current-time-line { position:absolute;z-index:4;left:46px;right:0;top:168px;height:1px;background:var(--red);pointer-events:none; }.current-time-line:before { content:"";position:absolute;left:-4px;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--red); }.calendar-details { position:sticky;top:calc(var(--topbar-height) + 18px); }.detail-media { height:130px;border-radius:10px;background:radial-gradient(circle,#884cff 0 3%,transparent 4%),linear-gradient(145deg,#100a27,#311887,#0ab4e7);color:#fff;display:grid;place-content:center;text-align:center;font-weight:850;font-size:25px; }.detail-media span { font-size:11px;letter-spacing:.18em; }
/* Integrations */
.integration-layout { display:grid;grid-template-columns:minmax(0,1fr) 295px;gap:14px;align-items:start; }.account-health { display:flex;align-items:center;gap:8px; }.signal-bars { display:flex;align-items:end;gap:2px;height:18px; }.signal-bars i { width:3px;border-radius:2px;background:var(--green); }.account-detail-panel { position:sticky;top:calc(var(--topbar-height) + 18px); }.detail-header { display:flex;align-items:center;gap:9px;padding:14px;border-bottom:1px solid var(--border); }.detail-header .platform-inline { flex:1; }.detail-tabs { display:flex;border-bottom:1px solid var(--border);padding:0 14px; }.detail-tab { border:0;background:transparent;padding:11px 9px;color:var(--muted);font-size:9.5px;cursor:pointer;border-bottom:2px solid transparent; }.detail-tab.active { color:var(--primary);border-color:var(--primary); }.permission-list { display:grid;gap:8px; }.permission-item { display:flex;align-items:center;gap:7px;font-size:9.5px; }.permission-check { color:var(--green); }.integration-bottom { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px; }
/* Media */
.media-layout { display:grid;grid-template-columns:180px minmax(560px,1fr) 285px;gap:12px;align-items:start; }.media-filter-panel,.media-detail { position:sticky;top:calc(var(--topbar-height) + 18px); }.filter-block { padding:11px 0;border-bottom:1px solid var(--border); }.filter-block h4 { margin:0 0 8px;font-size:9.5px; }.checkbox-row { display:flex;align-items:center;gap:7px;min-height:24px;font-size:9px;color:var(--text-soft); }.checkbox-row span:nth-child(2) { flex:1; }.media-toolbar { display:flex;align-items:center;gap:8px;margin-bottom:10px; }.media-toolbar .input-with-icon { flex:1; }.media-grid { display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:10px; }.asset-card { appearance:none;background:transparent;color:inherit;text-align:left;min-width:0;cursor:pointer;border:1px solid transparent;border-radius:11px;padding:3px; }.asset-card:hover { transform:translateY(-1px);box-shadow:var(--shadow-sm); }.asset-card.selected { border-color:var(--primary);background:var(--primary-pale); }.asset-thumb { position:relative;aspect-ratio:1/1;border-radius:9px;overflow:hidden;display:flex;align-items:flex-end;padding:8px;background:var(--asset-bg);color:var(--asset-color,#fff);font-weight:800;font-size:14px; }.asset-thumb.video:after { content:"▶";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:25px;text-shadow:0 2px 8px rgba(0,0,0,.4); }.asset-type { position:absolute;left:6px;bottom:6px;padding:2px 5px;border-radius:5px;background:rgba(255,255,255,.9);color:#334155;font-size:7px; }.asset-duration { position:absolute;right:6px;bottom:6px;padding:2px 5px;border-radius:5px;background:rgba(17,24,39,.72);color:#fff;font-size:7px; }.asset-card h4 { margin:7px 2px 0;font-size:9.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.asset-card p { margin:3px 2px 0;color:var(--muted);font-size:8px; }.asset-preview { aspect-ratio:1.2/1;border-radius:10px;display:grid;place-content:center;padding:18px;text-align:center;background:var(--asset-bg);color:var(--asset-color,#fff);font-weight:850;font-size:18px; }.metadata-grid { display:grid;grid-template-columns:88px 1fr;gap:7px 10px;font-size:9px; }.metadata-grid dt { color:var(--muted); }.metadata-grid dd { margin:0;color:var(--text-soft);font-weight:600; }.ai-tool-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px; }.ai-tool { min-height:72px;border:1px solid var(--border);border-radius:9px;padding:9px;background:#fff;cursor:pointer;text-align:left; }.ai-tool:hover { border-color:#c5c7f5;background:var(--primary-pale); }.ai-tool strong { display:block;font-size:9px;margin-bottom:4px; }.ai-tool span { color:var(--muted);font-size:8px;line-height:1.35; }
/* Approvals */
.approval-layout { display:grid;grid-template-columns:minmax(720px,1fr) 300px;gap:12px;align-items:start; }.kanban { display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:8px;overflow-x:auto;padding-bottom:4px; }.kanban-column { min-width:150px;min-height:455px;border:1px solid var(--border);border-radius:10px;background:#fbfcff;padding:8px; }.kanban-column-head { display:flex;align-items:center;justify-content:space-between;padding:3px 3px 8px;font-size:9.5px;font-weight:750; }.kanban-list { display:grid;gap:7px; }.approval-card { border:1px solid var(--border);border-radius:9px;padding:9px;background:#fff;cursor:grab; }.approval-card:hover { border-color:#c7c9f8;box-shadow:var(--shadow-sm);transform:translateY(-1px); }.approval-card.selected { border-color:var(--primary);box-shadow:0 0 0 1px var(--primary); }.approval-card.dragging { opacity:.5; }.approval-card-head { display:flex;align-items:center;gap:6px;margin-bottom:7px; }.approval-card-head strong { font-size:8.8px;flex:1; }.approval-card p { margin:0 0 8px;color:var(--text-soft);font-size:8px;line-height:1.45; }.approval-card-foot { display:flex;align-items:center;gap:6px;font-size:7.5px;color:var(--muted); }.workflow-policy { display:grid;grid-template-columns:1.05fr 1fr 1.15fr .75fr;gap:8px;margin-top:10px; }.policy-card { border:1px solid var(--border);border-radius:9px;padding:10px; }.policy-card h4 { margin:0 0 8px;font-size:9.5px; }.approval-detail { position:sticky;top:calc(var(--topbar-height) + 18px); }.approval-art { height:155px;border-radius:10px;padding:15px;display:flex;align-items:flex-end;justify-content:center;text-align:center;color:#fff;font-size:20px;font-weight:850;background:linear-gradient(150deg,#52cbe4,#79a7f2,#f7a7c0); }.timeline { display:grid;gap:9px; }.timeline-row { display:grid;grid-template-columns:22px 1fr auto;gap:7px;align-items:start;font-size:8.5px; }.timeline-dot { width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--green-soft);color:var(--green); }.comment { padding:9px;border-radius:9px;background:var(--surface-muted);margin-top:7px; }.comment-head { display:flex;align-items:center;gap:6px;font-size:8px;color:var(--muted); }.comment-body { margin:6px 0 0;font-size:8.5px;line-height:1.45; }
/* Inbox */
.inbox-layout { display:grid;grid-template-columns:290px minmax(480px,1fr) 280px;gap:0;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff;min-height:690px; }.inbox-list-panel { border-right:1px solid var(--border); }.thread-panel { border-right:1px solid var(--border);display:flex;flex-direction:column;min-width:0; }.inbox-panel-head { padding:12px;border-bottom:1px solid var(--border); }.conversation-list { overflow:auto;max-height:620px; }.conversation-row { appearance:none;width:100%;text-align:left;color:inherit;border:0;background:#fff;display:flex;align-items:flex-start;gap:9px;padding:11px 12px;border-bottom:1px solid var(--border);cursor:pointer; }.conversation-row:hover { background:#fafbff; }.conversation-row.selected { background:var(--primary-pale);box-shadow:inset 3px 0 0 var(--primary); }.conversation-copy { min-width:0;flex:1; }.conversation-copy strong { display:block;font-size:10px; }.conversation-copy p { margin:4px 0 6px;color:var(--text-soft);font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.conversation-meta { display:flex;align-items:center;justify-content:space-between;gap:6px;color:var(--muted);font-size:8px; }.thread-header { min-height:61px;display:flex;align-items:center;gap:9px;padding:10px 12px;border-bottom:1px solid var(--border); }.thread-header .platform-inline { flex:1; }.messages { flex:1;overflow:auto;padding:12px;display:grid;align-content:start;gap:9px;background:#fcfdff; }.message-bubble { border:1px solid var(--border);border-radius:11px;padding:10px;background:#fff; }.message-bubble.outbound { border-color:#c8e5db;background:#fbfffd; }.message-bubble.note { border-color:#f5d69b;background:#fffaf0; }.message-head { display:flex;align-items:center;gap:7px;color:var(--muted);font-size:8px; }.message-head strong { color:var(--text); }.message-bubble p { margin:8px 0 0;font-size:10px;line-height:1.55; }.suggested-replies { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px; }.suggested-reply { border:1px solid var(--border);border-radius:8px;padding:8px;background:#fff;cursor:pointer;text-align:left; }.suggested-reply:hover { border-color:#c5c7f5;background:var(--primary-pale); }.suggested-reply strong { display:block;color:var(--primary);font-size:8.5px; }.suggested-reply span { display:block;color:var(--muted);margin-top:4px;font-size:7.5px;line-height:1.35; }.reply-composer { border-top:1px solid var(--border);padding:10px 12px; }.reply-tabs { display:flex;gap:14px;margin-bottom:8px; }.reply-tab { border:0;background:transparent;padding:0 0 5px;color:var(--muted);font-size:9px;cursor:pointer;border-bottom:2px solid transparent; }.reply-tab.active { color:var(--primary);border-color:var(--primary); }.reply-textarea { min-height:90px; }.reply-actions { display:flex;align-items:center;gap:7px;margin-top:8px; }.reply-actions .send { margin-left:auto; }.contact-panel { padding:12px;overflow:auto;max-height:690px; }.contact-profile { text-align:center;padding:5px 0 12px; }.contact-profile .avatar { width:52px;height:52px;margin:0 auto 8px;font-size:14px; }.contact-profile h3 { margin:0;font-size:12px; }.contact-profile p { margin:3px 0 0;color:var(--muted);font-size:8.5px; }.contact-line { display:flex;align-items:center;gap:8px;min-height:31px;font-size:9px;color:var(--text-soft); }.case-card { border:1px solid #dad8ff;border-radius:9px;padding:10px;background:var(--primary-pale); }.sla-time { font-size:20px;font-weight:800;color:var(--green); }
/* Analytics */
.analytics-kpis { grid-template-columns:repeat(6,minmax(0,1fr))!important; }.analytics-top { display:grid;grid-template-columns:minmax(0,1.35fr) minmax(220px,.72fr) minmax(220px,.72fr) 260px;gap:11px;align-items:start; }.analytics-middle { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(260px,.8fr) 260px;gap:11px;margin-top:11px; }.analytics-bottom { display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 1.35fr;gap:11px;margin-top:11px; }.horizontal-bars { display:grid;gap:11px; }.horizontal-bar-row { display:grid;grid-template-columns:84px 1fr 38px;align-items:center;gap:7px;font-size:8.5px; }.horizontal-bar-track { height:5px;background:var(--surface-muted);border-radius:99px;overflow:hidden; }.horizontal-bar-track span { display:block;height:100%;border-radius:inherit;background:var(--bar-color,var(--primary)); }.funnel { display:grid;justify-items:center;gap:3px;padding:5px 0; }.funnel-step { height:28px;width:var(--w);clip-path:polygon(0 0,100% 0,90% 100%,10% 100%);background:linear-gradient(90deg,#e8eaff,#c9cffb);display:flex;align-items:center;justify-content:space-between;padding:0 12px;color:#515f7a;font-size:8px; }.heatmap { display:grid;grid-template-columns:28px repeat(8,1fr);gap:3px;align-items:center; }.heatmap-label { font-size:7.5px;color:var(--muted); }.heat-cell { aspect-ratio:1/1;border-radius:2px;background:rgba(91,92,226,var(--alpha,.12)); }.report-option { appearance:none;border:0;background:#fff;color:inherit;width:100%;display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--border);cursor:pointer; }.report-option .metric-icon { width:30px;height:30px;flex-basis:30px;border-radius:9px; }.report-option strong { display:block;font-size:9px; }.report-option span { display:block;color:var(--muted);font-size:8px;margin-top:2px; }.category-donut { width:100px;height:100px;border-radius:50%;background:conic-gradient(#6d62e8 0 34%,#9d6ce4 34% 62%,#f3a558 62% 78%,#e56d9a 78% 90%,#e6c55d 90% 100%);position:relative; }.category-donut:after { content:"";position:absolute;inset:23px;border-radius:50%;background:#fff; }.category-donut-center { position:absolute;inset:0;z-index:1;display:grid;place-content:center;text-align:center;font-size:8px;font-weight:750; }.takeaway-list { display:grid;gap:9px; }.takeaway { display:flex;align-items:flex-start;gap:7px;color:var(--text-soft);font-size:8.5px;line-height:1.45; }.takeaway .icon { color:var(--green); }
/* Generic */
.generic-hero { padding:24px;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:20px;align-items:center; }.generic-hero h2 { margin:0 0 8px;font-size:20px; }.generic-hero p { margin:0;color:var(--muted);font-size:11px;line-height:1.65; }.generic-illustration { height:170px;border-radius:15px;background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.55),transparent 25%),linear-gradient(135deg,#e8ebff,#d9edff,#f7e6ff);position:relative;overflow:hidden; }.generic-illustration:before,.generic-illustration:after { content:"";position:absolute;border-radius:22px;background:#fff;box-shadow:var(--shadow-sm); }.generic-illustration:before { width:120px;height:70px;left:25px;top:38px;transform:rotate(-8deg); }.generic-illustration:after { width:110px;height:90px;right:22px;bottom:18px;transform:rotate(8deg); }
@media (max-width:1380px){.dashboard-top-grid,.analytics-kpis{grid-template-columns:repeat(3,minmax(0,1fr))!important}.dashboard-middle{grid-template-columns:minmax(0,1.2fr) minmax(250px,.8fr)!important}.dashboard-middle>:last-child{grid-column:1/-1}.dashboard-lower{grid-template-columns:repeat(2,minmax(0,1fr))!important}.dashboard-lower>:last-child{grid-column:1/-1}.composer-layout{grid-template-columns:minmax(270px,.85fr) minmax(390px,1.15fr)}.composer-preview{grid-column:1/-1;position:static;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.65fr);gap:12px}.analytics-top{grid-template-columns:minmax(0,1.3fr) minmax(210px,.7fr) minmax(210px,.7fr)}.analytics-top>:last-child{grid-column:1/-1}.analytics-middle{grid-template-columns:repeat(3,minmax(0,1fr))}.analytics-middle>:last-child{grid-column:1/-1}.analytics-bottom{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1120px){.dashboard-middle,.dashboard-lower{grid-template-columns:1fr!important}.dashboard-middle>*,.dashboard-lower>*{grid-column:auto}.calendar-layout{grid-template-columns:170px minmax(600px,1fr)}.calendar-details{grid-column:1/-1;position:static}.media-layout{grid-template-columns:170px minmax(0,1fr)}.media-detail{grid-column:1/-1;position:static;display:grid;grid-template-columns:280px 1fr;gap:14px}.media-grid{grid-template-columns:repeat(3,minmax(120px,1fr))}.approval-layout{grid-template-columns:1fr}.approval-detail{position:static}.inbox-layout{grid-template-columns:260px minmax(430px,1fr)}.contact-panel{grid-column:1/-1;border-top:1px solid var(--border);max-height:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.thread-panel{border-right:0}}
@media (max-width:900px){.composer-layout{grid-template-columns:1fr}.composer-source,.composer-preview{position:static}.composer-preview{display:grid;grid-template-columns:1fr}.calendar-layout{grid-template-columns:1fr}.calendar-sidebar{grid-template-columns:185px 1fr}.integration-layout{grid-template-columns:1fr}.account-detail-panel{position:static}.media-layout{grid-template-columns:1fr}.media-filter-panel{position:static}.media-detail{grid-template-columns:240px 1fr}.workflow-policy{grid-template-columns:repeat(2,minmax(0,1fr))}.analytics-top,.analytics-middle,.analytics-bottom{grid-template-columns:1fr}.analytics-top>*,.analytics-middle>*,.analytics-bottom>*{grid-column:auto}.inbox-layout{grid-template-columns:240px minmax(400px,1fr);overflow-x:auto}}
@media (max-width:640px){.dashboard-top-grid,.analytics-kpis,.content-grid.six,.content-grid.four,.content-grid.three,.content-grid.two{grid-template-columns:1fr!important}.donut-layout{grid-template-columns:1fr;justify-items:center}.destination-grid{grid-template-columns:1fr}.stepper{overflow-x:auto}.step{min-width:120px}.calendar-sidebar{grid-template-columns:1fr}.media-detail{grid-template-columns:1fr}.media-grid{grid-template-columns:repeat(2,minmax(110px,1fr))}.workflow-policy{grid-template-columns:1fr}.kanban{grid-template-columns:repeat(5,240px)}.inbox-layout{display:block;min-height:0}.conversation-list{max-height:310px}.messages{max-height:430px}.contact-panel{display:block;max-height:none}.suggested-replies{grid-template-columns:1fr}.reply-actions{flex-wrap:wrap}.reply-actions .send{width:100%;margin-left:0}.settings-row{grid-template-columns:1fr}.generic-hero{grid-template-columns:1fr}}