/* Timeframe dropdown styling */
.timeframe-dropdown {
    position: relative;
    z-index: 99;
    background-color: #1e222d;
    color: #d1d4dc;
    border: 1px solid #363a45;
    border-radius: 4px;
    cursor: pointer;
    outline: none;
}

.timeframe-dropdown option {
    background-color: #1e222d;
    color: #d1d4dc;
}

/* Top bar (exchange/timeframe left, account/network right - see index.html's
   .top-bar) floats directly over the chart now, so each side needs its own
   visible surface to sit on - same translucent-dark/blur treatment as the
   floating .chart-controls panel, just as a compact pill instead of a big
   box. .top-bar-account (index.html) shares this same look as its own,
   separate pill - deliberately NOT via the .top-bar-group class itself
   (layout.css), since that class's own overflow-x:auto (the horizontal-
   scroll safety net for the left pill's 4 wider controls) would otherwise
   force its paired overflow-y to 'auto' too, clipping #connect-method-popup
   (which floats below .top-bar-account via position:absolute/top:100%)
   to invisible/unclickable - a two-button group never needs that scroll
   safety net anyway. */
.top-bar-group,
.top-bar-account {
    background: var(--color-raised);
    box-shadow: var(--shadow-raised);
    padding: 0.35em 0.5em;
    border-radius: 0.6em;
}

/* Both groups without a pill of their own - each control floats over the
   chart by itself, less of a block drawing the eye. The padding stays:
   the left group's overflow-x:auto (layout.css) would clip the controls'
   own shadows otherwise. Direct children only - the popups below the
   account group keep their own look. */
.top-bar-group,
.top-bar-account {
    background: none;
    box-shadow: none;
}

.top-bar-group > .profile-btn,
.top-bar-group .custom-select-trigger,
.top-bar-account > .btn,
.top-bar-account > .connection-proof,
.top-bar-account > .custom-select > .custom-select-trigger {
    box-shadow: var(--shadow-raised);
}

.top-bar-group > .profile-btn,
.top-bar-account > .connection-proof {
    background: var(--color-raised);
}

/* Sizing only - .timeframe-dropdown above still supplies color/border.
   Unlike .chart-controls's own dropdowns/buttons (sized to fill that
   panel's width via the .chart-controls-scoped rules further down), these
   sit in a compact floating pill and should stay content-sized instead of
   stretching. */
.top-bar-select {
    padding: 0.4em 0.6em;
    font-size: clamp(12px, 1.1vw, 15px);
    min-height: 2.2em;
}

/* Custom dropdown wrapper (customSelect.js) - replaces #exchange-select/
   #timeframe-dropdown/#network-select's own native OPEN dropdown, which is
   drawn by the browser/OS and can't be given the app's own rounded/
   shadowed popup look via CSS, with a popup matching #connect-method-popup
   (the 🔑 wallet-connect dropdown) exactly - reuses that exact class
   below, not a lookalike copy. Just the hidden <select> + visible trigger
   button here - the popup itself is NOT a child of this wrapper (see
   .custom-select-popup and customSelect.js's own docstring for why).
   display:inline-flex so it sizes to its own trigger button, same
   content-sized behavior the plain <select> it replaces already had
   (.top-bar-select's own comment above). */
.custom-select {
    display: inline-flex;
}

/* Kept in the DOM (still the real, functional select every existing
   .value/'change' consumer targets - see customSelect.js) but never
   visible - opacity/position/size, deliberately NOT display:none, since
   #network-select's own display is still toggled directly by script.js
   (hidden entirely for non-Hyperliquid exchanges); this component mirrors
   THAT onto the wrapper instead (customSelect.js's MutationObserver)
   rather than fighting over the same property. */
.custom-select-native {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

/* The visible stand-in for the hidden <select> above - customSelect.js
   copies the select's own classes onto this (.top-bar-select/
   .timeframe-dropdown), so color/border/padding/sizing all already match;
   this only adds what a <button> needs that a <select> got for free
   (layout for the label + arrow, since a plain button has no built-in
   dropdown affordance, and resetting a couple of <button>-only UA
   defaults). */
.custom-select-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4em;
    font: inherit;
    text-align: left;
    /* Default look for every dropdown outside the top bar (Params tab,
       portfolio, language pickers - customSelect.js enhances them all):
       the same surface/border as .timeframe-dropdown, which the top-bar
       triggers get on top of this via their copied class. */
    background-color: #1e222d;
    color: #d1d4dc;
    border: 1px solid #363a45;
    border-radius: 4px;
    padding: 0.3em 0.5em;
    cursor: pointer;
    max-width: 100%;
    min-width: 0;
}

