/* Create / Join Coinflip modal.
   Loaded last on purpose: the picker is styled across main.css and layout.css with !important on both sides,
   so the only way to land a coherent pass without unpicking that war is to win it from the end of the cascade.
   Everything here is scoped to #creator, so the giveaway composer and the jackpot join sheet are untouched. */

/* The card was a fixed 860px tall, so an empty inventory rendered a thousand pixels of nothing under two words
   of copy. It now grows to fit and only caps out once there are enough items to need the scroll. */
#creator .creator-card{
  height:auto!important;
  max-height:min(90dvh,880px)!important;
  padding:26px 26px 22px!important;
}
#creator .creator-card>p{margin:0 0 6px!important;color:#a98fd0!important;letter-spacing:.16em!important}
#creator .creator-card>h2{margin:0!important;font-size:31px!important}
#creator .creator-card .catalog-picker{
  flex:0 1 auto!important;
  min-height:0!important;
  max-height:min(58dvh,560px)!important;
  margin:18px 0 0!important;
  border:1px solid #2b2833!important;
  border-radius:10px!important;
  background:#0e0d13!important;
  /* One grid, so the search field and the two dropdowns share a single header band instead of stacking into
     two full-width strips that ate ~90px before a single item was visible. */
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-content:start!important;
}

/* ---- header band ---- */
#creator .catalog-search,
#creator .catalog-toolbar{
  position:sticky!important;
  top:0!important;
  z-index:6!important;
  margin:0!important;
  padding:11px 12px!important;
  border:0!important;
  border-bottom:1px solid #26232f!important;
  background:#131118!important;
  box-shadow:none!important;
}
#creator .catalog-search{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  grid-column:1!important;
  padding-right:0!important;
}
#creator .catalog-search::before{display:none!important}
#creator .catalog-search input{
  flex:1 1 auto!important;
  min-width:0!important;
  height:38px!important;
  margin:0!important;
  padding:0 12px!important;
  border:1px solid #302c3a!important;
  border-radius:8px!important;
  background:#0a0910!important;
  color:#f4eff9!important;
  font:700 13px/1 'Space Grotesk',sans-serif!important;
  transition:border-color .14s ease,background .14s ease!important;
}
#creator .catalog-search input::placeholder{color:#6f6780!important;font-weight:700!important}
#creator .catalog-search input:hover{border-color:#3d3749!important}
#creator .catalog-search input:focus{
  border-color:#7b52c2!important;
  background:#0d0b14!important;
  /* a 3px purple halo on a 46px field dominated the whole modal */
  box-shadow:none!important;
  outline:0!important;
}
/* Result count reads as a quiet chip beside the field rather than a caption above it. */
#creator .catalog-search small{
  order:2!important;
  flex:0 0 auto!important;
  display:grid!important;
  place-items:center!important;
  height:38px!important;
  margin:0!important;
  padding:0 9px!important;
  border:1px solid #26232f!important;
  border-radius:8px!important;
  background:#0a0910!important;
  color:#8d81a3!important;
  font:800 9px/1 'DM Mono',monospace!important;
  letter-spacing:.1em!important;
  white-space:nowrap!important;
}
#creator .catalog-search-controls{display:contents!important}

#creator .catalog-toolbar{
  grid-column:2!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  padding-left:0!important;
}
#creator .catalog-toolbar::before{display:none!important}
/* The SORT BY / SHOW captions were noise - each dropdown already says what it is doing. */
#creator .catalog-toolbar .catalog-control{display:block!important;min-width:0!important}
#creator .catalog-toolbar .catalog-control>small{display:none!important}
#creator .catalog-toolbar select{
  -webkit-appearance:none!important;
  appearance:none!important;
  height:38px!important;
  min-width:0!important;
  padding:0 30px 0 12px!important;
  border:1px solid #302c3a!important;
  border-radius:8px!important;
  background-color:#0a0910!important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' fill='none' stroke='%23978aad' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.6 5 5.6 9 1.6'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 11px center!important;
  color:#e6ddf3!important;
  font:800 11px/1 'Space Grotesk',sans-serif!important;
  cursor:pointer!important;
  transition:border-color .14s ease!important;
}
#creator .catalog-toolbar select:hover{border-color:#3d3749!important}
#creator .catalog-toolbar select:focus{border-color:#7b52c2!important;box-shadow:none!important;outline:0!important}
#creator .catalog-toolbar select option{background:#141119;color:#efe8f8}

