/* ════════════════════════════════════════════════════════
   Loading 遮罩 + 提示視窗(Msg)共用樣式
   配色改成跟教育人傳媒網站本身一致(藍→綠漸層主色 #27a4d9→#95c148、
   黃 #FECC02、紅 #F73B3B),不是原本從 7008_ERP 搬過來的深色玻璃感/咖啡棕。
   全站(style.css)完全沒有深色模式,固定白底,這裡也不跟著系統深色模式切換,
   避免變成全站唯一一個「跟著使用者電腦深色模式跑」的突兀元件。
   ════════════════════════════════════════════════════════ */
:root {
    --gm-overlay: rgba(20, 20, 20, 0.55);
    --gm-card-bg: #ffffff;
    --gm-card-border: #e5e5e5;
    --gm-card-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    --gm-text-title: #1C1C1C;
    --gm-text-info: #4D4D4D;
    --gm-ld-bg: #ffffff;
    --gm-ld-border: #e5e5e5;
    --gm-ld-spinner: #27a4d9;
    --gm-ld-text: #4D4D4D;
}

/* ── Msg Modal 遮罩 ─────────────────────────────────────────── */
.glass-modal {
    background: var(--gm-overlay);
}

/* ── Msg 卡片本體 ───────────────────────────────────────────── */
.glass-content {
    width: 100%;
    padding: 32px 40px;
    background: var(--gm-card-bg);
    border: 1px solid var(--gm-card-border);
    border-radius: 12px;
    box-shadow: var(--gm-card-shadow);
    animation: _msg-fd 0.25s ease;
}

/* 頂部用網站導覽列同一組藍→綠漸層畫一條窄邊,呼應網站識別 */
.glass-content::before {
    content: '';
    display: block;
    height: 4px;
    margin: -32px -40px 24px;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(90deg, #27a4d9 0%, #0e6eb8 50%, #95c148 100%);
}

@keyframes _msg-fd {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.glass-content .modal-content {
    background: transparent;
    border: none;
    box-shadow: none;
}

.glass-content .modal-title {
    color: var(--gm-text-title);
    font-weight: 700;
}

.glass-content .modal-info {
    color: var(--gm-text-info);
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    text-align: center !important;
}

/* ── 按鈕共用 ───────────────────────────────────────────────── */
.glass-btn {
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.modal.glass-modal .modal-footer .glass-btn {
    flex: none;
    height: auto;
    font-size: 14px;
    font-weight: 600;
    border-right: none;
}

.modal.glass-modal .modal-footer .glass-btn:hover {
    transform: translateY(-1px);
}

.modal.glass-modal .modal-footer .glass-btn:active {
    transform: translateY(0);
}

/* 主按鈕:網站主藍色,跟導覽列/連結顏色一致 */
.glass-btn-primary {
    color: #fff;
    background: #27a4d9;
    box-shadow: 0 4px 12px rgba(39, 164, 217, 0.35);
}

.modal.glass-modal .modal-footer .glass-btn-primary:hover {
    background: #1f8fbf;
    box-shadow: 0 6px 16px rgba(39, 164, 217, 0.45);
}

/* 次要按鈕:跟全站 .btn 預設樣式一致(白底灰框) */
.glass-btn-secondary {
    color: #4D4D4D;
    background: #ffffff;
    border-color: #CCCCCC;
}

.modal.glass-modal .modal-footer .glass-btn-secondary:hover {
    background: #F7F7F7;
    border-color: #999;
}

/* 危險按鈕:跟全站 .btn_red 一致的紅色 */
.glass-btn-danger {
    color: #fff;
    background: #F73B3B;
    box-shadow: 0 4px 12px rgba(247, 59, 59, 0.35);
}

.modal.glass-modal .modal-footer .glass-btn-danger:hover {
    background: #e02020;
    box-shadow: 0 6px 16px rgba(247, 59, 59, 0.45);
}

/* ── Loading overlay ────────────────────────────────────────── */
#Loading {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--gm-overlay);
    align-items: center;
    justify-content: center;
}

#Loading .ld-card {
    background: var(--gm-ld-bg);
    border: 1px solid var(--gm-ld-border);
    border-radius: 12px;
    padding: 28px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    box-shadow: var(--gm-card-shadow);
}

#Loading .ld-card svg {
    animation: _ld-spin 0.85s linear infinite;
    display: block;
}

#Loading .ld-card .ld-ring-track {
    stroke: var(--gm-ld-border);
}

#Loading .ld-card .ld-ring-spin {
    stroke: var(--gm-ld-spinner);
}

#Loading .ld-card span {
    color: var(--gm-ld-text);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.05em;
}

@keyframes _ld-spin {
    to { transform: rotate(360deg); }
}