/* -------------------------------------------------------
   SellwiseHub – Unified Global Styles
   One source of truth for brand + UI across the app
------------------------------------------------------- */

/* ========== 1) Reset / Base ========== */
* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background: var(--bg);
    color: var(--text);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
}

/* Reduced motion friendliness */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ========== 2) Brand Tokens ========== */
:root {
    /* brand blues */
    --brand-300: #408bd1;
    --brand-400: #5071e6;
    --brand-700: #2e3192;
    --brand-900: #1d2327;

    /* neutrals */
    --bg: #f7f7f7;
    --surface: #ffffff;
    --muted-surface: #f3f6ff;

    --text: #333333;
    --text-strong: #000000;
    --text-muted: #777672;

    --border: #e5e7eb;

    /* radii / spacing */
    --radius: 12px;
    --radius-sm: 8px;
    --space: 20px;

    /* focus ring */
    --focus: #8aa1ff;
}



/* === Header logo === */
.brand-logo {
    height: 20px;
    /* dialed down from 34px */
    max-width: 120px;
    /* safety so it doesn’t stretch */
    width: auto;
    object-fit: contain;
    display: block;

    /* Soft premium grey glow instead of blue */
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.28)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.18));

    transition: filter 0.2s ease, transform 0.2s ease;
}

/* Hover: slightly stronger but still neutral/luxury */
.brand:hover .brand-logo {
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.32)) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.22));
    transform: translateY(-1px);
}

/* Mobile tweak */
@media (max-width: 640px) {
    .brand-logo {
        height: 22px;
        /* slightly smaller on phones */
        max-width: 140px;
    }
}

/* ========== 3) Typography ========== */
h1,
h2,
h3 {
    margin: 0 0 12px;
    color: var(--brand-900);
    font-family: "Instrument Serif", "Times New Roman", serif;
    font-weight: 500;
}

h1 {
    font-size: 36px;
}

h2 {
    font-size: 28px;
}

h3 {
    font-size: 21px;
}

p {
    margin: 0 0 10px;
    color: var(--text);
}

small,
.muted {
    color: var(--text-muted);
}



/* ============================================
   SUB-HEADING PILL (Tools / Overview / Listings)
   – clear old-header style
   ============================================ */

.subheading-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 14px;
    margin: 10px 0 18px;
    border-radius: 999px;

    /* Clear pill: light surface + soft border */
    background-color: #f9fafb;
    border: 1px solid rgba(148, 163, 255, 0.9);
    color: var(--brand-700);

    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;

    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10);
    text-decoration: none;
}

.subheading-pill:hover {
    background-color: #f9fafb;
    /* same as default */
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10);
    /* same as default */
    transform: none;
}

/* Center sub-heading pills on the page */
.subheading-pill {
    display: block;
    margin: 10px auto 18px;
    /* auto centers horizontally */
    text-align: center;
}


/* ============================================
   Token usage pill – unified for all tools
   Matches subheading-pill styling
============================================ */
.token-usage-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 6px 14px;
    border-radius: 999px;

    background-color: #f9fafb;
    border: 1px solid rgba(148, 163, 255, 0.9);
    color: var(--brand-700);

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;

    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10);
}

/* token icon inside the pill */
.token-usage-pill .token-icon {
    width: 30px;
    height: 30px;
    background-image: url("/assets/img/token/token.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

/* Left side: token coin (re-use existing icon size) */
.token-usage-pill .token-icon-lg {
    flex-shrink: 0;
}

/* Text wrapper */
.token-usage-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Main line (cost) */
.token-usage-main {
    font-weight: 700;
    color: var(--brand-700);
}

/* Subtext (fresh scan etc.) */
.token-usage-sub {
    font-weight: 500;
    font-size: 12px;
    color: var(--text-muted);
}

/* Mobile tweak: slightly smaller + tighter */
@media (max-width: 640px) {
    .token-usage-pill {
        font-size: 12px;
        padding: 5px 12px;
        gap: 6px;
        margin: 4px 0 10px;
    }

    .token-usage-sub {
        font-size: 11px;
    }
}


/* ========== 4) Links ========== */
a {
    color: var(--brand-400);
    text-decoration: none;
}

a:hover {
    color: var(--brand-700);
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Back-to-dashboard link = pill style */
.back-link,
.link-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 13px;
    border-radius: 999px;

    background-image: linear-gradient(135deg,
            rgba(34, 211, 238, 0.16),
            rgba(129, 140, 248, 0.26));
    border: 1px solid rgba(148, 163, 255, 0.8);
    color: var(--brand-700);
    text-decoration: none;

    box-shadow:
        0 3px 9px rgba(15, 23, 42, 0.18),
        0 0 10px rgba(56, 189, 248, 0.30);

    cursor: pointer;

    margin-top: 8px;
    margin-bottom: 16px;
}

/* Hover – same as other pills */
.back-link:hover,
.link-back:hover {
    background-image: linear-gradient(135deg,
            rgba(34, 211, 238, 0.24),
            rgba(129, 140, 248, 0.36));
    transform: translateY(-1px);
    box-shadow:
        0 5px 14px rgba(15, 23, 42, 0.26),
        0 0 14px rgba(56, 189, 248, 0.40);
    color: var(--brand-700);
    text-decoration: none;
}

/* ========== 5) Layout Helpers ========== */


.section {
    margin-top: 40px;
}

/* Utility rows/gaps used by tools and forms */
.row {
    display: flex;
    align-items: center;
}

.gap-8 {
    gap: 8px;
}

.gap-12 {
    gap: 12px;
}

.gap-16 {
    gap: 16px;
}

/* Screen-reader only text */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ========== 6) Cards (dashboard/tool panels) ========== */
.cards {
    display: grid !important;
    /* override any old flex */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space);
    margin-top: 24px;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
    transition: transform .15s ease, box-shadow .15s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .10);
}

