/* System Z — Fluent 2 experience layer */

.table-tools { border-bottom: 0; }
.table-tools::after { content: ""; position: absolute; right: 16px; bottom: 0; left: 16px; height: 1px; background: var(--line); }
.table-tools { position: relative; }
.table-panel .table-wrap { min-height: 250px; max-height: calc(100vh - 315px); background: #fff; }
.table-panel .table-wrap[style*="none"] { min-height: 0; }
#datahub-view .table-wrap table { min-width: max(1040px, 100%); }
#datahub-view .table-wrap th:nth-last-child(2), #datahub-view .table-wrap td:nth-last-child(2) { min-width: 140px; }
.table-wrap tbody td { border-top-color: #ececf1; }
.table-wrap tbody tr:first-child td { border-top: 0; }
.table-wrap tbody tr:nth-child(even) { background: #fdfdff; }
.table-wrap tbody tr:hover { background: #f5f6ff; }
.table-wrap th, .table-wrap td { white-space: nowrap; }
.table-wrap td:nth-child(2) { white-space: normal; }
.table-wrap .status-badge { border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 22%, transparent); white-space: nowrap; }
.table-wrap .status-badge::before { content: ""; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: currentColor; opacity: .82; }
.table-wrap th:last-child, .table-wrap td:last-child { position: sticky; right: 0; z-index: 2; min-width: 124px; background: inherit; box-shadow: -10px 0 14px -16px rgba(0,0,0,.48); }
.table-wrap th:last-child { z-index: 4; background: #f8f8fb; }
.table-wrap tbody tr:nth-child(odd) td:last-child { background: #fff; }
.table-wrap tbody tr:nth-child(even) td:last-child { background: #fdfdff; }
.table-wrap tbody tr:hover td:last-child { background: #f5f6ff; }
.row-action { min-height: 30px; border-radius: 6px; opacity: .86; }
.row-action:hover, .row-action:focus-visible { border-color: #d9d8e8; background: #f0f0ff; opacity: 1; }
.table-wrap tbody tr:hover .row-action { opacity: 1; }
.table-panel .empty-state.show { min-height: 280px; display: grid; align-content: center; }
.table-panel .empty-state button { justify-self: center; }
.table-context-bar { min-height: 36px; display: flex; align-items: center; flex-wrap: wrap; gap: 7px 18px; padding: 7px 16px; border-bottom: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 10px; }
.table-context-bar > span { display: inline-flex; align-items: center; gap: 5px; }.table-context-bar > span + span::before { content: ""; width: 3px; height: 3px; margin-right: 8px; border-radius: 50%; background: #aaa9b4; }.table-context-bar .app-icon { width: 13px; height: 13px; color: var(--green); }

.campaign-insights { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.campaign-insights article { min-height: 78px; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.88); box-shadow: 0 2px 7px rgba(36,36,43,.035); }
.campaign-insights article > div, .campaign-insights small, .campaign-insights strong { display: block; }
.campaign-insights small { color: var(--muted); font-size: 10px; }.campaign-insights strong { margin-top: 2px; font-size: 22px; font-weight: 680; letter-spacing: -.03em; }
.campaign-insights .insight-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; }
.campaign-insights .insight-icon .app-icon { width: 18px; height: 18px; }
.insight-icon.data, .insight-icon.all { background: #eeeeff; color: #5759b5; }.insight-icon.campaign, .insight-icon.running, .insight-icon.live { background: var(--green-soft); color: var(--green); }.insight-icon.history, .insight-icon.paused { background: #fff4de; color: #aa610d; }.insight-icon.zalo, .insight-icon.cost, .insight-icon.runs { background: #e8f4fd; color: #2879b7; }
.campaign-tabs { margin-bottom: 12px; }.campaign-tabs button { min-height: 40px; padding-inline: 14px; border-radius: 7px 7px 0 0; }.campaign-tabs button:hover { background: #f2f2f7; }.campaign-tabs button.active { background: #f5f5ff; }
.campaign-list-tools { grid-template-columns: minmax(280px, 1fr) 240px; padding: 14px 16px; }
.campaign-table { min-width: 1120px; }.campaign-table th { height: 42px; }.campaign-table td { height: 72px; }
.campaign-table td:nth-child(2) { min-width: 270px; }.campaign-table td:nth-child(8) { min-width: 255px; }
.campaign-name-link { color: #4f52b2; font-size: 13px; }.campaign-table td > small { font-size: 10px; line-height: 1.4; }
.campaign-type-label { display: inline-flex; align-items: center; white-space: nowrap; }.campaign-type-icon { width: 28px; height: 28px; display: grid; place-items: center; margin-right: 8px; border-radius: 8px; vertical-align: middle; }.campaign-type-icon .app-icon { width: 15px; height: 15px; }
.campaign-row-actions { gap: 3px; }.campaign-row-actions .text-button { min-height: 30px; padding-inline: 8px; border-radius: 6px; }
.campaign-row-actions .text-button:hover { background: #eeeeff; color: #3f418d; }
.campaign-row-actions { position: relative; flex-wrap: nowrap; align-items: center; }
.campaign-icon-action,.campaign-more-menu > summary { width: 32px; height: 32px; display: inline-grid; place-items: center; padding: 0; border: 1px solid #d9e5ee; border-radius: 8px; color: #3579ae; background: #fff; cursor: pointer; list-style: none; }
.campaign-icon-action:hover,.campaign-more-menu > summary:hover { border-color: #84b8df; color: #1768aa; background: #edf7ff; }.campaign-icon-action .app-icon,.campaign-more-menu > summary .app-icon { width: 16px; height: 16px; }.campaign-more-menu > summary::-webkit-details-marker { display: none; }
.campaign-more-menu { position: relative; }.campaign-more-menu > div,.campaign-menu-floating { position: absolute; z-index: 150; top: calc(100% + 6px); right: 0; width: 204px; display: grid; gap: 2px; padding: 6px; border: 1px solid #dce7ef; border-radius: 11px; background: #fff; box-shadow: 0 16px 38px rgba(34,72,102,.2); }
.campaign-menu-floating { position: fixed; right: auto; z-index: 180; }
.campaign-table tbody tr:has(.campaign-more-menu[open]),.campaign-table td:last-child:has(.campaign-more-menu[open]) { z-index: 50; }
.campaign-menu-action { width: 100%; min-width: 0; min-height: 40px; display: grid; grid-template-columns: 26px minmax(0,1fr); align-items: center; gap: 9px; padding: 5px 10px; border: 0; border-radius: 8px; color: #30495d; background: transparent; font: inherit; font-size: 12px; font-weight: 650; line-height: 1.3; text-align: left; white-space: nowrap; cursor: pointer; }.campaign-menu-action:hover { color: #1768aa; background: #edf7ff; }.campaign-menu-action > span { min-width: 0; display: block; overflow: hidden; color: inherit; font-size: inherit; font-weight: inherit; text-overflow: ellipsis; white-space: nowrap; }.campaign-menu-action :is(.app-icon,.glass-icon) { width: 21px; height: 21px; object-fit: contain; transform: none; }.campaign-menu-action.danger { color: #c03945; }.campaign-menu-action.danger:hover { background: #fff0f2; }
.owner-avatar { width: 28px; height: 28px; background: linear-gradient(145deg, #eeecff, #ddd9ff); color: #5557b2; }

.history-overview { gap: 12px; margin-bottom: 18px; }
.history-overview article { min-height: 86px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 15px 16px; border-radius: 12px; background: rgba(255,255,255,.9); box-shadow: var(--shadow); }
.history-overview article > div, .history-overview article > div > span, .history-overview article > div > strong { display: block; }
.history-overview .history-metric-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: #eeeeff; color: #5759b5; }
.history-overview .history-metric-icon .app-icon { width: 18px; height: 18px; }.history-overview article.success .history-metric-icon { background: var(--green-soft); color: var(--green); }.history-overview article.failed .history-metric-icon { background: var(--red-soft); color: var(--red); }.history-overview article.cost .history-metric-icon { background: #e8f4fd; color: #2879b7; }
.history-overview span { font-size: 10px; }.history-overview strong { margin-top: 3px; font-size: 23px; letter-spacing: -.03em; }
.history-tools { grid-template-columns: minmax(280px, 1fr) 230px 190px; padding: 14px 16px; }
.run-summary { min-height: 70px; padding: 15px 17px; }.run-summary:hover, .run-card.expanded .run-summary { background: #f7f8ff; }
.run-result-icon { width: 36px; height: 36px; border-radius: 10px; }.run-summary-main strong { font-size: 12px; }.run-summary-main small, .run-summary-meta small, .run-summary-meta time { font-size: 10px; }
.run-detail { padding: 0 18px 20px 66px; background: #fafafd; }.run-detail-head { font-size: 10px; }.run-step { min-height: 72px; }.run-step-marker span { width: 30px; height: 30px; border-radius: 9px; }.run-step-marker i { top: 30px; }.run-step-content strong { font-size: 11px; }.run-step-content p { font-size: 10px; }.run-step-content small, .run-step > time { font-size: 9px; }

.workflow-builder { margin: -28px -36px -52px; height: calc(100vh - 72px); background: radial-gradient(circle at 8% 4%, rgba(255,183,111,.14), transparent 23rem), radial-gradient(circle at 90% 10%, rgba(92,194,245,.15), transparent 27rem), #f5f5f8; }
.workflow-toolbar { min-height: 68px; padding: 10px 16px; grid-template-columns: auto minmax(250px, 430px) 1fr; border-bottom-color: var(--line); }.workflow-toolbar-actions { gap: 8px; }.workflow-name-field span { font-size: 9px; }.workflow-name-field input { min-height: 38px; border-radius: 8px; font-size: 13px; }
.workflow-context-tabs { height: 42px; padding-inline: 16px; }.workflow-context-tabs button { height: 38px; border-radius: 7px 7px 0 0; }
.workflow-workspace { grid-template-columns: 196px minmax(0, 1fr) 336px; }
.workflow-palette, .workflow-config { padding: 17px 14px; background: rgba(255,255,255,.88); }
.workflow-palette > div > strong { font-size: 13px; }.workflow-palette > div > span { font-size: 10px; }
.workflow-palette > button { min-height: 54px; padding: 9px; border-radius: 10px; }.workflow-palette > button strong { font-size: 11px; }.workflow-palette > button small { font-size: 9px; }.workflow-palette > button b { width: 32px; height: 32px; }
.workflow-config-head { position: sticky; top: -17px; z-index: 4; padding: 14px 0 13px; margin-top: -14px; background: rgba(255,255,255,.94); backdrop-filter: blur(16px); }.workflow-config-head strong { font-size: 13px; }.workflow-config-head span { font-size: 10px; }
.workflow-config-form { gap: 14px; }.workflow-config-form label > span, .workflow-mapping-title { font-size: 10px; }.workflow-config-form input, .workflow-config-form select { min-height: 39px; padding: 9px 10px; border-radius: 8px; font-size: 11px; }.workflow-config-note { padding: 11px; border-radius: 8px; font-size: 10px; }.workflow-config-note.safe { border: 1px solid #cdebdc; }
.workflow-node-main { box-shadow: 0 5px 16px rgba(58,53,71,.07); }.workflow-node-head strong { font-size: 13px; }.workflow-node-body strong { font-size: 11px; }.workflow-node-body span { font-size: 10px; }.workflow-node-number { font-size: 11px; }
.workflow-step-picker { width: 260px; }.workflow-step-picker-head strong { font-size: 11px; }.workflow-step-picker-head span { font-size: 9px; }.workflow-step-picker > button span { font-size: 10px; }

.modal-backdrop { background: rgba(28,27,34,.46); backdrop-filter: blur(7px); }.modal { border: 1px solid rgba(255,255,255,.75); border-radius: 14px; box-shadow: 0 24px 70px rgba(26,24,36,.24); }.modal-head { padding: 20px 22px; background: linear-gradient(180deg, #fdfdff, #fafafd); }.modal-head h2 { font-size: 18px; }.modal-head p { font-size: 11px; }
.form-stack label > span, .form-grid label > span, .field-group > span { font-size: 11px; }.form-stack input, .form-stack select, .form-grid input, .form-grid select, .form-stack textarea, .form-grid textarea { min-height: 39px; border-radius: 8px; font-size: 12px; }
.notice { padding: 12px; border-radius: 8px; font-size: 10px; }.notice strong { font-size: 11px; }
.empty-icon { width: 52px; height: 52px; border-radius: 14px; }.empty-state h3 { font-size: 15px; }.empty-state p { font-size: 11px; }
.toast { min-height: 44px; display: flex; align-items: center; padding: 11px 15px; border-radius: 9px; }

/* Typography legibility pass — Fluent body and caption scale */
:root {
  --type-caption: 11px;
  --type-caption-strong: 11.5px;
  --type-body: 12.5px;
  --type-control: 13px;
}

body { font-size: var(--type-body); line-height: 1.45; }
.nav-section-label, .eyebrow, .record-count-badge, .brand span, .sidebar-foot span,
.account-popover span { font-size: var(--type-caption); }
.nav-item, .primary-button, .secondary-button, .text-button, .row-action,
.search-box input, .select-control, button, input, select, textarea { font-size: var(--type-control); }
.section-toolbar p, .welcome-card p, .panel p, .empty-state p, .notice,
.quick-action-grid small, .stat-card small, .flow-step small { font-size: var(--type-caption-strong); line-height: 1.5; }
.quick-action-grid strong, .stat-card span, .flow-step strong, .panel h3 { font-size: var(--type-body); }
.connection-badge, .status-badge, .tag, .table-context-bar { font-size: var(--type-caption); }
.oa-compact > strong { font-size: var(--type-body); }
.oa-compact > small, .success-text, .oa-detail-main p { font-size: var(--type-caption); }
.campaign-card h3, .campaign-meta strong { font-size: var(--type-body); }
.campaign-card p, .campaign-meta span, .campaign-card-foot small { font-size: var(--type-caption); }
.template-item strong, .setting-row strong, .notice strong { font-size: 12.5px; }
.template-item span, .setting-row span { font-size: var(--type-caption); line-height: 1.45; }

.datahub-tree-head span, .datahub-group-head small, .datahub-table-button > small { font-size: 10.5px; }
.datahub-tree-head strong, .datahub-group-head > span, .datahub-table-button { font-size: 12px; }
.table-wrap th { font-size: 11.5px; letter-spacing: .01em; }
.table-wrap td, .table-panel .customer-code, .customer-identity > strong { font-size: 12.5px; }
.datahub-row-identity { min-width: 0; display: grid; gap: 3px; }
.datahub-row-identity small { display: block; max-width: 150px; overflow: hidden; color: #7a8494; font-size: 9.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.customer-avatar { font-size: var(--type-caption); }

.campaign-insights small, .campaign-table td > small { font-size: var(--type-caption); }
.campaign-name-link, .campaign-type-label, .campaign-tabs button { font-size: var(--type-control); }
.history-overview span, .history-tools input, .history-tools select { font-size: var(--type-caption-strong); }
.run-summary-main strong { font-size: var(--type-body); }
.run-summary-main small, .run-summary-meta small, .run-summary-meta time,
.run-step-content p, .run-step-content small, .run-step > time { font-size: var(--type-caption); line-height: 1.5; }
.run-step-content strong, .run-detail-head { font-size: 12px; }

.workflow-context-tabs button { font-size: 12.5px; }
.workflow-name-field span { font-size: var(--type-caption); }
.workflow-name-field input { font-size: 13.5px; }
.workflow-palette > div > strong { font-size: 14px; }
.workflow-palette > div > span { font-size: var(--type-caption); line-height: 1.5; }
.workflow-palette > button strong { font-size: 12.5px; }
.workflow-palette > button small { font-size: 10.5px; line-height: 1.45; }
.workflow-node-head strong { font-size: 13.5px; }
.workflow-node-body strong { font-size: 12.5px; line-height: 1.45; }
.workflow-node-body span { font-size: var(--type-caption); line-height: 1.45; }
.workflow-node-number, .workflow-line-label { font-size: var(--type-caption); }
.workflow-fixed-badge { font-size: 9.5px; }
.workflow-node.condition .workflow-node-outputs button { font-size: var(--type-caption); }
.workflow-step-picker-head strong, .workflow-step-picker > button span { font-size: 12px; }
.workflow-step-picker-head span { font-size: 10.5px; }
.workflow-pan-hint, .workflow-viewport-controls button span, .workflow-viewport-controls > span { font-size: var(--type-caption); }
.workflow-config-head strong { font-size: 14px; }
.workflow-config-head span { font-size: var(--type-caption); line-height: 1.45; }
.workflow-config-form label > span, .workflow-mapping-title { font-size: 11.5px; }
.workflow-config-form input, .workflow-config-form select { font-size: 12.5px; }
.workflow-config-note { font-size: var(--type-caption); line-height: 1.55; }
.workflow-fixed-start-info strong { font-size: 12.5px; }
.workflow-fixed-start-info div > span { font-size: 10.5px; }
.workflow-fixed-start-info.customer { border-color: #f4c7d5; background: linear-gradient(135deg,#fff7fa,#f8fbff); }
.workflow-fixed-start-info.customer .workflow-fixed-start-icon { color: #fff; background: linear-gradient(145deg,#ff8faf,#ec4775); box-shadow: 0 7px 18px rgba(226,62,109,.2); }
.campaign-source-options b.customer,.campaign-selected-source > b.customer { color: #fff; background: linear-gradient(145deg,#ff8faf,#ec4775); }
.workflow-customer-fields,.workflow-customer-filters,.workflow-customer-schedule { display: grid; gap: 11px; padding: 13px; border: 1px solid #dce7ef; border-radius: 12px; background: #f9fcfe; }
.workflow-customer-fields-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.workflow-customer-fields-head > span:first-child { display: grid; gap: 3px; min-width: 0; }
.workflow-customer-fields-head strong { color: #26445b; font-size: 12px; }
.workflow-customer-fields-head small { color: #71879a; font-size: 10px; line-height: 1.45; }
.workflow-customer-fields-head > span:last-child { display: flex; gap: 5px; flex: 0 0 auto; }
.workflow-customer-fields-head button,.workflow-customer-add-filter { border: 0; color: #237ac0; background: transparent; font-size: 10px; font-weight: 700; cursor: pointer; }
.workflow-customer-field-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; max-height: 230px; overflow: auto; padding-right: 3px; }
.workflow-customer-field-list label { display: flex; align-items: center; gap: 8px; min-height: 49px; margin: 0; padding: 8px 9px; border: 1px solid #d9e5ee; border-radius: 9px; background: #fff; cursor: pointer; }
.workflow-customer-field-list label:has(input:checked) { border-color: #8ac5eb; background: #edf8ff; }
.workflow-customer-field-list input { width: 16px; height: 16px; margin: 0; accent-color: #1e88d2; }
.workflow-customer-field-list label > span { display: grid; gap: 2px; min-width: 0; }
.workflow-customer-field-list label strong { overflow: hidden; color: #344f65; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.workflow-customer-field-list label small { overflow: hidden; color: #8a9aa8; font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.workflow-customer-schedule > div:last-child { display: grid; grid-template-columns: .7fr 1fr 1fr; gap: 8px; }
.workflow-customer-schedule label { margin: 0; }
.workflow-customer-filter-list { display: grid; gap: 7px; }
.workflow-customer-filter-row { display: grid; grid-template-columns: 1.1fr .9fr 1fr 30px; gap: 6px; align-items: center; }
.workflow-customer-filter-row select,.workflow-customer-filter-row input { min-width: 0; }
.workflow-customer-filter-row > button { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #f1d4da; border-radius: 8px; color: #cc4262; background: #fff7f9; cursor: pointer; }
.workflow-customer-filter-row > button .app-icon { width: 13px; height: 13px; }
.workflow-customer-filter-no-value { display: flex; align-items: center; min-height: 34px; padding: 0 9px; border-radius: 8px; color: #8394a2; background: #eef3f6; font-size: 9px; }
.workflow-customer-filter-empty { padding: 12px; border: 1px dashed #cbdce8; border-radius: 9px; color: #7d91a2; text-align: center; font-size: 10px; }
.workflow-customer-add-filter { display: inline-flex; align-items: center; justify-self: start; gap: 5px; padding: 7px 9px; border: 1px solid #c9e2f3; border-radius: 8px; background: #f2f9fe; }
.workflow-customer-add-filter .app-icon { width: 13px; height: 13px; }
@media (max-width: 700px) {
  .workflow-customer-field-list { grid-template-columns: 1fr; }
  .workflow-customer-filter-row { grid-template-columns: 1fr 1fr; }
  .workflow-customer-filter-row > input,.workflow-customer-filter-no-value { grid-column: 1 / -2; }
  .workflow-customer-schedule > div:last-child { grid-template-columns: 1fr; }
}
.workflow-fixed-row-target { display: grid; grid-template-columns: 30px minmax(0,1fr); align-items: center; gap: 9px; padding: 11px; border: 1px solid #cfe8dc; border-radius: 9px; color: #176b4d; background: #edf8f3; }
.workflow-fixed-row-target > svg { width: 18px; height: 18px; justify-self: center; }
.workflow-fixed-row-target > span { display: grid; gap: 2px; }
.workflow-fixed-row-target strong { font-size: 11.5px; }
.workflow-fixed-row-target small { color: #4f7665; font-size: 10px; line-height: 1.45; }
.workflow-mapping-row code { font-size: var(--type-caption); }
.workflow-config-empty b { font-size: var(--type-body); }
.workflow-config-empty span { font-size: var(--type-caption); }
.workflow-node-report > div:first-child, .workflow-node-report button { font-size: 10.5px; }

.modal-head p, .form-stack label > span, .form-grid label > span, .field-group > span,
.notice, .empty-state p { font-size: 12px; line-height: 1.5; }
.form-stack input, .form-stack select, .form-grid input, .form-grid select,
.form-stack textarea, .form-grid textarea { font-size: var(--type-control); }
.modal-head h2 { font-size: 19px; }
.empty-state h3 { font-size: 16px; }
.stepper span { font-size: var(--type-caption); }
.channel-card strong { font-size: 12.5px; }
.channel-card small, .mapping-head p { font-size: var(--type-caption); line-height: 1.5; }
.mapping-head h3 { font-size: 15px; }
.mapping-row code, .mapping-row select, .mapping-row input { font-size: 12px; }
.campaign-create-intro strong { font-size: 14px; }
.campaign-create-intro span, .campaign-source-options span small { font-size: var(--type-caption); line-height: 1.5; }
.campaign-source-options span strong { font-size: 13.5px; }
.campaign-source-options i { font-size: var(--type-caption); }
.campaign-details-step > label > span, .campaign-datahub-levels label > span, .campaign-miniapp-levels label > span,
.live-send-body > label > span { font-size: 12px; }
.campaign-details-step input, .campaign-details-step textarea, .campaign-datahub-levels select, .campaign-miniapp-levels select,
.live-send-body select { font-size: var(--type-control); }
.campaign-selected-source span small, .live-send-preview span { font-size: var(--type-caption); }
.campaign-selected-source span strong, .live-send-preview strong { font-size: 12.5px; }
.campaign-selected-source button, .danger-confirm-button { font-size: 12px; }
.workflow-readonly-banner { font-size: var(--type-caption); line-height: 1.45; }
.datahub-base-columns strong, .datahub-custom-column strong { font-size: 12px; }
.datahub-base-columns span, .datahub-custom-column code, .datahub-custom-column em,
.datahub-no-custom-column, .datahub-column-form label span { font-size: var(--type-caption); }
.datahub-column-form input, .datahub-column-form select, .csv-mapping-row select { font-size: 12px; }
.csv-mapping-row strong, .csv-mapping-modal .modal-actions > span { font-size: var(--type-caption); }
.csv-mapping-row em { font-size: 9.5px; }
.delete-node-button { font-size: var(--type-caption); }
.test-runner-body > label > span { font-size: 12px; }
.test-runner-body select { font-size: var(--type-control); }
.test-runner-summary { font-size: var(--type-caption); }
.test-trace-step > b { font-size: var(--type-caption); }
.test-trace-step strong { font-size: 12px; }
.test-trace-step span { font-size: var(--type-caption); line-height: 1.5; }
.step-report-counts small, .chart-legend span, .step-report-table-head p { font-size: var(--type-caption); }
.step-report-table-head h3 { font-size: 15px; }

@media (max-width: 1200px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; }
  .sidebar.open { transform: none; box-shadow: 18px 0 54px rgba(0,0,0,.18); }
  .main-content { width: 100%; margin-left: 0; }
  .mobile-only { display: grid; }
  .workflow-workspace { grid-template-columns: 180px minmax(0, 1fr) 300px; }
}

@media (max-width: 980px) {
  .quick-action-grid, .campaign-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .datahub-workspace { grid-template-columns: 1fr; }.datahub-tree-panel { position: static; min-height: 0; }.datahub-tree { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .workflow-workspace { grid-template-columns: 160px minmax(0, 1fr) 270px; }.workflow-toolbar { grid-template-columns: auto minmax(230px, 1fr); }.workflow-toolbar-actions { grid-column: 1 / -1; justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; }
}

/* Customer 360 — hồ sơ khách hàng là lớp danh tính, tách khỏi bản ghi Data Hub */
.quick-action-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.quick-action-icon.customer { background: linear-gradient(145deg, #5b5fc7, #8b67ca); }
.customer360-toolbar { align-items: flex-end; }
.customer360-toolbar h2 { font-size: 25px; }
.customer360-toolbar p { max-width: 760px; font-size: 13px; line-height: 1.55; }
.customer360-insights { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.customer360-insights article { min-height: 92px; display: flex; align-items: center; gap: 13px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.9); box-shadow: 0 2px 8px rgba(36,36,43,.035); }
.customer360-insights article > div { min-width: 0; display: grid; }
.customer360-insights small { color: var(--muted); font-size: 11.5px; font-weight: 600; }
.customer360-insights strong { margin: 1px 0; font-size: 24px; line-height: 1.15; letter-spacing: -.03em; }
.customer360-insights article > div > span { color: #858491; font-size: 10.5px; }
.customer360-metric-icon { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; }
.customer360-metric-icon .app-icon { width: 20px; height: 20px; }
.customer360-metric-icon.total { background: #efefff; color: #5b5fc7; }
.customer360-metric-icon.identified { background: #eaf8f0; color: #21875b; }
.customer360-metric-icon.linked { background: #eaf6fd; color: #277dad; }
.customer360-metric-icon.attention { background: #fff2e8; color: #bd5a18; }
.customer360-workspace { display: block; }
.customer360-list-panel { min-width: 0; overflow: hidden; }
.customer360-tools { display: grid; grid-template-columns: minmax(260px, 1fr) auto; gap: 10px; }
.customer360-table-wrap { max-height: calc(100vh - 305px); min-height: 360px; }
.customer360-table-wrap { overflow-x: hidden; }
.customer360-table-wrap table { width: 100%; min-width: 0; table-layout: fixed; }
.customer360-table-wrap th:nth-child(1) { width: 28%; }
.customer360-table-wrap th:nth-child(2) { width: 21%; }
.customer360-table-wrap th:nth-child(3) { width: 25%; }
.customer360-table-wrap th:nth-child(4) { width: 26%; }
.customer360-table-wrap th:last-child, .customer360-table-wrap td:last-child { position: static; min-width: 0; box-shadow: none; }
.customer360-table-wrap tbody tr:nth-child(odd) td:last-child,
.customer360-table-wrap tbody tr:nth-child(even) td:last-child,
.customer360-table-wrap tbody tr:hover td:last-child { background: transparent; }
.customer360-table-wrap td { cursor: pointer; vertical-align: middle; }
.customer360-table-wrap td > strong, .customer360-table-wrap td > small { display: block; }
.customer360-table-wrap td > small { margin-top: 3px; color: var(--muted); font-size: 10.5px; }
.customer360-table-wrap td .status-badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.customer360-row { transition: background-color .14s ease, box-shadow .14s ease; }
.customer360-row:hover { background: #f7f8ff; }
.customer360-row:focus-visible { outline: 2px solid #6264a7; outline-offset: -2px; }
.customer360-row .customer-identity > span:last-child { min-width: 0; display: grid; }
.customer360-row .customer-identity small { margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.profile-avatar { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #e8e8ff, #d9d4f8); color: #5355a8; font-size: 11px; font-weight: 750; letter-spacing: .02em; }
.profile-avatar.large { width: 52px; height: 52px; font-size: 15px; }
.profile-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.profile-tags span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border: 1px solid #deddf0; border-radius: 999px; background: #f6f5ff; color: #5254a6; font-size: 10.5px; font-weight: 600; }
.profile-tags span .app-icon { width: 12px; height: 12px; }
.profile-tags.compact { flex-wrap: nowrap; align-items: center; max-width: 170px; overflow: hidden; }
.profile-tags.compact span { flex: 0 0 auto; padding: 3px 6px; }
.profile-tags.compact i { color: var(--muted); font-size: 10px; font-style: normal; }
.profile-tags .muted { border-style: dashed; background: transparent; color: var(--muted); font-weight: 500; }
.customer360-detail-modal { width: min(900px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow: hidden; }
.customer360-detail { position: static; max-height: calc(100vh - 135px); overflow: auto; padding: 22px; }
.customer360-detail-empty { min-height: 430px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--muted); text-align: center; }
.customer360-detail-empty .empty-icon { display: grid; place-items: center; }
.customer360-detail-empty strong { color: var(--text); font-size: 15px; }
.customer360-detail-empty p { max-width: 280px; font-size: 12px; line-height: 1.5; }
.profile-detail-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.profile-detail-head h3 { margin: 2px 0 7px; font-size: 19px; line-height: 1.2; }
.profile-detail-head .secondary-button { min-height: 32px; padding: 5px 9px; }
.profile-code { color: var(--muted); font-size: 10.5px; font-weight: 650; letter-spacing: .04em; }
.profile-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 14px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--line); }
.profile-detail-grid > div { min-width: 0; min-height: 64px; display: grid; align-content: center; padding: 10px 11px; background: #fff; }
.profile-detail-grid small, .profile-loyalty-card small { color: var(--muted); font-size: 10.5px; }
.profile-detail-grid strong { margin-top: 3px; overflow: hidden; color: #3f3f49; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.profile-loyalty-card { display: grid; grid-template-columns: 1.15fr .7fr 1fr; align-items: center; gap: 10px; padding: 13px; border: 1px solid #dedcf0; border-radius: 11px; background: radial-gradient(circle at 100% 0, rgba(141,109,204,.18), transparent 45%), linear-gradient(135deg, #f7f6ff, #fcfbff); }
.profile-loyalty-card > div { min-width: 0; display: grid; }
.profile-loyalty-card > div:first-child { grid-template-columns: auto 1fr; align-items: center; gap: 8px; }
.profile-loyalty-card strong { margin-top: 2px; overflow: hidden; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.profile-loyalty-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: #ebe8ff; color: #6264a7; }
.profile-loyalty-icon .app-icon { width: 17px; height: 17px; }
.profile-detail-section { margin-top: 18px; }
.profile-section-title { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 9px; }
.profile-section-title h4 { font-size: 12.5px; }
.profile-section-title p { margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.profile-linked-records, .profile-timeline { display: grid; gap: 7px; }
.profile-linked-record { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fbfbfd; color: var(--text); text-align: left; }
.profile-linked-record:hover { border-color: #bbb9d4; background: #f7f7ff; }
.profile-linked-record > span { min-width: 0; display: flex; align-items: center; gap: 8px; }
.profile-linked-record > span > .app-icon { width: 16px; height: 16px; flex: 0 0 auto; color: #6264a7; }
.profile-linked-record > span > span { min-width: 0; display: grid; }
.profile-linked-record strong { font-size: 11.5px; }
.profile-linked-record small, .profile-linked-record i { overflow: hidden; color: var(--muted); font-size: 10px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.profile-linked-record i { flex: 0 0 auto; }
.profile-section-empty { padding: 12px; border: 1px dashed #d7d6df; border-radius: 9px; color: var(--muted); font-size: 11px; text-align: center; }
.profile-timeline-item { display: grid; grid-template-columns: auto 1fr; gap: 9px; }
.profile-timeline-item > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; }
.profile-timeline-item > span.success { background: #eaf8f0; color: #21875b; }
.profile-timeline-item > span.failed { background: #feeeee; color: #b74646; }
.profile-timeline-item > span .app-icon { width: 14px; height: 14px; }
.profile-timeline-item > div { padding: 2px 0 10px; border-bottom: 1px solid #eeeef2; }
.profile-timeline-item strong { font-size: 11.5px; }
.profile-timeline-item p, .profile-timeline-item small { margin-top: 2px; color: var(--muted); font-size: 10.5px; line-height: 1.45; }
.datahub-profile-link { display: inline-flex; align-items: center; gap: 7px; padding: 5px 7px; border: 1px solid #deddef; border-radius: 8px; background: #f8f7ff; color: #4f51a0; text-align: left; white-space: nowrap; }
.datahub-profile-link:hover { border-color: #aaa8d2; background: #f0efff; }
.datahub-profile-link > .app-icon { width: 15px; height: 15px; }
.datahub-profile-link > span { display: grid; }
.datahub-profile-link strong { font-size: 11px; }
.datahub-profile-link small { font-size: 9.5px; }
.datahub-unlinked { display: inline-flex; padding: 4px 7px; border: 1px dashed #d8b88e; border-radius: 999px; background: #fff8ef; color: #98601e; font-size: 10.5px; white-space: nowrap; }
.customer-profile-modal { width: min(720px, calc(100vw - 32px)); }
.profile-form-section { display: grid; gap: 2px; padding: 11px 12px; border-radius: 9px; background: #f7f7fb; }
.profile-form-section strong { font-size: 12.5px; }
.profile-form-section span, .form-grid label > small { color: var(--muted); font-size: 10.5px; line-height: 1.45; }
.customer-identity-mappings, .profile-identity-list { display: grid; gap: 10px; }
.customer-identity-mapping { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(180px, .7fr); gap: 10px; padding: 12px; border: 1px solid #dfe7f3; border-radius: 11px; background: #f8fbff; }
.customer-identity-mapping-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; }
.customer-identity-mapping-head > span, .profile-identity-card > span { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 10px; background: #e9f4ff; color: #0878f9; }
.customer-identity-mapping-head > span .app-icon, .profile-identity-card > span .app-icon { width: 18px; height: 18px; }
.customer-identity-mapping-head > div { min-width: 0; display: grid; gap: 1px; }
.customer-identity-mapping-head strong { color: var(--text); font-size: 12px; }
.customer-identity-mapping-head small { color: var(--muted); font-size: 10px; }
.customer-identity-mapping-head em { margin-left: auto; padding: 3px 7px; border-radius: 999px; background: #e4f1ff; color: #0869d4; font-size: 9.5px; font-style: normal; font-weight: 700; }
.customer-identity-note { grid-column: 1 / -1; color: var(--muted); font-size: 10px; }
.profile-identity-card { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: #fbfdff; }
.profile-identity-card > div { min-width: 0; display: grid; gap: 2px; }
.profile-identity-card > div strong { color: var(--text); font-size: 11.5px; }
.profile-identity-card > div small { overflow-wrap: anywhere; color: var(--muted); font-size: 10px; }
.profile-identity-card > em { margin-left: auto; flex: 0 0 auto; font-style: normal; }

@media (max-width: 1320px) {
  .quick-action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .customer360-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .customer360-detail-modal { width: min(760px, calc(100vw - 24px)); }
}

@media (max-width: 680px) {
  .quick-action-grid, .customer360-insights { grid-template-columns: 1fr; }
  .customer360-tools { grid-template-columns: 1fr; }
  .profile-detail-head { grid-template-columns: auto 1fr; }
  .profile-detail-head .secondary-button { grid-column: 1 / -1; }
  .profile-loyalty-card { grid-template-columns: 1fr; }
  .customer-identity-mapping { grid-template-columns: 1fr; }
  .customer-identity-mapping-head, .customer-identity-note { grid-column: 1; }
  .profile-identity-card { align-items: flex-start; flex-wrap: wrap; }
  .profile-identity-card > em { margin-left: 44px; }
  .customer360-table-wrap { max-width: 100%; padding: 10px; overflow-x: hidden; background: #f8f8fb; }
  .customer360-table-wrap table, .customer360-table-wrap tbody { display: block; width: 100%; max-width: 100%; min-width: 0; }
  .customer360-table-wrap thead { display: none; }
  .customer360-table-wrap tbody { display: grid; gap: 9px; }
  .customer360-table-wrap .customer360-row { width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 14px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: 0 2px 7px rgba(36,36,43,.035); }
  .customer360-table-wrap .customer360-row:active { border-color: #b9b7e3; background: #f7f7ff; box-shadow: inset 3px 0 #6264a7; }
  .customer360-table-wrap .customer360-row td { min-width: 0; height: auto; padding: 0; overflow-wrap: anywhere; border: 0; white-space: normal; }
  .customer360-table-wrap .customer360-row td:first-child { grid-column: 1 / -1; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  .customer360-table-wrap .customer360-row td:nth-child(3) .status-badge { white-space: normal; }
  .customer360-table-wrap .customer360-row td:nth-child(4) { text-align: right; }
}

/* Flat ZBS composer and Zalo-like conversation preview */
.zbs-flat-builder { max-width: 1500px; margin: 0 auto; }
.zbs-flat-head { position: sticky; top: 62px; z-index: 12; display: grid; grid-template-columns: 170px minmax(0,1fr) auto; align-items: center; gap: 20px; margin: -28px -36px 24px; padding: 16px 36px; border-bottom: 1px solid #e7e1dc; background: rgba(255,253,250,.94); box-shadow: 0 8px 22px rgba(55,42,34,.05); backdrop-filter: blur(14px); }
.zbs-flat-head h2 { margin: 2px 0 2px; font-size: 21px; letter-spacing: -.02em; }
.zbs-flat-head p { margin: 0; color: #766f6a; font-size: 12px; }
.zbs-back-link { display: inline-flex; align-items: center; gap: 7px; justify-self: start; padding: 8px 10px; border: 0; border-radius: 8px; color: #6f625b; background: transparent; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.zbs-back-link:hover { color: #a52334; background: #fff2f2; }
.zbs-back-link .app-icon { width: 16px; height: 16px; }
.zbs-flat-head-actions { display: flex; align-items: center; gap: 12px; }
.zbs-save-state { color: #847b75; font-size: 11px; white-space: nowrap; }
.zbs-flat-layout { display: grid; grid-template-columns: minmax(560px,1fr) 420px; align-items: start; gap: 24px; }
.zbs-compose-column { display: grid; gap: 16px; min-width: 0; }
.zbs-compose-card { overflow: hidden; border: 1px solid #e7e0db; border-radius: 12px; background: #fff; box-shadow: 0 5px 18px rgba(61,44,35,.04); }
.zbs-compose-card-head { display: flex; align-items: center; gap: 12px; padding: 17px 20px; border-bottom: 1px solid #eee8e4; background: #fdfbf9; }
.zbs-compose-card-head > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; color: #a52334; background: #fdebed; font-size: 11px; font-weight: 800; }
.zbs-compose-card-head h3 { margin: 0; font-size: 15px; }
.zbs-compose-card-head p { margin: 3px 0 0; color: #8a817c; font-size: 11px; }
.zbs-compose-card > .zbs-builder-fields { padding: 20px; }
.zbs-builder-fields label.full { grid-column: 1 / -1; }
.zbs-builder-fields label small { color: #9a918c; font-size: 10px; font-weight: 450; }
.zbs-theme-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 20px; }
.zbs-theme-options label { position: relative; cursor: pointer; }
.zbs-theme-options input { position: absolute; opacity: 0; pointer-events: none; }
.zbs-theme-options label > span { min-height: 105px; display: grid; grid-template-columns: 88px 1fr; align-content: center; column-gap: 12px; padding: 13px; border: 1px solid #dddfe5; border-radius: 9px; color: #5e6169; background: #fff; }
.zbs-theme-options label.selected > span,.zbs-theme-options label:has(input:checked) > span { border-color: #2771e8; box-shadow: 0 0 0 2px rgba(39,113,232,.1); }
.zbs-theme-options img { grid-row: 1 / 3; width: 88px; height: 52px; object-fit: contain; border: 1px solid #e9ebef; border-radius: 5px; background: #fff; }
.zbs-theme-options b { align-self: end; color: #24262b; font-size: 12px; }
.zbs-theme-options small { align-self: start; margin-top: 4px; color: #959aa4; font-size: 10px; }
.zbs-block-editor { display: grid; gap: 14px; padding: 20px; }
.zbs-title-field { position: relative; display: grid; gap: 7px; color: #4e4744; font-size: 12px; font-weight: 700; }
.zbs-title-field input { width: 100%; padding: 12px 50px 12px 13px; border: 1px solid #d8dce4; border-radius: 7px; color: #282a2f; background: #fff; font: inherit; font-size: 13px; outline: none; }
.zbs-title-field small { position: absolute; right: 10px; bottom: 12px; color: #969ca8; font-size: 9px; font-weight: 500; }
.zbs-content-block { padding: 14px; border: 1px solid #e1e4e9; border-radius: 9px; background: #fbfcfe; }
.zbs-content-block-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 11px; }
.zbs-content-block-head > span { display: grid; gap: 2px; }
.zbs-content-block-head i { color: #34373d; font-size: 12px; font-style: normal; font-weight: 750; }
.zbs-content-block-head small { color: #9a9fac; font-size: 10px; }
.zbs-content-block-head > b { min-width: 28px; padding: 4px 6px; border-radius: 5px; color: #6f78a8; background: #f0f3ff; font-size: 9px; text-align: center; }
.zbs-content-block textarea { width: 100%; resize: vertical; padding: 12px; border: 1px solid #d8dce4; border-radius: 7px; color: #333640; background: #fff; font: inherit; font-size: 12px; line-height: 1.55; outline: none; }
.zbs-content-block :is(textarea,input):focus,.zbs-title-field input:focus { border-color: #4d86e8; box-shadow: 0 0 0 3px rgba(45,111,226,.09); }
.zbs-field-helper { display: flex; justify-content: space-between; gap: 12px; margin-top: 7px; color: #9298a3; font-size: 9px; }
.zbs-field-helper code { color: #b3293c; }
.zbs-table-editor { display: grid; gap: 6px; }
.zbs-table-row { display: grid; grid-template-columns: 22px minmax(120px,.85fr) minmax(150px,1.15fr) 30px; align-items: center; overflow: hidden; border: 1px solid #dfe3ea; border-radius: 6px; background: #fff; }
.zbs-table-row > i { color: #a0a8b7; font-size: 13px; font-style: normal; text-align: center; cursor: grab; }
.zbs-table-row input { min-width: 0; padding: 10px; border: 0; border-left: 1px solid #e2e5eb; color: #3a3e48; background: transparent; font: inherit; font-size: 11px; outline: none; }
.zbs-table-row button { width: 30px; height: 34px; border: 0; border-left: 1px solid #e2e5eb; color: #e04a5e; background: #fff; font-size: 14px; cursor: pointer; }
.zbs-add-row { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; padding: 6px 0; border: 0; color: #2f73df; background: transparent; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.zbs-add-row .app-icon { width: 14px; height: 14px; }
.zbs-action-fields { display: grid; grid-template-columns: .7fr 1.3fr; gap: 10px; }
.zbs-action-fields label { display: grid; gap: 6px; color: #696c74; font-size: 10px; font-weight: 700; }
.zbs-action-fields input { min-width: 0; padding: 10px; border: 1px solid #d8dce4; border-radius: 6px; color: #343740; background: #fff; font: inherit; font-size: 11px; outline: none; }
.zbs-action-list { display: grid; gap: 10px; }
.zbs-action-empty { padding: 14px; border: 1px dashed #cfd8e7; border-radius: 8px; color: #7d8797; background: #fff; font-size: 11px; line-height: 1.5; text-align: center; }
.zbs-action-item { overflow: hidden; border: 1px solid #dce3ed; border-radius: 9px; background: #fff; }
.zbs-action-item-head { min-height: 37px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-bottom: 1px solid #edf0f5; background: #f7faff; }
.zbs-action-item-head > span { display: flex; align-items: center; gap: 7px; }
.zbs-action-item-head b { color: #303846; font-size: 11px; }
.zbs-action-item-head em { padding: 3px 7px; border-radius: 999px; color: #1768c7; background: #e7f2ff; font-size: 9px; font-style: normal; font-weight: 750; white-space: nowrap; }
.zbs-action-item-head button { width: 25px; height: 25px; display: grid; place-items: center; border: 0; border-radius: 6px; color: #d33d55; background: transparent; font-size: 15px; cursor: pointer; }
.zbs-action-item-head button:hover { background: #fff0f2; }
.zbs-action-item-body { display: grid; gap: 9px; padding: 11px; }
.zbs-action-item-body label { display: grid; gap: 5px; color: #596170; font-size: 10px; font-weight: 700; }
.zbs-action-item-body :is(select,input) { width: 100%; min-width: 0; padding: 10px; border: 1px solid #d8dfe9; border-radius: 7px; color: #303743; background: #fff; font: inherit; font-size: 11px; outline: none; }
.zbs-action-item-body :is(select,input):focus { border-color: #4384e8; box-shadow: 0 0 0 3px rgba(45,111,226,.08); }
.zbs-action-item-fields { display: grid; grid-template-columns: .72fr 1.28fr; gap: 9px; }
.zbs-action-hint { display: flex; justify-content: space-between; gap: 10px; color: #8992a1; font-size: 9px; line-height: 1.4; }
.zbs-action-hint strong { color: #3977cc; font-size: 9px; white-space: nowrap; }
.zbs-action-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.zbs-action-toolbar > span { color: #3d75c4; font-size: 10px; font-weight: 750; text-align: right; }
.zbs-action-policy { margin: 3px 0 0; color: #9098a4; font-size: 9px; line-height: 1.45; }
.zbs-action-policy a { color: #3277d7; font-weight: 650; text-decoration: none; }
.zbs-message-actions { display: grid; gap: 1px; border-top: 1px solid #e8edf2; }
.zbs-message-actions .zbs-message-cta { width: 100%; margin: 0; border-radius: 0; background: #fff; color: #1478f2; }
.zbs-message-actions .zbs-message-cta:first-child { color: #fff; background: #1478f2; }
.zbs-message-actions .zbs-message-cta + .zbs-message-cta { border-top: 1px solid #edf1f5; }
.zbs-builder-preview-pane { position: sticky; top: 164px; display: grid; gap: 12px; padding: 18px; border: 1px solid #e2ddd9; border-radius: 12px; background: #f7f6f5; box-shadow: 0 12px 32px rgba(45,38,34,.08); }
.zbs-builder-preview-head { display: flex; align-items: center; justify-content: space-between; }
.zbs-builder-preview-head > span { display: grid; gap: 2px; }
.zbs-builder-preview-head strong { font-size: 13px; }
.zbs-builder-preview-head small { color: #8e8884; font-size: 10px; }
.zbs-builder-preview-head em { padding: 4px 7px; border-radius: 20px; color: #15855b; background: #def7eb; font-size: 8px; font-style: normal; font-weight: 800; letter-spacing: .08em; }
.zalo-chat-preview { overflow: hidden; border: 1px solid #d9dee8; border-radius: 18px; background: #e8edf9; box-shadow: 0 12px 28px rgba(37,51,77,.12); }
.zalo-chat-status { display: flex; justify-content: space-between; padding: 8px 14px 5px; color: #fff; background: linear-gradient(110deg,#087fea,#10afe7); font-size: 9px; font-weight: 750; }
.zalo-chat-header { min-height: 60px; display: grid; grid-template-columns: 28px 1fr 28px; align-items: center; gap: 8px; padding: 7px 12px 10px; color: #fff; background: linear-gradient(110deg,#087fea,#10afe7); }
.zalo-chat-header > b { font-size: 30px; font-weight: 300; line-height: 1; }
.zalo-chat-header > span { min-width: 0; display: grid; }
.zalo-chat-header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.zalo-chat-header small { opacity: .84; margin-top: 2px; font-size: 9px; }
.zalo-chat-header > i { font-size: 23px; font-style: normal; text-align: center; }
.zalo-chat-conversation { min-height: 460px; padding: 16px 12px 22px; background: linear-gradient(180deg,#e8edf9,#e4eaf7); }
.zalo-chat-conversation > time { width: max-content; display: block; margin: 0 auto 15px; padding: 5px 10px; border-radius: 20px; color: #fff; background: rgba(104,113,130,.48); font-size: 9px; }
.zalo-chat-composer { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; min-height: 46px; padding: 8px 12px; color: #616875; background: #fff; }
.zalo-chat-composer span { font-size: 20px; }
.zalo-chat-composer em { color: #a2a7b0; font-size: 11px; font-style: normal; }
.zalo-chat-composer b { font-size: 11px; letter-spacing: 1px; }
.zbs-phone-message { padding: 0; }
.zbs-phone-message:has(.zbs-official-preview) { margin: -1px -1px 0; }
.zbs-official-preview { overflow: hidden; border-radius: 12px; box-shadow: 0 4px 14px rgba(39,56,87,.10); }
.zbs-official-preview iframe { height: 430px; }
.zbs-message-card { overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 4px 14px rgba(39,56,87,.12); }
.zbs-message-brand { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 10px; }
.zbs-message-brand img { width: 150px; height: 44px; object-fit: contain; object-position: left center; }
.zbs-message-brand i { color: #1888ef; font-size: 18px; font-style: normal; letter-spacing: 2px; }
.zbs-message-card h3 { margin: 0; padding: 4px 14px 8px; color: #202329; font-size: 15px; }
.zbs-message-copy { padding: 0 14px 13px; color: #4f535b; font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
.zbs-message-copy mark,.zbs-message-table mark { padding: 1px 2px; color: #24272d; background: #edf4ff; }
.zbs-message-table { display: grid; gap: 7px; padding: 0 14px 14px; }
.zbs-message-table div { display: grid; grid-template-columns: minmax(80px,.8fr) minmax(0,1.2fr); gap: 10px; color: #4c5058; font-size: 10px; }
.zbs-message-table span:last-child { color: #272a30; font-weight: 650; overflow-wrap: anywhere; }
.zbs-message-cta { display: block; width: calc(100% - 28px); margin: 0 14px 14px; padding: 11px; border: 0; border-radius: 7px; color: #fff; background: #1478f2; font-size: 12px; font-weight: 750; text-align: center; }
.zbs-preview-note { display: flex; align-items: flex-start; gap: 8px; color: #85817e; font-size: 9px; line-height: 1.5; }
.zbs-preview-note .app-icon { flex: 0 0 auto; width: 14px; height: 14px; }
.zbs-flat-actions { position: sticky; bottom: 0; z-index: 11; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 24px -36px -52px; padding: 14px 36px; border-top: 1px solid #e3ddd8; background: rgba(255,253,250,.96); box-shadow: 0 -8px 24px rgba(47,38,32,.06); backdrop-filter: blur(12px); }
.zbs-flat-actions > span { display: flex; gap: 9px; }
.zbs-preview-modal { width: min(980px,96vw); border-radius: 16px; }
.zbs-preview-modal .zbs-preview-layout { grid-template-columns: 400px minmax(0,1fr); gap: 28px; }
.zbs-preview-modal .zalo-chat-conversation { min-height: 470px; }

@media (max-width: 1350px) {
  .zbs-flat-layout { grid-template-columns: minmax(0,1fr) 350px; gap: 18px; }
}
@media (max-width: 1180px) {
  .zbs-flat-head { top: 56px; grid-template-columns: 1fr auto; margin-inline: -16px; padding-inline: 16px; }
  .zbs-flat-head > div:nth-child(2) { grid-row: 2; grid-column: 1 / -1; }
  .zbs-save-state { display: none; }
  .zbs-flat-layout { grid-template-columns: 1fr; }
  .zbs-builder-preview-pane { position: static; grid-row: 1; max-width: 430px; width: 100%; margin: 0 auto; }
  .zbs-preview-modal .zbs-preview-layout { grid-template-columns: 1fr; }
  .zbs-preview-modal .zalo-chat-preview { width: min(100%,400px); margin: 0 auto; }
  .zbs-flat-actions { margin-inline: -16px; padding-inline: 16px; }
}
@media (max-width: 620px) {
  .zbs-flat-head { align-items: start; }
  .zbs-flat-head-actions .primary-button { display: none; }
  .zbs-back-link { padding-left: 0; }
  .zbs-compose-card-head,.zbs-compose-card > .zbs-builder-fields,.zbs-theme-options,.zbs-block-editor { padding: 14px; }
  .zbs-builder-fields,.zbs-theme-options,.zbs-action-fields,.zbs-action-item-fields { grid-template-columns: 1fr; }
  .zbs-table-row { grid-template-columns: 22px minmax(90px,.8fr) minmax(105px,1.2fr) 30px; }
  .zbs-builder-preview-pane { padding: 10px; }
  .zbs-flat-actions { align-items: stretch; flex-direction: column-reverse; }
  .zbs-flat-actions > span { display: grid; grid-template-columns: 1fr; }
  .zbs-flat-actions button { width: 100%; }
}

/* Product shell: medium-blue collapsible navigation */
.sidebar {
  width: 240px;
  padding: 14px 12px;
  border-right: 1px solid #376b92;
  color: #f2f8fc;
  background:
    radial-gradient(circle at 18% 4%,rgba(123,201,255,.26),transparent 210px),
    linear-gradient(180deg,#2b638e 0%,#235579 58%,#1b4567 100%);
  box-shadow: 8px 0 30px rgba(23,68,101,.13);
  transition: width .2s ease,padding .2s ease,transform .2s ease;
}
.sidebar-brand-row { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sidebar .brand { min-width: 0; margin: 0; color: #fff; }
.sidebar .brand-mark,.auth-brand-logo { border: 1px solid rgba(130,202,255,.34); color: #fff; background: linear-gradient(145deg,#35a2ee,#1764a8); box-shadow: 0 8px 20px rgba(12,78,132,.24); font-size: 11px; font-weight: 850; letter-spacing: -.02em; }
.sidebar .brand strong { color: #fff; }.sidebar .brand span { color: #c5dbea; }
.sidebar-collapse-button { width: 30px; height: 30px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid rgba(206,230,247,.3); border-radius: 9px; color: #e2f2fc; background: rgba(255,255,255,.1); cursor: pointer; }
.sidebar-collapse-button:hover { color: #fff; background: rgba(255,255,255,.18); }
.sidebar-collapse-button .app-icon,.sidebar-collapse-button .glass-icon { width: 15px; height: 15px; transition: transform .2s ease; }
.sidebar .nav-section-label { color: #b1ccde; }
.sidebar .nav-item { color: #e1edf5; }
.sidebar .nav-item:hover { color: #fff; background: rgba(255,255,255,.11); }
.sidebar .nav-item.active,.sidebar .nav-item.group-active { color: #fff; background: linear-gradient(90deg,rgba(76,183,247,.46),rgba(35,132,201,.27)); box-shadow: inset 3px 0 #70ccff; }
.sidebar .nav-submenu button { color: #d2e4ef; }.sidebar .nav-submenu button:hover,.sidebar .nav-submenu button.active { color: #fff; background: rgba(105,194,248,.2); }
.sidebar .sidebar-foot { border-color: rgba(205,230,246,.24); background: rgba(255,255,255,.09); }
.sidebar .sidebar-foot strong { color: #fff; }.sidebar .sidebar-foot span { color: #bad2e2; }
.main-content { margin-left: 240px; width: calc(100% - 240px); transition: margin-left .2s ease,width .2s ease; }
body.sidebar-collapsed .sidebar { width: 76px; padding-inline: 10px; }
body.sidebar-collapsed .main-content { margin-left: 76px; width: calc(100% - 76px); }
body.sidebar-collapsed .sidebar-brand-row { justify-content: center; flex-wrap: wrap; }
body.sidebar-collapsed .sidebar .brand > div:last-child,
body.sidebar-collapsed .sidebar .nav-section-label,
body.sidebar-collapsed .sidebar .nav-item > span:not(.nav-icon),
body.sidebar-collapsed .sidebar .nav-parent-caret,
body.sidebar-collapsed .sidebar .sidebar-foot > div:last-child { display: none; }
body.sidebar-collapsed .sidebar .brand { justify-content: center; }
body.sidebar-collapsed .sidebar-collapse-button .app-icon,
body.sidebar-collapsed .sidebar-collapse-button .glass-icon { transform: rotate(180deg); }
body.sidebar-collapsed .sidebar .main-nav { align-items: center; }
body.sidebar-collapsed .sidebar .nav-item { width: 48px; justify-content: center; padding-inline: 0; }
body.sidebar-collapsed .sidebar .nav-icon { margin: 0; }
body.sidebar-collapsed .sidebar .nav-submenu { display: none; }
body.sidebar-collapsed .sidebar .nav-submenu:not([hidden]) {
  position: fixed;
  z-index: 140;
  width: 208px;
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 10px;
  overflow: visible;
  border: 1px solid rgba(183,222,248,.45);
  border-radius: 13px;
  background: linear-gradient(155deg,#2b668f,#1d4d70);
  box-shadow: 0 18px 44px rgba(13,48,73,.3);
}
body.sidebar-collapsed .sidebar .nav-submenu:not([hidden])::before { content: "Zalo Mini App"; padding: 4px 9px 7px; color: #fff; font-size: 11px; font-weight: 780; letter-spacing: .02em; }
body.sidebar-collapsed .sidebar .nav-submenu:not([hidden]) button { min-height: 38px; padding: 8px 10px 8px 22px; color: #e5f3fc; border-radius: 9px; font-size: 11.5px; }
body.sidebar-collapsed .sidebar .nav-submenu:not([hidden]) button:hover,body.sidebar-collapsed .sidebar .nav-submenu:not([hidden]) button.active { color: #fff; background: rgba(114,202,255,.22); }
body.sidebar-collapsed .sidebar .sidebar-foot { min-height: 44px; display: grid; grid-template-columns: 1fr; place-items: center; padding: 8px; }

/* Data Hub actions, exports and sticky user-selected columns */
.datahub-export-wrap { position: relative; }
.datahub-export-menu { position: absolute; top: calc(100% + 7px); right: 0; z-index: 28; width: 238px; padding: 6px; border: 1px solid #d9e5ee; border-radius: 11px; background: #fff; box-shadow: 0 16px 38px rgba(31,57,78,.16); }
.datahub-export-menu button { width: 100%; display: grid; gap: 2px; padding: 9px 10px; border: 0; border-radius: 8px; color: #2b4054; background: transparent; text-align: left; cursor: pointer; }
.datahub-export-menu button:hover { background: #eef7ff; }.datahub-export-menu strong { font-size: 12px; }.datahub-export-menu span { color: #7b8b9b; font-size: 10px; }
#dataHubRecordsTable { --datahub-sticky-first-width: 150px; }
#dataHubRecordsTable :is(th,td).datahub-sticky-col-1,#dataHubRecordsTable :is(th,td).datahub-sticky-col-2 { position: sticky; z-index: 2; min-width: 150px; background: #fff; background-clip: padding-box; }
#dataHubRecordsTable :is(th,td).datahub-sticky-col-1 { left: 0; }
#dataHubRecordsTable :is(th,td).datahub-sticky-col-2 { left: var(--datahub-sticky-first-width); box-shadow: 10px 0 15px -16px rgba(15,44,67,.72); }
#dataHubRecordsTable thead :is(th).datahub-sticky-col-1,#dataHubRecordsTable thead :is(th).datahub-sticky-col-2 { z-index: 6; background: #f3f8fd; }
#dataHubRecordsTable tbody tr:nth-child(even) :is(td).datahub-sticky-col-1,#dataHubRecordsTable tbody tr:nth-child(even) :is(td).datahub-sticky-col-2 { background: #f9fcff; }
#dataHubRecordsTable tbody tr:hover :is(td).datahub-sticky-col-1,#dataHubRecordsTable tbody tr:hover :is(td).datahub-sticky-col-2 { background: #eef7ff; }
#dataHubRecordsTable .datahub-actions-column { min-width: 132px; text-align: center; }
.row-action-group { justify-content: center; gap: 5px; }
.row-icon-action { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 8px; color: #347dbb; background: transparent; cursor: pointer; }
.row-icon-action:hover,.row-icon-action[aria-expanded="true"] { border-color: #cee1ef; color: #176cad; background: #eaf5fd; }
.row-icon-action .app-icon,.row-icon-action .glass-icon { width: 17px; height: 17px; object-fit: contain; }
.row-icon-action > span { transform: translateY(-2px); font-size: 13px; font-weight: 800; letter-spacing: 1px; }
.datahub-row-menu { position: fixed; z-index: 130; width: 255px; padding: 6px; border: 1px solid #d6e2eb; border-radius: 12px; background: #fff; box-shadow: 0 18px 44px rgba(24,48,68,.2); }
.datahub-row-menu button { width: 100%; display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 9px; align-items: center; padding: 9px 10px; border: 0; border-radius: 8px; color: #30465a; background: transparent; text-align: left; cursor: pointer; }
.datahub-row-menu button:hover { background: #eff7fd; }.datahub-row-menu .app-icon,.datahub-row-menu .glass-icon { width: 22px; height: 22px; object-fit: contain; }
.datahub-row-menu strong,.datahub-row-menu small { display: block; }.datahub-row-menu strong { font-size: 11.5px; }.datahub-row-menu small { margin-top: 2px; color: #83919f; font-size: 9.5px; }
.datahub-custom-column { grid-template-columns: minmax(0,1fr) 105px 66px 58px 34px 34px; }
.datahub-column-order { display: grid; grid-template-columns: 27px 27px; gap: 3px; justify-self: end; }
.datahub-column-order button { width: 27px; height: 30px; border: 1px solid #dbe6ee; border-radius: 7px; color: #56748d; background: #f7fafc; font-size: 13px; cursor: pointer; }
.datahub-column-order button:hover:not(:disabled) { color: #1768aa; background: #e8f4fd; }.datahub-column-order button:disabled { opacity: .3; cursor: default; }

@media (max-width: 780px) {
  body.sidebar-collapsed .sidebar { width: 240px; padding: 14px 12px; }
  body.sidebar-collapsed .main-content { width: 100%; margin-left: 0; }
  .sidebar-collapse-button { display: none; }
  body.sidebar-collapsed .sidebar .brand > div:last-child,
  body.sidebar-collapsed .sidebar .nav-section-label,
  body.sidebar-collapsed .sidebar .nav-item > span:not(.nav-icon),
  body.sidebar-collapsed .sidebar .nav-parent-caret,
  body.sidebar-collapsed .sidebar .sidebar-foot > div:last-child { display: initial; }
  body.sidebar-collapsed .sidebar .nav-item { width: 100%; justify-content: flex-start; padding-inline: 11px; }
  body.sidebar-collapsed .sidebar .nav-submenu { display: block; }
  .datahub-custom-column { grid-template-columns: minmax(0,1fr) 58px 34px 34px; }
  .datahub-custom-column code,.datahub-custom-column em { display: none; }
}

.offer-redemption-panel { margin-top: 18px; }
.offer-redemption-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 20px 22px 14px; }
.offer-redemption-heading h3 { margin: 4px 0 5px; font-size: 18px; }
.offer-redemption-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.offer-redemption-heading > div:last-child { display: flex; gap: 8px; }
.offer-redemption-heading > div:last-child span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border-radius: 999px; color: #755c10; background: #fff7d6; font-size: 12px; white-space: nowrap; }
.offer-redemption-heading > div:last-child span.used { color: #11714d; background: #e9f9f1; }
.offer-redemption-status { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; color: #775d0a; background: #fff6cc; font-size: 12px; font-weight: 700; white-space: nowrap; }
.offer-redemption-status.used { color: #087348; background: #e5f8ee; }
@media (max-width: 760px) { .offer-redemption-heading { flex-direction: column; } }

.promotion-existing-code-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid #d7e7f2;
  border-radius: 11px;
  color: #2b6f9d;
  background: #f2f9fe;
}
.promotion-existing-code-notice[hidden] { display: none; }
.promotion-existing-code-notice :is(.app-icon,.glass-icon) { width: 21px; height: 21px; flex: 0 0 auto; }
.promotion-existing-code-notice > span { min-width: 0; display: grid; gap: 3px; }
.promotion-existing-code-notice strong { color: #245d83; font-size: 10.5px; }
.promotion-existing-code-notice small { color: #6d8393; font-size: 9.5px; line-height: 1.45; }
.promotion-code-editor input[readonly],.promotion-code-editor input:disabled,.promotion-code-editor select:disabled,.promotion-code-editor textarea:disabled { color: #718392; background: #f3f6f8; cursor: not-allowed; }
.promotion-code-editor .promotion-choice-field label:has(input:disabled) { opacity: .72; cursor: default; }
.miniapp-offer-actions button:disabled { opacity: .28; cursor: not-allowed; }
.miniapp-offer-actions button:disabled:hover { color: #4e6a80; background: #fff; }

@media (max-width: 760px) {
  .topbar { height: 64px; padding: 0 16px; }.topbar h1 { font-size: 19px; }.topbar .eyebrow { display: none; }
  .view { padding: 20px 16px 40px; }.section-toolbar { align-items: stretch; }.section-toolbar .button-row { width: 100%; }.section-toolbar .button-row > * { flex: 1 1 auto; justify-content: center; }
  .welcome-card { min-height: 0; align-items: stretch; padding: 22px; }.welcome-card h2 { font-size: 21px; }.welcome-actions { justify-content: flex-start; }
  .quick-action-grid, .campaign-insights, .stat-grid, .history-overview { grid-template-columns: 1fr; }
  .datahub-tree { grid-template-columns: 1fr; }.datahub-tree-panel { max-height: 350px; overflow-y: auto; }
  .campaign-list-tools, .history-tools { grid-template-columns: 1fr; }.campaign-tabs { overflow-x: auto; }.campaign-tabs button { flex: 0 0 auto; }
  .workflow-builder { margin: -20px -16px -40px; height: auto; min-height: calc(100vh - 64px); overflow: visible; }.workflow-toolbar { position: static; grid-template-columns: 1fr; }.workflow-toolbar-actions { grid-column: auto; flex-wrap: wrap; overflow: visible; }.workflow-workspace { display: flex; flex-direction: column; overflow: visible; }.workflow-palette { grid-template-columns: repeat(2,minmax(0,1fr)); }.workflow-canvas-stage { min-height: 620px; }.workflow-config { max-height: none; }
  .run-summary { grid-template-columns: auto 1fr auto; }.run-summary-meta { grid-column: 2; justify-items: start; }.run-detail { padding-left: 16px; }
}

@media (max-width: 480px) {
  .connection-badge { display: none; }.topbar-actions { margin-left: auto; }
  .quick-action-grid > button { min-height: 70px; }.welcome-actions > * { width: 100%; justify-content: center; }
  .campaign-insights article { min-height: 70px; }.workflow-palette { grid-template-columns: 1fr; }.workflow-viewport-controls { right: 10px; bottom: 10px; }.workflow-pan-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Royal champagne theme — derived from the crown brand mark */
:root {
  --blue: #9b5814;
  --blue-hover: #80450d;
  --blue-pressed: #633307;
  --blue-soft: #fff1d3;
  --bg: #fbf6ed;
  --surface: #fffdf9;
  --surface-subtle: #fff8ed;
  --line: #eadcc8;
  --line-strong: #d5b78d;
  --text: #352719;
  --muted: #756555;
  --orange: #b66a1b;
  --violet: #8b5b25;
  --shadow: 0 2px 8px rgba(91, 58, 24, .06), 0 14px 34px rgba(120, 76, 25, .045);
  --shadow-hover: 0 5px 15px rgba(91, 58, 24, .10), 0 20px 44px rgba(120, 76, 25, .07);
}

html, body, .app-shell { background: var(--bg); }
::selection { background: #f4d59b; color: #352719; }

.auth-gate {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 220, 154, .35), transparent 24rem),
    radial-gradient(circle at 86% 88%, rgba(194, 123, 42, .13), transparent 28rem),
    #fbf6ed;
}
.auth-card { border-color: #ead9bf; background: rgba(255, 253, 248, .96); box-shadow: 0 18px 55px rgba(96, 58, 20, .11); }
.auth-brand > span, .brand-mark { overflow: hidden; box-shadow: 0 3px 10px rgba(125, 76, 19, .16); }
.auth-brand-logo img, .brand-mark img { border-radius: inherit; }
.auth-brand small, .auth-loading, .auth-form p, .auth-form label small { color: var(--muted); }
.auth-form label { color: var(--text); }
.auth-form input { border-color: #c9aa80; background: #fffdf9; }
.auth-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(155, 88, 20, .16); }

.sidebar { border-right-color: #eadcc8; background: rgba(255, 253, 248, .97); box-shadow: 8px 0 30px rgba(103, 68, 30, .035); }
.brand-mark { width: 40px; height: 40px; border-radius: 11px; }
.brand span, .nav-section-label { color: #92785d; }
.nav-item { color: #604e3d; }
.nav-item:hover { background: #fff5e4; }
.nav-item.active { color: #70400f; background: linear-gradient(90deg, #ffe7b7, #fff6e7); }
.nav-item.active::before { background: linear-gradient(#d79a3e, #94500f); }
.nav-icon { color: #ad691f; }
.sidebar-foot { border-color: #ead9bf; background: linear-gradient(135deg, #fffaf1, #f9eedc); }

.main-content {
  background:
    radial-gradient(circle at 94% 1%, rgba(255, 208, 124, .22), transparent 28rem),
    radial-gradient(circle at 7% 16%, rgba(214, 151, 67, .10), transparent 24rem),
    var(--bg);
}
.topbar { border-bottom-color: rgba(226, 207, 180, .9); background: rgba(255, 253, 248, .84); }
.avatar { background: linear-gradient(145deg, #c8872f, #87480e); box-shadow: 0 4px 12px rgba(143, 80, 17, .24); }

.primary-button { border-color: transparent; background: linear-gradient(135deg, #a86116, #7c410b); box-shadow: 0 4px 10px rgba(130, 71, 13, .22); }
.primary-button:hover { border-color: transparent; background: linear-gradient(135deg, #914d0e, #663306); box-shadow: 0 6px 15px rgba(105, 54, 8, .27); }
.secondary-button { border-color: var(--line-strong); background: rgba(255, 253, 248, .94); }
.secondary-button:hover { border-color: #ad7b3e; background: #fff8ec; color: #714311; }
.text-button, .row-action, .campaign-name-link { color: #8b4d10; }
.text-button:hover, .row-action:hover, .campaign-row-actions .text-button:hover { background: #fff0d2; color: #6f3908; }
.icon-button { background: #f8eddd; }.icon-button:hover { background: #f1dec2; }

.welcome-card {
  border-color: #e5cfad;
  background:
    radial-gradient(circle at 91% 9%, rgba(255, 216, 140, .58), transparent 26%),
    radial-gradient(circle at 78% 112%, rgba(184, 106, 24, .20), transparent 38%),
    radial-gradient(circle at 4% 6%, rgba(255, 241, 205, .88), transparent 34%),
    rgba(255, 253, 248, .95);
  box-shadow: 0 14px 40px rgba(113, 70, 24, .09);
}
.pill, .record-count-badge { border-color: #e3c38f; background: rgba(255, 239, 204, .92); color: #7b470e; }
.quick-action-grid > button, .stat-card, .panel, .campaign-insights article, .customer360-insights article, .history-overview article {
  border-color: var(--line);
  background: rgba(255, 253, 249, .92);
  box-shadow: var(--shadow);
}
.quick-action-grid > button:hover, .stat-card:hover { border-color: #d1ae7a; box-shadow: var(--shadow-hover); }
.quick-action-icon.data, .stat-icon.blue { background: linear-gradient(145deg, #f3c66f, #a96115); }
.quick-action-icon.campaign, .quick-action-icon.customer, .stat-icon.violet { background: linear-gradient(145deg, #dca24e, #7d4816); }
.quick-action-icon.history, .stat-icon.green { background: linear-gradient(145deg, #edc88c, #9f6a2d); }
.stat-icon.orange { background: linear-gradient(145deg, #ffe0a0, #b86b18); }

.datahub-tree-panel, .workflow-palette, .workflow-config { background: rgba(255, 253, 248, .9); }
.datahub-table-button.active { background: linear-gradient(90deg, #ffe9bd, #fff7e9); color: #77440e; }
.datahub-table-button.active > small { color: #8a5012; }
.table-tools, .campaign-list-tools, .history-tools, .table-context-bar { background: rgba(255, 249, 239, .92); }
.table-panel .table-wrap, .table-wrap tbody tr:nth-child(odd) td:last-child { background: #fffdf9; }
.table-wrap tbody tr:nth-child(even), .table-wrap tbody tr:nth-child(even) td:last-child { background: #fffaf2; }
.table-wrap tbody tr:hover, .table-wrap tbody tr:hover td:last-child, .customer360-row:hover { background: #fff2da; }
.table-wrap th:last-child { background: #fbf1e3; }
.campaign-tabs button:hover { background: #f9eddb; }.campaign-tabs button.active { background: #fff2d9; }
.owner-avatar, .profile-avatar { background: linear-gradient(145deg, #ffedc8, #e4bd7c); color: #75410d; }

.workflow-builder {
  background:
    radial-gradient(circle at 8% 4%, rgba(255, 205, 116, .25), transparent 24rem),
    radial-gradient(circle at 90% 12%, rgba(190, 119, 37, .13), transparent 28rem),
    #faf4ea;
}
.workflow-toolbar, .workflow-context-tabs { background: rgba(255, 253, 248, .9); }
.workflow-canvas { background: radial-gradient(circle at 48% 0%, rgba(255,255,255,.92), transparent 24rem), linear-gradient(180deg, rgba(255,250,241,.9), rgba(248,239,225,.58)); }
.workflow-palette > button:hover { border-color: #bd8748; background: #fff5e4; }
.workflow-palette > button b,
.workflow-palette > button:nth-of-type(1) b,
.workflow-palette > button:nth-of-type(2) b,
.workflow-palette > button:nth-of-type(3) b,
.workflow-palette > button:nth-of-type(4) b { background: linear-gradient(145deg, #efbf68, #9b5916); }
.workflow-node.datahub .workflow-node-icon,
.workflow-node.webhook .workflow-node-icon,
.workflow-node.miniapp .workflow-node-icon,
.workflow-node.condition .workflow-node-icon,
.workflow-node.send .workflow-node-icon,
.workflow-node.delay .workflow-node-icon,
.workflow-node.update .workflow-node-icon { background: linear-gradient(145deg, #e8b75e, #925015); }
.workflow-node-main:hover, .workflow-node.selected .workflow-node-main { border-color: #b77d3b; }
.workflow-node.selected .workflow-node-main { box-shadow: 0 0 0 3px rgba(155,88,20,.14), 0 10px 26px rgba(86,53,20,.11); }
.workflow-node.condition .workflow-node-outputs button { color: #874b10; }
.workflow-node-outputs button:hover, .workflow-node-outputs button.active { border-color: var(--blue); background: var(--blue); }
.workflow-node-report button { background: #fff0d2; color: #7d440c; }

.modal { border-color: rgba(236, 219, 194, .9); background: #fffdf9; box-shadow: 0 24px 70px rgba(83, 50, 16, .20); }
.modal-head { background: linear-gradient(180deg, #fffdf9, #fbf3e7); }
.profile-tags span { border-color: #e3c89f; background: #fff5e3; color: #7b4916; }
.profile-loyalty-card { border-color: #e1c79e; background: radial-gradient(circle at 100% 0, rgba(212,151,67,.25), transparent 45%), linear-gradient(135deg, #fff8ea, #fffdf9); }
.profile-loyalty-icon { background: #ffe7ba; color: #8a4c0f; }
.profile-linked-record { background: #fffaf2; }.profile-linked-record:hover { border-color: #c99c63; background: #fff3dc; }
.profile-linked-record > span > .app-icon, .datahub-profile-link > .app-icon { color: #9a5815; }
.datahub-profile-link { border-color: #e1c79e; background: #fff7e8; color: #794611; }
.datahub-profile-link:hover { border-color: #c28d4e; background: #ffefd0; }

@media (max-width: 520px) {
  .auth-gate { background: #fffaf2; }
  .auth-card { background: #fffaf2; }
}

/* Appointment operations */
.appointment-insights { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.appointment-insights > button { min-height: 92px; display: flex; align-items: center; gap: 13px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,253,249,.92); color: var(--text); text-align: left; box-shadow: var(--shadow); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.appointment-insights > button:hover { transform: translateY(-2px); border-color: #d1ae7a; box-shadow: var(--shadow-hover); }
.appointment-insights > button.active { border-color: #b47632; background: linear-gradient(135deg, #fff2d8, #fffaf0); box-shadow: 0 0 0 2px rgba(155,88,20,.11), var(--shadow); }
.appointment-insights > button > span:last-child { min-width: 0; display: grid; }
.appointment-insights small { color: var(--muted); font-size: 11.5px; font-weight: 650; }
.appointment-insights strong { margin: 1px 0; font-size: 24px; line-height: 1.1; letter-spacing: -.03em; }
.appointment-insights i { color: #8a7a69; font-size: 10.5px; font-style: normal; }
.appointment-metric-icon { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; }
.appointment-metric-icon .app-icon { width: 19px; height: 19px; }
.appointment-metric-icon.pending { background: #fff0d2; color: #92500f; }
.appointment-metric-icon.confirmed { background: #eaf8f1; color: #16875b; }
.appointment-metric-icon.completed { background: #edf1f7; color: #536074; }
.appointment-metric-icon.cancelled { background: var(--red-soft); color: var(--red); }

.appointment-list-panel { overflow: hidden; }
.appointment-tools { display: grid; grid-template-columns: minmax(300px, 1fr) 200px 240px; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: rgba(255,249,239,.92); }
.appointment-tools .search-box { width: 100%; }
.appointment-context-bar .app-icon { color: #9a5815; }
.appointment-table { width: 100%; min-width: 960px; table-layout: fixed; }
.appointment-table th { height: 43px; }
.appointment-table td { height: 74px; }
.appointment-table th:nth-child(1) { width: 135px; }
.appointment-table th:nth-child(2) { width: 180px; }
.appointment-table th:nth-child(3) { width: 145px; }
.appointment-table th:nth-child(4) { width: 190px; }
.appointment-table th:nth-child(5) { width: 125px; }
.appointment-table th:nth-child(6) { width: 110px; }
.appointment-table th:nth-child(7) { width: 124px; }
.appointment-table td:nth-child(3), .appointment-table td:nth-child(4) { white-space: normal; }
.appointment-row { cursor: pointer; }
.appointment-row:focus-visible { outline: 2px solid #a86116; outline-offset: -2px; }
.appointment-time-cell, .appointment-branch-cell, .appointment-source { display: inline-flex; align-items: center; gap: 9px; }
.appointment-time-cell > span:last-child, .appointment-time-cell strong, .appointment-time-cell small, .appointment-table td > strong, .appointment-table td > small { display: block; }
.appointment-table .customer-identity > span:last-child, .appointment-table .customer-identity strong, .appointment-table .customer-identity small { display: block; }
.appointment-time-cell strong, .appointment-table td > strong { font-size: 12.5px; }
.appointment-time-cell small, .appointment-table td > small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.appointment-date-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; background: #fff0d2; color: #92500f; }
.appointment-date-icon .app-icon { width: 17px; height: 17px; }
.appointment-branch-cell { max-width: 235px; color: #604e3d; line-height: 1.45; }
.appointment-branch-cell .app-icon { width: 16px; height: 16px; flex: 0 0 auto; color: #a86116; }
.appointment-source { padding: 5px 8px; border: 1px solid #e2c79f; border-radius: 999px; background: #fff7e8; color: #794611; font-size: 11px; font-weight: 650; white-space: nowrap; }
.appointment-source .app-icon { width: 14px; height: 14px; }
.appointment-list-panel .empty-state.show { min-height: 320px; display: grid; align-content: center; }

.appointment-detail-modal { width: min(960px, 96vw); overflow: hidden; }
.appointment-modal-head { align-items: center; }
.appointment-detail-code { display: inline-flex; margin-bottom: 5px; padding: 3px 7px; border: 1px solid #e3c38f; border-radius: 999px; background: #fff0d2; color: #7b470e; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; }
.appointment-head-actions { display: flex; align-items: center; gap: 10px; }
.appointment-detail-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); max-height: calc(91vh - 154px); overflow-y: auto; }
.appointment-detail-main { min-width: 0; padding: 20px 22px 24px; }
.appointment-customer-card { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(150px, .75fr); align-items: center; gap: 14px; padding: 15px; border: 1px solid #e5cfad; border-radius: 12px; background: radial-gradient(circle at 100% 0, rgba(255,216,140,.38), transparent 46%), linear-gradient(135deg, #fff8ea, #fffdf9); }
.appointment-customer-card > div { min-width: 0; display: grid; }
.appointment-customer-card small { color: var(--muted); font-size: 10.5px; }
.appointment-customer-card strong { margin: 2px 0; overflow: hidden; color: var(--text); font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.appointment-customer-card div > span { color: var(--muted); font-size: 11.5px; }
.appointment-vehicle-summary { padding-left: 15px; border-left: 1px solid #eadcc8; }
.appointment-form { margin-top: 20px; }
.appointment-section-heading, .appointment-history-head { display: flex; align-items: center; gap: 11px; }
.appointment-section-heading > span, .appointment-history-head > span { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; background: #fff0d2; color: #92500f; }
.appointment-section-heading .app-icon, .appointment-history-head .app-icon { width: 17px; height: 17px; }
.appointment-section-heading > div, .appointment-history-head > div { display: grid; }
.appointment-section-heading strong, .appointment-history-head strong { font-size: 13px; }
.appointment-section-heading small, .appointment-history-head small { margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.appointment-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.appointment-form-grid label { min-width: 0; display: grid; gap: 6px; }
.appointment-form-grid label.full { grid-column: 1 / -1; }
.appointment-form-grid label > span { color: #574838; font-size: 11.5px; font-weight: 650; }
.appointment-form-grid input, .appointment-form-grid textarea { width: 100%; min-height: 41px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fffdf9; color: var(--text); font: inherit; font-size: 12.5px; outline: 0; }
.appointment-form-grid textarea { min-height: 92px; resize: vertical; }
.appointment-form-grid input:focus, .appointment-form-grid textarea:focus { border-color: #a86116; box-shadow: 0 0 0 2px rgba(155,88,20,.13); }
.appointment-form-grid input:disabled, .appointment-form-grid textarea:disabled { border-color: #eadcc8; background: #f8f0e5; color: #776b60; }
.appointment-save-button { margin-top: 15px; }
.appointment-locked-notice { margin-top: 15px; }

.appointment-history-panel { min-width: 0; padding: 20px; border-left: 1px solid var(--line); background: rgba(255,249,239,.72); }
.appointment-history { margin-top: 20px; }
.appointment-history-item { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; min-height: 70px; }
.appointment-history-item > span { position: relative; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #dfc9aa; border-radius: 9px; background: #fffdf9; color: #8c5c29; }
.appointment-history-item > span > .app-icon { width: 15px; height: 15px; }
.appointment-history-item > span > i { position: absolute; top: 31px; bottom: -40px; left: 50%; width: 1px; background: #decdb5; }
.appointment-history-item > div { min-width: 0; padding-top: 2px; }
.appointment-history-item strong { display: block; font-size: 11.5px; line-height: 1.45; }
.appointment-history-item small { display: block; margin-top: 5px; color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.appointment-history-item.confirmed > span, .appointment-history-item.completed > span { border-color: #b9dfcd; background: #eaf8f1; color: #16875b; }
.appointment-history-item.cancelled > span { border-color: #efc9cf; background: var(--red-soft); color: var(--red); }
.appointment-history-item.rescheduled > span { border-color: #e4c996; background: #fff4de; color: #9a5a10; }
.appointment-modal-actions { background: #fffaf2; }
.appointment-modal-actions > div { flex-wrap: wrap; justify-content: flex-end; }
.appointment-cancel-button, .appointment-confirm-button { min-height: 36px; padding: 7px 13px; border-radius: 8px; font-size: 12px; font-weight: 650; }
.appointment-cancel-button { border: 1px solid #e2b7bd; background: #fff8f8; color: var(--red); }
.appointment-cancel-button:hover { background: var(--red-soft); }
.appointment-confirm-button { border: 1px solid #a8d8bf; background: #effaf4; color: #126f4c; }
.appointment-confirm-button:hover { background: #e2f6eb; }

@media (max-width: 1120px) {
  .appointment-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appointment-tools { grid-template-columns: minmax(260px, 1fr) 190px; }
  .appointment-tools #appointmentBranchFilter { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .appointment-insights { grid-template-columns: 1fr; }
  .appointment-tools { grid-template-columns: 1fr; }
  .appointment-tools #appointmentBranchFilter { grid-column: auto; }
  .appointment-detail-modal { width: min(100%, 620px); max-height: 96vh; }
  .appointment-detail-layout { grid-template-columns: 1fr; max-height: calc(96vh - 164px); }
  .appointment-history-panel { border-top: 1px solid var(--line); border-left: 0; }
  .appointment-modal-actions { align-items: stretch; flex-direction: column; }
  .appointment-modal-actions > div { width: 100%; }
  .appointment-modal-actions button { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 520px) {
  .appointment-customer-card { grid-template-columns: auto minmax(0, 1fr); }
  .appointment-vehicle-summary { grid-column: 1 / -1; padding: 12px 0 0; border-top: 1px solid #eadcc8; border-left: 0; }
  .appointment-form-grid { grid-template-columns: 1fr; }
  .appointment-form-grid label.full { grid-column: auto; }
  .appointment-detail-main, .appointment-history-panel { padding: 16px; }
  .appointment-head-actions .status-badge { display: none; }
}

/* Loyalty Center — tier rules shared by Customer 360 and Zalo Mini App */
.customer360-toolbar-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; }
.profile-loyalty-card { grid-template-columns: 1.25fr repeat(3, minmax(105px, .72fr)); }
.profile-loyalty-icon.tier-new { background: #f0dfcb; color: #8a572d; }
.profile-loyalty-icon.tier-silver { background: #e9edf2; color: #5c6675; }
.profile-loyalty-icon.tier-gold { background: #fff0c6; color: #9a6500; }
.profile-loyalty-icon.tier-diamond { background: #e8e5ff; color: #5d50a5; }
.profile-tier-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.profile-tier-benefits > span { min-width: 0; display: flex; align-items: flex-start; gap: 7px; padding: 9px 10px; border: 1px solid #ead8bd; border-radius: 9px; background: #fffaf2; color: #594a3d; font-size: 11.5px; line-height: 1.45; }
.profile-tier-benefits .app-icon { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; color: #27805b; }
.form-grid input:disabled { border-color: #e3d6c5; background: #f5efe7; color: #766b61; cursor: not-allowed; }

.membership-config-modal { width: min(1110px, calc(100vw - 32px)); max-height: 94vh; overflow: hidden; }
.membership-config-head { align-items: center; padding: 22px 24px; }
.modal-eyebrow { display: block; margin-bottom: 5px; color: #9a5815; font-size: 10.5px; font-weight: 750; letter-spacing: .11em; }
#membershipConfigForm { max-height: calc(94vh - 91px); overflow-y: auto; }
.membership-rule-summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; margin: 20px 24px 0; padding: 15px 16px; border: 1px solid #e6cfaa; border-radius: 12px; background: linear-gradient(135deg, #fff5e2, #fffaf1); }
.membership-summary-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(145deg, #efbe67, #9b5916); color: #fff; box-shadow: 0 6px 14px rgba(126,72,17,.18); }
.membership-summary-icon .app-icon { width: 19px; height: 19px; }
.membership-rule-summary > div { min-width: 0; }
.membership-rule-summary strong { display: block; color: #493421; font-size: 13.5px; }
.membership-rule-summary p { max-width: 680px; margin: 3px 0 0; color: #796754; font-size: 11.5px; line-height: 1.5; }
.membership-rule-summary > small { color: #8c755f; font-size: 10.5px; white-space: nowrap; }
.membership-tier-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 18px 24px 4px; }
.membership-tier-card { --tier-accent: #8b5d31; --tier-soft: #f5e9dc; position: relative; min-width: 0; overflow: hidden; padding: 16px; border: 1px solid #e6d5bd; border-radius: 14px; background: #fffdf9; box-shadow: 0 3px 12px rgba(75,48,22,.045); }
.membership-tier-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--tier-accent); }
.membership-tier-card.tier-silver { --tier-accent: #687486; --tier-soft: #edf0f4; }
.membership-tier-card.tier-gold { --tier-accent: #ae790e; --tier-soft: #fff1cb; }
.membership-tier-card.tier-diamond { --tier-accent: #6557b1; --tier-soft: #eeebff; }
.membership-tier-card > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding-bottom: 13px; border-bottom: 1px solid #eee2d1; }
.membership-tier-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--tier-soft); color: var(--tier-accent); }
.membership-tier-mark .app-icon { width: 18px; height: 18px; }
.membership-tier-card header > div { min-width: 0; display: grid; }
.membership-tier-card header small { color: var(--tier-accent); font-size: 9.5px; font-weight: 750; letter-spacing: .07em; }
.membership-tier-card header strong { margin-top: 2px; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.membership-tier-card header > b { padding: 4px 7px; border-radius: 999px; background: var(--tier-soft); color: var(--tier-accent); font-size: 10px; font-weight: 700; white-space: nowrap; }
.membership-tier-fields { display: grid; grid-template-columns: 1.2fr .8fr; gap: 10px; margin-top: 13px; }
.membership-tier-card label, .membership-benefit-field { min-width: 0; display: grid; gap: 6px; }
.membership-tier-card label > span, .membership-offer-field > span { color: #5b4b3c; font-size: 11.5px; font-weight: 650; }
.membership-tier-card input[type="text"], .membership-tier-card input[type="number"], .membership-tier-card input:not([type]), .membership-tier-card textarea { width: 100%; min-height: 40px; padding: 9px 10px; border: 1px solid #dfcfb9; border-radius: 8px; background: #fff; color: var(--text); font: inherit; font-size: 12.5px; outline: 0; }
.membership-tier-card textarea { min-height: 76px; resize: vertical; line-height: 1.45; }
.membership-tier-card input:focus, .membership-tier-card textarea:focus { border-color: var(--tier-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tier-accent) 14%, transparent); }
.membership-tier-card input:disabled { background: #f5f0e9; color: #8a7e72; }
.membership-tier-card label > small { min-height: 16px; color: #8a7a69; font-size: 10px; line-height: 1.4; }
.membership-benefit-field { margin-top: 11px; }
.membership-offer-field { display: grid; gap: 7px; margin-top: 11px; }
.membership-offer-field > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.membership-offer-choice { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px !important; padding: 8px 9px; border: 1px solid #e7d8c2; border-radius: 9px; background: #fffaf3; cursor: pointer; }
.membership-offer-choice:has(input:checked) { border-color: color-mix(in srgb, var(--tier-accent) 55%, #e7d8c2); background: color-mix(in srgb, var(--tier-soft) 58%, #fff); }
.membership-offer-choice input { width: 16px !important; height: 16px; min-height: 0 !important; accent-color: var(--tier-accent); }
.membership-offer-choice > span { min-width: 0; display: grid; }
.membership-offer-choice strong { overflow: hidden; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.membership-offer-choice small { margin-top: 2px; color: #877665; font-size: 9.5px; }
.membership-sync-note { display: flex; align-items: center; gap: 11px; margin: 14px 24px 20px; padding: 12px 14px; border: 1px solid #cbe4d8; border-radius: 11px; background: #f0faf5; color: #176e4e; }
.membership-sync-note > .app-icon { width: 20px; height: 20px; flex: 0 0 auto; }
.membership-sync-note > span { display: grid; }
.membership-sync-note strong { font-size: 12px; }
.membership-sync-note small { margin-top: 2px; color: #4d7968; font-size: 10.5px; line-height: 1.45; }
.membership-config-actions { position: sticky; bottom: 0; z-index: 2; background: rgba(255,253,249,.96); backdrop-filter: blur(14px); }

@media (max-width: 820px) {
  .membership-tier-list { grid-template-columns: 1fr; }
  .membership-rule-summary { grid-template-columns: auto 1fr; }
  .membership-rule-summary > small { grid-column: 2; white-space: normal; }
}

@media (max-width: 680px) {
  .customer360-toolbar-actions { width: 100%; justify-content: stretch; }
  .customer360-toolbar-actions > button { flex: 1 1 100%; justify-content: center; }
  .profile-loyalty-card, .profile-tier-benefits { grid-template-columns: 1fr; }
  .membership-config-modal { width: 100%; max-height: 96vh; }
  #membershipConfigForm { max-height: calc(96vh - 86px); }
  .membership-config-head, .membership-tier-list { padding-right: 16px; padding-left: 16px; }
  .membership-rule-summary { grid-template-columns: 1fr; margin-right: 16px; margin-left: 16px; }
  .membership-rule-summary > small { grid-column: auto; }
  .membership-tier-fields, .membership-offer-field > div { grid-template-columns: 1fr; }
  .membership-sync-note { margin-right: 16px; margin-left: 16px; }
  .membership-config-actions { align-items: stretch; flex-direction: column-reverse; }
  .membership-config-actions button { width: 100%; justify-content: center; }
}

/* Zalo channel center: OA connections and Mini App are managed separately. */
.oa-page-toolbar { align-items: center; }
.oa-connection-layout { display: grid; grid-template-columns: minmax(240px, .72fr) minmax(420px, 1.28fr); gap: 18px; align-items: start; }
.oa-connection-sidebar { position: sticky; top: 96px; padding: 18px; }
.oa-connection-list { display: grid; gap: 9px; }
.oa-connection-card { width: 100%; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: rgba(255,255,255,.82); text-align: left; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.oa-connection-card:hover { border-color: #bbc8ec; transform: translateY(-1px); }
.oa-connection-card.is-selected { border-color: #9aaee9; background: linear-gradient(135deg,#f8f9ff,#f1f4ff); box-shadow: 0 0 0 3px rgba(88,105,207,.08); }
.oa-connection-card > b { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: #1769e0; background: linear-gradient(145deg,#e8f3ff,#d8eaff); font-size: 11px; letter-spacing: -.02em; }
.oa-connection-card > span { min-width: 0; display: grid; gap: 3px; }
.oa-connection-card strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.oa-connection-card small { color: var(--muted); font-size: 10.5px; }
.oa-connection-card > i { width: 8px; height: 8px; border-radius: 50%; background: #aeb7c6; box-shadow: 0 0 0 4px #eef1f5; }
.oa-connection-card.is-ready > i { background: #1b9a68; box-shadow: 0 0 0 4px #e3f6ed; }
.oa-connection-card em { width: max-content; padding: 2px 6px; border-radius: 999px; color: #475bb7; background: #e9edff; font-size: 8.5px; font-style: normal; font-weight: 700; }
.oa-add-placeholder { width: 100%; display: flex; align-items: center; gap: 10px; margin-top: 11px; padding: 12px; border: 1px dashed #b9c3d4; border-radius: 12px; color: #526174; background: rgba(249,250,252,.75); text-align: left; cursor: pointer; }
.oa-add-placeholder > svg { width: 19px; height: 19px; color: var(--blue); }
.oa-add-placeholder span { display: grid; gap: 2px; }
.oa-add-placeholder strong { font-size: 11.5px; }
.oa-add-placeholder small { color: var(--muted); font-size: 9.5px; }
.oa-connection-editor { min-width: 0; }
.oa-config-section { display: grid; gap: 13px; padding: 15px; border: 1px solid #dfe5ee; border-radius: 13px; background: linear-gradient(145deg,rgba(255,255,255,.96),rgba(248,250,253,.82)); }
.oa-config-section-head { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: start; gap: 10px; }
.oa-config-section-head > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #3d5eaa; background: #eaf0ff; }
.oa-config-section-head svg { width: 17px; height: 17px; }
.oa-config-section-head > div { display: grid; gap: 3px; }
.oa-config-section-head strong { color: var(--text); font-size: 12.5px; }
.oa-config-section-head small { color: var(--muted); font-size: 10.5px; line-height: 1.45; }
.oa-config-section-fields { display: grid; gap: 12px; }
.oa-config-section-fields.two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.oa-config-section-fields label > small { color: var(--muted); font-size: 9.5px; line-height: 1.4; font-weight: 450; }
.oa-config-section.oa-identity .oa-config-section-head > span { color: #1269a9; background: #e7f4ff; }
.oa-config-section.authorization { border-color: #dfd9f0; background: linear-gradient(145deg,#fff,#faf8ff); }
.oa-config-section.authorization .oa-config-section-head > span { color: #6d4bb0; background: #f0eaff; }
.oa-config-section.webhook-settings .oa-config-section-head > span { color: #147552; background: #e7f6ef; }
.oa-form-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 3px; }
.oa-default-setting { border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px !important; }
.oa-template-panel { grid-column: 1 / -1; min-width: 0; }
.oa-template-panel .template-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.template-empty-oa { grid-column: 1 / -1; min-height: 140px; display: grid; place-items: center; align-content: center; gap: 6px; color: var(--muted); text-align: center; }
.template-empty-oa svg { width: 25px; height: 25px; color: #7c8fb7; }
.template-empty-oa strong { color: var(--text); font-size: 12.5px; }
.template-empty-oa span { font-size: 10.5px; }
.miniapp-config-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px; background: radial-gradient(circle at 80% 10%,rgba(227,44,64,.1),transparent 35%),linear-gradient(145deg,#fff,#fff8f8); }
.miniapp-config-brand { display: flex; align-items: center; gap: 15px; }
.miniapp-config-brand > span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; color: white; background: linear-gradient(145deg,#b51f30,#e24a55); box-shadow: 0 10px 24px rgba(177,31,48,.2); }
.miniapp-config-brand > span svg { width: 27px; height: 27px; }
.miniapp-config-brand small { color: #aa2635; font-size: 9px; font-weight: 750; letter-spacing: .09em; }
.miniapp-config-brand h3 { margin: 3px 0 4px; font-size: 18px; }
.miniapp-config-brand p { margin: 0; color: var(--muted); font-size: 11px; }
.miniapp-config-grid { margin-top: 18px; }
.miniapp-link-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.miniapp-link-summary > div { padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: #fafbfc; }
.miniapp-link-summary span,.miniapp-link-summary strong { display: block; }
.miniapp-link-summary span { color: var(--muted); font-size: 9.5px; }
.miniapp-link-summary strong { margin-top: 4px; font-size: 11.5px; }
.miniapp-event-list { display: grid; gap: 10px; margin-bottom: 14px; }
.miniapp-event-list > div { display: flex; align-items: flex-start; gap: 11px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(250,251,252,.8); }
.miniapp-event-list > div > span { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #b51f30; background: #fdecef; }
.miniapp-event-list svg { width: 17px; height: 17px; }
.miniapp-event-list p { display: grid; gap: 3px; margin: 0; }
.miniapp-event-list strong { font-size: 12px; }
.miniapp-event-list small { color: var(--muted); font-size: 10.5px; line-height: 1.45; }
@media (max-width: 960px) {
  .oa-connection-layout { grid-template-columns: 1fr; }
  .oa-connection-sidebar { position: static; }
  .oa-connection-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .oa-page-toolbar { align-items: stretch; }
  .oa-connection-list,.oa-template-panel .template-list { grid-template-columns: 1fr; }
  .oa-form-actions { display: grid; grid-template-columns: 1fr; }
  .oa-config-section-fields.two { grid-template-columns: 1fr; }
  .miniapp-config-hero { align-items: flex-start; flex-direction: column; }
  .miniapp-config-brand { align-items: flex-start; }
  .miniapp-link-summary { grid-template-columns: 1fr; }
}

/* ZBS library: separate from OA credentials, with preview and a local draft builder. */
#templates-view [hidden], .zbs-builder-modal [hidden], .zbs-preview-modal [hidden] { display: none !important; }
.zbs-page-toolbar { align-items: center; }
.zbs-toolbar-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.zbs-insight-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.zbs-insight-grid article { min-height: 106px; display: grid; align-content: center; gap: 5px; padding: 17px 19px; border: 1px solid #e9e0d9; border-radius: 14px; background: linear-gradient(155deg,#fff,#fffaf7); box-shadow: 0 3px 13px rgba(87,54,38,.035); }
.zbs-insight-grid span { color: #6e6460; font-size: 12px; font-weight: 650; }
.zbs-insight-grid strong { color: #312925; font-size: 27px; line-height: 1.1; font-weight: 750; }
.zbs-insight-grid small { color: #8a807b; font-size: 11px; }
.zbs-library-panel { padding: 0; overflow: hidden; }
.zbs-status-tabs { display: flex; gap: 5px; padding: 12px 17px 0; border-bottom: 1px solid #eee5df; overflow-x: auto; }
.zbs-status-tabs button { flex: 0 0 auto; padding: 11px 14px 12px; border: 0; border-bottom: 2px solid transparent; color: #776d68; background: transparent; font-size: 13px; font-weight: 650; cursor: pointer; }
.zbs-status-tabs button.active { color: #a52031; border-bottom-color: #bd2638; }
.zbs-status-tabs b { margin-left: 4px; color: #a52031; font-size: 11px; }
.zbs-filterbar { display: grid; grid-template-columns: minmax(250px,1fr) minmax(160px,220px) minmax(160px,220px); gap: 10px; align-items: center; padding: 16px 18px; }
.zbs-filterbar .search-box { width: 100%; }
.zbs-filterbar .select-control { width: 100%; min-width: 0; }
.zbs-template-table { min-width: 960px; }
.zbs-template-table th { height: 46px; color: #736a66; background: #fbf8f6; font-size: 10px; }
.zbs-template-table td { height: 69px; font-size: 12px; }
.zbs-template-table th:first-child,.zbs-template-table td:first-child { padding-left: 22px; }
.zbs-name-button { display: grid; gap: 4px; padding: 0; border: 0; color: #322a27; background: transparent; text-align: left; cursor: pointer; }
.zbs-name-button strong { max-width: 270px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; }
.zbs-name-button:hover strong { color: #a52031; text-decoration: underline; }
.zbs-name-button small { color: #918680; font-size: 11px; }
.zbs-oa-cell { display: inline-block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zbs-price { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zbs-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 7px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.zbs-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.zbs-status.approved { color: #16805c; background: #e9f7ef; }
.zbs-status.review { color: #986820; background: #fff4db; }
.zbs-status.rejected { color: #b82d3d; background: #fff0f0; }
.zbs-status.draft { color: #69717d; background: #f0f1f3; }
.zbs-row-action { padding: 7px 10px; border: 1px solid #ead7d8; border-radius: 8px; color: #a62336; background: #fffafa; font-size: 11px; font-weight: 700; cursor: pointer; }
.zbs-row-action:hover { background: #ffedf0; }
.zbs-empty { margin: 0; padding: 50px 20px; }
.zbs-provider-note { margin-top: 14px; }
.zbs-provider-note.notice.info { border-color: #f0ded7; color: #6b4b42; background: #fffaf7; }
.zbs-preview-modal { width: min(960px,96vw); }
.zbs-preview-layout { display: grid; grid-template-columns: minmax(389px,.95fr) minmax(0,1.05fr); gap: 26px; align-items: start; padding: 25px; background: #fbf9f7; }
.zbs-phone { width: min(100%,389px); min-height: 510px; margin: 0 auto; overflow: hidden; border: 7px solid #25282d; border-radius: 32px; background: #edf0f4; box-shadow: 0 16px 35px rgba(30,31,40,.16); }
.zbs-phone-top { display: flex; justify-content: space-between; padding: 13px 17px 8px; color: #272b34; font-size: 11px; font-weight: 700; }
.zbs-phone-appbar { display: flex; align-items: center; justify-content: space-between; padding: 11px 17px; color: #29313c; background: #fff; font-size: 17px; }
.zbs-phone-appbar strong { font-size: 15px; }
.zbs-phone-message { padding: 20px 13px; }
.zbs-phone-message:has(.zbs-official-preview) { padding: 0; }
.zbs-official-preview { display: grid; background: #fff; }
.zbs-official-preview iframe { display: block; width: 100%; height: 420px; border: 0; background: #fff; }
.zbs-official-preview a { padding: 12px 10px; border-top: 1px solid #e8edf2; color: #245fa6; font-size: 11px; font-weight: 700; text-align: center; text-decoration: none; }
.zbs-official-preview a:hover { text-decoration: underline; }
.zbs-phone-sender { display: grid; grid-template-columns: 35px 1fr; gap: 1px 8px; align-items: center; margin-bottom: 9px; }
.zbs-phone-sender > span { grid-row: 1 / 3; width: 35px; height: 35px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: #af2638; font-size: 10px; font-weight: 800; }
.zbs-phone-sender strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.zbs-phone-sender small { color: #86909f; font-size: 9px; }
.zbs-phone-bubble { margin-left: 43px; overflow: hidden; border-radius: 4px 13px 13px 13px; background: #fff; box-shadow: 0 1px 5px rgba(34,43,55,.07); }
.zbs-phone-bubble h3 { margin: 0; padding: 14px 14px 0; font-size: 14px; }
.zbs-phone-bubble p { margin: 0; padding: 13px 14px 16px; color: #38404a; font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.zbs-phone-bubble em { color: #8b929d; font-style: normal; }
.zbs-phone-bubble mark { padding: 1px 2px; border-radius: 3px; color: #a52031; background: #fff1f2; }
.zbs-phone-cta { padding: 12px 14px; border-top: 1px solid #e8edf2; color: #2564b2; text-align: center; font-size: 12px; font-weight: 700; }
.zbs-phone-footnote { display: block; margin: 17px 0 0 43px; color: #8c96a2; font-size: 10px; }
.zbs-preview-details { min-width: 0; padding: 3px 0; }
.zbs-preview-status { display: flex; align-items: center; gap: 8px; padding-bottom: 18px; border-bottom: 1px solid #ebe4df; }
.zbs-preview-status small { color: #817771; font-size: 11px; }
.zbs-preview-details dl { display: grid; gap: 0; margin: 0; }
.zbs-preview-details dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #eee8e3; font-size: 12px; }
.zbs-preview-details dt { color: #847a75; }
.zbs-preview-details dd { max-width: 62%; margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.zbs-preview-params { margin-top: 20px; }
.zbs-preview-params > strong { display: block; margin-bottom: 10px; font-size: 12px; }
.zbs-preview-params > div { display: flex; flex-wrap: wrap; gap: 6px; }
.zbs-preview-params code { padding: 6px 8px; border-radius: 6px; color: #a52031; background: #fff0f1; font-size: 11px; }
.zbs-preview-warning { padding: 11px; border-radius: 9px; color: #785315; background: #fff4df; font-size: 11px; line-height: 1.5; }
.zbs-builder-modal { width: min(940px,97vw); }
.zbs-builder-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 17px 25px; border-bottom: 1px solid #eee5df; }
.zbs-builder-steps span { display: flex; align-items: center; gap: 9px; color: #9a918d; font-size: 12px; }
.zbs-builder-steps span::first-letter { font-weight: 750; }
.zbs-builder-steps span.active { color: #ae2637; }
.zbs-builder-steps b { font-weight: 650; }
.zbs-builder-body { min-height: 380px; padding: 23px 25px; }
.zbs-builder-intro strong { font-size: 18px; }
.zbs-builder-intro p { margin: 5px 0 20px; color: #7d736f; font-size: 12px; }
.zbs-builder-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.zbs-builder-fields label { display: grid; align-content: start; gap: 7px; color: #554a46; font-size: 12px; font-weight: 650; }
.zbs-builder-fields input,.zbs-builder-fields select,.zbs-builder-fields textarea { width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid #ded4cf; border-radius: 9px; color: #302a27; background: #fff; font: inherit; font-size: 13px; outline: none; }
.zbs-builder-fields textarea { grid-column: 1 / -1; resize: vertical; line-height: 1.55; }
.zbs-builder-fields label:has(textarea) { grid-column: 1 / -1; }
.zbs-builder-fields :is(input,select,textarea):focus { border-color: #bc5863; box-shadow: 0 0 0 3px rgba(177,43,56,.1); }
.zbs-builder-stage > .notice { margin-top: 19px; }
.zbs-builder-layout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(250px,.75fr); gap: 22px; align-items: start; }
.zbs-builder-layout .zbs-builder-fields { grid-template-columns: 1fr; }
.zbs-builder-layout .zbs-builder-fields label { grid-column: 1; }
.zbs-builder-live-preview { min-height: 280px; padding: 17px 13px; border: 1px solid #e3e5e8; border-radius: 13px; background: #eef0f3; }
.zbs-builder-live-preview > small { display: block; margin-bottom: 14px; color: #717780; font-size: 10px; font-weight: 750; letter-spacing: .08em; }
.zbs-builder-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.zbs-builder-summary > div { display: grid; gap: 6px; padding: 13px; border: 1px solid #eee6df; border-radius: 9px; background: #fffdfb; }
.zbs-builder-summary span { color: #837b75; font-size: 11px; }
.zbs-builder-summary strong { font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.zbs-builder-actions > div { display: flex; gap: 8px; }
.zbs-builder-actions { position: sticky; bottom: 0; z-index: 3; background: #fff; }
@media (max-width: 880px) {
  .zbs-insight-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .zbs-filterbar { grid-template-columns: 1fr 1fr; }
  .zbs-search { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .zbs-preview-layout { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .zbs-page-toolbar { align-items: stretch; }
  .zbs-toolbar-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .zbs-toolbar-actions button { justify-content: center; }
  .zbs-insight-grid { gap: 8px; }
  .zbs-insight-grid article { min-height: 92px; padding: 13px; }
  .zbs-insight-grid strong { font-size: 22px; }
  .zbs-filterbar { padding: 12px; }
  .zbs-status-tabs { padding-left: 10px; }
  .zbs-status-tabs button { padding-inline: 10px; font-size: 12px; }
  .zbs-preview-layout { grid-template-columns: 1fr; padding: 18px; }
  .zbs-phone { min-height: 360px; }
  .zbs-builder-steps { padding: 12px; }
  .zbs-builder-steps span { font-size: 11px; }
  .zbs-builder-steps b { display: none; }
  .zbs-builder-body { padding: 18px; }
  .zbs-builder-fields,.zbs-builder-layout,.zbs-builder-summary { grid-template-columns: 1fr; }
  .zbs-builder-actions { align-items: stretch; flex-direction: column-reverse; }
  .zbs-builder-actions > div { display: grid; grid-template-columns: 1fr 1fr; }
  .zbs-builder-actions > div:has(> button[hidden]) { grid-template-columns: 1fr; }
}

/* Final cascade for the new flat composer */
.zbs-preview-modal { width: min(980px,96vw); border-radius: 16px; }
.zbs-preview-modal .zbs-preview-layout { grid-template-columns: 400px minmax(0,1fr); gap: 28px; }
.zbs-preview-modal .zalo-chat-conversation { min-height: 470px; }
.zbs-phone-message { padding: 0; }
.zbs-official-preview { overflow: hidden; border-radius: 12px; box-shadow: 0 4px 14px rgba(39,56,87,.10); }
.zbs-official-preview iframe { height: 430px; }
.zbs-brand-wordmark { display: inline-flex; align-items: center; gap: 8px; color: #e1262f; white-space: nowrap; }
.zbs-brand-wordmark > i { width: 38px; height: 38px; display: grid; place-items: center; border: 3px solid currentColor; border-radius: 50%; color: #e1262f; font-size: 11px; font-style: normal; font-weight: 900; letter-spacing: -.08em; }
.zbs-brand-wordmark > b { color: #e1262f; font-size: 18px; font-weight: 850; letter-spacing: .015em; }
.zbs-theme-options label > span > .zbs-brand-wordmark { grid-row: 1 / 3; width: 112px; height: 58px; justify-content: center; padding: 7px; border: 1px solid #e9ebef; border-radius: 5px; background: #fff; }
.zbs-theme-options label > span { grid-template-columns: 120px 1fr; }
.zbs-theme-options .zbs-brand-wordmark > i { width: 27px; height: 27px; font-size: 8px; }
.zbs-theme-options .zbs-brand-wordmark > b { font-size: 12px; }
.zbs-message-brand .zbs-brand-wordmark > i { color: #e1262f; font-size: 11px; font-style: normal; letter-spacing: -.08em; }
.zbs-message-brand .zbs-brand-wordmark > b { color: #e1262f; font-size: 19px; }
.zbs-message-brand > em { color: #1888ef; font-size: 18px; font-style: normal; letter-spacing: 2px; }
@media (max-width: 900px) {
  .zbs-preview-modal .zbs-preview-layout { grid-template-columns: 1fr; }
  .zbs-preview-modal .zalo-chat-preview { width: min(100%,400px); margin: 0 auto; }
}

/* ZBS studio: basic information first, then a CNV-style three-pane designer */
#template-builder-view { padding: 0 0 52px; background: #f8fafc; }
.zbs-flat-builder { max-width: none; min-height: calc(100vh - 62px); margin: 0; }
.zbs-builder-stage[hidden] { display: none !important; }
.zbs-studio-bar { position: sticky; top: 62px; z-index: 20; min-height: 66px; display: grid; grid-template-columns: 108px minmax(170px,.7fr) minmax(420px,1.55fr) auto; align-items: center; gap: 18px; padding: 10px 24px; border-bottom: 1px solid #dfe4ec; background: rgba(255,255,255,.97); box-shadow: 0 4px 18px rgba(39,49,66,.05); backdrop-filter: blur(14px); }
.zbs-studio-title { min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 2px 8px; }
.zbs-studio-title > span { width: max-content; padding: 4px 7px; border-radius: 12px; color: #c02c47; background: #fff0f3; font-size: 9px; font-weight: 750; }
.zbs-studio-title > strong { overflow: hidden; color: #29313e; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.zbs-studio-title > small { grid-column: 1 / -1; color: #9299a6; font-size: 9px; }
.zbs-studio-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-self: stretch; }
.zbs-studio-steps span { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; color: #969dac; font-size: 11px; font-weight: 650; }
.zbs-studio-steps span::after { content: ""; position: absolute; right: 0; bottom: -10px; left: 0; height: 2px; background: transparent; }
.zbs-studio-steps b { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: #89919e; background: #f0f2f6; font-size: 10px; }
.zbs-studio-steps span.active { color: #2476e5; }
.zbs-studio-steps span.active::after { background: #3989f3; }
.zbs-studio-steps span.active b { color: #2476e5; background: #e9f2ff; }
.zbs-studio-steps span.complete { color: #337b62; }
.zbs-studio-steps span.complete b { color: #fff; background: #36a879; }
.zbs-studio-actions { display: flex; gap: 8px; white-space: nowrap; }
.zbs-studio-actions button { min-height: 38px; }
.zbs-studio-bar .zbs-back-link { padding: 7px 0; color: #657080; }

.zbs-setup-stage { min-height: calc(100vh - 128px); display: grid; place-items: center; padding: 42px 24px; background: radial-gradient(circle at 50% 0,rgba(60,139,241,.08),transparent 38%),#f8fafc; }
.zbs-setup-card { width: min(720px,100%); padding: 30px; border: 1px solid #e0e5ec; border-radius: 16px; background: #fff; box-shadow: 0 20px 48px rgba(43,56,78,.08); }
.zbs-setup-card h2 { margin: 7px 0 8px; color: #242b36; font-size: 25px; letter-spacing: -.025em; }
.zbs-setup-card > p { margin: 0 0 24px; color: #7d8592; font-size: 12px; line-height: 1.6; }
.zbs-setup-card .zbs-builder-fields { gap: 17px; }
.zbs-setup-card .zbs-builder-fields label.full { grid-column: 1 / -1; }
.zbs-setup-card .zbs-builder-fields small { color: #989fab; font-size: 9px; font-weight: 500; }
.zbs-setup-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 26px; padding-top: 20px; border-top: 1px solid #edf0f3; }

.zbs-design-stage { min-width: 0; }
.zbs-designer-layout { min-height: calc(100vh - 128px); display: grid; grid-template-columns: 310px minmax(290px,1fr) 370px; align-items: start; gap: 0; background: radial-gradient(circle at 0 0,rgba(55,157,255,.075),transparent 31%),radial-gradient(circle at 100% 100%,rgba(88,190,255,.055),transparent 28%),#fff; }
.zbs-designer-info-pane,.zbs-designer-editor-pane { min-width: 0; min-height: calc(100vh - 128px); background: rgba(255,255,255,.72); }
.zbs-designer-info-pane { padding: 20px 18px; border-right: 1px solid #e6ecf3; }
.zbs-designer-info-pane h3 { margin: 0 0 15px; color: #232a35; font-size: 13px; }
.zbs-designer-info-pane h4 { margin: 22px 0 11px; color: #343c48; font-size: 11px; }
.zbs-designer-summary-list { display: grid; }
.zbs-designer-summary-list > div { display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: center; gap: 10px; min-height: 62px; border-bottom: 1px solid #edf0f4; }
.zbs-summary-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #e3e7ed; border-radius: 50%; color: #e1262f; background: #fff; font-size: 8px; font-weight: 850; }
.zbs-designer-summary-list p { min-width: 0; display: grid; gap: 3px; margin: 0; }
.zbs-designer-summary-list strong { overflow: hidden; color: #303744; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.zbs-designer-summary-list small { color: #969daa; font-size: 9px; }
.zbs-cost-card { padding: 13px; border: 1px solid #e4effa; border-radius: 9px; background: rgba(242,249,255,.82); }
.zbs-cost-card > div { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid #d9edf9; color: #8290a4; font-size: 9px; }
.zbs-cost-card > div strong { color: #354052; font-size: 10px; }
.zbs-cost-card > p { display: flex; align-items: center; gap: 5px; margin: 13px 0 9px; color: #344052; font-size: 10px; }
.zbs-cost-card > p .app-icon { width: 13px; height: 13px; color: #6485a5; }
.zbs-cost-card dl { display: grid; gap: 9px; margin: 0; }
.zbs-cost-card dl > div { display: flex; justify-content: space-between; gap: 8px; font-size: 9px; }
.zbs-cost-card dt { color: #8a9aae; }
.zbs-cost-card dd { margin: 0; color: #3d83e5; font-weight: 750; text-align: right; }
.zbs-info-note { display: grid; gap: 5px; margin-top: 14px; padding: 11px; border: 1px solid #edf0f3; border-radius: 8px; }
.zbs-info-note strong { color: #3e4653; font-size: 10px; }
.zbs-info-note span { color: #949ba7; font-size: 8.5px; line-height: 1.5; }

.zbs-designer-preview-pane { min-width: 0; display: grid; justify-items: center; align-content: start; gap: 12px; padding: 46px 18px 30px; background: radial-gradient(circle at 14% 10%,rgba(64,161,255,.045),transparent 25%),radial-gradient(circle at 86% 90%,rgba(69,188,255,.035),transparent 25%); }
.zbs-phone-device { width: min(350px,100%); padding: 10px; border: 7px solid #e5e7eb; border-radius: 48px; background: #fff; box-shadow: 0 18px 42px rgba(39,54,79,.10); }
.zbs-phone-device .zalo-chat-preview { border-radius: 35px; box-shadow: none; }
.zbs-phone-device .zalo-chat-status { padding: 13px 18px 6px; font-size: 10px; }
.zbs-phone-device .zalo-chat-header { min-height: 60px; padding-inline: 14px; }
.zbs-phone-device .zalo-chat-conversation { min-height: 470px; padding: 14px 10px 24px; }
.zbs-phone-device .zalo-chat-composer { min-height: 52px; padding-inline: 13px; }
.zbs-phone-device .zbs-message-card { border-radius: 10px; box-shadow: 0 3px 10px rgba(34,52,82,.08); }
.zbs-designer-preview-pane > .zbs-preview-note { max-width: 350px; }

.zbs-designer-editor-pane { border-left: 1px solid #e6ecf3; }
.zbs-editor-scroll { max-height: calc(100vh - 128px); overflow-y: auto; padding: 20px; scrollbar-width: thin; scrollbar-color: #cfd6e0 transparent; }
.zbs-editor-section + .zbs-editor-section { margin-top: 19px; padding-top: 19px; border-top: 1px solid #e8ebf0; }
.zbs-editor-section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.zbs-editor-section-title > span { display: grid; gap: 3px; }
.zbs-editor-section-title b { color: #27303c; font-size: 12px; }
.zbs-editor-section-title small { color: #969daa; font-size: 9px; }
.zbs-designer-editor-pane .zbs-theme-options { padding: 0; }
.zbs-designer-editor-pane .zbs-theme-options.compact { grid-template-columns: 1fr; gap: 8px; }
.zbs-designer-editor-pane .zbs-theme-options.compact label > span { min-height: 74px; grid-template-columns: 104px 1fr; padding: 9px; }
.zbs-designer-editor-pane .zbs-theme-options.compact label > span > .zbs-brand-wordmark { width: 96px; height: 52px; grid-row: 1 / 3; }
.zbs-designer-editor-pane .zbs-block-editor { gap: 11px; padding: 0; }
.zbs-designer-editor-pane .zbs-content-block { padding: 11px; border-radius: 7px; background: #fbfcfe; }
.zbs-designer-editor-pane .zbs-content-block textarea { min-height: 96px; }
.zbs-designer-editor-pane .zbs-table-row { grid-template-columns: 20px minmax(90px,.9fr) minmax(105px,1.1fr) 28px; }
.zbs-designer-editor-pane .zbs-table-row input { padding: 9px 7px; font-size: 10px; }
.zbs-designer-editor-pane .zbs-action-fields { grid-template-columns: 1fr; }
.zbs-design-stage .zbs-flat-actions { margin: 0; padding: 12px 20px; }

@media (max-width: 1420px) {
  .zbs-studio-bar { grid-template-columns: 90px minmax(145px,.55fr) minmax(360px,1.4fr) auto; gap: 12px; padding-inline: 16px; }
  .zbs-designer-layout { grid-template-columns: 285px minmax(275px,1fr) 345px; }
  .zbs-designer-info-pane { padding-inline: 15px; }
  .zbs-editor-scroll { padding: 15px; }
  .zbs-phone-device { width: min(325px,100%); }
}
@media (max-width: 1180px) {
  .zbs-studio-bar { grid-template-columns: 95px minmax(0,1fr) auto; }
  .zbs-studio-steps { grid-row: 2; grid-column: 1 / -1; min-height: 42px; margin: 0 -16px -10px; border-top: 1px solid #edf0f4; }
  .zbs-studio-steps span::after { bottom: 0; }
  .zbs-designer-layout { grid-template-columns: 220px minmax(300px,1fr); }
  .zbs-designer-editor-pane { grid-column: 1 / -1; min-height: 0; border-top: 1px solid #dfe4ec; border-left: 0; }
  .zbs-editor-scroll { max-height: none; }
  .zbs-designer-preview-pane { padding-top: 28px; }
}
@media (max-width: 760px) {
  #template-builder-view { padding-bottom: 0; }
  .zbs-studio-bar { top: 64px; grid-template-columns: auto minmax(0,1fr) auto; padding: 8px 12px; }
  .zbs-studio-title > small,.zbs-studio-title > span { display: none; }
  .zbs-studio-title > strong { font-size: 11px; }
  .zbs-studio-actions .secondary-button { display: none; }
  .zbs-studio-actions .primary-button { min-height: 34px; padding-inline: 10px; font-size: 10px; }
  .zbs-studio-steps { overflow-x: auto; }
  .zbs-studio-steps span { min-width: 120px; font-size: 10px; }
  .zbs-setup-stage { padding: 24px 14px; }
  .zbs-setup-card { padding: 20px 16px; }
  .zbs-setup-card h2 { font-size: 21px; }
  .zbs-setup-card .zbs-builder-fields { grid-template-columns: 1fr; }
  .zbs-setup-card .zbs-builder-fields label.full { grid-column: auto; }
  .zbs-designer-layout { grid-template-columns: 1fr; }
  .zbs-designer-info-pane { min-height: 0; border-right: 0; border-bottom: 1px solid #dfe4ec; }
  .zbs-designer-preview-pane { grid-row: 1; padding: 22px 12px; }
  .zbs-designer-info-pane { grid-row: 2; }
  .zbs-designer-editor-pane { grid-row: 3; }
  .zbs-phone-device { width: min(360px,100%); padding: 7px; border-width: 5px; border-radius: 38px; }
  .zbs-phone-device .zalo-chat-conversation { min-height: 410px; }
  .zbs-design-stage .zbs-flat-actions { align-items: stretch; flex-direction: column-reverse; }
  .zbs-design-stage .zbs-flat-actions > span { display: grid; grid-template-columns: 1fr; }
  .zbs-design-stage .zbs-flat-actions button { width: 100%; }
}

.zbs-editor-basic-section .zbs-builder-fields { grid-template-columns: 1fr; gap: 10px; }
.zbs-editor-basic-section .zbs-builder-fields label { gap: 5px; font-size: 10px; }
.zbs-editor-basic-section .zbs-builder-fields label.full { grid-column: 1 / -1; }
.zbs-editor-basic-section .zbs-builder-fields :is(input,select) { padding: 9px 10px; border-radius: 6px; font-size: 10px; }

.zbs-review-layout { min-height: calc(100vh - 128px); display: grid; grid-template-columns: minmax(0,1.9fr) minmax(330px,.9fr); background: #fff; }
.zbs-review-main { min-width: 0; padding: 26px; border-right: 1px solid #dfe4ec; }
.zbs-review-main > h2 { margin: 0 0 20px; color: #222a36; font-size: 18px; }
.zbs-review-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin-bottom: 20px; }
.zbs-review-summary > div { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 10px; }
.zbs-review-summary p { min-width: 0; display: grid; gap: 3px; margin: 0; }
.zbs-review-summary strong { overflow: hidden; color: #303844; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.zbs-review-summary small { color: #969daa; font-size: 9px; }
.zbs-review-guidance { display: flex; align-items: center; gap: 9px; margin-bottom: 28px; padding: 15px; border: 1px dashed #4e9cff; border-radius: 6px; color: #536174; background: #eff9ff; font-size: 10px; }
.zbs-review-guidance .app-icon { width: 18px; height: 18px; flex: 0 0 auto; color: #4b8ff0; }
.zbs-review-param-head,.zbs-review-param-row { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 14px; }
.zbs-review-param-head { margin-bottom: 8px; color: #313a47; font-size: 10px; font-weight: 750; }
.zbs-review-param-row { margin-bottom: 8px; }
.zbs-review-param-row input { min-width: 0; padding: 10px; border: 1px solid #dbe1ea; border-radius: 5px; color: #485365; background: #fff; font: inherit; font-size: 10px; outline: none; }
.zbs-review-param-row input[readonly] { color: #758096; background: #fafbfc; }
.zbs-review-param-row input:not([readonly]):focus { border-color: #4b92ed; box-shadow: 0 0 0 3px rgba(57,137,243,.10); }
.zbs-review-empty { padding: 18px; border: 1px dashed #dbe1ea; border-radius: 6px; color: #9299a5; background: #fafbfc; font-size: 10px; text-align: center; }
.zbs-review-note { position: relative; display: grid; gap: 8px; margin-top: 18px; color: #353d49; font-size: 10px; font-weight: 750; }
.zbs-review-note textarea { width: 100%; resize: vertical; padding: 12px; border: 1px solid #dbe1ea; border-radius: 6px; color: #3b4554; background: #fff; font: inherit; font-size: 10px; line-height: 1.55; outline: none; }
.zbs-review-note textarea:focus { border-color: #4b92ed; box-shadow: 0 0 0 3px rgba(57,137,243,.10); }
.zbs-review-note small { position: absolute; right: 9px; bottom: 8px; color: #9ba2ad; font-size: 8px; font-weight: 500; }
.zbs-review-consent { display: flex; align-items: flex-start; gap: 8px; margin: 13px 0 18px; color: #77808e; font-size: 9px; line-height: 1.5; }
.zbs-review-consent input { margin-top: 1px; accent-color: #3485ef; }
.zbs-review-main > .notice { margin-top: 12px; }
.zbs-review-side { min-width: 0; padding: 26px; background: #effaff; }
.zbs-review-side > h3 { margin: 0 0 16px; color: #26313e; font-size: 13px; }
.zbs-review-side > h3:not(:first-child) { margin-top: 24px; }
.zbs-review-card-preview { max-width: 360px; margin: 0 auto; }
.zbs-review-card-preview .zbs-message-card { border: 1px solid #e6ebf1; box-shadow: 0 4px 14px rgba(42,63,91,.07); }
.zbs-review-side .zbs-cost-card { max-width: 360px; margin: 0 auto; background: #fff; }

@media (max-width: 1180px) {
  .zbs-review-layout { grid-template-columns: 1fr; }
  .zbs-review-main { border-right: 0; }
  .zbs-review-side { border-top: 1px solid #dfe4ec; }
}
@media (max-width: 760px) {
  .zbs-editor-basic-section .zbs-builder-fields { grid-template-columns: 1fr; }
  .zbs-editor-basic-section .zbs-builder-fields label.full { grid-column: auto; }
  .zbs-review-main,.zbs-review-side { padding: 18px 14px; }
  .zbs-review-summary { grid-template-columns: 1fr; gap: 10px; }
  .zbs-review-param-head { display: none; }
  .zbs-review-param-row { grid-template-columns: 1fr; gap: 6px; padding: 11px; border: 1px solid #e1e6ed; border-radius: 7px; background: #fafbfc; }
  .zbs-review-param-row input { background: #fff; }
}

/* Iconly Pro glass icon system */
img.app-icon.glass-icon { display: block; flex: 0 0 auto; object-fit: contain; overflow: visible; stroke: none; filter: drop-shadow(0 3px 4px rgba(43,55,88,.16)); transform: scale(1.22); transform-origin: center; }
.nav-icon { width: 28px; height: 28px; }
.nav-icon img.app-icon.glass-icon { width: 25px; height: 25px; transform: scale(1.12); }
.nav-item { gap: 9px; }
.nav-item.active .nav-icon img.glass-icon { filter: drop-shadow(0 4px 6px rgba(71,77,172,.22)); transform: scale(1.2); }
.button-with-icon img.app-icon.glass-icon,.icon-button img.app-icon.glass-icon { transform: scale(1.35); }
.quick-action-icon,.stat-icon,.empty-icon,.campaign-type-icon,.history-metric-icon,.customer360-metric-icon,.appointment-metric-icon,.membership-summary-icon { background: transparent !important; box-shadow: none !important; }
.quick-action-icon img.app-icon.glass-icon { width: 34px; height: 34px; transform: none; }
.stat-icon img.app-icon.glass-icon { width: 39px; height: 39px; transform: none; }
.empty-icon img.app-icon.glass-icon { width: 48px; height: 48px; transform: none; }
.campaign-insights img.app-icon.glass-icon,.history-overview img.app-icon.glass-icon,.customer360-metric-icon img.app-icon.glass-icon,.appointment-metric-icon img.app-icon.glass-icon,.membership-summary-icon img.app-icon.glass-icon { width: 32px; height: 32px; transform: none; }
.workflow-palette > button b,.workflow-node-icon,.workflow-step-picker > button b,.workflow-fixed-start-icon { background: transparent !important; box-shadow: none !important; }
.workflow-palette img.app-icon.glass-icon,.workflow-node-icon img.app-icon.glass-icon,.workflow-step-picker img.app-icon.glass-icon,.workflow-fixed-start-icon img.app-icon.glass-icon { width: 27px; height: 27px; transform: none; }
.notice img.app-icon.glass-icon,.zbs-preview-note img.app-icon.glass-icon,.zbs-cost-card img.app-icon.glass-icon { transform: scale(1.35); }
@media (max-width: 760px) {
  .nav-icon img.app-icon.glass-icon { width: 27px; height: 27px; }
}

/* ZBS logo uploads follow the official 400x96 light/dark specification */
.zbs-designer-editor-pane .zbs-editor-scroll { padding: 12px; background: transparent; }
.zbs-designer-info-pane .zbs-editor-basic-section { padding: 14px; border-color: #dfe9f3; box-shadow: 0 8px 22px rgba(55,98,145,.05); }
.zbs-designer-info-pane .zbs-editor-basic-section .zbs-editor-section-title { margin-bottom: 13px; }
.zbs-designer-info-pane .zbs-editor-basic-section .zbs-builder-fields label.full { grid-column: auto; }
.zbs-editor-card { padding: 14px; border: 1px solid #dfe5ed; border-radius: 10px; background: #fff; box-shadow: 0 3px 10px rgba(42,54,76,.035); }
.zbs-editor-card + .zbs-editor-card { margin-top: 12px; padding-top: 14px; border-top: 1px solid #dfe5ed; }
.zbs-editor-card .zbs-editor-section-title { margin-bottom: 13px; padding-bottom: 11px; border-bottom: 1px solid #edf0f4; }
.zbs-editor-section-title > a { color: #357fdc; font-size: 8.5px; font-weight: 700; text-decoration: none; }
.zbs-editor-section-title > a:hover { text-decoration: underline; }
.zbs-logo-requirements { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 11px; }
.zbs-logo-requirements span { padding: 4px 7px; border: 1px solid #dce7f5; border-radius: 999px; color: #4d7098; background: #f4f9ff; font-size: 8px; font-weight: 700; }
.zbs-logo-upload-grid { display: grid; gap: 10px; }
.zbs-logo-field { display: grid; gap: 7px; padding: 10px; border: 1px solid #e0e5ec; border-radius: 8px; background: #fbfcfe; }
.zbs-logo-field.valid { border-color: #a8dec9; background: #f8fffb; }
.zbs-logo-field.checking { opacity: .65; pointer-events: none; }
.zbs-logo-field > div:first-child { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.zbs-logo-field > div:first-child > span { display: grid; gap: 2px; }
.zbs-logo-field > div:first-child b { color: #333c49; font-size: 10px; }
.zbs-logo-field > div:first-child small { color: #9299a5; font-size: 8px; }
.zbs-logo-field > div:first-child button { padding: 2px 0; border: 0; color: #c53b51; background: transparent; font-size: 8px; font-weight: 700; }
.zbs-logo-dropzone { min-height: 78px; display: grid; place-items: center; overflow: hidden; padding: 9px; border: 1px dashed #aebed2; border-radius: 6px; background: #fff; cursor: pointer; transition: border-color .15s ease,box-shadow .15s ease; }
.zbs-logo-dropzone:hover { border-color: #438ce6; box-shadow: 0 0 0 3px rgba(67,140,230,.08); }
.zbs-logo-field.dark .zbs-logo-dropzone { border-color: #505a6a; background: #202936; }
.zbs-logo-dropzone > span { display: grid; justify-items: center; gap: 3px; color: #55779c; text-align: center; }
.zbs-logo-field.dark .zbs-logo-dropzone > span { color: #dce8f6; }
.zbs-logo-dropzone > span b { font-size: 9px; }
.zbs-logo-dropzone > span small { opacity: .78; font-size: 7.5px; }
.zbs-logo-dropzone img { width: 100%; max-height: 76px; display: block; object-fit: contain; object-position: left center; }
.zbs-logo-file-meta { overflow: hidden; color: #818997; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.zbs-logo-validation { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; padding: 9px; border-radius: 6px; color: #805c20; background: #fff7e8; font-size: 8.5px; line-height: 1.45; }
.zbs-logo-validation.success { color: #287257; background: #ecfbf4; }
.zbs-logo-validation .app-icon { width: 14px; height: 14px; flex: 0 0 auto; }
.zbs-message-logo { width: min(100%,240px); height: auto; max-height: 58px; object-fit: contain; object-position: left center; }
@media (max-width: 760px) {
  .zbs-editor-card { padding: 12px; }
  .zbs-logo-dropzone { min-height: 70px; }
}

/* System-wide white and soft-blue theme */
:root {
  --blue: #287ed1;
  --blue-hover: #1f6fbd;
  --blue-pressed: #185b9e;
  --blue-soft: #eef7ff;
  --bg: #f8fbff;
  --surface: #ffffff;
  --surface-subtle: #f5faff;
  --line: #e3ebf4;
  --line-strong: #c9d9e9;
  --text: #1d2b3b;
  --muted: #718094;
  --orange: #4c98df;
  --violet: #6979d8;
  --shadow: 0 3px 12px rgba(43,82,120,.045),0 16px 38px rgba(54,105,151,.04);
  --shadow-hover: 0 6px 18px rgba(43,82,120,.08),0 20px 46px rgba(54,105,151,.06);
}
html,body,.app-shell { background: #f8fbff; }
::selection { color: #163754; background: #dceeff; }
.auth-gate {
  background: radial-gradient(circle at 10% 8%,rgba(85,174,255,.11),transparent 28rem),radial-gradient(circle at 92% 88%,rgba(109,205,255,.07),transparent 27rem),#fff;
}
.auth-card { border-color: #dce8f3; background: rgba(255,255,255,.97); box-shadow: 0 18px 55px rgba(45,91,132,.10); }
.auth-brand > span,.brand-mark { box-shadow: 0 4px 13px rgba(43,108,170,.12); }
.auth-form input { border-color: #c9d9e9; background: #fff; }
.auth-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(40,126,209,.10); }

.sidebar { border-right-color: #e1eaf3; background: rgba(255,255,255,.97); box-shadow: 8px 0 30px rgba(51,91,128,.035); }
.brand span,.nav-section-label { color: #7b8ca0; }
.nav-item { color: #526276; }
.nav-item:hover { color: #245f96; background: #f2f8fe; }
.nav-item.active { color: #1768b3; background: linear-gradient(90deg,#dceeff,#f4faff); }
.nav-item.active::before { background: linear-gradient(#49a1ee,#2277c7); }
.nav-icon { color: #337fca; }
.sidebar-foot { border-color: #dce8f3; background: linear-gradient(135deg,#f8fcff,#edf7ff); }

.main-content { background: radial-gradient(circle at 96% 0,rgba(68,164,248,.09),transparent 27rem),radial-gradient(circle at 4% 18%,rgba(90,192,255,.045),transparent 24rem),#fff; }
.topbar { border-bottom-color: rgba(220,231,242,.92); background: rgba(255,255,255,.90); }
.avatar { background: linear-gradient(145deg,#4a9ae3,#236db4); box-shadow: 0 5px 14px rgba(38,112,179,.22); }

.primary-button { border-color: transparent; background: linear-gradient(135deg,#388bd7,#206db7); box-shadow: 0 5px 13px rgba(39,116,186,.20); }
.primary-button:hover { border-color: transparent; background: linear-gradient(135deg,#2b7dca,#175da3); box-shadow: 0 7px 17px rgba(32,98,160,.24); }
.secondary-button { border-color: #c9d9e9; background: rgba(255,255,255,.96); }
.secondary-button:hover { border-color: #69a5db; color: #236eaf; background: #f5faff; }
.text-button,.row-action,.campaign-name-link { color: #2878bf; }
.text-button:hover,.row-action:hover,.campaign-row-actions .text-button:hover { color: #1e67a8; background: #edf7ff; }
.icon-button { background: #eef5fb; }
.icon-button:hover { background: #e0effb; }

.welcome-card { border-color: #d8e8f5; background: radial-gradient(circle at 92% 9%,rgba(105,192,255,.20),transparent 28%),radial-gradient(circle at 5% 7%,rgba(218,240,255,.78),transparent 34%),rgba(255,255,255,.96); box-shadow: 0 14px 40px rgba(50,103,150,.07); }
.pill,.record-count-badge { border-color: #cfe2f3; color: #276da9; background: rgba(236,247,255,.94); }
.quick-action-grid > button,.stat-card,.panel,.campaign-insights article,.customer360-insights article,.history-overview article,.appointment-insights > button { border-color: var(--line); background: rgba(255,255,255,.94); box-shadow: var(--shadow); }
.quick-action-grid > button:hover,.stat-card:hover,.appointment-insights > button:hover { border-color: #b8d5ec; box-shadow: var(--shadow-hover); }
.flow-step { border-color: #e1eaf3; background: #fbfdff; }

.datahub-tree-panel,.workflow-palette,.workflow-config { background: rgba(255,255,255,.94); }
.datahub-table-button.active { color: #216cae; background: linear-gradient(90deg,#e1f1ff,#f6fbff); }
.datahub-table-button.active > small { color: #5b84a7; }
.table-tools,.campaign-list-tools,.history-tools,.table-context-bar,.appointment-tools { background: rgba(247,251,255,.94); }
.table-panel .table-wrap,.table-wrap tbody tr:nth-child(odd) td:last-child { background: #fff; }
.table-wrap tbody tr:nth-child(even),.table-wrap tbody tr:nth-child(even) td:last-child { background: #f9fcff; }
.table-wrap tbody tr:hover,.table-wrap tbody tr:hover td:last-child,.customer360-row:hover { background: #eef7ff; }
.table-wrap th:last-child { background: #f3f8fd; }
.campaign-tabs button:hover { background: #edf6fd; }
.campaign-tabs button.active { background: #e3f2ff; }
.owner-avatar,.profile-avatar { color: #246cae; background: linear-gradient(145deg,#e4f3ff,#bcdcf6); }

.workflow-builder { background: radial-gradient(circle at 8% 4%,rgba(82,173,250,.08),transparent 24rem),radial-gradient(circle at 90% 12%,rgba(104,195,247,.055),transparent 28rem),#f9fcff; }
.workflow-toolbar,.workflow-context-tabs { background: rgba(255,255,255,.92); }
.workflow-canvas { background: radial-gradient(circle at 48% 0,rgba(255,255,255,.96),transparent 24rem),linear-gradient(180deg,rgba(247,252,255,.94),rgba(238,247,254,.68)); }
.workflow-palette > button:hover { border-color: #8cbee7; background: #f2f9ff; }
.workflow-node-main:hover,.workflow-node.selected .workflow-node-main { border-color: #68a6d8; }
.workflow-node.selected .workflow-node-main { box-shadow: 0 0 0 3px rgba(40,126,209,.12),0 10px 26px rgba(41,86,127,.09); }
.workflow-node.condition .workflow-node-outputs button { color: #266fab; }
.workflow-node-report button { color: #246cae; background: #e9f5ff; }

.workflow-condition-guide,
.workflow-condition-source-card { display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 10px; padding: 12px; border-radius: 11px; }
.workflow-condition-guide { border: 1px solid #d7e8f6; background: linear-gradient(135deg,#f3f9ff,#fbfdff); color: #245f91; }
.workflow-condition-guide > span,
.workflow-condition-source-card > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; }
.workflow-condition-guide > span { color: #fff; background: linear-gradient(145deg,#73b9ef,#397fc0); box-shadow: 0 6px 14px rgba(50,121,183,.18); }
.workflow-condition-guide .app-icon,
.workflow-condition-source-card .app-icon { width: 19px; height: 19px; }
.workflow-condition-guide div,
.workflow-condition-source-card div { display: grid; gap: 3px; min-width: 0; }
.workflow-condition-guide strong,
.workflow-condition-source-card strong { font-size: 12.5px; line-height: 1.35; }
.workflow-condition-guide small,
.workflow-condition-source-card small { color: #6c8092; font-size: 10.5px; line-height: 1.45; }
.workflow-condition-source-select select { border-color: #8dbce3; background: #f8fcff; font-weight: 650; }
.workflow-condition-source-card { border: 1px solid #dce8f2; background: #fff; box-shadow: 0 5px 16px rgba(43,92,133,.06); }
.workflow-condition-source-card > span { color: #2873ae; background: #eaf5fd; }
.workflow-condition-empty { padding: 13px; border: 1px dashed #b8d2e7; border-radius: 10px; color: #688097; background: #f8fbfe; font-size: 11px; line-height: 1.5; text-align: center; }

.modal { border-color: rgba(219,231,242,.95); background: #fff; box-shadow: 0 24px 70px rgba(40,77,111,.18); }
.modal-head { background: linear-gradient(180deg,#fff,#f7fbff); }
.profile-tags span { border-color: #d5e5f2; color: #2c6fa8; background: #f1f8fe; }
.profile-loyalty-card { border-color: #d7e6f2; background: radial-gradient(circle at 100% 0,rgba(103,186,244,.13),transparent 45%),linear-gradient(135deg,#f5fbff,#fff); }
.profile-loyalty-icon { color: #2671ae; background: #e0f1ff; }
.profile-linked-record { background: #f9fcff; }
.profile-linked-record:hover { border-color: #9fc8e8; background: #edf7ff; }
.profile-linked-record > span > .app-icon,.datahub-profile-link > .app-icon { color: #2975b5; }
.datahub-profile-link { border-color: #d0e2f1; color: #276da8; background: #f1f8fe; }
.datahub-profile-link:hover { border-color: #99c3e5; background: #e7f4ff; }

.appointment-insights > button.active { border-color: #6ba8da; background: linear-gradient(135deg,#e9f6ff,#f8fcff); box-shadow: 0 0 0 2px rgba(40,126,209,.09),var(--shadow); }
.appointment-metric-icon.pending,.appointment-date-icon,.appointment-section-heading > span,.appointment-history-head > span { color: #2a72af; background: #e8f4ff; }
.appointment-context-bar .app-icon,.appointment-branch-cell .app-icon { color: #2c76b5; }
.appointment-source,.appointment-detail-code { border-color: #cfe1f0; color: #286da8; background: #f0f8fe; }
.appointment-customer-card { border-color: #d9e7f2; background: radial-gradient(circle at 100% 0,rgba(91,180,245,.12),transparent 46%),linear-gradient(135deg,#f5fbff,#fff); }
.appointment-form-grid label > span { color: #44566b; }
.appointment-form-grid input,.appointment-form-grid textarea { border-color: #cbdbea; color: var(--text); background: #fff; }
.appointment-form-grid input:focus,.appointment-form-grid textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(40,126,209,.10); }
.appointment-history-panel,.appointment-modal-actions { background: #f8fcff; }

.membership-rule-summary { border-color: #d5e5f2; background: linear-gradient(135deg,#edf8ff,#fbfdff); }
.membership-summary-icon { background: transparent; box-shadow: none; }
.membership-rule-summary strong { color: #26384a; }
.membership-rule-summary p,.membership-rule-summary > small { color: #6f8092; }
.membership-tier-card { border-color: #dbe7f1; background: #fff; box-shadow: 0 3px 12px rgba(44,82,117,.045); }
.membership-tier-card > header { border-bottom-color: #e6eef5; }
.membership-tier-card label > span,.membership-offer-field > span { color: #46586b; }
.membership-tier-card input[type="text"],.membership-tier-card input[type="number"],.membership-tier-card input:not([type]),.membership-tier-card textarea { border-color: #d3e0ec; }
.membership-offer-choice { border-color: #dce8f2; background: #f8fcff; }
.profile-tier-benefits > span { border-color: #dce8f2; color: #46596c; background: #f8fcff; }

.notice.warning { color: #9a4651; background: #fff2f4; }
.zbs-logo-validation { color: #2d6f9f; background: #eff8ff; }

/* ZBS builder clarity pass: larger type, denser hierarchy, content-first editing */
#template-builder-view { padding-bottom: 0; background: #fff; }
.zbs-studio-bar {
  min-height: 68px;
  grid-template-columns: 112px minmax(210px,.65fr) minmax(360px,1.2fr) auto;
  gap: 20px;
  padding: 10px 24px;
}
.zbs-studio-title { grid-template-columns: minmax(0,1fr); gap: 3px; }
.zbs-studio-title > span { display: none; }
.zbs-studio-title > strong { font-size: 15px; }
.zbs-studio-title > small { grid-column: auto; font-size: 11px; }
.zbs-studio-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
.zbs-studio-steps span { gap: 8px; font-size: 13px; }
.zbs-studio-steps b { width: 24px; height: 24px; font-size: 12px; }
.zbs-studio-bar .zbs-back-link { font-size: 12px; }
.zbs-studio-actions button { min-height: 40px; padding-inline: 16px; font-size: 12px; }

.zbs-designer-layout {
  grid-template-columns: 330px 420px minmax(520px,1fr);
  align-items: stretch;
  background: radial-gradient(circle at 54% 5%,rgba(71,158,235,.055),transparent 25rem),#fff;
}
.zbs-designer-info-pane,.zbs-designer-editor-pane { min-height: calc(100vh - 130px); }
.zbs-designer-info-pane { padding: 18px; background: #fbfdff; }
.zbs-designer-info-pane .zbs-editor-basic-section { padding: 16px; box-shadow: none; }
.zbs-editor-basic-section .zbs-builder-fields { gap: 13px; }
.zbs-editor-basic-section .zbs-builder-fields label { gap: 7px; color: #354255; font-size: 12px; }
.zbs-editor-basic-section .zbs-builder-fields :is(input,select) { min-height: 42px; padding: 10px 11px; font-size: 13px; }
.zbs-editor-basic-section .zbs-builder-fields small { margin-top: -2px; color: #7c8999; font-size: 11px; line-height: 1.45; }
.zbs-designer-info-pane .zbs-editor-section-title b { font-size: 15px; }
.zbs-designer-info-pane .zbs-editor-section-title small { font-size: 11px; }
.zbs-cost-card-compact { margin-top: 14px; padding: 13px 14px; background: #f3f9ff; }
.zbs-cost-card-compact > div { padding-bottom: 9px; font-size: 11px; }
.zbs-cost-card-compact > div strong { font-size: 12px; }
.zbs-cost-card-compact > p { margin: 10px 0 8px; font-size: 12px; }
.zbs-cost-card-compact dl { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.zbs-cost-card-compact dl > div { display: grid; gap: 3px; padding: 8px; border-radius: 7px; background: rgba(255,255,255,.86); font-size: 11px; }
.zbs-cost-card-compact dd { text-align: left; }

.zbs-designer-preview-pane {
  gap: 14px;
  padding: 26px 20px 24px;
  border-right: 1px solid #e6ecf3;
  background: linear-gradient(180deg,#f7fbff 0,#fff 78%);
}
.zbs-phone-device { width: min(330px,100%); }
.zbs-designer-preview-pane > .zbs-preview-note { max-width: 330px; font-size: 11px; line-height: 1.45; }

.zbs-designer-editor-pane { border-left: 0; background: #fff; }
.zbs-designer-editor-pane .zbs-editor-scroll {
  max-height: calc(100vh - 130px);
  display: flex;
  flex-direction: column;
  padding: 18px;
}
.zbs-designer-editor-pane .zbs-editor-content-section { order: 1; }
.zbs-designer-editor-pane .zbs-editor-logo-section { order: 2; }
.zbs-designer-editor-pane .zbs-editor-scroll > .notice { order: 3; }
.zbs-designer-editor-pane .zbs-editor-section + .zbs-editor-section { margin-top: 14px; padding-top: 16px; }
.zbs-editor-card { padding: 16px; border-radius: 12px; box-shadow: none; }
.zbs-editor-card .zbs-editor-section-title { margin-bottom: 14px; padding-bottom: 12px; }
.zbs-editor-section-title b { font-size: 15px; }
.zbs-editor-section-title small { font-size: 11px; line-height: 1.4; }
.zbs-editor-section-title > a { font-size: 11px; }
.zbs-designer-editor-pane .zbs-block-editor { gap: 13px; }
.zbs-title-field { font-size: 12px; }
.zbs-title-field input { min-height: 44px; padding: 11px 12px; font-size: 13px; }
.zbs-title-field > small { font-size: 10px; }
.zbs-designer-editor-pane .zbs-content-block { padding: 13px; border-radius: 9px; }
.zbs-content-block-head span i { font-size: 13px; }
.zbs-content-block-head span small { font-size: 11px; }
.zbs-content-block-head > b { font-size: 10px; }
.zbs-designer-editor-pane .zbs-content-block textarea { min-height: 112px; padding: 11px; font-size: 13px; line-height: 1.55; }
.zbs-field-helper { font-size: 11px; }
.zbs-designer-editor-pane .zbs-table-row input { min-height: 38px; padding: 9px; font-size: 12px; }
.zbs-add-row,.zbs-action-fields label { font-size: 12px; }
.zbs-action-fields input { min-height: 40px; font-size: 12px; }

.zbs-editor-logo-section { margin-top: 14px; }
.zbs-logo-upload-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.zbs-logo-field { gap: 6px; padding: 9px; }
.zbs-logo-field > div:first-child b { font-size: 12px; }
.zbs-logo-field > div:first-child button { font-size: 10px; }
.zbs-logo-dropzone { min-height: 54px; padding: 7px; }
.zbs-logo-dropzone > span b { font-size: 11px; }
.zbs-logo-dropzone img { max-height: 48px; }
.zbs-logo-file-meta { font-size: 10px; }
.zbs-logo-validation { margin-top: 9px; padding: 8px 10px; font-size: 11px; }

.zbs-review-main > h2 { font-size: 21px; }
.zbs-review-summary strong,.zbs-review-param-head,.zbs-review-note { font-size: 12px; }
.zbs-review-summary small,.zbs-review-consent { font-size: 11px; }
.zbs-review-guidance,.zbs-review-param-row input,.zbs-review-note textarea { font-size: 12px; }

@media (max-width: 1450px) {
  .zbs-designer-layout { grid-template-columns: 305px 390px minmax(480px,1fr); }
  .zbs-phone-device { width: min(315px,100%); }
  .zbs-designer-editor-pane .zbs-editor-scroll { padding: 14px; }
}
@media (max-width: 1279px) {
  .zbs-studio-bar { grid-template-columns: 96px minmax(180px,1fr) auto; }
  .zbs-studio-steps { grid-row: 2; grid-column: 1 / -1; min-height: 44px; margin: 0 -24px -10px; border-top: 1px solid #edf0f4; }
  .zbs-studio-steps span::after { bottom: 0; }
  .zbs-designer-layout { grid-template-columns: 320px minmax(390px,1fr); }
  .zbs-designer-editor-pane { grid-column: 1 / -1; min-height: 0; border-top: 1px solid #e6ecf3; }
  .zbs-designer-editor-pane .zbs-editor-scroll { max-height: none; }
}
@media (max-width: 760px) {
  .zbs-studio-title > small { display: none; }
  .zbs-studio-steps span { min-width: 0; font-size: 12px; }
  .zbs-designer-layout { grid-template-columns: 1fr; }
  .zbs-logo-upload-grid { grid-template-columns: 1fr; }
}

/* Data Hub column visibility */
#dataHubColumnsModal .small-modal { width: min(680px,calc(100vw - 28px)); }
.datahub-columns-body { gap: 13px; }
.datahub-base-columns { border-color: #d9e8f5; background: #f5faff; }
.datahub-base-columns strong { font-size: 13px; }
.datahub-base-columns span { font-size: 11px; }
.datahub-custom-column-list { max-height: min(420px,50vh); overflow-y: auto; padding-right: 3px; }
.datahub-custom-column {
  grid-template-columns: minmax(0,1fr) 120px 74px 34px;
  min-height: 48px;
  padding: 8px 9px 8px 12px;
  border-color: #e0e9f2;
  background: #fff;
  transition: opacity .15s ease,background .15s ease;
}
.datahub-custom-column.is-hidden { color: #9aa8b8; background: #f8fafc; }
.datahub-custom-column.is-hidden > span,.datahub-custom-column.is-hidden code,.datahub-custom-column.is-hidden em { opacity: .52; }
.datahub-custom-column > span > .app-icon { width: 17px; height: 17px; }
.datahub-custom-column strong { font-size: 12px; }
.datahub-custom-column code,.datahub-custom-column em { font-size: 10px; }
.datahub-column-visibility,.datahub-column-locked {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  justify-self: end;
  border: 0;
  border-radius: 8px;
  color: #347dbe;
  background: #eef7ff;
}
.datahub-column-visibility { cursor: pointer; }
.datahub-column-visibility:hover { color: #1768b3; background: #dceeff; }
.datahub-column-visibility .app-icon,.datahub-column-locked .app-icon { width: 17px; height: 17px; }
.datahub-column-locked { color: #738397; background: #f0f3f6; }
.datahub-custom-column.is-hidden .datahub-column-visibility { color: #8a98aa; background: #edf1f5; }
@media (max-width: 620px) {
  .datahub-custom-column { grid-template-columns: minmax(0,1fr) 34px; }
  .datahub-custom-column code,.datahub-custom-column em { display: none; }
}

.datahub-record-system-note {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid #d7e8f7;
  border-radius: 9px;
  color: #54718e;
  background: #f3f9ff;
  font-size: 11px;
}
.datahub-record-system-note .app-icon { width: 17px; height: 17px; flex: 0 0 auto; }
#customerDynamicFields:empty { display: none; }
#customerDynamicFields label > span { font-size: 12px; }
#customerDynamicFields :is(input,select) { min-height: 42px; font-size: 13px; }
.datahub-no-editable-column { grid-column: 1 / -1; padding: 18px; border: 1px dashed #cdddea; border-radius: 9px; color: #718399; background: #f9fcff; font-size: 12px; text-align: center; }

/* Data Hub destructive controls */
.datahub-custom-column { grid-template-columns: minmax(0,1fr) 112px 70px 34px 34px; }
.datahub-column-delete,.datahub-column-delete-placeholder { width: 32px; height: 32px; display: grid; place-items: center; justify-self: end; }
.datahub-column-delete { border: 0; border-radius: 8px; color: #c44355; background: #fff0f2; cursor: pointer; }
.datahub-column-delete:hover { color: #a82538; background: #ffe1e6; }
.datahub-column-delete:disabled { opacity: .38; cursor: not-allowed; }
.datahub-column-delete .app-icon { width: 16px; height: 16px; }
.datahub-delete-table-button { color: #b23547; }
.datahub-delete-table-button:hover { border-color: #e5a9b2; color: #a12538; background: #fff4f5; }
.datahub-delete-table-button:disabled { opacity: .45; cursor: not-allowed; }

/* Campaign reports remain in campaign/workflow context */
.campaign-report-modal { width: min(1120px,calc(100vw - 32px)); max-height: min(900px,calc(100vh - 32px)); }
.campaign-report-body { display: grid; gap: 20px; overflow-y: auto; padding: 20px 22px 24px; }
.campaign-report-metrics { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
.campaign-report-metrics article { min-height: 92px; display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 10px; padding: 14px; border: 1px solid #e0eaf3; border-radius: 11px; background: #fbfdff; }
.campaign-report-metrics article > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: #2673b5; background: #e8f5ff; }
.campaign-report-metrics article.success > span { color: #28805f; background: #eaf9f2; }
.campaign-report-metrics article.failed > span { color: #bc3d4e; background: #fff0f2; }
.campaign-report-metrics .app-icon { width: 21px; height: 21px; }
.campaign-report-metrics small,.campaign-report-metrics strong { display: block; }
.campaign-report-metrics small { color: #728195; font-size: 10px; }
.campaign-report-metrics strong { margin-top: 4px; color: #203044; font-size: 20px; }
.campaign-report-section { display: grid; gap: 12px; }
.campaign-report-section > div:first-child h3 { margin: 0; color: #243246; font-size: 15px; }
.campaign-report-section > div:first-child p { margin: 4px 0 0; color: #7b899a; font-size: 11px; }
.campaign-report-steps { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.campaign-report-steps > button { min-width: 0; display: grid; grid-template-columns: 28px 38px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 12px; border: 1px solid #dfe8f1; border-radius: 10px; color: #26374a; background: #fff; text-align: left; cursor: pointer; }
.campaign-report-steps > button:hover { border-color: #82b6df; background: #f5faff; }
.campaign-report-step-number { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: #266eac; background: #e8f4ff; font-size: 11px; font-weight: 750; }
.campaign-report-step-icon { width: 36px; height: 36px; display: grid; place-items: center; }
.campaign-report-step-icon .app-icon { width: 28px; height: 28px; }
.campaign-report-steps strong,.campaign-report-steps small { display: block; }
.campaign-report-steps strong { font-size: 12px; }
.campaign-report-steps small { margin-top: 3px; color: #7a899b; font-size: 10px; }
.campaign-report-steps i { color: #4387bf; font-size: 17px; font-style: normal; }
.campaign-report-runs { display: grid; border: 1px solid #e1e9f1; border-radius: 10px; overflow: hidden; }
.campaign-report-runs > div { display: grid; grid-template-columns: 96px minmax(0,1fr) 150px 70px; align-items: center; gap: 12px; padding: 11px 13px; border-bottom: 1px solid #e8eef4; }
.campaign-report-runs > div:last-child { border-bottom: 0; }
.campaign-report-runs p { min-width: 0; margin: 0; }
.campaign-report-runs strong,.campaign-report-runs small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campaign-report-runs strong { color: #304052; font-size: 12px; }
.campaign-report-runs small,.campaign-report-runs time,.campaign-report-runs em { color: #7a899a; font-size: 10px; font-style: normal; }
.campaign-report-empty { padding: 24px; border: 1px dashed #cadbea; border-radius: 10px; color: #7a899a; background: #f8fcff; font-size: 12px; text-align: center; }
@media (max-width: 900px) {
  .campaign-report-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .campaign-report-steps { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .datahub-custom-column { grid-template-columns: minmax(0,1fr) 34px 34px; }
  .datahub-custom-column code,.datahub-custom-column em { display: none; }
  .campaign-report-body { padding: 15px; }
  .campaign-report-metrics { grid-template-columns: 1fr; }
  .campaign-report-runs > div { grid-template-columns: 1fr auto; }
  .campaign-report-runs > div > .status-badge { grid-column: 1 / -1; justify-self: start; }
}

/* Staff access and role-based permissions */
.settings-access { grid-column: 1 / -1; }
.settings-audit { grid-column: 1 / -1; }
.audit-filters { display: grid; grid-template-columns: minmax(260px,1.6fr) repeat(3,minmax(145px,.8fr)) repeat(2,minmax(135px,.65fr)); gap: 10px; align-items: end; padding: 14px; border: 1px solid #dce7ef; border-radius: 13px; background: #f8fbfe; }
.audit-filters > label > span { display: block; margin: 0 0 6px; color: #526579; font-size: 11.5px; font-weight: 700; }
.audit-filters input[type="date"],.audit-filters .select-control { width: 100%; height: 40px; min-height: 40px; padding: 0 10px; border: 1px solid #cad9e5; border-radius: 9px; background: #fff; color: #26384b; font-size: 12px; }
.audit-filters .search-box { width: 100%; min-height: 40px; border-color: #cad9e5; background: #fff; }
.audit-filters .search-box input { min-width: 0; font-size: 12px; }
.audit-list-head { display: flex; justify-content: space-between; gap: 18px; align-items: center; margin: 15px 1px 8px; }
.audit-list-head span { color: #2c4054; font-size: 12px; font-weight: 750; }
.audit-list-head small { color: #8190a0; font-size: 10.5px; }
.employee-audit-list { border: 1px solid #dce7ef; border-radius: 13px; overflow: hidden; background: #fff; }
.employee-audit-item { display: grid; grid-template-columns: 42px minmax(0,1fr) minmax(150px,auto); gap: 12px; align-items: start; padding: 13px 15px; border-bottom: 1px solid #e6edf3; }
.employee-audit-item:last-child { border-bottom: 0; }
.employee-audit-item:hover { background: #f9fcff; }
.audit-entry-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #e9f4ff; color: #287eba; }
.audit-entry-icon .app-icon { width: 19px; height: 19px; }
.audit-entry-icon.staff,.audit-entry-icon.auth { background: #eef0ff; color: #5d63bf; }
.audit-entry-icon.campaign,.audit-entry-icon.message { background: #e8f5ff; color: #1879bd; }
.audit-entry-icon.datahub,.audit-entry-icon.customer { background: #eaf8f3; color: #21876c; }
.audit-entry-icon.appointment { background: #fff3e8; color: #b56b25; }
.audit-entry-icon.template,.audit-entry-icon.zalo { background: #f4edff; color: #7650bd; }
.audit-entry-icon.system { background: #f0f3f6; color: #5e6b78; }
.audit-entry-main > div { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.audit-entry-main strong { color: #25384b; font-size: 12.5px; }
.audit-entry-main small { color: #8190a0; font-size: 10.5px; }
.audit-entry-main p { margin: 5px 0 0; color: #405267; font-size: 12px; line-height: 1.45; }
.audit-category { padding: 3px 7px; border-radius: 999px; font-size: 9.5px; font-weight: 750; }
.audit-category.info { background: #eaf4fd; color: #2479b8; }.audit-category.success { background: #e8f7ef; color: #277c58; }.audit-category.danger { background: #fff0f1; color: #b14a56; }
.audit-context { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.audit-context span { max-width: 260px; overflow: hidden; padding: 3px 7px; border: 1px solid #dce7ef; border-radius: 6px; color: #617387; background: #fbfdff; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.employee-audit-item time { color: #728295; font-size: 10.5px; line-height: 1.45; text-align: right; white-space: nowrap; }
.audit-load-more { display: flex; justify-content: center; padding-top: 13px; }
.audit-loading { padding: 26px; color: #748597; font-size: 12px; text-align: center; }
.staff-access-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 2px 0 18px; }
.staff-access-summary > div { padding: 14px 16px; border: 1px solid #dbe7f0; border-radius: 12px; background: linear-gradient(145deg,#fff,#f6fbff); }
.staff-access-summary span,.staff-access-summary strong { display: block; }
.staff-access-summary span { color: #718096; font-size: 12px; }
.staff-access-summary strong { margin-top: 5px; color: #213247; font-size: 22px; }
.staff-list { display: grid; gap: 10px; }
.staff-card { display: grid; grid-template-columns: 46px minmax(220px,1.35fr) minmax(145px,.9fr) minmax(155px,1fr) minmax(130px,.75fr) auto; gap: 13px; align-items: center; min-height: 78px; padding: 13px 15px; border: 1px solid #dce7ef; border-radius: 13px; background: #fff; }
.staff-card.inactive { background: #f8fafc; opacity: .72; }
.staff-avatar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(145deg,#e1f2ff,#b9ddff); color: #1769aa; font-size: 14px; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(42,139,214,.14); }
.staff-main > div { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.staff-main strong { font-size: 14px; }
.staff-main small { display: block; margin-top: 5px; color: #7a8795; font-size: 11.5px; }
.staff-status { display: inline-flex; align-items: center; gap: 5px; color: #32825a; font-size: 11px; }
.staff-status i { width: 6px; height: 6px; border-radius: 50%; background: #35ad72; }
.staff-card.inactive .staff-status { color: #9a5c63; }.staff-card.inactive .staff-status i { background: #d36976; }
.staff-scope span,.staff-scope strong { display: block; }
.staff-scope span { color: #8793a1; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.staff-scope strong { max-width: 230px; margin-top: 5px; overflow: hidden; color: #34465a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.staff-owner-lock { color: #5681a7; font-size: 11px; font-weight: 700; text-align: center; }
.staff-card-actions { display: flex; flex-direction: column; align-items: stretch; gap: 7px; }
.staff-card-actions .secondary-button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding-inline: 11px; white-space: nowrap; }
.staff-card-actions .app-icon { width: 14px; height: 14px; }
.staff-empty,.staff-load-error { padding: 24px; border: 1px dashed #d3e0e9; border-radius: 12px; color: #718096; text-align: center; }
.staff-empty.compact { padding: 14px; }
.staff-load-error { color: #b44752; background: #fff8f8; }
.staff-access-modal { width: min(1080px,calc(100vw - 36px)); max-height: min(900px,calc(100vh - 30px)); }
.staff-access-modal .modal-head { flex: 0 0 auto; }
.staff-access-form { overflow: auto; padding: 18px 22px 0; }
.staff-access-form > .modal-actions { position: sticky; bottom: 0; z-index: 3; margin: 18px -22px 0; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }
.staff-form-section { padding: 18px; border: 1px solid #dbe7ef; border-radius: 14px; background: #fff; }
.staff-form-section + .staff-form-section { margin-top: 14px; }
.staff-section-title { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 16px; }
.staff-section-title > span { width: 28px; height: 28px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 9px; background: #e8f4ff; color: #2278bf; font-size: 12px; font-weight: 800; }
.staff-section-title strong,.staff-section-title small { display: block; }
.staff-section-title strong { color: #24364a; font-size: 14px; }.staff-section-title small { margin-top: 3px; color: #8190a0; font-size: 11.5px; }
.staff-identity-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.staff-identity-grid label > span { display: block; margin-bottom: 7px; color: #3a4b5e; font-size: 12px; font-weight: 700; }
.staff-identity-grid label > span i { color: #8796a5; font-size: 10px; font-style: normal; font-weight: 500; }
.staff-identity-grid input,.staff-identity-grid select { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid #cad9e5; border-radius: 9px; background: #fff; color: #27384a; font-size: 13px; }
.staff-role-options,.oa-scope-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.staff-role-options label,.oa-scope-options label { position: relative; display: flex; gap: 10px; align-items: flex-start; min-height: 75px; padding: 13px; border: 1px solid #d5e2eb; border-radius: 11px; cursor: pointer; }
.oa-scope-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
.staff-role-options label:has(input:checked),.oa-scope-options label:has(input:checked) { border-color: #3e98df; background: #f1f8ff; box-shadow: 0 0 0 2px rgba(62,152,223,.10); }
.staff-role-options input,.oa-scope-options input { margin-top: 3px; accent-color: #2e8bd2; }
.staff-role-options strong,.staff-role-options small,.oa-scope-options strong,.oa-scope-options small { display: block; }
.staff-role-options strong,.oa-scope-options strong { color: #2b3e52; font-size: 12.5px; }.staff-role-options small,.oa-scope-options small { margin-top: 4px; color: #7d8d9d; font-size: 10.5px; line-height: 1.45; }
.permission-matrix { margin-top: 14px; overflow: hidden; border: 1px solid #dbe6ee; border-radius: 11px; }
.permission-head,.permission-row { display: grid; grid-template-columns: minmax(200px,1fr) repeat(4,78px); align-items: center; }
.permission-head { min-height: 38px; background: #f4f8fb; color: #718195; font-size: 10.5px; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: .035em; }
.permission-head span:first-child { padding-left: 14px; text-align: left; }
.permission-row { min-height: 43px; border-top: 1px solid #e5edf3; }
.permission-row > strong { padding-left: 14px; color: #34475a; font-size: 12px; }
.permission-row > label { height: 43px; display: grid; place-items: center; cursor: pointer; }
.permission-row input { position: absolute; opacity: 0; pointer-events: none; }
.permission-row label span { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid #bfcfdb; border-radius: 6px; background: #fff; }
.permission-row input:checked + span { border-color: #2c8ed9; background: #2c8ed9; }
.permission-row input:checked + span::after { content: "✓"; color: #fff; font-size: 12px; font-weight: 900; }
.permission-na { color: #c5d0d9; font-size: 12px; font-style: normal; text-align: center; }
.staff-oa-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 12px; transition: opacity .15s ease; }
.staff-oa-list.disabled { opacity: .48; }
.staff-oa-list > label { display: grid; grid-template-columns: 20px 34px 1fr; gap: 9px; align-items: center; padding: 10px 12px; border: 1px solid #dbe6ed; border-radius: 10px; background: #fafcfe; }
.staff-oa-list input { accent-color: #2c8ed9; }.staff-oa-list strong,.staff-oa-list small { display: block; }.staff-oa-list strong { font-size: 12px; }.staff-oa-list small { margin-top: 3px; color: #8190a0; font-size: 10px; }
.staff-oa-mark.hub { color: #4f67c8; background: #edf0ff; }
.staff-oa-mark.hub .app-icon { width: 17px; height: 17px; }
.staff-oa-mark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: #e6f3ff; color: #267ebf; font-size: 10px; font-weight: 800; }
.hub-oa-scope-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.hub-oa-scope-field legend { margin-bottom: 8px; color: #44566b; font-size: 11px; font-weight: 650; }
.hub-oa-mode { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.hub-oa-mode > label { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 9px; align-items: start; padding: 11px 12px; border: 1px solid #dbe6ed; border-radius: 10px; background: #fafcfe; cursor: pointer; }
.hub-oa-mode > label:has(input:checked) { border-color: #2c8ed9; background: #f0f8ff; box-shadow: 0 0 0 2px rgba(44,142,217,.08); }
.hub-oa-mode input,.hub-oa-list input { width: 16px !important; height: 16px; min-height: 0 !important; margin-top: 1px; accent-color: #2c8ed9; }
.hub-oa-mode strong,.hub-oa-mode small,.hub-oa-list strong,.hub-oa-list small { display: block; }
.hub-oa-mode strong,.hub-oa-list strong { font-size: 11.5px; }
.hub-oa-mode small,.hub-oa-list small { margin-top: 3px; color: #8190a0; font-size: 10px; line-height: 1.4; }
.hub-oa-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 10px; transition: opacity .15s ease; }
.hub-oa-list.disabled { opacity: .48; }
.hub-oa-list > label { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 8px; align-items: center; padding: 9px 11px; border: 1px solid #e1eaf0; border-radius: 9px; background: #fff; }
.hub-oa-empty { grid-column: 1/-1; padding: 10px 12px; border: 1px dashed #cedde7; border-radius: 9px; color: #718396; background: #f8fbfd; font-size: 10.5px; line-height: 1.45; }
.staff-password-modal { width: min(560px,calc(100vw - 32px)); }
.staff-password-form { display: grid; gap: 15px; padding: 20px 22px 0; }
.staff-password-form > label > span { display: block; margin-bottom: 7px; color: #34485d; font-size: 12px; font-weight: 750; }
.password-account-summary { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid #d8e6f0; border-radius: 13px; background: linear-gradient(145deg,#f8fcff,#fff); }
.password-account-summary strong,.password-account-summary small { display: block; }.password-account-summary strong { color: #24384d; font-size: 14px; }.password-account-summary small { margin-top: 3px; color: #7a8999; font-size: 11.5px; }
.password-input-wrap { display: grid; grid-template-columns: minmax(0,1fr) auto; overflow: hidden; border: 1px solid #c8d8e5; border-radius: 10px; background: #fff; }
.password-input-wrap:focus-within { border-color: #368fd4; box-shadow: 0 0 0 3px rgba(54,143,212,.12); }
.password-input-wrap input { min-width: 0; height: 44px; padding: 0 12px; border: 0; outline: 0; color: #24384d; font-size: 13px; }
.password-visibility-button { min-width: 62px; border: 0; border-left: 1px solid #e0e9f0; background: #f6f9fb; color: #347db6; font-size: 11.5px; font-weight: 750; cursor: pointer; }
.password-security-note { display: flex; gap: 9px; align-items: flex-start; padding: 11px 12px; border-radius: 10px; color: #49647d; background: #eef7fd; font-size: 11.5px; line-height: 1.5; }
.password-security-note .app-icon { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; color: #2d86c9; }
.staff-password-form > .modal-actions { margin: 2px -22px 0; }

/* Workflow controls: explicit delay modes and stopped-campaign management. */
.workflow-delay-modes { display: grid; gap: 9px; }
.workflow-delay-mode { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 10px !important; padding: 12px; border: 1px solid #d9e7f3; border-radius: 10px; background: #fff; cursor: pointer; }
.workflow-delay-mode:has(input:checked) { border-color: #2d8bdd; background: #f2f9ff; box-shadow: 0 0 0 2px rgba(45,139,221,.09); }
.workflow-delay-mode input { width: 17px !important; height: 17px !important; margin: 2px 0 0; accent-color: #2d8bdd; }
.workflow-delay-mode > span { display: grid; gap: 3px; color: #21344a; }
.workflow-delay-mode strong { font-size: 13px; }
.workflow-delay-mode small { color: #708397; font-size: 11px; line-height: 1.45; }
.workflow-delay-duration { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.campaign-row-actions .text-button.danger { color: #c03945; }
.campaign-row-actions .text-button.danger:hover { color: #9f2632; background: #fff0f2; }
.campaign-manage-form { padding: 20px 22px 0; }
.campaign-manage-form > label { display: grid; gap: 7px; color: #34495e; font-size: 12px; font-weight: 700; }
.campaign-manage-form input { min-height: 43px; padding: 0 12px; border: 1px solid #cadbe9; border-radius: 9px; font: inherit; }
.campaign-manage-form > .modal-actions { margin: 20px -22px 0; }
.campaign-delete-body { display: grid; gap: 14px; padding: 20px 22px; }
.campaign-delete-body > p { margin: 0; color: #2a3b4d; font-size: 14px; }
.modal-eyebrow.danger { color: #bd3342; }
.workflow-name-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: center; }
.workflow-name-control #renameWorkflowButton { min-height: 38px; padding-inline: 13px; white-space: nowrap; }
.workflow-name-control #renameWorkflowButton:disabled { color: #8493a3; background: #f2f5f7; border-color: #dce5ec; opacity: 1; }

@media (max-width: 560px) {
  .workflow-delay-duration { grid-template-columns: 1fr; }
  .workflow-name-control { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .staff-access-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .staff-card { grid-template-columns: 44px 1fr auto; }
  .staff-card .staff-scope { grid-column: 2 / -1; }
  .staff-card-actions { grid-column: 2 / -1; flex-direction: row; justify-content: flex-end; }
  .staff-role-options { grid-template-columns: 1fr; }
  .staff-identity-grid,.staff-oa-list,.hub-oa-mode,.hub-oa-list { grid-template-columns: 1fr; }
  .permission-head,.permission-row { grid-template-columns: minmax(150px,1fr) repeat(4,54px); }
  .audit-filters { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .audit-search { grid-column: span 2; }
}
@media (max-width: 600px) {
  .staff-access-modal { width: 100vw; max-height: 100vh; border-radius: 0; }
  .staff-access-form { padding-inline: 12px; }.staff-access-form > .modal-actions { margin-inline: -12px; }
  .staff-form-section { padding: 13px; }
  .oa-scope-options { grid-template-columns: 1fr; }
  .permission-matrix { overflow-x: auto; }.permission-head,.permission-row { min-width: 480px; }
  .audit-filters { grid-template-columns: 1fr; }.audit-search { grid-column: auto; }
  .audit-list-head { align-items: flex-start; flex-direction: column; gap: 4px; }
  .employee-audit-item { grid-template-columns: 38px minmax(0,1fr); padding: 12px; }
  .employee-audit-item time { grid-column: 2; text-align: left; white-space: normal; }
}

/* Aggregate reports by campaign and Zalo OA */
.report-page-toolbar { align-items: center; }
.aggregate-report-filters { display: grid; grid-template-columns: repeat(4,minmax(160px,1fr)) auto; gap: 12px; align-items: end; margin-bottom: 14px; }
.aggregate-report-filters label > span { display: block; margin: 0 0 7px; color: #526579; font-size: 11.5px; font-weight: 750; }
.aggregate-report-filters .select-control { width: 100%; min-width: 0; height: 42px; border-color: #cad9e5; border-radius: 9px; background: #fff; color: #25384c; font-size: 12px; }
.aggregate-report-filters > button { height: 42px; white-space: nowrap; }
.aggregate-report-kpis { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; margin-bottom: 14px; }
.aggregate-report-kpis article { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 12px; align-items: center; min-height: 104px; padding: 15px; border: 1px solid #dbe7ef; border-radius: 14px; background: #fff; box-shadow: 0 7px 22px rgba(49,91,126,.055); }
.report-kpi-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 13px; color: #287fc3; background: #e8f4ff; }
.report-kpi-icon .app-icon { width: 21px; height: 21px; }
.report-kpi-icon.success { color: #25815b; background: #e8f7ef; }.report-kpi-icon.failed { color: #bd5360; background: #fff0f1; }.report-kpi-icon.sent { color: #7150bc; background: #f2edff; }.report-kpi-icon.cost { color: #a96826; background: #fff4e8; }
.aggregate-report-kpis small,.aggregate-report-kpis strong,.aggregate-report-kpis em { display: block; }
.aggregate-report-kpis small { color: #65758a; font-size: 11px; }.aggregate-report-kpis strong { margin-top: 3px; color: #1f3347; font-size: 23px; line-height: 1.15; }.aggregate-report-kpis em { margin-top: 4px; overflow: hidden; color: #8a97a6; font-size: 9.5px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.aggregate-report-layout { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(320px,.85fr); gap: 14px; }
.aggregate-trend-panel,.aggregate-oa-panel,.aggregate-campaign-panel { margin: 0; }
.aggregate-campaign-panel { grid-column: 1 / -1; }
.aggregate-legend { display: flex; gap: 6px; align-items: center; color: #718094; font-size: 10px; }
.aggregate-legend i { width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; }.aggregate-legend i.success { background: #4bb680; }.aggregate-legend i.failed { background: #e26b75; }
.aggregate-trend-chart { min-height: 224px; display: flex; gap: 9px; align-items: flex-end; padding: 22px 10px 2px; border-top: 1px solid #e6edf3; background: repeating-linear-gradient(to top,transparent 0,transparent 39px,#edf2f6 40px); }
.aggregate-day { min-width: 28px; height: 195px; display: flex; flex: 1 1 0; flex-direction: column; justify-content: flex-end; align-items: center; }
.aggregate-day > strong { margin-bottom: 5px; color: #526579; font-size: 9.5px; }
.aggregate-day > span { margin-top: 7px; color: #8390a0; font-size: 9px; }
.aggregate-bar { width: min(30px,72%); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; border-radius: 7px 7px 3px 3px; background: #edf2f6; box-shadow: 0 0 0 1px rgba(54,89,119,.06); }
.aggregate-bar i { display: block; width: 100%; min-height: 0; }.aggregate-bar i.success { background: linear-gradient(#62c996,#3ca975); }.aggregate-bar i.failed { background: #e16a74; }.aggregate-bar i.other { background: #bcc9d5; }
.aggregate-chart-empty { width: 100%; min-height: 170px; display: grid; place-items: center; color: #8291a1; font-size: 11.5px; text-align: center; }
.aggregate-oa-list { display: grid; gap: 9px; max-height: 240px; overflow: auto; padding-right: 2px; }
.aggregate-oa-card { width: 100%; display: grid; grid-template-columns: 36px minmax(0,1fr) 96px; gap: 10px; align-items: center; padding: 11px; border: 1px solid #dbe6ee; border-radius: 11px; background: #fff; color: inherit; text-align: left; cursor: pointer; }
.aggregate-oa-card:hover,.aggregate-oa-card.selected { border-color: #74b5e5; background: #f3f9fe; }.aggregate-oa-card.selected { box-shadow: inset 3px 0 #2d8cd2; }
.aggregate-oa-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #2278b7; background: #e6f3fd; font-size: 10px; font-weight: 850; }
.aggregate-oa-card strong,.aggregate-oa-card small { display: block; }.aggregate-oa-card strong { overflow: hidden; color: #2b3d50; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }.aggregate-oa-card small { margin-top: 3px; color: #8491a0; font-size: 9px; }
.aggregate-oa-rate { text-align: right; }.aggregate-oa-rate b { display: block; color: #2b4054; font-size: 12px; }.aggregate-oa-rate > i { height: 5px; display: block; margin: 5px 0; overflow: hidden; border-radius: 999px; background: #e8eef3; }.aggregate-oa-rate > i u { height: 100%; display: block; border-radius: inherit; background: #4bb680; text-decoration: none; }
.aggregate-campaign-panel > .panel-head > strong { color: #557086; font-size: 11px; }
.aggregate-report-table-wrap { border: 1px solid #dce6ee; border-radius: 12px; }
.aggregate-report-table { min-width: 1120px; }
.aggregate-report-table th { color: #6c7c8e; background: #f5f9fc; font-size: 9.5px; text-transform: uppercase; letter-spacing: .025em; }
.aggregate-report-table td { color: #3e5063; font-size: 11px; vertical-align: middle; }
.aggregate-report-table td:first-child strong,.aggregate-report-table td:first-child small { display: block; }.aggregate-report-table td:first-child strong { max-width: 250px; overflow: hidden; color: #283c50; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }.aggregate-report-table td:first-child small { margin-top: 3px; max-width: 180px; overflow: hidden; color: #8b98a6; font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.aggregate-report-table td:nth-child(4),.aggregate-report-table td:nth-child(5),.aggregate-report-table td:nth-child(7),.aggregate-report-table td:nth-child(8) { text-align: right; }.aggregate-report-table td:nth-child(5) small { display: block; margin-top: 2px; color: #ba5661; font-size: 8.5px; }
.aggregate-oa-name { display: inline-block; max-width: 175px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aggregate-rate-cell { min-width: 82px; display: grid; grid-template-columns: 30px 1fr; gap: 7px; align-items: center; }.aggregate-rate-cell b { color: #334a5f; font-size: 10.5px; }.aggregate-rate-cell i { height: 5px; overflow: hidden; border-radius: 999px; background: #e7edf2; }.aggregate-rate-cell u { height: 100%; display: block; border-radius: inherit; background: #48b47d; text-decoration: none; }
@media (max-width: 1200px) {
  .aggregate-report-filters { grid-template-columns: repeat(2,minmax(0,1fr)) auto; }
  .aggregate-report-kpis { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .aggregate-report-layout { grid-template-columns: 1fr; }.aggregate-campaign-panel { grid-column: auto; }
}
@media (max-width: 700px) {
  .report-page-toolbar { align-items: flex-start; }
  .aggregate-report-filters,.aggregate-report-kpis { grid-template-columns: 1fr; }
  .aggregate-report-filters > button { width: 100%; }
  .aggregate-trend-chart { gap: 4px; overflow-x: auto; }.aggregate-day { min-width: 34px; }
  .aggregate-oa-card { grid-template-columns: 34px minmax(0,1fr); }.aggregate-oa-rate { grid-column: 2; text-align: left; }
}

/* Mini App dynamic pages */
.dynamic-pages-section { margin-top: 28px; }
.dynamic-pages-toolbar { align-items: flex-end; margin-bottom: 14px; }
.dynamic-pages-toolbar h2 { margin: 3px 0 4px; }
.section-eyebrow { color: #0878d1; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.dynamic-page-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 12px; }
.dynamic-page-kpis > div { min-height: 76px; padding: 15px 16px; border: 1px solid #e5edf6; border-radius: 15px; background: linear-gradient(145deg,#fff,#f8fbff); }
.dynamic-page-kpis span { display: block; color: #708095; font-size: 10px; font-weight: 650; }
.dynamic-page-kpis strong { display: block; margin-top: 5px; color: #17263a; font-size: 22px; letter-spacing: -.04em; }
.dynamic-page-workspace { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 12px; align-items: start; }
.dynamic-page-sidebar { position: sticky; top: 78px; padding: 12px; }
.dynamic-page-sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 3px 3px 11px; border-bottom: 1px solid #edf1f6; }
.dynamic-page-sidebar-head > div { display: grid; gap: 2px; }
.dynamic-page-sidebar-head strong { font-size: 13px; }.dynamic-page-sidebar-head small { color: #8995a5; font-size: 10px; }
.icon-button-soft { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #e5ebf2; border-radius: 10px; color: #66788e; background: #f8fafc; }
.icon-button-soft svg { width: 15px; height: 15px; }
.dynamic-page-list { display: grid; gap: 6px; margin-top: 9px; }
.dynamic-page-list button { width: 100%; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 9px; border: 1px solid transparent; border-radius: 12px; text-align: left; background: transparent; }
.dynamic-page-list button:hover { background: #f6f9fc; }.dynamic-page-list button.active { border-color: #cde3f8; background: #f0f8ff; }
.dynamic-page-list button > b { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #0878d1; background: #e7f3ff; font-size: 12px; }
.dynamic-page-list button > span { min-width: 0; display: grid; gap: 2px; }.dynamic-page-list button strong,.dynamic-page-list button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dynamic-page-list button strong { color: #233247; font-size: 11px; }.dynamic-page-list button small { color: #8995a5; font-size: 9px; }
.dynamic-page-list button em { padding: 3px 6px; border-radius: 999px; color: #7f8b9a; background: #f0f2f5; font-size: 8px; font-style: normal; font-weight: 750; }
.dynamic-page-list button em.live { color: #067247; background: #e6f8ef; }
.dynamic-page-empty { padding: 28px 10px 20px; display: grid; gap: 4px; text-align: center; }.dynamic-page-empty strong { color: #526175; font-size: 11px; }.dynamic-page-empty span { color: #96a0ae; font-size: 9px; line-height: 1.45; }
.dynamic-page-welcome { min-height: 340px; display: grid; place-items: center; align-content: center; padding: 40px; text-align: center; }
.dynamic-page-welcome > span { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; color: #0b7bd1; background: #eaf5ff; }.dynamic-page-welcome svg { width: 28px; height: 28px; }
.dynamic-page-welcome h3 { margin: 14px 0 5px; color: #26364a; font-size: 16px; }.dynamic-page-welcome p { max-width: 430px; margin: 0; color: #78879a; font-size: 11px; line-height: 1.55; }
.dynamic-page-builder { min-width: 0; padding: 0; overflow: hidden; }
.dynamic-builder-head { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid #e8edf3; }
.dynamic-builder-head > div { display: flex; align-items: center; gap: 9px; }.dynamic-builder-back { width: 34px; height: 34px; border: 1px solid #e4eaf1; border-radius: 10px; color: #55667a; background: #fff; font-size: 18px; }
.dynamic-builder-head span { display: grid; gap: 2px; }.dynamic-builder-head span small { color: #12845d; font-size: 8px; font-weight: 800; letter-spacing: .08em; }.dynamic-builder-head span strong { color: #203147; font-size: 13px; }
.dynamic-builder-head .primary-button,.dynamic-builder-head .secondary-button { height: 35px; padding: 0 14px; font-size: 10px; }
.dynamic-builder-tabs { display: flex; gap: 2px; padding: 0 16px; border-bottom: 1px solid #e9eef4; background: #fbfcfe; }
.dynamic-builder-tabs button { position: relative; padding: 12px 13px 11px; border: 0; color: #78869a; background: transparent; font-size: 10px; font-weight: 650; }
.dynamic-builder-tabs button.active { color: #096fc2; }.dynamic-builder-tabs button.active::after { content:""; position: absolute; right: 9px; bottom: -1px; left: 9px; height: 2px; border-radius: 2px; background: #1688df; }
.dynamic-builder-layout { display: grid; grid-template-columns: minmax(0,1fr) 286px; min-height: 600px; }.dynamic-builder-controls { padding: 16px; border-right: 1px solid #edf1f5; background: #fbfcfe; }
.dynamic-control-section { margin-bottom: 12px; padding: 14px; border: 1px solid #e6edf4; border-radius: 14px; background: #fff; }
.dynamic-control-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }.dynamic-control-heading > span { display: grid; gap: 2px; }.dynamic-control-heading strong { color: #26364a; font-size: 11px; }.dynamic-control-heading small { color: #8995a4; font-size: 9px; }
.secondary-button.compact { height: 30px; padding: 0 10px; font-size: 9px; }
.dynamic-control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.dynamic-control-grid label,.dynamic-data-panel label { display: grid; gap: 5px; }.dynamic-control-grid label.full { grid-column: 1/-1; }
.dynamic-control-grid label > span,.dynamic-data-panel label > span { color: #526276; font-size: 9px; font-weight: 650; }
.dynamic-control-grid input,.dynamic-control-grid textarea,.dynamic-data-panel select { width: 100%; border: 1px solid #dfe6ee; border-radius: 9px; color: #25354a; background: #fff; font: inherit; font-size: 10px; outline: none; }
.dynamic-control-grid input,.dynamic-data-panel select { height: 36px; padding: 0 10px; }.dynamic-control-grid textarea { min-height: 58px; padding: 9px 10px; resize: vertical; }
.dynamic-control-grid input:focus,.dynamic-control-grid textarea:focus,.dynamic-data-panel select:focus { border-color: #67afe5; box-shadow: 0 0 0 3px rgba(39,139,214,.1); }
.slug-input { display: flex; align-items: center; overflow: hidden; border: 1px solid #dfe6ee; border-radius: 9px; background: #f7f9fb; }.slug-input b { padding-left: 9px; color: #8a96a6; font-size: 9px; font-weight: 550; white-space: nowrap; }.slug-input input { border: 0; background: transparent; box-shadow: none!important; }
.dynamic-permission-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }.dynamic-permission-grid label { display: flex; gap: 7px; align-items: flex-start; padding: 9px; border: 1px solid #e6ebf1; border-radius: 10px; background: #fbfcfd; }.dynamic-permission-grid input { margin-top: 2px; accent-color: #0a7bd1; }.dynamic-permission-grid span { display: grid; gap: 2px; }.dynamic-permission-grid strong { color: #35465a; font-size: 9px; }.dynamic-permission-grid small { color: #8b97a5; font-size: 8px; line-height: 1.35; }
.dynamic-component-list { display: grid; gap: 8px; }.dynamic-component-card { display: grid; grid-template-columns: 28px minmax(0,1fr) 28px; gap: 8px; align-items: start; padding: 10px; border: 1px solid #e4eaf1; border-radius: 11px; background: #fcfdff; }
.dynamic-component-card > b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: #0878cc; background: #e8f4ff; font-size: 10px; }.dynamic-component-card > button { width: 28px; height: 28px; border: 0; border-radius: 8px; color: #9a6570; background: #fff1f2; font-size: 15px; }
.dynamic-component-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.dynamic-component-fields label { display: grid; gap: 3px; color: #798697; font-size: 8px; }.dynamic-component-fields input,.dynamic-component-fields select { min-width: 0; height: 31px; padding: 0 7px; border: 1px solid #dfe6ed; border-radius: 8px; color: #304158; background: #fff; font-size: 9px; }.dynamic-component-fields .wide { grid-column: 1/-1; }.dynamic-component-required { display: flex!important; grid-column: 1/-1; flex-direction: row!important; align-items: center; gap: 5px!important; }
.dynamic-phone-preview { padding: 24px 14px; background: radial-gradient(circle at 90% 5%,#e5f4ff,transparent 35%),#f5f8fb; }.dynamic-phone-preview > small { display: block; margin-top: 10px; color: #8795a5; font-size: 9px; text-align: center; }
.dynamic-phone-frame { width: 246px; min-height: 500px; margin: auto; overflow: hidden; border: 7px solid #1d2732; border-radius: 30px; background: #f7f9fc; box-shadow: 0 18px 38px rgba(35,62,88,.17); }.dynamic-phone-status { height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; color: #253040; background: #fff; font-size: 8px; font-weight: 750; }.dynamic-phone-status i { width: 48px; height: 14px; border-radius: 10px; background: #1d2732; }
.dynamic-phone-content { min-height: 470px; padding: 15px 12px 24px; background: linear-gradient(150deg,#fff 0%,#f8fbff 60%,#eef7ff 100%); }.dynamic-preview-brand { display: flex; align-items: center; gap: 7px; margin-bottom: 16px; color: #3d5168; font-size: 8px; font-weight: 750; }.dynamic-preview-brand i { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: #087bd2; font-style: normal; }
.dynamic-phone-content h2 { margin: 0 0 5px; color: #1f3044; font-size: 17px; line-height: 1.25; letter-spacing: -.03em; }.dynamic-phone-content > p { margin: 0 0 14px; color: #758397; font-size: 9px; line-height: 1.45; }
.dynamic-preview-field { display: grid; gap: 4px; margin-bottom: 9px; }.dynamic-preview-field > span { color: #45566b; font-size: 8px; font-weight: 650; }.dynamic-preview-field > div { min-height: 34px; display: flex; align-items: center; padding: 8px 9px; border: 1px solid #dee6ee; border-radius: 9px; color: #a0a9b5; background: #fff; font-size: 8px; }.dynamic-preview-field.verified > div { color: #1d6fae; border-color: #cde6fa; background: #eff8ff; }
.dynamic-preview-heading { margin: 14px 0 6px; color: #26384e; font-size: 12px; font-weight: 750; }.dynamic-preview-paragraph { margin: 0 0 10px!important; color: #768598!important; font-size: 8px!important; }.dynamic-preview-submit { width: 100%; height: 37px; margin-top: 6px; border: 0; border-radius: 10px; color: #fff; background: #087bd2; font-size: 9px; font-weight: 750; }
.dynamic-simple-panel { display: grid; grid-template-columns: 44px minmax(0,1fr) 30px 44px minmax(0,1fr); gap: 13px; align-items: center; min-height: 260px; padding: 30px; }.dynamic-simple-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; color: #0878ce; background: #e8f4ff; font-size: 11px; font-weight: 800; }.dynamic-simple-icon.success { color: #078052; background: #e8f8f0; }.dynamic-simple-panel h3 { margin: 0 0 4px; font-size: 13px; }.dynamic-simple-panel p { margin: 0; color: #778699; font-size: 10px; line-height: 1.5; }.dynamic-flow-arrow { color: #8aa2b6; font-size: 20px; text-align: center; }
.dynamic-data-panel { min-height: 320px; padding: 24px; }.dynamic-data-panel > label { max-width: 520px; }.dynamic-data-panel label small { color: #8794a5; font-size: 9px; }.dynamic-data-panel #dynamicColumnMapSummary { display: grid; gap: 6px; max-width: 620px; margin-top: 18px; }.dynamic-data-panel #dynamicColumnMapSummary > div { display: grid; grid-template-columns: 1fr 24px 1fr; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid #e6ecf2; border-radius: 9px; font-size: 9px; }.dynamic-data-panel #dynamicColumnMapSummary i { color: #0b7ecf; font-style: normal; text-align: center; }
.dynamic-access-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 220px; padding: 30px; }.dynamic-access-panel > div { display: grid; gap: 6px; }.dynamic-access-panel span { color: #7d8a9b; font-size: 9px; }.dynamic-access-panel strong { color: #213349; font-size: 16px; }.dynamic-access-panel small { color: #8794a4; font-size: 9px; }
.dynamic-access-panel .dynamic-access-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.dynamic-insight-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; padding: 22px; }.dynamic-insight-grid > div { padding: 14px; border: 1px solid #e6ecf2; border-radius: 12px; background: #fbfcfe; }.dynamic-insight-grid span { display: block; color: #7b899a; font-size: 9px; }.dynamic-insight-grid strong { display: block; margin-top: 5px; color: #24364c; font-size: 19px; }.dynamic-builder-tab > .notice { margin: 0 22px 22px; }
@media (max-width: 1100px) { .dynamic-page-workspace { grid-template-columns: 210px minmax(0,1fr); }.dynamic-builder-layout { grid-template-columns: 1fr; }.dynamic-builder-controls { border-right: 0; }.dynamic-phone-preview { display: none; } }
@media (max-width: 760px) { .dynamic-page-kpis { grid-template-columns: 1fr 1fr; }.dynamic-page-workspace { grid-template-columns: 1fr; }.dynamic-page-sidebar { position: static; }.dynamic-builder-head { align-items: flex-start; flex-direction: column; }.dynamic-builder-head > div:last-child { width: 100%; }.dynamic-builder-head .primary-button,.dynamic-builder-head .secondary-button { flex: 1; }.dynamic-builder-tabs { overflow-x: auto; }.dynamic-control-grid,.dynamic-permission-grid,.dynamic-component-fields { grid-template-columns: 1fr; }.dynamic-control-grid label.full,.dynamic-component-fields .wide { grid-column: auto; }.dynamic-simple-panel { grid-template-columns: 44px 1fr; }.dynamic-flow-arrow { display: none; }.dynamic-insight-grid { grid-template-columns: 1fr 1fr; } }

/* Zalo Mini App navigation and Dynamic Form workspace */
.nav-item-parent { padding-right: 10px; }
.nav-item-parent > span:nth-child(2) { min-width: 0; flex: 1; }
.nav-parent-caret {
  margin-left: auto;
  color: #8ba0b5;
  font-size: 18px;
  font-style: normal;
  line-height: 1;
  transition: transform .18s ease,color .18s ease;
}
.nav-item-parent.group-active .nav-parent-caret { color: #257bc0; transform: rotate(90deg); }
.nav-submenu {
  display: grid;
  gap: 3px;
  margin: 2px 0 7px 43px;
  padding-left: 12px;
  border-left: 1px solid #d9e7f3;
}
.nav-submenu[hidden] { display: none; }
.nav-submenu button {
  position: relative;
  min-height: 32px;
  padding: 6px 9px 6px 15px;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  color: #687b8e;
  background: transparent;
  font-size: 11.5px;
  font-weight: 620;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.nav-submenu button > span {
  position: absolute;
  top: 50%;
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b7c7d6;
  transform: translateY(-50%);
}
.nav-submenu button:hover { color: #286da8; background: #f3f8fc; }
.nav-submenu button.active { color: #1769aa; background: #eaf5ff; }
.nav-submenu button.active > span { background: #2589d4; box-shadow: 0 0 0 4px rgba(37,137,212,.12); }

.mini-game-section { margin-top: 2px; }
.mini-game-showcase {
  position: relative;
  min-height: 470px;
  display: grid;
  grid-template-columns: minmax(310px,.82fr) minmax(430px,1.18fr);
  align-items: center;
  overflow: hidden;
  margin: 5px 0 16px;
  border: 1px solid #dbe8f2;
  border-radius: 22px;
  background: radial-gradient(circle at 8% 92%,rgba(67,169,239,.11),transparent 17rem),radial-gradient(circle at 96% 5%,rgba(72,169,239,.13),transparent 20rem),linear-gradient(135deg,#fff 0%,#f9fcff 58%,#eff8ff 100%);
  box-shadow: 0 15px 40px rgba(38,90,130,.08);
}
.mini-game-showcase::before { content:""; position: absolute; width: 260px; height: 260px; top: -155px; left: 34%; border: 1px solid rgba(58,148,215,.12); border-radius: 50%; box-shadow: 0 0 0 38px rgba(58,148,215,.035),0 0 0 78px rgba(58,148,215,.025); }
.mini-game-showcase-copy { position: relative; z-index: 2; padding: 44px 18px 44px 42px; }
.mini-game-showcase-copy > small { display: block; color: #2584c7; font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.mini-game-showcase-copy h3 { max-width: 440px; margin: 9px 0 11px; color: #19354e; font-size: clamp(24px,2.25vw,36px); line-height: 1.08; letter-spacing: -.045em; }
.mini-game-showcase-copy > p { max-width: 455px; margin: 0; color: #61778d; font-size: 12px; line-height: 1.62; }
.mini-game-showcase-features { display: grid; gap: 8px; margin-top: 24px; }
.mini-game-showcase-features span { display: flex; align-items: center; gap: 9px; color: #40576d; font-size: 10.5px; font-weight: 690; }
.mini-game-showcase-features b { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: #1779bb; background: #e3f2fc; font-size: 8px; }
.mini-game-showcase-state { display: flex; align-items: center; gap: 9px; margin-top: 24px; padding: 10px 12px; border: 1px solid #d6e6f1; border-radius: 11px; background: rgba(255,255,255,.76); box-shadow: 0 8px 20px rgba(50,98,132,.06); }
.mini-game-showcase-state > i { width: 9px; height: 9px; flex: 0 0 auto; border: 2px solid #fff; border-radius: 50%; background: #f0a23b; box-shadow: 0 0 0 3px rgba(240,162,59,.15); }
.mini-game-showcase-state > span { display: grid; gap: 1px; }.mini-game-showcase-state strong { color: #40576c; font-size: 10px; }.mini-game-showcase-state small { color: #8493a3; font-size: 8.5px; }
.mini-game-showcase-visual { position: relative; z-index: 1; min-height: 470px; display: grid; place-items: center; align-self: stretch; overflow: hidden; padding: 22px 30px 0 0; }
.mini-game-showcase-visual::after { content:""; position: absolute; z-index: -1; width: 450px; height: 450px; top: 24px; right: 4%; border-radius: 50%; background: radial-gradient(circle,#e3f4ff 0%,rgba(227,244,255,.6) 46%,transparent 70%); }
.mini-game-showcase-visual img { width: min(650px,108%); max-height: 470px; display: block; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 18px 24px rgba(23,55,83,.14)); transform: translateY(5px); }
.mini-game-showcase-badge { position: absolute; z-index: 3; top: 26px; right: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.86); border-radius: 999px; color: #33698f; background: rgba(255,255,255,.86); box-shadow: 0 8px 24px rgba(36,82,116,.1); backdrop-filter: blur(10px); font-size: 9px; font-weight: 760; }
.mini-game-showcase-badge .app-icon,.mini-game-showcase-badge .glass-icon { width: 15px; height: 15px; }
.mini-game-coming {
  min-height: 210px;
  display: grid;
  grid-template-columns: 58px minmax(0,1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 28px;
  border-color: #dbeaf6;
  background: radial-gradient(circle at 96% 6%,rgba(65,163,239,.11),transparent 19rem),#fff;
}
.mini-game-coming > span { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; color: #2278bc; background: #e8f4ff; }
.mini-game-coming .app-icon { width: 29px; height: 29px; }
.mini-game-coming small { color: #2781c5; font-size: 9px; font-weight: 800; letter-spacing: .09em; }
.mini-game-coming h3 { margin: 5px 0 6px; color: #203348; font-size: 18px; }
.mini-game-coming p { max-width: 680px; margin: 0; color: #718296; font-size: 12px; line-height: 1.55; }
.mini-game-coming em { padding: 7px 11px; border-radius: 999px; color: #59738b; background: #eef5fa; font-size: 10px; font-style: normal; font-weight: 700; }

.mini-game-development-note {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 15px;
  padding: 13px 15px;
  border: 1px solid #d8e8f4;
  border-radius: 13px;
  background: linear-gradient(120deg,#f7fbff,#fff);
}
.mini-game-development-note > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: #2479b8; background: #e5f3fd; }
.mini-game-development-note > span .app-icon,.mini-game-development-note > span .glass-icon { width: 21px; height: 21px; }
.mini-game-development-note > div { min-width: 0; display: grid; gap: 3px; }
.mini-game-development-note strong { color: #24384c; font-size: 12px; }
.mini-game-development-note small { color: #738599; font-size: 10px; line-height: 1.4; }
.mini-game-development-note em { padding: 6px 10px; border-radius: 999px; color: #526e87; background: #e9f3fa; font-size: 9px; font-style: normal; font-weight: 750; white-space: nowrap; }
.mini-game-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.mini-game-card { min-width: 0; overflow: hidden; border: 1px solid #dfe8f0; border-radius: 17px; background: #fff; box-shadow: 0 8px 24px rgba(41,78,109,.07); }
.mini-game-card.is-developing { cursor: not-allowed; }
.mini-game-art { position: relative; min-height: 408px; display: grid; place-items: center; overflow: hidden; padding: 20px; border-bottom: 1px solid #e7edf3; background: #f2f4f7; }
.mini-game-art::before,.mini-game-art::after { content:""; position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.mini-game-art::before { width: 160px; height: 160px; top: -75px; right: -55px; background: rgba(255,255,255,.64); }
.mini-game-art::after { width: 130px; height: 130px; bottom: -72px; left: -52px; background: rgba(68,164,248,.11); }
.mini-game-art.has-mockup { padding: 0; background: #f5f8fb; isolation: isolate; }
.mini-game-art.has-mockup::before,.mini-game-art.has-mockup::after { display: none; }
.mini-game-card-mockup { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform .35s ease; }
.mini-game-card:hover .mini-game-card-mockup { transform: scale(1.018); }
.mini-game-phone { position: relative; z-index: 1; width: 194px; height: 362px; overflow: hidden; border: 7px solid #303745; border-radius: 31px; background: #fff; box-shadow: 0 17px 33px rgba(28,44,63,.24); }
.mini-game-phone-status { position: absolute; z-index: 5; top: 0; right: 0; left: 0; height: 26px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px; color: #fff; font-size: 7px; }
.mini-game-phone-status b { font-size: 8px; }
.mini-game-phone-status i { position: absolute; top: 5px; left: 50%; width: 52px; height: 15px; border-radius: 999px; background: #111722; transform: translateX(-50%); }
.mini-game-phone-status span { letter-spacing: 1px; }
.mini-game-screen { position: absolute; inset: 0; overflow: hidden; padding: 38px 14px 15px; text-align: center; }
.mini-game-screen button { position: relative; z-index: 3; min-width: 104px; height: 30px; padding: 0 18px; border: 0; border-radius: 999px; color: #fff; font-size: 8px; font-weight: 850; letter-spacing: .025em; box-shadow: 0 5px 12px rgba(26,28,42,.22); opacity: 1; }
.mini-game-status { position: absolute; z-index: 6; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.72); border-radius: 999px; color: #53677b; background: rgba(255,255,255,.9); box-shadow: 0 5px 16px rgba(36,60,80,.12); backdrop-filter: blur(8px); font-size: 9px; font-weight: 750; }
.mini-game-status .app-icon,.mini-game-status .glass-icon { width: 13px; height: 13px; }
.game-sparkle { position: absolute; color: #ffbcd2; font-size: 16px; text-shadow: 0 0 10px rgba(255,121,171,.8); }.sparkle-one { top: 46px; left: 20px; }.sparkle-two { top: 92px; right: 21px; }
.wheel-game-screen { color: #fff; background: radial-gradient(circle at 50% 43%,rgba(255,59,117,.32),transparent 32%),linear-gradient(180deg,#100812 0%,#240711 48%,#f23b71 100%); }
.wheel-game-screen::after { content:""; position: absolute; right: -35px; bottom: -65px; left: -35px; height: 150px; border-radius: 50% 50% 0 0; background: linear-gradient(180deg,rgba(255,255,255,.08),transparent); }
.wheel-game-title { position: relative; z-index: 2; display: block; color: #ff5f99; font-size: 17px; line-height: 1.17; letter-spacing: .02em; text-shadow: 0 2px 0 #fff,0 5px 14px rgba(255,38,116,.35); }
.lucky-wheel { position: relative; z-index: 2; width: 126px; height: 126px; margin: 22px auto 13px; border: 7px solid #1a121b; border-radius: 50%; background: conic-gradient(#fff 0 12.5%,#e83267 12.5% 25%,#fff 25% 37.5%,#9d1243 37.5% 50%,#fff 50% 62.5%,#ee4878 62.5% 75%,#fff 75% 87.5%,#aa1e4c 87.5% 100%); box-shadow: 0 0 0 2px #fa6596,0 10px 20px rgba(0,0,0,.35); }
.lucky-wheel::before { content:""; position: absolute; inset: 10px; border: 1px solid rgba(255,255,255,.46); border-radius: 50%; }
.lucky-wheel > i { position: absolute; inset: 50% auto auto 50%; width: 18px; height: 18px; border: 3px solid #ff6b9f; border-radius: 50%; background: #311021; transform: translate(-50%,-50%); }
.lucky-wheel > b { position: absolute; top: 50%; left: 50%; color: #fff; font-size: 5px; transform: translate(-50%,-50%); }
.lucky-wheel-pointer { position: absolute; z-index: 2; top: -14px; left: 50%; width: 0; height: 0; border-right: 8px solid transparent; border-left: 8px solid transparent; border-top: 18px solid #ff4d88; filter: drop-shadow(0 2px 0 #fff); transform: translateX(-50%); }
.wheel-game-screen > small { position: relative; z-index: 2; display: block; margin-bottom: 8px; color: #fff; font-size: 7px; }
.wheel-game-screen > button { background: linear-gradient(180deg,#ff8eb4,#f12668); }
.game-bottom-nav { position: absolute; z-index: 3; right: 12px; bottom: 15px; left: 12px; display: grid; grid-template-columns: repeat(3,1fr); color: #fff; }
.game-bottom-nav > span { display: grid; gap: 2px; justify-items: center; font-size: 11px; }.game-bottom-nav small { font-size: 5px; }

.scratch-game-art { background: radial-gradient(circle at 12% 7%,rgba(84,207,255,.2),transparent 11rem),#f0f4f7; }
.scratch-game-screen { color: #fff; background: linear-gradient(180deg,#31afe9 0%,#13a9e8 48%,#d9ba78 49%,#f4d38d 100%); }
.scratch-game-screen::before { content:""; position: absolute; top: 157px; right: -35px; left: -35px; height: 85px; border-radius: 50%; background: repeating-radial-gradient(ellipse at 50% 0,#e6fbff 0 5px,#45c9ef 7px 13px,#0aa5df 15px 23px); opacity: .9; }
.game-leaf { position: absolute; z-index: 2; top: 30px; color: #277c3d; font-size: 27px; }.leaf-left { left: -2px; transform: rotate(35deg); }.leaf-right { right: -2px; transform: rotate(145deg); }
.scratch-game-title { position: relative; z-index: 2; display: block; color: #fff; font-size: 23px; line-height: 1; -webkit-text-stroke: 1px #1280c6; text-shadow: 0 3px 0 #0871ad; transform: rotate(-2deg); }
.scratch-game-title + small { position: relative; z-index: 2; display: inline-block; margin-top: 5px; padding: 3px 9px; border-radius: 999px; color: #fff; background: #ee5578; font-size: 6px; font-weight: 800; }
.scratch-card { position: relative; z-index: 3; width: 138px; height: 146px; display: grid; place-items: center; margin: 19px auto 13px; overflow: hidden; border: 5px solid #fff; border-radius: 19px; color: #7f94a7; background: repeating-linear-gradient(135deg,#d6e1e9 0 3px,#c9d6df 3px 6px); box-shadow: 0 0 0 3px #058ee0,0 12px 24px rgba(7,102,157,.25); font-size: 8px; }
.scratch-card::after { content:""; position: absolute; inset: 9px; border: 1px dashed rgba(79,116,141,.38); border-radius: 12px; }
.scratch-card i { position: absolute; width: 56px; height: 18px; top: 58px; left: 30px; background: rgba(255,255,255,.28); filter: blur(5px); transform: rotate(-20deg); }
.scratch-game-screen > button { background: linear-gradient(#ffb83f,#ed8a00); box-shadow: inset 0 0 0 2px #fff,0 5px 12px rgba(113,76,12,.25); }
.scratch-game-screen > p { position: relative; z-index: 2; margin: 5px 0 0; color: #734f19; font-size: 6px; }
.beach-coins { position: absolute; z-index: 2; right: 5px; bottom: 2px; left: 5px; color: #d88e04; font-size: 14px; letter-spacing: 11px; transform: rotate(-4deg); }

.gift-game-art { background: radial-gradient(circle at 85% 8%,rgba(255,204,85,.16),transparent 12rem),#f0f4f7; }
.gift-game-screen { color: #fff; background: linear-gradient(180deg,#75d4f7 0%,#9de4fa 43%,#38bee3 44%,#0e9fd1 64%,#e5c084 65%,#d19a54 100%); }
.gift-game-screen::before { content:""; position: absolute; z-index: 0; right: -40px; bottom: 86px; left: -40px; height: 55px; border-radius: 50%; background: repeating-radial-gradient(ellipse at 50% 0,#fff 0 3px,#66d0eb 5px 10px,#16a9d6 12px 19px); }
.game-cloud { position: absolute; top: 61px; width: 42px; height: 14px; border-radius: 999px; background: rgba(255,255,255,.7); box-shadow: 13px -6px 0 1px rgba(255,255,255,.6),-12px -3px 0 rgba(255,255,255,.62); }.cloud-one { left: 12px; }.cloud-two { right: 5px; top: 91px; transform: scale(.7); }
.gift-game-title { position: relative; z-index: 2; display: block; color: #f4a628; font-size: 22px; line-height: .95; -webkit-text-stroke: 1px #8e5721; text-shadow: 0 3px 0 #fff; }
.gift-game-title small { color: #fff; font-size: 6px; -webkit-text-stroke: 0; text-shadow: none; letter-spacing: .05em; }
.gift-box-grid { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3,1fr); gap: 11px 12px; margin: 28px 4px 18px; }
.gift-box-grid span { position: relative; height: 47px; display: grid; place-items: center; font-size: 27px; filter: drop-shadow(0 6px 3px rgba(52,79,78,.18)); transition: transform .15s ease; }
.gift-box-grid span:nth-child(2),.gift-box-grid span:nth-child(5) { transform: translateY(4px); }
.gift-game-shore { position: relative; z-index: 3; margin: 13px 0 9px; color: #6e4e2c; font-size: 6px; }.gift-game-shore b { color: #fff; font-size: 10px; }
.gift-game-screen > button { background: linear-gradient(#d18440,#9a4f22); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35),0 5px 12px rgba(77,41,15,.22); }

.mini-game-card-copy { min-height: 120px; display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 11px; align-items: start; padding: 15px; }
.mini-game-card-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: #fff; font-size: 19px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.mini-game-card-icon.wheel { background: linear-gradient(145deg,#240b16,#ef3e75); }.mini-game-card-icon.scratch { background: linear-gradient(145deg,#20b9ed,#087cc8); }.mini-game-card-icon.gift { background: linear-gradient(145deg,#66d0f2,#d29b52); }
.mini-game-card-copy > div { min-width: 0; }
.mini-game-card-copy small { display: block; color: #2d8bd0; font-size: 8px; font-weight: 800; letter-spacing: .07em; }
.mini-game-card-copy h3 { margin: 4px 0 5px; color: #24364a; font-size: 13px; }
.mini-game-card-copy p { margin: 0; color: #768699; font-size: 10px; line-height: 1.45; }
@media (max-width: 1120px) {
  .mini-game-showcase { grid-template-columns: minmax(290px,.85fr) minmax(360px,1.15fr); }
  .mini-game-showcase-copy { padding-left: 30px; }
  .mini-game-showcase-visual img { width: 108%; }
  .mini-game-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .mini-game-showcase { grid-template-columns: 1fr; }
  .mini-game-showcase-copy { padding: 30px 24px 8px; }
  .mini-game-showcase-visual { min-height: 390px; padding: 4px 4px 0; }
  .mini-game-showcase-visual img { width: min(560px,105%); max-height: 410px; }
  .mini-game-showcase-badge { top: 18px; right: 18px; }
  .mini-game-development-note { grid-template-columns: 40px minmax(0,1fr); }.mini-game-development-note > em { grid-column: 2; justify-self: start; }
  .mini-game-gallery { grid-template-columns: 1fr; }
  .mini-game-art { min-height: 390px; }
}

#miniAppFormsArea.dynamic-pages-section { margin-top: 0; }
.dynamic-pages-toolbar { padding: 4px 0 2px; }
.dynamic-page-workspace { display: grid; grid-template-columns: 1fr; gap: 14px; }
.dynamic-page-workspace.is-building { display: block; }
.dynamic-page-sidebar { position: static; padding: 16px; }
.dynamic-page-sidebar-head { padding: 1px 2px 13px; }
.dynamic-page-sidebar-head strong { font-size: 14px; }
.dynamic-page-sidebar-head small { font-size: 10.5px; }
.dynamic-page-list { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; margin-top: 13px; }
.dynamic-page-list .dynamic-form-card {
  min-height: 205px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 13px;
  padding: 15px;
  border: 1px solid #dfe9f2;
  border-radius: 14px;
  color: #24384c;
  background: #fff;
  box-shadow: 0 5px 18px rgba(43,87,123,.045);
  cursor: default;
}
.dynamic-page-list .dynamic-form-card:hover { border-color: #9bc9ea; background: #fbfdff; box-shadow: 0 10px 24px rgba(43,102,151,.09); transform: translateY(-1px); }
.dynamic-page-list .dynamic-form-card.active { border-color: #5ca7dd; background: #f7fbff; box-shadow: inset 0 0 0 1px rgba(40,137,204,.12); }
.dynamic-page-list .dynamic-form-card > span { min-width: 0; width: 100%; display: flex; }
.dynamic-page-list .dynamic-form-card-body {
  width: 100%;
  min-height: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  gap: 13px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.dynamic-page-list .dynamic-form-card-body:hover { background: transparent; }
.dynamic-page-list .dynamic-form-card-body > span { min-width: 0; width: 100%; display: flex; }
.dynamic-form-card-top { align-items: center; justify-content: space-between; gap: 10px; }
.dynamic-form-card-top > b { width: 38px; height: 38px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 11px; color: #1975b8; background: #e6f3fd; font-size: 13px; }
.dynamic-form-card-top em { padding: 4px 8px; border-radius: 999px; color: #748295; background: #f0f3f6; font-size: 8.5px; font-style: normal; font-weight: 760; }
.dynamic-form-card-top em.live { color: #177653; background: #e6f7ef; }
.dynamic-form-card-copy { flex-direction: column; gap: 3px; }
.dynamic-form-card-copy strong { overflow: hidden; color: #203348; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.dynamic-form-card-copy small { overflow: hidden; color: #75879a; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.dynamic-form-card-copy i { margin-top: 3px; overflow: hidden; color: #3880b5; font-size: 9px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.dynamic-form-card-stats { display: grid!important; grid-template-columns: repeat(3,1fr); margin-top: auto; padding: 10px 0; border-top: 1px solid #edf2f6; border-bottom: 1px solid #edf2f6; }
.dynamic-form-card-stats > span { min-width: 0; display: grid; gap: 2px; text-align: center; }
.dynamic-form-card-stats > span + span { border-left: 1px solid #edf2f6; }
.dynamic-form-card-stats b { color: #283e53; font-size: 12px; }
.dynamic-form-card-stats small { color: #8a98a8; font-size: 8px; }
.dynamic-form-card-actions { gap: 7px; margin-top: -2px; }
.dynamic-page-list .dynamic-form-card-actions > button { width: auto; min-height: 32px; display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 7px; padding: 5px 9px; border: 1px solid #d6e4ef; border-radius: 9px; color: #42627d; background: #f8fbfd; font-size: 9.5px; font-weight: 750; cursor: pointer; }
.dynamic-page-list .dynamic-form-card-actions > button:hover { border-color: #76b1dc; color: #176da9; background: #eff8ff; }
.dynamic-page-list .dynamic-form-card-actions .dynamic-form-card-open { color: #1f75b6; background: #f0f8fe; }
.dynamic-form-card-open { align-items: center; justify-content: space-between; color: #1f75b6; font-size: 10px; font-weight: 750; }
.dynamic-form-card-open i { font-size: 16px; font-style: normal; }
.dynamic-qr-mini-icon { width: 14px; height: 14px; display: inline-block; border: 2px solid currentColor; border-radius: 2px; background: conic-gradient(from 90deg at 35% 35%,currentColor 0 25%,transparent 0 50%,currentColor 0 75%,transparent 0); box-shadow: inset 0 0 0 2px #f8fbfd; }

/* QR riêng cho từng Dynamic Form */
.dynamic-qr-modal { width: min(720px,96vw); }
.dynamic-qr-body { display: grid; grid-template-columns: 270px minmax(0,1fr); gap: 24px; align-items: center; padding: 24px; }
.dynamic-qr-visual { display: grid; place-items: center; gap: 10px; }
.dynamic-qr-frame { width: 250px; aspect-ratio: 1; display: grid; place-items: center; padding: 13px; border: 1px solid #dce7ef; border-radius: 18px; background: #fff; box-shadow: 0 12px 32px rgba(36,77,110,.1); }
.dynamic-qr-frame img { width: 100%; height: 100%; display: block; object-fit: contain; }
.dynamic-qr-status { padding: 6px 10px; border-radius: 999px; color: #60758a; background: #edf3f7; font-size: 9.5px; font-weight: 760; }
.dynamic-qr-status.live { color: #16724f; background: #e3f7ed; }.dynamic-qr-status.draft { color: #95611c; background: #ffedce; }.dynamic-qr-status.error { color: #a33f4e; background: #fde8eb; }
.dynamic-qr-info { min-width: 0; display: grid; gap: 15px; }
.dynamic-qr-form-summary { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 11px; align-items: center; }
.dynamic-qr-form-summary > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; color: #1975b8; background: #e6f3fd; font-size: 15px; font-weight: 800; }
.dynamic-qr-form-summary > div { min-width: 0; display: grid; gap: 3px; }.dynamic-qr-form-summary strong { overflow: hidden; color: #23384c; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }.dynamic-qr-form-summary small { overflow: hidden; color: #718399; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.dynamic-qr-warning { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 8px; align-items: start; padding: 11px 12px; border: 1px solid #efd5ae; border-radius: 10px; color: #83551b; background: #fff9ee; font-size: 10px; line-height: 1.45; }.dynamic-qr-warning .app-icon,.dynamic-qr-warning .glass-icon { width: 18px; height: 18px; }
.dynamic-qr-link-field { display: grid; gap: 6px; }.dynamic-qr-link-field > span { color: #43596e; font-size: 10px; font-weight: 720; }.dynamic-qr-link-field textarea { width: 100%; resize: none; padding: 10px 11px; border: 1px solid #d8e3ec; border-radius: 9px; color: #35516a; background: #f8fbfd; font: 10px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace; outline: none; }
.dynamic-qr-help { margin: 0; color: #78899a; font-size: 9.5px; line-height: 1.5; }
.dynamic-qr-actions > div { display: flex; gap: 8px; }.dynamic-qr-actions a.primary-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }.dynamic-qr-actions a[aria-disabled="true"] { opacity: .5; pointer-events: none; }
@media (max-width: 640px) { .dynamic-qr-body { grid-template-columns: 1fr; padding: 18px; }.dynamic-qr-frame { width: min(250px,80vw); }.dynamic-qr-actions { align-items: stretch; flex-direction: column-reverse; }.dynamic-qr-actions > div { display: grid; grid-template-columns: 1fr 1fr; }.dynamic-qr-actions > .secondary-button { width: 100%; } }

.dynamic-page-builder { width: 100%; }
.dynamic-builder-layout-v2 {
  min-height: 680px;
  display: grid;
  grid-template-columns: 260px minmax(320px,1fr) 360px;
  align-items: start;
  background: #f7fafc;
}
.dynamic-component-palette {
  min-height: 680px;
  padding: 16px 12px;
  border-right: 1px solid #e3ebf2;
  background: #fff;
}
.dynamic-component-palette > header { display: grid; gap: 3px; padding: 0 4px 13px; border-bottom: 1px solid #edf2f6; }
.dynamic-component-palette > header strong { color: #26394d; font-size: 12px; }
.dynamic-component-palette > header small { color: #76879a; font-size: 10.5px; }
.dynamic-palette-group { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding-top: 18px; }
.dynamic-palette-group > span { grid-column: 1/-1; color: #6e8195; font-size: 9.5px; font-weight: 800; letter-spacing: .075em; }
.dynamic-palette-group button {
  min-width: 0;
  min-height: 86px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 11px 8px;
  border: 1px solid #e0e9f1;
  border-radius: 11px;
  color: #41566a;
  background: #fbfdff;
  cursor: pointer;
}
.dynamic-palette-group button:hover { border-color: #7db8e4; color: #176eaf; background: #eff8ff; transform: translateY(-1px); }
.dynamic-palette-group button b { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #176fab; background: #e5f3fe; font-size: 12px; }
.dynamic-palette-group button i { overflow: hidden; color: #344b61; font-size: 10.5px; font-style: normal; font-weight: 720; line-height: 1.3; text-align: center; text-overflow: ellipsis; }
.dynamic-builder-layout-v2 .dynamic-phone-preview {
  position: sticky;
  top: 68px;
  min-height: 680px;
  display: block;
  align-self: start;
  padding: 32px 18px;
  border-right: 1px solid #e3ebf2;
  background: radial-gradient(circle at 85% 4%,rgba(68,164,248,.13),transparent 16rem),#f4f8fb;
}
.dynamic-builder-layout-v2 .dynamic-phone-frame { width: 270px; min-height: 540px; }
.dynamic-builder-layout-v2 .dynamic-phone-content { min-height: 510px; }
.dynamic-builder-inspector {
  max-height: calc(100vh - 150px);
  overflow: auto;
  padding: 14px;
  background: #f9fbfd;
  scrollbar-width: thin;
}
.dynamic-builder-inspector .dynamic-control-section { margin-bottom: 10px; padding: 13px; border-radius: 12px; }
.dynamic-builder-inspector .dynamic-page-settings .dynamic-control-grid { grid-template-columns: 1fr; }
.dynamic-builder-inspector .dynamic-page-settings .dynamic-control-grid label.full { grid-column: auto; }
.dynamic-builder-inspector .dynamic-permission-grid { grid-template-columns: 1fr; }
.dynamic-builder-inspector .dynamic-permission-grid label { min-height: auto; align-items: center; }
.dynamic-builder-inspector .dynamic-permission-grid input { margin-top: 0; }
.dynamic-layer-section .dynamic-control-heading { align-items: flex-start; }
.dynamic-component-list { gap: 6px; }
.dynamic-layer-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px; align-items: center; overflow: hidden; border: 1px solid #e2eaf1; border-radius: 10px; background: #fff; }
.dynamic-layer-item.active { border-color: #75b3df; background: #f2f9ff; box-shadow: inset 3px 0 #2d8bce; }
.dynamic-layer-select { min-width: 0; display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 8px; align-items: center; padding: 8px; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.dynamic-layer-select > b { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; color: #237ab7; background: #e7f3fc; font-size: 9px; }
.dynamic-layer-select > span { min-width: 0; display: grid; gap: 2px; }
.dynamic-layer-select strong,.dynamic-layer-select small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dynamic-layer-select strong { color: #33475a; font-size: 9.5px; }
.dynamic-layer-select small { color: #8896a5; font-size: 7.5px; }
.dynamic-layer-move { display: grid; grid-template-columns: 24px 24px; gap: 2px; padding-right: 6px; }
.dynamic-layer-move button { width: 24px; height: 24px; border: 0; border-radius: 7px; color: #5f7890; background: #edf3f7; font-size: 10px; cursor: pointer; }
.dynamic-layer-move button:hover:not(:disabled) { color: #176ead; background: #dceefb; }
.dynamic-layer-move button:disabled { opacity: .35; cursor: default; }
.dynamic-component-inspector { min-height: 112px; }
.dynamic-component-inspector .dynamic-component-fields { grid-template-columns: 1fr; }
.dynamic-component-inspector .dynamic-component-fields .wide,.dynamic-component-inspector .dynamic-component-required { grid-column: auto; }
.dynamic-inspector-empty { min-height: 78px; display: grid; place-items: center; align-content: center; gap: 4px; color: #8492a2; text-align: center; }
.dynamic-inspector-empty b { color: #52667a; font-size: 10px; }
.dynamic-inspector-empty span { max-width: 230px; font-size: 8.5px; line-height: 1.45; }
.dynamic-inspector-delete { padding: 5px 8px; border: 0; border-radius: 7px; color: #b64050; background: #fff0f2; font-size: 8.5px; font-weight: 700; cursor: pointer; }
.dynamic-preview-field,.dynamic-preview-heading,.dynamic-preview-paragraph { position: relative; border-radius: 9px; cursor: pointer; transition: box-shadow .15s ease,background .15s ease; }
.dynamic-preview-field.is-selected { padding: 5px; margin: -5px -5px 4px; background: rgba(27,134,210,.07); box-shadow: 0 0 0 2px #49a3df; }
.dynamic-preview-heading.is-selected,.dynamic-preview-paragraph.is-selected { padding: 5px; margin-right: -5px!important; margin-left: -5px!important; background: rgba(27,134,210,.07); box-shadow: 0 0 0 2px #49a3df; }

@media (max-width: 1240px) {
  .dynamic-page-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dynamic-builder-layout-v2 { grid-template-columns: 230px minmax(320px,1fr); }
  .dynamic-builder-layout-v2 .dynamic-phone-preview { border-right: 0; }
  .dynamic-builder-inspector { grid-column: 1/-1; max-height: none; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; border-top: 1px solid #e3ebf2; }
  .dynamic-builder-inspector .dynamic-control-section { margin-bottom: 0; }
}
@media (max-width: 820px) {
  .dynamic-page-list { grid-template-columns: 1fr; }
  .dynamic-builder-layout-v2 { grid-template-columns: 1fr; }
  .dynamic-component-palette { min-height: auto; border-right: 0; border-bottom: 1px solid #e3ebf2; }
  .dynamic-palette-group { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .dynamic-palette-group > span { grid-column: 1/-1; }
  .dynamic-builder-layout-v2 .dynamic-phone-preview { position: static; min-height: auto; border-bottom: 1px solid #e3ebf2; }
  .dynamic-builder-inspector { grid-column: auto; grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .nav-submenu { margin-left: 40px; }
  .dynamic-page-kpis { grid-template-columns: 1fr 1fr; }
  .dynamic-page-kpis > div { min-height: 68px; padding: 12px; }
  .dynamic-page-kpis strong { font-size: 19px; }
  .dynamic-palette-group { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dynamic-builder-layout-v2 .dynamic-phone-frame { width: min(270px,100%); }
  .mini-game-coming { grid-template-columns: 48px minmax(0,1fr); padding: 20px; }
  .mini-game-coming > span { width: 48px; height: 48px; }
  .mini-game-coming > em { grid-column: 2; justify-self: start; }
}

/* Dynamic Form publication gate and inline Data Hub setup */
.dynamic-data-panel { display: grid; gap: 14px; }
.dynamic-data-readiness {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid #dce8f1;
  border-radius: 13px;
  background: #f8fbfd;
}
.dynamic-data-readiness > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; }
.dynamic-data-readiness > span .app-icon,.dynamic-data-readiness > span .glass-icon { width: 20px; height: 20px; }
.dynamic-data-readiness > div { min-width: 0; display: grid; gap: 3px; }
.dynamic-data-readiness strong { color: #293e53; font-size: 12px; }
.dynamic-data-readiness small { overflow: hidden; color: #738498; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.dynamic-data-readiness em { padding: 5px 9px; border-radius: 999px; font-size: 9px; font-style: normal; font-weight: 760; }
.dynamic-data-readiness.needs-connection { border-color: #f0d8b6; background: #fffaf1; }
.dynamic-data-readiness.needs-connection > span { color: #aa6b1f; background: #ffedcf; }
.dynamic-data-readiness.needs-connection em { color: #966019; background: #ffebc7; }
.dynamic-data-readiness.ready { border-color: #cce9dd; background: #f3fbf7; }
.dynamic-data-readiness.ready > span { color: #23805c; background: #dff5e9; }
.dynamic-data-readiness.ready em { color: #1d7654; background: #dff5e9; }
.dynamic-data-chooser { display: grid; grid-template-columns: minmax(210px,.8fr) minmax(240px,1fr) auto; gap: 10px; align-items: end; }
.dynamic-data-chooser > label { display: grid; gap: 6px; }
.dynamic-data-chooser > label > span,.dynamic-table-creator-grid label > span { color: #40556a; font-size: 10.5px; font-weight: 720; }
.dynamic-data-chooser > label > span b,.dynamic-map-heading > span > b { width: 21px; height: 21px; display: inline-grid; place-items: center; margin-right: 6px; border-radius: 7px; color: #0875c9; background: #e8f4ff; font-size: 9px; }
.dynamic-data-chooser select,.dynamic-table-creator :is(select,input) { width: 100%; min-height: 40px; padding: 0 11px; border: 1px solid #d5e2ec; border-radius: 9px; color: #2f4357; background: #fff; font-size: 11px; outline: none; }
.dynamic-data-chooser select:disabled { color: #8a97a6; background: #f4f7fa; cursor: not-allowed; }
.dynamic-data-chooser small { color: #8391a2; font-size: 9px; }
.dynamic-data-chooser > button { min-height: 40px; white-space: nowrap; }
.dynamic-table-creator { display: grid; gap: 14px; padding: 17px; border: 1px solid #bcdcf3; border-radius: 14px; background: linear-gradient(145deg,#fff,#f4faff); box-shadow: 0 10px 26px rgba(43,112,164,.08); }
.dynamic-table-creator-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.dynamic-table-creator-head > div { display: grid; gap: 3px; }
.dynamic-table-creator-head strong { color: #20384d; font-size: 13px; }
.dynamic-table-creator-head small { color: #718599; font-size: 10px; }
.dynamic-table-creator-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.dynamic-table-creator-grid label { display: grid; gap: 6px; }
.dynamic-table-creator-actions { display: flex; justify-content: flex-end; gap: 8px; }
.dynamic-data-panel #dynamicColumnMapSummary { max-width: none; margin-top: 0; }
.dynamic-map-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 3px; padding-top: 14px; border-top: 1px solid #e5edf4; }
.dynamic-map-heading > span { display: flex; align-items: center; color: #30475d; }
.dynamic-map-heading > span strong { font-size: 11px; }
.dynamic-map-heading > small { color: #74879a; font-size: 9px; text-align: right; }
.dynamic-data-panel #dynamicColumnMapSummary .dynamic-map-row { display: grid; grid-template-columns: minmax(160px,.8fr) 28px minmax(220px,1fr); gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid #e1eaf2; border-radius: 11px; background: #fbfdff; }
.dynamic-map-row > span { display: grid; gap: 2px; }
.dynamic-map-row > span strong { color: #32485d; font-size: 10.5px; }
.dynamic-map-row > span small { color: #8493a3; font-size: 8.5px; }
.dynamic-map-row > i { color: #0b7ecf; font-style: normal; text-align: center; }
.dynamic-map-row > select { min-width: 0; height: 36px; padding: 0 9px; border: 1px solid #d7e3ed; border-radius: 8px; color: #30465a; background: #fff; font-size: 10px; }
.dynamic-map-empty { grid-template-columns: 1fr!important; color: #75889a; background: #f8fafc!important; }
@media (max-width: 700px) {
  .dynamic-data-readiness { grid-template-columns: 38px minmax(0,1fr); }
  .dynamic-data-readiness > em { grid-column: 2; justify-self: start; }
  .dynamic-data-readiness small { white-space: normal; }
  .dynamic-data-chooser,.dynamic-table-creator-grid,.dynamic-data-panel #dynamicColumnMapSummary .dynamic-map-row { grid-template-columns: 1fr; }
  .dynamic-data-chooser > button { width: 100%; justify-content: center; }
  .dynamic-map-heading { align-items: flex-start; flex-direction: column; }
  .dynamic-map-heading > small { text-align: left; }
  .dynamic-map-row > i { display: none; }
}

/* Final product-shell overrides */
.sidebar { width: 240px; padding: 14px 12px; border-right: 1px solid #376b92; color: #f2f8fc; background: radial-gradient(circle at 18% 4%,rgba(123,201,255,.26),transparent 210px),linear-gradient(180deg,#2b638e 0%,#235579 58%,#1b4567 100%); box-shadow: 8px 0 30px rgba(23,68,101,.13); transition: width .2s ease,padding .2s ease,transform .2s ease; }
.sidebar-brand-row { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sidebar .brand { min-width: 0; margin: 0; color: #fff; }.sidebar .brand-mark,.auth-brand-logo { overflow: hidden; padding: 0; border: 1px solid rgba(255,255,255,.5); color: #fff; background: #fff; box-shadow: 0 8px 20px rgba(12,78,132,.2); }
.sidebar .brand-mark img,.auth-brand-logo img { width: 100%; height: 100%; display: block; box-sizing: border-box; padding: 4px; object-fit: contain; }
.sidebar .brand strong { color: #fff; }.sidebar .brand span { color: #c5dbea; }.sidebar .nav-section-label { color: #b1ccde; }.sidebar .nav-item { color: #e1edf5; }.sidebar .nav-icon { color: #d7edfb; }
.sidebar .nav-item:hover { color: #fff; background: rgba(255,255,255,.11); }.sidebar .nav-item.active,.sidebar .nav-item.group-active { color: #fff; background: linear-gradient(90deg,rgba(76,183,247,.46),rgba(35,132,201,.27)); box-shadow: inset 3px 0 #70ccff; }
.sidebar .nav-submenu button { color: #d2e4ef; }.sidebar .nav-submenu button:hover,.sidebar .nav-submenu button.active { color: #fff; background: rgba(105,194,248,.2); }.sidebar .sidebar-foot { border-color: rgba(205,230,246,.24); background: rgba(255,255,255,.09); }.sidebar .sidebar-foot strong { color: #fff; }.sidebar .sidebar-foot span { color: #bad2e2; }
.sidebar-collapse-button { width: 30px; height: 30px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid rgba(206,230,247,.3); border-radius: 9px; color: #e2f2fc; background: rgba(255,255,255,.1); cursor: pointer; }.sidebar-collapse-button:hover { color: #fff; background: rgba(255,255,255,.18); }.sidebar-collapse-button :is(.app-icon,.glass-icon) { width: 15px; height: 15px; transition: transform .2s ease; }
.main-content { margin-left: 240px; width: calc(100% - 240px); transition: margin-left .2s ease,width .2s ease; }
body.sidebar-collapsed .sidebar { width: 76px; padding-inline: 10px; }body.sidebar-collapsed .main-content { margin-left: 76px; width: calc(100% - 76px); }body.sidebar-collapsed .sidebar-brand-row { justify-content: center; flex-wrap: wrap; }
body.sidebar-collapsed .sidebar .brand > div:last-child,body.sidebar-collapsed .sidebar .nav-section-label,body.sidebar-collapsed .sidebar .nav-item > span:not(.nav-icon),body.sidebar-collapsed .sidebar .nav-parent-caret,body.sidebar-collapsed .sidebar .sidebar-foot > div:last-child { display: none; }
body.sidebar-collapsed .sidebar .brand { justify-content: center; }body.sidebar-collapsed .sidebar-collapse-button :is(.app-icon,.glass-icon) { transform: rotate(180deg); }body.sidebar-collapsed .sidebar .main-nav { align-items: center; }body.sidebar-collapsed .sidebar .nav-item { width: 48px; justify-content: center; padding-inline: 0; }body.sidebar-collapsed .sidebar .nav-icon { margin: 0; }body.sidebar-collapsed .sidebar .nav-submenu { display: none; }body.sidebar-collapsed .sidebar .sidebar-foot { min-height: 44px; display: grid; grid-template-columns: 1fr; place-items: center; padding: 8px; }
.datahub-export-wrap { position: relative; }.datahub-export-menu { position: absolute; top: calc(100% + 7px); right: 0; z-index: 28; width: 238px; padding: 6px; border: 1px solid #d9e5ee; border-radius: 11px; background: #fff; box-shadow: 0 16px 38px rgba(31,57,78,.16); }.datahub-export-menu button { width: 100%; display: grid; gap: 2px; padding: 9px 10px; border: 0; border-radius: 8px; color: #2b4054; background: transparent; text-align: left; cursor: pointer; }.datahub-export-menu button:hover { background: #eef7ff; }.datahub-export-menu strong { font-size: 12px; }.datahub-export-menu span { color: #7b8b9b; font-size: 10px; }
#dataHubRecordsTable { --datahub-sticky-first-width: 150px; }#dataHubRecordsTable :is(th,td).datahub-sticky-col-1,#dataHubRecordsTable :is(th,td).datahub-sticky-col-2 { position: sticky; z-index: 2; min-width: 150px; background: #fff; background-clip: padding-box; }#dataHubRecordsTable :is(th,td).datahub-sticky-col-1 { left: 0; }#dataHubRecordsTable :is(th,td).datahub-sticky-col-2 { left: var(--datahub-sticky-first-width); box-shadow: 10px 0 15px -16px rgba(15,44,67,.72); }#dataHubRecordsTable thead :is(th).datahub-sticky-col-1,#dataHubRecordsTable thead :is(th).datahub-sticky-col-2 { z-index: 6; background: #f3f8fd; }#dataHubRecordsTable tbody tr:nth-child(even) :is(td).datahub-sticky-col-1,#dataHubRecordsTable tbody tr:nth-child(even) :is(td).datahub-sticky-col-2 { background: #f9fcff; }#dataHubRecordsTable tbody tr:hover :is(td).datahub-sticky-col-1,#dataHubRecordsTable tbody tr:hover :is(td).datahub-sticky-col-2 { background: #eef7ff; }#dataHubRecordsTable .datahub-actions-column { min-width: 132px; text-align: center; }
#dataHubRecordsTable { table-layout: fixed; }
#dataHubRecordsTable th { position: relative; }

/* Zalo Mini App · Offers */
.miniapp-offers-section { display: grid; gap: 16px; }
.miniapp-offers-toolbar { margin-bottom: 0; }
.miniapp-offer-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.miniapp-offer-kpis article { min-width: 0; display: flex; align-items: center; gap: 11px; padding: 15px 16px; border: 1px solid #dfe9f1; border-radius: 14px; background: #fff; box-shadow: 0 7px 22px rgba(36,75,105,.045); }
.miniapp-offer-kpis article > div { min-width: 0; display: grid; gap: 2px; }
.miniapp-offer-kpis small { color: #708294; font-size: 11px; }
.miniapp-offer-kpis strong { color: #1d3549; font-size: 21px; line-height: 1; }
.offer-kpi-icon { width: 38px; height: 38px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 11px; }
.offer-kpi-icon .app-icon { width: 18px; height: 18px; }
.offer-kpi-icon.blue { color: #0876d9; background: #e5f3ff; }.offer-kpi-icon.green { color: #078468; background: #ddf8ef; }.offer-kpi-icon.violet { color: #7250bc; background: #efe9ff; }.offer-kpi-icon.orange { color: #b56818; background: #fff0dc; }
.miniapp-offer-list-panel { overflow: hidden; padding: 0; }
.miniapp-offer-list-tabs { display: flex; gap: 26px; padding: 0 18px; border-bottom: 1px solid #e2eaf1; background: #fbfdff; }
.miniapp-offer-list-tabs button { position: relative; min-height: 50px; padding: 0 4px; border: 0; color: #5e7080; background: transparent; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.miniapp-offer-list-tabs button::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 999px; background: transparent; }
.miniapp-offer-list-tabs button.active { color: #0878d5; }.miniapp-offer-list-tabs button.active::after { background: #168fea; }
.miniapp-offer-list-tabs button span { min-width: 20px; display: inline-grid; place-items: center; margin-left: 5px; padding: 2px 5px; border-radius: 999px; color: #527087; background: #edf4f9; font-size: 9px; }
.miniapp-offer-tools { display: grid; grid-template-columns: minmax(260px,1fr) 210px; gap: 10px; padding: 16px; border-bottom: 1px solid #edf2f6; }
.miniapp-offer-table-wrap { min-height: 220px; border: 0; border-radius: 0; box-shadow: none; }
.miniapp-offer-table { min-width: 980px; }
.miniapp-offer-table th { color: #586d7f; background: #f7fafc; font-size: 10px; letter-spacing: .03em; }
.miniapp-offer-table td { height: 70px; color: #526779; font-size: 11px; vertical-align: middle; }
.miniapp-offer-name { min-width: 260px; display: flex; align-items: center; gap: 10px; }
.miniapp-offer-name > span { width: 38px; height: 38px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 11px; color: #fff; }
.miniapp-offer-name > span .app-icon { width: 18px; height: 18px; }.miniapp-offer-name > span.blue { background: linear-gradient(145deg,#1489ed,#58c9ff); }.miniapp-offer-name > span.violet { background: linear-gradient(145deg,#7651ce,#bd9cff); }.miniapp-offer-name > span.orange { background: linear-gradient(145deg,#df751c,#ffbd69); }.miniapp-offer-name > span.green { background: linear-gradient(145deg,#0d8a68,#58cfa5); }
.miniapp-offer-name div { min-width: 0; display: grid; gap: 3px; }.miniapp-offer-name strong { overflow: hidden; color: #152d41; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.miniapp-offer-name small { color: #82919e; font-size: 9.5px; }
.offer-code-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px dashed #a9c9df; border-radius: 8px; color: #126ea9; background: #f0f9ff; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: 10px; font-weight: 750; letter-spacing: .02em; }
.offer-tier-tags { display: flex; flex-wrap: wrap; gap: 4px; }.offer-tier-tags span { padding: 3px 6px; border-radius: 999px; color: #5a6370; background: #eff3f6; font-size: 8.5px; font-weight: 700; }.offer-tier-tags span.more { color: #2176ad; background: #e8f5ff; }
.offer-status-button { min-width: 72px; padding: 6px 9px; border: 0; border-radius: 999px; color: #fff; background: #08a681; font-size: 9.5px; font-weight: 750; cursor: pointer; }.offer-status-button.hidden { color: #697986; background: #e9eef2; }
.miniapp-offer-actions { display: flex; justify-content: flex-end; gap: 5px; }.miniapp-offer-actions button { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #dae5ed; border-radius: 8px; color: #4e6a80; background: #fff; cursor: pointer; }.miniapp-offer-actions button:hover { color: #0878d5; background: #eef8ff; }.miniapp-offer-actions .app-icon { width: 14px; height: 14px; }
.miniapp-offer-editor { overflow: hidden; padding: 0; }
.miniapp-offer-editor-head { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid #e1eaf1; background: #fbfdff; }
.miniapp-offer-editor-head > div { display: flex; align-items: center; gap: 10px; }.miniapp-offer-editor-head span { display: grid; gap: 2px; }.miniapp-offer-editor-head small { color: #6d8293; font-size: 8.5px; font-weight: 800; letter-spacing: .1em; }.miniapp-offer-editor-head strong { color: #183247; font-size: 14px; }
.offer-live-preview-badge { padding: 6px 9px; border-radius: 999px; color: #2875aa; background: #e8f5ff; font-size: 9px; font-weight: 800; }
.miniapp-offer-editor-grid { display: grid; grid-template-columns: minmax(0,1fr) 320px; align-items: start; }
.miniapp-offer-form-main { display: grid; gap: 0; border-right: 1px solid #e5edf3; }
.miniapp-offer-form-main > section { display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 24px; padding: 25px; border-bottom: 1px solid #edf2f6; }
.offer-form-section-title { display: flex; align-items: flex-start; gap: 10px; }.offer-form-section-title > span { width: 28px; height: 28px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 9px; color: #147ec6; background: #e6f5ff; font-size: 9px; font-weight: 850; }.offer-form-section-title > div { display: grid; gap: 4px; }.offer-form-section-title strong { color: #1b3549; font-size: 12px; }.offer-form-section-title small { color: #81909c; font-size: 9.5px; line-height: 1.45; }
.offer-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }.offer-form-grid label,.offer-code-field label { display: grid; gap: 6px; }.offer-form-grid label > span,.offer-code-field label > span,.offer-tier-fieldset legend { color: #40576a; font-size: 10px; font-weight: 750; }.offer-form-grid .wide { grid-column: 1/-1; }.offer-form-grid input,.offer-form-grid select,.offer-form-grid textarea,.offer-code-field input,.offer-code-field select { width: 100%; min-height: 39px; padding: 9px 10px; border: 1px solid #cfdde7; border-radius: 9px; color: #1d3447; background: #fff; font: inherit; font-size: 11px; outline: none; }.offer-form-grid textarea { resize: vertical; }.offer-form-grid :is(input,select,textarea):focus,.offer-code-field :is(input,select):focus { border-color: #3399dd; box-shadow: 0 0 0 3px rgba(51,153,221,.1); }
.offer-code-field { display: grid; grid-template-columns: minmax(0,1fr) minmax(240px,.8fr); gap: 14px; }.offer-code-field > div { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid #d7e8f3; border-radius: 10px; color: #2b6f9e; background: #f2faff; }.offer-code-field .app-icon { width: 18px; height: 18px; flex: 0 0 auto; }.offer-code-field > div span { display: grid; gap: 2px; }.offer-code-field > div strong { font-size: 10px; }.offer-code-field > div small { color: #6f8798; font-size: 8.5px; }
.offer-code-field > .offer-code-link-note { display: grid; grid-template-columns: auto minmax(0,1fr) auto; }.offer-code-link-note .secondary-button { min-height: 30px; white-space: nowrap; }
.offer-tier-fieldset { margin: 0; padding: 0; border: 0; }.offer-tier-fieldset legend { margin-bottom: 8px; }.offer-tier-fieldset > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.offer-tier-fieldset label { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid #dce6ed; border-radius: 9px; background: #fff; cursor: pointer; }.offer-tier-fieldset input { width: 15px; height: 15px; min-height: 0; accent-color: #168bd7; }.offer-tier-fieldset label span { display: grid; gap: 1px; }.offer-tier-fieldset label strong { color: #2d4558; font-size: 10px; }.offer-tier-fieldset label small { color: #82919d; font-size: 8px; }
.miniapp-offer-form-side { position: sticky; top: 0; display: grid; gap: 12px; padding: 18px; background: #f8fbfd; }.miniapp-offer-form-side > section { display: grid; gap: 10px; padding: 13px; border: 1px solid #dfe9f0; border-radius: 12px; background: #fff; }.miniapp-offer-form-side > section > strong { color: #2a4255; font-size: 10.5px; }
.offer-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 9px; border-top: 1px solid #edf1f4; }.offer-switch-row > span { display: grid; gap: 2px; }.offer-switch-row b { color: #344b5d; font-size: 10px; }.offer-switch-row small { color: #82919d; font-size: 8.5px; }.offer-switch-row input { width: 32px; height: 17px; accent-color: #118dcc; }
.offer-tone-choices { display: flex; gap: 8px; }.offer-tone-choices label { cursor: pointer; }.offer-tone-choices input { position: absolute; opacity: 0; pointer-events: none; }.offer-tone-choices span { width: 32px; height: 24px; display: block; border: 2px solid transparent; border-radius: 8px; box-shadow: inset 0 0 0 2px #fff; }.offer-tone-choices input:checked + span { border-color: #1f506f; }.offer-tone-choices .blue { background: #238ee2; }.offer-tone-choices .violet { background: #7d5bd4; }.offer-tone-choices .orange { background: #ed862e; }.offer-tone-choices .green { background: #17936f; }
.miniapp-offer-preview { overflow: hidden; }.miniapp-offer-preview > small { color: #7890a2; font-size: 8px; font-weight: 800; letter-spacing: .09em; }.miniapp-offer-preview-card { min-height: 150px; display: grid; align-content: start; margin-top: 2px; padding: 16px; border-radius: 17px; color: #fff; box-shadow: 0 12px 24px rgba(30,67,94,.18); }.miniapp-offer-preview-card.blue { background: radial-gradient(circle at 100% 0,rgba(99,211,255,.7),transparent 46%),linear-gradient(135deg,#0b66ca,#159ce8); }.miniapp-offer-preview-card.violet { background: radial-gradient(circle at 100% 0,rgba(215,185,255,.65),transparent 46%),linear-gradient(135deg,#6849b8,#9a74e3); }.miniapp-offer-preview-card.orange { background: radial-gradient(circle at 100% 0,rgba(255,226,148,.6),transparent 46%),linear-gradient(135deg,#b96513,#ea9b2e); }.miniapp-offer-preview-card.green { background: radial-gradient(circle at 100% 0,rgba(141,239,204,.55),transparent 46%),linear-gradient(135deg,#087759,#22a77c); }.miniapp-offer-preview-card small { width: max-content; padding: 4px 6px; border-radius: 6px; color: #fff; background: rgba(255,255,255,.16); font-size: 7.5px; font-weight: 800; letter-spacing: .08em; }.miniapp-offer-preview-card h3 { margin: 12px 0 5px; font-size: 15px; line-height: 1.25; }.miniapp-offer-preview-card p { margin: 0; color: rgba(255,255,255,.78); font-size: 8.5px; }.miniapp-offer-preview-card footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 15px; }.miniapp-offer-preview-card footer strong { font-size: 18px; }.miniapp-offer-preview-card footer span { font-size: 8px; }
.miniapp-offer-form-actions { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; }.miniapp-offer-form-actions button { justify-content: center; }
@media (max-width: 1120px) { .miniapp-offer-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }.miniapp-offer-editor-grid { grid-template-columns: 1fr; }.miniapp-offer-form-main { border-right: 0; }.miniapp-offer-form-side { position: static; grid-template-columns: repeat(2,minmax(0,1fr)); }.miniapp-offer-form-side .miniapp-offer-form-actions { grid-column: 1/-1; } }
@media (max-width: 760px) { .miniapp-offer-kpis,.miniapp-offer-tools,.offer-form-grid,.offer-code-field,.miniapp-offer-form-side { grid-template-columns: 1fr; }.miniapp-offer-form-main > section { grid-template-columns: 1fr; padding: 18px; }.offer-tier-fieldset > div { grid-template-columns: 1fr; }.miniapp-offer-list-tabs { gap: 14px; overflow-x: auto; }.miniapp-offer-editor-head { align-items: flex-start; }.offer-live-preview-badge { display: none; } }
#dataHubRecordsTable :is(th,td) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dataHubRecordsTable :is(th,td).datahub-sticky-col-1,#dataHubRecordsTable :is(th,td).datahub-sticky-col-2 { min-width: 0; }
.datahub-column-heading { display: block; overflow: hidden; padding-right: 8px; text-overflow: ellipsis; white-space: nowrap; }
.datahub-column-resizer { position: absolute; top: 0; right: -4px; bottom: 0; z-index: 10; width: 9px; cursor: col-resize; touch-action: none; }
.datahub-column-resizer::after { content: ""; position: absolute; top: 22%; right: 4px; bottom: 22%; width: 2px; border-radius: 2px; background: transparent; transition: background .15s ease,box-shadow .15s ease; }
#dataHubRecordsTable th:hover .datahub-column-resizer::after,.datahub-column-resizer:focus-visible::after,body.datahub-column-resizing .datahub-column-resizer::after { background: #64b6ef; box-shadow: 0 0 0 2px rgba(100,182,239,.13); }
.datahub-column-resizer:focus-visible { outline: none; }
body.datahub-column-resizing,body.datahub-column-resizing * { cursor: col-resize !important; user-select: none !important; }
.row-action-group { justify-content: center; gap: 5px; }.row-icon-action { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 8px; color: #347dbb; background: transparent; cursor: pointer; }.row-icon-action:hover,.row-icon-action[aria-expanded="true"] { border-color: #cee1ef; color: #176cad; background: #eaf5fd; }.row-icon-action :is(.app-icon,.glass-icon) { width: 17px; height: 17px; object-fit: contain; }.row-icon-action > span { transform: translateY(-2px); font-size: 13px; font-weight: 800; letter-spacing: 1px; }
.datahub-row-menu { position: fixed; z-index: 130; width: 255px; padding: 6px; border: 1px solid #d6e2eb; border-radius: 12px; background: #fff; box-shadow: 0 18px 44px rgba(24,48,68,.2); }.datahub-row-menu button { width: 100%; display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 9px; align-items: center; padding: 9px 10px; border: 0; border-radius: 8px; color: #30465a; background: transparent; text-align: left; cursor: pointer; }.datahub-row-menu button:hover { background: #eff7fd; }.datahub-row-menu :is(.app-icon,.glass-icon) { width: 22px; height: 22px; object-fit: contain; }.datahub-row-menu strong,.datahub-row-menu small { display: block; }.datahub-row-menu strong { font-size: 11.5px; }.datahub-row-menu small { margin-top: 2px; color: #83919f; font-size: 9.5px; }
.datahub-custom-column { grid-template-columns: minmax(0,1fr) 105px 66px 58px 34px 34px; }.datahub-column-order { display: grid; grid-template-columns: 27px 27px; gap: 3px; justify-self: end; }.datahub-column-order button { width: 27px; height: 30px; border: 1px solid #dbe6ee; border-radius: 7px; color: #56748d; background: #f7fafc; font-size: 13px; cursor: pointer; }.datahub-column-order button:hover:not(:disabled) { color: #1768aa; background: #e8f4fd; }.datahub-column-order button:disabled { opacity: .3; cursor: default; }
@media (max-width: 780px) { body.sidebar-collapsed .sidebar { width: 240px; padding: 14px 12px; }body.sidebar-collapsed .main-content { width: 100%; margin-left: 0; }.sidebar-collapse-button { display: none; }body.sidebar-collapsed .sidebar .brand > div:last-child,body.sidebar-collapsed .sidebar .nav-section-label,body.sidebar-collapsed .sidebar .nav-item > span:not(.nav-icon),body.sidebar-collapsed .sidebar .nav-parent-caret,body.sidebar-collapsed .sidebar .sidebar-foot > div:last-child { display: initial; }body.sidebar-collapsed .sidebar .nav-item { width: 100%; justify-content: flex-start; padding-inline: 11px; }body.sidebar-collapsed .sidebar .nav-submenu { display: block; }.datahub-custom-column { grid-template-columns: minmax(0,1fr) 58px 34px 34px; }.datahub-custom-column code,.datahub-custom-column em { display: none; } }

/* Zalo Mini App · Promotion code library */
.miniapp-promotions-section { display: grid; gap: 16px; }
.promotion-code-table { min-width: 1040px; }
.promotion-code-name { min-width: 220px; display: grid; gap: 3px; }.promotion-code-name strong { color: #163147; font-size: 12px; }.promotion-code-name small { color: #8494a0; font-size: 9px; }
.promotion-code-type { display: inline-flex; padding: 5px 7px; border-radius: 7px; color: #4e6273; background: #edf3f7; font-size: 9px; font-weight: 750; }
.promotion-code-value { color: #183a52; font-size: 12px; font-weight: 800; }
.promotion-code-linked { display: inline-flex; align-items: center; gap: 5px; color: #4b6578; font-size: 10px; }.promotion-code-linked .app-icon { width: 13px; height: 13px; color: #2384c5; }
.promotion-code-editor-grid { display: grid; grid-template-columns: minmax(0,1fr) 320px; align-items: start; }
.promotion-code-preview > small { color: #7890a2; font-size: 8px; font-weight: 800; letter-spacing: .09em; }
.promotion-code-preview-card { display: grid; gap: 10px; margin-top: 4px; padding: 16px; border: 1px dashed #78b4dc; border-radius: 14px; background: linear-gradient(145deg,#eff9ff,#fff); }
.promotion-code-preview-card > span { color: #627d91; font-size: 8.5px; font-weight: 750; }.promotion-code-preview-card strong { color: #0c72b8; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: 18px; letter-spacing: .05em; }.promotion-code-preview-card p { margin: 0; color: #2e4658; font-size: 10px; line-height: 1.45; }.promotion-code-preview-card footer { display: flex; justify-content: space-between; gap: 8px; color: #7b8d9a; font-size: 8.5px; }
.promotion-choice-field { margin: 0; padding: 0; border: 0; }.promotion-choice-field > legend { margin-bottom: 7px; color: #34495e; font-size: 11px; font-weight: 750; }.promotion-choice-field > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }.promotion-choice-field label { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: start; min-height: 70px; padding: 12px; border: 1px solid #d4e2ec; border-radius: 11px; background: #fff; cursor: pointer; }.promotion-choice-field label:has(input:checked) { border-color: #4c9bd2; background: #eff8ff; box-shadow: 0 0 0 2px rgba(55,143,205,.10); }.promotion-choice-field input { width: 16px !important; height: 16px !important; margin-top: 2px; accent-color: #287fc0; }.promotion-choice-field label span { display: grid; gap: 3px; }.promotion-choice-field label strong { color: #20384b; font-size: 12px; }.promotion-choice-field label small { color: #738797; font-size: 9.5px; line-height: 1.45; }
.promotion-generator { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 13px; border: 1px solid #d9e7f1; border-radius: 12px; background: #f7fbfe; }.promotion-generator .promotion-check { min-height: 38px; display: flex; flex-direction: row; align-items: center; gap: 8px; padding-top: 17px; }.promotion-generator .promotion-check input { width: 17px !important; height: 17px !important; accent-color: #287fc0; }.promotion-generator > button { align-self: end; min-height: 42px; }
.promotion-upload { position: relative; }.promotion-upload > input { position: absolute; width: 1px !important; height: 1px !important; opacity: 0; }.promotion-upload > label { min-height: 86px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 16px; border: 1px dashed #79add2; border-radius: 12px; color: #3179ac; background: #f3faff; cursor: pointer; }.promotion-upload .app-icon { width: 25px; height: 25px; }.promotion-upload span { display: grid; gap: 3px; }.promotion-upload strong { font-size: 12px; }.promotion-upload small,#promotionCodeItemsField > small { color: #7890a2; font-size: 9.5px; font-weight: 500; }
#promotionCodeItems { min-height: 180px; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: 11px; line-height: 1.55; text-transform: uppercase; }
@media (max-width: 1120px) { .promotion-code-editor-grid { grid-template-columns: 1fr; }.promotion-code-editor-grid .miniapp-offer-form-side { grid-template-columns: repeat(2,minmax(0,1fr)); }.promotion-code-editor-grid .miniapp-offer-form-actions { grid-column: 1/-1; } }
@media (max-width: 760px) { .promotion-code-editor-grid .miniapp-offer-form-side { grid-template-columns: 1fr; }.offer-code-field > .offer-code-link-note { grid-template-columns: auto minmax(0,1fr); }.offer-code-link-note .secondary-button { grid-column: 1/-1; } }

/* Compact Mini App navigation popover */
.sidebar-collapse-button > span {
  display: block;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform .2s ease;
}
.miniapp-submenu-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sidebar .nav-submenu button {
  display: grid;
  grid-template-columns: 18px minmax(0,1fr);
  align-items: center;
  gap: 7px;
  padding-left: 8px;
}
.sidebar .nav-submenu button > span {
  position: static;
  width: auto;
  height: auto;
  min-width: 0;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  transform: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar .nav-submenu button.active > span { background: transparent; box-shadow: none; }

body.sidebar-collapsed .sidebar-brand-row {
  position: relative;
  min-height: 44px;
  justify-content: center;
  flex-wrap: nowrap;
}
body.sidebar-collapsed .sidebar-collapse-button {
  position: absolute;
  z-index: 4;
  top: 52px;
  right: -22px;
  width: 24px;
  height: 24px;
  border-color: #d6e4ee;
  border-radius: 50%;
  color: #49748f;
  background: #fff;
  box-shadow: 0 5px 15px rgba(28,70,101,.16);
}
body.sidebar-collapsed .sidebar-collapse-button:hover { color: #0878c9; background: #f4faff; }
body.sidebar-collapsed .sidebar-collapse-button > span { transform: translateY(-1px) rotate(180deg); }

body.sidebar-collapsed .sidebar .nav-submenu:not([hidden]) {
  position: fixed;
  z-index: 160;
  width: 178px;
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 6px;
  overflow: visible;
  border: 1px solid #dbe7ef;
  border-radius: 11px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 12px 30px rgba(24,56,80,.16),0 2px 8px rgba(24,56,80,.08);
  backdrop-filter: blur(14px);
}
body.sidebar-collapsed .sidebar .nav-submenu:not([hidden])::before {
  content: "Mini App";
  padding: 4px 8px 5px;
  color: #81909c;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
body.sidebar-collapsed .sidebar .nav-submenu:not([hidden])::after {
  content: "";
  position: absolute;
  top: 14px;
  left: -5px;
  width: 9px;
  height: 9px;
  border-bottom: 1px solid #dbe7ef;
  border-left: 1px solid #dbe7ef;
  background: #fff;
  transform: rotate(45deg);
}
body.sidebar-collapsed .sidebar .nav-submenu:not([hidden]) button {
  min-height: 32px;
  grid-template-columns: 18px minmax(0,1fr);
  gap: 7px;
  padding: 6px 8px;
  color: #526b7d;
  border-radius: 7px;
  font-size: 10.5px;
  font-weight: 680;
}
body.sidebar-collapsed .sidebar .nav-submenu:not([hidden]) button:hover {
  color: #116eae;
  background: #f0f8fe;
}
body.sidebar-collapsed .sidebar .nav-submenu:not([hidden]) button.active {
  color: #086fae;
  background: #e7f4fd;
  box-shadow: inset 2px 0 #2795dc;
}

@media (max-width: 780px) {
  body.sidebar-collapsed .sidebar-collapse-button { position: static; width: 30px; height: 30px; border-radius: 9px; color: #e2f2fc; background: rgba(255,255,255,.1); box-shadow: none; }
  body.sidebar-collapsed .sidebar-collapse-button > span { transform: translateY(-1px) rotate(180deg); }
  body.sidebar-collapsed .sidebar .nav-submenu:not([hidden]) { position: static; width: auto; margin: 2px 0 7px 43px; padding: 0 0 0 12px; border: 0; border-left: 1px solid rgba(217,231,243,.5); border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
  body.sidebar-collapsed .sidebar .nav-submenu:not([hidden])::before,body.sidebar-collapsed .sidebar .nav-submenu:not([hidden])::after { display: none; }
}
/* Webhook source: configure and copy the endpoint before the campaign is saved. */
.campaign-webhook-preview {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 16px;
  border: 1px solid #d7e8f7;
  border-radius: 15px;
  background: linear-gradient(145deg, #f6fbff, #fff);
}
.campaign-webhook-preview[hidden] { display: none !important; }
.campaign-webhook-preview > div { grid-column: 1 / -1; display: flex; align-items: center; gap: 11px; }
.campaign-webhook-preview > div > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: #ec4f84; background: #ffeaf2; }
.campaign-webhook-preview > div p { display: grid; gap: 3px; margin: 0; }
.campaign-webhook-preview > div small { color: #73839a; }
.campaign-webhook-preview .wide { grid-column: 1 / -1; }
.campaign-webhook-preview > p.wide { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0; color: #50647e; }
.campaign-webhook-preview > p.wide span { padding: 5px 9px; border: 1px solid #dae7f3; border-radius: 999px; background: #fff; font-size: 12px; }

.datahub-pagination { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 58px; padding: 10px 16px; border-top: 1px solid #e3ebf4; background: rgba(249,252,255,.96); color: #607086; font-size: 12px; }
.datahub-pagination > label { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.datahub-pagination select { min-width: 74px; padding: 7px 28px 7px 10px; border: 1px solid #d8e3ef; border-radius: 9px; background: #fff; color: #26354a; }
.datahub-pagination > div { display: inline-flex; gap: 8px; }
.datahub-pagination .secondary-button { min-height: 34px; padding: 7px 12px; }
.datahub-pagination .secondary-button:disabled { opacity: .45; cursor: not-allowed; }

.campaign-activation-preview-modal { width: min(680px, calc(100vw - 30px)); }
.campaign-activation-preview-body { display: grid; gap: 16px; padding: 2px 24px 24px; }
.campaign-activation-source { display: flex; align-items: center; gap: 13px; padding: 15px; border: 1px solid #dce8f4; border-radius: 14px; background: linear-gradient(135deg,#f7fbff,#fff); }
.campaign-activation-source > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: #e4f2ff; color: #2f7fd2; }
.campaign-activation-source .app-icon { width: 22px; height: 22px; }
.campaign-activation-source div { display: grid; gap: 3px; }
.campaign-activation-source small { color: #75869b; font-size: 11px; }
.campaign-activation-source strong { color: #203149; font-size: 14px; }
.campaign-activation-source p { margin: 0; color: #607086; font-size: 12px; }
.campaign-activation-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.campaign-activation-stats article { display: grid; gap: 6px; min-height: 78px; padding: 13px; border: 1px solid #e0e8f1; border-radius: 12px; background: #fff; }
.campaign-activation-stats small { color: #728198; font-size: 10.5px; }
.campaign-activation-stats strong { color: #1f3047; font-size: 20px; }
.campaign-activation-flow { padding: 12px 14px; border-radius: 11px; background: #f3f7fb; color: #40536d; font-size: 12px; }
.campaign-activation-warnings { display: grid; gap: 7px; padding: 12px 14px; border: 1px solid #f0d8ae; border-radius: 11px; background: #fff9ee; color: #8a5b11; font-size: 12px; }
.campaign-activation-warnings[hidden] { display: none; }

@media (max-width: 720px) {
  .datahub-pagination { align-items: flex-start; flex-wrap: wrap; }
  .datahub-pagination > label { margin-left: 0; }
  .campaign-activation-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

.workflow-webhook-section { display: grid; gap: 3px; padding: 13px 14px; border: 1px solid #d9e7f4; border-radius: 12px; background: #f7fbff; }
.workflow-webhook-section strong { color: #22364f; font-size: 13px; }
.workflow-webhook-section small { color: #74869d; line-height: 1.45; }
.workflow-webhook-url-field { gap: 7px !important; }
.workflow-webhook-url-field > small { color: #76889d; line-height: 1.45; }
.workflow-webhook-copy { display: grid; grid-template-columns: minmax(0, 1fr) 42px; }
.workflow-webhook-copy input { min-width: 0; border-radius: 10px 0 0 10px !important; background: #f8fbfe !important; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px !important; }
.workflow-webhook-copy button { display: grid; place-items: center; border: 1px solid #cfddea; border-left: 0; border-radius: 0 10px 10px 0; color: #2279c9; background: #edf7ff; cursor: pointer; }
.workflow-webhook-copy button:hover { background: #dff0ff; }
.workflow-webhook-fields { display: grid; gap: 9px; padding: 13px; border: 1px solid #e0e9f2; border-radius: 13px; background: #fbfdff; }
.workflow-webhook-fields-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.workflow-webhook-fields-head > span { display: grid; gap: 2px; }
.workflow-webhook-fields-head small { color: #8090a4; font-size: 11px; }
.workflow-webhook-fields-head button { display: inline-flex; align-items: center; gap: 4px; border: 0; color: #247ad0; background: transparent; font-weight: 750; cursor: pointer; }
.workflow-webhook-fields-head button .app-icon { width: 15px; height: 15px; }
.workflow-webhook-field { display: grid; grid-template-columns: minmax(0, 1fr) 104px 28px 30px; align-items: start; gap: 7px; }
.workflow-webhook-field > div { display: grid; gap: 3px; }
.workflow-webhook-field input,.workflow-webhook-field select { min-width: 0; height: 38px !important; }
.workflow-webhook-field small { padding-left: 2px; color: #8392a5; font-size: 10px; }
.workflow-webhook-field small.required { color: #d83a4d; }
.workflow-webhook-required { display: grid !important; place-items: center; min-height: 38px; cursor: pointer; }
.workflow-webhook-required input { position: absolute; opacity: 0; pointer-events: none; }
.workflow-webhook-required span { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid #d6e1eb; border-radius: 8px; color: #a3afbd; background: #fff; font-weight: 900; }
.workflow-webhook-required input:checked + span { border-color: #ff8aab; color: #d82f64; background: #fff0f5; }
.workflow-webhook-remove { width: 30px; height: 38px; display: grid; place-items: center; border: 0; color: #a4afbc; background: transparent; cursor: pointer; }
.workflow-webhook-remove:hover { color: #d83a4d; }
.workflow-webhook-remove:disabled { opacity: .35; cursor: default; }
.workflow-webhook-remove .app-icon { width: 15px; height: 15px; }

@media (min-width: 1350px) {
  .workflow-workspace { grid-template-columns: 196px minmax(0, 1fr) 390px; }
}

@media (max-width: 720px) {
  .campaign-webhook-preview { grid-template-columns: 1fr; }
  .campaign-webhook-preview .wide { grid-column: auto; }
  .workflow-webhook-field { grid-template-columns: minmax(0, 1fr) 90px 26px 28px; gap: 5px; }
}

/* Workflow canvas: a restrained dotted grid keeps large flows easy to align. */
.workflow-canvas {
  background-color: #fbfdff;
  background-image:
    radial-gradient(circle, rgba(102, 132, 164, .24) 1px, transparent 1.2px),
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(246, 250, 254, .96));
  background-position: 0 0, 0 0;
  background-size: 18px 18px, 100% 100%;
}
/* P1 · saved Data Hub views, starter workflows and step insight */
.datahub-saved-view-tools { display: flex; align-items: center; gap: 7px; min-width: 0; }
.datahub-saved-view-tools .select-control { width: 190px; min-width: 150px; }
.datahub-saved-view-tools .secondary-button { min-height: 38px; white-space: nowrap; }
.datahub-saved-view-tools .icon-button { flex: 0 0 38px; width: 38px; height: 38px; color: #b43b47; background: #fff5f6; border-color: #f2cdd2; }
.datahub-saved-view-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.datahub-saved-view-summary > span { min-width: 0; display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 1px 8px; align-items: center; padding: 11px; border: 1px solid #dfeaf3; border-radius: 11px; background: #f8fcff; }
.datahub-saved-view-summary .app-icon { grid-row: 1 / span 2; width: 24px; height: 24px; }
.datahub-saved-view-summary strong,.datahub-saved-view-summary small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.datahub-saved-view-summary strong { color: #26384a; font-size: 11px; }
.datahub-saved-view-summary small { color: #8290a0; font-size: 9px; }
.datahub-filter-button { position: relative; white-space: nowrap; }
.datahub-filter-button.active { color: #0878c9; border-color: #9fcfee; background: #ecf7ff; }
.datahub-filter-button b { min-width: 19px; height: 19px; display: inline-grid; place-items: center; padding: 0 5px; border-radius: 999px; color: #fff; background: #1688d2; font-size: 10px; }
.datahub-filter-modal { width: min(820px, calc(100vw - 30px)); }
#dataHubFilterForm { display: grid; gap: 15px; padding: 0 24px 24px; }
.datahub-filter-match { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 12px 14px; border: 1px solid #dce8f2; border-radius: 12px; background: #f8fbfe; }
.datahub-filter-match > span { margin-right: auto; color: #2b3c50; font-size: 12px; font-weight: 750; }
.datahub-filter-match label { display: inline-flex; align-items: center; gap: 6px; color: #53677d; font-size: 11px; }
.datahub-filter-rules { display: grid; gap: 9px; }
.datahub-filter-rule { display: grid; grid-template-columns: 28px minmax(140px,1fr) minmax(145px,.9fr) minmax(150px,1.2fr) 34px; gap: 8px; align-items: center; }
.datahub-filter-rule > b { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: #237bb8; background: #e9f5fd; font-size: 10px; }
.datahub-filter-rule select,.datahub-filter-rule input { width: 100%; min-height: 39px; padding: 8px 10px; border: 1px solid #d6e2ec; border-radius: 9px; color: #2d3f54; background: #fff; font: inherit; }
.datahub-filter-rule > button { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 9px; color: #b84450; background: #fff2f4; cursor: pointer; }
.datahub-filter-rule > button .app-icon { width: 15px; height: 15px; }
.datahub-filter-empty { min-height: 112px; display: grid; place-items: center; align-content: center; gap: 4px; border: 1px dashed #cdddea; border-radius: 13px; color: #7b8a9c; background: #fbfdff; text-align: center; }
.datahub-filter-empty .app-icon { width: 25px; height: 25px; color: #4a9bd2; }
.datahub-refresh-button { flex: 0 0 auto; }
.datahub-refresh-button.is-refreshing .app-icon { animation: datahub-refresh-spin .75s linear infinite; }
@keyframes datahub-refresh-spin { to { transform: rotate(360deg); } }
.datahub-filter-empty strong { color: #405369; font-size: 12px; }
.datahub-filter-empty span { font-size: 10px; }
.campaign-datahub-levels label.wide { grid-column: 1 / -1; }
.campaign-datahub-levels label small { color: #7a899d; font-size: 10px; line-height: 1.4; }

.campaign-starter-section { display: grid; gap: 12px; margin-bottom: 16px; }
.campaign-starter-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.campaign-starter-grid > button { min-width: 0; display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: start; gap: 10px; padding: 13px; border: 1px solid #dce7f0; border-radius: 13px; color: #26384b; background: linear-gradient(145deg,#fff,#f7fbff); text-align: left; cursor: pointer; transition: border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.campaign-starter-grid > button:hover { border-color: #77b0dd; box-shadow: 0 9px 24px rgba(56,112,158,.12); transform: translateY(-1px); }
.campaign-starter-grid > button > b { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: #e9f5ff; }
.campaign-starter-grid > button > b.miniapp { background: #fff0f5; }
.campaign-starter-grid > button > b.webhook { background: #f3edff; }
.campaign-starter-grid > button > b .app-icon { width: 29px; height: 29px; }
.campaign-starter-grid > button > span { min-width: 0; display: grid; gap: 3px; }
.campaign-starter-grid > button em { color: #4f8dbc; font-size: 8px; font-style: normal; font-weight: 800; letter-spacing: .08em; }
.campaign-starter-grid > button strong { font-size: 12px; line-height: 1.35; }
.campaign-starter-grid > button small { color: #778798; font-size: 9.5px; line-height: 1.45; }
.campaign-starter-grid > button > i { grid-column: 2; color: #2876b4; font-size: 10px; font-style: normal; font-weight: 750; }
.campaign-starter-divider { display: flex; align-items: center; gap: 12px; color: #96a2ae; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.campaign-starter-divider::before,.campaign-starter-divider::after { content: ""; flex: 1; height: 1px; background: #e5ecf2; }

.campaign-report-step-copy { min-width: 0; }
.campaign-report-step-progress { display: block; height: 5px; margin-top: 7px; overflow: hidden; border-radius: 99px; background: #eaf0f5; }
.campaign-report-step-progress u { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#40a9ef,#4ec6a4); text-decoration: none; }
.campaign-report-steps .campaign-report-step-copy em { display: block; margin-top: 5px; color: #6f8193; font-size: 9px; font-style: normal; }
.campaign-report-steps .campaign-report-step-arrow { color: #4387bf; font-size: 17px; font-style: normal; }
.step-report-counts { grid-template-columns: repeat(4,minmax(0,1fr)); }
.step-report-counts article.other strong { font-size: 14px; }
.step-report-counts article em { display: block; margin-top: 2px; color: #8b97a4; font-size: 8px; font-style: normal; }

@media (max-width: 1100px) {
  #datahub-view .table-tools { flex-wrap: wrap; }
  .datahub-saved-view-tools { width: 100%; }
  .datahub-saved-view-tools .select-control { flex: 1; }
  .campaign-starter-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .datahub-saved-view-tools { flex-wrap: wrap; }
  .datahub-saved-view-tools .secondary-button { flex: 1; }
  .datahub-saved-view-summary,.step-report-counts { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .datahub-filter-rule { grid-template-columns: 26px minmax(0,1fr) 34px; }
  .datahub-filter-rule select,.datahub-filter-rule input { grid-column: 2; }
  .datahub-filter-rule > button { grid-column: 3; grid-row: 1; }
}

/* P1/P2 · product-wide readability, visual coherence and compact empty states */
:root {
  --type-caption: 12px;
  --type-caption-strong: 12.5px;
  --type-body: 14px;
  --type-control: 14px;
}

body { font-size: var(--type-body); }
.topbar h1 { font-size: 22px; }
.section-toolbar p,
.panel p,
.empty-state p,
.notice,
.notice span,
.table-context-bar,
.campaign-table td > small,
.run-summary-main small,
.run-summary-meta small,
.run-summary-meta time,
.datahub-row-identity small,
.zbs-insight-grid small,
.zbs-name-button small,
.aggregate-report-kpis small,
.aggregate-report-kpis em,
.aggregate-oa-card small,
.dynamic-page-sidebar-head small,
.mini-game-development-note small,
.mini-game-card-copy p { font-size: 12px; line-height: 1.5; }
.table-wrap th { font-size: 12px; }
.table-wrap td { font-size: 13px; }
.form-stack label > span,
.form-grid label > span,
.field-group > span,
.workflow-config-form label > span,
.workflow-mapping-title,
.aggregate-report-filters label > span { font-size: 12.5px; }

.primary-button,
.secondary-button,
.text-button { min-height: 40px; padding-block: 8px; font-size: var(--type-control); }
.search-box { min-height: 40px; }
.search-box input,
.select-control,
.form-stack input,
.form-stack select,
.form-grid input,
.form-grid select,
.workflow-config-form input,
.workflow-config-form select { min-height: 40px; font-size: var(--type-control); }
.icon-button,
.icon-button-soft,
.campaign-icon-action,
.campaign-more-menu > summary { min-height: 0; }

button:disabled,
.primary-button:disabled,
.secondary-button:disabled,
.text-button:disabled {
  opacity: .48 !important;
  cursor: not-allowed !important;
  filter: saturate(.55);
  box-shadow: none !important;
  transform: none !important;
}
button:disabled:hover,
.primary-button:disabled:hover,
.secondary-button:disabled:hover,
.text-button:disabled:hover { box-shadow: none !important; transform: none !important; }

/* Data Hub create action · explicit CNV-style column picker */
.workflow-datahub-mappings { gap: 10px; }
.workflow-datahub-mapping-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.workflow-datahub-mapping-title > span { display: grid; gap: 2px; }
.workflow-datahub-mapping-title strong { color: #24364a; font-size: 12.5px; }
.workflow-datahub-mapping-title small { color: #708298; font-size: 11px; line-height: 1.45; }
.workflow-datahub-mapping-title > b { flex: 0 0 auto; padding: 3px 7px; border: 1px solid #cfe1f1; border-radius: 999px; color: #2676ba; background: #f0f8ff; font-size: 10.5px; }
.workflow-datahub-mapping-empty { display: grid; gap: 3px; padding: 14px; border: 1px dashed #cbd9e7; border-radius: 10px; color: #657990; background: #f9fcff; text-align: center; }
.workflow-datahub-mapping-empty strong { color: #334a62; font-size: 12px; }
.workflow-datahub-mapping-empty span { font-size: 11px; line-height: 1.45; }
.workflow-datahub-mapping-row { display: grid; gap: 9px; padding: 11px; border: 1px solid #d9e5ef; border-radius: 10px; background: #fff; box-shadow: 0 3px 10px rgba(45,91,130,.05); }
.workflow-datahub-mapping-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.workflow-datahub-mapping-head > span { min-width: 0; display: grid; gap: 2px; }
.workflow-datahub-mapping-head strong { overflow: hidden; color: #253c53; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.workflow-datahub-mapping-head code { overflow: hidden; color: #6d7f94; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.workflow-datahub-mapping-row label { gap: 5px; }
.workflow-datahub-mapping-row label > span { color: #65768a; font-size: 10.5px; }
.workflow-datahub-mapping-remove { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 0; border-radius: 7px; color: #8b98a8; background: #f4f7fa; cursor: pointer; }
.workflow-datahub-mapping-remove:hover { color: #c43f4e; background: #fff0f2; }
.workflow-datahub-mapping-remove svg { width: 15px; height: 15px; }
.workflow-datahub-column-picker { position: relative; }
.workflow-datahub-column-picker > summary { list-style: none; }
.workflow-datahub-column-picker > summary::-webkit-details-marker { display: none; }
.workflow-datahub-add-column { min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px dashed #8fc2eb; border-radius: 9px; color: #2378be; background: #f4faff; font-size: 12px; font-weight: 700; cursor: pointer; }
.workflow-datahub-add-column:hover { border-color: #4d9bd8; background: #eaf6ff; }
.workflow-datahub-add-column svg { width: 16px; height: 16px; }
.workflow-datahub-column-menu { display: grid; gap: 8px; margin-top: 7px; padding: 9px; border: 1px solid #d7e3ee; border-radius: 10px; background: #fff; box-shadow: 0 12px 28px rgba(38,73,105,.14); }
.workflow-datahub-column-search { position: relative; display: block !important; }
.workflow-datahub-column-search svg { position: absolute; z-index: 1; top: 50%; left: 10px; width: 16px; height: 16px; color: #7d8da1; transform: translateY(-50%); pointer-events: none; }
.workflow-config-form .workflow-datahub-column-search input { padding-left: 34px; }
.workflow-datahub-column-options { max-height: 220px; display: grid; gap: 3px; overflow-y: auto; }
.workflow-datahub-column-options > button { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 9px; border: 0; border-radius: 7px; color: #354b62; background: transparent; text-align: left; cursor: pointer; }
.workflow-datahub-column-options > button:hover { color: #1d6fae; background: #eef7ff; }
.workflow-datahub-column-options > button > span { min-width: 0; display: grid; gap: 1px; }
.workflow-datahub-column-options strong,.workflow-datahub-column-options small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflow-datahub-column-options strong { font-size: 11.5px; }
.workflow-datahub-column-options small { color: #7a8ba0; font-size: 10px; }
.workflow-datahub-column-options em { flex: 0 0 auto; color: #8b99a9; font-size: 9.5px; font-style: normal; }
.workflow-datahub-column-no-results,.workflow-datahub-all-columns { padding: 10px; color: #73859a; font-size: 11px; text-align: center; }

/* The sticky top bar owns the page title. Body toolbars keep only context and actions. */
#customer360-view .section-toolbar h2,
#appointments-view .section-toolbar h2,
#templates-view .section-toolbar h2,
#miniapp-view [data-miniapp-area-panel] > .section-toolbar h2,
#miniapp-view .mini-game-section > .section-toolbar h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
#customer360-view .section-toolbar p,
#appointments-view .section-toolbar p,
#templates-view .section-toolbar p,
#miniapp-view [data-miniapp-area-panel] > .section-toolbar p,
#miniapp-view .mini-game-section > .section-toolbar p { margin-top: 0; }

/* Operational Mini Game builder */
.mini-game-kpis { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px; }
.mini-game-kpis > div { display:grid;gap:5px;padding:16px;border:1px solid #e3ebf2;border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(39,73,103,.05); }
.mini-game-kpis span { color:#74869a;font-size:11px;font-weight:650; }.mini-game-kpis strong { color:#20354a;font-size:24px;letter-spacing:-.04em; }
.mini-game-admin-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:16px; }
.mini-game-admin-empty { grid-column:1/-1;display:grid;place-items:center;min-height:180px;padding:24px;border:1px dashed #cbdbe8;border-radius:18px;color:#6f8295;background:#f9fcff;text-align:center; }
.mini-game-admin-card { display:grid;grid-template-columns:104px minmax(0,1fr);overflow:hidden;border:1px solid #dfe9f1;border-radius:18px;background:#fff;box-shadow:0 10px 28px rgba(31,69,102,.065); }
.mini-game-admin-card-art { display:grid;place-items:center;overflow:hidden;color:#fff;background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.45),transparent 24%),linear-gradient(145deg,#1ab8ea,#0876ce);font-size:36px; }.mini-game-admin-card-art img { width:100%;height:100%;object-fit:cover; }
.mini-game-admin-card-body { min-width:0;display:grid;gap:10px;padding:15px; }.mini-game-admin-card-head { display:flex;align-items:flex-start;justify-content:space-between;gap:8px; }
.mini-game-admin-card h3 { margin:0 0 4px;color:#20354a;font-size:15px; }.mini-game-admin-card p { margin:0;color:#7a8a9c;font-size:11px; }
.mini-game-admin-status { padding:5px 8px;border-radius:999px;color:#64778a;background:#eef3f7;font-size:9px;font-weight:800;white-space:nowrap; }.mini-game-admin-status.published { color:#087a56;background:#e4f8ef; }
.mini-game-admin-metrics { display:flex;gap:14px;color:#667b90;font-size:10px; }.mini-game-admin-metrics b { color:#233b51;font-size:12px; }.mini-game-admin-actions { display:flex;gap:8px; }.mini-game-admin-actions button { min-height:34px;padding:0 12px; }
.mini-game-builder { margin-bottom:16px;padding:0;overflow:visible; }.mini-game-builder-head { position:sticky;z-index:8;top:71px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 22px;border-bottom:1px solid #e6edf3;border-radius:18px 18px 0 0;background:rgba(247,251,254,.96);box-shadow:0 8px 20px rgba(31,69,102,.06);backdrop-filter:blur(14px); }
.mini-game-builder-head > div:first-child { min-width:0; }.mini-game-builder-head > div:last-child { display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end; }.mini-game-builder-head span { color:#087fd0;font-size:9px;font-weight:800;letter-spacing:.09em; }.mini-game-builder-head h3 { margin:5px 0 3px;color:#20354a;font-size:20px; }.mini-game-builder-head p { margin:0;color:#718398;font-size:11px; }
.mini-game-builder-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:16px; }.mini-game-config-card { min-width:0;padding:16px;border:1px solid #e2eaf1;border-radius:17px;background:#fff; }.mini-game-config-card > header { display:flex;align-items:center;gap:10px;margin-bottom:15px; }.mini-game-config-card > header > b { width:30px;height:30px;display:grid;place-items:center;border-radius:10px;color:#0879c7;background:#e8f4fd;font-size:12px; }.mini-game-config-card > header > div { min-width:0;display:grid;gap:2px; }.mini-game-config-card > header strong { color:#263b50;font-size:13px; }.mini-game-config-card > header small { color:#7c8b9b;font-size:10px; }.mini-game-config-card > header > button { margin-left:auto; }
.mini-game-form-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }.mini-game-form-grid label { display:grid;gap:6px; }.mini-game-form-grid label > span { color:#42586e;font-size:10px;font-weight:700; }.mini-game-form-grid label > small { color:#8a98a7;font-size:9px; }.mini-game-form-grid input,.mini-game-form-grid textarea,.mini-game-prize-row input,.mini-game-prize-row select { width:100%;border:1px solid #d9e3ec;border-radius:11px;color:#283e53;background:#fff;font:inherit;font-size:11px;outline:none; }.mini-game-form-grid input,.mini-game-prize-row input,.mini-game-prize-row select { height:40px;padding:0 10px; }.mini-game-form-grid textarea { padding:10px;resize:vertical; }.mini-game-form-grid .span-2 { grid-column:1/-1; }
.mini-game-upload-field { display:grid;gap:7px; }.mini-game-upload-field > span { color:#42586e;font-size:10px;font-weight:700; }.mini-game-background-upload { display:grid;grid-template-columns:94px minmax(0,1fr);gap:13px;align-items:center;padding:11px;border:1px dashed #b9d4e8;border-radius:15px;background:linear-gradient(145deg,#fbfdff,#f1f8fd); }.mini-game-background-thumb { width:94px;height:76px;display:grid;place-items:center;overflow:hidden;border:1px solid #d8e5ef;border-radius:12px;color:#2384c9;background:#e9f5fd; }.mini-game-background-thumb img { width:100%;height:100%;object-fit:cover; }.mini-game-background-thumb span { width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:#fff;box-shadow:0 6px 16px rgba(28,91,137,.12); }.mini-game-background-thumb svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7; }.mini-game-background-upload > div:last-child { min-width:0;display:grid;gap:5px; }.mini-game-background-upload strong { overflow:hidden;color:#30485e;font-size:11px;text-overflow:ellipsis;white-space:nowrap; }.mini-game-background-upload small { color:#7e8f9f;font-size:9px;line-height:1.45; }.mini-game-upload-actions { display:flex;align-items:center;gap:7px;margin-top:2px; }.mini-game-upload-actions button { min-height:32px;padding:0 11px;font-size:10px; }
.mini-game-oa-mode { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px; }.mini-game-oa-mode label { position:relative; }.mini-game-oa-mode input { position:absolute;opacity:0; }.mini-game-oa-mode span { display:grid;gap:3px;padding:11px;border:1px solid #dfe7ee;border-radius:12px;cursor:pointer; }.mini-game-oa-mode input:checked + span { border-color:#178ee0;background:#eef8ff;box-shadow:0 0 0 2px rgba(23,142,224,.08); }.mini-game-oa-mode strong { color:#32495f;font-size:11px; }.mini-game-oa-mode small { color:#8391a0;font-size:9px; }.mini-game-oa-list { display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px; }.mini-game-oa-list label { display:flex;align-items:center;gap:6px;padding:7px 9px;border:1px solid #dfe7ee;border-radius:999px;color:#536a80;background:#fff;font-size:10px; }
.mini-game-preview-card { overflow:hidden;background:linear-gradient(145deg,#fff,#f5faff); }
.mini-game-preview-controls { display:grid;grid-template-columns:auto minmax(150px,1fr);gap:10px;align-items:end;margin-bottom:13px; }
.mini-game-preview-controls > div { display:flex;padding:3px;border:1px solid #dce7f0;border-radius:11px;background:#f3f7fa; }
.mini-game-preview-controls button { min-height:34px;padding:0 11px;border:0;border-radius:8px;color:#6b7d8f;background:transparent;font-size:10px;font-weight:750;cursor:pointer; }
.mini-game-preview-controls button.active { color:#0876ce;background:#fff;box-shadow:0 3px 9px rgba(31,76,111,.12); }
.mini-game-preview-controls label { display:grid;gap:5px; }.mini-game-preview-controls label > span { color:#51677c;font-size:9px;font-weight:750; }
.mini-game-preview-controls select { width:100%;height:40px;padding:0 10px;border:1px solid #d9e3ec;border-radius:11px;color:#283e53;background:#fff;font:inherit;font-size:10px; }
.mini-game-live-preview { --preview-accent:#0b84f3;--preview-cover:#9adcf6;display:grid;place-items:center;min-height:560px;padding:24px;border:1px solid #dce8f1;border-radius:22px;background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--preview-accent) 11%,#fff),transparent 48%),linear-gradient(180deg,#f8fbfd,#eaf1f6); }
.mini-game-preview-phone { width:272px;min-height:516px;overflow:hidden;border:5px solid #102b40;border-radius:34px;background:#f3f7fa;box-shadow:0 28px 55px rgba(18,47,72,.25),0 2px 0 rgba(255,255,255,.8) inset; }
.mini-game-preview-top { height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;color:#fff;background:linear-gradient(135deg,color-mix(in srgb,var(--preview-accent) 82%,#163762),var(--preview-accent)); }.mini-game-preview-brand { display:flex;align-items:center;gap:7px; }.mini-game-preview-brand i { width:20px;height:20px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.34);border-radius:7px;background:rgba(255,255,255,.17);box-shadow:0 5px 12px rgba(6,42,86,.17);font-size:8px;font-style:normal;font-weight:900; }.mini-game-preview-brand b { font-size:9px;letter-spacing:-.01em; }.mini-game-preview-menu { width:24px;height:24px;display:grid;place-items:center;border-radius:9px;background:rgba(255,255,255,.12);font-size:8px;font-weight:900;letter-spacing:.05em; }
.mini-game-preview-screen { position:relative;min-height:155px;overflow:hidden;padding:14px 18px 30px;color:#fff;background:radial-gradient(circle at 100% -15%,color-mix(in srgb,var(--preview-cover) 78%,#fff),transparent 43%),linear-gradient(145deg,color-mix(in srgb,var(--preview-accent) 83%,#15365e),var(--preview-accent)); }.mini-game-preview-screen::after { content:"";position:absolute;right:-41px;bottom:-70px;width:150px;height:150px;border:1px solid rgba(255,255,255,.16);border-radius:50%;box-shadow:0 0 0 22px rgba(255,255,255,.035); }.mini-game-preview-eyebrow { position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px; }.mini-game-preview-eyebrow small { font-size:7px;font-weight:850;letter-spacing:.12em;opacity:.85; }.mini-game-preview-eyebrow span { display:flex;align-items:center;gap:4px;padding:4px 7px;border:1px solid rgba(255,255,255,.19);border-radius:999px;background:rgba(255,255,255,.1);font-size:6px;font-weight:700; }.mini-game-preview-eyebrow span::before { content:"";width:4px;height:4px;border-radius:50%;background:#8ef0bd;box-shadow:0 0 0 3px rgba(142,240,189,.16); }.mini-game-preview-screen h4 { position:relative;z-index:1;max-width:220px;margin:11px 0 6px;font-size:21px;line-height:1.08;letter-spacing:-.035em; }.mini-game-preview-screen > p { position:relative;z-index:1;max-width:215px;min-height:28px;margin:0;color:rgba(255,255,255,.75);font-size:8px;line-height:1.5; }.mini-game-preview-meta { position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;margin-top:13px; }.mini-game-preview-meta em { display:flex;align-items:baseline;gap:3px;padding:6px 9px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(9,42,83,.18);font-size:7px;font-style:normal;font-weight:650; }.mini-game-preview-meta em b { font-size:10px; }.mini-game-preview-meta > span { color:rgba(255,255,255,.82);font-size:7px;font-weight:700; }.mini-game-preview-meta > span b { margin-left:2px;font-size:8px; }
.mini-game-preview-body { position:relative;margin-top:-18px;padding:0 14px 13px; }.mini-game-preview-ticket { position:relative;height:210px;overflow:hidden;border:6px solid rgba(255,255,255,.94);border-radius:27px;background:#fff;box-shadow:0 18px 34px rgba(24,53,86,.16); }.mini-game-preview-cover,.mini-game-preview-result { width:100%;height:100%;display:grid;place-content:center;justify-items:center;text-align:center; }.mini-game-preview-cover { position:relative;isolation:isolate;gap:4px;overflow:hidden;padding:20px;color:#fff;background:radial-gradient(circle at 18% 14%,rgba(255,255,255,.28),transparent 26%),radial-gradient(circle at 88% 84%,rgba(255,255,255,.15),transparent 30%),linear-gradient(145deg,var(--preview-cover),color-mix(in srgb,var(--preview-accent) 86%,#16375d)); }.mini-game-preview-cover::before { content:"";position:absolute;inset:0;z-index:-1;opacity:.18;background-image:radial-gradient(rgba(255,255,255,.8) .7px,transparent .7px);background-size:9px 9px; }.mini-game-preview-orb { position:absolute;border:1px solid rgba(255,255,255,.2);border-radius:50%; }.mini-game-preview-orb.one { width:86px;height:86px;right:-32px;top:-28px;box-shadow:0 0 0 14px rgba(255,255,255,.045); }.mini-game-preview-orb.two { width:54px;height:54px;left:-23px;bottom:-19px; }.mini-game-preview-gift-mark { width:48px;height:48px;display:grid;place-items:center;margin-bottom:8px;border:1px solid rgba(255,255,255,.31);border-radius:17px;background:rgba(255,255,255,.17);box-shadow:0 10px 24px rgba(10,50,93,.17),0 1px 0 rgba(255,255,255,.3) inset;backdrop-filter:blur(8px); }.mini-game-preview-gift-mark svg { width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }.mini-game-preview-cover > small { color:rgba(255,255,255,.7);font-size:6px;font-weight:850;letter-spacing:.13em; }.mini-game-preview-cover > strong { max-width:185px;margin-top:2px;font-size:16px;line-height:1.15;letter-spacing:-.025em; }.mini-game-preview-cover > p { margin:2px 0 11px;color:rgba(255,255,255,.72);font-size:7px; }.mini-game-preview-swipe { display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid rgba(255,255,255,.23);border-radius:999px;background:rgba(8,38,77,.16);font-size:7px;font-weight:700; }.mini-game-preview-swipe i { width:19px;height:3px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.25); }.mini-game-preview-swipe i::after { content:"";display:block;width:8px;height:100%;border-radius:inherit;background:#fff;box-shadow:8px 0 9px rgba(255,255,255,.6); }
.mini-game-preview-result { gap:5px;padding:16px;color:#27405a;background:radial-gradient(circle at 50% -10%,#fff,#eaf6ff 72%); }.mini-game-preview-result.win { color:#704019;background:radial-gradient(circle at 50% -10%,#fffdf0,#ffefbd 74%); }.mini-game-preview-result > span { font-size:34px; }.mini-game-preview-result > img { width:78px;height:64px;object-fit:contain;border-radius:16px;background:rgba(255,255,255,.7);box-shadow:0 9px 20px rgba(91,60,25,.1); }.mini-game-preview-result > .mini-game-preview-missing-image { width:78px;height:64px;display:grid;place-content:center;border:1px dashed #d69c4b;border-radius:16px;color:#93601e;background:rgba(255,255,255,.55);font-size:8px;font-weight:750;line-height:1.35; }.mini-game-preview-result > small { font-size:7px;font-weight:850;letter-spacing:.12em; }.mini-game-preview-result > strong { max-width:190px;font-size:16px;line-height:1.2;letter-spacing:-.02em; }.mini-game-preview-result > p { max-width:190px;margin:0;font-size:8px;line-height:1.4; }.mini-game-preview-result > b { padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.5);font-size:11px; }
.mini-game-preview-tip { display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;align-items:center;margin:10px 3px 0;padding:8px 10px;border:1px solid #e3ebf1;border-radius:13px;background:rgba(255,255,255,.76); }.mini-game-preview-tip > span { width:24px;height:24px;display:grid;place-items:center;border-radius:8px;color:var(--preview-accent);background:color-mix(in srgb,var(--preview-accent) 10%,#fff);font-size:10px; }.mini-game-preview-tip p { display:grid;gap:1px;margin:0; }.mini-game-preview-tip b { color:#293f53;font-size:7px; }.mini-game-preview-tip small { color:#7b8b99;font-size:6px;line-height:1.35; }
.mini-game-preview-footer { height:58px;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;border-top:1px solid #e7edf2;background:rgba(255,255,255,.96);box-shadow:0 -8px 20px rgba(34,62,84,.045); }.mini-game-preview-footer span { position:relative;display:grid;justify-items:center;gap:1px;color:#8a99a8; }.mini-game-preview-footer span.active::before { content:"";position:absolute;top:-8px;width:24px;height:3px;border-radius:0 0 4px 4px;background:var(--preview-accent); }.mini-game-preview-footer img { width:23px;height:23px;object-fit:contain;filter:saturate(.7); }.mini-game-preview-footer span.active img { filter:none; }.mini-game-preview-footer small { font-size:6px;font-weight:650; }
.mini-game-live-preview { min-height:690px; }.mini-game-preview-phone { width:292px;min-height:650px; }.mini-game-preview-top { height:44px; }.mini-game-preview-top > b { font-size:10px; }.mini-game-preview-back { width:25px;height:25px;display:grid;place-items:center;border-radius:9px;background:rgba(255,255,255,.12);font-size:18px;line-height:1; }.mini-game-preview-screen { min-height:112px;padding:13px 18px 19px; }.mini-game-preview-screen h4 { margin-top:9px;font-size:19px; }.mini-game-preview-screen > p { min-height:0;font-size:7.5px; }.mini-game-preview-tools { position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.7fr) .68fr .68fr;gap:7px;margin:-11px 12px 10px;padding:9px;border:1px solid #e4eaf0;border-radius:17px;background:rgba(255,255,255,.97);box-shadow:0 11px 25px rgba(26,53,74,.12); }.mini-game-preview-tools > em,.mini-game-preview-tools > span { min-width:0;display:grid;place-items:center;border-radius:11px;font-style:normal;text-align:center; }.mini-game-preview-tools > em { grid-template-columns:23px minmax(0,1fr);gap:6px;padding:7px 8px;color:#374b5f;background:color-mix(in srgb,var(--preview-accent) 7%,#fff);text-align:left; }.mini-game-preview-tools > em i { width:23px;height:23px;display:grid;place-items:center;border-radius:8px;color:#fff;background:var(--preview-accent);font-size:10px;font-style:normal; }.mini-game-preview-tools > em span { display:grid;gap:1px;font-size:6px; }.mini-game-preview-tools > em b { color:var(--preview-accent);font-size:11px; }.mini-game-preview-tools > span { gap:2px;padding:6px 3px;border:1px solid #e9eef2;color:#496176;background:#fff; }.mini-game-preview-tools > span i { color:var(--preview-accent);font-size:13px;font-style:normal; }.mini-game-preview-tools > span small { font-size:6px;font-weight:700; }.mini-game-preview-body { margin:0;padding:0 12px 12px; }.mini-game-preview-stage { position:relative;isolation:isolate;overflow:hidden;padding:45px 10px 10px;border-radius:24px;background-color:color-mix(in srgb,var(--preview-accent) 76%,#12395e);background-image:linear-gradient(180deg,rgba(7,27,54,.08),rgba(6,30,62,.34)),var(--preview-background-image),radial-gradient(circle at 50% 0,color-mix(in srgb,var(--preview-cover) 58%,#fff),transparent 62%);background-position:center;background-size:cover;box-shadow:0 15px 30px color-mix(in srgb,var(--preview-accent) 18%,transparent); }.mini-game-preview-stage::before { content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(5,27,56,.28));pointer-events:none; }.mini-game-preview-stage-title { position:absolute;top:12px;left:14px;right:14px;display:grid;justify-items:center;gap:3px;color:#fff;text-align:center;text-shadow:0 2px 7px rgba(10,35,67,.36); }.mini-game-preview-stage-title small { font-size:6px;font-weight:850;letter-spacing:.12em; }.mini-game-preview-stage-title strong { max-width:230px;overflow:hidden;font-size:13px;line-height:1.1;text-overflow:ellipsis;white-space:nowrap; }.mini-game-preview-stage .mini-game-preview-ticket { height:198px;margin:0;border-width:5px;border-radius:21px; }.mini-game-preview-showcase { margin-top:9px;padding:10px;border:1px solid #e4eaf0;border-radius:17px;background:#fff;box-shadow:0 8px 18px rgba(29,56,79,.06); }.mini-game-preview-showcase > strong { display:block;margin-bottom:8px;color:#2a4155;font-size:8px;text-align:center; }.mini-game-preview-showcase > div { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px; }.mini-game-preview-showcase span { min-width:0;display:grid;justify-items:center;gap:3px; }.mini-game-preview-showcase span > i,.mini-game-preview-showcase span > img { width:38px;height:36px;display:grid;place-items:center;border-radius:10px;object-fit:contain;color:var(--preview-accent);background:color-mix(in srgb,var(--preview-accent) 7%,#fff);font-size:14px;font-style:normal; }.mini-game-preview-showcase span small { width:100%;overflow:hidden;color:#6a7784;font-size:5.5px;font-weight:650;text-align:center;text-overflow:ellipsis;white-space:nowrap; }
.mini-game-prize-section { margin:0 16px 16px;overflow-x:auto; }.mini-game-prize-table-head,.mini-game-prize-row { min-width:1060px;display:grid;grid-template-columns:minmax(130px,1.25fr) 84px 92px minmax(145px,1.1fr) minmax(140px,1.1fr) 94px 66px 72px 72px 34px;gap:8px;align-items:center; }.mini-game-prize-table-head { padding:0 8px 8px;color:#8290a0;font-size:9px;font-weight:750;text-transform:uppercase; }.mini-game-prize-row { margin-bottom:8px;padding:8px;border:1px solid #e1e9f0;border-radius:13px;background:#fbfdff; }.mini-game-prize-cell { min-width:0;display:block; }.mini-game-prize-cell > span { display:none; }.mini-game-prize-remove { display:grid;place-items:center; }.mini-game-prize-row button { width:32px;height:32px;border:0;border-radius:9px;color:#c14343;background:#fff0f0;cursor:pointer; }.mini-game-prize-help { min-width:760px;margin-top:8px;color:#74889b;font-size:9px;line-height:1.45; }.mini-game-probability-summary { min-width:760px;display:flex;gap:8px;flex-wrap:wrap;margin-top:10px; }.mini-game-probability-summary span { padding:6px 9px;border-radius:999px;color:#537087;background:#edf6fc;font-size:9px;font-weight:700; }
.mini-game-prize-upload-actions { position:relative;min-width:0;display:flex;align-items:center;gap:5px; }.mini-game-prize-row .mini-game-prize-upload-button { min-width:0;width:100%;height:40px;display:flex;align-items:center;justify-content:flex-start;gap:6px;overflow:hidden;padding:4px 7px;border:1px dashed #a9cce5;border-radius:10px;color:#247bb9;background:#f2f9fe; }.mini-game-prize-upload-button img { width:31px;height:31px;flex:0 0 31px;object-fit:contain;border-radius:7px;background:#fff; }.mini-game-prize-upload-button i { width:23px;height:23px;display:grid;place-items:center;flex:0 0 23px;border-radius:7px;background:#fff;font-size:14px;font-style:normal; }.mini-game-prize-upload-button span { overflow:hidden;font-size:9px;font-weight:750;text-overflow:ellipsis;white-space:nowrap; }.mini-game-prize-upload-button:disabled { cursor:not-allowed;opacity:.45; }.mini-game-prize-upload-button.is-uploading span { font-size:0; }.mini-game-prize-upload-button.is-uploading span::after { content:"Đang tải…";font-size:9px; }.mini-game-prize-row .mini-game-prize-clear-button { width:22px;height:22px;flex:0 0 22px;padding:0;border-radius:7px;font-size:13px; }
.mini-game-coming-row { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }.mini-game-coming-row article { display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;align-items:center;overflow:hidden;border:1px solid #e2eaf1;border-radius:16px;background:#fff;opacity:.8; }.mini-game-coming-row img { width:84px;height:76px;object-fit:cover; }.mini-game-coming-row span { display:grid;gap:3px; }.mini-game-coming-row strong { color:#344b61;font-size:12px; }.mini-game-coming-row small { color:#8290a0;font-size:9px; }
@media (max-width:980px) { .mini-game-kpis{grid-template-columns:repeat(2,1fr)}.mini-game-admin-list,.mini-game-builder-grid{grid-template-columns:1fr}.mini-game-preview-controls{grid-template-columns:1fr}.mini-game-prize-section{overflow:visible}.mini-game-prize-table-head{display:none}.mini-game-prize-row{min-width:0;grid-template-columns:1fr 1fr;align-items:end}.mini-game-prize-cell{display:grid;gap:5px}.mini-game-prize-cell > span{display:block;color:#65798d;font-size:9px;font-weight:750}.mini-game-prize-row > *:first-child,.mini-game-prize-row > *:nth-child(4),.mini-game-prize-row > *:nth-child(5){grid-column:1/-1}.mini-game-prize-remove{justify-items:end}.mini-game-prize-help,.mini-game-probability-summary{min-width:0}.mini-game-coming-row{grid-template-columns:1fr} }
@media (max-width:720px) { .mini-game-builder-head{top:62px;align-items:flex-start;flex-wrap:wrap;padding:14px}.mini-game-builder-head > div:last-child{width:100%;justify-content:flex-start}.mini-game-builder-grid{padding:10px}.mini-game-prize-section{margin:0 10px 10px}.mini-game-live-preview{min-height:410px;padding:10px}.mini-game-prize-row{grid-template-columns:1fr}.mini-game-prize-row > *{grid-column:1/-1}.mini-game-prize-remove{justify-items:stretch}.mini-game-prize-remove button{width:100%} }

/* ZBS follows the System Z blue language; red remains reserved for rejection/errors. */
.zbs-insight-grid article {
  border-color: #dce9f4;
  background: linear-gradient(155deg,#fff,#f4faff);
  box-shadow: 0 4px 14px rgba(39,104,154,.055);
}
.zbs-insight-grid span { color: #587086; }
.zbs-insight-grid strong { color: #20364b; }
.zbs-insight-grid small { color: #74879a; }
.zbs-status-tabs { border-bottom-color: #dfe9f2; }
.zbs-status-tabs button { color: #5e7080; }
.zbs-status-tabs button:hover { color: #176eae; background: #f3f9fe; }
.zbs-status-tabs button.active { color: #0c73b9; border-bottom-color: #258bd2; background: #f4faff; }
.zbs-status-tabs b { color: #0c73b9; }
.zbs-template-table th { color: #5b6f82; background: #f4f9fd; font-size: 12px; }
.zbs-template-table td { font-size: 13px; }
.zbs-name-button { color: #263b50; }
.zbs-name-button:hover strong { color: #0c73b9; }
.zbs-name-button small { color: #74879a; }
.zbs-row-action { border-color: #cfe3f3; color: #176eae; background: #f7fbff; }
.zbs-row-action:hover { border-color: #83bae1; color: #0a639f; background: #eaf6ff; }
.zbs-provider-note.notice.info { border-color: #cfe3f3; color: #385b78; background: #f4faff; }
.zbs-preview-layout { background: #f6faff; }
.zbs-phone-sender > span { background: #1879c3; }
.zbs-brand-wordmark,
.zbs-brand-wordmark > i,
.zbs-brand-wordmark > b,
.zbs-message-brand .zbs-brand-wordmark > i,
.zbs-message-brand .zbs-brand-wordmark > b { color: #1677bd; }
.zbs-phone-bubble mark { color: #0b6dad; background: #eaf6ff; }

/* All sidebar navigation now uses the same PNG glass icon family. */
.miniapp-submenu-icon.glass-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(15,64,101,.16));
}
.sidebar .nav-submenu button { grid-template-columns: 20px minmax(0,1fr); min-height: 38px; font-size: 12.5px; }

/* Collapsed status remains understandable instead of becoming an unexplained dot. */
@media (min-width: 781px) {
  body.sidebar-collapsed .sidebar .sidebar-foot { position: relative; cursor: help; }
  body.sidebar-collapsed .sidebar .sidebar-foot .status-dot { width: 12px; height: 12px; margin: 0; box-shadow: 0 0 0 4px rgba(255,191,77,.17); }
  body.sidebar-collapsed .sidebar .sidebar-foot::after {
    content: "Tự động có giới hạn";
    position: absolute;
    z-index: 160;
    bottom: 0;
    left: calc(100% + 10px);
    width: max-content;
    max-width: 190px;
    padding: 8px 10px;
    border: 1px solid #d9e6ef;
    border-radius: 9px;
    color: #31526d;
    background: #fff;
    box-shadow: 0 10px 28px rgba(30,69,100,.17);
    font-size: 12px;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-4px);
    transition: opacity .16s ease,transform .16s ease;
  }
  body.sidebar-collapsed .sidebar .sidebar-foot:hover::after,
  body.sidebar-collapsed .sidebar .sidebar-foot:focus-visible::after { opacity: 1; transform: none; }
}

/* Empty screens should orient the user without consuming most of the viewport. */
.empty-state.large { padding: 42px 20px; }
.table-panel .empty-state.show,
.appointment-list-panel .empty-state.show { min-height: 240px; }
.empty-state.compact { padding: 28px 20px; }
.zbs-empty { padding: 34px 20px; }
.dynamic-page-empty { padding: 22px 10px 16px; }
.dynamic-page-empty strong { font-size: 13px; }
.dynamic-page-empty span { font-size: 12px; }
.dynamic-page-welcome { min-height: 260px; padding: 28px; }

/* Fit the aggregate report at a normal desktop width; smaller screens still scroll. */
.aggregate-report-table { min-width: 980px; }
.aggregate-report-table th { font-size: 11.5px; }
.aggregate-report-table td { font-size: 12.5px; }
.aggregate-report-table td:first-child strong { font-size: 12.5px; }
.aggregate-report-table td:first-child small,
.aggregate-report-table td:nth-child(5) small { font-size: 11px; }
@media (min-width: 1280px) {
  .aggregate-report-table { width: 100%; min-width: 100%; }
}

/* Keep the workspace full-width on phones after the desktop sidebar rules. */
@media (max-width: 780px) {
  .main-content,
  body.sidebar-collapsed .main-content { width: 100%; margin-left: 0; }
}

/* Data Hub opens as a catalog, then narrows the workspace to one selected hub. */
.datahub-overview[hidden],
.datahub-detail[hidden] { display: none !important; }
.datahub-overview { display: grid; gap: 18px; }
.datahub-overview-toolbar { margin-bottom: 0; }
.datahub-overview-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.datahub-overview-metrics article {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 88px;
  padding: 16px 18px;
  border: 1px solid #dce8f1;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(34,75,108,.06);
}
.datahub-overview-metric-icon { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #1976bd; background: #e8f5ff; }
.datahub-overview-metric-icon.violet { color: #6757c4; background: #f0edff; }
.datahub-overview-metric-icon.cyan { color: #087f9c; background: #e7f9fc; }
.datahub-overview-metric-icon.green { color: #17795a; background: #e9f8f1; }
.datahub-overview-metric-icon .app-icon { width: 20px; height: 20px; }
.datahub-overview-metrics article > div { display: grid; gap: 2px; }
.datahub-overview-metrics small { color: #71859a; font-size: 11px; font-weight: 650; }
.datahub-overview-metrics strong { color: #20384d; font-size: 23px; line-height: 1.1; }
.datahub-overview-groups { display: grid; gap: 16px; }
.datahub-overview-space { overflow: hidden; border: 1px solid #dbe7f0; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(30,70,100,.06); }
.datahub-overview-space-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 18px; border-bottom: 1px solid #e7eef4; background: linear-gradient(105deg,#f8fcff,#fff); }
.datahub-overview-space-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
.datahub-overview-space-title > span { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px; color: #176fae; background: #e7f4ff; }
.datahub-overview-space-title > span .app-icon { width: 18px; height: 18px; }
.datahub-overview-space-title > div { display: grid; gap: 3px; min-width: 0; }
.datahub-overview-space-title strong { overflow: hidden; color: #243b50; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.datahub-overview-space-title small { color: #72879a; font-size: 11px; }
.datahub-overview-hub-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; padding: 16px; }
.datahub-overview-hub {
  display: grid;
  gap: 14px;
  min-width: 0;
  min-height: 164px;
  padding: 16px;
  border: 1px solid #dce8f1;
  border-radius: 14px;
  color: #294156;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.datahub-overview-hub:hover { border-color: #85bfe8; box-shadow: 0 12px 28px rgba(36,105,155,.13); transform: translateY(-2px); }
.datahub-overview-hub:focus-visible { outline: 3px solid rgba(30,136,210,.2); outline-offset: 2px; }
.datahub-overview-hub-top { display: grid; grid-template-columns: 40px minmax(0,1fr) 26px; align-items: center; gap: 10px; }
.datahub-overview-hub-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #fff; background: linear-gradient(145deg,#268bd4,#126ba9); box-shadow: 0 7px 16px rgba(24,115,177,.2); }
.datahub-overview-hub-icon .app-icon { width: 19px; height: 19px; }
.datahub-overview-hub-name { display: grid; gap: 3px; min-width: 0; }
.datahub-overview-hub-name strong { overflow: hidden; color: #233c51; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.datahub-overview-hub-name small { color: #8192a3; font-size: 10.5px; }
.datahub-overview-hub-arrow { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: #3b83b9; background: #edf7fe; }
.datahub-overview-hub-arrow .app-icon { width: 14px; height: 14px; transform: rotate(180deg); }
.datahub-overview-hub-metrics { display: flex; gap: 8px; }
.datahub-overview-hub-metrics > span { padding: 6px 9px; border-radius: 8px; color: #6f8293; background: #f4f8fb; font-size: 10.5px; }
.datahub-overview-hub-metrics b { color: #2e5878; font-size: 11.5px; }
.datahub-overview-table-chips { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.datahub-overview-table-chips > span { display: inline-flex; align-items: center; gap: 5px; max-width: 130px; padding: 5px 7px; border: 1px solid #dfebf3; border-radius: 7px; overflow: hidden; color: #61788b; background: #fbfdff; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.datahub-overview-table-chips .app-icon { width: 11px; height: 11px; flex: 0 0 auto; }
.datahub-overview-empty { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 150px; padding: 24px; color: #7890a3; background: #f9fcfe; }
.datahub-overview-empty > span { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #4e91c2; background: #eaf6fe; }
.datahub-overview-empty > div { display: grid; gap: 3px; }
.datahub-overview-empty strong { color: #37546b; font-size: 13px; }
.datahub-overview-empty small { font-size: 11px; }
.datahub-overview-empty.large { min-height: 260px; border: 1px dashed #cbdde9; border-radius: 16px; }
.datahub-detail { display: grid; gap: 16px; }
.datahub-detail-toolbar { margin-bottom: 0; }
.datahub-detail-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.datahub-back-button { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border: 1px solid #d7e4ed; border-radius: 10px; color: #246faa; background: #fff; cursor: pointer; }
.datahub-back-button:hover { border-color: #86bce2; background: #eef8ff; }
.datahub-back-button .app-icon { width: 18px; height: 18px; }
.datahub-detail .datahub-tree-panel { border-color: #d9e6ef; border-radius: 13px; }
.datahub-detail .datahub-tree { display: grid; gap: 6px; padding: 10px; }
.datahub-detail .datahub-table-button { min-height: 54px; margin: 0; padding: 9px 10px; border: 1px solid transparent; border-radius: 10px; }
.datahub-detail .datahub-table-button > span { display: flex; align-items: center; gap: 9px; min-width: 0; }
.datahub-detail .datahub-table-button > span > span { display: grid; gap: 2px; min-width: 0; }
.datahub-detail .datahub-table-button strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.datahub-detail .datahub-table-button > span small { color: #8293a3; font-size: 9.5px; font-weight: 500; }
.datahub-detail .datahub-table-button:hover { border-color: #d6e6f1; background: #f5faff; }
.datahub-detail .datahub-table-button.active { border-color: #b9daef; color: #216cae; background: linear-gradient(90deg,#e5f3fd,#f7fbfe); }

@media (max-width: 1180px) {
  .datahub-overview-hub-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 820px) {
  .datahub-overview-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .datahub-overview-hub-grid { grid-template-columns: 1fr; }
  .datahub-overview-space-head { align-items: flex-start; }
  .datahub-workspace { grid-template-columns: 1fr; }
  .datahub-tree-panel { position: static; }
}
@media (max-width: 560px) {
  .datahub-overview-metrics { grid-template-columns: 1fr; }
  .datahub-overview-space-head { display: grid; }
  .datahub-overview-space-head .secondary-button { width: 100%; justify-content: center; }
}

/* Match the live scratch-card screen: restrained ticket, no glass/orb motif. */
.mini-game-preview-phone {
  background-color: color-mix(in srgb, var(--preview-accent) 60%, #233943);
  background-image: linear-gradient(180deg, rgba(12,25,31,.48), rgba(12,25,31,.2) 42%, rgba(12,25,31,.62)), var(--preview-background-image);
  background-position: center center;
  background-size: cover;
}
.mini-game-preview-top { background: #fff; color: #263c45; border-bottom: 1px solid #e3e8e7; }
.mini-game-preview-back,
.mini-game-preview-menu { background: #f1f4f3; color: #3e555e; }
.mini-game-preview-screen {
  min-height: 109px;
  padding-bottom: 15px;
  color: #263a43;
  background: #f5f6f4;
}
.mini-game-preview-screen::after { display: none; }
.mini-game-preview-screen > p { color: #66777b; }
.mini-game-preview-eyebrow small { color: #637478; }
.mini-game-preview-eyebrow span { border-color: #dce5e2; border-radius: 5px; color: #3d6b59; background: #e8f3ec; }
.mini-game-preview-eyebrow span::before { background: #43946b; box-shadow: none; }
.mini-game-preview-tools {
  margin: 0 12px 10px;
  padding: 5px;
  border-color: rgba(255,255,255,.58);
  border-radius: 10px;
  background: rgba(248,250,249,.76);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  box-shadow: none;
}
.mini-game-preview-tools > em { background: rgba(239,244,243,.72); }
.mini-game-preview-tools > em i { color: #29414a; background: transparent; }
.mini-game-preview-tools > em b,
.mini-game-preview-tools > span i { color: #304852; }
.mini-game-preview-tools > span { border: 0; background: rgba(255,255,255,.45); }
.mini-game-preview-stage {
  padding: 15px 10px 10px;
  border-radius: 13px;
  background-color: color-mix(in srgb, var(--preview-accent) 68%, #233943);
  background-image: linear-gradient(180deg, rgba(12,25,31,.26), rgba(12,25,31,.52)), var(--preview-background-image);
  box-shadow: none;
}
.mini-game-preview-stage::before { display: none; }
.mini-game-preview-stage-title {
  position: static;
  justify-items: start;
  gap: 4px;
  margin: 0 3px 16px;
  text-align: left;
  text-shadow: none;
}
.mini-game-preview-stage-title strong { font-size: 16px; }
.mini-game-preview-stage .mini-game-preview-ticket {
  height: 188px;
  border: 10px solid rgba(248,250,249,.76);
  border-radius: 9px;
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  box-shadow: none;
}
.mini-game-preview-cover {
  gap: 11px;
  padding: 20px;
  background: linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.25)), repeating-linear-gradient(90deg,transparent 0 8px,rgba(255,255,255,.08) 8px 9px), var(--preview-cover);
}
.mini-game-preview-cover::before {
  z-index: 0;
  inset: 5px;
  border: 1px solid rgba(255,255,255,.58);
  background: none;
  opacity: 1;
}
.mini-game-preview-cover > small,
.mini-game-preview-cover > strong,
.mini-game-preview-cover > p { position: relative; z-index: 1; }
.mini-game-preview-cover > small { font-size: 7px; color: rgba(255,255,255,.85); }
.mini-game-preview-cover > strong { max-width: 210px; margin: 0; font-size: 18px; }
.mini-game-preview-cover > p { margin: 0; font-size: 7px; font-weight: 700; letter-spacing: .08em; }
.mini-game-preview-result,
.mini-game-preview-result.win { color: #283c43; background: #fff; }
.mini-game-preview-result.win { background: #fff9ec; }
.mini-game-preview-result > img { box-shadow: none; }
.mini-game-preview-result-mark { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 18px; }
.mini-game-preview-result > b { border-radius: 4px; background: #f1ede0; }
.mini-game-preview-showcase {
  border-color: rgba(255,255,255,.58);
  border-radius: 10px;
  background: rgba(248,250,249,.78);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  box-shadow: none;
}
.mini-game-preview-showcase > strong { text-align: left; }
.mini-game-preview-showcase span > i,
.mini-game-preview-showcase span > img { border: 1px solid #e4e8e7; border-radius: 6px; background: #f5f6f4; }

.mini-game-preview-scene {
  min-height: 548px;
  background: transparent;
}
.mini-game-preview-scene .mini-game-preview-screen {
  color: #fff;
  background: transparent;
}
.mini-game-preview-scene .mini-game-preview-screen > p,
.mini-game-preview-scene .mini-game-preview-eyebrow small { color: rgba(255,255,255,.88); }
.mini-game-preview-scene .mini-game-preview-stage {
  border: 0;
  background: transparent;
  padding-top: 0;
}
.mini-game-preview-footer {
  border-color: rgba(255,255,255,.4);
  background: rgba(248,250,249,.76);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
}