.pc-table-wrap {
    --pc-bg: #fffbf2;
    background: linear-gradient(180deg, #fffdf7 0%, #fffaf0 100%);
    box-shadow: 0 6px 20px rgba(9, 55, 55, .10);
}
.pc-table {
    width: 100%;
    min-width: 80rem;
    border-collapse: separate;
    border-spacing: 0 .4rem;
}
.pc-table td,
.pc-table th {
    padding: 0 .2rem;
}
.pc-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--pc-bg, #fffbf2);
    color: #093737;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    padding: .35rem .2rem;
}
.pc-table thead th:nth-child(n+3) {
    min-width: 6.2rem;
}
.pc-table thead th:nth-child(2),
.pc-table td.pc-part-n,
.pc-table tr.pc-area > td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--pc-bg, #fffbf2);
}

.pc-card {
    height: 3.25rem;
    background: linear-gradient(165deg, #13550d 0%, #51010d 85%);
    border: 1px solid rgba(255, 255, 255, .5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    color: #fff;
    min-width: 0;
    overflow: hidden;
    overflow: clip;
    isolation: isolate;
}
.pc-head {
    position: sticky;
    left: calc(var(--pc-stick, 0px) + .25rem);
    min-width: 0;
}
.pc-card[role="button"] {
    cursor: pointer;
}
.pc-card[role="button"]:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
.pc-card:focus-visible {
    outline: 3px solid #e6a52b;
    outline-offset: 2px;
}
.pc-card.is-gap {
    outline: 2px dashed #00bfff;
    outline-offset: -2px;
}
.pc-card.has-state {
    padding-right: 2.1rem !important;
}
.pc-card.is-edit {
    padding-right: 2.75rem !important;
}
.pc-img {
    width: 4.875rem;
    height: 2.75rem;
    object-fit: contain;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45));
}
.pc-name {
    color: #fff;
    font-size: 1.125rem;
}
.pc-sort {
    color: #d9e6df;
    font-size: 1rem;
}

.pc-hatch {
    left: calc(var(--pc-h, 1) * 100%);
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .6) 0 4px, rgba(255, 255, 255, 0) 4px 8px),
    linear-gradient(180deg, #cfeab0 0%, #a9d47a 100%);
    border-left: 1.5px dashed #3f8a00;
    pointer-events: none;
}

