/* ... (保留原本的 :root 到 .ios-arrow-down 的所有設定) ... */
:root {
    /* =========================================================
       1. 預設介面顏色 (淺色模式 Light Mode)
       修改這裡可以改變「白天」模式下的外觀
       ========================================================= */
    --bg-color: #EFEEEA;       /* 整個網頁的背景顏色 */
    --panel-bg: #ffffff;       /* 排盤區塊、卡片的背景顏色 */
    --text-color: #333333;     /* 主要文字顏色 (深灰/黑) */
    --text-secondary: #666666; /* 次要文字顏色 (淺灰，用於說明文字) */
    --border: #e0e0e0;         /* 線條、邊框的顏色 */
    --accent: #fe7743;         /* 主要按鈕、強調功能的顏色 */
    --highlight: #fdece3;      /* 選中項目、滑鼠懸停時的背景底色 */
    --active-border: #fe7743;  /* 點擊選中時的邊框顏色*/
    --input-bg: #ffffff;       /* 輸入框 (Input/Select) 的背景色 */
    --rail-bg: #f1f1f1;        /* 運勢軌道 (下方滑動條) 的背景色 */
    --pillar-bg: #ffffff;      /* 八字柱子的背景色 */
    --pillar-header: #f0f0f0;  /* 八字柱子頂部標題 (年柱、月柱...) 背景色 */
    --pillar-footer: #fafafa;  /* 八字柱子底部 (神煞區) 背景色 */
    --modal-bg: #ffffff;       /* 彈出視窗的背景色 */
    --shadow-color: rgba(0,0,0,0.05); /* 陰影顏色 (半透明黑) */
    
    /* =========================================================
       2. 五行顏色設定 (淺色模式)
       影響：天干地支文字顏色 (甲乙丙丁...)
       ========================================================= */
    /* 木 (甲、乙、寅、卯) - 綠色系 */
    --color-wood: #2e7d32;
    
    /* 火 (丙、丁、巳、午) - 紅色系 */
    --color-fire: #d32f2f;
    
    /* 土 (戊、己、辰、戌、丑、未) - 啡/黃色系 */
    --color-earth: #795548;
    
    /* 金 (庚、辛、申、酉) - 金/灰色系 */
    --color-metal: #d1a906;
    
    /* 水 (壬、癸、亥、子) - 藍/黑色系 */
    --color-water: #1565c0;
    
    /* =========================================================
       3. 十神與其他顏色 (淺色模式)
       ========================================================= */
    --color-shishen: #666;      /* 十神文字顏色 (如：正官、七殺) */
    --color-daymaster: #000;    /* 日主 (日元) 的文字顏色 (通常最深色) */
    --rail-shishen: #888;       /* 運勢軌道上的十神小字顏色 */
}

/* =========================================================
   4. 暗黑模式變數覆寫 (Dark Mode)
   修改這裡可以改變「黑夜」模式下的外觀
   ========================================================= */
[data-theme="dark"] {
    --bg-color: #121212;       /* [暗黑] 網頁背景 */
    --panel-bg: #1e1e1e;       /* [暗黑] 卡片背景 */
    --text-color: #e0e0e0;     /* [暗黑] 主要文字 (淺白) */
    --text-secondary: #aaaaaa; /* [暗黑] 次要文字 (灰白) */
    --border: #333333;         /* [暗黑] 邊框顏色 */
    --accent: #fe7743;         /* [暗黑] 按鈕顏色 */
    --highlight: #50392c;      /* [暗黑] 高亮背景 */
    --active-border: #fe7743;  /* [暗黑] 選中邊框 */
    --input-bg: #2d2d2d;       /* [暗黑] 輸入框背景 */
    --rail-bg: #2d2d2d;        /* [暗黑] 軌道背景 */
    --pillar-bg: #252525;      /* [暗黑] 柱子背景 */
    --pillar-header: #333333;  /* [暗黑] 柱子標題背景 */
    --pillar-footer: #2a2a2a;  /* [暗黑] 柱子底部背景 */
    --modal-bg: #1e1e1e;       /* [暗黑] 彈窗背景 */
    --shadow-color: rgba(0,0,0,0.5); /* [暗黑] 陰影 (較深) */

    /* =========================================================
       5. 五行顏色設定 (暗黑模式 - 建議使用較明亮的顏色以利閱讀)
       ========================================================= */
    /* 木 - 淺綠 */
    --color-wood: #81c784;
    
    /* 火 - 淺紅 */
    --color-fire: #e57373;
    
    /* 土 - 淺啡/卡其 */
    --color-earth: #a1887f;
    
    /* 金 - 淺金/黃 */
    --color-metal: #fff176;
    
    /* 水 - 淺藍 */
    --color-water: #64b5f6;
    
    /* =========================================================
       6. 十神顏色 (暗黑模式)
       ========================================================= */
    --color-shishen: #999;      /* [暗黑] 十神文字 */
    --color-daymaster: #ffffff; /* [暗黑] 日主文字 (純白) */
    --rail-shishen: #aaa;       /* [暗黑] 軌道十神 */
}

