/* ===========================================================
   集團 EIP Portal — 企業識別配色
   主色 #F07F09（聖東品牌主色）／淺色背景／dk1・dk2 文字
   =========================================================== */
:root {
  --brand:        #F07F09;
  --brand-dark:   #C96A07;
  --brand-soft:   #FEF3E6;
  --danger:       #9F2936;
  --info:         #1B587C;
  --success:      #4E8542;
  --purple:       #604878;
  --gold:         #C19859;

  /* 金旺 logo 取樣金色（頁首香檳金配色用）*/
  --jw-gold:       #C9A227;
  --jw-gold-light: #E6C559;
  --jw-gold-deep:  #8A6B12;
  --jw-cream-1:    #F7EDD2;
  --jw-cream-2:    #E9D6A4;
  --jw-cream-line: #CDB271;

  --text:         #000000;
  --text-2:       #323232;
  --text-muted:   #6B6B6B;

  --bg:           #F7F6F3;
  --surface:      #FFFFFF;
  --surface-2:    #E3DED1;
  --border:       #E2DFD8;
  --border-soft:  #EFEDE8;

  --radius:       10px;
  --shadow-sm:    0 1px 2px rgba(0,0,0,.05);
  --shadow:       0 2px 8px rgba(0,0,0,.06);
  --shadow-lg:    0 8px 28px rgba(0,0,0,.12);
  --header-h:     64px;
}

/* 手機「加到桌面」說明卡（pwa-install.css）套金旺色 */
body {
  --pwa-accent: #F07F09; --pwa-accent-dk: #C96A07; --pwa-accent-lt: #FEF3E6;
  --pwa-chip: #F7EDD2; --pwa-line-2: #CDB271; --pwa-num-bg: #8A6B12; --pwa-icon: #1B587C;
  --pwa-r: 8px; --pwa-panel-top: linear-gradient(90deg, #C9A227, #E6C559);
}

* { box-sizing: border-box; }

/* 有些元件用 display:flex/inline-flex，會蓋掉 hidden 屬性，這裡統一修正 */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC",
               "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.35; }

/* ===================== 登入頁 ===================== */
.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}

.login-brand {
  background: linear-gradient(150deg, #4A3A14 0%, #2E240C 55%, #1A1405 100%);
  color: #fff;
  padding: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.login-brand::after {
  content: '';
  position: absolute;
  right: -140px; bottom: -140px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230,197,89,.30), transparent 68%);
}

.login-brand-logo {
  width: 96px; height: 96px;
  object-fit: contain;
  margin-bottom: 26px;
  position: relative; z-index: 1;
}

.login-brand h1 {
  font-size: 34px;
  letter-spacing: 1px;
  margin-bottom: 14px;
}

.login-brand p {
  color: rgba(255,255,255,.72);
  max-width: 30ch;
  margin: 0 0 36px;
}

.login-brand ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
  position: relative; z-index: 1;
}

.login-brand li {
  color: rgba(255,255,255,.85);
  font-size: 14px;
  display: flex; align-items: center; gap: 10px;
}

.login-brand li::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--jw-gold-light);
  flex: none;
}

.login-panel {
  background: linear-gradient(180deg, var(--jw-cream-1) 0%, var(--jw-cream-2) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
}

.login-card {
  width: 100%;
  max-width: 440px;
  padding: 34px 36px 30px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
}

.login-card-heading { margin-bottom: 26px; }

.login-card h2 { font-size: 26px; margin-bottom: 4px; }

.login-card .subtitle {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0;
}

#g_id_signin_container { display: flex; justify-content: center; }

.login-method-heading { margin-bottom: 14px; }

.login-method-heading h3 {
  color: var(--text);
  font-size: 16px;
  margin-bottom: 2px;
}

.login-method-heading p {
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.55;
  margin: 0;
}

.section-label {
  text-align: center;
  font-size: 12.5px;
  color: var(--text-muted);
  letter-spacing: .5px;
  margin: 0 0 12px;
}

/* 第二步顯示的帳號，讓使用者確認自己填的是哪個信箱 */
.account-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--bg);
}

.account-email {
  font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.account-chip .link { flex: none; white-space: nowrap; }

.login-error {
  color: var(--danger);
  font-size: 13px;
  min-height: 20px;
  margin: 0;
}

.domain-hint {
  color: var(--text-muted);
  font-size: 12.5px;
  text-align: center;
  margin: 18px 0 0;
}

#register-hint .link { color: var(--brand-dark); font-weight: 600; }

.dev-login-box {
  margin-top: 28px;
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--brand-soft);
}

.dev-login-title {
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 600;
  margin: 0 0 12px;
  text-align: center;
}

.dev-login-actions { display: flex; gap: 8px; }
.dev-login-actions .btn { flex: 1; font-size: 13px; padding: 7px 10px; }

/* ===================== 通用元件 ===================== */
.btn {
  display: inline-flex;
  align-items: center; justify-content: center; gap: 6px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 8px 16px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}

.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }

.btn-outline { background: var(--surface); border-color: var(--border); color: var(--text-2); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand-dark); }

.btn-danger { background: var(--surface); border-color: var(--border); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

.btn-sm { padding: 5px 11px; font-size: 13px; }

.link { color: var(--brand-dark); cursor: pointer; background: none; border: none;
        font-size: 13.5px; font-family: inherit; padding: 0; }
.link:hover { text-decoration: underline; }
.link-danger { color: var(--danger); }

.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  background: var(--surface-2);
  color: var(--text-2);
  white-space: nowrap;
}

.impression-thumb {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  cursor: pointer;
  vertical-align: middle;
}

.badge-brand   { background: var(--brand-soft); color: var(--brand-dark); }
.badge-success { background: #EDF4EA; color: var(--success); }
.badge-danger  { background: #F7ECEE; color: var(--danger); }
.badge-warn    { background: #FDF3DF; color: #8A5B12; }
.badge-info    { background: #E9F0F5; color: var(--info); }
.badge-muted   { background: #F0EFEC; color: var(--text-muted); }
.badge-critical { background: var(--danger); color: #fff; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  padding: 36px 16px;
}

/* ===================== 頁首（金旺香檳金）===================== */
.topbar {
  height: var(--header-h);
  background: linear-gradient(180deg, var(--jw-cream-1) 0%, var(--jw-cream-2) 100%);
  border-bottom: 1px solid var(--jw-cream-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  position: sticky; top: 0; z-index: 50;
}

.topbar-left { display: flex; align-items: center; gap: 28px; min-width: 0; }

.brand-mark {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 16px;
  white-space: nowrap;
}

.brand-logo {
  width: 34px; height: 34px;
  object-fit: contain;
  flex: none;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong { font-size: 15px; font-weight: 700; letter-spacing: .5px; }
.brand-text small { font-size: 11px; color: var(--text-muted); font-weight: 400; }

.main-nav { display: flex; gap: 4px; }

.main-nav a {
  padding: 7px 13px;
  border-radius: 7px;
  font-size: 14px;
  color: var(--text-2);
  position: relative;
  white-space: nowrap;
}

.main-nav a { color: #4A4231; }
.main-nav a:hover { background: rgba(138, 107, 18, .12); }
.main-nav a.active { background: #FBF4E2; color: #6E5407; font-weight: 600; }

.nav-dot {
  display: inline-block;
  min-width: 17px; height: 17px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 9px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  line-height: 17px;
  text-align: center;
  vertical-align: middle;
}

.topbar-right { display: flex; align-items: center; gap: 14px; }

.topbar .avatar {
  background: linear-gradient(135deg, var(--jw-gold-light), var(--jw-gold));
  color: #2A2418;
}
.topbar .user-meta span { color: #7A6E52; }
.topbar .btn-outline { background: rgba(255,255,255,.55); border-color: #C6AC69; color: #4A4231; }
.topbar .btn-outline:hover { border-color: var(--jw-gold); color: var(--jw-gold-deep); }

.help-btn {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none;
  border-radius: 50%;
  border: 1px solid #C6AC69;
  background: rgba(255,255,255,.55);
  color: #6E5407;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
}
.help-btn:hover { border-color: var(--jw-gold); background: rgba(255,255,255,.9); color: var(--jw-gold-deep); }

.user-chip { display: flex; align-items: center; gap: 9px; }

.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600;
  flex: none;
}

.user-meta { display: flex; flex-direction: column; line-height: 1.25; }
.user-meta strong { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.user-meta span { font-size: 11.5px; color: var(--text-muted); }

/* 頁首使用者角色標示：一般使用者素色，管理員用頁首同款金色凸顯 */
.role-badge {
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  border: 1px solid #C6AC69;
  background: rgba(255,255,255,.55);
  color: #6E5407;
  white-space: nowrap;
}

.role-badge.is-admin {
  background: linear-gradient(135deg, var(--jw-gold-light), var(--jw-gold));
  color: #2A2418;
  border-color: transparent;
}

/* 手機版導覽漢堡鍵；桌面版預設隱藏 */
.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; align-items: center; gap: 4px;
  width: 34px; height: 34px; flex: none;
  border: 1px solid var(--jw-cream-line);
  border-radius: 8px;
  background: rgba(255,255,255,.5);
  cursor: pointer;
}
.nav-toggle span {
  display: block; width: 16px; height: 2px;
  background: #4A3A14; border-radius: 2px;
  transition: transform .15s, opacity .15s;
}
.nav-toggle.is-active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ===================== 頁面容器 ===================== */
.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px;
}

/* 版權頁尾（由 common.js 的 renderSiteFooter 掛在 main 最後）*/
.site-footer {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-muted);
}
.site-footer p { margin: 0; }
.site-footer span { display: inline-block; }
.site-footer i { font-style: normal; margin: 0 8px; opacity: .6; }
.site-footer-en { font-size: 11px; opacity: .85; }
/* 手機上英文那行太長，只留中文；底部留空讓右下角浮動小助手不會蓋到字 */
@media (max-width: 640px) {
  .site-footer { padding-bottom: 64px; }
  .site-footer-en { display: none; }
}

.page-head { margin-bottom: 22px; }
.page-head h2 { font-size: 22px; }
.page-head p { color: var(--text-muted); font-size: 14px; margin: 4px 0 0; }

.section { margin-bottom: 34px; }

.section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; gap: 16px;
}

.section-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  display: flex; align-items: center; gap: 9px;
}

.section-title::before {
  content: '';
  width: 3px; height: 14px;
  background: var(--brand);
  border-radius: 2px;
}

/* ===================== 首頁 Hero ===================== */
.hero {
  background: linear-gradient(120deg, #262626 0%, #1B1B1B 100%);
  border-radius: 14px;
  padding: 26px 30px;
  color: #fff;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: '';
  position: absolute; right: -90px; top: -90px;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(240,127,9,.3), transparent 70%);
}

.hero-text { position: relative; z-index: 1; }
.hero-text h2 { font-size: 24px; margin-bottom: 5px; }
.hero-text p { margin: 0; color: rgba(255,255,255,.7); font-size: 13.5px; }

.hero-stats { display: flex; gap: 12px; position: relative; z-index: 1; }

.hero-stat {
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  padding: 12px 20px;
  text-align: center;
  min-width: 92px;
}

.hero-stat b { display: block; font-size: 24px; line-height: 1.2; }
.hero-stat span { font-size: 11.5px; color: rgba(255,255,255,.72); white-space: nowrap; }
.hero-stat.is-alert b { color: var(--brand); }

/* 數字卡可點：連到公告頁或彈出需求單清單 */
a.hero-stat, button.hero-stat {
  position: relative;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
a.hero-stat:hover, button.hero-stat:hover, button.hero-stat[aria-expanded="true"] {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.34);
  transform: translateY(-2px);
}
a.hero-stat:focus-visible, button.hero-stat:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hero-stat-arrow {
  position: absolute; right: 8px; bottom: 5px;
  font-style: normal; font-size: 14px; line-height: 1;
  color: rgba(255,255,255,.45);
}
a.hero-stat:hover .hero-stat-arrow, button.hero-stat:hover .hero-stat-arrow { color: var(--brand); }

.stat-popover {
  position: absolute;
  z-index: 60;
  width: 380px;
  max-width: calc(100vw - 24px);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.stat-popover:focus { outline: none; }
.stat-popover-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.stat-popover-head strong { font-size: 15px; }
.stat-popover-head span { font-size: 13px; color: var(--text-muted); }
.stat-popover-close {
  margin-left: auto;
  border: 0; background: none; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--text-muted);
  padding: 2px 6px; border-radius: 6px;
}
.stat-popover-close:hover { background: var(--brand-soft); color: var(--text); }
.stat-popover-body { max-height: 420px; overflow-y: auto; }
.stat-popover-body .empty { padding: 22px 14px; margin: 0; }
.stat-ticket-list { padding: 6px; }
.stat-ticket {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: inherit;
}
.stat-ticket:hover, .stat-ticket:focus-visible { background: var(--brand-soft); outline: none; }
.stat-ticket-icon {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border-radius: 8px; background: var(--brand-soft); font-size: 15px;
}
.stat-ticket-body { flex: 1; min-width: 0; }
.stat-ticket-body strong {
  display: block; font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stat-ticket-body small {
  display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stat-ticket .badge { flex: none; }
.stat-popover-note { font-size: 12.5px; color: var(--text-muted); padding: 0 14px 10px; margin: 0; }
.stat-popover-foot {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  padding: 10px; border-top: 1px solid var(--border); background: var(--surface-2);
}
.stat-popover-foot a {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-radius: 8px;
  background: var(--surface); color: inherit; font-size: 13px;
}
.stat-popover-foot a:hover { color: var(--brand); }
.stat-popover-foot b { margin-left: auto; color: var(--brand); }

@media (max-width: 640px) {
  .stat-popover {
    position: fixed;
    left: 0 !important; right: 0; bottom: 0; top: auto !important;
    width: 100%; max-width: none;
    border-radius: 16px 16px 0 0;
    animation: stat-sheet-up .2s ease-out;
  }
  .stat-popover-body { max-height: 60vh; }
}
@keyframes stat-sheet-up { from { transform: translateY(100%); } to { transform: none; } }

/* ===================== 首頁跑馬燈（精神語錄） ===================== */
.quote-marquee {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--brand-soft);
  border: 1px solid #F3DDB8;
  border-radius: 10px;
  padding: 9px 18px;
  margin-bottom: 30px;
  overflow: hidden;
}

.quote-marquee-tag {
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--brand-dark);
  background: #fff;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.quote-marquee-track {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

.quote-marquee-text {
  display: inline-block;
  padding-left: 100%;
  font-size: 14px;
  color: #5A4322;
  animation: quote-marquee-scroll linear infinite;
}

.quote-marquee:hover .quote-marquee-text { animation-play-state: paused; }

@keyframes quote-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .quote-marquee-text { animation: none; padding-left: 0; }
  .quote-marquee-track { white-space: normal; }
}

/* ===================== 應用卡片 ===================== */
.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 14px;
}

.app-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 17px 18px;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s, transform .18s, border-color .18s;
}

.app-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.app-card-icon {
  width: 40px; height: 40px;
  border-radius: 9px;
  background: var(--brand-soft);
  display: grid; place-items: center;
  font-size: 19px;
  flex: none;
}

.app-card-body { min-width: 0; }
.app-card-body strong { display: block; font-size: 14.5px; font-weight: 600; }
.app-card-body span {
  display: block;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ===================== 首頁系統入口（分類區塊） ===================== */
.page-portal { max-width: 1280px; }

.app-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-flow: row dense;
  gap: 18px;
  align-items: start;
  margin-bottom: 34px;
}
.app-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 16px 14px;
  min-width: 0;
}
.app-group.is-wide { grid-column: 1 / -1; }

.app-group-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 12px;
}
.app-group-title::before {
  content: '';
  width: 4px; height: 16px;
  background: var(--brand);
  border-radius: 2px;
}
.app-group-count {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--brand-soft);
  border-radius: 999px;
  padding: 1px 8px;
}

.app-group-list { display: flex; flex-direction: column; gap: 6px; }
.app-group.is-wide .app-group-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}

