:root {
    --cs2-bg: #0b1220;
    --cs2-panel: #111827;
    --cs2-panel-2: #0f172a;
    --cs2-card: rgba(255, 255, 255, 0.04);
    --cs2-card-border: rgba(255, 255, 255, 0.08);
    --cs2-text: #e5e7eb;
    --cs2-muted: #94a3b8;
    --cs2-green: #22c55e;
    --cs2-red: #ef4444;
    --cs2-blue: #60a5fa;
    --cs2-shadow: 0 18px 45px rgba(2, 6, 23, 0.35);
    --cs2-radius: 18px;

    --provider-steam-accent: #2563eb;
    --provider-steam-soft: rgba(37, 99, 235, 0.14);
    --provider-steam-border: rgba(37, 99, 235, 0.22);
    --provider-steam-text: #dbeafe;

    --provider-csfloat-accent: #7c83fd;
    --provider-csfloat-soft: rgba(249, 124, 253, 0.14);
    --provider-csfloat-border: rgba(124, 131, 253, 0.22);
    --provider-csfloat-text: #e1e4ff;

    --profit-positive: #22c55e;
    --profit-positive-soft: rgba(34, 197, 94, 0.12);
    --profit-positive-border: rgba(34, 197, 94, 0.22);

    --profit-negative: #ef4444;
    --profit-negative-soft: rgba(239, 68, 68, 0.12);
    --profit-negative-border: rgba(239, 68, 68, 0.22);

    --muted-text: #94a3b8;
    --panel-border: rgba(255, 255, 255, 0.08);
    --panel-border-soft: rgba(255, 255, 255, 0.06);
    --panel-bg-soft: rgba(255, 255, 255, 0.04);
}

.provider-badge {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    overflow: hidden;
    flex-shrink: 0;
}

.provider-badge--sm {
    width: 30px;
    height: 30px;
}

.provider-badge--steam {
    background: var(--provider-steam-soft);
    border: 1px solid var(--provider-steam-border);
}

.provider-badge--csfloat {
    background: var(--provider-csfloat-soft);
    border: 1px solid var(--provider-csfloat-border);
}

.provider-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
}

.provider-logo--sm {
    width: 16px;
    height: 16px;
}

.provider-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.provider-pill--steam {
    background: var(--provider-steam-soft);
    border: 1px solid var(--provider-steam-border);
    color: var(--provider-steam-text);
}

.provider-pill--csfloat {
    background: var(--provider-csfloat-soft);
    border: 1px solid var(--provider-csfloat-border);
    color: var(--provider-csfloat-text);
}

.provider-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
}

.provider-dot--steam {
    background: #60a5fa;
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.16);
}

.provider-dot--csfloat {
    background: #7c83fd;
    box-shadow: 0 0 0 4px rgba(124, 131, 253, 0.16);
}

.provider-card--steam {
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.18);
}

.provider-card--csfloat {
    background: var(--provider-csfloat-soft);
    border: 1px solid var(--provider-csfloat-border);
}

.skin-chart-shell,
.skin-fluctuation-card,
.skin-chart-panel,
.skin-quick-alert-panel {
    background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
    border-radius: 18px;
    padding: 18px;
    border: 1px solid var(--panel-border);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.skin-chart-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.skin-chart-subtitle,
.skin-provider-heading__subtitle,
.skin-quick-alert-panel__subtitle,
.skin-fluctuation-bucket__percent,
.skin-form-label,
.skin-chart-empty {
    color: var(--muted-text);
}

.skin-chart-subtitle {
    font-size: 13px;
    margin-top: 4px;
}

.skin-chart-header,
.skin-fluctuation-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.skin-chart-range-switch,
.skin-provider-pills,
.skin-fluctuation-grid,
.skin-fluctuation-buckets,
.skin-chart-alert-grid,
.skin-quick-alert-form {
    display: grid;
    gap: 14px;
}

.skin-provider-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.skin-chart-range-switch {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.skin-range-pill {
    padding: 8px 12px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: #cbd5e1;
}

.skin-range-pill:hover{
    background: rgba(37, 100, 235, 0.324);
    color: #fff;
}

.skin-range-pill.is-active {
    background: #2563eb;
    color: #fff;
    border-color: rgba(37, 99, 235, 0.3);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}

.skin-chart-panel > .skin-chart-shell {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.skin-chart-canvas-wrap {
    position: relative;
    min-height: 340px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid var(--panel-border-soft);
    border-radius: 16px;
    padding: 14px;
    overflow: visible;
}

.chartjs-external-tooltip {
    position: absolute;
    transform: translate(-50%, calc(-100% - 118px));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.14s ease, transform 0.14s ease;
    z-index: 30;
    min-width: 300px;
    max-width: 420px;
}

.chartjs-external-tooltip.is-visible {
    opacity: 1;
}

.chartjs-external-tooltip--compact {
    min-width: 300px;
    max-width: 360px;
}

.chartjs-tooltip-shell {
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(15, 23, 42, 0.94) 100%);
    box-shadow: 0 20px 40px rgba(2, 6, 23, 0.42);
    backdrop-filter: blur(12px);
    padding: 14px;
}

.chartjs-tooltip-title {
    color: #f8fafc;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 10px;
    letter-spacing: 0.01em;
}

.chartjs-tooltip-columns {
    display: grid;
    gap: 10px;
}

.chartjs-tooltip-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 10px 12px;
}

.chartjs-tooltip-card__header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #f8fafc;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 10px;
}

