@media (max-width: 768px) {
    .glass-panel {
        width: 96vw;
        height: 84vh;
        top: 1%;
        background-color: rgba(255, 255, 255, 0);
    }

    .ai-panel__input {
        width: 100% !important;
    }

    .ai-panel {
        height: 13.5svh !important;
        width: 100vw !important;
    }
    .ai-panel.is-open {
        height: 82.5svh !important;
        width: 100svw !important;
    }
    .ai-panel__conversations.is-open {
        position: relative;
        left: 97%;
        width: 76% !important;
        height: 90% !important;
        border-bottom-right-radius: 0px;
        border-top-right-radius: 0px;
    }
    .ai-panel__conversations-list {
        position: relative;
        left: -40%;
    }
/* 1. THE PARENT: Drop the right-side anchor wall to unlock true scroll depth */
.ai-settings-stack {
    position: absolute !important;
    left: 16px !important;
    width: calc(100% - 32px) !important; /* Stretches wide perfectly while leaving clean 16px side gaps */
    bottom: 20px !important;             /* Keeps your exact original desktop placement height */

    /* ─── 🔓 THE ABSOLUTE MASTER CORRECTION ─── */
    right: unset !important;             /* CRITICAL: Smashes the right wall anchor blocking your text track */
    height: 170px !important;            /* Hard-locks the viewport box profile small and tight */

    /* Turn on the core vertical scrolling engine */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Vaporizes scrollbar tracking lines inside mobile browsers */
.ai-settings-stack::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* 2. THE CHANNELS: Force the child row elements to stay un-squished */
.ai-settings-stack > div,
.ai-settings-row,
.ai-settings-row--premium,
.ai-settings-row--cost {
    display: flex !important;
    width: 100% !important;
    flex-shrink: 0 !important;      /* Forces every setting line to maintain its full height */
    height: 44px !important;        /* Thick, comfortable padding target profile for fingers */
    box-sizing: border-box !important;
    pointer-events: auto !important; /* Commands the phone glass to listen to thumb touches */
}
.ai-settings-dropdown-menu {
    position: relative;
    top: 40px;
}
.ai-directives-container {
    position: relative;
    left: 2%;
    bottom: -5%;
}
    @media (max-width: 768px) {

        /* 1. Unify and reshape the sidebar container into a bottom menu bar */
        .icon-bar {
            position: absolute !important;
            left: 4% !important; /* Centers it perfectly on the 393px iPhone width */
            bottom: -11% !important; /* Pins it safely near the 852px screen baseline */
            width: 100% !important; /* Spans across the display screen width */
            height: 60px !important; /* Thick horizontal touch boundary height for thumbs */

            /* Erase your desktop vertical positioning math completely */
            top: unset !important;
            transform: none !important;
            max-height: none !important;
            gap: 0 !important; /* Clears desktop vertical spacing gaps */

            /* 2. CRITICAL: Flip your desktop layout engine from column to row */
            display: flex !important;
            flex-direction: row !important; /* Flips the axis from vertical to horizontal */
            justify-content: space-around !important; /* Spaces your 8 icons perfectly across the row */
            align-items: center !important; /* Vertically centers icons inside the 60px bar */
            overflow-x: auto;
            white-space: nowrap;
        }

    }
    @media (max-width: 768px) {

    /* ─── 🔄 REMOVE SCROLLBAR FOR CHROME, SAFARI, & TIKTOK WEBVIEWS ─── */
    .icon-bar::-webkit-scrollbar {
        display: none !important; /* Forces the scrollbar asset to completely vanish on iOS & Android */
        width: 0 !important;
        height: 0 !important;
    }

    /* ─── 🛡️ REMOVE SCROLLBAR FOR FIREFOX & IE/EDGE ─── */
    .icon-bar {
        scrollbar-width: none !important; /* Hides track on modern desktop/mobile Firefox engines */
        -ms-overflow-style: none !important;  /* Hides track on Windows Mobile/IE engines */
    }

}

    .icon-bar__category {
        flex-direction: row;
    }
    .icon-bar__category--in-app {
        top: -33%;
        left: 2%;
    }
    .panel-edit-checkbox {
        position: absolute;
        left: -46svw;
        bottom: -15svh;
    }
    .profile-pan-handle {
        position: absolute;
        left: -47svw;
        top: 14svh;
    }
    .profile-pan-handle__label  {
        position: absolute;
        margin-left: 40px;
    }
    .profile-panel {
        position: absolute;
        left: -11svw;
        top: 12svh;
    }
    .day-cycle-arc__phase-clock.is-visible {
        top: 1% !important;
        left: 70% !important;
        width: 95vw;
    }
    .day-cycle-arc__settings-gear {
        top: 95svh !important;
        left: -16svw !important;
    }
    .day-cycle-settings-panel.is-open {
        width: 100vw;
        height: 100vh;
    }
    .account-name-container.visible {
        left: 17% !important;
    }
    .account-lastname-container.visible {
        top: 24% !important;
        left: 27%;
    }
    .member-since-display {
        left: -5%;
        top: -1svh !important;
    }
    .subscription-status-display {
        top: -2svh;
    }
    .device-logout-btn {
        bottom: 2% !important;
    }
    .day-cycle-settings-panel.is-open {
        width: 97vw;
        height: 70vh;
    }
    .account-currency-menu {
        top: -900%;
    }
    .subscription-purchase-button {
        position: absolute;
        left: -10svw;
        top: 10svh;
    }
    .trading__sim-panel.is-open {
        left: 0.1%;
        width: 97vw;
        height: 93%;
        background: rgba(211, 211, 211, 0.22);
    }
        .trading__sim-panel.is-open ~ .ai-panel {
            position: absolute;
            left: 1000svh !important;
        }
    .trading__sim-panel-graph {
        left: 0% !important;
        width: 96vw;
    }
    .sim_balance-pill {
        position: absolute;
       bottom: 83.3svh;
        right: 13svh;
    }
    .trading__sim-panel-graph-inner {
        width: 70vw;
    }
    .sim-open-positions-panel {
        top: 8%;
        left: 0% !important;
        width: 69svw !important;
        height: 58svh !important;
        background: rgba(64, 64, 64, 0.58);
    }
    .autobuy-name {
        position: absolute;
        left: 25%;
        top: 100% !important;
    }
    .autobuy-input-container {
        position: absolute;
        left: 25%;
        top: 107% !important;
    }
    .autosell-name {
        position: absolute;
        left: 65%;
        top: 100% !important;
    }
    .autosell-input-container {
        position: absolute;
        left: 65%;
        top: 107% !important;
    }
    /* ── Open-Positions toggle: reveal + drop it right between the inputs ── */
    .opp-toggle-btn {
        display: flex !important;
        position: absolute;
        width: 6svw;
        height: 3svh;
        top: 104% !important;
        /* midpoint of the gap between the autobuy (left 25%) and
           autosell (left 65%) input boxes, both 107px wide */
        left: calc(45% + 53px);
        transform: translateX(-50%);
        z-index: 5;
    }
    .opp-toggle-btn:active {
        transform: translateX(-50%) scale(0.93);
    }
    /* ── Smooth open / close for the positions panel ── */
    .sim-open-positions-panel {
        transition:
            opacity 0.38s ease,
            transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0.42s ease;
        transform-origin: top center;
        will-change: opacity, transform;
    }
    .sim-open-positions-panel.opp-collapsed {
        opacity: 0;
        transform: translateY(-14px) scale(0.96);
        pointer-events: none;
        visibility: hidden;
    }
    .opp-toggle-btn__icon {
        top: 50%;
        width: 3svw;
    }
    .trend-style-container {
        top: 87% !important;
        left: 45%;
    }
    .trend-style-label {
        position: relative;
        right: 0% !important;
        color: #b1b1b1;
    }
    .trading__sim-thoughts {
        top: 10000%;
    }
    .trading__sim-panel-current-block {
        position: relative;
        top: -0.2svh;
        left: 2.7svh;
        width: 32vw;
    }
    .current-price {
        position: relative;
        left: 2svh;
        font-size: 0.65rem;
    }
    .percent-health {
        color: transparent;
    }
    .ai-panel__energy-track {
        position: relative;
        right: -2% !important;
        width: 58%;
    }
    .trading__sim-panel-asset-selector  {
        position: absolute;
        top: -5.5%;
        left: 38%;
        width: 33vw;
        position: relative;

    }
    .trading__sim-panel-asset-name {
        font-size: 0.65rem;
    }
    .asset-icon {
        font-size: 0.65rem;
    }
    .trading__sim-panel-live {
        position: absolute;
        top: -0%;
        left: 72%;
        width: 20vw;
        font-size: 0.62rem;
    }
    .asset-dropdown-panel.is-open {
        position: relative;
        left: -95% !important;
        width: 90vw !important;
        background: rgba(145, 145, 145, 0.26);
    }
    .trading__sim-stats-bar {
        position: relative;
        top: -5.5%;
        left: 0%;
        width: 57svh;
        height: 4svh;
        gap: 30px;
        background: rgba(218, 218, 218, 0.26);
    }
    .stat-item {
        position: relative;
        top: 0.1svh;
    }
    .sim-action-popup.is-open  {
        position: relative;
        top: -10vh;
        left: 10vw;
         width: 50vw;
        height: 70vh;
    }
    .info_control-line {
        position: relative;
        top: 41.6svh;
        left: 72.8%;
    }
    .sim-target-offscreen-text {
        left: 1svh;
        width: 50svw;
    }
    .sim-target-offscreen-text {
        font-size: 0.4rem;
    }
    .sim_crosshair-name {
        position: absolute;
        left: 51%;
        top: 118% !important;
        color: rgba(195, 195, 195, 0.44);
    }
    .sim_crosshair-checkbox {
        position: relative;
        left: 31.2svh;
        top: 64svh;
    }
    .sim_PNL-panel {
        top: 0svh;
    }
    .ai-panel__energy-label {
        position: relative;
        top: 3%;
        left: 2%;
    }
    .ai-panel-Premium-connect-circle-select {
        left: 38.25%;
    }
    .ai-panel-Premium-connect-circle-select-2 {
        left: 50%;
    }
    .ai-panel-Premium-connect-circle-select-3 {
        left: 61%;
    }
    .ai-panel-Premium-connect-circle-select-4 {
        left: 72%;
    }
    .ai-panel-Premium-connect-circle-select-5 {
        left: 83%;
    }
    .divider-Conversation__gear {

    }
    .timing__panel.is-open {
        width: 100svw !important;
        height: 100svh !important;
    }
    .graph-panel {
        position: absolute;
        left: 3% !important;
    }
    .graph-panel-cards-holder {
position: absolute;
        left: 3% !important;
        width: 87.5svw
    }
    .age-markers-placeholder {
        width: 96%;
    }
    /* ── Wealth line: make the SVG fill the full chart height (mobile only) ──
       .wealth-svg is sized width/height:100%, but inside .graph-stage
       (height:auto + flex) that percentage HEIGHT doesn't resolve, so the
       viewBox'd SVG falls back to its intrinsic aspect-ratio height
       (width ÷ 2.5 from the 1000x400 viewBox). On wide desktop that's tall
       enough to look right; on a narrow phone it's far shorter than the stage,
       so the curve gets crammed into the TOP of the stage and the bottom-left
       start anchor floats up into the middle (it only LOOKED off-screen-left).
       Pinning the SVG with position:absolute + inset:0 stretches it to the
       stage's real box, so the line fills top-to-bottom and the start sits in
       the bottom-left corner. Desktop keeps the in-flow SVG (untouched). */
    .wealth-svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }
    .timing__expand-panel {
        left: 100svw !important;
        width: 100svw !important;
    }
    /* Open state OWNS the height (overrides desktop's 645px). Keeping 80svh here
       instead of on the base .timing__expand-panel is what lets the panel
       COLLAPSE on close — an unconditional `height: 80svh !important` was
       overriding both the closed 0px and the open 645px, so the close animation
       could never run. */
    .timing__expandable-container.is-open .timing__expand-panel {
        height: 80svh !important;
    }
    /* Closed state (including sticky touch :hover after a tap): force fully
       collapsed + invisible so closing always animates back to 0 and the
       0.6-opacity hover-peek can't linger as that odd ~0.5 opacity. */
    .timing__expandable-container:not(.is-open) .timing__expand-panel {
        height: 0 !important;
        opacity: 0 !important;
    }
    .timing__expand-toggle.is-open {
         top: 30svh;
    }
    }
    .timing__section.timing__section--income {
        width: 85svw !important;
        left: -5svw !important;
    }
    .timing__section.timing__section--expense {
        position: absolute !important;
        left: 1svw !important;
        top: 57svh !important;
        width: 85svw !important;
    }
    .timing__section.timing__section--onetime {
        position: absolute !important;
        left: 1svw !important;
        top: 125.5svh !important;
        width: 85svw !important;
    }
    .timing__custom-expense-create {
        position: relative !important;
        top: 0svh;
    }
    .timing__section.timing__section--goals {
        position: absolute !important;
        left: 1svw !important;
        top: 92.5svh !important;
        width: 85svw !important;
    }
    .graph-panel-cards-request-wrapper {
        position: relative;
        left: 55svw;
        top: 10svh;
        width: 30svw;
    }
