:root{
      --bg:#f4f4f4;
      --card:#ffffff;
      --text:#111;
      --muted:#666;
      --border:#e6e6e6;
      --shadow:0 2px 10px rgba(0,0,0,.08);
      --radius:12px;
      --btn:#111;
      --btnText:#fff;
      --chip:#f1f1f1;
      --danger:#a00;
    }
    *{box-sizing:border-box}
    body{margin:0;font-family:Arial, sans-serif;background:var(--bg);color:var(--text)}
    code{background:#f6f6f6;border:1px solid var(--border);padding:2px 6px;border-radius:8px}
    .wrap{max-width:1200px;margin:0 auto;padding:18px}
    .topbar{
      background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow);
      border-radius:var(--radius); padding:14px 16px; display:flex; align-items:center; gap:12px;
      position:sticky; top:10px; z-index:50;
    }
    .brand{font-weight:900}
    .spacer{flex:1}
    .pill{
      padding:8px 10px;border:1px solid var(--border); border-radius:999px;background:#fff;
      display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px;
    }
    .pill strong{color:#111}
    .btn{
      border:none; background:var(--btn); color:var(--btnText);
      padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:800;
    }
    .btn.ghost{background:#fff;color:#111;border:1px solid var(--border)}
    .btn.small{padding:8px 10px;border-radius:10px;font-weight:800}
    .btn.danger{background:#fff;border:1px solid var(--border);color:var(--danger)}
    .panel{
      margin-top:14px;background:var(--card);border:1px solid var(--border);
      border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;
    }
    .hidden{display:none !important}
    .mini{font-size:12px;color:var(--muted)}
    .bannerErr{
      margin-top:10px; padding:10px 12px; border:1px solid #ffd0d0; background:#fff5f5; color:#b00000;
      border-radius:12px; font-weight:900; font-size:13px;
    }

    /* TOOLBAR */
    .toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px}
    select,input{
      padding:10px 12px;border-radius:10px;border:1px solid var(--border);
      background:#fff; min-width:220px;
    }
    .seg{display:flex;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff}
    .seg button{border:none;background:#fff;padding:10px 12px;cursor:pointer;font-weight:900}
    .seg button.active{background:#111;color:#fff}

    /* SETS GRID */
    .grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px}
    @media (max-width: 1050px){ .grid{grid-template-columns:repeat(3,1fr)} }
    @media (max-width: 780px){ .grid{grid-template-columns:repeat(2,1fr)} }
    @media (max-width: 520px){ .grid{grid-template-columns:repeat(1,1fr)} }
    .setCard{
      border:1px solid var(--border); border-radius:14px; background:#fff; overflow:hidden;
      cursor:pointer; transition:transform .08s ease;
    }
    .setCard:hover{transform:translateY(-1px)}
    .setTop{
      height:86px; background:linear-gradient(135deg,#f7f7f7,#ffffff);
      display:flex; align-items:center; justify-content:space-between; padding:12px;
      border-bottom:1px solid var(--border);
    }
    .setLogo{height:48px; width:auto; max-width:70%; object-fit:contain}
    .setSymbol{height:34px; width:auto; object-fit:contain; opacity:.9}
    .setBody{padding:12px}
    .setName{font-weight:900; margin:0 0 4px 0; font-size:14px; line-height:1.2}
    .setMeta{display:flex; gap:8px; align-items:center; flex-wrap:wrap; color:var(--muted); font-size:12px}
    .chip{background:var(--chip); border:1px solid var(--border); padding:4px 8px; border-radius:999px; font-weight:900; color:#333}

    /* SETS LIST (TREE) */
    .tree{border:1px solid var(--border);border-radius:14px;overflow:hidden}
    .treeBloc{
      display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;
      background:#fff;border-bottom:1px solid var(--border);font-weight:900;
    }
    .caret{display:inline-block;width:12px}
    .treeBloc .meta{margin-left:auto;color:var(--muted);font-weight:900;font-size:12px}
    .treeSets{background:#fcfcfc;border-bottom:1px solid var(--border)}
    .treeSetRow{
      display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;
      border-top:1px solid var(--border);
    }
    .treeSetRow:hover{background:#f7f7f7}
    .treeSetRow img{height:22px;width:auto}
    .treeSetRow .name{font-weight:900}
    .treeSetRow .year{margin-left:auto;color:var(--muted);font-weight:900;font-size:12px}

    /* SET VIEW */
    .setHeader{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap}
    .setTitle{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
    .setTitle h2{margin:0; font-size:20px}
    .tabs{display:flex; gap:8px; margin-top:14px; border-bottom:1px solid var(--border); padding-bottom:10px}
    .tab{
      padding:8px 10px;border-radius:999px;border:1px solid var(--border);
      background:#fff; cursor:pointer; font-weight:900;
    }
    .tab.active{background:#111;color:#fff;border-color:#111}

    /* SEALED */
    .sealedGrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:12px}
    @media (max-width: 900px){ .sealedGrid{grid-template-columns:repeat(2,1fr)} }
    @media (max-width: 520px){ .sealedGrid{grid-template-columns:repeat(1,1fr)} }
    .sealedCard{
      border:1px solid var(--border); border-radius:14px; padding:12px; background:#fff;
      display:flex; flex-direction:column; gap:10px;
    }
    .sealedCard .type{font-weight:900; font-size:14px}
    .qtyRow{display:flex; gap:10px; align-items:center}
    .step{
      display:flex; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#fff;
    }
    .step button{border:none;background:#fff;padding:8px 10px;cursor:pointer;font-weight:900}
    .step input{width:60px; border:none; text-align:center; padding:8px 6px}

    /* TABLES */
    .previewTitle{margin:18px 0 8px 0; font-weight:900}
    table{width:100%;border-collapse:collapse;margin-top:8px}
    th,td{border:1px solid var(--border); padding:10px; text-align:left; font-size:13px}
    th{background:#fafafa}
    .groupRow td{background:#111;color:#fff;font-weight:900}

    /* MODAL */
    .modalOverlay{
      position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1000;
      display:flex; align-items:center; justify-content:center; padding:18px;
    }
    .modal{
      width:min(1180px, 100%); height:min(78vh, 760px);
      background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.25);
      display:flex; flex-direction:column;
    }
    .modalHeader{
      padding:12px 14px; border-bottom:1px solid var(--border);
      display:flex; gap:10px; align-items:center; flex-wrap:wrap;
    }
    .modalHeader h3{margin:0; font-size:16px}
    .modalHeader .grow{flex:1}
    .modalBody{display:grid; grid-template-columns: 1fr 360px; height:100%}
    @media (max-width: 980px){ .modalBody{grid-template-columns:1fr} .sidebar{border-left:none;border-top:1px solid var(--border)} }
    .cardsPane{padding:12px; overflow:auto}
    .sidebar{padding:12px; overflow:auto; border-left:1px solid var(--border); background:#fcfcfc}
    .cardsGrid{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px}
    @media (max-width: 1050px){ .cardsGrid{grid-template-columns:repeat(4,1fr)} }
    @media (max-width: 820px){ .cardsGrid{grid-template-columns:repeat(3,1fr)} }
    @media (max-width: 520px){ .cardsGrid{grid-template-columns:repeat(2,1fr)} }
    .cardTile{
      border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#fff;
      cursor:pointer; display:flex; flex-direction:column;
    }
    .cardImgWrap{height:120px; display:flex; align-items:center; justify-content:center; background:#f7f7f7}
    .cardImg{max-height:120px; width:auto; object-fit:contain}
    .cardInfo{padding:8px}
    .cardInfo .name{font-weight:900; font-size:12px; line-height:1.15; margin:0 0 4px 0}
    .cardInfo .num{font-size:11px; color:var(--muted)}
    .sideTitle{font-weight:900; margin:0 0 10px 0}
    .line{
      border:1px solid var(--border); border-radius:12px; background:#fff;
      padding:10px; display:flex; gap:10px; align-items:flex-start; margin-bottom:10px;
    }
    .line img{height:54px;width:auto;object-fit:contain;background:#f7f7f7;border-radius:10px;border:1px solid var(--border)}
    .line .meta{flex:1}
    .line .meta .t{font-weight:900; font-size:12px; margin:0 0 4px 0}
    .line .meta .s{font-size:11px; color:var(--muted); margin:0 0 8px 0}
    .line select{min-width:0;width:100%; padding:8px 10px}
    .line .row{display:flex; gap:8px; align-items:center}
    .modalFooter{
      border-top:1px solid var(--border);
      padding:12px 14px; display:flex; gap:10px; justify-content:flex-end; align-items:center;
    }

.treeLogo{height:22px;width:auto;object-fit:contain}

.blocTitle{
  grid-column: 1 / -1;
  font-weight: 900;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: #fafafa;
  border-radius: 14px;
}

.blocRow{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}

@media (max-width: 1050px){ .blocRow{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 780px){ .blocRow{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 520px){ .blocRow{grid-template-columns:repeat(1,1fr)} }

.blocTitle{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
}

.blocTitle .pm{
  width:26px;
  height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  font-weight:900;
}

.blocTitle .blocName{font-weight:900}
.blocTitle .blocMeta{margin-left:auto;color:var(--muted);font-weight:900;font-size:12px}

/* MC PATCH: blocTitle pm right (BEGIN) */
.blocTitle{display:flex;align-items:center;gap:10px;cursor:pointer}
.blocTitle .blocName{font-weight:900}
.blocTitle .blocMeta{margin-left:0;color:var(--muted);font-weight:900;font-size:12px}
.blocTitle .pm{margin-left:auto}
/* MC PATCH: blocTitle pm right (END) */

/* MC PATCH: multi bloc filter (BEGIN) */
.multi{position:relative;display:inline-flex;min-width:220px}
.multiBtn{
  padding:10px 12px;border-radius:10px;border:1px solid var(--border);
  background:#fff; cursor:pointer; font-weight:900; min-width:220px; text-align:left;
}
.multiMenu{
  position:absolute; top:calc(100% + 8px); left:0; z-index:200;
  background:#fff; border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow); padding:10px; min-width:320px; max-height:320px; overflow:auto;
}
.multiRow{display:flex;align-items:center;gap:10px;padding:8px 8px;border-radius:10px;cursor:pointer}
.multiRow:hover{background:#f7f7f7}
.multiRow input{width:auto;min-width:0}
.multiTop{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:10px}
.multiTop .miniBtn{border:1px solid var(--border);background:#fff;border-radius:10px;padding:8px 10px;cursor:pointer;font-weight:900}
.multiSep{height:1px;background:var(--border);margin:8px 0}
/* MC PATCH: multi bloc filter (END) */

/* MC PATCH (BEGIN) */
.mcBody{margin-top:10px}
.mcSet{border:1px solid var(--border);border-radius:14px;background:#fff;padding:12px;margin:12px 0}
.mcSetHead{display:flex;gap:10px;align-items:center}
.mcSetImg{height:34px;width:auto;object-fit:contain}
.mcSetImg.ph{height:34px;width:34px;border:1px solid var(--border);border-radius:10px;background:#f7f7f7}
.mcSetInfo{display:flex;flex-direction:column;gap:2px}
.mcSetName{font-weight:900}
.mcCols{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
@media (max-width: 980px){.mcCols{grid-template-columns:1fr}}
.mcTable{width:100%;border-collapse:collapse;margin-top:0}
.mcTable th,.mcTable td{border:1px solid var(--border);padding:10px;text-align:left;font-size:13px}
.mcTable th{background:#fafafa}
/* MC PATCH (END) */



/* MY_COLLECTION */
.mcBody{ padding:10px 0 16px 0; }
.mcSet{ border:1px solid var(--border); border-radius:14px; background:#fff; margin:10px 0; overflow:hidden; }
.mcSetHead{ display:flex; align-items:center; gap:12px; padding:12px; border-bottom:1px solid var(--border); }
.mcSetImg{ height:34px; width:auto; object-fit:contain; }
.mcSetImg.ph{ width:34px; background:#f6f6f6; border:1px solid var(--border); border-radius:10px; }
.mcSetInfo{ display:flex; flex-direction:column; gap:2px; }
.mcSetName{ font-weight:900; }
.mcCols{ display:grid; grid-template-columns: 1fr 240px; gap:12px; padding:12px; }
@media (max-width: 900px){ .mcCols{ grid-template-columns:1fr; } }
.mcTable{ width:100%; border-collapse:collapse; }
.mcTable th, .mcTable td{ border:1px solid var(--border); padding:8px; font-size:12px; }
.mcTable th{ background:#fafafa; }