/* ============================================================
   AbdulRehman — Crypto Market Intelligence
   File: style.css

   DESIGN DIRECTION
   ------------------------------------------------------------
   - Professional enterprise / institutional portal
   - White / light grey visual system
   - Restrained gold accent
   - No oversized typography
   - No excessively bold font
   - Mobile-first
   - 320px and above
   - No external framework
============================================================ */


/* ============================================================
   1. DESIGN TOKENS
============================================================ */

:root {

    /* Brand */
    --brand-gold: #d5a82f;
    --brand-gold-hover: #bd9020;
    --brand-gold-soft: #fbf7e9;
    --brand-gold-soft-strong: #f6edcf;

    /* Backgrounds */
    --background: #ffffff;
    --background-soft: #f7f8fa;
    --background-muted: #f2f4f7;
    --background-elevated: #ffffff;

    /* Text */
    --text-main: #1d2530;
    --text-heading: #151b23;
    --text-secondary: #606a78;
    --text-muted: #87909d;
    --text-placeholder: #a3aab4;

    /* Borders */
    --border: #e4e7ec;
    --border-light: #edf0f3;
    --border-strong: #d5dae1;
    --border-gold: #dfc77c;

    /* Semantic */
    --success: #14865c;
    --success-soft: #edf8f3;
    --success-border: #b9e4d2;

    --danger: #c84151;
    --danger-soft: #fff3f4;
    --danger-border: #f1c4ca;

    --warning: #a97107;
    --warning-soft: #fff8e7;
    --warning-border: #ebd49a;

    --info: #3568a8;
    --info-soft: #f0f5fb;
    --info-border: #cbdcf0;

    /* Shadows */
    --shadow-xs:
        0 1px 2px rgba(16, 24, 40, 0.03);

    --shadow-sm:
        0 2px 8px rgba(16, 24, 40, 0.05);

    --shadow-md:
        0 8px 24px rgba(16, 24, 40, 0.07);

    --shadow-lg:
        0 18px 48px rgba(16, 24, 40, 0.11);

    /* Radius */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* Layout */
    --container: 1180px;
    --header-height: 70px;

    /* Typography */
    --font:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition: 220ms ease;
}


/* ============================================================
   2. RESET
============================================================ */

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

html {
    margin: 0;
    padding: 0;

    scroll-behavior: smooth;

    background: var(--background);

    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;

    min-width: 320px;

    overflow-x: hidden;

    background: var(--background);

    color: var(--text-main);

    font-family: var(--font);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.modal-open {
    overflow: hidden;
}

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

button,
input,
select,
textarea {
    font: inherit;
}

button,
a,
label {
    -webkit-tap-highlight-color: transparent;
}

button {
    border: 0;
}

button,
a {
    touch-action: manipulation;
}

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

ul,
ol {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-heading);
    font-weight: 560;
    line-height: 1.25;
}

p {
    color: var(--text-secondary);
}

[hidden] {
    display: none !important;
}

::selection {
    background: var(--brand-gold-soft-strong);
    color: var(--text-heading);
}


/* ============================================================
   3. ACCESSIBILITY
============================================================ */

:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--brand-gold);
    outline-offset: 2px;
}

button:disabled,
input:disabled,
select:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}


/* ============================================================
   4. GLOBAL LAYOUT
============================================================ */

.container {
    width: min(
        calc(100% - 32px),
        var(--container)
    );

    margin-inline: auto;
}

.content-section {
    padding: 68px 0;
}

.soft-section {
    background: var(--background-soft);

    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

.section-heading {
    max-width: 700px;

    margin-bottom: 30px;
}

.section-heading h2 {
    margin-bottom: 10px;

    font-size: clamp(
        25px,
        7vw,
        36px
    );

    font-weight: 560;
    letter-spacing: -0.025em;
}

.section-heading > p:last-child {
    margin-bottom: 0;

    color: var(--text-secondary);

    font-size: 14px;
    line-height: 1.75;
}

.section-label {
    margin-bottom: 10px;

    color: #98700f;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.section-heading-row {
    display: flex;
    flex-direction: column;
    gap: 14px;

    margin-bottom: 30px;
}

.section-heading-row .section-heading {
    margin-bottom: 0;
}

.accent-text {
    color: #a77c14;
}

.text-success {
    color: var(--success) !important;
}

.text-danger {
    color: var(--danger) !important;
}

.success-text {
    color: var(--success) !important;
}


/* ============================================================
   5. COMMON BUTTONS
============================================================ */

.primary-button,
.secondary-button,
.plain-button,
.text-action,
.link-button {
    cursor: pointer;

    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}

.primary-button,
.secondary-button {
    min-height: 46px;

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

    gap: 8px;

    padding: 10px 18px;

    border-radius: var(--radius-sm);

    font-size: 14px;
    font-weight: 560;
    line-height: 1.3;
}

.primary-button {
    border: 1px solid var(--brand-gold);

    background: var(--brand-gold);

    color: #1d1a11;

    box-shadow: var(--shadow-xs);
}

.primary-button:hover {
    border-color: var(--brand-gold-hover);
    background: var(--brand-gold-hover);
}

.secondary-button {
    border: 1px solid var(--border-strong);

    background: #ffffff;

    color: var(--text-main);
}

.secondary-button:hover {
    border-color: #c3c9d1;

    background: #fafbfc;
}

.plain-button {
    min-height: 40px;

    padding: 7px 10px;

    background: transparent;

    color: var(--text-main);

    font-size: 13px;
    font-weight: 500;
}

.plain-button:hover {
    color: #8a650d;
}

.full-button {
    width: 100%;
}

.text-action,
.link-button {
    padding: 0;

    background: transparent;

    color: #8f6910;

    font-size: 13px;
    font-weight: 520;
}

.text-action:hover,
.link-button:hover {
    color: #6f500b;
}

.primary-button:active,
.secondary-button:active {
    transform: translateY(1px);
}


/* ============================================================
   6. NOSCRIPT
============================================================ */

.noscript-warning {
    position: relative;
    z-index: 50000;

    padding: 10px 14px;

    background: var(--danger-soft);

    border-bottom: 1px solid var(--danger-border);

    color: var(--danger);

    text-align: center;

    font-size: 13px;
}


/* ============================================================
   7. HEADER
============================================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    min-height: var(--header-height);

    background: rgba(255, 255, 255, 0.96);

    border-bottom: 1px solid var(--border);

    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.header-inner {
    min-height: var(--header-height);

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

    gap: 14px;
}

.brand {
    min-width: 0;

    display: inline-flex;
    flex-direction: column;

    line-height: 1.15;
}

.brand-name {
    color: var(--text-heading);

    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.brand-description {
    margin-top: 4px;

    color: var(--text-muted);

    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.06em;
}

.desktop-nav {
    display: none;
}

.header-actions {
    display: flex;
    align-items: center;

    gap: 7px;
}

.language-button {
    min-width: 38px;
    height: 38px;

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

    padding: 0 9px;

    border: 1px solid var(--border);
    border-radius: var(--radius-sm);

    background: #ffffff;

    color: var(--text-secondary);

    cursor: pointer;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.language-button:hover {
    border-color: var(--border-gold);

    background: var(--brand-gold-soft);
}

.header-auth-actions {
    display: none;
}

.header-create-button {
    display: none;
}


/* ============================================================
   8. MOBILE MENU BUTTON
============================================================ */

.mobile-menu-button {
    width: 40px;
    height: 40px;

    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 4.5px;

    border: 1px solid var(--border);
    border-radius: var(--radius-sm);

    background: #ffffff;

    cursor: pointer;
}

.mobile-menu-button span {
    width: 17px;
    height: 1.5px;

    border-radius: 10px;

    background: #414955;

    transition:
        transform var(--transition),
        opacity var(--transition);
}

.mobile-menu-button.is-active span:nth-child(1) {
    transform:
        translateY(6px)
        rotate(45deg);
}

.mobile-menu-button.is-active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-button.is-active span:nth-child(3) {
    transform:
        translateY(-6px)
        rotate(-45deg);
}


/* ============================================================
   9. MOBILE NAVIGATION
============================================================ */

.mobile-navigation {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    max-height: calc(100dvh - var(--header-height));

    overflow-y: auto;

    padding: 8px 0 20px;

    background: #ffffff;

    border-bottom: 1px solid var(--border);

    box-shadow: var(--shadow-md);
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
}

.mobile-nav-links a {
    min-height: 47px;

    display: flex;
    align-items: center;

    border-bottom: 1px solid var(--border-light);

    color: var(--text-main);

    font-size: 14px;
    font-weight: 450;
}

.mobile-nav-links a:hover {
    color: #84620f;
}

.mobile-account-actions {
    display: grid;
    gap: 9px;

    margin-top: 18px;
}


/* ============================================================
   10. ACCOUNT MENU
============================================================ */

.account-menu {
    position: relative;
}

.account-menu-button {
    min-height: 40px;

    display: flex;
    align-items: center;

    gap: 7px;

    padding: 4px 8px 4px 4px;

    border: 1px solid var(--border);
    border-radius: var(--radius-sm);

    background: #ffffff;

    cursor: pointer;

    color: var(--text-main);
}

.account-avatar {
    width: 30px;
    height: 30px;

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

    flex: 0 0 auto;

    border-radius: 7px;

    background: var(--brand-gold-soft-strong);

    color: #70530d;

    font-size: 12px;
    font-weight: 600;
}

.account-menu-name {
    display: none;

    max-width: 90px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 12px;
    font-weight: 520;
}

.account-menu-chevron {
    color: var(--text-muted);

    font-size: 11px;
}

.account-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;

    width: min(
        285px,
        calc(100vw - 32px)
    );

    padding: 8px;

    border: 1px solid var(--border);
    border-radius: var(--radius-md);

    background: #ffffff;

    box-shadow: var(--shadow-lg);
}