/* ══════════════════════════════════════════════════════════════════════════
   WORLD-MAP CAROUSEL (mobile only)
   Three stacked views that slide horizontally inside the panel (overflow:hidden).
   Home = center (globe).
     • Swipe RIGHT (left→right): center slides off to the RIGHT, Media slides in
       from the LEFT.            → JS adds .show-media
     • Swipe LEFT  (right→left): center slides off to the LEFT,  News slides in
       from the RIGHT.           → JS adds .show-news
   Wrapped in its own @media so desktop keeps the 3-column grid from
   day-cycle-arc.css. (These rules previously sat outside the media query and
   were leaking onto desktop.)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .world-map-panel.is-open {
        width: 96svw !important;
        height: 80svh !important;
        left: 0svw;
        /* Reinforce the clip (matches the panel's 45px radius) so a parked view
           can't peek past the edges mid-swipe even if a composited transform
           layer would otherwise escape overflow:hidden on mobile. */
        clip-path: inset(0 round 45px);
    }
    /* All three views share one centered box; only transform changes. */
    .world-map-panel__media,
    .world-map-panel__center,
    .world-map-panel__news {
        position: absolute !important;
        top: 50%;
        left: 50%;
        width: 90svw !important;
        height: 70svh !important;
        transition: transform 440ms cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform;
    }
    /* Home: media parked off-left, center centered, news parked off-right.
       The ±100svw shift keeps parked views fully off-screen (clipped by the
       panel's overflow:hidden). */
    .world-map-panel__media  { transform: translate(calc(-50% - 100svw), -50%); }
    .world-map-panel__center { transform: translate(-50%, -50%); }
    .world-map-panel__news   { transform: translate(calc(-50% + 100svw), -50%); }

    /* Swipe right → Media: center exits right, media arrives centered. */
    .world-map-panel.show-media .world-map-panel__center { transform: translate(calc(-50% + 100svw), -50%); }
    .world-map-panel.show-media .world-map-panel__media  { transform: translate(-50%, -50%); }

    /* Swipe left → News: center exits left, news arrives centered. */
    .world-map-panel.show-news .world-map-panel__center { transform: translate(calc(-50% - 100svw), -50%); }
    .world-map-panel.show-news .world-map-panel__news   { transform: translate(-50%, -50%); }
}

