@property --border-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

:root {
    color-scheme: dark;
    font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    --ink: #eef6ff;
    --muted: #c0cddd44;
    --line: rgba(224, 238, 255, 0.14);
    --cyan: #67e8f9;
    --eye-accent: #86efad63;
    --gold: #fbbf24;
    --surface: rgb(255, 255, 255);
}

* { box-sizing: border-box; }

.theme-toggle {
    position: fixed;
    top: auto;
    bottom: 18px;
    right: 22px;
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 5px 10px 5px 6px;
    border: 1px solid rgba(95, 119, 151, 0.3);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: #344761;
    font: inherit;
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(15, 38, 75, 0.12);
    backdrop-filter: blur(10px);
}

.theme-toggle-track { display: inline-flex; width: 38px; height: 22px; align-items: center; padding: 3px; border-radius: 999px; background: #dbe4ef; transition: background-color 220ms ease; }
.theme-toggle-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(16, 32, 58, 0.24); transition: transform 220ms ease, background-color 220ms ease; }
.theme-toggle:hover { transform: translateY(-2px); }
.theme-toggle[aria-pressed="true"] .theme-toggle-track { background: #252936; }
.theme-toggle[aria-pressed="true"] .theme-toggle-thumb { transform: translateX(16px); background: #aeb6c4; }
.theme-toggle-changing { animation: theme-toggle-change 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }

@keyframes theme-toggle-change {
    0% { transform: translateY(0) scale(1); }
    45% { transform: translateY(-3px) scale(1.04); }
    100% { transform: translateY(0) scale(1); }
}

button:not(:disabled) {
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease, color 180ms ease, filter 180ms ease;
}

button:not(:disabled):not(.eye-toggle):not(.brand-mark):not(.submit-button):hover {
    transform: translateY(-1px);
    filter: brightness(1.025);
}

button:not(:disabled):active {
    transform: translateY(0) scale(0.98);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid rgba(100, 166, 255, 0.9);
    outline-offset: 2px;
}

body {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    overflow-x: hidden;
    padding: 32px 20px;
    color: var(--ink);
    background: #f3f6fb;
}

body::before,
body::after {
    display: none;
}

.auth-shell {
    position: relative;
    z-index: 1;
    width: min(100%, 460px);
    perspective: 1200px;
    animation: arrive 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 22px 4px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.brand-mark {
    display: grid;
    width: 34px;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgba(103, 232, 249, 0.45);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--cyan);
    transform: rotate(-7deg);
    cursor: pointer;
    padding: 0;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.brand-mark:hover {
    transform: none;
    box-shadow: 5px 5px 11px #011635, -5px -5px 11px #383636;
    animation-play-state: paused;
}

.brand-mark:hover svg { animation-play-state: paused; }

.brand-mark svg { width: 19px; height: 19px; }

.brand-mark,
.card-icon,
.security-badge {
    will-change: transform, filter;
    animation: logo-float 3.6s ease-in-out infinite;
}

.card-icon:hover,
.security-badge:hover {
    animation-duration: 1.8s;
}

.brand-mark svg,
.card-icon svg,
.security-badge svg {
    display: block;
    transform-origin: center;
    animation: logo-svg-bounce 3.6s ease-in-out infinite;
}

.auth-card {
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    padding: clamp(28px, 7vw, 44px);
    border: 1px solid transparent;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34);
}

.auth-layout {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 20px;
}

.auth-card::before {
    position: absolute;
    inset: 0;
    padding: 1px;
    content: "";
    border-radius: inherit;
    background: conic-gradient(
        from var(--border-angle),
        transparent 0deg 48deg,
        #021516 65deg 130deg,
        transparent 146deg 222deg,
        #e940cd 238deg 303deg,
        transparent 320deg 360deg
    );
    pointer-events: none;
    animation: border-orbit 7s linear infinite;
    -webkit-mask: linear-gradient(#850202 0 0) content-box, linear-gradient(#ffffff4f 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#640202 0 0) content-box, linear-gradient(#770404 0 0);
    mask-composite: exclude;
}

.eyebrow {
    margin: 0 0 13px;
    color: var(--cyan);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

h1 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(35px, 9vw, 44px);
    font-weight: 400;
    line-height: 1.08;
}

.subtitle {
    margin: 12px 0 30px;
    color: var(--muted);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
}

.field {
    margin-top: 19px;
    transition: transform 220ms ease;
}

.field:focus-within { transform: translateY(-2px); }

#login-form > .field:not([hidden]),
#login-form > .form-options,
#login-form > .submit-button {
    animation: field-arrive 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

#login-form > .field:not([hidden]):nth-child(1) { animation-delay: 120ms; }
#login-form > .field:not([hidden]):nth-child(2) { animation-delay: 210ms; }
#login-form > .field:not([hidden]):nth-child(3) { animation-delay: 300ms; }
#login-form > .field:not([hidden]):nth-child(4) { animation-delay: 390ms; }
#login-form > :nth-child(5) { animation-delay: 480ms; }
#login-form > :nth-child(6) { animation-delay: 570ms; }

.field-enter {
    animation: field-arrive 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
    animation-delay: var(--field-enter-delay, 0ms) !important;
}

label {
    display: block;
    margin-bottom: 8px;
    color: #000a14;
    font-size: 13px;
    font-weight: 600;
    transition: color 180ms ease, transform 180ms ease;
}

.field:focus-within > label {
    color: var(--cyan);
    transform: translateX(2px);
}

.login-password-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.login-password-heading label { margin-bottom: 0; }

.phone-input-group {
    display: flex;
    gap: 8px;
}

.phone-country-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 72px;
    width: 72px;
    min-width: 0;
    min-height: 50px;
    padding: 0 8px;
    border: 1px solid rgba(224, 238, 255, 0.16);
    border-radius: 9px;
    outline: none;
    background: rgba(5, 10, 20, 0.42);
    transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.phone-country-wrap::after {
    width: 7px;
    height: 7px;
    margin: -4px 3px 0 auto;
    border-right: 1.5px solid var(--muted);
    border-bottom: 1.5px solid var(--muted);
    content: "";
    pointer-events: none;
    transform: rotate(45deg);
}

.phone-country-wrap:focus-within {
    border-color: var(--cyan);
    background: rgba(5, 10, 20, 0.62);
    box-shadow: 0 0 0 3px rgba(103, 232, 249, 0.13);
}

.phone-country-code {
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
    pointer-events: none;
}

.phone-country {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    outline: none;
    opacity: 0;
    cursor: pointer;
}

#login-phone {
    width: 0;
    min-width: 0;
    flex: 1 1 0;
}

.input-wrap { position: relative; }

input[type="email"], input[type="tel"], input[type="password"], input[type="text"] {
    width: 100%;
    min-height: 50px;
    padding: 0 15px;
    border: 1px solid rgba(224, 238, 255, 0.16);
    border-radius: 9px;
    outline: none;
    background: rgba(5, 10, 20, 0.42);
    color: var(--ink);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

input::placeholder { color: #8292a8; }

input:focus {
    border-color: var(--cyan);
    background: rgba(5, 10, 20, 0.62);
    box-shadow: 0 0 0 3px rgba(103, 232, 249, 0.13);
    animation: input-focus 420ms ease-out;
}

input:not(:disabled):hover,
select:not(:disabled):hover,
textarea:not(:disabled):hover {
    border-color: #6aa4e8;
    box-shadow: 0 0 0 3px rgba(54, 126, 216, 0.08);
    animation: input-hover 360ms ease-out;
}

.password-input { padding-right: 54px !important; }

.icon-button {
    position: absolute;
    top: 50%;
    right: 8px;
    display: grid;
    width: 36px;
    aspect-ratio: 1;
    place-items: center;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transform: translateY(-50%);
}

.icon-button:hover { color: var(--cyan); background: rgba(255, 255, 255, 0.06); }
.icon-button .eye-icon {
    grid-area: 1 / 1;
    width: 19px;
    height: 19px;
    transition: opacity 180ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 240ms ease;
}

.icon-button .eye-icon--open { opacity: 1; transform: scale(1) rotate(0); }
.icon-button .eye-icon--closed { opacity: 0; transform: scale(0.65) rotate(-28deg); }
.icon-button.is-password-visible .eye-icon--open { opacity: 0; transform: scale(0.65) rotate(28deg); }
.icon-button.is-password-visible .eye-icon--closed {
    opacity: 1;
    transform: scale(1) rotate(0);
    filter: drop-shadow(0 0 5px rgba(134, 239, 172, 0.5));
}

.icon-button.is-password-visible { color: var(--eye-accent); }

.form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 17px 0 23px;
}

.remember {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.remember input { width: 15px; height: 15px; accent-color: var(--cyan); }

a, .text-button {
    color: var(--cyan);
    font: inherit;
    font-size: 13px;
    text-decoration: none;
}

a:hover, .text-button:hover { text-decoration: underline; }

@keyframes button-press {
    0% { transform: scale(1); }
    40% { transform: scale(0.985); }
    100% { transform: scale(1); }
}

.submit-button {
    display: flex;
    width: 100%;
    min-height: 51px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #2d9cf3 0%, #39d3d1 100%);
    color: #ffffff;
    font: inherit;
    font-size: 15px;
    font-weight: 750;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(41, 128, 214, 0.22);
    transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

.submit-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
    box-shadow: 0 16px 28px rgba(41, 128, 214, 0.25);
}

.submit-button:active {
    transform: translateY(0);
    animation: button-press 180ms ease;
}
.submit-button svg { width: 17px; height: 17px; }

.status-message {
    min-height: 20px;
    margin: 12px 0 0;
    color: var(--gold);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}

.switch-auth {
    margin: 22px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 14px;
    text-align: center;
}

.text-button {
    margin-left: 4px;
    padding: 4px;
    border: 0;
    background: transparent;
    font-weight: 700;
    cursor: pointer;
}

.footer-note {
    margin: 20px 0 0;
    color: #013885;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
}

[hidden] { display: none !important; }

@keyframes atmosphere {
    from { background-position: 0% 0%; }
    to { background-position: 100% 100%; }
}

@keyframes water-current {
    from {
        transform: translate3d(-2%, -1%, 0) rotate(-2deg);
        background-position: 0% 0%, 10% 30%, 100% 0%;
    }
    to {
        transform: translate3d(2%, 1%, 0) rotate(2deg);
        background-position: 100% 100%, 90% 70%, 0% 100%;
    }
}

@keyframes logo-float {
    0%,
    100% {
        transform: translateY(0) rotate(0deg) scale(1);
        filter: drop-shadow(0 0 0 rgba(103, 232, 249, 0));
    }
    25% {
        transform: translateY(-2px) rotate(-2deg) scale(1.02);
    }
    50% {
        transform: translateY(-5px) rotate(3deg) scale(1.04);
        filter: drop-shadow(0 6px 12px rgba(103, 232, 249, 0.18));
    }
    75% {
        transform: translateY(-2px) rotate(-1deg) scale(1.02);
    }
}

@keyframes logo-svg-bounce {
    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(1.18) rotate(8deg);
    }
}

@keyframes input-focus {
    0% { box-shadow: 0 0 0 0 rgba(103, 232, 249, 0.34); }
    55% { box-shadow: 0 0 0 5px rgba(103, 232, 249, 0.17); }
    100% { box-shadow: 0 0 0 3px rgba(103, 232, 249, 0.13); }
}

@keyframes credential-type {
    0%, 100% { transform: scale(1); }
    45% { transform: scale(1.012); }
}

@keyframes credential-icon-pop {
    0%, 100% { transform: translateY(-50%) scale(1) rotate(0); }
    45% { transform: translateY(-50%) scale(1.18) rotate(-8deg); }
}

@keyframes input-hover {
    0% { box-shadow: 0 0 0 0 rgba(54, 126, 216, 0); }
    55% { box-shadow: 0 0 0 4px rgba(54, 126, 216, 0.12); }
    100% { box-shadow: 0 0 0 3px rgba(54, 126, 216, 0.08); }
}

@keyframes merchandise-status-arrive {
    from { opacity: 0; transform: translateY(8px); filter: blur(3px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes logout-error-show {
    0% { opacity: 0; transform: translateX(0); }
    35% { opacity: 1; transform: translateX(-5px); }
    65% { transform: translateX(5px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes brand-arrow-nudge {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(3px, -3px); }
}

@keyframes arrive {
    from { opacity: 0; transform: translateY(20px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes page-change {
    0% { opacity: 1; transform: rotateY(0deg) scale(1); }
    42% { opacity: 1; transform: rotateY(22deg) scale(0.99); }
    50% { opacity: 0; transform: rotateY(45deg) scale(0.98); }
    58% { opacity: 1; transform: rotateY(18deg) scale(0.99); }
    100% { opacity: 1; transform: rotateY(0deg) scale(1); }
}

@keyframes field-arrive {
    from {
        opacity: 0;
        transform: translateY(12px);
        filter: drop-shadow(0 0 10px rgba(103, 232, 249, 0.2));
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: drop-shadow(0 0 0 rgba(103, 232, 249, 0));
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .field-enter {
        animation-delay: 0ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

.otp-shell {
    position: relative;
    z-index: 1;
    width: min(100%, 384px);
    animation: arrive 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.auth-shell[hidden],
.otp-shell[hidden] { display: none !important; }

.screen-enter { animation: screen-arrive 440ms cubic-bezier(0.2, 0.8, 0.25, 1) both; }

.otp-card {
    position: relative;
    overflow: hidden;
    padding: 30px 30px 26px;
    border: 1px solid transparent;
    border-radius: 25px;
    background: rgba(7, 17, 37, 0.78);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42), inset 0 0 35px rgba(24, 119, 210, 0.08);
}

.otp-card::before {
    position: absolute;
    inset: 0;
    padding: 1px;
    content: "";
    border-radius: inherit;
    background: conic-gradient(
        from var(--border-angle),
        transparent 0deg 48deg,
        #24e3f6 65deg 130deg,
        transparent 146deg 222deg,
        #e940cd 238deg 303deg,
        transparent 320deg 360deg
    );
    pointer-events: none;
    animation: border-orbit 7s linear infinite;
    -webkit-mask: linear-gradient(#e9dddd 0 0) content-box, linear-gradient(#160000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#4d0c0c 0 0) content-box, linear-gradient(#4e2323 0 0);
    mask-composite: exclude;
}

.security-badge {
    display: grid;
    width: 88px;
    aspect-ratio: 1;
    place-items: center;
    margin: 0 auto 12px;
    border: 1px solid rgba(72, 231, 246, 0.22);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(27, 198, 225, 0.16), rgba(17, 45, 74, 0.32) 68%);
    box-shadow: 0 0 28px rgba(192, 200, 201, 0.1), inset 0 0 20px rgba(34, 211, 238, 0.08);
    animation: badge-glow 3.2s ease-in-out infinite;
}

.security-badge svg {
    width: 54px;
    height: 60px;
    color: #37e4ec;
    filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.55));
}

.otp-heading {
    margin: 0;
    color: #f5f8ff;
    font-size: 27px;
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
}

.otp-heading span { color: #36e2e9; }

.otp-copy {
    margin: 12px 0 25px;
    color: #c0cddd;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.55;
    text-align: center;
}

.otp-copy strong {
    display: block;
    margin-top: 3px;
    color: #f1f5ff;
    font-size: 15px;
    font-weight: 600;
}

.otp-fields {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 27px;
}

.otp-fields .otp-digit {
    width: 100%;
    min-width: 0;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(139, 174, 221, 0.22);
    border-radius: 10px;
    outline: none;
    background: rgba(29, 49, 77, 0.76);
    color: #f4f8ff;
    font: inherit;
    font-size: 21px;
    font-weight: 650;
    text-align: center;
    caret-color: #35e6ec;
    transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
    animation: digit-arrive 500ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.otp-digit:nth-child(2) { animation-delay: 60ms; }
.otp-digit:nth-child(3) { animation-delay: 120ms; }
.otp-digit:nth-child(4) { animation-delay: 180ms; }
.otp-digit:nth-child(5) { animation-delay: 240ms; }
.otp-digit:nth-child(6) { animation-delay: 300ms; }

.otp-digit:focus {
    transform: translateY(-2px);
    border-color: #35e6ec;
    background: rgba(19, 62, 93, 0.9);
    box-shadow: 0 0 0 3px rgba(53, 230, 236, 0.14), 0 0 18px rgba(53, 230, 236, 0.18);
}

.otp-verify {
    display: flex;
    width: 100%;
    min-height: 49px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(105deg, #159cf2, #10d5b9);
    box-shadow: 0 8px 24px rgba(12, 185, 214, 0.16);
    color: #f7fdff;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

.otp-verify:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow: 0 10px 28px rgba(12, 185, 214, 0.28);
}

.otp-verify:active { transform: translateY(0); }
.otp-verify svg { width: 18px; height: 18px; }

.otp-status {
    min-height: 18px;
    margin: 10px 0 0;
    color: #7ce6e7;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

.otp-resend {
    margin: 14px 0 0;
    color: #bac7d9;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
}

.otp-resend button {
    padding: 0;
    border: 0;
    background: transparent;
    color: #35dede;
    font: inherit;
    font-weight: 650;
}

.otp-resend button:not(:disabled) { cursor: pointer; }
.otp-resend button:not(:disabled):hover { text-decoration: underline; }
.otp-resend button:disabled { opacity: 1; }

.otp-back {
    display: block;
    width: fit-content;
    margin: 14px auto 0;
    padding: 5px;
    border: 0;
    background: transparent;
    color: #0e254b;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: color 180ms ease;
}

.otp-back:hover { color: #0d2627; }

@keyframes screen-arrive {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes border-orbit {
    to { --border-angle: 360deg; }
}

@keyframes digit-arrive {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes digit-pop {
    0% { transform: scale(1); }
    45% { transform: scale(1.16) translateY(-3px); }
    100% { transform: scale(1) translateY(0); }
}

@keyframes badge-glow {
    50% { box-shadow: 0 0 38px rgba(34, 211, 238, 0.925), inset 0 0 25px rgba(34, 211, 238, 0.14); }
}

@media (max-width: 420px) {
    .otp-card { padding: 27px 20px 23px; }
    .otp-fields { gap: 7px; }
    .otp-fields .otp-digit { height: 46px; font-size: 19px; }
}

:root {
    color-scheme: light;
    --ink: #18243b;
    --muted: #61718a;
    --line: rgba(255, 255, 255, 0.24);
    --cyan: #2878df;
    --eye-accent: #24865e;
    --gold: #b46d11;
    --surface: #ffffff;
}

body {
    min-height: 100vh;
    align-content: center;
    padding: 36px 24px;
    color: var(--ink);
    background-color: #02193b;
    background-image:
        linear-gradient(rgba(234, 240, 249, 0.05), rgba(234, 240, 249, 0.05)),
        url("online-hacking-background-3d-illustration.jpg");
    background-attachment: fixed;
    background-position: 15% center;
    background-size: cover;
    animation: none;
}

body::before,
body::after { display: none; }

.auth-shell {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    width: min(100%, 560px);
    perspective: none;
    animation: arrive 520ms ease-out both;
}

.brand {
    gap: 11px;
    margin: 0 0 2px 4px;
    color: #2878df;
    font-size: 17px;
    letter-spacing: 0;
    text-transform: none;
}

.auth-shell > .brand {
    position: absolute;
    top: -58px;
    left: 4px;
    margin: 0;
}

.brand small {
    display: block;
    margin-top: 2px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(14, 34, 59, 0.9);
    font-size: 12px;
    font-weight: 500;
}

.brand-mark {
    width: 40px;
    border: 0;
    border-radius: 12px;
    background: #fdfdfd;
    box-shadow: 5px 5px 11px #011635, -5px -5px 11px #383636;
    transform: none;
}

.auth-layout {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 20px;
}

.auth-card,
.otp-card {
    border: 1px solid rgba(24, 43, 70, 0.3);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: 0 16px 44px rgba(8, 20, 39, 0.3);
    backdrop-filter: blur(14px);
    transform-style: flat;
    backface-visibility: visible;
}

.auth-card {
    min-width: 0;
    width: min(100%, 500px);
    justify-self: center;
    padding: 32px clamp(25px, 3vw, 38px);
}

.auth-card form {
    width: min(100%, 460px);
    margin-inline: auto;
}

.auth-card--login form { width: min(100%, 480px); }

.auth-card::before,
.otp-card::before { display: none; }

.auth-card.page-change { animation: none; }

.auth-shell { perspective: 1200px; }

.auth-card.page-change {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    animation: page-change 480ms cubic-bezier(0.65, 0.05, 0.36, 1) both;
}

.auth-title {
    margin: 0;
    color: #192641;
    font-family: inherit;
    font-size: 29px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.auth-card--signup .auth-title { font-size: 27px; }

.card-icon {
    display: grid;
    width: 66px;
    height: 66px;
    place-items: center;
    margin: 0 auto 17px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    background: #edf2fa;
    box-shadow: 7px 7px 15px #cbd4e1, -7px -7px 15px #fff;
    color: #2878df;
}
.auth-card .card-icon { border-color: rgba(255, 255, 255, 0.42); box-shadow: 4px 4px 10px rgba(203, 212, 225, 0.72), -4px -4px 10px rgba(255, 255, 255, 0.58); }

.card-icon svg { width: 28px; height: 28px; }

.eyebrow {
    margin-bottom: 7px;
    color: #3478c8;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-align: center;
}

.subtitle {
    margin: 7px 0 23px;
    color: #50627a;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.auth-card label {
    margin-bottom: 7px;
    color: #344761;
    font-size: 13px;
    font-weight: 700;
}

.auth-card .field { margin-top: 15px; }
.auth-card .field:focus-within { transform: none; }

.field-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.field-heading a {
    color: #397acb;
    font-size: 12px;
    font-weight: 600;
}

.icon-input { position: relative; }

.icon-input > svg {
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 1;
    width: 17px;
    height: 17px;
    color: #566984;
    pointer-events: none;
    transform: translateY(-50%);
}

.auth-card input[type="email"],
.auth-card input[type="tel"],
.auth-card input[type="password"],
.auth-card input[type="text"] {
    min-height: 46px;
    padding: 0 14px 0 41px;
    border: 1px solid #9eafc4;
    border-radius: 11px;
    background: #f6f8fc;
    box-shadow: none;
    color: #22314b;
    font-size: 14px;
    font-weight: 600;
}

.auth-card input::placeholder { color: #687b94; opacity: 1; }

.auth-card input:focus {
    border-color: #2878df;
    background: #fbfcff;
    box-shadow: 0 0 0 3px rgba(40, 120, 223, 0.16);
    animation: none;
}

input.is-typing:not(.otp-digit),
textarea.is-typing {
    animation: credential-type 280ms ease-out;
}

.icon-input.is-typing > svg {
    animation: credential-icon-pop 280ms ease-out;
}

.auth-card .password-wrap input { padding-right: 48px; }

.auth-card .phone-input-group { gap: 8px; }

.auth-card .phone-country-wrap {
    flex-basis: 78px;
    width: 78px;
    min-height: 46px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0 20px 0 8px;
    border: 1px solid #9eafc4;
    border-radius: 11px;
    background: #f6f8fc;
    box-shadow: none;
}

.auth-card .phone-country-wrap:focus-within {
    border-color: #2878df;
    background: #fbfcff;
    box-shadow: 0 0 0 3px rgba(40, 120, 223, 0.12);
}

.auth-card .phone-country-code { color: #22314b; font-size: 13px; font-weight: 700; }
.auth-card .phone-country-wrap::after { position: absolute; top: 50%; right: 10px; margin: 0; transform: translateY(-50%) rotate(45deg); }
.auth-card #signup-phone { padding-left: 14px; }
.auth-card .phone-country-wrap::after { border-color: #667994; }

.eye-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #61738d;
    cursor: pointer;
    transform: translateY(-50%);
}

.eye-toggle:hover { color: #2878df; }
.eye-toggle .eye-icon { grid-area: 1 / 1; width: 18px; height: 18px; transition: opacity 160ms ease, transform 180ms ease; }
.eye-toggle .eye-icon--open { opacity: 1; }
.eye-toggle .eye-icon--closed { opacity: 0; transform: scale(0.8); }
.eye-toggle.is-password-visible .eye-icon--open { opacity: 0; transform: scale(0.8); }
.eye-toggle.is-password-visible .eye-icon--closed { opacity: 1; transform: scale(1); }
.eye-toggle.is-password-visible { color: #24865e; }

.form-options { margin: 15px 0 17px; }
.remember { gap: 8px; color: #4b5d76 !important; font-size: 12px !important; font-weight: 600 !important; }
.remember input { width: 15px; height: 15px; accent-color: #2878df; }
.terms { margin: 15px 0 !important; }

.auth-card a,
.auth-card .text-button { color: #2878df; }

.auth-card .submit-button {
    min-height: 48px;
    border: 1px solid #b9c6d8;
    border-radius: 11px;
    background: #e9eff8;
    box-shadow: 6px 6px 13px #cbd4e1, -6px -6px 13px #fff;
    color: #2770c1;
    font-size: 14px;
    font-weight: 700;
    transition: transform 180ms ease, translate 220ms ease, box-shadow 180ms ease, border-color 180ms ease, filter 180ms ease;
}

@keyframes login-button-hop {
    0%, 100% { translate: var(--move-x) var(--move-y); rotate: 0deg; }
    20% { translate: 0 -9px; rotate: -2deg; }
    45% { translate: var(--move-x) 3px; rotate: 2deg; }
    70% { translate: var(--move-opposite-x) -4px; rotate: -1deg; }
}

#login-form .submit-button.is-displaced {
    animation: login-button-hop 420ms cubic-bezier(0.2, 0.8, 0.25, 1) both;
}

.auth-card .submit-button:hover {
    transform: translateY(-1px);
    border-color: #a5bfd9;
    box-shadow: 8px 10px 18px rgba(72, 108, 153, 0.12), -4px -4px 10px rgba(255, 255, 255, 0.8);
    filter: brightness(1.02);
}

.auth-card .submit-button:active {
    transform: translateY(1px);
    animation: button-press 180ms ease;
    box-shadow: inset 3px 3px 6px #cbd4e1, inset -3px -3px 6px #fff;
}

.auth-card .status-message { color: #914818; font-size: 12px; font-weight: 600; }
.auth-card .status-message--error {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    width: fit-content;
    max-width: 100%;
    min-height: 0;
    margin-top: 6px;
    padding: 7px 9px;
    border: 1px solid #f0dcc4;
    border-left: 3px solid #c77837;
    border-radius: 7px;
    background: #fffaf3;
    color: #70451f;
    font-size: 11px;
    line-height: 1.4;
    animation: validation-message-enter 220ms ease-out both;
    transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.auth-card .status-message--error:hover {
    border-color: #d9ac7d;
    background: #fff6e9;
    box-shadow: 0 4px 12px rgba(83, 57, 28, 0.1);
}

.auth-card .status-message--error::before {
    display: grid;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    place-items: center;
    border-radius: 50%;
    background: #f7e3cb;
    color: #8b4d21;
    content: "!";
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

@keyframes validation-message-enter {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.auth-card .switch-auth {
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid rgba(102, 123, 153, 0.16);
    color: #526681;
    font-size: 13px;
    font-weight: 500;
}

.auth-card .text-button { padding: 3px; font-size: 13px; font-weight: 700; }
#focus-signup { display: inline-flex; min-height: 32px; align-items: center; justify-content: center; padding: 6px 12px; border: 1px solid #b9cfea; border-radius: 7px; background: rgba(234, 242, 253, 0.82); box-shadow: 0 4px 10px rgba(40, 120, 223, 0.1); }
#focus-signup:hover { border-color: #7ca9df; background: #e5f0ff; }

.forgot-shell { width: min(100%, 500px); animation: arrive 520ms ease-out both; }
.forgot-card {
    padding: 32px clamp(25px, 3vw, 38px);
    border: 1px solid rgba(24, 43, 70, 0.3);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: 0 16px 44px rgba(8, 20, 39, 0.3);
    backdrop-filter: blur(14px);
}
.forgot-card .card-icon { margin-bottom: 17px; }
.forgot-card .auth-title { text-align: center; }
.forgot-card .subtitle { text-align: center; }
.forgot-card label { display: block; margin-bottom: 7px; color: #344761; font-size: 13px; font-weight: 700; }
.forgot-card input { width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid #9eafc4; border-radius: 11px; background: #f6f8fc; color: #22314b; font: inherit; font-size: 14px; font-weight: 600; }
.forgot-card .submit-button { width: 100%; min-height: 48px; margin-top: 22px; }
.forgot-card .status-message { min-height: 18px; color: #914818; font-size: 12px; font-weight: 600; }
.forgot-card .otp-back { display: block; margin: 20px auto 0; }

.otp-shell { width: min(100%, 390px); }

.otp-card {
    padding: 32px 30px 26px;
    border-radius: 20px;
    background: #edf2fa;
    box-shadow: 14px 14px 32px #cbd4e1, -14px -14px 32px #fff;
}

.security-badge {
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: #edf2fa;
    box-shadow: 7px 7px 15px #cbd4e1, -7px -7px 15px #fff;
    animation: none;
}

.security-badge svg { color: #2878df; filter: none; }
.otp-heading { color: #1c2b45; font-weight: 800; }
.otp-heading span { color: #2878df; }
.otp-copy { color: #4c607a; font-weight: 600; }
.otp-copy strong { color: #243653; font-weight: 700; }

.otp-fields .otp-digit {
    border: 1px solid #b9c6d8;
    border-radius: 10px;
    background: #f6f8fc;
    box-shadow: inset 1px 1px 2px #d4dce8, inset -1px -1px 1px rgba(255, 255, 255, 0.8);
    color: #20324e;
}

.otp-digit:focus {
    border-color: #2878df;
    background: #fbfcff;
    box-shadow: 0 0 0 3px rgba(40, 120, 223, 0.16);
}

.otp-digit.digit-pop { animation: digit-pop 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }

.otp-verify {
    min-height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 11px;
    background: #e9eff8;
    box-shadow: 6px 6px 13px #cbd4e1, -6px -6px 13px #fff;
    color: #2770c1;
}

.otp-verify:hover { background: #edf3fc; filter: none; }
.otp-status { color: #914818; font-weight: 600; }
.otp-resend { color: #4b5d76; font-weight: 600; }
.otp-resend button { color: #1f65b7; font-weight: 700; }
.otp-back { color: #435874; font-weight: 600; }
.otp-back:hover { color: #2878df; }

@media (max-width: 760px) {
    body { align-content: start; padding: 24px 16px; }
    .theme-toggle { top: 12px; right: 12px; bottom: auto; min-width: 48px; min-height: 48px; justify-content: center; gap: 0; padding: 6px; }
    .theme-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .auth-shell { width: min(100%, 480px); gap: 20px; }
    .auth-shell > .brand { position: static; margin: 0 0 2px 4px; }
    .auth-layout { grid-template-columns: 1fr; gap: 20px; }
    .auth-card { padding: 27px 24px; }
    .brand-mark { width: 36px; }
    .brand { gap: 10px; }
}

@media (max-width: 430px) {
    body { padding: 18px 12px; }
    .auth-card { padding: 22px 18px; }
    .auth-card input[type="email"],
    .auth-card input[type="tel"],
    .auth-card input[type="password"],
    .auth-card input[type="text"] {
        min-height: 48px;
        font-size: 16px;
    }
    .auth-card .phone-country-wrap { min-height: 48px; }
    .auth-card--signup .auth-title { font-size: 25px; }
    .auth-card .submit-button { min-height: 46px; }
    .client-stats { grid-template-columns: 1fr; }
    .client-quick-actions { flex-direction: column; }
    .quick-action { width: 100%; }
}

@media (min-width: 761px) and (max-height: 950px) {
    body { padding-top: 20px; padding-bottom: 20px; }
    .auth-shell { gap: 14px; }
    .auth-layout { gap: 22px; }
    .auth-card { padding: 22px 30px; }
    .card-icon { width: 54px; height: 54px; margin-bottom: 10px; }
    .card-icon svg { width: 24px; height: 24px; }
    .auth-card .subtitle { margin: 5px 0 12px; }
    .auth-card .field { margin-top: 14px; }
    .auth-card label { margin-bottom: 6px; }
    .auth-card input[type="email"],
    .auth-card input[type="tel"],
    .auth-card input[type="password"],
    .auth-card input[type="text"] { min-height: 40px; }
    .auth-card .phone-country-wrap { min-height: 40px; }
    .auth-card .form-options { margin: 10px 0 12px; }
    .auth-card .terms { margin: 10px 0 !important; }
    .auth-card .submit-button { min-height: 42px; }
    .auth-card .switch-auth { margin-top: 12px; padding-top: 10px; }
}

@media (min-width: 761px) and (max-height: 840px) {
    body { padding-top: 10px; padding-bottom: 10px; }
    .auth-shell { gap: 10px; }
    .auth-shell > .brand { position: static; margin: 0 0 2px 4px; }
}

@media (min-width: 761px) and (max-height: 800px) {
    .auth-card--signup { padding: 10px 24px; }
    .auth-card--signup { margin-inline: auto; }
    .auth-card--signup .card-icon { width: 46px; height: 46px; margin-bottom: 8px; }
    .auth-card--signup .field { margin-top: 9px; }
    .auth-card--signup label { margin-bottom: 4px; }
    .auth-card--signup input[type="email"],
    .auth-card--signup input[type="tel"],
    .auth-card--signup input[type="password"],
    .auth-card--signup input[type="text"] { min-height: 36px; }
    .auth-card--signup .phone-country-wrap { min-height: 36px; }
    .auth-card--signup .terms { margin: 7px 0 !important; }
    .auth-card--signup .submit-button { min-height: 40px; }
    .auth-card--signup .switch-auth { margin-top: 8px; padding-top: 8px; }
}

.merchandise-shell {
    position: relative;
    z-index: 1;
    width: min(100% - 40px, 1080px);
    min-height: min(740px, calc(100vh - 40px));
    overflow: hidden;
    border: 1px solid rgba(24, 43, 70, 0.22);
    border-radius: 14px;
    background: #f5f7fb;
    box-shadow: 0 18px 52px rgba(8, 20, 39, 0.32);
    animation: arrive 520ms ease-out both;
}

.merchandise-header {
    position: relative;
    display: flex;
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 300px 14px 26px;
    border-bottom: 1px solid #e0e6ef;
    background: #fff;
}

.merchandise-gesture {
    position: relative;
    width: 132px;
    height: 88px;
    flex: 0 0 132px;
    margin: 0;
}

.gesture-cluster {
    position: relative;
    width: 132px;
    height: 88px;
    isolation: isolate;
}

.gesture-actions {
    position: absolute;
    inset: 0;
}

#merchandise-quick-menu .gesture-bubble {
    position: absolute;
    display: grid;
    width: 34px;
    aspect-ratio: 1;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(145deg, #f0f4f8, #dfe7f0);
    box-shadow: inset 4px 4px 8px rgba(255, 255, 255, 0.62), inset -4px -4px 8px rgba(176, 186, 198, 0.32), 6px 6px 12px rgba(168, 177, 190, 0.42);
    color: #4d5c6d;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translate(var(--closed-x), var(--closed-y)) scale(0.16) rotate(-35deg);
    transition: opacity 180ms ease, transform 420ms cubic-bezier(0.2, 0.9, 0.25, 1.2), box-shadow 180ms ease, visibility 0s linear 420ms;
}

.gesture-bubble:hover,
.gesture-bubble:focus-visible {
    box-shadow: inset 4px 4px 8px rgba(181, 190, 201, 0.38), inset -4px -4px 8px rgba(255, 255, 255, 0.9);
}

.gesture-bubble:focus-visible,
.gesture-center:focus-visible {
    outline: 3px solid rgba(72, 111, 161, 0.52);
    outline-offset: 4px;
}

.gesture-bubble svg {
    width: 17px;
    height: 17px;
}

#merchandise-quick-menu .bubble-catalogue { top: 2px; left: 46px; --closed-x: 47px; --closed-y: 3px; --action-delay: 30ms; }
#merchandise-quick-menu .bubble-requests { top: 2px; left: 2px; --closed-x: 91px; --closed-y: 3px; --action-delay: 90ms; }
#merchandise-quick-menu .bubble-documents { top: 46px; left: 46px; --closed-x: 47px; --closed-y: -41px; --action-delay: 150ms; }
#merchandise-quick-menu .bubble-profile { top: 46px; left: 2px; --closed-x: 91px; --closed-y: -41px; --action-delay: 210ms; }

#merchandise-quick-menu.is-open .gesture-bubble {
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0) scale(1) rotate(0);
    transition-delay: var(--action-delay), var(--action-delay), 0s, 0s;
}

#merchandise-quick-menu .gesture-center {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    display: grid;
    width: 44px;
    aspect-ratio: 1;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(145deg, #edf2f8, #dfe6f0);
    box-shadow: inset 5px 5px 10px rgba(255, 255, 255, 0.62), inset -6px -6px 12px rgba(176, 186, 198, 0.38), 6px 6px 12px rgba(168, 177, 190, 0.45);
    cursor: pointer;
    transform: none;
    transition: box-shadow 220ms ease, transform 220ms ease;
}

#merchandise-quick-menu .gesture-center:hover {
    transform: scale(1.04);
}

.gesture-center-mark {
    display: inline-block;
    color: #ef4a4a;
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
    transition: transform 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

#merchandise-quick-menu.is-open .gesture-center-mark {
    transform: rotate(45deg);
}

.merchandise-client-button {
    position: absolute;
    top: 17px;
    right: 26px;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid rgba(25, 150, 86, 0.42);
    border-radius: 999px;
    background: linear-gradient(135deg, #19b56a 0%, #1ec98d 100%);
    color: #ffffff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(25, 150, 86, 0.22);
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.merchandise-client-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
    box-shadow: 0 10px 20px rgba(25, 150, 86, 0.28);
}
.merchandise-client-button span { display: inline-block; margin-right: 5px; transition: transform 180ms ease; }
.merchandise-client-button:hover span { transform: translateX(-4px); }

.merchandise-content { padding: 58px clamp(24px, 6vw, 72px); }
.merchandise-content h1 { margin: 0; color: #1e2d45; font-size: clamp(30px, 4vw, 42px); line-height: 1.1; }
.merchandise-intro { max-width: 600px; margin: 14px 0 38px; color: #61718a; font-size: 15px; line-height: 1.6; }
.merchandise-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.merchandise-card {
    display: flex;
    min-height: 280px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px;
    border: 1px solid #dfe6f0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 25px rgba(33, 56, 89, 0.05);
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background-color 220ms ease;
}

.merchandise-card:hover {
    transform: translateY(-7px);
    border-color: #b9d2f2;
    box-shadow: 0 18px 32px rgba(33, 76, 132, 0.13);
}

.merchandise-card--accent { border-color: #c8daf2; background: linear-gradient(145deg, rgba(255, 255, 255, 0.78) 0%, rgba(238, 246, 255, 0.72) 100%); }
.merchandise-card-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 10px; background: #eaf1fc; color: #2878df; font-size: 12px; font-weight: 800; }
.merchandise-card-label { margin: 0 0 7px; color: #2878df; font-size: 11px; font-weight: 750; text-transform: uppercase; }
.merchandise-card h2 { margin: 0; color: #253750; font-size: 18px; }
.merchandise-card p:not(.merchandise-card-label) { margin: 9px 0 0; color: #738198; font-size: 13px; line-height: 1.5; }
.merchandise-card-link { padding: 0; border: 0; background: transparent; color: #205fae; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
.merchandise-card-link:hover { color: #163f78; }
.merchandise-status { min-height: 20px; display: inline-block; margin: 22px 0 0; padding: 5px 0; color: #2878df; font-size: 13px; font-weight: 650; transition: transform 220ms ease, color 220ms ease, text-shadow 220ms ease; }
.merchandise-status.status-show { animation: merchandise-status-arrive 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.merchandise-status:hover { transform: translateX(6px); color: #fff; text-shadow: 0 0 14px rgba(156, 245, 255, 0.78); }

.merchandise-footer { margin-top: 42px; }
.merchandise-footer-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 14px; background: linear-gradient(100deg, rgba(113, 26, 235, 0.86), rgba(82, 33, 222, 0.76)); box-shadow: 0 15px 28px rgba(10, 31, 111, 0.18); }
.merchandise-footer-cta strong { color: #fff; font-size: 15px; }
.merchandise-footer-cta button { min-height: 38px; padding: 0 15px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; background: rgba(8, 10, 33, 0.72); color: #fff; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; transition: transform 260ms ease; }
.merchandise-footer-main { display: flex; justify-content: space-between; gap: 28px; padding: 30px 4px 4px; }
.merchandise-footer-brand { display: flex; align-items: center; gap: 9px; color: #fff; font-size: 18px; }
.merchandise-footer-brand span { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 8px; font-family: Georgia, serif; }
.merchandise-footer-links { display: grid; grid-template-columns: repeat(3, minmax(100px, 1fr)); gap: 36px; }
.merchandise-footer-links div { display: grid; gap: 8px; }
.merchandise-footer-links small { color: rgba(233, 247, 255, 0.55); font-size: 10px; }
.merchandise-footer-links a, .merchandise-footer-links button { padding: 0; border: 0; background: transparent; color: rgba(255, 255, 255, 0.82); font: inherit; font-size: 12px; text-align: left; text-decoration: none; cursor: pointer; }
.merchandise-footer-links a:hover, .merchandise-footer-links button:hover { color: #9cf5ff; }
.merchandise-footer-cta { position: relative; overflow: hidden; transition: transform 260ms ease, box-shadow 260ms ease, background-position 500ms ease; background-size: 180% 100%; }
.merchandise-footer-cta::after { position: absolute; top: -80%; left: -35%; width: 28%; height: 260%; content: ""; background: rgba(255, 255, 255, 0.18); transform: rotate(22deg) translateX(-180%); transition: transform 650ms ease; pointer-events: none; }
.merchandise-footer-cta:hover { transform: translateY(-5px); background-position: 100% 0; box-shadow: 0 22px 38px rgba(10, 31, 111, 0.34); }
.merchandise-footer-cta:hover::after { transform: rotate(22deg) translateX(580%); }
.merchandise-footer-cta:hover button { transform: translateX(4px); }
.merchandise-footer-group-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.merchandise-footer-group-toggle > span { display: none; color: #9cf5ff; font-size: 20px; font-weight: 400; transition: transform 200ms ease; }
.merchandise-footer-group-panel { display: grid; gap: 8px; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    clip-path: inset(50%);
}

.catalogue-view {
    min-height: 100%;
    padding: clamp(18px, 3vw, 30px);
    border: 1px solid rgba(215, 226, 240, 0.9);
    border-radius: 16px;
    background: #f4f7fc;
    color: #263851;
    box-shadow: 10px 12px 28px rgba(13, 39, 88, 0.12), inset 0 1px rgba(255, 255, 255, 0.85);
}

.catalogue-header,
.catalogue-header-actions,
.catalogue-toolbar,
.catalogue-filters,
.catalogue-product-buy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.catalogue-header { align-items: flex-start; margin-bottom: 24px; }
.catalogue-header .merchandise-kicker { color: #6a83a6; }
.catalogue-header h1 { color: #263851; font-size: 30px; font-weight: 750; line-height: 1.15; }
.catalogue-header p:last-child { margin: 8px 0 0; color: #6f7f94; font-size: 13px; }
.catalogue-header-actions { flex: 0 0 auto; }
.catalogue-selection-toggle,
.catalogue-back-button {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid #dbe4ef;
    border-radius: 10px;
    background: #f4f7fc;
    color: #405571;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 4px 4px 9px rgba(164, 176, 193, 0.28), -4px -4px 9px rgba(255, 255, 255, 0.82);
}
.catalogue-selection-toggle { display: inline-flex; align-items: center; gap: 9px; }
.catalogue-selection-toggle span { display: grid; min-width: 22px; height: 22px; place-items: center; border-radius: 50%; background: #3569aa; color: #fff; font-size: 11px; }
.catalogue-selection-toggle:hover,
.catalogue-back-button:hover { color: #244c7e; box-shadow: inset 3px 3px 6px rgba(164, 176, 193, 0.25), inset -3px -3px 6px rgba(255, 255, 255, 0.8); }
.catalogue-selection-panel { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -8px 0 20px; padding: 14px 16px; border: 1px solid #dce5f0; border-radius: 11px; background: #edf2f8; color: #344a66; }
.catalogue-selection-panel strong { font-size: 13px; }
.catalogue-selection-panel p { margin: 4px 0 0; color: #738198; font-size: 12px; }
.catalogue-selection-panel ul { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 0; padding: 0; list-style: none; }
.catalogue-selection-panel li { padding: 4px 8px; border-radius: 7px; background: #fff; color: #49627f; font-size: 11px; }
.catalogue-clear-button { padding: 7px 9px; border: 0; border-radius: 7px; background: transparent; color: #8b4b4b; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.catalogue-toolbar { margin-bottom: 14px; }
.catalogue-search-wrap { display: flex; min-width: 0; min-height: 43px; flex: 1; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid #dce5f0; border-radius: 9px; background: #fff; color: #71819a; }
.catalogue-search-wrap svg { width: 18px; height: 18px; flex: 0 0 auto; }
.catalogue-search-wrap input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #293d58; font: inherit; font-size: 13px; }
.catalogue-search-wrap:focus-within { border-color: #7ba1d2; box-shadow: 0 0 0 3px rgba(70, 119, 181, 0.12); }
.catalogue-sort-wrap { display: flex; align-items: center; gap: 8px; color: #708096; font-size: 11px; white-space: nowrap; }
.catalogue-sort-control { position: relative; }
.catalogue-sort-trigger { display: flex; width: 154px; min-height: 40px; align-items: center; justify-content: space-between; gap: 10px; padding: 0 11px; border: 1px solid #dce5f0; border-radius: 9px; background: #fff; color: #354a65; font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.catalogue-sort-trigger:hover, .catalogue-sort-trigger[aria-expanded="true"] { border-color: #a8bfdc; background: #f5f8fc; }
.catalogue-sort-trigger:focus-visible, .catalogue-sort-option:focus-visible { outline: 2px solid #5d8fc5; outline-offset: 2px; }
.catalogue-sort-trigger svg { width: 16px; height: 16px; flex: 0 0 auto; transition: transform 180ms ease; }
.catalogue-sort-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.catalogue-sort-menu { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; display: grid; width: min(190px, calc(100vw - 32px)); gap: 3px; padding: 5px; border: 1px solid #dbe4ef; border-radius: 10px; background: #fff; box-shadow: 0 12px 28px rgba(29, 52, 82, 0.2); }
.catalogue-sort-menu[hidden] { display: none; }
.catalogue-sort-option { width: 100%; min-height: 38px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: #4c607b; font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.catalogue-sort-option:hover, .catalogue-sort-option[aria-checked="true"] { background: #eaf1fa; color: #2f5e95; }
.catalogue-filters { justify-content: flex-start; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.catalogue-filter { min-height: 32px; padding: 0 12px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #667991; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.catalogue-filter:hover,
.catalogue-filter.is-active { border-color: #d5e0ee; background: #e8eef7; color: #315c92; }
.catalogue-result-count { margin-left: auto; color: #71819a; font-size: 11px; }
.catalogue-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 15px; }
.catalogue-product { min-width: 0; overflow: hidden; border: 1px solid #e1e7ef; border-radius: 12px; background: #fff; box-shadow: 0 7px 18px rgba(37, 58, 86, 0.06); transition: transform 180ms ease, box-shadow 180ms ease; }
.catalogue-product:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(37, 58, 86, 0.12); }
.catalogue-product.is-selected { border-color: #8db4df; box-shadow: 0 0 0 2px rgba(79, 145, 213, 0.12), 0 9px 22px rgba(37, 89, 150, 0.14); }
.catalogue-product--arriving { animation: catalogue-result-enter 480ms cubic-bezier(0.2, 0.8, 0.25, 1) var(--catalogue-result-delay, 0ms) both; }
.catalogue-product[hidden] { display: none; }
.catalogue-product-visual { position: relative; width: 100%; max-width: 520px; max-height: 280px; margin-inline: auto; aspect-ratio: 1.55; overflow: hidden; background: #e5ebf2; }
.catalogue-product-visual img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 220ms ease; }
.catalogue-product:hover .catalogue-product-visual img { transform: scale(1.01); }
.catalogue-product-badge { position: absolute; top: 10px; left: 10px; padding: 5px 8px; border: 1px solid rgba(255, 255, 255, 0.65); border-radius: 7px; background: rgba(248, 250, 253, 0.91); color: #45617f; font-size: 9px; font-weight: 750; }
.catalogue-product-info { padding: 13px 14px 14px; }
.catalogue-product-category { margin: 0 0 5px; color: #6784a8; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.catalogue-product-info h2 { margin: 0; color: #263851; font-size: 14px; line-height: 1.3; }
.catalogue-product-description { min-height: 34px; margin: 6px 0 12px; color: #718096; font-size: 11px; line-height: 1.5; }
.catalogue-product-buy { padding-top: 10px; border-top: 1px solid #edf0f4; }
.catalogue-product-buy strong { color: #263851; font-size: 14px; }
.catalogue-product-buy button { min-height: 32px; padding: 0 10px; border: 1px solid #cfdaea; border-radius: 8px; background: #edf3fa; color: #315d93; font: inherit; font-size: 10px; font-weight: 750; cursor: pointer; }
.catalogue-product-buy button span { margin-left: 4px; font-size: 14px; }
.catalogue-product-buy button[aria-pressed="true"] { border-color: #3569aa; background: #3569aa; color: #fff; }
.catalogue-product-buy button.catalogue-add-pop { animation: catalogue-add-pop 460ms cubic-bezier(0.2, 0.8, 0.25, 1) both; }
.catalogue-empty { margin: 0; padding: 42px 20px; border: 1px dashed #cad5e3; border-radius: 11px; color: #6e7f94; font-size: 13px; text-align: center; }

.product-detail-backdrop { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(12, 25, 43, 0.7); backdrop-filter: blur(5px); }
.product-detail-dialog { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr); width: min(100%, 720px); max-height: min(82vh, 680px); overflow: auto; border: 1px solid rgba(220, 229, 240, 0.9); border-radius: 14px; background: #fff; box-shadow: 0 24px 70px rgba(8, 20, 39, 0.34); animation: product-detail-enter 280ms cubic-bezier(0.2, 0.8, 0.25, 1) both; }
.product-detail-close { position: absolute; z-index: 1; top: 12px; right: 12px; display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(40, 57, 78, 0.12); border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #344761; font: inherit; font-size: 23px; line-height: 1; cursor: pointer; box-shadow: 0 3px 12px rgba(18, 36, 62, 0.12); }
.product-detail-media { min-height: 300px; overflow: hidden; background: #e8edf3; }
.product-detail-media img { display: block; width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.product-detail-content { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: clamp(18px, 3vw, 30px); color: #283a53; }
.product-detail-category { margin: 0; color: #6784a8; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.product-detail-content h2 { margin: 0; color: #263851; font-size: 24px; line-height: 1.2; }
.product-detail-description { margin: 0; color: #718096; font-size: 14px; line-height: 1.65; }
.product-detail-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; padding-top: 18px; border-top: 1px solid #edf0f4; }
.product-detail-price { color: #263851; font-size: 22px; }
.product-detail-add { min-height: 42px; padding: 0 16px; border: 1px solid #315d93; border-radius: 9px; background: #3569aa; color: #fff; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.product-detail-add:hover { background: #2d5b96; }
.product-detail-add.product-detail-add-pop { animation: catalogue-add-pop 460ms cubic-bezier(0.2, 0.8, 0.25, 1) both; }

@keyframes product-detail-enter {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes checkout-backdrop-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes checkout-backdrop-exit {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes checkout-dialog-exit {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(10px) scale(0.985); }
}

@keyframes catalogue-result-enter {
    0% { opacity: 0.35; transform: translateY(16px) scale(0.97); box-shadow: 0 0 0 rgba(79, 145, 213, 0); }
    65% { opacity: 1; transform: translateY(-2px) scale(1.01); box-shadow: 0 0 0 2px rgba(79, 145, 213, 0.2), 0 15px 28px rgba(37, 89, 150, 0.16); }
    100% { opacity: 1; transform: translateY(0) scale(1); box-shadow: 0 7px 18px rgba(37, 58, 86, 0.06); }
}

@keyframes catalogue-add-pop {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(79, 145, 213, 0.35); }
    38% { transform: scale(1.12); box-shadow: 0 0 0 5px rgba(79, 145, 213, 0.2); }
    72% { transform: scale(0.96); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(79, 145, 213, 0); }
}

.merchandise-shell {
    display: grid;
    grid-template-columns: 218px minmax(0, 1fr);
    min-height: min(740px, calc(100vh - 40px));
    background: linear-gradient(135deg, rgba(28, 74, 188, 0.92), rgba(20, 132, 220, 0.72));
    border-color: rgba(207, 231, 255, 0.35);
}

.merchandise-sidebar-brand {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 88px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
}

.merchandise-sidebar {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 28px 14px 18px;
    border-right: 1px solid rgba(223, 241, 255, 0.2);
    background: rgba(35, 82, 177, 0.4);
    backdrop-filter: blur(18px);
}

.merchandise-logo { display: grid; width: 42px; height: 42px; flex: 0 0 42px; margin: 0; place-items: center; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 13px; color: #fff; font-family: Georgia, serif; font-size: 24px; font-weight: 700; box-shadow: 0 8px 20px rgba(3, 24, 86, 0.18); }
.merchandise-nav { display: grid; gap: 6px; }
.merchandise-nav-button {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    color: rgba(255, 255, 255, 0.78);
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.merchandise-nav-button span { width: 18px; color: #d7ecff; font-size: 17px; text-align: center; }
.merchandise-nav-button:hover, .merchandise-nav-button.is-active {
    border-color: rgba(255, 255, 255, 0.22);
    background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.12));
    color: #fff;
    box-shadow: 0 10px 20px rgba(7, 28, 76, 0.12);
    transform: translateX(2px);
}
.merchandise-nav-button:active { transform: translateX(2px) scale(0.99); }
.merchandise-user-card { display: flex; min-width: 0; align-items: center; gap: 10px; margin-top: 0; padding: 12px 10px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 13px; background: rgba(10, 47, 137, 0.25); color: #fff; }
.merchandise-user-avatar { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 2px solid #52e6f2; border-radius: 50%; background: #154da4; font-size: 11px; font-weight: 800; }
.merchandise-user-card strong, .merchandise-user-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.merchandise-user-card strong { max-width: 126px; font-size: 12px; }
.merchandise-user-card small { margin-top: 3px; color: rgba(255, 255, 255, 0.65); font-size: 10px; }

.merchandise-dashboard { min-width: 0; padding: 42px clamp(24px, 5vw, 52px); color: #fff; }
.merchandise-dashboard-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.merchandise-kicker { margin: 0 0 8px; color: #9cf5ff; font-size: 11px; font-weight: 800; letter-spacing: 0.13em; }
.merchandise-dashboard-header h1 { margin: 0; color: #fff; font-size: clamp(27px, 3vw, 38px); font-weight: 750; line-height: 1.15; }
.merchandise-dashboard-header > div > p:last-child { margin: 10px 0 0; color: rgba(233, 247, 255, 0.76); font-size: 13px; }
.merchandise-client-button {
    position: static;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.14), 0 8px 16px rgba(7, 28, 76, 0.08);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}
.merchandise-client-button:hover {
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.18), 0 14px 22px rgba(8, 34, 92, 0.14);
    transform: translateY(-1px);
}
.merchandise-client-button:active {
    transform: translateY(0) scale(0.98);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.12), 0 6px 14px rgba(8, 34, 92, 0.1);
}
.merchandise-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 34px 0 38px; }
.merchandise-stat {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding: 17px;
    border: 1px solid rgba(214, 239, 255, 0.25);
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.11));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.12), 0 12px 22px rgba(6, 31, 84, 0.08);
    backdrop-filter: blur(12px);
    transition: transform 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}
.merchandise-stat:hover {
    transform: translateY(-5px);
    background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.14));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.18), 0 18px 28px rgba(6, 31, 84, 0.12);
}
.merchandise-stat-icon { display: grid; width: 37px; height: 37px; flex: 0 0 auto; place-items: center; border-radius: 11px; background: linear-gradient(135deg, #1d6df2 0%, #2da4ff 100%); color: #fff; font-size: 17px; font-weight: 800; box-shadow: 0 7px 15px rgba(0, 37, 157, 0.22); }
.merchandise-stat strong, .merchandise-stat small { display: block; color: #fff; }
.merchandise-stat strong { font-size: 22px; line-height: 1; }
.merchandise-stat small { margin-top: 5px; color: rgba(236, 248, 255, 0.76); font-size: 11px; white-space: nowrap; }
.merchandise-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.merchandise-section-heading h2 { margin: 0; color: #fff; font-size: 18px; }
.merchandise-section-heading p, .merchandise-section-heading > span { margin: 5px 0 0; color: rgba(233, 247, 255, 0.68); font-size: 11px; }
.merchandise-grid { gap: 12px; }
.merchandise-card {
    min-height: 190px;
    gap: 12px;
    padding: 14px;
    border-color: rgba(221, 242, 255, 0.3);
    background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.12));
    box-shadow: 0 12px 25px rgba(5, 34, 116, 0.12);
    backdrop-filter: blur(13px);
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background-color 220ms ease;
}
.merchandise-card:hover {
    border-color: rgba(255, 255, 255, 0.65);
    background: linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.16));
    box-shadow: 0 20px 34px rgba(5, 34, 116, 0.2);
    transform: translateY(-4px);
}
.merchandise-card--accent { border-color: rgba(150, 245, 255, 0.42); background: rgba(102, 222, 245, 0.18); }
.merchandise-card-icon { width: 34px; height: 34px; background: linear-gradient(135deg, rgba(28, 102, 235, 0.84), rgba(45, 164, 255, 0.8)); color: #fff; }
.merchandise-card-label { color: #9cf5ff; }
.merchandise-card h2, .merchandise-card p:not(.merchandise-card-label) { color: #fff; }
.merchandise-card h2 { font-size: 16px; }
.merchandise-card p:not(.merchandise-card-label) { margin-top: 7px; color: rgba(236, 248, 255, 0.72); font-size: 12px; }
.merchandise-card-link { color: #a6f7ff; }
.merchandise-card-link:hover { color: #fff; }
.merchandise-status { color: #b5f8ff; }

.client-shell {
    position: relative;
    z-index: 1;
    width: min(100%, 1080px);
    min-height: min(740px, calc(100vh - 40px));
    overflow: hidden;
    border: 1px solid rgba(24, 43, 70, 0.22);
    border-radius: 14px;
    background: #f5f7fb;
    box-shadow: 0 18px 52px rgba(8, 20, 39, 0.32);
    animation: arrive 520ms ease-out both;
}

.client-header {
    display: flex;
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 26px;
    border-bottom: 1px solid #e0e6ef;
    background: #fff;
}

.client-brand,
.client-account {
    display: flex;
    align-items: center;
}

.client-brand { gap: 11px; color: #2878df; font-size: 17px; font-weight: 750; }
.client-brand small { display: block; margin-top: 2px; color: #61718a; font-size: 12px; font-weight: 500; }

.client-brand-mark {
    display: grid;
    width: 38px;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 11px;
    background: #eaf1fc;
    color: #2878df;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
}

.client-account { gap: 10px; color: #344761; font-size: 13px; font-weight: 650; }
.client-account-actions { display: grid; justify-items: stretch; gap: 6px; }
.client-account-actions .client-logout,
.client-account-actions .client-return { width: 100%; margin: 0; }

.client-avatar {
    display: grid;
    width: 34px;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 50%;
    background: #dce9fb;
    color: #245fae;
    font-size: 12px;
    font-weight: 750;
}

.client-logout {
    margin-left: 10px;
    padding: 8px 12px;
    border: 1px solid #d6deea;
    border-radius: 8px;
    background: #fff;
    color: #3d506c;
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
}

.client-logout:hover { border-color: #2878df; color: #205fae; }

.client-return {
    margin-left: 8px;
    padding: 8px 10px;
    border: 1px solid #d6deea;
    border-radius: 8px;
    background: #fff;
    color: #3d506c;
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, color 180ms ease;
}

.client-return span { display: inline-block; transition: transform 180ms ease; }
.client-return:hover { transform: translateX(-2px); border-color: #2878df; color: #205fae; }
.client-return:hover span { transform: translateX(-3px); }

.client-layout {
    display: grid;
    min-width: 0;
    min-height: 620px;
    grid-template-columns: 218px minmax(0, 1fr);
}

.client-sidebar {
    min-width: 0;
    padding: 26px 15px;
    border-right: 1px solid #e0e6ef;
    background: #fff;
}

.client-nav-label {
    margin: 0 10px 12px;
    color: #7b899d;
    font-size: 11px;
    font-weight: 750;
    text-transform: uppercase;
}

.client-nav { display: grid; gap: 5px; }

.client-nav-button {
    width: 100%;
    min-height: 42px;
    padding: 0 11px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #4a5d77;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: transform 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.client-nav-button:hover {
    background: #f4f7fc;
    color: #205fae;
    box-shadow: 0 8px 16px rgba(31, 86, 166, 0.08);
}
.client-nav-button:active {
    transform: translateY(1px) scale(0.99);
}
.client-nav-button.is-active {
    background: linear-gradient(135deg, #eaf1fc 0%, #edf6ff 100%);
    color: #205fae;
    font-weight: 750;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.8), 0 10px 18px rgba(31, 86, 166, 0.08);
}
.client-nav-icon { width: 20px; flex: 0 0 20px; color: currentColor; font-size: 17px; text-align: center; }
.client-nav-text { min-width: 0; overflow: hidden; white-space: nowrap; }

.client-content { min-width: 0; padding: 35px clamp(24px, 5vw, 54px); }
.client-panel { max-width: 760px; animation: field-arrive 320ms ease-out both; }
.client-eyebrow { margin: 0 0 8px; color: #2878df; font-size: 11px; font-weight: 750; }
.client-back-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 8px 12px;
    border: 1px solid #dfe7f4;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.8);
    color: #35507a;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.client-back-button:hover {
    transform: translateX(-2px);
    border-color: #bcd4f5;
    box-shadow: 0 8px 18px rgba(31, 86, 166, 0.08);
}

.client-back-button > span { font-size: 18px; line-height: 0.7; }

.client-panel h1 { margin: 0; color: #1e2d45; font-family: inherit; font-size: 28px; font-weight: 750; line-height: 1.2; }
.client-intro { margin: 9px 0 26px; color: #61718a; font-size: 14px; line-height: 1.55; }

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

.client-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 22px 0 28px;
}

.quick-action {
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid #dfe7f4;
    border-radius: 999px;
    background: #fff;
    color: #35507a;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.quick-action:hover {
    transform: translateY(-2px);
    border-color: #bcd4f5;
    box-shadow: 0 10px 20px rgba(31, 86, 166, 0.08);
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(241,247,255,0.95));
}
.quick-action:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 5px 12px rgba(31, 86, 166, 0.06);
}

.quick-action--primary {
    border-color: #b5d1ff;
    background: linear-gradient(135deg, #edf5ff 0%, #e6f3ff 100%);
    color: #1d4f9d;
}
.quick-action--primary:hover {
    background: linear-gradient(135deg, #f2f8ff 0%, #e4f0ff 100%);
}

.client-stat {
    display: flex;
    min-width: 0;
    min-height: 142px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    padding: 17px;
    border: 1px solid #dfe6f0;
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(247,250,255,0.78));
    backdrop-filter: blur(12px);
    color: #253750;
    text-align: left;
    box-shadow: 0 10px 20px rgba(19, 44, 77, 0.04);
}

button.client-stat { font: inherit; cursor: pointer; }
button.client-stat:hover {
    border-color: #9ebbe2;
    box-shadow: 0 12px 24px rgba(28, 76, 139, 0.1);
    transform: translateY(-2px);
}
button.client-stat:active { transform: translateY(0) scale(0.99); }
.client-stat-label { color: #65758c; font-size: 12px; font-weight: 650; line-height: 1.4; }
.client-stat strong { color: #1c2e49; font-size: 26px; font-weight: 750; line-height: 1; }
.client-stat-note { color: #2878df; font-size: 11px; font-weight: 650; line-height: 1.4; }
.client-stat--status {
    justify-content: center;
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.client-stat--status:hover {
    transform: translateY(-6px);
    border-color: #b9d2f2;
    box-shadow: 0 16px 28px rgba(33, 76, 132, 0.12);
}
.client-stat .client-account-status { color: #237b55; font-size: 18px; }

.client-activity {
    margin-top: 29px;
    border-top: 1px solid #dfe6f0;
}

.client-section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-top: 20px;
}

.client-section-heading h2 { margin: 0; color: #253750; font-size: 16px; font-weight: 750; }
.client-section-heading span { color: #8491a4; font-size: 12px; }
.client-empty { margin: 20px 0 0; color: #738198; font-size: 13px; }
.client-empty--large { margin-top: 32px; padding: 24px 0; border-top: 1px solid #dfe6f0; color: #738198; }

.client-profile-form { max-width: 580px; margin: 28px 0 0; }
.profile-field { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 16px; padding: 13px 0; border-top: 1px solid #dfe6f0; }
.profile-field label { color: #65758c; font-size: 13px; font-weight: 650; }
.profile-field input { width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid #d7e1ee; border-radius: 7px; background: #fff; color: #253750; font: inherit; font-size: 13px; outline: none; transition: border-color 180ms ease, box-shadow 180ms ease; }
.profile-field input:focus { border-color: #6aa4e8; box-shadow: 0 0 0 3px rgba(54, 126, 216, 0.12); }
.profile-field input:disabled { background: #f4f6fa; color: #7d8999; cursor: not-allowed; }
.profile-field select { width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid #d7e1ee; border-radius: 7px; background: #fff; color: #253750; font: inherit; font-size: 13px; outline: none; }
.profile-field select:focus { border-color: #6aa4e8; box-shadow: 0 0 0 3px rgba(54, 126, 216, 0.12); }
.profile-field select:disabled { background: #f4f6fa; color: #7d8999; cursor: not-allowed; }
.client-profile-actions button:disabled { cursor: not-allowed; opacity: 0.58; transform: none; box-shadow: none; }
.profile-password-section { margin-top: 25px; border-top: 1px solid #dfe6f0; }
.profile-password-heading { padding: 20px 0 4px; }
.profile-password-heading h2 { margin: 0; color: #253750; font-size: 16px; font-weight: 750; }
.profile-password-heading p { margin: 5px 0 10px; color: #738198; font-size: 12px; }
.profile-forgot-password { justify-self: start; margin: 2px 0 12px; padding: 0; border: 0; background: transparent; color: #2878df; font: inherit; font-size: 12px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.client-profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-top: 18px; }
.profile-status { margin: 0; color: #237b55; font-size: 12px; font-weight: 650; }

@media (max-width: 760px) {
    * { -webkit-tap-highlight-color: transparent; }
    button, .merchandise-client-button, .quick-action, .client-nav-button, .merchandise-nav-button, .catalogue-product-buy button { -webkit-tap-highlight-color: transparent; }
    .product-detail-dialog { grid-template-columns: 1fr; width: min(100%, 430px); max-height: 82vh; }
    .product-detail-media { min-height: 0; max-height: 32vh; aspect-ratio: 1.6; }
    .product-detail-media img { min-height: 0; }
    .product-detail-content { gap: 9px; padding: 20px; }
    .product-detail-content h2 { font-size: 21px; }
    .product-detail-description { font-size: 12px; }
    .product-detail-footer { margin-top: 8px; padding-top: 12px; }
    .merchandise-shell { width: 100%; min-height: calc(100vh - 48px); border-radius: 10px; }
    .merchandise-shell { grid-template-columns: 1fr; }
    .merchandise-sidebar { padding: 14px 12px 10px; border-right: 0; border-bottom: 1px solid rgba(223, 241, 255, 0.2); }
    .merchandise-sidebar-brand { min-height: 88px; margin: 0 0 12px 4px; }
    .merchandise-logo { width: 36px; height: 36px; flex-basis: 36px; }
    .merchandise-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; overflow: visible; }
    .merchandise-nav-button { width: 100%; min-width: 0; min-height: 46px; justify-content: center; gap: 4px; padding: 5px 6px; font-size: 10px; line-height: 1.15; text-align: center; white-space: normal; }
    .merchandise-nav-button:active, .client-nav-button:active, .quick-action:active, .client-stat:active, .merchandise-client-button:active, .catalogue-product-buy button:active { transform: translateY(0) scale(0.98); }
    .merchandise-user-card { display: none; }
    .merchandise-dashboard { padding: 30px 18px 34px; }
    .catalogue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .catalogue-product { min-width: 0; border-radius: 9px; }
    .catalogue-product-visual { aspect-ratio: 1.25; }
    .catalogue-product-badge { top: 5px; left: 5px; max-width: calc(100% - 10px); overflow: hidden; padding: 3px 5px; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
    .catalogue-product-info { min-width: 0; padding: 10px; }
    .catalogue-product-category { margin-bottom: 4px; font-size: 9px; }
    .catalogue-product-info h2 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: 13px; line-height: 1.3; }
    .catalogue-product-description { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; min-height: 0; margin: 6px 0 10px; font-size: 11px; line-height: 1.4; }
    .catalogue-product-buy { align-items: center; flex-direction: row; gap: 8px; padding-top: 9px; }
    .catalogue-product-buy strong { font-size: 12px; white-space: nowrap; }
    .catalogue-product-buy button { width: auto; min-width: 74px; min-height: 40px; padding: 0 8px; font-size: 11px; white-space: nowrap; }
    .catalogue-product-buy button span { margin-left: 3px; font-size: 13px; }
    .catalogue-header { flex-direction: column; }
    .catalogue-header-actions { width: 100%; justify-content: space-between; }
    .catalogue-toolbar { align-items: stretch; flex-direction: column; gap: 10px; }
    .catalogue-sort-wrap { justify-content: space-between; }
    .merchandise-dashboard-header { flex-direction: column; }
    .merchandise-stats { grid-template-columns: 1fr; margin: 26px 0 30px; }
    .merchandise-stat { min-height: 70px; }
    .merchandise-footer { margin-top: 34px; }
    .merchandise-footer-main { flex-direction: column; }
    .merchandise-footer-links { gap: 20px; }
    .merchandise-footer-links { grid-template-columns: 1fr; }
    .merchandise-footer-group { padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.18); }
    .merchandise-footer-group-toggle > span { display: block; }
    .merchandise-footer-links .merchandise-footer-group-panel { display: none; padding-top: 12px; }
    .merchandise-footer-links .merchandise-footer-group.is-open .merchandise-footer-group-panel { display: grid; }
    .merchandise-footer-group.is-open .merchandise-footer-group-toggle > span { transform: rotate(45deg); }
    .merchandise-header { min-height: 68px; padding: 12px 16px; }
    .merchandise-client-button { padding: 0 12px; font-size: 12px; }
    .merchandise-content { padding: 38px 18px 32px; }
    .merchandise-dashboard { padding: 24px 16px 30px; }
    .merchandise-grid { grid-template-columns: 1fr; gap: 12px; }
    .merchandise-card { display: grid; min-width: 0; min-height: 0; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: 8px 12px; padding: 16px; }
    .merchandise-card > div:nth-child(2) { width: 100%; min-width: 0; }
    .merchandise-card-icon { width: 36px; height: 36px; border-radius: 9px; font-size: 11px; }
    .merchandise-card-label { margin-bottom: 4px; font-size: 10px; }
    .merchandise-card h2 { font-size: 16px; line-height: 1.3; }
    .merchandise-card p:not(.merchandise-card-label) { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; }
    .merchandise-card-link { grid-column: 2; justify-self: start; max-width: 100%; min-height: 40px; font-size: 12px; line-height: 1.35; text-align: left; white-space: normal; overflow-wrap: anywhere; }
    .client-shell { width: 100%; min-height: calc(100vh - 48px); }
    .client-header { min-height: 68px; padding: 12px 16px; }
    .client-layout { min-height: 0; grid-template-columns: 1fr; }
    .client-sidebar { min-width: 0; padding: 12px 12px 0; border-right: 0; }
    .client-nav-label { display: none; }
    .client-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; max-width: 100%; gap: 6px; overflow: visible; padding-bottom: 0; }
    .client-nav-button { width: 100%; min-height: 48px; padding: 0 10px; border-radius: 10px; text-align: left; white-space: normal; }
    .client-nav-text { white-space: normal; }
    .client-content { padding: 24px 18px 32px; }
    .client-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .client-stat { min-height: 126px; padding: 13px; border-radius: 11px; }
    .quick-action { min-height: 46px; border-radius: 10px; }
    .client-stat--status { display: grid; grid-column: 1 / -1; min-height: 90px; grid-template-columns: minmax(0, 1fr) auto; align-content: center; gap: 4px 12px; padding: 14px; }
    .client-stat--status strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
    .client-stat--status .client-stat-note { grid-column: 1; }
    .profile-field input, .profile-field select { min-height: 48px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .gesture-bubble,
    .gesture-center,
    .gesture-center-mark {
        transition-duration: 0.01ms;
    }

    .catalogue-product--arriving { animation: none; }
    .catalogue-product-buy button.catalogue-add-pop { animation: none; }
    .product-detail-add.product-detail-add-pop { animation: none; }
}

@media (max-width: 430px) {
    .product-detail-backdrop { padding: 12px; }
    .product-detail-dialog { max-height: 86vh; }
    .product-detail-media { max-height: 30vh; }
    .product-detail-content { padding: 16px; }
    .product-detail-content h2 { font-size: 20px; }
    .merchandise-header { align-items: flex-start; flex-direction: column; gap: 12px; padding-bottom: 14px; }
    .merchandise-client-button { position: static; align-self: flex-end; width: auto; }
    .merchandise-content h1 { font-size: 30px; }
    .merchandise-dashboard-header h1 { font-size: 29px; }
    .catalogue-view { padding: 15px; }
    .catalogue-view { padding: 12px; }
    .catalogue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .catalogue-product-info { padding: 9px; }
    .catalogue-product-info h2 { font-size: 12px; }
    .catalogue-product-buy strong { font-size: 11px; }
    .catalogue-product-buy button { min-width: 68px; padding-inline: 6px; font-size: 10px; }
    .catalogue-filters { gap: 4px; }
    .catalogue-filter { min-height: 34px; padding-inline: 8px; font-size: 10px; }
    .catalogue-result-count { width: 100%; margin-left: 0; text-align: right; }
    .catalogue-selection-panel { align-items: flex-start; flex-direction: column; }
    .merchandise-section-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
    .merchandise-footer-cta { align-items: flex-start; flex-direction: column; }
    .merchandise-footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .client-header { gap: 10px; }
    .client-brand { gap: 8px; font-size: 15px; }
    .client-brand-mark { width: 34px; }
    .client-account { gap: 7px; }
    .client-account-name { display: none; }
    .client-return { margin-left: 0; padding: 8px 9px; }
    .client-logout { margin-left: 0; padding: 8px 9px; }
    .client-panel h1 { font-size: 24px; }
    .profile-field { grid-template-columns: 1fr; gap: 5px; }
}

.logout-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(12, 25, 43, 0.56);
}

.logout-dialog {
    width: min(100%, 420px);
    padding: 26px;
    border: 1px solid #dce4ef;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 70px rgba(8, 20, 39, 0.3);
}

.logout-dialog h2 { margin: 0; color: #1e2d45; font-size: 21px; font-weight: 750; }
.logout-dialog > p:not(.client-eyebrow) { margin: 10px 0 22px; color: #61718a; font-size: 13px; line-height: 1.5; }
.logout-dialog label { display: block; margin-bottom: 7px; color: #344761; font-size: 13px; font-weight: 700; }
.logout-password-wrap { position: relative; }
.logout-eye-toggle { color: #61738d; }
.logout-eye-toggle:hover { color: #2878df; }

.logout-dialog input {
    width: 100%;
    min-height: 46px;
    padding: 0 13px;
    border: 1px solid #9eafc4;
    border-radius: 8px;
    outline: none;
    background: #f6f8fc;
    color: #22314b;
    font: inherit;
    font-size: 14px;
}

.logout-dialog input:focus { border-color: #2878df; box-shadow: 0 0 0 3px rgba(40, 120, 223, 0.16); }
.logout-dialog .logout-password-wrap input { padding-right: 48px; }
.logout-status { min-height: 19px; margin: 7px 0 0; color: #ad3a32; font-size: 12px; }
.logout-status.logout-error-show { animation: logout-error-show 360ms ease-out both; }
.logout-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 10px; }

.logout-cancel,
.logout-confirm {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid #d6deea;
    border-radius: 8px;
    background: #fff;
    color: #435874;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.logout-confirm { border-color: #06254e; background: #04234b; color: #fff; }
.logout-cancel:hover { background: #f4f7fc; }
.logout-confirm:hover { border-color: #205fae; background: #205fae; }

.brand-mark { animation: none; }
.auth-shell .brand-mark svg,
.auth-shell .card-icon,
.auth-shell .card-icon svg { animation: none; }
.brand-mark:hover { transform: translateY(-2px); }
.brand-mark:hover svg { animation-play-state: paused; }

body.dark-theme {
    color: #eef6ff;
    background-color: #080b14;
    background-image: radial-gradient(circle at 18% 12%, rgba(42, 91, 204, 0.22), transparent 34%), linear-gradient(135deg, #080b14, #11182a);
}

body.dark-theme .theme-toggle { border-color: rgba(174, 209, 255, 0.26); background: rgba(21, 28, 45, 0.86); color: #e8f3ff; }
body.dark-theme .auth-card,
body.dark-theme .otp-card,
body.dark-theme .forgot-card { border-color: rgba(153, 190, 255, 0.24); background: rgba(18, 26, 43, 0.78); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.34); }
body.dark-theme .auth-title,
body.dark-theme .otp-heading { color: #f1f7ff; }
body.dark-theme .subtitle,
body.dark-theme .otp-copy { color: #aabbd3; }
body.dark-theme .auth-card label,
body.dark-theme .forgot-card label { color: #c8d8ed; }
body.dark-theme .auth-card input[type="email"],
body.dark-theme .auth-card input[type="tel"],
body.dark-theme .auth-card input[type="password"],
body.dark-theme .auth-card input[type="text"],
body.dark-theme .forgot-card input,
body.dark-theme .otp-fields .otp-digit { border-color: rgba(157, 190, 238, 0.3); background: rgba(7, 14, 27, 0.62); color: #f1f7ff; }
body.dark-theme .auth-card input::placeholder,
body.dark-theme .forgot-card input::placeholder { color: #8499b6; }
body.dark-theme .auth-card .phone-country-wrap { border-color: #3b5354; background: #18272c; }
body.dark-theme .auth-card .phone-country-code { color: #d4e5df; }
body.dark-theme .auth-card .phone-country-wrap::after { border-color: #8ea8a4; }
body.dark-theme .auth-card .submit-button,
body.dark-theme .forgot-card .submit-button,
body.dark-theme .otp-verify { border-color: rgba(137, 209, 255, 0.35); background: rgba(45, 115, 208, 0.34); color: #d9f5ff; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22); }
body.dark-theme .auth-card .switch-auth { border-top-color: rgba(172, 205, 245, 0.16); color: #aabbd3; }
body.dark-theme .auth-card .status-message--error { border-color: rgba(234, 165, 92, 0.2); border-left-color: #eaa55c; background: rgba(234, 165, 92, 0.08); box-shadow: none; color: #ffe1b8; }
body.dark-theme .auth-card .status-message--error:hover { border-color: rgba(234, 165, 92, 0.38); background: rgba(234, 165, 92, 0.13); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16); }
body.dark-theme .auth-card .status-message--error::before { background: rgba(234, 165, 92, 0.16); color: #ffd093; }
body.dark-theme .remember { color: #bdcde2 !important; }
body.dark-theme .logout-dialog { border-color: rgba(153, 190, 255, 0.25); background: rgba(18, 26, 43, 0.92); }
body.dark-theme .logout-dialog h2 { color: #f1f7ff; }
body.dark-theme .logout-dialog > p:not(.client-eyebrow),
body.dark-theme .logout-dialog label { color: #bdcde2; }
body.dark-theme .logout-dialog input { border-color: rgba(157, 190, 238, 0.3); background: rgba(7, 14, 27, 0.68); color: #f1f7ff; }
body.dark-theme .logout-cancel { border-color: rgba(157, 190, 238, 0.3); background: rgba(255, 255, 255, 0.08); color: #dbeaff; }

/* Glassmorphism client space */
.client-shell {
    border-color: rgba(207, 231, 255, 0.35);
    background: linear-gradient(135deg, rgba(28, 74, 188, 0.94), rgba(20, 132, 220, 0.74));
}

.client-header {
    border-bottom-color: rgba(223, 241, 255, 0.2);
    background: rgba(25, 72, 169, 0.42);
    backdrop-filter: blur(18px);
}

.client-brand { color: #fff; }
.client-brand small { color: rgba(233, 247, 255, 0.7); }
.client-brand-mark { border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.16); color: #fff; }
.client-account { color: #fff; }
.client-avatar { border: 2px solid #52e6f2; background: #154da4; color: #fff; }
.client-logout, .client-return { border-color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.12); color: #fff; }
.client-logout:hover, .client-return:hover { border-color: rgba(255, 255, 255, 0.72); background: rgba(255, 255, 255, 0.22); color: #fff; }

.client-sidebar {
    border-right-color: rgba(223, 241, 255, 0.2);
    background: rgba(35, 82, 177, 0.4);
    backdrop-filter: blur(18px);
}

.client-nav-label { color: rgba(233, 247, 255, 0.62); }
.client-nav-button { color: rgba(255, 255, 255, 0.78); }
.client-nav-button:hover, .client-nav-button.is-active { background: rgba(255, 255, 255, 0.18); color: #fff; }
.client-content { background: transparent; }
.client-panel h1 { color: #fff; }
.client-eyebrow { color: #9cf5ff; }
.client-intro { color: rgba(233, 247, 255, 0.76); }

.client-stat {
    border-color: rgba(214, 239, 255, 0.25);
    background: rgba(255, 255, 255, 0.13);
    color: #fff;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
}

button.client-stat:hover, .client-stat--status:hover { border-color: rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0.21); box-shadow: 0 16px 28px rgba(5, 34, 116, 0.2); }
.client-stat-label, .client-stat-note { color: rgba(236, 248, 255, 0.76); }
.client-stat strong { color: #fff; }
.client-stat .client-account-status { color: #9cf5c3; }
.client-quick-actions { margin-top: 22px; }
.quick-action { border-color: rgba(214, 239, 255, 0.28); background: rgba(255, 255, 255, 0.13); color: #fff; backdrop-filter: blur(12px); }
.quick-action:hover { border-color: rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0.22); }
.quick-action--primary { border-color: rgba(156, 245, 255, 0.55); background: rgba(79, 213, 239, 0.22); color: #d9fcff; }
.client-activity { border-top-color: rgba(223, 241, 255, 0.22); }
.client-section-heading h2 { color: #fff; }
.client-section-heading span, .client-empty { color: rgba(233, 247, 255, 0.68); }
.client-empty--large, .client-profile-form { border-color: rgba(223, 241, 255, 0.22); }
.profile-field { border-top-color: rgba(223, 241, 255, 0.22); }
.profile-field label { color: rgba(236, 248, 255, 0.78); }
.profile-field input, .profile-field select { border-color: rgba(214, 239, 255, 0.3); background: rgba(255, 255, 255, 0.14); color: #fff; }
.profile-field input::placeholder { color: rgba(236, 248, 255, 0.58); }
.profile-field input:focus, .profile-field select:focus { border-color: #9cf5ff; background: rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 3px rgba(156, 245, 255, 0.13); }
.profile-password-heading h2 { color: #fff; }
.profile-password-heading p, .profile-status { color: rgba(233, 247, 255, 0.7); }
.client-back-button { border-color: rgba(214, 239, 255, 0.3); background: rgba(255, 255, 255, 0.13); color: #fff; }
.client-back-button:hover { border-color: rgba(255, 255, 255, 0.68); background: rgba(255, 255, 255, 0.22); }

body.app-fullscreen {
    display: block;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0;
    overflow: hidden;
}

body.app-fullscreen::before {
    position: fixed;
    z-index: 0;
    inset: 0;
    display: block;
    background: linear-gradient(135deg, rgba(28, 74, 188, 0.94), rgba(20, 132, 220, 0.78));
    content: "";
    pointer-events: none;
}

body.app-fullscreen .merchandise-shell,
body.app-fullscreen .client-shell {
    position: fixed;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.app-fullscreen .merchandise-shell {
    animation: none;
}

body.app-fullscreen .catalogue-view:not([hidden]) {
    position: fixed;
    z-index: 25;
    top: 0;
    right: 0;
    left: 218px;
    width: calc(100% - 218px);
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    padding: clamp(16px, 3vw, 30px);
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

body.app-fullscreen .merchandise-sidebar {
    position: sticky;
    z-index: 26;
    top: 0;
    align-self: start;
    height: 100vh;
    height: 100dvh;
}

@media (max-width: 760px) {
    body.app-fullscreen .theme-toggle { display: none; }

    body.app-fullscreen .catalogue-view:not([hidden]) {
        top: 182px;
        right: 0;
        left: 0;
        width: 100%;
        height: calc(100vh - 182px);
        height: calc(100dvh - 182px);
        min-height: calc(100vh - 182px);
        min-height: calc(100dvh - 182px);
    }

    body.app-fullscreen .merchandise-sidebar {
        width: 100%;
        height: 182px;
    }
}

body.app-fullscreen .merchandise-user-card {
    margin-top: auto;
}

body.app-fullscreen .client-layout {
    min-height: calc(100vh - 76px);
    min-height: calc(100dvh - 76px);
}

@media (min-width: 761px) {
    body:not(.app-fullscreen) {
        background-color: #e8eef0;
        background-image:
            linear-gradient(rgba(25, 57, 68, 0.035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(25, 57, 68, 0.035) 1px, transparent 1px),
            linear-gradient(135deg, #edf2f3 0%, #dfe9e9 52%, #e8edf2 100%);
        background-size: 36px 36px, 36px 36px, cover;
    }

    body.dark-theme:not(.app-fullscreen) {
        background-color: #101820;
        background-image: linear-gradient(135deg, #101820, #1c2932 55%, #142c30);
    }

    .auth-shell { width: min(100%, 620px); padding-top: 56px; }
    .auth-shell > .brand { top: 0; }
    .auth-card {
        width: min(100%, 560px);
        padding: 40px clamp(34px, 4vw, 52px);
        border-color: rgba(35, 71, 84, 0.14);
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.97);
        box-shadow: 0 28px 72px rgba(24, 52, 66, 0.16);
        backdrop-filter: blur(18px);
    }
    .auth-title { color: #183746; font-size: 32px; }
    .auth-card .subtitle { color: #60747e; font-size: 15px; }
    .auth-card label { color: #2d4752; }
    .brand { color: #1e5960; }
    .brand small { color: #4d6871; text-shadow: none; }
    .brand-mark { background: #fff; box-shadow: 0 8px 20px rgba(20, 57, 70, 0.13); }

    .forgot-card,
    .otp-card {
        border-color: rgba(35, 71, 84, 0.14);
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.97);
        box-shadow: 0 28px 72px rgba(24, 52, 66, 0.16);
        backdrop-filter: blur(18px);
    }
    .otp-heading { color: #183746; }
    .otp-copy, .otp-resend { color: #60747e; }
    .otp-back { color: #405c66; }

    body.app-fullscreen::before {
        background: linear-gradient(135deg, #f1f5f3 0%, #e9f0f0 52%, #eef1f3 100%);
    }

    body.app-fullscreen .merchandise-sidebar {
        border-right-color: rgba(255, 255, 255, 0.12);
        background: linear-gradient(180deg, #193f48 0%, #205c58 100%);
    }
    body.app-fullscreen .merchandise-dashboard {
        padding: 48px clamp(36px, 4.2vw, 72px);
        color: #203b45;
    }
    body.app-fullscreen .merchandise-dashboard-header h1,
    body.app-fullscreen .merchandise-section-heading h2,
    body.app-fullscreen .merchandise-card h2 { color: #1b3541; }
    body.app-fullscreen .merchandise-kicker,
    body.app-fullscreen .merchandise-card-label { color: #267c72; }
    body.app-fullscreen .merchandise-dashboard-header > div > p:last-child,
    body.app-fullscreen .merchandise-section-heading p,
    body.app-fullscreen .merchandise-section-heading > span { color: #697d84; }
    body.app-fullscreen .merchandise-stats { gap: 16px; margin: 34px 0 42px; }
    body.app-fullscreen .merchandise-stat {
        min-height: 82px;
        border-color: #d9e4e2;
        background: rgba(255, 255, 255, 0.86);
        box-shadow: 0 8px 22px rgba(34, 67, 70, 0.06);
        backdrop-filter: none;
    }
    body.app-fullscreen .merchandise-stat strong { color: #1d3944; }
    body.app-fullscreen .merchandise-stat small { color: #687c83; }
    body.app-fullscreen .merchandise-stat-icon { background: #277d70; box-shadow: none; }
    body.app-fullscreen .merchandise-stat:nth-child(2) .merchandise-stat-icon { background: #c17a3d; }
    body.app-fullscreen .merchandise-stat:nth-child(3) .merchandise-stat-icon { background: #4b7890; }
    body.app-fullscreen .merchandise-card {
        min-height: 210px;
        border-color: #d9e4e2;
        background: rgba(255, 255, 255, 0.88);
        box-shadow: 0 10px 24px rgba(34, 67, 70, 0.06);
        backdrop-filter: none;
    }
    body.app-fullscreen .merchandise-card:hover {
        border-color: #9dc8bd;
        background: #fff;
        box-shadow: 0 16px 28px rgba(34, 67, 70, 0.11);
    }
    body.app-fullscreen .merchandise-card--accent { border-color: #e5c7a9; background: #fff9f1; }
    body.app-fullscreen .merchandise-card-icon { background: #dceee8; color: #22675f; }
    body.app-fullscreen .merchandise-card p:not(.merchandise-card-label) { color: #657a80; }
    body.app-fullscreen .merchandise-card-link { color: #1b7168; }
    body.app-fullscreen .merchandise-card-link:hover { color: #174e4a; }
    body.app-fullscreen .merchandise-footer-cta {
        border-color: rgba(255, 255, 255, 0.3);
        background: linear-gradient(110deg, #1e5b60, #347e70);
        box-shadow: 0 12px 26px rgba(31, 81, 78, 0.16);
    }
    body.app-fullscreen .merchandise-footer-cta button { border-color: #fff; background: #fff; color: #245c5b; }
    body.app-fullscreen .merchandise-footer-brand { color: #21464b; }
    body.app-fullscreen .merchandise-footer-brand span { border-color: #abc5c1; }
    body.app-fullscreen .merchandise-footer-links small { color: #71878a; }
    body.app-fullscreen .merchandise-footer-links a,
    body.app-fullscreen .merchandise-footer-links button { color: #49666a; }
    body.app-fullscreen .merchandise-footer-links a:hover,
    body.app-fullscreen .merchandise-footer-links button:hover { color: #1b7168; }

    body.app-fullscreen .catalogue-view:not([hidden]) {
        padding: 36px clamp(32px, 4vw, 58px);
        background: #f7f9f8;
    }
    .catalogue-header h1 { color: #1b3541; font-size: 34px; }
    .catalogue-header p:last-child { color: #63777e; font-size: 14px; }
    .catalogue-search-wrap { min-height: 48px; }
    .catalogue-search-wrap input { font-size: 14px; }
    .catalogue-sort-trigger { width: 180px; min-height: 44px; font-size: 13px; }
    .catalogue-filters { gap: 10px; margin-bottom: 20px; }
    .catalogue-filter { min-height: 38px; padding-inline: 15px; font-size: 12px; }
    .catalogue-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
    .catalogue-product { display: flex; flex-direction: column; border-color: #dfe7e5; box-shadow: 0 8px 22px rgba(37, 58, 66, 0.06); }
    .catalogue-product-info { display: flex; flex: 1; flex-direction: column; padding: 16px; }
    .catalogue-product-visual { aspect-ratio: 1.5; }
    .catalogue-product-category { font-size: 10px; }
    .catalogue-product-info h2 { color: #1d3944; font-size: 16px; }
    .catalogue-product-description { min-height: 38px; margin: 8px 0 14px; color: #687c83; font-size: 12px; }
    .catalogue-product-buy { margin-top: auto; padding-top: 12px; }
    .catalogue-product-buy strong { color: #1d3944; font-size: 15px; }
    .catalogue-product-buy button { min-height: 40px; padding-inline: 13px; border-color: #bed7cf; background: #e7f2ed; color: #22675f; font-size: 12px; }
    .catalogue-product-buy button[aria-pressed="true"] { border-color: #267c72; background: #267c72; color: #fff; }

    body.app-fullscreen .client-header {
        min-height: 76px;
        border-bottom-color: #dbe5e3;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: none;
    }
    body.app-fullscreen .client-brand,
    body.app-fullscreen .client-account { color: #21444b; }
    body.app-fullscreen .client-brand small { color: #718589; }
    body.app-fullscreen .client-brand-mark { border: 0; background: #e2efeb; color: #236e66; }
    body.app-fullscreen .client-avatar { border-color: #d6e8e1; background: #e7f2ed; color: #236e66; }
    body.app-fullscreen .client-account-actions { display: flex; align-items: center; gap: 8px; }
    body.app-fullscreen .client-account-actions .client-logout,
    body.app-fullscreen .client-account-actions .client-return { width: auto; margin: 0; }
    body.app-fullscreen .client-logout,
    body.app-fullscreen .client-return { border-color: #d7e3e0; background: #f7faf9; color: #36585a; }
    body.app-fullscreen .client-logout:hover,
    body.app-fullscreen .client-return:hover { border-color: #9dc8bd; background: #e7f2ed; color: #1e625d; }
    body.app-fullscreen .client-layout { background: #f2f6f5; }
    body.app-fullscreen .client-sidebar {
        border-right-color: rgba(255, 255, 255, 0.12);
        background: linear-gradient(180deg, #193f48 0%, #205c58 100%);
        backdrop-filter: none;
    }
    body.app-fullscreen .client-nav-label { color: rgba(236, 247, 243, 0.64); }
    body.app-fullscreen .client-nav-button { color: rgba(255, 255, 255, 0.82); }
    body.app-fullscreen .client-nav-button:hover,
    body.app-fullscreen .client-nav-button.is-active { background: rgba(255, 255, 255, 0.16); color: #fff; }
    body.app-fullscreen .client-content { padding: 42px clamp(38px, 5vw, 78px); color: #203b45; }
    body.app-fullscreen .client-panel { max-width: 1180px; }
    body.app-fullscreen .client-panel h1,
    body.app-fullscreen .client-section-heading h2 { color: #1b3541; }
    body.app-fullscreen .client-eyebrow { color: #267c72; }
    body.app-fullscreen .client-intro,
    body.app-fullscreen .client-section-heading span,
    body.app-fullscreen .client-empty { color: #63777e; }
    body.app-fullscreen .client-stat {
        border-color: #d9e4e2;
        background: #fff;
        color: #203b45;
        box-shadow: 0 8px 22px rgba(34, 67, 70, 0.05);
        backdrop-filter: none;
    }
    body.app-fullscreen .client-stat-label { color: #61777c; }
    body.app-fullscreen .client-stat strong { color: #1d3944; }
    body.app-fullscreen .client-stat-note { color: #267c72; }
    body.app-fullscreen .client-stat .client-account-status { color: #277a54; }
    body.app-fullscreen .client-activity { border-top-color: #d9e4e2; }
    body.app-fullscreen .quick-action { border-color: #d2e1dc; background: #fff; color: #36585a; backdrop-filter: none; }
    body.app-fullscreen .quick-action--primary { border-color: #267c72; background: #267c72; color: #fff; }
    body.app-fullscreen .quick-action:hover { border-color: #9dc8bd; background: #e7f2ed; }
    body.app-fullscreen .quick-action--primary:hover { background: #1e625d; color: #fff; }
    body.app-fullscreen .profile-field { border-top-color: #d9e4e2; }
    body.app-fullscreen .profile-field label { color: #49656a; }
    body.app-fullscreen .profile-field input,
    body.app-fullscreen .profile-field select { border-color: #d1dfdc; background: #fff; color: #203b45; }
    body.app-fullscreen .profile-field input::placeholder { color: #839393; }
    body.app-fullscreen .profile-field input:focus,
    body.app-fullscreen .profile-field select:focus { border-color: #479687; background: #fff; box-shadow: 0 0 0 3px rgba(39, 124, 114, 0.14); }
    body.app-fullscreen .profile-password-heading h2 { color: #1d3944; }
    body.app-fullscreen .profile-password-heading p,
    body.app-fullscreen .profile-status { color: #657a80; }
    body.app-fullscreen .profile-forgot-password { color: #1b7168; }
    body.app-fullscreen .client-back-button { border-color: #d2e1dc; background: #fff; color: #36585a; }
}

@media (max-width: 760px) {
    body:not(.app-fullscreen) {
        background-color: #e8eef0;
        background-image:
            linear-gradient(rgba(25, 57, 68, 0.035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(25, 57, 68, 0.035) 1px, transparent 1px),
            linear-gradient(145deg, #edf2f3 0%, #dfe9e9 55%, #e8edf2 100%);
        background-size: 32px 32px, 32px 32px, cover;
        background-attachment: scroll;
    }

    body.dark-theme:not(.app-fullscreen) {
        background-color: #101820;
        background-image: linear-gradient(145deg, #101820, #1c2932 55%, #142c30);
    }

    .brand { color: #1e5960; }
    .auth-shell > .brand { max-width: calc(100% - 64px); }
    .brand small { color: #4d6871; text-shadow: none; }
    .brand-mark { background: #fff; box-shadow: 0 7px 18px rgba(20, 57, 70, 0.13); }
    .auth-card,
    .forgot-card,
    .otp-card {
        border-color: rgba(35, 71, 84, 0.15);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.97);
        box-shadow: 0 18px 42px rgba(24, 52, 66, 0.13);
        backdrop-filter: blur(12px);
    }
    .auth-title,
    .otp-heading { color: #183746; }
    .auth-card .subtitle,
    .otp-copy { color: #60747e; }
    .auth-card label,
    .forgot-card label { color: #2d4752; }
    .auth-card .eyebrow,
    .forgot-card .eyebrow { color: #267c72; }
    .auth-card a,
    .auth-card .text-button,
    .field-heading a { color: #1b7168; }
    .auth-card input[type="email"],
    .auth-card input[type="tel"],
    .auth-card input[type="password"],
    .auth-card input[type="text"],
    .forgot-card input {
        border-color: #d1dfdc;
        background: #f7faf9;
        color: #203b45;
    }
    .auth-card input::placeholder,
    .forgot-card input::placeholder { color: #839393; }
    .auth-card input:focus,
    .forgot-card input:focus { border-color: #479687; background: #fff; box-shadow: 0 0 0 3px rgba(39, 124, 114, 0.14); }
    .auth-card .phone-country-wrap { border-color: #d1dfdc; background: #f7faf9; }
    .auth-card .phone-country-wrap:focus-within { border-color: #479687; background: #fff; box-shadow: 0 0 0 3px rgba(39, 124, 114, 0.12); }
    .auth-card .phone-country-code { color: #203b45; }
    .auth-card .phone-country-wrap::after { border-color: #718589; }
    .auth-card .submit-button,
    .forgot-card .submit-button,
    .otp-verify {
        border: 1px solid #267c72;
        background: #267c72;
        color: #fff;
        box-shadow: 0 8px 18px rgba(31, 105, 94, 0.16);
    }
    .auth-card .submit-button:hover,
    .forgot-card .submit-button:hover,
    .otp-verify:hover { background: #1e625d; }
    .auth-card .switch-auth { border-top-color: #dce6e3; color: #60747e; }
    .auth-card #focus-signup { border-color: #c5ddd5; background: #edf5f1; box-shadow: none; color: #1b7168; }
    .remember { color: #5d7278 !important; }
    .remember input { accent-color: #267c72; }
    .eye-toggle { color: #587276; }
    .eye-toggle:hover,
    .eye-toggle.is-password-visible { color: #267c72; }
    .otp-copy,
    .otp-resend { color: #60747e; }
    .otp-fields .otp-digit { border-color: #d1dfdc; background: #f7faf9; color: #203b45; }
    .otp-digit:focus { border-color: #479687; background: #fff; box-shadow: 0 0 0 3px rgba(39, 124, 114, 0.14); }
    .otp-back { color: #36585a; }

    body.dark-theme:not(.app-fullscreen) .auth-card,
    body.dark-theme:not(.app-fullscreen) .forgot-card,
    body.dark-theme:not(.app-fullscreen) .otp-card {
        border-color: rgba(157, 190, 178, 0.2);
        background: rgba(22, 34, 41, 0.97);
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
    }
    body.dark-theme:not(.app-fullscreen) .auth-title,
    body.dark-theme:not(.app-fullscreen) .otp-heading { color: #e9f2ef; }
    body.dark-theme:not(.app-fullscreen) .auth-card .subtitle,
    body.dark-theme:not(.app-fullscreen) .auth-card label,
    body.dark-theme:not(.app-fullscreen) .otp-copy { color: #b5c8c3; }
    body.dark-theme:not(.app-fullscreen) .auth-card .switch-auth { border-top-color: rgba(191, 216, 206, 0.16); color: #b5c8c3; }
    body.dark-theme:not(.app-fullscreen) .auth-card input[type="email"],
    body.dark-theme:not(.app-fullscreen) .auth-card input[type="tel"],
    body.dark-theme:not(.app-fullscreen) .auth-card input[type="password"],
    body.dark-theme:not(.app-fullscreen) .auth-card input[type="text"],
    body.dark-theme:not(.app-fullscreen) .forgot-card input,
    body.dark-theme:not(.app-fullscreen) .otp-fields .otp-digit { border-color: #3b5354; background: #18272c; color: #e9f2ef; }
    body.dark-theme:not(.app-fullscreen) .auth-card input::placeholder,
    body.dark-theme:not(.app-fullscreen) .forgot-card input::placeholder { color: #8ea8a4; }
    body.dark-theme:not(.app-fullscreen) .auth-card .phone-country-wrap { border-color: #3b5354; background: #18272c; }
    body.dark-theme:not(.app-fullscreen) .auth-card .phone-country-code { color: #d4e5df; }
    body.dark-theme:not(.app-fullscreen) .auth-card .phone-country-wrap::after { border-color: #8ea8a4; }

    body.app-fullscreen::before { background: linear-gradient(145deg, #edf3f1 0%, #e3ece8 58%, #edf0ed 100%); }
    body.app-fullscreen .merchandise-sidebar {
        border-bottom-color: #d4e1dc;
        background: linear-gradient(155deg, #193f48 0%, #205c58 100%);
    }
    body.app-fullscreen .merchandise-nav-button { color: rgba(255, 255, 255, 0.82); }
    body.app-fullscreen .merchandise-nav-button span { color: #d2e8dc; }
    body.app-fullscreen .merchandise-nav-button:hover,
    body.app-fullscreen .merchandise-nav-button.is-active { border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.16); color: #fff; }
    body.app-fullscreen .merchandise-logo { border-color: rgba(255, 255, 255, 0.34); box-shadow: 0 6px 16px rgba(6, 34, 35, 0.18); }
    body.app-fullscreen .merchandise-dashboard { padding: 24px 16px 32px; color: #203b45; }
    body.app-fullscreen .merchandise-dashboard-header h1,
    body.app-fullscreen .merchandise-section-heading h2,
    body.app-fullscreen .merchandise-card h2 { color: #1b3541; }
    body.app-fullscreen .merchandise-kicker,
    body.app-fullscreen .merchandise-card-label { color: #267c72; }
    body.app-fullscreen .merchandise-dashboard-header > div > p:last-child,
    body.app-fullscreen .merchandise-section-heading p,
    body.app-fullscreen .merchandise-section-heading > span { color: #697d84; }
    body.app-fullscreen .merchandise-client-button {
        border-color: rgba(21, 126, 74, 0.38);
        background: linear-gradient(135deg, #17a864 0%, #2bbd8a 100%);
        color: #ffffff;
        box-shadow: 0 8px 18px rgba(21, 126, 74, 0.18);
    }
    body.app-fullscreen .merchandise-stats { gap: 10px; margin: 22px 0 28px; }
    body.app-fullscreen .merchandise-stat { border-color: #d9e4e2; background: #fff; box-shadow: 0 6px 16px rgba(34, 67, 70, 0.05); backdrop-filter: none; }
    body.app-fullscreen .merchandise-stat strong { color: #1d3944; }
    body.app-fullscreen .merchandise-stat small { color: #687c83; }
    body.app-fullscreen .merchandise-stat-icon { background: #277d70; box-shadow: none; }
    body.app-fullscreen .merchandise-stat:nth-child(2) .merchandise-stat-icon { background: #c17a3d; }
    body.app-fullscreen .merchandise-stat:nth-child(3) .merchandise-stat-icon { background: #4b7890; }
    body.app-fullscreen .merchandise-card { border-color: #d9e4e2; background: #fff; box-shadow: 0 7px 18px rgba(34, 67, 70, 0.05); backdrop-filter: none; }
    body.app-fullscreen .merchandise-card--accent { border-color: #e5c7a9; background: #fff9f1; }
    body.app-fullscreen .merchandise-card-icon { background: #dceee8; color: #22675f; }
    body.app-fullscreen .merchandise-card p:not(.merchandise-card-label) { color: #657a80; }
    body.app-fullscreen .merchandise-card-link { color: #1b7168; }
    body.app-fullscreen .merchandise-footer-cta { border-color: rgba(255, 255, 255, 0.3); background: linear-gradient(110deg, #1e5b60, #347e70); box-shadow: 0 10px 22px rgba(31, 81, 78, 0.13); }
    body.app-fullscreen .merchandise-footer-cta button { border-color: #fff; background: #fff; color: #245c5b; }
    body.app-fullscreen .merchandise-footer-brand { color: #21464b; }
    body.app-fullscreen .merchandise-footer-brand span { border-color: #abc5c1; }
    body.app-fullscreen .merchandise-footer-links small { color: #71878a; }
    body.app-fullscreen .merchandise-footer-links a,
    body.app-fullscreen .merchandise-footer-links button { color: #49666a; }
    body.app-fullscreen .merchandise-footer-group { border-top-color: #d9e4e2; }
    body.app-fullscreen .merchandise-footer-group-toggle > span { color: #267c72; }

    body.app-fullscreen .catalogue-view:not([hidden]) { padding: 14px; border-color: #dfe7e5; background: #f7f9f8; box-shadow: none; }
    body.app-fullscreen .catalogue-header h1 { color: #1b3541; }
    body.app-fullscreen .catalogue-header p:last-child { color: #63777e; }
    body.app-fullscreen .catalogue-selection-toggle,
    body.app-fullscreen .catalogue-back-button { border-color: #d4e1dc; background: #fff; color: #36585a; box-shadow: 0 3px 8px rgba(34, 67, 70, 0.06); }
    body.app-fullscreen .catalogue-selection-toggle span { background: #267c72; }
    body.app-fullscreen .catalogue-search-wrap { border-color: #d6e2de; background: #fff; }
    body.app-fullscreen .catalogue-search-wrap input { color: #293d45; }
    body.app-fullscreen .catalogue-sort-wrap { color: #687c83; }
    body.app-fullscreen .catalogue-sort-trigger { border-color: #d6e2de; color: #36585a; }
    body.app-fullscreen .catalogue-filter { color: #5f7478; }
    body.app-fullscreen .catalogue-filter:hover,
    body.app-fullscreen .catalogue-filter.is-active { border-color: #c8ddd5; background: #e7f2ed; color: #22675f; }
    body.app-fullscreen .catalogue-result-count { color: #687c83; }
    body.app-fullscreen .catalogue-product { border-color: #dfe7e5; background: #fff; box-shadow: 0 6px 16px rgba(37, 58, 66, 0.06); }
    body.app-fullscreen .catalogue-product-info h2,
    body.app-fullscreen .catalogue-product-buy strong { color: #1d3944; }
    body.app-fullscreen .catalogue-product-description { color: #687c83; }
    body.app-fullscreen .catalogue-product-buy { border-top-color: #e6ece9; }
    body.app-fullscreen .catalogue-product-buy button { border-color: #bed7cf; background: #e7f2ed; color: #22675f; }
    body.app-fullscreen .catalogue-product-buy button[aria-pressed="true"] { border-color: #267c72; background: #267c72; color: #fff; }

    body.app-fullscreen .client-header { border-bottom-color: #dbe5e3; background: rgba(255, 255, 255, 0.97); backdrop-filter: none; }
    body.app-fullscreen .client-brand,
    body.app-fullscreen .client-account { color: #21444b; }
    body.app-fullscreen .client-brand small { color: #718589; }
    body.app-fullscreen .client-brand-mark { border: 0; background: #e2efeb; color: #236e66; }
    body.app-fullscreen .client-avatar { border-color: #d6e8e1; background: #e7f2ed; color: #236e66; }
    body.app-fullscreen .client-account-actions { display: flex; align-items: center; gap: 6px; }
    body.app-fullscreen .client-account-actions .client-logout,
    body.app-fullscreen .client-account-actions .client-return { width: auto; margin: 0; }
    body.app-fullscreen .client-logout,
    body.app-fullscreen .client-return { border-color: #d7e3e0; background: #f7faf9; color: #36585a; }
    body.app-fullscreen .client-layout { background: #f2f6f5; }
    body.app-fullscreen .client-sidebar { border-bottom-color: #d4e1dc; background: linear-gradient(155deg, #193f48 0%, #205c58 100%); backdrop-filter: none; }
    body.app-fullscreen .client-nav-button { color: rgba(255, 255, 255, 0.84); }
    body.app-fullscreen .client-nav-button:hover,
    body.app-fullscreen .client-nav-button.is-active { background: rgba(255, 255, 255, 0.16); color: #fff; }
    body.app-fullscreen .client-content { padding: 24px 16px 32px; color: #203b45; }
    body.app-fullscreen .client-panel h1,
    body.app-fullscreen .client-section-heading h2 { color: #1b3541; }
    body.app-fullscreen .client-eyebrow { color: #267c72; }
    body.app-fullscreen .client-intro,
    body.app-fullscreen .client-section-heading span,
    body.app-fullscreen .client-empty { color: #63777e; }
    body.app-fullscreen .client-stat { border-color: #d9e4e2; background: #fff; color: #203b45; box-shadow: 0 6px 16px rgba(34, 67, 70, 0.05); backdrop-filter: none; }
    body.app-fullscreen .client-stat-label { color: #61777c; }
    body.app-fullscreen .client-stat strong { color: #1d3944; }
    body.app-fullscreen .client-stat-note { color: #267c72; }
    body.app-fullscreen .client-stat .client-account-status { color: #277a54; }
    body.app-fullscreen .client-activity { border-top-color: #d9e4e2; }
    body.app-fullscreen .quick-action { border-color: #d2e1dc; background: #fff; color: #36585a; backdrop-filter: none; }
    body.app-fullscreen .quick-action--primary { border-color: #267c72; background: #267c72; color: #fff; }
    body.app-fullscreen .profile-field { border-top-color: #d9e4e2; }
    body.app-fullscreen .profile-field label { color: #49656a; }
    body.app-fullscreen .profile-field input,
    body.app-fullscreen .profile-field select { border-color: #d1dfdc; background: #fff; color: #203b45; }
    body.app-fullscreen .profile-field input::placeholder { color: #839393; }
    body.app-fullscreen .profile-password-heading h2 { color: #1d3944; }
    body.app-fullscreen .profile-password-heading p,
    body.app-fullscreen .profile-status { color: #657a80; }
    body.app-fullscreen .client-back-button { border-color: #d2e1dc; background: #fff; color: #36585a; }
    body.app-fullscreen .logout-dialog { border-color: #d7e3e0; background: #fff; }
    body.app-fullscreen .logout-dialog h2 { color: #1d3944; }
    body.app-fullscreen .logout-dialog > p:not(.client-eyebrow),
    body.app-fullscreen .logout-dialog label { color: #60747e; }
    body.app-fullscreen .logout-dialog input { border-color: #d1dfdc; background: #f7faf9; color: #203b45; }
    body.app-fullscreen .logout-cancel { border-color: #d1dfdc; background: #f7faf9; color: #36585a; }
}

@media (max-width: 430px) {
    body.app-fullscreen .client-header { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding: 10px 12px; }
    body.app-fullscreen .client-brand { gap: 7px; font-size: 14px; }
    body.app-fullscreen .client-brand-mark { width: 32px; }
    body.app-fullscreen .client-account { justify-content: flex-end; gap: 6px; }
    body.app-fullscreen .client-avatar { display: none; }
    body.app-fullscreen .client-account-actions { gap: 5px; }
    body.app-fullscreen .client-account-actions .client-logout,
    body.app-fullscreen .client-account-actions .client-return { min-height: 40px; padding: 0 8px; font-size: 11px; }
    body.app-fullscreen .client-content { padding: 20px 14px 28px; }
}

body.dark-theme.app-fullscreen::before { background: linear-gradient(145deg, #11191d 0%, #172326 55%, #14201e 100%); }
body.dark-theme.app-fullscreen .merchandise-sidebar,
body.dark-theme.app-fullscreen .client-sidebar { border-color: #2b4142; background: linear-gradient(165deg, #14252a 0%, #18332f 100%); }
body.dark-theme.app-fullscreen .merchandise-dashboard,
body.dark-theme.app-fullscreen .client-content { color: #dce8e4; }
body.dark-theme.app-fullscreen .merchandise-dashboard-header h1,
body.dark-theme.app-fullscreen .merchandise-section-heading h2,
body.dark-theme.app-fullscreen .merchandise-card h2,
body.dark-theme.app-fullscreen .client-panel h1,
body.dark-theme.app-fullscreen .client-section-heading h2 { color: #edf5f1; }
body.dark-theme.app-fullscreen .merchandise-kicker,
body.dark-theme.app-fullscreen .merchandise-card-label,
body.dark-theme.app-fullscreen .client-eyebrow { color: #9ed8c5; }
body.dark-theme.app-fullscreen .merchandise-dashboard-header > div > p:last-child,
body.dark-theme.app-fullscreen .merchandise-section-heading p,
body.dark-theme.app-fullscreen .merchandise-section-heading > span,
body.dark-theme.app-fullscreen .merchandise-card p:not(.merchandise-card-label),
body.dark-theme.app-fullscreen .client-intro,
body.dark-theme.app-fullscreen .client-section-heading span,
body.dark-theme.app-fullscreen .client-empty { color: #a9bbb7; }
body.dark-theme.app-fullscreen .merchandise-client-button { border-color: #45645e; background: #223a36; color: #bde3d2; }
body.dark-theme.app-fullscreen .merchandise-stat,
body.dark-theme.app-fullscreen .merchandise-card,
body.dark-theme.app-fullscreen .client-stat {
    border-color: #34494b;
    background: #1b292d;
    color: #e1ebe7;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}
body.dark-theme.app-fullscreen .merchandise-card--accent { border-color: #67503d; background: #2a2622; }
body.dark-theme.app-fullscreen .merchandise-stat strong,
body.dark-theme.app-fullscreen .client-stat strong { color: #edf5f1; }
body.dark-theme.app-fullscreen .merchandise-stat small,
body.dark-theme.app-fullscreen .client-stat-label { color: #b4c4c0; }
body.dark-theme.app-fullscreen .client-stat-note { color: #9ed8c5; }
body.dark-theme.app-fullscreen .client-stat .client-account-status { color: #9de0b8; }
body.dark-theme.app-fullscreen .merchandise-card-icon { background: #29433e; color: #b9e2d0; }
body.dark-theme.app-fullscreen .merchandise-card-link { color: #a8dfcd; }
body.dark-theme.app-fullscreen .merchandise-card-link:hover { color: #d3f4e5; }
body.dark-theme.app-fullscreen .merchandise-footer-cta { border-color: #45645e; background: linear-gradient(110deg, #1d4543, #28554d); }
body.dark-theme.app-fullscreen .merchandise-footer-cta button { border-color: #4b6b64; background: #1a292d; color: #c4e8d8; }
body.dark-theme.app-fullscreen .merchandise-footer-brand { color: #dce8e4; }
body.dark-theme.app-fullscreen .merchandise-footer-brand span { border-color: #49625e; }
body.dark-theme.app-fullscreen .merchandise-footer-links small { color: #8fa7a3; }
body.dark-theme.app-fullscreen .merchandise-footer-links a,
body.dark-theme.app-fullscreen .merchandise-footer-links button { color: #c1d0cb; }
body.dark-theme.app-fullscreen .merchandise-footer-group { border-top-color: #34494b; }
body.dark-theme.app-fullscreen .merchandise-footer-group-toggle > span { color: #9ed8c5; }

body.dark-theme.app-fullscreen .catalogue-view:not([hidden]) { border-color: #2b3b3e; background: #121c20; color: #dce8e4; }
body.dark-theme.app-fullscreen .catalogue-header h1,
body.dark-theme.app-fullscreen .catalogue-product-info h2,
body.dark-theme.app-fullscreen .catalogue-product-buy strong { color: #edf5f1; }
body.dark-theme.app-fullscreen .catalogue-header p:last-child,
body.dark-theme.app-fullscreen .catalogue-product-description,
body.dark-theme.app-fullscreen .catalogue-result-count { color: #a9bbb7; }
body.dark-theme.app-fullscreen .catalogue-selection-toggle,
body.dark-theme.app-fullscreen .catalogue-back-button,
body.dark-theme.app-fullscreen .catalogue-sort-trigger {
    border-color: #35494b;
    background: #1b292d;
    color: #d3e2dc;
    box-shadow: none;
}
body.dark-theme.app-fullscreen .catalogue-selection-toggle:hover,
body.dark-theme.app-fullscreen .catalogue-back-button:hover,
body.dark-theme.app-fullscreen .catalogue-sort-trigger:hover { border-color: #54746a; background: #223531; color: #e8f5ef; }
body.dark-theme.app-fullscreen .catalogue-selection-toggle span { background: #347d6d; }
body.dark-theme.app-fullscreen .catalogue-selection-panel { border-color: #35494b; background: #1b292d; color: #dce8e4; }
body.dark-theme.app-fullscreen .catalogue-selection-panel p { color: #a9bbb7; }
body.dark-theme.app-fullscreen .catalogue-selection-panel li { background: #26373a; color: #d3e2dc; }
body.dark-theme.app-fullscreen .catalogue-search-wrap { border-color: #35494b; background: #1b292d; color: #9aafaa; }
body.dark-theme.app-fullscreen .catalogue-search-wrap input { color: #e2ece8; }
body.dark-theme.app-fullscreen .catalogue-sort-wrap,
body.dark-theme.app-fullscreen .catalogue-filter { color: #a9bbb7; }
body.dark-theme.app-fullscreen .catalogue-filter:hover,
body.dark-theme.app-fullscreen .catalogue-filter.is-active { border-color: #46665d; background: #223a34; color: #bce5d2; }
body.dark-theme.app-fullscreen .catalogue-sort-menu { border-color: #35494b; background: #1b292d; }
body.dark-theme.app-fullscreen .catalogue-sort-option { color: #d3e2dc; }
body.dark-theme.app-fullscreen .catalogue-sort-option:hover,
body.dark-theme.app-fullscreen .catalogue-sort-option[aria-checked="true"] { background: #29433c; color: #d7f0e4; }
body.dark-theme.app-fullscreen .catalogue-product { border-color: #34494b; background: #1b292d; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); }
body.dark-theme.app-fullscreen .catalogue-product-badge { border-color: #48615b; background: rgba(28, 45, 43, 0.94); color: #d0e4da; }
body.dark-theme.app-fullscreen .catalogue-product-buy { border-top-color: #34494b; }
body.dark-theme.app-fullscreen .catalogue-product-buy button { border-color: #45645e; background: #243b35; color: #c2e6d6; }
body.dark-theme.app-fullscreen .catalogue-product-buy button[aria-pressed="true"] { border-color: #347d6d; background: #347d6d; color: #fff; }
body.dark-theme.app-fullscreen .catalogue-empty { border-color: #405456; color: #a9bbb7; }
body.dark-theme.app-fullscreen .client-header { border-bottom-color: #2c3d40; background: #172326; }
body.dark-theme.app-fullscreen .client-brand,
body.dark-theme.app-fullscreen .client-account { color: #dce8e4; }
body.dark-theme.app-fullscreen .client-brand small { color: #9aafaa; }
body.dark-theme.app-fullscreen .client-brand-mark,
body.dark-theme.app-fullscreen .client-avatar { border-color: #405d55; background: #253c36; color: #c0e5d4; }
body.dark-theme.app-fullscreen .client-layout { background: #111a1e; }
body.dark-theme.app-fullscreen .client-nav-button:hover,
body.dark-theme.app-fullscreen .client-nav-button.is-active { background: rgba(181, 226, 204, 0.15); color: #e8f5ef; }
body.dark-theme.app-fullscreen .client-logout,
body.dark-theme.app-fullscreen .client-return,
body.dark-theme.app-fullscreen .client-back-button { border-color: #35494b; background: #202f32; color: #c6d8d2; }
body.dark-theme.app-fullscreen .client-logout:hover,
body.dark-theme.app-fullscreen .client-return:hover,
body.dark-theme.app-fullscreen .client-back-button:hover { border-color: #54746a; background: #293d38; color: #e4f2eb; }
body.dark-theme.app-fullscreen .client-activity { border-top-color: #34494b; }
body.dark-theme.app-fullscreen .quick-action { border-color: #35494b; background: #202f32; color: #d0dfda; }
body.dark-theme.app-fullscreen .quick-action--primary { border-color: #347d6d; background: #347d6d; color: #fff; }
body.dark-theme.app-fullscreen .quick-action:hover { border-color: #54746a; background: #293d38; }
body.dark-theme.app-fullscreen .quick-action--primary:hover { background: #286557; }
body.dark-theme.app-fullscreen .profile-field { border-top-color: #34494b; }
body.dark-theme.app-fullscreen .profile-field label { color: #b8cac4; }
body.dark-theme.app-fullscreen .profile-field input,
body.dark-theme.app-fullscreen .profile-field select { border-color: #3a5051; background: #1b292d; color: #e2ece8; }
body.dark-theme.app-fullscreen .profile-field input::placeholder { color: #8ea8a4; }
body.dark-theme.app-fullscreen .profile-field input:focus,
body.dark-theme.app-fullscreen .profile-field select:focus { border-color: #6eb7a0; background: #1e302f; box-shadow: 0 0 0 3px rgba(110, 183, 160, 0.16); }
body.dark-theme.app-fullscreen .profile-password-heading h2 { color: #e7f1ec; }
body.dark-theme.app-fullscreen .profile-password-heading p,
body.dark-theme.app-fullscreen .profile-status { color: #a9bbb7; }

body.dark-theme.app-fullscreen .product-detail-dialog,
body.dark-theme.app-fullscreen .logout-dialog { border-color: #35494b; background: #1b292d; color: #dce8e4; }
body.dark-theme.app-fullscreen .product-detail-content h2,
body.dark-theme.app-fullscreen .product-detail-price,
body.dark-theme.app-fullscreen .logout-dialog h2 { color: #edf5f1; }
body.dark-theme.app-fullscreen .product-detail-description,
body.dark-theme.app-fullscreen .logout-dialog > p:not(.client-eyebrow),
body.dark-theme.app-fullscreen .logout-dialog label { color: #a9bbb7; }
body.dark-theme.app-fullscreen .product-detail-media { background: #25373a; }
body.dark-theme.app-fullscreen .product-detail-footer { border-top-color: #35494b; }
body.dark-theme.app-fullscreen .product-detail-close { border-color: #405456; background: #25373a; color: #e2ece8; }
body.dark-theme.app-fullscreen .product-detail-add { border-color: #347d6d; background: #347d6d; color: #fff; }
body.dark-theme.app-fullscreen .logout-dialog input { border-color: #3a5051; background: #111c20; color: #e2ece8; }
body.dark-theme.app-fullscreen .logout-cancel { border-color: #405456; background: #25373a; color: #d4e4de; }

body:not(.dark-theme):not(.app-fullscreen) {
    background-color: #dfe8e5;
    background-image:
        linear-gradient(rgba(31, 67, 63, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31, 67, 63, 0.035) 1px, transparent 1px),
        linear-gradient(135deg, #e6edea 0%, #dbe5e1 55%, #e3eae7 100%);
}

body:not(.dark-theme) .auth-card,
body:not(.dark-theme) .forgot-card,
body:not(.dark-theme) .otp-card {
    border-color: #cdd9d4;
    background: #edf2ef;
    box-shadow: 0 24px 60px rgba(32, 62, 62, 0.14);
}
body:not(.dark-theme) .card-icon { border-color: #d4dfda; background: #e2ebe6; box-shadow: 4px 5px 12px rgba(47, 73, 71, 0.1); }
body:not(.dark-theme) .auth-card input[type="email"],
body:not(.dark-theme) .auth-card input[type="tel"],
body:not(.dark-theme) .auth-card input[type="password"],
body:not(.dark-theme) .auth-card input[type="text"],
body:not(.dark-theme) .forgot-card input,
body:not(.dark-theme) .otp-fields .otp-digit { border-color: #c8d5cf; background: #e7efeb; }
body:not(.dark-theme) .auth-card input:focus,
body:not(.dark-theme) .forgot-card input:focus { background: #f1f5f2; }
body:not(.dark-theme) .auth-card .phone-country-wrap { border-color: #c8d5cf; background: #e7efeb; }
body:not(.dark-theme) .auth-card .phone-country-wrap:focus-within { background: #f1f5f2; }
body:not(.dark-theme) .auth-card .submit-button,
body:not(.dark-theme) .forgot-card .submit-button,
body:not(.dark-theme) .otp-verify { border-color: #bdcec6; background: #e0e9e4; color: #315f56; box-shadow: 0 6px 14px rgba(41, 79, 69, 0.1); }
body:not(.dark-theme) .theme-toggle { border-color: #cbd8d2; background: rgba(237, 242, 239, 0.96); }
body:not(.dark-theme) .brand-mark { background: #e9efec; box-shadow: 0 7px 18px rgba(32, 62, 62, 0.12); }

body:not(.dark-theme)::before { background: linear-gradient(135deg, #e2ebe7 0%, #dce6e2 56%, #e5ece8 100%); }
body:not(.dark-theme) .merchandise-stat,
body:not(.dark-theme) .merchandise-card,
body:not(.dark-theme) .client-stat { background: #e8efeb; }
body:not(.dark-theme) .merchandise-card--accent { background: #f0eae0; }
body:not(.dark-theme) .catalogue-view:not([hidden]) { background: #e6ede9; }
body:not(.dark-theme) .catalogue-product { background: #edf2ef; }
body:not(.dark-theme) .catalogue-selection-panel { background: #e3ebe7; }
body:not(.dark-theme) .catalogue-selection-panel li { background: #edf2ef; }
body:not(.dark-theme) .client-header { background: #e8efeb; }
body:not(.dark-theme) .client-layout { background: #e0e9e5; }
body:not(.dark-theme) .client-stat { background: #e8efeb; }
body:not(.dark-theme) .profile-field input,
body:not(.dark-theme) .profile-field select { background: #edf2ef; }
body:not(.dark-theme) .logout-dialog,
body:not(.dark-theme) .product-detail-dialog { background: #edf2ef; }
body:not(.dark-theme) .logout-dialog input { background: #e5ede9; }

@media (min-width: 761px) {
    .auth-card label, .forgot-card label { font-size: 14px; }
    .auth-card input[type="email"], .auth-card input[type="tel"],
    .auth-card input[type="password"], .auth-card input[type="text"] { font-size: 15px; }
    .auth-card .subtitle, .forgot-card .subtitle { font-size: 16px; }
    .merchandise-nav-button { font-size: 14px; }
    .merchandise-user-card strong { font-size: 13px; }
    .merchandise-user-card small { font-size: 11px; }
    .merchandise-kicker { font-size: 12px; }
    .merchandise-dashboard-header > div > p:last-child { font-size: 15px; line-height: 1.5; }
    .merchandise-stat small { font-size: 12px; }
    .merchandise-section-heading p, .merchandise-section-heading > span { font-size: 12px; }
    .merchandise-card-label { font-size: 12px; }
    .merchandise-card h2 { font-size: 18px; }
    .merchandise-card p:not(.merchandise-card-label) { font-size: 14px; line-height: 1.55; }
    .merchandise-card-link { font-size: 14px; }
    .merchandise-footer-links a, .merchandise-footer-links button { font-size: 13px; }
    .merchandise-footer-links small { font-size: 11px; }
    .catalogue-header p:last-child { font-size: 15px; }
    .catalogue-search-wrap input { font-size: 15px; }
    .catalogue-sort-wrap { font-size: 12px; }
    .catalogue-filter { font-size: 13px; }
    .catalogue-result-count { font-size: 12px; }
    .catalogue-product-category { font-size: 11px; }
    .catalogue-product-info h2 { font-size: 17px; }
    .catalogue-product-description { font-size: 13px; line-height: 1.5; }
    .catalogue-product-buy button { font-size: 13px; }
    .client-nav-button { font-size: 14px; }
    .client-intro { font-size: 15px; }
    .client-stat-label { font-size: 13px; }
    .client-stat-note { font-size: 12px; }
    .quick-action { font-size: 14px; }
    .profile-field label { font-size: 14px; }
    .profile-field input, .profile-field select { font-size: 14px; }
}

@media (max-width: 760px) {
    .auth-card label, .forgot-card label { font-size: 14px; }
    .merchandise-dashboard-header > div > p:last-child { font-size: 14px; line-height: 1.5; }
    .merchandise-stat small { font-size: 12px; }
    .merchandise-card-label { font-size: 11px; }
    .merchandise-card h2 { font-size: 17px; }
    .merchandise-card p:not(.merchandise-card-label) { font-size: 13px; }
    .merchandise-card-link { font-size: 13px; }
    .catalogue-header p:last-child { font-size: 14px; line-height: 1.45; }
    .catalogue-product-info h2 { font-size: 13px; }
    .catalogue-product-description { font-size: 12px; }
    .client-intro { font-size: 15px; }
    .client-stat-label { font-size: 13px; }
    .client-stat-note { font-size: 12px; }
    .quick-action { font-size: 14px; }
    .profile-field label { font-size: 14px; }
}

.checkout-backdrop {
    position: fixed;
    z-index: 80;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(18, 34, 37, 0.62);
    backdrop-filter: blur(6px);
    animation: checkout-backdrop-enter 220ms ease-out both;
}

.checkout-backdrop.checkout-closing {
    animation: checkout-backdrop-exit 220ms ease-in both;
}

.checkout-dialog {
    width: min(100%, 960px);
    max-height: min(90vh, 820px);
    overflow: auto;
    border: 1px solid #cad9d2;
    border-radius: 16px;
    background: #edf2ef;
    color: #203b45;
    box-shadow: 0 28px 80px rgba(8, 28, 32, 0.28);
    animation: product-detail-enter 240ms ease-out both;
}

.checkout-dialog.checkout-closing {
    animation: checkout-dialog-exit 220ms ease-in both;
}

.checkout-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 32px 22px;
    border-bottom: 1px solid #d5e0db;
}

.checkout-kicker { margin: 0 0 7px; color: #267c72; font-size: 11px; font-weight: 800; }
.checkout-header h2 { margin: 0; color: #1d3944; font-size: 26px; line-height: 1.2; }
.checkout-header p:last-child { margin: 8px 0 0; color: #687c83; font-size: 14px; line-height: 1.45; }
.checkout-close { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border: 1px solid #d4dfda; border-radius: 50%; background: #f7faf8; color: #46605f; font: inherit; font-size: 24px; line-height: 1; cursor: pointer; }
.checkout-close:hover { border-color: #a9c5ba; background: #e4ede8; }
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr); }
.checkout-summary, .checkout-payment { min-width: 0; padding: 26px 32px 30px; }
.checkout-summary { display: flex; flex-direction: column; align-items: stretch; border-right: 1px solid #d5e0db; }
.checkout-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.checkout-section-heading h3 { margin: 0; color: #1d3944; font-size: 17px; }
.checkout-section-heading span { color: #71827f; font-size: 12px; }
.checkout-items { display: grid; width: 100%; gap: 0; margin: 0; padding: 0; list-style: none; }
.checkout-item { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #dbe4df; }
.checkout-item > img { display: block; width: 58px; height: 64px; border-radius: 6px; background: #dfe8e3; object-fit: cover; }
.checkout-item-details { display: grid; min-width: 0; gap: 4px; }
.checkout-item-details strong { overflow: hidden; color: #203b45; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.checkout-item-details small { color: #71827f; font-size: 11px; }
.checkout-item-trailing { display: grid; justify-items: end; gap: 7px; }
.checkout-item-trailing > strong { color: #203b45; font-size: 13px; white-space: nowrap; }
.checkout-remove { padding: 2px 0; border: 0; background: transparent; color: #6b7976; font: inherit; font-size: 11px; text-decoration: underline; cursor: pointer; }
.checkout-remove:hover { color: #9a5733; }
.checkout-empty { margin: 0; padding: 18px; border: 1px dashed #bfcec7; border-radius: 8px; color: #687c83; font-size: 13px; line-height: 1.5; }
.checkout-total { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #ccd9d3; color: #425c5d; font-size: 14px; }
.checkout-total strong { color: #1d3944; font-size: 22px; }
.checkout-clear { margin-top: 10px; }
.checkout-return { min-height: 42px; align-self: flex-start; margin-top: auto; padding: 0 12px; border: 1px solid #cbd9d2; border-radius: 8px; background: #f7faf8; color: #36585a; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.checkout-return:hover { border-color: #9bbfb1; background: #e6efea; }
.checkout-payment { display: flex; flex-direction: column; gap: 16px; }
.checkout-payment fieldset { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.checkout-payment legend { margin-bottom: 12px; color: #1d3944; font-size: 17px; font-weight: 750; }
.checkout-method { display: flex; min-height: 66px; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #cfdbd5; border-radius: 8px; background: #f6f9f7; cursor: pointer; }
.checkout-method:has(input:checked) { border-color: #6da995; background: #e5efea; box-shadow: 0 0 0 2px rgba(67, 135, 112, 0.1); }
.checkout-method input { width: 17px; height: 17px; flex: 0 0 17px; accent-color: #267c72; }
.checkout-method > span { display: grid; gap: 4px; }
.checkout-method strong { color: #29464b; font-size: 13px; }
.checkout-method small { color: #71827f; font-size: 11px; }
.checkout-provider-note { margin: 0; padding: 12px; border-left: 3px solid #80a997; border-radius: 4px; background: #e3ebe6; color: #58716d; font-size: 12px; line-height: 1.45; }
.checkout-submit { min-height: 48px; margin-top: auto; padding: 0 18px; border: 1px solid #267c72; border-radius: 8px; background: #267c72; color: #fff; font: inherit; font-size: 14px; font-weight: 750; cursor: pointer; }
.checkout-submit:hover:not(:disabled) { background: #1e625d; }
.checkout-submit:disabled { cursor: not-allowed; opacity: 0.55; }
.checkout-status { min-height: 18px; margin: 0; color: #8d562e; font-size: 12px; line-height: 1.45; }

@media (max-width: 760px) {
    .checkout-backdrop { align-items: end; padding: 10px; }
    .checkout-dialog { width: 100%; max-height: 94dvh; border-radius: 14px 14px 10px 10px; }
    .checkout-header { gap: 12px; padding: 20px 18px 16px; }
    .checkout-header h2 { font-size: 22px; }
    .checkout-header p:last-child { font-size: 13px; }
    .checkout-layout { grid-template-columns: 1fr; }
    .checkout-summary, .checkout-payment { padding: 18px; }
    .checkout-summary { border-right: 0; border-bottom: 1px solid #d5e0db; }
    .checkout-item { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; }
    .checkout-item > img { width: 48px; height: 54px; }
}

body.dark-theme .checkout-dialog { border-color: #364b4d; background: #19272b; color: #dce8e4; }
body.dark-theme .checkout-header { border-bottom-color: #34494b; }
body.dark-theme .checkout-kicker { color: #9ed8c5; }
body.dark-theme .checkout-header h2,
body.dark-theme .checkout-section-heading h3,
body.dark-theme .checkout-total strong { color: #edf5f1; }
body.dark-theme .checkout-header p:last-child,
body.dark-theme .checkout-section-heading span,
body.dark-theme .checkout-item-details small { color: #a9bbb7; }
body.dark-theme .checkout-close,
body.dark-theme .checkout-return { border-color: #405456; background: #25373a; color: #d4e4de; }
body.dark-theme .checkout-close:hover,
body.dark-theme .checkout-return:hover { border-color: #54746a; background: #293d38; }
body.dark-theme .checkout-summary { border-color: #34494b; }
body.dark-theme .checkout-item { border-bottom-color: #34494b; }
body.dark-theme .checkout-item > img { background: #25373a; }
body.dark-theme .checkout-item-details strong,
body.dark-theme .checkout-item-trailing > strong { color: #e7f1ec; }
body.dark-theme .checkout-remove { color: #afc2bc; }
body.dark-theme .checkout-empty { border-color: #405456; color: #a9bbb7; }
body.dark-theme .checkout-total { border-top-color: #405456; color: #bacac4; }
body.dark-theme .checkout-payment legend { color: #edf5f1; }
body.dark-theme .checkout-method { border-color: #405456; background: #202f32; }
body.dark-theme .checkout-method:has(input:checked) { border-color: #5c9e8a; background: #263a35; box-shadow: 0 0 0 2px rgba(110, 183, 160, 0.12); }
body.dark-theme .checkout-method strong { color: #e0ece7; }
body.dark-theme .checkout-method small { color: #a9bbb7; }
body.dark-theme .checkout-provider-note { border-left-color: #6eaa95; background: #223330; color: #bdd1c8; }
body.dark-theme .checkout-status { color: #f0c68e; }