:root {
    --ui-frame-radius: 12px;
    --ui-frame-bg: linear-gradient(160deg, rgba(18, 30, 34, 0.95) 0%, rgba(12, 19, 23, 0.96) 100%);
    --ui-frame-border: rgba(95, 163, 133, 0.38);
    --ui-frame-border-bottom: rgba(64, 112, 92, 0.74);
    --ui-frame-shadow:
        inset 0 0 0 1px rgba(76, 184, 142, 0.08),
        0 16px 28px rgba(0, 0, 0, 0.32),
        0 0 18px rgba(63, 180, 126, 0.08);
    --ui-frame-overlay: linear-gradient(180deg,
            rgba(255, 255, 255, 0.018) 0%,
            rgba(255, 255, 255, 0) 100%);
    --ui-frame-groove-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(130, 225, 180, 0.04);
    --ui-btn-bg-default: linear-gradient(180deg, rgba(22, 42, 40, 0.96) 0%, rgba(14, 27, 31, 0.98) 100%);
    --ui-btn-glow-color: rgba(82, 192, 148, 0.18);
    --ui-btn-shadow-base:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 -1px 2px rgba(0, 0, 0, 0.18),
        0 10px 18px rgba(0, 0, 0, 0.2);
    --ui-btn-shadow-hover:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        inset 0 -1px 2px rgba(0, 0, 0, 0.14),
        0 12px 22px rgba(0, 0, 0, 0.24);
    --ui-btn-shadow-active:
        inset 0 1px 1px rgba(255, 255, 255, 0.05),
        inset 0 2px 2px rgba(0, 0, 0, 0.34),
        0 1px 1px rgba(0, 0, 0, 0.14);
    /* Global button-badge system:
       0 = disabled (default), 1 = enabled.
       Local button classes set only the color. */
    --ui-btn-badges-enabled: 0;
    --ui-btn-badge-thickness: 3px;
    --ui-btn-badge-news-color: #79f0b8;
    --ui-btn-badge-reddit-color: #5bf0a7;
    --ui-btn-badge-ai-color: #7cf2bd;
    --ui-btn-badge-warrants-color: #ffd978;
    --ui-btn-badge-ib-color: #a4cdb7;
    --ui-status-positive: #4ad08a;
    --ui-status-positive-soft: #8de3b8;
    --ui-status-positive-rgb: 74, 208, 138;
    --ui-status-negative: #f44336;
    --ui-status-negative-soft: #e57373;
    --ui-status-negative-rgb: 244, 67, 54;
    --ui-status-watch: #FFC107;
    --ui-status-watch-soft: #ffd54f;
    --ui-status-watch-rgb: 255, 193, 7;
    --ui-status-neutral: #78909c;
    --ui-status-neutral-soft: #b0bec5;
}

.ui-frame {
    position: relative;
    background: var(--ui-frame-bg);
    border-radius: var(--ui-frame-radius);
    border: 1px solid var(--ui-frame-border);
    border-bottom-color: var(--ui-frame-border-bottom);
    box-shadow: var(--ui-frame-shadow);
    isolation: isolate;
}

.ui-frame::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: var(--ui-frame-radius);
    background: var(--ui-frame-overlay);
    pointer-events: none;
    z-index: 0;
}

.ui-frame::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: var(--ui-frame-radius);
    box-shadow: var(--ui-frame-groove-shadow);
    pointer-events: none;
    z-index: 0;
}

.ui-frame>* {
    position: relative;
    z-index: 1;
}

.ui-frame-clip {
    padding: 3px;
    overflow: hidden;
}

.ui-frame.ui-frame-clip>table,
.ui-frame.ui-frame-clip table.scan-results-table,
.ui-frame.ui-frame-clip table.mobile-stack-table {
    margin-top: 0;
    border-radius: calc(var(--ui-frame-radius) - 1px);
    box-shadow: none;
}

.ui-btn {
    --ui-btn-bg: var(--ui-btn-bg-default);
    --ui-btn-glow: var(--ui-btn-glow-color);
    --ui-btn-badge-size: 0px;
    --ui-btn-badge-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    isolation: isolate;
    min-height: 34px;
    padding: 8px 16px;
    box-sizing: border-box;
    color: #e1f4e8;
    text-decoration: none;
    font-size: 1rem;
    font-family: inherit;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--ui-frame-radius);
    border: 1px solid var(--ui-frame-border);
    border-bottom-color: var(--ui-frame-border-bottom);
    background:
        linear-gradient(90deg,
            var(--ui-btn-badge-color) 0,
            var(--ui-btn-badge-color) var(--ui-btn-badge-size),
            transparent var(--ui-btn-badge-size),
            transparent 100%),
        var(--ui-btn-bg);
    box-shadow: var(--ui-btn-shadow-base), 0 0 0 rgba(0, 0, 0, 0);
    transition: border-color 0.2s, filter 0.2s, box-shadow 0.2s;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ui-btn svg {
    flex-shrink: 0;
}

