h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ---- TradeCopier dashboard theme — MT5 Control Desk (mockup parity) ---- */
:root {
    --bg:#0a0d11; --bg2:#0e1218; --panel:#11161d; --panel2:#141a22;
    --line:#1e2630; --line2:#27313d;
    --ink:#e8eef5; --muted:#7e8a99; --faint:#566270;
    --green:#36e0a0; --amber:#ffb547; --red:#ff5d73; --blue:#5aa9ff;
    --glow-green:rgba(54,224,160,.35); --glow-red:rgba(255,93,115,.30);
    --mono:'JetBrains Mono', ui-monospace, Consolas, monospace;
    --disp:'Bricolage Grotesque', system-ui, sans-serif;
    /* legacy aliases so existing classes adopt the new palette unchanged */
    --txt:#e8eef5; --card:#11161d; --accent:#5aa9ff; --ok:#36e0a0; --bad:#ff5d73;
}
* { box-sizing: border-box; }
body {
    font-family: var(--mono); color: var(--ink); margin: 0; padding: 1.5rem;
    letter-spacing: .2px; -webkit-font-smoothing: antialiased; min-height: 100vh;
    background:
        radial-gradient(1100px 600px at 78% -8%, rgba(90,169,255,.07), transparent 60%),
        radial-gradient(900px 500px at 5% 110%, rgba(54,224,160,.06), transparent 55%),
        var(--bg);
}
/* faint engineering grid behind everything (mockup signature) */
body::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .18;
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(circle at 50% 30%, #000, transparent 85%);
            mask-image: radial-gradient(circle at 50% 30%, #000, transparent 85%);
}
.title { font-family: var(--disp); font-size: 1.5rem; font-weight: 800; letter-spacing: .3px; margin: 0 0 1rem; color: var(--ink); }
.title .sub { color: var(--faint); font-weight: 400; font-size: .9rem; font-family: var(--mono); letter-spacing: .5px; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.card { background: linear-gradient(180deg, var(--panel), var(--bg2)); border: 1px solid var(--line); border-radius: 13px; padding: 1rem 1.2rem; margin-bottom: 14px; }
.card h2 { font-family: var(--disp); font-size: .82rem; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; color: var(--ink); margin: 0 0 .85rem; }
.card.err { background: linear-gradient(180deg, #2a1418, #1a0e11); border-color: #5a2330; color: #ffd7df; }
.msg-banner { transition: opacity .5s ease; }   /* status banners fade out before auto-dismiss */
.msg-out { opacity: 0; }
/* mockup-style card: title bar with bottom border, body flush to the edges */
.card.flush { padding: 0; overflow: hidden; }
.cardhd { display: flex; align-items: center; gap: 11px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.cardhd h2 { margin: 0; }
.cardhd .meta { margin-left: auto; font-family: var(--mono); font-size: .66rem; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.osbody { padding: 12px 14px; max-height: 360px; overflow-y: auto; }   /* ~10 rows visible, then scroll (mockup-style) */

/* themed scrollbars for the scroll regions (mockup parity) */
.osbody::-webkit-scrollbar, .feed-fanout::-webkit-scrollbar, .feed::-webkit-scrollbar, .mt-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.osbody::-webkit-scrollbar-thumb, .feed-fanout::-webkit-scrollbar-thumb, .feed::-webkit-scrollbar-thumb, .mt-scroll::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 4px; }
.osbody::-webkit-scrollbar-thumb:hover, .feed-fanout::-webkit-scrollbar-thumb:hover, .feed::-webkit-scrollbar-thumb:hover, .mt-scroll::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.osbody::-webkit-scrollbar-track, .feed-fanout::-webkit-scrollbar-track, .feed::-webkit-scrollbar-track, .mt-scroll::-webkit-scrollbar-track { background: transparent; }
.osbody, .feed-fanout, .feed, .mt-scroll { scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }

/* ---- Live Copy Stream: single-deal fan-out (mockup parity) ---- */
.tag { font-size: .6rem; color: var(--faint); letter-spacing: 1.5px; text-transform: uppercase; }
.deal-hd { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: rgba(90,169,255,.05); border-bottom: 1px solid var(--line); font-family: var(--mono); }
.ev { font-family: var(--disp); font-weight: 800; font-size: 1.05rem; letter-spacing: .5px; }
.ev.open { color: var(--blue); }
.ev.close { color: var(--amber); }
.deal-hd .dsym { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.deal-hd .dbuy { color: var(--green); font-weight: 700; }
.deal-hd .dsell { color: var(--red); font-weight: 700; }
.deal-hd .dlot { color: var(--muted); font-size: .78rem; }
.deal-hd .dlot b { color: var(--ink); }
.deal-hd .dord { font-size: .7rem; color: var(--faint); margin-left: auto; text-align: right; line-height: 1.5; }
.deal-hd .dord b { color: var(--muted); font-weight: 500; }
.fanbar { display: flex; align-items: center; gap: 12px; padding: 9px 16px; font-size: .66rem; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--bg2); font-family: var(--mono); }
.fanbar .fb-done { color: var(--green); font-weight: 700; }
.fanbar .fb-placed { color: var(--amber); font-weight: 700; }
.fanbar .fb-failed { color: var(--faint); }
.fanbar .prog { flex: 1; height: 6px; border-radius: 4px; background: var(--line); overflow: hidden; display: flex; }
.fanbar .prog i { height: 100%; }
.feed-fanout { max-height: 340px; overflow: auto; }
.feed-fanout table { width: 100%; border-collapse: collapse; font-size: .72rem; font-family: var(--mono); }
.feed-fanout th { position: sticky; top: 0; background: var(--panel2); text-align: left; padding: 8px 16px; color: var(--faint); font-weight: 500; font-size: .58rem; letter-spacing: 1.4px; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.feed-fanout td { padding: 8px 16px; border-bottom: 1px solid rgba(30,38,48,.5); color: var(--muted); font-variant-numeric: tabular-nums; }
.feed-fanout tr:last-child td { border-bottom: none; }
.feed-fanout tbody tr:hover td { background: rgba(90,169,255,.04); }
.feed-fanout .num { text-align: right; }
.feed-fanout .grp { color: var(--faint); }
.feed-fanout .ratio { color: var(--blue); font-weight: 600; }
.pill.done { color: var(--green); background: rgba(54,224,160,.1); border: 1px solid rgba(54,224,160,.3); }
.pill.done::before { background: var(--green); box-shadow: 0 0 7px var(--green); }
.pill.placed { color: var(--amber); background: rgba(255,181,71,.1); border: 1px solid rgba(255,181,71,.3); }
.pill.placed::before { background: var(--amber); box-shadow: 0 0 7px var(--amber); }
.pill.failed { color: var(--red); background: rgba(255,93,115,.1); border: 1px solid rgba(255,93,115,.3); }
.pill.failed::before { background: var(--red); box-shadow: 0 0 7px var(--red); }
.lat { font-weight: 700; }
.lat.ok { color: var(--green); }
.lat.warn { color: var(--amber); }
.lat.bad { color: var(--red); }
.kv { display: flex; justify-content: space-between; align-items: center; padding: .35rem 0; border-bottom: 1px solid rgba(30,38,48,.6); font-size: .82rem; }
.kv:last-child { border-bottom: none; }
.kv span { color: var(--muted); }
.kv b { font-variant-numeric: tabular-nums; color: var(--ink); }
.muted { color: var(--muted); }
table { width: 100%; border-collapse: collapse; font-size: .82rem; }
th { text-align: left; color: var(--faint); font-weight: 500; font-size: .58rem; letter-spacing: 1.4px; text-transform: uppercase; border-bottom: 1px solid var(--line); padding: .5rem .6rem; }
td { padding: .5rem .6rem; border-bottom: 1px solid rgba(30,38,48,.55); color: var(--muted); font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: none; }
.badge { display: inline-flex; align-items: center; padding: .18rem .6rem; border-radius: 999px; font-size: .62rem; font-weight: 700; letter-spacing: .5px; }
.badge.ok { background: rgba(54,224,160,.1); color: var(--green); border: 1px solid rgba(54,224,160,.3); }
.badge.bad { background: rgba(255,93,115,.1); color: var(--red); border: 1px solid rgba(255,93,115,.3); }
.dot.on { color: var(--green); } .dot.off { color: var(--muted); }
.side { font-weight: 700; } .side.buy { color: var(--green); } .side.sell { color: var(--red); }

.ksbtn { margin-top: .8rem; width: 100%; padding: .55rem; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; color: #fff; }
.ksbtn.stop { background: #d23b3b; } .ksbtn.stop:hover { background: #e54b4b; }
.ksbtn.go { background: #1f9d57; } .ksbtn.go:hover { background: #25b365; }
.ksbtn:disabled { opacity: .5; cursor: default; }
.hint { color: var(--muted); font-size: .75rem; margin-top: .4rem; text-align: center; }

a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
input, select { background: var(--panel2); border: 1px solid var(--line); color: var(--ink); border-radius: 6px; padding: .3rem .45rem; font-size: .85rem; font-family: var(--mono); }
.addrow td { background: rgba(90,169,255,.06); }
/* Manage account tables are wide editable grids — scroll horizontally inside their card (spreadsheet-style)
   at every width, so columns keep their natural size and the row actions never wrap/stack. */
.card > table { display: block; overflow: auto; max-height: 440px; white-space: nowrap; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.card > table::-webkit-scrollbar { width: 8px; height: 8px; }
.card > table::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 4px; }
.card > table::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.card > table::-webkit-scrollbar-track { background: transparent; }
.card > table thead th { position: sticky; top: 0; z-index: 1; background: var(--panel2); }
.card > table tbody tr:hover td { background: rgba(90,169,255,.045); }

/* Manage page tabs */
.tabs { display: flex; gap: 2px; margin-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.tab { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--muted); padding: .6rem 1.2rem; font-size: .82rem; font-weight: 600; cursor: pointer; letter-spacing: .03em; font-family: var(--mono); }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--accent); }
.slavefilter { float: right; font-weight: 400; font-size: .78rem; text-transform: none; letter-spacing: 0; color: var(--muted); display: inline-flex; align-items: center; gap: .45rem; }
.slavefilter input { width: 9.5rem; }

/* searchable master combobox (slave add-row) — styled dropdown with full scrollable option list */
.combo { position: relative; display: inline-block; }
.combo-input { width: 11rem; padding-right: 2.2rem; }
/* Login fields stay numeric but drop the spinner arrows — incrementing a login by 1 is meaningless. */
.nospin::-webkit-outer-spin-button, .nospin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.nospin { -moz-appearance: textfield; appearance: textfield; }
/* Read-only cell that mirrors a derived value (e.g. slave Sizing follows its master). */
.locked { display: inline-block; color: var(--muted); font-size: .85rem; }
.rowbtns { display: inline-flex; align-items: center; gap: .35rem; }
.ab-navlink { color: var(--blue); text-decoration: none; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .4rem .7rem; border: 1px solid var(--line2); border-radius: 6px; }
.ab-navlink:hover { background: rgba(90,169,255,.12); }
/* Two-factor setup */
.tfa-key { margin: .25rem 0 .25rem; padding: .7rem .8rem; background: var(--panel2); border: 1px solid var(--line2); border-radius: 10px; }
.tfa-key-label { display: block; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .35rem; }
.tfa-key-val { font-family: var(--mono); font-size: .8rem; letter-spacing: .16em; color: var(--ink); word-break: break-all; }
.tfa-codes { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .8rem; margin: .25rem 0 1rem; padding: .8rem; background: var(--panel2); border: 1px solid var(--line2); border-radius: 10px; }
.tfa-codes code { font-family: var(--mono); font-size: .9rem; color: var(--green); }
.tfa-qr { display: flex; justify-content: center; margin: .15rem 0 .16rem; }
.tfa-qr img { background: #fff; padding: 7px; border-radius: 10px; }
.combo-arrow { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); cursor: pointer; user-select: none; line-height: 1; color: var(--muted); font-size: 1.5rem; }
.combo-arrow:hover { color: var(--ink); }
.combo-panel { position: absolute; top: calc(100% + 3px); left: 0; min-width: 100%; z-index: 60; max-height: 240px; overflow-y: auto; background: var(--panel2); border: 1px solid var(--line2); border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.5); padding: 4px; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.combo-opt { padding: .42rem .6rem; border-radius: 5px; cursor: pointer; font-size: .85rem; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.combo-opt:hover { background: rgba(90,169,255,.14); }
.combo-opt.sel { background: rgba(90,169,255,.22); color: var(--blue); }
.combo-empty { padding: .42rem .6rem; color: var(--muted); font-size: .82rem; }
.combo-panel::-webkit-scrollbar { width: 8px; }
.combo-panel::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 4px; }
.mini { border: none; border-radius: 5px; padding: .2rem .5rem; margin: 0 .1rem; font-size: .78rem; cursor: pointer; background: var(--line); color: var(--txt); white-space: nowrap; }
.mini:hover { filter: brightness(1.25); }
.mini.ok { background: #1f9d57; color: #fff; } .mini.bad { background: #d23b3b; color: #fff; }
.ok-card { background: #16321f; border-color: #2a6a42; color: #b9f5cf; }
.feed { max-height: 220px; overflow-y: auto; font-family: var(--mono); font-size: .82rem; }
.feedline { padding: .12rem 0; border-bottom: 1px solid rgba(42,51,70,.5); white-space: pre-wrap; }
.feedline .t { color: var(--accent); margin-right: .5rem; }

/* ---- Dispatch Latency: grouped master→slave feed with Δ bar (parsed from the existing feed lines) ---- */
.dl { max-height: 360px; overflow-y: auto; font-family: var(--mono); }
.dl-legend { display: flex; gap: 12px; align-items: center; padding: 0 0 9px; font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); flex-wrap: wrap; }
.dl-legend .sw { width: 13px; height: 4px; border-radius: 2px; display: inline-block; margin-right: 4px; vertical-align: middle; }
.dl-legend .nt { margin-left: auto; text-transform: none; letter-spacing: .02em; }
.dl-row { display: grid; grid-template-columns: 58px 56px 1fr auto; align-items: center; gap: 10px; padding: 4px 2px; font-size: .76rem; }
.dl-row.master { border-top: 1px solid rgba(42,51,70,.5); margin-top: 3px; padding-top: 8px; }
.dl-row.master:first-child { border-top: none; margin-top: 0; }
.dl-t { color: var(--faint); font-size: .66rem; font-variant-numeric: tabular-nums; }
.dl-ev { justify-self: start; font-weight: 700; font-size: .56rem; letter-spacing: .08em; padding: 3px 6px; border-radius: 5px; white-space: nowrap; }
.dl-ev.open  { color: var(--blue);  background: rgba(90,169,255,.13); }
.dl-ev.close { color: var(--amber); background: rgba(255,181,71,.13); }
.dl-ev.copy  { color: #8fb6e8;      background: rgba(90,169,255,.08); }
.dl-ev.skip, .dl-ev.blocked, .dl-ev.other { color: var(--faint); background: rgba(255,255,255,.04); }
.dl-body { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; }
.dl-row.child .dl-body { position: relative; padding-left: 20px; }
.dl-row.child .dl-body::before { content: ""; position: absolute; left: 5px; top: 50%; width: 9px; height: 1px; background: var(--line2); }
.dl-who { color: var(--ink); font-weight: 700; }
.dl-sym { color: #aeb9c6; }
.dl-side { font-size: .56rem; letter-spacing: .06em; padding: 2px 6px; border-radius: 5px; }
.dl-side.buy  { color: var(--green); background: rgba(54,224,160,.1); }
.dl-side.sell { color: var(--red);   background: rgba(255,93,115,.1); }
.dl-kv { color: var(--muted); font-size: .72rem; }
.dl-px { color: #cbd5e1; font-variant-numeric: tabular-nums; }
.dl-fan { color: var(--faint); font-size: .72rem; }
.dl-note { color: var(--faint); font-size: .72rem; }
.dl-right { display: flex; align-items: center; gap: 11px; justify-self: end; font-variant-numeric: tabular-nums; }
.dl-clock { color: var(--muted); font-size: .68rem; white-space: nowrap; }
.dl-clock b { color: var(--ink); font-weight: 600; }
.dl-bar { position: relative; width: 116px; height: 8px; }
.dl-bar .trk { position: absolute; inset: 0; border-radius: 5px; background: rgba(255,255,255,.05); overflow: hidden; }
.dl-bar .fil { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; }
.dl-bar .fil.ok   { background: linear-gradient(90deg,#1f9d57,var(--green)); }
.dl-bar .fil.warn { background: linear-gradient(90deg,#c7902f,var(--amber)); }
.dl-bar .fil.bad  { background: linear-gradient(90deg,#c63d4e,var(--red)); }
.dl-bar .sla { position: absolute; top: -3px; bottom: -3px; left: 25%; width: 1px; background: rgba(255,255,255,.22); }
.dl-ms { width: 50px; text-align: right; font-weight: 700; font-size: .8rem; }
.dl-ms small { font-size: .56rem; color: var(--faint); font-weight: 400; }
.dl-ms.ok { color: var(--green); } .dl-ms.warn { color: var(--amber); } .dl-ms.bad { color: var(--red); }
/* ---- Responsive: collapse the fixed multi-column dashboard on narrow screens ---- */
@media (max-width: 1024px) {
  .grid  { grid-template-columns: 1fr 1fr; }
  .grid2 { grid-template-columns: 1fr; }
  /* Manage page: let the wide account tables scroll horizontally instead of breaking the page. */
  .tabs { flex-wrap: wrap; }
}
@media (max-width: 680px) {
  body { padding: 1rem .8rem; }
  body .appbar { margin-left: -.8rem; margin-right: -.8rem; }  /* match reduced body padding; body-prefix beats the later base .appbar rule */
  /* top bar: wrap + shrink so it never overflows on phones (brand on top, stats/actions wrap below) */
  .appbar { flex-wrap: wrap; gap: .5rem .7rem; padding: .55rem .8rem; }
  .appbar-right { gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
  .ab-sep { display: none; }
  .brand-mark { width: 26px; height: 26px; }
  .brand-text { font-size: .98rem; }
  .ab-val { font-size: .82rem; }
  .ab-navlink { padding: .35rem .55rem; font-size: .66rem; }
  .ab-logout button { padding: .35rem .62rem; font-size: .66rem; }
  .grid { grid-template-columns: 1fr; }
  .title { font-size: 1.2rem; line-height: 1.35; }
  .card { padding: .85rem .95rem; }
  .cardhd, .deal-hd, .oshead, .fanbar { flex-wrap: wrap; }
  .mt-scroll, .feed-fanout, .osbody, .dl { overflow-x: auto; }
  .dl-row { grid-template-columns: 50px 50px 1fr; }
  .dl-right { grid-column: 1 / -1; justify-self: start; padding-left: 70px; }
  .dl-bar { width: 90px; }
}
@media (max-width: 460px) {
  /* tiny screens: drop the MANAGER/UTC info chips so the brand + actions fit cleanly */
  .appbar .ab-stat, .appbar .ab-sep { display: none; }
}

/* ---- Live Copy Stream: open slave positions grouped by master ---- */
.osgroup { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 12px; overflow: hidden; background: var(--bg2); }
.osgroup:last-child { margin-bottom: 0; }
.oshead { display: flex; align-items: center; gap: 11px; padding: 11px 16px;
    background: rgba(90,169,255,.05);
    border-bottom: 1px solid var(--line); font-family: var(--mono); }
.osside { font-weight: 700; font-size: .62rem; letter-spacing: .5px; padding: 3px 9px; border-radius: 6px; }
.osside.buy { color: var(--green); background: rgba(54,224,160,.1); border: 1px solid rgba(54,224,160,.3); }
.osside.sell { color: var(--red); background: rgba(255,93,115,.1); border: 1px solid rgba(255,93,115,.3); }
.ossym { font-weight: 700; letter-spacing: .04em; color: var(--ink); font-size: .95rem; }
.osmeta { color: var(--muted); font-size: .7rem; }
.osmeta b { color: var(--ink); font-weight: 700; }
.osstat { margin-left: auto; color: var(--faint); font-size: .62rem; letter-spacing: 1px; text-transform: uppercase; }
.ostable { font-family: var(--mono); font-size: .72rem; }
.ostable th { font-size: .58rem; letter-spacing: 1.4px; text-transform: uppercase; padding: 8px 16px; border-bottom: 1px solid var(--line); color: var(--faint); font-weight: 500; }
.ostable td { padding: 8px 16px; border-bottom: 1px solid rgba(30,38,48,.5); color: var(--muted); }
.ostable tr:last-child td { border-bottom: none; }
.ostable tbody tr:hover td { background: rgba(90,169,255,.04); }
.ostable .num { text-align: right; font-variant-numeric: tabular-nums; }
.ostable .mono { color: var(--ink); }
.ostable .grp { color: var(--faint); }
.ostable .ratio { color: var(--blue); font-weight: 600; }
.oshead-close { margin-left: auto; font-size: .64rem; letter-spacing: .04em; padding: .2rem .6rem; white-space: nowrap; }

/* ---- Recent master trades: deals table (mockup parity) ---- */
.mt-scroll { max-height: 360px; overflow-y: auto; }   /* ~10 rows visible, then scroll */
.mt { width: 100%; border-collapse: collapse; font-size: .72rem; font-family: var(--mono); }
.mt th { position: sticky; top: 0; z-index: 1; background: var(--panel2); text-align: left; padding: 10px 16px; color: var(--faint); font-weight: 500; font-size: .58rem; letter-spacing: 1.4px; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.mt td { padding: 10px 16px; border-bottom: 1px solid rgba(30,38,48,.5); color: var(--muted); font-variant-numeric: tabular-nums; }
.mt tr:last-child td { border-bottom: none; }
.mt tbody tr:hover td { background: rgba(90,169,255,.04); }
.mt .num { text-align: right; }
.mt .sym { color: var(--ink); font-weight: 600; }
.mt .dir-buy { color: var(--green); font-weight: 600; }
.mt .dir-sell { color: var(--red); font-weight: 600; }
.mt .dt { line-height: 1.3; padding-top: 7px; padding-bottom: 7px; }
.mt .dt .d { display: block; font-size: .6rem; color: var(--faint); letter-spacing: .3px; }
.mt .dt .tm { display: block; font-size: .68rem; color: var(--muted); }
.mode { font-size: .58rem; letter-spacing: 1px; color: var(--faint); border: 1px solid var(--line2); border-radius: 5px; padding: 2px 7px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 20px; font-size: .62rem; font-weight: 700; letter-spacing: .5px; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.pill.open { color: var(--blue); background: rgba(90,169,255,.1); border: 1px solid rgba(90,169,255,.3); }
.pill.open::before { background: var(--blue); box-shadow: 0 0 7px var(--blue); }
.pill.close { color: var(--green); background: rgba(54,224,160,.1); border: 1px solid rgba(54,224,160,.3); }
.pill.close::before { background: var(--green); box-shadow: 0 0 7px var(--green); }

/* ---- Top app bar (mockup parity) ---- */
.appbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .7rem 1.3rem; margin: -1.5rem -1.5rem 1.3rem; /* full-bleed past the body padding */
    background: linear-gradient(180deg, #0b0f17, var(--bg)); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: .75rem; }
.brand-mark { width: 30px; height: 30px; color: var(--green); flex: none; filter: drop-shadow(0 0 6px var(--glow-green)); }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; font-family: var(--disp); font-weight: 800; letter-spacing: .04em; color: var(--ink); font-size: 1.1rem; }
.brand-sub { font-size: .56rem; letter-spacing: .34em; color: var(--muted); font-weight: 600; margin-top: .18rem; }
.appbar-right { display: flex; align-items: center; gap: 1.1rem; font-family: var(--mono); }
.ab-sep { width: 1px; height: 26px; background: var(--line); }
.ab-stat { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.ab-lbl { font-size: .56rem; letter-spacing: .24em; color: var(--muted); }
.ab-val { font-size: .95rem; font-weight: 700; color: var(--txt); font-variant-numeric: tabular-nums; }
.ab-logout { margin: 0; }
.ab-logout button { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 8px; padding: .38rem .85rem; font-size: .72rem; cursor: pointer; letter-spacing: .04em; }
.ab-logout button:hover { color: var(--txt); border-color: var(--muted); }

/* ---- Connection status: glowing LIVE pill (worker Link row) ---- */
.livepill { display: inline-flex; align-items: center; gap: .6rem; padding: .32rem .85rem .32rem .62rem; border-radius: 10px; font-family: var(--mono); font-weight: 700; font-size: .82rem; letter-spacing: .15em; }
.livepill .lp-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; position: relative; }
.livepill.on { color: #36e0a0; border: 1px solid rgba(54,224,160,.4); background: rgba(54,224,160,.07); }
.livepill.on .lp-dot { background: #36e0a0; box-shadow: 0 0 8px rgba(54,224,160,.6); }
/* Radar "ping" ring expanding out of the dot — matches LIVE · PUMP FULL in the mockup. */
.livepill.on .lp-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid #36e0a0; animation: lp-ping 1.8s ease-out infinite; }
.livepill.off { color: var(--red); border: 1px solid rgba(255,93,115,.4); background: rgba(255,93,115,.07); }
.livepill.off .lp-dot { background: var(--red); box-shadow: 0 0 7px var(--red); }
@keyframes lp-ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }

#blazor-error-ui { background: #d23b3b; color: #fff; bottom: 0; left: 0; right: 0; position: fixed; padding: .6rem 1.25rem; display: none; }
#blazor-error-ui .reload, #blazor-error-ui .dismiss { color: #fff; }

/* Sign-in page + top bar */
.topbar { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; padding: .4rem .9rem; border-bottom: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
.topbar-user strong { color: var(--txt); }
.topbar-logout { margin: 0; }
.topbar-logout button { border: 1px solid var(--line); background: var(--line); color: var(--txt); border-radius: 6px; padding: .25rem .65rem; font-size: .78rem; cursor: pointer; }
.topbar-logout button:hover { filter: brightness(1.25); }

/* full-viewport scroll layer that escapes the dashboard body padding */
/* Auth pages use the no-appbar AuthLayout, so the wrapper is normal page flow (min-height:100vh) — a card
   taller than the viewport scrolls with the page, which is reliable on every screen size (incl. mobile). */
.login-wrap { min-height: 100vh; box-sizing: border-box;
    background: radial-gradient(900px 520px at 50% -12%, rgba(54,224,160,.07), transparent 60%),
                linear-gradient(180deg, #0a0d11, #0c1016); }
/* margin:auto on the card centers it when it fits and top-aligns (page scrolls) when it's taller. */
.login-inner { min-height: 100vh; display: flex; padding: 1.5rem 1rem; box-sizing: border-box; }
.login-card { position: relative; width: 100%; max-width: 380px; margin: auto; box-sizing: border-box; overflow: hidden;
    background: linear-gradient(180deg, var(--panel), var(--bg2)); border: 1px solid var(--line);
    border-radius: 16px; padding: 1.75rem 1.6rem 1.3rem;
    box-shadow: 0 30px 70px -42px #000, 0 1px 0 rgba(255,255,255,.03) inset; }
.login-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(54,224,160,.6), transparent); }
.login-mark { position: relative; width: 52px; height: 52px; display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: 14px; background: rgba(54,224,160,.06); margin-bottom: .9rem; }
.login-mark svg { width: 28px; height: 28px; color: var(--green); filter: drop-shadow(0 0 7px var(--glow-green)); }
.login-ring { position: absolute; inset: -1px; border-radius: 14px; border: 1px solid rgba(54,224,160,.5);
    animation: login-ping 2.6s ease-out infinite; }
@keyframes login-ping { 0% { transform: scale(.9); opacity: .85; } 100% { transform: scale(1.28); opacity: 0; } }
.login-eyebrow { font-family: var(--mono); font-size: .6rem; letter-spacing: .26em; text-transform: uppercase; color: var(--faint); }
.login-title { margin: .35rem 0 .15rem; font-family: var(--disp); font-weight: 800; font-size: 1.7rem; letter-spacing: .01em; color: var(--ink); }
.login-sub { margin: 0 0 1.25rem; color: var(--muted); font-size: .85rem; }
.two-login-sub { margin: 0 0 0.25rem; color: var(--muted); font-size: .8rem; }
.login-label { display: block; margin-bottom: .8rem; }
.login-label > span { display: block; font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: .35rem; }
.login-input { display: block; width: 100%; box-sizing: border-box; padding: .6rem .7rem; font-size: .9rem;
    background: var(--bg2); border: 1px solid var(--line2); border-radius: 9px; color: var(--ink); font-family: var(--mono); }
.login-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(90,169,255,.18); }
.login-btn { width: 100%; margin-top: .4rem; padding: .65rem; border: none; border-radius: 10px; cursor: pointer;
    font-family: var(--mono); font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
    color: #06231a; background: linear-gradient(180deg, #45ecb0, var(--green)); }
.login-btn:hover { filter: brightness(1.06); }
.login-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.login-error { background: #3a1620; border: 1px solid #6a2a35; color: #f5b9c5; border-radius: 9px; padding: .55rem .7rem; margin-bottom: .95rem; font-size: .82rem; font-family: var(--mono); }
.login-foot { display: flex; align-items: center; gap: .5rem; margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--line);
    font-family: var(--mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.login-foot .login-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); flex: none; }
@media (prefers-reduced-motion: reduce) { .login-ring { animation: none; } }
@media (max-width: 480px) {
    .login-inner { padding: 1rem .75rem; }
    .login-card { padding: 1.4rem 1.15rem 1.1rem; border-radius: 14px; }
    .login-title { font-size: 1.45rem; }
    .tfa-codes { grid-template-columns: 1fr; }
}