/* === 內嵌 Noto Color Emoji（COLRv1，自架，補齊系統字型缺的新 emoji，避免豆腐格□）
   來源 Google Fonts v39，已改為本機 assets/noto-emoji.*.woff2，不外連 === */
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("assets/noto-emoji.0.woff2") format("woff2");
  unicode-range: U+1f1e6-1f1ff;
}
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("assets/noto-emoji.1.woff2") format("woff2");
  unicode-range: U+200d, U+2620, U+26a7, U+fe0f, U+1f308, U+1f38c, U+1f3c1, U+1f3f3-1f3f4, U+1f6a9, U+e0062-e0063, U+e0065, U+e0067, U+e006c, U+e006e, U+e0073-e0074, U+e0077, U+e007f;
}
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("assets/noto-emoji.2.woff2") format("woff2");
  unicode-range: U+23, U+2a, U+30-39, U+a9, U+ae, U+200d, U+203c, U+2049, U+20e3, U+2122, U+2139, U+2194-2199, U+21a9-21aa, U+23cf, U+23e9-23ef, U+23f8-23fa, U+24c2, U+25aa-25ab, U+25b6, U+25c0, U+25fb-25fe, U+2611, U+2622-2623, U+2626, U+262a, U+262e-262f, U+2638, U+2640, U+2642, U+2648-2653, U+2660, U+2663, U+2665-2666, U+2668, U+267b, U+267e-267f, U+2695, U+269b-269c, U+26a0, U+26a7, U+26aa-26ab, U+26ce, U+26d4, U+2705, U+2714, U+2716, U+271d, U+2721, U+2733-2734, U+2747, U+274c, U+274e, U+2753-2755, U+2757, U+2764, U+2795-2797, U+27a1, U+27b0, U+27bf, U+2934-2935, U+2b05-2b07, U+2b1b-2b1c, U+2b55, U+3030, U+303d, U+3297, U+3299, U+fe0f, U+1f170-1f171, U+1f17e-1f17f, U+1f18e, U+1f191-1f19a, U+1f201-1f202, U+1f21a, U+1f22f, U+1f232-1f23a, U+1f250-1f251, U+1f310, U+1f3a6, U+1f3b5-1f3b6, U+1f3bc, U+1f3e7, U+1f441, U+1f499-1f49c, U+1f49f-1f4a0, U+1f4ac-1f4ad, U+1f4b1-1f4b2, U+1f4b9, U+1f4db, U+1f4f2-1f4f6, U+1f500-1f507, U+1f515, U+1f518-1f524, U+1f52f-1f53d, U+1f549, U+1f54e, U+1f5a4, U+1f5e8, U+1f5ef, U+1f6ab, U+1f6ad-1f6b1, U+1f6b3, U+1f6b7-1f6bc, U+1f6be, U+1f6c2-1f6c5, U+1f6d0-1f6d1, U+1f6d7, U+1f6dc, U+1f7e0-1f7eb, U+1f7f0, U+1f90d-1f90e, U+1f9d1-1f9d2, U+1f9e1, U+1fa75-1fa77, U+1faaf;
}
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("assets/noto-emoji.3.woff2") format("woff2");
  unicode-range: U+200d, U+231a-231b, U+2328, U+23f0-23f3, U+2602, U+260e, U+2692, U+2694, U+2696-2697, U+2699, U+26b0-26b1, U+26cf, U+26d1, U+26d3, U+2702, U+2709, U+270f, U+2712, U+fe0f, U+1f302, U+1f321, U+1f392-1f393, U+1f3a9, U+1f3bd, U+1f3ee, U+1f3f7, U+1f3fa, U+1f451-1f462, U+1f484, U+1f489-1f48a, U+1f48c-1f48e, U+1f4a1, U+1f4a3, U+1f4a5, U+1f4b0, U+1f4b3-1f4b8, U+1f4bb-1f4da, U+1f4dc-1f4f1, U+1f4ff, U+1f508-1f514, U+1f516-1f517, U+1f526-1f529, U+1f52c-1f52e, U+1f550-1f567, U+1f56f-1f570, U+1f576, U+1f587, U+1f58a-1f58d, U+1f5a5, U+1f5a8, U+1f5b1-1f5b2, U+1f5c2-1f5c4, U+1f5d1-1f5d3, U+1f5dc-1f5de, U+1f5e1, U+1f5f3, U+1f6aa, U+1f6ac, U+1f6bd, U+1f6bf, U+1f6c1, U+1f6cb, U+1f6cd-1f6cf, U+1f6d2, U+1f6e0-1f6e1, U+1f6f0, U+1f97b-1f97f, U+1f9af, U+1f9ba, U+1f9e2-1f9e6, U+1f9ea-1f9ec, U+1f9ee-1f9f4, U+1f9f7-1f9ff, U+1fa71-1fa74, U+1fa79-1fa7b, U+1fa86, U+1fa8e-1fa8f, U+1fa91-1fa93, U+1fa96, U+1fa99-1faa0, U+1faa2-1faa7, U+1faaa-1faae;
}
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("assets/noto-emoji.4.woff2") format("woff2");
  unicode-range: U+265f, U+26bd-26be, U+26f3, U+26f8, U+fe0f, U+1f004, U+1f0cf, U+1f380-1f384, U+1f386-1f38b, U+1f38d-1f391, U+1f396-1f397, U+1f399-1f39b, U+1f39e-1f39f, U+1f3a3-1f3a5, U+1f3a7-1f3a9, U+1f3ab-1f3b4, U+1f3b7-1f3bb, U+1f3bd-1f3c0, U+1f3c5-1f3c6, U+1f3c8-1f3c9, U+1f3cf-1f3d3, U+1f3f8-1f3f9, U+1f47e, U+1f4e2, U+1f4f7-1f4fd, U+1f52b, U+1f579, U+1f58c-1f58d, U+1f5bc, U+1f6f7, U+1f6f9, U+1f6fc, U+1f93f, U+1f941, U+1f945, U+1f947-1f94f, U+1f9e7-1f9e9, U+1f9f5-1f9f6, U+1fa70-1fa71, U+1fa80-1fa81, U+1fa83-1fa85, U+1fa87-1fa8a, U+1fa94-1fa95, U+1fa97-1fa98, U+1faa1, U+1faa9, U+1fadf;
}
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("assets/noto-emoji.5.woff2") format("woff2");
  unicode-range: U+2693, U+26e9-26ea, U+26f1-26f2, U+26f4-26f5, U+26fa, U+26fd, U+2708, U+fe0f, U+1f301, U+1f303, U+1f306-1f307, U+1f309, U+1f310, U+1f3a0-1f3a2, U+1f3aa, U+1f3cd-1f3ce, U+1f3d5, U+1f3d7-1f3db, U+1f3df-1f3e6, U+1f3e8-1f3ed, U+1f3ef-1f3f0, U+1f488, U+1f492, U+1f4ba, U+1f54b-1f54d, U+1f5fa-1f5ff, U+1f680-1f6a2, U+1f6a4-1f6a8, U+1f6b2, U+1f6d1, U+1f6d5-1f6d6, U+1f6dd-1f6df, U+1f6e2-1f6e5, U+1f6e9, U+1f6eb-1f6ec, U+1f6f3-1f6f6, U+1f6f8, U+1f6fa-1f6fb, U+1f9bc-1f9bd, U+1f9ed, U+1f9f3, U+1fa7c;
}
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("assets/noto-emoji.6.woff2") format("woff2");
  unicode-range: U+200d, U+2615, U+fe0f, U+1f32d-1f330, U+1f336, U+1f33d, U+1f344-1f37f, U+1f382, U+1f52a, U+1f7e9, U+1f7eb, U+1f942-1f944, U+1f950-1f96f, U+1f99e, U+1f9aa, U+1f9c0-1f9cb, U+1fad0-1fadc;
}
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("assets/noto-emoji.7.woff2") format("woff2");
  unicode-range: U+200d, U+2600-2601, U+2603-2604, U+2614, U+2618, U+26a1, U+26c4-26c5, U+26c8, U+26f0, U+2728, U+2744, U+2b1b, U+2b50, U+fe0f, U+1f300, U+1f304-1f305, U+1f308, U+1f30a-1f30f, U+1f311-1f321, U+1f324-1f32c, U+1f331-1f335, U+1f337-1f33c, U+1f33e-1f344, U+1f3d4, U+1f3d6, U+1f3dc-1f3de, U+1f3f5, U+1f400-1f43f, U+1f490, U+1f4a7, U+1f4ae, U+1f525, U+1f54a, U+1f573, U+1f577-1f578, U+1f648-1f64a, U+1f6d8, U+1f940, U+1f980-1f9ae, U+1f9ba, U+1fa90, U+1faa8, U+1fab0-1fabf, U+1facd-1facf, U+1fae7;
}
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("assets/noto-emoji.8.woff2") format("woff2");
  unicode-range: U+200d, U+2640, U+2642, U+2695-2696, U+26f7, U+26f9, U+2708, U+2764, U+27a1, U+fe0f, U+1f33e, U+1f373, U+1f37c, U+1f384-1f385, U+1f393, U+1f3a4, U+1f3a8, U+1f3c2-1f3c4, U+1f3c7, U+1f3ca-1f3cc, U+1f3eb, U+1f3ed, U+1f3fb-1f3ff, U+1f430, U+1f466-1f469, U+1f46b-1f478, U+1f47c, U+1f481-1f483, U+1f486-1f487, U+1f48b, U+1f48f, U+1f491, U+1f4bb-1f4bc, U+1f527, U+1f52c, U+1f574-1f575, U+1f57a, U+1f645-1f647, U+1f64b, U+1f64d-1f64e, U+1f680, U+1f692, U+1f6a3, U+1f6b4-1f6b6, U+1f6c0, U+1f6cc, U+1f91d, U+1f926, U+1f930-1f931, U+1f934-1f93a, U+1f93c-1f93e, U+1f977, U+1f9af-1f9b3, U+1f9b8-1f9b9, U+1f9bc-1f9bd, U+1f9cc-1f9cf, U+1f9d1-1f9df, U+1fa70, U+1fa82, U+1fac3-1fac5, U+1fac8, U+1faef;
}
@font-face {
  font-family: 'Noto Color Emoji';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("assets/noto-emoji.9.woff2") format("woff2");
  unicode-range: U+200d, U+2194-2195, U+2603, U+261d, U+2620, U+2639-263a, U+2665, U+26a1, U+26c4, U+270a-270d, U+2728, U+2763-2764, U+2b50, U+fe0f, U+1f31a-1f31f, U+1f32b, U+1f389-1f38a, U+1f3fb-1f3ff, U+1f440-1f450, U+1f463-1f465, U+1f479-1f47b, U+1f47d-1f480, U+1f485, U+1f48b-1f48c, U+1f493-1f49f, U+1f4a2, U+1f4a4-1f4a6, U+1f4a8-1f4ab, U+1f4af, U+1f525, U+1f573, U+1f590, U+1f595-1f596, U+1f5a4, U+1f5e3, U+1f600-1f644, U+1f648-1f64a, U+1f64c, U+1f64f, U+1f90c-1f925, U+1f927-1f92f, U+1f932-1f933, U+1f970-1f976, U+1f978-1f97a, U+1f9a0, U+1f9b4-1f9b7, U+1f9bb, U+1f9be-1f9bf, U+1f9d0, U+1f9e0-1f9e1, U+1fa75-1fa79, U+1fac0-1fac2, U+1fac6, U+1fae0-1fae6, U+1fae8-1faea, U+1faef-1faf8;
}