.card h3 {
    margin-bottom: 8px;
}

/* Prevent Safari from stretching buttons in cards */
.card button,
.card .btn {
    width: max-content;
    align-self: start;
}

/* Align tool card buttons at bottom + custom blue style */
.cards .card {
    display: flex;
    flex-direction: column;
    min-height: 190px;
}

.cards .card>.btn {
    margin-top: auto;
    align-self: flex-start;

    /* OLD brand-blue style just for tool cards */
    background: var(--brand-700);
    color: #ffffff;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;

    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.22);
    transition:
        background 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.12s ease;
}

.cards .card>.btn:hover {
    background: var(--brand-400);
    /* lighter blue on hover */
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.28);
}

/* Make anchor cards behave like stack with CTA pinned to bottom */
.cards a.card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.cards a.card>div {
    flex: 1 1 auto;
}

.cards a.card>.btn {
    margin-top: auto;
    width: max-content;
    align-self: flex-start;
}

/* === Tool card headings – back to black === */
.cards .card h3 {
    color: var(--text-strong);
    /* resolves to pure black */
}


/* Slim verification bar */
.verify-bar {
    background: #f8f9ff;
    border-left: 4px solid var(--brand-700);
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 18px;
}

.verify-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.verify-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
    color: #1f2937;
}

.verify-sub {
    color: #555;
    font-size: 13px;
}

.verify-link {
    font-size: 12.5px;
    color: var(--brand-400);
    text-decoration: underline;
    cursor: pointer;
}

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

