@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap");

/* ============================================================
MAIN SETTINGS
Every knob you will ever want to turn lives in this block.
Nothing here is magic — each value is a plain number or
color that you can change freely without breaking anything.
============================================================ */
:root {
    /* ---- Frame alignment ---- */
    --side-width: 150px;    /* width of the left/right vertical frame strips */
    --top-height: 150px;    /* height of the top strip (corners + top edge) */
    --bottom-height: 150px; /* height of the bottom strip (corners + bottom edge) */

    /* ---- Page padding, each side independent ---- */
    /* Breathing room between the window edges and the content.
    The header, the sticky footer, and any future content all
    respect this padding. Set a side to 0 and things will touch
    that edge. */
    --pad-top: 12px;
    --pad-right: 25px;
    --pad-bottom: 10px;
    --pad-left: 25px;

    /* ---- Header ---- */
    /* How far down the header stretches. Pure preference. */
    --header-height: 74px;

    /* ---- Header logo ---- */
    /* The logo is positioned independently inside the header.
    Height controls its size. Left offset moves it horizontally.
    Vertical offset moves it from true vertical center: negative values
    move it upward and positive values move it downward.
    The image file must be assets/logo.png. */
    --logo-height: 60px;
    --logo-left-offset: 6px;
    --logo-vertical-offset: -6px;

    /* ---- Header announcement ---- */
    /* Left and right define the announcement's private territory.
    Increase the left value if a wider logo needs more room; the right
    value reserves room for the header phone button. Duration controls
    how long one complete pass takes. */
    --announcement-left: 100px;
    --announcement-right: 64px;
    --announcement-color: 255, 211, 92;
    --announcement-font-size: 17px;
    --announcement-duration: 12s;
    --announcement-gap: 160px;
    --announcement-vertical-offset: 0px;

    /* ---- Header phone button ---- */
    /* Round contact button pinned to the header edge opposite the logo.
    The icon artwork comes from assets/phone.svg as a currentColor mask. */
    --header-phone-size: 40px;
    --header-phone-right: 10px;
    --header-phone-vertical-offset: 0px;

    /* Width of the invisible fade where the message approaches the
    logo. This is an alpha mask, not a colored shadow. */
    --announcement-logo-fade-width: 46px;
    --announcement-edge-fade-width: 46px;

    /* ---- Product layout ---- */
    /* Products are arranged two per row. Product-column-gap controls
    the larger space between those two complete products. Piece-gap
    controls the smaller space between a title and its two buttons. */
    --product-row-gap: 36px;
    --product-column-gap: 48px;
    --product-piece-gap: 8px;
    --product-piece-height: 58px;

    /* ---- Product categories ---- */
    /* Category wrappers remain visually empty. These values control
    only the spacing, centered title, and ornamental divider. */
    --category-space: 64px;
    --category-title-color: 242, 238, 232;
    --category-title-size: 30px;
    --category-divider-color: 242, 238, 232;
    --category-divider-height: 38px;
    --category-divider-gap: 5px;
    /* Set to none to hide category PNG ornaments. Set back to block to show them. */
    --category-separator-display: block;
    /* Set to none to hide main-page-title PNG ornaments. */
    --page-title-separator-display: block;

    /* ---- Home page ---- */
    /* Home uses its own wallpaper, dark cards, and glass islands. */
    --home-tint-color: 20, 34, 45;
    --home-tint-strength: 0;
    --home-content-max-width: 1000px;
    --home-section-gap: 44px;
    --home-card-min-width: 420px;
    --home-card-max-width: 100%;
    --home-actions-max-width: 760px;
    --home-contact-max-width: 900px;
    --home-card-padding: 26px;
    --home-card-radius: 8px;
    /* Inner spacing for Account Info, My Info, and other Home cards. */
    --home-card-title-gap: 30px;
    --home-info-row-gap: 24px;
    --home-info-column-gap: 38px;
    --home-info-label-value-gap: 9px;

    /* ---- My Info form action buttons ---- */
    --home-form-button-gap: 14px;
    --home-form-button-min-width: 150px;
    --home-form-button-height: 52px;
    --home-form-button-padding-x: 22px;
    --home-form-button-font-size: 15px;
    --home-form-button-radius: 9px;
    --home-form-button-text: 248, 248, 248;
    --home-form-button-hover-text: 255, 202, 65;
    --home-form-button-underlay: 0, 0, 0;
    --home-form-button-underlay-strength: 0.38;
    --home-form-button-shadow-strength: 0.42;
    --home-form-button-transition: 180ms;
    --home-form-cancel-button-image: url("assets/home-form-cancel-button-background.png");
    --home-form-submit-button-image: url("assets/home-form-submit-button-background.png");

    /* ---- Unified Home-style theme for every page ---- */
    --unified-wallpaper-image: url("assets/home-page-background.webp");
    --unified-section-image: url("assets/home-page-div-background.webp");
    --unified-action-image: url("assets/xhome-page-div-background.png");
    --unified-title-image: url("assets/home-page-section-title-background.webp");
    --unified-input-image: url("assets/home-page-input-background.webp");
    --unified-text-color: 248, 248, 248;
    --unified-heading-color: 239, 194, 82;
    --unified-action-hover-color: 239, 194, 82;
    --unified-card-radius: 10px;
    --unified-card-shadow-strength: 0.42;
    --unified-category-padding: 26px;
    --unified-product-radius: 9px;
    /* New filenames: deliberately different from the old gem assets. */
    --trade-sell-action-image: url("assets/trade-sell-action-background.png");
    --trade-buy-action-image: url("assets/trade-buy-action-background.png");
    --unified-page-title-color: 0, 0, 0;
    --unified-back-button-color: 0, 0, 0;
    --unified-back-button-hover-color: 239, 194, 82;
    --page-title-icon-size: 36px;
    --page-title-icon-gap: 10px;
    --mobile-page-title-icon-size: 26px;
    --mobile-content-horizontal-padding: 2px;
    --mobile-section-horizontal-padding: 8px;
    --mobile-home-card-horizontal-padding: 14px;
    --mobile-product-piece-gap: 4px;
    --mobile-full-width-control-gap: 10px;
    --back-button-block-gap: 10px;

    /* ---- Compact Trade internals ---- */
    --trade-section-padding: 18px;
    --trade-title-padding-y: 8px;
    --trade-title-padding-x: 14px;
    --trade-info-card-padding: 28px;
    --trade-info-card-gap: 18px;
    --trade-info-metric-padding: 9px;
    --trade-piece-padding-x: 4px;
    --mobile-trade-section-padding: 4px;
    --mobile-trade-info-card-padding: 18px;
    --mobile-trade-info-metric-padding: 7px;
    --mobile-trade-piece-padding-x: 2px;

    /* ---- Universal ultra-thin scrollbars ---- */
    --global-scrollbar-size: 2px;
    --global-scrollbar-thumb: 255, 202, 65;
    --global-scrollbar-thumb-strength: 0.72;
    --global-scrollbar-track: 0, 0, 0;
    --global-scrollbar-track-strength: 0.08;

    /* Fluid mobile product height scales with viewport width. */
    --mobile-product-piece-min-height: 38px;
    --mobile-product-piece-fluid-height: 12vw;
    --mobile-product-piece-max-height: 46px;
    /* ---- Finance action groups ---- */
    --finance-actions-max-width: 900px;
    --finance-section-gap: 44px;
    --finance-section-padding: 24px;
    --finance-button-gap: 14px;
    --finance-button-min-height: 64px;
    --finance-button-font-size: 16px;
    --finance-mobile-section-padding: 12px;
    --finance-mobile-section-gap: 24px;
    --finance-mobile-button-gap: 10px;
    /* ---- Per-product adaptive layout ---- */
    --product-shell-image: url("assets/xhome-page-div-background.png");
    --product-shell-padding: 8px;
    --product-shell-radius: 10px;
    --product-shell-shadow-strength: 0.42;
    --product-title-max-font-size: 18px;
    --product-title-inline-min-font-size: 12px;
    --product-price-inline-min-font-size: 12px;
    --product-stacked-min-font-size: 10px;
    --product-text-fit-step: 0.5;
    --product-stacked-row-gap: 6px;
    --mobile-product-shell-padding: 4px;
    --mobile-product-title-max-font-size: 14px;
    --mobile-product-inline-min-font-size: 11px;
    --trade-history-cta-max-width: 300px;
    /* ---- V20 Home and gold refinements ---- */
    --bright-gold: 255, 223, 88;
    --home-account-section-width: 980px;
    --home-info-section-width: 820px;
    --home-dashboard-max-width: 900px;
    --home-dashboard-gap: 18px;
    --trade-info-description-size: 18px;
    --trade-info-title-padding-y: 10px;
    --trade-info-title-padding-x: 18px;
    /* ---- V21 spacing and update indicator ---- */
    --home-account-card-padding: 18px;
    --home-account-column-gap: 16px;
    --home-account-row-gap: 14px;
    --home-account-item-max-width: 160px;
    --last-update-font-size: 17px;
    --last-update-padding-y: 6px;
    --last-update-padding-x: 10px;
    --last-update-offset: 7px;
    --last-update-reserved-space: 38px;
    --last-update-right-offset: 64px;
    --trade-last-update-reserved-space: 32px;
    --trade-last-update-top-offset: 8px;
    --product-row-gap-compact: 20px;
    --mobile-product-row-gap-compact: 14px;
    --trade-info-card-expanded-gap: 26px;
    --mobile-trade-info-card-expanded-gap: 20px;
    --trade-category-gap: 20px;
    --mobile-trade-category-gap: 10px;
    --trade-info-card-bottom-margin: 20px;
    --mobile-trade-info-card-bottom-margin: 10px;
    --trade-category-title-bottom-gap: 18px;
    --mobile-trade-category-title-bottom-gap: 10px;
    --possessions-table-max-width: 900px;
    --possessions-table-min-width: 360px;
    --possessions-table-cell-padding-y: 8px;
    --possessions-table-cell-padding-x: 10px;
    --home-card-text: 248, 248, 248;
    --home-card-heading: 239, 194, 82;
    --home-map-height: 240px;
    --home-action-hover-scale: 1.035;
    --home-action-transition: 220ms;

    /* Home logo positioning is independent from every other page.
    Positive vertical values move only the Home logo downward. */
    --home-logo-height: 60px;
    --home-logo-left-offset: 6px;
    --home-logo-vertical-offset: 0px;

    /* Home-only navigation, announcement, and expand-icon colors. */
    --home-footer-nav-default: 190, 194, 200;
    --home-footer-nav-hover: 0, 0, 0;
    --home-footer-nav-active: 255, 202, 65;
    --home-announcement-color: 190, 194, 200;
    --home-expand-icon-color: 190, 194, 200;
    --home-expand-icon-hover: 255, 255, 255;

    /* Dedicated image files for Home section headings and inputs. */
    --home-title-image: url("assets/home-page-section-title-background.webp");
    --home-input-image: url("assets/home-page-input-background.webp");

    /* ---- Home glass header and footer ---- */
    /* Glass color is RGB. Opacity controls color intensity, blur
    controls the strength of the frosted-glass effect, and saturation
    controls how vivid the wallpaper appears through the glass. */
    --home-glass-color: 0, 96, 57;
    --home-glass-opacity: 0.75;
    --home-glass-blur: 18px;
    --home-glass-saturation: 145%;
    --home-glass-border-color: 255, 202, 65;
    --home-glass-border-strength: 0.58;
    --home-glass-shadow-color: 0, 0, 0;
    --home-glass-shadow-strength: 0.38;
    --home-glass-radius: 24px;
    --home-glass-side-inset: 18px;

    /* ---- Opening information card ---- */
    /* Controls the introductory tile shown before the product lists. */
    --info-card-max-width: 380px;
    --info-card-padding: 24px;
    --info-card-gap: 24px;
    --info-title-color: 5, 5, 5;
    --info-text-color: 5, 5, 5;
    --info-metric-background: 0, 0, 0;
    --info-metric-background-strength: 0.95;
    --info-metric-radius: 10px;
    --info-gold-color: 255, 215, 92;
    --info-sell-width: 90px;
    --info-card-bottom-margin: 56px;

    /* Same small down-right shadow language used by product pieces. */
    --info-card-shadow-x: 3px;
    --info-card-shadow-y: 5px;
    --info-card-shadow-blur: 8px;
    --info-card-shadow-color: 0, 0, 0;
    --info-card-shadow-strength: 0.36;

    /* ---- Decorative-image shadow underlay ---- */
    /* GENERAL RULE: almost every element that combines a background
    image with a shadow should also receive this translucent base.
    Decorative PNGs often contain transparent parts; without an
    underlay, those holes expose the page instead of reading as part
    of the shadowed component. The color paints BEHIND the image. */
    --tile-panel-underlay-color: 0, 0, 0;
    --tile-panel-underlay-strength: 0.28;

    /* ---- Gem button underlay ---- */
    /* This translucent color paints BEHIND each gem PNG. It is only
    visible through transparent parts of the image. Strength ranges
    from 0 (invisible) to 1 (fully opaque). */
    --gem-underlay-color: 0, 0, 0;
    --gem-underlay-strength: 0.24;

    /* ---- Gem image tints ---- */
    /* These two translucent colors paint ON TOP of the gem PNGs.
    Buy and sell are independent, so each side can be tuned without
    affecting the other. Strength ranges from 0 to 1. */
    --sell-gem-tint-color: 120, 0, 12;
    --sell-gem-tint-strength: 0;
    --buy-gem-tint-color: 255, 255, 255;
    --buy-gem-tint-strength: 0.11;

    /* ---- Gem button hover growth ---- */
    /* Scale 1 means no growth. 1.05 means five percent larger.
    Duration controls how quickly the button grows and returns. */
    --gem-hover-scale: 1.06;
    --gem-hover-duration: 400ms;

    /* Gem prices begin at the maximum and JavaScript reduces them
    only when necessary to fit the available button width. */
    --gem-price-min-font-size: 12px;
    --gem-price-max-font-size: 21px;
    --gem-price-fit-step: 0.5;

    /* ---- Product hover glow ---- */
    /* This translucent panel is created BEHIND each complete product.
    Its RGB color can be white, black, or any other color. Panel
    strength controls the center tint; shadow strength, blur, and
    spread control the soft glow around its edges. */
    --product-glow-color: 0, 0, 0;
    --product-glow-panel-strength: 0.12;
    --product-glow-shadow-strength: 0.12;
    --product-glow-padding: 8px;
    --product-glow-blur: 18px;
    --product-glow-spread: 5px;
    --product-glow-radius: 9px;
    --product-glow-duration: 320ms;

    /* ---- Footer ---- */
    /* How tall the sticky footer is. 74px matches the header for
    symmetry — arbitrary choice, safe to change independently. */
    --footer-height: 74px;

    /* ---- Footer navigation ---- */
    /* Icon and text use currentColor, so each state changes both.
    Bronze = default, silver = hover, gold = current page. */
    --footer-nav-max-width: 900px;
    --footer-nav-icon-size: 20px;
    --footer-nav-silver: 190, 194, 200;
    --footer-nav-bronze: 205, 127, 50;
    --footer-nav-gold: 255, 202, 65;
    --footer-nav-divider: 205, 151, 45;
    --footer-nav-transition: 180ms;

    /* ---- Loading overlay ---- */
    /* The overlay blurs and darkens everything behind it. The logo
    repeatedly fades between the minimum and maximum opacity. */
    --loading-overlay-color: 0, 0, 0;
    --loading-overlay-strength: 0.48;
    --loading-backdrop-blur: 6px;
    --loading-logo-width: 180px;
    --loading-logo-min-opacity: 0.04;
    --loading-logo-max-opacity: 1;
    --loading-logo-pulse-duration: 1200ms;
    --loading-text-color: 255, 211, 92;
    --loading-text-size: 22px;
    --loading-content-gap: 16px;
    --loading-overlay-transition: 180ms;

    /* ---- Trade confirmation modal ---- */
    --trade-modal-overlay-color: 0, 0, 0;
    --trade-modal-overlay-strength: 0.72;
    --trade-modal-blur: 7px;
    --trade-modal-max-width: 560px;
    --trade-modal-radius: 18px;
    --trade-modal-text: 10, 10, 10;
    --trade-modal-gold: 126, 83, 10;
    --trade-modal-accent: 255, 202, 65;
    --trade-modal-wait-pulse: 900ms;

    /* ---- History menu and table ---- */
    --history-menu-max-width: 760px;
    --history-menu-gap: 28px;
    --history-menu-button-height: 74px;
    --history-gold-line: 205, 151, 45;
    --history-column-tint: 160, 160, 160;
    --history-column-tint-strength: 0.09;
    --history-row-hover: 190, 190, 190;
    --history-row-hover-strength: 0.18;
    --history-table-heading-color: 126, 83, 10;
    --history-table-text: 0, 0, 0;
    --history-table-min-width: 640px;
    --history-table-max-width: 96%;
    --history-table-vertical-line-width: 2px;
    --history-table-vertical-line-strength: 0.34;
    --back-button-color: 255, 255, 255;
    --back-button-hover-color: 255, 202, 65;
    --back-button-hover-duration: 220ms;
    --back-button-top-offset: -14px;
    --back-button-size: 44px;
    --back-button-font-size: 40px;

    /* ---- Content-opening shadow ---- */
    /* These values control the inward shadow cast by the fixed
    header, footer, and side frames onto the scrolling content.

    Color uses RGB so opacity can be adjusted independently.
    Depth controls how far the shadow is shifted into the opening.
    Blur controls softness, while spread controls edge concentration.

    A more negative spread produces a tighter shadow.
    Increase strength or depth for a heavier, deeper frame. */
    --content-shadow-color: 0, 0, 0;
    --content-shadow-strength: 0.78;
    --content-shadow-depth: 18px;
    --content-shadow-blur: 26px;
    --content-shadow-spread: -8px;

    /* ---- Wallpaper tint ---- */
    /* RGB of the color layered over the repeating background image.
    Current value is a dark green. Useful references:
    0, 0, 0 = darkens the image · 255, 255, 255 = lightens it. */
    --tint-color: 0, 78, 40;

    /* How strong the tint is: 0 = invisible (pure image shows),
    1 = image fully hidden behind solid color.
    0.75 is arbitrary — chosen because it looked good. */
    --tint-strength: 0.75;

    /* ========================================================
       MOBILE SETTINGS
       The breakpoint itself is the 720px media query near the end
       of this file. Every mobile measurement is centralized here.
       ======================================================== */
    --mobile-pad-top: 6px;
    --mobile-pad-right: 4px;
    --mobile-pad-bottom: 6px;
    --mobile-pad-left: 4px;
    --mobile-side-width: 46px;
    --mobile-top-frame-height: 70px;
    --mobile-bottom-frame-height: 70px;

    --mobile-header-height: 54px;
    --mobile-footer-height: 58px;
    --mobile-logo-height: 40px;
    --mobile-home-logo-height: 40px;
    --mobile-announcement-left: 66px;
    --mobile-announcement-right: 46px;
    --mobile-announcement-font-size: 10px;
    --mobile-announcement-duration: 10s;
    --mobile-announcement-gap: 36px;
    --mobile-announcement-vertical-offset: 0px;
    --mobile-header-phone-size: 30px;
    --mobile-header-phone-right: 8px;
    --mobile-logo-vertical-offset: 0px;
    --mobile-home-logo-vertical-offset: 0px;
    --mobile-home-glass-side-inset: 2px;

    --mobile-footer-horizontal-padding: 3px;
    --mobile-footer-nav-icon-size: 15px;
    --mobile-footer-nav-gap: 3px;
    --mobile-footer-nav-font-size: 10px;

    --mobile-separator-height: 20px;
    --mobile-separator-gap: 3px;
    --mobile-page-title-size: 23px;
    --mobile-category-title-size: 22px;

    --mobile-products-max-width: 560px;
    --mobile-product-row-gap: 22px;
    --mobile-product-name-font-size: 14px;
    --mobile-gem-price-min-font-size: 10px;
    --mobile-gem-price-max-font-size: 16px;

    --mobile-info-card-padding: 18px;
    --mobile-info-card-gap: 16px;
    --mobile-last-update-font-size: 11px;
    --mobile-last-update-right-offset: 24px;
    --mobile-trade-last-update-reserved-space: 28px;
    --mobile-trade-last-update-top-offset: 6px;
    --mobile-possessions-table-min-width: 320px;
    --mobile-possessions-table-cell-padding-y: 6px;
    --mobile-possessions-table-cell-padding-x: 8px;
    --mobile-info-title-size: 22px;
    --mobile-info-description-size: 13px;
    --mobile-info-metric-label-size: 11px;
    --mobile-info-metric-value-size: 14px;
    --mobile-info-sell-width: 68px;
    --mobile-info-sell-height: 42px;
    --mobile-info-sell-font-size: 12px;

    --mobile-menu-max-width: 420px;
    --mobile-menu-gap: 16px;
    --mobile-menu-button-height: 62px;

    --mobile-table-cell-padding-y: 9px;
    --mobile-table-cell-padding-x: 8px;
    --mobile-table-font-size: 12px;
    --mobile-pagination-button-size: 30px;
    --mobile-pagination-padding-y: 10px;
    --mobile-pagination-padding-x: 8px;
    --mobile-pagination-gap: 5px;
}

