:root {
    color-scheme: dark;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-synthesis: none;
    text-rendering: geometricPrecision;
    --legend-surface: rgba(32, 32, 32, 0.4);
    --legend-surface-hover: rgba(255, 255, 255, 0.065);
    --legend-surface-active: rgba(255, 255, 255, 0.115);
    --legend-text: rgb(245, 245, 245);
    --legend-muted: rgb(166, 166, 174);
    --legend-gap: 4px;
    --legend-motion: 200ms;
    --legend-ease: cubic-bezier(0.05, 0.39, 0.42, 0.94);
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-width: 1280px;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #000;
}

body {
    color: var(--legend-text);
    background:
        radial-gradient(
            179.87% 100% at 48.85% 0%,
            rgba(149, 150, 164, 0.6) 0%,
            rgba(69, 70, 80, 0.6) 23.92%,
            rgba(42, 42, 44, 0.24) 54.5%,
            rgba(18, 18, 18, 0.12) 80.41%,
            rgba(0, 0, 0, 0) 100%
        ),
        #000;
}

button {
    color: inherit;
    font: inherit;
}

.dashboard-shell-active #root {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.trading-shell {
    position: relative;
    width: 100vw;
    height: 100vh;
    min-height: 0;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 212px minmax(0, 1fr);
    gap: var(--legend-gap);
    padding: var(--legend-gap);
    isolation: isolate;
}

.dashboard-shell-active .trading-shell {
    height: auto;
}

.trading-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(58% 36% at 12% -8%, rgba(255, 255, 255, 0.09), transparent 76%),
        linear-gradient(115deg, rgba(255, 255, 255, 0.025), transparent 38%);
    mix-blend-mode: screen;
}

.legend-sidebar {
    position: relative;
    z-index: 20;
    min-width: 0;
    height: 100%;
    overflow: visible;
    border: 1px solid transparent;
    border-radius: 2px;
    background: var(--legend-surface);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
}

.legend-sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 30%);
}

.sidebar-brand {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 7px 0 12px;
}

.sidebar-header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.sidebar-icon-button {
    position: relative;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 4px;
    color: rgb(174,174,182);
    background: transparent;
    cursor: pointer;
    transition:
        color var(--legend-motion) var(--legend-ease),
        background-color var(--legend-motion) var(--legend-ease),
        transform 100ms ease;
}

.sidebar-icon-button:hover {
    color: rgb(245,245,245);
    background: rgba(255,255,255,.07);
}

.sidebar-icon-button:active {
    transform: scale(.92);
}

.sidebar-icon-button:focus-visible {
    outline: 2px solid rgba(255,255,255,.72);
    outline-offset: -2px;
}

.notification-glyph {
    position: relative;
    width: 14px;
    height: 15px;
    display: block;
}

.notification-glyph::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border: 1.5px solid currentColor;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    border-bottom: 0;
}

.notification-glyph::after {
    content: "";
    position: absolute;
    bottom: 1px;
    left: 3px;
    width: 8px;
    height: 3px;
    border-top: 1.5px solid currentColor;
    border-radius: 50%;
    box-shadow: 0 2px 0 -1px currentColor;
}

.notification-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 5px;
    height: 5px;
    border: 1px solid rgb(48,48,51);
    border-radius: 50%;
    background: rgb(0,200,5);
    box-shadow: 0 0 7px rgba(0,200,5,.42);
    transition: opacity 100ms var(--legend-ease), transform 100ms var(--legend-ease);
}

.events-button[aria-expanded="true"] {
    color: rgb(245,245,245);
    background: rgba(255,255,255,.09);
}

.events-button[aria-expanded="true"] .notification-dot {
    opacity: 0;
    transform: scale(.4);
}

.user-avatar-glyph {
    position: relative;
    width: 22px;
    height: 22px;
    display: block;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 50%;
    background: rgba(255,255,255,.055);
    transition:
        border-color var(--legend-motion) var(--legend-ease),
        background-color var(--legend-motion) var(--legend-ease),
        box-shadow var(--legend-motion) var(--legend-ease);
}

.user-avatar-glyph::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.user-avatar-glyph::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 4px;
    width: 12px;
    height: 7px;
    border-radius: 8px 8px 3px 3px;
    background: currentColor;
}

.sidebar-icon-button:hover .user-avatar-glyph {
    border-color: rgba(255,255,255,.42);
    background: rgba(255,255,255,.09);
    box-shadow: 0 0 12px rgba(255,255,255,.06);
}

.user-profile-button[aria-expanded="true"] {
    color: rgb(245,245,245);
    background: rgba(255,255,255,.09);
}

.events-popover {
    position: fixed;
    z-index: 100;
    top: 44px;
    left: 212px;
    width: 336px;
    height: min(521px, calc(100vh - 56px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    color: rgb(245,245,245);
    background: linear-gradient(145deg,rgba(45,45,48,.9),rgba(27,27,29,.86));
    -webkit-backdrop-filter: blur(30px) saturate(130%);
    backdrop-filter: blur(30px) saturate(130%);
    box-shadow:
        0 28px 90px rgba(0,0,0,.62),
        inset 0 1px rgba(255,255,255,.08),
        inset 0 -1px rgba(255,255,255,.025);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-5px) scale(.99);
    transform-origin: 44% top;
    transition:
        opacity 100ms var(--legend-ease),
        transform 100ms var(--legend-ease),
        visibility 0s linear 100ms;
}

.events-popover.is-dragging {
    transition: none;
    user-select: none;
}

.events-popover.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

.events-popover-header {
    height: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 12px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(45,45,48,.32);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.events-popover.is-dragging .events-popover-header {
    cursor: grabbing;
}

.events-popover-header > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.floating-panel-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.floating-close {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    padding: 0 0 2px;
    border: 0;
    border-radius: 4px;
    color: rgb(148,148,157);
    background: transparent;
    font-size: 18px;
    font-weight: 350;
    line-height: 1;
    cursor: pointer;
    transition:
        color var(--legend-motion) var(--legend-ease),
        background-color var(--legend-motion) var(--legend-ease),
        transform 100ms ease;
}

.floating-close:hover {
    color: rgb(245,245,245);
    background: rgba(255,255,255,.075);
}

.floating-close:active {
    transform: scale(.9);
}

.floating-close:focus-visible {
    outline: 2px solid rgba(255,255,255,.72);
    outline-offset: -2px;
}

.events-popover-header h2 {
    margin: 0;
    font-size: 13px;
    font-weight: 650;
    line-height: 18px;
    letter-spacing: -.01em;
}

.events-header-glyph {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: rgb(115,168,255);
    box-shadow: 0 0 9px rgba(115,168,255,.22);
}

.events-status {
    padding: 3px 6px;
    border-radius: 8px;
    color: rgb(151,190,255);
    background: rgba(115,168,255,.09);
    font-size: 8px;
    font-weight: 680;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.events-empty-state {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
    background: rgba(0,0,0,.06);
}

.events-empty-glyph {
    position: relative;
    width: 30px;
    height: 31px;
    margin-bottom: 16px;
    color: rgb(115,115,124);
}

.events-empty-glyph::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 4px;
    width: 20px;
    height: 20px;
    border: 2px solid currentColor;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    border-bottom: 0;
}

.events-empty-glyph::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 6px;
    width: 18px;
    height: 6px;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    box-shadow: 0 4px 0 -2px currentColor;
}

.events-empty-state h3 {
    margin: 0;
    color: rgb(224,224,228);
    font-size: 13px;
    font-weight: 650;
    line-height: 18px;
}

.events-empty-state p {
    max-width: 240px;
    margin: 7px 0 0;
    color: rgb(128,128,137);
    font-size: 10px;
    line-height: 15px;
}

.events-live-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: rgba(0,0,0,.12);
}

