.catalog-icon.firepepper {
    background: #ff7240;
}

.catalog-icon.firepepper::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 23px;
    border-radius: 62% 62% 70% 70%;
    background:
        radial-gradient(circle at 38% 25%, #ffd48a 0 12%, transparent 13%),
        linear-gradient(180deg, #ffeb5c, #ff3f25 64%, #9d1114);
    transform: rotate(12deg);
    box-shadow: 0 -9px 0 -7px #269347, 0 0 10px rgba(255,89,32,0.86);
}

.catalog-icon.starfruit {
    background: #ffe871;
}

.catalog-icon.starfruit::before {
    content: "";
    position: absolute;
    width: 25px;
    height: 25px;
    background: linear-gradient(135deg, #fff6a8, #f7b51f);
    clip-path: polygon(50% 0, 62% 34%, 98% 34%, 69% 55%, 79% 91%, 50% 70%, 21% 91%, 31% 55%, 2% 34%, 38% 34%);
    box-shadow: 0 0 10px rgba(255,219,73,0.85);
}

.catalog-icon.bonsai {
    background: #64d177;
}

.catalog-icon.bonsai::before {
    content: "";
    position: absolute;
    width: 25px;
    height: 24px;
    border-radius: 55% 55% 45% 45%;
    background:
        radial-gradient(circle at 28% 43%, #1f8d3f 0 20%, transparent 21%),
        radial-gradient(circle at 50% 25%, #35bd56 0 24%, transparent 25%),
        radial-gradient(circle at 72% 46%, #259746 0 21%, transparent 22%);
    box-shadow: 0 11px 0 -6px #704021;
}

.catalog-icon.frostfern {
    background: #9eefff;
}

.catalog-icon.frostfern::before {
    content: "";
    position: absolute;
    width: 24px;
    height: 25px;
    background:
        linear-gradient(90deg, transparent 0 45%, #eaffff 46% 54%, transparent 55%),
        radial-gradient(circle at 30% 28%, #d8fbff 0 12%, transparent 13%),
        radial-gradient(circle at 68% 36%, #b6f5ff 0 14%, transparent 15%),
        radial-gradient(circle at 32% 62%, #7fdfff 0 13%, transparent 14%),
        radial-gradient(circle at 70% 72%, #5ccaff 0 12%, transparent 13%);
    clip-path: polygon(50% 0, 72% 20%, 58% 38%, 86% 48%, 60% 57%, 75% 82%, 50% 68%, 25% 82%, 40% 57%, 14% 48%, 42% 38%, 28% 20%);
    filter: drop-shadow(0 0 8px rgba(176,245,255,0.9));
}

.catalog-icon.cocoa {
    background: #b5743b;
}

.catalog-icon.cocoa::before {
    content: "";
    position: absolute;
    width: 19px;
    height: 25px;
    border-radius: 55% 55% 45% 45%;
    background:
        linear-gradient(90deg, transparent 0 28%, rgba(85,38,15,0.28) 29% 34%, transparent 35% 62%, rgba(85,38,15,0.28) 63% 68%, transparent 69%),
        #8f4a24;
    transform: rotate(-12deg);
    box-shadow: 0 -10px 0 -7px #2c914b;
}

.catalog-icon.prismlotus {
    background: #65e7ff;
}

.catalog-icon.prismlotus::before {
    content: "";
    position: absolute;
    width: 26px;
    height: 24px;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #fff9b8 0 13%, transparent 14%),
        conic-gradient(from 20deg, #ff70c8, #ffe56b, #73f077, #63e8ff, #b27cff, #ff70c8);
    clip-path: polygon(50% 4%, 62% 34%, 94% 24%, 75% 52%, 96% 76%, 61% 69%, 50% 96%, 39% 69%, 4% 76%, 25% 52%, 6% 24%, 38% 34%);
    filter: drop-shadow(0 0 10px rgba(121,241,255,0.9));
}

.catalog-icon.honeyvine {
    background: #ffd65c;
}

.catalog-icon.honeyvine::before {
    content: "";
    position: absolute;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 36%, #fff4a8 0 11%, transparent 12%),
        radial-gradient(circle at 68% 60%, #d88b13 0 10%, transparent 11%),
        #f6b42e;
    box-shadow: -8px 7px 0 -4px #2f9e4b, 8px -5px 0 -5px #2f9e4b, 0 9px 0 -6px #8a5308;
}

.catalog-icon.obsidianrose {
    background: #3b2a55;
}

.catalog-icon.obsidianrose::before {
    content: "";
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #ff4fba 0 12%, transparent 13%),
        conic-gradient(#181225, #5b2b78, #08070d, #9b4dff, #181225);
    clip-path: polygon(50% 0, 62% 28%, 92% 15%, 75% 48%, 100% 70%, 65% 70%, 50% 100%, 35% 70%, 0 70%, 25% 48%, 8% 15%, 38% 28%);
    filter: drop-shadow(0 0 9px rgba(166,79,255,0.82));
}

.catalog-icon.cloudberry {
    background: #bceeff;
}

.catalog-icon.cloudberry::before {
    content: "";
    position: absolute;
    width: 26px;
    height: 18px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 30% 62%, #ffcf5a 0 14%, transparent 15%),
        radial-gradient(circle at 52% 50%, #ffc13b 0 14%, transparent 15%),
        radial-gradient(circle at 72% 64%, #e99621 0 12%, transparent 13%),
        #f4fbff;
    box-shadow: 0 -7px 0 -4px #ffffff, 0 0 11px rgba(210,246,255,0.9);
}

.catalog-name {
    color: #351b0b;
    font-size: 0.78rem;
    line-height: 1;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.58);
}

.catalog-owned {
    min-width: 34px;
    padding: 5px 7px;
    border-radius: 999px;
    background: #3fc456;
    color: #ffffff;
    font-size: 0.72rem;
    line-height: 1;
    text-align: center;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.22);
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.16);
}

.seed-token {
    position: relative;
    display: block;
    grid-area: thumb;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #ffd23f;
    box-shadow: inset 0 -5px 0 rgba(126,72,10,0.18), 0 4px 0 rgba(107,59,13,0.28);
}

.seed-token.plant-thumb {
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 3px solid rgba(255,255,255,0.95);
    border-radius: 18px;
    background:
        radial-gradient(circle at 34% 24%, rgba(255,255,255,0.98) 0 14%, transparent 15%),
        linear-gradient(145deg, #faffc0 0%, #73dcff 100%);
    box-shadow: inset 0 -6px 0 rgba(0,93,170,0.16), 0 5px 0 rgba(107,59,13,0.28);
}

.plant-thumb::before,

.plant-thumb::after {
    display: none !important;
    content: none !important;
}

.plant-thumb-img {
    display: block;
    width: 112%;
    height: 112%;
    object-fit: contain;
    filter: drop-shadow(0 5px 3px rgba(54,31,8,0.28));
    transform: translateY(1px);
}

.catalog-icon .plant-thumb-img {
    width: 120%;
    height: 120%;
}

.seed-token.sunflower::before {
    content: "";
    position: absolute;
    inset: 13px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 40% 38%, #7f3d18 0 10%, transparent 11%),
        radial-gradient(circle at 61% 43%, #7f3d18 0 9%, transparent 10%),
        radial-gradient(circle at 50% 62%, #7f3d18 0 11%, transparent 12%),
        #4a2614;
    border: 3px solid #fff8c9;
    z-index: 1;
}

.seed-token.sunflower::after {
    content: "";
    position: absolute;
    left: 25px;
    bottom: -9px;
    width: 9px;
    height: 18px;
    border-radius: 999px;
    background: #208a38;
    box-shadow: -9px 4px 0 -3px #37bb55, 9px 5px 0 -3px #2daa4b;
}

.seed-token.tomato {
    background: radial-gradient(circle at 38% 32%, #ff8a78 0 12%, transparent 13%), #e9312b;
}

.seed-token.tomato::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 18px;
    width: 24px;
    height: 15px;
    border-radius: 55% 55% 35% 35%;
    background: #36bd4c;
    box-shadow: -10px 6px 0 -4px #21843a, 10px 6px 0 -4px #21843a;
}

.seed-token.tomato::after {
    content: "";
    position: absolute;
    left: 25px;
    bottom: -8px;
    width: 9px;
    height: 18px;
    border-radius: 999px;
    background: #1e8c3a;
}

.seed-token.cactus {
    background: #49cf6b;
}

.seed-token.cactus::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 9px;
    width: 17px;
    height: 43px;
    border-radius: 999px 999px 9px 9px;
    background:
        linear-gradient(90deg, transparent 0 39%, rgba(255,255,255,0.32) 40% 45%, transparent 46%),
        #167842;
    box-shadow: -13px 15px 0 -5px #20924d, 13px 21px 0 -5px #20924d;
}

.seed-token.glowshroom {
    background: radial-gradient(circle at 36% 32%, #fff7a6 0 6%, transparent 7%), #7454ff;
}

.seed-token.glowshroom::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 13px;
    width: 40px;
    height: 24px;
    border-radius: 999px 999px 12px 12px;
    background:
        radial-gradient(circle at 28% 44%, #fff7b8 0 9%, transparent 10%),
        radial-gradient(circle at 58% 34%, #fff7b8 0 8%, transparent 9%),
        #e740a4;
    box-shadow: inset 0 -7px 0 rgba(94,24,95,0.22);
}

.seed-token.glowshroom::after {
    content: "";
    position: absolute;
    left: 24px;
    top: 35px;
    width: 11px;
    height: 19px;
    border-radius: 9px 9px 5px 5px;
    background: #eaffff;
    box-shadow: 0 0 12px rgba(188,255,255,0.9);
}

.seed-token.strawberry {
    background: radial-gradient(circle at 34% 35%, #ffb2b9 0 8%, transparent 9%), #ec344b;
}

.seed-token.strawberry::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 6px;
    width: 26px;
    height: 16px;
    border-radius: 60% 60% 35% 35%;
    background: #34b84a;
    box-shadow: -10px 7px 0 -5px #21873a, 10px 7px 0 -5px #21873a;
}

.seed-token.strawberry::after {
    content: "";
    position: absolute;
    left: 15px;
    top: 22px;
    width: 29px;
    height: 30px;
    border-radius: 55% 55% 60% 60%;
    background:
        radial-gradient(circle at 33% 34%, #ffe27a 0 5%, transparent 6%),
        radial-gradient(circle at 64% 48%, #ffe27a 0 5%, transparent 6%),
        radial-gradient(circle at 43% 68%, #ffe27a 0 5%, transparent 6%),
        #d91e3c;
    transform: rotate(45deg);
}

.seed-token.peas {
    background: radial-gradient(circle at 35% 28%, #dfff86 0 8%, transparent 9%), #4fbe3d;
}

.seed-token.peas::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 24px;
    width: 42px;
    height: 18px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 23% 50%, #ddff8f 0 13%, transparent 14%),
        radial-gradient(circle at 49% 50%, #ddff8f 0 13%, transparent 14%),
        radial-gradient(circle at 75% 50%, #ddff8f 0 13%, transparent 14%),
        #209b3c;
    transform: rotate(-13deg);
    box-shadow: inset 0 -4px 0 rgba(12,77,23,0.2);
}

.seed-token.peas::after {
    content: "";
    position: absolute;
    left: 29px;
    top: 7px;
    width: 7px;
    height: 25px;
    border-radius: 999px;
    background: #247f39;
    transform: rotate(14deg);
    box-shadow: -12px 14px 0 -4px #35b74e, 12px 18px 0 -4px #35b74e;
}

.seed-token.corn {
    background: #ffe478;
}

.seed-token.corn::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 8px;
    width: 16px;
    height: 42px;
    border-radius: 999px 999px 8px 8px;
    background:
        repeating-linear-gradient(0deg, #f6b51f 0 5px, #ffe681 5px 10px);
    box-shadow: inset 0 -5px 0 rgba(142,91,0,0.16);
}

.seed-token.corn::after {
    content: "";
    position: absolute;
    left: 14px;
    top: 25px;
    width: 31px;
    height: 20px;
    border-radius: 50% 50% 12px 12px;
    background: #35a64c;
    clip-path: polygon(0 100%, 24% 8%, 50% 68%, 76% 8%, 100% 100%);
}

.seed-token.pumpkin {
    background: #f29b24;
}

.seed-token.pumpkin::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 14px;
    width: 39px;
    height: 33px;
    border-radius: 45% 45% 50% 50%;
    background:
        linear-gradient(90deg, transparent 0 25%, rgba(124,63,8,0.22) 26% 29%, transparent 30% 66%, rgba(124,63,8,0.22) 67% 70%, transparent 71%),
        #f47f17;
    box-shadow: inset 0 -6px 0 rgba(119,55,6,0.18);
}

.seed-token.pumpkin::after {
    content: "";
    position: absolute;
    left: 26px;
    top: 7px;
    width: 9px;
    height: 14px;
    border-radius: 8px 8px 3px 3px;
    background: #2f8a3b;
}

.seed-token.watermelon {
    background: #35bc54;
}

.seed-token.watermelon::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 15px;
    width: 43px;
    height: 31px;
    border-radius: 50%;
    background:
        linear-gradient(90deg, transparent 0 15%, rgba(15,92,31,0.42) 16% 24%, transparent 25% 39%, rgba(15,92,31,0.42) 40% 48%, transparent 49% 62%, rgba(15,92,31,0.42) 63% 71%, transparent 72%),
        #2caf48;
    box-shadow: inset 0 -8px 0 #f05263;
}

.seed-token.watermelon::after {
    content: "";
    position: absolute;
    left: 24px;
    top: 38px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #261018;
    box-shadow: 10px -2px 0 #261018, -10px -1px 0 #261018;
}

.seed-token.crystalbloom {
    background: radial-gradient(circle at 50% 50%, #ffffff 0 12%, #62e9ff 13% 100%);
}

.seed-token.crystalbloom::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 7px;
    width: 15px;
    height: 43px;
    clip-path: polygon(50% 0, 100% 24%, 78% 100%, 22% 100%, 0 24%);
    background: linear-gradient(135deg, #f6ffff, #73eaff 48%, #897cff);
    box-shadow: -15px 11px 0 -4px #8c7dff, 15px 11px 0 -4px #8c7dff;
}

.seed-token.dragonfruit {
    background: radial-gradient(circle at 37% 26%, #fff1a6 0 8%, transparent 9%), #ef3b93;
}

.seed-token.dragonfruit::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 13px;
    width: 35px;
    height: 34px;
    border-radius: 55% 45% 58% 42%;
    background:
        radial-gradient(circle at 35% 39%, #fff7ea 0 16%, transparent 17%),
        radial-gradient(circle at 63% 58%, #fff7ea 0 12%, transparent 13%),
        #e71f87;
    box-shadow: inset 0 -7px 0 rgba(96,12,78,0.2);
}

.seed-token.dragonfruit::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 9px;
    width: 43px;
    height: 42px;
    background:
        linear-gradient(135deg, transparent 0 42%, #7ee35d 43% 56%, transparent 57%),
        linear-gradient(45deg, transparent 0 40%, #7ee35d 41% 54%, transparent 55%);
    clip-path: polygon(49% 0, 58% 30%, 94% 20%, 71% 50%, 100% 75%, 63% 70%, 51% 100%, 39% 70%, 2% 76%, 31% 50%, 6% 20%, 43% 30%);
}

.seed-token.goldleaf {
    background: radial-gradient(circle at 38% 28%, #fff4a6 0 10%, transparent 11%), #f2b51b;
}

.seed-token.goldleaf::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 11px;
    width: 23px;
    height: 34px;
    border-radius: 80% 0 80% 0;
    background: linear-gradient(135deg, #fff28a, #e2a40c);
    transform: rotate(-18deg);
    box-shadow: inset -6px -7px 0 rgba(134,77,3,0.2), 0 0 13px rgba(255,229,90,0.7);
}

.seed-token.lavender {
    background: radial-gradient(circle at 38% 28%, #f4d8ff 0 9%, transparent 10%), #a77bf0;
}

.seed-token.lavender::before {
    content: "";
    position: absolute;
    left: 25px;
    top: 8px;
    width: 10px;
    height: 42px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% 8%, #f7e7ff 0 13%, transparent 14%),
        radial-gradient(circle at 50% 25%, #b772ff 0 17%, transparent 18%),
        radial-gradient(circle at 50% 45%, #914fe2 0 18%, transparent 19%),
        radial-gradient(circle at 50% 66%, #7840c9 0 18%, transparent 19%),
        radial-gradient(circle at 50% 85%, #5c2ba7 0 16%, transparent 17%);
    filter: drop-shadow(0 0 9px rgba(206,160,255,0.8));
}

.seed-token.lavender::after {
    content: "";
    position: absolute;
    left: 19px;
    top: 30px;
    width: 23px;
    height: 16px;
    border-radius: 50%;
    background: #33a957;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    box-shadow: -10px 5px 0 -3px #43c96b, 10px 5px 0 -3px #2d9d4f;
}

.seed-token.moongourd {
    background: radial-gradient(circle at 34% 25%, #dff5ff 0 8%, transparent 9%), #334b88;
}

.seed-token.moongourd::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 15px;
    width: 39px;
    height: 32px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 65% 28%, #ffffff 0 9%, transparent 10%),
        linear-gradient(90deg, transparent 0 22%, rgba(95,151,221,0.36) 23% 30%, transparent 31% 57%, rgba(95,151,221,0.36) 58% 65%, transparent 66%),
        #9fd8ff;
    box-shadow: inset 0 -7px 0 rgba(38,73,140,0.24), 0 0 18px rgba(179,223,255,0.86);
}

.seed-token.moongourd::after {
    content: "";
    position: absolute;
    left: 24px;
    top: 8px;
    width: 11px;
    height: 13px;
    border-radius: 8px 8px 3px 3px;
    background: #37a957;
    transform: rotate(-12deg);
}

.seed-token.rainboworchid {
    background: radial-gradient(circle at 36% 25%, #fff6ba 0 8%, transparent 9%), #42c6f4;
}

.seed-token.rainboworchid::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 10px;
    width: 39px;
    height: 39px;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #fff8d6 0 15%, transparent 16%),
        conic-gradient(#ff4f91, #ffd34b, #4ee46a, #45d8ff, #9a67ff, #ff4f91);
    box-shadow: 0 0 17px rgba(111,221,255,0.82);
}

.seed-token.rainboworchid::after {
    content: "";
    position: absolute;
    left: 25px;
    top: 33px;
    width: 9px;
    height: 22px;
    border-radius: 999px;
    background: #258c43;
    box-shadow: -12px 8px 0 -5px #39bd5d, 12px 7px 0 -5px #39bd5d;
}

.seed-token.firepepper {
    background: radial-gradient(circle at 37% 27%, #ffe19a 0 8%, transparent 9%), #ff5b31;
}

.seed-token.firepepper::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 14px;
    width: 25px;
    height: 35px;
    border-radius: 60% 60% 70% 70%;
    background:
        radial-gradient(circle at 35% 24%, #fff0a0 0 9%, transparent 10%),
        linear-gradient(180deg, #ffe24e, #ff5830 58%, #a51117);
    transform: rotate(10deg);
    box-shadow: inset 0 -8px 0 rgba(95,0,0,0.2), 0 0 18px rgba(255,87,35,0.72);
}

.seed-token.firepepper::after {
    content: "";
    position: absolute;
    left: 26px;
    top: 7px;
    width: 10px;
    height: 15px;
    border-radius: 8px 8px 3px 3px;
    background: #279747;
    transform: rotate(-13deg);
}

.seed-token.starfruit {
    background: radial-gradient(circle at 38% 27%, #fff7b2 0 10%, transparent 11%), #ffd64a;
}

.seed-token.starfruit::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 10px;
    width: 39px;
    height: 39px;
    background:
        radial-gradient(circle at 50% 50%, #fff8bf 0 13%, transparent 14%),
        linear-gradient(135deg, #fff172, #f7aa1c);
    clip-path: polygon(50% 0, 62% 34%, 98% 34%, 69% 55%, 79% 91%, 50% 70%, 21% 91%, 31% 55%, 2% 34%, 38% 34%);
    filter: drop-shadow(0 0 12px rgba(255,213,55,0.82));
}

.seed-token.starfruit::after {
    content: "";
    position: absolute;
    left: 25px;
    top: 35px;
    width: 9px;
    height: 20px;
    border-radius: 999px;
    background: #248a41;
}

.seed-token.bonsai {
    background: radial-gradient(circle at 34% 25%, #c9ffad 0 9%, transparent 10%), #51bd62;
}