:root {
    color-scheme: dark;
    --bg: #0b1018;
    --panel: #121b27;
    --panel2: #182434;
    --line: #29394d;
    --muted: #8fa2b8;
    --text: #edf5ff;
    --cyan: #62d9ef;
    --gold: #f4c96b;
    --green: #6fe0a2;
    --red: #ff8290
}

* {
    box-sizing: border-box
}

* {
  cursor: url(https://i.imgur.com/jsogoUk.png), auto !important;
}

body {
    margin: 0;
    background: linear-gradient(rgba(11,16,24,.62),rgba(11,16,24,.62)),url('https://files.catbox.moe/2qqh17.png') center top/cover no-repeat fixed,var(--bg);
    min-height: 100vh;
    color: var(--text);
    font: 14px/1.45 Inter,system-ui,Segoe UI,sans-serif
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 26px max(18px,calc((100vw - 1400px)/2));
    border-bottom: 1px solid var(--line);
    background: #0b1018d9;
    position: sticky;
    top: 0;
    z-index: 5;
    backdrop-filter: blur(14px)
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px
}

.logo {
    width: 46px;
    height: 46px;
    flex: none;
    display: grid;
    place-items: center;
    filter: drop-shadow(0 6px 14px #dc0a2d55)
}

.logo img {
    width: 100%;
    height: 100%;
    display: block
}

h1 {
    font-size: 21px;
    margin: 0;
    letter-spacing: .3px
}

.sub {
    color: var(--muted);
    font-size: 12px
}

.wrap {
    max-width: 1400px;
    margin: auto;
    padding: 22px 18px 60px
}

.stats {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px;
    margin-bottom: 16px
}

.stat,.panel {
    background: linear-gradient(145deg,#162333,#101925);
    border: 1px solid var(--line);
    border-radius: 16px
}

.stat {
    padding: 15px 17px
}

.stat small {
    color: var(--muted);
    display: block
}

.stat strong {
    font-size: 25px;
    display: block;
    margin-top: 4px
}

.progress {
    height: 7px;
    background: #263648;
    border-radius: 20px;
    overflow: hidden;
    margin-top: 9px
}

.progress i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg,#51c8e7,#6fe0a2);
    width: 0
}

.toolbar {
    padding: 14px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 14px
}

.toolbar input,.toolbar select,.toolbar button,.modal button,.modal input {
    background: #0d1621;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    font: inherit
}

.toolbar input {
    flex: 1;
    min-width: 210px
}

.toolbar select {
    min-width: 130px
}

.toolbar button,.modal button {
    cursor: pointer
}

.primary {
    background: #164c63!important;
    border-color: #287c98!important
}

.toolbar button:hover,.modal button:hover {
    border-color: var(--cyan)
}

.tabs {
    display: flex;
    gap: 7px;
    overflow: auto;
    padding-bottom: 2px;
    margin: 0 0 14px
}

.tab {
    white-space: nowrap;
    border: 1px solid var(--line);
    background: #111b27;
    color: var(--muted);
    padding: 9px 13px;
    border-radius: 10px;
    cursor: pointer
}

.tab.active {
    background: #15394b;
    color: #b9f4ff;
    border-color: #287c98
}

.sectionhead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 18px 2px 10px;
    color: #c8d8e8
}

.sectionhead span {
    color: var(--muted);
    font-size: 12px
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
    gap: 11px
}

.card {
    background: linear-gradient(150deg,#172434,#101925);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 10px;
    min-width: 0;
    position: relative
}

.card:hover {
    border-color: #4b8099;
    transform: translateY(-2px)
}

.card.caught {
    border-color: #3a866b;
    background: linear-gradient(150deg,#18352f,#111e25)
}

.cardtop {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 11px
}

.sprite {
    height: 104px;
    display: grid;
    place-items: center
}

.sprite img {
    width: 112px;
    height: 104px;
    object-fit: contain;
    image-rendering: auto;
    filter: drop-shadow(0 7px 8px #0006)
}

.pname {
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.types {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin: 5px 0 8px
}

.type {
    font-size: 9px;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 20px;
    background: #27384a;
    color: #d7e7f5
}

.quick {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap
}

.pill {
    border: 1px solid #33485d;
    border-radius: 8px;
    padding: 4px 7px;
    color: #a9bed1;
    font-size: 10px;
    cursor: pointer;
    background: #101a25
}

.pill.on {
    color: #9ff0c1;
    border-color: #398565;
    background: #17352d
}

.details {
    display: none;
    border-top: 1px solid var(--line);
    margin-top: 10px;
    padding-top: 9px
}

.card.expanded .details {
    display: block
}

.checkgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px
}

.check {
    display: flex;
    gap: 6px;
    align-items: center;
    color: #bdcbd9;
    font-size: 11px
}

.check input {
    accent-color: #5bd39a
}

.detailbtn {
    width: 100%;
    margin-top: 8px;
    background: #1b2a3a;
    color: #bcd4e6;
    border: 1px solid #344b60;
    border-radius: 8px;
    padding: 7px;
    cursor: pointer
}

.gencol {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px
}

.own {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    color: #bdcbd9;
    font-size: 11px;
    user-select: none
}

.own input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #5bd39a;
    cursor: pointer
}

.card.caught .own {
    color: #9ff0c1
}

.customs {
    border-top: 1px solid var(--line);
    margin-top: 10px;
    padding-top: 9px
}

.empty {
    padding: 40px;
    text-align: center;
    color: var(--muted);
    border: 1px dashed var(--line);
    border-radius: 14px
}

.modalback {
    position: fixed;
    inset: 0;
    background: #000a;
    display: none;
    place-items: center;
    z-index: 10;
    padding: 18px
}

.modalback.show {
    display: grid
}

.modal {
    width: min(480px,100%);
    background: #142131;
    border: 1px solid #3a536b;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 20px 80px #0009
}

.modal h2 {
    margin: 0 0 6px
}

.modal p {
    color: var(--muted);
    font-size: 12px
}

.modal input {
    width: 100%;
    margin: 7px 0 12px
}

.modalactions {
    display: flex;
    justify-content: flex-end;
    gap: 8px
}

footer {
    color: #70869b;
    text-align: center;
    font-size: 11px;
    margin-top: 30px
}

@media(max-width: 1000px) {
    .stats {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

@media(max-width: 650px) {
    header {
        padding:17px
    }

    .stats {
        grid-template-columns: repeat(2,1fr)
    }

    .grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .toolbar select {
        flex: 1
    }

    .stat strong {
        font-size: 21px
    }
}

.sprite.withbg {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10px
}

.sprite img {
    transition: none
}

.formtag {
    text-align: center;
    color: #b9f4ff;
    font-size: 11px;
    font-weight: 600;
    margin-top: -2px
}

.statsub {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 11px
}

.shinytabs {
    margin-top: -6px
}

.shinytabs .tab {
    background: #17160f;
    border-color: #3b3720;
    color: #c9b877
}

.shinytabs .tab.active {
    background: #3a3115;
    color: #ffe08a;
    border-color: #8a7430
}

.headright {
    display: flex;
    align-items: center;
    gap: 12px
}

.checkall {
    background: #15394b;
    color: #b9f4ff;
    border: 1px solid #287c98;
    border-radius: 8px;
    padding: 5px 11px;
    font: inherit;
    font-size: 12px;
    cursor: pointer
}

.checkall:hover {
    border-color: var(--cyan)
}

.checkall[hidden] {
    display: none
}

.gencount {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #b9f4ff!important;
    font-size: 12px;
    font-weight: 600
}

.gencount[hidden] {
    display: none
}

.genbar {
    display: block;
    width: 90px;
    height: 6px;
    background: #263648;
    border-radius: 20px;
    overflow: hidden
}

.genbar i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg,#51c8e7,#6fe0a2)
}

.card.unreleased {
    border-style: dashed;
    border-color: #4a4f5a;
    background: linear-gradient(150deg,#1a1f28,#10151d)
}

.card.unreleased:hover {
    transform: none;
    border-color: #4a4f5a
}

.card.unreleased .sprite,.card.unreleased .pname,.card.unreleased .types {
    opacity: .4
}

.card.unreleased .sprite img {
    filter: grayscale(1) brightness(.7)
}

.unrel {
    color: #C62828;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .3px
}

.lock {
    position: absolute;
    left: 50%;
    top: 84px;
    transform: translateX(-50%);
    font-size: 34px;
    line-height: 1;
    z-index: 2;
    pointer-events: none;
    filter: brightness(0) invert(1) drop-shadow(0 3px 6px #000b)
}

.sprite.bgfill {
    background-size: cover
}

.card.bgonly .sprite {
    background-color: #0d1621;
    height: 130px
}

.card.bgonly .sprite.bgfill {
    background-size: contain
}

.card.bgonly .formtag {
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.formtag.bgname {
    color: var(--muted);
    font-weight: 500;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.sentinel {
    grid-column: 1/-1;
    height: 1px
}

.card {
    contain: layout style;
    content-visibility: auto;
    contain-intrinsic-size: auto 220px
}

/* Background art fills the whole box: the <img> is taller than the box and top-anchored, so any dark strip baked into the bottom of the image is cropped away. It is a real <img> (not a CSS background) so it can send no Referer, which the wiki host requires. */
.sprite.withbg {
    position: relative;
    overflow: hidden
}

.sprite.withbg>.bgimg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 122%;
    object-fit: cover;
    object-position: center top;
    filter: none;
    z-index: 0
}

.sprite.withbg>img:not(.bgimg) {
    position: relative;
    z-index: 1
}

.own input {
    transition: none;
    animation: none
}

.bgcard .own {
    font-size: 10px;
    gap: 4px
}

.bgcard .own input {
    width: 12px;
    height: 12px
}

/* ===== Trading tab ===== */
.viewbar {
    display: flex;
    gap: 8px;
    margin: 0 0 16px
}

.viewbtn {
    background: #111b27;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 20px;
    font: inherit;
    font-weight: 600;
    cursor: pointer
}

.viewbtn:hover {
    border-color: var(--cyan)
}

.viewbtn.active {
    background: #15394b;
    color: #b9f4ff;
    border-color: #287c98
}

.tradeonly {
    display: none
}

body[data-view=trade] .tradeonly {
    display: block
}

body[data-view=trade] .dexonly {
    display: none!important
}

.muted {
    color: var(--muted);
    font-size: 12px
}

.tradebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 16px;
    margin-bottom: 14px
}

.tradebtns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.tradebtns button,.sharedhead button,.tadd select,.tadd input {
    background: #0d1621;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 9px 12px;
    font: inherit
}

.tradebtns button,.sharedhead button,.tadd button {
    cursor: pointer
}

.tradebtns button:hover,.sharedhead button:hover,.tadd button:hover {
    border-color: var(--cyan)
}

.tadd button.primary {
    background: #164c63;
    border-color: #287c98;
    color: var(--text);
    border-radius: 10px;
    padding: 9px 16px;
    font: inherit
}

.tradecols {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
    align-items: start
}

.tcol {
    padding: 16px
}

.tcol h2,.sharedpanel h3 {
    margin: 0 0 12px;
    font-size: 17px;
    display: flex;
    align-items: center;
    gap: 8px
}

.sharedpanel h3 {
    font-size: 14px;
    color: #c8d8e8
}

.count {
    background: #15394b;
    color: #b9f4ff;
    border-radius: 20px;
    font-size: 12px;
    padding: 1px 9px;
    font-weight: 600
}

.count:empty {
    display: none
}

.tadd {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px
}

.tadd .tpoke {
    flex: 2 1 120px;
    min-width: 0
}

.tadd .tnote {
    flex: 3 1 90px;
    min-width: 0
}

.tadd select {
    flex: 1 1 110px;
    min-width: 0
}

.tadd .tqty,.titem .tqty {
    display: flex;
    align-items: center;
    gap: 3px;
    color: var(--muted)
}

.tadd .tqty input {
    width: 62px;
    padding: 9px 6px
}

.tlist {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(136px,1fr));
    gap: 12px;
    align-items: start
}

.tlist .empty {
    grid-column: 1/-1
}

.titem {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(150deg,#172434,#101925);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 6px 10px 6px 6px;
    min-width: 0
}

.titem.match {
    border-color: #3a866b;
    background: linear-gradient(150deg,#18352f,#111e25)
}

.titem.flash {
    animation: tflash 1s ease-out
}

@keyframes tflash {
    from {
        border-color: var(--cyan);
        box-shadow: 0 0 0 3px #62d9ef44
    }

    to {
        box-shadow: 0 0 0 0 #0000
    }
}

.tsp {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex: none;
    filter: drop-shadow(0 4px 5px #0006)
}

.tinfo {
    min-width: 0;
    flex: 1 1 auto
}

.tname {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.tname small {
    color: var(--muted);
    font-weight: 500
}

.ttags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 3px
}

.vtag {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 2px 7px;
    border-radius: 20px;
    background: #27384a;
    color: #d7e7f5
}

.v-shiny {
    background: #3a3115;
    color: #ffe08a
}

.v-shadow {
    background: #2c2240;
    color: #c9b3ff
}

.v-purified {
    background: #17323a;
    color: #9fe8f5
}

.v-lucky {
    background: #3b3515;
    color: #ffd84d
}

.v-mega,.v-gigantamax {
    background: #3b1f2b;
    color: #ffadc8
}

.v-match {
    background: #17352d;
    color: #9ff0c1
}

.v-any {
    background: #1d2b3a;
    color: #a9bed1
}

.tnoteedit {
    flex: 0 1 190px;
    min-width: 0;
    background: #0d1621;
    color: var(--text);
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 6px 8px;
    font: inherit;
    font-size: 12px
}

.tnoteedit:hover,.tnoteedit:focus {
    border-color: var(--line);
    outline: none
}

.tnote {
    color: var(--muted);
    font-size: 12px;
    max-width: 40%;
    text-align: right
}

.tqtyedit {
    width: 52px;
    background: #0d1621;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 5px 4px;
    font: inherit;
    font-size: 12px
}

.tdel {
    background: none;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    font-size: 15px;
    padding: 6px 8px;
    border-radius: 8px
}

.tdel:hover {
    color: var(--red);
    background: #2a1a20
}

.empty.small {
    padding: 22px;
    font-size: 13px
}

.sharedpanel {
    padding: 16px;
    margin-bottom: 14px;
    border-color: #287c98
}

.sharedhead {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px
}

.sharedpanel .tradecols>div {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.sharedpanel h3 {
    margin-bottom: 4px
}

@media(max-width: 900px) {
    .tradecols {
        grid-template-columns:1fr
    }
}

@media(max-width: 650px) {
    .titem {
        flex-wrap:wrap
    }

    .tnoteedit {
        flex: 1 1 100%;
        order: 5
    }

    .tnote {
        max-width: none;
        text-align: left;
        flex: 1 1 100%
    }
}

/* ===== Image picker ===== */
.pickbtn {
    margin-left: auto;
    background: #15394b;
    color: #b9f4ff;
    border: 1px solid #287c98;
    border-radius: 10px;
    padding: 7px 13px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer
}

.pickbtn:hover {
    border-color: var(--cyan)
}

.pick {
    width: min(760px,100%);
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    background: #101822;
    border: 1px solid #2c4156;
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 20px 80px #000b
}

.pickhead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px
}

.pickhead h2 {
    margin: 0;
    font-size: 17px
}

.pickhead button {
    background: none;
    border: 0;
    color: var(--muted);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px
}

.pickhead button:hover {
    color: var(--text);
    background: #ffffff14
}

.pickrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 14px
}

#pickSearch {
    width: 100%;
    background: #0a0f16;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 11px 14px;
    font: inherit;
    margin-bottom: 10px
}

#pickSearch:focus {
    outline: none;
    border-color: #287c98
}

.chips {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 10px
}

.chip {
    background: #1b2431;
    color: #b8c6d6;
    border: 1px solid transparent;
    border-radius: 20px;
    padding: 7px 14px;
    font: inherit;
    font-size: 13px;
    cursor: pointer
}

.chip:hover {
    border-color: #3a536b
}

.chip.on {
    background: #15394b;
    color: #b9f4ff;
    border-color: #287c98
}

.pickgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(80px,1fr));
    gap: 6px;
    overflow-y: auto;
    background: #0a0f16;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 8px;
    height: min(58vh,560px);
    align-content: start;
    grid-auto-rows: min-content;
    overscroll-behavior: contain
}

.ptile {
    position: relative;
    display: block;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 14px;
    background: transparent;
    cursor: pointer;
    min-width: 0
}

.ptile:focus-visible {
    outline: 2px solid var(--cyan)
}

.ptile::before {
    content: '';
    display: block;
    padding-top: 100%
}

.ptile:hover {
    background: #ffffff12
}

.ptile.sel {
    border-color: #6fe0a2;
    background: #6fe0a21f
}

.ptile .pbg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px
}

.ptile .pfg {
    position: absolute;
    left: 6%;
    top: 6%;
    width: 88%;
    height: 88%;
    object-fit: contain;
    filter: drop-shadow(0 3px 4px #0008)
}

.psh {
    position: absolute;
    top: 3px;
    right: 4px;
    font-size: 11px;
    line-height: 1;
    text-shadow: 0 1px 3px #000
}

.pcheck {
    position: absolute;
    left: 4px;
    top: 4px;
    background: #2fa56f;
    color: #04150d;
    font-style: normal;
    font-weight: 700;
    font-size: 11px;
    min-width: 20px;
    height: 20px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    padding: 0 5px
}

.pickfoot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    color: var(--muted);
    font-size: 12px
}

.pickfoot button {
    background: none;
    border: 0;
    color: var(--red);
    cursor: pointer;
    font: inherit;
    font-size: 13px
}

.tthumb {
    position: relative;
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: 10px;
    overflow: hidden
}

.tthumb .tsp {
    position: absolute;
    left: 6%;
    top: 6%;
    width: 88%;
    height: 88%
}

.tthumb .tbg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.v-background {
    background: #1c2f4a;
    color: #a9d0ff
}

.v-costume {
    background: #2d2a45;
    color: #d2c8ff
}

@media(max-width: 650px) {
    .pickgrid {
        grid-template-columns:repeat(4,minmax(0,1fr));
        height: 58vh
    }
}

/* ===== Trade lists as picture tiles ===== */
.tcard {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0
}

.tcard.match .timg {
    border-color: #3a866b;
    box-shadow: 0 0 0 2px #3a866b66
}

.tcard.flash .timg {
    animation: tflash 1s ease-out
}

.timg {
    position: relative;
    aspect-ratio: 1;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #2c4a5e;
    background: linear-gradient(170deg,#1f3b50,#101a26)
}

.timg .tbg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.timg .tsp {
    position: absolute;
    left: 6%;
    top: 6%;
    width: 88%;
    height: 88%;
    object-fit: contain;
    filter: drop-shadow(0 4px 5px #0008)
}

.tsh {
    position: absolute;
    left: 6px;
    top: 4px;
    font-size: 16px;
    line-height: 1;
    text-shadow: 0 1px 3px #000
}

.tqb {
    position: absolute;
    right: 6px;
    bottom: 6px;
    background: #000b;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px
}

.timg .tdel {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    padding: 0;
    display: grid;
    place-items: center;
    background: #000a;
    color: #fff;
    font-size: 12px;
    border-radius: 50%
}

.timg .tdel:hover {
    background: #7a2236;
    color: #fff
}

.tcap {
    min-width: 0
}

.tcap .tname {
    font-size: 13px
}

.tcap .ttags {
    margin-top: 3px
}

.tctl {
    display: flex;
    gap: 6px;
    align-items: center
}

.tctl .tnoteedit {
    flex: 1 1 0;
    width: 0;
    border-color: var(--line)
}

.tcard>.tnote {
    max-width: none;
    text-align: left
}

@media(max-width: 650px) {
    .tlist {
        grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
        gap: 10px
    }
}

.tcap .vtag {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.timg .tbg,.ptile .pbg {
    height: 122%;
    inset: auto;
    left: 0;
    top: 0;
    object-position: center top
}

.ptile {
    overflow: hidden
}

.timg .tbg,.ptile .pbg {
    height: 135%
}

.cardov {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: #000c;
    overflow: auto;
    padding: 18px;
    display: flex;
    justify-content: center;
    align-items: flex-start
}

.cardbox {
    position: relative;
    width: min(760px,100%)
}

.cardx {
    position: absolute;
    right: 6px;
    top: -2px;
    z-index: 2;
    background: #000a;
    color: #fff;
    border: 0;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 15px
}

.cardhint {
    color: #cfe3d6;
    font-size: 13px;
    margin: 0 44px 12px 0
}

.cardsheet {
    background: #0d2b22;
    border-radius: 18px;
    padding: 26px 24px 30px
}

.cardsheet h2 {
    margin: 0 0 14px;
    text-align: center;
    color: #5ee08a;
    font-size: 34px;
    letter-spacing: .5px
}

.cardsheet h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 12px;
    font-size: 28px
}

.cardsheet h3 i {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-block
}

.cardsheet h3.g {
    color: #5ee08a
}

.cardsheet h3.g i {
    background: #3ddc84
}

.cardsheet h3.o {
    color: #ffc46b
}

.cardsheet h3.o i {
    background: #ffb347
}

.cgrid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 14px
}

.ccell {
    min-width: 0
}

.ccell .timg {
    border: 3px solid #2f7a45;
    border-radius: 18px
}

.ccell b {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    color: #e8f7ee;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.ccell small {
    display: block;
    color: #8fc7a4;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

@media(max-width: 560px) {
    .cgrid {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
}

.cardbar {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0 44px 12px 0
}

.cardbar .cardhint {
    margin: 0;
    flex: 1
}

.cardsave {
    background: #2fa56f;
    color: #04150d;
    border: 0;
    border-radius: 10px;
    padding: 9px 16px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap
}

.cardov.capturing {
    background: #000
}

.cardov.capturing .cardbar,.cardov.capturing .cardx {
    visibility: hidden
}

.donate {
    flex: none;
    color: #0b1018;
    background: linear-gradient(135deg,#f4c96b,#e9a93c);
    font-weight: 700;
    font-size: 13px;
    padding: 9px 15px;
    border-radius: 12px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 6px 20px #f4c96b33;
    transition: transform .15s,box-shadow .15s
}

.donate:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px #f4c96b55
}

.donatelink {
    color: var(--gold);
    text-decoration: none;
    display: inline-block;
    margin-bottom: 6px
}

.donatelink:hover {
    text-decoration: underline
}

@media(max-width: 650px) {
    .donate {
        font-size:12px;
        padding: 8px 11px
    }

    .sub {
        display: none
    }
}