* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: "Microsoft JhengHei", "PingFang TC", "Segoe UI", sans-serif;
    background: #f4f4f4;
    color: #222;
}
a { color: #2b6cb0; text-decoration: none; }
a:hover { text-decoration: underline; }

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #2d3748;
    color: #fff;
    padding: 12px 20px;
}
.site-header .brand { font-size: 20px; font-weight: bold; }
.site-header .brand span { font-size: 12px; color: #cbd5e0; margin-left: 6px; }
.site-header a { color: #90cdf4; margin-left: 12px; }

.layout { display: flex; min-height: calc(100vh - 52px); }
.side-nav {
    width: 220px;
    background: #fff;
    border-right: 1px solid #e2e8f0;
    padding: 16px 0;
    flex-shrink: 0;
}
.side-nav .nav-section { margin-bottom: 18px; }
.side-nav .nav-title {
    padding: 4px 20px;
    font-size: 13px;
    color: #718096;
    font-weight: bold;
}
.side-nav a {
    display: block;
    padding: 8px 20px 8px 28px;
    color: #2d3748;
}
.side-nav a:hover { background: #edf2f7; text-decoration: none; }

.main-content { flex: 1; padding: 24px; }
.card {
    background: #fff;
    border-radius: 8px;
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    max-width: 720px;
}
.avatar { width: 64px; height: 64px; border-radius: 50%; }

.auth-box {
    background: #fff;
    border-radius: 8px;
    padding: 28px 32px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    max-width: 420px;
    margin: 60px auto;
}
.auth-box h1 { margin-top: 0; font-size: 22px; }

form .field { margin-bottom: 14px; }
form label { display: block; margin-bottom: 4px; font-weight: bold; }
form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="number"],
form textarea,
form select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    font-size: 14px;
}
form textarea { min-height: 100px; resize: vertical; }

button, .btn {
    display: inline-block;
    background: #2b6cb0;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 18px;
    font-size: 14px;
    cursor: pointer;
    margin-right: 8px;
}
button:hover, .btn:hover { background: #2c5282; }
button.danger { background: #c53030; }
button.danger:hover { background: #9b2c2c; }

.msg-error {
    background: #fed7d7; color: #742a2a;
    border-radius: 6px; padding: 10px 14px; margin-bottom: 14px;
}
.msg-info {
    background: #c6f6d5; color: #22543d;
    border-radius: 6px; padding: 10px 14px; margin-bottom: 14px;
}

.file-list { list-style: none; padding: 0; }
.file-list li {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 0; border-bottom: 1px solid #e2e8f0;
}
.file-list .file-name { flex: 1; word-break: break-all; }

.progress-wrap {
    background: #e2e8f0; border-radius: 6px; height: 14px;
    margin: 10px 0; overflow: hidden; display: none;
}
.progress-bar {
    background: #2b6cb0; height: 100%; width: 0%;
    transition: width 0.2s;
}
.progress-text { font-size: 13px; color: #4a5568; }

.embed-preview {
    border-left: 4px solid #fff;
    background: #2f3136;
    color: #dcddde;
    border-radius: 4px;
    padding: 12px 16px;
    max-width: 420px;
    margin-top: 16px;
}
.embed-preview .embed-title { color: #fff; font-weight: bold; margin-bottom: 6px; }
.embed-preview .embed-desc { white-space: pre-wrap; word-break: break-word; }

.publicity-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid #e2e8f0;
}
.publicity-item .pub-name { font-weight: bold; }
.publicity-item .pub-title { color: #4a5568; flex: 1; }
.publicity-item form { margin: 0; }

/* ---------- 拖拉上傳 ---------- */
.drop-zone {
    border: 2px dashed #a0aec0;
    border-radius: 8px;
    padding: 22px;
    text-align: center;
    color: #4a5568;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.drop-zone:hover { border-color: #2b6cb0; }
.drop-zone.dragover { border-color: #2b6cb0; background: #ebf4ff; }
.drop-zone .dz-filename { margin: 8px 0 0; color: #2d3748; font-weight: bold; word-break: break-all; }

/* ---------- 音樂排序表格 ---------- */
.music-table { width: 100%; border-collapse: collapse; }
.music-table th, .music-table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid #e2e8f0;
}
.music-table th a { color: #2d3748; font-weight: bold; }

/* ---------- 宣傳預覽（Discord 嵌入訊息風格） ---------- */
.publicity-layout { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.publicity-layout .form-col { flex: 1 1 320px; min-width: 280px; }
.publicity-layout .preview-col { flex: 1 1 320px; min-width: 280px; position: sticky; top: 16px; }

.discord-msg {
    display: flex;
    gap: 12px;
    background: #313338;
    border-radius: 8px;
    padding: 16px;
    color: #dbdee1;
    font-size: 15px;
    line-height: 1.4;
}
.discord-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #5865f2;
    color: #fff;
    font-weight: bold;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.discord-body { flex: 1; min-width: 0; }
.discord-author { color: #fff; font-weight: 600; }
.discord-author .bot-tag {
    background: #5865f2;
    color: #fff;
    border-radius: 4px;
    font-size: 10px;
    padding: 1px 5px;
    margin-left: 6px;
    vertical-align: middle;
}
.discord-embed {
    margin-top: 6px;
    background: #2b2d31;
    border-left: 4px solid #fff;
    border-radius: 4px;
    padding: 12px 14px;
    max-width: 430px;
}
.discord-embed .embed-title { color: #fff; font-weight: 600; margin-bottom: 6px; word-break: break-word; }
.discord-embed .embed-desc { font-size: 14px; word-break: break-word; }
.discord-embed .embed-image {
    margin-top: 10px;
    max-width: 100%;
    border-radius: 4px;
    display: none;
}
.discord-embed code {
    background: #1e1f22;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 13px;
}
.discord-embed pre {
    background: #1e1f22;
    padding: 8px;
    border-radius: 4px;
    overflow-x: auto;
    margin: 6px 0;
}
.discord-embed pre code { background: none; padding: 0; }
.discord-embed a { color: #00a8fc; }
.discord-embed .md-h1, .discord-embed .md-h2, .discord-embed .md-h3 {
    display: block;
    color: #fff;
    font-weight: bold;
    margin: 6px 0 2px;
}
.discord-embed .md-h1 { font-size: 20px; }
.discord-embed .md-h2 { font-size: 17px; }
.discord-embed .md-h3 { font-size: 15px; }

/* ---------- 頁面功能說明 ---------- */
.page-desc {
    color: #4a5568;
    margin-top: -6px;
    margin-bottom: 16px;
    line-height: 1.6;
}

/* ==========================================================
   UI/UX 升級：俱樂部風格、懸停回應、點擊回饋、動態效果
   ========================================================== */
:root {
    --brand: #5865f2;
    --brand-dark: #4752c4;
}

/* 整體背景：柔和漸層營造俱樂部氛圍 */
body {
    background: linear-gradient(160deg, #f4f4f8 0%, #eceaf6 55%, #f4f4f4 100%);
    background-attachment: fixed;
}

/* 頁首：俱樂部色彩漸層 */
.site-header {
    background: linear-gradient(120deg, #3b3a6d 0%, #5865f2 60%, #7b6cf0 100%);
    box-shadow: 0 2px 12px rgba(88, 101, 242, 0.35);
}
.site-header .brand span { color: rgba(255, 255, 255, 0.75); }
.site-header a { color: #cdd3ff; transition: color 0.2s; }
.site-header a:hover { color: #fff; text-decoration: none; }

/* 頁面進場動畫 */
.main-content, .auth-box { animation: fadeInUp 0.35s ease both; }
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* 側邊導覽：懸停滑動 + 左側色條 */
.side-nav a {
    position: relative;
    transition: background 0.18s, color 0.18s, padding-left 0.18s;
}
.side-nav a::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0;
    background: var(--brand);
    transition: width 0.18s;
}
.side-nav a:hover {
    background: #eef0fe;
    color: var(--brand-dark);
    padding-left: 34px;
    text-decoration: none;
}
.side-nav a:hover::before { width: 4px; }

/* 按鈕：懸停浮起、點擊下沉 */
button, .btn {
    transition: transform 0.12s, box-shadow 0.12s, background 0.15s, opacity 0.15s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
button:hover, .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(43, 108, 176, 0.25);
    text-decoration: none;
}
button:active, .btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
button:focus-visible, .btn:focus-visible, .drop-zone:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 3px solid rgba(88, 101, 242, 0.45);
    outline-offset: 1px;
}

/* 按鈕載入中：轉圈 + 禁止重複點擊（不 disable，避免欄位值漏送） */
.btn-loading { pointer-events: none; opacity: 0.85; }
.btn-loading::after {
    content: "";
    display: inline-block;
    width: 12px; height: 12px;
    margin-left: 8px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 卡片懸停陰影 */
.card { transition: box-shadow 0.2s; }
.card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10); }

/* 訊息框滑入 */
.msg-error, .msg-info { animation: slideIn 0.25s ease both; }
@keyframes slideIn {
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 1; transform: none; }
}

/* 表單輸入聚焦發光 */
form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus,
form input[type="number"]:focus,
form textarea:focus,
form select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.15);
    outline: none;
}

/* 拖拉區拖入時脈動 */
.drop-zone.dragover { animation: dzPulse 1s ease infinite; }
@keyframes dzPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(88, 101, 242, 0.35); }
    50% { box-shadow: 0 0 0 8px rgba(88, 101, 242, 0); }
}

/* 清單與表格列懸停 */
.file-list li, .publicity-item {
    transition: background 0.15s;
    border-radius: 6px;
    padding-left: 8px;
    padding-right: 8px;
}
.file-list li:hover, .publicity-item:hover { background: #f7f8fc; }
.music-table tbody tr { transition: background 0.15s; }
.music-table tbody tr:hover { background: #f0f4ff; }

/* 連結顏色平滑過渡 */
a { transition: color 0.15s; }

/* 進度條光澤流動 */
.progress-bar {
    background: linear-gradient(90deg, #2b6cb0, #5865f2, #2b6cb0);
    background-size: 200% 100%;
    animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* Toast 通知 */
.toast-wrap {
    position: fixed;
    bottom: 24px; right: 24px;
    z-index: 9999;
    display: flex; flex-direction: column; gap: 8px;
}
.toast {
    background: #2d3748;
    color: #fff;
    border-radius: 8px;
    padding: 10px 18px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    animation: toastIn 0.25s ease both;
    font-size: 14px;
}
.toast.toast-success { background: #2f855a; }
.toast.toast-error { background: #c53030; }
.toast.hide { transition: opacity 0.3s, transform 0.3s; opacity: 0; transform: translateY(10px); }
@keyframes toastIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

/* 歡迎頁 Hero：俱樂部門面 */
.hero {
    display: flex; align-items: center; gap: 18px;
    background: linear-gradient(120deg, #3b3a6d, #5865f2);
    color: #fff;
    border-radius: 12px;
    padding: 28px 32px;
    margin-bottom: 20px;
    max-width: 720px;
    box-shadow: 0 8px 24px rgba(88, 101, 242, 0.35);
}
.hero-badge {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 2px solid rgba(255, 255, 255, 0.5);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: bold;
    flex-shrink: 0;
}
.hero h2 { margin: 0 0 6px; }
.hero p { margin: 0; opacity: 0.85; }

/* 俱樂部 Logo：圓形裁切填入徽章/頭像 */
.hero-badge img, .discord-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
.hero-badge { overflow: hidden; }
.discord-avatar { overflow: hidden; }

/* ---------- Discord 登入按鈕與分隔線 ---------- */
.btn-discord {
    display: block;
    width: 100%;
    text-align: center;
    background: #5865f2;
    color: #fff;
    padding: 11px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
}
.btn-discord:hover { background: #4752c4; color: #fff; text-decoration: none; }
.divider {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #718096;
    font-size: 13px;
    margin: 16px 0;
}
.divider::before, .divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

/* ---------- 指令 Wiki ---------- */
.wiki-card { max-width: 900px; }
/* Wiki 頁首 Hero：俱樂部品牌漸層 */
.wiki-hero {
    background: linear-gradient(120deg, #3b3a6d 0%, #5865f2 60%, #7b6cf0 100%);
    border-radius: 12px;
    padding: 20px 22px;
    margin-bottom: 18px;
    box-shadow: 0 4px 14px rgba(88, 101, 242, 0.25);
}
.wiki-hero h2 { color: #fff; margin: 0 0 6px; }
.wiki-hero p { color: rgba(255, 255, 255, 0.85); margin: 0; font-size: 14px; }
.wiki-hero-badges { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.wiki-badge {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
}
/* 搜尋列：吸頂 + 毛玻璃，捲動時保持可見 */
.wiki-search-wrap {
    position: sticky;
    top: 10px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    padding: 8px 0;
    margin-bottom: 14px;
}
.wiki-search {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #cbd5e0;
    border-radius: 8px;
    font-size: 14px;
}
.wiki-search:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.15);
    outline: none;
}
.wiki-search-count { color: #718096; font-size: 12px; white-space: nowrap; }
/* Wiki 首頁分類卡片 */
.wiki-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin: 16px 0 20px;
}
.wiki-cat-card {
    background: #f9fafc;
    border: 1px solid #edf0f5;
    border-radius: 12px;
    padding: 16px;
    color: inherit;
    transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}
.wiki-cat-card:hover {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
    border-color: var(--brand);
    text-decoration: none;
}
.wiki-cat-card .cat-icon {
    font-size: 24px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef0fe;
    border-radius: 12px;
}
.wiki-cat-card .cat-name { font-weight: 700; font-size: 17px; margin: 10px 0 4px; color: var(--brand-dark); }
.cat-count {
    background: #eef0fe;
    color: var(--brand-dark);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    margin-left: 6px;
    vertical-align: 2px;
}
.wiki-cat-card .cat-intro { color: #4a5568; font-size: 13px; margin: 0; }
.wiki-tip {
    background: #eef0fe;
    border-radius: 10px;
    padding: 14px 18px;
}
.wiki-tip h3 { margin-top: 0; }
.wiki-tip ul { margin-bottom: 0; padding-left: 20px; }
.wiki-tip code { background: #fff; padding: 1px 6px; border-radius: 4px; }
/* 分類頁頂部導覽 */
.wiki-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; align-items: center; }
.wiki-nav a {
    background: #eef0fe;
    color: var(--brand-dark);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
}
.wiki-nav a:hover { background: #dfe4fd; text-decoration: none; }
.wiki-nav a.active { background: var(--brand); color: #fff; }
.wiki-nav .wiki-back { background: transparent; color: #4a5568; }
.wiki-nav .wiki-back:hover { background: #edf0f5; }
/* 分類頁子分類群組 */
.wiki-group { margin-bottom: 24px; animation: fadeInUp 0.3s ease both; }
.wiki-group h3 { border-bottom: 2px solid #eef0fe; padding-bottom: 6px; }
.wiki-intro { color: #4a5568; font-size: 14px; margin-top: -4px; }
.wiki-cmd {
    background: #f9fafc;
    border: 1px solid #edf0f5;
    border-left: 4px solid var(--brand);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
    transition: box-shadow 0.15s, transform 0.15s;
}
.wiki-cmd:hover { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08); transform: translateX(2px); }
.cmd-head { display: flex; align-items: center; gap: 8px; }
.cmd-name {
    background: #eef0fe;
    color: var(--brand-dark);
    padding: 3px 10px;
    border-radius: 6px;
    font-weight: 700;
    font-family: Consolas, 'Courier New', monospace;
}
.cmd-copy {
    margin-left: auto;
    background: transparent;
    border: 1px solid #cbd5e0;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 12px;
    color: #4a5568;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    min-width: 72px;
}
.cmd-copy:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.cmd-copy.copied { background: #48bb78; border-color: #48bb78; color: #fff; }
.cmd-desc { margin: 6px 0 0; font-size: 14px; }
.cmd-usage { margin: 6px 0 0; font-size: 13px; color: #4a5568; }
.cmd-usage code { background: #edf0f5; padding: 1px 6px; border-radius: 4px; }
/* 搜尋無結果的空狀態 */
.wiki-empty {
    border: 2px dashed #cbd5e0;
    border-radius: 10px;
    padding: 24px;
    text-align: center;
    color: #718096;
    font-size: 14px;
}

/* ---------- 數據統計卡（經濟頁） ---------- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin: 14px 0 20px;
}
.stat-card {
    background: #f9fafc;
    border: 1px solid #edf0f5;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    transition: box-shadow 0.15s, transform 0.15s;
}
.stat-card:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07); transform: translateY(-2px); }
.stat-icon { font-size: 26px; }
.stat-label { color: #4a5568; font-size: 13px; margin: 6px 0 4px; }
.stat-value { font-size: 20px; font-weight: 700; color: var(--brand-dark); }

/* ---------- 音樂表格：圓潤化 + 整格可點 + 可調欄寬 ---------- */
.music-table-wrap {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.music-table {
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}
.music-table th, .music-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #edf0f5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.music-table tbody tr:last-child td { border-bottom: none; }
.music-table th {
    background: #f7f8fc;
    position: relative;
    padding: 0;
    user-select: none;
}
/* 連結改為區塊填滿整個表頭儲存格，點擊格內任何位置都能排序 */
.music-table th a {
    display: block;
    padding: 10px 14px;
    color: #2d3748;
}
.music-table th a:hover {
    background: #eef0fe;
    color: var(--brand-dark);
    text-decoration: none;
}
/* 欄寬拖曳把手 */
.col-resizer {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: col-resize;
    z-index: 2;
}
.col-resizer:hover { background: rgba(88, 101, 242, 0.35); }

/* 歌曲列可點擊前往連結 */
.music-table tbody tr.clickable-row { cursor: pointer; }

/* 音樂名稱：明顯的連結外觀 */
.music-link {
    color: var(--brand-dark);
    font-weight: 600;
}
.music-link .link-icon {
    display: inline-block;
    margin-left: 6px;
    font-size: 12px;
    opacity: 0.55;
    transition: opacity 0.15s, transform 0.15s;
}
.music-table tbody tr.clickable-row:hover .music-link { text-decoration: underline; }

/* ==========================================================
   手機版適配（小裝置響應式設計）
   ========================================================== */
@media (max-width: 768px) {
    /* 頁首縮小 */
    .site-header { padding: 10px 14px; flex-wrap: wrap; gap: 6px; }
    .site-header .brand { font-size: 17px; }
    .site-header a { margin-left: 8px; }

    /* 側邊欄改為頂部橫向導覽列（連結變膠囊按鈕） */
    .layout { flex-direction: column; min-height: auto; }
    .side-nav {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        padding: 10px 12px;
    }
    .side-nav .nav-section {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        margin-bottom: 8px;
    }
    .side-nav .nav-section:last-child { margin-bottom: 0; }
    .side-nav .nav-title { padding: 0 6px 0 0; font-size: 12px; flex-shrink: 0; }
    .side-nav a {
        padding: 6px 12px;
        background: #f1f2f8;
        border-radius: 999px;
        font-size: 13px;
    }
    .side-nav a:hover { background: #e2e6fb; color: var(--brand-dark); padding-left: 12px; }
    .side-nav a::before { display: none; }

    /* 主內容與卡片 */
    .main-content { padding: 14px 12px; }
    .card { padding: 16px; max-width: 100%; }
    .auth-box { margin: 24px auto; padding: 20px; max-width: 100%; }

    /* Hero 區塊縮小 */
    .hero { padding: 18px; gap: 12px; max-width: 100%; }
    .hero-badge { width: 48px; height: 48px; font-size: 22px; }
    .hero h2 { font-size: 18px; }
    .wiki-hero { padding: 16px; }
    .wiki-hero h2 { font-size: 18px; }

    /* 表單：16px 字體防止 iOS 聚焦自動縮放，加大觸控目標 */
    form input[type="text"],
    form input[type="email"],
    form input[type="password"],
    form input[type="number"],
    form textarea,
    form select {
        font-size: 16px;
        padding: 10px 12px;
    }
    button, .btn { padding: 10px 18px; min-height: 40px; }

    /* 網格改單欄 */
    .wiki-index-grid, .stat-grid { grid-template-columns: 1fr; }

    /* 宣傳預覽：取消吸頂、嵌入預覽寬度撐滿 */
    .publicity-layout .preview-col { position: static; }
    .discord-embed, .embed-preview { max-width: 100%; }

    /* 檔案與宣傳清單：允許換行，按鈕可移到下一行 */
    .file-list li, .publicity-item { flex-wrap: wrap; }

    /* 音樂表格：橫向捲動、隱藏觸控難用的欄寬把手 */
    .music-table-wrap { overflow-x: auto; }
    .music-table { min-width: 560px; }
    .col-resizer { display: none; }

    /* Wiki：搜尋列貼頂、指令卡標頭可換行 */
    .wiki-search-wrap { top: 0; }
    .cmd-head { flex-wrap: wrap; }
    .cmd-usage code { word-break: break-all; }

    /* Toast 通知撐滿底部 */
    .toast-wrap { left: 12px; right: 12px; bottom: 12px; }
    .toast { text-align: center; }

    /* 拖拉上傳區縮小 */
    .drop-zone { padding: 16px 12px; }
}
.music-table tbody tr.clickable-row:hover .link-icon {
    opacity: 1;
    transform: translate(1px, -1px);
}