.ui-btn:hover,
.ui-btn:focus-visible {
    border-color: rgba(124, 233, 180, 0.52);
    filter: brightness(1.05);
    box-shadow:
        var(--ui-btn-shadow-hover),
        0 0 6px var(--ui-btn-glow),
        0 0 1px rgba(255, 255, 255, 0.08);
    outline: none;
}

.ui-btn:focus {
    outline: none;
}

.ui-btn:active {
    filter: brightness(0.98);
    box-shadow:
        var(--ui-btn-shadow-active),
        0 0 3px var(--ui-btn-glow);
}

.ui-btn--sm {
    min-height: 34px;
    padding: 0 12px;
    font-size: 14px;
}

.ui-btn--equal {
    width: 132px;
    max-width: 100%;
    flex-shrink: 1;
    min-width: 0;
}

.ui-input--btn {
    min-height: 34px;
    padding: 8px 12px;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid var(--ui-frame-border);
    border-bottom-color: var(--ui-frame-border-bottom);
    background: var(--ui-btn-bg-default);
    color: #e1f4e8;
    font-size: 1rem;
    box-shadow: var(--ui-btn-shadow-base), 0 0 0 rgba(0, 0, 0, 0);
    transition: border-color 0.2s, filter 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

.ui-input--btn:hover,
.ui-input--btn:focus {
    outline: none;
    border-color: rgba(124, 233, 180, 0.48);
    filter: brightness(1.05);
    box-shadow:
        var(--ui-btn-shadow-hover),
        0 0 6px rgba(82, 192, 148, 0.18),
        0 0 1px rgba(255, 255, 255, 0.08);
}

.ui-input--btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: none;
    box-shadow: var(--ui-btn-shadow-base), 0 0 0 rgba(0, 0, 0, 0);
}

.ui-btn--green {
    --ui-btn-bg: linear-gradient(180deg, #57d694 0%, #37bd77 58%, #2c9b62 100%);
    --ui-btn-glow: rgba(114, 255, 184, 0.28);
    color: #07110d;
    border-color: rgba(124, 233, 180, 0.52);
    border-bottom-color: rgba(42, 126, 82, 0.9);
    text-shadow: none;
}

.ui-btn--green:hover,
.ui-btn--green:focus-visible {
    border-color: rgba(124, 233, 180, 0.72);
    filter: brightness(1.06);
}

.ui-btn--red {
    --ui-btn-bg: linear-gradient(180deg, #d45a5a 0%, #b84848 58%, #a33d3d 100%);
    --ui-btn-glow: rgba(212, 90, 90, 0.17);
    color: #ffffff;
    border-color: #c45555;
    border-bottom-color: #7a2e2e;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.ui-btn--red:hover,
.ui-btn--red:focus-visible {
    border-color: #d46666;
    filter: brightness(1.05);
}

.ui-btn--disabled,
.ui-btn.ui-btn--disabled,
.ui-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.ui-btn--disabled:hover,
.ui-btn--disabled:focus,
.ui-btn--disabled:active,
.ui-btn:disabled:hover,
.ui-btn:disabled:focus,
.ui-btn:disabled:active {
    transform: none;
    filter: none;
    box-shadow: var(--ui-btn-shadow-base), 0 0 0 rgba(0, 0, 0, 0);
}

/* Badge helpers (global enable + local color) */
.ui-btn--badge {
    --ui-btn-badge-size: calc(var(--ui-btn-badges-enabled) * var(--ui-btn-badge-thickness));
}

.ui-btn--badge-news {
    --ui-btn-badge-color: var(--ui-btn-badge-news-color);
}

.ui-btn--badge-reddit {
    --ui-btn-badge-color: var(--ui-btn-badge-reddit-color);
}

.ui-btn--badge-ai {
    --ui-btn-badge-color: var(--ui-btn-badge-ai-color);
}

.ui-btn--badge-warrants {
    --ui-btn-badge-color: var(--ui-btn-badge-warrants-color);
}

.ui-btn--badge-ib {
    --ui-btn-badge-color: var(--ui-btn-badge-ib-color);
}