/* ============================================================
   UI Upgrade layer  —  design tokens + cross-site polish
   Loaded LAST. Additive & reversible. Refines the existing
   OLED-dark + cyan identity; no framework changes.
   Phase 1: tokens + global mobile safety + hero fix.
   ============================================================ */

:root {
    /* ---- Fluid type scale (min .. max) ---- */
    --fs-eyebrow: clamp(.62rem, .58rem + .15vw, .7rem);
    --fs-sm:      clamp(.84rem, .8rem + .2vw, .92rem);
    --fs-base:    clamp(.95rem, .9rem + .25vw, 1.05rem);
    --fs-lead:    clamp(1.02rem, .96rem + .4vw, 1.2rem);
    --fs-h3:      clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
    --fs-h2:      clamp(1.7rem, 1.35rem + 1.7vw, 2.6rem);
    --fs-h1:      clamp(2.2rem, 1.3rem + 4.4vw, 4.2rem);
    --fs-display: clamp(2.4rem, 1rem + 7vw, 6.6rem);

    /* ---- Spacing (8pt rhythm) ---- */
    --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
    --sp-5: 1.5rem; --sp-6: 2rem;   --sp-8: 3rem;   --sp-10: 4rem; --sp-12: 6rem;

    /* ---- Radii ---- */
    --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px;

    /* ---- Elevation ---- */
    --sh-1: 0 2px 8px -4px rgba(0,0,0,.5);
    --sh-2: 0 10px 30px -14px rgba(0,0,0,.6);
    --sh-3: 0 24px 60px -20px rgba(0,0,0,.7);

    /* ---- Color roles (aligned to current palette) ---- */
    --c-bg: #050506;
    --c-surface: rgba(255,255,255,.05);
    --c-border: rgba(255,255,255,.1);
    --c-border-strong: rgba(255,255,255,.2);
    --c-ink: #f4f5f6;
    --c-muted: #a2a8ad;
    --c-dim: #7c8288;
    --c-accent: #54a8c7;
    --c-accent-2: #7cc9e2;
    --c-danger: #e5564b;
    --c-success: #3fae63;

    /* ---- Motion ---- */
    --ease: cubic-bezier(.32, .72, 0, 1);
    --dur-1: .18s; --dur-2: .35s; --dur-3: .6s;
}

/* ============================================================
   Global safety — kill horizontal overflow on every page
   (root cause of the clipped hero / runaway text on mobile)
   ============================================================ */
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; max-width: 100%; }
img, svg, video, canvas { max-width: 100%; height: auto; }
* { min-width: 0; }

/* Consistent gutters that respect notches on phones */
@media (max-width: 575.98px) {
    .container, .container-fluid {
        padding-left: max(18px, env(safe-area-inset-left)) !important;
        padding-right: max(18px, env(safe-area-inset-right)) !important;
    }
}

/* ============================================================
   Hero (home) — mobile fix: fluid, wrappable, contained
   ============================================================ */
@media (max-width: 767.98px) {
    /* Constrain the hero column with a real right gutter (px+% — reliable) */
    .home-v3 .hv3-hero__content {
        max-width: 100% !important;
        padding-right: 22px !important;
        box-sizing: border-box !important;
    }
    .home-v3 .hv3-title {
        font-size: clamp(2.1rem, 11vw, 4rem) !important;
        line-height: 1.03 !important;
        letter-spacing: -.01em !important;
        overflow-wrap: anywhere;
        max-width: 100% !important;
    }
    .home-v3 .hv3-title .wd { white-space: normal !important; }
    .home-v3 .hv3-hero .hv3-lead {
        font-size: var(--fs-lead) !important;
        max-width: 34ch !important;
        overflow-wrap: anywhere;
    }
    .home-v3 .hv3-hero__inner { padding-top: 4rem !important; padding-bottom: 4.5rem !important; }
}

