/* Functional module views and forms */
.modal select, .modal textarea { width: 100%; min-height: 40px; padding: 9px 10px; color: var(--ink); border: 1px solid #dce2e5; border-radius: 8px; outline: none; background: #fff; resize: vertical; }
.modal textarea { min-height: 82px; }.modal select:focus, .modal textarea:focus { border-color: #58b882; box-shadow: 0 0 0 3px rgba(23,156,83,.12); }.modal form { display: grid; gap: 11px; }.check-label { display: flex !important; align-items: center; gap: 7px; font-size: 11px !important; font-weight: 600 !important; }.check-label input { width: 15px; height: 15px; accent-color: var(--green); }.toast.is-error span { color: #a53731; background: #ffd7d2; }.toast.is-error { background: #3b2422; }
.pulse.is-setup { background: #e39822; box-shadow: 0 0 0 4px rgba(225,145,28,.13); }.channel-status.setup { color: #9b6418; background: #fff0d8; }
.journey-strip { margin-bottom: 19px; padding: 12px 15px; display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #536372; border: 1px solid #e0ece5; border-radius: 11px; background: linear-gradient(100deg,#fbfefc,#f1faf5); }.journey-strip > div { display: grid; gap: 3px; flex: 0 0 auto; }.journey-strip strong { color: var(--green-dark); font-size: 10px; letter-spacing: .02em; text-transform: uppercase; }.journey-strip span { color: #6e7d87; font-size: 10px; }.journey-strip ol { margin: 0; padding: 0; display: flex; align-items: center; justify-content: flex-end; gap: 0; list-style: none; }.journey-strip li { position: relative; padding: 5px 8px; color: #84919a; border: 1px solid #e3e9e5; background: #fff; font-size: 9px; font-weight: 700; }.journey-strip li:first-child { border-radius: 6px 0 0 6px; }.journey-strip li:last-child { border-radius: 0 6px 6px 0; }.journey-strip li + li { margin-left: -1px; }.journey-strip li.is-done { position: relative; z-index: 1; color: #087b43; border-color: #a9d9bd; background: #e8f7ee; }
.status.pending-approval { color: #9a6518; background: #fff2dd; }.status.pending-approval i { background: #df941e; }.approval-action { color: #0b7441; border-color: #a9d9bd; background: #ebf8f0; }.waiting-label { color: #8b96a2; font-size: 10px; font-weight: 650; }
.account-popover { position: fixed; z-index: 20; bottom: 74px; left: 16px; width: 275px; padding: 7px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 16px 38px rgba(30,45,68,.16); }.account-popover > p { margin: 7px 8px 5px; color: #8390a0; font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }.account-option { width: 100%; padding: 8px; display: flex; align-items: center; gap: 8px; border-radius: 8px; text-align: left; }.account-option:hover, .account-option.is-selected { background: #f1faf5; }.account-option > span:nth-child(2) { flex: 1; display: grid; gap: 2px; }.account-option strong { font-size: 10.5px; }.account-option small { color: #7d8999; font-size: 9px; }.account-option > svg { width: 15px; color: var(--green); }.account-hint { display: block; padding: 8px 8px 4px; color: #8490a0; font-size: 8.5px; line-height: 1.4; }.member-list { margin: 0 17px; border-top: 1px solid #edf0f2; }.member-row { width: 100%; padding: 8px 0; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid #edf0f2; text-align: left; }.member-row > span:nth-child(2) { flex: 1; display: grid; gap: 2px; }.member-row strong { font-size: 10px; }.member-row small { color: #8591a0; font-size: 8.5px; }.member-row > svg { width: 14px; color: var(--green); }.member-row.is-active strong { color: var(--green); }
.commerce-read-model { align-self: center; padding: 5px 7px; color: #506b85; border-radius: 6px; background: #edf5fb; font-size: 9px; font-weight: 750; }.order-table { border-top: 1px solid #edf0f2; }.order-head, .order-row { display: grid; grid-template-columns: minmax(175px,1.4fr) minmax(155px,1.15fr) minmax(115px,.8fr) minmax(100px,.7fr) minmax(110px,.8fr); align-items: center; gap: 12px; padding: 10px 18px; }.order-head { color: #8995a3; font-size: 9.5px; font-weight: 700; }.order-row { min-height: 61px; color: #4f5c6d; border-top: 1px solid #edf0f2; font-size: 10.5px; }.order-row > div { display: grid; gap: 4px; }.order-row strong { color: var(--ink); font-size: 10.5px; }.order-row small { color: #8893a1; font-size: 9px; }.payment-status, .reconciled { width: max-content; padding: 4px 6px; border-radius: 6px; font-size: 9px; font-weight: 750; }.payment-status.pending { color: #9b6418; background: #fff0d8; }.payment-status.paid, .reconciled { color: #087a42; background: #e2f5e9; }.payment-status.failed, .payment-status.expired { color: #a83f3a; background: #ffebe9; }.payment-status.refunded { color: #5f6990; background: #eef0f7; }
.cost-breakdown { padding: 0 18px 18px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }.cost-breakdown > div { padding: 11px; display: grid; gap: 5px; border: 1px solid #e7eceb; border-radius: 8px; background: #fcfefd; }.cost-breakdown span { color: #6a7787; font-size: 9.5px; }.cost-breakdown strong { font-size: 13px; }.cost-breakdown small { color: #8b96a3; font-size: 8.5px; }
.row-action { padding: 6px 8px; border: 1px solid #dfe6e2; border-radius: 7px; color: var(--green); background: #fff; font-size: 10px; font-weight: 750; }.row-action:hover { background: #f0faf4; border-color: #a8d9bd; }.view-grid, .settings-grid, .analytics-grid { display: grid; gap: 18px; }.full-panel { min-width: 0; }.campaign-table-wide .campaign-row { grid-template-columns: minmax(260px,2.3fr) minmax(90px,.8fr) minmax(145px,1.1fr) minmax(145px,1.1fr) 65px; }.campaign-row-long .row-action { justify-self: end; }.info-panel { padding: 16px 18px; display: flex; align-items: flex-start; gap: 10px; color: #246043; border: 1px solid #cfebda; border-radius: 11px; background: #f1faf5; }.info-panel > svg { flex: 0 0 auto; width: 20px; color: var(--green); }.info-panel strong { font-size: 12px; }.info-panel p { margin: 4px 0 0; color: #637a6d; font-size: 11px; line-height: 1.5; }.empty-state { padding: 28px 20px; text-align: center; color: #8290a0; font-size: 12px; }.empty-state.large, .fatal-state { padding: 48px 20px; border-radius: 13px; text-align: center; background: #fff; border: 1px solid var(--line); }.fatal-state h1 { font-size: 20px; }.fatal-state p { color: var(--muted); font-size: 13px; }
.campaign-hub { display: grid; }.campaign-hub-panel { overflow: hidden; }.campaign-hub-tabs { display: flex; gap: 5px; padding: 14px 16px 0; border-bottom: 1px solid #e7ece9; background: #fbfcfc; }.campaign-hub-tabs button { min-width: 185px; padding: 12px 14px; display: inline-flex; align-items: center; gap: 8px; border-radius: 9px 9px 0 0; color: #677489; font-size: 12px; font-weight: 750; text-align: left; }.campaign-hub-tabs button svg { width: 17px; }.campaign-hub-tabs button small { min-width: 18px; margin-left: auto; padding: 2px 5px; color: #718095; border-radius: 999px; background: #edf1f2; font-size: 8.5px; text-align: center; }.campaign-hub-tabs button:hover { color: #087b44; background: #f0f7f3; }.campaign-hub-tabs button.is-active { color: #087b44; background: #eaf8ef; box-shadow: inset 0 -3px 0 #0b9250; }.campaign-hub-tabs button.is-active small { color: #087b44; background: #d6f0e0; }.campaign-hub-body { min-width: 0; }.campaign-hub-heading { padding: 22px 19px 17px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }.campaign-hub-heading h2 { margin: 0; color: var(--ink); font-size: 17px; letter-spacing: -.35px; }.campaign-hub-heading p { max-width: 690px; margin: 5px 0 0; color: #748194; font-size: 11px; line-height: 1.5; }.campaign-hub-heading .button { flex: 0 0 auto; }.campaign-hub-note { margin: 17px 19px 19px; padding: 14px 15px; display: flex; align-items: flex-start; gap: 10px; color: #246043; border: 1px solid #cfebda; border-radius: 10px; background: #f1faf5; }.campaign-hub-note > svg { width: 19px; flex: 0 0 auto; color: var(--green); }.campaign-hub-note > div { min-width: 0; }.campaign-hub-note strong { font-size: 11px; }.campaign-hub-note p { margin: 4px 0 0; color: #637a6d; font-size: 10px; line-height: 1.5; }.campaign-hub-note .text-button { margin-top: 9px; }
.data-table { border-top: 1px solid #edf0f2; }.data-head, .data-row { display: grid; grid-template-columns: minmax(230px,2fr) 70px 110px 105px minmax(180px,1.2fr); gap: 13px; align-items: center; padding: 10px 19px; }.data-head { color: #8994a2; font-size: 10px; font-weight: 700; }.data-row { min-height: 63px; border-top: 1px solid #edf0f2; color: #526075; font-size: 11px; }.data-row > div { display: grid; gap: 4px; }.data-row strong { color: var(--ink); font-size: 12px; }.data-row small { color: #8792a0; font-size: 10px; }.score { width: 29px; text-align: center; padding: 4px 2px; border-radius: 7px; font-size: 10px; font-weight: 800; }.score-high { color: #067541; background: #dff5e8; }.score-medium { color: #9a6214; background: #fff1d8; }.score-low { color: #697688; background: #eef1f4; }.consent-granted { color: #087e45; font-weight: 700; }.consent-pending { color: #a36618; font-weight: 700; }.tag-cluster { display: flex; flex-wrap: wrap; gap: 4px; }.tag-cluster i, .tag { display: inline-block; color: #516475; border-radius: 5px; padding: 3px 5px; background: #edf4f7; font-size: 9px; font-style: normal; }

/* Orders & fulfilment: intentionally larger type than the compact legacy tables. */
.orders-page,.orders-detail{display:grid;gap:20px}.orders-heading-actions{display:flex;justify-content:flex-end;gap:10px}.order-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.order-stat-grid>div{min-width:0;padding:18px;border:1px solid #e2e8f0;border-radius:14px;background:#fff;box-shadow:0 5px 18px #17104a09}.order-stat-grid span{display:block;color:#66758b;font-size:14px}.order-stat-grid b{display:block;margin-top:8px;color:#19143d;font-size:clamp(20px,1.7vw,23px)}.order-stat-grid small{display:block;margin-top:5px;color:#6d7c90;font-size:12px;line-height:1.4}.order-tabs{display:flex;gap:7px;overflow:auto;padding-bottom:3px}.order-tabs button{border:1px solid #dfe5ec;border-radius:9px;background:#fff;color:#536278;font:700 14px/1.2 inherit;padding:10px 12px;white-space:nowrap}.order-tabs button.is-active{border-color:#5b21b6;color:#4c1d95;background:#f5f0ff;box-shadow:inset 0 -2px #7c3aed}.order-tabs b{margin-left:6px;padding:2px 6px;border-radius:999px;background:#ece7ff;font-size:12px}.orders-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px;border-bottom:1px solid #e9eef3}.orders-toolbar label{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid #dbe3ea;border-radius:10px}.orders-toolbar>label:first-child{flex:1;min-width:min(340px,100%)}.orders-toolbar>label:not(:first-child){min-width:178px;color:#66758b;font-size:13px;font-weight:800}.orders-toolbar select{min-width:0;border:0;background:transparent;color:#42526a;font:600 14px inherit;outline:0}.orders-toolbar svg{width:19px;height:19px}.orders-toolbar input{width:100%;border:0;outline:0;font:500 15px inherit}.orders-toolbar>span{color:#66758b;font-size:14px;white-space:nowrap}.orders-table{overflow-x:auto}.orders-table-head,.orders-table-row{display:grid;grid-template-columns:1.1fr .95fr 1.2fr .78fr .82fr 1.1fr 64px;gap:12px;align-items:center;min-width:920px;padding:15px 18px}.orders-table-head{color:#76859a;font-size:13px;font-weight:800}.orders-table-row{border-top:1px solid #edf0f4;color:#42526a;font-size:14px}.orders-table-row>div,.orders-table-row>span{display:grid;gap:4px;min-width:0}.orders-table-row strong{color:#1e2541;font-size:15px}.orders-table-row small{color:#79889c;font-size:13px;line-height:1.35;overflow-wrap:anywhere}.order-badge{display:inline-flex;width:max-content;max-width:100%;padding:5px 8px;border-radius:7px;background:#eef2f7;color:#526174;font-size:12px;font-weight:800;white-space:nowrap}.order-lunas,.order-selesai,.order-terkirim{background:#e5f7ea;color:#087443}.order-baru,.order-menunggu,.order-menunggu_verifikasi{background:#fff2d9;color:#9a6517}.order-dibatalkan,.order-gagal,.order-refund,.order-dikembalikan{background:#ffebe9;color:#af3b34}.order-dalam_pengiriman,.order-dikonfirmasi{background:#e8f2ff;color:#216fc5}.order-detail-head{display:flex;justify-content:space-between;gap:18px;align-items:start}.order-detail-head h2{margin:2px 0 7px;font-size:29px}.order-detail-head p{margin:0;color:#68778b;font-size:15px}.order-detail-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:16px}.order-detail-grid .panel{padding:21px}.order-detail-grid h3{margin:0 0 16px;color:#1e2541;font-size:18px}.order-lines,.timeline{display:grid;gap:12px}.order-lines>div{display:flex;justify-content:space-between;gap:14px;padding-bottom:11px;border-bottom:1px solid #edf0f4}.order-lines span{display:grid;gap:3px}.order-lines small,.timeline-item span,.muted{color:#6d7c90;font-size:14px;line-height:1.55}.order-total{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:16px;font-size:15px}.order-total strong{padding-top:10px;border-top:1px solid #dde5ed;color:#1d1743;font-size:17px}.timeline-item{display:grid;gap:3px;padding-left:12px;border-left:3px solid #d8c5ff}.order-note-form{display:flex;gap:9px;margin-top:15px}.order-note-form input{flex:1;min-width:0;padding:11px;border:1px solid #dbe3ea;border-radius:9px;font:500 14px inherit}.order-detail-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}.order-detail-actions select{min-width:210px;padding:0 12px;border:1px solid #dbe3ea;border-radius:9px;background:#fff;font:600 14px inherit}.shipping-method-list{display:grid;gap:9px}.shipping-method-list>div{display:grid;grid-template-columns:1.2fr .6fr 1fr;gap:10px;align-items:center;padding:12px;border:1px solid #e4e9ee;border-radius:9px}.shipping-method-list span{font-weight:800;color:#6d4db3}.shipping-method-list small{color:#68778b;font-size:14px}.order-form-panel{padding:22px}.orders-form fieldset{margin:0 0 16px}.orders-form legend{font-size:18px}@media(max-width:760px){.orders-toolbar{align-items:stretch;flex-wrap:wrap}.orders-toolbar>label:first-child{flex-basis:100%}.orders-toolbar>span{margin-left:auto}.order-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media print{.sidebar,.topbar,.page-heading,.orders-heading-actions,.order-detail-actions,.back-link{display:none!important}.workspace{margin:0!important}.content{padding:0!important}.order-detail-grid{grid-template-columns:1fr 1fr!important}}
.order-document-card{background:linear-gradient(135deg,#fff,#fcf9ff)}.order-document-heading{margin-bottom:13px}.order-document-heading h3{margin-bottom:6px}.order-document-heading p{margin:0;color:#6d7c90;font-size:14px;line-height:1.5}.order-document-list{display:grid;gap:10px}.order-document-list>div{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px;border:1px solid #e6ddf1;border-radius:12px;background:#fff}.order-document-mark{display:grid;width:39px;height:39px;place-items:center;border-radius:11px;background:#f1eaff;color:#5a2ca1;font-size:11px;font-weight:900}.order-document-mark.receipt{background:#eaf7ee;color:#237147}.order-document-list section{min-width:0}.order-document-list small,.order-document-list strong,.order-document-list p{display:block}.order-document-list small{color:#82768e;font-size:11px;font-weight:850;letter-spacing:.045em;text-transform:uppercase}.order-document-list strong{overflow:hidden;margin-top:3px;color:#2b2140;font-size:14px;text-overflow:ellipsis;white-space:nowrap}.order-document-list p{margin:4px 0 0;color:#71677a;font-size:12px;line-height:1.4}.order-document-list .row-action{min-height:38px;padding:0 11px;border:1px solid #ddd5f2;border-radius:9px;background:#faf8ff;white-space:nowrap}.order-document-pending{padding:7px 9px;border-radius:999px;background:#fff2d9;color:#916016;font-size:11px;font-weight:800;white-space:nowrap}@media(max-width:720px){.order-document-list>div{grid-template-columns:auto minmax(0,1fr)}.order-document-list .row-action,.order-document-pending{grid-column:1/-1;width:max-content;margin-left:51px}.order-document-list .row-action{width:calc(100% - 51px)}}
.workflow-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; }.workflow-card { min-height: 244px; padding: 17px; }.workflow-top { display: flex; justify-content: space-between; align-items: center; }.workflow-card h2 { margin: 15px 0 4px; font-size: 14px; }.workflow-trigger { margin: 0; color: var(--green); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }.flow-line { margin: 17px 0 10px; display: flex; align-items: center; gap: 7px; color: #708094; font-size: 9px; font-weight: 700; }.flow-line span { padding: 5px 7px; border-radius: 5px; background: #f0f4f6; }.flow-line svg { width: 14px; }.workflow-action { min-height: 32px; margin: 0; color: #5c687a; font-size: 10.5px; line-height: 1.45; }.workflow-card footer { margin-top: 15px; padding-top: 11px; display: flex; justify-content: space-between; color: #8995a4; border-top: 1px solid #edf0f2; font-size: 9.5px; }.workflow-card footer span:last-child { color: var(--green); font-weight: 750; }.switch { position: relative; display: inline-flex; cursor: pointer; }.switch input { width: 0; height: 0; opacity: 0; }.switch span { display: block; width: 35px; height: 20px; border-radius: 100px; background: #d8dee2; transition: .2s; }.switch span:before { content:""; position: absolute; height: 14px; width: 14px; top: 3px; left: 3px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: .2s; }.switch input:checked + span { background: var(--green); }.switch input:checked + span:before { transform: translateX(15px); }.new-card { min-height: 244px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #718094; border: 1.5px dashed #b9c9c0; border-radius: 13px; background: #fbfdfc; }.new-card:hover { color: var(--green); background: #f4fbf7; border-color: #74bd95; }.new-card svg { height: 28px; width: 28px; }.new-card strong { font-size: 12px; }.new-card span { max-width: 160px; font-size: 10px; line-height: 1.4; }
.template-grid { padding: 0 19px 19px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }.template-card { min-height: 170px; padding: 13px; display: flex; flex-direction: column; border: 1px solid #e5e9ed; border-radius: 10px; background: #fcfefd; }.template-card > div { display: flex; align-items: center; justify-content: space-between; }.template-category { color: #487298; padding: 4px 6px; border-radius: 5px; background: #eaf4ff; font-size: 9px; font-weight: 750; }.template-card h3 { margin: 13px 0 5px; font-size: 13px; }.template-card p { margin: 0; color: #687588; line-height: 1.55; font-size: 10.5px; }.template-card footer { margin-top: auto; padding-top: 10px; color: #9aa4af; font-size: 9px; }
.inbox-layout { display: grid; grid-template-columns: minmax(245px,.75fr) minmax(400px,1.55fr) minmax(180px,.55fr); gap: 16px; }.inbox-list-panel { min-height: 560px; }.inbox-filter { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 16px; border-bottom: 1px solid #e9edf0; }.inbox-filter > div { display: grid; gap: 4px; }.inbox-filter strong { font-size: 12px; }.inbox-filter small { color: #8a96a4; font-size: 9.5px; }.inbox-filter > span { padding: 3px 6px; color: var(--green); border-radius: 5px; background: #e4f6eb; font-size: 10px; }.channel-filter-bar { padding: 10px 12px; display: flex; gap: 6px; overflow-x: auto; border-bottom: 1px solid #e9edf0; background: #fcfdfd; scrollbar-width: thin; }.channel-filter { flex: 0 0 auto; min-height: 27px; padding: 5px 7px; display: inline-flex; align-items: center; gap: 5px; color: #657488; border: 1px solid #e1e7e5; border-radius: 999px; background: #fff; font-size: 9px; font-weight: 750; white-space: nowrap; }.channel-filter:hover { color: #087b44; border-color: #afdabe; background: #f4fbf6; }.channel-filter.is-active { color: #087b44; border-color: #8ccca7; background: #e8f7ee; box-shadow: inset 0 0 0 1px rgba(9,132,75,.06); }.channel-filter b { min-width: 15px; padding: 1px 4px; color: #748295; border-radius: 999px; background: #edf1f2; font-size: 8.5px; text-align: center; }.channel-filter.is-active b { color: #087b44; background: #d6f0e0; }.conversation-row.is-selected { background: #f0faf4; }.conversation-copy .message-channel { margin-top: 3px; align-self: start; }.message-channel { width: max-content; max-width: 100%; padding: 3px 5px; display: inline-block; overflow: hidden; color: #557084; border-radius: 5px; background: #eff4f6; font-size: 8px; font-style: normal; font-weight: 750; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }.message-channel.channel-wa_cloud { color: #1674b0; background: #e7f3fc; }.message-channel.channel-wa_device { color: #9a6519; background: #fff1dc; }.message-channel.channel-messenger { color: #6a4ab7; background: #f0ebff; }.message-channel.channel-instagram { color: #b04473; background: #fdebf3; }.message-channel.channel-tiktok { color: #374151; background: #edf0f2; }.message-channel.channel-telegram { color: #1781b9; background: #e5f5fc; }.message-channel.channel-email { color: #9b5b1a; background: #fff1dd; }.conversation-panel { min-height: 560px; display: flex; flex-direction: column; }.empty-conversation { align-items: center; justify-content: center; }.chat-head { min-height: 72px; padding: 13px 15px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid #e9edf0; }.chat-head h2 { margin: 0; font-size: 13px; }.chat-head p { margin: 4px 0 0; color: #8290a0; font-size: 10px; }.chat-head > div:nth-child(2) { margin-right: auto; }.chat-context { padding: 7px 13px; display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid #edf0f2; }.chat-context span { padding: 4px 6px; color: #637184; border-radius: 5px; background: #f2f5f6; font-size: 9px; }.chat-context .message-channel { color: #087b44; background: #e8f7ee; }.chat-context .message-channel.channel-wa_cloud { color: #1674b0; background: #e7f3fc; }.chat-context .message-channel.channel-wa_device { color: #9a6519; background: #fff1dc; }.chat-context .message-channel.channel-messenger { color: #6a4ab7; background: #f0ebff; }.chat-context .message-channel.channel-instagram { color: #b04473; background: #fdebf3; }.chat-context .message-channel.channel-tiktok { color: #374151; background: #edf0f2; }.chat-context .message-channel.channel-telegram { color: #1781b9; background: #e5f5fc; }.chat-context .message-channel.channel-email { color: #9b5b1a; background: #fff1dd; }.message-thread { min-height: 338px; flex: 1; padding: 17px; display: flex; flex-direction: column; gap: 10px; background: #fbfdfc; }.message { max-width: 80%; padding: 9px 10px; border-radius: 11px; }.message p { margin: 0; font-size: 11px; line-height: 1.45; }.message small { display: block; margin-top: 4px; color: #8c96a3; font-size: 8.5px; }.contact-message { align-self: flex-start; border-bottom-left-radius: 3px; background: #fff; border: 1px solid #e7ebed; }.agent-message { align-self: flex-end; border-bottom-right-radius: 3px; color: #165e3c; background: #e6f7ed; }.reply-form { padding: 11px; display: flex; gap: 8px; border-top: 1px solid #e9edf0; }.reply-form input { min-width: 0; height: 39px; padding: 0 10px; flex: 1; outline: none; border: 1px solid #dfe5e7; border-radius: 8px; font-size: 11px; }.reply-form input:focus { border-color: #6ebc91; }.reply-form .button { min-height: 39px; }.contact-context { align-self: start; }.contact-context dl { margin: 0; padding: 5px 14px 14px; }.contact-context dl > div { padding: 9px 0; display: grid; gap: 4px; border-bottom: 1px solid #edf0f2; }.contact-context dt { color: #8b96a4; font-size: 9px; }.contact-context dd { margin: 0; color: #425066; font-size: 10.5px; }
.ai-page { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(260px,.6fr); gap: 18px; }.ai-main { min-height: 475px; padding: 20px; }.ai-main .copilot-intro { padding: 25px 10px 20px; }.ai-main .copilot-actions { max-width: 540px; margin: 0 auto; }.persistent { display: flex !important; margin: 14px auto 0; max-width: 540px; }.ai-guardrails ul { margin: 0; padding: 0 18px 16px; list-style: none; display: grid; gap: 11px; }.ai-guardrails li { display: flex; align-items: flex-start; gap: 8px; color: #5e6b7c; font-size: 11px; line-height: 1.4; }.ai-guardrails li svg { flex: 0 0 auto; width: 16px; color: var(--green); }.analytics-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }.analytics-grid .analytics-panel { grid-column: 1 / -1; }.analytics-bars { padding: 3px 19px 20px; display: grid; gap: 13px; }.analytics-bars > div { display: grid; grid-template-columns: 155px 55px 1fr; align-items: center; gap: 10px; font-size: 11px; }.analytics-bars span { color: #667386; }.analytics-bars b { font-size: 11px; }.analytics-bars i { height: 8px; border-radius: 10px; background: linear-gradient(90deg, #0b9955, #75cf99); }.settings-grid { grid-template-columns: 1.1fr .9fr; }.settings-grid .audit-panel { grid-column: 1 / -1; }.setting-list { border-top: 1px solid #edf0f2; }.setting-row { width: 100%; padding: 11px 17px; display: flex; align-items: center; gap: 9px; text-align: left; border-bottom: 1px solid #edf0f2; }.setting-row:hover { background: #f5faf7; }.setting-row > div { flex: 1; display: grid; gap: 3px; }.setting-row strong { font-size: 11px; }.setting-row small { color: #8290a0; font-size: 9.5px; }.setting-row > svg { width: 15px; color: #8c99a7; }.role-summary { padding: 0 17px 15px; display: flex; align-items: center; gap: 9px; }.role-summary > div { flex: 1; }.role-summary strong { font-size: 11px; }.role-summary p { margin: 3px 0 0; color: #8793a2; font-size: 9.5px; }.local-note { margin: 0 17px 17px; padding: 10px; color: #697a70; border-radius: 8px; background: #f0f8f3; font-size: 10px; line-height: 1.5; }.audit-list { border-top: 1px solid #edf0f2; }.audit-list > div { padding: 10px 17px; display: flex; gap: 9px; border-bottom: 1px solid #edf0f2; }.audit-list > div > span { height: 23px; width: 23px; display: grid; place-items: center; color: var(--green); border-radius: 6px; background: #e9f7ee; }.audit-list svg { width: 14px; }.audit-list p { margin: 0; display: grid; gap: 3px; color: #516072; font-size: 10.5px; }.audit-list small { color: #919ba7; font-size: 9px; }
@media (max-width: 1120px) { .inbox-layout { grid-template-columns: minmax(220px,.7fr) minmax(380px,1.4fr); }.contact-context { display: none; }.workflow-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.analytics-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.journey-strip { align-items: flex-start; flex-direction: column; }.journey-strip ol { justify-content: flex-start; flex-wrap: wrap; }.journey-strip li { margin: 0 0 0 -1px; }.cost-breakdown { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 720px) { .workflow-grid, .template-grid, .settings-grid, .ai-page, .connection-grid { grid-template-columns: 1fr; }.data-table, .order-table, .outbox-list { overflow-x: auto; }.data-head, .data-row { min-width: 700px; }.order-head, .order-row { min-width: 680px; }.outbox-row { min-width: 690px; }.inbox-layout { grid-template-columns: 1fr; }.inbox-list-panel { min-height: auto; }.conversation-panel { min-height: 490px; }.analytics-grid { grid-template-columns: 1fr 1fr; }.analytics-grid .analytics-panel, .device-list-panel { grid-column: 1; }.campaign-table-wide { overflow-x: auto; }.campaign-table-wide .campaign-row { min-width: 720px; }.campaign-hub-tabs { overflow-x: auto; }.campaign-hub-tabs button { min-width: 174px; }.campaign-hub-heading { padding: 18px 14px 14px; align-items: flex-start; flex-direction: column; }.campaign-hub-heading .button { width: 100%; justify-content: center; }.campaign-hub-note { margin: 14px; }.chat-head .row-action { display: none; }.chat-head .status { margin-left: auto; }.message-thread { min-height: 260px; }.settings-grid .audit-panel { grid-column: 1; }.journey-strip { padding: 11px; }.journey-strip ol { gap: 4px; }.journey-strip li { margin: 0; border-radius: 5px !important; }.account-popover { left: 10px; bottom: 64px; width: min(275px,calc(100vw - 20px)); }.qr-panel { align-items: flex-start; flex-direction: column; }.qr-panel img { align-self: center; }.send-mode-tabs { overflow-x: auto; }.send-mode-tabs button { min-width: 190px; }.send-composer-heading, .send-composer { margin-left: 14px; margin-right: 14px; }.send-composer-heading { padding-left: 0; padding-right: 0; }.composer-grid { grid-template-columns: 1fr; }.composer-full { grid-column: 1; }.composer-footer { align-items: flex-start; flex-direction: column; }.composer-footer .button { width: 100%; justify-content: center; } }
.plan-panel { min-width: 0; }.plan-badge { align-self: center; padding: 5px 8px; color: #0b7441; border-radius: 6px; background: #e5f6eb; font-size: 10px; font-weight: 800; }.usage-grid { padding: 0 17px 16px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.usage-grid > div { padding: 10px; display: grid; gap: 4px; border: 1px solid #e6ece8; border-radius: 8px; background: #fbfdfc; }.usage-grid span { color: #778596; font-size: 9px; }.usage-grid strong { color: #253347; font-size: 11px; }
.connection-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }.connection-card { min-height: 325px; padding: 18px; display: flex; flex-direction: column; }.connection-heading { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; }.connection-heading h2 { margin: 0; font-size: 14px; }.connection-heading p { margin: 3px 0 0; color: #7c8997; font-size: 10px; line-height: 1.4; }.connection-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; }.connection-icon svg { width: 21px; }.connection-icon.cloud { color: #1678b8; background: #e8f4fd; }.connection-icon.device { color: #9a6318; background: #fff1dc; }.connection-detail { min-height: 30px; margin: 15px 0 12px; color: #526276; font-size: 11px; line-height: 1.45; }.connection-rules { margin: 0 0 16px; display: grid; gap: 9px; }.connection-rules > div { padding-top: 9px; border-top: 1px solid #edf0f2; display: grid; gap: 3px; }.connection-rules dt { color: #0a7944; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }.connection-rules dd { margin: 0; color: #69778a; font-size: 10px; line-height: 1.45; }.connection-card .button { margin-top: auto; align-self: start; }.gateway-warning, .gateway-ready { margin: 0 0 14px; padding: 8px; border-radius: 7px; font-size: 9.5px; line-height: 1.45; }.gateway-warning { color: #8e601b; background: #fff4e2; }.gateway-ready { color: #1b7448; background: #e9f7ee; }.device-list-panel { grid-column: 1 / -1; }.device-list { border-top: 1px solid #edf0f2; }.device-row { min-height: 65px; padding: 11px 17px; display: grid; grid-template-columns: 10px minmax(0,1fr) auto; align-items: center; gap: 10px; border-bottom: 1px solid #edf0f2; }.device-row > div:nth-child(2) { display: grid; gap: 4px; }.device-row strong { font-size: 11px; }.device-row small { color: #8692a0; font-size: 9.5px; }.device-dot { width: 8px; height: 8px; border-radius: 50%; background: #b3bdc4; }.device-dot.connected { background: #0c9956; }.device-dot.qr_ready, .device-dot.connecting { background: #dd961e; }.device-dot.paused, .device-dot.disconnected { background: #8995a1; }.device-actions { display: flex; gap: 7px; }.qr-panel { margin: 14px 17px 17px; padding: 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid #cde8d7; border-radius: 10px; background: #f3fbf6; }.qr-panel strong { font-size: 11px; }.qr-panel p { max-width: 370px; margin: 5px 0 0; color: #607469; font-size: 9.5px; line-height: 1.45; }.qr-panel img { width: 148px; height: 148px; padding: 7px; border-radius: 8px; background: #fff; object-fit: contain; }

.send-workbench { padding: 0; overflow: hidden; }.send-mode-tabs { display: flex; gap: 5px; padding: 14px 16px 0; border-bottom: 1px solid #e7ece9; background: #fbfcfc; }.send-mode-tabs button { min-width: 220px; padding: 12px 14px; display: inline-flex; align-items: center; gap: 8px; border-radius: 9px 9px 0 0; color: #677489; font-size: 12px; font-weight: 750; text-align: left; }.send-mode-tabs button svg { width: 17px; }.send-mode-tabs button small { margin-left: auto; color: #8e99a7; font-size: 9px; font-weight: 600; }.send-mode-tabs button:hover { background: #f0f7f3; color: #087b44; }.send-mode-tabs button.is-active { color: #087b44; background: #eaf8ef; box-shadow: inset 0 -3px 0 #0b9250; }.send-composer-heading { padding: 24px 25px 18px; display: flex; align-items: center; gap: 12px; }.send-composer-heading h2 { margin: 0; font-size: 18px; letter-spacing: -.35px; }.send-composer-heading p { margin: 4px 0 0; color: #728094; font-size: 11.5px; }.send-composer { margin: 0 25px 25px; padding: 20px; border: 1px solid #e1e8e4; border-radius: 12px; background: #fcfefd; }.composer-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 16px; }.composer-grid label { display: grid; gap: 6px; color: #536074; font-size: 11px; font-weight: 750; }.composer-grid input, .composer-grid select, .composer-grid textarea { width: 100%; min-height: 42px; padding: 0 11px; border: 1px solid #dce4e1; border-radius: 8px; outline: none; color: var(--ink); background: #fff; font: inherit; }.composer-grid textarea { min-height: 118px; padding: 10px 11px; resize: vertical; }.composer-grid input:focus, .composer-grid select:focus, .composer-grid textarea:focus { border-color: #58b882; box-shadow: 0 0 0 3px rgba(23,156,83,.12); }.composer-grid .check-label { align-self: end; min-height: 42px; }.composer-full { grid-column: 1 / -1; }.composer-footer { margin-top: 18px; padding-top: 15px; border-top: 1px solid #e9efeb; display: flex; align-items: center; justify-content: space-between; gap: 18px; }.composer-footer small { max-width: 610px; color: #738094; font-size: 10.5px; line-height: 1.5; }.composer-empty { margin: 0 25px 25px; padding: 27px; border: 1px dashed #cbd9d0; border-radius: 12px; background: #f9fcfa; }.composer-empty strong { font-size: 13px; }.composer-empty p { max-width: 520px; margin: 6px 0 16px; color: #728094; font-size: 11.5px; line-height: 1.5; }

.connection-icon.email { color: #9a6318; background: #fff1dc; }.cloud-template-library { margin: 0 25px 16px; padding: 16px; border: 1px solid #dce9e1; border-radius: 12px; background: #fbfdfc; }.template-library-heading { margin-bottom: 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.template-library-heading strong { font-size: 12px; }.template-library-heading p { margin: 4px 0 0; color: #728094; font-size: 10px; }.template-library-heading .text-button { flex: 0 0 auto; font-size: 10px; }.cloud-template-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }.cloud-template-card { min-height: 125px; padding: 12px; display: grid; align-content: start; gap: 7px; color: #556579; border: 1px solid #e0e8e4; border-radius: 9px; background: #fff; text-align: left; }.cloud-template-card:hover { border-color: #9ed2b1; background: #f7fcf8; }.cloud-template-card.is-selected { color: #1a5f3e; border-color: #82c99c; background: #edf9f1; box-shadow: inset 0 0 0 1px rgba(13,139,78,.08); }.cloud-template-card > span { width: max-content; padding: 3px 5px; color: #4c738f; border-radius: 5px; background: #eaf4ff; font-size: 8px; font-weight: 800; }.cloud-template-card strong { color: var(--ink); font-size: 11px; }.cloud-template-card p { margin: 0; color: #748194; font-size: 9.5px; line-height: 1.45; }.cloud-template-card small { margin-top: auto; color: #0a7a44; font-size: 8.5px; font-weight: 750; }.composer-preview { margin-top: 15px; padding: 12px; display: grid; gap: 4px; border: 1px solid #dbe8e0; border-radius: 9px; background: #f4fbf6; }.composer-preview span { color: #738594; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }.composer-preview strong { font-size: 11px; }.composer-preview p { margin: 0; color: #566d60; font-size: 10px; line-height: 1.45; }.email-composer { border-color: #d6e4ec; background: #f9fcfe; }
.composer-readiness { margin: 0 0 16px; padding: 12px 13px; color: #815d23; border: 1px solid #f0dfbd; border-radius: 9px; background: #fff8ea; }.composer-readiness.is-ready { color: #1b7045; border-color: #cce9d7; background: #effaf3; }.composer-readiness strong { display: block; font-size: 11px; }.composer-readiness p { max-width: 730px; margin: 4px 0 0; color: inherit; font-size: 10px; line-height: 1.5; opacity: .82; }.composer-grid input:disabled, .composer-grid select:disabled, .composer-grid textarea:disabled { cursor: not-allowed; color: #8b98a6; border-color: #e2e7e7; background: #f3f6f6; }.composer-contact-card { margin-top: 15px; padding: 12px; display: grid; grid-template-columns: minmax(150px,.85fr) minmax(220px,1.15fr) minmax(135px,.7fr); align-items: start; gap: 14px; border: 1px solid #dce8e2; border-radius: 9px; background: #f8fcf9; }.composer-contact-card > div:first-child { display: grid; gap: 4px; }.composer-contact-card > div:first-child > span { color: #63806e; font-size: 8px; font-weight: 800; letter-spacing: .05em; }.composer-contact-card strong { color: #24354a; font-size: 11px; }.composer-contact-card p { margin: 0; color: #647689; font-size: 10px; }.composer-contact-card dl { margin: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.composer-contact-card dt { color: #8290a0; font-size: 8.5px; }.composer-contact-card dd { margin: 3px 0 0; color: #4f6174; font-size: 9.5px; font-weight: 700; }.composer-contact-tags { display: flex; align-items: flex-start; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }.composer-contact-tags i { padding: 3px 5px; color: #557086; border-radius: 5px; background: #e9f1f4; font-size: 8.5px; font-style: normal; font-weight: 700; }.composer-contact-card.is-empty { display: block; border-style: dashed; background: #fbfcfc; }.composer-contact-card.is-empty p { margin-top: 4px; }
.composer-confirmation { min-height: 42px; margin-top: 15px; display: flex; align-items: center; gap: 8px; color: #536074; font-size: 10.5px; font-weight: 750; }.composer-attachments { margin-top: 15px; padding: 13px; border: 1px dashed #cadbd1; border-radius: 10px; background: #fbfdfc; }.attachment-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.attachment-heading > div { display: grid; gap: 4px; }.attachment-heading strong { color: #35465a; font-size: 11px; }.attachment-heading small { max-width: 510px; color: #78879a; font-size: 9.5px; line-height: 1.4; }.attachment-picker { min-height: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; color: #087b44; border: 1px solid #b8d9c5; border-radius: 7px; background: #fff; cursor: pointer; font-size: 9.5px; font-weight: 800; }.attachment-picker:hover { color: #056b3b; border-color: #79bd94; background: #f0faf3; }.attachment-picker svg { width: 14px; }.attachment-picker input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }.attachment-empty { margin: 12px 0 0; color: #8995a2; font-size: 10px; }.attachment-list { margin-top: 12px; display: grid; gap: 7px; }.attachment-item { min-height: 52px; padding: 7px 8px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 9px; border: 1px solid #e0e9e4; border-radius: 8px; background: #fff; }.attachment-item img, .attachment-file-icon { width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; border-radius: 6px; background: #eef6f1; object-fit: cover; }.attachment-file-icon { color: #688195; }.attachment-file-icon svg { width: 18px; }.attachment-item > div { min-width: 0; display: grid; gap: 3px; }.attachment-item strong { overflow: hidden; color: #435469; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.attachment-item small { overflow: hidden; color: #8794a3; font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }.attachment-remove { width: 28px; height: 28px; display: grid; place-items: center; color: #8a98a5; border-radius: 6px; }.attachment-remove:hover { color: #b64747; background: #fff0f0; }.attachment-remove svg { width: 15px; }.email-composer .composer-attachments { border-color: #cbdde8; background: #fbfdfe; }.email-composer .attachment-picker { color: #2b6d98; border-color: #bed6e6; }.email-composer .attachment-picker:hover { color: #205d85; border-color: #82b9d7; background: #f0f8fc; }
.personalization-tools { margin-top: 15px; padding: 13px; border: 1px solid #d4e6dc; border-radius: 10px; background: #f7fcf8; }.personalization-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }.personalization-heading > div { display: grid; gap: 4px; }.personalization-heading strong { color: #284859; font-size: 11px; }.personalization-heading small { color: #728294; font-size: 9.5px; }.personalization-heading > span { padding: 4px 6px; color: #197246; border-radius: 5px; background: #e4f6eb; font-size: 8.5px; font-weight: 800; }.personalization-token-list { margin-top: 11px; display: flex; flex-wrap: wrap; gap: 6px; }.personalization-token-list button { min-height: 29px; padding: 4px 7px; display: inline-flex; align-items: center; gap: 5px; color: #3d6172; border: 1px solid #d4e3dc; border-radius: 6px; background: #fff; font-size: 8.5px; }.personalization-token-list button:hover { color: #087b44; border-color: #8ec8a4; background: #effaf3; }.personalization-token-list code { color: #087b44; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8.5px; font-weight: 800; }.personalization-token-list small { color: inherit; font-size: 8.5px; }.personalization-preview { min-height: 42px; margin: 11px 0 0; padding: 9px 10px; color: #4a6256; border-radius: 7px; background: #eaf6ee; font-size: 10px; line-height: 1.5; white-space: pre-wrap; }.email-composer .personalization-tools { border-color: #d4e1eb; background: #f8fbfd; }.email-composer .personalization-token-list button:hover { color: #236b98; border-color: #9fc6df; background: #eef8fd; }.email-composer .personalization-token-list code { color: #236b98; }.email-composer .personalization-heading > span { color: #246b96; background: #e7f3fb; }.email-composer .personalization-preview { color: #486474; background: #ecf6fb; }

@media (max-width: 720px) { .cloud-template-library { margin-left: 14px; margin-right: 14px; }.cloud-template-grid { grid-template-columns: 1fr; }.template-library-heading { align-items: flex-start; flex-direction: column; }.composer-contact-card { grid-template-columns: 1fr; gap: 10px; }.composer-contact-tags { justify-content: flex-start; }.attachment-heading, .personalization-heading { align-items: flex-start; flex-direction: column; }.attachment-picker { width: 100%; } }

.outbox-list { border-top: 1px solid #edf0f2; }.outbox-row { min-height: 64px; padding: 10px 17px; display: grid; grid-template-columns: 110px minmax(125px,.95fr) minmax(135px,1fr) minmax(180px,1.5fr) auto; align-items: center; gap: 14px; border-bottom: 1px solid #edf0f2; }.outbox-row > small, .outbox-row > div small { color: #8190a0; font-size: 9.5px; }.outbox-row > div { display: grid; gap: 3px; min-width: 0; }.outbox-row strong { font-size: 10.5px; }.outbox-row p { overflow: hidden; margin: 0; color: #65758a; font-size: 10.5px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }.outbox-head { min-height: 39px; color: #8794a5; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; background: #fbfcfc; }

.inbox-tools { padding: 10px 12px 11px; display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; border-bottom: 1px solid #e9edf0; background: #fcfdfd; }.inbox-search-form { position: relative; min-width: 0; }.inbox-search-form input { width: 100%; height: 38px; min-width: 0; padding: 0 35px 0 10px; color: var(--ink); border: 1px solid #dce5e1; border-radius: 8px; outline: none; background: #fff; font: inherit; font-size: 10px; }.inbox-search-form input:focus { border-color: #58b882; box-shadow: 0 0 0 3px rgba(23,156,83,.12); }.inbox-search-form button { position: absolute; top: 0; right: 3px; width: 31px; height: 38px; display: grid; place-items: center; color: #718095; border-radius: 7px; }.inbox-search-form button:hover { color: #087b44; background: #eef8f2; }.inbox-search-form button svg { width: 15px; }.inbox-search-form .clear-inbox-search { right: 29px; width: 25px; font-size: 17px; line-height: 1; }.inbox-search-form:has(.clear-inbox-search) input { padding-right: 57px; }.inbox-channel-select { min-width: 0; display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 7px; color: #748295; font-size: 8.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }.inbox-channel-select select { width: 100%; height: 34px; min-width: 0; padding: 0 25px 0 9px; color: #334358; border: 1px solid #dce5e1; border-radius: 8px; outline: none; background: #fff; font: inherit; font-size: 10px; font-weight: 700; }.inbox-channel-select select:focus { border-color: #58b882; box-shadow: 0 0 0 3px rgba(23,156,83,.12); }

/* Cloud API template editor */
.template-builder { background: #f8fbf9; }.template-builder-top { padding: 18px 19px 16px; display: grid; gap: 13px; border-bottom: 1px solid #e7ece9; background: #fff; }.template-builder-top > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }.template-builder-top h2 { margin: 0; color: var(--ink); font-size: 19px; letter-spacing: -.45px; }.template-builder-top .eyebrow { margin-bottom: 3px; color: #0b7c46; font-size: 9px; }.template-builder-top p:last-child { margin: 4px 0 0; color: #758395; font-size: 10.5px; }.template-builder-state { padding: 5px 7px; color: #647487; border-radius: 6px; background: #eef2f4; font-size: 9px; font-weight: 800; white-space: nowrap; }.template-builder-form { padding: 18px; }.template-builder-layout { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(250px,.62fr); align-items: start; gap: 17px; }.template-builder-editor { display: grid; gap: 14px; }.template-builder-card { padding: 15px; border: 1px solid #e2e9e5; border-radius: 11px; background: #fff; }.template-builder-card-heading { margin-bottom: 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.template-builder-card-heading h3 { margin: 0; color: #2d4055; font-size: 12.5px; }.template-builder-card-heading p { margin: 4px 0 0; color: #7b8898; font-size: 9.5px; line-height: 1.45; }.template-builder-card code, .template-auth-note code { padding: 1px 4px; color: #087b44; border-radius: 4px; background: #eaf7ee; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 800; }.template-identity-grid { display: grid; grid-template-columns: minmax(150px,1.15fr) minmax(135px,.85fr) minmax(135px,.85fr); gap: 11px; }.template-builder-card label { min-width: 0; display: grid; gap: 6px; color: #526276; font-size: 10px; font-weight: 750; }.template-builder-card input, .template-builder-card select, .template-builder-card textarea { width: 100%; min-width: 0; min-height: 39px; padding: 0 10px; outline: none; color: var(--ink); border: 1px solid #dce5e1; border-radius: 8px; background: #fff; font: inherit; font-size: 10.5px; }.template-builder-card textarea { min-height: 145px; padding: 10px; resize: vertical; line-height: 1.5; }.template-builder-card input:focus, .template-builder-card select:focus, .template-builder-card textarea:focus { border-color: #58b882; box-shadow: 0 0 0 3px rgba(23,156,83,.12); }.template-category-guidance { margin: 12px 0 0; padding: 9px 10px; display: flex; align-items: flex-start; gap: 7px; color: #5d7465; border-radius: 8px; background: #f0f9f3; font-size: 9.5px; line-height: 1.45; }.template-category-guidance strong { color: #0a7944; white-space: nowrap; }.template-toggle-row { padding: 12px 0; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid #edf1ef; }.template-toggle-row:first-of-type { border-top: 0; padding-top: 0; }.template-toggle-row strong { color: #3a4b60; font-size: 10.5px; }.template-toggle-row p { margin: 3px 0 0; color: #84909e; font-size: 9px; line-height: 1.4; }.builder-switch { position: relative; flex: 0 0 auto; cursor: pointer; }.builder-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }.builder-switch span { width: 37px; height: 21px; display: block; position: relative; border-radius: 999px; background: #d8dfe2; transition: .2s; }.builder-switch span:after { content: ''; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(20,35,45,.22); transition: .2s; }.builder-switch input:checked + span { background: var(--green); }.builder-switch input:checked + span:after { transform: translateX(16px); }.template-optional-fields { margin: 0 0 12px; padding: 11px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; border: 1px solid #e3ede6; border-radius: 9px; background: #fbfdfc; }.template-optional-fields > label:only-child { grid-column: 1 / -1; }.template-body-field { margin-top: 2px; }.template-body-field > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.template-body-field button { color: #087b44; font-size: 9px; font-weight: 800; }.template-body-field button:hover { text-decoration: underline; }.template-body-field small { color: #8b97a3; font-size: 8.5px; font-weight: 650; }.template-cta-fields { grid-template-columns: repeat(3,minmax(0,1fr)); }.template-auth-card { border-color: #dce5f2; background: #fbfdff; }.template-auth-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }.template-auth-grid .check-label { grid-column: 1 / -1; min-height: 32px; }.template-auth-note { margin: 12px 0 0; padding: 9px 10px; color: #536d88; border-radius: 8px; background: #edf5fb; font-size: 9.5px; line-height: 1.45; }.template-phone-preview { min-height: 455px; overflow: hidden; position: sticky; top: 16px; display: flex; flex-direction: column; border: 1px solid #dce7e1; border-radius: 22px; background: #edf0e7; box-shadow: 0 12px 26px rgba(34,57,45,.09); }.template-phone-top { min-height: 32px; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; color: #fff; background: #087a46; font-size: 8px; font-weight: 800; }.template-phone-contact { min-height: 52px; padding: 8px 12px; display: flex; align-items: center; gap: 8px; color: #fff; background: #0a8150; }.template-phone-contact > span { width: 30px; height: 30px; display: grid; place-items: center; color: #0c7a45; border-radius: 50%; background: #d6f2df; font-size: 9px; font-weight: 900; }.template-phone-contact > div { display: grid; gap: 2px; }.template-phone-contact strong { font-size: 10px; }.template-phone-contact small { color: #c8e8d5; font-size: 8px; }.template-phone-chat { min-height: 314px; padding: 16px 12px; display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 0; background: linear-gradient(135deg,rgba(244,241,225,.86),rgba(234,239,225,.96)), repeating-linear-gradient(45deg,transparent 0,transparent 17px,rgba(83,120,86,.025) 17px,rgba(83,120,86,.025) 18px); }.template-preview-bubble { max-width: 94%; padding: 9px 10px 7px; position: relative; border-radius: 8px 8px 8px 2px; background: #fff; box-shadow: 0 1px 2px rgba(20,41,30,.12); }.template-preview-bubble strong { display: block; margin-bottom: 6px; color: #314152; font-size: 10px; }.template-preview-bubble p { margin: 0; color: #3d4a59; font-size: 10px; line-height: 1.48; white-space: pre-wrap; }.template-preview-bubble small { display: block; margin-top: 7px; color: #7b8994; font-size: 8px; }.template-preview-bubble time { display: block; margin-top: 7px; color: #9ca6ae; font-size: 7.5px; text-align: right; }.template-preview-cta { width: min(94%,210px); min-height: 31px; padding: 6px; color: #087a9d; border-top: 1px solid #edf0f1; border-radius: 0 0 8px 8px; background: #fff; font-size: 9px; font-weight: 800; text-align: center; }.template-preview-cta.copy-code { margin-top: 4px; color: #087a9d; border-radius: 7px; }.template-phone-compose { min-height: 48px; padding: 0 11px; display: flex; align-items: center; gap: 8px; color: #2b86b1; background: #f9fbfb; font-size: 18px; }.template-phone-compose span { flex: 1; height: 27px; padding: 7px 9px; color: #a0abb1; border-radius: 999px; background: #fff; font-size: 8.5px; }.template-phone-compose b { color: #3e98be; font-size: 15px; }.template-builder-actions { margin-top: 17px; padding-top: 15px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid #dfe8e2; }.template-builder-actions > small { max-width: 570px; color: #748294; font-size: 9.5px; line-height: 1.5; }.template-builder-actions > div { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }.template-builder-actions .button { white-space: nowrap; }

.contacts-panel-actions { display: flex; align-items: center; gap: 8px; }.contacts-panel-actions .button { min-height: 36px; padding: 0 11px; font-size: 10.5px; }.contacts-toolbar { padding: 12px 18px; display: grid; grid-template-columns: minmax(220px,1.45fr) repeat(3,minmax(130px,.72fr)); gap: 9px; border-top: 1px solid #edf0f2; border-bottom: 1px solid #edf0f2; background: #fbfdfc; }.contacts-toolbar > label { min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 6px; color: #778596; font-size: 9px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }.contacts-toolbar select { width: 100%; min-width: 0; height: 35px; padding: 0 25px 0 8px; color: #425269; border: 1px solid #dce5e1; border-radius: 7px; outline: none; background: #fff; font: inherit; font-size: 10px; font-weight: 700; }.contacts-toolbar select:focus, .contacts-search-form input:focus { border-color: #58b882; box-shadow: 0 0 0 3px rgba(23,156,83,.12); }.contacts-search-form { position: relative; min-width: 0; }.contacts-search-form input { width: 100%; height: 35px; min-width: 0; padding: 0 57px 0 10px; color: var(--ink); border: 1px solid #dce5e1; border-radius: 7px; outline: none; background: #fff; font: inherit; font-size: 10px; }.contacts-search-form button { position: absolute; top: 0; right: 3px; width: 31px; height: 35px; display: grid; place-items: center; color: #718095; border-radius: 6px; }.contacts-search-form button:hover { color: #087b44; background: #eef8f2; }.contacts-search-form button svg { width: 15px; }.contacts-search-form .clear-contact-search { right: 28px; width: 25px; font-size: 17px; line-height: 1; }.contacts-table .data-head, .contacts-table .data-row { grid-template-columns: minmax(210px,1.65fr) 50px 84px 84px minmax(86px,.7fr) minmax(88px,.7fr) minmax(145px,1fr); gap: 10px; }.contacts-table .data-row { min-height: 68px; }.contacts-table .row-action { width: max-content; margin-top: 2px; }.contact-import-view { display: grid; }.contact-import-panel { overflow: hidden; }.contact-import-heading { padding-bottom: 14px; }.contact-import-heading h2 { margin-top: 8px; }.back-link { padding: 0; color: #087b44; font-size: 10px; font-weight: 800; }.back-link:hover { color: #056c3b; text-decoration: underline; }.contact-import-form { border-top: 1px solid #edf0f2; }.contact-upload-card { margin: 18px; padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border: 1px dashed #aacdb8; border-radius: 11px; background: #f8fcf9; }.contact-upload-card > div { min-width: 0; display: flex; align-items: center; gap: 11px; }.contact-upload-card .connection-icon { flex: 0 0 auto; }.contact-upload-card strong { display: block; color: #314459; font-size: 12px; }.contact-upload-card p { max-width: 530px; margin: 4px 0 0; color: #748294; font-size: 10px; line-height: 1.45; }.contact-csv-picker { min-height: 36px; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; color: #087b44; border: 1px solid #a9d6ba; border-radius: 8px; background: #fff; cursor: pointer; font-size: 10px; font-weight: 800; }.contact-csv-picker:hover { color: #056c3b; border-color: #6dbc8b; background: #eef9f2; }.contact-csv-picker svg { width: 15px; }.contact-csv-picker input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }.contact-column-guide { margin: -6px 18px 18px; padding: 11px 13px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 11px; color: #647487; border-radius: 8px; background: #f2f6f4; font-size: 9.5px; line-height: 1.45; }.contact-column-guide strong { color: #3f5868; font-size: 10px; }.contact-column-guide .text-button { color: #087b44; font-size: 9.5px; font-weight: 800; white-space: nowrap; }.contact-import-file { margin: 0 18px 16px; padding: 11px 13px; display: flex; align-items: center; gap: 9px; border: 1px solid #d1eadb; border-radius: 9px; background: #effaf3; }.contact-import-file > span { width: 23px; height: 23px; display: grid; place-items: center; flex: 0 0 auto; color: #0c8148; border-radius: 7px; background: #d9f2e2; }.contact-import-file > span svg { width: 14px; }.contact-import-file > div { min-width: 0; flex: 1; display: grid; gap: 3px; }.contact-import-file strong { overflow: hidden; color: #315241; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }.contact-import-file p { margin: 0; color: #628171; font-size: 9.5px; }.contact-import-file .text-button { color: #087b44; font-size: 9.5px; font-weight: 800; }.contact-import-errors { margin: 0 18px 16px; padding: 10px 12px; color: #8a5d19; border: 1px solid #f0dfbc; border-radius: 8px; background: #fff7e8; }.contact-import-errors strong { font-size: 10px; }.contact-import-errors p { margin: 4px 0 0; font-size: 9.5px; line-height: 1.45; }.contact-import-defaults { margin: 0 18px 18px; padding: 14px; display: grid; grid-template-columns: minmax(175px,1.25fr) repeat(5,minmax(105px,.72fr)); align-items: end; gap: 10px; border: 1px solid #e2ebe5; border-radius: 10px; background: #fcfefd; }.contact-import-defaults > div { display: grid; gap: 4px; align-self: center; }.contact-import-defaults h3 { margin: 0; color: #35465a; font-size: 11px; }.contact-import-defaults p { margin: 0; color: #7a8899; font-size: 9px; line-height: 1.4; }.contact-import-defaults label { min-width: 0; display: grid; gap: 5px; color: #667589; font-size: 8.5px; font-weight: 800; }.contact-import-defaults input, .contact-import-defaults select { width: 100%; min-width: 0; min-height: 34px; padding: 0 8px; color: #405167; border: 1px solid #dce5e1; border-radius: 7px; outline: none; background: #fff; font: inherit; font-size: 9.5px; }.contact-import-defaults input:focus, .contact-import-defaults select:focus { border-color: #58b882; box-shadow: 0 0 0 3px rgba(23,156,83,.12); }.contact-import-preview { margin: 0 18px 18px; overflow: hidden; border: 1px solid #e1e9e5; border-radius: 10px; }.contact-import-preview-heading { padding: 12px 13px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; background: #fbfdfc; }.contact-import-preview-heading h3 { margin: 0; color: #35465a; font-size: 11px; }.contact-import-preview-heading p { margin: 4px 0 0; color: #7c8998; font-size: 9.5px; }.contact-import-preview-heading > span { padding: 4px 6px; color: #0b7743; border-radius: 5px; background: #e5f6eb; font-size: 8.5px; font-weight: 800; }.contact-import-table > div { min-height: 41px; padding: 8px 13px; display: grid; grid-template-columns: minmax(150px,1.35fr) minmax(130px,1.05fr) minmax(100px,.8fr) minmax(100px,.8fr) minmax(135px,1fr); align-items: center; gap: 9px; border-top: 1px solid #edf1ef; color: #5d6d80; font-size: 9.5px; }.contact-import-table > div:first-child { min-height: 34px; color: #8794a3; background: #f7faf8; font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .035em; }.contact-import-table strong { overflow: hidden; color: #34465b; text-overflow: ellipsis; white-space: nowrap; }.contact-import-empty { margin: 0 18px 18px; padding: 26px 16px; border: 1px dashed #d0dcd4; border-radius: 10px; color: #7d8998; text-align: center; }.contact-import-empty strong { display: block; color: #566779; font-size: 11px; }.contact-import-empty p { max-width: 470px; margin: 5px auto 0; font-size: 9.5px; line-height: 1.45; }.contact-import-footer { padding: 14px 18px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; border-top: 1px solid #e7eeea; background: #fbfdfc; }.contact-import-footer .button { min-height: 37px; font-size: 10.5px; }.contact-import-footer .button:disabled { cursor: not-allowed; opacity: .5; box-shadow: none; }
@media (max-width: 1060px) { .contacts-toolbar { grid-template-columns: minmax(210px,1fr) repeat(2,minmax(140px,.7fr)); }.contacts-toolbar > label:last-child { grid-column: 2 / -1; }.contact-import-defaults { grid-template-columns: repeat(3,minmax(0,1fr)); }.contact-import-defaults > div { grid-column: 1 / -1; }.contact-import-table { overflow-x: auto; }.contact-import-table > div { min-width: 670px; } }
@media (max-width: 720px) { .contacts-panel .panel-heading, .contact-upload-card { align-items: flex-start; flex-direction: column; }.contacts-panel-actions { width: 100%; }.contacts-panel-actions .button { flex: 1; justify-content: center; }.contacts-toolbar { padding: 12px 14px; grid-template-columns: 1fr; }.contacts-toolbar > label, .contacts-toolbar > label:last-child { grid-column: auto; grid-template-columns: 58px minmax(0,1fr); }.contacts-table .data-head, .contacts-table .data-row { min-width: 925px; }.contact-import-heading { padding-left: 14px; padding-right: 14px; }.contact-upload-card, .contact-column-guide, .contact-import-file, .contact-import-errors, .contact-import-defaults, .contact-import-preview, .contact-import-empty { margin-left: 14px; margin-right: 14px; }.contact-column-guide { grid-template-columns: 1fr; gap: 4px; }.contact-import-defaults { grid-template-columns: 1fr; }.contact-import-defaults > div { grid-column: auto; }.contact-import-footer { padding-left: 14px; padding-right: 14px; }.contact-import-footer .button { flex: 1; justify-content: center; } }

@media (max-width: 1060px) { .template-builder-layout { grid-template-columns: 1fr; }.template-phone-preview { min-height: 365px; position: static; }.template-phone-chat { min-height: 230px; }.template-builder-actions { align-items: flex-start; flex-direction: column; }.template-builder-actions > div { width: 100%; justify-content: flex-start; } }
@media (max-width: 720px) { .template-builder-top, .template-builder-form { padding-left: 14px; padding-right: 14px; }.template-builder-top > div { align-items: flex-start; flex-direction: column; }.template-identity-grid, .template-optional-fields, .template-cta-fields, .template-auth-grid { grid-template-columns: 1fr; }.template-builder-actions > div { align-items: stretch; flex-direction: column; }.template-builder-actions .button { width: 100%; justify-content: center; }.template-phone-preview { min-height: 340px; }.template-phone-chat { min-height: 200px; } }

/* QR Device call-to-action composer */
.device-cta-builder { margin-top: 15px; padding: 14px; border: 1px solid #d5e7dc; border-radius: 10px; background: #f8fcf9; }.device-cta-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }.device-cta-heading > div { display: grid; gap: 4px; }.device-cta-heading strong { color: #284859; font-size: 11px; }.device-cta-heading strong em { margin-left: 4px; color: #7c8998; font-size: 8.5px; font-style: normal; font-weight: 700; }.device-cta-heading p { max-width: 620px; margin: 0; color: #778697; font-size: 9.5px; line-height: 1.45; }.device-cta-heading .button { min-height: 34px; padding: 0 10px; flex: 0 0 auto; font-size: 9.5px; }.device-cta-heading .button:disabled { cursor: not-allowed; opacity: .5; }.device-cta-list { margin-top: 12px; display: grid; gap: 9px; }.device-cta-row { min-width: 0; margin: 0; padding: 11px; display: grid; grid-template-columns: minmax(122px,.82fr) minmax(145px,1fr) minmax(185px,1.38fr) auto; align-items: end; gap: 9px; border: 1px solid #dfeae3; border-radius: 9px; background: #fff; }.device-cta-row legend { padding: 0 4px; color: #5e7382; font-size: 8.5px; font-weight: 800; }.device-cta-row label { min-width: 0; display: grid; gap: 5px; color: #617186; font-size: 8.5px; font-weight: 800; }.device-cta-row input, .device-cta-row select { width: 100%; min-width: 0; min-height: 34px; padding: 0 8px; outline: none; color: #34475b; border: 1px solid #dce5e1; border-radius: 7px; background: #fff; font: inherit; font-size: 9.5px; }.device-cta-row input:focus, .device-cta-row select:focus { border-color: #58b882; box-shadow: 0 0 0 3px rgba(23,156,83,.12); }.device-cta-row > small { grid-column: 1 / -1; color: #84919d; font-size: 8.5px; line-height: 1.35; }.device-cta-remove { min-height: 34px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; color: #7c6a6a; border: 1px solid #eadede; border-radius: 7px; background: #fff; font-size: 9px; font-weight: 750; white-space: nowrap; }.device-cta-remove:hover { color: #a74747; border-color: #e8bdbd; background: #fff7f7; }.device-cta-remove svg { width: 12px; }.device-cta-empty { margin-top: 12px; padding: 12px; color: #6f7f8e; border: 1px dashed #cbdad1; border-radius: 8px; background: #fff; }.device-cta-empty strong { display: block; color: #526579; font-size: 10px; }.device-cta-empty p { margin: 4px 0 0; font-size: 9.5px; line-height: 1.45; }.device-cta-preview { margin-top: 12px; padding: 11px; display: grid; grid-template-columns: minmax(180px,.75fr) minmax(0,1.25fr); align-items: center; gap: 12px; border-radius: 8px; background: #edf7f0; }.device-cta-preview > div:first-child { display: grid; gap: 3px; }.device-cta-preview strong { color: #34634b; font-size: 10px; }.device-cta-preview small { color: #6c8275; font-size: 8.5px; line-height: 1.4; }.device-cta-preview-empty { margin: 0; color: #72837a; font-size: 9.5px; line-height: 1.45; }.device-cta-preview-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }.device-cta-preview-actions > span { min-width: 104px; padding: 6px 8px; display: grid; gap: 2px; border: 1px solid #cfe5d7; border-radius: 7px; background: #fff; }.device-cta-preview-actions b { color: #688878; font-size: 7px; letter-spacing: .05em; }.device-cta-preview-actions strong { overflow: hidden; color: #0c7b45; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.device-cta-preview-actions small { overflow: hidden; color: #718294; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 980px) { .device-cta-row { grid-template-columns: repeat(2,minmax(0,1fr)); }.device-cta-remove { width: max-content; }.device-cta-preview { grid-template-columns: 1fr; }.device-cta-preview-actions { justify-content: flex-start; } }
@media (max-width: 720px) { .device-cta-heading { align-items: flex-start; flex-direction: column; }.device-cta-heading .button { width: 100%; justify-content: center; }.device-cta-row { grid-template-columns: 1fr; }.device-cta-remove { width: 100%; }.device-cta-preview-actions > span { min-width: min(100%,170px); } }

/* QR Device blast composer */
.device-send-shell { display: grid; gap: 0; }
.device-send-tabs { margin: 0 25px; display: flex; gap: 6px; border-bottom: 1px solid #e5ece7; }
.device-send-tabs button { min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px; color: #6b7b8e; border-bottom: 3px solid transparent; font-size: 10.5px; font-weight: 800; }
.device-send-tabs button svg { width: 15px; }
.device-send-tabs button small { color: #94a0ad; font-size: 8.5px; font-weight: 700; }
.device-send-tabs button:hover { color: #087b44; background: #f2faf5; }
.device-send-tabs button.is-active { color: #087b44; border-color: #0c9250; background: #edf9f1; }
.device-blast-composer { border-color: #cfe3d7; background: #fbfefd; }
.blast-section { padding: 16px 0; border-top: 1px solid #e8efea; }
.blast-section:first-of-type { padding-top: 0; border-top: 0; }
.blast-section-heading { margin-bottom: 13px; display: flex; align-items: flex-start; gap: 9px; }
.blast-section-heading > span { width: 23px; height: 23px; display: grid; place-items: center; flex: 0 0 auto; color: #087b44; border-radius: 50%; background: #e2f5e9; font-size: 10px; font-weight: 900; }
.blast-section-heading > div { display: grid; gap: 3px; }
.blast-section-heading strong { color: #2d4255; font-size: 11.5px; }
.blast-section-heading p { margin: 0; color: #78889a; font-size: 9.5px; line-height: 1.45; }
.blast-field-label { display: block; margin-bottom: 6px; color: #536074; font-size: 11px; font-weight: 750; }
.blast-device-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 8px; }
.blast-device-choice { min-height: 52px; padding: 9px 10px; display: grid; grid-template-columns: 16px 9px minmax(0,1fr); align-items: center; gap: 7px; color: #475b70; border: 1px solid #dbe7e0; border-radius: 8px; background: #fff; cursor: pointer; }
.blast-device-choice:hover { border-color: #9acdb0; background: #f7fcf8; }
.blast-device-choice input { width: 15px; height: 15px; accent-color: #0a874a; }
.blast-device-choice .device-dot { width: 7px; height: 7px; }
.blast-device-choice > span:last-child { min-width: 0; display: grid; gap: 3px; }
.blast-device-choice strong { overflow: hidden; color: #33485c; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.blast-device-choice small { overflow: hidden; color: #84919e; font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.blast-empty-choice { margin: 0; padding: 12px; color: #8794a2; border: 1px dashed #d1ded6; border-radius: 8px; background: #fbfdfc; font-size: 9.5px; }
.blast-allocation-note, .blast-csv-note { margin: 9px 0 0; color: #718194; font-size: 9px; line-height: 1.45; }
.blast-audience-switch { display: flex; gap: 6px; margin-bottom: 11px; }
.blast-audience-switch button { min-height: 32px; padding: 0 10px; color: #617286; border: 1px solid #dce7e1; border-radius: 7px; background: #fff; font-size: 9.5px; font-weight: 800; }
.blast-audience-switch button:hover { color: #087b44; border-color: #a2d3b4; background: #f4fbf6; }
.blast-audience-switch button.is-active { color: #087b44; border-color: #8ac9a3; background: #eaf8ef; }
.blast-audience-fields select[multiple] { height: 152px; padding: 6px; }
.blast-audience-fields label > small { color: #8390a0; font-size: 8.5px; font-weight: 600; }
.blast-filter-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.blast-filter-grid label { min-width: 0; display: grid; gap: 6px; color: #536074; font-size: 10px; font-weight: 750; }
.blast-filter-grid select { width: 100%; min-width: 0; min-height: 40px; padding: 0 9px; color: #405267; border: 1px solid #dce4e1; border-radius: 8px; background: #fff; font: inherit; font-size: 10px; }
.blast-filter-grid select:focus { outline: none; border-color: #58b882; box-shadow: 0 0 0 3px rgba(23,156,83,.12); }
.blast-audience-summary { margin-top: 12px; padding: 12px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)) auto; align-items: center; gap: 12px; border: 1px solid #d6e9dc; border-radius: 9px; background: #f3fbf6; }
.blast-audience-summary > div { min-width: 0; display: grid; gap: 3px; }
.blast-audience-summary span, .blast-review span { color: #6d8779; font-size: 8px; font-weight: 850; letter-spacing: .045em; }
.blast-audience-summary strong { color: #17663f; font-size: 12px; }
.blast-audience-summary p { margin: 0; color: #6e8176; font-size: 8.8px; line-height: 1.4; }
.blast-audience-summary .button { min-height: 33px; padding: 0 10px; font-size: 9px; white-space: nowrap; }
.blast-now-card { min-height: 42px; padding: 8px 10px; display: grid; align-content: center; gap: 3px; border: 1px solid #dce9e1; border-radius: 8px; background: #f7fbf8; }
.blast-now-card strong { color: #466454; font-size: 10px; }
.blast-now-card small { color: #7b8d82; font-size: 8.5px; }
.blast-review { margin-top: 15px; padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid #d1e6da; border-radius: 9px; background: #f1faf4; }
.blast-review > div:first-child { min-width: 0; display: grid; gap: 3px; }
.blast-review strong { color: #285b3e; font-size: 11px; }
.blast-review p { margin: 0; color: #6e8275; font-size: 9px; line-height: 1.4; }
.blast-review > div:last-child { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
.blast-review > div:last-child span { padding: 4px 6px; color: #557567; border-radius: 5px; background: #fff; font-size: 8.5px; letter-spacing: 0; }
.blast-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.blast-actions .button { min-height: 37px; font-size: 10px; white-space: nowrap; }
.device-blast-jobs { margin: 0 25px 25px; overflow: hidden; border: 1px solid #dce9e1; border-radius: 11px; background: #fbfdfc; }
.device-blast-jobs-heading { padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #e6eeea; }
.device-blast-jobs-heading > div { display: grid; gap: 3px; }
.device-blast-jobs-heading strong { color: #364c5c; font-size: 11px; }
.device-blast-jobs-heading small { color: #8190a0; font-size: 9px; }
.device-blast-jobs-heading .text-button { color: #087b44; font-size: 9px; font-weight: 800; }
.device-blast-job-list { display: grid; }
.device-blast-job-list article { min-height: 58px; padding: 9px 14px; display: grid; grid-template-columns: minmax(180px,1fr) auto minmax(125px,.7fr); align-items: center; gap: 12px; border-top: 1px solid #edf2ef; }
.device-blast-job-list article:first-child { border-top: 0; }
.device-blast-job-list article > div:first-child { min-width: 0; display: grid; gap: 3px; }
.device-blast-job-list strong { overflow: hidden; color: #3b5060; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.device-blast-job-list small { color: #84919f; font-size: 8.5px; }
.device-blast-progress { display: grid; gap: 4px; }
.device-blast-progress > span { height: 5px; display: block; overflow: hidden; border-radius: 999px; background: #e5eee8; }
.device-blast-progress > span i { height: 100%; display: block; border-radius: inherit; background: #16a15a; }
.device-blast-progress small { text-align: right; }
@media (max-width: 980px) { .blast-filter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.blast-audience-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }.blast-audience-summary .button { width: max-content; }.device-blast-job-list article { grid-template-columns: minmax(0,1fr) auto; }.device-blast-progress { grid-column: 1 / -1; }.device-blast-progress small { text-align: left; } }
@media (max-width: 720px) { .device-send-tabs { margin-left: 14px; margin-right: 14px; overflow-x: auto; }.device-send-tabs button { min-width: 175px; }.blast-filter-grid, .blast-audience-summary { grid-template-columns: 1fr; }.blast-audience-summary .button { width: 100%; justify-content: center; }.blast-review { align-items: flex-start; flex-direction: column; }.blast-review > div:last-child { justify-content: flex-start; }.blast-actions { width: 100%; align-items: stretch; flex-direction: column; }.blast-actions .button { width: 100%; justify-content: center; }.device-blast-jobs { margin-left: 14px; margin-right: 14px; }.device-blast-job-list article { grid-template-columns: 1fr; gap: 7px; }.device-blast-job-list .channel-status { width: max-content; }.device-blast-progress { grid-column: auto; } }

/* Electric blue + orange brand system: QR composer and blast controls */
.device-cta-builder,
.device-blast-composer,
.device-blast-jobs { border-color: #d4e6ff; background: #fcfdff; }
.device-cta-preview,
.blast-audience-summary,
.blast-review { border-color: #d4e6ff; background: #f4f9ff; }
.device-send-tabs,
.blast-section,
.device-blast-jobs-heading { border-color: #e6eef8; }
.device-send-tabs button:hover,
.blast-audience-switch button:hover { color: #7C3AED; border-color: #9bcaff; background: #f3f8ff; }
.device-send-tabs button.is-active,
.blast-audience-switch button.is-active { color: #6D28D9; border-color: #7C3AED; background: #eaf4ff; }
.blast-section-heading > span { color: #fff; background: var(--aurora); }
.blast-device-choice { border-color: #dce9f7; }
.blast-device-choice:hover { border-color: #9bcaff; background: #f7fbff; }
.blast-device-choice input { accent-color: #7C3AED; }
.blast-filter-grid select:focus,
.device-cta-row input:focus,
.device-cta-row select:focus { border-color: #75b2ff; box-shadow: 0 0 0 3px rgba(20, 121, 255, .14); }
.device-cta-preview strong,
.device-cta-preview-actions strong,
.blast-audience-summary strong,
.blast-review strong,
.device-blast-jobs-heading .text-button { color: #6D28D9; }
.device-blast-progress > span i { background: var(--aurora); }
.journey-strip { border-color: #d6e7ff; background: #f7fbff; }
.journey-strip li.is-done { color: #6D28D9; border-color: #9bcaff; background: #edf5ff; }
.analytics-bars i { background: #7C3AED; }

/* Solid violet, magenta, and yellow controls for QR Device and automation. */
.device-cta-builder,
.device-blast-composer,
.device-blast-jobs { border-color: #E7E1F2; background: #fefcff; }
.device-cta-preview,
.blast-audience-summary,
.blast-review { border-color: #E7E1F2; background: #fcf8ff; }
.device-send-tabs button:hover,
.blast-audience-switch button:hover { color: #7C3AED; border-color: #C4B5FD; background: #FAF9FF; }
.device-send-tabs button.is-active,
.blast-audience-switch button.is-active { color: #4C1D95; border-color: #7C3AED; background: #fdf0f9; }
.blast-section-heading > span { color: #fff; background: #4C1D95; }
.blast-device-choice { border-color: #f0d6e5; }
.blast-device-choice:hover { border-color: #C4B5FD; background: #fff8fd; }
.blast-device-choice input { accent-color: #7C3AED; }
.blast-filter-grid select:focus,
.device-cta-row input:focus,
.device-cta-row select:focus { border-color: #7C3AED; box-shadow: 0 0 0 3px rgba(214, 0, 143, .13); }
.device-cta-preview strong,
.device-cta-preview-actions strong,
.blast-audience-summary strong,
.blast-review strong,
.device-blast-jobs-heading .text-button { color: #4C1D95; }
.device-blast-progress > span i,
.analytics-bars i { background: #7C3AED; }

/* Order shipping editor and tracking controls */
.shipping-settings fieldset{display:grid;gap:14px}.shipping-editor-card{padding:16px;border:1px solid #e3e8ef;border-radius:12px;background:#fbfcfe}.shipping-editor-card+.shipping-editor-card{margin-top:2px}.shipment-actions{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:14px}.shipment-actions select{min-width:190px;padding:10px 12px;border:1px solid #dbe3ea;border-radius:9px;background:#fff;color:#34435b;font:600 14px inherit}.order-shipment-card .row-action{min-height:38px;padding:0 12px;border:1px solid #ddd5f5;border-radius:9px;background:#faf8ff}.shipping-settings .commerce-form-actions{margin-top:6px}@media(max-width:720px){.orders-heading-actions,.order-detail-actions,.shipment-actions{align-items:stretch;flex-direction:column}.orders-heading-actions .button,.order-detail-actions .button,.order-detail-actions select,.shipment-actions .button,.shipment-actions select{width:100%}.shipping-editor-card{padding:13px}}

/* Sellios Flow visual builder */
.flow-page-intro { margin-bottom: 18px; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.flow-page-intro h2 { margin: 2px 0 5px; font-size: 20px; letter-spacing: -.45px; }
.flow-page-intro p:last-child { margin: 0; color: #7b8496; font-size: 12px; }
.workflow-card[data-action="open-flow"] { cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.workflow-card[data-action="open-flow"]:hover { transform: translateY(-2px); border-color: #cfc1ef; box-shadow: 0 14px 30px rgba(76,29,149,.08); }
.workflow-card .switch { position: relative; z-index: 2; }
.flow-builder-layout { display: grid; gap: 18px; }
.flow-builder-toolbar { padding: 18px 20px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 18px; border: 1px solid #e6e0ef; border-radius: 16px; background: #fff; }
.flow-builder-toolbar h2 { margin: 2px 0 3px; font-size: 21px; letter-spacing: -.5px; }
.flow-builder-toolbar p:last-child { margin: 0; color: #7c8597; font-size: 11.5px; }
.flow-builder-switch { align-items: center; gap: 8px; }
.flow-builder-switch b { min-width: 42px; color: #6f7687; font-size: 10px; }
.flow-builder-body { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 18px; align-items: start; }
.flow-canvas { min-height: 640px; padding: 25px; display: flex; flex-direction: column; align-items: center; border: 1px solid #e6e0ef; border-radius: 16px; background: radial-gradient(circle at 50% 0, rgba(124,58,237,.06), transparent 38%), #faf9fd; }
.flow-canvas-label { width: min(620px,100%); margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #7d8492; }
.flow-canvas-label span { color: #4c1d95; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.flow-canvas-label small { font-size: 10px; }
.flow-node-wrap { width: min(620px,100%); display: flex; flex-direction: column; align-items: center; }
.flow-node { width: 100%; min-height: 84px; padding: 14px 15px; display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 12px; align-items: center; border: 1px solid #ddd5ec; border-radius: 14px; background: #fff; box-shadow: 0 8px 20px rgba(47,32,72,.045); }
.flow-node-trigger { border-color: #bfa6f6; box-shadow: 0 8px 22px rgba(124,58,237,.09); }
.flow-node-condition { border-color: #d3c2f5; background: #fcfaff; }
.flow-node-ai { border-color: #c7b7f2; background: linear-gradient(135deg,#fff,#f8f5ff); }
.flow-node-stop { border-color: #dedee5; background: #f8f8fa; }
.flow-node-symbol { width: 44px; height: 44px; display: grid; place-items: center; color: #6d28d9; border-radius: 12px; background: #f1eaff; }
.flow-node-symbol svg { width: 21px; height: 21px; }
.flow-node-copy { min-width: 0; display: grid; gap: 3px; }
.flow-node-copy small { color: #8b8198; font-size: 9px; font-weight: 850; letter-spacing: .09em; }
.flow-node-copy strong { color: #252337; font-size: 13px; }
.flow-node-copy span { overflow: hidden; color: #858c9c; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.flow-node-remove { width: 30px; height: 30px; display: grid; place-items: center; color: #a19baa; border-radius: 8px; }
.flow-node-remove:hover { color: #7c3aed; background: #f5f3ff; }
.flow-node-remove svg { width: 15px; height: 15px; }
.flow-add-node { min-height: 34px; margin: 12px 0; padding: 7px 11px; display: inline-flex; align-items: center; gap: 6px; color: #6d28d9; border: 1px dashed #bca5ee; border-radius: 999px; background: #fff; font-size: 10px; font-weight: 800; }
.flow-add-node:before { content:""; position: absolute; }
.flow-add-node:hover { background: #f6f2ff; border-color: #7c3aed; }
.flow-add-node svg { width: 13px; height: 13px; }
.flow-condition-branches { width: 76%; margin: 9px 0 -1px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; color: #7b6a98; font-size: 9px; font-weight: 800; text-align: center; }
.flow-condition-branches span { padding-top: 8px; border-top: 1px solid #d7cbed; }
.flow-builder-help { padding: 20px; }
.flow-builder-help h3 { margin: 0 0 12px; font-size: 15px; }
.flow-builder-help hr { margin: 18px 0; border: 0; border-top: 1px solid #ece8f2; }
.flow-builder-help > strong { font-size: 12px; }
.flow-builder-help > p { margin: 5px 0 0; color: #7b8495; font-size: 10.5px; line-height: 1.55; }
.flow-component-list { display: grid; gap: 8px; }
.flow-component-list span { padding: 9px 10px; display: flex; align-items: center; gap: 8px; color: #5f6574; border: 1px solid #ece8f2; border-radius: 10px; background: #fbfaff; font-size: 10.5px; font-weight: 700; }
.flow-component-list svg { width: 15px; height: 15px; color: #7c3aed; }
.flow-audit-note { margin-top: 14px; padding: 10px; display: flex; align-items: center; gap: 7px; color: #4c1d95; border-radius: 9px; background: #f5f3ff; font-size: 10px; font-weight: 800; }
.flow-audit-note svg { width: 14px; height: 14px; }
.flow-dynamic-fields { display: grid; gap: 12px; }
.flow-config-note { padding: 10px 12px; color: #737b8d; border: 1px dashed #ded7e8; border-radius: 9px; background: #fbfafc; font-size: 10.5px; }
.flow-inline-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.modal select,
.modal textarea { width: 100%; padding: 0 10px; color: var(--ink); border: 1px solid #dce2e5; border-radius: 8px; outline: none; background: #fff; font: inherit; }
.modal select { height: 40px; }
.modal textarea { min-height: 92px; padding-top: 10px; resize: vertical; }
.modal select:focus,
.modal textarea:focus { border-color: #7C3AED; box-shadow: 0 0 0 3px rgba(124,58,237,.12); }
.modal .flow-dynamic-fields { margin-top: 12px; }
.modal .field-hint { display: block; margin-top: 9px; color: #8790a0; font-size: 9.5px; line-height: 1.5; }

@media (max-width: 980px) {
  .flow-builder-body { grid-template-columns: 1fr; }
  .flow-builder-help { order: -1; }
  .flow-component-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .flow-page-intro { align-items: stretch; flex-direction: column; }
  .flow-page-intro .button { width: 100%; justify-content: center; }
  .flow-builder-toolbar { grid-template-columns: 1fr; }
  .flow-builder-toolbar .button { width: fit-content; }
  .flow-builder-switch { justify-self: start; }
  .flow-canvas { min-height: 0; padding: 16px 12px; }
  .flow-canvas-label { align-items: flex-start; flex-direction: column; }
  .flow-node { grid-template-columns: 38px minmax(0,1fr) auto; padding: 12px; }
  .flow-node-symbol { width: 38px; height: 38px; }
  .flow-node-copy span { white-space: normal; }
  .flow-component-list { grid-template-columns: 1fr 1fr; }
  .flow-inline-fields { grid-template-columns: 1fr; }
}

/* Customer 360 extends the existing CRM panel without changing the shared
   dashboard shell or table layout. */
.customer-360-panel { overflow: visible; }
.customer-360-layout { display: grid; grid-template-columns: minmax(210px,.8fr) minmax(260px,1.2fr) minmax(230px,1fr); gap: 14px; padding: 0 18px 18px; }
.customer-360-profile, .customer-360-section { min-width: 0; border: 1px solid #edf0f2; border-radius: 10px; background: #fff; }
.customer-360-profile { padding: 16px; display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 10px; align-content: start; }
.customer-360-avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #087e45; background: #e5f7eb; font-size: 12px; font-weight: 800; }
.customer-360-profile > div:nth-child(2) { display: grid; align-content: center; gap: 3px; }
.customer-360-profile > div:nth-child(2) strong { color: #253246; font-size: 13px; }
.customer-360-profile > div:nth-child(2) small { color: #758093; font-size: 10px; }
.customer-360-profile dl { grid-column: 1 / -1; margin: 8px 0 0; display: grid; gap: 8px; }
.customer-360-profile dl > div { display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 8px; }
.customer-360-profile dt { color: #8490a0; font-size: 10px; }
.customer-360-profile dd { min-width: 0; margin: 0; color: #465468; font-size: 10.5px; overflow-wrap: anywhere; }
.customer-360-section .panel-heading { min-height: auto; padding: 15px 15px 10px; }
.customer-360-section .empty-state { min-height: 116px; display: grid; place-items: center; padding: 16px; color: #7d8999; font-size: 11px; text-align: center; border-top: 1px solid #edf0f2; }
.customer-360-context { border-top: 1px solid #edf0f2; }
.customer-360-context > div { min-height: 49px; padding: 9px 14px; display: grid; gap: 3px; border-bottom: 1px solid #edf0f2; }
.customer-360-context > div:last-child { border-bottom: 0; }
.customer-360-context strong { color: #526075; font-size: 10.5px; }
.customer-360-context span { color: #8994a2; font-size: 10px; }
.muted-value { color: #8994a2; }
@media (max-width: 980px) { .customer-360-layout { grid-template-columns: 1fr 1fr; } .customer-360-profile { grid-row: span 2; } }
@media (max-width: 680px) { .customer-360-layout { grid-template-columns: 1fr; padding: 0 14px 14px; } .customer-360-profile { grid-row: auto; } }