.events-list-panel,
.terminal-output-panel {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.events-list-panel {
    flex: 0 0 auto;
    max-height: 46%;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.terminal-output-panel {
    flex: 1 1 auto;
}

.events-list-panel > header,
.terminal-output-panel > header {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 12px;
    border-bottom: 1px solid rgba(255,255,255,.05);
    color: rgb(199,213,239);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.events-list-panel > header small {
    color: rgb(120,139,169);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: none;
}

.events-list,
.terminal-log-list {
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
}

.event-row {
    display: grid;
    grid-template-columns: 9px minmax(0,1fr);
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 6px;
    background: rgba(255,255,255,.025);
}

.event-row + .event-row {
    margin-top: 6px;
}

.event-row-dot {
    width: 7px;
    height: 7px;
    margin-top: 4px;
    border-radius: 50%;
    background: rgb(115,168,255);
    box-shadow: 0 0 10px rgba(115,168,255,.3);
}

.event-row-success .event-row-dot {
    background: rgb(45,226,166);
    box-shadow: 0 0 10px rgba(45,226,166,.3);
}

.event-row-warning .event-row-dot {
    background: rgb(255,204,102);
    box-shadow: 0 0 10px rgba(255,204,102,.28);
}

.event-row-error .event-row-dot {
    background: rgb(255,82,109);
    box-shadow: 0 0 10px rgba(255,82,109,.3);
}

.event-row p,
.terminal-log p {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.event-row p {
    color: rgb(228,233,242);
    font-size: 11px;
    line-height: 15px;
}

.event-row time {
    display: block;
    margin-top: 3px;
    color: rgb(112,130,162);
    font-family: var(--font-mono);
    font-size: 9px;
}

.events-empty-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 190px;
    padding: 24px;
    text-align: center;
}

.terminal-copy-button {
    height: 22px;
    padding: 0 8px;
    border: 1px solid rgba(0,210,255,.26);
    border-radius: 5px;
    color: rgb(72,217,255);
    background: rgba(0,210,255,.08);
    font-size: 9px;
    font-weight: 780;
    cursor: pointer;
}

.terminal-log {
    display: grid;
    grid-template-columns: auto 10px minmax(0,1fr);
    gap: 6px;
    padding: 3px 0;
    color: rgb(190,200,217);
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 15px;
}

.terminal-log time {
    color: rgb(104,121,151);
}

.terminal-log > span {
    color: rgb(45,226,166);
}

.terminal-log-error,
.terminal-log-error > span {
    color: rgb(255,112,132);
}

.terminal-log-warning,
.terminal-log-warning > span {
    color: rgb(255,204,102);
}

.terminal-log-success,
.terminal-log-success > span {
    color: rgb(45,226,166);
}

.terminal-log-empty {
    color: rgb(112,130,162);
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 18px 0;
    text-align: center;
}

.notification-dot.has-events {
    opacity: 1;
    transform: scale(1);
}

.vylmoon-toast-host {
    position: fixed;
    inset: 0;
    z-index: 3000;
    pointer-events: none;
}

.vylmoon-toast-stack {
    position: absolute;
    top: 16px;
    right: 16px;
    width: max-content;
    max-width: min(360px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vylmoon-toast {
    pointer-events: auto;
    display: flex;
    gap: 12px;
    align-items: start;
    padding: 12px 16px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 8px;
    color: rgb(229,231,235);
    background: rgba(0,0,0,.70);
    box-shadow: 0 0 15px rgba(0,0,0,.40);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-family: "Nunito Sans", sans-serif;
    font-size: 14px;
    max-width: 360px;
    animation: vylmoon-toast-in 200ms ease-out;
}

.vylmoon-toast.is-closing {
    animation: vylmoon-toast-out 160ms ease-in forwards;
}

.vylmoon-toast-success {
    border-color: rgba(0,230,118,.50);
    color: rgb(0,230,118);
    background: rgba(0,230,118,.10);
}

.vylmoon-toast-error {
    border-color: rgba(239,68,68,.50);
    color: rgb(239,68,68);
    background: rgba(239,68,68,.10);
}

.vylmoon-toast-warning {
    border-color: rgba(234,179,8,.50);
    color: rgb(234,179,8);
    background: rgba(234,179,8,.10);
}

.vylmoon-toast-info {
    border-color: rgba(0,210,255,.50);
    color: rgb(0,210,255);
    background: rgba(0,210,255,.10);
}

.vylmoon-toast-icon {
    width: 20px;
    flex: 0 0 20px;
    color: inherit;
    font-family: "JetBrains Mono", monospace;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.vylmoon-toast-message {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    color: inherit;
    line-height: 1.625;
}

.vylmoon-toast-close {
    width: 20px;
    height: 20px;
    margin-left: 8px;
    border: 0;
    padding: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
    opacity: .60;
}

.vylmoon-toast-close:hover {
    opacity: 1;
}

.vylmoon-confirm-overlay {
    pointer-events: auto;
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(0,0,0,.68);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.vylmoon-confirm {
    width: min(420px, 100%);
    padding: 20px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    color: rgb(238,242,248);
    background: rgb(12,18,30);
    box-shadow: 0 24px 70px rgba(0,0,0,.55);
}

.vylmoon-confirm p {
    margin: 0;
    color: rgb(220,228,240);
    font-size: 13px;
    line-height: 20px;
    white-space: pre-line;
}

.vylmoon-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

.vylmoon-confirm-actions button {
    min-height: 34px;
    padding: 0 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

.vylmoon-confirm-cancel {
    border: 1px solid rgba(255,255,255,.12);
    color: rgb(172,182,202);
    background: transparent;
}

.vylmoon-confirm-ok {
    border: 1px solid rgba(72,217,255,.35);
    color: rgb(5,12,18);
    background: rgb(72,217,255);
}

.vylmoon-confirm-ok.is-danger {
    border-color: rgba(255,82,109,.5);
    color: rgb(255,255,255);
    background: rgb(207,45,69);
}

@keyframes vylmoon-toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes vylmoon-toast-out {
    to { opacity: 0; transform: translateX(20px); }
}

.user-popover {
    position: fixed;
    z-index: 101;
    top: 44px;
    left: 212px;
    width: 320px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    color: rgb(245,245,245);
    background: linear-gradient(145deg,rgba(45,45,48,.9),rgba(27,27,29,.86));
    -webkit-backdrop-filter: blur(30px) saturate(130%);
    backdrop-filter: blur(30px) saturate(130%);
    box-shadow:
        0 28px 90px rgba(0,0,0,.62),
        inset 0 1px rgba(255,255,255,.08),
        inset 0 -1px rgba(255,255,255,.025);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-5px) scale(.99);
    transform-origin: 36% top;
    transition:
        opacity 100ms var(--legend-ease),
        transform 100ms var(--legend-ease),
        visibility 0s linear 100ms;
}

.user-popover.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

.user-popover-header {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 9px 0 12px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(45,45,48,.32);
}

.user-popover-header > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.user-popover-header h2 {
    margin: 0;
    font-size: 13px;
    font-weight: 650;
    line-height: 18px;
}

.user-header-glyph {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgb(176,176,184);
    box-shadow: 0 0 9px rgba(255,255,255,.14);
}

.user-profile-summary {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0,1fr);
    align-items: center;
    gap: 12px;
    padding: 18px 16px;
    background: rgba(0,0,0,.12);
}

.user-demo-avatar {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: rgb(238,235,255);
    background: linear-gradient(145deg, rgba(137,92,246,.88), rgba(91,72,170,.78));
    box-shadow: 0 8px 22px rgba(71,45,145,.24);
    font-size: 13px;
    font-weight: 720;
    letter-spacing: .04em;
}

.user-profile-summary h3 {
    margin: 0;
    color: rgb(242,242,244);
    font-size: 14px;
    font-weight: 680;
    line-height: 18px;
}

.user-profile-summary p {
    overflow: hidden;
    margin: 3px 0 0;
    color: rgb(132,132,141);
    font-size: 9px;
    line-height: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-online-state {
    position: absolute;
    right: 15px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgb(0,200,5);
    font-size: 8px;
    font-weight: 620;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.user-online-state i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgb(0,200,5);
    box-shadow: 0 0 7px rgba(0,200,5,.4);
}

.user-information-list {
    margin: 0;
    padding: 7px 16px 10px;
    background: rgba(0,0,0,.08);
}

.user-information-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 38px;
    border-bottom: 1px solid rgba(255,255,255,.055);
}

.user-information-list > div:last-child {
    border-bottom: 0;
}

.user-information-list dt {
    color: rgb(126,126,135);
    font-size: 9px;
    font-weight: 560;
}

.user-information-list dd {
    margin: 0;
    color: rgb(218,218,222);
    font-size: 10px;
    font-weight: 620;
    text-align: right;
}

.user-demo-note {
    margin: 0;
    padding: 10px 16px 12px;
    color: rgb(108,108,117);
    background: rgba(0,0,0,.16);
    font-size: 8px;
    line-height: 12px;
    text-align: center;
}

.brand-mark {
    position: relative;
    width: 24px;
    height: 28px;
    display: block;
    transform: rotate(-7deg);
}

.brand-wing {
    position: absolute;
    top: 3px;
    display: block;
    width: 9px;
    height: 22px;
    border-radius: 90% 18% 78% 18%;
    background: linear-gradient(160deg, #ffffff 0%, #bfc0c8 62%, #767781 100%);
}

.brand-wing-left {
    left: 4px;
    transform: skewY(-20deg);
}

.brand-wing-right {
    right: 3px;
    height: 17px;
    transform: translateY(7px) rotate(21deg) skewY(18deg);
    opacity: 0.88;
}

.sidebar-navigation {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px;
}

.sidebar-option {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 0;
    border-radius: 4px;
    outline: 0;
    color: var(--legend-muted);
    background: transparent;
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease;
}

.sidebar-option:hover {
    color: var(--legend-text);
    background: var(--legend-surface-hover);
}

.sidebar-option.is-active {
    color: var(--legend-text);
    background: var(--legend-surface-active);
}

.sidebar-option:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.75);
    outline-offset: -2px;
}

.option-icon {
    width: 14px;
    height: 14px;
    display: grid;
    grid-template-columns: 4px 7px;
    grid-template-rows: 6px 6px;
    gap: 2px;
    flex: 0 0 auto;
}

.option-icon span {
    display: block;
    border-radius: 1px;
    background: currentColor;
}

.option-icon span:first-child {
    grid-row: 1 / 3;
}

.option-chain-icon {
    position: relative;
    width: 14px;
    height: 14px;
    display: block;
    flex: 0 0 auto;
}

.option-chain-icon::before,
.option-chain-icon::after {
    content: "";
    position: absolute;
    top: 1px;
    width: 4px;
    height: 12px;
    border-radius: 1px;
    background:
        linear-gradient(currentColor,currentColor) 0 0 / 4px 3px no-repeat,
        linear-gradient(currentColor,currentColor) 0 4.5px / 4px 3px no-repeat,
        linear-gradient(currentColor,currentColor) 0 9px / 4px 3px no-repeat;
}

.option-chain-icon::before {
    left: 0;
}

.option-chain-icon::after {
    right: 0;
}

.option-chain-icon span {
    position: absolute;
    top: 2px;
    left: 6px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 4px 0 currentColor, 0 8px 0 currentColor;
}

.option-label {
    overflow: hidden;
    font-size: 14px;
    font-weight: 650;
    line-height: 20px;
    letter-spacing: -0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-canvas {
    position: relative;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--legend-gap);
    overflow: hidden;
    border: 0;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.035);
}

.dashboard-canvas::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(70% 50% at 44% 4%, rgba(255, 255, 255, 0.035), transparent 74%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 30%);
}

.information-bar {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 8px;
    border: 0;
    border-radius: 2px;
    background: var(--legend-surface);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
}

.information-left,
.metric-group,
.information-actions {
    display: flex;
    align-items: center;
}

.information-left {
    min-width: 0;
    height: 100%;
    gap: 20px;
}

.metric-group {
    height: 100%;
    gap: 20px;
}

.performance-metrics {
    gap: 22px;
}

.metric {
    min-width: 88px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    line-height: 1;
}

.metric-compact {
    min-width: 58px;
    align-items: center;
}

.metric-label {
    overflow: hidden;
    color: rgb(164, 164, 172);
    font-size: 9px;
    font-weight: 520;
    line-height: 11px;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.metric-value {
    color: rgb(245, 245, 245);
    font-size: 12px;
    font-weight: 650;
    line-height: 14px;
    letter-spacing: -0.015em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.metric-positive {
    color: rgb(0, 200, 5);
}

.metric-info {
    color: rgb(115, 168, 255);
}

.sync-status {
    min-width: 70px;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: rgb(117, 117, 126);
    font-size: 8px;
    font-weight: 500;
    line-height: 10px;
    letter-spacing: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.information-actions {
    height: 100%;
    gap: 6px;
    flex: 0 0 auto;
}

.system-control,
.panic-control,
.connection-status {
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border: 0;
    border-radius: 4px;
    color: rgb(230, 230, 232);
    background: rgba(255, 255, 255, 0.055);
    font-size: 10px;
    font-weight: 650;
    line-height: 12px;
    letter-spacing: 0;
    white-space: nowrap;
}

.system-control,
.panic-control {
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease, transform 80ms ease;
}

.system-control:hover,
.panic-control:hover {
    background: rgba(255, 255, 255, 0.09);
}

.system-control:active,
.panic-control:active {
    transform: translateY(1px);
}

.system-control:focus-visible,
.panic-control:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.72);
    outline-offset: -2px;
}

.control-dot,
.connection-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgb(0, 200, 5);
    box-shadow: 0 0 8px rgba(0, 200, 5, 0.45);
}

.system-control:not(.is-on) .control-dot {
    background: rgb(255, 90, 54);
    box-shadow: 0 0 8px rgba(255, 90, 54, 0.35);
}

.panic-control {
    color: rgb(255, 111, 85);
    background: rgba(255, 90, 54, 0.09);
}

.panic-control:hover {
    color: rgb(255, 144, 124);
    background: rgba(255, 90, 54, 0.15);
}

.ghost-scan-control {
    width: 38px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 4px;
    color: rgb(203, 183, 255);
    background: rgba(137, 92, 246, 0.11);
    box-shadow: inset 0 0 0 1px rgba(169, 136, 255, 0.28);
    font-size: 12px;
    font-weight: 780;
    line-height: 1;
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease, transform 80ms ease;
}

.ghost-scan-control:hover {
    color: rgb(232, 224, 255);
    background: rgba(137, 92, 246, 0.18);
}

.ghost-scan-control:active {
    transform: translateY(1px);
}

.ghost-scan-control:disabled {
    color: rgb(110, 104, 130);
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
    cursor: not-allowed;
}

.dashboard-notice-stack {
    position: relative;
    z-index: 3;
    display: grid;
    gap: 6px;
    margin: 6px 0;
}

.dashboard-global-banner-stack {
    flex: 0 0 auto;
    display: grid;
    gap: 0;
    width: 100%;
    background: transparent;
    border-bottom: 0;
}

.dashboard-global-banner-stack[hidden] {
    display: none;
}

.dashboard-global-banner {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 16px;
    border-bottom: 1px solid rgba(255,255,255,.055);
    color: rgb(221, 231, 247);
    background: rgba(13, 18, 28, .68);
}

.dashboard-announcement-banner {
    min-height: 30px;
    justify-content: center;
    padding: 6px 16px;
}

.dashboard-announcement-banner p {
    max-width: 100%;
    overflow: hidden;
    margin: 0;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 760;
}

.dashboard-global-banner.dashboard-announcement-banner.is-info {
    background: rgba(0, 210, 255, .2);
    border-bottom-color: rgba(0, 210, 255, .4);
    color: rgb(0, 210, 255);
}

.dashboard-global-banner.dashboard-announcement-banner.is-warning {
    background: rgba(234, 179, 8, .2);
    border-bottom-color: rgba(234, 179, 8, .4);
    color: rgb(234, 179, 8);
}

.dashboard-global-banner.dashboard-announcement-banner.is-error {
    background: rgba(239, 68, 68, .2);
    border-bottom-color: rgba(239, 68, 68, .4);
    color: rgb(239, 68, 68);
}

.dashboard-announcement-banner p {
    color: currentColor;
    font-size: 12px;
    font-weight: 800;
}

.dashboard-global-banner strong {
    color: rgb(72, 217, 255);
    font-size: 10px;
    font-weight: 780;
    letter-spacing: .075em;
    text-transform: uppercase;
}

.dashboard-global-banner p {
    margin: 2px 0 0;
    color: rgb(199, 207, 222);
    font-size: 10px;
    line-height: 1.35;
}

.dashboard-global-banner.dashboard-announcement-banner p {
    margin: 0;
    color: currentColor;
    font-family: "Nunito Sans", sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
}

.live-readiness-banner {
    min-height: 74px;
    padding: 9px 16px;
}

.dashboard-banner-icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border-radius: 4px;
    color: rgb(0, 210, 255);
    background: rgba(0, 210, 255, .10);
    box-shadow: inset 0 0 0 1px rgba(0, 210, 255, .36);
    font-size: 14px;
    font-weight: 820;
    line-height: 1;
}

.live-readiness-banner > div:first-child {
    min-width: 0;
}

.live-readiness-banner strong span {
    display: inline-flex;
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 4px;
    color: rgb(219, 225, 236);
    background: rgba(0,0,0,.22);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    font-size: 10px;
    font-weight: 720;
    letter-spacing: 0;
}

.live-readiness-side {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    max-width: 420px;
}

.live-progress-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
}

.live-progress-chip {
    width: 86px;
    min-height: 28px;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 4px;
    align-items: center;
    padding: 4px 7px;
    border-radius: 4px;
    color: rgb(142, 152, 174);
    background: rgba(0,0,0,.20);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.live-progress-chip b {
    overflow: hidden;
    font-size: 7px;
    font-weight: 780;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.live-progress-chip i {
    color: rgb(218, 224, 235);
    font-size: 8px;
    font-style: normal;
    font-weight: 760;
}

.live-progress-chip em {
    grid-column: 1 / -1;
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(0,0,0,.45);
}

.live-progress-chip u {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: rgb(0, 210, 255);
    text-decoration: none;
}

.live-progress-chip.is-done {
    color: rgb(0, 230, 118);
    background: rgba(0, 200, 5, .10);
    box-shadow: inset 0 0 0 1px rgba(0, 200, 5, .28);
}

.live-progress-chip.is-done u {
    background: rgb(0, 200, 5);
}

.dashboard-global-banner.is-info {
    border-color: rgba(0, 210, 255, .24);
    background: rgba(13, 24, 41, .76);
}

.dashboard-global-banner.is-warning {
    border-color: rgba(244, 197, 87, .35);
    background: rgba(48, 34, 10, .68);
}

.dashboard-global-banner.is-warning strong {
    color: rgb(244, 197, 87);
}

.dashboard-global-banner.is-error {
    border-color: rgba(255, 88, 111, .42);
    background: rgba(64, 19, 29, .78);
}

.dashboard-global-banner.is-error strong {
    color: rgb(255, 88, 111);
}

.dashboard-notice-stack[hidden] {
    display: none;
}

.dashboard-notice {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(13, 18, 28, .72);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: inset 0 1px rgba(255,255,255,.035);
}

.dashboard-notice strong {
    display: block;
    color: rgb(246,246,248);
    font-size: 10px;
    font-weight: 760;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.dashboard-notice p {
    margin: 2px 0 0;
    color: rgb(185, 190, 204);
    font-size: 9px;
    line-height: 1.45;
}

.dashboard-notice.is-info {
    border-color: rgba(88, 166, 255, .28);
    background: rgba(16, 31, 52, .64);
}

.dashboard-notice.is-info strong {
    color: rgb(117, 190, 255);
}

.dashboard-notice.is-warning {
    border-color: rgba(244, 197, 87, .34);
    background: rgba(52, 38, 14, .54);
}

.dashboard-notice.is-warning strong {
    color: rgb(244, 197, 87);
}

.dashboard-notice.is-error {
    border-color: rgba(255, 88, 111, .38);
    background: rgba(58, 15, 24, .54);
}

.dashboard-notice.is-error strong {
    color: rgb(255, 119, 137);
}

.dashboard-token-banner button,
.notice-actions button,
.ghost-order-chip button {
    min-height: 26px;
    padding: 0 10px;
    border: 0;
    border-radius: 4px;
    color: rgb(245,245,248);
    background: rgba(255,255,255,.08);
    font-size: 8px;
    font-weight: 740;
    cursor: pointer;
}

.dashboard-active-ticker-bar {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    padding: 4px 8px;
    margin-bottom: 6px;
    border-radius: 4px;
    background: rgba(255,255,255,.035);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.045);
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
}

.dashboard-active-ticker-bar:hover,
.dashboard-active-ticker-bar:focus-within {
    scrollbar-color: rgba(0,210,255,.56) transparent;
    scrollbar-width: thin;
}

.dashboard-active-ticker-bar::-webkit-scrollbar {
    height: 0;
}

.dashboard-active-ticker-bar:hover::-webkit-scrollbar,
.dashboard-active-ticker-bar:focus-within::-webkit-scrollbar {
    height: 5px;
}

.dashboard-active-ticker-bar::-webkit-scrollbar-track {
    background: transparent;
}

.dashboard-active-ticker-bar::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(0,210,255,.28), rgba(137,92,246,.5));
}

.chart-toolbar > .ticker-search,
.chart-toolbar > .ticker-symbol {
    display: none !important;
}

.ticker-bar-search {
    flex: 0 0 auto;
    margin-right: 4px;
}

.dashboard-active-ticker-button {
    min-width: 68px;
    height: 30px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 4px;
    color: rgb(160, 166, 181);
    background: rgba(0,0,0,.16);
    font-size: 11px;
    font-weight: 780;
    letter-spacing: .02em;
    cursor: pointer;
    scroll-snap-align: start;
}

.dashboard-active-ticker-button[draggable="true"] {
    cursor: grab;
}

.dashboard-active-ticker-button[draggable="true"]:active {
    cursor: grabbing;
}

.dashboard-active-ticker-button:hover,
.dashboard-active-ticker-button.is-active {
    color: rgb(0, 210, 255);
    background: rgba(0, 210, 255, .11);
    box-shadow: inset 0 0 0 1px rgba(0, 210, 255, .52);
}

.dashboard-empty-ticker-message {
    padding: 0 8px;
    color: rgb(130, 135, 150);
    font-size: 10px;
}

.ticker-search-popover {
    position: fixed;
    z-index: 120;
    top: 122px;
    left: 254px;
    width: min(380px, calc(100vw - 32px));
    max-height: min(520px, calc(100vh - 148px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(0, 210, 255, .22);
    border-radius: 10px;
    color: rgb(240, 244, 250);
    background: linear-gradient(145deg, rgba(19, 28, 44, .96), rgba(8, 12, 21, .95));
    -webkit-backdrop-filter: blur(24px) saturate(125%);
    backdrop-filter: blur(24px) saturate(125%);
    box-shadow: 0 24px 70px rgba(0,0,0,.52), inset 0 1px rgba(255,255,255,.06);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-5px) scale(.985);
    transition: opacity 120ms var(--legend-ease), transform 140ms var(--legend-ease), visibility 0s linear 120ms;
}

.ticker-search-popover.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

.ticker-search-popover header {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.ticker-search-popover header div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ticker-search-popover header strong {
    color: rgb(0, 210, 255);
    font-size: 12px;
    font-weight: 760;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ticker-search-popover header span {
    color: rgb(133, 145, 168);
    font-size: 9px;
}

.ticker-search-close {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 5px;
    color: rgb(145, 153, 170);
    background: rgba(255,255,255,.04);
    cursor: pointer;
}

.ticker-search-field {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 10px;
    padding: 0 10px;
    border-radius: 6px;
    background: rgba(0,0,0,.26);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}

.ticker-search-field input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    color: rgb(242, 246, 252);
    background: transparent;
    font: inherit;
    font-size: 11px;
}

.ticker-search-list {
    min-height: 0;
    overflow: auto;
    display: grid;
    gap: 5px;
    padding: 0 10px 10px;
    scrollbar-width: thin;
}

.ticker-search-row {
    min-height: 42px;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 9px;
    border: 0;
    border-radius: 6px;
    color: rgb(170, 178, 195);
    background: rgba(255,255,255,.035);
    text-align: left;
    cursor: pointer;
}

.ticker-search-row strong {
    padding-left: 11px;
    color: rgb(242, 246, 252);
    font-size: 12px;
    font-weight: 760;
}

.ticker-search-row span {
    overflow: hidden;
    color: rgb(120, 133, 158);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticker-search-row i {
    width: 28px;
    height: 20px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.ticker-search-row i::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    margin: 3px;
    border-radius: 50%;
    background: rgb(116, 123, 140);
    transition: transform 120ms ease, background 120ms ease;
}

.ticker-search-row.is-active {
    color: rgb(223, 255, 237);
    background: rgba(0, 200, 5, .08);
    box-shadow: inset 0 0 0 1px rgba(0, 200, 5, .18);
}

.ticker-search-row.is-active span {
    color: rgb(130, 230, 168);
}

.ticker-search-row.is-active i {
    background: rgba(0, 200, 5, .18);
}

.ticker-search-row.is-active i::before {
    transform: translateX(8px);
    background: rgb(0, 200, 5);
}

.ticker-search-empty {
    padding: 24px 8px;
    color: rgb(120, 133, 158);
    font-size: 10px;
    text-align: center;
}

.dashboard-token-banner button:hover,
.notice-actions button:hover,
.ghost-order-chip button:hover {
    background: rgba(255,255,255,.14);
}

.live-readiness-banner {
    align-items: flex-start;
}

.notice-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
}

.ghost-order-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.ghost-order-chip {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 4px 3px 8px;
    border-radius: 4px;
    color: rgb(255, 178, 189);
    background: rgba(255, 88, 111, .11);
    font-size: 8px;
    font-weight: 720;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 980px) {
    .dashboard-global-banner {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .dashboard-announcement-banner {
        align-items: center;
        justify-content: center;
    }

    .live-readiness-banner {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .live-readiness-side {
        align-items: flex-start;
        max-width: 100%;
    }

    .live-progress-chips {
        justify-content: flex-start;
    }

    .dashboard-notice {
        align-items: flex-start;
        flex-direction: column;
    }

    .notice-actions,
    .ghost-order-list {
        justify-content: flex-start;
    }

    .ghost-scan-control {
        width: 34px;
        padding: 0;
    }
}

@media (max-width: 720px) {
    .dashboard-notice-stack {
        margin: 5px 0;
    }

    .dashboard-notice {
        padding: 8px 9px;
    }

    .dashboard-notice p {
        font-size: 8px;
    }
}

.connection-status {
    min-width: 84px;
    color: rgb(0, 200, 5);
}

.connection-status:not(.is-online) {
    color: rgb(255, 111, 85);
}

.connection-status:not(.is-online) .connection-dot {
    background: rgb(255, 90, 54);
    box-shadow: 0 0 8px rgba(255, 90, 54, 0.35);
}

.workspace-grid {
    --entries-width: 620px;
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(420px, 1fr) 4px var(--entries-width);
    gap: 0;
    overflow: hidden;
    transition: grid-template-columns var(--legend-motion) var(--legend-ease);
}

.workspace-grid.is-reversed {
    grid-template-columns: var(--entries-width) 4px minmax(420px, 1fr);
}

.workspace-grid.is-reversed .tools-stack {
    grid-column: 1;
    grid-row: 1;
}

.workspace-grid.is-reversed .window-resizer {
    grid-column: 2;
    grid-row: 1;
}

.workspace-grid.is-reversed .chart-window {
    grid-column: 3;
    grid-row: 1;
}

.tools-stack {
    --left-window-width: 50%;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-column: 3;
    grid-row: 1;
    grid-template-columns: minmax(280px, var(--left-window-width)) 4px minmax(280px, 1fr);
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
    transition: grid-template-columns var(--legend-motion) var(--legend-ease);
}

.tools-stack > .entries-window {
    grid-column: 1;
    grid-row: 1;
}

.tools-stack > .tool-stack-resizer {
    grid-column: 2;
    grid-row: 1;
}

.tools-stack > .exit-window {
    grid-column: 3;
    grid-row: 1;
}

.tools-stack.is-entries-collapsed:not(.is-reversed),
.tools-stack.is-exit-collapsed.is-reversed {
    grid-template-columns: 40px 4px minmax(280px, 1fr);
}

.tools-stack.is-exit-collapsed:not(.is-reversed),
.tools-stack.is-entries-collapsed.is-reversed {
    grid-template-columns: minmax(280px, 1fr) 4px 40px;
}

.tools-stack.is-entries-collapsed.is-exit-collapsed {
    grid-template-columns: 40px 4px 40px;
}

.tools-stack.is-reversed .exit-window {
    grid-column: 1;
    grid-row: 1;
}

.tools-stack.is-reversed .tool-stack-resizer {
    grid-column: 2;
    grid-row: 1;
}

.tools-stack.is-reversed .entries-window {
    grid-column: 3;
    grid-row: 1;
}

.tools-stack.is-entries-collapsed .entries-window,
.tools-stack.is-exit-collapsed .exit-window {
    min-width: 40px;
}

.tools-stack.has-collapsed-window .tool-stack-resizer {
    pointer-events: none;
}

.workspace-window {
    position: relative;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    border-radius: 2px;
    background: var(--legend-surface);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
}

.workspace-window::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 42%);
}

.window-drag-handle {
    cursor: grab;
    user-select: none;
}

.window-drag-handle:active {
    cursor: grabbing;
}

.workspace-window.is-dragging {
    opacity: 0.58;
}

.workspace-window.is-drop-target {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.26);
}

.window-resizer {
    position: relative;
    z-index: 5;
    width: 4px;
    min-width: 4px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
    background: transparent;
}

.window-resizer::before {
    content: "";
    position: absolute;
    inset: 0 -3px;
}

.window-resizer span {
    position: absolute;
    top: 50%;
    left: 1px;
    width: 2px;
    height: 28px;
    border-radius: 3px;
    background: rgba(255,255,255,.18);
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 120ms ease;
}

.window-resizer:hover span,
.window-resizer:focus-visible span,
.workspace-grid.is-resizing .window-resizer span {
    opacity: 1;
}

.window-resizer:focus-visible {
    outline: 0;
}

.workspace-grid.has-collapsed-tools .window-resizer {
    pointer-events: none;
}

.tool-stack-resizer {
    position: relative;
    z-index: 5;
    width: 4px;
    min-width: 4px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
    background: transparent;
}

.tool-stack-resizer::before {
    content: "";
    position: absolute;
    inset: 0 -3px;
}

.tool-stack-resizer span {
    position: absolute;
    top: 50%;
    left: 1px;
    width: 2px;
    height: 28px;
    border-radius: 3px;
    background: rgba(255,255,255,.18);
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity var(--legend-motion) var(--legend-ease);
}

.tool-stack-resizer:hover span,
.tool-stack-resizer:focus-visible span,
.tools-stack.is-resizing .tool-stack-resizer span {
    opacity: 1;
}

.tool-stack-resizer:focus-visible {
    outline: 0;
}

.chart-toolbar {
    width: 100%;
    height: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 0;
    background: rgba(13, 13, 14, 0.12);
}

.ticker-search {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 4px;
    color: rgb(180, 180, 187);
    background: rgba(255, 255, 255, 0.035);
    cursor: default;
}

.ticker-search:hover {
    color: rgb(245, 245, 245);
    background: rgba(255, 255, 255, 0.07);
}

.ticker-search:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.72);
    outline-offset: -2px;
}

