/* ============================================================
   後台樣式 — 夜讀燈下系（2026-05-01 v2，與前台對齊）
   ----------------------------------------------------------------
   設計敘事：與前台同氣質的書房暖夜
     深墨綠書桌 + 米黃檯燈光 + 暖陶（落日）點綴
   ADR：docs/spec/decisions/2026-05-01-admin-palette-realign-with-site.md
   ============================================================ */

:root {
    /* 底色（與前台同：solid 深墨綠，不再用 Twilight 漸層） */
    --bg:              #1a2421;

    /* 半透明面板（深墨綠透色 + 米黃 tint border，玻璃感） */
    --panel-bg:        rgba(15, 22, 20, 0.72);
    --panel-bg-strong: rgba(12, 18, 16, 0.86);
    --panel-bg-soft:   rgba(232, 216, 184, 0.04);
    --panel-border:    rgba(232, 216, 184, 0.10);
    --panel-border-strong: rgba(232, 216, 184, 0.18);
    --panel-radius:    8px;
    --panel-blur:      blur(12px) saturate(120%);

    /* 文字（米黃為主，與前台 #e8d8b8 對齊） */
    --text-primary:   #e8d8b8;
    --text-secondary: rgba(232, 216, 184, 0.72);
    --text-muted:     rgba(232, 216, 184, 0.48);

    /* Dashboard 磚塊（4 色協調：暖陶 + 苔綠 + 蜜金 + 暖紫） */
    /* CSS class 名沿用，但改為以「序號」理解；色號標註實際色相 */
    --tile-blue:     #c79572;   /* 文章 — 暖陶（同 site accent） */
    --tile-green:    #7a9b7e;   /* 媒體 — 苔綠 */
    --tile-terra:    #d4a96b;   /* About — 蜜金 */
    --tile-lavender: #9c7d8f;   /* 前台 — 暖紫 */
    /* 為何另加 amber / rose：dashboard 改 4 磚塊後，專案磚塊與待辦任務需與既有 4 色區別
       - amber：較飽和的蜜橙，凸顯「專案」主軸
       - rose：暖紅，僅在「待辦任務 > 0」時提示需要關注 */
    --tile-amber:    #c79452;
    --tile-rose:     #b8615e;
    /* teal：企畫模組專用，與專案 amber 區別 */
    --tile-teal:     #4a9585;

    /* Accent（連結、active、focus）— 與前台 site accent 一致 */
    --accent:        #c79572;
    --accent-strong: #dab09a;

    /* 狀態色（保留偏冷的綠/紅，與米黃主調共存） */
    --success-bg:   rgba(122, 155, 126, 0.22);
    --success-text: #b9d6bd;
    --error-bg:     rgba(200, 74, 74, 0.22);
    --error-text:   #f0b0b0;
    --draft-bg:     rgba(232, 216, 184, 0.10);
    --draft-text:   rgba(232, 216, 184, 0.70);
    --published-bg: rgba(122, 155, 126, 0.30);
    --published-text: #c8e0cc;

    --topbar-height: 48px;
    --sidebar-width: 220px;
    --sidebar-width-collapsed: 64px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC",
                 "PingFang TC", "Microsoft JhengHei", sans-serif;
    color: var(--text-primary);
    background: var(--bg);
    line-height: 1.6;
    min-height: 100vh;
    /* 暖燈微光：右上角極淡暖陶輻射，仿檯燈光暈，避免純單色過於平板 */
    background-image:
        radial-gradient(ellipse at 85% 0%, rgba(199, 149, 114, 0.07), transparent 55%),
        radial-gradient(ellipse at 0% 100%, rgba(122, 155, 126, 0.05), transparent 55%);
    background-attachment: fixed;
}

a { color: var(--accent-strong); text-decoration: none; }
a:hover { color: #ffffff; text-decoration: underline; }

/* ============================================================
   登入頁
   ============================================================ */
body.admin-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    /* 沿用 body 的漸層底 */
}

.login-card {
    background: var(--panel-bg);
    -webkit-backdrop-filter: var(--panel-blur);
    backdrop-filter: var(--panel-blur);
    border: 1px solid var(--panel-border);
    padding: 36px 32px;
    border-radius: 12px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.40);
    color: var(--text-primary);
}

.login-card h1 {
    margin: 0 0 28px;
    font-size: 22px;
    text-align: center;
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* 登入頁 brand 區：徽章圖 + 標題垂直置中
   雙保險：用 flex column + align-items 置中（給支援 flex 環境）
   並用 text-align + margin auto 兜底（防 flex 在某些 print/legacy 場景失效） */
.login-card .login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    text-align: center;
}
.login-card .login-brand img {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto; /* 兜底水平置中，避免某些瀏覽器 flex item img 對齊偏移 */
    border-radius: 14px; /* 與 mark.svg 內 rx=32 在 64px 顯示時視覺對齊 */
}
/* 既有 .login-card h1 的 margin: 0 0 28px 會在 .login-brand 中被擠壓；歸零讓 .login-brand 自己控制 margin-bottom */
.login-card .login-brand h1 {
    margin: 0;
}

.login-card label {
    display: block;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--text-secondary);
}

.login-card input {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 10px 12px;
    font-size: 15px;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--panel-border-strong);
    border-radius: 6px;
    transition: border-color .15s, background .15s;
}
.login-card input:focus {
    outline: none;
    border-color: var(--accent-strong);
    background: rgba(255, 255, 255, 0.10);
}

/* 記住我：以橫向 row 排版（checkbox + 文字），與密碼欄分隔 8px */
.login-card .login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}
/* checkbox 需要覆寫 .login-card input 的所有風格（display/width/padding/background/border/border-radius/margin-top）
   否則會被當成 text input 樣式：寬度 100% + 自訂背景與邊框 + padding 撐大盒子 → 跑版 */
.login-card .login-remember input[type="checkbox"] {
    flex: 0 0 auto; /* 不被 flex 拉伸 */
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    accent-color: var(--accent);
    cursor: pointer;
}
.login-card .login-remember > span {
    flex: 1 1 auto;
    line-height: 1.4;
}

.login-card button {
    margin-top: 16px;
    width: 100%;
    padding: 12px;
    font-size: 15px;
    color: #ffffff;
    background: var(--accent);
    border: 1px solid var(--accent-strong);
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.login-card button:hover {
    background: var(--accent-strong);
    transform: translateY(-1px);
}

/* ============================================================
   通用 alert
   ============================================================ */
.alert {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 14px;
    border: 1px solid var(--panel-border);
}
.alert-error   { background: var(--error-bg);   color: var(--error-text); }
.alert-success { background: var(--success-bg); color: var(--success-text); }

/* ============================================================
   後台 Layout：topbar + sidebar + main
   ============================================================ */
.admin-shell {
    min-height: 100vh;
    /* 由 topbar + 兩欄組成，sidebar 寬度由 .collapsed 控制 */
}

/* ===== Topbar ===== */
.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: var(--panel-bg-strong);
    -webkit-backdrop-filter: var(--panel-blur);
    backdrop-filter: var(--panel-blur);
    border-bottom: 1px solid var(--panel-border);
    color: var(--text-primary);
}
.admin-topbar .topbar-left { display: flex; align-items: center; gap: 12px; }
.admin-topbar .topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--text-primary);
}
.admin-topbar .topbar-brand .brand-mark {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 6px;
}
.admin-topbar .topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    color: var(--text-secondary);
}
.admin-topbar .topbar-right a { color: var(--text-secondary); }
.admin-topbar .topbar-right a:hover { color: #ffffff; text-decoration: none; }

.icon-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: background .15s, color .15s, border-color .15s;
}
.icon-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--panel-border);
    color: var(--text-primary);
}
.icon-btn svg { width: 18px; height: 18px; }

/* ===== Body wrap：sidebar + main ===== */
.admin-body {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    min-height: calc(100vh - var(--topbar-height));
    transition: grid-template-columns .2s ease;
}
.admin-shell.collapsed .admin-body {
    grid-template-columns: var(--sidebar-width-collapsed) 1fr;
}

/* ===== Sidebar ===== */
.admin-sidebar {
    background: var(--panel-bg-strong);
    -webkit-backdrop-filter: var(--panel-blur);
    backdrop-filter: var(--panel-blur);
    border-right: 1px solid var(--panel-border);
    padding: 16px 0;
    overflow: hidden;
}
.admin-sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 8px;
}
.admin-sidebar nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    color: var(--text-secondary);
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
    transition: background .12s, color .12s;
}
.admin-sidebar nav a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    text-decoration: none;
}
.admin-sidebar nav a.active {
    background: rgba(199, 149, 114, 0.22);
    color: var(--text-primary);
    border: 1px solid rgba(218, 176, 154, 0.38);
}
.admin-sidebar nav a svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.admin-sidebar nav a .label {
    transition: opacity .15s;
}

/* 收合狀態：只顯示 icon */
.admin-shell.collapsed .admin-sidebar nav a .label { display: none; }
.admin-shell.collapsed .admin-sidebar nav a {
    justify-content: center;
    padding: 10px;
}

.admin-sidebar .sidebar-footer {
    margin-top: auto;
    padding: 12px 16px;
    font-size: 12px;
    color: var(--text-muted);
    border-top: 1px solid var(--panel-border);
}
.admin-shell.collapsed .admin-sidebar .sidebar-footer { display: none; }

/* ===== Main ===== */
.admin-main {
    padding: 32px;
    overflow-x: auto;
    color: var(--text-primary);
}

.admin-main h1 {
    margin: 0 0 24px;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.admin-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 12px;
}

/* 半透明深色卡片（通用容器） */
.panel {
    background: var(--panel-bg);
    -webkit-backdrop-filter: var(--panel-blur);
    backdrop-filter: var(--panel-blur);
    border: 1px solid var(--panel-border);
    border-radius: var(--panel-radius);
    padding: 20px 24px;
    margin-bottom: 16px;
}
.panel h2 {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ============================================================
   Dashboard 磚塊
   ============================================================ */
.dashboard-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.tile {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    border-radius: var(--panel-radius);
    color: #ffffff;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    min-height: 96px;
}
.tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
    filter: brightness(1.06);
    text-decoration: none;
    color: #ffffff;
}
.tile-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 50%;
}
.tile-icon svg { width: 24px; height: 24px; color: #ffffff; }
.tile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tile-title {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.tile-meta {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.78);
}

.tile-blue     { background: var(--tile-blue); }
.tile-green    { background: var(--tile-green); }
.tile-terra    { background: var(--tile-terra); }
.tile-lavender { background: var(--tile-lavender); }
.tile-amber    { background: var(--tile-amber); }
.tile-rose     { background: var(--tile-rose); }
.tile-teal     { background: var(--tile-teal); }

.dashboard-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 16px;
}
/* 為何在 grid 子項補 min-width:0：grid item 預設 min-width:auto，內含
   過長 nowrap 文字（例如 dashboard-list 的任務標題）會把整欄撐到大於
   配額寬度，造成手機版整個 panel 超出視口；min-width:0 讓子層 ellipsis
   能在窄畫面如預期生效 */
.dashboard-grid > * {
    min-width: 0;
}
/* 為何提供 dashboard-grid-equal：待執行 / 未處理兩個 panel 屬於對等的「行動清單」，
   不像「最新文章 vs 最近上傳」前者更為主，故以 1:1 等寬呈現 */
.dashboard-grid.dashboard-grid-equal {
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 980px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .dashboard-grid.dashboard-grid-equal { grid-template-columns: 1fr; }
}

.dashboard-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dashboard-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--panel-border);
    font-size: 14px;
    /* 為何補 min-width:0：li 本身在 grid item 內，預設 min-width:auto 會
       由內容決定最小寬，長標題搭配 a 的 nowrap 會撐破整個 panel；補 0
       才能讓子層的 ellipsis 在手機版正常生效 */
    min-width: 0;
}
.dashboard-list li:last-child { border-bottom: none; }
.dashboard-list a {
    color: var(--text-primary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* 為何補 min-width:0：flex item 預設 min-width:auto，沒這條，
       nowrap + ellipsis 會被內容撐到比 flex 配額更大，等於形同失效 */
    min-width: 0;
}
.dashboard-list .meta {
    color: var(--text-muted);
    font-size: 12px;
    flex-shrink: 0;
}
.dashboard-list .empty {
    color: var(--text-muted);
    font-size: 13px;
    padding: 16px 0;
    text-align: center;
}

/* Dashboard 內 mini media grid */
.dashboard-media-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.dashboard-media-grid .item {
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--panel-border);
}
.dashboard-media-grid .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
    display: inline-block;
    padding: 8px 16px;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid var(--panel-border-strong);
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;       /* 為何顯式 inherit：<button> user-agent 預設 font 非繼承，否則手機版 <button class="btn"> 會比 <a class="btn"> 高 */
    font-size: 14px;
    line-height: 1.5;            /* 同上：<button> 預設 line-height 為 normal，與 body 不一致 */
    box-sizing: border-box;      /* 統一 a/button 計算盒尺寸的方式 */
    -webkit-appearance: none;    /* 移除 iOS Safari 對 <button> 的原生外觀（圓角/陰影），與 <a> 視覺一致 */
    appearance: none;
    transition: background .15s, border-color .15s, transform .12s;
}
.btn:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.28);
    text-decoration: none;
    color: var(--text-primary);
    transform: translateY(-1px);
}
.btn-primary {
    background: var(--accent);
    border-color: var(--accent-strong);
}
.btn-primary:hover {
    background: var(--accent-strong);
    border-color: #e6c5b0;
}
.btn-danger {
    background: rgba(200, 74, 74, 0.55);
    border-color: rgba(200, 74, 74, 0.75);
}
.btn-danger:hover {
    background: rgba(200, 74, 74, 0.78);
    border-color: rgba(220, 100, 100, 0.90);
}
.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--panel-border-strong);
}
.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