@media (max-width: 720px) {
    .verify-bar-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* === Page banners (top pill heading) === */
.page-banner {
    width: 100%;
    max-width: 1000px;
    margin: 8px auto 24px;
    /* was 16px auto 24px */
    display: flex;
    justify-content: center;
}

/* Base text (normal white for pages without accent spans) */
.page-banner-title {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 12px;
    background: #111827;
    font-weight: 600;
    font-size: 24px;
    letter-spacing: 0.2px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    color: #ffffff;

    /* 🔥 NEW – normalize across <h1> and <span> */
    margin: 0;
    /* kill the h1 margin */
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Metallic effect only when class is present */
.page-banner-title.has-accent {
    background-image: linear-gradient(180deg,
            #ffffff 0%,
            #f3f3f3 45%,
            #ffffff 100%);
    -webkit-background-clip: text;
    color: transparent;
}

/* Accent word styling — EXACT same gradient as header pills */
.page-banner-accent {
    background: linear-gradient(135deg,
            #7DD3FC 0%,
            #38BDF8 20%,
            #2563EB 40%,
            #A78BFA 60%,
            #7C3AED 80%,
            #4C1D95 100%);
    -webkit-background-clip: text;
    color: transparent !important;

    /* soft subtle glow around gradient text */
    text-shadow:
        0 0 4px rgba(34, 211, 238, 0.35),
        0 0 8px rgba(34, 211, 238, 0.25);
}

/* Ensure metallic can't override it */
.page-banner-title.has-accent .page-banner-accent {
    background: linear-gradient(135deg,
            #7DD3FC 0%,
            #38BDF8 20%,
            #2563EB 40%,
            #A78BFA 60%,
            #7C3AED 80%,
            #4C1D95 100%) !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
}

/* Mobile tweak */
@media (max-width: 640px) {
    .page-banner-title {
        font-size: 18px;
        padding: 8px 16px;
    }
}



/* === Unified page header (banner + back link) === */
.page-head {
    max-width: 1000px;
    margin: 8px auto 24px;
    /* 🔥 match .page-banner */
    padding: 0;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* keep this so the banner doesn't add extra margin inside */
.page-head .page-banner {
    margin: 0;
}

.page-head .back-link {
    margin: 0;
    align-self: flex-start;
    /* stay left under the centered banner */
    font-size: 14px;
}


@media (max-width: 640px) {
    .page-head {
        margin: 10px auto 16px;
        padding-inline: 12px;
        gap: 6px;
    }

    .page-head .back-link {
        font-size: 13px;
    }
}


/* ========== 7) Buttons (Optimized Premium Version) ========== */

button,
.btn {
    appearance: none;
    border: 0;
    cursor: pointer;

    /* Dark premium primary button */
    background: #111827;
    color: #fff;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 14px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    /* Smooth transitions + tap animation */
    transition:
        background .15s ease,
        opacity .15s ease,
        transform .12s ease,
        box-shadow .15s ease;
}

/* Hover: subtle lift + glow – PRIMARY CTAs ONLY */
button.btn:not(.btn-secondary):not(.btn-outline):not(.btn-ghost):not(.btn-pill):hover,
a.btn:not(.btn-secondary):not(.btn-outline):not(.btn-ghost):not(.btn-pill):hover {
    background: #020617;
    transform: translateY(-1px);
    /* tiny lift */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15),
        0 0 12px rgba(80, 113, 230, 0.25);
    /* soft blue glow */
}

/* Mobile tap: gentle press */
button:active,
.btn:active {
    transform: translateY(1px);
    box-shadow: none;
}

/* Disabled */
button:disabled,
.btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Focus */
button:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

/* ========== Premium gradient border around main buttons ========== */

button.btn:not(.btn-secondary):not(.success):not(.btn-outline):not(.btn-ghost),
a.btn:not(.btn-secondary):not(.success):not(.btn-outline):not(.btn-ghost) {
    border: 1px solid transparent;
    background-image:
        linear-gradient(#111827, #111827),
        linear-gradient(135deg, #3b82f6, #6366f1, #8b5cf6);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* ========== Primary CTA ICON (20px, right aligned) ========== */

button.btn:not(.btn-secondary):not(.success):not(.btn-outline):not(.btn-ghost)::after,
a.btn:not(.btn-secondary):not(.success):not(.btn-outline):not(.btn-ghost)::after {
    content: "";
    display: inline-block;
    width: 25px;
    height: 25px;

    background-image: url("/assets/img/icon/icon.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    order: 2;
    margin-left: 4px;
}

/* Text always first */
button.btn span,
a.btn span {
    order: 1;
}

/* ================= SECONDARY / OUTLINE / GHOST
   – match FOOTER pill style exactly ================= */

.btn-secondary,
.btn-outline,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;

    /* Same gradient as app footer pills */
    background-image: linear-gradient(135deg,
            rgba(59, 130, 246, 0.10),
            rgba(129, 140, 248, 0.18));
    border: 1px solid rgba(148, 163, 255, 0.6);
    color: var(--brand-700);

    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.15);
    text-decoration: none;

    transition:
        background 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.12s ease,
        color 0.15s ease;
}

/* Hover – same as footer pills */
.btn-secondary:hover,
.btn-outline:hover,
.btn-ghost:hover {
    background-image: linear-gradient(135deg,
            rgba(59, 130, 246, 0.18),
            rgba(129, 140, 248, 0.26));
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.22);
    color: var(--brand-700);
}

/* Make 100% sure they NEVER get the primary icon */
.btn-secondary::after,
.btn-outline::after,
.btn-ghost::after {
    content: none !important;
}

/* ================= SUCCESS (NO ICON) ================= */
.btn.success {
    background: #107a3b;
    color: #fff;
    box-shadow: none;
}

.btn.success:hover {
    background: #0d642f;
}



/* Make ALL primary icon CTAs turn blue on hover (consistent for <a> and <button>) */
button.btn:not(.btn-secondary):not(.success):not(.btn-outline):not(.btn-ghost):hover,
a.btn:not(.btn-secondary):not(.success):not(.btn-outline):not(.btn-ghost):hover {
    color: var(--brand-400);
    /* same blue as old button text */
    text-decoration: none;
    /* override global a:hover underline */
}

/* ========== 8) Forms ========== */
label {
    display: block;
    font-weight: 600;
    margin: 8px 0 6px;
}

input,
textarea,
select {
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
}

textarea {
    resize: vertical;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

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

@media (max-width: 720px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* Password visibility (single source of truth) */
.field-eye {
    position: relative;
}

.field-eye .toggle-eye {
    position: absolute;
    right: 10px;
    top: 36px;
    /* aligned with input padding */

    /* ✅ hard reset so it DOESN'T inherit global button styles */
    appearance: none;
    border: 0;
    background: transparent !important;
    color: var(--text-muted) !important;

    padding: 4px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;

    box-shadow: none !important;
    background-image: none !important;
}

.field-eye .toggle-eye:hover {
    background: transparent !important;
    color: var(--brand-700) !important;
}

.field-eye .toggle-eye:active {
    transform: none !important;
}

.field-eye .toggle-eye:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: 8px;
}

/* Verification form validation (shared) */
.field-error {
    border: 1px solid #ef4444 !important;
    outline: 2px solid rgba(239, 68, 68, 0.25);
}

.field-error:focus {
    outline: 3px solid rgba(239, 68, 68, 0.35);
}

.field-error-hint {
    color: #ef4444;
    font-size: 12px;
    margin-top: 4px;
}

/* ========== 9) “My Products” grid ========== */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-top: 24px;
}

.product-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 15px;
    text-align: center;
}

.product-card.locked {
    background: #f0f0fe;
    color: #999;
}

.product-card.empty {
    color: #888;
}

.product-card .meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
}

/* ========== 10) Badges ========== */
.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--muted-surface);
    color: var(--brand-700);
    font-size: 12px;
    font-weight: 600;
}

.badge.ok {
    background: #e6ffed;
    color: #106b21;
}

/* Tiny badge next to Dashboard title for verified sellers */
.badge-verified-seller {
    margin-left: 8px;
    font-size: 11px;
}

.badge.warn {
    background: #fff8e1;
    color: #8a6d00;
}

.badge.block {
    background: #ffecec;
    color: #b30000;
}

.tight-list {
    margin: 0;
    padding-left: 18px;
}

/* ========== 11) Admin Overrides ========== */
#guard {
    background: #ffecec;
    color: #b30000;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-weight: 500;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
}

th,
td {
    border-bottom: 1px solid #eee;
    text-align: left;
    padding: 14px 12px;
    font-size: 14px;
    vertical-align: top;
}

th {
    background: #f1f4f9;
    color: #444;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
}

tr:last-child td {
    border-bottom: none;
}

.chip {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: #333;
}

.sub {
    color: #666;
    font-size: 12px;
    margin-top: 2px;
}

.b1 {
    background: #e8ecff;
    color: #2e3ba4;
}

.b1:hover {
    background: #d6ddff;
}

.b2 {
    background: #e6ffed;
    color: #107a3b;
}

.b2:hover {
    background: #d1ffd9;
}

.b3 {
    background: #ffecec;
    color: #b30000;
}

.b3:hover {
    background: #ffd4d4;
}

/* ========== 12) Auth Pages ========== */
.auth-center {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.auth-card {
    background: #fff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    width: 100%;
    max-width: 420px;
    text-align: center;
}

.auth-card .muted {
    margin-bottom: 20px;
}

.auth-card form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 10px;
}

.auth-card label {
    text-align: left;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 4px;
    color: #444;
}

.alt-link {
    margin-top: 14px;
    font-size: 14px;
}

.alt-link a {
    color: var(--brand-700);
    text-decoration: none;
}

.alt-link a:hover {
    text-decoration: underline;
}

/* ========== 13) Misc / Media ========== */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 10px;
}

