body.ads-page { min-height: 100vh; background: #f5f7f9; color: #172430; }
.ads-topbar { min-height: 70px; display: grid; grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr); align-items: center; gap: 20px; padding: 0 24px; border-bottom: 1px solid #e0e6eb; background: #fff; }
.ads-navigation { display: flex; align-items: center; gap: 5px; padding: 4px; border: 1px solid #e3e8ed; border-radius: 10px; background: #f5f7f9; }
.ads-navigation a, .ads-navigation span { padding: 8px 11px; border-radius: 7px; color: #687687; font-size: 11px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.ads-navigation a.active { color: #5e3fa6; background: #fff; box-shadow: 0 1px 3px rgba(37, 34, 70, .14); }
.ads-navigation span { opacity: .52; }
.ads-user { display: flex; align-items: center; justify-content: flex-end; gap: 12px; color: #637182; font-size: 11px; font-weight: 700; }
.ads-shell { width: min(1420px, calc(100% - 48px)); margin: 0 auto; padding: 38px 0 60px; }
.ads-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.ads-heading h1 { margin: 5px 0 7px; font: 800 32px/1.1 "Manrope", sans-serif; letter-spacing: -.045em; }
.ads-heading p { max-width: 770px; margin: 0; color: #6e7d8c; font-size: 13px; line-height: 1.55; }
.ads-organization { min-width: 250px; display: grid; gap: 7px; color: #677788; font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.ads-organization select { min-height: 42px; padding: 0 12px; border: 1px solid #d9e1e8; border-radius: 9px; background: #fff; font: 700 12px "DM Sans", sans-serif; }
.ads-notice { display: flex; align-items: start; gap: 13px; margin: 23px 0 18px; padding: 13px 15px; border: 1px solid #e1d9fa; border-radius: 12px; background: linear-gradient(100deg, #f8f5ff, #f4fbff); }
.ads-notice > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: #5b3aa5; background: #e9e0ff; font-weight: 900; }
.ads-notice strong { color: #3e2a70; font-size: 11px; }
.ads-notice p { margin: 3px 0 0; color: #6f6981; font-size: 11px; line-height: 1.55; }
.ads-meta-connection { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 9px; color: #4c4270; font-size: 11px; font-weight: 700; }
.ads-workspace { display: grid; grid-template-columns: 305px minmax(0, 1fr); gap: 18px; align-items: start; }
.ads-campaigns-card, .ads-editor-card, .ads-api-preview { border: 1px solid #dfe6eb; border-radius: 15px; background: #fff; box-shadow: 0 6px 18px rgba(28, 47, 63, .035); }
.ads-campaigns-card { padding: 17px; }
.ads-campaigns-card > header { display: flex; align-items: start; justify-content: space-between; gap: 10px; margin-bottom: 15px; }
.ads-campaigns-card h2, .ads-editor-head h2, .ads-api-preview h2 { margin: 3px 0 0; font: 800 17px "Manrope", sans-serif; letter-spacing: -.02em; }
.ads-campaign-list { display: grid; gap: 8px; max-height: 710px; overflow: auto; }
.ads-campaign-row { display: grid; gap: 4px; padding: 11px; border: 1px solid #e1e7ec; border-radius: 10px; color: #30495b; background: #fff; text-align: left; cursor: pointer; }
.ads-campaign-row:hover, .ads-campaign-row.active { border-color: #9876e6; background: #faf7ff; }
.ads-campaign-row strong { font-size: 11px; line-height: 1.35; }
.ads-campaign-row small, .ads-campaign-row i { color: #7d8c9a; font-size: 9px; font-style: normal; }
.ads-campaign-row i { color: #4a7b63; font-weight: 800; }
.ads-status { justify-self: start; padding: 3px 6px; border-radius: 5px; color: #566674; background: #edf1f4; font-size: 8px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.ads-status.ready_for_meta { color: #275f4b; background: #dff7e8; }.ads-status.archived { color: #805363; background: #f8e8ed; }
.ads-empty { padding: 30px 12px; border: 1px dashed #d5dfe6; border-radius: 9px; color: #748291; font-size: 11px; line-height: 1.5; text-align: center; }
.ads-editor-card { overflow: hidden; }
.ads-simple-panel { display: grid; gap: 15px; padding: 20px 22px 24px; }
.ads-simple-panel[hidden] { display: none; }
.ads-simple-panel > p { margin: 0; color: #657687; font-size: 12px; line-height: 1.5; }
.ads-simple-fields { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(200px, 1.5fr) minmax(110px, .6fr); gap: 12px; }
.ads-simple-fields label { display: grid; gap: 6px; color: #566776; font-size: 10px; font-weight: 850; }
.ads-simple-fields input, .ads-simple-fields select { width: 100%; min-height: 42px; box-sizing: border-box; padding: 0 10px; border: 1px solid #dbe3e9; border-radius: 8px; background: #fff; color: #243848; font: 700 12px "DM Sans", sans-serif; }
.ads-lead-form-wrap { display: grid; gap: 6px; color: #566776; font-size: 10px; font-weight: 850; }
.ads-lead-form-wrap.hidden, .ads-lead-form-hint.hidden { display: none; }
.ads-lead-form-wrap select { min-height: 42px; padding: 0 10px; border: 1px solid #dbe3e9; border-radius: 8px; background: #fff; font: 700 12px "DM Sans", sans-serif; }
.ads-lead-form-hint { color: #735420; font-size: 11px; line-height: 1.5; }
.ads-autofill-info { padding: 12px 14px; border: 1px solid #dcece5; border-radius: 10px; color: #315d4a; background: #f2faf6; font-size: 11px; line-height: 1.6; }
.ads-account-facts:not(:empty) { padding: 9px 12px; border: 1px solid #dbe7f2; border-radius: 8px; color: #34506a; background: #f5f9fd; font-size: 11px; line-height: 1.5; }
.ads-readiness-issues:not(:empty) { padding: 11px 13px; border: 1px solid #f0d8a4; border-radius: 9px; background: #fffaf0; color: #735420; font-size: 11px; line-height: 1.55; }
.ads-assistant { display: grid; gap: 8px; padding: 14px; border: 1px solid #e1d9fa; border-radius: 11px; background: #faf8ff; }
.ads-assistant > label { color: #513982; font-size: 11px; font-weight: 850; }
.ads-assistant-history { display: grid; gap: 8px; max-height: 230px; overflow-y: auto; }
.ads-assistant-history:empty { display: none; }
.ads-chat-message { max-width: 88%; padding: 9px 11px; border-radius: 10px; background: #fff; color: #40394f; font-size: 11px; line-height: 1.5; }
.ads-chat-message.user { justify-self: end; background: #eae2ff; }
.ads-chat-message.assistant { justify-self: start; border: 1px solid #e4d9fa; }
.ads-chat-message strong { display: block; margin-bottom: 3px; font-size: 10px; }
.ads-chat-message p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ads-assistant-compose { display: flex; gap: 8px; align-items: end; }
.ads-assistant-compose textarea { flex: 1; min-width: 0; padding: 10px; border: 1px solid #d9d2ea; border-radius: 8px; resize: vertical; font: 600 12px/1.5 "DM Sans", sans-serif; }
.ads-assistant-reply:not(:empty) { padding: 10px 12px; border-radius: 8px; color: #4e3b78; background: #f1eaff; font-size: 11px; line-height: 1.5; white-space: pre-wrap; }
#adsAssistantReply:empty { display: none; }
.ads-simple-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ads-simple-actions .hidden { display: none; }
.ads-meta-delivery-state { padding: 10px 12px; border: 1px solid #e1d9fa; border-radius: 9px; color: #554372; background: #faf8ff; font-size: 11px; line-height: 1.5; }
.ads-meta-delivery-state.success { border-color: #a7dfbb; color: #22603f; background: #edfaf2; }
.ads-meta-delivery-state.error { border-color: #efb4bd; color: #893746; background: #fff2f4; }
.ads-insights-panel { display: grid; gap: 10px; margin: 16px 22px; padding: 13px; border: 1px solid #dbe7f2; border-radius: 10px; background: #f8fbfe; color: #30495b; font-size: 11px; line-height: 1.5; }
.ads-insights-panel.hidden { display: none; }
.ads-sales-assets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.ads-sales-assets.hidden, .ads-sales-assets .hidden { display: none; }
.ads-sales-assets label { display: grid; gap: 5px; font-size: 11px; font-weight: 700; }
.ads-sales-assets select { min-width: 0; }
.ads-sales-assets .ads-asset-confirm { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.ads-sales-assets .ads-asset-confirm input { width: auto; min-height: auto; }
.ads-recommendation { border: 1px solid #e4ddf5; border-radius: 14px; padding: 14px; margin-top: 12px; background: #fbf9ff; }
.ads-recommendation p { margin: 8px 0; }
.ads-recommendation small { display: block; margin-bottom: 10px; }
.ads-recommendation button { margin-right: 8px; margin-top: 4px; }
.ads-sales-assets p { grid-column: 1 / -1; margin: 0; font-size: 10px; }
.ads-insights-head { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.ads-insights-head strong { margin-right: auto; }
.ads-insights-head select { min-height: 35px; padding: 0 8px; border: 1px solid #dbe3e9; border-radius: 7px; background: #fff; }
.ads-insights-panel small { color: #758392; }
#adsAdvanced { border-top: 1px solid #e7edf2; }
#adsAdvanced > summary { padding: 15px 22px; color: #5b4983; background: #fbfaff; font-size: 11px; font-weight: 850; cursor: pointer; }
#adsAdvanced[open] > summary { border-bottom: 1px solid #e7edf2; }
.ads-editor-head { display: flex; align-items: start; justify-content: space-between; gap: 15px; padding: 20px 22px; border-bottom: 1px solid #ecf0f3; }
.ads-readiness { padding: 7px 9px; border-radius: 7px; color: #79653b; background: #fff5d8; font-size: 9px; font-weight: 850; text-align: right; }.ads-readiness.ready { color: #266147; background: #e2f8e9; }
#adsCampaignForm { display: grid; }.ads-form-section { display: grid; gap: 13px; padding: 20px 22px; border-bottom: 1px solid #edf1f3; }.ads-form-section h3 { margin: 0; color: #30475a; font: 800 13px "Manrope", sans-serif; }
.ads-form-section label { min-width: 0; display: grid; gap: 6px; color: #566776; font-size: 10px; font-weight: 850; }.ads-form-section label small { color: #8694a0; font-size: 9px; font-weight: 500; }
.ads-form-section input, .ads-form-section select, .ads-form-section textarea { width: 100%; box-sizing: border-box; border: 1px solid #dbe3e9; border-radius: 8px; background: #fff; font: 600 12px "DM Sans", sans-serif; outline: none; }.ads-form-section input, .ads-form-section select { min-height: 40px; padding: 0 10px; }.ads-form-section textarea { min-height: 78px; padding: 9px 10px; line-height: 1.45; resize: vertical; }.ads-form-section input:focus, .ads-form-section select:focus, .ads-form-section textarea:focus { border-color: #9b7ce7; box-shadow: 0 0 0 3px rgba(123, 91, 208, .13); }
.ads-two-columns, .ads-three-columns { display: grid; gap: 13px; }.ads-two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }.ads-three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ads-age-fields { display: grid; gap: 7px; color: #566776; font-size: 10px; font-weight: 850; }.ads-age-fields > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.ads-age-fields label { font-size: 9px; }
.ads-placements { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0; padding: 12px; border: 1px solid #e0e7ec; border-radius: 9px; }.ads-placements legend { padding: 0 4px; color: #566776; font-size: 10px; font-weight: 850; }.ads-placements label { display: flex; align-items: center; gap: 6px; font-size: 10px; }.ads-placements input { width: auto; min-height: auto; }
.ads-editor-footer { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; padding: 17px 22px; }.ads-editor-footer .hidden { display: none; }

.ads-wizard-progress { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; padding: 16px 22px 0; }
.ads-step-indicator { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 6px; color: #84919d; font-size: 9px; font-weight: 800; }
.ads-step-indicator::before { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; content: attr(data-step); }
.ads-step-indicator > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ads-step-indicator.done, .ads-step-indicator.active { color: #5f40a7; }
.ads-step-indicator.done::before { border-color: #379765; color: #fff; background: #379765; content: "✓"; }
.ads-step-indicator.active::before { box-shadow: 0 0 0 3px rgba(108, 76, 196, .13); }
.ads-wizard-step.hidden { display: none; }
#adsAdvanced .ads-wizard-step.hidden { display: grid; }
.ads-step-copy { max-width: 710px; margin: -6px 0 4px; color: #738292; font-size: 11px; line-height: 1.55; }
.ads-objective-grid, .ads-coverage-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.ads-objective-grid label, .ads-coverage-choice label { display: flex; align-items: start; gap: 8px; padding: 11px; border: 1px solid #dfe6eb; border-radius: 9px; cursor: pointer; }
.ads-objective-grid label:has(input:checked), .ads-coverage-choice label:has(input:checked) { border-color: #9674df; background: #faf7ff; box-shadow: 0 0 0 2px rgba(143, 108, 220, .1); }
.ads-objective-grid input, .ads-coverage-choice input { width: auto; min-height: auto; margin-top: 2px; accent-color: #7051c8; }
.ads-objective-grid span, .ads-coverage-choice span { display: grid; gap: 3px; }
.ads-objective-grid strong, .ads-coverage-choice strong { color: #344c5d; font-size: 11px; }
.ads-objective-grid small, .ads-coverage-choice small { color: #7b8b98; font-size: 9px; line-height: 1.4; }
.ads-objective-proposal { padding: 11px 12px; border-left: 3px solid #7c59cb; border-radius: 7px; color: #5c4987; background: #f7f3ff; font-size: 10px; font-weight: 700; line-height: 1.5; }
.ads-budget-choice { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(140px, .35fr); gap: 13px; max-width: 500px; }
.ads-end-date > span { display: flex; align-items: center; gap: 6px; font-size: 10px; }.ads-end-date input[type="checkbox"] { width: auto; min-height: auto; accent-color: #7051c8; }

.ads-api-preview { display: grid; gap: 15px; margin-top: 18px; padding: 21px; }.ads-api-preview.hidden { display: none; }.ads-api-preview header { display: flex; align-items: start; justify-content: space-between; gap: 15px; }.ads-api-preview p { max-width: 720px; margin: 7px 0 0; color: #758392; font-size: 11px; line-height: 1.55; }.ads-api-preview pre { max-height: 480px; margin: 0; overflow: auto; padding: 15px; border-radius: 10px; color: #d8eaf6; background: #192935; font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.ads-toast { position: fixed; right: 22px; bottom: 22px; z-index: 20; max-width: min(430px, calc(100vw - 44px)); padding: 10px 13px; border-radius: 9px; color: #fff; background: #273b4b; box-shadow: 0 10px 25px rgba(17, 31, 43, .2); font-size: 11px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: .18s ease; }.ads-toast:not(:empty) { opacity: 1; transform: translateY(0); }.ads-toast.success { background: #1f7c59; }.ads-toast.error { background: #ad4050; }
.ads-progress-dialog { width: min(480px, calc(100vw - 40px)); box-sizing: border-box; padding: 26px; border: 1px solid #ddd8e9; border-radius: 16px; color: #273541; background: #fff; box-shadow: 0 24px 70px rgba(22, 27, 46, .24); }
.ads-progress-dialog::backdrop { background: rgba(20, 28, 42, .55); }
.ads-progress-dialog h2 { margin: 8px 0 8px; font: 800 20px/1.3 "Manrope", sans-serif; }
.ads-progress-dialog > p { font-size: 12px; line-height: 1.5; }
.ads-progress-steps { display: grid; gap: 8px; margin: 20px 0; padding: 0; list-style: none; counter-reset: ads-step; }
.ads-progress-steps li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #e4e9ee; border-radius: 9px; color: #758290; background: #f8fafb; font-size: 11px; font-weight: 700; counter-increment: ads-step; }
.ads-progress-steps li::before { display: grid; flex: 0 0 23px; width: 23px; height: 23px; place-items: center; border-radius: 50%; color: #fff; background: #a7b2bb; content: counter(ads-step); }
.ads-progress-steps li.active { border-color: #aa8cea; color: #513982; background: #f7f3ff; }
.ads-progress-steps li.done { border-color: #b9e6cb; color: #256241; background: #f0fbf4; }
.ads-progress-steps li.done::before { background: #319866; content: "✓"; }
.ads-progress-steps li.unavailable { border-style: dashed; color: #8c6070; background: #fff7f8; }
.ads-progress-outcome:not(:empty) { padding: 11px 13px; border-radius: 9px; color: #673948; background: #fff0f3; }
.ads-progress-dialog > button { display: block; margin-left: auto; }
@media (max-width: 1050px) { .ads-topbar { grid-template-columns: 1fr auto; }.ads-navigation { grid-column: 1 / -1; grid-row: 2; justify-self: start; margin-bottom: 10px; }.ads-workspace { grid-template-columns: 1fr; }.ads-campaign-list { max-height: 300px; }.ads-campaigns-card { order: 2; }.ads-editor-card { order: 1; } }
@media (max-width: 720px) { .ads-topbar { padding: 14px; }.ads-user span { display: none; }.ads-shell { width: min(100% - 28px, 1420px); padding-top: 26px; }.ads-heading { flex-direction: column; align-items: stretch; }.ads-organization { min-width: 0; }.ads-two-columns, .ads-three-columns, .ads-objective-grid, .ads-coverage-choice, .ads-budget-choice, .ads-simple-fields { grid-template-columns: 1fr; }.ads-assistant-compose { flex-direction: column; align-items: stretch; }.ads-wizard-progress { grid-template-columns: 1fr; }.ads-editor-footer { grid-template-columns: 1fr 1fr; }.ads-editor-footer > span { display: none; }.ads-api-preview header { align-items: stretch; flex-direction: column; } }