body {
    font-family: "Microsoft JhengHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    padding: 15px;
    font-size: 15px; 
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.app-container {
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-header {
    text-align: center;
    color: var(--text-color);
    margin-bottom: 15px;
    letter-spacing: 1px;
    position: relative;
}
.app-header h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 900;
}

.theme-toggle-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-color);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s;
}
.theme-toggle-btn:hover {
    background-color: var(--highlight);
    transform: rotate(15deg);
}

.auth-box {
    background-color: var(--panel-bg);
    padding: 15px 20px;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px var(--shadow-color);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}
.auth-hint { font-size: 14px; color: var(--text-secondary); font-weight: 500; text-align: left; flex: 1; }

.control-wrapper {
    background: var(--panel-bg);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px var(--shadow-color);
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    transition: all 0.3s ease;
}
.control-wrapper.collapsed { display: none; }

.toggle-row {
    display: flex;
    width: 100%;
    background: var(--border); 
    border-radius: 0 0 12px 12px;
    border: 1px solid var(--border);
    border-top: none;
    margin-bottom: 15px;
    overflow: hidden;
}

.toggle-col {
    flex: 1; 
    text-align: center;
    padding: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: bold;
    user-select: none;
    transition: background-color 0.2s;
    background-color: var(--panel-bg); 
}

.toggle-col:hover {
    background-color: var(--border);
}

.toggle-col.left {
    border-right: 1px solid var(--border);
}

.tools-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end; 
    gap: 10px;
    padding: 10px;
    background: var(--rail-bg);
    border-radius: 8px;
    margin-bottom: 15px; 
    border: 1px solid var(--border);
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.tool-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: bold;
}

.tool-btn {
    background-color: var(--panel-bg);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s;
    box-shadow: 0 1px 3px var(--shadow-color);
    white-space: nowrap;
}

.tool-btn:hover {
    background-color: var(--highlight);
    border-color: var(--active-border);
    color: var(--active-border);
}

.tool-btn:active {
    transform: translateY(1px);
}

.tabs { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 15px; }
.tab { padding: 8px 10px; cursor: pointer; font-weight: bold; color: var(--text-secondary); border-bottom: 2px solid transparent; margin-bottom: -2px; flex: 1; text-align: center; }
.tab.active { color: var(--active-border); border-color: var(--active-border); }

.input-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 15px; }
.input-row > * { flex: 1; min-width: 80px; }
.input-row span { flex: 0 0 auto; min-width: auto; font-size: 14px; color: var(--text-secondary); }
input, select { padding: 8px; background: var(--input-bg); border: 1px solid var(--border); color: var(--text-color); border-radius: 6px; outline: none; font-size: 14px; width: 100%; box-sizing: border-box; }

