/* ============================================
   Al-Barkat Poultry Farm — Ice Cyan
   One accent: fresh cyan (not gold / green / copper)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
    --teal-950: #083344;
    --teal-900: #0e4a5c;
    --teal-800: #155e75;
    --teal-700: #0e7490;
    --teal-500: #22d3ee;
    --copper: #22d3ee;
    --copper-soft: #67e8f9;
    --cream: #e8fbff;
    --ink: #042f38;
    --mist: rgba(232, 251, 255, 0.88);
    --glass: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(34, 211, 238, 0.28);
    --shadow: 0 24px 64px rgba(2, 16, 24, 0.45);
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Outfit', system-ui, sans-serif;
    --nav-h: 72px;
    --page-pad-x: clamp(12px, 4vw, 48px);
    --page-pad-y: clamp(20px, 5vw, 56px);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    color: var(--cream);
    background: #061016;
    min-height: 100vh;
    min-height: 100dvh;
    line-height: 1.55;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
}

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

img {
    max-width: 100%;
    display: block;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* ---------- Atmosphere ---------- */
.page-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(ellipse 70% 55% at 14% 8%, rgba(34, 211, 238, 0.28), transparent 58%),
        radial-gradient(ellipse 55% 45% at 90% 18%, rgba(103, 232, 249, 0.12), transparent 52%),
        radial-gradient(ellipse 80% 50% at 50% 100%, rgba(8, 145, 178, 0.16), transparent 58%),
        linear-gradient(168deg, #061016 0%, #0a1a24 48%, #051014 100%);
}

.page-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    opacity: 0.5;
    pointer-events: none;
}

/* ---------- Navbar ---------- */
.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: var(--nav-h);
    height: auto;
    display: flex;
    align-items: center;
    padding: calc(8px + var(--safe-top)) var(--page-pad-x) 8px;
    background: rgba(6, 16, 22, 0.82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(34, 211, 238, 0.22);
}

.nav-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}

.brand-logo-wrap {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.brand-logo-ring {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    background:
        linear-gradient(#0a1a24, #0a1a24) padding-box,
        linear-gradient(135deg, #67e8f9, #22d3ee, #0891b2) border-box;
    animation: logoSpin 8s linear infinite;
}

.brand-logo {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    padding: 3px;
    animation: logoFloat 3.2s ease-in-out infinite;
}

@keyframes logoSpin {
    to { transform: rotate(360deg); }
}

@keyframes logoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.brand-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.brand-name {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 2.8vw, 1.45rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.15;
    background: linear-gradient(120deg, #e8fbff 0%, #67e8f9 45%, #22d3ee 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.brand-name-short {
    display: none;
}

.brand-sub {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(247, 243, 236, 0.55);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.nav-link {
    font-size: 0.88rem;
    font-weight: 500;
    padding: 10px 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: rgba(247, 243, 236, 0.75);
    transition: color 0.25s var(--ease), background 0.25s var(--ease);
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.nav-link:hover,
.nav-link:focus-visible {
    color: #e8fbff;
    background: rgba(34, 211, 238, 0.16);
    outline: none;
}

/* ---------- Dashboard navbar ? logo left, name center, profile right ---------- */
.navbar-dash {
    padding-top: calc(10px + var(--safe-top));
    padding-bottom: 10px;
}

.nav-inner-dash {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
}

.nav-dash-side {
    display: flex;
    align-items: center;
    min-width: 0;
}

.nav-dash-left {
    justify-content: flex-start;
}

.nav-dash-right {
    justify-content: flex-end;
}

.dash-logo-link {
    display: inline-flex;
    align-items: center;
}

.brand-logo-wrap-lg {
    width: 54px;
    height: 54px;
}

.dash-title-block {
    justify-self: center;
    text-align: center;
    min-width: 0;
    max-width: 100%;
    padding: 0 8px;
}

.dash-title-main {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 3.2vw, 1.7rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.01em;
    background: linear-gradient(120deg, #e08a4a 0%, #c46a2e 55%, #a85520 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-title-short {
    display: none;
}

.dash-title-sub {
    margin: 4px 0 0;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(196, 106, 46, 0.75);
}

/* Profile menu */
.profile-menu {
    position: relative;
}

.profile-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 6px 12px 6px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--cream);
    overflow: hidden;
    transition: background 0.25s var(--ease), border-color 0.25s, transform 0.25s var(--ease), box-shadow 0.25s;
    -webkit-tap-highlight-color: transparent;
}

.profile-btn-glow {
    position: absolute;
    inset: -40% auto -40% -30%;
    width: 70%;
    background: radial-gradient(circle, rgba(196, 106, 46, 0.45), transparent 70%);
    pointer-events: none;
}

.profile-btn:hover,
.profile-btn[aria-expanded="true"] {
    background: rgba(196, 106, 46, 0.14);
    border-color: rgba(196, 106, 46, 0.55);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.profile-avatar {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1208;
    background: linear-gradient(145deg, #e08a4a, #c46a2e);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.profile-meta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-width: 0;
    text-align: left;
}

.profile-label {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(247, 243, 236, 0.5);
    line-height: 1.1;
}

.profile-user {
    font-size: 0.86rem;
    font-weight: 600;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

.profile-caret {
    position: relative;
    z-index: 1;
    width: 16px;
    height: 16px;
    opacity: 0.7;
    transition: transform 0.25s var(--ease);
    flex-shrink: 0;
}

.profile-btn[aria-expanded="true"] .profile-caret {
    transform: rotate(180deg);
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(260px, calc(100vw - 24px));
    padding: 10px;
    background: linear-gradient(165deg, #3a2412 0%, #1c1408 100%);
    border: 1px solid rgba(196, 106, 46, 0.3);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
    z-index: 200;
    animation: riseIn 0.28s var(--ease) both;
}

.profile-dropdown[hidden] {
    display: none !important;
}

.profile-dropdown-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-dropdown-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    color: #1a1208;
    background: linear-gradient(145deg, #e08a4a, #c46a2e);
    flex-shrink: 0;
}

.profile-dropdown-head strong {
    display: block;
    font-size: 0.95rem;
    line-height: 1.2;
}

.profile-dropdown-head span {
    display: block;
    font-size: 0.72rem;
    color: rgba(247, 243, 236, 0.55);
    margin-top: 2px;
}

.profile-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(247, 243, 236, 0.88);
    border-radius: 4px;
    transition: background 0.2s;
}

.profile-dropdown-item svg {
    width: 17px;
    height: 17px;
    opacity: 0.8;
    flex-shrink: 0;
}

.profile-dropdown-item:hover,
.profile-dropdown-item:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    outline: none;
}

.profile-dropdown-item.is-danger {
    color: #ffb4a8;
}

.profile-dropdown-item.is-danger:hover {
    background: rgba(180, 50, 40, 0.18);
}

@media (max-width: 640px) {
    .brand-logo-wrap-lg {
        width: 44px;
        height: 44px;
    }

    .dash-title-full {
        display: none;
    }

    .dash-title-short {
        display: inline;
    }

    .dash-title-main {
        font-size: 1.15rem;
    }

    .dash-title-sub {
        letter-spacing: 0.12em;
        font-size: 0.58rem;
    }

    .profile-meta {
        display: none;
    }

    .profile-btn {
        padding: 5px;
        border-radius: 50%;
        min-height: 44px;
        min-width: 44px;
        justify-content: center;
    }

    .profile-caret {
        display: none;
    }
}

/* ---------- Home hero composition ---------- */
.home {
    min-height: calc(100vh - var(--nav-h));
    min-height: calc(100dvh - var(--nav-h));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--page-pad-y) var(--page-pad-x) calc(32px + var(--safe-bottom));
    gap: clamp(20px, 4vw, 40px);
    position: relative;
    width: 100%;
}

.home-welcome {
    text-align: center;
    max-width: min(640px, 100%);
    padding: 0 4px;
    animation: riseIn 0.9s var(--ease) both;
}

.welcome-eyebrow {
    display: inline-block;
    font-size: clamp(0.62rem, 2vw, 0.72rem);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #67e8f9;
    margin-bottom: 12px;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(34, 211, 238, 0.14);
    border: 1px solid rgba(34, 211, 238, 0.38);
}

.welcome-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 7vw, 3.75rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: #fff6e8;
    margin-bottom: 14px;
    word-wrap: break-word;
}

.welcome-title span {
    background: linear-gradient(120deg, #e8fbff 0%, #67e8f9 40%, #22d3ee 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.welcome-text {
    font-size: clamp(0.92rem, 2.4vw, 1.12rem);
    font-weight: 300;
    color: rgba(255, 236, 210, 0.78);
    max-width: 480px;
    margin: 0 auto;
    padding: 0 4px;
}

@keyframes riseIn {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Auto-scroll gallery ---------- */
.gallery {
    width: min(1100px, 100%);
    position: relative;
    animation: riseIn 1s var(--ease) 0.15s both;
}

.gallery-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 9;
    min-height: 180px;
    max-height: min(420px, 48vw);
    overflow: hidden;
    border-radius: 0;
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.gallery-track {
    display: flex;
    height: 100%;
    width: 400%;
    animation: galleryScroll 18s ease-in-out infinite;
    will-change: transform;
}

.gallery-slide {
    flex: 0 0 25%;
    height: 100%;
    position: relative;
}

.gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.gallery-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(6, 16, 22, 0.18) 0%,
        rgba(6, 16, 22, 0.04) 40%,
        rgba(34, 211, 238, 0.3) 100%
    );
    pointer-events: none;
}

@keyframes galleryScroll {
    0%, 8%   { transform: translateX(0%); }
    25%, 33% { transform: translateX(-25%); }
    50%, 58% { transform: translateX(-50%); }
    75%, 83% { transform: translateX(-75%); }
    100%     { transform: translateX(0%); }
}

.gallery-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}

.gallery-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(247, 243, 236, 0.25);
    transition: background 0.3s, transform 0.3s;
}

.gallery-dot.active {
    background: #22d3ee;
    transform: scale(1.25);
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.55);
}

@media (hover: hover) and (pointer: fine) {
    .gallery:hover .gallery-track {
        animation-play-state: paused;
    }
}

/* ---------- Owner proof ---------- */
.owner-proof {
    width: min(640px, 100%);
    animation: riseIn 1s var(--ease) 0.22s both;
}

.owner-proof-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 18px 16px 16px;
    border-radius: 18px;
    background:
        linear-gradient(160deg, rgba(224, 250, 255, 0.1), rgba(34, 211, 238, 0.08) 55%, rgba(6, 16, 22, 0.35)),
        rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(34, 211, 238, 0.35);
    box-shadow:
        0 18px 48px rgba(8, 6, 2, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.owner-proof-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 480px;
}

.owner-proof-badge {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #1a1408;
    background: linear-gradient(145deg, #e8fbff, #67e8f9 55%, #22d3ee);
    box-shadow: 0 8px 20px rgba(34, 211, 238, 0.4);
}

.owner-proof-badge svg {
    width: 22px;
    height: 22px;
}

.owner-proof-copy {
    min-width: 0;
    text-align: left;
}

.owner-proof-eyebrow {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #67e8f9;
}

.owner-proof-title {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 4vw, 1.7rem);
    font-weight: 700;
    line-height: 1.15;
    color: #fff6e8;
    margin: 0;
}

.owner-proof-text {
    margin-top: 4px;
    font-size: clamp(0.78rem, 2.2vw, 0.88rem);
    font-weight: 300;
    color: rgba(255, 236, 210, 0.72);
}

.owner-proof-frame {
    width: 100%;
    margin: 0;
    padding: 8px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(34, 211, 238, 0.28);
    box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.12);
}

.owner-proof-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    object-fit: contain;
    background: #e8f4f2;
}

.owner-proof-meta {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255, 236, 210, 0.82);
    letter-spacing: 0.02em;
}

.owner-proof-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #22d3ee;
    box-shadow: 0 0 8px rgba(34, 211, 238, 0.7);
}

/* ---------- CTA buttons ---------- */
.home-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    max-width: 560px;
    animation: riseIn 1.05s var(--ease) 0.28s both;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 22px;
    min-height: 48px;
    font-size: clamp(0.86rem, 2.2vw, 0.95rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 4px;
    text-align: center;
    line-height: 1.25;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s, color 0.3s, border-color 0.3s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

@media (hover: hover) and (pointer: fine) {
    .btn:hover {
        transform: translateY(-2px);
    }
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background: linear-gradient(135deg, #22d3ee 0%, #67e8f9 100%);
    color: #1a1408;
    box-shadow: 0 12px 32px rgba(34, 211, 238, 0.38);
}

@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover {
        box-shadow: 0 16px 40px rgba(34, 211, 238, 0.52);
    }
}

.btn-outline {
    background: transparent;
    color: #cffafe;
    border: 1.5px solid rgba(34, 211, 238, 0.5);
}

@media (hover: hover) and (pointer: fine) {
    .btn-outline:hover {
        border-color: #22d3ee;
        background: rgba(34, 211, 238, 0.14);
        color: #fff;
    }
}

.btn:focus-visible {
    outline: 2px solid #22d3ee;
    outline-offset: 3px;
}

.btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.btn-label-short {
    display: none;
}

/* ---------- Auth pages ? modern split shell (#c46a2e copper) ---------- */
.auth-body .navbar {
    position: relative;
    background: rgba(6, 16, 22, 0.82);
    border-bottom-color: rgba(34, 211, 238, 0.22);
}

.auth-body .page-bg {
    background:
        radial-gradient(ellipse 70% 55% at 14% 8%, rgba(34, 211, 238, 0.28), transparent 58%),
        radial-gradient(ellipse 55% 45% at 90% 18%, rgba(103, 232, 249, 0.12), transparent 52%),
        radial-gradient(ellipse 80% 50% at 50% 100%, rgba(8, 145, 178, 0.16), transparent 58%),
        linear-gradient(168deg, #061016 0%, #0a1a24 48%, #051014 100%);
}

.auth-body .brand-name,
.auth-body .brand-name-full,
.auth-body .brand-name-short {
    background: linear-gradient(120deg, #e8fbff 0%, #67e8f9 45%, #22d3ee 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.auth-shell {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    min-height: calc(100vh - var(--nav-h));
    min-height: calc(100dvh - var(--nav-h));
    width: 100%;
}

.auth-visual {
    position: relative;
    overflow: hidden;
    min-height: 100%;
}

.auth-visual-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.04);
    animation: authKenBurns 18s ease-in-out infinite alternate;
}

@keyframes authKenBurns {
    from { transform: scale(1.04) translate(0, 0); }
    to { transform: scale(1.12) translate(-2%, -1%); }
}

.auth-visual-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(26, 20, 8, 0.6) 0%, rgba(42, 26, 12, 0.72) 55%, rgba(196, 106, 46, 0.35) 100%),
        linear-gradient(0deg, rgba(20, 14, 4, 0.8) 0%, transparent 45%);
}

.auth-visual-copy {
    position: absolute;
    left: clamp(28px, 4vw, 56px);
    right: clamp(28px, 4vw, 56px);
    bottom: clamp(36px, 6vw, 64px);
    z-index: 1;
    max-width: 420px;
    animation: riseIn 0.9s var(--ease) both;
}

.auth-visual-eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #e08a4a;
    margin-bottom: 12px;
}

.auth-visual-title {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    font-weight: 700;
    line-height: 1.05;
    margin-bottom: 12px;
    background: linear-gradient(120deg, #ffe0b8 0%, #e08a4a 45%, #c46a2e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.auth-visual-text {
    font-size: 1rem;
    font-weight: 300;
    color: rgba(247, 243, 236, 0.78);
    max-width: 320px;
}

.auth-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(24px, 4vw, 48px) var(--page-pad-x) calc(28px + var(--safe-bottom));
    position: relative;
}

.auth-side::before {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196, 106, 46, 0.25), transparent 70%);
    top: 8%;
    right: 6%;
    pointer-events: none;
}

.auth-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: clamp(28px, 4vw, 40px) clamp(22px, 3vw, 34px);
    background: linear-gradient(160deg, rgba(196, 106, 46, 0.12), rgba(196, 106, 46, 0.03));
    border: 1px solid rgba(196, 106, 46, 0.25);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow:
        0 24px 64px rgba(20, 12, 0, 0.35),
        inset 0 1px 0 rgba(255, 200, 150, 0.12);
    animation: riseIn 0.75s var(--ease) both;
    overflow: hidden;
}

.auth-card-glow {
    position: absolute;
    inset: auto -20% -40% -20%;
    height: 55%;
    background: radial-gradient(ellipse at center, rgba(196, 106, 46, 0.22), transparent 65%);
    pointer-events: none;
}