.search-glyph {
    position: relative;
    width: 13px;
    height: 13px;
    display: block;
    border: 1.7px solid currentColor;
    border-radius: 50%;
}

.search-glyph::after {
    content: "";
    position: absolute;
    right: -4px;
    bottom: -3px;
    width: 6px;
    height: 1.7px;
    border-radius: 2px;
    background: currentColor;
    transform: rotate(45deg);
    transform-origin: left center;
}

.ticker-symbol {
    height: 36px;
    min-width: 72px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 0;
    border-radius: 4px;
    color: rgb(245, 245, 245);
    background: rgba(255, 255, 255, 0.025);
    font-size: 14px;
    font-weight: 650;
    line-height: 20px;
    letter-spacing: -0.01em;
}

.chart-canvas {
    position: relative;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.12);
}

.chart-canvas::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(85% 62% at 50% 0%, rgba(255, 255, 255, 0.018), transparent 72%);
}

.entries-window {
    margin-left: 0;
}

.workspace-grid.is-reversed .entries-window {
    margin-right: 0;
    margin-left: 0;
}

.entries-toolbar {
    width: 100%;
    height: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    border: 0;
    background: rgba(13,13,14,.12);
}

.entries-toolbar h2 {
    margin: 0;
    color: rgb(245,245,245);
    font-size: 13px;
    font-weight: 650;
    line-height: 18px;
    letter-spacing: -.01em;
}

.exit-toolbar {
    width: 100%;
    height: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 12px;
    border: 0;
    background: rgba(13,13,14,.12);
}

.exit-toolbar h2 {
    margin: 0;
    color: rgb(245,245,245);
    font-size: 13px;
    font-weight: 650;
    line-height: 18px;
    letter-spacing: -.01em;
}

.window-collapse {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 4px;
    color: rgb(146,146,155);
    background: transparent;
    cursor: pointer;
    transition:
        color var(--legend-motion) var(--legend-ease),
        background-color var(--legend-motion) var(--legend-ease),
        transform 100ms ease;
}

.window-collapse:hover {
    color: rgb(245,245,245);
    background: rgba(255,255,255,.07);
}

.window-collapse:active {
    transform: scale(.92);
}

.window-collapse:focus-visible {
    outline: 2px solid rgba(197,176,255,.82);
    outline-offset: -2px;
}

.window-collapse span {
    position: relative;
    width: 9px;
    height: 9px;
    display: block;
}

.window-collapse span::before,
.window-collapse span::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    width: 9px;
    height: 1px;
    border-radius: 2px;
    background: currentColor;
}

.window-collapse span::after {
    opacity: 0;
    transform: rotate(90deg);
    transition: opacity var(--legend-motion) var(--legend-ease);
}

.workspace-window.is-collapsed .window-collapse span::after {
    opacity: 1;
}

.entries-window.is-collapsed .entries-context,
.entries-window.is-collapsed .entries-scroll,
.exit-window.is-collapsed .entries-context,
.exit-window.is-collapsed .exit-scroll {
    display: none;
}

.entries-window.is-collapsed .entries-toolbar,
.exit-window.is-collapsed .exit-toolbar {
    width: 40px;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    gap: 12px;
    padding: 12px 0 8px;
    cursor: pointer;
    transition: background-color var(--legend-motion) var(--legend-ease);
}

.entries-window.is-collapsed .entries-toolbar:hover,
.exit-window.is-collapsed .exit-toolbar:hover {
    background: rgba(255,255,255,.045);
}

.entries-window.is-collapsed .entries-toolbar h2,
.exit-window.is-collapsed .exit-toolbar h2 {
    display: none;
}

.entries-window.is-collapsed .window-collapse,
.exit-window.is-collapsed .window-collapse {
    margin: 0;
}

.entries-window.is-collapsed .entries-glyph,
.exit-window.is-collapsed .exit-glyph {
    flex: 0 0 auto;
}

.exit-glyph {
    position: relative;
    width: 12px;
    height: 12px;
    border: 2px solid rgb(255,145,75);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255,145,75,.18);
}

.exit-glyph::after {
    content: "";
    position: absolute;
    right: -3px;
    bottom: -2px;
    width: 5px;
    height: 2px;
    border-radius: 2px;
    background: rgb(255,145,75);
    transform: rotate(-42deg);
}

.entries-glyph {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: rgb(137, 92, 246);
    box-shadow: 0 0 10px rgba(137,92,246,.22);
}

.entries-context {
    min-height: 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 12px;
    color: rgb(135,135,143);
    background: rgba(0,0,0,.12);
    font-size: 9px;
    font-weight: 560;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.entries-context strong {
    color: rgb(137,92,246);
    font-weight: 680;
}

.autosave-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 180ms ease;
}

.autosave-state i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgb(0,200,5);
    box-shadow: 0 0 7px rgba(0,200,5,.42);
    transition: background 180ms ease, box-shadow 180ms ease;
}

.autosave-state.is-saving {
    color: rgb(255,204,102);
}

.autosave-state.is-saving i {
    background: rgb(255,204,102);
    box-shadow: 0 0 8px rgba(255,204,102,.55);
    animation: autosave-pulse 900ms ease-in-out infinite;
}

.autosave-state.is-saved {
    color: rgb(0,200,5);
}

.autosave-state.is-saved i {
    background: rgb(0,200,5);
    box-shadow: 0 0 9px rgba(0,200,5,.6);
}

.autosave-state.is-error {
    color: rgb(255,90,54);
}

.autosave-state.is-error i {
    background: rgb(255,90,54);
    box-shadow: 0 0 9px rgba(255,90,54,.6);
}

@keyframes autosave-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .55; transform: scale(.72); }
}

.entries-scroll {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    background: rgba(0,0,0,.12);
    scrollbar-color: rgba(255,255,255,.18) transparent;
    scrollbar-width: thin;
}

.exit-scroll {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    background: rgba(0,0,0,.12);
    scrollbar-color: rgba(255,255,255,.18) transparent;
    scrollbar-width: thin;
}

.exit-scroll::-webkit-scrollbar {
    width: 4px;
}

.exit-scroll::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: rgba(255,255,255,.18);
}

.exit-mode-panel {
    border: 0;
    border-radius: 4px;
    background: rgba(255,255,255,.035);
    transition:
        background-color var(--legend-motion) var(--legend-ease),
        box-shadow var(--legend-motion) var(--legend-ease),
        transform var(--legend-motion) var(--legend-ease);
}

.exit-mode-panel:hover {
    background: rgba(255,255,255,.052);
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
    transform: translateY(-1px);
}

.exit-mode-panel {
    padding: 12px;
}

.exit-panel-heading,
.exit-inline-toggle {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.exit-panel-heading h3 {
    margin: 0;
    color: rgb(229,229,232);
    font-size: 10px;
    font-weight: 680;
    line-height: 14px;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.exit-panel-heading p {
    margin: 3px 0 0;
    color: rgb(116,116,124);
    font-size: 8px;
    line-height: 12px;
}

.mode-indicator {
    flex: 0 0 auto;
    padding: 4px 7px;
    border-radius: 10px;
    color: rgb(205,192,255);
    background: rgba(137,92,246,.13);
    font-size: 8px;
    font-weight: 680;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.exit-mode-selector button,
.unit-control button {
    border: 0;
    color: rgb(128,128,138);
    background: rgba(0,0,0,.21);
    font-weight: 650;
    cursor: pointer;
    transition:
        color var(--legend-motion) var(--legend-ease),
        background-color var(--legend-motion) var(--legend-ease),
        box-shadow var(--legend-motion) var(--legend-ease),
        transform 100ms ease;
}

.exit-mode-selector button:hover,
.unit-control button:hover {
    color: rgb(238,238,240);
    background: rgba(255,255,255,.065);
}

.exit-mode-selector button:active,
.unit-control button:active {
    transform: scale(.97);
}

.exit-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgb(180,180,187);
    font-size: 9px;
    font-weight: 680;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.exit-section-label::before,
.exit-section-label::after {
    content: "";
    height: 1px;
    flex: 1;
    background: rgba(255,255,255,.09);
}

.exit-mode-selector {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
    padding: 3px;
    border-radius: 4px;
    background: rgba(0,0,0,.28);
}

.exit-mode-selector button {
    min-height: 31px;
    padding: 4px;
    border-radius: 3px;
    font-size: 8px;
    line-height: 11px;
}

.exit-mode-selector button.is-active {
    color: #fff;
    background: rgba(137,92,246,.72);
    box-shadow: 0 0 14px rgba(137,92,246,.16);
}

.exit-mode-panel {
    display: none;
    animation: legend-panel-in var(--legend-motion) var(--legend-ease) both;
}

.exit-window[data-exit-mode="standard"] [data-exit-panel="standard"],
.exit-window[data-exit-mode="levels"] [data-exit-panel="levels"],
.exit-window[data-exit-mode="trail"] [data-exit-panel="trail"],
.exit-window[data-exit-mode="runner"] [data-exit-panel="runner"] {
    display: block;
}

@keyframes legend-panel-in {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.mode-purple {
    color: rgb(205,192,255);
    background: rgba(137,92,246,.13);
}

.mode-orange {
    color: rgb(255,171,115);
    background: rgba(255,145,75,.12);
}

.mode-yellow {
    color: rgb(245,211,96);
    background: rgba(245,211,96,.11);
}

.range-setting {
    display: block;
    margin-top: 14px;
}

.range-setting > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    color: rgb(150,150,159);
    font-size: 9px;
}

.range-setting b {
    font-weight: 590;
}

.range-setting output {
    color: rgb(0,200,5);
    font-size: 10px;
    font-weight: 680;
    font-variant-numeric: tabular-nums;
}

.range-setting:has(.range-danger) output {
    color: rgb(255,111,85);
}

.range-setting:has(.range-orange) output {
    color: rgb(255,155,91);
}

.range-setting input[type="range"] {
    width: 100%;
    height: 3px;
    display: block;
    margin: 0;
    border-radius: 3px;
    accent-color: rgb(0,200,5);
    cursor: pointer;
}

.range-setting input.range-danger {
    accent-color: rgb(255,90,54);
}

.range-setting input.range-orange {
    accent-color: rgb(255,145,75);
}

.unit-control {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    padding: 2px;
    border-radius: 4px;
    background: rgba(0,0,0,.28);
}

.unit-control button {
    width: 28px;
    height: 24px;
    border-radius: 3px;
    font-size: 9px;
}

.unit-control button.is-active {
    color: #fff;
    background: rgba(115,168,255,.55);
}

.level-grid {
    display: grid;
    grid-template-columns: 36px 1fr 1fr;
    gap: 5px;
    align-items: center;
    margin-top: 12px;
}

.level-grid > span {
    color: rgb(126,126,135);
    font-size: 8px;
    font-weight: 620;
    text-transform: uppercase;
}

.level-grid strong {
    color: rgb(115,168,255);
    font-size: 9px;
    font-weight: 680;
}

.level-grid input {
    min-width: 0;
    height: 30px;
    padding: 0 8px;
    border: 0;
    border-radius: 3px;
    outline: 1px solid rgba(255,255,255,.045);
    color: rgb(230,230,233);
    background: rgba(0,0,0,.27);
    font: inherit;
    font-size: 9px;
}

.exit-inline-toggle {
    align-items: center;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.055);
}

.exit-inline-toggle b,
.exit-inline-toggle span {
    display: block;
}

.exit-inline-toggle b {
    color: rgb(184,184,190);
    font-size: 9px;
    font-weight: 620;
}

.exit-inline-toggle div > span {
    margin-top: 3px;
    color: rgb(112,112,121);
    font-size: 8px;
    line-height: 11px;
}

.exit-toggle {
    position: relative;
    width: 34px;
    height: 18px;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: rgb(72,72,80);
    cursor: pointer;
    transition: background-color var(--legend-motion) var(--legend-ease), box-shadow var(--legend-motion) var(--legend-ease);
}

.exit-toggle span {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgb(225,225,228);
    transform: translateX(0);
    transition: transform var(--legend-motion) var(--legend-ease);
}

.exit-toggle.is-on {
    background: rgb(255,145,75);
    box-shadow: 0 0 13px rgba(255,145,75,.2);
}

.exit-toggle.is-on span {
    transform: translateX(16px);
}

.runner-settings .setting-field {
    margin-top: 14px;
}

.entries-scroll::-webkit-scrollbar {
    width: 4px;
}

.entries-scroll::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: rgba(255,255,255,.18);
}

.manual-entry-card,
.entry-config-card,
.entry-filter-card {
    border: 0;
    border-radius: 4px;
    background: rgba(255,255,255,.035);
    transition:
        background-color var(--legend-motion) var(--legend-ease),
        box-shadow var(--legend-motion) var(--legend-ease),
        transform var(--legend-motion) var(--legend-ease);
}

.manual-entry-card:hover,
.entry-config-card:hover,
.entry-filter-card:hover {
    background: rgba(255,255,255,.052);
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
    transform: translateY(-1px);
}

.manual-entry-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border: 1px solid rgba(0,210,255,.20);
    border-radius: 8px;
    background: rgba(13,19,33,.30);
    font-family: "Nunito Sans", sans-serif;
}

.entry-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.entry-card-heading h3,
.entry-config-card h3,
.entry-filter-card h3 {
    margin: 0;
    color: rgb(229,229,232);
    font-size: 10px;
    font-weight: 680;
    line-height: 14px;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.entry-card-heading p,
.entry-filter-card p {
    margin: 3px 0 0;
    color: rgb(116,116,124);
    font-size: 8px;
    line-height: 12px;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.entry-card-heading > strong {
    color: rgb(185,185,192);
    font-size: 22px;
    font-weight: 650;
    line-height: 24px;
    letter-spacing: -.025em;
}

.entry-lock {
    position: relative;
    width: 100%;
    height: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    padding: 4px;
    border: 1px solid rgb(51,65,85);
    border-radius: 999px;
    color: rgb(124,124,133);
    background: rgba(0,0,0,.34);
    cursor: pointer;
    isolation: isolate;
    transition:
        background-color var(--legend-motion) var(--legend-ease),
        box-shadow var(--legend-motion) var(--legend-ease),
        transform 100ms ease;
}

.entry-lock::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: auto;
    border-radius: 999px;
    background: rgb(71,85,105);
    box-shadow: 0 4px 12px rgba(0,0,0,.22);
    transform: translateX(calc(100% - 4px));
    transition:
        transform var(--legend-motion) var(--legend-ease),
        background-color var(--legend-motion) var(--legend-ease),
        box-shadow var(--legend-motion) var(--legend-ease);
}

.entry-lock[aria-pressed="true"]::before {
    background: rgb(244,63,94);
    box-shadow: 0 0 18px rgba(244,63,94,.30);
    transform: translateX(0);
}

.entry-lock[aria-pressed="true"] {
    border-color: rgba(244,63,94,.50);
    background: rgba(244,63,94,.10);
    box-shadow: 0 0 10px rgba(244,63,94,.28);
}

.entry-lock:not([aria-pressed="true"]):hover {
    background: rgba(0,0,0,.44);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.055);
}

.entry-lock:active {
    transform: scale(.992);
}

.entry-lock span {
    display: grid;
    place-items: center;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
    transition: color var(--legend-motion) var(--legend-ease);
}

.entry-lock span.is-selected {
    color: #fff;
    background: transparent;
}

