/* base.css (原 style.css 重新命名並合併原 styles.css 內容) */
/* ========== Global Base ========== */
body {
        font-family: 'Segoe UI', Arial, sans-serif;
        background-color: #23272a;
        color: #dcddde;
        margin: 0;
        padding: 0;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        min-height:100vh;
        display:flex;
        flex-direction:column;
        line-height:1.55;
}

/* Header / Navigation */
/* 原本使用 header, .main-header 造成所有內頁自訂 <header> (例如 Spotify 控制台內部區塊) 被強制套用 sticky + 漸層，導致排版錯亂。
   僅保留 .main-header（或未來若需要站點級 header，請使用 .site-header class）。 */
.main-header {
        background: linear-gradient(135deg, #23272a, #5865f2 80%);
        color: #fff;
        padding: 16px 0;
        text-align: center;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        position: sticky;
        top: 0;
        z-index: 1000;
}
/* 可選：統一站點級標題區域使用 .site-header （複製 .main-header 樣式）*/
.site-header {
        background: linear-gradient(135deg, #23272a, #5865f2 80%);
        color: #fff;
        padding: 16px 0;
        text-align: center;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        position: sticky;
        top: 0;
        z-index: 1000;
}
/* 覆寫 styles.css 內後段較亮版本 */
.main-header {
        background: linear-gradient(135deg, #7289DA, #5865F2);
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Legacy nav selectors (scoped to .legacy-nav to avoid clashing with new .site-nav) */
nav.legacy-nav, .main-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 32px;
        background: transparent;
        max-width: 1200px;
        margin: 0 auto;
        height: 60px;
}
.main-nav { padding: 0 20px; }

.legacy-nav .nav-brand, .main-nav .nav-brand { flex: 0 0 auto; }
.legacy-nav .nav-brand a, .main-nav .nav-brand a { color: #fff; font-size: 1.4rem; font-weight: bold; text-decoration: none; }

.legacy-nav .nav-container, .main-nav .nav-container { flex: 1; display: flex; justify-content: space-between; align-items: center; margin-left: 40px; }

.legacy-nav .nav-links, .main-nav .nav-links { display: flex; list-style: none; gap: 12px; margin: 0; padding: 0; }
.legacy-nav .nav-links li, .main-nav .nav-links li { margin: 0; }
.legacy-nav .nav-links a, .legacy-nav .nav-item, .main-nav .nav-links a, .main-nav .nav-item { color: #dcddde; text-decoration: none; display: block; padding: 10px 18px; border-radius: 6px; transition: background .2s, color .2s; font-weight: 500; }
.legacy-nav .nav-item, .main-nav .nav-item { padding: 8px 16px; gap: 8px; display: flex; align-items: center; }
.legacy-nav .nav-links a:hover, .legacy-nav .nav-item:hover, .main-nav .nav-links a:hover, .main-nav .nav-item:hover { background: #5865f2; color:#fff; }
.legacy-nav .nav-item:hover, .main-nav .nav-item:hover { background: rgba(255,255,255,0.1); }
.legacy-nav .nav-item i, .main-nav .nav-item i { font-size:1.1em; }

/* Dropdown 菜單 */
.dropdown { position: relative; }
.dropdown-toggle { cursor: pointer; }
.dropdown-menu { position: absolute; top:100%; right:0; background:#2f3136; color:#dcddde; border-radius:10px; box-shadow:0 2px 12px rgba(0,0,0,0.2); padding:20px; min-width:280px; display:none; flex-direction:column; align-items:flex-start; }
.dropdown-menu.show { display:flex; }
.dropdown-menu.business-card { display:flex; flex-direction:column; align-items:center; padding:20px; background:#2f3136; color:#dcddde; border-radius:10px; box-shadow:0 2px 12px rgba(0,0,0,0.2); }
.dropdown-menu .close-btn { display:none; }
.dropdown-menu .user-info { display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:16px; }
.dropdown-menu .card-avatar { width:80px; height:80px; border-radius:50%; margin-bottom:10px; border:2px solid #5865f2; }
.dropdown-menu .card-details { text-align:left; font-size:.9rem; color:#dcddde; }
.dropdown-menu .detail-item { margin-bottom:5px; }
.dropdown-menu .username { color:#fff; font-weight:600; font-size:1.2rem; }
.dropdown-menu .discord-id, .dropdown-menu .nickname, .dropdown-menu .email { color:#dcddde; font-size:.9rem; }
.dropdown-menu .admin-icon { color:#ffcc00; font-size:.9rem; display:flex; align-items:center; gap:4px; }
.dropdown-menu .logout-btn { background:#5865f2; color:#fff; padding:10px 20px; border-radius:6px; text-decoration:none; font-weight:500; width:100%; text-align:center; box-sizing:border-box; margin-top:10px; transition:background .2s; }
.dropdown-menu .logout-btn:hover { background:#4752c4; }

/* User / Profile */
.nav-user { margin-left:20px; }
.user-profile { display:flex; align-items:center; gap:12px; }
.user-avatar { width:32px; height:32px; border-radius:50%; }
.username { color:#fff; font-weight:500; }
.login-btn, .logout-btn { padding:10px 20px; border-radius:6px; text-decoration:none; font-weight:500; transition:background .2s; }
.login-btn { background:#fff; color:#5865F2; }
.logout-btn { background:rgba(217,255,0,0.1); color:#fff; }
.login-btn:hover, .logout-btn:hover { background:#4752c4; color:#fff; }

/* 主內容 */
main { padding:32px 16px; min-height:80vh; }
h1, h2 { color:#fff; }

/* 區塊卡片 */
.status, .logs, .reports, .admin-card { background:#2f3136; color:#dcddde; padding:24px; margin-bottom:24px; border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,0.15); max-width:900px; margin-left:auto; margin-right:auto; }

/* 表單元素 */
textarea, pre { width:100%; border:1px solid #40444b; background:#23272a; color:#dcddde; border-radius:6px; padding:12px; box-sizing:border-box; }

/* 按鈕 */
button, .dropdown-menu .logout-btn, .login-btn, .logout-btn { background:#5865f2; color:#fff; border:none; padding:10px 20px; cursor:pointer; border-radius:6px; font-weight:500; margin-right:10px; transition:background .2s; }
button:hover, .dropdown-menu .logout-btn:hover, .login-btn:hover, .logout-btn:hover { background:#4752c4; }
button { margin-right:10px; }

/* Sidebar / 管理側欄 */
.admin-sidebar { background:#23272a; color:#dcddde; border-right:1px solid #40444b; position:fixed; top:0; left:0; height:100%; width:220px; padding:24px 0; box-shadow:2px 0 8px rgba(0,0,0,0.08); }
.admin-main { margin-left:240px; }

/* 響應式 */
@media (max-width: 900px) {
    .admin-sidebar { position:static; width:100%; height:auto; border-right:none; box-shadow:none; }
    .admin-main { margin-left:0; }
}
@media (max-width: 768px) {
        nav.legacy-nav, .main-nav { flex-direction:column; padding:0 8px; height:auto; }
    .nav-links { flex-direction:column; width:100%; gap:0; }
    .nav-links a, .nav-item { padding:12px 0; text-align:center; }
    .hamburger { display:flex; }
    .admin-sidebar { width:100%; padding:12px 0; }
    .admin-main { margin-left:0; }
        .nav-container { display:none; position:absolute; top:60px; left:0; right:0; background:#7289DA; padding:20px; flex-direction:column; align-items:stretch; }
    .nav-container.active { display:flex; }
    .dropdown-menu { position:static; background:rgba(255,255,255,0.1); box-shadow:none; }
    .dropdown-menu a { color:#fff; }
}

/* Hamburger */
.hamburger { display:none; flex-direction:column; justify-content:space-between; width:30px; height:20px; background:transparent; border:none; cursor:pointer; padding:0; }
.hamburger span, .hamburger div { width:28px; height:3px; background:#fff; margin:4px 0; border-radius:2px; transition:all .3s; }

/* 滾動條樣式（保留原 base.css） */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-thumb { background-color:rgba(255,255,255,0.2); border-radius:3px; }

/* 可擴充自訂區域占位 */
/* ===== End of merged styles ===== */
.alert { transition: opacity .4s ease, transform .4s ease; }
.alert.fade-out { opacity:0 !important; transform: translateY(-6px); }

/* Flash container spacing tweak */
#flash-container { animation: fadeIn .4s ease; }

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

/* Utility spacing */
.mt-2x { margin-top:1.25rem !important; }
.mb-2x { margin-bottom:1.25rem !important; }
.py-2x { padding-top:1.25rem !important; padding-bottom:1.25rem !important; }

/* Text helpers */
.text-faded { color:#b9bbbe !important; }
.text-accent { color:#5865f2 !important; }

/* Card elevation utilities */
.elev-1 { box-shadow:0 1px 2px rgba(0,0,0,.2); }
.elev-2 { box-shadow:0 4px 12px rgba(0,0,0,.25); }

/* Smooth hover lift */
.lift-hover { transition: transform .25s ease, box-shadow .25s ease; }
.lift-hover:hover { transform: translateY(-3px); box-shadow:0 6px 18px rgba(0,0,0,.35); }

/* Slim container variant */
.container-narrow { max-width:860px; margin:0 auto; }

/* Footer refine */
footer.footer a:hover { color:#fff !important; }

/* Accessible focus outline */
:focus-visible { outline:2px solid #5865f2; outline-offset:2px; }

/* Button subtle variant */
.btn-subtle { background:rgba(255,255,255,0.07); color:#fff; }
.btn-subtle:hover { background:rgba(255,255,255,0.15); }

/* Responsive tune */
@media (max-width: 576px){
        .navbar-brand { font-size: .95rem; }
        .footer .row > div { text-align:center !important; }
        .user-avatar { margin-right:4px; }
}

/* Theme root (migrated) */
:root { color-scheme: dark; }

/* Progress/Loading skeleton */
.skeleton { position:relative; overflow:hidden; background:#2f3136; }
.skeleton::after { content:""; position:absolute; inset:0; background: linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.08) 40%, rgba(255,255,255,0) 80%); animation: skeleton 1.4s ease-in-out infinite; }
@keyframes skeleton { 0% { transform: translateX(-100%);} 100% { transform: translateX(100%);} }

/* Notification container (to align with JS) */
#notification-container .notification { font-size:.9rem; }

/* ========== Moved from base.html inline styles ========== */
:root {
        --primary-color: #5865F2;
        --bg-dark: #36393f;
        --bg-darker: #2f3136;
        --bg-lightest: #40444b;
        --text-light: #dcddde;
        --text-muted: #b9bbbe;
}

/* 移除 body.app-root，直接套用在 body 基礎樣式 */

.navbar { background-color: var(--bg-darker); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.navbar-brand { font-weight: bold; color:#fff; }
.nav-link { color: var(--text-muted); transition: color .2s; }
.nav-link:hover, .nav-link.active { color:#fff; }
.nav-link.active { font-weight:500; }

.dropdown-menu { background-color: var(--bg-darker); border-color:#202225; }
.dropdown-item { color: var(--text-muted); }
.dropdown-item:hover { background-color: var(--bg-lightest); color:#fff; }

.card { background-color: var(--bg-darker); border:none; border-radius:8px; box-shadow:0 2px 4px rgba(0,0,0,0.1); margin-bottom:20px; }
.card-header { background-color:rgba(0,0,0,0.1); border-bottom:1px solid rgba(255,255,255,0.05); font-weight:bold; }

.footer { margin-top:auto; background-color:var(--bg-darker); padding:20px 0 calc(20px + var(--safe-bottom)); border-top:1px solid rgba(255,255,255,0.05); }
.main-content { width:100%; max-width:1180px; margin:0 auto; padding-left:1.2rem; padding-right:1.2rem; flex:1 0 auto; }
/* Provide soft rounded wrapper feel */
.main-content > section, .main-content > .card, .main-content > form, .main-content > div.card { border-radius:14px; }
@media (max-width: 576px){ .main-content > section, .main-content > .card { border-radius:10px; } }
/* Normalize common section/card wrappers to align with main-content */
.main-content .card,
.main-content section,
.main-content .status,
.main-content .logs,
.main-content .reports,
.main-content .admin-card { max-width:100%; }
.main-content section { margin-bottom:2rem; }
.main-content section:last-child { margin-bottom:1rem; }

/* Legal pages wrapper */
.legal-wrapper { max-width:980px; margin:0 auto 2.5rem; }
.legal-wrapper .card { background: var(--bg-darker, #2f3136); }
.legal-wrapper h1 { text-align:center; }
.legal-wrapper h2 { margin-top:2.2em; font-size:1.15rem; text-transform:uppercase; letter-spacing:.5px; opacity:.95; }

/* Provide a generic responsive row utility */
.row-flex { display:flex; flex-wrap:wrap; gap:1.25rem; }
.row-flex > * { flex:1 1 320px; }

main.main-content > *:first-child { margin-top: .25rem; }
main.main-content > *:last-child { margin-bottom: .5rem; }

/* Typography */
h1,h2,h3,h4 { font-weight:600; line-height:1.25; letter-spacing:.5px; }
h1 { font-size:clamp(1.9rem, 2.4vw + 1rem, 2.6rem); margin:.2em 0 .6em; }
h2 { font-size:clamp(1.4rem, 1.5vw + .9rem, 2.0rem); margin:1.4em 0 .55em; }
h3 { font-size:1.25rem; margin:1.2em 0 .5em; }
p { margin:0 0 1em; }
ul,ol { padding-left:1.3em; margin-top:0; margin-bottom:1em; }
li + li { margin-top:.25em; }

code, pre, kbd { font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; font-size:.9em; }
pre { background:#1f2022; padding:1rem; border-radius:8px; overflow:auto; }
code { background:rgba(255,255,255,0.08); padding:.15em .45em; border-radius:4px; }

blockquote { margin:1.2em 0; padding:.75em 1em; border-left:4px solid #5865f2; background:rgba(88,101,242,0.07); border-radius:4px; }

table { width:100%; border-collapse:collapse; }
table th, table td { padding:.6em .75em; border:1px solid #34373c; }
table th { background:#2f3136; font-weight:600; }
table tr:nth-child(even) td { background:#2a2c30; }

/* Improved navbar spacing */
.navbar .nav-link { padding:.55rem .9rem; }
.navbar-nav { align-items:center; }

/* Form elements */
input[type=text], input[type=password], input[type=email], select { background:#2b2d31; border:1px solid #3a3d42; color:#fff; padding:.55rem .75rem; border-radius:6px; width:100%; box-sizing:border-box; }
input:focus, select:focus, textarea:focus { outline:none; border-color:#5865f2; box-shadow:0 0 0 2px rgba(88,101,242,0.35); }

/* Cards refine */
.card { transition: box-shadow .25s ease, transform .25s ease; }
.card:hover { box-shadow:0 6px 20px rgba(0,0,0,.35); transform:translateY(-2px); }

/* Layout helpers */
.grid { display:grid; gap:1.25rem; }
.grid-2 { grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); }

/* --- Public notes card layout fixes (避免內容高度不一致與未閉合標籤破壞布局) --- */
.row-flex { align-items:stretch; }
.row-flex > [class*='col-'] { display:flex; }
.row-flex .card { display:flex; flex-direction:column; }
.row-flex .card .card-body { display:flex; flex-direction:column; }
.row-flex .card .note-content-preview { flex:0 0 auto; }
.row-flex .card a.btn { margin-top:auto; }
/* 確保預覽不會撐破高度造成 footer 被推離 (以文字形式顯示，已在後端移除 HTML) */
.note-content-preview { word-wrap:break-word; overflow:hidden; }

/* Clamp container variant for very large screens */
@media (min-width: 1600px){
        .main-content { max-width:1400px; }
}

/* Small screen tweaks */
@media (max-width: 768px){
        .main-content { padding-left:.9rem; padding-right:.9rem; }
        h1 { font-size:clamp(1.7rem, 5vw + 1rem, 2.2rem); }
        h2 { font-size:clamp(1.25rem, 3.5vw + .8rem, 1.7rem); }
}

.btn-primary { background-color:var(--primary-color); border-color:var(--primary-color); }
.btn-primary:hover { background-color:#4752c4; border-color:#4752c4; }
.btn-outline-primary { color:var(--primary-color); border-color:var(--primary-color); }
.btn-outline-primary:hover { background-color:var(--primary-color); border-color:var(--primary-color); }

.table { color:var(--text-light); }
.table-dark { background-color:var(--bg-darker); }

.user-avatar { width:32px; height:32px; border-radius:50%; margin-right:8px; }

/* Custom scrollbar (already some global scrollbar above; keep unified) */
/* Duplicate selectors avoided to prevent override churn */

/* ================= Mobile Navbar Fixes (2025-08) =================
   修正：手機版導覽列下拉次選單仍套用桌面浮動樣式，導致置中漂浮 / 遮住內容。
   作法：在 <992px 時，針對 .navbar-nav 內的 .dropdown-menu (nav-submenu) 做重置，
                 改為佔滿可用寬度、靜態定位、透明背景並消除陰影與邊框。
                 同時調整內距與項目間距，確保與既有自訂 .nav-submenu 行為一致。 */
@media (max-width: 991.98px){
        .navbar-nav .dropdown-menu.nav-submenu { /* 更精準鎖定 nav-submenu 避免影響其他可能的 dropdown */
                position: static !important; /* 移除 bootstrap 絕對定位 */
                inset: auto !important; /* 清除 top/left 等 */
                transform: none !important;
                width: 100%;
                min-width: 0;
                margin: .25rem 0 .65rem 0; /* 與上/下項拉開一點 */
                padding: .25rem 0 .55rem;  /* 精簡內距 */
                background: transparent;   /* 與父容器融合，由 nav-collapse 背景提供底色 */
                border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter:none;
        }
        .navbar-nav .dropdown-menu.nav-submenu .dropdown-item { /* 手機項目寬度與主列對齊 */
                padding: .6rem .95rem; border-radius: 10px; font-size: .95rem; line-height:1.25;
        }
        .navbar-nav .dropdown-menu.nav-submenu .dropdown-item + .dropdown-item { margin-top:2px; }
        /* 標題（若有）縮小並與主體對齊 */
        .navbar-nav .dropdown-menu.nav-submenu .dropdown-header { padding:.4rem .95rem .25rem; font-size:.7rem; letter-spacing:.5px; opacity:.7; }
        /* Divider 縮短並降低可視重量 */
        .navbar-nav .dropdown-menu.nav-submenu .dropdown-divider { margin:.55rem .65rem; opacity:.25; }
}
/* ================================================================= */
/* Desktop nav interaction fix (2025-08): ensure dropdown sits above other content */
@media (min-width: 992px){
        .nav-item.dropdown > .nav-submenu { z-index: 1200; position:absolute; }
        .nav-item.dropdown > .nav-link.dropdown-toggle { position:relative; z-index:1225; pointer-events:auto; }
        .nav-item.dropdown.open > .nav-link.dropdown-toggle { pointer-events:auto; }
        .nav-item.dropdown > .nav-submenu { pointer-events:auto; }
}
/* === Migrated from base.html inline <style> (navigation redesign) === */
:root { --nav-height: 66px; --actual-nav-height: 66px; }
@media (max-width: 576px){ :root { --nav-height: 60px; } }
/* 包含 safe-top 以避免 PWA / iOS Safari 狀態列遮住內容 */
body.has-fixed-nav { padding-top: calc(var(--actual-nav-height, var(--nav-height)) + var(--safe-top)); }
/* Safe-area variables (fallback 0) */
:root { 
        --safe-top: env(safe-area-inset-top, 0px); 
        --safe-right: env(safe-area-inset-right, 0px); 
        --safe-bottom: env(safe-area-inset-bottom, 0px); 
        --safe-left: env(safe-area-inset-left, 0px);
}
body { padding-left: max(var(--safe-left),0); padding-right: max(var(--safe-right),0); }
/* Brand / logo */
.navbar-brand { display:flex; align-items:center; gap:.45rem; font-size:1.05rem; font-weight:600; }
.navbar-brand .site-logo { height:38px; width:auto; border-radius:10px; box-shadow:0 0 0 2px rgba(255,255,255,.07); object-fit:cover; background:#222; }
@media (max-width: 576px){ .navbar-brand .site-logo{ height:32px; } }
@media (min-width: 992px){ .navbar-brand { font-size:1.15rem; } }
/* Prevent image drag ghost interfering */
.navbar-brand img { -webkit-user-drag:none; user-select:none; }
@media (min-width: 992px){ .navbar-brand { font-size:1.15rem; } }
.skip-link { position:absolute; left:0; top:-40px; background:#5865f2; color:#fff; padding:.6rem 1rem; z-index:2000; border-radius:0 0 6px 0; text-decoration:none; transition: top .25s; font-weight:500; }
.skip-link:focus { top:0; }
/* Desktop submenu (custom, not Bootstrap) */
@media (min-width: 992px){
        .nav-item.dropdown { position:relative; }
        .nav-item.dropdown > .nav-submenu { position:absolute; top:100%; left:0; min-width:230px; padding:.55rem .55rem .7rem; display:none !important; background:rgba(32,34,37,.95); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.08); border-radius:14px; box-shadow:0 12px 32px -10px rgba(0,0,0,.65); }
        .nav-item.dropdown.open > .nav-submenu { display:block !important; animation: dropdownFade .18s ease; }
        .nav-submenu .dropdown-item { padding:.5rem .75rem; font-size:.85rem; }
        .nav-submenu .dropdown-item.active { background:#5865f2; color:#fff; }
        .nav-submenu .dropdown-header { font-size:.65rem; opacity:.6; padding:.35rem .4rem; }
        @keyframes dropdownFade { from { opacity:0; transform: translateY(4px);} to { opacity:1; transform: translateY(0);} }
}
/* PWA Standalone adjustments - Simplified for better compatibility */
@media (display-mode: standalone) { 
	body.has-fixed-nav { 
		padding-top: calc(var(--nav-height) + env(safe-area-inset-top, 0px) + 16px); 
	}
	
	.site-nav { 
		padding-top: calc(.5rem + env(safe-area-inset-top, 0px)); 
		padding-left: calc(.5rem + env(safe-area-inset-left, 0px)); 
		padding-right: calc(.5rem + env(safe-area-inset-right, 0px)); 
	}
	
	.nav-drawer { 
		padding-top: env(safe-area-inset-top, 0px); 
	}
	
	.drawer-scroll { 
		padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); 
	}
	
	.nav-backdrop { 
		padding-top: env(safe-area-inset-top, 0px); 
	}
	
	.site-nav .navbar-brand .brand-text { 
		max-width:clamp(140px,26vw,320px); 
	}
	
	.nav-hamburger { 
		margin-top: max(0px, env(safe-area-inset-top, 0px) * 0.15); 
	}
}

/* Enhanced Tablet PWA Support - Simplified */
@media (display-mode: standalone) and (min-width: 768px) and (max-width: 1024px) {
	/* Tablet-specific adjustments for better touch experience */
	.site-nav .navbar-brand .brand-text { 
		max-width: 360px;
		font-size: 1.05rem;
	}
	
	/* Better tap targets for tablets */
	.nav-primary .nav-link {
		min-height: 44px;
		padding: .65rem 1rem;
		font-size: .95rem;
	}
	
	/* Ensure dropdown menus are properly positioned */
	.nav-dropdown, .dropdown-menu {
		top: calc(100% + 4px);
	}
}

/* Removed redundant pwa-ipad class styles - using media queries instead */

/* Landscape mode optimizations for tablets */
@media (display-mode: standalone) and (orientation: landscape) and (min-width: 768px) {
        .site-nav {
                height: calc(var(--nav-height) + var(--safe-top));
        }
        /* Reduce vertical padding in landscape to maximize content area */
        body.has-fixed-nav {
                padding-top: calc(var(--nav-height) + var(--safe-top) + 8px);
        }
        .main-content {
                padding-top: 1rem;
                padding-bottom: 1rem;
        }
}

/* Large tablet and small desktop PWA adjustments */
@media (display-mode: standalone) and (min-width: 992px) {
        .site-nav {
                padding-left: calc(1rem + var(--safe-left));
                padding-right: calc(1rem + var(--safe-right));
        }
        /* Full navigation layout on larger screens */
        .nav-primary { display: flex !important; }
        .nav-hamburger { display: none !important; }
}
/* 100vh iOS 後退列修正：使用動態視窗單位避免可視高度跳動 */
.vh-100d { min-height:100dvh; }
/* 底部空間保留用於有系統手勢列裝置 */
.pwa-standalone .needs-bottom-safe { padding-bottom: calc(1rem + var(--safe-bottom)); }
/* === Safe Bottom Utilities (iPhone 手勢列 / PWA 底部工具列預留) === */
.safe-bottom-pad { padding-bottom: calc(var(--safe-bottom)); }
.safe-bottom-pad-sm { padding-bottom: calc(.5rem + var(--safe-bottom)); }
.safe-bottom-pad-lg { padding-bottom: calc(1.5rem + var(--safe-bottom)); }
.fixed-bottom-safe { position:fixed; left:0; right:0; bottom:0; padding-bottom: calc(.5rem + var(--safe-bottom)); }
@media (min-width: 992px){
        /* 桌面裝置通常沒有 safe-area-bottom；避免多餘空白，可稍微縮減 */
        .fixed-bottom-safe { padding-bottom:.75rem; }
}
/* 僅在 display-mode:standalone / 窄螢幕時加強 (防止 Safari UI 已顯示時過多空白) */
@media (display-mode: standalone) and (max-width: 991.98px){
        .footer { padding-bottom: calc(28px + var(--safe-bottom)); }
}
/* === End migrated styles === */
/* ================= New Unified Navigation (2025-08 Refactor) ================= */
.site-nav { --nav-bg: rgba(30,32,36,0.72); --nav-border: rgba(255,255,255,0.06); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); background: var(--nav-bg); border-bottom:1px solid var(--nav-border); padding:.4rem 0; transition:background .35s ease, box-shadow .35s ease, transform .5s ease; z-index:1200; }
.no-backdrop .site-nav { background:#2b2d31; }
.site-nav .navbar-brand { font-size:1.05rem; font-weight:600; letter-spacing:.5px; }
.site-nav .navbar-brand .brand-text { white-space:nowrap; transition:opacity .4s ease, transform .45s ease; }
.site-nav.brand-collapsed .brand-text { opacity:0; transform:translateY(-6px); pointer-events:none; }
.nav-inner { min-height:var(--nav-height); }
/* Layout refinement (2025-08 mobile/desktop unify) */
.nav-inner { display:flex; flex-wrap:nowrap; gap:.35rem; }
/* Desktop full-width nav: override Bootstrap container constraints inside .site-nav */
.site-nav .nav-inner.container { max-width: none; width: 100%; }
@media (min-width: 992px){
        .site-nav .nav-inner { padding-left: clamp(16px, 2.4vw, 28px); padding-right: clamp(16px, 2.4vw, 28px); }
}
/* Desktop layout sizing fix: prevent wrapping and reserve space correctly */
.site-nav .navbar-brand { flex:0 0 auto; }
.site-nav .nav-primary { flex:1 1 auto; min-width:0; display:flex; align-items:center; }
.site-nav .nav-user { flex:0 0 auto; display:flex; align-items:center; }
.site-nav .nav-primary .nav-list { flex-wrap:nowrap; align-items:center; }
.nav-primary .nav-list { gap:.15rem; }
.navbar-brand .brand-text { display:inline-block; max-width:clamp(120px,22vw,260px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-link { position:relative; color:#c9ccd1; font-weight:500; padding:.55rem .9rem; border-radius:10px; line-height:1.1; display:inline-flex; align-items:center; gap:.35rem; transition:background .25s,color .25s; }
.nav-link:hover, .nav-link:focus { background:rgba(255,255,255,0.09); color:#fff; text-decoration:none; }
.nav-link.active { background:linear-gradient(135deg,#5865f2,#4752c4); color:#fff !important; box-shadow:0 4px 14px -4px rgba(0,0,0,.45); }
.nav-has-children { position:relative; }
.nav-has-children > .nav-link .angle { font-size:.85em; transition:transform .35s ease; }
.nav-has-children.open > .nav-link .angle { transform:rotate(180deg); }
.nav-dropdown { position:absolute; top:calc(100% + 6px); left:0; min-width:280px; background:#2f3136; border:1px solid rgba(255,255,255,0.07); border-radius:14px; padding:.85rem .9rem .9rem; box-shadow:0 18px 42px -12px rgba(0,0,0,.55); display:none; animation:navDropFade .35s cubic-bezier(.4,.2,.2,1); z-index:1500; max-width: min(92vw, 420px); overflow-wrap: anywhere; }
.nav-has-children:last-child > .nav-dropdown:not(.nav-dropdown-end){ left:auto; right:0; }
@media (min-width: 992px){
        /* 防止超出視窗：若 dropdown 超出右側則向左移動  */
        .nav-has-children > .nav-dropdown { transform-origin: top left; }
        .nav-has-children > .nav-dropdown[data-align-fix="right"] { left:auto; right:0; }
}
.nav-dropdown.nav-dropdown-end { left:auto; right:0; }
.nav-has-children.open > .nav-dropdown { display:block; }
@keyframes navDropFade { from {opacity:0; transform:translateY(8px) scale(.97);} to {opacity:1; transform:translateY(0) scale(1);} }
.nav-dropdown .dropdown-item { display:flex; align-items:center; gap:.55rem; padding:.55rem .65rem; border-radius:8px; font-size:.92rem; color:#d2d4d7; text-decoration:none; transition:background .25s,color .25s; }
.nav-dropdown .dropdown-item:hover, .nav-dropdown .dropdown-item:focus, .nav-dropdown .dropdown-item.active { background:#5865f2; color:#fff; }
.nav-dropdown .dropdown-sep { margin:.55rem 0; border-top:1px solid rgba(255,255,255,0.08); }
.nav-dropdown .dropdown-section { font-size:.7rem; letter-spacing:.5px; text-transform:uppercase; opacity:.75; }
.nav-dropdown .dropdown-section + .dropdown-section { margin-top:.35rem; }
.nav-dropdown .dropdown-section:not(:first-child) { padding-top:.25rem; }
/* Utility: visually hidden (for a11y; may be used by injected nav items) */
.visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important; }
/* Overflow (更多) 收納選單指示 */
.nav-overflow > .nav-link { font-weight:600; }
.nav-overflow:not(.d-none) { display:flex !important; }
.nav-overflow .angle { transition:transform .35s ease; }
.nav-overflow.open .angle { transform:rotate(180deg); }
.nav-overflow-badge { position:absolute; top:4px; right:4px; background:#ff784e; color:#fff; font-size:10px; padding:2px 5px; border-radius:10px; line-height:1; font-weight:600; box-shadow:0 2px 6px -2px rgba(0,0,0,.5); }
.nav-hamburger { width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.1); display:inline-flex; flex-direction:column; justify-content:center; gap:5px; padding:4px 9px; cursor:pointer; transition:background .3s,border-color .3s,box-shadow .3s; position:relative; z-index:1400; }
.nav-hamburger span { display:block; width:100%; height:3px; background:#fff; border-radius:2px; transition:transform .45s cubic-bezier(.65,.05,.36,1), opacity .3s; }
.nav-hamburger:focus-visible { outline:2px solid #5865f2; outline-offset:3px; }
.nav-hamburger.open { background:linear-gradient(135deg,#5865f2,#4752c4); box-shadow:0 6px 24px -6px rgba(0,0,0,.55); }
.nav-hamburger.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2){ opacity:0; }
.nav-hamburger.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
.nav-drawer { position:fixed; top:0; left:0; height:100dvh; width:300px; max-width:82%; background:rgba(32,34,38,0.9); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-right:1px solid rgba(255,255,255,0.07); box-shadow:0 10px 50px -12px rgba(0,0,0,.65); transform:translateX(-102%); transition:transform .55s cubic-bezier(.74,-0.01,.24,1); z-index:1350; display:flex; flex-direction:column; }
.no-backdrop .nav-drawer { background:#26282c; }
.nav-drawer.open { transform:translateX(0); }
.drawer-scroll { overflow-y:auto; -webkit-overflow-scrolling:touch; padding:1.05rem 1rem 2.5rem; }
.drawer-brand .site-logo { border-radius:12px; box-shadow:0 0 0 2px rgba(255,255,255,.06); }
.drawer-link, .drawer-toggle { width:100%; display:flex; align-items:center; gap:.65rem; background:transparent; border:none; color:#d4d6da; padding:.7rem .65rem; border-radius:10px; font-size:.95rem; font-weight:500; text-align:left; cursor:pointer; text-decoration:none; transition:background .25s,color .25s; }
.drawer-link:hover, .drawer-toggle:hover, .drawer-link:focus, .drawer-toggle:focus { background:rgba(255,255,255,0.1); color:#fff; text-decoration:none; }
.drawer-link.active { background:linear-gradient(135deg,#5865f2,#4752c4); color:#fff; box-shadow:0 4px 16px -6px rgba(0,0,0,.5); }
.drawer-toggle .angle { transition:transform .4s ease; margin-left:auto; }
.drawer-toggle[aria-expanded="true"] .angle { transform:rotate(180deg); }
.drawer-group + .drawer-group { margin-top:.35rem; }
.drawer-sub { padding:.4rem 0 .6rem .35rem; animation:drawerSub .4s ease; }
@keyframes drawerSub { from { opacity:0; transform:translateY(-4px);} to { opacity:1; transform:translateY(0);} }
.drawer-sublink { display:flex; align-items:center; gap:.6rem; padding:.55rem .6rem; margin:.15rem 0; border-radius:8px; color:#cdd0d4; font-size:.88rem; text-decoration:none; transition:background .25s,color .25s; }
.drawer-sublink:hover, .drawer-sublink:focus { background:rgba(255,255,255,0.1); color:#fff; }
.drawer-sublink.active { background:#5865f2; color:#fff; }
.sub-heading { font-size:.66rem; letter-spacing:.5px; text-transform:uppercase; opacity:.7; margin:.75rem 0 .35rem; padding-left:.4rem; }
.user-mini .user-avatar { border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,.08); }
.nav-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.35); backdrop-filter:blur(2px); opacity:0; visibility:hidden; transition:opacity .45s ease; z-index:1100; }
.nav-backdrop.show { opacity:1; visibility:visible; }
body.nav-drawer-open { overflow:hidden; }
@media (max-width: 991.98px){ .nav-primary, .nav-user { display:none !important; } }
@media (min-width: 992px){ .nav-hamburger, .nav-drawer, .nav-backdrop { display:none !important; } }
.nav-drawer :focus-visible { outline:2px solid #5865f2; outline-offset:2px; }
/* ==================================================================== */

/* ======== PWA iPhone / Mobile override: 僅保留漢堡按鈕 (2025-08) ======== */
@media (max-width: 991.98px){
        .pwa-standalone .site-nav.keep-hamburger-only,
        body.pwa-force-hamburger-only .site-nav { backdrop-filter:none; -webkit-backdrop-filter:none; background:#23272a; }
        .pwa-standalone .site-nav.keep-hamburger-only .navbar-brand,
        body.pwa-force-hamburger-only .site-nav .navbar-brand,
        .pwa-standalone .site-nav.keep-hamburger-only .nav-primary,
        body.pwa-force-hamburger-only .site-nav .nav-primary,
        .pwa-standalone .site-nav.keep-hamburger-only .nav-user,
        body.pwa-force-hamburger-only .site-nav .nav-user { display:none !important; }
        .pwa-standalone .site-nav.keep-hamburger-only .nav-hamburger,
        body.pwa-force-hamburger-only .site-nav .nav-hamburger { position:fixed; top:calc(var(--safe-top) + 8px); right:14px; box-shadow:0 4px 18px -6px rgba(0,0,0,.55); background:#5865f2; border-color:rgba(255,255,255,0.25); }
        .pwa-standalone .site-nav.keep-hamburger-only + .nav-backdrop { top:0; }
        .pwa-standalone body.has-fixed-nav { padding-top: calc(52px + var(--safe-top)); }
}


/* Mobile scroll collapse: hide brand to free vertical space, keep only hamburger */
@media (max-width: 991.98px){
        .site-nav { will-change: transform, background, padding; }
        .site-nav .navbar-brand { transition: all .5s cubic-bezier(.65,.05,.36,1); }
        .site-nav.nav-compact { padding:.15rem 0; }
        .site-nav.nav-compact .navbar-brand { opacity:0; transform:translateY(-14px) scale(.92); max-width:0; margin:0; padding:0; overflow:hidden; pointer-events:none; }
        /* When drawer is open, ensure brand stays visible (override) */
        body.nav-drawer-open .site-nav.nav-compact .navbar-brand { opacity:1; transform:none; max-width:100%; margin-right:var(--bs-gutter-x, .75rem); pointer-events:auto; }

        /* 全隱藏模式：整個頂欄上滑離開，僅保留漢堡固定在右上角 */
        .site-nav.nav-hidden-full { transform: translateY(calc(-1 * (var(--nav-height) + var(--safe-top) + 4px))); }
        .site-nav.nav-hidden-full .navbar-brand,
        .site-nav.nav-hidden-full .nav-primary,
        .site-nav.nav-hidden-full .nav-user { opacity:0; pointer-events:none; }
        .site-nav.nav-hidden-full .nav-hamburger { position:fixed; top:10px; right:14px; transform:scale(.9); box-shadow:0 4px 18px -6px rgba(0,0,0,.55); background:linear-gradient(135deg,#5865f2,#4752c4); border-color:rgba(255,255,255,0.2); }
        .site-nav.nav-hidden-full .nav-hamburger.open { top:12px; transform:scale(1); }
        body.nav-drawer-open .site-nav.nav-hidden-full { transform:none; }
        body.nav-drawer-open .site-nav.nav-hidden-full .navbar-brand,
        body.nav-drawer-open .site-nav.nav-hidden-full .nav-primary,
        body.nav-drawer-open .site-nav.nav-hidden-full .nav-user { opacity:1; pointer-events:auto; }
}
@media (prefers-reduced-motion: reduce){
        .site-nav .navbar-brand, .site-nav.nav-compact .navbar-brand { transition:none !important; }
}

/* ================= Desktop Full-Width Overrides (2025-08) =================
   目的：在桌面寬度時移除各頁常見容器的 max-width 限制，讓頁面可佔滿可視寬度。
   範圍：不影響行動裝置斷點（< 992px）。若單頁需要維持窄版，可於該頁額外覆寫。 */
@media (min-width: 992px){
        /* Bootstrap container 系列：桌面改為全寬 */
        .container, .container-lg, .container-xl, .container-xxl { max-width: none !important; width: 100% !important; }
        /* 主要內容殼 */
        .main-content { max-width: none !important; width: 100% !important; }
        /* 舊導覽容器（避免 1200px 夾限） */
        nav.legacy-nav, .main-nav { max-width: none !important; width: 100% !important; margin-left: 0; margin-right: 0; }
        /* 常見卡片/版塊容器 */
        .status, .logs, .reports, .admin-card { max-width: none !important; width: 100% !important; }
        /* 法務/說明頁殼與窄版容器 */
        .legal-wrapper, .container-narrow { max-width: none !important; width: 100% !important; }
        /* 各設定 / 功能頁常見外層容器 */
        .settings-container,
        .notify-settings-container,
        .discord-bind-container,
        .security-settings-container,
        .advanced-container,
        .file-viewer-wrapper { max-width: none !important; width: 100% !important; }
}
/* ======================================================================== */