.gallery img {
    width: 100%;
    border: 1px solid #E6E8F0;
    border-radius: 10px;
}

/* ===== Dashboard page tweaks ===== */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.topbar {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Single wide “feature” card row */
.feature-row {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 20px;
}

.feature-row a.card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.feature-row a.card>div {
    flex: 1 1 auto;
}

.feature-row a.card>.btn {
    margin-top: auto;
    width: max-content;
    align-self: flex-start;
}

/* Small utilities */
.hidden {
    display: none !important;
}

.form-grid {
    display: grid;
    gap: 14px;
}



/* === User dropdown (dashboard) === */
.user-menu {
    position: relative;
}

.user-menu .menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
    min-width: 220px;
    padding: 8px;
    z-index: 50;
    display: none;
}

.user-menu .menu.open {
    display: block;
}

.user-menu .menu a,
.user-menu .menu button {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    padding: 8px 14px;
    border-radius: 999px;

    background: #111827;
    color: #f9fafb;
    text-align: center;
    text-decoration: none;

    font-size: 14px;
    font-weight: 500;
    border: 0;
    cursor: pointer;

    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.25);
    transition:
        background 0.15s ease,
        color 0.15s ease,
        transform 0.12s ease,
        box-shadow 0.15s ease;
}

.user-menu .menu a:hover,
.user-menu .menu button:hover {
    background: #020617;
    color: var(--brand-400);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.35);
}



/* ===== Brand header (global) ===== */
.brand-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
    border-bottom: 1px solid var(--border);

    /* 10px top + bottom, 16px left/right */
    padding: 10px 16px;
    margin-bottom: 10px;
}

.brand-bar {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}




.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--brand-900);
    font-weight: 700;
    letter-spacing: .2px;
}

.brand img {
    display: block;
    height: auto;
    width: auto;
}

.brand-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Link-style pills (Main Site / Dashboard) – premium brand look */
.brand-actions>a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    padding: 7px 14px;
    border-radius: 999px;

    /* Turquoise → purple gradient */
    background-image: linear-gradient(135deg, #22d3ee, #6366f1);
    border: 1px solid rgba(59, 130, 246, 0.6);
    color: #020617;

    box-shadow:
        0 3px 10px rgba(15, 23, 42, 0.35),
        0 0 12px rgba(56, 189, 248, 0.35);
    transition:
        background 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.12s ease,
        color 0.15s ease;
}

.brand-actions>a:hover {
    background-image: linear-gradient(135deg, #38e2ff, #818cf8);
    transform: translateY(-1px);
    box-shadow:
        0 6px 18px rgba(15, 23, 42, 0.45),
        0 0 16px rgba(56, 189, 248, 0.45);
    text-decoration: none;
}

/* Non-clickable token label – darker capsule with glow */
.token-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 13px;
    padding: 7px 14px;
    border-radius: 999px;

    border: 1px solid rgba(129, 140, 248, 0.7);
    background-image:
        radial-gradient(circle at 0 0, rgba(94, 92, 255, 0.45), transparent 55%),
        radial-gradient(circle at 100% 0, rgba(45, 212, 191, 0.45), transparent 55%),
        linear-gradient(135deg, #020617, #020617);
    color: #e5f3ff;

    box-shadow:
        0 3px 10px rgba(15, 23, 42, 0.45),
        0 0 14px rgba(56, 189, 248, 0.4);
    user-select: none;
}

/* Coin icon sizes for header / account / footer */
.token-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 6px;
    object-fit: contain;
    flex-shrink: 0;
}

.token-icon-lg {
    display: inline-block;
    width: 26px;
    height: 26px;
    margin-right: 8px;
    object-fit: contain;
    flex-shrink: 0;
}

.token-icon-footer {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    object-fit: contain;
    flex-shrink: 0;
}



/* ===== Buttons: loading/spinner state ===== */
@keyframes sh-spin {
    to {
        transform: rotate(360deg);
    }
}

.btn[aria-busy="true"],
button[aria-busy="true"] {
    position: relative;
    pointer-events: none;
    color: transparent;
    /* keep width stable */
}

.btn[aria-busy="true"]::after,
button[aria-busy="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #fff;
    /* primary spinner */
    border-right-color: transparent;
    animation: sh-spin .6s linear infinite;
}

/* Secondary buttons = dark spinner */
.btn.btn-secondary[aria-busy="true"]::after,
button.btn-secondary[aria-busy="true"]::after {
    border-color: var(--brand-700);
    border-right-color: transparent;
}

/* ===== Admin + User dropdown pills (email + Admin) ===== */
.dropdown {
    position: relative;
}

/* Email pill + Admin pill – match Main Site / Dashboard buttons */
.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;

    border-radius: 999px;
    padding: 7px 14px;
    font-weight: 600;
    font-size: 13px;

    background-image: linear-gradient(135deg, #22d3ee, #6366f1);
    border: 1px solid rgba(59, 130, 246, 0.6);
    color: #020617;

    box-shadow:
        0 3px 10px rgba(15, 23, 42, 0.35),
        0 0 12px rgba(56, 189, 248, 0.35);
    transition:
        background 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.12s ease,
        color 0.15s ease;
}