button.action-btn { padding: 10px; background: var(--accent); color: white; font-weight: bold; cursor: pointer; border: none; border-radius: 24px; font-size: 16px; width: 100%; transition: background-color 0.2s; }
button.action-btn:hover { filter: brightness(1.1); }
button.map-btn { padding: 8px; background: #273F4F; color: white; border: none; border-radius: 18px; cursor: pointer; font-size: 13px; width: 100%; }
#mapContainer { height: 250px; width: 100%; border-radius: 8px; border: 1px solid var(--border); margin-top: 10px; display: none; }
.tst-section { background: var(--rail-bg); padding: 10px; border-radius: 6px; border: 1px dashed var(--border); display: flex; flex-direction: column; gap: 10px; width: 100%; box-sizing: border-box; }
.tst-bottom-row { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding-top: 5px; border-top: 1px dashed var(--border); width: 100%; flex-wrap: nowrap; }
.note { font-size: 12px; color: var(--text-secondary); margin-top: 5px; }

.info-dashboard {
    display: none;
    grid-template-columns: 3.5fr 6.5fr; 
    gap: 10px;
    background: var(--panel-bg);
    border: 1px solid var(--border); 
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 5px;
    box-shadow: 0 2px 5px var(--shadow-color);
    font-size: 13px;
}
.info-col { display: flex; flex-direction: column; gap: 5px; }
.info-col.left { border-right: 1px dashed var(--border); padding-right: 5px; }
.info-item { display: flex; flex-direction: row; align-items: baseline; gap: 4px; }
.info-label { font-weight: bold; color: var(--text-secondary); font-size: 13px; white-space: nowrap; }
.info-val { font-weight: 600; color: var(--text-color); word-break: break-word; }

.main-display {
    display: flex;
    flex-direction: row; 
    flex-wrap: nowrap;   
    gap: 4px; 
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border);
    align-items: stretch;
    justify-content: space-between; 
}

.group-container {
    display: flex;
    gap: 3px; 
    background: var(--panel-bg);
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 5px var(--shadow-color);
    border: 1px solid var(--border);
    height: auto;
    flex: 4.7; 
    justify-content: space-around; 
}

.group-container.dynamic-group { 
    border: 1px solid var(--border); 
    background: var(--panel-bg);
    flex: 4.3; 
}

.group-label {
    display: flex;
    flex-direction: row; 
    align-items: center;
    justify-content: flex-start;
    padding-top: 88px; 
    writing-mode: vertical-rl;
    text-align: center;
    font-size: 12px;
    color: #999;
    font-weight: bold;
    letter-spacing: 2px;
    border-right: 1px solid var(--border);
    margin-right: 5px;
    width: 24px;
    flex-shrink: 0;
}

.shensha-toggle-btn {
    cursor: pointer;
    font-size: 10px;
    color: var(--text-secondary);
    border: none;
    background: var(--border);
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    border-radius: 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: horizontal-tb;
    margin-top: 120px; 
    transition: transform 0.3s;
}

.pillar.main {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto; 
    flex: 1; 
    min-width: 70px; 
    background: var(--pillar-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    height: auto; 
    transition: background-color 0.3s, border-color 0.3s;
}

.pillar-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-grow: 1; 
    opacity: 1;
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out; 
}

.pillar-content-wrapper.fading-out {
    opacity: 0;
    transform: translateY(5px);
}

.top-info {
    min-height: 35px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    width: 100%;
    font-size: 11px;
    color: var(--text-secondary);
    padding-bottom: 2px;
    white-space: pre-line;
    line-height: 1.2;
}

.title-text {
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 2px;
    color: var(--text-color);
    width: 100%;
    text-align: center;
}
.pillar.main .title-text {
    background-color: var(--pillar-header);
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    border-radius: 4px 4px 0 0;
}
.pillar.rail .title-text { background: transparent; border: none; padding: 0; margin-bottom: 5px; color: var(--text-secondary); }

.shishen-top { font-size: 13px; color: var(--color-shishen); height: 18px; margin-bottom: 2px; font-weight: bold; white-space: nowrap; }
.shishen-top.dm { color: var(--color-daymaster); font-weight: 900; }
.gan { font-size: 30px; font-weight: bold; line-height: 1.1; margin-bottom: 2px; }
.zhi { font-size: 30px; font-weight: bold; line-height: 1.1; margin-bottom: 6px; }