.direction-actions,
.sell-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.direction-actions button,
.sell-action,
.sell-row select {
    height: 50px;
    height: 58px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .10em;
    transition:
        color var(--legend-motion) var(--legend-ease),
        background-color var(--legend-motion) var(--legend-ease),
        border-color var(--legend-motion) var(--legend-ease),
        box-shadow var(--legend-motion) var(--legend-ease),
        transform 100ms ease;
}

.direction-actions button,
.sell-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
}

.direction-actions button:not(:disabled):hover,
.sell-action:not(:disabled):hover {
    filter: none;
}

.direction-actions button:not(:disabled):active,
.sell-action:active {
    transform: scale(.985);
}

.direction-actions button:disabled {
    color: rgb(86,86,95);
    border-color: rgba(71,85,105,.42);
    background: rgba(15,23,42,.50);
    cursor: not-allowed;
}

.entry-lock[aria-pressed="true"] ~ .direction-actions .call-action {
    color: rgb(0,230,118);
    border-color: rgba(0,230,118,.40);
    background: rgba(0,230,118,.10);
}

.entry-lock[aria-pressed="true"] ~ .direction-actions .call-action:hover {
    background: rgba(0,230,118,.20);
}

.entry-lock[aria-pressed="true"] ~ .direction-actions .put-action {
    color: rgb(239,68,68);
    border-color: rgba(239,68,68,.40);
    background: rgba(239,68,68,.10);
}

.entry-lock[aria-pressed="true"] ~ .direction-actions .put-action:hover {
    background: rgba(239,68,68,.20);
}

.sell-row {
    grid-template-columns: minmax(72px, 1fr) minmax(0, 2fr);
}

.sell-row select {
    padding: 0 10px;
    color: rgb(229,231,235);
    border-color: rgb(51,65,85);
    background: rgba(15,23,42,.80);
    font-size: 14px;
    letter-spacing: 0;
    outline: 0;
}

.sell-action {
    height: 50px;
    color: rgb(0,230,118);
    border-color: rgba(0,230,118,.40);
    background: rgba(0,230,118,.10);
    font-size: 14px;
}

.sell-action:not(:disabled):hover {
    background: rgba(0,230,118,.20);
    box-shadow: 0 0 15px rgba(34,197,94,.25);
}

.sell-action:disabled {
    color: rgb(86,86,95);
    border-color: rgba(71,85,105,.42);
    background: rgba(15,23,42,.50);
    cursor: not-allowed;
}

.trade-action-icon {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 999px;
    font-size: 15px;
    line-height: 1;
    font-weight: 900;
}

.trade-action-icon-call,
.trade-action-icon-sell {
    border: 1px solid rgba(0,230,118,.30);
    background: rgba(0,230,118,.10);
}

.trade-action-icon-put {
    border: 1px solid rgba(239,68,68,.30);
    background: rgba(239,68,68,.10);
}

.manual-action-message {
    min-height: 34px;
    display: grid;
    place-items: center;
    padding: 8px 10px;
    border: 1px solid rgba(137,92,246,.40);
    border-radius: 4px;
    color: rgb(255,255,255);
    background: rgba(137,92,246,.20);
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}

.manual-action-message[hidden],
.sell-row[hidden] {
    display: none;
}

.manual-lock-help {
    margin: 2px 0 0;
    color: rgb(116,124,143);
    font-size: 10px;
    line-height: 1.35;
    font-style: italic;
    text-align: center;
}

.entries-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    color: rgb(210,210,215);
    font-size: 10px;
    font-weight: 720;
    letter-spacing: .085em;
    text-transform: uppercase;
}

.entries-section-label::before,
.entries-section-label::after {
    content: "";
    height: 1px;
    flex: 1;
    background: rgba(255,255,255,.12);
}

.entry-config-card {
    padding: 12px;
}

.quantity-row,
.filter-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.quantity-row {
    margin-top: 10px;
    color: rgb(188,188,194);
    font-size: 10px;
}

.quantity-control {
    height: 38px;
    display: flex;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(0,0,0,.28);
}

.quantity-control output {
    width: 54px;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 620;
    font-variant-numeric: tabular-nums;
}

.quantity-control > div {
    width: 24px;
    display: grid;
    grid-template-rows: 1fr 1fr;
}

.quantity-control button {
    padding: 0;
    border: 0;
    color: rgb(150,150,158);
    background: rgba(255,255,255,.035);
    font-size: 11px;
    cursor: pointer;
    transition:
        color var(--legend-motion) var(--legend-ease),
        background-color var(--legend-motion) var(--legend-ease);
}

.quantity-control button:hover {
    color: rgb(240,240,242);
    background: rgba(255,255,255,.09);
}

.entry-filter-card {
    min-height: 72px;
    flex-shrink: 0;
    padding: 12px;
    overflow: hidden;
}

.entry-filter-card h3 {
    letter-spacing: 0;
    text-transform: none;
}

.entry-filter-card p {
    max-width: 190px;
    letter-spacing: 0;
    text-transform: none;
}

.filter-summary {
    width: 100%;
}

.filter-summary > div {
    min-width: 0;
}

.mini-switch {
    position: relative;
    width: 34px;
    height: 18px;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: rgb(72,72,80);
    cursor: pointer;
    transition:
        background-color var(--legend-motion) var(--legend-ease),
        box-shadow var(--legend-motion) var(--legend-ease),
        transform 100ms ease;
}

.mini-switch span {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgb(225,225,228);
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    transform: translateX(0);
    transition: transform var(--legend-motion) var(--legend-ease);
}

.mini-switch.is-on {
    background: rgb(137,92,246);
    box-shadow: 0 0 13px rgba(137,92,246,.24);
}

.mini-switch.is-on span {
    transform: translateX(16px);
}

.mini-switch:hover {
    box-shadow: 0 0 0 4px rgba(255,255,255,.045);
}

.mini-switch.is-on:hover {
    box-shadow: 0 0 0 4px rgba(137,92,246,.11), 0 0 15px rgba(137,92,246,.22);
}

.mini-switch:active {
    transform: scale(.94);
}

.entry-lock:focus-visible,
.mini-switch:focus-visible,
.segmented-control button:focus-visible,
.setting-field input:focus-visible,
.exit-mode-selector button:focus-visible,
.unit-control button:focus-visible,
.exit-toggle:focus-visible,
.level-grid input:focus-visible {
    outline: 2px solid rgba(197,176,255,.82);
    outline-offset: 2px;
}

.filter-settings {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(-5px);
    transition:
        opacity var(--legend-motion) var(--legend-ease),
        transform var(--legend-motion) var(--legend-ease),
        margin-top var(--legend-motion) var(--legend-ease);
}

.entry-filter-card.is-enabled .filter-settings {
    grid-template-rows: 1fr;
    margin-top: 14px;
    opacity: 1;
    transform: translateY(0);
}

.filter-settings-inner {
    min-height: 0;
    overflow: hidden;
}