/* ============================================================
   Forms
   ============================================================ */
.form-group { margin-bottom: 18px; }
.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 13px;
    color: var(--text-secondary);
}
.form-group input[type="text"],
.form-group input[type="url"],
.form-group input[type="password"],
.form-group input[type="email"],
.form-group input[type="number"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--panel-border-strong);
    border-radius: 6px;
    font-family: inherit;
    transition: border-color .15s, background .15s;
}
.form-group input[type="text"]:focus,
.form-group input[type="url"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="number"]:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent-strong);
    background: rgba(255, 255, 255, 0.10);
}
.form-group select option {
    color: var(--text-primary);
    background: var(--bg);
}
.form-group textarea {
    min-height: 320px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Noto Sans Mono CJK TC", monospace;
    line-height: 1.6;
    resize: vertical;
}
.form-help {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
}

/* ============================================================
   Table
   ============================================================ */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--panel-bg);
    -webkit-backdrop-filter: var(--panel-blur);
    backdrop-filter: var(--panel-blur);
    border: 1px solid var(--panel-border);
    border-radius: var(--panel-radius);
    overflow: hidden;
    color: var(--text-primary);
}
.admin-table th,
.admin-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--panel-border);
    text-align: left;
    font-size: 14px;
}
.admin-table th {
    background: rgba(255, 255, 255, 0.04);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.05em;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: rgba(255, 255, 255, 0.03); }
.admin-table .actions { white-space: nowrap; }
.admin-table .actions a,
.admin-table .actions button { margin-right: 4px; }

/* ============================================================
   Status badge
   ============================================================ */
.badge {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 12px;
    font-size: 12px;
    border: 1px solid var(--panel-border);
}
.badge-draft     { background: var(--draft-bg);     color: var(--draft-text); }
.badge-published { background: var(--published-bg); color: var(--published-text); }

/* ============================================================
   Media picker
   ============================================================ */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 16px;
    /* 整頁所有 row 等高（取最高那張卡片高度），達成跨 row 齊平 */
    grid-auto-rows: 1fr;
}
.media-item {
    border: 1px solid var(--panel-border);
    border-radius: var(--panel-radius);
    overflow: hidden;
    background: var(--panel-bg);
    cursor: pointer;
    transition: border-color .15s, transform .12s;
    /* 直向 flex：圖片 → meta → 動作按鈕，由上到下，actions 推到底 */
    display: flex;
    flex-direction: column;
    height: 100%;
}
.media-item:hover {
    border-color: rgba(255, 255, 255, 0.30);
    transform: translateY(-1px);
}
.media-item.selected {
    border-color: var(--accent-strong);
    box-shadow: 0 0 0 2px rgba(136, 166, 194, 0.30);
}
.media-item img {
    display: block;
    width: 100%;
    height: 120px;
    object-fit: cover;
}
.media-item .meta {
    padding: 8px 10px;
    font-size: 12px;
    color: var(--text-muted);
    word-break: break-all;
    /* 吃掉中間剩餘空間，把 .media-item-actions 擠到 cell 底 */
    flex: 1 1 auto;
}
/* 媒體庫卡片底部刪除按鈕容器：靠右、留 10px 邊距，避免按鈕忽高忽低 */
.media-item-actions {
    display: flex;
    justify-content: flex-end;
    padding: 0 10px 10px;
    margin: 0;
}

/* ============================================================
   Markdown preview（文章預覽頁）
   ============================================================ */
.markdown-preview {
    color: var(--text-primary);
}
.markdown-preview h1,
.markdown-preview h2,
.markdown-preview h3 { color: #ffffff; }
.markdown-preview a { color: var(--accent-strong); }
.markdown-preview code {
    background: rgba(255, 255, 255, 0.10);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}
.markdown-preview pre {
    background: rgba(0, 0, 0, 0.32);
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
    border: 1px solid var(--panel-border);
}
.markdown-preview blockquote {
    border-left: 3px solid var(--accent);
    padding-left: 14px;
    color: var(--text-secondary);
    margin-left: 0;
}

/* ============================================================
   文章編輯：cover preview / form actions / markdown toolbar
   ============================================================ */
.cover-preview { margin-bottom: 8px; }
.cover-preview img {
    max-width: 240px;
    border: 1px solid var(--panel-border-strong);
    border-radius: 6px;
    display: block;
}
.cover-empty {
    color: var(--text-muted);
    font-size: 13px;
}
.form-actions {
    display: flex;
    gap: 8px;
    margin-top: 24px;
    align-items: center;
}
.form-actions-spacer { margin-left: auto; }
.markdown-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}
.markdown-toolbar .form-help { margin-top: 0; }

/* posts/index 的 slug 副標 */
.admin-table .row-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* media/index 上傳列 */
.upload-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}
.upload-bar input[type="file"] {
    color: var(--text-secondary);
    font-size: 13px;
}
.upload-status {
    font-size: 13px;
    color: var(--text-muted);
}

/* file input 通用美化 */
input[type="file"] { color: var(--text-secondary); }
input[type="file"]::-webkit-file-upload-button {
    background: rgba(255, 255, 255, 0.10);
    color: var(--text-primary);
    border: 1px solid var(--panel-border-strong);
    border-radius: 6px;
    padding: 6px 12px;
    margin-right: 8px;
    cursor: pointer;
    font-size: 13px;
}
input[type="file"]::-webkit-file-upload-button:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* ============================================================
   Media picker modal
   ============================================================ */
.media-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 100;
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.media-modal.open { display: flex; }
.media-modal-card {
    background: var(--panel-bg-strong);
    -webkit-backdrop-filter: var(--panel-blur);
    backdrop-filter: var(--panel-blur);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    max-width: 760px;
    width: 92%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    color: var(--text-primary);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.media-modal-header {
    padding: 16px;
    border-bottom: 1px solid var(--panel-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.media-modal-header h3 {
    margin: 0;
    font-size: 16px;
    color: var(--text-primary);
}
.media-modal-upload {
    padding: 16px;
    border-bottom: 1px solid var(--panel-border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.media-modal-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
}
.media-modal-footer {
    padding: 16px;
    border-top: 1px solid var(--panel-border);
    text-align: right;
}

/* ============================================================
   響應式（≤720px）：sidebar 改為左側 drawer + 半透明遮罩
   ----------------------------------------------------------------
   為何不用「橫向頂部選單」：兩層選單 (dashboard / notes / 部落格群組
   / 專案管理 / 企畫管理) 全攤平會吃掉手機 1/3 縱向空間，且子項展開
   還會擠掉內容；改 drawer 由使用者主動點漢堡才出現，預設不占空間。
   ============================================================ */

/* drawer 遮罩元素：layout.php 在 ≤720px 時會渲染這個 div；桌機尺寸下整個隱藏 */
.drawer-overlay {
    display: none;
}

@media (max-width: 720px) {
    /* 主版型仍然單欄，但 sidebar 靠 fixed 浮起，不再占 grid 空間 */
    .admin-body {
        grid-template-columns: 1fr;
    }
    .admin-shell.collapsed .admin-body {
        grid-template-columns: 1fr;
    }

    /* sidebar 變身為左側 drawer */
    .admin-sidebar {
        position: fixed;
        left: 0;
        top: var(--topbar-height);
        bottom: 0;
        width: 240px;
        z-index: 25;          /* 在遮罩(20) 之上、topbar(20) 同層但晚渲染 */
        overflow-y: auto;
        padding: 12px 0;
        border-right: 1px solid var(--panel-border);
        transform: translateX(-100%);
        transition: transform .25s ease;
        /* 為何不用 display: none：translate 動畫比 toggle display 平滑，
           且仍可保留 a11y（aria-hidden 由 JS 控制） */
    }
    .admin-shell.drawer-open .admin-sidebar {
        transform: translateX(0);
    }

    /* drawer 內 nav 維持桌機版的縱向兩層樣式（不切橫向） */
    .admin-sidebar nav {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 2px;
        padding: 0 8px;
    }
    .admin-sidebar nav a {
        padding: 10px 12px;
        font-size: 14px;
    }
    .admin-sidebar nav a .label { display: inline; }
    .admin-sidebar .sidebar-footer { display: none; }

    /* 桌機版的 .collapsed (icon-only) 狀態在手機 drawer 不適用，全部還原成正常顯示 */
    .admin-shell.collapsed .admin-sidebar nav a .label { display: inline; }
    .admin-shell.collapsed .admin-sidebar nav a { justify-content: flex-start; }
    .admin-shell.collapsed .nav-tree .nav-item .label,
    .admin-shell.collapsed .nav-tree .nav-group-header .label,
    .admin-shell.collapsed .nav-tree .nav-group-header .caret,
    .admin-shell.collapsed .nav-tree .nav-group-children {
        display: revert;
    }

    /* 遮罩：drawer-open 時可見 + 半透明黑底 + 點擊關閉 */
    .drawer-overlay {
        display: block;
        position: fixed;
        inset: var(--topbar-height) 0 0 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 20;
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s, visibility .2s;
    }
    .admin-shell.drawer-open .drawer-overlay {
        opacity: 1;
        visibility: visible;
    }

    /* drawer 開啟時禁止背景捲動 */
    body.drawer-locked {
        overflow: hidden;
    }

    .admin-main { padding: 16px; }

    /* 漢堡按鈕重新顯示（之前被隱藏，現在是 drawer 唯一開關） */
    .icon-btn[data-action="toggle-sidebar"] {
        display: inline-flex;
    }

    /* topbar 右側避免擠爆：縮小字級、去掉「修改密碼」這類在抽屜出現的細項 */
    .admin-topbar .topbar-right {
        gap: 10px;
        font-size: 12px;
    }
}

/* ============================================================
   2026-05-01: 多分類 + 個人日誌（visibility）
   ============================================================ */

/* ---- 狀態徽章擴充 ---- */
.badge-personal {
    background: rgba(156, 125, 143, 0.30);
    color: #e8cdda;
    border-color: rgba(156, 125, 143, 0.55);
}
.badge-system {
    background: rgba(232, 216, 184, 0.10);
    color: var(--text-secondary);
    border: 1px dashed var(--panel-border-strong);
}
.badge-public { /* alias of badge-published 給分類列表用 */
    background: var(--published-bg);
    color: var(--published-text);
}

.text-muted { color: var(--text-muted); }

/* ---- 表單分頁 Tab（form-tabs）---- */
.form-tabs {
    display: flex;
    gap: 4px;
    margin: 0 0 20px;
    border-bottom: 1px solid var(--panel-border);
}
.form-tab {
    padding: 10px 20px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    transition: color .12s, border-color .12s, background .12s;
    font-size: .9rem;
    border-radius: 0;
}
.form-tab:hover {
    color: var(--text-primary);
    background: var(--panel-bg-soft);
}
.form-tab.active {
    color: var(--accent-strong);
    border-bottom-color: var(--accent);
    background: var(--panel-bg-soft);
}
.form-tab-content { display: none; }
.form-tab-content.active { display: block; }

/* task #252：Tab 內 section 標題（合併「站台基本資訊」+「SEO / 社群分享」為「部落格設定」單一 Tab 後，
   用 h3 在同一個 pane 內區隔兩段欄位） */
.form-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-strong, #f0f0f0);
    margin: 0 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--panel-border, rgba(255, 255, 255, 0.12));
}
.form-section-title--spaced {
    margin-top: 28px;
}

/* 第二層 Tab：部署資訊內的正式 / 測試環境（pill 樣式，與外層底線式 tab 區別） */
.deploy-env-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}
.deploy-env-tab {
    padding: 5px 16px;
    background: transparent;
    border: 1px solid var(--panel-border-strong);
    border-radius: 20px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: .82rem;
    transition: background .12s, color .12s, border-color .12s;
}
.deploy-env-tab:hover {
    color: var(--text-primary);
    border-color: var(--accent);
}
.deploy-env-tab.active {
    background: var(--panel-bg-strong);
    border-color: var(--accent);
    color: var(--accent-strong);
}
.deploy-env-pane { display: none; }
.deploy-env-pane.active { display: block; }

/* 部署資訊子群區塊（基本 / SSH·主機 / 資料庫） */
.deploy-group {
    border: 1px solid var(--panel-border-strong);
    border-radius: var(--panel-radius);
    background: var(--panel-bg-soft);
    padding: 14px 16px 4px;
    margin: 12px 0;
}
.deploy-group legend {
    padding: 0 8px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ---- 文章列表 filter tabs ---- */
.filter-tabs {
    display: flex;
    gap: 4px;
    margin: 0 0 16px;
    border-bottom: 1px solid var(--panel-border);
}
.filter-tab {
    padding: 8px 16px;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    transition: color .12s, border-color .12s;
}
.filter-tab:hover { color: var(--text-primary); text-decoration: none; }
.filter-tab.active {
    color: var(--accent-strong);
    border-bottom-color: var(--accent);
}

/* ---- 分類 chip（後台列表的小標籤）---- */
.cat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.cat-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    background: rgba(232, 216, 184, 0.08);
    color: var(--text-secondary);
    border: 1px solid var(--panel-border);
}
.cat-chip-system {
    background: transparent;
    border-style: dashed;
    color: var(--text-muted);
}

/* ---- 分類 checkbox 區（文章編輯頁）---- */
.form-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.form-group-header label { margin-bottom: 0; }
.btn-mini { padding: 4px 10px; font-size: 12px; }

.cat-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 6px;
    padding: 10px;
    background: var(--panel-bg-soft);
    border: 1px solid var(--panel-border);
    border-radius: var(--panel-radius);
}
.cat-checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .12s;
}
.cat-checkbox-item:hover { background: rgba(232, 216, 184, 0.06); }
.cat-checkbox-item input[type="checkbox"] { margin: 0; }
.cat-checkbox-label { flex: 1; }
.cat-checkbox-tag {
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(232, 216, 184, 0.10);
    color: var(--text-muted);
    border: 1px dashed var(--panel-border-strong);
}
.cat-checkbox-system .cat-checkbox-label { color: var(--text-secondary); font-style: italic; }

