:root {
    /* Soft Modern Color Palette */
    --primary: #7DD3FC;          /* Soft Sky Blue */
    --primary-dark: #38BDF8;     /* Gentle Blue */
    --secondary: #212B3D;        /* Raised panel — the one step ABOVE the ground */
    --accent: #FDE047;           /* Soft Gold */
    /* The pressed/hover shade of --accent. It was written out as #e5c940 in
       three separate files with no name; one gold, one token. */
    --accent-hover: #e5c940;
    --positive: #86EFAC;         /* Soft Green */
    --warning: #FBBF24;          /* Soft Amber */
    --negative: #F87171;         /* Soft Red */
    /* NOT a new colour: #a855f7 is already hardcoded for rangers at
       app.css:13361, mobile.css:2695 and ~8 other sites. Converting those is a
       separate sweep. `.ops-ranger` (app.css:7750) uses #a78bfa, a one-off. */
    --ranger-purple: #a855f7;    /* Ranger / range */
    /* Option TYPE. Not --positive/--negative, which say a P&L sign.
       mobile.css:17 overrides these; the two should converge. */
    --call-green: #4ade80;       /* Call */
    --put-red: #f87171;          /* Put */
    --soft-slate: #64748B;       /* Refined Slate */
    --background: #192234;       /* Page ground — darkest stop of the old gradient, flattened */
    /* ---- THE SURFACE LADDER, re-based on the trade page ----
       --panel-sunken < --card-bg < --background < --secondary
       The order used to run the other way, with cards LIGHTER than the
       ground. Nothing on the trade page was ever painted #20293A: the header
       band and the buy ticket's stat cells both sit on #131A28, so the
       reading pages and the working page shared no surface at all.
       Now #131A28 IS the card. Every panel on every page is the colour of the
       header above it and of the ticket a trader buys through, the page
       ground is the lightest thing on screen and carries the backdrop, and
       cards read as dark cut-outs in it.
       Measured steps: 1.058 / 1.094 / 1.120 in relative luminance — the old
       ladder ran 1.094 / 1.091 / 1.056, so no step got harder to see. Text
       contrast IMPROVED everywhere: --text-muted on a card goes 5.69 -> 6.79.
       Do not re-point one of these at another's value without re-measuring;
       two names on one colour is a ladder with a rung missing. */
    --panel-sunken: #0E1420;     /* Deepest. Sits INSIDE a card: row detail panels, table heads, the execution rail. */
    --card-bg: #131A28;          /* The card, the pane, and the header band. The trade ticket's own surface. */
    --surface: #334155;          /* Surface Color */
    --text-primary: #F8FAFC;     /* High Contrast Text */
    --text-secondary: #CBD5E1;   /* Secondary Text */
    --text-muted: #94A3B8;       /* Muted Text */
    --border-color: rgba(255, 255, 255, 0.09);  /* Hairline border — translucent, so it sits on any surface */
    --border-light: rgba(255, 255, 255, 0.14);  /* Stronger hairline, for emphasis */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --font-size-sm: 0.625rem;
    --font-size-base: 0.75rem;
    --font-size-header: 1.5rem;
    --dropdown-bg: #212B3DF2;
    --dropdown-bg-hover: #475569E6;
    --border-radius: 16px;           /* Standard border radius for all elements */
    --border-radius-circle: 50%;     /* For circular elements */
    --border-radius-pill: 50px;      /* For pill-shaped buttons */
    --border-radius-header: 16px 16px 0 0;  /* For headers with rounded top only */
    --yellow-primary: #FDE047;              /* Primary yellow for highlights and accents */
    /* Formerly the address face. */
    /* User decision 2026-09: NO monospace anywhere. The var stays (its
       consumers are the address/code sites) but resolves to the sans stack —
       alignment comes from font-variant-numeric, never the face. */
    --mono: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Numerals: one face, Inter, everywhere a number is read as a value.
       `--mono` does not apply to number columns — Inter's digits are
       proportional without `font-variant-numeric: tabular-nums`, but with
       it they are as tabular as a mono face. That property, not the face,
       is what makes a column line up. */
    --num: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* The body face, named. It was written out in full in thirty places, and
       once as an undefined var(--sans, inherit) that worked only by fallback. */
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* ---- inner radii ----
       The layout stays square: grid cells meet on shared hairlines and a
       radius there gaps every junction. Content inside a cell gets a soft
       edge — four steps: --r-xs, --r-input, --r-card, --r-pill.
       Use --r-xs for a box under about 20px, or a radius nested inside
       --r-input: a control with 2px padding inside an --r-input container
       needs 6 - 2 = 4px so the inner corner follows the outer one
       (`portfolio.css` .pf-chips / .pf-view); a 16px cell at 6px reads as
       a squircle. */
    --r-xs: 3px;
    --r-input: 6px;
    --r-card: 10px;
    --r-pill: 999px;

    /* ---- THE TYPE LADDER ----
       Six steps. Every `.t-*` class below reads one of these; nothing else
       declares a size.
       11 and 12 sit 1px apart: allowed because 11 is never plain text — it
       is always uppercase, tracked and muted, a different voice rather
       than a smaller step.
       --fs-data is not --font-size-base and must not be folded into it:
       the base is 14 for prose, but the data grid must stay 12, or the
       tables and the metric rail grow 17% and the page stops reading as
       a trading surface. */
    --fs-hero: 2.25rem;      /* 36 — the one figure that answers a card */
    --fs-h1: 1.75rem;        /* 28 — the page title */
    --fs-fig: 1.25rem;       /* 20 — a secondary figure */
    --fs-title: 1rem;        /* 16 — a page or card title */
    --fs-body: 0.875rem;     /* 14 — prose. Already the Phase A base value. */
    --fs-stat: 0.875rem;     /* 14 — a small figure in a stat cell */
    --fs-ui: 0.75rem;        /* 12 — controls, labels, meta */
    --fs-data: 0.75rem;      /* 12 — the data grid. Pinned. See above. */
    --fs-micro: 0.6875rem;   /* 11 — uppercase column headers and badges only */

    /* ---- tracking, bound to the STEP and never to the element ----
       Large numerals tighten, uppercase opens, everything else is 0. Mono
       is always 0 — tracking a fixed-width grid is noise. Do not widen an
       uppercase label past --tr-caps; a wide-tracked 11px caps label reads
       as generated dashboard chrome. */
    --tr-fig: -0.01em;
    --tr-caps: 0.06em;

    /* ---- the page column ----
       One cap for the four redesigned pages: Portfolio, Scoreboard,
       Referrals and Winners. They are reading surfaces, and a table that
       runs the full width of a 27-inch screen makes the eye travel the
       whole span to join a row to its rank.
       The TRADE page is NOT on this cap and must never be: it is a working
       surface with a chart, a book and a ticket side by side, and it takes
       every pixel. It is held full-width by `.container` / `.app-container`
       at app.css:288-305, which are outside every wrapper below.
       Retune HERE, in one place. The binding page is the Scoreboard: its
       pane is this value minus 40px of wrap padding and the 330px rail, and
       its table was MEASURED in Chrome, on real rows, at an intrinsic 801px
       once the 270px streak group moved into the row's expand panel — and at
       850px on a PRIZE week, where the Prize column is drawn. That sets the
       FLOOR: take this under 1220 and the paying board scrolls sideways.
       The value itself is the Hyperliquid portfolio column, MEASURED in
       Chrome at a 1470px viewport on 2026-08-21: its wrapper caps its
       content box at 1312px, so the visible gutter is 79px a side. 1312 + 40
       of wrap padding = 1352, which reproduces that gutter exactly and gives
       the Scoreboard 982px of pane — 132px over the paying floor. */
    --page-max: 1352px;

    /* Mobile aliases for roles the phone alone has (fixed nav, scrims,
       frosted surfaces). Do not start a second mobile palette. */
    --mobile-nav-bg: var(--card-bg);
    --mobile-nav-text: var(--text-muted);
    --mobile-nav-active: var(--text-primary);
    --mobile-overlay: rgba(0, 0, 0, 0.55);
    --mobile-panel: var(--card-bg);
    --mobile-panel-subtle: rgba(255, 255, 255, 0.025);
    --mobile-panel-border: var(--border-color);
    --mobile-focus-ring: var(--primary);
}

/* ============================================================ TYPE CLASSES ==
   Each class sets five properties together — size, weight, family,
   tracking and line-height — so a component never picks any of them.

   A component sets colour, spacing and layout. It does not set
   font-size, font-weight, font-family, letter-spacing or line-height. If
   a component needs something the set has not got, fix the set.

   Not scoped to any id, and not meant to be. These classes carry no
   !important — they win because the sweep deletes the competing
   declaration. Leaving one id-scoped font-size behind lets it beat a
   class at specificity (0,2,1) against the class's (0,1,0).

   Do not name anything `.text-*`. Bootstrap owns that namespace and this
   app already overrides `.text-danger` / `.text-success` / `.text-muted`.
   ========================================================================== */

/* The hero figure is a full step above --fs-fig — the number a trader
   opens the page for should not read as just a heading. Tracking is
   tighter than --tr-fig because a large numeral run opens up on its own. */
.t-hero {
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-hero);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.t-fig {
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-fig);
  font-weight: 700;
  letter-spacing: var(--tr-fig);
  line-height: 1.1;
}
/* The most instantiated figure on a dashboard: the value in a stat cell. */
.t-stat {
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-stat);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
}
/* The page title sits one step under --fs-hero and one over --fs-fig:
   28 is 22% under the hero and 40% over --fs-fig, clearing the 15% gap
   that keeps a step legible as a step.
   Sans and 600, not the numeral face — `.t-fig` is for figures. */
.t-h1 {
  font-family: var(--sans);
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.t-title {
  font-family: var(--sans);
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
}
.t-body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
}
/* Anything the user clicks. It is NOT `.t-body`: a 400-weight button reads as
   a paragraph, which is one of the defects this set exists to remove. */
.t-ctl {
  font-family: var(--sans);
  font-size: var(--fs-ui);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
}
.t-label {
  font-family: var(--sans);
  font-size: var(--fs-ui);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  line-height: 1.2;
  text-transform: uppercase;
}
.t-meta {
  font-family: var(--sans);
  font-size: var(--fs-ui);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
}
.t-col {
  font-family: var(--sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tr-caps);
  line-height: 1.2;
  text-transform: uppercase;
}
/* A number read DOWN a column. INTER, with `tabular-nums` — that pairing is
   what makes the column line up, not the face. Tracking is always 0. */
.t-cell {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-data);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
}
/* The default for a data row, set on `<table>` because the cells are
   generated. Sans, not mono — mono is for columns that hold numbers, and
   those opt in with `.t-cell` or the page's id-scoped column list. Mono
   on the whole row would print word columns (Asset, Type, Status) in a
   fixed-width face: mono aligns numbers, not words. */
.t-table > tbody > tr > td {
  font-family: var(--sans);
  /* Applies to every cell, not only numeric ones — does nothing to a
     word, and no column can be left un-tabular by oversight. */
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-data);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
}

/* ---- modifiers. They inherit; they are not steps. ---- */
/* A number read as a value, inline in a sentence or a label. Takes the
   size and weight of whatever it sits in — do not pin a weight here, or
   an inline figure set at 600 elsewhere would break. */
.t-num {
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
}
/* Emphasis is a state, not a type role — an active tab, a P&L cell
   against its neighbours.
   Never change weight to mark state on a control whose width is set by
   its text: 500 to 700 reflows the letterforms and shifts the tab strip
   on every click. Mark state with colour and the underline instead. */
.t-em { font-weight: 600; }

/* Global custom scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

/* Base Styles */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #192234;
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    font-weight: 400;
    font-size: var(--font-size-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
}

/* Container padding */
.container, .container-fluid {
    padding-left: 2rem;
    padding-right: 2rem;
    max-width: none !important;
    width: 100% !important;
}

/* Reduce mobile margins */
@media (max-width: 991px) {
    .container, .container-fluid {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
}

.app-container {
    max-width: none !important;
    width: 100% !important;
}

@media (min-width: 576px) {
    .container, .container-fluid {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

@media (min-width: 768px) {
    .container, .container-fluid {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}

@media (min-width: 992px) {
    .container, .container-fluid {
        padding-left: 20rem;
        padding-right: 20rem;
    }
}

@media (min-width: 1200px) {
    .container, .container-fluid {
        padding-left: 24rem;
        padding-right: 24rem;
    }
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: var(--font-size-base); }
h4 { font-size: var(--font-size-base); }
h5 { font-size: var(--font-size-base); }
h6 { font-size: var(--font-size-base); }

/* Typography */
.numeric {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

/* Header & Navigation */
/* The header is its own surface, not a transparent strip on the page ground.
   --card-bg (#131A28) is one step BELOW --background (#192234), so the band
   reads as chrome that the page scrolls under, and the hairline is the only
   edge it needs. It is the SAME token every card on every page now uses, so
   the header and the panels under it are one surface family — see the ladder
   note in :root. Do not add a shadow: two edges on one boundary.
   mobile.css:4314 forces `background: transparent !important` under 992px,
   so this is a desktop band only. */
header {
    background: var(--card-bg);
    backdrop-filter: none;
    border-bottom: 1px solid var(--border-color);
    padding: 0rem 0;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    width: 100%;
}

header .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Reduce mobile margins for header */
@media (max-width: 991px) {
    header {
        margin: 0;
        width: 100%;
    }
    
    header .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

@media (min-width: 576px) {
    header {
        margin: 0;
        width: 100%;
    }
    
    header .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (min-width: 768px) {
    header {
        margin: 0;
        width: 100%;
    }
    
    header .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (min-width: 992px) {
    header {
        margin: 0;
        width: 100%;
    }
    
    header .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (min-width: 1200px) {
    header {
        margin: 0;
        width: 100%;
    }
    
    header .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* 56px tall: 12 + the 32px brand box + 12. The two `.navbar` rules that
   follow it (app.css ~6418 and ~6786) are both `max-width`, so this value is
   the desktop one and the phone keeps its own. */
.navbar {
    padding: 0.75rem 0;
}

.navbar-brand {
    color: var(--text-primary);
    padding: 0;
}

.navbar-brand:hover {
    color: var(--text-secondary);
}

.brand-container {
    display: flex;
    align-items: center;
}

.brand-logo {
    height: 20px;
    width: auto;
    margin-right: 10px;
}

.brand-text h1 {
    font-size: 1.25rem;
    margin: 0;
    font-weight: 700;
}

.brand-text h1 span {
    color: var(--primary);
}

.brand-tagline {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    margin: 0;
}

/* `.navbar-expand-lg` is in the selector to beat Bootstrap's rule of the same
   name, which sets 0.5rem and outranks a plain `.navbar-nav .nav-link`. */
.navbar-expand-lg .navbar-nav .nav-link,
.navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.55);
    /* Beside the brand the links read as a set, and a set needs air. */
    padding: 0.25rem 1.25rem;
    transition: color 0.15s ease, background-color 0.15s ease;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 6px;
    /* The active mark is an ::after bar, so the link is its containing block. */
    position: relative;
}

/* The nav states are COLOUR, nothing else. A hover pill and an active bar are
   two extra shapes on a header band that already carries the wallet pill and
   the bell, and the pill's box shifted against the bar's inset. One ladder
   now: muted at rest, white on hover, --primary for the section you are in. */
.navbar-nav .nav-link:hover {
    color: #ffffff;
    background: transparent;
}

.navbar-nav .nav-link.active {
    color: var(--primary);
    background: transparent;
}

.navbar-nav .nav-link.active:hover {
    color: var(--primary);
}

.connected-details .btn-link {
    color: rgba(255, 255, 255, 0.55);
    padding: 0.25rem 0.5rem !important;
    transition: all 0.15s ease;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-decoration: none;
    text-transform: uppercase;
    line-height: 1.5 !important;
}

.connected-details .btn-link:hover,
.connected-details .btn-link:active,
.connected-details .btn-link:focus {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
}

.btn-primary, .btn-secondary {
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Wallet Connection */
.wallet-section {
    margin-left: 0.5rem;
}

.wallet-section-mobile {
    margin-left: 0;
    margin-right: 0;
}

/* ---- WA2. The header wallet controls -----------------------------------
   These were raw `btn btn-primary` / `btn btn-secondary`, then patched back
   into shape with per-id blocks in which EVERY declaration carried
   `!important` — the only way to out-rank Bootstrap from an id. Three ids got
   that treatment; `#connect-base-account-btn` never did, so it still wore the
   framework's own blue.

   One class now, with no `!important` anywhere in it, and the size comes from
   `.t-ctl` in the markup like every other control on the page. The BUTTONS and
   their words are unchanged. */
.wallet-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background: var(--primary);
    border: none;
    color: #0E1420;
    padding: 0.3rem 0.75rem;
    border-radius: var(--r-input);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    box-shadow: none;
}

.wallet-cta:hover {
    background: var(--primary-dark);
    color: #0E1420;
}

/* The second-rank action beside it: same shape, no fill. */
.wallet-cta-alt {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
}

.wallet-cta-alt:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.wallet-cta-danger {
    background: rgba(248, 113, 113, 0.08);
    color: var(--negative);
}

.wallet-cta-danger:hover {
    background: rgba(248, 113, 113, 0.15);
    color: var(--negative);
}

#import-private-key-trigger,
#modal-save-key,
#quick-wallet-explanation .modal-footer .btn-secondary,
#quick-wallet-swap-assets-btn {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    font-size: var(--font-size-base) !important;
    font-weight: 600 !important;
    padding: 0.3rem 0.75rem !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

#import-private-key-trigger:hover,
#modal-save-key:hover,
#quick-wallet-explanation .modal-footer .btn-secondary:hover,
#quick-wallet-swap-assets-btn:hover {
    background: transparent !important;
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}

/* Quick Wallet Modal Styles */
.quick-wallet-modal-content {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    box-shadow: var(--shadow-xl) !important;
    overflow: hidden;
}

.quick-wallet-modal-header {
    background: var(--card-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 0.5rem 1rem !important;
}

#quick-wallet-explanation .btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 1;
}

#quick-wallet-explanation .btn-close-white:hover {
    opacity: 0.75;
}

.quick-wallet-modal-title {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.quick-wallet-modal-body {
    padding: 1rem !important;
    background: var(--card-bg) !important;
}

.quick-wallet-warning {
    color: white;
    font-size: var(--font-size-base);
    margin-bottom: 1rem;
    padding: 0;
    background: transparent;
    border: none;
}

.quick-wallet-warning strong {
    color: var(--warning);
}

.position-detail-modal-content {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    box-shadow: var(--shadow-xl) !important;
    overflow: hidden;
}

.position-detail-modal-header {
    background: var(--card-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 0.5rem 1rem !important;
}

#position-detail-modal .btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 1;
}

#position-detail-modal .btn-close-white:hover {
    opacity: 0.75;
}

.position-detail-modal-title {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.position-detail-modal-body {
    padding: 1rem !important;
    background: var(--card-bg) !important;
}

.quick-wallet-section-title {
    color: var(--text-primary) !important;
    font-size: var(--font-size-base) !important;
    font-weight: 600 !important;
    margin-top: 1rem !important;
    margin-bottom: 0.5rem !important;
}

.quick-wallet-section-title:first-of-type {
    margin-top: 0 !important;
}

.quick-wallet-list {
    color: white;
    font-size: var(--font-size-base);
    margin-bottom: 0.75rem;
    padding-left: 1.25rem;
}

.quick-wallet-list li {
    margin-bottom: 0.25rem;
}

.quick-wallet-list ul {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

.quick-wallet-address-section {
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.quick-wallet-address-label {
    color: var(--text-primary);
    font-size: 0.75rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.quick-wallet-address-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.quick-wallet-address-link {
    display: inline-flex;
    align-items: center;
    color: var(--primary) !important;
    font-size: var(--font-size-base) !important;
    text-decoration: none !important;
    word-break: break-all;
    flex: 1;
    min-width: 0;
    transition: color 0.2s ease;
}

.quick-wallet-address-link:hover {
    color: var(--primary-dark) !important;
    text-decoration: underline !important;
}

.quick-wallet-address-link i {
    font-size: 0.75rem;
    opacity: 0.7;
    flex-shrink: 0;
}

.quick-wallet-address-text {
    word-break: break-all;
    font-size: 1.125rem;
    font-weight: 500;
}

.quick-wallet-copy-btn {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    font-size: var(--font-size-base) !important;
    font-weight: 600 !important;
    padding: 0.3rem 0.75rem !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    white-space: nowrap;
}

.quick-wallet-copy-btn:hover {
    background: transparent !important;
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}

.quick-wallet-modal-footer {
    border-top: 1px solid var(--border-color) !important;
    padding: 1rem !important;
    background: var(--card-bg) !important;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* The `#proceed-funding-btn` id block that stood here is DELETED. It predates
   the unified modal system below and outranked `.odette-btn-primary` on every
   property: it repainted the Fund-with-Card CTA as a transparent 4px outline
   while the Swap and Deposit footers kept the 10px gradient button, so the
   three wallet modals shipped two different primary buttons. Its second
   selector, `#funding-options-modal .modal-footer .btn-secondary`, matched
   nothing at all — that footer is `.odette-modal-footer` with
   `.odette-btn-ghost`. */

/* ========================================
   Odette Unified Modal Design System
   ======================================== */

/* ---- The shared modal shell --------------------------------------------
   Swap Assets, Deposit USDC and Fund with Card all render through these
   classes, so they are consistent by construction — but the shell itself sat
   off the system: it painted `#192234`, which is the page GROUND, so a modal
   floating ABOVE the page was lighter than the page; it used a 16px radius and
   two 8px ones against the four radius tokens; and its title and close glyph
   set their own sizes and a bare `#fff`. On the ladder now, and on --card-bg,
   so a modal reads as a card lifted off the ground like every other panel. */
.odette-modal-content {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--r-card) !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55) !important;
    overflow: hidden;
}

.odette-modal-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.odette-modal-header-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(125, 211, 252, 0.12);
    border-radius: var(--r-input);
    color: var(--primary);
    font-size: 0.95rem;         /* an ICON */
    flex-shrink: 0;
}

/* `.t-title` is on the markup; these two win the !important war Bootstrap's
   `.modal-title` starts, at the ladder's value rather than a literal. */
.odette-modal-title {
    font-family: var(--sans) !important;
    font-size: var(--fs-title) !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
    flex: 1;
    letter-spacing: 0;
}

.odette-modal-close {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--r-input);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    padding: 0;
}

.odette-modal-close:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--border-light);
    color: var(--text-primary);
}

.odette-modal-close i {
    font-size: 0.75rem;
}

.odette-modal-body {
    padding: 1.25rem !important;
    background: transparent !important;
}

.odette-modal-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-color);
    justify-content: flex-end;
}

/* Odette Button System */
.odette-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.55rem 1.25rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border: none;
    border-radius: 10px;
    color: #0A0E14;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    flex: 1;
}

.odette-btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(125, 211, 252, 0.25);
}

.odette-btn-primary:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    filter: none;
    transform: none;
    box-shadow: none;
}

.odette-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.55rem 1.25rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.odette-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
}

.odette-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1rem;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.odette-btn-ghost:hover {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.04);
}

/* Odette Shared Dropdown */
.odette-dropdown-menu {
    width: 100%;
    min-width: auto;
    background: #20293A !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    padding: 0.25rem !important;
    margin-top: 0.3rem !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.odette-dropdown-menu .dropdown-item {
    color: rgba(255, 255, 255, 0.75) !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 6px !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem !important;
    transition: background 0.1s ease;
    border: none !important;
    margin: 1px 0 !important;
}

.odette-dropdown-menu .dropdown-item:hover {
    background: rgba(125, 211, 252, 0.08) !important;
    color: #fff !important;
}

/* The asset list carries the same brand marks as the chip above it. */
.odette-dropdown-menu .dropdown-item img {
    opacity: 1 !important;
}

/* ========================================
   Swap Modal Specifics
   ======================================== */

#swapModal .modal-dialog {
    max-width: 440px;
}

.swap-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.swap-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 0.85rem 1rem;
}

.swap-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
}

.swap-card-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.35);
}

.swap-card-balance {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.35);
}

.swap-max-link {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    margin-left: 0.35rem;
    transition: opacity 0.12s ease;
}

.swap-max-link:hover {
    opacity: 0.7;
}

.swap-card-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.swap-amount-input {
    flex: 1;
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    font-size: 1.35rem;
    font-weight: 600;
    padding: 0;
    outline: none;
    min-width: 0;
    -moz-appearance: textfield;
}

.swap-amount-input::placeholder {
    color: rgba(255, 255, 255, 0.15);
}

.swap-amount-input::-webkit-outer-spin-button,
.swap-amount-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.swap-token-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.65rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.swap-token-btn::after {
    display: none !important;
}

.swap-token-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
}

/* NO blanket `brightness(0) invert(1)` here. A token mark is a brand mark,
   not an icon: USDC and cbBTC are a filled disc with the glyph knocked OUT of
   it, so flattening the whole file to white left a blank white circle — the
   logo disappeared. Only the marks that are dark artwork are inverted, the
   same rule the position modal already applies (`#position-detail-modal
   .pd-logo[alt="ETH"]`): eth-logo.svg fills with currentColor, which an <img>
   resolves to black. */
.swap-token-btn img {
    opacity: 1;
}

.swap-token-btn img[alt="ETH"],
.swap-token-btn img[alt="WETH"],
.odette-dropdown-menu .dropdown-item img[alt="ETH"],
.odette-dropdown-menu .dropdown-item img[alt="WETH"] {
    filter: brightness(0) invert(1);
}

.swap-token-btn i.bi-chevron-down {
    font-size: 0.6rem;
    opacity: 0.5;
}

.swap-token-display {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.65rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
}

.swap-token-display img {
    opacity: 1;
}

.swap-arrow-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -8px 0;
    position: relative;
    z-index: 1;
}

.swap-arrow-circle {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #192234;
    border: 2px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
}

.swap-quick-amounts {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.75rem;
}

.swap-quick-chip {
    flex: 1;
    padding: 0.35rem 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s ease;
    text-align: center;
}

.swap-quick-chip:hover {
    background: rgba(125, 211, 252, 0.06);
    border-color: rgba(125, 211, 252, 0.2);
    color: var(--primary);
}

/* ========================================
   Fund with Card Modal Specifics
   ======================================== */

#funding-options-modal .modal-dialog {
    max-width: 440px;
}

.funding-subtitle {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.72rem;
    margin-bottom: 1.1rem;
    text-align: center;
}

.funding-field {
    margin-bottom: 0.85rem;
}

.funding-field-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 0.35rem;
}

.funding-select-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.6rem 0.85rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s ease;
}

.funding-select-btn::after {
    display: none !important;
}

.funding-select-btn:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
}

.funding-select-btn i.bi-chevron-down {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.3);
}

.funding-dest-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.85rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    margin-top: 0.25rem;
}

.funding-dest-label {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 500;
}

.funding-dest-addr {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--primary) !important;
    font-size: 0.75rem;
    font-family: var(--mono);
    font-weight: 600;
    text-decoration: none !important;
    transition: opacity 0.12s ease;
}

.funding-dest-addr:hover {
    opacity: 0.7;
}

.funding-dest-addr i {
    font-size: 0.6rem;
    opacity: 0.6;
}

/* ========================================
   Deposit Modal Specifics
   ======================================== */

#depositModal .modal-dialog {
    max-width: 440px;
}

.deposit-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.deposit-network-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    background: rgba(125, 211, 252, 0.08);
    border: 1px solid rgba(125, 211, 252, 0.15);
    border-radius: 20px;
    color: var(--primary);
    font-size: 0.7rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* The Base mark keeps its own blue. It is a logo, not one of the badge's
   glyphs, so it does not take `color: var(--primary)`. */
.deposit-network-badge img,
.status-bar-item img.net-mark {
    flex-shrink: 0;
}

.deposit-desc {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.72rem;
    text-align: center;
    margin-bottom: 1rem;
}

.deposit-addr-card {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    align-items: center;
}

.deposit-addr-text {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    word-break: break-all;
    text-align: center;
    line-height: 1.5;
}

.deposit-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    background: rgba(125, 211, 252, 0.08);
    border: 1px solid rgba(125, 211, 252, 0.2);
    border-radius: 8px;
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s ease;
}

.deposit-copy-btn:hover {
    background: rgba(125, 211, 252, 0.15);
}

.deposit-warning {
    display: flex;
    gap: 0.6rem;
    padding: 0.75rem 0.85rem;
    background: rgba(251, 191, 36, 0.06);
    border: 1px solid rgba(251, 191, 36, 0.15);
    border-radius: 10px;
    margin-top: 1rem;
    width: 100%;
}

.deposit-warning-icon {
    color: rgba(251, 191, 36, 0.7);
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.deposit-warning-text {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.45;
}

.deposit-warning-text strong {
    color: rgba(251, 191, 36, 0.8);
}

/* Responsive styles for all Odette modals */
@media (max-width: 576px) {
    #swapModal .modal-dialog,
    #funding-options-modal .modal-dialog,
    #depositModal .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    .odette-modal-body {
        padding: 1rem !important;
    }

    .odette-modal-footer {
        flex-direction: column;
        padding: 0.85rem 1rem;
    }

    .odette-btn-primary,
    .odette-btn-secondary,
    .odette-btn-ghost {
        width: 100%;
    }
}

/* Initially hide connected wallet details - JavaScript will show them when connected */
.connected-details {
    display: none;
}

/* Show connected details when wallet is connected */
.wallet-section .connected .connected-details {
    display: flex !important;
}

/* Make wallet action buttons smaller */
#save-private-key {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.7rem !important;
    min-width: auto !important;
    height: auto !important;
    line-height: 1.2 !important;
}

.wallet-section #connect-wallet {
    background-color: var(--primary);
    border-color: var(--primary);
    font-weight: 500;
}

.wallet-section .connected-details {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    color: var(--primary);
    overflow: visible;
}

.address-display {
    font-family: 'Inter', sans-serif;
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;
    margin-right: 0.5rem;
}

.connection-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: var(--positive);
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 0.5rem;
}

/* Consistent styling for wallet action buttons */
.connected-details .btn {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
    line-height: 2;
    border-width: 1px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    vertical-align: middle;
    box-sizing: border-box;
}

/* Disconnect button - exclude from .connected-details .btn styling */
.connected-details .btn-primary {
    font-size: inherit !important;
    padding: inherit !important;
    line-height: inherit !important;
}

.connected-details .btn i {
    font-size: var(--font-size-base);
}

/* Ensure all outline button variants have identical dimensions */
.connected-details .btn-outline-secondary,
.connected-details .btn-outline-info,
.connected-details .btn-outline-danger {
    border-width: 1px !important;
    border-style: solid !important;
}


/* Main Content Sections */
main {
    padding: 0;
}

/* Trade section specific styles */
#trade-section {
    padding-bottom: 2rem;
    padding-top: 0;
    margin-top: 0;
    min-height: calc(100vh - 200px);
}

.content-section {
    margin-bottom: 2rem;
    margin-left: 0;
    width: 100%;
    overflow: visible;
}

#positions-section,
#history-section,
#scoreboard-section {
    padding-top: 0;
    margin-top: 0;
    overflow: visible;
}

.history-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.history-stat-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 0.6rem 0.7rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.history-stat-card-wide {
    grid-column: span 2;
}

.history-stat-label {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: rgba(255, 255, 255, 0.4);
}

.history-stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-stat-value.hist-positive {
    color: var(--positive);
}

.history-stat-value.hist-negative {
    color: var(--negative);
}

.section-header {
    margin-bottom: 3rem;
}

/* Professional Asset Header */
.professional-asset-header {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
    box-shadow: none;
    backdrop-filter: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible;
}

/* Asset Selection Modal */
/* Custom modal backdrop */
.asset-selection-buttons {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    width: 100%;
}

.asset-selection-btn {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 1rem 0.35rem;
    color: #ffffff;
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: auto;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    z-index: 1;
    pointer-events: auto;
    user-select: none;
    font-weight: 600;
    font-size: 0.75rem;
    gap: 0.3rem;
}

.asset-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.25rem;
    width: 100%;
}

.asset-selection-btn .asset-icon:not(img) {
    font-size: 1.1rem;
    color: #ffffff;
    filter: brightness(0) invert(1);
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.asset-selection-btn img.asset-icon {
    width: 25px;
    height: 25px;
    object-fit: contain;
    flex-shrink: 0;
    background: transparent;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.asset-selection-btn[data-asset="ETH"] img.asset-icon,
.asset-selection-btn[data-asset="XRP"] img.asset-icon {
    filter: brightness(0) invert(1);
}

.asset-selection-btn .asset-name {
    font-weight: 600;
    font-size: 0.72rem;
    text-align: center;
    white-space: nowrap;
    line-height: 1.1;
    display: block;
    width: 100%;
    color: rgba(255, 255, 255, 1);
    letter-spacing: 0.02em;
    transition: color 0.2s ease;
}

.asset-selection-btn .asset-price {
    font-weight: 600;
    font-size: 0.58rem;
    text-align: center;
    white-space: nowrap;
    line-height: 1;
    display: block;
    width: 100%;
    color: var(--text-secondary, #94a3b8);
    transition: color 0.2s ease;
}

.asset-selection-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}

.asset-selection-btn:active {
    transform: translateY(0);
}

.asset-selection-btn.selected {
    background: transparent;
    border: none;
    box-shadow: none;
    color: #ffffff;
}

/* The selected-asset tile. It was a solid `rgba(56, 152, 236, 0.85)` block —
   a blue that is not --primary — at a 14px radius that is not one of the four
   tokens, and it was heavy enough that the asset logo had to be flattened to
   white (`brightness(0) invert(1)`) to survive on top of it. Now it is a
   translucent accent tile on a hairline, the same treatment as the header
   controls, so the logo keeps its own colours and the mark still reads as
   selected at a glance. */
.asset-slide-indicator {
    position: absolute;
    left: 4px;
    width: calc(100% - 8px);
    background: rgba(125, 211, 252, 0.13);
    border: 1px solid rgba(125, 211, 252, 0.35);
    border-radius: var(--r-card);
    transition: top 0.25s cubic-bezier(0.4, 0, 0.2, 1), height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
    pointer-events: none;
}

/* .asset-slide-indicator::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateX(100%) translateY(-50%);
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid rgba(56, 152, 236, 0.85);
} */

.asset-selection-btn.selected:hover {
    background: transparent;
    border: none;
    box-shadow: none;
}

.asset-selection-btn.selected .asset-icon:not(img),
.asset-selection-btn.selected img.asset-icon {
    filter: none;
    opacity: 1;
}

/* ETH and XRP ship as dark-on-transparent marks, so they still need lifting —
   but to WHITE only, not flattened onto a blue fill that no longer exists. */
.asset-selection-btn.selected[data-asset="ETH"] img.asset-icon,
.asset-selection-btn.selected[data-asset="XRP"] img.asset-icon {
    filter: brightness(0) invert(1);
    opacity: 1;
}

.asset-selection-btn.selected .asset-name {
    color: var(--primary);
}

.asset-selection-btn.selected .asset-price {
    color: rgba(255, 255, 255, 0.7);
}

.professional-asset-header:hover {
    transform: none;
    box-shadow: none;
    background: transparent;
}

.asset-header-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 0.25rem;
    border-top: none;
}

/* Asset Selector Section */
/* Asset Selector Top - New section at the top */
.asset-selector-wrapper {
    border: none;
    border-radius: var(--border-radius);
    padding: 0;
    background: rgba(0, 0, 0, 0.22);
}

.trade-unified-layout {
    display: flex;
    flex-direction: row;
    height: clamp(480px, calc(100vh - 90px), 850px);
    overflow: hidden;
}

.trade-panel-main {
    flex: 2;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.trade-panel-main-inner {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
}

.trade-vertical-divider {
    display: none;
}

.trade-panel-preview {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: transparent;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.trade-panel-preview .trade-preview-sidebar {
    position: relative;
    top: auto;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0.35rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.trade-panel-preview .trade-preview-section {
    display: flex;
    flex-direction: column;
}

.trade-panel-preview .trade-actions {
    margin-top: auto !important;
}

.asset-selector-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
}

.asset-selector-top .asset-selector {
    width: 100%;
}

.asset-sidebar {
    width: 65px;
    flex-shrink: 0;
    border-right: none;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    box-shadow: inset -8px 0 20px -8px rgba(0, 0, 0, 0.25);
}

/* Asset choice moved into the title-row select. Keep the existing hidden
   button source for the shared pricing/selection code, but reserve no rail. */
.trade-unified-layout > .asset-sidebar {
    display: none;
}

.trade-asset-select {
    min-width: 112px;
    min-height: 36px;
    padding: 0 30px 0 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--r-control);
    appearance: auto;
    background: rgba(255,255,255,.04);
    color: var(--text-primary);
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.trade-asset-select:hover { border-color: rgba(125, 211, 252, .45); }
.trade-asset-select:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.trade-asset-select:disabled { opacity: .62; cursor: wait; }

/* The desktop grid defines the old rail again later in this legacy sheet.
   This late, explicit override removes it at every breakpoint. */
.trade-unified-layout > .asset-sidebar {
    display: none !important;
}

.trade-asset-select {
    appearance: none;
    background-color: #172131;
    background-image: linear-gradient(45deg, transparent 50%, #aebbd0 50%), linear-gradient(135deg, #aebbd0 50%, transparent 50%);
    background-position: calc(100% - 15px) 15px, calc(100% - 10px) 15px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    color: #f4f6fb;
}

.trade-asset-select option { background: #172131; color: #f4f6fb; }

.asset-sidebar::-webkit-scrollbar {
    display: none;
}

.asset-sidebar .asset-selection-buttons {
    flex: none;
}

/* Header Wallet Pill */
.header-wallet-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--r-card);
    padding: 0.3rem 0.65rem 0.3rem 0.5rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.75rem;
    font-weight: 500;
}

.header-wallet-pill:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--border-light);
}

.header-wallet-pill .connection-dot {
    margin-right: 0;
}

.header-wallet-chevron {
    font-size: 0.55rem;
    opacity: 0.4;
    margin-left: 0.1rem;
}

/* ========================================
   Wallet Panel

   WA3/WA4. The block below used to carry 14 literal font-sizes, six literal
   border-radius values (4 / 8 / 10 / 12 / 16 / 50%) against the four the app
   allows, and `rgba(56, 152, 236, …)` written out six times — a blue that is
   not --primary and has no name. Sizes are `.t-*` classes in the markup now,
   radii read the four tokens, and every colour reads a token.

   The MARKUP did not change. Same elements, same words, same order.
   ======================================== */

.wallet-panel {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 0;
}

.wp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.wp-identity {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.wp-avatar {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(125, 211, 252, 0.14);
    border: none;
    border-radius: var(--r-input);
    color: var(--primary);
    font-size: 0.95rem;         /* an ICON, not text — the ladder governs text */
    flex-shrink: 0;
}

.wp-addr-col {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

/* No `.t-*` class on this one: an address is compared glyph by glyph, so it
   keeps --mono, and every `.t-*` class would set --sans over it. It reads the
   ladder's size token directly instead. */
.wp-addr {
    font-family: var(--mono);
    font-size: var(--fs-ui);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wp-basescan {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.12s ease;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.wp-basescan:hover {
    color: var(--primary);
}

.wp-basescan i {
    font-size: 0.7em;
}

.wp-status-dot {
    width: 8px;
    height: 8px;
    background: var(--positive);
    border-radius: var(--border-radius-circle);
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(134, 239, 172, 0.4);
}

/* Balance card */
.wp-balance-card {
    background: rgba(255, 255, 255, 0.04);
    border: none;
    border-radius: var(--r-card);
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    text-align: center;
}

.wp-balance-label {
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.wp-balance-value {
    color: var(--text-primary);
}

/* Section label */
.wp-section-label {
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

/* Action buttons */
.wp-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.wp-action-btn {
    position: relative;         /* the badge is lifted out of the row's width */
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
    background: rgba(255, 255, 255, 0.03);
    border: none;
    border-radius: var(--r-card);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.12s ease;
    text-align: left;
    width: 100%;
}

.wp-action-btn:hover {
    background: rgba(255, 255, 255, 0.07);
}

.wp-action-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    border-radius: var(--r-input);
    flex-shrink: 0;
    font-size: 0.9rem;          /* an ICON */
    color: var(--text-muted);
}

.wp-action-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
}

.wp-action-desc {
    color: var(--text-muted);
}

/* Out of the flex row on purpose. In the row it took 66px of a 340px popover
   and squeezed "Purchase USDC via credit card" onto two lines, so that one
   action stood 71px tall against its neighbours' 55px. Lifted to the corner it
   costs the description nothing, and the three rows measure the same. */
.wp-badge {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.07);
    /* --tr-caps adds a trailing space after the last letter, which reads as a
       lopsided chip. The right pad is cut by that much to put the word back in
       the middle of its own box. */
    padding: 0.3rem 0.5rem 0.3rem 0.55rem;
    border-radius: var(--r-xs);
    border: none;
    /* `line-height: 1` cuts the box to the em, and uppercase sits high in the
       em, so the caps touched the top edge while a gap opened at the bottom.
       1.2 gives the caps the same air above and below. */
    line-height: 1.2;
    flex-shrink: 0;
}

/* Only the row that HAS a badge reserves room for it — and BOTH lines do.
   The description is the longer of the two, so reserving on the label alone
   left the description running under the chip. */
.wp-action-btn:has(.wp-badge) .wp-action-label,
.wp-action-btn:has(.wp-badge) .wp-action-desc {
    padding-right: 4.6rem;
}

/* Disconnected state */
.wp-disconnected-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2.5rem 1.5rem;
    flex: 1;
}

.wp-disconnected-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(125, 211, 252, 0.12);
    border: none;
    border-radius: var(--r-card);
    font-size: 1.5rem;          /* an ICON */
    color: var(--primary);
    margin-bottom: 1rem;
}

.wp-disconnected-title {
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}

.wp-disconnected-desc {
    color: var(--text-muted);
    margin-bottom: 1.25rem;
    max-width: 260px;
}

.wp-connect-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 240px;
    padding: 0.6rem 1rem;
    background: var(--primary);
    border: none;
    border-radius: var(--r-card);
    color: #0E1420;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 0.5rem;
}

.wp-connect-btn:hover {
    background: var(--primary-dark);
}

.wp-connect-btn-alt {
    background: rgba(255, 255, 255, 0.06);
    border: none;
    color: var(--text-secondary);
}

.wp-connect-btn-alt:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

/* Connected state wrapper */
.wp-connected-state {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Divider */
.wp-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0.75rem 0;
}

/* Disconnect button */
.wp-disconnect-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.5rem;
    background: rgba(248, 113, 113, 0.08);
    border: none;
    border-radius: var(--r-card);
    color: var(--negative);
    cursor: pointer;
    transition: all 0.12s ease;
}

.wp-disconnect-btn:hover {
    background: rgba(248, 113, 113, 0.15);
    color: var(--negative);
}

/* ==========================================================================
   HEADER TOOLS — the alert bell, and the anchor both popovers hang from.

   Alerts and Wallet used to sit at the foot of `.asset-sidebar`, wearing
   `.asset-selection-btn` — the same class as ETH and BTC — and their handlers
   took `.selected` and dragged the asset indicator onto themselves. A rail
   that means "pick an asset" held two buttons that picked nothing. Both are
   account-level, so both now live beside the account.

   Neither popover hides the page under it. The old Set Alert click hid eleven
   trade elements and swapped a panel in; that is a dialog wearing a rail
   item's clothes. `setPanelMode()` and `.panel-open` went with it.

   Sizes are `.t-*` classes in the markup. Nothing here sets a font-size that
   is not a token, and nothing here mixes a colour by hand.
   ========================================================================== */

.hdr-tools {
    position: relative;          /* both popovers anchor to this box */
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* The bell. Shaped like `.header-wallet-pill` on purpose — they are siblings
   doing the same kind of job, so they must not read as two different ranks. */
.hdr-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    /* A rounded RECTANGLE, matching the address pill beside it. A circle made
       the bell read as a different kind of control from its own neighbour. */
    border: 1px solid var(--border-color);
    border-radius: var(--r-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    font-size: 0.95rem;
    padding: 0;
}

.hdr-pill:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--border-light);
    color: var(--text-primary);
}

/* Open is a state, so it gets the accent, not a hover shade. */
.hdr-pill[aria-expanded="true"] {
    background: rgba(125, 211, 252, 0.12);
    border-color: rgba(125, 211, 252, 0.45);
    color: var(--primary);
}

/* The count. --accent, because an armed alert is a watch, not a warning and
   not a profit. It goes red only when it fires, and that is a notification,
   not this badge. */
.hdr-pill-count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #12161F;
    border-radius: var(--r-pill);
    font-family: var(--num);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-micro);
    font-weight: 700;
    line-height: 1;
    border: 2px solid var(--card-bg);
}

.hdr-pill-count[hidden] { display: none; }

/* ---- The shared popover -------------------------------------------------
   One shell for both surfaces. Two hand-built toggles, each with its own
   boolean and its own jQuery show/hide, is what this replaces. */
.hdr-pop {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1080;               /* over the sticky header, under a modal */
    /* 372, not 340. "Purchase USDC via credit card" and the US ONLY chip both
       want the same 340px line: the chip is lifted out of the flex row, so the
       description ran under it. The extra 32px is what the chip needs to clear
       the longest description. */
    width: 372px;
    max-height: min(78vh, 620px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--r-card);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
    padding: 0.9rem;
}

/* The closed resting state. The panel is ALWAYS rendered — it is never
   `hidden` and never `display: none` — because a box the browser has removed
   cannot animate. `visibility` is what keeps a closed panel out of the tab
   order and off the accessibility tree, and it is transitionable, so it
   flips at the END of the close instead of the start. */
.hdr-pop {
    visibility: hidden;
    opacity: 0;
    transform: scale(0.96) translateY(-4px);
    pointer-events: none;
}

.hdr-pop.is-open {
    visibility: visible;
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

.hdr-pop-wallet { padding: 0; }

/* The panel was written to fill a column. In a popover it must measure its
   own content, or it stretches to the max-height and leaves a dead field. */
.hdr-pop-wallet .wallet-panel {
    height: auto;
    padding: 1rem;
}

@media (max-width: 991.98px) {
    /* One answer for the phone: the popover becomes a sheet pinned under the
       header, not a 340px card floating off the right edge. */
    .hdr-pop {
        position: fixed;
        top: 60px;
        right: 8px;
        left: 8px;
        width: auto;
        max-height: calc(100vh - 76px);
    }
}

/* ---- The alert surface -------------------------------------------------- */

.alp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.alp-title { color: var(--text-primary); }

.alp-close {
    background: transparent;     /* a bare <button> paints buttonface, which is
                                    a light grey box on this ground */
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.2rem;
    line-height: 1;
    font-size: 0.7rem;
    border-radius: var(--r-input);
}

.alp-close:hover { color: var(--text-primary); }

.alp-notif {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.6rem;
    margin-bottom: 0.75rem;
    border-radius: var(--r-input);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}

.alp-notif i { flex: 0 0 auto; }
.alp-notif > .t-meta { flex: 1 1 auto; }

.alp-notif.is-granted { color: var(--positive); border-color: rgba(134, 239, 172, 0.28); }
.alp-notif.is-denied  { color: var(--negative); border-color: rgba(248, 113, 113, 0.28); }
.alp-notif.is-ask     { color: var(--warning);  border-color: rgba(251, 191, 36, 0.28); }

.alp-notif-btn {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
    border-radius: var(--r-input);
    padding: 0.15rem 0.5rem;
    cursor: pointer;
}

.alp-notif-btn[hidden] { display: none; }

.alp-form { display: flex; flex-direction: column; gap: 0.6rem; flex: 0 0 auto; }

.alp-row { display: flex; gap: 0.6rem; }
.alp-row .alp-field { flex: 1 1 0; min-width: 0; }

.alp-field { display: flex; flex-direction: column; gap: 0.3rem; }

.alp-label { color: var(--text-muted); }

.alp-input {
    width: 100%;
    background: var(--panel-sunken);
    border: 1px solid var(--border-color);
    border-radius: var(--r-input);
    color: var(--text-primary);
    padding: 0.4rem 0.55rem;
}

.alp-input:focus {
    outline: none;
    border-color: var(--primary);
}

/* ---- the two listboxes -------------------------------------------------
   Built on the portfolio pager's pattern (`.pgr-sel` / `.pgr-pop` /
   `.pgr-opt`, app.css) so the two surfaces read as one app — same sunken
   field, same hairline, same rotating chevron, same always-in-layout tick.
   The one difference is direction: the pager sits at the foot of a table and
   opens UP; these sit at the head of a popover and open DOWN.

   Not a <select>. The UA paints a native popup with the OS — on macOS a light
   menu with a blue highlight — which is the one element on a dark page a
   stylesheet cannot reach, and it was drawing its own chevron hard against
   the field's edge. */
.alp-menu { position: relative; }

.alp-sel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: var(--r-input);
    background: var(--panel-sunken);
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.alp-sel:hover,
.alp-sel.is-open { border-color: var(--border-light); }

.alp-sel:focus-visible { outline: none; border-color: var(--primary); }

.alp-sel-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.alp-sel i {
    flex: 0 0 auto;
    font-size: 0.7rem;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}

.alp-sel.is-open i { transform: rotate(180deg); }

.alp-pop {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    max-height: 226px;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: 4px;
    list-style: none;
    border: 1px solid var(--border-light);
    border-radius: var(--r-input);
    background: var(--secondary);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

.alp-pop[hidden] { display: none; }

.alp-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 6px;
    border-radius: var(--r-xs);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.alp-opt:hover { background: rgba(255, 255, 255, 0.07); color: var(--text-primary); }

/* The tick is always in the layout, invisible when unselected — otherwise the
   labels shift sideways as the selection moves. */
.alp-opt i { opacity: 0; font-size: 0.8rem; color: var(--primary); }
.alp-opt.is-on { color: var(--text-primary); font-weight: 600; }
.alp-opt.is-on i { opacity: 1; }

.alp-price-field {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--panel-sunken);
    border: 1px solid var(--border-color);
    border-radius: var(--r-input);
    padding: 0.35rem 0.55rem;
}

.alp-price-field:focus-within { border-color: var(--primary); }

.alp-price-unit { color: var(--text-muted); flex: 0 0 auto; }

.alp-price-field .alp-input {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--text-primary);
}

.alp-price-field .alp-input:focus { border: none; }

/* Chrome's number spinners crowd a right-aligned figure. */
.alp-input::-webkit-outer-spin-button,
.alp-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.alp-input[type=number] { -moz-appearance: textfield; appearance: textfield; }

.alp-now {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    color: var(--text-muted);
}

.alp-now-asset { color: var(--text-secondary); font-weight: 600; }

.alp-now-val {
    font-family: var(--num);
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

.alp-create {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.5rem;
    background: var(--primary);
    border: none;
    border-radius: var(--r-card);
    color: #0E1420;
    cursor: pointer;
    transition: background 0.15s ease;
}

.alp-create:hover { background: var(--primary-dark); }

.alp-feedback {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    border-radius: var(--r-input);
    background: rgba(134, 239, 172, 0.10);
    border: 1px solid rgba(134, 239, 172, 0.28);
    color: var(--positive);
}

.alp-feedback[hidden] { display: none; }

.alp-divider {
    height: 1px;
    background: var(--border-color);
    margin: 0.85rem 0 0.7rem;
}

.alp-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.45rem;
    color: var(--text-muted);
}

.alp-list-n {
    font-family: var(--num);
    font-variant-numeric: tabular-nums;
}

/* ---- ONE scroll region, and it is the list ------------------------------
   A fixed 208px cap here was not enough. At ten alerts the popover's own
   content still came to 594px against a 593px cap, so BOTH the shell and the
   list scrolled — two nested scrollbars — and "Send a test notification" sat
   below the shell's fold where no amount of scrolling the list would reach it.

   The shell is a flex column that never scrolls. Every part except the list is
   `flex: 0 0 auto`, so nothing else can be squeezed or pushed out. The list is
   `flex: 0 1 auto` with `min-height: 0` — it takes its natural height while
   there is room, and it is the ONLY thing that gives when the popover reaches
   its cap. Short list: the popover sizes to its content and nothing scrolls at
   all. Long list: the form stays put, the test button stays put, and the rows
   scroll between them. The visible row count follows the screen instead of a
   number typed in here. */
.hdr-pop-alert {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hdr-pop-alert > *:not(.alp-list) {
    flex: 0 0 auto;
}

.alp-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 0 1 auto;
    min-height: 0;              /* without this a flex child will not shrink */
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* A cut-off row is the only thing telling a trader there are more alerts below,
   and the rows happen to divide evenly, so the last visible one sits flush and
   the list reads as complete. The count beside ACTIVE says 10 while three are
   on screen. Fade the bottom edge when, and only when, the list actually
   overflows — the class is set from the render, against a real measurement, not
   from a row count that would be wrong at a different window height. */
.alp-list.is-scrollable {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent 100%);
}

.alp-empty {
    padding: 0.7rem 0;
    text-align: center;
    color: var(--text-muted);
}

.alp-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.55rem;
    background: var(--panel-sunken);
    border: 1px solid var(--border-color);
    border-radius: var(--r-input);
}

/* Direction is a Bootstrap Icon, as every other directional mark in the app
   is. The emoji pair it replaces rendered at the OS's size and colour, which
   no token could reach. */
.alp-item-dir { flex: 0 0 auto; font-size: 0.7rem; }
.alp-item-dir.is-above { color: var(--positive); }
.alp-item-dir.is-below { color: var(--negative); }

.alp-item-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.alp-item-main { color: var(--text-primary); }

.alp-item-main .alp-item-px {
    font-family: var(--num);
    font-variant-numeric: tabular-nums;
}

.alp-item-sub { color: var(--text-muted); }

.alp-item-del {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.2rem 0.3rem;
    border-radius: var(--r-input);
    font-size: 0.75rem;
}

.alp-item-del:hover { color: var(--negative); }

.alp-test {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    margin-top: 0.7rem;
    padding: 0.4rem;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--r-input);
    color: var(--text-muted);
    cursor: pointer;
}

.alp-test:hover { color: var(--text-primary); border-color: var(--border-light); }

.get-usdc-dropdown {
    background: #20293A;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.4rem 0;
    min-width: 190px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.get-usdc-dropdown .dropdown-item {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.78rem;
    padding: 0.45rem 0.9rem;
    transition: background 0.1s ease;
}

.get-usdc-dropdown .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.get-usdc-dropdown .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.08);
    margin: 0.25rem 0;
}

.trade-content {
    flex: 1;
    min-width: 0;
    padding: 0.25rem 0.75rem 0;
    overflow-y: auto;
}

.trade-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.5rem 0.25rem;
}

.trade-asset-title {
    font-size: 1.8rem;
    /* 600, to sit with the spot price at 700. Both are 28.8px, so a 400 against
       a 700 read as two typefaces instead of two levels. */
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    padding: 0;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.trade-title-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.trade-title-logo[data-asset="ETH"],
.trade-title-logo[data-asset="XRP"] {
    filter: brightness(0) invert(1);
}

.trade-price-condition {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.trade-spot-price {
    /* The hero number on the page. It was 1.8rem at weight 400 — the right
       size with none of the emphasis, so it read as body text. */
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.1;
    color: #ffffff;
    text-align: right;
}

.trade-condition-icon {
    position: relative;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    opacity: 1;
    transition: opacity 0.2s ease;
    font-size: 1.3rem;
}

.trade-condition-icon:hover {
    opacity: 1;
}

.trade-condition-tooltip {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0.18s ease;
    z-index: 99999;
    background: linear-gradient(160deg, #242D3E 0%, #20293A 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 0;
    color: white;
    font-size: 0.78rem;
    white-space: normal;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04);
    width: 230px;
    overflow: hidden;
}

.trade-condition-icon:hover .trade-condition-tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.alert-condition-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.25rem 0.5rem;
}

.asset-dropdown-btn {
    background: var(--dropdown-bg);
    border: none;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius);
    font-weight: 700;
    font-size: var(--font-size-header);
    box-shadow: var(--shadow-lg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.asset-dropdown-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.asset-dropdown-btn:hover::before {
    left: 100%;
}

.asset-dropdown-btn:hover {
    background: var(--dropdown-bg-hover);
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl);
}

.asset-dropdown-btn:focus {
    box-shadow: 0 0 0 4px rgba(125, 211, 252, 0.4);
}

.asset-dropdown-menu {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    width: 100%;
}

.asset-dropdown-menu .dropdown-item {
    color: var(--text-primary);
    padding: 1rem 1.5rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    font-size: var(--font-size-base);
    font-weight: 500;
}

.asset-dropdown-menu .dropdown-item:hover {
    background-color: rgba(0, 184, 212, 0.1);
    color: var(--primary);
}

/* Asset Info Container */
.asset-info {
    display: flex;
    align-items: center;
}

/* ETH Icon Styling */
/* Asset Info Display - Now in asset selector */
/* Price Display - Compact in asset selector */
.price-display {
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 0;
    padding: 0.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
    width: 100%;
}


.slider-labels-above {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}

.slider-label {
    font-weight: 500;
    font-size: 0.65rem;
    white-space: nowrap;
    letter-spacing: 0.04em;
    opacity: 0.6;
}

.puts-label {
    color: var(--negative);
}

.calls-label {
    color: var(--positive);
}

.strike-slider-track {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.slider-inner-container {
    flex: 1;
    position: relative;
    overflow: visible;
    margin-bottom: 14px;
}

.slider-disabled-track {
    display: none;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 8px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    z-index: 1;
    pointer-events: none;
}

.slider-disabled-track.visible {
    display: block;
}

.slider-disabled-track .disabled-endcap {
    position: absolute;
    top: 0;
    width: 8px;
    height: 100%;
    border-radius: var(--border-radius);
}

.slider-disabled-track .disabled-endcap-left {
    left: 0;
    background: rgba(255, 255, 255, 0.08);
}

.slider-disabled-track .disabled-endcap-right {
    right: 0;
    background: rgba(255, 255, 255, 0.08);
}

.strike-slider-track .slider-tooltip {
    z-index: 9999;
}

#strike-slider-tooltip {
    display: none !important;
}

.strike-slider {
    width: 100%;
    height: 8px;
    /* Flat put zone / call zone, hard edge at the middle. This is only the
       pre-JS state; `updateSliderBackground` moves the edge to the real spot. */
    background: linear-gradient(to right, rgba(248, 113, 113, 0.35) 0%, rgba(248, 113, 113, 0.35) 50%, rgba(134, 239, 172, 0.35) 50%, rgba(134, 239, 172, 0.35) 100%);
    border-radius: 4px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    z-index: 2;
    cursor: pointer;
    transition: all 0.2s ease;
}

.strike-slider:hover {
    box-shadow: none;
}

.strike-slider:focus {
    outline: none;
    box-shadow: none;
}

.strike-slider::-webkit-slider-runnable-track {
    background: transparent;
    border-radius: 4px;
    height: 8px;
}

.strike-slider::-moz-range-track {
    background: transparent;
    border-radius: 4px;
    height: 8px;
    border: none;
}

.strike-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: white;
    border: none;
    border-radius: var(--border-radius-circle);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.15s ease;
    margin-top: -4px;
    z-index: 4;
}

.strike-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.strike-slider::-webkit-slider-thumb:active {
    transform: scale(1.05);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.strike-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: white;
    border: none;
    border-radius: var(--border-radius-circle);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.15s ease;
    z-index: 4;
}

.strike-slider::-moz-range-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.slider-ticks {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 12px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 3;
}

.slider-tick {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.25);
    z-index: 3;
    pointer-events: auto;
    cursor: pointer;
}

.slider-tick-label {
    position: absolute;
    top: calc(50% + 12px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    white-space: nowrap;
    text-align: center;
    z-index: 10;
    letter-spacing: 0.01em;
    transition: color 0.15s ease, font-weight 0.15s ease;
}

.slider-tick.tick-put .slider-tick-label {
    color: rgba(248, 113, 113, 0.7);
}

.slider-tick.tick-call .slider-tick-label {
    color: rgba(134, 239, 172, 0.7);
}

.slider-tick.active .slider-tick-label {
    font-weight: 700;
    font-size: 0.75rem;
}

.slider-tick.active.tick-put .slider-tick-label {
    color: rgba(248, 113, 113, 1);
}

.slider-tick.active.tick-call .slider-tick-label {
    color: rgba(134, 239, 172, 1);
}

.slider-tick.active {
    background: rgba(255, 255, 255, 0.5);
}

/* Comprehensive mobile responsive adjustments for strike price labels */

/* Mobile screens (max 768px) */
@media (max-width: 768px) {
    .slider-tick-label {
        display: none !important;
    }
    
    .slider-labels-above {
        display: none;
    }
    
    .strike-slider::-webkit-slider-thumb {
        width: 14px;
        height: 14px;
        margin-top: -3px;
    }
    
    .strike-slider::-moz-range-thumb {
        width: 14px;
        height: 14px;
    }
}

/* Tablet landscape (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .slider-tick-label {
        font-size: 0.7rem;
        min-width: 100px;
        max-width: 120px;
        padding: 0 15px;
    }
    
    .current-strike-display {
        margin-top: 1.25rem;
    }
    
    /* Hide most labels, show only every 4th */
    .slider-tick .slider-tick-label {
        display: none;
    }
    
    .slider-tick:nth-child(4n) .slider-tick-label {
        display: block;
    }
    
    /* Always show first, last, and market price labels */
    .slider-tick:first-child .slider-tick-label,
    .slider-tick:last-child .slider-tick-label,
    .slider-tick.market-price-tick .slider-tick-label {
        display: block !important;
    }
    
    /* Mobile wallet section styling for tablets */
    .wallet-section-mobile {
        margin-right: 0.25rem;
        order: 2; /* Position mobile wallet section after brand but before hamburger */
        display: flex;
        align-items: center;
        flex-shrink: 1; /* Allow wallet to shrink if needed */
    }
    
    .wallet-section-mobile .connected-details {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 0;
        max-width: 250px;
        box-shadow: none;
        backdrop-filter: none;
    }
    
    .wallet-section-mobile .connected-details .address-display {
        font-size: 0.7rem;
        font-weight: 500;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 120px;
        flex: 1;
    }
    
    .wallet-section-mobile .connected-details .btn {
        font-size: 0.6rem;
        padding: 0.25rem 0.5rem;
        min-width: auto;
        flex-shrink: 0;
    }
    
    .wallet-section-mobile .connected-details .connection-dot {
        width: 8px;
        height: 8px;
        background-color: var(--positive);
        border-radius: 50%;
        flex-shrink: 0;
        margin-left: 0.25rem;
    }
}

/* Specific fix for 820px width screens */
@media (min-width: 800px) and (max-width: 850px) {
    .slider-tick-label {
        font-size: 0.65rem;
        min-width: 120px;
        max-width: 140px;
        padding: 0 20px;
    }
    
    /* Show only every 5th label */
    .slider-tick .slider-tick-label {
        display: none;
    }
    
    .slider-tick:nth-child(5n) .slider-tick-label {
        display: block;
    }
    
    /* Always show first, last, and market price labels */
    .slider-tick:first-child .slider-tick-label,
    .slider-tick:last-child .slider-tick-label,
    .slider-tick.market-price-tick .slider-tick-label {
        display: block !important;
    }
}

/* iPad Pro and tablet screens (1024px - 1366px) */
@media (min-width: 1024px) and (max-width: 1366px) {
    .slider-tick-label {
        font-size: 0.6rem;
        min-width: 150px;
        max-width: 180px;
        padding: 0 25px;
    }
    
    .current-strike-display {
        margin-top: 1.5rem;
    }
    
    /* Show only every 6th label - very conservative for iPad */
    .slider-tick .slider-tick-label {
        display: none;
    }
    
    .slider-tick:nth-child(6n) .slider-tick-label {
        display: block;
    }
    
    /* Always show first, last, and market price labels */
    .slider-tick:first-child .slider-tick-label,
    .slider-tick:last-child .slider-tick-label,
    .slider-tick.market-price-tick .slider-tick-label {
        display: block !important;
    }
}

/* iPad landscape (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .slider-tick-label {
        font-size: 0.6rem;
        min-width: 130px;
        max-width: 160px;
        padding: 0 20px;
    }
    
    /* Show only every 7th label - very conservative for iPad landscape */
    .slider-tick .slider-tick-label {
        display: none;
    }
    
    .slider-tick:nth-child(7n) .slider-tick-label {
        display: block;
    }
    
    /* Always show first, last, and market price labels */
    .slider-tick:first-child .slider-tick-label,
    .slider-tick:last-child .slider-tick-label,
    .slider-tick.market-price-tick .slider-tick-label {
        display: block !important;
    }
}

.slider-tick.market-price-tick {
    background: var(--accent);
    height: 16px;
    width: 3px;
    box-shadow: 0 0 8px rgba(253, 224, 71, 0.6);
}

.slider-tick.market-price-tick .slider-tick-label {
    color: var(--accent);
    font-weight: 600;
}

.market-price-indicator {
    position: absolute;
    top: 0;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.market-price-line {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 16px;
    background: var(--accent);
    border-radius: 1px;
    box-shadow: 0 0 4px rgba(253, 224, 71, 0.5);
}

.market-price-label {
    position: absolute;
    bottom: calc(50% + 12px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    color: var(--accent);
    font-weight: 500;
    background: rgba(0, 0, 0, 0.75);
    padding: 2px 6px;
    border-radius: 3px;
    white-space: nowrap;
    z-index: 20;
    opacity: 0.85;
}

/* ===== RANGER OPTION ZONES (Range Bets) ===== */

.ranger-zones-container {
    position: relative;
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Every zone button inside is position:absolute, so this box has NO
       content height of its own — renderRangerZones() sets its height from
       the row count (rows x 54px). .strike-slider-track is a height-capped
       flex column (v2 pins it inset:0), so a shrinkable item would have that
       computed height discarded: a 2-row set collapsed back to the 56px
       min-height and the second row painted over the strikes table below.
       The JS height is authoritative; do not let flex shrink it. */
    flex-shrink: 0;
}

.ranger-zones-container:empty {
    display: none;
}

/* Dimmed state when directional option is selected */
.ranger-zones-container.dimmed .ranger-zone-button {
    background: rgba(147, 51, 234, 0.08);
    border-left-color: rgba(168, 85, 247, 1);
    border-right-color: rgba(168, 85, 247, 1);
}

.ranger-zones-container.dimmed .ranger-zone-button:hover {
    background: rgba(147, 51, 234, 0.25);
    border-left-color: rgba(168, 85, 247, 1);
    border-right-color: rgba(168, 85, 247, 1);
}

/* Dimmed state for individual unselected ranger buttons when one is selected */
.ranger-zone-button.dimmed {
    background: rgba(147, 51, 234, 0.08);
    border-left-color: rgba(168, 85, 247, 1);
    border-right-color: rgba(168, 85, 247, 1);
}

.ranger-zone-button.dimmed:hover {
    background: rgba(147, 51, 234, 0.25);
    border-left-color: rgba(168, 85, 247, 1);
    border-right-color: rgba(168, 85, 247, 1);
}

/* Dimmed state for directional slider when Ranger is selected */
.slider-ticks.dimmed .slider-tick {
    opacity: 0.35;
}

.strike-slider.dimmed {
    opacity: 0.5;
}

/* Ranger badge for trade preview */
.ranger-badge {
    display: inline-block;
    background: linear-gradient(135deg, #9333ea 0%, #a855f7 100%);
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Spread width badge shown next to zone range */
.spread-width-badge {
    color: var(--text-secondary);
    font-size: 0.8em;
    font-weight: 400;
    margin-left: 4px;
    cursor: help;
    border-bottom: 1px dotted var(--text-secondary);
}

.spread-width-badge:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ===== RANGER ZONE BUTTONS (Simplified Selection) ===== */

.ranger-zone-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    height: 48px;
    padding: 4px 8px;
    background: rgba(147, 51, 234, 0.35);
    border: none;
    border-left: 2px solid rgba(168, 85, 247, 1);
    border-right: 2px solid rgba(168, 85, 247, 1);
    border-radius: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 5;
}

.ranger-zone-button:hover {
    background: rgba(147, 51, 234, 0.35);
    border-left-color: rgba(168, 85, 247, 0.9);
    border-right-color: rgba(168, 85, 247, 0.9);
    box-shadow: 0 2px 8px rgba(147, 51, 234, 0.25);
    z-index: 10;
}

.ranger-zone-button.selected {
    background: rgba(147, 51, 234, 0.4);
    border-left: 2px solid #a855f7;
    border-right: 2px solid #a855f7;
    box-shadow: 0 2px 10px rgba(147, 51, 234, 0.3);
    color: #fff;
    z-index: 15;
}

.ranger-btn-label {
    font-size: 0.6rem;
    font-weight: 600;
    color: #a855f7;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
}

.ranger-zone-button.selected .ranger-btn-label {
    color: #d8b4fe;
}

.ranger-btn-multiplier {
    color: #d8b4fe;
    font-weight: 500;
    font-size: 0.6rem;
    line-height: 1;
}

.ranger-zone-button.selected .ranger-btn-multiplier {
    color: #f3e8ff;
}

/* Mobile responsive - Ranger zones */
@media (max-width: 768px) {
    .ranger-zones-container {
        margin-top: 16px;
        gap: 8px;
    }

    .ranger-zone-button {
        font-size: 0.65rem;
        padding: 2px 4px;
        height: 28px;
    }
}

.current-strike-display {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0rem;
    padding: 0.75rem;
    background: rgba(43, 56, 74, 0.6);
    border-radius: var(--border-radius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 1.5rem;
}

.strike-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.strike-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
}

.strike-price-combined {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
}

.strike-price-combined.call-type {
    color: var(--positive);
}

.strike-price-combined.put-type {
    color: var(--negative);
}

.option-type {
    font-size: 1rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    background: var(--accent);
    color: var(--background);
}

.option-type.call-type {
    background: var(--positive);
    color: var(--background);
}

.option-type.put-type {
    background: var(--negative);
    color: var(--background);
}

.option-type.itm {
    box-shadow: 0 0 12px rgba(0, 255, 0, 0.4);
    border: 2px solid rgba(0, 255, 0, 0.6);
}

.option-type.otm {
    opacity: 0.8;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

.profit-statement {
    text-align: center;
    font-size: 0.75rem;
    color: white;
    opacity: 0.9;
}

.profit-direction {
    font-weight: 700;
}

.trade-preview-profit-statement {
    text-align: center;
    font-size: 0.85rem;
    color: #f4d03f;
    padding: 0.6rem 0.75rem;
    margin-top: 0.5rem;
    border-radius: 6px;
    background: rgba(244, 208, 63, 0.08);
    border: 1px solid rgba(244, 208, 63, 0.15);
    font-weight: 500;
}

.trade-preview-profit-statement:empty {
    display: none;
}

.trade-preview-profit-statement .profit-direction {
    font-weight: 700;
    color: #fff;
}

.trade-preview-profit-statement .profit-highlight {
    color: #facc15;
    font-weight: 600;
    /* Prose, so it stays in Inter — mono inside a sentence reads as a defect.
       Tabular figures only, which touch digits and leave [ETH] / [below]
       alone. Without this the countdown reflows the line every second. */
    font-variant-numeric: tabular-nums;
}

.price-label {
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.price-display .price-value {
    color: var(--yellow-primary);
    font-weight: 900;
    font-size: 2rem !important;
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.05em;
    text-shadow: 0 0 15px rgba(253, 224, 71, 0.4);
    margin: 0;
    text-align: center;
    animation: pulse-urgent 1.5s ease-in-out infinite alternate;
}

/* Countdown Display - Compact in asset selector */
@keyframes pulse-urgent {
    from {
        text-shadow: 0 0 15px rgba(253, 224, 71, 0.4);
        transform: scale(1);
    }
    to {
        text-shadow: 0 0 25px rgba(253, 224, 71, 0.6);
        transform: scale(1.02);
    }
}

/* Alert Button - Modern Pill Design */
.alert-button {
    background: none;
    border: none;
    padding: 0.5rem 1rem;
    color: var(--yellow-primary);
    font-weight: 600;
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.alert-button:hover {
    color: #FFC107;
    text-decoration: underline;
}

.alert-button-inline {
    background: none;
    border: none;
    padding: 0;
    margin-left: 0.5rem;
    color: var(--yellow-primary);
    font-weight: 600;
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.alert-button-inline:hover {
    color: #FFC107;
    text-decoration: underline;
}

/* Active alerts visual feedback */
.alert-button-inline.btn-warning {
    background: rgba(255, 193, 7, 0.15) !important;
    border: 1px solid var(--yellow-primary) !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.25rem;
}

.alert-button-inline.btn-warning:hover {
    background: rgba(255, 193, 7, 0.25) !important;
}

/* Market Weather Indicator */
.weather-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: help;
    transition: all 0.2s ease;
    user-select: none;
    font-size: 0.75rem;
    font-weight: 600;
    border-bottom: 1px dotted currentColor;
    color: var(--primary);
    background: rgba(255, 193, 7, 0.15);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.weather-asset-symbol {
    display: none;
}

.weather-price {
    display: none;
}

.weather-divider {
    display: none;
}

.weather-indicator-wrapper {
    position: relative;
    display: inline-block;
}

.weather-indicator:hover {
    opacity: 0.8;
}

.weather-tooltip-popup {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 10px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 99999;
}

.weather-indicator-wrapper:hover .weather-tooltip-popup {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.weather-tooltip-content {
    background-color: #20293A;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    color: white;
    font-size: 0.875rem;
    white-space: nowrap;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    min-width: 180px;
}

.weather-tooltip-content::after {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 20px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #20293A;
}

.weather-tooltip-title {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.weather-tooltip-range {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}

.weather-tooltip-description {
    color: #4A9EFF;
    font-size: 0.8rem;
}

.weather-icon-emoji {
    font-size: 0.9rem;
    line-height: 1;
}

.weather-label {
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.65rem;
}

.weather-volatility-badge {
    padding: 0.1rem 0.3rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: #ffffff;
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 2rem;
    text-align: center;
}

.weather-indicator.stable .weather-volatility-badge {
    background: rgba(76, 175, 80, 0.3);
    color: #4caf50;
}

.weather-indicator.slight-chop .weather-volatility-badge {
    background: rgba(255, 193, 7, 0.3);
    color: #ffc107;
}

.weather-indicator.volatile .weather-volatility-badge {
    background: rgba(255, 152, 0, 0.3);
    color: #ff9800;
}

.weather-indicator.highly-volatile .weather-volatility-badge {
    background: rgba(244, 67, 54, 0.3);
    color: #f44336;
}

.weather-icon {
    font-size: 1.2rem;
    cursor: help;
    transition: transform 0.2s ease;
    user-select: none;
}

.weather-icon:hover {
    transform: scale(1.2);
}

/* Weather Tooltip Inner Styling */
.wt-row {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    white-space: normal;
    word-wrap: break-word;
}

.wt-row:last-child { border-bottom: none; }

.wt-row--header {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.wt-label {
    font-weight: 700;
    font-size: 0.8rem;
}

.wt-badge {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.12rem 0.4rem;
    border-radius: 8px;
    margin-left: auto;
}

.wt-badge--stable { background: rgba(76, 175, 80, 0.2); color: #66bb6a; }
.wt-badge--slight-chop { background: rgba(255, 193, 7, 0.2); color: #ffd54f; }
.wt-badge--volatile { background: rgba(255, 152, 0, 0.2); color: #ffb74d; }
.wt-badge--highly-volatile { background: rgba(244, 67, 54, 0.2); color: #ef5350; }
.wt-badge--positive { background: rgba(76, 175, 80, 0.35); color: #fff; }
.wt-badge--negative { background: rgba(244, 67, 54, 0.35); color: #fff; }

.wt-row--detail {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.35;
}

.wt-row--warn {
    font-size: 0.68rem;
    color: rgba(255, 193, 7, 0.8);
    line-height: 1.35;
}

.wt-row--forecast {
    font-size: 0.68rem;
    color: rgba(100, 181, 246, 0.85);
    font-weight: 500;
    line-height: 1.35;
}

/* Legacy tooltip classes kept for backward compat */
.weather-current {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.weather-volatility {
    font-size: 0.9rem;
    color: #aaa;
    margin-bottom: 0.5rem;
}

.weather-forecast {
    font-size: 0.9rem;
    color: #ffc107;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.weather-disclaimer {
    font-size: 0.85rem;
    color: #ffc107;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #444;
}

/* Responsive Design */
@media (max-width: 768px) {
    .market-info-content {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* Mobile wallet section styling for tablets and mobile */
    .wallet-section-mobile {
        margin-right: 0.25rem;
        order: 2; /* Position mobile wallet section after brand but before hamburger */
        display: flex;
        align-items: center;
        flex-shrink: 1; /* Allow wallet to shrink if needed */
    }
    
    .wallet-section-mobile .connected-details {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 0;
        max-width: 250px;
        box-shadow: none;
        backdrop-filter: none;
    }
    
    .wallet-section-mobile .connected-details .address-display {
        font-size: 0.7rem;
        font-weight: 500;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 120px;
        flex: 1;
    }
    
    .wallet-section-mobile .connected-details .btn {
        font-size: 0.6rem;
        padding: 0.25rem 0.5rem;
        min-width: auto;
        flex-shrink: 0;
    }
    
    .wallet-section-mobile .connected-details .connection-dot {
        width: 8px;
        height: 8px;
        background-color: var(--positive);
        border-radius: 50%;
        flex-shrink: 0;
        margin-left: 0.25rem;
    }
}

/* Legacy .info-label/.info-value removed - no longer used */

.alert-count {
    color: var(--warning);
    font-weight: 600;
    font-size: var(--font-size-base);
}

.price-value {
    color: var(--primary);
    font-weight: 800;
    font-size: 1.5rem;
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.025em;
    text-shadow: 0 0 10px rgba(125, 211, 252, 0.3);
}

/* FIRST of two `.countdown` blocks. The second one below redefines colour,
   weight, family, size and tracking, so only the glow and the pulse here still
   apply. Left in place: `.countdown` is also used on the Positions page and on
   the phone. The glow is switched off for the trade-page strip in the
   min-width:992px block. */
.countdown {
    color: var(--warning);
    font-weight: 800;
    font-family: var(--num);
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    text-shadow: 0 0 10px rgba(255, 193, 7, 0.4);
    animation: pulse-glow 2s ease-in-out infinite alternate;
}

@keyframes pulse-glow {
    from {
        text-shadow: 0 0 10px rgba(255, 193, 7, 0.4);
    }
    to {
        text-shadow: 0 0 20px rgba(255, 193, 7, 0.6);
    }
}

.price-value {
    font-size: var(--font-size-base);
    font-weight: 800;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.025em;
}

.price-alert-btn {
    background: rgba(255, 165, 0, 0.1);
    border: 1px solid rgba(255, 165, 0, 0.3);
    color: var(--warning);
    padding: 0.75rem;
    border-radius: var(--border-radius);
    height: 90px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

.price-alert-btn:hover {
    background: var(--warning);
    color: var(--background);
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--shadow-lg);
}

/* Remove old time-display styles since we're using new structure */

.expiry-info, .countdown-info {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-secondary);
}

.expiry-info i, .countdown-info i {
    color: var(--primary);
    font-size: var(--font-size-base);
}

.countdown {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-base);
    color: var(--warning);
    letter-spacing: -0.025em;
}

/* View Controls Section */
.view-controls-section {
    display: flex;
    justify-content: flex-end;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    border-top: none;
}

.view-text-links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.view-link {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    font-size: 0.65rem;
    font-weight: 500;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    letter-spacing: 0.04em;
    transition: all 0.15s ease;
}

.view-link:hover {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.06);
    text-decoration: none;
}

.view-link.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    font-weight: 600;
}

.view-separator {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

/* Analytics Text Links */
.analytics-text-links {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.analytics-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: all 0.2s ease;
    background: transparent;
}

.analytics-link:hover {
    color: var(--accent);
    background: rgba(253, 224, 71, 0.1);
    text-decoration: none;
}

.analytics-link.active {
    color: var(--accent);
    background: #3a4a3a;
    font-weight: 600;
}

.analytics-separator {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

/* Expiry Filter Section */
.expiry-filter-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 0;
    margin-top: 0.25rem;
    padding: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top: none;
    border-bottom: none;
}

.expiry-filter-section .filter-label {
    display: none;
}

.filter-label-left {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.selected-expiry-display {
    font-weight: 700;
    color: var(--primary);
    background: rgba(255, 193, 7, 0.15);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.selected-strike-wrapper {
    position: relative;
    display: inline-block;
}

.selected-strike-display {
    font-weight: 700;
    color: var(--primary);
    cursor: help;
    border-bottom: 1px dotted currentColor;
    background: rgba(255, 193, 7, 0.15);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.profit-tooltip {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 10px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 99999;
}

.selected-strike-wrapper:hover .profit-tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.profit-tooltip-content {
    background-color: #20293A;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.profit-tooltip-content:empty::before {
    content: 'Select an option';
}

.profit-tooltip-content::after {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 20px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #20293A;
}

.filter-label-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.view-controls-section-below {
    display: none;
}

.strike-section-box {
    width: 100%;
    margin-bottom: 0;
    margin-top: 1rem;
    padding: 0.75rem 1rem 1.5rem;
    /* No field behind the panel. The chart, the slider and the advanced
       controls each carry their own surface, so a tint under all three only
       showed through as a smudge. The side you are on is now said by the
       hairline alone, which states it without colouring the data. */
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.06);
    /* The real corner comes from the radius sweep below, which squares every
       structural junction and then hands each tier back by name. */
    border-radius: var(--r-card);
    overflow: visible;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.strike-section-box.theme-put {
    border-color: rgba(220, 80, 80, 0.18);
}

.strike-section-box.theme-call {
    border-color: rgba(134, 239, 172, 0.18);
}

.strike-section-box.theme-range {
    border-color: rgba(160, 90, 210, 0.18);
}

.filter-label.prediction-prompt {
    text-transform: none !important;
    font-weight: 400;
}

.prediction-prompt span {
    font-size: 0.85rem;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.3px;
}

.amount-prompt {
    font-size: 0.85rem;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0.3px;
    margin-bottom: 0.5rem;
}

.section-divider {
    border-top: none;
    margin: 0.5rem 0;
}

.select-amount-section {
    padding: 0.75rem 1rem 1rem;
    background: radial-gradient(100% 333.15% at 100% 0%, rgba(255, 255, 255, 0) 0%, rgba(80, 120, 220, 0.07) 100%) rgba(80, 120, 220, 0.03);
    border: none;
    border-radius: 12px;
    margin-top: 0.75rem;
}

/* Amount header row */
.amount-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    padding: 0.4rem 0.65rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    border: 1.5px solid transparent;
    transition: border-color 0.2s ease;
}

.amount-header-row.exceeds-balance {
    border-color: rgba(239, 68, 68, 0.8);
}

.amount-label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.amount-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.amount-value {
    /* Second tier: the size you are about to trade. 0.95rem gave the most
       consequential input on the page the weight of a caption. */
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
}

.amount-balance-text {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 500;
}

/* Amount slider */
.amount-slider-row {
    margin-bottom: 0.6rem;
    padding: 0 0.15rem;
}

.amount-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
    cursor: pointer;
}

.amount-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    border: 2px solid var(--background);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.amount-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    border: 2px solid var(--background);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Amount presets */
.amount-presets {
    display: flex;
    gap: 0.3rem;
    margin-bottom: 0.6rem;
}

.amount-preset {
    flex: 1;
    padding: 0.3rem 0.25rem;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.12s ease;
    text-align: center;
}

.amount-preset:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
}

.amount-preset.active {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.trade-preview-section {
    padding-top: 0;
}

/* Trade Preview Sidebar (now embedded inside asset-selector-wrapper) */
.trade-preview-sidebar {
    position: relative;
    top: auto;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0.35rem;
}

.trade-preview-sidebar .trade-preview-section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.trade-preview-sidebar .option-details-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.trade-preview-sidebar .detail-card {
    width: calc(100% + 2rem) !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    margin-left: -1rem;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.trade-preview-sidebar .detail-card:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.trade-preview-sidebar .detail-label {
    font-size: 0.7rem !important;
}

.trade-preview-sidebar .detail-value {
    font-size: 1rem !important;
}

.trade-preview-sidebar .detail-sub-value {
    font-size: 0.7rem !important;
}

.trade-preview-sidebar .option-action {
    font-size: 1.1rem !important;
    margin-bottom: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.trade-preview-sidebar .trade-actions {
    margin-top: 0.75rem !important;
    margin-bottom: 0 !important;
}

.trade-preview-sidebar .trade-actions .btn,
.trade-preview-sidebar #trade-now-btn {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    border-radius: 6px !important;
}

/* Below xxl: no extra side margin so trade border aligns with header */
@media (max-width: 1399.98px) {
    .asset-selector-wrapper {
        margin: 0;
    }
}

/* Mobile: Hide inline preview, stack layout vertically */
@media (max-width: 991.98px) {
    .trade-unified-layout {
        flex-direction: column;
        height: auto;
        overflow: visible;
    }

    .trade-vertical-divider,
    .trade-panel-preview {
        display: none;
    }

    .asset-sidebar {
        width: 100%;
        border-right: none;
        flex-direction: row;
        position: relative;
        overflow: visible;
    }

    .asset-sidebar .asset-selection-buttons {
        flex-direction: row;
    }

    .trade-panel-main-inner {
        flex-direction: column;
    }

    .trade-content {
        padding: 0;
    }

    .asset-slide-indicator {
        display: none;
    }
    
    .trade-preview-sidebar .detail-card {
        width: calc(100% + 2rem) !important;
        margin-left: -1rem;
    }
    
    .trade-preview-sidebar .option-action {
        margin-left: -1rem;
        margin-right: -1rem;
    }
    
    .trade-preview-section .detail-value {
        font-size: 1.25rem !important;
    }
    
    .trade-preview-section .option-action {
        font-size: 1rem !important;
    }
}

.trade-preview-section .professional-asset-header {
    padding: 0;
    background: transparent !important;
}

.trade-preview-section .option-action {
    margin-bottom: 1rem;
}

.trade-preview-section .detail-card {
    background: none;
    border: none;
    padding: 0.5rem 0;
    border-radius: 0;
}

.trade-preview-section .detail-icon {
    display: none;
}

.trade-preview-section .detail-label {
    font-size: 0.875rem;
}

.trade-preview-section .detail-value {
    font-size: 1.5rem !important;
}

.trade-preview-section .detail-sub-value {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.trade-preview-section .detail-sub-value span {
    color: var(--accent);
}

.trade-preview-section .detail-card:hover {
    background: none;
    border: none;
    transform: none;
    box-shadow: none;
}

.trade-preview-section .option-details-grid {
    background: transparent;
}

.select-amount-header {
    display: none;
}

.select-amount-section .slider-container {
    display: none;
}

.premium-display-value {
    font-weight: 700;
    color: var(--primary);
    background: rgba(255, 193, 7, 0.15);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.position-size-labels-above {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.position-size-labels-above .size-label {
    font-weight: 600;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    background: none;
    padding: 0;
    border-radius: 0;
}

.balance-row {
    display: none;
}

.balance-left {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
    line-height: 1;
}

#usdc-balance-display {
    color: #fff !important;
}

.filter-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.25rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--font-size-base);
    font-weight: 700;
    text-transform: uppercase;
}

.filter-label-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    position: relative;
    overflow: visible;
}

.professional-asset-header .filter-label-section {
    margin-top: 1rem;
    padding-top: 1rem;
}

.strike-section-box .filter-label-section {
    margin-top: 0.25rem;
    padding-top: 0;
}

/* Strike price label spacing */
.position-size-container .filter-label {
    margin-bottom: 1rem;
}

.filter-label i {
    display: none;
}

.yellow-icon {
    display: none;
}

.asset-label-header {
    display: none;
}

.asset-label-header .asset-price-section {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.asset-label-header .price-display-inline {
    display: flex;
    align-items: center;
}

.asset-label {
    display: none;
    align-items: center;
    justify-content: flex-start;
    font-size: var(--font-size-base);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0;
    text-transform: uppercase;
}

.asset-label-header .alert-button-inline {
    position: relative;
}

.asset-label i {
    display: none;
}

.expiry-filter-toggle {
    width: 100%;
}

.expiry-filter-toggle .btn-group {
    width: 100%;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    gap: 0.4rem;
}

.expiry-filter-toggle .btn {
    background: rgba(40, 50, 70, 0.6);
    border: none;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.45rem 0.85rem;
    border-radius: 6px !important;
    transition: all 0.2s ease;
    flex: 1;
    box-shadow: none;
    white-space: nowrap;
}

.expiry-filter-toggle .btn:hover {
    background: rgba(20, 28, 40, 0.7);
    color: rgba(255, 255, 255, 0.7);
}

.expiry-filter-toggle .btn-check:checked + .btn {
    background: rgba(56, 152, 236, 0.85);
    color: #ffffff;
    box-shadow: none;
    border: none;
}

.expiry-filter-toggle .btn br {
    display: none;
}

.expiry-filter-toggle .btn span[id^="countdown-"] {
    display: inline;
    margin-left: 0.4rem;
    font-weight: 400;
    opacity: 0.6;
}

.expiry-filter-toggle .btn-check:checked + .btn span[id^="countdown-"] {
    opacity: 0.8;
}

@media (max-width: 768px) {
    .expiry-filter-toggle .btn br {
        display: block;
    }
    
    .expiry-filter-toggle .btn span[id^="countdown-"] {
        display: block;
        margin-left: 0;
    }
}

/* Responsive Design */
@media (max-width: 992px) {
    
    .price-info-section {
        order: 1;
    }
}

@media (max-width: 768px) {
    .professional-asset-header {
        padding: 0.5rem;
    }
    
    .asset-dropdown-btn {
        padding: 0.5rem 1rem;
        font-size: var(--font-size-header);
        width: 100%;
    }
    
    .price-value {
        font-size: var(--font-size-base);
    }
    
    /* Stack price and countdown vertically on small screens */
    
    .market-info-card {
        padding: 0.5rem;
    }
    
    .strike-slider-track .slider-label {
        display: none;
    }
    
    .expiry-filter-section {
        width: 100%;
    }
    
    .expiry-filter-toggle {
        width: 100%;
    }
    
    .expiry-filter-toggle .btn-group {
        width: 100%;
    }
    
    .expiry-filter-toggle .btn {
        flex: 1;
    }
    
    .asset-selection-btn {
        flex: 0 0 calc((100% - 0.75rem) / 2);
    }
    
    .asset-selection-btn .asset-icon:not(img),
    .asset-selection-btn img.asset-icon {
        width: 16px;
        height: 16px;
        font-size: 1rem;
    }
    
    .asset-selection-btn .asset-name {
        font-size: 0.9rem;
    }
    
    .asset-selection-btn .asset-price {
        font-size: 0.75rem;
    }
}

/* Trade Card */
.trade-card {
    background: rgba(30, 41, 59, 0.7);
    border: none;
    border-radius: var(--border-radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    overflow: hidden;
    margin-bottom: 1.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.trade-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    background: rgba(30, 41, 59, 0.8);
}

.trade-card .card-body {
    padding: 1.25rem 1.25rem 0rem 1.25rem;
}

.card-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: var(--font-size-base);
    margin-bottom: 0.75rem;
    letter-spacing: -0.025em;
    margin-left: 1.25rem;
    margin-right: 1.25rem;
}

/* Reduce spacing for trade preview h5 elements */
.option-preview .card-title {
    margin-bottom: 0.25rem;
}

/* Option Type Selection */

.leverage-indicator {
    position: relative;
    text-align: center;
    margin: 1rem 0;
    background-color: rgba(0, 184, 212, 0.1);
    color: var(--primary);
    padding: 0.25rem 1rem;
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    font-weight: 600;
}

.leverage-value {
    color: var(--accent);
}

.option-type-groups {
    display: flex;
    gap: 1rem;
    margin: 0.25rem 0;
}

.option-button {
    background: rgba(43, 56, 74, 0.8);
    border: none;
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    position: relative;
    font-size: 1rem;
    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.025em;
}

.option-button:hover {
    background: var(--dropdown-bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.option-button.selected {
    background: var(--accent);
    color: var(--background);
    box-shadow: 0 2px 4px rgba(253, 224, 71, 0.3);
}

.option-button.put-option {
    /* Left border color removed */
    color: var(--negative);
}

.option-button.call-option {
    /* Left border color removed */
    color: var(--positive);
}

.option-button.put-option.selected {
    background: var(--accent);
    color: var(--background);
    box-shadow: 0 2px 4px rgba(253, 224, 71, 0.3);
}

.option-button.call-option.selected {
    background: var(--accent);
    color: var(--background);
    box-shadow: 0 2px 4px rgba(253, 224, 71, 0.3);
}

.option-strike {
    font-size: 1rem;
    font-weight: 600;
}

.selected-option-text {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: var(--primary);
    font-size: var(--font-size-base);
}

/* Position Size Slider */
.position-size-container {
    padding: 0;
    margin: 0;
}

.professional-asset-header .position-size-container {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.slider-title {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 0;
    margin-bottom: 0.125rem;
}

.slider-title-wrapper .slider-title {
    display: block;
}

.slider-title i {
    color: var(--primary);
    font-size: 1rem;
}

.slider-title span {
    color: var(--primary);
    font-weight: 700;
    margin-left: 0.5rem;
}

.slider-title-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    padding-right: 2.5rem;
}

.slider-title-wrapper > button {
    position: absolute;
    top: 0;
    right: 0;
}

.slider-value {
    color: var(--primary);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.2;
}

.slider-asset {
    color: var(--primary);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.2;
}

/* Quick Amount Buttons */
.quick-amount-buttons {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    margin-bottom: 10px;
    width: 100%;
}

@media (max-width: 768px) {
    .quick-amount-buttons {
        grid-template-columns: repeat(2, 1fr);
    }
}

.quick-amount-btn {
    background: var(--dropdown-bg);
    border: none;
    color: white;
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius);
    font-weight: 700;
    font-size: var(--font-size-base);
    box-shadow: var(--shadow-lg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    white-space: normal;
    text-align: center;
    line-height: 1.1;
    position: relative;
    overflow: hidden;
}

.quick-amount-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.quick-amount-btn:hover::before {
    left: 100%;
}

.quick-amount-btn:hover {
    background: var(--dropdown-bg-hover);
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl);
}

.quick-amount-btn:focus {
    box-shadow: 0 0 0 4px rgba(125, 211, 252, 0.4);
}

.quick-amount-btn.active {
    background: var(--accent);
    color: var(--background);
    box-shadow: 0 2px 4px rgba(253, 224, 71, 0.3);
}

.quick-amount-btn.active .crypto-amount {
    color: var(--background) !important;
}

.quick-amount-btn.active .dollar-amount {
    color: var(--background) !important;
}

/* Style the ETH/BTC amounts to be darker and not bold */
.quick-amount-btn .crypto-amount {
    color: #9ca3af !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
    display: block !important;
}

.quick-amount-btn .dollar-amount {
    color: white !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    display: block !important;
}

.quick-amount-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.quick-amount-btn.disabled .crypto-amount,
.quick-amount-btn.disabled .dollar-amount {
    color: var(--text-muted) !important;
}

.position-size-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    font-weight: 500;
}

.slider-container {
    margin-top: 3rem;
}

.size-label {
    background: rgba(0, 0, 0, 0.1);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    min-width: fit-content;
}

.current-size-display {
    text-align: center;
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(125, 211, 252, 0.1);
    border: 1px solid rgba(125, 211, 252, 0.2);
    border-radius: var(--border-radius);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.025em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Asset Info (used in swap modal) */
.asset-info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.asset-info i {
    font-size: 1.4rem;
}

.asset-name {
    font-weight: 600;
    font-size: 1rem;
}

.asset-balance {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    opacity: 0.8;
}

/* Balance loading spinner */
.asset-balance.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.asset-balance .spinner-border-sm {
    width: 0.75rem;
    height: 0.75rem;
    border-width: 0.1rem;
    border-color: var(--text-secondary);
    border-right-color: transparent;
}

/* Mobile responsive - stack vertically */
@media (max-width: 768px) {
    .asset-buttons-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .asset-button {
        padding: 1rem;
        font-size: var(--font-size-base);
    }
}

/* Payment Selection */
.payment-selection {
    padding: 0;
}

.payment-selection .filter-label {
    margin-bottom: 0.5rem;
}

.payment-selection label {
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: 600;
    margin-bottom: 0.75rem;
    letter-spacing: 0.025em;
}

.form-select {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 4px;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-weight: 600;
    font-size: var(--font-size-base);
    transition: all 0.2s ease;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23CBD5E1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23A0AEC0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}

.form-select:hover {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.05);
}

.form-select:focus {
    box-shadow: none;
    border-color: var(--accent);
    background: var(--card-bg);
    outline: none;
}

.form-select option {
    background: var(--card-bg);
    color: white;
    padding: 0.75rem;
    font-size: var(--font-size-base);
    font-weight: 600;
}

.form-select-dropdown {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    color: white !important;
    font-size: var(--font-size-base) !important;
    font-weight: 600 !important;
    padding: 0.5rem 2rem 0.5rem 0.75rem !important;
    width: 100%;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
    position: relative;
    z-index: 1;
}

.form-select-dropdown::after {
    content: '';
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23CBD5E1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1rem;
}

.form-select-dropdown:hover {
    border-color: var(--accent) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.form-select-dropdown:focus {
    border-color: var(--accent) !important;
    background: var(--card-bg) !important;
    box-shadow: none !important;
    outline: none !important;
}

.form-select-dropdown-menu {
    width: 100%;
    min-width: auto;
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px !important;
    margin-top: 0.25rem !important;
    padding: 0.125rem !important;
    z-index: 1050 !important;
    position: absolute !important;
}

.form-select-dropdown-menu .dropdown-item {
    color: white !important;
    padding: 0.75rem 0.75rem !important;
    border-radius: 0 !important;
    display: flex;
    align-items: center;
    font-size: var(--font-size-base) !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--border-color) !important;
    margin: 0 !important;
}

.form-select-dropdown-menu .dropdown-item:last-child {
    border-bottom: none !important;
}

.form-select-dropdown-menu .dropdown-item:hover {
    background: rgba(125, 211, 252, 0.1) !important;
    color: white !important;
}

.form-select-dropdown-menu .dropdown-item:active {
    background: rgba(125, 211, 252, 0.15) !important;
    color: white !important;
}

/* Option Preview */
.option-preview .professional-asset-header {
    background: linear-gradient(135deg, rgba(125, 211, 252, 0.08) 0%, rgba(125, 211, 252, 0.03) 100%);
    backdrop-filter: blur(10px);
}

.option-action {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1.5rem;
    letter-spacing: -0.025em;
}

.option-details {
    margin-bottom: 1.5rem;
}

/* Grid-based option details layout */
.option-details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

/* Desktop: 3 columns */
@media (min-width: 768px) {
    .option-details-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.detail-card {
    background: linear-gradient(135deg, rgba(0, 184, 212, 0.05) 0%, rgba(0, 184, 212, 0.02) 100%);
    border: 1px solid rgba(0, 184, 212, 0.15);
    border-radius: var(--border-radius);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.detail-card:hover {
    background: linear-gradient(135deg, rgba(0, 184, 212, 0.1) 0%, rgba(0, 184, 212, 0.05) 100%);
    border-color: rgba(0, 184, 212, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 184, 212, 0.1);
}

.detail-icon {
    font-size: 1.5rem;
    line-height: 1;
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail-icon i {
    font-size: 1.5rem;
    color: var(--accent);
    opacity: 0.9;
}

.detail-content {
    flex: 1;
    min-width: 0;
}

.detail-content .detail-label {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.detail-content .detail-value {
    font-family: 'Inter', sans-serif;
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.detail-content .detail-value span {
    font-size: inherit;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
    padding: 0.125rem 0;
    border-bottom: none;
}

.detail-label {
    color: var(--text-muted);
    font-weight: 500;
    font-size: var(--font-size-base);
}

.detail-value {
    font-family: 'Inter', sans-serif;
    color: var(--text-primary);
    font-weight: 600;
    font-size: var(--font-size-base);
}

.no-liquidation-badge {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.1) 0%, rgba(0, 255, 136, 0.05) 100%);
    color: var(--positive);
    text-align: center;
    padding: 0.5rem;
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    font-weight: 600;
    border: 1px solid rgba(0, 255, 136, 0.2);
    margin: 0 0 1.5rem 0;
    width: 100%;
    box-sizing: border-box;
}

.no-liquidation-badge i {
    color: var(--accent);
}

/* Trade Direction Badge */
.trade-direction-badge {
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.1) 0%, rgba(13, 110, 253, 0.05) 100%);
    color: var(--primary);
    text-align: center;
    padding: 0.75rem;
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    font-weight: 500;
    border: 1px solid rgba(13, 110, 253, 0.2);
}

.trade-direction-badge .badge-text {
    display: block;
}

/* Max Loss Badge */
.max-loss-badge {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(220, 53, 69, 0.05) 100%);
    color: var(--negative);
    text-align: center;
    padding: 0.75rem;
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    font-weight: 500;
    border: 1px solid rgba(220, 53, 69, 0.2);
}

.max-loss-badge .badge-text {
    display: block;
}

/* Order Countdown Text in Modal Header */
.order-countdown-text {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    margin-left: 0.5rem;
}

/* Order Validity Badge */
/* Option Expiry Badge */
.option-expiry-badge {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.1) 0%, rgba(0, 255, 136, 0.05) 100%);
    color: var(--positive);
    text-align: center;
    padding: 0.75rem;
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    font-weight: 500;
    border: 1px solid rgba(0, 255, 136, 0.2);
}

.option-expiry-badge .badge-text {
    display: block;
}

/* Trade Preview Animations */
.option-preview {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    display: none; /* Start hidden */
    position: relative;
    z-index: 1;  /* Normal stacking - dropdown uses higher z-index */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.option-preview.show {
    opacity: 1;
    transform: translateY(0);
}

.option-preview .professional-asset-header {
    transform: translateY(20px);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
}

.option-preview.show .professional-asset-header {
    transform: translateY(0);
}

/* Staggered animation for card elements */
.option-preview .detail-card {
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.option-preview.show .detail-card {
    transform: translateY(0);
    opacity: 1;
}

.option-preview.show .detail-card:nth-child(1) { transition-delay: 0.3s; }
.option-preview.show .detail-card:nth-child(2) { transition-delay: 0.4s; }
.option-preview.show .detail-card:nth-child(3) { transition-delay: 0.5s; }
.option-preview.show .detail-card:nth-child(4) { transition-delay: 0.6s; }
.option-preview.show .detail-card:nth-child(5) { transition-delay: 0.7s; }
.option-preview.show .detail-card:nth-child(6) { transition-delay: 0.8s; }
.option-preview.show .detail-card:nth-child(7) { transition-delay: 0.9s; }

/* Staggered animation for legacy detail-row elements */
.option-preview .detail-row {
    transform: translateX(-30px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.option-preview.show .detail-row {
    transform: translateX(0);
    opacity: 1;
}

.option-preview.show .detail-row:nth-child(1) { transition-delay: 0.3s; }
.option-preview.show .detail-row:nth-child(2) { transition-delay: 0.4s; }
.option-preview.show .detail-row:nth-child(3) { transition-delay: 0.5s; }
.option-preview.show .detail-row:nth-child(4) { transition-delay: 0.6s; }

/* Animation for trade actions */
.option-preview .professional-asset-header .trade-actions {
    transform: translateY(30px);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s;
    margin-bottom: 1.5rem;
}

.option-preview.show .professional-asset-header .trade-actions {
    transform: translateY(0);
    opacity: 1;
}

/* Pulse effect for the preview title */
.option-preview .option-action {
    font-size: 1.5rem;
    font-weight: 800;
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        text-shadow: 0 0 5px rgba(0, 184, 212, 0.3);
    }
    50% {
        text-shadow: 0 0 20px rgba(0, 184, 212, 0.6), 0 0 30px rgba(0, 184, 212, 0.4);
    }
}

/* Trade Actions */
#trade-now-btn, #confirm-trade-btn {
    background: var(--accent);
    border: none;
    color: var(--background);
    font-weight: 700;
    font-size: 0.8rem;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    box-shadow: none;
    letter-spacing: 0.025em;
}

#trade-confirm-modal #confirm-trade-btn {
    border-radius: 6px;
}

/* Position Details Button - Match Trade Now Button Style */
.position-details-btn {
    background: linear-gradient(135deg, var(--accent) 0%, #FFC107 100%) !important;
    border: none !important;
    color: var(--background) !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    padding: 0.5rem 1rem !important;
    border-radius: var(--border-radius) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: var(--shadow-lg) !important;
    letter-spacing: 0.025em !important;
}

.position-details-btn:hover {
    background: linear-gradient(135deg, #FFC107 0%, var(--accent) 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-xl) !important;
}

#trade-now-btn:hover:not(:disabled),
#confirm-trade-btn:hover:not(:disabled) {
    background: #e5c940;
    transform: translateY(-1px);
}

/* Execute Swap Button - Match Connect/Disconnect Button Style */
#execute-swap-btn {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    font-size: var(--font-size-base) !important;
    font-weight: 600 !important;
    padding: 0.3rem 0.75rem !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

#execute-swap-btn:hover:not(:disabled) {
    background: transparent !important;
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}

/* Approve Swap Button - Match Strike Button Style */
#approve-swap-btn {
    background: rgba(43, 56, 74, 0.8);
    border: none;
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    position: relative;
    font-size: var(--font-size-base);
    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.025em;
}

#approve-swap-btn:hover:not(:disabled) {
    background: var(--dropdown-bg-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

#approve-swap-btn:disabled {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
    cursor: not-allowed;
    opacity: 0.65;
    transform: none;
    box-shadow: none;
}

#trade-now-btn:disabled,
#adv-trade-btn:disabled,
#confirm-trade-btn:disabled {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
    cursor: not-allowed;
    opacity: 0.65;
    transform: none;
    box-shadow: none;
}

#execute-swap-btn:disabled {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    cursor: not-allowed;
    opacity: 0.5;
    box-shadow: none !important;
}

#trade-now-btn.btn-warning,
#adv-trade-btn.btn-warning,
#execute-swap-btn.btn-warning {
    background-color: #f8d7da !important;
    border-color: #f5c6cb !important;
    color: #721c24 !important;
    font-weight: 600;
}

/* Insufficient Funds Warning */
#insufficient-funds-warning {
    background-color: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.3);
    color: #ffffff;
    padding: 0.5rem;
}

#insufficient-funds-warning i {
    color: #ffffff;
}

/* Options Table */
.options-table-container {
    margin: 0.75rem 0;
    overflow-x: auto;
    display: none;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.15);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.options-table-container::-webkit-scrollbar {
    height: 4px;
}

.options-table-container::-webkit-scrollbar-track {
    background: transparent;
}

.options-table-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.options-table {
    color: var(--text-primary);
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.options-table thead th {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0.6rem 0.75rem;
    white-space: nowrap;
}

.options-table tbody td {
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    vertical-align: middle;
    /* Body tier, matching the mock's 14px. Was 0.78rem — one of the 333
       literals at <=0.8rem behind the "fonts too small" complaint. */
    font-size: 0.875rem;
    padding: 0.55rem 0.75rem;
    font-variant-numeric: tabular-nums;
}

.options-table tbody tr {
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.options-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

.options-table tbody tr:last-child td {
    border-bottom: none;
}

.options-table tbody tr.selected {
    background-color: rgba(253, 224, 71, 0.06);
}

.options-table tbody tr.put-row td:first-child {
    color: var(--negative);
}

.options-table tbody tr.call-row td:first-child {
    color: var(--positive);
}

.options-table tbody tr.put-row {
    background-color: rgba(248, 113, 113, 0.04);
}

.options-table tbody tr.call-row {
    background-color: rgba(134, 239, 172, 0.04);
}

.options-table tbody tr.put-row:hover {
    background-color: rgba(248, 113, 113, 0.08);
}

.options-table tbody tr.call-row:hover {
    background-color: rgba(134, 239, 172, 0.08);
}

.option-row.selected {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

.option-row.selected td:first-child {
    box-shadow: inset 3px 0 0 var(--accent);
}

.option-row.selected td:last-child::after {
    content: '✓';
    color: var(--accent);
    font-size: 0.7rem;
    margin-left: 0.4rem;
    font-weight: 700;
}

.spot-price-line {
    pointer-events: none;
}

.spot-price-line td {
    padding: 0 !important;
    border-bottom: none !important;
}

.spot-line-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 18px;
}

.spot-line-inner::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1px dashed rgba(253, 224, 71, 0.4);
}

.spot-price-label {
    position: relative;
    z-index: 1;
    background: #2a2518;
    color: var(--accent);
    font-size: 0.6rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 3px;
    letter-spacing: 0.03em;
    border: 1px solid rgba(253, 224, 71, 0.25);
}

@media (max-width: 768px) {
    .options-table tbody td {
        font-size: 0.65rem;
        padding: 0.45rem 0.5rem;
    }
    .options-table thead th {
        font-size: 0.58rem;
        padding: 0.5rem 0.5rem;
    }
    .options-table thead th:nth-child(3),
    .options-table tbody td:nth-child(3) {
        display: none;
    }
    .options-table .hide-mobile {
        display: none;
    }
}

/* Table cell elements */
.strike-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
}

.type-badge {
    display: inline-block;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 1px 5px;
    border-radius: 3px;
    line-height: 1.4;
    vertical-align: middle;
}

.type-badge-call {
    background: rgba(74, 222, 128, 0.12);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.2);
}

.type-badge-put {
    background: rgba(248, 113, 113, 0.12);
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, 0.2);
}

.type-badge {
    /* A word inside a numeric cell. The `.options-table tbody td` numerals
       rule would otherwise put CALL / PUT in mono at 0.55rem. */
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.04em;
}

.payout-cell {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.select-option-btn {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    padding: 0.25rem 0.75rem;
}

/* Positions Section */
.position-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: none;
}

/* Grid layout for open positions - 3 cards per row */
#open-positions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Remove bottom margin from position cards in grid layout */
#open-positions .position-card {
    margin-bottom: 0;
}

/* Responsive design for smaller screens */
@media (max-width: 1200px) {
    #open-positions {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    #open-positions {
        grid-template-columns: 1fr;
    }
}

.position-header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.position-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: white;
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.position-title p {
    text-align: center;
}

.collateral-address {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    text-align: center;
}

.position-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.position-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.position-detail-label {
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    margin-bottom: 0;
}

.position-detail-value {
    font-family: 'Inter', sans-serif;
    font-size: var(--font-size-base);
    font-weight: 500;
}

.position-status {
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    font-weight: 500;
    display: inline-block;
}

.position-status-banner {
    padding: 0rem 1rem;
    text-align: center;
    font-size: var(--font-size-base);
    font-weight: 600;
    width: 100%;
    display: block;
    margin-bottom: 1rem;
}

.status-negative {
    background-color: rgba(255, 61, 113, 0.1);
    color: var(--negative);
}

.status-positive {
    background-color: rgba(24, 242, 178, 0.1);
    color: var(--positive);
}

.position-header > div {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.pnl-negative {
    color: var(--negative);
}

.pnl-positive {
    color: var(--positive);
}

.position-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1rem;
}

.no-positions-message {
    text-align: center;
    padding: 1.25rem;
    background-color: var(--card-bg);
    border-radius: var(--border-radius);
    color: var(--text-secondary);
}

.no-positions-message a {
    color: var(--primary);
    text-decoration: none;
}

/* History Section */
.filters {
    background-color: var(--card-bg);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    color: var(--text-secondary);
    font-size: 0.75rem;
    margin-bottom: 0.375rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.history-table-container {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem 0 0 0;
    background: transparent;
    overflow: visible;
}

.history-table-container > h2 {
    margin-bottom: 1.5rem;
    padding: 0 1.5rem;
}

.history-table-container .row {
    padding: 0 1.5rem;
    position: relative;
    z-index: 10;
    overflow: visible;
}

.history-table-container .form-group {
    position: relative;
    overflow: visible;
}

.history-table-container .dropdown {
    position: relative;
    overflow: visible;
}

.history-table {
    color: var(--text-primary);
    margin-bottom: 0;
}

/* ONE type size for the whole table. Four declarations competed here, so the
   last rule in the file won. --font-size-base IS 0.75rem, so nothing changes
   except the cells the stray +1px rule was enlarging. */
.history-table thead th,
.history-table tbody td {
    padding: 0.5rem 0.75rem;
    font-size: var(--font-size-base);
}

.history-table > tbody > tr {
    background-color: transparent !important;
}

.history-table > tbody > tr > td {
    background-color: transparent !important;
}

.history-table > tbody > tr:hover {
    background-color: rgba(125, 211, 252, 0.05);
}

.history-table > tbody > tr:nth-of-type(odd) {
    background-color: transparent !important;
}

.history-table > tbody > tr:nth-of-type(odd) > td {
    background-color: transparent !important;
}

.history-table thead th {
    background-color: transparent !important;
    color: #6b7280;
    font-size: var(--font-size-base);
    font-weight: 700;
    border-color: var(--border-color);
    text-transform: uppercase;
}

/* Hide the two USD columns BY CLASS, not by position.
   This was `:nth-child(7)` and `:nth-child(10)`. When SETTLEMENT moved next
   to STRIKE the rule re-aimed itself and hid PREMIUM instead. Anything that
   identifies a column must name the column. */
.history-table thead th.col-premium-usd,
.history-table tbody td.col-premium-usd,
.history-table thead th.col-pnl-usd,
.history-table tbody td.col-pnl-usd {
    display: none;
}

.history-table tbody td {
    border-color: var(--border-color);
    vertical-align: middle;
}

/* Fix for striped table rows */
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(22, 59, 87, 0.7); /* A lighter version of your --secondary color */
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    color: var(--text-primary);
}


#no-history-message {
    text-align: center;
    padding: 1.25rem;
    color: var(--text-secondary);
}

/* Modals */
.modal-content {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

.modal-header {
    border-bottom: none;
    background: rgba(30, 41, 59, 0.7);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}

.modal-footer {
    border-top: none;
}

.btn-close {
    color: var(--text-primary);
    filter: invert(1) brightness(200%);
}

.countdown-timer {
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--warning);
    margin-bottom: 1rem;
}

.details-card {
    background-color: var(--secondary);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
    height: 100%;
}

.details-card h6 {
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    margin-bottom: 1rem;
    text-align: left;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.profit-scenarios {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem;
}

.profit-scenarios h6 {
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.profit-scenarios ul {
    list-style-type: none;
    padding-left: 0;
}

.profit-scenarios li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: var(--font-size-base);
}

.profit-scenarios li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--primary);
}

/* Profit scenarios table styling */
.profit-scenarios .table {
    margin-bottom: 0;
    color: var(--text-primary);
    font-size: 0.7rem;
}

.profit-scenarios .table th {
    background-color: transparent;
    border-color: var(--border-color);
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.65rem;
    padding: 0.5rem 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.profit-scenarios .table td {
    border-color: var(--border-color);
    padding: 0.4rem 0.5rem;
    font-size: 0.7rem;
    vertical-align: middle;
}

.profit-scenarios .table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

/* Color coding for outcome and return columns */
.profit-scenarios .table td:nth-child(2),
.profit-scenarios .table td:nth-child(3) {
    font-weight: 500;
}

.profit-scenarios .table td.scenario-negative {
    color: var(--negative) !important;
}

.profit-scenarios .table td.scenario-neutral {
    color: var(--text-primary);
}

.profit-scenarios .table td.scenario-positive {
    color: var(--positive);
}

.settlement-info h6, .settlement-scenarios h6 {
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    margin-bottom: 0.75rem;
    text-align: left;
}

.settlement-info ul, .settlement-scenarios ul {
    list-style-type: none;
    padding-left: 0;
}

.settlement-info li, .settlement-scenarios li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: var(--font-size-base);
}

.settlement-info li::before, .settlement-scenarios li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--primary);
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .professional-asset-header .price-info-section {
        width: 100%;
    }
    
    .professional-asset-header .view-toggle {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    .view-controls-section {
        margin-top: 0;
        padding-top: 0;
    }
    
    .asset-dropdown-btn {
        padding: 0.5rem 1rem;
        font-size: var(--font-size-header);
        width: 100%;
    }
    
    .position-detail-item {
        flex: 1 0 100%;
    }
    
    .position-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .option-type-groups {
        flex-direction: column;
        gap: 1rem;
    }
    
    .option-button {
        width: 100%;
        min-width: 120px;
    }
}

@media (min-width: 992px) {
    .navbar-collapse {
        position: static !important;
        transform: none !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        overflow: visible !important;
        box-shadow: none !important;
    }
    
    .mobile-menu-header {
        display: none !important;
    }
}

@media (max-width: 991px) {
    .navbar {
        padding: 0.75rem 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
    }
    
    .navbar .container-fluid {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 0;
    }
    
    .navbar-brand {
        flex-shrink: 0;
        font-size: 0.8rem;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
    }
    
    .navbar-brand .brand-text {
        display: flex;
        align-items: center;
        line-height: 1;
    }
    
    .navbar-brand .brand-logo {
        height: 16px;
        width: auto;
        margin-right: 5px;
    }
    
    .mobile-wallet-indicator {
        display: flex !important;
        align-items: center;
        gap: 0.25rem !important;
        margin-right: 0.5rem !important;
        margin-left: auto !important;
    }
    
    .mobile-wallet-indicator.not-connected .mobile-address-display {
        display: none !important;
    }
    
    .mobile-wallet-indicator.not-connected .connection-dot {
        background-color: var(--negative) !important;
    }
    
    .mobile-wallet-indicator .connection-dot {
        margin: 0;
    }
    
    .mobile-wallet-indicator .mobile-address-display {
        font-size: 0.75rem;
        color: var(--text-primary);
        font-weight: 700;
        letter-spacing: 0.05em;
    }
    
    .navbar-toggler {
        flex-shrink: 0;
        border: none;
        background: transparent;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
    }
    
    .navbar-toggler:focus {
        outline: none;
        box-shadow: none;
    }
    
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
        width: 1em !important;
        height: 1em !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 100% !important;
    }
    
    .navbar-collapse {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        background: var(--background);
        z-index: 9999;
        margin: 0;
        padding: 1.5rem;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3), inset -25px 0 35px -25px rgba(0, 0, 0, 0.45);
    }
    
    .navbar-collapse.show {
        transform: translateX(0);
    }
    
    .navbar-collapse.show ~ * #strike-slider-tooltip,
    .navbar-collapse.show ~ * .slider-tooltip {
        display: none !important;
    }
    
    .navbar-collapse.collapsing {
        transition: transform 0.3s ease;
    }
    
    .navbar-collapse.collapsing ~ * #strike-slider-tooltip,
    .navbar-collapse.collapsing ~ * .slider-tooltip {
        display: none !important;
    }
    
    body.menu-open {
        overflow: hidden;
    }
    
    body.menu-open #strike-slider-tooltip,
    body.menu-open .slider-tooltip {
        display: none !important;
    }
    
    .mobile-menu-header {
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--border-color);
        margin-bottom: 1.5rem;
    }
    
    .mobile-menu-close {
        padding: 0;
        border: none;
        background: transparent;
        cursor: pointer;
    }
    
    .mobile-menu-close:hover {
        opacity: 0.7;
    }
    
    .mobile-menu-close:focus {
        outline: none;
        box-shadow: none;
    }
    
    .wallet-section-mobile {
        margin-bottom: 1.5rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid var(--border-color);
        width: 100%;
    }
    
    .wallet-section-mobile #connect-web3modal-btn-mobile,
    .wallet-section-mobile #use-in-browser-wallet-btn-mobile {
        background: transparent !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        color: white !important;
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        padding: 0.75rem 0 !important;
        border-radius: 0 !important;
        transition: all 0.2s ease !important;
        width: 100% !important;
        text-align: center !important;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    }
    
    .wallet-section-mobile #use-in-browser-wallet-btn-mobile {
        font-size: 1rem !important;
        font-weight: 600 !important;
        padding: 0.5rem 0 !important;
    }
    
    .wallet-section-mobile #connect-web3modal-btn-mobile:hover,
    .wallet-section-mobile #use-in-browser-wallet-btn-mobile:hover {
        background: transparent !important;
        color: var(--accent) !important;
        border-color: var(--accent) !important;
    }
    
    .wallet-section-mobile .connected-details {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
        max-width: 100%;
    }
    
    .wallet-section-mobile .wallet-info-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0;
        background: transparent;
        border-radius: 0;
        margin-bottom: 1rem;
        width: 100%;
    }
    
    .wallet-section-mobile .connected-details .connection-dot {
        width: 10px;
        height: 10px;
        background-color: var(--positive);
        border-radius: 50%;
        flex-shrink: 0;
    }
    
    .wallet-section-mobile .connected-details .address-display {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        color: var(--text-primary);
        flex: 1;
    }
    
    .wallet-section-mobile .wallet-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        margin-bottom: 1rem;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .wallet-section-mobile .wallet-actions .wallet-action-item {
        padding: 0.375rem 1rem 0.375rem 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: var(--text-primary) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 0.5rem !important;
        text-align: left !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        position: relative !important;
        z-index: 1 !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        text-decoration: none !important;
    }
    
    .wallet-section-mobile .wallet-actions .wallet-action-icon {
        width: 1.75rem !important;
        min-width: 1.75rem !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    
    .wallet-section-mobile .wallet-actions .wallet-action-item i {
        font-size: 1.25rem !important;
        line-height: 1 !important;
    }
    
    .wallet-section-mobile .wallet-actions .wallet-action-label {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        color: var(--text-primary) !important;
        flex: 1 !important;
        white-space: nowrap !important;
    }
    
    .wallet-section-mobile .wallet-actions .wallet-action-item:hover {
        background: rgba(255, 255, 255, 0.05);
        border-color: transparent;
        color: var(--primary);
    }
    
    .wallet-section-mobile .wallet-actions .wallet-action-item:hover .wallet-action-label {
        color: var(--primary);
    }
    
    .navbar-nav {
        flex-direction: column;
        width: 100%;
        margin: 0;
    }
    
    .navbar-nav .nav-link {
        color: rgba(255, 255, 255, 0.4) !important;
        padding: 0.75rem 0;
        margin: 0;
        transition: color 0.2s ease;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        display: block;
        border-bottom: 1px solid var(--border-color);
        text-align: left;
    }
    
    .navbar-nav .nav-link:hover {
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.06);
        border-radius: 6px;
    }
    
    .navbar-nav .nav-link.active {
        color: #ffffff !important;
        background: rgba(56, 152, 236, 0.85);
        border-radius: 6px;
    }

    .navbar-nav .nav-link:last-child {
        border-bottom: none;
    }
    
    #disconnect-wallet-btn-mobile {
        background: transparent !important;
        border: none !important;
        padding: 0.75rem 0 !important;
        margin: 0 !important;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        color: var(--negative) !important;
        text-align: left !important;
        width: 100% !important;
        display: none;
    }
    
    #disconnect-wallet-btn-mobile:hover {
        background: rgba(248, 113, 113, 0.1) !important;
        color: var(--negative) !important;
    }
    
    #strike-slider-tooltip {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .navbar {
        padding: 0.5rem 0.75rem;
    }
    
    .navbar-brand {
        font-size: 0.75rem;
    }
    
    .section-header {
        flex-direction: column;
        gap: 1rem;
    }
    
    .filters .row > div {
        margin-bottom: 1rem;
    }
}

@media (max-width: 576px) {
    .modal-dialog {
        margin: 0.5rem;
    }
    
    .modal-body {
        padding: 1rem;
    }
    
    .row > [class*="col-"] {
        padding-left: 0.125rem;
        padding-right: 0.125rem;
    }
}

/* Loading spinners and data states */
#loading-profitable-trades, #no-profitable-trades-data {
    text-align: center;
    padding: 1.25rem;
    color: var(--text-secondary);
}

/* Analytics Dashboard */
.analytics-dashboard {
    background: var(--card-bg);
    border: none;
    border-radius: var(--border-radius);
    padding: 1.25rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 1rem 1.25rem;
}

.analytics-title {
    color: var(--primary);
    font-weight: 600;
}

.analytics-title i {
    margin-right: 0.5rem;
}

.analytics-controls button {
    margin-left: 0.5rem;
    border-color: var(--primary);
    color: var(--primary);
}

.analytics-controls button:hover {
    background-color: var(--primary);
    color: var(--secondary);
}

/* Analytics section toggle styling */
#toggle-analytics-section {
    transition: transform 0.2s ease;
}

#toggle-analytics-section:hover {
    transform: scale(1.1);
}

/* Analytics content transition */
.analytics-content,
.support-resistance-section,
.pc-ratio-dials,
.analytics-status,
.analytics-chart-section {
    transition: opacity 0.3s ease, max-height 0.3s ease;
    overflow: hidden;
}

/* Support/Resistance Section */
.support-resistance-section {
    background-color: rgba(25, 39, 52, 0.3);
    border-radius: var(--border-radius);
    padding: 1rem;
    margin-bottom: 1rem;
}

.section-subtitle {
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.section-subtitle i {
    margin-right: 0.5rem;
    color: var(--primary);
}

.levels-display-container {
    position: relative;
    padding: 0.5rem 0;
}

.price-range-bar {
    position: relative;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: var(--border-radius);
    padding: 0.5rem;
}

.price-range-labels {
    display: flex;
    justify-content: space-between;
    padding-top: 0.75rem;
    margin-bottom: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-size: var(--font-size-base);
    color: var(--text-secondary);
}

.price-range-line {
    position: absolute;
    top: 50%;
    left: 0.5rem;
    right: 0.5rem;
    height: 2px;
    background: linear-gradient(to right, var(--negative), var(--primary), var(--positive));
    border-radius: var(--border-radius);
    transform: translateY(-50%);
}

/* Analytics Levels Overlay - Updated for new position */
.analytics-levels-overlay {
    position: absolute;
    top: 50%;
    left: 0.5rem;
    right: 0.5rem;
    height: 20px;
    pointer-events: none;
    z-index: 2;
    transform: translateY(-50%);
}

.level-marker {
    position: absolute;
    width: 2px;
    height: 20px;
    top: 0;
    pointer-events: auto;
    cursor: help;
    z-index: 3;
    border-radius: var(--border-radius);
}

.level-marker.support {
    background-color: var(--positive);
    box-shadow: 0 0 4px rgba(24, 242, 178, 0.6);
}

.level-marker.resistance {
    background-color: var(--negative);
    box-shadow: 0 0 4px rgba(255, 61, 113, 0.6);
}

.level-marker.gamma-wall {
    background-color: var(--accent);
    box-shadow: 0 0 4px rgba(223, 250, 76, 0.6);
}

.level-marker::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -8px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 6px solid currentColor;
}

.level-marker::after {
    content: attr(data-level-name);
    position: absolute;
    left: 50%;
    bottom: -25px;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 2px 6px;
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.level-marker:hover::after {
    opacity: 1;
}

/* Nearby level indicators */
.level-marker.nearby-level {
    opacity: 0.7;
    height: 15px;
    background: linear-gradient(to bottom, currentColor 0%, transparent 100%);
    box-shadow: none;
}

.level-marker.nearby-level::before {
    display: none;
}

.level-marker.nearby-level::after {
    bottom: -20px;
    font-size: var(--font-size-base);
    opacity: 0.8;
}

/* Put/Call Ratio Dials */
.pc-ratio-dials {
    background-color: rgba(25, 39, 52, 0.3);
    border-radius: var(--border-radius);
    padding: 1rem;
}

.ratio-dial {
    text-align: center;
    cursor: help;
    transition: transform 0.2s ease;
}

.ratio-dial:hover {
    transform: scale(1.05);
}

.dial-container {
    position: relative;
    margin: 0 auto 0.5rem;
    width: 60px;
    height: 30px; /* Half height for semicircle */
    overflow: hidden; /* Clip the bottom half */
}

.dial-circle {
    width: 60px;
    height: 60px; /* Keep full circle for proper gradient */
    border: 3px solid var(--border-color);
    border-radius: var(--border-radius-circle);
    position: absolute;
    top: 0; /* Position at top of container */
    left: 0;
    background: conic-gradient(
        from 270deg, 
        var(--negative) 0deg 60deg,      /* Red: 9-11 o'clock (bearish) */
        var(--accent) 60deg 120deg,      /* Yellow: 11-1 o'clock (neutral) */
        var(--positive) 120deg 180deg    /* Green: 1-3 o'clock (bullish) */
    );
}

/* Remove the ::after mask since we're using overflow: hidden */
.dial-circle::after {
    display: none;
}

.dial-needle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 22px; /* Slightly shorter for semicircle */
    background-color: white;
    transform-origin: bottom center;
    transform: translate(-50%, -100%) rotate(90deg);
    transition: transform 0.3s ease;
    z-index: 4;
}

.dial-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background-color: white;
    border-radius: var(--border-radius-circle);
    transform: translate(-50%, -50%);
    z-index: 5;
}

.dial-value {
    display: none;
}

.dial-label {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    margin-top: 0.25rem;
    text-align: center;
}

.dial-value-inline {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-base);
}

.ratio-legend {
    text-align: center;
    font-size: var(--font-size-base);
}

.ratio-legend .legend-bull {
    color: var(--positive);
}

.ratio-legend .legend-neutral {
    color: var(--accent);
}

.ratio-legend .legend-bear {
    color: var(--negative);
}

/* Analytics Status */
.analytics-status {
    text-align: center;
    padding: 0.5rem;
    background-color: rgba(25, 39, 52, 0.5);
    border-radius: var(--border-radius);
}

/* Analytics Chart Section */
.analytics-chart-section {
    border-top: none;
    padding-top: 1rem;
    margin-top: 1rem;
}

.chart-container {
    background-color: var(--secondary);
    border-radius: var(--border-radius);
    padding: 1rem;
}

#tradingview_chart {
    height: 100%;
    width: 100%;
}

.levels-legend {
    background-color: rgba(25, 39, 52, 0.5);
    border-radius: var(--border-radius);
    padding: 1rem;
}

.levels-legend h6 {
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.levels-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
}

.level-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0.5rem;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
}

.level-name {
    color: var(--text-secondary);
}

.level-price {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: var(--text-primary);
}

.level-item.support .level-price {
    color: var(--positive);
}

.level-item.resistance .level-price {
    color: var(--negative);
}

.level-item.gamma-wall .level-price {
    color: var(--accent);
}

/* Analytics Loading States */
.analytics-error {
    text-align: center;
    padding: 1rem;
    background-color: rgba(255, 61, 113, 0.1);
    border: 1px solid rgba(255, 61, 113, 0.3);
    border-radius: var(--border-radius);
    color: var(--negative);
    font-size: var(--font-size-base);
}

/* Responsive adjustments for analytics */
@media (max-width: 768px) {
    .pc-ratio-dials .row {
        justify-content: center;
    }
    
    .pc-ratio-dials .col-3 {
        flex: 0 0 auto;
        width: auto;
        margin: 0 0.5rem;
    }
    
    .dial-container {
        width: 50px;
        height: 25px; /* Half height for mobile semicircle */
    }
    
    .dial-circle {
        width: 50px;
        height: 50px; /* Keep full circle for proper gradient */
    }
    
    .dial-needle {
        height: 18px; /* Shorter for mobile */
    }
    
    .analytics-controls {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .analytics-controls button {
        margin-left: 0;
        font-size: var(--font-size-base);
        padding: 0.25rem 0.5rem;
    }
    
    .levels-list {
        grid-template-columns: 1fr;
    }
}

/* Tooltip enhancements for level markers */
.level-tooltip {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 0.5rem;
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    min-width: 150px;
}

.level-tooltip.show {
    opacity: 1;
}

.level-tooltip .tooltip-title {
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 0.25rem;
}

.level-tooltip .tooltip-price {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.level-tooltip .tooltip-description {
    font-size: var(--font-size-base);
    color: #ccc;
    line-height: 1.3;
}

/* Auto-refresh toggle styling */
.form-check-input {
    background-color: var(--secondary);
    border-color: var(--border-color);
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.form-check-label {
    color: var(--text-secondary);
    font-size: var(--font-size-base);
}

/* Trade confirmation modal styling */
#trade-confirm-modal .modal-dialog {
    max-width: 500px;
    width: 90%;
}

.trade-confirm-modal-content {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    box-shadow: var(--shadow-xl) !important;
    overflow: hidden;
}

/* Hide bottom-sheet handle on desktop */
.bottom-sheet-handle {
    display: none;
}

.trade-confirm-modal-header {
    background: var(--card-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 0.5rem 1rem !important;
}

.trade-confirm-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

#trade-confirm-modal .btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
}

#trade-confirm-modal .btn-close-white:hover {
    opacity: 0.75;
}

.trade-confirm-modal-title {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin: 0 !important;
    letter-spacing: 0.5px !important;
}

.order-countdown-text {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.order-countdown-text .order-countdown {
    color: var(--text-primary);
    font-weight: 600;
}

.trade-confirm-modal-body {
    padding: 1rem !important;
    background: var(--card-bg) !important;
}

#trade-confirm-modal .modal-footer {
    background: var(--card-bg) !important;
    border-top: 1px solid var(--border-color) !important;
    padding: 0.75rem 1rem !important;
}

#trade-confirm-modal .form-check {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

#trade-confirm-modal .form-check-label {
    font-size: 0.7rem;
}

/* Position details modal styling - much narrower */
#position-detail-modal .modal-dialog {
    max-width: 500px;
    width: 90%;
}



@keyframes flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
} 

.status-badge {
    padding: 0.3rem 0.6rem;
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    font-weight: 500;
}

.status-expired {
    background-color: rgba(255, 179, 0, 0.1);
    color: var(--warning);
}

.status-open {
    background-color: rgba(125, 211, 252, 0.1);
    color: #7dd3fc;
}

.status-settled {
    background-color: rgba(74, 222, 128, 0.1);
    color: #4ade80;
}

.status-closed {
    background-color: rgba(148, 163, 184, 0.1);
    color: #94a3b8;
}

/* Batch capacity styles */
.batch-capacity h6 {
    margin-bottom: 0.5rem;
}

.progress {
    height: 6px;
    /* A fill, not a border: the hairline token is invisible as a rail. */
    background-color: rgba(255, 255, 255, 0.18);
    border-radius: var(--border-radius);
}

.progress-bar {
    background-color: var(--primary);
    border-radius: var(--border-radius);
}

/* Change progress bar color as it fills */
.progress-bar[style*="width: 8"] {
    background-color: var(--warning);
}

.progress-bar[style*="width: 9"], 
.progress-bar[style*="width: 100"] {
    background-color: var(--negative);
}

.batch-info {
    background-color: rgba(0, 184, 212, 0.05);
    padding: 0.5rem;
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    color: var(--text-secondary);
}

.batch-info i {
    color: var(--primary);
}

/* Add to modal styles */
/* Error alert styling */
#trade-error-alert {
    background-color: rgba(255, 61, 113, 0.1);
    border-color: var(--negative);
    color: var(--negative);
    font-weight: 500;
}

#trade-error-alert i {
    color: var(--negative);
}

/* Add to the status badge styles */
.status-expired {
    background-color: rgba(255, 61, 113, 0.1);
    color: var(--negative);
    padding: 0.3rem 0.6rem;
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    font-weight: 500;
}

/* Add style for the settle button */
#settle-option-btn {
    background-color: var(--primary);
    border-color: var(--primary);
    margin-right: auto; /* This will push it to the left */
}

#settle-option-btn:hover {
    background-color: #0096a7;
}

/* Style for the settled success button */
#settle-option-btn.btn-success {
    background-color: var(--positive);
    border-color: var(--positive);
}

/* Swap information display */
.swap-info {
    background-color: rgba(0, 184, 212, 0.05);
    border: 1px solid rgba(0, 184, 212, 0.2);
    border-radius: var(--border-radius);
}

.swap-title {
    font-weight: 600;
    color: var(--primary);
    font-size: var(--font-size-base);
}

.swap-rate {
    background-color: var(--secondary);
    padding: 0.2rem 0.5rem;
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    font-family: 'Inter', sans-serif;
}

.swap-amount {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: var(--text-primary);
}

.swap-direction {
    background-color: rgba(22, 59, 87, 0.5);
    padding: 0.5rem;
    border-radius: var(--border-radius);
}

/* Swap elements in order details */
#swap-amount-row .detail-value {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#swap-amount-row .detail-value span[data-bs-toggle="tooltip"] {
    border-bottom: 1px dotted var(--text-secondary);
    cursor: help;
    transition: border-color 0.2s ease;
}

#swap-amount-row .detail-value span[data-bs-toggle="tooltip"]:hover {
    border-bottom-color: var(--accent);
}

#swap-amount-display,
/* Swap loading state in order details */
#swap-loading-row .detail-value {
    display: flex;
    align-items: center;
}

#swap-loading-row .spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
    color: var(--primary);
}

/* Scoreboard styles */
.scoreboard-table-container {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem 0 0 0;
    background: transparent;
    overflow-x: auto;
}

.scoreboard-table-container > h2 {
    margin-bottom: 1.5rem;
    padding: 0 1.5rem;
}

.scoreboard-table {
    color: var(--text-primary);
    margin-bottom: 0;
}

.scoreboard-table thead th,
.scoreboard-table tbody td {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
}

.scoreboard-table > tbody > tr {
    background-color: transparent !important;
}

.scoreboard-table > tbody > tr > td {
    background-color: transparent !important;
}

.scoreboard-table > tbody > tr:hover {
    background-color: rgba(125, 211, 252, 0.05);
}

.scoreboard-table > tbody > tr:nth-of-type(odd) {
    background-color: transparent !important;
}

.scoreboard-table > tbody > tr:nth-of-type(odd) > td {
    background-color: transparent !important;
}

.scoreboard-table thead th {
    background-color: transparent !important;
    color: #6b7280;
    font-size: var(--font-size-base);
    font-weight: 700;
    border-color: var(--border-color);
    text-transform: uppercase;
}

.scoreboard-table tbody td {
    border-color: var(--border-color);
    vertical-align: middle;
    font-size: calc(var(--font-size-base) + 1px);
}

/* Consolidated Streak column styling */
.scoreboard-table .streak-cell {
    text-align: left;
    font-family: 'Inter', sans-serif;
    color: var(--accent);
    font-weight: 600;
    cursor: help;
    transition: all 0.2s ease;
}

.scoreboard-table .streak-cell:hover {
    background-color: rgba(0, 184, 212, 0.1);
    transform: scale(1.02);
}

/* Special highlighting for impressive streaks */
.scoreboard-table .streak-impressive {
    color: var(--positive) !important;
    text-shadow: 0 0 3px rgba(24, 242, 178, 0.3);
}

/* Enhanced tooltip styling for streak breakdown */
.scoreboard-table .rank-1 {
    background: transparent !important;
    border-left: none !important;
}

.scoreboard-table .rank-2 {
    background: transparent !important;
    border-left: none !important;
    color: inherit !important;
}

.scoreboard-table .rank-3 {
    background: transparent !important;
    border-left: none !important;
}

.scoreboard-table tr:not(.rank-1):not(.rank-2):not(.rank-3) {
    color: var(--text-primary);
}

/* Sticky Banners Container */
.sticky-banners-container {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    z-index: 1000;
    width: 280px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Match sticky banners left margin with container padding at different breakpoints */
@media (min-width: 576px) {
    .sticky-banners-container {
        left: 3rem;
    }
}

@media (min-width: 768px) {
    .sticky-banners-container {
        left: 4rem;
    }
}

@media (min-width: 992px) {
    .sticky-banners-container {
        left: 20rem;
    }
}

@media (min-width: 1200px) {
    .sticky-banners-container {
        left: 24rem;
    }
}

/* Beta Flag Sticky Banner */
.beta-flag-sticky {
    background: rgba(30, 41, 59, 0.7);
    border: none;
    border-radius: var(--border-radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    overflow: hidden;
}

.beta-flag-sticky:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    background: rgba(30, 41, 59, 0.8);
}

.beta-flag-sticky .sticky-content {
    padding: 1rem;
    position: relative;
    z-index: 1;
}

.beta-flag-sticky .sticky-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.beta-flag-sticky .beta-label {
    background-color: #007bff;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius);
    font-weight: 700;
    font-size: var(--font-size-base);
    letter-spacing: 0.025em;
}

.beta-flag-sticky .sticky-info {
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.beta-flag-sticky .sticky-liquidity {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: white;
    font-size: var(--font-size-base);
    margin-bottom: 0.5rem;
}

.beta-flag-sticky .sticky-renewal {
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.3;
    font-weight: 400;
}

/* Hide original sticky banners on mobile */
@media (max-width: 768px) {
    .sticky-banners-container {
        display: none; /* Hide original sticky banners on mobile */
    }
}

/* Mobile-only top boxes styling */
.mobile-top-boxes {
    display: none; /* Hidden by default */
}

@media (max-width: 768px) {
    .mobile-top-boxes {
        display: block; /* Show on mobile */
    }
    
    .mobile-top-boxes .sticky-banners-container {
        position: static; /* Not sticky on mobile */
        margin: 3rem 0.5rem 0 0.5rem; /* Reduced side margins for better mobile layout */
        width: auto;
        max-width: none;
        flex-direction: row;
        gap: 0.75rem;
        z-index: auto;
        display: flex; /* Show the container */
    }
    
    .beta-flag-sticky,
    .weekly-competition-sticky {
        flex: 1;
        min-width: 0;
    }
    
    .beta-flag-sticky .sticky-content,
    .weekly-competition-sticky .sticky-content {
        padding: 0.75rem;
    }
    
    .beta-flag-sticky .sticky-title,
    .weekly-competition-sticky .sticky-title {
        margin-bottom: 0.5rem;
    }
    
    .beta-flag-sticky .beta-label {
        font-size: var(--font-size-base);
        padding: 0.2rem 0.4rem;
    }
    
    .beta-flag-sticky .sticky-info,
    .weekly-competition-sticky .sticky-info {
        font-size: var(--font-size-base);
        margin-bottom: 0.4rem;
    }
    
    .beta-flag-sticky .sticky-liquidity {
        font-size: var(--font-size-base);
        margin-bottom: 0.4rem;
    }
    
    .beta-flag-sticky .sticky-renewal {
        font-size: var(--font-size-base);
    }
    
    .weekly-competition-sticky .prize-item {
        font-size: var(--font-size-base);
    }
    
    /* Remove the top margin since boxes are now in normal flow */
    main {
        margin-top: 0;
    }
}

/* Open Positions Leaderboard styles */

.open-positions-table-container {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem 0 0 0;
    background: transparent;
    overflow-x: auto;
}

.open-positions-table-container > h2 {
    margin-bottom: 1.5rem;
    padding: 0 1.5rem;
}

.open-positions-info {
    padding: 0 1.5rem;
}

/* ── Open Positions Stats Bar ── */
.open-positions-stats {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    margin: 0 0 0.6rem 0;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    overflow-x: auto;
    flex-wrap: nowrap;
}
.ops-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 54px;
    padding: 0.2rem 0.45rem;
}
.ops-stat-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
    white-space: nowrap;
}
.ops-stat-label {
    font-size: 0.65rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    margin-top: 1px;
}
.ops-call { color: #22c55e; }
.ops-put { color: #ef4444; }
.ops-ranger { color: #a78bfa; }
.ops-sep {
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.sort-controls {
    padding: 0 1.5rem;
}

.open-positions-table {
    color: var(--text-primary);
    margin-bottom: 0;
}

.open-positions-table thead th,
.open-positions-table tbody td {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
}

.open-positions-table > tbody > tr {
    background-color: transparent !important;
}

.open-positions-table > tbody > tr > td {
    background-color: transparent !important;
}

.open-positions-table > tbody > tr:hover {
    background-color: rgba(125, 211, 252, 0.05);
}

.open-positions-table > tbody > tr:nth-of-type(odd) {
    background-color: transparent !important;
}

.open-positions-table > tbody > tr:nth-of-type(odd) > td {
    background-color: transparent !important;
}

.open-positions-table thead th {
    background-color: transparent !important;
    color: #6b7280;
    font-size: var(--font-size-base);
    font-weight: 700;
    border-color: var(--border-color);
    text-transform: uppercase;
}

.open-positions-table tbody td {
    border-color: var(--border-color);
    vertical-align: middle;
    font-size: calc(var(--font-size-base) + 1px);
}

.open-positions-table tbody td:nth-child(7) {
    font-size: calc(var(--font-size-base) + 5px);
}

.open-positions-table .btn-outline-primary {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    font-size: var(--font-size-base) !important;
    font-weight: 600 !important;
    padding: 0.3rem 0.75rem !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.open-positions-table .btn-outline-primary:hover {
    background: transparent !important;
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}

/* Add pulsing animation for positions close to expiry */
@keyframes pulse-warning {
    0% { color: var(--warning); }
    50% { color: var(--negative); }
    100% { color: var(--warning); }
}

.open-positions-table .text-danger {
    animation: pulse-warning 2s infinite;
    font-weight: bold;
}

#loading-open-positions, #no-open-positions-data {
    padding: 1.25rem;
    text-align: center;
    color: var(--text-secondary);
}

.user-positions-table-container {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1.5rem 0 0 0;
    background: transparent;
    overflow-x: auto;
    margin-bottom: 3rem;
}

.user-positions-table-container > h2 {
    margin-bottom: 1.5rem;
    padding: 0 1.5rem;
    font-size: 1.75rem;
    font-weight: 700;
}

.user-positions-table {
    color: var(--text-primary);
    margin-bottom: 0;
}

.user-positions-table thead th,
.user-positions-table tbody td {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
}

.user-positions-table > tbody > tr {
    background-color: transparent !important;
}

/* ============================================================== THE PAGER ==
   ONE component, used by the Scoreboard and by the three Portfolio panes. It
   lives here, not in either page's stylesheet, because two pagers that look
   alike drift: the first divergence is a padding, the second is a colour, and
   then the app has two controls for one job.

   Markup, built by scoreboard-cards.js `renderFoot` and portfolio.js
   `renderPager`:

     <div class="pgr">
       <span class="pgr-lbl t-meta">Rows per page</span>
       <div class="pgr-menu">
         <button class="pgr-sel t-ctl" aria-haspopup="listbox">25<i …></button>
         <ul class="pgr-pop" role="listbox" hidden>
           <li class="pgr-opt t-ctl is-on" data-per="25"><i …>25</li>
         </ul>
       </div>
       <span class="pgr-of t-meta">1-25 of 72</span>
       <button class="pgr-btn" data-pg="prev">…</button>
       <button class="pgr-btn" data-pg="next">…</button>
     </div>
   ========================================================================== */
.pgr {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 6px 4px;
  margin-top: 12px;
}
.pgr:empty { margin-top: 0; }
.pgr-lbl { color: var(--text-muted); }

/* ---- rows per page: a listbox on this page's own surfaces ----
   A native <select> paints its popup with the OS, which on macOS is a light
   menu with a blue highlight — the one element on a dark page the stylesheet
   cannot reach. */
.pgr-menu { position: relative; }
.pgr-sel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 11px;
  border: 1px solid var(--border-color);
  border-radius: var(--r-input);
  background: var(--panel-sunken);
  color: var(--text-primary);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.pgr-sel:hover,
.pgr-sel.is-open { border-color: var(--border-light); }
.pgr-sel i {
  font-size: 0.7rem;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}
.pgr-sel.is-open i { transform: rotate(180deg); }
.pgr-pop {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 20;
  min-width: 100%;
  margin: 0;
  padding: 4px;
  list-style: none;
  border: 1px solid var(--border-light);
  border-radius: var(--r-input);
  background: var(--secondary);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}
.pgr-pop[hidden] { display: none; }
.pgr-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  border-radius: var(--r-xs);
  color: var(--text-secondary);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.pgr-opt:hover { background: rgba(255, 255, 255, 0.07); color: var(--text-primary); }
/* The tick is always in the layout, invisible when unselected — otherwise the
   numbers shift sideways as the selection moves. */
.pgr-opt i { opacity: 0; font-size: 0.8rem; color: var(--primary); }
.pgr-opt.is-on { color: var(--text-primary); font-weight: 600; }
.pgr-opt.is-on i { opacity: 1; }

/* The count is a figure, so it takes full ink and tabular digits — the
   numbers change on every page turn and must not shuffle width. */
.pgr-of {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  padding: 0 8px;
}
.pgr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--r-input);
  background: transparent;
  /* Full ink. These were --text-secondary at 40% opacity when disabled and
     could not be seen at all; an arrow the reader cannot find is not a
     control. */
  color: var(--text-primary);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.pgr-btn i { font-size: 0.85rem; }
.pgr-btn:hover:not(:disabled) {
  border-color: var(--border-light);
  background: rgba(255, 255, 255, 0.05);
}
.pgr-btn:active:not(:disabled) { transform: scale(0.94); }
/* An end-of-list arrow is DISABLED, not hidden: a control that disappears
   makes the reader look for it. Still clearly legible — muted ink, no opacity
   fade on top of it. */
.pgr-btn:disabled {
  color: var(--text-muted);
  border-color: rgba(255, 255, 255, 0.05);
  cursor: default;
}


/* ============================================================ TABLE INK ==
   THE RULE, ONE PLACE. Three voices, and every text colour in the app is one
   of them:

     --text-primary   a VALUE the reader compares or acts on — every table
                      cell, every stat figure, an address, a heading.
     --text-muted     the LABEL that names a value — column headers, stat
                      labels, the unit word after a figure — and the
                      em-dashes that stand for "not measured".
     --text-secondary PROSE read once: the rules paragraph, help text, a note
                      under a card.

   A label is not data. A figure is not prose. Anything signed or paid keeps
   its semantic colour (--positive / --negative / --accent), which outranks
   all three.

   WHY THIS BLOCK EXISTS AT ALL. Bootstrap paints cells through
   `.table > :not(caption) > * > *` reading `--bs-table-color`, and that rule
   ships from the CDN, so no plain `td { color: … }` in this file can reach
   it — the cells came out --text-secondary no matter what was declared here.
   The variable has to be set on the table itself. portfolio.css:738 does the
   same for the Portfolio pane. */
.table.user-positions-table,
.table.history-table,
.table.open-positions-table,
.table.profitable-trades-table,
.table.scoreboard-table {
    --bs-table-color: var(--text-primary);
    --bs-table-striped-color: var(--text-primary);
}
/* AND the cells directly, with `!important`.
   The two variables above are necessary and NOT sufficient, and the reason
   was chased to the end in Chrome: the cell resolves --bs-table-color to
   #F8FAFC, no rule in ANY of the thirteen loaded sheets — Bootstrap's
   included, and it enumerates fine — declares a colour that matches this
   cell, and an inline colour overrides whatever wins, so nothing is using
   `!important` against us. The cell still painted #CBD5E1. Rather than keep
   hunting a declaration that cannot be found by inspection, this states the
   colour at a weight nothing can outrank, on the narrowest selector that
   reaches the cell.
   The column header is NOT in this list — a header is a label, and labels
   stay muted. */
.table.user-positions-table > tbody > tr > td,
.table.history-table > tbody > tr > td,
.table.open-positions-table > tbody > tr > td,
.table.profitable-trades-table > tbody > tr > td {
    color: var(--text-primary) !important;
}
/* Signed and semantic figures keep their own colour — the rule above must
   not repaint a loss white. These sit after it, at the same weight. */
.table.user-positions-table > tbody > tr > td.text-danger,
.table.history-table > tbody > tr > td.text-danger { color: var(--negative) !important; }
.table.user-positions-table > tbody > tr > td.text-success,
.table.history-table > tbody > tr > td.text-success { color: var(--positive) !important; }

.user-positions-table > tbody > tr > td {
    background-color: transparent !important;
}

.user-positions-table > tbody > tr:nth-of-type(odd) {
    background-color: transparent !important;
}

.user-positions-table > tbody > tr:nth-of-type(odd) > td {
    background-color: transparent !important;
}

.user-positions-table thead th {
    background-color: transparent !important;
    color: #6b7280;
    font-size: var(--font-size-base);
    font-weight: 700;
    border-color: var(--border-color);
    text-transform: uppercase;
}

.user-positions-table tbody td {
    border-color: var(--border-color);
    vertical-align: middle;
    font-size: calc(var(--font-size-base) + 1px);
}

/* Payout, like the Date cell, ships in the shared row and belongs to the
   trade-page strip alone. Hidden by default so the Positions page keeps the
   cells it had; re-shown under the strip. */
.user-positions-table tbody td.col-payout {
    display: none;
}

#trade-positions-block #trade-positions-container > tr > td.col-payout {
    display: table-cell;
}

/* The Date cell ships in the shared position-row HTML but belongs to the
   trade-page strip alone. Hidden by default so the Positions page keeps the
   nine visible cells it had before, and re-shown under the strip. */
.user-positions-table tbody td.col-date {
    display: none;
}

#trade-positions-block #trade-positions-container > tr > td.col-date {
    display: table-cell;
}

/* The external-link icon is for the trade-page strip alone. Everywhere else
   the document icon it always had is the one that shows, so the Positions page
   is byte-for-byte the same control it was. */
.view-option-btn .view-option-icon-ext {
    display: none;
}

#trade-positions-block .view-option-btn .view-option-icon-ext {
    display: inline-block;
}

/* WAS `:nth-child(7)`, the current price. The strip's row now carries a
   Date cell in front (app.js createPositionCard), and the same row HTML goes to
   the Positions page (app.js:737-740), so the rule re-aimed itself at Cost.
   Name the column by CLASS. Same trap as the history table's USD columns. */
.user-positions-table tbody td.col-current-price {
    font-size: calc(var(--font-size-base) + 5px);
}

.user-positions-table .btn-outline-primary {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    font-size: var(--font-size-base) !important;
    font-weight: 600 !important;
    padding: 0.3rem 0.75rem !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.user-positions-table .btn-outline-primary:hover {
    background: transparent !important;
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}

.user-positions-table .text-danger {
    animation: pulse-warning 2s infinite;
    font-weight: bold;
}

.user-positions-table .no-positions-message {
    text-align: center;
}

.user-positions-table .no-positions-message td {
    padding: 2rem 1.5rem;
}

/* Weekly Competition Sticky Banner */
.weekly-competition-sticky {
    background: rgba(30, 41, 59, 0.7);
    border: none;
    border-radius: var(--border-radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    overflow: hidden;
}

.weekly-competition-sticky:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    background: rgba(30, 41, 59, 0.8);
}

.sticky-content {
    padding: 1rem;
    position: relative;
    z-index: 1;
}

.sticky-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: var(--font-size-base);
    color: var(--yellow-primary);
    margin-bottom: 0.75rem;
    letter-spacing: 0.025em;
}

.sticky-title i {
    font-size: var(--font-size-base);
    color: var(--yellow-primary);
}

.sticky-prizes {
    margin-bottom: 0.75rem;
}

.prize-item {
    font-size: var(--font-size-base);
    color: white;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.prize-item strong {
    color: #FDE047;
    font-weight: 700;
}

.sticky-info {
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.3;
    font-weight: 400;
}


/* Keep top-3 styling on badge only (avoid row-level side strips). */

/* Rank Badge - colored number badges for top 3 (gold/silver/bronze) */
.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    line-height: 1;
    text-align: center;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.rank-badge.rank-1 {
    background: #fde047;
    color: #0a0a0a;
}

.rank-badge.rank-2 {
    background: #94a3b8;
    color: #0a0a0a;
}

.rank-badge.rank-3 {
    background: #d97706;
    color: #fff;
}

.rank-badge:not(.rank-1):not(.rank-2):not(.rank-3) {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

/* Prize placement colors - gold/silver/bronze */
.prize-gold strong {
    color: #fde047 !important;
}

.prize-silver strong {
    color: #94a3b8 !important;
}

.prize-bronze strong {
    color: #d97706 !important;
}

/* Add this to your existing CSS */
.scoreboard-table th i.bi-info-circle {
    font-size: var(--font-size-base);
    margin-left: 3px;
    cursor: help;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.scoreboard-table th i.bi-info-circle:hover {
    opacity: 1;
}

/* Conviction Slider Tick Marks - Fixed Alignment */
datalist {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 5px;
    padding: 0;
    /* Fix alignment issues by adjusting positioning */
    position: relative;
    left: 0;
    right: 0;
}

datalist option {
    position: relative;
    width: 0; /* Change from 1px to 0 to avoid extra space */
    padding: 0;
    margin: 0;
}

datalist option::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 8px;
    background-color: var(--text-secondary);
    transform: translateX(-50%); /* Center the tick mark */
    top: 0;
}

/* Improve slider track to match ticks placement */
.form-range {
    width: 100%;
    padding: 0;
    margin: 0;
    height: 8px;
    background: linear-gradient(to right, var(--negative), var(--primary), var(--positive));
    border-radius: var(--border-radius);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.form-range:hover {
    height: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.form-range:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.3);
}

/* Add container padding to ensure everything aligns properly */
.conviction-slider-container {
    position: relative;
    margin: 2rem 0;
    padding: 0 1rem;
    margin-bottom: 20px; /* More space for the ticks */
}

/* Make sure the slider and datalist are in perfect alignment */
.conviction-slider-container input[type="range"],
.conviction-slider-container datalist {
    width: 100%;
    box-sizing: border-box;
}

.conviction-slider-container input[type="range"],
.position-size-container input[type="range"] {
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius);
    height: 6px;
}

.conviction-slider-container input[type="range"]::-webkit-slider-runnable-track,
.position-size-container input[type="range"]::-webkit-slider-runnable-track {
    background: transparent;
    border-radius: var(--border-radius);
    height: 6px;
}

.conviction-slider-container input[type="range"]::-moz-range-track,
.position-size-container input[type="range"]::-moz-range-track {
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius);
    height: 6px;
    border: none;
}

.position-size-container input[type="range"]::-moz-range-progress {
    background: white;
    border-radius: var(--border-radius);
    height: 6px;
}

.conviction-slider-container input[type="range"]::-webkit-slider-thumb,
.position-size-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    background: white;
    border: none;
    border-radius: var(--border-radius-circle);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
    margin-top: -12px;
}

.conviction-slider-container input[type="range"]::-webkit-slider-thumb:hover,
.position-size-container input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(125, 211, 252, 0.4);
}

.conviction-slider-container input[type="range"]::-webkit-slider-thumb:active,
.position-size-container input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(125, 211, 252, 0.6);
}

/* Firefox slider thumb */
.conviction-slider-container input[type="range"]::-moz-range-thumb,
.position-size-container input[type="range"]::-moz-range-thumb {
    width: 28px;
    height: 28px;
    background: white;
    border: none;
    border-radius: var(--border-radius-circle);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

.conviction-slider-container input[type="range"]::-moz-range-thumb:hover,
.position-size-container input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(125, 211, 252, 0.4);
}

.slider-wrapper-with-tooltip {
    position: relative;
}

.slider-tooltip {
    position: absolute;
    bottom: calc(100% + 8px); /* Position above the slider */
    left: 0;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    text-align: center;
    z-index: 9999;
}

.slider-wrapper-with-tooltip:hover .slider-tooltip {
    opacity: 1;
}

body.modal-open .slider-tooltip,
body.modal-open .profit-tooltip,
body.modal-open .weather-tooltip-popup {
    display: none !important;
}

/* ETH Wrap Section Styling */
.eth-wrap-section .card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.eth-wrap-section .card-title {
    color: var(--primary);
    font-size: var(--font-size-base);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.eth-wrap-section .card-title i {
    color: var(--primary);
    margin-right: 0.5rem;
}

.eth-wrap-section .card-text {
    color: var(--text-secondary);
    font-size: var(--font-size-base);
}

.eth-wrap-section .form-control {
    background-color: var(--secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.eth-wrap-section .form-control:focus {
    background-color: var(--secondary);
    border-color: var(--primary);
    color: var(--text-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 184, 212, 0.25);
}

.eth-wrap-section .form-text {
    color: var(--text-secondary);
    font-size: var(--font-size-base);
}

.eth-wrap-section .quick-amounts {
    margin-top: 0.5rem;
}

.eth-wrap-section .quick-amounts .btn {
    background: var(--dropdown-bg);
    border: none;
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: var(--border-radius);
    font-weight: 700;
    font-size: var(--font-size-base);
    box-shadow: var(--shadow-lg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.eth-wrap-section .quick-amounts .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.eth-wrap-section .quick-amounts .btn:hover::before {
    left: 100%;
}

.eth-wrap-section .quick-amounts .btn:hover {
    background: var(--dropdown-bg-hover);
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl);
}

.eth-wrap-section .quick-amounts .btn:focus {
    box-shadow: 0 0 0 4px rgba(125, 211, 252, 0.4);
}

/* Style the ETH/BTC amounts to be darker and not bold */
.eth-wrap-section .quick-amounts .btn .crypto-amount {
    color: #9ca3af !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
    display: block !important;
}

.eth-wrap-section .quick-amounts .btn .dollar-amount {
    color: white !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    display: block !important;
}

#wrap-eth-btn {
    background-color: transparent;
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 500;
    transition: all 0.2s ease;
}

#wrap-eth-btn:hover {
    background-color: var(--primary);
    color: var(--background);
}

#wrap-eth-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#wrap-status {
    font-size: var(--font-size-base);
    margin-top: 0.75rem;
}

#wrap-status.alert-info {
    background-color: rgba(0, 184, 212, 0.1);
    border-color: var(--primary);
    color: var(--primary);
}

#wrap-status.alert-success {
    background-color: rgba(24, 242, 178, 0.1);
    border-color: var(--positive);
    color: var(--positive);
}

#wrap-status.alert-danger {
    background-color: rgba(255, 61, 113, 0.1);
    border-color: var(--negative);
    color: var(--negative);
}

#loading-scoreboard {
    padding: 1.25rem;
    color: var(--text-primary);
}

#no-scoreboard-data {
    padding: 1.25rem;
    text-align: center;
    color: var(--text-secondary);
}

/* Profitable Trades Table */
.profitable-trades-table-container {
    background-color: var(--card-bg);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    overflow-x: auto;
    margin-top: 1rem;
}

.profitable-trades-table-container > h2 {
    margin-bottom: 1.5rem;
}

.profitable-trades-table {
    color: var(--text-primary);
}

.profitable-trades-table > tbody > tr {
    background-color: transparent !important;
}

.profitable-trades-table > tbody > tr > td {
    background-color: transparent !important;
}

.profitable-trades-table > tbody > tr:hover {
    background-color: rgba(125, 211, 252, 0.05);
}

.profitable-trades-table > tbody > tr:nth-of-type(odd) {
    background-color: transparent !important;
}

.profitable-trades-table > tbody > tr:nth-of-type(odd) > td {
    background-color: transparent !important;
}

.profitable-trades-table thead th {
    background-color: transparent !important;
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    font-weight: 500;
    border-color: var(--border-color);
    position: sticky;
    top: 0;
    z-index: 10;
    white-space: nowrap;
}

.profitable-trades-table tbody td {
    border-color: var(--border-color);
    vertical-align: middle;
    font-size: var(--font-size-base);
}

.profitable-trades-table .rank-1 {
    background: transparent !important;
    border-left: none !important;
}

.profitable-trades-table .rank-2 {
    background: transparent !important;
    border-left: none !important;
    color: inherit !important;
}

.profitable-trades-table .rank-3 {
    background: transparent !important;
    border-left: none !important;
}

/* Rank column alignment for both score and profitable trades tables. */
.scoreboard-table th:first-child,
.scoreboard-table td:first-child,
.profitable-trades-table th:first-child,
.profitable-trades-table td:first-child {
    text-align: center;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

.scoreboard-table td:first-child .rank-badge,
.profitable-trades-table td:first-child .rank-badge {
    margin: 0 auto;
}

.profitable-trades-table th i.bi-info-circle {
    color: var(--primary);
    margin-left: 4px;
    cursor: help;
    transition: color 0.2s ease;
}

.profitable-trades-table th i.bi-info-circle:hover {
    color: var(--accent);
}

.trade-description {
    font-family: 'Inter', sans-serif;
    font-size: var(--font-size-base);
    background-color: rgba(0, 184, 212, 0.1);
    color: var(--primary);
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius);
    border: 1px solid rgba(0, 184, 212, 0.2);
}

#loading-profitable-trades, #no-profitable-trades-data {
    padding: 1.25rem;
    text-align: center;
    color: var(--text-secondary);
}

/* Custom Checkbox Styling */
.form-check {
    background-color: rgba(0, 184, 212, 0.05);
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem;
    margin-top: 1rem;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: all 0.2s ease;
    position: relative;
    min-height: 2.5rem;
}

/* Override Bootstrap mt-3 for form-check to prevent double margin */
.form-check.mt-3 {
    margin-top: 1rem !important;
}

.form-check:hover {
    background-color: rgba(0, 184, 212, 0.08);
}

/* Hide the default checkbox */
.form-check-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Custom checkbox container */
.form-check-label {
    color: var(--text-primary) !important;
    font-weight: 500 !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-left: 2rem !important;
    position: relative;
    line-height: 1.4 !important;
    text-align: left;
    word-wrap: break-word;
}

/* Custom checkbox visual */
.form-check-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 20px;
    width: 20px;
    background-color: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 4px;
    transition: all 0.2s ease;
}

/* Checkbox checked state */
.form-check-input:checked + .form-check-label::before {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* Checkmark */
.form-check-input:checked + .form-check-label::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
}

/* Focus state */
.form-check-input:focus + .form-check-label::before {
    box-shadow: 0 0 0 0.2rem rgba(0, 184, 212, 0.25);
}

/* Hover state */
.form-check:hover .form-check-label::before {
    border-color: var(--primary);
}

/* Price Alerts Styling */
.asset-header {
    margin-bottom: 1rem;
}

/* ============================================
   TROLLBOX STYLES
   ============================================ */

/* The widget is a CARD on the page ground: --card-bg, one hairline, the
   --r-card radius. It used to carry its own black gradient header and the
   old teal accent, so it was the one surface on the page that shared no
   colour with anything under it. Everything below reads a token. */
.trollbox-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 320px;
    height: 400px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--r-card);
    z-index: 1050;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    font-family: var(--sans);
    opacity: 1;

    /* The built-in curves are too weak to read as intentional. One strong
       ease-out for anything entering or responding, one ease for colour. */
    --tb-ease-out: cubic-bezier(0.23, 1, 0.32, 1);

    /* The house popup curve. `#position-detail-modal` (app.css, "The panel
       scales in from 98%") already fixes it for this app: a critically
       damped spring, no overshoot, 0.32s on the transform and 0.22s on the
       opacity. The trollbox opens with the same motion, so a panel arriving
       in the corner and a panel arriving in the middle read as one system. */
    --tb-sheet: cubic-bezier(0.22, 1, 0.36, 1);

    /* It grows from the toggle bubble it replaces, not from its own centre:
       both live in the bottom-right corner, and the widget is anchored
       there by `bottom`/`right`. */
    transform-origin: bottom right;
    transform: scale(1);

    /* NOT `transition: all`. `all` also caught `height`, which the resize
       handle writes on every pointermove — the drag ran 300ms behind the
       cursor. Height animates only for the minimize toggle.
       `display` is discrete: without `allow-discrete` the panel is removed
       on the first frame of the close and there is nothing left to fade. */
    transition: height 220ms var(--tb-ease-out),
                transform 0.32s var(--tb-sheet),
                opacity 0.22s ease-out,
                display 0.32s allow-discrete;
}

/* The state the panel transitions FROM the first time it is rendered — which
   is what the display:none -> flex change is. Without this the open jumps to
   its final frame; only the close would animate. */
@starting-style {
    .trollbox-widget {
        opacity: 0;
        transform: scale(0.98);
    }
}

.trollbox-widget.minimized {
    height: 50px;
}

/* The drag writes height directly; nothing may interpolate it. */
.trollbox-widget.resizing {
    transition: none;
}

.trollbox-widget.hidden {
    display: none;
    opacity: 0;
    transform: scale(0.98);
}

/* Add a subtle fade-in effect for state changes */
.trollbox-widget.state-loading {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.trollbox-widget.state-ready {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* The header is the sunken rung of the ladder, flat, divided from the
   message list by a hairline — the same construction as a table head. */
.trollbox-header {
    background: var(--panel-sunken);
    border-radius: var(--r-card) var(--r-card) 0 0;
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid var(--border-color);
}

.trollbox-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    color: var(--text-primary);
    font-weight: 600;
    font-size: var(--fs-ui);
}

.trollbox-title i {
    color: var(--text-muted);
    font-size: var(--fs-ui);
}

/* A count, not a call to action: hairline pill, no fill. A filled --primary
   pill with white text was the lowest-contrast text on the page. */
.online-count {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    padding: 1px 7px;
    border-radius: var(--r-pill);
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: var(--tr-caps);
    text-transform: uppercase;
    margin-left: auto;
    margin-right: 8px;
    white-space: nowrap;
}

.trollbox-controls {
    display: flex;
    gap: 4px;
}

.trollbox-controls .btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 4px 6px;
    border-radius: var(--r-xs);
    transition: background 150ms ease, color 150ms ease, transform 120ms var(--tb-ease-out);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
}

.trollbox-controls .btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

/* Every pressable thing in the widget answers the press. 0.97 is below
   conscious notice and is the whole reason a control feels connected. */
.trollbox-controls .btn:active {
    transform: scale(0.94);
}

.trollbox-controls .btn:focus-visible,
.trollbox-send-btn:focus-visible,
.trollbox-tray-btn:focus-visible,
.trollbox-set-name-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.trollbox-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.trollbox-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    scroll-behavior: smooth;
}

.trollbox-messages::-webkit-scrollbar {
    width: 4px;
}

.trollbox-messages::-webkit-scrollbar-track {
    background: transparent;
}

.trollbox-messages::-webkit-scrollbar-thumb {
    /* A fill, not a border — see .progress. */
    background: rgba(255, 255, 255, 0.18);
    border-radius: var(--r-pill);
}

.trollbox-messages::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

.message {
    padding: 7px 10px;
    border-radius: var(--r-input);
    background: var(--panel-sunken);
    border-left: 2px solid var(--border-light);
    font-size: var(--fs-ui);
    line-height: 1.45;
    position: relative;
    transition: background 150ms ease;
}

/* The entry belongs to a message that ARRIVES, not to every message the
   history paints. It used to sit on `.message`, so opening the widget or
   scrolling back a page animated forty rows at once. `.new-message` is
   already set by displayMessage(msg, isNew) — the pagination path does not
   set it. 4px, not 10: the list is 320px wide and a long throw reads as
   the row sliding in from somewhere else. */
.message.new-message {
    animation: messageEnter 200ms var(--tb-ease-out);
}

@keyframes messageEnter {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Kept: `.system-message.loading-more` still reads this name. */
@keyframes fadeInMessage {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message.own-message {
    background: rgba(125, 211, 252, 0.10);  /* --primary at 10% */
    border-left-color: var(--primary);
    margin-left: 20px;
}

.message-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
}

.message-author {
    font-weight: 600;
    color: var(--primary);
    font-size: var(--fs-micro);
}

.message-author.clickable-username {
    cursor: pointer;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
    text-decoration: underline;
    text-decoration-color: transparent;
}

.message-author.clickable-username:hover {
    color: var(--text-primary);
    text-decoration-color: var(--primary);
}

.message-time {
    color: var(--text-muted);
    font-size: var(--fs-micro);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}

.message-content {
    color: var(--text-secondary);
    font-size: var(--fs-ui);
    word-wrap: break-word;
}

/* House copy, not a warning. It carried an amber fill and an italic centre,
   which read louder than any real message under it. */
.system-message {
    background: transparent;
    border-left-color: var(--border-color);
    color: var(--text-muted);
    font-style: normal;
    text-align: left;
    padding: 6px 10px;
    font-size: var(--fs-micro);
    line-height: 1.5;
}

.system-message i {
    color: var(--text-muted);
    margin-right: 6px;
}

.trollbox-input-container {
    border-top: 1px solid var(--border-color);
    padding: 10px 12px;
}

.trollbox-user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.user-badge {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--border-color);
    padding: 1px 7px;
    border-radius: var(--r-pill);
    font-size: var(--fs-micro);
    font-weight: 500;
    /* The badge holds a display name or a truncated address, so it is NOT
       uppercased — `text-transform` would mangle a hex address into
       0XE6C3…E7EF. `--mono` is here for the address case. */
    font-family: var(--mono);
}

.user-badge.anonymous {
    color: var(--text-muted);
}

.trollbox-input-wrapper {
    display: flex;
    gap: 6px;
    align-items: center;
}

.trollbox-input {
    flex: 1;
    min-width: 0;
    background: var(--panel-sunken);
    border: 1px solid var(--border-color);
    border-radius: var(--r-input);
    padding: 7px 10px;
    color: var(--text-primary);
    font-family: var(--sans);
    font-size: var(--fs-ui);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.trollbox-input::placeholder {
    color: var(--text-muted);
}

.trollbox-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(125, 211, 252, 0.18);
}

.trollbox-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --primary is a light blue, so its text is the page ground, never white.
   Same rule as the active sort chip on the scoreboard. */
.trollbox-send-btn {
    background: var(--primary);
    border: none;
    border-radius: var(--r-input);
    padding: 7px 10px;
    color: var(--background);
    cursor: pointer;
    transition: background 150ms ease, transform 120ms var(--tb-ease-out);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
}

@media (hover: hover) and (pointer: fine) {
    .trollbox-send-btn:hover:not(:disabled) {
        background: var(--primary-dark);
    }
}

.trollbox-send-btn:active:not(:disabled) {
    transform: scale(0.94);
}

.trollbox-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.trollbox-status {
    margin-top: 6px;
    font-size: var(--fs-micro);
    color: var(--text-muted);
    text-align: center;
}

.trollbox-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    background: var(--primary);
    border: none;
    border-radius: var(--border-radius-circle);
    color: var(--background);
    font-size: var(--fs-title);
    cursor: pointer;
    z-index: 1049;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(125, 211, 252, 0.28);
    --tb-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    transform-origin: bottom right;
    opacity: 1;
    transition: background 200ms ease, transform 140ms var(--tb-ease-out),
                box-shadow 200ms ease, opacity 0.22s ease-out,
                display 0.22s allow-discrete;
}

/* show()/hide() swap the bubble and the panel by writing `display` inline, so
   the bubble's own hidden state has to be read off that inline style — the
   same attribute hook the sticker and emoji trays already use in
   trollbox.css. Without it the bubble blinks out while the panel is still
   growing, and the two halves of one gesture look unrelated. */
.trollbox-toggle[style*="display: none"] {
    opacity: 0;
    transform: scale(0.9);
}

@starting-style {
    .trollbox-toggle {
        opacity: 0;
        transform: scale(0.9);
    }
}

@media (hover: hover) and (pointer: fine) {
    .trollbox-toggle:hover {
        background: var(--primary-dark);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(125, 211, 252, 0.38);
    }
}

.trollbox-toggle:active {
    transform: scale(0.94);
}

.trollbox-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.chat-notification {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--negative);
    color: var(--background);
    border-radius: var(--border-radius-circle);
    width: 20px;
    height: 20px;
    font-size: var(--fs-micro);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--background);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .trollbox-widget {
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 300px;
        border-radius: var(--r-card) var(--r-card) 0 0;
        border-bottom: none;
        z-index: 1050; /* Ensure it stays above the moved boxes */
    }
    
    .trollbox-widget.minimized {
        height: 50px;
    }
    
    .trollbox-toggle {
        bottom: 20px; /* Keep at bottom, above the moved boxes */
        right: 16px;
        width: 48px;
        height: 48px;
        font-size: var(--fs-body);
        z-index: 1051; /* Above the widget */
    }
}

@media (max-width: 480px) {
    .trollbox-widget {
        height: 250px;
    }
    
    .message {
        padding: 6px 10px;
        font-size: var(--fs-ui);
    }
    
    .trollbox-input {
        font-size: var(--fs-ui);
    }
    
    /* Adjust mobile top boxes for smaller screens */
    .mobile-top-boxes .sticky-banners-container {
        margin: 0.75rem 0.5rem 0 0.5rem; /* Match spacing with asset section below */
        gap: 0.5rem;
    }
    
    .mobile-top-boxes .beta-flag-sticky .sticky-content,
    .mobile-top-boxes .weekly-competition-sticky .sticky-content {
        padding: 0.5rem;
    }
}

/* The 2s teal flash that used to run here is gone. It ended on a hardcoded
   background, so every new row settled onto the WRONG surface and stayed
   there; and the list already auto-scrolls to the newest message, so the
   arrival needs no second announcement. `.new-message` now carries the
   200ms entry above. */

/* Rate limit warning */
.rate-limit-warning {
    background: rgba(248, 113, 113, 0.10);   /* --negative at 10% */
    border-left-color: var(--negative);
    color: var(--negative);
}

/* Typing indicator */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    color: var(--text-muted);
    font-size: var(--fs-micro);
}

.typing-dots {
    display: flex;
    gap: 2px;
}

.typing-dot {
    width: 4px;
    height: 4px;
    background: var(--text-secondary);
    border-radius: var(--border-radius-circle);
    animation: typingAnimation 1.4s infinite ease-in-out;
}

.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }
.typing-dot:nth-child(3) { animation-delay: 0s; }

/* Not scale(0) — nothing in the world shrinks to nothing and comes back.
   A dot that keeps a visible body reads as breathing, not blinking. */
@keyframes typingAnimation {
    0%, 80%, 100% {
        transform: scale(0.5);
        opacity: 0.35;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Content filter and error message styling */
.content-filter-warning {
    background: rgba(255, 179, 0, 0.1);
    border-left-color: var(--warning);
    color: var(--warning);
}

.error-message {
    background: rgba(255, 61, 113, 0.1);
    border-left-color: var(--negative);
    color: var(--negative);
}

/* Loading indicator for message pagination */
.system-message.loading-more {
    color: var(--text-muted);
    text-align: center;
    padding: 8px;
    background: transparent;
    border-radius: var(--r-input);
    margin: 4px 0;
    animation: fadeInMessage 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

.system-message.loading-more i {
    animation: spin 1s linear infinite;
    margin-right: 8px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Expired position styling */
.expired-position {
    background-color: rgba(255, 179, 0, 0.05) !important;
    border-left: 3px solid var(--warning);
    font-weight: 500;
    position: relative;
}

.expired-position::before {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: var(--warning);
    color: white;
    font-size: var(--font-size-base);
    padding: 2px 6px;
    border-radius: var(--border-radius);
    font-weight: 600;
    z-index: 10;
}


/* Settlement price specific styling */
.settlement-price-info {
    font-style: italic;
    color: var(--text-secondary);
    font-size: var(--font-size-base);
}

.settlement-price-badge {
    background-color: rgba(0, 184, 212, 0.1);
    color: var(--primary);
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    font-weight: 500;
    margin-left: 0.5rem;
}

/* Enhanced tooltip styles */
/* Scoreboard period toggle styling */
.scoreboard-period-toggle {
    width: 100%;
    padding: 0 1.5rem;
}

.scoreboard-tabs {
    display: flex;
    gap: 2rem;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.scoreboard-tab {
    background: transparent;
    border: none;
    color: #6b7280;
    font-size: calc(var(--font-size-base) + 2px);
    font-weight: 700;
    padding: 0.5rem 0;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
}

.scoreboard-tab:hover {
    color: rgba(255, 255, 255, 0.9);
}

.scoreboard-tab.active {
    color: white;
    border-bottom: 2px solid var(--accent);
}

.scoreboard-info {
    padding: 0 1.5rem;
}

@media (max-width: 768px) {
    .scoreboard-period-toggle {
        padding: 0 1.5rem;
    }

    .scoreboard-tabs {
        gap: 1.5rem;
        overflow-x: auto;
    }

    .scoreboard-tab {
        font-size: 0.9rem;
        white-space: nowrap;
    }
}

/* Sort controls styling */
.sort-controls {
    margin-bottom: 1rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.sort-tabs {
    display: flex;
    gap: 2rem;
    align-items: center;
    flex: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sort-tab {
    background: transparent;
    border: none;
    color: #6b7280;
    font-size: calc(var(--font-size-base) + 2px);
    font-weight: 700;
    padding: 0.5rem 0;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
}

.sort-tab:hover {
    color: rgba(255, 255, 255, 0.9);
}

.sort-tab.active {
    color: white;
    border-bottom: 2px solid var(--accent);
}

.refresh-positions-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.refresh-positions-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent);
    color: var(--accent);
    transform: rotate(180deg);
}

.refresh-positions-btn i {
    font-size: 1rem;
}

@media (max-width: 768px) {
    .sort-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .sort-tabs {
        gap: 1.5rem;
        width: 100%;
        overflow-x: auto;
    }

    .sort-tab {
        font-size: 0.9rem;
        white-space: nowrap;
    }

    .refresh-positions-btn {
        align-self: flex-end;
    }
}

/* Loading states */
.loading-overlay {
    position: relative;
}

.loading-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.loading-overlay.dark::after {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Responsive design for mobile */
@media (max-width: 768px) {
    .open-positions-table {
        font-size: var(--font-size-base);
    }
    
    .open-positions-table th,
    .open-positions-table td {
        padding: 0.5rem 0.25rem;
    }
    
    .expired-position::before {
        display: none; /* Hide the overlay text on mobile for better readability */
    }
    
    .position-details {
        flex-direction: column;
        gap: 1rem;
    }
    
    .position-detail-item {
        flex: 1 0 100%;
    }
}


/* Multiday expiry filter styles */
.expiry-filter-toggle {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.expiry-filter-toggle .btn-group {
    box-shadow: none;
}

.expiry-filter-toggle .btn:first-child {
    border-radius: 6px !important;
}

.expiry-filter-toggle .btn:last-child {
    border-radius: 6px !important;
}

.expiry-filter-toggle .btn-check:checked + .btn {
    background: rgba(56, 152, 236, 0.85);
    color: #ffffff;
    box-shadow: none;
    border: none;
}


/* Advanced view expiry selector */
.expiry-group-header {
    background-color: rgba(255, 255, 255, 0.02);
}

.expiry-group-header td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.expiry-selector {
    padding: 0.6rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.expiry-selector strong {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.expiry-selector .btn-group .btn {
    font-size: 0.7rem;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.12s ease;
}

.expiry-selector .btn-group .btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.expiry-selector .btn-group .btn-primary,
.expiry-selector .btn-group .btn-primary:hover {
    background: rgba(253, 224, 71, 0.12);
    border-color: rgba(253, 224, 71, 0.3);
    color: var(--accent);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .expiry-filter-toggle .btn {
        font-size: var(--font-size-base);
        padding: 0.2rem 0.4rem;
    }
    
}

/* Legacy swap classes kept for JS compatibility */
.swap-rate-info {
    padding: 0;
    background: transparent;
    border: none;
}

.swap-rate-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    padding: 0;
}

/* Swap Loading State */
#swap-to-amount {
    position: relative;
}

#swap-to-amount.loading {
    background-color: var(--secondary);
    border: none;
}

/* IN the row, not over it. This was `position: absolute` with no positioned
   ancestor — `.swap-card-row` and `.swap-card` are both static, and the
   `position: relative` above sits on the INPUT, which is the spinner's
   SIBLING, not its parent. So `right: 0.75rem` resolved against the modal and
   the spinner landed outside the card. jQuery inserts it between the input and
   the token chip, which is exactly where it belongs, so let the flex row place
   it. */
.swap-loading-spinner {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.swap-loading-spinner .spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.125rem;
}

/* Swap Rate Info */
.swap-rate-info .alert {
    background-color: rgba(0, 184, 212, 0.1);
    border: none;
    color: var(--text-primary);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

/* Alert Classes - Using Global Color Definitions */
.alert-warning {
    background-color: rgba(251, 191, 36, 0.1);
    border: 1px solid var(--warning);
    color: #ffffff;
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem;
    font-size: var(--font-size-base);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-warning .bi {
    color: #ffffff;
    font-size: 1rem;
}

.alert-warning small {
    color: #ffffff;
    font-size: var(--font-size-base);
    line-height: 1.4;
}

#connection-alert {
    border-radius: 0;
}

.alert-info {
    background-color: rgba(125, 211, 252, 0.1);
    border: 1px solid var(--primary);
    color: var(--primary);
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem;
    font-size: var(--font-size-base);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-info .bi {
    color: var(--primary);
    font-size: 1rem;
}

.alert-info small {
    color: var(--primary);
    font-size: var(--font-size-base);
    line-height: 1.4;
}

.alert-success {
    background-color: rgba(134, 239, 172, 0.1);
    border: 1px solid var(--positive);
    color: var(--positive);
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem;
    font-size: var(--font-size-base);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-success .bi {
    color: var(--positive);
    font-size: 1rem;
}

.alert-success small {
    color: var(--positive);
    font-size: var(--font-size-base);
    line-height: 1.4;
}

.alert-danger {
    background-color: rgba(248, 113, 113, 0.1);
    border: 1px solid var(--negative);
    color: var(--negative);
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem;
    font-size: var(--font-size-base);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-danger .bi {
    color: var(--negative);
    font-size: 1rem;
}

.alert-danger small {
    color: var(--negative);
    font-size: var(--font-size-base);
    line-height: 1.4;
}

/* Quick Amount Buttons */
.quick-amounts .btn {
    background: var(--dropdown-bg);
    border: none;
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: var(--border-radius);
    font-weight: 700;
    font-size: var(--font-size-base);
    box-shadow: var(--shadow-lg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
    position: relative;
    overflow: hidden;
}

.quick-amounts .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.quick-amounts .btn:hover::before {
    left: 100%;
}

.quick-amounts .btn:hover {
    background: var(--dropdown-bg-hover);
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl);
}

.quick-amounts .btn:focus {
    box-shadow: 0 0 0 4px rgba(125, 211, 252, 0.4);
}

.quick-amounts .btn:active {
    transform: translateY(-1px);
}

/* Style the ETH/BTC amounts to be darker and not bold */
.quick-amounts .btn .crypto-amount {
    color: #9ca3af !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
    display: block !important;
}

.quick-amounts .btn .dollar-amount {
    color: white !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    display: block !important;
}

/* Modal Close Button */
.btn-close {
    filter: none;
    opacity: 0.5;
}

.btn-close:hover {
    opacity: 0.75;
}

/* Notification timer slider styling */
.notification-timer-slider {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px 0 0 0;
    transition: width linear;
    z-index: 1;
}

/* Ensure notification content is above timer */
.notification-content {
    position: relative;
    z-index: 2;
}

/* Close button without border - for slider close button only */
#hide-slider-btn {
    display: none;
}

/* Responsive adjustments for swap modal */
@media (max-width: 768px) {
    #swapModal .modal-dialog {
        margin: 1rem;
        max-width: calc(100% - 2rem);
    }
    
    .swap-form .row {
        flex-direction: column;
    }
    
    .swap-form .col-md-6 {
        margin-bottom: 1rem;
    }
    
    .quick-amounts .btn {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }
    
    .swap-btn {
        width: 20px;
        height: 20px;
        font-size: 10px;
        top: 6px;
        right: 6px;
    }
}

/* Modal Trade Summary Cards */
.modal-trade-summary {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.modal-summary-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.modal-summary-card.modal-summary-loss {
    background: rgba(248, 113, 113, 0.05);
    border-color: rgba(248, 113, 113, 0.2);
}

.modal-summary-icon {
    font-size: 1.25rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(253, 224, 71, 0.1);
    border: 1px solid rgba(253, 224, 71, 0.2);
    border-radius: 50%;
    color: var(--accent);
    flex-shrink: 0;
}

.modal-summary-card.modal-summary-loss .modal-summary-icon {
    background: rgba(248, 113, 113, 0.1);
    border-color: rgba(248, 113, 113, 0.2);
    color: var(--negative);
}

.modal-summary-content {
    flex: 1;
    min-width: 0;
}

.modal-summary-label {
    color: var(--text-muted);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.125rem;
    font-weight: 500;
}

.modal-summary-value {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    word-wrap: break-word;
}

.modal-summary-card.modal-summary-loss .modal-summary-value {
    color: var(--negative);
}

/* ========================================
   ADDITIONAL STYLES FROM INLINE HTML
   ======================================== */

/* Enhanced tooltip styling for PnL USD values */
.pnl-tooltip {
    cursor: help;
    position: relative;
}

.pnl-tooltip:hover {
    opacity: 0.8;
}

/* Override default tooltip styling for better visibility */
/* Option Type Filter Styling - Compact Version */
.option-type-filter-compact {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.option-type-filter-compact .btn-group {
    border-radius: 6px;
    overflow: hidden;
}

.option-type-filter-compact .btn {
    font-weight: 500;
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    transition: all 0.2s ease;
}

.option-type-filter-compact .btn-check:checked + .btn-outline-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
}

.option-type-filter-compact .btn-check:checked + .btn-outline-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

.option-type-filter-compact .btn-check:checked + .btn-outline-success {
    background-color: #198754;
    border-color: #198754;
    color: white;
}

.filter-description-compact {
    text-align: center;
    margin-top: 0.25rem;
}

/* Conviction Slider Color Changes Based on Filter - High Specificity */
.conviction-slider-container {
    transition: all 0.3s ease;
}

/* Default ALL mode - gradient from red to green - Override existing styles */
.conviction-slider-container input[type="range"].form-range,
.conviction-slider-container .form-range {
    background: linear-gradient(to right, #dc3545 0%, #ffc107 50%, #198754 100%) !important;
    height: 8px;
    border-radius: 4px;
}

/* PUTS mode - red gradient - Higher specificity */
.conviction-slider-container.puts-mode input[type="range"].form-range,
.conviction-slider-container.puts-mode .form-range {
    background: linear-gradient(to right, #dc3545 0%, #c82333 100%) !important;
}

/* CALLS mode - green gradient - Higher specificity */
.conviction-slider-container.calls-mode input[type="range"].form-range,
.conviction-slider-container.calls-mode .form-range {
    background: linear-gradient(to right, #198754 0%, #20c997 100%) !important;
}

/* Slider thumb styling */
.form-range::-webkit-slider-thumb {
    background: #ffffff;
    border: 2px solid #dee2e6;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.puts-mode .form-range::-webkit-slider-thumb {
    border-color: #dc3545;
}

.calls-mode .form-range::-webkit-slider-thumb {
    border-color: #198754;
}

/* Modify conviction slider behavior when in filter mode */
.conviction-slider-container.filter-mode .conviction-labels {
    opacity: 0.7;
}

.conviction-slider-container.puts-mode .bullish-label {
    opacity: 0.3;
}

.conviction-slider-container.calls-mode .bearish-label {
    opacity: 0.3;
}

/* Combined USD and contract information display styling */
.combined-info {
    font-size: 0.85em;
    color: #6c757d;
    font-weight: 400;
    margin-left: 8px;
}

.current-size-display {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
}

.current-size-display .combined-info {
    white-space: nowrap;
}

/* Main layout container */
.main-layout {
    display: flex;
    min-height: calc(100vh - 56px); /* Full height minus navbar */
}

/* Left Sidebar Styles */
.left-sidebar {
    display: none;
}

.left-sidebar.hidden {
    display: none;
}

/* Hide main-layout container when not on trade page */
.main-layout.hidden {
    display: none;
}

.left-sidebar-cards {
    padding: 0 20px 20px 20px;
    position: static;
}

/* Desktop Status Bar */
.global-maintenance-bottom-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 28px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.22), rgba(168, 85, 247, 0.2));
    border-top: 1px solid rgba(250, 204, 21, 0.35);
    border-bottom: 1px solid rgba(250, 204, 21, 0.25);
    color: rgba(255, 255, 255, 0.96);
    font-size: 0.73rem;
    font-weight: 600;
    z-index: 1001;
    backdrop-filter: blur(8px);
}

.global-maintenance-bottom-icon {
    color: #fde68a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.global-maintenance-bottom-text {
    white-space: nowrap;
}

@media (max-width: 991px) {
    .global-maintenance-bottom-banner {
        bottom: calc(56px + env(safe-area-inset-bottom, 0px));
        min-height: 36px;
        height: auto;
        padding: 0.35rem 0.65rem;
        font-size: 0.7rem;
        z-index: 1002;
    }

    .global-maintenance-bottom-text {
        white-space: normal;
        text-align: center;
        line-height: 1.25;
    }
}

.status-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* THE SAME SURFACE AS THE HEADER. These are the two fixed chrome bands
       that frame the page, so they take one paint: --card-bg, a --border-color
       hairline, no blur (see `header`, app.css). The old value was
       rgba(10, 14, 22, 0.92) — a near-black found in no token, darker than the
       header and darker than the ground, which made the bar read as a third
       surface. Transparent was tried and is worse: the readouts then sit
       directly on the backdrop artwork, whose brightness is a property of the
       image and not a constant. */
    background: var(--card-bg);
    backdrop-filter: none;
    border-top: 1px solid var(--border-color);
    padding: 0 1rem;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
    font-size: 0.675rem;
    font-weight: 500;
    /* The bar reads at --text-primary, and the whole ladder below moves with
       it. It used to run on raw alphas from 0.30 to 0.45 — dimmer than
       --text-muted anywhere else on the page — which was survivable on the
       92% slab and is not on the open backdrop. Semantic tokens now, so the
       bar cannot drift from the rest of the page again. */
    color: var(--text-primary);
    letter-spacing: 0.01em;
}

.status-bar-left,
.status-bar-right {
    display: flex;
    align-items: center;
    gap: 0;
}

.status-bar-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 0.6rem;
    white-space: nowrap;
    height: 28px;
}

.status-bar-item i {
    font-size: 0.65rem;
    opacity: 0.75;
}

.status-bar-sep {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.status-bar-system {
    gap: 0.4rem;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot-ok {
    background: #34d399;
    box-shadow: 0 0 4px rgba(52, 211, 153, 0.4);
}

.status-dot-checking {
    background: rgba(255, 255, 255, 0.25);
    animation: status-pulse 1.5s ease-in-out infinite;
}

.status-dot-degraded {
    background: #fbbf24;
    box-shadow: 0 0 4px rgba(251, 191, 36, 0.4);
}

.status-dot-down {
    background: #f87171;
    box-shadow: 0 0 4px rgba(248, 113, 113, 0.4);
}

@keyframes status-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

.status-bar-label {
    color: var(--text-muted);
}

.status-bar-value {
    color: var(--text-primary);
    font-weight: 600;
}

.status-bar-unit {
    color: var(--text-muted);
    font-size: 0.6rem;
}

.status-bar-muted {
    color: var(--text-secondary);
}

.status-bar-tag {
    color: rgba(56, 152, 236, 0.7);
    font-weight: 600;
    letter-spacing: 0.08em;
    font-size: 0.6rem;
}

.status-bar-link {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
    cursor: pointer;
}

.status-bar-link:hover {
    color: var(--text-primary);
}

.status-bar-powered {
    color: var(--text-secondary);
    text-decoration: none;
    transition: opacity 0.15s ease;
    cursor: pointer;
    gap: 0.4rem;
}

.status-bar-powered:hover {
    opacity: 0.85;
    color: var(--text-secondary);
}

.status-bar-tnuts-logo {
    height: 12px;
    width: auto;
    opacity: 0.8;
    transition: opacity 0.15s ease;
}

.status-bar-powered:hover .status-bar-tnuts-logo {
    opacity: 1;
}

/* Mobile Beta Badge - Compact version - Hidden on Desktop */
.beta-badge-container {
    display: none;
    justify-content: center;
    margin-top: 1rem;
}

.beta-badge-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #20293A 0%, #242D3E 100%);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 0.5rem 1rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.beta-badge-btn:hover {
    background: linear-gradient(135deg, #242D3E 0%, #20293A 100%);
    border-color: #555;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.beta-badge-btn .beta-label-compact {
    font-weight: 700;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
}

.beta-badge-btn i {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Beta Info Modal */
.beta-info-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    margin: 0;
}

.beta-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.beta-modal-content {
    position: relative;
    background: linear-gradient(135deg, #20293A 0%, #242D3E 100%);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 1.5rem;
    max-width: 400px;
    width: 100%;
    margin: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    animation: modalSlideUp 0.3s ease;
    z-index: 10000;
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.beta-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #333;
}

.beta-modal-header .beta-label {
    background: linear-gradient(45deg, #007bff, #0056b3);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.beta-modal-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    font-size: 1.25rem;
}

.beta-modal-close:hover {
    color: #fff;
}

.beta-modal-body {
    color: #fff;
}

.beta-info-item {
    margin-bottom: 1rem;
}

.beta-info-item:last-child {
    margin-bottom: 0;
}

.beta-info-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    font-weight: 400;
}

.beta-liquidity-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem;
}

.beta-info-note {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.813rem;
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.beta-info-note i {
    color: rgba(255, 255, 255, 0.5);
}

/* Mobile optimizations */
@media (max-width: 768px) {
    /* Status bar hidden on mobile via d-none d-lg-flex */
    
    /* Show mobile badge on mobile */
    .beta-badge-container {
        display: flex !important;
    }
    
    .beta-info-modal {
        align-items: center;
        padding: 1rem;
    }
    
    .beta-modal-content {
        margin: auto;
        padding: 1.25rem;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .beta-modal-header {
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }
    
    .beta-liquidity-value {
        font-size: 1.25rem;
    }
    
    .beta-badge-btn {
        font-size: 0.813rem;
        padding: 0.4rem 0.875rem;
    }
}


.weekly-competition-card {
    background: linear-gradient(135deg, #20293A 0%, #242D3E 100%);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.weekly-competition-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.card-content {
    color: #fff;
}

.card-title {
    margin-bottom: 15px;
}

.beta-label {
    background: linear-gradient(45deg, #007bff, #0056b3);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-title i {
    color: #ffd700;
    margin-right: 8px;
}

.card-title span {
    font-weight: 600;
    font-size: 14px;
}

.card-info {
    color: #ccc;
    font-size: 13px;
    margin-bottom: 10px;
    line-height: 1.4;
}

.card-liquidity {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
}

.card-renewal {
    color: #888;
    font-size: 12px;
    font-style: italic;
}

.card-prizes {
    margin-bottom: 10px;
}

.prize-item {
    color: #fff;
    font-size: 13px;
    margin-bottom: 5px;
}

.prize-item strong {
    color: #ffd700;
}

/* Make trade interface wider - match header's 1rem horizontal padding */
#trade-section .container {
    max-width: none;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    /* NO padding-top. This 8px predates the header becoming a band: when the
       header was a transparent strip the gap was invisible, but the band now
       paints --card-bg and ends in a hairline, so the 8px showed the page
       ground through as a seam between chrome and content. The trade page's
       strip is meant to butt against the header's hairline — one edge, not a
       gap and then an edge. */
}

/* Style other content sections */
#positions-section .container,
#history-section .container,
#scoreboard-section .container,
#referral-section .container {
    max-width: none;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 8px;
    overflow: visible;
}

/* Remove row gutters so trade content aligns with header edges */
#trade-section .row {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    --bs-gutter-x: 0;
}

#trade-section .col-12,
#positions-section .col-12 {
    margin-top: 0;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
}

#positions-section .row {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    --bs-gutter-x: 0;
}

/* Fund with Credit Card Button Styles */
.fund-with-card-section {
    text-align: center;
    margin: 20px 0;
}

.fund-with-card-btn {
    background: linear-gradient(135deg, #1652f0 0%, #1153e0 100%);
    border: none;
    border-radius: 12px;
    padding: 15px 25px;
    font-weight: 600;
    font-size: 16px;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(22, 82, 240, 0.3);
    width: 100%;
    max-width: 400px;
}

.fund-with-card-btn:hover {
    background: linear-gradient(135deg, #0f47d4 0%, #0e3cc0 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(22, 82, 240, 0.4);
    color: white;
}

.fund-with-card-btn small {
    font-size: 12px;
    opacity: 0.9;
    font-weight: 400;
}

/* The Weekly Competition button and dropdown rules went with their markup.
   Left behind on purpose: the unscoped .prize-item (app.css:7944, :10395) and
   the .weekly-competition-sticky / -card / -box blocks. They are dead for a
   different reason, and clearing them is its own pass. */

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .main-layout {
        flex-direction: column;
    }

    .left-sidebar {
        display: none;
    }

    .content-section {
        width: 100%;
    }

    #trade-section .container {
        max-width: none;
        width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #positions-section .container,
    #history-section .container,
    #scoreboard-section .container,
    #referral-section .container {
        max-width: none;
        width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

.weekly-competition-box {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(253, 224, 71, 0.15);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: all 0.2s ease;
}

.weekly-competition-box:hover {
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(253, 224, 71, 0.25);
}

.weekly-competition-box .gap-2 {
    gap: 0.5rem !important;
}

.weekly-competition-box span {
    font-size: 0.875rem;
    letter-spacing: 0.02em;
}

.competition-prizes {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.competition-prizes .prize-item {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.competition-prizes .row > div:nth-child(1) {
    display: flex;
    flex-direction: column;
}

.competition-prizes .row > div:nth-child(1) .prize-item {
    font-size: 0.85rem;
    font-weight: 700;
    padding-bottom: 0.15rem;
}

.competition-prizes .row > div:nth-child(1) .prize-item strong {
    font-size: 1.3rem;
    display: block;
    line-height: 1.1;
}

.competition-prizes .row > div:nth-child(2) {
    display: flex;
    flex-direction: column;
}

.competition-prizes .row > div:nth-child(2) .prize-item {
    font-size: 0.8rem;
    font-weight: 600;
    padding-bottom: 0.3rem;
}

.competition-prizes .row > div:nth-child(2) .prize-item strong {
    font-size: 1.15rem;
    display: block;
    line-height: 1.1;
}

.competition-prizes .row > div:nth-child(3) {
    display: flex;
    flex-direction: column;
}


@media (max-width: 768px) {
    .weekly-competition-box {
        padding: 0.75rem !important;
    }
    
    .weekly-competition-box .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
    }
    
    .competition-prizes {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    
    .competition-prizes .prize-item {
        font-size: 0.75rem;
    }
    
    .competition-prizes .row > div:nth-child(1) .prize-item {
        font-size: 1.2rem;
        padding-bottom: 0.25rem;
    }
    
    .competition-prizes .row > div:nth-child(1) .prize-item strong {
        font-size: 1.5rem;
    }
    
    .competition-prizes .row > div:nth-child(2) .prize-item {
        font-size: 1.05rem;
        padding-bottom: 0.5rem;
    }
    
    .competition-prizes .row > div:nth-child(2) .prize-item strong {
        font-size: 1.3rem;
    }
    
    .competition-prizes .row > div:nth-child(3) .prize-item {
        font-size: 1rem;
        padding-bottom: 0.75rem;
    }
    
    .competition-prizes .row > div:nth-child(3) .prize-item strong {
        font-size: 1.2rem;
    }
    
    .competition-prizes .row > div:nth-child(4) .prize-item {
        font-size: 0.95rem;
        padding-bottom: 1rem;
    }
    
    .competition-prizes .row > div:nth-child(4) .prize-item strong {
        font-size: 1.1rem;
    }
    
    .competition-action .btn {
        width: 100%;
    }
}
/* ========================================
   USDC Funding Bar Styles
   ======================================== */

.usdc-funding-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--dropdown-bg);
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.usdc-funding-bar:hover {
    border-color: var(--border-light);
}

.funding-balance-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.funding-balance-info {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.funding-balance-label {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.funding-balance-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.funding-balance-currency {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.funding-actions-section {
    display: flex;
    gap: 0.5rem;
}

.funding-actions-section .dropdown-menu {
    background: var(--dropdown-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.funding-actions-section .dropdown-item {
    color: var(--text-primary);
    display: flex;
    align-items: center;
    padding: 0.625rem 1rem;
}

.funding-actions-section .dropdown-item:hover {
    background: var(--dropdown-bg-hover);
    color: var(--accent);
}

.funding-actions-section .dropdown-item .badge {
    font-size: 0.65rem;
    font-weight: normal;
}

.funding-actions-section .dropdown-divider {
    border-color: var(--border-color);
}

/* Mobile responsive */
@media (max-width: 576px) {
    .usdc-funding-bar {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .funding-balance-section {
        justify-content: center;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--border-color);
    }
    
    .funding-actions-section {
        justify-content: center;
    }
}

/* ========================================
   Deposit Modal Styles
   ======================================== */

/* Legacy deposit classes removed — deposit modal now uses odette-modal-content and deposit-panel */

/* ========================================
   Inline Balance Section (Premium to Pay row)
   ======================================== */

/* Keep the slider card above the trade preview so its dropdown isn't clipped */
.trade-amount-wrapper {
    position: relative;
    z-index: 1;
}

.trade-amount-wrapper > .professional-asset-header {
    position: relative;
    z-index: 1;
}

.premium-balance-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    position: relative;
    z-index: 10;  /* Above option-preview which uses transform (creates stacking context) */
    padding-right: 0;  /* Override .slider-title-wrapper padding (no longer needed with flex layout) */
}

.inline-balance-section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    position: relative; /* Anchor dropdown locally instead of to transformed ancestors */
    z-index: 40;
}

.balance-divider {
    color: var(--text-muted);
    opacity: 0.5;
}

.inline-balance {
    color: #fff !important;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.get-more-inline {
    color: var(--yellow-primary) !important;
    text-decoration: none !important;
    font-size: 0.75rem;
    padding: 0 0.25rem !important;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-weight: 600;
}

.get-more-inline::before {
    content: '\F64D';
    font-family: 'bootstrap-icons';
    margin-right: 0.25rem;
    line-height: 1;
    font-size: 0.75rem;
}

.get-more-inline:hover {
    color: var(--accent) !important;
}

.get-more-inline::after {
    font-size: 0.65rem;
    vertical-align: middle;
}

/* Mobile: stack inline balance below premium */
@media (max-width: 576px) {
    .premium-balance-row {
        justify-content: center;
    }
    
    .inline-balance-section {
        width: 100%;
        justify-content: center;
        margin-left: 0;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border-color);
        margin-top: 0.5rem;
    }
    
    .balance-divider {
        display: none;
    }
}

/* Fix z-index for Get more dropdown - use fixed positioning to escape stacking contexts */
.inline-balance-section .dropdown-menu {
    position: absolute !important;
    top: calc(100% + 0.35rem) !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    z-index: 9999 !important;
    min-width: 220px;
    max-width: 320px;
    overflow: visible;
    will-change: top, left;
}

/* Static asset display (for USDC-only "To" field in swap modal) */
.asset-display {
    padding: 0.5rem 1rem;
    background: var(--bg-secondary, #20293A);
    border: 1px solid var(--border-color, #333);
    border-radius: 0.375rem;
    display: inline-flex;
    align-items: center;
}

.asset-display .asset-info {
    display: flex;
    align-items: center;
}

/* Ensure Web3Modal and wallet modals are always on top */
w3m-modal,
wcm-modal,
[id*="web3modal"],
[id*="walletconnect"],
.web3modal-modal-card,
.walletconnect-modal__base,
#w3m-modal,
#wcm-modal,
w3m-modal::part(container),
wcm-modal::part(container) {
    z-index: 999999 !important;
}

w3m-modal *,
wcm-modal *,
[id*="web3modal"] *,
[id*="walletconnect"] * {
    z-index: inherit !important;
}

/* Ensure Web3Modal overlay/backdrop is also on top */
w3m-modal::part(overlay),
wcm-modal::part(overlay),
[id*="web3modal-overlay"],
[id*="walletconnect-overlay"] {
    z-index: 999998 !important;
}

/* Toast notifications positioning */
#notification-container {
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    z-index: 9999 !important;
    max-width: 400px !important;
    top: auto !important;
    right: auto !important;
}

/* Mobile toast notifications - full width at bottom */
@media (max-width: 991px) {
    #notification-container {
        bottom: 20px !important;
        right: 20px !important;
        left: 20px !important;
        max-width: none !important;
    }
}

/* Toast notification opacity */
#notification-container .alert {
    opacity: 1 !important;
    background-color: rgba(220, 53, 69, 0.95) !important;
}

#notification-container .alert-success {
    background-color: rgba(40, 167, 69, 0.95) !important;
}

#notification-container .alert-info {
    background-color: rgba(13, 110, 253, 0.95) !important;
}

#notification-container .alert-danger {
    background-color: rgba(220, 53, 69, 0.95) !important;
}

#notification-container .alert * {
    color: white !important;
}

.pnl-period-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.pnl-period-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-light);
    color: var(--text-secondary);
}

.pnl-period-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--background);
}

@media (max-width: 768px) {
    .user-positions-table-container,
    .open-positions-table-container {
        padding: 1.5rem 0 0 0 !important;
        overflow-x: visible;
        margin-left: 0;
        margin-right: 0;
    }
    
    .professional-asset-header {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .user-positions-table-container > h2,
    .open-positions-table-container > h2 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    .open-positions-table-container .sort-controls,
    .open-positions-table-container .open-positions-info {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    .user-positions-table,
    .open-positions-table {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        display: block;
    }
    
    .user-positions-table tbody,
    .open-positions-table tbody {
        display: block;
        width: 100%;
    }
    
    .user-positions-table thead,
    .open-positions-table thead {
        display: none;
    }
    
    .user-positions-table tbody tr,
    .open-positions-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "asset pnl"
            "strike pnl"
            "size cost"
            "expiry actions";
        gap: 0.4rem 1.5rem;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid var(--border-color);
    }
    
    .user-positions-table tbody tr.no-positions-message {
        display: block;
    }
    
    .user-positions-table tbody td,
    .open-positions-table tbody td {
        padding: 0 !important;
        border: none !important;
    }
    
    .user-positions-table tbody td:before,
    .open-positions-table tbody td:before {
        content: attr(data-label);
        font-size: 0.65rem;
        color: #6b7280;
        text-transform: uppercase;
        display: block;
        margin-bottom: 0.2rem;
        font-weight: 600;
    }
    
    .user-positions-table tbody td.col-asset,
    .open-positions-table tbody td.col-asset {
        grid-area: asset;
        font-size: 1.15rem;
        font-weight: 700;
    }
    
    .user-positions-table tbody td.col-asset:before,
    .open-positions-table tbody td.col-asset:before {
        display: none;
    }
    
    .user-positions-table tbody td.col-type,
    .open-positions-table tbody td.col-type {
        display: none !important;
    }
    
    .user-positions-table tbody td.col-strike,
    .open-positions-table tbody td.col-strike {
        grid-area: strike;
        font-size: 0.9rem;
        font-weight: 600;
    }
    
    .user-positions-table tbody td.col-size,
    .open-positions-table tbody td.col-size {
        grid-area: size;
        font-size: 0.8rem;
    }
    
    .user-positions-table tbody td.col-cost,
    .open-positions-table tbody td.col-premium {
        grid-area: cost;
        font-size: 0.8rem;
        text-align: right;
    }
    
    .user-positions-table tbody td.col-current-price {
        display: none !important;
    }
    
    .user-positions-table tbody td.col-pnl,
    .open-positions-table tbody td.col-pnl {
        grid-area: pnl;
        text-align: right;
        font-size: 1.15rem !important;
        font-weight: 700;
        align-self: start;
    }
    
    .user-positions-table tbody td.col-pnl:before,
    .open-positions-table tbody td.col-pnl:before {
        font-size: 0.6rem;
        text-align: right;
    }
    
    .user-positions-table tbody td.col-time-left,
    .open-positions-table tbody td.col-expires {
        grid-area: expiry;
        font-size: 0.8rem;
    }
    
    .user-positions-table tbody td.col-actions,
    .open-positions-table tbody td.col-actions {
        grid-area: actions;
        text-align: right;
    }
    
    .user-positions-table tbody td.col-actions:before,
    .open-positions-table tbody td.col-actions:before {
        display: none;
    }
    
    .user-positions-table tbody td.col-actions .btn,
    .open-positions-table tbody td.col-actions .btn {
        padding: 0.35rem 0.75rem !important;
        font-size: 0.75rem !important;
    }
    
    .open-positions-table tbody tr {
        grid-template-areas:
            "trader pnl"
            "asset pnl"
            "strike pnl"
            "size cost"
            "expiry actions";
    }
    
    .open-positions-table tbody td.col-trader {
        grid-area: trader;
        font-size: 0.75rem;
        color: #6b7280;
    }
    
    .open-positions-table tbody td.col-trader:before {
        display: none;
    }
    
    .open-positions-table tbody td.col-premium {
        grid-area: cost;
    }
    
    .history-table thead,
    .scoreboard-table thead {
        display: none;
    }
    
    .history-table,
    .scoreboard-table {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        display: block;
    }
    
    .history-table tbody,
    .scoreboard-table tbody {
        display: block;
        width: 100%;
    }
    
    .history-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "date status"
            "asset pnl"
            "strike pnl"
            "size premium"
            "settlement actions";
        gap: 0.35rem 0.7rem;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid var(--border-color);
    }
    
    .history-table tbody td {
        padding: 0 !important;
        border: none !important;
    }
    
    .history-table tbody td:before {
        content: attr(data-label);
        font-size: 0.65rem;
        color: #6b7280;
        text-transform: uppercase;
        display: block;
        margin-bottom: 0.2rem;
        font-weight: 600;
    }
    
    .history-table tbody td.col-date {
        grid-area: date;
        font-size: 0.75rem;
        color: #6b7280;
    }
    
    .history-table tbody td.col-date:before {
        display: none;
    }
    
    .history-table tbody td.col-asset {
        grid-area: asset;
        font-size: 1.15rem;
        font-weight: 700;
    }
    
    .history-table tbody td.col-asset:before {
        display: none;
    }
    
    .history-table tbody td.col-type {
        display: none !important;
    }
    
    .history-table tbody td.col-strike {
        grid-area: strike;
        font-size: 0.9rem;
        font-weight: 600;
    }
    
    .history-table tbody td.col-size {
        grid-area: size;
        font-size: 0.8rem;
    }
    
    .history-table tbody td.col-premium {
        grid-area: premium;
        font-size: 0.8rem;
        text-align: right;
    }
    
    .history-table tbody td.col-premium-usd {
        display: none !important;
    }
    
    .history-table tbody td.col-settlement {
        grid-area: settlement;
        font-size: 0.8rem;
    }
    
    .history-table tbody td.col-pnl {
        grid-area: pnl;
        text-align: right;
        font-size: 1rem !important;
        font-weight: 700;
        align-self: start;
    }
    
    .history-table tbody td.col-pnl:before {
        font-size: 0.6rem;
        text-align: right;
    }
    
    .history-table tbody td.col-pnl-usd {
        display: none !important;
    }
    
    .history-table tbody td.col-status {
        grid-area: status;
        text-align: right;
        font-size: 0.75rem;
    }
    
    .history-table tbody td.col-status:before {
        display: none;
    }
    
    /* Mobile scoreboard styles are in mobile.css */

    .scoreboard-table tbody tr.sb-row-me {
        background: rgba(56, 152, 236, 0.08);
        border: 1px solid rgba(56, 152, 236, 0.2);
        border-radius: 12px;
    }

    .sb-you-badge {
        display: inline-block;
        font-size: 0.5rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        background: rgba(56, 152, 236, 0.85);
        color: #fff;
        padding: 0.1rem 0.35rem;
        border-radius: 4px;
        margin-left: 0.3rem;
        vertical-align: middle;
    }

    .sb-streak-item {
        display: inline-flex;
        align-items: baseline;
        gap: 0.2rem;
        font-weight: 600;
        color: #fff;
        font-size: 0.7rem;
    }

    .sb-streak-lbl {
        color: rgba(255, 255, 255, 0.35);
        font-weight: 500;
        font-size: 0.55rem;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
}

/* Strike price loading skeleton */
.strike-loading-skeleton {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
    min-height: 60px;
}

.skeleton-pulse {
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP SKELETON LOADING STATE (≥992px only)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 992px) {
    .desktop-skeleton-loading .desktop-skeleton-pulse {
        background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%) !important;
        background-size: 200% 100% !important;
        animation: skeleton-shimmer 1.6s ease-in-out infinite !important;
        color: transparent !important;
        border-color: transparent !important;
        pointer-events: none !important;
        user-select: none !important;
        overflow: hidden !important;
    }

    .desktop-skeleton-loading .desktop-skeleton-pulse * {
        opacity: 0 !important;
        transition: opacity 0.4s ease !important;
    }

    .desktop-skeleton-loading .desktop-skeleton-pulse canvas {
        opacity: 0 !important;
    }

    /* Navbar: shimmer nav links and wallet section */
    .desktop-skeleton-loading .navbar-nav {
        pointer-events: none;
    }

    .desktop-skeleton-loading .navbar-nav .nav-link {
        color: transparent !important;
        background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%) !important;
        background-size: 200% 100% !important;
        animation: skeleton-shimmer 1.6s ease-in-out infinite !important;
        border-radius: 6px;
        min-width: 60px;
        min-height: 28px;
        pointer-events: none;
    }

    .desktop-skeleton-loading .wallet-section {
        pointer-events: none;
    }

    /* The RIGHT half of the header shimmered too. Only the nav links were
       treated, so the bell and the three wallet CTAs painted at full colour
       beside four grey blocks — the header looked half-loaded rather than
       loading. One band, one state. */
    .desktop-skeleton-loading .hdr-tools .hdr-pill,
    .desktop-skeleton-loading .wallet-section .wallet-cta,
    .desktop-skeleton-loading .wallet-section .header-wallet-pill {
        color: transparent !important;
        background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%) !important;
        background-size: 200% 100% !important;
        animation: skeleton-shimmer 1.6s ease-in-out infinite !important;
        border-color: transparent !important;
        box-shadow: none !important;
        pointer-events: none;
    }

    /* The glyph inside the bell would otherwise sit on top of its own
       placeholder. */
    .desktop-skeleton-loading .hdr-tools .hdr-pill > *,
    .desktop-skeleton-loading .wallet-section .wallet-cta > *,
    .desktop-skeleton-loading .wallet-section .header-wallet-pill > * {
        opacity: 0 !important;
    }

    .desktop-skeleton-loading .wallet-section .connected-details {
        display: none !important;
    }

    .desktop-skeleton-loading .wallet-section > #wallet-status > .btn {
        color: transparent !important;
        background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 75%) !important;
        background-size: 200% 100% !important;
        animation: skeleton-shimmer 1.6s ease-in-out infinite !important;
        border-color: transparent !important;
        pointer-events: none;
    }

    /* Asset sidebar: shimmer the whole sidebar area */
    .desktop-skeleton-loading .asset-sidebar .asset-selection-buttons {
        pointer-events: none;
    }

    .desktop-skeleton-loading .asset-sidebar .asset-selection-btn {
        pointer-events: none;
    }

    .desktop-skeleton-loading .asset-sidebar .asset-selection-btn .asset-icon,
    .desktop-skeleton-loading .asset-sidebar .asset-selection-btn img.asset-icon {
        opacity: 0 !important;
    }

    .desktop-skeleton-loading .asset-sidebar .asset-selection-btn .asset-name,
    .desktop-skeleton-loading .asset-sidebar .asset-selection-btn .asset-price {
        color: transparent !important;
        background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0.03) 75%) !important;
        background-size: 200% 100% !important;
        animation: skeleton-shimmer 1.6s ease-in-out infinite !important;
        border-radius: 4px;
        min-width: 30px;
        min-height: 10px;
    }

    /* Spot ticker bar */
    .desktop-skeleton-loading .spot-ticker-bar {
        pointer-events: none;
    }

    .desktop-skeleton-loading .spot-ticker-track {
        color: transparent !important;
        background: linear-gradient(90deg, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.02) 75%) !important;
        background-size: 200% 100% !important;
        animation: skeleton-shimmer 1.6s ease-in-out infinite !important;
        min-height: 22px;
    }

    .desktop-skeleton-loading .spot-ticker-track * {
        opacity: 0 !important;
    }

    /* Trade content: title, expiry, strike section, amount section */
    .desktop-skeleton-loading .trade-title-row {
        pointer-events: none;
    }

    .desktop-skeleton-loading .trade-title-row .trade-asset-title,
    .desktop-skeleton-loading .trade-title-row .trade-spot-price {
        color: transparent !important;
        background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%) !important;
        background-size: 200% 100% !important;
        animation: skeleton-shimmer 1.6s ease-in-out infinite !important;
        border-radius: 6px;
        min-width: 80px;
        min-height: 24px;
        display: inline-block;
    }

    .desktop-skeleton-loading .trade-title-row .trade-condition-icon {
        display: none !important;
    }

    .desktop-skeleton-loading .expiry-filter-section {
        pointer-events: none;
    }

    .desktop-skeleton-loading .expiry-filter-toggle .btn {
        color: transparent !important;
        background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%) !important;
        background-size: 200% 100% !important;
        animation: skeleton-shimmer 1.6s ease-in-out infinite !important;
        border-color: transparent !important;
        pointer-events: none;
    }

    .desktop-skeleton-loading .expiry-filter-toggle .btn span {
        opacity: 0 !important;
    }

    .desktop-skeleton-loading .filter-label {
        color: transparent !important;
    }

    .desktop-skeleton-loading .selected-expiry-display {
        opacity: 0 !important;
    }

    .desktop-skeleton-loading #basic-view-container {
        pointer-events: none;
    }

    .desktop-skeleton-loading #basic-view-container .filter-label-section {
        color: transparent !important;
    }

    .desktop-skeleton-loading #basic-view-container .filter-label-section * {
        color: transparent !important;
    }

    .desktop-skeleton-loading .strike-slider-track {
        background: linear-gradient(90deg, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.02) 75%) !important;
        background-size: 200% 100% !important;
        animation: skeleton-shimmer 1.6s ease-in-out infinite !important;
        border-radius: 12px;
        min-height: 100px;
        pointer-events: none;
    }

    .desktop-skeleton-loading .strike-slider-track * {
        opacity: 0 !important;
    }

    .desktop-skeleton-loading .options-table-container {
        display: none !important;
    }

    .desktop-skeleton-loading .select-amount-section {
        pointer-events: none;
    }

    .desktop-skeleton-loading .amount-prompt {
        color: transparent !important;
        background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0.03) 75%) !important;
        background-size: 200% 100% !important;
        animation: skeleton-shimmer 1.6s ease-in-out infinite !important;
        border-radius: 6px;
        min-height: 16px;
        width: 60%;
    }

    .desktop-skeleton-loading .amount-header-row {
        color: transparent !important;
    }

    .desktop-skeleton-loading .amount-header-row * {
        color: transparent !important;
    }

    .desktop-skeleton-loading .amount-slider-row {
        pointer-events: none;
        opacity: 0.15;
    }

    .desktop-skeleton-loading .amount-presets {
        pointer-events: none;
    }

    .desktop-skeleton-loading .amount-presets .amount-preset {
        color: transparent !important;
        background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0.03) 75%) !important;
        background-size: 200% 100% !important;
        animation: skeleton-shimmer 1.6s ease-in-out infinite !important;
        border-color: transparent !important;
    }

    .desktop-skeleton-loading .balance-row {
        color: transparent !important;
    }

    .desktop-skeleton-loading .balance-row * {
        color: transparent !important;
        opacity: 0 !important;
    }

    /* Trade preview sidebar */
    .desktop-skeleton-loading .trade-panel-preview {
        pointer-events: none;
    }

    .desktop-skeleton-loading .trade-preview-card .preview-card-identity * {
        color: transparent !important;
        opacity: 0 !important;
    }

    .desktop-skeleton-loading .trade-preview-profit-statement {
        color: transparent !important;
        background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0.03) 75%) !important;
        background-size: 200% 100% !important;
        animation: skeleton-shimmer 1.6s ease-in-out infinite !important;
        border-radius: 8px;
        min-height: 40px;
    }

    .desktop-skeleton-loading .trade-preview-profit-statement * {
        opacity: 0 !important;
    }

    .desktop-skeleton-loading .preview-details-list .preview-detail-row {
        pointer-events: none;
    }

    .desktop-skeleton-loading .preview-details-list .preview-detail-label,
    .desktop-skeleton-loading .preview-details-list .preview-detail-value {
        color: transparent !important;
        background: linear-gradient(90deg, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.02) 75%) !important;
        background-size: 200% 100% !important;
        animation: skeleton-shimmer 1.6s ease-in-out infinite !important;
        border-radius: 4px;
        min-width: 50px;
        min-height: 14px;
        display: inline-block;
    }

    .desktop-skeleton-loading .preview-details-list .preview-detail-value *,
    .desktop-skeleton-loading .preview-details-list .preview-detail-label * {
        color: transparent !important;
        opacity: 0 !important;
    }

    .desktop-skeleton-loading .trade-actions .btn {
        color: transparent !important;
        background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 75%) !important;
        background-size: 200% 100% !important;
        animation: skeleton-shimmer 1.6s ease-in-out infinite !important;
        border-color: transparent !important;
        pointer-events: none;
        font-size: 0 !important;
    }

    .desktop-skeleton-loading .trade-preview-card .preview-card-identity {
        color: transparent !important;
    }

    .desktop-skeleton-loading .trade-preview-card .preview-card-identity .preview-asset-label,
    .desktop-skeleton-loading .trade-preview-card .preview-card-identity .preview-option-type {
        color: transparent !important;
        background: linear-gradient(90deg, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.02) 75%) !important;
        background-size: 200% 100% !important;
        animation: skeleton-shimmer 1.6s ease-in-out infinite !important;
        border-radius: 4px;
        min-width: 40px;
        min-height: 12px;
        display: inline-block;
    }

    .desktop-skeleton-loading #insufficient-funds-warning {
        display: none !important;
    }

    /* Status bar at bottom */
    .desktop-skeleton-loading .status-bar {
        pointer-events: none;
    }

    .desktop-skeleton-loading .status-bar .status-bar-item {
        color: transparent !important;
    }

    .desktop-skeleton-loading .status-bar .status-bar-item * {
        color: transparent !important;
        opacity: 0 !important;
    }

    /* Reveal phase: smooth crossfade */
    .desktop-skeleton-reveal .navbar-nav .nav-link,
    .desktop-skeleton-reveal .wallet-section > #wallet-status > .btn,
    .desktop-skeleton-reveal .asset-sidebar .asset-selection-btn .asset-name,
    .desktop-skeleton-reveal .asset-sidebar .asset-selection-btn .asset-price,
    .desktop-skeleton-reveal .spot-ticker-track,
    .desktop-skeleton-reveal .trade-title-row .trade-asset-title,
    .desktop-skeleton-reveal .trade-title-row .trade-spot-price,
    .desktop-skeleton-reveal .expiry-filter-toggle .btn,
    .desktop-skeleton-reveal .strike-slider-track,
    .desktop-skeleton-reveal .amount-prompt,
    .desktop-skeleton-reveal .amount-presets .amount-preset,
    .desktop-skeleton-reveal .trade-preview-profit-statement,
    .desktop-skeleton-reveal .preview-details-list .preview-detail-label,
    .desktop-skeleton-reveal .preview-details-list .preview-detail-value,
    .desktop-skeleton-reveal .trade-actions .btn {
        background: transparent !important;
        animation: none !important;
        color: inherit !important;
        border-color: inherit !important;
        pointer-events: auto !important;
        transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, opacity 0.4s ease;
    }

    .desktop-skeleton-reveal .navbar-nav .nav-link {
        color: rgba(255, 255, 255, 0.55) !important;
    }

    /* The header controls reveal DIFFERENTLY from the nav links. A nav link is
       transparent at rest, so the group above can crossfade it to transparent
       and be right. The bell and the wallet CTAs each paint their own fill, so
       forcing them transparent for the 500ms of the reveal would fade the pill
       out and snap it back. Kill the shimmer, keep their paint, fade the
       label in. */
    .desktop-skeleton-reveal .hdr-tools .hdr-pill,
    .desktop-skeleton-reveal .wallet-section .wallet-cta,
    .desktop-skeleton-reveal .wallet-section .header-wallet-pill {
        animation: none !important;
        transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
    }

    .desktop-skeleton-reveal .hdr-tools .hdr-pill > *,
    .desktop-skeleton-reveal .wallet-section .wallet-cta > *,
    .desktop-skeleton-reveal .wallet-section .header-wallet-pill > * {
        opacity: 1;
        transition: opacity 0.4s ease;
    }

    /* The reveal crossfade has to land on the SAME active state the settled
       page uses, or the fade ends on one colour and snaps to another. */
    .desktop-skeleton-reveal .navbar-nav .nav-link.active {
        color: var(--primary) !important;
        background: transparent !important;
    }

    .desktop-skeleton-reveal .spot-ticker-track *,
    .desktop-skeleton-reveal .expiry-filter-toggle .btn span,
    .desktop-skeleton-reveal .strike-slider-track *,
    .desktop-skeleton-reveal .trade-preview-profit-statement *,
    .desktop-skeleton-reveal .preview-card-identity *,
    .desktop-skeleton-reveal .preview-details-list .preview-detail-value *,
    .desktop-skeleton-reveal .preview-details-list .preview-detail-label *,
    .desktop-skeleton-reveal .balance-row *,
    .desktop-skeleton-reveal .status-bar .status-bar-item *,
    .desktop-skeleton-reveal .asset-sidebar .asset-selection-btn .asset-icon,
    .desktop-skeleton-reveal .asset-sidebar .asset-selection-btn img.asset-icon {
        opacity: 1 !important;
        color: inherit !important;
        transition: opacity 0.4s ease, color 0.4s ease !important;
    }

    .desktop-skeleton-reveal .trade-actions .btn {
        font-size: inherit !important;
        transition: font-size 0s, background 0.4s ease, color 0.4s ease !important;
    }

    .desktop-skeleton-reveal .trade-preview-card .preview-card-identity .preview-asset-label,
    .desktop-skeleton-reveal .trade-preview-card .preview-card-identity .preview-option-type {
        background: transparent !important;
        animation: none !important;
        color: inherit !important;
        transition: background 0.4s ease, color 0.4s ease !important;
    }

    .desktop-skeleton-reveal .filter-label,
    .desktop-skeleton-reveal .selected-expiry-display,
    .desktop-skeleton-reveal #basic-view-container .filter-label-section,
    .desktop-skeleton-reveal #basic-view-container .filter-label-section *,
    .desktop-skeleton-reveal .amount-header-row,
    .desktop-skeleton-reveal .amount-header-row *,
    .desktop-skeleton-reveal .balance-row,
    .desktop-skeleton-reveal .status-bar .status-bar-item {
        color: inherit !important;
        opacity: 1 !important;
        transition: color 0.4s ease, opacity 0.4s ease !important;
    }

    .desktop-skeleton-reveal .trade-title-row .trade-condition-icon {
        display: inline-flex !important;
    }

    .desktop-skeleton-reveal .amount-slider-row {
        opacity: 1;
        transition: opacity 0.4s ease;
    }

    .desktop-skeleton-reveal .trade-panel-preview,
    .desktop-skeleton-reveal .select-amount-section,
    .desktop-skeleton-reveal .expiry-filter-section,
    .desktop-skeleton-reveal .navbar-nav,
    .desktop-skeleton-reveal .wallet-section,
    .desktop-skeleton-reveal .asset-sidebar .asset-selection-buttons,
    .desktop-skeleton-reveal #basic-view-container,
    .desktop-skeleton-reveal .spot-ticker-bar,
    .desktop-skeleton-reveal .status-bar {
        pointer-events: auto !important;
    }
}

/* Asset logo + text layout in position/history/scoreboard tables */
td.col-asset {
    white-space: nowrap;
}

td.col-asset .position-asset-logo {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 6px;
}

td.col-asset .position-asset-text {
    display: inline-block;
    vertical-align: middle;
    line-height: 1.35;
}

td.col-asset .position-asset-text strong {
    display: block;
    font-size: inherit;
}

.position-cost-label {
    display: block;
    font-size: 0.65rem;
    color: var(--text-secondary, rgba(255,255,255,0.5));
    font-weight: 400;
    white-space: nowrap;
}

img.position-asset-logo[alt="ETH"],
img.position-asset-logo[alt="XRP"] {
    filter: brightness(0) invert(1);
}

/* Price ticker above positions */
.ticker-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 4px;
}

.ticker-icon[alt="ETH"],
.ticker-icon[alt="XRP"] {
    filter: brightness(0) invert(1);
}

.positions-price-ticker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.85);
}

.ticker-item {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 0.35rem 0.65rem;
    font-weight: 600;
    white-space: nowrap;
}

.ticker-price {
    color: rgba(255,255,255,0.5);
}

/* Spot Price Ticker Bar (inside asset-selector-wrapper) */
.spot-ticker-bar {
    width: 100%;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    position: relative;
    height: 30px;
    border-radius: var(--border-radius) 0 0 0;
}

.spot-ticker-track {
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    height: 100%;
    white-space: nowrap;
    padding: 0 1rem;
    animation: ticker-scroll 30s linear infinite;
}

.spot-ticker-bar:hover .spot-ticker-track {
    animation-play-state: paused;
}

@keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.spot-ticker-item img[alt="ETH"],
.spot-ticker-item img[alt="XRP"] {
    filter: brightness(0) invert(1);
}

.spot-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}

.spot-ticker-item img {
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.spot-ticker-item .spot-ticker-symbol {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
}

.spot-ticker-item .spot-ticker-price {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.spot-ticker-item--active {
    background: rgba(56, 152, 236, 0.15);
    border-radius: 4px;
    padding: 2px 6px;
}

.spot-ticker-item--active .spot-ticker-symbol {
    color: rgba(56, 152, 236, 1);
}

.spot-ticker-item--active .spot-ticker-price {
    color: rgba(56, 152, 236, 0.75);
}

.spot-ticker-condition-wrap {
    position: relative;
    cursor: pointer;
}

.spot-ticker-item .spot-ticker-condition {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.spot-ticker-tooltip {
    position: fixed;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0.18s ease;
    z-index: 99999;
    background: linear-gradient(160deg, #242D3E 0%, #20293A 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 0;
    color: white;
    font-size: 0.78rem;
    white-space: normal;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04);
    width: 230px;
    overflow: hidden;
}

.spot-ticker-tooltip.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* PNL tooltip - reuse spot-ticker / Stable design */
/* ================================================================ TOOLTIP ==
   ONE tooltip. There were four `.tooltip-inner` blocks, three of them on the
   same selector, and what actually rendered was a mix none of the four
   authors wrote: #2c3e50 from the last block, a 2px blue border from the
   first (never overridden), and radius 0 because the >=992px square sweep
   zeroed both declared radii.

   It sits on --secondary, the rung ABOVE the page ground: a tooltip floats
   over the page, so it is the one surface that may be lighter than it. The
   border is the same hairline every panel uses.

   NOT blue-bordered. --primary means "you" everywhere else in this app, and
   a 2px blue frame on every help bubble spends that meaning on chrome — on
   the least important content on screen, at that. */
.tooltip {
    --bs-tooltip-bg: var(--secondary);
    max-width: 300px;
}
.tooltip-inner {
    max-width: 280px;
    background: var(--secondary);
    border: 1px solid var(--border-light);
    /* !important, or the >=992px square sweep zeroes it. */
    border-radius: var(--r-card) !important;
    color: var(--text-primary);
    padding: 10px 12px;
    font-family: var(--sans);
    font-size: var(--fs-ui);
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.tooltip .tooltip-arrow::before { border-color: transparent; }
.tooltip.bs-tooltip-top .tooltip-arrow::before    { border-top-color: var(--secondary); }
.tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--secondary); }
.tooltip.bs-tooltip-start .tooltip-arrow::before  { border-left-color: var(--secondary); }
.tooltip.bs-tooltip-end .tooltip-arrow::before    { border-right-color: var(--secondary); }

/* A MODIFIER, not a second tooltip. The PnL bubble lays out its own rows, so
   it drops the padding and lets its content own the box. Everything else —
   surface, border, radius, shadow, arrow — comes from the base above. */
.pnl-tooltip .tooltip-inner {
    padding: 0 !important;
    max-width: 260px;
    overflow: hidden;
}

.spot-ticker-sep {
    color: rgba(255, 255, 255, 0.1);
    font-size: 0.6rem;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   Positions page: rounded wrapper (matches trade page container)
   ════════════════════════════════════════════════════════════════════════════ */

/* --- Base / mobile-first (no sidebar) --- */
.positions-unified-layout {
    display: flex;
    flex-direction: column;
}

.positions-sidebar {
    display: none;
}

.positions-inner-content {
    padding: 0 1.25rem 1.25rem;
}

.positions-split-header {
    display: none;
}

/* --- Desktop: sidebar + flex-row layout --- */
@media (min-width: 992px) {
    .positions-wrapper {
        overflow: hidden;
    }

    .positions-unified-layout {
        flex-direction: row;
        height: clamp(480px, calc(100vh - 90px), 850px);
        overflow: hidden;
    }

    /* Sidebar */
    .positions-sidebar {
        width: 65px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        position: relative;
        box-shadow: inset -8px 0 20px -8px rgba(0, 0, 0, 0.25);
    }

    .positions-sidebar-btn {
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 1rem 0.35rem;
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        cursor: pointer;
        position: relative;
        z-index: 1;
        transition: background 0.2s ease;
    }

    .positions-sidebar-btn i {
        font-size: 1.2rem;
        opacity: 0.5;
        transition: opacity 0.2s ease;
    }

    .positions-sidebar-label {
        font-weight: 600;
        font-size: 0.62rem;
        text-align: center;
        white-space: nowrap;
        line-height: 1.15;
        color: rgba(255, 255, 255, 0.6);
        letter-spacing: 0.02em;
        transition: color 0.2s ease;
    }

    .positions-sidebar-btn:hover {
        background: rgba(255, 255, 255, 0.05);
    }

    .positions-sidebar-btn.active i {
        opacity: 1;
    }

    .positions-sidebar-btn.active .positions-sidebar-label {
        color: #fff;
    }

    .positions-slide-indicator {
        position: absolute;
        left: 3px;
        width: calc(100% - 6px);
        background: rgba(56, 152, 236, 0.85);
        border-radius: 14px;
        transition: top 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                    height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 0;
        pointer-events: none;
    }

    /* Main panel */
    .positions-panel-main {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    .positions-panel-main .positions-ticker-bar {
        border-radius: 0 var(--border-radius) 0 0;
    }

    .positions-inner-content {
        padding: 0.75rem;
        flex: 1;
        overflow: auto;
    }

    /* Hide the horizontal top-tabs and static price ticker on desktop */
    .positions-wrapper .positions-top-tabs,
    .positions-wrapper .positions-price-ticker {
        display: none !important;
    }

    .positions-wrapper .user-positions-table-container,
    .positions-wrapper .open-positions-table-container {
        border: none;
        border-radius: 0;
        padding-left: 0;
        padding-right: 0;
    }

    /* ── Position Cards on Desktop (match mobile card design) ── */

    .positions-inner-content .user-positions-table-container,
    .positions-inner-content .open-positions-table-container {
        border: none;
        padding: 0;
        margin-bottom: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }

    .positions-inner-content .open-positions-info,
    .positions-inner-content .sort-controls {
        padding-left: 0;
        padding-right: 0;
    }

    .positions-inner-content .sort-controls {
        width: auto;
        justify-content: flex-start;
        gap: 0.5rem;
        margin-bottom: 0.6rem;
    }

    .positions-inner-content .sort-tabs {
        display: flex;
        gap: 0.25rem;
        background: rgba(255, 255, 255, 0.04);
        border-radius: 8px;
        padding: 3px;
        border-bottom: none;
        flex: none;
    }

    .positions-inner-content .sort-tab {
        padding: 0.3rem 0.7rem;
        font-size: 0.7rem;
        font-weight: 600;
        border: none;
        background: transparent;
        color: rgba(255, 255, 255, 0.45);
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.15s ease;
        white-space: nowrap;
    }

    .positions-inner-content .sort-tab:hover {
        color: rgba(255, 255, 255, 0.8);
    }

    .positions-inner-content .sort-tab.active {
        color: #fff;
        background: rgba(56, 152, 236, 0.85);
        border-bottom: none;
    }

    .positions-inner-content .refresh-positions-btn {
        background: rgba(255, 255, 255, 0.04);
        border: none;
        border-radius: 8px;
        padding: 0.3rem 0.65rem;
        color: rgba(255, 255, 255, 0.45);
        transition: all 0.15s ease;
        align-self: stretch;
    }

    .positions-inner-content .refresh-positions-btn:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.08);
        border-color: transparent;
        transform: rotate(180deg);
    }

    .positions-inner-content .refresh-positions-btn i {
        font-size: 0.7rem;
    }

    .positions-inner-content .user-positions-table,
    .positions-inner-content .open-positions-table {
        display: block;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    .positions-inner-content .user-positions-table tbody,
    .positions-inner-content .open-positions-table tbody {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }

    .positions-inner-content .user-positions-table thead,
    .positions-inner-content .open-positions-table thead {
        display: none;
    }

    /* ── User Position Card Grid (compact single-row desktop) ── */
    .positions-inner-content .user-positions-table tbody tr.position-row {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.5fr) minmax(0, 0.9fr) auto;
        grid-template-areas: "asset belief pnl actions";
        gap: 0 0.5rem;
        align-items: center;
        padding: 0.5rem 0.75rem;
        background: rgba(255, 255, 255, 0.045) !important;
        border: none !important;
        border-radius: 10px;
        cursor: pointer;
        transition: background 0.15s ease;
    }

    .positions-inner-content .user-positions-table tbody tr.position-row:hover {
        background: rgba(255, 255, 255, 0.08) !important;
    }

    /* ── Open Position Card Grid (compact single-row desktop) ── */
    .positions-inner-content .open-positions-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.5fr) minmax(0, 0.9fr) auto;
        grid-template-areas: "asset belief pnl actions";
        gap: 0 0.5rem;
        align-items: center;
        padding: 0.5rem 0.75rem;
        background: rgba(255, 255, 255, 0.045) !important;
        border: none !important;
        border-radius: 10px;
        transition: background 0.15s ease;
    }

    .positions-inner-content .open-positions-table tbody tr:hover {
        background: rgba(255, 255, 255, 0.08) !important;
    }

    /* ── Hide redundant columns (info already in asset badge) ── */
    .positions-inner-content .user-positions-table tbody tr.position-row .col-type,
    .positions-inner-content .user-positions-table tbody tr.position-row .col-strike,
    .positions-inner-content .user-positions-table tbody tr.position-row .col-current-price,
    .positions-inner-content .user-positions-table tbody tr.position-row .col-time-left,
    .positions-inner-content .user-positions-table tbody tr.position-row .col-size,
    .positions-inner-content .user-positions-table tbody tr.position-row .col-cost,
    .positions-inner-content .open-positions-table tbody tr .col-type,
    .positions-inner-content .open-positions-table tbody tr .col-strike,
    .positions-inner-content .open-positions-table tbody tr .col-premium,
    .positions-inner-content .open-positions-table tbody tr .col-size,
    .positions-inner-content .open-positions-table tbody tr .col-expires {
        display: none;
    }

    /* ── Asset Badge ── */
    .positions-inner-content .user-positions-table tbody tr.position-row .col-asset,
    .positions-inner-content .open-positions-table tbody tr .col-asset {
        grid-area: asset;
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.85rem;
        font-weight: 700;
        overflow: visible;
        padding: 0;
        border: none;
    }

    .positions-inner-content .position-asset-logo {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        object-fit: contain;
        flex-shrink: 0;
    }

    .positions-inner-content .position-asset-text {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
    }

    .positions-inner-content .position-cost-label {
        display: block;
        font-size: 0.65rem;
        font-weight: 500;
        color: var(--text-muted);
        margin-top: 0.05rem;
    }

    /* Asset text color by option type */
    .positions-inner-content tr[data-option-type="call"] .col-asset strong {
        color: var(--call-green, #4ade80);
    }
    .positions-inner-content tr[data-option-type="put"] .col-asset strong {
        color: var(--put-red, #f87171);
    }
    .positions-inner-content tr[data-option-type="ranger"] .col-asset strong {
        color: #a855f7;
    }

    /* ── Belief Row (user positions) ── */
    .positions-inner-content .user-positions-table tbody tr.position-row .col-belief {
        grid-area: belief;
        display: block;
        font-size: 0.75rem;
        color: #fff;
        padding: 0;
        line-height: 1.25;
        border: none;
    }
    .positions-inner-content .user-positions-table tbody tr.position-row .col-belief .countdown {
        color: #fff;
        text-shadow: none;
        animation: none;
        font-size: inherit;
        font-weight: inherit;
        letter-spacing: normal;
    }

    /* ── Belief (open positions) ── */
    .positions-inner-content .open-positions-table tbody tr .col-belief {
        grid-area: belief;
        display: block;
        font-size: 0.75rem;
        color: #fff;
        padding: 0;
        line-height: 1.25;
        border: none;
    }
    .positions-inner-content .open-positions-table tbody tr .col-belief .countdown {
        color: #fff;
        text-shadow: none;
        animation: none;
        font-size: inherit;
        font-weight: inherit;
        letter-spacing: normal;
    }
    .positions-inner-content .open-positions-table tbody tr .col-belief .belief-trader-link {
        color: var(--primary);
        text-decoration: none;
        font-weight: 600;
    }
    .positions-inner-content .open-positions-table tbody tr .col-belief .belief-trader-link:hover {
        text-decoration: underline;
    }

    /* ── PnL Row ── */
    .positions-inner-content .user-positions-table tbody tr.position-row .col-pnl,
    .positions-inner-content .open-positions-table tbody tr .col-pnl {
        grid-area: pnl;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: 0.1rem;
        font-size: 0.8rem;
        font-weight: 700;
        text-align: right;
        padding: 0;
        margin: 0;
        border: none;
    }
    .positions-inner-content .user-positions-table tbody tr.position-row .col-pnl:before,
    .positions-inner-content .open-positions-table tbody tr .col-pnl:before {
        content: "PNL";
        display: block;
        font-size: 0.5rem;
        color: var(--text-muted);
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 0.2px;
        margin-bottom: 0.15rem;
    }
    /* Override expired-position yellow badge on PNL label – keep neutral styling */
    .positions-inner-content .open-positions-table tbody tr .col-pnl.expired-position::before,
    .positions-inner-content .user-positions-table tbody tr.position-row .col-pnl.expired-position::before {
        background-color: transparent !important;
        color: var(--text-muted) !important;
        position: static !important;
        padding: 0 !important;
        border-radius: 0 !important;
        top: auto !important;
        right: auto !important;
        z-index: auto !important;
    }
    /* Expired: show "Final PNL" instead of "PNL" */
    .positions-inner-content .open-positions-table tbody tr .col-pnl.pnl-final::before {
        content: "Final PNL" !important;
    }
    .positions-inner-content .open-positions-table tbody tr .col-pnl .pnl-value,
    .positions-inner-content .user-positions-table tbody tr.position-row .col-pnl .pnl-value {
        font-size: 0.85rem;
        font-weight: 700;
        display: block;
        line-height: 1.2;
    }
    .positions-inner-content .open-positions-table tbody tr .col-pnl .pnl-pct,
    .positions-inner-content .user-positions-table tbody tr.position-row .col-pnl .pnl-pct {
        font-size: 0.65rem;
        font-weight: 600;
        opacity: 0.9;
    }

    /* ── Actions Row ── */
    .positions-inner-content .user-positions-table tbody tr.position-row .col-actions,
    .positions-inner-content .open-positions-table tbody tr .col-actions {
        grid-area: actions;
        display: flex;
        flex-wrap: nowrap;
        gap: 0.3rem;
        justify-content: flex-end;
        margin: 0;
        padding: 0;
        border: none;
    }
    .positions-inner-content .user-positions-table tbody tr.position-row .col-actions .view-tx-btn,
    .positions-inner-content .user-positions-table tbody tr.position-row .col-actions .view-option-btn,
    .positions-inner-content .open-positions-table tbody tr .col-actions .view-tx-btn,
    .positions-inner-content .open-positions-table tbody tr .col-actions .view-option-btn {
        flex: 0 1 auto;
        text-align: center;
        background: rgba(255, 255, 255, 0.04);
        border: none;
        border-radius: 8px;
        color: #fff;
        font-size: 0.65rem;
        font-weight: 600;
        padding: 0.3rem 0.5rem;
        letter-spacing: 0.2px;
        box-shadow: none;
        text-decoration: none;
        transition: background 0.15s ease;
    }
    .positions-inner-content .col-actions .view-tx-btn:hover,
    .positions-inner-content .col-actions .view-option-btn:hover {
        background: rgba(255, 255, 255, 0.08);
    }

    /* ── No-positions message stays block ── */
    .positions-inner-content .user-positions-table tbody tr.no-positions-message {
        display: block;
        text-align: center;
        padding: 2rem 1rem;
        color: var(--text-muted);
    }

    /* ── Hide ::before pseudo-labels (used in some mobile views) ── */
    .positions-inner-content .user-positions-table tbody td:before,
    .positions-inner-content .open-positions-table tbody td:before {
        display: none;
    }

    /* ── Hide "All Odette Positions" sidebar button on desktop ── */
    .positions-sidebar-btn[data-target="all-positions-content"] {
        display: none;
    }

    /* ── Split-view headers (visible only in split mode on desktop) ── */
    .positions-inner-content.positions-split-active .positions-split-header {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        font-size: 0.9rem;
        font-weight: 700;
        color: #fff;
        margin: 0 0 0.75rem 0;
    }

    .positions-split-header i {
        font-size: 0.95rem;
    }

    /* ── Split layout: My Positions + All Positions side by side ── */
    .positions-inner-content.positions-split-active {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        overflow: hidden;
    }

    .positions-inner-content.positions-split-active > #my-positions-content,
    .positions-inner-content.positions-split-active > #all-positions-content {
        flex: 1;
        min-width: 0;
        overflow-y: auto;
        padding-right: 0.5rem;
    }

    .positions-inner-content.positions-split-active > #all-positions-content {
        background: rgba(0, 0, 0, 0.3);
        border-radius: 12px;
        border-left: none;
        padding: 0.65rem 0.7rem;
        padding-right: 0.7rem;
    }

    .positions-inner-content.positions-split-active > #all-positions-content .open-positions-info {
        display: none;
    }

    /* ── Hide "Performance" sidebar button on desktop (merged into Trade History split) ── */
    .positions-sidebar-btn[data-target="performance-content"] {
        display: none;
    }

    /* Desktop history panes inside positions */
    #trade-history-content .desktop-history-filters {
        display: flex;
    }

    #trade-history-content .history-table-container,
    #performance-content {
        overflow-x: auto;
    }

    /* ── History + Performance split layout ── */
    .positions-inner-content.history-split-active {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        overflow: hidden;
    }

    .positions-inner-content.history-split-active > #trade-history-content,
    .positions-inner-content.history-split-active > #performance-content {
        flex: 1;
        min-width: 0;
        overflow-y: auto;
        padding-right: 0.5rem;
    }

    .positions-inner-content.history-split-active > #performance-content {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 12px;
        padding: 1rem 1.1rem;
    }

    /* ── Scores split view ── */
    .positions-inner-content.scores-split-active {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        overflow: hidden;
    }

    .positions-inner-content.scores-split-active > #scores-content,
    .positions-inner-content.scores-split-active > #scores-rules-content {
        flex: 1;
        min-width: 0;
        overflow-y: auto;
        padding-right: 0.5rem;
    }

    .positions-inner-content.scores-split-active > #scores-rules-content {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 12px;
        padding: 1rem 1.1rem;
        flex: 0 0 320px;
    }

    /* Scoreboard period toggles */
    .pos-scoreboard-period-toggle {
        display: flex;
        gap: 0.25rem;
        background: rgba(255, 255, 255, 0.04);
        border-radius: 8px;
        padding: 3px;
        margin-bottom: 0.75rem;
        width: fit-content;
    }

    .pos-scoreboard-tab {
        padding: 0.3rem 0.7rem;
        font-size: 0.7rem;
        font-weight: 600;
        border: none;
        background: transparent;
        color: rgba(255, 255, 255, 0.45);
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.15s ease;
        white-space: nowrap;
    }

    .pos-scoreboard-tab:hover {
        color: rgba(255, 255, 255, 0.8);
    }

    .pos-scoreboard-tab.active {
        color: #fff;
        background: rgba(56, 152, 236, 0.85);
    }

    /* Scoreboard card rows in positions pane */
    .pos-scoreboard-cards-wrap {
        overflow-y: auto;
    }

    /* Scores cards – match My Positions / All Odette style */
    .pos-sb-card {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "rank main score";
        gap: 0 0.5rem;
        align-items: center;
        background: rgba(255, 255, 255, 0.045) !important;
        border-radius: 10px;
        padding: 0.5rem 0.75rem;
        margin-bottom: 0.35rem;
        transition: background 0.15s ease;
    }

    .pos-sb-card:hover {
        background: rgba(255, 255, 255, 0.08) !important;
    }

    .pos-sb-rank {
        grid-area: rank;
        width: 24px;
        height: 24px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.6rem;
        font-weight: 700;
        flex-shrink: 0;
    }

    .pos-sb-rank-1 {
        background: linear-gradient(135deg, #FFD700, #FFA500);
        color: #000;
        box-shadow: 0 2px 6px rgba(255, 215, 0, 0.3);
    }

    .pos-sb-rank-2 {
        background: linear-gradient(135deg, #C0C0C0, #A8A8A8);
        color: #000;
        box-shadow: 0 2px 6px rgba(192, 192, 192, 0.3);
    }

    .pos-sb-rank-3 {
        background: linear-gradient(135deg, #CD7F32, #B87333);
        color: #fff;
        box-shadow: 0 2px 6px rgba(205, 127, 50, 0.3);
    }

    .pos-sb-rank-default {
        background: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.5);
    }

    .pos-sb-main {
        grid-area: main;
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
    }

    .pos-sb-trader {
        font-size: 0.8rem;
        font-weight: 700;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pos-sb-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem 0.5rem;
    }

    .pos-sb-stat {
        font-size: 0.6rem;
        color: rgba(255, 255, 255, 0.6);
        font-weight: 500;
    }

    .pos-sb-stat-label {
        color: rgba(255, 255, 255, 0.35);
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.5rem;
        margin-right: 0.1rem;
    }

    .pos-sb-stat-highlight {
        color: rgba(255, 255, 255, 0.95);
        font-weight: 700;
        font-size: 0.65rem;
    }

    .pos-sb-stat-highlight .pos-sb-stat-label {
        color: rgba(255, 255, 255, 0.6);
        font-size: 0.55rem;
    }

    .pos-sb-stat-small {
        font-size: 0.55rem;
        color: rgba(255, 255, 255, 0.5);
    }

    .pos-sb-stat-small .pos-sb-stat-label {
        color: rgba(255, 255, 255, 0.3);
        font-size: 0.48rem;
    }

    .pos-sb-score {
        grid-area: score;
        font-size: 0.95rem;
        font-weight: 700;
        color: #fff;
        flex-shrink: 0;
        min-width: 36px;
        text-align: right;
    }

    .pos-sb-card-me {
        background: rgba(56, 152, 236, 0.12) !important;
        border: 1px solid rgba(56, 152, 236, 0.3);
    }

    .pos-sb-you {
        display: inline-block;
        font-size: 0.48rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.25px;
        background: rgba(56, 152, 236, 0.85);
        color: #fff;
        padding: 0.06rem 0.25rem;
        border-radius: 3px;
        margin-left: 0.25rem;
        vertical-align: middle;
    }

    /* Desktop scoreboard summary stats */
    .pos-sb-summary {
        display: flex;
        gap: 0.4rem;
        margin-bottom: 0.6rem;
        flex-wrap: wrap;
    }

    .pos-sb-summary-card {
        flex: 1;
        min-width: 55px;
        background: rgba(255, 255, 255, 0.04);
        border-radius: 8px;
        padding: 0.4rem 0.5rem;
        text-align: center;
    }

    .pos-sb-summary-label {
        font-size: 0.48rem;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.4);
        font-weight: 600;
        letter-spacing: 0.03em;
    }

    .pos-sb-summary-value {
        font-size: 0.8rem;
        font-weight: 700;
        color: #fff;
    }

    /* Desktop scoreboard sort bar */
    .pos-sb-sort-bar {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        margin-bottom: 0.5rem;
    }

    .pos-sb-sort-label {
        font-size: 0.6rem;
        color: rgba(255, 255, 255, 0.35);
        font-weight: 600;
        text-transform: uppercase;
        margin-right: 0.15rem;
    }

    .pos-sb-sort-btn {
        padding: 0.2rem 0.5rem;
        font-size: 0.6rem;
        font-weight: 600;
        border: none;
        background: rgba(255, 255, 255, 0.06);
        color: rgba(255, 255, 255, 0.5);
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .pos-sb-sort-btn:hover {
        color: rgba(255, 255, 255, 0.85);
        background: rgba(255, 255, 255, 0.1);
    }

    .pos-sb-sort-btn.active {
        color: #fff;
        background: rgba(56, 152, 236, 0.6);
    }

    .pos-sb-sort-btn .bi {
        font-size: 0.5rem;
        margin-left: 0.1rem;
    }

    /* Desktop score legend */
    .pos-sb-legend {
        display: flex;
        gap: 0.6rem;
        margin-bottom: 0.5rem;
        font-size: 0.55rem;
        color: rgba(255, 255, 255, 0.4);
    }

    /* Desktop expandable card detail */
    .pos-sb-detail {
        background: rgba(255, 255, 255, 0.03);
        border-radius: 8px;
        padding: 0.5rem 0.65rem;
        margin: -0.15rem 0 0.35rem 0;
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

    .pos-sb-detail-bar {
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .pos-sb-detail-bar-label {
        font-size: 0.55rem;
        color: rgba(255, 255, 255, 0.45);
        font-weight: 600;
        min-width: 52px;
    }

    .pos-sb-detail-bar-track {
        flex: 1;
        height: 6px;
        background: rgba(255, 255, 255, 0.06);
        border-radius: 3px;
        overflow: hidden;
    }

    .pos-sb-detail-bar-fill {
        height: 100%;
        border-radius: 3px;
        transition: width 0.3s ease;
    }

    .pos-sb-detail-bar-fill.premium { background: var(--score-premium); }
    .pos-sb-detail-bar-fill.profit { background: var(--score-profit); }
    .pos-sb-detail-bar-fill.trade { background: var(--score-trade); }

    .pos-sb-detail-bar-value {
        font-size: 0.55rem;
        color: rgba(255, 255, 255, 0.7);
        font-weight: 600;
        min-width: 42px;
        text-align: right;
    }

    .pos-sb-detail-extra {
        display: flex;
        gap: 0.6rem;
        font-size: 0.55rem;
        color: rgba(255, 255, 255, 0.45);
        flex-wrap: wrap;
    }

    .pos-sb-detail-extra a {
        color: var(--accent);
        text-decoration: none;
        font-size: 0.55rem;
    }

    .pos-sb-detail-extra a:hover { text-decoration: underline; }

    /* Desktop top-10 chart */
    .pos-sb-chart-wrap {
        margin-top: 0.75rem;
        padding-top: 0.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .pos-sb-chart-title {
        font-size: 0.6rem;
        font-weight: 700;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.4);
        letter-spacing: 0.03em;
        margin-bottom: 0.4rem;
    }

    .pos-sb-chart-row {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        margin-bottom: 0.25rem;
    }

    .pos-sb-chart-label {
        font-size: 0.55rem;
        color: rgba(255, 255, 255, 0.45);
        min-width: 65px;
        text-align: right;
        font-family: var(--num);
    }

    .pos-sb-chart-bar {
        flex: 1;
        display: flex;
        height: 12px;
        border-radius: 3px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.03);
    }

    .pos-sb-chart-score {
        font-size: 0.55rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.7);
        min-width: 28px;
        text-align: left;
    }

    /* Clickable card indicator */
    .pos-sb-card {
        cursor: pointer;
    }

    .pos-sb-expand-icon {
        font-size: 0.5rem;
        opacity: 0.3;
        margin-left: 0.2rem;
        transition: transform 0.15s ease;
    }

    .pos-sb-card.pos-sb-expanded .pos-sb-expand-icon {
        transform: rotate(90deg);
        opacity: 0.7;
    }

    /* Rules pane styles */
    .pos-rules-layout {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
    }

    .pos-rules-card {
        background: rgba(255, 255, 255, 0.035);
        border-radius: 10px;
        padding: 0.75rem 0.85rem;
    }

    .pos-rules-card-title {
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: rgba(255, 255, 255, 0.5);
        margin-bottom: 0.5rem;
    }

    .pos-rules-card-title i {
        margin-right: 0.3rem;
    }

    .pos-rules-prize-list {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }

    .pos-rules-prize-row {
        display: flex;
        justify-content: space-between;
        font-size: 0.72rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.7);
        padding: 0.25rem 0;
    }

    .pos-rules-prize-gold { color: #fbbf24; }
    .pos-rules-prize-silver { color: #9ca3af; }
    .pos-rules-prize-bronze { color: #d97706; }

    .pos-rules-score-breakdown {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .pos-rules-score-item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.3rem;
    }

    .pos-rules-score-label {
        font-size: 0.68rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.7);
        flex: 1;
    }

    .pos-rules-score-pts {
        font-size: 0.6rem;
        color: rgba(56, 152, 236, 0.85);
        font-weight: 600;
    }

    .pos-rules-score-bar {
        width: 100%;
        height: 3px;
        background: rgba(255, 255, 255, 0.06);
        border-radius: 2px;
        position: relative;
    }

    .pos-rules-score-bar::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: var(--bar-w, 0);
        background: rgba(56, 152, 236, 0.7);
        border-radius: 2px;
    }

    .pos-rules-note {
        font-size: 0.6rem;
        color: rgba(255, 255, 255, 0.35);
        margin-top: 0.5rem;
        line-height: 1.4;
    }

    .pos-rules-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.6rem;
        color: rgba(255, 255, 255, 0.35);
        padding-top: 0.3rem;
    }

    .pos-rules-winners-link {
        color: rgba(56, 152, 236, 0.85);
        text-decoration: none;
        font-weight: 600;
        font-size: 0.6rem;
    }

    .pos-rules-winners-link:hover {
        color: #fff;
    }

    /* Hide "Rules" sidebar button on desktop (merged into Scores split) */
    .positions-sidebar-btn[data-target="scores-rules-content"] {
        display: none;
    }

    /* ── Performance pane redesign ── */
    .perf-stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.4rem;
        margin-bottom: 0.75rem;
    }

    .perf-stat-card {
        background: rgba(255, 255, 255, 0.035);
        border-radius: 10px;
        padding: 0.55rem 0.65rem;
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        min-width: 0;
    }

    .perf-stat-card-wide {
        grid-column: span 2;
    }

    .perf-stat-label {
        font-size: 0.55rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: rgba(255, 255, 255, 0.4);
    }

    .perf-stat-value {
        font-size: 0.95rem;
        font-weight: 700;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .perf-stat-value.perf-positive {
        color: var(--positive);
    }

    .perf-stat-value.perf-negative {
        color: var(--negative);
    }

    .perf-chart-card {
        background: rgba(255, 255, 255, 0.035);
        border-radius: 10px;
        padding: 0.85rem 0.9rem 0.5rem;
        margin-bottom: 0.75rem;
    }

    .perf-chart-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 0.35rem;
    }

    .perf-chart-label {
        font-size: 0.6rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: rgba(255, 255, 255, 0.4);
    }

    .perf-chart-value {
        font-size: 1.6rem;
        font-weight: 800;
        letter-spacing: -0.5px;
    }

    .perf-chart-canvas-wrap {
        position: relative;
        height: 140px;
    }

    /* ── Trade History header row + date toggles ── */
    #trade-history-content .history-header-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.75rem;
    }

    #trade-history-content .history-header-row h2 {
        display: none;
    }

    #trade-history-content .history-date-toggles {
        display: flex;
        gap: 0.25rem;
        background: rgba(255, 255, 255, 0.04);
        border-radius: 8px;
        padding: 3px;
    }

    #trade-history-content .date-toggle {
        padding: 0.3rem 0.7rem;
        font-size: 0.7rem;
        font-weight: 600;
        border: none;
        background: transparent;
        color: rgba(255, 255, 255, 0.45);
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.15s ease;
        white-space: nowrap;
    }

    #trade-history-content .date-toggle:hover {
        color: rgba(255, 255, 255, 0.8);
    }

    #trade-history-content .date-toggle.active {
        color: #fff;
        background: rgba(56, 152, 236, 0.85);
    }

    /* ── History table card design on desktop (match mobile cards) ── */
    .positions-inner-content #trade-history-content .history-table-container {
        border: none;
        padding: 0;
        margin-bottom: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }

    .positions-inner-content #trade-history-content .history-table {
        display: block;
        width: 100%;
    }

    .positions-inner-content #trade-history-content .history-table tbody {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }

    .positions-inner-content #trade-history-content .history-table thead {
        display: none;
    }

    /* Trade history cards – match My Positions / All Odette style */
    .positions-inner-content #trade-history-content .history-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr);
        grid-template-areas: "asset settlement" "asset pnl";
        gap: 0.15rem 0.5rem;
        align-items: center;
        padding: 0.5rem 0.75rem;
        background: rgba(255, 255, 255, 0.045) !important;
        border: none !important;
        border-radius: 10px;
        cursor: pointer;
        transition: background 0.15s ease;
    }

    .positions-inner-content #trade-history-content .history-table tbody tr:hover {
        background: rgba(255, 255, 255, 0.08) !important;
    }

    /* Hide redundant columns */
    .positions-inner-content #trade-history-content .history-table tbody td.col-date,
    .positions-inner-content #trade-history-content .history-table tbody td.col-type,
    .positions-inner-content #trade-history-content .history-table tbody td.col-strike,
    .positions-inner-content #trade-history-content .history-table tbody td.col-size,
    .positions-inner-content #trade-history-content .history-table tbody td.col-premium,
    .positions-inner-content #trade-history-content .history-table .col-premium-usd,
    .positions-inner-content #trade-history-content .history-table .col-pnl-usd,
    .positions-inner-content #trade-history-content .history-table td.col-status {
        display: none;
    }

    /* Asset badge – match position cards */
    .positions-inner-content #trade-history-content .history-table tbody td.col-asset {
        grid-area: asset;
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.85rem;
        font-weight: 700;
        overflow: visible;
        padding: 0;
        border: none;
    }

    .positions-inner-content #trade-history-content .history-table tbody td.col-asset .position-asset-logo {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        object-fit: contain;
        flex-shrink: 0;
    }

    .positions-inner-content #trade-history-content .history-table tbody td.col-asset .position-asset-text {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
    }

    .positions-inner-content #trade-history-content .history-table tbody td.col-asset .position-cost-label {
        display: block;
        font-size: 0.65rem;
        font-weight: 500;
        color: var(--text-muted);
        margin-top: 0.05rem;
    }

    /* Asset text color by option type */
    .positions-inner-content #trade-history-content .history-table tbody tr[data-option-type="call"] td.col-asset strong {
        color: var(--call-green, #4ade80);
    }
    .positions-inner-content #trade-history-content .history-table tbody tr[data-option-type="put"] td.col-asset strong {
        color: var(--put-red, #f87171);
    }
    .positions-inner-content #trade-history-content .history-table tbody tr[data-option-type="ranger"] td.col-asset strong {
        color: #a855f7;
    }

    /* Settlement Price – above PNL, right column */
    .positions-inner-content #trade-history-content .history-table tbody td.col-settlement {
        grid-area: settlement;
        display: block;
        font-size: 0.65rem;
        color: var(--text-muted);
        padding: 0;
        border: none;
        text-align: right;
    }

    .positions-inner-content #trade-history-content .history-table tbody td.col-settlement:before {
        content: "Settlement Price ";
        display: inline;
        font-size: 0.55rem;
        color: var(--text-muted);
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 0.3px;
        margin-right: 0.2rem;
    }

    /* PnL – right side, match position card PnL */
    .positions-inner-content #trade-history-content .history-table tbody td.col-pnl {
        grid-area: pnl;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        font-size: 0.85rem;
        font-weight: 700;
        text-align: right;
        padding: 0;
        border: none;
    }

    .positions-inner-content #trade-history-content .history-table tbody td.col-pnl:before {
        content: "PNL ";
        display: inline;
        font-size: 0.55rem;
        color: var(--text-muted);
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 0.3px;
        margin-right: 0.2rem;
    }

    .positions-inner-content #trade-history-content .history-table tbody td:before {
        display: none;
    }
    .positions-inner-content #trade-history-content .history-table tbody td.col-pnl:before {
        display: inline;
    }

    /* ── Compact inline filter pills for trade history split view ── */
    .positions-inner-content #trade-history-content .desktop-history-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 0.3rem;
        margin: 0 0 0.75rem 0;
        padding: 0;
        --bs-gutter-x: 0;
    }

    .positions-inner-content #trade-history-content .desktop-history-filters .col-md-3 {
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        padding: 0;
    }

    .positions-inner-content #trade-history-content .desktop-history-filters .form-label {
        display: none;
    }

    .positions-inner-content #trade-history-content .desktop-history-filters .form-group {
        margin-bottom: 0;
    }

    .positions-inner-content #trade-history-content .desktop-history-filters .form-select-dropdown {
        background: rgba(255, 255, 255, 0.04) !important;
        border: none !important;
        border-radius: 6px !important;
        color: rgba(255, 255, 255, 0.6) !important;
        font-size: 0.68rem !important;
        font-weight: 600 !important;
        padding: 0.3rem 1.4rem 0.3rem 0.55rem !important;
        transition: all 0.15s ease !important;
        min-width: 0;
    }

    .positions-inner-content #trade-history-content .desktop-history-filters .form-select-dropdown::after {
        right: 0.35rem;
        width: 0.6rem;
        height: 0.6rem;
        background-size: 0.6rem;
        opacity: 0.4;
    }

    .positions-inner-content #trade-history-content .desktop-history-filters .form-select-dropdown:hover {
        background: rgba(255, 255, 255, 0.08) !important;
        color: #fff !important;
        border: none !important;
    }

    .positions-inner-content #trade-history-content .desktop-history-filters .form-select-dropdown-menu {
        background: rgba(20, 25, 35, 0.98) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 8px !important;
        padding: 0.25rem !important;
        backdrop-filter: blur(12px);
        min-width: 120px;
    }

    .positions-inner-content #trade-history-content .desktop-history-filters .form-select-dropdown-menu .dropdown-item {
        font-size: 0.68rem !important;
        padding: 0.35rem 0.6rem !important;
        border-radius: 4px !important;
        border-bottom: none !important;
        color: rgba(255, 255, 255, 0.6) !important;
    }

    .positions-inner-content #trade-history-content .desktop-history-filters .form-select-dropdown-menu .dropdown-item:hover {
        background: rgba(56, 152, 236, 0.15) !important;
        color: #fff !important;
    }
}

/* Hide desktop-only history/performance panes on mobile */
@media (max-width: 991.98px) {
    #trade-history-content,
    #performance-content {
        display: none !important;
    }

    .positions-sidebar-btn[data-target="trade-history-content"],
    .positions-sidebar-btn[data-target="performance-content"] {
        display: none !important;
    }
}

/* Section top tabs (Positions: My/All, Scoreboard: Scoreboard/Rules) */
.positions-top-tabs,
.scoreboard-top-tabs {
    display: flex;
    gap: 0;
    align-items: stretch;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.positions-top-tab,
.scoreboard-top-tab {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.positions-top-tab:hover,
.scoreboard-top-tab:hover {
    color: rgba(255, 255, 255, 0.7);
}

.positions-top-tab.active,
.scoreboard-top-tab.active {
    color: #fff;
    font-weight: 700;
    border-bottom-color: var(--accent, #7dd3fc);
}

/* ════════════════════════════════════════════════════════════════════════════
   Rules Tab: desktop layout
   ════════════════════════════════════════════════════════════════════════════ */
.rules-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rules-top-row {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 1rem;
}

.rules-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 1.25rem;
}

.rules-card-compact {
    padding: 0.85rem 1.25rem;
}

.rules-card-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 0.85rem;
}

.rules-card-title i {
    margin-right: 0.3rem;
    font-size: 0.65rem;
}

.rules-prize-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.rules-prize-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
}

.rules-prize-rank {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
}

.rules-prize-amount {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
}

.rules-prize-gold {
    background: rgba(253, 224, 71, 0.08);
}
.rules-prize-gold .rules-prize-rank,
.rules-prize-gold .rules-prize-amount {
    color: #fde047;
}

.rules-prize-silver {
    background: rgba(148, 163, 184, 0.06);
}
.rules-prize-silver .rules-prize-rank {
    color: #94a3b8;
}
.rules-prize-silver .rules-prize-amount {
    color: #cbd5e1;
}

.rules-prize-bronze {
    background: rgba(217, 119, 6, 0.06);
}
.rules-prize-bronze .rules-prize-rank,
.rules-prize-bronze .rules-prize-amount {
    color: #f59e0b;
}

/* Score breakdown */
.rules-score-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rules-score-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 0.2rem 0.75rem;
    align-items: center;
}

.rules-score-label {
    grid-column: 1;
    grid-row: 1;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

.rules-score-pts {
    grid-column: 2;
    grid-row: 1 / 3;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(56, 152, 236, 0.9);
    text-align: right;
}

.rules-score-bar {
    grid-column: 1;
    grid-row: 2;
    height: 4px;
    border-radius: 2px;
    background: rgba(56, 152, 236, 0.12);
    position: relative;
    overflow: hidden;
}

.rules-score-bar::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--bar-w, 0%);
    background: rgba(56, 152, 236, 0.6);
    border-radius: 2px;
}

.rules-note {
    margin-top: 0.75rem;
    font-size: 0.7rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.3);
}

/* Footer card */
.rules-footer-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rules-footer-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
}

.rules-footer-label i {
    margin-right: 0.25rem;
}

.rules-winners-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    background: rgba(253, 224, 71, 0.08);
    border: 1px solid rgba(253, 224, 71, 0.12);
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fde047;
    text-decoration: none;
    transition: background 0.2s ease;
}

.rules-winners-link:hover {
    background: rgba(253, 224, 71, 0.15);
    color: #fde047;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Desktop: hide mobile-only components
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    .mobile-bottom-nav {
        display: none !important;
    }

    .asset-header-bg {
        display: none !important;
    }

    #history-section .history-date-toggles {
        display: none !important;
    }

    .mobile-header-wallet-btn {
        display: none !important;
    }

    .mobile-wallet-sheet,
    .mobile-wallet-sheet-backdrop {
        display: none !important;
    }

    .mobile-tool-sheet,
    .mobile-tool-sheet-backdrop {
        display: none !important;
    }

    .mobile-weather-sheet,
    .mobile-weather-sheet-backdrop {
        display: none !important;
    }
}

/* ===== Redesigned Trade Preview Card ===== */

.trade-preview-card {
    background: rgba(0, 0, 0, 0.3);
    border: none;
    border-radius: 12px;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
}

.preview-card-identity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.65rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.preview-asset-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.preview-asset-logo[data-asset="ETH"],
.preview-asset-logo[data-asset="XRP"] {
    filter: brightness(0) invert(1);
}

.preview-asset-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.preview-asset-label {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.preview-option-type {
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.preview-option-type:empty {
    display: none;
}

.preview-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.65rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.preview-card-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.preview-card-expiry {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 500;
    display: flex;
    align-items: center;
}

.preview-card-expiry i {
    font-size: 0.6rem;
    opacity: 0.7;
}

.preview-details-list {
    display: flex;
    flex-direction: column;
}

.preview-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
}

.preview-detail-label {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    flex-shrink: 0;
}

.preview-detail-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    /* The whole column is mono, not just the rows that happen to carry an id.
       A right-aligned column you read down must not change face row to row. */
    font-family: var(--num);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    text-align: right;
    min-width: 0;
    word-break: break-word;
}

/* …but the words embedded in the Payout row stay prose. */
.preview-detail-value #payout-direction {
    font-family: 'Inter', sans-serif;
    letter-spacing: normal;
}

.preview-detail-value .leverage-value {
    color: #fff !important;
    font-weight: 600;
}

/* payout-description is now inside a .preview-detail-row, inherits row styles */
#payout-description {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    text-align: right;
}

#payout-description span,
#payout-description strong {
    color: #fff !important;
}

.trade-preview-card .trade-preview-profit-statement {
    font-size: 1.45rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.03);
    border: none;
    border-radius: 10px;
    text-align: center;
    padding: 0.75rem 0.85rem;
    margin: 0.15rem 0 0.5rem;
    line-height: 1.3;
    font-weight: 500;
}

.trade-preview-card .trade-preview-profit-statement .profit-direction,
.trade-preview-card .trade-preview-profit-statement .profit-countdown {
    color: inherit;
    font-weight: inherit;
}

.trade-preview-card .trade-actions {
    margin-top: auto;
    padding-top: 0.45rem;
}

.trade-preview-card #trade-now-btn {
    border-radius: 8px !important;
    font-size: 0.8rem !important;
    padding: 0.6rem 1rem !important;
    font-weight: 700;
    letter-spacing: 0.03em;
}

#trade-now-btn.call {
    background: rgba(34, 197, 94, 0.35) !important;
    color: #fff !important;
}

#trade-now-btn.call:hover:not(:disabled) {
    background: rgba(34, 197, 94, 0.5) !important;
}

#trade-now-btn.put {
    background: rgba(239, 68, 68, 0.35) !important;
    color: #fff !important;
}

#trade-now-btn.put:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.5) !important;
}

#trade-now-btn.range {
    background: rgba(168, 85, 247, 0.35) !important;
    color: #fff !important;
}

#trade-now-btn.range:hover:not(:disabled) {
    background: rgba(168, 85, 247, 0.5) !important;
}

.trade-preview-card .alert-warning {
    font-size: 0.75rem;
    border-radius: 8px;
}

.trade-maintenance-preview {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(250, 204, 21, 0.42);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    min-height: 260px;
}

.trade-maintenance-preview-icon-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 0.6rem;
}

.trade-maintenance-preview-icon {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fde68a;
    border: 1px solid rgba(250, 204, 21, 0.45);
    background: rgba(250, 204, 21, 0.08);
    box-shadow: 0 0 22px rgba(250, 204, 21, 0.14);
}

.trade-maintenance-preview-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
    text-align: center;
}

.trade-maintenance-preview-text {
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.94);
    text-align: center;
}

/* ===== Desktop Inline Confirmation Panel ===== */

/* The confirm step replaces the DECISION zone only. The payoff curve is what
   a trader re-reads before Confirm, so ANALYSIS stays. `#settlement-scenarios`
   stays hidden: the curve says what its table said. `order` puts the confirm
   panel first, because it is last in the DOM. */
.trade-preview-card.confirming > *:not(#inline-confirm-panel):not(.ticket-analysis) {
    display: none !important;
}

.trade-preview-card.confirming #inline-confirm-panel {
    display: flex !important;
    order: -1;
}

/* The confirm panel ends on the quote clock, which is small muted type, and
   the analysis zone opens on its tab strip. Butted together the clock reads as
   a label for the tabs. The hairline needs air on the clock's side to read as
   a division and not as an underline. */
.trade-preview-card.confirming .ticket-analysis {
    margin-top: 1.1rem;
}

@media (min-width: 992px) {
    .trade-unified-layout {
        position: relative;
    }
    /* Each cell of the grid, or the page dims in parts. §3.6 made the
       positions strip a cell of its own; this list kept the three cells that
       existed before it and left the strip at full brightness. */
    .trade-unified-layout.confirm-active .asset-sidebar,
    .trade-unified-layout.confirm-active .trade-panel-main,
    .trade-unified-layout.confirm-active #trade-positions-block,
    .trade-unified-layout.confirm-active .trade-vertical-divider {
        pointer-events: none;
        opacity: 0.35;
        filter: blur(2px);
        transition: opacity 0.3s ease, filter 0.3s ease;
    }
    /* Same list, same reason: the strip was missing here too. */
    .trade-unified-layout.trading-disabled .asset-sidebar,
    .trade-unified-layout.trading-disabled .trade-panel-main,
    .trade-unified-layout.trading-disabled #trade-positions-block,
    .trade-unified-layout.trading-disabled .trade-vertical-divider {
        pointer-events: none;
        opacity: 0.3;
        filter: blur(3px);
        transition: opacity 0.3s ease, filter 0.3s ease;
    }
    .inline-confirm-backdrop {
        position: absolute;
        inset: 0;
        z-index: 100;
        cursor: pointer;
    }
    /* No `position` here. This rule is (0,3,0) and out-ranks the later
       .trade-panel-preview rule at (0,2,0), so a `position: relative` would beat
       the ticket's `absolute` and put it back in flow — where it picks up the
       stale grid-column and the market column pays its width twice. */
    .trade-unified-layout.confirm-active .trade-panel-preview {
        z-index: 101;
    }
}

.inline-confirm-panel {
    display: none;
    flex-direction: column;
    animation: inlineConfirmFadeIn 0.25s ease-out;
}

@keyframes inlineConfirmFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Back button in the identity header row */
.inline-confirm-back {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.45);
    font-size: 1rem;
    padding: 0.15rem 0.3rem;
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    line-height: 1;
    flex-shrink: 0;
}

.inline-confirm-back:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

/* Inline payout text */
#inline-payout-description,
#inline-payout-description * {
    color: #fff !important;
}

/* Max-loss row highlight */
.inline-row-loss .preview-detail-value {
    color: var(--negative);
}

/* Approval checkbox */
.inline-approval-check {
    padding: 0.35rem 0.55rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.inline-approval-check .form-check-label {
    font-size: 0.68rem;
}

/* Confirm button — reuses .trade-actions for margin-top: auto */
#inline-confirm-trade-btn {
    border-radius: 8px !important;
    font-size: 0.8rem !important;
    padding: 0.6rem 1rem !important;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: var(--accent);
    border: none;
    color: var(--background);
    transition: all 0.2s ease;
}

#inline-confirm-trade-btn.call {
    background: rgba(34, 197, 94, 0.35) !important;
    color: #fff !important;
}

#inline-confirm-trade-btn.call:hover:not(:disabled) {
    background: rgba(34, 197, 94, 0.5) !important;
}

#inline-confirm-trade-btn.put {
    background: rgba(239, 68, 68, 0.35) !important;
    color: #fff !important;
}

#inline-confirm-trade-btn.put:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.5) !important;
}

#inline-confirm-trade-btn.range {
    background: rgba(168, 85, 247, 0.35) !important;
    color: #fff !important;
}

#inline-confirm-trade-btn.range:hover:not(:disabled) {
    background: rgba(168, 85, 247, 0.5) !important;
}

#inline-confirm-trade-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.inline-confirm-panel #inline-trade-error-alert {
    font-size: 0.72rem;
    border-radius: 8px;
    padding: 0.5rem 0.65rem;
}

.inline-quote-expiry {
    text-align: center;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 0.5rem;
}

/* ─── Trade Tools Tabs ─── */
.trade-tools {
    margin-top: 0.85rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    overflow: hidden;
}

.trade-tools-tabs {
    display: flex;
    gap: 0;
    align-items: stretch;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0 0.4rem;
}

.trade-tools-tab {
    padding: 0.5rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.trade-tools-tab:hover {
    color: rgba(255, 255, 255, 0.7);
}

.trade-tools-tab.active {
    color: #fff;
    font-weight: 700;
    border-bottom-color: var(--accent, #7dd3fc);
}

.trade-tools-pane {
    display: none;
    padding: 0.7rem 0.8rem;
}

.trade-tools-pane.active {
    display: block;
}

#price-chart {
    padding: 0;
}

/* Framed like every other ticket surface: hairline and radius on all four
   sides. The widget draws its own 1px chrome, so the iframe below is inset by
   -2px. The two frames must not stack into a double line. */
#tv-chart-container {
    width: 100%;
    /* Taller than the 320px it had while the widget was bare: the top toolbar
       and the date rail take ~80px between them, and taking that out of the
       plot leaves a chart too short to read. */
    height: 400px;
    border-radius: 10px;
    overflow: hidden;
    background: #1B1F2B;
    border: 1px solid var(--border-color) !important;
    outline: none !important;
    box-shadow: none !important;
    position: relative;
}

#tv-chart-container > div,
#tv-chart-container iframe {
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    width: calc(100% + 4px) !important;
    height: calc(100% + 4px) !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ─── Settlement Scenarios Tab ─── */
.scenarios-table-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.5rem;
}

.scenarios-table {
    width: 100%;
    color: var(--text-primary);
    border-collapse: separate;
    border-spacing: 0;
}

.scenarios-table thead th {
    background: transparent;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.45rem 0.65rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
}

.scenarios-table thead th:last-child {
    text-align: right;
}

.scenarios-table tbody td {
    padding: 0.5rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    vertical-align: middle;
}

.scenarios-table tbody td:last-child {
    text-align: right;
}

.scenarios-table tbody tr:last-child td {
    border-bottom: none;
}

.scenarios-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

.scenarios-table tbody td.scenario-negative {
    color: var(--negative);
}

.scenarios-table tbody td.scenario-neutral {
    color: var(--text-primary);
}

.scenarios-table tbody td.scenario-positive {
    color: var(--positive);
}

#settlement-scenarios {
    padding: 0.35rem 0.4rem;
}

.payout-calc-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.65rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    border: 1.5px solid transparent;
    margin-bottom: 0.5rem;
    transition: border-color 0.2s ease;
}

.payout-calc-price-row:focus-within {
    border-color: rgba(255, 255, 255, 0.15);
}

.payout-calc-label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.payout-calc-countdown {
    font-size: inherit;
    color: rgba(255, 255, 255, 0.65);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.payout-calc-price-value {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.payout-calc-dollar {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
}

.payout-calc-input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    width: 90px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    appearance: textfield;
}

.payout-calc-input::-webkit-outer-spin-button,
.payout-calc-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.payout-calc-slider-row {
    margin-bottom: 0.5rem;
}

.payout-calc-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
    cursor: pointer;
}

.payout-calc-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: transparent;
}

.payout-calc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
    margin-top: -5px;
}

.payout-calc-slider::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: transparent;
}

.payout-calc-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    border: none;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.payout-calc-range-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.2rem;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.25);
    font-variant-numeric: tabular-nums;
}

.payout-calc-result {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 0.45rem;
}

.payout-calc-result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.2rem 0;
}

.payout-calc-result-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.payout-calc-result-value.positive {
    color: #22c55e;
}

.payout-calc-result-value.negative {
    color: #ef4444;
}

/* Ensure flex layout when preview is shown (jQuery .show() sets display:block inline) */
.trade-panel-preview .option-preview.show {
    display: flex !important;
    flex-direction: column;
    min-height: 100%;
}

/* =========================================================
   SCOREBOARD VISUAL ENHANCEMENTS
   ========================================================= */

/* Score color variables */
:root {
    /* ---- the three score components ----
       The `--score-*` values are BAR FILLS. They fail as text: measured on
       this app's own surfaces, #3b82f6 is 3.86:1 on --secondary and #8b5cf6
       is 3.36:1 — both under the 4.5:1 floor at 12px/600, which is what the
       rank card's legend and the rules card's captions print at.
       `--score-*-ink` are the same three hues one step lighter, for TEXT
       only: measured 5.59 / 7.39 / 5.22 on --secondary and 6.85 / 9.06 /
       6.40 on --card-bg. Fill a bar with the first set, print a word with
       the second. Do not use one for the other. */
    --score-premium: #3b82f6;
    --score-profit: #10b981;
    --score-trade: #8b5cf6;
    --score-premium-ink: #60a5fa;
    --score-profit-ink:  #34d399;
    --score-trade-ink:   #a78bfa;
}

/* --- Summary Stats Bar --- */
.scoreboard-summary-stats {
    display: flex;
    gap: 0.75rem;
    padding: 0 1.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.sb-stat-card {
    flex: 1;
    min-width: 120px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 0.75rem 1rem;
}

.sb-stat-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: #6b7280;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 0.2rem;
}

.sb-stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* --- Podium Cards --- */
.scoreboard-podium {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: 0.75rem;
    padding: 0 1.5rem;
    margin-bottom: 1.25rem;
    align-items: end;
}

.podium-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1rem;
    text-align: center;
    position: relative;
    order: 2;
}

.podium-card:nth-child(1) {
    order: 2;
    border-top: 3px solid #ffd700;
    min-height: 180px;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.08);
}

.podium-card:nth-child(2) {
    order: 1;
    border-top: 3px solid #c0c0c0;
    min-height: 155px;
}

.podium-card:nth-child(3) {
    order: 3;
    border-top: 3px solid #cd7f32;
    min-height: 145px;
}

.podium-medal {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.podium-address {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    font-family: var(--mono);
}

.podium-score-total {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.podium-score-bar {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.6rem;
    background: rgba(255, 255, 255, 0.05);
}

.podium-stats {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.podium-stat {
    font-size: 0.65rem;
    color: #6b7280;
}

.podium-stat-value {
    color: var(--text-primary);
    font-weight: 600;
}

/* --- Score Legend --- */
.score-legend {
    display: flex;
    gap: 1rem;
    padding: 0 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.65rem;
    color: #6b7280;
}

.score-legend-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.score-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.score-legend-dot.premium { background: var(--score-premium); }
.score-legend-dot.profit { background: var(--score-profit); }
.score-legend-dot.trade { background: var(--score-trade); }

/* --- Inline Score Breakdown Bar --- */
.score-breakdown {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.score-bar-inline {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    flex: 1;
    min-width: 60px;
}

.score-seg {
    height: 100%;
    transition: width 0.3s ease;
}

.score-seg-premium { background: var(--score-premium); }
.score-seg-profit { background: var(--score-profit); }
.score-seg-trade { background: var(--score-trade); }

.score-total {
    font-weight: 700;
    white-space: nowrap;
    min-width: 32px;
    text-align: right;
}

/* --- Mobile-only full-width breakdown bar (hidden on desktop) --- */
.col-breakdown {
    display: none;
}

.score-bar-full {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    width: 100%;
}

/* --- Sortable Column Headers --- */
.scoreboard-table thead th.sortable {
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease;
}

.scoreboard-table thead th.sortable:hover {
    color: var(--accent);
}

.scoreboard-table thead th.sortable .sort-icon {
    font-size: 0.6rem;
    margin-left: 0.25rem;
    opacity: 0.3;
    transition: opacity 0.15s ease;
}

.scoreboard-table thead th.sortable.sort-active .sort-icon {
    opacity: 1;
    color: var(--accent);
}

/* --- Expandable Detail Row --- */
.score-detail-row {
    background: rgba(255, 255, 255, 0.02) !important;
}

.score-detail-row td {
    padding: 1rem 1.5rem !important;
    border-top: none !important;
}

.score-detail-content {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.score-detail-bars {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.score-detail-bar-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.score-detail-bar-label {
    font-size: 0.7rem;
    color: #6b7280;
    min-width: 70px;
    font-weight: 600;
}

.score-detail-bar-track {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
}

.score-detail-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.score-detail-bar-fill.premium { background: var(--score-premium); }
.score-detail-bar-fill.profit { background: var(--score-profit); }
.score-detail-bar-fill.trade { background: var(--score-trade); }

.score-detail-bar-value {
    font-size: 0.7rem;
    color: var(--text-primary);
    font-weight: 600;
    min-width: 55px;
    text-align: right;
}

.score-detail-extra {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.7rem;
    color: #6b7280;
}

.score-detail-extra a {
    color: var(--accent);
    text-decoration: none;
}

.score-detail-extra a:hover {
    text-decoration: underline;
}

/* --- Top-10 Chart --- */
.scoreboard-chart-container {
    padding: 0 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.scoreboard-chart-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sb-chart-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.sb-chart-label {
    font-size: 0.65rem;
    color: #6b7280;
    min-width: 80px;
    text-align: right;
    font-family: var(--num);
}

.sb-chart-bar-container {
    flex: 1;
    display: flex;
    height: 16px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
}

.sb-chart-score {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 35px;
    text-align: left;
}

/* --- Clickable rows --- */
.scoreboard-table tbody tr.sb-expandable {
    cursor: pointer;
}

.scoreboard-table tbody tr.sb-expandable:hover {
    background-color: rgba(125, 211, 252, 0.08) !important;
}

.sb-expand-icon {
    font-size: 0.6rem;
    margin-left: 0.3rem;
    opacity: 0.4;
    transition: transform 0.2s ease;
}

.sb-expandable.sb-expanded .sb-expand-icon {
    transform: rotate(90deg);
    opacity: 0.8;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .scoreboard-summary-stats {
        padding: 0 0.75rem;
        gap: 0.5rem;
    }
    .sb-stat-card {
        min-width: 80px;
        padding: 0.5rem 0.6rem;
    }
    .sb-stat-value { font-size: 0.9rem; }

    .scoreboard-podium {
        grid-template-columns: 1fr;
        padding: 0 0.75rem;
    }
    .podium-card { order: unset !important; min-height: auto !important; }

    .scoreboard-chart-container { padding: 0 0.75rem; }
    .score-bar-inline { min-width: 40px; }

    .score-detail-content { flex-direction: column; gap: 1rem; }
}

/* ===== REFERRALS PAGE =========================================================
   Head / stat strip / tab head + pane — the Portfolio shape, id-scoped.
   The `.t-*` classes ARE on this branch and the markup uses them throughout
   (app.html, the #referral-section block). The note that said otherwise, and
   told the next reader to swap the class in later, was three months stale.
   Anything below that still declares a font-size is a legacy override, not a
   placeholder — check before deleting.
   ========================================================================== */

/* 32px of air under the header band, not 20. MEASURED on the Hyperliquid
   portfolio in Chrome on 2026-08-21: its nav band is 0..56 (the same 56px
   this header is), and the page title row starts 32px under the band below
   it. The four redesigned pages share this value. The TRADE page is not on
   it — a working surface starts at the chrome. */
#referral-section {
    padding: 32px 0 80px;
}

#referral-section .ref-wrap {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- head ---------- */

#referral-section .ref-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

#referral-section .ref-head-l {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    min-width: 0;
}

/* 28/600, the Portfolio page title */
#referral-section .ref-title {
    margin: 0;
    color: var(--text-primary);
}

#referral-section .ref-hint,
#referral-section .ref-note {
    color: var(--text-muted);
}

#referral-section .ref-head-r {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

#referral-section .ref-link-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* The full link stays in the value, so select-all and Copy are unaffected. */
#referral-section .ref-link-input {
    width: 380px;
    max-width: 100%;
    min-width: 0;
    padding: 8px 11px;
    border: 1px solid var(--border-color);
    border-radius: var(--r-input);
    background: var(--panel-sunken);
    color: var(--text-secondary);
    font-family: var(--mono);
    font-size: var(--fs-data);
    text-overflow: ellipsis;
}

#referral-section .ref-link-input:focus {
    outline: none;
    border-color: var(--border-light);
    color: var(--text-primary);
}

/* ---------- buttons: the Portfolio `.pf-btn` pair ---------- */

#referral-section .ref-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--r-input);
    background: transparent;
    color: var(--text-secondary);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

#referral-section .ref-btn:hover {
    border-color: var(--border-light);
    color: var(--text-primary);
}
/* A REAL RING. `outline: none` with a border moved from rgba(255,255,255,.09)
   to .14 is a 5%-alpha hairline shift — not a visible focus indicator, and on
   .ref-btn-pri it was #e5c940 against #FDE047, which is nothing at all.
   Same token as the Portfolio and Scoreboard rings, so one event looks the
   same on all three pages. */
#referral-section .ref-btn:focus-visible,
#referral-section .ref-btn-pri:focus-visible,
#referral-section .ref-link-input:focus-visible,
#referral-section .ref-tool:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

#referral-section .ref-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Matches #trade-now-btn and .pf-btn-pri: --accent on --background. */
#referral-section .ref-btn-pri {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--background);
}

#referral-section .ref-btn-pri:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--background);
}

/* ---------- stat strip ---------- */

/* Flex, not grid: referral-hub.js sets display:flex when it renders. */
#referral-section .ref-stats {
    display: flex;
    gap: 14px;
}

#referral-section .ref-stat {
    flex: 1;
    min-width: 0;
    padding: 14px 16px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--r-card);
    background: var(--card-bg);
}

#referral-section .ref-stat-l {
    color: var(--text-muted);
}

#referral-section .ref-stat-v {
    margin-top: 8px;
    color: var(--text-primary);
}

/* ---------- tab head + pane: one card, the tabs are its head ---------- */

#referral-section .ref-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding: 0 14px;
    border: 1px solid var(--border-color);
    border-bottom: 0;
    border-radius: var(--r-card) var(--r-card) 0 0;
    background: var(--card-bg);
}

#referral-section .ref-tabstrip {
    display: flex;
}

/* One list, so the tab is a label. Kept in the tab shape for a second one. */
#referral-section .ref-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 13px 14px 11px;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid var(--primary);
    background: transparent;
    color: #fff;
    cursor: default;
}

#referral-section .ref-tab:disabled {
    opacity: 1;
}

#referral-section .ref-tab-n {
    color: var(--text-muted);
}

/* min-height: the page must not change shape when the first referee lands. */
#referral-section .ref-pane {
    display: flex;
    flex-direction: column;
    min-height: 360px;
    border: 1px solid var(--border-color);
    border-radius: 0 0 var(--r-card) var(--r-card);
    background: var(--card-bg);
    overflow-x: auto;
}

#referral-section .ref-pane-solo {
    border-radius: var(--r-card);
}

#referral-section .ref-blank {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 40px 20px;
    color: var(--text-muted);
    text-align: center;
}

#referral-section .ref-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 16px;
    border-top: 1px solid var(--border-color);
}

/* ---------- table ---------- */

#referral-section .referral-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

#referral-section .referral-table th {
    padding: 9px 14px;
    text-align: left;
    white-space: nowrap;
    color: var(--text-muted);
    background: transparent;
    border-bottom: 1px solid var(--border-color);
}

#referral-section .referral-table td {
    padding: 10px 14px;
    white-space: nowrap;
    vertical-align: middle;
    color: var(--text-primary);
    background: transparent;
    border-bottom: 1px solid var(--border-color);
}

#referral-section .referral-table tbody tr:last-child td {
    border-bottom: 0;
}

#referral-section .referral-table tbody tr {
    transition: background-color 0.15s ease;
}

#referral-section .referral-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.025);
}

#referral-section .referral-table .ref-r,
#referral-section .referral-table td.referral-col-trades,
#referral-section .referral-table td.referral-col-premium,
#referral-section .referral-table td.referral-col-last {
    text-align: right;
}

#referral-section .referral-table td.referral-col-rank {
    width: 1%;
    color: var(--text-muted);
}

/* Addresses only — mono is for glyph-by-glyph reading, not for alignment. */
#referral-section .referral-table td.referral-col-wallet {
    font-family: var(--mono);
}

#referral-section .referral-table td.ref-warn {
    color: var(--text-muted);
}

/* ---------- mobile: each row becomes a card ---------- */

@media (max-width: 768px) {
    #referral-section .ref-title {
        font-size: var(--fs-fig);
    }
    #referral-section .ref-head-r,
    #referral-section .ref-link-row {
        width: 100%;
    }
    #referral-section .ref-link-input {
        flex: 1;
        width: auto;
    }
    #referral-section .ref-stats {
        flex-direction: column;
    }
    /* three cards stack, so the hero steps down one rung */
    #referral-section .ref-stat-v {
        font-size: var(--fs-h1);
    }
    #referral-section .ref-pane {
        padding: 8px;
    }
    /* the partial-totals note drops under the tab rather than squeezing it */
    #referral-section .ref-tabs {
        flex-wrap: wrap;
        row-gap: 0;
        padding-bottom: 8px;
    }

    #referral-section .referral-table,
    #referral-section .referral-table tbody {
        display: block;
        width: 100%;
    }
    #referral-section .referral-table thead {
        display: none;
    }

    /* 3-column grid, two rows: rank/wallet/joined over trades/premium/last */
    #referral-section .referral-table tbody tr {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "rank   wallet  joined"
            "trades premium last";
        padding: 10px 12px;
        margin-bottom: 8px;
        border: 1px solid var(--border-color);
        border-radius: var(--r-card);
        background: var(--panel-sunken);
    }
    #referral-section .referral-table tbody tr:hover {
        background-color: var(--panel-sunken);
    }
    #referral-section .referral-table td {
        display: flex;
        flex-direction: column;
        padding: 0;
        border: 0;
        white-space: normal;
    }
    /* a pseudo cannot take a class, so it states the .t-col role itself */
    #referral-section .referral-table td::before {
        content: attr(data-label);
        margin-bottom: 2px;
        font-size: var(--fs-micro);
        font-weight: 600;
        letter-spacing: var(--tr-caps);
        text-transform: uppercase;
        color: var(--text-muted);
    }

    #referral-section .referral-table td.referral-col-rank {
        grid-area: rank;
        flex-direction: row;
        align-items: center;
        width: auto;
        padding-right: 8px;
    }
    #referral-section .referral-table td.referral-col-wallet {
        grid-area: wallet;
        flex-direction: row;
        align-items: center;
    }
    #referral-section .referral-table td.referral-col-rank::before,
    #referral-section .referral-table td.referral-col-wallet::before {
        display: none;
    }
    #referral-section .referral-table td.referral-col-joined {
        grid-area: joined;
        align-items: flex-end;
        text-align: right;
    }
    #referral-section .referral-table td.referral-col-trades,
    #referral-section .referral-table td.referral-col-premium,
    #referral-section .referral-table td.referral-col-last {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--border-color);
    }
    #referral-section .referral-table td.referral-col-trades {
        grid-area: trades;
        align-items: flex-start;
        text-align: left;
    }
    #referral-section .referral-table td.referral-col-premium {
        grid-area: premium;
        align-items: center;
        text-align: center;
    }
    #referral-section .referral-table td.referral-col-last {
        grid-area: last;
        align-items: flex-end;
        text-align: right;
    }
}

/* Nav entry is a <button> */
:where(#nav-referrals-btn) {
    background: none;
    border: none;
    cursor: pointer;
}

@media (max-width: 991px) {
    /* collapsed menu: <a> nav items fill the row; buttons shrink-wrap without this */
    #nav-referrals-btn {
        width: 100%;
        text-align: left;
    }
    /* clear the fixed 50px mobile-bottom-nav so the last row / Load more isn't hidden */
    #referral-section {
        padding-bottom: calc(50px + 1.5rem + env(safe-area-inset-bottom));
    }
}

@media (max-width: 576px) {
    #referral-section .ref-btn {
        min-height: 44px;
    }
}

/* ===== Referral consent banner (button model — fixed bottom) ===== */
.referral-banner {
    position: fixed;
    right: 20px;
    bottom: 20px;
    max-width: 380px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem 1rem 0.85rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 1051; /* above the trollbox widget (1050, open by default, same corner), below Bootstrap modals (1055) and the custom 9999 overlays */
    animation: modalSlideUp 0.3s ease;
}

.referral-banner-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 0.25rem;
    font-size: 0.9rem;
    line-height: 1;
    transition: color 0.2s ease;
}

.referral-banner-close:hover {
    color: #fff;
}

.referral-banner-text {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
    padding-right: 1.25rem;
}

.referral-banner-text strong {
    display: block;
    color: var(--text-primary);
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
}

.referral-banner-text p {
    margin: 0 0 0.5rem;
}

.referral-banner-text p:last-child {
    margin-bottom: 0;
}

.referral-banner-status {
    color: var(--warning);
    font-size: 0.75rem;
    margin-top: 0.5rem;
}

.referral-banner-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.referral-banner-link {
    background: rgba(56, 152, 236, 0.85);
    border: none;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.referral-banner-link:hover {
    background: rgba(56, 152, 236, 1);
}

.referral-banner-dismiss {
    background: rgba(255, 255, 255, 0.06);
    border: none;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.referral-banner-dismiss:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .referral-banner {
        left: 0;
        right: 0;
        bottom: 0;
        max-width: none;
        border-radius: 12px 12px 0 0;
        border-left: none;
        border-right: none;
        border-bottom: none;
        padding-bottom: calc(0.85rem + env(safe-area-inset-bottom));
    }

    .referral-banner-actions button {
        flex: 1;
        min-height: 44px;
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }
}



/* ════════════════════════════════════════════════════════════════════════════
   TOP STRIP: weekly competition + this week's market events, in one band.
   Markup: app.html `#top-strip`.  Behaviour: top-strip.js.
   Fed by trade-motivation.js (left) and calendar-events.js (right).
   Split 60 / 40; the 60 is the competition, the half a trader acts on. Only
   the events scroll, because only their length is unknown.
   ════════════════════════════════════════════════════════════════════════════ */
.tstrip {
    /* ── geometry ─────────────────────────────────────────────────────────
       52px: the events run two lines (10px stamp over 12px name = 24px) and
       the competition runs one, so the band is sized by the taller half plus
       14px of air each side. */
    --ts-h: 52px;
    --ts-pad: 18px;
    /* 14px, down from 28. The mask is the ONE soft edge left in the band, and
       it stays because it is the affordance, not decoration: it is what says
       "the row continues" when an item is sliced by the frame. Halved so it
       reads as a cut rather than a fade. */
    --ts-fade: 14px;

    /* ── surface. Nothing here names the ground colour: a hand-computed
       --ts-ground token drifted and showed a lighter box around the chevron.
       Every fill is transparent or a translucent white. The competition half is
       a raised surface, not a hue — white at 3.5%, flat. */
    --ts-panel: rgba(255, 255, 255, 0.035);
    --ts-panel-hi: rgba(255, 255, 255, 0.062);

    /* ── One text ramp, measured against the ground above. The mock's #5D7690
       and #3E5570 are absent: both fail AA at 10-12px. --ts-t4 is the floor. */
    --ts-t1: #E6EDF5;   /* the three competition figures, high-impact name    */
    --ts-t2: #C9D8E6;   /* the panel title, medium-impact name                */
    --ts-t3: #8CA3BA;   /* low-impact name                                    */
    --ts-t4: #7C93AB;   /* every micro-label and every timestamp              */

    /* ── accent. Amber carries exactly two meanings, both clock-bound: the
       prize, and the event that is imminent. Nothing else gets it. */
    --ts-amber: var(--yellow-primary);

    /* ── impact. Structure, not hue: high gets a rule and the brightest stop.
       Two channels, so it survives greyscale and colour blindness.
       Not opacity: --ts-t3 at 62% is 3.36:1 and fails AA at 12px. Not green:
       green means "money up" here. Not --yellow-primary: the prize owns it. */
    --ts-rule-high: var(--negative);

    display: flex;
    align-items: stretch;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: var(--ts-h);
    margin: 0;
    border: none;
    /* Top AND bottom hairline. The header has `border-bottom: none` (app.css:185),
       so nothing else draws the top edge and the band hung off the navbar.
       Same token as every other hairline: do not invent a second border colour. */
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    background: transparent;
    color: var(--ts-t2);
    overflow: hidden;
}

/* [hidden] has to win over the display:flex each half sets */
.tstrip [hidden] { display: none !important; }

.tstrip .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── 1 · COMPETITION, 60% ───────────────────────────────────────
   The whole panel is the control, and the CTA is only its label.
   A PERCENTAGE, not a min-width: "#7" becoming "Starts Monday" must not resize
   the panel and shove the ticker sideways. A percentage gives that at every
   viewport, with no magic number to re-measure when the copy changes. */
.ts-comp {
    flex: 0 0 60%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 var(--ts-pad);
    border-right: 1px solid var(--border-color);
    background: var(--ts-panel);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: background-color 0.16s ease;
}

.ts-comp:hover { background: var(--ts-panel-hi); }

.ts-comp:focus-visible {
    outline: 2px solid var(--ts-amber);
    outline-offset: -2px;
}

.cm-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.ts-trophy {
    flex: 0 0 auto;
    font-size: 0.8125rem;
    line-height: 1;
    color: var(--ts-amber);
}

.cm-title {
    font-size: 0.6875rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ts-t2);
    white-space: nowrap;
}

/* label beside value, on one line */
.cm-pair {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
}

.cm-lab {
    font-size: 0.625rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ts-t4);
}

.cm-pool,
.cm-time,
.cm-rank {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;   /* the countdown must not jitter */
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
}

.cm-pool { color: var(--ts-amber); }
.cm-time { color: var(--ts-t1); }
.cm-rank { color: var(--ts-t1); }
.cm-rank.comp-rank-live { color: var(--positive); }

/* "Join" / "Not ranked" / "Starts Monday" are words, not figures. Mono is for
   things that align down a column. */
.cm-rank.comp-rank-flat {
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ts-t3);
}

.cm-rule {
    flex: 0 0 auto;
    width: 1px;
    height: 22px;
    background: var(--border-color);
}

.cm-cta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;      /* the slack falls HERE, never mid-text */
    padding-left: 12px;
    font-size: 0.625rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ts-t3);
    white-space: nowrap;
}

.ts-comp:hover .cm-cta { color: var(--ts-t1); }

.ts-chev {
    flex: 0 0 auto;
    font-size: 0.625rem;
    line-height: 1;
    transition: transform 0.16s ease;
}

.ts-comp:hover .ts-chev { transform: translateX(2px); }

/* ── 2 · EVENTS, 40%, and the only thing that scrolls ────────────────── */
.ts-events {
    flex: 1 1 40%;
    min-width: 0;
    display: flex;
    align-items: stretch;
    position: relative;
}

/* Stated once for the whole row, not on every stamp. The imminent event needs
   none: a countdown has no timezone. */
.ts-utc {
    flex: 0 0 auto;
    align-self: center;
    padding: 0 8px 0 12px;
    font-family: var(--mono);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--ts-t4);
    opacity: 0.7;
}

/* Provenance, always on: a brief whose value is being current must show its
   stamp. Two weights in one slot, quiet by default and a chip when the brief
   cannot be read at face value. */
.ts-notice {
    flex: 0 0 auto;
    align-self: center;
    margin-left: 14px;
    white-space: nowrap;
    font-size: 0.5625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ts-notice[data-level="info"] {
    font-weight: 600;
    color: var(--ts-t4);
    opacity: 0.75;
}

.ts-notice[data-level="warn"] {
    padding: 3px 7px;
    border: 1px solid rgba(253, 224, 71, 0.35);
    border-radius: 4px;
    font-weight: 700;
    color: var(--ts-amber);
}

/* The arrows are absolutely positioned, so anchor them to the SCROLLER's box
   and not to .ts-events. Otherwise the left one sits on the UTC marker and the
   notice. */
.ts-scrollzone {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: stretch;
}

.ts-scroll {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;   /* the page must not rubber-band sideways */
    cursor: grab;
    /* NO scroll-snap. Proximity snapping pulls a 40px wheel tick straight back
       to the previous item, so the ticker only moves for the arrows and the arrow
       keys. The keyboard steps one item width and the buttons 80% of the viewport,
       so both land on a boundary anyway. */

    /* The fade IS the affordance, and it is continuous. A fixed arrow box moves the
       band's right edge whenever the overflow threshold is crossed. A mask costs no
       width. */
    --ts-fl: var(--ts-fade);
    --ts-fr: var(--ts-fade);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--ts-fl),
                        #000 calc(100% - var(--ts-fr)), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 var(--ts-fl),
                        #000 calc(100% - var(--ts-fr)), transparent 100%);
    transition: -webkit-mask-image 0.18s linear, mask-image 0.18s linear;
}

.ts-scroll::-webkit-scrollbar { display: none; }
.ts-scroll[data-at-start="true"] { --ts-fl: 0px; }
.ts-scroll[data-at-end="true"]   { --ts-fr: 0px; }
.ts-scroll[data-dragging="true"] { cursor: grabbing; }

.ts-scroll:focus-visible {
    outline: 2px solid var(--ts-amber);
    outline-offset: -3px;
    border-radius: 2px;
}

.ts-track {
    display: flex;
    align-items: stretch;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* No border-left. A hairline before every event is up to seven vertical rules
   in 56px. Separation is padding; emphasis is the impact rule, which only the
   high tier gets. */
.ts-ev {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 0 14px;
}

.ts-ev::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 16px;
    border-radius: 1px;
    background: transparent;
}

.ts-ev[data-impact="high"]::before { background: var(--ts-rule-high); }

.ev-when {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.625rem;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--ts-t4);
    white-space: nowrap;
}

/* The imminent event is the only RELATIVE time in the row, and the only amber
   one. Format carries the urgency; the colour just confirms it, and it is the
   same amber the prize wears because both are clock-bound. */
.ts-ev[data-next] .ev-when {
    color: var(--ts-amber);
    font-weight: 600;
}

/* The base case is the LOW tier. An event with no stated importance falls here
   too, never dimmer than the ramp's floor. */
.ev-name {
    font-size: 0.75rem;
    line-height: 1;
    font-weight: 400;
    color: var(--ts-t3);
    white-space: nowrap;
}

.ts-ev[data-impact="high"]   .ev-name { color: var(--ts-t1); font-weight: 600; }
.ts-ev[data-impact="medium"] .ev-name { color: var(--ts-t2); font-weight: 500; }

/* The source host, after the event name. Off the impact ramp on purpose:
   who published a release does not get louder because the release matters. */
.ev-src {
    margin-left: 8px;
    font-size: 0.625rem;
    font-weight: 400;
    color: var(--ts-t4);
    letter-spacing: 0.01em;
}

/* Arrows are SECONDARY to the fade, pointer-fine only, and real <button>s. */
.ts-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 26px;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    appearance: none;
    border: 0;
    padding: 0;
    /* Explicit, NOT omitted. Without the declaration the UA paints `buttonface`, a
       light grey box on the dark band. */
    background: transparent;
    cursor: pointer;
    font-size: 0.6875rem;
    color: var(--ts-t1);
    opacity: 0;
    transition: opacity 0.12s ease;
}

/* TRANSPARENT, so they take whatever is behind them. A painted scrim must name
   the ground colour, and a hand-computed copy of it drifts and shows as a
   lighter box. The mask already fades the content under the arrow. */
.ts-arrow[data-dir="prev"] { left: 0; }
.ts-arrow[data-dir="next"] { right: 0; }

@media (hover: hover) and (pointer: fine) {
    .ts-events:hover .ts-arrow:not([disabled]) { display: flex; opacity: 1; }
    .ts-arrow:not([disabled]):focus-visible {
        display: flex;
        opacity: 1;
        outline: 2px solid var(--ts-amber);
        outline-offset: -2px;
    }
}

/* ── 3 · EMPTY ─────────────────────────────────────────────────
   Same vertical centre and colour ramp as the populated state, so toggling
   never reflows. The horizon comes from run_meta.horizon_days.
   A LINE, not a hidden half: calendar-events.js keeps "nothing scheduled"
   distinct from "we could not load", and hiding on empty loses that. */
.ts-empty {
    flex: 1 1 40%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 var(--ts-pad);
}

.ev-none {
    font-size: 0.75rem;
    line-height: 1;
    color: var(--ts-t4);
}

/* ── 4 · RESPONSIVE ────────────────────────────────────────────
   Collapse order, most disposable first: CTA text, pool, micro-labels, then
   the split. Last standing: countdown, rank, next event. */
@media (max-width: 1439px) {
    .ts-comp { gap: 13px; }
    .cm-cta { font-size: 0; gap: 0; padding-left: 10px; }
    .cm-cta .ts-chev { font-size: 0.75rem; }
}

@media (max-width: 1279px) {
    .ts-comp { flex-basis: 55%; gap: 11px; padding: 0 14px; }
    .ts-events { flex-basis: 45%; }
    /* The pool pair and its divider. Hiding .cm-pool alone leaves its "POOL" label
       behind, labelling nothing.
       Target by class, NOT :first-of-type: that pseudo keys on the TAG and
       every child here is a <span>, so `.cm-pair:first-of-type` matched nothing and
       the panel overflowed at 1024 and ate the rank. */
    .cm-pair-pool,
    .cm-rule-pool { display: none; }
}

@media (max-width: 1023px) {
    /* The quiet stamp goes, the warning chip stays. "Old data" must still be said
       on a narrow screen. "How old" does not. */
    .ts-notice[data-level="info"] { display: none; }
    .cm-lab { display: none; }
    .cm-title { font-size: 0.625rem; letter-spacing: 0.08em; }
    .ts-ev { padding: 0 11px; }
}

/* Touch: no horizontal scroll region inside page chrome, it fights the
   browser's own edge-swipe. Competition and events each take a row. */
@media (max-width: 767px) {
    .tstrip {
        height: auto;
        flex-direction: column;
        align-items: stretch;
    }
    .ts-comp {
        flex: 0 0 auto;
        height: 40px;
        border-right: 0;
        border-bottom: 1px solid var(--border-color);
    }
    .cm-title { display: none; }
    .cm-lab { display: none; }
    /* The pool comes back: stacked, the panel has the whole width, so the
       desktop tax that dropped it no longer applies. */
    .cm-pair-pool { display: flex; }
    .cm-rule-pool { display: block; }
    .ts-events,
    .ts-empty { flex: 0 0 auto; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .ts-comp,
    .ts-chev,
    .ts-scroll,
    .ts-arrow { transition: none; }
    .ts-comp:hover .ts-chev { transform: none; }
}


/* ────────────────────────────────────────────────────────────────────────────────
   Numerals: Inter, with tabular figures (see --num)
   Tabular figures, not the mono face, stop a changing number reflowing its
   neighbours. Add `.num` to a new numeric element rather than a one-off rule.
   Mono stays for hex addresses and referral links, compared character by
   character.
   ──────────────────────────────────────────────────────────────────────────────── */
.num,
.spot-ticker-track,
.trade-spot-price,
.price-value,
.price-display,
.strike-price,
.strike-price-combined,
.current-strike-display,
.selected-strike-display,
#strike-slider-tooltip,
.market-price-label,
.amount-value,
.swap-card-balance,
.swap-amount-input,
.wp-balance-value,
.history-stat-value,
.options-table tbody td,
.payout-cell,
.payout-calc-input,
.payout-calc-result-value,
.payout-calc-range-labels,
.rank-badge {
    font-family: var(--num);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* Numerals, part 2 — value elements the JS writes into.
   These are ids, so they also out-rank any class rule that set a face earlier.
   Containers that mix a label with a number are deliberately NOT here — they
   would put the label in mono too. */
#option-cost,
#eth-balance-display,
#wp-usdc-balance,
#total-pnl,
#total-premium,
#total-trades,
#pnl-display-value,
#pos-pnl-display-value,
#pos-avg-pnl,
#payout-calc-cost,
#payout-calc-payout,
#payout-calc-pnl,
#payout-calc-price,
#payout-calc-min,
#payout-calc-max,
#payout-calc-countdown,
#selected-strike-tooltip,
#current-strike-combined,
#alert-price,
#adjusted-leverage-display,
#swap-amount-display,
#spot-ticker-floating-tooltip,
#positions-spot-ticker-track,
#mobile-amount-display,
#mobile-calc-cost,
#mobile-calc-payout,
#mobile-calc-price,
#mobile-info-leverage,
#mobile-info-payout,
#mobile-usdc-balance {
    font-family: var(--num);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* ==========================================================================
   Broadsheet layout. Desktop only: every rule sits inside a min-width guard,
   so none of it reaches the mobile build.
   ========================================================================== */

/* Both new controls are hidden at base so they cannot appear on phones,
   where the ticket column is not used at all. */
#trade-positions-block,
.ticket-reopen-tab {
    display: none;
}

@media (min-width: 992px) {

    /* ---- 1. Three boxes in one grid --------------------------------------
         rail | trade   | ticket
         rail | positions| ticket      <- ticket spans both rows
       The frame itself carries no border; each box carries its own, so the
       page reads as separate containers instead of one nested outline. */
    #trade-section .professional-asset-header {
        border: none;
        padding: 0;
        overflow: visible;
    }

    .trade-unified-layout {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-rows: clamp(420px, calc(100vh - 230px), 760px) auto;
        column-gap: 0;
        row-gap: 0.75rem;
        height: auto;
        overflow: visible;
        position: relative;
    }

    .trade-unified-layout .asset-sidebar {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .trade-unified-layout .trade-panel-main {
        grid-column: 2;
        grid-row: 1;
        min-height: 0;
    }

    .trade-unified-layout #trade-positions-block {
        grid-column: 2;
        grid-row: 2;
        display: block;
    }

    .trade-unified-layout .trade-panel-preview {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    /* The box treatment. Transparent fills so the existing panel tints show
       through: only the hairline and the radius are added. */
    .trade-unified-layout .trade-panel-main,
    .trade-unified-layout #trade-positions-block,
    .trade-unified-layout .trade-panel-preview {
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        overflow: hidden;
    }

    /* The block still carries Bootstrap's `row mt-4`, whose negative gutters
       and top margin fight the grid. The grid's row-gap does that spacing
       now, so both are zeroed here rather than by editing the markup. */
    .trade-unified-layout #trade-positions-block {
        margin: 0;
        padding: 0.85rem 1rem 1rem;
    }

    /* ---- 2. The collapsible ticket ---------------------------------------
       Collapsed is the DEFAULT: the market surface owns the width until the user
       picks a leg. Width animates, not the grid track, because track interpolation
       is not reliable across browsers.
       Collapsed draws no border and no margin, so it leaves no empty strip. */
    .trade-unified-layout .trade-panel-preview {
        width: 0;
        margin-left: 0;
        opacity: 0;
        border-color: transparent;
        pointer-events: none;
        transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1),
                    margin-left 280ms cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 180ms ease,
                    border-color 180ms ease;
    }

    .trade-unified-layout.ticket-open .trade-panel-preview {
        width: 420px;
        margin-left: 0.75rem;
        opacity: 1;
        border-color: var(--border-color);
        pointer-events: auto;
    }

    /* The ticket is full height now, so it scrolls inside itself. */
    .trade-unified-layout .trade-panel-preview .trade-preview-sidebar {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* Reopen control: a small pill on the trade box's right edge, shown only
       while the ticket is collapsed. Absolutely positioned so it is not a
       grid item and leaves no track behind it. */
    .ticket-reopen-tab {
        display: flex;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 20px;
        height: 58px;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border-color);
        border-right: none;
        border-radius: 8px 0 0 8px;
        background: var(--secondary);
        color: rgba(255, 255, 255, 0.55);
        cursor: pointer;
        padding: 0;
        font-size: 0.7rem;
        z-index: 3;
        transition: color 0.2s ease, background 0.2s ease;
    }

    .ticket-reopen-tab:hover {
        color: #fff;
        background: var(--card-bg);
    }

    /* The word was noise at this size. The chevron carries it. */
    .ticket-reopen-word {
        display: none;
    }

    .trade-unified-layout.ticket-open .ticket-reopen-tab {
        display: none;
    }

    /* Collapse control in the ticket header. */
    .ticket-collapse-btn {
        margin-left: auto;
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: transparent;
        color: rgba(255, 255, 255, 0.5);
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.8125rem;
        transition: color 0.2s ease, background 0.2s ease;
    }

    .ticket-collapse-btn:hover {
        color: #fff;
        background: var(--secondary);
    }

    /* ---- 3. Amount, blended into the ticket ------------------------------
       The base rule gives it a blue wash and a 12px radius, which read as a card
       inside a card. Inside the ticket it is a plain section. */
    .trade-preview-card .select-amount-section {
        background: none;
        border-radius: 0;
        margin-top: 0.5rem;
        padding: 0.65rem 0 0;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .trade-preview-card .select-amount-section .amount-prompt {
        display: none;
    }

    /* The value row keeps a faint field so the number still reads as an
       input, but loses the heavy chip look. */
    .trade-preview-card .amount-header-row {
        background: rgba(255, 255, 255, 0.03);
        padding: 0.35rem 0.55rem;
    }

    /* ---- 4. Positions / History tabs ------------------------------------- */
    .trade-strip-tabs {
        display: flex;
        gap: 0;
        align-items: stretch;
        border-bottom: 1px solid var(--border-color);
        margin-bottom: 0.75rem;
    }

    .trade-strip-tab {
        padding: 0.45rem 0.85rem;
        font-size: 0.8125rem;
        font-weight: 500;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        border: none;
        background: transparent;
        color: rgba(255, 255, 255, 0.55);
        cursor: pointer;
        transition: color 0.2s ease, border-color 0.2s ease;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
    }

    .trade-strip-tab:hover {
        color: rgba(255, 255, 255, 0.8);
    }

    .trade-strip-tab.active {
        color: #fff;
        font-weight: 700;
        /* --primary, NOT --accent. --accent (#FDE047) is the gold the top strip
           reserves for the prize and an imminent event. The navbar's active indicator
           is --primary and sits ~100px above this one. */
        border-bottom-color: var(--primary);
    }

    /* ======================================================================
       THE TRADE-PAGE STRIP, desktop reading pass
       Every rule below must stay scoped to `#trade-positions-block`.
       `.history-table` names three tables and `.user-positions-table` two, so a
       bare class name here restyles the Positions page too.
       ====================================================================== */

    /* --- 0 · THE ALIGNMENT BUG (trade strip only) ------------------------
       The row emits 10 cells against 9 headers, so every label from Type onward
       printed over the wrong column. Hide the extra cell rather than add a
       header: it repeats Type, Strike and Time Left. Hidden, not deleted — the
       phone card and the Positions page both use it. */
    #trade-positions-block #trade-positions-container > tr > td.col-belief {
        display: none;
    }

    /* CURRENT PRICE, hidden on the strip only. The value is captured once when the
       position object is built (app.js:886).
       The PNL cell comes from that SAME captured price (app.js:957). Hiding
       the price hides the evidence of staleness, it does not fix it. */
    #trade-positions-block #trade-pane-positions thead th.col-current-price,
    #trade-positions-block #trade-positions-container > tr > td.col-current-price {
        display: none;
    }

    /* --- 1 · Numerals line up -------------------------------------------
       Every figure here is meant to be compared DOWN the column. Left-aligned
       proportional digits put the decimal point in a different place on every
       row, which is why 0.01037 and 0.349262 could not be ranked by eye. */
    #trade-positions-block thead th.col-strike,
    #trade-positions-block thead th.col-settlement,
    #trade-positions-block thead th.col-size,
    #trade-positions-block thead th.col-cost,
    #trade-positions-block thead th.col-current-price,
    #trade-positions-block thead th.col-premium,
    #trade-positions-block thead th.col-payout,
    #trade-positions-block thead th.col-pnl,
    #trade-positions-block thead th.col-time-left,
    #trade-positions-block tbody > tr > td.col-strike,
    #trade-positions-block tbody > tr > td.col-settlement,
    #trade-positions-block tbody > tr > td.col-size,
    #trade-positions-block tbody > tr > td.col-cost,
    #trade-positions-block tbody > tr > td.col-current-price,
    #trade-positions-block tbody > tr > td.col-premium,
    #trade-positions-block tbody > tr > td.col-payout,
    #trade-positions-block tbody > tr > td.col-pnl,
    #trade-positions-block tbody > tr > td.col-time-left {
        text-align: right;
        font-variant-numeric: tabular-nums;
        font-feature-settings: 'tnum' 1;
    }

    /* --- 2 · The asset sub-line repeats three other columns --------------
       HIDDEN, not deleted: the phone card puts that sub-line inside the asset
       badge, the only place the premium appears (mobile.css:2679). */
    #trade-positions-block tbody > tr > td.col-asset .position-cost-label {
        display: none;
    }

    /* --- 3 · Two levels of emphasis, not five ---------------------------
       PNL is the cell the reader came for, so it is the only one with weight.
       `.table` is deliberate: the striped rule paints odd rows at (0,2,2), so a
       lighter selector loses on odd rows and reads as a two-colour stripe. */
    #trade-positions-block .table > tbody > tr > td {
        font-weight: 400;
        color: var(--text-secondary);
        font-size: var(--font-size-base);
        padding-top: 0.7rem;
        padding-bottom: 0.7rem;
    }

    #trade-positions-block .table > tbody > tr > td.col-asset strong {
        font-weight: 600;
        color: var(--text-primary);
    }

    #trade-positions-block .table > tbody > tr > td.col-pnl {
        font-weight: 600;
    }

    /* PNL in the app's OWN red and green. `.text-danger` / `.text-success` are
       Bootstrap's #dc3545 / #198754, which appear nowhere else in this theme.
       !important is required: Bootstrap declares those utilities !important. */
    #trade-positions-block .table > tbody > tr > td.col-pnl.text-danger,
    #trade-positions-block .table > tbody > tr > td.col-pnl-usd.text-danger {
        color: var(--negative) !important;
    }

    #trade-positions-block .table > tbody > tr > td.col-pnl.text-success,
    #trade-positions-block .table > tbody > tr > td.col-pnl-usd.text-success {
        color: var(--positive) !important;
    }

    #trade-positions-block .table > tbody > tr > td.col-pnl.text-muted {
        color: var(--text-muted) !important;
    }

    /* The value and the percentage were adjacent spans with nothing between
       them, so the cell read "-$0.06-100.00%" as one run of glyphs. */
    #trade-positions-block tbody > tr > td.col-pnl .pnl-pct {
        margin-left: 0.4em;
        font-weight: 400;
        opacity: 0.75;
    }

    /* --- 4 · Type band, on the same tokens as the PNL --------------------
       A put band and a red loss then read as the same direction. Ranger takes
       --ranger-purple. The phone keys off this same attribute (mobile.css:2688),
       so this reuses an encoding the app already has. */
    #trade-positions-block tbody > tr {
        border-left: 3px solid transparent;
    }

    #trade-positions-block tbody > tr[data-option-type="call"] {
        border-left-color: var(--positive);
    }

    #trade-positions-block tbody > tr[data-option-type="put"] {
        border-left-color: var(--negative);
    }

    #trade-positions-block tbody > tr[data-option-type="ranger"] {
        border-left-color: var(--ranger-purple);
    }

    /* --- 5 · The header is a different register from the rows ------------ */
    /* This strip and the Portfolio panes render the same rows through the
       same builders, so the header must match: 600 weight, not 700 — 700
       is reserved for the one figure that answers a card (`.t-hero` /
       `.t-fig`), and a column header is a label. Size and tracking read
       from the same tokens as `.t-col`, so the two surfaces cannot drift
       apart. */
    #trade-positions-block thead > tr > th {
        padding-top: 0.85rem;
        padding-bottom: 0.85rem;
        font-size: var(--fs-micro);
        font-weight: 600;
        letter-spacing: var(--tr-caps);
        color: var(--text-muted);
    }

    /* --- 6 · No glow on the countdown -----------------------------------
       `.countdown` is declared twice (app.css:3707 and :3766). The second overrides
       everything except `text-shadow` and `animation: pulse-glow`, which survive by
       omission. Killed HERE, on the strip only, so the Positions page and the phone
       keep what they had. */
    #trade-positions-block tbody > tr > td.col-time-left .countdown {
        text-shadow: none;
        animation: none;
        font-size: var(--font-size-base);
        font-weight: 600;
        letter-spacing: 0;
    }

    /* --- 7 · "View Option" is a link out, so it takes the link mark ------
       Two icons ship in the markup and each context shows one, because the same row
       HTML goes to the Positions page (app.js:737-740). The label stays in the DOM
       and is hidden visually: an icon-only control needs an accessible name. */
    #trade-positions-block .view-option-btn .view-option-icon-doc {
        display: none;
    }

    #trade-positions-block .view-option-btn {
        border: none;
        background: none;
        padding: 0.25rem;
        color: var(--text-muted);
    }

    #trade-positions-block .view-option-btn:hover {
        color: var(--primary);
        background: none;
    }

    #trade-positions-block .view-option-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    /* ======================================================================
       THE FOOT OF THE TRADE PAGE: one spacer, not three
       Three rules stacked to 106px of dead ground, one of them a 56px navbar
       height this page does not have (it measures 43px). One spacer now, with
       one job: clear the 28px fixed status bar. It cannot reach zero — below
       ~900px of content the page is shorter than the screen.
       ====================================================================== */
    .main-layout {
        min-height: 0;
    }

    #trade-section.content-section {
        padding-bottom: 0;
        /* 28px = the fixed status bar, + 8px of air. Nothing else. */
        margin-bottom: 36px;
    }

    /* 5 · A badge marks the exception, not the rule.
       Four statuses exist (app.html:1616), so the column stays. `settled` is the
       ordinary end state and printed a green pill on every finished row, in the
       same green the P&L uses: a settled LOSS showed a green badge beside a red
       number. Settled now reads as quiet text. */
    .history-table tbody td.col-status .status-badge.status-settled {
        background: none;
        padding: 0;
        color: var(--text-muted);
        font-weight: 400;
    }
}

/* ==========================================================================
   Square grid. No radius, one grid with no gutters, each divider a hairline
   on one cell. Appended last, so it wins at equal specificity.
   ========================================================================== */

@media (min-width: 992px) {

    /* ---- 1. Square ------------------------------------------------------
       The three shape vars go to 0. --border-radius-circle is NOT touched:
       the strike, amount and payout slider thumbs read it, and a square thumb
       is unusable. */
    :root {
        --border-radius: 0;
        --border-radius-pill: 0;
        --border-radius-header: 0;
    }

    /* The sweep. It cannot reach the thumb pseudos, so every thumb keeps its
       radius. `*` is document-global, so the other views and the chat widget are
       excluded; the navbar and modals are not, they frame this page.
       Keep the exclusion inside :where(): a bare :not(#id *) inherits id
       specificity and beats the content allowlist below. */
    /* round 13 follow-up: the v2 body (body.v2, the desktop redesign in
       revamp.css) owns its own radii — the sweep no longer reaches it, so
       v2 rules need no !important to keep a corner. :where() keeps the
       guard at zero specificity like the section exclusions. */
    :where(body:not(.v2)) *:not(:where(#scoreboard-section, #scoreboard-section *,
                 #positions-section, #positions-section *,
                 #history-section, #history-section *,
                 #referral-section, #referral-section *,
                 .trollbox-widget, .trollbox-widget *)),
    :where(body:not(.v2)) *:not(:where(#scoreboard-section, #scoreboard-section *,
                 #positions-section, #positions-section *,
                 #history-section, #history-section *,
                 #referral-section, #referral-section *,
                 .trollbox-widget, .trollbox-widget *))::before,
    :where(body:not(.v2)) *:not(:where(#scoreboard-section, #scoreboard-section *,
                 #positions-section, #positions-section *,
                 #history-section, #history-section *,
                 #referral-section, #referral-section *,
                 .trollbox-widget, .trollbox-widget *))::after {
        border-radius: 0 !important;
    }

    /* The allowlist. Each of these is drawn as a circle, and squaring it is a
       visual defect, not a style change. Any selector here has specificity
       above the universal selector, so it wins against the sweep. */
    .connection-dot,
    .wp-status-dot,
    .status-dot,
    .typing-dot,
    td.col-asset .position-asset-logo,
    .positions-inner-content .position-asset-logo,
    .ticker-icon,
    .swap-arrow-circle,
    .modal-summary-icon,
    .trade-maintenance-preview-icon,
    .trollbox-toggle,
    .chat-notification,
    .dial-circle,
    .dial-center,
    /* Keep the live spot marker circular when reduced motion squares UI surfaces. */
    .tc-tv-spot-glow,
    .tc-tv-spot-glow::after,
    .spinner-border,
    .spinner-border-sm,
    .spinner-grow {
        border-radius: 50% !important;
    }

    /* ---- 1b. The content allowlist --------------------------------------
       The sweep is right about the shell, wrong about what is inside it: a
       radius gaps a panel junction, but a select or a button wants one. Both
       rules are !important, because the universal rule is. Three token values,
       no fourth. */

    /* --r-input: fields, small blocks, tabs. */
    .alp-sel,
    .alp-pop,
    .alp-input,
    .alp-price-field,
    .alp-notif,
    .alp-feedback,
    .alp-notif-btn,
    .alp-item,
    .alp-test,
    .wp-avatar,
    .wp-action-icon,
    .wp-disconnected-icon,
    /* ---- the three wallet modals (Swap, Deposit, Fund with Card) ----
       Same shell, same corners. Without these the sweep squared every control
       INSIDE the modal while the modal itself was round, which reads as two
       different design systems in one dialog. */
    .odette-modal-content .odette-modal-header-icon,
    .odette-modal-content .odette-modal-close,
    .odette-dropdown-menu,
    .deposit-network-badge,
    .deposit-copy-btn,
    .swap-card-header,
    /* Both chips, not just the button one. The FROM chip is a dropdown and the
       TO chip is a fixed label, but they sit at the same height in facing
       cards, so a square TO beside a rounded FROM reads as a defect. */
    .swap-token-btn,
    .swap-token-display,
    .swap-quick-chip,
    /* NOT .swap-arrow-circle — it is already in the circle allowlist above,
       and a later entry here at --r-input would square a control whose whole
       job is to be round. */
    .funding-select-btn,
    .navbar-nav .nav-link,
    .amount-preset,
    .ticket-tab,
    .ticket-pane-head,
    .ticket-readouts,
    .ticket-stats,
    /* Keep the asset picker controls rounded inside the desktop reset. */
    .asset-picker-btn,
    .asset-picker-input,
    .asset-picker-opt,
    /* Keep chart mode, timeframe and strike controls rounded. */
    .view-link,
    .tc-tv-tool,
    .tc-tv-book-leg {
        border-radius: var(--r-input) !important;
    }

    /* --r-card: a block that holds other blocks. */
    .alp-create,
    .hdr-pop,
    /* The two header controls. The sweep squares the page's structural
       junctions; these are free-standing controls sitting on the header band,
       not cells meeting on a shared hairline, so they take the card corner. */
    .hdr-pill,
    .header-wallet-pill,
    .wallet-cta,
    /* The selected-asset tile floats INSIDE the rail; it is not a rail cell
       meeting a neighbour on a shared hairline, so the sweep must not square
       it. */
    .asset-slide-indicator,
    .odette-modal-content,
    .deposit-addr-card,
    .deposit-warning,
    .funding-dest-card,
    .swap-card,
    .swap-panel,
    .odette-btn-primary,
    .odette-btn-secondary,
    .funding-field,
    .wp-balance-card,
    .wp-action-btn,
    .wp-connect-btn,
    .wp-disconnect-btn,
    .ticket-amt-field,
    .trade-preview-profit-statement,
    .trade-actions .btn,
    .asset-picker-pop,
    /* Keep the chart surface rounded inside the desktop reset. */
    .tc-tv-wrap,
    /* Keep the strike card rounded inside the desktop reset. */
    .strike-section-box,
    #tv-chart-container {
        border-radius: var(--r-card) !important;
    }

    /* --r-pill: the shape IS the affordance. */
    .preview-option-type,
    .tc-tv-hover-label {
        border-radius: var(--r-pill) !important;
    }

    /* ---- 2. One grid ----------------------------------------------------
         rail | market  | ticket
         rail | strip   | ticket        <- the ticket spans both rows
       Row 1 auto, row 2 fixed, so the strip holds one height whatever the ticket
       does. Height comes from content, so the PAGE scrolls and no column has an
       inner scrollbar. No side border: the surface runs to both page edges. */
    .trade-unified-layout {
        --pos-strip-h: 260px;
        --ticket-w: 460px;
        /* FLOOR only. syncTicketHeight() in ui_interactions.js measures the real height
           and writes it inline, because a ranger leg, a funds warning and the confirm
           step all change it. This applies before the first measurement, and if
           ResizeObserver is missing. */
        --ticket-min-h: 880px;
        display: grid;
        /* TWO tracks, not three. The ticket is out of flow, see below. */
        grid-template-columns: auto minmax(0, 1fr);
        /* The strip takes 260px as its FLOOR and grows into any space left
           over. That is what stops a hole appearing above it: the leftover
           becomes table, not nothing. */
        grid-template-rows: auto minmax(var(--pos-strip-h), 1fr);
        height: auto;
        column-gap: 0;
        row-gap: 0;
        border: 1px solid var(--border-color);
        border-left: 0;
        border-right: 0;
        /* visible, not hidden: the asset and "get more" dropdowns open past
           the panel edge. Each cell clips itself instead. */
        overflow: visible;
        position: relative;
    }

    .trade-unified-layout .asset-sidebar {
        grid-column: 1;
        grid-row: 1 / span 2;
        border-right: 1px solid var(--border-color);
        box-shadow: none;
    }

    .trade-unified-layout .trade-panel-main {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        height: auto;
        /* visible, not hidden: this column must not scroll inside itself. */
        overflow: visible;
    }

    .trade-unified-layout #trade-positions-block {
        grid-column: 2;
        grid-row: 2;
        border-top: 1px solid var(--border-color);
    }

    /* THE DEAD SPACE ABOVE THE POSITIONS STRIP.
       A spanning item gives its height to the tracks it spans, so the ticket
       forced row 1 to ~700px where the market column needs ~400px. The ticket is
       out of flow now. The market cells take padding-right, and that animates. */
    .trade-unified-layout .trade-panel-preview {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 0;
        border-left: 1px solid var(--border-color);
        /* Sunken, one step darker than the page. It separates the execution rail from
           the market surface without a second border, and it is opaque: the strip's
           border-top runs the full width of its padded box, so a transparent rail would
           show that line through the ticket. */
        background: var(--panel-sunken);
        min-height: 0;
        /* hidden, NOT auto. The ticket never scrolls inside itself, the page does.
           --ticket-min-h above guarantees it fits. */
        overflow: hidden;
        z-index: 2;
    }

    /* The squeeze. The ticket does not push the market column any more, so
       the column has to give way to it. */
    .trade-unified-layout .trade-panel-main,
    .trade-unified-layout #trade-positions-block {
        padding-right: 0;
        transition: padding-right 280ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .trade-unified-layout.ticket-open .trade-panel-main,
    .trade-unified-layout.ticket-open #trade-positions-block {
        padding-right: var(--ticket-w);
    }

    /* ONLY while the ticket is open. Applying it always was the dead space
       under the slider with the ticket CLOSED: the page was held at 820px
       for a column that needed 450px, and the difference had nowhere to go. */
    .trade-unified-layout.ticket-open {
        min-height: var(--ticket-min-h);
    }

    /* The cell borders above replace the panels' full box border, so the other
       three sides must go — including the ticket's, or a line draws down its
       right edge when open. */
    .trade-unified-layout .trade-panel-main,
    .trade-unified-layout .trade-panel-preview {
        border-top: 0;
    }

    .trade-unified-layout .trade-panel-main,
    .trade-unified-layout #trade-positions-block,
    .trade-unified-layout .trade-panel-preview {
        border-right: 0;
        border-bottom: 0;
    }

    /* The strip keeps only the one line that divides it from the market. */
    .trade-unified-layout .trade-panel-main,
    .trade-unified-layout #trade-positions-block {
        border-left: 0;
    }

    /* The collapse animation. Collapsed, the panel is 0px wide and draws
       nothing. */
    .trade-unified-layout .trade-panel-preview {
        margin-left: 0;
        opacity: 0;
        border-left-color: transparent;
        pointer-events: none;
        transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 180ms ease,
                    border-color 180ms ease;
    }

    /* Collapsed, the content is taken out of layout. It no longer has to be
       (the panel is out of flow now), but it keeps the TradingView iframe
       from living behind a 0px-wide clip, and it is what makes the reference
       chart "follow the collapse". */
    .trade-unified-layout:not(.ticket-open) .trade-panel-preview > * {
        display: none;
    }

    /* The content keeps the OPEN width at all times, and the panel clips it.
       Without this it would re-wrap on every frame of the 280ms open. */
    .trade-panel-preview .trade-preview-sidebar,
    .trade-panel-preview #price-chart {
        width: var(--ticket-w);
    }

    .trade-unified-layout.ticket-open .trade-panel-preview {
        width: var(--ticket-w);
        margin-left: 0;
        opacity: 1;
        border-left-color: var(--border-color);
        pointer-events: auto;
    }

    /* ---- 3. Fewer containers -------------------------------------------
       Bootstrap's page chrome around the grid: keep the elements, drop the
       gutters and the max-width so the grid can reach both edges. */
    #trade-section > .container {
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }

    #trade-section > .container > .row {
        margin-left: 0;
        margin-right: 0;
    }

    #trade-section > .container > .row > [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }

    #trade-section .professional-asset-header,
    .asset-selector-wrapper {
        border: none;
        background: transparent;
        padding: 0;
        overflow: visible;
    }

    /* A single-child wrapper with no skin. display:contents removes the box
       and leaves the child as a direct flex item of .trade-panel-main, which
       is what the height chain needs. */
    .trade-panel-main-inner {
        display: contents;
    }

    .trade-panel-main .trade-content {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-width: 0;
        height: auto;
        /* The market column shows everything and lets the page scroll. */
        overflow: visible;
    }

    /* The dead divider element. The ticket's left border is the divider. */
    .trade-vertical-divider {
        display: none;
    }

    /* The ticket cell is the panel. A filled, bordered card inside it is the
       nested container the brief asks to remove. */
    .trade-panel-preview .trade-preview-card {
        background: none;
        border: none;
        box-shadow: none;
    }

    /* Three class names on purpose: the earlier overflow-y rule is (0,3,0), so
       a two-class override loses wherever it sits and the ticket keeps its own
       scrollbar. */
    .trade-unified-layout .trade-panel-preview .trade-preview-sidebar {
        flex: 0 0 auto;
        height: auto;
        min-height: 0;
        /* The ticket never scrolls inside itself. The page scrolls, and
           syncTicketHeight() makes the page tall enough. */
        overflow: visible;
        padding: 0;
    }

    /* ---- 4. Positions / History, fixed height ---------------------------
       The strip used to sit in an `auto` grid row, so it grew with the table
       and moved when the ticket opened or closed. Its row is a fixed track
       now, and the pane scrolls inside it. The boundary cannot move. */
    .trade-unified-layout #trade-positions-block {
        display: flex;
        flex-direction: column;
        margin: 0;
        /* Long-hand, NOT `padding: 0`. The shorthand would reset the
           padding-right that makes room for the open ticket, and the strip
           would run underneath it. */
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 0;
        min-height: 0;
        overflow: hidden;
    }

    #trade-positions-block > .col-12 {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        padding: 0;
    }

    #trade-positions-block .user-positions-table-container {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        border: none;
        background: none;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    #trade-positions-block .trade-strip-tabs {
        flex: 0 0 auto;
        margin-bottom: 0;
        padding: 0 0.75rem;
    }

    #trade-positions-block .trade-strip-pane {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        padding: 0 0.75rem;
    }

    /* Rows scroll under the labels, so the labels have to stay put. */
    #trade-positions-block .trade-strip-pane thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--background);
    }

    /* The way out of the five-row preview. Full width and centred, so it
       reads as the end of the list rather than as a sixth row. */
    .strip-more-row td {
        padding: 0 !important;
        border-bottom: 0 !important;
        background: none !important;
    }

    .strip-more-btn {
        display: block;
        width: 100%;
        padding: 0.55rem;
        border: 0;
        border-top: 1px solid var(--border-color);
        background: none;
        font-family: var(--sans);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        color: var(--text-muted);
        cursor: pointer;
        transition: color 0.15s ease, background 0.15s ease;
    }

    .strip-more-btn:hover {
        color: var(--text-primary);
        background: rgba(255, 255, 255, 0.04);
    }

    /* ---- 5. Price chart, in the main column -----------------------------
       The chart is the market, so it takes the space under the strike picker
       and grows with the column. min-height keeps TradingView off zero. */
    /* ---- 5a. Reference chart, foot of the ticket rail -------------------
       A direct child of .trade-panel-preview, so the collapse rule hides it with
       the ticket. Fixed width so nothing re-wraps mid-slide, and a definite
       height, because TradingView renders nothing at 0. */
    /* THE GAP UNDER THE BUY BUTTON. The rail spans both rows, so it is taller
       than the ticket's content. The sidebar is content-height now and the CHART
       takes the slack. */
    /* The chart takes what is left in the rail. 360px floor, not 160px: the
       widget spends ~120px on its own chrome, so 160px left ~40px of candles.
       Keep in step with TICKET_CHART_MIN in ui_interactions.js. */
    .trade-panel-preview #price-chart {
        flex: 1 1 auto;
        min-height: 360px;
        height: auto;
        display: flex;
        flex-direction: column;
        border-top: 1px solid var(--border-color);
    }

    .trade-panel-preview #price-chart #tv-chart-container {
        flex: 1 1 auto;
        width: 100%;
        height: auto;
        min-height: 0;
    }

    /* ---- 6. Payout calculator, inside the ticket ------------------------
       Permanent, directly above the buy button: it answers "what do I get" as the
       size is entered, so it must not be behind a tab. */
    .trade-preview-card .ticket-calc {
        display: block;
        margin-top: 0.65rem;
        padding-top: 0.65rem;
        border-top: 1px solid var(--border-color);
        background: none;
    }

    .ticket-calc-title {
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--text-muted);
        margin-bottom: 0.5rem;
    }

    /* The scenarios table is the one thing still gated on .active: it belongs to
       the confirm step only. */
    .trade-preview-card #settlement-scenarios {
        padding: 0.7rem 0 0;
        border-top: 1px solid var(--border-color);
        margin-top: 0.65rem;
    }
}

/* ==========================================================================
   What stays round. The Trollbox is a floating window, not a grid panel.
   Literal values, not `revert`: `revert` goes to the browser default, not to
   the earlier value.
   ========================================================================== */

/* ==========================================================================
   The sweep no longer reaches these four roots, so each needs only its
   variables back. Replaces a carve-out that forced a flat 16px on elements
   designed at 12, 8, 6 and 4px.
   ========================================================================== */
@media (min-width: 992px) {

    #scoreboard-section,
    #positions-section,
    #history-section,
    .trollbox-widget {
        --border-radius: 16px;
        --border-radius-pill: 50px;
        --border-radius-header: 16px 16px 0 0;
    }
}

/* ==========================================================================
   Chart provenance. The line is not the number that pays: line = Binance
   klines, payout = Chainlink 30 minute TWAP at expiry.
   ========================================================================== */

.chart-source-note {
    margin: 0.35rem 0 0;
    padding: 0 0.25rem;
    font-size: 0.6875rem;
    line-height: 1.4;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

/* ==========================================================================
   The trade ticket, two zones. One long column put the buy button below the
   fold at 900px.
     DECISION   identity · "You believe..." · amount · 2x2 stats · CTA
     ANALYSIS   PAYOFF | PRICE, below the CTA, free to be any height
   ========================================================================== */

/* Kept in the DOM, taken off the screen. Every id here is still read or
   written elsewhere, and `display:none` would blind code that measures. */
/* updateAmountSliderFill() paints a gradient track on the size input. It
   cannot be seen from here, but the no-gradient rule stays a fact. */
.ticket-offscreen input[type="range"] {
    background: none !important;
}

.ticket-offscreen {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (min-width: 992px) {

    /* ---- 1 · identity line ---------------------------------------------- */
    .trade-preview-card .preview-card-identity {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.6rem 0.75rem;
        margin: 0;
        border-bottom: 1px solid var(--border-color);
    }

    .trade-preview-card .preview-card-identity .preview-asset-logo {
        width: 18px;
        height: 18px;
    }

    /* The tag carries the side, so the identity line reads in one glance. */
    .trade-preview-card .preview-option-type {
        flex: 0 0 auto;
        padding: 3px 8px;
        /* Inter, like the price beside it: the tag and the price are one line and must
           read as one. */
        font-family: var(--num);
        font-size: 0.6875rem;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.05em;
        color: var(--text-muted);
        background: rgba(255, 255, 255, 0.06);
        border-radius: var(--r-pill);
    }

    .trade-preview-card .preview-option-type.is-put {
        color: var(--negative);
        background: rgba(248, 113, 113, 0.14);
    }

    .trade-preview-card .preview-option-type.is-call {
        color: var(--positive);
        background: rgba(134, 239, 172, 0.14);
    }

    .trade-preview-card .preview-option-type.is-range {
        color: #c4b5fd;
        background: rgba(168, 85, 247, 0.16);
    }

    .trade-preview-card .preview-card-identity .preview-asset-label {
        font-family: var(--num);
        font-size: 0.9375rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        font-variant-numeric: tabular-nums;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .trade-preview-card .preview-card-identity .ticket-collapse-btn {
        margin-left: 0;
        width: 26px;
        height: 26px;
    }

    /* ---- 2 · decision zone ---------------------------------------------- */
    .ticket-decision {
        display: flex;
        flex-direction: column;
        gap: 0.7rem;
        padding: 0.75rem;
    }

    /* The sentence. Two lines at 15px, not five lines at 28px: it is the
       ticket's premise, not its headline, and five lines of it pushed the
       button off the screen on its own. Flat fill, hairline, no gradient. */
    .trade-preview-card .trade-preview-profit-statement {
        margin: 0;
        padding: 0.65rem 0.75rem;
        font-family: var(--sans, inherit);
        font-size: 0.9375rem;
        font-weight: 500;
        line-height: 1.5;
        text-align: left;
        text-wrap: pretty;
        color: rgba(255, 255, 255, 0.72);
        background: rgba(255, 255, 255, 0.025);
        border: 1px solid rgba(253, 224, 71, 0.18);
        border-radius: var(--r-card);
    }

    .trade-preview-card .trade-preview-profit-statement .profit-highlight {
        font-family: var(--num);
        font-size: 0.9375rem;
        font-weight: 700;
        color: var(--accent);
        font-variant-numeric: tabular-nums;
    }

    /* ---- amount ---------------------------------------------------------- */
    .trade-preview-card .select-amount-section {
        margin: 0;
        padding: 0;
        border-top: 0;
        background: none;
    }

    /* The header row is a label and a balance now. The number moved into the field
       below it, so the row loses the fill it needed. */
    .trade-preview-card .amount-header-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.5rem;
        margin: 0 0 0.4rem;
        padding: 0;
        background: none;
    }

    .trade-preview-card .amount-header-row .amount-label {
        font-family: var(--sans);
        font-size: 0.625rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-muted);
    }

    .trade-preview-card .amount-header-row .amount-right {
        display: flex;
        flex-direction: row;   /* the base rule stacks it; one line here */
        align-items: baseline;
        gap: 0.4rem;
    }

    .trade-preview-card .amount-balance-text {
        font-family: var(--num);
        font-size: 0.625rem;
        color: rgba(255, 255, 255, 0.35);
        font-variant-numeric: tabular-nums;
    }

    /* "Get more" stays. The reference drops it, but the CTA says NEED x MORE
       USDC and this is the only funding path inside the ticket. */
    .trade-preview-card .get-more-inline {
        padding: 0;
        font-size: 0.625rem;
        color: var(--primary);
        text-decoration: none;
    }

    .ticket-amt-field {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        /* Generous, and the same in every state. The number is the largest
           type in the ticket, so a tight box makes it look cramped and makes
           the red state look like an alarm rather than a note. */
        padding: 0.75rem 0.9rem;
        background: var(--background);
        border: 1px solid var(--border-color);
        border-radius: var(--r-card);
        transition: border-color 0.15s ease, box-shadow 0.15s ease,
                    background 0.15s ease;
    }

    .ticket-amt-field:focus-within {
        border-color: var(--border-light);
    }

    /* The over-balance state. checkTradeButtonState() puts .exceeds-balance on the
       header row, so the field is styled from its sibling. */
    .amount-header-row.exceeds-balance + .ticket-amt-field {
        border-color: var(--negative);
    }

    .ticket-amt-input {
        flex: 1 1 auto;
        min-width: 0;
        border: 0;
        background: none;
        outline: none;
        text-align: right;
        font-family: var(--num);
        font-size: 1.5rem;
        font-weight: 700;
        letter-spacing: -0.015em;
        font-variant-numeric: tabular-nums;
        color: var(--text-primary);
    }

    .ticket-amt-unit {
        flex: 0 0 auto;
        font-family: var(--num);
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--text-muted);
    }

    /* Chips. They replace the slider: five sizes is what the slider was ever
       used for, and a discrete control cannot land between two of them. */
    .trade-preview-card .amount-presets {
        display: flex;
        gap: 4px;
        margin: 0.4rem 0 0;
    }

    .trade-preview-card .amount-preset {
        flex: 1 1 0;
        padding: 0.45rem 0;
        border: 1px solid transparent;
        background: rgba(255, 255, 255, 0.05);
        color: var(--text-secondary);
        font-family: var(--num);
        font-size: 0.625rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease;
    }

    .trade-preview-card .amount-preset:hover {
        background: rgba(255, 255, 255, 0.09);
        color: var(--text-primary);
    }

    .trade-preview-card .amount-preset.active {
        background: rgba(255, 255, 255, 0.14);
        color: var(--text-primary);
    }

    .trade-preview-card .amount-preset:focus-visible {
        outline: 1px solid var(--border-light);
        outline-offset: 1px;
    }

    /* The clamp notice. A note, not an alarm: the ticket did size the order,
       it simply did not size it to the number that was typed. Muted by
       default; the over-size case borrows the balance colour, which is the
       same colour the field already turns. */
    .trade-preview-card .ticket-amt-note {
        margin: 0.4rem 0 0;
        font-size: 0.6875rem;
        line-height: 1.35;
        color: var(--text-muted);
        font-variant-numeric: tabular-nums;
    }

    .trade-preview-card .ticket-amt-note.is-max {
        color: var(--text-secondary);
    }

    /* ---- 2x2 stat grid --------------------------------------------------
       One border around the block and a 1px gap showing it through: four cells,
       three lines, no nested boxes. */
    .ticket-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1px;
        background: var(--border-color);
        border: 1px solid var(--border-color);
        /* Same as .ticket-readouts: the radius is on the GROUP and overflow
           clips the cells to it. The cells are divided by a 1px background
           gap, not by borders, so rounding each one would round the gaps. */
        overflow: hidden;
    }

    .ticket-stat {
        padding: 0.5rem 0.6rem;
        background: var(--panel-sunken);
    }

    .ticket-stat-k {
        font-family: var(--sans);
        font-size: 0.5625rem;
        line-height: 1.6;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.42);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ticket-stat-v {
        font-family: var(--num);
        font-size: 0.875rem;
        font-weight: 600;
        line-height: 1.3;
        font-variant-numeric: tabular-nums;
        color: var(--text-primary);
    }

    .ticket-stat-v.is-up { color: var(--positive); }
    .ticket-stat-v.is-accent { color: var(--accent); }
    .ticket-stat-v .leverage-value { color: inherit !important; }

    /* ---- CTA ------------------------------------------------------------
       margin-top:auto is what USED to push the button to the foot of the
       rail. There is a whole analysis zone under it now, so it must sit
       exactly where the decision zone ends. */
    .trade-panel-preview .trade-actions,
    .trade-preview-card .trade-actions {
        margin-top: 0 !important;
        padding-top: 0;
    }

    .trade-preview-card #trade-now-btn {
        padding: 0.8rem 1rem !important;
        font-size: 0.75rem !important;
        font-weight: 600;
        letter-spacing: 0.04em;
    }

    /* ---- 3 · analysis zone ----------------------------------------------- */
    .ticket-analysis {
        border-top: 1px solid var(--border-color);
    }

    .ticket-tabs {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 0.5rem 0.6rem;
        border-bottom: 1px solid var(--border-color);
    }

    .ticket-tab {
        padding: 0.3rem 0.6rem;
        border: 0;
        border-radius: var(--r-input);
        background: none;
        color: var(--text-muted);
        font-family: var(--sans);
        font-size: 0.625rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        cursor: pointer;
    }

    .ticket-tab[aria-selected="true"] {
        background: rgba(255, 255, 255, 0.12);
        color: var(--text-primary);
    }

    .ticket-tab:disabled {
        color: rgba(255, 255, 255, 0.22);
        cursor: default;
    }

    .ticket-tab:focus-visible {
        outline: 1px solid var(--border-light);
        outline-offset: 1px;
    }

    /* The interval row belongs to the PRICE pane, so it hides with it. */
    /* Off: TradingView's own toolbar carries the interval. The element stays
       in the DOM — it seeds _ticketInterval. Delete both together, or not at
       all. */
    .ticket-tf {
        display: none;
    }

    .ticket-tf[hidden] { display: none; }

    .ticket-tf-btn {
        padding: 0.15rem 0.35rem;
        border: 0;
        background: none;
        color: rgba(255, 255, 255, 0.4);
        font-family: var(--sans);
        font-size: 0.625rem;
        font-weight: 500;
        cursor: pointer;
    }

    .ticket-tf-btn.active {
        color: var(--text-primary);
        background: rgba(255, 255, 255, 0.12);
    }

    .ticket-pane {
        padding: 0.65rem 0.7rem;
    }

    .ticket-pane[hidden] { display: none; }

    /* The payout calculator's own frame goes: the pane is the frame now. */
    .trade-preview-card .ticket-calc {
        margin: 0;
        padding: 0;
        border-top: 0;
        background: none;
    }

    /* A two-row grid, not a flex line: label|value, label|value. The columns
       are shared, so the price and the P&L end on the same right edge, and
       neither row can push the other one to wrap. */
    .ticket-pane-head {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: baseline;
        column-gap: 0.75rem;
        row-gap: 0.15rem;
        margin-bottom: 0.45rem;
        padding: 0.5rem 0.7rem;
        background: var(--panel-sunken);
        border: 1px solid var(--border-color);
        border-radius: var(--r-input);
    }

    .ticket-pane-price {
        justify-self: end;
        white-space: nowrap;
    }

    .ticket-pane-clock {
        font-family: var(--num);
        font-size: 0.625rem;
        font-weight: 600;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--text-muted);
        white-space: nowrap;
    }

    /* tabular-nums on the seconds alone: without it the whole bar twitches
       once a second as the digits change width. */
    .ticket-pane-clock-t {
        font-variant-numeric: tabular-nums;
        color: var(--text-secondary, var(--text-muted));
    }

    .ticket-pane-px {
        font-family: var(--num);
        font-size: 1.1875rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        font-variant-numeric: tabular-nums;
        color: var(--text-primary);
    }

    /* The unit, kept small and quiet so the number is the only loud thing. */
    .ticket-pane-cur {
        font-family: var(--num);
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--text-muted);
        margin-right: 0.2rem;
    }

    /* Row 2, right column: under the price, on the same right edge. */
    .ticket-pane-pnl {
        justify-self: end;
        font-family: var(--num);
        font-size: 0.8125rem;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        color: var(--text-muted);
        white-space: nowrap;
    }

    .ticket-pane-pnl.is-up { color: var(--positive); }
    .ticket-pane-pnl.is-down { color: var(--negative); }

    /* Row 2, left column. */
    .ticket-pane-hint {
        font-family: var(--sans);
        font-size: 0.5625rem;
        letter-spacing: 0.04em;
        color: rgba(255, 255, 255, 0.3);
        white-space: nowrap;
    }

    .ticket-payoff {
        display: block;
        width: 100%;
        height: 158px;
        cursor: ew-resize;
        user-select: none;
        touch-action: none;
    }

    .ticket-payoff:focus-visible {
        outline: 1px solid var(--border-light);
        outline-offset: 2px;
    }

    .ticket-readouts {
        display: flex;
        gap: 1px;
        margin-top: 0.55rem;
        background: var(--border-color);
        border: 1px solid var(--border-color);
        /* Radius on the GROUP, and overflow clips the three cells to it. The
           cells are separated by a 1px background gap, not by borders, so
           rounding them one by one would round the gaps too. */
        border-radius: var(--r-input);
        overflow: hidden;
    }

    .ticket-readout {
        flex: 1 1 0;
        min-width: 0;
        padding: 0.45rem 0.55rem;
        background: var(--panel-sunken);
    }

    .ticket-readout-k {
        font-family: var(--sans);
        font-size: 0.5625rem;
        line-height: 1.5;
        letter-spacing: 0.05em;
        color: rgba(255, 255, 255, 0.42);
    }

    .ticket-readout-v {
        font-family: var(--num);
        font-size: 0.8125rem;
        font-weight: 700;
        line-height: 1.2;
        font-variant-numeric: tabular-nums;
        color: var(--text-primary);
    }

    .ticket-readout-v.positive { color: var(--positive); }
    .ticket-readout-v.negative { color: var(--negative); }

    /* ---- the price chart, now a tab pane --------------------------------
       A definite height, because TradingView renders nothing at height 0, and auto
       width, because the pane already has the ticket's width. */
    .trade-panel-preview #price-chart {
        flex: none;
        width: auto;
        /* 260px was too short to read: the widget's toolbar and date rail take ~80px
           between them (3.8.5). The ticket does not scroll inside itself,
           syncTicketHeight() grows the page, so a taller pane costs nothing. */
        height: 420px;
        min-height: 420px;
        border-top: 0;
        display: block;
    }

    .trade-panel-preview #price-chart #tv-chart-container {
        width: 100%;
        height: 100%;
    }
}

/* ==========================================================================
   Ticket, second pass.
     1. Red now means "more than you have", drawn once, on the field.
     2. The identity line answers "what am I buying", so it is the largest type.
     3. The payout rate is back, spanning both columns.
     4. The radius is back, scoped to the ticket.
   ========================================================================== */

@media (min-width: 992px) {

    /* ---- 4 · what is round again ----------------------------------------
       These beat the square sweep on specificity; !important only answers the
       sweep's own. */
    .trade-preview-card .ticket-amt-field,
    .trade-preview-card .amount-preset,
    .trade-preview-card .ticket-stats,
    .trade-preview-card .trade-preview-profit-statement,
    .trade-preview-card .ticket-readouts,
    .trade-preview-card .ticket-tab,
    .trade-preview-card .ticket-tf-btn,
    .trade-preview-card .ticket-getmore,
    .trade-panel-preview #price-chart {
        border-radius: 8px !important;
    }

    .trade-preview-card .ticket-tab,
    .trade-preview-card .ticket-tf-btn {
        border-radius: 6px !important;
    }

    .trade-preview-card .preview-option-type {
        border-radius: 5px !important;
    }

    /* A radius on a grid whose cells are drawn by the gap needs the corners
       clipped, or the four inner fills square them off again. */
    .trade-preview-card .ticket-stats,
    .trade-preview-card .ticket-readouts {
        overflow: hidden;
    }

    /* ---- 2 · identity line, emphasised ----------------------------------- */
    .trade-preview-card .preview-card-identity {
        padding: 0.7rem 0.8rem;
    }

    .trade-preview-card .preview-card-identity .preview-asset-logo {
        width: 21px;
        height: 21px;
    }

    .trade-preview-card .preview-option-type {
        padding: 4px 8px;
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.07em;
    }

    .trade-preview-card .preview-card-identity .preview-asset-label {
        font-size: 1.0625rem;
        font-weight: 700;
        letter-spacing: 0.01em;
    }

    /* ---- 1 · the amount field, and red that means something --------------
       The header row carried a 1.5px red box of its own, so an over-size drew
       TWO red rectangles around one mistake. The row keeps no border at all
       now; the field is the input, so the field is what turns red. */
    .trade-preview-card .amount-header-row,
    .trade-preview-card .amount-header-row.exceeds-balance {
        border: 0;
        border-radius: 0;
    }

    /* The red state does NOT tighten around the number. The border stays 1px; the
       separation is a soft ring OUTSIDE the box, drawn with a spread shadow, so
       nothing shifts when the state turns on. */
    .amount-header-row.exceeds-balance + .ticket-amt-field {
        border-color: rgba(248, 113, 113, 0.6);
        background: rgba(248, 113, 113, 0.045);
        box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.09);
    }

    /* The ring needs somewhere to sit. Without this the chips below it are
       flush against the glow. */
    .amount-header-row.exceeds-balance + .ticket-amt-field + .amount-presets {
        margin-top: 0.6rem;
    }

    /* "Add funds", a pill. It was a text link with a dropdown caret sitting
       beside the balance, which read as a second balance. */
    .trade-preview-card .ticket-getmore {
        display: inline-flex;
        align-items: center;
        gap: 0.2rem;
        padding: 0.15rem 0.45rem;
        border: 1px solid rgba(253, 224, 71, 0.28);
        background: rgba(253, 224, 71, 0.08);
        color: var(--accent);
        font-family: var(--sans);
        font-size: 0.625rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        text-decoration: none;
        line-height: 1.4;
        transition: background 0.15s ease, border-color 0.15s ease;
    }

    .trade-preview-card .ticket-getmore:hover {
        background: rgba(253, 224, 71, 0.16);
        border-color: rgba(253, 224, 71, 0.45);
        color: var(--accent);
    }

    .trade-preview-card .ticket-getmore i {
        font-size: 0.6rem;
    }

    /* The base rule draws a "+" and a caret with pseudo-elements. There is a
       real icon in the markup now, and a pill does not need a caret. */
    .trade-preview-card .ticket-getmore::before,
    .trade-preview-card .ticket-getmore::after {
        content: none !important;
    }

    /* ---- 3 · the payout rate, spanning both columns ---------------------- */
    .trade-preview-card .ticket-stat--wide {
        grid-column: 1 / -1;
    }

    .trade-preview-card #payout-description {
        font-family: var(--num);
        font-size: 0.8125rem;
        font-weight: 600;
        text-align: left;
        color: var(--text-primary);
        font-variant-numeric: tabular-nums;
    }

    .trade-preview-card #payout-description span,
    .trade-preview-card #payout-description strong {
        color: var(--text-primary) !important;
    }

    /* The direction is a symbol (">" / "<"), so it stays in the mono face. The base
       rule pushes it to Inter, which is for the word form. */
    .trade-preview-card #payout-description #payout-direction {
        font-family: var(--num);
    }
}

/* ==========================================================================
   Identity line, and the funding menu
   ========================================================================== */

@media (min-width: 992px) {

    /* The countdown left this row, so the collapse control takes the slack
       back and the identity gets the whole width to be big in. */
    .trade-preview-card .preview-card-identity .ticket-collapse-btn {
        margin-left: auto;
    }

    /* "What am I buying" is the first question the ticket answers, so it is the
       largest thing in the header. */
    .trade-preview-card .preview-card-identity {
        padding: 0.85rem 0.8rem;
        gap: 0.55rem;
    }

    .trade-preview-card .preview-card-identity .preview-asset-logo {
        width: 26px;
        height: 26px;
    }

    .trade-preview-card .preview-option-type {
        padding: 5px 9px;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.08em;
    }

    .trade-preview-card .preview-card-identity .preview-asset-label {
        font-size: 1.3125rem;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 1.15;
    }

    /* ---- the funding menu -----------------------------------------------
       It was Bootstrap's default white sheet on a dark panel. Same treatment as
       .funding-actions-section .dropdown-menu, so the app has one dropdown style,
       not two. */
    .trade-preview-card .dropdown-menu {
        min-width: 13rem;
        padding: 0.3rem;
        background: var(--dropdown-bg);
        border: 1px solid var(--border-color);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
        border-radius: 8px !important;
        backdrop-filter: blur(8px);
    }

    .trade-preview-card .dropdown-item {
        display: flex;
        align-items: center;
        gap: 0.15rem;
        padding: 0.5rem 0.6rem;
        border-radius: 6px !important;
        color: var(--text-secondary);
        font-size: 0.8125rem;
        font-weight: 500;
        white-space: nowrap;
    }

    .trade-preview-card .dropdown-item i {
        opacity: 0.7;
        font-size: 0.9rem;
    }

    .trade-preview-card .dropdown-item:hover,
    .trade-preview-card .dropdown-item:focus {
        background: var(--dropdown-bg-hover);
        color: var(--text-primary);
    }

    .trade-preview-card .dropdown-item:hover i {
        opacity: 1;
    }

    /* "US Only" is a condition on the row, not a second title. */
    .trade-preview-card .dropdown-item .badge {
        margin-left: auto;
        padding: 0.2rem 0.4rem;
        background: rgba(255, 255, 255, 0.08) !important;
        color: var(--text-muted);
        font-family: var(--sans);
        font-size: 0.5625rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        border-radius: 4px !important;
    }

    .trade-preview-card .dropdown-divider {
        margin: 0.3rem 0.2rem;
        border-color: var(--border-color);
        opacity: 1;
    }
}

/* A tooltip must not be a hover target.
   Bootstrap places `.pnl-tooltip` flush against the top edge of its
   trigger cell. With `pointer-events: auto` (Bootstrap's default) the
   cursor can land on the tooltip instead of the trigger, hiding and
   reshowing it in a loop. `pointer-events: none` keeps the trigger
   under the cursor. Applies to every P&L tooltip — they share one
   binder. */
.tooltip.pnl-tooltip {
  pointer-events: none !important;
}

/* ---- position details modal ----
   One element, shared by the trade strip, the Positions page and the
   Portfolio panes. Paint only; the JS writes the content.
   !important is required: app.css:711 and :9971 are also !important, so
   specificity decides. */

/* 760px, not the app's 500px .modal-lg override: at 500 the two columns are
   228px, too narrow for the payout sentence. Capped to the viewport. */
#position-detail-modal .modal-dialog {
  max-width: min(760px, calc(100vw - 32px)) !important;
  width: 100% !important;
}
#position-detail-modal .position-detail-modal-content {
  border-radius: var(--r-card) !important;
}

/* The header is a label for the panel, in the same register as a column
   header — 11px caps, tracked, not a heading weight. */
#position-detail-modal .position-detail-modal-header {
  padding: 12px 16px !important;
}
#position-detail-modal .position-detail-modal-title {
  font-family: var(--sans) !important;
  font-size: var(--fs-micro) !important;
  font-weight: 600 !important;
  letter-spacing: var(--tr-caps) !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
}
/* Two-column grid. The title and summary row span both columns; the two
   detail sections sit side by side to keep the panel short.
   `min-width: 0` on the sections stops a long payout sentence
   ("0.0513 for every $1 above $1,950 in USDC") from pushing the grid
   wider than the dialog — a grid item's automatic minimum size is its
   content otherwise. */
#position-detail-modal .position-detail-modal-body {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: 10px !important;
  padding: 16px !important;
}
#position-detail-modal .pd-identity,
#position-detail-modal .modal-trade-summary {
  grid-column: 1 / -1 !important;
}
#position-detail-modal .profit-scenarios {
  min-width: 0 !important;
}
/* One section on its own takes the full width rather than leaving a hole. */
#position-detail-modal .profit-scenarios:last-of-type:nth-of-type(2) {
  grid-column: 1 / -1 !important;
}

/* --- the identity row ------------------------------------------------------
   The panel's subject, and the largest type in it: hierarchy comes from
   size, weight and leading together, not size alone — 24px / 600 /
   -0.02em / 1.15, against the 14px / 400 / 0 / 1.5 of the rows below.
   The logo matches the mark used in the tables, so the asset is
   recognisable before the words are read. */
#position-detail-modal .pd-identity {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 0 14px !important;
}
#position-detail-modal .pd-logo {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  flex: 0 0 34px !important;
  object-fit: contain !important;
}
#position-detail-modal .pd-logo[hidden] { display: none !important; }
/* The ETH and XRP marks are dark artwork (eth-logo.svg fills with
   currentColor, which an <img> resolves to black; xrp-logo.svg is #23292f),
   so they disappear on the dark panel. Same fix as the table rows
   (`img.position-asset-logo[alt="ETH"]`, app.css:12057). */
#position-detail-modal .pd-logo[alt="ETH"],
#position-detail-modal .pd-logo[alt="XRP"] {
  filter: brightness(0) invert(1) !important;
}
#position-detail-modal #position-modal-title {
  font-family: var(--sans) !important;
  font-size: 1.5rem !important;          /* 24 */
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
}

/* --- the three summary cards ---------------------------------------------
   THREE ACROSS, not stacked. Stacked, three one-line facts occupied the top
   half of the panel and pushed the detail table below the fold. */
#position-detail-modal .modal-trade-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-bottom: 14px !important;
}
#position-detail-modal .modal-summary-card {
  border: 1px solid var(--border-color) !important;
  border-radius: var(--r-input) !important;
  background: var(--panel-sunken, rgba(255, 255, 255, 0.02)) !important;
  padding: 10px 12px !important;
  gap: 0 !important;
}
/* The icon was a 36px circle in `--accent` at 10% fill. `--accent` is
   reserved for the prize pool, an imminent event and the action button —
   using it here on plain chrome dilutes that meaning; the labels already
   say Date, Settlement Price and P/L.
   Hidden, not deleted, so nothing that queries `.modal-summary-icon`
   breaks. */
#position-detail-modal .modal-summary-icon {
  display: none !important;
}
#position-detail-modal .modal-summary-label {
  font-family: var(--sans) !important;
  font-size: var(--fs-micro) !important;
  font-weight: 600 !important;
  letter-spacing: var(--tr-caps) !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  margin-bottom: 5px !important;
}
#position-detail-modal .modal-summary-value {
  font-family: var(--num) !important;
  font-variant-numeric: tabular-nums !important;
  font-size: var(--fs-stat) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: var(--text-primary) !important;
}
/* One figure answers this panel: the P/L. It gets a step larger and the
   numeral face at 700; Time Left and Current Price stay as supporting
   facts at their original size. */
#position-detail-modal #position-modal-pnl {
  font-size: var(--fs-fig) !important;    /* 20, one step over the others */
  font-weight: 700 !important;
  letter-spacing: var(--tr-fig) !important;
  line-height: 1.1 !important;
}

/* Colour is information here; an id-scoped `color` rule earlier in the
   file overrides it unless restated per selector below.
   1. The P/L sign: `showHistoryDetails` (app.js) sets `text-success` /
      `text-danger`; `.modal-summary-loss` is set by the other entry
      point. All three are restated here and re-pointed at `--positive` /
      `--negative` instead of Bootstrap's `#198754` / `#dc3545`, which are
      a different green and red from every other number in this app.
   2. The settlement scenarios: `ui_interactions.js:3442-3443` puts
      `scenario-positive` / `scenario-negative` / `scenario-neutral` on
      each row's payout and percent cells; without colour here every
      scenario reads the same. */
#position-detail-modal .modal-summary-card.modal-summary-loss .modal-summary-value,
#position-detail-modal .modal-summary-value.text-danger {
  color: var(--negative) !important;
}
#position-detail-modal .modal-summary-value.text-success {
  color: var(--positive) !important;
}
/* `tbody` here wins a specificity tie, not readability. The generic rule
   `… .profit-scenarios .table td:not(:first-child)` is (1,3,1) — the
   same as `… .table td.scenario-negative`, because `:not()` takes the
   specificity of its argument. On a tie the later rule wins, which
   painted over the scenario colours. Adding `tbody` makes these (1,3,2). */
#position-detail-modal .profit-scenarios .table tbody td.scenario-negative {
  color: var(--negative) !important;
}
#position-detail-modal .profit-scenarios .table tbody td.scenario-positive {
  color: var(--positive) !important;
}
#position-detail-modal .profit-scenarios .table tbody td.scenario-neutral {
  color: var(--text-primary) !important;
}

/* Settlement scenarios in history mode are not this trade's numbers.
   `renderSettlementScenarios` (ui_interactions.js:3438) runs only from
   `showPositionDetails`; `showHistoryDetails` never populates this
   table, so a settled trade shows placeholder levels from `app.html` or
   the last open position viewed. The fix is to populate the table from
   the trade, not to hide it — do not re-hide this block. */

/* The Settle button is the footer's only child; the JS hides it unless
   the position is expired and ready to settle. `:has()` reads the
   button's own inline display, so the footer follows it without a
   separate class to keep in sync. Where `:has()` is unsupported the
   footer stays visible. */
#position-detail-modal .modal-footer:has(> #settle-option-btn[style*="display: none"]) {
  display: none !important;
}
#position-detail-modal.pd-history .modal-footer {
  display: none !important;
}

/* A settled date is not a running countdown. `showHistoryDetails` writes
   the date into the element carrying `class="countdown"`, which
   otherwise inherits the accent colour, glow and pulse — gold means
   "running out", which a past date is not. `pd-history` is set by the JS
   that knows the mode. The glow is off in both modes; a modal already
   has the reader's full attention. */
#position-detail-modal .countdown {
  text-shadow: none !important;
  animation: none !important;
}
#position-detail-modal.pd-history .countdown {
  color: var(--text-primary) !important;
}

/* --- the two detail tables ------------------------------------------------ */
#position-detail-modal .profit-scenarios {
  border: 1px solid var(--border-color) !important;
  border-radius: var(--r-input) !important;
  padding: 12px 14px !important;
  margin-top: 10px !important;
}
#position-detail-modal .profit-scenarios h6 {
  font-family: var(--sans) !important;
  font-size: var(--fs-micro) !important;
  font-weight: 600 !important;
  letter-spacing: var(--tr-caps) !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  margin: 0 0 8px !important;
}
#position-detail-modal .profit-scenarios .table {
  margin: 0 !important;
}
#position-detail-modal .profit-scenarios .table td {
  padding: 7px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  background: transparent !important;
  font-family: var(--sans) !important;
  font-size: var(--fs-data) !important;
  font-weight: 400 !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--text-secondary) !important;
  vertical-align: middle !important;
}
#position-detail-modal .profit-scenarios .table tr:last-child td {
  border-bottom: 0 !important;
}
/* The first cell NAMES the row, the rest carry its numbers. */
#position-detail-modal .profit-scenarios .table td:first-child {
  color: var(--text-muted) !important;
}
#position-detail-modal .profit-scenarios .table td:not(:first-child) {
  text-align: right !important;
  color: var(--text-primary) !important;
}

/* --- materials and motion -------------------------------------------------
   Dim to focus: darkening the background is enough to make the panel the
   reader's whole attention; no `backdrop-filter` is applied. A
   full-viewport blur over a live SVG chart and ticking countdowns has a
   real per-frame cost that has not been measured. To add it, measure
   with the tab in the foreground, and prefer blurring a small surface
   over the whole viewport.

   Set the COLOUR on the base element and the strength through Bootstrap's own
   variables. Do not put either on `.show`.

   `.show` is the state Bootstrap removes to close the modal, and it carries
   only the opacity ramp (`opacity: var(--bs-backdrop-opacity)`, bootstrap
   5.2.3). A colour attached there is dropped the instant the close begins, so
   the backdrop fell back to the stock `--bs-backdrop-bg: #000` — and
   `background-color` is not in the `.fade` transition, which carries opacity
   alone, so the change was immediate. Pairing that with `opacity: 1 !important`
   started the 150ms ramp from FULL rather than from 0.72. The first painted
   frame of every close was therefore solid black over the whole viewport: a
   blackout that reads as a page reload. Measured at 89% black on the close of
   a position modal.
   Driving the variables instead keeps the colour constant for the element's
   whole life, so only the opacity moves, and it moves in both directions. */
.modal-backdrop {
  --bs-backdrop-bg: #06090f;
  --bs-backdrop-opacity: 0.72;
}

/* The panel scales in from 98% rather than fading in flat. The curve is
   a critically-damped spring — no overshoot, since this motion was not
   started by a user gesture. 0.32s follows the standard sheet "response"
   duration; do not tune it by eye. */
#position-detail-modal.fade .modal-dialog {
  transform: scale(0.98) !important;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.22s ease-out !important;
}
#position-detail-modal.fade.show .modal-dialog {
  transform: none !important;
}
/* Reduced motion means a gentler equivalent, not no feedback: the scale goes,
   the cross-fade stays. */
@media (prefers-reduced-motion: reduce) {
  #position-detail-modal.fade .modal-dialog {
    transform: none !important;
    transition: opacity 0.15s ease !important;
  }
}
/* Frostier, not transparent, when the reader has asked for less translucency. */
@media (prefers-reduced-transparency: reduce) {
  /* Strength only. The colour stays on the base rule above, for the same
     reason: a colour set here would again be tied to the state Bootstrap
     removes on close. */
  .modal-backdrop { --bs-backdrop-opacity: 0.94; }
}

/* --- the footer ----------------------------------------------------------- */
#position-detail-modal .modal-footer {
  border-top: 1px solid var(--border-color) !important;
  padding: 12px 16px !important;
}
#position-detail-modal #settle-option-btn {
  padding: 8px 14px !important;
  border: 0 !important;
  border-radius: var(--r-input) !important;
  background: var(--accent) !important;
  color: var(--background) !important;
  font-family: var(--sans) !important;
  font-size: var(--fs-ui) !important;
  font-weight: 700 !important;
}

/* ── Asset picker ───────────────────────────────────────────────────────────
   The trade title chooses the asset. A native select can show one line of
   text, so the spot price had no place to go. This is a button plus a panel:
   a search field, a Market / Spot Price head, and one row per asset. The
   hidden `<select>` beside it stays the state holder for every other module. */

.asset-picker-source { display: none !important; }

.asset-picker {
    position: relative;
    display: inline-flex;
}

/* No box. The title IS the control: a box around it read as a second,
   competing panel edge beside the trade card, and `--r-control` is not a
   token in this sheet, so the box also came out with square corners. The
   caret carries the affordance instead. */
.asset-picker-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 40px;
    padding: 0 0.15rem;
    border: 0;
    border-radius: var(--r-input);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.asset-picker-btn:hover .asset-picker-caret,
.asset-picker-btn.is-open .asset-picker-caret { color: var(--text-primary); }
.asset-picker-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.asset-picker-btn:disabled { opacity: 0.62; cursor: wait; }

.asset-picker-sym { line-height: 1; }

.asset-picker-caret {
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), color 160ms ease;
}

.asset-picker-btn.is-open .asset-picker-caret { transform: rotate(180deg); }

/* Motion comes from THE POPOVER MOTION below. Only the origin is local:
   this panel hangs under the title's left edge, so that is the corner it
   grows from. A centre origin reads as arriving from somewhere else on the
   page. */
.asset-picker-pop {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1200;
    transform-origin: top left;
    width: 340px;
    max-width: min(340px, calc(100vw - 32px));
    padding: 8px;
    border: 1px solid var(--border-light);
    border-radius: var(--r-card, 10px);
    background: var(--secondary);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

/* Closed resting state — see `.hdr-pop` above for why this is not `hidden`. */
.asset-picker-pop {
    visibility: hidden;
    opacity: 0;
    transform: scale(0.96) translateY(-4px);
    pointer-events: none;
}

.asset-picker-pop.is-open {
    visibility: visible;
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}


.asset-picker-search {
    position: relative;
    display: flex;
    align-items: center;
}

.asset-picker-search i {
    position: absolute;
    left: 10px;
    font-size: 0.8rem;
    color: var(--text-muted);
    pointer-events: none;
}

.asset-picker-input {
    width: 100%;
    height: 34px;
    padding: 0 10px 0 30px;
    border: 1px solid var(--border-color);
    border-radius: var(--r-input);
    background: var(--panel-sunken);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0;
}

.asset-picker-input::placeholder { color: var(--text-muted); }
.asset-picker-input:focus { outline: none; border-color: var(--primary); }

.asset-picker-head {
    display: flex;
    justify-content: space-between;
    padding: 10px 10px 6px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.asset-picker-list {
    max-height: 288px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.asset-picker-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--r-xs);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.asset-picker-opt:hover,
.asset-picker-opt.is-active { background: rgba(255, 255, 255, 0.07); color: var(--text-primary); }
.asset-picker-opt.is-on { color: var(--text-primary); }

.asset-picker-opt img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex: 0 0 auto;
}

.asset-picker-opt img[data-asset="ETH"],
.asset-picker-opt img[data-asset="XRP"] { filter: brightness(0) invert(1); }

.asset-picker-opt-name {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0;
}

.asset-picker-opt-full {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asset-picker-opt-px {
    flex: 0 0 auto;
    font-size: 0.88rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.asset-picker-opt-px.is-unquoted { color: var(--text-muted); }

.asset-picker-empty {
    padding: 14px 10px;
    color: var(--text-muted);
    font-size: 0.82rem;
    text-align: center;
}

.asset-picker-empty[hidden] { display: none; }

@media (max-width: 600px) {
    .asset-picker-pop { width: min(320px, calc(100vw - 24px)); }
}

/* ---- THE POPOVER MOTION -------------------------------------------------
   One curve for every popover in the app: the wallet and alert panels, the
   asset picker, and both trollbox trays (the trays carry their own copy of
   this in trollbox.css, where their sheet lives).

   The whole architecture is one rule: a popover is NEVER removed from the
   page. It rests closed at `visibility: hidden; opacity: 0`, and a single
   `.is-open` class transitions it in. Because the box is always laid out,
   the SAME transition runs backwards on close, with no JavaScript at all —
   no observer, no timers, no registry of selectors. Adding a popover means
   adding its selector to the list below and toggling one class.

   `visibility` is in the transition list on purpose. It is a discrete
   property, so it holds `visible` for the full duration on the way out and
   only flips at the end; without it the panel would disappear on frame one
   and the fade would play on nothing. */
.hdr-pop,
.asset-picker-pop {
    transition: opacity 150ms cubic-bezier(0.23, 1, 0.32, 1),
                transform 150ms cubic-bezier(0.23, 1, 0.32, 1),
                visibility 150ms;
}

/* The header popovers hang off the right edge of their trigger, so that is
   the corner they grow from. The asset picker sets its own `top left`. */
.hdr-pop { transform-origin: top right; }

@media (prefers-reduced-motion: reduce) {
    /* The travel goes, the announcement stays: a panel still has to say it
       arrived. Only the transform is dropped. */
    .hdr-pop,
    .asset-picker-pop {
        transition: opacity 120ms ease-out, visibility 120ms;
        transform: none;
    }

    .hdr-pop.is-open,
    .asset-picker-pop.is-open { transform: none; }

    .asset-picker-caret { transition: none; }
}

/* ===== Trollbox display names on scoreboard / positions ===== */
/* The name never replaces the address — it sits above it, with the address kept
   beneath in a muted, smaller style. On a leaderboard ranking real money the
   verifiable identifier has to stay on screen: display names are user-chosen and
   the allowlist permits letters and digits, so "Odette" or "0xdead" are legal
   names. Anyone can check the row against the address they know. */
.tb-ident {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.15;
    vertical-align: middle;
}

.tb-ident-name {
    font-weight: 600;
    color: var(--text-primary, #fff);
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tb-ident-addr {
    font-family: inherit;
    white-space: nowrap;
}

/* Once a name is shown, demote the address to a secondary line. */
.tb-ident-named .tb-ident-addr {
    font-size: 0.72em;
    opacity: 0.6;
}

/* --- Wallet popover: balances on other networks (wallet-kit) -------------
   The quick wallet is an EOA, so the same address exists on every EVM chain.
   Sits under the balance card and takes its shape: the popover floats on the
   raised tone and its wells step back ONE tone, to the panel (revamp.css
   paints the balance card the same way), with the card's 10px corner — the
   desktop sweep squares anything it does not allow-list, so the radius
   carries !important, as the balance card's does.
   ------------------------------------------------------------------------- */
.wp-elsewhere {
    margin: 8px 10px 0;
    padding: 10px 12px;
    border-radius: 10px !important;
    background: var(--card-bg);
}
.wp-elsewhere-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.wp-elsewhere-refresh {
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 2px;
    font-size: 12px;
    line-height: 1;
}
.wp-elsewhere-refresh:hover { color: var(--text-primary); }
.wp-elsewhere-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-height: 24px;
    font-size: 12px;
}
.wp-elsewhere-chain { color: var(--text-secondary); }
.wp-elsewhere-amt {
    margin-left: auto;
    font-family: var(--num);
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}
/* "couldn't check" is not a number and must not read as one */
.wp-elsewhere-amt.is-unknown { color: var(--text-muted); font-family: var(--sans); }
.wp-elsewhere-note {
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-muted);
    margin-top: 6px;
}