.chartjs-tooltip-card__dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex: 0 0 auto;
}

.chartjs-tooltip-card__badge {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: #cbd5e1;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
}

.chartjs-tooltip-card__grid {
    display: flex;
    gap: 8px;
}

.chartjs-tooltip-stat {
    display: grid;
    gap: 2px;
}

.chartjs-tooltip-stat__label {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.chartjs-tooltip-stat__value {
    color: #f8fafc;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
}

.chartjs-tooltip-stat__sub {
    color: #cbd5e1;
    font-size: 12px;
    line-height: 1.2;
}

.skin-chart-empty {
    margin-top: 4px;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--panel-border-soft);
    border-radius: 12px;
    padding: 12px 14px;
}

.skin-fluctuation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.skin-fluctuation-buckets {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.skin-fluctuation-bucket {
    background: var(--panel-bg-soft);
    border: 1px solid var(--panel-border-soft);
    border-radius: 14px;
    padding: 14px;
}

.skin-fluctuation-bucket__label {
    font-size: 12px;
    color: var(--muted-text);
    font-weight: 700;
}

.skin-fluctuation-bucket__prices {
    font-size: 16px;
    color: #cbd5e1;
    margin-top: 8px;
    line-height: 1.4;
    font-weight: 700;
}

.skin-fluctuation-bucket__delta {
    font-size: 15px;
    font-weight: 800;
    margin-top: 8px;
}

.skin-fluctuation-bucket__percent {
    font-size: 12px;
    margin-top: 4px;
}

.skin-chart-alert-grid {
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    gap: 16px;
}

.skin-provider-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.skin-provider-heading__title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.skin-quick-alert-panel__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.skin-quick-alert-panel__icon {
    min-width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.14);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.22);
    font-weight: 800;
    font-size: 14px;
}

.skin-quick-alert-panel__title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.skin-quick-alert-form {
    gap: 14px;
}

.skin-form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
}

.skin-primary-button {
    width: 100%;
    background: #2563eb;
    color: #fff;
    border: 0;
    padding: 11px 14px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24);
}

@media (max-width: 1100px) {
    .skin-fluctuation-grid,
    .skin-chart-alert-grid {
        grid-template-columns: 1fr;
    }

    .skin-fluctuation-buckets {
        grid-template-columns: 1fr;
    }
}