* {
    /* Makes width/height include padding and borders, so a padded
    element set to 100% never spills out of its parent.
    Keep this — removing it silently changes sizing everywhere. */
    box-sizing: border-box;
}

html {
    /* Full window height, so body below can say "at least 100%". */
    height: 100%;
    margin: 0;
}

/* ============================================================
LAYER 0 (the very back): the wallpaper
============================================================
STACKING ORDER, once and for all:
Layer 0 = body background     (wallpaper + tint)
Layer 1 = normal page content (scrolls normally)
Layer 2 = .content-shadow     (z-index: 2 — over content)
Layer 3 = .frame              (z-index: 3)
Layer 4 = .header / .footer   (z-index: 4)

The shadow is deliberately above the scrolling content, so it
darkens everything passing beneath the fixed decorative pieces.
It remains below the frame, header, and footer themselves.

IMPORTANT, read before debugging:
A background can NEVER paint on top of content. It is always
the rear-most layer by definition, no z-index involved.
So if you ever SEE the wallpaper "on top of" the header or a
frame piece, the wallpaper did not move up — that element's
own image failed to load and you are looking at the wallpaper
THROUGH the empty hole. Check the file path, spelling, and
capitalization of that element's url("...") first.
(Also: if the header image itself contains transparent areas,
the wallpaper showing through them is normal and correct.)
============================================================ */
body {
    /* KEY RULE for the wallpaper:
    "min-height: 100%" means: be at least one full screen tall,
    but grow taller if the content needs more room.
    The background paints the entire body box, so this one line
    guarantees the wallpaper covers the whole screen when content
    is short AND the whole scrollable page when content is long. */
    min-height: 100%;
    margin: 0;

    /* The per-side padding from the settings block above. */
    padding:
        var(--pad-top)
        var(--pad-right)
        var(--pad-bottom)
        var(--pad-left);

    /* The wallpaper: two stacked background layers.
    Layer A (painted on top of layer B): a solid color with
    transparency — this is the tint.
    Layer B: the image itself.
    Both repeat, so together they read as one tinted, tiled image. */
    background-image:
        linear-gradient(
            rgba(var(--tint-color), var(--tint-strength)),
            rgba(var(--tint-color), var(--tint-strength))
        ),
        url("assets/background-image.png"); /* <- your wallpaper image */
    background-repeat: repeat;

    /* NOTE: "background-attachment" is deliberately left at its
    default (scroll). That is what makes the wallpaper move
    WITH the content when you scroll. Setting it to "fixed"
    would pin the image to the screen while content slides
    over it — the opposite of what we want. Do not add it. */

    /* NOTE: "overflow: hidden" used to live here and was removed
    on purpose — it made scrolling impossible. Do not add it
    back, or long content will be permanently cut off. */

    /* Fallback color, only visible if the image fails to load.
    Arbitrary choice (plain white) — safe to change. */
    background-color: #ffffff;
}

/* ============================================================
LAYER 3: the frame
A full-screen decorative border made of 8 image pieces:
4 corners + 4 edges, arranged in a 3x3 grid. The center
cell stays empty — that is where the content shows through.
============================================================ */
.frame {
    /* "fixed" pins the frame to the SCREEN, not the page:
    when the content scrolls, the frame stays exactly where it
    is and the content slides underneath it. That is intentional
    — the frame is meant to feel like a window border. */
    position: fixed;
    inset: 0; /* shorthand for top/right/bottom/left: 0 — cover the whole screen */

    /* Above both the scrolling content and its shadow.
    Only works because this element is positioned (fixed above). */
    z-index: 3;

    display: grid;

    /* Three columns: fixed side strip, flexible middle, fixed side strip.
    "minmax(0, 1fr)" lets the middle shrink all the way to 0 on
    narrow windows instead of forcing the page wider. */
    grid-template-columns:
        var(--side-width)
        minmax(0, 1fr)
        var(--side-width);

    /* Same idea vertically. */
    grid-template-rows:
        var(--top-height)
        minmax(0, 1fr)
        var(--bottom-height);

    /* The frame is pure decoration: clicks pass straight through it
    to the content below. Without this it would swallow every click. */
    pointer-events: none;

    /* On windows smaller than the frame itself, clip the overflow
    instead of creating scrollbars. Defensive rule — rarely needed. */
    overflow: hidden;
}

/* Every piece fills only its own grid cell.
"background-size: 100% 100%" stretches the image to the exact
cell dimensions — same "liquid fill" behavior as the header. */
.frame-piece {
    width: 100%;
    height: 100%;

    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

/* ---- Top row ---- */
.top-left {
    grid-column: 1;
    grid-row: 1;
    background-image: url("assets/top-corner-image.png");
}

.top-edge {
    grid-column: 2;
    grid-row: 1;
    background-image: url("assets/top-edge-image.png");
}

/* The right corner reuses the LEFT corner image, mirrored with
scaleX(-1). Saves one image file; delete the transform and use
a separate image if you ever want an asymmetric design. */
.top-right {
    grid-column: 3;
    grid-row: 1;
    background-image: url("assets/top-corner-image.png");
    transform: scaleX(-1);
}

/* ---- Middle row (sides) ---- */
.left-edge {
    grid-column: 1;
    grid-row: 2;
    background-image: url("assets/side-edge-image.png");
}

.right-edge {
    grid-column: 3;
    grid-row: 2;
    background-image: url("assets/side-edge-image.png");
    transform: scaleX(-1);
}

/* ---- Bottom row ---- */
.bottom-left {
    grid-column: 1;
    grid-row: 3;
    background-image: url("assets/bottom-corner-image.png");
}

.bottom-edge {
    grid-column: 2;
    grid-row: 3;
    background-image: url("assets/bottom-edge-image.png");
}

.bottom-right {
    grid-column: 3;
    grid-row: 3;
    background-image: url("assets/bottom-corner-image.png");
    transform: scaleX(-1);
}

/* ============================================================
LAYER 2: THE CONTENT-OPENING SHADOW

This transparent fixed rectangle represents the opening between
the header, footer, and side frames. Its four inset shadows make
those surrounding pieces appear to cast depth onto everything
scrolling beneath them.

The opening uses the same padding, header-height, and footer-height
variables as the visible layout. Therefore it stays aligned when
those dimensions are changed in the settings block.

This element must remain transparent and pointer-events must stay
disabled. It is a visual overlay only and must never block links,
buttons, text selection, or other interaction.
============================================================ */
.content-shadow {
    position: fixed;

    /* Match the four visible inner boundaries of the frame opening. */
    top: calc(var(--pad-top) + var(--header-height));
    right: var(--pad-right);
    bottom: calc(var(--pad-bottom) + var(--footer-height));
    left: var(--pad-left);

    /* Above scrolling content, below all fixed decorative pieces. */
    z-index: 2;

    pointer-events: none;

    /* One inward shadow for each edge.
    Positive offsets cast from the top and left.
    Negative offsets cast from the bottom and right.

    All visual adjustments should normally be made through the
    shadow variables in :root rather than editing these four lines. */
    box-shadow:
        inset 0
            var(--content-shadow-depth)
            var(--content-shadow-blur)
            var(--content-shadow-spread)
            rgba(
                var(--content-shadow-color),
                var(--content-shadow-strength)
            ),

        inset 0
            calc(0px - var(--content-shadow-depth))
            var(--content-shadow-blur)
            var(--content-shadow-spread)
            rgba(
                var(--content-shadow-color),
                var(--content-shadow-strength)
            ),

        inset var(--content-shadow-depth)
            0
            var(--content-shadow-blur)
            var(--content-shadow-spread)
            rgba(
                var(--content-shadow-color),
                var(--content-shadow-strength)
            ),

        inset calc(0px - var(--content-shadow-depth))
            0
            var(--content-shadow-blur)
            var(--content-shadow-spread)
            rgba(
                var(--content-shadow-color),
                var(--content-shadow-strength)
            );
}

/* ============================================================
LAYER 1: scrollable content
============================================================ */
.page-content {
    /* Keeps the element available as a positioning reference without
    creating a stacking context. This allows the fixed header to use
    the page-wide stacking order defined above. */
    position: relative;
    z-index: auto;

    width: 100%;

    /* Breathing room on every side of the content.
    Top and bottom also reserve space for the pinned header
    and footer so nothing can get trapped behind them. */
    padding-top: calc(var(--header-height) + var(--pad-top));
    padding-right: var(--pad-right);
    padding-bottom: calc(var(--footer-height) + 15px);
    padding-left: var(--pad-left);
}

/* The header stretches as far up and as wide as it can —
only the body padding stops it.
"background-size: 100% 100%" = liquid fill: the image matches
the header's exact dimensions, touching all four edges, never
cropped, never leaving empty bands. Trade-off: if the image's
proportions differ from the header's, it visibly distorts.
(Alternatives: "contain" = fit without distortion but possibly
empty bands; "cover" = fill without distortion but cropped.) */
.header {
    position: fixed;
    top: var(--pad-top);
    left: var(--pad-left);
    right: var(--pad-right);
    width: auto;
    height: var(--header-height);

    background-image: url("assets/header-image.png"); /* <- your header image */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;

    /* The logo is normal content inside the header. Flex alignment
    centers it vertically without changing the background image. */
    display: flex;
    align-items: center;

    /* Above the content shadow and decorative frame. */
    z-index: 4;
}

/* Non-clickable PNG logo placed independently inside the header.
Absolute positioning prevents header padding or flex alignment from
pushing it around. Change only the three logo variables in :root when
adjusting its size or position. */
.header-logo {
    position: absolute;
    left: var(--logo-left-offset);
    top: calc(50% + var(--logo-vertical-offset));
    transform: translateY(-50%);

    display: block;
    width: auto;
    height: var(--logo-height);
    max-width: 40%;
    object-fit: contain;

    /* The logo is display-only: it cannot capture clicks or selection. */
    pointer-events: none;
    user-select: none;
}

/* ============================================================
HEADER ANNOUNCEMENT

The announcement owns only the horizontal area between the logo
and the header's right edge. Overflow is clipped, so moving text
can never enter the logo territory or leave the header.
============================================================ */
.header-announcement {
    position: absolute;
    left: var(--announcement-left);
    right: var(--announcement-right);
    top: 0;
    bottom: 0;
    transform: translateY(var(--announcement-vertical-offset));

    display: flex;
    align-items: center;
    overflow: hidden;

    /* Alpha-only fade: text becomes invisible as it reaches the logo.
    No colored shadow is painted over the header artwork. */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 var(--announcement-logo-fade-width),
        #000 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 var(--announcement-logo-fade-width),
        #000 100%
    );

    color: rgba(var(--announcement-color), 1);
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--announcement-font-size);
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
}

/* Seamless marquee. The track holds SIX identical copies (see every
page's header markup). It slides RIGHTWARD by exactly one copy — one
sixth of its own width — then loops. Because copy 7 would look exactly
like copy 1, the restart is invisible and there is never any blank
space as long as the copies together are wider than the opening.
IMPORTANT: if you change the number of copies in the HTML, change the
6 inside header-announcement-scroll below to match. */
.header-announcement {
    direction: ltr;
}

.header-announcement-track {
    display: inline-flex;
    flex: 0 0 auto;
    min-width: max-content;
    animation: header-announcement-scroll
        var(--announcement-duration)
        linear
        infinite;
}

.header-announcement-text {
    display: inline-block;
    min-width: max-content;
    white-space: nowrap;

    /* Space between one message copy and the next. The padding is part
    of each copy, so the 1/6 slide stays perfectly seamless. */
    padding-left: var(--announcement-gap);

    /* Keep the message itself shaped and punctuated as RTL text even
    though the track lays its copies out left-to-right. */
    direction: rtl;
}

@keyframes header-announcement-scroll {
    from {
        transform: translateX(calc(-100% / 6));
    }

    to {
        transform: translateX(0);
    }
}

/* ============================================================
LAYER 4: FIXED FOOTER AND NAVIGATION

The footer stays fixed to the screen. Its decorative background is
flipped inside ::before, leaving the navigation itself upright.
Four equal navigation links sit above it with gold separators.
============================================================ */
.footer {
    position: fixed;
    left: var(--pad-left);
    right: var(--pad-right);
    bottom: var(--pad-bottom);
    height: var(--footer-height);
    z-index: 4;

    /* Creates a local stacking context so ::before stays behind the
    navigation without falling behind unrelated page layers. */
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 24px;
}

/* Decorative footer image only. Flipping this pseudo-element avoids
turning the navigation icons and labels upside down. */
.footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background-image: url("assets/header-image.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    transform: scaleY(-1);
}

.footer-nav {
    width: min(100%, var(--footer-nav-max-width));
    height: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
}

.footer-nav-link {
    position: relative;
    min-width: 0;
    height: 100%;

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

    color: rgba(var(--footer-nav-bronze), 1);
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(11px, 1.25vw, 16px);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--footer-nav-transition) ease;
}

/* One gold vertical line between adjacent navigation links. */
.footer-nav-link + .footer-nav-link::before {
    content: "";
    position: absolute;
    right: 0;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background-color: rgba(var(--footer-nav-divider), 0.8);
}

.footer-nav-link:hover {
    color: rgba(var(--footer-nav-silver), 1);
}

.footer-nav-link--active,
.footer-nav-link[aria-current="page"],
.footer-nav-link--active:hover,
.footer-nav-link[aria-current="page"]:hover {
    color: rgba(var(--footer-nav-gold), 1);
}