:root {
  --bg: #f5f4ef;
  --panel: #ffffff;
  --panel-soft: #f8f8f5;
  --ink: #1d2529;
  --muted: #677174;
  --line: #dfe3dc;
  --accent: #0f766e;
  --accent-dark: #0b554f;
  --accent-soft: #d9efea;
  --amber: #b7791f;
  --red: #b42318;
  --blue: #2563eb;
  --shadow: 0 18px 40px rgba(29, 37, 41, 0.09);
  --radius: 8px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(245, 244, 239, 0.94), rgba(245, 244, 239, 1)),
    repeating-linear-gradient(90deg, rgba(15, 118, 110, 0.05) 0 1px, transparent 1px 64px);
  font-family:
    "Microsoft JhengHei",
    "Noto Sans TC",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Noto Color Emoji",
    "Segoe UI Emoji",
    "Apple Color Emoji",
    sans-serif;
  letter-spacing: 0;
  overflow-x: hidden;
}

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

button,
label.file-button {
  border: 0;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.app-shell {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 28px 20px;
  background: #172022;
  color: #f5f4ef;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.brand-block {
  display: flex;
  gap: 14px;
  align-items: center;
}

.brand-mark {
  width: 48px;
  height: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: #203034;
  border-radius: var(--radius);
}

.brand-mark span {
  display: block;
  background: var(--accent-soft);
  border-radius: 3px;
}

.brand-mark span:nth-child(2) {
  background: #f3c15d;
}

.brand-mark span:nth-child(3) {
  background: #90cdf4;
}

.brand-mark--image {
  display: block;
  padding: 0;
  overflow: hidden;
}

.brand-mark--image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-block h1,
.topbar h2,
.section-heading h3 {
  margin: 0;
}

.brand-block h1 {
  font-size: 1.28rem;
  line-height: 1.15;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.sidebar .eyebrow {
  color: #9fb0b1;
}

.tab-list {
  display: grid;
  gap: 8px;
}

.account-panel {
  padding: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
}

.account-panel label {
  margin: 0;
  color: #dce5e2;
}

.account-panel select {
  min-height: 38px;
  color: var(--ink);
  background: #ffffff;
}

.account-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.account-actions .tiny-button {
  min-width: 0;
  color: var(--ink);
}

.danger-text {
  color: var(--red) !important;
}

.tab-button,
.ghost-button,
.danger-button,
.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 13px;
  border-radius: var(--radius);
  white-space: nowrap;
}

.tab-button {
  justify-content: flex-start;
  width: 100%;
  color: #dce5e2;
  background: transparent;
}

.sidebar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: currentColor;
  opacity: 0.9;
}

.sidebar-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.tab-button:hover,
.tab-button.is-active {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.main-area {
  min-width: 0;
  padding: 28px;
  overflow-x: hidden;
}

.version-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(180, 35, 24, 0.18);
  border-left: 4px solid var(--red);
  border-radius: var(--radius);
  background: #fff8f6;
  box-shadow: 0 8px 24px rgba(180, 35, 24, 0.08);
}

.version-alert strong,
.version-alert p {
  margin: 0;
}

.version-alert p {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.5;
}

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.topbar h2 {
  font-size: clamp(1.45rem, 2vw, 2rem);
}

.topbar-actions,
.inline-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.ghost-button,
.file-button {
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
}

.ghost-button:hover,
.file-button:hover {
  border-color: #bfc8c1;
  background: var(--panel-soft);
}

.danger-button {
  color: var(--red);
  background: #fff7f5;
  border: 1px solid #f0c8c3;
}

.primary-button {
  color: #ffffff;
  background: var(--accent);
  border: 1px solid var(--accent);
}

.primary-button:hover {
  background: var(--accent-dark);
}

.tab-panel {
  display: none;
}

.tab-panel.is-active {
  display: block;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.1fr) minmax(240px, 0.9fr);
  gap: 18px;
}

.dashboard-span {
  grid-column: 1 / -1;
}

