/* ==========================================================================
   風險合規部事務管理系統 — Design System
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root{
  --font-sans: "Plus Jakarta Sans","Segoe UI","PingFang TC","Microsoft JhengHei","Noto Sans TC",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono: "SFMono-Regular",Consolas,"Cascadia Mono",monospace;

  /* Brand（2026-09 改版：參考 logistics-risk-management 的 sky / slate 色系，飽和度降低） */
  --color-primary:#0284C7;
  --color-primary-dark:#0369A1;
  --color-primary-light:#E0F2FE;
  --color-on-primary:#FFFFFF;
  --color-secondary:#0EA5E9;
  --color-accent:#059669;
  --color-accent-dark:#047857;
  --color-accent-light:#D1FAE5;

  /* Surfaces */
  --color-bg:#F6F8FB;
  --color-surface:#FFFFFF;
  --color-surface-raised:#FFFFFF;
  --color-muted:#F1F5F9;
  --color-muted-strong:#E2E8F0;
  /* 比 muted 再淡一階的底色（表頭、hover、小卡底），多處樣式已在使用 */
  --color-bg-subtle:#F8FAFC;
  --color-border:#E2E8F0;
  --color-border-strong:#CBD5E1;

  /* Text（slate 系：比純黑柔和，但對比仍足夠） */
  --color-fg:#1E293B;
  --color-fg-secondary:#475569;
  --color-fg-tertiary:#64748B;
  --color-on-dark:#F8FAFC;

  /* Semantic */
  --color-destructive:#DC2626;
  --color-destructive-light:#FEE2E2;
  --color-warning:#D97706;
  --color-warning-light:#FEF3C7;
  --color-success:#059669;
  --color-success-light:#D1FAE5;
  --color-info:#0284C7;
  --color-ring:#0EA5E9;

  /* 甘特圖色條：低飽和的莫蘭迪色（一般 / Routine / 逾期 / 暫停） */
  --gantt-general:#3F6E8C;
  --gantt-routine:#5A8250;
  --gantt-overdue:#B34D4D;
  --gantt-hold:#9C6B24;

  /* Elevation（更輕、更柔的陰影） */
  --shadow-sm:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.05);
  --shadow-md:0 6px 18px -6px rgba(15,23,42,.10);
  --shadow-lg:0 24px 48px -12px rgba(15,23,42,.18);
  --shadow-focus:0 0 0 3px rgba(14,165,233,.22);

  /* Radius */
  /* 圓角加大，整體更圓潤 */
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px;

  /* Spacing (4px base) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  /* Type scale (bumped up for readability) */
  --fs-xs:13.5px; --fs-sm:15px; --fs-base:16px; --fs-md:17px; --fs-lg:19px;
  --fs-xl:21px; --fs-2xl:25px; --fs-3xl:31px; --fs-4xl:37px;

  --topbar-h:64px;
  --sidebar-w:264px;
  --sidebar-w-collapsed:76px;

  --present-font-scale:1;
  --present-col-scale:1;

  color-scheme: light;
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --color-primary:#38BDF8;
  --color-primary-dark:#0EA5E9;
  --color-primary-light:#0C3A55;
  --color-on-primary:#0B1220;
  --color-secondary:#93C5FD;
  --color-accent:#34D399;
  --color-accent-dark:#10B981;
  --color-accent-light:#0F3D2E;

  --color-bg:#0B1220;
  --color-surface:#121A2C;
  --color-surface-raised:#16213A;
  --color-muted:#17233B;
  --color-muted-strong:#1E2C48;
  --color-bg-subtle:#141F35;
  --color-border:#243452;
  --color-border-strong:#33476B;

  --color-fg:#E7ECF7;
  --color-fg-secondary:#B7C2D8;
  --color-fg-tertiary:#93A2BF;
  --color-on-dark:#0B1220;

  --color-destructive:#F87171;
  --color-destructive-light:#3B1418;
  --color-warning:#FBBF24;
  --color-warning-light:#3A2A0A;
  --color-success:#34D399;
  --color-success-light:#0F3D2E;
  --color-info:#60A5FA;
  --color-ring:#60A5FA;

  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 4px 14px rgba(0,0,0,.45);
  --shadow-lg:0 16px 40px rgba(0,0,0,.55);
  --gantt-general:#4F86A8; --gantt-routine:#6A9A5E; --gantt-overdue:#C25B5B; --gantt-hold:#B07D34;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --color-primary:#38BDF8; --color-primary-dark:#0EA5E9; --color-primary-light:#0C3A55; --color-on-primary:#0B1220;
    --color-secondary:#93C5FD; --color-accent:#34D399; --color-accent-dark:#10B981; --color-accent-light:#0F3D2E;
    --color-bg:#0B1220; --color-surface:#121A2C; --color-surface-raised:#16213A;
    --color-muted:#17233B; --color-muted-strong:#1E2C48; --color-bg-subtle:#141F35; --color-border:#243452; --color-border-strong:#33476B;
    --color-fg:#E7ECF7; --color-fg-secondary:#B7C2D8; --color-fg-tertiary:#93A2BF; --color-on-dark:#0B1220;
    --color-destructive:#F87171; --color-destructive-light:#3B1418; --color-warning:#FBBF24; --color-warning-light:#3A2A0A;
    --color-success:#34D399; --color-success-light:#0F3D2E; --color-info:#60A5FA; --color-ring:#60A5FA;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 4px 14px rgba(0,0,0,.45); --shadow-lg:0 16px 40px rgba(0,0,0,.55);
    --gantt-general:#4F86A8; --gantt-routine:#6A9A5E; --gantt-overdue:#C25B5B; --gantt-hold:#B07D34;
  }
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--fs-base);
  line-height:1.55;
  color:var(--color-fg);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:700;letter-spacing:-.01em;}
p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
button{font-family:inherit;}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;}
a{color:var(--color-primary);text-decoration:none;}
img,svg{display:block;max-width:100%;}
::selection{background:var(--color-primary-light);color:var(--color-fg);}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
}

:focus-visible{outline:2.5px solid var(--color-ring);outline-offset:2px;border-radius:4px;}
button,[role="button"],a,input,select,textarea{touch-action:manipulation;}

.icon{display:inline-flex;width:18px;height:18px;flex:0 0 auto;}
.icon svg{width:100%;height:100%;}
[data-icon]{display:inline-flex;width:18px;height:18px;vertical-align:-4px;}
[data-icon] svg{width:100%;height:100%;}

/* ==========================================================================
   Shell layout
   ========================================================================== */
.app-shell{
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas: "topbar topbar" "sidebar main";
  min-height:100dvh;
}
.app-shell.sidebar-collapsed{grid-template-columns: var(--sidebar-w-collapsed) 1fr;}

.topbar{
  grid-area: topbar;
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:var(--sp-3);
  padding:0 var(--sp-4);
  background:var(--color-surface);
  border-bottom:1px solid var(--color-border);
  box-shadow:var(--shadow-sm);
}
.topbar-menu-btn{display:none;}
.topbar-brand{display:flex;align-items:center;gap:var(--sp-2);flex:0 0 auto;}
.brand-mark{
  width:36px;height:36px;border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));
  color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm);
}
.brand-mark [data-icon]{width:20px;height:20px;color:#fff;}
.brand-text{display:flex;flex-direction:column;line-height:1.2;}
.brand-title{font-weight:800;font-size:var(--fs-sm);color:var(--color-fg);}
.brand-sub{font-size:var(--fs-xs);color:var(--color-fg-secondary);font-weight:600;}

.topbar-dept-switch{flex:0 0 auto;}
.select-plain{
  appearance:none; border:1px solid var(--color-border); background:var(--color-muted);
  border-radius:var(--r-sm); padding:8px 30px 8px 12px; font-size:var(--fs-sm); font-weight:600;
  color:var(--color-fg); cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23475569' stroke-width='2'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center; background-size:14px;
  min-height:38px;
}
.select-plain:hover{border-color:var(--color-border-strong);}

.topbar-search{
  position:relative;
  flex:1 1 auto; max-width:520px; display:flex; align-items:center; gap:var(--sp-2);
  background:var(--color-muted); border:1px solid var(--color-border); border-radius:var(--r-pill);
  padding:0 var(--sp-3); height:40px; color:var(--color-fg-tertiary); margin-left:var(--sp-2);
}
.topbar-search:focus-within{border-color:var(--color-primary); box-shadow:var(--shadow-focus); color:var(--color-fg);}
.topbar-search [data-icon]{color:var(--color-fg-tertiary);}
.topbar-search input{flex:1;border:0;background:transparent;outline:none;height:100%;font-size:var(--fs-sm);color:var(--color-fg);}
.kbd-hint{
  font-family:var(--font-mono); font-size:12px; color:var(--color-fg-tertiary);
  border:1px solid var(--color-border-strong); border-radius:4px; padding:1px 6px; background:var(--color-surface);
}

.topbar-actions{display:flex;align-items:center;gap:var(--sp-2);margin-left:auto;flex:0 0 auto;}
.icon-btn{
  width:38px;height:38px;border-radius:var(--r-sm);border:1px solid transparent;background:transparent;
  color:var(--color-fg-secondary); display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .15s ease, color .15s ease, transform .1s ease;
}
.icon-btn:hover{background:var(--color-muted);color:var(--color-fg);}
.icon-btn:active{transform:scale(.94);}
.icon-btn.is-active{background:var(--color-primary-light);color:var(--color-primary-dark);}

.role-switch{display:flex;}
.role-switch .select-plain{min-height:38px;}

.user-chip{display:flex;align-items:center;gap:var(--sp-2);padding:4px 10px 4px 4px;border-radius:var(--r-pill);background:var(--color-muted);border:1px solid var(--color-border);}
.avatar{
  width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--color-accent),var(--color-accent-dark));
  color:#fff;font-weight:700;font-size:var(--fs-sm);display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.avatar.sm{width:24px;height:24px;font-size:12px;}
.avatar.lg{width:44px;height:44px;font-size:var(--fs-md);}
.user-name{font-size:var(--fs-sm);font-weight:700;color:var(--color-fg);white-space:nowrap;}

/* ---------- Sidebar ---------- */
.sidebar{
  grid-area:sidebar;
  background:var(--color-surface);
  border-right:1px solid var(--color-border);
  padding:var(--sp-4) var(--sp-3);
  display:flex; flex-direction:column; justify-content:space-between; gap:var(--sp-4);
  position:sticky; top:var(--topbar-h); height:calc(100dvh - var(--topbar-h)); overflow-y:auto;
  transition:width .18s ease;
}
.nav-group{display:flex;flex-direction:column;gap:2px;}
.nav-item{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:10px var(--sp-3); border-radius:var(--r-sm); color:var(--color-fg-secondary);
  font-weight:600; font-size:var(--fs-base); cursor:pointer; border:1px solid transparent; white-space:nowrap;
  min-height:44px;
}
.nav-item [data-icon]{width:20px;height:20px;flex:0 0 auto;color:var(--color-fg-tertiary);}
.nav-item:hover{background:var(--color-muted);color:var(--color-fg);}
.nav-item.is-active{background:var(--color-primary-light);color:var(--color-primary-dark);}
.nav-item.is-active [data-icon]{color:var(--color-primary-dark);}
.nav-item .nav-label{overflow:hidden;text-overflow:ellipsis;}
.nav-item.is-locked{opacity:.5;cursor:not-allowed;}
/* 選單分組：日常作業 / 知識與資源 / 報表與設定（首頁儀表板不歸組，永遠在最上面） */
.nav-section{display:flex;flex-direction:column;gap:2px;margin-top:12px;padding-top:10px;
  border-top:1px solid var(--color-border);}
.nav-section-title{display:flex;align-items:center;padding:0 var(--sp-3) 4px;
  font-size:12.5px;font-weight:800;letter-spacing:.06em;color:var(--color-fg-tertiary);text-transform:uppercase;}
.app-shell.sidebar-collapsed .nav-section-title{display:none;}
.app-shell.sidebar-collapsed .nav-section{margin-top:8px;padding-top:8px;align-self:stretch;}
.sidebar-footer{font-size:12px;color:var(--color-fg-tertiary);padding:0 var(--sp-2);}
.app-shell.sidebar-collapsed .nav-label,
.app-shell.sidebar-collapsed .sidebar-version{display:none;}
.app-shell.sidebar-collapsed .sidebar{align-items:center;}
.app-shell.sidebar-collapsed .nav-item{justify-content:center;padding:10px;}

.sidebar-scrim{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:150;}

/* ---------- Main ---------- */
.main-content{grid-area:main; min-width:0; padding:var(--sp-6); padding-bottom:var(--sp-16);}
.view-root{max-width:2200px;margin:0 auto;display:flex;flex-direction:column;gap:var(--sp-6);}

.scroll-top-btn{
  position:fixed; right:24px; bottom:24px; height:44px; padding:0 16px 0 13px; border-radius:22px;
  background:var(--color-primary); color:#fff; border:2px solid rgba(255,255,255,.75); box-shadow:var(--shadow-lg);
  display:flex;align-items:center;justify-content:center;gap:6px; cursor:pointer; z-index:120;
  font-size:14.5px; font-weight:700; white-space:nowrap;
  opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .2s ease, transform .2s ease;
}
.scroll-top-btn svg,.scroll-top-btn .icon{width:18px;height:18px;}
.scroll-top-btn.visible{opacity:1;transform:translateY(0);pointer-events:auto;}
.scroll-top-btn:hover{background:var(--color-primary-dark);transform:translateY(-2px);}
@media (max-width:640px){ .scroll-top-btn{right:14px;bottom:14px;padding:0 14px 0 11px;} }

/* ==========================================================================
   Page header / toolbar
   ========================================================================== */
.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;}
.page-header h1{font-size:var(--fs-2xl);}
.page-header .page-desc{color:var(--color-fg-secondary);font-size:var(--fs-sm);margin-top:4px;}
.page-header-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;}
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--color-fg-tertiary);font-weight:600;}
.breadcrumb a{color:var(--color-fg-tertiary);}
.breadcrumb .sep{opacity:.6;}
.breadcrumb .current{color:var(--color-fg);}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:40px;padding:0 var(--sp-4);border-radius:var(--r-sm);
  font-size:var(--fs-sm);font-weight:700;cursor:pointer;border:1px solid transparent;
  transition:filter .15s ease, background .15s ease, transform .08s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.98);}
.btn [data-icon]{width:17px;height:17px;}
.btn-primary{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--color-primary-dark);}
.btn-accent{background:var(--color-accent);color:#fff;}
.btn-accent:hover{background:var(--color-accent-dark);}
.btn-outline{background:var(--color-surface);border-color:var(--color-border-strong);color:var(--color-fg);}
.btn-outline:hover{background:var(--color-muted);}
.btn-ghost{background:transparent;color:var(--color-fg-secondary);}
.btn-ghost:hover{background:var(--color-muted);color:var(--color-fg);}
.btn-danger{background:var(--color-destructive);color:#fff;}
.btn-danger:hover{filter:brightness(.92);}
.btn-sm{height:32px;padding:0 var(--sp-3);font-size:var(--fs-xs);border-radius:8px;}
.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none;}
.btn-block{width:100%;}

/* ==========================================================================
   Cards / surfaces
   ========================================================================== */
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);}
.card-pad{padding:var(--sp-5);}
.card-header{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--color-border);}
.card-header h2,.card-header h3{font-size:var(--fs-md);}
.card-body{padding:var(--sp-5);}
.card-body.tight{padding:0;}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--sp-4);}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);align-items:start;}
.stat-card{
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--r-lg);
  padding:var(--sp-5);display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);
}
.stat-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--stat-color,var(--color-primary));}
.stat-label{font-size:var(--fs-xs);color:var(--color-fg-secondary);font-weight:700;display:flex;align-items:center;gap:6px;}
.stat-value{font-size:var(--fs-3xl);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.stat-sub{font-size:var(--fs-xs);color:var(--color-fg-tertiary);display:flex;align-items:center;gap:4px;}
.stat-sub.up{color:var(--color-success);}
.stat-sub.down{color:var(--color-destructive);}

.section-title{font-size:var(--fs-lg);font-weight:800;display:flex;align-items:center;gap:8px;}
.section-sub{color:var(--color-fg-secondary);font-size:var(--fs-sm);}

/* ==========================================================================
   Badges / tags / chips
   ========================================================================== */
.badge{
  display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--r-pill);
  font-size:12.5px;font-weight:700;line-height:1.6;white-space:nowrap;border:1px solid transparent;
}
.badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto;}
.badge-neutral{background:var(--color-muted);color:var(--color-fg-secondary);}
.badge-primary{background:var(--color-primary-light);color:var(--color-primary-dark);}
.badge-accent{background:var(--color-accent-light);color:var(--color-accent-dark);}
.badge-warning{background:var(--color-warning-light);color:var(--color-warning);}
.badge-danger{background:var(--color-destructive-light);color:var(--color-destructive);}
.badge-outline{background:transparent;border-color:var(--color-border-strong);color:var(--color-fg-secondary);}
.badge-purple{background:#EDE9FE;color:#6D28D9;}
.badge-teal{background:#CFFAFE;color:#0E7490;}
.badge-success{background:var(--color-success-light);color:var(--color-success);}

.tag-pill{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:700;background:var(--color-muted);color:var(--color-fg-secondary);
  border:1px solid var(--color-border);cursor:pointer;user-select:none;
}
.tag-pill.selected{background:var(--color-primary);color:#fff;border-color:var(--color-primary);}
.tag-pill .swatch{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}

.avatar-stack{display:flex;align-items:center;}
.avatar-stack .avatar{margin-left:-8px;border:2px solid var(--color-surface);}
.avatar-stack .avatar:first-child{margin-left:0;}

/* ==========================================================================
   Filter bar
   ========================================================================== */
.filter-bar{
  display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--r-lg);
  padding:var(--sp-3);box-shadow:var(--shadow-sm);
}
.filter-search{
  display:flex;align-items:center;gap:8px;background:var(--color-muted);border:1px solid var(--color-border);
  border-radius:var(--r-sm);padding:0 10px;height:38px;min-width:180px;flex:1 1 220px;color:var(--color-fg-tertiary);
}
.filter-search input{border:0;background:transparent;outline:none;flex:1;color:var(--color-fg);font-size:var(--fs-sm);}
.filter-group{position:relative;}
.filter-trigger{
  display:flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:var(--r-sm);
  background:var(--color-muted);border:1px solid var(--color-border);font-size:var(--fs-sm);font-weight:600;
  color:var(--color-fg);cursor:pointer;white-space:nowrap;
}
.filter-trigger:hover{border-color:var(--color-border-strong);}
.filter-trigger.has-value{background:var(--color-primary-light);border-color:var(--color-primary);color:var(--color-primary-dark);}
.filter-trigger .count{background:var(--color-primary);color:#fff;border-radius:var(--r-pill);font-size:11.5px;padding:1px 6px;font-weight:800;}
.filter-panel{
  position:absolute;top:calc(100% + 6px);left:0;min-width:220px;max-height:320px;overflow-y:auto;
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);padding:var(--sp-2);z-index:60;display:none;
}
.filter-panel.open{display:block;}
.filter-option{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:var(--fs-sm);}
.filter-option:hover{background:var(--color-muted);}
.filter-option input{width:16px;height:16px;accent-color:var(--color-primary);}
.filter-bar-spacer{flex:1 1 auto;}
.btn-clear-filters{
  display:flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:var(--r-sm);
  background:transparent;border:1px dashed var(--color-border-strong);font-size:var(--fs-sm);font-weight:700;
  color:var(--color-fg-secondary);cursor:pointer;
}
.btn-clear-filters:hover{color:var(--color-destructive);border-color:var(--color-destructive);}
.view-toggle{display:flex;background:var(--color-muted);border:1px solid var(--color-border);border-radius:var(--r-sm);padding:2px;}
.view-toggle button{
  height:32px;padding:0 12px;border-radius:7px;border:none;background:transparent;color:var(--color-fg-secondary);
  font-size:var(--fs-xs);font-weight:700;cursor:pointer;display:flex;align-items:center;gap:5px;
}
.view-toggle button.is-active{background:var(--color-surface);color:var(--color-primary-dark);box-shadow:var(--shadow-sm);}

/* ==========================================================================
   Tables
   ========================================================================== */
.table-wrap{overflow-x:auto;border-radius:var(--r-lg);}
table.data-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:640px;}
table.data-table thead th{
  text-align:left;padding:11px 14px;background:var(--color-muted);color:var(--color-fg-secondary);
  font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;position:sticky;top:0;
  border-bottom:1px solid var(--color-border);cursor:pointer;user-select:none;
}
table.data-table thead th:hover{color:var(--color-fg);}
table.data-table thead th .sort-arrow{display:inline-block;margin-left:4px;opacity:.4;}
table.data-table thead th.sorted .sort-arrow{opacity:1;color:var(--color-primary);}
table.data-table tbody td{padding:12px 14px;border-bottom:1px solid var(--color-border);vertical-align:middle;color:var(--color-fg);}
table.data-table tbody tr{transition:background .12s ease;}
table.data-table tbody tr:hover{background:var(--color-muted);}
table.data-table tbody tr:last-child td{border-bottom:none;}
table.data-table tbody tr.is-selected{background:var(--color-primary-light);}
.td-num{font-variant-numeric:tabular-nums;text-align:right;}
table.data-table td.inv-over{color:var(--color-destructive);font-weight:800;box-shadow:inset 0 0 0 2px var(--color-destructive);}
.row-checkbox, .th-checkbox input{width:16px;height:16px;accent-color:var(--color-primary);cursor:pointer;}

.bulk-actionbar{
  display:flex;align-items:center;gap:var(--sp-3);background:var(--color-fg);color:#fff;border-radius:var(--r-md);
  padding:10px var(--sp-4);position:sticky;bottom:var(--sp-4);box-shadow:var(--shadow-lg);z-index:40;
}
.bulk-actionbar .btn-ghost{color:#fff;}
.bulk-actionbar .btn-ghost:hover{background:rgba(255,255,255,.15);}

/* ==========================================================================
   Forms
   ========================================================================== */
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:var(--fs-xs);font-weight:700;color:var(--color-fg-secondary);display:flex;align-items:center;gap:4px;}
.field .required{color:var(--color-destructive);}
.field .hint{font-size:12px;color:var(--color-fg-tertiary);}
.input, .textarea, .select{
  width:100%;border:1px solid var(--color-border-strong);background:var(--color-surface);border-radius:var(--r-sm);
  padding:10px 12px;font-size:var(--fs-sm);color:var(--color-fg);min-height:42px;
}
.textarea{min-height:90px;resize:vertical;line-height:1.5;}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--color-primary);box-shadow:var(--shadow-focus);}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4);}
.form-grid .span-2{grid-column:1/-1;}
.checkbox-row{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);}
.checkbox-row input{width:17px;height:17px;accent-color:var(--color-primary);}
.multiselect-chips{display:flex;flex-wrap:wrap;gap:6px;padding:8px;border:1px solid var(--color-border-strong);border-radius:var(--r-sm);min-height:42px;}
.multiselect-chips .chip{display:flex;align-items:center;gap:5px;background:var(--color-primary-light);color:var(--color-primary-dark);padding:3px 8px;border-radius:var(--r-pill);font-size:12.5px;font-weight:700;}
.multiselect-chips .chip button{border:none;background:none;color:inherit;cursor:pointer;display:flex;}