/* ---- grid + empty state ---- */
#creator .catalog-grid{
  grid-column:1/-1!important;
  gap:9px!important;
  padding:12px!important;
  background:transparent!important;
}
#creator .catalog-grid[data-empty="true"]{
  display:grid!important;
  place-content:center!important;
  gap:7px!important;
  min-height:210px!important;
  padding:34px 20px!important;
  color:#cabdd9!important;
  font:800 14px/1.3 'Space Grotesk',sans-serif!important;
  letter-spacing:-.01em!important;
  text-align:center!important;
}
/* The grid's own text node is the headline; this is the line that says what to do about it. */
#creator .catalog-grid[data-empty="true"]::after{
  content:'Deposit items, or clear your search and filters.';
  color:#7d7391;
  font:700 11px/1.4 Manrope,'Segoe UI',sans-serif;
  letter-spacing:0;
}

/* ---- footer ---- */
#creator .creator-card .creator-total{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
  align-items:center!important;
  gap:14px!important;
  min-height:0!important;
  margin:14px 0 0!important;
  padding:13px 2px!important;
  border-top:1px solid #26232f!important;
  border-bottom:0!important;
}
#creator .creator-total>span#selectionCount{
  justify-self:start!important;
  color:#8d81a3!important;
  font:800 10px/1 'DM Mono',monospace!important;
  letter-spacing:.11em!important;
}
#creator .creator-total .cf-side{
  justify-self:center!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}
#creator .creator-total .cf-side-lbl{
  color:#7d7391!important;
  font:800 9px/1 'DM Mono',monospace!important;
  letter-spacing:.12em!important;
}
#creator .creator-total .cf-side-btn{
  display:grid!important;
  place-items:center!important;
  width:42px!important;
  height:42px!important;
  padding:0!important;
  border:1px solid #2b2833!important;
  border-radius:50%!important;
  background:#0a0910!important;
  opacity:.5!important;
  cursor:pointer!important;
  transition:opacity .14s ease,border-color .14s ease,transform .14s ease!important;
}
#creator .creator-total .cf-side-btn img{display:block!important;width:30px!important;height:30px!important}
#creator .creator-total .cf-side-btn:hover{opacity:.85!important;transform:translateY(-1px)!important}
#creator .creator-total .cf-side-btn.is-active{
  opacity:1!important;
  border-color:#8a5fd6!important;
  background:#150f1f!important;
}
/* The value sits on the right edge of the centre band and CLEAR is pinned to the card edge, so the coin
   picker keeps the true centre no matter how many digits the total grows to. */
#creator .creator-total>b{
  grid-column:3!important;
  justify-self:end!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  margin-right:86px!important;
  font-size:24px!important;
}
#creator .creator-total button#clearOffer{
  position:absolute!important;
  right:0!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  min-height:36px!important;
}
#creator .creator-card .create-submit{
  min-height:50px!important;
  margin-top:14px!important;
  border:0!important;
  border-radius:9px!important;
  background:linear-gradient(135deg,#9a54f0,#6a35c9)!important;
  color:#fff!important;
  box-shadow:0 10px 26px rgba(112,54,204,.24)!important;
  transition:filter .14s ease,transform .14s ease!important;
}
#creator .creator-card .create-submit:hover{filter:brightness(1.08)!important;transform:translateY(-1px)!important}
#creator .creator-card .create-submit:disabled{filter:grayscale(.6) brightness(.7)!important;transform:none!important}

@media(max-width:760px){
  #creator .creator-card .catalog-picker{grid-template-columns:minmax(0,1fr)!important;max-height:56dvh!important}
  #creator .catalog-search{grid-column:1!important;padding-right:12px!important;border-bottom:0!important}
  #creator .catalog-toolbar{grid-column:1!important;top:60px!important;padding:0 12px 11px!important}
  #creator .catalog-toolbar .catalog-control{flex:1 1 0!important}
  #creator .catalog-toolbar select{width:100%!important}
  #creator .creator-card .creator-total{grid-template-columns:minmax(0,1fr) auto!important;row-gap:12px!important}
  #creator .creator-total .cf-side{grid-column:1/-1!important;grid-row:2!important;justify-self:start!important}
  #creator .creator-total>b{grid-column:2!important;grid-row:1!important;margin-right:78px!important}
}

