:root {
  /* Near-black rather than mid-grey. Panels read as raised surfaces against
     it instead of as a second shade of the same thing, and thumbnails stop
     competing with the furniture. */
  --bg: #0b0c0e;
  --panel: #131517;
  --panel-2: #1a1d20;
  --line: #24282c;
  --text: #ffffff;
  --muted: #868e96;
  --accent: #1a5dff;
  --on-accent: #ffffff;
  --good: #3fb950;
  --warn: #d29922;
  --bad: #e5534b;
}
* { box-sizing: border-box; }
/* Nothing here should ever scroll sideways: a stray long filename used to
   push the whole layout over and clip the sidebar off the left edge. */
html, body { max-width: 100%; overflow-x: hidden; }
/* A short page should not leave half a screen of empty dark under the
   footer; push it to the bottom instead. */
body { min-height: 100vh; display: flex; flex-direction: column; }
/* A link is the same colour whether or not you have been there; the
   browser purple reads as a bug on a dark page. */
a:visited { color: inherit; }
.more:visited { color: var(--accent); }
body > .page, body > main { flex: 1; width: 100%; }
body > footer { margin-top: auto; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.5 "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}
body.centred { display: grid; place-items: center; min-height: 100vh; }
/* The sign-in box. Named apart from .card deliberately: it sets a fixed
   width, and sharing the name with the campaign cards made those overflow
   their grid column and overlap each other. */
.auth-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 32px; width: 320px; }
.auth-card h1 { margin: 0; font-size: 24px; letter-spacing: -0.5px; }
.muted { color: var(--muted); }
.error { color: var(--bad); min-height: 20px; margin: 8px 0 0; font-size: 13px; }
input, select, textarea, button {
  font: inherit; color: var(--text); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; width: 100%;
}
textarea { resize: vertical; min-height: 64px; }
button { cursor: pointer; background: var(--accent); color: var(--on-accent); border: none; font-weight: 600; margin-top: 12px; }
button.ghost { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); font-weight: 500; margin: 0; }
button.danger { background: var(--bad); color: #fff; }
button:disabled { opacity: 0.5; cursor: default; }

/**
 * Lighter than the page, so it reads as a surface the content sits under,
 * and its contents line up with the content rather than the window edges -
 * otherwise the logo drifts miles from the first card on a wide screen.
 */
header {
  display: flex; align-items: center; gap: 16px; flex-wrap: nowrap;
  padding: 12px max(22px, calc((100vw - 1180px) / 2));
  border-bottom: 1px solid var(--line); position: sticky; top: 0;
  background: #181b1f; z-index: 5;
}
header h1 { font-size: 18px; margin: 0; letter-spacing: -0.3px; }
header h1 a { display: inline-flex; align-items: center; gap: 9px; }
.logo { height: 21px; width: auto; display: block; }
/* Centred on the line box the mark reads as low next to the wordmark; lift it. */
header .logo { position: relative; top: -1.5px; }
.auth-card .logo { height: 44px; margin: 0 auto 14px; }
header .spacer { flex: 1; }
header button { width: auto; margin: 0; padding: 8px 14px; }

/* The same centred column the header and every other page uses, rather
   than running to the window edges on a wide screen. */
.layout {
  display: grid; grid-template-columns: 220px minmax(0, 1fr);
  gap: 26px; align-items: start;
  max-width: 1180px; width: 100%; margin: 0 auto; padding: 0 22px;
}
aside {
  min-width: 0; padding: 20px 0; position: sticky; top: 62px;
  max-height: calc(100vh - 62px); overflow: auto;
}
aside h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); margin: 20px 0 8px; }
aside h3:first-child { margin-top: 0; }
.pill {
  display: flex; justify-content: space-between; gap: 8px; width: 100%; text-align: left;
  background: none; border: none; color: var(--text); padding: 6px 9px; border-radius: 7px;
  cursor: pointer; font-weight: 500; margin: 0;
}
.pill:hover { background: var(--panel-2); }
.pill.on { background: var(--accent); color: var(--on-accent); }
.pill span { color: var(--muted); font-size: 12px; }
.pill.on span { color: var(--on-accent); }

