/* ================= MASTER SETS ================= */
.masterbtn{flex:none;white-space:nowrap;letter-spacing:.02em}
.masterbtn.on{color:#0e1226;border-color:transparent;
  background:linear-gradient(180deg,#ffe98a,var(--gold) 58%,#d9a300);
  box-shadow:0 6px 16px -6px rgba(255,203,5,.9)}

/* ---- the header ---- */
.msthead{position:relative;padding:13px 46px 14px 16px;margin-bottom:12px;border-radius:14px;
  background:linear-gradient(180deg,#1b2142,#141830);border:1px solid #2d345f}
.msthead.done{border-color:rgba(63,240,138,.4)}
/* back to your binder — the filter has an escape hatch of its own */
.mstclear{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;
  border:none;cursor:pointer;background:rgba(255,255,255,.07);color:#9aa0cc;
  font-size:13px;line-height:1;transition:.16s}
.mstclear:hover{background:rgba(255,255,255,.15);color:#fff;transform:rotate(90deg)}
.mstname{font-family:'Bebas Neue';font-size:25px;letter-spacing:.03em;color:#fff;line-height:1}
.mstsub{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#7c84ad;margin-top:4px}
.mstcount{position:absolute;top:42px;right:16px;font-family:'Bebas Neue';font-size:26px;
  letter-spacing:.02em;color:#9aa0cc;line-height:1}
.mstcount b{color:var(--gold)}
.mstpct{position:absolute;top:42px;right:16px;font-size:11px;font-weight:700;color:#7c84ad}
.mstdone{position:absolute;top:38px;right:16px;font-size:10px;font-weight:800;
  letter-spacing:.16em;color:#3ff08a}
.mstbar{margin-top:11px;height:7px;border-radius:99px;background:#0e1226;overflow:hidden;
  border:1px solid #2a3057}
.mstbar i{display:block;height:100%;border-radius:99px;transition:width .5s cubic-bezier(.2,.9,.3,1);
  background:linear-gradient(90deg,#ffcb05,#ffe98a)}

/* ---- a slot you have not filled ----
   The real card art, dimmed. You can see exactly what you are chasing, which
   is the whole reason for laying a set out like this. Desaturated and darkened
   rather than hidden — a placeholder tells you nothing, and a number tells you
   almost nothing.

   Same .pocket as every other card in the binder, so it is the same size, the
   same corner radius and the same sleeve. Nothing here re-describes a pocket. */
.pocket.mstgap{cursor:pointer}
.pocket.mstgap img{filter:grayscale(.85) brightness(.34) contrast(.9);
  transition:filter .18s ease}
.pocket.mstgap::after{content:'';position:absolute;inset:0;z-index:3;border-radius:inherit;
  background:rgba(6,8,20,.34);pointer-events:none;transition:background .18s ease}
.pocket.mstgap:hover img{filter:grayscale(.5) brightness(.6) contrast(.95)}
.pocket.mstgap:hover::after{background:rgba(6,8,20,.12)}
.pocket.mstgap:active{transform:scale(.97)}

/* the card number, so a page reads as a run of the set */
.mstnum{position:absolute;left:50%;top:50%;z-index:4;transform:translate(-50%,-50%);
  font-family:'Bebas Neue';font-size:23px;letter-spacing:.06em;color:#aab2e6;
  text-shadow:0 2px 10px rgba(0,0,0,.9);pointer-events:none}
.mstnum.on{left:5px;top:5px;transform:none;font-size:11px;padding:1px 5px;
  border-radius:5px;background:rgba(6,8,20,.72);color:#c9cff5;text-shadow:none;
  font-family:inherit;font-weight:700;letter-spacing:.02em}


/* the cash-out row that says what was kept back */
.co-row.held b{color:var(--gold)}

/* ---- the count on the button ---- */
.masterbtn .mstn{display:inline-block;min-width:17px;padding:0 4px;margin-left:5px;
  border-radius:99px;font-style:normal;font-size:10px;font-weight:800;line-height:17px;
  background:rgba(255,203,5,.16);color:var(--gold)}
.masterbtn.on .mstn{background:rgba(14,18,38,.22);color:#3a2b00}

/* ---- the picker ----
   Set logos do the work. A row is a shelf label, not a table cell. */
.mstmodal{width:min(420px,calc(100vw - 28px));padding:20px 0 10px}
/* The title borrows the app's own wordmark convention — white word, gold word,
   Bebas — rather than importing a display face for one heading. The hairlines
   either side turn it from a label into a chapter card, and the gold gets a
   gradient fill so it reads as struck rather than typed. */
.mstpick-h{display:flex;align-items:center;justify-content:center;gap:13px;padding:0 22px}
.mstpick-h i{flex:1;max-width:56px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,203,5,.55))}
.mstpick-h i:last-child{background:linear-gradient(90deg,rgba(255,203,5,.55),transparent)}
.mstpick-h h4{margin:0;font-family:'Bebas Neue';font-size:31px;letter-spacing:.11em;
  line-height:1;color:#fff;white-space:nowrap;
  text-shadow:0 2px 0 rgba(0,0,0,.5),0 0 26px rgba(120,140,255,.25)}
.mstpick-h h4 span{margin-left:.28em;
  background:linear-gradient(180deg,#fff4c2,var(--gold) 52%,#e0a600);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 14px rgba(255,203,5,.45))}

.mstsearch{display:flex;align-items:center;gap:9px;margin:14px 16px 0;padding:0 12px;
  height:40px;border-radius:11px;background:#0f1226;border:1px solid var(--line)}
.mstsearch svg{width:15px;height:15px;flex:none;color:#5f679a}
.mstsearch input{flex:1;min-width:0;background:none;border:none;outline:none;
  color:#e8ebff;font-size:13px;font-weight:600;font-family:inherit}
.mstsearch input::placeholder{color:#5f679a;font-weight:500}
.mstsearch input::-webkit-search-cancel-button{filter:invert(.6)}

.mstpick-list{margin-top:12px;max-height:min(56vh,460px);overflow-y:auto;
  overscroll-behavior:contain;padding:0 14px 6px}
.mstgrp{font-size:9.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:#5f679a;padding:10px 4px 7px}
.mstgrp:first-child{padding-top:2px}
.mstnone{padding:26px 4px;text-align:center;font-size:12px;color:#5f679a}

.mstrow{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  padding:9px 11px;margin-bottom:6px;border-radius:12px;border:1px solid var(--line);
  background:#161a38;color:#e8ebff;font-family:inherit}
.mstrow:hover{border-color:#3d4477;background:#1b2044}
.mstrow:active{transform:scale(.99)}
.mstrow.on{border-color:rgba(255,203,5,.4);
  background:linear-gradient(90deg,rgba(255,203,5,.09),#171b3a 60%)}
.mstrow.done{border-color:rgba(63,240,138,.4);
  background:linear-gradient(90deg,rgba(63,240,138,.09),#171b3a 60%)}

/* the logo sits in a fixed box so wildly different logo shapes still line up */
.mstlogo{flex:none;width:52px;height:34px;display:flex;align-items:center;justify-content:center}
.mstlogo img{max-width:100%;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.6))}
.mstlogo img.sym{max-width:26px;max-height:26px;padding:4px;border-radius:7px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);
  box-sizing:content-box}

.mstrmid{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.mstrname{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;line-height:1.2}
.mstrmeta{font-size:10.5px;font-weight:600;color:#6d75a8;line-height:1}
.mstrbar{display:block;height:5px;border-radius:99px;background:#0e1226;overflow:hidden;
  border:1px solid #2a3057;max-width:150px}
.mstrbar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#ffcb05,#ffe98a);transition:width .4s ease}

.mstrright{flex:none;display:flex;align-items:baseline;gap:1px;font-family:'Bebas Neue';
  letter-spacing:.02em;color:var(--gold)}
.mstrright b{font-size:20px;line-height:1}
.mstrright em{font-style:normal;font-size:12px;color:#6d75a8}
.mstplus{font-family:inherit;font-size:19px;font-weight:400;color:#454c78;line-height:1;
  width:22px;text-align:center}
.mstrow:hover .mstplus{color:var(--gold)}
.mstchip{font-family:inherit;font-size:9px;font-weight:800;letter-spacing:.14em;
  padding:3px 8px;border-radius:99px;background:rgba(255,255,255,.06);color:#7c84ad}
.mstchip.done{background:rgba(63,240,138,.14);color:#3ff08a}

/* ---- the confirm ---- */
.mstcfmodal{width:min(340px,calc(100vw - 36px))}
.mstcf{padding:24px 20px 18px;text-align:center}
.mstcf-logo{display:block;height:56px;margin:0 auto 12px;
  display:flex;align-items:center;justify-content:center}
.mstcf-logo img{max-width:170px;max-height:56px;object-fit:contain;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.7))}
.mstcf-logo img.sym{max-width:44px;max-height:44px}
.mstcf-n{font-family:'Bebas Neue';font-size:27px;letter-spacing:.03em;color:#fff;
  line-height:1.05}
/* the stakes, then one line of consequence — a confirm is not a place to
   explain a feature, it is a place to not tap the wrong thing */
.mstcf-b{font-family:'Bebas Neue';font-size:21px;letter-spacing:.05em;color:var(--gold);
  margin-top:9px;line-height:1}
.mstcf-s{font-size:12px;color:#8a93c8;margin-top:6px;line-height:1.5}

/* ---- last-copy warning ----
   Sits inside the confirm sheets that already exist rather than adding a second
   dialog in front of the first. It warns; it never blocks. */
.mstwarn{margin:14px 16px 0;padding:10px 12px;border-radius:9px;font-size:11.5px;
  line-height:1.6;color:#ffdca8;background:rgba(255,180,60,.09);
  border:1px solid rgba(255,180,60,.32)}
.mstwarn b{color:#fff}

/* ---- completion ---- */
.mstwinmodal{width:min(360px,calc(100vw - 36px));overflow:hidden}
.mstwin{position:relative;padding:30px 22px 22px;text-align:center}
.mstwin-rays{position:absolute;top:-40%;left:50%;width:170%;height:150%;
  transform:translateX(-50%);pointer-events:none;opacity:.3;
  background:conic-gradient(from 0deg,transparent 0 10deg,var(--gold) 11deg 13deg,
    transparent 14deg 26deg,transparent 0 36deg,var(--gold) 37deg 39deg,transparent 40deg 52deg);
  -webkit-mask:radial-gradient(circle,#000 8%,transparent 56%);
  mask:radial-gradient(circle,#000 8%,transparent 56%);
  animation:mstspin 22s linear infinite}
@keyframes mstspin{to{transform:translateX(-50%) rotate(360deg)}}
.mstwin>*:not(.mstwin-rays){position:relative;z-index:2}
.mstwin-k{font-size:10px;font-weight:800;letter-spacing:.24em;color:var(--gold)}
.mstwin-n{font-family:'Bebas Neue';font-size:34px;letter-spacing:.03em;color:#fff;
  margin-top:7px;line-height:1.02;text-shadow:0 0 26px rgba(255,203,5,.6)}
.mstwin-c{font-family:'Bebas Neue';font-size:20px;letter-spacing:.06em;color:#3ff08a;margin-top:4px}
.mstwin-rw{display:flex;gap:10px;margin:18px 0 20px}
.mstwin-r{flex:1;padding:12px 8px;border-radius:11px;background:#161a38;border:1px solid var(--line)}
.mstwin-r span{display:block;font-family:'Bebas Neue';font-size:25px;letter-spacing:.02em;color:var(--gold)}
.mstwin-r em{display:block;font-style:normal;font-size:10px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:#7c84ad;margin-top:2px}
.mstwin .btn{width:100%}
@media (prefers-reduced-motion:reduce){.mstwin-rays{animation:none}}

/* ---- no rainbow stripe on these three ----
   .cmodal::before paints a gradient bar across the top of every centre modal.
   It reads as chrome on a sheet that is already carrying set logos and a gold
   title, so these opt out. */
.mstmodal::before,.mstcfmodal::before,.mstwinmodal::before{display:none}

/* ---- the scrollbar ----
   The default is a grey slab that belongs to the browser rather than the app.
   Firefox gets scrollbar-color; WebKit gets the real thing, with the track
   inset so the thumb floats in the panel instead of sitting in a gutter. */
.mstpick-list{scrollbar-width:thin;scrollbar-color:#4a4f86 transparent}
.mstpick-list::-webkit-scrollbar{width:10px}
.mstpick-list::-webkit-scrollbar-track{background:transparent}
.mstpick-list::-webkit-scrollbar-thumb{
  border-radius:99px;border:3px solid transparent;background-clip:content-box;
  background-color:#3c4278}
.mstpick-list::-webkit-scrollbar-thumb:hover{background-color:#525a9c}
.mstpick-list::-webkit-scrollbar-thumb:active{background-color:var(--gold)}

/* stopping is deliberately small and to one side — tapping a row you are
   chasing opens it, which is what you meant nine times out of ten */
.mststop{flex:none;width:24px;height:24px;margin-left:2px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:11px;
  color:#6d75a8;background:rgba(255,255,255,.05);transition:.15s}
.mststop:hover{background:rgba(255,90,90,.18);color:#ff8f8f}

/* ---- sell by price (js/rangesell.js) ---- */
.rsbtn{white-space:nowrap}
.rs-ttl{font-size:20px;text-align:center;margin:4px 0 2px}
.rs-sub{text-align:center;font-size:12px;color:var(--dim);margin-bottom:14px}
.rs-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:12px}
.rs-mode{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  color:var(--dim);border-radius:10px;padding:9px 4px;font-size:12.5px;font-weight:800;
  cursor:pointer;font-family:inherit}
.rs-mode.on{border-color:#ffcf33;color:#fff;background:rgba(255,207,51,.12)}
.rs-inputs{display:flex;gap:9px;margin-bottom:12px}
.rs-field{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;gap:4px}
.rs-field>span{font-size:10px;letter-spacing:.12em;font-weight:800;color:var(--dim2)}
.rs-field>i{position:absolute;left:11px;bottom:11px;font-style:normal;font-size:13px;
  color:var(--dim2);font-weight:800;pointer-events:none}
.rs-field input{width:100%;box-sizing:border-box;background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.12);border-radius:10px;color:#fff;
  font-family:inherit;font-size:15px;font-weight:800;padding:10px 10px 10px 24px;outline:none}
.rs-field input:focus{border-color:#4a5290}
/* the only sentence that says what is about to happen */
.rs-preview{background:rgba(0,0,0,.24);border-radius:12px;padding:12px}
.rs-count{font-size:17px;font-weight:800;color:#fff}
.rs-count.none{color:var(--dim2)}
.rs-count em{font-style:normal;color:#4be58c}
.rs-note{font-size:11.5px;color:#ffc86a;margin-top:6px;line-height:1.45}
.rs-note.dim{color:var(--dim)}