.auth-head {
    text-align: center;
    margin-bottom: clamp(22px, 4vw, 30px);
    position: relative;
    z-index: 1;
}

.auth-logo-orbit {
    width: 96px;
    height: 96px;
    margin: 0 auto 16px;
    position: relative;
    display: grid;
    place-items: center;
}

.auth-logo-orbit::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px dashed rgba(196, 106, 46, 0.55);
    animation: logoSpin 14s linear infinite;
}

.auth-logo {
    width: 78px;
    height: 78px;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    padding: 5px;
    animation: logoFloat 3.2s ease-in-out infinite;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.auth-head h1 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.2rem);
    font-weight: 700;
    margin-bottom: 6px;
    line-height: 1.1;
    background: linear-gradient(120deg, #ffe0b8 0%, #e08a4a 45%, #c46a2e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.auth-head p {
    font-size: 0.92rem;
    color: rgba(255, 236, 210, 0.65);
}

.field label {
    color: rgba(255, 210, 160, 0.65);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.field label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(247, 243, 236, 0.55);
    margin-bottom: 8px;
}

.field-box {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 12px 0 14px;
    background: rgba(247, 243, 236, 0.94);
    border: 1.5px solid transparent;
    border-radius: 6px;
    transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}

.field-box:focus-within {
    border-color: #c46a2e;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(196, 106, 46, 0.25);
}

.field-icon {
    display: grid;
    place-items: center;
    color: #c46a2e;
    opacity: 0.85;
    flex-shrink: 0;
}

.field-icon svg {
    width: 18px;
    height: 18px;
}

.field-box input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    color: var(--ink);
    padding: 14px 0;
    -webkit-appearance: none;
    appearance: none;
}

.field-box input::placeholder {
    color: rgba(20, 36, 40, 0.4);
}

.field-toggle {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: #c46a2e;
    opacity: 0.75;
    border-radius: 4px;
    flex-shrink: 0;
    transition: opacity 0.2s, background 0.2s;
}

.field-toggle:hover,
.field-toggle:focus-visible {
    opacity: 1;
    background: rgba(196, 106, 46, 0.12);
    outline: none;
}

.field-toggle svg {
    width: 18px;
    height: 18px;
}

.auth-msg {
    padding: 12px 14px;
    font-size: 0.88rem;
    border-radius: 6px;
    display: none;
    word-break: break-word;
}

.auth-msg.show {
    display: block;
    animation: riseIn 0.35s var(--ease) both;
}

.auth-msg.error {
    background: rgba(180, 40, 40, 0.22);
    border: 1px solid rgba(255, 120, 120, 0.35);
    color: #ffc9c9;
}

.auth-msg.success {
    background: rgba(30, 120, 80, 0.22);
    border: 1px solid rgba(120, 220, 160, 0.35);
    color: #c8f5d8;
}

.auth-submit {
    width: 100%;
    margin-top: 4px;
    min-height: 52px;
    gap: 12px;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}

.auth-submit::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.6s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
    .auth-submit:hover::after {
        transform: translateX(120%);
    }
}

.auth-switch {
    text-align: center;
    margin-top: 22px;
    font-size: 0.9rem;
    color: rgba(255, 236, 210, 0.62);
    position: relative;
    z-index: 1;
}

.auth-switch a {
    color: #e08a4a;
    font-weight: 600;
    margin-left: 4px;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

@media (hover: hover) and (pointer: fine) {
    .auth-switch a:hover {
        border-bottom-color: #c46a2e;
        color: #c46a2e;
    }
}

/* Copper submit button on auth pages */
.auth-body .btn-primary {
    background: linear-gradient(135deg, #22d3ee 0%, #67e8f9 100%);
    color: #1a1408;
    box-shadow: 0 12px 32px rgba(34, 211, 238, 0.38);
}

.auth-body .btn-primary:hover {
    box-shadow: 0 16px 40px rgba(196, 106, 46, 0.55);
}

/* Auth responsive */
@media (max-width: 960px) {
    .auth-shell {
        grid-template-columns: 1fr;
    }

    .auth-visual {
        min-height: 200px;
        max-height: 240px;
    }

    .auth-visual-copy {
        bottom: 22px;
        left: 20px;
        right: 20px;
    }

    .auth-visual-title {
        font-size: 1.8rem;
    }

    .auth-visual-text {
        display: none;
    }

    .auth-side {
        padding-top: 8px;
    }
}

@media (max-width: 480px) {
    .auth-visual {
        min-height: 160px;
        max-height: 180px;
    }

    .auth-card {
        padding: 24px 16px;
        background: transparent;
        border: 0;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .auth-card-glow {
        display: none;
    }

    .auth-logo-orbit {
        width: 84px;
        height: 84px;
    }

    .auth-logo {
        width: 68px;
        height: 68px;
    }
}

@media (max-height: 500px) and (orientation: landscape) {
    .auth-visual {
        display: none;
    }

    .auth-shell {
        grid-template-columns: 1fr;
    }

    .auth-side {
        padding-top: 12px;
        padding-bottom: 16px;
    }

    .auth-logo-orbit {
        width: 64px;
        height: 64px;
        margin-bottom: 8px;
    }

    .auth-logo {
        width: 52px;
        height: 52px;
    }

    .auth-head {
        margin-bottom: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-visual-img,
    .auth-logo-orbit::before {
        animation: none !important;
    }
}

/* Legacy auth-page alias (unused but safe) */
.auth-page {
    min-height: calc(100dvh - var(--nav-h));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(24px, 5vw, 40px) var(--page-pad-x) calc(28px + var(--safe-bottom));
}

/* ---------- Dashboard ? #c46a2e copper + identity conduit rail ---------- */
.dash-page .page-bg {
    background:
        radial-gradient(ellipse 70% 55% at 14% 8%, rgba(34, 211, 238, 0.28), transparent 58%),
        radial-gradient(ellipse 55% 45% at 90% 18%, rgba(103, 232, 249, 0.12), transparent 52%),
        radial-gradient(ellipse 80% 50% at 50% 100%, rgba(8, 145, 178, 0.16), transparent 58%),
        linear-gradient(168deg, #061016 0%, #0a1a24 48%, #051014 100%);
}

.dash-page .navbar-dash {
    background: rgba(6, 16, 22, 0.82);
    border-bottom-color: rgba(34, 211, 238, 0.22);
}

.dash-main {
    width: 100%;
    padding: 0;
}

/* Identity Conduit Rail ? unique under-nav strip */
.id-rail {
    width: 100%;
    padding: 14px var(--page-pad-x) 0;
    animation: riseIn 0.6s var(--ease) both;
}

.id-rail-frame {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(10px, 2vw, 20px);
    max-width: 1100px;
    margin: 0 auto;
    padding: 14px clamp(14px, 3vw, 24px);
    isolation: isolate;
    background:
        linear-gradient(105deg, rgba(196, 106, 46, 0.14) 0%, rgba(26, 20, 8, 0.55) 38%, rgba(26, 20, 8, 0.55) 62%, rgba(196, 106, 46, 0.14) 100%);
    border: 1px solid transparent;
    background-clip: padding-box;
    box-shadow:
        0 0 0 1px rgba(196, 106, 46, 0.35),
        0 18px 40px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 210, 160, 0.12);
    clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 18px 100%, 0 50%);
    overflow: hidden;
}

.id-rail-edge {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border: 2px solid #c46a2e;
    transform: rotate(45deg);
    z-index: 2;
    box-shadow: 0 0 12px rgba(196, 106, 46, 0.6);
}

.id-rail-edge-l { left: 6px; }
.id-rail-edge-r { right: 6px; }

.id-rail-scan {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 200, 140, 0.08) 45%,
        rgba(196, 106, 46, 0.2) 50%,
        rgba(255, 200, 140, 0.08) 55%,
        transparent 100%
    );
    transform: translateX(-120%);
    animation: idScan 4.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes idScan {
    0%, 20% { transform: translateX(-120%); }
    55%, 100% { transform: translateX(120%); }
}

.id-node {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.id-node-user { justify-content: flex-start; }
.id-node-up { justify-content: flex-end; }

.id-orb {
    position: relative;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}

.id-orb-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px dashed rgba(224, 138, 74, 0.55);
    animation: logoSpin 10s linear infinite;
}

.id-orb-up .id-orb-ring {
    animation-direction: reverse;
    border-color: rgba(196, 106, 46, 0.7);
}

.id-orb-core {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1208;
    background: linear-gradient(145deg, #e08a4a, #c46a2e);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12), 0 8px 18px rgba(196, 106, 46, 0.35);
}

.id-orb-up .id-orb-core {
    background: linear-gradient(145deg, #c46a2e, #8f4a1c);
    color: #fff2e0;
}

.id-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    text-align: left;
}

.id-copy-right {
    text-align: right;
}

.id-kicker {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(196, 106, 46, 0.85);
}

.id-value {
    font-size: clamp(0.95rem, 2.4vw, 1.15rem);
    font-weight: 700;
    color: #c46a2e;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: min(220px, 36vw);
}

.id-conduit {
    position: relative;
    z-index: 1;
    width: clamp(72px, 14vw, 140px);
    height: 28px;
    display: grid;
    place-items: center;
}

.id-conduit-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    background: linear-gradient(90deg, transparent, #c46a2e, #e08a4a, #c46a2e, transparent);
    box-shadow: 0 0 10px rgba(196, 106, 46, 0.5);
}

.id-conduit-pulse {
    position: absolute;
    top: 50%;
    left: 0;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: #ffe0b8;
    box-shadow: 0 0 12px #c46a2e, 0 0 4px #fff;
    animation: idPulseMove 2.2s ease-in-out infinite;
}

@keyframes idPulseMove {
    0% { left: 4%; opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { left: 88%; opacity: 0; }
}

.id-conduit-chip {
    position: relative;
    z-index: 1;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: #1a1208;
    background: linear-gradient(135deg, #e08a4a, #c46a2e);
    padding: 3px 8px;
    clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%);
}

@media (max-width: 640px) {
    .id-rail {
        padding: 10px 10px 0;
    }

    .id-rail-frame {
        clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
        padding: 12px 14px;
        gap: 8px;
    }

    .id-orb {
        width: 40px;
        height: 40px;
    }

    .id-orb-core {
        width: 30px;
        height: 30px;
        font-size: 0.82rem;
    }

    .id-value {
        max-width: 28vw;
        font-size: 0.9rem;
    }

    .id-conduit {
        width: 56px;
    }

    .id-conduit-chip {
        font-size: 0.5rem;
        padding: 2px 6px;
    }

    .id-kicker {
        letter-spacing: 0.1em;
        font-size: 0.55rem;
    }
}

@media (max-width: 400px) {
    .id-node-up .id-copy-right .id-kicker,
    .id-node-user .id-kicker {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .id-rail-scan,
    .id-conduit-pulse,
    .id-orb-ring {
        animation: none !important;
    }
}

/* ---------- Balance Triple Dock ? Eggs / Tokens / Units ---------- */
.bal-dock {
    width: 100%;
    max-width: 1100px;
    margin: 12px auto 0;
    padding: 0 var(--page-pad-x);
    animation: riseIn 0.7s var(--ease) 0.1s both;
}

.bal-dock-shell {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 18px;
    background:
        linear-gradient(115deg, rgba(196, 106, 46, 0.24), rgba(26, 20, 8, 0.82) 36%, rgba(26, 20, 8, 0.82) 64%, rgba(196, 106, 46, 0.2));
    border: 1px solid rgba(196, 106, 46, 0.38);
    box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 220, 170, 0.16),
        0 0 0 1px rgba(255, 200, 140, 0.04);
    overflow: hidden;
}

.bal-dock-sheen {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 230, 190, 0.09) 44%,
        rgba(196, 106, 46, 0.2) 50%,
        rgba(255, 230, 190, 0.09) 56%,
        transparent 100%
    );
    transform: translateX(-130%);
    animation: balSheen 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes balSheen {
    0%, 25% { transform: translateX(-130%); }
    60%, 100% { transform: translateX(130%); }
}

.bal-chip {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 8px 14px 8px 8px;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 210, 160, 0.16);
    transition: border-color 0.25s, transform 0.25s var(--ease), box-shadow 0.25s;
}

@media (hover: hover) and (pointer: fine) {
    .bal-chip:hover {
        border-color: rgba(196, 106, 46, 0.55);
        transform: translateY(-2px);
        box-shadow: 0 12px 26px rgba(20, 10, 0, 0.32);
    }
}

.bal-chip-orb {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 240, 210, 0.2), transparent 55%),
        rgba(196, 106, 46, 0.14);
    box-shadow:
        0 0 0 1px rgba(196, 106, 46, 0.3),
        0 8px 18px rgba(196, 106, 46, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.bal-chip-orb-egg {
    animation: balFloat 3s ease-in-out infinite;
}

.bal-chip-orb-token {
    animation: balFloat 3s ease-in-out infinite 0.4s;
}

.bal-chip-orb-unit {
    animation: balFloat 3s ease-in-out infinite 0.8s;
}

@keyframes balFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

.bal-ico {
    width: 40px;
    height: 40px;
    display: block;
}

.bal-chip-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.bal-chip-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(196, 106, 46, 0.85);
}

.bal-chip-val {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 3.2vw, 1.65rem);
    font-weight: 700;
    line-height: 1.1;
    color: #c46a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: none;
}

.bal-chip-val-tok,
.bal-chip-val-watts,
.bal-chip-val-unit {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    color: #c46a2e;
    text-shadow: none;
}

.bal-dock-mid {
    position: relative;
    z-index: 1;
    width: 16px;
    height: 40px;
    display: grid;
    place-items: center;
}

.bal-dock-mid::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #c46a2e, #e08a4a, #c46a2e, transparent);
    box-shadow: 0 0 10px rgba(196, 106, 46, 0.55);
}

.bal-dock-spark {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffe0b8;
    box-shadow: 0 0 12px #c46a2e, 0 0 4px #fff;
    animation: balSpark 1.8s ease-in-out infinite;
}

@keyframes balSpark {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.7); opacity: 0.5; }
}

/* Keep ONE row on all devices */
@media (max-width: 640px) {
    .bal-dock {
        margin-top: 10px;
        padding: 0 10px;
    }

    .bal-dock-shell {
        gap: 4px;
        padding: 6px;
        border-radius: 14px;
    }

    .bal-chip {
        gap: 6px;
        padding: 6px 6px 6px 4px;
        border-radius: 12px;
    }

    .bal-chip-orb {
        width: 36px;
        height: 36px;
    }

    .bal-ico {
        width: 26px;
        height: 26px;
    }

    .bal-chip-label {
        font-size: 0.5rem;
        letter-spacing: 0.08em;
    }

    .bal-chip-val {
        font-size: clamp(0.85rem, 3.5vw, 1.05rem);
    }

    .bal-dock-mid {
        width: 8px;
        height: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bal-dock-sheen,
    .bal-dock-spark,
    .bal-chip-orb-egg,
    .bal-chip-orb-token,
    .bal-chip-orb-unit {
        animation: none !important;
    }
}

/* ---------- Marketplace ? Purchase & Sells ---------- */
.mkt {
    width: 100%;
    max-width: 1100px;
    margin: 14px auto 28px;
    padding: 0 var(--page-pad-x);
    animation: riseIn 0.75s var(--ease) 0.18s both;
}

.mkt-shell {
    position: relative;
    padding: 14px;
    border-radius: 18px;
    background:
        linear-gradient(155deg, rgba(196, 106, 46, 0.16), rgba(26, 20, 8, 0.78) 50%, rgba(196, 106, 46, 0.1));
    border: 1px solid rgba(196, 106, 46, 0.3);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 220, 170, 0.12);
    overflow: hidden;
}

.mkt-shell::before {
    content: '';
    position: absolute;
    right: -40px;
    top: -50px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(224, 138, 74, 0.22), transparent 70%);
    pointer-events: none;
}

.mkt-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.mkt-eyebrow {
    margin: 0 0 3px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(196, 106, 46, 0.85);
}

.mkt-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.8vw, 1.45rem);
    font-weight: 700;
    color: #c46a2e;
    text-shadow: none;
}

.mkt-badge {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #1a1208;
    background: linear-gradient(135deg, #e08a4a, #c46a2e);
    padding: 5px 10px;
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(196, 106, 46, 0.3);
}

.mkt-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.mkt-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 10px 12px;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 210, 160, 0.16);
    color: #c46a2e;
    text-decoration: none;
    transition: transform 0.25s var(--ease), border-color 0.25s, box-shadow 0.25s, background 0.25s;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
    .mkt-btn:hover {
        transform: translateY(-2px);
        border-color: rgba(196, 106, 46, 0.55);
        background: linear-gradient(145deg, rgba(196, 106, 46, 0.18), rgba(255, 255, 255, 0.04));
        box-shadow: 0 14px 28px rgba(20, 10, 0, 0.32);
    }

    .mkt-btn:hover .mkt-arrow {
        transform: translateX(3px);
        color: #e08a4a;
    }
}

