/* Dashboard */
.dashboard-primary-grid { display: grid; grid-template-columns: 1.35fr 1.05fr .9fr; gap: 13px; margin-bottom: 13px; }
.dashboard-secondary-grid { display: grid; grid-template-columns: .95fr 1.05fr 1.1fr; gap: 13px; }
.dashboard-performance .chart-wrap { margin-top: 4px; }
.distribution-layout { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 190px; }
.legend-list { flex: 1; display: grid; gap: 8px; min-width: 110px; }
.legend-list > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text-soft); font-size: 9.5px; }
.legend-list span { display: flex; align-items: center; gap: 7px; }.legend-list i { width: 8px; height: 8px; border-radius: 2px; background: var(--legend); }
.schedule-date { display: flex; justify-content: space-between; align-items: center; min-height: 34px; padding: 0 3px; border-bottom: 1px solid var(--border); font-size: 10px; }
.schedule-list { display: grid; }.schedule-list > div { min-height: 39px; display: grid; grid-template-columns: 43px 22px minmax(0,1fr) auto; align-items: center; gap: 7px; border-bottom: 1px solid var(--border); font-size: 9px; }
.schedule-list time { color: var(--muted); font-weight: 700; }.schedule-list > div > span:nth-child(3) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-list { display: grid; }.activity-item { min-height: 54px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); }
.activity-status { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; }.activity-status.success { color: var(--green); background: var(--green-soft); }.activity-status.primary { color: var(--primary); background: var(--primary-soft); }.activity-status.warning { color: var(--orange); background: var(--orange-soft); }.activity-status.danger { color: var(--red); background: var(--red-soft); }.activity-status.info { color: var(--blue); background: var(--blue-soft); }
.activity-item > div { flex: 1; min-width: 0; display: grid; gap: 3px; }.activity-item strong { font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.activity-item div span { color: var(--muted); font-size: 8.5px; }.activity-item time { color: var(--muted); font-size: 8px; }
.connector-list { display: grid; }.connector-list > div { min-height: 43px; display: grid; grid-template-columns: 22px minmax(90px,1fr) auto 80px 32px; align-items: center; gap: 7px; border-bottom: 1px solid var(--border); font-size: 9px; }.connector-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.connector-bars { height: 21px; display: flex; align-items: end; gap: 2px; }.connector-bars i { width: 3px; max-height: 18px; background: var(--green); border-radius: 2px; }.connector-list > div:has(.badge.warning) .connector-bars i { background: var(--orange); }
.compact-table .table-head, .compact-table > div { display: grid; grid-template-columns: minmax(110px,1.4fr) 35px 70px 82px; align-items: center; min-height: 42px; gap: 6px; border-bottom: 1px solid var(--border); font-size: 9px; }.compact-table .table-head { min-height: 30px; color: var(--muted); font-weight: 700; }.trend-cell { display: flex; align-items: center; justify-content: space-between; gap: 3px; }

/* Composer */
.stepper { display: flex; align-items: center; gap: 11px; max-width: 760px; margin: -4px 0 15px; color: var(--muted); font-size: 9.5px; }.stepper span { display: flex; align-items: center; gap: 7px; white-space: nowrap; }.stepper b { width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; font-size: 9px; background: white; }.stepper .active { color: var(--primary); }.stepper .active b { color: white; background: var(--primary); border-color: var(--primary); }.stepper i { flex: 1; height: 1px; background: var(--border); }
.composer-layout { display: grid; grid-template-columns: minmax(290px,.9fr) minmax(440px,1.35fr) minmax(300px,.8fr); gap: 13px; align-items: start; }
.composer-source .card { padding: 13px; }.composer-textarea { width: 100%; min-height: 188px; resize: vertical; border: 1px solid var(--border); border-radius: 9px 9px 0 0; padding: 12px; font-size: 11px; line-height: 1.6; outline: 0; }.composer-textarea:focus { border-color: #aeb1f6; }
.editor-toolbar { min-height: 35px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 9px; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 9px 9px; color: var(--muted); font-size: 9.5px; }.editor-toolbar > div { display: flex; align-items: center; gap: 12px; }.editor-toolbar b,.editor-toolbar i { color: var(--text-soft); }
.subsection-title { display: flex; align-items: center; justify-content: space-between; margin: 13px 0 7px; font-size: 10px; }.subsection-title span { color: var(--muted); font-size: 9px; }
.attachment-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)) 72px; gap: 7px; }.attachment { position: relative; aspect-ratio: 1; border: 1px solid var(--border); border-radius: 8px; display: grid; place-items: center; text-align: center; font-size: 10px; font-weight: 800; line-height: 1.2; overflow: hidden; }.attachment.launch { color: white; background: linear-gradient(145deg,#4338ca,#7c3aed,#27a8f2); }.attachment.video { color: white; background: linear-gradient(145deg,#86d2eb,#8a64e8); }.attachment.team { color: white; background: linear-gradient(145deg,#d7b899,#5e4e43); }.attachment button { position: absolute; top: 3px; right: 3px; width: 17px; height: 17px; border: 0; border-radius: 50%; background: rgba(17,24,39,.65); color: white; cursor: pointer; }.attachment span { position: absolute; right: 4px; bottom: 3px; font-size: 7px; }.attachment.add { color: var(--primary); border-style: dashed; background: var(--primary-pale); display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.guideline-box { margin-top: 12px; padding: 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-subtle); display: grid; gap: 8px; font-size: 9.5px; }.guideline-box > span { display: flex; align-items: center; gap: 4px; }.guideline-box > div { display: flex; flex-wrap: wrap; gap: 5px; }.guideline-box div span { padding: 4px 6px; border-radius: 6px; background: var(--green-soft); color: #27694d; font-size: 8px; }
.destination-column > .panel-header { padding: 1px 2px; }.destination-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }.destination-card { min-height: 168px; padding: 11px; border: 1px solid var(--border); border-radius: 10px; background: white; text-align: left; cursor: pointer; transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease); }.destination-card:hover,.destination-card.selected { border-color: #b6b9fa; box-shadow: 0 5px 18px rgba(91,92,226,.08); transform: translateY(-1px); }.destination-card > header { display: flex; align-items: center; gap: 8px; }.destination-card header > div { flex: 1; min-width: 0; display: grid; gap: 2px; }.destination-card header strong { font-size: 10px; }.destination-card header span { color: var(--muted); font-size: 8px; }.destination-card dl { display: grid; gap: 6px; margin: 10px 0 5px; }.destination-card dl > div { display: flex; justify-content: space-between; gap: 8px; font-size: 8.5px; }.destination-card dt { color: var(--muted); }.destination-card dd { margin: 0; text-align: right; }.destination-card .text-button { width: 100%; text-align: right; }.destination-warning { min-height: 76px; margin: 12px 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.composer-preview .card { padding: 12px; }.device-switch { display: flex; gap: 7px; color: var(--primary); }.platform-tabs { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 7px; }.platform-tabs button { width: 28px; height: 28px; padding: 3px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 50%; background: transparent; cursor: pointer; }.platform-tabs button.active { border-color: var(--primary); background: var(--primary-soft); }
.social-preview { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }.social-preview > header { min-height: 48px; padding: 8px; display: flex; align-items: center; gap: 8px; }.social-preview header div { flex: 1; display: grid; gap: 2px; }.social-preview header strong { font-size: 10px; }.social-preview header span { color: var(--muted); font-size: 8px; }.social-preview p { margin: 4px 10px 10px; min-height: 98px; font-size: 9px; line-height: 1.55; }.preview-media { position: relative; min-height: 195px; display: grid; place-items: center; overflow: hidden; color: white; font-size: 26px; font-weight: 800; line-height: 1.05; text-align: left; background: linear-gradient(135deg,#392ed3,#6d47e9 48%,#d46be8); }.preview-media::before,.preview-media::after,.preview-media i { content: ''; position: absolute; width: 100px; height: 100px; border-radius: 25px; transform: rotate(30deg); background: rgba(255,255,255,.1); }.preview-media::before { right: -10px; bottom: -25px; }.preview-media::after { left: -35px; top: -25px; }.preview-media i { right: 45px; top: 18px; width: 48px; height: 48px; }.social-preview footer { min-height: 39px; padding: 0 9px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 8px; }
.publish-fields { display: grid; gap: 9px; }.publish-fields > label { display: grid; gap: 5px; }.publish-fields select,.publish-fields input { width: 100%; min-height: 36px; border: 1px solid var(--border); border-radius: 8px; padding: 0 9px; font-size: 9.5px; }.paired-input { display: grid; grid-template-columns: 1.2fr .8fr; gap: 6px; }.ready-message { margin-top: 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--green); font-size: 9px; text-align: center; }.ready-message small { width: 100%; color: var(--muted); font-family: ui-monospace,monospace; }

/* Calendar */
.segmented { display: inline-flex; min-height: 38px; padding: 3px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-muted); }.segmented button { min-width: 55px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; }.segmented button.active { color: var(--text); background: white; box-shadow: var(--shadow-xs); }
.calendar-shell { display: grid; grid-template-columns: 180px minmax(680px,1fr) 255px; gap: 12px; align-items: start; }.mini-calendar-header { display: flex; align-items: center; justify-content: space-between; font-size: 10px; margin-bottom: 8px; }.mini-calendar { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }.mini-calendar b { display: grid; place-items: center; height: 20px; color: var(--muted); font-size: 7px; }.mini-calendar button { height: 22px; border: 0; border-radius: 6px; background: transparent; color: var(--text-soft); font-size: 8px; cursor: pointer; }.mini-calendar button.range { background: var(--primary-pale); }.mini-calendar button.selected { color: white; background: var(--primary); }
.calendar-left h3 { margin: 5px 0 8px; font-size: 10px; }.filter-list { display: grid; }.filter-list button { min-height: 30px; border: 0; background: transparent; display: flex; align-items: center; gap: 7px; color: var(--text-soft); cursor: pointer; font-size: 8.5px; }.filter-list button:hover { background: var(--surface-muted); }.filter-list span { flex: 1; text-align: left; }.filter-list strong { color: var(--muted); }.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }.dot.primary,.dot.color-0 { background: var(--primary); }.dot.success,.dot.color-1 { background: var(--green); }.dot.warning,.dot.color-2 { background: var(--orange); }.dot.danger,.dot.color-3 { background: var(--red); }.dot.info,.dot.color-4 { background: var(--blue); }.dot.neutral { background: var(--faint); }
.calendar-stats { margin: 0; }.calendar-card { padding: 0 10px 10px; overflow: hidden; }.week-title { height: 42px; display: flex; align-items: center; justify-content: center; gap: 16px; font-size: 10px; }.week-header { display: grid; grid-template-columns: 45px repeat(7,1fr); height: 37px; align-items: center; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }.week-header > * { text-align: center; color: var(--text-soft); font-size: 8px; }.week-header span { color: var(--muted); }.week-body { position: relative; height: 638px; padding-left: 45px; overflow: hidden; }.time-axis { position: absolute; left: 0; top: 0; width: 45px; display: grid; grid-template-rows: repeat(11,58px); }.time-axis span { transform: translateY(-5px); color: var(--muted); font-size: 7px; }.week-grid-bg { height: 638px; display: grid; grid-template-columns: repeat(7,1fr); grid-template-rows: repeat(11,58px); }.week-grid-bg i { border-right: 1px solid #eef1f7; border-bottom: 1px solid #eef1f7; }.week-events { position: absolute; inset: 0 0 0 45px; display: grid; grid-template-columns: repeat(7,1fr); pointer-events: none; }.calendar-event { position: absolute; width: calc(100% - 6px); margin-left: 3px; padding: 5px; border: 1px solid transparent; border-radius: 6px; text-align: left; overflow: hidden; cursor: pointer; pointer-events: auto; font-size: 7.2px; transition: transform var(--ease), box-shadow var(--ease); }.calendar-event:hover,.calendar-event.selected { transform: translateY(-1px); box-shadow: var(--shadow-sm); z-index: 2; }.calendar-event.selected { outline: 2px solid rgba(91,92,226,.3); }.calendar-event.primary { color: #5144b4; background: #f0edff; border-color: #d8d2ff; }.calendar-event.info { color: #2261a7; background: #eaf3ff; border-color: #cfe2fa; }.calendar-event.success { color: #277659; background: #eaf8f1; border-color: #cbeadb; }.calendar-event.warning { color: #995e13; background: #fff5e7; border-color: #f9ddb3; }.calendar-event.danger { color: #b83a4a; background: #fff0f2; border-color: #f7ced4; }.calendar-event time,.calendar-event strong,.calendar-event > span { display: block; }.calendar-event strong { margin: 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.calendar-event > span { display: flex; align-items: center; gap: 3px; opacity: .9; }.current-time { position: absolute; left: 39px; right: 0; height: 1px; background: var(--red); z-index: 3; pointer-events: none; }.current-time i { position: absolute; left: -4px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.calendar-detail .card { padding: 13px; }.calendar-detail h3 { margin: 12px 0 6px; font-size: 11px; }.calendar-detail > .card > p { color: var(--text-soft); font-size: 9px; line-height: 1.5; }.hashtags { color: var(--primary)!important; }.detail-list dt { display: flex; align-items: center; gap: 6px; }.detail-media { min-height: 125px; border-radius: 9px; display: flex; align-items: center; justify-content: center; gap: 8px; color: white; background: radial-gradient(circle at 50% 50%,#4d56f4,#141b4d 60%,#060914); }.detail-media strong { font-size: 46px; color: #dd79ff; text-shadow: 0 0 15px #8a54ff; }.detail-media span { font-weight: 800; letter-spacing: .08em; }

/* Integrations */
.connect-control { position: relative; }.connect-menu { position: absolute; right: 0; top: 43px; z-index: 20; width: 190px; padding: 7px; border: 1px solid var(--border); border-radius: 10px; background: white; box-shadow: var(--shadow-lg); display: grid; grid-template-columns: repeat(2,1fr); gap: 3px; }.connect-menu button { min-height: 38px; border: 0; border-radius: 7px; background: transparent; display: flex; align-items: center; gap: 6px; padding: 5px; font-size: 8.5px; cursor: pointer; }.connect-menu button:hover { background: var(--surface-muted); }
.integration-layout { display: grid; grid-template-columns: minmax(640px,1fr) 300px; gap: 12px; align-items: start; }.account-table .table-row { grid-template-columns: minmax(150px,1.5fr) minmax(115px,1fr) 105px 38px 57px 84px 100px 22px; }.connection-detail .card { padding: 13px; }.connection-detail h3 { margin: 14px 0 6px; font-size: 10px; }.mono { font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 8.5px; }.timeline .icon { color: var(--green); }

/* Media */
.media-tabs,.inbox-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--border); margin: 0 0 13px; }.media-tabs button,.inbox-tabs button { min-height: 39px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; }.media-tabs button.active,.inbox-tabs button.active { color: var(--primary); border-color: var(--primary); }
.media-layout { display: grid; grid-template-columns: 170px minmax(520px,1fr) 270px; gap: 12px; align-items: start; }.filter-card { padding: 11px; }.filter-heading { display: flex; justify-content: space-between; align-items: center; }.filter-heading h3 { margin: 0; font-size: 11px; }.filter-card h4 { margin: 14px 0 7px; font-size: 9px; }.check-row { min-height: 27px; display: flex; align-items: center; gap: 6px; color: var(--text-soft); font-size: 8.5px; cursor: pointer; }.check-row input { accent-color: var(--primary); }.check-row span { flex: 1; }.check-row strong { color: var(--muted); font-weight: 500; }
.media-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }.media-card { position: relative; min-width: 0; border: 0; background: transparent; padding: 0; text-align: left; cursor: pointer; }.media-card.selected .media-thumb { outline: 3px solid rgba(91,92,226,.4); border-color: var(--primary); }.media-thumb { position: relative; aspect-ratio: 1.12; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; display: grid; place-items: center; padding: 10px; text-align: center; color: white; font-weight: 800; line-height: 1.1; letter-spacing: .02em; font-size: 16px; white-space: pre-line; transition: transform var(--ease),box-shadow var(--ease); }.media-card:hover .media-thumb { transform: translateY(-2px); box-shadow: var(--shadow-sm); }.media-thumb small { position: absolute; left: 5px; bottom: 5px; padding: 3px 4px; border-radius: 4px; background: rgba(255,255,255,.86); color: #374151; font-size: 7px; }.media-thumb time { position: absolute; right: 5px; bottom: 5px; padding: 3px 5px; border-radius: 4px; background: rgba(17,24,39,.72); font-size: 7px; }.media-card > div:nth-child(2) { display: grid; gap: 2px; padding: 7px 1px 0; }.media-card > div:nth-child(2) strong { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.media-card > div:nth-child(2) span { color: var(--muted); font-size: 7.5px; }.media-card > .icon { position: absolute; right: 1px; bottom: 0; color: var(--muted); }
.asset-detail { display: grid; gap: 12px; }.asset-detail .card { padding: 12px; }.asset-preview { aspect-ratio: 1.8; border-radius: 9px; display: grid; place-items: center; color: white; text-align: center; font-size: 22px; font-weight: 850; line-height: 1.05; white-space: pre-line; }.ai-tool-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 6px; }.ai-tool-grid button { min-height: 62px; border: 1px solid var(--border); border-radius: 8px; background: white; display: flex; align-items: flex-start; gap: 7px; padding: 8px; text-align: left; color: var(--primary); cursor: pointer; }.ai-tool-grid button:hover { background: var(--primary-pale); }.ai-tool-grid span { display: grid; gap: 3px; color: var(--text); }.ai-tool-grid strong { font-size: 8.5px; }.ai-tool-grid small { color: var(--muted); font-size: 7.5px; line-height: 1.3; }

