/* mod-ads — dashboard + injected ad-unit styles. Both the section page and the
   global inject:true block load this stylesheet, so ad-unit chrome (top/side/
   interstitial) lives here alongside the dashboard. */

/* ── dashboard ─────────────────────────────────────────────────── */
#ads-app { position: relative; width: 100%; height: 100%; color: var(--text, #e6e9ee); font-size: var(--m-text, 15px); }
#ads-tabs { margin-bottom: 14px; }
.ads-panel { max-width: 860px; }
.ads-load { color: var(--text-dim, #9aa4b2); padding: 24px 0; }
#ads-app input[type="checkbox"], #ads-app input[type="radio"] { accent-color: var(--accent); }

.ads-row, .ads-master, .ads-set-row { display: flex; align-items: center; gap: 14px; }
.ads-master, .ads-set-row { padding: 14px; border: 1px solid var(--border, #2a2f3a); border-radius: 12px; margin-bottom: 14px; background: var(--card, #171a21); }
.ads-master-t { font-weight: 700; }
.ads-master-s { color: var(--text-dim, #9aa4b2); font-size: 13px; }

.ads-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: 0 0 auto; }
.ads-switch input { opacity: 0; width: 0; height: 0; }
.ads-switch span { position: absolute; inset: 0; background: #3a3f4b; border-radius: 26px; transition: .15s; cursor: pointer; }
.ads-switch span:before { content: ''; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .15s; }
.ads-switch input:checked + span { background: var(--accent); }
.ads-switch input:checked + span:before { transform: translateX(20px); }

.ads-placements-pick { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.ads-pl-item { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--border, #2a2f3a); border-radius: 999px; cursor: pointer; }
.ads-pl-item.disabled { opacity: .45; cursor: not-allowed; }

.ads-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.ads-kpi { padding: 14px; border: 1px solid var(--border, #2a2f3a); border-radius: 12px; background: var(--card, #171a21); }
.ads-kpi-l { color: var(--text-dim, #9aa4b2); font-size: 12px; }
.ads-kpi-v { font-size: 22px; font-weight: 800; margin-top: 4px; }
.ads-kpi-chg { font-size: 12px; }
.ads-kpi-chg.up { color: #4ccf8f; } .ads-kpi-chg.down { color: #ff7a7a; }

.ads-chart-wrap { height: 180px; margin-bottom: 18px; }
.ads-payout { display: flex; align-items: center; justify-content: space-between; padding: 16px; border: 1px solid var(--border, #2a2f3a); border-radius: 12px; background: var(--card, #171a21); margin-bottom: 12px; }
.ads-bal { font-size: 24px; font-weight: 800; }
.ads-bal-s { color: var(--text-dim, #9aa4b2); font-size: 13px; }

.ads-btn { background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 9px 16px; font-weight: 700; cursor: pointer; }
.ads-btn:hover { filter: brightness(1.08); }
.ads-btn:disabled { opacity: .5; cursor: default; }
.ads-btn.ghost { background: transparent; border: 1px solid var(--border, #2a2f3a); color: var(--text-dim, #9aa4b2); }
.ads-devrow { display: flex; align-items: center; gap: 10px; }
.ads-dev-s { color: var(--text-dim, #9aa4b2); font-size: 12px; }
.ads-banner-warn { background: #4a2323; color: #ffb4b4; padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; }
.ads-note { background: #1e2c3a; color: #bcd6ff; padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; }

/* creatives */
.ads-c-intro, .ads-set-intro { color: var(--text-dim, #9aa4b2); margin-bottom: 14px; }
.ads-c-group { margin-bottom: 18px; }
.ads-c-h { font-weight: 700; margin-bottom: 8px; }
.ads-c-empty { color: var(--text-dim, #9aa4b2); font-size: 13px; }
.ads-c-item { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--border, #2a2f3a); border-radius: 10px; margin-bottom: 8px; }
.ads-c-thumb { width: 90px; height: 50px; object-fit: cover; border-radius: 6px; background: #0d0f14; }
.ads-c-meta { flex: 1; min-width: 0; }
.ads-c-title { font-weight: 600; }
.ads-c-link { color: var(--text-dim, #9aa4b2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ads-c-active { font-size: 12px; color: var(--text-dim, #9aa4b2); display: flex; align-items: center; gap: 5px; }
.ads-c-del { background: transparent; border: 1px solid #5a2b2b; color: #ff8f8f; border-radius: 6px; padding: 5px 10px; cursor: pointer; }
.ads-c-add { margin-top: 20px; padding: 16px; border: 1px dashed var(--border, #2a2f3a); border-radius: 12px; }
.ads-drop { min-height: 120px; margin-bottom: 12px; }
.ads-c-fields { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ads-c-fields input, .ads-c-fields select, .ads-inl input { background: #0f1116; border: 1px solid var(--border, #2a2f3a); color: var(--text, #e6e9ee); border-radius: 7px; padding: 8px 10px; }
.ads-c-fields input { flex: 1; min-width: 160px; }

/* admin settings */
.ads-set-block { padding: 14px; border: 1px solid var(--border, #2a2f3a); border-radius: 12px; margin-bottom: 14px; background: var(--card, #171a21); }
.ads-inl { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim, #9aa4b2); font-size: 13px; }
.ads-inl input { width: 80px; }

/* ── injected ad units (global chrome) ─────────────────────────── */
.ads-unit { position: relative; }
.ads-label { position: absolute; top: 2px; left: 4px; font-size: 9px; letter-spacing: .5px; text-transform: uppercase; color: rgba(255,255,255,.55); background: rgba(0,0,0,.45); padding: 1px 5px; border-radius: 3px; z-index: 2; pointer-events: none; }
.ads-a { display: block; }
.ads-img { display: block; max-width: 100%; height: auto; }
.ads-frame { border: 0; }

#ads-top { display: flex; justify-content: center; padding: 8px 0; background: transparent; }
.ads-top-unit { max-width: 728px; width: 100%; }
.ads-top-unit .ads-img { width: 100%; max-height: 100px; object-fit: contain; border-radius: 8px; }
.ads-top-unit .ads-frame { width: 728px; height: 90px; max-width: 100%; }

#ads-side { position: fixed; top: 90px; right: 14px; width: 300px; z-index: 40; display: none; }
@media (min-width: 1300px) { #ads-side { display: block; } }
.ads-side-unit .ads-img { width: 300px; max-width: 100%; border-radius: 8px; }
.ads-side-unit .ads-frame { width: 300px; height: 250px; }

.ads-inter-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.78); z-index: 10000; display: flex; align-items: center; justify-content: center; }
.ads-inter-card { position: relative; max-width: 90vw; max-height: 86vh; background: #0d0f14; border-radius: 12px; padding: 8px; display: flex; flex-direction: column; align-items: center; }
.ads-inter-card img { max-width: 78vw; max-height: 68vh; border-radius: 8px; display: block; }
.ads-inter-x { margin-top: 10px; background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 9px 20px; font-weight: 700; cursor: pointer; }

@media (max-width: 640px) {
  .ads-kpis { grid-template-columns: repeat(2, 1fr); }
}