.dropdown-toggle:hover {
    background-image: linear-gradient(135deg, #38e2ff, #818cf8);
    transform: translateY(-1px);
    box-shadow:
        0 6px 18px rgba(15, 23, 42, 0.45),
        0 0 16px rgba(56, 189, 248, 0.45);
}

.dropdown-toggle:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: 999px;
}




/* Bigger dropdown triangle */
.dropdown-toggle span[aria-hidden="true"] {
    font-size: 21px;
    /* bigger arrow */
    margin-left: 6px;
}


/* Layout safety */
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding-inline: 16px;
    box-sizing: border-box;
}

/* Universal SellwiseHub page width */
main.container {
    max-width: 1000px;
    margin: 0 auto;
    padding-inline: 16px;
    box-sizing: border-box;
}

.card {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Toolbars with lots of controls */
.toolbar {
    flex-wrap: wrap;
    overflow-x: auto;
}

/* Inputs/selects never exceed card width */
input,
select {
    max-width: 100%;
}

/* Table safety */
table {
    table-layout: fixed;
    width: 100%;
}

th,
td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Long tokens/UIDs can wrap where needed */
.mono,
.uid,
.email {
    font-variant-numeric: tabular-nums;
    word-break: break-all;
    white-space: normal;
    line-height: 1.2;
}

/* Optional: a bit more contrast and stripe for readability */
tbody tr:nth-child(odd) td {
    background: #fafbfe;
}

td .email {
    font-weight: 500;
    color: #2b2f36;
}

td .uid {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

/* ===== Brand footer (global) ===== */
.brand-footer {
    margin-top: 32px;
    padding: 14px 16px 20px;
    border-top: 1px solid rgba(148, 163, 184, 0.4);
    background:
        radial-gradient(circle at top left, rgba(80, 113, 230, 0.08), transparent 55%),
        radial-gradient(circle at top right, rgba(55, 211, 238, 0.07), transparent 55%),
        #f9fafb;
}

.brand-footer-inner {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    /* stack rows */
    align-items: center;
    /* center horizontally */
    justify-content: center;
    /* center vertically */
    gap: 8px;
    flex-wrap: wrap;
    text-align: center;
}

.brand-footer-left,
.brand-footer-right {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Footer pills (Top up / My account / Return / Contact) */
.footer-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 13px;
    border-radius: 999px;

    /* Soft turquoise → purple wash */
    background-image: linear-gradient(135deg,
            rgba(34, 211, 238, 0.16),
            rgba(129, 140, 248, 0.26));
    border: 1px solid rgba(148, 163, 255, 0.8);
    color: var(--brand-700);
    text-decoration: none;

    box-shadow:
        0 3px 9px rgba(15, 23, 42, 0.18),
        0 0 10px rgba(56, 189, 248, 0.30);
    transition:
        background 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.12s ease,
        color 0.15s ease;
}

.footer-link:hover {
    background-image: linear-gradient(135deg,
            rgba(34, 211, 238, 0.24),
            rgba(129, 140, 248, 0.36));
    transform: translateY(-1px);
    box-shadow:
        0 5px 14px rgba(15, 23, 42, 0.26),
        0 0 14px rgba(56, 189, 248, 0.40);
    color: var(--brand-700);
    text-decoration: none;
}



.footer-meta {
    font-size: 12px;
    color: #6b7280;
}

@media (max-width: 640px) {
    .brand-footer {
        padding-inline: 12px;
    }

    .brand-footer-inner {
        align-items: flex-start;
    }
}


/* ===== App footer (dashboard) ===== */

.app-footer {
    margin-top: 32px;
    padding: 12px 16px 18px;
    border-top: 1px solid var(--border);
    background: #f9fafb;
}

.app-footer-inner {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
}

/* Row of footer pills */
.app-footer-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

/* Footer pills (Top up tokens / My account / Return to main site) */
.app-footer a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;

    background-image: linear-gradient(135deg,
            rgba(59, 130, 246, 0.10),
            rgba(129, 140, 248, 0.18));
    border: 1px solid rgba(148, 163, 255, 0.6);
    color: var(--brand-700);
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.15);
    text-decoration: none;
    transition:
        background 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.12s ease,
        color 0.15s ease;
}

.app-footer a:hover {
    background-image: linear-gradient(135deg,
            rgba(59, 130, 246, 0.18),
            rgba(129, 140, 248, 0.26));
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.22);
    color: var(--brand-700);
}

/* Version + support text under the pills */
.app-footer-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    color: var(--text-muted);
}

.app-footer-meta a {
    color: var(--brand-400);
    text-decoration: none;
}

.app-footer-meta a:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .app-footer {
        padding-bottom: 24px;
    }
}


/* ===== Footer-style pill buttons (Reset / Dismiss / Cancel / etc.) ===== */

.btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 13px;
    border-radius: 999px;

    /* same look as footer-link pills */
    background-image: linear-gradient(135deg,
            rgba(34, 211, 238, 0.16),
            rgba(129, 140, 248, 0.26));
    border: 1px solid rgba(148, 163, 255, 0.8);
    color: var(--brand-700);
    text-decoration: none;

    box-shadow:
        0 3px 9px rgba(15, 23, 42, 0.18),
        0 0 10px rgba(56, 189, 248, 0.30);
    background-color: transparent;
    cursor: pointer;
}