/* ==========================================================================
   Modal
   ========================================================================== */
.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(2px);display:flex;align-items:flex-start;justify-content:center;padding:5vh var(--sp-4);z-index:300;overflow-y:auto;animation:fadeIn .15s ease;}
.modal{background:var(--color-surface);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);width:100%;max-width:640px;animation:modalIn .18s ease;margin-bottom:5vh;}
.modal.modal-wide{max-width:920px;}
/* 更寬的彈窗：專案詳細 / 時間表 / 效率分析等「兩欄＋甘特圖」的內容需要更多水平空間 */
.modal.modal-xl{max-width:1280px;}
.modal.modal-full{max-width:1600px;}
.modal-backdrop.is-roomy{padding:3vh var(--sp-3);}
.modal-backdrop.is-roomy .modal{margin-bottom:3vh;}
.modal.modal-xl>.modal-body,.modal.modal-full>.modal-body{max-height:78vh;}
@media (max-width:1340px){ .modal.modal-xl,.modal.modal-full{max-width:97vw;} }
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-5);border-bottom:1px solid var(--color-border);}
.modal-header h3{font-size:var(--fs-lg);}
.modal-body{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4);max-height:70vh;overflow-y:auto;}
.modal-footer{display:flex;justify-content:flex-end;gap:var(--sp-2);padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--color-border);}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes modalIn{from{opacity:0;transform:translateY(-8px) scale(.98);}to{opacity:1;transform:none;}}
/* 表單彈窗點到外面：不關閉，只輕晃提示 */
.modal.is-nudge{animation:modalNudge .32s ease;}
@keyframes modalNudge{0%,100%{transform:none;}25%{transform:scale(1.012);}60%{transform:scale(.996);}}
/* 未儲存變更提醒：疊在編輯彈窗上方 */
.modal-backdrop.dirty-guard-backdrop{z-index:450;align-items:center;background:rgba(15,23,42,.28);backdrop-filter:none;}
.modal.dirty-guard{max-width:440px;margin-bottom:0;}
.dirty-guard .modal-header{padding:16px 20px;}
.dirty-guard .modal-header h3{display:flex;align-items:center;gap:8px;font-size:17px;}
.dirty-guard .modal-header [data-icon] svg{width:20px;height:20px;color:var(--color-warning);}
.dirty-guard .modal-body{padding:16px 20px;gap:6px;font-size:14px;line-height:1.6;color:var(--color-fg-secondary);}
.dirty-guard .dg-sub{font-size:13px;color:var(--color-fg-tertiary);}
.dirty-guard .modal-footer{padding:12px 20px;gap:8px;}
.dirty-guard .dg-discard{color:var(--color-destructive);border-color:color-mix(in srgb,var(--color-destructive) 45%,var(--color-border));}
.dirty-guard .dg-discard:hover{background:var(--color-destructive-light);}

/* ==========================================================================
   Toast
   ========================================================================== */
.toast-stack{position:fixed;top:80px;right:24px;z-index:500;display:flex;flex-direction:column;gap:10px;}
.toast{
  display:flex;align-items:center;gap:10px;background:var(--color-fg);color:#fff;padding:12px 16px;border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);font-size:var(--fs-sm);font-weight:600;min-width:260px;animation:toastIn .2s ease;
}
.toast.success{background:var(--color-accent-dark);}
.toast.error{background:var(--color-destructive);}
.toast.info{background:var(--color-primary-dark);}
@keyframes toastIn{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:none;}}

/* ==========================================================================
   Tabs
   ========================================================================== */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--color-border);flex-wrap:wrap;}
.tab-btn{padding:10px 16px;border:none;background:none;font-size:var(--fs-sm);font-weight:700;color:var(--color-fg-secondary);cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1px;}
.tab-btn:hover{color:var(--color-fg);}
.tab-btn.is-active{color:var(--color-primary-dark);border-color:var(--color-primary);}

/* ==========================================================================
   Progress
   ========================================================================== */
.progress-track{height:8px;border-radius:var(--r-pill);background:var(--color-muted-strong);overflow:hidden;}
.progress-fill{height:100%;border-radius:var(--r-pill);background:var(--color-primary);transition:width .3s ease;}
.progress-fill.accent{background:var(--color-accent);}
.progress-fill.warn{background:var(--color-warning);}
.progress-fill.danger{background:var(--color-destructive);}
.progress-label{display:flex;justify-content:space-between;font-size:12px;color:var(--color-fg-secondary);font-weight:700;margin-bottom:5px;}

/* ==========================================================================
   Empty state
   ========================================================================== */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:var(--sp-12) var(--sp-4);color:var(--color-fg-tertiary);text-align:center;}
.empty-state [data-icon]{width:40px;height:40px;opacity:.5;}
.empty-state .empty-title{font-weight:700;color:var(--color-fg-secondary);font-size:var(--fs-md);}
.empty-state .empty-desc{font-size:var(--fs-sm);max-width:360px;}

/* ==========================================================================
   Charts (hand-rolled SVG / div based)
   ========================================================================== */
.chart-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--color-fg-secondary);margin-top:10px;}
.chart-legend-item{display:flex;align-items:center;gap:6px;font-weight:600;}
.chart-legend-item .swatch{width:10px;height:10px;border-radius:3px;}
.barlist{display:flex;flex-direction:column;gap:12px;}
.barlist-row{display:grid;grid-template-columns:110px 1fr 46px;align-items:center;gap:10px;font-size:var(--fs-sm);}
.barlist-label{color:var(--color-fg-secondary);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.barlist-track{height:12px;border-radius:6px;background:var(--color-muted-strong);overflow:hidden;}
.barlist-fill{height:100%;border-radius:6px;}
.barlist-val{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;}
.donut-wrap{display:flex;align-items:center;gap:var(--sp-6);flex-wrap:wrap;}
.donut-center-label{font-size:var(--fs-2xl);font-weight:800;}
.donut-center-sub{font-size:12px;color:var(--color-fg-tertiary);font-weight:700;}

/* ==========================================================================
   Gantt
   ========================================================================== */
.gantt-wrap{overflow-x:auto;border:1px solid var(--color-border);border-radius:var(--r-lg);background:var(--color-surface);}
.gantt-grid{display:grid;min-width:900px;}
.gantt-head{display:grid;grid-template-columns:var(--g-label-w,220px) 1fr;border-bottom:1px solid var(--color-border);position:sticky;top:0;background:var(--color-surface);z-index:2;}
.gantt-head-side{padding:10px 14px;font-size:12px;font-weight:700;color:var(--color-fg-secondary);text-transform:uppercase;border-right:1px solid var(--color-border);display:flex;align-items:center;}
.gantt-head-timeline{display:grid;}
.gantt-head-cell{padding:10px 4px;font-size:12px;font-weight:700;text-align:center;color:var(--color-fg-secondary);border-right:1px solid var(--color-border);}
.gantt-row{display:grid;grid-template-columns:var(--g-label-w,220px) 1fr;border-bottom:1px solid var(--color-border);min-height:44px;}
.gantt-row:last-child{border-bottom:none;}
.gantt-row-label{padding:8px 14px;border-right:1px solid var(--color-border);display:flex;flex-direction:column;justify-content:center;gap:2px;}
.gantt-row-title{font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gantt-row-meta{font-size:12px;color:var(--color-fg-tertiary);}
.gantt-row-track{position:relative;background-image:linear-gradient(to right, var(--color-border) 1px, transparent 1px);background-size:calc(100%/var(--gcols,12)) 100%;}
.gantt-bar{
  position:absolute;top:9px;height:26px;border-radius:7px;background:var(--gantt-general);
  display:flex;align-items:center;padding:0 8px;color:#fff;font-size:12px;font-weight:700;overflow:hidden;white-space:nowrap;
  box-shadow:var(--shadow-sm);
}
.gantt-bar.routine{background:var(--gantt-routine);}
.gantt-bar.overdue{background:var(--gantt-overdue);}
.gantt-bar.is-clickable{cursor:pointer;}
.gantt-bar.is-clickable:hover{filter:brightness(1.08);outline:2px solid color-mix(in srgb,var(--color-primary) 45%,transparent);outline-offset:1px;}
/* 依完成進度：整條實色，未完成部分覆蓋半透明淡色 */
.gantt-bar-rem{position:absolute;top:0;right:0;bottom:0;border-radius:0 7px 7px 0;z-index:0;
  /* 未完成段：淡色 ＋ 斜紋，列印 / PDF 也分得出「實心＝已完成、淡色斜紋＝未完成」 */
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.80) 0 5px,rgba(255,255,255,.66) 5px 10px);}
.gantt-bar.is-partial{box-shadow:inset 0 0 0 1.5px rgba(15,23,42,.10);}
/* 未完成的色條：文字加白底小標籤，不管壓在實色或淡色段都看得清楚 */
.gantt-bar.is-partial .gantt-bar-text{color:var(--color-fg);text-shadow:none;background:rgba(255,255,255,.88);
  padding:0 6px;border-radius:5px;line-height:1.45;max-width:100%;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
/* 列印 / 另存 PDF：強制保留色條底色與斜紋（瀏覽器預設會省略背景色） */
.gantt-bar,.gantt-bar-rem,.gantt-today,.gantt-legend-item i,.chart-legend .swatch,.evg-chip i{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.gantt-bar-text{position:relative;z-index:1;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 1px rgba(0,0,0,.28);}
.gantt-today{position:absolute;top:0;bottom:0;width:2px;background:var(--color-destructive);z-index:2;}
/* 階段／類型圖例 */
.gantt-legend{display:flex;flex-wrap:wrap;gap:6px 14px;padding:7px 14px;border-top:1px solid var(--color-border);
  background:var(--color-surface);font-size:12px;font-weight:700;color:var(--color-fg-secondary);}
.gantt-legend-item{display:inline-flex;align-items:center;gap:5px;}
.gantt-legend-item i{width:11px;height:11px;border-radius:3px;display:inline-block;}
/* 緊密模式：壓縮行高與留白，整張甘特圖才截得進一頁簡報 */
.gantt-wrap.is-compact .gantt-row{min-height:26px;}
.gantt-wrap.is-compact .gantt-row-label{padding:3px 10px;gap:0;}
.gantt-wrap.is-compact .gantt-row-title{font-size:12.5px;line-height:1.35;}
.gantt-wrap.is-compact .gantt-row-meta{font-size:11.5px;line-height:1.25;}
.gantt-wrap.is-compact .gantt-head-side,
.gantt-wrap.is-compact .gantt-head-cell{padding:5px 4px;font-size:12px;}
.gantt-wrap.is-compact .gantt-bar{top:4px;height:18px;border-radius:5px;font-size:11.5px;padding:0 6px;}
.gantt-wrap.is-compact .gantt-bar-rem{border-radius:0 5px 5px 0;}
.gantt-wrap.is-compact .gantt-legend{padding:5px 10px;}
/* 多一欄（例：最新進度） */
.gantt-wrap.has-extra .gantt-head,.gantt-wrap.has-extra .gantt-row{grid-template-columns:var(--g-label-w,220px) var(--g-extra-w,280px) 1fr;}
.gantt-row-extra{padding:7px 12px;border-right:1px solid var(--color-border);font-size:13.5px;line-height:1.5;color:var(--color-fg-secondary);
  display:flex;flex-direction:column;justify-content:center;min-width:0;white-space:pre-wrap;word-break:break-word;}
.gantt-wrap:not(.is-tuned) .gantt-row-extra .gantt-extra-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
.gantt-extra-empty{color:var(--color-fg-tertiary);}
.gantt-extra-issue{color:var(--color-warning);margin-top:2px;}
/* 預覽模式：字體 / 行高 / 欄寬可調，項目名稱改成可換行完整顯示 */
.gantt-wrap.is-tuned{--g-fs:15px;--g-row-h:52px;--g-bar-h:clamp(16px,calc(var(--g-row-h)*.52),34px);}
.gantt-wrap.is-tuned .gantt-row{min-height:var(--g-row-h);}
.gantt-wrap.is-tuned .gantt-row-title{font-size:var(--g-fs);white-space:normal;line-height:1.4;}
.gantt-wrap.is-tuned .gantt-row-meta{font-size:calc(var(--g-fs)*.86);}
.gantt-wrap.is-tuned .gantt-row-extra{font-size:calc(var(--g-fs)*.9);}
.gantt-wrap.is-tuned .gantt-head-side,.gantt-wrap.is-tuned .gantt-head-cell{font-size:calc(var(--g-fs)*.86);}
.gantt-wrap.is-tuned .gantt-bar{top:calc(50% - var(--g-bar-h)/2);height:var(--g-bar-h);font-size:calc(var(--g-fs)*.82);}

/* ==========================================================================
   Kanban / project cards
   ========================================================================== */
.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--sp-4);}
.project-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--r-lg);padding:var(--sp-4);display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-sm);cursor:pointer;transition:box-shadow .15s ease, transform .1s ease;}
.project-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.project-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.project-card-title{font-size:var(--fs-md);font-weight:800;line-height:1.35;}
.project-card-tags{display:flex;flex-wrap:wrap;gap:6px;}
.project-card-desc{font-size:13.5px;color:var(--color-fg-secondary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.project-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:8px;}
.project-card-owners{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--color-fg-tertiary);}

/* ==========================================================================
   Vendor cards
   ========================================================================== */
.vendor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--sp-4);}
.vendor-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--r-lg);padding:var(--sp-4);display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-sm);}
.vendor-card.archived{opacity:.6;}
.vendor-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.vendor-name{font-size:var(--fs-md);font-weight:800;}
.vendor-meta-row{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--color-fg-secondary);}
.rating-stars{display:flex;gap:2px;color:var(--color-warning);}
.rating-stars [data-icon]{width:14px;height:14px;}
.memo-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:12.5px;}
.memo-box{border-radius:8px;padding:8px 10px;}
.memo-box.strength{background:var(--color-accent-light);color:var(--color-accent-dark);}
.memo-box.weak{background:var(--color-destructive-light);color:var(--color-destructive);}
.memo-box.caution{background:var(--color-warning-light);color:var(--color-warning);grid-column:1/-1;}
.memo-box strong{display:block;margin-bottom:2px;}

