/* Palette lifted verbatim from the WPF app's Themes/AppDarkTheme.xaml, so the web front-end
   reads as the same product: near-black ground, layered dark panels, light text, and the
   signature lime-green accent on active/selected things (with gold section headers). */
:root,
[data-bs-theme="dark"] {
    --wpf-bg: #17191C;          /* AppBackgroundBrush */
    --wpf-panel: #1D2126;       /* PanelContentBrush */
    --wpf-panel-cap: #1E2226;   /* PanelBackgroundBrush */
    --wpf-panel-alt: #20252B;   /* PanelContentAltBrush */
    --wpf-selected: #232930;    /* SelectedTabBrush */
    --wpf-border: #2B3036;      /* PanelBorderLineBrush */
    --wpf-line: #2E343B;        /* LineBrush */
    --wpf-text: #D7DCE2;        /* ForegroundBrush */
    --wpf-muted: #98A2AD;       /* MutedForegroundBrush */
    --wpf-accent: #90EE00;      /* AccentBrush (lime) */
    --wpf-accent-muted: #5D8F10;/* AccentMutedBrush */
    --wpf-gold: #E0C070;        /* label/header foreground used across the WPF views */
    --wpf-hp: #C03030;
    --wpf-mp: #356BDB;
    --wpf-cp: #E0C070;

    --bs-body-bg: var(--wpf-bg);
    --bs-body-color: var(--wpf-text);
    --bs-secondary-color: var(--wpf-muted);
    --bs-tertiary-color: var(--wpf-muted);
    --bs-emphasis-color: #EAF0F5;
    --bs-border-color: var(--wpf-border);
    --bs-primary: var(--wpf-accent);
    --bs-primary-rgb: 144, 238, 0;
    --bs-link-color: #6FB2F0;
    --bs-link-hover-color: #92C6F5;
}

html, body {
    font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--wpf-bg);
    color: var(--wpf-text);
}

h1, h2, h3, h4, h5 { color: var(--wpf-gold); }
h1:focus { outline: none; }
a, .btn-link { color: var(--bs-link-color); }
hr { border-color: var(--wpf-line); opacity: 1; }
code { color: var(--wpf-gold); }

.content { padding-top: 1.1rem; }

/* Panels ------------------------------------------------------------------ */
.card {
    --bs-card-bg: var(--wpf-panel);
    --bs-card-cap-bg: var(--wpf-panel-cap);
    --bs-card-border-color: var(--wpf-border);
    --bs-card-color: var(--wpf-text);
}
.card-header { color: var(--wpf-gold); font-weight: 600; }
.list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-border-color: var(--wpf-border);
    --bs-list-group-color: var(--wpf-text);
}

