/* ads-live-build: 7.4-v16 */
* { box-sizing: border-box; }
:root {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --line: #e1e4e8;
  --text: #202124;
  --muted: #7b8088;
  --dark: #15171b;
  --dark2: #24272d;
  --blue: #5271ff;
  --green: #19864a;
  --warning: #a96900;
  --error: #b42318;
}
html, body { margin: 0; min-height: 100%; font-family: Inter, "Segoe UI", Arial, sans-serif; background: var(--bg); color: var(--text); }
button, textarea, select { font: inherit; }
button { cursor: pointer; }
.app { min-height: 100vh; display: flex; }
.sidebar { width: 255px; background: var(--dark); color: white; padding: 22px 18px; flex: 0 0 255px; }
.brand { display: flex; align-items: center; gap: 11px; margin-bottom: 24px; }
.brand-icon { width: 42px; height: 42px; border-radius: 12px; background: white; color: var(--dark); display: grid; place-items: center; font-weight: 800; }
.brand strong { display: block; font-size: 17px; }
.brand span { display: block; color: #aeb2bb; margin-top: 3px; font-size: 12px; }
.main-nav { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.main-nav a { color: #bec3cc; text-decoration: none; padding: 11px 12px; border-radius: 9px; font-size: 14px; }
.main-nav a:hover, .main-nav a.active { background: #30343c; color: white; }
.new-chat { width: 100%; padding: 11px; border: 1px solid #363a42; border-radius: 10px; background: var(--dark2); color: white; }
.sidebar-info { margin-top: 26px; display: flex; flex-direction: column; gap: 8px; color: #aeb2bb; font-size: 13px; }
.sidebar-info strong { color: white; }
.main { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.header { min-height: 82px; padding: 16px 28px; background: var(--panel); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.header h1 { margin: 0; font-size: 20px; }
.header p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.readonly { background: #eaf8ef; color: var(--green); font-size: 11px; font-weight: 700; padding: 7px 10px; border-radius: 999px; }
.primary-button { border: 0; background: var(--dark); color: white; padding: 10px 16px; border-radius: 10px; font-weight: 650; }
.primary-button:disabled { opacity: .45; cursor: not-allowed; }
.chat { flex: 1; overflow-y: auto; padding: 28px; }
.message { display: flex; gap: 12px; max-width: 900px; margin: 0 auto 22px; }
.message.user { flex-direction: row-reverse; }
.avatar { width: 34px; height: 34px; min-width: 34px; border-radius: 10px; background: #20242a; color: white; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.user .avatar { background: var(--blue); }
.bubble { white-space: pre-wrap; background: white; padding: 14px 17px; border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.06); line-height: 1.55; max-width: 760px; }
.user .bubble { background: var(--blue); color: white; }
.tool-message { max-width: 760px; margin: -8px auto 18px; color: var(--muted); font-size: 12px; padding-left: 46px; }
.composer { padding: 18px 28px 24px; background: white; border-top: 1px solid var(--line); display: flex; gap: 12px; }
.composer textarea { flex: 1; resize: none; min-height: 48px; max-height: 160px; border: 1px solid #d9dce2; border-radius: 12px; padding: 13px 15px; outline: none; }
.composer textarea:focus { border-color: var(--blue); }
.composer button { padding: 0 24px; border: 0; border-radius: 12px; background: #20242a; color: white; font-weight: 650; }
.mentioned-ads { max-width: 900px; margin: -10px auto 24px; padding-left: 46px; display: flex; flex-wrap: wrap; gap: 12px; }
.mentioned-ad-card { width: 195px; position: relative; background: white; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.mentioned-ad-image { display: block; width: 100%; height: 145px; object-fit: contain; background: #f1f2f4; }
.mentioned-ad-body { padding: 10px; }
.mentioned-ad-body strong { display: block; font-size: 13px; margin-bottom: 4px; }
.mentioned-ad-metrics { margin-top: 7px; font-size: 11px; color: #555; line-height: 1.5; }
.video-badge { position: absolute; top: 8px; right: 8px; z-index: 2; background: rgba(0,0,0,.76); color: white; font-size: 10px; font-weight: 700; padding: 4px 7px; border-radius: 999px; }
.muted { color: var(--muted); }
.small { font-size: 11px; }
.ads-toolbar { padding: 16px 28px; background: white; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.ads-toolbar strong { display: block; }
.ads-toolbar span { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.period-picker { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.period-picker select { border: 1px solid #d9dce2; border-radius: 8px; padding: 8px 10px; background: white; }
.ads-grid { padding: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 320px)); gap: 17px; align-items: start; overflow-y: auto; }
.ad-card { position: relative; background: white; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.ad-media { width: 100%; height: 225px; position: relative; background: #eceef2; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ad-media img { width: 100%; height: 100%; object-fit: contain; }
.ad-media.no-image { padding: 20px; color: var(--muted); font-size: 12px; text-align: center; }
.ad-card-body { padding: 15px; }
.ad-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.metrics { margin-top: 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.metric { background: #f6f7f9; border-radius: 9px; padding: 9px; }
.metric span { display: block; color: var(--muted); font-size: 10px; margin-bottom: 4px; }
.metric strong { font-size: 13px; }
.system-content { padding: 22px; overflow-y: auto; }
.panel-note { background: white; border: 1px solid var(--line); border-radius: 11px; padding: 13px 15px; color: #555; }
.stats-grid { display: grid; grid-template-columns: repeat(6, minmax(100px, 1fr)); gap: 12px; margin: 16px 0; }
.stat-card { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 15px; }
.stat-card strong { display: block; font-size: 22px; }
.stat-card span { color: var(--muted); font-size: 11px; }
.system-panel { background: white; border: 1px solid var(--line); border-radius: 14px; margin-top: 16px; overflow: hidden; }
.panel-heading { padding: 16px 18px; border-bottom: 1px solid var(--line); }
.panel-heading h2 { margin: 0; font-size: 16px; }
.panel-heading p { margin: 5px 0 0; font-size: 12px; color: var(--muted); }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th, .data-table td { padding: 11px 13px; border-bottom: 1px solid #eceef1; text-align: left; vertical-align: middle; }
.data-table th { color: var(--muted); font-weight: 600; background: #fafbfc; }
.table-sub { display: block; color: #999; font-size: 10px; margin-top: 3px; }
.market-button { border: 1px solid #d7dae0; background: white; border-radius: 8px; padding: 6px 9px; }
.entity-grid { padding: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.entity-card { border: 1px solid #e6e8ec; background: #fafbfc; border-radius: 10px; padding: 12px; }
.entity-card strong, .entity-card span { display: block; }
.entity-card span { color: var(--muted); font-size: 11px; margin-top: 5px; overflow-wrap: anywhere; }
.success-text { color: var(--green) !important; font-weight: 700; }
.warning-text { color: var(--warning) !important; font-weight: 700; }
.error-text { color: var(--error) !important; font-weight: 700; }

@media (max-width: 900px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .app { display: block; }
  .sidebar { width: 100%; flex-basis: auto; padding: 14px; }
  .brand { margin-bottom: 12px; }
  .main-nav { flex-direction: row; overflow-x: auto; margin-bottom: 12px; }
  .main-nav a { white-space: nowrap; }
  .sidebar-info { display: none; }
  .header { min-height: 70px; padding: 14px 16px; }
  .chat { padding: 16px 12px; min-height: calc(100vh - 230px); }
  .composer { padding: 12px; }
  .composer button { padding: 0 16px; }
  .mentioned-ads { padding-left: 46px; padding-right: 10px; }
  .mentioned-ad-card { width: min(190px, calc(100vw - 90px)); }
  .ads-toolbar { padding: 12px 14px; }
  .ads-grid { grid-template-columns: 1fr; padding: 12px; }
  .ad-media { height: 290px; }
  .system-content { padding: 12px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Draft Studio */
.draft-layout { padding: 24px; display: grid; grid-template-columns: minmax(330px, 440px) minmax(0, 1fr); gap: 20px; align-items: start; }
.draft-builder { position: sticky; top: 18px; }
.draft-preview-column { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.form-label { display: flex; flex-direction: column; gap: 7px; margin: 15px 0; font-size: 13px; font-weight: 650; }
.form-label select, .form-label input[type="file"], .form-label textarea { width: 100%; border: 1px solid #d9dce2; border-radius: 10px; padding: 10px 11px; background: white; color: var(--text); }
.form-label textarea { resize: vertical; min-height: 105px; line-height: 1.45; }
.target-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 16px; }
.target-grid label { display: flex; align-items: center; gap: 7px; background: #f7f8fa; border: 1px solid var(--line); padding: 9px 10px; border-radius: 9px; font-size: 12px; }
.target-grid label:has(input:disabled) { opacity: .45; }
.draft-context { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 18px; }
.draft-context div { border: 1px solid var(--line); background: #f8f9fb; border-radius: 9px; padding: 9px; min-width: 0; }
.draft-context span { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.draft-context strong { display: block; font-size: 12px; overflow-wrap: anywhere; }
.upload-preview, .draft-assets { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 8px; }
.upload-item, .draft-asset { flex: 0 0 130px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #f2f3f5; }
.upload-item img, .upload-item video, .draft-asset img, .draft-asset video { width: 100%; height: 115px; object-fit: contain; display: block; background: #eef0f3; }
.upload-item span { display: block; padding: 7px; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: white; }
.draft-generate { width: 100%; margin-top: 4px; }
.draft-result-empty { min-height: 220px; }
.draft-result-heading { border-bottom: 1px solid var(--line); margin-bottom: 14px; padding-bottom: 12px; }
.draft-targets-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; margin-top: 15px; }
.draft-target-card { border: 1px solid var(--line); border-radius: 12px; padding: 13px; background: #fff; min-width: 0; }
.draft-target-card h3 { margin: 0 0 12px; font-size: 15px; }
.draft-edit-field { display: flex; flex-direction: column; gap: 5px; margin: 9px 0; }
.draft-edit-field span { font-size: 11px; color: var(--muted); font-weight: 650; }
.draft-edit-field textarea { width: 100%; resize: vertical; border: 1px solid #d9dce2; border-radius: 9px; padding: 9px; line-height: 1.4; }
.draft-meta-info { margin-top: 10px; padding: 9px; border-radius: 8px; background: #f6f7f9; color: var(--muted); font-size: 11px; line-height: 1.45; }
.draft-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.approve-button { border: 0; background: #19864a; color: white; padding: 10px 14px; border-radius: 10px; font-weight: 650; }
.secondary-button { border: 1px solid #d8dbe0; background: white; color: var(--text); padding: 10px 14px; border-radius: 10px; font-weight: 650; }
.draft-safety { margin-top: 13px; border: 1px solid #f0d7a7; background: #fff8e8; color: #805500; border-radius: 10px; padding: 10px 12px; font-size: 12px; line-height: 1.45; }
.draft-list { display: flex; flex-direction: column; gap: 8px; }
.draft-list-item { text-align: left; width: 100%; border: 1px solid var(--line); border-radius: 10px; background: white; padding: 10px 12px; }
.draft-list-item:hover { background: #f7f8fa; }
.draft-list-item strong, .draft-list-item span, .draft-list-item small { display: block; }
.draft-list-item span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.draft-list-item small { margin-top: 5px; color: #a0a4ab; }
@media (max-width: 1000px) { .draft-layout { grid-template-columns: 1fr; } .draft-builder { position: static; } }
@media (max-width: 650px) { .draft-layout { padding: 12px; } .target-grid, .draft-context { grid-template-columns: 1fr; } .draft-targets-preview { grid-template-columns: 1fr; } }


/* Draft Studio UX polish */
.draft-layout { padding: 30px; gap: 26px; }
.draft-builder, .draft-preview-column .system-panel { box-shadow: 0 4px 18px rgba(26, 31, 44, .045); }
.draft-builder-body { padding: 20px 22px 24px; }
.draft-builder-body > .panel-note:first-child { margin-top: 0; }
.draft-builder .form-label { margin: 18px 0; }
.form-label input[type="text"],
.form-label input[type="file"],
.form-label select,
.form-label textarea {
  width: 100%;
  border: 1px solid #d7dbe2;
  border-radius: 12px;
  padding: 13px 14px;
  background: #fff;
  color: var(--text);
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.form-label input[type="text"]:focus,
.form-label input[type="file"]:focus,
.form-label select:focus,
.form-label textarea:focus {
  border-color: #8fa2ff;
  box-shadow: 0 0 0 3px rgba(82, 113, 255, .10);
}
.form-label textarea { min-height: 118px; }
#metaAdDescription { min-height: 90px; }
.field-help { color: var(--muted); font-size: 11px; font-weight: 450; line-height: 1.45; margin-top: -1px; }

.copy-mode-section {
  margin: 22px 0;
  padding: 17px;
  border: 1px solid #cfd8ff;
  border-radius: 15px;
  background: linear-gradient(180deg, #f8f9ff 0%, #f4f6ff 100%);
}
.copy-mode-heading { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.copy-mode-heading strong { display: block; font-size: 14px; }
.copy-mode-heading span:not(.default-badge) { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.default-badge { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; background: #e6ebff; color: #455dcc; font-size: 9px; font-weight: 800; letter-spacing: .035em; }
.copy-mode-grid { margin-bottom: 10px; }
.copy-mode-grid label { padding: 12px; border-radius: 12px; background: #fff; align-items: flex-start; }
.copy-mode-grid label:has(input:checked) { border-color: #7d93ff; background: #f2f5ff; box-shadow: inset 0 0 0 1px rgba(82,113,255,.14); }
.copy-mode-grid label > span { display: block; }
.copy-mode-grid label strong { display: block; font-size: 12px; }
.copy-mode-grid label small { display: block; color: var(--muted); margin-top: 4px; line-height: 1.35; }
.mode-help { background: rgba(255,255,255,.72); }

#draftResult > .draft-destination-lock,
#draftResult > .draft-assets,
#draftResult > .panel-note,
#draftResult > .draft-targets-preview,
#draftResult > .draft-actions,
#draftResult > .draft-safety { margin-left: 20px; margin-right: 20px; }
#draftResult > .draft-safety { margin-bottom: 20px; }
.draft-destination-lock {
  margin-top: 2px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid #dbe1ef;
  border-radius: 12px;
  background: #f8faff;
}
.destination-title { font-size: 12px; font-weight: 800; color: #344054; margin-bottom: 10px; }
.destination-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.destination-grid div { padding: 9px 10px; border-radius: 9px; background: #fff; border: 1px solid #e6e9f0; min-width: 0; }
.destination-grid span { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.destination-grid strong { display: block; font-size: 11px; overflow-wrap: anywhere; }
.draft-destination-lock > small { display: block; margin-top: 10px; color: #667085; line-height: 1.45; }

.draft-list { padding: 14px 20px 20px; gap: 10px; }
.draft-list-row { display: grid; grid-template-columns: minmax(0, 1fr) 42px; gap: 8px; align-items: stretch; }
.draft-list-item { border-radius: 12px; padding: 12px 14px; }
.draft-list-destination { color: #4f5d75 !important; font-weight: 650; }
.draft-delete-button {
  border: 1px solid #ead9d9;
  border-radius: 12px;
  background: #fff;
  font-size: 16px;
  display: grid;
  place-items: center;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.draft-delete-button:hover { background: #fff3f2; border-color: #efb7b2; transform: translateY(-1px); }

@media (max-width: 900px) {
  .destination-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 650px) {
  .draft-layout { padding: 14px; }
  .draft-builder-body { padding: 16px 14px 18px; }
  .copy-mode-heading { display: block; }
  .default-badge { display: inline-block; margin-top: 8px; }
  .destination-grid { grid-template-columns: 1fr; }
  #draftResult > .draft-destination-lock,
  #draftResult > .draft-assets,
  #draftResult > .panel-note,
  #draftResult > .draft-targets-preview,
  #draftResult > .draft-actions,
  #draftResult > .draft-safety { margin-left: 14px; margin-right: 14px; }
  .draft-list { padding-left: 14px; padding-right: 14px; }
}

/* Meta PAUSED Publisher */
.meta-publish-box {
    margin: 18px 20px 4px;
    padding: 16px 18px;
    border: 1px solid #b8d8c4;
    border-radius: 14px;
    background: #f2fbf5;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.meta-publish-box strong {
    font-size: 14px;
}

.meta-publish-box span,
.meta-publish-box small {
    display: block;
    line-height: 1.45;
}

.meta-publish-button {
    align-self: flex-start;
    margin-top: 8px;
    padding: 11px 15px;
    border: 0;
    border-radius: 10px;
    background: #187a45;
    color: white;
    font-weight: 700;
    cursor: pointer;
}

.meta-publish-button:hover {
    filter: brightness(0.96);
}

.meta-publish-button:disabled {
    opacity: 0.6;
    cursor: wait;
}

.draft-list-meta {
    color: #147842;
    font-weight: 650;
    font-size: 12px;
}

/* Ads Performance Dashboard v2 */
.ads-dashboard-toolbar {
  padding: 16px 28px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ads-dashboard-toolbar strong { display: block; font-size: 14px; }
.ads-dashboard-toolbar span { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; }
.ads-dashboard-content { padding: 24px 28px 36px; overflow-y: auto; }
.ads-summary-grid { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 12px; }
.ads-summary-card,
.ads-loading-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 3px 14px rgba(28, 34, 48, .035);
}
.ads-loading-card { grid-column: 1 / -1; color: var(--muted); }
.ads-summary-label { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .045em; font-weight: 750; }
.ads-summary-value { display: block; margin-top: 8px; font-size: 24px; letter-spacing: -.025em; }
.ads-summary-detail { display: block; margin-top: 5px; color: #9a9fa8; font-size: 10px; line-height: 1.35; }
.ads-section { margin-top: 28px; }
.ads-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 13px; }
.ads-section-heading h2 { margin: 3px 0 0; font-size: 20px; letter-spacing: -.018em; }
.ads-section-heading p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.ads-eyebrow { color: #68738c; font-size: 9px; font-weight: 850; letter-spacing: .11em; }
.top-ads-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; align-items: start; }
.top-ads-grid > .panel-note { grid-column: 1 / -1; }
.performance-ad-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 3px 14px rgba(28, 34, 48, .045);
  min-width: 0;
}
.featured-ad-card { border-color: #d9deeb; }
.performance-ad-media {
  position: relative;
  height: 205px;
  background: #eef0f3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.featured-ad-card .performance-ad-media { height: 180px; }
.performance-ad-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.performance-ad-media.no-image { padding: 20px; color: var(--muted); text-align: center; font-size: 11px; }
.ad-rank-badge {
  position: absolute;
  left: 9px;
  top: 9px;
  min-width: 34px;
  height: 30px;
  padding: 0 8px;
  border-radius: 10px;
  background: rgba(20, 23, 29, .9);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 850;
}
.performance-ad-body { padding: 13px; }
.ad-meta-row { min-height: 24px; display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-bottom: 9px; }
.market-pill,
.ad-status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 9px;
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
  max-width: 100%;
}
.market-pill { background: #f1f3f7; color: #4f586a; overflow: hidden; text-overflow: ellipsis; }
.ad-status-badge { background: #f1f3f5; color: #69707c; }
.ad-status-badge.status-active { background: #e9f8ef; color: #187442; }
.ad-status-badge.status-paused { background: #fff5dd; color: #8a6300; }
.performance-ad-title {
  font-size: 13px;
  line-height: 1.35;
  font-weight: 760;
  min-height: 36px;
  overflow-wrap: anywhere;
}
.performance-ad-destination { margin-top: 6px; min-height: 31px; color: #737984; font-size: 10px; line-height: 1.35; }
.performance-ad-destination span,
.performance-ad-destination small { display: block; overflow-wrap: anywhere; }
.performance-ad-destination small { color: #a0a4ab; margin-top: 2px; }
.performance-metrics { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.performance-metrics .metric { padding: 8px; }
.performance-metrics .metric strong { font-size: 12px; }
.performance-metrics .metric span { font-size: 9px; }
.market-performance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.market-performance-grid > .panel-note { grid-column: 1 / -1; }
.market-performance-card {
  appearance: none;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  border-radius: 15px;
  padding: 15px;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(28, 34, 48, .035);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.market-performance-card:hover { transform: translateY(-1px); border-color: #cbd3e5; box-shadow: 0 7px 20px rgba(28, 34, 48, .06); }
.market-performance-card.active { border-color: #8396f5; box-shadow: 0 0 0 3px rgba(82, 113, 255, .08); }
.market-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.market-card-title { display: block; font-size: 14px; }
.market-card-campaigns { display: block; color: var(--muted); font-size: 10px; line-height: 1.35; margin-top: 5px; overflow-wrap: anywhere; }
.market-card-count { flex: 0 0 auto; border-radius: 999px; background: #f3f5f8; color: #737984; padding: 5px 8px; font-size: 9px; font-weight: 750; }
.market-card-metrics { margin-top: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.market-card-metrics .metric { padding: 7px; }
.market-card-metrics .metric strong { font-size: 11px; }
.market-card-metrics .metric span { font-size: 8px; }
.market-review-note { margin-top: 10px; padding: 8px 9px; border-radius: 8px; background: #fff8e8; color: #805500; font-size: 9px; line-height: 1.4; }
.ads-all-section { scroll-margin-top: 12px; }
.ads-all-heading { align-items: center; }
.ads-sort-picker { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.ads-sort-picker select { border: 1px solid #d9dce2; border-radius: 9px; padding: 8px 10px; background: #fff; color: var(--text); }
.market-filter-bar { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0 14px; }
.market-filter-chip {
  border: 1px solid #dce0e6;
  background: #fff;
  color: #565d69;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.market-filter-chip:hover { background: #f7f8fa; }
.market-filter-chip.active { background: #20242a; border-color: #20242a; color: #fff; }
.performance-ads-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 14px; align-items: start; }
.performance-ads-grid > .panel-note { grid-column: 1 / -1; }

@media (max-width: 1280px) {
  .top-ads-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .market-performance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ads-summary-grid { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
}
@media (max-width: 900px) {
  .top-ads-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ads-summary-grid { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
  .market-card-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ads-dashboard-toolbar { padding: 12px 14px; align-items: flex-start; }
  .ads-dashboard-content { padding: 16px 12px 28px; }
  .ads-section { margin-top: 24px; }
  .ads-section-heading, .ads-all-heading { align-items: flex-start; flex-direction: column; }
  .top-ads-grid, .market-performance-grid, .performance-ads-grid { grid-template-columns: 1fr; }
  .ads-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .performance-ad-media, .featured-ad-card .performance-ad-media { height: 285px; }
  .ads-sort-picker { width: 100%; justify-content: space-between; }
  .ads-sort-picker select { flex: 1; max-width: 220px; }
}
@media (max-width: 430px) {
  .ads-summary-grid { grid-template-columns: 1fr; }
  .ads-dashboard-toolbar { flex-direction: column; }
  .period-picker { width: 100%; justify-content: space-between; }
}


/* Meta ACTIVE / PAUSED publish mode */
.meta-publish-mode {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  margin-top: 5px;
  border: 1px solid #e0c47b;
  border-radius: 10px;
  background: #fffaf0;
  cursor: pointer;
}
.meta-publish-mode input {
  margin-top: 3px;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}
.meta-publish-mode > span {
  display: block;
}
.meta-publish-mode strong {
  display: block;
}
.meta-publish-mode small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}
.meta-publish-box-paused .meta-publish-mode {
  border-color: #b8d8c4;
  background: #f2fbf5;
}

/* Instagram Story Publisher */
.instagram-publish-box {
  margin: 18px 20px 4px;
  padding: 16px 18px;
  border: 1px solid #d8c4e8;
  border-radius: 14px;
  background: #fbf7fe;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.instagram-publish-box strong { font-size: 14px; }
.instagram-publish-box span,
.instagram-publish-box small { display: block; line-height: 1.45; }
.instagram-publish-button {
  align-self: flex-start;
  margin-top: 8px;
  padding: 11px 15px;
  border: 0;
  border-radius: 10px;
  background: #6f3b8f;
  color: white;
  font-weight: 700;
  cursor: pointer;
}
.instagram-publish-button:hover { filter: brightness(0.96); }
.instagram-publish-button:disabled { opacity: 0.6; cursor: wait; }
.draft-list-instagram {
  color: #6f3b8f;
  font-weight: 650;
  font-size: 12px;
}

/* Social Publisher V2 */
.facebook-publish-box {
  border-color: #b9d0f4;
  background: #f5f8fe;
}
.facebook-publish-box .facebook-post-publish-button {
  background: #2467c9;
}
.draft-list-facebook {
  color: #2467c9;
  font-weight: 650;
  font-size: 12px;
}

/* --- Per-placement media overrides --- */
.media-override-section {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfcfd;
}
.media-override-section[hidden],
.media-override-card[hidden],
.media-override-upload[hidden] { display: none !important; }
.media-override-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.media-override-heading strong { font-size: 14px; }
.media-override-heading strong span { font-weight: 500; color: #6b7280; }
.media-override-heading small { color: #6b7280; line-height: 1.4; }
.media-override-grid {
  display: grid;
  gap: 10px;
}
.media-override-card {
  border: 1px solid #d9dde3;
  border-radius: 12px;
  padding: 12px;
  background: #fff;
  transition: border-color .15s ease, background .15s ease;
}
.media-override-card.is-good {
  border-color: #9bd6b0;
  background: #f2fbf5;
}
.media-override-card.is-warning {
  border-color: #ead39c;
  background: #fffaf0;
}
.media-override-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.media-override-title strong { font-size: 14px; }
.media-override-title span { font-size: 12px; color: #6b7280; text-align: right; }
.media-override-status {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
  line-height: 1.35;
}
.media-override-status strong { font-size: 13px; }
.media-override-status span { font-size: 12px; color: #5f6773; }
.media-override-card.is-good .media-override-status strong { color: #187a3c; }
.media-override-card.is-warning .media-override-status strong { color: #8a5b00; }
.media-override-upload input[type="file"] {
  width: 100%;
  font-size: 12px;
}

.media-override-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.media-override-actions .media-override-upload {
  flex: 1 1 220px;
}
.media-override-preview {
  width: 118px;
  margin: 8px 0 10px;
  border: 1px dashed #ccd4df;
  border-radius: 10px;
  overflow: hidden;
  background: #f5f7fa;
}
.media-override-preview[hidden] { display: none !important; }
.media-override-preview img {
  display: block;
  width: 100%;
  height: auto;
}
.media-override-preview small {
  display: block;
  padding: 5px 7px;
  color: #667085;
  font-size: 10px;
}
.media-override-hint {
  display: block;
  margin-top: 8px;
  color: #6b7280;
  line-height: 1.4;
}

.target-status-note[hidden] { display: none !important; }
.target-status-note {
  margin-top: 8px;
  line-height: 1.45;
}
.target-status-note strong { display: block; margin-bottom: 4px; }
.media-override-card.is-disabled-ui {
  opacity: .82;
}
.media-override-card.is-disabled-ui .secondary-button,
.media-override-card.is-disabled-ui input[type="file"] {
  cursor: not-allowed;
}
.media-override-disabled-note {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff7e6;
  border: 1px solid #f2d190;
  color: #7a5710;
  font-size: 12px;
  line-height: 1.45;
}
.media-override-disabled-note strong { display: block; margin-bottom: 4px; }
.meta-placement-card .meta-disabled-reason {
  display: block;
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff7e6;
  border: 1px solid #f2d190;
  color: #7a5710;
  font-size: 12px;
  line-height: 1.45;
}
.draft-asset { position: relative; }
.draft-asset-badge {
  position: absolute;
  left: 6px;
  top: 6px;
  z-index: 2;
  max-width: calc(100% - 12px);
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(20, 24, 32, .78);
  color: white;
  font-size: 10px;
  line-height: 1.2;
  pointer-events: none;
}
@media (max-width: 720px) {
  .media-override-title { flex-direction: column; align-items: flex-start; }
  .media-override-title span { text-align: left; }
}

/* Meta placement asset studio */
.meta-placement-section {
  margin: 18px 0;
  border: 1px solid #d9dce2;
  border-radius: 14px;
  padding: 14px;
  background: #fbfcfe;
}
.meta-placement-section[hidden] { display: none !important; }
.meta-placement-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.meta-placement-heading > div { display: flex; flex-direction: column; gap: 4px; }
.meta-placement-heading strong { font-size: 14px; }
.meta-placement-heading small { color: #667085; line-height: 1.4; }
.meta-placement-master {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
}
.meta-placement-note, .meta-placement-caveat { margin: 10px 0; }
.meta-placement-caveat { color: #67510a; background: #fff9df; border-color: #ecd88a; }
.meta-placement-grid { display: grid; gap: 12px; }
.meta-placement-grid.is-disabled { opacity: .68; }
.meta-placement-card {
  border: 1px solid #dfe3e8;
  border-radius: 12px;
  padding: 12px;
  background: white;
}
.meta-placement-card.is-ready { border-color: #9bd3ad; background: #f7fff9; }
.meta-placement-card.is-fallback { border-color: #edc77b; background: #fffaf0; }
.meta-placement-card.is-missing { border-color: #e0a6a6; background: #fff7f7; }
.meta-placement-card.is-disabled { background: #f6f7f8; color: #777; }
.meta-placement-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.meta-placement-card-head > label { display: flex; gap: 8px; align-items: flex-start; }
.meta-placement-card-head > label span { display: flex; flex-direction: column; gap: 2px; }
.meta-placement-card-head small { color: #697386; font-weight: 500; }
.meta-placement-state {
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 800;
  background: #eceff3;
  white-space: nowrap;
}
.meta-placement-card.is-ready .meta-placement-state { background: #dff5e6; color: #126b34; }
.meta-placement-card.is-fallback .meta-placement-state { background: #fff0cc; color: #8a5a00; }
.meta-placement-card.is-missing .meta-placement-state { background: #fde8e8; color: #9b2c2c; }
.meta-placement-asset-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 12px 0 8px;
}
.meta-placement-preview {
  height: 110px;
  border: 1px dashed #cfd5dd;
  border-radius: 10px;
  background: #f4f6f8;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 11px;
  color: #737b88;
}
.meta-placement-preview img { width: 100%; height: 86px; object-fit: contain; background: #eef1f4; }
.meta-placement-preview small { display: block; width: 100%; padding: 4px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta-placement-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.meta-placement-actions .secondary-button { margin: 0; }
.meta-file-label {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid #cfd5dd;
  border-radius: 8px;
  padding: 7px 10px;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
.meta-file-label input { display: none; }
.meta-clear-asset {
  border: 0;
  background: transparent;
  color: #a53a31;
  font-size: 11px;
  cursor: pointer;
}
.meta-placement-assignment {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f6f8fa;
  font-size: 11px;
  margin-bottom: 8px;
}
.meta-placement-assignment span { color: #687180; line-height: 1.4; }
.meta-placement-list { display: grid; gap: 5px; }
.meta-placement-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  border-radius: 7px;
  padding: 6px 7px;
  font-size: 11px;
  background: #f7f8fa;
}
.meta-placement-item em { font-style: normal; color: #7a828f; font-size: 10px; }
.meta-placement-item.is-covered { background: #eaf8ef; color: #155f31; }
.meta-placement-item.is-covered em { color: #187a3c; font-weight: 800; }
.meta-placement-item.is-fallback { background: #fff4dc; color: #805300; }
.meta-placement-item.is-fallback em { color: #8a5a00; font-weight: 800; }
.meta-placement-item.is-missing { background: #fdecec; color: #8c2d2d; }
.meta-placement-item.is-missing em { color: #8a5a00; font-weight: 800; }
.meta-placement-item.is-off { opacity: .62; }
@media (max-width: 650px) {
  .meta-placement-heading { flex-direction: column; }
  .meta-placement-asset-row { grid-template-columns: 1fr; }
  .meta-placement-preview { height: 170px; }
  .meta-placement-preview img { height: 142px; }
}
.meta-generate-all { margin: 0 0 12px; }


/* V6 upload UX + media preview modal */
.primary-upload-section { margin: 14px 0 10px; padding: 14px; border: 2px solid #cfe1ff; border-radius: 16px; background: #f7fbff; }
.primary-upload-heading { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.primary-upload-heading strong { font-size:16px; }
.primary-upload-heading small { color:#5d6678; }
.primary-upload-label { display:block; background:white; border:1px dashed #8bb0ff; border-radius:14px; padding:12px; }
.primary-upload-label input[type=file] { display:block; margin-top:8px; }
.primary-upload-help { display:block; margin-top:8px; font-size:12px; color:#5d6678; }
.carousel-upload-toggle { display:flex; align-items:flex-start; gap:9px; margin-top:12px; padding:10px 11px; border:1px solid #d9e5fb; border-radius:11px; background:#f8fbff; cursor:pointer; }
.carousel-upload-toggle input { margin-top:3px; flex:0 0 auto; }
.carousel-upload-toggle span { display:flex; flex-direction:column; gap:2px; }
.carousel-upload-toggle strong { font-size:13px; color:#26344d; }
.carousel-upload-toggle small { font-size:11px; line-height:1.45; color:#667085; }
.carousel-upload-rule { display:block; margin-top:7px; font-size:11px; line-height:1.45; color:#667085; }
.upload-selection-note { margin-top: 10px; }
.upload-preview-large { gap: 14px; padding-top: 12px; }
.upload-item { position: relative; flex: 0 0 180px; border-radius: 14px; cursor: pointer; }
.upload-item img, .upload-item video { height: 180px; object-fit: cover; }
.upload-item span { font-size: 11px; padding: 9px 10px; }
.upload-item .upload-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; background:white; border-top:1px solid var(--line); }
.upload-item .upload-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.upload-item .upload-badge { display:inline-flex; font-size:10px; font-weight:700; color:#1e4bb8; background:#e7f0ff; border-radius:999px; padding:3px 7px; }
.upload-item .upload-remove, .upload-item .upload-view,
.media-preview-open, .draft-asset .asset-open-btn { position:absolute; z-index:2; border:none; border-radius:999px; width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.18); }
.upload-item .upload-remove { top:8px; right:8px; background:#ffffff; color:#a32020; }
.upload-item .upload-view, .media-preview-open, .draft-asset .asset-open-btn { top:8px; left:8px; background:#ffffff; color:#334; }
.upload-item.is-primary-source { outline:3px solid #7ea5ff; box-shadow:0 0 0 4px rgba(126,165,255,.15); }
.upload-item.is-primary-source::after { content:'AI izvor'; position:absolute; left:10px; bottom:48px; background:#1e4bb8; color:white; font-size:10px; font-weight:700; border-radius:999px; padding:4px 8px; }
.media-preview-clickable, .draft-asset { position:relative; cursor:pointer; }
.media-preview-clickable img, .media-preview-clickable video, .draft-asset img, .draft-asset video { object-fit: cover; }
.media-lightbox { position: fixed; inset:0; background: rgba(16, 24, 40, .72); display:none; align-items:center; justify-content:center; padding:24px; z-index:9999; }
.media-lightbox.is-open { display:flex; }
.media-lightbox-dialog { width:min(960px, 96vw); max-height:92vh; background:white; border-radius:18px; overflow:hidden; box-shadow:0 18px 64px rgba(0,0,0,.35); display:flex; flex-direction:column; }
.media-lightbox-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; border-bottom:1px solid var(--line); }
.media-lightbox-head strong { display:block; }
.media-lightbox-head small { color:#5d6678; }
.media-lightbox-actions { display:flex; gap:10px; align-items:center; }
.media-lightbox-body { padding:16px; display:flex; align-items:center; justify-content:center; background:#f4f6fa; min-height:320px; }
.media-lightbox-body img, .media-lightbox-body video { max-width:100%; max-height:70vh; object-fit:contain; border-radius:12px; background:white; }
.media-lightbox-close, .media-lightbox-remove { border:none; border-radius:10px; padding:10px 14px; cursor:pointer; font-weight:600; }
.media-lightbox-close { background:#eef2f8; }
.media-lightbox-remove { background:#fff3f3; color:#a32020; }
.media-lightbox-remove[hidden] { display:none; }


/* Phase 7: production login / admin session */
.logout-form{margin:8px 0 0}.logout-button{width:100%;border:1px solid #363943;background:transparent;color:#cfd3dc;border-radius:10px;padding:9px 12px;cursor:pointer;text-align:left}.logout-button:hover{background:#24262d;color:#fff}
.login-body{min-height:100vh;margin:0;background:#f3f5f8;display:grid;place-items:center;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#17191f}.login-shell{width:min(440px,calc(100% - 32px))}.login-card{background:#fff;border:1px solid #e1e4ea;border-radius:18px;padding:28px;box-shadow:0 16px 48px rgba(22,27,37,.08)}.login-brand{color:#17191f;margin-bottom:28px}.login-card h1{margin:0 0 8px}.login-form{display:grid;gap:16px;margin-top:22px}.login-form label{display:grid;gap:7px;font-weight:700}.login-form input[type=text],.login-form input[type=password]{width:100%;box-sizing:border-box;border:1px solid #cfd5df;border-radius:10px;padding:12px 13px;font:inherit}.login-form .primary-button{width:100%;justify-content:center;padding:12px 15px}.login-form .primary-button:disabled{opacity:.45;cursor:not-allowed}