:root {
  --bg: #f0f4ff;
  --surface: #fff;
  --surface2: #f5f7fc;
  --primary: #1a5fd4;
  --primary-bg: #dbeafe;
  --text: #1a202c;
  --muted: #64748b;
  --border: #e2e8f0;
  --tag-bg: #dbeafe;
  --tag-text: #1e40af;
  --code-bg: #f1f5f9;
  --topbar: rgba(255, 255, 255, 0.95);
  --input-bg: #f8faff;
  --success: #22c55e;
  --danger: #ef4444;
  --warning: #f59e0b;
  /* 甘特圖第一層（目標）專用色，票 08——badge 系列（gray/blue/green/red/amber）都是
     別的意思，目標需要一個獨立、不跟現有狀態顏色混淆的顏色。 */
  --indigo: #6366f1;
  --radius: 12px;
  --radius-sm: 8px;

  /* 字型：微軟正黑體優先（Carter 指定）。它是 Windows 系統字體，非 Windows 會依序退到
     macOS 的蘋方、Google Fonts 載的 Noto Sans TC，最後才是系統預設。
     Blog 是對外公開的，所以保留 Noto Sans TC 這層後備，不讓非 Windows 訪客看到豆腐字。 */
  --font-sans: "Microsoft JhengHei", "微軟正黑體", "PingFang TC", "Noto Sans TC", system-ui,
    sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;

  /* 字級只有這 7 階，最小 12px。新增樣式時從這裡挑，不要自己發明 13.5px 這種中間值。 */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  /* 讓原生控件（日期選擇器的日曆圖示與彈出面板、下拉箭頭）跟著主題走。
     少了這行，深色底上會出現瀏覽器預設的深色圖示，等於看不見。 */
  color-scheme: light;
}

:root[data-theme="light"] {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a1122;
    --surface: #111827;
    --surface2: #0f172a;
    --primary: #3b82f6;
    --primary-bg: #1e3a5f;
    --text: #e2e8f0;
    --muted: #94a3b8;
    --border: #1e293b;
    --tag-bg: #1e3a62;
    --tag-text: #93c5fd;
    --code-bg: #060d1a;
    --topbar: rgba(17, 24, 39, 0.95);
    --input-bg: #0a1020;
    --success: #4ade80;
    --danger: #f87171;
    --warning: #fbbf24;
    --indigo: #818cf8;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0a1122;
  --surface: #111827;
  --surface2: #0f172a;
  --primary: #3b82f6;
  --primary-bg: #1e3a5f;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --border: #1e293b;
  --tag-bg: #1e3a62;
  --tag-text: #93c5fd;
  --code-bg: #060d1a;
  --topbar: rgba(17, 24, 39, 0.95);
  --input-bg: #0a1020;
  --success: #4ade80;
  --danger: #f87171;
  --warning: #fbbf24;
  --indigo: #818cf8;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

/* 瀏覽器對 [hidden] 的預設是 display:none，但那是 UA 樣式——本檔任何一條 display
   規則（例如 .button 的 inline-flex）都會贏過它，元素就藏不掉。這條把 hidden 拉回作者層。 */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  transition: background 180ms ease, color 180ms ease;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.2);
  border-radius: 3px;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

.shell {
  min-height: 100vh;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 58px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  background: var(--topbar);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
}

.nav {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 4px;
}

.nav a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 6px;
  color: var(--muted);
  font-size: var(--text-base);
  transition: color 150ms ease, background 150ms ease;
}

.nav a:hover,
.nav a:focus-visible {
  background: var(--surface2);
  color: var(--primary);
  outline: none;
}

.button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--text-base);
  transition: all 150ms ease;
}

.button:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.button.primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
  font-weight: 700;
}

.button.primary:hover {
  opacity: 0.88;
  color: #fff;
}

.button.danger {
  border-color: var(--border);
  color: var(--danger);
}

.button.danger:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.container {
  width: min(1180px, calc(100vw - 36px));
  margin: 0 auto;
}

.lead {
  color: var(--muted);
  line-height: 1.75;
}

