:root {
    color-scheme: dark;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #0d1117;
    color: #f5f7fb;
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    background: #0d1117;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    min-height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 7px;
    padding: 0 12px;
    background: #242c38;
    color: #f5f7fb;
    font: inherit;
}

button {
    cursor: pointer;
}

.commerce-header,
.commerce-main {
    width: min(960px, calc(100% - 28px));
    margin: 0 auto;
}

.commerce-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 68px;
}

.commerce-header-actions {
    display: flex;
    gap: 14px;
}

.commerce-icon-link {
    display: grid;
    width: 40px;
    min-height: 40px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 7px;
    color: #c8d0dc;
    background: #242c38;
}

.commerce-icon-link:hover {
    border-color: rgba(243, 198, 75, 0.62);
    color: #ffffff;
}

.nav-icon {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.brand {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 900;
}

.brand img {
    width: 50px;
    height: 44px;
    object-fit: contain;
}

.commerce-main {
    padding: 24px 0 56px;
}

.centered {
    display: grid;
    min-height: 80vh;
    place-items: center;
}

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

.commerce-panel {
    display: grid;
    gap: 13px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 18px;
    background: #151c26;
}

.offer-panel {
    max-width: 560px;
    margin: 0 auto;
}

.commerce-panel h1,
.commerce-panel h2,
.commerce-panel p {
    margin: 0;
}

.commerce-panel h2 {
    margin-top: 9px;
    font-size: 18px;
}

.commerce-panel p,
.commerce-panel li {
    color: #aab4c3;
    line-height: 1.5;
}

.unlock-list {
    display: grid;
    gap: 5px;
    margin: 0;
    padding-left: 18px;
}

.commerce-panel label {
    display: grid;
    gap: 6px;
    color: #c8d0dc;
    font-size: 14px;
    font-weight: 750;
}

.commerce-panel form {
    display: grid;
    gap: 11px;
}

.tax-note {
    font-size: 12px;
}

.purchase-consents {
    display: grid;
    gap: 9px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-top: 12px;
}

.purchase-consent {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 9px !important;
    color: #c8d0dc;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.45;
}

.purchase-consent input {
    width: 17px;
    min-height: 17px;
    height: 17px;
    margin: 2px 0 0;
    accent-color: #f3c64b;
}

.purchase-consent a {
    color: #8db8ff;
    text-decoration: underline;
}

.paypal-choice {
    display: grid;
    gap: 9px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-top: 12px;
}

.paypal-choice p {
    font-size: 12px;
}

.kicker {
    color: #73a7ff !important;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.price {
    font-size: 28px;
}

.primary {
    border-color: #f3c64b;
    background: #f3c64b;
    color: #171202;
    font-weight: 900;
}

.button {
    display: grid;
    min-height: 42px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 7px;
    padding: 0 12px;
    background: #242c38;
}

.notice {
    border: 1px solid rgba(255, 77, 95, 0.52);
    border-radius: 7px;
    padding: 11px;
    color: #ffd4da;
    background: rgba(255, 77, 95, 0.1);
}

@media (max-width: 680px) {
    .commerce-columns {
        grid-template-columns: 1fr;
    }
}

/* Shared public theme */
.commerce-header,
.commerce-main {
    width: min(960px, calc(100% - 32px));
}

.commerce-header {
    min-height: 64px;
    border-bottom: 1px solid var(--theme-border);
}

.commerce-icon-link,
.button,
button,
input {
    border-color: var(--theme-border);
    border-radius: 10px;
    background: var(--theme-surface);
    color: var(--theme-text);
}

.commerce-icon-link:hover,
.button:hover {
    border-color: rgba(255, 92, 58, 0.45);
}

.commerce-main {
    padding-top: clamp(34px, 7vw, 72px);
}

.commerce-panel {
    border-color: var(--theme-border);
    border-radius: 16px;
    padding: clamp(18px, 4vw, 28px);
    background: rgba(15, 20, 32, 0.92);
    box-shadow: var(--theme-glow);
}

.auth-panel {
    width: min(480px, 100%);
    margin: 0 auto;
}

.kicker {
    color: var(--theme-accent-soft) !important;
    letter-spacing: 0.1em;
}

.commerce-panel p,
.commerce-panel li {
    color: var(--theme-muted);
}

.primary {
    border-color: var(--theme-accent);
    color: #ffffff;
    background: var(--theme-accent);
}

.primary:hover {
    border-color: var(--theme-accent-soft);
    background: var(--theme-accent-soft);
}

.auth-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 14px;
    border-top: 1px solid var(--theme-border);
    padding-top: 13px;
}

.auth-links a,
.form-note a {
    color: var(--theme-accent-soft);
    font-size: 13px;
}

.form-note {
    font-size: 13px;
}

.checkbox {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 9px !important;
    color: var(--theme-muted);
    font-size: 13px !important;
    line-height: 1.5;
}

.checkbox input {
    width: 17px;
    min-height: 17px;
    height: 17px;
    margin: 2px 0 0;
    accent-color: var(--theme-accent);
}

.checkbox a {
    color: var(--theme-accent-soft);
}

.notice.success {
    border-color: rgba(34, 197, 94, 0.45);
    color: #bbf7d0;
    background: rgba(34, 197, 94, 0.1);
}

.notice:not(.error):not(.success) {
    border-color: rgba(115, 167, 255, 0.42);
    color: #bfdbfe;
    background: rgba(115, 167, 255, 0.09);
}

.oauth-divider {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--theme-muted);
    font-size: 12px;
    text-transform: uppercase;
}

.oauth-divider::before,
.oauth-divider::after {
    flex: 1;
    height: 1px;
    background: var(--theme-border);
    content: "";
}

.oauth-actions {
    display: grid;
    gap: 8px;
}

.shop-main {
    width: min(1280px, calc(100% - 32px));
}

.shop-intro {
    max-width: 760px;
    margin-bottom: 28px;
}

.shop-intro p:last-child {
    color: var(--theme-muted);
    line-height: 1.65;
}

.shop-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(290px, 350px);
    align-items: start;
    gap: 22px;
}

.shop-products,
.shop-category,
.shop-product-card,
.cart-items {
    display: grid;
    gap: 14px;
}

.shop-category h2 {
    margin-bottom: 0;
}

.shop-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 13px;
}

.shop-product-card {
    align-content: space-between;
    min-height: 260px;
    border: 1px solid var(--theme-border);
    border-radius: 14px;
    padding: 18px;
    background: rgba(15, 20, 32, 0.92);
}

.shop-product-card.is-owned {
    opacity: 0.72;
}

.shop-product-card h3,
.shop-product-card p {
    margin: 0;
}

.shop-product-card p:not(.product-kind),
.shop-product-card li {
    color: var(--theme-muted);
    font-size: 13px;
    line-height: 1.5;
}

.product-kind {
    margin-bottom: 7px !important;
    color: var(--theme-accent-soft);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.shop-product-footer,
.cart-item,
.cart-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
}

.shop-product-footer form,
.cart-item form {
    margin: 0;
}

.shop-product-footer button,
.cart-item button {
    min-height: 36px;
    cursor: pointer;
}

.cart-panel {
    position: sticky;
    top: 94px;
}

.cart-item {
    border-bottom: 1px solid var(--theme-border);
    padding-bottom: 11px;
    font-size: 13px;
}

.cart-item div {
    display: grid;
    gap: 4px;
}

.cart-item small {
    color: var(--theme-accent-soft);
}

.cart-total {
    margin: 16px 0;
    font-size: 18px;
}

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

    .cart-panel {
        position: static;
    }
}