/* --- V3 UX ANIMATIONS --- */
:root {
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --transition-fast: 150ms var(--ease-out-expo);
    --transition-standard: 300ms var(--ease-out-expo);
}

/* Base Interactions */
.ui-btn {
    transition: transform var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast), filter var(--transition-fast);
}
.ui-btn:hover:not(:disabled) {
    transform: translateY(-1px) scale(1.02);
}
.ui-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
}

.ui-input, select {
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast) !important;
}
.ui-input:focus, select:focus {
    transform: translateX(2px);
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary-transparent);
}

/* Modal Dynamics */
.ui-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.ui-modal-content {
    background: var(--color-surface-glass-heavy);
    border: 1px solid var(--color-border-glass-bright);
    border-radius: var(--radius-xl);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: modal-in var(--transition-standard);
}

/* Entrance Animations */
@keyframes modal-in {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.animate-fade { animation: fade-in var(--transition-standard); }
.animate-shake { animation: shake 200ms ease-in-out 2; }

/* Scroll Locking */
body.modal-open {
    overflow: hidden;
}

/* --- Base Component Styles --- */

/* Glass Card */
.ui-card {
    background: var(--color-surface-glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--color-border-glass);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-glass);
    overflow: hidden;
    transition: var(--transition-base);
}

.ui-card-hover:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-border-glass-bright);
    transform: translateY(-2px);
}

/* Standard Button */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-black);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-md);
    transition: var(--transition-base);
    cursor: pointer;
    font-size: var(--text-xs);
    gap: var(--space-2);
}

.ui-btn-primary {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 4px 15px -5px var(--color-primary);
}

.ui-btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 8px 25px -5px var(--color-primary);
}

.ui-btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border-glass);
    color: var(--color-gray-300);
}

.ui-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-border-glass-bright);
    color: #fff;
}

.ui-btn-success {
    background: var(--color-success);
    color: #fff;
    box-shadow: 0 4px 15px -5px var(--color-success);
}

.ui-btn-success:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 8px 25px -5px var(--color-success);
}

.ui-btn-danger {
    background: var(--color-danger);
    color: #fff;
    box-shadow: 0 4px 15px -5px var(--color-danger);
}

.ui-btn-danger:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 8px 25px -5px var(--color-danger);
}

.ui-btn-glass {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border-glass);
    color: #fff;
}

.ui-btn-glass:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-border-glass-bright);
}

/* --- Unified KPI Tile V3 --- */
.kpi-tile-v3 {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    background: var(--color-surface-glass);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--color-border-glass);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-2xl);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    text-align: left;
}

.kpi-tile-v3:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
}

/* Theme Variants */
.kpi-tile-v3.theme-emerald { border-left: 3px solid var(--color-success); }
.kpi-tile-v3.theme-indigo { border-left: 3px solid var(--color-primary); }
.kpi-tile-v3.theme-orange { border-left: 3px solid var(--color-btc); }
.kpi-tile-v3.theme-violet { border-left: 3px solid var(--color-gmt); }
.kpi-tile-v3.theme-cyan { border-left: 3px solid var(--color-accent); }
.kpi-tile-v3.theme-red { border-left: 3px solid #ef4444; }

/* Icon Badge */
.kpi-badge {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: var(--space-1);
    transition: all 0.3s ease;
}

.kpi-badge:has(img),
.kpi-badge:has(.svg-icon-masked) {
    background: transparent !important;
    box-shadow: none !important;
}

.svg-icon-masked {
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.theme-emerald .kpi-badge { background: rgba(16, 185, 129, 0.15); color: #4ade80; }
.theme-indigo .kpi-badge { background: rgba(129, 140, 248, 0.15); color: #818cf8; }
.theme-orange .kpi-badge { background: rgba(247, 147, 26, 0.15); color: #fbbf24; }
.theme-violet .kpi-badge { background: rgba(139, 92, 246, 0.15); color: #a78bfa; }
.theme-cyan .kpi-badge { background: rgba(6, 182, 212, 0.15); color: #22d3ee; }
.theme-red .kpi-badge { background: rgba(239, 68, 68, 0.15); color: #f87171; }

.kpi-tile-v3:hover .kpi-badge {
    transform: scale(1.1) rotate(5deg);
}

/* --- Unified KPI Bar (The Pill) --- */
.ui-kpi-bar {
    display: flex;
    flex-direction: column;
    background: var(--color-surface-glass-heavy);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--color-border-glass);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-glass);
}

@media (min-width: 768px) {
    .ui-kpi-bar {
        flex-direction: row;
    }
}

/* --- Bar Segment Divider Logic --- */
.ui-kpi-bar > .kpi-tile-v3 {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    padding: var(--space-5) !important;
    position: relative;
    flex: 1;
}

/* Horizontal Dividers (Mobile) */
.ui-kpi-bar > .kpi-tile-v3:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Vertical Dividers (Desktop) */
@media (min-width: 768px) {
    .ui-kpi-bar > .kpi-tile-v3:not(:last-child) {
        border-bottom: none !important;
        border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
    }
}

/* Segment Hover Effect */
.ui-kpi-bar > .kpi-tile-v3:hover {
    background: rgba(255, 255, 255, 0.02) !important;
    transform: none !important;
}

/* --- Value Updates Visual Pulse --- */
@keyframes value-change-pulse {
    0% { opacity: 0.35; transform: scale(0.985); }
    100% { opacity: 1; transform: scale(1); }
}
.value-update-pulse {
    animation: value-change-pulse 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ─── SHARED POLISHED UI SYSTEM ─── */
.premium-glass {
    background: var(--color-surface-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-border-glass);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-glass);
}

.hero-strip {
    padding: var(--space-8) 0 var(--space-12);
}

.kpi-bar {
    background: var(--color-surface-glass-heavy);
    border: 1px solid var(--color-border-glass);
    border-radius: var(--radius-xl);
    padding: var(--space-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.5);
}

.section-header-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 100px;
    color: var(--color-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-black);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-6);
}

.net-profit-display {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.4) 0%, var(--color-gray-900) 100%);
    border-radius: var(--radius-2xl);
    padding: var(--space-8);
    border: 1px solid var(--color-border-glass);
    position: relative;
    overflow: hidden;
}

.net-profit-display::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
    opacity: 0.3;
}

.stat-tile-mini {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid var(--color-border-glass);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    transition: all 0.3s ease;
}

.stat-tile-mini:hover {
    background: rgba(30, 41, 59, 0.6);
    border-color: var(--color-border-glass-bright);
}

.input-group-premium {
    background: var(--color-surface-glass-heavy);
    border: 1px solid var(--color-border-glass);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    transition: all 0.3s ease;
}

.input-group-premium:focus-within {
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.1);
}

.custom-select-wrapper::after {
    content: '\F282';
    font-family: "bootstrap-icons";
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gray-500);
    pointer-events: none;
    font-size: var(--text-xs);
}

.modal-overlay { transition: opacity 0.4s ease; }
.modal-container { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; }