/* ---- fixes on top of the base sheet ---- */
/* .cf-side is absolutely centred on .creator-total in layout.css, so grid placement was ignored and the two
   coins sat straight on top of the running total. Put it back in flow; the footer grid centres it properly. */
#creator .creator-total .cf-side{
  position:static!important;
  left:auto!important;
  top:auto!important;
  transform:none!important;
  grid-column:2!important;
}
#creator .creator-total .cf-side-lbl{display:block!important}
#creator .creator-total>b{margin-right:0!important}
/* CLEAR leaves the flow so the coin picker keeps the true centre regardless of how wide the total gets. */
#creator .creator-total button#clearOffer{z-index:3!important}
#creator .creator-total>b{padding-right:96px!important}

/* The selected-items tray was one lone 60px circle floating in the gap under the grid. It is now a labelled
   strip of square thumbs that reads as part of the footer instead of a stray bubble. */
#creator .cf-tray{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-start!important;
  align-items:center!important;
  gap:7px!important;
  margin-top:12px!important;
  padding:9px 10px!important;
  border:1px solid #26232f!important;
  border-radius:9px!important;
  background:#0e0d13!important;
}
#creator .cf-tray.is-empty{display:none!important}
#creator .cf-tray::before{
  content:'YOUR OFFER';
  margin-right:3px;
  color:#7d7391;
  font:800 9px/1 'DM Mono',monospace;
  letter-spacing:.12em;
}
#creator .cf-tray-item{
  width:46px!important;
  height:46px!important;
  border-radius:8px!important;
  border:1px solid #2f2a3a!important;
  background:#141119!important;
  transition:border-color .14s ease,transform .14s ease!important;
}
#creator .cf-tray-item:hover{border-color:#8a5fd6!important;transform:translateY(-1px)!important}
#creator .cf-tray-ph{border-radius:8px!important}
#creator .cf-tray-ph img{width:34px!important;height:34px!important}
#creator .cf-tray-q{
  top:-5px!important;
  right:-5px!important;
  border:2px solid #0e0d13!important;
  background:#7d5cff!important;
  font-size:9px!important;
}
#creator .cf-tray-x{border-radius:8px!important;font-size:20px!important}

/* ---- simplify pass ---- */
/* The side picker is self-explanatory: two coins, one lit. The caption and the rings around them were both
   framing that the coin art already provides. */
#creator .creator-total .cf-side-lbl{display:none!important}
#creator .creator-total .cf-side{gap:10px!important}
#creator .creator-total .cf-side-btn{
  width:auto!important;
  height:auto!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  opacity:.34!important;
  filter:saturate(.55)!important;
}
#creator .creator-total .cf-side-btn img{width:32px!important;height:32px!important}
#creator .creator-total .cf-side-btn:hover{opacity:.7!important;filter:saturate(.85)!important;transform:none!important}
#creator .creator-total .cf-side-btn.is-active{
  opacity:1!important;
  filter:none!important;
  background:none!important;
  border:0!important;
}

/* Flat, one colour, no gradient or glow. */
#creator .creator-card .create-submit{
  min-height:46px!important;
  margin-top:11px!important;
  border-radius:8px!important;
  background:#6d3fd0!important;
  box-shadow:none!important;
}
#creator .creator-card .create-submit:hover{background:#7b49e4!important;filter:none!important;transform:none!important}

/* Tighter throughout: the card was spending more height on gaps than on items. */
#creator .creator-card{padding:22px 22px 18px!important}
#creator .creator-card>h2{font-size:27px!important}
#creator .creator-card .catalog-picker{margin-top:14px!important}
#creator .catalog-grid{gap:8px!important;padding:10px!important}
#creator .creator-card .creator-total{margin-top:10px!important;padding:10px 2px!important}
#creator .cf-tray{margin-top:9px!important;padding:7px 9px!important}
#creator .creator-card>*:last-child{margin-bottom:0!important}

