/* ── Extracted Modal Utility Classes ── */

.modal-close-btn {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgb(255 255 255 / 0.05);
    color: rgb(255 255 255 / 0.8);
    font-weight: 700;
    border: 1px solid rgb(255 255 255 / 0.1);
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.modal-close-btn:hover {
    background-color: rgb(255 255 255 / 0.1);
}

.modal-close-btn:active {
    transform: scale(0.95);
}

.modal-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgb(255 255 255 / 0.1);
    padding-bottom: 1rem;
}

.modal-section-card {
    background-color: rgb(255 255 255 / 0.05);
    border-radius: 1rem;
    padding: 1rem;
    border: 1px solid rgb(255 255 255 / 0.05);
    box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
}

.settings-section-label {
    font-size: 10px;
    font-weight: 900;
    color: rgb(148 163 184);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 0.5rem;
}

.volume-control-label {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 10px;
    font-weight: 900;
    color: rgb(148 163 184);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ── Modal Caption / Changelog Text Polish ── */
.modal-caption {
    font-size: 10px;
    font-weight: 700;
    opacity: 0.3;
    letter-spacing: 0.3em;
    margin-left: 0.5rem;
}

/* 手機易讀性：系統頁標題／說明字放大（電腦版維持原樣） */
@media (max-width: 768px) {

    .settings-section-label,
    .volume-control-label,
    .modal-caption {
        font-size: 13px;
    }
}

/* ── 更新日誌 (Changelog) 視覺優化 ── */
/* 1. 主標題稍微放大 (更新日誌) */
.text-2xl.font-black.text-indigo-300 {
    font-size: 1.75rem !important;
    /* 24px -> 28px */
}

/* 2. 版本號與日期放大 (v1.x.x / Date) */
.text-indigo-300.font-black.text-xl {
    font-size: 1.35rem !important;
    /* 20px -> 21.6px */
}

.text-\[10px\].font-bold.text-slate-500 {
    font-size: 0.75rem !important;
    /* 10px -> 12px */
    padding: 2px 8px !important;
}

/* 3. 更新內容放大與行距增加 (Changes) */
.text-slate-300.text-xs.leading-relaxed {
    font-size: 0.95rem !important;
    /* 12px -> 15.2px */
    line-height: 1.6 !important;
    /* 增加行距 */
}

/* 4. 增加條目間的微小間距與點點偏移校正 */
.space-y-2>li.text-slate-300.text-xs.leading-relaxed {
    margin-bottom: 0.5rem !important;
}

.space-y-2>li.text-slate-300.text-xs.leading-relaxed span:first-child {
    margin-top: 0.55rem !important;
    /* 隨著字放大學點點也要下移一點 */
}

/* 5. 手機版容器微調，確保卡片不爆版且內容呼吸空間充足 */
@media (max-width: 480px) {
    .modal-panel .p-5 {
        padding: 1.25rem 1.1rem !important;
    }

    .text-2xl.font-black.text-indigo-300 {
        font-size: 1.5rem !important;
        /* 手機上標題不宜過大以免折行 */
    }
}