/* =========================================
   [架構規範註解] (Architectural Constraint)
   嚴格禁止在此檔案或 HTML 中使用內聯樣式 (style="...")
   與非語意化實用類別 (如 Tailwind 的 mb-4, text-center 等)。
   所有樣式必須封裝為具備業務意義的語意化 Class (Semantic Class)。
   ========================================= */

:root {
    /* --- 1. 基礎中性色 (Neutrals - 明亮科技深藍色票) --- */
    --color-white:       #FFFFFF;
    --color-black:       #000000;
    --color-gray-100:    #F1F5F9;  /* 柔和雪霜白 (主要文字/標題，與 Pure White 建立優雅層次對比) */
    --color-gray-200:    #CBD5E1;  /* 冰川清霜灰 (清晰次要內文與漸層) */
    --color-gray-300:    #B0C2DE;  /* 提高明亮度的次要說明 text */
    --color-gray-400:    #7C95B6;  /* 中淺科技藍灰 (頭像框/活躍外框/質感 Hover) */
    --color-gray-500:    #536D93;  /* 中深藍灰 (次要外框/面板邊界) */
    --color-gray-600:    #35486B;  /* 明亮透光邊框/分隔線 */
    --color-gray-700:    #22314E;  /* 懸浮卡片層 */
    --color-gray-800:    #18243C;  /* 容器面板背景 */
    --color-gray-850:    #121B2F;  /* 次級全站背景 */
    --color-gray-900:    #0D1322;  /* 明亮立體科技深色背景 */

    /* --- 2. 白/黑透明度變體 (語意化簡短命名 via color-mix) --- */
    --color-white-fade:  color-mix(in srgb, var(--color-white) 5%, transparent);   /* 微透亮 */
    --color-white-glass: color-mix(in srgb, var(--color-white) 10%, transparent);  /* 毛玻璃邊框 */
    --color-white-dim:   color-mix(in srgb, var(--color-white) 50%, transparent);  /* 半透明 */
    --color-black-dim:   color-mix(in srgb, var(--color-black) 20%, transparent);  /* 暗遮罩 */
    --color-black-dark:  color-mix(in srgb, var(--color-black) 50%, transparent);  /* 深遮罩 */

    /* --- 3. 基礎主色彩 (Base Hex Colors - 色票系統核心源) --- */
    --color-cyan:        #00F0FF;  /* 電光青 */
    --color-purple:      #B866FF;  /* 明亮幻紫 */
    --color-gold:        #FCD34D;  /* 璀璨亮金 */
    --color-red:         #FF5C7C;  /* 霓虹紅 */
    --color-green:       #34D399;  /* 明亮翡翠綠 */
    --color-amber:       #FBBF24;  /* 暖橘琥珀 */
    --color-blue:        #60A5FA;  /* 炫藍 */

    /* --- 4. 自動連動衍生變體 (Derived Shades via color-mix) --- */
    --color-cyan-light:  color-mix(in srgb, var(--color-cyan) 80%, var(--color-white));
    --color-cyan-dark:   color-mix(in srgb, var(--color-cyan) 80%, var(--color-black));
    --color-cyan-alpha:  color-mix(in srgb, var(--color-cyan) 20%, transparent);

    --color-purple-light: color-mix(in srgb, var(--color-purple) 80%, var(--color-white));
    --color-purple-dark:  color-mix(in srgb, var(--color-purple) 80%, var(--color-black));
    --color-purple-alpha: color-mix(in srgb, var(--color-purple) 20%, transparent);

    --color-gold-light:  color-mix(in srgb, var(--color-gold) 80%, var(--color-white));
    --color-gold-dark:   color-mix(in srgb, var(--color-gold) 80%, var(--color-black));
    --color-gold-alpha:  color-mix(in srgb, var(--color-gold) 20%, transparent);

    --color-red-light:   color-mix(in srgb, var(--color-red) 80%, var(--color-white));
    --color-red-dark:    color-mix(in srgb, var(--color-red) 80%, var(--color-black));
    --color-red-alpha:   color-mix(in srgb, var(--color-red) 20%, transparent);

    --color-green-light: color-mix(in srgb, var(--color-green) 80%, var(--color-white));
    --color-green-dark:  color-mix(in srgb, var(--color-green) 80%, var(--color-black));
    --color-green-alpha: color-mix(in srgb, var(--color-green) 20%, transparent);

    --color-amber-light: color-mix(in srgb, var(--color-amber) 80%, var(--color-white));
    --color-amber-dark:  color-mix(in srgb, var(--color-amber) 80%, var(--color-black));
    --color-amber-alpha: color-mix(in srgb, var(--color-amber) 20%, transparent);

    /* --- 5. 通用毛玻璃表面體系 (Unified Glass Surfaces) --- */
    --surface-glass-bg:    color-mix(in srgb, var(--color-white) 5%, transparent);   /* 5% 輕量玻璃基底 */
    --surface-glass-hover: color-mix(in srgb, var(--color-white) 10%, transparent);  /* 10% 懸浮玻璃亮化 */
    --surface-glass-dim:   var(--color-black-dim);                                    /* 暗色玻璃遮罩 (black dim) */
    --surface-glass-dark:  var(--color-black-dark);                                   /* 深色玻璃防護 (black dark) */
    --surface-glass-modal: color-mix(in srgb, #394046 50%, transparent);             /* Modal 彈窗實測絕佳防穿透基底 */

    /* --- 6. 漸層與環境光霧系統 (Gradients & Ambient Mesh Tokens) --- */
    --gradient-cyan-gold:   linear-gradient(135deg, var(--color-cyan) 0%, var(--color-gold) 100%);
    --gradient-cyan-purple: linear-gradient(135deg, var(--color-cyan) 0%, var(--color-purple) 100%);
    --gradient-gold-red:    linear-gradient(135deg, var(--color-gold) 0%, var(--color-red) 100%);
    --gradient-rank-1:      linear-gradient(135deg, #FFE066 0%, #F59E0B 100%);
    --gradient-rank-2:      linear-gradient(135deg, #FFFFFF 0%, #94A3B8 100%);
    --gradient-rank-3:      linear-gradient(135deg, #F97316 0%, #B45309 100%);
    --gradient-ambient-mesh: radial-gradient(circle at 10% 15%, color-mix(in srgb, var(--color-cyan) 13%, transparent) 0%, transparent 50%),
                             radial-gradient(circle at 90% 85%, color-mix(in srgb, var(--color-purple) 12%, transparent) 0%, transparent 50%),
                             radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--color-gold) 8%, transparent) 0%, transparent 60%);

    /* --- 7. 邊框顏色 Token 體系 (Unified Border Tokens) --- */
    --border-glass:        color-mix(in srgb, var(--color-white) 12%, transparent);
    --border-glass-hover:  color-mix(in srgb, var(--color-white) 22%, transparent);
    --border-glass-subtle: color-mix(in srgb, var(--color-white) 6%, transparent);



    --shadow-elevation-sm:  0 4px 14px color-mix(in srgb, var(--color-black) 20%, transparent);
    --shadow-elevation-md:  0 8px 26px -4px color-mix(in srgb, var(--color-black) 35%, transparent);
    --shadow-elevation-lg:  0 16px 42px -8px color-mix(in srgb, var(--color-black) 50%, transparent);

    --shadow-glow-cyan-sm:   none;
    --shadow-glow-purple-sm: none;
    --shadow-glow-gold-sm:   none;

    /* 統一尺寸設計系統 (Size System) */
    --size-3xs: 0.1rem;   /* 1.6px */
    --size-2xs: 0.25rem;  /* 4px */
    --size-xs: 0.5rem;    /* 8px */
    --size-sm: 0.75rem;   /* 12px */
    --size-md: 1rem;      /* 16px */
    --size-lg: 1.5rem;    /* 24px */
    --size-xl: 2rem;      /* 32px */
    --size-2xl: 2.5rem;   /* 40px */
    --size-3xl: 3rem;     /* 48px */
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--color-gray-900);
    color: var(--color-gray-100);
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, sans-serif;
}

