/* Campaign Creators design tokens — condensed from CC-Web-UI-Kit-2026 (v2.0).
   Infra (headings) is self-hosted; Inter (body) loads from Google Fonts via
   <link> in each page. */

@font-face { font-family: "Infra"; src: url("/fonts/Infra-400.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Infra"; src: url("/fonts/Infra-500.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Infra"; src: url("/fonts/Infra-600.otf") format("opentype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Infra"; src: url("/fonts/Infra-700.otf") format("opentype"); font-weight: 700; font-display: swap; }

:root {
  --cc-white: #FFFFFF;
  --cc-cool-white: #F8F9FC;
  --cc-navy: #0E3860;
  --cc-dark-navy: #0C2237;
  --cc-violet: #8D11ED;
  --cc-turquoise: #35FFD8;
  --cc-turquoise-2: #42D9B8;
  --cc-focus-cyan: #40C9D4;
  --cc-error: #EE3B27;
  --cc-n-100: #F1F3F5; --cc-n-200: #E9ECEF; --cc-n-300: #DEE2E6; --cc-n-400: #CED4DA;
  --cc-n-500: #ADB5BD; --cc-n-600: #868E96; --cc-n-700: #485059;
  --font-heading: "Infra", "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--cc-cool-white);
  color: var(--cc-dark-navy);
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }
::selection { background: var(--cc-turquoise); color: var(--cc-dark-navy); }

/* ---- shared interactive styles (hover/focus can't live inline) ---- */

/* dark search input (viewer sidebar / mobile header) */
.cc-search {
  width: 100%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  border-radius: 3px; padding: 8px 12px; color: #fff; font-size: 13px; font-family: var(--font-body);
}
.cc-search:focus { border-color: var(--cc-turquoise); outline: none; }
.cc-search::placeholder { color: rgba(255,255,255,.5); }

/* role/nav chips on dark */
.chip {
  font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 3px;
  cursor: pointer; white-space: nowrap;
}
.chip-on  { background: var(--cc-turquoise); color: var(--cc-dark-navy); border: 1.5px solid var(--cc-turquoise); }
.chip-off { background: transparent; color: rgba(255,255,255,.8); border: 1.5px solid rgba(255,255,255,.28); }
.chip-off:hover { border-color: rgba(255,255,255,.6); }
.chip-wt-on  { background: #fff; color: var(--cc-dark-navy); border: 1.5px solid #fff; }
.chip-wt-off { background: transparent; color: rgba(255,255,255,.7); border: 1.5px solid rgba(255,255,255,.22); }

/* sidebar nav rows */
.navb {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; border-radius: 3px; border: none; cursor: pointer; text-align: left; font-size: 12.5px;
}
.navb-on  { background: rgba(53,255,216,.1); color: #fff; box-shadow: inset 3px 0 0 var(--cc-turquoise); font-weight: 600; }
.navb-off { background: transparent; color: rgba(255,255,255,.65); font-weight: 400; }
.navb-off:hover { background: rgba(255,255,255,.06); }

/* turquoise CTA */
.ctab {
  display: inline-block; font-size: 12px; font-weight: 600; color: var(--cc-dark-navy);
  background: var(--cc-turquoise); border: none; border-radius: 3px; padding: 7px 14px;
  text-decoration: none; cursor: pointer;
}
.ctab:hover { background: var(--cc-turquoise-2); color: var(--cc-dark-navy); }

/* prompt card */
.pcard {
  background: #fff; border: 1px solid var(--cc-n-300); border-radius: 8px; padding: 18px 18px 14px;
  cursor: pointer; display: flex; flex-direction: column; gap: 8px;
  transition: box-shadow 120ms ease, border-color 120ms ease;
}
.pcard:hover { box-shadow: 0 1px 2px rgba(12,34,55,.06), 0 6px 14px rgba(12,34,55,.1); border-color: var(--cc-n-500); }

/* card copy button */
.copyb {
  font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 3px; cursor: pointer;
  background: transparent; color: var(--cc-navy); border: 1.5px solid var(--cc-navy);
}
.copyb:hover { background: var(--cc-navy); color: #fff; }
.copyb-copied, .copyb-copied:hover { background: var(--cc-turquoise); color: var(--cc-dark-navy); border-color: var(--cc-turquoise); }

/* outline button (navy) */
.outb {
  font-size: 12.5px; font-weight: 600; color: var(--cc-navy); background: none;
  border: 1.5px solid var(--cc-navy); border-radius: 3px; padding: 8px 16px; cursor: pointer;
}
.outb:hover { background: var(--cc-navy); color: #fff; }

/* solid navy button */
.navyb {
  font-size: 13px; font-weight: 600; padding: 9px 20px; border-radius: 3px; cursor: pointer;
  background: var(--cc-navy); color: #fff; border: none;
}
.navyb:hover { background: var(--cc-dark-navy); }
.navyb:disabled { opacity: .5; cursor: default; }

/* panel close ✕ */
.closeb {
  position: absolute; top: 16px; right: 16px; background: rgba(255,255,255,.1); border: none;
  color: #fff; width: 30px; height: 30px; border-radius: 3px; cursor: pointer; font-size: 15px; line-height: 1;
}
.closeb:hover { background: rgba(255,255,255,.22); }

/* detail panel tabs */
.tabb { font-size: 12.5px; font-weight: 600; padding: 9px 14px; background: none; border: none; cursor: pointer; margin-bottom: -1.5px; }
.tabb-on  { border-bottom: 2.5px solid var(--cc-navy); color: var(--cc-dark-navy); }
.tabb-off { border-bottom: 2.5px solid transparent; color: var(--cc-n-600); }

/* panel copy button */
.ocopyb { font-size: 12px; font-weight: 600; padding: 7px 16px; border-radius: 3px; cursor: pointer; border: none; background: var(--cc-navy); color: #fff; }
.ocopyb:hover { background: var(--cc-dark-navy); }
.ocopyb-copied, .ocopyb-copied:hover { background: var(--cc-turquoise); color: var(--cc-dark-navy); }

/* light form inputs (admin + submit modal) */
.ainput {
  width: 100%; border: 1px solid var(--cc-n-400); border-radius: 3px; padding: 9px 12px;
  font-size: 13px; font-family: var(--font-body); color: var(--cc-dark-navy); background: #fff;
}
.ainput:focus { border-color: var(--cc-focus-cyan); outline: none; }
textarea.ainput { resize: vertical; line-height: 1.55; }
.amono { font-family: var(--font-mono); font-size: 12.5px; background: var(--cc-cool-white); padding: 12px 14px; line-height: 1.6; }
.amono:focus { background: #fff; }
.alabel {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--cc-n-700); margin-bottom: 5px;
}

/* admin list row */
.lrow {
  display: block; width: 100%; text-align: left; border: none; cursor: pointer; padding: 12px 16px;
  border-bottom: 1px solid var(--cc-n-100); background: #fff;
}
.lrow:hover { background: var(--cc-cool-white); }
.lrow-on, .lrow-on:hover { background: #F0FDFA; box-shadow: inset 3px 0 0 var(--cc-turquoise); }

/* subtle text button */
.ghostb { background: none; border: none; cursor: pointer; font-size: 12px; font-weight: 600; }

/* editor sign-in chip (sidebar / mobile header) */
.editchip {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: 11px; font-weight: 600; color: var(--cc-turquoise);
  border: 1.5px solid rgba(53,255,216,.5); border-radius: 3px;
  padding: 5px 10px; text-decoration: none;
  transition: border-color 120ms ease, background 120ms ease;
}
.editchip:hover { border-color: var(--cc-turquoise); background: rgba(53,255,216,.08); }
.editchip:focus-visible { outline: 2px solid var(--cc-focus-cyan); outline-offset: 2px; }

@keyframes ccPanelIn { from { transform: translateX(48px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes ccFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes ccToastIn { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--cc-dark-navy); color: #fff; font-size: 13px; font-weight: 500;
  padding: 11px 20px; border-radius: 8px; box-shadow: 0 8px 24px rgba(12,34,55,.3);
  z-index: 100; animation: ccToastIn 180ms ease; display: flex; align-items: center; gap: 10px;
}
.toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cc-turquoise); }