/* Approvals */
.approval-layout { display: grid; grid-template-columns: minmax(760px,1fr) 300px; gap: 12px; align-items: start; }.kanban { display: grid; grid-template-columns: repeat(5,minmax(140px,1fr)); gap: 9px; overflow-x: auto; }.kanban-column { min-width: 140px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: #f9fafc; }.kanban-column > header { min-height: 28px; display: flex; justify-content: space-between; align-items: center; font-size: 9.5px; }.kanban-column > header span { color: var(--muted); }.kanban-column > div { display: grid; gap: 7px; }.approval-card { min-height: 142px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: white; text-align: left; cursor: pointer; transition: border-color var(--ease),box-shadow var(--ease); }.approval-card:hover,.approval-card.selected { border-color: #b5b8f6; box-shadow: var(--shadow-sm); }.approval-title { display: flex; align-items: center; gap: 6px; }.approval-title strong { flex: 1; font-size: 8.5px; }.comment-count { display: inline-flex; align-items: center; gap: 2px; color: var(--primary); font-size: 7px; }.approval-card p { min-height: 36px; margin: 8px 0; color: var(--text-soft); font-size: 8px; line-height: 1.45; }.approval-owner { display: flex; align-items: center; gap: 5px; font-size: 7.5px; }.approval-card footer { min-height: 29px; display: flex; align-items: end; justify-content: space-between; gap: 5px; }.approval-card footer small { color: var(--muted); font-size: 7px; }.add-card { min-height: 32px; border: 0; background: transparent; color: var(--primary); display: flex; justify-content: center; align-items: center; gap: 4px; font-size: 8px; cursor: pointer; }
.workflow-policy { display: grid; grid-template-columns: 1.1fr 1fr 1fr .8fr; gap: 10px; }.workflow-policy > div { min-height: 150px; padding: 9px; border: 1px solid var(--border); border-radius: 8px; }.workflow-policy h3 { margin: 0 0 8px; font-size: 9.5px; }.workflow-policy p,.workflow-policy small { color: var(--muted); font-size: 8px; line-height: 1.4; }.chain-step { min-height: 31px; display: flex; align-items: center; gap: 5px; }.chain-step > b { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-muted); font-size: 7px; }.chain-step.active > b { color: white; background: var(--primary); }.chain-step > span { flex: 1; display: grid; }.chain-step strong { font-size: 7.5px; }.chain-step small { font-size: 6.8px; }.chain-step.done > .icon { color: var(--green); }
.approval-detail .card { padding: 12px; }.approval-detail h3 { margin: 13px 0 6px; font-size: 9.5px; }.approval-detail > .card > p { color: var(--text-soft); font-size: 8.5px; line-height: 1.5; }.approval-detail-title { display: flex; align-items: center; gap: 8px; }.approval-detail-title > div { flex: 1; }.approval-detail-title h2 { margin: 0; font-size: 11px; }.approval-detail-title span { color: var(--muted); font-size: 8px; }.approval-media { min-height: 145px; border-radius: 8px; color: white; display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(145deg,#45b8d8,#f39abb); }.approval-media span { font-size: 30px; }.approval-media strong { font-size: 19px; line-height: 1.05; }.destination-chips span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; font-size: 7.5px; }.history-list,.comment-thread { display: grid; }.history-list > div { min-height: 32px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--border); font-size: 7.5px; }.history-list time { color: var(--muted); }.history-list span { flex: 1; }.approver-grid { display: grid; gap: 5px; }.approver-grid > div { display: flex; align-items: center; gap: 6px; }.approver-grid > div > span { flex: 1; display: grid; font-size: 8px; }.approver-grid small { color: var(--muted); font-size: 7px; }.comment-input { min-height: 34px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px; display: flex; align-items: center; }.comment-input input { flex: 1; border: 0; outline: 0; font-size: 8.5px; }.comment-thread > div { display: flex; gap: 6px; padding: 7px 0; }.comment-thread p { margin: 0; padding: 6px; border-radius: 7px; background: var(--surface-muted); font-size: 7.5px; line-height: 1.45; }.comment-thread p strong { display: block; margin-bottom: 2px; }.approval-actions { position: sticky; bottom: 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; margin: 10px -12px -12px; padding: 9px; background: white; border-top: 1px solid var(--border); }.approval-actions .button { min-height: 32px; padding: 0 5px; font-size: 7.5px; }

/* Inbox */
.inbox-stats { margin-left: 25%; }.inbox-layout { display: grid; grid-template-columns: 270px minmax(430px,1fr) 270px; gap: 0; border: 1px solid var(--border); border-radius: 11px; overflow: hidden; background: white; min-height: 700px; }.inbox-layout .card { border: 0; border-radius: 0; box-shadow: none; }.conversation-pane { border-right: 1px solid var(--border); }.contact-pane { border-left: 1px solid var(--border); }.conversation-heading { display: flex; justify-content: space-between; align-items: center; }.conversation-heading h2 { margin: 0; font-size: 12px; }.conversation-list { margin: 9px -14px 0; display: grid; }.conversation-item { position: relative; min-height: 82px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--border); background: white; display: grid; grid-template-columns: 38px minmax(0,1fr) 25px; gap: 8px; text-align: left; cursor: pointer; }.conversation-item:hover,.conversation-item.selected { background: var(--primary-pale); }.conversation-item.selected { box-shadow: inset 3px 0 var(--primary); }.conversation-item > div { min-width: 0; }.conversation-item strong { font-size: 9.5px; }.conversation-item p { margin: 4px 0; color: var(--muted); font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.conversation-item div span { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 7px; }.conversation-item time { color: var(--muted); font-size: 7px; text-align: right; }.conversation-item .badge { position: absolute; right: 8px; bottom: 8px; }
.thread-card { padding: 0!important; height: 100%; display: flex; flex-direction: column; }.thread-header { min-height: 58px; padding: 0 12px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); }.thread-header > div { display: grid; gap: 2px; }.thread-header h2 { margin: 0; font-size: 10.5px; }.thread-header span { color: var(--muted); font-size: 8px; }.spacer { flex: 1!important; }.status-select { min-height: 31px; padding: 0 23px 0 8px; color: var(--green); background: var(--green-soft); border: 1px solid #cdebdc; }
.thread-scroll { flex: 1; padding: 12px; overflow: auto; display: grid; align-content: start; gap: 9px; }.message { display: flex; gap: 8px; }.message > div { flex: 1; padding: 10px; border: 1px solid var(--border); border-radius: 9px; }.message header { display: flex; gap: 8px; }.message header strong { font-size: 9px; }.message header time { color: var(--muted); font-size: 7px; }.message p { margin: 7px 0 0; color: var(--text-soft); font-size: 9px; line-height: 1.55; }.message small { display: flex; align-items: center; gap: 3px; margin-top: 7px; color: var(--green); font-size: 7px; }.outgoing > div { border-color: #d5dcfa; background: #fcfcff; }.brand-mini { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: white; background: linear-gradient(135deg,#2aa9ff,#5b5ce2); }.internal-note { display: flex; gap: 8px; padding: 9px; border: 1px solid #f0d9a5; border-radius: 8px; background: #fffbef; color: #8a641f; }.internal-note strong { font-size: 8px; }.internal-note p { margin: 3px 0 0; font-size: 8px; }.tag-row { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; font-size: 8px; }.tag-row span { padding: 4px 6px; border-radius: 6px; background: var(--surface-muted); }.tag-row button { border: 0; background: transparent; color: var(--primary); }
.suggested { border: 1px solid var(--border); border-radius: 8px; padding: 9px; }.suggested > header { display: flex; align-items: center; justify-content: space-between; font-size: 8.5px; }.suggested > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-top: 7px; }.suggested > div button { min-height: 59px; border: 1px solid var(--border); border-radius: 7px; background: white; padding: 7px; display: grid; gap: 4px; text-align: left; cursor: pointer; }.suggested button strong { color: var(--primary); font-size: 8px; }.suggested button span { color: var(--muted); font-size: 7px; line-height: 1.3; }
.reply-composer { border-top: 1px solid var(--border); padding: 0 12px 10px; }.reply-tabs { display: flex; gap: 14px; }.reply-tabs button { min-height: 34px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 8.5px; }.reply-tabs button.active { color: var(--primary); border-color: var(--primary); }.format-row { min-height: 34px; display: flex; align-items: center; gap: 11px; border: 1px solid var(--border); border-bottom: 0; padding: 0 8px; color: var(--muted); }.format-row select { min-height: 26px; }.reply-composer textarea { width: 100%; min-height: 120px; border: 1px solid var(--border); padding: 10px; resize: vertical; font-size: 8.5px; line-height: 1.5; outline: 0; }.reply-actions { display: flex; gap: 6px; align-items: center; margin-top: 7px; }.reply-actions .button { min-height: 32px; padding: 0 8px; font-size: 8px; }.reply-actions select { min-height: 32px; }
.contact-pane .card { padding: 12px; }.contact-header { display: flex; align-items: center; gap: 8px; }.contact-header > div { flex: 1; }.contact-header h2 { margin: 0; font-size: 11px; }.contact-header span { color: var(--muted); font-size: 8px; }.contact-info li { min-height: 29px; display: flex; align-items: center; gap: 7px; color: var(--text-soft); font-size: 8.5px; }.contact-pane h3 { margin: 13px 0 6px; font-size: 9.5px; }.platform-contact-list > div { justify-content: flex-start; font-size: 8.5px; }.platform-contact-list > div .icon:last-child { margin-left: auto; }.prior-list > div { display: grid; grid-template-columns: 65px 1fr auto; font-size: 7.5px; }.prior-list time { color: var(--muted); }.linked-case { margin-top: 12px; padding: 9px; border: 1px solid #d8d5ff; border-radius: 8px; background: var(--primary-pale); display: flex; align-items: flex-start; gap: 8px; }.linked-case > div { flex: 1; }.linked-case strong { font-size: 8.5px; }.linked-case p { margin: 4px 0; font-size: 8px; }.linked-case small { color: var(--muted); font-size: 7px; }.sla-box { padding: 10px; border: 1px solid var(--border); border-radius: 8px; }.sla-box > div { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: 8px; }.sla-box strong { color: var(--green); font-size: 13px; }.sla-box small { display: block; margin-top: 5px; text-align: right; color: var(--green); font-size: 7px; }

/* Analytics */
.analytics-filters { align-items: end; }.analytics-layout { display: grid; grid-template-columns: minmax(760px,1fr) 250px; gap: 12px; align-items: start; }.analytics-top-grid { display: grid; grid-template-columns: 1.5fr .8fr .8fr; gap: 11px; }.analytics-mid-grid { display: grid; grid-template-columns: 1.25fr 1.15fr .85fr; gap: 11px; }.analytics-bottom-grid { display: grid; grid-template-columns: .8fr 1fr 1fr; gap: 11px; }.conversion-total { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 8.5px; }.conversion-total strong { color: var(--green); font-size: 14px; }.conversion-total small { color: var(--green); }.metric-table > div { grid-template-columns: 1.35fr repeat(4,.65fr) .7fr; min-height: 34px; font-size: 7.5px; }.metric-table.platform-metric > div { grid-template-columns: 1.1fr repeat(4,.75fr); }.heatmap-labels { position: absolute; display: grid; grid-template-rows: repeat(7,1fr); height: 155px; margin-top: 1px; color: var(--muted); font-size: 6px; }.analytics-mid-grid .card:last-child { position: relative; }.analytics-mid-grid .heatmap { margin-left: 25px; }.heat-legend { display: flex; align-items: center; gap: 7px; justify-content: center; margin-top: 8px; color: var(--muted); font-size: 7px; }.heat-legend i { width: 65px; height: 6px; background: linear-gradient(90deg,#f0efff,#5b5ce2); }.rank-list { list-style: none; padding: 0; margin: 0; display: grid; }.rank-list li { min-height: 39px; display: grid; grid-template-columns: 23px 1fr 45px auto; align-items: center; gap: 6px; border-bottom: 1px solid var(--border); font-size: 8.5px; }.mini-legend { display: grid; gap: 6px; color: var(--text-soft); font-size: 7.5px; }.reports-panel .card { padding: 12px; }.report-actions { display: grid; }.report-actions button,.report-option { min-height: 50px; border: 0; border-bottom: 1px solid var(--border); background: transparent; display: flex; align-items: center; gap: 8px; padding: 7px 2px; text-align: left; cursor: pointer; }.report-actions button:hover { background: var(--surface-muted); }.report-actions span,.report-option span { display: grid; gap: 2px; }.report-actions strong,.report-option strong { font-size: 8.5px; }.report-actions small,.report-option small { color: var(--muted); font-size: 7px; }.takeaways { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }.takeaways li { display: flex; align-items: flex-start; gap: 6px; color: var(--text-soft); font-size: 8px; line-height: 1.45; }.takeaways .icon { color: var(--green); }

/* Generic pages */
.generic-layout { display: grid; grid-template-columns: minmax(650px,1fr) 265px; gap: 12px; align-items: start; }.generic-table > div { grid-template-columns: 1.3fr 1fr .9fr .7fr 28px; }.generic-table > div > span:first-child { display: grid; gap: 2px; }.generic-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }.generic-summary > div { padding: 9px; border: 1px solid var(--border); border-radius: 8px; }.generic-summary strong { font-size: 9.5px; }.generic-summary p { min-height: 36px; color: var(--muted); font-size: 8px; line-height: 1.45; }.quick-action-list button { min-height: 43px; border: 0; border-bottom: 1px solid var(--border); background: transparent; display: flex; align-items: center; gap: 8px; cursor: pointer; text-align: left; }.quick-action-list button:hover { background: var(--surface-muted); }.quick-action-list span { flex: 1; font-size: 8.5px; }