main { padding: 20px 0 60px; min-width: 0; }
.toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar input[type="search"] { flex: 1; min-width: 200px; }
.toolbar select, .toolbar button { width: auto; margin: 0; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.item { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.item .thumb {
  aspect-ratio: 16/9; background: #000 center/cover no-repeat; background-size: cover;
  display: grid; place-items: center;
  color: var(--muted); font-size: 30px; cursor: pointer; border-bottom: 1px solid var(--line);
}
.item .body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.item .title { font-weight: 600; font-size: 14px; word-break: break-word; }
.item .meta { font-size: 12px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; }
.badge { font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; padding: 2px 6px; border-radius: 5px; background: var(--panel-2); color: var(--muted); }
.badge.vod { background: #22262a; color: #c9d1d9; }
.badge.clip { background: #2b3036; color: #ffffff; }
.badge.uploading { background: #2f3336; color: var(--muted); }
.tags { display: flex; gap: 5px; flex-wrap: wrap; }
.tag { font-size: 11px; background: var(--panel-2); border: 1px solid var(--line); padding: 1px 7px; border-radius: 20px; color: var(--muted); cursor: pointer; }
.item .actions { display: flex; gap: 6px; margin-top: auto; padding-top: 6px; }
.item .actions button { width: auto; flex: 1; margin: 0; padding: 6px; font-size: 12px; }

dialog {
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 14px; padding: 0; width: min(560px, 94vw);
}
dialog::backdrop { background: rgba(0,0,0,0.7); }
dialog .head { padding: 16px 20px; border-bottom: 1px solid var(--line); font-weight: 600; }
dialog .pad { padding: 18px 20px; display: grid; gap: 12px; }
dialog .row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
dialog label { font-size: 12px; color: var(--muted); display: block; margin-bottom: 4px; }
dialog .foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; }
dialog .foot button { width: auto; margin: 0; }
#player { width: min(1000px, 94vw); }
#player video { width: 100%; display: block; background: #000; }

.bar { height: 6px; background: #2b3137; border-radius: 4px; overflow: hidden; }
.bar > div { height: 100%; background: var(--accent); width: 0; transition: width 0.2s; }
.uploads { position: fixed; right: 18px; bottom: 18px; width: 320px; display: grid; gap: 10px; z-index: 20; }
.uploads .u { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.empty { color: var(--muted); text-align: center; padding: 60px 0; }
.pager { display: flex; gap: 8px; justify-content: center; margin-top: 22px; }
.pager button { width: auto; margin: 0; }

.cutter { padding: 12px 14px 14px; display: grid; gap: 10px; border-top: 1px solid var(--line); }
.cutter .marks { display: flex; gap: 10px; align-items: center; }
.cutter .marks input[type="text"], .cutter .marks input:not([type]) { flex: 1; }
.cutter button { width: auto; margin: 0; white-space: nowrap; }

.discord {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: #5865f2; color: #fff; text-decoration: none; font-weight: 600;
  padding: 11px; border-radius: 8px; margin-top: 16px;
}
.discord:hover { background: #4752c4; }
/* Same trap as .dropzone: display:flex above would override the hidden
   attribute, showing a Discord button even when Discord is not configured. */
.discord[hidden] { display: none; }
.or { text-align: center; color: var(--muted); font-size: 12px; margin: 14px 0 10px; }
.who { color: var(--muted); font-size: 13px; }

dialog.wide { width: min(760px, 95vw); }
.queue { display: grid; gap: 8px; max-height: 46vh; overflow: auto; }
.qrow {
  display: grid; grid-template-columns: 1fr 112px 86px 26px; gap: 8px; align-items: center;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; padding: 8px;
}
.qrow input, .qrow select { padding: 7px 9px; font-size: 13px; }
.qrow .file { grid-column: 1 / -1; font-size: 11px; color: var(--muted); margin-bottom: -2px; word-break: break-all; }
.qrow .drop-x { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 17px; padding: 0; margin: 0; width: auto; }
.qrow .drop-x:hover { color: var(--bad); }
.dropzone {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: rgba(11,13,16,0.86); backdrop-filter: blur(2px);
}
/**
 * The hidden attribute only sets display:none in the browser's own
 * stylesheet, and any author rule beats it - so the display:grid above was
 * silently keeping this overlay on screen permanently, covering the whole
 * page. Anything given display by a class needs this said explicitly.
 */
.dropzone[hidden] { display: none; }
.dropzone > div {
  border: 2px dashed var(--accent); border-radius: 16px; padding: 48px 72px;
  font-size: 19px; font-weight: 600; color: var(--accent);
}

/* The one exception to the greyscale: Discord's own colour on its own button,
   because a sign-in button people recognise beats one that matches. */
.item .thumb { background-color: #000; }
input:focus, select:focus, textarea:focus { outline: 1px solid var(--muted); outline-offset: -1px; }
.item:hover { border-color: #363b40; }

.sections { display: flex; gap: 2px; }
.sections a {
  color: var(--muted); text-decoration: none; padding: 7px 13px; border-radius: 8px;
  font-weight: 500; font-size: 14px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
}
.sections a svg { flex: none; opacity: 0.85; }
/* Hover brightens the label and nothing else; the box is reserved for the
   page you are actually on, so it means one thing. */
.sections a:hover { color: var(--text); }
.sections a.on { background: var(--panel-2); color: var(--text); }

.page { padding: 22px; max-width: 1180px; margin: 0 auto; }
.page h2 { margin: 0 0 4px; font-size: 20px; letter-spacing: -0.3px; }
.page .lede { color: var(--muted); margin: 0 0 20px; font-size: 14px; }
.rows { display: grid; gap: 10px; }
.row-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 13px 15px;
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
}
.row-card .name { font-weight: 600; }
.row-card .sub { color: var(--muted); font-size: 12.5px; margin-top: 3px; display: flex; gap: 10px; flex-wrap: wrap; }
.row-card select { width: auto; padding: 6px 9px; font-size: 12.5px; }
.status { font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; padding: 2px 7px; border-radius: 5px; background: var(--panel-2); color: var(--muted); }
.status.open, .status.in_progress { background: #3a4044; color: #fff; }
.status.review { background: #45403050; color: var(--warn); }
.status.delivered, .status.closed { background: #2f3336; color: var(--muted); }

/* ---------------------------- public site ---------------------------- */
body.site { max-width: 1040px; margin: 0 auto; padding: 0 22px 60px; }
.site-header { display: flex; align-items: center; gap: 20px; padding: 22px 0; border: none; position: static; background: transparent; }
.site-header .brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text); margin-right: 4px; }
.site-header .brand h1 { margin: 0; }
.site-header h1 { font-size: 19px; }
.site-header a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; }
.site-header a:hover { color: var(--text); }
.cta {
  background: var(--accent); color: var(--on-accent) !important; padding: 9px 16px;
  border-radius: 8px; font-weight: 600; text-decoration: none;
}
body.site { display: flex; flex-direction: column; min-height: 100vh; }
.hero {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; max-width: 680px; margin: 0 auto; padding: 40px 0 80px;
}
.hero .logo { height: 44px; margin: 0 0 26px; }
.hero h2 { font-size: clamp(32px, 5.4vw, 52px); line-height: 1.06; letter-spacing: -1.4px; margin: 0 0 18px; }
.hero p { color: var(--muted); font-size: 17px; line-height: 1.6; margin: 0 0 32px; max-width: 520px; }
.hero-actions { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }
.hero-actions .cta { padding: 12px 22px; font-size: 15px; border-radius: 10px; }
.cta.ghost {
  background: transparent; color: var(--text) !important;
  border: 1px solid var(--line); box-shadow: inset 0 0 0 1px transparent;
}
.cta.ghost:hover { border-color: #4a5058; background: var(--panel); }
/* The footer used to sit inside body.site, which gave it the page's
   width and padding. The app pages dropped that class, so it ran to the
   window edge and clipped. It carries its own container now. */
.site-footer {
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  max-width: 1180px; width: 100%; margin: 56px auto 0;
  padding: 24px 22px; border-top: 1px solid var(--line);
}
.site-footer a { color: var(--muted); text-decoration: none; font-size: 13px; }
.site-footer a:hover { color: var(--text); }
#viewer { width: min(900px, 94vw); }
#viewer video { width: 100%; display: block; background: #000; }

.creator-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 0 0 16px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
}
.creator-head h2 { margin: 0; font-size: 21px; letter-spacing: -0.4px; }
.creator-head .kinds { display: flex; gap: 2px; margin-left: auto; }
.creator-head .kinds button {
  width: auto; margin: 0; background: none; border: 1px solid transparent; color: var(--muted);
  padding: 6px 13px; border-radius: 8px; font-weight: 600; font-size: 13px;
}
.creator-head .kinds button:hover { background: var(--panel-2); color: var(--text); }
.creator-head .kinds button.on { background: var(--panel-2); border-color: var(--line); color: var(--text); }
.creator-head .kinds button span { color: var(--muted); font-weight: 500; margin-left: 6px; }

.cutter .marks input { padding: 6px 9px; font-size: 13px; }
#playhead { font-variant-numeric: tabular-nums; min-width: 92px; }

/* A creator's own views and projects, nested under them. */
.sub { display: grid; gap: 1px; margin: 2px 0 8px 10px; padding-left: 9px; border-left: 1px solid var(--line); }
.sub .pill { font-size: 13px; padding: 5px 9px; font-weight: 500; }
.sub .pill.on { background: var(--accent); color: var(--on-accent); }
.pill.creator { font-weight: 600; }

.team { display: contents; }
.site-header .team a { color: var(--text); }

/* ------------------------- campaign page ------------------------- */
.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; padding: 8px 0 40px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; }
.panel h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin: 0 0 14px; }
.figure { font-size: 30px; font-weight: 700; letter-spacing: -1px; }
.figure.small { font-size: 22px; }
.figure .muted { font-size: 16px; font-weight: 500; }
.counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 12px; }
.counters strong { display: block; font-size: 18px; }
.counters span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; }
.rates { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.rate { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 13px 15px; }
.rate-head { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.reqs { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.reqs li {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 13px 15px 13px 42px; position: relative; font-size: 14px; line-height: 1.5;
}
.reqs li::before {
  content: "✓"; position: absolute; left: 15px; top: 12px;
  color: var(--on-accent); background: var(--accent); width: 17px; height: 17px;
  border-radius: 5px; display: grid; place-items: center; font-size: 11px; font-weight: 700;
}
.footage {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 15px;
  white-space: pre-wrap; word-break: break-all; font-size: 12.5px; color: var(--muted); margin: 0;
}
.badge.open { background: #11331d; color: #3fb950; }

/* --------------------------- campaign cards --------------------------- */
/* Four to a row on a normal screen. Wider cards just stretch the same
   content further apart and push the next row off the fold. */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; padding-bottom: 20px; }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 13px;
  padding: 16px 17px 17px; text-decoration: none; color: var(--text);
  display: flex; flex-direction: column; overflow: hidden;
  transition: border-color 0.15s;
}
.card:hover { border-color: #3a4046; }
.card-main { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 14px; align-items: start; }
.card-thumb {
  width: 74px; height: 74px; border-radius: 11px; background: #000 center/cover no-repeat;
  position: relative; border: 1px solid var(--line);
}
/* The category tag was removed from the card: it repeats what the title
   already says and crowds the artwork. */
.card-info { min-width: 0; }
.card-title {
  font-weight: 650; font-size: 15.5px; line-height: 1.3; margin-bottom: 9px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.save {
  width: 30px; height: 30px; padding: 0; margin: 0; background: none; border: none;
  color: var(--muted); cursor: pointer; line-height: 0; border-radius: 6px;
  display: grid; place-items: center;
}
.save:hover { color: var(--text); }
/* Filled once saved: an outline that only changes shade is a state
   nobody notices. */
.save.on { color: var(--accent); }
.save.on svg path { fill: currentColor; }
.card-rates { display: flex; justify-content: space-between; margin: 18px 0 11px; }
.card-rates .right { text-align: right; }
.card-rates strong { display: block; font-size: 18px; font-weight: 700; margin-top: 0; }
.card-rates .muted { font-weight: 500; font-size: 15px; }
/* The empty track stays visible at 0%, so the bar reads as something that
   will fill rather than as nothing at all. */
.card .bar { height: 6px; border-radius: 20px; background: #262b30; }
.card .bar > div { border-radius: 20px; }
/* Progress on a campaign card is money moving, which reads as green. */
.card .bar > div { background: var(--good); min-width: 0; }

.campaign-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 34px; align-items: center; padding: 34px 0 44px; }
@media (max-width: 820px) { .campaign-top { grid-template-columns: 1fr; gap: 22px; padding-top: 20px; } }
.cover.big { border-radius: 16px; border: 1px solid var(--line); aspect-ratio: 16/9; }
.campaign-head h2 { font-size: clamp(28px, 4.4vw, 46px); line-height: 1.04; letter-spacing: -1.4px; margin: 12px 0 20px; text-transform: uppercase; }
.chip {
  display: inline-block; background: var(--panel-2); border: 1px solid var(--line);
  color: var(--muted); font-size: 12px; padding: 5px 12px; border-radius: 20px;
}
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 11px; }
.fact { background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 13px 15px; }
.fact.wide { grid-column: 1 / -1; }
.fact h4 { font-size: 10px; text-transform: uppercase; letter-spacing: 0.9px; color: var(--muted); margin: 0 0 7px; font-weight: 600; }

.panel h3 { display: flex; align-items: center; gap: 10px; }
.panel h3 button {
  margin: 0 0 0 auto; width: auto; padding: 4px 10px; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.6px;
}
.bounds { display: flex; gap: 7px; margin-top: 11px; flex-wrap: wrap; }
.bounds span {
  background: var(--bg); border: 1px solid var(--line); border-radius: 7px;
  padding: 4px 9px; font-size: 12.5px; font-weight: 600;
}
.bounds em { font-style: normal; color: var(--muted); font-weight: 500; font-size: 11px; margin-left: 2px; }

/* --------------------------- campaign sheet --------------------------- */
.sheet {
  max-width: 560px; margin: 26px auto 130px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px 22px;
}
.sheet-head { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 13px; align-items: center; }
.sheet-thumb { width: 62px; height: 62px; border-radius: 10px; background: #000 center/cover no-repeat; border: 1px solid var(--line); }
.sheet-title { font-weight: 650; font-size: 16px; line-height: 1.3; }
.sheet-cat { color: var(--accent); font-size: 13px; text-transform: capitalize; margin-top: 2px; }
.icon-btn {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  cursor: pointer; font-size: 15px; text-decoration: none; margin: 0; padding: 0;
}
.icon-btn:hover { color: var(--text); }
.sheet-money { display: flex; justify-content: space-between; margin: 18px 0 7px; }
.sheet-money .right { text-align: right; }
.sheet-money strong { display: block; font-size: 17px; font-weight: 700; margin-top: 2px; }
.sheet-money .muted { font-weight: 500; font-size: 14px; }
.k { font-size: 12px; color: var(--muted); }
.sheet-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: center;
  padding: 15px 0; margin-top: 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.sheet-stats strong { display: block; font-size: 14.5px; margin-top: 5px; }
/* The base rule, lost in an earlier rewrite - without it the marks sat
   flush against each other with no gap to adjust. */
.icons { display: flex; align-items: center; gap: 11px; color: var(--muted); }
.icons.big { justify-content: center; margin-top: 6px; font-size: 14px; }
.sheet-block { padding-top: 17px; }
.sheet-block h3 { font-size: 14px; margin: 0 0 11px; display: flex; align-items: center; gap: 8px; }
.count { background: var(--panel-2); border-radius: 20px; padding: 1px 8px; font-size: 11px; color: var(--muted); }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.ticks li { padding-left: 23px; position: relative; font-size: 13.5px; line-height: 1.45; }
.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--good); font-weight: 700; }
.ticks a { color: var(--text); }
.examples { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 9px; }
.example {
  aspect-ratio: 9/16; background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px;
  display: grid; place-items: center; color: var(--muted); text-decoration: none; font-size: 17px;
}
.example:hover { color: var(--text); border-color: #3a4046; }
.submit-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; width: min(560px, calc(100vw - 32px));
  background: rgba(19,21,23,0.93); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 16px; padding: 13px 15px 10px; text-align: center;
}
.submit-inner { display: flex; gap: 10px; align-items: center; }
.cta.wide { flex: 1; text-align: center; background: var(--accent); color: #fff !important; padding: 12px; }
.submit-bar p { margin: 9px 0 0; font-size: 11.5px; }

/* Supplied platform marks, desaturated so they identify rather than shout. */
/**
 * The mark as a solid shape, not a desaturated picture.
 *
 * A filter leaves the logo's own colours showing through as muddy greys.
 * Masking uses only its silhouette and fills that with one colour, so the
 * three marks sit together evenly whatever their artwork does.
 */
.pico {
  display: inline-block; width: 15px; height: 15px; background: var(--muted);
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
}
.icons.big .pico { width: 20px; height: 20px; }
.card:hover .pico { background: #aeb6bd; }
header h1 a { color: inherit; text-decoration: none; }

.tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--line); margin: 4px 0 18px; }
.tabs button {
  width: auto; margin: 0; background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); padding: 9px 1px; font-weight: 600; font-size: 14px; border-radius: 0;
}
.tabs button.on { color: var(--text); border-bottom-color: var(--text); }
.chips { display: flex; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 5px; width: fit-content; margin-bottom: 18px; flex-wrap: wrap; }
.chip-btn { width: auto; margin: 0; background: none; border: none; color: var(--muted); padding: 6px 13px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.chip-btn.on { background: var(--panel-2); color: var(--text); }
.nothing { text-align: center; padding: 70px 0; }
.nothing-mark { width: 74px; height: 50px; margin: 0 auto 18px; border-radius: 7px; background: var(--panel-2); }
.nothing strong { display: block; font-size: 15px; margin-bottom: 5px; }
.nothing p { margin: 0; font-size: 13.5px; }
a.row-card { text-decoration: none; color: inherit; }
a.row-card:hover { border-color: #363b40; }

.card-foot .paid { display: flex; flex-direction: column; line-height: 1.25; }
.card-foot .paid em { font-style: normal; font-size: 10px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }

/* ------------------------ the sheet as a modal ------------------------ */
.sheet-modal {
  background: transparent; border: none; padding: 0; max-width: none; width: 100%; height: 100%;
  max-height: 100%; display: none; place-items: center; grid-template-columns: 1fr auto 1fr;
}
.sheet-modal[open] { display: grid; }
.sheet-modal::backdrop { background: rgba(4,5,6,0.72); backdrop-filter: blur(3px); }
.sheet-shell {
  grid-column: 2; width: min(560px, calc(100vw - 32px)); max-height: 86vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
}
.sheet-shell .sheet { margin: 0; border: none; background: none; max-width: none; }
.submit-bar.inline {
  position: sticky; bottom: 0; left: auto; transform: none; width: auto;
  border-radius: 0 0 16px 16px; border-width: 1px 0 0;
}
.arrow {
  width: 46px; height: 46px; border-radius: 50%; background: var(--panel); color: var(--text);
  border: 1px solid var(--line); font-size: 18px; margin: 0 18px; cursor: pointer; padding: 0;
}
.arrow:hover:not(:disabled) { background: var(--panel-2); }
.arrow:disabled { opacity: 0.25; cursor: default; }
.arrow.prev { justify-self: end; grid-column: 1; }
.arrow.next { justify-self: start; grid-column: 3; }
@media (max-width: 760px) { .arrow { display: none; } .sheet-shell { grid-column: 1 / -1; } }

/* A prohibition reads as a cross; a tick beside "NO SPLIT SCREEN" says the
   opposite of the rule at a glance. */
.ticks li.no::before { content: "✕"; color: var(--bad); }
.wide-btn {
  display: block; text-align: center; margin-top: 18px; padding: 12px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 11px;
  color: var(--text); text-decoration: none; font-weight: 600; font-size: 14px;
}
.wide-btn:hover { border-color: #3a4046; }

.wallet {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  padding: 7px 14px; border-radius: 20px; font-weight: 600; font-size: 13.5px; white-space: nowrap;
}
.wallet svg { color: var(--muted); flex: none; }
.wallet:hover { border-color: #3a4046; }

.avatar {
  width: 32px; height: 32px; border-radius: 50%; border: none; margin: 0; padding: 0;
  background: var(--panel-2); color: var(--text); font-weight: 700; font-size: 13px; cursor: pointer;
}
.avatar:hover { background: #262b30; }
.account { position: relative; }
.menu {
  position: absolute; right: 0; top: 42px; width: 220px; z-index: 40;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 6px; box-shadow: 0 16px 40px rgba(0,0,0,0.55);
}
.menu[hidden] { display: none; }
.menu .who-line { padding: 9px 11px 11px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.menu .who-line strong { display: block; font-size: 13.5px; }
.menu .who-line span { color: var(--muted); font-size: 12px; }
.menu a, .menu button {
  display: block; width: 100%; text-align: left; background: none; border: none; margin: 0;
  color: var(--text); text-decoration: none; padding: 9px 11px; border-radius: 8px;
  font-size: 13.5px; font-weight: 500; cursor: pointer;
}
.menu a:hover, .menu button:hover { background: var(--panel-2); }
.menu button.out { color: var(--bad); }

/* YouTube's mark is landscape; at a square size it reads smaller than the
   others, so it gets a wider box. */
.pico[title="youtube"] { width: 21px; }
.icons.big .pico[title="youtube"] { width: 28px; }

.invite { color: var(--muted); text-decoration: none; font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.invite:hover { color: var(--text); }
.avatar { overflow: hidden; display: grid; place-items: center; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.more { color: var(--accent); text-decoration: none; font-weight: 600; font-size: 13.5px; }
.more:hover { text-decoration: underline; }

/* Holds the avatar's place while the server answers, so the bar does not
   jump once it arrives. */
.avatar-ghost { display: inline-block; width: 32px; height: 32px; border-radius: 50%; background: var(--panel-2); }

/* One row, no wrapping. The avatar was dropping below the wallet and
   making the whole bar twice as tall. */
#account { display: flex; align-items: center; gap: 14px; flex: none; white-space: nowrap; }
#account .account { display: inline-flex; align-items: center; }
header h1 { flex: none; }
header .sections { flex: none; }

.card-edit {
  grid-column: 1 / -1; justify-self: start; margin-top: 2px;
  font-size: 12px; color: var(--muted); text-decoration: none; font-weight: 600;
}
.card-edit:hover { color: var(--text); text-decoration: underline; }

/* Red is kept for destruction and prohibition only - logging out, deleting,
   and the rules a clip must not break - so it never competes with the
   brand colour for attention. */

/* ------------------------- campaign filters ------------------------- */
.filters { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.filters .spacer { flex: 1; }
.filters button { margin: 0; width: auto; font: inherit; font-weight: 500; font-size: 14px; }
.seg {
  display: flex; align-items: center; gap: 4px; padding: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
}
.seg button {
  background: none; color: var(--muted); border: none; border-radius: 9px;
  padding: 8px 14px; height: 38px; display: grid; place-items: center; cursor: pointer;
}
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--panel-2); color: var(--text); }
.seg .pico { width: 17px; height: 17px; }
.seg .pico.youtube { width: 23px; }
.seg button.on .pico { background: var(--text); }
.cats { display: flex; gap: 4px; }
.cats button {
  background: none; color: var(--muted); border: none; padding: 9px 12px; border-radius: 8px; cursor: pointer;
  position: relative;
}
.cats button:hover { color: var(--text); }
.cats button.on { color: var(--text); }
.cats button.on::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px;
  background: var(--text); border-radius: 2px;
}
.search {
  display: flex; align-items: center; gap: 9px; padding: 0 14px; height: 46px; min-width: 300px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; color: var(--muted);
}
.search:focus-within { border-color: #3a4046; }
.search input { background: none; border: none; outline: none; padding: 0; margin: 0; flex: 1; color: var(--text); font-size: 14px; }
.search input::placeholder { color: var(--muted); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.sort {
  width: 46px; height: 46px; display: grid; place-items: center; cursor: pointer;
  background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 12px;
}
.sort:hover { border-color: #3a4046; }
.showing { margin: 0 0 16px; font-size: 13.5px; }
.showing strong { color: var(--text); }
@media (max-width: 720px) {
  .filters .spacer { display: none; }
  .search { min-width: 0; flex: 1; }
}

/* The cover picker on the campaign editor. */
.cover-pick { display: flex; gap: 12px; align-items: flex-start; }
.cover-preview {
  flex: none; width: 96px; height: 60px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel-2, #1c1f24) center / cover no-repeat;
}
.cover-preview.empty { background-image: none; }
.cover-pick > div:last-child { flex: 1; min-width: 0; }
.cover-pick .ghost { width: auto; margin: 0; padding: 8px 14px; }

/* Transparent PNGs preview on a checkerboard, or you cannot tell what is there. */
.cover-preview.checker {
  background-color: #2a2e34;
  background-image:
    var(--overlay-img, none),
    linear-gradient(45deg, #3a3f46 25%, transparent 25%, transparent 75%, #3a3f46 75%),
    linear-gradient(45deg, #3a3f46 25%, transparent 25%, transparent 75%, #3a3f46 75%);
  background-size: contain, 12px 12px, 12px 12px;
  background-position: center, 0 0, 6px 6px;
  background-repeat: no-repeat, repeat, repeat;
}
/* The overlay as a thing you can see, not a third button in a row. */
.overlay-row {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 13px; align-items: center;
  margin-top: 18px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2);
}
.overlay-thumb {
  width: 54px; height: 54px; border-radius: 9px; border: 1px solid var(--line);
  background-color: #2a2e34;
  background-image:
    var(--overlay-img, none),
    linear-gradient(45deg, #3a3f46 25%, transparent 25%, transparent 75%, #3a3f46 75%),
    linear-gradient(45deg, #3a3f46 25%, transparent 25%, transparent 75%, #3a3f46 75%);
  background-size: contain, 10px 10px, 10px 10px;
  background-position: center, 0 0, 5px 5px;
  background-repeat: no-repeat, repeat, repeat;
}
.overlay-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.overlay-text strong { font-size: 14px; }
.overlay-text .muted { font-size: 12.5px; }
.overlay-dl {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--text); text-decoration: none; font-weight: 600; font-size: 13px;
  padding: 8px 13px 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); white-space: nowrap;
}
.overlay-dl::before {
  content: ""; width: 13px; height: 13px; background: var(--accent); flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v9M4 7.5 8 11.5l4-4M3 14h10' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2v9M4 7.5 8 11.5l4-4M3 14h10' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.overlay-dl:hover { border-color: #3a4046; }

/* The submit form at the foot of a campaign. */
.submit-form { display: flex; gap: 10px; align-items: stretch; }
.submit-form input { flex: 1; min-width: 0; height: 46px; margin: 0; }
.submit-form button { width: auto; margin: 0; padding: 0 22px; height: 46px; }
.submit-form .signin { flex: 1; text-align: center; }
.submit-result { margin-top: 10px; padding: 12px 14px; border-radius: 10px; font-size: 13.5px; line-height: 1.5; display: flex; flex-direction: column; gap: 2px; }
.submit-result.good { background: #16351f; color: #9fe3b3; }
.submit-result.bad { background: #3a1d1d; color: #f3b4b4; }
.submit-result strong { font-size: 14px; }
@media (max-width: 520px) { .submit-form { flex-direction: column; } .submit-form button { height: 44px; } }

/* --------------------------- the submit stage --------------------------- */
.submit-stage {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px;
  background: rgba(4,5,6,0.78); backdrop-filter: blur(4px);
}
.submit-card {
  width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px 18px 16px;
}
.submit-head { display: flex; align-items: center; gap: 12px; }
.link-rows { display: grid; gap: 8px; margin-bottom: 12px; }
.link-row input { margin: 0; }
.link-row.done input { color: var(--muted); }
.link-state { font-size: 12.5px; color: var(--muted); margin: 4px 2px 0; display: none; line-height: 1.4; }
.link-state strong { font-weight: 600; margin-right: 6px; }
.link-row.busy .link-state, .link-row.good .link-state, .link-row.bad .link-state { display: block; }
.link-row.good .link-state strong { color: #4cd37a; }
.link-row.bad .link-state strong { color: var(--warn, #ffb454); }
.link-row.bad input { border-color: #5a3b2a; }
.submit-card .submit-result { margin-bottom: 12px; }
@media (max-width: 560px) { .submit-stage { padding: 0; align-items: end; } .submit-card { max-height: 92vh; border-radius: 16px 16px 0 0; } }
.submit-result[hidden] { display: none; }