.mkt-btn:active {
    transform: translateY(0);
}

.mkt-ico {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 240, 210, 0.2), transparent 55%),
        rgba(196, 106, 46, 0.16);
    border: 1px solid rgba(196, 106, 46, 0.28);
    box-shadow: 0 8px 16px rgba(196, 106, 46, 0.22);
    overflow: hidden;
}

.mkt-ico svg {
    width: 30px;
    height: 30px;
}

.mkt-ico-img {
    padding: 3px;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 240, 210, 0.22), transparent 55%),
        rgba(196, 106, 46, 0.16);
}

.mkt-ico-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    background: transparent;
}

.mkt-btn-buy-hen .mkt-ico-img img {
    padding: 1px;
    transform: scale(1.02);
}

.mkt-btn-sell-egg .mkt-ico-img img {
    transform: scale(1.08);
}

.mkt-btn-buy-vac .mkt-ico-img img {
    transform: scale(1.06);
}

.mkt-btn-sell-tok .mkt-ico-img img {
    transform: scale(1.08);
}

.mkt-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.mkt-copy strong {
    font-size: clamp(0.92rem, 2.2vw, 1.05rem);
    font-weight: 700;
    line-height: 1.2;
    color: #c46a2e;
    text-shadow: none;
}

.mkt-copy small {
    font-size: 0.72rem;
    color: rgba(196, 106, 46, 0.75);
}

.mkt-arrow {
    flex-shrink: 0;
    font-size: 1.1rem;
    color: #c46a2e;
    transition: transform 0.25s var(--ease), color 0.25s;
}

.mkt-btn-buy-hen .mkt-ico { box-shadow: 0 8px 16px rgba(196, 106, 46, 0.28); }
.mkt-btn-sell-egg .mkt-ico { background: rgba(224, 138, 74, 0.18); }
.mkt-btn-buy-vac .mkt-ico { background: rgba(196, 106, 46, 0.2); }
.mkt-btn-sell-tok .mkt-ico { background: rgba(240, 160, 96, 0.16); }
.mkt-btn-buy-solar .mkt-ico { background: rgba(196, 106, 46, 0.18); }
.mkt-btn-sell-unit .mkt-ico,
.mkt-btn-sell-watts .mkt-ico { background: rgba(224, 138, 74, 0.16); }

.mkt-btn-buy-solar .mkt-ico-img img,
.mkt-btn-sell-unit .mkt-ico-img img,
.mkt-btn-sell-watts .mkt-ico-img img {
    transform: scale(1.08);
}

@media (max-width: 560px) {
    .mkt {
        margin: 12px auto 24px;
        padding: 0 10px;
    }

    .mkt-shell {
        padding: 12px;
        border-radius: 16px;
    }

    .mkt-grid {
        gap: 8px;
    }

    .mkt-btn {
        min-height: 66px;
        gap: 8px;
        padding: 8px;
        border-radius: 12px;
    }

    .mkt-ico {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .mkt-ico svg {
        width: 26px;
        height: 26px;
    }

    .mkt-btn-buy-hen .mkt-ico-img img {
        padding: 1px;
    }

    .mkt-copy small {
        display: none;
    }

    .mkt-arrow {
        display: none;
    }

    .mkt-title {
        font-size: 1.1rem;
    }
}

/* ---------- Company auth popup (transparent ? matches home page bg) ---------- */
.zz-popup {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.zz-popup.show {
    display: flex;
}

.zz-popup-backdrop {
    position: absolute;
    inset: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    cursor: pointer;
    animation: zzFade 0.35s ease both;
}

.zz-popup-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    margin: auto;
    padding: 28px 24px 22px;
    background: linear-gradient(
        165deg,
        rgba(196, 106, 46, 0.22) 0%,
        rgba(26, 20, 8, 0.88) 48%,
        rgba(196, 106, 46, 0.14) 100%
    );
    color: #c46a2e;
    border: 1px solid rgba(196, 106, 46, 0.35);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 220, 170, 0.12);
    overflow: hidden;
    animation: zzPopIn 0.45s var(--ease) both;
    max-height: min(92vh, 92dvh);
    overflow-y: auto;
}

.zz-popup-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #e08a4a, #c46a2e, transparent);
}

.zz-popup-x {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: rgba(196, 106, 46, 0.7);
    border-radius: 50%;
    transition: background 0.2s, color 0.2s;
}

.zz-popup-x:hover {
    background: rgba(196, 106, 46, 0.18);
    color: #e08a4a;
}

.zz-popup-x svg {
    width: 16px;
    height: 16px;
}

.zz-popup-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-right: 28px;
}

.zz-popup-brand img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: contain;
    background: rgba(196, 106, 46, 0.12);
    padding: 4px;
    border: 1px solid rgba(196, 106, 46, 0.3);
    box-shadow: 0 6px 18px rgba(196, 106, 46, 0.25);
}

.zz-popup-brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    text-align: left;
}

.zz-popup-brand-text strong {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: #c46a2e;
    line-height: 1.15;
}

.zz-popup-brand-text span {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(196, 106, 46, 0.72);
}

.zz-popup-status {
    position: relative;
    width: 72px;
    height: 72px;
    margin: 0 auto 14px;
}

.zz-popup-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(224, 138, 74, 0.4);
    animation: zzPulse 1.8s ease-out infinite;
}

.zz-popup-check {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #e08a4a, #c46a2e);
    color: #1a1208;
    box-shadow: 0 10px 28px rgba(196, 106, 46, 0.4);
}

.zz-popup-card.is-welcome .zz-popup-check,
.zz-popup-card.is-team .zz-popup-check,
.zz-popup-card.is-approved .zz-popup-check {
    background: linear-gradient(145deg, #e08a4a, #c46a2e);
}

.zz-popup-check svg {
    width: 28px;
    height: 28px;
}

.zz-popup-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    padding: 6px 14px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #c46a2e;
    background: rgba(196, 106, 46, 0.14);
    border: 1px solid rgba(196, 106, 46, 0.32);
}

.zz-popup-card.is-welcome .zz-popup-badge,
.zz-popup-card.is-team .zz-popup-badge {
    color: #e08a4a;
    background: rgba(196, 106, 46, 0.16);
    border-color: rgba(224, 138, 74, 0.35);
}

.zz-popup-title {
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 4vw, 1.75rem);
    color: #c46a2e;
    margin: 0 0 10px;
    line-height: 1.15;
    text-align: center;
}

.zz-popup-text {
    margin: 0 0 18px;
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(196, 106, 46, 0.82);
    text-align: center;
}

.zz-popup-text strong {
    color: #e08a4a;
}

.zz-popup-meta {
    list-style: none;
    display: grid;
    gap: 0;
    margin: 0 0 14px;
    border: 1px solid rgba(196, 106, 46, 0.28);
    background: rgba(196, 106, 46, 0.08);
    overflow: hidden;
}

.zz-popup-meta li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(196, 106, 46, 0.18);
    font-size: 0.88rem;
}

.zz-popup-meta li:last-child {
    border-bottom: 0;
}

.zz-popup-meta span {
    color: rgba(196, 106, 46, 0.7);
}

.zz-popup-meta strong {
    color: #c46a2e;
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}

.zz-popup-meta strong.ok {
    color: #e08a4a;
}

.zz-popup-meta strong.bad {
    color: #dc2626;
}

.zz-popup-card.is-blocked {
    border-color: rgba(220, 38, 38, 0.35);
}

.zz-popup-card.is-blocked .zz-popup-accent {
    background: linear-gradient(90deg, #dc2626, #f97316, #dc2626);
}

.zz-popup-card.is-blocked .zz-popup-check {
    background: linear-gradient(145deg, #ef4444, #b91c1c);
    color: #fff;
}

.zz-popup-card.is-blocked .zz-popup-badge {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.35);
}

.zz-popup-card.is-blocked .zz-popup-title {
    color: #b91c1c;
}

.zz-popup-card.is-blocked .zz-popup-cta {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: #fff;
    box-shadow: 0 10px 28px rgba(185, 28, 28, 0.35);
}

.zz-popup-note {
    margin: 0 0 16px;
    font-size: 0.8rem;
    color: rgba(196, 106, 46, 0.65);
    text-align: center;
}

.zz-popup-cta {
    width: 100%;
    min-height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, #e08a4a, #c46a2e);
    color: #1a1208;
    border: none;
}

.zz-popup-card.is-app {
    background: linear-gradient(165deg, #fffaf3 0%, #ffffff 48%, #f0fdf4 100%);
}
.zz-popup-card.is-app .zz-popup-accent {
    background: linear-gradient(90deg, #c46a2e, #22c55e);
}
.zz-popup-card.is-app .zz-popup-badge {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
}
.app-popup-brand {
    flex-direction: column;
    text-align: center;
    gap: 10px;
}
.app-popup-brand img {
    width: 88px !important;
    height: 88px !important;
    border-radius: 22px;
    box-shadow: 0 14px 28px rgba(196, 106, 46, 0.28);
}
.app-popup-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 4px 0 12px;
}
.app-popup-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 14px 12px;
    border-radius: 14px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
    transition: transform 0.15s ease;
}
.app-popup-btn:hover { transform: translateY(-2px); }
.app-popup-btn span { font-size: 0.92rem; }
.app-popup-btn small { font-size: 0.68rem; font-weight: 700; opacity: 0.8; }
.app-popup-install {
    background: linear-gradient(135deg, #e08a4a, #c46a2e);
    color: #1a1208;
}
.app-popup-channel {
    background: linear-gradient(135deg, #22c55e, #15803d);
    color: #fff;
}
.app-popup-btn.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
@media (max-width: 420px) {
    .app-popup-actions { grid-template-columns: 1fr; }
}

@keyframes zzFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes zzPopIn {
    from {
        opacity: 0;
        transform: translateY(22px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes zzPulse {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.35); opacity: 0; }
}

@media (max-width: 640px) {
    .zz-popup {
        padding: 0;
        align-items: flex-end;
    }

    .zz-popup-card {
        max-width: 100%;
        border-radius: 18px 18px 0 0;
        padding: 24px 18px calc(18px + var(--safe-bottom));
        animation: zzSheetUp 0.4s var(--ease) both;
        background: linear-gradient(
            180deg,
            rgba(196, 106, 46, 0.28) 0%,
            rgba(26, 20, 8, 0.92) 100%
        );
    }
}

@keyframes zzSheetUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .zz-popup-ring,
    .zz-popup-card,
    .zz-popup-backdrop {
        animation: none !important;
    }
}

/* ---------- Footer ---------- */
.site-footer {
    text-align: center;
    padding: 20px var(--page-pad-x) calc(24px + var(--safe-bottom));
    font-size: clamp(0.72rem, 2vw, 0.8rem);
    color: rgba(247, 243, 236, 0.4);
}

/* ============================================
   Responsive breakpoints ? all devices
   ============================================ */

/* Large tablets / small laptops */
@media (max-width: 1024px) {
    .gallery-frame {
        aspect-ratio: 16 / 9;
        max-height: min(380px, 42vw);
    }
}

/* Tablets */
@media (max-width: 768px) {
    :root {
        --nav-h: 64px;
    }

    .brand-logo-wrap {
        width: 44px;
        height: 44px;
    }

    .brand-sub {
        letter-spacing: 0.12em;
    }

    .gallery-frame {
        aspect-ratio: 16 / 10;
        min-height: 200px;
        max-height: 320px;
        mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 2%, #000 98%, transparent);
    }

    .home-actions .btn {
        flex: 1 1 100%;
        min-width: 0;
    }
}

/* Phones */
@media (max-width: 640px) {
    :root {
        --nav-h: 60px;
        --page-pad-x: 14px;
    }

    .brand-name-full {
        display: none;
    }

    .brand-name-short {
        display: inline;
    }

    .brand-sub {
        display: none;
    }

    .nav-link {
        padding: 8px 12px;
        font-size: 0.8rem;
        min-height: 40px;
    }

    .home {
        justify-content: flex-start;
        padding-top: clamp(24px, 6vw, 36px);
        gap: 22px;
    }

    .gallery-frame {
        aspect-ratio: 4 / 3;
        min-height: 190px;
        max-height: 260px;
    }

    .owner-proof {
        width: 100%;
        max-width: 100%;
        padding: 0 2px;
    }

    .owner-proof-inner {
        padding: 14px 12px 12px;
        gap: 12px;
        border-radius: 16px;
    }

    .owner-proof-badge {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .owner-proof-badge svg {
        width: 20px;
        height: 20px;
    }

    .home-actions {
        flex-direction: column;
        max-width: 100%;
        padding: 0 2px;
    }

    .home-actions .btn {
        width: 100%;
        flex: none;
        min-width: 0;
    }

    .btn svg {
        width: 17px;
        height: 17px;
    }
}

/* Small phones */
@media (max-width: 400px) {
    :root {
        --page-pad-x: 12px;
    }

    .brand-logo-wrap {
        width: 40px;
        height: 40px;
    }

    .nav-links {
        gap: 2px;
    }

    .nav-link {
        padding: 8px 10px;
        font-size: 0.76rem;
    }

    .welcome-eyebrow {
        letter-spacing: 0.12em;
    }

    .gallery-frame {
        aspect-ratio: 5 / 4;
        min-height: 170px;
        max-height: 220px;
        mask-image: none;
        -webkit-mask-image: none;
    }

    .btn-label-full {
        display: none;
    }

    .btn-label-short {
        display: inline;
    }
}

/* Landscape phones ? keep content usable */
@media (max-height: 500px) and (orientation: landscape) {
    .home {
        min-height: auto;
        justify-content: flex-start;
        padding-top: 16px;
        padding-bottom: 20px;
        gap: 16px;
    }

    .gallery-frame {
        aspect-ratio: 21 / 8;
        min-height: 120px;
        max-height: 160px;
    }

    .welcome-title {
        font-size: clamp(1.6rem, 5vw, 2.2rem);
        margin-bottom: 8px;
    }

    .welcome-text {
        font-size: 0.88rem;
    }
}

/* Very large screens */
@media (min-width: 1400px) {
    .gallery {
        width: min(1200px, 100%);
    }

    .gallery-frame {
        max-height: 460px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .brand-logo-ring,
    .brand-logo,
    .auth-logo,
    .gallery-track {
        animation: none !important;
    }
}

/* ---------- Referral card + team popup ---------- */
.ref-card {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 28px;
    padding: 0 var(--page-pad-x);
    animation: riseIn 0.75s var(--ease) 0.22s both;
}

.ref-shell {
    position: relative;
    padding: 16px;
    border-radius: 18px;
    background:
        linear-gradient(155deg, rgba(196, 106, 46, 0.18), rgba(26, 20, 8, 0.8) 52%, rgba(196, 106, 46, 0.12));
    border: 1px solid rgba(196, 106, 46, 0.32);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 220, 170, 0.12);
    overflow: hidden;
}

.ref-shell::before {
    content: '';
    position: absolute;
    left: -30px;
    bottom: -40px;
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(224, 138, 74, 0.22), transparent 70%);
    pointer-events: none;
}

.ref-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.ref-ico {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 240, 210, 0.22), transparent 55%),
        rgba(196, 106, 46, 0.18);
    border: 1px solid rgba(196, 106, 46, 0.3);
    box-shadow: 0 8px 18px rgba(196, 106, 46, 0.25);
}

.ref-ico svg {
    width: 34px;
    height: 34px;
}

.ref-copy {
    min-width: 0;
}

.ref-eyebrow {
    margin: 0 0 3px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(196, 106, 46, 0.85);
}

.ref-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.8vw, 1.4rem);
    font-weight: 700;
    color: #c46a2e;
    line-height: 1.2;
}

.ref-text {
    margin: 4px 0 0;
    font-size: 0.82rem;
    color: rgba(196, 106, 46, 0.72);
}

.ref-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.ref-input {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(196, 106, 46, 0.28);
    background: rgba(10, 8, 4, 0.45);
    color: #e08a4a;
    font-size: clamp(0.78rem, 2vw, 0.92rem);
    font-family: var(--font-body);
    outline: none;
}

.ref-input:focus {
    border-color: rgba(196, 106, 46, 0.6);
    box-shadow: 0 0 0 3px rgba(196, 106, 46, 0.15);
}

