body[data-theme="orange"],
body[data-theme="neon"] {
    --theme-accent: #f47721;
    --theme-accent-strong: #d95d0b;
    --theme-accent-soft: #fff0e4;
    --theme-page: #f5f7fb;
    --theme-panel: #fff;
    --theme-text: #182235;
    --theme-muted: #64748b;
    --theme-border: #e1e7f0;
    background:
        radial-gradient(ellipse at 8% 10%, var(--theme-accent-soft) 0, transparent 38%),
        radial-gradient(ellipse at 92% 82%, var(--theme-accent-soft) 0, transparent 34%),
        var(--theme-page);
    background-attachment: fixed;
    color: var(--theme-text);
}

body[data-theme="neon"] {
    --theme-accent: #5146e5;
    --theme-accent-strong: #312eaa;
    --theme-accent-soft: #e8eaff;
    --theme-page: #f3f6ff;
    --theme-panel: #fff;
    --theme-text: #121b35;
    --theme-muted: #5e6c8b;
    --theme-border: #dce3f5;
}

body[data-theme] .site-header {
    border-bottom: 1px solid var(--theme-border);
    background: var(--theme-panel);
    box-shadow: 0 8px 28px #1e293b12;
}

body[data-theme] .brand,
body[data-theme] .brand-name,
body[data-theme] .nav-links a {
    color: var(--theme-text);
}

body[data-theme] .brand-icon {
    border-color: var(--theme-border);
    background: var(--theme-accent-soft);
    color: var(--theme-accent);
}

body[data-theme] .brand-name small {
    color: var(--theme-muted);
}

body[data-theme] .nav-links a:hover,
body[data-theme] .nav-links a:focus-visible {
    background: var(--theme-accent-soft);
    color: var(--theme-accent-strong);
}

body[data-theme] .nav-links .shop-link,
body[data-theme] .btn.small,
body[data-theme] .confirm-details-btn,
body[data-theme] .confirm-payment,
body[data-theme] .receipt-home-button {
    border-color: transparent;
    background: var(--theme-accent);
    color: #fff;
}

body[data-theme] .nav-links .shop-link:hover,
body[data-theme] .btn.small:not(:disabled):hover,
body[data-theme] .confirm-details-btn:not(:disabled):hover,
body[data-theme] .confirm-payment:not(:disabled):hover,
body[data-theme] .receipt-home-button:hover {
    background: var(--theme-accent-strong);
    color: #fff;
}

body[data-theme] .menu-toggle {
    border-color: var(--theme-border);
    color: var(--theme-text);
}

body.shop-page[data-theme] {
    background:
        radial-gradient(ellipse at 8% 10%, var(--theme-accent-soft) 0, transparent 38%),
        radial-gradient(ellipse at 92% 82%, var(--theme-accent-soft) 0, transparent 34%),
        var(--theme-page);
}

body.shop-page[data-theme] .banner {
    position: relative;
    isolation: isolate;
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .9) 0%,
            color-mix(in srgb, var(--theme-accent) 90%, transparent) 100%
        ),
        url('../assets/sugo-banner.jpg') center / cover no-repeat;
}

body.shop-page[data-theme] .banner > .content:first-child {
    color: #fff;
}

body.shop-page[data-theme] .banner > .content:first-child h1,
body.shop-page[data-theme] .banner > .content:first-child p {
    color: #fff;
}

body.shop-page[data-theme] .banner > .content:first-child p {
    color: #f0eafa;
}

body.shop-page[data-theme] .banner > .content:first-child h1 span,
body.shop-page[data-theme] .hero-eyebrow,
body.shop-page[data-theme] .hero-highlights i {
    color: var(--theme-accent);
}

body.shop-page[data-theme] .hero-eyebrow {
    border-color: #ffffff42;
    background: #ffffff1a;
    color: #fff;
}

body.shop-page[data-theme] .banner .btn {
    background: var(--theme-accent);
    color: #fff;
}

body.shop-page[data-theme] .banner > .content:last-child img {
    width: auto;
    height: min(64vh, 560px);
    max-width: min(38vw, 390px);
    border: 1px solid #ffffff30;
    border-radius: 30px;
    box-shadow: 0 28px 70px #0c071d70, 0 0 50px var(--theme-accent-soft);
    object-fit: contain;
}

body.shop-page[data-theme] .container {
    height: auto;
    min-height: 680px;
    overflow: visible;
    border-color: var(--theme-border);
    background: var(--theme-page);
}

body.shop-page[data-theme] .main_title,
body.shop-page[data-theme] .shop-section-heading h2,
body.shop-page[data-theme] .user-card .user-info h3,
body.shop-page[data-theme] .panel-heading h2,
body.shop-page[data-theme] .summary-heading h2 {
    color: var(--theme-text);
}