.custom-select-trigger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.custom-select-trigger.open {
    border-color: #2962FF;
}

/* The Params tab's triggers - .chart-controls' generic button sizing
   (full-width, tall, flex:1 - controls-responsive.css) and .params-popup
   button's fixed 8em (trade-panel.css) are meant for real buttons, not a
   dropdown sitting next to its label. */
.chart-controls .params-popup .custom-select-trigger {
    width: auto;
    max-width: 9.5em;
    min-height: 0;
    flex: none;
    padding: 0.3em 0.5em;
    font-size: inherit;
}

.custom-select {
    min-width: 0;
    max-width: 100%;
}

.custom-select-label-short {
    display: none;
}

.custom-select-trigger-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-select-trigger-arrow {
    opacity: 0.6;
    font-size: 0.8em;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

/* Rotated to read as "open", same affordance a native select's own arrow
   sometimes flips on some platforms - .open is toggled by customSelect.js
   alongside the popup's own display, not a CSS-only hover/focus state,
   since the popup can also be dismissed by clicking elsewhere entirely. */
.custom-select-trigger.open .custom-select-trigger-arrow {
    transform: rotate(180deg);
}

/* Positioning only - .connect-method-popup's own base rule (background/
   shadow/radius/padding, the rule above) still supplies the actual
   look, shared directly rather than a lookalike copy, so a future restyle
   of that one popup restyles all of these automatically too. Not the
   existing ".top-bar .connect-method-popup { position:absolute; ... }"
   rule though - that one assumes a position:relative ANCESTOR it can
   anchor into, which only works outside .top-bar-group's own scrollable
   pill (see customSelect.js's own docstring on why this popup is appended
   straight to <body> and positioned via JS instead). top/left are set
   per-open in JS (customSelect.js's positionPopup) - only the z-index/
   width live here. */
.custom-select-popup {
    position: fixed;
    /* Above the full-page overlays (1000) - the portfolio filter and the
       language pickers live inside those. */
    z-index: 1100;
    overflow-y: auto;
    width: max-content;
    /* Safety net for a hypothetical very long option list/name on a narrow
       phone - without this, positionPopup's own left-clamping (JS) could
       still end up negative (popup wider than the viewport itself minus
       its edge margins), pushing it half off the LEFT edge instead. */
    max-width: calc(100vw - 16px);
}

/* Inside the chart's line popup: anchored under its trigger instead of
   body-level/fixed (see customSelect.js's docstring). */
.custom-select-popup--inline {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.3em;
    z-index: 60;
}

.custom-select {
    position: relative;
}

.custom-select-option {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    white-space: nowrap;
}

/* Currently-selected option, highlighted the same way #toggle-line-drag-
   btn.active already marks "the active choice" elsewhere in this app,
   reused here rather than inventing a second "this one's active" color. */
/* Locked but says why when clicked (customSelect.js's data-locked-notice). */
.custom-select-option.custom-select-option-locked {
    opacity: 0.55;
    cursor: help;
}

.custom-select-option.active {
    background-color: #2962FF !important;
    border-color: #1976D2 !important;
    color: #fff !important;
}

.top-bar-account .btn {
    padding: 0.4em 0.7em;
    min-height: 2.2em;
    font-size: clamp(14px, 1.4vw, 18px);
}

.top-bar-account .disconnect-btn {
    padding: 0.4em 0.6em;
    font-size: 1.1em;
}

/* The connection's proof (ui/connectionProof.js): a dot colored by when the
   exchange last answered, the account value it reported and how long ago.
   A plain button (click checks again) without the .btn look - it reads
   as a status, not an action. */
.connection-proof {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.3em 0.5em;
    background: none;
    border: 1px solid transparent;
    border-radius: 0.5em;
    color: inherit;
    font: inherit;
    font-size: clamp(11px, 1vw, 13px);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: pointer;
    opacity: 0.85;
}

.connection-proof[hidden] {
    display: none;
}

.connection-proof:hover {
    border-color: rgba(255, 255, 255, 0.2);
    opacity: 1;
}

.connection-proof-dot {
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    background: #888;
    flex-shrink: 0;
}

.connection-proof[data-state="ok"] .connection-proof-dot { background: #26a69a; box-shadow: 0 0 0.4em rgba(38, 166, 154, 0.7); }
.connection-proof[data-state="stale"] .connection-proof-dot { background: #f5c242; }
.connection-proof[data-state="error"] .connection-proof-dot { background: #ef5350; }
.connection-proof[data-state="error"] { color: #ff8a80; }
/* Wallet connected, trading key not approved (connectionProof.js). */
.connection-proof-lock {
    font-size: 0.9em;
    line-height: 1;
}

.connection-proof-lock[hidden] {
    display: none;
}

.connection-proof[data-checking] .connection-proof-dot { animation: connection-proof-pulse 0.8s ease-in-out infinite alternate; }

@keyframes connection-proof-pulse {
    to { opacity: 0.3; }
}

/* Phones: the dot alone - the figures are in its tooltip/help. */
/* Floats below .top-bar-account (position:relative, layout.css) instead of
   pushing the bar taller when open - it used to sit in normal document flow
   right below the trade-action-row, where that was fine since nothing else
   needed to stay a fixed height there. */
.top-bar .connect-method-popup {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.4em;
    z-index: 150;
    width: max-content;
}

/* Profile icon (far left of .top-bar, see index.html's #profile-btn /
   profileMenu.js) - a round icon/avatar button. Opens #profile-overlay, a
   real full-page overlay (see .tutorial-overlay/.tutorial-box, reused as
   the outer shell below) rather than a small anchored dropdown, which
   turned out too easy to miss entirely. */
.profile-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2em;
    height: 2.2em;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: inherit;
    font-size: clamp(14px, 1.4vw, 18px);
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
}

.profile-btn-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* #profile-overlay reuses .tutorial-overlay/.tutorial-box/.tutorial-header/
   .tutorial-close-btn as-is (same true full-screen, edge-to-edge shell,
   same opaque background) - only the content inside .profile-overlay-body
   is narrowed/centered, since it's a short list of buttons rather than
   sidebar-navigated reading material like the Tutorial. */
.profile-overlay-body {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    padding: 1em 1.2em;
    overflow-y: auto;
    font-size: clamp(14px, 2vw, 18px);
}

.profile-overlay-body > * {
    width: 100%;
    max-width: 360px;
}

.profile-popup-header {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding-bottom: 0.4em;
    margin-bottom: 0.1em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    color: #d1d4dc;
    font-weight: 600;
}

.profile-popup-avatar-placeholder {
    font-size: 1.6em;
    line-height: 1;
}

.profile-popup-avatar {
    width: 1.6em;
    height: 1.6em;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.profile-popup-btn {
    min-height: 2em;
    text-align: left;
}

/* Layout picker (ui/layoutPicker.js): the select, add/remove side by side,
   the name field for a new one. */
.profile-layout {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
}

.profile-layout-label {
    font-size: 0.85em;
    opacity: 0.75;
}

.profile-layout-actions,
.profile-layout-add-row {
    display: flex;
    gap: 0.4em;
}

.profile-layout-actions > .btn {
    flex: 1;
}

.profile-layout-add-row[hidden],
.profile-layout-hint[hidden] {
    display: none;
}

.profile-layout-name {
    flex: 1;
    min-width: 0;
    font: inherit;
}

.profile-layout-hint {
    font-size: 0.85em;
    color: var(--color-down, #ef5350);
}

/* Google's own rendered button goes inside this container
   (google.accounts.id.renderButton, see profileMenu.js) - centered since
   it's narrower than the popup around it; stays empty (zero height) until
   that happens, or forever if GOOGLE_CLIENT_ID isn't configured at all. */
.google-signin-container {
    display: flex;
    justify-content: center;
}

/* Legal document links (AGB/Datenschutz/Impressum - see #legal-overlay,
   legalOverlay.js) - a plain, muted row rather than full .profile-popup-btn
   treatment, since these are footer-level "fine print" links, not primary
   actions like Settings/Sign in/Tutorial above them. Pushed to the bottom
   of .profile-overlay-body via margin-top:auto (that container is a
   centered flex column, so without this the footer would just sit
   wherever the last real action button happens to end, not necessarily
   the bottom, on a tall screen with few visible buttons). */
.profile-footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4em 1em;
    margin-top: auto;
    padding-top: 1em;
}

.profile-footer-link {
    background: none;
    border: none;
    padding: 0.2em 0;
    color: #8a8f98;
    font-size: 0.85em;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

.profile-footer-link:hover {
    color: #d1d4dc;
}

@media (max-width: 768px) {
    .top-bar {
        padding: 0 0.3em;
        /* Tighter than layout.css's own 0.5em base - the single gap here
           (between .top-bar-group and .top-bar-account) is one of several
           small trims (see the rest of this block) that together claw
           back the room the right:98px reservation below takes from
           .top-bar-group's own scrollable pill - without them, its last
           control (#network-select) sat partly past the pill's own
           scrolled-into-view edge, clipped there instead of merely
           scrollable to (visible as "Testn" instead of "Testnet"). */
        gap: 0.3em;
        /* Reserve the same clearance .help-toggle-btn itself reserves on
           mobile (right:62px + its own ~36px width, see components/tools.css's
           .help-toggle-btn) - without this, .top-bar's flex content (the
           account pill in particular, which - unlike .top-bar-group's own
           scrollable pill - never shrinks) can grow right up to the chart's
           own edge on a narrow phone, painting over the ❓ badge instead of
           leaving it its own reserved strip. */
        right: 98px;
    }

    .top-bar-group {
        gap: 0.3em;
        padding: 0.25em 0.35em;
    }

    .top-bar-select {
        font-size: clamp(11px, 2.6vw, 14px);
        padding: 0.25em 0.35em;
        /* Some browsers (notably Firefox) size a <select> to fit its
           WIDEST option, not just the currently selected one - without a
           cap, a long exchange/network label could alone push the whole
           left-anchored, now-nowrap top-bar (layout.css) past the actual
           screen edge on a narrow phone. Narrower than the 22vw this used
           before right:98px above existed, for the same "claw back room"
           reason as .top-bar's own gap comment. */
        max-width: 20vw;
    }

    /* The exchange/contract triggers and #timeframe-dropdown-trigger (the
       visible custom-dropdown buttons standing in for the hidden
       <select>s - see
       customSelect.js) can afford to run narrower than the shared 20vw cap
       above - "30m" and even a truncated exchange name don't need that
       much room. db25184 clawed back SOME width this way (gaps/padding/
       profile-btn) but not quite enough: .top-bar-group's scrollWidth was
       still ~22px wider than its clientWidth, so at the default
       (unscrolled) position #network-select-trigger - the pill's last
       item, and the one actually carrying the Testnet/Mainnet state -
       still sat partly past the pill's visible edge, clipped rather than
       merely scrollable to. Narrowing these other two instead keeps the
       Testnet/Mainnet text at its full 20vw rather than squeezing the one
       control where truncation actually matters. */
    /* Since the one exchange dropdown became two buttons (contract +
       exchange, marketPicker.js), both share what it had and a bit of
       the timeframe's - the contract is short ("BTC", "ETH"), a long
       exchange name ellipsizes. */
    #contract-select-trigger {
        max-width: 17vw;
    }

    #exchange-group-select-trigger {
        max-width: 14vw;
    }

    /* The exchange button shows its short name here ("HL") - customSelect.js. */
    .custom-select-label-full {
        display: none;
    }

    .custom-select-label-short {
        display: inline;
    }

    /* Two rows (ui/mobileTopBar.js moves the network select into the
       account pill): the market pill on top, the account pill - network,
       🔑, connection proof - below it; the ❓ keeps its strip on the right.
       The ::after is the line break: a full-width flex item between them. */
    .top-bar {
        flex-wrap: wrap;
        row-gap: 0.3em;
    }

    .top-bar::after {
        content: '';
        order: 1;
        flex-basis: 100%;
    }

    .top-bar-account {
        order: 2;
    }

    /* The account pill sits at the left edge now - its popups open to the
       right instead of off the screen's left edge. */
    .top-bar .connect-method-popup,
    .top-bar-account .connections-panel {
        right: auto;
        left: 0;
    }

    /* Under the bar instead of in it - no room left in the row. */
    .market-legend {
        position: absolute;
        top: calc(100% + 0.3em);
        left: 0.3em;
    }

    #timeframe-dropdown-trigger {
        max-width: 12vw;
    }

    .top-bar-account {
        padding: 0.25em 0.35em;
    }

    .top-bar-account .btn {
        font-size: clamp(13px, 3vw, 16px);
        padding: 0.25em 0.4em;
    }

    .profile-btn {
        width: 1.7em;
        height: 1.7em;
        font-size: clamp(13px, 3vw, 16px);
    }
}

/* Mainnet = real funds - make the toggle impossible to miss while it's on
   (the only Mainnet marker on screen - no banner across the page). Plain
   class selector, not #network-select.network-select--mainnet like this
   used to be - #network-select itself is invisible now (customSelect.js
   swapped it for a custom dropdown; the class still gets toggled directly
   on that real, hidden <select> - script.js - and mirrored onto the
   visible #network-select-trigger by customSelect.js's own
   MutationObserver), so an ID-scoped selector here would only ever match
   the invisible original and never actually show on screen. Still wins
   the cascade over .timeframe-dropdown/.top-bar-select's own background/
   color (same specificity, defined earlier in this file) since this rule
   comes later. */
.network-select--mainnet {
    background-color: #4a1414;
    color: #ff8080;
    border-color: #ff4d4d;
    font-weight: 600;
}

/* Searchable dropdown (customSelect.js's data-searchable - the contract
   button's Hyperliquid contracts): the filter field stays on top, only the
   list below it scrolls. The popup's own max-height (set in JS) bounds
   both together. */
.custom-select-popup--searchable {
    overflow: hidden;
    min-width: 13em;
}

.custom-select-search {
    flex: none;
    font: inherit;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.35em 0.5em;
    outline: none;
}

.custom-select-search:focus {
    border-color: var(--color-accent);
}

.custom-select-list {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* <optgroup> headings - "Perpetuals", "HIP-3 · xyz", ... */
.custom-select-group {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.35em 0.2em 0.15em;
    background: var(--color-raised);
    color: var(--color-text-dim);
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Filtered out - .btn's own display would otherwise win over [hidden]. */
.custom-select-popup [hidden] {
    display: none !important;
}

/* A dim hint at the end of an option (a contract's max leverage). */
.custom-select-option-note {
    margin-left: auto;
    padding-left: 1.2em;
    color: var(--color-text-dim);
    font-size: 0.85em;
}

.custom-select-option.active .custom-select-option-note {
    color: inherit;
    opacity: 0.8;
}

/* "Perpetual Futures" next to the contract/exchange buttons (index.html's
   #market-legend, marketPicker.js) - in the bar's row on a wide screen
   (the floating control panel sits right under the bar there), hanging off
   the bar's bottom edge on a phone (the media query above). */
.market-legend {
    flex: none;
    padding: 0.15em 0.5em;
    border-radius: 0.35em;
    background: rgba(19, 23, 34, 0.7);
    color: var(--color-text-dim);
    font-size: clamp(11px, 2.6vw, 12px);
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
    pointer-events: auto;
}

.market-legend[hidden] {
    display: none;
}

.market-legend-kind {
    color: var(--color-text);
}

/* "Not for EU users" - mainnet on an exchange without an EU licence
   (registry.py's "eu", marketPicker.js). */
.market-legend-eu {
    margin-left: 0.5em;
    color: #f0a020;
}

.market-legend-eu[hidden] {
    display: none;
}

/* The connections panel (ui/connectionProof.js) - below the account pill,
   like #connect-method-popup. */
.connections-panel {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.4em;
    z-index: 160;
    width: min(92vw, 460px);
    max-height: 70vh;
    overflow-y: auto;
    padding: 0.6em;
    background: var(--color-raised);
    box-shadow: var(--shadow-raised);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.6em;
    font-size: clamp(12px, 1.1vw, 14px);
}

.connections-panel[hidden] {
    display: none;
}

.connections-head {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-bottom: 0.4em;
    font-weight: 600;
}

.connections-head > span:first-child,
.connections-head > span:nth-child(2) {
    flex: 1;
}

.connections-check {
    padding: 0.2em 0.6em;
    font-size: 0.9em;
}

.connections-close {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    opacity: 0.7;
}

/* One column grid for the whole list - every row (the heading too) takes
   it over (subgrid), so the headings stand over their figures. */
.connections-list {
    display: grid;
    grid-template-columns: 1fr auto auto auto auto auto auto;
    column-gap: 0.5em;
    row-gap: 0.25em;
}

.connections-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    padding: 0.3em 0.4em;
    border-radius: 0.4em;
}

.connections-row--head > span:not(:first-child) {
    text-align: right;
}

.connections-empty {
    grid-column: 1 / -1;
}

.connections-row[data-current] {
    background: rgba(41, 98, 255, 0.18);
}

.connections-row--head {
    color: var(--color-text-dim);
    font-size: 0.8em;
    font-weight: 600;
    padding-top: 0;
    padding-bottom: 0;
}

.connections-balance,
.connections-duration,
.connections-positions,
.connections-orders {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}

.connections-balance {
    color: #26a69a;
}

.connections-empty {
    padding: 0.4em;
    color: var(--color-text-dim);
}

.connections-action {
    padding: 0.2em 0.6em;
    font-size: 0.9em;
    min-height: 0;
}

/* "+ Add connection" under the list: the button, then an exchange, a
   network and Connect (connectionProof.js). */
.connections-add {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4em;
    margin-top: 0.4em;
    padding-top: 0.4em;
    border-top: 1px solid var(--color-border);
}

.connections-add .custom-select-trigger {
    padding: 0.2em 0.5em;
    min-height: 0;
    font-size: 0.9em;
}

/* The exchange dropdown (ui/exchangeConnect.js): the network switch on top,
   each exchange's account next to it - ✓ + Disconnect, or 🔑 to connect. */
.custom-select-popup--under-dialogs {
    /* Below the dialogs (overlays.css's 1000) - the Mainnet confirmation
       its network switch opens shows above it. */
    z-index: 999;
}

.exchange-network-switch {
    display: flex;
    gap: 0.25em;
    padding-bottom: 0.4em;
    border-bottom: 1px solid var(--color-border);
}

.exchange-network-option {
    flex: 1;
    padding: 0.25em 0.6em;
    min-height: 0;
    font-size: 0.9em;
    white-space: nowrap;
}

.exchange-network-option.active {
    background-color: #2962FF !important;
    border-color: #1976D2 !important;
    color: #fff !important;
}

.exchange-network-option.active[data-network="mainnet"] {
    background-color: #4a1414 !important;
    border-color: #ff4d4d !important;
    color: #ff8080 !important;
}

.custom-select-option-row {
    display: flex;
    align-items: center;
    gap: 0.3em;
}

.custom-select-option-row > .custom-select-option {
    flex: 1;
}

.exchange-key-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.2em;
    min-width: 3.6em;
}

.exchange-key-btn,
.exchange-disconnect-btn {
    padding: 0.2em 0.45em;
    min-height: 0;
    line-height: 1;
}

.exchange-key-ok {
    color: #26a69a;
    font-weight: 700;
    padding: 0 0.2em;
}

/* The network button while the exchange dropdown is open - switched from
   up there just as well. */
.network-select--glow {
    box-shadow: 0 0 0 2px rgba(41, 98, 255, 0.7), 0 0 10px rgba(41, 98, 255, 0.55);
}

.network-select--mainnet.network-select--glow {
    box-shadow: 0 0 0 2px rgba(255, 77, 77, 0.75), 0 0 10px rgba(255, 77, 77, 0.55);
}

/* Cross-Exchange (ui/crossExchangePanel.js): the 🔀 button next to the
   exchange button and its list - the connections panel's look. */
.cross-exchange-btn {
    padding: 0.2em 0.6em;
    white-space: nowrap;
}

.cross-exchange-btn[hidden] {
    display: none;
}

/* Fixed to the page under the 🔀 button (crossExchangePanel.js's place()),
   above the side panels, below the dialogs (1000); as wide as its rows. */
.cross-exchange-panel {
    position: fixed;
    right: auto;
    margin-top: 0;
    z-index: 990;
    width: max-content;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 80px);
    overflow-x: auto;
}

.cross-panel-option {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin: 0.3em 0.4em 0.5em;
}

.cross-panel-option > span:first-child {
    flex: 1;
}

.cross-panel-check > span {
    flex: 1;
}

/* One grid for all rows (each row's cells sit in it directly), so the
   columns line up and are as wide as their widest cell. */
.cross-panel-grid {
    display: grid;
    grid-template-columns: auto auto minmax(6em, auto) auto auto;
    align-items: center;
    column-gap: 0.8em;
    row-gap: 0.35em;
}

.cross-panel-row {
    display: contents;
}

/* A phone: the rows have to fit its width - the connect button just 🔑,
   "Show tranche isolated" on two lines. */
@media (max-width: 600px) {
    .cross-connect-text {
        display: none;
    }

    .cross-panel-grid .cross-panel-row .cross-isolate-btn {
        white-space: normal;
        max-width: 6.5em;
        line-height: 1.15;
    }
}

/* An exchange not traded: an empty cell - keeps the grid's columns, takes
   no height. */
.cross-panel-grid .cross-panel-row .cross-isolate-btn[hidden] {
    display: inline-block;
    visibility: hidden;
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
}

/* Smaller than a .btn elsewhere - the row's other cells are plain text. */
.cross-panel-row .btn {
    font-size: 0.85em;
    padding: 0.25em 0.6em;
    min-height: 0;
    white-space: nowrap;
    justify-self: start;
}

.cross-isolate-btn.active {
    background: rgba(41, 98, 255, 0.35);
}

.cross-panel-pick {
    display: flex;
    align-items: center;
    gap: 0.4em;
    cursor: pointer;
}

.cross-panel-contract.is-missing {
    color: var(--color-text-dim);
    font-style: italic;
}

.cross-panel-connected {
    color: #26a69a;
    white-space: nowrap;
}

/* The note wraps to the rows' width instead of setting it. */
.cross-panel-note {
    width: 0;
    min-width: 100%;
    box-sizing: border-box;
    margin: 0.6em 0 0.2em;
    padding: 0 0.4em;
    font-size: 0.85em;
    color: var(--color-text-dim);
}

/* The Tranche dropdown's ⓘ and its explanation (ui/trancheModeHelp.js). */
.tranche-mode-info {
    padding: 0.15em 0.45em;
    min-height: 0;
    margin-left: 0.25em;
    font-size: 0.95em;
    line-height: 1.2;
}

.tranche-help-overlay[hidden] {
    display: none;
}

.tranche-help-box {
    width: min(94vw, 560px);
    overflow-y: auto;
}

.tranche-help-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tranche-help-head h2 {
    flex: 1;
}

.tranche-help-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em;
}

.tranche-help-tab {
    padding: 0.25em 0.7em;
    min-height: 0;
    font-size: 0.9em;
}

.tranche-help-tab.active {
    background-color: #2962FF !important;
    border-color: #1976D2 !important;
    color: #fff !important;
}

.tranche-help-svg {
    width: 100%;
    height: auto;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 0.5em;
}

.tranche-help-steps {
    display: grid;
    min-height: 3.2em;
    margin-top: 0.5em;
}

/* Every step's caption in the same cell - each fades in for its step. */
.tranche-help-step {
    grid-area: 1 / 1;
    opacity: 0;
    color: #fff;
    font-weight: 600;
}

.tranche-help-text {
    margin: 0.6em 0 0;
    line-height: 1.5;
    font-size: 0.92em;
}

.tranche-help-here {
    margin: 0.4em 0 0;
    color: var(--color-text-dim);
    font-size: 0.9em;
}

.tranche-help-here.ok {
    color: #26a69a;
}

@media (prefers-reduced-motion: reduce) {
    .tranche-help-step:first-child {
        animation: none !important;
        opacity: 1;
    }
}

/* The connections panel's Hyperliquid wallets (ui/hyperliquidWallets.js). */
.hl-wallets {
    flex-direction: column;
    align-items: stretch;
}

.hl-wallets-title {
    color: var(--color-text-dim);
    font-size: 0.85em;
    font-weight: 600;
}

.hl-wallet-row {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.hl-wallet-row > span:first-child {
    flex: 1;
}

/* The main wallet's row: stand-ins of the other rows' buttons, so its
   balance lines up with theirs. */
.hl-wallet-row .hl-wallet-spacer {
    visibility: hidden;
}

/* The wallet's number (wallet 1: tranche 1 and the money source). */
.hl-wallet-number {
    width: 3.2em;
    box-sizing: border-box;
    padding: 4px;
    text-align: center;
    background: var(--color-raised);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 4px;
}

/* "Send" between the own wallets (ui/walletSendDialog.js): amount + Max. */
.wallet-send-amount-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wallet-send-amount-row .key-connect-field {
    flex: 1;
}

.wallet-send-amount-row .btn {
    margin-top: 6px;
}

.hl-wallet-add {
    align-self: flex-start;
}