.app-tile {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  transition: background .15s, border-color .15s;
}
.app-group.is-wide .app-tile { border-color: var(--border); }
.app-tile:hover { background: var(--brand-soft); border-color: var(--brand); }
.app-tile.is-compact { align-items: center; }

.app-tile-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--brand-soft);
  display: grid; place-items: center;
  font-size: 21px;
  flex: none;
}
.app-tile-body { min-width: 0; }
.app-tile-body strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.4; }
.app-tile-body span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  margin-top: 2px;
}

@media (max-width: 640px) {
  .app-groups { grid-template-columns: 1fr; }
  .app-group.is-wide .app-group-list { grid-template-columns: 1fr; }
}

/* ===================== 首頁雙欄 ===================== */
.dash-cols {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 18px;
  margin-bottom: 34px;
}

.panel { padding: 18px 20px; }

.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-soft);
}

.panel-head h3 { font-size: 15px; }

/* 公告列表 */
.ann-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
}

.ann-item:last-child { border-bottom: none; }
.ann-item:hover .ann-title { color: var(--brand-dark); }

.ann-item-disabled { cursor: default; opacity: .55; }
.ann-item-disabled:hover .ann-title { color: inherit; }

.ann-title {
  flex: 1;
  font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ann-item.unread .ann-title { font-weight: 600; }

.ann-item.unread .ann-title::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
  margin-right: 7px;
  vertical-align: middle;
}

.ann-date, .ann-author { font-size: 12px; color: var(--text-muted); flex: none; }

/* 申請進度列表 */
.sub-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-soft);
}

.sub-item:last-child { border-bottom: none; }
.sub-item-body { flex: 1; min-width: 0; }
.sub-item-body strong { display: block; font-size: 13.5px; font-weight: 600; }
.sub-item-body > span {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  font-size: 11.5px; color: var(--text-muted);
}
.sub-serial, .sub-time { white-space: nowrap; }

/* 首頁 Google 行事曆／雲端硬碟小工具 */
.gcal-item, .gdrive-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
}
.gcal-item:last-child, .gdrive-item:last-child { border-bottom: none; }
.gcal-item:hover, .gdrive-item:hover { color: var(--brand-dark); }
.gcal-time {
  flex: none; font-size: 12px; color: var(--text-muted);
  white-space: nowrap; min-width: 74px;
}
.gcal-title, .gdrive-title {
  flex: 1; font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gdrive-time { flex: none; font-size: 12px; color: var(--text-muted); white-space: nowrap; }

/* ===================== 表格 ===================== */
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; }
textarea:disabled, input:disabled { background: var(--border-soft); cursor: not-allowed; }

/* 設定頁的狀態提示：說明「為什麼還沒生效」 */
.notice {
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-muted);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-2);
}

.notice.is-warn   { border-left-color: var(--gold);    background: #FDF7EC; }
.notice.is-ok     { border-left-color: var(--success); background: #F2F7F0; }

.table-wrap { overflow: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.table th, .table td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13.5px;
  vertical-align: middle;
}

.table th {
  background: #FAF9F7;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  white-space: nowrap;
}

.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: #FCFBF9; }
.table .truncate { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table .nowrap { white-space: nowrap; }

/* 手機版表格改卡片：每列一張卡、每格一行「欄名｜內容」（欄名由 common.js 寫入 data-label） */
@media (max-width: 640px) {
  .table.table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; }
  .table.table-cards { background: none; border: 0; border-radius: 0; overflow: visible; }
  .table-cards thead { display: none; }
  .table-cards tbody tr {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px 14px;
    margin-bottom: 10px;
  }
  .table-cards tbody tr:hover { background: var(--surface); }
  /* 欄名浮在左邊、內容靠右：內容裡的標籤與文字（如「急件 主旨」）才會黏在一起 */
  .table-cards tbody td {
    padding: 6px 0; text-align: right;
    border-bottom: 1px dashed var(--border-soft);
  }
  .table-cards tbody td::after { content: ""; display: block; clear: both; }
  .table-cards tbody td:last-child { border-bottom: none; }
  .table-cards tbody td::before {
    content: attr(data-label);
    float: left; margin-right: 14px;
    color: var(--text-muted); font-size: 12.5px; text-align: left;
  }
  /* 沒有欄名的欄位（多半是「查看」等操作按鈕）不顯示欄名 */
  .table-cards tbody td[data-label=""]::before { content: none; }
  .table-cards tbody tr.is-message-row { padding: 0; }
  .table-cards tbody tr.is-message-row td { text-align: center; }
  .table-cards tbody tr.is-message-row td::before { content: none; }
  .table-cards .truncate { max-width: none; white-space: normal; overflow: visible; }
  .table-cards .nowrap { white-space: normal; }
}

/* 可點擊排序的欄位標題 */
.table th.sortable { cursor: pointer; user-select: none; }
.table th.sortable:hover { color: var(--text-2); }
.table th.sortable.sort-active { color: var(--brand-dark); }
.table th .sort-arrow { margin-left: 3px; font-size: 10px; }

/* 表格下方的分頁列 */
.pager {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 12px; margin-top: 14px;
  font-size: 13px; color: var(--text-muted);
}

/* 精神語錄依月份分頁的切換列 */
.quote-month-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.quote-month-bar select.input { width: auto; min-width: 160px; }
.quote-month-bar .quote-month-count { font-size: 13px; color: var(--text-muted); }

/* 使用者列表上方的篩選列（網域、每頁筆數） */
.users-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; min-width: 0; }
.users-filters .input { width: auto; min-width: 150px; max-width: 100%; }
.users-filters .users-search .input { width: 260px; }
@media (max-width: 700px) {
  .users-filters, .users-filters .users-search { width: 100%; }
  .users-filters .users-search .input { width: 100%; }
  .users-filters select.input { flex: 1 1 140px; }
}

/* ===================== 表單元件 ===================== */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; }

.field > label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}

.field .req { color: var(--danger); margin-left: 3px; }

/* 逐一列出 type 容易漏掉（email、password 就漏過），改成排除勾選類元素 */
.input,
.field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.field select, .field textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 9px 11px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}

.input:focus, .field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(240,127,9,.13);
}

.field textarea { min-height: 92px; resize: vertical; }

.check-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--text-2);
  margin-bottom: 15px;
}

.check-row input { width: 15px; height: 15px; accent-color: var(--brand); }

.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }

.filter-chip {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}

.filter-chip:hover { border-color: var(--brand); }
.filter-chip.active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 500; }

.search-box { position: relative; flex: 1; min-width: 180px; max-width: 320px; }
.search-box input { padding-left: 34px; }
.search-box::before {
  content: '🔍';
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  font-size: 13px; opacity: .5;
}

/* ===================== 彈窗 ===================== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 20px;
}

.modal {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  display: flex; flex-direction: column;
}

.modal-lg { max-width: 640px; }
.modal-xl { max-width: 960px; }
.member-count-link { font-weight: 600; white-space: nowrap; }

.modal-head {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: space-between;
}

.modal-head h3 { font-size: 17px; }

.modal-close {
  background: none; border: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--text-muted); padding: 0;
}

.modal-close:hover { color: var(--text); }

.modal-body { padding: 22px 24px; overflow-y: auto; }

.modal-foot {
  padding: 15px 24px;
  border-top: 1px solid var(--border-soft);
  display: flex; justify-content: flex-end; gap: 10px;
}

/* 公告內文 */
.ann-detail-meta {
  display: flex; align-items: center; gap: 10px;
  color: var(--text-muted); font-size: 12.5px;
  margin-bottom: 16px;
}

.ann-detail-content { white-space: pre-wrap; font-size: 14.5px; line-height: 1.85; color: var(--text-2); }

/* content_format='html' 的公告／政策內容（富文本編輯器產出），關閉 pre-wrap 改用一般排版 */
.ann-detail-content.is-html {
  white-space: normal;
}
.ann-detail-content.is-html h3 { font-size: 17px; margin: 22px 0 10px; color: var(--text); }
.ann-detail-content.is-html h3:first-child { margin-top: 0; }
.ann-detail-content.is-html h4 { font-size: 15px; margin: 16px 0 8px; color: var(--text); }
.ann-detail-content.is-html p { margin: 0 0 10px; }
.ann-detail-content.is-html ul, .ann-detail-content.is-html ol { margin: 0 0 10px; padding-left: 22px; }
.ann-detail-content.is-html li { margin-bottom: 4px; }
.ann-detail-content.is-html table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 6px 0 16px;
  font-size: 13.5px;
}
.ann-detail-content.is-html th, .ann-detail-content.is-html td {
  text-align: left;
  padding: 10px 13px;
  border: 1px solid var(--border-soft);
  vertical-align: top;
}
.ann-detail-content.is-html th {
  background: #FAF9F7;
  color: var(--text-muted);
  font-weight: 700;
}

