:root{
  --cs-blue:#009FD7; --cs-blue-dark:#0079A8; --cs-navy:#141B41;
  --cs-orange:#F2AA31; --cs-orange-deep:#EE5622;
  --ink:#141B41; --ink-soft:#4a5578; --ink-faint:#7c86a0;
  --paper:#f5f8fb; --surface:#fff; --line:#d9e2ea; --line-hard:#bcc9d6;
  --radius:8px; --font:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);background:var(--paper);color:var(--ink);font-size:16px;line-height:1.55}
a{color:var(--cs-blue-dark)}
.topbar{background:var(--cs-blue);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 22px;min-height:60px;flex-wrap:wrap;gap:8px}
.brand{color:#fff;text-decoration:none;font-weight:800;font-size:20px;letter-spacing:-.01em}
.brand span{color:var(--cs-orange)}
.brand em{font-style:normal;font-weight:600;opacity:.85;font-size:15px;margin-left:4px}
.topbar nav{display:flex;align-items:center;gap:10px 20px;flex-wrap:wrap;justify-content:flex-end}
.topbar nav a{color:#fff;text-decoration:none;font-weight:600;font-size:15px}
.topbar nav a:hover{color:var(--cs-navy)}
.topbar .who{color:rgba(255,255,255,.85);font-size:13px}
.link{background:none;border:0;color:#fff;font:inherit;font-size:15px;font-weight:600;cursor:pointer;padding:0;text-decoration:underline}
.wrap{max-width:1080px;margin:32px auto;padding:0 22px}
h1{font-size:28px;margin:0 0 8px}
.muted{color:var(--ink-soft)}
.small{font-size:13px}
.err{background:#fbe7e1;color:var(--cs-orange-deep);border-radius:var(--radius);padding:10px 14px;margin:0 0 14px;font-size:14px}
.btn{background:var(--cs-orange);color:#fff;border:0;border-radius:var(--radius);padding:12px 22px;font:inherit;font-weight:700;cursor:pointer}
.btn:hover{background:#e79a19}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:28px;box-shadow:0 4px 16px rgba(20,27,65,.05)}
.auth{max-width:400px;margin:6vh auto}
.auth h1{font-size:24px}
.auth label{display:block;margin:16px 0 0;font-size:14px;font-weight:600;color:var(--ink-soft)}
.auth input{display:block;width:100%;margin-top:6px;padding:12px 14px;font:inherit;border:1px solid var(--line-hard);border-radius:var(--radius)}
.auth .btn{margin-top:22px;width:100%}
.auth .qr{display:block;margin:16px auto;border:1px solid var(--line);border-radius:8px}
.secret{font-size:13px;color:var(--ink-faint);text-align:center}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:22px 0}
.tile{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--cs-blue);border-radius:12px;padding:22px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:4px;transition:transform .15s,box-shadow .15s}
a.tile:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(20,27,65,.1)}
.tile.static{border-left-color:var(--cs-orange)}
.t-num{font-size:36px;font-weight:800;color:var(--cs-blue-dark);line-height:1}
.tile.static .t-num{color:var(--cs-orange-deep)}
.t-lbl{font-weight:700}
.t-sub{font-size:13px;color:var(--ink-faint)}
.foot{text-align:center;color:var(--ink-faint);font-size:12px;padding:30px}

/* ---- crumbs / headings ---- */
.crumb{font-size:13px;color:var(--ink-faint);margin:0 0 10px}
.crumb a{color:var(--ink-faint)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ok-msg{background:#e4f4ec;color:#1f7a52;border-radius:var(--radius);padding:10px 14px;margin:0 0 14px;font-size:14px}
.btn.ghost{background:#fff;color:var(--cs-blue-dark);border:1px solid var(--line-hard)}
.btn.ghost:hover{background:var(--paper)}
.badge{font-size:12px;font-weight:700;padding:4px 12px;border-radius:99px}
.badge.good{background:#e4f4ec;color:#1f7a52}
.badge.warn{background:#fdf3e0;color:#9a6408}

/* ---- stores list ---- */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0 12px}
.tabs{display:flex;gap:8px}
.tabs a{text-decoration:none;font-size:14px;font-weight:600;color:var(--ink-soft);padding:7px 14px;border-radius:99px;border:1px solid var(--line)}
.tabs a.on{background:var(--cs-blue);color:#fff;border-color:var(--cs-blue)}
#q{padding:10px 14px;border:1px solid var(--line-hard);border-radius:var(--radius);min-width:min(320px,100%);font:inherit}
table.stores{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
table.stores th,table.stores td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle}
table.stores thead th{background:var(--cs-blue);color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.05em}
tr.grp th{background:var(--paper);color:var(--cs-navy);font-size:13px;text-transform:uppercase;letter-spacing:.05em}
.cen{text-align:center}
table.stores a{color:var(--cs-navy);text-decoration:none}
table.stores a:hover{text-decoration:underline}
.edit{color:var(--cs-blue-dark)!important;font-weight:600}
.dot{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:13px;font-weight:800}
.dot.ok{background:#e4f4ec;color:#1f7a52}
.dot.no{background:#f4e7e1;color:#c0603a}

/* ---- edit form ---- */
.editform{margin-top:16px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.editform h3{font-size:15px;margin:18px 0 4px;color:var(--cs-navy)}
.editform h3:first-child{margin-top:0}
.editform label{display:block;margin:12px 0 0;font-size:13px;font-weight:600;color:var(--ink-soft)}
.editform input{display:block;width:100%;margin-top:5px;padding:10px 12px;border:1px solid var(--line-hard);border-radius:var(--radius);font:inherit}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hrow{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:12px;margin-top:8px}
.hrow label{margin:0}
.hrow input{margin:0}
.actions{display:flex;gap:12px;margin-top:24px}
@media(max-width:760px){.cols{grid-template-columns:1fr}}

/* import */
.card input[type=file]{display:block;margin:12px 0 16px}

/* ---- catalogue ---- */
.ok{background:#e4f4ec;color:#1f7a52;border-radius:var(--radius);padding:10px 14px;margin:0 0 14px;font-size:14px}
.pill{display:inline-block;font-size:11px;font-weight:800;padding:3px 10px;border-radius:99px;margin-left:8px;text-transform:uppercase;letter-spacing:.05em}
.pill.live{background:#e4f4ec;color:#1f7a52}
form.stack label{display:block;margin:0 0 16px;font-size:13px;font-weight:600;color:var(--ink-soft)}
form.stack input[type=month],form.stack input[type=text],form.stack input:not([type]){display:block;width:min(360px,100%);margin-top:5px;padding:10px 12px;border:1px solid var(--line-hard);border-radius:var(--radius);font:inherit}
form.stack .hint{display:block;font-weight:400;color:var(--ink-faint);font-size:12.5px;margin-top:5px}
.opt{font-weight:400;color:var(--ink-faint);text-transform:none}
form.inline{display:inline}
.btn.small{padding:7px 14px;font-size:13px}
.link.danger{color:var(--cs-orange-deep)}
table.grid-table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:24px}
table.grid-table th,table.grid-table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle}
table.grid-table thead th{background:var(--cs-blue);color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.05em}
table.grid-table a{color:var(--cs-navy);text-decoration:none}
table.grid-table a:hover{text-decoration:underline}
table.grid-table td.right{text-align:right}
tr.is-current{background:#f2fbf6}
dl.meta{display:grid;grid-template-columns:120px 1fr;gap:8px 18px;margin:0;font-size:14px}
dl.meta dt{font-weight:700;color:var(--ink-soft)}
dl.meta dd{margin:0}
.pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px;margin-top:14px}
.pg{margin:0}
.pg img{width:100%;height:auto;border:1px solid var(--line);border-radius:6px;background:#fff;display:block}
.pg figcaption{font-size:12.5px;color:var(--ink-faint);margin-top:6px;text-align:center}
.pill.bad{background:#fbe7e1;color:var(--cs-orange-deep)}
.logbox{margin-top:16px}
.logbox summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--cs-blue-dark)}
.logbox pre{background:#0f1530;color:#d7e0e8;padding:14px 16px;border-radius:8px;overflow:auto;font-size:12px;line-height:1.55;margin-top:10px;max-height:340px}
.card .hint{color:var(--ink-faint);font-size:12.5px}

/* ---- competitions ---- */
.pill.warn{background:#fdf3e0;color:#9a6408}
code{font-family:var(--f-mono,ui-monospace,monospace);font-size:.92em}
.fieldrow{border:1px solid var(--line);border-radius:8px;padding:14px 16px;margin:0 0 14px;background:var(--paper)}
.fieldrow__bar{display:flex;align-items:center;gap:12px;margin-bottom:10px;font-size:13px}
.fieldrow__bar .spacer{flex:1}
.fieldrow__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}
.fieldrow__grid label{display:block;font-size:13px;font-weight:600;color:var(--ink-soft)}
.fieldrow__grid input,.fieldrow__grid select,.fieldrow__grid textarea{display:block;width:100%;margin-top:5px;padding:9px 11px;border:1px solid var(--line-hard);border-radius:var(--radius);font:inherit}
.fieldrow__grid label.tick{display:flex;align-items:center;gap:8px;align-self:end;padding-bottom:9px}
.fieldrow__grid label.tick input{width:auto;margin:0}
.fieldrow__grid .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
form.stack .card label{display:block;margin:0 0 14px}
form.stack .card .two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
form.stack select,form.stack textarea{display:block;width:min(360px,100%);margin-top:5px;padding:10px 12px;border:1px solid var(--line-hard);border-radius:var(--radius);font:inherit}
pre.embed{background:#0f1530;color:#d7e0e8;padding:12px 14px;border-radius:6px;overflow:auto;font-size:13px;margin:0 0 12px}
.tablewrap{overflow-x:auto}
.nowrap{white-space:nowrap}
.pager{display:flex;gap:8px;font-size:14px}
.pager .on{font-weight:700;color:var(--cs-navy)}
@media(max-width:760px){.fieldrow__grid{grid-template-columns:1fr}form.stack .card .two{grid-template-columns:1fr}}
/* datetime-local was left inline because the earlier selector only covered
   month/text/untyped inputs, so Opens/Closes sat beside their labels. */
/* Every text-ish input, rather than naming types one at a time — date and url
   were both missed that way and sat inline with their labels. */
form.stack input:not([type=checkbox]):not([type=file]){display:block;width:min(360px,100%);margin-top:5px;padding:10px 12px;border:1px solid var(--line-hard);border-radius:var(--radius);font:inherit}
.actions{align-items:center}
.fieldrow__bar button.link{font-size:12.5px;font-weight:700;color:var(--cs-blue-dark);padding:3px 8px;border:1px solid var(--line);border-radius:99px;background:var(--surface)}
.fieldrow__bar button.link:hover:not([disabled]){background:#fff;border-color:var(--line-hard)}
.fieldrow__bar button.link[disabled]{opacity:.35;cursor:not-allowed}
.fieldrow__bar button.link.danger{color:var(--cs-orange-deep)}
/* consent labels are long; stop them dominating the entries table header */
table.grid-table thead th{max-width:16em;font-weight:700}

/* ---- dashboard: running competitions ---- */
.runhead{font-size:16px;margin:26px 0 10px}
.runlist{display:grid;gap:10px}
.runrow{display:grid;grid-template-columns:1fr auto;gap:4px 18px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--cs-orange);
  border-radius:10px;padding:14px 18px;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
.runrow:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(20,27,65,.08)}
.runrow__name{font-weight:700;color:var(--cs-navy)}
.runrow__meta{grid-column:1;font-size:13px;color:var(--ink-faint)}
.runrow__go{grid-column:2;grid-row:1/3;font-size:13.5px;font-weight:700;color:var(--cs-blue-dark);white-space:nowrap}
@media(max-width:560px){.runrow{grid-template-columns:1fr}.runrow__go{grid-column:1;grid-row:auto}}

/* ---- users ---- */
.rolepick{display:flex;gap:8px;align-items:center}
.rolepick select{padding:6px 10px;border:1px solid var(--line-hard);border-radius:var(--radius);font:inherit;font-size:13px}
.rolepick select[disabled]{opacity:.6}
.card.auth .hint{color:var(--ink-faint);font-size:12.5px;margin:6px 0 14px}

/* ---- partner offers ---- */
label.tickrow{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:start}
label.tickrow input{margin:3px 0 0;width:auto}
label.tickrow .hint{grid-column:2}
.adart{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px}
.adart h3{font-size:14px;margin:0 0 10px}
.adart form{margin-top:12px;display:grid;gap:10px;justify-items:start}
.adprev{max-width:100%;border:1px solid var(--line);border-radius:8px;display:block;background:#fff}
.adprev--logo{max-width:200px;padding:10px;background:var(--surface)}
/* The mobile creative is square, so left unbounded it towers over the other
   two previews. */
.adprev--mobile{max-width:230px}
.btn.small{padding:8px 16px;font-size:13.5px}
@media(max-width:760px){.adart{grid-template-columns:1fr}}

/* ---- dashboard: publish strip + attention list ---- */
.pubbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin:20px 0 4px;
  padding:16px 22px;border-radius:12px;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--cs-blue)}
.pubbar:hover{background:#fff;box-shadow:0 6px 18px rgba(20,27,65,.07)}
.pubbar__icon{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-weight:800;font-size:15px;
  background:var(--cs-blue);color:#fff}
.pubbar__text{font-weight:600}
.pubbar__go{font-size:13.5px;font-weight:700;color:var(--cs-blue-dark);white-space:nowrap}
.pubbar--ok{border-left-color:#1f7a52}    .pubbar--ok .pubbar__icon{background:#1f7a52}
.pubbar--bad{border-left-color:var(--cs-orange-deep)} .pubbar--bad .pubbar__icon{background:var(--cs-orange-deep)}
.pubbar--idle{border-left-color:var(--line-hard)}     .pubbar--idle .pubbar__icon{background:var(--ink-faint)}

.runrow--ad{border-left-color:var(--cs-blue)}
.needlist{display:grid;gap:10px}
.needrow{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;
  background:#fdf6e9;border:1px solid #f0dcb4;border-left:4px solid var(--cs-orange);
  border-radius:10px;padding:14px 18px;text-decoration:none;color:var(--cs-navy);font-size:14.5px}
.needrow:hover{background:#fbf0dc}
.needrow__go{font-weight:700;color:var(--cs-blue-dark);white-space:nowrap;font-size:13.5px}
@media(max-width:560px){.pubbar{grid-template-columns:auto 1fr}.pubbar__go{grid-column:2}
  .needrow{grid-template-columns:1fr}}


/* The nav grew from three items to six. Without wrapping it forced the whole
   page wider than a phone screen, which clipped every panel on the right. */
@media(max-width:900px){
  .topbar{padding:10px 16px}
  .topbar nav{gap:8px 14px}
  .topbar nav a{font-size:14px}
  .topbar .who{order:99;width:100%;text-align:right}
}
@media(max-width:600px){
  .topbar{justify-content:center}
  .topbar nav{justify-content:center}
  /* Who you are is on the dashboard itself; the nav needs the room more. */
  .topbar .who{display:none}
}
.cropwarn{background:#fdf6e9;border:1px solid #f0dcb4;border-radius:6px;padding:10px 12px;font-size:13px;color:#7a5a12;margin:10px 0 0}

/* ---- on/off switch ----
   A real checkbox underneath, only restyled. It submits with the form, works
   from the keyboard, and still works with JavaScript off — the list version
   just needs its Apply button in that case. */
.switch{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;cursor:pointer;margin:0 0 14px}
.switch--bare{grid-template-columns:auto;margin:0}
.switch input{position:absolute;opacity:0;width:44px;height:24px;margin:0;cursor:pointer}
.switch__track{position:relative;width:44px;height:24px;border-radius:99px;background:var(--line-hard);
  transition:background .18s ease;flex:none;display:block}
.switch__knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(20,27,65,.35);transition:transform .18s ease}
.switch input:checked + .switch__track{background:#1f9d5b}
.switch input:checked + .switch__track .switch__knob{transform:translateX(20px)}
.switch input:focus-visible + .switch__track{outline:2px solid var(--cs-blue);outline-offset:2px}
.switch__text{font-size:13px;font-weight:600;color:var(--ink-soft)}
.switch__text .hint{display:block;font-weight:400;margin-top:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---- nav groups ---- */
.navgroup { position: relative; }
.navgroup > summary {
  list-style: none; cursor: pointer; color: #fff; font-weight: 600; font-size: 15px;
  display: inline-flex; align-items: center; gap: 6px;
}
.navgroup > summary::-webkit-details-marker { display: none; }
.navgroup > summary::after { content: "▾"; font-size: 11px; opacity: .85; }
.navgroup > summary:hover { color: var(--cs-navy); }
.navgroup > summary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 3px; }
.navgroup[open] > summary { color: var(--cs-navy); }
.navgroup__menu {
  position: absolute; top: calc(100% + 12px); right: 0; min-width: 200px; z-index: 30;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 14px 34px rgba(20,27,65,.20); padding: 8px; display: grid; gap: 2px;
}
/* Scoped under .topbar nav, which sets white link text and would otherwise win
   on specificity — white on a white menu is invisible. */
.topbar nav .navgroup__menu a {
  display: block; padding: 9px 12px; border-radius: 6px; white-space: nowrap;
  color: var(--cs-navy); font-size: 14.5px; font-weight: 600; text-decoration: none;
}
.topbar nav .navgroup__menu a:hover { background: var(--surface); color: var(--cs-blue-dark); }
@media (max-width: 900px) { .navgroup__menu { right: auto; left: 0; } }

/* ---- meta tags ---- */
.metalist { display: grid; gap: 18px; margin-top: 18px; }
.metacard {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 22px 24px; display: grid; gap: 14px;
}
.metacard__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.metacard__head h2 { font-size: 18px; margin: 0; }
.metacard__head code { color: var(--ink-faint); font-size: 13px; }
.metacard__note { margin: 0; font-size: 13px; color: #7a5a12; background: #fdf6e9;
  border: 1px solid #f0dcb4; border-radius: 6px; padding: 9px 12px; }
.metacard label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin: 0; }
.metacard input, .metacard textarea {
  display: block; width: 100%; margin-top: 5px; padding: 10px 12px;
  border: 1px solid var(--line-hard); border-radius: var(--radius); font: inherit; font-size: 14.5px;
}
.metacard textarea { resize: vertical; }
.counter { display: block; margin-top: 5px; font-size: 12.5px; color: var(--ink-faint); font-weight: 400; }
.counter--over { color: #9a6408; font-weight: 700; }
.metacard__actions { display: flex; align-items: center; gap: 14px; }

/* A rough Google result, so the client edits something they recognise. */
.serp { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; display: grid; gap: 3px; }
.serp__url { font-size: 12.5px; color: #4d5156; }
.serp__title { font-size: 18px; color: #1a0dab; line-height: 1.3; }
.serp__desc { font-size: 13.5px; color: #4d5156; line-height: 1.5; }