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; }
/* 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 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: 1.6rem; }
.combo-arrow { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted); font-size: .55rem; }
.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); }
.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; }

/* ---- 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); }

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.login-card { width: 100%; max-width: 340px; background: linear-gradient(180deg, var(--panel), var(--bg2)); border: 1px solid var(--line); border-radius: 13px; padding: 1.75rem 1.5rem; }
.login-card h1 { margin: 0 0 .25rem; font-size: 1.4rem; font-family: var(--disp); font-weight: 800; }
.login-sub { margin: 0 0 1.25rem; color: var(--muted); font-size: .85rem; }
.login-label { display: block; margin-bottom: .9rem; font-size: .8rem; color: var(--muted); }
.login-input { display: block; width: 100%; margin-top: .3rem; padding: .5rem .6rem; font-size: .9rem; box-sizing: border-box; }
.login-btn { width: 100%; padding: .55rem; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; color: #fff; background: var(--accent); }
.login-btn:hover { filter: brightness(1.1); }
.login-error { background: #3a1620; border: 1px solid #6a2a35; color: #f5b9c5; border-radius: 8px; padding: .5rem .65rem; margin-bottom: .9rem; font-size: .82rem; }