.btn-pill:hover {
    background-image: linear-gradient(135deg,
            rgba(34, 211, 238, 0.24),
            rgba(129, 140, 248, 0.36));
    transform: translateY(-1px);
    box-shadow:
        0 5px 14px rgba(15, 23, 42, 0.26),
        0 0 14px rgba(56, 189, 248, 0.40);
    color: var(--brand-700);
}

.btn-pill:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

/* --- Pill / secondary buttons: text-only blue hover, no underline --- */

/* Make sure anchor pills never get underlined */
a.btn-secondary,
a.btn-pill {
    text-decoration: none;
}

/* Hover: keep their existing gradient, just tint text blue and remove underline */
a.btn-secondary:hover,
a.btn-pill:hover {
    text-decoration: none;
    color: var(--brand-400);
}

/* Icon inside pill-style buttons (email results, reset, etc.) */
.btn-pill .btn-icon {
    width: 24px;
    height: 24px;
    background-image: url("/assets/img/icon/icon.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}


/* Center the reset/cancel pill relative to the main CTA above */
.button-row {
    display: flex;
    align-items: center;
    /* centers vertically */
    gap: 14px;
}

/* Main CTA stays normal */
.button-row .btn {
    align-self: flex-start;
}

/* Pill buttons align to the middle of the main button */
.button-row .btn-pill {
    align-self: center;
}

/* =======================
   Sell Checker – mobile button row fix
   ======================= */
@media (max-width: 640px) {
    .button-row {
        flex-wrap: wrap;
        /* allow wrapping instead of clipping */
        justify-content: flex-start;
        gap: 8px;
        /* a bit tighter on mobile */
    }

    .button-row .btn,
    .button-row .btn-pill {
        width: 100%;
        /* full-width stacked buttons */
        max-width: 100%;
        justify-content: center;
    }
}



/* ============================================
   SellwiseHub – Mobile optimisation pack (≤ 640px)
   FINAL – header + footer + spacing
============================================ */
@media (max-width: 640px) {

    /* 1) Base layout & typography */
    body {
        font-size: 15px;
    }

    .container,
    main.container,
    main.container.narrow {
        padding-inline: 12px;
    }

    main.container,
    main.container.narrow {
        padding-bottom: 24px;
    }

    /* 2) HEADER: keep logo left, put Tokens/Main/email on ONE line,
          and push Admin onto its own full-width row under them */
    .brand-header {
        padding: 10px 10px;
    }

    .brand-bar {
        max-width: 100%;
        gap: 8px;
        flex-wrap: wrap;
        align-items: center;
    }

    /* order things: logo first, pills second, admin third */
    .brand-bar .brand {
        order: 1;
        flex: 0 0 auto;
    }

    .brand-bar .brand-actions {
        order: 2;
        flex: 1 1 auto;
        display: flex;
        justify-content: flex-end;
        flex-wrap: nowrap;
        /* force Tokens / Main / email onto one line */
        column-gap: 6px;
    }

    /* Admin dropdown lives as a separate .dropdown in brand-bar */
    .brand-bar>.dropdown {
        order: 3;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        /* admin pill under the logo */
        margin-top: 2px;
    }

    /* Shrink header pills slightly so 3 fit side-by-side on phones */
    .brand-actions .token-badge,
    .brand-actions>a,
    .brand-actions .dropdown-toggle {
        padding: 4px 9px;
        font-size: 11px;
    }

    /* Logo – keep it sharp but not huge */
    .brand-logo {
        height: 22px;
        max-width: 140px;
    }

    /* 3) Page banner */
    .page-banner {
        margin: 10px auto 16px;
    }

    .page-banner-title {
        font-size: 18px;
        padding: 8px 16px;
        letter-spacing: 0.15px;
    }

    .page-banner+.muted {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 10px;
    }

    /* 4) Guard / info bars */
    #guard {
        margin-top: 10px;
        margin-bottom: 14px;
        font-size: 13px;
    }

    /* 5) Cards / grids spacing */
    .section {
        margin-top: 28px;
    }

    .section .card {
        margin-top: 8px;
    }

    .cards {
        gap: 16px;
        margin-top: 18px;
    }

    .product-grid {
        gap: 14px;
        margin-top: 16px;
    }

    .gallery {
        gap: 10px;
    }

    /* 6) Status lines (e.g. Platform Restrictions summary) */
    #statusLine {
        font-size: 13px;
    }

    #summaryRow {
        gap: 6px;
        margin-top: 4px;
        margin-bottom: 8px;
        flex-wrap: wrap;
    }

    /* 7) FOOTER – slightly tighter so it visually matches header height */
    .app-footer {
        padding: 8px 10px 14px;
    }

    .app-footer-inner {
        gap: 6px;
    }

    .app-footer-actions {
        gap: 6px;
    }

    .app-footer a {
        padding: 5px 9px;
        font-size: 12px;
    }

    .app-footer-meta {
        font-size: 11px;
        line-height: 1.4;
    }
}