/* 申請單明細 */
.detail-list { display: flex; flex-direction: column; gap: 0; }

.detail-row {
  display: flex; gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 14px;
}

.detail-row:last-child { border-bottom: none; }
.detail-row dt { width: 108px; flex: none; color: var(--text-muted); font-size: 13px; }
.detail-row dd { margin: 0; flex: 1; white-space: pre-wrap; }

/* 提示訊息 */
.toast {
  position: fixed;
  bottom: 26px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: #fff;
  padding: 11px 22px; border-radius: 8px;
  font-size: 14px; box-shadow: var(--shadow-lg);
  z-index: 200;
}

.toast.is-error { background: var(--danger); }

/* 使用說明彈窗 */
.help-modal { max-width: 620px; }

.help-tabs { display: flex; gap: 6px; padding: 14px 24px 0; border-bottom: 1px solid var(--border-soft); }

.help-tab {
  padding: 8px 14px;
  border-radius: 8px 8px 0 0;
  font-size: 13.5px; font-weight: 600;
  color: var(--text-muted);
  border: none; background: none; cursor: pointer;
}
.help-tab.active { color: var(--jw-gold-deep); background: var(--jw-cream-1); }

.help-panel { display: none; }
.help-panel.active { display: block; }

.help-section { border-bottom: 1px solid var(--border-soft); padding: 10px 0; }
.help-section:last-child { border-bottom: none; }

.help-section summary {
  cursor: pointer; list-style: none;
  font-weight: 600; font-size: 14px;
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0;
}
.help-section summary::-webkit-details-marker { display: none; }
.help-section summary::before { content: '›'; color: var(--jw-gold-deep); transition: transform .15s; }
.help-section[open] summary::before { transform: rotate(90deg); }

.help-section ul { margin: 8px 0 4px 20px; padding: 0; font-size: 13.5px; color: var(--text-2); line-height: 1.7; }
.help-section ul li { margin-bottom: 4px; }

/* ===================== RWD ===================== */
@media (max-width: 1024px) {
  /* 空間不足時只留頭像，避免導覽列與使用者資訊重疊 */
  .user-meta { display: none; }
  .topbar { padding: 0 18px; }
  .topbar-left { gap: 18px; overflow-x: auto; }
}

@media (max-width: 900px) {
  .login-page { grid-template-columns: 1fr; }

  /* 手機版不整塊隱藏品牌區，改壓成頂部的精簡橫幅，
     否則畫面只剩白色表單置中飄在畫面中央，完全看不出是哪間公司 */
  .login-brand {
    flex-direction: row; align-items: center; gap: 12px;
    padding: 18px 22px;
  }
  .login-brand::after { content: none; }
  .login-brand-logo { width: 40px; height: 40px; margin-bottom: 0; flex: none; }
  .login-brand h1 { font-size: 16px; line-height: 1.35; margin-bottom: 0; }
  .login-brand p, .login-brand ul { display: none; }
  .login-panel { padding: 32px 22px; }

  .dash-cols { grid-template-columns: 1fr; }
  .hero { flex-direction: column; align-items: flex-start; }
  .hero-stats { width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .hero-stat { flex: 1 0 auto; padding: 10px 16px; }
}

@media (max-width: 640px) {
  .page { padding: 18px 16px; }
  .topbar { padding: 0 16px; }
  .topbar-left { gap: 14px; overflow: visible; }

  /* 選單項目多會被切在畫面外還沒有提示；改成漢堡鍵收合，
     點開後在頁首下方展開完整清單，不再需要橫向滑動猜測 */
  .nav-toggle { display: flex; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 2px;
    padding: 8px 16px 14px;
    background: linear-gradient(180deg, var(--jw-cream-1) 0%, var(--jw-cream-2) 100%);
    border-bottom: 1px solid var(--jw-cream-line);
    box-shadow: var(--shadow-lg);
    z-index: 49;
  }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 10px 12px; font-size: 15px; }
  .user-meta { display: none; }
  .app-grid { grid-template-columns: 1fr; }

  /* 浮動小助手固定在右下角，內容區留出安全距離避免最後一項被蓋住 */
  body.has-aw .page,
  body.has-aw .admin-content { padding-bottom: 90px; }
  .hero { padding: 20px; }
  .hero-text h2 { font-size: 20px; }
  .detail-row { flex-direction: column; gap: 3px; }
  .detail-row dt { width: auto; }

  /* 公告列表：標題獨占一行完整顯示，分類與日期移到下一行 */
  .ann-item { flex-wrap: wrap; gap: 8px; padding: 13px 0; }
  .ann-title {
    flex: 1 0 100%;
    order: -1;
    white-space: normal;
    line-height: 1.5;
  }
  .ann-author { display: none; }

  /* 申請進度：狀態標籤換到下一行，避免擠壓單號 */
  .sub-item { flex-wrap: wrap; }
  .sub-item-body { flex: 1 0 60%; }
}

/* ===================== 等待審核頁 ===================== */
.status-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}

.status-card {
  max-width: 460px; width: 100%;
  padding: 40px 36px; text-align: center;
}

.status-logo { width: 72px; height: 72px; object-fit: contain; margin-bottom: 20px; }

.status-icon {
  width: 56px; height: 56px; margin: 0 auto 16px;
  border-radius: 50%; display: grid; place-items: center; font-size: 24px;
}

.status-icon.is-pending { background: var(--brand-soft); }
.status-icon.is-rejected { background: #F7ECEE; color: var(--danger); }

.status-card h2 { font-size: 20px; margin-bottom: 10px; }
.status-desc { color: var(--text-2); font-size: 14.5px; margin: 0 0 14px; line-height: 1.75; }
.status-hint { color: var(--text-muted); font-size: 13px; margin: 0; }

.status-note {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px 16px; margin: 16px 0; text-align: left;
}
.status-note strong { font-size: 12.5px; color: var(--text-muted); display: block; margin-bottom: 5px; }
.status-note p { margin: 0; font-size: 14px; color: var(--text-2); white-space: pre-wrap; }

.status-actions { display: flex; gap: 10px; justify-content: center; margin-top: 26px; }

/* ===================== 待審核清單 ===================== */
.pending-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--border-soft);
}
.pending-item:last-child { border-bottom: none; }

.pending-info { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.45; }
.pending-info strong { font-size: 14.5px; }
.pending-info span { font-size: 12.5px; color: var(--text-muted); }
.pending-time { font-size: 11.5px !important; }

.hint-text { color: var(--text-muted); font-size: 13px; margin: -6px 0 14px; }

/* ===================== 勾選清單 ===================== */
.check-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  border: 1px solid var(--border); border-radius: 8px; padding: 12px;
  max-height: 240px; overflow-y: auto;
}

.check-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--text-2); cursor: pointer;
  flex-direction: row !important;
}
.check-item input { width: 15px; height: 15px; accent-color: var(--brand); flex: none; }

/* ===================== 統計磚 ===================== */
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px;
}

.stat-tile {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 2px;
}

.stat-tile.is-ok     { border-left-color: var(--success); }
.stat-tile.is-warn   { border-left-color: var(--gold); }
.stat-tile.is-danger { border-left-color: var(--danger); }

.stat-label { font-size: 12px; color: var(--text-muted); }
.stat-value { font-size: 22px; line-height: 1.25; font-weight: 600; }
.stat-sub { font-size: 11.5px; color: var(--text-muted); }

.panel-sub { font-size: 12px; color: var(--text-muted); }

/* ===================== 系統監控 ===================== */
.monitor-svg { width: 1em; height: 1em; display: block; }

.monitor-overview,
.monitor-metric {
  --monitor-tone: var(--success);
  --monitor-soft: #EDF4EA;
  --monitor-border: #CFE0C9;
}

.monitor-overview.is-warn,
.monitor-metric.is-warn {
  --monitor-tone: #9A6C24;
  --monitor-soft: #FDF7EC;
  --monitor-border: #E8D3A8;
}

.monitor-overview.is-danger,
.monitor-metric.is-danger {
  --monitor-tone: var(--danger);
  --monitor-soft: #F7ECEE;
  --monitor-border: #E7C6CB;
}

.monitor-overview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  margin-bottom: 16px;
  border: 1px solid var(--monitor-border);
  border-radius: 12px;
  background: linear-gradient(110deg, var(--monitor-soft), var(--surface) 72%);
  box-shadow: var(--shadow-sm);
}

.monitor-overview-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--monitor-tone);
  background: var(--surface);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--monitor-tone) 9%, transparent);
  font-size: 27px;
}

.monitor-overview-kicker {
  display: block;
  color: var(--monitor-tone);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}

.monitor-overview-copy h3 { margin-top: 1px; font-size: 18px; }
.monitor-overview-copy p { margin: 3px 0 0; color: var(--text-2); font-size: 13px; }

.monitor-overview-meta {
  min-width: 150px;
  padding-left: 18px;
  border-left: 1px solid var(--monitor-border);
  text-align: right;
}

.monitor-overview-meta span {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  color: var(--text-muted);
  font-size: 11.5px;
}

.monitor-overview-meta .monitor-svg { font-size: 14px; }
.monitor-overview-meta strong { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; }

.monitor-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.monitor-metric {
  min-height: 198px;
  display: flex;
  flex-direction: column;
  padding: 15px 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-top: 3px solid var(--monitor-tone);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s;
}

.monitor-metric:hover { transform: translateY(-1px); box-shadow: var(--shadow); }

.monitor-metric-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}

.monitor-metric-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--monitor-tone);
  background: var(--monitor-soft);
  font-size: 20px;
}

.monitor-state-dot {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--monitor-tone);
  font-size: 11px;
  font-weight: 600;
}

.monitor-state-dot > span { width: 6px; height: 6px; border-radius: 50%; background: var(--monitor-tone); }
.monitor-metric-label { color: var(--text-muted); font-size: 11.5px; }
.monitor-metric-value { margin-top: 1px; font-size: 22px; line-height: 1.3; font-weight: 650; letter-spacing: -.3px; }
.monitor-metric-sub { min-height: 19px; color: var(--text-muted); font-size: 11.5px; }
.monitor-metric-hint {
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 1.45;
}

.monitor-meter-block { margin-top: auto; padding-top: 9px; }
.monitor-meter-meta { display: flex; justify-content: space-between; margin-bottom: 4px; color: var(--text-muted); font-size: 10px; }
.monitor-meter { height: 5px; overflow: hidden; border-radius: 4px; background: var(--border-soft); }
.monitor-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--monitor-tone); transition: width .35s ease; }

.monitor-panel { margin-top: 18px; }
.monitor-trend-panel { margin-top: 22px; }
.monitor-request-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 0; margin-bottom: 0; }

.monitor-panel-head > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.monitor-panel-head > div > div { min-width: 0; }

.monitor-panel-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 8px;
  color: var(--brand-dark);
  background: var(--brand-soft);
  font-size: 18px;
}

.monitor-panel-icon.is-danger { color: var(--danger); background: #F7ECEE; }
.monitor-panel-stat {
  flex: none;
  padding: 3px 9px;
  border-radius: 12px;
  color: var(--brand-dark);
  background: var(--brand-soft);
  font-size: 11.5px;
  font-weight: 600;
}

.monitor-trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 14px 0 0;
  color: var(--text-muted);
  font-size: 11.5px;
}

.monitor-trend-legend span { display: flex; align-items: center; gap: 6px; }
.monitor-trend-legend i { width: 18px; height: 4px; border-radius: 3px; background: var(--brand); }
.monitor-trend-legend i.is-response { height: 2px; background: var(--info); }
.monitor-trend-scroll { overflow-x: auto; }
.monitor-trend-chart { display: block; width: 100%; min-width: 760px; height: auto; margin-top: 4px; }
.monitor-trend-grid { stroke: var(--border-soft); stroke-width: 1; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.monitor-trend-axis { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.monitor-trend-bar { fill: var(--brand); opacity: .76; transition: opacity .15s; }
.monitor-trend-bar:hover { opacity: 1; }
.monitor-trend-line { fill: none; stroke: var(--info); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.monitor-trend-dot { fill: var(--surface); stroke: var(--info); stroke-width: 2; vector-effect: non-scaling-stroke; }
.monitor-trend-label { fill: var(--text-muted); font-size: 11px; font-family: inherit; }

.monitor-duration { font-size: 12px; font-weight: 600; }
.monitor-duration.is-warn { color: #9A6C24; }
.monitor-duration.is-danger { color: var(--danger); }
.monitor-request-name { font-size: 12.5px; font-weight: 600; }

.monitor-host-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-muted);
  font-size: 11.5px;
  white-space: nowrap;
}

.monitor-host-meta .monitor-svg { flex: none; font-size: 15px; }

.monitor-table-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 14px;
  padding-top: 12px;
}

.monitor-table-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: #FCFBF9;
}

