:root {
  --bg: #1b1919; --surface: #232120; --surface2: #2b2927;
  --line: #3b3833; --text: #eceae5; --muted: #b0b2aa;
  --accent: #c6ff4d; --ok: #7fb069; --warn: #e0a458; --bad: #f0968e;
  --radius: 8px;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.6 -apple-system, "Noto Sans TC", system-ui, sans-serif;
}
header {
  display: flex; align-items: center; gap: 18px;
  padding: 10px 18px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--bg); z-index: 10;
}
/* logo 從 span 變成 a 之後會吃到瀏覽器預設的連結顏色（已造訪是紫的）。
   顏色與底線都要自己講清楚，不然它會在某些人的瀏覽器上變成紫色。 */
.logo { font-weight: 500; display: flex; align-items: center; gap: 8px;
  color: var(--text); text-decoration: none; }
.logo:visited, .logo:hover, .logo:active { color: var(--text); text-decoration: none; }
.logo img { width: 22px; height: 22px; border-radius: 5px; }
nav { display: flex; gap: 14px; }
nav a {
  color: var(--muted); text-decoration: none; font-size: 14px;
  padding: 3px 0; border-bottom: 2px solid transparent;
  white-space: nowrap;
}
nav a.on { color: var(--text); border-bottom-color: var(--accent); }
nav .badge {
  background: var(--bad); color: #fff; border-radius: 8px;
  padding: 0 6px; font-size: 11px; margin-left: 4px;
}
.ctx {
  margin-left: auto; background: var(--surface2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 4px 10px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.ctx:hover { border-color: var(--accent); }
/* 按鈕上原本只有目前的值，第一次看到的人不知道「全部」是可以按的。
   前面加一個灰色的欄位名，一眼看得出這是一個切換器。 */
.ctxk { color: var(--muted); font-size: 11.5px; letter-spacing: .04em;
  margin-right: 7px; }
#ctx-label { font-weight: 500; }
#ctx.on { border-color: var(--accent); }
#ctx.on #ctx-label { color: var(--accent); }
main { padding: 20px 18px 60px; max-width: 1180px; margin: 0 auto; }

h2 { font-size: 17px; font-weight: 500; margin: 0 0 12px; }
h3 { font-size: 14px; font-weight: 500; margin: 22px 0 8px; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
code, .mono { font-family: var(--mono); font-size: 12px; }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 14px;
}
.grid { display: grid; gap: 12px; }
.g3 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.g2 { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }

.metric { background: var(--surface); border-radius: var(--radius); padding: 12px 14px; }
.metric .n { font-size: 26px; font-weight: 500; }

.hero { border: 1px solid var(--accent); background: #262b17; }
.hero h2 { color: var(--accent); }

button {
  background: var(--surface2); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 7px 14px; font: inherit; font-size: 14px;
  cursor: pointer;
}
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); color: #161c04; }
button.ok { background: var(--ok); border-color: var(--ok); color: #101a0c; }
input, textarea, select {
  background: var(--bg); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 8px 10px; font: inherit; font-size: 14px;
  width: 100%;
}
input:focus, textarea:focus { outline: none; border-color: var(--accent); }

.row { display: flex; align-items: center; gap: 8px; }
.bar { flex: 1; height: 6px; background: var(--surface2); border-radius: 3px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--ok); }
.bar > i.warn { background: var(--warn); }

.streak { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; }
.streak span { height: 14px; border-radius: 3px; background: var(--surface2); }
.streak span.on { background: var(--ok); }

.hit { border-bottom: 1px solid var(--line); padding: 10px 0; cursor: pointer; }
.hit:hover { background: var(--surface); }
.tag {
  display: inline-block; background: var(--surface2); color: var(--muted);
  border-radius: 4px; padding: 1px 7px; font-size: 11px; margin-right: 4px;
}
.tag.lock { background: #3a2620; color: var(--warn); }

.list { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.list .item { padding: 11px 13px; border-bottom: 1px solid var(--line); cursor: pointer; }
.list .item:last-child { border-bottom: none; }
.list .item.on { background: var(--surface2); }

.diff { font-family: var(--mono); font-size: 12px; line-height: 1.7;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; }
.diff div { padding: 1px 10px; white-space: pre-wrap; }
.diff .add { background: #1c2a17; color: #9fd07f; }
.diff .del { background: #2c1a18; color: #e08b84; }
.diff .at { background: var(--surface2); color: var(--muted); }

.palette { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 50; }
.palette-box {
  max-width: 520px; margin: 12vh auto 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.palette-box input { border: none; border-bottom: 1px solid var(--line); border-radius: 0; }
.palette ul { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow: auto; }

/* 對話框內容長的時候：內容自己捲，動作列釘在最下面永遠看得到。
   一次貼三十個客戶進來預覽，「確定」被推到畫面外，只能靠 Tab 摸過去。 */
.pal-scroll { max-height: 58vh; overflow: auto; }
.pal-actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 10px 18px; border-top: 1px solid var(--line); background: var(--surface);
}
.palette li { padding: 9px 12px; cursor: pointer; font-size: 14px; }
.palette li.on { background: var(--surface2); }
.palette li .k { color: var(--muted); font-size: 12px; margin-left: 6px; }

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--surface2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 9px 16px; font-size: 14px; z-index: 60;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  max-width: min(92vw, 620px); line-height: 1.7;
}
.toast .tcta {
  background: var(--accent); color: #161c04; border-radius: 7px;
  padding: 5px 12px; font-size: 13px; font-weight: 600; text-decoration: none;
  white-space: nowrap;
}
.toast .tclose { color: var(--muted); cursor: pointer; font-size: 12px; margin-left: auto; }
.hidden { display: none; }
kbd {
  background: var(--surface2); border: 1px solid var(--line); border-radius: 4px;
  padding: 1px 5px; font-family: var(--mono); font-size: 11px; color: var(--muted);
}

select { appearance: none; background-image:
  linear-gradient(45deg, transparent 50%, var(--muted) 50%),
  linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
textarea { resize: vertical; font-family: inherit; }

.lvcard { background: linear-gradient(135deg, #262419, #1e1d16); border-color: var(--accent); }
.lv { background: var(--accent); color: #1a0f09; border-radius: 4px; padding: 1px 7px;
      font-size: 12px; font-weight: 500; margin-right: 8px; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; }
.badge2 { border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px;
          font-size: 13px; color: var(--muted); background: var(--surface2); }
.badge2.got { border-color: var(--ok); color: var(--ok); background: #1c2a17; }

.lintbox { background: #2e2415; border: 1px solid var(--warn); border-radius: var(--radius);
  padding: 10px 12px; font-size: 13px; color: var(--warn); margin-bottom: 12px; line-height: 1.7; }

/* 漢堡：只在手機出現。橫向捲的導覽列看不到後面有什麼，
   而看不到的東西對容易分心的人等於不存在。 */
.burger { display: none; background: var(--surface2); border: 1px solid var(--line);
  color: var(--text); border-radius: var(--radius); padding: 8px 12px;
  font-size: 18px; line-height: 1; cursor: pointer; }

@media (max-width: 720px) {
  header { flex-wrap: wrap; gap: 10px; }
  .ctx { margin-left: 0; }
  .burger { display: block; order: -1; }
  nav { width: 100%; flex-direction: column; align-items: stretch; gap: 2px;
    padding-bottom: 4px; }
  nav.hide { display: none; }
  nav a { padding: 12px 14px; border-radius: var(--radius);
    border: 1px solid transparent; font-size: 16px; }
  nav a.on { border-color: var(--accent); }
  .g2 { grid-template-columns: 1fr; }
  .streak { grid-template-columns: repeat(15, 1fr); }
  main { padding: 14px 12px 60px; }
}

.sharebtn { background: var(--surface2); border: 1px solid var(--line); color: var(--text);
  border-radius: var(--radius); padding: 7px 14px; font-size: 14px; text-decoration: none; }
.sharebtn:hover { border-color: var(--accent); }

.petcard { background: linear-gradient(135deg, #1e2418, #1e1d16); border-color: var(--ok); }
.petface { font-size: 44px; line-height: 1; margin-right: 14px;
  display: inline-block; animation: idle 3s ease-in-out infinite; }
.petface.sleepy { animation: none; opacity: .65; filter: saturate(.6); }
.petface.thriving, .petface.radiant { animation: bounce 1.6s ease-in-out infinite; }
.petpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.petpick button { padding: 10px 4px; font-size: 13px; line-height: 1.5; }
@keyframes idle { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }
@keyframes bounce { 0%,100% { transform: translateY(0) scale(1) } 50% { transform: translateY(-7px) scale(1.06) } }
@media (prefers-reduced-motion: reduce) { .petface { animation: none !important } }

.kanban { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.kcol { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; }
.kcard { background: var(--surface2); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; margin: 8px 0; }
.kcard.kdone { opacity: .55; }
.kcard input[type=text], .kcard input:not([type]) { font-size: 14px; }
button.small { padding: 2px 8px; }
@media (max-width: 720px) { .kanban { grid-template-columns: 1fr; } }

/* ── 手帳皮膚 ─────────────────────────────────────── */
.plannerwrap { --pbg: transparent; --ppanel: var(--surface); --pblush: #282019;
  --pline2: var(--line); --ptext: var(--text); --pmut2: var(--muted);
  --ppink: var(--accent); --ppill-bg: var(--surface2); --ppill-tx: var(--muted);
  background: var(--pbg); border-radius: var(--radius); }
.plannerwrap.paper { --pbg: #FBF9F5; --ppanel: #FFFFFF; --pblush: #F4E9E6;
  --pline2: #DCD0C8; --ptext: #4E4A46; --pmut2: #9A928B;
  --ppink: #D9A79E; --ppill-bg: #E7D2CD; --ppill-tx: #6E6660;
  padding: 22px; color: var(--ptext); }
.plannerwrap.paper ::placeholder { color: #C9BFB7; }
.plannerwrap.sakura { --pbg: #FBF3F4; --ppanel: #FFFFFF; --pblush: #F6E3E7;
  --pline2: #E3CBD2; --ptext: #54464B; --pmut2: #A18B92;
  --ppink: #D98FA4; --ppill-bg: #EDD3DA; --ppill-tx: #755F67;
  padding: 22px; color: var(--ptext); }
.plannerwrap.sakura ::placeholder { color: #CDB8BE; }
.plannerwrap.mint { --pbg: #F2F8F3; --ppanel: #FFFFFF; --pblush: #E2F0E6;
  --pline2: #C9DCCE; --ptext: #44514A; --pmut2: #8BA294;
  --ppink: #7FB891; --ppill-bg: #D4E7DA; --ppill-tx: #5D7466;
  padding: 22px; color: var(--ptext); }
.plannerwrap.mint ::placeholder { color: #B5C9BB; }
.plannerwrap.sky { --pbg: #F2F6FA; --ppanel: #FFFFFF; --pblush: #E3ECF4;
  --pline2: #CBD9E5; --ptext: #465361; --pmut2: #8C9DAE;
  --ppink: #84A9C9; --ppill-bg: #D6E3EE; --ppill-tx: #5E7183;
  padding: 22px; color: var(--ptext); }
.plannerwrap.sky ::placeholder { color: #B7C7D6; }
.pthemes { display: flex; gap: 6px; align-items: center; }
.pdot { width: 18px; height: 18px; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(127,127,127,.35); display: inline-block; }
.pdot.on { border-color: var(--accent); }

.phead { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.pslash { font-family: Georgia, 'Noto Serif TC', serif; font-size: 26px; color: var(--pmut2); }
.ptitle { font-family: Georgia, 'Noto Serif TC', serif; font-size: 21px;
  letter-spacing: .38em; color: var(--ptext); }
.pbrush { width: 150px; height: 20px; }
.pbrush path { stroke: var(--ppink); stroke-width: 7; opacity: .55; fill: none; }
.pdate { font-size: 14px; color: var(--ptext); }
.ptoggle { cursor: pointer; user-select: none; }

.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .pgrid { grid-template-columns: 1fr; } }

.psec { position: relative; background: var(--ppanel); border: 1px solid var(--pline2);
  border-radius: 4px; padding: 22px 16px 14px; }
.psec.blush { background: var(--pblush); border-color: transparent; }
.plannerwrap:not(.paper) .psec { border-radius: var(--radius); }

.pill { position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--ppill-bg); color: var(--ppill-tx); font-size: 10.5px;
  letter-spacing: .22em; padding: 3px 14px; white-space: nowrap; border-radius: 2px; }
.phead .pill { position: static; transform: none; }

.prow { display: flex; align-items: center; gap: 8px; margin: 7px 0; }
.pq { margin: 9px 0; }
.pq .pmut { display: block; font-size: 11px; letter-spacing: .12em; margin-bottom: 1px; }
.pline { flex: 1; background: transparent !important; border: none !important;
  border-bottom: 1px solid var(--pline2) !important; border-radius: 0 !important;
  color: var(--ptext) !important; padding: 3px 2px !important; font-size: 14px; }
.pline.pdots { border-bottom-style: dotted !important; }
.pline.pdone { text-decoration: line-through; opacity: .5; }
.pfree { width: 100%; background: transparent !important; border: none !important;
  color: var(--ptext) !important; font-size: 15px; resize: vertical; }
.pmut { color: var(--pmut2); font-size: 12px; }
.phint { margin: 0 0 8px; font-size: 11px; }
.pa { color: #8FAF7E !important; }

.pnum { width: 20px; height: 20px; border: 1px solid var(--ppink); color: var(--ppink);
  border-radius: 50%; font-size: 11px; display: inline-flex; align-items: center;
  justify-content: center; flex: none; }
.psq { width: 14px; height: 14px; border-radius: 4px; background: var(--ppill-bg); flex: none; }
.pchk { width: 15px !important; height: 15px; accent-color: var(--ppink); flex: none; }
.pbtn { background: transparent; border: 1px solid var(--pline2); color: var(--pmut2);
  border-radius: 6px; padding: 2px 10px; font-size: 12px; cursor: pointer; }
.padd { margin-top: 6px; }
.plannerwrap.paper .pbtn:hover { border-color: var(--ppink); color: var(--ppink); }

/* ── 知識牆 ── */
.wikilink { color: var(--accent); text-decoration: none; border-bottom: 1px dashed var(--accent); }
.wikilink:hover { border-bottom-style: solid; }
.wikibody { line-height: 1.9; }
.wikibody h2, .wikibody h3 { margin: 14px 0 6px; }
.wikibody p { margin: 8px 0; }
.wikibody ul { margin: 8px 0 8px 20px; }
.wikibody code { background: #262626; border-radius: 4px; padding: 1px 6px; font-size: 13px; }

.wikihead { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.wikihead button { margin-left: auto; }
.wikinote { margin: 0 0 18px; max-width: 46em; line-height: 1.8; }

.wikigrid { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.wcard { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 12px;
  background: var(--surface); cursor: pointer; display: flex; flex-direction: column;
  min-height: 132px; transition: border-color .15s, transform .15s; }
.wcard:hover { border-color: var(--accent); transform: translateY(-2px); }
.wcard.idx { border-color: #3a3a36; background: #1f211c; }
.wtitle { font-weight: 600; font-size: 15px; line-height: 1.5; }
.wexc { color: var(--muted); font-size: 12.5px; line-height: 1.75; margin: 7px 0 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; }
.wmeta { margin-top: auto; padding-top: 10px; display: flex; gap: 10px; align-items: center;
  font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wbadge { border: 1px solid var(--line); border-radius: 99px; padding: 1px 8px; }
.worphan { color: #8a8378; }
@media (max-width: 560px) { .wikigrid { grid-template-columns: 1fr; }
  .wcard { min-height: 0; } }

/* ── 專案：卡片備註與專案脈絡 ── */
.pnote textarea, .kcard .cnote {
  width: 100%; background: transparent; border: none; resize: none;
  color: var(--muted); font: inherit; font-size: 13px; line-height: 1.75;
  padding: 4px 2px; overflow: hidden;
}
.pnote textarea { font-size: 14px; color: var(--text); }
.pnote textarea:focus, .kcard .cnote:focus { outline: none; color: var(--text); }
.kcard .cnote { border-top: 1px dashed var(--line); margin-top: 4px; padding-top: 6px; }
.kcard .cnote::placeholder, .pnote textarea::placeholder { color: #6f6d68; }
.cdate { cursor: pointer; border-bottom: 1px dashed transparent; }
.cdate:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ── 手帳：客戶提醒 ── */
.premind { grid-column: 1 / -1; }
.prem { border-bottom: 1px dashed var(--pline2, var(--line)); padding: 8px 0; }
.prem:last-of-type { border-bottom: none; }

/* ── 供應商與模型說明 ── */
.modeltbl { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.modeltbl th, .modeltbl td { text-align: left; padding: 6px 8px;
  border-bottom: 1px solid var(--line); color: var(--muted); vertical-align: top; }
.modeltbl th { color: var(--text); font-size: 12px; }
.modeltbl td:first-child { color: var(--text); }

/* 快速記一筆。電腦上按 C，手機上按這顆。
   念頭停留的時間大概三秒，要在那三秒內按得到。 */
.fab { display: none; position: fixed; right: 18px; bottom: 18px; z-index: 40;
  width: 60px; height: 60px; border-radius: 50%; border: none;
  background: var(--accent); color: #161c04; font-size: 30px; line-height: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45); cursor: pointer; }
.fab:active { transform: scale(.94); }
@media (max-width: 720px) { .fab { display: block; } }
@media (prefers-reduced-motion: reduce) { .fab:active { transform: none; } }

/* 今天那一格框起來。格子是由左到右的時間順序，最右邊是今天，
   跟大部分人看過的貢獻圖同一個方向。但方向這件事看不出來，
   所以兩端加上文字，今天那格再加一圈外框。 */
.streak span.today { outline: 1px solid var(--accent); outline-offset: 1px; }

/* 示範站放右上角，亮綠底。它跟導覽列那些頁面不是同一種東西，
   混在裡面會被當成「又一個分頁」而被忽略。 */
.demolink {
  margin-left: 8px; background: var(--accent); color: #161c04;
  border-radius: var(--radius); padding: 5px 12px; font-size: 13px;
  font-weight: 600; text-decoration: none; white-space: nowrap;
}
.demolink:visited, .demolink:hover { color: #161c04; text-decoration: none; }
.demolink:hover { filter: brightness(1.08); }
@media (max-width: 720px) { .demolink { order: -1; margin-left: auto; } }

/* ── 上手小幫手：常駐右側，指引寫在面板裡，不用跳去說明 ── */
#guide { position: fixed; z-index: 45; }
.guide-tab { top: 92px; right: 0; }
.guide-tab button {
  writing-mode: vertical-rl; padding: 12px 7px; border-radius: 10px 0 0 10px;
  border-right: none; background: var(--accent); color: #161c04;
  font-size: 13px; letter-spacing: .06em; box-shadow: -2px 2px 10px rgba(0,0,0,.35);
}
.guide-tab button:hover { filter: brightness(1.06); }
.guide-open {
  top: 62px; right: 14px; width: min(330px, calc(100vw - 28px));
  max-height: calc(100vh - 78px); overflow: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: -4px 6px 26px rgba(0,0,0,.4); padding: 14px;
}
.ghead { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ghead b { font-size: 15px; }
.gmut { color: var(--muted); font-size: 12px; }
.gx { margin-left: auto; padding: 2px 9px; font-size: 15px; line-height: 1;
      background: var(--surface2); }
.gbar { height: 5px; background: var(--surface2); border-radius: 3px; overflow: hidden;
        margin-bottom: 12px; }
.gbar i { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.gnext { font-size: 13px; color: var(--muted); margin: 0 0 12px; line-height: 1.6; }
.gnext b { color: var(--text); }
.gsteps { display: flex; flex-direction: column; gap: 8px; }
.gstep { border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px;
         background: var(--bg); }
.gstep.gcur { border-color: var(--accent); background: #232614; }
.grow { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.gmark { color: var(--muted); font-weight: 700; width: 15px; text-align: center; }
.gdone .gmark { color: var(--ok); }
.gdone .grow b { color: var(--muted); font-weight: 400; }
.gopt { margin-left: auto; font-size: 11px; color: var(--muted);
        border: 1px solid var(--line); border-radius: 20px; padding: 1px 8px; }
.ghow { font-size: 12.5px; color: var(--text); line-height: 1.7; margin: 8px 0 10px; }
.gbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.gbtn { padding: 6px 13px; font-size: 12.5px; background: var(--accent);
        border-color: var(--accent); color: #161c04; border-radius: 7px; }
.gbtn.ghost { background: var(--surface2); border-color: var(--line); color: var(--text); }
.gbtn.gwide { width: 100%; margin-top: 12px; }
@media (max-width: 720px) {
  .guide-open { top: auto; bottom: 0; right: 0; width: 100vw;
                max-height: 62vh; border-radius: 14px 14px 0 0; }
  /* 捕捉鈕佔右下角（60px＋18px 邊距），指南要疊在它上方，不能同一個角
     打架。捕捉鈕的位置是神聖的：念頭停留三秒，那三秒要按得到。 */
  .guide-tab { top: auto; bottom: 96px; }
  .guide-tab button { writing-mode: horizontal-tb; border-radius: 10px 0 0 10px; }
}

/* ── 名冊頁：左側常駐把四個軸講清楚，右側才是可動的卡 ── */
.regwrap { display: flex; gap: 18px; align-items: flex-start; }
.regcards { flex: 1; min-width: 0; }
.axguide { width: 300px; flex: 0 0 300px; position: sticky; top: 70px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 15px; max-height: calc(100vh - 88px);
  overflow: auto; }
.axguide h3 { color: var(--text); font-size: 14.5px; }
.axover { font-size: 12.5px; color: var(--muted); line-height: 1.7; margin: 0 0 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.axitem { padding: 10px 0; border-bottom: 1px solid var(--line); }
.axitem:last-child { border-bottom: none; }
.axhd { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.axhd b { font-size: 14px; }
.axtag { font-size: 11.5px; color: var(--accent); }
.axhd code { font-size: 11px; }
.axone { font-size: 12.5px; line-height: 1.7; margin: 6px 0; color: var(--text); }
.axmeta { font-size: 12px; line-height: 1.6; margin: 3px 0; color: var(--muted); }
.axmeta span { display: inline-block; min-width: 4.6em; color: var(--accent);
  font-size: 11px; }
.axwarn { font-size: 12px; line-height: 1.65; margin: 6px 0 0; color: var(--warn);
  background: rgba(224,164,88,.09); border-radius: 6px; padding: 6px 8px; }
@media (max-width: 860px) {
  .regwrap { flex-direction: column; }
  .axguide { width: 100%; flex-basis: auto; position: static; max-height: none; }
}
/* 情境切換視窗頂端那行提醒 */
.palcap { font-size: 12px; color: var(--muted); line-height: 1.6;
  padding: 9px 14px; border-bottom: 1px solid var(--line); }

/* 知識庫批次勾選刪除 */
.nrow { display: flex; gap: 10px; align-items: flex-start; }
.nselbar { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
#sel-del:not(:disabled) { color: var(--bad); border-color: var(--bad); }

/* 拖曳排序的把手與落點提示。把手要好抓，落點要看得見。 */
.phandle { cursor: grab; color: var(--muted); user-select: none;
  font-size: 13px; padding: 0 2px; }
.phandle:active { cursor: grabbing; }
.prow.pdragover { box-shadow: inset 0 2px 0 var(--accent); }