/* ---- 發佈狀態 radio（草稿 / 個人日誌 / 公開）---- */
.publish-state-radio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}
.publish-state-option {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--panel-border);
    border-radius: var(--panel-radius);
    background: var(--panel-bg-soft);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.publish-state-option:hover { border-color: var(--panel-border-strong); }
.publish-state-option input[type="radio"] {
    position: absolute;
    top: 12px;
    right: 12px;
    margin: 0;
}
.publish-state-option.is-checked {
    border-color: var(--accent);
    background: rgba(199, 149, 114, 0.10);
}
.publish-state-title {
    font-weight: 600;
    color: var(--text-primary);
}
.publish-state-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ---- 快速新增分類 modal（沿用 media-modal 容器）---- */
.cat-quick-card {
    max-width: 480px;
}
@media (max-width: 720px) {
    .filter-tabs { overflow-x: auto; }
    .filter-tab { white-space: nowrap; }
    .cat-checkbox-grid { grid-template-columns: 1fr 1fr; }
    .publish-state-radio { grid-template-columns: 1fr; }
}

/* ============================================================
   兩層側邊欄（個人管理平台）
   ============================================================ */
.nav-tree {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 8px;
}
.nav-tree .nav-item,
.nav-tree .nav-group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    color: var(--text-secondary);
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
    transition: background .12s, color .12s;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}
.nav-tree .nav-item:hover,
.nav-tree .nav-group-header:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    text-decoration: none;
}
.nav-tree .nav-item.active {
    background: rgba(199, 149, 114, 0.22);
    color: var(--text-primary);
    border: 1px solid rgba(218, 176, 154, 0.38);
}
.nav-tree .nav-item svg,
.nav-tree .nav-group-header svg:first-child {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.nav-tree .nav-item .label,
.nav-tree .nav-group-header .label {
    transition: opacity .15s;
    flex: 1;
}

/* 群組箭頭 */
.nav-tree .nav-group-header .caret {
    width: 14px;
    height: 14px;
    transition: transform .15s;
    flex-shrink: 0;
    margin-left: auto;
}
.nav-tree .nav-group.expanded .nav-group-header .caret {
    transform: rotate(180deg);
}

/* 群組子選單 */
.nav-tree .nav-group-children {
    display: none;
    padding: 4px 0 4px 20px;
    flex-direction: column;
    gap: 2px;
    border-left: 1px solid var(--panel-border);
    margin-left: 22px;
}
.nav-tree .nav-group.expanded .nav-group-children {
    display: flex;
}
.nav-tree .nav-child {
    display: block;
    padding: 8px 12px;
    color: var(--text-secondary);
    border-radius: 6px;
    font-size: 13px;
    white-space: nowrap;
    transition: background .12s, color .12s;
}
.nav-tree .nav-child:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    text-decoration: none;
}
.nav-tree .nav-child.active {
    background: rgba(199, 149, 114, 0.18);
    color: var(--text-primary);
}

/* 收合狀態：兩層側邊欄都只顯示 icon，群組強制收摺 */
.admin-shell.collapsed .nav-tree .nav-item .label,
.admin-shell.collapsed .nav-tree .nav-group-header .label,
.admin-shell.collapsed .nav-tree .nav-group-header .caret,
.admin-shell.collapsed .nav-tree .nav-group-children {
    display: none;
}
.admin-shell.collapsed .nav-tree .nav-item,
.admin-shell.collapsed .nav-tree .nav-group-header {
    justify-content: center;
    padding: 10px;
}

/* ============================================================
   專案列表
   ============================================================ */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.project-card {
    background: var(--panel-bg);
    -webkit-backdrop-filter: var(--panel-blur);
    backdrop-filter: var(--panel-blur);
    border: 1px solid var(--panel-border);
    border-radius: var(--panel-radius);
    padding: 18px;
    /* task #162：右下角放四顆任務狀態圖示按鈕（absolute），需要 relative 容器 */
    /* 為何 padding-bottom 加大：避免下方狀態圖示按鈕覆蓋 meta 區 */
    padding-bottom: 60px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.project-card h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    /* task #172：右上角有編輯 / 刪除兩顆 icon 按鈕（absolute）
       為何 padding-right=76px：兩顆 icon (32px) + 中間 gap (4px) + 與卡片右邊距預留 = 約 76px
       為何不改用 grid：保留既有 inline badge-running 排版，padding 是最小侵入做法 */
    padding-right: 76px;
}
.project-card h3 a {
    color: var(--text-primary);
}
.project-desc {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}
.project-meta {
    display: flex;
    gap: 12px;
    color: var(--text-muted);
    font-size: 12px;
    margin-top: auto;
}
/* task #172：右上角的編輯 / 刪除圖示按鈕容器
   為何 absolute right-top：對稱於右下角的 .project-task-counts；主內容（h3、desc、meta）
     仍照 flex column 由上而下排版，容器只「漂浮」在右上方，不擠壓 row 寬度
   為何 z-index 1：確保不被後續 .project-card 子元素的 stacking context 蓋過去 */
.project-card-actions {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 1;
}
.project-card-actions .icon-action-form {
    margin: 0;
    padding: 0;
    line-height: 0;
}
.icon-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.icon-action-btn svg {
    width: 16px;
    height: 16px;
}
.icon-action-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--panel-border);
}
.icon-action-btn--edit:hover {
    color: var(--text-primary);
}
.icon-action-btn--delete:hover {
    /* 刪除危險動作：hover 才轉紅，避免常態太搶眼 */
    color: #ff6b6b;
    border-color: rgba(255, 107, 107, 0.4);
}
/* 專案執行中徽章 */
.badge-running {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(80, 200, 120, 0.18);
    color: #50c878;
    border: 1px solid rgba(80, 200, 120, 0.35);
    vertical-align: middle;
    margin-left: 6px;
}
.project-card--running {
    border-color: rgba(80, 200, 120, 0.4);
    box-shadow: 0 0 0 1px rgba(80, 200, 120, 0.2);
}

/* ============================================================
   task #162：專案卡片右下角的四顆任務狀態圖示按鈕
   （原三顆：待處理 / 討論中 / 待測試；comment #665 追加：已完成）
   為何 absolute：在不影響卡片主要排版的前提下，固定置於右下角；
   為何 gap=8 + padding=6：手機點擊面積至少 32x32（含 icon 16）
   為何 muted 色基底 + 對應狀態色點：常態低調、有數量時用對應狀態色提示
   ============================================================ */
.project-task-counts {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: flex;
    gap: 8px;
    align-items: center;
}
.project-task-count-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px 4px 6px;
    border-radius: 999px;
    border: 1px solid var(--panel-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 12px;
    line-height: 1;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.project-task-count-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}
.project-task-count-btn svg {
    width: 16px;
    height: 16px;
}
.project-task-count-num {
    font-weight: 600;
    min-width: 1ch;
    text-align: center;
}
/* 待處理：藍 / 討論中：橘 / 待測試：綠 / 已完成：紫 — 與既有 tile / 看板色調對齊
   為何 done 用紫（#A855F7）：跟 todo 藍 / discussing 橘 / testing 綠 視覺上夠分；
   紫在 RAIJIN 設計語意裡接近「成就 / 收尾」，與獎盃 icon 一致；
   不挑金黃避免跟 discussing 橘混淆。 */
.project-task-count-btn--todo[data-task-count-type="todo"]:not([aria-label*=" 0 "]) {
    color: #2563EB;
    border-color: rgba(37, 99, 235, 0.4);
}
.project-task-count-btn--discussing[data-task-count-type="discussing"]:not([aria-label*=" 0 "]) {
    color: #F59E0B;
    border-color: rgba(245, 158, 11, 0.4);
}
.project-task-count-btn--testing[data-task-count-type="testing"]:not([aria-label*=" 0 "]) {
    color: #50C878;
    border-color: rgba(80, 200, 120, 0.4);
}
.project-task-count-btn--done[data-task-count-type="done"]:not([aria-label*=" 0 "]) {
    color: #A855F7;
    border-color: rgba(168, 85, 247, 0.4);
}

/* ============================================================
   看板（Kanban）
   ============================================================ */
.board-toolbar {
    align-items: flex-start;
}
.board-toolbar h1 {
    margin: 4px 0 0;
}
.board-back {
    display: inline-block;
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 4px;
}
.board-desc {
    color: var(--text-secondary);
    font-size: 13px;
    margin-top: 4px;
}
.board-actions {
    display: flex;
    gap: 8px;
}

.kanban {
    display: grid;
    /* 4 欄：收件匣 / 待處理 / 待測試 / 已完成
       為何 minmax(0, 1fr)：避免欄寬下限撐出父容器；側邊欄展開後，
       admin-main 可用寬可能 < 4×240px+gaps，原本會出現水平捲軸並切到最右欄
       （對應 task #66 修正：將下限改 0，4 欄等分剩餘空間） */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
    /* 保留 overflow-x: auto 作為極端窄視窗（例如手機）的緩衝 */
    overflow-x: auto;
}

/* 桌機（>=1024px）：欄位改為固定寬度，不再隨可用寬縮放
   為何固定欄寬：使用者習慣穩定的卡片寬度；視窗變窄時不要把卡片擠扁，
   超出畫面就用容器自帶的橫向捲軸處理（task #76）。
   平板/手機（<1024px）維持原 1fr / 4 欄等分行為。 */