.canggan-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
    min-height: 60px;
    justify-content: flex-start;
    margin-bottom: 5px;
    padding-top: 5px;
    border-top: 1px dashed var(--border);
}
.canggan-row { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.canggan-char { font-weight: bold; }
.canggan-shishen { color: var(--text-secondary); font-size: 12px; }

.eye-btn {
    position: absolute;
    top: 6px; 
    left: 50%;
    transform: translateX(-50%);
    background: var(--pillar-bg);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    border: 1px solid var(--border);
    z-index: 20;
    box-shadow: 0 1px 2px var(--shadow-color);
    color: var(--text-color);
}

.pillar-bottom-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
    background-color: var(--pillar-footer);
    border-top: 1px dashed var(--border);
    border-radius: 0 0 6px 6px;
    justify-content: flex-start;
    padding-bottom: 5px; 
}

.zhangsheng-text {
    position: relative;
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 6px 0;
    border-top: none; 
    background-color: transparent;
}

.shensha-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-bottom: 2px;
    background-color: transparent;
    gap: 1px;
    border-top: 1px dashed var(--border);
    margin-top: 2px;
    padding-top: 2px;
}
.shensha-list.hidden { display: none; border-top: none; } 
.shensha-tag {
    font-size: 14px;
    color: var(--text-color);
    font-weight: 500;
    width: 100%;
    text-align: center;
    padding: 1px 0;
}

.rail-container { display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.rail-row { display: flex; align-items: center; gap: 8px; background: var(--panel-bg); padding: 10px; border-radius: 12px; border: 1px solid var(--border); overflow-x: auto; white-space: nowrap; }
.rail-title { min-width: 30px; font-weight: bold; color: var(--text-secondary); text-align: center; font-size: 13px; background: var(--rail-bg); padding: 5px 2px; border-radius: 6px; writing-mode: vertical-rl; }
.rail-items { display: flex; gap: 6px; padding-right: 10px; }

.pillar.rail {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 60px; height: 125px; background: var(--pillar-bg); border: 1px solid var(--border); border-radius: 6px;
    cursor: pointer; 
    position: relative; 
    padding-top: 4px; 
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: scale(1);
}
.pillar.selectable:hover { 
    background: var(--pillar-header); 
    border-color: #ccc; 
    transform: translateY(-2px);
}
.pillar.active { 
    background: var(--highlight); 
    border-color: var(--active-border); 
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2); 
    transform: scale(1.05);
    z-index: 5;
}