.alert-info { --bs-alert-bg: var(--wpf-panel-cap); --bs-alert-border-color: var(--wpf-border); --bs-alert-color: var(--wpf-text); }
.alert-warning { --bs-alert-bg: #2a2410; --bs-alert-border-color: #5a4d1a; --bs-alert-color: var(--wpf-gold); }

/* Tabs -------------------------------------------------------------------- */
.nav-pills .nav-link { color: var(--wpf-muted); }
.nav-pills .nav-link:hover { color: var(--wpf-text); background-color: var(--wpf-panel-alt); }
.nav-pills .nav-link.active { background-color: var(--wpf-selected); color: var(--wpf-accent); }

/* Tables & inputs --------------------------------------------------------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--wpf-text);
    --bs-table-border-color: var(--wpf-border);
}
.table > thead { color: var(--wpf-muted); }

.form-control, .form-select {
    background-color: var(--wpf-panel-cap);
    color: var(--wpf-text);
    border-color: var(--wpf-border);
}
.form-control:focus, .form-select:focus {
    background-color: var(--wpf-panel-cap);
    color: var(--wpf-text);
    border-color: var(--wpf-accent);
    box-shadow: 0 0 0 .15rem rgba(144, 238, 0, .25);
}
.form-check-input:checked { background-color: var(--wpf-accent); border-color: var(--wpf-accent); }
.form-check-input:focus { border-color: var(--wpf-accent); box-shadow: 0 0 0 .15rem rgba(144, 238, 0, .25); }

/* Buttons - lime is the primary/go accent, semantic colours for the rest --- */
.btn-primary {
    --bs-btn-color: #16240A; --bs-btn-bg: var(--wpf-accent); --bs-btn-border-color: var(--wpf-accent);
    --bs-btn-hover-color: #16240A; --bs-btn-hover-bg: #A3F52A; --bs-btn-hover-border-color: #A3F52A;
    --bs-btn-active-color: #16240A; --bs-btn-active-bg: #7FD400; --bs-btn-active-border-color: #7FD400;
}
.btn-success {
    --bs-btn-color: #EAF0F5; --bs-btn-bg: #3F7D2E; --bs-btn-border-color: #3F7D2E;
    --bs-btn-hover-color: #EAF0F5; --bs-btn-hover-bg: #4A9138; --bs-btn-hover-border-color: #4A9138;
}
.btn-warning {
    --bs-btn-color: #16240A; --bs-btn-bg: #F4B100; --bs-btn-border-color: #F4B100;
    --bs-btn-hover-color: #16240A; --bs-btn-hover-bg: #FFC01F; --bs-btn-hover-border-color: #FFC01F;
}
.btn-outline-danger {
    --bs-btn-color: #E27A7A; --bs-btn-border-color: #7A3030;
    --bs-btn-hover-bg: #C03030; --bs-btn-hover-border-color: #C03030; --bs-btn-hover-color: #fff;
}
.btn-outline-secondary {
    --bs-btn-color: var(--wpf-muted); --bs-btn-border-color: var(--wpf-border);
    --bs-btn-hover-bg: var(--wpf-panel-alt); --bs-btn-hover-color: var(--wpf-text); --bs-btn-hover-border-color: var(--wpf-line);
}

/* HP/MP/CP meters --------------------------------------------------------- */
.progress { background-color: var(--wpf-panel-alt); }
.bar-hp { background-color: var(--wpf-hp) !important; }
.bar-mp { background-color: var(--wpf-mp) !important; }
.bar-cp { background-color: var(--wpf-cp) !important; }

/* Blazor scaffolding ------------------------------------------------------ */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

#blazor-error-ui {
    background: #2a2410;
    color: var(--wpf-gold);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.blazor-error-boundary { background: #b32121; padding: 1rem; color: white; }
.blazor-error-boundary::after { content: "An error has occurred." }

/* ===== Docked-pane dashboard - mirrors the WPF AvalonDock main window =====
   Column widths come from the WPF's own DockWidths: the accounts/user-stats column is sized
   by its 208px VistaProBars, and the right column is the DockWidth="220" mobs pane plus its
   scrollbar. The Messages row is the WPF's DockHeight="150", and the status bar its
   StatusBar row. */
.app-shell {
    display: grid;
    grid-template-columns: 214px minmax(0, 1fr) 252px;
    grid-template-rows: 26px minmax(0, 1fr) 150px 22px;
    grid-template-areas:
        "menu   menu    menu"
        "left   center  right"
        "left   msgs    msgs"
        "status status  status";
    gap: 3px;
    padding: 3px;
    height: 100vh;
    background: var(--wpf-bg);
    font-size: 0.82rem;
}
.shell-menu { grid-area: menu; display: flex; align-items: center; }
.shell-left { grid-area: left; display: flex; flex-direction: column; gap: 3px; min-height: 0; }
.shell-center { grid-area: center; min-width: 0; min-height: 0; display: flex; }
.shell-right { grid-area: right; min-height: 0; display: flex; flex-direction: column; gap: 3px; }
.shell-msgs { grid-area: msgs; min-height: 0; display: flex; }
.shell-status {
    grid-area: status; display: flex; align-items: center; padding: 0 0.5rem;
    background: var(--wpf-panel-cap); border: 1px solid var(--wpf-border); color: var(--wpf-text);
    font-size: 0.78rem;
}

.menubar { display: flex; align-items: center; gap: 0; height: 100%; }
.menubar .menu-item { position: relative; padding: 0.1rem 0.7rem; color: var(--wpf-text); cursor: default; user-select: none; }
.menubar .menu-item:hover, .menubar .menu-item.open { background: var(--wpf-selected); }
.menu-drop {
    position: absolute; top: 100%; left: 0; z-index: 40; min-width: 250px;
    background: var(--wpf-panel-cap); border: 1px solid var(--wpf-border);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45); padding: 2px 0;
}
.menu-row { padding: 0.2rem 0.9rem; color: var(--wpf-text); white-space: nowrap; cursor: pointer; }
.menu-row:hover { background: var(--wpf-selected); color: var(--wpf-accent); }
.menu-sep { height: 1px; margin: 3px 0; background: var(--wpf-line); }

/* VistaProBar - the dark track with a coloured 1px border, a filled portion, the glass sheen
   across the top half, and centred cur/max text (ShowPosText + ShowCurMax). */
.userstats { padding: 0; }
.vbar { position: relative; margin: 0; background: #101215; border: 1px solid; overflow: hidden; }
.vbar-fill { position: absolute; inset: 0 auto 0 0; }
.vbar-sheen { position: absolute; inset: 0 0 50% 0; background: rgba(255, 255, 255, 0.16); pointer-events: none; }
.vbar-txt {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000;
}

/* Pane frame -------------------------------------------------------------- */
.pane { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; min-width: 0; background: var(--wpf-panel); border: 1px solid var(--wpf-border); overflow: hidden; }
.pane.grow { flex: 1 1 auto; }
.pane.fixed { flex: 0 0 auto; }
.pane-title { flex: 0 0 auto; height: 23px; display: flex; align-items: center; justify-content: space-between; padding: 0 0.5rem; background: var(--wpf-panel-cap); border-bottom: 1px solid var(--wpf-border); color: var(--wpf-text); }
.pane-title .caps { display: flex; gap: 0.5rem; color: var(--wpf-muted); }
.pane-body { flex: 1 1 auto; overflow: auto; min-height: 0; }
.pane-tabs { flex: 0 0 auto; display: flex; background: var(--wpf-bg); border-top: 1px solid var(--wpf-border); }
.pane-tabs .tab { padding: 0.12rem 0.65rem; color: var(--wpf-muted); border-right: 1px solid var(--wpf-border); cursor: pointer; white-space: nowrap; }
.pane-tabs .tab:hover { color: var(--wpf-text); background: var(--wpf-panel-alt); }
.pane-tabs .tab.active { background: var(--wpf-selected); color: var(--wpf-accent); }

/* Account tree + its side toolbar ----------------------------------------- */
.acct-split { flex: 1 1 auto; display: flex; min-height: 0; }
.acct-tree { flex: 1 1 auto; min-width: 0; }
.acct-tools {
    flex: 0 0 24px; display: flex; flex-direction: column; align-items: center; padding-top: 1px;
    background: var(--wpf-panel-alt); border-left: 1px solid var(--wpf-border);
}
.toolbtn {
    width: 22px; height: 22px; margin: 1px 0; padding: 0; display: flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent; cursor: pointer;
}
.toolbtn:hover { background: var(--wpf-selected); border-color: var(--wpf-border); }

/* A party group node - bold, like the WPF PartyGroup template. */
.acct-group { padding: 0.25rem 0.4rem 0.1rem; color: var(--wpf-text); font-size: 0.78rem; font-weight: 700; cursor: pointer; }
.acct-group:hover { background: var(--wpf-panel-alt); }
.acct-group.selected { background: var(--wpf-selected); }
.acct-row { display: flex; align-items: center; gap: 0.3rem; padding: 0.16rem 0.4rem; cursor: pointer; height: 24px; }
.acct-row.indent { padding-left: 0.9rem; }
.acct-row:hover { background: var(--wpf-panel-alt); }
.acct-row.selected { background: var(--wpf-selected); }
/* The four indicator states of the WPF status dot. */
.acct-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; border: 1px solid; }
.acct-dot.inworld { background: #53C653; border-color: #2D8A2D; }
.acct-dot.loggedin { background: #E6C619; border-color: #A9920F; }
.acct-dot.disconnected { background: #D9534F; border-color: #A33D3A; }
.acct-skull { width: 11px; flex: 0 0 auto; color: #E8E8E8; font-size: 0.72rem; line-height: 1; text-align: center; }
.acct-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.74rem; }
.acct-lvl { color: #BFBFBF; font-size: 0.74rem; font-weight: 700; min-width: 1.1rem; text-align: center; }
.mini-bars { display: flex; gap: 2px; flex: 0 0 auto; }
.mini-bar { width: 24px; height: 12px; border: 1px solid; overflow: hidden; }

/* Mobs / lists ------------------------------------------------------------ */
.grid-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.grid-table th { position: sticky; top: 0; background: var(--wpf-panel-cap); color: var(--wpf-muted); text-align: left; font-weight: 600; padding: 0.15rem 0.35rem; border-bottom: 1px solid var(--wpf-border); }
.grid-table td { padding: 0.08rem 0.35rem; border-bottom: 1px solid var(--wpf-line); white-space: nowrap; }
.grid-table tr:hover td { background: var(--wpf-panel-alt); }
/* The Information / Target inspectors are name-value pairs with nothing to head. */
.grid-table.nohead td:first-child { color: var(--wpf-muted); }
/* The current target's row, the WPF ListViewItem IsTarget trigger. */
.grid-table tr.is-target td { background: #1B5FB5; color: #fff; font-weight: 700; }
.hp-mini { height: 9px; background: #3A1414; overflow: hidden; }
.hp-mini > span { display: block; height: 100%; background: var(--wpf-hp); }

/* A pane with two stacked strips (the WPF Group/Character panes' own nested TabControl). */
.pane-tabs.sub { background: var(--wpf-panel-cap); border-top: 1px solid var(--wpf-border); border-bottom: none; }
.subtabs.inner { margin: 0; }

/* Map pane ---------------------------------------------------------------- */
.map { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.map-bar {
    flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 3px 6px; background: var(--wpf-panel-cap); border-bottom: 1px solid var(--wpf-border);
    font-size: 0.76rem;
}
.map-bar .chk { display: inline-flex; align-items: center; gap: 4px; color: var(--wpf-text); cursor: pointer; white-space: nowrap; }
.map-bar .chk input { accent-color: var(--wpf-accent); }
.map-bar .lbl { color: var(--wpf-muted); }
.map-bar .ei {
    background: var(--wpf-panel); color: var(--wpf-text);
    border: 1px solid var(--wpf-border); height: 20px; font-size: 0.76rem;
}
.map-sep { width: 1px; height: 14px; background: var(--wpf-border); }
.map-status { margin-left: auto; color: var(--wpf-muted); }

/* The zone authoring strip - the desktop map's right-click cluster, which a browser has no
   equivalent of, laid out as a second toolbar row. */
.zone-bar { border-bottom: 1px solid var(--wpf-border); }
.zone-bar .eb {
    background: var(--wpf-panel); color: var(--wpf-text); border: 1px solid var(--wpf-border);
    height: 20px; padding: 0 8px; font-size: 0.76rem; cursor: pointer;
}
.zone-bar .eb:hover:not(:disabled) { border-color: var(--wpf-accent-muted); color: var(--wpf-accent); }
.zone-bar .eb:disabled { opacity: 0.4; cursor: default; }
.zone-bar .eb.on { border-color: var(--wpf-accent); color: var(--wpf-accent); }
.zone-bar .eb.danger { border-color: #B22222; color: #E23B3B; }
.zone-bar .ei { height: 20px; font-size: 0.76rem; }

/* The canvas fills the pane and is sized in CSS; its backing store follows the element size
   and the device pixel ratio (see gamemap.js resize), so it stays sharp when scaled. */
.map-canvas-wrap { flex: 1 1 auto; min-height: 0; position: relative; background: #0d0f11; }
.map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }

/* Script pane -------------------------------------------------------------- */
.se { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.se-bar {
    flex: 0 0 auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 3px 6px; background: var(--wpf-panel-cap); border-bottom: 1px solid var(--wpf-border);
    font-size: 0.76rem;
}
.se-bar .eb {
    background: var(--wpf-panel); color: var(--wpf-text); border: 1px solid var(--wpf-border);
    height: 20px; padding: 0 8px; font-size: 0.76rem; cursor: pointer;
}
.se-bar .eb:hover:not(:disabled) { border-color: var(--wpf-accent-muted); color: var(--wpf-accent); }
.se-bar .eb:disabled { opacity: 0.4; cursor: default; }
.se-bar .eb.go { border-color: var(--wpf-accent-muted); color: var(--wpf-accent); }
.se-bar .eb.danger { border-color: #B22222; color: #E23B3B; }
.se-bar .ei {
    background: var(--wpf-panel); color: var(--wpf-text);
    border: 1px solid var(--wpf-border); height: 20px; font-size: 0.76rem;
}
.se-status { margin-left: auto; color: var(--wpf-muted); display: flex; gap: 10px; }
.se-running { color: var(--wpf-gold); font-weight: 700; }
.se-msg { color: var(--wpf-accent); }

/* Monaco owns everything inside this element and lays itself out (automaticLayout), so it only
   needs a sized box to fill. Its own theme is defined in scripteditor.js from the same --wpf-*
   palette the rest of the app uses. */
.se-editor {
    flex: 1 1 auto; min-height: 0; min-width: 0;
    border-top: 1px solid var(--wpf-border);
    background: var(--wpf-panel);
}

/* Messages log ------------------------------------------------------------ */
.msg-log { font-family: 'Consolas', 'Courier New', monospace; font-size: 0.76rem; padding: 0.2rem 0.4rem; }
.msg-line { display: flex; justify-content: space-between; gap: 1rem; }
.msg-line .msg-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-line .msg-time { color: var(--wpf-muted); flex: 0 0 auto; }
/* The pane-title actions standing in for the WPF's right-click context menu. */
.linkbtn { background: none; border: none; padding: 0; color: var(--wpf-muted); font-size: 0.72rem; cursor: pointer; }
.linkbtn:hover { color: var(--wpf-accent); }

.pane-empty { color: var(--wpf-muted); padding: 0.6rem; font-size: 0.8rem; }

/* ---------------------------------------------------------------------------
   Sign-in pages (AuthLayout and the components inside it).

   Global rather than a scoped .razor.css: AuthLayout renders Login/Register as
   CHILD components, and Blazor's scoped CSS does not cascade across that
   boundary - the same reason config.css exists.
   --------------------------------------------------------------------------- */

.auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: var(--wpf-bg);
    color: var(--wpf-text);
    font-family: Tahoma, Verdana, sans-serif;
    font-size: 12px;
    padding: 24px;
}

.auth-brand {
    color: var(--wpf-accent);
    font-size: 20px;
    letter-spacing: 1px;
}

.auth-card {
    width: 340px;
    max-width: 100%;
    background: var(--wpf-panel);
    border: 1px solid var(--wpf-border);
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-title {
    color: var(--wpf-gold);
    font-size: 14px;
    font-weight: normal;
    margin: 0 0 2px;
}

.auth-note {
    color: var(--wpf-muted);
    margin: 0;
    line-height: 1.5;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.auth-field > label {
    color: var(--wpf-muted);
}

.auth-field > input {
    background: var(--wpf-bg);
    border: 1px solid var(--wpf-line);
    color: var(--wpf-text);
    padding: 6px 8px;
    font-family: inherit;
    font-size: 12px;
}

.auth-field > input:focus {
    outline: none;
    border-color: var(--wpf-accent-muted);
}

.auth-btn {
    background: var(--wpf-panel-alt);
    border: 1px solid var(--wpf-border);
    color: var(--wpf-text);
    padding: 7px 10px;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

.auth-btn:hover {
    border-color: var(--wpf-accent-muted);
    color: var(--wpf-accent);
}

.auth-btn.primary {
    border-color: var(--wpf-accent-muted);
    color: var(--wpf-accent);
}

.auth-error {
    color: #E06666;
    line-height: 1.5;
}

.auth-links {
    display: flex;
    justify-content: space-between;
    color: var(--wpf-muted);
}

.auth-links a {
    color: var(--wpf-muted);
}

.auth-links a:hover {
    color: var(--wpf-accent);
}

.auth-wait {
    padding: 24px;
    color: var(--wpf-muted);
    background: var(--wpf-bg);
    font-family: Tahoma, Verdana, sans-serif;
    font-size: 12px;
}

/* The signed-in user and the way out, in the menu bar's right-hand end. */
.shell-user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 8px;
    color: var(--wpf-muted);
}

.shell-user form {
    display: inline;
}

.shell-user button {
    background: none;
    border: none;
    color: var(--wpf-muted);
    font: inherit;
    cursor: pointer;
    padding: 0;
}

.shell-user button:hover {
    color: var(--wpf-accent);
}

/* Admin: users and invites. Same table look as the config rule tables. */
.admin { padding: 8px 10px 14px; overflow: auto; }
.admin-cap { margin-top: 18px; }

.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 6px;
}

.admin-table th {
    text-align: left;
    color: var(--wpf-gold);
    font-weight: normal;
    border-bottom: 1px solid var(--wpf-line);
    padding: 4px 6px;
}

.admin-table td {
    padding: 3px 6px;
    border-bottom: 1px solid var(--wpf-border);
}

.admin-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.admin-check { display: flex; align-items: center; gap: 4px; color: var(--wpf-muted); }
.admin-muted { color: var(--wpf-muted); }
.admin-code { font-family: Consolas, monospace; color: var(--wpf-accent); }
.st-on { color: var(--wpf-accent); }
.st-off { color: #E06666; }

/* Relay setup page. */
.relay-page { padding: 10px 12px 16px; }
.relay-note { color: var(--wpf-muted); line-height: 1.6; margin: 6px 0 12px; max-width: 620px; }
.relay-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 8px 0; }
.relay-choice { display: flex; align-items: center; gap: 6px; }
.relay-warn { color: #E0C070; line-height: 1.6; max-width: 620px; margin: 8px 0; }
.relay-steps { color: var(--wpf-text); line-height: 1.8; padding-left: 20px; max-width: 620px; }
.relay-steps code { color: var(--wpf-accent); }
.relay-pre {
    background: var(--wpf-bg);
    border: 1px solid var(--wpf-line);
    color: var(--wpf-text);
    padding: 8px 10px;
    margin: 6px 0;
    overflow-x: auto;
    font-family: Consolas, monospace;
}
.relay-token { color: var(--wpf-accent); word-break: break-all; white-space: pre-wrap; }
.eb.danger { border-color: #7A3030; color: #E06666; }