.panel {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: all 200ms ease;
}

.panel-pad {
  padding: 22px;
}

.grid {
  display: grid;
  gap: 18px;
}

.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.article-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 245px;
  padding: 20px;
}

.excerpt-clamp {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.article-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--primary) 12%, transparent);
}

.eyebrow {
  color: var(--primary);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.meta,
.small {
  color: var(--muted);
  font-size: var(--text-base);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.tag {
  font-size: var(--text-xs);
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--tag-bg);
  color: var(--tag-text);
  font-weight: 500;
}

.globe-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 58px);
  background: #050d1f;
  overflow: hidden;
}

.globe-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.globe-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(5, 13, 31, 0.55) 75%);
  pointer-events: none;
}

.globe-label {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
}

.globe-label-tl {
  top: 14%;
  left: 7%;
}

.globe-label-tr {
  top: 14%;
  right: 7%;
  flex-direction: row-reverse;
  text-align: right;
}

.globe-label-bl {
  bottom: 28%;
  left: 7%;
}

.globe-label-br {
  bottom: 28%;
  right: 7%;
  flex-direction: row-reverse;
  text-align: right;
}

.globe-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.globe-label-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: #fff;
}

.globe-label-sub {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font-mono);
}

.globe-center {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 20px;
  pointer-events: none;
}

.globe-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.globe-center h1 {
  margin: 0 0 12px;
  font-size: clamp(28px, 4.5vw, 48px);
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  text-shadow: 0 0 50px rgba(139, 92, 246, 0.6);
}

.globe-center p {
  margin: 0;
  max-width: 480px;
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.65;
}

.globe-scroll {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.globe-scroll-label {
  margin-bottom: 6px;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.15em;
}

.globe-scroll-line {
  width: 1px;
  height: 28px;
  margin: 0 auto;
  background: linear-gradient(to bottom, rgba(139, 92, 246, 0.7), transparent);
}

@media (max-width: 700px) {
  .globe-label {
    display: none;
  }
}

.cat-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 26px;
}

.cat-btn {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 150ms ease;
}

.cat-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.cat-btn.active {
  border-color: var(--primary);
  background: var(--primary-bg);
  color: var(--primary);
}

.prose {
  max-width: 820px;
  padding: 34px 0 70px;
  line-height: 1.85;
  color: var(--text);
}

.prose h1 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.prose h2 {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-top: 34px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.prose img,
article img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

code {
  font-family: var(--font-mono);
  /* 刻意用固定值而不是 0.9em——相對值在 13px 的容器裡會算出 11.7px，破了 12px 的下限 */
  font-size: var(--text-sm);
}

pre {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  background: var(--code-bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

blockquote {
  margin-left: 0;
  border-left: 4px solid var(--primary);
  padding-left: 14px;
  color: var(--muted);
}

.form {
  display: grid;
  gap: 14px;
}

.field {
  display: grid;
  gap: 7px;
}

.field label {
  font-weight: 700;
  font-size: var(--text-base);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 42px;
  padding: 10px 13px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text);
  outline: none;
  transition: border-color 150ms ease;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--primary);
}

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

.field-hint {
  font-size: var(--text-xs);
  color: var(--muted);
  margin: 0;
}

/* 草稿頁（票 03）：左編輯、右預覽（票 04 才會有內容）。刻意不用 <dialog> 彈窗——
   長文編輯需要跟預覽並排比對，彈窗形態沒辦法同時看到兩邊。 */
.draft-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.draft-editor-textarea {
  min-height: 420px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.draft-editor-preview {
  position: sticky;
  top: 78px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface2);
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.table th {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.table tr:hover td {
  background: var(--surface2);
}

.status {
  color: var(--success);
  font-weight: 800;
}

.notice {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--surface2);
  line-height: 1.6;
}

.notice.success {
  border-color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, var(--surface));
  color: var(--success);
}

.notice.danger {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
  color: var(--danger);
}

/* 文章內文（markdown 渲染）補充排版：globals.css 的 .prose 未涵蓋的元素用預設 + 少量修正 */
.content-body {
  margin-top: 8px;
}

.content-body h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-top: 26px;
}