.rail-info { 
    font-size: 11px; 
    color: var(--text-secondary);
    text-align: center; 
    display: block; 
    white-space: pre; 
    line-height: 1.3; 
    height: 36px; 
    width: 100%; 
    border-bottom: 1px dashed var(--border);
    margin-bottom: 3px; 
    padding-top: 4px;
}
.rail-row-inner { display: flex; align-items: baseline; gap: 2px; }
.rail-ss { font-size: 11px; color: var(--rail-shishen); width: 12px; text-align: center; font-weight: normal; }
.rail-char { font-size: 22px; font-weight: bold; }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; justify-content: center; align-items: center; }
.modal-content { background: var(--modal-bg); width: 90%; max-width: 500px; max-height: 80vh; border-radius: 12px; box-shadow: 0 5px 15px var(--shadow-color); display: flex; flex-direction: column; overflow: hidden; }
.modal-header { padding: 15px; border-bottom: 1px solid var(--border); background: var(--pillar-header); display: flex; flex-direction: column; gap: 10px; }
.modal-title-row { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.modal-title-row h3 { margin: 0; font-size: 18px; color: var(--text-color); }
.close-modal { font-size: 24px; cursor: pointer; color: var(--text-secondary); }
.search-input { width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; box-sizing: border-box; background: var(--input-bg); color: var(--text-color); }
.category-filters { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0; white-space: nowrap; -webkit-overflow-scrolling: touch; width: 100%; }
.category-filters::-webkit-scrollbar { display: none; }
.filter-chip { padding: 8px 16px; border-radius: 20px; border: 1px solid var(--border); background: var(--panel-bg); color: var(--text-secondary); font-size: 13px; cursor: pointer; transition: all 0.2s; flex-shrink: 0; white-space: nowrap; }
.filter-chip:hover { background: var(--pillar-header); }
.filter-chip.active { background: var(--active-border); color: white; border-color: var(--active-border); font-weight: bold; }
.chart-list { padding: 10px; overflow-y: auto; flex: 1; }
.chart-item { padding: 12px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: background 0.2s; border-radius: 6px; }
.chart-item:hover { background: var(--highlight); }
.chart-info { flex: 1; }
.chart-name { font-weight: bold; font-size: 16px; color: var(--text-color); margin-bottom: 4px; }
.chart-tags span { display: inline-block; background: var(--highlight); color: var(--active-border); font-size: 10px; padding: 2px 6px; border-radius: 4px; margin-right: 4px; }
.chart-detail { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.delete-btn { padding: 6px 10px; background: #ff5252; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; margin-left: 10px; }

.app-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
    width: 100%;
}
.app-footer a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}
.app-footer a:hover { color: #E1306C; }

.ig-icon { width: 16px !important; height: 16px !important; fill: currentColor; }

::-webkit-scrollbar { height: 4px; }
::-webkit-scrollbar-track { background: var(--rail-bg); }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

.seo-footer {
    margin-top: 40px;
    padding: 20px;
    background-color: var(--pillar-header);
    border-top: 1px solid var(--border);
    color: var(--text-color);
}
.seo-content h2 { color: var(--text-color); }

.ios-prompt-modal { background: var(--modal-bg); box-shadow: 0 -2px 10px var(--shadow-color); }
.ios-prompt-title { color: var(--text-color); }
.ios-instruction { color: var(--text-secondary); }
.ios-icon-row { color: var(--text-color); }
.ios-arrow-down { color: var(--text-color); }

/* --- 截圖模式強制變數重置 (Fix) --- */
.main-display.screenshot-mode {
    --bg-color: #f4f6f8;
    --panel-bg: #ffffff;
    --text-color: #333333;
    --text-secondary: #666666;
    --border: #e0e0e0;
    --accent: #fe7743;
    --highlight: #e3f2fd;
    --active-border: #fe7743;
    --input-bg: #ffffff;
    --rail-bg: #f1f1f1;
    --pillar-bg: #ffffff;
    --pillar-header: #f0f0f0;
    --pillar-footer: #fafafa;
    --modal-bg: #ffffff;
    
    --color-wood: #2e7d32;
    --color-fire: #d32f2f;
    --color-earth: #795548;
    --color-metal: #d1a906;
    --color-water: #1565c0;
    
    --color-shishen: #666; 
    --color-daymaster: #000;
    --rail-shishen: #888;

    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}

.main-display.screenshot-mode .group-container,
.main-display.screenshot-mode .pillar.main {
    background: var(--panel-bg) !important;
    border-color: var(--border) !important;
}

.main-display.screenshot-mode .title-text {
    color: var(--text-color) !important;
    background: var(--pillar-header) !important;
}

.main-display.screenshot-mode .top-info,
.main-display.screenshot-mode .canggan-shishen,
.main-display.screenshot-mode .zhangsheng-text,
.main-display.screenshot-mode .group-label {
    color: var(--text-secondary) !important;
}

.main-display.screenshot-mode .shishen-top,
.main-display.screenshot-mode .shensha-tag {
    color: var(--color-shishen) !important;
}

.main-display.screenshot-mode .shishen-top.dm {
    color: var(--color-daymaster) !important;
}


/* =========================================
   【新增】西曆下拉選單優化
   ========================================= */
.solar-select-group {
    display: flex;
    gap: 2px;
    flex-wrap: nowrap; /* 強制單行 */
    width: 100%;
    align-items: center;
}

/* 文字標籤 (放在右邊) */
.solar-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 4px 0 1px; /* 左邊稍微留空，右邊留間距 */
    white-space: nowrap; /* 不換行 */
    flex-shrink: 0; /* 不壓縮 */
}

/* 選單本體 */
.solar-select-group select {
    padding: 6px 0 6px 4px;
    text-align: center;
    min-width: auto !important;
    width: auto;
    flex-grow: 1;
    flex-shrink: 1;
    -webkit-appearance: none; /* 移除默認箭頭 */
    -moz-appearance: none;
    appearance: none;
    /* 恢復下拉圖示但縮小內距 */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 2px top 50%;
    background-size: 8px auto;
    padding-right: 12px; /* 為箭頭留空間 */
}

/* 暗黑模式下箭頭顏色變白 */
[data-theme="dark"] .solar-select-group select {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23e0e0e0%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
}

#solarYear { flex-grow: 1.5; min-width: 45px; }
#solarMonth { flex-grow: 0.8; min-width: 30px; }
#solarDay { flex-grow: 0.8; min-width: 30px; }
#solarHour { flex-grow: 0.8; min-width: 30px; }
#solarMinute { flex-grow: 0.8; min-width: 30px; }


/* =========================================
   手機版排版優化
   ========================================= */
@media (max-width: 600px) {
    /* --- 1. 輸入列優化 (單行並排) --- */
    /* 隱藏標籤文字，節省空間 */
    .input-row span { 
        display: none; 
    } 
    /* 顯示 .solar-label (例外，因為我們需要年月日時分) */
    .solar-select-group span.solar-label {
        display: inline; /* 保持同行顯示 */
    }

    .input-row { 
        gap: 5px; /* 縮小間距 */
        flex-wrap: nowrap; /* 強制不換行 */
    }
    
    /* 權重分配：名字佔4，性別佔2，分類佔1.5 */
    #nameInput { flex: 4; min-width: 0; }
    #gender { flex: 2; min-width: 0; } /* 增加權重 */
    #tagsInput { flex: 1.5; min-width: 0; } /* 減少權重 */

    /* --- 2. 其它樣式微調 --- */
    .auth-box { padding: 10px; gap: 5px; }
    .auth-hint { font-size: 11px; white-space: normal; line-height: 1.2; flex: 1; }
    #btnLogin { font-size: 12px !important; padding: 7px 12px !important; width: auto !important; }
    .main-display { overflow-x: auto; gap: 2px; justify-content: flex-start; }
    .group-container { padding: 4px 2px; gap: 1px; flex: 0 0 auto; }
    .group-container.dynamic-group { flex: 0 0 auto; }
    .group-label { width: 18px; padding-top: 82px; font-size: 11px; }
    .shensha-toggle-btn { width: 16px; height: 16px; font-size: 10px; margin-top: 110px; }
    .pillar.main { width: 52px; min-width: 52px; flex: 0 0 52px; }
    .gan { font-size: 24px; margin-bottom: 0; line-height: 1.1; margin-bottom: 2px;}
    .zhi { font-size: 24px; margin-bottom: 2px; line-height: 1.1; }
    .shishen-top { font-size: 10px; height: 14px; margin-bottom: 4px; }
    .canggan-row { font-size: 12px; gap: 1px; }
    .canggan-shishen { font-size: 10px; transform: none; }
    .top-info { min-height: 28px; font-size: 10px; }
    .title-text { font-size: 11px; padding: 4px 0; }
    .eye-btn { width: 16px; height: 16px; font-size: 10px; top: 4px; }
    .canggan-box { height: 60px; min-height: 60px; margin-bottom: 2px; padding-top: 2px; }
    .shensha-tag { font-size: 11px; }
    .zhangsheng-text { font-size: 10px; height: 20px; display: flex; align-items: center; justify-content: center; }
    .pillar-bottom-section { padding-bottom: 2px; }
    .tools-bar { justify-content: space-between; gap: 8px; }
    .tool-btn { flex: 1; justify-content: center; padding: 8px 0; font-size: 12px; }
    #shareImgContainer { padding: 10px; }
    
    /* Solar select 微調 */
    .solar-select-group { gap: 1px; }
    .solar-select-group select { font-size: 13px; padding: 6px 0 6px 2px; padding-right: 10px; }
    .solar-label { font-size: 12px; margin: 0 2px 0 0; }
}