.setting-label,
.setting-field > span {
    display: block;
    margin-bottom: 6px;
    color: rgb(153,153,162);
    font-size: 8px;
    font-weight: 620;
    line-height: 11px;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.segmented-control {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 2px;
    padding: 3px;
    border-radius: 4px;
    background: rgba(0,0,0,.28);
}

.segmented-control button {
    min-height: 28px;
    padding: 0 8px;
    border: 0;
    border-radius: 3px;
    color: rgb(130,130,140);
    background: transparent;
    font-size: 9px;
    font-weight: 650;
    cursor: pointer;
    transition:
        color var(--legend-motion) var(--legend-ease),
        background-color var(--legend-motion) var(--legend-ease),
        transform 100ms ease;
}

.segmented-control button:hover {
    color: rgb(235,235,238);
    background: rgba(255,255,255,.055);
}

.segmented-control button.is-active {
    color: #fff;
    background: rgba(137,92,246,.72);
}

.segmented-control button:active {
    transform: scale(.97);
}

.setting-field {
    display: block;
    margin-top: 12px;
}

.setting-field input {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 4px;
    outline: 1px solid rgba(255,255,255,.045);
    color: rgb(239,239,241);
    background: rgba(0,0,0,.27);
    font: inherit;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    transition:
        background-color var(--legend-motion) var(--legend-ease),
        outline-color var(--legend-motion) var(--legend-ease);
}

.setting-field input:hover {
    background: rgba(0,0,0,.36);
    outline-color: rgba(255,255,255,.09);
}

.setting-field input:focus {
    background: rgba(0,0,0,.4);
    outline-color: rgba(137,92,246,.65);
}

.settings-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.delta-target-settings {
    display: none;
}

.entry-filter-card[data-delta-mode="target"] .delta-range-settings {
    display: none;
}

.entry-filter-card[data-delta-mode="target"] .delta-target-settings {
    display: block;
}

@media (max-width: 1180px) {
    .information-left {
        gap: 12px;
    }

    .metric-group,
    .performance-metrics {
        gap: 12px;
    }

    .metric {
        min-width: 74px;
    }

    .metric-compact {
        min-width: 48px;
    }

    .information-actions > * {
        padding-right: 9px;
        padding-left: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .workspace-grid,
    .tools-stack,
    .sidebar-option,
    .sidebar-icon-button,
    .user-avatar-glyph,
    .notification-dot,
    .events-popover,
    .user-popover,
    .floating-close,
    .system-control,
    .panic-control,
    .manual-entry-card,
    .entry-config-card,
    .entry-filter-card,
    .entry-lock,
    .entry-lock::before,
    .entry-lock span,
    .window-collapse,
    .window-collapse span::after,
    .entries-toolbar,
    .exit-toolbar,
    .direction-actions button,
    .sell-action,
    .mini-switch,
    .mini-switch span,
    .filter-settings,
    .segmented-control button,
    .setting-field input,
    .tool-stack-resizer span,
    .exit-mode-panel,
    .exit-mode-selector button,
    .unit-control button,
    .exit-toggle,
    .exit-toggle span {
        transition: none;
        animation: none;
    }
}

/* Options chain / Combo SPX */
.app-view[hidden] { display: none !important; }

.option-chain-view {
    min-width: 0;
    height: 100%;
    display: grid;
    grid-template-rows: 56px 51px 72px minmax(0, 1fr);
    gap: var(--legend-gap);
    overflow: hidden;
}

.chain-command-bar,
.chain-expiration-strip,
.combo-strategy-bar,
.chain-window,
.combo-ticket {
    border: 0;
    border-radius: 3px;
    background: rgba(32, 32, 32, .48);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    box-shadow: inset 0 1px rgba(255,255,255,.025);
}

.chain-command-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px 0 8px;
}

.chain-symbol-block,
.chain-session-context,
.chain-toolbar-actions,
.chain-density,
.chain-legend,
.ticket-footer {
    display: flex;
    align-items: center;
}

.chain-symbol-block { gap: 10px; }
.chain-search-button {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 5px;
    background: rgba(255,255,255,.055);
    cursor: pointer;
    transition: background 140ms var(--legend-ease), transform 100ms ease;
}
.chain-search-button:hover { background: rgba(255,255,255,.1); }
.chain-search-button:active { transform: scale(.94); }

.chain-symbol-select { display: flex; flex-direction: column; gap: 1px; }
.chain-symbol-select > span,
.ticket-order-fields label > span {
    color: var(--legend-muted);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .04em;
}
.chain-symbol-select select {
    width: 72px;
    padding: 0;
    border: 0;
    outline: 0;
    color: #fff;
    background: transparent;
    font-size: 17px;
    font-weight: 650;
    cursor: pointer;
}
.chain-symbol-select option { background: #202020; }
.chain-underlying-quote { display: flex; flex-direction: column; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.08); }
.chain-underlying-quote strong { font-size: 13px; font-weight: 620; font-variant-numeric: tabular-nums; }
.chain-underlying-quote span { margin-top: 2px; color: rgb(0,200,5); font-size: 10px; font-weight: 590; }

.chain-session-context { gap: 16px; color: var(--legend-muted); font-size: 10px; }
.chain-session-context strong { color: #f2f2f2; font-weight: 600; }
.chain-demo-pill { display: inline-flex; align-items: center; gap: 6px; }
.chain-demo-pill i,
.ticket-state i,
.ticket-footer i { width: 6px; height: 6px; border-radius: 50%; background: rgb(0,200,5); box-shadow: 0 0 7px rgba(0,200,5,.4); }
.chain-refresh {
    height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: 4px;
    color: #ececef;
    background: rgba(255,255,255,.06);
    font-size: 10px;
    cursor: pointer;
    transition: background 140ms var(--legend-ease);
}
.chain-refresh:hover { background: rgba(255,255,255,.11); }
.chain-refresh.is-refreshing span { display: inline-block; animation: chain-spin 500ms linear; }
@keyframes chain-spin { to { transform: rotate(360deg); } }

.chain-expiration-strip { display: flex; align-items: stretch; padding: 4px; }
.expiration-label { display: flex; align-items: center; width: 82px; padding-left: 11px; color: var(--legend-muted); font-size: 10px; }
.expiration-tabs { display: flex; align-items: stretch; gap: 2px; flex: 1; }
.expiration-tabs button {
    min-width: 112px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border: 0;
    border-radius: 4px;
    color: var(--legend-muted);
    background: transparent;
    cursor: pointer;
    transition: color 140ms var(--legend-ease), background 140ms var(--legend-ease), transform 100ms ease;
}
.expiration-tabs button:hover { color: #f4f4f4; background: rgba(255,255,255,.055); }
.expiration-tabs button:active { transform: scale(.98); }
.expiration-tabs button.is-active { color: #fff; background: rgba(255,255,255,.1); }
.expiration-tabs b { font-size: 11px; font-weight: 620; }
.expiration-tabs span { font-size: 9px; opacity: .72; }
.expiration-calendar { position: relative; width: 42px; border: 0; border-radius: 4px; background: transparent; cursor: pointer; }
.expiration-calendar:hover { background: rgba(255,255,255,.06); }
.expiration-calendar span { position: absolute; inset: 15px 13px 12px; border: 1px solid #aaaab1; border-radius: 2px; }
.expiration-calendar span::before { content: ""; position: absolute; left: -1px; right: -1px; top: 3px; border-top: 1px solid #aaaab1; }

.combo-strategy-bar { display: flex; align-items: center; gap: 18px; padding: 9px 12px; }
.combo-strategy-copy { width: 290px; min-width: 290px; }
.combo-kicker { color: #9b78ff; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.combo-strategy-copy h1 { margin: 2px 0 1px; font-size: 15px; font-weight: 640; letter-spacing: -.01em; }
.combo-strategy-copy p { margin: 0; color: var(--legend-muted); font-size: 9px; }
.strategy-tabs { display: flex; align-items: center; gap: 3px; flex: 1; }
.strategy-tabs button,
.chain-density button {
    height: 32px;
    padding: 0 13px;
    border: 0;
    border-radius: 4px;
    color: var(--legend-muted);
    background: transparent;
    font-size: 10px;
    cursor: pointer;
    transition: color 140ms var(--legend-ease), background 140ms var(--legend-ease), transform 100ms ease;
}
.strategy-tabs button:hover,
.chain-density button:hover { color: #f6f6f6; background: rgba(255,255,255,.06); }
.strategy-tabs button:active { transform: scale(.97); }
.strategy-tabs button.is-active { color: #fff; background: rgba(137,92,246,.19); box-shadow: inset 0 0 0 1px rgba(168,137,255,.25); }
.smart-select-button {
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 5px;
    color: #fff;
    background: rgba(137,92,246,.88);
    font-size: 10px;
    font-weight: 620;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(91,49,190,.2);
    transition: background 140ms var(--legend-ease), transform 100ms ease;
}
.smart-select-button:hover { background: rgb(151,107,250); }
.smart-select-button:active { transform: scale(.97); }

.chain-workspace { min-height: 0; display: grid; grid-template-columns: minmax(690px, 1fr) 294px; gap: var(--legend-gap); }
.chain-window { min-width: 0; min-height: 0; display: grid; grid-template-rows: 47px minmax(0, 1fr) 34px; overflow: hidden; }
.chain-window-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0 11px 0 13px; border-bottom: 1px solid rgba(255,255,255,.055); }
.chain-window-toolbar h2 { display: inline; margin: 0; font-size: 12px; font-weight: 620; }
.chain-window-toolbar > div:first-child span { margin-left: 8px; color: var(--legend-muted); font-size: 9px; }
.chain-toolbar-actions { gap: 7px; }
.chain-density { padding: 2px; border-radius: 4px; background: rgba(0,0,0,.17); }
.chain-density button { height: 25px; padding: 0 8px; font-size: 8px; }
.chain-density button.is-active { color: #eee; background: rgba(255,255,255,.08); }
.chain-columns-button { height: 29px; padding: 0 10px; border: 0; border-radius: 4px; color: #d6d6d9; background: rgba(255,255,255,.055); font-size: 9px; cursor: pointer; }
.chain-columns-button:hover { background: rgba(255,255,255,.1); }

.chain-table-scroll { min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: #555 transparent; }
.options-chain-table { width: 100%; min-width: 700px; border-spacing: 0; border-collapse: separate; table-layout: fixed; font-variant-numeric: tabular-nums; }
.options-chain-table thead { position: sticky; top: 0; z-index: 4; }
.options-chain-table th { height: 25px; border-bottom: 1px solid rgba(255,255,255,.055); color: #8d8d95; background: rgba(25,25,25,.96); font-size: 8px; font-weight: 620; letter-spacing: .045em; text-transform: uppercase; }
.options-chain-table th.spread-heading { color: #8d8d95; }
.chain-side-headings th { height: 25px; color: #d9d9dd; font-size: 9px; }
.chain-side-headings th:first-child { color: #72d69d; }
.chain-side-headings th:last-child { color: #ff8d9c; }
.options-chain-table .strike-heading { width: 82px; border-right: 1px solid rgba(255,255,255,.07); border-left: 1px solid rgba(255,255,255,.07); color: #f0f0f1; background: rgba(35,35,35,.98); }
.options-chain-table td { height: 34px; padding: 0; border-bottom: 1px solid rgba(255,255,255,.035); color: #d8d8dc; text-align: center; font-size: 10px; transition: background 100ms ease; }
.options-chain-table tbody tr:hover td { background: rgba(255,255,255,.038); }
.options-chain-table tbody tr.is-otm-row td { color: rgba(216,216,220,.74); }
.options-chain-table tbody tr.is-otm-row:hover td { color: #ededf0; }
.options-chain-table tbody tr.is-atm td {
    border-top: 1px solid rgba(255,222,139,.92);
    border-bottom: 1px solid rgba(255,222,139,.92);
    color: #fffaf0;
    background: linear-gradient(180deg, rgba(255,224,148,.28), rgba(244,197,87,.16));
    box-shadow: inset 0 1px rgba(255,255,255,.08), inset 0 -1px rgba(255,229,164,.05);
}
.options-chain-table tbody tr.is-atm:hover td { background: linear-gradient(180deg, rgba(255,229,164,.35), rgba(244,197,87,.21)); }
.options-chain-table td.strike-cell { position: relative; border-right: 1px solid rgba(255,255,255,.07); border-left: 1px solid rgba(255,255,255,.07); color: #f5f5f6; background: rgba(255,255,255,.025); font-weight: 650; }
.options-chain-table tr.is-atm .strike-cell { color: #fff3c8; background: rgba(255,222,139,.31); box-shadow: inset 0 0 0 1px rgba(255,229,164,.3); }
.options-chain-table tr.is-atm .strike-cell::after { content: "ATM"; position: absolute; right: 4px; top: 3px; color: #ffd978; font-size: 6px; font-weight: 750; letter-spacing: .06em; }
.options-chain-table tr.is-atm .chain-contract-button { color: #fffdf7; font-weight: 720; text-shadow: 0 1px 8px rgba(255,226,148,.18); }
.chain-contract-button { width: calc(100% - 8px); height: 27px; padding: 0; border: 0; border-radius: 3px; color: #ededf0; background: transparent; font-size: 10px; font-variant-numeric: tabular-nums; cursor: pointer; transition: background 110ms ease, color 110ms ease, box-shadow 110ms ease, transform 80ms ease; }
.chain-contract-button:hover { background: rgba(255,255,255,.075); }
.chain-contract-button:active { transform: scale(.96); }
.chain-contract-button.is-target::after { content: ""; display: inline-block; width: 4px; height: 4px; margin-left: 5px; border-radius: 50%; background: #d8b453; vertical-align: middle; }
.chain-contract-button.is-selected-call { color: #9af0bd; background: rgba(0,200,5,.13); box-shadow: inset 0 0 0 1px rgba(0,200,5,.36); }
.chain-contract-button.is-selected-put { color: #ffb0bb; background: rgba(255,88,111,.13); box-shadow: inset 0 0 0 1px rgba(255,88,111,.38); }
.options-chain-table td.is-itm { background: rgba(255,255,255,.018); }
.chain-spread-cell { font-weight: 640; }
.chain-spread-cell.call,
.chain-spread-cell.put { background: transparent; }
.options-chain-table tbody td.chain-spread-cell.is-good { color: #78e3a8; }
.options-chain-table tbody td.chain-spread-cell.is-normal { color: #d6bf7d; }
.options-chain-table tbody td.chain-spread-cell.is-wide { color: #f2bd55; }
.chain-spread-cell span { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 23px; border-radius: 3px; }
.current-price-divider td {
    height: 30px !important;
    border-top: 1px solid rgba(244,197,87,.42) !important;
    border-bottom: 1px solid rgba(244,197,87,.42) !important;
    background: linear-gradient(90deg, rgba(244,197,87,.018), rgba(244,197,87,.12), rgba(244,197,87,.018)) !important;
}
.current-price-divider span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 10px;
    border: 1px solid rgba(244,197,87,.5);
    border-radius: 999px;
    color: #ffe39b;
    background: rgba(27,24,20,.92);
    font-size: 8px;
    font-weight: 720;
    letter-spacing: .035em;
}
.current-price-divider span i { width: 5px; height: 5px; border-radius: 50%; background: #f4c557; box-shadow: 0 0 7px rgba(244,197,87,.62); }
.current-price-divider span b { color: #fff2c6; font-size: 9px; font-weight: 700; }
.option-chain-view[data-density="comfortable"] .options-chain-table td { height: 42px; font-size: 11px; }
.option-chain-view[data-density="comfortable"] .chain-contract-button { height: 33px; font-size: 11px; }
.chain-legend { gap: 14px; padding: 0 12px; border-top: 1px solid rgba(255,255,255,.045); color: var(--legend-muted); font-size: 8px; }
.chain-legend i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; }
.legend-atm { background: #aaa; }.legend-call { background: rgb(0,200,5); }.legend-put { background: rgb(255,88,111); }
.chain-update-time { margin-left: auto; }

.combo-ticket { min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 14px; }
.combo-ticket-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,.06); }
.combo-ticket-header span:first-child { color: var(--legend-muted); font-size: 9px; }
.combo-ticket-header h2 { margin: 2px 0 0; font-size: 16px; font-weight: 640; }
.ticket-state { display: inline-flex; align-items: center; gap: 6px; color: #aaaab1; font-size: 8px; }
.ticket-state.is-ready { color: #8eeab5; }
.ticket-strategy-summary { display: flex; justify-content: space-between; padding: 12px 1px; color: var(--legend-muted); font-size: 9px; }
.ticket-strategy-summary strong { color: #f2f2f3; font-size: 10px; font-weight: 600; }
.ticket-leg { min-height: 58px; display: grid; grid-template-columns: 53px minmax(0,1fr) 22px; align-items: center; gap: 9px; margin-bottom: 6px; padding: 8px; border-radius: 5px; background: rgba(0,0,0,.2); outline: 1px solid rgba(255,255,255,.04); transition: background 140ms ease, outline-color 140ms ease, transform 140ms var(--legend-ease); }
.ticket-leg.has-selection { background: rgba(255,255,255,.035); outline-color: rgba(255,255,255,.09); animation: ticket-leg-in 180ms var(--legend-ease); }
@keyframes ticket-leg-in { from { transform: translateX(5px); opacity: .5; } }
.ticket-leg-type { font-size: 8px; font-weight: 700; line-height: 1.25; }.ticket-leg-type.call { color: #7ce5a8; }.ticket-leg-type.put { color: #ff9dac; }
.ticket-leg > div:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ticket-leg strong { overflow: hidden; color: #ececee; font-size: 10px; font-weight: 610; text-overflow: ellipsis; white-space: nowrap; }
.ticket-leg span { overflow: hidden; color: var(--legend-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.ticket-leg > button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 3px; color: #aaa; background: transparent; cursor: pointer; }
.ticket-leg > button:not(:disabled):hover { color: #fff; background: rgba(255,255,255,.07); }
.ticket-leg > button:disabled { opacity: 0; }
.ticket-order-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 6px; }
.ticket-order-fields label { display: flex; flex-direction: column; gap: 5px; }
.ticket-order-fields select,
.ticket-order-fields label > div { width: 100%; height: 34px; display: flex; align-items: center; padding: 0 9px; border: 0; border-radius: 4px; outline: 1px solid rgba(255,255,255,.055); color: #ededee; background: rgba(0,0,0,.22); font-size: 9px; }
.ticket-order-fields select { cursor: pointer; }.ticket-order-fields select option { background: #202020; }
.ticket-costs { margin-top: 14px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.06); }
.ticket-costs div { display: flex; justify-content: space-between; margin-bottom: 7px; color: var(--legend-muted); font-size: 9px; }
.ticket-costs strong { color: #f1f1f2; font-size: 11px; font-weight: 620; }
.ticket-costs p { margin: 10px 0 0; color: #77777f; font-size: 8px; line-height: 1.45; }
.review-combo-button { width: 100%; height: 38px; margin-top: auto; border: 0; border-radius: 5px; color: #fff; background: rgb(137,92,246); font-size: 9px; font-weight: 700; letter-spacing: .03em; cursor: pointer; transition: filter 140ms ease, transform 100ms ease; }
.review-combo-button:not(:disabled):hover { filter: brightness(1.12); }.review-combo-button:not(:disabled):active { transform: scale(.98); }
.review-combo-button:disabled { color: #77777e; background: rgba(255,255,255,.055); cursor: not-allowed; }
.ticket-footer { justify-content: space-between; margin-top: 9px; color: #77777f; font-size: 8px; }
.ticket-footer span:first-child { display: inline-flex; align-items: center; gap: 5px; }

@media (prefers-reduced-motion: reduce) {
    .chain-refresh span,
    .ticket-leg { animation: none !important; }
}

/* History */
.history-icon {
    position: relative;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    border: 1.5px solid currentColor;
    border-radius: 50%;
}
.history-icon::before { content: ""; position: absolute; top: 3px; left: 6px; width: 1.5px; height: 4px; border-radius: 2px; background: currentColor; transform-origin: 50% 100%; }
.history-icon::after { content: ""; position: absolute; top: 6px; left: 6px; width: 3px; height: 1.5px; border-radius: 2px; background: currentColor; }
.history-icon span { position: absolute; top: 6px; left: -3px; width: 4px; height: 1.5px; border-radius: 2px; background: currentColor; transform: rotate(36deg); }

.history-view {
    min-width: 0;
    height: 100%;
    display: grid;
    grid-template-rows: 58px 72px minmax(0, 1fr);
    gap: var(--legend-gap);
    overflow: hidden;
}
.history-command-bar,
.history-stats article,
.history-ledger {
    border: 0;
    border-radius: 3px;
    background: rgba(32,32,32,.48);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.history-command-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 14px; }
.history-title-block { display: flex; align-items: center; gap: 13px; }
.history-kicker { padding: 4px 7px; border-radius: 3px; color: #b99eff; background: rgba(137,92,246,.13); font-size: 7px; font-weight: 720; letter-spacing: .085em; text-transform: uppercase; }
.history-title-block > div { display: flex; align-items: baseline; gap: 10px; }
.history-title-block h1 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -.015em; }
.history-title-block > div > span { color: var(--legend-muted); font-size: 9px; }
.history-actions { display: flex; align-items: center; gap: 7px; }
.history-filter { height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border-radius: 4px; background: rgba(0,0,0,.18); outline: 1px solid rgba(255,255,255,.045); }
.history-filter > span { color: var(--legend-muted); font-size: 8px; }
.history-filter select { width: 112px; padding: 0; border: 0; outline: 0; color: #ededee; background: transparent; font-size: 9px; cursor: pointer; }
.history-filter option { background: #202020; }
.history-action-button { height: 32px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border: 0; border-radius: 4px; font-size: 8px; font-weight: 680; letter-spacing: .025em; cursor: pointer; transition: background 120ms ease, color 120ms ease, transform 80ms ease; }
.history-action-button:active { transform: scale(.97); }
.history-action-button.export { color: #8be7b2; background: rgba(0,200,5,.085); }
.history-action-button.export:hover { color: #baf4d1; background: rgba(0,200,5,.15); }
.history-action-button.clear { color: #ff9ba8; background: rgba(255,88,111,.08); }
.history-action-button.clear:hover { color: #ffc0c8; background: rgba(255,88,111,.15); }
.download-icon { position: relative; width: 10px; height: 11px; border-bottom: 1px solid currentColor; }
.download-icon::before { content: ""; position: absolute; left: 4px; top: 0; width: 1px; height: 7px; background: currentColor; }
.download-icon::after { content: ""; position: absolute; left: 2px; top: 4px; width: 4px; height: 4px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }

.history-stats { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: var(--legend-gap); }
.history-stats article { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 12px; transition: background 120ms ease; }
.history-stats article:hover { background: rgba(41,41,41,.62); }
.history-stats article > span { color: #898990; font-size: 7px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
.history-stats article > strong { margin-top: 5px; overflow: hidden; color: #f2f2f3; font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.history-stats .history-positive { color: #68dfa0; }
.history-stats .history-negative { color: #ff8293; }
.history-stats .history-info { color: #9fcaff; }
.history-stats .history-average { display: flex; align-items: center; gap: 3px; font-size: 11px; }
.history-average i { color: #68dfa0; font-style: normal; }.history-average em { color: #696970; font-style: normal; }.history-average b { color: #ff8293; font-weight: 650; }

.history-ledger { min-height: 0; display: grid; grid-template-rows: 48px minmax(0,1fr) 32px; overflow: hidden; }
.history-ledger-header { display: flex; align-items: center; justify-content: space-between; padding: 0 13px; border-bottom: 1px solid rgba(255,255,255,.055); }
.history-ledger-header h2 { display: inline; margin: 0; font-size: 12px; font-weight: 630; }
.history-ledger-header > div > span { margin-left: 8px; color: var(--legend-muted); font-size: 8px; }
.history-demo-state { display: inline-flex; align-items: center; gap: 6px; color: #8b8b92; font-size: 8px; }
.history-demo-state i { width: 5px; height: 5px; border-radius: 50%; background: #895cf6; box-shadow: 0 0 7px rgba(137,92,246,.5); }
.history-table-scroll { min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: #555 transparent; }
.history-table { width: 100%; min-width: 1040px; border-spacing: 0; border-collapse: separate; color: #d5d5d9; table-layout: auto; font-size: 8.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.history-table thead { position: sticky; top: 0; z-index: 3; }
.history-table th { height: 31px; padding: 0 8px; border-bottom: 1px solid rgba(255,255,255,.07); color: #85858d; background: rgba(24,24,24,.97); font-size: 7px; font-weight: 680; letter-spacing: .055em; text-align: left; text-transform: uppercase; }
.history-table th.numeric,.history-table td.numeric { text-align: right; }
.history-table th.history-check,.history-table td.history-check { width: 34px; padding-right: 2px; padding-left: 10px; text-align: center; }
.history-table input[type="checkbox"] { width: 12px; height: 12px; margin: 0; accent-color: #895cf6; cursor: pointer; }
.history-table td { height: 39px; padding: 0 8px; border-bottom: 1px solid rgba(255,255,255,.035); transition: background 100ms ease, color 100ms ease; }
.history-table tbody tr:hover td { color: #f1f1f2; background: rgba(255,255,255,.045); }
.history-table .trade-time { color: #8e8e96; }.history-table .trade-ticker { color: #f5f5f6; font-weight: 680; }.history-table .trade-contract { color: #9bcaff; }
.history-badge { display: inline-flex; align-items: center; height: 19px; padding: 0 6px; border-radius: 3px; font-size: 7px; font-weight: 720; letter-spacing: .02em; }
.history-badge.call { color: #75e6aa; background: rgba(0,200,5,.09); }.history-badge.put { color: #ff96a5; background: rgba(255,88,111,.09); }
.history-badge.paper { color: #e9c963; background: rgba(244,197,87,.1); }.history-badge.live { color: #ff9baa; background: rgba(255,88,111,.1); }
.history-badge.reason { color: #bba5f7; background: rgba(137,92,246,.1); }.history-badge.reason.floor { color: #e9b36a; background: rgba(244,165,45,.1); }.history-badge.reason.tp { color: #75e6aa; background: rgba(0,200,5,.09); }.history-badge.reason.emergency { color: #ff96a5; background: rgba(255,88,111,.1); }
.history-pnl { font-weight: 690; }.history-pnl.positive { color: #68dfa0; }.history-pnl.negative { color: #ff8293; }.history-pnl small { margin-left: 4px; color: #77777f; font-size: 7px; font-weight: 500; }
.history-ledger-footer { display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-top: 1px solid rgba(255,255,255,.045); color: #77777f; font-size: 8px; }
.history-empty { height: 220px !important; color: #8c8c93; text-align: center; }

/* Journal + Settings navigation */
.journal-icon { position: relative; width: 14px; height: 14px; flex: 0 0 auto; border: 1.5px solid currentColor; border-radius: 2px; }
.journal-icon::before { content: ""; position: absolute; left: 3px; right: 3px; top: 3px; height: 1px; background: currentColor; box-shadow: 0 3px 0 currentColor, 0 6px 0 currentColor; opacity: .85; }
.journal-icon span { position: absolute; top: -2px; right: 1px; width: 3px; height: 7px; border-radius: 2px 2px 0 0; background: currentColor; transform: rotate(34deg); transform-origin: bottom; }
.settings-icon { position: relative; width: 14px; height: 14px; flex: 0 0 auto; border: 1.5px solid currentColor; border-radius: 50%; box-shadow: 0 -4px 0 -3px currentColor, 0 4px 0 -3px currentColor, 4px 0 0 -3px currentColor, -4px 0 0 -3px currentColor; }
.settings-icon::before { content: ""; position: absolute; inset: 4px; border: 1px solid currentColor; border-radius: 50%; }
.journal-view { min-width: 0; height: 100%; display: grid; grid-template-rows: 58px minmax(0,1fr); gap: var(--legend-gap); overflow: hidden; }
.journal-view > header,.journal-view > div { border-radius: 3px; background: rgba(32,32,32,.48); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); box-shadow: inset 0 1px rgba(255,255,255,.025); }
.journal-view > header { display: flex; align-items: center; gap: 8px; padding: 0 14px; }.journal-view > header span { color: #9b7ce8; font-size: 7px; font-weight: 720; letter-spacing: .09em; text-transform: uppercase; }.journal-view > header h1 { margin: 0; font-size: 15px; font-weight: 650; }
.journal-view > div { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #8a8a91; }
.journal-view > div h2 { margin: 12px 0 4px; color: #d8d8db; font-size: 14px; font-weight: 620; }.journal-view > div p { margin: 0; font-size: 9px; }
.journal-placeholder-icon { position: relative; width: 34px; height: 38px; border: 1px solid #77777f; border-radius: 4px; opacity: .72; }.journal-placeholder-icon::before { content: ""; position: absolute; left: 8px; right: 8px; top: 10px; height: 1px; background: currentColor; box-shadow: 0 7px 0 currentColor,0 14px 0 currentColor; }

.settings-view { min-width: 0; height: 100%; display: grid; grid-template-rows: 72px 76px minmax(0,1fr); gap: var(--legend-gap); overflow: hidden; }
.settings-command-bar,.settings-tabs,.settings-workspace { border: 0; border-radius: 3px; background: rgba(32,32,32,.48); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); box-shadow: inset 0 1px rgba(255,255,255,.025); }
.settings-command-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 15px; }
.settings-command-bar > div > span { color: #a98cff; font-size: 7px; font-weight: 720; letter-spacing: .09em; text-transform: uppercase; }
.settings-command-bar h1 { display: inline; margin: 0 9px 0 7px; font-size: 16px; font-weight: 650; }
.settings-command-bar p { display: inline; margin: 0; color: #8d8d94; font-size: 9px; }
.settings-autosave { display: inline-flex; align-items: center; gap: 6px; color: #83838a; font-size: 8px; }
.settings-autosave i,.settings-section-status i { width: 5px; height: 5px; border-radius: 50%; background: rgb(0,200,5); box-shadow: 0 0 7px rgba(0,200,5,.42); }
.settings-tabs { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 3px; padding: 4px; }
.settings-tabs button { min-width: 0; display: grid; grid-template-columns: 23px minmax(0,1fr); grid-template-rows: 16px 13px; align-content: center; column-gap: 7px; padding: 0 8px; border: 0; border-radius: 4px; color: #98989f; background: transparent; text-align: left; cursor: pointer; transition: color 120ms ease, background 120ms ease, transform 80ms ease; }
.settings-tabs button:hover { color: #eeeef0; background: rgba(255,255,255,.055); }.settings-tabs button:active { transform: scale(.98); }
.settings-tabs button.is-active { color: #f7f7f8; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.045); }
.settings-tabs b { align-self: end; overflow: hidden; font-size: 9px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.settings-tabs small { overflow: hidden; color: #74747c; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.settings-tab-icon { grid-row: 1/3; align-self: center; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 5px; background: rgba(137,92,246,.13); }
.settings-tab-icon::before { content: ""; width: 7px; height: 7px; border: 1.4px solid currentColor; border-radius: 50%; }
.settings-tab-icon.trading { color: #91caff; background: rgba(88,166,255,.11); }.settings-tab-icon.trading::before { border-radius: 1px; transform: rotate(45deg); }
.settings-tab-icon.risk { color: #e8b36e; background: rgba(244,165,45,.1); }.settings-tab-icon.risk::before { border-radius: 4px 4px 6px 6px; }
.settings-tab-icon.broker { color: #78e2a6; background: rgba(0,200,5,.09); }.settings-tab-icon.broker::before { border-radius: 1px; box-shadow: 4px 0 0 -2px currentColor,-4px 0 0 -2px currentColor; }
.settings-tab-icon.integrations { color: #b99fff; }.settings-tab-icon.integrations::before { width: 9px; height: 6px; border-radius: 5px 5px 2px 2px; }
.settings-tab-icon.security { color: #ff91a1; background: rgba(255,88,111,.09); }.settings-tab-icon.security::before { border-radius: 5px 5px 2px 2px; }
.settings-tab-icon.billing { color: #ead06f; background: rgba(244,197,87,.1); }.settings-tab-icon.billing::before { width: 9px; height: 6px; border-radius: 1px; }
.settings-workspace { min-height: 0; display: grid; grid-template-rows: 66px minmax(0,1fr); overflow: hidden; }
.settings-section-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 15px; border-bottom: 1px solid rgba(255,255,255,.055); }
.settings-section-heading > div > span { color: #8f70e6; font-size: 7px; font-weight: 720; letter-spacing: .1em; }
.settings-section-heading h2 { display: inline; margin: 0 7px; font-size: 15px; font-weight: 650; }.settings-section-heading p { display: inline; margin: 0; color: #7f7f87; font-size: 8px; }
.settings-section-status { display: inline-flex; align-items: center; gap: 6px; color: #828289; font-size: 8px; }
.settings-panel { min-height: 0; overflow: auto; padding: 14px; scrollbar-width: thin; scrollbar-color: #555 transparent; animation: settings-panel-in 160ms var(--legend-ease); }
@keyframes settings-panel-in { from { opacity: .45; transform: translateY(3px); } }
.settings-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; max-width: 900px; }
.settings-card { min-height: 112px; padding: 14px; border-radius: 4px; background: rgba(0,0,0,.18); outline: 1px solid rgba(255,255,255,.045); }
.settings-card.wide { grid-column: 1/-1; }
.settings-card > span { color: #818188; font-size: 7px; font-weight: 680; letter-spacing: .08em; text-transform: uppercase; }
.settings-card h3 { margin: 5px 0 4px; font-size: 12px; font-weight: 630; }.settings-card p { margin: 0 0 12px; color: #77777f; font-size: 8px; line-height: 1.5; }
.settings-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.settings-field { height: 37px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 10px; border-radius: 4px; color: #85858d; background: rgba(255,255,255,.025); font-size: 8px; }.settings-field strong { color: #ededee; font-size: 9px; font-weight: 590; }
.settings-card-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 3px; color: #8ce7b3; background: rgba(0,200,5,.08); font-size: 7px; font-weight: 700; }

/* Sidebar footer, broker selector and compact mode */
.trading-shell { transition: grid-template-columns 220ms var(--legend-ease); }
.legend-sidebar { display: flex; flex-direction: column; }
.sidebar-navigation { flex: 1 1 auto; min-height: 0; }
.sidebar-footer { position: relative; z-index: 3; flex: 0 0 auto; padding: 4px; border-top: 1px solid rgba(255,255,255,.055); }
.sidebar-utility-navigation { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.information-icon { width: 14px; height: 14px; display: grid; place-items: center; flex: 0 0 auto; border: 1.3px solid currentColor; border-radius: 50%; font-size: 9px; font-family: Georgia,serif; font-weight: 700; }
.support-icon { position: relative; width: 14px; height: 12px; flex: 0 0 auto; border: 1.3px solid currentColor; border-radius: 4px; }
.support-icon::after { content: ""; position: absolute; bottom: -3px; left: 3px; width: 4px; height: 4px; border-left: 1.3px solid currentColor; transform: skew(-28deg); }
.support-icon span { position: absolute; top: 4px; left: 3px; width: 6px; height: 1px; background: currentColor; box-shadow: 0 3px 0 currentColor; opacity: .72; }
.support-unread { width: 15px; height: 15px; display: grid; place-items: center; margin-left: auto; border-radius: 50%; color: #fff; background: #ff586f; font-size: 7px; font-weight: 700; box-shadow: 0 0 8px rgba(255,88,111,.28); }
.broker-status-button { width: 100%; height: 48px; display: flex; align-items: center; gap: 9px; padding: 0 9px; border: 0; border-radius: 5px; color: #d6d6da; background: rgba(0,0,0,.2); cursor: pointer; transition: background 120ms ease, transform 80ms ease; }
.broker-status-button:hover,.broker-status-button[aria-expanded="true"] { background: rgba(255,255,255,.075); }.broker-status-button:active { transform: scale(.985); }
.broker-plug-icon { position: relative; width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 5px; color: #7ce4aa; background: rgba(0,200,5,.09); }
.broker-plug-icon::before { content: ""; width: 8px; height: 7px; border: 1.4px solid currentColor; border-top: 0; border-radius: 0 0 4px 4px; }
.broker-plug-icon::after { content: ""; position: absolute; top: 4px; left: 8px; width: 1.4px; height: 5px; background: currentColor; box-shadow: 4px 0 0 currentColor; }
.broker-plug-icon i { position: absolute; bottom: 3px; left: 10px; width: 1.4px; height: 5px; background: currentColor; }
.broker-status-button.is-disconnected .broker-plug-icon { color: #ff8293; background: rgba(255,88,111,.09); }.broker-status-button.is-disconnected .broker-status-copy small i { background: #ff586f; box-shadow: 0 0 6px rgba(255,88,111,.4); }
.broker-status-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 3px; text-align: left; }
.broker-status-copy strong { overflow: hidden; font-size: 10px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.broker-status-copy small { display: flex; align-items: center; gap: 5px; color: #7e7e86; font-size: 7px; }.broker-status-copy small i { width: 5px; height: 5px; border-radius: 50%; background: rgb(0,200,5); box-shadow: 0 0 6px rgba(0,200,5,.42); }
.broker-menu-chevron { width: 6px; height: 6px; flex: 0 0 auto; border-right: 1px solid #77777e; border-bottom: 1px solid #77777e; transform: rotate(-45deg); transition: transform 140ms ease; }.broker-status-button[aria-expanded="true"] .broker-menu-chevron { transform: rotate(135deg); }
.sidebar-collapse-control { width: 100%; height: 30px; display: flex; align-items: center; gap: 9px; margin-top: 3px; padding: 0 10px; border: 0; border-radius: 4px; color: #85858c; background: transparent; font-size: 8px; cursor: pointer; transition: color 120ms ease,background 120ms ease; }
.sidebar-collapse-control:hover { color: #eeeef0; background: rgba(255,255,255,.055); }.sidebar-collapse-control span { width: 8px; height: 8px; border-left: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform 180ms var(--legend-ease); }.sidebar-collapse-control b { font-weight: 560; }

.broker-popover-backdrop { position: fixed; z-index: 109; inset: 0; background: rgba(0,0,0,.18); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity 140ms ease,visibility 140ms; }
.broker-popover-backdrop.is-open { opacity: 1; visibility: visible; }
.broker-popover { position: fixed; z-index: 110; top: 50%; left: 50%; width: min(720px,calc(100vw - 80px)); height: min(620px,calc(100vh - 48px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; color: #f2f2f3; background: linear-gradient(145deg,rgba(45,45,48,.9),rgba(27,27,29,.86)); -webkit-backdrop-filter: blur(30px) saturate(130%); backdrop-filter: blur(30px) saturate(130%); box-shadow: 0 28px 90px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.08),inset 0 -1px rgba(255,255,255,.025); opacity: 0; visibility: hidden; transform: translate(-50%,-47%) scale(.965); transform-origin: center; transition: opacity 140ms var(--legend-ease),transform 180ms var(--legend-ease),visibility 140ms; }
.broker-popover.is-open { opacity: 1; visibility: visible; transform: translate(-50%,-50%) scale(1); }
.broker-popover-header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px 0 14px; border-bottom: 1px solid rgba(255,255,255,.06); cursor: grab; }.broker-popover-header:active { cursor: grabbing; }
.broker-popover-header > div { display: flex; align-items: center; gap: 9px; }.broker-popover-header h2 { margin: 0; font-size: 13px; font-weight: 640; }.broker-popover-header p { margin: 2px 0 0; color: #828289; font-size: 8px; }
.broker-header-icon { position: relative; width: 22px; height: 22px; border-radius: 5px; background: rgba(137,92,246,.13); }.broker-header-icon::before { content: ""; position: absolute; inset: 6px; border: 1px solid #bba4fa; border-radius: 2px 2px 4px 4px; }
.broker-delay-note { display: flex; align-items: flex-start; gap: 8px; margin: 10px; padding: 9px; border-radius: 5px; color: #b4a36d; background: rgba(244,197,87,.075); }.broker-delay-note > span { width: 15px; height: 15px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid currentColor; border-radius: 50%; font-size: 8px; font-weight: 700; }.broker-delay-note p { margin: 0; font-size: 8px; line-height: 1.45; }
.broker-list-scroll { min-height: 0; flex: 1; display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 5px 14px; overflow: auto; padding: 0 14px 10px; scrollbar-width: thin; scrollbar-color: #555 transparent; }
.broker-tier-group { margin-top: 8px; }.broker-tier-group h3 { margin: 0 0 6px 2px; color: #7f7f87; font-size: 7px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.broker-none-group { grid-column: 1/-1; }
.broker-option-list { display: grid; gap: 4px; }.broker-option { width: 100%; min-height: 42px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 6px 9px; border: 0; border-radius: 4px; color: #b0b0b7; background: rgba(0,0,0,.18); outline: 1px solid rgba(255,255,255,.04); text-align: left; cursor: pointer; transition: color 120ms ease,background 120ms ease,outline-color 120ms ease,transform 80ms ease; }
.broker-option:hover { color: #efeff1; background: rgba(255,255,255,.055); outline-color: rgba(255,255,255,.1); }.broker-option:active { transform: scale(.99); }.broker-option.is-selected { color: #fff; background: rgba(137,92,246,.11); outline-color: rgba(169,136,255,.36); }
.broker-option-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }.broker-option-copy strong { overflow: hidden; font-size: 9px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }.broker-option-copy small { color: #74747c; font-size: 7px; }.broker-option-meta { display: flex; align-items: center; gap: 5px; }.broker-tier-badge { display: inline-flex; align-items: center; height: 18px; padding: 0 5px; border-radius: 3px; font-size: 6px; font-weight: 730; letter-spacing: .045em; }.broker-tier-badge.paper,.broker-tier-badge.live { color: #79e5aa; background: rgba(0,200,5,.09); }.broker-tier-badge.none { color: #9999a1; background: rgba(255,255,255,.055); }
.broker-option.broker-tone-vylmoon.is-selected { background: rgba(137,92,246,.12); outline-color: rgba(169,136,255,.48); }
.broker-option.broker-tone-tradier.is-selected { background: rgba(0,200,5,.10); outline-color: rgba(0,200,5,.45); }
.broker-option.broker-tone-tastytrade.is-selected { background: rgba(239,51,64,.11); outline-color: rgba(239,51,64,.48); }
.broker-option.broker-tone-tradestation.is-selected { background: rgba(0,157,219,.11); outline-color: rgba(0,157,219,.48); }
.broker-option.broker-tone-alpaca.is-selected { background: rgba(244,211,69,.10); outline-color: rgba(244,211,69,.40); }
.broker-tier-badge.vylmoon { color: #cbb7ff; background: rgba(137,92,246,.14); }
.broker-tier-badge.tradier { color: #79e5aa; background: rgba(0,200,5,.12); }
.broker-tier-badge.tastytrade { color: #ff8992; background: rgba(239,51,64,.13); }
.broker-tier-badge.tradestation { color: #75d8ff; background: rgba(0,157,219,.13); }
.broker-tier-badge.alpaca { color: #f4d345; background: rgba(244,211,69,.12); }
.broker-current-badge { display: none !important; }
.broker-popover-footer { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 11px 0 14px; border-top: 1px solid rgba(255,255,255,.06); }.broker-popover-footer > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }.broker-popover-footer span { color: #77777f; font-size: 7px; text-transform: uppercase; }.broker-popover-footer strong { overflow: hidden; font-size: 9px; font-weight: 610; text-overflow: ellipsis; white-space: nowrap; }.broker-popover-footer button { height: 32px; padding: 0 13px; border: 0; border-radius: 4px; color: #fff; background: #895cf6; font-size: 8px; font-weight: 700; cursor: pointer; }.broker-popover-footer button:hover { filter: brightness(1.1); }
.broker-credentials-panel {
    margin: 0 10px 10px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 6px;
    background: rgba(0,0,0,.18);
}

.broker-credentials-panel h3 {
    margin: 0 0 6px;
    color: #94c7ff;
    font-size: 9px;
    font-weight: 760;
    letter-spacing: .12em;
}

.broker-credentials-panel p {
    margin: 0 0 9px;
    color: #8b8b94;
    font-size: 8px;
    line-height: 1.45;
}

.broker-credentials-panel label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.broker-credentials-panel label span {
    color: #a9a9b2;
    font-size: 8px;
}

.broker-credentials-panel input,
.broker-credentials-panel select {
    width: 100%;
    height: 30px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 5px;
    color: #f1f5fb;
    background: rgba(7,12,20,.74);
    font-size: 10px;
    outline: 0;
}

.broker-credentials-panel input {
    padding: 0 8px;
}

.broker-credentials-panel input:focus,
.broker-credentials-panel select:focus {
    border-color: rgba(0,210,255,.52);
    box-shadow: 0 0 0 2px rgba(0,210,255,.08);
}

.broker-oauth-status {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 5px;
    background: rgba(255,255,255,.025);
}

.broker-oauth-status span {
    color: #9a9aa3;
    font-size: 8px;
}

.broker-oauth-status b {
    font-size: 8px;
}

.broker-oauth-status.is-connected b {
    color: #2de2a6;
}

.broker-oauth-status.is-disconnected b,
.broker-credential-warning {
    color: #ff6f86;
}

.broker-oauth-actions {
    display: grid;
    gap: 6px;
    margin-top: 9px;
}

.broker-oauth-actions button {
    min-height: 30px;
    border: 1px solid rgba(0,210,255,.35);
    border-radius: 5px;
    color: #58dfff;
    background: rgba(0,210,255,.08);
    font-size: 8px;
    font-weight: 760;
    cursor: pointer;
}

.broker-oauth-actions button + button {
    border-color: rgba(255,93,113,.36);
    color: #ff8f9f;
    background: rgba(255,93,113,.08);
}

.utility-view { min-width: 0; height: 100%; display: grid; grid-template-rows: 58px minmax(0,1fr); gap: var(--legend-gap); overflow: hidden; }.utility-view > header,.utility-view > div { border-radius: 3px; background: rgba(32,32,32,.48); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); box-shadow: inset 0 1px rgba(255,255,255,.025); }.utility-view > header { display: flex; align-items: center; gap: 8px; padding: 0 14px; }.utility-view > header span { color: #9b7ce8; font-size: 7px; font-weight: 720; letter-spacing: .09em; text-transform: uppercase; }.utility-view > header h1 { margin: 0; font-size: 15px; font-weight: 650; }.utility-view > div { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #85858d; }.utility-view > div h2 { margin: 10px 0 4px; color: #dbdbde; font-size: 14px; font-weight: 620; }.utility-view > div p { margin: 0; font-size: 9px; }.information-placeholder-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #77777f; border-radius: 50%; font: 700 19px Georgia,serif; }.support-placeholder-icon { position: relative; width: 38px; height: 30px; border: 1px solid #77777f; border-radius: 7px; }.support-placeholder-icon::after { content: ""; position: absolute; left: 8px; bottom: -6px; width: 8px; height: 8px; border-left: 1px solid #77777f; transform: skew(-25deg); }.support-placeholder-icon i { position: absolute; top: 10px; left: 9px; width: 18px; height: 1px; background: #77777f; box-shadow: 0 6px 0 #77777f; }

.trading-shell.is-sidebar-collapsed { grid-template-columns: 52px minmax(0,1fr); }
.trading-shell.is-sidebar-collapsed .sidebar-brand { height: 112px; flex-direction: column; justify-content: flex-start; gap: 5px; padding: 8px 4px; }
.trading-shell.is-sidebar-collapsed .sidebar-header-actions { flex-direction: column; gap: 1px; }
.trading-shell.is-sidebar-collapsed .sidebar-option { justify-content: center; gap: 0; padding: 0; }
.trading-shell.is-sidebar-collapsed .option-label,.trading-shell.is-sidebar-collapsed .broker-status-copy,.trading-shell.is-sidebar-collapsed .broker-menu-chevron { display: none; }
.trading-shell.is-sidebar-collapsed .sidebar-footer { padding: 4px; }.trading-shell.is-sidebar-collapsed .broker-status-button { justify-content: center; height: 42px; padding: 0; }.trading-shell.is-sidebar-collapsed .sidebar-collapse-control { justify-content: center; padding: 0; }.trading-shell.is-sidebar-collapsed .sidebar-collapse-control span { transform: rotate(225deg); }
.trading-shell.is-sidebar-collapsed .events-popover,.trading-shell.is-sidebar-collapsed .user-popover { left: 56px !important; }

/* Information center */
.information-view { min-width: 0; height: 100%; display: grid; grid-template-rows: 58px 54px minmax(0,1fr); gap: var(--legend-gap); overflow: hidden; }
.information-command-bar,.information-tabs,.information-workspace,.info-section-card { background: linear-gradient(145deg,rgba(38,38,41,.72),rgba(27,27,29,.66)); -webkit-backdrop-filter: blur(24px) saturate(118%); backdrop-filter: blur(24px) saturate(118%); box-shadow: inset 0 1px rgba(255,255,255,.055),0 10px 30px rgba(0,0,0,.07); }
.information-command-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 14px; border-radius: 3px; }
.information-command-bar > div { min-width: 0; }.information-command-bar > div > span,.info-section-card > header > div > span { color: #9b7ce8; font-size: 7px; font-weight: 720; letter-spacing: .1em; text-transform: uppercase; }
.information-command-bar h1 { display: inline; margin: 0 8px; color: #f0f0f2; font-size: 15px; font-weight: 650; }.information-command-bar p { display: inline; margin: 0; color: #7f7f87; font-size: 8px; }
.information-version { display: inline-flex; align-items: center; gap: 6px; color: #85858d; font-size: 8px; white-space: nowrap; }.information-version i { width: 5px; height: 5px; border-radius: 50%; background: #00c805; box-shadow: 0 0 7px rgba(0,200,5,.4); }
.information-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 3px; padding: 4px; border-radius: 3px; }
.information-tabs button { min-width: 0; display: grid; grid-template-columns: 26px minmax(0,1fr); grid-template-rows: 1fr 1fr; align-items: center; column-gap: 9px; padding: 0 9px; border: 0; border-radius: 4px; color: #888890; background: transparent; text-align: left; cursor: pointer; transition: color 130ms ease,background 130ms ease,transform 80ms ease; }
.information-tabs button:hover { color: #e6e6e9; background: rgba(255,255,255,.045); }.information-tabs button:active { transform: scale(.992); }.information-tabs button.is-active { color: #f3f3f4; background: rgba(137,92,246,.1); box-shadow: inset 0 0 0 1px rgba(169,136,255,.17); }
.information-tabs b { align-self: end; overflow: hidden; font-size: 9px; font-weight: 640; text-overflow: ellipsis; white-space: nowrap; }.information-tabs small { align-self: start; color: #707078; font-size: 7px; }.information-tabs button.is-active small { color: #9b8bbf; }
.info-tab-icon { grid-row: 1/-1; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 6px; color: #a78bf3; background: rgba(137,92,246,.1); font: 700 11px Georgia,serif; }
.info-tab-icon.simulator { position: relative; }.info-tab-icon.simulator::before { content: ""; width: 9px; height: 12px; border: 1px solid currentColor; border-top: 0; border-radius: 0 0 5px 5px; transform: rotate(18deg); }.info-tab-icon.simulator::after { content: ""; position: absolute; top: 5px; left: 8px; width: 7px; border-top: 1px solid currentColor; transform: rotate(18deg); }
.info-tab-icon.resources { position: relative; }.info-tab-icon.resources::before { content: ""; width: 10px; height: 12px; border: 1px solid currentColor; border-radius: 2px; }.info-tab-icon.resources::after { content: ""; position: absolute; width: 5px; border-top: 1px solid currentColor; box-shadow: 0 3px 0 currentColor; }
.information-workspace { min-height: 0; overflow: hidden; border-radius: 3px; }.information-panel { height: 100%; overflow: auto; padding: 10px; scrollbar-width: thin; scrollbar-color: #505057 transparent; animation: information-panel-in 170ms var(--legend-ease); }
@keyframes information-panel-in { from { opacity: .35; transform: translateY(4px); } }
.information-panel.is-active { display: block; }.information-panel[hidden] { display: none; }
.info-section-card { max-width: 1120px; margin: 0 auto 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.045); border-radius: 6px; }
.info-section-card > header { min-height: 61px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 10px 13px; border-bottom: 1px solid rgba(255,255,255,.05); background: rgba(255,255,255,.012); }.info-section-card > header h2 { margin: 3px 0 0; color: #ededf0; font-size: 14px; font-weight: 640; }.info-section-card > header > p { max-width: 440px; margin: 0; color: #74747c; font-size: 8px; line-height: 1.5; text-align: right; }
.info-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; padding: 8px; }.info-data-card { position: relative; min-height: 83px; padding: 11px 12px; overflow: hidden; border-radius: 5px; background: rgba(0,0,0,.17); outline: 1px solid rgba(255,255,255,.04); transition: transform 120ms ease,background 120ms ease,outline-color 120ms ease; }.info-data-card:hover { z-index: 1; background: rgba(255,255,255,.045); outline-color: rgba(255,255,255,.1); transform: translateY(-1px); }
.info-data-card::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: transparent; }.info-data-card.accent-green::before { background: #00c805; }.info-data-card.accent-red::before { background: #ff586f; }.info-data-card.accent-blue::before { background: #73a8ff; }.info-data-card.accent-purple::before { background: #9b70ef; }.info-data-card.accent-yellow::before { background: #f4c557; }
.info-data-card strong { display: flex; align-items: center; gap: 6px; color: #e7e7e9; font-size: 10px; font-weight: 640; }.info-data-card strong i { width: 5px; height: 5px; border-radius: 50%; background: #00c805; box-shadow: 0 0 6px rgba(0,200,5,.42); }.info-data-card p { margin: 6px 0 0; color: #85858d; font-size: 8px; line-height: 1.55; }.info-data-card p b { color: #cfcfd3; font-weight: 620; }.info-wide { grid-column: 1/-1; }
.exit-modes-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }.info-levels-card { display: grid; grid-template-columns: minmax(190px,.72fr) minmax(0,1.5fr); gap: 16px; margin: 0 8px 8px; padding: 14px; border-radius: 5px; background: linear-gradient(120deg,rgba(0,200,5,.055),rgba(0,0,0,.19)); outline: 1px solid rgba(0,200,5,.12); }.info-levels-card > div > span { color: #6bd799; font-size: 7px; font-weight: 720; letter-spacing: .1em; }.info-levels-card h3 { margin: 5px 0; font-size: 12px; font-weight: 640; }.info-levels-card p { margin: 0; color: #7c7c84; font-size: 8px; line-height: 1.5; }.info-levels-card ol { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 0; padding: 0; list-style: none; }.info-levels-card li { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 7px; padding: 7px; border-radius: 4px; background: rgba(0,0,0,.16); }.info-levels-card li b { color: #b7ebcc; font-size: 8px; }.info-levels-card li span { color: #85858c; font-size: 7px; line-height: 1.45; }.info-secondary-grid { padding-top: 0; }
.simulator-balance { display: flex; align-items: center; justify-content: space-between; margin: 8px 8px 0; padding: 13px 15px; border-radius: 5px; background: radial-gradient(circle at 8% 50%,rgba(0,200,5,.1),transparent 37%),rgba(0,0,0,.18); outline: 1px solid rgba(0,200,5,.13); }.simulator-balance > div { display: flex; flex-direction: column; gap: 3px; }.simulator-balance div span { color: #7c7c84; font-size: 7px; text-transform: uppercase; }.simulator-balance strong { color: #85eaae; font-size: 18px; font-weight: 610; }.simulator-balance > span { color: #77dca2; font-size: 9px; font-weight: 700; }.ticker-chip-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }.ticker-chip-row span { padding: 4px 7px; border-radius: 3px; color: #ddc97d; background: rgba(244,197,87,.07); font-size: 7px; font-weight: 680; }
.faq-heading { position: sticky; top: -10px; z-index: 3; background: rgba(35,35,38,.9)!important; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }.faq-search { width: min(310px,44%); height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 4px; background: rgba(0,0,0,.22); outline: 1px solid rgba(255,255,255,.06); }.faq-search > span { position: relative; width: 10px; height: 10px; border: 1px solid #777780; border-radius: 50%; }.faq-search > span::after { content: ""; position: absolute; right: -4px; bottom: -2px; width: 5px; border-top: 1px solid #777780; transform: rotate(45deg); }.faq-search input { min-width: 0; width: 100%; border: 0; outline: 0; color: #e9e9eb; background: transparent; font: inherit; font-size: 8px; }.faq-search input::placeholder { color: #696971; }
.faq-list { display: grid; gap: 4px; padding: 8px; }.faq-list details { overflow: hidden; border-radius: 4px; background: rgba(0,0,0,.16); outline: 1px solid rgba(255,255,255,.04); }.faq-list details[open] { background: rgba(255,255,255,.03); outline-color: rgba(137,92,246,.2); }.faq-list summary { min-height: 39px; display: flex; align-items: center; gap: 10px; padding: 0 11px; color: #ceced2; font-size: 9px; font-weight: 590; cursor: pointer; list-style: none; transition: color 120ms ease,background 120ms ease; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary:hover { color: #fff; background: rgba(255,255,255,.03); }.faq-list summary > span { width: 21px; color: #8f70e6; font-size: 7px; font-variant-numeric: tabular-nums; }.faq-list summary::after { content: "+"; margin-left: auto; color: #85858d; font-size: 15px; font-weight: 350; }.faq-list details[open] summary::after { content: "−"; color: #ae91f5; }.faq-list details > div { padding: 10px 42px; border-top: 1px solid rgba(255,255,255,.045); background: rgba(0,0,0,.1); }.faq-list p { max-width: 880px; margin: 0; color: #92929a; font-size: 8px; line-height: 1.65; }.faq-list p b { color: #d4d4d8; }.faq-green { color: #75dfa2!important; }.faq-yellow { color: #dfc56c!important; }.faq-red { color: #ff899a!important; }.faq-empty { margin: 8px; padding: 32px; color: #72727a; text-align: center; font-size: 9px; }
.resources-grid { max-width: 1120px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 auto; }.resource-card { margin: 0; }.resource-community { grid-column: 1/-1; }.resource-action { width: calc(100% - 16px); min-height: 54px; display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 10px; margin: 8px; padding: 8px 10px; border: 0; border-radius: 5px; color: #dcdce0; background: rgba(0,0,0,.17); text-align: left; cursor: pointer; }.resource-action:hover { background: rgba(255,255,255,.05); }.resource-action > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; }.resource-action b { font-size: 9px; }.resource-action small { color: #74747c; font-size: 7px; }.resource-action > i { color: #8f70e6; font-size: 18px; font-style: normal; }.resource-action-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 5px; background: rgba(115,168,255,.09); }.resource-action-icon::before { content: "↻"; color: #84b1f7; font-size: 15px; }
.resource-links,.community-links { display: grid; gap: 4px; padding: 8px; }.resource-links button,.community-links a { min-height: 37px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px; border: 0; border-radius: 4px; color: #bdbdc3; background: rgba(0,0,0,.16); font-size: 8px; text-decoration: none; cursor: pointer; }.resource-links button:hover,.community-links a:hover { color: #fff; background: rgba(255,255,255,.05); }.resource-links i { color: #77777f; font-style: normal; }.community-links { grid-template-columns: repeat(5,1fr); }.community-links a { min-height: 53px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; }.community-links b { font-size: 9px; }.community-links span { color: #8370ba; font-size: 7px; }

@media (max-width: 1050px) { .exit-modes-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.community-links { grid-template-columns: repeat(3,1fr); } }

/* Denser Robinhood-style glass across every workspace surface */
:root { --legend-surface: rgba(31,31,33,.66); }
.legend-sidebar,
.information-bar,
.workspace-window,
.chain-command-bar,
.chain-expiration-strip,
.combo-strategy-bar,
.chain-window,
.combo-ticket,
.history-command-bar,
.history-stats article,
.history-ledger,
.journal-view > header,
.journal-view > div,
.settings-command-bar,
.settings-tabs,
.settings-workspace,
.utility-view > header,
.utility-view > div {
    -webkit-backdrop-filter: blur(24px) saturate(118%);
    backdrop-filter: blur(24px) saturate(118%);
}
.chain-command-bar,
.chain-expiration-strip,
.combo-strategy-bar,
.chain-window,
.combo-ticket,
.history-command-bar,
.history-stats article,
.history-ledger,
.journal-view > header,
.journal-view > div,
.settings-command-bar,
.settings-tabs,
.settings-workspace,
.utility-view > header,
.utility-view > div {
    background: linear-gradient(145deg,rgba(38,38,41,.72),rgba(27,27,29,.66));
    box-shadow: inset 0 1px rgba(255,255,255,.055),0 10px 30px rgba(0,0,0,.07);
}

/* Typography rebalance: closer to the Robinhood Legend desktop density. */
:root {
    font-family: "Capsule Sans Text", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --legend-gap: 5px;
    --type-micro: 11px;
    --type-caption: 12px;
    --type-body: 13px;
    --type-control: 13px;
    --type-title: 15px;
    --type-heading: 18px;
}

body {
    font-family: "Capsule Sans Text", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: var(--type-body);
    text-rendering: optimizeLegibility;
}

.trading-shell {
    grid-template-columns: 228px minmax(0, 1fr);
}

.sidebar-brand,
.information-bar {
    height: 50px;
    min-height: 50px;
}

.sidebar-option {
    height: 38px;
    gap: 10px;
    padding: 0 13px;
}

.option-label,
.ticker-symbol,
.entries-toolbar h2,
.exit-toolbar h2,
.chain-window-toolbar h2,
.history-ledger-header h2,
.journal-view > header h1,
.utility-view > header h1 {
    font-size: var(--type-title);
    font-weight: 620;
    line-height: 20px;
}

.sidebar-icon-button {
    width: 36px;
    height: 36px;
}

.brand-mark {
    width: 27px;
    height: 31px;
}

.metric-label,
.sync-status,
.events-status,
.entry-status-chip,
.entries-context,
.entries-section-label,
.setting-label,
.exit-panel-heading p,
.history-filter > span,
.history-demo-state,
.history-ledger-header > div > span,
.ticket-state,
.settings-autosave,
.settings-section-status,
.information-version,
.broker-status-copy small,
.sidebar-collapse-control,
.support-unread {
    font-size: var(--type-micro);
    line-height: 13px;
}

.metric-value,
.system-control,
.panic-control,
.connection-status,
.chart-toolbar,
.entry-card-heading p,
.quantity-row,
.filter-summary p,
.setting-field,
.segmented-control button,
.exit-panel-heading h3,
.options-chain-table td,
.chain-contract-button,
.ticket-strategy-summary,
.ticket-leg strong,
.ticket-order-fields label > div,
.ticket-costs strong,
.history-table,
.settings-field strong,
.broker-status-copy strong,
.broker-option-copy strong,
.broker-popover-footer strong {
    font-size: var(--type-body);
    line-height: 16px;
}

.metric-value {
    font-size: var(--type-control);
}

.system-control,
.panic-control,
.connection-status {
    height: 34px;
    padding: 0 13px;
}

.information-left,
.metric-group {
    gap: 22px;
}

.chart-toolbar,
.entries-toolbar,
.exit-toolbar,
.chain-window-toolbar,
.history-ledger-header {
    min-height: 50px;
}

.workspace-window,
.chain-window,
.combo-ticket,
.history-ledger,
.settings-workspace,
.information-workspace,
.utility-view > header,
.utility-view > div {
    border-radius: 6px;
}

.entries-section-label,
.history-kicker,
.settings-command-bar > div > span,
.settings-section-heading > div > span,
.settings-card > span,
.information-command-bar > div > span,
.info-section-card > header > div > span,
.utility-view > header span,
.journal-view > header span,
.combo-kicker,
.broker-tier-group h3 {
    font-size: var(--type-micro);
    letter-spacing: .055em;
}

.manual-entry-card h3,
.entry-filter-card h3,
.entry-config-card h3,
.exit-panel-heading h3,
.settings-card h3,
.info-levels-card h3 {
    font-size: var(--type-control);
    line-height: 18px;
}

.entry-card-heading strong,
.quantity-control output,
.call-action,
.put-action,
.sell-action,
.mini-switch,
.review-combo-button,
.history-action-button,
.broker-popover-footer button {
    font-size: var(--type-caption);
}

.filter-summary p,
.setting-field span,
.exit-panel-heading p,
.exit-option-copy span,
.ticket-leg span,
.ticket-costs p,
.history-table th,
.history-badge,
.history-pnl small,
.settings-card p,
.settings-field,
.broker-option-copy small,
.broker-tier-badge,
.broker-current-badge,
.broker-popover-footer span {
    font-size: var(--type-micro);
    line-height: 14px;
}

.option-chain-view {
    grid-template-rows: 62px 54px 58px minmax(0, 1fr);
}

.chain-command-bar h1,
.history-title-block h1,
.settings-command-bar h1,
.information-command-bar h1 {
    font-size: var(--type-heading);
    line-height: 22px;
    font-weight: 620;
}

.chain-command-bar p,
.history-title-block > div > span,
.settings-command-bar p,
.information-command-bar p {
    font-size: var(--type-caption);
    line-height: 15px;
}

.chain-underlying-quote strong,
.history-stats article > strong,
.simulator-balance strong {
    font-size: 18px;
    line-height: 22px;
}

.chain-underlying-quote span,
.chain-session-context,
.expiration-label,
.expiration-tabs b,
.combo-strategy-copy p,
.chain-columns-button,
.chain-density button,
.chain-legend,
.combo-ticket-header span:first-child,
.ticket-strategy-summary strong,
.ticket-costs div {
    font-size: var(--type-caption);
}

.options-chain-table th,
.chain-side-headings th,
.current-price-divider,
.current-price-divider span b,
.options-chain-table tr.is-atm .strike-cell::after {
    font-size: var(--type-micro);
}

.option-chain-view[data-density="comfortable"] .options-chain-table td,
.option-chain-view[data-density="comfortable"] .chain-contract-button {
    font-size: var(--type-control);
}

.history-table th,
.history-table td {
    padding-left: 10px;
    padding-right: 10px;
}

.history-stats article > span,
.history-filter select,
.resource-action b,
.resource-action small,
.resource-links button,
.community-links a,
.community-links b,
.community-links span,
.faq-search input,
.faq-list summary,
.faq-list summary > span,
.faq-list p,
.faq-empty,
.info-data-card p,
.info-levels-card p,
.info-levels-card li span,
.simulator-balance div span,
.ticker-chip-row span {
    font-size: var(--type-caption);
    line-height: 15px;
}

.information-view {
    grid-template-rows: 64px 62px minmax(0, 1fr);
}

.settings-view {
    grid-template-rows: 64px 62px minmax(0, 1fr);
}

.settings-tabs b,
.information-tabs b {
    font-size: var(--type-body);
}

.settings-tabs small,
.information-tabs small {
    font-size: var(--type-micro);
}

.info-section-card > header h2,
.settings-section-heading h2,
.utility-view > div h2,
.journal-view > div h2 {
    font-size: var(--type-heading);
    line-height: 22px;
}

.info-section-card > header > p,
.info-data-card strong,
.info-levels-card li b,
.resource-action b {
    font-size: var(--type-body);
    line-height: 16px;
}

.info-data-card {
    min-height: 92px;
    padding: 13px 14px;
}

.faq-list summary {
    min-height: 44px;
}

.resource-action,
.resource-links button,
.community-links a {
    min-height: 44px;
}

.broker-popover {
    width: min(760px, calc(100vw - 96px));
}

.broker-popover-header h2,
.events-popover-header h2,
.user-popover-header h2 {
    font-size: var(--type-title);
}

.broker-popover-header p,
.broker-delay-note p,
.user-profile-summary p,
.user-information-list dt,
.user-demo-note,
.events-empty-state p {
    font-size: var(--type-caption);
    line-height: 15px;
}

.broker-option {
    min-height: 48px;
    padding: 8px 10px;
}

.broker-status-button {
    min-height: 46px;
}

.trading-shell.is-sidebar-collapsed {
    grid-template-columns: 58px minmax(0,1fr);
}

/* Settings personalization beta */
:root {
    --vylmoon-accent: #895cf6;
    --vylmoon-accent-soft: rgba(137, 92, 246, .13);
    --vylmoon-accent-line: rgba(169, 136, 255, .32);
}

:root[data-font-scale="compact"] {
    --type-micro: 10px;
    --type-caption: 11px;
    --type-body: 12px;
    --type-control: 12px;
    --type-title: 14px;
    --type-heading: 17px;
}

:root[data-font-scale="large"] {
    --type-micro: 12px;
    --type-caption: 13px;
    --type-body: 14px;
    --type-control: 14px;
    --type-title: 16px;
    --type-heading: 20px;
}

:root[data-system-theme="moon"] body {
    background:
        radial-gradient(142% 92% at 52% -8%, rgba(220, 221, 235, .62) 0%, rgba(118, 103, 196, .38) 26%, rgba(43, 42, 52, .24) 55%, rgba(8, 8, 10, .12) 82%, rgba(0, 0, 0, 0) 100%),
        #000;
}

:root[data-system-theme="aurora"] body {
    background:
        radial-gradient(150% 96% at 45% -12%, rgba(216, 232, 224, .55) 0%, rgba(31, 168, 98, .32) 25%, rgba(31, 39, 34, .24) 56%, rgba(6, 10, 8, .14) 82%, rgba(0, 0, 0, 0) 100%),
        #000;
}

:root[data-system-theme="eclipse"] body {
    background:
        radial-gradient(155% 100% at 55% -10%, rgba(204, 220, 255, .52) 0%, rgba(73, 112, 197, .34) 24%, rgba(28, 34, 48, .25) 55%, rgba(4, 6, 12, .16) 82%, rgba(0, 0, 0, 0) 100%),
        #000;
}

:root[data-button-accent="green"] {
    --vylmoon-accent: #00c805;
    --vylmoon-accent-soft: rgba(0, 200, 5, .13);
    --vylmoon-accent-line: rgba(92, 235, 128, .32);
}

:root[data-button-accent="blue"] {
    --vylmoon-accent: #4f91ff;
    --vylmoon-accent-soft: rgba(79, 145, 255, .14);
    --vylmoon-accent-line: rgba(125, 174, 255, .34);
}

:root[data-button-accent="gold"] {
    --vylmoon-accent: #d9ae45;
    --vylmoon-accent-soft: rgba(217, 174, 69, .14);
    --vylmoon-accent-line: rgba(244, 197, 87, .34);
}

.settings-tabs {
    grid-template-columns: repeat(8,minmax(0,1fr));
}

.settings-tab-icon.customization {
    color: #dfd7ff;
    background: var(--vylmoon-accent-soft);
}

.settings-tab-icon.customization::before {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    box-shadow: inset 4px -2px 0 -1px currentColor;
}

.settings-tabs button.is-active,
.information-tabs button.is-active,
.customization-choice-grid button.is-selected,
.customization-theme-grid button.is-selected,
.customization-accent-row button.is-selected {
    background: var(--vylmoon-accent-soft);
    box-shadow: inset 0 0 0 1px var(--vylmoon-accent-line);
}

.review-combo-button,
.broker-popover-footer button,
.customization-preview-window button,
.resource-action > i {
    background: var(--vylmoon-accent);
}

.review-combo-button,
.broker-popover-footer button,
.customization-preview-window button {
    color: #fff;
}

.settings-section-heading > div > span,
.settings-command-bar > div > span,
.information-command-bar > div > span,
.info-section-card > header > div > span,
.combo-kicker {
    color: var(--vylmoon-accent);
}

.settings-customization-layout {
    max-width: 1060px;
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(320px,.72fr);
    gap: 8px;
}

.customization-card.wide {
    grid-column: 1 / -1;
}

.customization-choice-grid,
.customization-theme-grid,
.customization-accent-row {
    display: grid;
    gap: 6px;
    margin-top: 12px;
}

.customization-choice-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
}

.customization-theme-grid {
    grid-template-columns: repeat(4,minmax(0,1fr));
}

.customization-choice-grid button,
.customization-theme-grid button,
.customization-accent-row button {
    min-width: 0;
    border: 0;
    border-radius: 5px;
    color: #d7d7db;
    background: rgba(0,0,0,.18);
    outline: 1px solid rgba(255,255,255,.045);
    cursor: pointer;
    transition: background 130ms ease, outline-color 130ms ease, transform 90ms ease, color 130ms ease;
}

.customization-choice-grid button:hover,
.customization-theme-grid button:hover,
.customization-accent-row button:hover {
    color: #fff;
    background: rgba(255,255,255,.055);
    outline-color: rgba(255,255,255,.12);
}

.customization-choice-grid button:active,
.customization-theme-grid button:active,
.customization-accent-row button:active {
    transform: scale(.985);
}

.customization-choice-grid button {
    min-height: 68px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    padding: 0 13px;
}

.customization-choice-grid b,
.customization-theme-grid b,
.customization-accent-row span {
    font-size: var(--type-body);
    font-weight: 620;
}

.customization-choice-grid small,
.customization-theme-grid small {
    color: #888890;
    font-size: var(--type-micro);
}

.customization-theme-grid button {
    min-height: 116px;
    display: grid;
    grid-template-rows: 54px auto auto;
    align-content: center;
    gap: 6px;
    padding: 10px;
    text-align: left;
}

.theme-swatch {
    width: 100%;
    height: 52px;
    display: block;
    border-radius: 5px;
    outline: 1px solid rgba(255,255,255,.08);
    box-shadow: inset 0 1px rgba(255,255,255,.12);
}

.theme-swatch.legend { background: radial-gradient(120% 90% at 50% 0%, #a4a5af, #3d3d44 42%, #101011 100%); }
.theme-swatch.moon { background: radial-gradient(120% 90% at 50% 0%, #e6e7f0, #765fc7 43%, #111016 100%); }
.theme-swatch.aurora { background: radial-gradient(120% 90% at 50% 0%, #d7eee2, #00a85d 43%, #07100b 100%); }
.theme-swatch.eclipse { background: radial-gradient(120% 90% at 50% 0%, #d4e0ff, #426fca 43%, #060914 100%); }

.customization-accent-row {
    grid-template-columns: repeat(2,minmax(0,1fr));
}

.customization-accent-row button {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 10px;
}

.customization-accent-row i {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--accent-swatch, var(--vylmoon-accent));
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent-swatch, var(--vylmoon-accent)) 42%, transparent);
}

.customization-accent-row [data-custom-accent="violet"] { --accent-swatch: #895cf6; }
.customization-accent-row [data-custom-accent="green"] { --accent-swatch: #00c805; }
.customization-accent-row [data-custom-accent="blue"] { --accent-swatch: #4f91ff; }
.customization-accent-row [data-custom-accent="gold"] { --accent-swatch: #d9ae45; }

.customization-preview-card {
    display: flex;
    flex-direction: column;
}

.customization-preview-window {
    min-height: 134px;
    display: grid;
    grid-template-rows: 44px minmax(0,1fr);
    margin-top: auto;
    overflow: hidden;
    border-radius: 6px;
    background: linear-gradient(145deg,rgba(42,42,45,.78),rgba(20,20,22,.72));
    outline: 1px solid rgba(255,255,255,.06);
    -webkit-backdrop-filter: blur(22px) saturate(120%);
    backdrop-filter: blur(22px) saturate(120%);
}

.customization-preview-window header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 12px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.customization-preview-window header strong {
    font-size: var(--type-title);
}

.customization-preview-window header span {
    color: #00c805;
    font-size: var(--type-micro);
    font-weight: 700;
}

.customization-preview-window div {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 6px;
    padding: 12px;
}

.customization-preview-window button {
    height: 38px;
    border: 0;
    border-radius: 5px;
    font-size: var(--type-micro);
    font-weight: 720;
    cursor: pointer;
}

.public-shell-active {
    min-width: 0;
    overflow: auto;
    background: radial-gradient(circle at 20% 0%, rgba(0, 212, 255, 0.12), transparent 32%),
        radial-gradient(circle at 80% 10%, rgba(122, 92, 255, 0.14), transparent 34%),
        #070a0f;
}

.public-page {
    min-height: 100vh;
    color: #f6f8fb;
    background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent 28%), #070a0f;
}

.public-nav {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px clamp(18px, 4vw, 54px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: rgba(7, 10, 15, 0.82);
    backdrop-filter: blur(18px);
}

.public-nav button,
.public-brand,
.public-link-button {
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.public-nav > div,
.public-brand,
.public-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.public-brand {
    font-weight: 800;
    letter-spacing: 0.04em;
}

.public-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: conic-gradient(from 210deg, #48d8ff, #7a5cff, #111827, #48d8ff);
    box-shadow: 0 0 26px rgba(72, 216, 255, 0.35);
}

.public-nav-primary,
.public-primary,
.public-secondary {
    min-height: 42px;
    border-radius: 6px;
    padding: 0 16px;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.public-nav-primary,
.public-primary {
    color: #061017;
    background: #4bdcff;
}

.public-secondary {
    color: #eaf7ff;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.06);
}

.public-hero,
.public-auth-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
    align-items: center;
    gap: clamp(28px, 6vw, 86px);
    width: min(1180px, calc(100% - 40px));
    min-height: calc(100vh - 79px);
    margin: 0 auto;
    padding: 54px 0;
}

.public-hero-copy h1,
.public-auth-copy h1,
.public-legal h1 {
    margin: 12px 0 18px;
    font-size: clamp(52px, 8vw, 104px);
    line-height: 0.9;
    letter-spacing: 0;
}

.public-hero-copy p,
.public-auth-copy p,
.public-legal p {
    max-width: 650px;
    color: rgba(238, 244, 255, 0.72);
    font-size: clamp(17px, 2vw, 22px);
    line-height: 1.55;
}

.public-kicker {
    color: #4bdcff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.public-terminal-preview,
.public-auth-card,
.public-legal {
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    background: rgba(15, 22, 32, 0.72);
    box-shadow: 0 24px 80px rgba(0,0,0,0.32);
}

.public-terminal-preview,
.public-auth-card {
    padding: 24px;
}

.public-terminal-preview header {
    display: flex;
    gap: 7px;
    margin-bottom: 18px;
}

.public-terminal-preview header span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.22);
}

.public-preview-grid,
.public-feature-band {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.public-preview-grid article {
    min-height: 82px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
}

.public-preview-grid span {
    display: block;
    color: rgba(238,244,255,0.48);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.public-preview-grid strong {
    display: block;
    margin-top: 10px;
    font-size: 23px;
}

.public-green {
    color: #54e3a2;
}

.public-preview-line {
    height: 180px;
    margin-top: 14px;
    border: 1px solid rgba(75,220,255,0.14);
    border-radius: 6px;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 34px),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 34px);
}

.public-preview-status {
    margin-top: 12px;
    color: #54e3a2;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.public-feature-band {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(1180px, calc(100% - 40px));
    margin: -36px auto 60px;
}

.public-feature-band article {
    padding: 20px;
    border-top: 1px solid rgba(75,220,255,0.28);
    background: rgba(255,255,255,0.035);
}

.public-feature-band strong,
.public-feature-band span {
    display: block;
}

.public-feature-band span,
.public-auth-copy li {
    margin-top: 8px;
    color: rgba(238,244,255,0.62);
}

.public-auth-copy ul {
    display: grid;
    gap: 10px;
    margin-top: 24px;
    padding: 0;
    list-style: none;
}

.public-auth-copy code {
    color: #4bdcff;
}

.public-auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 18px;
}

.public-auth-tabs button {
    min-height: 40px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: rgba(238,244,255,0.7);
    background: rgba(255,255,255,0.04);
    font-weight: 800;
}

.public-auth-tabs .is-active {
    color: #071018;
    background: #4bdcff;
}

.public-form {
    display: grid;
    gap: 14px;
}

.public-form label {
    display: grid;
    gap: 7px;
    color: rgba(238,244,255,0.72);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.public-form input {
    width: 100%;
    min-height: 48px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    padding: 0 13px;
    color: #fff;
    background: rgba(0,0,0,0.28);
    outline: none;
}

.public-form input:focus {
    border-color: rgba(75,220,255,0.65);
    box-shadow: 0 0 0 3px rgba(75,220,255,0.1);
}

.public-form button:disabled {
    opacity: 0.55;
    cursor: wait;
}

.public-link-button {
    width: fit-content;
    color: #8bdfff;
    font-weight: 800;
}

.public-form-message {
    min-height: 20px;
    margin: 14px 0 0;
    color: rgba(238,244,255,0.64);
    font-size: 13px;
}

.public-form-message[data-tone="error"] { color: #ff7a8d; }
.public-form-message[data-tone="success"] { color: #54e3a2; }
.public-form-message[data-tone="warning"] { color: #ffd166; }

.public-legal {
    width: min(900px, calc(100% - 40px));
    margin: 80px auto;
    padding: clamp(26px, 6vw, 60px);
}

.logout-button {
    width: calc(100% - 32px);
    min-height: 42px;
    margin: 14px 16px 16px;
    border: 1px solid rgba(255, 93, 113, 0.4);
    border-radius: 6px;
    color: #ff8f9f;
    background: rgba(255, 93, 113, 0.09);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
}

.logout-button:hover {
    border-color: rgba(255, 93, 113, 0.72);
    background: rgba(255, 93, 113, 0.15);
}

@media (max-width: 880px) {
    .public-hero,
    .public-auth-layout,
    .public-feature-band {
        grid-template-columns: 1fr;
    }

    .public-feature-band {
        margin-top: 0;
    }
}

.terminal-popover {
    position: fixed;
    z-index: 100;
    top: 44px;
    left: 212px;
    width: min(720px, calc(100vw - 236px));
    height: min(580px, calc(100vh - 56px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 12px;
    color: rgb(245,245,245);
    background: linear-gradient(145deg,rgba(17,24,36,.94),rgba(9,13,22,.92));
    -webkit-backdrop-filter: blur(30px) saturate(130%);
    backdrop-filter: blur(30px) saturate(130%);
    box-shadow: 0 28px 90px rgba(0,0,0,.62), inset 0 1px rgba(255,255,255,.08), inset 0 -1px rgba(255,255,255,.025);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-5px) scale(.99);
    transform-origin: 44% top;
    transition: opacity 100ms var(--legend-ease), transform 100ms var(--legend-ease), visibility 0s linear 100ms;
}

body:not(.has-terminal-access) .terminal-button,
body:not(.has-terminal-access) #terminal-popover,
body:not(.has-terminal-access) .terminal-popover,
body:not(.has-terminal-access) .terminal-output-panel {
    display: none !important;
}

.terminal-popover.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

.terminal-popover-header {
    height: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 12px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(30,40,58,.4);
}

.terminal-popover-header > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.terminal-popover-header h2 {
    margin: 0;
    font-size: 13px;
    font-weight: 650;
    line-height: 18px;
}

.terminal-header-glyph,
.terminal-button-glyph {
    width: 14px;
    height: 12px;
    border: 1.5px solid currentColor;
    border-radius: 3px;
}

.terminal-status {
    padding: 3px 6px;
    border-radius: 8px;
    color: rgb(151,190,255);
    background: rgba(115,168,255,.09);
    font-size: 8px;
    font-weight: 680;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.terminal-filter-bar {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.terminal-filter-bar input {
    height: 24px;
    min-width: 0;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 5px;
    color: rgb(235,240,250);
    background: rgba(5,9,16,.7);
    font-size: 10px;
    color-scheme: dark;
}

.terminal-filter-bar input[type="date"] {
    width: 126px;
}

.terminal-filter-bar input[type="time"] {
    width: 86px;
}

.terminal-popover .terminal-log-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
}

.terminal-popover .terminal-copy-button {
    margin-left: auto;
}

.events-list-panel {
    flex: 1 1 auto;
    max-height: none;
    border-bottom: 0;
}

@media (max-width: 760px) {
    .terminal-popover {
        left: 8px;
        right: 8px;
        top: 64px;
        width: auto;
        height: min(620px, calc(100vh - 76px));
    }

    .terminal-filter-bar {
        flex-wrap: wrap;
    }
}