/* ==========================================================================
   Calendar
   ========================================================================== */
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid var(--color-border);border-left:1px solid var(--color-border);}
.calendar-dow{text-align:center;font-size:12px;font-weight:700;color:var(--color-fg-secondary);padding:8px 0;background:var(--color-muted);border-right:1px solid var(--color-border);border-bottom:1px solid var(--color-border);}
.calendar-cell{min-height:100px;border-right:1px solid var(--color-border);border-bottom:1px solid var(--color-border);padding:6px;display:flex;flex-direction:column;gap:4px;background:var(--color-surface);}
.calendar-cell.other-month{background:var(--color-muted);opacity:.55;}
.calendar-cell.is-today{background:var(--color-primary-light);}
.calendar-daynum{font-size:12.5px;font-weight:800;color:var(--color-fg-secondary);}
.calendar-event{font-size:12px;font-weight:700;padding:2px 6px;border-radius:5px;background:var(--color-primary-light);color:var(--color-primary-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;}

/* ==========================================================================
   Checklist / SOP
   ========================================================================== */
.checklist-item{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--color-border);}
.checklist-item:last-child{border-bottom:none;}
.checklist-item input{width:19px;height:19px;margin-top:2px;accent-color:var(--color-accent);flex:0 0 auto;cursor:pointer;}
.checklist-item.done .item-text{text-decoration:line-through;color:var(--color-fg-tertiary);}
.guideline-callout{display:flex;gap:10px;background:var(--color-primary-light);color:var(--color-primary-dark);border-radius:var(--r-md);padding:12px 14px;font-size:14px;font-weight:600;line-height:1.5;}
.guideline-callout [data-icon]{flex:0 0 auto;margin-top:1px;}

/* ==========================================================================
   Allocation matrix
   ========================================================================== */
.matrix-wrap{overflow:auto;border:1px solid var(--color-border);border-radius:var(--r-lg);}
table.matrix-table{border-collapse:collapse;width:100%;min-width:760px;font-size:13.5px;}
table.matrix-table th,table.matrix-table td{border:1px solid var(--color-border);padding:8px 10px;text-align:center;white-space:nowrap;}
table.matrix-table thead th{background:var(--color-muted);font-weight:700;position:sticky;top:0;}
table.matrix-table td:first-child,table.matrix-table th:first-child{position:sticky;left:0;background:var(--color-surface);text-align:left;font-weight:700;z-index:1;}
table.matrix-table thead th:first-child{z-index:3;background:var(--color-muted);}
.status-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:var(--r-pill);font-size:12px;font-weight:800;}
.status-負責中{background:var(--color-primary-light);color:var(--color-primary-dark);}
.status-協助{background:var(--color-accent-light);color:var(--color-accent-dark);}
.status-統籌{background:#EDE9FE;color:#6D28D9;}
.status-待輪值{background:var(--color-warning-light);color:var(--color-warning);}
.status-已處理{background:var(--color-muted-strong);color:var(--color-fg-secondary);}
.status-共同專案{background:#FCE7F3;color:#BE185D;}
.status-學習{background:#E0F2FE;color:#0369A1;}
.status-V{background:var(--color-accent-light);color:var(--color-accent-dark);}
:root[data-theme="dark"] .status-統籌{background:#2E1F52;color:#C4B5FD;}
:root[data-theme="dark"] .status-共同專案{background:#4A1338;color:#F9A8D4;}
:root[data-theme="dark"] .status-學習{background:#0B2A3D;color:#7DD3FC;}

.skill-grid{overflow:auto;}
.skill-cell{width:38px;height:34px;border-radius:9px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  line-height:1.1;cursor:pointer;border:1px solid var(--color-border);}
.skill-cell .sc-mark{font-size:15px;font-weight:700;}
.skill-cell .sc-year{font-size:11px;font-weight:700;opacity:.9;letter-spacing:.02em;}
.skill-cell.achieved{background:var(--color-accent);color:#fff;border-color:var(--color-accent);}
.skill-cell.learning{background:var(--color-warning-light);color:var(--color-warning);border-style:dashed;}
.skill-cell.pending{background:color-mix(in srgb,var(--color-primary) 12%,transparent);color:var(--color-primary);border-style:dotted;border-color:var(--color-primary);}
.skill-cell.na{background:repeating-linear-gradient(45deg,transparent,transparent 4px,var(--color-muted) 4px,var(--color-muted) 8px);
  color:var(--color-fg-tertiary);border-style:dashed;}
/* 未來年度的輪值：底色改成年度色（次年度／更遠年度各一階），右上角加小三角標記。
   放在各狀態之後才蓋得掉狀態底色 —— 這裡刻意讓「年份」壓過「狀態」的顏色，
   因為要一眼分辨的是「這是今年還是明年才輪」。 */
.skill-cell.is-nextyear,.skill-cell.is-future{position:relative;border-style:solid;}
.skill-cell.is-nextyear{background:#EDE9FE;color:#6D28D9;border-color:#A78BFA;box-shadow:inset 0 0 0 1px #A78BFA;}
.skill-cell.is-future{background:#DBE3FF;color:#3730A3;border-color:#6366F1;box-shadow:inset 0 0 0 1px #6366F1;}
.skill-cell.is-nextyear::after,.skill-cell.is-future::after{
  content:"";position:absolute;top:0;right:0;border-width:0 8px 8px 0;border-style:solid;
  border-color:transparent currentColor transparent transparent;border-top-right-radius:8px;opacity:.85;}
:root[data-theme="dark"] .skill-cell.is-nextyear{background:#2E1F52;color:#C4B5FD;border-color:#7C3AED;box-shadow:inset 0 0 0 1px #7C3AED;}
:root[data-theme="dark"] .skill-cell.is-future{background:#1E2555;color:#A5B4FC;border-color:#4F46E5;box-shadow:inset 0 0 0 1px #4F46E5;}
.chart-legend-sep{display:inline-block;width:1px;height:16px;background:var(--color-border-strong);margin:0 2px;}
/* 輪值技能表：欄位置中，僅技能名稱靠左 */
.skill-table{width:100%;border-collapse:collapse;font-size:14.5px;table-layout:fixed;}
.skill-table col.sk-name{width:230px;}
.skill-table col.sk-mem{width:auto;}
.skill-table col.sk-cnt{width:92px;}
.skill-table col.sk-act{width:40px;}
.skill-table th,.skill-table td{text-align:center;vertical-align:middle;padding:7px 6px;border-bottom:1px solid var(--color-border);}
.skill-table thead th{font-size:13.5px;font-weight:700;color:var(--color-fg-secondary);background:var(--color-bg-subtle);white-space:nowrap;}
.skill-table .ta-left{text-align:left;}
.skill-table tbody tr:nth-child(even){background:color-mix(in srgb,var(--color-fg) 2.5%,transparent);}
.skill-table tbody tr:hover{background:color-mix(in srgb,var(--color-primary) 6%,transparent);}
.skill-table tbody tr:last-child td{border-bottom:none;}
.skill-table .sk-name-cell{word-break:break-word;}
.skill-table .badge{margin-top:2px;}

/* ==========================================================================
   Admin permission matrix
   ========================================================================== */
.perm-table{width:100%;border-collapse:collapse;font-size:14px;}
.perm-table th,.perm-table td{border-bottom:1px solid var(--color-border);padding:10px 12px;text-align:center;}
.perm-table th:first-child,.perm-table td:first-child{text-align:left;}
.perm-table thead th{background:var(--color-muted);font-weight:700;}
.perm-toggle{width:20px;height:20px;accent-color:var(--color-primary);cursor:pointer;}

/* ==========================================================================
   Detail drawer (project detail)
   ========================================================================== */
.detail-grid{display:grid;grid-template-columns:2fr 1fr;gap:var(--sp-5);align-items:start;}
.detail-grid>*{min-width:0;}            /* 防止內含甘特圖等寬元素撐破版面（改由該元素自身橫向捲動） */
.modal-body{overflow-x:hidden;}
.form-grid>*{min-width:0;}
.timeline-entry.ev-clickable{cursor:pointer;border-radius:6px;}
.timeline-entry.ev-clickable:hover{background:var(--color-bg-subtle);}
.calendar-event.ev-clickable{cursor:pointer;}
.calendar-event.ev-clickable:hover{filter:brightness(.96);}
/* 訓練與課程 */
.tr-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;}
.tr-person-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;}
.tr-card .tr-title{display:flex;align-items:center;gap:6px;font-size:15px;}
.tr-sub{font-size:12px;font-weight:700;color:var(--color-fg-tertiary);margin-bottom:2px;}
.tr-person-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--color-border);cursor:pointer;}
.tr-person-row:last-child{border-bottom:none;}
.tr-person-row:hover{background:var(--color-bg-subtle);}
.timeline-list{display:flex;flex-direction:column;gap:0;}
.timeline-entry{display:flex;gap:12px;padding:10px 0;border-left:2px solid var(--color-border);margin-left:6px;padding-left:16px;position:relative;}
.timeline-entry::before{content:"";position:absolute;left:-7px;top:14px;width:11px;height:11px;border-radius:50%;background:var(--color-primary);border:2px solid var(--color-surface);}
.timeline-entry:last-child{border-left-color:transparent;}
.timeline-entry[hidden]{display:none;}
.subtask-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--color-border);font-size:14px;}
.subtask-row:last-child{border-bottom:none;}
.subtask-row input[type=checkbox]{width:18px;height:18px;accent-color:var(--color-accent);}
.subtask-dates{font-size:12px;color:var(--color-fg-tertiary);font-variant-numeric:tabular-nums;white-space:nowrap;}

/* ==========================================================================
   Presentation / print overlay
   ========================================================================== */
.present-overlay{position:fixed;inset:0;background:#111827;z-index:900;display:flex;flex-direction:column;}
.present-overlay.hidden{display:none;}
.present-toolbar{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;background:#0B1220;color:#fff;flex-wrap:wrap;gap:10px;}
.present-toolbar-title{font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px;color:#E5EDFF;}
.present-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:#CBD5E1;font-weight:600;}
.present-controls label{margin-left:6px;}
.ctrl-btn{background:#1E293B;color:#fff;border:1px solid #334155;border-radius:6px;padding:5px 10px;font-size:13px;font-weight:700;cursor:pointer;}
.ctrl-btn:hover{background:#334155;}
.present-stage-wrap{flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:32px;}
.present-stage{background:#fff;color:#0F172A;box-shadow:0 20px 60px rgba(0,0,0,.5);padding:36px;width:100%;max-width:1000px;border-radius:8px;}
.present-stage.slide-mode{width:1280px;max-width:none;min-height:auto;background:transparent;box-shadow:none;padding:0;border-radius:0;}
/* 簡報字級：改用縮放 fs-* token（含 base），A+/A- 才會真正放大字體 */
.present-content{
  --fs-xs:calc(13.5px*var(--present-font-scale));
  --fs-sm:calc(15px*var(--present-font-scale));
  --fs-base:calc(16px*var(--present-font-scale));
  --fs-md:calc(17px*var(--present-font-scale));
  --fs-lg:calc(19px*var(--present-font-scale));
  --fs-xl:calc(21px*var(--present-font-scale));
  --fs-2xl:calc(25px*var(--present-font-scale));
  --fs-3xl:calc(31px*var(--present-font-scale));
  font-size:calc(16px * var(--present-font-scale));
  line-height:1.55;
}
.present-content .filter-bar,.present-content .page-header-actions,.present-content .no-print,.present-content .edit-only,.present-content .page-header{display:none !important;}
.present-content table.data-table{width:100%;font-size:calc(14px*var(--present-font-scale));}
.present-content .stat-grid,.present-content .project-grid,.present-content .vendor-grid{
  grid-template-columns:repeat(auto-fit,minmax(calc(200px*var(--present-col-scale)),1fr)) !important;
}
/* 16:9 簡報分頁：每一張都是獨立 1280×720 投影片，超出自動分頁 / 縮放置入 */
.present-content .slide-page{
  width:1280px;height:720px;box-sizing:border-box;overflow:hidden;position:relative;
  background:#fff;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5);padding:40px 46px;
}
.present-content .slide-page + .slide-page{margin-top:30px;}
.slide-page-inner{transform-origin:top left;display:flex;flex-direction:column;gap:16px;}
.slide-pageno{position:absolute;bottom:14px;right:24px;font-size:13px;color:#94A3B8;font-weight:700;}
@media print{
  .present-content .slide-page{box-shadow:none;margin:0 !important;border-radius:0;break-after:page;page-break-after:always;}
  .present-content .slide-page:last-child{break-after:auto;}
}

/* ==========================================================================
   多行文字收合（問題點 / 待協助事項…）：預設 N 行，超過才出現「… 顯示全部」
   ========================================================================== */
.clamp-wrap{display:block;min-width:0;}
.clamp-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--clamp-lines,2);
  overflow:hidden;white-space:pre-wrap;word-break:break-word;}
.clamp-wrap.is-open .clamp-text{display:block;-webkit-line-clamp:unset;overflow:visible;}
.clamp-toggle{display:inline-block;border:0;background:none;padding:0;margin-top:2px;font-family:inherit;
  color:var(--color-primary);font-size:12.5px;font-weight:700;cursor:pointer;line-height:1.5;}
.clamp-toggle:hover{text-decoration:underline;}
.clamp-toggle[hidden]{display:none;}
/* 列印／簡報一律攤開，不要把內容藏起來 */
@media print{ .clamp-text{display:block !important;-webkit-line-clamp:unset !important;overflow:visible !important;} }
.present-content .clamp-text{display:block !important;-webkit-line-clamp:unset !important;overflow:visible !important;}

/* ==========================================================================
   Utility
   ========================================================================== */
.flex{display:flex;} .items-center{align-items:center;} .justify-between{justify-content:space-between;}
.gap-1{gap:4px;} .gap-2{gap:8px;} .gap-3{gap:12px;} .gap-4{gap:16px;}
.text-secondary{color:var(--color-fg-secondary);} .text-tertiary{color:var(--color-fg-tertiary);}
.text-sm{font-size:var(--fs-sm);} .text-xs{font-size:var(--fs-xs);}
.font-bold{font-weight:700;} .font-extrabold{font-weight:800;}
.mt-2{margin-top:8px;} .mt-4{margin-top:16px;}
.w-full{width:100%;}
.no-print{}
.hidden{display:none !important;}
.grow{flex:1;}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.divider{height:1px;background:var(--color-border);border:none;margin:var(--sp-2) 0;}

/* ==========================================================================
   Readability overrides — 拉大偏小的字級，弱灰字統一走已加深的 fg tokens
   ========================================================================== */
.brand-title{font-size:var(--fs-base);}
.brand-sub{font-size:var(--fs-xs);}
.badge{font-size:13.5px;}
.field .hint,.hint{font-size:13.5px;color:var(--color-fg-tertiary);}
.progress-label{font-size:13px;}
.gantt-row-title{font-size:15px;}
.gantt-row-meta{font-size:13.5px;}
.gantt-head-cell,.gantt-head-side{font-size:13.5px;}
.gantt-bar{font-size:13px;}
.calendar-dow{font-size:13px;}
.calendar-daynum{font-size:13px;}
.calendar-event{font-size:12px;}
.project-card-desc{font-size:14px;}
.project-card-owners{font-size:13px;}
.vendor-meta-row{font-size:14px;}
.memo-grid{font-size:13.5px;}
.sidebar-footer,.sidebar-version{font-size:13px;}
.subtask-dates{font-size:13px;}
.stat-sub{font-size:var(--fs-xs);}
.chart-legend{font-size:13.5px;}
table.data-table thead th{font-size:13px;}
.donut-center-sub{font-size:13px;}
.matrix-table{font-size:14px !important;}
.breadcrumb{font-size:13.5px;}

/* 首頁快捷選單（sticky chips） */
.dash-quicknav{position:sticky;top:calc(var(--topbar-h) + 6px);z-index:30;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--r-pill);padding:8px 14px;box-shadow:var(--shadow-sm);}
.dash-quicknav a{font-size:14px;font-weight:700;color:var(--color-fg-secondary);cursor:pointer;padding:3px 11px;border-radius:var(--r-pill);}
.dash-quicknav a:hover{background:var(--color-primary-light);color:var(--color-primary-dark);}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px){
  .detail-grid{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
}
@media (max-width: 980px){
  .app-shell{grid-template-columns:1fr;grid-template-areas:"topbar" "main";}
  .topbar-menu-btn{display:flex;}
  .topbar-dept-switch{display:none;}
  .topbar-brand .brand-sub{display:none;}
  .sidebar{
    position:fixed;left:0;top:var(--topbar-h);height:calc(100dvh - var(--topbar-h));width:270px;
    transform:translateX(-100%);transition:transform .22s ease;z-index:200;box-shadow:var(--shadow-lg);
  }
  .app-shell.sidebar-open .sidebar{transform:translateX(0);}
  .app-shell.sidebar-open .sidebar-scrim{display:block;}
  .app-shell.sidebar-collapsed{grid-template-columns:1fr;}
  .user-name{display:none;}
  .role-switch{display:none;}
  .topbar-search{order:5;max-width:none;flex-basis:100%;margin:8px 0 0;}
  .topbar{flex-wrap:wrap;height:auto;min-height:var(--topbar-h);padding:10px var(--sp-3);}
  .main-content{padding:var(--sp-4);}
}
@media (max-width: 760px){
  .stat-grid{grid-template-columns:1fr 1fr;}
  .form-grid{grid-template-columns:1fr;}
  .detail-grid{grid-template-columns:1fr;}
  .project-grid,.vendor-grid{grid-template-columns:1fr;}
  table.data-table{min-width:100%;}
  .memo-grid{grid-template-columns:1fr;}
}
@media (max-width: 520px){
  .stat-grid{grid-template-columns:1fr;}
  .page-header{flex-direction:column;}
  .page-header-actions{width:100%;}
  .page-header-actions .btn{flex:1;}
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print{
  body *{visibility:hidden;}
  #presentOverlay, #presentOverlay *{visibility:visible;}
  #presentOverlay{position:absolute;inset:0;background:#fff;}
  .present-toolbar{display:none;}
  .present-stage-wrap{padding:0;overflow:visible;}
  .present-stage{box-shadow:none;max-width:none;width:100%;}
}

/* ============ 通知鈴鐺 badge（#11） ============ */
.topbar-notify{position:relative;}
.notify-badge{position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;
  background:var(--color-primary);color:#fff;font-size:11.5px;font-weight:800;line-height:16px;text-align:center;
  box-shadow:0 0 0 2px var(--color-bg);}
.notify-badge.urgent{background:var(--color-destructive);}
.notify-list{display:flex;flex-direction:column;gap:8px;}
.notify-item{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--color-border);
  border-radius:10px;background:var(--color-bg-subtle);}
.notify-item .notify-dot{width:9px;height:9px;border-radius:50%;margin-top:5px;flex:none;}
.notify-item.urgent{border-color:color-mix(in srgb,var(--color-destructive) 40%,var(--color-border));}
.notify-item.urgent .notify-dot{background:var(--color-destructive);}
.notify-item.warn .notify-dot{background:var(--color-warning);}
.notify-item.info .notify-dot{background:var(--color-primary);}
.report-section-toggle{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--color-border);
  border-radius:10px;cursor:pointer;background:var(--color-bg-subtle);font-size:14px;font-weight:600;}
.report-section-toggle input{width:17px;height:17px;accent-color:var(--color-primary);}
.report-section-toggle.on{border-color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 8%,transparent);}
.teams-pill-wrap{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.teams-pill-wrap .badge{white-space:nowrap;}

/* 樹狀圖明細表裡的「分派同仁」：預設收合成一個小箭頭，需要時才點開 */
.mm-peek{display:inline-block;}
.mm-peek>summary{cursor:pointer;list-style:none;color:var(--color-fg-secondary);font-weight:600;}
.mm-peek>summary::-webkit-details-marker{display:none;}
.mm-peek>summary:hover{color:var(--color-primary);}
.mm-peek[open]>summary{color:var(--color-primary);}
.mm-peek>div{margin-top:3px;color:var(--color-fg);}

/* 表格「操作」欄：以前寫成 <td class="flex">，display:flex 會讓儲存格脫離表格排版，
   造成按鈕與同列其他欄位（尤其是列高被撐高時）對不齊。改用 td-actions：維持 table-cell，
   內容不換行、垂直置中，按鈕之間用 margin 取代 gap。 */
table.data-table td.td-actions{white-space:nowrap;vertical-align:middle;}
table.data-table td.td-actions>*{vertical-align:middle;}
table.data-table td.td-actions>*+*{margin-left:4px;}

/* 欄位多到需要左右捲動的表格（例：後台「部門成員」）：把「操作」欄釘在最右側，
   捲到哪裡都看得到、也永遠跟該列切齊。 */
table.data-table.sticky-actions td.td-actions,
table.data-table.sticky-actions thead th.th-actions{position:sticky;right:0;z-index:2;}
table.data-table.sticky-actions td.td-actions{background:var(--color-surface);box-shadow:-1px 0 0 var(--color-border);}
table.data-table.sticky-actions thead th.th-actions{background:var(--color-muted);z-index:3;box-shadow:-1px 0 0 var(--color-border);}
table.data-table.sticky-actions tbody tr:hover td.td-actions{background:var(--color-muted);}
@media print{ table.data-table.sticky-actions td.td-actions,
  table.data-table.sticky-actions thead th.th-actions{position:static;box-shadow:none;} }

/* ============ 使用者切換選單 ============ */
.user-chip{position:relative;cursor:pointer;user-select:none;}
.user-chip .usm-caret{display:inline-flex;width:16px;height:16px;color:var(--color-fg-tertiary);}
.user-switch-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:230px;z-index:60;
  background:var(--color-bg);border:1px solid var(--color-border);border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.16);padding:6px;}
.user-switch-menu .usm-head{font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--color-fg-tertiary);
  text-transform:uppercase;padding:8px 10px 6px;}
.usm-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;cursor:pointer;}
.usm-item:hover{background:var(--color-bg-subtle);}
.usm-item.is-active{background:color-mix(in srgb,var(--color-primary) 10%,transparent);}
.usm-info{display:flex;flex-direction:column;min-width:0;flex:1;}
.usm-name{font-weight:700;font-size:14.5px;}
.usm-sub{font-size:12.5px;color:var(--color-fg-tertiary);}
.usm-check{color:var(--color-primary);width:18px;height:18px;flex:none;}

/* ============ 登入畫面 ============ */
.login-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:20px;background:linear-gradient(135deg,#1e293b,#0f172a);}
.login-overlay.hidden{display:none;}
.login-card{width:100%;max-width:390px;background:var(--color-bg);border-radius:16px;padding:26px 24px;
  box-shadow:0 24px 60px rgba(0,0,0,.4);}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.login-brand .brand-mark{width:40px;height:40px;border-radius:10px;background:var(--color-primary);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;}
.login-brand .brand-mark .icon,.login-brand .brand-mark svg{width:22px;height:22px;}
.login-title{font-weight:800;font-size:15px;}
.login-sub{font-size:13.5px;color:var(--color-fg-tertiary);}
.login-label{display:block;font-size:13px;font-weight:700;color:var(--color-fg-secondary);margin:0 0 5px;}
.login-error{margin-top:10px;font-size:13.5px;color:var(--color-destructive);background:color-mix(in srgb,var(--color-destructive) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--color-destructive) 35%,transparent);border-radius:8px;padding:8px 10px;line-height:1.5;}
.login-foot{margin-top:14px;font-size:12.5px;color:var(--color-fg-tertiary);line-height:1.6;text-align:center;}

/* ============ 登入後「資料來源」關卡 ============ */
.ds-current{font-size:13.5px;line-height:1.6;color:var(--color-fg-secondary);background:var(--color-bg-subtle);
  border:1px solid var(--color-border);border-radius:8px;padding:10px 12px;}
#dataSourceOverlay .btn-block{width:100%;}

/* ============ 資料來源分隔 + 側邊同步狀態 ============ */
.ds-or{text-align:center;font-size:12px;color:var(--color-fg-tertiary);margin:12px 0 6px;position:relative;}
.ds-or::before,.ds-or::after{content:"";position:absolute;top:50%;width:42%;height:1px;background:var(--color-border);}
.ds-or::before{left:0;} .ds-or::after{right:0;}
.sidebar-sync{margin-top:4px;font-size:12px;color:var(--color-fg-tertiary);display:flex;align-items:center;gap:4px;line-height:1.4;}
.sidebar-sync [data-icon]{width:12px;height:12px;flex:none;}

.text-right{text-align:right;}

/* ============ 分工「各同仁分工」逐一選擇 ============ */
.alloc-assign-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;}
.alloc-assign-row{display:flex;align-items:center;gap:8px;}
.alloc-assign-name{min-width:62px;font-size:14px;font-weight:600;flex:none;}
.alloc-assign-row .select{flex:1;min-width:0;}

/* ============ 分工「議題/區域」以同仁膠囊呈現 ============ */
.alloc-topic-list{display:flex;flex-direction:column;gap:10px;padding:8px 4px 4px;}
.alloc-topic-block{border:1px solid var(--color-border);border-radius:10px;padding:10px 12px;background:var(--color-bg);}
.alloc-topic-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:9px;}
.alloc-topic-title{font-size:15px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.alloc-people-chips{display:flex;flex-wrap:wrap;gap:7px;}
.alloc-person-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--color-border);border-radius:20px;
  padding:5px 12px;background:var(--color-bg-subtle);cursor:pointer;font-size:14.5px;max-width:100%;line-height:1.5;}
/* 唯讀角色仍要看得清楚：不反灰、不降透明度，只是換成「可檢視」的游標 */
.alloc-person-chip.is-readonly{cursor:zoom-in;}
.alloc-person-chip.is-readonly:hover{border-color:var(--color-primary);}
.alloc-person-chip[disabled]{cursor:default;opacity:1;}
.alloc-person-chip.has{border-color:color-mix(in srgb,var(--color-primary) 40%,var(--color-border));background:color-mix(in srgb,var(--color-primary) 8%,transparent);}
.alloc-person-chip .apc-name{font-weight:700;}
.alloc-person-chip .apc-tag{background:var(--color-bg);border:1px solid var(--color-border);border-radius:10px;padding:1px 8px;font-size:13.5px;white-space:nowrap;}
.alloc-person-chip .apc-empty{color:var(--color-fg-tertiary);}
.alloc-person-chip .apc-meta{color:var(--color-fg-tertiary);font-size:13px;display:inline-flex;align-items:center;}
.alloc-person-chip .apc-bk{background:color-mix(in srgb,var(--color-warning) 16%,transparent);border-radius:9px;padding:0 6px;font-weight:600;}
.alloc-person-chip .apc-meta svg,.alloc-person-chip .apc-meta .icon{width:14px;height:14px;}
/* ＋指派：純圖示的小圓鈕，幾乎不佔寬度，才不會自己變成把列擠到下一行的原因 */
.alloc-person-chip.add{border-style:dashed;color:var(--color-primary);background:transparent;
  width:30px;height:30px;padding:0;justify-content:center;flex:0 0 auto;}
.alloc-person-chip.add svg,.alloc-person-chip.add .icon{width:16px;height:16px;}
.alloc-person-chip.add:hover{background:color-mix(in srgb,var(--color-primary) 12%,transparent);border-style:solid;}
.alloc-person-chip .status-chip{font-size:13.5px;}
/* 類別卡片：左側色條 ＋ 有底色的標題列，拉出層次 */
.alloc-cat-card{border-left:4px solid var(--cat-color,var(--color-primary));overflow:hidden;}
/* 展開後的內容不要貼著卡片邊框：左右各留一點呼吸空間 */
.alloc-cat-card>.card-body.tight{padding:12px 14px 8px;}
@media (max-width:640px){ .alloc-cat-card>.card-body.tight{padding:10px 8px 6px;} }
.alloc-cat-header{background:color-mix(in srgb,var(--cat-color,var(--color-primary)) 6%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--cat-color,var(--color-primary)) 18%,var(--color-border));}
.alloc-cat-title{display:flex;align-items:center;gap:8px;font-size:16.5px;cursor:pointer;user-select:none;}
.alloc-cat-title:hover{color:var(--cat-color,var(--color-primary));}
.alloc-hint{font-size:13.5px;color:var(--color-fg-tertiary);}
/* 項目(子類別)標題：整個項目做成一張獨立的框，標題是它的表頭 —— 全部展開時才分得出哪裡換了項目 */
.alloc-sub-head{display:flex;align-items:center;gap:8px;padding:9px 12px;margin:0;
  background:color-mix(in srgb,var(--cat-color,var(--color-primary)) 7%,var(--color-bg-subtle));
  border-bottom:1px solid color-mix(in srgb,var(--cat-color,var(--color-primary)) 20%,var(--color-border));
  border-radius:9px 9px 0 0;cursor:pointer;user-select:none;}
