/*static\css\kline.css*/

/* 整個左側主畫面維持黑色背景 */
    #main {
        position: absolute;   /* ⬅ 讓 ECharts 貼滿 left-pane */
        overflow: hidden !important;   /*避免任何 ECharts 的 axisLabel 滿出邊界 (!important不准被覆蓋)*/
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        padding: 0;

        width: 100%;
        height: 100%; 
        background: #000;        /* 🔥 強制黑色底色 */
        box-sizing: border-box;
    }

    /* Overlay 只會放在 RSI 區，不覆蓋整個 main */
    #rsi-overlay {
        position: absolute;
        left: 0;
        width: 100%;
        pointer-events: none;    /* 點擊穿透 */
        z-index: 999;      
    }

    /* --- 修改：個別 Lv 標籤樣式 --- */
    #rsi-overlay div {
        position: absolute;  /* 絕對定位 */
        right: 10px;          /* 靠右顯示於 Y 軸區域 */
        font-size: 20px;    
        font-weight: bold;
        text-shadow: 1px 1px 2px black; /* 增加文字描邊，避免背景干擾 */
        transform: translateY(-50%); /* 垂直置中修正 */
        padding: 2px 4px;
        background: rgba(0, 0, 0, 0.5); /* 增加半透明黑底，避免被線條干擾 */
        border-radius: 3px;
        font-family: Arial, sans-serif;
    }

    /* 各 Lv 顏色 (與你的設定一致) */
    #rsi-overlay .lv1 { color: #f73440; } /* Over HH */
    #rsi-overlay .lv2 { color: #f7c602; } /* HH - Mid */
    #rsi-overlay .lv3 { color: #9e43b0; } /* Mid - LL */
    #rsi-overlay .lv4 { color: #7ff4fa; } /* Below LL */

    /* --- 新增：ECharts 內建浮水印樣式 --- */
    #chart-watermark {
        position: absolute;
        top: 25%;              /* 垂直置中 */
        left: 50%;             /* 水平置中 */
        transform: translate(-50%, -50%);  /* 置中修正 */
        opacity: 0.08;       /* 透明度：0.0 ~ 1.0 */
        pointer-events: none;   /* 滑鼠穿透，不影響 ECharts */
        z-index: 1;         /* 不要蓋住 tooltip，但蓋在 K 線上方 */
        font-size: 6.5rem;    /* 字體大小 */
        color: #ffffff;     /* 白色浮水印 */
        font-weight: bold;
        user-select: none;  /* 不能選取文字 */
        /* ★ 新增：讓兩行水平置中 */
        text-align: center;
        line-height: 1.1; /* 可選，更好看 */
    }

/* --- 側邊欄美化樣式 --- */

/* 1. 今日狀態卡片 */
.status-card-container {
    background: linear-gradient(145deg, #1a1a1a, #0d0d0d); /* 微漸層背景 */
    padding: 5px;
    border-radius: 8px;
    border: 1px solid #333;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    text-align: center;
}

.status-header {
    font-size: 13px;
    color: #888;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.status-main {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.status-sub {
    font-size: 14px;
    font-family: 'Courier New', Courier, monospace; /* 數字用等寬字體比較好看 */
    font-weight: bold;
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255,255,255,0.05);
}

/* 2. RSI 訊號列表項目 */
.signal-item {
    background: #111;
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 6px;
    border: 1px solid #222;
    transition: transform 0.2s, background 0.2s;
    position: relative;
    overflow: hidden;
}

.signal-item:hover {
    background: #1a1a1a;
    transform: translateX(5px); /* 滑鼠移過去微微右移 */
}

/* 左側彩色線條 (由 JS inline style 控制顏色) */
.signal-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.signal-row-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.signal-title {
    font-weight: bold;
    font-size: 14px;
}

.signal-val {
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 14px;
}

.signal-row-bottom {
    display: flex;
    justify-content: flex-end; /* 日期靠右 */
    font-size: 11px;
    color: #666;
}

/* =========================================
   📱 手機版專用調整 (Max-Width: 768px)
   ========================================= */
@media screen and (max-width: 768px) {
    
 

    /* 2. 調整浮水印大小 */
    #chart-watermark {
        font-size: 3rem;  /* 手機版縮小，避免擋住畫面 */
        top: 30%;
    }
}