:root {
    --cardstore-solid-color: #e7f0ff;
    --cardstore-gradient-from: #edf7ff;
    --cardstore-gradient-to: #eaf8ee;
    --cardstore-entry-bg: linear-gradient(135deg, #edf7ff 0%, #eaf8ee 100%);

    --cardstore-text: #223447;
    --cardstore-subtext: #567086;
    --cardstore-primary: #4a81b3;
    --cardstore-primary-dark: #2f628f;
    --cardstore-btn-color: #4a81b3;
    --cardstore-btn-color-dark: #2f628f;
    --cardstore-btn-text: #ffffff;
    --cardstore-danger: #d44b58;
    --cardstore-border: rgba(255, 255, 255, 0.78);
    --cardstore-shadow: 0 16px 36px rgba(88, 119, 150, 0.18);
}

.cardstore-entry {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    margin: 20px 0;
    cursor: pointer;
    border: 1px solid var(--cardstore-border);
    background: var(--cardstore-entry-bg);
    box-shadow: var(--cardstore-shadow);
    transition: transform .24s ease, box-shadow .24s ease;
}

.cardstore-entry:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(88, 119, 150, 0.24);
}

.cardstore-entry:focus,
.cardstore-entry:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(74, 129, 179, 0.26), 0 20px 40px rgba(88, 119, 150, 0.2);
}

.cardstore-entry-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(140deg, rgba(255, 255, 255, 0.72) 6%, rgba(255, 255, 255, 0.2) 45%, rgba(255, 255, 255, 0.36) 100%),
        radial-gradient(circle at 92% 12%, rgba(255, 255, 255, 0.78) 0, rgba(255, 255, 255, 0) 55%);
    pointer-events: none;
}

.cardstore-entry-content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px);
}

.cardstore-entry-thumb {
    width: 62px;
    height: 62px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cardstore-entry-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cardstore-entry-thumb-placeholder {
    color: #5a7590;
    font-size: 11px;
    letter-spacing: .8px;
    font-weight: 700;
}

.cardstore-entry-info {
    flex: 1;
    min-width: 0;
}

.cardstore-entry-title {
    color: var(--cardstore-text);
    font-size: 17px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cardstore-entry-desc {
    color: var(--cardstore-subtext);
    margin-top: 5px;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cardstore-entry-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.cardstore-entry-buy {
    border: 0;
    border-radius: 999px;
    min-width: 92px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cardstore-btn-text);
    background: linear-gradient(135deg, var(--cardstore-btn-color), var(--cardstore-btn-color-dark));
    box-shadow: 0 8px 16px rgba(58, 104, 150, 0.32);
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.cardstore-entry-buy:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(58, 104, 150, 0.38);
}

.cardstore-entry-buy:active {
    transform: translateY(0);
}

.cardstore-entry-query {
    border: 1px solid rgba(89, 123, 152, 0.4);
    border-radius: 999px;
    min-width: 92px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #315b81;
    background: rgba(255, 255, 255, 0.88);
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}

.cardstore-entry-query:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(70, 106, 136, 0.62);
}

.cardstore-entry-query:active {
    transform: translateY(0);
}

.cardstore-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(26, 38, 53, 0.52);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}

.cardstore-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.cardstore-modal-container {
    width: min(680px, 100%);
    max-height: min(90vh, 900px);
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.66);
    box-shadow: 0 28px 56px rgba(25, 34, 46, 0.32);
    background: rgba(248, 252, 255, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
}

.cardstore-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 14px;
    border-bottom: 1px solid rgba(183, 205, 224, 0.54);
    background: linear-gradient(90deg, rgba(241, 248, 255, 0.84) 0%, rgba(243, 251, 245, 0.84) 100%);
}

.cardstore-modal-title {
    margin: 0;
    color: var(--cardstore-text);
    font-size: 18px;
    font-weight: 700;
}

.cardstore-modal-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cardstore-modal-query-btn {
    border: 1px solid rgba(89, 123, 152, 0.42);
    border-radius: 999px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.85);
    color: #315b81;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.cardstore-modal-query-btn:hover {
    background: #ffffff;
    border-color: rgba(70, 106, 136, 0.66);
}

.cardstore-modal-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.74);
    color: #5b748a;
    font-size: 24px;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cardstore-modal-body {
    padding: 15px;
    overflow: auto;
}

.cardstore-step-loading {
    text-align: center;
    color: var(--cardstore-subtext);
    padding: 30px 10px;
}