.alloc-sub-head:hover{background:color-mix(in srgb,var(--cat-color,var(--color-primary)) 14%,var(--color-bg-subtle));}
.alloc-sub-head.is-closed{border-radius:9px;border-bottom-color:transparent;}
/* 項目序號圓標，讓「這是第幾個項目」一眼可見 */
.alloc-sub-idx{display:inline-flex;align-items:center;justify-content:center;min-width:21px;height:21px;padding:0 5px;
  border-radius:11px;font-size:13px;font-weight:800;color:#fff;background:var(--cat-color,var(--color-primary));flex:0 0 auto;}
.alloc-sub-caret{display:inline-flex;align-items:center;color:var(--color-fg-tertiary);}
.alloc-sub-caret svg,.alloc-sub-caret .icon{width:15px;height:15px;}
.alloc-sub-name{font-size:15px;font-weight:700;color:var(--color-fg);}
.alloc-sub-head .btn{margin-left:auto;}
/* 個人檢視 */
.person-list{display:flex;flex-direction:column;gap:2px;}
.person-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 4px;border-bottom:1px solid var(--color-border);}
.person-row:last-child{border-bottom:none;}
.person-row-main{flex:1;min-width:180px;font-size:14.5px;}
.person-row-vals{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.person-row .btn{margin-left:auto;}
/* 大綱樹狀：項目群組 / 任務清單 */
/* 每個項目 = 一張獨立卡片（外框＋間距），全部展開時彼此界線分明 */
.alloc-item-group{margin:0 0 16px;padding:0;background:var(--color-surface);
  border:1px solid var(--color-border);
  border-left:3px solid color-mix(in srgb,var(--cat-color,var(--color-primary)) 55%,var(--color-border));
  border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgba(15,23,42,.05);}
.alloc-item-group:last-child{margin-bottom:2px;}
.alloc-item-group .alloc-task-table{margin:0;}
.alloc-item-group .alloc-task-table tbody tr:last-child td{border-bottom:none;}
.alloc-task-list{display:flex;flex-direction:column;gap:8px;padding:6px 2px 8px 6px;}
.alloc-empty-item{padding:6px 2px 10px 8px;font-size:13.5px;color:var(--color-fg-tertiary);}
.alloc-empty-item .linklike{background:none;border:none;padding:0;color:var(--color-primary);cursor:pointer;font-size:13.5px;text-decoration:underline;}
.alloc-lock-path{display:flex;align-items:center;gap:6px;padding:4px 0;}
.alloc-lock-path svg,.alloc-lock-path .icon{width:14px;height:14px;color:var(--color-fg-tertiary);}
/* 後台：項目 chip（可移除）*/
.sub-chip{display:inline-flex;align-items:center;gap:4px;background:var(--color-bg-subtle);border:1px solid var(--color-border);border-radius:14px;padding:2px 6px 2px 10px;font-size:13px;}
.sub-chip-x{border:none;background:none;cursor:pointer;color:var(--color-fg-tertiary);font-size:15px;line-height:1;padding:0 2px;border-radius:50%;}
.sub-chip-x:hover{color:var(--color-danger);background:color-mix(in srgb,var(--color-danger) 12%,transparent);}
/* 領域標籤 */
.domain-tag{display:inline-flex;align-items:center;padding:1px 8px;border-radius:11px;font-size:12.5px;font-weight:700;border:1px solid;white-space:nowrap;}
/* 任務表格（項目底下） */
/* 分工任務表已用固定欄寬排到剛好，不需要橫向捲軸（窄螢幕才啟用） */
.table-scroll{overflow-x:visible;}
@media (max-width:900px){ .table-scroll{overflow-x:auto;} .alloc-task-table{min-width:760px;} }
/* table-layout:fixed ＋ 每個項目共用同一組 colgroup 寬度
   → 不同項目底下的表格欄位才會左右對齊（否則各表各自算寬度，看起來參差不齊） */
.alloc-task-table{width:100%;border-collapse:collapse;font-size:15px;table-layout:fixed;}
/* 固定 px 欄寬（不用 %）：任務欄不再過寬留白，剩餘空間全給「各同仁分派」，
   分派欄夠寬，「＋指派」就不會被擠到下一行；也因此不需要橫向捲軸 */
.alloc-task-table col.c-task{width:210px;}
.alloc-task-table col.c-dom{width:92px;}
.alloc-task-table col.c-freq{width:80px;}
.alloc-task-table col.c-people{width:auto;}
.alloc-task-table col.c-act{width:38px;}
.alloc-task-table thead th{text-align:left;font-size:13.5px;font-weight:700;color:var(--color-fg-secondary);
  padding:6px 8px;background:var(--color-bg-subtle);border-bottom:1px solid var(--color-border);white-space:nowrap;}
.alloc-task-table tbody td{padding:9px 8px;border-bottom:1px solid var(--color-border);vertical-align:top;word-break:break-word;}
/* 表格頭尾欄不要貼著項目外框（右側的「編輯」鈕原本太靠右） */
.alloc-task-table thead th:first-child,.alloc-task-table tbody td:first-child{padding-left:14px;}
.alloc-task-table thead th:last-child,.alloc-task-table tbody td:last-child{padding-right:14px;}
.alloc-task-table tbody tr:nth-child(even){background:color-mix(in srgb,var(--color-fg) 2.5%,transparent);}
.alloc-task-table tbody tr:last-child td{border-bottom:none;}
.alloc-task-table tbody tr:hover{background:color-mix(in srgb,var(--color-primary) 6%,transparent);}
.alloc-task-table .att-task b{font-weight:700;font-size:15px;}
.alloc-task-table .ta-center{text-align:center;}
.alloc-task-table thead th:nth-child(2),.alloc-task-table thead th:nth-child(3){text-align:center;}
/* 建立/編輯任務：各同仁分派 pills 網格 */
.alloc-assign-grid2{display:flex;flex-direction:column;gap:8px;}
.alloc-assign-row2{display:flex;align-items:flex-start;gap:10px;padding:4px 0;border-bottom:1px dashed var(--color-border);}
.alloc-assign-row2:last-child{border-bottom:none;}
.alloc-assign-row2 .alloc-assign-name{min-width:64px;font-size:14px;font-weight:700;flex:none;padding-top:4px;}
.tag-pill.sm{padding:3px 9px;font-size:12.5px;font-weight:600;}
.tag-pill.pill-ghost{background:transparent;border-style:dashed;color:var(--color-fg-tertiary);font-weight:600;}
.tag-pill.pill-ghost:hover{color:var(--color-primary);border-color:var(--color-primary);}
.select-sm{padding:4px 8px;font-size:13.5px;height:auto;}
/* 個人檢視橫幅：取代原本一行灰字，明確標示目前是誰的分工 */
.person-banner{display:flex;align-items:center;gap:14px;padding:14px 18px;margin-bottom:14px;
  border:1px solid color-mix(in srgb,var(--color-primary) 30%,var(--color-border));border-left:5px solid var(--color-primary);
  border-radius:12px;background:color-mix(in srgb,var(--color-primary) 7%,var(--color-bg));}
.person-banner .avatar.lg{width:46px;height:46px;font-size:17px;flex:0 0 auto;}
.person-banner-info{flex:1;min-width:0;}
.person-banner-name{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;line-height:1.3;}
.person-banner-tag{font-size:13px;font-weight:700;color:#fff;background:var(--color-primary);
  border-radius:20px;padding:2px 10px;letter-spacing:.02em;}
.person-banner-sub{font-size:14px;color:var(--color-fg-secondary);margin-top:3px;}
.person-banner .btn{flex:0 0 auto;}
/* 唯讀分派明細 */
.view-cell{display:flex;flex-direction:column;gap:9px;}
.vc-row{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.6;}
.vc-label{flex:0 0 84px;color:var(--color-fg-tertiary);font-size:13.5px;font-weight:700;padding-top:2px;}
/* 後台：議題/區域選項清單（可改名連動） */
.opt-list{display:flex;flex-direction:column;gap:2px;}
.opt-row{display:flex;align-items:center;gap:8px;padding:6px 4px;border-bottom:1px solid var(--color-border);}
.opt-row:last-child{border-bottom:none;}
.opt-name{flex:1;min-width:0;font-size:14.5px;font-weight:600;word-break:break-word;}
.opt-use{font-size:12.5px;color:var(--color-fg-tertiary);white-space:nowrap;}
/* 後台：固定 Backup 主1/主2 ＋ 依年度覆寫 */
.bk-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.bk-year-list{display:flex;flex-direction:column;gap:6px;max-height:210px;overflow-y:auto;padding-right:4px;}
.bk-year-row{display:grid;grid-template-columns:56px 1fr 1fr;align-items:center;gap:8px;}
.bk-year-label{font-size:14px;font-weight:700;color:var(--color-fg-secondary);}
@media (max-width:640px){ .bk-grid{grid-template-columns:1fr;} .bk-year-row{grid-template-columns:48px 1fr;} }
/* 倉庫主檔維護 ＋ 狀態進度 */
.input-sm{padding:4px 8px;font-size:13.5px;height:auto;}
.wm-table{table-layout:fixed;min-width:1180px;}
.wm-table td{vertical-align:top;word-break:break-word;}
.wm-nowrap{white-space:nowrap;}
.wm-check{width:17px;height:17px;accent-color:var(--color-primary);cursor:pointer;}
.wm-check:disabled{cursor:not-allowed;opacity:.5;}
.wm-latest{font-size:13.5px;line-height:1.5;max-width:280px;}
.wm-add-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px;}
.wm-add-row #wmNewProgress{flex:1;min-width:220px;}
.wm-add-row input[type="date"]{flex:0 0 150px;}
/* 狀態進度時間軸（分工列名倉詳細也共用） */
.wh-progress{display:flex;flex-direction:column;gap:4px;}
.wh-pg-item{display:flex;gap:10px;align-items:baseline;font-size:14px;line-height:1.55;
  padding:5px 8px;border-left:3px solid color-mix(in srgb,var(--color-primary) 45%,var(--color-border));
  background:var(--color-bg-subtle);border-radius:0 6px 6px 0;}