.tag-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.tag-chips {
  display: contents;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 10px;
  border-radius: 999px;
  background: var(--accent-soft, rgba(16, 122, 87, 0.14));
  color: var(--accent, #0f7a57);
  font-size: 0.85rem;
  font-weight: 600;
}

.tag-chip button {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0 4px;
}

.tag-entry {
  flex: 1;
  min-width: 120px;
  border: none !important;
  outline: none;
  padding: 4px !important;
  background: transparent;
  font: inherit;
}

.tag-suggest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.tag-suggest-label {
  font-size: 0.78rem;
  color: var(--muted);
}

.tag-suggest-chip,
.tag-filter-chip {
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.8rem;
  cursor: pointer;
}

.tag-suggest-chip:hover,
.tag-filter-chip:hover {
  border-color: var(--accent, #0f7a57);
  color: var(--accent, #0f7a57);
}

.account-tag-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}

.tag-filter-chip.is-active {
  border-style: solid;
  border-color: var(--accent, #0f7a57);
  background: var(--accent-soft, rgba(16, 122, 87, 0.14));
  color: var(--accent, #0f7a57);
  font-weight: 600;
}

.account-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.account-age-filters {
  align-items: center;
}

.dcard-picker {
  position: relative;
}

/* Dcard 看板 + 標題分類並排（窄畫面自動換行） */
.dcard-destination {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.dcard-title-category {
  display: grid;
  gap: 5px;
  width: min(220px, 100%);
}

.dcard-title-category > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.dcard-title-category select {
  width: 100%;
}

.dcard-list {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 4px;
  max-height: 300px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.dcard-list-cat {
  position: sticky;
  top: 0;
  padding: 6px 12px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--accent-soft, rgba(16, 122, 87, 0.1));
}

.dcard-list-item {
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.9rem;
}

.dcard-list-item:hover {
  background: var(--accent-soft, rgba(16, 122, 87, 0.14));
  color: var(--accent, #0f7a57);
}

.dcard-list-empty {
  padding: 12px 14px;
  color: var(--muted);
}

.dcard-list-custom {
  padding: 9px 14px;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--accent, #0f7a57);
  font-weight: 600;
  background: var(--accent-soft, rgba(16, 122, 87, 0.08));
  border-bottom: 1px solid var(--line);
}

.dcard-list-custom:hover {
  background: var(--accent-soft, rgba(16, 122, 87, 0.18));
}

.age-range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--muted);
}

.age-range input {
  width: 64px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  font: inherit;
}

.account-filters input,
.account-filters select {
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  font: inherit;
}

.account-filters input {
  flex: 1;
  min-width: 200px;
}

.account-overview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.account-card {
  position: relative;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}

.account-card:hover {
  border-color: var(--accent, #0f7a57);
  transform: translateY(-2px);
}

.account-card.is-active {
  border-color: var(--accent, #0f7a57);
  box-shadow: 0 0 0 2px var(--accent-soft, rgba(16, 122, 87, 0.22));
}

.account-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 58px;
}

.account-card-avatar {
  width: 38px;
  height: 38px;
  font-size: 0.85rem;
  flex: 0 0 auto;
}

.account-card-title {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.account-card-title strong {
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-card-title span {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-active-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--accent, #0f7a57);
  background: var(--accent-soft, rgba(16, 122, 87, 0.14));
  font-size: 0.78rem;
  font-weight: 800;
}

.account-card-summary {
  margin: 10px 0 6px;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.account-card-note {
  margin: 0 0 10px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--accent-soft, rgba(16, 122, 87, 0.1));
  color: var(--text, #1f2937);
  font-size: 0.82rem;
  line-height: 1.45;
}

.account-card-stats {
  display: flex;
  gap: 14px;
  font-size: 0.8rem;
  color: var(--muted);
}

.account-card-stats b {
  color: var(--text, inherit);
  font-size: 0.95rem;
}

.product-guide {
  display: grid;
  gap: 4px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.feature-card {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 178px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, #fbfdfc 0%, #ffffff 70%),
    var(--panel);
}

.feature-kicker {
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--accent-dark);
  background: var(--accent-soft);
  font-size: 0.74rem;
  font-weight: 900;
}

.feature-card h4 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.35;
}

.feature-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.65;
}

.summary-panel,
.form-panel,
.list-panel,
.preview-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.summary-panel,
.form-panel,
.list-panel,
.preview-panel {
  padding: 20px;
}

.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.section-heading.compact {
  margin-bottom: 10px;
}

.section-heading h3 {
  font-size: 1.08rem;
  line-height: 1.25;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--accent-dark);
  background: var(--accent-soft);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.status-pill--error {
  color: #9f1d1d;
  background: #fdecec;
}

.status-pill--review {
  color: #9a6b00;
  background: #fdf0d5;
}

.calendar-error {
  margin-top: 6px !important;
  color: #b91c1c !important;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: pre-wrap;
}

.post-link {
  display: inline-block;
  color: var(--accent, #0f7a57) !important;
  font-weight: 700;
  font-size: 0.82rem;
  text-decoration: none;
  word-break: break-all;
}

.post-link:hover {
  text-decoration: underline;
}

.dcard-rte {
  margin: 0 0 10px;
}

.dcard-rte-head {
  font-size: 0.82rem;
  font-weight: 800;
  color: #455;
  margin-bottom: 6px;
}

.dcard-rte-body {
  min-height: 130px;
  max-height: 460px;
  overflow-y: auto;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.dcard-rte-body:focus {
  outline: none;
  border-color: var(--accent, #0f7a57);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14);
}

.dcard-rte-body:empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
}

.dcard-rte-body .rte-img {
  display: block;
  max-width: 100%;
  max-height: 320px;
  margin: 8px 0;
  border-radius: 8px;
  border: 1px solid var(--line);
}

.dcard-rte-body .rte-video {
  width: auto;
  background: #0b0d0f;
}

.profile-visual {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 14px;
  align-items: center;
  margin: 16px 0;
}

.profile-note {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-note span {
  font-size: 0.78rem;
  color: var(--muted);
}

.profile-note textarea {
  width: 100%;
  resize: vertical;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  font: inherit;
  line-height: 1.5;
}

.profile-avatar {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.95), rgba(37, 99, 235, 0.82)),
    #0f766e;
  border-radius: var(--radius);
  font-size: 1.05rem;
  font-weight: 900;
}

.profile-lines {
  display: grid;
  gap: 9px;
}

.profile-lines span {
  height: 10px;
  width: var(--w);
  background: #e2e8e3;
  border-radius: 999px;
}

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

.helper-text {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.65;
}

.llm-settings {
  border-color: #cfe2dc;
  background:
    linear-gradient(180deg, rgba(15, 118, 110, 0.035), rgba(255, 255, 255, 0)),
    var(--panel);
}

.secret-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.secret-input .tiny-button {
  min-height: 42px;
  padding-inline: 12px;
  white-space: nowrap;
}

.llm-endpoint-field {
  grid-column: 1 / -1;
}

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

.metric-card {
  min-height: 116px;
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.metric-card--clickable {
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}

/* 統計卡片用 <button> 時，清掉瀏覽器原生樣式，外觀跟 <article> 卡片一致。 */
button.metric-card {
  width: 100%;
  font: inherit;
  text-align: left;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.metric-card--clickable:hover {
  border-color: var(--accent, #0f7a57);
  transform: translateY(-2px);
}

.metric-card--clickable.is-active {
  border-color: var(--accent, #0f7a57);
  box-shadow: 0 0 0 2px var(--accent-soft, rgba(16, 122, 87, 0.25));
}

.metric-card--danger {
  border-color: #f0c2c2;
  background: #fdf3f3;
}

.metric-card--danger .metric-value {
  color: #b91c1c;
}

.metric-card--danger.metric-card--clickable:hover,
.metric-card--danger.metric-card--clickable.is-active {
  border-color: #d65151;
  box-shadow: 0 0 0 2px #fdecec;
}

.metric-value {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  line-height: 1;
}

.metric-label {
  color: var(--muted);
  font-weight: 700;
}

.insight-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.insight-list li {
  padding: 12px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  line-height: 1.55;
}

.workflow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.workflow span {
  display: grid;
  place-items: center;
  min-height: 54px;
  padding: 8px;
  color: #173332;
  background: #e6f2ef;
  border: 1px solid #c8e5df;
  border-radius: var(--radius);
  font-size: 0.88rem;
  font-weight: 800;
  text-align: center;
}

.editor-grid,
.workspace-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.95fr) minmax(360px, 1.05fr);
  gap: 18px;
  min-width: 0;
}

.generator-layout {
  display: grid;
  grid-template-columns: minmax(360px, 0.92fr) minmax(460px, 1.08fr);
  gap: 18px;
  align-items: stretch;
  min-width: 0;
}

.generator-layout > *,
.stacked-panels,
.preview-panel {
  min-width: 0;
}

.persona-layout {
  display: grid;
  grid-template-columns: minmax(540px, 1.05fr) minmax(380px, 0.95fr);
  gap: 18px;
  align-items: start;
}

.persona-editor-panel {
  padding: 22px;
}

.persona-layout label {
  align-content: start;
  margin-bottom: 0;
}

.persona-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.children-genders {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.child-gender-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 10px;
}

.child-gender-row > span {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.children-genders-hint {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.5;
}

.persona-field-wide {
  grid-column: 1 / -1;
}

.persona-text-grid {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.persona-layout .tag-field {
  align-items: flex-start;
  min-height: 66px;
}

.persona-layout .tag-entry {
  min-width: 150px;
  line-height: 1.45;
}

.persona-side-panel {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 18px;
}

.persona-profile-card {
  padding: 20px;
  background:
    linear-gradient(180deg, #fffdf8 0%, #ffffff 58%),
    var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.persona-profile-head {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}

.persona-profile-head h3 {
  margin: 0;
  font-size: 1.18rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.persona-preview-avatar {
  width: 76px;
  height: 76px;
}

.persona-preview-group {
  display: grid;
  gap: 8px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}

.persona-preview-label,
.persona-readable span,
.persona-fact-grid span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.persona-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 28px;
}

.persona-preview-chip,
.persona-muted-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
}

.persona-preview-chip {
  color: #0b554f;
  background: #d9efea;
}

.persona-muted-chip {
  color: var(--muted);
  background: var(--panel-soft);
  border: 1px dashed var(--line);
}

.persona-fact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.persona-fact-grid div {
  display: grid;
  gap: 4px;
}

.persona-fact-grid strong {
  color: var(--ink);
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.persona-readable {
  display: grid;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.persona-readable + .persona-readable {
  margin-top: 14px;
}

.persona-readable p {
  margin: 0;
  color: #334044;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.persona-tone-panel {
  padding: 20px;
}

.persona-tone-panel textarea {
  min-height: 320px;
}

/* ===== 人設頁現代化（persona2）：卡片分區 + hero + 完成度 + sticky 預覽 ===== */
.persona2 {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.persona2-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 22px 24px;
  background:
    linear-gradient(180deg, var(--accent-soft) 0%, var(--panel) 72%),
    var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}

.persona2-hero-text {
  flex: 1 1 320px;
  min-width: 0;
}

.persona2-hero-text h2 {
  margin: 3px 0 6px;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

.persona2-hero-text p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 60ch;
}

.persona2-hero-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.persona2-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 150px;
}

.persona2-progress-text {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}

.persona2-progress-text b {
  color: var(--accent);
  font-size: 0.86rem;
}

.persona2-progress {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: #e2eae7;
  overflow: hidden;
}

.persona2-progress-bar {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), #16a99a);
  transition: width 0.3s ease;
}

.persona2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 18px;
  align-items: start;
}

.persona2-main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  min-width: 0;
}

/* 佔整排的卡（欄位較多的身份設定） */
.persona2-card--wide {
  grid-column: 1 / -1;
}

.persona2-card {
  padding: 20px 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(29, 37, 41, 0.04);
}

.persona2-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.persona2-card-head h3 {
  margin: 0;
  font-size: 1.06rem;
}

.persona2-card-head p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.persona2-card-head .status-pill {
  margin-left: auto;
}

.persona2-side {
  position: sticky;
  top: 24px;
}

.persona2 .tag-field {
  align-items: flex-start;
  min-height: 66px;
}

.persona2 .tag-entry {
  min-width: 150px;
  line-height: 1.45;
}

.persona2 .persona-text-grid {
  margin-top: 0;
}

/* 目標受眾 + 語氣範本：移到整個版面最下方、橫跨整頁寬，避免右側預覽下方一大塊空白 */
.persona2-bottom {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

/* 語氣範本：整排大區塊，textarea 放高一點，方便一次貼好幾篇 */
.persona-tone-label {
  display: block;
}
.persona2-card--tone textarea {
  width: 100%;
  min-height: 320px;
  line-height: 1.6;
  resize: vertical;
}

@media (max-width: 1080px) {
  .persona2-grid,
  .persona2-main {
    grid-template-columns: 1fr;
  }
  .persona2-side {
    position: static;
  }
}

.stacked-panels {
  display: grid;
  align-content: start;
  gap: 18px;
}

.generator-layout .stacked-panels {
  align-content: stretch;
}

.generator-layout .preview-panel {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 150px);
}

.generator-layout .preview-panel .section-heading {
  flex: 0 0 auto;
}

.generator-layout .material-picker {
  grid-column: 1 / -1;
}

.generator-layout .material-list {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  max-height: min(46vh, 520px);
  gap: 10px;
}

/* 產文頁微調：讓「AI 草稿預覽」成為視覺主角，表單區更有層次 */
.generator-layout .preview-panel {
  border-top: 3px solid var(--accent);
}

.generator-layout .form-panel {
  padding: 22px;
}

/* 表單填滿左欄高度，讓左右兩塊一樣長；多出來的空間給「額外指令」 */
.generator-layout #generatorForm {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.generator-layout #generatorForm .form-grid {
  flex: 0 0 auto;
  padding: 14px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 16px;
}

.generator-layout #generatorForm .form-grid label {
  margin-bottom: 0;
}

.generator-layout #generatorForm > label {
  flex: 0 0 auto;
  margin-bottom: 14px;
}

.generator-layout #generatorForm > label:has(#generatorBrief) {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 16px;
}

.generator-layout #generatorForm #generatorBrief {
  flex: 1 1 auto;
  min-height: 120px;
  resize: vertical;
}

.generator-layout .material-picker {
  border-top: 3px solid var(--accent-soft);
}

/* ===== 產文頁：標頭 + 單篇/自動計畫 分段切換 ===== */
.gen-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.gen-head--switch-only {
  justify-content: flex-start;
  margin-bottom: 14px;
}

.gen-head h2 {
  margin: 2px 0 5px;
  font-size: 1.55rem;
  letter-spacing: -0.01em;
}

.gen-head-sub {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0;
  max-width: 60ch;
}

.gen-head-sub strong {
  color: var(--accent);
  font-weight: 700;
}

.gen-mode-switch {
  display: inline-flex;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 5px;
  gap: 5px;
}

.gen-mode {
  border: 0;
  background: transparent;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.gen-mode:hover {
  color: var(--ink);
}

.gen-mode.is-active {
  background: var(--panel);
  color: var(--accent);
  box-shadow: var(--shadow);
}

/* 單篇表單頂列：標籤 + 用量 + 產生按鈕 */
.gen-form-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.gen-form-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.gen-form-tag {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.gen-form-topbar .usage-badge {
  margin: 0;
}

/* 依模式切換顯示的表單／右側預覽 */
#generatorPanel.gen-mode-single #autoPlanForm {
  display: none;
}

#generatorPanel.gen-mode-auto #generatorForm,
#generatorPanel.gen-mode-auto .preview-panel,
#generatorPanel.gen-mode-auto .material-picker {
  display: none;
}

/* 自動計畫模式：表單獨占整排，右側預覽收起 */
#generatorPanel.gen-mode-auto .generator-layout {
  grid-template-columns: minmax(0, 1fr);
}

#generatorPanel.gen-mode-auto .stacked-panels {
  grid-column: 1 / -1;
}

.auto-plan-panel {
  border-top: 3px solid var(--accent);
  background:
    linear-gradient(180deg, #fbfffd 0%, #ffffff 62%),
    var(--panel);
}

.auto-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.auto-plan-platforms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 2px 0 14px;
}

.auto-plan-platforms label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  color: #344247;
  cursor: pointer;
}

.auto-plan-platforms input {
  width: 16px;
  min-height: 16px;
}

.auto-plan-platforms label:has(input:checked) {
  border-color: var(--accent);
  background: #dff3ef;
  color: #075f58;
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.12);
}

.auto-plan-personas-block {
  margin: 6px 0 14px;
}

.auto-plan-personas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.auto-plan-personas-tools {
  display: flex;
  gap: 6px;
}

.auto-plan-personas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 6px 0 0;
}