/* ======================================================
   MOBILE OPTIMISATION – HEADER + FOOTER
   (Applies only on phones / narrow screens)
====================================================== */
@media (max-width: 640px) {

    /* HEADER: tighter + keep Tokens / Main / Email together */


    .brand-bar {
        gap: 8px;
    }

    .brand-actions {
        flex: 1;
        justify-content: flex-end;
        flex-wrap: wrap;
        row-gap: 6px;
        column-gap: 6px;
    }

    /* Make header pills a bit wider so text stays on one line */
    .brand-actions .token-badge,
    .brand-actions>a,
    .brand-actions .dropdown-toggle {
        padding: 5px 12px;
        font-size: 12px;
        min-width: 92px;
        /* <-- gives Tokens / Main Site more width */
        justify-content: center;
        text-align: center;
    }

    /* Last dropdown in the header (Admin) is allowed to wrap to its own row */
    .brand-actions .dropdown:last-child {
        flex-basis: 100%;
        justify-content: flex-start;
    }

    /* FOOTER: slightly shorter + 2×2 grid for the 4 pills */
    .app-footer {
        padding: 10px 10px 18px;
    }

    .app-footer-inner {
        gap: 6px;
    }

    .app-footer-actions {
        gap: 6px;
        justify-content: center;
        max-width: 420px;
        margin: 0 auto;
    }

    .app-footer a {
        padding: 5px 10px;
        font-size: 12px;
        flex: 0 1 calc(50% - 8px);
        /* <-- forces 2 per row */
        justify-content: center;
    }
}

/* ======================================================
   FINAL FOOTER UPGRADE (MOBILE ≤ 640px)
   – Match header pill style
   – Put all 4 footer pills on ONE line
====================================================== */
@media (max-width: 640px) {

    /* Footer container spacing */
    .app-footer {
        padding: 14px 10px 22px;
    }

    .app-footer-inner {
        gap: 12px;
    }

    /* Make footer pill row one single line */
    .app-footer-actions {
        flex-wrap: nowrap;
        /* prevent wrapping */
        justify-content: space-between;
        width: 100%;
        gap: 6px;
    }

    /* Footer pills: same dimensions + glow as header pills */
    .app-footer a {
        flex: 1;
        /* equal width for all 4 */
        text-align: center;

        padding: 8px 10px;
        font-size: 12px;
        border-radius: 999px;

        background-image: linear-gradient(135deg, #22d3ee, #6366f1);
        border: 1px solid rgba(59, 130, 246, 0.6);
        color: #020617;

        box-shadow:
            0 3px 10px rgba(15, 23, 42, 0.35),
            0 0 12px rgba(56, 189, 248, 0.35);

        transition:
            background 0.15s ease,
            box-shadow 0.15s ease,
            transform 0.12s ease,
            color 0.15s ease;
    }

    /* Hover (mobile presses still use hover rules) */
    .app-footer a:hover {
        background-image: linear-gradient(135deg, #38e2ff, #818cf8);
        transform: translateY(-1px);
        box-shadow:
            0 6px 18px rgba(15, 23, 42, 0.45),
            0 0 16px rgba(56, 189, 248, 0.45);
        color: #020617;
    }

    /* Footer metadata (version text) */
    .app-footer-meta {
        text-align: center;
        font-size: 11.5px;
        opacity: 0.8;
    }
}

/* ============================================
   SellwiseHub – Header dropdown menu (user + admin)
   Single source of truth
============================================ */
.brand-header .dropdown {
    position: relative;
}

/* Dropdown panel matches the width of the Admin/email pill */
.brand-header .dropdown-menu {
    position: absolute;
    right: 0;
    top: 120%;
    z-index: 1001;

    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;

    padding: 6px 0;
    margin: 0;

    background: transparent;
    border: 0;
    box-shadow: none;

    min-width: 100%;
    /* ← same width as the .dropdown-toggle pill */
}

/* show when JS adds .open */
.brand-header .dropdown.open .dropdown-menu {
    display: flex;
}

/* Base reset shared by both items */
.header-menu-item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    padding: 8px 16px;
    margin: 0 auto;

    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;

    border: 0;
    background: transparent;
    color: inherit;
    box-shadow: none;

    transition:
        background 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.12s ease,
        color 0.15s ease;
}

/* make sure button elements ignore global button styles */
button.header-menu-item {
    appearance: none;
    border: 0;
    background: transparent;
}

/* --- My account = CLEAR pill (subheading style) --- */
.header-menu-account {
    background-color: #f9fafb;
    border: 1px solid rgba(148, 163, 255, 0.9);
    color: var(--brand-700);

    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10);
}

.header-menu-account:hover {
    background-color: #f9fafb;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10);
    transform: none;
}

/* --- Log out = FOOTER pill style --- */
.header-menu-logout {
    background-image: linear-gradient(135deg,
            rgba(34, 211, 238, 0.16),
            rgba(129, 140, 248, 0.26));
    border: 1px solid rgba(148, 163, 255, 0.8);
    color: var(--brand-700);

    box-shadow:
        0 3px 9px rgba(15, 23, 42, 0.18),
        0 0 10px rgba(56, 189, 248, 0.30);
}

.header-menu-logout:hover {
    background-image: linear-gradient(135deg,
            rgba(34, 211, 238, 0.24),
            rgba(129, 140, 248, 0.36));
    transform: translateY(-1px);
    box-shadow:
        0 5px 14px rgba(15, 23, 42, 0.26),
        0 0 14px rgba(56, 189, 248, 0.40);
    color: var(--brand-700);
}



/* =========================================================
   🔥 FINAL FIX PATCH FOR HEADER DROPDOWN (USER & ADMIN)
   Forces consistent pill sizes + proper styles + no underline
   ========================================================= */

/* Force dropdown panel background so items aren't floating */
.brand-header .dropdown-menu {
    background: #ffffff !important;
    padding: 10px !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid rgba(148, 163, 255, 0.4) !important;
}

/* RESET dropdown items (remove inherited link styling) */
.brand-header .dropdown-menu a,
.brand-header .dropdown-menu button {
    text-decoration: none !important;
    box-shadow: none !important;
    /* no border reset here on purpose */
}