.account-dropdown-profile {
    padding: 10px 10px 13px;

    display: flex;
    flex-direction: column;

    gap: 2px;

    border-bottom: 1px solid var(--border-light);
}

.account-dropdown-profile strong {
    color: var(--text-heading);

    font-size: 13px;
    font-weight: 560;
}

.account-dropdown-profile span {
    overflow-wrap: anywhere;

    color: var(--text-muted);

    font-size: 11px;
}

.account-dropdown-membership {
    margin: 8px 0;

    padding: 10px;

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

    gap: 15px;

    border-radius: 7px;

    background: var(--background-soft);
}

.account-dropdown-membership span {
    color: var(--text-secondary);

    font-size: 11px;
}

.membership-status {
    color: var(--text-secondary);

    font-size: 11px;
    font-weight: 600;
}

.membership-status[data-membership-status="premium"] {
    color: #88650f;
}

.membership-status[data-membership-status="pending"] {
    color: var(--warning);
}

.account-dropdown-link {
    width: 100%;
    min-height: 41px;

    display: flex;
    align-items: center;

    padding: 0 10px;

    border-radius: 6px;

    background: transparent;

    color: var(--text-main);

    cursor: pointer;

    text-align: left;

    font-size: 12px;
    font-weight: 450;
}

.account-dropdown-link:hover {
    background: var(--background-soft);
}

.account-dropdown-logout {
    color: var(--danger);
}


/* ============================================================
   11. HERO
============================================================ */

.hero-section {
    position: relative;

    overflow: hidden;

    padding: 70px 0 66px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfcfd 100%
        );

    border-bottom: 1px solid var(--border-light);
}

.hero-section::after {
    content: "";

    position: absolute;

    width: 340px;
    height: 340px;

    right: -170px;
    top: -150px;

    border-radius: 50%;

    background: rgba(213, 168, 47, 0.055);

    pointer-events: none;
}

.hero-layout {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1fr;

    gap: 38px;
}

.hero-copy {
    max-width: 650px;
}

.hero-copy h1 {
    max-width: 650px;

    margin-bottom: 18px;

    font-size: clamp(
        34px,
        10vw,
        54px
    );

    font-weight: 540;
    letter-spacing: -0.04em;
    line-height: 1.12;
}

.hero-copy h1 > span {
    display: block;
}

.hero-summary {
    max-width: 600px;

    margin-bottom: 26px;

    color: var(--text-secondary);

    font-size: 15px;
    line-height: 1.8;
}

.hero-actions {
    display: flex;
    flex-direction: column;

    gap: 9px;

    max-width: 360px;
}

.hero-actions > * {
    width: 100%;
}

.hero-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 0;

    margin-top: 34px;

    padding-top: 22px;

    border-top: 1px solid var(--border);
}

.hero-facts > div {
    min-width: 0;

    padding-right: 10px;
}

.hero-facts > div + div {
    padding-left: 13px;

    border-left: 1px solid var(--border-light);
}

.hero-facts strong {
    display: block;

    margin-bottom: 2px;

    color: var(--text-heading);

    font-size: 16px;
    font-weight: 560;
}

.hero-facts span {
    display: block;

    color: var(--text-muted);

    font-size: 9px;
    line-height: 1.45;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}


/* ============================================================
   12. HERO MARKET CARD
============================================================ */

.market-summary-card {
    width: 100%;

    padding: 20px;

    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

    background: #ffffff;

    box-shadow: var(--shadow-sm);
}

.market-summary-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;
}

.market-summary-header > div {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.market-summary-header span {
    color: var(--text-muted);

    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.03em;
}

.market-summary-header strong {
    color: var(--text-heading);

    font-size: 14px;
    font-weight: 570;
}

.live-status {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    padding: 5px 8px;

    border: 1px solid var(--success-border);
    border-radius: 999px;

    background: var(--success-soft);

    color: var(--success) !important;

    font-size: 9px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
}

.live-status::before {
    content: "";

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--success);
}

.market-summary-price {
    display: flex;
    align-items: baseline;

    gap: 10px;

    margin-top: 25px;
}

.market-summary-price strong {
    color: var(--text-heading);

    font-size: clamp(
        28px,
        9vw,
        38px
    );

    font-weight: 540;
    letter-spacing: -0.035em;
}

.market-summary-price span {
    color: var(--success);

    font-size: 12px;
    font-weight: 560;
}

