/* TunerStack v1 product identity — canonical tokens and auth chrome. */
:root {
    --ts-brand-black: #050505;
    --ts-brand-white: #F2F2F2;
    --ts-brand-cyan: #48D9D8;
    --ts-brand-carbon: #111315;
    --ts-brand-graphite: #1A1D20;
    --ts-brand-steel: #2A2F33;
    --ts-brand-slate: #687078;
    --ts-brand-silver: #AEB5BA;
    --ts-brand-soft-white: #FAFAFA;
    --ts-brand-mist: #E4E8EA;
    --ts-brand-cyan-dark: #20AAA9;
    --ts-brand-cyan-light: #85EEEE;
    --ts-brand-cyan-surface: #163636;
    --ts-brand-success: #3DDC97;
    --ts-brand-warning: #F6B73C;
    --ts-brand-danger: #F04455;
    --ts-brand-info: #4C8DFF;
}

.ts-brand-asset {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.ts-tunerstack-auth-card {
    position: relative;
    overflow: hidden;
    border-color: rgb(72 217 216 / 0.28) !important;
    background:
        radial-gradient(circle at 50% -8%, rgb(72 217 216 / 0.12), transparent 34%),
        linear-gradient(145deg, rgb(5 5 5 / 0.99), rgb(17 19 21 / 0.98)) !important;
    box-shadow:
        0 32px 80px -30px rgb(5 5 5 / 0.94),
        0 0 0 1px rgb(242 242 242 / 0.06) inset !important;
}

.ts-tunerstack-auth-card::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    background-image:
        linear-gradient(rgb(72 217 216 / 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgb(72 217 216 / 0.035) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(to bottom, black, transparent 58%);
}

.ts-tunerstack-auth-card > * {
    position: relative;
    z-index: 1;
}

.ts-tunerstack-auth-card .fi-logo {
    display: none !important;
}

.ts-tunerstack-brand {
    width: min(100%, 18.5rem);
    margin: -0.1rem auto 1.25rem;
}

.ts-auth-mobile-brand .ts-brand-asset {
    width: min(100%, 15rem);
}

.ts-tunerstack-auth-card .fi-link {
    color: var(--ts-brand-cyan) !important;
}

.ts-tunerstack-auth-card .fi-link:hover {
    color: #8BE8E7 !important;
}

.ts-tunerstack-auth-card .fi-input:focus,
.ts-tunerstack-auth-card input:focus {
    border-color: var(--ts-brand-cyan) !important;
    box-shadow: 0 0 0 3px rgb(72 217 216 / 0.24) !important;
}

.ts-tunerstack-auth-card .fi-checkbox-input:checked {
    border-color: var(--ts-brand-cyan) !important;
    background-color: var(--ts-brand-cyan) !important;
}

.ts-tunerstack-auth-card .fi-btn-primary,
.ts-tunerstack-auth-card .fi-btn.fi-color-primary,
.ts-tunerstack-auth-card button[type="submit"] {
    border-color: var(--ts-brand-cyan) !important;
    background: var(--ts-brand-cyan) !important;
    box-shadow: 0 8px 24px -12px rgb(72 217 216 / 0.72) !important;
    color: var(--ts-brand-black) !important;
}

.ts-tunerstack-auth-card .fi-btn-primary:hover,
.ts-tunerstack-auth-card .fi-btn.fi-color-primary:hover,
.ts-tunerstack-auth-card button[type="submit"]:hover {
    background: #20AAA9 !important;
}

.fi-panel-admin .fi-sidebar-header .fi-logo,
.fi-panel-app .fi-sidebar-header .fi-logo {
    padding-inline: 0.35rem;
}

@media (max-width: 420px) {
    .ts-tunerstack-brand {
        width: min(100%, 15.5rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ts-tunerstack-brand,
    .ts-tunerstack-brand * {
        transition: none !important;
        animation: none !important;
    }
}

/* The blank/default theme owns the brand cyan scale; named themes keep their own palettes. */
html:not([data-theme]) body.fi-panel-admin,
html:not([data-theme]) .fi-panel-admin,
html:not([data-theme]) body.fi-panel-app,
html:not([data-theme]) .fi-panel-app {
    --c-bg-body: #050505;
    --c-bg-sidebar: #050505;
    --c-bg-header: #F2F2F2;
    --c-bg-main: #F2F2F2;
    --c-bg-card: #FAFAFA;
    --c-bg-input: #FAFAFA;
    --c-border: #DDE1E3;
    --c-border-input: #DDE1E3;
    --c-active-item: #F2F2F2;
    --c-scrollbar-thumb: #AEB5BA;
    --c-scrollbar-thumb-hover: #687078;
    --c-text-primary: #050505;
    --c-text-muted: #687078;
    --c-text-inverse: #F2F2F2;
    --c-sidebar-fg: #F2F2F2;
    --c-sidebar-fg-muted: color-mix(in srgb, #F2F2F2 85%, transparent);
    --c-sidebar-fg-on-panel: #050505;
    --primary-50: #EFFFFF;
    --primary-100: #D2FAF9;
    --primary-200: #A9EFEE;
    --primary-300: #85EEEE;
    --primary-400: #48D9D8;
    --primary-500: #48D9D8;
    --primary-600: #48D9D8;
    --primary-700: #20AAA9;
    --primary-800: #163636;
    --primary-900: #163636;
    --primary-950: #050505;
    --c-theme-accent: #48D9D8;
    --c-theme-accent-fg: #126A6A;
    --c-theme-accent-soft: rgb(72 217 216 / 0.12);
    --c-theme-accent-border: rgb(72 217 216 / 0.38);
    --c-input-focus-border: #48D9D8;
    --c-input-focus-ring: rgb(72 217 216 / 0.25);
    --c-selection-bg: #48D9D8;
    --c-selection-fg: #050505;
    --c-sidebar-dot-active: #48D9D8;
    --c-on-primary: #050505;
    --ts-shell-accent: #48D9D8;
    --ts-shell-accent-soft: rgb(72 217 216 / 0.12);
}

html:not([data-theme]).dark body.fi-panel-admin,
html:not([data-theme]).dark .fi-panel-admin,
html:not([data-theme]).dark body.fi-panel-app,
html:not([data-theme]).dark .fi-panel-app {
    --c-bg-body: #050505;
    --c-bg-sidebar: #050505;
    --c-bg-header: #111315;
    --c-bg-main: #111315;
    --c-bg-card: #1A1D20;
    --c-bg-input: #111315;
    --c-border: #2A2F33;
    --c-border-input: #2A2F33;
    --c-active-item: #111315;
    --c-scrollbar-thumb: #687078;
    --c-scrollbar-thumb-hover: #AEB5BA;
    --c-text-primary: #F2F2F2;
    --c-text-muted: #AEB5BA;
    --c-text-inverse: #050505;
    --c-sidebar-fg: #F2F2F2;
    --c-sidebar-fg-muted: color-mix(in srgb, #F2F2F2 85%, transparent);
    --c-sidebar-fg-on-panel: #F2F2F2;
    --c-theme-accent-fg: #85EEEE;
}

.fi-panel-admin .fi-btn.fi-color-primary {
    color: var(--c-on-primary, #ffffff) !important;
}

.fi-panel-admin .ts-command-deck__button--primary,
.fi-panel-admin .fi-btn.fi-color-primary,
.fi-panel-app .ts-command-deck__button--primary,
.fi-panel-app .fi-btn.fi-color-primary {
    color: var(--c-on-primary, #ffffff) !important;
}