/* ══════════════════════════════════════════════════════════════════════════
   PLANNER: CREATE ⇄ LINKS swipe-swap
   The two blocks overlapped. They're wrapped in .planner-swap-wrap, which is a
   no-op on desktop (display:contents → no box, original layout untouched) and
   becomes a single clipped slot on mobile that the two cards cross-slide inside.
   JS toggles .swap-links on the wrapper for horizontal swipes only.
   ══════════════════════════════════════════════════════════════════════════ */
.planner-swap-wrap { display: contents; }

@media (max-width: 768px) {
    /* Wrapper = the clipped slot the two cards swap inside. */
    .planner-swap-wrap {
        display: block;
        position: absolute;
        left: 2svw;
        top: 59.8svh;
        width: 91svw;
        height: 20svh;            /* fits the adder (15svh) + its create button (~17svh) */
        overflow: hidden;
        isolation: isolate;       /* keep the cards' z-index local */
        pointer-events: none;     /* the cards themselves take touches */
    }
    /* Re-anchor both cards to the slot's top-left. The adder keeps its existing
       width/height (90.8svw × 15svh from the rule above) so its tightly-packed
       internal layout is preserved — we only move it into the slot. */
    .planner_panel-adder-block,
    .planner_panel-links-block {
        top: 0 !important;
        left: 0 !important;
        transition: transform 440ms cubic-bezier(0.22, 1, 0.36, 1),
                    opacity 300ms ease;
        will-change: transform, opacity;
    }
    .planner_panel-links-block {
        position: absolute !important;
        width: 91svw !important;
        height: 100% !important;
    }
    /* Default: CREATE in view, LINKS parked off to the right (clipped). */
    .planner_panel-adder-block { transform: translateX(0);    opacity: 1; pointer-events: auto; z-index: 2; }
    .planner_panel-links-block { transform: translateX(106%); opacity: 0; pointer-events: none; z-index: 1; }
    /* Swapped: LINKS in view, CREATE parked off to the left. */
    .planner-swap-wrap.swap-links .planner_panel-adder-block { transform: translateX(-106%); opacity: 0; pointer-events: none; }
    .planner-swap-wrap.swap-links .planner_panel-links-block { transform: translateX(0);      opacity: 1; pointer-events: auto; z-index: 2; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ROUTINE-FINANCE — two mobile carousels (LOGIC ONLY)
   Pure transform/opacity swaps layered on top of your existing mobile layout —
   NO sizes/positions/overflow are changed (those are yours). Mobile only; the
   panel already clips (overflow:hidden), so parked views stay off-screen.
     1) Summary row : Income+Expenses  ⇄  Remaining   (swipe either way toggles)
     2) Body        : Calendar  ⇄  Categories          (swipe L→R = categories, R→L = calendar)
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* ---- 1. Summary: Income+Expenses ⇄ Remaining ---- */
    .routine-finance__summary-card--income,
    .routine-finance__summary-card--expense,
    .routine-finance__summary-card--remaining {
        transition: transform 440ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease;
        will-change: transform, opacity;
    }
    /* default: Remaining hidden (Income+Expenses shown).
       No transform / !important here, so you have full control of the Remaining
       card's position, size and transform — the carousel only fades it. */
    .routine-finance__summary-card--remaining {
        opacity: 0;
        pointer-events: none;
    }
    /* swapped: Income+Expenses parked, Remaining shown */
    .routine-finance__summary-row.rf-show-rem .routine-finance__summary-card--income,
    .routine-finance__summary-row.rf-show-rem .routine-finance__summary-card--expense {
        transform: translateX(-110%) !important; opacity: 0 !important; pointer-events: none !important;
    }
    .routine-finance__summary-row.rf-show-rem .routine-finance__summary-card--remaining {
        opacity: 1;
        pointer-events: auto;
    }

    /* ---- 2. Calendar ⇄ Categories ---- */
    .routine-finance__categories-list,
    .routine-finance__cal-header,
    .routine-finance__calendar {
        transition: transform 440ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease;
        will-change: transform, opacity;
    }
    /* default: Categories parked off-screen (Calendar shown) */
    .routine-finance__categories-list {
        transform: translateX(110%) !important; opacity: 0 !important; pointer-events: none !important;
    }
    /* swapped: Calendar parked, Categories shown */
    .routine-finance__body.rf-show-cats .routine-finance__cal-header,
    .routine-finance__body.rf-show-cats .routine-finance__calendar {
        transform: translateX(-110%) !important; opacity: 0 !important; pointer-events: none !important;
    }
    .routine-finance__body.rf-show-cats .routine-finance__categories-list {
        transform: translateX(0) !important; opacity: 1 !important; pointer-events: auto !important;
    }
}
    .planner_panel.is-open {
        position: relative;
        left: 0svw;
        width: 100svw;
        height: 80svh;
    }
    .planner_panel-pin-block {
        position: relative;
        left: 1.2svh;
        top: -9.5svh !important;
        height: 19.2svh;
        width: 80.5svw;
    }
    .planner_panel-pin-name {
        position: relative;
        top: -11%;
    }
    .planner_panel-adder-block {
        position: absolute;
        left: 2svw;
        top: 2svh !important;
        width: 90.8svw;
        height: 15svh;
        border-radius: 10px;
        border-top-right-radius: 0px;
        border-top-left-radius: 0px;
    }
    .planner_panel-adder-block-name {
        position: absolute;
        top: 10%;
    }
    .planner-adder-name-block-text {
        position: relative;
        top: -65% !important;
        font-size: 0.55rem;
    }
    .planner-adder-desc-block-text {
        font-size: 0.5rem;
    }
    .planner-adder-create-button {
        position: absolute;
        top: 0.15svh !important;
        font-size: 0.5rem;
        left: 36svw;
        width: 20svw;
        height: 1.5svh;
    }
    .planner_panel-adder-block-name-line {
        opacity: 1;
        position: absolute;
        top: 30%;
    }
    .planner-adder-month-dropdown {
        position: absolute !important;
        top: -40% !important;
       width: 20%;
        height: 10%;
        font-size: 0.53rem;
    }
    .planner-adder-age-input {
        position: absolute;
        top: -20%;
        left: 23%;
       width: 7%;
        font-size: 0.53rem;
    }
    .planner-adder-links-block {
        position: absolute !important;
        top: 14.5svh !important;
        height: 20% !important;
        width: 36.4%;
    }
    .planner_panel-links-block {
        position: relative;
        top: 1.7svh !important;
        width: 100% !important;
        left: 2svw;
    }
    .plan-view-ticks {
        opacity: 0;
    }
    .routine-finance-panel.is-open {
        position: relative;
        left: 0;
        width: 97svw;
    }
    .routine-finance__summary-row {
        position: relative;
        width: 98svw;
        left: -20%;
    }
    .routine-finance__summary-label {
        color: #ffffff;
    }