.ref-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 108px;
    padding: 0 16px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 700;
    color: #1a1208;
    background: linear-gradient(135deg, #e08a4a, #c46a2e);
    box-shadow: 0 10px 22px rgba(196, 106, 46, 0.35);
    transition: transform 0.2s var(--ease), box-shadow 0.2s, filter 0.2s;
}

.ref-btn svg {
    width: 18px;
    height: 18px;
}

.ref-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(196, 106, 46, 0.42);
}

.ref-btn:active {
    transform: translateY(0);
}

.ref-btn.is-copied {
    background: linear-gradient(135deg, #d4a05a, #a86328);
    filter: saturate(1.1);
}

.team-popup[hidden] {
    display: none !important;
}

.team-popup.show {
    display: flex !important;
}

.zz-popup-card.is-team .zz-popup-check {
    background: linear-gradient(145deg, #e08a4a, #c46a2e);
}

.auth-ref-note {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(196, 106, 46, 0.12);
    border: 1px solid rgba(196, 106, 46, 0.28);
    color: #c46a2e;
    font-size: 0.86rem;
    text-align: center;
}

.auth-ref-note strong {
    color: #e08a4a;
}

@media (max-width: 560px) {
    .ref-card {
        margin-bottom: 14px;
        padding: 0 10px;
    }

    .ref-shell {
        padding: 12px;
        border-radius: 14px;
    }

    .ref-head {
        gap: 10px;
        margin-bottom: 12px;
    }

    .ref-ico {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .ref-ico svg {
        width: 28px;
        height: 28px;
    }

    .ref-text {
        display: none;
    }

    .ref-row {
        flex-direction: column;
        gap: 8px;
    }

    .ref-btn {
        min-height: 46px;
        width: 100%;
    }
}

/* ---------- Member Hub ? quick access buttons ---------- */
.hub {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 32px;
    padding: 0 var(--page-pad-x);
    animation: riseIn 0.75s var(--ease) 0.26s both;
}

.hub-shell {
    position: relative;
    padding: 14px;
    border-radius: 18px;
    background:
        linear-gradient(155deg, rgba(196, 106, 46, 0.16), rgba(26, 20, 8, 0.78) 50%, rgba(196, 106, 46, 0.1));
    border: 1px solid rgba(196, 106, 46, 0.3);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 220, 170, 0.12);
    overflow: hidden;
}

.hub-shell::before {
    content: '';
    position: absolute;
    right: -36px;
    top: -44px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(224, 138, 74, 0.2), transparent 70%);
    pointer-events: none;
}

.hub-head {
    position: relative;
    z-index: 1;
    margin-bottom: 12px;
}

.hub-eyebrow {
    margin: 0 0 3px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(196, 106, 46, 0.85);
}

.hub-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.8vw, 1.4rem);
    font-weight: 700;
    color: #c46a2e;
}

.hub-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.hub-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 10px 12px;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 210, 160, 0.16);
    color: #c46a2e;
    text-decoration: none;
    transition: transform 0.25s var(--ease), border-color 0.25s, box-shadow 0.25s, background 0.25s;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
    .hub-btn:hover {
        transform: translateY(-2px);
        border-color: rgba(196, 106, 46, 0.55);
        box-shadow: 0 12px 26px rgba(20, 10, 0, 0.28);
        background: linear-gradient(145deg, rgba(196, 106, 46, 0.14), rgba(255, 255, 255, 0.03));
    }

    .hub-btn:hover .hub-arrow {
        transform: translateX(3px);
        color: #e08a4a;
    }
}

.hub-btn:active {
    transform: translateY(0);
}

.hub-ico {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 240, 210, 0.2), transparent 55%),
        rgba(196, 106, 46, 0.16);
    border: 1px solid rgba(196, 106, 46, 0.28);
    box-shadow: 0 8px 16px rgba(196, 106, 46, 0.22);
}

.hub-ico svg {
    width: 30px;
    height: 30px;
}

.hub-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.hub-copy strong {
    font-size: clamp(0.88rem, 2.2vw, 1.02rem);
    font-weight: 700;
    line-height: 1.2;
    color: #c46a2e;
}

.hub-copy small {
    font-size: 0.72rem;
    color: rgba(196, 106, 46, 0.72);
}

.hub-arrow {
    flex-shrink: 0;
    font-size: 1.1rem;
    color: #c46a2e;
    transition: transform 0.25s var(--ease), color 0.25s;
}

.hub-btn-purchase .hub-ico { background: rgba(196, 106, 46, 0.18); }
.hub-btn-sells .hub-ico { background: rgba(224, 138, 74, 0.16); }
.hub-btn-team .hub-ico { background: rgba(196, 106, 46, 0.2); }
.hub-btn-reward .hub-ico { background: rgba(240, 160, 96, 0.16); }
.hub-btn-support .hub-ico { background: rgba(196, 106, 46, 0.18); }
.hub-btn-app .hub-ico { background: rgba(224, 138, 74, 0.18); }

@media (max-width: 560px) {
    .hub {
        margin-bottom: 14px;
        padding: 0 10px;
    }

    .hub-shell {
        padding: 12px;
        border-radius: 14px;
    }

    .hub-grid {
        gap: 8px;
    }

    .hub-btn {
        min-height: 64px;
        gap: 10px;
        padding: 8px 10px;
        border-radius: 12px;
    }

    .hub-ico {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .hub-ico svg {
        width: 26px;
        height: 26px;
    }

    .hub-copy small {
        display: none;
    }

    .hub-arrow {
        font-size: 1rem;
    }
}

/* ---------- Live Trade ? candlestick terminal ---------- */
.live-trade {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 34px;
    padding: 0 var(--page-pad-x);
    animation: riseIn 0.75s var(--ease) 0.3s both;
}

.live-trade-shell {
    position: relative;
    padding: 14px;
    border-radius: 18px;
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 55% at 15% 10%, rgba(196, 106, 46, 0.32), transparent 55%),
        radial-gradient(ellipse 65% 50% at 90% 20%, rgba(224, 138, 74, 0.22), transparent 52%),
        radial-gradient(ellipse 80% 55% at 50% 100%, rgba(196, 106, 46, 0.18), transparent 55%),
        linear-gradient(165deg, rgba(26, 20, 8, 0.55) 0%, rgba(42, 26, 12, 0.48) 42%, rgba(24, 18, 8, 0.55) 100%);
    border: 1px solid rgba(196, 106, 46, 0.3);
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 220, 170, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.live-trade-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    opacity: 0.45;
    pointer-events: none;
}

.live-trade-shell::after {
    content: '';
    position: absolute;
    right: -36px;
    top: -46px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(224, 138, 74, 0.24), transparent 70%);
    pointer-events: none;
}

.live-trade-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.live-trade-eyebrow {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 3px;
    color: rgba(196, 106, 46, 0.85);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.live-trade-pulse,
.trade-live i {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #e08a4a;
    box-shadow: 0 0 0 0 rgba(224, 138, 74, 0.55);
    animation: tradePulse 1.7s ease-out infinite;
}

.live-trade-title {
    margin: 0;
    color: #c46a2e;
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.8vw, 1.5rem);
    line-height: 1.1;
}

.live-trade-status {
    padding: 5px 11px;
    border-radius: 999px;
    color: #1a1208;
    background: linear-gradient(135deg, #e08a4a, #c46a2e);
    box-shadow: 0 6px 16px rgba(196, 106, 46, 0.34);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.live-trade-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.trade-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 12px;
    overflow: hidden;
    border: 1px solid rgba(196, 106, 46, 0.3);
    border-radius: 16px;
    color: #ffe8c8;
    background:
        radial-gradient(ellipse 70% 55% at 15% 10%, rgba(196, 106, 46, 0.32), transparent 55%),
        radial-gradient(ellipse 65% 50% at 90% 20%, rgba(224, 138, 74, 0.22), transparent 52%),
        radial-gradient(ellipse 80% 55% at 50% 100%, rgba(196, 106, 46, 0.18), transparent 55%),
        linear-gradient(165deg, rgba(26, 20, 8, 0.72) 0%, rgba(42, 26, 12, 0.68) 42%, rgba(24, 18, 8, 0.72) 100%);
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 220, 170, 0.12);
    text-decoration: none;
    transition: transform 0.25s var(--ease), border-color 0.25s, box-shadow 0.25s;
}

.trade-top {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.trade-img {
    position: relative;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(196, 106, 46, 0.35);
    border-radius: 11px;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 230, 190, 0.18), transparent 55%),
        rgba(196, 106, 46, 0.16);
}

.trade-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.trade-content {
    position: relative;
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 1px;
}

.trade-live {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 1px;
    color: #e08a4a;
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.trade-live i {
    width: 6px;
    height: 6px;
    background: #e08a4a;
}

.trade-content strong {
    overflow: hidden;
    color: #ffe0b8;
    font-size: clamp(0.86rem, 1.7vw, 1rem);
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trade-content small {
    overflow: hidden;
    color: rgba(255, 220, 180, 0.62);
    font-size: 0.64rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trade-price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.trade-price {
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.6vw, 1.45rem);
    font-weight: 700;
    line-height: 1;
    color: #2ecc71;
    transition: color 0.25s, transform 0.25s var(--ease);
}

.trade-price.is-up {
    color: #2ecc71;
    transform: translateY(-1px);
}

.trade-price.is-down {
    color: #e74c3c;
    transform: translateY(1px);
}

.trade-cur {
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #2ecc71;
}

.trade-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid rgba(46, 204, 113, 0.35);
    background: rgba(46, 204, 113, 0.12);
    color: #2ecc71;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    transition: color 0.3s, background 0.3s, border-color 0.3s;
}

.trade-change.is-up {
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.14);
    border-color: rgba(46, 204, 113, 0.4);
}

.trade-change.is-down {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.14);
    border-color: rgba(231, 76, 60, 0.4);
}

.trade-caret {
    font-size: 0.56rem;
    line-height: 1;
    transition: transform 0.3s var(--ease);
}

.trade-change.is-down .trade-caret {
    transform: rotate(180deg);
}

.trade-ohlc {
    display: flex;
    gap: 10px;
    color: rgba(255, 220, 180, 0.7);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.trade-ohlc b {
    color: #ffe0b8;
    font-weight: 700;
}

.trade-chart {
    position: relative;
    display: block;
    width: 100%;
    height: 138px;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(196, 106, 46, 0.22);
    background:
        radial-gradient(ellipse 70% 55% at 20% 15%, rgba(196, 106, 46, 0.2), transparent 55%),
        radial-gradient(ellipse 60% 50% at 85% 30%, rgba(224, 138, 74, 0.14), transparent 50%),
        linear-gradient(165deg, rgba(18, 14, 6, 0.92) 0%, rgba(28, 18, 8, 0.95) 100%);
}

.trade-chart-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.trade-candle-up {
    fill: #2ecc71;
    stroke: #2ecc71;
}

.trade-candle-down {
    fill: #e74c3c;
    stroke: #e74c3c;
}

.trade-wick {
    stroke-width: 1.2;
    stroke-linecap: round;
}

@media (hover: hover) and (pointer: fine) {
    .trade-card:hover {
        transform: translateY(-3px);
        border-color: rgba(196, 106, 46, 0.55);
        box-shadow: 0 16px 34px rgba(20, 10, 0, 0.4);
    }
}

@keyframes tradePulse {
    0% { box-shadow: 0 0 0 0 rgba(224, 138, 74, 0.55); }
    70%, 100% { box-shadow: 0 0 0 7px rgba(224, 138, 74, 0); }
}

@media (max-width: 760px) {
    .live-trade-grid {
        grid-template-columns: 1fr;
    }

    .trade-chart {
        height: 148px;
    }
}

@media (max-width: 560px) {
    .live-trade {
        margin-bottom: 28px;
        padding: 0 10px;
    }

    .live-trade-shell {
        padding: 12px;
        border-radius: 14px;
    }

    .live-trade-grid {
        gap: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .live-trade-pulse,
    .trade-live i {
        animation: none !important;
    }

    .trade-price {
        transition: none !important;
    }
}

/* ---- Buy packages (user marketplace) ---- */
.buy-pkg-page .dash-main { display: none; }

.buy-pkg {
    max-width: 980px;
    margin: 0 auto;
    padding: 18px 14px 40px;
}

.buy-pkg-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, #2a1a0c, #1e293b);
    color: #fff6ea;
    box-shadow: 0 12px 28px rgba(20, 10, 0, 0.2);
}

.buy-pkg-back {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255,255,255,0.1);
    color: #fff6ea;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 700;
}

.buy-pkg-bar-text {
    flex: 1;
    min-width: 0;
}

.buy-pkg-bar-text span {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #e08a4a;
}

.buy-pkg-bar-text strong {
    font-size: 1.05rem;
}

.buy-pkg-intro {
    margin-bottom: 18px;
}

.buy-pkg-eyebrow {
    margin: 0 0 6px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #c46a2e;
}

.buy-pkg-intro h1 {
    margin: 0 0 6px;
    font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
    font-size: clamp(1.6rem, 4vw, 2.1rem);
    color: #1a1208;
    line-height: 1.15;
}

.buy-pkg-intro p {
    margin: 0;
    color: #6b5540;
    font-size: 0.95rem;
}

.buy-pkg-empty {
    text-align: center;
    padding: 48px 20px;
    border-radius: 20px;
    background: rgba(255, 248, 238, 0.9);
    border: 1px solid rgba(196, 106, 46, 0.18);
}

.buy-pkg-empty h2 {
    margin: 12px 0 6px;
    color: #1a1208;
}

.buy-pkg-empty p {
    margin: 0 0 16px;
    color: #6b5540;
}

.buy-pkg-empty-btn {
    display: inline-flex;
    padding: 12px 18px;
    border-radius: 12px;
    background: linear-gradient(135deg, #e08a4a, #c46a2e);
    color: #1a1208;
    font-weight: 800;
    text-decoration: none;
}

.buy-pkg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}

/* Gradient-border card: outer = border, inner = surface */
.buy-pkg-card {
    --pkg-a: #e08a4a;
    --pkg-b: #8a4b1d;
    --pkg-glow: rgba(224, 138, 74, 0.35);
    position: relative;
    padding: 2px;
    border-radius: 22px;
    background: linear-gradient(150deg, var(--pkg-a), rgba(255,255,255,0.16) 38%, var(--pkg-b) 78%, var(--pkg-a));
    box-shadow: 0 18px 40px rgba(20, 10, 0, 0.28);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.buy-pkg-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 52px rgba(20, 10, 0, 0.36), 0 0 0 4px var(--pkg-glow);
}

.buy-pkg-card-hen { --pkg-a: #f5a623; --pkg-b: #92400e; --pkg-glow: rgba(245, 166, 35, 0.25); }
.buy-pkg-card-vac { --pkg-a: #34d3ee; --pkg-b: #155e75; --pkg-glow: rgba(52, 211, 238, 0.22); }
.buy-pkg-card-sol { --pkg-a: #fbbf24; --pkg-b: #854d0e; --pkg-glow: rgba(251, 191, 36, 0.25); }

.buy-pkg-card-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 13px;
    height: 100%;
    padding: 18px 16px 16px;
    border-radius: 20px;
    color: #fff6ea;
    background:
        radial-gradient(120% 90% at 100% 0%, var(--pkg-glow), transparent 55%),
        linear-gradient(160deg, #241307 0%, #170e06 60%, #1d1208 100%);
    overflow: hidden;
}

.buy-pkg-card-inner::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 16px;
    border: 1px dashed rgba(255, 246, 234, 0.14);
    pointer-events: none;
}

.buy-pkg-card-popular {
    background: linear-gradient(150deg, #ffd77a, var(--pkg-a) 40%, var(--pkg-b) 80%, #ffd77a);
}

.buy-pkg-ribbon {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffd77a, #e08a4a);
    color: #2a1503;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(224, 138, 74, 0.45);
}

.buy-pkg-ribbon svg {
    width: 12px;
    height: 12px;
}

.buy-pkg-card-top {
    display: flex;
    gap: 12px;
    align-items: center;
}

.buy-pkg-card-ico {
    position: relative;
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.22), rgba(0,0,0,0.35));
}

.buy-pkg-card-ico img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

.buy-pkg-ico-ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--pkg-a);
    border-right-color: transparent;
    border-bottom-color: rgba(255,255,255,0.25);
    opacity: 0.9;
}

.buy-pkg-card:hover .buy-pkg-ico-ring {
    animation: buyPkgSpin 2.4s linear infinite;
}

@keyframes buyPkgSpin {
    to { transform: rotate(360deg); }
}

.buy-pkg-card-title {
    min-width: 0;
}

.buy-pkg-card h2 {
    margin: 0 0 3px;
    font-size: 1.14rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.buy-pkg-plan-tag {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pkg-a);
}