/* External SVG files are used as masks. Because the mask is filled
with currentColor, each icon automatically follows text state colors. */
.footer-nav-icon {
    flex: 0 0 auto;
    width: var(--footer-nav-icon-size);
    height: var(--footer-nav-icon-size);
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.footer-nav-icon--profile {
    -webkit-mask-image: url("assets/profile.svg");
    mask-image: url("assets/profile.svg");
}

.footer-nav-icon--trade {
    -webkit-mask-image: url("assets/trade.svg");
    mask-image: url("assets/trade.svg");
}

.footer-nav-icon--history {
    -webkit-mask-image: url("assets/history.svg");
    mask-image: url("assets/history.svg");
}

.footer-nav-icon--accounting {
    -webkit-mask-image: url("assets/account-statement.svg");
    mask-image: url("assets/account-statement.svg");
}

/* ============================================================
OPENING INFORMATION CARD

This card appears once before the product lists. Its background is
assets/div-tile-background.png. Inside it are a title, description,
two side-by-side metric stacks, and one ruby sell button.
============================================================ */
.info-card {
    width: 100%;
    max-width: var(--info-card-max-width);
    margin: 24px auto 36px;
    padding: var(--info-card-padding);

    display: grid;
    gap: var(--info-card-gap);
    justify-items: center;
    text-align: center;

    /* 100% 100% guarantees complete edge-to-edge coverage without
    cropping or empty bands. The trade-off is possible distortion. */
    background-image: url("assets/div-tile-background.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;

    box-shadow:
        var(--info-card-shadow-x)
        var(--info-card-shadow-y)
        var(--info-card-shadow-blur)
        rgba(
            var(--info-card-shadow-color),
            var(--info-card-shadow-strength)
        );
}

.info-card-title {
    margin: 0;
    color: rgba(var(--info-title-color), 1);
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(20px, 2.2vw, 30px);
    font-weight: 700;
}

.info-card-description {
    max-width: 64ch;
    margin: 0;
    color: rgba(var(--info-text-color), 1);
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(13px, 1.2vw, 16px);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* The two metric stacks sit horizontally. Each stack keeps its
field name above its value, matching a two-column, two-row table. */
.info-card-metrics {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.info-card-metric {
    min-width: 0;
    padding: 12px;

    display: grid;
    gap: 8px;

    color: rgba(var(--info-gold-color), 1);
    background-color: rgba(
        var(--info-metric-background),
        var(--info-metric-background-strength)
    );
    border-radius: var(--info-metric-radius);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    text-align: center;
}

.info-card-metric-label {
    font-size: clamp(12px, 1.2vw, 16px);
}

.info-card-metric-value {
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    font-size: clamp(14px, 1.6vw, 21px);
    white-space: nowrap;
    scrollbar-width: thin;
}

/* Reuses the existing ruby button image and hover behavior.
Only its width and visible word differ from product price buttons. */
.info-card-sell {
    width: min(100%, var(--info-sell-width));
}

/* ============================================================
PRODUCTS

A product consists of three simple pieces:
1. A gold image-backed name bar.
2. A red image-backed sell button.
3. A green image-backed buy button.

The images provide only the decoration. Product names and prices
remain normal HTML text, so they can be changed without editing
the image files.
============================================================ */
.products {
    width: 100%;
    max-width: 1200px;
    margin: 24px auto;

    /* Two equal columns create two complete products per row.
    Each grid cell contains one title plus its sell and buy buttons. */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    /* Row gap separates one horizontal pair from the next.
    Column gap separates the two complete products in each row. */
    row-gap: var(--product-row-gap);
    column-gap: var(--product-column-gap);
}

.product {
    /* Positioning and isolation keep the hover glow behind this
    product only. The glow can never cover its title or buttons. */
    position: relative;
    isolation: isolate;

    min-width: 0;
    display: grid;

    /* The title receives more width than either price button.
    minmax(0, ...) allows all three pieces to shrink cleanly inside
    their half of the two-column product layout. */
    grid-template-columns:
        minmax(0, 1.7fr)
        minmax(0, 1fr)
        minmax(0, 1fr);

    /* Deliberately smaller than the gap between complete products. */
    column-gap: var(--product-piece-gap);
    align-items: center;
}

/* Soft tinted hover panel behind a complete product.
The pseudo-element is invisible until the product is hovered. */
.product::before {
    content: "";
    position: absolute;
    inset: calc(0px - var(--product-glow-padding));
    z-index: -1;

    background-color: rgba(
        var(--product-glow-color),
        var(--product-glow-panel-strength)
    );
    border-radius: var(--product-glow-radius);
    box-shadow: 0 0
        var(--product-glow-blur)
        var(--product-glow-spread)
        rgba(
            var(--product-glow-color),
            var(--product-glow-shadow-strength)
        );

    opacity: 0;
    pointer-events: none;
    transition: opacity var(--product-glow-duration) ease;
}

.product:hover::before {
    opacity: 1;
}

/* Shared sizing and image behavior for all three product pieces.
"100% 100%" stretches each supplied image across its full box. */
.product-name,
.product-price {
    height: var(--product-piece-height);

    /* Flex centering keeps both labels and prices exactly centered
    horizontally and vertically, regardless of the text length. */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;

    /* A plain bold sans-serif stack. Arial is attempted first,
    Helvetica second, then the browser's standard sans-serif font. */
    font-family: Arial, Helvetica, sans-serif;

    /* Text shrinks with the viewport until reaching the readable
    minimum. If content is still too wide, horizontal scrolling is
    enabled as the final fallback instead of letting text overflow. */
    font-size: clamp(10px, 1.2vw, 16px);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: safe center;
    scrollbar-width: thin;

    /* A small down-right shadow suggests a light source above and to
    the left. The short distance and tight blur keep each piece resting
    on the page instead of making it appear to float above the page. */
    box-shadow: 3px 5px 8px rgba(0, 0, 0, 0.36);
}

/* Gold is the default product-name bar.
Expected file: assets/product-name-bar.png */
.product-name {
    color: #080808;
    font-size: clamp(11px, 1.4vw, 18px);
    background-image: url("assets/product-name-bar.png");
}

/* Optional silver version of the same product-name bar.
Add "product-name--silver" beside "product-name" in the HTML
for any product that should use the silver image instead.
Expected file: assets/product-name-bar-silver.png */
.product-name--silver {
    background-image: url("assets/product-name-bar-silver.png");
}

/* Prices are real buttons, but their default browser appearance is
removed so only the supplied gem image and price text are visible. */
.product-price {
    padding: 0 8px;
    border: 0;
    color: #fdff97;

    /* The translucent underlay sits behind the PNG and shows through
    only where the gem image is transparent. It is not a second image
    and does not change the button's existing gem artwork. */
    background-color: rgba(
        var(--gem-underlay-color),
        var(--gem-underlay-strength)
    );
    border-radius: 10px;
    cursor: pointer;

    /* Transform affects only visual size; the surrounding grid does
    not move. A higher z-index keeps the enlarged gem above neighbors. */
    position: relative;
    z-index: 0;
    transform: scale(1);
    transform-origin: center;
    transition:
        transform var(--gem-hover-duration) ease,
        z-index 0s linear var(--gem-hover-duration);
}

.product-price:hover {
    z-index: 1;
    transform: scale(var(--gem-hover-scale));
    transition:
        transform var(--gem-hover-duration) ease,
        z-index 0s;
}

/* Red gem used for the sell price.
The gradient is the adjustable tint painted ON TOP of the PNG.
Expected file: assets/product-sell-button.png */
.product-price--sell {
    background-image:
        linear-gradient(
            rgba(
                var(--sell-gem-tint-color),
                var(--sell-gem-tint-strength)
            ),
            rgba(
                var(--sell-gem-tint-color),
                var(--sell-gem-tint-strength)
            )
        ),
        url("assets/product-sell-button.png");
}

/* Green gem used for the buy price.
The gradient is independent from the sell tint above.
Expected file: assets/product-buy-button.png */
.product-price--buy {
    background-image:
        linear-gradient(
            rgba(
                var(--buy-gem-tint-color),
                var(--buy-gem-tint-strength)
            ),
            rgba(
                var(--buy-gem-tint-color),
                var(--buy-gem-tint-strength)
            )
        ),
        url("assets/product-buy-button.png");
}

/* ============================================================
SECONDARY PAGE PLACEHOLDERS

Profile, History, and Account Statement use this small shared card
until their real page-specific content is implemented.
============================================================ */
.page-placeholder {
    width: min(100%, 620px);
    margin: 48px auto;
    padding: 32px;
    color: rgba(var(--info-text-color), 1);
    background-image: url("assets/div-tile-background.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    box-shadow: 3px 5px 8px rgba(0, 0, 0, 0.36);
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

.page-placeholder h1 {
    margin: 0 0 12px;
    color: rgba(var(--info-title-color), 1);
}

.page-placeholder p {
    margin: 0;
    line-height: 1.5;
}

/* ============================================================
LOADING OVERLAY

JavaScript adds .is-active for the configured five-second wait.
The overlay blocks interaction, blurs the page, and pulses the logo.
============================================================ */
.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;

    display: grid;
    place-items: center;

    background-color: rgba(
        var(--loading-overlay-color),
        var(--loading-overlay-strength)
    );
    -webkit-backdrop-filter: blur(var(--loading-backdrop-blur));
    backdrop-filter: blur(var(--loading-backdrop-blur));

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity var(--loading-overlay-transition) ease,
        visibility 0s linear var(--loading-overlay-transition);
}

.loading-overlay.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity var(--loading-overlay-transition) ease,
        visibility 0s;
}

/* Keeps the pulsing logo and fixed loading label centered as one unit. */
.loading-overlay-content {
    display: grid;
    justify-items: center;
    gap: var(--loading-content-gap);
    text-align: center;
}

.loading-overlay-logo {
    width: min(70vw, var(--loading-logo-width));
    height: auto;
    opacity: var(--loading-logo-min-opacity);
    pointer-events: none;
    user-select: none;
}

.loading-overlay-text {
    margin: 0;
    color: rgba(var(--loading-text-color), 1);
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--loading-text-size);
    font-weight: 350;
    line-height: 1;
}

.loading-overlay.is-active .loading-overlay-logo,
.loading-overlay.is-active .loading-overlay-text {
    animation: loading-logo-pulse
        var(--loading-logo-pulse-duration)
        ease-in-out
        infinite
        alternate;
}

@keyframes loading-logo-pulse {
    from {
        opacity: var(--loading-logo-min-opacity);
    }

    to {
        opacity: var(--loading-logo-max-opacity);
    }
}

body.is-loading {
    overflow: hidden;
}

/* Users who request reduced motion still see the announcement and
buttons, but without automatic scrolling or animated size changes. */
@media (prefers-reduced-motion: reduce) {
    .header-announcement-track {
        animation: none;
        transform: none;
    }

    .product-price,
    .product::before,
    .loading-overlay {
        transition: none;
    }

    .loading-overlay.is-active .loading-overlay-logo,
    .loading-overlay.is-active .loading-overlay-text {
        animation: none;
        opacity: var(--loading-logo-max-opacity);
    }
}


/* ============================================================
SHARED DECORATIVE-IMAGE SHADOW UNDERLAY

GENERAL RULE: almost every shadowed element with a background image
needs this translucent base behind the image. PNG artwork frequently
has transparent or partially transparent pixels; the underlay fills
those pixels so the component remains visually solid and shadowed.
This applies to tiled panels, the history table, and history buttons.
============================================================ */
.info-card,
.page-placeholder,
.history-menu-button,
.history-table-scroll,
.home-card,
.home-action-button {
    background-color: rgba(
        var(--tile-panel-underlay-color),
        var(--tile-panel-underlay-strength)
    );
}

/* ============================================================
PRODUCT CATEGORIES

Category wrappers intentionally have no border and no background.
Spacing and a centered ornamental heading are their only structure.
============================================================ */
.product-category {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.product-category + .product-category {
    margin-top: var(--category-space);
}

.category-title-row {
    width: 100%;
    margin-bottom: 28px;
    display: grid;
    grid-template-columns: minmax(80px, 1fr) auto minmax(80px, 1fr);
    align-items: center;
    gap: var(--category-divider-gap);
    color: rgba(var(--category-divider-color), 1);
}

.category-title-row img {
    display: block;
    width: 100%;
    height: var(--category-divider-height);
    overflow: visible;
}

.category-title-row .category-divider--right {
    transform: scaleX(-1);
}

.category-title {
    margin: 0;
    color: rgba(var(--category-title-color), 1);
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(22px, 3vw, var(--category-title-size));
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* Product spacing belongs to the category wrapper now, so the old
.products margin is removed without changing its two-column grid. */
.product-category .products {
    margin: 0;
}

/* ============================================================
HISTORY AND FINANCE MENUS

Both sections share the same two-button layout and image file.
Their second choices are deliberately inactive for now.
============================================================ */
.history-menu {
    width: min(100%, var(--history-menu-max-width));
    margin: 64px auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--history-menu-gap);
}

.history-menu-button {
    height: var(--history-menu-button-height);
    padding: 0 20px;
    border: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: rgba(var(--footer-nav-gold), 1);

    /* The shared translucent shadow underlay remains behind this PNG
    and fills any transparent parts of the button artwork. */
    background-image: url("assets/history-menu-button.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;

    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(15px, 2vw, 22px);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 3px 5px 8px rgba(0, 0, 0, 0.36);
}

.history-menu-button:hover {
    color: rgba(var(--footer-nav-bronze), 1);
}

.history-menu-button--inactive {
    cursor: pointer;
    text-decoration: none;
}

/* ============================================================
TRADE-HISTORY TABLE

The outer viewport scrolls horizontally when columns no longer fit.
Rows are separated only by gold horizontal lines. Even-numbered
columns receive a faint gray tint, and row hover/press overrides it.
============================================================ */
.history-table-page {
    position: relative;
    width: min(100%, 1200px);
    margin: 36px auto;
    padding-top: 8px;
    font-family: Arial, Helvetica, sans-serif;
}

.history-table-heading {
    margin: 0 0 20px;
    color: rgba(var(--category-title-color), 1);
    text-align: center;
}

.history-back-link {
    position: absolute;
    top: -14px;
    left: 0;

    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;

    color: rgba(var(--back-button-color), 1);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 52px;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;

    transform: scale(1);
    transform-origin: center;
    transition: transform var(--back-button-hover-duration) ease;
}

.history-back-link:hover,
.history-back-link:focus-visible {
    transform: scale(var(--back-button-hover-scale));
}

.history-table-scroll {
    width: 100%;
    overflow-x: auto;

    /* Matches the information card at the start of the Trade page.
    The shared translucent underlay sits behind this same tile PNG. */
    background-image: url("assets/div-tile-background.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;

    box-shadow: 3px 5px 8px rgba(0, 0, 0, 0.36);
    scrollbar-width: thin;
}

.trade-history-table {
    width: 100%;
    min-width: 940px;
    border-collapse: collapse;
    color: rgba(var(--history-table-text), 1);
    direction: rtl;
    text-align: right;
}

.trade-history-table th,
.trade-history-table td {
    padding: 14px 16px;
    direction: rtl;
    text-align: right;
    white-space: nowrap;
}

.trade-history-table thead tr,
.trade-history-table tbody tr {
    border-bottom: 1px solid rgba(var(--history-gold-line), 0.85);
}

.trade-history-table th {
    color: rgba(var(--history-table-heading-color), 1);
    font-weight: 700;
}

.trade-history-table th:nth-child(even),
.trade-history-table td:nth-child(even) {
    background-color: rgba(
        var(--history-column-tint),
        var(--history-column-tint-strength)
    );
}

.trade-history-table tbody tr:hover td,
.trade-history-table tbody tr:active td {
    background-color: rgba(
        var(--history-row-hover),
        var(--history-row-hover-strength)
    );
}

.trade-history-table tr[hidden] {
    display: none;
}

.history-pagination {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.history-pagination button {
    min-width: 40px;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid rgba(var(--history-gold-line), 0.8);
    color: rgba(var(--history-table-heading-color), 1);
    background-color: rgba(0, 0, 0, 0.5);
    font: inherit;
    cursor: pointer;
}

.history-pagination button:hover,
.history-pagination button[aria-current="page"] {
    color: #080808;
    background-color: rgba(var(--footer-nav-gold), 1);
}

.history-pagination button:disabled {
    opacity: 0.4;
    cursor: default;
}

.history-pagination-pages {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}


/* The possessions table uses the same visual system and pagination as
Trade History, but its three columns need a smaller minimum width. */
.possessions-table {
    min-width: 640px;
}


/* ============================================================
HOME PAGE

Home deliberately breaks from the rest of the site: it has its own
wallpaper, dark card artwork, and rounded glass-island header/footer.
The decorative frame and inward content-shadow overlay are disabled.
Required files:
- assets/home-page-background.webp
- assets/home-page-div-background.png
============================================================ */
body.home-page {
    background-image:
        linear-gradient(
            rgba(var(--home-tint-color), var(--home-tint-strength)),
            rgba(var(--home-tint-color), var(--home-tint-strength))
        ),
        url("assets/home-page-background.webp");
    background-repeat: repeat;
}

/* HOME-ONLY GLASS ISLANDS
The shared header/footer geometry remains unchanged on every other page.
On Home, both become translucent rounded islands. Adjust only the glass
variables in :root to change their color, opacity, blur, and radius. */
body.home-page .header,
body.home-page .footer {
    left: calc(var(--pad-left) + var(--home-glass-side-inset));
    right: calc(var(--pad-right) + var(--home-glass-side-inset));
    width: auto;

    background-image: none;
    background-color: rgba(
        var(--home-glass-color),
        var(--home-glass-opacity)
    );
    -webkit-backdrop-filter:
        blur(var(--home-glass-blur))
        saturate(var(--home-glass-saturation));
    backdrop-filter:
        blur(var(--home-glass-blur))
        saturate(var(--home-glass-saturation));

    border: 1px solid rgba(
        var(--home-glass-border-color),
        var(--home-glass-border-strength)
    );
    border-radius: var(--home-glass-radius);
    box-shadow: 0 10px 28px rgba(
        var(--home-glass-shadow-color),
        var(--home-glass-shadow-strength)
    );
    overflow: hidden;
}

/* Remove the standard flipped footer artwork only on Home. */
body.home-page .footer::before {
    background-image: none;
    background-color: transparent;
    transform: none;
}

/* Defensive selectors: home.html omits both elements completely, but
these rules ensure no frame appears if old shared markup is pasted in. */
body.home-page .frame,
body.home-page .content-shadow {
    display: none;
}

.home-content {
    width: min(100%, var(--home-content-max-width));
    margin: 24px auto;
    display: grid;
    gap: var(--home-section-gap);
    font-family: Arial, Helvetica, sans-serif;
}

/* Every Home section uses its dedicated PNG plus the standard shadow
underlay. As with other decorative images, transparent pixels need the
translucent base behind them so the card remains visually complete. */
.home-card {
    padding: var(--home-card-padding);
    color: rgba(var(--home-card-text), 1);
    background-image: url("assets/home-page-div-background.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    border-radius: var(--home-card-radius);
    box-shadow: 3px 5px 8px rgba(0, 0, 0, 0.36);
}

.home-card-title {
    margin: 0 0 20px;
    color: rgba(var(--home-card-heading), 1);
    font-size: clamp(21px, 2.4vw, 30px);
    text-align: center;
}

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

.home-info-item {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.home-info-label {
    color: rgba(var(--home-card-heading), 0.86);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.home-info-value {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 16px;
    font-weight: 700;
}

/* Change only the status modifier class in home.html. Supported states:
account-status--normal, account-status--premium, account-status--banned. */
.account-status {
    width: fit-content;
    padding: 5px 12px;
    border-radius: 999px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
}

.account-status--normal {
    background-color: #55715c;
}

.account-status--premium {
    color: #1a1203;
    background-color: #e4b934;
}

.account-status--banned {
    background-color: #9d1e2c;
}

/* Native <details> supplies reliable keyboard and mobile expansion
without JavaScript. Only the summary row is visible while collapsed. */
.home-details {
    padding: 0;
}

.home-details summary {
    min-height: 78px;
    padding: 20px var(--home-card-padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: rgba(var(--home-card-heading), 1);
    cursor: pointer;
    font-size: clamp(21px, 2.4vw, 30px);
    font-weight: 700;
    list-style: none;
}

.home-details summary::-webkit-details-marker {
    display: none;
}

/* Closed uses a V to suggest downward expansion. Open uses an X to
make the same control clearly read as the close/collapse action. */
.home-details summary::after {
    content: "V";
    flex: 0 0 auto;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
}

.home-details[open] summary::after {
    content: "X";
    font-size: 24px;
}

.home-details-body {
    padding: 0 var(--home-card-padding) var(--home-card-padding);
}

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

.home-action-button {
    min-height: 76px;
    padding: 16px 22px;
    border: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: rgba(var(--home-card-heading), 1);
    background-image: url("assets/home-page-div-background.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    border-radius: var(--home-card-radius);
    box-shadow: 3px 5px 8px rgba(0, 0, 0, 0.36);

    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(16px, 2vw, 22px);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transform: scale(1);
    transition: transform var(--home-action-transition) ease;
}

.home-action-button:hover,
.home-action-button:focus-visible {
    transform: scale(var(--home-action-hover-scale));
}

.home-action-button--inactive {
    cursor: default;
}

.home-contact-layout {
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(320px, 1.2fr);
    gap: 24px;
    align-items: stretch;
}

.home-contact-list {
    display: grid;
    align-content: start;
    gap: 16px;
}

.home-contact-item {
    margin: 0;
    line-height: 1.5;
}

.home-contact-item strong {
    display: block;
    color: rgba(var(--home-card-heading), 1);
    margin-bottom: 3px;
}

.home-map {
    min-height: var(--home-map-height);
    overflow: hidden;
    border-radius: var(--home-card-radius);
    box-shadow: inset 0 0 0 1px rgba(var(--home-card-heading), 0.4);
    background-color: rgba(255, 255, 255, 0.45);
}

.home-map iframe {
    display: block;
    width: 100%;
    height: var(--home-map-height);
    border: 0;
}

@media (max-width: 720px) {
    .home-info-grid,
    .home-actions,
    .home-contact-layout {
        grid-template-columns: 1fr;
    }

    .home-card,
    .home-details summary,
    .home-details-body {
        --home-card-padding: 20px;
    }
}

/* ============================================================
V10 TARGETED OVERRIDES
============================================================ */

/* More breathing room after the opening Trade information card. */
.info-card {
    margin: 24px auto var(--info-card-bottom-margin);
}

/* Larger gem text starts at the configured maximum. app.js shrinks it
only when the content would overflow, leaving horizontal scroll as the
last fallback below the minimum size. */
.product-price:not(.info-card-sell) {
    font-size: var(--gem-price-max-font-size);
}

/* ============================================================
CONTENT-SIZED TABLE PANEL

The image-backed panel now owns both the scrollable table and its
pagination. It follows the table's intrinsic content width, never grows
beyond the percentage maximum, and keeps a pixel minimum for readability.
============================================================ */
.history-table-panel {
    width: fit-content;
    min-width: min(100%, var(--history-table-min-width));
    max-width: var(--history-table-max-width);
    margin: 0 auto;

    background-color: rgba(
        var(--tile-panel-underlay-color),
        var(--tile-panel-underlay-strength)
    );
    background-image: url("assets/div-tile-background.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    box-shadow: 3px 5px 8px rgba(0, 0, 0, 0.36);
}

.history-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    background: none;
    box-shadow: none;
}

.trade-history-table {
    width: max-content;
    min-width: var(--history-table-min-width);
    max-width: none;
}

.possessions-table {
    min-width: var(--history-table-min-width);
}

/* Thicker but translucent vertical separators. Horizontal row lines
remain unchanged. The last column deliberately has no right divider. */
.trade-history-table th:not(:last-child),
.trade-history-table td:not(:last-child) {
    border-right:
        var(--history-table-vertical-line-width)
        solid
        rgba(
            var(--history-gold-line),
            var(--history-table-vertical-line-strength)
        );
}

/* Pagination is inside the image-backed panel rather than below it. */
.history-table-panel .history-pagination {
    margin: 0;
    padding: 18px 16px;
}

/* Back arrows now change color only; they do not grow. */
.history-back-link {
    transform: none;
    transition: color var(--back-button-hover-duration) ease;
}

.history-back-link:hover,
.history-back-link:focus-visible {
    color: rgba(var(--back-button-hover-color), 1);
    transform: none;
}

/* ============================================================
HOME-SPECIFIC POSITIONING AND COLORS
============================================================ */
body.home-page .header-logo {
    left: var(--home-logo-left-offset);
    top: calc(50% + var(--home-logo-vertical-offset));
    height: var(--home-logo-height);
}

body.home-page .header-announcement {
    color: rgba(var(--home-announcement-color), 1);
}

body.home-page .footer-nav-link {
    color: rgba(var(--home-footer-nav-default), 1);
}

body.home-page .footer-nav-link:hover {
    color: rgba(var(--home-footer-nav-hover), 1);
}

body.home-page .footer-nav-link--active,
body.home-page .footer-nav-link[aria-current="page"],
body.home-page .footer-nav-link--active:hover,
body.home-page .footer-nav-link[aria-current="page"]:hover {
    color: rgba(var(--home-footer-nav-active), 1);
}

/* User-confirmed Home asset filenames. */
body.home-page {
    background-image:
        linear-gradient(
            rgba(var(--home-tint-color), var(--home-tint-strength)),
            rgba(var(--home-tint-color), var(--home-tint-strength))
        ),
        url("assets/home-page-background.webp");
}

.home-card {
    background-image: url("assets/home-page-div-background.webp");
}

.home-action-button {
    color: rgba(var(--home-card-text), 1);
    background-image: url("assets/xhome-page-div-background.png");
    transform: none;
    transition: color var(--home-action-transition) ease;
}

.home-action-button:hover,
.home-action-button:focus-visible {
    color: rgba(var(--home-card-heading), 1);
    transform: none;
}

/* Section headings use a dedicated adjustable image. */
.home-card-title,
.home-details summary {
    background-image: var(--home-title-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.home-card-title {
    padding: 12px 18px;
}

/* My Info defaults to white, becomes gold on hover, and uses real
mask icons instead of V/X text glyphs. */
.home-details summary {
    color: rgba(var(--home-card-text), 1);
    transition: color 180ms ease;
}

.home-details summary:hover,
.home-details summary:focus-visible {
    color: rgba(var(--home-card-heading), 1);
}

.home-details summary::after {
    content: "";
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    background-color: rgba(var(--home-expand-icon-color), 1);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 8l7 8 7-8' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 8l7 8 7-8' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: background-color 180ms ease;
}

.home-details[open] summary::after {
    content: "";
    width: 24px;
    height: 24px;
    background-color: rgba(var(--home-expand-icon-color), 1);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

.home-details summary:hover::after,
.home-details summary:focus-visible::after {
    background-color: rgba(var(--home-expand-icon-hover), 1);
}

/* ============================================================
ACCOUNT CHANGE REQUEST FORM
============================================================ */
.home-account-view,
.home-account-form {
    display: grid;
    gap: 20px;
}

.home-account-view[hidden],
.home-account-form[hidden] {
    display: none;
}

.home-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
}

.home-edit-field {
    min-width: 0;
    display: grid;
    gap: 7px;
    color: rgba(var(--home-card-heading), 1);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.home-edit-field input,
.home-edit-field select {
    min-width: 0;
    width: 100%;
    height: 50px;
    padding: 8px 14px;
    border: 0;
    color: rgba(var(--home-card-text), 1);
    background-color: rgba(0, 0, 0, 0.45);
    background-image: var(--home-input-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    font: 700 16px Arial, Helvetica, sans-serif;
    outline: none;
}

.home-edit-field input:focus,
.home-edit-field select:focus {
    box-shadow: 0 0 0 2px rgba(var(--home-card-heading), 0.8);
}

.home-edit-button,
.home-account-form button {
    min-height: 48px;
    padding: 10px 18px;
    border: 0;
    color: rgba(var(--home-card-text), 1);
    background-color: rgba(0, 0, 0, 0.5);
    background-image: url("assets/xhome-page-div-background.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    font: 700 15px Arial, Helvetica, sans-serif;
    cursor: pointer;
}

.home-edit-button {
    justify-self: end;
}

.home-form-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

.home-edit-button:hover,
.home-account-form button:hover {
    color: rgba(var(--home-card-heading), 1);
}

.home-request-status {
    min-height: 1.4em;
    margin: 0;
    color: rgba(var(--home-card-heading), 1);
    font-weight: 700;
    text-align: center;
}

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


/* ============================================================
V11 HOME INTRINSIC SIZING

Home cards now size toward their content instead of automatically
stretching across the complete content column. Pixel minimums protect
readability; max-width keeps every card inside narrow viewports.
============================================================ */
.home-content {
    justify-items: center;
}

.home-card {
    width: fit-content;
    min-width: min(100%, var(--home-card-min-width));
    max-width: var(--home-card-max-width);
    justify-self: center;
}

.home-details {
    width: fit-content;
    max-width: 100%;
}

.home-actions {
    width: fit-content;
    max-width: min(100%, var(--home-actions-max-width));
    justify-self: center;
}

.home-contact-card {
    width: min(100%, var(--home-contact-max-width));
}

/* Section title artwork hugs only the title text. It no longer spans
the full width of the card or the expandable summary row. */
.home-card-title,
.home-details-title {
    display: block;
    width: fit-content;
    max-width: 100%;
    padding: 12px 18px;
    margin-left: auto;
    margin-right: auto;
    background-image: var(--home-title-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.home-details summary {
    background-image: none;
}

.home-details-title {
    margin-left: 0;
    margin-right: 0;
}

/* The detailed My Info panel owns the edit/request form. Account Info
is intentionally read-only. */
.home-user-view,
.home-user-form {
    display: grid;
    gap: 20px;
}

.home-user-view[hidden],
.home-user-form[hidden] {
    display: none;
}

/* ============================================================
SHARED PAGE TITLES
============================================================ */
.section-page-title {
    width: fit-content;
    max-width: 100%;
    margin: 24px auto 36px;
    padding: 10px 24px;
    color: rgba(var(--category-title-color), 1);
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(25px, 3.2vw, 38px);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
}

/* ============================================================
TRADE CONFIRMATION MODAL
============================================================ */
.trade-modal[hidden] {
    display: none;
}

.trade-modal {
    position: fixed;
    inset: 0;
    z-index: 140;
    padding: 24px;

    display: grid;
    place-items: center;

    background-color: rgba(
        var(--trade-modal-overlay-color),
        var(--trade-modal-overlay-strength)
    );
    -webkit-backdrop-filter: blur(var(--trade-modal-blur));
    backdrop-filter: blur(var(--trade-modal-blur));
}

.trade-modal-card {
    position: relative;
    width: min(100%, var(--trade-modal-max-width));
    max-height: 70vh;
    max-height: 70dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--modal-card-padding);
    color: rgba(var(--trade-modal-text), 1);

    background-color: rgba(
        var(--tile-panel-underlay-color),
        var(--tile-panel-underlay-strength)
    );
    background-image: url("assets/div-tile-background.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    border-radius: var(--trade-modal-radius);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58);
    font-family: Arial, Helvetica, sans-serif;
}

.trade-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    color: #ffffff;
    background: none;
    font-size: 27px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.trade-modal-close:hover,
.trade-modal-close:focus-visible {
    color: rgba(var(--bright-gold), 1);
}

.trade-modal-title {
    margin: 0 36px 18px;
    color: rgba(var(--trade-modal-gold), 1);
    font-size: clamp(19px, 2.6vw, var(--modal-title-max-size));
    line-height: 1.25;
    text-align: center;
}

.trade-modal-form,
.trade-modal-waiting,
.trade-modal-success {
    display: grid;
    gap: 20px;
    justify-items: center;
}

.trade-modal-form[hidden],
.trade-modal-waiting[hidden],
.trade-modal-success[hidden] {
    display: none;
}

.trade-modal-unit-price {
    margin: 0;
    font-size: var(--modal-text-size);
    font-weight: 700;
}

.trade-modal-field {
    width: min(100%, 340px);
    display: grid;
    gap: 8px;
    color: rgba(var(--trade-modal-gold), 1);
    font-size: var(--modal-label-size);
    font-weight: 700;
    text-transform: uppercase;
}

.trade-modal-field input {
    width: 100%;
    height: var(--modal-input-height);
    padding: 8px 14px;
    border: 1px solid rgba(var(--trade-modal-gold), 0.65);
    border-radius: 9px;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.78);
    font: 700 var(--modal-input-font-size) Arial, Helvetica, sans-serif;
}

.login-mobile-input {
    direction: ltr;
    text-align: left;
}

.trade-modal-field input::placeholder {
    color: rgba(255, 255, 255, 0.58);
    opacity: 1;
}

.trade-modal-total {
    width: min(100%, 380px);
    padding: 16px;
    display: grid;
    gap: 7px;
    border-radius: 10px;
    color: rgba(var(--trade-modal-accent), 1);
    background-color: rgba(0, 0, 0, 0.9);
    text-align: center;
}

.trade-modal-total strong {
    font-size: clamp(20px, 3.5vw, var(--modal-total-value-max-size));
    overflow-wrap: anywhere;
}

.trade-modal-confirm,
.trade-modal-finish {
    min-height: var(--modal-button-min-height);
    padding: 10px 28px;
    border: 0;
    border-radius: 9px;
    color: #090909;
    background-color: rgba(var(--trade-modal-accent), 1);
    font: 700 var(--modal-button-font-size) Arial, Helvetica, sans-serif;
    cursor: pointer;
}

.trade-modal-spinner {
    width: 74px;
    height: 74px;
    border: 7px solid rgba(var(--trade-modal-gold), 0.22);
    border-top-color: rgba(var(--trade-modal-accent), 1);
    border-radius: 50%;
    animation: trade-modal-spin var(--trade-modal-wait-pulse) linear infinite;
}

.trade-modal-waiting p,
.trade-modal-success p {
    margin: 0;
    max-width: 42ch;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}

/* Status copy sits on an image-backed card, so give important messages
their own solid surface instead of relying on the textured background. */
.trade-modal-waiting > p {
    color: #fff;
}

.trade-modal-poll-status,
.trade-modal-state-notice,
.trade-modal-error-message,
.trade-modal-success > p {
    width: min(100%, 440px);
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 9px;
    color: #fff;
    background: #202020;
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}

.trade-modal-poll-status {
    margin-top: 0 !important;
    font-weight: 600 !important;
}

.trade-modal-poll-status--error,
.trade-modal-error-message,
.trade-modal-state-notice--warning {
    border-color: #ff9d9d;
    color: #fff;
    background: #542020;
}

.trade-modal-offer-notice {
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid #d6aa39;
    border-radius: 10px;
    color: #fff;
    background: #242016;
    text-align: center;
}

.trade-modal-offer-notice > p {
    color: #fff;
}

.trade-modal-success > p {
    color: #fff;
    background: #173d25;
}

.trade-modal-error-message {
    margin: 0;
    font-weight: 600;
}

@keyframes trade-modal-spin {
    to { transform: rotate(360deg); }
}

body.trade-modal-open {
    overflow: hidden;
}

@media (max-width: 720px) {
    /* On phones the keyboard covers the bottom half, so dialogs anchor
    to the top of the screen instead of the center. */
    .trade-modal {
        place-items: start center;
        padding-top: calc(var(--pad-top) + var(--header-height) + 8px);
        padding-bottom: 14px;
    }

    .trade-modal {
        padding-left: 14px;
        padding-right: 14px;
    }

    .trade-modal-card {
        padding: 26px 18px;
    }
}


/* ============================================================
V12 HOME INNER SPACING

These values increase breathing room between titles, fields, labels,
and values inside Home section cards. Adjust the variables in :root.
============================================================ */
.home-card-title {
    margin-bottom: var(--home-card-title-gap);
}

.home-info-grid {
    row-gap: var(--home-info-row-gap);
    column-gap: var(--home-info-column-gap);
}

.home-info-item {
    gap: var(--home-info-label-value-gap);
}

.home-details-body,
.home-user-view,
.home-user-form,
.home-contact-layout,
.home-contact-list {
    gap: var(--home-info-row-gap);
}

/* ============================================================
EXTRA-THIN TRADE SCROLLBARS

The horizontal scrollbar is retained as the final overflow fallback,
but reduced to the smallest practical visible track in WebKit browsers.
Firefox exposes only auto/thin, so thin is used there.
============================================================ */
.product-name,
.product-price,
.info-card-metric-value {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--footer-nav-gold), 0.68) transparent;
}

.product-name::-webkit-scrollbar,
.product-price::-webkit-scrollbar,
.info-card-metric-value::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}

.product-name::-webkit-scrollbar-track,
.product-price::-webkit-scrollbar-track,
.info-card-metric-value::-webkit-scrollbar-track {
    background: transparent;
}

.product-name::-webkit-scrollbar-thumb,
.product-price::-webkit-scrollbar-thumb,
.info-card-metric-value::-webkit-scrollbar-thumb {
    min-width: 8px;
    border-radius: 999px;
    background-color: rgba(var(--footer-nav-gold), 0.68);
}

/* ============================================================
MAIN PAGE TITLE ORNAMENTS

Every main page title uses the same ornamental SVG as the Trade
categories. To compare either design without ornaments, change one of
these settings in :root:

--page-title-separator-display: none;
--category-separator-display: none;
============================================================ */
.main-title-row {
    width: min(100%, 1200px);
    margin: 24px auto 36px;
    display: grid;
    grid-template-columns: minmax(80px, 1fr) auto minmax(80px, 1fr);
    align-items: center;
    gap: var(--category-divider-gap);
    color: rgba(var(--category-divider-color), 1);
}

.main-title-row--table {
    margin-top: 0;
    margin-bottom: 20px;
}

.main-title-row img {
    display: var(--page-title-separator-display);
    width: 100%;
    height: var(--category-divider-height);
    overflow: visible;
}

.main-title-divider--right {
    transform: scaleX(-1);
}

.main-title-row .section-page-title,
.main-title-row .history-table-heading {
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: 10px 18px;
    white-space: nowrap;
}

/* Independent category control. Empty side tracks intentionally remain
when hidden so the category title stays perfectly centered. */
.category-title-row img {
    display: var(--category-separator-display);
}

@media (max-width: 720px) {
    .main-title-row {
        grid-template-columns: minmax(28px, 1fr) auto minmax(28px, 1fr);
    }

    .main-title-row .section-page-title,
    .main-title-row .history-table-heading {
        padding-left: 10px;
        padding-right: 10px;
        white-space: normal;
    }
}


/* ============================================================
V13 PNG ORNAMENTS

The separator artwork is now a normal PNG file rather than an SVG/use
reference. Required file: assets/ornamental-text-divider.png
============================================================ */
.category-title-row img,
.main-title-row img {
    object-fit: fill;
    object-position: center;
    pointer-events: none;
    user-select: none;
}

/* ============================================================
MY INFO FORM ACTION BUTTONS

Cancel and Submit can use independent artwork. Transparent pixels are
filled by the adjustable underlay, matching the rest of the interface.
============================================================ */
.home-form-actions {
    gap: var(--home-form-button-gap);
}

.home-form-actions button {
    min-width: var(--home-form-button-min-width);
    min-height: var(--home-form-button-height);
    padding: 8px var(--home-form-button-padding-x);
    border: 0;
    border-radius: var(--home-form-button-radius);
    color: rgba(var(--home-form-button-text), 1);
    background-color: rgba(
        var(--home-form-button-underlay),
        var(--home-form-button-underlay-strength)
    );
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    box-shadow: 3px 5px 8px rgba(0, 0, 0, var(--home-form-button-shadow-strength));
    font: 700 var(--home-form-button-font-size) Arial, Helvetica, sans-serif;
    cursor: pointer;
    transition:
        color var(--home-form-button-transition) ease,
        filter var(--home-form-button-transition) ease;
}

.home-form-actions [data-user-info-cancel] {
    background-image: var(--home-form-cancel-button-image);
}

.home-form-actions button[type="submit"] {
    background-image: var(--home-form-submit-button-image);
}

.home-form-actions button:hover,
.home-form-actions button:focus-visible {
    color: rgba(var(--home-form-button-hover-text), 1);
    filter: brightness(1.08);
}

/* ============================================================
MOBILE LAYOUT

All changes in this block apply only at 720px and below. Change the
breakpoint here if needed; change individual measurements in :root.
============================================================ */
@media (max-width: 720px) {
    :root {
        --pad-top: var(--mobile-pad-top);
        --pad-right: var(--mobile-pad-right);
        --pad-bottom: var(--mobile-pad-bottom);
        --pad-left: var(--mobile-pad-left);
        --side-width: var(--mobile-side-width);
        --top-height: var(--mobile-top-frame-height);
        --bottom-height: var(--mobile-bottom-frame-height);

        --header-height: var(--mobile-header-height);
        --footer-height: var(--mobile-footer-height);
        --logo-height: var(--mobile-logo-height);
        --home-logo-height: var(--mobile-home-logo-height);
        --logo-vertical-offset: var(--mobile-logo-vertical-offset);
        --home-logo-vertical-offset: var(--mobile-home-logo-vertical-offset);
        --announcement-left: var(--mobile-announcement-left);
        --announcement-right: var(--mobile-announcement-right);
        --announcement-font-size: var(--mobile-announcement-font-size);
        --announcement-duration: var(--mobile-announcement-duration);
        --announcement-vertical-offset: var(--mobile-announcement-vertical-offset);
        --home-glass-side-inset: var(--mobile-home-glass-side-inset);

        --footer-nav-icon-size: var(--mobile-footer-nav-icon-size);
        --gem-price-min-font-size: var(--mobile-gem-price-min-font-size);
        --gem-price-max-font-size: var(--mobile-gem-price-max-font-size);
    }

    /* Header/footer use more of the phone width and less height. */
    .footer {
        padding-left: var(--mobile-footer-horizontal-padding);
        padding-right: var(--mobile-footer-horizontal-padding);
    }

    .footer-nav {
        width: 100%;
        max-width: none;
    }

    .footer-nav-link {
        width: 100%;
        gap: var(--mobile-footer-nav-gap);
        padding: 0 1px;
        font-size: var(--mobile-footer-nav-font-size);
    }

    body.home-page .header,
    body.home-page .footer {
        left: calc(var(--pad-left) + var(--mobile-home-glass-side-inset));
        right: calc(var(--pad-right) + var(--mobile-home-glass-side-inset));
    }

    /* One complete product per row on phones. */
    .products {
        width: min(100%, var(--mobile-products-max-width));
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--mobile-product-row-gap);
        column-gap: 0;
    }

    .product-name {
        font-size: var(--mobile-product-name-font-size);
    }

    /* Smaller PNG ornaments and smaller page/category titles. */
    .category-title-row,
    .main-title-row {
        gap: var(--mobile-separator-gap);
    }

    .category-title-row img,
    .main-title-row img {
        height: var(--mobile-separator-height);
    }

    .main-title-row .section-page-title,
    .main-title-row .history-table-heading {
        font-size: var(--mobile-page-title-size);
    }

    .category-title {
        font-size: var(--mobile-category-title-size);
    }

    /* Compact opening market card, including the Sell button box itself. */
    .info-card {
        padding: var(--mobile-info-card-padding);
        gap: var(--mobile-info-card-gap);
    }

    .info-card-title {
        font-size: var(--mobile-info-title-size);
    }

    .info-card-description {
        font-size: var(--mobile-info-description-size);
    }

    .info-card-metric-label {
        font-size: var(--mobile-info-metric-label-size);
    }

    .info-card-metric-value {
        font-size: var(--mobile-info-metric-value-size);
    }

    .info-card-sell {
        width: min(100%, var(--mobile-info-sell-width));
        height: var(--mobile-info-sell-height);
        font-size: var(--mobile-info-sell-font-size);
    }

    /* History and Finance landing choices stack vertically. */
    .history-menu {
        width: min(100%, var(--mobile-menu-max-width));
        grid-template-columns: minmax(0, 1fr);
        gap: var(--mobile-menu-gap);
    }

    .history-menu-button {
        height: var(--mobile-menu-button-height);
    }

    /* Tables use their true intrinsic max-content width. Each column wraps
    closely around its own non-wrapping content instead of a desktop minimum. */
    .history-table-panel {
        width: fit-content;
        min-width: 0;
        max-width: 100%;
    }

    .trade-history-table,
    .possessions-table {
        width: max-content;
        min-width: max-content;
        table-layout: auto;
        font-size: var(--mobile-table-font-size);
    }

    .trade-history-table th,
    .trade-history-table td {
        padding:
            var(--mobile-table-cell-padding-y)
            var(--mobile-table-cell-padding-x);
    }

    .history-table-panel .history-pagination {
        padding:
            var(--mobile-pagination-padding-y)
            var(--mobile-pagination-padding-x);
        gap: var(--mobile-pagination-gap);
    }

    .history-pagination-pages {
        gap: var(--mobile-pagination-gap);
    }

    .history-pagination button {
        min-width: var(--mobile-pagination-button-size);
        min-height: var(--mobile-pagination-button-size);
        padding: 4px 7px;
        font-size: 11px;
    }

    .home-form-actions {
        gap: 10px;
    }

    .home-form-actions button {
        min-width: 0;
        min-height: 44px;
        padding-left: 12px;
        padding-right: 12px;
        font-size: 12px;
    }
}


/* ============================================================
V14 UNIFIED HOME-STYLE THEME

Every page now shares Home's wallpaper, frameless body, glass islands,
dark section artwork, white text, and gold highlights.
============================================================ */
body.unified-home-theme {
    background-image:
        linear-gradient(
            rgba(var(--home-tint-color), var(--home-tint-strength)),
            rgba(var(--home-tint-color), var(--home-tint-strength))
        ),
        var(--unified-wallpaper-image);
    background-repeat: repeat;
}

body.unified-home-theme .frame,
body.unified-home-theme .content-shadow {
    display: none;
}

/* Home-style glass header/footer on every page. */
body.unified-home-theme .header,
body.unified-home-theme .footer {
    left: calc(var(--pad-left) + var(--home-glass-side-inset));
    right: calc(var(--pad-right) + var(--home-glass-side-inset));
    width: auto;

    background-image: none;
    background-color: rgba(
        var(--home-glass-color),
        var(--home-glass-opacity)
    );
    -webkit-backdrop-filter:
        blur(var(--home-glass-blur))
        saturate(var(--home-glass-saturation));
    backdrop-filter:
        blur(var(--home-glass-blur))
        saturate(var(--home-glass-saturation));

    border: 1px solid rgba(
        var(--home-glass-border-color),
        var(--home-glass-border-strength)
    );
    border-radius: var(--home-glass-radius);
    box-shadow: 0 10px 28px rgba(
        var(--home-glass-shadow-color),
        var(--home-glass-shadow-strength)
    );
    overflow: hidden;
}

body.unified-home-theme .footer::before {
    background-image: none;
    background-color: transparent;
    transform: none;
}

body.unified-home-theme .header-logo {
    left: var(--home-logo-left-offset);
    top: calc(50% + var(--home-logo-vertical-offset));
    height: var(--home-logo-height);
}

body.unified-home-theme .header-announcement {
    color: rgba(var(--home-announcement-color), 1);
}

body.unified-home-theme .footer-nav-link {
    color: rgba(var(--home-footer-nav-default), 1);
}

body.unified-home-theme .footer-nav-link:hover {
    color: rgba(var(--home-footer-nav-hover), 1);
}

body.unified-home-theme .footer-nav-link--active,
body.unified-home-theme .footer-nav-link[aria-current="page"],
body.unified-home-theme .footer-nav-link--active:hover,
body.unified-home-theme .footer-nav-link[aria-current="page"]:hover {
    color: rgba(var(--home-footer-nav-active), 1);
}

/* ============================================================
ORNAMENT-FREE TITLES
============================================================ */
body.unified-home-theme .main-title-row,
body.unified-home-theme .category-title-row {
    width: fit-content;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    color: rgba(var(--unified-heading-color), 1);
}

body.unified-home-theme .main-title-row .section-page-title,
body.unified-home-theme .main-title-row .history-table-heading,
body.unified-home-theme .category-title {
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: 11px 20px;
    color: rgba(var(--unified-heading-color), 1);
    background-image: var(--unified-title-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    text-align: center;
}

/* ============================================================
HOME-STYLE PRODUCT CATEGORIES AND PRODUCTS
============================================================ */
body.unified-home-theme .product-category {
    padding: var(--unified-category-padding);
    color: rgba(var(--unified-text-color), 1);
    background-color: rgba(
        var(--tile-panel-underlay-color),
        var(--tile-panel-underlay-strength)
    );
    background-image: var(--unified-section-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    border-radius: var(--unified-card-radius);
    box-shadow: 3px 5px 8px rgba(0, 0, 0, var(--unified-card-shadow-strength));
}

body.unified-home-theme .category-title-row {
    margin-bottom: 28px;
}

/* Product names, sell prices, and buy prices now use the same artwork as
Home's My Payments Info action button. */
body.unified-home-theme .product-name,
body.unified-home-theme .product-price {
    color: rgba(var(--unified-text-color), 1);
    background-color: rgba(
        var(--tile-panel-underlay-color),
        var(--tile-panel-underlay-strength)
    );
    background-image: var(--unified-action-image);
    border-radius: var(--unified-product-radius);
    box-shadow: 3px 5px 8px rgba(0, 0, 0, var(--unified-card-shadow-strength));
}

body.unified-home-theme .product-price {
    transform: none;
    transition: color var(--home-action-transition) ease;
}

body.unified-home-theme .product-price:hover,
body.unified-home-theme .product-price:focus-visible {
    color: rgba(var(--unified-action-hover-color), 1);
    transform: none;
}

body.unified-home-theme .product::before {
    display: none;
}

/* The market information card keeps its existing tile, metrics, and text.
Only its Sell button changes to the unified Home action artwork. */
body.unified-home-theme .info-card-sell {
    color: rgba(var(--unified-text-color), 1);
    background-color: rgba(
        var(--tile-panel-underlay-color),
        var(--tile-panel-underlay-strength)
    );
    background-image: var(--unified-action-image);
    border-radius: var(--unified-product-radius);
}

body.unified-home-theme .info-card-sell:hover,
body.unified-home-theme .info-card-sell:focus-visible {
    color: rgba(var(--unified-action-hover-color), 1);
}

/* ============================================================
HOME-STYLE MENUS, TABLES, AND SECONDARY PANELS
============================================================ */
body.unified-home-theme .history-menu-button,
body.unified-home-theme .page-placeholder {
    color: rgba(var(--unified-text-color), 1);
    background-color: rgba(
        var(--tile-panel-underlay-color),
        var(--tile-panel-underlay-strength)
    );
    background-image: var(--unified-action-image);
    border-radius: var(--unified-product-radius);
}

body.unified-home-theme .history-menu-button:hover,
body.unified-home-theme .history-menu-button:focus-visible {
    color: rgba(var(--unified-action-hover-color), 1);
}

body.unified-home-theme .history-table-panel {
    color: rgba(var(--unified-text-color), 1);
    background-color: rgba(
        var(--tile-panel-underlay-color),
        var(--tile-panel-underlay-strength)
    );
    background-image: var(--unified-section-image);
    border-radius: var(--unified-card-radius);
}

body.unified-home-theme .trade-history-table {
    color: rgba(var(--unified-text-color), 1);
}

body.unified-home-theme .trade-history-table th {
    color: rgba(var(--unified-heading-color), 1);
}

body.unified-home-theme .trade-history-table th:nth-child(even),
body.unified-home-theme .trade-history-table td:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.055);
}

body.unified-home-theme .trade-history-table tbody tr:hover td,
body.unified-home-theme .trade-history-table tbody tr:active td {
    background-color: rgba(255, 255, 255, 0.13);
}

body.unified-home-theme .history-pagination button {
    color: rgba(var(--unified-text-color), 1);
    background-color: rgba(
        var(--tile-panel-underlay-color),
        var(--tile-panel-underlay-strength)
    );
    background-image: var(--unified-action-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    border-color: rgba(var(--home-card-heading), 0.62);
    border-radius: 7px;
}

body.unified-home-theme .history-pagination button:hover,
body.unified-home-theme .history-pagination button[aria-current="page"] {
    color: rgba(var(--unified-heading-color), 1);
    background-color: rgba(0, 0, 0, 0.42);
}

body.unified-home-theme .history-back-link {
    color: rgba(var(--home-footer-nav-default), 1);
}

body.unified-home-theme .history-back-link:hover,
body.unified-home-theme .history-back-link:focus-visible {
    color: rgba(var(--unified-heading-color), 1);
}

/* ============================================================
HOME-STYLE TRADE MODAL
============================================================ */
body.unified-home-theme .trade-modal-card {
    color: rgba(var(--unified-text-color), 1);
    background-color: rgba(
        var(--tile-panel-underlay-color),
        var(--tile-panel-underlay-strength)
    );
    background-image: var(--unified-section-image);
}

body.unified-home-theme .trade-modal-title,
body.unified-home-theme .trade-modal-field {
    color: rgba(var(--unified-heading-color), 1);
}

body.unified-home-theme .trade-modal-field input {
    color: rgba(var(--unified-text-color), 1);
    background-color: rgba(0, 0, 0, 0.62);
    background-image: var(--unified-input-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

body.unified-home-theme .trade-modal-confirm,
body.unified-home-theme .trade-modal-finish {
    color: rgba(var(--unified-text-color), 1);
    background-color: rgba(
        var(--tile-panel-underlay-color),
        var(--tile-panel-underlay-strength)
    );
    background-image: var(--unified-action-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

body.unified-home-theme .trade-modal-confirm:hover,
body.unified-home-theme .trade-modal-finish:hover {
    color: rgba(var(--unified-action-hover-color), 1);
}

/* Keep the existing V13 mobile behavior while applying glass islands to
all pages, not only Home. */
@media (max-width: 720px) {
    body.unified-home-theme .header,
    body.unified-home-theme .footer {
        left: calc(var(--pad-left) + var(--mobile-home-glass-side-inset));
        right: calc(var(--pad-right) + var(--mobile-home-glass-side-inset));
    }

    body.unified-home-theme .product-category {
        padding: 18px;
    }
}


/* ============================================================
V15 DISTINCT BUY / SELL ARTWORK AND BLACK NAVIGATION TITLES
============================================================ */
/* Product name bars keep the Home action artwork. Sell and Buy receive
independent new files, with names that do not reuse the former gem assets. */
body.unified-home-theme .product-price--sell,
body.unified-home-theme .info-card-sell {
    background-image: var(--trade-sell-action-image);
}

body.unified-home-theme .product-price--buy {
    background-image: var(--trade-buy-action-image);
}

/* The modal confirmation follows the operation that opened it. */
body.unified-home-theme .trade-modal[data-trade-operation="sell"] .trade-modal-confirm {
    background-image: var(--trade-sell-action-image);
}

body.unified-home-theme .trade-modal[data-trade-operation="buy"] .trade-modal-confirm {
    background-image: var(--trade-buy-action-image);
}

/* Page-level titles are black. Category and Home section headings remain
on their existing gold setting because they are section titles, not pages. */
body.unified-home-theme .main-title-row .section-page-title,
body.unified-home-theme .main-title-row .history-table-heading {
    color: rgba(var(--unified-page-title-color), 1);
}

body.unified-home-theme .history-back-link {
    color: rgba(var(--unified-back-button-color), 1);
}

body.unified-home-theme .history-back-link:hover,
body.unified-home-theme .history-back-link:focus-visible {
    color: rgba(var(--unified-back-button-hover-color), 1);
}


/* ============================================================
V16 PAGE TITLE ICONS
============================================================ */
body.unified-home-theme .main-title-row .section-page-title,
body.unified-home-theme .main-title-row .history-table-heading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--page-title-icon-gap);
}

.page-title-icon {
    flex: 0 0 auto;
    width: var(--page-title-icon-size);
    height: var(--page-title-icon-size);
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.page-title-icon--trade {
    -webkit-mask-image: url("assets/trade.svg");
    mask-image: url("assets/trade.svg");
}

.page-title-icon--history {
    -webkit-mask-image: url("assets/history.svg");
    mask-image: url("assets/history.svg");
}

.page-title-icon--finance {
    -webkit-mask-image: url("assets/account-statement.svg");
    mask-image: url("assets/account-statement.svg");
}

/* ============================================================
BLOCK-FLOW BACK BUTTON

The back arrow is no longer absolutely positioned. It owns a complete
row before the page title, so it cannot overlap or sit underneath titles,
tables, or controls on Trade History and other detail pages.
============================================================ */
.history-back-link {
    position: static;
    top: auto;
    left: auto;
    display: grid;
    place-items: center;
    margin: 0 0 var(--back-button-block-gap);
    transform: none;
}

.history-back-link:hover,
.history-back-link:focus-visible {
    transform: none;
}

/* ============================================================
MOBILE WIDTH UTILIZATION

Horizontal padding is intentionally much smaller on phones. Content,
menus, Home cards, and action controls are allowed to use nearly all of
the available viewport width. All values remain adjustable in :root.
============================================================ */
@media (max-width: 720px) {
    .page-content {
        padding-left: var(--mobile-content-horizontal-padding);
        padding-right: var(--mobile-content-horizontal-padding);
    }

    body.unified-home-theme .product-category {
        padding-left: var(--mobile-section-horizontal-padding);
        padding-right: var(--mobile-section-horizontal-padding);
    }

    .product {
        column-gap: var(--mobile-product-piece-gap);
    }

    .home-content {
        width: 100%;
        max-width: none;
    }

    .home-card,
    .home-details,
    .home-actions,
    .home-contact-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .home-card:not(.home-details) {
        padding-left: var(--mobile-home-card-horizontal-padding);
        padding-right: var(--mobile-home-card-horizontal-padding);
    }

    .home-details summary {
        padding-left: var(--mobile-home-card-horizontal-padding);
        padding-right: var(--mobile-home-card-horizontal-padding);
    }

    .home-details-body {
        padding-left: var(--mobile-home-card-horizontal-padding);
        padding-right: var(--mobile-home-card-horizontal-padding);
    }

    .home-actions,
    .home-form-actions {
        gap: var(--mobile-full-width-control-gap);
    }

    .home-action-button,
    .home-form-actions button {
        width: 100%;
    }

    .home-form-actions button {
        flex: 1 1 0;
    }

    .history-menu {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    .history-table-page {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .trade-modal {
        padding-left: var(--mobile-content-horizontal-padding);
        padding-right: var(--mobile-content-horizontal-padding);
    }

    .page-title-icon {
        width: var(--mobile-page-title-icon-size);
        height: var(--mobile-page-title-icon-size);
    }

    .history-back-link {
        width: 44px;
        height: 44px;
        margin-bottom: 6px;
        font-size: 42px;
    }
}


/* ============================================================
V17 COMPACT TRADE INTERNALS
============================================================ */
body.trade-page .product-category {
    padding: var(--trade-section-padding);
}

body.trade-page .category-title {
    padding:
        var(--trade-title-padding-y)
        var(--trade-title-padding-x);
}

body.trade-page .info-card {
    padding: var(--trade-info-card-padding);
    gap: var(--trade-info-card-gap);
}

body.trade-page .info-card-metric {
    padding: var(--trade-info-metric-padding);
}

body.trade-page .product-price {
    padding-left: var(--trade-piece-padding-x);
    padding-right: var(--trade-piece-padding-x);
}

/* ============================================================
UNIVERSAL ULTRA-THIN SCROLLBARS

Applies to the page, tables, buttons, inputs, text containers, modal
content, and every other scrollable element. Firefox supports only its
thin preset; Chromium/Safari use the exact pixel setting below.
============================================================ */
html,
body,
* {
    scrollbar-width: thin;
    scrollbar-color:
        rgba(var(--global-scrollbar-thumb), var(--global-scrollbar-thumb-strength))
        rgba(var(--global-scrollbar-track), var(--global-scrollbar-track-strength));
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: var(--global-scrollbar-size);
    height: var(--global-scrollbar-size);
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
    background-color: rgba(
        var(--global-scrollbar-track),
        var(--global-scrollbar-track-strength)
    );
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
    min-width: 4px;
    min-height: 4px;
    border: 0;
    border-radius: 999px;
    background-color: rgba(
        var(--global-scrollbar-thumb),
        var(--global-scrollbar-thumb-strength)
    );
}

html::-webkit-scrollbar-button,
body::-webkit-scrollbar-button,
*::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner {
    background: transparent;
}

/* ============================================================
FLUID MOBILE PRODUCT PROPORTIONS
============================================================ */
@media (max-width: 720px) {
    :root {
        --product-piece-height: clamp(
            var(--mobile-product-piece-min-height),
            var(--mobile-product-piece-fluid-height),
            var(--mobile-product-piece-max-height)
        );
    }

    body.trade-page .product-category {
        padding: var(--mobile-trade-section-padding);
    }

    body.trade-page .info-card {
        padding: var(--mobile-trade-info-card-padding);
    }

    body.trade-page .info-card-metric {
        padding: var(--mobile-trade-info-metric-padding);
    }

    body.trade-page .product-price {
        padding-left: var(--mobile-trade-piece-padding-x);
        padding-right: var(--mobile-trade-piece-padding-x);
    }

    body.trade-page .product-name,
    body.trade-page .product-price {
        height: var(--product-piece-height);
        min-height: 0;
    }
}


/* ============================================================
V18 COMPLETELY HIDDEN SCROLLBARS

Scrolling remains fully functional through mouse wheels, trackpads,
touch, keyboard navigation, and JavaScript. Only the native visual bars
are removed from the page and all nested elements.
============================================================ */
html,
body,
* {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
    display: none !important;
    background: transparent !important;
}

/* ============================================================
FINANCE ACTION GROUPS
============================================================ */
.finance-actions {
    width: min(100%, var(--finance-actions-max-width));
    margin: 0 auto 48px;
    display: grid;
    gap: var(--finance-section-gap);
    font-family: Arial, Helvetica, sans-serif;
}

.finance-action-section {
    padding: var(--finance-section-padding);
    color: rgba(var(--unified-text-color), 1);
    background-color: rgba(
        var(--tile-panel-underlay-color),
        var(--tile-panel-underlay-strength)
    );
    background-image: var(--unified-section-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    border-radius: var(--unified-card-radius);
    box-shadow: 3px 5px 8px rgba(0, 0, 0, var(--unified-card-shadow-strength));
}

.finance-action-heading {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 22px;
    padding: 10px 18px;
    color: rgba(var(--unified-heading-color), 1);
    background-image: var(--unified-title-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    font-size: clamp(20px, 2.3vw, 28px);
    text-align: center;
}

.finance-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--finance-button-gap);
}

.finance-action-button,
.finance-request-form .home-form-actions > button[type="submit"] {
    min-width: 0;
    min-height: var(--finance-button-min-height);
    padding: 12px 18px;
    border: 0;
    color: rgba(var(--unified-text-color), 1);
    background-color: rgba(
        var(--tile-panel-underlay-color),
        var(--tile-panel-underlay-strength)
    );
    background-image: var(--unified-action-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    border-radius: var(--unified-product-radius);
    box-shadow: 3px 5px 8px rgba(0, 0, 0, var(--unified-card-shadow-strength));
    font: 700 var(--finance-button-font-size) Arial, Helvetica, sans-serif;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
}

.finance-action-button:hover,
.finance-action-button:focus-visible,
.finance-request-form .home-form-actions > button[type="submit"]:hover,
.finance-request-form .home-form-actions > button[type="submit"]:focus-visible {
    color: rgba(var(--unified-action-hover-color), 1);
}

.footer-nav-link[href="/terms"] { font-size: clamp(9px, 1vw, 13px); }

.finance-action-button:disabled {
    opacity: .58;
    cursor: not-allowed;
    filter: saturate(.75);
}

.finance-action-button--compact {
    display: inline-flex;
    width: auto;
    min-height: 34px;
    padding: 6px 10px;
    font-size: 12px;
}

.finance-request-form .home-form-actions > button[type="submit"]:disabled {
    opacity: 0.58;
    cursor: not-allowed;
    filter: saturate(0.75);
}

@media (max-width: 720px) {
    .finance-actions {
        width: 100%;
        gap: var(--finance-mobile-section-gap);
    }

    .finance-action-section {
        padding: var(--finance-mobile-section-padding);
    }

    .finance-action-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--finance-mobile-button-gap);
    }

    .finance-action-button {
        width: 100%;
        min-height: 54px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 14px;
    }

    .finance-request-form .home-form-actions > button[type="submit"] {
        width: 100%;
        min-height: 54px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 14px;
    }
}


/* ============================================================
V19 PRODUCT SHELL AND PER-ITEM ADAPTIVE LAYOUT

The former product-title image now belongs to the entire product shell.
The title itself is transparent. JavaScript adds .product--stacked only
to an individual product whose title or prices cannot fit above their
configured inline minimum font size.
============================================================ */
body.trade-page .product {
    padding: var(--product-shell-padding);
    background-color: rgba(
        var(--tile-panel-underlay-color),
        var(--tile-panel-underlay-strength)
    );
    background-image: var(--product-shell-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    border-radius: var(--product-shell-radius);
    box-shadow: 3px 5px 8px rgba(0, 0, 0, var(--product-shell-shadow-strength));
}

body.trade-page .product-name {
    padding-left: var(--trade-piece-padding-x);
    padding-right: var(--trade-piece-padding-x);
    color: rgba(var(--unified-text-color), 1);
    background-color: transparent;
    background-image: none;
    border-radius: 0;
    box-shadow: none;
}

body.trade-page .product--stacked {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--product-stacked-row-gap);
}

body.trade-page .product--stacked .product-name {
    grid-column: 1 / -1;
    width: 100%;
}

body.trade-page .product--stacked .product-price {
    width: 100%;
}

/* ============================================================
HOME-STYLE MARKET INFORMATION CARD
============================================================ */
body.trade-page .info-card {
    color: rgba(var(--unified-heading-color), 1);
    background-color: rgba(
        var(--tile-panel-underlay-color),
        var(--tile-panel-underlay-strength)
    );
    background-image: var(--unified-section-image);
    border-radius: var(--unified-card-radius);
}

body.trade-page .info-card-title,
body.trade-page .info-card-description {
    color: rgba(var(--unified-heading-color), 1);
}

body.trade-page .info-card-metric {
    color: rgba(var(--unified-heading-color), 1);
    background-color: rgba(
        var(--tile-panel-underlay-color),
        var(--tile-panel-underlay-strength)
    );
    background-image: var(--product-shell-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    border-radius: var(--product-shell-radius);
}

/* ============================================================
HOME SECTION TITLE ARTWORK AND MY INFO COLORS
============================================================ */
body.home-page .home-card-title,
body.home-page .home-details-title {
    display: block;
    width: fit-content;
    max-width: 100%;
    background-image: var(--unified-action-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

body.home-page .home-details summary {
    color: rgba(var(--home-card-heading), 1);
}

body.home-page .home-details summary:hover,
body.home-page .home-details summary:focus-visible {
    color: rgba(var(--home-card-text), 1);
}

/* ============================================================
TRADE HISTORY END-OF-PAGE LINK
============================================================ */
.trade-history-cta {
    width: min(100%, var(--trade-history-cta-max-width));
    margin: 54px auto 24px;
}

.trade-history-cta-link {
    min-height: 66px;
    padding: 14px 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(var(--unified-text-color), 1);
    background-color: rgba(
        var(--tile-panel-underlay-color),
        var(--tile-panel-underlay-strength)
    );
    background-image: var(--unified-action-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    border-radius: var(--unified-product-radius);
    box-shadow: 3px 5px 8px rgba(0, 0, 0, var(--unified-card-shadow-strength));
    font: 700 19px Arial, Helvetica, sans-serif;
    text-decoration: none;
}

.trade-history-cta-link:hover,
.trade-history-cta-link:focus-visible {
    color: rgba(var(--unified-action-hover-color), 1);
}

@media (max-width: 720px) {
    :root {
        --product-title-max-font-size: var(--mobile-product-title-max-font-size);
        --product-title-inline-min-font-size: var(--mobile-product-inline-min-font-size);
        --product-price-inline-min-font-size: var(--mobile-product-inline-min-font-size);
    }

    body.trade-page .product {
        padding: var(--mobile-product-shell-padding);
    }

    .trade-history-cta {
        margin-top: 34px;
    }

    .trade-history-cta-link {
        width: min(100%, var(--trade-history-cta-max-width));
        margin-left: auto;
        margin-right: auto;
        min-height: 52px;
        padding: 10px 14px;
        font-size: 15px;
    }
}


/* ============================================================
V20 BRIGHTER GOLD + WHITE CHROME TEXT
============================================================ */
:root {
    --home-card-heading: var(--bright-gold);
    --unified-heading-color: var(--bright-gold);
    --unified-action-hover-color: var(--bright-gold);
    --footer-nav-gold: var(--bright-gold);
    --home-footer-nav-active: var(--bright-gold);
    --home-glass-border-color: var(--bright-gold);
    --info-gold-color: var(--bright-gold);
    --loading-text-color: var(--bright-gold);
    --history-gold-line: var(--bright-gold);
    --trade-modal-accent: var(--bright-gold);
    --unified-back-button-hover-color: var(--bright-gold);
    --home-form-button-hover-text: var(--bright-gold);

    --home-announcement-color: 255, 255, 255;
    --home-footer-nav-default: 255, 255, 255;
}

/* ============================================================
TRADE SUCCESS HISTORY LINK
============================================================ */
.trade-modal-history-link {
    color: rgba(var(--bright-gold), 1);
    font: 700 16px Arial, Helvetica, sans-serif;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.trade-modal-history-link:hover,
.trade-modal-history-link:focus-visible {
    color: #ffffff;
}

/* ============================================================
HOME DASHBOARD AND DESKTOP INFORMATION WIDTHS
============================================================ */
.home-dashboard {
    width: min(100%, var(--home-dashboard-max-width));
}

.home-dashboard-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--home-dashboard-gap);
}

.install-app-button {
    min-height: 60px;
    color: #f8f0d0;
    background-color: #252116;
    background-image: linear-gradient(135deg, #292719, #191a16);
    border: 1px solid rgba(255, 202, 65, .62);
    border-radius: 10px;
    font: 700 15px Arial, Helvetica, sans-serif;
    cursor: pointer;
}

.install-app-button:hover,
.install-app-button:focus-visible {
    color: #ffda73;
    border-color: rgba(255, 218, 115, .9);
}

.install-app-button:disabled {
    cursor: wait;
    opacity: .75;
}

.home-account-card {
    width: min(100%, var(--home-account-section-width));
}

.home-account-card .home-info-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-details {
    width: min(100%, var(--home-info-section-width));
    min-width: min(100%, var(--home-info-section-width));
}

/* ============================================================
CURRENT GOLD MARKET REFINEMENTS
============================================================ */
body.trade-page .info-card-title {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding:
        var(--trade-info-title-padding-y)
        var(--trade-info-title-padding-x);
    color: rgba(var(--bright-gold), 1);
    background-image: var(--unified-action-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

body.trade-page .info-card-description {
    color: #ffffff;
    font-size: var(--trade-info-description-size);
    font-weight: 600;
}

body.trade-page .info-card-metric-label {
    color: rgba(var(--bright-gold), 1);
}

body.trade-page .info-card-metric-value {
    color: #ffffff;
}

@media (max-width: 720px) {
    .home-dashboard-actions,
    .home-account-card .home-info-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-account-card,
    .home-details,
    .home-dashboard {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    body.trade-page .info-card-description {
        font-size: 15px;
    }
}


/* ============================================================
V21 ACCOUNT INFO ALIGNMENT
============================================================ */
.home-account-card {
    width: min(100%, var(--home-info-section-width));
    padding: var(--home-account-card-padding);
}

.home-account-card .home-info-grid {
    grid-template-columns: repeat(
        4,
        minmax(120px, var(--home-account-item-max-width))
    );
    justify-content: center;
    justify-items: center;
    row-gap: var(--home-account-row-gap);
    column-gap: var(--home-account-column-gap);
}

.home-account-card .home-info-item {
    width: 100%;
    align-items: center;
    justify-items: center;
    text-align: center;
}

.home-account-card .account-status {
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
FIXED LAST-UPDATE INDICATOR
============================================================ */
body.unified-home-theme .page-content {
    padding-top: calc(
        var(--header-height)
        + var(--pad-top)
        + var(--last-update-reserved-space)
    );
}

.last-update-indicator {
    position: fixed;
    top: calc(
        var(--pad-top)
        + var(--header-height)
        + var(--last-update-offset)
    );
    right: calc(var(--pad-right) + var(--home-glass-side-inset));
    z-index: 5;
    padding:
        var(--last-update-padding-y)
        var(--last-update-padding-x);
    color: #ffffff;
    background-color: rgba(
        var(--home-glass-color),
        var(--home-glass-opacity)
    );
    -webkit-backdrop-filter: blur(var(--home-glass-blur));
    backdrop-filter: blur(var(--home-glass-blur));
    border: 1px solid rgba(var(--bright-gold), 0.58);
    border-radius: 999px;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.28);
    font: 700 var(--last-update-font-size) Arial, Helvetica, sans-serif;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

/* ============================================================
WIDTH-MATCHED BODY WALLPAPER

The wallpaper scales to exactly the viewport/body width. It repeats only
vertically when a page is longer than one image, never horizontally.
============================================================ */
body.unified-home-theme {
    background-size: 100% auto;
    background-repeat: repeat-y;
    background-position: top center;
}

/* ============================================================
SINGLE-PAGE POSSESSIONS TABLE
============================================================ */
body.possessions-page .history-table-page {
    width: min(100%, var(--possessions-table-max-width));
}

body.possessions-page .possessions-table-panel {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
}

body.possessions-page .possessions-table-scroll {
    width: 100%;
    max-width: 100%;
    height: auto;
    overflow: visible;
}

body.possessions-page .possessions-table {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    table-layout: auto;
}

body.possessions-page .possessions-table th,
body.possessions-page .possessions-table td {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Tighter product rows; larger internal spacing in Current Gold Market. */
body.trade-page .products {
    row-gap: var(--product-row-gap-compact);
}

body.trade-page .info-card {
    gap: var(--trade-info-card-expanded-gap);
}

@media (max-width: 720px) {
    .home-account-card {
        width: 100%;
        padding-left: var(--mobile-home-card-horizontal-padding);
        padding-right: var(--mobile-home-card-horizontal-padding);
    }

    .home-account-card .home-info-grid {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        row-gap: var(--home-account-row-gap);
    }

    .last-update-indicator {
        top: calc(
            var(--pad-top)
            + var(--header-height)
            + 5px
        );
        right: calc(var(--pad-right) + var(--mobile-home-glass-side-inset));
        padding: 5px 8px;
        font-size: 10px;
    }

    body.unified-home-theme .page-content {
        padding-top: calc(
            var(--header-height)
            + var(--pad-top)
            + 31px
        );
    }

    body.trade-page .products {
        row-gap: var(--mobile-product-row-gap-compact);
    }

    body.trade-page .info-card {
        gap: var(--mobile-trade-info-card-expanded-gap);
    }
}


/* ============================================================
V22 PERSIAN / RTL INTERFACE

Implementation names stay English; all user-facing content is Persian.
============================================================ */
html {
    direction: rtl;
}

body,
button,
input,
select,
textarea {
    font-family: Tahoma, "Noto Sans Arabic", Arial, sans-serif;
}

body {
    direction: rtl;
    text-align: right;
}

input,
textarea,
select {
    direction: rtl;
    text-align: right;
}

.home-info-value,
.trade-history-table td,
.trade-history-table th,
.info-card-metric-value,
.product-price {
    unicode-bidi: plaintext;
}

/* Remove V21's reserved update-label row from every ordinary page. */
body.unified-home-theme .page-content {
    padding-top: calc(var(--header-height) + var(--pad-top));
}

/* Reserve a small row only on Trade, where the label still exists. */
body.trade-page .page-content {
    padding-top: calc(
        var(--header-height)
        + var(--pad-top)
        + var(--trade-last-update-reserved-space)
    );
}

/* Plain white text with a subtle black outline: no island/background. */
body.trade-page .last-update-indicator {
    top: calc(
        var(--pad-top)
        + var(--header-height)
        + var(--trade-last-update-top-offset)
    );
    right: calc(
        var(--pad-right)
        + var(--home-glass-side-inset)
        + var(--last-update-right-offset)
    );
    padding: 0;
    color: #ffffff;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    -webkit-text-stroke: 0.35px #000000;
    text-shadow:
        -1px -1px 0 rgba(0, 0, 0, 0.78),
         1px -1px 0 rgba(0, 0, 0, 0.78),
        -1px  1px 0 rgba(0, 0, 0, 0.78),
         1px  1px 0 rgba(0, 0, 0, 0.78);
    font-family: Tahoma, "Noto Sans Arabic", Arial, sans-serif;
}

/* Keep layout-sensitive symbols and numeric references readable in RTL. */
.trade-modal-close,
.history-back-link {
    direction: ltr;
}

@media (max-width: 720px) {
    body.unified-home-theme .page-content {
        padding-top: calc(var(--header-height) + var(--pad-top));
    }

    body.trade-page .page-content {
        padding-top: calc(
            var(--header-height)
            + var(--pad-top)
            + var(--mobile-trade-last-update-reserved-space)
        );
    }

    body.trade-page .last-update-indicator {
        top: calc(
            var(--pad-top)
            + var(--header-height)
            + var(--mobile-trade-last-update-top-offset)
        );
        right: calc(
            var(--pad-right)
            + var(--mobile-home-glass-side-inset)
            + var(--mobile-last-update-right-offset)
        );
        padding: 0;
        font-size: var(--mobile-last-update-font-size);
    }
}

/* Final visual overrides for the Persian interface. */
body,
body *,
button,
input,
select,
textarea {
    font-family: "Vazirmatn", Tahoma, Arial, sans-serif !important;
}

table,
.trade-history-table {
    direction: rtl;
}

table th,
table td,
.trade-history-table th,
.trade-history-table td {
    direction: rtl;
    text-align: right;
}

body.possessions-page .possessions-table-panel {
    width: fit-content;
    max-width: 100%;
}

body.possessions-page .possessions-table-scroll {
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
}

body.possessions-page .possessions-table {
    width: max-content;
    min-width: var(--possessions-table-min-width);
    max-width: none;
    table-layout: auto;
}

body.possessions-page .possessions-table th,
body.possessions-page .possessions-table td {
    direction: rtl;
    text-align: right;
    padding:
        var(--possessions-table-cell-padding-y)
        var(--possessions-table-cell-padding-x);
    white-space: nowrap;
}

body.possessions-page .possessions-status--owe-us {
    color: #ff4d5e;
}

body.possessions-page .possessions-status--we-owe {
    color: #49e681;
}

body.trade-page .product-category + .product-category {
    margin-top: var(--trade-category-gap);
}

body.trade-page .info-card {
    margin-bottom: var(--trade-info-card-bottom-margin);
}

body.trade-page .category-title-row {
    margin-bottom: var(--trade-category-title-bottom-gap);
}

body.unified-home-theme .finance-action-heading {
    color: rgba(var(--unified-heading-color), 1);
    background-color: rgba(
        var(--tile-panel-underlay-color),
        var(--tile-panel-underlay-strength)
    );
    background-image: var(--unified-action-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

/* Experimental flat section-title treatment: keep the title shapes,
   but replace their artwork with solid black. */
body.unified-home-theme .category-title,
body.unified-home-theme .home-card-title,
body.unified-home-theme .home-details-title,
body.unified-home-theme .finance-action-heading,
body.trade-page .info-card-title {
    background-image: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.12),
        rgba(255, 255, 255, 0.02) 42%,
        rgba(0, 0, 0, 0.18)
    );
    background-color: #000000;
    border-radius: var(--unified-product-radius);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 4px 10px rgba(0, 0, 0, 0.28);
}

body.trade-page .last-update-indicator {
    color: #6fff00;
    -webkit-text-stroke: 0px #ffffff;
    text-shadow: none;
}

.header-announcement {
    pointer-events: none;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 var(--announcement-edge-fade-width),
        #000 calc(100% - var(--announcement-edge-fade-width)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 var(--announcement-edge-fade-width),
        #000 calc(100% - var(--announcement-edge-fade-width)),
        transparent 100%
    );
}

.history-back-link {
    position: absolute;
    top: var(--back-button-top-offset);
    left: 0;
    right: auto;
    width: var(--back-button-size);
    height: var(--back-button-size);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    direction: ltr;
    font-family: Arial, sans-serif !important;
    font-size: var(--back-button-font-size);
    font-weight: 900;
    line-height: 1;
}

@media (max-width: 720px) {
    :root {
        --possessions-table-min-width: var(--mobile-possessions-table-min-width);
    }

    body.home-page .home-account-card .home-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--home-account-column-gap);
        row-gap: var(--home-account-row-gap);
    }

    body.trade-page .product-category + .product-category {
        margin-top: var(--mobile-trade-category-gap);
    }

    body.trade-page .info-card {
        margin-bottom: var(--mobile-trade-info-card-bottom-margin);
    }

    body.trade-page .category-title-row {
        margin-bottom: var(--mobile-trade-category-title-bottom-gap);
    }

    body.possessions-page .possessions-table th,
    body.possessions-page .possessions-table td {
        padding:
            var(--mobile-possessions-table-cell-padding-y)
            var(--mobile-possessions-table-cell-padding-x);
    }
}

/* ============================================================
UNIFIED PAGE TITLE ALIGNMENT
============================================================ */

/* Regular pages and table pages share the same title geometry. */
body.unified-home-theme .main-title-row {
    width: min(100%, 1200px);
    margin: 8px auto 20px;
    min-height: 46px;
}

body.unified-home-theme .main-title-row--table {
    margin-top: 8px;
    margin-bottom: 20px;
}

body.unified-home-theme .history-table-page {
    margin-top: 8px;
}

body.unified-home-theme .main-title-row .section-page-title,
body.unified-home-theme .main-title-row .history-table-heading {
    margin: 0;
    padding: 8px 18px;
    font-family: "Vazirmatn", Tahoma, Arial, sans-serif !important;
    font-size: clamp(22px, 2.9vw, var(--font-page-title-max));
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0;
    text-align: center;
}

@media (max-width: 720px) {
    body.unified-home-theme .main-title-row .section-page-title,
    body.unified-home-theme .main-title-row .history-table-heading {
        padding: 6px 10px;
        font-size: var(--font-page-title-mobile);
        line-height: 1.25;
    }
}

/* RTL tables need the divider on the left edge of each non-final cell;
   that edge is the actual space between adjacent visual columns. */
.trade-history-table th:not(:last-child),
.trade-history-table td:not(:last-child),
.possessions-table th:not(:last-child),
.possessions-table td:not(:last-child) {
    border-right: 0;
    border-left:
        var(--history-table-vertical-line-width)
        solid
        rgba(
            var(--history-gold-line),
            var(--history-table-vertical-line-strength)
        );
}

/* Section headings are text-only; their surrounding cards keep their
   own backgrounds, but the heading itself has no artwork or panel. */
body.unified-home-theme .category-title,
body.unified-home-theme .home-card-title,
body.unified-home-theme .home-details-title,
body.unified-home-theme .finance-action-heading,
body.trade-page .info-card-title {
    background-image: none;
    background-color: transparent;
    border: 0;
    box-shadow: none;
    font-size: clamp(20px, 2.7vw, var(--font-section-heading-max));
    text-shadow:
        0 0 2px #000000,
        0 1px 3px rgba(0, 0, 0, 0.95);
}

/* The market card heading (فروش طلای متفرقه) is deliberately smaller
than ordinary section headings and has its own knobs. */
body.trade-page .info-card-title {
    font-size: clamp(
        var(--font-market-card-title-mobile),
        2.2vw,
        var(--font-market-card-title-max)
    );
}

@media (max-width: 720px) {
    body.unified-home-theme .category-title,
    body.unified-home-theme .home-card-title,
    body.unified-home-theme .home-details-title,
    body.unified-home-theme .finance-action-heading,
    body.trade-page .info-card-title {
        font-size: var(--font-section-heading-mobile);
        text-shadow:
            0 0 2px #000000,
            0 1px 3px rgba(0, 0, 0, 0.95);
    }
}

/* ============================================================
V23 LIQUID-GOLD HEADER, NOTICES, COMPACT MARKET CARD

1. Header phone button + contact modal (every page).
2. Alerts/news/tips panel replaces the Trade page title.
3. Miscellaneous-gold card becomes a compact two-row stack:
   row 1 = title; row 2 = price | sell | price. The old
   description lives behind a question-mark help button in the
   top corner, and the sell button pulses a radiant gold glow.
4. Buy (green) sits on the right and sell (red) on the left.
============================================================ */

/* ---- Header phone button ---- */
.header-phone-button {
    position: absolute;
    right: var(--header-phone-right);
    top: calc(50% + var(--header-phone-vertical-offset));
    transform: translateY(-50%);
    z-index: 1;

    width: var(--header-phone-size);
    height: var(--header-phone-size);
    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(var(--bright-gold), 0.55);
    border-radius: 50%;
    color: rgba(var(--bright-gold), 1);
    background-color: rgba(0, 0, 0, 0.42);
    cursor: pointer;
    transition:
        background-color 180ms ease,
        color 180ms ease;
}

.header-phone-button:hover,
.header-phone-button:focus-visible {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.68);
}

/* Drop assets/phone.svg into place to supply the artwork. */
.header-phone-icon {
    width: var(--header-phone-icon-ratio);
    height: var(--header-phone-icon-ratio);
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url("assets/phone.svg");
    mask-image: url("assets/phone.svg");
}

@media (max-width: 720px) {
    :root {
        --header-phone-size: var(--mobile-header-phone-size);
        --header-phone-right: var(--mobile-header-phone-right);
        --announcement-gap: var(--mobile-announcement-gap);
    }
}

/* ---- Contact modal content ---- */
.contact-modal-list {
    width: min(100%, 380px);
    margin: 0;
    padding: 0 6px;
    list-style: none;
    display: grid;
    gap: 18px;
}

.contact-modal-item {
    display: grid;
    gap: 5px;
    line-height: 1.6;
    text-align: right;
}

.contact-modal-label {
    color: rgba(var(--unified-heading-color), 1);
    font-weight: 700;
    font-size: 14px;
}

.contact-modal-item strong {
    overflow-wrap: anywhere;
}

.contact-channel-list {
    width: min(100%, 420px);
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}
.contact-channel-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid rgba(var(--unified-heading-color), .24);
    border-radius: 10px;
    background: rgba(var(--unified-heading-color), .05);
}
.contact-channel-icon { flex: 0 0 24px; width: 24px; height: 24px; color: rgba(var(--unified-heading-color), 1); }
.contact-channel-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contact-channel-icon--telegram svg path:first-child { fill: currentColor; stroke: none; }
.contact-channel-copy { display: grid; gap: 2px; min-width: 0; line-height: 1.5; }
.contact-channel-copy strong { font-size: 12px; }
.contact-channel-copy a, .contact-channel-copy > span { overflow-wrap: anywhere; font-size: 13px; color: inherit; text-decoration: none; }
.contact-channel-copy a:hover { text-decoration: underline; }
.contact-source-note { margin: 0; color: rgba(var(--unified-text-color), .7); font-size: 11px; line-height: 1.5; }
.support-directory { display: grid; gap: 10px; margin-top: 18px; }
.support-directory h3 { margin: 0; color: rgba(var(--unified-heading-color), 1); font-size: 15px; }
.support-directory-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.support-directory-card { display: grid; gap: 8px; min-width: 0; padding: 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: #18202a; color: #fff; }
.support-directory-person { display: grid; gap: 2px; line-height: 1.5; }
.support-directory-person strong { color: #ffe49a; }
.support-directory-person span { color: rgba(255,255,255,.78); font-size: 12px; }
.support-directory-phone { width: fit-content; max-width: 100%; color: #fff; font-weight: 700; overflow-wrap: anywhere; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.support-directory-channels .contact-channel-list { width: 100%; }
.support-directory-channels .contact-channel-item { border-color: rgba(255,255,255,.2); background: #222d39; }
.support-directory-state { margin: 0; color: rgba(var(--unified-text-color), .86); font-size: 13px; line-height: 1.7; }
.support-directory-state[role="alert"] { display: grid; justify-items: start; gap: 8px; }
.support-directory-state button { min-height: 36px; padding: 6px 12px; border: 1px solid rgba(var(--unified-heading-color), .55); border-radius: 8px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.login-terms-link { margin: 14px 0 0; text-align: center; font-size: 12px; }
.login-terms-link a { color: rgba(var(--unified-heading-color), 1); }
.public-terms-page { max-width: 920px; }
.public-terms-state { padding: 18px; text-align: center; color: rgba(var(--unified-text-color), .86); }
.public-terms-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.9; }
.public-terms-updated { margin-bottom: 0; opacity: .7; font-size: 12px; }

/* Jewelry showcase: a browse-only catalog, separate from trading. */
.showcase-shell { width: min(100%, 1100px); margin: 0 auto; padding: 18px 16px 32px; }
.showcase-intro { margin: 8px 0 18px; color: rgba(var(--unified-text-color), .82); line-height: 1.8; }
.showcase-filters { display: grid; grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr); gap: 12px; margin-bottom: 18px; }
.showcase-filters label { display: grid; gap: 6px; color: rgba(var(--unified-text-color), .9); font-size: 13px; }
.showcase-filters input, .showcase-filters select { width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid rgba(var(--unified-heading-color), .34); border-radius: 10px; background: #18202a; color: #fff; font: inherit; }
.showcase-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.showcase-card { min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.15); border-radius: 14px; background: #18202a; color: #fff; }
.showcase-card-link { display: grid; height: 100%; color: inherit; text-decoration: none; }
.showcase-card-link:focus-visible, .showcase-pagination button:focus-visible { outline: 3px solid #ffd568; outline-offset: 3px; }
.showcase-image { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #27313d; }
.showcase-card-copy { display: grid; align-content: start; gap: 8px; padding: 14px; }
.showcase-card-copy h2 { margin: 0; color: #fff; font-size: 17px; line-height: 1.5; }
.showcase-category { width: fit-content; padding: 3px 9px; border-radius: 99px; background: rgba(255,213,104,.13); color: #ffe49a; font-size: 12px; }
.showcase-price { margin: 0; color: #ffe49a; font-weight: 700; }
.showcase-more { color: rgba(255,255,255,.76); font-size: 13px; }
.showcase-state { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 100px; margin: 0; padding: 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: #18202a; color: #fff; line-height: 1.8; }
.showcase-state p { margin: 0; }
.showcase-state button, .showcase-pagination button { min-height: 40px; padding: 7px 14px; border: 1px solid rgba(255,213,104,.5); border-radius: 9px; background: #222d39; color: #fff; font: inherit; cursor: pointer; }
.showcase-state button:hover, .showcase-pagination button:not(:disabled):hover { background: #344354; }
.showcase-pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; color: rgba(var(--unified-text-color), .9); font-size: 13px; }
.showcase-pagination div { display: flex; gap: 8px; }
.showcase-pagination button:disabled { opacity: .45; cursor: not-allowed; }
.showcase-detail-card { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 1fr); gap: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.15); border-radius: 16px; background: #18202a; color: #fff; }
.showcase-detail-image { display: block; width: 100%; height: 100%; min-height: 320px; max-height: 620px; object-fit: cover; background: #27313d; }
.showcase-detail-copy { min-width: 0; padding: 22px; }
.showcase-detail-copy h1 { margin: 10px 0; color: #ffe49a; font-size: clamp(22px, 4vw, 32px); }
.showcase-description { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.9; }
.showcase-specs { display: grid; gap: 0; margin: 20px 0; border-top: 1px solid rgba(255,255,255,.14); }
.showcase-specs > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.showcase-specs dt { color: rgba(255,255,255,.72); }
.showcase-specs dd { margin: 0; overflow-wrap: anywhere; text-align: left; }
.showcase-disclaimer { margin: 18px 0 0; padding: 12px; border-radius: 10px; background: #27313d; color: #ffe49a; font-size: 13px; line-height: 1.8; }
@media (max-width: 680px) {
    .showcase-shell { padding-inline: 12px; }
    .showcase-filters { grid-template-columns: 1fr; }
    .showcase-detail-card { grid-template-columns: 1fr; }
    .showcase-detail-image { height: auto; min-height: 0; max-height: 420px; aspect-ratio: 4 / 3; }
    .showcase-detail-copy { padding: 16px; }
    .showcase-pagination { align-items: flex-start; flex-direction: column; }
}

/* ---- Help-modal paragraphs (miscellaneous-gold explanation) ---- */
.info-help-text {
    margin: 0;
    max-width: 46ch;
    font-weight: 600;
    line-height: 1.9;
    text-align: center;
}

/* ---- Alerts / tips: opener button + notices modal ---- */
/* All custom modals (contact, market-card help, notices) share a
centered column layout, matching the alerts modal's alignment. */
[data-modal] .trade-modal-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.trade-notices-button {
    width: min(100%, var(--notices-button-max-width));
    min-height: var(--notices-button-height);
    margin: 12px auto 8px;
    padding: 12px 20px;
    border: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: rgba(var(--unified-text-color), 1);
    background-color: rgba(
        var(--tile-panel-underlay-color),
        var(--tile-panel-underlay-strength)
    );
    background-image: var(--unified-action-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    border-radius: var(--unified-product-radius);
    box-shadow: 3px 5px 8px rgba(0, 0, 0, var(--unified-card-shadow-strength));

    font-family: inherit;
    font-size: var(--notices-button-font-size);
    font-weight: 700;
    cursor: pointer;
}

.trade-notices-button:hover,
.trade-notices-button:focus-visible {
    color: rgba(var(--unified-action-hover-color), 1);
}

body.trade-page .trade-notices-button {
    display: flex;
    margin-left: auto;
    margin-right: auto;
}

/* The card is a column: title on top, scrolling list in the middle,
   understood button pinned at the bottom — always visible. */
.notices-modal-card {
    width: min(100%, var(--notices-modal-max-width));
    max-height: 70vh;
    max-height: 70dvh;

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

.notices-modal-card .trade-modal-title {
    margin: 0 36px;
    flex: 0 0 auto;
}

.notices-modal-list {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow-y: auto;

    margin: 0;
    padding: 4px 6px;
    list-style: none;
    display: grid;
    gap: 12px;
    align-content: start;

    color: rgba(var(--unified-text-color), 1);
    font-size: var(--notices-item-font-size);
    font-weight: 600;
    line-height: 1.8;
}

.notices-modal-item {
    position: relative;
    padding-inline-start: 24px;
    overflow-wrap: anywhere;
}

.notices-modal-item::before {
    content: "";
    position: absolute;
    inset-inline-start: 4px;
    top: 0.55em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: rgba(var(--bright-gold), 1);
}

.notices-modal-item--alert {
    color: #ff9aa5;
    font-weight: 800;
}

.notices-modal-item--alert::before {
    background-color: #ff4d5e;
}

.notices-modal-confirm {
    flex: 0 0 auto;
    align-self: center;
    min-width: var(--notices-confirm-min-width);
}

/* ---- Compact miscellaneous-gold market card ---- */
body.trade-page .info-card {
    position: relative;
    max-width: 420px;
    padding: 14px;
    gap: 12px;
    text-align: center;
}

body.trade-page .info-card-title {
    padding: 4px 10px;
}

/* Row 2: price panel | sell button | price panel. */
.info-card-row {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
}

.info-card-row .info-card-metric {
    padding: 8px;
    gap: 5px;
}

.info-card-row .info-card-sell {
    width: min(100%, 96px);
    align-self: center;
    height: var(--market-sell-height-ratio);

    /* Left/right space between the فروش text and the button edges.
    !important is deliberate: no other rule in this stylesheet may
    shrink this space. Tune with --market-sell-side-padding in the
    tweak-knobs block at the end of this file. */
    padding-left: var(--market-sell-side-padding) !important;
    padding-right: var(--market-sell-side-padding) !important;
}

/* Question-mark help button pinned to the top corner of the section.
The glyph size is proportional to its circle; use the tweak-knob
variables at the end of this file to adjust either. */
.info-card-help {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    z-index: 1;

    width: var(--info-help-circle-size);
    height: var(--info-help-circle-size);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(var(--bright-gold), 0.55);
    border-radius: 50%;
    color: rgba(var(--bright-gold), 1);
    background-color: rgba(0, 0, 0, 0.42);
    cursor: pointer;
    transition:
        background-color 180ms ease,
        color 180ms ease;
}

/* The glyph is a separate span so it can be nudged independently of
the circle. --info-help-glyph-drop moves it DOWN by whole pixels;
use a negative value to move it up instead. */
.info-card-help-glyph {
    display: block;
    font-family: Arial, sans-serif !important;
    font-size: var(--info-help-glyph-size) !important;
    font-weight: 800;
    line-height: 1;
    transform: translateY(var(--info-help-glyph-drop));
}

.info-card-help:hover,
.info-card-help:focus-visible {
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.68);
}

/* Pulsing radiant glow that draws attention to the sell action. */
@keyframes info-sell-glow-pulse {
    0%,
    100% {
        box-shadow:
            3px 5px 8px rgba(0, 0, 0, 0.36),
            0 0 6px 2px rgba(var(--bright-gold), 0.32);
    }

    50% {
        box-shadow:
            3px 5px 8px rgba(0, 0, 0, 0.36),
            0 0 22px 9px rgba(var(--bright-gold), 0.85);
    }
}

body.trade-page .info-card-sell {
    animation: info-sell-glow-pulse 1.8s ease-in-out infinite;
}

@media (max-width: 720px) {
    .notices-modal-list {
        gap: 9px;
    }

    /* Tighter card padding and row gap give the price divs and the
    sell button more horizontal room on small screens. */
    body.trade-page .info-card {
        max-width: 100%;
        padding: 12px 6px;
    }

    .info-card-row {
        gap: var(--mobile-market-row-gap);
    }

    .info-card-row .info-card-sell {
        padding-left: var(--mobile-market-sell-side-padding) !important;
        padding-right: var(--mobile-market-sell-side-padding) !important;
    }

    .info-card-help {
        top: 8px;
        inset-inline-end: 8px;
        width: var(--mobile-info-help-circle-size);
        height: var(--mobile-info-help-circle-size);
    }

    .info-card-help-glyph {
        font-size: var(--mobile-info-help-glyph-size) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.trade-page .info-card-sell {
        animation: none;
    }
}

/* ---- Green on the right, red on the left ----
RTL places the first grid column at the physical right. Lowering the
buy button's order moves it ahead of the sell button, so buy lands in
the middle column and sell on the left — reversed from before, and it
keeps working when rows are later generated from live data. */
body.trade-page .product-name {
    order: -2;
}

body.trade-page .product-price--buy {
    order: -1;
}

/* ============================================================
FONT-SIZE AND CONTROL TWEAK KNOBS
============================================================
Every size you are likely to want to adjust lives in this one
block. Change only these numbers; the rules above consume them.
Nothing else needs to be understood or touched.

Related knobs defined earlier in :root (search for them):
--announcement-font-size          header message, desktop
--mobile-announcement-font-size   header message, mobile
--header-phone-size               phone button circle, desktop
--mobile-header-phone-size        phone button circle, mobile
--header-height / --footer-height header and footer bars
============================================================ */
:root {
    /* ---- Big page titles (معامله، امور مالی، دارایی‌ها ...) ---- */
    --font-page-title-max: 31px;         /* desktop upper limit (was 36) */
    --font-page-title-mobile: 21px;

    /* ---- Section headings (سکه‌ها، شمش‌ها، card titles ...) ---- */
    --font-section-heading-max: 30px;    /* desktop upper limit (was 35) */
    --font-section-heading-mobile: 20px;

    /* ---- Market card heading (فروش طلای متفرقه) ---- */
    --font-market-card-title-max: 24px;
    --font-market-card-title-mobile: 17px;

    /* ---- Header phone button icon ---- */
    /* How much of the circle the icon fills. 1 = touching edges. */
    --header-phone-icon-ratio: 74%;

    /* ---- Market-card question-mark button ---- */
    --info-help-circle-size: 34px;
    --info-help-glyph-size: 22px;
    /* Moves the ؟ glyph DOWN by whole pixels; negative moves it up. */
    --info-help-glyph-drop: 1px;
    --mobile-info-help-circle-size: 28px;
    --mobile-info-help-glyph-size: 18px;

    /* ---- Market card sell button ---- */
    /* Side margins for the فروش text inside the button.
    Increase this number for more left/right space. */
    --market-sell-side-padding: 20px;
    /* Button height as a share of the price panels beside it. */
    --market-sell-height-ratio: 75%;
    /* Smaller side margins on mobile, where space is tight. */
    --mobile-market-sell-side-padding: 8px;
    /* Space between the sell button and the price divs on mobile. */
    --mobile-market-row-gap: 4px;

    /* ---- Modals (buy/sell confirmation, contact, notices, help) ---- */
    --modal-card-padding: 24px;
    --modal-title-max-size: 26px;
    --modal-text-size: 15px;
    --modal-label-size: 13px;
    --modal-input-height: 48px;
    --modal-input-font-size: 17px;
    --modal-total-value-max-size: 28px;
    --modal-button-min-height: 46px;
    --modal-button-font-size: 15px;

    /* ---- Alerts-and-tips button and modal ---- */
    --notices-button-max-width: 300px;
    --notices-button-height: 56px;
    --notices-button-font-size: 16px;
    --notices-modal-max-width: 520px;
    --notices-modal-max-height: min(78vh, 640px);
    --notices-item-font-size: 15px;
    --notices-confirm-min-width: 160px;
}


.finance-request-form {
    display: grid;
    gap: 16px;
}

.finance-request-list {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.finance-request-list-item {
    display: grid;
    gap: 8px;
    color: inherit;
    text-decoration: none;
}

.finance-request-list-item:hover,
.finance-request-list-item:focus-visible {
    outline: 2px solid rgba(255, 202, 65, 0.65);
}

.finance-history-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin: 16px 0;
}

.finance-action-button.finance-history-refresh {
    width: auto;
    min-width: 0;
    min-height: 42px;
    padding: 9px 18px;
    margin: 0;
    font-size: 14px;
}

.possessions-customer-code {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 18px;
    border: 1px solid #bf9641;
    border-radius: 10px;
    background: #302516;
    color: #fff;
}

.possessions-customer-code strong {
    color: #ffca41;
    font-size: 1.2em;
}

body.possessions-page .possessions-table td[dir="ltr"] {
    direction: ltr;
}

@media (max-width: 600px) {
    body.possessions-page .possessions-table-panel,
    body.possessions-page .possessions-table-scroll {
        width: 100%;
    }

    body.possessions-page .possessions-table {
        width: 100%;
        table-layout: fixed;
    }

    body.possessions-page .possessions-table th,
    body.possessions-page .possessions-table td,
    body.possessions-page .possessions-table td[class*="possessions-status--"] strong {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

.finance-history-filters label {
    display: grid;
    gap: 6px;
    color: #302516;
}

.finance-history-filters select {
    min-width: 180px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 202, 65, 0.45);
    border-radius: 8px;
    color: #fff;
    background: #302516;
    font: inherit;
}

.finance-history-list {
    display: grid;
    gap: 8px;
    margin: 16px 0;
}

.finance-history-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(120px, .8fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    color: #fff;
    text-align: right;
    cursor: pointer;
}

.finance-history-row > span:first-child {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.finance-history-status {
    color: #ffca41;
}

.finance-history-open {
    color: #ffca41;
    white-space: nowrap;
}

.finance-history-detail h2 {
    margin: 0 0 16px;
    color: #ffca41;
}

.finance-history-detail p {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.finance-history-detail p strong {
    text-align: left;
    overflow-wrap: anywhere;
}

.finance-receipt-form {
    display: grid;
    gap: 12px;
    margin-top: 20px;
}

.finance-receipt-preview {
    display: block;
    width: 100%;
    max-height: 70vh;
    margin-top: 16px;
    object-fit: contain;
    background: #fff;
}

/* Finance workflow surfaces keep their copy readable on the existing dark cards. */
.home-card.finance-request-form,
.finance-request-list-item,
.history-table-page > .home-card {
    color: #fff;
}

.finance-notice {
    color: #fff;
    background: #24262b;
    border: 1px solid #d5aa40;
    border-radius: 12px;
    padding: 12px 16px;
    line-height: 1.8;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
    overflow-wrap: anywhere;
}

.finance-notice[role="alert"] {
    color: #fff5f3;
    background: #3a2224;
    border-color: #eaa7a0;
}

.finance-notice a {
    color: #ffe08a;
}

.finance-notice button:not(.finance-action-button) {
    color: #fff;
    background: #383b42;
    border: 1px solid #757981;
    border-radius: 8px;
    padding: 6px 12px;
}

.finance-notice :is(a, button):focus-visible {
    outline: 2px solid #ffe08a;
    outline-offset: 3px;
}

.finance-input-error {
    display: block;
    margin-top: 4px;
    color: #ffb4ab;
    line-height: 1.6;
}

.finance-status-filters,
.finance-attachment-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0;
}

.finance-attachment-preview {
    width: min(100%, 260px);
    margin: 0;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    overflow-wrap: anywhere;
}

.finance-attachment-preview img {
    display: block;
    width: 100%;
    max-height: 220px;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
}

.finance-guide-body {
    white-space: pre-wrap;
    line-height: 1.9;
    color: #fff;
}

body.unified-home-theme .finance-request-form input,
body.unified-home-theme .finance-request-form select,
body.unified-home-theme .finance-request-form textarea {
    color: #20242a;
    background: #fff;
}

body.trade-page .trade-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 16px;
    padding: 12px 16px;
    color: #fff;
    border: 1px solid rgba(255, 202, 65, 0.45);
    border-radius: 12px;
    background: #202126;
    line-height: 1.7;
}

body.trade-page .trade-notice--info {
    border-color: rgba(100, 181, 246, 0.55);
    background: #1b222b;
}

body.trade-page .trade-notice--warning {
    color: #fff;
    border-color: rgba(255, 96, 112, .58);
    background: #292126;
}

body.trade-page .trade-notice--warning .trade-notice-copy > strong {
    color: #ff929c;
}

body.trade-page .trade-notice-icon {
    flex: 0 0 auto;
    font-size: 20px;
}

body.trade-page .trade-notice-copy {
    flex: 1 1 auto;
    min-width: 0;
}

body.trade-page .trade-notice-copy > strong {
    display: block;
    margin-bottom: 3px;
    color: #ffca41;
}

body.trade-page .trade-notice--info .trade-notice-copy > strong {
    color: #90caf9;
}

body.trade-page .trade-notice-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

body.trade-page .trade-notice-button {
    min-height: 38px;
    padding: 7px 12px;
    color: #181818;
    background: #ffca41;
    border: 0;
    border-radius: 8px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

body.trade-page .trade-notice-button--secondary {
    color: #fff;
    border: 1px solid #64b5f6;
    background: #253546;
}

body.trade-page .trade-status-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 8px auto 16px;
}

body.trade-page .trade-status-controls .trade-notices-button {
    width: auto;
    margin: 0;
}

body.trade-page .trade-market-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 42px;
    padding: 7px 12px;
    color: #fff;
    background: #242329;
    border: 1px solid rgba(255, 202, 65, .62);
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
}

body.trade-page .trade-market-status button {
    flex: 0 0 auto;
    border: 0;
    padding: 0;
    color: #ffca41;
    background: transparent;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.notices-modal-state,
.notices-modal-empty {
    margin: 0;
    padding: 12px;
    color: rgba(var(--unified-text-color), .86);
    text-align: center;
}

.notices-modal-error {
    flex: 0 0 auto;
    padding: 12px;
    color: #fff;
    background: #34242a;
    border: 1px solid rgba(255, 96, 112, .6);
    border-radius: 10px;
}

.notices-modal-error p { margin: 0 0 10px; }

.notices-modal-item--market {
    color: #fff;
    font-weight: 800;
}

.notices-modal-item--market::before { background-color: #ffca41; }

body.trade-page .trade-notice-link {
    color: #ffca41;
    text-decoration: none;
    font-weight: 700;
}

@media (max-width: 600px) {
    body.trade-page .trade-market-status {
        width: min(100%, 380px);
        justify-content: space-between;
    }
    body.trade-page .trade-notice {
        flex-wrap: wrap;
    }

    body.trade-page .trade-notice-actions {
        width: 100%;
        padding-inline-start: 32px;
    }
}

@media (max-width: 600px) {
    .finance-status-filters .finance-action-button {
        flex: 1 1 calc(50% - 12px);
        min-width: 120px;
    }

    .finance-attachment-preview {
        width: 100%;
    }

    .finance-history-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .finance-history-row > span:nth-child(2),
    .finance-history-row time {
        grid-column: 1;
    }

    .finance-history-open {
        grid-column: 2;
        grid-row: 1 / span 3;
    }

    .finance-history-filters label,
    .finance-history-filters select {
        width: 100%;
    }
}

/* Mobile keeps the market-card heading on its own smaller knob. */
@media (max-width: 720px) {
    body.trade-page .info-card-title {
        font-size: var(--font-market-card-title-mobile);
    }
}

/* Home profile source status and review-history dialog. */
.home-profile-source {
    margin: 0 0 16px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 202, 65, .42);
    border-radius: 10px;
    color: #fff;
    background: #17140f;
    line-height: 1.7;
}

.home-profile-source p { margin: 0; }
.home-profile-source--stale { border-color: rgba(255, 105, 105, .65); background: #26191a; }
.home-profile-source--fresh { border-color: rgba(255, 202, 65, .55); }
.home-account-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.home-account-heading .home-card-title { margin-bottom: 16px; }

.profile-field-source {
    display: block;
    margin-top: 3px;
    color: rgba(255, 221, 133, .88);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
}

.profile-history-modal-card {
    width: min(100%, 720px);
    max-height: 70vh;
    max-height: 70dvh;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
    color: #fff;
    background: #15120e;
    border: 1px solid rgba(255, 202, 65, .55);
}

.profile-history-modal-card .trade-modal-title {
    flex: 0 0 auto;
    margin: 0 36px;
}

.profile-history-list {
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 2px 4px;
}

.profile-history-item {
    padding: 12px 14px;
    border: 1px solid rgba(255, 202, 65, .26);
    border-radius: 10px;
    color: #fff;
    background: #211c14;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.profile-history-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 12px;
    color: #ffdc80;
}

.profile-history-item dl {
    display: grid;
    gap: 4px;
    margin: 10px 0;
}

.profile-history-item dl > div {
    display: grid;
    grid-template-columns: minmax(95px, .4fr) minmax(0, 1fr);
    gap: 8px;
}

.profile-history-item dt { color: #dec985; }
.profile-history-item dd { margin: 0; }
.profile-history-item p { margin: 8px 0 0; }
.profile-history-state { margin: 0; padding: 18px; text-align: center; }
.profile-history-error { padding: 10px 14px; color: #fff; background: #34242a; border: 1px solid rgba(255, 96, 112, .6); border-radius: 10px; }
.profile-history-error p { margin: 0; }
.profile-history-actions { flex: 0 0 auto; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }

@media (max-width: 600px) {
    .profile-history-modal-card { max-height: 70vh; max-height: 70dvh; padding: 18px 14px; }
    .profile-history-item dl > div { grid-template-columns: 1fr; gap: 0; }
    .profile-history-actions { width: 100%; }
    .profile-history-actions .trade-modal-confirm { flex: 1 1 140px; }
}

/* App release update notice and its confirmation modal. */
.app-release-card {
    max-height: 70vh;
    max-height: 70dvh;
    overflow-y: auto;
    color: #f5f1e8;
    background: #15120e;
    border: 1px solid rgba(255, 202, 65, .62);
}

.app-release-modal {
    z-index: 2000;
}

.app-release-card p {
    margin: 10px 0;
    color: #f5f1e8;
    line-height: 1.7;
}

.app-release-card [role="alert"] {
    color: #ffdc80;
}

/* App-wide installation banner */
.install-app-banner {
    box-sizing: border-box;
    width: min(100%, 1040px);
    margin: 0 auto 18px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: #f8f8f8;
    background-color: rgba(0, 0, 0, .36);
    background-image: var(--unified-section-image);
    background-position: center;
    background-size: cover;
    border: 1px solid rgba(255, 202, 65, .5);
    border-radius: 10px;
    box-shadow: 0 5px 14px rgba(0, 0, 0, .28);
    line-height: 1.65;
}

.install-app-home-button { min-height: 44px; }
.install-app-entry { width: 100%; min-height: 40px; margin: 0 0 14px; }
.install-app-status { text-align: center; }
.install-help-modal { z-index: 2100; }

.install-app-copy { min-width: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }
.install-app-title { color: #ffdc80; font-size: 16px; }
.install-app-status { color: #ffdc80; font-size: 12px; }
.install-app-status--installed { margin: 0; color: rgba(var(--home-card-heading), 1); text-align: center; }

.install-app-action,
.install-diagnostics-action {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 8px 16px;
    color: rgba(var(--unified-text-color), 1);
    background-color: rgba(0, 0, 0, .28);
    background-image: var(--unified-action-image);
    background-position: center;
    background-size: 100% 100%;
    border: 1px solid rgba(255, 202, 65, .56);
    border-radius: 8px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.install-app-action:hover,
.install-app-action:focus-visible,
.install-diagnostics-action:hover,
.install-diagnostics-action:focus-visible { color: rgba(var(--unified-action-hover-color), 1); }
.install-app-action:disabled,
.install-diagnostics-action:disabled { opacity: .7; cursor: wait; }

.install-help-card { width: min(100%, 620px); max-height: 70vh; max-height: 70dvh; overflow-y: auto; display: grid; gap: 12px; color: #fff; }
.install-help-steps { margin: 0; padding-inline-start: 24px; line-height: 1.9; }
.install-help-steps li + li { margin-top: 8px; }
.install-diagnostics { padding-top: 10px; border-top: 1px solid rgba(255, 202, 65, .28); }
.install-diagnostics summary { color: #ffdc80; font-weight: 700; cursor: pointer; }
.install-diagnostics p { margin: 8px 0; line-height: 1.7; }
.install-diagnostics-action { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.install-diagnostics-output {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-height: 160px;
    margin-top: 10px;
    padding: 10px;
    text-align: left;
    color: #f4f1e8;
    background: #0d0c0a;
    border: 1px solid rgba(255, 202, 65, .34);
    border-radius: 8px;
    font: 12px/1.55 ui-monospace, Consolas, monospace;
    user-select: text;
}

@media (max-width: 600px) {
    .install-app-banner { align-items: stretch; flex-direction: column; padding: 12px; }
    .install-app-action { width: 100%; }
    .install-help-card { max-height: 70vh; max-height: 70dvh; }
}

.possessions-table th,
.possessions-table td {
    padding-top: 12px;
    padding-bottom: 12px;
}

.possessions-table tbody td:first-child {
    font-weight: 600;
}

.possessions-table tbody td:nth-child(2) {
    direction: ltr;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.possessions-table td[class*="possessions-status--"] strong {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.possessions-table .possessions-status--owe-us strong {
    color: #ffd5d8;
    background: rgba(217, 83, 79, 0.22);
}

.possessions-table .possessions-status--we-owe strong {
    color: #c9ffdb;
    background: rgba(61, 153, 103, 0.2);
}

.possessions-table .possessions-status--settled strong {
    color: #514b3e;
    background: rgba(120, 112, 92, 0.14);
}

.history-load-more {
    min-height: 42px;
    margin: 18px auto 0;
    padding: 8px 18px;
    display: block;
    border: 1px solid rgba(var(--history-gold-line), 0.8);
    border-radius: 8px;
    color: rgba(var(--history-table-heading-color), 1);
    background: rgba(0, 0, 0, 0.5);
    font: inherit;
    cursor: pointer;
}

.history-load-more:hover,
.history-load-more:focus-visible {
    color: rgba(var(--unified-text-color), 1);
    background-image: var(--unified-action-image);
}

.history-load-more:disabled {
    opacity: 0.6;
    cursor: wait;
}

@media (max-width: 720px) {
    .trade-modal-card,
    .notices-modal-card,
    .profile-history-modal-card,
    .app-release-card,
    .install-help-card {
        max-height: min(70vh, calc(100vh - var(--pad-top) - var(--header-height) - 22px));
        max-height: min(70dvh, calc(100dvh - var(--pad-top) - var(--header-height) - 22px));
    }
}