:root{--jp-collection-columns:3}

.jp-force-hidden{display:none!important}
body.jp-collection-detail-open #jpCollectionsOverview{display:none!important}
.jp-collection-mobile-header{display:none}
.jp-all-collections-mode #openAddCard,
.jp-all-collections-mode #collectionImportButton,
.jp-all-collections-mode #collectionSelectButton,
.jp-all-collections-mode #collectionBulkBar{display:none!important}

@media(max-width:680px){
  body.jp-collection-detail-open .topbar{display:none!important}
  body.jp-collection-detail-open #jpCollectionsOverview{display:none!important}
  body.jp-collection-detail-open #collectionWorkspace{display:block!important}

  .jp-collections-overview{gap:10px}
  .jp-collections-overview .jp-page-head{gap:10px;padding:2px 0}
  .jp-collections-overview .jp-page-head h1{font-size:1.55rem;line-height:1.08;margin:2px 0}
  .jp-collections-overview .jp-page-head p{font-size:.8rem;line-height:1.35}
  .jp-collections-overview .jp-page-head .btn{min-height:42px;padding:9px 12px}

  .jp-collection-value-summary{
    grid-template-columns:88px minmax(0,1fr)!important;
    gap:12px!important;
    align-items:center!important;
    padding:12px!important;
    border-radius:16px!important
  }
  .jp-value-ring{width:88px!important;padding:7px!important;margin:0!important}
  .jp-value-ring strong{font-size:1.08rem!important;margin:2px 0!important}
  .jp-value-ring span,.jp-value-ring small{font-size:.62rem!important}
  .jp-value-copy{text-align:left!important;min-width:0}
  .jp-value-copy .jp-home-kicker{font-size:.58rem}
  .jp-value-copy h2{font-size:1.02rem!important;line-height:1.15;margin:2px 0 4px!important}
  .jp-value-copy p{font-size:.67rem!important;line-height:1.35!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

  .jp-collection-cards{grid-template-columns:1fr!important;gap:8px!important}
  .jp-collection-card{
    grid-template-columns:42px minmax(0,1fr) auto!important;
    gap:10px!important;
    padding:10px 11px!important;
    min-height:68px;
    border-radius:14px!important;
    box-shadow:0 6px 18px rgba(0,0,0,.14)!important
  }
  .jp-collection-icon{width:42px!important;height:42px!important;border-radius:12px!important;font-size:1rem!important}
  .jp-collection-card strong{font-size:.92rem!important}
  .jp-collection-card div>span{margin-top:2px!important;font-size:.69rem!important}
  .jp-collection-card .jp-collection-value-meta{font-size:.68rem!important}
  .jp-card-arrow{font-size:1.45rem!important}

  #collectionWorkspace.panel{
    padding:0 10px 10px!important;
    border-radius:0!important;
    border-left:0!important;
    border-right:0!important;
    background:#09111b!important;
    box-shadow:none!important;
    overflow:visible!important
  }

  #collectionWorkspace>.workspace-head{display:none!important}
  #collectionWorkspace .collection-toolbar{display:none!important}
  #collectionWorkspace #ownedSearchHint{display:none!important}
  #jpCollectionDensity{display:none!important}

  .jp-collection-mobile-header{
    position:sticky;
    z-index:500;
    top:0;
    display:grid;
    gap:8px;
    margin:0 -10px 8px;
    padding:8px 10px 9px;
    border-bottom:1px solid rgba(139,220,255,.12);
    background:rgba(7,13,22,.96);
    box-shadow:0 8px 20px rgba(0,0,0,.2);
    backdrop-filter:blur(18px)
  }

  .jp-mobile-collection-titlebar{
    display:grid;
    grid-template-columns:38px minmax(0,1fr) 38px;
    align-items:center;
    gap:8px
  }
  .jp-mobile-collection-back,
  .jp-mobile-collection-menu-button{
    appearance:none;
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    padding:0;
    border:1px solid var(--line-soft);
    border-radius:11px;
    background:#0d1827;
    color:var(--text);
    font:inherit;
    font-weight:850;
    cursor:pointer
  }
  .jp-mobile-collection-back{font-size:1.65rem;line-height:1}
  .jp-mobile-collection-menu-button{font-size:1rem;letter-spacing:.05em}
  .jp-mobile-collection-title{min-width:0;display:grid;gap:1px}
  .jp-mobile-collection-title strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:1rem;
    line-height:1.15
  }
  .jp-mobile-collection-title span{font-size:.66rem;color:var(--muted)}

  .jp-mobile-collection-search{
    display:grid;
    grid-template-columns:24px minmax(0,1fr) 30px;
    align-items:center;
    min-height:42px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#07101a;
    overflow:hidden
  }
  .jp-mobile-collection-search>span{
    display:grid;
    place-items:center;
    color:#8aa1b9;
    font-size:1.05rem;
    pointer-events:none
  }
  .jp-mobile-collection-search input{
    width:100%;
    min-width:0;
    height:40px;
    padding:0 4px;
    border:0!important;
    outline:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:var(--text);
    font-size:.82rem
  }
  .jp-mobile-collection-search input::-webkit-search-cancel-button{display:none}
  .jp-mobile-search-clear{
    appearance:none;
    width:30px;
    height:40px;
    border:0;
    background:transparent;
    color:#8ba0b7;
    font-size:1rem
  }

  .jp-mobile-collection-menu{
    position:absolute;
    top:54px;
    right:10px;
    width:min(290px,calc(100vw - 28px));
    padding:9px;
    border:1px solid rgba(139,220,255,.18);
    border-radius:15px;
    background:rgba(10,18,30,.99);
    box-shadow:0 18px 44px rgba(0,0,0,.48)
  }
  .jp-mobile-collection-menu[hidden]{display:none!important}
  .jp-mobile-menu-actions{display:grid;gap:6px}
  .jp-mobile-menu-actions button{
    appearance:none;
    min-height:39px;
    padding:8px 10px;
    border:1px solid var(--line-soft);
    border-radius:10px;
    background:#101b2a;
    color:var(--text);
    text-align:left;
    font-weight:760
  }
  .jp-mobile-menu-actions button:first-child{
    background:linear-gradient(135deg,#48c7fa,#347df4);
    border-color:transparent;
    color:#04111a
  }
  .jp-mobile-menu-actions button:disabled{opacity:.42}
  .jp-mobile-menu-section{
    display:grid;
    gap:7px;
    margin-top:8px;
    padding-top:8px;
    border-top:1px solid var(--line-soft)
  }
  .jp-mobile-menu-section>label,
  .jp-mobile-menu-labelrow span{font-size:.68rem;color:var(--muted)}
  .jp-mobile-menu-section select{
    width:100%;
    min-height:38px;
    padding:7px 9px;
    border-radius:9px;
    font-size:.78rem
  }
  .jp-mobile-menu-labelrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .jp-mobile-menu-labelrow strong{font-size:.7rem}
  .jp-mobile-menu-section input[type="range"]{width:100%;accent-color:var(--accent)}
  .jp-mobile-filter-all{
    appearance:none;
    padding:3px 7px;
    border:1px solid var(--line-soft);
    border-radius:8px;
    background:#0d1827;
    color:#b8c9da;
    font-size:.65rem;
    font-weight:800
  }
  .jp-mobile-type-filters{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:5px
  }
  .jp-mobile-type-filter{
    position:relative;
    display:block;
    min-width:0
  }
  .jp-mobile-type-filter input{
    position:absolute;
    opacity:0;
    pointer-events:none
  }
  .jp-mobile-type-filter span{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    padding:7px 8px;
    border:1px solid var(--line-soft);
    border-radius:9px;
    background:#0c1624;
    color:#91a6bd;
    font-size:.68rem;
    font-weight:720;
    text-align:center
  }
  .jp-mobile-type-filter input:checked+span{
    border-color:rgba(56,189,248,.42);
    background:rgba(56,189,248,.12);
    color:#dff7ff
  }

  #cardGrid.collection-grid{
    grid-template-columns:repeat(var(--jp-collection-columns),minmax(0,1fr))!important;
    gap:6px!important;
    margin-top:4px!important;
    padding-bottom:78px
  }
  #cardGrid .owned-card{
    position:relative;
    min-width:0;
    border-radius:9px!important;
    overflow:hidden!important;
    background:#0b131f!important
  }
  #cardGrid .owned-card-image{
    position:relative;
    aspect-ratio:5/7!important;
    overflow:hidden!important;
    background:#080d14
  }
  #cardGrid .owned-card-image img{width:100%;height:100%;object-fit:cover}
  #cardGrid .qty-badge{
    left:4px!important;right:auto!important;top:4px!important;
    min-width:0!important;padding:2px 5px!important;
    border-radius:6px!important;
    font-size:.62rem!important;
    line-height:1.15!important;
    background:rgba(4,8,13,.86)!important
  }
  #cardGrid .jp-card-price{
    position:absolute!important;
    z-index:4;
    right:4px!important;
    bottom:4px!important;
    left:auto!important;
    top:auto!important;
    display:inline-flex!important;
    width:auto!important;
    max-width:calc(100% - 8px)!important;
    margin:0!important;
    padding:3px 5px!important;
    border-radius:7px!important;
    border:1px solid rgba(56,189,248,.28)!important;
    background:rgba(4,10,17,.88)!important;
    color:#8bddff!important;
    font-size:.61rem!important;
    font-weight:850!important;
    line-height:1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    box-shadow:0 2px 8px rgba(0,0,0,.34)
  }
  #cardGrid .jp-card-price.is-unavailable,
  #cardGrid .jp-card-price.is-loading{color:#a4b2c2!important;border-color:rgba(148,163,184,.24)!important}
  #cardGrid .deck-allocation-badge{
    left:4px!important;bottom:4px!important;
    min-width:22px!important;height:18px!important;
    padding:0 4px!important;border-radius:6px!important;
    font-size:.57rem!important
  }
  #cardGrid .owned-card-body{
    display:block!important;
    min-height:24px;
    padding:5px 5px 6px!important
  }
  #cardGrid .owned-card-body strong,
  #cardGrid .owned-card-possession{display:none!important}
  #cardGrid .owned-card-printing{
    display:block!important;
    margin:0!important;
    color:#8ea2b8!important;
    font-size:.6rem!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important
  }
  #cardGrid .jp-card-select-mark{width:22px;height:22px;top:4px;right:4px;font-size:.72rem}
}

@media(max-width:390px){
  .jp-mobile-collection-menu{right:8px;width:calc(100vw - 24px)}
}