.skin-hero-card {
    background: linear-gradient(135deg, #0f172a 0%, #111827 100%);
    border-radius: 18px;
    padding: 26px;
    color: white;
    margin-top: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}

.skin-hero-topbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.skin-hero-sync {
    font-size: 12px;
    color: #94a3b8;
}

.skin-hero-sync strong {
    color: #e5e7eb;
}

.skin-hero-grid {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 24px;
    align-items: start;
}

.skin-hero-left,
.skin-hero-right {
    display: grid;
    gap: 16px;
}

.skin-hero-collection {
    font-size: 13px;
    color: #93c5fd;
    margin-bottom: 6px;
}

.skin-hero-title {
    margin: 0 0 6px 0;
    font-size: 28px;
    line-height: 1.2;
    color: #fff;
}

.skin-hero-wear {
    font-size: 16px;
    color: #cbd5e1;
}

.skin-image-card,
.skin-stat-card,
.skin-extrema-card,
.skin-inspect-card {
    background: rgba(255,255,255,0.05);
    border-radius: 16px;
    padding: 18px;
    border: 1px solid rgba(255,255,255,0.06);
}

.skin-image-card {
    padding: 20px;
}

.skin-image-card__img {
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    padding: 15px 0;
}

.skin-image-card__empty {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    background: #0f172a;
    border-radius: 16px;
}

.skin-float-summary {
    margin-top: 16px;
    text-align: center;
}

.skin-float-summary__label {
    font-size: 13px;
    color: #94a3b8;
}

.skin-float-summary__value {
    font-size: 18px;
    font-weight: 800;
    margin-top: 4px;
    color: #fff;
}

.cs2-float-top--bottom {
    margin-top: 6px;
    margin-bottom: 0;
}

.skin-external-links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.skin-external-link {
    display: block;
    text-align: center;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #e5e7eb;
    text-decoration: none;
    font-weight: 600;
}

.skin-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.skin-stat-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.skin-stat-card__label,
.skin-net-value,
.skin-extrema-card__subtitle,
.skin-extrema-provider__subtitle,
.skin-extrema-box__label,
.skin-extrema-box__date,
.skin-inspect-card__label,
.skin-inspect-card__empty {
    color: #94a3b8;
}

.skin-stat-card__label,
.skin-inspect-card__label {
    font-size: 13px;
}

.skin-edit-button {
    background: transparent;
    border: 0;
    color: #93c5fd;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 8px;
    line-height: 1;
    font-size: 15px;
}

.skin-buyprice-read {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.skin-buyprice-value,
.skin-price-value,
.skin-profit-value {
    font-size: 24px;
    font-weight: 800;
    margin-top: 6px;
}

.skin-buyprice-value {
    font-weight: 700;
}

.skin-buyprice-edit {
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.skin-buyprice-input {
    max-width: 160px;
}

.skin-save-button {
    background: #2563eb;
    color: #fff;
    border: 0;
    padding: 8px 12px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

.skin-cancel-button {
    background: rgba(255,255,255,0.08);
    color: #e5e7eb;
    border: 0;
    padding: 8px 12px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

.skin-rarity-value {
    font-size: 22px;
    font-weight: 800;
    margin-top: 6px;
}

.skin-provider-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.provider-badge--sm {
    width: 30px;
    height: 30px;
}

.provider-logo--sm {
    width: 16px;
    height: 16px;
}

.skin-provider-row__label {
    font-size: 13px;
    color: #94a3b8;
}

.skin-net-value {
    margin-top: 6px;
    font-size: 12px;
}

.skin-profit-badge-wrap {
    margin-top: 10px;
}

.skin-profit-value.is-positive {
    color: var(--profit-positive);
}

.skin-profit-value.is-negative {
    color: var(--profit-negative);
}

.skin-profit-value.is-neutral {
    color: var(--muted-text);
}

.skin-profit-badge.is-positive {
    background: var(--profit-positive-soft);
    color: var(--profit-positive);
    border: 1px solid var(--profit-positive-border);
}

.skin-profit-badge.is-negative {
    background: var(--profit-negative-soft);
    color: var(--profit-negative);
    border: 1px solid var(--profit-negative-border);
}

.skin-profit-badge.is-flat,
.skin-profit-badge.is-neutral,
.skin-profit-badge.is-na {
    background: rgba(148, 163, 184, 0.12);
    color: var(--muted-text);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.skin-provider-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.skin-provider-compare-card {
    border-radius: 16px;
    padding: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

.skin-provider-compare-card__header {
    margin-bottom: 16px;
}

.skin-provider-compare-card__title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.skin-provider-compare-card__subtitle,
.skin-provider-compare-stat__label,
.skin-provider-compare-extrema__title {
    font-size: 12px;
    color: var(--muted-text);
}

.skin-provider-compare-card__subtitle {
    margin-top: 2px;
}

.skin-provider-compare-card__body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.skin-provider-compare-stat {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 14px;
    padding: 14px;
}

.skin-provider-compare-extrema {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 14px;
    padding: 14px;
}

.skin-provider-compare-extrema__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 10px;
}

.skin-profit-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.skin-extrema-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.skin-extrema-card__title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.skin-extrema-card__subtitle {
    font-size: 12px;
    margin-top: 2px;
}

.skin-extrema-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.skin-extrema-provider {
    border-radius: 14px;
    padding: 14px;
}

.skin-extrema-provider--steam {
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.18);
}

.skin-extrema-provider--csfloat {
    background: rgba(124, 131, 253, 0.14);
    border: 1px solid rgba(124, 131, 253, 0.22);
}

.skin-extrema-provider__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.skin-extrema-provider__title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.skin-extrema-provider__subtitle {
    font-size: 11px;
}

.skin-extrema-values {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.skin-extrema-box {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 12px;
}

.skin-extrema-box__label {
    font-size: 12px;
}

.skin-extrema-box__value {
    margin-top: 6px;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
}

.skin-extrema-box__date {
    margin-top: 6px;
    font-size: 12px;
}

.skin-inspect-card__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.skin-copy-button {
    padding: 6px 10px;
    border-radius: 10px;
    background: #1f2937;
    border: 1px solid #374151;
    color: #e5e7eb;
    font-size: 12px;
    font-weight: 600;
}

.skin-inspect-card__content {
    font-size: 13px;
    color: #cbd5e1;
    line-height: 1.5;
    word-break: break-all;
    background: rgba(15,23,42,0.6);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 12px;
    max-height: 90px;
    overflow: auto;
}

.skin-inspect-card__empty {
    font-size: 14px;
}

@media (max-width: 1100px) {
    .skin-hero-grid,
    .skin-extrema-grid,
    .skin-provider-compare-grid {
        grid-template-columns: 1fr;
    }

    .skin-info-grid,
    .skin-provider-compare-card__body,
    .skin-provider-compare-extrema__grid {
        grid-template-columns: 1fr;
    }

    .skin-extrema-values {
        grid-template-columns: 1fr;
    }
}

body {
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.08), transparent 32%),
        radial-gradient(circle at top right, rgba(34, 197, 94, 0.06), transparent 26%),
        linear-gradient(180deg, #07101d 0%, #0b1220 100%);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.06), transparent 40%),
        radial-gradient(circle at top right, rgba(34, 197, 94, 0.05), transparent 34%),
        linear-gradient(180deg, #07101d 0%, #09121f 45%, #0b1220 100%);
}

#app,
.wrapper,
.layout,
.page-wrapper,
.container-fluid {
    background: transparent !important;
}

.page-header,
header.bg-white,
.bg-white,
.card,
.navbar,
aside,
.table,
.dropdown-menu,
.modal-content {
    border-color: rgba(255,255,255,0.06) !important;
}

.card,
.bg-white {
    background: linear-gradient(180deg, rgba(17,24,39,0.92) 0%, rgba(15,23,42,0.92) 100%) !important;
    color: var(--cs2-text) !important;
    border-radius: var(--cs2-radius) !important;
    box-shadow: var(--cs2-shadow) !important;
    border: 1px solid var(--cs2-card-border) !important;
}

.card-header,
.card-footer,
.table thead th,
.modal-header,
.modal-footer {
    background: transparent !important;
    color: var(--cs2-text) !important;
    border-color: rgba(255,255,255,0.06) !important;
}

.card-title,
h1, h2, h3, h4, h5, h6,
label,
th,
td,
span,
div,
small,
p,
a {
    color: inherit;
}

.text-muted,
small,
.form-text {
    color: var(--cs2-muted) !important;
}

.table {
    color: var(--cs2-text) !important;
    background: transparent !important;
}

.table td,
.table th {
    border-color: rgba(255,255,255,0.06) !important;
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background: rgba(255,255,255,0.04) !important;
}

.form-control,
input,
select,
textarea {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: #f8fafc !important;
    border-radius: 12px !important;
}


.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15) !important;
    border-color: rgba(96,165,250,0.45) !important;
}

.btn,
.btn-default,
.btn-link,
.btn-light {
    border-radius: 12px !important;
}

.btn-primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    border-color: transparent !important;
}

.btn-default,
.btn-light {
    background: rgba(255,255,255,0.06) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

.navbar,
aside {
    background: rgba(8, 15, 28, 0.9) !important;
    color: var(--cs2-text) !important;
    border-right: 1px solid rgba(255,255,255,0.06) !important;
}

.nav-link,
.navbar a,
aside a {
    color: #cbd5e1 !important;
}

.nav-link.active,
aside .active,
aside a:hover,
.navbar a:hover {
    color: #ffffff !important;
}

.orchid-metric,
.metric,
[data-controller="metric"] {
    background: linear-gradient(180deg, rgba(17,24,39,0.94) 0%, rgba(15,23,42,0.94) 100%) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 16px !important;
    box-shadow: var(--cs2-shadow) !important;
    color: var(--cs2-text) !important;
}

.cs2-page-title {
    color: white;
    font-size: 34px;
    line-height: 1.1;
    font-weight: 800;
    margin: 0;
}

.cs2-page-subtitle {
    color: var(--cs2-muted);
    margin-top: 8px;
    font-size: 14px;
}

.cs2-grid {
    display: grid;
    gap: 18px;
}

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

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

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

.cs2-kpi-card,
.cs2-panel {
    background: linear-gradient(180deg, rgba(17,24,39,0.96) 0%, rgba(15,23,42,0.96) 100%);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
    box-shadow: var(--cs2-shadow);
    color: var(--cs2-text);
}

.cs2-kpi-card {
    padding: 20px;
}

.cs2-kpi-label {
    color: var(--cs2-muted);
    font-size: 13px;
    margin-bottom: 8px;
}

.cs2-kpi-value {
    color: white;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
}

.cs2-positive {
    color: var(--cs2-green) !important;
}

.cs2-negative {
    color: var(--cs2-red) !important;
}

.cs2-panel {
    padding: 22px;
}


.cs2-empty {
    color: var(--cs2-muted);
    text-align: center;
    padding: 26px 12px;
}

.cs2-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    background: rgba(255,255,255,0.06);
    color: #dbeafe;
    border: 1px solid rgba(255,255,255,0.07);
}

.cs2-item-link {
    text-decoration: none;
    color: inherit;
}

.cs2-item-link:hover {
    text-decoration: none;
    color: white;
}

.cs2-skin-thumb {
    width: 84px;
    height: 62px;
    object-fit: contain;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    padding: 6px;
}

.page-header h1,
.page-header .h1,
.page-header .breadcrumb-item,
.page-header .breadcrumb-item a,
.page-header .text-black,
.page-header .text-dark,
.page-header .text-default {
    color: #f8fafc !important;
}

.page-header {
    color: #f8fafc !important;
}

.cs2-panel table,
.cs2-panel .table,
.cs2-panel .table-responsive,
.cs2-panel tbody,
.cs2-panel thead,
.cs2-panel tr,
.cs2-panel td,
.cs2-panel th {
    background: transparent !important;
    color: #e5e7eb !important;
}

.cs2-panel .table thead th {
    color: #94a3b8 !important;
    font-weight: 600;
}

.cs2-panel .table tbody tr {
    background: transparent !important;
}

.cs2-panel .table tbody tr:hover {
    background: rgba(255,255,255,0.04) !important;
}

.cs2-panel .table td,
.cs2-panel .table th {
    border-color: rgba(255,255,255,0.06) !important;
}

.cs2-panel .table a {
    color: inherit !important;
}

.cs2-panel .table a:hover {
    color: #ffffff !important;
}

.cs2-hover-row {
    position: relative;
}

.cs2-hover-preview {
    overflow: visible;
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    width: 440px;
    padding: 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(17,24,39,0.98) 0%, rgba(15,23,42,0.98) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 18px 45px rgba(2, 6, 23, 0.35);
    z-index: 40;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: all 0.18s ease;
    pointer-events: auto;
}

.cs2-hover-row:hover .cs2-hover-preview,
.cs2-hover-preview:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cs2-sortable {
    cursor: pointer;
    user-select: none;
}

.cs2-sortable:hover {
    color: #ffffff !important;
}

.cs2-panel .cs2-positive {
    color: #22c55e !important;
    font-weight: 700;
}

.cs2-panel .cs2-negative {
    color: #ef4444 !important;
    font-weight: 700;
}

.cs2-skin-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #0f172a;
    border-bottom: 3px solid var(--rarity-color, #666);
}

.cs2-skin-card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;

    background: linear-gradient(
        rgba(27, 29, 36, 0) 20%,
        var(--rarity-gradient) 100%
    );
}

.cs2-skin-thumb {
    display: block;
    width: 100%;
    height: auto;
    padding: 15px 0px;
}

.cs2-skin-card:hover {
    transform: translateY(-2px);
    transition: 0.2s ease;
}

.cs2-float-wrap {
    margin-top: 8px;
}

.cs2-float-top {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 6px;
}

.cs2-float-track {
    position: relative;
    width: 100%;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,0.08);
}

.cs2-float-seg {
    position: absolute;
    top: 0;
    height: 100%;
}

.cs2-float-fn { background-color: green; }
.cs2-float-mw { background-color: #18a518; }
.cs2-float-ft { background-color: #9acd32; }
.cs2-float-ww { background-color: #cd5c5c; }
.cs2-float-bs { background-color: #f92424; }

.cs2-float-marker {
    position: absolute;
    top: -2px;
    width: 2px;
    height: 14px;
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
    z-index: 3;
}

.cs2-float-legend {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin-top: 6px;
    font-size: 10px;
    color: #94a3b8;
}

.text-body-emphasis{
    color: white !important;
}

/* ===== BUTTONS ===== */

/* ===== ORCHID LINK BUTTONS / COMMAND BAR ===== */

.btn.btn-link:hover,
.btn.btn-link.icon-link:hover,
.icon-link:hover {
    color: #374151 !important;
    background-color: #ffffff !important;
    border-color: #4b5563 !important;
    text-decoration: none !important;
}

.btn.btn-link,
.btn.btn-link.icon-link,
.icon-link {
    color: #e5e7eb !important;
    background-color: #1f2937 !important;
    border: 1px solid #374151 !important;
    border-radius: 8px;
    text-decoration: none !important;
    padding: 0.5rem 0.85rem;
}


.btn.btn-link:focus,
.btn.btn-link.icon-link:focus,
.icon-link:focus {
    color: #ffffff !important;
    background-color: #374151 !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 1px #2563eb !important;
    text-decoration: none !important;
}

/* icone dentro i bottoni */
.btn.btn-link svg,
.btn.btn-link.icon-link svg,
.icon-link svg,
.btn.btn-link i,
.btn.btn-link.icon-link i,
.icon-link i {
    color: inherit !important;
    fill: currentColor;
}

.command-bar .btn.btn-link,
.command-bar .btn.btn-link.icon-link,
.command-bar .icon-link,
.page-header .btn.btn-link,
.page-header .btn.btn-link.icon-link,
.page-header .icon-link {
    color: #e5e7eb !important;
    background-color: #1f2937 !important;
    border: 1px solid #374151 !important;
    border-radius: 8px;
    padding: 0.5rem 0.85rem;
}

.command-bar .btn.btn-link:hover,
.command-bar .btn.btn-link.icon-link:hover,
.command-bar .icon-link:hover {
    color: #ffffff !important;
    background-color: #1f2937 !important;
    border-color: #2563eb !important;
    text-decoration: none !important;
}

/* ===== INPUT BASE ===== */

input,
textarea,
select {
    background-color: #111827;
    color: #e5e7eb;
    border: 1px solid #374151;
}

/* Placeholder */
input::placeholder,
textarea::placeholder {
    color: #6b7280;
}

/* ===== FOCUS FIX ===== */

input:focus,
textarea:focus,
select:focus {
    background-color: #111827 !important;
    color: #ffffff !important;
    border-color: #2563eb;
    outline: none;
    box-shadow: 0 0 0 1px #2563eb;
}

/* ===== ORCHID INPUT FIX ===== */

.form-control {
    background-color: #111827;
    color: #e5e7eb;
    border: 1px solid #374151;
}

.form-control:focus {
    background-color: #111827 !important;
    color: #ffffff !important;
    border-color: #2563eb;
    box-shadow: 0 0 0 1px #2563eb;
}

/* Select Orchid */
.select2-container--default .select2-selection--single {
    background-color: #111827;
    border: 1px solid #374151;
    color: #e5e7eb;
}

.select2-dropdown {
    background-color: #1f2937;
    color: #e5e7eb;
    border: 1px solid #374151;
}

.select2-results__option {
    background-color: transparent;
}

.select2-results__option--highlighted {
    background-color: #2563eb;
    color: #fff;
}

.cs2-price-cell {
    min-width: 150px;
}

.cs2-buy-cell {
    white-space: nowrap;
    font-weight: 600;
    color: #e5e7eb;
}

.cs2-price-main {
    font-size: 15px;
    font-weight: 700;
    color: #f8fafc;
}

.cs2-price-sub {
    margin-top: 2px;
    font-size: 11px;
    color: #94a3b8;
}

.cs2-profit-line {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
}

.cs2-profit-line.is-positive {
    color: #22c55e;
}

.cs2-profit-line.is-negative {
    color: #ef4444;
}

.cs2-profit-percent {
    opacity: 0.9;
}

.cs2-kpi-sub {
    margin-top: 6px;
    font-size: 12px;
    color: #94a3b8;
}

.cs2-detail-layout {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.cs2-detail-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cs2-detail-main {
    display: grid;
    gap: 16px;
}

.cs2-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.cs2-stat-card {
    background: linear-gradient(135deg, rgba(30,41,59,0.88), rgba(17,24,39,0.92));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
    padding: 18px;
}

.cs2-stat-label {
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 8px;
}

.cs2-stat-value {
    font-size: 18px;
    font-weight: 800;
    color: #f8fafc;
    line-height: 1.2;
}

.cs2-stat-sub {
    margin-top: 6px;
    font-size: 12px;
    color: #94a3b8;
}

.cs2-detail-block {
    background: linear-gradient(135deg, rgba(30,41,59,0.88), rgba(17,24,39,0.92));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
    padding: 18px;
}

.cs2-detail-block-title {
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 10px;
}

.cs2-detail-block-value {
    font-size: 16px;
    font-weight: 700;
    color: #f8fafc;
    line-height: 1.4;
    word-break: break-word;
}

.ts-wrapper,
.ts-wrapper.form-control,
.ts-wrapper.single,
.ts-wrapper.multi {
    background: transparent !important;
}

.ts-wrapper .ts-control {
    background: #0f172a !important;
    color: #e5e7eb !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    min-height: 42px !important;
    box-shadow: none !important;
}

.ts-wrapper.focus .ts-control,
.ts-wrapper.input-active .ts-control,
.ts-wrapper .ts-control:focus-within {
    background: #111827 !important;
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18) !important;
}

.ts-wrapper .ts-control input {
    color: #ffffff !important;
    background: transparent !important;
}

.ts-wrapper .ts-control input::placeholder {
    color: #94a3b8 !important;
}

.ts-wrapper.single .ts-control .item,
.ts-wrapper.multi .ts-control .item {
    color: #e5e7eb !important;
}

.ts-wrapper.multi .ts-control > div {
    background: rgba(96, 165, 250, 0.16) !important;
    color: #dbeafe !important;
    border: 1px solid rgba(96, 165, 250, 0.28) !important;
    border-radius: 8px !important;
}

.ts-dropdown {
    background: #0f172a !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    color: #e5e7eb !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35) !important;
}

.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown [data-selectable] {
    color: #e5e7eb !important;
    background: transparent !important;
}

.ts-dropdown .option.active,
.ts-dropdown .option:hover,
.ts-dropdown [data-selectable].active,
.ts-dropdown [data-selectable]:hover {
    background: rgba(96, 165, 250, 0.16) !important;
    color: #ffffff !important;
}

.ts-dropdown .create {
    color: #93c5fd !important;
    background: transparent !important;
}

.cs2-hover-preview.is-above {
    top: auto !important;
    bottom: calc(100% + 8px) !important;
}

.go-back-arrow{
    transition: transform 0.3s;
    margin-bottom: 3px;
}

.go-back-arrow:hover{
    transform: translateX(-5px);
}
@media (max-width: 1200px) {
    .cs2-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cs2-grid-3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1100px) {
    .cs2-detail-layout {
        grid-template-columns: 1fr;
    }

    .cs2-stat-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .cs2-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Refactor helpers for reusable theming */
:root {
    --steam-primary: #2563eb;
    --steam-secondary: #60a5fa;
    --steam-text: #dbeafe;
    --steam-soft: rgba(37, 99, 235, 0.14);
    --steam-border: rgba(37, 99, 235, 0.22);
    --csfloat-primary: #7c83fd;
    --csfloat-secondary: #f97cfd;
    --csfloat-text: #e1e4ff;
    --csfloat-soft: rgba(124, 131, 253, 0.14);
    --csfloat-border: rgba(124, 131, 253, 0.22);
    --provider-steam-accent: var(--steam-primary);
    --provider-steam-soft: var(--steam-soft);
    --provider-steam-border: var(--steam-border);
    --provider-steam-text: var(--steam-text);
    --provider-csfloat-accent: var(--csfloat-primary);
    --provider-csfloat-soft: var(--csfloat-soft);
    --provider-csfloat-border: var(--csfloat-border);
    --provider-csfloat-text: var(--csfloat-text);
}
.skin-chart-subtitle-strong { color: var(--cs2-text); }
.provider-dot--steam { background: var(--steam-secondary); box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.16); }
.provider-dot--csfloat { background: var(--csfloat-primary); box-shadow: 0 0 0 4px rgba(124, 131, 253, 0.16); }
.skin-alert-chart-layout { display:grid; gap:16px; margin-top:16px; }
.skin-fluctuation-bucket__top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.skin-fluctuation-bucket__badge { font-size:12px; font-weight:800; border-radius:999px; padding:3px 8px; border:1px solid transparent; }
.skin-fluctuation-bucket__badge--steam { color: var(--provider-steam-accent); background: var(--provider-steam-soft); border-color: var(--provider-steam-border); }
.skin-fluctuation-bucket__badge--csfloat { color: var(--provider-csfloat-accent); background: var(--provider-csfloat-soft); border-color: var(--provider-csfloat-border); }
.skin-fluctuation-bucket__meta { margin-top:10px; padding-top:10px; border-top:1px solid var(--panel-border-soft); font-size:12px; line-height:1.5; color:#cbd5e1; }
.skin-fluctuation-bucket__meta.is-empty { color:#64748b; }
.skin-muted-text { color: var(--muted-text); }
.text-profit-positive { color: var(--profit-positive); }
.text-profit-negative { color: var(--profit-negative); }
.skin-hero-header { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:18px; }
.skin-hero-sync-card { background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:10px 12px; min-width:170px; text-align:right; }
.skin-hero-sync-label { font-size:12px; color:var(--muted-text); }
.skin-hero-sync-value { margin-top:4px; font-size:14px; font-weight:700; color:var(--cs2-text); }
.skin-hero-grid--detail { grid-template-columns:330px 1fr; }
.skin-image-meta-grid { margin-top:16px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.skin-image-meta-card { background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); border-radius:14px; padding:12px; text-align:center; }
.skin-image-meta-card__label { font-size:12px; color:var(--muted-text); }
.skin-image-meta-card__value { margin-top:4px; font-size:18px; font-weight:800; }
.skin-image-float-wrap { margin-top:16px; }
.skin-external-link--steam { background: var(--provider-steam-soft); border-color: var(--provider-steam-border); color: var(--provider-steam-text); }
.skin-external-link:hover{ color:#fff; }
.skin-external-link--csfloat { background: var(--provider-csfloat-soft); border-color: var(--provider-csfloat-border); color: var(--provider-csfloat-text); }
.skin-price-value--lg { font-size:26px; margin-top:10px; }
.skin-inspect-status { font-size:12px; color:#cbd5e1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
.skin-inspect-card__label--spaced { margin-bottom:8px; }
@media (max-width: 1100px) { .skin-hero-header { flex-direction:column; } .skin-hero-sync-card { min-width:0; width:100%; text-align:left; } .skin-hero-grid--detail { grid-template-columns:1fr; } }


.skin-alert-list {
    display: grid;
    gap: 14px;
}

.skin-alert-card {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 16px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid var(--panel-border-soft);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, rgba(17, 24, 39, 0.92) 100%);
}

.skin-alert-card__media {
    width: 88px;
    height: 88px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.skin-alert-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.skin-alert-card__placeholder {
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    padding: 8px;
}

.skin-alert-card__top,
.skin-alert-card__actions,
.skin-alert-card__chips,
.skin-alert-edit-grid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.skin-alert-card__top {
    justify-content: space-between;
    align-items: flex-start;
}

.skin-alert-card__title {
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

.skin-alert-card__subtitle,
.skin-alert-card__hint {
    color: var(--muted-text);
    font-size: 13px;
}

.skin-alert-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: #e2e8f0;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
}

.skin-alert-chip.is-triggered { color: #fcd34d; border-color: rgba(245, 158, 11, 0.22); background: rgba(245, 158, 11, 0.12); }
.skin-alert-chip.is-active { color: #86efac; border-color: rgba(34, 197, 94, 0.22); background: rgba(34, 197, 94, 0.12); }
.skin-alert-chip.is-inactive { color: #cbd5e1; }

.skin-alert-edit-form {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.skin-alert-edit-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.skin-alert-edit-grid .form-control,
.skin-alert-edit-grid .form-select {
    min-height: 42px;
}

.skin-alert-card__actions form { margin: 0; }

@media (max-width: 900px) {
    .skin-alert-card { grid-template-columns: 1fr; }
    .skin-alert-card__media { width: 72px; height: 72px; }
    .skin-alert-edit-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .skin-alert-edit-grid { grid-template-columns: 1fr; }
}