.auto-plan-personas label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  color: #344247;
  cursor: pointer;
}

.auto-plan-personas input {
  width: 16px;
  min-height: 16px;
}

.auto-plan-personas label:has(input:checked) {
  border-color: var(--accent);
  background: #dff3ef;
  color: #075f58;
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.12);
}

.auto-plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  margin: 4px 0 14px;
}

.full-button {
  width: 100%;
  justify-content: center;
}

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

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

.word-range-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.word-range-inputs span {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
}

label {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
  color: #263034;
  font-size: 0.9rem;
  font-weight: 800;
}

[hidden] {
  display: none !important;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--ink);
  padding: 11px 12px;
  outline: none;
  min-height: 42px;
}

textarea {
  resize: vertical;
  line-height: 1.65;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14);
}

.check-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  width: fit-content;
  cursor: pointer;
}

.check-row input {
  width: 18px;
  height: 18px;
  min-height: auto;
}

.item-list,
.draft-board {
  display: grid;
  gap: 12px;
}

.item-card,
.draft-card {
  padding: 14px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.item-card header,
.draft-card header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.item-card h4,
.draft-card h4 {
  margin: 0;
  font-size: 0.98rem;
}

.item-card p,
.draft-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

/* 圖片區（FB / Threads：可多張，縮圖呈現） */
.draft-images {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
}

.draft-images-label {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 700;
}

.draft-image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.draft-image-thumb {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #f3f5f5;
}

.draft-image-thumb .draft-thumb-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0b0d0f;
}

/* 影片縮圖中央的播放標記 */
.draft-thumb-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: rgba(20, 24, 28, 0.55);
  color: #ffffff;
  font-size: 0.8rem;
  padding-left: 2px;
  pointer-events: none;
}

/* 縮圖右上角的移除（✕）鈕 */
.draft-image-del {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  display: grid;
  place-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(20, 24, 28, 0.62);
  color: #ffffff;
  font-size: 0.78rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}

.draft-image-del:hover {
  background: #c23b3b;
}

