/* ads.appwt.com - main.css */
:root {
  --navy:#0F2744; --forest:#1B4332; --gold:#C4A052;
  --pearl:#FAFAFA; --slate:#334155; --charcoal:#1E2432;
  --line:#e5e7eb; --good:#16a34a; --warn:#d97706; --bad:#b91c1c;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width:100%; overflow-x:hidden; margin:0; padding:0; }
img, video, iframe, picture, svg, canvas, embed, object { max-width:100%; height:auto; }
table { max-width:100%; }
pre, code { max-width:100%; overflow-x:auto; word-wrap:break-word; white-space:pre-wrap; }
body {
  font-family:'Segoe UI','Roboto',system-ui,-apple-system,sans-serif;
  color:var(--charcoal); background:var(--pearl); line-height:1.55; font-size:15px;
}
a { color:var(--navy); }

/* === LOGIN PAGE === */
.login-bg {
  background: linear-gradient(135deg, var(--navy) 0%, var(--forest) 50%, var(--gold) 100%);
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
}
.login-wrap { width:100%; max-width:420px; }
.login-card {
  background:#fff; border-radius:14px; padding:36px 32px; box-shadow:0 14px 40px rgba(0,0,0,0.25);
  text-align:center;
}
.login-logo { width:108px; height:108px; border-radius:18px; margin:0 auto 14px; display:block; box-shadow:0 6px 18px rgba(15,39,68,0.18); }
.login-card h1 { color:var(--navy); font-size:22px; margin:0 0 4px; }
.login-sub { color:var(--slate); font-size:13.5px; margin:0 0 22px; }
.login-card form { text-align:left; }
.flash-err { background:#fee2e2; border:1px solid #fca5a5; color:#991b1b; padding:10px 14px; border-radius:8px; margin-bottom:14px; font-size:14px; }
.field { margin-bottom:14px; }
.field label { display:block; font-size:12px; font-weight:600; color:var(--navy); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:5px; }
.field input, .field textarea, .field select {
  width:100%; padding:10px 12px; border:1.5px solid var(--line); border-radius:8px;
  font-size:14.5px; font-family:inherit; background:#fff;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(15,39,68,0.12);
}
.field .hint { font-weight:400; color:#888; font-size:11.5px; text-transform:none; letter-spacing:0; margin-left:6px; }
.btn-primary, .btn-secondary, .btn-success, .btn-danger {
  display:inline-block; padding:10px 22px; border-radius:8px; cursor:pointer; font-weight:600;
  font-size:14px; text-decoration:none; border:none; line-height:1.2;
}
.btn-primary { background:linear-gradient(135deg, var(--navy), #1e3a5f); color:#fff; }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(15,39,68,0.25); }
.btn-success { background:var(--good); color:#fff; }
.btn-secondary { background:#e5e7eb; color:var(--charcoal); }
.btn-danger { background:var(--bad); color:#fff; }
.login-card .btn-primary { width:100%; padding:13px; font-size:15px; margin-top:6px; }
.login-foot { font-size:11.5px; color:#888; margin-top:22px; }

/* === TOPBAR === */
.topbar {
  background:var(--navy); color:#fff; padding:12px 24px; display:flex; align-items:center;
  justify-content:space-between; flex-wrap:wrap; gap:12px;
}
.brand { color:#fff; text-decoration:none; display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px; }
.brand-logo { width:32px; height:32px; border-radius:6px; }
.topnav { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.topnav a { color:#fff; text-decoration:none; padding:6px 12px; border-radius:6px; font-size:14px; }
.topnav a:hover { background:rgba(255,255,255,0.15); }
.user-email { font-size:12.5px; color:rgba(255,255,255,0.7); margin-left:14px; }
.logout-link { background:rgba(255,255,255,0.1); }

/* === MAIN === */
.main { min-height:calc(100vh - 120px); padding:24px 0 60px; }
.container { max-width:1200px; margin:0 auto; padding:0 20px; }
.page-h1 { color:var(--navy); font-size:26px; margin:0 0 18px; }
.lede { color:var(--slate); font-size:14px; margin-bottom:18px; }
.back-link { color:var(--navy); text-decoration:none; font-size:14px; font-weight:600; display:inline-block; margin-bottom:14px; }
.back-link:hover { text-decoration:underline; }
.muted { color:#888; font-size:12.5px; }
.mono { font-family:Menlo, Monaco, 'Courier New', monospace; font-size:12.5px; }

/* === STATS === */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:12px; margin-bottom:20px; }
.stat { background:#fff; border-radius:10px; padding:14px 16px; border-top:3px solid var(--navy); box-shadow:0 1px 3px rgba(0,0,0,0.06); }
.stat-num { font-size:28px; font-weight:700; color:var(--navy); }
.stat-label { font-size:12px; color:#888; text-transform:uppercase; letter-spacing:0.5px; margin-top:2px; }
.stat-live  { border-top-color:var(--good); }
.stat-ready { border-top-color:#2563eb; }
.stat-draft { border-top-color:#94a3b8; }
.stat-paused{ border-top-color:var(--warn); }
.stat-ended { border-top-color:#475569; }

.toolbar { margin-bottom:18px; display:flex; gap:12px; }

/* === TABLE === */
.grid { width:100%; background:#fff; border-collapse:collapse; box-shadow:0 1px 3px rgba(0,0,0,0.06); border-radius:10px; overflow:hidden; }
.grid th, .grid td { padding:11px 14px; text-align:left; vertical-align:top; font-size:13.5px; border-bottom:1px solid var(--line); }
.grid thead th { background:var(--navy); color:#fff; text-transform:uppercase; font-size:11.5px; letter-spacing:0.5px; }
.grid tbody tr:hover { background:#fafbfc; }

.badge { display:inline-block; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; }
.badge-platform { background:#e0e7ff; color:#3730a3; }
.badge-type     { background:#fef3c7; color:#78350f; }
.badge-status-draft           { background:#e2e8f0; color:#334155; }
.badge-status-ready_to_launch { background:#dbeafe; color:#1e40af; }
.badge-status-live            { background:#dcfce7; color:#166534; }
.badge-status-paused          { background:#fef3c7; color:#854d0e; }
.badge-status-ended           { background:#f3f4f6; color:#475569; }
.badge-status-archived        { background:#e2e8f0; color:#475569; }
.tag-group { font-size:11px; color:#7c3aed; }

.actions { white-space:nowrap; }
.btn-mini { display:inline-block; padding:5px 12px; border-radius:6px; text-decoration:none; font-size:12px; font-weight:600; margin-right:4px; }
.btn-view { background:var(--navy); color:#fff; }
.btn-edit { background:#e5e7eb; color:var(--charcoal); }

.empty { background:#fff; border-radius:12px; padding:50px 30px; text-align:center; color:#888; box-shadow:0 1px 3px rgba(0,0,0,0.06); }

/* === FORM === */
.ad-form fieldset {
  border:1px solid var(--line); border-radius:10px; padding:18px 22px 14px; margin-bottom:18px;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
.ad-form legend { padding:0 8px; font-weight:700; color:var(--navy); font-size:14px; }
.row-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
@media (max-width:700px) { .row-2, .row-3 { grid-template-columns:1fr; } }
.actions-row { display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.ad-form textarea { font-family:Menlo, Monaco, 'Courier New', monospace; font-size:13px; }

/* === SETUP VIEW === */
.setup-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.setup-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; margin-bottom:24px; }
@media (max-width:1000px) { .setup-grid { grid-template-columns:1fr; } }
.card { background:#fff; border-radius:10px; padding:18px 22px; box-shadow:0 1px 3px rgba(0,0,0,0.06); }
.card h2 { color:var(--navy); font-size:16px; margin:0 0 12px; padding-bottom:8px; border-bottom:2px solid var(--gold); }
.card h3 { color:var(--forest); font-size:13.5px; margin:14px 0 8px; text-transform:uppercase; letter-spacing:0.5px; }
.kv { display:grid; grid-template-columns:130px 1fr; gap:6px 12px; font-size:13px; margin:0; }
.kv dt { color:var(--navy); font-weight:600; }
.kv dd { margin:0; color:var(--slate); word-break:break-word; }
.urllink { word-break:break-all; }
.copy-list { padding-left:20px; margin:0; font-family:Menlo, Monaco, 'Courier New', monospace; font-size:12.5px; }
.copy-list li { margin:3px 0; display:flex; gap:10px; align-items:baseline; }
.copy-text { flex:1; }
.copy-len { color:#7dd3fc; font-size:11px; }
.kw-list { list-style:none; padding:0; margin:0; columns:2; column-gap:18px; font-size:12.5px; }
.kw-list li { margin:2px 0; break-inside:avoid; }
.kw-list.kw-neg li { color:var(--slate); }
.match-tag { display:inline-block; font-size:9.5px; font-weight:700; padding:1px 5px; border-radius:3px; color:#fff; margin-right:5px; }
.match-exact  { background:#16a34a; }
.match-phrase { background:#2563eb; }
.match-broad  { background:#dc2626; }
.match-neg    { background:#475569; }

.section-h2 { color:var(--navy); font-size:20px; margin:30px 0 14px; padding-bottom:8px; border-bottom:3px solid var(--gold); }
.setup-steps { list-style:none; padding:0; margin:0; counter-reset:step; }
.setup-steps li { display:flex; gap:14px; padding:14px 18px; background:#fff; border-radius:8px; margin-bottom:8px; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
.step-num { background:var(--gold); color:#fff; width:32px; height:32px; flex-shrink:0; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; }
.step-body h4 { margin:0 0 4px; color:var(--navy); font-size:15px; }
.step-instr { font-size:13.5px; color:var(--slate); }
.step-instr code { background:#f3f4f6; padding:1px 5px; border-radius:3px; font-size:12px; }

/* === FOOTER === */
.footer { background:var(--navy); color:rgba(255,255,255,0.65); padding:16px 24px; text-align:center; font-size:12px; }