.wh-pg-date{flex:0 0 92px;font-weight:700;color:var(--color-fg-secondary);font-variant-numeric:tabular-nums;}
.wh-pg-text{flex:1;min-width:0;word-break:break-word;}
.wh-pg-by{flex:0 0 auto;font-size:12.5px;color:var(--color-fg-tertiary);}

/* ==========================================================================
   專案詳細：狀態 / 指派 / 時程可直接編輯
   ========================================================================== */
.inline-edit{display:inline-flex;align-items:center;gap:6px;background:var(--color-bg-subtle);
  border:1px solid var(--color-border);border-radius:var(--r-pill);padding:2px 4px 2px 10px;}
.inline-edit-label{font-size:12.5px;font-weight:700;color:var(--color-fg-tertiary);white-space:nowrap;}
.inline-edit .select{border:none;background:transparent;font-weight:700;}
.sched-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.sched-grid > div{display:flex;flex-direction:column;gap:2px;}
@media (max-width:520px){ .sched-grid{grid-template-columns:1fr;} }

/* ==========================================================================
   實際完成日（回壓）與效率分析
   ========================================================================== */
.text-warning{color:var(--color-warning);}
/* 已完成細項的「實際完成日 ＋ 準時/延遲」：與狀態徽章同一列（不是壓在任務名稱下方），
   這樣每筆細項都維持一行高度，清單不會被拉長 */
.subtask-actual{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  padding:2px 7px;border-radius:7px;background:var(--color-muted);
  border:1px dashed var(--color-border);white-space:nowrap;}
.subtask-actual .sa-label{font-size:12px;font-weight:700;color:var(--color-fg-tertiary);white-space:nowrap;}
.subtask-actual .sa-date{width:108px;padding-left:5px;padding-right:2px;font-size:12.5px;}
.subtask-actual b{font-size:13px;}
.subtask-actual .badge{white-space:nowrap;}
.sa-todo{font-size:12px;font-weight:700;color:var(--color-fg-tertiary);}
/* 空間不夠時讓「實際完成日 / 狀態 / 日期」這一段整組換行，而不是把任務名稱擠成一個字一行 */
.subtask-row{flex-wrap:wrap;gap:8px;}
.subtask-row>.grow{flex:1 1 170px;}
/* 已完成的列右半段元素多，日期與操作鈕收緊一點，才能維持一行 */
.subtask-row.has-actual .subtask-dates{font-size:12px;}

.eff-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:10px;}
.eff-tile{border:1px solid var(--color-border);border-left:4px solid var(--eff-color,var(--color-primary));
  border-radius:var(--r-md);background:var(--color-surface);padding:10px 14px;display:flex;flex-direction:column;gap:2px;min-width:0;}
.eff-label{font-size:12.5px;font-weight:700;color:var(--color-fg-tertiary);}
.eff-value{font-size:21px;font-weight:800;color:var(--eff-color,var(--color-fg));line-height:1.2;}
.eff-sub{font-size:12.5px;color:var(--color-fg-tertiary);}
.eff-h{font-size:15px;font-weight:800;margin:18px 0 8px;padding-left:8px;
  border-left:3px solid var(--color-primary);}
.data-table tr.is-current{background:color-mix(in srgb,var(--color-primary) 7%,transparent);}
.eff-series{padding:10px 0;border-bottom:1px solid var(--color-border);}
.eff-series:last-child{border-bottom:none;}
.eff-series-title{font-size:14.5px;font-weight:800;display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap;}
.eff-month th,.eff-month td{text-align:center;font-variant-numeric:tabular-nums;}
.eff-month th:first-child,.eff-month td:first-child{text-align:left;}
.eff-month .is-now{background:color-mix(in srgb,var(--color-primary) 9%,transparent);}
.eff-month td.has-n{font-weight:700;}

/* ==========================================================================
   Check List：對內 / 對外維度
   ========================================================================== */
.cl-scope-dot{display:inline-block;font-size:12px;font-weight:700;padding:0 6px;border-radius:var(--r-pill);
  vertical-align:1px;margin-left:2px;}
.cl-scope-internal{background:var(--color-primary-light);color:var(--color-primary-dark);}
.cl-scope-external{background:#CFFAFE;color:#0E7490;}
.cl-scope-both{background:#EDE9FE;color:#6D28D9;}

/* 「內外皆適用」的檢核表：左右兩欄呈現（左對內、右對外） */
.cl-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;}
.cl-side{min-width:0;border-left:3px solid var(--color-border);padding-left:12px;}
.cl-side-internal{border-left-color:var(--color-primary);}
.cl-side-external{border-left-color:#0E7490;}
.cl-side-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:2px;
  padding-bottom:6px;border-bottom:1px solid var(--color-border);}
.cl-side-desc{font-size:12.5px;color:var(--color-fg-tertiary);}
.cl-side-count{margin-left:auto;font-size:12.5px;font-weight:800;color:var(--color-fg-secondary);
  font-variant-numeric:tabular-nums;}
.cl-item-note{display:block;font-size:12.5px;font-weight:600;color:var(--color-fg-tertiary);margin-top:2px;}
.checklist-item.done .cl-item-note{text-decoration:none;}
@media (max-width:820px){ .cl-split{grid-template-columns:minmax(0,1fr);gap:16px;} }

/* 檢核項目編輯器（單欄 / 左右兩欄） */
.cl-edit-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;}
.cl-edit-pane{min-width:0;border:1px solid var(--color-border);border-radius:var(--r-md);padding:10px 12px;}
.cl-edit-single .cl-edit-pane{border:none;padding:0;}
.cl-edit-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;}
.cl-edit-btns{margin-left:auto;display:flex;gap:4px;}
.cl-item-rows{display:flex;flex-direction:column;gap:6px;margin-bottom:6px;}
.cl-item-row{display:grid;grid-template-columns:20px minmax(0,1.3fr) minmax(0,1fr) auto;
  align-items:center;gap:6px;}
.cl-item-seq{font-size:12px;font-weight:800;color:var(--color-fg-tertiary);text-align:right;
  font-variant-numeric:tabular-nums;}
.cl-item-btns{display:flex;gap:1px;}
.cl-item-btns .icon-btn{width:24px;height:24px;font-size:13px;font-weight:700;}
.cl-paste{border:1px dashed var(--color-border);border-radius:var(--r-md);padding:10px;margin-bottom:8px;
  background:var(--color-muted);}
/* 兩欄模式下欄位變窄，改成「內容一行、備註一行」，文字框才不會只剩十個字寬 */
.cl-edit-split .cl-item-rows{gap:8px;}
.cl-edit-split .cl-item-row{
  grid-template-columns:20px minmax(0,1fr) auto;
  grid-template-areas:"seq text btns" ".   note note";
  row-gap:4px;padding-bottom:8px;border-bottom:1px dashed var(--color-border);
}
.cl-edit-split .cl-item-row:last-child{border-bottom:none;padding-bottom:0;}
.cl-edit-split .cl-item-seq{grid-area:seq;}
.cl-edit-split .cl-item-row [data-cli-text]{grid-area:text;}
.cl-edit-split .cl-item-row [data-cli-note]{grid-area:note;font-size:13px;}
.cl-edit-split .cl-item-btns{grid-area:btns;}
.cl-edit-split .cl-item-btns .icon-btn{width:22px;height:22px;}
@media (max-width:980px){ .cl-edit-split{grid-template-columns:minmax(0,1fr);}
  .cl-item-row{grid-template-columns:20px minmax(0,1fr) auto;
    grid-template-areas:"seq text btns" ".   note note";row-gap:4px;} }

/* ==========================================================================
   專案執行細項 / 細項時程（時間表）
   ========================================================================== */
.subtask-seq{font-size:12px;font-weight:800;color:var(--color-fg-tertiary);min-width:16px;text-align:right;
  font-variant-numeric:tabular-nums;flex:0 0 auto;}
.subtask-name{font-weight:600;}
.subtask-name.is-done{text-decoration:line-through;color:var(--color-fg-tertiary);}
.subtask-note{display:block;font-size:12px;color:var(--color-fg-tertiary);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.subtask-row.is-late{background:color-mix(in srgb,var(--color-destructive) 6%,transparent);}
.subtask-row.is-late .subtask-dates{color:var(--color-destructive);font-weight:700;}
.text-danger{color:var(--color-destructive);}
.sched-head{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.sched-stats{display:flex;gap:8px;flex-wrap:wrap;}
.sched-stat{border:1px solid var(--color-border);border-radius:var(--r-md);padding:6px 12px;
  display:flex;flex-direction:column;gap:1px;min-width:78px;background:var(--color-surface);}
.sched-stat span{font-size:12px;font-weight:700;color:var(--color-fg-tertiary);}
.sched-stat b{font-size:17px;font-variant-numeric:tabular-nums;}
.sched-stat.is-late b{color:var(--color-destructive);}
.sched-table tr.row-late td{background:color-mix(in srgb,var(--color-destructive) 6%,transparent);}
.sched-card .gantt-wrap{border-radius:var(--r-md);}
.gantt-bar.hold{background:var(--gantt-hold);}
/* 剛編輯完的細項：回到清單時閃一下，讓人一眼找到自己改的那一列 */
.subtask-row.is-flash{animation:stFlash 1.6s ease-out;border-radius:var(--r-sm);}
@keyframes stFlash{
  0%,55%{background:color-mix(in srgb,var(--color-primary) 18%,transparent);}
  100%{background:transparent;}
}
/* 細項階段 / 類型 */
.stage-chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:800;
  padding:1px 7px;border-radius:999px;white-space:nowrap;flex:0 0 auto;}
.stage-chip i{width:7px;height:7px;border-radius:50%;display:inline-block;background:currentColor;}
.stage-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:8px;
  padding:7px 0;border-bottom:1px solid var(--color-border);}
.stage-row:last-child{border-bottom:none;}
.stage-row input[type=color]{width:34px;height:30px;padding:2px;border:1px solid var(--color-border);
  border-radius:var(--r-sm);background:var(--color-surface);cursor:pointer;}
.stage-swatches{display:flex;gap:5px;flex-wrap:wrap;}
.stage-swatch{width:22px;height:22px;border-radius:6px;border:2px solid transparent;cursor:pointer;}
.stage-swatch.is-active{border-color:var(--color-fg-primary);}

/* ==========================================================================
   訓練與課程：長筆記的閱讀版面
   ========================================================================== */
.tr-card.is-open{grid-column:1/-1;}
.tr-detail{margin:12px 0 0 22px;padding-top:12px;border-top:1px solid var(--color-border);}
.tr-detail-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;}
.tr-card.is-open .tr-detail-cols{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);}
@media (max-width:900px){ .tr-card.is-open .tr-detail-cols{grid-template-columns:minmax(0,1fr);} }
.tr-block{min-width:0;}
.tr-block .tr-sub{font-size:13px;letter-spacing:.03em;padding-bottom:4px;margin-bottom:8px;
  border-bottom:2px solid var(--color-primary);display:inline-block;color:var(--color-fg-secondary);}
.tr-read{font-size:14.5px;line-height:1.85;color:var(--color-fg-secondary);max-width:72ch;}
.tr-read-scroll{max-height:460px;overflow-y:auto;padding-right:10px;}
.tr-read .tr-h{font-size:15px;font-weight:800;color:var(--color-fg);margin:14px 0 6px;
  padding-left:9px;border-left:3px solid var(--color-primary);line-height:1.5;}
.tr-read .tr-h:first-child{margin-top:0;}
.tr-read .tr-p{margin:0 0 8px;}
.tr-read .tr-ul{margin:0 0 10px;padding-left:20px;list-style:disc;}
.tr-read .tr-ul li{margin:3px 0;}
.tr-read .tr-ul li.tr-li-sub{list-style:circle;margin-left:16px;color:var(--color-fg-tertiary);}
.tr-reader .tr-read{max-width:none;}
.tr-reader .tr-block{margin-bottom:22px;}

/* ==========================================================================
   後台設定：可摺疊區塊 ＋ 議題/區域選項群組
   ========================================================================== */
.admin-sec-head{cursor:pointer;user-select:none;}
.admin-sec-head:hover{background:var(--color-bg-subtle);}
.admin-sec-head h2{display:flex;align-items:center;gap:8px;min-width:0;}
.admin-sec-sub{font-size:12.5px;font-weight:600;color:var(--color-fg-tertiary);}
.admin-cat{border:1px solid var(--color-border);border-radius:10px;margin-bottom:8px;overflow:hidden;}
.admin-cat-head{display:flex;align-items:center;gap:8px;padding:9px 12px;cursor:pointer;
  user-select:none;font-size:14.5px;flex-wrap:wrap;}
.admin-cat-head:hover{background:var(--color-bg-subtle);}
.admin-cat-body{padding:2px 12px 12px;border-top:1px solid var(--color-border);}
.opt-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.opt-group{border:1px solid var(--color-border);border-radius:10px;margin-bottom:8px;overflow:hidden;}
.opt-group-head{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;
  user-select:none;font-size:14.5px;background:var(--color-bg-subtle);}
.opt-group-head:hover{background:var(--color-muted);}
.opt-group .opt-list{padding:4px 12px 8px;}

/* 議題/區域膠囊：依群組排列，且群組預設摺疊（只有已選到的自動展開） */
.pill-groups{display:flex;flex-direction:column;gap:6px;}
.pill-groups-bar{display:flex;gap:4px;align-items:center;margin-bottom:2px;}
.pill-group{border:1px solid var(--color-border);border-radius:10px;overflow:hidden;}
.pill-group-head{display:flex;align-items:center;gap:7px;padding:6px 10px;cursor:pointer;
  user-select:none;background:var(--color-muted);}
.pill-group-head:hover{filter:brightness(.97);}
.pill-group-head [data-icon]{width:14px;height:14px;flex:0 0 auto;color:var(--color-fg-tertiary);vertical-align:middle;}
.pill-group-title{font-size:13px;font-weight:800;color:var(--color-fg-secondary);
  letter-spacing:.03em;margin:0;}
.pill-group-count{font-size:12px;font-weight:700;color:var(--color-fg-tertiary);
  background:var(--color-bg);border:1px solid var(--color-border);border-radius:8px;padding:0 6px;}
.pill-group-sel{font-size:12px;font-weight:800;color:var(--color-primary);margin-left:auto;white-space:nowrap;}
.pill-group-body{display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px;}
.pill-groups.sm .pill-group-head{padding:5px 9px;}
.pill-groups.sm .pill-group-body{padding:6px 9px;}

/* 分工指派：收合狀態下的「議題/區域」摘要標籤 */
.mem-extra-sum{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:center;}
.mem-extra-sum .apc-tag{background:var(--color-bg);border:1px solid var(--color-border);
  border-radius:9px;padding:0 7px;font-size:12.5px;color:var(--color-fg-secondary);white-space:nowrap;}

/* 跨團隊 / 外部通知窗口 */
.ct-pills{display:flex;flex-direction:column;gap:6px;align-items:flex-start;}
.ct-group{display:flex;flex-direction:column;gap:4px;width:100%;}
.ct-group-title{font-size:12px;font-weight:800;color:var(--color-fg-tertiary);letter-spacing:.03em;}
.contact-badge{white-space:nowrap;}
.contact-badge [data-icon]{width:12px;height:12px;vertical-align:-2px;}

/* 首頁待辦事項：先依「專案 / 任務」摺疊，點開才看細項 */
.todo-groups{padding:4px 16px 0;display:flex;flex-direction:column;gap:6px;}
.todo-group{border:1px solid var(--color-border);border-radius:10px;overflow:hidden;}
.todo-group.is-open{border-color:var(--color-border-strong,var(--color-border));}
.todo-group-head{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;
  user-select:none;font-size:14px;background:var(--color-muted);}
.todo-group-head:hover{filter:brightness(.97);}
.todo-group-head>[data-icon]{width:14px;height:14px;flex:0 0 auto;color:var(--color-fg-tertiary);}
.todo-group-name{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.todo-group-body{padding:2px 12px 6px;border-top:1px solid var(--color-border);}
.todo-group-body .subtask-row{font-size:13.5px;}

/* ==========================================================================
   線上課程維護（課程主檔）
   ========================================================================== */
.course-table{min-width:1180px;}
.course-table td{vertical-align:top;}
.course-table .apc-tag{display:inline-block;background:var(--color-muted);border:1px solid var(--color-border);
  border-radius:9px;padding:0 7px;font-size:12.5px;color:var(--color-fg-secondary);white-space:nowrap;margin:1px 0;}
.cs-units{display:flex;gap:6px;flex-wrap:wrap;}
.cs-row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;padding:5px 0;
  border-bottom:1px dashed var(--color-border);align-items:start;}
.cs-row:last-child{border-bottom:none;}
.cs-label{font-size:12.5px;font-weight:700;color:var(--color-fg-tertiary);padding-top:2px;}
.cs-value{font-size:14.5px;line-height:1.6;min-width:0;word-break:break-word;}
.cs-value .apc-tag{display:inline-block;background:var(--color-muted);border:1px solid var(--color-border);
  border-radius:10px;padding:1px 9px;font-size:13px;color:var(--color-fg-secondary);margin:1px 2px 1px 0;}

/* ==========================================================================
   分工樹狀圖（心智圖式）：左樹 + 右資料面板
   ========================================================================== */
.mm-wrap{display:grid;grid-template-columns:minmax(280px,380px) minmax(0,1fr);gap:14px;align-items:start;}
.mm-wrap.is-full{grid-template-columns:minmax(300px,420px) minmax(0,1fr);}
@media (max-width:900px){ .mm-wrap,.mm-wrap.is-full{grid-template-columns:minmax(0,1fr);} }
.mm-tree-card{margin:0;position:sticky;top:76px;}
.mm-tree{max-height:70vh;overflow:auto;padding:4px 2px;}
.mm-wrap.is-full .mm-tree{max-height:68vh;border:1px solid var(--color-border);border-radius:var(--r-md);padding:8px;}
.mm-list{list-style:none;margin:0;padding-left:16px;}
.mm-list.mm-root{padding-left:0;}
.mm-li{position:relative;padding-left:14px;}
.mm-root>.mm-li{padding-left:0;}
/* 連接線：直線串起同層，橫線接到節點 */
.mm-li::before{content:"";position:absolute;left:0;top:0;bottom:0;border-left:1px solid var(--color-border);}
.mm-li:last-child::before{height:17px;}
.mm-li::after{content:"";position:absolute;left:0;top:17px;width:11px;border-top:1px solid var(--color-border);}
.mm-root>.mm-li::before,.mm-root>.mm-li::after{display:none;}
.mm-node{display:flex;align-items:center;gap:6px;min-width:0;padding:5px 8px;margin:1px 0;
  border-radius:7px;cursor:pointer;border:1px solid transparent;font-size:14.5px;}
.mm-node:hover{background:color-mix(in srgb,var(--color-primary) 7%,transparent);}
.mm-node.is-sel{background:color-mix(in srgb,var(--color-primary) 12%,transparent);
  border-color:color-mix(in srgb,var(--color-primary) 45%,transparent);}
