/* =========================================
   assets/style.css
   投資分析系統 - 自訂樣式與響應式微調
========================================= */

/* 1. 全域平滑捲動與自訂捲軸 (提升 Desktop 質感) */
html {
    scroll-behavior: smooth;
}

/* 針對 Webkit 瀏覽器 (Chrome, Safari, Edge) 的自訂捲軸 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #0f172a; /* Tailwind slate-900 */
}
::-webkit-scrollbar-thumb {
    background: #334155; /* Tailwind slate-700 */
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #475569; /* Tailwind slate-600 */
}

/* 2. 玻璃擬態 (Glassmorphism) 效果 */
.glass-panel {
    background: rgba(30, 41, 59, 0.7); /* slate-800 帶透明 */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* 3. 卡片懸停動畫 */
.hover-card-scale {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s;
}
.hover-card-scale:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

/* 4. 隱藏預設的數字輸入框上下箭頭 */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}
input[type=number] {
    -moz-appearance: textfield;
}

/* 5. 針對電腦版 (螢幕寬度大於 1024px) 的特殊修正 */
@media (min-width: 1024px) {
    /* 讓左側的總資產卡片在捲動右側持倉時，固定在畫面上方 */
    .desktop-sticky {
        position: sticky;
        top: 5rem; /* 預留給頂部導航列的空間 */
    }
}