.routine-finance__calendar {
    position: relative;
    left: -63.5svw;
    width: 90svw;
}
.routine-finance__left {
    position: relative;
    width: 50svw;
    left: -8svw;
}
.routine-finance__week-days {
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
}
.routine-finance__day {
    position: relative;
    width: 60%;
}
.routine-finance__section-header {
    position: relative;
    left: -65%;
    width: 80svw;
}
.routine-finance__tx-list {
    position: relative;
    left: -12.5svw;
    width: 40svw;
}
.routine-finance__cal-pagination {
    gap: 16px;
}

/* ── Routine-finance summary: bigger income/expense inputs + centered labels (mobile) ── */
@media (max-width: 768px) {
    /* Slightly larger income & expense cards so their inputs have more room */
    .routine-finance__summary-card--income,
    .routine-finance__summary-card--expense {
        gap: 7px;
        padding: 6px 12px;
    }
    .routine-finance__summary-card--income .routine-finance__mini-form,
    .routine-finance__summary-card--expense .routine-finance__mini-form {
        gap: 6px;
        margin-top: 8px;
    }
    .routine-finance__summary-card--income .routine-finance__mini-desc,
    .routine-finance__summary-card--income .routine-finance__mini-amount,
    .routine-finance__summary-card--expense .routine-finance__mini-desc,
    .routine-finance__summary-card--expense .routine-finance__mini-amount,
    .routine-finance__summary-card--expense .routine-finance__mini-cat {
        font-size: 0.7rem;
        padding: 6px 8px;
    }
    .routine-finance__summary-card--income .routine-finance__mini-amount,
    .routine-finance__summary-card--expense .routine-finance__mini-amount {
        width: 60px;
    }
    .routine-finance__summary-card--income .routine-finance__mini-add,
    .routine-finance__summary-card--expense .routine-finance__mini-add {
        width: 28px;
        height: 28px;
        font-size: 1.1rem;
    }
    /* Center the Income / Expenses / Remaining text over their inputs */
    .routine-finance__summary-card {
        align-items: center;
        text-align: center;
    }
    .routine-finance__summary-card .routine-finance__summary-label,
    .routine-finance__summary-card .routine-finance__summary-amount {
        width: 100%;
        text-align: center;
    }
    .routine-finance__summary-amount-rf-income {

    }
    .routine-finance__summary-card.routine-finance__summary-card--expense {
        position: relative;
        left: 20%;
        top: 13.5%;
    }
    .routine-finance__summary-card.routine-finance__summary-card--income {
        position: relative;
        left: 7%;
        top: 13.5%;
    }
    .routine-finance__summary-divider {
        opacity: 0;
    }
    .routine-finance__header {
        position: absolute;
        bottom: 20svh;
        left: 5svw;
    }
.routine-finance__title,
.routine-finance__nav-btn {
    color: #a5a5a5;
}
    /* Description input floated ABOVE the Income/Expense label (away from the
       other inputs). Cards already have position:relative (your left-shifts),
       so the desc anchors to the card top; padding-top makes room for it. */
    .routine-finance__summary-card--income,
    .routine-finance__summary-card--expense {
        padding-top: 38px;   /* room for the description on top — tune to taste */
    }
    .routine-finance__summary-card--income .routine-finance__mini-desc,
    .routine-finance__summary-card--expense .routine-finance__mini-desc {
        position: absolute;
        top: 6px;
        left: 10px;
        right: 10px;
        width: auto;
        text-align: center;
    }
    /* the remaining inputs (amount / category / +) stay together, centered below */
    .routine-finance__summary-card--income .routine-finance__mini-form,
    .routine-finance__summary-card--expense .routine-finance__mini-form {
        justify-content: center;
    }
    .routine-finance-panel.is-open ~ .ai-panel {
    filter: blur(4px) grayscale(0%) !important;
    border-top-left-radius: 0px !important;
}
    .routine-finance__mini-desc {
        color: #ffffff;
    }
    .planner_panel.is-open .glass-panel {
        border: rgba(245, 245, 245, 0.01);
    }
    .rf-balance,
    .routine-finance__summary-label--remaining {
        position: relative;
        left: -135%;
        top: 10%;
    }

    /* When any content panel is open, the AI panel must not catch clicks meant
       for that panel — make it AND all its children click-through. (Some ai-panel
       children force pointer-events:auto, so the descendant "*" rule + !important
       is required to override them.) */
    .timing__panel.is-open ~ .ai-panel,
    .timing__panel.is-open ~ .ai-panel *,
    .routine-finance-panel.is-open ~ .ai-panel,
    .routine-finance-panel.is-open ~ .ai-panel *,
    .world-map-panel.is-open ~ .ai-panel,
    .world-map-panel.is-open ~ .ai-panel *,
    .planner_panel.is-open ~ .ai-panel,
    .planner_panel.is-open ~ .ai-panel *,
    .trading__sim-panel.is-open ~ .ai-panel,
    .trading__sim-panel.is-open ~ .ai-panel *,
    .achievement-panel.is-open ~ .ai-panel,
    .achievement-panel.is-open ~ .ai-panel * {
        pointer-events: none !important;
    }
    .routine-finance__calendar {
    position: relative;
    left: -63.5svw;
    max-height: 47svh !important;
    width: 90svw;
}
    .routine-finance__left {
    position: relative;
    width: 50svw;
    left: -8svw;
    max-height: 58svh;
}
    .routine-finance__empty {
        position: relative;
        top: -27%;
    }
    .routine-finance__section-label {
        position: relative;
        left: 40%;
    }
    .routine-finance__section-label.routine-finance__transactions-label {
    left: 67%;
}
    .routine-finance__section-label.routine-finance__calendar-label {
        position: relative;
        left: 1%;
    }
    .achievement-panel.is-open  {
        position: relative;
        left: 0;
        width: 97svw;
        top: 0%;
    }
    .achievement-card#ach-placeholder-2 {
        position: relative;
        left: 77.5%;
    }
    .color_engine-panel.is-open {
        position: relative;
        top: -1svh;
        left: 0;
        width: 97svw;
        height: 67svh;
    }
    .color_engine-tabs {
        overflow-y: hidden;
        overflow-x: scroll;
        white-space: nowrap;
        width: 80svw;
    }
    .color-picker-slider-container {
    position: relative !important;
    top: -2svh !important;
    margin: 20px auto 0;
    width: 70%;
    max-width: 420px;
}
    .color-picker-slider-label {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.55rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: -3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
}
        .color-picker-reset-btn {
        position: absolute;
        top: 27svh;
        left: 2svw;
        width: 19svw;
        height: 10svh;
        font-size: 0;              /* hide the long "RESET TO DEFAULT" label */
        line-break: anywhere;
        line-height: 10px;
    }
    /* …and show the short label on mobile instead (real text stays for a11y/JS) */
    .color-picker-reset-btn::after {
        content: "RESET";
        font-size: 0.62rem;
    }

    /* Active-tab highlight: the sliding pill (.color_engine-tabs-indicator) is
       sized & stepped for 5 equal-width tabs, so once the tabs scroll on mobile
       it no longer lines up. Hide it and paint the highlight onto the active tab
       itself — it's then always aligned around the button. */
    .color_engine-tabs-indicator {
        display: none;
    }
    .color_engine-tab.is-active {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.14));
        box-shadow:
            0 4px 14px rgba(0, 0, 0, 0.10),
            inset 0 1px 0 rgba(255, 255, 255, 0.45),
            inset 0 0 0 1px rgba(255, 255, 255, 0.32);
    }
    .comment-panel.is-open {
        top: 1svh;
    }
    .account-lastname-input {
        position: absolute;
        top: 40%;
    }
    .animation-speed-container.visible,
    .night-shift-container-bar.visible,
    .sizing-container.visible,
    .ambience-container-bar.visible,
    .focus-mode-container-bar.visible,
    .opt-out-container-bar.visible,
    .hide-sensitive-container-bar.visible,
    .day-cycle-debug-container-bar.visible {
        width: 84svw !important;
    }
    .auto-lock-container-bar.visible {
        width: 84svw !important;
        height: 2svh;
    }
    .threats-container-bar.visible {
        width: 84svw !important;
        height: 5svh;
    }
    .threats-label {
        font-size: 0.9rem;
    }
    .premium-bar {
        position: relative;
        left: -7svw;
        width: 90svw !important;
    }
    .premium-bar.premium-bar--dropdown.leverage-max-container-bar,
    .premium-bar.premium-bar--dropdown.split-screen-pref-container-bar,
    .premium-bar.premium-bar--dropdown.event-importance-threshold-container-bar {
        left: -7svw !important;
    }

    /* ════ Keep floating UI fully on-screen (mobile only) ════ */

    /* 1. Threats tooltip — was absolutely centered over its button (180px),
          so it overflowed near the screen edges. Pin it to a fixed, always-
          visible spot and cap its width. */
    .threats-tooltip-text {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        top: auto !important;
        bottom: 13svh !important;
        transform: translateX(-50%) !important;
        width: max-content !important;
        max-width: 90vw !important;
    }

    /* 2. Reset-panels popup — JS pins it to the trigger button's coords, which
          can sit off-screen; center it in the viewport instead. */
    .reset-panels-popup.is-open {
        left: 50% !important;
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        max-width: 90vw;
        max-height: 80svh;
        overflow-y: auto;
    }

    /* 3. Selector radial menu — JS opens it at the clicked icon and fans the
          options 90px around it, so half land off-screen near an edge. Center
          the menu so the whole ring stays on screen. */
    .selector-menu {
        left: 50% !important;
        top: 50% !important;
    }
    }

    /* ════════════════════════════════════════════════════════════════════
       PRO SPLIT-SCREEN — MOBILE
       Desktop splits panels left-to-right with a draggable resizer, which is
       unusable on a phone. On mobile we keep it dead simple: each open panel
       is the REAL panel at its natural size; its viewport is "cut in half"
       view-wise (full width, an equal slice of the height) and the user just
       scrolls / swipes through the whole panel inside that window. The panels
       stack TOP-TO-BOTTOM. No reflow, so every element stays exactly where it
       belongs.
       ════════════════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {

        /* Container: column flex instead of the desktop row. No left icon-dock
           gutter, and NO clipping — overflow:hidden here is what was eating the
           bottom icon-bar (it sits just below the panel). Each viewport clips
           its own panel, so the container doesn't need to. */
        .glass-panel.is-split-screen {
            flex-direction: column !important;
            align-items: stretch !important;
            justify-content: flex-start !important;
            gap: 0 !important;
            padding: 4px 0 !important;     /* zero side padding => viewport width == panel width */
            overflow: visible !important;
        }

        /* Each wrapped panel is a full-width band; flex shares the height
           equally between however many panels are open (2 or 3). The drag-grow
           var is ignored so the split stays even, and overflow:auto turns the
           band into a scroll/swipe window onto the full-size panel. */
        .glass-panel.is-split-screen > .panel-split-viewport {
            flex: 1 1 0 !important;
            width: 100% !important;
            height: auto !important;
            min-height: 0 !important;
            align-self: stretch !important;
            overflow: auto !important;
            -webkit-overflow-scrolling: touch;
            border-radius: 12px !important;
            margin: 3px 0 !important;
        }

        /* The panel inside keeps the desktop natural-size behaviour (pinned to
           its real px size, top-left of the viewport) — we do NOT reflow it, so
           nothing is pushed too high/low. The viewport just crops it. */

        /* The resizer is a horizontal-drag affordance with no meaning between
           vertically-stacked bands — hide it. */
        .glass-panel.is-split-screen .split-panel-resizer {
            display: none !important;
        }

        /* Keep the bottom icon-bar visible & put at the bottom permanently,
           even while split-screen is active (it used to vanish behind the
           container's clip). */
        .glass-panel.is-split-screen .icon-bar {
            display: flex !important;
            z-index: 40 !important;
            pointer-events: auto !important;
        }

        /* ── Per-panel sizing fix ──────────────────────────────────────────
           routine-finance, color and achievement have hand-tuned mobile
           layouts whose children deliberately overflow the panel box and rely
           on the panel's OWN overflow clip (hidden / y-auto). The shared split
           rule forces overflow:visible on every panel, which un-clips that
           content; on mobile it then escapes into the viewport's scroll area
           and drags the layout sideways (cut off toward the left). Restore each
           panel's real clipping so it keeps its original sizing — the viewport
           still scrolls/swipes through the whole panel. */
        .glass-panel.is-split-screen .panel-split-viewport :is(
            .routine-finance-panel,
            .color_engine-panel
        ).is-open {
            overflow: hidden !important;
        }
        .glass-panel.is-split-screen .panel-split-viewport .achievement-panel.is-open {
            overflow-x: hidden !important;
            overflow-y: auto !important;
        }

        /* ────────────────────────────────────────────────────────────────
           TABS (free-window) MODE — desktop-only.
           No toggle button on mobile: remove it entirely. When 2+ panels are
           open, JS drops in the error bubble (below) instead.
           ──────────────────────────────────────────────────────────────── */
        .glass-panel-tabs-toggle {
            display: none !important;
        }

        /* ── Mobile error bubble ───────────────────────────────────────────
           A glassmorphic "spyglass" panel that drops in from the top of the
           screen to explain a restricted feature (e.g. Error 211 — tabs mode).
           Dismissible with the × button. */
        .ivy-mobile-error-bubble {
            position: fixed;
            top: -160px;                 /* parked off-screen above */
            left: 50%;
            transform: translateX(-50%);
            width: min(92vw, 430px);
            box-sizing: border-box;
            z-index: 9999;
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 14px 14px 15px 16px;
            border-radius: 22px;
            background: rgba(26, 28, 38, 0.55);
            border: 1px solid rgba(255, 255, 255, 0.22);
            box-shadow:
                0 20px 52px rgba(0, 0, 0, 0.46),
                inset 0 1px 1px rgba(255, 255, 255, 0.30),
                inset 0 -12px 26px rgba(120, 160, 255, 0.10);
            backdrop-filter: blur(22px) saturate(1.55);
            -webkit-backdrop-filter: blur(22px) saturate(1.55);
            opacity: 0;
            pointer-events: none;
            transition: top 0.46s cubic-bezier(0.34, 1.4, 0.5, 1),
                        opacity 0.34s ease;
            overflow: hidden;
        }
        .ivy-mobile-error-bubble.is-visible {
            top: calc(env(safe-area-inset-top, 0px) + 10px);
            opacity: 1;
            pointer-events: auto;
        }

        /* The "spyglass" lens — a soft optical sheen sweeping across the glass. */
        .ivy-mobile-error-lens {
            position: absolute;
            inset: 0;
            pointer-events: none;
            background:
                radial-gradient(140px 90px at 16% -16%, rgba(150, 188, 255, 0.24), transparent 70%),
                radial-gradient(110px 80px at 116% 128%, rgba(255, 120, 142, 0.18), transparent 72%);
            mix-blend-mode: screen;
        }

        .ivy-mobile-error-body { position: relative; flex: 1 1 auto; min-width: 0; }

        .ivy-mobile-error-title {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 4px;
            font-weight: 800;
            font-size: 0.95rem;
            letter-spacing: 0.01em;
            color: #fff;
        }
        .ivy-mobile-error-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 19px;
            height: 19px;
            border-radius: 50%;
            background: rgba(255, 92, 112, 0.92);
            color: #fff;
            font-size: 0.72rem;
            font-weight: 900;
            line-height: 1;
            box-shadow: 0 0 0 3px rgba(255, 92, 112, 0.22);
        }
        .ivy-mobile-error-code { color: #ffd7dc; }
        .ivy-mobile-error-text {
            position: relative;
            font-size: 0.78rem;
            line-height: 1.36;
            color: rgba(255, 255, 255, 0.84);
        }

        .ivy-mobile-error-close {
            position: relative;
            flex: 0 0 auto;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.26);
            background: rgba(255, 255, 255, 0.10);
            color: #fff;
            font-size: 18px;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s ease, transform 0.12s ease;
            -webkit-tap-highlight-color: transparent;
        }
        .ivy-mobile-error-close:hover { background: rgba(255, 255, 255, 0.20); }
        .ivy-mobile-error-close:active { transform: scale(0.9); }

        /* "Never show again" — persists a localStorage flag so Error 211 never
           pops the bubble again. */
        .ivy-mobile-error-never {
            margin-top: 9px;
            padding: 5px 12px;
            border-radius: 9px;
            border: 1px solid rgba(255, 255, 255, 0.22);
            background: rgba(255, 255, 255, 0.08);
            color: rgba(255, 255, 255, 0.82);
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            transition: background 0.2s ease, transform 0.12s ease;
        }
        .ivy-mobile-error-never:hover { background: rgba(255, 255, 255, 0.16); }
        .ivy-mobile-error-never:active { transform: scale(0.96); }

        /* ── Error Logs button on mobile — bare icon (no chip), small, pinned
           to the right edge level with the settings gear. JS sets `top` to
           match the gear; everything else is here. */
        .ivy-logs-btn,
        .ivy-logs-btn.ivy-logs-btn--mobile {
            left: auto !important;
            bottom: 0svh !important;      /* JS sets top to the gear's level */
            right: 0.1svw !important;
            width: 20px !important;
            height: 20px !important;
            z-index: 50 !important;
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }
        .ivy-logs-btn.ivy-logs-btn--mobile svg {
            width: 100% !important;
            height: 100% !important;
        }
        .ivy-logs-btn.ivy-logs-btn--mobile:hover { background: transparent !important; }
    }