.cardstore-spinner,
.cardstore-spinner-small {
    display: inline-block;
    border-radius: 50%;
    border-style: solid;
    border-color: rgba(130, 164, 194, 0.3);
    border-top-color: var(--cardstore-primary);
    animation: cardstore-spin 1s linear infinite;
}

.cardstore-spinner {
    width: 36px;
    height: 36px;
    border-width: 3px;
}

.cardstore-spinner-small {
    width: 14px;
    height: 14px;
    border-width: 2px;
    vertical-align: middle;
    margin-right: 4px;
}

@keyframes cardstore-spin {
    to { transform: rotate(360deg); }
}

.cardstore-order-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cardstore-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.cardstore-form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cardstore-label {
    color: #567085;
    font-size: 13px;
}

.cardstore-input,
.cardstore-select {
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid rgba(168, 191, 211, 0.72);
    background: rgba(255, 255, 255, 0.88);
    color: #203447;
    font-size: 14px;
    padding: 10px 11px;
    outline: none;
}

.cardstore-input:focus,
.cardstore-select:focus {
    border-color: rgba(85, 136, 183, 0.92);
    box-shadow: 0 0 0 3px rgba(76, 124, 169, 0.18);
}

.cardstore-price-display {
    border: 1px solid rgba(173, 196, 215, 0.72);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.68);
    color: #d44b58;
    font-size: 22px;
    font-weight: 700;
    padding: 6px 10px;
    min-height: 42px;
    display: flex;
    align-items: center;
}

.cardstore-pay-btn,
.cardstore-submit-btn,
.cardstore-buy-btn {
    border: 1px solid transparent;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--cardstore-primary), var(--cardstore-primary-dark));
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 11px 14px;
    min-height: 40px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    white-space: nowrap;
    cursor: pointer;
}

.cardstore-pay-btn:disabled {
    opacity: 0.74;
    cursor: not-allowed;
}

.cardstore-query-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cardstore-query-actions {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
}

.cardstore-query-actions .cardstore-pay-btn,
.cardstore-query-actions .cardstore-submit-btn {
    min-width: 112px;
    min-height: 40px;
    padding: 0 16px;
}

.cardstore-query-actions .cardstore-submit-btn-outline {
    margin-top: 0;
}

.cardstore-query-back {
    min-width: 98px;
}

.cardstore-query-result {
    margin-top: 4px;
}

.cardstore-query-loading,
.cardstore-query-empty {
    color: #4e6a80;
    font-size: 13px;
    padding: 10px 0;
}

.cardstore-query-error {
    color: #cb4453;
    font-size: 13px;
    padding: 10px 0;
}

.cardstore-query-table-wrap {
    border: 1px solid rgba(177, 197, 214, 0.78);
    border-radius: 10px;
    overflow: auto;
    max-height: 360px;
}

.cardstore-query-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.cardstore-query-table th,
.cardstore-query-table td {
    border-bottom: 1px solid rgba(208, 221, 233, 0.8);
    border-right: 1px solid rgba(208, 221, 233, 0.8);
    padding: 7px 8px;
    vertical-align: top;
    text-align: left;
    white-space: nowrap;
}

.cardstore-query-table th:last-child,
.cardstore-query-table td:last-child {
    border-right: 0;
}

.cardstore-query-table tr:last-child td {
    border-bottom: 0;
}

.cardstore-query-table th {
    background: rgba(241, 248, 255, 0.92);
    color: #4e677c;
    position: sticky;
    top: 0;
    z-index: 1;
}

.cardstore-query-card-cell {
    min-width: 220px;
    white-space: pre-wrap !important;
    word-break: break-all;
}

.cardstore-payment {
    text-align: center;
}

.cardstore-pay-tip {
    margin: 0 0 10px;
    color: #3b556b;
    font-size: 14px;
}

.cardstore-qrcode-wrap {
    width: 218px;
    height: 218px;
    margin: 0 auto;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(168, 191, 211, 0.76);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cardstore-qrcode-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cardstore-pay-amount {
    margin-top: 10px;
    color: var(--cardstore-danger);
    font-size: 24px;
    font-weight: 700;
}

.cardstore-pay-status {
    margin-top: 7px;
    color: #5c7489;
    font-size: 13px;
}

.cardstore-step-success {
    text-align: center;
}

.cardstore-success-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto;
    border-radius: 50%;
    background: #e7f9ef;
    color: #24a667;
    font-size: 30px;
    line-height: 56px;
    font-weight: 700;
}