.pc-state {
    width: 1.5rem;
    height: 1.5rem;
    font-size: .8125rem;
    box-shadow: 0 0 0 1.5px #fff;
    z-index: 2;
}
.pc-state.is-growing,
.pc-state.is-established {
    background: linear-gradient(135deg, #00bfff 0%, #5fd6ff 100%);
    color: #04303a;
}
.pc-state.is-ripe {
    background: linear-gradient(135deg, #3f8a00 0%, #8fe000 100%);
    color: #fff;
}
.pc-state.is-harvested {
    background: linear-gradient(135deg, #bd6c00 0%, #e6a52b 100%);
    color: #fff;
}
.pc-state.is-failed {
    background: linear-gradient(135deg, #8e1b1b 0%, #c62828 100%);
    color: #fff;
}
.pc-card.is-edit .pc-state {
    display: none !important;
}
.pc-state-leg {
    box-shadow: 0 0 0 1px rgba(9, 55, 55, .3);
}

.pc-del-form {
    z-index: 3;
}
.pc-del {
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
    letter-spacing: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.pc-del:focus-visible {
    outline: 2px solid #ffb700;
    outline-offset: 1px;
}

.pc-empty {
    color: #5f7370;
    font-size: 1rem;
}
.pc-empty.is-edit {
    cursor: pointer;
    color: #093737;
    border-radius: .5rem;
}
.pc-empty.is-edit > * {
    opacity: .6;
}
.pc-empty.is-edit:hover > *,
.pc-empty.is-edit:focus-visible > * {
    opacity: 1;
}
.pc-empty.is-edit:hover,
.pc-empty.is-edit:focus-visible {
    background: linear-gradient(180deg, rgba(9, 55, 55, .10) 0%, rgba(9, 55, 55, .04) 100%);
    outline: 2px dashed rgba(9, 55, 55, .45);
    outline-offset: -2px;
}
.pc-plus {
    font-size: .8125rem;
}

.pc-part-l {
    color: #3b5553;
    font-size: 1rem;
}
.pc-part-n {
    color: #093737;
    font-size: 1.125rem;
    border-right: 2px solid rgba(9, 55, 55, .35);
}
.pc-part-n .mix-badge,
.pv-mix-info .mix-badge {
    height: 1.5rem;
    min-width: 2.25rem;
    margin: 0 0 0 .35rem;
    padding: 0 .45rem;
    font-size: .875rem;
    vertical-align: middle;
}

.pc-area-name {
    color: #093737;
    font-size: 1.125rem;
    max-width: 13rem;
}
.pc-area > td {
    padding-top: .8rem;
}
.pc-table tbody > tr.pc-area:first-child > td {
    padding-top: 0;
}
.pc-season {
    height: .5rem;
    background-image: var(--gs-monthband, linear-gradient(to right,
    rgba(43, 179, 195, .70) 4.17%, rgba(43, 181, 191, .70) 12.5%, rgba(46, 201, 142, .70) 20.83%,
    rgba(62, 209, 105, .70) 29.17%, rgba(230, 202, 16, .70) 37.5%, rgba(245, 181, 24, .70) 45.83%,
    rgba(245, 160, 24, .70) 54.17%, rgba(245, 163, 24, .70) 62.5%, rgba(233, 201, 18, .70) 70.83%,
    rgba(87, 210, 77, .70) 79.17%, rgba(49, 209, 120, .70) 87.5%, rgba(44, 188, 175, .70) 95.83%));
}

.pc-legend {
    color: #3b5553;
    font-size: 1rem;
}
.pc-swatch {
    display: inline-block;
    width: 1.625rem;
    height: 1rem;
}
.pc-swatch-gap {
    background: linear-gradient(165deg, #13550d 0%, #51010d 85%);
    outline: 2px dashed #00bfff;
    outline-offset: -2px;
}
.pc-swatch-hatch {
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .6) 0 3px, rgba(255, 255, 255, 0) 3px 6px),
    linear-gradient(180deg, #cfeab0 0%, #a9d47a 100%);
    outline: 1.5px dashed #3f8a00;
    outline-offset: -1.5px;
}

.pc-stats-wrap {
    background: linear-gradient(180deg, #fffdf7 0%, #fffaf0 100%);
    color: #093737;
}
.pc-stats {
    scrollbar-width: thin;
}
.pc-stats-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.5rem;
    background: linear-gradient(90deg, rgba(255, 250, 240, 0) 0%, #fffaf0 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
}
.pc-stats-wrap.has-more::after {
    opacity: 1;
}
.pc-load {
    --bs-table-bg: transparent;
    --bs-table-color: #093737;
    width: auto;
    font-size: 1rem;
}
.pc-load caption {
    color: #093737;
}
.pc-load-bar {
    width: 9.75rem;
}
.pc-progress {
    height: .65rem;
    background: rgba(9, 55, 55, .12);
}
.pc-progress-bar {
    background: linear-gradient(90deg, #3f8a00 0%, #8fe000 100%);
}
.pc-nums {
    border-left: 1px solid rgba(9, 55, 55, .18);
}
.pc-num {
    color: #093737;
    font-size: 1.5rem;
    line-height: 1.2;
}
.pc-num-l {
    color: #3b5553;
    font-size: 1rem;
}

@media (max-width: 575.98px) {
    .pc-card {
        height: 2.875rem;
    }
    .pc-img {
        width: 4.25rem;
        height: 2.375rem;
    }
}

.pv-type {
    background: linear-gradient(90deg, rgba(0, 191, 255, .24) 0%, rgba(0, 191, 255, .10) 100%);
    border: 1px solid #00bfff;
    color: #e6f8ff;
    font-size: 1.125rem;
}
.pc-on-light .pv-type {
    background: linear-gradient(90deg, rgba(0, 191, 255, .20) 0%, rgba(0, 191, 255, .06) 100%);
    color: #005a78;
}
.pc-on-light .deepskyblueTxT {
    color: #005a78;
}
.pv-meta {
    color: #e9f3f1;
    font-size: 1.125rem;
}
.pv-mix-info {
    color: #e9f3f1;
    font-size: 1rem;
}
.pv-info {
    color: #7fdcff;
}
.pv-info:hover,
.pv-info:focus-visible {
    color: #ffffff;
}

.pc-state.is-gap {
    background: linear-gradient(135deg, rgba(0, 191, 255, .18) 0%, rgba(0, 191, 255, .06) 100%);
    outline: 2px dashed #00bfff;
    outline-offset: -2px;
    color: #0c4a45;
}

.pv-dev {
    background: linear-gradient(90deg, rgba(230, 165, 43, .32) 0%, rgba(230, 165, 43, .14) 100%);
    border: 1px solid #e6a52b;
    color: #ffffff;
    font-size: 1rem;
}
.pv-dev:hover,
.pv-dev:focus-visible {
    background: linear-gradient(90deg, rgba(230, 165, 43, .50) 0%, rgba(230, 165, 43, .24) 100%);
    color: #ffffff;
}
.pv-dev-box {
    background: linear-gradient(180deg, #fffdf7 0%, #fffaf0 100%);
    color: #093737;
    font-size: 1rem;
}
.pv-dev-item {
    color: #093737;
    font-size: 1rem;
}
.pv-dev-item:hover,
.pv-dev-item:focus-visible {
    color: #0c4a45;
    text-decoration: underline !important;
}

.pv-shade {
    z-index: 39;
}