body.shop-page[data-theme] .main_title {
    border-color: var(--theme-border);
}

body.shop-page[data-theme] .shop-section-heading p,
body.shop-page[data-theme] .panel-heading p,
body.shop-page[data-theme] .pack-select-label,
body.shop-page[data-theme] .summary-pack-info span,
body.shop-page[data-theme] .selected-pack.empty-pack {
    color: var(--theme-muted);
}

body.shop-page[data-theme] .shop-section-icon,
body.shop-page[data-theme] .panel-icon,
body.shop-page[data-theme] .clock-icon {
    border-color: var(--theme-border);
    background: var(--theme-accent-soft);
    color: var(--theme-accent);
}

body.shop-page[data-theme] .user-card,
body.shop-page[data-theme] .pack-card,
body.shop-page[data-theme] .right-box {
    border-color: var(--theme-border);
    background: var(--theme-panel);
    box-shadow: 0 12px 32px #1e293b0d;
}

body.shop-page[data-theme] .pack-card::before {
    top: 0;
    left: 0;
    width: 170px;
    height: 150px;
    border-radius: 0;
    background: radial-gradient(
        ellipse at top left,
        color-mix(in srgb, var(--theme-accent) 48%, transparent),
        transparent 72%
    );
    filter: none;
    transform: none;
}