.market-chart {
    height: 178px;

    margin: 12px -2px 4px;

    color: #ba8b19;
}

.market-chart svg {
    width: 100%;
    height: 100%;
}

.market-summary-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 12px;

    padding-top: 16px;

    border-top: 1px solid var(--border-light);
}

.market-summary-footer > div {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.market-summary-footer span {
    color: var(--text-muted);

    font-size: 10px;
}

.market-summary-footer strong {
    color: var(--text-main);

    font-size: 12px;
    font-weight: 550;
}


/* ============================================================
   13. MARKET UPDATE CARDS
============================================================ */

.updates-grid {
    display: grid;
    grid-template-columns: 1fr;

    gap: 12px;
}

.update-card,
.loading-card {
    min-height: 205px;

    padding: 20px;

    border: 1px solid var(--border);
    border-radius: var(--radius-md);

    background: #ffffff;

    box-shadow: var(--shadow-xs);
}

.update-card h3 {
    margin-bottom: 9px;

    color: var(--text-heading);

    font-size: 17px;
    font-weight: 550;
}

.update-card p {
    color: var(--text-secondary);

    font-size: 13px;
    line-height: 1.7;
}

.loading-line {
    position: relative;

    width: 100%;
    height: 9px;

    margin-bottom: 10px;

    overflow: hidden;

    border-radius: 30px;

    background: #eceff3;
}

.loading-line::after {
    content: "";

    position: absolute;
    inset: 0;

    transform: translateX(-100%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.9),
            transparent
        );

    animation:
        loadingSweep
        1.45s
        infinite;
}

.loading-line-small {
    width: 24%;

    margin-bottom: 24px;
}

.loading-line-title {
    width: 68%;
    height: 15px;

    margin-bottom: 18px;
}

@keyframes loadingSweep {
    100% {
        transform: translateX(100%);
    }
}


/* ============================================================
   14. PREMIUM RESTRICTED PANELS
============================================================ */

.restricted-panel {
    max-width: 760px;

    padding: 32px 22px;

    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

    background: #ffffff;

    box-shadow: var(--shadow-xs);
}

.restricted-panel-label {
    display: inline-flex;

    margin-bottom: 14px;

    padding: 5px 8px;

    border: 1px solid #ead897;
    border-radius: 6px;

    background: var(--brand-gold-soft);

    color: #84620f;

    font-size: 10px;
    font-weight: 580;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.restricted-panel h3 {
    max-width: 560px;

    margin-bottom: 9px;

    font-size: 21px;
    font-weight: 550;
}

.restricted-panel p {
    max-width: 610px;

    margin-bottom: 20px;

    color: var(--text-secondary);

    font-size: 13px;
}


/* ============================================================
   15. SIGNAL CARDS
   Also supports dynamically rendered app.js content.
============================================================ */

.signals-grid {
    display: grid;
    grid-template-columns: 1fr;

    gap: 12px;
}

.signal-card {
    padding: 19px;

    border: 1px solid var(--border);
    border-radius: var(--radius-md);

    background: #ffffff;

    box-shadow: var(--shadow-xs);
}

.signal-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;

    margin-bottom: 17px;
}

.signal-card__header > div {
    display: flex;
    flex-direction: column;
}

.signal-pair {
    color: var(--text-heading);

    font-size: 14px;
    font-weight: 580;
}

.signal-market {
    margin-top: 2px;

    color: var(--text-muted);

    font-size: 9px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.signal-direction {
    display: inline-flex;

    padding: 5px 8px;

    border-radius: 5px;

    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.signal-direction--long {
    border: 1px solid var(--success-border);

    background: var(--success-soft);

    color: var(--success);
}

.signal-direction--short {
    border: 1px solid var(--danger-border);

    background: var(--danger-soft);

    color: var(--danger);
}

.signal-card__price-row {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 10px;

    padding: 13px 0;

    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

.signal-card__price-row > div {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.signal-card__price-row span {
    color: var(--text-muted);

    font-size: 9px;
}

.signal-card__price-row strong {
    color: var(--text-heading);

    font-size: 12px;
    font-weight: 550;
}

.signal-targets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 7px;

    margin: 14px 0;
}

.signal-targets span {
    min-width: 0;

    padding: 8px;

    display: flex;
    flex-direction: column;

    border-radius: 6px;

    background: var(--background-soft);

    color: var(--text-muted);

    font-size: 9px;
}

.signal-targets strong {
    overflow: hidden;
    text-overflow: ellipsis;

    color: var(--text-main);

    font-size: 10px;
    font-weight: 520;
}

.signal-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    color: var(--text-muted);

    font-size: 9px;
}

.signal-status {
    color: #89660e;

    font-weight: 550;
}


/* ============================================================
   16. PRIVATE FEED
============================================================ */

.private-feed {
    max-width: 800px;
}

.private-feed-item {
    padding: 20px;

    border: 1px solid var(--border);
    border-radius: var(--radius-md);

    background: #ffffff;

    box-shadow: var(--shadow-xs);
}

.private-feed-item__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;

    padding-bottom: 13px;

    border-bottom: 1px solid var(--border-light);
}

.private-feed-item__header > div {
    display: flex;
    flex-direction: column;
}

.private-feed-item__header strong {
    color: var(--text-heading);

    font-size: 13px;
    font-weight: 560;
}

.verified-author {
    color: #8d6710;

    font-size: 9px;
}

.private-feed-item__header time {
    color: var(--text-muted);

    font-size: 9px;
}

.private-feed-item p {
    margin: 14px 0 0;

    color: var(--text-secondary);

    font-size: 13px;
}


/* ============================================================
   17. NEWS
============================================================ */

.news-layout {
    display: grid;
    grid-template-columns: 1fr;

    gap: 12px;
}

.featured-news-card {
    min-height: 280px;

    padding: 22px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border: 1px solid var(--border);
    border-radius: var(--radius-md);

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #fcfbf6
        );

    box-shadow: var(--shadow-xs);
}

.featured-news-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
}