/* 新增圖片：虛線方塊，跟縮圖等大 */
.draft-image-add {
  width: 96px;
  height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1.5px dashed var(--line);
  border-radius: 10px;
  background: #fbfcfc;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.draft-image-add:hover {
  border-color: var(--accent, #0f7a57);
  color: var(--accent, #0f7a57);
  background: var(--accent-soft, rgba(16, 122, 87, 0.1));
}

.draft-image-add:disabled {
  opacity: 0.55;
  cursor: default;
}

.draft-image-add-plus {
  font-size: 1.3rem;
  line-height: 1;
}

/* 單段串文的圖片／影片：比主貼文那塊小一號，縮圖與「＋」鈕都用 64px */
.threads-reply-media {
  margin: 6px 0 0;
}

.threads-reply-media .draft-image-grid {
  gap: 8px;
}

.threads-reply-media .draft-image-thumb {
  width: 64px;
  height: 64px;
}

.threads-reply-media .draft-image-del {
  width: 18px;
  height: 18px;
  font-size: 0.68rem;
}

.threads-reply-media .threads-reply-media-add {
  width: 64px;
  height: 64px;
  font-size: 0.66rem;
  gap: 1px;
}

.threads-reply-media .threads-reply-media-add .draft-image-add-plus {
  font-size: 1.1rem;
}

.platform-tag {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--accent-soft, rgba(16, 122, 87, 0.12));
  color: var(--accent, #0f7a57);
  font-weight: 600;
  font-size: 0.82rem;
}

.platform-select {
  min-height: 0;
  width: auto;
  display: inline-block;
  padding: 2px 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent, #0f7a57);
  border-radius: 7px;
  vertical-align: middle;
}

.draft-char-count {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.draft-board-picker {
  display: grid;
  gap: 5px;
  width: min(420px, 100%);
  margin-top: 8px;
}

.draft-board-picker.fb-destination-picker {
  width: min(680px, 100%);
  gap: 6px;
}

/* Threads「社群或主題」：放在內文上方，跟內文貼齊（不再塞標頭、不留大空白）。 */
.threads-topic-field {
  display: grid;
  gap: 5px;
  width: min(680px, 100%);
  margin-top: 0;
}

.threads-topic-field > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.threads-topic-field input {
  width: 100%;
}

/* 內文框與「社群或主題」之間，比照各平台統一的 10px 間距。 */
.draft-card textarea.threads-content {
  margin-top: 10px;
}

/* 串文區（放在內文下方、圖片上方） */
.threads-replies-block {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

.threads-replies-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-height: 32px;
}

.threads-add-reply {
  color: var(--accent-dark);
  background: var(--accent-soft);
  border: 1px solid rgba(15, 118, 110, 0.28);
  border-radius: 999px;
  padding: 4px 13px;
  font-size: 0.82rem;
  font-weight: 700;
}

.threads-add-reply:hover {
  background: #cdeae4;
  border-color: rgba(15, 118, 110, 0.45);
}

.threads-add-hint {
  color: var(--muted);
  font-size: 0.78rem;
}

.threads-reply-list {
  display: grid;
  gap: 8px;
}

.threads-reply-field {
  display: grid;
  gap: 4px;
}

.threads-reply-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.threads-reply-field-head > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

/* 每段串文的刪除（✕）鈕 */
.threads-reply-remove {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.threads-reply-remove:hover {
  background: #fdecec;
  border-color: rgba(214, 69, 69, 0.5);
  color: #c23b3b;
}

/* 蓋掉 .draft-card textarea 的 180px/margin-top:12px，讓串文框比內文小、無多餘上緣。 */
.draft-card .threads-reply-field textarea {
  min-height: 88px;
  margin-top: 0;
  padding: 8px 10px;
  font-size: 0.9rem;
  line-height: 1.5;
  resize: vertical;
}

.draft-board-picker span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.draft-board-picker input,
.draft-board-picker select,
.draft-board-picker textarea {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 0.9rem;
}

.draft-board-picker textarea {
  min-height: 68px;
  resize: vertical;
}

/* 置頂打勾框：放在串文區標頭列右側；只有「框 + 字」可點（width: fit-content）。 */
.threads-replies-block .threads-pin-check {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  min-height: 38px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  user-select: none;
}

.threads-pin-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.threads-pin-check input[type="checkbox"]::before {
  content: "";
  width: 12px;
  height: 12px;
  transform: scale(0);
  transition: transform 0.15s ease;
  background: #ffffff;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.threads-pin-check input[type="checkbox"]:hover {
  border-color: var(--accent);
}

.threads-pin-check input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.threads-pin-check input[type="checkbox"]:checked::before {
  transform: scale(1);
}

/* 置頂勾選字：跟「內容加入 Emoji」勾選字一致（0.9rem/800/深色）。 */
.threads-replies-block .threads-pin-check span {
  color: #263034;
  font-size: 0.9rem;
  font-weight: 800;
}


.draft-board-picker em,
.threads-replies-hint {
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
  line-height: 1.45;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  color: #284245;
  background: #eaf0ee;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
}

.field-label {
  display: inline-block;
  margin-bottom: 7px;
  color: var(--ink);
  font-weight: 700;
}

.knowledge-media-box {
  display: grid;
  gap: 12px;
  margin-top: 6px;
  padding: 14px;
  background: #f7fbf9;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.knowledge-media-grid {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.2fr);
  gap: 14px;
  align-items: start;
}

.knowledge-image-preview {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 180px;
  overflow: hidden;
  color: var(--muted);
  background: #ffffff;
  border: 1px dashed #cfdcd6;
  border-radius: 10px;
  font-size: 13px;
}

.knowledge-image-preview img,
.knowledge-image-preview video {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.knowledge-image-preview.is-empty {
  padding: 18px;
}

.knowledge-media-fields {
  display: grid;
  gap: 12px;
}

.mini-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mini-check-grid label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 9px 10px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 700;
}

.mini-check-grid input {
  width: 16px;
  min-height: 16px;
}

.knowledge-card-media {
  position: relative;
  overflow: hidden;
  margin: 10px 0 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f6faf8;
}

.knowledge-card-media img,
.knowledge-card-media video {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  display: block;
}

.knowledge-card-media span {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 4px 9px;
  color: #075f58;
  background: rgba(223, 243, 239, 0.92);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.tiny-button {
  min-height: 30px;
  padding: 5px 9px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.tiny-button:hover {
  border-color: #b8c5bd;
}

.tiny-button--danger {
  color: #b91c1c;
  border-color: #f0c2c2;
}

.tiny-button--danger:hover {
  border-color: #d65151;
  background: #fdf3f3;
}

/* 產文「參考素材」調度台 */
.material-picker {
  overflow: visible;
}

.material-picker .section-heading {
  margin-bottom: 12px;
}

.material-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.material-toolbar #materialTagFilter {
  width: 100%;
}

.material-toolbar .tiny-button {
  min-height: 42px;
  padding-inline: 12px;
  white-space: nowrap;
}

.material-tag-rail {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 1px 0 10px;
  scrollbar-width: thin;
}

.material-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 5px 9px;
  color: #365052;
  background: #f4f7f5;
  border: 1px solid #dce5df;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.material-tag span {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  color: #315b72;
  background: #e7f1f5;
  border-radius: 999px;
  font-size: 0.7rem;
}

.material-tag:hover,
.material-tag.is-active {
  color: #0f766e;
  background: #edf8f5;
  border-color: #a7d8ce;
}

.material-list {
  display: grid;
  gap: 8px;
  max-height: min(42vh, 430px);
  overflow-y: auto;
  padding-right: 3px;
  /* 內捲清單的溢出列在窄視窗(如螢幕 150% 縮放)下會漏進整份文件的可捲高度，
     在素材卡下方撐出一塊空白；contain: paint 把溢出框死在自己的格子裡。 */
  contain: paint;
}

.material-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 0;
  padding: 11px 12px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid #dfe7e2;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 400;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.1s;
}

.material-item:hover {
  border-color: #b8cac2;
  background: #fbfdfc;
  transform: translateY(-1px);
}

.material-item.is-selected {
  border-color: #7cc5b8;
  background: #f1fbf8;
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.1);
}

.material-item input[type="checkbox"] {
  position: absolute;
  width: 20px;
  height: 20px;
  min-height: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.material-check {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 2px solid #b7c6be;
  border-radius: 6px;
  background: #ffffff;
}

.material-item.is-selected .material-check {
  display: grid;
  place-items: center;
  border-color: var(--accent);
  background: var(--accent);
}

.material-item.is-selected .material-check::after {
  content: "✓";
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
}

.material-content {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.material-thumb {
  width: 100%;
  height: 96px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f5f8f6;
}

.material-thumb img,
.material-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.material-line {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.material-line strong {
  min-width: 0;
  color: #162629;
  font-size: 0.92rem;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-line em {
  flex: 0 0 auto;
  padding: 2px 7px;
  color: #4c5565;
  background: #eef2f7;
  border-radius: 999px;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

.material-excerpt {
  color: #607174;
  font-size: 0.82rem;
  line-height: 1.45;
}

.material-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.material-tags span {
  padding: 2px 7px;
  color: #0f766e;
  background: rgba(15, 118, 110, 0.08);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}

.material-empty {
  border-style: dashed;
}

/* 確保 hidden 屬性一定生效（即使元素本身有 display 規則） */
[hidden] {
  display: none !important;
}

/* 每頁頂部的使用流程提示 */
.page-hint {
  margin: 0 0 16px;
  padding: 10px 14px;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 7px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.6;
}

.guide-card {
  margin: 0 0 18px;
  padding: 16px 18px;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 9px;
  color: var(--ink);
}

.guide-card--collapsible {
  padding: 0;
  overflow: hidden;
}

.guide-card-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  cursor: pointer;
  user-select: none;
  font-size: 15px;
  font-weight: 700;
}

.guide-card-summary::-webkit-details-marker {
  display: none;
}

.guide-card-summary::after {
  content: "▾";
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 14px;
  transition: transform 0.2s ease;
}

.guide-card--collapsible[open] .guide-card-summary::after {
  transform: rotate(180deg);
}

.guide-card-summary-text {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.guide-card--collapsible .when-open {
  display: none;
}

.guide-card--collapsible[open] .when-open {
  display: inline;
}

.guide-card--collapsible[open] .when-closed {
  display: none;
}

.guide-card-body {
  padding: 0 18px 16px;
  border-top: 1px solid rgba(17, 24, 39, 0.06);
}

.guide-card h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.guide-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
}

.guide-list {
  margin: 10px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.guide-list li {
  font-size: 13px;
  line-height: 1.7;
}

/* 標為可發布：主要動作，綠色強調 */
.tiny-button--go {
  color: var(--accent);
  border-color: var(--accent-soft);
  font-weight: 600;
}

.tiny-button--go:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

#draftOutput {
  flex: 1 1 auto;
  min-height: 430px;
}

.generator-layout #draftOutput {
  min-height: min(52vh, 620px);
}

.publish-settings {
  margin-bottom: 16px;
  padding: 16px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.publish-settings .check-row {
  margin-top: 2px;
}

.publish-binding-card {
  margin-bottom: 16px;
  padding: 16px;
  background:
    linear-gradient(180deg, #fbfdfc 0%, #ffffff 100%),
    var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}

.publish-auto-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.publish-auto-row > span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.publish-auto-row strong {
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.35;
}

.publish-auto-toggle {
  gap: 8px;
}

.publish-auto-toggle input:disabled + strong {
  color: var(--muted);
}

.retrieval-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.retrieval-list {
  display: grid;
  gap: 8px;
}

.retrieval-item {
  display: grid;
  gap: 7px;
  padding: 12px;
  background: #fbfdfc;
  border: 1px solid #d9e7e1;
  border-radius: 8px;
}

.retrieval-head {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
}

.retrieval-head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #162629;
  font-size: 0.92rem;
}

.retrieval-head span {
  flex: 0 0 auto;
  padding: 2px 7px;
  color: #315b72;
  background: #e7f1f5;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}

.retrieval-item p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

.retrieval-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.retrieval-tags span {
  padding: 2px 7px;
  color: #0f766e;
  background: rgba(15, 118, 110, 0.08);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}

.full-width {
  width: 100%;
}

.draft-card textarea {
  min-height: 180px;
  /* 內文框與上方目的地選擇（FB 社團 / Threads 主題…）統一只留標頭的 10px 間距，
     不再自帶上邊距，避免各平台中間出現大空白。 */
  margin-top: 0;
}

.draft-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.schedule-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 8px;
  margin-top: 12px;
  align-items: center;
}

.schedule-meta {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.86rem;
}

.calendar-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.calendar-board {
  display: grid;
  gap: 12px;
}

.calendar-day {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.calendar-day header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.calendar-items {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.calendar-item {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.calendar-time {
  color: var(--accent-dark);
  font-weight: 900;
}

.calendar-time small {
  display: block;
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--muted);
}

.calendar-content {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
}

.calendar-content.expanded {
  display: block;
  -webkit-line-clamp: unset;
}

.calendar-expand {
  border: none;
  background: transparent;
  color: var(--accent, #0f7a57);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 2px 0;
}

.calendar-item h4 {
  margin: 0 0 5px;
}

.calendar-item p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.calendar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.record-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.record-heading-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* 刷新審核狀態：小一顆但用暖色強調，明顯但不喧賓奪主。 */
.tiny-button--review {
  font-weight: 600;
  color: #8a5d00;
  border-color: #e7c97a;
  background: #fdf3da;
}

.tiny-button--review:hover:not(:disabled) {
  border-color: #d9b24f;
  background: #fbecc4;
}

.record-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

/* 素材庫清單工具列：只剩搜尋框，佔滿整列 */
.knowledge-toolbar {
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 10px;
}

.record-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.record-filters .tiny-button.is-active {
  color: var(--accent-dark);
  border-color: rgba(15, 118, 110, 0.35);
  background: rgba(15, 118, 110, 0.12);
}

.record-board {
  display: grid;
  gap: 12px;
}

.record-day {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.record-day header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.record-items {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.record-item {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.record-item--failed {
  border-color: #f0c2ba;
  background: #fffafa;
}

/* 發布中：即時回饋（黃色脈動），完成後會被改寫成已發布/失敗 */
.record-item--publishing {
  border-color: #f0d9a8;
  background: #fffdf5;
}

.status-pill--publishing {
  color: #8a5a00;
  background: #fde6c0;
  animation: record-pulse 1.3s ease-in-out infinite;
}

@keyframes record-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.record-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #e7d6a8;
  border-top-color: #b7791f;
  border-radius: 50%;
  display: inline-block;
  animation: record-spin 0.8s linear infinite;
}

@keyframes record-spin {
  to { transform: rotate(360deg); }
}

.record-time {
  display: grid;
  gap: 4px;
  color: var(--accent-dark);
}

.record-time strong {
  font-size: 1rem;
}

.record-time span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

/* 紀錄頁平台標：做成跟互動頁一樣的彩色藥丸標（選擇器帶 .record-time 祖先，蓋過上面的灰字規則）。 */
.record-time .record-platform {
  justify-self: start;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
  background: var(--muted, #7b8a86);
  white-space: nowrap;
}
.record-time .record-platform.platform-facebook { background: #1877f2; }
.record-time .record-platform.platform-threads { background: #000; }
.record-time .record-platform.platform-dcard { background: #006aa6; }
.record-time .record-platform.platform-mobile01 { background: #e57000; }
.record-time .record-platform.platform-instagram { background: #c13584; }

.record-main {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.record-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.record-head h4 {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-content {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
}

.record-content.expanded {
  display: block;
  -webkit-line-clamp: unset;
}

/* 展開全文：靠左、加大點擊區（不再被 grid 拉成整行而置中） */
.record-main .calendar-expand {
  justify-self: start;
  margin: 2px 0;
  padding: 4px 10px;
  border-radius: 6px;
  text-align: left;
}

.record-main .calendar-expand:hover {
  background: var(--accent-soft);
}

.record-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.tiny-button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  max-width: min(420px, calc(100vw - 44px));
  padding: 12px 14px;
  color: #ffffff;
  background: #1d2529;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transform: translateY(16px);
  opacity: 0;
  pointer-events: none;
  transition: 160ms ease;
}

.toast.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.empty-state {
  padding: 24px;
  color: var(--muted);
  background: var(--panel-soft);
  border: 1px dashed #bcc6bf;
  border-radius: var(--radius);
  line-height: 1.7;
}

@media (max-width: 1120px) {
  .app-shell {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .dashboard-grid,
  .editor-grid,
  .generator-layout,
  .persona-layout,
  .workspace-grid {
    grid-template-columns: 1fr;
  }

  .generator-layout .preview-panel,
  .persona-side-panel {
    position: static;
  }

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

@media (max-width: 760px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    position: static;
    height: auto;
    padding: 18px;
  }

  .tab-list {
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 6px;
  }

  .tab-button {
    justify-content: center;
    padding: 8px 6px;
    font-size: 0.86rem;
  }

  .main-area {
    padding: 18px;
  }

  .topbar {
    display: grid;
  }

  .topbar-actions {
    width: 100%;
  }

  .topbar-actions > * {
    flex: 1 1 auto;
  }

  .material-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .material-toolbar #materialTagFilter {
    grid-column: 1 / -1;
  }

  .two-columns,
  .auto-plan-grid,
  .auto-plan-platforms,
  .auto-plan-personas,
  .knowledge-media-grid,
  .persona-form-grid,
  .metric-strip,
  .workflow,
  .calendar-strip,
  .record-stats,
  .feature-grid {
    grid-template-columns: 1fr;
  }

  .persona-profile-head,
  .persona-fact-grid {
    grid-template-columns: 1fr;
  }

  .schedule-row,
  .calendar-item,
  .record-toolbar,
  .record-item {
    grid-template-columns: 1fr;
  }

  .calendar-actions,
  .record-actions,
  .record-filters {
    justify-content: flex-start;
  }

  .section-heading {
    display: grid;
  }

  .inline-actions {
    width: 100%;
  }

  .inline-actions > * {
    flex: 1 1 auto;
  }
}

/* --- 登入 / 註冊覆蓋層 --- */
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(245, 244, 239, 0.96), rgba(245, 244, 239, 1)),
    repeating-linear-gradient(90deg, rgba(15, 118, 110, 0.05) 0 1px, transparent 1px 64px);
}

.auth-overlay[hidden] {
  display: none;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.auth-brand h1 {
  margin: 2px 0 0;
  font-size: 22px;
}

.auth-sub {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.auth-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

.auth-card input {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 15px;
  background: var(--panel-soft);
}

.auth-card input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--panel);
}

.auth-card .primary-button {
  margin-top: 4px;
  justify-content: center;
}

.auth-error {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--radius);
  background: rgba(180, 35, 24, 0.08);
  border: 1px solid rgba(180, 35, 24, 0.25);
  color: var(--red);
  font-size: 13px;
}

.auth-switch {
  margin: 2px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

.link-button {
  border: none;
  background: none;
  padding: 0;
  color: var(--accent);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.link-button:hover {
  text-decoration: underline;
}

.user-chip {
  align-self: center;
  font-size: 12px;
  color: var(--muted);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- 管理者頁 --- */
/* === 管理頁 ============================================================= */
/* 兩欄儀表板：左邊放主內容（AI 設定、帳號清單），右邊放操作（新增、備份） */
.admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.admin-main,
.admin-side {
  display: grid;
  gap: 18px;
  align-content: start;
  min-width: 0;
}

.admin-layout .form-panel {
  border-top: 3px solid var(--accent);
}

.admin-user-list,
.admin-backup-list,
.admin-audit-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.admin-audit-list {
  max-height: 430px;
  overflow: auto;
  padding-right: 4px;
}

.admin-audit-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(140px, 0.8fr) minmax(0, 1.4fr);
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  background: #f6faf8;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.admin-audit-toolbar label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.admin-audit-toolbar select,
.admin-audit-toolbar input {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
}

.admin-audit-toolbar input::placeholder {
  color: #97a29e;
}

.admin-user-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}

.admin-user-row:hover {
  border-color: #cfdcd6;
  box-shadow: 0 6px 18px rgba(29, 37, 41, 0.06);
  transform: translateY(-1px);
}

.admin-user-row.is-admin {
  background:
    linear-gradient(180deg, rgba(15, 118, 110, 0.05), rgba(15, 118, 110, 0)),
    var(--panel-soft);
  border-color: #bfe0d8;
}

.admin-monogram {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-monogram.is-admin {
  background: linear-gradient(135deg, #0f766e, #0b554f);
  color: #ffffff;
}

.admin-user-main,
.admin-backup-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.admin-user-main strong,
.admin-backup-main strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.95rem;
  word-break: break-all;
}

.admin-user-meta {
  font-size: 12px;
  color: var(--muted);
}

.admin-role-pill {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 800;
}

.admin-self-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 9px;
  border-radius: 999px;
  background: #eef1f0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.admin-owner-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 9px;
  border-radius: 999px;
  background: #fdf0d5;
  color: #9a6b00;
  font-size: 11px;
  font-weight: 700;
}

.admin-bind-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 9px;
  border-radius: 999px;
  background: #fff6e4;
  color: #8a5a12;
  font-size: 11px;
  font-weight: 800;
}

.admin-bind-tag.is-bound {
  background: #dcefeb;
  color: var(--accent-dark);
}

.admin-bind-tag.is-over {
  background: #fde2e2;
  color: #b3261e;
}

/* 草稿產生器上的「本月 AI 產文」用量徽章 */
.usage-badge {
  margin: 6px 0 0;
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: #eef2f1;
  color: var(--muted, #5b6b66);
  font-size: 12px;
  font-weight: 700;
}

.usage-badge.is-near {
  background: #fff3da;
  color: #8a5a12;
}

.usage-badge.is-over {
  background: #fde2e2;
  color: #b3261e;
}

.admin-user-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-binding-panel select:disabled,
.admin-binding-panel input:disabled {
  color: var(--muted);
  background: #f3f5f4;
}

.admin-backup-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 0.15s;
}

.admin-backup-row:hover {
  border-color: #cfdcd6;
}

.admin-backup-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #eef3f1;
  color: var(--accent);
  font-size: 1rem;
}

.admin-backup-main strong {
  font-family: "Cascadia Code", "Consolas", ui-monospace, monospace;
  font-size: 0.86rem;
  font-weight: 700;
}

.admin-audit-row {
  padding: 11px 13px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
}

.admin-audit-row.is-error {
  border-left-color: #d55342;
  background: #fff7f5;
}

.admin-audit-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-audit-main strong {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.92rem;
}

.admin-audit-main strong span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.admin-audit-main p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  word-break: break-word;
}

.empty-hint {
  margin: 14px 0 0;
  padding: 18px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  background: var(--panel-soft);
  border: 1px dashed var(--line);
  border-radius: 10px;
}

/* ===== 管理後台 v2（總覽 + 分頁） ===== */
.admin2-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.admin2-head .eyebrow {
  margin: 0 0 4px;
}
.admin2-title {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}
.admin2-sub {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  max-width: 560px;
}

.admin2-stats {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(96px, 1fr));
  gap: 12px;
}
.admin2-stat {
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  min-width: 108px;
  box-shadow: 0 1px 2px rgba(29, 37, 41, 0.03);
}
.admin2-stat .num {
  display: block;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.1;
}
.admin2-stat .label {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.admin2-stat.is-alert {
  background: linear-gradient(180deg, #fff7e8, #fffdf8);
  border-color: #f0d59a;
}
.admin2-stat.is-alert .num,
.admin2-stat.is-alert .label {
  color: #9a6b00;
}

.admin2-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 20px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}
.admin2-tab {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 9px 18px;
  border-radius: 9px;
  font: inherit;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--muted);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s, color 0.15s;
}
.admin2-tab:hover {
  color: var(--accent-dark);
}
.admin2-tab.is-active {
  background: var(--panel);
  color: var(--accent-dark);
  box-shadow: 0 1px 3px rgba(29, 37, 41, 0.1);
}
.admin2-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  background: #f0d59a;
  color: #7a5400;
}
.admin2-tab-badge[hidden] {
  display: none;
}

.admin2-tabbody {
  display: none;
  gap: 18px;
}
.admin2-tabbody.is-active {
  display: grid;
  align-content: start;
}
.admin2-tabbody .form-panel {
  border-top: 3px solid var(--accent);
}

.admin2-listhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.admin2-search {
  position: relative;
  flex: 1 1 260px;
  max-width: 380px;
}
.admin2-search input {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  font: inherit;
  color: var(--ink);
}
.admin2-search::before {
  content: "🔍";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  opacity: 0.5;
  pointer-events: none;
}
.admin2-listhead-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.admin2-seg {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 9px;
}
.admin2-seg button {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  padding: 5px 12px;
  border-radius: 6px;
}
.admin2-seg button.on {
  background: var(--panel);
  color: var(--accent-dark);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.admin2-seg-cnt {
  margin-left: 5px;
  opacity: 0.85;
}
.admin2-seg-cnt:empty {
  display: none;
}

@media (max-width: 1024px) {
  .admin-layout {
    grid-template-columns: 1fr;
  }

  .admin-audit-toolbar {
    grid-template-columns: 1fr;
  }

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

/* ===== 互動 / 留言收件匣 ===== */
.form-divider {
  border: none;
  border-top: 1px solid var(--accent-soft, #d9efea);
  margin: 18px 0 14px;
}

.nav-badge {
  margin-left: auto;
  min-width: 18px;
  padding: 0 6px;
  border-radius: 10px;
  background: #e0245e;
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  font-weight: 700;
}

/* 總覽分頁「有新更新」小紅點 */
.nav-dot {
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e0245e;
  flex: 0 0 auto;
}

/* 更新日誌卡片（總覽頁） */
.changelog-card .changelog-list {
  display: grid;
  gap: 14px;
}
.changelog-entry {
  display: grid;
  gap: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--accent-soft, #d9efea);
}
.changelog-entry:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.changelog-entry-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.changelog-date {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-dark, #0b554f);
}
.changelog-new {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #fff;
  background: #e0245e;
  border-radius: 999px;
  padding: 2px 7px;
}
.changelog-items {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.changelog-items li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink, #1f2a2a);
}
.changelog-items li .changelog-emoji {
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 1.5;
}

.empty-hint {
  padding: 24px;
  text-align: center;
  color: var(--muted, #7b8a86);
  background: var(--panel-soft, rgba(0, 0, 0, 0.02));
  border: 1px dashed var(--border, rgba(0, 0, 0, 0.12));
  border-radius: 12px;
}

.comment-board {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.comments-last-refresh {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.comment-hint-inline {
  font-size: 12px;
  color: var(--muted);
  margin-left: 8px;
}

.comment-group {
  border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel, #fff);
}

.comment-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--accent-soft, rgba(16, 122, 87, 0.1));
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.08));
}

.comment-group-platform {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
  background: var(--muted, #7b8a86);
  white-space: nowrap;
}

.comment-group-platform.platform-facebook { background: #1877f2; }
.comment-group-platform.platform-threads { background: #000; }
.comment-group-platform.platform-dcard { background: #006aa6; }
.comment-group-platform.platform-mobile01 { background: #e57000; }
.comment-group-platform.platform-instagram { background: #c13584; }

.comment-group-title {
  font-weight: 700;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comment-open {
  font-size: 13px;
  color: var(--accent-dark, #0b6b4f);
  text-decoration: none;
}

.comment-open:hover {
  text-decoration: underline;
}

.comment-group-count {
  font-size: 12px;
  color: var(--muted, #7b8a86);
}

.comment-group-body {
  padding: 12px 14px;
  max-height: 420px;
  overflow: auto;
  word-break: break-word;
  line-height: 1.6;
  color: var(--muted-strong, #4a5650);
  background: var(--panel-soft, rgba(0, 0, 0, 0.02));
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.08));
}

.comment-group-body .comment-img {
  display: block;
  max-width: 320px;
  max-height: 320px;
  width: auto;
  height: auto;
  margin: 6px 0;
  border-radius: 8px;
}

/* 留言內文的圖改 inline：論壇內建表情(小 gif)跟文字同一行顯示；真的大圖才被上限縮成縮圖。 */
.comment-text .comment-img {
  display: inline-block;
  vertical-align: middle;
  max-width: 320px;
  max-height: 320px;
  width: auto;
  height: auto;
  margin: 0 2px;
  border-radius: 6px;
}

.comment-toggle {
  font-size: 13px;
  color: var(--accent-dark, #0b6b4f);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.comment-toggle:hover {
  text-decoration: underline;
}

.comment-card {
  padding: 12px 14px;
  border-top: 1px solid var(--border, rgba(0, 0, 0, 0.06));
}

.comment-card:first-of-type {
  border-top: none;
}

.comment-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.comment-time {
  font-size: 12px;
  color: var(--muted, #7b8a86);
}

.comment-tag {
  margin-left: auto;
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 8px;
  font-weight: 600;
}

.comment-tag.is-new {
  background: rgba(224, 36, 94, 0.12);
  color: #c01e50;
}

.comment-tag.is-replied {
  background: rgba(16, 122, 87, 0.14);
  color: #0b6b4f;
}

.comment-tag.is-ignored {
  background: rgba(0, 0, 0, 0.06);
  color: #7b8a86;
}

.comment-text {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
  margin-bottom: 10px;
}

.comment-watch-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.comment-watch-row input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.15));
  border-radius: 8px;
}

.comment-watch-row .tiny-button {
  white-space: nowrap;
}

/* 找互動機會：搜尋列 */
.discover-search-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.discover-search-row input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.15));
  border-radius: 8px;
}

.discover-search-row select {
  flex: 0 0 auto;
  width: auto;
  padding: 8px 10px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.15));
  border-radius: 8px;
}

.discover-search-row .tiny-button {
  white-space: nowrap;
}

.discover-reply {
  resize: vertical;
  font: inherit;
  line-height: 1.5;
}

.discover-stats {
  font-size: 12.5px;
  color: var(--muted, #6b7280);
  white-space: nowrap;
}

.comment-reply-box {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.comment-reply-input {
  flex: 1;
  min-width: 0;
  padding: 7px 11px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.15));
  border-radius: 8px;
}

.comment-reply-box .tiny-button {
  white-space: nowrap;
}

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

.comment-actions .tiny-button {
  text-decoration: none;
}

/* 互動三按鈕配色：回覆=主色實心、已回覆=綠、略過=灰 */
.comment-btn-reply {
  background: var(--accent, #107a57);
  border-color: var(--accent, #107a57);
  color: #fff;
}

.comment-btn-reply:hover {
  background: var(--accent-dark, #0b6b4f);
  border-color: var(--accent-dark, #0b6b4f);
  color: #fff;
}

.comment-btn-done {
  background: rgba(45, 108, 223, 0.12);
  border-color: rgba(45, 108, 223, 0.4);
  color: #2256b3;
}

.comment-btn-done:hover {
  background: rgba(45, 108, 223, 0.2);
}

.comment-btn-skip {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.12);
  color: #6b7770;
}

.comment-btn-skip:hover {
  background: rgba(0, 0, 0, 0.1);
}

/* 手機版留言／探索卡片修正：放檔尾，確保 source order 在基礎規則之後、能蓋過。
   問題：標題列在窄螢幕會把作者(@帳號/貼文標題)擠到 0 寬度而完全看不到。 */
@media (max-width: 760px) {
  .comment-group-head {
    flex-wrap: wrap;
  }

  .comment-group-title {
    flex: 1 0 100%;   /* shrink=0 + 基準 100% → 作者獨佔一行、完整顯示，不被平台標籤/時間/讚數擠壓 */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .comment-time {
    white-space: nowrap;
  }

  .discover-search-row {
    flex-wrap: wrap;   /* 超窄螢幕時搜尋鈕掉下一行（390px 仍是一行） */
  }
}


/* ===== 總覽頁重設計（dashboard redesign）===== */
.dash-layout { display: flex; flex-direction: column; gap: 18px; }

/* 流程列（取代原本一大段說明） */
.dash-steps {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 11px 16px; margin-bottom: 18px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 1px 2px rgba(29, 37, 41, 0.05);
}
.dash-step { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.dash-step-n { width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 0.72rem; font-weight: 800; }
.dash-step-arrow { color: #b9c2bd; font-weight: 700; }

/* Hero：目前帳號 + 三個數字 */
.dash-hero { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: stretch; }
.dash-hero-main { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; }
.dash-hero-main::before { content: ""; position: absolute; top: 0; right: 0; width: 200px; height: 200px; pointer-events: none; background: radial-gradient(circle at top right, var(--accent-soft), transparent 70%); opacity: 0.55; }
.dash-hero-head { display: flex; gap: 14px; align-items: center; position: relative; }
.dash-hero-main .profile-avatar { width: 58px; height: 58px; border-radius: 16px; font-size: 1.1rem; flex: 0 0 auto; }
.dash-hero-id { flex: 1; min-width: 0; }
.dash-hero-name { margin: 0; font-size: 1.35rem; line-height: 1.15; }
.dash-hero-role { margin: 3px 0 0; font-size: 0.9rem; }
.dash-hero-note { margin: 0; position: relative; }
.dash-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; position: relative; }

/* 三個數字：平均撐滿，與左側「目前帳號」卡等高、底部對齊 */
.dash-stats { padding: 16px; display: grid; grid-template-rows: repeat(3, 1fr); gap: 12px; }
.dash-stat { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-radius: 12px; background: var(--panel-soft); border: 1px solid var(--line); }
.dash-stat-lab { display: flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 700; font-size: 0.9rem; }
.dash-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.dash-stat .metric-value { font-size: 1.55rem; font-weight: 850; color: var(--ink); line-height: 1; }

/* 雙欄：帳號總覽 + 最新更新 */
.dash-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }

/* 精簡工具列 + 收合進階篩選 */
.dash-toolbar { display: flex; gap: 8px; margin-bottom: 12px; }
.dash-toolbar #accountSearch { flex: 1; min-height: 38px; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 12px; background: var(--panel); color: var(--ink); }
.dash-filter-toggle { min-height: 38px; padding: 0 14px; white-space: nowrap; }
.dash-filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }

/* 帳號卡：底部數字加分隔線 */
.dash-cols .account-card-stats { border-top: 1px solid var(--line); padding-top: 9px; margin-top: 2px; }

/* 新手指南：降為次要輕量區 */
.product-guide { background: var(--panel-soft); }
.dash-guide-head { align-items: center; }
#guideGrid { grid-template-columns: repeat(3, 1fr); margin-top: 14px; }
#guideGrid .feature-card { min-height: 0; }
#guideGrid .feature-card p { font-size: 0.82rem; line-height: 1.55; }

/* 窄螢幕退化為單欄 */
@media (max-width: 1080px) {
  .dash-hero, .dash-cols { grid-template-columns: 1fr; }
  #guideGrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  #guideGrid { grid-template-columns: 1fr; }
}


/* ===== 最新更新：頂部細長橫幅（預設一行、可展開）===== */
.changelog-ribbon { display: flex; align-items: flex-start; gap: 12px; padding: 12px 18px; margin-bottom: 18px; }
.changelog-ribbon-tag { flex: 0 0 auto; font-size: 0.85rem; font-weight: 800; color: var(--accent); white-space: nowrap; padding-top: 2px; }
.changelog-ribbon .changelog-list { flex: 1 1 auto; min-width: 0; }
.changelog-ribbon-toggle { flex: 0 0 auto; white-space: nowrap; }
.changelog-oneline { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 0.9rem; color: var(--ink); }
.changelog-oneline .changelog-oneline-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== 帳號狀態閘門（進入控管）===== */
.status-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid #e7c97a;
  border-left: 4px solid var(--amber);
  border-radius: var(--radius);
  background: #fdf6e3;
}
.status-banner[hidden] { display: none; }
.status-banner strong { margin: 0; font-size: 0.98rem; }
.status-banner p { margin: 4px 0 0; color: var(--muted); line-height: 1.55; font-size: 0.9rem; }
.status-banner.is-suspended {
  border-color: #f0c2ba;
  border-left-color: var(--red);
  background: #fff5f4;
}

.admin-status-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}
.admin-status-tag.is-pending { background: #fdf0d5; color: #9a6b00; }
.admin-status-tag.is-suspended { background: #fde2e2; color: #b3261e; }