/* --- My account = CLEAR pill (exact sub-heading style) --- */
.header-menu-account {
    background-color: #f9fafb;
    /* same as subheading clear background */
    border: 1px solid rgba(148, 163, 255, 0.9);
    /* the blue ring */
    color: var(--brand-700);

    padding: 8px 16px;
    border-radius: 999px;

    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.header-menu-account:hover {
    background-color: #eef2ff;
    /* tiny tint so hover is visible */
    border-color: rgba(129, 140, 248, 1);
    /* slightly stronger blue */
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.16);
}

/* FIX — Log out pill (footer style) */
.header-menu-logout {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background-image: linear-gradient(135deg,
            rgba(34, 211, 238, 0.16),
            rgba(129, 140, 248, 0.26)) !important;
    border: 1px solid rgba(148, 163, 255, 0.8) !important;
    color: var(--brand-700) !important;

    padding: 10px 14px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 600 !important;

    width: 100% !important;
}

.header-menu-logout:hover {
    background-image: linear-gradient(135deg,
            rgba(34, 211, 238, 0.24),
            rgba(129, 140, 248, 0.36)) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.26) !important;
    color: var(--brand-700) !important;
}

/* Fix uneven padding from multiple media queries fighting */
.brand-header .dropdown-menu .header-menu-item {
    padding: 10px 14px !important;
    width: 100% !important;
}

/* Kill underline on hover (Safari bug) */
.brand-header .dropdown-menu a:hover {
    text-decoration: none !important;
}

/* Ensure both items have same height */
.header-menu-account,
.header-menu-logout {
    min-height: 42px !important;
}

/* FORCE the blue subheading-style border on the My account pill */
.header-menu-account {
    background-color: #f9fafb !important;
    border: 1.5px solid rgba(148, 163, 255, 1) !important;
    /* stronger blue */
    border-radius: 999px !important;

    color: var(--brand-700) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10) !important;

    padding: 10px 16px !important;
}

/* Hover stays subtle but visible */
.header-menu-account:hover {
    background-color: #eef2ff !important;
    border-color: rgba(129, 140, 248, 1) !important;
}

/* 🔵 My account – subheading-style pill, full width */
.brand-header .dropdown-menu .header-menu-account.header-menu-item {
    background-color: #f9fafb !important;
    /* same as .subheading-pill */
    border: 1px solid rgba(148, 163, 255, 0.9) !important;
    color: var(--brand-700) !important;

    border-radius: 999px !important;
    padding: 10px 14px !important;

    /* make it same width as Log out */
    width: 100% !important;
    display: flex !important;
    align-self: stretch !important;
    justify-content: center !important;

    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10) !important;
}

/* Hover – subtle tint */
.brand-header .dropdown-menu .header-menu-account.header-menu-item:hover {
    background-color: #eef2ff !important;
    border-color: rgba(129, 140, 248, 1) !important;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.16) !important;
}


/* ============================================
   MASTER HEADER PILL SIZE (Desktop)
   – Tokens / Main Site / Email / Admin
   ============================================ */
.brand-actions .token-badge,
.brand-actions>a,
.brand-actions .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 7px 16px;
    /* unified padding */
    font-size: 13px;
    line-height: 1.1;
    border-radius: 999px;

    min-height: 38px;
    /* <-- same visual height */
}


/* ============================================
   MASTER HEADER PILL SIZE (Mobile ≤ 640px)
   ============================================ */
@media (max-width: 640px) {

    .brand-actions .token-badge,
    .brand-actions>a,
    .brand-actions .dropdown-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        padding: 6px 10px;
        /* shared mobile padding */
        font-size: 12px;
        line-height: 1.1;
        border-radius: 999px;

        min-height: 34px;
        /* all pills same height */
    }
}

/* =====================================================
   FINAL HEADER PILL HEIGHT NORMALISER
   Ensures Tokens / Main Site / Email / Admin same height
   ===================================================== */
.brand-actions>a,
.brand-actions .token-badge,
.brand-actions .dropdown-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    /* adjust 36–40 if needed */
    line-height: 1 !important;
}

/* ============================================
   MOBILE HEADER LOCKED HEIGHT
   – stop header shrinking / growing on load
============================================ */
@media (max-width: 640px) {
    .brand-header {
        height: 125px;
        /* try 84px first; if pills feel cramped, go 90px */
        padding: 10px 10px;
        /* same padding you already use */
        box-sizing: border-box;
    }

    .brand-bar {
        height: 100%;
        /* fill the fixed header */
        align-items: center;
        /* keep logo + pills vertically centered */
    }
}


/* ============================================
   DESKTOP CLAMP – unify dashboard + tools width
   ============================================ */
@media (min-width: 641px) {

    /* 1) Main content rail for all app pages */
    main.container {
        max-width: 1000px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }

    /* Some pages might use plain <main> without .container on admin pages.
     This keeps them visually in the same rail without touching auth center. */
    main:not(.auth-center):not(.full-width):not(.auth-layout) {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }

    /* 2) Page header (banner + back link) locked to the same rail */
    .page-head {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }

    /* Banner sits inside the same rail, no random wider/narrower pages */
    .page-head .page-banner,
    .page-banner {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }

    /* 3) Single cards (forms/results) fill the rail */
    .section>.card,
    .section>form.card,
    #results.card,
    #liveBox.card,
    #realGapBox.card {
        width: 100%;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    /* 4) Card grids (dashboard + tool grids) share the same left/right edge */
    .cards {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }

    /* 5) Extra safety: any loose .card inside main also respects the rail */
    main .card {
        width: 100%;
        max-width: 1000px;
        box-sizing: border-box;
    }
}