/* ---- offer strip + coin size ---- */
/* One selected item in a full-width bordered panel read as a mostly-empty box. The strip now has no chrome of
   its own - just the thumbs, sitting directly under the grid. */
#creator .cf-tray{
  margin-top:10px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  gap:6px!important;
}
#creator .cf-tray::before{display:none!important}
#creator .cf-tray-item{
  width:40px!important;
  height:40px!important;
  border-radius:7px!important;
  border:1px solid #2a2734!important;
  background:#131019!important;
}
#creator .cf-tray-ph img{width:30px!important;height:30px!important}

#creator .creator-total .cf-side{gap:12px!important}
#creator .creator-total .cf-side-btn img{width:44px!important;height:44px!important}

/* The offer tray is gone. It claimed a full row of the card to repeat what the grid already shows (each picked
   card is lit and carries its own quantity badge) and what the footer already totals. */
#creator .cf-tray{display:none!important}

/* ---- footer amount + card height ---- */
/* app.js swaps the legacy <b> total for <div class="creator-amount">, so every rule aimed at ">b" missed and
   the token slid under the absolutely-positioned CLEAR. */
#creator .creator-total>.creator-amount{
  grid-column:3!important;
  justify-self:end!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  margin:0!important;
  padding-right:104px!important;
  font-size:23px!important;
  white-space:nowrap!important;
}
#creator .creator-total>.creator-amount strong{color:#e9dcff!important}

/* The card is a stretched item inside the modal, so once its height became auto it grew to fill the modal and
   left a slab of dead space under the button. Centring it makes auto mean auto. */
#creator .creator-card{align-self:center!important}

/* The dead slab under the button was layout.css's `html.gf-scale #creator .creator-card{height:84%}` - a
   higher-specificity rule than anything above, so every height:auto here was ignored and the card was pinned
   to 84% of the modal no matter how little was in it. */
html.gf-scale #creator .creator-card,
#creator .creator-card{
  height:auto!important;
  max-height:min(86dvh,880px)!important;
}

/* ---- header ---- */
/* It was three unrelated things floating in a wide empty band: a tiny mono kicker, an oversized title and a
   bare X pushed to the far corner. Now it is one header block with a rule under it, and the close is a real
   control instead of a loose glyph. */
#creator .creator-card>p{
  margin:0 0 5px!important;
  color:#9b86c4!important;
  font:800 9px/1 'DM Mono',monospace!important;
  letter-spacing:.18em!important;
}
#creator .creator-card>h2{
  margin:0 0 14px!important;
  padding:0 52px 13px 0!important;
  border-bottom:1px solid #24212c!important;
  font:800 24px/1.1 'Space Grotesk',sans-serif!important;
  letter-spacing:-.03em!important;
}
#creator .creator-card .catalog-picker{margin-top:0!important}
#creator .creator-card>.close{
  display:grid!important;
  place-items:center!important;
  top:22px!important;
  right:22px!important;
  width:32px!important;
  height:32px!important;
  border:1px solid #2a2734!important;
  border-radius:8px!important;
  background:#131019!important;
  color:#8d81a3!important;
  font-size:20px!important;
  line-height:1!important;
  transition:border-color .14s ease,color .14s ease,background .14s ease!important;
}
#creator .creator-card>.close:hover{border-color:#4a4159!important;background:#1a1622!important;color:#efe8f8!important}

/* Bare X again - the frame around it read as a button inside a button. */
#creator .creator-card>.close{
  border:0!important;
  border-radius:0!important;
  background:none!important;
}
#creator .creator-card>.close:hover{background:none!important;border:0!important;color:#efe8f8!important}
/* .modal section carries a 2px accent stripe along its top edge; on a card this wide it just looked like a
   stray highlight. */
#creator .creator-card{
  border-top:0!important;
  border-radius:12px!important;
  border:1px solid #23202c!important;
}

/* ---- palette + square corners ---- */
/* One ladder of surfaces instead of eight hand-picked hexes: the card is the lightest, the picker sits a step
   below it, and the fields sit a step below that, so depth is read from value alone and every border is the
   same hairline. Accent is used once - on the primary action and on whatever is selected. */