.mm-caret{width:18px;height:18px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  border:none;background:none;color:var(--color-fg-tertiary);cursor:pointer;padding:0;border-radius:4px;}
.mm-caret:hover{background:var(--color-muted-strong);}
.mm-caret svg{width:13px;height:13px;}
.mm-caret.is-leaf{cursor:default;}
.mm-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--mm-color,var(--color-border-strong));}
.mm-node.kind-root .mm-dot{width:10px;height:10px;background:var(--color-primary);}
.mm-node.kind-task .mm-dot{border-radius:2px;background:var(--color-fg-tertiary);}
.mm-node.kind-asg .mm-dot{background:var(--color-accent);}
.mm-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mm-node.kind-root .mm-label,.mm-node.kind-cat .mm-label,.mm-node.kind-mem .mm-label,.mm-node.kind-dom .mm-label{font-weight:800;}
.mm-node.kind-sub .mm-label{font-weight:700;}
.mm-node.kind-asg .mm-label{color:var(--color-fg-secondary);}
.mm-count{margin-left:auto;flex:0 0 auto;font-size:12px;font-weight:800;color:var(--color-fg-tertiary);
  background:var(--color-muted);border-radius:var(--r-pill);padding:0 7px;line-height:17px;}
.mm-detail{min-width:0;}
.mm-detail .card{margin:0;}
.mm-d-head{padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--color-border);}
.mm-d-title{font-size:17px;font-weight:800;line-height:1.4;}
.mm-d-sub{font-size:13.5px;color:var(--color-fg-tertiary);margin-top:2px;}
.mm-d-h{font-size:13.5px;font-weight:800;color:var(--color-fg-secondary);margin:14px 0 6px;}
.mm-detail .apc-tag{background:var(--color-muted);border:1px solid var(--color-border);border-radius:10px;
  padding:1px 9px;font-size:13px;color:var(--color-fg-secondary);white-space:nowrap;}

/* ==========================================================================
   週報 / 月報：設定面板與預覽版型
   ========================================================================== */
.rp-scope{margin-top:10px;padding:8px 12px;border-radius:var(--r-md);background:var(--color-muted);
  font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.rp-group{border:1px solid var(--color-border);border-radius:var(--r-md);margin-bottom:10px;overflow:hidden;}
.rp-group-head{display:flex;align-items:center;gap:8px;padding:7px 12px;background:var(--color-muted);
  font-size:13.5px;font-weight:800;color:var(--color-fg-secondary);}
.rp-group-head .btn{margin-left:auto;}
.rp-group-body{display:flex;flex-direction:column;gap:6px;padding:10px 12px;}
.rp-h{font-size:15px;font-weight:800;margin:20px 0 8px;border-left:3px solid var(--color-primary);padding-left:8px;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.rp-h-sub{font-size:12.5px;font-weight:600;color:var(--color-fg-tertiary);}
.rp-ul{margin:0;padding-left:20px;font-size:14px;line-height:1.7;}
.rp-ul li{margin-bottom:3px;}
.rp-pulse{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;}
.rp-pulse-item{border:1px solid var(--color-border);border-radius:var(--r-md);padding:8px 12px;
  display:flex;flex-direction:column;gap:1px;background:var(--color-surface);}
.rp-pulse-item b{font-size:20px;font-weight:800;line-height:1.2;color:var(--color-primary);}
.rp-pulse-item span{font-size:12.5px;color:var(--color-fg-tertiary);font-weight:700;}
.rp-pulse-item.is-warn b{color:var(--color-destructive);}

/* ==========================================================================
   QA 紀錄：後續補充
   ========================================================================== */
.qa-followups{margin:10px 0 0 26px;padding-left:12px;border-left:2px solid var(--color-border);
  display:flex;flex-direction:column;gap:8px;}
.qa-fu-title{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:800;color:var(--color-fg-tertiary);}
.qa-fu-title [data-icon] svg{width:12px;height:12px;}
.qa-fu-meta{font-size:12.5px;font-weight:700;color:var(--color-fg-tertiary);}
.qa-fu-text{font-size:14px;line-height:1.6;color:var(--color-fg-secondary);}
.qa-fu{position:relative;}
.qa-fu-meta{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.qa-fu-edited{font-weight:500;font-size:12px;}
.qa-fu-act{display:inline-flex;gap:2px;margin-left:4px;opacity:.7;transition:opacity .12s ease;}
.qa-fu:hover .qa-fu-act,.qa-fu-act:focus-within{opacity:1;}
.qa-fu-act [data-icon] svg{width:13px;height:13px;}

/* QA 狀態：生效 / 失效(過期) / 待確認 ＋ 封存 */
.qa-card{border-left:4px solid var(--qs-color,var(--color-border));}

.qa-card.is-archived{background:var(--color-muted);}
.qa-question{font-weight:800;font-size:15px;line-height:1.5;}
.qa-card.is-expired .qa-question{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--color-destructive) 45%,transparent);}
.qa-status-select{appearance:auto;border:1px solid color-mix(in srgb,var(--qs-color) 45%,var(--color-border));
  color:var(--qs-color);background:color-mix(in srgb,var(--qs-color) 10%,var(--color-surface));
  font-size:12.5px;font-weight:800;border-radius:999px;padding:2px 6px 2px 10px;height:24px;cursor:pointer;font-family:inherit;}
.qa-status-select option{color:var(--color-fg);background:var(--color-surface);}
.qa-status-print{display:none;}
.present-content .qa-status-print{display:inline-flex;}
.qa-tab-ic{display:inline-flex;vertical-align:-2px;margin-right:4px;}
.qa-tab-ic svg{width:13px;height:13px;}
.qa-expire{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--color-fg-tertiary);
  background:var(--color-muted);border-radius:999px;padding:2px 8px;}
.qa-expire svg{width:12px;height:12px;}
.qa-expire.is-over{color:var(--color-destructive);background:var(--color-destructive-light);}
.qa-status-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.qa-sb-label{font-size:12.5px;font-weight:800;color:var(--color-fg-tertiary);margin-right:2px;}
.qa-sb-chip{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
  padding:5px 12px;border-radius:999px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-fg-secondary);}
