.glass-panel {
    background: var(--component-glass-panel-bg, var(--color-surface-panel));
    backdrop-filter: blur(var(--component-glass-panel-blur, var(--glass-panel-blur)))
        saturate(var(--component-glass-panel-saturate, 100%));
    -webkit-backdrop-filter: blur(var(--component-glass-panel-blur, var(--glass-panel-blur)))
        saturate(var(--component-glass-panel-saturate, 100%));
    border-top: var(--component-glass-panel-border-top, 0);
    border-bottom: 1px solid
        var(--component-glass-panel-border-bottom, var(--color-border-subtle));
    box-shadow: var(--component-glass-panel-shadow, none);
}

.glass-card {
    background: var(--component-glass-card-bg, var(--color-surface-card));
    backdrop-filter: blur(var(--component-glass-card-blur, var(--glass-card-blur)));
    -webkit-backdrop-filter: blur(var(--component-glass-card-blur, var(--glass-card-blur)));
    border: 1px solid
        var(--component-glass-card-border, var(--color-border-strong));
    box-shadow: var(--component-glass-card-shadow, var(--shadow-glass-card));
    transition: var(
        --component-glass-card-transition,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease
    );
}

.glass-card:hover {
    background: var(
        --component-glass-card-hover-bg,
        var(--component-glass-card-bg, var(--color-surface-card))
    );
    border-color: var(
        --component-glass-card-hover-border,
        var(--glass-card-hover-border)
    );
    box-shadow: var(
        --component-glass-card-hover-shadow,
        var(--shadow-glass-card-hover)
    );
    transform: translateY(var(--component-glass-card-hover-translate, -1px));
}

.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 1;
    border: 1px solid
        var(--component-status-chip-border, var(--status-chip-border));
    background: var(--component-status-chip-bg, var(--status-chip-bg));
    color: var(--component-status-chip-color, var(--status-chip-text));
}

.status-chip::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}

.status-chip--live {
    --component-status-chip-bg: var(--status-live-bg);
    --component-status-chip-border: var(--status-live-border);
    --component-status-chip-color: var(--status-live-text);
}

.status-chip--demo {
    --component-status-chip-bg: var(--status-demo-bg);
    --component-status-chip-border: var(--status-demo-border);
    --component-status-chip-color: var(--status-demo-text);
}

.status-chip--trial {
    --component-status-chip-bg: var(--status-trial-bg);
    --component-status-chip-border: var(--status-trial-border);
    --component-status-chip-color: var(--status-trial-text);
}

.status-chip--warn {
    --component-status-chip-bg: var(--status-warn-bg);
    --component-status-chip-border: var(--status-warn-border);
    --component-status-chip-color: var(--status-warn-text);
}

.status-chip--neutral {
    --component-status-chip-bg: var(--status-neutral-bg);
    --component-status-chip-border: var(--status-neutral-border);
    --component-status-chip-color: var(--status-neutral-text);
}

.status-chip--active {
    --component-status-chip-bg: var(--component-status-active-bg, var(--status-live-bg));
    --component-status-chip-border: var(
        --component-status-active-border,
        var(--status-live-border)
    );
    --component-status-chip-color: var(
        --component-status-active-text,
        var(--status-live-text)
    );
}

.status-chip--inactive {
    --component-status-chip-bg: var(
        --component-status-inactive-bg,
        var(--status-neutral-bg)
    );
    --component-status-chip-border: var(
        --component-status-inactive-border,
        var(--status-neutral-border)
    );
    --component-status-chip-color: var(
        --component-status-inactive-text,
        var(--status-neutral-text)
    );
}

.btn-base {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s;
    padding: var(--component-btn-padding, 0.625rem 1.5rem);
    min-height: 44px;
}

/* Public/marketing surfaces use pill (fully-rounded) buttons. Scoped to the
   marketing shell so the authenticated app keeps its --radius-lg buttons. */
.app-shell--marketing .btn-base {
    border-radius: var(--radius-full);
}

.btn-primary {
    background: var(--color-accent-strong);
    color: var(--color-inverse);
}

.btn-primary:hover:not(:disabled) {
    background: var(--color-accent);
    transform: translateY(-1px);
    box-shadow: var(--shadow-accent-button);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.settings-input {
    background: var(--color-surface-input);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-md);
    padding: 11px 14px;
    color: var(--color-text-strong);
    transition: all 0.2s ease;
    font-size: 1rem;
    min-height: 44px;
}

.settings-input:focus {
    border-color: var(--color-accent);
    background: var(--color-surface-input-focus);
    outline: none;
    box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.15);
}

.settings-input::placeholder {
    color: var(--color-text-placeholder);
}

.focus-ring:focus-visible {
    outline: var(--focus-ring-outline);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--focus-ring-radius);
}