#creator{
  --cr-card:#16141c;
  --cr-band:#121017;
  --cr-well:#0d0c12;
  --cr-field:#08070c;
  --cr-line:#221f2b;
  --cr-line2:#2e2a39;
  --cr-text:#f3eefa;
  --cr-mut:#8b8199;
  --cr-dim:#6b6379;
  --cr-acc:#7c4ddb;
}
#creator .creator-card{
  border-radius:4px!important;
  border:1px solid var(--cr-line)!important;
  background:var(--cr-card)!important;
}
#creator .creator-card>h2{border-bottom-color:var(--cr-line)!important;color:var(--cr-text)!important}
#creator .creator-card>p{color:#9d8ac6!important}

#creator .creator-card>.close{
  top:20px!important;
  right:20px!important;
  width:34px!important;
  height:34px!important;
  color:var(--cr-mut)!important;
  font-size:30px!important;
}

#creator .creator-card .catalog-picker{
  border-radius:4px!important;
  border-color:var(--cr-line)!important;
  background:var(--cr-well)!important;
}
#creator .catalog-search,
#creator .catalog-toolbar{background:var(--cr-band)!important;border-bottom-color:var(--cr-line)!important}
#creator .catalog-search input,
#creator .catalog-toolbar select{
  border-radius:3px!important;
  border-color:var(--cr-line2)!important;
  background-color:var(--cr-field)!important;
  color:var(--cr-text)!important;
}
#creator .catalog-search input::placeholder{color:var(--cr-dim)!important}
#creator .catalog-search input:hover,
#creator .catalog-toolbar select:hover{border-color:#3b3547!important}
#creator .catalog-search input:focus,
#creator .catalog-toolbar select:focus{border-color:var(--cr-acc)!important;background-color:var(--cr-field)!important}
#creator .catalog-search small{
  border-radius:3px!important;
  border-color:var(--cr-line)!important;
  background:var(--cr-field)!important;
  color:var(--cr-mut)!important;
}
#creator .catalog-toolbar select option{background:#141119}

#creator .creator-total{border-top-color:var(--cr-line)!important}
#creator .creator-total>span#selectionCount{color:var(--cr-mut)!important}
#creator .creator-total>.creator-amount strong{color:var(--cr-text)!important}
#creator .creator-total button#clearOffer{
  border-radius:3px!important;
  border-color:var(--cr-line2)!important;
  background:var(--cr-field)!important;
  color:var(--cr-mut)!important;
}
#creator .creator-total button#clearOffer:hover{border-color:#3b3547!important;background:#141119!important;color:var(--cr-text)!important}
#creator .creator-card .create-submit{border-radius:4px!important;background:var(--cr-acc)!important}
#creator .creator-card .create-submit:hover{background:#8a5be9!important}

/* ---- palette: match the rest of the site ---- */
/* The custom ladder made the modal read as a different product. These are the exact surfaces and hairlines the
   lobby, chat and jackpot panels already use, so the only colour in the card is the accent on the button. */
#creator{
  --cr-card:#17151d;
  --cr-band:#18151f;
  --cr-well:#100f15;
  --cr-field:#0e0d12;
  --cr-line:#2a2632;
  --cr-line2:#3a3444;
  --cr-text:#f4eff9;
  --cr-mut:#9b8fae;
  --cr-dim:#777085;
  --cr-acc:#7444cc;
}
#creator .creator-card{
  background:#17151d!important;
  border:1px solid #33303c!important;
  box-shadow:0 24px 70px rgba(0,0,0,.52)!important;
}
#creator .creator-card>h2{border-bottom-color:#2a2632!important}
#creator .creator-card .catalog-picker{border-color:#2a2632!important;background:#100f15!important}
#creator .catalog-search,
#creator .catalog-toolbar{background:#18151f!important;border-bottom-color:#2a2632!important}
#creator .catalog-search input,
#creator .catalog-toolbar select,
#creator .creator-total button#clearOffer{border-color:#3a3444!important;background-color:#0e0d12!important}
#creator .catalog-search input:hover,
#creator .catalog-toolbar select:hover,
#creator .creator-total button#clearOffer:hover{border-color:#4d4659!important}
#creator .catalog-search input:focus,
#creator .catalog-toolbar select:focus{border-color:#8a55e9!important}
#creator .catalog-search small{border-color:#2a2632!important;background:#0e0d12!important;color:#9b8fae!important}
#creator .creator-total{border-top-color:#2a2632!important}
#creator .creator-card .create-submit{background:#7444cc!important}
#creator .creator-card .create-submit:hover{background:#8a55e9!important}