.cardstore-success-title {
    margin: 8px 0 13px;
    color: #274059;
}

.cardstore-order-info {
    border: 1px solid rgba(168, 191, 211, 0.76);
    border-radius: 10px;
    overflow: hidden;
    text-align: left;
    margin-bottom: 11px;
    background: rgba(255, 255, 255, 0.74);
}

.cardstore-order-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 11px;
    border-bottom: 1px solid rgba(190, 207, 222, 0.58);
}

.cardstore-order-row:last-child {
    border-bottom: 0;
}

.cardstore-order-label {
    color: #5a7287;
}

.cardstore-order-value {
    color: #294058;
    word-break: break-all;
}

.cardstore-order-price {
    color: var(--cardstore-danger);
    font-weight: 700;
}

.cardstore-kami-section {
    border: 1px solid rgba(168, 191, 211, 0.76);
    border-radius: 10px;
    overflow: hidden;
    text-align: left;
    background: rgba(255, 255, 255, 0.8);
}

.cardstore-kami-header {
    background: rgba(241, 248, 255, 0.95);
    border-bottom: 1px solid rgba(190, 207, 222, 0.66);
    color: #557189;
    font-size: 13px;
    padding: 9px 11px;
}

.cardstore-kami-content {
    padding: 10px 11px;
    max-height: 320px;
    overflow-y: auto;
    word-break: break-all;
}

.cardstore-kami-tip {
    margin: 10px 0 0;
    font-size: 12px;
    color: #61788d;
}

.cardstore-submit-btn-outline {
    margin-top: 12px;
    border: 1px solid rgba(126, 157, 183, 0.76);
    color: #2f628f;
    background: rgba(255, 255, 255, 0.88);
}

.cardstore-error {
    text-align: center;
    color: #c93f4e;
    padding: 20px 0;
}

.cardstore-kami-content table,
.cardstore-order-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.cardstore-kami-content th,
.cardstore-kami-content td,
.cardstore-order-table th,
.cardstore-order-table td {
    border: 1px solid rgba(177, 197, 214, 0.78);
    padding: 7px;
    vertical-align: top;
}

.cardstore-kami-content th,
.cardstore-order-table th {
    background: rgba(241, 248, 255, 0.92);
    color: #4e677c;
}

.cardstore-container {
    margin: 20px 0;
    padding: 14px;
    border: 1px solid rgba(168, 191, 211, 0.68);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.86);
}

.cardstore-header {
    margin-bottom: 8px;
}

.cardstore-title {
    margin: 0;
    color: #2d445c;
    font-size: 16px;
}

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

.cardstore-product-card,
.cardstore-list-item {
    border: 1px solid rgba(168, 191, 211, 0.6);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.94);
    overflow: hidden;
}

.cardstore-product-image {
    height: 120px;
    background-size: cover;
    background-position: center;
    background-color: #f2f7fb;
}

.cardstore-product-placeholder,
.cardstore-list-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cardstore-product-info {
    padding: 10px;
}

.cardstore-product-name,
.cardstore-list-name {
    color: #2f465c;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cardstore-product-bottom,
.cardstore-list-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 8px 0;
}

.cardstore-product-price,
.cardstore-list-price {
    color: var(--cardstore-danger);
    font-weight: 700;
}

.cardstore-product-stock,
.cardstore-list-stock {
    color: #60788e;
    font-size: 12px;
}

.cardstore-list-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cardstore-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
}

.cardstore-list-image {
    width: 56px;
    height: 56px;
    border-radius: 9px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-color: #f2f7fb;
}

.cardstore-list-info {
    min-width: 0;
    flex: 1;
}

@media (max-width: 760px) {
    .cardstore-entry-content {
        gap: 10px;
        padding: 13px;
    }

    .cardstore-entry-title {
        font-size: 16px;
    }

    .cardstore-entry-desc {
        font-size: 12px;
    }

    .cardstore-entry-buy {
        min-width: 84px;
        padding: 7px 11px;
        font-size: 12px;
    }

    .cardstore-entry-query {
        min-width: 84px;
        padding: 6px 11px;
        font-size: 12px;
    }

    .cardstore-form-row {
        grid-template-columns: 1fr;
    }

    .cardstore-qrcode-wrap {
        width: 188px;
        height: 188px;
    }
}