.monitor-table-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 7px;
  color: var(--brand-dark);
  background: var(--brand-soft);
  font-size: 15px;
}

.monitor-table-info { flex: 1; min-width: 0; }
.monitor-table-info > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.monitor-table-info code { overflow: hidden; color: var(--text-2); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.monitor-table-info strong { flex: none; font-size: 11.5px; font-weight: 600; }
.monitor-table-info > span { display: block; color: var(--text-muted); font-size: 10.5px; }
.monitor-table-meter { height: 3px; margin-top: 5px; overflow: hidden; border-radius: 3px; background: var(--border-soft); }
.monitor-table-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--jw-gold-light), var(--brand)); }

@media (max-width: 1050px) {
  .monitor-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .monitor-overview { grid-template-columns: auto minmax(0, 1fr); }
  .monitor-overview-meta { grid-column: 1 / -1; padding: 10px 0 0; border-top: 1px solid var(--monitor-border); border-left: 0; text-align: left; }
  .monitor-overview-meta span { justify-content: flex-start; }
  .monitor-request-cols { grid-template-columns: minmax(0, 1fr); }
  .monitor-table-grid { grid-template-columns: 1fr; }
  .monitor-panel-head { align-items: flex-start; gap: 10px; }
  .monitor-host-meta { white-space: normal; text-align: right; }
}

@media (max-width: 460px) {
  .monitor-metric-grid { grid-template-columns: 1fr; }
  .monitor-metric { min-height: 188px; }
  .monitor-overview { align-items: flex-start; padding: 16px; }
  .monitor-overview-icon { width: 42px; height: 42px; font-size: 23px; }
  .monitor-overview-copy h3 { font-size: 16px; }
  .monitor-host-meta { display: none; }
  .monitor-panel-stat { display: none; }
}

/* ===================== 長條圖 ===================== */
.bar-row {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 0; font-size: 13.5px;
}

.bar-label { width: 132px; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bar-track {
  flex: 1; height: 8px; background: var(--border-soft);
  border-radius: 4px; overflow: hidden; min-width: 40px;
}

.bar-fill { height: 100%; background: var(--brand); border-radius: 4px; }

.bar-value { width: 92px; flex: none; text-align: right; color: var(--text-2); }
.bar-value small { color: var(--text-muted); font-size: 11.5px; }

.mini-bar {
  display: inline-block; vertical-align: middle;
  width: 56px; height: 6px; background: var(--border-soft);
  border-radius: 3px; overflow: hidden; margin-right: 6px;
}
.mini-bar div { height: 100%; background: var(--success); }

@media (max-width: 640px) {
  .bar-label { width: 96px; }
  .bar-value { width: 74px; }
  .stat-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .status-card { padding: 30px 22px; }
}

/* ===================== 分析報表頁籤／服務單分析 ===================== */
.analytics-head-controls { display:flex; justify-content:flex-end; }
.analytics-head-controls .input { width:auto; min-width:130px; }
.analytics-tabs {
  display:flex; gap:4px; margin-bottom:18px; padding:4px;
  width:max-content; max-width:100%; border:1px solid var(--border);
  border-radius:10px; background:var(--border-soft);
}
.analytics-tab {
  border:0; border-radius:7px; padding:8px 16px; background:transparent;
  color:var(--text-2); font:600 13.5px/1.2 inherit; cursor:pointer;
}
.analytics-tab.active { background:var(--surface); color:var(--brand-dark); box-shadow:0 1px 4px rgba(50,50,50,.12); }
.analytics-filter-card {
  display:grid; grid-template-columns:repeat(3,minmax(160px,1fr)); gap:12px;
  padding:14px 16px; margin-bottom:16px; border:1px solid var(--border);
  border-radius:var(--radius); background:var(--surface);
}
.analytics-filter-card label { display:grid; gap:5px; font-size:12px; color:var(--text-muted); }
.analytics-filter-card .input { width:100%; }
.service-stat-grid { margin-bottom:18px; }
.service-analysis-cols { margin:0 0 18px; }
.service-analysis-panel { margin-top:18px; }
.service-team-summary { padding:12px 0; border-bottom:1px solid var(--border-soft); }
.service-team-summary:last-child { border-bottom:0; }
.service-team-summary > div:first-child { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.service-team-summary > div:first-child span { color:var(--text-muted); font-size:12px; }
.service-team-counts { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
.service-team-counts span { padding:3px 8px; border-radius:12px; background:var(--border-soft); color:var(--text-2); font-size:11.5px; }
.service-chart-wrap { width:100%; overflow-x:auto; }
.service-trend-chart { display:block; width:100%; min-width:680px; height:auto; }
.service-trend-chart text { fill:var(--text-muted); font:11px sans-serif; }
.service-chart-axis { stroke:var(--border); stroke-width:1; }
.service-chart-total { fill:var(--brand); }
.service-chart-closed { fill:var(--success); }
.service-chart-legend { display:flex; justify-content:center; gap:18px; margin-top:-4px; color:var(--text-muted); font-size:12px; }
.service-chart-legend span { display:flex; align-items:center; gap:6px; }
.service-chart-legend i { width:10px; height:10px; border-radius:2px; background:var(--brand); }
.service-chart-legend i.is-closed { background:var(--success); }
.service-ticket-subject { display:block; max-width:260px; margin-top:3px; color:var(--text-muted); white-space:normal; }

@media (max-width:700px) {
  .analytics-tabs { width:100%; }
  .analytics-tab { flex:1; padding:8px 10px; }
  .analytics-filter-card { grid-template-columns:1fr; }
}

/* ===================== 組織架構／樹狀圖 ===================== */
.org-tree-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:14px; }
.org-tree-toolbar .input { flex:1 1 200px; max-width:320px; }
.org-tree, .org-tree ul { list-style:none; margin:0; padding:0; }
.org-tree ul { margin-left:12px; padding-left:16px; border-left:1px solid var(--border); }
.org-item { margin:0; }
.org-node {
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px;
  padding:7px 10px; margin:3px 0; border:1px solid var(--border-soft);
  border-radius:8px; background:var(--surface);
}
summary.org-node { cursor:pointer; list-style:none; }
summary.org-node::-webkit-details-marker { display:none; }
summary.org-node::before {
  content:''; flex:none; align-self:center; width:0; height:0;
  border-left:6px solid var(--text-muted); border-top:4px solid transparent; border-bottom:4px solid transparent;
  margin-right:2px; transition:transform .12s;
}
details[open] > summary.org-node::before { transform:rotate(90deg); }
summary.org-node:hover { border-color:var(--border); background:var(--bg); }
.org-node:not(summary) { padding-left:26px; }
.org-node.is-virtual { border-style:dashed; background:transparent; }
.org-node.is-match { border-color:var(--brand); background:var(--brand-soft); }
.org-node-name { font-weight:600; font-size:14px; }
.org-node-count {
  min-width:18px; padding:0 6px; border-radius:9px; background:var(--border-soft);
  color:var(--text-muted); font-size:11px; line-height:18px; text-align:center;
}
.org-node-meta { color:var(--text-muted); font-size:12.5px; }
.org-node-tag {
  padding:1px 7px; border-radius:10px; background:var(--border-soft);
  color:var(--text-muted); font-size:11px;
}
.org-node-tag.is-warn { background:var(--brand-soft); color:var(--danger); }
.org-node-warn { color:var(--danger); }

/* ===================== 後台側邊選單版型 ===================== */
.admin-layout {
  display: grid;
  grid-template-columns: 216px 1fr;
  min-height: calc(100vh - var(--header-h));
}

.admin-side {
  /* 與登入頁左欄同一條深金，後台與入口的質感一致 */
  background: linear-gradient(165deg, #4A3A14 0%, #2E240C 55%, #1A1405 100%);
  border-right: 1px solid #0F0B03;
  padding: 20px 12px;
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
}

.side-group { margin-bottom: 22px; }

/* 分組標題與子功能同為 14px，靠金色、粗體與間距區分層次 */
.side-group-title {
  font-size: 14px; font-weight: 700; letter-spacing: 1px;
  color: rgba(230,197,89,.9); text-transform: uppercase;
  padding: 0 12px; margin-bottom: 10px;
}

.side-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px;
  font-size: 14px; color: rgba(255,255,255,.82);
  cursor: pointer; border: none; background: none;
  width: 100%; text-align: left; font-family: inherit;
  margin-bottom: 2px;
}

.side-item:hover { background: rgba(230,197,89,.14); color: #fff; }

.side-item.active {
  background: rgba(230,197,89,.20);
  color: var(--jw-gold-light);
  font-weight: 600;
}

.side-item .si-icon { width: 18px; text-align: center; flex: none; font-size: 14px; }
.side-item .si-label { flex: 1; }

.si-dot {
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--danger); color: #fff;
  font-size: 11px; line-height: 18px; text-align: center; flex: none;
}

.admin-content { padding: 26px 30px; max-width: 1180px; min-width: 0; }
/* 同時套 .page 的頁面（印鑑作業各頁）：.page 的 margin:0 auto 會讓 grid 項目改用內容寬度，
   寬表格就把整頁撐開、手機上整頁被縮小；固定吃滿欄寬，表格才會在 .table-wrap 內左右捲動 */
.admin-content.page { width: 100%; }

.content-head {
  margin-bottom: 20px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
#head-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.content-head h2 { font-size: 20px; }
.content-head p { color: var(--text-muted); font-size: 13.5px; margin: 3px 0 0; }

/* 面板內只剩操作按鈕時靠右對齊（標題已移到 content-head） */
.section-head-actions { justify-content: flex-end; }
.section-head-actions:empty { display: none; }

/* 手機／平板：側邊選單改為頂部橫向捲動 */
@media (max-width: 860px) {
  /* 單欄時 grid 會把列拉伸填滿，需指定列高才不會撐開選單 */
  .admin-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }

  .admin-side {
    position: static; height: auto; width: 100%;
    /* 深金只留給桌面版直式側欄；手機這條橫幅改回與內容區同色，
       避免緊貼頁首下方形成一條突兀的深色窄帶 */
    background: var(--surface);
    border-right: none; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 6px;
    overflow-x: auto; padding: 10px 12px;
    /* 兩端淡出，暗示還可以左右滑動找到其他項目 */
    mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }

  /* flex 子項預設會被拉伸，明確置中並收窄 padding */
  .side-group { margin: 0; display: flex; align-items: center; gap: 6px; flex: none; }
  .side-group-title { display: none; }
  .side-item {
    width: auto; white-space: nowrap; margin: 0; padding: 7px 12px;
    color: var(--text-2);
  }
  .side-item:hover { background: var(--border-soft); color: var(--text); }
  .side-item.active { background: var(--brand-soft); color: var(--brand-dark); }

  .admin-content { padding: 18px 16px; }
}

/* ===================== 信箱登入／申請帳號 ===================== */
.or-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0;
  color: var(--text-2); font-size: 12.5px;
}
.or-divider::before, .or-divider::after {
  content: ''; flex: 1; height: 2px; background: #C9C4BA;
}

.local-login .field { margin-bottom: 14px; }
.local-login .field > label { font-size: 13px; font-weight: 600; }
.local-login .field input { background: var(--surface); }
.local-login .field input::placeholder { color: #999; }
.local-login #login-submit { width: 100%; min-height: 44px; font-size: 15px; }

.field-hint { color: var(--text-muted); font-size: 11.5px; margin: 6px 0 0; white-space: pre-line; }

/* 已從來源移除、僅保留紀錄的列 */
.row-muted { color: var(--text-muted); background: var(--border-soft); }

.status-note {
  background: var(--brand-soft);
  border: 1px solid var(--jw-cream-line);
  border-radius: var(--radius);
  padding: 18px;
  text-align: center;
}
.status-note strong { display: block; margin-bottom: 6px; }
.status-note p { color: var(--text-2); font-size: 13.5px; margin: 0 0 14px; }

/* 修改密碼頁的表單在窄卡片中要撐滿 */
.status-card #cp-form .field { margin-bottom: 14px; }

/* ===================== AI助手知識庫問答 ===================== */
.assistant-page { display:grid; grid-template-columns:240px minmax(0,880px); min-height:calc(100vh - var(--header-h)); max-width:1200px; margin:auto; }
.assistant-side { border-right:1px solid var(--border); padding:22px 14px; background:var(--surface); }
.assistant-side .btn { width:100%; }.chat-list { margin-top:16px; display:grid; gap:4px; }
.chat-item-row { display:flex; align-items:center; border-radius:8px; }
.chat-item-row:hover,.chat-item-row.active { background:var(--brand-soft); }
.chat-item-row:hover .chat-item-delete { opacity:1; }
.chat-item { flex:1; min-width:0; border:0; background:transparent; text-align:left; padding:10px; border-radius:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text-2); cursor:pointer; }
.chat-item-row:hover .chat-item,.chat-item-row.active .chat-item { color:var(--brand-dark); }
.chat-item-delete { flex:0 0 auto; border:0; background:transparent; color:var(--text-muted); cursor:pointer; padding:6px 10px 6px 4px; font-size:14px; opacity:0; transition:opacity .15s; }
.chat-item-delete:hover { color:#c0392b; }
.assistant-main { display:flex; min-height:calc(100vh - var(--header-h)); flex-direction:column; padding:28px; }
.assistant-hero { border-bottom:1px solid var(--border); padding-bottom:18px; }.assistant-hero h1 { display:inline; font-size:22px; margin-left:8px; }.assistant-hero p { margin:8px 0 0; color:var(--text-muted); font-size:14px; }.assistant-icon { color:var(--jw-gold-deep); font-size:25px; }
.assistant-messages { flex:1; padding:24px 0; overflow:auto; }.assistant-empty { color:var(--text-muted); text-align:center; padding:70px 20px; }.assistant-empty strong { color:var(--text); font-size:17px; }
.chat-message { max-width:86%; margin:0 0 18px; }.chat-message.user { margin-left:auto; }.message-label { font-size:12px; color:var(--text-muted); margin:0 0 5px 4px; }.message-body { padding:13px 15px; background:var(--surface); border:1px solid var(--border); border-radius:12px; line-height:1.7; }.user .message-body { background:var(--brand-soft); border-color:var(--jw-cream-line); }.message-sources { margin:8px 4px 0; display:grid; gap:3px; font-size:12px; color:var(--text-muted); }.ask-box { display:flex; gap:10px; border-top:1px solid var(--border); padding-top:18px; }.ask-box textarea { min-height:48px; max-height:120px; flex:1; resize:vertical; }.ask-box .btn { align-self:flex-end; }
@media (max-width: 700px) { .assistant-page { grid-template-columns:minmax(0,1fr); }.assistant-side { border-right:0; border-bottom:1px solid var(--border); display:flex; gap:10px; padding:10px 14px; }.assistant-side .btn { width:auto; white-space:nowrap; }.chat-list { margin:0; display:flex; overflow:auto; min-width:0; }.message-body { overflow-wrap:anywhere; }.chat-item-row { flex:0 0 auto; max-width:180px; }.chat-item-delete { opacity:1; }.assistant-main { padding:18px 14px; min-height:calc(100vh - var(--header-h) - 66px); }.chat-message { max-width:96%; } }

/* ===================== 浮動小助手 ===================== */
.aw-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  display: flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  border: 1px solid var(--jw-cream-line);
  border-radius: 26px;
  background: linear-gradient(180deg, var(--jw-cream-1) 0%, var(--jw-cream-2) 100%);
  color: #4A3A14;
  font-family: inherit; font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}

.aw-fab:hover { transform: translateY(-2px); }
.aw-fab-icon { font-size: 17px; color: var(--jw-gold-deep); }

.aw-panel {
  position: fixed; right: 22px; bottom: 22px; z-index: 61;
  width: 380px; max-width: calc(100vw - 32px);
  height: 540px; max-height: calc(100vh - 44px);
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.aw-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  background: linear-gradient(180deg, var(--jw-cream-1) 0%, var(--jw-cream-2) 100%);
  border-bottom: 1px solid var(--jw-cream-line);
  font-size: 14.5px;
}

.aw-head-actions { display: flex; align-items: center; gap: 12px; }
.aw-head-actions a { font-size: 12px; color: var(--jw-gold-deep); text-decoration: underline; }

.aw-head button {
  border: 0; background: none; cursor: pointer;
  font-size: 21px; line-height: 1; color: var(--text-2);
  padding: 0 2px;
}

.aw-body { flex: 1; overflow-y: auto; padding: 14px; }

.aw-hello { color: var(--text-muted); font-size: 13.5px; text-align: center; padding: 40px 12px; }
.aw-hello strong { display: block; color: var(--text); font-size: 15px; margin-bottom: 6px; }
.aw-hello p { margin: 0; line-height: 1.7; }

.aw-msg { margin-bottom: 14px; max-width: 92%; }
.aw-msg.aw-user { margin-left: auto; }

.aw-text {
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  font-size: 13.5px; line-height: 1.75;
  white-space: normal;
}

.aw-user .aw-text { background: var(--brand-soft); border-color: var(--jw-cream-line); }
.aw-msg.is-thinking .aw-text { color: var(--text-muted); }

.aw-sources {
  display: grid; gap: 2px;
  margin: 6px 0 0 4px;
  font-size: 11.5px; color: var(--text-muted);
}

.aw-sources span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.aw-form {
  display: flex; gap: 8px; align-items: flex-end;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
}

.aw-form textarea {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 9px 11px;
  font-family: inherit; font-size: 13.5px;
  line-height: 1.5;
  resize: none;
  max-height: 72px;
}

.aw-form textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(240,127,9,.13);
}