.qa-sb-chip b{font-weight:800;color:var(--color-fg);}
.qa-sb-chip:hover{border-color:var(--qs-color,var(--color-primary));}
.qa-sb-chip.is-active{border-color:var(--qs-color,var(--color-primary));color:var(--qs-color,var(--color-primary-dark));
  background:color-mix(in srgb,var(--qs-color,#2563EB) 10%,var(--color-surface));}
.qa-sb-dot{width:8px;height:8px;border-radius:50%;background:var(--qs-color);}

/* QA 各單位 / 平台作法：點單位方塊 → 展開該單位的回答 */
.qa-units{margin:12px 0 0 26px;}
.qa-units-title{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:12.5px;font-weight:800;color:var(--color-fg-tertiary);margin-bottom:8px;}
.qa-units-title [data-icon] svg{width:13px;height:13px;}
.qa-units-hint{font-weight:500;color:var(--color-fg-tertiary);opacity:.85;}
.qa-unit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:10px;margin-bottom:10px;}
.qa-unit-card{border:1px solid var(--color-border);border-left:4px solid var(--qu-color,var(--color-primary));
  border-radius:var(--r-md);padding:9px 11px;background:var(--color-surface);min-width:0;}
.qa-unit-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:5px;}
.qa-unit-name{font-size:14px;font-weight:800;color:var(--qu-color,var(--color-primary));
  background:color-mix(in srgb,var(--qu-color,#2563EB) 12%,transparent);
  border-radius:999px;padding:1px 9px;}
.qa-unit-meta{font-size:12px;color:var(--color-fg-tertiary);margin-left:auto;white-space:nowrap;}
.qa-unit-text{font-size:14px;line-height:1.65;color:var(--color-fg-secondary);overflow-wrap:anywhere;}
.qa-unit-picker{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.qa-unit-chip{display:inline-flex;align-items:center;gap:4px;font-size:13.5px;font-weight:700;cursor:pointer;
  padding:5px 11px;border-radius:999px;background:transparent;color:var(--color-fg-secondary);
  border:1px dashed color-mix(in srgb,var(--qu-color,var(--color-border)) 55%,var(--color-border));
  transition:background .12s ease,color .12s ease,border-color .12s ease;}
.qa-unit-chip [data-icon] svg{width:12px;height:12px;}
.qa-unit-chip:hover{background:color-mix(in srgb,var(--qu-color,#2563EB) 12%,transparent);
  color:var(--qu-color,var(--color-primary));border-color:var(--qu-color,var(--color-primary));border-style:solid;}
.qa-unit-chip.is-custom{border-color:var(--color-border);color:var(--color-fg-tertiary);}
.qa-unit-chip.is-custom:hover{background:var(--color-muted);color:var(--color-fg);}
/* 收合狀態下的「N 個單位作法」小標，讓人知道這則 QA 裡面還有各單位的細節 */
.qa-unit-count{display:inline-flex;align-items:center;gap:4px;vertical-align:middle;margin-left:8px;
  font-size:12px;font-weight:700;color:var(--color-fg-tertiary);
  background:var(--color-muted);border-radius:999px;padding:2px 8px;}
.qa-unit-count [data-icon] svg{width:12px;height:12px;}

/* ==========================================================================
   常用連結 / 資源
   ========================================================================== */
.rl-list{display:flex;flex-direction:column;}
.rl-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;gap:12px;align-items:center;
  padding:10px 18px;border-bottom:1px solid var(--color-border);}
.rl-row:last-child{border-bottom:none;}
.rl-row:hover{background:color-mix(in srgb,var(--color-primary) 4%,transparent);}
.rl-icon{width:32px;height:32px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--color-muted);color:var(--color-fg-tertiary);margin-top:1px;}
.rl-icon [data-icon],.rl-icon svg{width:18px;height:18px;}
.rl-icon.url{background:var(--color-primary-light);color:var(--color-primary);}
.rl-icon.path{background:color-mix(in srgb,#0D9488 14%,transparent);color:#0D9488;}
.rl-main{min-width:0;display:flex;flex-direction:column;gap:5px;}
.rl-title{font-weight:700;font-size:16px;line-height:1.45;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.rl-pin{color:var(--color-warning);}
.rl-pin svg{width:15px;height:15px;}
.rl-url{min-width:0;}
.rl-note{font-size:15px;line-height:1.6;color:var(--color-fg-secondary);}
.rl-tags{display:flex;gap:5px;flex-wrap:wrap;}
/* .apc-tag 本身沒有基礎樣式（只在分工膠囊裡才有），這裡自己補一份 */
.rl-tags .apc-tag{background:var(--color-bg);border:1px solid var(--color-border);border-radius:10px;
  padding:2px 10px;font-size:13.5px;color:var(--color-fg-secondary);white-space:nowrap;}
.rl-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;white-space:nowrap;font-size:13.5px;}
.rl-side .text-xs{font-size:13.5px;}
.rl-act{display:flex;align-items:center;gap:6px;flex:0 0 auto;}
.rl-act-edit{display:flex;gap:2px;}
/* 「開啟」按鈕：取代整條網址，讓每一列只佔一行高度 */
.rl-open-wrap{display:inline-flex;align-items:center;gap:4px;}
.rl-open{height:32px;padding:0 12px;border-radius:8px;font-size:13.5px;font-weight:700;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  background:var(--color-primary);color:#fff;border:1px solid var(--color-primary);}
.rl-open:hover{background:var(--color-primary-dark);border-color:var(--color-primary-dark);text-decoration:none;}
.rl-open svg,.rl-open .icon{width:15px;height:15px;}
.rl-open.is-path{background:#0D9488;border-color:#0D9488;}
.rl-open.is-path:hover{background:#0F766E;border-color:#0F766E;}
/* 網址只在列印／簡報時印出來（螢幕上藏起來，用 hover 的 title 看即可） */
.rl-url-print{display:none;font-family:var(--font-mono);font-size:11.5px;color:var(--color-fg-tertiary);word-break:break-all;}
@media print{
  .rl-open,.rl-copy{display:none !important;}
  .rl-url-print{display:inline;}
}
.present-content .rl-open,.present-content .rl-copy{display:none !important;}
.present-content .rl-url-print{display:inline;}

/* 連結元件（清單、彈窗、Guideline / SOP 檔案網址共用） */
.rl-wrap{display:inline-flex;align-items:center;gap:5px;max-width:100%;min-width:0;}
.rl-a{display:inline-flex;align-items:center;gap:6px;min-width:0;font-size:15px;
  color:var(--color-primary);text-decoration:none;}
.rl-a:hover{text-decoration:underline;}
.rl-a.is-path{color:#0D9488;}
.rl-a.is-mono .rl-text{font-family:var(--font-mono);font-size:14px;}
.rl-a [data-icon],.rl-a svg{width:14px;height:14px;flex:0 0 auto;}
.rl-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
/* 但在「表格 / 卡片內嵌」的場合（Guideline、SOP 的原始文件連結）維持原本較小的字 */
.data-table .rl-a,.gl-file .rl-a,.card-header .rl-a{font-size:13.5px;}
.data-table .rl-a.is-mono .rl-text,.gl-file .rl-a.is-mono .rl-text{font-size:12.5px;}
.rl-copy{width:28px;height:28px;flex:0 0 auto;}
.rl-copy svg{width:14px;height:14px;}
.data-table .rl-copy,.gl-file .rl-copy{width:24px;height:24px;}
.data-table .rl-copy svg,.gl-file .rl-copy svg{width:12px;height:12px;}
:root[data-theme="dark"] .rl-a.is-path{color:#5EEAD4;}
:root[data-theme="dark"] .rl-icon.path{color:#5EEAD4;}
/* 表單裡的型態自動判斷提示 */
.lk-detect{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px;font-size:13px;}

/* 最近更新（日期 / 誰）小標 */
.last-update{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--color-fg-tertiary);white-space:nowrap;}
.last-update [data-icon],.last-update svg{width:12px;height:12px;}
.last-update.is-empty{font-style:italic;opacity:.8;}

/* ==========================================================================
   Check List & SOP：分頁圖示 / 共用區塊
   ========================================================================== */
.tabs .tab-btn>[data-icon]{display:inline-flex;vertical-align:-2px;margin-right:5px;}
.tabs .tab-btn>[data-icon] svg{width:14px;height:14px;}
.tab-btn.sm{padding:5px 11px;font-size:13.5px;border:1px solid var(--color-border);border-radius:var(--r-pill);
  border-bottom-width:1px;margin-bottom:0;background:var(--color-surface);}
.tab-btn.sm.is-active{background:var(--color-primary-light);color:var(--color-primary-dark);border-color:var(--color-primary);}
.tab-btn.sm>[data-icon] svg{width:12px;height:12px;}
.gl-purpose{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:var(--color-fg-secondary);
  background:var(--color-muted);border-radius:var(--r-md);padding:10px 12px;margin-bottom:12px;}
.gl-purpose [data-icon] svg{width:14px;height:14px;color:var(--color-primary);}
.gl-file{font-size:13.5px;color:var(--color-fg-tertiary);margin-bottom:12px;display:flex;align-items:center;gap:6px;}

/* ==========================================================================
   作業 Guideline（時間軸）
   ========================================================================== */
.gl-timeline{list-style:none;margin:0;padding:0 0 0 6px;position:relative;}
.gl-step{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;padding-bottom:18px;}
.gl-step:last-child{padding-bottom:0;}
/* 串起各時間點的直線；最後一個不畫，線才不會突出去 */
.gl-step::before{content:"";position:absolute;left:14px;top:30px;bottom:0;width:2px;background:var(--color-border);}
.gl-step:last-child::before{display:none;}
.gl-dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13.5px;font-weight:800;color:var(--color-on-primary);background:var(--color-primary);
  box-shadow:0 0 0 3px var(--color-surface);position:relative;z-index:1;}
.gl-body{min-width:0;padding-top:2px;}
.gl-when{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px;}
.gl-when-label{font-size:14px;font-weight:800;color:var(--color-primary-dark);
  background:var(--color-primary-light);border-radius:var(--r-pill);padding:2px 10px;}
.gl-owner{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--color-fg-tertiary);}
.gl-owner [data-icon] svg{width:12px;height:12px;}
.gl-title{font-size:15px;font-weight:700;margin-bottom:4px;}
.gl-tasks{margin:0;padding-left:18px;list-style:disc;font-size:14px;color:var(--color-fg-secondary);}
.gl-tasks li{margin:2px 0;}
.gl-note{display:flex;gap:5px;align-items:flex-start;font-size:13px;color:var(--color-warning);margin-top:5px;}
.gl-note [data-icon] svg{width:12px;height:12px;flex:0 0 auto;margin-top:2px;}

/* 年度月份帶（迷你甘特）：13~24 欄＝次年度 */
.gl-band{border:1px solid var(--color-border);border-radius:var(--r-md);overflow-x:auto;margin-bottom:16px;}
.gl-band-row{display:grid;align-items:center;min-width:640px;border-bottom:1px solid var(--color-border);}
.gl-band-row:last-child{border-bottom:none;}
.gl-band-row.is-head{background:var(--color-muted);font-size:12px;font-weight:800;color:var(--color-fg-tertiary);}
.gl-band-name{padding:6px 10px;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border-right:1px solid var(--color-border);}
.gl-band-cell{position:relative;height:26px;text-align:center;line-height:26px;
  border-right:1px solid color-mix(in srgb,var(--color-border) 60%,transparent);}
.gl-band-cell:last-child{border-right:none;}
.gl-band-cell.is-next{background:color-mix(in srgb,var(--color-fg) 4%,transparent);}
.gl-band-bar{position:absolute;left:2px;top:5px;height:16px;border-radius:5px;opacity:.9;}
.gl-band-foot{padding:5px 10px;font-size:12px;color:var(--color-fg-tertiary);background:var(--color-muted);}

/* Guideline 編輯器 */
.gl-edit-rows{display:flex;flex-direction:column;gap:10px;}
.gl-edit-row{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:8px;align-items:start;
  border:1px solid var(--color-border);border-radius:var(--r-md);padding:10px;background:var(--color-surface);}
.gl-edit-seq{width:22px;height:22px;border-radius:50%;background:var(--color-primary-light);color:var(--color-primary-dark);
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;margin-top:4px;}
.gl-edit-fields{min-width:0;display:flex;flex-direction:column;gap:6px;}
.gl-edit-line{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.gl-edit-line>.input{min-width:0;}
.gl-f-when{flex:1 1 190px;}
.gl-f-title{flex:1 1 170px;}
.gl-f-owner{flex:1 1 130px;}
.gl-edit-months{font-size:13px;color:var(--color-fg-tertiary);}
.gl-edit-lbl{font-size:12.5px;font-weight:700;color:var(--color-fg-tertiary);}
.gl-edit-btns{display:flex;flex-direction:column;gap:2px;}
.gl-edit-btns .icon-btn{width:26px;height:26px;font-size:13px;}

/* ==========================================================================
   SOP 作業流程（條列 / 流程圖）
   ========================================================================== */
.sop-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.sop-roles{display:flex;gap:5px;flex-wrap:wrap;min-width:0;}
.sop-viewswitch{display:flex;gap:4px;flex:0 0 auto;}
/* 角色標籤：不再整顆填色（一份 SOP 常有 4~6 個角色，填色會整頁花掉），
   改成淡底＋左側小圓點帶角色顏色，仍分得出誰是誰但視覺安靜很多 */
.sop-role-chip{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;white-space:nowrap;
  color:var(--color-fg-secondary);background:var(--color-muted);
  border:1px solid var(--color-border);border-radius:var(--r-pill);padding:2px 9px;}
.sop-role-chip::before{content:"";width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:var(--role-color,var(--color-border-strong));}
.sop-role-chip.sm{font-size:12.5px;padding:1px 8px;}

/* 條列呈現：一條連續的流程軸，不再是一堆彩色方框 */
.sop-list{list-style:none;margin:0;padding:0;position:relative;}
.sop-li{position:relative;display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start;
  padding:11px 0 11px 2px;border:none;border-radius:0;}
.sop-li + .sop-li{border-top:1px solid var(--color-border);}
/* 步驟之間的連接線（最後一步不畫） */
.sop-li::before{content:"";position:absolute;left:14px;top:34px;bottom:-1px;width:1px;
  background:var(--color-border);}
.sop-li:last-child::before{display:none;}
.sop-no{position:relative;z-index:1;width:26px;height:26px;border-radius:50%;
  background:var(--color-surface);border:1.5px solid var(--color-border-strong);color:var(--color-fg-secondary);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;}
.sop-li.start .sop-no{border-color:var(--color-primary);color:var(--color-primary);}
.sop-li.decision .sop-no{border-color:var(--color-warning);color:var(--color-warning);}
.sop-li.end .sop-no{border-color:var(--color-success);color:var(--color-success);}
.sop-li-body{min-width:0;}
.sop-li-text{font-size:15px;font-weight:700;line-height:1.55;}
/* 角色與類型移到內容底下的淡色行，讓眼睛先看到「要做什麼」 */
.sop-li-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:5px;
  font-size:12.5px;color:var(--color-fg-tertiary);}
.sop-type-tag{font-weight:800;letter-spacing:.02em;}
.sop-li.start .sop-type-tag{color:var(--color-primary);}
.sop-li.decision .sop-type-tag{color:var(--color-warning);}
.sop-li.end .sop-type-tag{color:var(--color-success);}
.sop-li-note{display:flex;gap:5px;align-items:flex-start;font-size:13.5px;color:var(--color-fg-secondary);
  margin-top:6px;line-height:1.55;}
.sop-li-note [data-icon] svg{width:12px;height:12px;flex:0 0 auto;margin-top:3px;color:var(--color-fg-tertiary);}
/* 是 / 否分支：只留左側細色條與小標籤，不再整塊上色 */
.sop-branches{display:flex;flex-direction:column;gap:4px;margin-top:8px;}
.sop-branch{display:flex;align-items:center;gap:8px;min-width:0;font-size:13.5px;
  border:none;border-left:2px solid var(--color-border-strong);border-radius:0;padding:2px 0 2px 10px;background:none;}
.sop-branch.yes{border-left-color:var(--color-success);}
.sop-branch.no{border-left-color:var(--color-destructive);}
.sop-br-tag{flex:0 0 auto;min-width:22px;height:18px;border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;padding:0 6px;
  font-size:12px;font-weight:800;color:#fff;}
.sop-branch.yes .sop-br-tag,.sop-edit-bline.yes .sop-br-tag{background:var(--color-success);}
.sop-branch.no .sop-br-tag,.sop-edit-bline.no .sop-br-tag{background:var(--color-destructive);}
.sop-br-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}
.sop-br-goto{margin-left:auto;display:inline-flex;align-items:center;gap:3px;min-width:0;flex-shrink:1;
  color:var(--color-fg-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sop-br-goto [data-icon] svg{width:11px;height:11px;}
.sop-jump{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--color-primary);margin-top:6px;}
.sop-jump [data-icon] svg{width:12px;height:12px;}
/* 條列呈現的可點分支／接續：跟流程圖一樣，按下去捲到它指向的步驟 */
button.sop-branch,button.sop-jump{font-family:inherit;text-align:left;cursor:pointer;width:100%;}
.sop-branch.is-link{transition:background .12s ease;border-radius:0 6px 6px 0;}
.sop-branch.is-link:hover{background:color-mix(in srgb,var(--color-primary) 8%,transparent);}
.sop-branch.is-link:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;}
.sop-branch.is-link .sop-br-goto{color:var(--color-primary);text-decoration:underline;text-underline-offset:2px;}
.sop-jump.is-link{background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;font-weight:700;width:auto;}
/* 被跳到的那一列閃一下，才知道畫面停在哪 */
.sop-li.is-flash{animation:stFlash 1.6s ease-out;border-radius:var(--r-sm);}
/* SOP 卡片頭：把統計資訊壓成一行淡字，不再一堆彩色徽章 */
.sop-head-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:3px;
  font-size:12.5px;color:var(--color-fg-tertiary);}
.sop-head-meta .sop-dot{width:3px;height:3px;border-radius:50%;background:var(--color-border-strong);flex:0 0 auto;}
.sop-cat{font-weight:800;color:var(--sop-cat-color,var(--color-fg-secondary));}

/* 流程圖呈現：左欄角色、右欄節點 */
.sop-flow{border:1px solid var(--color-border);border-radius:var(--r-md);overflow-x:auto;padding-bottom:8px;}
.sop-flow-head{display:grid;grid-template-columns:150px minmax(0,1fr);background:var(--color-muted);
  font-size:12px;font-weight:800;color:var(--color-fg-tertiary);letter-spacing:.04em;}
.sop-flow-head>div{padding:6px 12px;}
.sop-flow-head>div:first-child{border-right:1px solid var(--color-border);}
.sop-frow{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:start;min-width:520px;}
.sop-frole{padding:12px;border-right:1px solid var(--color-border);align-self:stretch;}
.sop-fbody{padding:10px 16px;display:flex;flex-direction:column;align-items:center;}
.sop-fnode{display:flex;align-items:flex-start;gap:9px;width:100%;max-width:560px;
  border:1.5px solid var(--color-border-strong);border-radius:var(--r-md);background:var(--color-surface);
  padding:9px 14px;box-shadow:var(--shadow-sm);}
.sop-fnode.start,.sop-fnode.end{border-radius:var(--r-pill);padding:9px 22px;}
.sop-fnode.start{border-color:var(--color-primary);background:var(--color-primary-light);}
.sop-fnode.end{border-color:var(--color-success);background:var(--color-success-light);}
/* 判斷節點用六邊形輪廓，一眼分辨得出這裡要做決定 */
.sop-fnode.decision{border-color:var(--color-warning);background:var(--color-warning-light);
  clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,18px 100%,0 50%);
  padding:11px 30px;box-shadow:none;}
.sop-fno{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--color-fg-secondary);color:var(--color-surface);
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;}
.sop-fnode.decision .sop-fno{background:var(--color-warning);}
.sop-fnode.start .sop-fno{background:var(--color-primary);}
.sop-fnode.end .sop-fno{background:var(--color-success);}
.sop-ftext{min-width:0;font-size:14.5px;font-weight:600;line-height:1.45;}
.sop-fnote{font-size:12.5px;font-weight:500;color:var(--color-fg-tertiary);margin-top:3px;}
.sop-fconn{height:22px;width:2px;background:var(--color-border-strong);position:relative;margin:2px 0;}
.sop-farrow{position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);
  border-width:7px 5px 0 5px;border-style:solid;border-color:var(--color-border-strong) transparent transparent transparent;}
.sop-fbranch{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px;width:100%;max-width:560px;}
/* 兩排：標籤佔左欄跨兩列，右欄上排是「是/否」的說明、下排是要跳到哪一步。
   排成一列時長標籤會把說明擠成一字一行，所以這裡用 grid 分兩排。 */
.sop-fbr{display:grid;grid-template-columns:19px minmax(0,1fr);gap:2px 7px;align-items:center;
  flex:1 1 240px;min-width:0;font-size:13px;border-radius:var(--r-sm);padding:6px 10px;border:1px solid;}
.sop-fbr.yes{border-color:color-mix(in srgb,var(--color-success) 55%,transparent);
  background:color-mix(in srgb,var(--color-success) 8%,transparent);}
.sop-fbr.no{border-color:color-mix(in srgb,var(--color-destructive) 50%,transparent);
  background:color-mix(in srgb,var(--color-destructive) 7%,transparent);}
.sop-fbr-tag{grid-row:span 2;align-self:center;width:19px;height:19px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;}
.sop-fbr.yes .sop-fbr-tag{background:var(--color-success);}
.sop-fbr.no .sop-fbr-tag{background:var(--color-destructive);}
.sop-fbr-text{min-width:0;font-weight:700;overflow-wrap:anywhere;}
.sop-fbr-goto{min-width:0;font-size:12.5px;color:var(--color-fg-tertiary);font-weight:600;overflow-wrap:anywhere;}
.sop-fjump{font-size:13px;color:var(--color-primary);margin-top:6px;font-weight:700;}
.sop-fjump.is-end{color:var(--color-success);}
/* 可點的分支／接續：按下去會捲到它指向的步驟 */
button.sop-fbr,button.sop-fjump{font-family:inherit;text-align:left;cursor:pointer;}
button.sop-fjump{border:0;background:none;padding:0;text-decoration:underline;text-underline-offset:3px;}
.sop-fbr.is-link{position:relative;transition:box-shadow .12s ease,transform .12s ease;}
.sop-fbr.is-link:hover{box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 35%,transparent);transform:translateY(-1px);}
.sop-fbr.is-link:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;}
.sop-fbr.is-link .sop-fbr-goto{color:var(--color-primary);text-decoration:underline;text-underline-offset:2px;}
/* 被跳到的那一列閃一下，才知道畫面停在哪 */
.sop-frow.is-flash{animation:stFlash 1.6s ease-out;border-radius:var(--r-sm);}

/* SOP 編輯器 */
.sop-edit-rows{display:flex;flex-direction:column;gap:10px;}
.sop-edit-row{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:8px;align-items:start;
  border:1px solid var(--color-border);border-radius:var(--r-md);padding:10px;background:var(--color-surface);}
.sop-edit-row.is-decision{border-color:color-mix(in srgb,var(--color-warning) 55%,transparent);
  background:color-mix(in srgb,var(--color-warning) 4%,transparent);}
.sop-edit-seq{width:22px;height:22px;border-radius:50%;background:var(--color-muted-strong);color:var(--color-fg-secondary);
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:800;margin-top:4px;}
.sop-edit-fields{min-width:0;display:flex;flex-direction:column;gap:6px;}
.sop-edit-line{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.sop-f-type{flex:0 0 96px;}
.sop-f-role{flex:1 1 140px;min-width:0;}
.sop-f-text{flex:2 1 240px;min-width:0;}
/* 是/否分支只在「判斷」步驟出現；其他步驟則顯示單一的「完成後接續」 */
.sop-edit-branch{display:none;flex-direction:column;gap:5px;}
.sop-edit-row.is-decision .sop-edit-branch{display:flex;}
.sop-edit-row.is-decision .sop-edit-goto{display:none;}
.sop-edit-bline{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.sop-edit-bline .input{flex:1 1 200px;min-width:0;}
.sop-edit-goto{display:flex;align-items:center;gap:6px;}

/* ==========================================================================
   2026-09-17：年度大事記「事件群組 / 標籤」
   ========================================================================== */
.evg-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:2px 10px 2px 8px;border-radius:var(--r-pill);
  font:inherit;font-size:13px;font-weight:600;line-height:1.5;white-space:nowrap;
  color:color-mix(in srgb,var(--evg) 82%,var(--color-fg));background:color-mix(in srgb,var(--evg) 10%,var(--color-surface));
  border:1px solid color-mix(in srgb,var(--evg) 30%,transparent);}
.evg-chip i{width:8px;height:8px;border-radius:50%;background:var(--evg);flex:none;}
.evg-chip.is-link{cursor:pointer;}
.evg-chip.is-link:hover{background:color-mix(in srgb,var(--evg) 18%,var(--color-surface));}
.ev-tags{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:5px;}
.ev-tag{display:inline-flex;align-items:center;gap:3px;padding:0 8px;border-radius:var(--r-pill);font:inherit;font-size:12.5px;line-height:1.7;
  color:var(--color-fg-secondary);background:var(--color-muted);border:1px solid var(--color-border);}
.ev-tag.is-link{cursor:pointer;}
.ev-tag.is-link:hover{color:var(--color-primary);border-color:color-mix(in srgb,var(--color-primary) 45%,var(--color-border));}
.ev-tag.is-edit button{border:0;background:none;padding:0 0 0 2px;cursor:pointer;color:var(--color-fg-tertiary);font-size:14px;line-height:1;}
.ev-tag.is-edit button:hover{color:var(--color-destructive);}
.ev-main-badge{display:inline-flex;align-items:center;padding:0 8px;border-radius:6px;font-size:12px;font-weight:600;line-height:1.75;
  color:#fff;background:var(--evg,var(--color-primary));}
.timeline-entry[style*="--evg"]::before{background:var(--evg);}
.timeline-entry.is-main::before{width:15px;height:15px;left:-9px;top:12px;box-shadow:0 0 0 3px color-mix(in srgb,var(--evg,var(--color-primary)) 25%,transparent);}
.calendar-event.has-group{box-shadow:inset 3px 0 0 var(--evg);padding-left:7px;}

.evg-banner{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.5fr) auto;gap:18px;align-items:center;
  padding:16px 20px;border-radius:var(--r-lg);border:1px solid color-mix(in srgb,var(--evg) 28%,var(--color-border));
  background:linear-gradient(90deg,color-mix(in srgb,var(--evg) 9%,var(--color-surface)),var(--color-surface) 70%);box-shadow:var(--shadow-sm);
  border-left:5px solid var(--evg);}
.evg-banner-kicker{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--color-fg-tertiary);}
.evg-banner-title{font-size:20px;font-weight:700;color:var(--color-fg);}
.evg-banner-desc{font-size:14px;color:var(--color-fg-secondary);margin-top:2px;}
.evg-banner-stats{display:flex;flex-wrap:wrap;gap:8px 26px;}
.evg-banner-stats div{display:flex;flex-direction:column;min-width:0;}
.evg-banner-stats span{font-size:12.5px;color:var(--color-fg-tertiary);}
.evg-banner-stats b{font-size:15px;font-weight:600;color:var(--color-fg);}
.evg-banner-acts{display:flex;flex-direction:column;gap:6px;align-items:stretch;}
@media (max-width:1100px){ .evg-banner{grid-template-columns:minmax(0,1fr);} .evg-banner-acts{flex-direction:row;flex-wrap:wrap;} }

.evg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:var(--sp-4);align-items:start;}
.evg-card{border-top:4px solid var(--evg);overflow:hidden;}
.evg-card-head{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;padding:14px 18px 8px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--evg) 7%,var(--color-surface)),var(--color-surface));}
.evg-card-title{font-size:17px;font-weight:700;color:var(--color-fg);}
.evg-card-meta{font-size:13px;color:var(--color-fg-tertiary);margin-top:1px;}
.evg-card-desc{font-size:13.5px;color:var(--color-fg-secondary);margin-top:4px;}
.evg-card-body{padding:6px 18px 8px;}
.evg-card-body .timeline-entry::before{background:var(--evg);}
.evg-card-foot{display:flex;gap:8px;align-items:center;padding:8px 14px;border-top:1px solid var(--color-border);background:var(--color-bg-subtle);}

.evg-form-box{padding:12px 14px;border-radius:var(--r-md);background:var(--color-bg-subtle);border:1px solid var(--color-border);}
.evg-form-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;}
.evg-form-row .hidden + *{grid-column:auto;}
.evg-main-check{display:flex !important;align-items:center;gap:8px;margin-top:8px;font-size:14px;font-weight:500;color:var(--color-fg-secondary);cursor:pointer;}
.evg-main-check.hidden{display:none !important;}
.evg-main-check input{width:16px;height:16px;accent-color:var(--color-primary);}
.evg-swatches{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.evg-swatch{width:26px;height:26px;border-radius:50%;border:2px solid var(--color-surface);box-shadow:0 0 0 1px var(--color-border);cursor:pointer;padding:0;}
.evg-swatch.is-on{box-shadow:0 0 0 2px var(--color-fg);}
.evg-swatches input[type=color]{width:34px;height:28px;padding:0;border:1px solid var(--color-border);border-radius:8px;background:none;cursor:pointer;}
.ev-tag-input{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:42px;padding:5px 10px;cursor:text;
  border:1px solid var(--color-border-strong);border-radius:var(--r-sm);background:var(--color-surface);}
.ev-tag-input:focus-within{border-color:var(--color-primary);box-shadow:var(--shadow-focus);}
.ev-tag-input #evTagChips{display:contents;}
.ev-tag-input input{flex:1;min-width:140px;border:0;outline:0;background:transparent;font:inherit;font-size:15px;color:var(--color-fg);padding:4px 0;}
.ev-tag-suggest{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-top:6px;}

/* ==========================================================================
   2026-09-17：專案甘特圖工具列（顯示欄位 / 依類別拆分 / 預覽模式）
   ========================================================================== */
.gv-toolbar{display:flex;flex-direction:column;gap:10px;padding:10px 12px;border:1px solid var(--color-border);border-radius:var(--r-lg);
  background:var(--color-surface);box-shadow:var(--shadow-sm);}
.gv-toolbar-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.gv-sep{width:1px;height:24px;background:var(--color-border);margin:0 4px;}
.gv-toggle{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:10px;cursor:pointer;
  font:inherit;font-size:14px;font-weight:500;color:var(--color-fg-secondary);background:var(--color-surface);border:1px solid var(--color-border);}
.gv-toggle svg{width:15px;height:15px;}
.gv-toggle:hover{background:var(--color-muted);}
.gv-toggle.is-on{color:var(--color-primary-dark);background:var(--color-primary-light);border-color:color-mix(in srgb,var(--color-primary) 35%,transparent);}
.gv-toggle[data-gv-toggle="preview"].is-on{color:var(--color-accent-dark);background:var(--color-accent-light);border-color:color-mix(in srgb,var(--color-accent) 35%,transparent);}
.gv-sliders{padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--color-accent) 6%,var(--color-surface));
  border:1px solid color-mix(in srgb,var(--color-accent) 22%,var(--color-border));}
.gv-slider{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border-radius:10px;background:var(--color-surface);
  border:1px solid var(--color-border);box-shadow:var(--shadow-sm);font-size:13.5px;color:var(--color-fg-secondary);}