.featured-news-meta span {
    color: #8b660f;

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.featured-news-meta time {
    color: var(--text-muted);

    font-size: 9px;
}

.featured-news-card h3 {
    margin-bottom: 9px;

    font-size: 23px;
    font-weight: 550;
    letter-spacing: -0.02em;
}

.featured-news-card p {
    margin-bottom: 0;

    color: var(--text-secondary);

    font-size: 13px;
    line-height: 1.7;
}

.news-list {
    display: grid;

    gap: 9px;
}

.news-list-item {
    min-height: 92px;

    padding: 15px 16px;

    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "category time"
        "title time";

    gap: 3px 12px;

    border: 1px solid var(--border);
    border-radius: var(--radius-sm);

    background: #ffffff;

    box-shadow: var(--shadow-xs);
}

.news-list-item > span {
    grid-area: category;

    color: #8c6710;

    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.news-list-item h3 {
    grid-area: title;

    margin: 0;

    align-self: end;

    font-size: 14px;
    font-weight: 520;
}

.news-list-item time {
    grid-area: time;

    align-self: center;

    color: var(--text-muted);

    font-size: 9px;
}


/* ============================================================
   18. PREMIUM MEMBERSHIP SECTION
============================================================ */

.membership-layout {
    display: grid;
    grid-template-columns: 1fr;

    gap: 18px;
}

.membership-information {
    padding: 25px;

    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

    background: #ffffff;

    box-shadow: var(--shadow-xs);
}

.membership-information h2 {
    margin-bottom: 10px;

    font-size: clamp(
        26px,
        7vw,
        36px
    );

    font-weight: 550;
    letter-spacing: -0.025em;
}

.membership-introduction {
    max-width: 650px;

    margin-bottom: 25px;

    color: var(--text-secondary);

    font-size: 13px;
    line-height: 1.75;
}

.membership-price {
    display: flex;
    align-items: baseline;

    gap: 10px;

    margin-bottom: 24px;
}

.membership-price strong {
    color: var(--text-heading);

    font-size: 38px;
    font-weight: 540;
    letter-spacing: -0.03em;
}

.membership-price span {
    color: var(--text-muted);

    font-size: 12px;
}

.membership-benefits {
    display: grid;

    gap: 10px;

    margin-bottom: 25px;
}

.membership-benefits li {
    position: relative;

    padding-left: 22px;

    color: var(--text-main);

    font-size: 13px;
}

.membership-benefits li::before {
    content: "✓";

    position: absolute;
    left: 0;
    top: 0;

    color: var(--success);

    font-size: 12px;
    font-weight: 600;
}

.membership-account-card {
    padding: 22px;

    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

    background: #ffffff;

    box-shadow: var(--shadow-xs);
}

.membership-account-card > span {
    display: block;

    margin-bottom: 9px;

    color: var(--text-muted);

    font-size: 10px;
    font-weight: 550;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.membership-account-card > strong {
    display: block;

    margin-bottom: 7px;

    color: var(--text-heading);

    font-size: 24px;
    font-weight: 550;
}

.membership-account-card p {
    margin-bottom: 18px;

    color: var(--text-secondary);

    font-size: 12px;
    line-height: 1.7;
}


/* ============================================================
   19. SUPPORT PANEL
============================================================ */

.support-panel {
    display: grid;
    grid-template-columns: 1fr;

    gap: 22px;

    padding: 26px;

    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

    background: #ffffff;

    box-shadow: var(--shadow-xs);
}

.support-panel h2 {
    margin-bottom: 9px;

    font-size: clamp(
        24px,
        7vw,
        32px
    );

    font-weight: 550;
}

.support-panel p:last-child {
    max-width: 650px;

    margin-bottom: 0;

    color: var(--text-secondary);

    font-size: 13px;
}


/* ============================================================
   20. FAQ
============================================================ */

.faq-list {
    max-width: 840px;

    border-top: 1px solid var(--border);
}

.faq-item {
    border-bottom: 1px solid var(--border);
}

.faq-question {
    width: 100%;
    min-height: 64px;

    padding: 15px 0;

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

    gap: 18px;

    background: transparent;

    color: var(--text-main);

    cursor: pointer;

    text-align: left;

    font-size: 13px;
    font-weight: 520;
}

.faq-question:hover {
    color: #7f5c09;
}

.faq-symbol,
.faq-icon {
    width: 26px;
    height: 26px;

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

    flex: 0 0 auto;

    border: 1px solid var(--border);
    border-radius: 50%;

    color: #80600f;

    font-size: 16px;
    font-weight: 400;

    transition: transform var(--transition);
}

.faq-question[aria-expanded="true"]
.faq-symbol,
.faq-question[aria-expanded="true"]
.faq-icon {
    transform: rotate(45deg);
}

.faq-answer {
    padding:
        0 0
        18px;
}

.faq-answer p {
    max-width: 700px;

    margin-bottom: 0;

    color: var(--text-secondary);

    font-size: 12px;
    line-height: 1.75;
}


/* ============================================================
   21. FOOTER
============================================================ */

.site-footer {
    padding:
        50px 0
        max(
            24px,
            env(safe-area-inset-bottom)
        );

    background: #f7f8fa;

    border-top: 1px solid var(--border);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;

    gap: 30px;
}

.footer-brand {
    max-width: 400px;
}

.footer-brand strong {
    display: block;

    margin-bottom: 8px;

    color: var(--text-heading);

    font-size: 17px;
    font-weight: 580;
}

.footer-brand p {
    margin-bottom: 0;

    color: var(--text-secondary);

    font-size: 12px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 9px;
}

.footer-column > strong {
    margin-bottom: 3px;

    color: var(--text-heading);

    font-size: 12px;
    font-weight: 570;
}

.footer-column a,
.footer-column button {
    padding: 0;

    background: transparent;

    color: var(--text-secondary);

    cursor: pointer;

    font-size: 11px;
    font-weight: 430;
}

.footer-column a:hover,
.footer-column button:hover {
    color: #7c5908;
}

.footer-risk {
    margin-top: 38px;

    padding: 16px 0;

    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.footer-risk strong {
    display: block;

    margin-bottom: 4px;

    color: var(--text-main);

    font-size: 11px;
    font-weight: 560;
}

.footer-risk p {
    margin-bottom: 0;

    color: var(--text-muted);

    font-size: 10px;
    line-height: 1.7;
}

.footer-bottom {
    display: flex;
    flex-direction: column;

    gap: 5px;

    padding-top: 16px;

    color: var(--text-muted);

    font-size: 10px;
}


/* ============================================================
   22. GENERIC MODAL SYSTEM
============================================================ */

.modal {
    position: fixed;
    inset: 0;

    z-index: 15000;

    padding:
        max(
            14px,
            env(safe-area-inset-top)
        )
        14px
        max(
            14px,
            env(safe-area-inset-bottom)
        );

    overflow-y: auto;

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

.modal-backdrop {
    position: fixed;
    inset: 0;

    background: rgba(24, 32, 43, 0.42);

    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.window-close-button {
    position: absolute;
    top: 13px;
    right: 13px;

    width: 34px;
    height: 34px;

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

    border: 1px solid var(--border);
    border-radius: var(--radius-sm);

    background: #ffffff;

    color: var(--text-secondary);

    cursor: pointer;

    font-size: 20px;
    font-weight: 300;
    line-height: 1;
}

.window-close-button:hover {
    background: var(--background-soft);

    color: var(--text-heading);
}


/* ============================================================
   23. LOGIN WINDOW
   Deliberately separate visual language from registration wizard
============================================================ */

.login-window {
    position: relative;
    z-index: 2;

    width: min(
        100%,
        440px
    );

    max-height: calc(100dvh - 28px);

    overflow-y: auto;

    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

    background: #ffffff;

    box-shadow: var(--shadow-lg);
}

.login-window-header {
    padding: 24px 54px 18px 22px;

    border-bottom: 1px solid var(--border-light);

    background: #fafbfc;
}

.login-brand {
    display: block;

    margin-bottom: 2px;

    color: var(--text-heading);

    font-size: 17px;
    font-weight: 590;
}

.login-window-header p {
    margin-bottom: 0;

    color: var(--text-muted);

    font-size: 10px;
    letter-spacing: 0.03em;
}

.login-window-body {
    padding: 23px 21px 22px;
}

.login-heading {
    margin-bottom: 21px;
}

.login-heading h2 {
    margin-bottom: 6px;

    font-size: 23px;
    font-weight: 550;
}

.login-heading p {
    margin-bottom: 0;

    color: var(--text-secondary);

    font-size: 12px;
}

.login-create-account {
    margin-top: 19px;

    padding-top: 16px;

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

    gap: 5px;

    border-top: 1px solid var(--border-light);

    color: var(--text-secondary);

    font-size: 11px;
}

.login-create-account button {
    padding: 0;

    background: transparent;

    color: #82600c;

    cursor: pointer;

    font-size: inherit;
    font-weight: 560;
}


/* ============================================================
   24. COMMON ACCOUNT FORMS
============================================================ */

.account-form,
.payment-proof-form {
    display: grid;

    gap: 16px;
}

.form-field {
    display: flex;
    flex-direction: column;

    gap: 6px;
}

.form-field label {
    color: var(--text-main);

    font-size: 11px;
    font-weight: 540;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    min-height: 45px;

    padding: 10px 12px;

    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);

    outline: none;

    background: #ffffff;

    color: var(--text-main);

    font-size: 13px;
    font-weight: 400;

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background-color var(--transition-fast);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: var(--text-placeholder);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: #c7a448;

    box-shadow:
        0 0 0 3px rgba(213, 168, 47, 0.11);
}

.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"] {
    border-color: #dc8791;
}

.field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;
}

.field-help {
    color: var(--text-muted);

    font-size: 9px;
}

.field-error {
    color: var(--danger);

    font-size: 9px;
}

.field-error:empty {
    display: none;
}

.password-field {
    position: relative;
}

.password-field input {
    padding-right: 62px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;

    transform: translateY(-50%);

    min-width: 46px;
    height: 30px;

    padding: 0 7px;

    border-radius: 5px;

    background: transparent;

    color: #86620e;

    cursor: pointer;

    font-size: 10px;
    font-weight: 550;
}

.remember-session,
.terms-confirmation,
.payment-confirmation-checkbox {
    display: flex;
    align-items: flex-start;

    gap: 8px;

    cursor: pointer;

    color: var(--text-secondary);

    font-size: 10px;
    line-height: 1.6;
}

.remember-session input,
.terms-confirmation input,
.payment-confirmation-checkbox input {
    width: 15px;
    height: 15px;

    margin: 1px 0 0;

    flex: 0 0 auto;

    accent-color: var(--brand-gold);
}

.form-status {
    font-size: 11px;
    line-height: 1.55;
}

.form-status.is-error {
    padding: 9px 10px;

    border: 1px solid var(--danger-border);
    border-radius: 6px;

    background: var(--danger-soft);

    color: var(--danger);
}

.form-status.is-success {
    padding: 9px 10px;

    border: 1px solid var(--success-border);
    border-radius: 6px;

    background: var(--success-soft);

    color: var(--success);
}


/* Compatibility with current app.js */
.auth-form {
    display: grid;

    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;

    gap: 6px;
}

.form-group label,
.form-label-row label {
    color: var(--text-main);

    font-size: 11px;
    font-weight: 540;
}

.form-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 12px;
}

.form-group input,
.form-group select {
    width: 100%;
    min-height: 45px;

    padding: 10px 12px;

    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);

    background: #ffffff;

    color: var(--text-main);

    outline: none;
}

.form-group input:focus,
.form-group select:focus {
    border-color: #c7a448;

    box-shadow:
        0 0 0 3px rgba(213, 168, 47, 0.11);
}

.form-error {
    color: var(--danger);

    font-size: 9px;
}

.form-error:empty {
    display: none;
}

.form-hint {
    color: var(--text-muted);

    font-size: 9px;
}


/* ============================================================
   25. REGISTRATION WINDOW
============================================================ */

.registration-window {
    position: relative;
    z-index: 2;

    width: min(
        100%,
        760px
    );

    max-height: calc(100dvh - 28px);

    overflow-y: auto;

    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

    background: #ffffff;

    box-shadow: var(--shadow-lg);
}

.registration-progress {
    padding:
        20px 54px
        20px 20px;

    display: grid;
    grid-template-columns:
        auto
        minmax(12px, 1fr)
        auto
        minmax(12px, 1fr)
        auto;

    align-items: center;

    border-bottom: 1px solid var(--border-light);

    background: #fafbfc;
}

.registration-progress-step {
    display: flex;
    align-items: center;

    gap: 7px;

    min-width: 0;

    color: var(--text-muted);
}

.registration-progress-step > span {
    width: 26px;
    height: 26px;

    flex: 0 0 auto;

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

    border: 1px solid var(--border-strong);
    border-radius: 50%;

    background: #ffffff;

    font-size: 10px;
    font-weight: 560;
}

.registration-progress-step > div {
    display: none;
}

.registration-progress-step strong {
    display: block;

    color: inherit;

    font-size: 10px;
    font-weight: 560;
}

.registration-progress-step small {
    display: block;

    color: var(--text-muted);

    font-size: 8px;
}

.registration-progress-step.is-active {
    color: #79580a;
}

.registration-progress-step.is-active > span {
    border-color: var(--brand-gold);

    background: var(--brand-gold-soft);

    color: #73530b;
}

.registration-progress-step.is-complete > span {
    border-color: var(--success-border);

    background: var(--success-soft);

    color: var(--success);
}

.registration-progress-line {
    height: 1px;

    margin: 0 5px;

    background: var(--border);
}

.registration-step {
    padding: 25px 20px 26px;
}

.registration-step-header {
    max-width: 590px;

    margin-bottom: 23px;
}

.step-caption {
    display: block;

    margin-bottom: 8px;

    color: #8a6610;

    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.1em;
}

.registration-step-header h2 {
    margin-bottom: 7px;

    font-size: 24px;
    font-weight: 550;
}

.registration-step-header p {
    margin-bottom: 0;

    color: var(--text-secondary);

    font-size: 12px;
    line-height: 1.7;
}

.registration-login-option {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 5px;

    margin-top: 19px;

    padding-top: 16px;

    border-top: 1px solid var(--border-light);

    color: var(--text-secondary);

    font-size: 10px;
}

.registration-login-option button {
    padding: 0;

    background: transparent;

    color: #80600d;

    cursor: pointer;

    font-size: inherit;
    font-weight: 560;
}


/* ============================================================
   26. PAYMENT SUMMARY
============================================================ */

.payment-summary {
    display: grid;
    grid-template-columns: 1fr;

    margin-bottom: 16px;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: var(--radius-md);

    background: #ffffff;
}

.payment-summary > div {
    padding: 13px 14px;

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

    gap: 18px;
}

.payment-summary > div + div {
    border-top: 1px solid var(--border-light);
}

.payment-summary span {
    color: var(--text-muted);

    font-size: 10px;
}

.payment-summary strong {
    color: var(--text-main);

    text-align: right;

    font-size: 12px;
    font-weight: 560;
}


/* ============================================================
   27. PAYMENT WINDOW TIMER
============================================================ */

.payment-window {
    margin-bottom: 25px;

    padding: 14px;

    border: 1px solid var(--warning-border);
    border-radius: var(--radius-md);

    background: var(--warning-soft);
}

.payment-window > div {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
}

.payment-window span {
    color: #79560a;

    font-size: 11px;
    font-weight: 530;
}

.payment-window strong {
    color: #6f4e06;

    font-size: 19px;
    font-weight: 560;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}

.payment-window p {
    margin:
        7px 0
        0;

    color: #8b6d29;

    font-size: 9px;
    line-height: 1.6;
}


/* ============================================================
   28. PAYMENT SECTION HEADINGS
============================================================ */

.payment-section-heading {
    margin-bottom: 13px;
}

.payment-section-heading h3 {
    margin-bottom: 4px;

    font-size: 15px;
    font-weight: 560;
}

.payment-section-heading p {
    margin-bottom: 0;

    color: var(--text-muted);

    font-size: 10px;
}


/* ============================================================
   29. PAYMENT METHOD OPTIONS
============================================================ */

.payment-method-selection {
    margin-bottom: 24px;
}

.payment-method-options {
    display: grid;
    grid-template-columns: 1fr;

    gap: 9px;
}

.payment-method-option {
    position: relative;

    min-height: 64px;

    padding: 12px;

    display: flex;
    align-items: center;

    gap: 10px;

    border: 1px solid var(--border);
    border-radius: var(--radius-sm);

    background: #ffffff;

    cursor: pointer;

    transition:
        border-color var(--transition-fast),
        background-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.payment-method-option:hover {
    border-color: #d7c171;

    background: #fffdf8;
}

.payment-method-option:has(input:checked) {
    border-color: #c9a136;

    background: var(--brand-gold-soft);

    box-shadow:
        0 0 0 2px rgba(213, 168, 47, 0.08);
}

.payment-method-option input {
    width: 15px;
    height: 15px;

    flex: 0 0 auto;

    accent-color: var(--brand-gold);
}

.payment-method-option > span {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.payment-method-option strong {
    color: var(--text-main);

    font-size: 12px;
    font-weight: 560;
}

.payment-method-option small {
    margin-top: 2px;

    color: var(--text-muted);

    font-size: 9px;
}


/* ============================================================
   30. SELECTED PAYMENT DETAILS
============================================================ */

.selected-payment-details {
    margin-bottom: 25px;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: var(--radius-md);

    background: #ffffff;
}

.payment-detail-header {
    padding: 13px 14px;

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

    gap: 15px;

    border-bottom: 1px solid var(--border-light);

    background: #fafbfc;
}

.payment-detail-header > div {
    display: flex;
    flex-direction: column;
}

.payment-detail-header span {
    color: var(--text-muted);

    font-size: 9px;
}

.payment-detail-header strong {
    color: var(--text-heading);

    font-size: 12px;
    font-weight: 560;
}

.payment-required-amount {
    flex: 0 0 auto;

    padding: 5px 8px;

    border: 1px solid #e5cf86;
    border-radius: 5px;

    background: var(--brand-gold-soft);

    color: #79590b !important;

    font-size: 10px !important;
    font-weight: 600 !important;
}

.payment-instructions {
    padding: 14px;
}

.payment-instructions-row {
    padding: 10px 0;

    display: flex;
    flex-direction: column;

    gap: 4px;

    border-bottom: 1px solid var(--border-light);
}

.payment-instructions-row:first-child {
    padding-top: 0;
}

.payment-instructions-row:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}

.payment-instructions-row span {
    color: var(--text-muted);

    font-size: 9px;
}

.payment-instructions-row strong,
.payment-instructions-row code {
    overflow-wrap: anywhere;
    word-break: break-word;

    color: var(--text-main);

    font-size: 11px;
    font-weight: 520;
}

.payment-instructions-row code {
    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;
}

.payment-instructions-row .copy-button {
    margin-top: 5px;
}

.payment-rule-note {
    padding: 12px 14px;

    border-top: 1px solid var(--border-light);

    background: #fffdf8;
}

.payment-rule-note strong {
    color: #74550a;

    font-size: 10px;
    font-weight: 570;
}

.payment-rule-note p {
    margin:
        3px 0
        0;

    color: #826b37;

    font-size: 9px;
    line-height: 1.65;
}


/* ============================================================
   31. PAYMENT PROOF FORM
============================================================ */

.payment-proof-form {
    padding-top: 23px;

    border-top: 1px solid var(--border);
}


/* ============================================================
   32. SCREENSHOT UPLOAD
============================================================ */

.screenshot-upload {
    min-height: 132px;

    padding: 18px 14px;

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

    gap: 4px;

    border: 1px dashed #bec5ce;
    border-radius: var(--radius-md);

    background: #fafbfc;

    cursor: pointer;

    text-align: center;

    transition:
        border-color var(--transition-fast),
        background-color var(--transition-fast);
}

.screenshot-upload:hover {
    border-color: #c9a13a;

    background: #fffdf8;
}

.screenshot-upload-title {
    color: var(--text-main);

    font-size: 12px;
    font-weight: 550;
}

.screenshot-upload-help {
    max-width: 310px;

    color: var(--text-muted);

    font-size: 9px;
}

.screenshot-upload-button {
    margin-top: 9px;

    padding: 6px 10px;

    border: 1px solid var(--border-strong);
    border-radius: 5px;

    background: #ffffff;

    color: var(--text-main);

    font-size: 9px;
    font-weight: 540;
}

.screenshot-preview {
    margin-top: 8px;

    padding: 10px;

    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);

    gap: 10px;

    align-items: center;

    border: 1px solid var(--border);
    border-radius: var(--radius-sm);

    background: var(--background-soft);
}

.screenshot-preview img {
    width: 62px;
    height: 62px;

    border: 1px solid var(--border);
    border-radius: 6px;

    object-fit: cover;

    background: #ffffff;
}

.screenshot-preview > div {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.screenshot-preview strong {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    color: var(--text-main);

    font-size: 10px;
    font-weight: 540;
}

.screenshot-preview button {
    align-self: flex-start;

    padding: 0;

    background: transparent;

    color: var(--danger);

    cursor: pointer;

    font-size: 9px;
    font-weight: 520;
}


/* ============================================================
   33. COPY BUTTON
============================================================ */

.copy-button {
    min-height: 30px;

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

    justify-self: flex-start;

    padding: 5px 9px;

    border: 1px solid var(--border-strong);
    border-radius: 5px;

    background: #ffffff;

    color: #765709;

    cursor: pointer;

    font-size: 9px;
    font-weight: 550;
}

.copy-button:hover {
    border-color: #c9a13a;

    background: var(--brand-gold-soft);
}


/* ============================================================
   34. VERIFICATION STATUS
============================================================ */

.verification-status-panel {
    max-width: 600px;

    margin-inline: auto;
}

.verification-processing,
.verification-success,
.verification-pending {
    text-align: center;
}

.verification-spinner {
    width: 38px;
    height: 38px;

    margin:
        0 auto
        17px;

    border: 3px solid #eceef1;
    border-top-color: var(--brand-gold);

    border-radius: 50%;

    animation:
        verificationSpin
        0.85s
        linear
        infinite;
}

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

.verification-processing h2,
.verification-success h2,
.verification-pending h2 {
    margin-bottom: 7px;

    font-size: 24px;
    font-weight: 550;
}

.verification-processing > p,
.verification-success > p,
.verification-pending > p {
    max-width: 490px;

    margin:
        0 auto
        20px;

    color: var(--text-secondary);

    font-size: 11px;
    line-height: 1.7;
}

.verification-timer-box {
    max-width: 360px;

    margin:
        0 auto
        19px;

    padding: 12px 14px;

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

    gap: 20px;

    border: 1px solid var(--border);
    border-radius: var(--radius-sm);

    background: #fafbfc;
}

.verification-timer-box span {
    color: var(--text-secondary);

    text-align: left;

    font-size: 10px;
}

.verification-timer-box strong {
    color: var(--text-heading);

    font-size: 18px;
    font-weight: 560;
    font-variant-numeric: tabular-nums;
}

.verification-check-list {
    max-width: 480px;

    margin-inline: auto;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: var(--radius-md);

    background: #ffffff;

    text-align: left;
}

.verification-check-item {
    padding: 12px 13px;

    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);

    gap: 9px;

    align-items: center;
}

.verification-check-item + .verification-check-item {
    border-top: 1px solid var(--border-light);
}

.verification-check-item > span {
    width: 24px;
    height: 24px;

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

    border-radius: 50%;

    background: var(--background-muted);

    color: var(--text-muted);

    font-size: 10px;
    font-weight: 600;
}

.verification-check-item > div {
    display: flex;
    flex-direction: column;
}

.verification-check-item strong {
    color: var(--text-main);

    font-size: 11px;
    font-weight: 550;
}

.verification-check-item small {
    margin-top: 1px;

    color: var(--text-muted);

    font-size: 8px;
}

.verification-check-item.is-complete > span {
    background: var(--success-soft);

    color: var(--success);
}

.verification-check-item.is-processing > span {
    background: var(--warning-soft);

    color: var(--warning);
}

.verification-security-note {
    max-width: 480px !important;

    margin-top: 14px !important;

    color: var(--text-muted) !important;

    font-size: 9px !important;
}


/* ============================================================
   35. VERIFICATION SUCCESS
============================================================ */

.success-mark {
    width: 52px;
    height: 52px;

    margin:
        0 auto
        16px;

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

    border: 1px solid var(--success-border);
    border-radius: 50%;

    background: var(--success-soft);

    color: var(--success);

    font-size: 22px;
    font-weight: 500;
}

.verified-membership-summary {
    max-width: 420px;

    margin:
        0 auto
        18px;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: var(--radius-sm);

    background: #ffffff;
}

.verified-membership-summary > div {
    padding: 11px 13px;

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

    gap: 18px;
}

.verified-membership-summary > div + div {
    border-top: 1px solid var(--border-light);
}

.verified-membership-summary span {
    color: var(--text-muted);

    font-size: 10px;
}

.verified-membership-summary strong {
    color: var(--text-main);

    font-size: 11px;
    font-weight: 560;
}


/* ============================================================
   36. VERIFICATION PENDING
============================================================ */

.pending-mark {
    width: 52px;
    height: 52px;

    margin:
        0 auto
        16px;

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

    border: 1px solid var(--warning-border);
    border-radius: 50%;

    background: var(--warning-soft);

    color: var(--warning);

    font-size: 21px;
}


/* ============================================================
   37. LEGAL WINDOWS
============================================================ */

.legal-window {
    position: relative;
    z-index: 2;

    width: min(
        100%,
        640px
    );

    max-height: calc(100dvh - 28px);

    overflow-y: auto;

    padding: 28px 22px;

    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

    background: #ffffff;

    box-shadow: var(--shadow-lg);
}

.legal-window h2 {
    padding-right: 42px;

    margin-bottom: 18px;

    font-size: 24px;
    font-weight: 550;
}

.legal-window p {
    color: var(--text-secondary);

    font-size: 12px;
    line-height: 1.8;
}

.legal-window p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   38. MARKET TABLE SUPPORT
   For dynamically inserted app.js market overview
============================================================ */

.table-scroll {
    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

    border: 1px solid var(--border);
    border-radius: var(--radius-md);

    background: #ffffff;
}

.table-scroll table {
    width: 100%;
    min-width: 650px;

    border-collapse: collapse;
}

.table-scroll th,
.table-scroll td {
    padding: 12px 14px;

    border-bottom: 1px solid var(--border-light);

    white-space: nowrap;

    text-align: left;
}

.table-scroll tr:last-child td {
    border-bottom: 0;
}

.table-scroll th {
    background: #fafbfc;

    color: var(--text-muted);

    font-size: 9px;
    font-weight: 570;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.table-scroll td {
    color: var(--text-main);

    font-size: 11px;
}

.table-scroll td strong {
    font-weight: 570;
}


/* ============================================================
   39. TOASTS
============================================================ */

.toast-container {
    position: fixed;

    z-index: 30000;

    left: 14px;
    right: 14px;

    bottom:
        max(
            14px,
            env(safe-area-inset-bottom)
        );

    display: flex;
    flex-direction: column;

    gap: 7px;

    pointer-events: none;
}

.toast {
    width: 100%;

    padding: 11px 12px;

    border: 1px solid var(--border);
    border-radius: var(--radius-sm);

    background: #ffffff;

    color: var(--text-main);

    box-shadow: var(--shadow-md);

    font-size: 11px;

    pointer-events: auto;

    animation:
        toastAppear
        180ms
        ease;
}

.toast--success {
    border-color: var(--success-border);

    background: #fbfffd;
}

.toast--error {
    border-color: var(--danger-border);

    background: #fffafb;
}

@keyframes toastAppear {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================================================
   40. RTL / URDU SUPPORT
============================================================ */

html[dir="rtl"] body {
    direction: rtl;
}

html[dir="rtl"] .account-dropdown {
    right: auto;
    left: 0;
}

html[dir="rtl"] .account-dropdown-link {
    text-align: right;
}

html[dir="rtl"] .window-close-button {
    right: auto;
    left: 13px;
}

html[dir="rtl"] .login-window-header {
    padding:
        24px
        22px
        18px
        54px;
}

html[dir="rtl"] .registration-progress {
    padding:
        20px
        20px
        20px
        54px;
}

html[dir="rtl"] .password-field input {
    padding-right: 12px;
    padding-left: 62px;
}

html[dir="rtl"] .password-toggle {
    right: auto;
    left: 8px;
}

html[dir="rtl"] .membership-benefits li {
    padding-left: 0;
    padding-right: 22px;
}

html[dir="rtl"] .membership-benefits li::before {
    left: auto;
    right: 0;
}

html[dir="rtl"] .faq-question {
    text-align: right;
}

html[dir="rtl"] .verification-check-list {
    text-align: right;
}

html[dir="rtl"] .verification-timer-box span {
    text-align: right;
}

html[dir="rtl"] .table-scroll th,
html[dir="rtl"] .table-scroll td {
    text-align: right;
}


/* ============================================================
   41. 360PX+
============================================================ */

@media (min-width: 360px) {

    .container {
        width: min(
            calc(100% - 36px),
            var(--container)
        );
    }

    .hero-actions {
        flex-direction: row;
    }

    .hero-actions > * {
        width: auto;
    }

    .market-summary-card {
        padding: 22px;
    }

}


/* ============================================================
   42. 480PX+
============================================================ */

@media (min-width: 480px) {

    .content-section {
        padding: 76px 0;
    }

    .hero-section {
        padding:
            78px 0
            74px;
    }

    .payment-method-options {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .payment-summary {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .payment-summary > div {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        gap: 2px;
    }

    .payment-summary > div + div {
        border-top: 0;
        border-left: 1px solid var(--border-light);
    }

    .payment-summary strong {
        text-align: left;
    }

    .registration-progress-step > div {
        display: block;
    }

    .toast-container {
        left: auto;
        right: 18px;

        width: min(
            360px,
            calc(100% - 36px)
        );
    }

}


/* ============================================================
   43. 640PX+
============================================================ */

@media (min-width: 640px) {

    .container {
        width: min(
            calc(100% - 44px),
            var(--container)
        );
    }

    .header-auth-actions {
        display: flex;
        align-items: center;

        gap: 5px;
    }

    .header-create-button {
        display: inline-flex;
    }

    .account-menu-name {
        display: inline;
    }

    .updates-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .signals-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .footer-grid {
        grid-template-columns:
            2fr
            1fr
            1fr;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;

        gap: 20px;
    }

    .registration-step {
        padding: 30px 30px 32px;
    }

    .registration-progress {
        padding:
            20px
            56px
            20px
            30px;
    }

    .login-window-body {
        padding: 28px;
    }

    .login-window-header {
        padding:
            26px
            56px
            20px
            28px;
    }

    .legal-window {
        padding: 34px;
    }

}


/* ============================================================
   44. 768PX+
============================================================ */

@media (min-width: 768px) {

    :root {
        --header-height: 74px;
    }

    .content-section {
        padding: 84px 0;
    }

    .hero-section {
        padding:
            90px 0
            84px;
    }

    .hero-copy h1 {
        font-size: 48px;
    }

    .section-heading-row {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }

    .updates-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .news-layout {
        grid-template-columns:
            minmax(0, 1.25fr)
            minmax(260px, 0.75fr);
    }

    .news-list {
        grid-template-rows:
            repeat(3, 1fr);
    }

    .news-list-item {
        min-height: 0;
    }

    .membership-layout {
        grid-template-columns:
            minmax(0, 1.45fr)
            minmax(280px, 0.55fr);

        align-items: stretch;
    }

    .membership-information {
        padding: 32px;
    }

    .membership-account-card {
        padding: 26px;
    }

    .support-panel {
        grid-template-columns:
            minmax(0, 1fr)
            auto;

        align-items: center;

        padding: 32px;
    }

    .footer-grid {
        grid-template-columns:
            2fr
            1fr
            1fr
            1fr;

        gap: 35px;
    }

    .footer-brand {
        grid-column: auto;
    }

    .payment-method-options {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .payment-instructions-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        gap: 20px;
    }

    .payment-instructions-row span {
        flex: 0 0 150px;
    }

    .payment-instructions-row strong,
    .payment-instructions-row code {
        flex: 1;
        text-align: right;
    }

}


/* ============================================================
   45. 1024PX+
============================================================ */

@media (min-width: 1024px) {

    :root {
        --header-height: 76px;
    }

    .desktop-nav {
        display: flex;
        align-items: center;

        gap: 24px;

        margin-left: auto;
    }

    .desktop-nav a {
        position: relative;

        min-height: var(--header-height);

        display: inline-flex;
        align-items: center;

        color: var(--text-secondary);

        font-size: 12px;
        font-weight: 470;

        transition:
            color var(--transition-fast);
    }

    .desktop-nav a::after {
        content: "";

        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;

        height: 2px;

        transform: scaleX(0);

        background: var(--brand-gold);

        transition:
            transform var(--transition-fast);
    }

    .desktop-nav a:hover {
        color: var(--text-heading);
    }

    .desktop-nav a:hover::after {
        transform: scaleX(1);
    }

    .mobile-menu-button {
        display: none;
    }

    .hero-section {
        padding:
            98px 0
            94px;
    }

    .hero-layout {
        grid-template-columns:
            minmax(0, 1.05fr)
            minmax(380px, 0.75fr);

        align-items: center;

        gap: 70px;
    }

    .hero-copy h1 {
        font-size: 52px;
    }

    .market-summary-card {
        padding: 26px;
    }

    .market-chart {
        height: 195px;
    }

    .signals-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .registration-window {
        width: min(
            100%,
            820px
        );
    }

    .registration-step {
        padding:
            34px
            38px
            38px;
    }

    .registration-progress {
        padding:
            22px
            60px
            22px
            38px;
    }

    .registration-progress-step {
        gap: 9px;
    }

    .registration-progress-step > span {
        width: 29px;
        height: 29px;
    }

}


/* ============================================================
   46. 1200PX+
============================================================ */

@media (min-width: 1200px) {

    .content-section {
        padding: 92px 0;
    }

    .desktop-nav {
        gap: 28px;
    }

    .hero-layout {
        gap: 84px;
    }

    .hero-copy h1 {
        font-size: 54px;
    }

}


/* ============================================================
   47. SMALL MOBILE SAFETY — 320PX TO 359PX
============================================================ */

@media (max-width: 359px) {

    .container {
        width: calc(100% - 24px);
    }

    .brand-name {
        font-size: 16px;
    }

    .brand-description {
        max-width: 120px;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        font-size: 8px;
    }

    .header-actions {
        gap: 5px;
    }

    .language-button {
        min-width: 35px;
        width: 35px;

        padding: 0 6px;
    }

    .mobile-menu-button {
        width: 38px;
        height: 38px;
    }

    .hero-copy h1 {
        font-size: 32px;
    }

    .hero-facts {
        grid-template-columns: 1fr;
    }

    .hero-facts > div {
        padding: 8px 0;
    }

    .hero-facts > div + div {
        padding-left: 0;

        border-left: 0;
        border-top: 1px solid var(--border-light);
    }

    .registration-progress {
        padding:
            17px
            48px
            17px
            14px;
    }

    .registration-progress-step > span {
        width: 24px;
        height: 24px;
    }

    .registration-step {
        padding:
            22px
            15px
            24px;
    }

    .payment-detail-header {
        align-items: flex-start;

        flex-direction: column;
    }

}


/* ============================================================
   48. REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;
    }

}


/* ============================================================
   49. PRINT
============================================================ */

@media print {

    .site-header,
    .mobile-navigation,
    .modal,
    .toast-container,
    button {
        display: none !important;
    }

    body {
        background: #ffffff;

        color: #000000;
    }

    .content-section,
    .soft-section,
    .site-footer {
        background: #ffffff;
    }

    * {
        box-shadow: none !important;
    }

}