@media (min-width: 1024px) {
    .kanban {
        grid-template-columns: repeat(4, 300px);
        /* 為何 justify-content: start：避免 grid 將固定欄置中，導致左右產生空白；
           固定欄寬時應從容器左側開始排列，溢出就靠橫向捲軸 */
        justify-content: start;
    }
}
.kanban-col {
    background: var(--panel-bg-soft);
    border: 1px solid var(--panel-border);
    border-radius: var(--panel-radius);
    display: flex;
    flex-direction: column;
    min-height: 300px;
}
.kanban-col-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--panel-border);
}
.col-label {
    font-weight: 600;
    font-size: 14px;
    padding: 4px 10px;
    border-radius: 999px;
}
.col-label.col-todo       { background: rgba(199,149,114,0.22); color: var(--accent-strong); }
.col-label.col-discussing { background: rgba(140,170,200,0.22); color: #a8c8ec; }
/* 收件匣（task #45：與原「討論中」風格一致；色票相同，只是命名語意改變） */
.col-label.col-inbox      { background: rgba(140,170,200,0.22); color: #a8c8ec; }
.col-label.col-testing    { background: rgba(180,140,200,0.22); color: #c8a8ec; }
.col-label.col-done       { background: rgba(122,155,126,0.30); color: var(--published-text); }
.col-label.col-archived   { background: rgba(120,120,120,0.18); color: var(--text-muted); }

/* 討論中子群樣式（風琴模式） */
.kanban-col-discussing {
    display: flex;
    flex-direction: column;
    /* 讓討論中欄的 header 不再帶 border-bottom，由子群 border-top 負責分隔 */
}
.kanban-col-discussing > .kanban-col-header {
    border-bottom: none;
}
.kanban-subgroup {
    border-top: 1px solid var(--panel-border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    order: 1;           /* 預設收合：置底 */
}
.kanban-subgroup.is-open {
    flex: 1;
    min-height: 0;
    order: 0;           /* 展開：置頂 */
}
.kanban-subgroup:not(.is-open) > .kanban-col-body {
    display: none;      /* 收合時隱藏 body，DOM 保留不影響拖曳資料 */
}
.kanban-subgroup-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(0,0,0,0.08);
    cursor: pointer;
    user-select: none;
}
.kanban-subgroup-header::after {
    content: '▶';
    font-size: 9px;
    color: var(--text-muted);
    transition: transform 0.2s;
    display: inline-block;
    flex-shrink: 0;
    margin-left: 6px;
}
.kanban-subgroup.is-open > .kanban-subgroup-header::after {
    transform: rotate(90deg);
}
/* 拖曳懸停在收合 header 時的提示 */
.kanban-subgroup-header.drag-hover-expand {
    background: rgba(199,149,114,0.15);
    outline: 1px dashed rgba(199,149,114,0.5);
    outline-offset: -3px;
}
.subgroup-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 2px 8px;
    border-radius: 999px;
}
.subgroup-label-discussing_system { background: rgba(180,160,100,0.22); color: #d4b86a; }
.subgroup-label-discussing_you    { background: rgba(140,170,200,0.28); color: #a8c8ec; }
.subgroup-label-discussing_client { background: rgba(160,130,180,0.25); color: #c0a0d8; }
/* 草稿子群（task #45）：用偏中性的灰綠，與 you/client 區分但仍屬冷色系 */
.subgroup-label-discussing_draft  { background: rgba(140,180,150,0.22); color: #a8d8b8; }
.subgroup-count {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: auto;
}

/* 任務卡：Agent 執行中標記 */
.task-card-agent-running {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 1px 7px;
    border-radius: 999px;
    margin-bottom: 5px;
    background: rgba(80, 200, 120, 0.15);
    color: #50c878;
    border: 1px solid rgba(80, 200, 120, 0.3);
}

/* 任務卡：討論中子狀態 badge */
.task-card-sub-status {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 1px 7px;
    border-radius: 999px;
    margin-bottom: 5px;
}
.task-sub-discussing_system { background: rgba(180,160,100,0.22); color: #d4b86a; }
.task-sub-discussing_you    { background: rgba(140,170,200,0.28); color: #a8c8ec; }
.task-sub-discussing_client { background: rgba(160,130,180,0.25); color: #c0a0d8; }
.task-sub-discussing_draft  { background: rgba(140,180,150,0.22); color: #a8d8b8; }

/* 任務卡：task_type 徽章（2026-05-11 ADR）— general 不顯示，僅 setup / deploy_production 顯示 */
.task-card-type-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 1px 7px;
    border-radius: 999px;
    margin-bottom: 5px;
    margin-left: 4px;
}
/* setup：紫色，與「初始化、準備」語意呼應 */
.task-card-type-setup {
    background: rgba(155, 110, 200, 0.22);
    color: #c8a8ec;
    border: 1px solid rgba(155, 110, 200, 0.35);
}
/* deploy：紅色，提醒這是會推正式的高風險操作 */
.task-card-type-deploy {
    background: rgba(220, 90, 90, 0.20);
    color: #ec9090;
    border: 1px solid rgba(220, 90, 90, 0.40);
}
/* system_command：橘色（task #214）。介於 setup（紫）與 deploy（紅）之間 —
   提醒這是「無權限邊界」任務，會跑任何規劃內容，但比 production 部署危險度低一階 */
.task-card-type-system-command {
    background: rgba(230, 145, 60, 0.20);
    color: #ecc090;
    border: 1px solid rgba(230, 145, 60, 0.40);
}
.col-count {
    color: var(--text-muted);
    font-size: 12px;
}
.kanban-col-header .btn {
    margin-left: auto;
}
.kanban-col-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-height: 0;
    max-height: calc(100vh - 260px);
    overflow-y: auto;
}
/* 風琴模式：展開子群的 body 繼承父層高度，不另設 max-height */
.kanban-col-body.drag-over {
    background: rgba(199, 149, 114, 0.08);
    outline: 2px dashed rgba(199, 149, 114, 0.45);
    outline-offset: -8px;
}
.kanban-empty {
    color: var(--text-muted);
    font-size: 13px;
    padding: 12px;
    text-align: center;
}

/* 拖曳同欄插入指示線 */
.task-card.drag-insert-before {
    box-shadow: 0 -3px 0 var(--accent);
    margin-top: 3px;
}
.task-card.drag-insert-after {
    box-shadow: 0 3px 0 var(--accent);
    margin-bottom: 3px;
}

/* ===== Task card ===== */
.task-card {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    padding: 0;
    overflow: hidden;
    /* 2026-05-21 task #217：刪除按鈕用 position:absolute 漂到右上角，故 .task-card 需為 relative
       overflow:hidden 仍保留是為了讓封面 img 跟隨 border-radius 裁切；刪除按鈕本身小於卡片，不會被切 */
    position: relative;
    cursor: grab;
    transition: transform .12s, box-shadow .12s;
    flex-shrink: 0;
}
.task-card:hover {
    border-color: var(--panel-border-strong);
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
.task-card:active { cursor: grabbing; }
.task-card.dragging {
    opacity: 0.4;
}
.task-card-cover {
    position: relative;
    width: 100%;
    height: 120px;
    background: rgba(0,0,0,0.2);
    overflow: hidden;
}
.task-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.task-card-cover-count {
    position: absolute;
    right: 6px;
    bottom: 6px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
}
.task-card-body {
    padding: 10px 12px 6px;
}
.task-card-title {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}
.task-card-desc {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    word-break: break-word;
}
.task-card-footer {
    padding: 6px 10px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.task-card-actions {
    display: flex;
    gap: 4px;
    margin-left: auto;
}
.btn.btn-sm {
    padding: 4px 8px;
    font-size: 12px;
}

/* 2026-05-21 task #224：任務卡片 footer 改為常駐 icon 列（編輯 / 封存(only done) / 刪除）
   為何 .task-card-delete-form 不再 absolute：搬進 footer 後是 inline-flex 子層，
     原本為了「右上角懸浮」的絕對定位現在反而會脫離 footer 排版
   為何 26x26：與 task #217 同樣的視覺密度（任務卡 ~240px 寬，三顆 32x32 偏擠）
   為何三顆共用同一份尺寸：節省 CSS、保持 icon 列視覺一致 */
.task-card-delete-form {
    margin: 0;
    padding: 0;
    line-height: 0;
}
.task-card-edit-btn,
.task-card-delete-btn,
.icon-action-btn--archive {
    /* 任務卡 footer 內的 icon 列：26x26 略小於專案卡的 32x32 */
    width: 26px;
    height: 26px;
    border-radius: 6px;
}
.task-card-edit-btn svg,
.task-card-delete-btn svg,
.icon-action-btn--archive svg {
    width: 14px;
    height: 14px;
}
.icon-action-btn--archive:hover {
    /* 封存：hover 轉淡黃／琥珀色，語意上比刪除溫和 */
    color: #d4a017;
    border-color: rgba(212, 160, 23, 0.4);
}

/* ===== Task modal ===== */
.task-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.task-modal[hidden] { display: none; }
.task-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
}
.task-modal-content {
    position: relative;
    background: var(--panel-bg-strong);
    border: 1px solid var(--panel-border-strong);
    border-radius: 12px;
    width: min(640px, 92vw);
    max-height: 88vh;
    overflow: auto;
    padding: 22px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.task-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.task-modal-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}
.task-modal .icon-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 22px;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 4px;
}
.task-modal .icon-btn:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary);
}
.task-media-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.task-media-item {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--panel-border);
}
.task-media-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.task-media-item .detach-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}
.task-media-item .detach-btn:hover {
    background: rgba(200,74,74,0.85);
}
.required {
    color: #f0b0b0;
}

/* Toast 訊息 */
.board-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--panel-bg-strong);
    border: 1px solid var(--panel-border-strong);
    border-radius: 6px;
    padding: 10px 18px;
    color: var(--text-primary);
    font-size: 13px;
    z-index: 1100;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.board-toast.error {
    border-color: rgba(200,74,74,0.6);
    color: #f0b0b0;
}

/* ===== 任務卡片標題連結（指向詳情頁）===== */
.task-card-title-link {
    color: inherit;
    text-decoration: none;
}
.task-card-title-link:hover {
    color: var(--accent, #d4a373);
    text-decoration: underline;
}

/* ===== 任務詳情頁 ===== */
.task-detail-page {
    max-width: 920px;
    margin: 0 auto;
    padding: 12px 4px 80px;
}
.breadcrumb {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 14px;
}
.breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
}
.breadcrumb a:hover {
    color: var(--text-primary);
}
.task-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--panel-border);
    padding-bottom: 14px;
    margin-bottom: 18px;
}
.task-detail-header h1 {
    margin: 6px 0 4px;
    font-size: 22px;
    font-weight: 600;
}
.task-detail-time {
    font-size: 12px;
    color: var(--text-muted);
}
.task-detail-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    background: rgba(255,255,255,0.06);
    color: var(--text-muted);
}
.task-detail-status.status-pending    { background: rgba(150,150,150,0.18); }
.task-detail-status.status-discussing { background: rgba(80,140,220,0.20); color: #a8c8ec; }
.task-detail-status.status-todo       { background: rgba(199,149,114,0.22); color: var(--accent-strong); }
.task-detail-status.status-done       { background: rgba(80,180,120,0.20); color: #a8d8b0; }
.task-detail-desc {
    margin: 14px 0 22px;
    line-height: 1.7;
}
.task-detail-media h2 {
    font-size: 14px;
    font-weight: 500;
    margin: 16px 0 8px;
    color: var(--text-muted);
}
.task-detail-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.task-detail-media-grid img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--panel-border);
}

/* ===== 任務留言區 ===== */
.task-comments-mount {
    margin-top: 18px;
    border-top: 1px solid var(--panel-border);
    padding-top: 14px;
}
.task-comments-mount[hidden] { display: none; }
.task-comments-loading,
.task-comments-error {
    text-align: center;
    padding: 18px;
    color: var(--text-muted);
    font-size: 13px;
}

.task-comments {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.task-comments-modal {
    /* modal 內限制高度，內部滾動 */
    max-height: 50vh;
    overflow: hidden;
}
.task-comments-modal .task-comments-list {
    max-height: 32vh;
    overflow-y: auto;
    padding-right: 4px;
}
.task-comments-detail .task-comments-list {
    /* 詳情頁不限高，順著頁面滾 */
}
.task-comments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.task-comments-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}
.task-comments-jump {
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: none;
}
.task-comments-jump:hover {
    color: var(--text-primary);
}
.task-comments-empty {
    padding: 14px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    background: rgba(255,255,255,0.02);
    border-radius: 6px;
}

.task-comments-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.task-comment {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 12px 14px;
}
.task-comment.is-agent {
    background: rgba(80, 140, 220, 0.07);
    border-color: rgba(80, 140, 220, 0.30);
}
.task-comment-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
}
.task-comment-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,0.10);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}
.task-comment.is-agent .task-comment-avatar {
    background: rgba(80, 140, 220, 0.40);
}
.task-comment-author {
    font-weight: 600;
    color: var(--text-primary);
}
.task-comment-badge {
    display: inline-block;
    padding: 1px 7px;
    background: rgba(80, 140, 220, 0.40);
    color: #cfe0f5;
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.task-comment-time {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 11px;
}
.task-comment-edited {
    margin-left: 4px;
    color: var(--text-muted);
    font-style: italic;
}
.task-comment-body {
    line-height: 1.6;
    font-size: 14px;
}
.task-comment-text {
    word-wrap: break-word;
}
.task-comment-text :first-child { margin-top: 0; }
.task-comment-text :last-child  { margin-bottom: 0; }
.task-comment-text pre {
    background: rgba(0,0,0,0.4);
    color: #e3e3e3;
    padding: 10px 12px;
    border-radius: 6px;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
}
.task-comment-text code {
    background: rgba(0,0,0,0.30);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.92em;
}
.task-comment-text pre code {
    background: transparent;
    padding: 0;
}
.task-comment-text blockquote {
    border-left: 3px solid var(--panel-border-strong);
    padding-left: 10px;
    color: var(--text-muted);
}

.task-comment-media {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}
.task-comment-media-item {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--panel-border);
}
.task-comment-media-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    cursor: zoom-in;
    display: block;
}
.task-comment-media-detach {
    position: absolute;
    top: 4px;
    right: 4px;
    margin: 0;
    padding: 0;
}
.task-comment-media-detach .icon-btn-x {
    background: rgba(0,0,0,0.65);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}
.task-comment-media-detach .icon-btn-x:hover {
    background: rgba(200,74,74,0.85);
}

/* ============================================================
   task #165 後續：留言的「文件附件清單」
   - 影像維持 task-comment-media 縮圖網格；文件改成下載連結 list（與 task-detail-files 相同模式）
   - 為何用 list 而非縮圖：PDF / Excel 沒辦法 <img> 縮圖；混在一起會顯示破圖
   ============================================================ */
.task-comment-files {
    margin-top: 8px;
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.task-comment-file-item {
    position: relative;
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.02);
}
.task-comment-file-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    flex: 1;
    min-width: 0;
}
.task-comment-file-link:hover {
    text-decoration: underline;
}
.task-comment-file-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.task-comment-file-meta {
    color: var(--text-muted);
    font-size: 12px;
    flex-shrink: 0;
}
.task-comment-file-detach {
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}
.task-comment-file-detach .icon-btn-x {
    background: rgba(0,0,0,0.4);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}
.task-comment-file-detach .icon-btn-x:hover {
    background: rgba(200,74,74,0.85);
}

.task-comment-actions {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}
.task-comment-actions[hidden] { display: none; }

.task-comment-edit-form {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.task-comment-edit-form[hidden] { display: none; }
.task-comment-edit-form textarea {
    width: 100%;
    padding: 8px;
    background: rgba(0,0,0,0.25);
    color: var(--text-primary);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    font-family: inherit;
    resize: vertical;
}

.task-comments-form {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 10px 12px;
}
.task-comments-form textarea {
    width: 100%;
    padding: 8px;
    background: rgba(0,0,0,0.25);
    color: var(--text-primary);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    font-family: inherit;
    resize: vertical;
}
.task-comments-form-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.task-comments-file {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--text-muted);
}
.task-comments-file input[type="file"] {
    color: var(--text-muted);
    font-size: 12px;
}

/* ===== 響應式 ===== */
@media (max-width: 980px) {
    .kanban {
        grid-template-columns: 1fr;
    }
    .kanban-col {
        min-height: auto;
    }
    .task-detail-header {
        flex-direction: column;
    }
    .task-comments-modal {
        max-height: 60vh;
    }
}

/* ===== 靈感速記 ===== */
.note-compose {
    margin-bottom: 24px;
}
.note-compose-title {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    padding: 6px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
    outline: none;
}
.note-compose-title:focus {
    border-bottom-color: var(--accent);
}
.note-compose-content {
    width: 100%;
    border: none;
    background: transparent;
    resize: none;
    font-size: 14px;
    color: var(--text);
    line-height: 1.6;
    outline: none;
    min-height: 60px;
}
.note-compose-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    gap: 12px;
}