@media (max-width: 560px) {
  .aw-fab { right: 14px; bottom: 14px; padding: 10px 15px; }
  .aw-fab-text { display: none; }
  .aw-panel {
    right: 0; bottom: 0; left: 0;
    width: 100%; max-width: 100%;
    height: 76vh;
    border-radius: 14px 14px 0 0;
  }
}

/* 回答中的來源標註 */
.cite { color: var(--jw-gold-deep); font-size: .9em; white-space: nowrap; }

/* ===================== 資訊／行政需求服務 ===================== */
.service-team-card { text-align:left; font-family:inherit; cursor:pointer; }
.service-team-card small { display:block; margin-top:7px; color:var(--text-muted); line-height:1.55; }
.service-create-panel { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 22px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.service-create-panel h3 { margin:0 0 5px; }
.service-create-panel p { margin:0; color:var(--text-muted); }
.view-tabs { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.view-tabs-sep { width:1px; height:22px; background:var(--border); margin:0 6px; }
.filter-chip.staff-chip { border-color:#B9CCD9; color:var(--info); background:#EEF4F8; }
.filter-chip.staff-chip:hover { border-color:var(--info); }
.filter-chip.staff-chip.active { background:var(--info); border-color:var(--info); color:#fff; }
.service-tabs { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
#registry-filter-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.ticket-urgent { background:#fff8f6; }
.ticket-actions { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0; align-items:flex-start; }
.ticket-action { flex:1 1 100%; display:grid; gap:10px; padding:14px; border:1px solid var(--border); border-radius:10px; background:var(--bg); }
.ticket-action .form-grid { grid-template-columns:2fr 1.4fr 2fr auto; align-items:end; }
#transfer-form .form-grid { grid-template-columns:1fr 1fr; gap:12px; }
#urgency-form .form-grid { grid-template-columns:1fr 2fr; gap:12px; }
/* 急迫性三選一：一般／急件／特急，選中後依等級上色 */
.urgency-picker { display:flex; gap:8px; flex-wrap:wrap; }
.urgency-picker label { cursor:pointer; }
.urgency-picker input { position:absolute; opacity:0; pointer-events:none; }
.urgency-picker span { display:inline-block; min-width:72px; padding:8px 18px; text-align:center; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--text-2); font-weight:600; }
.urgency-picker input:focus-visible + span { outline:2px solid var(--brand); outline-offset:2px; }
.urgency-picker input:checked + span { background:var(--text-2); border-color:var(--text-2); color:#fff; }
.urgency-picker .is-urgent input:checked + span { background:#FDF3DF; border-color:#D9A440; color:#8A5B12; }
.urgency-picker .is-critical input:checked + span { background:var(--danger); border-color:var(--danger); color:#fff; }
#transfer-form .field { margin-bottom:0; }
#transfer-form .btn { justify-self:start; }
.ticket-section { border-top:1px solid var(--border); padding-top:17px; margin-top:18px; }
.ticket-section h4 { margin:0 0 12px; }
.ticket-timeline { display:grid; gap:0; }
.ticket-timeline > div { position:relative; padding:0 0 17px 22px; border-left:2px solid var(--jw-cream-line); margin-left:5px; }
.ticket-timeline > div::before { content:''; position:absolute; width:9px; height:9px; border-radius:50%; background:var(--brand); left:-6px; top:4px; }
.ticket-timeline time,.ticket-comment time { display:block; color:var(--text-muted); font-size:12px; margin-top:4px; }
.ticket-comments { display:grid; gap:10px; }
.ticket-comment { border:1px solid var(--border); border-radius:9px; padding:11px 13px; }
.ticket-comment.internal { border-color:#e6c559; background:#fffbed; }
.ticket-comment p { white-space:pre-line; margin:6px 0; }
.ticket-comment-head { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.ticket-comment-head time { margin:0; }
.comment-composer { margin-top:12px; }
.ticket-readonly-note { margin-top:12px; padding:13px 15px; border:1px solid var(--border); border-radius:10px; background:var(--bg); color:var(--text-muted); text-align:center; }
.comment-tools { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.file-pick { display:inline-flex; width:max-content; cursor:pointer; }
.attachment-preview-list,.attachment-gallery { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.attachment-preview-item { position:relative; width:112px; }
.attachment-preview-item img,.attachment-thumb img,.attachment-type-icon { display:flex; align-items:center; justify-content:center; width:112px; height:84px; object-fit:cover; border-radius:8px; border:1px solid var(--border); background:var(--bg); }
.attachment-type-icon { font-size:34px; background:var(--surface); }
.attachment-preview-link { display:block; }
.attachment-preview-link:hover img,.attachment-preview-link:hover .attachment-type-icon { border-color:var(--brand); }
.attachment-preview-item > span,.attachment-preview-item > a:not(.attachment-preview-link),.attachment-thumb > span { display:block; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; color:var(--text-muted); }
.attachment-preview-item small,.attachment-thumb small { display:block; margin-top:2px; color:var(--text-muted); font-size:10px; }
.attachment-preview-item button { position:absolute; top:-7px; right:-7px; display:grid; place-items:center; width:23px; height:23px; padding:0; border:0; border-radius:50%; background:#a72538; color:#fff; cursor:pointer; font-size:17px; box-shadow:var(--shadow-sm); }
.attachment-thumb { width:112px; padding:0; border:0; background:transparent; text-align:left; font-family:inherit; cursor:pointer; }
.attachment-thumb:hover img { border-color:var(--brand); box-shadow:0 0 0 2px rgba(240,127,9,.12); }
.attachment-file { display:flex; align-items:center; gap:10px; width:min(260px,100%); min-height:70px; padding:10px 12px; border:1px solid var(--border); border-radius:9px; background:var(--surface); color:var(--text); text-decoration:none; }
.attachment-file:hover { border-color:var(--brand); box-shadow:0 0 0 2px rgba(240,127,9,.1); }
.attachment-file-icon { flex:0 0 auto; display:grid; place-items:center; width:44px; height:44px; border-radius:8px; background:var(--bg); font-size:24px; }
.attachment-file > span:last-child { min-width:0; }
.attachment-file b,.attachment-file small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.attachment-file b { font-size:13px; }
.attachment-file small { margin-top:5px; color:var(--text-muted); font-size:11px; }
.image-viewer { z-index:100; display:flex; align-items:center; justify-content:center; padding:50px; background:rgba(20,18,14,.88); }
.image-viewer[hidden] { display:none; }
.image-viewer img { display:block; max-width:min(1100px,95vw); max-height:90vh; object-fit:contain; border-radius:8px; box-shadow:0 18px 60px rgba(0,0,0,.4); }
.image-viewer-close { position:fixed; top:18px; right:22px; color:#fff; font-size:34px; z-index:101; }
.pre-line { white-space:pre-line; }
.star-picker { display:flex; gap:4px; }
.star-picker button { border:0; background:transparent; color:#c9c9c9; font-size:28px; cursor:pointer; padding:0; }
.star-picker button.active { color:#e3ad20; }
.ticket-rating { display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:700; }
.ticket-rating > span:first-child { letter-spacing:1px; }
.rating-high { color:#a87300; }
.rating-mid { color:#d56b00; }
.rating-low { color:var(--danger); }
.rating-empty { color:var(--text-muted); }
.rating-auto { font-size:11px; font-weight:600; padding:1px 6px; }
.simple-progress { display:grid; grid-template-columns:repeat(4,1fr); margin:0 0 22px; }
.simple-progress > div { position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--text-muted); font-size:13px; text-align:center; }
.simple-progress > div::before { content:''; position:absolute; height:3px; background:var(--border); left:-50%; right:50%; top:14px; z-index:0; }
.simple-progress > div:first-child::before { display:none; }
.simple-progress b { position:relative; z-index:1; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--bg); border:2px solid var(--border); }
.simple-progress .done::before { background:var(--brand); }
.simple-progress .done b { background:var(--brand); border-color:var(--brand); color:#fff; }
.simple-progress .current span { color:var(--text); font-weight:700; }
.btn-success { background:#258750; color:#fff; border-color:#258750; }
.service-admin-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
@media (max-width:700px) { .form-grid,.ticket-action .form-grid,#transfer-form .form-grid,#registry-filter-grid { grid-template-columns:1fr; }.service-tabs,.service-create-panel { align-items:stretch; flex-direction:column; }.service-tabs select { width:100%!important; }.service-create-panel .btn { width:100%; }.simple-progress span { font-size:11px; }.image-viewer { padding:44px 10px 16px; }.attachment-preview-item,.attachment-thumb { width:96px; }.attachment-preview-item img,.attachment-thumb img,.attachment-type-icon { width:96px;height:72px; } }
@media (max-width:900px) { .service-admin-grid { grid-template-columns:1fr; } }

/* ===================== 設為首頁 / 安裝引導 ===================== */
.setup-banner {
  display: flex; align-items: center; gap: 14px;
  background: var(--brand-soft);
  border: 1px solid #F3D9B4;
  border-radius: 10px;
  padding: 13px 16px;
  margin-bottom: 18px;
}

.setup-banner-icon { font-size: 20px; flex: none; }
.setup-banner-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.setup-banner-text strong { font-size: 14.5px; color: var(--text); }
.setup-banner-text span { font-size: 13px; color: var(--text-2); }
.setup-banner-actions { display: flex; align-items: center; gap: 8px; flex: none; }

.setup-banner-close {
  background: none; border: none; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--text-muted); padding: 0 2px;
}

.setup-banner-close:hover { color: var(--text); }

.setup-steps { margin: 0 0 18px; padding-left: 20px; font-size: 14px; line-height: 1.9; color: var(--text-2); }

.setup-url {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}

.setup-url code { flex: 1; font-size: 13px; word-break: break-all; color: var(--text); }
.setup-note { margin: 14px 0 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.7; }

@media (max-width: 700px) {
  .setup-banner { flex-wrap: wrap; }
  .setup-banner-text { flex-basis: calc(100% - 34px); }
  .setup-banner-actions { width: 100%; justify-content: flex-end; }
}

/* ---------- 印鑑報表分析 ---------- */
.report-filter { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px 14px; padding:16px 18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }
.report-filter .field, .report-subfilter .field { margin-bottom:0; }
.report-filter-action { align-self:end; }
.report-subfilter { display:flex; flex-wrap:wrap; gap:12px 14px; align-items:flex-end; margin-bottom:12px; }
.report-subfilter .report-grow { flex:1 1 240px; }
.report-note { color:var(--text-muted); font-size:13px; margin:0 0 10px; }
.report-muted { color:var(--text-muted); font-size:12px; margin-top:2px; }
.table .report-num, .report-num { text-align:right; font-variant-numeric:tabular-nums; }
[data-panel] .table a { color:var(--brand-dark); font-weight:600; }
.kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.kpi-card { background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--border); border-radius:var(--radius); padding:14px 16px; }
.kpi-card.is-success { border-left-color:var(--success); }
.kpi-card.is-warn { border-left-color:#D9A23A; }
.kpi-card.is-danger { border-left-color:var(--danger); }
.kpi-label { font-size:12.5px; color:var(--text-muted); }
.kpi-value { font-size:26px; font-weight:700; line-height:1.3; margin-top:4px; font-variant-numeric:tabular-nums; }
.kpi-sub { font-size:12px; color:var(--text-muted); margin-top:2px; }
.kpi-alert { color:var(--danger); font-weight:600; }
.report-charts { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:12px; }
.report-chart-card { padding:16px 18px; }
.report-chart-title { font-size:13px; font-weight:700; color:var(--text-2); margin-bottom:10px; }
.report-chart-box { position:relative; height:300px; }
.report-tabs { display:flex; flex-wrap:wrap; gap:6px; }
.report-h3 { font-size:15px; font-weight:700; margin:0 0 6px; }
.report-rank-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.report-rank-card { padding:16px 18px; }
.rank-list { display:grid; gap:8px; }
.rank-row { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto; gap:10px; align-items:center; font-size:13px; }
.rank-label { overflow-wrap:anywhere; }
.rank-bar { height:10px; background:var(--border-soft); border-radius:5px; overflow:hidden; }
.rank-bar span { display:block; height:100%; background:var(--brand); border-radius:5px; }
.rank-value { font-weight:600; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.rank-extra { display:block; font-weight:400; font-size:11.5px; color:var(--text-muted); }
@media (max-width: 1024px) {
  .report-filter, .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .report-charts { grid-template-columns:minmax(0,1fr); }
  .report-rank-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .report-filter, .report-rank-grid { grid-template-columns:1fr; }
  .kpi-card { padding:12px; }
  .kpi-value { font-size:22px; }
  /* 表格在 .table-wrap 內左右捲動，不要擠成一字一行 */
  .report-page .table { min-width:880px; }
}

/* ===================== 頁首頭像選單（更換相片） ===================== */
.user-chip { position: relative; }
.avatar-btn { border: 0; padding: 0; cursor: pointer; overflow: hidden; font-family: inherit; }
.avatar-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-btn:focus-visible { outline: 2px solid var(--jw-gold-deep); outline-offset: 2px; }
.avatar-menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 60;
  min-width: 210px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-lg);
}
.avatar-menu button, .avatar-menu a {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; border-radius: 7px; background: none;
  font: inherit; font-size: 14px; color: var(--text-2); cursor: pointer;
}
.avatar-menu button:hover, .avatar-menu a:hover { background: var(--brand-soft); color: var(--brand-dark); }
.avatar-menu-note { margin: 4px 6px 6px; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
@media (max-width: 1024px) {
  .avatar-menu { left: auto; right: 0; }
}

/* ===================== 相片裁切視窗 ===================== */
.photo-cropper { max-width: 380px; }
.cropper-stage {
  position: relative; width: 270px; max-width: 100%; aspect-ratio: 3 / 4; margin: 0 auto;
  border-radius: 10px; overflow: hidden; background: var(--bg); border: 1px solid var(--border);
}
.cropper-stage.is-dragover { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.cropper-stage canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.cropper-stage canvas:active { cursor: grabbing; }
.cropper-empty {
  position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--bg); color: var(--text-muted); font-size: 14px;
}
.cropper-empty img { width: 100%; height: 100%; object-fit: cover; }
.cropper-controls { display: flex; align-items: center; gap: 10px; max-width: 270px; margin: 12px auto 0; color: var(--text-muted); }
.cropper-controls input { flex: 1; accent-color: var(--brand); }
.cropper-tip { text-align: center; margin-top: 10px; }

/* ===================== 員工照片牆 ===================== */
.pw-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.pw-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pw-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 22px; align-items: start; }
.pw-side { position: sticky; top: calc(var(--header-h) + 16px); max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto; padding: 12px; }
.pw-side-toggle { display: none; }
.pw-tree, .pw-tree ul { list-style: none; margin: 0; padding: 0; }
.pw-tree ul { margin-left: 10px; padding-left: 8px; border-left: 1px solid var(--border-soft); }
.pw-node {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 5px 8px; margin: 1px 0; border: 0; border-radius: 7px; background: none;
  font: inherit; font-size: 14px; color: var(--text-2); text-align: left; cursor: pointer;
}
.pw-node:hover { background: var(--bg); }
.pw-node.is-active { background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; }
.pw-node-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-node-count { flex: none; font-size: 11.5px; color: var(--text-muted); }
.pw-caret {
  flex: none; width: 16px; height: 16px; display: grid; place-items: center;
  border: 0; background: none; padding: 0; cursor: pointer; color: var(--text-muted);
}
.pw-caret::before {
  content: ''; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform .12s;
}
.pw-item.is-open > .pw-row > .pw-caret::before { transform: rotate(90deg); }
.pw-caret.is-leaf { visibility: hidden; }
.pw-row { display: flex; align-items: center; }
.pw-item:not(.is-open) > ul { display: none; }

.pw-breadcrumb { display: flex; flex-wrap: wrap; gap: 4px; font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
.pw-breadcrumb button { border: 0; background: none; padding: 0; font: inherit; color: var(--brand-dark); cursor: pointer; }
.pw-breadcrumb button:hover { text-decoration: underline; }
.pw-title { font-size: 19px; margin-bottom: 14px; }
.pw-title small { font-size: 13px; color: var(--text-muted); font-weight: 400; margin-left: 6px; }
.pw-dept { margin-bottom: 26px; }
.pw-dept-head { display: flex; align-items: baseline; gap: 8px; padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.pw-dept-head h3 { font-size: 15.5px; }
.pw-dept-head span { font-size: 12.5px; color: var(--text-muted); }
.pw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 14px; }
.pw-card {
  position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); cursor: pointer; text-align: left; font: inherit; color: inherit;
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.pw-card:hover, .pw-card:focus-visible { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--jw-cream-line); outline: none; }
.pw-photo { aspect-ratio: 3 / 4; width: 100%; background: linear-gradient(160deg, var(--jw-cream-1), var(--surface-2)); display: grid; place-items: center; }
.pw-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pw-initial { font-size: 40px; font-weight: 600; color: #A08A55; }
.pw-info { padding: 9px 10px 11px; }
.pw-name { font-weight: 600; font-size: 14.5px; display: flex; align-items: center; gap: 5px; }
.pw-meta { font-size: 12px; color: var(--text-muted); line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-me-tag { font-size: 11px; font-weight: 500; padding: 0 6px; border-radius: 8px; background: var(--brand); color: #fff; }
.pw-manager-tag { font-size: 11px; font-weight: 500; padding: 0 6px; border-radius: 8px; background: var(--jw-cream-1); color: var(--jw-gold-deep); border: 1px solid var(--jw-cream-line); }

.pw-detail { max-width: 640px; }
.pw-detail-body { display: grid; grid-template-columns: 220px 1fr; gap: 22px; align-items: start; }
.pw-detail-photo { aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: linear-gradient(160deg, var(--jw-cream-1), var(--surface-2)); display: grid; place-items: center; }
.pw-detail-photo img { width: 100%; height: 100%; object-fit: cover; }
.pw-detail h3.pw-detail-name { font-size: 22px; margin-bottom: 12px; }

@media (max-width: 900px) {
  .pw-layout { grid-template-columns: minmax(0, 1fr); }
  .pw-side { position: static; max-height: none; }
  .pw-side-toggle { display: inline-flex; }
  .pw-side.is-collapsed .pw-tree { display: none; }
}
@media (max-width: 640px) {
  .pw-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
  .pw-initial { font-size: 30px; }
  .pw-detail-body { grid-template-columns: minmax(0, 1fr); }
  .pw-detail-photo { max-width: 240px; margin: 0 auto; width: 100%; }
}

/* ===================== 照片牆管理（人事） ===================== */
.pw-preview-lists details { border: 1px solid var(--border-soft); border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; background: var(--surface); }
.pw-preview-lists summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.pw-preview-lists ul { margin: 8px 0 2px; padding-left: 20px; font-size: 13px; color: var(--text-2); max-height: 220px; overflow-y: auto; }
.pw-thumb { width: 36px; height: 48px; object-fit: cover; border-radius: 5px; border: 1px solid var(--border); display: block; background: var(--bg); }
.pw-thumb-empty { width: 36px; height: 48px; border-radius: 5px; border: 1px dashed var(--border); display: grid; place-items: center; color: var(--text-muted); font-size: 11px; }
.pw-batch-results { margin: 10px 0 0; padding-left: 20px; font-size: 13px; max-height: 240px; overflow-y: auto; }
.pw-batch-results .is-fail { color: var(--danger); }
.pw-batch-results .is-ok { color: var(--success); }
/* 上傳員工清冊／上傳部門資料共用：卡片最上方的檔案說明，字比灰色提示大，一眼看出要傳什麼檔 */
.upload-source { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--text); }
.upload-source dt { font-weight: 700; }
.upload-source dd { margin: 0; }
.upload-file-input { display: block; margin-top: 14px; font-size: 15px; }
/* 員工清冊瀏覽名單工具列；資料健診（員工清冊、部門資料共用） */
.roster-list-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0; }
.roster-list-toolbar #roster-list-search { flex: 1 1 220px; max-width: 320px; }
.roster-list-toolbar select.input { width: auto; }
.health-checks { margin-top: 14px; display: grid; gap: 8px; }
.health-checks details { border: 1px solid var(--border); border-left: 3px solid var(--success); border-radius: var(--radius); padding: 10px 14px; background: var(--surface); }
.health-checks details.is-danger { border-left-color: var(--danger); }
.health-checks details.is-warn { border-left-color: var(--gold); }
.health-checks details.is-info { border-left-color: var(--info); }
.health-checks summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; }
.health-checks summary .count { margin-left: auto; font-variant-numeric: tabular-nums; }
.health-checks details.is-ok summary { cursor: default; }
.health-checks .reason { margin: 6px 0 0; font-size: 13px; color: var(--text-muted); }
.health-checks ul { margin: 8px 0 2px; padding-left: 20px; font-size: 13px; color: var(--text-2); max-height: 260px; overflow-y: auto; }

/* ===================== 會議室預約 ===================== */
.mr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.mr-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mr-tabs { margin-bottom: 12px; }
.mr-count { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.filter-chip.active .mr-count { background: #fff; color: var(--brand-dark); }
.mr-toolbar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 12px; }
.mr-room-select { width: auto; min-width: 180px; }
.mr-week-nav { display: flex; gap: 6px; align-items: center; }
.mr-date-pick { width: auto; }
.mr-range { font-size: 15px; font-variant-numeric: tabular-nums; }
.mr-weekend { margin-left: auto; }
.mr-room-info { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 14px; margin-bottom: 12px; border-radius: 8px; background: var(--brand-soft); font-size: 13px; color: var(--text-2); }
.mr-room-info p { flex-basis: 100%; margin: 0; white-space: pre-line; }
.mr-day-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 10px; }
.mr-day-tabs:empty { display: none; }
.mr-day-tabs .filter-chip { flex: 0 0 auto; }

.mr-grid-wrap { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.mr-grid {
  --mr-slot-h: 26px;
  display: grid;
  grid-template-columns: 52px repeat(var(--mr-days), minmax(0, 1fr));
  grid-template-rows: auto calc(var(--mr-slots) * var(--mr-slot-h));
}
.mr-grid > .empty { grid-column: 1 / -1; }
.mr-corner, .mr-day-head { position: sticky; top: 0; z-index: 2; background: var(--surface); border-bottom: 1px solid var(--border); }
.mr-day-head { padding: 9px 4px; text-align: center; font-size: 13px; font-weight: 600; border-left: 1px solid var(--border-soft); }
.mr-day-head.is-today { color: var(--brand-dark); background: var(--brand-soft); }
.mr-times { display: grid; grid-auto-rows: var(--mr-slot-h); }
.mr-time { font-size: 11px; color: var(--text-muted); text-align: right; padding-right: 6px; transform: translateY(-7px); font-variant-numeric: tabular-nums; }
.mr-times .mr-time:first-child { transform: none; }
.mr-col { position: relative; display: grid; grid-auto-rows: var(--mr-slot-h); border-left: 1px solid var(--border-soft); }
.mr-slot { border: 0; border-top: 1px solid var(--border-soft); background: none; padding: 0; cursor: pointer; }
.mr-slot.is-half { border-top-style: dashed; }
.mr-slot:hover:not(:disabled), .mr-slot:focus-visible { background: var(--brand-soft); outline: none; }
.mr-slot:hover:not(:disabled)::after { content: '＋ 預約'; font-size: 11px; color: var(--brand-dark); }
.mr-slot:disabled { cursor: default; background: repeating-linear-gradient(135deg, #FAFAF8 0 6px, #F3F2EE 6px 7px); }
.mr-booking {
  position: absolute; left: 3px; right: 3px; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; overflow: hidden;
  padding: 3px 7px; border: 0; border-left: 3px solid var(--info); border-radius: 6px;
  background: #E6EFF5; color: var(--text); text-align: left; cursor: pointer; font: inherit;
}
.mr-booking strong { font-size: 12.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mr-booking span { font-size: 11px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mr-booking:hover { box-shadow: var(--shadow); }
.mr-booking.is-mine { border-left-color: var(--brand); background: #FDE8CF; }
.mr-booking.is-reserved { border-left-color: var(--text-muted); background: repeating-linear-gradient(135deg, #ECEAE4 0 8px, #E3E0D8 8px 16px); }
.mr-booking.is-past { opacity: .55; }
.mr-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; color: var(--text-muted); }
.mr-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mr-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; background: #E6EFF5; border-left: 3px solid var(--info); }
.mr-swatch.is-mine { background: #FDE8CF; border-left-color: var(--brand); }
.mr-swatch.is-reserved { background: #E3E0D8; border-left-color: var(--text-muted); }

.mr-kind { display: flex; gap: 8px 18px; flex-wrap: wrap; }
.mr-slot-hint { margin: -6px 0 14px; }
.mr-detail { display: grid; grid-template-columns: 72px 1fr; gap: 8px 12px; margin: 0; font-size: 14px; }
.mr-detail dt { color: var(--text-muted); }
.mr-detail dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }

/* 同仁下拉選單：單選（預約人）浮在下方；複選（與會者）清單接在輸入框下方，連續加人時不會蓋住已選的人 */
.mr-picker { position: relative; }
.mr-picker .mr-picker-input { cursor: pointer; }
.mr-picker .mr-picker-input:focus { cursor: text; }
.mr-picker:not(.is-multi) .mr-picker-list { position: absolute; z-index: 5; left: 0; right: 0; }
.mr-picker-list { margin-top: 4px; max-height: 240px; overflow-y: auto; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); box-shadow: var(--shadow); }
.mr-picker-item { display: flex; flex-direction: column; gap: 1px; padding: 7px 11px; cursor: pointer; border-bottom: 1px solid var(--border-soft); }
.mr-picker-item:last-child { border-bottom: 0; }
.mr-picker-item strong { font-size: 13.5px; font-weight: 500; }
.mr-picker-item small { font-size: 11.5px; color: var(--text-muted); overflow-wrap: anywhere; }
.mr-picker-item.is-active, .mr-picker-item:hover { background: var(--brand-soft); }
.mr-picker-empty { padding: 10px 11px; font-size: 13px; color: var(--text-muted); }
.mr-picker.is-multi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); }
.mr-picker.is-multi:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(240,127,9,.13); }
.field .mr-picker.is-multi .mr-picker-input { flex: 1 1 200px; width: auto; border: 0; padding: 4px 5px; box-shadow: none; }
.mr-picker.is-multi .mr-picker-list { flex-basis: 100%; }
.mr-chips { display: contents; }
.field .mr-picker.is-multi .mr-dept-select { flex: 0 0 auto; width: auto; max-width: 170px; padding: 4px 6px; font-size: 13px; }
.mr-picker-item.is-bulk strong { color: var(--brand); font-weight: 600; }
@media (max-width: 700px) { .field .mr-picker.is-multi .mr-dept-select { flex-basis: 100%; max-width: none; } }
.mr-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 14px; background: var(--brand-soft); font-size: 13px; }
.mr-chip button { border: 0; background: none; cursor: pointer; font-size: 15px; line-height: 1; color: var(--text-muted); padding: 0 4px; }
.mr-chip button:hover { color: var(--danger); }
.mr-invite { padding: 12px 14px; border: 1px dashed var(--border); border-radius: var(--radius); }
.mr-invite.is-unavailable { display: none; }
.mr-invite-body { margin-top: 12px; }
.mr-invite-body .field-hint { margin: 8px 0 0; }

.mr-mine-item { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: 8px; }
.mr-mine-item.is-cancelled { opacity: .6; }
.mr-mine-item.is-cancelled .mr-mine-main strong { text-decoration: line-through; }
.mr-mine-when { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.mr-mine-when span, .mr-mine-main span { font-size: 12.5px; color: var(--text-muted); }
.mr-mine-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mr-mine-main strong { overflow-wrap: anywhere; }
.mr-mine-actions { display: flex; align-items: center; gap: 10px; white-space: nowrap; }

.mr-room-table td { vertical-align: top; }
.mr-calendar-id { font-size: 11.5px; color: var(--text-muted); word-break: break-all; }

@media (max-width: 700px) {
  .mr-grid { --mr-slot-h: 32px; grid-template-columns: 46px minmax(0, 1fr); }
  .mr-room-select { flex: 1 1 100%; }
  .mr-weekend { margin-left: 0; }
  .mr-head-actions, .mr-head-actions .btn { width: 100%; }
  .mr-mine-item { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .mr-mine-when { flex-direction: row; gap: 8px; }
}

/* ===========================================================
   戰情室內嵌檢視頁（bi.html）：一條分頁列＋全螢幕 Power BI 報表
   =========================================================== */
.bi-body { margin: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
.bi-bar {
  flex: none; display: flex; align-items: center; gap: 16px; padding: 0 16px; height: 52px;
  background: linear-gradient(90deg, var(--jw-cream-1), var(--jw-cream-2));
  border-bottom: 1px solid var(--jw-cream-line);
}
.bi-home {
  flex: none; display: flex; align-items: center; gap: 6px;
  color: var(--text-2); font-weight: 600; font-size: 14px; text-decoration: none;
}
.bi-home img { width: 26px; height: 26px; }
.bi-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.bi-tabs::-webkit-scrollbar { display: none; }
.bi-tab {
  flex: none; padding: 7px 16px; border-radius: 999px; white-space: nowrap;
  font-size: 15px; font-weight: 600; color: var(--text-2); text-decoration: none;
  background: rgba(255,255,255,.55); border: 1px solid transparent;
}
.bi-tab:hover { background: var(--surface); border-color: var(--jw-cream-line); }
.bi-tab.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.bi-main { flex: 1; position: relative; min-height: 0; }
.bi-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--surface); }
.bi-message { margin: 0; padding: 48px 16px; text-align: center; color: var(--text-muted); }

@media (max-width: 640px) {
  .bi-bar { gap: 10px; padding: 0 10px; }
  .bi-home { font-size: 0; } /* 手機只留 logo，讓分頁有空間 */
  .bi-tab { padding: 6px 12px; font-size: 14px; }
}

/* ============ 印鑑管理教育訓練（seal-training.html） ============ */
.training-page .section { margin-bottom: 18px; }
.training-roles { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.training-roles-label { font-size:13px; color:var(--text-muted); margin-right:4px; }
.training-role-hint { margin:10px 0 0; padding:10px 14px; border-radius:8px; background:var(--brand-soft); color:var(--brand-dark); font-size:14px; }
.training-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-items:start; }
.training-main { display:grid; gap:16px; min-width:0; }
.training-player { position:relative; padding:0; overflow:hidden; background:#000; aspect-ratio:16/9; }
.training-player video { display:block; width:100%; height:100%; background:#000; }
.training-next { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:rgba(0,0,0,.72); color:#fff; }
.training-next[hidden] { display:none; }
.training-next p { margin:0; font-size:18px; font-weight:600; }
.training-info { padding:20px 22px; }
.training-info-head h3 { font-size:20px; margin:6px 0 2px; }
.training-tag { display:inline-block; padding:2px 10px; border-radius:20px; background:var(--jw-cream-1); color:var(--jw-gold-deep); font-size:12px; font-weight:600; }
.training-meta { margin:0; color:var(--text-muted); font-size:13px; }
.training-tabs { display:flex; gap:8px; margin:16px 0 14px; padding-top:14px; border-top:1px solid var(--border-soft); }
.training-block + .training-block { margin-top:18px; }
.training-block h4 { font-size:15px; margin:0 0 8px; color:var(--text); }
.training-points { margin:0; padding-left:22px; display:grid; gap:6px; font-size:14px; line-height:1.7; color:var(--text-2); }
.training-points b { color:var(--text); }
.training-callout { margin:10px 0 0; padding:8px 12px; border-left:3px solid var(--brand); background:var(--brand-soft); font-size:14px; border-radius:0 6px 6px 0; }
.training-dl { display:grid; grid-template-columns:auto 1fr; gap:8px 14px; margin:0; font-size:14px; line-height:1.6; }
.training-dl dt { font-weight:600; padding:2px 10px; border-radius:6px; background:var(--surface-2); text-align:center; align-self:start; }
.training-dl dt:nth-of-type(1) { background:#E4EFDF; color:var(--success); }
.training-dl dt:nth-of-type(2) { background:#FBF0D9; color:#8A6B12; }
.training-dl dt:nth-of-type(3) { background:#F6E3E5; color:var(--danger); }
.training-dl dd { margin:0; color:var(--text-2); }
.training-faq { display:grid; gap:8px; }
.training-faq details { border:1px solid var(--border); border-radius:8px; background:var(--surface); }
.training-faq summary { cursor:pointer; padding:10px 14px; font-size:14px; font-weight:600; list-style:none; display:flex; gap:10px; align-items:baseline; }
.training-faq summary::-webkit-details-marker { display:none; }
.training-faq summary span { color:var(--brand-dark); flex:none; }
.training-faq details[open] summary { border-bottom:1px solid var(--border-soft); }
.training-faq p { margin:0; padding:10px 14px 12px 44px; font-size:14px; line-height:1.7; color:var(--text-2); }
.training-note { margin:8px 0; font-size:12.5px; color:var(--text-muted); }
.training-transcript { list-style:none; margin:0; padding:0; max-height:360px; overflow-y:auto; position:relative; border:1px solid var(--border-soft); border-radius:8px; }
.training-transcript button { display:flex; gap:12px; width:100%; padding:7px 12px; border:0; background:none; text-align:left; font:inherit; font-size:14px; line-height:1.6; color:var(--text-2); cursor:pointer; }
.training-transcript button:hover { background:var(--bg); }
.training-transcript button.is-active { background:var(--brand-soft); color:var(--text); font-weight:500; }
.training-transcript time { flex:none; width:38px; color:var(--text-muted); font-size:12px; font-variant-numeric:tabular-nums; padding-top:2px; }
.training-side { display:grid; gap:12px; position:sticky; top:calc(var(--header-h) + 16px); }
.training-progress { padding:14px 16px; }
.training-progress-head { display:flex; justify-content:space-between; font-size:14px; margin-bottom:8px; }
.training-progress-head span { color:var(--text-muted); font-variant-numeric:tabular-nums; }
.training-bar { height:8px; border-radius:8px; background:var(--surface-2); overflow:hidden; }
.training-bar span { display:block; height:100%; width:0; background:var(--success); transition:width .3s; }
.training-list { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.training-item { display:flex; gap:12px; width:100%; padding:8px; border:1px solid var(--border); border-radius:10px; background:var(--surface); text-align:left; font:inherit; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.training-item:hover { border-color:var(--brand); }
.training-item.is-current { border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-soft); }
.training-item.is-dim { opacity:.5; }
.training-thumb { position:relative; flex:none; width:104px; aspect-ratio:16/9; border-radius:6px; overflow:hidden; background:var(--surface-2); }
.training-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.training-dur { position:absolute; right:4px; bottom:4px; padding:0 5px; border-radius:4px; background:rgba(0,0,0,.7); color:#fff; font-size:11px; font-variant-numeric:tabular-nums; }
.training-item-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.training-item-body small { font-size:12px; color:var(--text-muted); }
.training-item-body strong { font-size:14px; line-height:1.4; }
.training-must { display:inline-block; margin-left:4px; padding:0 6px; border-radius:4px; background:var(--brand); color:#fff; font-size:11px; }
.training-status { font-size:12px; color:var(--text-muted); }
.training-status.is-done { color:var(--success); font-weight:600; }
@media (max-width: 960px) {
  .training-grid { grid-template-columns:1fr; }
  .training-side { position:static; }
  .training-player { scroll-margin-top:calc(var(--header-h) + 8px); }
}
@media (max-width: 640px) {
  .training-transcript { max-height:280px; }
  .training-faq p { padding-left:14px; }
  .training-info { padding:16px; }
}

/* ===========================================================
   活動報名（events.html／event-manager.html）
   =========================================================== */
.muted { color: var(--text-muted); }
.ev-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ev-head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ev-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }

.ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.ev-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; color: inherit; text-decoration: none; transition: box-shadow .15s, transform .15s; }
.ev-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.ev-card.is-past { opacity: .72; }
.ev-card-cover { aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--jw-cream-1), var(--jw-cream-2)); display: flex; align-items: center; justify-content: center; font-size: 46px; }
/* 封面固定 16:9（建議上傳 1600×900），比例不同時置中裁切 */
.ev-card-cover, .ev-cover { overflow: hidden; }
.ev-cover-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ev-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.ev-card-body h3 { font-size: 17px; margin: 0; }
.ev-card-body p { margin: 0; color: var(--text-muted); font-size: 13.5px; line-height: 1.6; }
.ev-card-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: auto; padding-top: 10px; font-size: 13px; color: var(--text-2); }

.ev-detail-top { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.ev-detail { padding: 0; overflow: hidden; margin-bottom: 20px; }
.ev-cover { aspect-ratio: 16 / 9; width: calc(100% - 52px); max-width: 860px; margin: 22px auto 0; border-radius: 10px; background: var(--surface-2); }
.em-cover-hint { background: var(--brand-soft); border-radius: 8px; padding: 8px 12px; font-size: 13px; color: var(--text-2); margin: 0 0 8px; }
.ev-detail-body { padding: 22px 26px 26px; }
.ev-title { font-size: 24px; margin: 2px 0 6px; }
.ev-summary { font-size: 15px; color: var(--text-2); margin: 0 0 14px; }
.ev-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 20px; margin: 0 0 20px;
  padding: 14px 16px; background: var(--brand-soft); border-radius: var(--radius); }
.ev-facts div { min-width: 0; }
.ev-facts dt { font-size: 12.5px; color: var(--text-muted); }
.ev-facts dd { margin: 2px 0 0; font-weight: 600; color: var(--text); word-break: break-word; }
.ev-content { margin-bottom: 12px; }
.ev-content.is-html h2 { font-size: 19px; margin: 22px 0 10px; color: var(--text); }

.ev-register { padding: 22px 26px; scroll-margin-top: calc(var(--header-h) + 12px); }
.ev-register-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ev-register-head h3 { font-size: 18px; margin: 0; }
.ev-notice { padding: 12px 14px; border-radius: 8px; background: #F0EFEC; color: var(--text-2); margin-bottom: 16px; line-height: 1.7; }
.ev-notice.is-ok { background: #EDF4EA; }
.ev-notice.is-warn { background: #FDF3DF; }
.ev-notice:empty { display: none; }
.ev-my-data { margin: 10px 0 0; background: rgba(255,255,255,.7); }
.ev-optional { color: var(--text-muted); font-weight: 400; margin-left: 4px; }
.ev-form-error { color: var(--danger); background: #F7ECEE; padding: 10px 12px; border-radius: 8px; margin: 4px 0 12px; }
.ev-form-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ev-form-actions .btn { min-width: 140px; justify-content: center; }
#ev-company-other { margin-top: 6px; }
.ann-event-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-soft); }

/* 承辦人後台 */
.em-back { font-size: 13px; color: var(--text-muted); text-decoration: none; }
.em-back:hover { color: var(--brand-dark); }
.em-breakdown { padding: 16px 20px; margin-bottom: 22px; }
.em-breakdown .section-title { font-size: 15px; margin: 0 0 10px; }
.em-bar-row { display: grid; grid-template-columns: minmax(120px, 280px) 1fr 40px; gap: 10px; align-items: center; padding: 3px 0; font-size: 13.5px; }
.em-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-bar-track { height: 10px; background: var(--border-soft); border-radius: 5px; overflow: hidden; }
.em-bar-fill { display: block; height: 100%; background: var(--brand); border-radius: 5px; }
.em-bar-value { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.em-reg-head { flex-wrap: wrap; gap: 10px; }
.em-filters { align-items: center; }
.em-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.em-company-filter { width: auto; max-width: 260px; }
.em-search { width: 240px; max-width: 100%; margin-left: auto; }
.em-bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 10px;
  background: var(--brand-soft); border: 1px solid var(--jw-cream-line); border-radius: var(--radius); }
.em-bulk .input { width: auto; }
.em-reg-table td { vertical-align: middle; }
.em-reg-table .em-check { width: 34px; }
.em-reg-table .em-check input { width: 16px; height: 16px; accent-color: var(--brand); }
.em-reg-table tr.is-cancelled td { color: var(--text-muted); }
.em-reg-table tr.is-cancelled strong { text-decoration: line-through; }
.em-status-select { padding: 4px 6px; font-size: 13px; width: auto; }
.em-note { max-width: 200px; font-size: 13px; color: var(--text-2); }
.em-privacy { margin-top: 12px; }
.em-form-section { font-size: 15px; margin: 24px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border-soft); color: var(--brand-dark); }
.em-form-section:first-child { margin-top: 0; }
.em-field-row { display: grid; grid-template-columns: 1fr 120px auto auto; gap: 8px; align-items: center; padding: 10px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: 8px; background: #FCFBF9; }
.em-field-row .check-row { white-space: nowrap; }
.em-field-move { display: flex; gap: 4px; }
.em-field-options { grid-column: 1 / -1; }
.em-organizer-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.em-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; background: var(--brand-soft); font-size: 13px; }
.em-chip small { color: var(--text-muted); }
.em-chip button { border: 0; background: none; cursor: pointer; font-size: 15px; line-height: 1; color: var(--text-muted); padding: 0 4px; }
.em-chip button:hover { color: var(--danger); }
.em-organizer-results { border: 1px solid var(--border); border-radius: 8px; max-height: 240px; overflow-y: auto; margin-top: 4px; background: var(--surface); }
.em-organizer-results button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 8px 12px; border: 0; background: none; cursor: pointer; text-align: left; }
.em-organizer-results button:hover { background: var(--brand-soft); }
.em-organizer-results small { color: var(--text-muted); }
.em-organizer-results .field-hint { padding: 8px 12px; margin: 0; }
.em-attachments { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.em-att { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13.5px; }
.em-att a { flex: 1; min-width: 0; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.em-att.is-pending { color: var(--text-muted); border-style: dashed; }
.em-foot-spacer { flex: 1; }

@media (max-width: 640px) {
  .ev-grid { grid-template-columns: 1fr; }
  .ev-detail-body, .ev-register { padding: 18px 16px; }
  .ev-cover { width: calc(100% - 32px); margin-top: 16px; }
  .ev-title { font-size: 20px; }
  .ev-form-actions .btn { flex: 1; }
  .em-search { margin-left: 0; width: 100%; }
  .em-bar-row { grid-template-columns: minmax(90px, 40%) 1fr 32px; }
  .em-field-row { grid-template-columns: 1fr 1fr; }
  .em-field-row > input[data-prop="label"] { grid-column: 1 / -1; }
}

/* 首頁：報名中的活動入口 */
.home-events { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.home-event { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--radius); text-decoration: none; color: var(--text);
  background: linear-gradient(90deg, var(--jw-cream-1), #FFF8EC); border: 1px solid var(--jw-cream-line); box-shadow: var(--shadow-sm); }
.home-event:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.home-event-icon { font-size: 28px; flex: none; }
.home-event-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.home-event-text strong { font-size: 16px; }
.home-event-text small { color: var(--text-2); font-size: 13px; }
.home-event-cta { flex: none; background: var(--brand); color: #fff; font-weight: 600; font-size: 14px; padding: 8px 14px; border-radius: 8px; }
@media (max-width: 640px) {
  .home-event { flex-wrap: wrap; padding: 12px 14px; }
  .home-event-cta { width: 100%; text-align: center; }
}