body.shop-page[data-theme] .user-details {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

body.shop-page[data-theme] .user-detail {
    border-color: var(--theme-border);
    background: var(--theme-page);
}

body.shop-page[data-theme] .user-detail span,
body.shop-page[data-theme] .right-box form label,
body.shop-page[data-theme] .summary-row,
body.shop-page[data-theme] .karachi-clock strong,
body.shop-page[data-theme] .karachi-clock small {
    color: var(--theme-muted);
}

body.shop-page[data-theme] .user-detail strong,
body.shop-page[data-theme] .summary-pack-info strong {
    color: var(--theme-text);
}

body.shop-page[data-theme] .pack-card:hover,
body.shop-page[data-theme] .pack-card:focus-visible,
body.shop-page[data-theme] .pack-card.active {
    border-color: var(--theme-accent);
    box-shadow: 0 12px 30px var(--theme-accent-soft);
}

body.shop-page[data-theme] .pack-card .pack-qty,
body.shop-page[data-theme] .pack-card.active .pack-select-label,
body.shop-page[data-theme] .section-secure,
body.shop-page[data-theme] .summary-badge,
body.shop-page[data-theme] .profile-status.connected,
body.shop-page[data-theme] .total-row strong {
    color: var(--theme-accent-strong);
}

body.shop-page[data-theme] .profile-status,
body.shop-page[data-theme] .selected-pack,
body.shop-page[data-theme] .summary-coin {
    border-color: var(--theme-border);
    background: var(--theme-page);
    color: var(--theme-text);
}

body.shop-page[data-theme] .right-box input[type="text"] {
    border-color: var(--theme-border);
    background: #fff;
    color: var(--theme-text);
}

body.shop-page[data-theme] .right-box input[type="text"]:focus {
    border-color: var(--theme-accent);
    outline-color: color-mix(in srgb, var(--theme-accent) 22%, transparent);
}

body.shop-page[data-theme] .order-summary,
body.shop-page[data-theme] .karachi-clock {
    border-color: var(--theme-border);
}

body.payment-page[data-theme],
body.sender-page[data-theme] {
    background:
        radial-gradient(ellipse at 8% 10%, var(--theme-accent-soft) 0, transparent 38%),
        radial-gradient(ellipse at 92% 82%, var(--theme-accent-soft) 0, transparent 34%),
        var(--theme-page);
    background-attachment: fixed;
    color: var(--theme-text);
}

body.payment-page[data-theme] .payment-methods,
body.payment-page[data-theme] .payment-profile-card,
body.payment-page[data-theme] .payment-order-card,
body.sender-page[data-theme] .sending-state,
body.sender-page[data-theme] .receipt-card {
    border-color: var(--theme-border);
    background: var(--theme-panel);
    box-shadow: 0 16px 42px #1e293b12;
    color: var(--theme-text);
}

body.payment-page[data-theme] .payment-titlebar h1,
body.payment-page[data-theme] .section-heading h2,
body.payment-page[data-theme] .order-card-title h2,
body.payment-page[data-theme] .payment-user-name strong,
body.payment-page[data-theme] .payment-user-id strong,
body.payment-page[data-theme] .payment-coin-pack strong,
body.sender-page[data-theme] .sending-state h1 {
    color: var(--theme-text);
}

body.payment-page[data-theme] .payment-titlebar p,
body.payment-page[data-theme] .payment-user-name span,
body.payment-page[data-theme] .payment-user-id span,
body.payment-page[data-theme] .method-copy small,
body.payment-page[data-theme] .payment-security-note,
body.payment-page[data-theme] .payment-local-note,
body.sender-page[data-theme] .sending-state > p {
    color: var(--theme-muted);
}

body.payment-page[data-theme] .payment-method {
    border-color: var(--theme-border);
    background: var(--theme-page);
    color: var(--theme-text);
}

body.payment-page[data-theme] .payment-method.is-selected,
body.payment-page[data-theme] .payment-method:hover,
body.payment-page[data-theme] .payment-method:focus-visible {
    border-color: var(--theme-accent);
    background: var(--theme-accent-soft);
}

body.payment-page[data-theme] .method-copy strong,
body.payment-page[data-theme] .payment-user-details strong,
body.payment-page[data-theme] .payment-user-name strong,
body.payment-page[data-theme] .payment-user-id strong,
body.payment-page[data-theme] .payment-coin-pack div strong,
body.payment-page[data-theme] .order-detail-line strong,
body.payment-page[data-theme] .payment-datetime strong {
    color: var(--theme-text);
}

body.payment-page[data-theme] .method-balance strong,
body.payment-page[data-theme] .order-detail-line.total strong {
    color: var(--theme-accent-strong);
}

body.payment-page[data-theme] .method-balance small,
body.payment-page[data-theme] .profile-card-heading > span:first-child,
body.payment-page[data-theme] .payment-user-details span,
body.payment-page[data-theme] .order-detail-line,
body.payment-page[data-theme] .payment-datetime span,
body.payment-page[data-theme] .payment-coin-pack div span {
    color: var(--theme-muted);
}

body.payment-page[data-theme] .payment-user-details div,
body.payment-page[data-theme] .payment-user-info,
body.payment-page[data-theme] .payment-datetime div {
    border-color: var(--theme-border);
    background: var(--theme-page);
}

body.payment-page[data-theme] .payment-coin-pack {
    border-color: var(--theme-border);
    background: var(--theme-accent-soft);
}

body.payment-page[data-theme] .connected-pill {
    border-color: #a2e3bd;
    background: #e8f8ef;
    color: #14834b;
}

body.payment-page[data-theme] .order-vip {
    border-color: var(--theme-border);
    background: var(--theme-accent-soft);
    color: var(--theme-accent-strong);
}

body.payment-page[data-theme] .payment-security-note,
body.payment-page[data-theme] .payment-local-note {
    border-color: var(--theme-border);
    background: var(--theme-accent-soft);
    color: var(--theme-muted);
}

body.payment-page[data-theme] .payment-security-note i {
    color: var(--theme-accent);
}

body.payment-page[data-theme] .payment-error {
    border-color: #f5b5bd;
    background: #fff0f1;
    color: #a82236;
}

body.payment-page[data-theme] .payment-error a {
    color: #a82236;
}

body.payment-page[data-theme] .payment-eyebrow,
body.payment-page[data-theme] .section-kicker,
body.payment-page[data-theme] .payment-security-note i,
body.sender-page[data-theme] .sending-kicker,
body.sender-page[data-theme] .receipt-section h2 i {
    color: var(--theme-accent);
}

body.payment-page[data-theme] .back-to-shop {
    border-color: var(--theme-border);
    background: var(--theme-panel);
    color: var(--theme-text);
}

body.sender-page[data-theme] .receipt-profile {
    border-color: var(--theme-border);
    background: var(--theme-page);
}

body.sender-page[data-theme] .receipt-branding strong,
body.sender-page[data-theme] .receipt-section h2,
body.sender-page[data-theme] .receipt-recipient strong,
body.sender-page[data-theme] .receipt-recipient span {
    color: var(--theme-text);
}

body.sender-page[data-theme] .sending-progress > span {
    background: var(--theme-accent);
}

body[data-theme] .vip-page-loader {
    background:
        radial-gradient(ellipse at 50% 42%, var(--theme-accent-soft), transparent 43%),
        linear-gradient(145deg, var(--theme-page), #fff);
}

body[data-theme] .vip-loader-card strong,
body[data-theme] .vip-loader-card small {
    color: var(--theme-text);
}

body[data-theme] .vip-loader-card strong span {
    color: var(--theme-accent);
}

body[data-theme] .vip-loader-spinner {
    border-top-color: var(--theme-accent);
    border-right-color: var(--theme-accent);
}

body.shop-page[data-theme] .confirmation-modal,
body.payment-page[data-theme] .payment-modal {
    background: color-mix(in srgb, var(--theme-text) 58%, transparent);
    backdrop-filter: blur(10px);
}

body.shop-page[data-theme] .confirmation-dialog,
body.payment-page[data-theme] .payment-modal-card {
    border-color: var(--theme-border);
    background:
        radial-gradient(ellipse at 100% 0, var(--theme-accent-soft), transparent 48%),
        var(--theme-panel);
    box-shadow: 0 28px 90px #10182840;
    color: var(--theme-text);
}

body.shop-page[data-theme] .confirmation-emblem,
body.payment-page[data-theme] .payment-modal-icon {
    border-color: var(--theme-border);
    background: var(--theme-accent-soft);
    color: var(--theme-accent);
    box-shadow: 0 8px 22px var(--theme-accent-soft);
}

body.shop-page[data-theme] .confirmation-emblem img {
    width: 100%;
    height: 100%;
    border-radius: 13px;
    object-fit: cover;
}

body.shop-page[data-theme] .confirmation-eyebrow,
body.shop-page[data-theme] .confirmation-dialog h2,
body.payment-page[data-theme] .payment-modal-card h2 {
    color: var(--theme-accent-strong);
}

body.shop-page[data-theme] .confirmation-description,
body.shop-page[data-theme] .confirmation-log,
body.payment-page[data-theme] .payment-modal-card > p:not(.payment-modal-disclaimer) {
    color: var(--theme-muted);
}

body.shop-page[data-theme] .confirmation-progress,
body.payment-page[data-theme] .modal-order-recap {
    border-color: var(--theme-border);
    background: var(--theme-page);
}

body.shop-page[data-theme] .confirmation-progress span {
    background: linear-gradient(90deg, var(--theme-accent), var(--theme-accent-strong));
    box-shadow: 0 0 14px var(--theme-accent-soft);
}

body.shop-page[data-theme] .confirmation-log > i,
body.shop-page[data-theme] .confirmation-reference {
    color: var(--theme-accent);
}

body.shop-page[data-theme] .confirmation-reference {
    border-color: var(--theme-border);
    background: var(--theme-page);
}

body.shop-page[data-theme] .confirmation-close {
    background: var(--theme-accent);
    color: #fff;
}

body.payment-page[data-theme] .payment-modal-card .section-kicker,
body.payment-page[data-theme] .modal-order-recap strong {
    color: var(--theme-accent-strong);
}

body.payment-page[data-theme] .modal-order-recap div {
    border-color: var(--theme-border);
}

body.payment-page[data-theme] .modal-order-recap span,
body.payment-page[data-theme] .payment-modal-disclaimer {
    color: var(--theme-muted);
}

body.payment-page[data-theme] .payment-spinner {
    border-color: var(--theme-border);
    border-top-color: var(--theme-accent);
}

body.payment-page[data-theme] .payment-modal-icon.is-success {
    border-color: #a2e3bd;
    background: #e8f8ef;
    color: #149653;
}

body.payment-page[data-theme] .payment-modal-icon.is-error {
    border-color: #f5b5bd;
    background: #fff0f1;
    color: #d93448;
}

body.sender-page[data-theme] .sending-state {
    background:
        radial-gradient(ellipse at 50% 0, var(--theme-accent-soft), transparent 55%),
        var(--theme-panel);
}

body.sender-page[data-theme] .sending-recipient,
body.sender-page[data-theme] .sending-progress-meta,
body.sender-page[data-theme] .sending-steps,
body.sender-page[data-theme] .sending-step {
    color: var(--theme-muted);
}

body.sender-page[data-theme] .sending-recipient strong {
    color: var(--theme-text);
}

body.sender-page[data-theme] .sending-recipient i {
    color: #14834b;
}

body.sender-page[data-theme] .sending-progress-meta strong {
    color: var(--theme-accent-strong);
}

body.sender-page[data-theme] .sending-progress {
    background: var(--theme-border);
}

body.sender-page[data-theme] .sending-step.is-active,
body.sender-page[data-theme] .sending-step.is-complete {
    color: var(--theme-text);
}

body.sender-page[data-theme] .sending-step.is-active i,
body.sender-page[data-theme] .sending-step.is-complete i {
    color: var(--theme-accent);
}

body.sender-page[data-theme] .coin-orbit {
    border-color: var(--theme-accent);
}

body.sender-page[data-theme] .sending-spark {
    color: var(--theme-accent);
    filter: drop-shadow(0 0 8px var(--theme-accent-soft));
}

body.sender-page[data-theme] .receipt-card > h1,
body.sender-page[data-theme] .receipt-profile strong,
body.sender-page[data-theme] .receipt-lines strong,
body.sender-page[data-theme] .receipt-grid strong,
body.sender-page[data-theme] .receipt-datetime strong,
body.sender-page[data-theme] .receipt-section h2 {
    color: var(--theme-text);
}

body.sender-page[data-theme] .receipt-message,
body.sender-page[data-theme] .receipt-profile span,
body.sender-page[data-theme] .receipt-lines span,
body.sender-page[data-theme] .receipt-datetime span,
body.sender-page[data-theme] .receipt-grid span {
    color: var(--theme-muted);
}

body.sender-page[data-theme] .receipt-top,
body.sender-page[data-theme] .receipt-lines,
body.sender-page[data-theme] .receipt-grid div,
body.sender-page[data-theme] .receipt-datetime div,
body.sender-page[data-theme] .receipt-simulation-note,
body.sender-page[data-theme] .receipt-note,
body.sender-page[data-theme] .receipt-actions a {
    border-color: var(--theme-border);
    background: var(--theme-page);
}

body.sender-page[data-theme] .receipt-failure {
    border-color: #f5b5bd;
    background: #fff0f1;
    color: #a82236;
}

body.sender-page[data-theme] .receipt-failure span {
    color: #76212d;
}

body.sender-page[data-theme] .receipt-simulation-note,
body.sender-page[data-theme] .receipt-note,
body.sender-page[data-theme] .receipt-actions a {
    color: var(--theme-muted);
}

body.sender-page[data-theme] .receipt-actions .receipt-home-button {
    border-color: transparent;
    background: var(--theme-accent);
    color: #fff;
}

body.sender-page[data-theme] .receipt-lines .receipt-line-total strong {
    color: var(--theme-accent-strong);
}

body.sender-page[data-theme] .receipt-brand,
body.sender-page[data-theme] .receipt-section h2 i,
body.sender-page[data-theme] .receipt-datetime i,
body.sender-page[data-theme] .receipt-simulation-note i,
body.sender-page[data-theme] .receipt-note i {
    color: var(--theme-accent);
}

body.sender-page[data-theme] .receipt-brand::after {
    border-color: var(--theme-border);
    background: var(--theme-accent-soft);
    color: var(--theme-accent-strong);
}

body.admin-page.auth-page[data-theme] {
    background:
        radial-gradient(ellipse at 12% 12%, var(--theme-accent-soft), transparent 38%),
        radial-gradient(ellipse at 90% 88%, var(--theme-accent-soft), transparent 36%),
        linear-gradient(145deg, #fff, var(--theme-page));
    color: var(--theme-text);
}

body.admin-page.auth-page[data-theme] .auth-card {
    border-color: var(--theme-border);
    background: color-mix(in srgb, var(--theme-panel) 94%, transparent);
    box-shadow: 0 24px 70px #17203318, inset 0 1px #fff;
    color: var(--theme-text);
}

body.admin-page.auth-page[data-theme] .auth-brand,
body.admin-page.auth-page[data-theme] .auth-card h1 {
    color: var(--theme-text);
}

body.admin-page.auth-page[data-theme] .auth-brand span,
body.admin-page.auth-page[data-theme] .admin-eyebrow {
    color: var(--theme-accent-strong);
}

body.admin-page.auth-page[data-theme] .auth-description {
    color: var(--theme-muted);
}

body.admin-page.auth-page[data-theme] .admin-form label {
    color: var(--theme-text);
}

body.admin-page.auth-page[data-theme] .admin-form input:not([type="hidden"]) {
    border-color: var(--theme-border);
    background: #fff;
    color: var(--theme-text);
}

body.admin-page.auth-page[data-theme] .admin-form input:focus {
    border-color: var(--theme-accent);
    box-shadow: 0 0 0 3px var(--theme-accent-soft);
}

body.admin-page.auth-page[data-theme] .admin-primary-button {
    border-color: transparent;
    background: var(--theme-accent);
    color: #fff;
}

body.admin-page.auth-page[data-theme] .auth-return-link {
    color: var(--theme-accent-strong);
}

body.admin-page[data-theme] {
    background:
        radial-gradient(ellipse at 8% 8%, var(--theme-accent-soft), transparent 36%),
        radial-gradient(ellipse at 92% 90%, var(--theme-accent-soft), transparent 34%),
        var(--theme-page);
    color: var(--theme-text);
}

body.admin-page[data-theme] .admin-header {
    border-color: var(--theme-border);
    background: var(--theme-panel);
    box-shadow: 0 8px 28px #1e293b12;
}

body.admin-page[data-theme] .admin-brand,
body.admin-page[data-theme] .admin-nav a,
body.admin-page[data-theme] .admin-user {
    color: var(--theme-text);
}

body.admin-page[data-theme] .admin-brand-mark {
    border-color: var(--theme-border);
    background: var(--theme-accent-soft);
}

body.admin-page[data-theme] .admin-brand small {
    color: var(--theme-muted);
}

body.admin-page[data-theme] .admin-nav a:hover,
body.admin-page[data-theme] .admin-nav form button:hover {
    border-color: var(--theme-border);
    background: var(--theme-accent-soft);
    color: var(--theme-accent-strong);
}

body.admin-page[data-theme] .admin-nav form button {
    color: #b42335;
}

body.admin-page[data-theme] .admin-user i,
body.admin-page[data-theme] .admin-eyebrow {
    color: var(--theme-accent-strong);
}

body.admin-page[data-theme] .admin-welcome h1,
body.admin-page[data-theme] .page-heading h1,
body.admin-page[data-theme] .panel-title h2,
body.admin-page[data-theme] .theme-option-copy strong {
    color: var(--theme-text);
}

body.admin-page[data-theme] .admin-welcome p,
body.admin-page[data-theme] .page-heading p,
body.admin-page[data-theme] .panel-title p,
body.admin-page[data-theme] .theme-option-copy small,
body.admin-page[data-theme] .pack-admin-info span,
body.admin-page[data-theme] .empty-state {
    color: var(--theme-muted);
}

body.admin-page[data-theme] .admin-panel,
body.admin-page[data-theme] .outcome-button {
    border-color: var(--theme-border);
    background: var(--theme-panel);
    box-shadow: 0 14px 38px #1e293b12;
    color: var(--theme-text);
}

body.admin-page[data-theme] .panel-icon {
    border-color: var(--theme-border);
    background: var(--theme-accent-soft);
    color: var(--theme-accent);
}

body.admin-page[data-theme] .admin-form label,
body.admin-page[data-theme] .theme-options legend,
body.admin-page[data-theme] .admin-checkbox {
    color: var(--theme-text);
}

body.admin-page[data-theme] .admin-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
body.admin-page[data-theme] .admin-form textarea,
body.admin-page[data-theme] .admin-form select {
    border-color: var(--theme-border);
    background: #fff;
    color: var(--theme-text);
}

body.admin-page[data-theme] .admin-form input:focus,
body.admin-page[data-theme] .admin-form textarea:focus,
body.admin-page[data-theme] .admin-form select:focus {
    border-color: var(--theme-accent);
    box-shadow: 0 0 0 3px var(--theme-accent-soft);
}

body.admin-page[data-theme] .admin-primary-button {
    border-color: transparent;
    background: var(--theme-accent);
    color: #fff;
}

body.admin-page[data-theme] .admin-primary-button:hover {
    background: var(--theme-accent-strong);
}

body.admin-page[data-theme] .admin-secondary-button {
    border-color: var(--theme-border);
    background: var(--theme-panel);
    color: var(--theme-accent-strong);
}

body.admin-page[data-theme] .admin-secondary-button:hover,
body.admin-page[data-theme] .form-cancel-link {
    color: var(--theme-accent-strong);
}

body.admin-page[data-theme] .theme-option,
body.admin-page[data-theme] .pack-admin-row,
body.admin-page[data-theme] .pack-admin-coin,
body.admin-page[data-theme] .icon-action {
    border-color: var(--theme-border);
    background: var(--theme-page);
}

body.admin-page[data-theme] .theme-option:hover,
body.admin-page[data-theme] .theme-option.is-selected {
    border-color: var(--theme-accent);
    background: var(--theme-accent-soft);
    box-shadow: 0 0 0 2px var(--theme-accent-soft);
}

body.admin-page[data-theme] .theme-option input,
body.admin-page[data-theme] .admin-checkbox input {
    accent-color: var(--theme-accent);
}

body.admin-page[data-theme] .outcome-success .outcome-icon {
    border-color: #a2e3bd;
    background: #e8f8ef;
    color: #14834b;
}

body.admin-page[data-theme] .outcome-failed .outcome-icon {
    border-color: #f5b5bd;
    background: #fff0f1;
    color: #c22d40;
}

body.admin-page[data-theme] .outcome-gold .outcome-icon {
    border-color: #e9c86d;
    background: #fff5d6;
    color: #9a6700;
}

body.admin-page[data-theme] .outcome-gmail .outcome-icon {
    border-color: #c5d7f5;
    background: #edf4ff;
    color: #27569a;
}

body.admin-page[data-theme] .outcome-button small,
body.admin-page[data-theme] .outcome-arrow {
    color: var(--theme-muted);
}

body.admin-page[data-theme] .outcome-success:hover,
body.admin-page[data-theme] .outcome-success:focus-visible {
    border-color: #64b985;
    box-shadow: 0 16px 40px #1596531a;
}

body.admin-page[data-theme] .outcome-failed:hover,
body.admin-page[data-theme] .outcome-failed:focus-visible {
    border-color: #db7682;
    box-shadow: 0 16px 40px #d934481a;
}

body.admin-page[data-theme] .form-error {
    border-color: #f5b5bd;
    background: #fff0f1;
    color: #a82236;
}

body.admin-page[data-theme] .form-success {
    border-color: #a2e3bd;
    background: #e8f8ef;
    color: #126b3e;
}

body.admin-page[data-theme] .icon-action {
    color: var(--theme-accent-strong);
}

body.admin-page[data-theme] .icon-action.is-danger {
    color: #b42335;
}

body.admin-page[data-theme] .developer-watermark {
    border-color: var(--theme-border);
    background: var(--theme-panel);
    color: var(--theme-text);
    box-shadow: 0 8px 24px #1e293b18;
}

body.admin-page[data-theme] .developer-watermark strong {
    color: var(--theme-accent-strong);
}

body.admin-page[data-theme] .developer-watermark:hover,
body.admin-page[data-theme] .developer-watermark:focus-visible {
    border-color: var(--theme-accent);
    box-shadow: 0 8px 28px var(--theme-accent-soft);
}

body.dashboard-page[data-theme] {
    background:
        radial-gradient(ellipse at 10% 8%, var(--theme-accent-soft), transparent 34%),
        linear-gradient(155deg, var(--theme-text), #09070f 75%);
    color: #fff;
}

body.dashboard-page[data-theme] .dashboard-redirect,
body.dashboard-page[data-theme] .dashboard-manage {
    color: #fff;
}

@media (max-width: 760px) {
    body.admin-page[data-theme] .admin-nav {
        border-color: var(--theme-border);
    }
}

body.sender-page[data-theme] .receipt-card {
    border-color: var(--theme-border);
    background:
        linear-gradient(180deg, #fff, #fff 48%, var(--theme-page));
    box-shadow: 0 24px 70px #1720331a;
    color: var(--theme-text);
}

body.sender-page[data-theme] .receipt-branding {
    border-color: var(--theme-border);
}

body.sender-page[data-theme] .receipt-branding strong {
    color: var(--theme-text);
}

body.sender-page[data-theme] .receipt-branding small {
    color: var(--theme-muted);
}

body.sender-page[data-theme] .receipt-status-label.is-failed {
    color: #9a6700;
}

body.sender-page[data-theme] .receipt-status-label.is-error {
    color: #b42335;
}

body.sender-page[data-theme] .receipt-card.is-failed > h1 {
    color: #815400;
}

body.sender-page[data-theme] .receipt-card.is-pack-rejected > h1 {
    color: #8f1d2b;
}

body.sender-page[data-theme] .receipt-status-icon.is-failed {
    border-color: #f4d27c;
    background: #fff8df;
    color: #a66b00;
    box-shadow: 0 0 0 8px #fff8df9c;
}

body.sender-page[data-theme] .receipt-status-icon.is-error {
    border-color: #ef9aa3;
    background: #fff0f1;
    color: #b42335;
    box-shadow: 0 0 0 8px #fff0f17a;
}

body.sender-page[data-theme] .receipt-status-icon.is-failed img {
    width: 65%;
    height: 65%;
    object-fit: contain;
}

body.sender-page[data-theme] .receipt-failure {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin: 16px 0 18px;
    padding: 14px;
    border: 1px solid #efd28a;
    border-radius: 14px;
    background: linear-gradient(120deg, #fff9e8, #fffdf5);
    color: #593d07;
}

body.sender-page[data-theme] .receipt-failure[hidden] {
    display: none;
}

body.sender-page[data-theme] .pack-rejection {
    border-color: #ef9aa3;
    background: linear-gradient(130deg, #fff0f1, #fff8f8);
    color: #7f1d2a;
}

body.sender-page[data-theme] .gold-card-mark {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid #e9c86d;
    border-radius: 12px;
    background: #fff1bf;
    color: #9a6700;
    font-size: 18px;
}

body.sender-page[data-theme] .gold-card-mark img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: contain;
}
body.sender-page[data-theme] .gold-card-copy strong,
body.sender-page[data-theme] .gold-card-copy span,
body.sender-page[data-theme] .gold-card-fee span,
body.sender-page[data-theme] .gold-card-fee strong {
    display: block;
}

body.sender-page[data-theme] .gold-card-copy strong {
    color: #593d07;
    font-size: 13px;
}

body.sender-page[data-theme] .gold-card-fee span {
    color: #806b3b;
    font-size: 10px;
}

body.sender-page[data-theme] .gold-card-amounts {
    display: grid;
    gap: 5px;
    text-align: right;
    white-space: nowrap;
}

body.sender-page[data-theme] .gold-card-fee,
body.sender-page[data-theme] .gold-card-refund {
    display: grid;
    justify-items: end;
}

body.sender-page[data-theme] .gold-card-fee strong {
    margin-top: 3px;
    color: #593d07;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

body.sender-page[data-theme] .gold-card-refund span {
    color: #806b3b;
    font-size: 10px;
}

body.sender-page[data-theme] .gold-card-refund strong {
    margin-top: 2px;
    color: #267348;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

body.sender-page[data-theme] .pay-gold-card-fee,
body.sender-page[data-theme] .gold-fee-home {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid #c99422;
    border-radius: 10px;
    background: linear-gradient(115deg, #f8db83, #e8b83e);
    box-shadow: 0 7px 17px #bd8a2730;
    color: #442e04;
    font: 700 11px 'Poppins', sans-serif;
    text-decoration: none;
    cursor: pointer;
}

body.sender-page[data-theme] .pay-gold-card-fee {
    grid-column: 1 / -1;
    width: 100%;
}

body.sender-page[data-theme] .pay-gold-card-fee:hover,
body.sender-page[data-theme] .gold-fee-home:hover {
    background: linear-gradient(115deg, #f4d36f, #dfa92f);
}

body.sender-page[data-theme] .pay-gold-card-fee:disabled {
    cursor: wait;
    opacity: .7;
}

body.sender-page[data-theme] .gold-fee-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    place-items: center;
    padding: 20px;
    background: #1822358c;
    backdrop-filter: blur(8px);
}

body.sender-page[data-theme] .gold-fee-modal.is-open {
    display: grid;
    animation: gold-fee-fade-in .2s ease both;
}

body.sender-page[data-theme] .gold-fee-dialog {
    width: min(100%, 400px);
    padding: 30px;
    border: 1px solid var(--theme-border);
    border-radius: 20px;
    background: var(--theme-panel);
    box-shadow: 0 28px 80px #10182840;
    color: var(--theme-text);
    text-align: center;
}

body.sender-page[data-theme] .gold-fee-icon {
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    margin: 0 auto 14px;
    border: 1px solid #efd28a;
    border-radius: 18px;
    background: #fff8df;
    color: #a66b00;
    font-size: 25px;
}

body.sender-page[data-theme] .gold-fee-icon.is-success {
    border-color: #a2e3bd;
    background: #e8f8ef;
    color: #14834b;
}

body.sender-page[data-theme] .gold-fee-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--theme-border);
    border-top-color: var(--theme-accent);
    border-radius: 50%;
    animation: gold-fee-spin .8s linear infinite;
}

body.sender-page[data-theme] .gold-fee-kicker {
    color: #9a6700;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

body.sender-page[data-theme] .gold-fee-dialog h2 {
    margin: 7px 0;
    color: var(--theme-text);
    font-size: 21px;
}

body.sender-page[data-theme] .gold-fee-dialog > p:not(.gold-fee-kicker) {
    margin: 0 0 17px;
    color: var(--theme-muted);
    font-size: 12px;
    line-height: 1.6;
}

body.sender-page[data-theme] .gold-fee-home[hidden] {
    display: none;
}

body.sender-page.gold-fee-modal-open {
    overflow: hidden;
}

@keyframes gold-fee-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@media (max-width: 800px) {
    body.sender-page[data-theme] .receipt-failure {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    body.sender-page[data-theme] .gold-card-amounts {
        grid-column: 2;
        text-align: left;
    }

    body.sender-page[data-theme] .gold-card-fee,
    body.sender-page[data-theme] .gold-card-refund {
        justify-items: start;
    }

    body.sender-page[data-theme] .pay-gold-card-fee {
        grid-column: 1 / -1;
    }

    body[data-theme] .nav-links {
        border-color: var(--theme-border);
        background: var(--theme-panel);
        box-shadow: 0 14px 30px #1e293b1a;
    }

    body.shop-page[data-theme] .banner {
        background:
            linear-gradient(
                90deg,
                rgba(0, 0, 0, .9) 0%,
                color-mix(in srgb, var(--theme-accent) 90%, transparent) 100%
            ),
            url('../assets/sugo-banner.jpg') center / cover no-repeat;
    }

    body.shop-page[data-theme] .banner > .content:last-child img {
        width: auto;
        height: min(50vh, 430px);
        max-width: min(68vw, 320px);
    }
}