.buy-pkg-price-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 13px;
    border-radius: 14px;
    background: rgba(255, 246, 234, 0.06);
    border: 1px solid rgba(255, 246, 234, 0.12);
}

.buy-pkg-price-label {
    display: block;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 246, 234, 0.6);
}

.buy-pkg-price {
    font-size: 1.4rem;
    font-weight: 900;
    background: linear-gradient(120deg, #ffe9c9, var(--pkg-a));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.buy-pkg-duration-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(0,0,0,0.32);
    border: 1px solid rgba(255, 246, 234, 0.14);
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.buy-pkg-duration-pill i { color: var(--pkg-a); }

.buy-pkg-duration-pill svg {
    width: 14px;
    height: 14px;
    color: var(--pkg-a);
    flex: 0 0 auto;
}

.buy-pkg-desc {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 246, 234, 0.78);
}

.buy-pkg-daily-hero {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--pkg-glow), rgba(0,0,0,0.25));
    border: 1px solid var(--pkg-a);
}

.buy-pkg-daily-ico {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(0,0,0,0.3);
    color: var(--pkg-a);
    font-size: 1rem;
}

.buy-pkg-daily-ico svg {
    width: 18px;
    height: 18px;
}

.buy-pkg-daily-hero strong {
    display: block;
    font-size: 0.98rem;
    font-weight: 900;
}

.buy-pkg-daily-hero small {
    font-size: 0.7rem;
    color: rgba(255, 246, 234, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.buy-pkg-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.buy-pkg-facts li {
    position: relative;
    padding: 9px 11px 9px 13px;
    border-radius: 12px;
    background: rgba(255, 246, 234, 0.05);
    border: 1px solid rgba(255, 246, 234, 0.1);
    border-left: 3px solid var(--pkg-a);
}

.buy-pkg-fact-ico {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 14px;
    height: 14px;
    color: rgba(255, 246, 234, 0.35);
}

.buy-pkg-facts span {
    display: block;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 246, 234, 0.6);
}

.buy-pkg-facts b {
    font-size: 0.96rem;
    font-weight: 800;
}

.buy-pkg-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 14px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--pkg-a), var(--pkg-b));
    color: #fff;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-decoration: none;
    box-shadow: 0 10px 22px var(--pkg-glow);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.buy-pkg-cta svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.buy-pkg-cta:hover {
    color: #fff;
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 14px 28px var(--pkg-glow);
}

.buy-pkg-cta-arrow {
    transition: transform 0.2s ease;
}

.buy-pkg-cta:hover .buy-pkg-cta-arrow {
    transform: translateX(4px);
}

@media (max-width: 560px) {
    .buy-pkg-facts {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .buy-pkg-price {
        font-size: 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .buy-pkg-card,
    .buy-pkg-cta,
    .buy-pkg-ico-ring {
        transition: none !important;
        animation: none !important;
    }
}

/* ---- Sell trade markets (user) ---- */
.sell-mkt-page .dash-main { display: none; }

.sell-mkt {
    max-width: 1020px;
    margin: 0 auto;
    padding: 18px 14px 40px;
}

.sell-mkt-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, #2a1a0c, #1e293b);
    color: #fff6ea;
    box-shadow: 0 12px 28px rgba(20, 10, 0, 0.2);
}

.sell-mkt-back {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255,255,255,0.1);
    color: #fff6ea;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 700;
}

.sell-mkt-bar-text {
    flex: 1;
    min-width: 0;
}

.sell-mkt-bar-text span {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #e08a4a;
}

.sell-mkt-bar-text strong {
    font-size: 1.05rem;
}

.sell-mkt-top {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}

.sell-mkt-bal,
.sell-mkt-best,
.sell-mkt-count {
    padding: 14px;
    border-radius: 16px;
    color: #fff;
    box-shadow: 0 12px 26px rgba(20, 10, 0, 0.16);
}

.sell-mkt-bal {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #b45309;
}

.sell-mkt-best {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #15803d;
}

.sell-mkt-best-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    padding: 3px;
    flex: 0 0 auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.sell-mkt-card-ico-best {
    background: rgba(255, 255, 255, 0.22) !important;
    border-radius: 50% !important;
}

.sell-mkt-card-ico-best img {
    border-radius: 50%;
    object-fit: contain;
}
.sell-mkt-count { background: #334155; }

.sell-mkt-top em {
    display: block;
    font-style: normal;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.88;
}

.sell-mkt-top strong {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.2;
}

.sell-mkt-top small {
    font-size: 0.72rem;
    opacity: 0.85;
}

.sell-mkt-intro {
    margin-bottom: 16px;
}

.sell-mkt-eyebrow {
    margin: 0 0 6px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #c46a2e;
}

.sell-mkt-intro h1 {
    margin: 0 0 6px;
    font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
    font-size: clamp(1.6rem, 4vw, 2.05rem);
    color: #1a1208;
    line-height: 1.15;
}

.sell-mkt-intro p {
    margin: 0;
    color: #6b5540;
    font-size: 0.95rem;
}

.sell-mkt-empty {
    text-align: center;
    padding: 48px 20px;
    border-radius: 20px;
    background: rgba(255, 248, 238, 0.9);
    border: 1px solid rgba(196, 106, 46, 0.18);
}

.sell-mkt-empty h2 {
    margin: 12px 0 6px;
    color: #1a1208;
}

.sell-mkt-empty p {
    margin: 0 0 16px;
    color: #6b5540;
}

.sell-mkt-empty-btn {
    display: inline-flex;
    padding: 12px 18px;
    border-radius: 12px;
    background: linear-gradient(135deg, #e08a4a, #c46a2e);
    color: #1a1208;
    font-weight: 800;
    text-decoration: none;
}

.sell-mkt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 14px;
}

.sell-mkt-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    color: #fff;
    box-shadow: 0 16px 32px rgba(20, 10, 0, 0.18);
}

.sell-mkt-card-egg { background: #d97706; }
.sell-mkt-card-tok { background: #0891b2; }
.sell-mkt-card-wat { background: #ca8a04; }

.sell-mkt-flag {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #dcfce7;
    color: #15803d;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sell-mkt-card-top {
    display: flex;
    gap: 12px;
    align-items: center;
}

.sell-mkt-card-ico {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,0.2);
    flex-shrink: 0;
}

.sell-mkt-card h2 {
    margin: 0 0 2px;
    font-size: 1.02rem;
    font-weight: 800;
    padding-right: 60px;
}

.sell-mkt-card-top small {
    font-size: 0.74rem;
    opacity: 0.85;
}

.sell-mkt-rate {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(0,0,0,0.24);
}

.sell-mkt-rate em {
    display: block;
    font-style: normal;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.85;
}

.sell-mkt-rate strong {
    font-size: 1.35rem;
    font-weight: 800;
}

.sell-mkt-rate small {
    font-size: 0.72rem;
    opacity: 0.85;
    margin-left: 4px;
}

.sell-mkt-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sell-mkt-facts li {
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.14);
}

.sell-mkt-facts span {
    display: block;
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.85;
}

.sell-mkt-facts b {
    font-size: 0.9rem;
}

.sell-mkt-desc {
    margin: 0;
    font-size: 0.83rem;
    line-height: 1.45;
    opacity: 0.92;
}

.sell-mkt-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(0,0,0,0.28);
    color: #fff;
    font-weight: 800;
    text-decoration: none;
}

.sell-mkt-cta:hover {
    background: rgba(0,0,0,0.4);
    color: #fff;
}

@media (max-width: 700px) {
    .sell-mkt-top {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .sell-mkt-facts {
        grid-template-columns: 1fr;
    }
}

/* ---- Buy flow: package detail ? checkout ? purchase record ---- */
.buy-flow-page .dash-main { display: none; }

.buy-flow {
    max-width: 720px;
    margin: 0 auto;
    padding: 18px 14px 48px;
}

.buy-flow-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, #2a1a0c, #1e293b);
    color: #fff6ea;
    box-shadow: 0 12px 28px rgba(20, 10, 0, 0.2);
}

.buy-flow-back {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255,255,255,0.1);
    color: #fff6ea;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 700;
}

.buy-flow-bar-text { flex: 1; min-width: 0; }
.buy-flow-bar-text span {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #e08a4a;
}
.buy-flow-bar-text strong { font-size: 1.05rem; }

.buy-flow-alert {
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(185, 28, 28, 0.1);
    border: 1px solid rgba(185, 28, 28, 0.28);
    color: #7f1d1d;
    font-weight: 700;
    font-size: 0.9rem;
}

.pkg-detail-card {
    --pkg-a: #e08a4a;
    --pkg-b: #8a4b1d;
    padding: 2px;
    border-radius: 22px;
    background: linear-gradient(150deg, var(--pkg-a), rgba(255,255,255,0.2), var(--pkg-b));
    margin-bottom: 16px;
    box-shadow: 0 18px 40px rgba(20, 10, 0, 0.22);
}
.pkg-detail-hen { --pkg-a: #f5a623; --pkg-b: #92400e; }
.pkg-detail-vac { --pkg-a: #34d3ee; --pkg-b: #155e75; }
.pkg-detail-sol { --pkg-a: #fbbf24; --pkg-b: #854d0e; }

.pkg-detail-inner {
    border-radius: 20px;
    padding: 18px 16px;
    color: #fff6ea;
    background: linear-gradient(160deg, #241307, #170e06 70%);
}

.pkg-detail-head {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 12px;
}

.pkg-detail-ico {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,246,234,0.14);
}
.pkg-detail-ico img { width: 52px; height: 52px; object-fit: contain; }

.pkg-detail-tag {
    margin: 0 0 4px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pkg-a);
}
.pkg-detail-inner h1 {
    margin: 0 0 4px;
    font-size: 1.35rem;
    font-weight: 900;
}
.pkg-detail-unit {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: #ffd77a;
}
.pkg-detail-unit span { font-size: 0.75rem; opacity: 0.7; font-weight: 700; }
.pkg-detail-desc {
    margin: 0 0 14px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(255,246,234,0.78);
}

.pkg-detail-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.pkg-detail-grid li {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,246,234,0.06);
    border: 1px solid rgba(255,246,234,0.1);
    border-left: 3px solid var(--pkg-a);
}
.pkg-detail-grid span {
    display: block;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,246,234,0.55);
}
.pkg-detail-grid b { font-size: 1rem; }

.pkg-qty-panel {
    padding: 18px 16px;
    border-radius: 20px;
    background: rgba(255, 248, 238, 0.92);
    border: 1px solid rgba(196, 106, 46, 0.18);
    box-shadow: 0 12px 28px rgba(20, 10, 0, 0.08);
}

.pkg-qty-head h2 {
    margin: 0 0 4px;
    font-size: 1.15rem;
    color: #1a1208;
}
.pkg-qty-head p {
    margin: 0 0 14px;
    color: #6b5540;
    font-size: 0.88rem;
}

.pkg-qty-suggests {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.pkg-qty-chip {
    min-width: 64px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1.5px solid rgba(196, 106, 46, 0.28);
    background: #fff;
    color: #1a1208;
    font-weight: 900;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.18s ease;
}
.pkg-qty-chip.is-active,
.pkg-qty-chip:hover {
    background: linear-gradient(135deg, #e08a4a, #c46a2e);
    border-color: transparent;
    color: #1a1208;
    box-shadow: 0 8px 18px rgba(196, 106, 46, 0.28);
}

.pkg-qty-field { display: block; margin-bottom: 14px; }
.pkg-qty-field > span {
    display: block;
    margin-bottom: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a6540;
}
.pkg-qty-field small {
    display: block;
    margin-top: 6px;
    color: #8a6540;
    font-size: 0.78rem;
}

.pkg-qty-stepper {
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    gap: 8px;
}
.pkg-qty-btn {
    border: none;
    border-radius: 12px;
    background: #2a1a0c;
    color: #fff6ea;
    font-size: 1.3rem;
    font-weight: 800;
    cursor: pointer;
}
.pkg-qty-stepper input {
    width: 100%;
    text-align: center;
    border-radius: 12px;
    border: 1.5px solid rgba(196, 106, 46, 0.3);
    padding: 12px;
    font-size: 1.25rem;
    font-weight: 900;
    color: #1a1208;
    background: #fff;
}

.pkg-qty-live {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}
.pkg-qty-live > div {
    padding: 11px 12px;
    border-radius: 12px;
    background: rgba(196, 106, 46, 0.08);
    border: 1px solid rgba(196, 106, 46, 0.14);
}
.pkg-qty-live span {
    display: block;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8a6540;
}
.pkg-qty-live strong {
    font-size: 0.92rem;
    color: #1a1208;
}

.pkg-confirm-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 15px 18px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #e08a4a, #c46a2e);
    color: #1a1208;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(196, 106, 46, 0.35);
    cursor: pointer;
    transition: transform 0.18s ease, filter 0.18s ease;
}
.pkg-confirm-btn:hover {
    color: #1a1208;
    filter: brightness(1.05);
    transform: translateY(-2px);
}
.pkg-confirm-btn span { font-size: 1rem; }
.pkg-confirm-btn strong { font-size: 1.15rem; }
.pkg-confirm-btn.is-loading,
.pkg-confirm-btn:disabled {
    opacity: 0.7;
    pointer-events: none;
}

/* Checkout */
.chk-summary {
    --pkg-a: #e08a4a;
    margin-bottom: 16px;
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(160deg, #241307, #170e06);
    color: #fff6ea;
    border: 1px solid rgba(224, 138, 74, 0.35);
}
.chk-summary-hen { border-color: rgba(245, 166, 35, 0.4); }
.chk-summary-vac { border-color: rgba(52, 211, 238, 0.35); }
.chk-summary-sol { border-color: rgba(251, 191, 36, 0.4); }

.chk-summary-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.chk-summary-top img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 12px;
    background: rgba(255,255,255,0.08);
    padding: 4px;
}
.chk-summary-top h1 {
    margin: 0;
    font-size: 1.1rem;
}
.chk-summary-top p {
    margin: 2px 0 0;
    font-size: 0.8rem;
    color: rgba(255,246,234,0.65);
}
.chk-summary-price {
    margin-left: auto;
    font-size: 1.2rem;
    color: #ffd77a;
}

.chk-summary-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.chk-summary-facts li {
    padding: 8px;
    border-radius: 10px;
    background: rgba(255,246,234,0.06);
    text-align: center;
}
.chk-summary-facts span {
    display: block;
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.6;
}
.chk-summary-facts b { font-size: 0.82rem; }

.chk-section {
    margin-bottom: 16px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 248, 238, 0.95);
    border: 1px solid rgba(196, 106, 46, 0.16);
}
.chk-section-head h2 {
    margin: 0 0 4px;
    font-size: 1.05rem;
    color: #1a1208;
}
.chk-section-head p {
    margin: 0 0 14px;
    color: #6b5540;
    font-size: 0.85rem;
}