.gv-slider input{width:120px;accent-color:var(--color-accent);}
.gv-slider b{font-weight:600;color:var(--color-fg);min-width:44px;font-variant-numeric:tabular-nums;}
.chart-legend .swatch.swatch-rem{background:repeating-linear-gradient(135deg,#CBD5E1 0 3px,#F1F5F9 3px 6px);border:1px solid #CBD5E1;}

/* ==========================================================================
   2026-09 視覺改版（只調整顏色、飽和度、圓角、陰影、字重；間距與版面結構不變）
   參考 logistics-risk-management：白色半透明頂欄、sky→emerald 品牌漸層、slate 中性色、
   較圓的卡片與柔和陰影。小字一律不用粗體（微軟正黑體的小字粗體會糊在一起）。
   ========================================================================== */
.topbar{background:color-mix(in srgb,var(--color-surface) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);box-shadow:none;}
.brand-mark{background:linear-gradient(135deg,#0EA5E9,#10B981);border-radius:12px;}
.brand-title{font-weight:700;}
.brand-sub{font-weight:500;}
.topbar-search{background:var(--color-bg-subtle);}
.user-chip{background:var(--color-surface);}
.select-plain{background-color:var(--color-bg-subtle);font-weight:500;}

.sidebar{background:var(--color-surface);}
.nav-item{font-weight:500;border-radius:12px;}
.nav-item:hover{background:var(--color-bg-subtle);}
.nav-item.is-active{background:color-mix(in srgb,var(--color-primary) 9%,var(--color-surface));color:var(--color-primary-dark);font-weight:600;
  box-shadow:inset 3px 0 0 var(--color-primary);}
.nav-section-title{font-weight:600;font-size:12.5px;letter-spacing:.08em;}

.btn{font-weight:600;border-radius:12px;}
.btn-sm{font-weight:500;border-radius:10px;}
.btn-primary{background:var(--color-primary);box-shadow:0 1px 2px rgba(2,132,199,.25);}
.btn-primary:hover{background:var(--color-primary-dark);}
.btn-outline{border-color:var(--color-border);color:var(--color-fg-secondary);}
.btn-outline:hover{background:var(--color-bg-subtle);color:var(--color-fg);border-color:var(--color-border-strong);}
.icon-btn{border-radius:10px;}

.card,.stat-card{border-color:var(--color-border);box-shadow:var(--shadow-sm);}
.card-header h2,.card-header h3{font-weight:700;}
.section-title{font-weight:700;}
.stat-label{font-weight:500;}
.stat-value{font-weight:700;}
.stat-card::before{width:3px;opacity:.85;}

.badge{font-weight:500;}
.tag-pill{font-weight:500;}
.badge-primary{background:color-mix(in srgb,var(--color-primary) 10%,var(--color-surface));color:var(--color-primary-dark);}
.badge-purple{background:#EFEDF7;color:#5B4B8A;}
.badge-teal{background:#E3F1F2;color:#2F6C75;}

table.data-table thead th{font-weight:600;}
.calendar-event{font-weight:500;}
.gantt-head-side,.gantt-head-cell{font-weight:500;}
.gantt-row-title{font-weight:600;}
.gantt-bar{font-weight:500;border-radius:8px;box-shadow:none;}
.gantt-bar-text{text-shadow:none;}

.modal{border-radius:20px;}
.modal-backdrop{background:rgba(15,23,42,.40);backdrop-filter:blur(4px);}
.filter-bar{border-radius:var(--r-lg);}
.view-toggle button{font-weight:500;}
.view-toggle button.is-active{font-weight:600;}
.progress-fill{background:var(--color-primary);}
:root[data-theme="dark"] .gantt-bar.is-partial .gantt-bar-text{background:rgba(15,23,42,.86);}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .gantt-bar.is-partial .gantt-bar-text{background:rgba(15,23,42,.86);} }
.present-content .gantt-bar.is-partial .gantt-bar-text{background:rgba(255,255,255,.9);color:#1E293B;}

/* 甘特圖：作業類型標籤 */
.gantt-row-badges{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0 1px;}
.gantt-optype{display:inline-flex;align-items:center;padding:0 7px;border-radius:6px;font-size:12px;font-weight:500;line-height:1.6;white-space:nowrap;
  color:var(--ot);background:color-mix(in srgb,var(--ot) 11%,var(--color-surface));border:1px solid color-mix(in srgb,var(--ot) 28%,transparent);
  -webkit-print-color-adjust:exact;print-color-adjust:exact;}
.gantt-wrap.is-tuned .gantt-optype{font-size:calc(var(--g-fs)*.78);}
.gantt-wrap.is-compact .gantt-row-badges{display:none;}

/* 簡報 / PDF 裡的甘特圖：不可以有捲軸——整張壓進頁寬，字級與項目欄寬跟著簡報工具列的「字級 / 欄寬」走 */
.present-content .gantt-wrap{overflow:visible;}
.present-content .gantt-grid{min-width:0 !important;}
.present-content .gantt-head,.present-content .gantt-row{grid-template-columns:calc(var(--g-label-w,220px) * var(--present-col-scale)) minmax(0,1fr);}
.present-content .gantt-wrap.has-extra .gantt-head,.present-content .gantt-wrap.has-extra .gantt-row{
  grid-template-columns:calc(var(--g-label-w,220px) * var(--present-col-scale)) calc(var(--g-extra-w,240px) * var(--present-col-scale)) minmax(0,1fr);}
.present-content .gantt-head-cell{font-size:calc(11.5px * var(--present-font-scale)) !important;padding:6px 1px;white-space:normal;word-break:break-all;line-height:1.25;}
.present-content .gantt-head-side{font-size:calc(12.5px * var(--present-font-scale)) !important;}
.present-content .gantt-row-title{font-size:calc(var(--g-fs,14.5px) * var(--present-font-scale)) !important;}
.present-content .gantt-row-meta{font-size:calc(var(--g-fs,14.5px) * .86 * var(--present-font-scale)) !important;}
.present-content .gantt-row-extra{font-size:calc(var(--g-fs,14.5px) * .88 * var(--present-font-scale)) !important;}
.present-content .gantt-bar{font-size:calc(var(--g-fs,14.5px) * .8 * var(--present-font-scale)) !important;}
.present-content .gantt-optype{font-size:calc(var(--g-fs,14.5px) * .76 * var(--present-font-scale)) !important;}
.present-content .gantt-card{break-inside:avoid;}
.present-content .gantt-card .card-header{flex-wrap:wrap;}
/* 橫向版面：預覽畫面加寬（列印時以 @page 決定紙張方向） */
.present-stage.is-landscape{max-width:1414px;}

/* 全站字級 小 / 中 / 大（由 initFontScale 設定 --ui-zoom） */
#viewRoot,.modal,.nav-group{zoom:var(--ui-zoom,1);}
.font-scale-switch{display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--color-border);border-radius:10px;background:var(--color-bg-subtle);}
.font-scale-switch .fss-label{font-size:12.5px;color:var(--color-fg-tertiary);padding:0 6px 0 8px;}
.font-scale-switch button{border:0;background:transparent;cursor:pointer;font:inherit;font-size:14px;color:var(--color-fg-secondary);
  min-width:30px;height:30px;border-radius:8px;padding:0 6px;}
.font-scale-switch button:hover{background:var(--color-muted);}
.font-scale-switch button.is-active{background:var(--color-surface);color:var(--color-primary-dark);font-weight:600;box-shadow:var(--shadow-sm);}
@media (max-width:980px){ .font-scale-switch .fss-label{display:none;} }

/* 年度大事記：列表改為「一筆一列」，日期 / 內容 / 分類三欄分開，月份段落更明顯 */
.tl-months{display:flex;flex-direction:column;gap:22px;}
.tl-month-head{display:flex;align-items:center;gap:10px;margin:0 2px 10px;}
.tl-month-label{font-size:18px;font-weight:700;color:var(--color-fg);}
.tl-month-count{font-size:13px;color:var(--color-fg-tertiary);padding:1px 9px;border-radius:var(--r-pill);background:var(--color-muted);}
.tl-month-rule{flex:1;height:1px;background:var(--color-border);}
.tl-rows{display:flex;flex-direction:column;gap:10px;}
.tl-row{display:grid;grid-template-columns:132px minmax(0,1fr) minmax(180px,300px);align-items:stretch;
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--r-md);box-shadow:var(--shadow-sm);
  border-left:4px solid var(--tl-stripe);overflow:hidden;transition:box-shadow .15s ease,border-color .15s ease;}
.tl-row.ev-clickable:hover{box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--tl-stripe) 40%,var(--color-border));border-left-color:var(--tl-stripe);}
.tl-row.is-main{background:linear-gradient(90deg,color-mix(in srgb,var(--tl-stripe) 7%,var(--color-surface)),var(--color-surface) 45%);}
.tl-date{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:12px 8px;
  background:var(--color-bg-subtle);border-right:1px solid var(--color-border);}
.tl-date-day{font-size:26px;line-height:1.1;font-weight:600;color:var(--color-fg);font-variant-numeric:tabular-nums;}
.tl-date-sub{font-size:12.5px;color:var(--color-fg-tertiary);white-space:nowrap;font-variant-numeric:tabular-nums;}
.tl-main{padding:12px 18px;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px;}
.tl-title{font-size:16px;font-weight:600;color:var(--color-fg);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.tl-desc{font-size:14.5px;color:var(--color-fg-secondary);line-height:1.6;white-space:pre-wrap;}
.tl-side{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:6px;padding:10px 16px;border-left:1px dashed var(--color-border);}
.tl-side-chips{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end;}
@media (max-width:820px){
  .tl-row{grid-template-columns:96px minmax(0,1fr);}
  .tl-side{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;border-left:0;border-top:1px dashed var(--color-border);}
}

/* QA：回答列與後續補充對齊（後續補充的左緣＝回答文字開始的位置） */
.qa-answer-row{display:flex;gap:10px;margin-top:10px;padding-left:26px;}
.qa-a-badge{flex:0 0 26px;width:26px;height:22px;justify-content:center;padding:0;}
.qa-card .qa-followups{margin-left:62px;}
@media (max-width:640px){ .qa-card .qa-followups{margin-left:26px;} }

/* 簡易格式文字：編輯器 + 顯示 */
.rt-wrap{display:flex;flex-direction:column;border:1px solid var(--color-border-strong);border-radius:var(--r-sm);background:var(--color-surface);overflow:hidden;}
.rt-wrap:focus-within{border-color:var(--color-primary);box-shadow:var(--shadow-focus);}
.rt-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:3px;padding:5px 6px;background:var(--color-bg-subtle);border-bottom:1px solid var(--color-border);}
.rt-btn{display:inline-flex;align-items:center;gap:5px;height:30px;min-width:30px;padding:0 9px;border:1px solid transparent;border-radius:8px;
  background:transparent;color:var(--color-fg-secondary);font:inherit;font-size:13.5px;cursor:pointer;justify-content:center;}
.rt-btn:hover{background:var(--color-surface);border-color:var(--color-border);color:var(--color-fg);}
.rt-btn b,.rt-btn i,.rt-btn u{font-size:15px;color:var(--color-fg);}
.rt-color i{width:11px;height:11px;border-radius:3px;display:inline-block;}
.rt-sep{width:1px;height:20px;background:var(--color-border);margin:0 4px;}
.rt-editor{border:0 !important;border-radius:0 !important;box-shadow:none !important;outline:none;overflow:auto;max-height:420px;
  line-height:1.65;white-space:normal;cursor:text;}
.rt-editor:empty::before{content:attr(data-placeholder);color:var(--color-fg-tertiary);}
.rt-editor ul,.rt-view ul{list-style:disc;padding-left:1.6em;margin:4px 0;}
.rt-editor ol,.rt-view ol{list-style:decimal;padding-left:1.8em;margin:4px 0;}
.rt-editor li,.rt-view li{margin:2px 0;}
.rt-editor p,.rt-view p{margin:0 0 4px;}
.rt-view b,.rt-view strong{font-weight:700;color:var(--color-fg);}
:root[data-theme="dark"] .rt-view span[style*="rgb(30, 41, 59)"],:root[data-theme="dark"] .rt-editor span[style*="rgb(30, 41, 59)"]{color:var(--color-fg) !important;}

/* 個人 KPI 儀表板（參考 logistics-risk-management 個人KPI 頁：大數字 → 分布圓餅 → 重點追蹤 / 落後提醒） */
.kpi-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4);}
@media (max-width:980px){ .kpi-tiles{grid-template-columns:repeat(2,minmax(0,1fr));} }
.kpi-tile{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  padding:18px 20px;position:relative;overflow:hidden;}
.kpi-tile::after{content:"";position:absolute;right:-18px;top:-18px;width:76px;height:76px;border-radius:50%;background:var(--kt);opacity:.08;}
.kpi-tile-label{font-size:14px;color:var(--color-fg-tertiary);}
.kpi-tile-value{font-size:38px;line-height:1.15;font-weight:600;color:var(--kt);font-variant-numeric:tabular-nums;margin-top:4px;}
.kpi-tile-value small{font-size:22px;margin-left:2px;}
.kpi-tile-sub{font-size:13px;color:var(--color-fg-tertiary);margin-top:2px;}
.kpi-panel{padding:18px 20px;}
.kpi-panel-title{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:700;color:var(--color-fg);margin-bottom:14px;}
.kpi-panel-title [data-icon]{color:#48636E;}
.kpi-donuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);}
@media (max-width:1100px){ .kpi-donuts{grid-template-columns:minmax(0,1fr);} }
.kpi-donut-box{background:var(--color-bg-subtle);border:1px solid var(--color-border);border-radius:var(--r-md);padding:14px 16px;}
.kpi-donut-title{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14.5px;color:var(--color-fg-secondary);margin-bottom:10px;}
.kpi-donut-title .btn{height:26px;padding:0 8px;}
.kpi-watch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5);margin-top:18px;padding-top:16px;border-top:1px solid var(--color-border);}
@media (max-width:980px){ .kpi-watch{grid-template-columns:minmax(0,1fr);} }
.kpi-watch-title{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:600;margin-bottom:10px;}
.kpi-watch-list{display:flex;flex-direction:column;gap:8px;}
.kpi-watch-item{border-radius:10px;padding:10px 12px;cursor:pointer;border:1px solid;}
.kpi-watch-item.is-focus{background:#FBF3F3;border-color:#F0DADA;}
.kpi-watch-item.is-late{background:#FBF6EC;border-color:#F0E3C7;}
.kpi-watch-item:hover{filter:brightness(.98);}
.kpi-watch-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.kpi-watch-name{font-size:14.5px;font-weight:600;color:var(--color-fg);min-width:0;}
.kpi-watch-sub{font-size:13px;color:var(--color-fg-secondary);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kpi-late-reason{font-size:12.5px;color:#9A6A1A;white-space:nowrap;}
.kpi-mini-bar{display:flex;align-items:center;gap:8px;margin-top:6px;}
.kpi-mini-track{flex:1;height:6px;border-radius:99px;background:var(--color-surface);overflow:hidden;}
.kpi-mini-track div{height:100%;border-radius:99px;}
.kpi-mini-bar b{font-size:12.5px;font-weight:600;min-width:36px;text-align:right;}
.kpi-empty{text-align:center;padding:22px 10px;font-size:13.5px;color:var(--color-fg-tertiary);border:1px dashed var(--color-border-strong);border-radius:10px;}
.kpi-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(460px,1fr));gap:var(--sp-4);}
@media (max-width:640px){ .kpi-card-grid{grid-template-columns:minmax(0,1fr);} }
.kpi-card{border-top:3px solid var(--kc);}
.kpi-card.is-focus{box-shadow:0 0 0 1px #F0DADA,var(--shadow-sm);}
.kpi-card-title{font-size:16.5px;font-weight:700;color:var(--color-fg);}
.kpi-prog{display:flex;align-items:center;gap:10px;}
.kpi-prog b{font-size:15px;font-weight:600;color:var(--kc);min-width:42px;text-align:right;}
.kpi-prog-track{flex:1;position:relative;height:10px;border-radius:99px;background:var(--color-muted);}
.kpi-prog-fill{height:100%;border-radius:99px;background:var(--kc);}
.kpi-prog-exp{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--color-fg-tertiary);border-radius:2px;}
:root[data-theme="dark"] .kpi-watch-item.is-focus{background:#2A1A1D;border-color:#4A2A2E;}
:root[data-theme="dark"] .kpi-watch-item.is-late{background:#2A2212;border-color:#4A3B1C;}

/* 事件群組：可輸入搜尋的選擇器、封存 / 結案 */
.evg-combo{position:relative;display:flex;align-items:center;}
.evg-combo .input{padding-left:30px;padding-right:34px;}
.evg-combo-dot{position:absolute;left:12px;width:10px;height:10px;border-radius:50%;background:var(--color-border-strong);pointer-events:none;}
.evg-combo-clear{position:absolute;right:8px;width:24px;height:24px;border:0;border-radius:6px;background:transparent;color:var(--color-fg-tertiary);font-size:18px;line-height:1;cursor:pointer;}
.evg-combo-clear:hover{background:var(--color-muted);color:var(--color-fg);}
.evg-combo-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;max-height:280px;overflow:auto;padding:4px;
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;box-shadow:var(--shadow-lg);}
.evg-combo-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:14.5px;}
.evg-combo-item i{width:10px;height:10px;border-radius:50%;flex:none;}
.evg-combo-item:hover,.evg-combo-item.is-active{background:var(--color-muted);}
.evg-combo-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-fg);}
.evg-combo-count{font-size:12.5px;color:var(--color-fg-tertiary);white-space:nowrap;}
.evg-combo-item.is-new{color:var(--color-primary-dark);border-top:1px dashed var(--color-border);margin-top:2px;}
.evg-combo-empty{padding:10px;font-size:13.5px;color:var(--color-fg-tertiary);text-align:center;}
.evg-combo-hint{font-size:13px;color:var(--color-fg-tertiary);margin-top:4px;min-height:0;}
.evg-close-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px;}
.evg-close-row.hidden{display:none;}
.evg-close-row .evg-main-check{margin-top:0;}
.evg-close-row .input-sm{width:170px;}
.evg-status{display:inline-flex;align-items:center;padding:0 8px;border-radius:6px;font-size:12.5px;font-weight:500;line-height:1.75;
  background:var(--color-accent-light);color:var(--color-accent-dark);}
.evg-status.is-closed{background:var(--color-muted);color:var(--color-fg-secondary);border:1px solid var(--color-border);}
.evg-card-title .evg-status{margin-left:8px;vertical-align:middle;}
.evg-card.is-closed{border-top-style:dashed;}
.evg-card.is-closed .evg-card-head{background:var(--color-bg-subtle);}
.evg-chip.is-closed{opacity:.85;}
.evg-closed-mark{font-size:11px;padding:0 5px;margin-left:2px;border-radius:4px;background:var(--color-muted);color:var(--color-fg-tertiary);}
.evg-tabs{display:flex;gap:4px;border-bottom:1px solid var(--color-border);}
.evg-tabs button{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border:0;background:transparent;cursor:pointer;
  font:inherit;font-size:15px;color:var(--color-fg-secondary);border-bottom:2px solid transparent;margin-bottom:-1px;}
.evg-tabs button:hover{color:var(--color-fg);}
.evg-tabs button.is-active{color:var(--color-primary-dark);border-bottom-color:var(--color-primary);font-weight:600;}

.cloud-problem{position:fixed;bottom:20px;left:20px;right:20px;z-index:100000;background:var(--color-bg-primary,#fff);color:var(--color-fg-primary,#111);border:2px solid #b24c4c;border-radius:12px;padding:20px;box-shadow:0 4px 24px #0003}.cloud-problem p{margin:8px 0}