/* Darker. Same neutral hue as the rest of the site, just several steps down - the site's panel greys are tuned
   for a small card sitting on the page, and at modal size they read as a grey slab. */
#creator .creator-card{
  background:#100e14!important;
  border-color:#262230!important;
}
#creator .creator-card>h2{border-bottom-color:#232029!important}
#creator .creator-card .catalog-picker{background:#0a090d!important;border-color:#232029!important}
#creator .catalog-search,
#creator .catalog-toolbar{background:#0e0d12!important;border-bottom-color:#232029!important}
#creator .catalog-search input,
#creator .catalog-toolbar select,
#creator .creator-total button#clearOffer{background-color:#08070b!important;border-color:#2d2937!important}
#creator .catalog-search small{background:#08070b!important;border-color:#232029!important}
#creator .creator-total{border-top-color:#232029!important}

/* Measured on the live page: card #100e14, band #0e0d12, well #0a090d, tiles #191720 - the tiles were the
   LIGHTEST surface and the card was lighter than the page behind it, so the surround read as a flat grey
   nothing. The frame now sits clearly below the tiles, and the card carries a faint violet fall from top to
   bottom so it has some depth instead of one dead value. */
#creator .creator-card{
  background:linear-gradient(180deg,#0e0b16 0%,#0a0810 46%,#08070c 100%)!important;
  border-color:#221e2b!important;
}
#creator .creator-card>h2{border-bottom-color:#211d29!important}
#creator .creator-card .catalog-picker{background:#060509!important;border-color:#1e1a26!important}
#creator .catalog-search,
#creator .catalog-toolbar{background:#0b0912!important;border-bottom-color:#1e1a26!important}
#creator .catalog-search input,
#creator .catalog-toolbar select,
#creator .creator-total button#clearOffer{background-color:#050409!important;border-color:#292434!important}
#creator .catalog-search small{background:#050409!important;border-color:#1e1a26!important}
#creator .creator-total{border-top-color:#211d29!important}

/* ---- palette presets ----
   Every surface in the modal now comes from four variables, so a whole look is one line. Preset A is the
   default; the others are selected with data-pal on <html> (the staging build ships a switcher for it). */
#creator{
  --p-card:linear-gradient(180deg,#141019 0%,#0f0c14 100%);
  --p-well:#0a0810;
  --p-band:#100d17;
  --p-field:#070610;
  --p-line:#241f2e;
  --p-line2:#332c40;
}
html[data-pal="b"] #creator{
  --p-card:#0d0d0f;
  --p-well:#08080a;
  --p-band:#111113;
  --p-field:#060607;
  --p-line:#232326;
  --p-line2:#323236;
}
html[data-pal="c"] #creator{
  --p-card:#15131b;
  --p-well:#0e0d13;
  --p-band:#191621;
  --p-field:#0b0a10;
  --p-line:#2c2836;
  --p-line2:#3d3749;
}
html[data-pal="d"] #creator{
  --p-card:linear-gradient(180deg,#191231 0%,#0d0a18 62%);
  --p-well:#0b0818;
  --p-band:#150f2a;
  --p-field:#080614;
  --p-line:#2b2350;
  --p-line2:#3d3370;
}
#creator .creator-card{background:var(--p-card)!important;border-color:var(--p-line)!important}
#creator .creator-card>h2{border-bottom-color:var(--p-line)!important}
#creator .creator-card .catalog-picker{background:var(--p-well)!important;border-color:var(--p-line)!important}
#creator .catalog-search,
#creator .catalog-toolbar{background:var(--p-band)!important;border-bottom-color:var(--p-line)!important}
#creator .catalog-search input,
#creator .catalog-toolbar select,
#creator .creator-total button#clearOffer{background-color:var(--p-field)!important;border-color:var(--p-line2)!important}
#creator .catalog-search small{background:var(--p-field)!important;border-color:var(--p-line)!important}
#creator .creator-total{border-top-color:var(--p-line)!important}