/* Smaller phones: tighten hero actions so buttons never overflow */
@media (max-width: 400px) {
    .home-v3 .hv3-title { font-size: clamp(1.9rem, 12.5vw, 3.2rem) !important; }
    .home-v3 .hv3-hero__actions { flex-wrap: wrap; gap: .6rem !important; }
    .home-v3 .hv3-hero__actions > * { flex: 1 1 auto; }
}


/* ============================================================
   Phase 2 — cross-site polish
   ============================================================ */

/* ---- Crisper text rendering everywhere ---- */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ---- Accessible, on-brand focus ring (keyboard users only) ---- */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.form-control:focus-visible, .form-select:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--c-accent) !important;
    outline-offset: 3px !important;
    border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

/* ---- Refined native scrollbar ---- */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.14); border-radius: 999px;
    border: 2px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.26); background-clip: content-box; }

/* ---- Button micro-interactions (unified press feedback) ---- */
.btn-hv3, .ir-cta, .ir-cabinet, .btn-default, .btn, .btn-primary {
    transition: transform var(--dur-1) var(--ease), filter var(--dur-2) var(--ease),
                background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease),
                border-color var(--dur-2) var(--ease);
}
.btn-hv3:active, .ir-cta:active, .ir-cabinet:active, .btn-default:active, .btn:active { transform: translateY(1px) scale(.985); }

/* ---- Consistent hover-lift transition on glass cards ---- */
body .news-item, body .profile-card, body .home-v3 .shell {
    transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease) !important;
}

/* ---- Links: smooth accent transitions ---- */
a { transition: color var(--dur-2) var(--ease); }

/* ============================================================
   Mobile rhythm — desktop uses big 6.5rem section padding;
   tighten on phones so pages don't feel sparse/empty.
   ============================================================ */
@media (max-width: 767.98px) {
    .home-v3 .hv3-sec { padding-top: 3.6rem !important; padding-bottom: 3.6rem !important; }
    .home-v3 .hv3-steps { gap: 1.4rem !important; }
    .home-v3 .hv3-h2 { font-size: clamp(1.55rem, 6.5vw, 2.1rem) !important; }
    .home-v3 .hv3-stat__num { font-size: clamp(2.2rem, 12vw, 3.4rem) !important; }
    /* section headers/leads never overflow */
    .home-v3 .section-header h2, .home-v3 .hv3-lead, .home-v3 .hv3-h2 { max-width: 34ch; }
}

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

/* ============================================================
   Phase 3 — content pages: mobile-safe tables, forms, targets
   ============================================================ */

/* ---- Tables never break the layout on phones (scroll instead of overflow) ---- */
@media (max-width: 767.98px) {
    .pf-wrap table, .wk-wrap table, .bi-table, .bi2-table, .profile-card table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: .85rem;
    }
    /* Bootstrap responsive tables get momentum scroll too */
    .table-responsive { -webkit-overflow-scrolling: touch; }
}

/* ---- Forms: comfortable, and font >=16px prevents iOS zoom-on-focus ---- */
@media (max-width: 767.98px) {
    body .form-control, body .form-select { font-size: 16px !important; padding: .72rem .9rem !important; }
    .form-label { font-size: .9rem; }
}

/* ---- Minimum 44px touch targets (a11y) ---- */
@media (pointer: coarse) {
    .btn, .btn-default, .ir-cta, .ir-cabinet, .ir-burger,
    .page-link, .st-tab, .pm-logout, .dropdown-item {
        min-height: 44px; display: inline-flex; align-items: center;
    }
    .dropdown-item { min-height: 42px; }
}

/* ---- Long strings (nicknames, emails, IDs) never overflow their row ---- */
.pf-val, .pf-label, .pm-name, .pm-role, td, .news-item__title { overflow-wrap: anywhere; }

/* ---- Consistent radius on media blocks ---- */
body .shop-img, body .shop-img__container { border-radius: var(--r-lg); overflow: hidden; }