:root {
  --ink: #251633;
  --muted: #83788c;
  --canvas: #fdfbf8;
  --surface: #ffffff;
  --purple: #6d28d9;
  --purple-dark: #32065d;
  --purple-soft: #f1eaff;
  --lime: #ddff7b;
  --line: #ece6ef;
  --green: #159b68;
  --orange: #df9015;
  --red: #de4e66;
}

.daily-table-heading { margin: 22px 0 8px; display: flex; align-items: center; justify-content: space-between; }
.daily-table-heading h3 { margin: 0; font-size: 13px; }.daily-table-heading span { color: #8a8094; font-size: 9px; }
.daily-leads-table { overflow: hidden; border: 1px solid #ece6f1; border-radius: 9px; background: white; }
.daily-lead-row { min-height: 37px; padding: 0 13px; display: grid; grid-template-columns: 1fr 82px 92px; align-items: center; border-bottom: 1px solid #f0ebf3; color: #756b80; font-size: 10px; }
.daily-lead-row:last-child { border-bottom: 0; }.daily-lead-row strong { color: #2c1b43; font: 600 11px 'DM Mono', monospace; }.daily-lead-row b { color: #6d28d9; font: 600 10px 'DM Mono', monospace; }.daily-lead-header { min-height: 31px; background: #faf8fd; color: #8d8198; font-size: 8px; font-weight: 700; letter-spacing: .45px; text-transform: uppercase; }
.chart-cursor { stroke: #9a6ce8; stroke-width: 1; stroke-dasharray: 3 3; }.chart-hover-dot { fill: #6d28d9; stroke: white; stroke-width: 2; }.lead-chart #chartTooltip rect { fill: #2e174b; }.lead-chart #chartTooltip text { fill: white; font: 9px Poppins, sans-serif; }
.chart-controls { display: flex; align-items: center; gap: 9px; }.chart-tabs { display: flex; padding: 3px; border: 1px solid #e6deef; border-radius: 6px; background: #faf8fd; }.chart-tabs button { height: 23px; padding: 0 7px; border: 0; border-radius: 4px; background: transparent; color: #83768e; font: 600 8px Poppins, sans-serif; cursor: pointer; }.chart-tabs button.active { background: white; color: #6d28d9; box-shadow: 0 1px 4px rgba(51,16,84,.13); }
.client-kpi-list { max-height: 245px; margin: 17px 0 18px; overflow-y: auto; border: 1px solid #ece6f1; border-radius: 8px; }
.client-kpi-row { min-height: 45px; padding: 7px 10px; display: flex !important; align-items: center; justify-content: space-between; margin: 0 !important; border-bottom: 1px solid #f0ebf3; font-size: 10px !important; }.client-kpi-row:last-child { border-bottom: 0; }
.kpi-client { display: flex; align-items: center; gap: 7px; font-weight: 600; }.kpi-client i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 6px; font-size: 8px; font-style: normal; }.kpi-input { display: flex; align-items: center; gap: 4px; color: #756b80; }.kpi-input b { font: 600 11px 'DM Mono', monospace; }.client-kpi-row .kpi-input input { width: 54px; height: 29px; margin: 0; text-align: right; }
.threshold-heading { margin: 4px 0 6px; font-size: 12px; }

.account-menu { position: fixed; z-index: 40; width: 132px; max-width: calc(100vw - 20px); box-sizing: border-box; padding: 4px; border: 1px solid #e5ddeb; border-radius: 7px; background: white; box-shadow: 0 5px 14px rgba(47,22,65,.14); }
.account-menu button { width: 100%; height: 31px; padding: 0 8px; border: 0; border-radius: 4px; background: transparent; color: #523d61; text-align: left; font: 600 10px Poppins, sans-serif; cursor: pointer; }
.account-menu button:hover { background: #f7f2fb; }.account-menu .menu-danger { color: #c73f58; }
.creatives-view { max-width: 1180px; }.creative-controls { display: flex; align-items: center; gap: 7px; }.creative-controls select { min-width: 150px; }.creative-range { margin: -9px 0 17px; color: #877b90; font-size: 10px; }.top-creatives { margin-bottom: 21px; }.compact-heading { margin-bottom: 8px; }.creative-card-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 9px; }.creative-card { min-width: 0; overflow: hidden; border: 1px solid #e7dfed; border-radius: 8px; background: white; cursor: pointer; }.creative-card:hover { border-color: #cdb5e8; }.creative-thumb { width: 100%; height: 112px; display: block; object-fit: cover; background: #f1edf5; }.creative-card > div { padding: 9px; }.creative-rank { display: block; margin-bottom: 4px; color: #856e9e; font-size: 8px; font-weight: 700; }.creative-card strong { display: block; overflow: hidden; color: #311c47; font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }.creative-card small { display: block; margin-top: 4px; color: #796e80; font-size: 8px; }.creative-empty { display: grid; place-items: center; color: #7b5a9f; font-size: 24px; }.creative-table-panel { overflow: hidden; border: 1px solid #e5ddeb; border-radius: 9px; background: white; }.creative-table-toolbar { min-height: 47px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ece6f1; }.creative-table-toolbar strong { font-size: 11px; }.creative-table-toolbar label { display: flex; align-items: center; gap: 6px; color: #83758d; font-size: 9px; }.creative-table-toolbar select { height: 27px; min-width: 145px; }.creative-table-head, .creative-row { display: grid; grid-template-columns: 46px minmax(210px,1fr) 104px 94px 66px 75px 86px; align-items: center; gap: 9px; }.creative-table-head { min-height: 39px; padding: 0 15px; border-bottom: 1px solid #ece6f1; background: #faf8fd; color: #83758d; font-size: 8px; font-weight: 700; letter-spacing: .45px; }.creative-table-head span:first-child { grid-column: 1 / 3; }.creative-row { min-height: 67px; padding: 7px 15px; border-bottom: 1px solid #f0ebf3; cursor: pointer; }.creative-row:last-child { border-bottom: 0; }.creative-table-thumb { width: 37px; height: 37px; display: grid; place-items: center; overflow: hidden; border-radius: 5px; object-fit: cover; background: #f1edf5; color: #7b5a9f; }.creative-row strong, .creative-row small { display: block; }.creative-row strong { overflow: hidden; color: #311c47; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.creative-row small { margin-top: 2px; color: #887d8e; font-size: 8px; }.creative-row b { color: #51415e; font: 600 10px 'DM Mono', monospace; }.creative-status { font-size: 9px; font-weight: 700; }.creative-status.active { color: #087346; }.creative-status.inactive { color: #a45b10; }.creative-view-button { border: 0; background: transparent; color: #6431a4; font: 700 9px Poppins, sans-serif; cursor: pointer; }.creative-preview { width: min(700px,calc(100vw - 30px)); padding: 21px; position: relative; }.creative-preview > div:first-child { min-height: 260px; display: grid; place-items: center; overflow: hidden; border-radius: 7px; background: #151119; }.creative-preview img, .creative-preview video { max-width: 100%; max-height: 580px; display: block; }.creative-preview-placeholder { color: #d8cae8; font-size: 12px; }.creative-preview-meta { margin-top: 11px; }.creative-preview-meta strong, .creative-preview-meta span { display: block; }.creative-preview-meta strong { font-size: 12px; }.creative-preview-meta span { margin-top: 3px; color: #84798e; font-size: 9px; }dialog#creativePreviewDialog { padding: 0; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 12px 35px rgba(43,19,53,.15); }
.meta-ad-preview { width: 100%; min-height: 520px; border: 0; background: white; }
.creative-command-bar { min-height: 58px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #e5ddeb; border-radius: 8px; background: white; }.creative-command-bar .creative-range { margin: 0; }.creative-insights { display: grid; grid-template-columns: repeat(4,1fr); margin: 13px 0 22px; overflow: hidden; border: 1px solid #e5ddeb; border-radius: 8px; background: white; }.creative-insights > div { min-height: 72px; padding: 13px 16px; display: grid; align-content: center; gap: 3px; border-right: 1px solid #ece6f1; }.creative-insights > div:last-child { border-right: 0; }.creative-insights span { color: #897c90; font-size: 8px; font-weight: 700; letter-spacing: .35px; }.creative-insights strong { color: #2d1b42; font: 700 18px 'DM Mono', monospace; }.creative-card { border-radius: 6px; }.creative-thumb { height: 156px; object-fit: cover; image-rendering: auto; }.creative-card-metrics { margin-top: 7px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }.creative-card-metrics b { color: #332044; font: 700 10px 'DM Mono', monospace; }.creative-cpl { font-size: 9px; font-weight: 700; }.creative-cpl.green { color: #087346; }.creative-cpl.orange { color: #9a5400; }.creative-cpl.red { color: #ae233f; }.creative-filters { display: flex; gap: 7px; }.creative-filters select { height: 27px; min-width: 112px; }.creative-table-head button { height: 39px; padding: 0; border: 0; background: transparent; color: #83758d; text-align: left; font: 700 8px Poppins, sans-serif; letter-spacing: .45px; cursor: pointer; }.creative-table-head button:hover, .creative-table-head button.active-sort { color: #622ca1; }.creative-table-head button i { font-style: normal; }.creative-row:hover { background: #fcfaff; }
.creative-status { display: inline-flex; align-items: center; gap: 5px; color: #716477; font-size: 9px; font-weight: 700; }.creative-status i { width: 19px; height: 11px; position: relative; border-radius: 9px; background: #d8d0dc; }.creative-status i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 7px; height: 7px; border-radius: 50%; background: white; }.creative-status.active { color: #087346; }.creative-status.active i { background: #17a76e; }.creative-status.active i::after { left: 10px; }.creative-status.inactive { color: #92727a; }.creative-status.inactive i { background: #d8d0dc; }
.watch-view { width: 100%; max-width: 1050px; margin: 0 auto; }.watch-toolbar { min-height: 74px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #e5ddeb; border-radius: 8px; background: white; }.watch-toolbar h2 { margin: 0 0 3px; font-size: 16px; letter-spacing: -.35px; }.watch-toolbar p { margin: 0; color: #83778c; font-size: 10px; }.watch-controls { display: flex; align-items: center; gap: 7px; }.watch-controls select, .watch-controls input { height: 29px; min-width: 106px; }.watch-controls input { padding: 0 8px; border: 1px solid #ded6e5; border-radius: 6px; color: #564863; font: 10px Poppins, sans-serif; }.watch-panel { min-height: 310px; margin-top: 15px; overflow: hidden; border: 1px solid #e5ddeb; border-radius: 9px; background: white; }.watch-empty { min-height: 310px; display: grid; place-content: center; justify-items: center; gap: 6px; color: #86798d; text-align: center; }.watch-empty span { color: #6d28d9; font-size: 20px; }.watch-empty strong { color: #39234d; font-size: 13px; }.watch-empty p { margin: 0; font-size: 10px; }.watch-ad { display: grid; grid-template-columns: 290px 1fr; min-height: 310px; }.watch-media { min-height: 310px; display: grid; place-items: center; overflow: hidden; background: #241331; }.watch-media img, .watch-media video { width: 100%; height: 310px; object-fit: contain; }.watch-detail { padding: 24px; }.watch-detail h3 { margin: 0 0 4px; color: #29183c; font-size: 18px; letter-spacing: -.45px; }.watch-detail > p { margin: 0 0 21px; color: #83778c; font-size: 10px; }.watch-metrics { display: grid; grid-template-columns: repeat(3,1fr); margin-bottom: 18px; border: 1px solid #ece6f1; border-radius: 7px; overflow: hidden; }.watch-metrics div { min-height: 73px; padding: 13px; border-right: 1px solid #ece6f1; }.watch-metrics div:last-child { border: 0; }.watch-metrics span { display: block; color: #85798c; font-size: 8px; font-weight: 700; letter-spacing: .35px; }.watch-metrics strong { display: block; margin-top: 4px; color: #312044; font: 700 18px 'DM Mono', monospace; }.watch-context { display: flex; align-items: center; justify-content: space-between; color: #776a80; font-size: 10px; }.watch-context .creative-status { font-size: 10px; }.creative-watch-button { width: 27px; height: 27px; padding: 0; border: 1px solid #e0d5eb; border-radius: 6px; background: white; color: #6431a4; display: grid; place-items: center; cursor: pointer; }.creative-watch-button:hover { border-color: #9f78cd; background: #faf7ff; }.creative-watch-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.watch-list-panel { margin-top: 15px; overflow: hidden; border: 1px solid #e5ddeb; border-radius: 9px; background: white; }.watch-list-panel header { height: 43px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ece6f1; }.watch-list-panel header strong { color: #362148; font-size: 11px; }.watch-list-panel header span { color: #87798e; font-size: 9px; }.watch-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }.watch-item { min-width: 0; min-height: 76px; padding: 9px 11px; display: grid; grid-template-columns: 52px minmax(0,1fr) 24px; align-items: center; gap: 9px; border-right: 1px solid #eee8f2; border-bottom: 1px solid #eee8f2; cursor: pointer; }.watch-item:nth-child(3n) { border-right: 0; }.watch-item:hover { background: #fcfaff; }.watch-item img, .watch-item-media { width: 52px; height: 52px; display: grid; place-items: center; overflow: hidden; border-radius: 5px; object-fit: cover; background: #f0ebf5; color: #7145a3; font-size: 17px; }.watch-item strong, .watch-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.watch-item strong { color: #332045; font-size: 10px; }.watch-item small { margin-top: 3px; color: #86798d; font-size: 8px; }.watch-remove { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #927b99; font-size: 16px; line-height: 1; cursor: pointer; }.watch-remove:hover { background: #f8e7eb; color: #bf3451; }.creative-watch-button.is-watched { border-color: #6130a1; background: #6830ad; color: white; }.creative-watch-button.is-watched:hover { background: #6830ad; }
.watch-table-head, .watch-item { display: grid; grid-template-columns: 58px minmax(210px,1fr) 105px 94px 68px 76px 42px; align-items: center; column-gap: 11px; }.watch-table-head { min-height: 41px; padding: 0 14px; border-bottom: 1px solid #ece6f1; background: #faf8fd; color: #83758d; font-size: 8px; font-weight: 700; letter-spacing: .45px; }.watch-table-head > span:first-child { grid-column: 1 / 3; }.watch-table-head button { height: 41px; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; font: 700 8px Poppins, sans-serif; letter-spacing: .45px; cursor: pointer; }.watch-table-head button:hover, .watch-table-head button.active-sort { color: #622ca1; }.watch-table-head i { font-style: normal; }.watch-list { display: block; }.watch-item { min-height: 76px; padding: 9px 14px; border: 0; border-bottom: 1px solid #eee8f2; }.watch-item:nth-child(3n) { border-right: 0; }.watch-item:last-child { border-bottom: 0; }.watch-item img, .watch-item-media { width: 58px; height: 58px; }.watch-item b { color: #51415e; font: 600 11px 'DM Mono', monospace; }.watch-item .creative-status { font-size: 9px; }.watch-remove { justify-self: end; }.watch-panel { min-height: 230px; }.watch-empty { min-height: 230px; }.watch-ad { grid-template-columns: 220px 1fr; min-height: 230px; }.watch-media { min-height: 230px; }.watch-media img, .watch-media video { height: 230px; }.watch-detail { padding: 18px; }.watch-detail h3 { font-size: 15px; }.watch-detail > p { margin-bottom: 14px; }.watch-metrics div { min-height: 62px; padding: 10px; }.watch-metrics strong { font-size: 15px; }.creative-watch-button.is-watched { border-color: #159b68; background: #159b68; color: white; }.creative-watch-button.is-watched .watch-remove-mark { display: none; }.creative-watch-button.is-watched:hover { border-color: #e9a7b2; background: #fff0f2; color: #c33d55; }.creative-watch-button.is-watched:hover .watch-check { display: none; }.creative-watch-button.is-watched:hover .watch-remove-mark { display: block; }
.watch-item small { display: flex; align-items: center; gap: 5px; }.watch-item .watch-client-logo { width: 16px !important; height: 16px !important; flex: none; display: grid !important; place-items: center; overflow: hidden; border-radius: 4px; object-fit: cover; background: #eee7ff; color: #6734a5; font-size: 6px; font-weight: 700; }.creative-watch-button.is-watched { border-color: #b9e8ce; background: #e8f8ef; color: #118150; }.creative-watch-button.is-watched:hover { border-color: #f1bdc7; background: #fff0f2; color: #c13a52; }.creative-watch-button.is-watched .watch-check { display: block; }.creative-watch-button.is-watched .watch-remove-mark { display: none; }.creative-watch-button.is-watched:hover .watch-check { display: none; }.creative-watch-button.is-watched:hover .watch-remove-mark { display: block; }
dialog#creativePreviewDialog { width: min(1180px,94vw); max-width: none; height: min(92vh,920px); }.creative-preview { width: 100%; height: 100%; padding: 18px; position: relative; display: grid; grid-template-rows: minmax(0,1fr) auto; }.creative-preview #creativePreviewContent { min-height: 0; height: 100%; display: grid; place-items: center; overflow: hidden; border-radius: 7px; background: #151119; }.creative-preview .meta-ad-preview { width: 100%; height: 100%; min-height: 0; }.creative-preview-meta { margin-top: 10px; }.watch-header-actions { display: flex; align-items: center; gap: 11px; }.watch-view-toggle { display: inline-flex; padding: 2px; border: 1px solid #e3d9eb; border-radius: 6px; background: #faf8fd; }.watch-view-toggle button { height: 23px; padding: 0 7px; border: 0; border-radius: 4px; background: transparent; color: #82758a; font: 600 8px Poppins, sans-serif; cursor: pointer; }.watch-view-toggle button.active { background: white; color: #632ca0; box-shadow: 0 1px 3px rgba(45,21,61,.12); }.watch-list-panel.board-mode .watch-table-head { display: none; }.watch-list.board { padding: 12px; display: grid; grid-template-columns: repeat(auto-fill,minmax(235px,1fr)); gap: 10px; background: #fcfbfd; }.watch-card { min-width: 0; display: grid; grid-template-columns: 82px minmax(0,1fr); overflow: hidden; border: 1px solid #e5ddeb; border-radius: 8px; background: white; cursor: pointer; }.watch-card:hover { border-color: #c9afe4; }.watch-card-media { height: 100%; min-height: 126px; overflow: hidden; background: #f0ebf5; }.watch-card-media img, .watch-card-media .watch-item-media { width: 100%; height: 100%; display: grid; place-items: center; object-fit: cover; }.watch-card-body { min-width: 0; padding: 10px; }.watch-card-title { display: flex; align-items: start; justify-content: space-between; gap: 5px; }.watch-card strong { display: block; overflow: hidden; color: #342047; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.watch-card small { display: flex; align-items: center; gap: 4px; margin-top: 4px; overflow: hidden; color: #877a8e; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.watch-card .watch-client-logo { width: 14px; height: 14px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 3px; object-fit: cover; background: #eee7ff; color: #6734a5; font-size: 5px; font-weight: 700; }.watch-card-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin: 12px 0 9px; }.watch-card-metrics span { display: grid; gap: 2px; color: #918598; font-size: 7px; }.watch-card-metrics b { color: #51415e; font: 600 9px 'DM Mono', monospace; }.watch-card .creative-status { font-size: 8px; }.watch-card .watch-remove { width: 19px; height: 19px; flex: none; font-size: 14px; }
.creatives-view { max-width: 1280px; }.creative-card-grid { gap: 12px; }.creative-thumb { height: 190px; }.creative-card > div { padding: 12px; }.creative-card strong { font-size: 12px; }.creative-rank { font-size: 9px; }.creative-card-metrics b { font-size: 12px; }.creative-card-metrics .creative-cpl { font-size: 10px; }.creative-table-toolbar { min-height: 56px; padding: 0 18px; }.creative-table-toolbar strong { font-size: 13px; }.creative-table-head, .creative-row { grid-template-columns: 68px minmax(250px,1fr) 115px 105px 76px 84px 104px; column-gap: 12px; }.creative-table-head { min-height: 46px; padding: 0 18px; font-size: 9px; }.creative-table-head button { height: 46px; font-size: 9px; }.creative-row { min-height: 90px; padding: 10px 18px; }.creative-table-thumb { width: 58px; height: 58px; border-radius: 6px; }.creative-row strong { font-size: 12px; }.creative-row small { margin-top: 4px; font-size: 9px; }.creative-row b { font-size: 12px; }.creative-status { font-size: 10px; }.creative-status i { transform: scale(1.12); transform-origin: left center; margin-right: 2px; }.creative-view-button { font-size: 10px; }.creative-insights > div { min-height: 82px; }.creative-insights strong { font-size: 21px; }
.creatives-view { width: 100%; max-width: 1450px !important; margin: 0 auto; }
.watch-list.board { grid-template-columns: repeat(auto-fill,minmax(235px,1fr)); gap: 10px; padding: 12px; }.watch-card { grid-template-columns: 88px minmax(0,1fr); }.watch-card-media { min-height: 138px; height: 100%; }.watch-card-media img, .watch-card-media .watch-item-media { object-position: center; }.watch-card-body { padding: 10px; }.watch-card-title strong { font-size: 10px; line-height: 1.35; }.watch-client-line { margin-top: 5px !important; }.watch-ad-type { display: block; margin-top: 5px; color: #806f8d; font-size: 8px; font-weight: 600; }.watch-card-metrics { margin: 10px 0 8px; padding: 7px 0; border-top: 1px solid #f0ebf3; border-bottom: 1px solid #f0ebf3; }.watch-card-metrics span { gap: 2px; font-size: 7px; }.watch-card-metrics b { font-size: 9px; }.watch-card-footer { display: flex; align-items: center; justify-content: space-between; }.watch-card .watch-remove { width: auto; height: 22px; padding: 0 6px; border: 1px solid #efc3cc; border-radius: 4px; background: #fff5f6; color: #bd4055; font: 600 7px Poppins, sans-serif; }.watch-card .watch-remove:hover { background: #fde7eb; color: #a83047; }
.historical-preview { justify-items: center; gap: 9px; padding: 22px; text-align: center; }.historical-preview strong, .historical-preview span { display: block; }.historical-preview strong { color: #fff; font-size: 13px; }.historical-preview span { max-width: 300px; color: #d8cae8; font-size: 10px; line-height: 1.5; }.historical-preview-link { display: inline-flex; min-height: 29px; align-items: center; padding: 0 10px; border-radius: 5px; background: #6b2ab1; color: #fff; font: 600 9px Poppins, sans-serif; text-decoration: none; }.historical-preview-link:hover { background: #59228f; }
dialog#creativePreviewDialog.learning-snapshot-preview { width: min(520px,calc(100vw - 28px)); height: auto; max-height: 86vh; }.learning-snapshot-preview .creative-preview { height: auto; display: block; }.learning-snapshot-preview .creative-preview #creativePreviewContent { height: auto; min-height: 0; max-height: calc(86vh - 84px); padding: 0; background: #fff; }.learning-snapshot-preview .creative-preview #creativePreviewContent > img { width: min(100%,440px); height: auto; max-height: calc(86vh - 84px); object-fit: contain; }.learning-snapshot-preview .creative-preview #creativePreviewContent:has(.historical-preview) { min-height: 240px; background: #151119; }.learning-snapshot-preview .creative-preview-meta { margin-top: 8px; }
.watch-card-media { height: auto; min-height: 150px; align-self: stretch; background: #f0ebf5; }.watch-card-media .watch-media-main { display: block; }
.learning-links .learning-fallback-link { display: inline-flex; align-items: center; min-height: 22px; padding: 0 7px; border-radius: 4px; background: #6b2ab1; color: #fff; font-size: 7px; text-decoration: none; }.learning-links .learning-fallback-link:hover { background: #59228f; text-decoration: none; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
tbody tr:focus { outline: none !important; }
.detail-summary { grid-template-columns: repeat(4, 1fr) !important; }
@media (max-width: 700px) { .detail-summary { grid-template-columns: 1fr !important; } }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: Poppins, sans-serif; font-size: 13px; line-height: 1.4; zoom: 1.1; }
.app-shell { min-height: 100vh; padding-left: 236px; }

.sidebar { position: fixed; z-index: 20; top: 0; left: 0; width: 236px; height: 90.91vh; padding: 22px 14px 17px; background: var(--purple-dark); color: white; display: flex; flex-direction: column; }
.logout-button { height: 28px; margin: 10px 7px 0; padding: 0; border: 0; background: transparent; color: #cdbddd; text-align: left; font: 500 10px Poppins, sans-serif; cursor: pointer; }.logout-button:hover { color: white; }
.login-screen { min-height: 90.91vh; display: grid; place-items: center; padding: 30px; background: var(--canvas); }.login-panel { width: min(360px,100%); padding: 30px; border: 1px solid #e5ddeb; border-radius: 10px; background: white; box-shadow: 0 10px 28px rgba(54,25,78,.10); text-align: center; }.login-panel img { width: 150px; height: 54px; margin: 0 auto 25px; display: block; object-fit: contain; object-position: center; }.login-panel h1 { margin: 0 0 4px; color: var(--ink); font-size: 23px; letter-spacing: -.7px; }.login-panel p { margin: 0 0 20px; color: var(--muted); font-size: 11px; }.login-panel label { display: grid; gap: 6px; margin: 0 0 13px; color: #574a61; text-align: left; font-size: 10px; font-weight: 600; }.login-panel input { width: 100%; height: 38px; padding: 0 10px; border: 1px solid #ded6e5; border-radius: 7px; background: #fff; color: var(--ink); font: 12px Poppins, sans-serif; }.login-panel .remember-login { display: flex; align-items: center; gap: 7px; margin: -1px 0 14px; color: #786b80; font-weight: 500; }.login-panel .remember-login input { width: 13px; height: 13px; padding: 0; accent-color: #6d28d9; }.login-panel .form-error { min-height: 14px; margin: 0 0 8px; color: #bf3451; }.login-panel .save-settings { width: 100%; }
.brand { height: 72px; margin: 0 0 24px; padding: 8px 4px; display: flex; align-items: center; background: transparent; }
.brand img { display: block; max-width: 205px; max-height: 52px; object-fit: contain; object-position: left center; }
nav { display: grid; gap: 4px; }
.nav-link, .settings-button { height: 38px; padding: 0 10px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 7px; background: transparent; color: #d8cae8; text-decoration: none; text-align: left; font: 500 12px Poppins, sans-serif; cursor: pointer; }
.nav-link svg, .settings-button svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: #c4abdf; }
.nav-link:hover, .settings-button:hover { background: #4a137d; color: white; }
.nav-link.active { background: #6121a7; color: white; font-weight: 600; }
.nav-link.active svg { color: var(--lime); }
.sidebar-bottom { margin-top: auto; }
.settings-button { width: 100%; margin-bottom: 14px; }
.user { width: 100%; padding: 15px 7px 0; border: 0; border-top: 1px solid #58218b; background: transparent; display: flex; align-items: center; gap: 8px; color: white; text-align: left; cursor: pointer; }
.avatar { width: 28px; height: 28px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--lime); color: #451275; font-size: 9px; font-weight: 700; }.avatar.has-image img { width: 100%; height: 100%; object-fit: cover; }.avatar svg, .team-avatar svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.user div:nth-child(2) { display: grid; line-height: 1.2; }
.user strong { font-size: 11px; }.user small { color: #cdbddd; font-size: 9px; }.user > span { margin-left: auto; color: #cdbddd; }

main { width: min(1400px, 100%); min-height: 100vh; margin: 0 auto; padding: 34px 42px 48px; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; }
.topbar h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -1px; }
.top-actions, .admin-top-actions { display: flex; align-items: center; gap: 8px; }
.icon-button { width: 35px; height: 35px; position: relative; border: 1px solid #e5dfea; border-radius: 7px; background: white; color: #5f4c6f; font-size: 16px; }
.icon-button i { position: absolute; top: 7px; right: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--red); }
.export-button, .save-settings { border: 0; border-radius: 7px; background: var(--purple); color: white; font: 600 11px Poppins, sans-serif; cursor: pointer; }
.export-button { height: 35px; padding: 0 12px; }
.add-client-button { height: 35px; padding: 0 12px; border: 1px solid #d8c8ec; border-radius: 7px; background: white; color: #59218e; font: 600 11px Poppins, sans-serif; cursor: pointer; }
.add-client-button:hover { border-color: #8b5ac5; background: #fbf8ff; }
.meta-button { height: 35px; padding: 0 11px; border: 1px solid #e2d8ea; border-radius: 7px; background: #f7f3fb; color: #614c72; font: 600 10px Poppins, sans-serif; cursor: pointer; }
.meta-button:hover { background: #f0e9fa; color: #4f1f80; }
.refresh-all-button { height: 35px; padding: 0 11px; border: 0; border-radius: 7px; background: var(--purple); color: white; font: 600 10px Poppins, sans-serif; cursor: pointer; }.refresh-all-button:disabled { opacity: .65; cursor: wait; }

.control-row { min-height: 51px; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 8px; background: white; }
.table-intro { color: var(--muted); font-size: 10px; }.table-intro strong { color: #4c345e; font-weight: 600; }.calendar { margin-right: 6px; color: var(--purple); }
.right-controls { display: flex; gap: 7px; }
.search { width: 184px; height: 30px; padding: 0 9px; display: flex; align-items: center; gap: 6px; border: 1px solid #e7e1e9; border-radius: 5px; background: #fdfcff; color: #968aa0; }
.search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: 10px Poppins, sans-serif; }.search input::placeholder { color: #a299a9; }
select { height: 30px; padding: 0 23px 0 9px; border: 1px solid #e7e1e9; border-radius: 5px; background: #fdfcff; color: #65566e; font: 10px Poppins, sans-serif; }

.portfolio-stats { display: grid; grid-template-columns: 1.8fr repeat(3, 1fr); margin: 18px 0 31px; overflow: hidden; border-radius: 10px; background: white; box-shadow: 0 10px 24px rgba(49, 16, 67, .05); }
.portfolio-stats > div { min-height: 96px; padding: 16px 18px; display: grid; align-content: center; gap: 2px; border: 1px solid var(--line); border-right: 0; }
.portfolio-stats > div:first-child { background: var(--purple); border-color: var(--purple); }.portfolio-stats > div:last-child { border-right: 1px solid var(--line); }
.portfolio-stats span { color: var(--muted); font-size: 10px; font-weight: 500; }.portfolio-stats strong { font-size: 20px; letter-spacing: -.7px; }.portfolio-stats em { color: var(--green); font-size: 9px; font-style: normal; font-weight: 600; }.portfolio-stats em.negative { color: var(--red); }
.portfolio-stats > div:first-child span { color: #d8c8f2; }.portfolio-stats > div:first-child strong { color: white; }.portfolio-stats > div:first-child em { color: var(--lime); }.portfolio-stats > div:first-child.currency-mixed { border-color: var(--line); background: #faf8fd; }.portfolio-stats > div:first-child.currency-mixed span { color: #766b7d; }.portfolio-stats > div:first-child.currency-mixed strong { color: #4a3658; font-size: 14px; letter-spacing: -.3px; }.portfolio-stats > div:first-child.currency-mixed em { color: #8a8094; }
.portfolio-health { padding: 13px 18px !important; }.portfolio-health > span { display: block; margin-bottom: 7px; }.portfolio-health > div { display: flex; align-items: center; gap: 10px; }.portfolio-pie { width: 48px; height: 48px; flex: none; }.portfolio-key { display: grid; gap: 2px; }.portfolio-key span { color: #62586a; font-size: 8px; font-weight: 600; white-space: nowrap; }.portfolio-key .dot { width: 6px; height: 6px; }
.users-view { max-width: 1050px; }.users-heading { margin: 6px 0 17px; display: flex; align-items: end; justify-content: space-between; }.users-heading h2 { margin: 0 0 3px; font-size: 19px; letter-spacing: -.4px; }.users-heading p, .users-note { margin: 0; color: var(--muted); font-size: 10px; }.users-panel { overflow: hidden; border: 1px solid #e5ddeb; border-radius: 9px; background: white; }.users-panel-head, .user-row { display: grid; grid-template-columns: 42px minmax(180px,1fr) 160px 132px 82px 150px; align-items: center; column-gap: 10px; }.users-panel-head { min-height: 39px; padding: 0 16px; background: #faf8fd; border-bottom: 1px solid #ece6f1; color: #83758d; font-size: 8px; font-weight: 700; letter-spacing: .45px; }.users-panel-head span:first-child { grid-column: 1 / 3; }.user-row { min-height: 68px; padding: 8px 16px; border-bottom: 1px solid #f0ebf3; }.user-row:last-child { border-bottom: 0; }.team-avatar { width: 34px; height: 34px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: #eee7ff; color: #5d29a0; font-size: 9px; font-weight: 700; }.team-avatar img { width: 100%; height: 100%; object-fit: cover; }.user-row strong, .user-row small { display: block; }.user-row strong { font-size: 11px; }.user-row small { margin-top: 2px; color: #867b8d; font-size: 9px; }.role-label { color: #553180; font-size: 10px; font-weight: 600; }.login-ready { color: #087346; font-size: 9px; font-weight: 600; }.login-locked { color: #b83249; font-size: 9px; font-weight: 700; }.photo-set, .photo-empty { font-size: 9px; }.photo-set { color: #087346; }.photo-empty { color: #918698; }.user-actions { display: flex; align-items: center; gap: 5px; }.user-edit-button, .user-lock-button, .user-delete-button { padding: 5px 7px; border: 1px solid #ded3e9; border-radius: 6px; background: #fff; color: #6422bd; font: inherit; font-size: 8px; font-weight: 700; cursor: pointer; }.user-edit-button:hover { border-color: #7127d1; background: #faf7ff; }.user-lock-button { border-color: #e7c57f; color: #985900; background: #fffaf0; }.user-delete-button { border-color: #efc3cc; color: #bd4055; background: #fff5f6; }.users-empty { padding: 38px 20px; color: #84798e; text-align: center; font-size: 11px; }.users-note { margin-top: 11px; }

.section-heading { display: flex; align-items: end; justify-content: space-between; margin: 0 1px 11px; }.section-heading h2 { margin: 0 0 2px; font-size: 17px; letter-spacing: -.4px; }.section-heading p { margin: 0; color: var(--muted); font-size: 10px; }.section-heading .updated { font-size: 9px; }.updated span { color: var(--purple); }
.table-panel { overflow: hidden; border: 2px solid #e4d5f5; border-radius: 10px; background: white; box-shadow: 0 18px 38px rgba(72,19,118,.16); }
.legend { height: 42px; padding: 0 15px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); background: #fffdfd; color: #766b7d; font-size: 10px; }.dot { width: 7px; height: 7px; display: inline-block; margin-right: 4px; border-radius: 50%; }.dot.green { background: var(--green); }.dot.orange { background: var(--orange); }.dot.red { background: var(--red); }.benchmark-copy { margin-left: auto; color: #a49aa8; }
.table-scroll { overflow-x: auto; }table { width: 100%; min-width: 1160px; border-collapse: collapse; white-space: nowrap; }th { height: 46px; padding: 0 16px; border-bottom: 1px solid var(--line); background: #fbf9fc; color: #6f6379; text-align: left; font-size: 9px; font-weight: 700; letter-spacing: .55px; }th span { display: block; }th small { display: block; color: #aaa0b0; font-size: 7px; font-weight: 400; letter-spacing: 0; }th.period-30 { background: #f8f3ff; color: #7950ad; }th.period-14 { background: #f3ebff; color: #69409c; }th.period-7 { background: var(--purple); color: white; box-shadow: inset 0 -3px var(--lime); }th.period-7 small { color: #e6d7ff; }th.period-3 { background: #ede4ff; color: #553180; }
tbody tr { border-bottom: 1px solid #f0edf2; cursor: pointer; }tbody tr:last-child { border: 0; }tbody tr:hover { background: #fcfaff; }tbody tr:focus { outline: 2px solid #9a6ce8; outline-offset: -2px; }td { height: 68px; padding: 0 16px; font-size: 12px; }.client-cell { min-width: 195px; display: flex; align-items: center; gap: 9px; }.client-logo { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 7px; font-size: 10px; font-weight: 700; }.client-logo.has-image, .detail-logo.has-image { overflow: hidden; background: #f4f0f7; }.client-logo.has-image img, .detail-logo.has-image img { width: 100%; height: 100%; object-fit: contain; }.client-meta { display: grid; line-height: 1.25; }.client-meta strong { font-size: 13px; font-weight: 700; }.client-meta small { margin-top: 2px; color: var(--muted); font-size: 10px; }.kpi-cell { color: #706579; font: 600 12px 'DM Mono', monospace; }
.cpl-cell { min-width: 112px; height: 68px; border-left: 1px solid rgba(109,40,217,.06); text-align: center; vertical-align: middle; }.cpl-cell strong { display: block; color: #2b2035; font: 700 15px 'DM Mono', monospace; }.cpl-change { display: block; margin-top: 2px; font-size: 8px; font-weight: 700; }.period-cell.green { background: #e7f8ee; }.period-cell.green .cpl-change { color: #087346; }.period-cell.orange { background: #fff1d5; }.period-cell.orange .cpl-change { color: #9a5400; }.period-cell.red { background: #ffe1e7; }.period-cell.red .cpl-change { color: #ae233f; }
.leads-cell strong { display: block; font: 500 12px 'DM Mono', monospace; }.leads-cell span { display: block; margin-top: 1px; color: var(--green); font-size: 9px; font-weight: 600; }.creative-backup-cell { min-width: 112px; }.creative-backup-cell > span { display: block; color: #8a8094; font-size: 8px; }.creative-backup-cell strong { display: block; margin-top: 3px; color: #4a3b52; font: 700 14px 'DM Mono', monospace; }.creative-bank-slots { display: flex; gap: 3px; margin-top: 5px; }.creative-bank-slots i { width: 9px; height: 4px; border-radius: 2px; background: #e7e1eb; }.creative-bank-slots i.filled { background: #8a7998; }.creative-backup-cell.green strong { color: #087346; }.creative-backup-cell.green .creative-bank-slots i.filled { background: #159b68; }.creative-backup-cell.orange strong { color: #a45b10; }.creative-backup-cell.orange .creative-bank-slots i.filled { background: #df9015; }.creative-backup-cell.red strong { color: #b83249; }.creative-backup-cell.red .creative-bank-slots i.filled { background: #de4e66; }.health-text { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; }.health-text i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }.health-text.green { color: var(--green); }.health-text.orange { color: var(--orange); }.health-text.red { color: var(--red); }.more-button { border: 0; background: transparent; color: #998e9d; font-weight: 700; letter-spacing: 1px; cursor: pointer; }.table-footer { height: 37px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: #9b91a0; font-size: 9px; }.table-footer span:first-child { color: #6e6277; font-weight: 600; }.empty { text-align: center; color: var(--muted); }

.client-drawer { position: fixed; z-index: 30; top: 0; right: 0; width: min(720px, 100vw); height: 100vh; overflow-y: auto; background: white; box-shadow: -18px 0 48px rgba(43,17,69,.20); transform: translateX(104%); transition: transform .2s ease; pointer-events: none; }.client-drawer.is-open { transform: translateX(0); pointer-events: auto; }.client-detail { min-height: 100%; padding: 31px; position: relative; }.client-close { position: absolute; top: 17px; right: 19px; z-index: 2; width: 29px; height: 29px; border: 1px solid #e7e1eb; border-radius: 7px; background: white; color: #756b80; font-size: 20px; line-height: 1; cursor: pointer; }.detail-header { padding-right: 39px; margin-bottom: 23px; display: flex; align-items: center; justify-content: space-between; }.detail-client { display: flex; align-items: center; gap: 11px; }.detail-logo { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 9px; font-size: 12px; font-weight: 700; }.detail-header h2 { margin: 0 0 2px; font-size: 19px; letter-spacing: -.5px; }.detail-header p { margin: 0; color: #867c90; font-size: 10px; }
.detail-summary { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 25px; overflow: hidden; border: 1px solid #ece6f1; border-radius: 9px; }.detail-summary > div { min-height: 78px; padding: 13px 16px; display: grid; align-content: center; gap: 2px; border-right: 1px solid #ece6f1; }.detail-summary > div:last-child { border-right: 0; }.detail-summary span { color: #8a8094; font-size: 9px; }.detail-summary strong { font-size: 18px; letter-spacing: -.5px; }.detail-summary small { color: #897d91; font-size: 9px; }.detail-summary > div:first-child small { color: #d14763; font-weight: 600; }.chart-heading { margin-bottom: 9px; display: flex; align-items: end; justify-content: space-between; }.chart-heading h3 { margin: 0 0 1px; font-size: 14px; }.chart-heading p { margin: 0; color: #8a8094; font-size: 10px; }.chart-total { color: var(--purple); font-size: 10px; font-weight: 700; }.lead-chart { height: 250px; padding: 12px 10px 0; border: 1px solid #ece6f1; border-radius: 9px; background: #fcfbfe; }.lead-chart svg { width: 100%; height: 100%; overflow: visible; }.chart-axis { stroke: #e7e1ed; stroke-width: 1; }.chart-line { stroke: #7c3aed; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }.lead-chart circle { fill: #7c3aed; stroke: white; stroke-width: 2; }.chart-labels text { fill: #958a9e; font: 9px Poppins, sans-serif; }.detail-footer { margin-top: 17px; display: flex; align-items: center; justify-content: space-between; color: #8e8498; font-size: 9px; }.detail-actions { display: flex; align-items: center; gap: 13px; }.detail-footer button { border: 0; background: transparent; color: var(--purple); font: 700 10px Poppins, sans-serif; cursor: pointer; }.detail-footer .delete-client { color: #c73f58; }

dialog#settingsDialog { width: min(560px, calc(100% - 30px)); max-height: calc(100vh - 30px); padding: 0; overflow-y: auto; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 12px 35px rgba(43,19,53,.15); }dialog::backdrop { background: rgba(41,20,59,.35); }.settings-panel { position: relative; padding: 25px; }.eyebrow { display: none; }.settings-panel h2 { margin: 0 0 7px; font-size: 18px; }.modal-copy { margin: 0 0 17px; color: var(--muted); font-size: 11px; line-height: 1.55; }.close { position: absolute; top: 8px; right: 11px; border: 0; background: transparent; color: var(--muted); font-size: 22px; cursor: pointer; }.settings-panel label { display: block; margin: 12px 0; font-size: 11px; font-weight: 600; }.settings-panel input { width: 70px; height: 31px; margin: 4px 6px 0 0; padding: 0 7px; border: 1px solid var(--line); border-radius: 5px; font: 11px Poppins, sans-serif; }.settings-panel label > span { color: var(--muted); font-size: 9px; font-weight: 400; }.client-kpi-row { display: grid !important; grid-template-columns: minmax(150px,1fr) 104px 114px; gap: 9px; align-items: end; }.kpi-input { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 3px; }.kpi-input small { grid-column: 1 / -1; color: #8a8094; font-size: 8px; font-weight: 600; }.kpi-input input { width: 100%; margin: 0; }.backup-color-setting { display: flex !important; align-items: center; gap: 7px; color: #65586d; font-size: 10px !important; font-weight: 500 !important; }.backup-color-setting input { width: 14px; height: 14px; margin: 0; accent-color: var(--purple); }.range-inputs { display: inline-flex; align-items: center; }.range-inputs span { margin-right: 6px; color: var(--muted); font-size: 10px; }.save-settings { width: 100%; height: 34px; margin-top: 6px; }
dialog#clientDialog { width: min(470px, calc(100% - 30px)); padding: 0; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 12px 35px rgba(43,19,53,.15); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }.form-grid label { margin: 0 0 13px; }.form-grid input, .form-grid select { width: 100%; margin: 5px 0 0; }.form-grid select { height: 31px; }.form-error { min-height: 16px; margin: 0; color: var(--red); font-size: 10px; }
dialog#metaDialog { width: min(440px, calc(100% - 30px)); padding: 0; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 12px 35px rgba(43,19,53,.15); }.connection-status { min-height: 37px; margin: 0 0 13px; padding: 10px 11px; border: 1px solid #ece6f1; border-radius: 7px; background: #fcfbfe; font-size: 10px; font-weight: 600; }.connection-good { color: #087346; }.connection-warn { color: #a4560c; }.small-copy { font-size: 9px; }.small-copy code { padding: 1px 4px; border-radius: 3px; background: #f0eaf7; color: #5d277f; font-family: 'DM Mono', monospace; }

@media (max-width: 1050px) { main { padding: 29px 25px; } }
@media (max-width: 700px) { .app-shell { padding-left: 0; }.sidebar { display: none; } main { width: 100%; margin: 0; padding: 21px 14px; }.topbar h1 { font-size: 21px; }.top-actions { position: absolute; top: 20px; right: 14px; }.control-row { min-height: 74px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; }.right-controls { width: 100%; }.search { flex: 1; }.portfolio-stats { grid-template-columns: repeat(4, 155px); overflow-x: auto; }.portfolio-stats > div { min-height: 85px; }.benchmark-copy { display: none; }.legend { gap: 9px; }.client-drawer { width: 100vw; }.client-detail { padding: 22px 17px; }.detail-summary { grid-template-columns: 1fr; }.detail-summary > div { border-right: 0; border-bottom: 1px solid #ece6f1; }.detail-summary > div:last-child { border-bottom: 0; }.lead-chart { height: 205px; } }
dialog#creativePreviewDialog { width: min(650px, calc(100vw - 28px)); height: min(86vh, 820px); }.creative-preview { padding: 12px; }.creative-preview #creativePreviewContent { justify-items: center; background: #fff; }.creative-preview .meta-ad-preview { width: min(610px,100%); background: #fff; }.creative-preview-meta { margin-top: 8px; }
.watch-view { max-width: 1450px; }.watch-list.board { grid-template-columns: repeat(auto-fill,minmax(300px,340px)); justify-content: start; gap: 12px; padding: 14px; }.watch-card { grid-template-columns: 96px minmax(0,1fr); min-height: 152px; }.watch-card-media { width: 96px; height: 150px; min-height: 0; align-self: stretch; aspect-ratio: auto; background: #f4f0f7; }.watch-card-media img, .watch-card-media .watch-item-media { object-fit: contain; }.watch-card-body { min-height: 150px; padding: 12px; }.watch-card-title strong { font-size: 11px; }.watch-client-line { margin-top: 6px !important; }.watch-ad-type { margin-top: 6px; font-size: 8px; }.watch-card-metrics { margin: 12px 0 9px; padding: 8px 0; }.watch-card-metrics span { font-size: 8px; }.watch-card-metrics b { font-size: 10px; }.watch-card .watch-remove { height: 23px; font-size: 8px; }
.watch-card-media { position: relative; isolation: isolate; }.watch-card-media .watch-media-blur { position: absolute; inset: -10px; z-index: 0; width: calc(100% + 20px); height: calc(100% + 20px); object-fit: cover; filter: blur(10px); opacity: .38; }.watch-card-media .watch-media-main { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.watch-classification { width: max-content; margin-top: 6px; padding: 2px 5px; display: inline-flex; border-radius: 4px; font-size: 8px; font-weight: 700; line-height: 1.35; }.watch-classification.winner { background: #e8f8ef; color: #087346; }.watch-classification.average { background: #fff2d8; color: #a45b10; }.watch-classification.loser { background: #fff0f2; color: #b83249; }.watch-classification.inconclusive { background: #eee9f4; color: #705784; }.watch-classification.pending { background: #f3f0f5; color: #82758a; }.watch-item .watch-classification { margin-top: 5px; }
.watch-classification-control { width: max-content; margin-top: 7px; position: relative; }.watch-classification-control .watch-classification { margin: 0; border: 0; cursor: pointer; }.watch-classification-control .watch-classification > span { display: inline; }.auto-classification-mark { margin-left: 3px; color: currentColor; font-size: 10px; line-height: 1; }.watch-classification-picker { width: 130px; padding: 6px; position: absolute; z-index: 8; top: calc(100% + 4px); left: 0; display: flex; flex-wrap: wrap; gap: 4px; border: 1px solid #dfd5e7; border-radius: 6px; background: #fff; box-shadow: 0 3px 8px rgba(47,22,65,.12); }.watch-classification-picker .classification-choice { width: auto; height: 22px; padding: 0 6px; border: 0; border-radius: 4px; font: 700 8px Poppins, sans-serif; cursor: pointer; }.watch-classification-picker .classification-choice.winner { background: #e8f8ef; color: #087346; }.watch-classification-picker .classification-choice.average { background: #fff2d8; color: #a45b10; }.watch-classification-picker .classification-choice.loser { background: #fff0f2; color: #b83249; }.watch-classification-picker .classification-choice.inconclusive { background: #eee9f4; color: #705784; }.watch-classification-picker .classification-choice.reset { width: 100%; margin-top: 1px; border-top: 1px solid #eee7f1; border-radius: 3px; background: transparent; color: #705784; text-align: left; }.watch-classification-picker .classification-choice:hover { filter: brightness(.97); }.watch-item .watch-classification-control { max-width: 175px; }
.watch-card:has(.watch-classification-picker:not([hidden])) { overflow: visible; z-index: 4; }
.watch-list-panel:has(.watch-classification-picker:not([hidden])) { overflow: visible; }
.classification-guide-button { height: 29px; padding: 0 8px; border: 1px solid #ded5e6; border-radius: 6px; background: #fff; color: #604576; font: 600 8px Poppins, sans-serif; cursor: pointer; }.classification-guide-button:hover { border-color: #b99add; background: #faf7ff; }.classification-guide { width: min(430px,calc(100vw - 30px)); padding: 22px; position: relative; }.classification-guide h2 { margin: 0; color: #332046; font-size: 16px; letter-spacing: -.35px; }.classification-guide > p { margin: 7px 0 16px; color: #7e7188; font-size: 10px; line-height: 1.55; }.classification-guide-rules { overflow: hidden; border: 1px solid #e8e0ed; border-radius: 7px; }.classification-guide-rules > div { min-height: 49px; padding: 8px 10px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #eee8f1; }.classification-guide-rules > div:last-child { border-bottom: 0; }.classification-guide-rules .watch-classification { margin: 0; flex: none; }.classification-guide-rules p { margin: 0; color: #685c71; font-size: 9px; line-height: 1.4; }.classification-guide .classification-guide-note { margin-bottom: 0; font-size: 9px; }
dialog#classificationGuideDialog { padding: 0; border: 1px solid #e1d8e8; border-radius: 8px; box-shadow: 0 8px 24px rgba(43,19,53,.14); }
.classification-rules-button { height: 29px; padding: 0 9px; border: 1px solid #d8c8ec; border-radius: 5px; background: #fff; color: #59218e; font: 700 9px Poppins, sans-serif; cursor: pointer; }
.classification-rules-button:hover { border-color: #9d76c5; background: #faf7fe; }
dialog#classificationRulesDialog { width: min(470px, calc(100vw - 30px)); padding: 0; border: 1px solid #e1d8e8; border-radius: 8px; box-shadow: 0 8px 24px rgba(43,19,53,.14); }
.classification-rules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.classification-rules-grid label { margin: 0 0 12px; }
.classification-rules-grid input { width: 100%; margin: 5px 0 0; }
.classification-rules-guardrail { margin: 2px 0 10px; color: #776a80; font-size: 9px; line-height: 1.45; }
.creative-section-tabs { height: 38px; margin-bottom: 14px; display: flex; align-items: end; gap: 16px; border-bottom: 1px solid #e7dfeb; }.creative-section-tabs button { height: 38px; padding: 0; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #83758d; font: 600 10px Poppins, sans-serif; cursor: pointer; }.creative-section-tabs button.active { border-bottom-color: #6930ad; color: #41245a; }.learnings-toolbar { min-height: 55px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #e5ddeb; border-radius: 8px; background: #fff; }.learnings-toolbar h2 { margin: 0; color: #332046; font-size: 13px; }.learnings-toolbar p { margin: 3px 0 0; color: #81758a; font-size: 9px; }.learnings-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }.learning-card { min-width: 0; padding: 13px; border: 1px solid #e5ddeb; border-radius: 8px; background: #fff; }.learning-card-head { display: flex; align-items: start; justify-content: space-between; gap: 8px; }.learning-card-head strong { display: block; overflow: hidden; color: #352047; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.learning-card-head small { display: block; margin-top: 4px; overflow: hidden; color: #81758a; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.learning-card-head .watch-classification { margin: 0; flex: none; }.learning-metrics { margin: 12px 0 10px; padding: 9px 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; border-top: 1px solid #f0ebf3; border-bottom: 1px solid #f0ebf3; }.learning-metrics span { display: grid; gap: 3px; color: #918598; font-size: 8px; }.learning-metrics b { color: #483554; font: 600 10px 'DM Mono', monospace; }.learning-angle { margin: 0 0 9px; color: #66596e; font-size: 9px; }.learning-card footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #897c90; font-size: 8px; }.learning-links { display: flex; gap: 7px; }.learning-links a { color: #6532a1; font-weight: 700; text-decoration: none; }.learning-links a:hover { text-decoration: underline; }@media (max-width: 850px) { .learnings-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }@media (max-width: 520px) { .learnings-toolbar { padding: 12px; align-items: start; flex-direction: column; gap: 9px; }.learnings-grid { grid-template-columns: 1fr; } }
.watch-list.board { grid-template-columns: repeat(4,minmax(0,1fr)); }.watch-card { grid-template-columns: 82px minmax(0,1fr); }.watch-card-media { width: 82px; }.watch-card-body { padding: 10px; }.watch-card-title strong { font-size: 10px; }.watch-card-metrics { margin: 10px 0 8px; }.watch-card-metrics b { font-size: 9px; }@media (max-width: 850px) { .watch-list.board { grid-template-columns: repeat(2,minmax(0,1fr)); } }@media (max-width: 520px) { .watch-list.board { grid-template-columns: 1fr; } }

/* Creative Learnings deliberately mirrors Watch: the media remains easy to scan while the saved result stays the focus. */
.learnings-toolbar-actions { display: flex; align-items: center; gap: 10px; }.learnings-grid.board { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }.learnings-grid.board .learning-card { min-width: 0; padding: 0; display: grid; grid-template-columns: 82px minmax(0,1fr); overflow: hidden; border-radius: 8px; cursor: pointer; }.learnings-grid.board .learning-card:hover { border-color: #c9afe4; }.learning-card-media { min-height: 150px; position: relative; isolation: isolate; overflow: hidden; background: #f0ebf5; }.learning-media-blur { position: absolute; inset: -10px; z-index: 0; width: calc(100% + 20px); height: calc(100% + 20px); object-fit: cover; filter: blur(10px); opacity: .38; }.learning-media-main { width: 100%; height: 100%; position: relative; z-index: 1; display: block; object-fit: contain; }.learning-media-empty { width: 100%; height: 100%; display: grid; place-items: center; color: #7145a3; font-size: 17px; }.learning-card-body { min-width: 0; padding: 10px; }.learning-card-head { align-items: flex-start; }.learning-card-head strong { min-width: 0; font-size: 10px; line-height: 1.35; }.learning-card-head .watch-classification { margin: 0 0 0 4px; flex: none; }.learning-client-line { display: flex; align-items: center; gap: 4px; margin-top: 5px; overflow: hidden; color: #877a8e; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.learning-client-line .watch-client-logo, .learning-row-title .watch-client-logo { width: 14px; height: 14px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 3px; object-fit: cover; background: #eee7ff; color: #6734a5; font-size: 5px; font-weight: 700; }.learning-ad-type { display: block; margin-top: 5px; color: #806f8d; font-size: 8px; font-weight: 600; }.learnings-grid.board .learning-metrics { margin: 10px 0 8px; padding: 7px 0; }.learnings-grid.board .learning-metrics span { font-size: 7px; }.learnings-grid.board .learning-metrics b { font-size: 9px; }.learnings-grid.board .learning-angle { margin: 0 0 7px; overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.learnings-grid.board .learning-card footer { font-size: 7px; }.learnings-grid.board .learning-links { gap: 5px; }.learnings-grid.board .learning-links a { font-size: 7px; }.learnings-grid.table { display: block; overflow: hidden; border: 1px solid #e5ddeb; border-radius: 8px; background: #fff; }.learning-table-head, .learning-row { display: grid; grid-template-columns: 52px minmax(190px,1fr) 86px 92px 60px 105px 72px; align-items: center; column-gap: 10px; }.learning-table-head { min-height: 41px; padding: 0 14px; border-bottom: 1px solid #ece6f1; background: #faf8fd; color: #83758d; font-size: 8px; font-weight: 700; letter-spacing: .45px; }.learning-table-head span:first-child { grid-column: 1 / 3; }.learning-row { min-height: 74px; padding: 8px 14px; border-bottom: 1px solid #eee8f2; cursor: pointer; }.learning-row:last-child { border-bottom: 0; }.learning-row:hover { background: #fcfaff; }.learning-row:focus, .learning-card:focus { outline: 2px solid #9a6ce8; outline-offset: -2px; }.learning-table-media { width: 52px; height: 52px; display: grid; place-items: center; overflow: hidden; border-radius: 5px; background: #f0ebf5; color: #7145a3; }.learning-table-media img { width: 100%; height: 100%; object-fit: cover; }.learning-row-title { min-width: 0; }.learning-row-title strong, .learning-row-title small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.learning-row-title strong { color: #332045; font-size: 10px; }.learning-row-title small { display: flex; align-items: center; gap: 4px; margin-top: 4px; color: #86798d; font-size: 8px; }.learning-row > b { color: #51415e; font: 600 10px 'DM Mono', monospace; }.learning-row .watch-classification { margin: 0; }.learning-row time { color: #877a8e; font-size: 8px; }.learnings-grid.table .users-empty { border: 0; }
@media (max-width: 1000px) { .learnings-grid.board { grid-template-columns: repeat(2,minmax(0,1fr)); }.learnings-grid.table { overflow-x: auto; }.learning-table-head, .learning-row { min-width: 680px; } }
@media (max-width: 620px) { .learnings-toolbar { align-items: flex-start; padding: 12px; }.learnings-toolbar-actions { width: 100%; align-items: stretch; flex-direction: column; }.learnings-toolbar-actions .creative-filters { width: 100%; }.learnings-toolbar-actions select { flex: 1; }.learnings-grid.board { grid-template-columns: 1fr; }.learning-card-media { min-height: 138px; } }

/* Creative Pipeline */
.pipeline-view { max-width: 1240px; }.pipeline-tabs { height: 38px; margin-bottom: 14px; display: flex; align-items: end; gap: 16px; border-bottom: 1px solid #e7dfeb; }.pipeline-tabs button { height: 38px; padding: 0; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #83758d; font: 600 10px Poppins, sans-serif; cursor: pointer; }.pipeline-tabs button.active { border-bottom-color: #6930ad; color: #41245a; }.pipeline-tabs button:disabled { cursor: default; opacity: .6; }.pipeline-tabs button span { margin-left: 4px; font-size: 8px; font-weight: 500; }.pipeline-toolbar { min-height: 60px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #e5ddeb; border-radius: 8px; background: #fff; }.pipeline-toolbar h2 { margin: 0; color: #332046; font-size: 14px; }.pipeline-toolbar p { margin: 3px 0 0; color: #81758a; font-size: 9px; }.pipeline-board { margin-top: 15px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; align-items: start; }.pipeline-column { min-height: 330px; overflow: hidden; border: 1px solid #e5ddeb; border-radius: 8px; background: #fcfbfd; }.pipeline-column > header { height: 43px; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ece6f1; background: #fff; }.pipeline-column > header strong { color: #362148; font-size: 11px; }.pipeline-column > header span { min-width: 18px; height: 18px; display: grid; place-items: center; border-radius: 4px; background: #f0eaf7; color: #65427c; font: 600 8px 'DM Mono', monospace; }.pipeline-review-column > header span { background: #f2eef5; color: #8b7d94; }.pipeline-card-list { min-height: 285px; padding: 9px; display: grid; align-content: start; gap: 9px; }.pipeline-card { min-width: 0; padding: 10px; border: 1px solid #e8e0ed; border-radius: 7px; background: #fff; cursor: pointer; }.pipeline-card:hover { border-color: #c9afe4; }.pipeline-card:focus { outline: 2px solid #9a6ce8; outline-offset: -2px; }.pipeline-card-top { margin-bottom: 7px; display: flex; align-items: center; justify-content: space-between; }.pipeline-client-mark { width: 22px; height: 22px; display: grid; place-items: center; overflow: hidden; border-radius: 5px; background: #eee7ff; color: #6734a5; font-size: 7px; font-weight: 700; }.pipeline-client-mark img { width: 100%; height: 100%; object-fit: contain; }.pipeline-edit { width: 21px; height: 21px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #93879a; font-weight: 700; letter-spacing: 1px; cursor: pointer; }.pipeline-edit:hover { background: #f4eff8; color: #5c2c91; }.pipeline-card > strong { display: block; overflow: hidden; color: #362148; font-size: 11px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }.pipeline-client-name { margin: 3px 0 0; overflow: hidden; color: #84788d; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.pipeline-card-meta { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 4px; }.pipeline-card-meta span { max-width: 100%; padding: 2px 5px; overflow: hidden; border-radius: 4px; background: #f5f1f8; color: #675a70; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.pipeline-card-meta span:first-child { background: #eee7fa; color: #63359a; font-weight: 600; }.pipeline-notes { margin: 8px 0 0; color: #6e6277; font-size: 8px; line-height: 1.45; }.pipeline-inspiration { display: inline-block; margin-top: 8px; color: #6330a1; font-size: 8px; font-weight: 700; text-decoration: none; }.pipeline-inspiration:hover { text-decoration: underline; }.pipeline-card footer { margin-top: 10px; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 6px; border-top: 1px solid #f0ebf3; color: #93889b; font-size: 7px; }.pipeline-move { padding: 0; border: 0; background: transparent; color: #6530a3; font: 700 8px Poppins, sans-serif; cursor: pointer; white-space: nowrap; }.pipeline-move:hover { color: #3f146e; text-decoration: underline; }.pipeline-empty { padding: 28px 13px; color: #918698; text-align: center; font-size: 9px; }.pipeline-form-wide { grid-column: 1 / -1; }.form-grid textarea { width: 100%; margin-top: 5px; padding: 8px; resize: vertical; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); font: 11px Poppins, sans-serif; }
@media (max-width: 850px) { .pipeline-board { grid-template-columns: 1fr; }.pipeline-column { min-height: auto; }.pipeline-card-list { min-height: 90px; } }
@media (max-width: 620px) { .pipeline-toolbar { padding: 12px; align-items: flex-start; gap: 10px; flex-direction: column; }.pipeline-toolbar .refresh-all-button { width: 100%; } }

/* Pipeline card hierarchy and interaction states */
.pipeline-column[data-pipeline-drop="idea"] > header { background: #f5effc; }.pipeline-column[data-pipeline-drop="creating"] > header { background: #fff7e7; }.pipeline-card.idea { border-top: 3px solid #a979d2; }.pipeline-card.creating { border-top: 3px solid #df9c32; }.pipeline-card[draggable="true"] { cursor: grab; }.pipeline-card.is-dragging { opacity: .45; }.pipeline-column.is-drag-over { border-color: #9d75c8; background: #fbf7fe; box-shadow: inset 0 0 0 1px #e3d5f1; }.pipeline-owner { min-width: 0; display: flex; align-items: center; gap: 5px; overflow: hidden; font-size: 8px; }.pipeline-owner i { width: 17px; height: 17px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: #ede5f5; color: #613a81; font: 700 6px Poppins, sans-serif; font-style: normal; }.pipeline-owner img { width: 100%; height: 100%; object-fit: cover; }.pipeline-inspiration { min-height: 22px; margin-top: 8px; padding: 0 7px; display: inline-flex; align-items: center; border: 1px solid #d7c6e8; border-radius: 999px; background: #faf7fe; color: #6330a1; font-size: 8px; font-weight: 700; text-decoration: none; }.pipeline-inspiration:hover { border-color: #a680c7; background: #f3ecfb; text-decoration: none; }
.pipeline-column[data-pipeline-drop="idea"] { background: #f7f7f8; }.pipeline-column[data-pipeline-drop="idea"] > header { background: #eeeeef; }.pipeline-column[data-pipeline-drop="creating"] { background: #f4fbf7; }.pipeline-column[data-pipeline-drop="creating"] > header { background: #e5f7ec; }.pipeline-review-column { background: #fff9ef; }.pipeline-review-column > header { background: #fff0d5; }.pipeline-card.idea { border-top-color: #a0a0a7; }.pipeline-card.creating { border-top-color: #24a36b; }.pipeline-card.review { border-top: 3px solid #df941d; }.pipeline-column.is-drag-over { border-color: #5d9f78; background: #ecf8f0; box-shadow: inset 0 0 0 1px #ccebd8; }.pipeline-inspiration { min-height: 25px; padding: 0 8px; gap: 5px; border: 0; border-radius: 6px; background: #6c2ec2; color: #fff; font-size: 8px; font-weight: 700; }.pipeline-inspiration:hover { background: #57229c; color: #fff; }.pipeline-inspiration span { color: #fff; font-size: 10px; line-height: 1; }

/* Pipeline: compact ClickUp-inspired task board */
.pipeline-view { max-width: 1180px; }
.pipeline-toolbar { min-height: 56px; padding: 0 14px; }
.pipeline-toolbar p { display: none; }
.pipeline-board { grid-template-columns: repeat(3, minmax(250px, 330px)); justify-content: start; gap: 12px; }
.pipeline-column { min-height: 300px; overflow: visible; border: 0; border-radius: 9px; }
.pipeline-column > header { height: 40px; padding: 0 10px; border-bottom: 0; background: transparent !important; }
.pipeline-column[data-pipeline-stage="idea"] { background: #f1f1f2; }
.pipeline-column[data-pipeline-stage="creating"] { background: #edf8f1; }
.pipeline-column[data-pipeline-stage="review"] { background: #fff6e8; }
.pipeline-stage-label { min-height: 21px; padding: 0 6px; display: inline-flex; align-items: center; gap: 4px; border-radius: 5px; color: #57545a !important; background: #e1e1e3; font-size: 9px !important; font-weight: 700; letter-spacing: .25px; text-transform: uppercase; }
.pipeline-stage-emoji { display: inline-block; margin-left: 2px; color: initial; font: normal 11px/1 "Apple Color Emoji", "Segoe UI Emoji", sans-serif; }
.pipeline-stage-label i { width: 11px; height: 11px; box-sizing: border-box; display: inline-block; border: 1px dashed currentColor; border-radius: 50%; }
.pipeline-column[data-pipeline-stage="creating"] .pipeline-stage-label { color: #087346 !important; background: #d9f1e1; }
.pipeline-column[data-pipeline-stage="creating"] .pipeline-stage-label i { border-style: solid; background: #159b68; box-shadow: inset 0 0 0 2px #d9f1e1; }
.pipeline-column[data-pipeline-stage="review"] .pipeline-stage-label { color: #975500 !important; background: #ffebc7; }
.pipeline-column[data-pipeline-stage="review"] .pipeline-stage-label i { border-style: solid; background: #df9015; box-shadow: inset 0 0 0 2px #ffebc7; }
.pipeline-column > header > span { min-width: auto; height: auto; padding: 0; background: transparent !important; color: #77737a !important; font-size: 10px; }
.pipeline-card-list { min-height: 250px; padding: 0 8px 9px; gap: 8px; }
.pipeline-card { padding: 11px; border: 1px solid #dfdfe3; border-top-width: 1px !important; border-radius: 9px; box-shadow: 0 1px 2px rgba(36, 29, 45, .06); }
.pipeline-card.idea, .pipeline-card.creating, .pipeline-card.review { border-top-color: #dfdfe3; }
.pipeline-card:hover { border-color: #bda4da; box-shadow: 0 2px 5px rgba(36, 29, 45, .09); }
.pipeline-card-top { margin-bottom: 8px; }
.pipeline-client-mark { width: 20px; height: 20px; border-radius: 4px; }
.pipeline-edit { color: #8a858f; }
.pipeline-card > strong { font-size: 11px; line-height: 1.4; }
.pipeline-client-name { margin-top: 4px; }
.pipeline-card-meta { margin-top: 10px; }
.pipeline-card-meta span { border-radius: 4px; background: #eeeaf3; color: #60596a; }
.pipeline-card-meta span:first-child { background: #eee7fa; color: #63359a; }
.pipeline-card footer { margin-top: 10px; padding-top: 9px; }
.pipeline-move { color: #62449a; }
.pipeline-card[draggable="true"] { cursor: grab; }
.pipeline-card[draggable="true"]:active { cursor: grabbing; }
.pipeline-column.is-drag-over { outline: 1px solid #74b98f; outline-offset: -1px; border-color: transparent; background: #e3f5e9; box-shadow: none; }
.pipeline-card-title-row { margin-bottom: 6px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.pipeline-card-title-row > strong { min-width: 0; flex: 1; }
.pipeline-card-title-row .pipeline-edit { flex: none; margin-top: -3px; }
.pipeline-client-name { display: flex; align-items: center; gap: 5px; }
.pipeline-client-name .pipeline-client-mark { width: 16px; height: 16px; flex: none; border-radius: 3px; }
.pipeline-dialog-actions { margin-top: 13px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pipeline-dialog-actions .save-settings { width: auto; min-width: 172px; margin: 0; }
.pipeline-dialog-delete { min-height: 31px; padding: 0 10px; border: 1px solid #edbdc8; border-radius: 5px; background: #fff; color: #b83249; font: 700 10px Poppins, sans-serif; cursor: pointer; }
.pipeline-dialog-delete:hover { border-color: #d76c80; background: #fff4f6; }
dialog#pipelineDeleteDialog { width: min(360px, calc(100vw - 30px)); padding: 0; border: 1px solid #e5ddeb; border-radius: 8px; box-shadow: 0 8px 24px rgba(43,19,53,.14); }
.pipeline-delete-panel { padding: 20px; position: relative; }
.pipeline-delete-panel h2 { margin: 0; color: #332046; font-size: 15px; }
.pipeline-delete-panel p { margin: 8px 0 18px; color: #766a7d; font-size: 10px; line-height: 1.5; }
.pipeline-delete-panel p strong { color: #4a304f; }
.pipeline-delete-actions { display: flex; justify-content: flex-end; gap: 8px; }
.pipeline-delete-actions button { height: 31px; padding: 0 11px; border: 1px solid #ded6e5; border-radius: 5px; background: #fff; color: #604d68; font: 700 10px Poppins, sans-serif; cursor: pointer; }
.pipeline-delete-actions #confirmPipelineDelete { border-color: #c33b53; background: #c33b53; color: #fff; }
.pipeline-delete-actions #confirmPipelineDelete:hover { background: #aa2b43; }
.pipeline-owner-field { position: relative; margin: 0 0 13px; color: #2f2637; font-size: 10px; font-weight: 700; }
.pipeline-owner-field > span { display: block; }
.pipeline-owner-trigger { width: 100%; height: 31px; margin-top: 5px; padding: 0 8px; display: flex; align-items: center; gap: 7px; border: 1px solid #e2dae8; border-radius: 5px; background: #fff; color: #5f5369; font: 600 9px Poppins, sans-serif; text-align: left; cursor: pointer; }
.pipeline-owner-trigger:hover, .pipeline-owner-trigger[aria-expanded="true"] { border-color: #a989cc; }
.pipeline-owner-trigger > :last-child { margin-left: auto; color: #7d7086; font-size: 11px; }
.pipeline-owner-trigger-avatar, .pipeline-owner-option i { width: 19px; height: 19px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: #eee7f7; color: #643a8a; font: 700 7px Poppins, sans-serif; font-style: normal; }
.pipeline-owner-trigger-avatar img, .pipeline-owner-option i img { width: 100%; height: 100%; object-fit: cover; }
.pipeline-owner-trigger-copy { min-width: 0; display: grid; gap: 0; }
.pipeline-owner-trigger-copy strong, .pipeline-owner-trigger-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-owner-trigger-copy strong { color: #4a3a55; font-size: 9px; }
.pipeline-owner-trigger-copy small { color: #8a7d91; font-size: 7px; font-weight: 500; }
.pipeline-owner-menu { width: 100%; padding: 7px; position: absolute; z-index: 12; top: calc(100% - 8px); left: 0; border: 1px solid #ded5e6; border-radius: 6px; background: #fff; box-shadow: 0 4px 12px rgba(45,29,55,.12); }
.pipeline-owner-menu input { width: 100%; height: 28px; margin: 0 0 5px; padding: 0 8px; border: 1px solid #e3dbe9; border-radius: 4px; color: #4f4059; font: 9px Poppins, sans-serif; }
.pipeline-owner-option { width: 100%; min-height: 37px; padding: 5px; display: flex; align-items: center; gap: 7px; border: 0; border-radius: 4px; background: transparent; color: #42334d; text-align: left; cursor: pointer; }
.pipeline-owner-option:hover, .pipeline-owner-option.selected { background: #f4eff9; }
.pipeline-owner-option > span { min-width: 0; display: grid; gap: 1px; }
.pipeline-owner-option strong, .pipeline-owner-option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-owner-option strong { font: 600 9px Poppins, sans-serif; }
.pipeline-owner-option small { color: #8a7d91; font: 8px Poppins, sans-serif; }
.pipeline-owner-option b { margin-left: auto; color: #6230a2; font-size: 10px; }
.pipeline-owner-empty { margin: 7px 3px 2px; color: #897b91; font-size: 8px; font-weight: 500; }
.pipeline-inspiration span { font-size: 7px; }
.pipeline-board { grid-template-columns: repeat(4, minmax(190px, 1fr)); justify-content: stretch; }
.pipeline-hold-column { background: #173b66; }
.pipeline-hold-column > header { background: transparent !important; }
.pipeline-hold-column .pipeline-stage-label { background: #285383; color: #f5f8fe !important; }
.pipeline-hold-column .pipeline-stage-label i { border-style: solid; background: #84a8d3; box-shadow: inset 0 0 0 2px #285383; }
.pipeline-hold-column > header > span { color: #d8e6f8 !important; }
.pipeline-hold-column .pipeline-card-list { min-height: 250px; }
.pipeline-hold-column .pipeline-empty { color: #ccdaec; }
.pipeline-collapse { width: 21px; height: 21px; padding: 0; border: 1px solid #456a94; border-radius: 4px; background: transparent; color: #e9f1fb; font-size: 15px; line-height: 1; cursor: pointer; }
.pipeline-collapse:hover { background: #285383; }
.pipeline-board.has-collapsed-hold { grid-template-columns: repeat(2, minmax(190px, 1fr)) 40px minmax(190px, 1fr); }
.pipeline-hold-column.is-collapsed { min-width: 40px; overflow: hidden; }
.pipeline-hold-column.is-collapsed > header { height: 300px; padding: 8px; align-items: center; justify-content: flex-start; flex-direction: column; gap: 8px; }
.pipeline-hold-column.is-collapsed .pipeline-stage-label { writing-mode: vertical-rl; }
.pipeline-hold-column.is-collapsed .pipeline-card-list { display: none; }
@media (max-width: 1050px) { .pipeline-board { grid-template-columns: repeat(2, minmax(250px, 1fr)); }.pipeline-board.has-collapsed-hold { grid-template-columns: minmax(250px, 1fr) 40px minmax(250px, 1fr); }.pipeline-review-column { grid-column: 1; } }
.pipeline-hold-column { background: #eaf4ff; }
.pipeline-hold-column .pipeline-hold-heading { display: flex; align-items: center; gap: 7px; }
.pipeline-hold-column .pipeline-stage-label { background: #4f74d8; color: #fff !important; }
.pipeline-hold-column .pipeline-stage-label i { display: grid; place-items: center; border: 0; background: #fff; box-shadow: none; color: #4f74d8; }
.pipeline-hold-column .pipeline-stage-label i::after { content: '✓'; font-size: 8px; font-weight: 800; }
.pipeline-hold-column .pipeline-hold-heading > span { min-width: auto; height: auto; padding: 0; background: transparent !important; color: #597096 !important; font: 700 10px 'DM Mono', monospace; }
.pipeline-hold-column .pipeline-empty { color: #657fa5; }
.pipeline-collapse { display: grid; place-items: center; border-color: #bfd0e6; background: #f7fbff; color: #557197; }
.pipeline-collapse:hover { background: #dceafb; }
.pipeline-collapse .pipeline-collapse-copy { display: none; }
.pipeline-hold-column.is-collapsed { min-height: 118px; background: #f0f4f9; }
.pipeline-hold-column.is-collapsed > header { height: 118px; padding: 6px; display: grid; place-items: start center; }
.pipeline-hold-column.is-collapsed .pipeline-hold-heading { display: none; }
.pipeline-hold-column.is-collapsed .pipeline-collapse { width: 30px; height: 106px; padding: 6px 0; align-content: start; gap: 7px; border: 0; background: #e5ebf2; color: #6f7d8d; }
.pipeline-hold-column.is-collapsed .pipeline-collapse-icon { font-size: 15px; line-height: 1; }
.pipeline-hold-column.is-collapsed .pipeline-collapse-copy { display: block; writing-mode: vertical-rl; color: #6f7d8d; font: 600 9px Poppins, sans-serif; }
.pipeline-hold-column.is-collapsed .pipeline-collapse-copy b { font: 700 10px 'DM Mono', monospace; }
.pipeline-hold-column .pipeline-stage-label { background: #dceafb; color: #4b6688 !important; }
.pipeline-hold-column .pipeline-stage-label i { border: 1px dashed #6f89a9; background: transparent; color: inherit; }
.pipeline-hold-column .pipeline-stage-label i::after { content: none; }
.pipeline-hold-column.is-collapsed { width: 40px; min-width: 0; min-height: 118px; background: #e5ebf2; border-radius: 8px; }
.pipeline-hold-column.is-collapsed > header { width: 100%; height: 118px; padding: 0; }
.pipeline-hold-column.is-collapsed .pipeline-collapse { width: 100%; height: 100%; padding: 7px 0; background: transparent; }
@media (max-width: 850px) { .pipeline-board { grid-template-columns: repeat(2, minmax(250px, 1fr)); } }
@media (max-width: 620px) { .pipeline-board { grid-template-columns: 1fr; } }

/* Collapsed Hold remains a compact, identifiable lane. */
.pipeline-column { transition: background-color 120ms ease; }
.pipeline-column.is-drag-over { outline: 0; border-color: transparent; box-shadow: none; }
.pipeline-column[data-pipeline-stage="idea"].is-drag-over { background: #e8e8ea; }
.pipeline-column[data-pipeline-stage="creating"].is-drag-over { background: #cdebd8; }
.pipeline-hold-column:not(.is-collapsed).is-drag-over { background: #dcecfb; }
.pipeline-hold-column.is-collapsed {
  width: 48px;
  min-width: 48px;
  min-height: 300px;
  overflow: hidden;
  background: #eaf4ff;
  border: 0;
  border-radius: 9px;
}
.pipeline-board.has-collapsed-hold { grid-template-columns: repeat(2, minmax(190px, 1fr)) 48px minmax(190px, 1fr); }
.pipeline-hold-column.is-collapsed > header {
  width: 48px;
  height: 60px;
  min-height: 60px;
  padding: 0;
  display: grid;
  place-items: center;
}
.pipeline-hold-column.is-collapsed .pipeline-hold-heading,
.pipeline-hold-column.is-collapsed .pipeline-card-list { display: none; }
.pipeline-hold-column.is-collapsed .pipeline-collapse {
  width: 48px;
  height: 60px;
  padding: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #7d69a1;
}
.pipeline-hold-column.is-collapsed .pipeline-collapse:hover { background: #e1effc; color: #5e3985; }
.pipeline-hold-column.is-collapsed .pipeline-collapse-icon { font-size: 15px; line-height: 1; }
.pipeline-hold-column.is-collapsed .pipeline-collapse-copy { display: none; }
.pipeline-hold-column.is-collapsed .pipeline-collapse::after { content: 'HOLD'; color: #617999; font: 700 7px Poppins, sans-serif; letter-spacing: .35px; line-height: 1; }
@media (max-width: 1050px) { .pipeline-board.has-collapsed-hold { grid-template-columns: minmax(250px, 1fr) 48px minmax(250px, 1fr); } }

/* Review handoff actions stay within the existing pipeline card pattern. */
.pipeline-card.review { border-color: #ead7b5; }
.pipeline-resources { margin-top: 9px; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.pipeline-resource { min-height: 24px; padding: 0 7px; display: inline-flex; align-items: center; gap: 4px; border-radius: 5px; font-size: 8px; font-weight: 700; text-decoration: none; }
.pipeline-resource.inspiration { background: #f3edf9; color: #67359a; }
.pipeline-resource.shipped { background: #2b9d72; color: #fff; }
.pipeline-resource.missing { background: #f5f2f6; color: #94899a; }
.pipeline-resource:hover { text-decoration: none; filter: brightness(.98); }
.pipeline-submit-review { min-height: 25px; margin-top: 9px; padding: 0 8px; display: inline-flex; align-items: center; border: 1px solid #edcc91; border-radius: 5px; background: #fff7e8; color: #985900; font: 700 8px Poppins, sans-serif; cursor: pointer; }
.pipeline-inspiration + .pipeline-submit-review { margin-top: 8px; margin-left: 5px; vertical-align: top; }
.pipeline-submit-review::after { content: '›'; margin-left: 5px; font-size: 11px; line-height: 1; }
.pipeline-submit-review:hover { border-color: #d9a94a; background: #ffefcf; }
.pipeline-feedback { margin: 9px 0 0; padding: 7px; border-left: 2px solid #d18a28; background: #fff8ea; color: #765a31; font-size: 8px; line-height: 1.45; }
.pipeline-feedback strong { display: block; margin-bottom: 2px; color: #985900; font-size: 8px; }
.pipeline-review-actions { margin-top: 9px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; }
.pipeline-review-actions button { min-height: 26px; padding: 0 4px; border: 1px solid #ddd5e3; border-radius: 5px; background: #fff; color: #685a70; font: 700 7px Poppins, sans-serif; cursor: pointer; }
.pipeline-review-actions button[data-pipeline-review="approve"] { border-color: #8ac5a0; background: #edf9f1; color: #087346; }
.pipeline-review-actions button[data-pipeline-review="changes"] { border-color: #e7c57f; background: #fff8e8; color: #985900; }
.pipeline-review-actions button[data-pipeline-review="reject"] { border-color: #eab8c2; background: #fff5f6; color: #b83249; }

dialog#pipelineSubmitReviewDialog, dialog#pipelineFeedbackDialog, dialog#pipelineMarkLiveDialog { width: min(460px, calc(100vw - 30px)); padding: 0; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(43,19,53,.14); }
#pipelineSubmitReviewForm, #pipelineFeedbackForm, #pipelineMarkLiveForm { padding: 22px; }
#pipelineSubmitReviewForm > label, #pipelineFeedbackForm > label, #pipelineMarkLiveForm > label { margin: 16px 0 0; display: grid; gap: 6px; }
#pipelineSubmitReviewForm input, #pipelineFeedbackForm textarea, #pipelineMarkLiveForm input { width: 100%; margin: 0; box-sizing: border-box; }
#pipelineSubmitReviewForm input { height: 34px; }
#pipelineFeedbackForm textarea { min-height: 86px; padding: 8px; resize: vertical; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); font: 11px Poppins, sans-serif; }
#pipelineSubmitReviewForm .form-error, #pipelineFeedbackForm .form-error { margin-top: 8px; }
#pipelineSubmitReviewForm .save-settings, #pipelineFeedbackForm .save-settings { margin-top: 10px; }
.pipeline-mark-live-actions { margin-top: 14px; display: flex; justify-content: flex-end; gap: 8px; }
.pipeline-mark-live-actions button[type="button"] { min-height: 34px; padding: 0 12px; border: 1px solid #dcd4e4; border-radius: 5px; background: #fff; color: #65596e; font: 700 9px Poppins, sans-serif; cursor: pointer; }
.pipeline-mark-live-actions .save-settings { width: auto; min-width: 90px; margin: 0; }
.pipeline-review-notice { min-width: 230px; padding: 10px 12px; position: fixed; z-index: 30; top: 18px; right: 18px; display: grid; gap: 2px; border: 1px solid #e7c57f; border-radius: 7px; background: #fff8e8; color: #765a31; box-shadow: 0 3px 10px rgba(43,19,53,.1); }
.pipeline-review-notice strong { color: #985900; font-size: 10px; }
.pipeline-review-notice span { font-size: 9px; }

/* Creative Bank: inventory view over the approved pipeline records. */
.creative-bank { margin-top: 15px; }
.bank-toolbar { min-height: 56px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #e5ddeb; border-radius: 8px; background: #fff; }
.bank-toolbar h2 { margin: 0; color: #332046; font-size: 14px; }
.bank-toolbar p { margin: 3px 0 0; color: #81758a; font-size: 9px; }
.bank-toolbar-controls { display: flex; align-items: center; gap: 12px; }.bank-toolbar select { width: 185px; height: 31px; padding: 0 8px; border: 1px solid #e2dae8; border-radius: 5px; background: #fff; color: #5f5369; font: 9px Poppins, sans-serif; }.bank-summary { min-width: 72px; padding-right: 12px; display: grid; gap: 0; border-right: 1px solid #eee8f2; text-align: right; }.bank-summary strong { color: #169167; font: 700 15px 'DM Mono', monospace; }.bank-summary span { color: #84788d; font-size: 7px; font-weight: 600; }
.bank-client-section { margin-top: 12px; overflow: hidden; border: 1px solid #e5ddeb; border-radius: 8px; background: #fcfbfd; }
.bank-client-section > header { min-height: 40px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ece6f1; background: #fff; color: #807389; font-size: 9px; }
.bank-client-heading { min-width: 0; display: flex; align-items: center; gap: 7px; color: #38274a; }
.bank-client-heading strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.bank-client-heading .pipeline-client-mark { width: 19px; height: 19px; }
.bank-card-grid { padding: 8px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bank-card { min-width: 0; padding: 10px; border: 1px solid #dfdfe3; border-radius: 7px; background: #fff; }.bank-card-kicker { margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }.bank-card-kicker span { color: #168b63; font-size: 7px; font-weight: 700; }.bank-card-kicker time { color: #93889b; font-size: 7px; }
.bank-card .pipeline-card-title-row { margin-bottom: 5px; }
.bank-card .pipeline-card-title-row > strong { font-size: 11px; }
.bank-card .pipeline-card-meta { margin-top: 8px; }
.bank-card .pipeline-resources { margin-top: 8px; }
.bank-stock { display: flex; align-items: center; gap: 5px; color: #807389; }.bank-stock strong { color: #168b63; font: 700 11px 'DM Mono', monospace; }.bank-stock > span { font-size: 8px; }.bank-stock em { display: flex; gap: 2px; margin-left: 2px; font-style: normal; }.bank-stock i { width: 7px; height: 4px; border-radius: 2px; background: #e7e1eb; }.bank-stock i.filled { background: #159b68; }
.bank-mark-live { min-height: 23px; padding: 0 7px; border: 1px solid #bea6dc; border-radius: 4px; background: #f7f2fc; color: #64319b; font: 700 7px Poppins, sans-serif; cursor: pointer; }
.bank-mark-live:hover { border-color: #8d61bf; background: #eee4f9; }
.bank-empty { min-height: 52px; padding: 17px 12px; display: grid; place-items: center; color: #918698; font-size: 9px; }
.watching-title { display: inline-flex; align-items: center; gap: 6px; }
.watching-pulse { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: #7838c5; box-shadow: 0 0 0 0 rgba(120,56,197,.36); animation: watching-pulse 1.7s ease-out infinite; }
@keyframes watching-pulse { 70% { box-shadow: 0 0 0 5px rgba(120,56,197,0); } 100% { box-shadow: 0 0 0 0 rgba(120,56,197,0); } }
@media (prefers-reduced-motion: reduce) { .watching-pulse { animation: none; } }
@media (max-width: 900px) { .bank-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .bank-toolbar { padding: 12px; align-items: flex-start; gap: 10px; flex-direction: column; }.bank-toolbar-controls { width: 100%; justify-content: space-between; }.bank-toolbar select { width: min(185px,65%); }.bank-card-grid { grid-template-columns: 1fr; } }

.learning-footer-actions { display: inline-flex; align-items: center; gap: 7px; }.learning-delete { min-height: 21px; padding: 0 6px; border: 1px solid #efc3cc; border-radius: 4px; background: #fff5f6; color: #bd4055; font: 700 7px Poppins, sans-serif; cursor: pointer; }.learning-delete:hover { border-color: #db8495; background: #fde7eb; }.learning-row .learning-delete { justify-self: end; }.learning-table-head, .learning-row { grid-template-columns: 52px minmax(190px,1fr) 86px 92px 60px 105px 72px 52px; }

.client-meta strong { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.client-pill { display: inline-flex; align-items: center; min-height: 16px; padding: 0 5px; border-radius: 4px; font-size: 7px; font-weight: 700; line-height: 1; }
.client-pill.onboarding { background: #eee8f7; color: #62458a; }
.client-pill.new { background: #f8edff; color: #7437a6; }
.client-pill.offboarded { background: #f1eef3; color: #71677a; }
.onboarding-metric, .onboarding-health { color: #b5acbd; text-align: center; font-size: 12px; font-weight: 600; }
.form-toggle { grid-column: 1 / -1; display: flex !important; align-items: center; gap: 7px; color: #62586a; font-size: 10px !important; font-weight: 500 !important; }
.form-toggle input { width: 14px !important; height: 14px; margin: 0 !important; accent-color: var(--purple); }
.lifecycle-toggle { justify-content: space-between; }.lifecycle-toggle input { width: 34px !important; height: 18px; appearance: none; border: 1px solid #cfc5d7; border-radius: 10px; background: #ece7f0; cursor: pointer; position: relative; transition: background .15s ease; }.lifecycle-toggle input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(47,22,65,.18); transition: left .15s ease; }.lifecycle-toggle input:checked { border-color: #7b42b5; background: #7b42b5; }.lifecycle-toggle input:checked::after { left: 18px; }
.delete-client-button { width: 100%; height: 31px; margin-top: 8px; border: 1px solid #e6bcc5; border-radius: 5px; background: #fff8f9; color: #bf4057; font: 700 9px Poppins, sans-serif; cursor: pointer; }.delete-client-button:hover { background: #feeef1; }.delete-client-button:disabled { opacity: .65; cursor: not-allowed; }

.ui-select { position: relative; display: inline-block; min-width: 106px; }
.ui-select > select { width: 1px !important; height: 1px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; position: absolute; opacity: 0; pointer-events: none; }
.ui-select-trigger { width: 100%; height: 30px; padding: 0 27px 0 9px; overflow: hidden; border: 1px solid #e7e1e9; border-radius: 5px; background: #fdfcff; color: #65566e; font: 10px Poppins, sans-serif; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; position: relative; }
.ui-select-trigger::after { content: '⌄'; position: absolute; right: 9px; top: 50%; color: #725f7e; font-size: 13px; line-height: 1; transform: translateY(-58%); }
.ui-select-trigger:hover, .ui-select.is-open .ui-select-trigger { border-color: #b89ad8; background: #fff; }
.ui-select-trigger:focus-visible { outline: 2px solid rgba(110,49,180,.24); outline-offset: 1px; }
.ui-select-menu { min-width: 100%; max-height: 250px; padding: 4px; display: none; overflow-y: auto; position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; border: 1px solid #dcd3e4; border-radius: 6px; background: #fff; box-shadow: 0 4px 10px rgba(43,19,53,.12); }
.ui-select.is-open .ui-select-menu { display: grid; }
.ui-select-menu button { min-width: max-content; min-height: 27px; padding: 0 8px; border: 0; border-radius: 4px; background: transparent; color: #55445f; font: 600 9px Poppins, sans-serif; text-align: left; cursor: pointer; }
.ui-select-menu button:hover, .ui-select-menu button[aria-selected="true"] { background: #f2ebfa; color: #5d2993; }
.ui-select-menu button:disabled { color: #afa5b4; cursor: default; }
.creative-controls .ui-select { min-width: 150px; }.creative-filters .ui-select { min-width: 112px; }.creative-table-toolbar .ui-select { min-width: 145px; }.watch-controls .ui-select { min-width: 106px; }.bank-toolbar-controls .ui-select { width: 185px; }.bank-toolbar-controls .ui-select-trigger { height: 31px; background: #fff; font-size: 9px; }.form-grid .ui-select, .settings-panel label > .ui-select { width: 100%; margin-top: 5px; }.form-grid .ui-select-trigger, .settings-panel label > .ui-select .ui-select-trigger { height: 31px; }

dialog#appConfirmDialog, dialog#appNoticeDialog { width: min(390px, calc(100vw - 30px)); padding: 0; border: 1px solid #e1d8e8; border-radius: 8px; box-shadow: 0 8px 24px rgba(43,19,53,.14); }
.app-dialog-panel { position: relative; padding: 21px; }
.app-dialog-panel h2 { margin: 0; color: #332046; font-size: 15px; }
.app-dialog-panel p { margin: 8px 0 18px; color: #766a7d; font-size: 10px; line-height: 1.5; white-space: pre-line; }
.app-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.app-dialog-actions button { height: 31px; padding: 0 11px; border: 1px solid #ded6e5; border-radius: 5px; background: #fff; color: #604d68; font: 700 10px Poppins, sans-serif; cursor: pointer; }
.app-dialog-actions .app-dialog-confirm { border-color: #6e31b4; background: #6e31b4; color: #fff; }
.app-dialog-actions .app-dialog-confirm.is-danger { border-color: #c53d55; background: #c53d55; }
.app-dialog-actions button:hover { filter: brightness(.98); }

.slack-settings { margin: 17px 0 0; padding: 13px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid #e8e0ef; border-radius: 8px; background: #fff; }.slack-settings-copy { display: flex; align-items: flex-start; gap: 9px; }.slack-settings-icon { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; background: #eee6ff; color: #6d28d9; font-size: 13px; }.slack-settings h3 { margin: 0 0 2px; color: #33223e; font-size: 11px; }.slack-settings p { margin: 0; color: #82758b; font-size: 9px; line-height: 1.55; }.slack-settings p strong { color: #4e3c5e; font-size: 10px; }.slack-settings p small { display: block; color: #8d8195; font-size: 8px; }.slack-connect,.slack-disconnect { min-height: 29px; padding: 0 9px; border: 1px solid #6d28d9; border-radius: 6px; background: #6d28d9; color: #fff; font: 700 9px Poppins,sans-serif; white-space: nowrap; cursor: pointer; }.slack-connect:disabled { border-color: #e2dbe8; background: #f5f1f8; color: #a297aa; cursor: not-allowed; }.slack-disconnect { border-color: #efc6cf; background: #fff8f9; color: #bf4057; }.slack-channel-settings { margin: 0 0 15px; padding: 12px 13px 13px; border: 1px solid #e8e0ef; border-top: 0; border-radius: 0 0 8px 8px; background: #fcfbfd; }.slack-channel-settings label { margin: 0; }.slack-channel-settings .ui-select { width: 100%; margin-top: 5px; }.slack-channel-settings .ui-select-trigger { height: 31px; }.slack-channel-help { min-height: 14px; margin: 7px 0 0; color: #84798d; font-size: 8px; line-height: 1.45; }.slack-channel-actions { margin-top: 10px; display: flex; justify-content: flex-end; gap: 7px; }.slack-channel-actions button { height: 29px; padding: 0 9px; border: 1px solid #d9cee4; border-radius: 6px; background: #fff; color: #5b326e; font: 700 9px Poppins,sans-serif; cursor: pointer; }.slack-channel-actions button:last-child { border-color: #6d28d9; background: #6d28d9; color: #fff; }.slack-channel-actions button:disabled { border-color: #e4dce9; background: #f5f1f7; color: #a299aa; cursor: not-allowed; }
.admin-settings-tabs { margin: 14px 0 16px; display: flex; gap: 3px; border-bottom: 1px solid #e7e0ec; }.admin-settings-tabs button { height: 31px; padding: 0 10px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #80738a; font: 700 9px Poppins,sans-serif; cursor: pointer; }.admin-settings-tabs button.active { border-bottom-color: #6d28d9; color: #57279a; }.slack-templates { margin-top: 18px; }.slack-templates h3 { margin: 0; color: #392747; font-size: 12px; }.slack-template-note { margin: 5px 0 10px; color: #887d91; font: 8px/1.45 'DM Mono',monospace; overflow-wrap: anywhere; }.slack-template-card { margin-top: 9px; padding: 12px; border: 1px solid #e7e0ec; border-radius: 8px; background: #fff; }.slack-template-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.slack-template-card h4 { margin: 0; color: #3d294a; font-size: 11px; }.slack-template-card header span { display: block; margin-top: 1px; color: #887d91; font-size: 8px; }.template-toggle { height: 25px; padding: 0 7px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid #ded4e7; border-radius: 6px; background: #fff; color: #887a90; font: 700 8px Poppins,sans-serif; cursor: pointer; }.template-toggle i { width: 7px; height: 7px; border-radius: 50%; background: #b3a8bb; }.template-toggle.is-on { border-color: #bde4d1; background: #f3fcf7; color: #087346; }.template-toggle.is-on i { background: #159b68; }.slack-template-card textarea { width: 100%; min-height: 76px; margin: 9px 0 5px; padding: 8px; resize: vertical; border: 1px solid #ded6e5; border-radius: 6px; background: #fff; color: #4c3d54; font: 9px/1.5 'DM Mono',monospace; }.slack-template-card p { margin: 0; color: #887d91; font: 8px/1.45 'DM Mono',monospace; overflow-wrap: anywhere; }.slack-template-card footer { margin-top: 9px; display: flex; justify-content: flex-end; gap: 6px; }.slack-template-card footer button { height: 27px; padding: 0 8px; border: 1px solid #ddd4e5; border-radius: 6px; background: #fff; color: #69536f; font: 700 8px Poppins,sans-serif; cursor: pointer; }.slack-template-card footer .template-save { border-color: #6d28d9; background: #6d28d9; color: #fff; }.slack-template-card footer button:disabled { opacity: .65; cursor: not-allowed; }.slack-template-error { margin: 8px 0; color: #b83249; font-size: 9px; }
.slack-templates { margin-top: 12px; }.slack-template-note { margin: 3px 0 6px; font-size: 7px; line-height: 1.3; }.slack-template-card { margin-top: 6px; padding: 8px 9px; }.slack-template-card h4 { font-size: 10px; }.slack-template-card textarea { min-height: 46px; margin: 6px 0 3px; padding: 6px 7px; font-size: 8px; line-height: 1.35; }.slack-template-card p { font-size: 7px; line-height: 1.3; }.slack-template-card footer { margin-top: 6px; }.slack-template-card footer button { height: 24px; padding: 0 7px; font-size: 7px; }.template-toggle { height: 22px; font-size: 7px; }.slack-settings { margin-top: 10px; padding: 10px; }.slack-channel-settings { margin-bottom: 10px; padding: 8px 10px 9px; }.slack-channel-actions { margin-top: 7px; }.slack-channel-actions button { height: 26px; font-size: 8px; }.slack-channel-help { margin-top: 4px; font-size: 7px; }
dialog#settingsDialog { width: min(520px, calc(100% - 30px)); height: min(680px, calc(100vh - 72px)); max-height: calc(100vh - 72px); overflow: hidden; }
dialog#settingsDialog .settings-panel { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; min-height: 0; }
dialog#settingsDialog #kpiSettingsPanel:not([hidden]), dialog#settingsDialog #slackSettingsPanel:not([hidden]) { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 5px; scrollbar-gutter: stable; }