:root{
  --bg:#0b1220;
  --panel:#101a30;
  --text:#e7eefc;
  --muted:#a9b7d6;
  --accent:#4aa3ff;
  --border:#1f2c4d;
  --good:#35d07f;
  --warn:#f2c94c;
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto;background:
radial-gradient(900px 500px at 20% -10%, rgba(74,163,255,.20), transparent 60%),
radial-gradient(900px 500px at 80% -10%, rgba(53,208,127,.12), transparent 60%),
linear-gradient(180deg,#070c18,#0b1220);color:var(--text)}
.header{padding:16px 18px;border-bottom:1px solid var(--border);background:rgba(16,26,48,.70);backdrop-filter: blur(8px);position:sticky;top:0;z-index:10}
.headerInner{max-width:1200px;margin:0 auto;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
h1{margin:0;font-size:18px}
.subtitle{color:var(--muted);font-size:12px;margin-top:2px}
.container{max-width:1200px;margin:0 auto;padding:18px}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{border:1px solid var(--border);background:var(--panel);color:var(--text);padding:8px 10px;border-radius:12px;cursor:pointer}
.tab.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(74,163,255,.18)}
.stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.cardStat{border:1px solid var(--border);background:rgba(16,26,48,.7);padding:10px 12px;border-radius:14px;min-width:190px}
.cardStat .label{color:var(--muted);font-size:12px}
.cardStat .value{font-size:18px;margin-top:4px}
.cardStat .small{color:var(--muted);font-size:12px;margin-top:2px}
.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.controls input, .controls select{
  border:1px solid var(--border);background:rgba(16,26,48,.7);color:var(--text);
  padding:10px 12px;border-radius:14px;outline:none;min-height:40px
}
.btn{
  border:1px solid var(--border);background:rgba(16,26,48,.7);color:var(--text);
  padding:10px 12px;border-radius:14px;cursor:pointer;min-height:40px
}
.btn.primary{border-color:rgba(74,163,255,.65);background:rgba(74,163,255,.12)}
.btn:hover{border-color:rgba(74,163,255,.55)}
.toggle{color:var(--muted);display:flex;gap:8px;align-items:center}
.tableWrap{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:rgba(16,26,48,.55)}
table{width:100%;border-collapse:collapse; table-layout:fixed}
thead th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:left;padding:12px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.03)}
tbody td{padding:10px 12px;border-bottom:1px solid rgba(31,44,77,.65);vertical-align:middle}
tbody tr:nth-child(odd){background:rgba(15,26,51,.8)}
tbody tr:nth-child(even){background:rgba(12,22,44,.8)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.rowActions{display:flex; gap:8px; align-items:center}
.iconBtn{
  border:1px solid var(--border);
  background:rgba(16,26,48,.7);
  color:var(--text);
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
}
.iconBtn:hover{border-color:rgba(74,163,255,.55)}
.danger{border-color:rgba(255,99,99,.55); color:#ffb3b3}
.danger:hover{border-color:rgba(255,99,99,.85)}

.ownedBtn{
  width:40px;height:26px;border-radius:999px;border:1px solid var(--border);
  background:#0c152b;cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-weight:700
}
.ownedBtn.on{border-color:rgba(53,208,127,.6);color:var(--good);background:rgba(53,208,127,.10)}

.editCell{display:inline-block; max-width:100%; border-bottom:1px dashed rgba(169,183,214,.35); padding-bottom:1px}

/* Price cell (Binders table) */
.priceCell{display:inline-flex;align-items:center;gap:8px;justify-content:flex-end;min-width:96px}
.pencilIcon{width:16px;height:16px;fill:currentColor;opacity:.9}


/* Type badges + alignment */
.typeCell{display:grid; grid-template-columns: 120px 1fr; gap:10px; align-items:center; max-width:100%; overflow:visible}
.typeSelect{border:1px solid var(--border); background:rgba(16,26,48,.7); color:var(--text); padding:8px 12px; border-radius:999px; outline:none; min-height:34px; width:100%; min-width:0; max-width:100%}
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
}
.typeCell .badge{width:140px}
.badge.holo{border-color:rgba(242,201,76,.6); color:var(--warn); background:rgba(242,201,76,.10)}
.badge.nonholo{border-color:rgba(169,183,214,.45); color:var(--muted); background:rgba(169,183,214,.08)}
.badge.reverse{border-color:rgba(74,163,255,.55); color:var(--accent); background:rgba(74,163,255,.10)}
.badge.promo{border-color:rgba(255,99,99,.55); color:#ffb3b3; background:rgba(255,99,99,.10)}
.badge.ex{border-color:rgba(255,99,99,.55); color:#ffb3b3; background:rgba(255,99,99,.10)}
.badge.gx{border-color:rgba(191,90,242,.55); color:#e6c2ff; background:rgba(191,90,242,.10)}
.badge.v{border-color:rgba(53,208,127,.55); color:var(--good); background:rgba(53,208,127,.10)}
.badge.vstar{border-color:rgba(53,208,127,.55); color:var(--good); background:rgba(53,208,127,.10)}
.badge.vmax{border-color:rgba(53,208,127,.55); color:var(--good); background:rgba(53,208,127,.10)}
.badge.fullart{border-color:rgba(74,163,255,.55); color:var(--accent); background:rgba(74,163,255,.10)}
.badge.altart{border-color:rgba(74,163,255,.55); color:var(--accent); background:rgba(74,163,255,.10)}
.badge.secret{border-color:rgba(242,201,76,.6); color:var(--warn); background:rgba(242,201,76,.10)}
.badge.shiny{border-color:rgba(242,201,76,.6); color:var(--warn); background:rgba(242,201,76,.10)}
.badge.radiant{border-color:rgba(242,201,76,.6); color:var(--warn); background:rgba(242,201,76,.10)}
.badge.tg{border-color:rgba(191,90,242,.55); color:#e6c2ff; background:rgba(191,90,242,.10)}
.badge.ir{border-color:rgba(191,90,242,.55); color:#e6c2ff; background:rgba(191,90,242,.10)}
.badge.sir{border-color:rgba(191,90,242,.55); color:#e6c2ff; background:rgba(191,90,242,.10)}
.badge.acespec{border-color:rgba(255,99,99,.55); color:#ffb3b3; background:rgba(255,99,99,.10)}
.badge.other{border-color:rgba(169,183,214,.45); color:var(--muted); background:rgba(169,183,214,.08)}

/* Card cell alignment + 1st badge slot */
.cardCell{display:grid; grid-template-columns: 1fr 48px; gap:10px; align-items:center}
.badge.edition{margin-left:0; justify-content:center; width:48px; font-size:11px; font-weight:900}
.badge.edition.first{border-color:rgba(255,60,60,.85); color:#ff7a7a; background:rgba(255,60,60,.12)}
.badge.edition.shadowless{border-color:rgba(242,201,76,.60); color:var(--warn); background:rgba(242,201,76,.10)}
.badge.edition.unlimited{border-color:rgba(169,183,214,.45); color:var(--muted); background:rgba(169,183,214,.08)}
.badge.edition.spacer{border:1px solid transparent; background:transparent; color:transparent; width:48px}

/* Modal */
.modal{
  position:fixed; inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.55);
  padding:18px;
  z-index:50;
}
.modal.show{display:flex}
.modalInner{
  width:min(760px, 100%);
  border:1px solid var(--border);
  background:rgba(16,26,48,.92);
  border-radius:16px;
  overflow:hidden;
}
.modalHeader{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  padding:14px 14px 10px 14px;
  border-bottom:1px solid var(--border);
}
.modalTitle{font-weight:800}
.modalSub{color:var(--muted); font-size:12px; margin-top:2px}
.formGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
  padding:14px;
}
.field{display:flex; flex-direction:column; gap:6px}
.field span{color:var(--muted); font-size:12px}
.field input, .field select{
  border:1px solid var(--border);
  background:rgba(16,26,48,.7);
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  outline:none;
  min-height:40px;
}
.fieldWide{grid-column:1 / -1}
.formActions{display:flex; justify-content:space-between; align-items:center; gap:10px}

/* Prevent text overlap */
table th, table td{overflow:hidden}
tbody td{white-space:nowrap; text-overflow:ellipsis; overflow:hidden}

/* Make Year and Avg align nicely */
td:nth-child(6), td:nth-child(7){text-align:right}

/* Neater delete button */
.iconBtn{
  width:40px;
  height:26px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  line-height:1;
}

/* Bigger Owned toggle + cleaner */
.ownedBtn{
  width:44px;
  height:30px;
  font-size:14px;
}

.trashIcon{width:16px;height:16px;fill:currentColor;opacity:.9}
.iconBtn.danger{color:#ffb3b3}

.copyCell{cursor:text}


/* Force Type badge to be fully pill-shaped */
.typeCell .badge{
  border-radius:999px !important;
}
.typeCell{display:grid; grid-template-columns: 120px 1fr; gap:10px; align-items:center; max-width:100%; overflow:visible}

.cardStat .subtle{opacity:.75}

/* Ensure Type badge ends are not clipped */
td:nth-child(5), th:nth-child(5){overflow:visible !important}
.typeCell{overflow:visible !important}
.typeCell .badge{
  border-radius:9999px !important;
  padding-left:12px;
  padding-right:12px;
}

/* Card column: keep 1st badge visible and allow long names */
th:nth-child(2), td:nth-child(2){
  overflow: visible !important;
}
td:nth-child(2){white-space:normal !important}
.cardText{
  max-width:100%;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  white-space:normal;
  line-height:1.2;
}

/* Type column: badge only */
.typeCell.badgeOnly{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

/* Card hover tooltip consistency */
.cardText{cursor:text}

/* Subtle hover effect for Owned checkbox */
.ownedBtn{
  transition: all .15s ease;
}
.ownedBtn:hover{
  transform: scale(1.08);
  border-color: rgba(74,163,255,.7);
}
.ownedBtn.on:hover{
  border-color: rgba(53,208,127,.9);
}

/* Keep dotted underline neutral (no blue hover) */
.editCell:hover{
  border-bottom:1px dashed rgba(169,183,214,.35);
}

/* Remove blue focus effect from dotted text */
.editCell:focus{
  outline:none;
  border-bottom:1px dashed rgba(169,183,214,.35);
}

/* Home cards */
.collectionsGrid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:12px;
}
.collectionCard{
  border:1px solid var(--border);
  background:rgba(16,26,48,.65);
  border-radius:16px;
  padding:14px;
  text-decoration:none;
  color:var(--text);
  transition:transform .12s ease, border-color .12s ease;
}
.collectionCard:hover{
  transform:translateY(-2px);
  border-color:rgba(74,163,255,.55);
}

/* Hub collection card layout */
.collectionCard{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.collectionMainLink{
  text-decoration:none;
  color:inherit;
}
.collectionActions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
}
.btn.mini{
  padding:8px 10px;
  font-size:12px;
  border-radius:12px;
}
.btn.mini.danger{
  border-color: rgba(255, 120, 120, .45);
  color:#ffb3b3;
}
.btn.mini.danger:hover{
  border-color: rgba(255, 120, 120, .75);
}

.collectionCardTop{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.collectionActions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  margin-top:6px;
}

/* Dark homepage (pkmnbindr-inspired) */
body.homeDark{
  background:
    radial-gradient(900px 520px at 15% -10%, rgba(74,163,255,.20), transparent 60%),
    radial-gradient(900px 520px at 85% -10%, rgba(53,208,127,.12), transparent 60%),
    linear-gradient(180deg, #05070d, #070b14 40%, #05070d);
}
body.homeDark .header{display:none;} /* hide old header on homepage only */
body.homeDark{
  --text:#eef3ff;
  --muted:rgba(238,243,255,.70);
  --border:rgba(255,255,255,.12);
  --accent:#4aa3ff;
}

.homeHero{padding:22px 0 12px 0;}
.homeNav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 0 18px 0;
}
.brand{display:flex; align-items:center; gap:10px;}
.brandMark{display:inline-grid; grid-auto-flow:column; gap:3px;}
.brandMark span{width:8px; height:12px; border-radius:3px; background:rgba(238,243,255,.85);}
.brandName{font-weight:900; letter-spacing:.2px;}
.homeNavLinks{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end;}
.homeLink{color:rgba(238,243,255,.75); text-decoration:none; font-weight:800; font-size:13px; padding:8px 10px; border-radius:999px;}
.homeLink:hover{background:rgba(255,255,255,.06); color:rgba(238,243,255,.92);}

.heroGrid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:22px;
  align-items:center;
}
@media (max-width: 980px){ .heroGrid{grid-template-columns:1fr;} .heroArt{display:none;} }

.heroH1{
  margin:0;
  font-size:44px;
  line-height:1.05;
  letter-spacing:-.02em;
}
.heroDim{color:rgba(238,243,255,.62); font-weight:800;}
.heroP{margin:14px 0 18px 0; color:rgba(238,243,255,.72); max-width:62ch;}
.heroCtas{display:flex; gap:12px; flex-wrap:wrap;}

body.homeDark .btn{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14);}
body.homeDark .btn:hover{border-color:rgba(74,163,255,.55);}
body.homeDark .btn.primary{background:rgba(74,163,255,.95); border-color:rgba(74,163,255,.95); color:#07101f;}
body.homeDark .btn.primary:hover{filter:brightness(1.02);}
body.homeDark .btn.ghost{background:transparent; border-color:rgba(255,255,255,.14); color:rgba(238,243,255,.9);}

.heroArt{display:flex; justify-content:flex-end;}
.artTilt{
  width:min(520px, 100%);
  padding:16px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  transform:rotate(-6deg);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
}
.artBar{height:10px; border-radius:999px; background:rgba(74,163,255,.28); margin-bottom:14px;}
.artGrid{display:grid; grid-template-columns:repeat(5,1fr); gap:10px;}
.artCard{
  aspect-ratio: 2.5 / 3.5;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(145deg, rgba(74,163,255,.22), rgba(255,255,255,.03)),
    radial-gradient(240px 160px at 40% 20%, rgba(53,208,127,.18), transparent 60%);
}

.homeSection{padding:18px 0 0 0;}
.homeSectionHeader{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin:8px 0 10px 0;
}
.homeSectionHeader h2{margin:0; font-size:18px;}
.homeSub{color:rgba(238,243,255,.62); font-size:12px; margin-top:4px;}
.homeSectionActions{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;}

.homeShell{
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  background:rgba(255,255,255,.04);
  padding:14px;
}
.homeShell.soft{padding:16px;}
body.homeDark .collectionsGrid,
body.homeDark .collectionCard{ overflow:visible !important; }
body.homeDark .collectionCard{
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:none !important;
}
body.homeDark .collectionCard .subtitle{color:rgba(238,243,255,.62) !important;}
body.homeDark .kebabMenu{ z-index:9999 !important; }

.howGrid{display:grid; grid-template-columns: 1.4fr .6fr; gap:14px;}
@media (max-width: 980px){ .howGrid{grid-template-columns:1fr;} }
.howTitle{font-weight:900; margin-bottom:8px;}
.howList{margin:0; padding-left:18px; color:rgba(238,243,255,.70);}
.howText{color:rgba(238,243,255,.70);}

/* Marketing extras */
body.homeDark .brand{color:inherit; text-decoration:none;}
.artHeaderRow{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.artTitle{font-weight:900; opacity:.9;}
.artChip{font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:rgba(238,243,255,.75);}
.artMeta{display:flex; justify-content:space-between; margin-top:12px; color:rgba(238,243,255,.62); font-size:12px;}
.pillRow{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
.pill{padding:8px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:rgba(238,243,255,.70); font-size:12px; font-weight:800;}
.kicker{color:rgba(238,243,255,.55); font-weight:900; text-transform:uppercase; letter-spacing:.08em; font-size:11px;}
.h2{margin:8px 0 10px 0; font-size:26px;}
.p{color:rgba(238,243,255,.72); max-width:70ch;}
.split{display:grid; grid-template-columns: 1.2fr .8fr; gap:18px; align-items:center;}
@media (max-width:980px){.split{grid-template-columns:1fr;}}
.featureList{display:grid; gap:10px; margin-top:14px;}
.feature{display:flex; gap:10px; align-items:flex-start; padding:12px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03);}
.featureIcon{width:26px; height:26px; border-radius:10px; background:rgba(74,163,255,.18); display:flex; align-items:center; justify-content:center; font-weight:900;}
.featureTitle{font-weight:900;}
.featureText{color:rgba(238,243,255,.66); font-size:12.5px; margin-top:2px;}
.cardStack{position:relative; height:220px;}
.stackCard{position:absolute; inset:auto 0 0 auto; width:220px; height:310px; border-radius:18px; border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(145deg, rgba(74,163,255,.22), rgba(255,255,255,.03)),
    radial-gradient(240px 160px at 40% 20%, rgba(53,208,127,.18), transparent 60%);
  box-shadow:0 24px 70px rgba(0,0,0,.45);
}
.stackCard:nth-child(1){transform:rotate(-8deg) translate(20px,0); opacity:.92;}
.stackCard:nth-child(2){transform:rotate(4deg) translate(0,0); opacity:.82;}
.stackCard:nth-child(3){transform:rotate(14deg) translate(-20px,0); opacity:.72;}

.tiles{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px;}
@media (max-width:980px){.tiles{grid-template-columns:1fr;}}
.tile{padding:14px; border-radius:18px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03);}
.tileTitle{font-weight:900; margin-bottom:6px;}
.tileText{color:rgba(238,243,255,.66); font-size:12.5px;}

.faqGrid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px;}
@media (max-width:980px){.faqGrid{grid-template-columns:1fr;}}
.faqItem{padding:14px; border-radius:18px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03);}
.faqQ{font-weight:900; margin-bottom:6px;}
.faqA{color:rgba(238,243,255,.66); font-size:12.5px;}

.homeFooter{padding:28px 0 34px 0;}
.homeFooterInner{display:flex; justify-content:space-between; gap:14px; align-items:flex-start; border-top:1px solid rgba(255,255,255,.10); padding-top:18px;}
@media (max-width:980px){.homeFooterInner{flex-direction:column;}}
.footBrand{display:flex; gap:10px; align-items:flex-start;}
.footTitle{font-weight:900;}
.footSub{color:rgba(238,243,255,.60); font-size:12.5px; margin-top:4px;}
.footLinks{display:flex; gap:12px; flex-wrap:wrap;}
.footLinks a{color:rgba(238,243,255,.70); text-decoration:none; font-weight:800; font-size:13px; padding:8px 10px; border-radius:999px;}
.footLinks a:hover{background:rgba(255,255,255,.06); color:rgba(238,243,255,.92);}


/* --- CBS styles (merged) --- */
:root{
  --bg:#0b1220;
  --panel:#101a30;
  --text:#e7eefc;
  --muted:#a9b7d6;
  --accent:#4aa3ff;
  --border:#1f2c4d;
  --good:#35d07f;
  --warn:#f2c94c;
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto;background:
radial-gradient(900px 500px at 20% -10%, rgba(74,163,255,.20), transparent 60%),
radial-gradient(900px 500px at 80% -10%, rgba(53,208,127,.12), transparent 60%),
linear-gradient(180deg,#070c18,#0b1220);color:var(--text)}
.header{padding:16px 18px;border-bottom:1px solid var(--border);background:rgba(16,26,48,.70);backdrop-filter: blur(8px);position:sticky;top:0;z-index:10}
.headerInner{max-width:1200px;margin:0 auto;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
h1{margin:0;font-size:18px}
.subtitle{color:var(--muted);font-size:12px;margin-top:2px}
.container{max-width:1200px;margin:0 auto;padding:18px}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{border:1px solid var(--border);background:var(--panel);color:var(--text);padding:8px 10px;border-radius:12px;cursor:pointer}
.tab.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(74,163,255,.18)}
.stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.cardStat{border:1px solid var(--border);background:rgba(16,26,48,.7);padding:10px 12px;border-radius:14px;min-width:190px}
.cardStat .label{color:var(--muted);font-size:12px}
.cardStat .value{font-size:18px;margin-top:4px}
.cardStat .small{color:var(--muted);font-size:12px;margin-top:2px}
.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.controls input, .controls select{
  border:1px solid var(--border);background:rgba(16,26,48,.7);color:var(--text);
  padding:10px 12px;border-radius:14px;outline:none;min-height:40px
}
.btn{
  border:1px solid var(--border);background:rgba(16,26,48,.7);color:var(--text);
  padding:10px 12px;border-radius:14px;cursor:pointer;min-height:40px
}
.btn.primary{border-color:rgba(74,163,255,.65);background:rgba(74,163,255,.12)}
.btn:hover{border-color:rgba(74,163,255,.55)}
.toggle{color:var(--muted);display:flex;gap:8px;align-items:center}
.tableWrap{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:rgba(16,26,48,.55)}
table{width:100%;border-collapse:collapse; table-layout:fixed}
thead th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:left;padding:12px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.03)}
tbody td{padding:10px 12px;border-bottom:1px solid rgba(31,44,77,.65);vertical-align:middle}
tbody tr:nth-child(odd){background:rgba(15,26,51,.8)}
tbody tr:nth-child(even){background:rgba(12,22,44,.8)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.rowActions{display:flex; gap:8px; align-items:center}
.iconBtn{
  border:1px solid var(--border);
  background:rgba(16,26,48,.7);
  color:var(--text);
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
}
.iconBtn:hover{border-color:rgba(74,163,255,.55)}
.danger{border-color:rgba(255,99,99,.55); color:#ffb3b3}
.danger:hover{border-color:rgba(255,99,99,.85)}

.ownedBtn{
  width:40px;height:26px;border-radius:999px;border:1px solid var(--border);
  background:#0c152b;cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-weight:700
}
.ownedBtn.on{border-color:rgba(53,208,127,.6);color:var(--good);background:rgba(53,208,127,.10)}

.editCell{display:inline-block; max-width:100%; border-bottom:1px dashed rgba(169,183,214,.35); padding-bottom:1px}


/* Type badges + alignment */
.typeCell{display:grid; grid-template-columns: 120px 1fr; gap:10px; align-items:center; max-width:100%; overflow:visible}
.typeSelect{border:1px solid var(--border); background:rgba(16,26,48,.7); color:var(--text); padding:8px 12px; border-radius:999px; outline:none; min-height:34px; width:100%; min-width:0; max-width:100%}
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
}
.typeCell .badge{width:140px}
.badge.holo{border-color:rgba(242,201,76,.6); color:var(--warn); background:rgba(242,201,76,.10)}
.badge.nonholo{border-color:rgba(169,183,214,.45); color:var(--muted); background:rgba(169,183,214,.08)}
.badge.reverse{border-color:rgba(74,163,255,.55); color:var(--accent); background:rgba(74,163,255,.10)}
.badge.promo{border-color:rgba(255,99,99,.55); color:#ffb3b3; background:rgba(255,99,99,.10)}
.badge.ex{border-color:rgba(255,99,99,.55); color:#ffb3b3; background:rgba(255,99,99,.10)}
.badge.gx{border-color:rgba(191,90,242,.55); color:#e6c2ff; background:rgba(191,90,242,.10)}
.badge.v{border-color:rgba(53,208,127,.55); color:var(--good); background:rgba(53,208,127,.10)}
.badge.vstar{border-color:rgba(53,208,127,.55); color:var(--good); background:rgba(53,208,127,.10)}
.badge.vmax{border-color:rgba(53,208,127,.55); color:var(--good); background:rgba(53,208,127,.10)}
.badge.fullart{border-color:rgba(74,163,255,.55); color:var(--accent); background:rgba(74,163,255,.10)}
.badge.altart{border-color:rgba(74,163,255,.55); color:var(--accent); background:rgba(74,163,255,.10)}
.badge.secret{border-color:rgba(242,201,76,.6); color:var(--warn); background:rgba(242,201,76,.10)}
.badge.shiny{border-color:rgba(242,201,76,.6); color:var(--warn); background:rgba(242,201,76,.10)}
.badge.radiant{border-color:rgba(242,201,76,.6); color:var(--warn); background:rgba(242,201,76,.10)}
.badge.tg{border-color:rgba(191,90,242,.55); color:#e6c2ff; background:rgba(191,90,242,.10)}
.badge.ir{border-color:rgba(191,90,242,.55); color:#e6c2ff; background:rgba(191,90,242,.10)}
.badge.sir{border-color:rgba(191,90,242,.55); color:#e6c2ff; background:rgba(191,90,242,.10)}
.badge.acespec{border-color:rgba(255,99,99,.55); color:#ffb3b3; background:rgba(255,99,99,.10)}
.badge.other{border-color:rgba(169,183,214,.45); color:var(--muted); background:rgba(169,183,214,.08)}

/* Card cell alignment + 1st badge slot */
.cardCell{display:grid; grid-template-columns: 1fr 48px; gap:10px; align-items:center}
.badge.edition{margin-left:0; justify-content:center; width:48px; font-size:11px; font-weight:900}
.badge.edition.first{border-color:rgba(255,60,60,.85); color:#ff7a7a; background:rgba(255,60,60,.12)}
.badge.edition.shadowless{border-color:rgba(242,201,76,.60); color:var(--warn); background:rgba(242,201,76,.10)}
.badge.edition.unlimited{border-color:rgba(169,183,214,.45); color:var(--muted); background:rgba(169,183,214,.08)}
.badge.edition.spacer{border:1px solid transparent; background:transparent; color:transparent; width:48px}

/* Modal */
.modal{
  position:fixed; inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.55);
  padding:18px;
  z-index:50;
}
.modal.show{display:flex}
.modalInner{
  width:min(760px, 100%);
  border:1px solid var(--border);
  background:rgba(16,26,48,.92);
  border-radius:16px;
  overflow:hidden;
}
.modalHeader{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  padding:14px 14px 10px 14px;
  border-bottom:1px solid var(--border);
}
.modalTitle{font-weight:800}
.modalSub{color:var(--muted); font-size:12px; margin-top:2px}
.formGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
  padding:14px;
}
.field{display:flex; flex-direction:column; gap:6px}
.field span{color:var(--muted); font-size:12px}
.field input, .field select{
  border:1px solid var(--border);
  background:rgba(16,26,48,.7);
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  outline:none;
  min-height:40px;
}
.fieldWide{grid-column:1 / -1}
.formActions{display:flex; justify-content:space-between; align-items:center; gap:10px}

/* Prevent text overlap */
table th, table td{overflow:hidden}
tbody td{white-space:nowrap; text-overflow:ellipsis; overflow:hidden}

/* Make Year and Avg align nicely */
td:nth-child(6), td:nth-child(7){text-align:right}

/* Neater delete button */
.iconBtn{
  width:40px;
  height:26px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  line-height:1;
}

/* Bigger Owned toggle + cleaner */
.ownedBtn{
  width:44px;
  height:30px;
  font-size:14px;
}

.trashIcon{width:16px;height:16px;fill:currentColor;opacity:.9}
.iconBtn.danger{color:#ffb3b3}

.copyCell{cursor:text}


/* Force Type badge to be fully pill-shaped */
.typeCell .badge{
  border-radius:999px !important;
}
.typeCell{display:grid; grid-template-columns: 120px 1fr; gap:10px; align-items:center; max-width:100%; overflow:visible}

.cardStat .subtle{opacity:.75}

/* Ensure Type badge ends are not clipped */
td:nth-child(5), th:nth-child(5){overflow:visible !important}
.typeCell{overflow:visible !important}
.typeCell .badge{
  border-radius:9999px !important;
  padding-left:12px;
  padding-right:12px;
}

/* Card column: keep 1st badge visible and allow long names */
th:nth-child(2), td:nth-child(2){
  overflow: visible !important;
}
td:nth-child(2){white-space:normal !important}
.cardText{
  max-width:100%;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  white-space:normal;
  line-height:1.2;
}

/* Type column: badge only */
.typeCell.badgeOnly{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

/* Card hover tooltip consistency */
.cardText{cursor:text}

/* Subtle hover effect for Owned checkbox */
.ownedBtn{
  transition: all .15s ease;
}
.ownedBtn:hover{
  transform: scale(1.08);
  border-color: rgba(74,163,255,.7);
}
.ownedBtn.on:hover{
  border-color: rgba(53,208,127,.9);
}

/* Keep dotted underline neutral (no blue hover) */
.editCell:hover{
  border-bottom:1px dashed rgba(169,183,214,.35);
}

/* Remove blue focus effect from dotted text */
.editCell:focus{
  outline:none;
  border-bottom:1px dashed rgba(169,183,214,.35);
}

/* Home cards */
.collectionsGrid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:12px;
}
.collectionCard{
  border:1px solid var(--border);
  background:rgba(16,26,48,.65);
  border-radius:16px;
  padding:14px;
  text-decoration:none;
  color:var(--text);
  transition:transform .12s ease, border-color .12s ease;
}
.collectionCard:hover{
  transform:translateY(-2px);
  border-color:rgba(74,163,255,.55);
}

/* Hub collection card layout */
.collectionCard{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.collectionMainLink{
  text-decoration:none;
  color:inherit;
}
.collectionActions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
}
.btn.mini{
  padding:8px 10px;
  font-size:12px;
  border-radius:12px;
}
.btn.mini.danger{
  border-color: rgba(255, 120, 120, .45);
  color:#ffb3b3;
}
.btn.mini.danger:hover{
  border-color: rgba(255, 120, 120, .75);
}

.collectionCardTop{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.collectionActions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  margin-top:6px;
}

/* Dark homepage (pkmnbindr-inspired) */
body.homeDark{
  background:
    radial-gradient(900px 520px at 15% -10%, rgba(74,163,255,.20), transparent 60%),
    radial-gradient(900px 520px at 85% -10%, rgba(53,208,127,.12), transparent 60%),
    linear-gradient(180deg, #05070d, #070b14 40%, #05070d);
}
body.homeDark .header{display:none;} /* hide old header on homepage only */
body.homeDark{
  --text:#eef3ff;
  --muted:rgba(238,243,255,.70);
  --border:rgba(255,255,255,.12);
  --accent:#4aa3ff;
}

.homeHero{padding:22px 0 12px 0;}
.homeNav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 0 18px 0;
}
.brand{display:flex; align-items:center; gap:10px;}
.brandMark{display:inline-grid; grid-auto-flow:column; gap:3px;}
.brandMark span{width:8px; height:12px; border-radius:3px; background:rgba(238,243,255,.85);}
.brandName{font-weight:900; letter-spacing:.2px;}
.homeNavLinks{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end;}
.homeLink{color:rgba(238,243,255,.75); text-decoration:none; font-weight:800; font-size:13px; padding:8px 10px; border-radius:999px;}
.homeLink:hover{background:rgba(255,255,255,.06); color:rgba(238,243,255,.92);}

.heroGrid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:22px;
  align-items:center;
}
@media (max-width: 980px){ .heroGrid{grid-template-columns:1fr;} .heroArt{display:none;} }

.heroH1{
  margin:0;
  font-size:44px;
  line-height:1.05;
  letter-spacing:-.02em;
}
.heroDim{color:rgba(238,243,255,.62); font-weight:800;}
.heroP{margin:14px 0 18px 0; color:rgba(238,243,255,.72); max-width:62ch;}
.heroCtas{display:flex; gap:12px; flex-wrap:wrap;}

body.homeDark .btn{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14);}
body.homeDark .btn:hover{border-color:rgba(74,163,255,.55);}
body.homeDark .btn.primary{background:rgba(74,163,255,.95); border-color:rgba(74,163,255,.95); color:#07101f;}
body.homeDark .btn.primary:hover{filter:brightness(1.02);}
body.homeDark .btn.ghost{background:transparent; border-color:rgba(255,255,255,.14); color:rgba(238,243,255,.9);}

.heroArt{display:flex; justify-content:flex-end;}
.artTilt{
  width:min(520px, 100%);
  padding:16px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  transform:rotate(-6deg);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
}
.artBar{height:10px; border-radius:999px; background:rgba(74,163,255,.28); margin-bottom:14px;}
.artGrid{display:grid; grid-template-columns:repeat(5,1fr); gap:10px;}
.artCard{
  aspect-ratio: 2.5 / 3.5;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(145deg, rgba(74,163,255,.22), rgba(255,255,255,.03)),
    radial-gradient(240px 160px at 40% 20%, rgba(53,208,127,.18), transparent 60%);
}

.homeSection{padding:18px 0 0 0;}
.homeSectionHeader{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin:8px 0 10px 0;
}
.homeSectionHeader h2{margin:0; font-size:18px;}
.homeSub{color:rgba(238,243,255,.62); font-size:12px; margin-top:4px;}
.homeSectionActions{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;}

.homeShell{
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  background:rgba(255,255,255,.04);
  padding:14px;
}
.homeShell.soft{padding:16px;}
body.homeDark .collectionsGrid,
body.homeDark .collectionCard{ overflow:visible !important; }
body.homeDark .collectionCard{
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:none !important;
}
body.homeDark .collectionCard .subtitle{color:rgba(238,243,255,.62) !important;}
body.homeDark .kebabMenu{ z-index:9999 !important; }

.howGrid{display:grid; grid-template-columns: 1.4fr .6fr; gap:14px;}
@media (max-width: 980px){ .howGrid{grid-template-columns:1fr;} }
.howTitle{font-weight:900; margin-bottom:8px;}
.howList{margin:0; padding-left:18px; color:rgba(238,243,255,.70);}
.howText{color:rgba(238,243,255,.70);}

/* Marketing extras */
body.homeDark .brand{color:inherit; text-decoration:none;}
.artHeaderRow{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.artTitle{font-weight:900; opacity:.9;}
.artChip{font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:rgba(238,243,255,.75);}
.artMeta{display:flex; justify-content:space-between; margin-top:12px; color:rgba(238,243,255,.62); font-size:12px;}
.pillRow{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
.pill{padding:8px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:rgba(238,243,255,.70); font-size:12px; font-weight:800;}
.kicker{color:rgba(238,243,255,.55); font-weight:900; text-transform:uppercase; letter-spacing:.08em; font-size:11px;}
.h2{margin:8px 0 10px 0; font-size:26px;}
.p{color:rgba(238,243,255,.72); max-width:70ch;}
.split{display:grid; grid-template-columns: 1.2fr .8fr; gap:18px; align-items:center;}
@media (max-width:980px){.split{grid-template-columns:1fr;}}
.featureList{display:grid; gap:10px; margin-top:14px;}
.feature{display:flex; gap:10px; align-items:flex-start; padding:12px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03);}
.featureIcon{width:26px; height:26px; border-radius:10px; background:rgba(74,163,255,.18); display:flex; align-items:center; justify-content:center; font-weight:900;}
.featureTitle{font-weight:900;}
.featureText{color:rgba(238,243,255,.66); font-size:12.5px; margin-top:2px;}
.cardStack{position:relative; height:220px;}
.stackCard{position:absolute; inset:auto 0 0 auto; width:220px; height:310px; border-radius:18px; border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(145deg, rgba(74,163,255,.22), rgba(255,255,255,.03)),
    radial-gradient(240px 160px at 40% 20%, rgba(53,208,127,.18), transparent 60%);
  box-shadow:0 24px 70px rgba(0,0,0,.45);
}
.stackCard:nth-child(1){transform:rotate(-8deg) translate(20px,0); opacity:.92;}
.stackCard:nth-child(2){transform:rotate(4deg) translate(0,0); opacity:.82;}
.stackCard:nth-child(3){transform:rotate(14deg) translate(-20px,0); opacity:.72;}

.tiles{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px;}
@media (max-width:980px){.tiles{grid-template-columns:1fr;}}
.tile{padding:14px; border-radius:18px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03);}
.tileTitle{font-weight:900; margin-bottom:6px;}
.tileText{color:rgba(238,243,255,.66); font-size:12.5px;}

.faqGrid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px;}
@media (max-width:980px){.faqGrid{grid-template-columns:1fr;}}
.faqItem{padding:14px; border-radius:18px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03);}
.faqQ{font-weight:900; margin-bottom:6px;}
.faqA{color:rgba(238,243,255,.66); font-size:12.5px;}

.homeFooter{padding:28px 0 34px 0;}
.homeFooterInner{display:flex; justify-content:space-between; gap:14px; align-items:flex-start; border-top:1px solid rgba(255,255,255,.10); padding-top:18px;}
@media (max-width:980px){.homeFooterInner{flex-direction:column;}}
.footBrand{display:flex; gap:10px; align-items:flex-start;}
.footTitle{font-weight:900;}
.footSub{color:rgba(238,243,255,.60); font-size:12.5px; margin-top:4px;}
.footLinks{display:flex; gap:12px; flex-wrap:wrap;}
.footLinks a{color:rgba(238,243,255,.70); text-decoration:none; font-weight:800; font-size:13px; padding:8px 10px; border-radius:999px;}
.footLinks a:hover{background:rgba(255,255,255,.06); color:rgba(238,243,255,.92);}

/* CBS */
.cbsHeader{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:6px;}
@media (max-width:980px){.cbsHeader{flex-direction:column; align-items:flex-start;}}
.cbsHeaderActions{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;}
.cbsLayout{display:grid; grid-template-columns: 1.25fr .75fr; gap:14px; align-items:start;}
@media (max-width:1100px){.cbsLayout{grid-template-columns:1fr;}}
.cbsPanel{border:1px solid rgba(255,255,255,.10); border-radius:22px; background:rgba(255,255,255,.04); overflow:hidden;}
.cbsPanelTop{padding:14px; border-bottom:1px solid rgba(255,255,255,.08);}
.cbsField label{display:block; font-size:12px; font-weight:900; color:rgba(238,243,255,.70); margin:0 0 6px 2px;}
.cbsInput,.cbsSelect{width:100%; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12); color:rgba(238,243,255,.90); outline:none;}
.cbsInput:focus,.cbsSelect:focus{border-color:rgba(74,163,255,.55); box-shadow:0 0 0 3px rgba(74,163,255,.18);}
.cbsRow{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:10px;}
@media (max-width:520px){.cbsRow{grid-template-columns:1fr;}}
.cbsHint{margin-top:10px; color:rgba(238,243,255,.55); font-size:12px;}
.cbsResultsMeta{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px;}
.cbsStatus{color:rgba(238,243,255,.66); font-size:12.5px;}
.cbsPager{display:flex; align-items:center; gap:8px;}
.cbsPageLabel{color:rgba(238,243,255,.70); font-weight:900; font-size:12px; padding:6px 10px; border:1px solid rgba(255,255,255,.10); border-radius:999px; background:rgba(255,255,255,.03);}

.cbsGrid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; padding:14px;}
@media (max-width:1100px){.cbsGrid{grid-template-columns:repeat(5, minmax(0,1fr));}}
@media (max-width:900px){.cbsGrid{grid-template-columns:repeat(4, minmax(0,1fr));}}
@media (max-width:650px){.cbsGrid{grid-template-columns:repeat(2, minmax(0,1fr));}}

.cbsCard{border:1px solid rgba(255,255,255,.10); border-radius:18px; background:rgba(255,255,255,.03); overflow:hidden; cursor:grab;
  transition:transform .12s ease, border-color .12s ease, background .12s ease;}
.cbsCard:hover{transform:translateY(-2px); border-color:rgba(74,163,255,.45); background:rgba(255,255,255,.05);}
.cbsCard:active{cursor:grabbing;}
.cbsThumb{aspect-ratio: 2.5 / 3.5; background:rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center;}
.cbsThumb img{width:100%; height:100%; object-fit:cover; display:block;}
.cbsThumbPh{color:rgba(238,243,255,.55); font-size:12px; font-weight:900;}
.cbsMeta{padding:10px 10px 12px 10px;}
.cbsName{font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cbsSub{color:rgba(238,243,255,.62); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:4px;}

.cbsBinderTop{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.cbsBinderTitle{font-weight:900;}
.cbsBinderSub{color:rgba(238,243,255,.62); font-size:12px; margin-top:2px;}
.binderBoard{padding:14px;}
.binderGrid9{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px;}
.binderSlot{aspect-ratio: 2.5 / 3.5; border-radius:18px; border:1px dashed rgba(255,255,255,.18); background:rgba(0,0,0,.18);
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;}
.binderSlot.dragOver{border-color:rgba(74,163,255,.75); box-shadow:0 0 0 3px rgba(74,163,255,.18) inset;}
.slotEmpty{color:rgba(238,243,255,.55); font-weight:900; font-size:12px;}
.slotCard{width:100%; height:100%; cursor:pointer; position:relative;}
.slotCard img{width:100%; height:100%; object-fit:cover; display:block;}
.slotBadge{position:absolute; left:8px; right:8px; bottom:8px; padding:6px 8px; border-radius:12px;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.14); font-size:12px; font-weight:900;
  color:rgba(238,243,255,.92); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cbsFooterRow{padding:0 14px 14px 14px;}
.cbsSmall{color:rgba(238,243,255,.55); font-size:12px;}

/* CBS hover preview */
.cbsPreview{position:fixed; z-index:9999; pointer-events:none; opacity:0; transform:translateY(6px); transition:opacity .12s ease, transform .12s ease;}
.cbsPreview.show{opacity:1; transform:translateY(0);}
.cbsPreviewInner{width:220px; border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.55); box-shadow:0 24px 70px rgba(0,0,0,.55);}
.cbsPreviewTitle{padding:10px 12px; font-weight:900; font-size:12.5px; color:rgba(238,243,255,.92);
  border-bottom:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cbsPreviewInner img{display:block; width:100%; height:auto;}

.cbsSetBtn{cursor:pointer; text-align:left;}
.cbsSetBtn:after{content:'▾'; float:right; opacity:.7}

/* CBS price UI */
.cbsTopRow{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.cbsPrice{font-weight:1000; font-size:12px; color:rgba(238,243,255,.80); padding:4px 8px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.18); white-space:nowrap;}
.slotBadge{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.slotBadgePrice{font-weight:1000; font-size:12px; opacity:.95; white-space:nowrap;}


.siteHeader{position:sticky;top:0;z-index:50;background:rgba(9,13,20,.55);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.headerInner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px}
.brand{color:#eaf2ff;text-decoration:none;font-weight:900;letter-spacing:.2px}
.navLinks{display:flex;gap:16px;align-items:center}
.topLink{color:#cfe3ff;text-decoration:none;font-weight:700;opacity:.9}
.topLink:hover{opacity:1}

/* ==========================
   CBS (Custom Binder Selector)
   ========================== */
.cbsHero { padding: 28px 0 40px; }
.cbsHeroTop{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:18px; }
.cbsTopBtns{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.cbsLayout{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap:16px; align-items:start; }
.cbsPanel{ background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:18px; padding:16px; box-shadow: 0 12px 40px rgba(0,0,0,0.25); }
.cbsField{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.cbsLabel{ font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color: rgba(255,255,255,0.65); }
.cbsRow{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.cbsInput{ height:44px; border-radius:12px; padding:0 12px; background: rgba(10,16,28,0.55); border:1px solid rgba(255,255,255,0.10); color: #fff; outline:none; }
.cbsInput:focus{ border-color: rgba(79,166,255,0.7); box-shadow: 0 0 0 3px rgba(79,166,255,0.18); }
.cbsSelect{ height:44px; border-radius:12px; padding:0 10px; background: rgba(10,16,28,0.55); border:1px solid rgba(255,255,255,0.10); color:#fff; outline:none; }
.cbsSelectBtn{ height:44px; border-radius:12px; padding:0 12px; width:100%; text-align:left; background: rgba(10,16,28,0.55); border:1px solid rgba(255,255,255,0.10); color:#fff; cursor:pointer; }
.cbsSelectBtn:hover{ border-color: rgba(255,255,255,0.18); }
.cbsActions{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin: 6px 0 10px; }
.cbsHint{ font-size:12px; color: rgba(255,255,255,0.62); line-height:1.35; }
.cbsStatus{ font-size:12px; color: rgba(255,255,255,0.7); margin: 10px 0; }
.cbsResults{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; min-height: 160px; }
.cbsCard{ background: rgba(0,0,0,0.25); border:1px solid rgba(255,255,255,0.08); border-radius:14px; overflow:hidden; cursor:grab; user-select:none; }
.cbsCard:active{ cursor:grabbing; }
.cbsCardImg{ width:100%; aspect-ratio: 63/88; object-fit: cover; display:block; background: rgba(255,255,255,0.03); }
.cbsCardMeta{ padding:10px; display:flex; flex-direction:column; gap:6px; }
.cbsCardName{ font-weight:700; font-size:13px; line-height:1.2; }
.cbsCardSub{ font-size:12px; color: rgba(255,255,255,0.65); display:flex; justify-content:space-between; gap:10px; }
.cbsPager{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:12px; }
.cbsPageInfo{ font-size:12px; color: rgba(255,255,255,0.75); }

.cbsBinderHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:12px; }
.cbsBinderTitle{ font-weight:800; font-size:16px; }
.cbsBinderSub{ font-size:12px; color: rgba(255,255,255,0.65); }
.cbsBinderNav{ display:flex; align-items:center; gap:8px; }
.cbsIconBtn{ width:32px; height:32px; border-radius:10px; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10); color:#fff; cursor:pointer; }
.cbsIconBtn:hover{ border-color: rgba(255,255,255,0.18); }
.cbsBinderPage{ width:34px; text-align:center; font-weight:700; color: rgba(255,255,255,0.85); }

.cbsGrid{ display:grid; grid-template-columns: repeat(var(--cbs-cols, 3), 1fr); gap:12px; }
.cbsBinderGrid{ display:grid; grid-template-columns: repeat(var(--cbs-cols, 3), 1fr); gap:12px; }
.cbsSlot{ position:relative; border:1px dashed rgba(255,255,255,0.14); border-radius:16px; min-height: 150px; background: rgba(255,255,255,0.02); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.cbsSlotHint{ font-size:12px; color: rgba(255,255,255,0.55); }
.cbsSlotImg{ width:100%; height:100%; object-fit:cover; display:block; }
.cbsSlotHover{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.55)); opacity:0; transition:opacity .15s ease; }
.cbsSlot:hover .cbsSlotHover{ opacity:1; }
.cbsFooterNote{ margin-top:12px; font-size:11px; color: rgba(255,255,255,0.55); }

/* Modal */
.modalOverlay{ position:fixed; inset:0; background: rgba(0,0,0,0.55); display:none; align-items:center; justify-content:center; padding:18px; z-index:1000; }
.modalOverlay.open{ display:flex; }
.modalCard{ width:min(860px, 96vw); max-height: min(78vh, 720px); overflow:hidden; border-radius:18px; background: rgba(14,20,34,0.96); border:1px solid rgba(255,255,255,0.10); box-shadow: 0 30px 90px rgba(0,0,0,0.55); }
.modalHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,0.08); }
.modalTitle{ font-weight:800; }
.modalSub{ font-size:12px; color: rgba(255,255,255,0.62); margin-top:2px; }
.modalClose{ width:34px; height:34px; border-radius:12px; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10); color:#fff; cursor:pointer; }
.modalBody{ padding:14px 16px 18px; display:flex; flex-direction:column; gap:12px; }
.setList{ overflow:auto; max-height: 52vh; border:1px solid rgba(255,255,255,0.08); border-radius:14px; }
.setItem{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,0.06); cursor:pointer; }
.setItem:last-child{ border-bottom:none; }
.setItem:hover{ background: rgba(255,255,255,0.04); }
.setName{ font-weight:700; }
.setMeta{ font-size:12px; color: rgba(255,255,255,0.65); }

@media (max-width: 980px){
  .cbsLayout{ grid-template-columns: 1fr; }
  .cbsResults{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cbsHeroTop{ flex-direction:column; }
  .cbsTopBtns{ justify-content:flex-start; }
}


/* CBS binder layout */
.cbsLayoutWrap{display:flex;align-items:center;gap:8px}
.cbsLayoutLabel{font-size:12px;opacity:.8}
.cbsSelect{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#eaf2ff;border-radius:10px;padding:6px 10px}
.cbsSelect:focus{outline:none;border-color:rgba(130,180,255,.65)}
.cbsSlotPrice{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:4px 8px;font-size:12px}
.cbsSlotPrice.empty{opacity:.6}

.cbsPriceEdit{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:10px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.12);color:#fff;cursor:pointer;display:grid;place-items:center;z-index:3}
.cbsPriceEdit:hover{background:rgba(0,0,0,.65)}



/* "Load more" row in set picker */
.setLoadMore{
  opacity: 1;
  background: rgba(130,180,255,0.10);
  border-top: 1px solid rgba(130,180,255,0.22);
}
.setLoadMore:hover{ background: rgba(130,180,255,0.16); }

.setLoadMore:hover{ background: rgba(130,180,255,0.18); }
.setLoadMore .setName{ font-weight:800; }
.setLoadMore .setMeta{ color: rgba(255,255,255,0.78); }


.setRight{display:flex;align-items:center;gap:10px}
.setAliasBtn{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);color:#fff;border-radius:10px;padding:6px 10px;cursor:pointer;font-size:12px}
.setAliasBtn:hover{background:rgba(255,255,255,0.10)}


/* CBS external link on card tiles */
.cbsExtLink{margin-left:8px;font-size:12px;opacity:.8;text-decoration:none;}
.cbsExtLink:hover{opacity:1;text-decoration:underline;}