/* ---- preset A, premium pass ----
   Flat near-black was the problem: every surface sat within four values of every other one, so the card had no
   light in it and the item well swallowed the tiles. There is now one ambient source at the top of the card
   that falls away toward the footer, the well sits ABOVE the card in value so the tiles rest on something, and
   each panel gets a 1px top highlight - the cheap trick that makes a dark panel read as a lit surface rather
   than a hole. */
#creator{
  --p-well:#141119;
  --p-band:#1a1526;
  --p-field:#0d0b14;
  --p-line:rgba(163,127,255,.15);
  --p-line2:rgba(163,127,255,.24);
}
#creator .creator-card{
  background:radial-gradient(128% 86% at 50% -12%,#1e1636 0%,#130f1f 44%,#0b0911 100%)!important;
  border-color:rgba(163,127,255,.19)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 30px 80px rgba(0,0,0,.66),0 0 0 1px rgba(124,77,219,.09)!important;
}
#creator .creator-card .catalog-picker{
  background:linear-gradient(180deg,#151220 0%,#100e17 100%)!important;
  border-color:rgba(163,127,255,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
}
#creator .catalog-search,
#creator .catalog-toolbar{
  background:linear-gradient(180deg,#1c1729 0%,#171223 100%)!important;
  border-bottom-color:rgba(163,127,255,.16)!important;
}
#creator .catalog-search input,
#creator .catalog-toolbar select,
#creator .creator-total button#clearOffer{
  background-color:#0d0b14!important;
  border-color:rgba(163,127,255,.24)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important;
}
#creator .catalog-search small{background:#0d0b14!important;border-color:rgba(163,127,255,.15)!important;color:#a596c2!important}
#creator .creator-card>h2{border-bottom-color:rgba(163,127,255,.17)!important}
#creator .creator-total{border-top-color:rgba(163,127,255,.17)!important}
#creator .creator-card .create-submit{
  background:linear-gradient(180deg,#8b57e8 0%,#6f3ccb 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 22px rgba(112,54,204,.3)!important;
}
#creator .creator-card .create-submit:hover{background:linear-gradient(180deg,#9964f5 0%,#7a45db 100%)!important}

/* ---- desaturate ----
   Keep the lighting (ambient fall, 1px top highlights) but take the colour out of it. The violet was in every
   surface AND every hairline, which is what made it read pink. Surfaces are neutral charcoal now and the only
   saturated thing left in the card is the button. */
#creator{
  --p-well:#15141a;
  --p-band:#1a191f;
  --p-field:#0e0d12;
  --p-line:rgba(255,255,255,.07);
  --p-line2:rgba(255,255,255,.12);
}
#creator .creator-card{
  background:radial-gradient(128% 86% at 50% -12%,#1b1a21 0%,#141319 46%,#0d0c11 100%)!important;
  border-color:rgba(255,255,255,.08)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 30px 80px rgba(0,0,0,.66)!important;
}
#creator .creator-card .catalog-picker{
  background:linear-gradient(180deg,#16151c 0%,#111016 100%)!important;
  border-color:rgba(255,255,255,.07)!important;
}
#creator .catalog-search,
#creator .catalog-toolbar{
  background:linear-gradient(180deg,#1c1b22 0%,#17161d 100%)!important;
  border-bottom-color:rgba(255,255,255,.07)!important;
}
#creator .catalog-search input,
#creator .catalog-toolbar select,
#creator .creator-total button#clearOffer{border-color:rgba(255,255,255,.12)!important;background-color:#0e0d12!important}
#creator .catalog-search input:hover,
#creator .catalog-toolbar select:hover,
#creator .creator-total button#clearOffer:hover{border-color:rgba(255,255,255,.2)!important}
#creator .catalog-search small{background:#0e0d12!important;border-color:rgba(255,255,255,.07)!important;color:#948ba3!important}
#creator .creator-card>h2{border-bottom-color:rgba(255,255,255,.08)!important}
#creator .creator-total{border-top-color:rgba(255,255,255,.08)!important}
#creator .creator-card .create-submit{
  background:linear-gradient(180deg,#7a4bd4 0%,#6337b6 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 18px rgba(80,40,150,.24)!important;
}
#creator .creator-card .create-submit:hover{background:linear-gradient(180deg,#8955e4 0%,#7040c9 100%)!important}