/* 顏色選擇器 */
.note-color-picker {
    display: flex;
    gap: 6px;
}
.color-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .15s, border-color .15s;
}
.color-dot.active,
.color-dot:hover {
    border-color: var(--accent);
    transform: scale(1.15);
}
.color-dot-default { background: #ece8e1; }
.color-dot-yellow  { background: #fde68a; }
.color-dot-green   { background: #6ee7b7; }
.color-dot-blue    { background: #7dd3fc; }
.color-dot-red     { background: #fca5a5; }

/* 便條網格 */
.notes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    align-items: start;
}
.note-card {
    border-radius: 8px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    position: relative;
    transition: box-shadow .15s;
    /* 為何固定暗色：--text 是深色主題的亮色，放在明亮卡片底色上對比不足 */
    color: #2a2a2a;
}
.note-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.note-card.pinned {
    border-color: var(--accent);
}
.note-color-default { background: #ece8e1; }
.note-color-yellow  { background: #fde68a; }
.note-color-green   { background: #6ee7b7; }
.note-color-blue    { background: #7dd3fc; }
.note-color-red     { background: #fca5a5; }

.note-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.note-card-title {
    font-size: 14px;
    font-weight: 600;
    flex: 1;
}
.note-card-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .15s;
}
/* 卡片內 icon 繼承卡片暗色，蓋掉主題的亮色 --text-secondary */
.note-card .icon-btn {
    color: rgba(42, 42, 42, 0.55);
}
.note-card .icon-btn:hover {
    color: #2a2a2a;
    background: rgba(0, 0, 0, 0.07);
    border-color: rgba(0, 0, 0, 0.12);
}
.note-card:hover .note-card-actions {
    opacity: 1;
}
.note-card.pinned .note-card-actions {
    opacity: 1;
}
.note-card-preview {
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}
.inline-form {
    display: inline;
}
.icon-btn-danger:hover {
    color: #dc2626;
}

/* ===== 通用 Modal（便條編輯等輕量對話框）===== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.modal-backdrop[hidden] { display: none; }
.modal-box {
    background: #1a2420;
    border: 1px solid var(--panel-border-strong);
    border-radius: 12px;
    padding: 24px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.modal-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

@media (max-width: 640px) {
    .notes-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== 封存區瀑布流 ===== */
.archive-masonry {
    columns: 3;
    column-gap: 12px;
}
.archive-masonry .archive-card {
    break-inside: avoid;
    margin-bottom: 12px;
    cursor: default;
}
.archive-card .task-card-footer {
    justify-content: flex-end;
}
.archive-date {
    font-size: 11px;
    color: var(--text-muted);
}
@media (max-width: 900px) {
    .archive-masonry { columns: 2; }
}
@media (max-width: 600px) {
    .archive-masonry { columns: 1; }
}

/* ========= 任務詳情頁浮動捲軸快捷鈕 ========= */
/* 為何 fixed：詳情頁是 window 捲動，按鈕需固定在 viewport 角落而非隨頁面移動 */
.task-detail-scroll-fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 80; /* layout 內 modal 為 100+，FAB 不可遮 modal */
}
.scroll-fab {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border-color, #2a2a2a);
    background: var(--surface-1, #1f1f1f);
    color: var(--text-primary, #f0f0f0);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, background 0.15s, opacity 0.2s ease;
    opacity: 1;
    pointer-events: auto;
    padding: 0;
}
/* 為何用 opacity 而非 display: none：避免顯/隱切換時的版面跳動，同時保留無障礙焦點順序 */
.scroll-fab.is-hidden {
    opacity: 0;
    pointer-events: none;
}
.scroll-fab:hover {
    background: var(--surface-2, #2a2a2a);
    transform: translateY(-1px);
}
.scroll-fab:focus-visible {
    outline: 2px solid var(--accent, #6cf);
    outline-offset: 2px;
}
@media (max-width: 768px) {
    .task-detail-scroll-fab {
        right: 16px;
        bottom: 16px;
        gap: 8px;
    }
    .scroll-fab {
        width: 40px;
        height: 40px;
    }
    .scroll-fab svg {
        width: 18px;
        height: 18px;
    }
}

/* ========================================================================
   企畫管理（文件 + 框架區塊版，2026-05-09）
   ========================================================================*/

/* ----- badge 補強（5 種狀態的對應顏色） ----- */
.badge-secondary { background: rgba(160, 160, 160, 0.16); color: #c8c8c8; }
.badge-info      { background: rgba(80, 180, 255, 0.16); color: #79c8ff; }
.badge-success   { background: rgba(120, 220, 140, 0.16); color: #8de3a0; }
.badge-primary   { background: rgba(120, 165, 255, 0.20); color: #a4bdff; }
.badge-muted     { background: rgba(160, 160, 160, 0.10); color: #888; }

/* ----- 列表頁 ----- */
.admin-toolbar__actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.planning-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 18px;
}
.planning-filter__chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border: 1px solid var(--panel-border);
    border-radius: 20px;
    color: var(--text, #d0c4a8);
    font-size: 13px;
    text-decoration: none;
    transition: background 0.18s ease;
}
.planning-filter__chip:hover { background: var(--panel-bg-soft); }
.planning-filter__chip.is-active {
    background: rgba(180, 200, 255, 0.10);
    border-color: rgba(180, 200, 255, 0.32);
    color: #c5d2f5;
}
.planning-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}
.planning-card__framework {
    color: var(--muted, #998);
}
.project-card--archived { opacity: 0.85; }

/* ----- 新增頁 template selector ----- */
.planning-form {
    max-width: 920px;
    margin: 0 auto;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--panel-radius);
    padding: 24px;
}
.planning-form__row {
    margin-bottom: 22px;
}
.planning-form__row label {
    display: block;
    font-size: 14px;
}
.planning-form__row input[type="text"] {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    color: var(--text, #d0c4a8);
    font-size: 14px;
    box-sizing: border-box;
}
.planning-form__label { display: block; font-size: 14px; margin-bottom: 4px; }
.planning-form__hint  { font-size: 13px; color: var(--muted, #998); margin: 0 0 14px; }
/* template 分類下拉收合（2026-05-09 v1.1 改為 dropdown） */
.planning-template-category-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.planning-template-category-bar__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text, #d0c4a8);
}
.planning-template-category-bar__select {
    min-width: 240px;
}
.planning-template-category-bar__current {
    font-size: 12px;
    color: var(--muted, #998);
    margin-left: 4px;
}
.planning-template-category-bar__current-cat {
    color: var(--muted, #998);
}

.planning-template-groups { /* container 不額外造版型 */ }
.planning-template-group {
    /* 預設隱藏；.is-active 顯示 */
    display: none;
}
.planning-template-group.is-active {
    display: block;
}
/* 舊版分類標題（dropdown 後不再單獨顯示） */
.planning-template-group__heading {
    display: none;
}
.planning-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.planning-template-card {
    display: block;
    padding: 14px;
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    background: var(--panel-bg);
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
}
.planning-template-card:hover { border-color: var(--panel-border-strong); }
.planning-template-card.is-selected {
    border-color: rgba(180, 200, 255, 0.50);
    background: rgba(180, 200, 255, 0.06);
}
.planning-template-card input[type="radio"] { display: none; }
.planning-template-card__title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}
.planning-template-card__desc {
    font-size: 12px;
    color: var(--muted, #998);
    line-height: 1.5;
}
.planning-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

/* ----- 編輯頁工具列 ----- */
.planning-toolbar {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}
.planning-toolbar__main {
    flex: 1;
    min-width: 280px;
}
.planning-toolbar__name,
.planning-toolbar__desc-input {
    display: block;
    width: 100%;
    background: transparent;
    border: 1px dashed transparent;
    color: var(--text, #d0c4a8);
    padding: 4px 6px;
    margin: 4px 0;
}
.planning-toolbar__name {
    font-size: 22px;
    font-weight: 600;
}
.planning-toolbar__desc-input {
    font-size: 14px;
    color: var(--muted, #998);
}
.planning-toolbar__name:hover,
.planning-toolbar__name:focus,
.planning-toolbar__desc-input:hover,
.planning-toolbar__desc-input:focus {
    border-color: var(--panel-border);
    outline: none;
    background: rgba(0,0,0,0.12);
}
.planning-toolbar__desc { color: var(--muted, #998); margin: 4px 0 0; }
.planning-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.planning-status-select {
    background: rgba(0,0,0,0.18);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    color: var(--text, #d0c4a8);
    padding: 6px 10px;
    font-size: 13px;
}
/* 為何補 option 配色：dark theme 下原生 option 預設白底，與 admin 米金墨綠系斷層
 * 沿用設計 token：option 用 --bg 深底 + --text-primary 米金字
 * hover / checked 時反相為 --accent 淺金底 + --bg 黑字（高對比）
 * Safari 對 option 樣式支援較弱（hover 可能被原生覆蓋）— 接受降級
 */
.planning-status-select option {
    background-color: var(--bg);
    color: var(--text-primary);
}
.planning-status-select option:checked,
.planning-status-select option:hover,
.planning-status-select option:focus {
    background-color: var(--accent);
    color: var(--bg);
}

/* ----- 自動儲存提示 ----- */
.autosave-indicator {
    display: inline-block;
    min-width: 80px;
    padding: 4px 10px;
    font-size: 12px;
    color: #8de3a0;
    background: rgba(120, 220, 140, 0.10);
    border-radius: 4px;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.autosave-indicator--show {
    opacity: 1;
    transform: translateY(0);
}
.autosave-indicator--error {
    color: #ff9b9b;
    background: rgba(255, 90, 90, 0.10);
}

/* ----- 區塊容器 ----- */
.planning-sections {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 16px 0 24px;
}
.planning-sections__empty {
    padding: 30px;
    text-align: center;
    color: var(--muted, #998);
    border: 1px dashed var(--panel-border);
    border-radius: 6px;
}

.planning-section {
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    padding: 16px 18px;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.planning-section[draggable="true"] { cursor: grab; }
.planning-section--dragging {
    opacity: 0.4;
    cursor: grabbing;
}
.planning-section__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--panel-border);
}
.planning-section__title {
    display: flex;
    align-items: center;
    gap: 10px;
}
.planning-section__type {
    font-weight: 600;
    color: #c5d2f5;
    font-size: 14px;
}
.planning-section__custom-title {
    color: var(--text, #d0c4a8);
    font-size: 14px;
}
.planning-section__custom-placeholder { color: var(--muted, #998); }
.planning-section__actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.planning-section__drag {
    color: var(--muted, #998);
    cursor: grab;
    font-size: 14px;
    user-select: none;
}
.planning-section__delete {
    color: #ff9b9b;
}

/* ----- 一般欄位渲染 ----- */
/* v1.5：移除 grid-auto-rows:1fr。原本想用它做「同一 row 左右欄等高」，但它實際上會
   把所有 implicit rows 拉到同高（=最高那行），導致檢視模式下 demographics 等長欄位
   把整個 grid 每一格都撐高，留下大段空白；單欄模式（<720px）尤其明顯。
   不設 grid-auto-rows 時：
   - 單欄：每行依自身內容自然高度
   - 雙欄：同一 row 左右欄已透過預設 align-items: stretch 自動等高 */
.planning-fields--stack {
    display: grid;
    gap: 12px;
}
@media (min-width: 720px) {
    .planning-fields--stack { grid-template-columns: 1fr 1fr; }
    /* v1.6：檢視頁（show.php 的 .planning-sections--readonly）即使桌機也維持單欄。
       理由：檢視模式各欄文字長短不一，2 欄下同列左右會 align-items:stretch 等高，
       短欄被拉成長欄高度造成空白；改單欄後每欄依自身內容自然高度。
       編輯頁不套此規則，雙欄編輯仍維持原本設計。 */
    .planning-sections--readonly .planning-fields--stack {
        grid-template-columns: 1fr;
    }
}
.planning-field {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.planning-field__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text, #d0c4a8);
    margin-bottom: 4px;
}
.planning-field__hint {
    margin-left: 8px;
    font-weight: 400;
    color: var(--muted, #998);
    font-size: 12px;
}
.planning-field__input {
    width: 100%;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    color: var(--text, #d0c4a8);
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
    font-family: inherit;
    flex: 1 1 auto;
    min-height: 96px;
    transition: border-color 120ms ease,
                box-shadow   120ms ease,
                background   120ms ease;
}
.planning-field__input::placeholder {
    color: rgba(208, 196, 168, 0.35);
}
.planning-field__input:hover {
    border-color: rgba(212, 175, 55, 0.30);
}
.planning-field__input:focus {
    border-color: rgba(212, 175, 55, 0.55);
    background: rgba(0, 0, 0, 0.24);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
    outline: none;
}
.planning-field__readonly {
    padding: 10px 12px;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.10);
    font-size: 13px;
    color: var(--text, #d0c4a8);
    line-height: 1.6;
    min-height: 38px;
    white-space: pre-wrap;
}
.planning-field__empty { color: var(--muted, #998); font-style: italic; }

/* ----- BMC 9 格 ----- */
.bmc-grid { display: flex; flex-direction: column; gap: 8px; }
.bmc-grid__top {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 8px;
}
.bmc-grid__col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bmc-grid__bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.bmc-cell, .bmc-cell--tall {
    background: rgba(0, 0, 0, 0.10);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    padding: 10px;
    display: flex;
    flex-direction: column;
}
.bmc-cell--tall { height: 100%; }
.bmc-cell__title { font-size: 13px; font-weight: 600; color: #c5d2f5; margin-bottom: 2px; }
.bmc-cell__hint  { font-size: 11px; color: var(--muted, #998); margin-bottom: 6px; }
.bmc-cell__input { flex: 1; }
.bmc-cell__readonly {
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    color: var(--text, #d0c4a8);
}
@media (max-width: 900px) {
    .bmc-grid__top { grid-template-columns: 1fr; }
    .bmc-grid__bottom { grid-template-columns: 1fr; }
}

/* ----- 艾森豪 2x2 ----- */
.eis-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.eis-cell {
    background: rgba(0, 0, 0, 0.10);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    padding: 12px;
}
.eis-cell__title { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.eis-cell__hint  { font-size: 11px; color: var(--muted, #998); margin-bottom: 8px; }
.eis-q1 .eis-cell__title { color: #ff9b9b; }
.eis-q2 .eis-cell__title { color: #8de3a0; }
.eis-q3 .eis-cell__title { color: #ffd479; }
.eis-q4 .eis-cell__title { color: #888; }
.eis-cell__readonly {
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
}
@media (max-width: 720px) {
    .eis-grid { grid-template-columns: 1fr; }
}

/* ----- 九宮格 3x3 ----- */
.mandala-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    aspect-ratio: 1.4;
}
.mandala-cell {
    background: rgba(0, 0, 0, 0.10);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    padding: 8px;
    display: flex;
    flex-direction: column;
}
.mandala-cell--center {
    background: rgba(120, 165, 255, 0.10);
    border-color: rgba(180, 200, 255, 0.32);
}
.mandala-cell__title { font-size: 11px; font-weight: 600; color: var(--muted, #998); margin-bottom: 4px; }
.mandala-cell--center .mandala-cell__title { color: #c5d2f5; }
.mandala-cell__input { flex: 1; font-size: 12px; }
.mandala-cell__readonly {
    flex: 1;
    font-size: 12px;
    line-height: 1.4;
    white-space: pre-wrap;
}
@media (max-width: 720px) {
    .mandala-grid { aspect-ratio: auto; }
}

/* ----- + 新增區塊 picker ----- */
.planning-add-section {
    margin-top: 16px;
    padding: 16px;
    border: 1px dashed var(--panel-border);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.05);
}
.planning-add-section__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.planning-add-section__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text, #d0c4a8);
}
.planning-add-section__category-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted, #998);
    margin-left: auto;
}
.planning-add-section__select {
    min-width: 240px;
}
.planning-add-section__group {
    /* 預設隱藏；.is-active 顯示（dropdown 切換） */
    display: none;
}
.planning-add-section__group.is-active {
    display: block;
}
/* 舊版分類標籤（dropdown 後不再單獨顯示） */
.planning-add-section__group-label {
    display: none;
}
.planning-add-section__picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.planning-add-section__btn {
    padding: 6px 14px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    color: var(--text, #d0c4a8);
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
}
.planning-add-section__btn:hover {
    border-color: rgba(180, 200, 255, 0.40);
    background: rgba(180, 200, 255, 0.06);
}

/* ----- 二次確認 modal ----- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}
.modal-backdrop[hidden] { display: none; }
.modal {
    background: var(--panel-bg-strong);
    border: 1px solid var(--panel-border-strong);
    border-radius: 8px;
    padding: 24px;
    max-width: 420px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.modal h3 { margin: 0 0 12px; }
.modal p { color: var(--text, #d0c4a8); margin: 0 0 18px; line-height: 1.6; }
.modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ============================================================
   企畫 AI 對話面板（task #51）
   ----------------------------------------------------------------
   桌機 ≥1024px：常駐右側欄（position: fixed 貼右、寬度 320px）
   手機 <1024px：底部抽屜（transform 由下而上滑入）+ FAB 按鈕
   ============================================================ */

:root {
    --ai-panel-width: 320px;          /* 桌機常駐欄寬度 */
    --ai-panel-z:     90;             /* 抽屜層；< modal-backdrop 100 */
}

/* ----- 桌機常駐右側欄（預設樣式） ----- */
.planning-ai-panel {
    position: fixed;
    top: var(--topbar-height);
    right: 0;
    bottom: 0;
    width: var(--ai-panel-width);
    background: var(--panel-bg-strong);
    -webkit-backdrop-filter: var(--panel-blur);
    backdrop-filter: var(--panel-blur);
    border-left: 1px solid var(--panel-border-strong);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    z-index: var(--ai-panel-z);
    /* 為何 transition 寫在通用：手機抽屜的 slide-in 也共用此屬性 */
    transition: transform 0.24s ease;
}

/* FAB（手機右下角懸浮按鈕）基礎樣式
   為何把 base 規則寫在桌機 @media 之前：原本順序顛倒（base 在後）
   會讓 `display: inline-flex` 覆寫掉桌機 @media 的 `display: none`，
   導致 1280px 視窗仍看到 FAB（task #65 修正）。 */
.planning-ai-fab {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: calc(var(--ai-panel-z) - 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--bg);
    border: 1px solid var(--accent-strong);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.planning-ai-fab:hover {
    background: var(--accent-strong);
}
.planning-ai-fab__label {
    font-size: 13px;
    letter-spacing: 0.05em;
}

/* 手機抽屜遮罩基礎樣式（理由同 .planning-ai-fab） */
.planning-ai-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: calc(var(--ai-panel-z) - 1);
}
.planning-ai-overlay--show {
    opacity: 1;
    pointer-events: auto;
}

/* 桌機：擠出 main 的右側避讓空間 */
@media (min-width: 1024px) {
    /* 為何只對 planning 頁加 padding：AI 面板（position: fixed; right: 0）
       只在 plannings/show 與 plannings/edit 出現，其他頁面（看板、儀表板等）
       根本沒裝 panel，預留右側 336px 純粹浪費寬度（task #76 二輪修正：
       拿掉原本對全 .admin-main 一律加 padding 的設計） */
    .admin-main--planning {
        /* 預設 padding 32px + AI 面板寬 + 16px 視覺呼吸 */
        padding-right: calc(var(--ai-panel-width) + 16px);
    }
    /* 桌機不顯示 FAB / 遮罩 / 收合按鈕（面板永遠開著） */
    .planning-ai-fab,
    .planning-ai-overlay,
    .planning-ai-panel__close {
        display: none;
    }
}

/* ----- 手機底部抽屜：預設收起在視窗下方 ----- */
@media (max-width: 1023.98px) {
    .planning-ai-panel {
        top: auto;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 70vh;
        max-height: 80vh;
        border-left: none;
        border-top: 1px solid var(--panel-border-strong);
        border-radius: 12px 12px 0 0;
        transform: translateY(100%);
    }
    .planning-ai-panel--open {
        transform: translateY(0);
    }
    /* 手機開啟時鎖背景捲動 */
    body.planning-ai-locked {
        overflow: hidden;
    }
}

/* ----- Panel header ----- */
.planning-ai-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--panel-border);
    flex-shrink: 0;
}
.planning-ai-panel__title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.planning-ai-panel__header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.planning-ai-panel__history-btn {
    font-size: 12px;
    padding: 4px 10px;
}
.planning-ai-panel__close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
}
.planning-ai-panel__close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

/* ----- 訊息列表 ----- */
.planning-ai-panel__messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.planning-ai-panel__empty,
.planning-ai-panel__loading {
    color: var(--text-muted);
    text-align: center;
    padding: 20px 8px;
    font-size: 13px;
    line-height: 1.6;
}
.planning-ai-panel__error {
    background: var(--error-bg);
    color: var(--error-text);
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
}

/* ----- 訊息卡片 ----- */
.planning-ai-msg {
    display: flex;
    flex-direction: column;
    max-width: 100%;
}
.planning-ai-msg--user {
    align-items: flex-end;
}
.planning-ai-msg--ai {
    align-items: flex-start;
}
.planning-ai-msg--system {
    align-items: center;
}

.planning-ai-msg__bubble {
    max-width: 85%;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.55;
    word-break: break-word;
    border: 1px solid var(--panel-border);
}
.planning-ai-msg--user .planning-ai-msg__bubble {
    background: rgba(199, 149, 114, 0.18);  /* 暖陶米金 */
    border-color: rgba(218, 176, 154, 0.32);
}
.planning-ai-msg--ai .planning-ai-msg__bubble {
    background: rgba(122, 155, 126, 0.16);  /* 苔綠 */
    border-color: rgba(122, 155, 126, 0.28);
}
.planning-ai-msg--system .planning-ai-msg__bubble {
    background: var(--panel-bg-soft);
    color: var(--text-secondary);
    font-size: 12px;
    text-align: center;
    font-style: italic;
}
.planning-ai-msg__body {
    color: var(--text-primary);
}
.planning-ai-msg__meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-muted);
}
.planning-ai-msg--ai .planning-ai-msg__meta { justify-content: flex-start; }
.planning-ai-msg--system .planning-ai-msg__meta { justify-content: center; }

/* 狀態徽章 */
.planning-ai-msg__badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.4;
    border: 1px solid transparent;
}
.planning-ai-msg__badge--queued {
    background: rgba(232, 216, 184, 0.10);
    color: var(--text-secondary);
    border-color: rgba(232, 216, 184, 0.20);
}
.planning-ai-msg__badge--processing {
    background: rgba(120, 168, 220, 0.18);
    color: #b9d2ec;
    border-color: rgba(120, 168, 220, 0.32);
}
.planning-ai-msg__badge--done {
    background: rgba(122, 200, 130, 0.20);
    color: #b8e3bd;
    border-color: rgba(122, 200, 130, 0.32);
}
.planning-ai-msg__badge--failed {
    background: rgba(220, 100, 100, 0.20);
    color: #f0b0b0;
    border-color: rgba(220, 100, 100, 0.36);
}
.planning-ai-msg--failed-send .planning-ai-msg__bubble {
    border-color: rgba(220, 100, 100, 0.40);
    background: rgba(220, 100, 100, 0.10);
}

/* ----- Composer（輸入區） ----- */
.planning-ai-panel__composer {
    border-top: 1px solid var(--panel-border);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}
.planning-ai-panel__input {
    width: 100%;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    padding: 8px 10px;
    resize: vertical;
    min-height: 56px;
    max-height: 200px;
}
.planning-ai-panel__input:focus {
    outline: none;
    border-color: var(--accent-strong);
}
.planning-ai-panel__composer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.planning-ai-panel__hint {
    font-size: 11px;
    color: var(--text-muted);
}
.planning-ai-panel__submit {
    font-size: 13px;
    padding: 6px 14px;
}
.planning-ai-panel__submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================================
   歷史版本 modal（task #52）
   ----------------------------------------------------------------
   為何不重用 .modal 預設 max-width 420：
     - 列表項較長，420 太擠；用 540 給時間/摘要/按鈕水平排版空間
   為何 confirm modal 用更高 z-index（110）：
     - 列表 modal 為 100（沿用 .modal-backdrop），confirm 必須蓋過列表
   ============================================================ */
.planning-ai-history-modal__box {
    max-width: 540px;
    width: 92%;
    /* 為何 padding 拆 header / body / actions 各區段：
       header 與 actions 較淺，body 區域 scroll 才順 */
    padding: 0;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
}
.planning-ai-history-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 12px;
    border-bottom: 1px solid var(--panel-border);
}
.planning-ai-history-modal__header h3 {
    margin: 0;
    font-size: 16px;
}
.planning-ai-history-modal__close {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
}
.planning-ai-history-modal__close:hover {
    background: rgba(255, 255, 255, 0.06);
}
.planning-ai-history-modal__body {
    /* 為何用 flex:1 + overflow auto：版本若超過 10 筆（暫時不會但保險），列表內滾動 */
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 20px;
}
.planning-ai-history-modal__loading,
.planning-ai-history-modal__empty {
    color: var(--text-muted);
    font-size: 13px;
    padding: 24px 0;
    text-align: center;
}
.planning-ai-history-modal__error {
    color: #ff8a80;
    background: rgba(255, 138, 128, 0.08);
    border: 1px solid rgba(255, 138, 128, 0.3);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 12px;
}
.planning-ai-history-modal .modal__actions {
    padding: 12px 20px 18px;
    border-top: 1px solid var(--panel-border);
}

/* 列表項 */
.planning-ai-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.planning-ai-history-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    padding: 10px 12px;
}
.planning-ai-history-item__main {
    flex: 1;
    min-width: 0;
}
.planning-ai-history-item__time {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.planning-ai-history-item__abs {
    color: var(--text-muted);
    font-size: 11px;
}
.planning-ai-history-item__summary {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.4;
    /* 為何用 overflow-wrap break-word：source_message_summary 60 字中文若無斷點會撐破容器 */
    overflow-wrap: break-word;
    word-break: break-word;
}
.planning-ai-history-item__restore {
    flex: 0 0 auto;
    font-size: 12px;
    padding: 4px 10px;
    /* 為何 align-self start：讓按鈕對齊「相對時間」那行而不是垂直置中 */
    align-self: flex-start;
}

/* 第二層：還原確認 dialog */
.planning-ai-confirm-modal {
    /* 為何 z-index 110：高於列表 modal 的 100，遮罩才會疊在最上層 */
    z-index: 110;
}
.planning-ai-confirm-modal__box {
    max-width: 460px;
}
.planning-ai-confirm-modal__box h3 {
    margin-bottom: 16px;
}

/* ============================================================
   文件系統（task #378–#382）
   設計目標：Google Drive 風格的目錄樹 + 卡片格狀檔案列表，
   沿用 admin 深墨綠主題（--panel-* / --accent）。
   為何之前「畫面與描述落差大」：先前只寫了 HTML class，admin.css
   完全沒有對應樣式，等於裸 HTML；這裡補齊整套視覺。
   ============================================================ */

/* 通用：工具列右側動作群（文件 / 編輯器共用） */
.toolbar-actions { display: flex; align-items: center; gap: 10px; }

/* ---- 版面：左目錄樹 + 右檔案區 ---- */
.docs-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    min-height: calc(100vh - var(--topbar-height) - 120px);
}

/* 左側目錄樹（Drive 左欄） */
.docs-sidebar {
    flex: 0 0 240px;
    background: var(--panel-bg);
    -webkit-backdrop-filter: var(--panel-blur);
    backdrop-filter: var(--panel-blur);
    border: 1px solid var(--panel-border);
    border-radius: var(--panel-radius);
    padding: 10px 8px;
    position: sticky;
    top: calc(var(--topbar-height) + 12px);
}
.docs-tree-list { list-style: none; margin: 0; padding: 0 0 0 14px; }
.docs-tree > .docs-tree-list { padding-left: 0; }

/* 目錄/根節點列：圖示 + 名稱，hover 與 active 高亮（Drive 左欄手感） */
.docs-tree-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.2;
    user-select: none;
    transition: background .12s, color .12s;
}
.docs-tree-item:hover { background: var(--panel-bg-soft); color: var(--text-primary); }
.docs-tree-item.active {
    background: rgba(199, 149, 114, 0.16);
    color: var(--accent-strong);
    font-weight: 600;
}
.docs-tree-item svg { flex: 0 0 auto; color: var(--tile-terra); }
.docs-tree-item.active svg { color: var(--accent-strong); }
.docs-tree-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 右側檔案主區 */
.docs-main {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--panel-bg);
    -webkit-backdrop-filter: var(--panel-blur);
    backdrop-filter: var(--panel-blur);
    border: 1px solid var(--panel-border);
    border-radius: var(--panel-radius);
    padding: 18px 20px;
}

/* 麵包屑（目前所在目錄） */
.docs-breadcrumb {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.docs-breadcrumb strong { color: var(--text-primary); font-weight: 600; }

/* 條列清單（task #379 三輪：由卡片磚改為一行一筆） */
.docs-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* 區段標題（資料夾 / 檔案分組） */
.docs-section-label {
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 10px 0 2px;
}
.docs-list .docs-section-label:first-child { margin-top: 0; }

/* 單一列（資料夾或檔案）：圖示 + 標題 + 右側 meta */
.doc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    color: var(--text-primary);
    transition: background .12s, border-color .12s;
    cursor: pointer;
    text-decoration: none;
}
.doc-row:hover { background: var(--panel-bg-soft); border-color: var(--panel-border); }
.doc-row-icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: rgba(199, 149, 114, 0.14);
    color: var(--accent);
}
/* 資料夾列用蜜金、檔案列用暖陶，視覺區分 */
.doc-row--folder .doc-row-icon { background: rgba(212, 169, 107, 0.16); color: var(--tile-terra); }
.doc-row-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.doc-row--file:hover .doc-row-title { color: var(--accent-strong); }
.doc-row-meta { flex: 0 0 auto; font-size: 12px; color: var(--text-muted); }

/* task #401：檔案列包裝層（div 包住 <a> + 刪除按鈕，讓刪除按鈕浮在右側）
   為何用 wrapper 而非直接改 .doc-row--file：HTML 規格不允許 <a> 內放 <button>，
   需要兄弟結構（link + button 同層），所以改為 flex 外層 wrapper。 */
.doc-row--file-wrapper {
    display: flex;
    align-items: center;
    gap: 0;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: background .12s, border-color .12s;
    cursor: default;
    position: relative;
}
.doc-row--file-wrapper:hover {
    background: var(--panel-bg-soft);
    border-color: var(--panel-border);
}
.doc-row--file-wrapper .doc-row-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-primary);
    text-decoration: none;
}
.doc-row--file-wrapper:hover .doc-row-link .doc-row-title { color: var(--accent-strong); }

/* 刪除按鈕（清單頁檔案列）：右側，常駐顯示
   task #419：手機無滑鼠，hover 無法觸發，改為常駐可見；
   hover 仍保留顏色強調效果，桌面體驗不退步。*/
.btn-doc-delete {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 8px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 1;
    transition: background .12s, color .12s;
}
.btn-doc-delete:hover {
    background: rgba(200, 74, 74, 0.18);
    color: rgba(220, 80, 80, 0.9);
}

/* task #418：重新命名按鈕（清單頁資料夾列）：右側，常駐顯示
   task #419：手機無滑鼠，hover 無法觸發，改為常駐可見；
   UI 順序為「無破壞性操作在左、破壞性操作在右」，重新命名排在刪除左側。 */
.btn-dir-rename {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 4px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 1;
    transition: background .12s, color .12s;
}
.btn-dir-rename:hover {
    background: rgba(74, 120, 200, 0.18);
    color: rgba(80, 140, 220, 0.9);
}

/* task #409：刪除按鈕（清單頁資料夾列）：右側，常駐顯示
   task #419：手機無滑鼠，hover 無法觸發，改為常駐可見；
   為何與 .btn-doc-delete 分開宣告而非共用：語意不同，保留各自彈性調整空間。 */
.doc-row--folder { position: relative; }
.btn-dir-delete {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 8px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 1;
    transition: background .12s, color .12s;
}
.btn-dir-delete:hover {
    background: rgba(200, 74, 74, 0.18);
    color: rgba(220, 80, 80, 0.9);
}

/* task #417：「上一層」列樣式
   為何用獨立 class 而非複用 doc-row--folder：
   「上一層」不是真正的資料夾列，不需要拖曳與刪除按鈕邏輯，
   語意上是導航控制項，用獨立 class 方便日後獨立調整。 */
.doc-row--go-up .doc-row-icon {
    background: rgba(150, 150, 180, 0.12);
    color: var(--text-muted);
}
.doc-row--go-up .doc-row-title {
    color: var(--text-muted);
    font-weight: 400;
}
.doc-row--go-up:hover .doc-row-title { color: var(--text-primary); }
.doc-row--go-up:hover .doc-row-icon { background: rgba(150, 150, 180, 0.22); }

/* task #381：拖曳中與 drop 目標的視覺回饋 */
.doc-row--dragging { opacity: .45; }
.drop-target {
    background: rgba(199, 149, 114, 0.18) !important;
    border-color: var(--accent-strong) !important;
    outline: 2px dashed var(--accent-strong);
    outline-offset: -2px;
}

/* task #381：拖曳結果 toast（右下角浮出，自動淡出） */
.docs-toast {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9999;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--accent-strong);
    color: #fff;
    font-size: 13px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .2s, transform .2s;
}
.docs-toast--show { opacity: 1; transform: translateY(0); }
.docs-toast--error { background: #b3473a; }

/* 空狀態 */
.empty-state {
    padding: 48px 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

/* 返回連結（編輯頁工具列） */
.back-link {
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
    margin-right: 4px;
}
.back-link:hover { color: var(--accent-strong); }

/* 手機版（≤768px）：分類區塊與檔案清單區塊各自佔滿 100% 全寬，上下堆疊
   原因：手機螢幕窄，左右並排兩欄會讓每欄過窄而難以操作（task #405） */
@media (max-width: 768px) {
    .docs-layout { flex-direction: column; }
    .docs-sidebar { flex-basis: auto; width: 100%; position: static; }
    /* 明確讓右側檔案主區也全寬，避免 flex 殘留 shrink 造成偏窄 */
    .docs-main { width: 100%; }
}

/* ============================================================
   待辦系統（task #385 重做 UI；task #408 美化 v1）
   版面沿用文件系統左右兩欄（.docs-layout / .docs-sidebar / .docs-main）。
   此區段補充待辦專用 class：清單列、事項列、inline 編輯、拖曳、badges 等。
   美化方向：保留深墨綠主題，改用卡片式事項、自訂 checkbox、更足的間距與陰影層次。
   ============================================================ */

/* 左欄清單列（沿用 .docs-tree-item 樣式，加寬 + 操作按鈕支援）*/
.todo-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    /* 為何加左側 accent bar：視覺上明確指示「選中」狀態，比純底色更清晰 */
    padding: 8px 10px 8px 12px;
    border-radius: 6px;
    border-left: 3px solid transparent;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.3;
    user-select: none;
    transition: background .12s, color .12s, border-color .12s;
}
.todo-list-item:hover {
    background: var(--panel-bg-soft);
    color: var(--text-primary);
}
.todo-list-item.active {
    background: rgba(199, 149, 114, 0.12);
    color: var(--accent-strong);
    font-weight: 600;
    /* 左側暖陶線條作為 active 指示器 */
    border-left-color: var(--accent);
}
.todo-list-item svg { flex: 0 0 auto; color: var(--tile-terra); }
.todo-list-item.active svg { color: var(--accent-strong); }
.todo-list-item-title {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 操作按鈕群（rename + delete），hover 才顯示 */
.todo-list-item-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: opacity .15s;
    flex: 0 0 auto;
}
.todo-list-item:hover .todo-list-item-actions { opacity: 1; }

/* 未完成數 badge（右側小圓）*/
.todo-count-badge {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(199, 149, 114, 0.24);
    color: var(--accent-strong);
    line-height: 1.6;
}
/* 定期任務標籤 */
.todo-routine-badge {
    flex: 0 0 auto;
    font-size: 11px;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(100, 160, 220, 0.18);
    color: #4da3d4;
}

/* task #387 v2：任務層級定期設定控制項（新增空白列 / inline 編輯共用）*/
.todo-routine-control {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.todo-routine-toggle {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}
.todo-routine-control .todo-routine-type,
.todo-routine-control .todo-routine-weekday {
    flex: 0 0 auto;
    min-width: 96px;
}
.todo-routine-control .todo-routine-day,
.todo-routine-control .todo-routine-interval {
    flex: 0 0 auto;
    width: 72px;
}

/* 右欄新增表單（輸入 + 日期 + 按鈕，水平排列）
   為何加底部分隔線：視覺分層，區別「新增區」與「事項清單」 */
/* [hidden] 覆寫：因 display:flex 會蓋過瀏覽器預設的 [hidden]{display:none}，
   需明確補上此規則確保 JS setAttribute('hidden','') 能正確隱藏 */
.todo-add-form[hidden] { display: none; }
.todo-add-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--panel-border);
    flex-wrap: wrap;
}
.todo-add-form .form-control { flex: 1 1 180px; }
.todo-add-form .form-control-sm { flex: 0 0 130px; }

/* 事項清單 <ul>（無預設 list-style）*/
.todo-items-ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    /* 為何加間距：事項間有呼吸空間，拖曳目標更易點選 */
    gap: 4px;
}

/* 單一事項列：改用有底色的卡片式，提升從「生硬文字列表」到「帶結構感的卡片」 */
.todo-item {
    border-radius: 8px;
    /* 預設輕底色，讓每列都有獨立感，不再依賴 hover 才顯示區塊 */
    background: rgba(232, 216, 184, 0.03);
    border: 1px solid var(--panel-border);
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.todo-item:hover {
    background: rgba(232, 216, 184, 0.07);
    border-color: var(--panel-border-strong);
    /* 輕微陰影讓 hover 卡片浮起，強化互動感 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* 事項主列（圖示/拖曳把手 + checkbox + 標題 + 日期 + 操作）*/
.todo-item-row {
    display: flex;
    align-items: center;
    gap: 10px;
    /* 為何加較多 padding：事項需要足夠點擊面積，行高視覺更寬鬆 */
    padding: 10px 12px 10px 8px;
}

/* 拖曳把手 */
.drag-handle {
    flex: 0 0 auto;
    cursor: grab;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity .15s;
    display: flex;
    align-items: center;
}
.todo-item:hover .drag-handle { opacity: 0.6; }
.drag-handle:active { cursor: grabbing; }

/* 自訂 checkbox：比原生 checkbox 更美觀，與主題色對齊
   為何用 appearance:none：原生 checkbox 跨瀏覽器外觀不一致，自訂才能保持一致的暖陶色 */
.todo-checkbox {
    flex: 0 0 auto;
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid rgba(199, 149, 114, 0.5);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: background .15s, border-color .15s;
    margin: 0;
}
.todo-checkbox:hover {
    border-color: var(--accent);
    background: rgba(199, 149, 114, 0.1);
}
.todo-checkbox:checked {
    background: var(--accent);
    border-color: var(--accent);
}
/* 勾選標記（偽元素繪製 checkmark）*/
.todo-checkbox:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 7px;
    border: 2px solid #1a2421;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

/* 完成狀態：checkbox 淡化 + 標題刪線（整列微淡，保留閱讀性）*/
.todo-item.done {
    opacity: 0.72;
}
.todo-item.done .todo-item-title {
    text-decoration: line-through;
    color: var(--text-muted);
}
.todo-item.done .todo-checkbox {
    opacity: 0.7;
}

/* 事項標題（點擊 inline 編輯）*/
.todo-item-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: text;
    color: var(--text-primary);
    line-height: 1.4;
}
.todo-item-title:hover { color: var(--accent-strong); }

/* inline 編輯 input（取代 span 文字）
   為何標題用 width:100%：標題 input 放在 flex:1 的 .todo-item-title 容器內，
   100% 正好撐滿，視覺上與新增表單的標題欄寬度一致。 */
.todo-inline-input {
    width: 100%;
    padding: 2px 6px;
    font-size: 14px;
}
/* inline 編輯模式的日期欄位寬度固定為窄欄，與新增任務表單的日期欄（130px）一致，
   避免日期 input 佔用標題空間導致標題欄視覺上過窄 */
.todo-inline-date {
    flex: 0 0 130px;
    width: 130px;
    min-width: 110px;
}

/* ── task #416：就地新增空白列的輸入框 ──
   為何不用白底：整站 admin 採深墨綠主題，白底輸入框在深色背景上過於突出刺眼；
   改用與 .form-group input 相同的半透明深色底，視覺融入整體風格。 */
.todo-new-input {
    flex: 1 1 160px;
    min-width: 80px;
    padding: 3px 8px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-primary);
    /* 與 .form-group input 同底色：半透明白，非白底 */
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--panel-border-strong);
    border-radius: 5px;
    transition: border-color .15s, background .15s;
    outline: none;
}
.todo-new-input:focus {
    border-color: var(--accent-strong);
    background: rgba(255, 255, 255, 0.10);
}
/* 日期 input 寬度固定，標題 input 彈性佔剩餘空間 */
.todo-new-input--date {
    flex: 0 0 130px;
    min-width: 110px;
}
/* 空白列操作按鈕常駐顯示（不等 hover），因為使用者明確要填寫 */
.todo-new-inline-top .todo-item-actions,
.todo-new-inline-sub .todo-item-actions {
    opacity: 1 !important;
}
/* 偽 checkbox 佔位（只是寬度對齊真實列，不做任何互動）*/
.todo-new-fake-check {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border: 1.5px solid rgba(199, 149, 114, 0.3);
    border-radius: 4px;
    display: inline-block;
}

/* 到期日標籤：較低調的 pill，僅在 overdue 時提示色 */
.todo-due-date {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--text-muted);
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(232, 216, 184, 0.07);
    border: 1px solid var(--panel-border);
    white-space: nowrap;
}
.todo-due-date.overdue {
    color: #e27070;
    background: rgba(220, 80, 80, 0.12);
    border-color: rgba(220, 80, 80, 0.3);
}

/* 操作按鈕群（子項目 + 刪除），hover 才顯示 */
.todo-item-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity .15s;
    flex: 0 0 auto;
}
.todo-item:hover .todo-item-actions { opacity: 1; }

/* 子清單（第二層，縮排顯示）
   為何加左側細線：清楚標示父子層級關係，避免混淆 */
.todo-sub-list {
    list-style: none;
    margin: 0 8px 6px 40px;
    padding: 0;
    border-left: 2px solid rgba(199, 149, 114, 0.2);
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.todo-sub-item .todo-item-row {
    padding-left: 6px;
    /* 子事項行高略小，視覺層次分明 */
    padding-top: 7px;
    padding-bottom: 7px;
}
/* 子事項底色更淡，突出與父項的層次差異 */
.todo-sub-item {
    background: rgba(232, 216, 184, 0.015);
}

/* 拖曳中：淡化原位 */
.todo-item.doc-row--dragging { opacity: .35; }
/* 拖曳目標：高亮暖陶框 */
.todo-item.drag-over {
    background: rgba(199, 149, 114, 0.12) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px rgba(199, 149, 114, 0.25) !important;
}

/* 手機版：上下堆疊（直接繼承 .docs-layout 的 @media 規則，無需重複）*/

/* ============================================================
   文件 Markdown 編輯器（task #380 二輪修訂）
   左右分割：左 Markdown 原始碼、右即時預覽，沿用深墨綠主題。
   ============================================================ */

/* 編輯頁標題列：返回箭頭 + 文件名 + 重新命名鈕 */
.doc-edit-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.doc-edit-title #doc-title-display {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 自動儲存狀態徽章 */
.autosave-status {
    font-size: 12px;
    color: var(--text-muted);
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--panel-bg-soft);
    border: 1px solid var(--panel-border);
    white-space: nowrap;
}

/* 分割版面：左右各半，固定高度填滿視窗 */
.doc-editor-layout {
    display: flex;
    gap: 16px;
    align-items: stretch;
    height: calc(100vh - var(--topbar-height) - 110px);
    min-height: 420px;
}
.doc-editor-pane,
.doc-preview-pane {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--panel-bg);
    -webkit-backdrop-filter: var(--panel-blur);
    backdrop-filter: var(--panel-blur);
    border: 1px solid var(--panel-border);
    border-radius: var(--panel-radius);
    overflow: hidden;
}

/* 左：Markdown 原始碼輸入區（等寬字、舒適行距） */
.doc-editor-textarea {
    flex: 1 1 auto;
    width: 100%;
    resize: none;
    border: 0;
    outline: none;
    padding: 18px 20px;
    background: transparent;
    color: var(--text-primary);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Noto Sans Mono CJK TC", monospace;
    font-size: 14px;
    line-height: 1.7;
    tab-size: 4;
}
.doc-editor-textarea::placeholder { color: var(--text-muted); }

/* 右：預覽區 */
.doc-preview-toolbar {
    flex: 0 0 auto;
    padding: 10px 18px;
    border-bottom: 1px solid var(--panel-border);
    background: var(--panel-bg-soft);
}
.doc-preview-label {
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.doc-preview-content {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px 22px;
}

/* 窄螢幕：上下堆疊 */
@media (max-width: 760px) {
    .doc-editor-layout { flex-direction: column; height: auto; }
    .doc-editor-pane { min-height: 300px; }
    .doc-preview-pane { min-height: 300px; }
}

/* ---- Markdown 預覽排版（.markdown-body）---- */
.markdown-body { color: var(--text-primary); font-size: 15px; line-height: 1.75; }
.markdown-body > *:first-child { margin-top: 0; }
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
    margin: 1.4em 0 .6em;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
}
.markdown-body h1 { font-size: 1.7em; border-bottom: 1px solid var(--panel-border); padding-bottom: .3em; }
.markdown-body h2 { font-size: 1.4em; border-bottom: 1px solid var(--panel-border); padding-bottom: .25em; }
.markdown-body h3 { font-size: 1.2em; }
.markdown-body p { margin: .7em 0; }
.markdown-body a { color: var(--accent-strong); }
.markdown-body ul, .markdown-body ol { padding-left: 1.6em; margin: .7em 0; }
.markdown-body li { margin: .25em 0; }
.markdown-body blockquote {
    margin: .9em 0;
    padding: .2em 1em;
    border-left: 3px solid var(--accent);
    color: var(--text-secondary);
    background: var(--panel-bg-soft);
    border-radius: 0 6px 6px 0;
}
.markdown-body code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .88em;
    padding: .15em .4em;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--accent-strong);
}
.markdown-body pre {
    margin: .9em 0;
    padding: 14px 16px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid var(--panel-border);
    overflow-x: auto;
}
.markdown-body pre code { background: transparent; padding: 0; color: var(--text-primary); }
.markdown-body table {
    border-collapse: collapse;
    margin: .9em 0;
    width: 100%;
    font-size: .92em;
}
.markdown-body th, .markdown-body td {
    border: 1px solid var(--panel-border-strong);
    padding: 7px 11px;
    text-align: left;
}
.markdown-body th { background: var(--panel-bg-soft); font-weight: 600; }
.markdown-body img { max-width: 100%; border-radius: 6px; }
.markdown-body hr { border: 0; border-top: 1px solid var(--panel-border); margin: 1.4em 0; }
/* Mermaid 圖容器置中、淺底，避免深色背景看不清 */
.markdown-body .mermaid { text-align: center; margin: 1em 0; }

/* ============================================================
   專案文件面板（task #382 二輪修訂）
   看板頁底部顯示與此專案關聯的文件，補上先前缺少的「整合界面」。
   ============================================================ */
.project-docs {
    margin-top: 24px;
    background: var(--panel-bg);
    -webkit-backdrop-filter: var(--panel-blur);
    backdrop-filter: var(--panel-blur);
    border: 1px solid var(--panel-border);
    border-radius: var(--panel-radius);
    padding: 16px 20px 20px;
}
.project-docs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.project-docs-header h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}
.project-docs-header h2 svg { color: var(--accent); }
.project-docs-count {
    font-size: 12px;
    color: var(--text-muted);
    background: var(--panel-bg-soft);
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    padding: 1px 9px;
}
.project-docs-empty {
    padding: 18px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    background: var(--panel-bg-soft);
    border: 1px dashed var(--panel-border-strong);
    border-radius: 8px;
}
.project-docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.project-doc-card {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    background: var(--panel-bg-soft);
    border: 1px solid var(--panel-border);
    border-radius: 9px;
    transition: background .14s, border-color .14s, transform .14s;
}
.project-doc-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--panel-border-strong);
    transform: translateY(-2px);
}
.project-doc-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(199, 149, 114, 0.14);
    color: var(--accent);
}
.project-doc-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.project-doc-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.project-doc-card:hover .project-doc-title { color: var(--accent-strong); }
.project-doc-meta { font-size: 12px; color: var(--text-muted); }

/* task #401：專案看板文件卡片 — wrapper + 刪除按鈕
   為何 wrapper：<a> 不能含 <button>，需兄弟結構放刪除按鈕在卡片右上角。 */
.project-doc-card-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
}
.project-doc-card-wrapper .project-doc-card {
    flex: 1 1 auto;
}
/* 刪除按鈕：右上角，hover wrapper 時才顯示 */
.btn-project-doc-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s, background .12s, color .12s;
    z-index: 1;
}
.project-doc-card-wrapper:hover .btn-project-doc-delete { opacity: 1; }
.btn-project-doc-delete:hover {
    background: rgba(200, 74, 74, 0.18);
    color: rgba(220, 80, 80, 0.9);
}

/* ============================================================
   文件編輯器工具列（task #380 三輪：本地上傳圖片按鈕）
   ============================================================ */
.doc-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--panel-border);
    flex-wrap: wrap;
}
.doc-editor-toolbar .btn { display: inline-flex; align-items: center; gap: 6px; }
.doc-editor-hint { font-size: 12px; color: var(--text-muted); }

/* ============================================================
   專案文件面板 — 選擇現有文件（task #382 二輪）
   ============================================================ */
.project-docs-actions { display: flex; align-items: center; gap: 8px; }

.pick-doc-hint { font-size: 13px; color: var(--text-muted); margin: 0 0 10px; }
.pick-doc-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 50vh;
    overflow-y: auto;
}
.pick-doc-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    background: var(--panel-bg-soft);
    color: var(--text-primary);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.pick-doc-item:hover { background: rgba(199, 149, 114, 0.14); border-color: var(--accent-strong); }
.pick-doc-item:disabled { opacity: .5; cursor: default; }
.pick-doc-item svg { flex: 0 0 auto; color: var(--accent); }
.pick-doc-item-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-doc-item-tag { flex: 0 0 auto; font-size: 11px; color: var(--text-muted); }

/* ===== 任務總覽（task #386）：固定置頂的跨清單視圖 ===== */

/* 左欄：總覽項目底部加分隔線，與一般清單視覺分開 */
.todo-overview-item {
    border-bottom: 1px solid var(--panel-border);
    margin-bottom: 4px;
    padding-bottom: 4px;
}
/* 總覽 active 狀態使用相同的 accent，視覺一致 */
.todo-overview-item.active { background: var(--panel-bg-soft); }

/* 右欄：總覽表格全寬，樸素風格，與現有深色主題搭配 */
/* 為何放大字型：staging 回饋表格字型偏小，不易閱讀；調至 15px 讓長清單也清楚可讀 */
.todo-overview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    margin-top: 8px;
}
.todo-overview-table th {
    text-align: left;
    padding: 6px 10px;
    font-weight: 600;
    font-size: 12px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--panel-border);
    white-space: nowrap;
}
.todo-ov-row {
    border-bottom: 1px solid rgba(232, 216, 184, 0.05);
    transition: background .12s;
}
.todo-ov-row:hover { background: rgba(232, 216, 184, 0.04); }
.todo-ov-row td { padding: 8px 10px; vertical-align: middle; }

/* 勾選欄：窄欄，checkbox 居中 */
.todo-ov-col-done { width: 34px; text-align: center; }

/* 到期日欄：固定寬，不換行；字型隨表格繼承，不另縮小 */
/* 為何移除 font-size: 12px：與表格主字型保持一致，避免欄位間大小不均 */
.todo-ov-col-due { width: 110px; white-space: nowrap; color: var(--text-muted); }

/* 標題欄：盡量撐滿 */
.todo-ov-col-title { min-width: 0; }

/* 所屬清單欄：muted，與表格主字型一致，不另縮小 */
/* 為何移除 font-size: 12px：所有欄位統一使用表格繼承的字型大小，視覺更整齊 */
.todo-ov-col-list { width: 160px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 過期未完成列：整列到期日欄標紅 */
.todo-ov-date-overdue { color: #e27070 !important; font-weight: 600; }
/* 過期列：整列有極淡紅底，讓使用者更快掃到需要處理的項目 */
.todo-ov-overdue { background: rgba(220, 80, 80, 0.06) !important; }
.todo-ov-overdue:hover { background: rgba(220, 80, 80, 0.1) !important; }

/* 完成列：標題加刪除線 + 整體淡化 */
.todo-ov-done { opacity: 0.55; }
.todo-ov-title-done { text-decoration: line-through; color: var(--text-muted); }

/* 總覽 checkbox：與普通清單同樣樣式 */
.todo-ov-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border: 2px solid var(--panel-border);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: border-color .15s, background .15s;
    flex: 0 0 auto;
    vertical-align: middle;
    display: inline-block;
}
.todo-ov-checkbox:hover { border-color: var(--accent); }
.todo-ov-checkbox:checked {
    background: var(--accent);
    border-color: var(--accent);
}
/* 為何調整打鉤位置：staging 回饋勾的位置偏掉；
   用 top/left 各 1px 讓短邊在框內垂直置中，transform-origin 搭配 rotate 讓勾型對齊 */
.todo-ov-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 0px;
    width: 6px;
    height: 9px;
    border: 2px solid #1a2421;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translate(-1px, 0px);
}