.chk-methods {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}
.chk-method {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 8px;
    border-radius: 14px;
    border: 1.5px solid rgba(196, 106, 46, 0.2);
    background: #fff;
    cursor: pointer;
    font-weight: 800;
    font-size: 0.82rem;
    color: #1a1208;
    transition: 0.18s ease;
}
.chk-method img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}
.chk-method-fallback {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #2a1a0c;
    color: #ffd77a;
    font-weight: 900;
}
.chk-method.is-active {
    border-color: #c46a2e;
    background: linear-gradient(180deg, #fff8ee, #ffe8d0);
    box-shadow: 0 8px 18px rgba(196, 106, 46, 0.2);
}

.chk-account {
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, #2a1a0c, #1e293b);
    color: #fff6ea;
}
.chk-account-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,246,234,0.1);
}
.chk-account-row:last-of-type { border-bottom: none; }
.chk-account-row > span {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,246,234,0.55);
}
.chk-account-copy {
    display: flex;
    align-items: center;
    gap: 8px;
}
.chk-copy-btn {
    padding: 5px 10px;
    border: none;
    border-radius: 8px;
    background: rgba(224, 138, 74, 0.9);
    color: #1a1208;
    font-size: 0.7rem;
    font-weight: 900;
    cursor: pointer;
}
.chk-copy-btn.is-copied { background: #22c55e; color: #fff; }
.chk-account-hint {
    margin: 10px 0 0;
    font-size: 0.82rem;
    color: rgba(255,246,234,0.75);
}
.chk-account-hint b { color: #ffd77a; }

.chk-table-card {
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(196, 106, 46, 0.18);
    background: #fff;
}
.chk-table {
    width: 100%;
    border-collapse: collapse;
}
.chk-table th,
.chk-table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(196, 106, 46, 0.1);
    text-align: left;
    vertical-align: middle;
    font-size: 0.9rem;
}
.chk-table tr:last-child th,
.chk-table tr:last-child td { border-bottom: none; }
.chk-table th {
    width: 34%;
    color: #8a6540;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(255, 248, 238, 0.8);
}
.chk-table td { color: #1a1208; font-weight: 700; }

.chk-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1.5px solid rgba(196, 106, 46, 0.28);
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1208;
    background: #fffaf3;
}
.chk-input:focus {
    outline: none;
    border-color: #c46a2e;
    box-shadow: 0 0 0 3px rgba(196, 106, 46, 0.18);
}

.chk-upload { display: block; cursor: pointer; }
.chk-upload input { position: absolute; opacity: 0; width: 0; height: 0; }
.chk-upload-ui {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1.5px dashed rgba(196, 106, 46, 0.4);
    background: rgba(255, 248, 238, 0.9);
    color: #6b5540;
    font-weight: 700;
    font-size: 0.86rem;
}
.chk-upload-ui svg {
    width: 20px;
    height: 20px;
    color: #c46a2e;
    flex: 0 0 auto;
}
.chk-preview {
    display: block;
    margin-top: 10px;
    max-width: 100%;
    max-height: 160px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid rgba(196, 106, 46, 0.2);
}

.chk-submit { margin-top: 4px; }

/* Purchase records */
.pr-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}
.pr-stat {
    padding: 12px;
    border-radius: 14px;
    background: rgba(255, 248, 238, 0.95);
    border: 1px solid rgba(196, 106, 46, 0.16);
    text-align: center;
}
.pr-stat span {
    display: block;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8a6540;
}
.pr-stat strong {
    font-size: 1.35rem;
    color: #c46a2e;
}
.pr-stat.is-ok strong { color: #15803d; }
.pr-stat.is-bad strong { color: #b91c1c; }

.pr-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    overflow-x: auto;
    padding-bottom: 2px;
}
.pr-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,248,238,0.9);
    border: 1px solid rgba(196, 106, 46, 0.16);
    color: #6b5540;
    text-decoration: none;
    font-weight: 800;
    font-size: 0.82rem;
}
.pr-tab em {
    font-style: normal;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(196, 106, 46, 0.12);
    font-size: 0.72rem;
}
.pr-tab.is-active {
    background: linear-gradient(135deg, #e08a4a, #c46a2e);
    border-color: transparent;
    color: #1a1208;
}

.pr-slips {
    display: grid;
    gap: 12px;
}
.pr-slip {
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 248, 238, 0.96);
    border: 1px solid rgba(196, 106, 46, 0.16);
    box-shadow: 0 10px 24px rgba(20, 10, 0, 0.06);
}
.pr-slip-pending { border-left: 4px solid #d97706; }
.pr-slip-approved { border-left: 4px solid #15803d; }
.pr-slip-rejected { border-left: 4px solid #b91c1c; }

.pr-slip-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 10px;
}
.pr-slip-tag {
    margin: 0 0 2px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c46a2e;
}
.pr-slip-head h2 {
    margin: 0;
    font-size: 1.05rem;
    color: #1a1208;
}

.pr-badge {
    flex: 0 0 auto;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pr-badge-pending { background: #fef3c7; color: #92400e; }
.pr-badge-approved { background: #dcfce7; color: #166534; }
.pr-badge-rejected { background: #fee2e2; color: #991b1b; }

.pr-slip-amount {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    margin-bottom: 10px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2a1a0c, #1e293b);
    color: #fff6ea;
}
.pr-slip-amount span {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.65;
}
.pr-slip-amount strong {
    font-size: 1.2rem;
    color: #ffd77a;
}

.pr-slip-facts {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.pr-slip-facts li {
    padding: 8px;
    border-radius: 10px;
    background: rgba(196, 106, 46, 0.07);
    text-align: center;
}
.pr-slip-facts span {
    display: block;
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #8a6540;
}
.pr-slip-facts b {
    font-size: 0.82rem;
    color: #1a1208;
}

.pr-slip-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}
.pr-slip-meta div {
    padding: 8px 10px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(196, 106, 46, 0.12);
}
.pr-slip-meta span {
    display: block;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #8a6540;
}
.pr-slip-meta strong {
    font-size: 0.85rem;
    color: #1a1208;
    word-break: break-all;
}

.pr-slip-note {
    margin: 0 0 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(185, 28, 28, 0.06);
    color: #7f1d1d;
    font-size: 0.85rem;
}

.pr-slip-proof {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(196, 106, 46, 0.16);
    text-decoration: none;
    color: #c46a2e;
    font-weight: 800;
    font-size: 0.85rem;
}
.pr-slip-proof img {
    width: 64px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
}

.pr-profit-toast {
    margin: 0 0 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, #166534, #15803d);
    color: #ecfdf5;
    font-weight: 800;
    font-size: 0.88rem;
    box-shadow: 0 10px 24px rgba(22, 101, 52, 0.28);
}
.pr-profit-toast[hidden] { display: none !important; }

.pr-profit-timer {
    margin-top: 12px;
    padding: 14px;
    border-radius: 16px;
    background: linear-gradient(145deg, #1e293b, #0f172a);
    border: 1px solid rgba(224, 138, 74, 0.28);
    color: #fff6ea;
}
.pr-profit-timer.is-due {
    border-color: rgba(34, 197, 94, 0.45);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.18);
}
.pr-profit-timer.is-complete {
    border-color: rgba(148, 163, 184, 0.25);
    background: linear-gradient(145deg, #334155, #1e293b);
}
.pr-profit-timer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.pr-profit-timer-head span {
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #f6c89a;
}
.pr-profit-timer-head em {
    font-style: normal;
    color: #94a3b8;
    font-size: 0.72rem;
    font-weight: 700;
}
.pr-profit-timer-head b { color: #ffd77a; }
.pr-profit-timer-body {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 10px;
    align-items: center;
}
.pr-profit-clock {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1.8rem, 6vw, 2.35rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    text-align: center;
    padding: 12px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.pr-profit-next {
    padding: 12px;
    border-radius: 14px;
    background: rgba(224, 138, 74, 0.12);
    border: 1px solid rgba(224, 138, 74, 0.28);
}
.pr-profit-next span {
    display: block;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(255, 246, 234, 0.55);
    margin-bottom: 4px;
}
.pr-profit-next strong {
    display: block;
    color: #ffd77a;
    font-size: 1.05rem;
}
.pr-profit-hint {
    margin: 10px 0 0;
    color: #94a3b8;
    font-size: 0.78rem;
    line-height: 1.4;
}

.pr-profit-collect-btn {
    width: 100%;
    margin-top: 10px;
    padding: 12px 14px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #e08a4a, #c46a2e);
    color: #1a1208;
    font-weight: 900;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(196, 106, 46, 0.35);
}

/* Collect Today Profit popup */
.prp-overlay {
    position: fixed;
    inset: 0;
    z-index: 100080;
    display: grid;
    place-items: center;
    padding: 18px;
}
.prp-overlay[hidden] { display: none !important; }
.prp-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 6, 4, 0.72);
    backdrop-filter: blur(6px);
}
.prp-card {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    padding: 22px 20px 20px;
    border-radius: 24px;
    background: linear-gradient(165deg, #fffaf2, #ffffff 55%, #f8fafc);
    border: 1px solid rgba(196, 106, 46, 0.2);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.35);
    text-align: center;
    color: #1a1208;
}
.prp-overlay.is-egg .prp-card { border-color: rgba(234, 179, 8, 0.35); }
.prp-overlay.is-token .prp-card { border-color: rgba(167, 139, 250, 0.4); }
.prp-overlay.is-watt .prp-card { border-color: rgba(56, 189, 248, 0.4); }
.prp-overlay.is-success .prp-card { border-color: rgba(34, 197, 94, 0.4); }
.prp-x {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.06);
    color: #64748b;
    font-size: 1.3rem;
    cursor: pointer;
}
.prp-visual {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 4px auto 12px;
    display: grid;
    place-items: center;
}
.prp-visual img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    position: relative;
    z-index: 1;
}
.prp-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(196, 106, 46, 0.25);
    animation: prpPulse 1.8s ease-in-out infinite;
}
.prp-overlay.is-egg .prp-ring { border-color: rgba(234, 179, 8, 0.4); }
.prp-overlay.is-token .prp-ring { border-color: rgba(167, 139, 250, 0.45); }
.prp-overlay.is-watt .prp-ring { border-color: rgba(56, 189, 248, 0.45); }
@keyframes prpPulse {
    0%, 100% { transform: scale(0.92); opacity: 0.65; }
    50% { transform: scale(1.05); opacity: 1; }
}
.prp-badge {
    display: inline-flex;
    margin: 0 0 8px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(196, 106, 46, 0.12);
    color: #c46a2e;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.prp-overlay.is-success .prp-badge {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
}
.prp-title {
    margin: 0 0 6px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.65rem;
    line-height: 1.1;
    color: #1a1208;
}
.prp-text {
    margin: 0 0 14px;
    color: #64748b;
    font-size: 0.88rem;
    line-height: 1.45;
}
.prp-items {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: grid;
    gap: 8px;
}
.prp-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 14px;
    text-align: left;
    background: #fff7ed;
    border: 1px solid rgba(196, 106, 46, 0.16);
}
.prp-item.is-egg { background: #fffbeb; border-color: rgba(234, 179, 8, 0.28); }
.prp-item.is-token { background: #f5f3ff; border-color: rgba(167, 139, 250, 0.3); }
.prp-item.is-watt { background: #f0f9ff; border-color: rgba(56, 189, 248, 0.3); }
.prp-item img { width: 40px; height: 40px; object-fit: contain; }
.prp-item span {
    display: block;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}
.prp-item strong {
    display: block;
    margin-top: 2px;
    color: #1a1208;
    font-size: 1rem;
}
.prp-cta {
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #e08a4a, #c46a2e);
    color: #1a1208;
    font-weight: 900;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(196, 106, 46, 0.35);
}
.prp-overlay.is-egg .prp-cta { background: linear-gradient(135deg, #fbbf24, #d97706); }
.prp-overlay.is-token .prp-cta { background: linear-gradient(135deg, #a78bfa, #7c3aed); color: #fff; }
.prp-overlay.is-watt .prp-cta { background: linear-gradient(135deg, #38bdf8, #0284c7); color: #fff; }
.prp-overlay.is-success .prp-cta { background: linear-gradient(135deg, #22c55e, #15803d); color: #fff; }
.prp-cta:disabled { opacity: 0.7; cursor: wait; }

@media (max-width: 560px) {
    .chk-summary-facts,
    .pr-slip-facts {
        grid-template-columns: 1fr 1fr;
    }
    .pr-profit-timer-body {
        grid-template-columns: 1fr;
    }
    .pkg-detail-grid {
        grid-template-columns: 1fr 1fr;
    }
    .chk-summary-top {
        flex-wrap: wrap;
    }
    .chk-summary-price {
        margin-left: 0;
        width: 100%;
        text-align: right;
    }
}

/* ---- Checkout wizard (step 1 method ? step 2 verify) ---- */
.chk-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 16px;
}

.chk-step {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8a6540;
    font-weight: 800;
    font-size: 0.82rem;
}

.chk-step em {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(196, 106, 46, 0.12);
    border: 1.5px solid rgba(196, 106, 46, 0.25);
    font-style: normal;
    font-size: 0.78rem;
}

.chk-step.is-active {
    color: #1a1208;
}

.chk-step.is-active em {
    background: linear-gradient(135deg, #e08a4a, #c46a2e);
    border-color: transparent;
    color: #1a1208;
    box-shadow: 0 6px 14px rgba(196, 106, 46, 0.3);
}

.chk-step.is-done em {
    background: #15803d;
    border-color: transparent;
    color: #fff;
}

.chk-step-line {
    width: 42px;
    height: 2px;
    border-radius: 2px;
    background: rgba(196, 106, 46, 0.25);
}

.chk-panel {
    margin-bottom: 12px;
}

.chk-panel.is-hidden,
.chk-panel[hidden] {
    display: none !important;
}

.chk-panel-head {
    margin-bottom: 14px;
}

.chk-panel-head h2 {
    margin: 0 0 4px;
    font-size: 1.2rem;
    color: #1a1208;
}

.chk-panel-head p {
    margin: 0;
    color: #6b5540;
    font-size: 0.9rem;
}

.chk-panel-head b {
    color: #c46a2e;
}

.chk-method-grid {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
}

.chk-method-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 14px 14px 12px;
    border-radius: 16px;
    border: 1.5px solid rgba(196, 106, 46, 0.18);
    background: rgba(255, 248, 238, 0.96);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.chk-method-card-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 80% at 0% 0%, rgba(224, 138, 74, 0.14), transparent 55%);
    pointer-events: none;
}

.chk-method-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(20, 10, 0, 0.1);
    border-color: rgba(196, 106, 46, 0.4);
}

.chk-method-card.is-active {
    border-color: #c46a2e;
    background: linear-gradient(135deg, #fff8ee, #ffe4c8);
    box-shadow: 0 14px 28px rgba(196, 106, 46, 0.22);
}

.chk-method-card-logo {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid rgba(196, 106, 46, 0.14);
    flex: 0 0 auto;
}

.chk-method-card-logo img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.chk-method-card-body {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chk-method-card-body strong {
    font-size: 1.05rem;
    color: #1a1208;
}

.chk-method-card-body small {
    color: #8a6540;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chk-method-check {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(196, 106, 46, 0.12);
    color: transparent;
    flex: 0 0 auto;
    transition: 0.18s ease;
}

.chk-method-check svg {
    width: 15px;
    height: 15px;
}

.chk-method-card.is-active .chk-method-check {
    background: linear-gradient(135deg, #e08a4a, #c46a2e);
    color: #1a1208;
}

.chk-method-hint {
    margin: 0 0 12px;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
    color: #8a6540;
}

.chk-next-btn:disabled {
    opacity: 0.45;
    filter: grayscale(0.3);
}

.chk-verify-card {
    margin-bottom: 14px;
    padding: 16px;
    border-radius: 20px;
    background: linear-gradient(160deg, #2a1a0c 0%, #1a1208 55%, #24180c 100%);
    color: #fff6ea;
    border: 1px solid rgba(224, 138, 74, 0.35);
    box-shadow: 0 18px 36px rgba(20, 10, 0, 0.22);
}

.chk-verify-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.chk-verify-logo {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,246,234,0.14);
    overflow: hidden;
    flex: 0 0 auto;
}

.chk-verify-logo img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.chk-verify-eyebrow {
    display: block;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #e08a4a;
}

.chk-verify-brand h3 {
    margin: 2px 0 0;
    font-size: 1.15rem;
}

.chk-change-method {
    margin-left: auto;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,246,234,0.2);
    background: rgba(255,255,255,0.08);
    color: #ffd77a;
    font-size: 0.75rem;
    font-weight: 800;
    cursor: pointer;
}

.chk-verify-amount {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
    border-radius: 14px;
    background: rgba(224, 138, 74, 0.16);
    border: 1px solid rgba(224, 138, 74, 0.35);
}

.chk-verify-amount span {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,246,234,0.7);
}

.chk-verify-amount strong {
    font-size: 1.35rem;
    color: #ffd77a;
}

.chk-account-modern {
    display: grid;
    gap: 8px;
}

.chk-acc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,246,234,0.06);
    border: 1px solid rgba(255,246,234,0.1);
}

.chk-acc-row span {
    display: block;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,246,234,0.5);
    margin-bottom: 2px;
}

.chk-acc-row strong {
    font-size: 0.98rem;
    word-break: break-all;
}

.chk-proof-card {
    margin-bottom: 14px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 248, 238, 0.96);
    border: 1px solid rgba(196, 106, 46, 0.16);
}

.chk-field {
    display: block;
    margin-bottom: 14px;
}

.chk-field:last-child {
    margin-bottom: 0;
}

.chk-field > span {
    display: block;
    margin-bottom: 7px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a6540;
}

.chk-input-lg {
    width: 100%;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1.5px solid rgba(196, 106, 46, 0.28);
    background: #fff;
    color: #1a1208;
    font-size: 1.05rem;
    font-weight: 800;
}

.chk-input-lg:focus {
    outline: none;
    border-color: #c46a2e;
    box-shadow: 0 0 0 3px rgba(196, 106, 46, 0.18);
}

.chk-upload-modern {
    display: block;
    cursor: pointer;
}

.chk-upload-modern input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.chk-upload-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 22px 16px;
    border-radius: 16px;
    border: 1.5px dashed rgba(196, 106, 46, 0.4);
    background: linear-gradient(180deg, #fff, #fff4e8);
    text-align: center;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.chk-upload-modern:hover .chk-upload-box {
    border-color: #c46a2e;
    background: #fff8ee;
}

.chk-upload-box svg {
    width: 28px;
    height: 28px;
    color: #c46a2e;
    margin-bottom: 4px;
}

.chk-upload-box strong {
    color: #1a1208;
    font-size: 0.95rem;
}

.chk-upload-box small {
    color: #8a6540;
    font-size: 0.75rem;
}

.chk-theme-green .chk-method-card-logo { box-shadow: inset 0 0 0 2px rgba(22, 163, 74, 0.2); }
.chk-theme-red .chk-method-card-logo { box-shadow: inset 0 0 0 2px rgba(220, 38, 38, 0.2); }
.chk-theme-purple .chk-method-card-logo { box-shadow: inset 0 0 0 2px rgba(147, 51, 234, 0.2); }
.chk-theme-blue .chk-method-card-logo { box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.2); }
.chk-theme-orange .chk-method-card-logo { box-shadow: inset 0 0 0 2px rgba(234, 88, 12, 0.25); }
.chk-theme-teal .chk-method-card-logo { box-shadow: inset 0 0 0 2px rgba(13, 148, 136, 0.2); }

/* Purchase success popup - high contrast readable card */
#purchasePopup .zz-popup-backdrop {
    background: rgba(20, 10, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.zz-popup-card.is-purchase {
    background: #fff8ef;
    color: #1a1208;
    border: 1px solid rgba(196, 106, 46, 0.28);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow:
        0 28px 80px rgba(20, 10, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.zz-popup-card.is-purchase .zz-popup-brand-text strong {
    color: #1a1208;
}

.zz-popup-card.is-purchase .zz-popup-brand-text span {
    color: #8a6540;
}

.zz-popup-card.is-purchase .zz-popup-x {
    color: #8a6540;
}

.zz-popup-card.is-purchase .zz-popup-x:hover {
    background: rgba(196, 106, 46, 0.12);
    color: #c46a2e;
}

.zz-popup-card.is-purchase .zz-popup-badge {
    color: #92400e;
    background: #ffedd5;
    border-color: rgba(196, 106, 46, 0.35);
}

.zz-popup-card.is-purchase .zz-popup-title {
    color: #1a1208;
}

.zz-popup-card.is-purchase .zz-popup-text {
    color: #4a3728;
}

.zz-popup-card.is-purchase .zz-popup-text strong {
    color: #c46a2e;
}

.zz-popup-card.is-purchase .zz-popup-meta {
    background: #fff;
    border: 1px solid rgba(196, 106, 46, 0.16);
    border-radius: 14px;
    overflow: hidden;
}

.zz-popup-card.is-purchase .zz-popup-meta li {
    border-color: rgba(196, 106, 46, 0.12);
}

.zz-popup-card.is-purchase .zz-popup-meta span {
    color: #8a6540;
}

.zz-popup-card.is-purchase .zz-popup-meta strong {
    color: #1a1208;
}

.zz-popup-card.is-purchase .zz-popup-cta {
    color: #1a1208 !important;
}

/* ---- User sell flow ---- */
.sell-mkt-trader-ico svg { width: 28px; height: 28px; color: #fff; }
.sell-flow-building { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.1); color: #e08a4a; }
.sell-flow-building svg { width: 22px; height: 22px; }
.sell-detail-card, .sell-check-panel, .sell-account-panel { margin-bottom: 16px; padding: 18px 16px; border-radius: 20px; background: rgba(255,248,238,.96); border: 1px solid rgba(196,106,46,.2); box-shadow: 0 14px 32px rgba(20,10,0,.1); }
.sell-detail-head { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; }
.sell-detail-icon { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 16px; color: #ffd77a; background: linear-gradient(145deg,#2a1a0c,#1e293b); }
.sell-detail-icon svg { width: 32px; height: 32px; }
.sell-detail-head p { margin: 0 0 3px; color: #c46a2e; font-size: .68rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.sell-detail-head h1 { margin: 0; color: #1a1208; font-size: 1.3rem; }
.sell-detail-desc { color: #6b5540; line-height: 1.5; font-size: .88rem; }
.sell-detail-rate { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; margin: 12px 0; border-radius: 14px; background: linear-gradient(135deg,#2a1a0c,#1e293b); color: #fff6ea; }
.sell-detail-rate span { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; opacity: .65; }
.sell-detail-rate strong { color: #ffd77a; font-size: 1.35rem; }
.sell-detail-facts { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; }
.sell-detail-facts li { padding: 10px 12px; border-radius: 12px; background: rgba(196,106,46,.07); border: 1px solid rgba(196,106,46,.14); }
.sell-detail-facts span, .sell-check-summary span, .sell-slip-grid span { display: block; color: #8a6540; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sell-detail-facts b { color: #1a1208; }
.sell-money-preview { display: flex; justify-content: space-between; align-items: center; padding: 13px 14px; margin-bottom: 14px; border-radius: 14px; color: #fff6ea; background: linear-gradient(135deg,#15803d,#166534); }
.sell-money-preview span { font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.sell-money-preview strong { color: #dcfce7; font-size: 1.3rem; }
.sell-check-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 16px; padding: 14px; border-radius: 18px; background: linear-gradient(150deg,#2a1a0c,#111827); color: #fff6ea; }
.sell-check-summary > div { padding: 9px 10px; border-radius: 11px; background: rgba(255,255,255,.06); }
.sell-check-summary span { color: rgba(255,246,234,.5); }
.sell-check-summary strong { display: block; margin-top: 3px; font-size: .9rem; }
.sell-check-summary .is-money { border: 1px solid rgba(224,138,74,.35); background: rgba(224,138,74,.14); }
.sell-check-summary .is-money strong { color: #ffd77a; }
.sell-method-grid { display: grid; gap: 9px; }
.sell-method-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border-radius: 15px; border: 1.5px solid rgba(196,106,46,.18); background: #fff; color: #1a1208; text-align: left; cursor: pointer; }
.sell-method-card > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.sell-method-card small { color: #8a6540; }
.sell-method-card > i { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(196,106,46,.1); color: transparent; }
.sell-method-card.is-active { border-color: #c46a2e; background: #fff4e7; box-shadow: 0 10px 22px rgba(196,106,46,.18); }
.sell-method-card.is-active > i { background: #c46a2e; color: #fff; }
.sell-method-logo { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 13px; background: #fff; border: 1px solid rgba(196,106,46,.14); }
.sell-method-logo img { width: 38px; height: 38px; object-fit: contain; }
.sell-selected-method { display: flex; justify-content: space-between; align-items: center; padding: 11px 13px; margin-bottom: 14px; border-radius: 12px; background: #2a1a0c; color: #fff6ea; }
.sell-selected-method span { font-size: .7rem; text-transform: uppercase; opacity: .6; }
.sell-selected-method strong { color: #ffd77a; }
.sell-hold-note { padding: 10px 12px; border-radius: 11px; color: #6b5540; background: rgba(196,106,46,.08); font-size: .82rem; }
.sell-record-list { display: grid; gap: 12px; }
.sell-slip { padding: 16px; border-radius: 18px; background: rgba(255,248,238,.96); border: 1px solid rgba(196,106,46,.16); box-shadow: 0 10px 24px rgba(20,10,0,.07); }
.sell-slip-pending { border-left: 4px solid #d97706; } .sell-slip-approved { border-left: 4px solid #15803d; } .sell-slip-rejected { border-left: 4px solid #b91c1c; }
.sell-slip header { display: flex; justify-content: space-between; gap: 10px; }
.sell-slip header p { margin: 0 0 2px; color: #c46a2e; font-size: .68rem; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; }
.sell-slip header h2 { margin: 0; color: #1a1208; font-size: 1.1rem; }
.sell-slip-money { display: flex; justify-content: space-between; align-items: center; padding: 11px 13px; margin: 11px 0; border-radius: 12px; background: linear-gradient(135deg,#2a1a0c,#1e293b); color: #fff6ea; }
.sell-slip-money span { opacity: .65; font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.sell-slip-money strong { color: #ffd77a; font-size: 1.2rem; }
.sell-slip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sell-slip-grid div { padding: 9px 10px; border-radius: 10px; background: #fff; border: 1px solid rgba(196,106,46,.12); }
.sell-slip-grid strong { color: #1a1208; font-size: .85rem; word-break: break-word; }
.sell-slip-note, .sell-slip-admin { margin: 10px 0 0; padding: 9px 11px; border-radius: 10px; background: #fef3c7; color: #92400e; font-size: .82rem; }
.sell-slip-note.is-refund { background: #dcfce7; color: #166534; }
@media(max-width:600px){.sell-check-summary{grid-template-columns:1fr 1fr}.sell-slip-grid{grid-template-columns:1fr}.sell-detail-facts{grid-template-columns:1fr 1fr}}

.sell-fields { display: grid; gap: 12px; margin-bottom: 12px; }
.sell-fields[hidden] { display: none !important; }

/* My Team ? product-separated two-level referral network */
.my-team-page { background: #080d16; color: #f8fafc; }
.mtm-page { width: min(1080px, calc(100% - 28px)); margin: 0 auto; padding: 20px 0 56px; }
.mtm-topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mtm-back { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #fff; text-decoration: none; font-size: 1.35rem; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }
.mtm-topbar > div { flex: 1; }
.mtm-topbar span { display: block; color: #94a3b8; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mtm-topbar strong { display: block; color: #fff6ea; font-family: "Cormorant Garamond", serif; font-size: 1.35rem; line-height: 1; }
.mtm-topbar .mtm-total { flex: 0 0 auto; padding: 7px 11px; border-radius: 999px; color: #ffd7a8; background: rgba(196,106,46,.15); border: 1px solid rgba(224,138,74,.28); font-size: .72rem; letter-spacing: 0; text-transform: none; }
.mtm-hero { position: relative; min-height: 190px; display: flex; align-items: center; justify-content: space-between; gap: 20px; overflow: hidden; padding: 28px; margin-bottom: 14px; border-radius: 24px; background: radial-gradient(circle at 85% 20%, rgba(224,138,74,.28), transparent 35%), linear-gradient(135deg,#2a1a0c,#111827 62%,#0e3f4a); border: 1px solid rgba(224,138,74,.25); box-shadow: 0 18px 45px rgba(0,0,0,.3); }
.mtm-hero-copy { position: relative; z-index: 1; max-width: 600px; }
.mtm-kicker { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; color: #ffd7a8; background: rgba(224,138,74,.13); border: 1px solid rgba(224,138,74,.24); font-size: .68rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.mtm-hero h1 { margin: 12px 0 6px; color: #fff6ea; font-family: "Cormorant Garamond",serif; font-size: clamp(1.8rem,5vw,2.75rem); line-height: 1; }
.mtm-hero p { max-width: 520px; margin: 0; color: #cbd5e1; font-size: .9rem; line-height: 1.55; }
.mtm-hero-art { position: relative; width: 190px; height: 125px; flex: 0 0 auto; }
.mtm-person { position: absolute; bottom: 8px; width: 55px; height: 62px; border-radius: 28px 28px 16px 16px; background: linear-gradient(160deg,#e08a4a,#9a4d20); box-shadow: 0 12px 24px rgba(0,0,0,.28); }
.mtm-person::before { content: ""; position: absolute; width: 34px; height: 34px; left: 11px; top: -28px; border-radius: 50%; background: #f6c89a; border: 4px solid rgba(255,255,255,.18); }
.mtm-person-one { left: 0; transform: scale(.78); opacity: .72; }
.mtm-person-two { left: 67px; z-index: 2; }
.mtm-person-three { right: 0; transform: scale(.78); opacity: .72; }
.mtm-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 14px; }
.mtm-tab { --mtm-accent:#e08a4a; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 14px; border: 1px solid rgba(148,163,184,.16); border-radius: 16px; background: linear-gradient(145deg,rgba(30,41,59,.92),rgba(15,23,42,.96)); color: #cbd5e1; cursor: pointer; box-shadow: 0 8px 22px rgba(0,0,0,.2); }
.mtm-tab-vac { --mtm-accent:#a78bfa; } .mtm-tab-sol { --mtm-accent:#38bdf8; }
.mtm-tab img { width: 31px; height: 31px; object-fit: contain; }
.mtm-tab span { flex: 1; text-align: left; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtm-tab b { min-width: 29px; padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--mtm-accent); font-size: .72rem; }
.mtm-tab.is-active { color: #fff; border-color: var(--mtm-accent); box-shadow: 0 10px 28px color-mix(in srgb,var(--mtm-accent) 20%,transparent); }
.mtm-tab.is-active::after { content: ""; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--mtm-accent); box-shadow: 0 0 12px var(--mtm-accent); }
.mtm-product { --mtm-accent:#e08a4a; padding: 18px; border-radius: 22px; background: rgba(15,23,42,.86); border: 1px solid rgba(148,163,184,.17); box-shadow: 0 18px 42px rgba(0,0,0,.24); }
.mtm-product-vac { --mtm-accent:#a78bfa; } .mtm-product-sol { --mtm-accent:#38bdf8; }
.mtm-product[hidden] { display: none !important; }
.mtm-product-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 14px; }
.mtm-product-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
.mtm-product-title > span { width: 52px; height: 52px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 15px; background: color-mix(in srgb,var(--mtm-accent) 14%,transparent); border: 1px solid color-mix(in srgb,var(--mtm-accent) 30%,transparent); }
.mtm-product-title img { object-fit: contain; }
.mtm-product-title p { margin: 0 0 2px; color: #64748b; font-size: .62rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.mtm-product-title h2 { margin: 0; color: #fff6ea; font-size: 1.15rem; }
.mtm-level-counts { display: flex; gap: 7px; }
.mtm-level-counts span { padding: 7px 9px; border-radius: 10px; color: #94a3b8; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); font-size: .68rem; font-weight: 800; }
.mtm-level-counts b { color: var(--mtm-accent); margin-left: 4px; }
.mtm-commission { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 9px; padding: 11px; margin-bottom: 14px; border-radius: 16px; background: linear-gradient(135deg,color-mix(in srgb,var(--mtm-accent) 13%,transparent),rgba(255,255,255,.025)); border: 1px solid color-mix(in srgb,var(--mtm-accent) 25%,transparent); }
.mtm-commission-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mtm-gift { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb,var(--mtm-accent) 18%,transparent); color: var(--mtm-accent); font-size: 1rem; }
.mtm-commission-title span,.mtm-rate span { display: block; color: #64748b; font-size: .58rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.mtm-commission-title strong { display: block; color: #e2e8f0; font-size: .78rem; }
.mtm-rate { min-width: 120px; padding: 8px 10px; border-radius: 11px; background: rgba(8,13,22,.55); border: 1px solid rgba(255,255,255,.07); }
.mtm-rate strong { display: block; margin-top: 2px; color: var(--mtm-accent); font-size: .86rem; white-space: nowrap; }
.mtm-earned { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 11px; margin-bottom: 14px; border-radius: 16px; background: linear-gradient(135deg,rgba(34,197,94,.13),rgba(255,255,255,.025)); border: 1px solid rgba(34,197,94,.24); }
.mtm-earned-total span { display: block; color: #64748b; font-size: .58rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.mtm-earned-total strong { display: block; margin-top: 2px; color: #86efac; font-size: 1.05rem; }
.mtm-earned-split { display: flex; gap: 8px; }
.mtm-earned-split span { padding: 7px 12px; border-radius: 11px; color: #94a3b8; font-size: .66rem; font-weight: 900; letter-spacing: .05em; background: rgba(8,13,22,.55); border: 1px solid rgba(255,255,255,.07); }
.mtm-earned-split b { color: #e2e8f0; font-size: .8rem; }
.mtm-fact-earn b { color: #86efac !important; }
.mtm-member-list { display: grid; gap: 9px; }
.mtm-member { display: grid; grid-template-columns: auto minmax(150px,1fr) minmax(330px,1.3fr); align-items: center; gap: 12px; padding: 12px; border-radius: 15px; background: linear-gradient(145deg,rgba(30,41,59,.72),rgba(15,23,42,.72)); border: 1px solid rgba(148,163,184,.13); }
.mtm-avatar { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 13px; background: linear-gradient(145deg,var(--mtm-accent),#7c3f1b); color: #fff; font-size: 1rem; font-weight: 900; box-shadow: 0 7px 17px color-mix(in srgb,var(--mtm-accent) 25%,transparent); }
.mtm-member-main { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.mtm-member-name { min-width: 0; }
.mtm-member-name strong,.mtm-member-name small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtm-member-name strong { color: #f8fafc; font-size: .9rem; }.mtm-member-name small { margin-top: 2px; color: #64748b; font-size: .7rem; }
.mtm-level { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; font-size: .62rem; font-weight: 900; }
.mtm-level-1 { background: rgba(34,197,94,.13); color: #86efac; border: 1px solid rgba(34,197,94,.25); }
.mtm-level-2 { background: rgba(59,130,246,.13); color: #93c5fd; border: 1px solid rgba(59,130,246,.25); }
.mtm-member-facts { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.mtm-member-facts span { min-width: 0; padding: 7px 9px; border-radius: 9px; background: rgba(255,255,255,.035); }
.mtm-member-facts em,.mtm-member-facts b { display: block; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtm-member-facts em { color: #64748b; font-size: .55rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.mtm-member-facts b { margin-top: 2px; color: #e2e8f0; font-size: .72rem; }
.mtm-empty { padding: 36px 18px; text-align: center; border-radius: 16px; background: rgba(255,255,255,.025); border: 1px dashed rgba(148,163,184,.18); }
.mtm-empty img { object-fit: contain; opacity: .75; }.mtm-empty h3 { margin: 10px 0 4px; color: #f8fafc; font-size: 1rem; }.mtm-empty p { max-width: 520px; margin: 0 auto; color: #64748b; font-size: .8rem; }
@media(max-width:760px){.mtm-hero-art{display:none}.mtm-tabs{gap:7px}.mtm-tab{padding:10px}.mtm-tab span{font-size:.75rem}.mtm-product-head{align-items:flex-start;flex-direction:column}.mtm-commission{grid-template-columns:1fr 1fr}.mtm-commission-title{grid-column:1/-1}.mtm-member{grid-template-columns:auto 1fr}.mtm-member-facts{grid-column:1/-1;grid-template-columns:repeat(2,1fr)}.mtm-hero{padding:22px}.mtm-page{width:min(100% - 18px,1080px)}}
@media(max-width:460px){.mtm-tab{flex-direction:column;gap:4px}.mtm-tab span{text-align:center}.mtm-tab.is-active::after{display:none}.mtm-level-counts{width:100%}.mtm-level-counts span{flex:1;text-align:center}.mtm-commission{grid-template-columns:1fr}.mtm-commission-title{grid-column:auto}.mtm-rate{min-width:0}.mtm-member-facts{grid-template-columns:1fr 1fr}.mtm-topbar .mtm-total{font-size:.63rem}.mtm-product{padding:13px}}

/* Team Reward ? charming milestone cards */
.team-reward-page { background: #090d14; color: #f8fafc; }
.trw-page { width: min(920px, calc(100% - 28px)); margin: 0 auto; padding: 20px 0 56px; }
.trw-topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.trw-back { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #fff; text-decoration: none; font-size: 1.35rem; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }
.trw-topbar > div { flex: 1; }
.trw-topbar span { display: block; color: #94a3b8; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.trw-topbar strong { display: block; color: #fff6ea; font-family: "Cormorant Garamond", serif; font-size: 1.35rem; line-height: 1; }
.trw-pill { padding: 7px 11px; border-radius: 999px; color: #ffd7a8; background: rgba(196,106,46,.15); border: 1px solid rgba(224,138,74,.28); font-size: .72rem; font-weight: 800; }
.trw-flash { margin-bottom: 12px; padding: 12px 14px; border-radius: 14px; font-weight: 800; font-size: .88rem; }
.trw-flash.is-ok { background: linear-gradient(135deg,#166534,#15803d); color: #ecfdf5; }
.trw-flash.is-bad { background: linear-gradient(135deg,#7f1d1d,#b91c1c); color: #fee2e2; }
.trw-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 24px; margin-bottom: 14px; border-radius: 24px; background: radial-gradient(circle at 90% 10%, rgba(224,138,74,.3), transparent 40%), linear-gradient(135deg,#2a1a0c,#111827 60%,#12323a); border: 1px solid rgba(224,138,74,.28); box-shadow: 0 18px 42px rgba(0,0,0,.28); }
.trw-kicker { display: inline-flex; padding: 6px 10px; border-radius: 999px; color: #ffd7a8; background: rgba(224,138,74,.14); border: 1px solid rgba(224,138,74,.24); font-size: .68rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.trw-hero h1 { margin: 12px 0 6px; color: #fff6ea; font-family: "Cormorant Garamond", serif; font-size: clamp(1.7rem,5vw,2.5rem); line-height: 1; }
.trw-hero p { margin: 0; max-width: 520px; color: #cbd5e1; font-size: .9rem; line-height: 1.5; }
.trw-hero-stats { display: grid; gap: 8px; min-width: 120px; }
.trw-hero-stats div { padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); text-align: center; }
.trw-hero-stats span { display: block; color: #94a3b8; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.trw-hero-stats strong { display: block; margin-top: 2px; color: #ffd77a; font-size: 1.2rem; }
.trw-invest { margin-bottom: 14px; padding: 16px; border-radius: 20px; background: rgba(15,23,42,.86); border: 1px solid rgba(148,163,184,.16); }
.trw-invest h2 { margin: 0 0 12px; color: #fff6ea; font-size: 1rem; }
.trw-invest h2 em { color: #94a3b8; font-style: normal; font-size: .78rem; font-weight: 600; }
.trw-invest-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.trw-inv { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.trw-inv img,.trw-mem-ico { width: 36px; height: 36px; object-fit: contain; flex: 0 0 auto; }
.trw-mem-ico { display: grid; place-items: center; border-radius: 10px; background: rgba(224,138,74,.16); font-size: 1.1rem; }
.trw-inv span { display: block; color: #64748b; font-size: .62rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.trw-inv strong { display: block; color: #fff6ea; font-size: 1.05rem; margin-top: 2px; }
.trw-inv-hen { border-color: rgba(234,179,8,.25); }
.trw-inv-vac { border-color: rgba(167,139,250,.28); }
.trw-inv-sol { border-color: rgba(56,189,248,.28); }
.trw-list { display: grid; gap: 14px; }
.trw-card { position: relative; overflow: hidden; padding: 16px; border-radius: 22px; background: linear-gradient(160deg, rgba(30,41,59,.95), rgba(15,23,42,.96)); border: 1px solid rgba(148,163,184,.16); box-shadow: 0 16px 36px rgba(0,0,0,.24); }
.trw-card-shine { position: absolute; inset: auto -20% 40% auto; width: 180px; height: 180px; border-radius: 50%; filter: blur(40px); opacity: .25; pointer-events: none; background: #e08a4a; }
.trw-ready { border-color: rgba(34,197,94,.4); }
.trw-ready .trw-card-shine { background: #22c55e; }
.trw-done { border-color: rgba(148,163,184,.28); opacity: .92; }
.trw-locked { opacity: .78; }
.trw-card-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.trw-logo-wrap { width: 58px; height: 58px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); overflow: hidden; }
.trw-logo { width: 46px; height: 46px; object-fit: contain; }
.trw-card-title { flex: 1; min-width: 0; }
.trw-card-title p { margin: 0 0 2px; color: #e08a4a; font-size: .62rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.trw-card-title h3 { margin: 0; color: #fff6ea; font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trw-state { flex: 0 0 auto; padding: 6px 10px; border-radius: 999px; font-size: .68rem; font-weight: 900; }
.trw-state-done { background: rgba(148,163,184,.16); color: #cbd5e1; }
.trw-state-ready { background: rgba(34,197,94,.16); color: #86efac; }
.trw-state-active { background: rgba(224,138,74,.16); color: #ffd77a; }
.trw-state-locked { background: rgba(100,116,139,.16); color: #94a3b8; }
.trw-overall,.trw-req { position: relative; z-index: 1; margin-bottom: 10px; }
.trw-overall-meta,.trw-req-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: #94a3b8; font-size: .72rem; font-weight: 700; }
.trw-overall-meta strong,.trw-req-top strong { margin-left: auto; color: #ffd77a; }
.trw-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.trw-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#e08a4a,#ffd77a); }
.trw-ready .trw-bar i { background: linear-gradient(90deg,#22c55e,#86efac); }
.trw-reqs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.trw-req { padding: 10px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06); }
.trw-req img,.trw-req-emoji { width: 22px; height: 22px; object-fit: contain; }
.trw-payout { position: relative; z-index: 1; padding: 12px; margin-bottom: 12px; border-radius: 14px; background: linear-gradient(135deg, rgba(224,138,74,.16), rgba(224,138,74,.06)); border: 1px solid rgba(224,138,74,.28); }
.trw-payout-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.trw-payout-head > span { color: #94a3b8; font-size: .62rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.trw-payout-total { color: #ffd77a; font-size: 1.2rem; font-weight: 900; letter-spacing: .02em; }
.trw-payout-total.is-muted { color: #64748b; font-size: 1rem; }
.trw-payout-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.trw-payout-chips em { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; font-style: normal; font-size: .78rem; font-weight: 800; background: rgba(15,23,42,.55); color: #fff6ea; border: 1px solid rgba(255,255,255,.06); }
.trw-payout-chips img { width: 18px; height: 18px; object-fit: contain; }
.trw-payout-chips .is-egg { border-color: rgba(234,179,8,.28); }
.trw-payout-chips .is-tok { border-color: rgba(167,139,250,.28); }
.trw-payout-chips .is-watt { border-color: rgba(56,189,248,.28); }
.trw-claim-btn { width: 100%; padding: 13px 14px; border: none; border-radius: 14px; background: linear-gradient(135deg,#22c55e,#15803d); color: #fff; font-weight: 900; font-size: .95rem; cursor: pointer; box-shadow: 0 12px 26px rgba(22,163,74,.32); }
.trw-done-note,.trw-lock-note,.trw-wait-note { margin: 0; color: #94a3b8; font-size: .82rem; line-height: 1.45; }
.trw-done-note { color: #86efac; font-weight: 800; }
.trw-done-note small { display: block; margin-top: 4px; color: #94a3b8; font-weight: 600; }
.trw-empty { padding: 40px 18px; text-align: center; border-radius: 18px; background: rgba(255,255,255,.03); border: 1px dashed rgba(148,163,184,.2); }
.trw-empty h3 { margin: 12px 0 4px; color: #fff6ea; }
.trw-empty p { margin: 0; color: #64748b; }
@media(max-width:720px){.trw-hero{flex-direction:column;align-items:stretch}.trw-hero-stats{grid-template-columns:1fr 1fr}.trw-invest-grid,.trw-reqs{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.trw-invest-grid{grid-template-columns:1fr}.trw-card-head{flex-wrap:wrap}.trw-page{width:min(100% - 18px,920px)}}

/* Help Center */
.help-center-page { background: #090d14; color: #f8fafc; }
.hc-page { width: min(920px, calc(100% - 28px)); margin: 0 auto; padding: 20px 0 56px; }
.hc-topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.hc-back { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #fff; text-decoration: none; font-size: 1.35rem; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }
.hc-topbar > div { flex: 1; }
.hc-topbar span { display: block; color: #94a3b8; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hc-topbar strong { display: block; color: #fff6ea; font-family: "Cormorant Garamond", serif; font-size: 1.35rem; line-height: 1; }
.hc-logo { width: 36px; height: 36px; object-fit: contain; border-radius: 10px; background: rgba(255,255,255,.06); padding: 4px; }
.hc-hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 26px; margin-bottom: 16px; border-radius: 24px; background: radial-gradient(circle at 88% 18%, rgba(34,197,94,.22), transparent 36%), linear-gradient(135deg,#12352b,#111827 58%,#2a1a0c); border: 1px solid rgba(34,197,94,.22); box-shadow: 0 18px 42px rgba(0,0,0,.28); }
.hc-kicker { display: inline-flex; padding: 6px 10px; border-radius: 999px; color: #86efac; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.24); font-size: .68rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.hc-hero h1 { margin: 12px 0 6px; color: #fff6ea; font-family: "Cormorant Garamond", serif; font-size: clamp(1.8rem,5vw,2.6rem); line-height: 1; }
.hc-hero p { margin: 0; max-width: 520px; color: #cbd5e1; font-size: .9rem; line-height: 1.5; }
.hc-hero-art { position: relative; width: 150px; height: 110px; flex: 0 0 auto; }
.hc-bubble { position: absolute; border-radius: 50%; background: rgba(134,239,172,.18); border: 1px solid rgba(134,239,172,.28); }
.hc-bubble-1 { width: 70px; height: 70px; right: 10px; top: 8px; }
.hc-bubble-2 { width: 46px; height: 46px; left: 8px; bottom: 10px; }
.hc-bubble-3 { width: 28px; height: 28px; right: 58px; bottom: 18px; background: rgba(224,138,74,.22); border-color: rgba(224,138,74,.3); }
.hc-section { margin-bottom: 18px; }
.hc-section-head { margin-bottom: 10px; }
.hc-section-head h2 { margin: 0 0 2px; color: #fff6ea; font-size: 1.05rem; }
.hc-section-head p { margin: 0; color: #64748b; font-size: .8rem; }
.hc-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.hc-grid-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.hc-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 18px; background: linear-gradient(155deg,rgba(30,41,59,.94),rgba(15,23,42,.96)); border: 1px solid rgba(148,163,184,.16); box-shadow: 0 12px 28px rgba(0,0,0,.22); }
.hc-card-admin { border-color: rgba(34,197,94,.28); }
.hc-card-owner { border-color: rgba(224,138,74,.32); }
.hc-card-group { border-color: rgba(52,211,153,.28); }
.hc-card-channel { border-color: rgba(56,189,248,.28); }
.hc-card-ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: rgba(224,138,74,.14); color: #ffd77a; font-size: 1.15rem; font-weight: 900; }
.hc-card-admin .hc-card-ico { background: rgba(34,197,94,.14); color: #86efac; }
.hc-card-owner .hc-card-ico { background: rgba(224,138,74,.16); color: #ffd77a; }
.hc-card-group .hc-card-ico { background: rgba(52,211,153,.14); color: #6ee7b7; }
.hc-card-channel .hc-card-ico { background: rgba(56,189,248,.14); color: #7dd3fc; }
.hc-card-body h3 { margin: 0 0 2px; color: #fff6ea; font-size: 1rem; }
.hc-card-body p { margin: 0 0 8px; color: #64748b; font-size: .78rem; }
.hc-card-body strong { display: block; color: #e2e8f0; font-size: .95rem; word-break: break-word; }
.hc-cta { display: inline-flex; align-items: center; justify-content: center; margin-top: auto; padding: 11px 14px; border-radius: 12px; text-decoration: none; font-weight: 900; font-size: .86rem; color: #1a1208; background: linear-gradient(135deg,#e08a4a,#c46a2e); box-shadow: 0 10px 22px rgba(196,106,46,.28); }
.hc-card-admin .hc-cta { background: linear-gradient(135deg,#22c55e,#15803d); color: #fff; box-shadow: 0 10px 22px rgba(22,163,74,.28); }
.hc-card-group .hc-cta { background: linear-gradient(135deg,#34d399,#059669); color: #052e1c; }
.hc-card-channel .hc-cta { background: linear-gradient(135deg,#38bdf8,#0284c7); color: #fff; }
.hc-cta-soft { background: rgba(255,255,255,.08); color: #ffd77a; box-shadow: none; border: 1px solid rgba(224,138,74,.28); }
.hc-cert-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.hc-cert { overflow: hidden; border-radius: 18px; background: rgba(15,23,42,.9); border: 1px solid rgba(148,163,184,.16); box-shadow: 0 12px 28px rgba(0,0,0,.22); }
.hc-cert-frame { padding: 10px; background: #0b1220; }
.hc-cert-frame img { display: block; width: 100%; height: auto; max-height: 280px; object-fit: contain; border-radius: 12px; background: #fff; }
.hc-cert-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 14px; }
.hc-cert-meta h3 { margin: 0 0 2px; color: #fff6ea; font-size: .95rem; }
.hc-cert-meta p { margin: 0; color: #64748b; font-size: .75rem; }
.hc-cert-meta .hc-cta { margin-top: 0; padding: 9px 12px; font-size: .78rem; white-space: nowrap; }
.hc-empty { padding: 42px 18px; text-align: center; border-radius: 18px; background: rgba(255,255,255,.03); border: 1px dashed rgba(148,163,184,.2); }
.hc-empty h2 { margin: 12px 0 4px; color: #fff6ea; font-size: 1.1rem; }
.hc-empty p { margin: 0; color: #64748b; }
@media(max-width:720px){.hc-hero-art{display:none}.hc-grid,.hc-grid-2,.hc-cert-grid{grid-template-columns:1fr}.hc-cert-meta{flex-direction:column;align-items:stretch}.hc-page{width:min(100% - 18px,920px)}}