.content-body h4 {
  font-size: var(--text-md);
  font-weight: 700;
  margin-top: 22px;
}

.content-body ul,
.content-body ol {
  padding-left: 1.5rem;
}

.content-body table {
  border-collapse: collapse;
  margin: 1rem 0;
  width: 100%;
  font-size: var(--text-base);
}

.content-body th,
.content-body td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
}

.content-body th {
  background: var(--surface2);
}

/* 文章內頁：左內文 + 右側分類欄（參考 blog.miniasp.com） */
.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 44px;
  align-items: start;
}

.post-aside {
  position: sticky;
  top: 78px;
  padding-top: 40px;
}

.aside-title {
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.aside-cats {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.aside-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: var(--text-base);
  transition: background 150ms ease, color 150ms ease;
}

.aside-cat:hover {
  background: var(--surface2);
  color: var(--primary);
}

.aside-cat.active {
  background: var(--primary-bg);
  color: var(--primary);
  font-weight: 700;
}

.aside-cat .count {
  font-size: var(--text-xs);
  opacity: 0.6;
}

/* 內文下方導覽：上一篇 / 回首頁 / 下一篇 */
.post-nav {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.post-nav-side {
  flex: 1;
  min-width: 0;
}

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

.post-nav-side a {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
}

.post-nav-dir {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--primary);
}

.post-nav-title {
  font-size: var(--text-base);
  color: var(--muted);
}

.post-nav-side a:hover .post-nav-title {
  color: var(--primary);
}

.post-nav-home {
  flex-shrink: 0;
  align-self: center;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: all 150ms ease;
}

.post-nav-home:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* 留言區 */
.comments {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.comments h2 {
  font-size: var(--text-xl);
  font-weight: 700;
  margin: 0 0 12px;
}

@media (max-width: 860px) {
  .post-layout {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .post-aside {
    position: static;
    padding-top: 8px;
    order: 2;
    margin-top: 24px;
    border-top: 1px solid var(--border);
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
    padding: 14px 18px;
  }

  .nav {
    width: 100%;
    overflow-x: auto;
  }

  .grid.two,
  .grid.three {
    grid-template-columns: 1fr;
  }

  .draft-editor {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .draft-editor-preview {
    position: static;
  }

  .toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ============================================================
   內部系統共用外殼（E0）：顧問系統 / 系統管理的側邊欄版面
   新增 class，不影響既有 blog 樣式；深淺色皆用 CSS variables / color-mix
   ============================================================ */
.app-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: start;
  min-height: calc(100vh - 58px);
}

.app-sidebar {
  position: sticky;
  top: 58px;
  align-self: start;
  min-height: calc(100vh - 58px);
  padding: 22px 14px;
  border-right: 1px solid var(--border);
  background: var(--surface2);
}

.app-sidebar-title {
  padding: 0 10px 12px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.app-sidebar-link {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-weight: 500;
  transition: background 140ms ease, color 140ms ease;
}

.app-sidebar-link:hover {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
}

.app-sidebar-link.active {
  background: var(--primary-bg);
  color: var(--primary);
}

.app-sidebar-empty {
  padding: 0 12px;
  color: var(--muted);
  font-size: var(--text-base);
}

.app-content {
  padding: 32px 40px 70px;
  min-width: 0;
}

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

.page-head h1 {
  margin: 0;
  font-size: var(--text-2xl);
}

.perm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}

.data-table th,
.data-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.data-table th {
  color: var(--muted);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.data-table tbody tr:hover {
  background: var(--surface2);
}

.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  background: color-mix(in srgb, var(--muted) 16%, transparent);
  color: var(--muted);
}

.badge.gray {
  background: color-mix(in srgb, var(--muted) 16%, transparent);
  color: var(--muted);
}

.badge.blue {
  background: var(--primary-bg);
  color: var(--primary);
}

.badge.green {
  background: color-mix(in srgb, var(--success) 18%, transparent);
  color: var(--success);
}

.badge.red {
  background: color-mix(in srgb, var(--danger) 18%, transparent);
  color: var(--danger);
}

.badge.amber {
  background: color-mix(in srgb, var(--warning) 20%, transparent);
  color: var(--warning);
}

.button.small {
  padding: 5px 12px;
  font-size: var(--text-sm);
}

/* 需求列表（/consultant/requirements） */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.filter-pill {
  padding: 5px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: var(--text-sm);
  text-decoration: none;
}

.filter-pill:hover {
  color: var(--text);
  border-color: var(--muted);
}

.filter-pill.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.req-title {
  font-weight: 500;
  margin-bottom: 4px;
}

/* 逾期原因跟在紅色標記後面，讓標記不是一個沒有理由的紅點 */
.req-overdue-why {
  margin-left: 6px;
  color: var(--muted);
  font-size: var(--text-xs);
}

.req-unassigned {
  color: var(--muted);
}

/* 日期欄位：原生的日曆圖示很小又貼邊，放大一點並給 hover 反應，
   讓它看得出來是可以點的。顏色由 :root 的 color-scheme 決定，不要在這裡 filter，
   否則亮色主題會被反白成看不見。 */
input[type="date"]::-webkit-calendar-picker-indicator {
  padding: 4px;
  margin-right: -2px;
  border-radius: 4px;
  opacity: 0.75;
  cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background: var(--primary-bg);
}

.req-title a {
  color: var(--text);
  text-decoration: none;
}

.req-title a:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* 需求詳情頁 */
.req-detail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.req-description {
  margin: 0 0 22px;
  max-width: 68ch;
  white-space: pre-wrap;
}

/* 唯讀欄位用兩欄網格，窄螢幕自動收成一欄 */
.req-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
  margin: 0 0 30px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.req-fact {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.req-fact dt {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: var(--text-xs);
}

.req-fact dd {
  margin: 0;
  font-size: var(--text-base);
}

.req-edit-title {
  margin: 0 0 16px;
  font-size: var(--text-lg);
}

/* 權限管理矩陣（/manage/permissions） */
.perm-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 22px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.perm-picker label {
  font-weight: 600;
  font-size: var(--text-base);
}

.perm-picker select {
  min-width: 160px;
}

.perm-picker .button {
  margin-left: auto;
}

.perm-admin-note {
  margin: 0 0 16px;
  font-size: var(--text-base);
  color: var(--muted);
}

/* 收合開關：只是個小三角，不要看起來像可以按的主要按鈕 */
.perm-toggle {
  padding: 0;
  width: 22px;
  border: none;
  background: none;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1;
  cursor: pointer;
}

.perm-toggle:hover {
  color: var(--text);
}

.perm-app-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* .perm-dialog 跟票 12 的 .modal 共用外框/遮罩樣式（見檔案後段的共用規則），
   這裡只留寬度／內距這兩個 .perm-dialog 自己的差異。 */
.perm-dialog {
  max-width: 420px;
  padding: 22px 24px;
}

.perm-dialog p {
  margin: 0 0 18px;
}

.perm-role {
  margin-bottom: 30px;
  padding: 18px 20px 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.perm-role-title {
  margin: 0 0 14px;
  font-size: var(--text-md);
}

.perm-app {
  margin-bottom: 18px;
}

.perm-app-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: var(--text-base);
}

/* 欄多時橫向捲動，不讓整頁被撐寬 */
.perm-matrix {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

.perm-matrix th:not(:first-child),
.perm-matrix td:not(:first-child) {
  text-align: center;
  width: 78px;
}

.perm-matrix input[type="checkbox"],
.perm-app-head input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--primary);
}

/* admin 那一區整片是 disabled 的，太淡就看不出「全開」，只淡一點點意思到即可 */
.perm-matrix input[type="checkbox"]:disabled,
.perm-app-head input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.85;
}

/* 窄螢幕：側邊欄收到內容上方，橫向排列 */
@media (max-width: 780px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .app-sidebar {
    position: static;
    min-height: 0;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .app-sidebar nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .app-content {
    padding: 24px 20px 60px;
  }
}

/* 需求詳情頁：進度 + 溝通 tab（票 06）
   純 CSS 切換，不用 JS——這站除了 /manage/permissions 都不用 JS。
   radio 藏起來，用相鄰選擇器依 :checked 狀態切換 label 樣式與對應面板的顯示。 */
.req-tabs {
  margin: 8px 0 30px;
}

.req-tab-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.req-tab-list {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}

.req-tab-label {
  padding: 8px 4px;
  margin-right: 20px;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.req-tab-label:hover {
  color: var(--text);
}

.req-tab-panel {
  display: none;
}

#reqtab-progress:checked ~ .req-tab-list label[for="reqtab-progress"],
#reqtab-comm:checked ~ .req-tab-list label[for="reqtab-comm"] {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

#reqtab-progress:checked ~ #reqtab-panel-progress,
#reqtab-comm:checked ~ #reqtab-panel-comm {
  display: block;
}

/* 目標詳情頁「工作計劃／甘特圖」tab（票 08）——跟上面需求詳情頁的進度/溝通 tab
   共用同一組 .req-tab-* class，只是 id 換成 goaltab-*，CSS 選擇器沒辦法只寫一份
   通用規則同時對應兩組不同的 id，所以這裡照抄一份、換掉 id 名稱。 */
#goaltab-wbs:checked ~ .req-tab-list label[for="goaltab-wbs"],
#goaltab-gantt:checked ~ .req-tab-list label[for="goaltab-gantt"] {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

#goaltab-wbs:checked ~ #goaltab-panel-wbs,
#goaltab-gantt:checked ~ #goaltab-panel-gantt {
  display: block;
}

/* 進度紀錄：新增／編輯表單套用一般 .form 樣式，卡片列表另外排版 */
.progress-form,
.comm-form {
  max-width: 620px;
  margin-bottom: 22px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.progress-list {
  display: grid;
  gap: 12px;
  max-width: 620px;
}

.progress-card {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.progress-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.progress-meta {
  font-size: var(--text-xs);
  color: var(--muted);
}

.progress-dates {
  display: flex;
  gap: 18px;
  margin-bottom: 8px;
  font-size: var(--text-xs);
  color: var(--muted);
}

.progress-content {
  margin: 0;
  font-size: var(--text-base);
  white-space: pre-wrap;
}

/* 溝通紀錄：卡片依方向靠左／靠右並上色，讀起來像對話串
   ——outbound（我→顧問）與 to_user（我→User）是「我方發出」，靠右；
   inbound／from_user 是對方發出，靠左。 */
.comm-list {
  display: grid;
  gap: 12px;
  max-width: 620px;
}

.comm-card {
  max-width: 88%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.comm-outbound {
  margin-left: auto;
  background: var(--primary-bg);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}

.comm-to-user {
  margin-left: auto;
  background: color-mix(in srgb, var(--success) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--success) 35%, var(--border));
}

.comm-from-user {
  background: color-mix(in srgb, var(--warning) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--warning) 35%, var(--border));
}

.comm-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: var(--text-xs);
}

.comm-direction {
  font-weight: 700;
  color: var(--text);
}

.comm-sender {
  color: var(--muted);
}

.comm-time {
  margin-left: auto;
  color: var(--muted);
}

.comm-content {
  margin: 0;
  font-size: var(--text-base);
  white-space: pre-wrap;
}

/* 通用彈窗（票 12/13，dialogs.js 負責開關）。跟 .perm-dialog 共用外框與遮罩樣式，
   只有寬度／內距不同——.modal 比 .perm-dialog 大，編輯需求表單有 10 個欄位，420px 放不下。 */
.modal,
.perm-dialog {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
}

.modal::backdrop,
.perm-dialog::backdrop {
  background: rgb(0 0 0 / 45%);
}

.modal {
  width: min(620px, calc(100vw - 40px));
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  padding: 24px 28px;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.modal-head h2 {
  margin: 0;
  font-size: var(--text-lg);
}

/* 待辦事項列表標題 hover 提示（票 17）：純 CSS，不用 JS。模板只在待辦有說明內容時才
   渲染 .hover-tip 容器，沒有說明的列維持純連結——CSS 這邊不需要處理「沒有說明」的情況。
   刻意只用在待辦事項列表；需求管理列表不套用這組樣式（Carter 明確排除的範圍）。 */
.hover-tip {
  position: relative;
  display: inline-block;
}

.hover-tip-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  margin-top: 6px;
  padding: 10px 12px;
  min-width: 220px;
  max-width: 360px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 400;
  white-space: pre-wrap;
  box-shadow: 0 4px 16px rgb(0 0 0 / 25%);
}

.hover-tip:hover .hover-tip-content {
  display: block;
}

/* 工作計劃（WBS，票 08）：巢狀 <ul><li> 天生就是階梯狀，這裡只需要在「巢狀的
   .wbs-tree」（也就是子項目那一層）加左邊距，不用算 depth 或行內樣式。 */
.wbs-tree {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wbs-tree .wbs-tree {
  margin-left: 26px;
  padding-top: 6px;
}

.wbs-node {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.wbs-row-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.wbs-check {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--success);
  font-size: var(--text-xs);
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wbs-check.done {
  border-color: var(--success);
  background: color-mix(in srgb, var(--success) 18%, transparent);
}

.wbs-title {
  font-weight: 500;
}

.wbs-title.done {
  text-decoration: line-through;
  color: var(--muted);
}

.wbs-dates {
  font-size: var(--text-xs);
  color: var(--muted);
}

/* 甘特圖（票 08）：純 HTML/CSS 手畫，不用任何圖表套件。日期範圍/百分比運算都在
   Go 端算好（internal/consultant.BuildGantt），這裡只管呈現。橫向內容比容器寬時
   讓 .gantt 自己捲動，不要把整個頁面撐寬——票 09 儀表板疊多個目標時列數更多，
   同一份樣式要撐得住。 */
.gantt {
  overflow-x: auto;
}

.gantt-row {
  display: flex;
  align-items: center;
  min-height: 34px;
  border-bottom: 1px solid var(--border);
}

.gantt-header-row {
  border-bottom: 2px solid var(--border);
  font-weight: 600;
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gantt-label-col {
  flex: 0 0 220px;
  padding-right: 12px;
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}

.gantt-track {
  position: relative;
  flex: 1 1 auto;
  min-width: 480px;
  height: 22px;
  display: flex;
}

.gantt-months {
  height: auto;
}

.gantt-month {
  border-left: 1px solid var(--border);
  text-align: center;
  padding: 4px 0;
}

.gantt-marker {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
}

.gantt-marker.goal {
  border-radius: 3px;
  background: var(--indigo);
}

.gantt-marker.done {
  background: var(--success);
}

.gantt-row-goal .gantt-label-col {
  font-weight: 700;
}

.gantt-bar {
  position: absolute;
  top: 3px;
  height: 16px;
  border-radius: 4px;
  background: var(--primary);
}

.gantt-bar.gantt-bar-goal {
  background: var(--indigo);
}

.gantt-bar.done {
  background: var(--success);
}

/* 日誌（/journal，票 02）：頂部快速新增列一行式排版，讓連續輸入不用跳頁。 */
.journal-quick-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.journal-quick-add select,
.journal-quick-add textarea,
.journal-quick-add input[type="date"] {
  min-height: 42px;
  padding: 10px 13px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text);
}

.journal-quick-add select,
.journal-quick-add input[type="date"] {
  flex: 0 0 auto;
  width: auto;
}

.journal-quick-add textarea {
  flex: 1 1 260px;
  resize: vertical;
  font: inherit;
}

/* 已分發／略過（票 03）：整列唯讀灰掉，跟待分發列視覺上明顯分開。
   表格本身沿用既有 .data-table（跟待辦事項／需求列表同一套），不另外發明樣式。 */
.journal-entry-locked {
  opacity: 0.6;
}