a {
    text-decoration: none;
    color: inherit;
}

.hidden { display: none !important; }
.blink { animation: blink-anim 2s infinite; }
@keyframes blink-anim { 50% { opacity: 0.7; } }
.material-symbols-rounded { 
    vertical-align: middle; 
    line-height: 1; 
    font-size: inherit; 
    flex-shrink: 0;
}

/* Pinging Dot 動畫 */
.ping-dot { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 0.5rem; height: 0.5rem; flex-shrink: 0; align-self: center; }
.ping-dot__wave { position: absolute; inset: 0; display: inline-flex; border-radius: 50%; background-color: var(--color-cyan); opacity: 0.75; animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.ping-dot__core { position: relative; display: inline-flex; border-radius: 50%; height: 0.5rem; width: 0.5rem; background-color: var(--color-cyan); }
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* 基礎 Primitive 輔助類別 (用於標準通用樣式對接) */
.bg-gray-900 { background-color: var(--color-gray-900); }
.bg-gray-800 { background-color: var(--color-gray-800); }
.bg-gray-600 { background-color: var(--color-gray-600); }

.text-cyan     { color: var(--color-cyan); }
.text-purple   { color: var(--color-purple); }
.text-gold     { color: var(--color-gold); }
.text-red      { color: var(--color-red); }
.text-green    { color: var(--color-green); }
.text-amber    { color: var(--color-amber); }
.text-gray-400 { color: var(--color-gray-400); }
.text-gray-300 { color: var(--color-gray-300); }
.text-gray-100 { color: var(--color-gray-100); }

.border-gray-600 { border-color: var(--color-gray-600); }
.border-gray-400 { border-color: var(--color-gray-400); }
.border-purple   { border-color: var(--color-purple); }


.border-cyan     { border-color: var(--color-cyan); }
.border-gold     { border-color: var(--color-gold); }
.border-red      { border-color: var(--color-red); }

.text-bold { font-weight: bold; }

.hide-from-member { display: none !important; }

/* 捲軸美化 (極簡 8px 滿版毛玻璃) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--border-glass); border-radius: 9999px; }
::-webkit-scrollbar-thumb { background: var(--border-glass); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-glass-hover); }

/* 基礎結構類別 */
.app-root-container { display: contents; }

/* 輔助與排版類別 (Helpers) */
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.pull-right { margin-left: auto !important; }
.pull-left { margin-right: auto !important; }
.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.text-sub {
    color: var(--color-gray-300);
    font-size: var(--size-sm);
}
.flex-col { display: flex; flex-direction: column; }
.gap-2xs { gap: var(--size-2xs); }

/* 解決 Vue 渲染前閃爍問題 (Flicker Prevention) */
[v-cloak] {
    display: none !important;
}