/* 2026-09-26 照設計師的 Figma（AIGCTV 檔，1920 寬）精確值改：4%／8% 白的面、20% 白的框線、
   8px 圓角；字級照設計稿（選單 14、功能卡 18、區塊標題 20、分頁 16、卡片 16／14）。窄畫面在檔尾用斷點縮。
   2026-10-01 改成 MeowShort 的配色（使用者 Q1 a：照 aigc.meowshort.com，版面不動）：#060608 底、#0d0d11 側欄、#7c4dff 紫色主色、
   #f8f7fb 文字、#96939f 次要文字（舊的是 #141414 底、#a70e4b 桃紅主色）
   2026-10-01 使用者給的完整 UI 設計稿（~/Downloads/meowshort-html，選 a 全站照改）：面板改實色 #16161e、
   框線 #302d3c、滑過變紫框 #9b75ff、選中 #242036 底配淡紫字；側欄與上方標題列 #101015、分隔線 #24212c */
html.purchase-ui-hidden :is(#btn-credits, #pc-pts) { display: none !important; }
html.purchase-ui-hidden :is(.billing-detail, .pc-cost, .ag-cost, .ag-planning-fee, .ag-planning-settings) { display: none !important; }
:root {
  --bg: #09090e;
  --side: #101015;
  --side-line: #24212c;
  --side-w: 240px;
  --top-h: 72px;
  --panel: #16161e;
  --panel-2: #1a1822;
  --panel-sel: #242036;
  --line: #302d3c;
  --line-2: #9b75ff;
  --line-soft: #2a2935;
  --line-strong: rgba(255, 255, 255, .2);   /* 改版前的框線：給寫死灰底的面（畫布卡片、說明框）用，#302d3c 在灰底上幾乎看不到 */
  --text: #f8f7fb;
  --muted: #96939f;
  --dim: #96939f;
  --brand: #7c4dff;
  --brand-hi: #8f66ff;
  --brand-line: #6a3df0;
  --brand-soft: rgba(124, 77, 255, .2);
  --brand-text: #b9a2ff;      /* 深底上的紫色字（連結、選中的工具）：#7c4dff 直接當字太暗 */
  --orange: #e37900;
  --gold: #d8b25c;
  --radius: 8px;
}
/* ── 亮色模式（使用者 2026-10-04 msg 2204 2a）：頭像選單切換，theme.js 寫在 <html data-theme>、記在這台瀏覽器 ──
   原本寫死在各規則裡的顏色改成 --k-<原色>（ops/oneoff/theme_tokens.py 一次轉換）：深色時就是原本那個顏色（畫面不變），
   亮色時換成推出來的對應色。媒體的黑底、黑色遮罩與陰影、品牌色按鈕上的白字兩種主題都一樣，沒有換。
   之後新寫的樣式請直接用上面的變數或這裡的 --k-*，不要再寫死顏色（寫死的在亮色模式會變成白底白字） */
:root {
  --k-000000-3: rgba(0, 0, 0, .3);            /* 組裝紀錄（.s-log）的底：深色時壓暗，亮色時只要一點點灰 */
  /* console.css（後台）用的 */
  --k-50c88c-16: rgba(80, 200, 140, .16);
  --k-8fe0b5: #8fe0b5;
  --k-d8b25c-18: rgba(216, 178, 92, .18);
  --k-09090e-72: rgba(9, 9, 14, .72);
  --k-101015: #101015;
  --k-101015-9: rgba(16, 16, 21, .9);
  --k-14131a: #14131a;
  --k-15131c: #15131c;
  --k-16141c: #16141c;
  --k-16161e-9: rgba(22, 22, 30, .9);
  --k-191720: #191720;
  --k-1b1b1d: #1b1b1d;
  --k-1b2433: #1b2433;
  --k-1d1c24: #1d1c24;
  --k-1f1f21: #1f1f21;
  --k-232325: #232325;
  --k-241a40: #241a40;
  --k-25232e: #25232e;
  --k-2a2834: #2a2834;
  --k-2a3b55: #2a3b55;
  --k-2a4c5e: #2a4c5e;
  --k-2c2a36: #2c2a36;
  --k-2f2840: #2f2840;
  --k-302a3e: #302a3e;
  --k-34313f: #34313f;
  --k-3a1d1d: #3a1d1d;
  --k-3a2f5c: #3a2f5c;
  --k-3a3746: #3a3746;
  --k-3a3a42: #3a3a42;
  --k-3b2f6b: #3b2f6b;
  --k-3d3d44: #3d3d44;
  --k-40364f: #40364f;
  --k-43315f: #43315f;
  --k-463661: #463661;
  --k-4a4458: #4a4458;
  --k-4a4757: #4a4757;
  --k-4b4560: #4b4560;
  --k-55506a: #55506a;
  --k-55555e: #55555e;
  --k-5aa0ff-45: rgba(90, 160, 255, .45);
  --k-5aa0ff-9: rgba(90, 160, 255, .9);
  --k-5b4a7d: #5b4a7d;
  --k-5b5568: #5b5568;
  --k-5d566c: #5d566c;
  --k-5d5868: #5d5868;
  --k-5d7fae: #5d7fae;
  --k-635c70: #635c70;
  --k-6aa8ff: #6aa8ff;
  --k-6aa8ff-28: rgba(106, 168, 255, .28);
  --k-6b5a8a: #6b5a8a;
  --k-6c6878: #6c6878;
  --k-7a7a83: #7a7a83;
  --k-7ad3a8: #7ad3a8;
  --k-7ad3a8-15: rgba(122, 211, 168, .15);
  --k-7cb8ff: #7cb8ff;
  --k-7f798e: #7f798e;
  --k-7fd6ff: #7fd6ff;
  --k-7fd6ff-12: rgba(127, 214, 255, .12);
  --k-888888: #888;
  --k-8d899c: #8d899c;
  --k-8d8a99: #8d8a99;
  --k-999999: #999;
  --k-9a96aa: #9a96aa;
  --k-9aa7ff: #9aa7ff;
  --k-9aa7ff-15: rgba(154, 167, 255, .15);
  --k-9b75ff: #9b75ff;
  --k-9b75ff-06: rgba(155, 117, 255, .06);
  --k-9b75ff-08: rgba(155, 117, 255, .08);
  --k-9b75ff-12: rgba(155, 117, 255, .12);
  --k-9b75ff-25: rgba(155, 117, 255, .25);
  --k-9b75ff-45: rgba(155, 117, 255, .45);
  --k-9f87db: #9f87db;
  --k-aaa5b5: #aaa5b5;
  --k-aaaaaa: #aaa;
  --k-c0baca: #c0baca;
  --k-c3c3cb: #c3c3cb;
  --k-c9a0ff: #c9a0ff;
  --k-c9a0ff-15: rgba(201, 160, 255, .15);
  --k-c9c5d6: #c9c5d6;
  --k-cccccc: #ccc;
  --k-cfc9e2: #cfc9e2;
  --k-cfcfd4: #cfcfd4;
  --k-cfe3ff: #cfe3ff;
  --k-d6c8ff: #d6c8ff;
  --k-d6d2e2: #d6d2e2;
  --k-d9d4ea: #d9d4ea;
  --k-d9d6e4: #d9d6e4;
  --k-dddddd: #ddd;
  --k-dedee3: #dedee3;
  --k-e9e6f2: #e9e6f2;
  --k-ece9f6: #ece9f6;
  --k-eeebf8: #eeebf8;
  --k-f1eef8: #f1eef8;
  --k-ff7864-5: rgba(255, 120, 100, .5);
  --k-ff9a6b: #ff9a6b;
  --k-ff9c9c: #ff9c9c;
  --k-ffb17a: #ffb17a;
  --k-ffb17a-15: rgba(255, 177, 122, .15);
  --k-ffb3cf: #ffb3cf;
  --k-ffffff: #fff;
  --k-ffffff-015: rgba(255,255,255,.015);
  --k-ffffff-03: rgba(255, 255, 255, .03);
  --k-ffffff-04: rgba(255, 255, 255, .04);
  --k-ffffff-06: rgba(255, 255, 255, .06);
  --k-ffffff-08: rgba(255, 255, 255, .08);
  --k-ffffff-1: rgba(255, 255, 255, .1);
  --k-ffffff-25: rgba(255, 255, 255, .25);
  --k-ffffff-32: rgba(255, 255, 255, .32);
  --k-ffffff-5: rgba(255, 255, 255, .5);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f5f8;
  --side: #ffffff;
  --side-line: #e4e2ea;
  --panel: #ffffff;
  --panel-2: #f6f5f9;
  --panel-sel: #ece6ff;
  --line: #dcd8e4;
  --line-2: #7c4dff;
  --line-soft: #e6e3ec;
  --line-strong: rgba(20, 20, 30, .18);
  --text: #17151f;
  --muted: #6b6878;
  --dim: #6b6878;
  --brand-hi: #6a3df0;
  --brand-line: #7c4dff;
  --brand-soft: rgba(124, 77, 255, .12);
  --brand-text: #5b2fe0;
  --gold: #9a7420;
  --k-000000-3: rgba(0, 0, 0, .04);
  /* console.css（後台）用的 */
  --k-50c88c-16: rgba(39, 124, 82, .16);
  --k-8fe0b5: #2ea867;
  --k-d8b25c-18: rgba(132, 101, 32, .18);
  --k-09090e-72: rgba(247, 247, 250, .72);
  --k-101015: #f3f3f6;
  --k-101015-9: rgba(243, 243, 246, .9);
  --k-14131a: #f1f1f5;
  --k-15131c: #f1f0f5;
  --k-16141c: #f1f0f4;
  --k-16161e-9: rgba(238, 238, 243, .9);
  --k-191720: #eeedf2;
  --k-1b1b1d: #efeff0;
  --k-1b2433: #e3e8f0;
  --k-1d1c24: #ecebf0;
  --k-1f1f21: #ededee;
  --k-232325: #ebebec;
  --k-241a40: #e1dcf1;
  --k-25232e: #e7e6ec;
  --k-2a2834: #e4e2e9;
  --k-2a3b55: #d0dae8;
  --k-2a4c5e: #cbdee8;
  --k-2c2a36: #e2e1e8;
  --k-2f2840: #e0dce9;
  --k-302a3e: #e0dde8;
  --k-34313f: #dedce4;
  --k-3a1d1d: #efdfdf;
  --k-3a2f5c: #d2cce5;
  --k-3a3746: #dad9e1;
  --k-3a3a42: #dbdbdf;
  --k-3b2f6b: #a094d0;
  --k-3d3d44: #dadadd;
  --k-40364f: #d9d4e1;
  --k-43315f: #d5cbe4;
  --k-463661: #d2cae1;
  --k-4a4458: #ada7bb;
  --k-4a4757: #aba8b8;
  --k-4b4560: #a59fba;
  --k-55506a: #9a95af;
  --k-55555e: #a1a1aa;
  --k-5aa0ff-45: rgba(24, 85, 168, .45);
  --k-5aa0ff-9: rgba(24, 85, 168, .9);
  --k-5b4a7d: #9382b5;
  --k-5b5568: #9d97aa;
  --k-5d566c: #9a93a9;
  --k-5d5868: #9c97a7;
  --k-5d7fae: #5173a2;
  --k-635c70: #968fa3;
  --k-6aa8ff: #1a5bb6;
  --k-6aa8ff-28: rgba(26, 91, 182, .28);
  --k-6b5a8a: #8675a5;
  --k-6c6878: #8b8797;
  --k-7a7a83: #7c7c85;
  --k-7ad3a8: #2d875c;
  --k-7ad3a8-15: rgba(45, 135, 92, .15);
  --k-7cb8ff: #1c6ac6;
  --k-7f798e: #777186;
  --k-7fd6ff: #1d91c8;
  --k-7fd6ff-12: rgba(29, 145, 200, .12);
  --k-888888: #777777;
  --k-8d899c: #676376;
  --k-8d8a99: #696675;
  --k-999999: #666666;
  --k-9a96aa: #595569;
  --k-9aa7ff: #2139df;
  --k-9aa7ff-15: rgba(33, 57, 223, .15);
  --k-9b75ff: #491bc0;
  --k-9b75ff-06: rgba(73, 27, 192, .06);
  --k-9b75ff-08: rgba(73, 27, 192, .08);
  --k-9b75ff-12: rgba(73, 27, 192, .12);
  --k-9b75ff-25: rgba(73, 27, 192, .25);
  --k-9b75ff-45: rgba(73, 27, 192, .45);
  --k-9f87db: #4d2e9b;
  --k-aaa5b5: #4f4a5a;
  --k-aaaaaa: #555555;
  --k-c0baca: #3b3545;
  --k-c3c3cb: #34343c;
  --k-c9a0ff: #7626e0;
  --k-c9a0ff-15: rgba(118, 38, 224, .15);
  --k-c9c5d6: #2d293a;
  --k-cccccc: #333333;
  --k-cfc9e2: #231d36;
  --k-cfcfd4: #2b2b30;
  --k-cfe3ff: #001430;
  --k-d6c8ff: #0e0037;
  --k-d6d2e2: #211d2d;
  --k-d9d4ea: #1a152b;
  --k-d9d6e4: #1e1b29;
  --k-dddddd: #222222;
  --k-dedee3: #1c1c21;
  --k-e9e6f2: #110e1b;
  --k-ece9f6: #100c1d;
  --k-eeebf8: #0f0b1e;
  --k-f1eef8: #110c1d;
  --k-ff7864-5: rgba(177, 45, 25, .5);
  --k-ff9a6b: #b74c1a;
  --k-ff9c9c: #e02222;
  --k-ffb17a: #c4611c;
  --k-ffb17a-15: rgba(196, 97, 28, .15);
  --k-ffb3cf: #e23776;
  --k-ffffff: #141414;
  --k-ffffff-015: rgba(20, 20, 20, .015);
  --k-ffffff-03: rgba(20, 20, 20, .03);
  --k-ffffff-04: rgba(20, 20, 20, .04);
  --k-ffffff-06: rgba(20, 20, 20, .06);
  --k-ffffff-08: rgba(20, 20, 20, .08);
  --k-ffffff-1: rgba(20, 20, 20, .1);
  --k-ffffff-25: rgba(20, 20, 20, .25);
  --k-ffffff-32: rgba(20, 20, 20, .32);
  --k-ffffff-5: rgba(20, 20, 20, .5);
}
/* Inter 自己放（web/static/fonts，SIL OFL 授權見 Inter-OFL.txt）：只有拉丁字母那組，中文照樣落到下面的系統字 */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/_static/fcb3939618f6534b7815fe45e3e5838b8662d5c39614cfe8e5acb3a963e7237b/fonts/inter-latin-wght.woff2") format("woff2");
}
* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
/* 捲軸跟著深色／亮色主題（使用者 2026-10-15 msg 4946：卡片文字框右邊的捲軸是白色的預設樣子）；本來就藏起來的（scrollbar-width: none）照舊 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
::-webkit-scrollbar-corner { background: transparent; }
[hidden] { display: none !important; }   /* .detail / .canvas-view 是 flex，會蓋掉 hidden 預設值 */
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.5 "Inter", "PingFang TC", "Source Han Sans TC", "Noto Sans TC", "Heiti TC", -apple-system, "Segoe UI", sans-serif;
  display: flex; overflow: hidden;
}
button { font: inherit; }
.ic { flex: 0 0 auto; display: block; }

/* ── 側欄（Figma：240 寬，logo 在 25,51；新建鈕 213×39；選單每列 216×33、間距 8）──
   2026-10-02 使用者 msg 1512：加了大賽廣告後太擠 → 選單列高、間距、字級都縮小 */
.sidebar {
  width: var(--side-w); flex: 0 0 var(--side-w); height: 100vh; background: var(--side); border-right: 1px solid var(--side-line);
  padding: 24px 16px 20px; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin;
}
.sidebar > * { flex-shrink: 0; }   /* 視窗矮的時候整條側欄捲動，不要把按鈕、選單壓扁 */
.brand { padding: 0 0 18px; display: flex; align-items: center; gap: 8px; }
.brand img { display: block; width: 40px; height: 40px; border-radius: 8px; }
.brand-name { display: flex; flex-direction: column; line-height: 1.3; }
.brand-name b { font-size: 21px; font-weight: 700; letter-spacing: .01em; }
.brand-name em { font-style: normal; color: var(--brand-text); }   /* 官方字樣：Meow 白、Short 紫（設計稿用淡紫） */
.brand-name span { font-size: 12px; color: var(--muted); }
.nav { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: var(--radius);
  color: var(--k-eeebf8); cursor: pointer; font-size: 14px; white-space: nowrap;
}
.nav-item:hover { background: var(--panel-2); }
.nav-item.active { background: var(--panel-sel); color: var(--brand-text); }
.nav-item:focus-visible { outline: 2px solid var(--k-9b75ff); outline-offset: -2px; }
.nav-gap { height: 22px; }   /* 後台（console.js）的選單分段用 */
/* 側欄分段小標與標籤（照 LibTV；使用者 2026-10-12 msg 3855） */
.nav-sec { margin: 16px 12px 6px; font-size: 12px; color: var(--muted); }
.nav-item > svg { flex: none; }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* 側欄窄的時候字縮成「…」，標籤留著 */
.nav-tag { flex: none; margin-left: auto; padding: 0 4px; border-radius: 4px; font-size: 10px; line-height: 16px; color: var(--muted);
  border: 1px solid var(--line-2); }
.nav-tag.hot { color: var(--k-7fd6ff); background: var(--k-7fd6ff-12); border-color: transparent; }
.nav-tag.soon { color: var(--k-9a96aa); border-color: var(--k-3a3746); }
.side-social { margin: 12px 4px 0; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.side-social-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.side-social-link, .side-community { display: flex; align-items: center; min-width: 0; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel-2); color: var(--text); text-decoration: none; }
.side-social-link { flex-direction: column; justify-content: center; gap: 6px; min-height: 60px; padding: 8px 2px; font-size: 10px; line-height: 1.2; }
.side-social-link .ic, .side-community .ic { color: var(--brand-text); }
.side-community { gap: 8px; margin-top: 8px; min-height: 52px; padding: 8px; font-size: 12px; line-height: 1.5; }
.side-community span { min-width: 0; overflow-wrap: anywhere; }
.side-community small { display: block; color: var(--muted); font-size: 10px; }
.side-social-link:hover, .side-community:hover { background: var(--panel-sel); border-color: var(--brand-text); }
.side-social-link:focus-visible, .side-community:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 2px; }
.side-foot { margin-top: auto; padding: 20px 4px 0; display: flex; flex-direction: column; gap: 0; }
/* 大賽廣告圖（2026-10-02，取代原本的「參考資料庫」統計） */
/* 側欄廣告輪播（app.js sideAds）：框固定直式 9:16；圖不裁（contain），空的地方用同一張圖的模糊放大版補 */
.side-ad { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--k-3a2f5c); background: #000; }
.side-ad:hover { border-color: var(--line-2); }
.side-ad-slide { position: absolute; inset: 0; display: block; overflow: hidden; }   /* 模糊底比框大 10%：滑動時兩張並排，不切掉會蓋到隔壁那張 */
.side-ad-slide.anim { transition: transform .5s ease; }      /* 換張的左右滑動（app.js sideAds go） */
@media (prefers-reduced-motion: reduce) { .side-ad-slide.anim { transition: none; } }
.side-ad-bg { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(14px) brightness(.55); }
.side-ad-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.side-ad-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; width: 26px; height: 26px; border-radius: 50%;
  border: 0; background: rgba(0, 0, 0, .45); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s; }
.side-ad-arrow.prev { left: 6px; } .side-ad-arrow.next { right: 6px; }
.side-ad:hover .side-ad-arrow, .side-ad-arrow:focus-visible { opacity: 1; }
@media (hover: none) { .side-ad-arrow { opacity: 1; } }        /* 手機沒有滑過：箭頭一直顯示 */
.side-ad-dots { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; justify-content: center; gap: 0; }
/* 點擊範圍 24px（手機好點），看得到的點用 ::before 畫 */
.side-ad-dot { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.side-ad-dot::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 7px; height: 7px;
  border-radius: 50%; background: rgba(255, 255, 255, .45); }
.side-ad-dot.on::before { background: #fff; width: 16px; border-radius: 4px; }
.side-ad-stop { position: absolute; right: 6px; bottom: 4px; z-index: 1; width: 22px; height: 22px; padding: 0; border: 0;
  border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; font-size: 9px; line-height: 22px; cursor: pointer; }
.side-foot .ver { border-top: 1px solid var(--line-soft); margin-top: 18px; }

/* 購買點數頁（admin.js buyCredits；2026-10-02 照 LibTV 的積分卡）：方案卡片排成格子，自訂金額佔兩格 */
.buy-top { text-align: center; margin: 0 0 24px; }
.buy-top h2 { margin: 0 0 6px; font-size: 32px; }
.buy-ref-row { justify-content: center; margin-top: 10px; flex-wrap: wrap; }
:is(#studio, .pc-fn-panel) input.buy-ref { width: 200px; flex: 0 0 auto; text-transform: uppercase; }   /* 同 .buy-num：要蓋過共用的 input 寬度 */
.ref-code { font-size: 20px; letter-spacing: 2px; }
.buy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-bottom: 24px; }
.buy-card { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); min-width: 0; }
.buy-card.hot { border-color: var(--brand-line); background: linear-gradient(160deg, var(--k-241a40) 0%, var(--panel) 70%); }
.buy-card.custom { grid-column: span 2; }
.buy-card.mine { border-color: var(--brand); }   /* 月費會員：本月開通的那個方案 */
#buy-member .buy-grid { margin-top: 10px; }
.buy-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--k-c0baca); }
.buy-tag { font-size: 11px; color: var(--brand-text); border: 1px solid var(--brand-line); border-radius: 4px; padding: 0 6px; white-space: nowrap; }
.buy-points { font-size: 30px; font-weight: 800; color: var(--text); }
.buy-sub { font-size: 12px; color: var(--muted); min-height: 18px; }
.buy-price { font-size: 22px; font-weight: 700; margin-top: auto; padding-top: 12px; }
.s-btn.primary.buy-go { width: 100%; height: 38px; }
.s-btn.primary.buy-go:disabled { background: var(--panel-sel); color: var(--muted); cursor: not-allowed; opacity: 1; }
.buy-slider { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
/* 要蓋過 :is(#studio, .pc-fn-panel) input 的輸入框外觀（深色底、框、內距） */
:is(#studio, .pc-fn-panel) .buy-slider input[type=range] { flex: 1 1 120px; min-width: 0; background: none; border: 0; padding: 0; height: auto; accent-color: var(--brand); }
:is(#studio, .pc-fn-panel) input.buy-num[type=number] { width: 130px; }   /* 要蓋過 :is(#studio, .pc-fn-panel) input[type=number] 的 61px */
@media (max-width: 800px) { .buy-card.custom { grid-column: auto; } }   /* 側欄占掉 216 之後只排得下一欄 */

/* 創作者巔峰賽頁（studio.js contestPage）：樣式在 contest/contest.css；這裡只把整個內容區換成同一個底色 */
.main:has(> #s-body > .ct) { background: #0b0b10; }
.ver { font-size: 13px; color: var(--k-c0baca); padding-top: 18px; line-height: 2; white-space: nowrap; display: flex; flex-direction: column; }
.ver small { font-size: 12px; color: var(--k-7f798e); }

.toppills .nav-toggle, .nav-scrim { display: none; }   /* 手機斷點才打開；要比 .pill 的 inline-flex 更具體 */

/* ── 上方標題列（首頁與專案頁共用；2026-10-01 設計稿：72 高、#101015 底、下緣分隔線，左邊「工作室 / 這頁」、右邊按鈕）── */
.toppills {
  position: fixed; top: 0; left: var(--side-w); right: 0; height: var(--top-h); z-index: 30;
  display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 0 32px;
  background: var(--side); border-bottom: 1px solid var(--side-line);
}
.top-crumb { margin-right: auto; color: var(--muted); font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel-2);
  color: var(--k-eeebf8); font-size: 15px; cursor: pointer; white-space: nowrap; text-decoration: none;
}
.pill:hover { border-color: var(--line-2); background: var(--panel-sel); }
.pill em { font-style: normal; color: var(--muted); margin-left: 6px; }
.pill.solid { background: var(--brand); color: #fff; border-color: transparent; }
.canvas-top .pill { height: 36px; padding: 0 11px; font-size: 12px; }   /* 製作過程頁的「複製成我的專案」維持原尺寸：放大會壓到中間的切換鈕 */
.pill.solid:hover { background: var(--brand-hi); }
#who { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }   /* 「帳號（超級管理員）」可以很長 */
.usermenu { position: relative; }
/* 右邊這排跟畫布右上角同一套（使用者 2026-10-10 msg 3200 a）：✦ 購買點數、開通會員、⚡ 點數、頭像（名字第一個字） */
.pill.pill-ic { width: 40px; padding: 0; justify-content: center; }
.pill.vip .soon { font-size: 11px; color: var(--k-7fd6ff); border: 1px solid var(--k-2a4c5e); border-radius: 6px; padding: 1px 6px; }
#btn-credits { gap: 4px; }
#btn-credits em { margin-left: 0; color: inherit; }
.pill.who-avatar { position: relative; width: 40px; padding: 0; justify-content: center; border-radius: 50%; background: var(--k-3b2f6b); font-weight: 700; }
.pill.who-avatar #who { display: none; }
.pill.who-avatar.has-unread::after { content: ""; position: absolute; top: 1px; right: 1px; width: 10px; height: 10px; border-radius: 50%;
  background: #e5484d; border: 2px solid var(--side); }
/* 沒登入：還是原本那顆「登入」（不是圓的頭像） */
body.anon .pill.who-avatar { width: auto; padding: 0 15px; border-radius: var(--radius); background: var(--panel-2); font-weight: 400; }
body.anon .pill.who-avatar #who { display: inline; }
body.anon .pill.who-avatar:hover { background: var(--panel-sel); }
.menu-title { padding: 6px 15px 8px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.menu-title:empty { display: none; }
.menu-n { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e5484d; color: #fff;
  font-size: 11px; line-height: 18px; text-align: center; }
.menu-n[hidden] { display: none; }
.menu {
  position: absolute; right: 0; top: 48px; width: 192px; padding: 8px; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .33);
}
.menu button {
  display: flex; align-items: center; gap: 8px; padding: 9px 15px; border: 0; border-radius: var(--radius);
  background: none; color: var(--k-eeebf8); font-size: 15px; cursor: pointer; text-align: left;
}
.menu button:hover { background: var(--panel-sel); }

/* ── 主區（Figma：內容從側欄右邊 34 開始，右邊留 46；新建畫布在 y=92）── */
/* 從標題列下面開始（不是整頁高再用 padding 讓位）：不然固定的標題列會蓋住捲軸最上面那一截（Windows 那種不浮動的捲軸看得到） */
.main { flex: 1; min-width: 0; margin-top: var(--top-h); height: calc(100vh - var(--top-h)); overflow-y: auto; padding: 30px 32px 64px; }
/* TV Show 頁（#/tvshow）：首頁只留 TV Show 那一塊 */
body.tvshow-page #main > :not(#tvshow) { display: none; }
.spacer { flex: 1; }

/* 新建畫布（設計稿：208 高、淡紫框、點點底；右下角「與 Agent 討論需求」）*/
.hero {
  position: relative; margin: 0 0 32px; min-height: 208px; display: flex; border: 1px solid var(--k-9f87db); border-radius: 12px;
  background-color: var(--panel); background-image: radial-gradient(var(--k-302a3e) 1px, transparent 1px); background-size: 24px 24px;
}
.canvas-entry {
  flex: 1; border: 0; border-radius: 12px; background: transparent; color: var(--k-ffffff); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; cursor: pointer; font-size: 15px; font-weight: 700;
}
.canvas-entry .plus {
  width: 72px; height: 64px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: var(--k-ffffff);
  display: grid; place-items: center;
}
.canvas-entry:hover .plus { border-color: var(--line-2); }
.hero-agent {
  position: absolute; right: 26px; bottom: 28px; white-space: nowrap; height: 44px; padding: 0 15px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--panel-2); color: var(--k-eeebf8); font-size: 15px; cursor: pointer;
}
.hero-agent:hover { border-color: var(--line-2); background: var(--panel-sel); }

/* 創作工具（設計稿：120 高、圖示在上、名稱在下）*/
.tools { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 16px; }   /* 7 個工具（10/12 從 10 個合併，msg 3886）*/
.tool {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 120px; padding: 22px 12px 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--k-eeebf8); cursor: pointer; font-size: 15px; min-width: 0;
}
.tool:hover { border-color: var(--line-2); background: var(--panel-sel); }
.tool .name { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.block { margin-bottom: 34px; }
.block h2 { font-size: 24px; font-weight: 700; margin: 0 0 18px; line-height: 1.3; }
.block-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.block-head h2 { margin: 0; }

/* 繼續創作：最近的專案（有預覽就放預覽 .rp-cover；沒有就點點底＋畫幅）*/
.rp-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.rp-card { min-width: 0; color: inherit; text-decoration: none; }
.rp-thumb {
  height: 152px; border-radius: 12px; border: 1px solid var(--line-soft); display: grid; place-items: center;
  background-color: var(--panel); background-image: radial-gradient(var(--k-302a3e) 1px, transparent 1px); background-size: 20px 20px;
  color: var(--muted); font-size: 13px;
}
.rp-card:hover .rp-thumb { border-color: var(--line-2); }
.rp-thumb { overflow: hidden; }
/* 整張放得下（msg 3132：裁成橫條只看得到上半部、看不出是什麼）；兩側留底色 */
.rp-cover { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; background: var(--k-101015); }
/* 設定封面的框（studio.js setCover；msg 4835 a）：畫布上的圖、影片排成一格一格，選中的加框 */
.s-cover-box { display: grid; gap: 10px; }
/* 影片翻譯、投流素材剪輯的選項（studio.js translateVideo、clipEpisodes） */
.s-check { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.s-las-langs { flex-wrap: wrap; gap: 6px 14px; max-height: 180px; overflow: auto; }
.s-cover-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; max-height: 260px; overflow: auto; }
.s-cover-opt { aspect-ratio: 1; padding: 0; border: 2px solid transparent; border-radius: 8px; background: var(--k-101015); overflow: hidden; cursor: pointer; }
.s-cover-opt img { width: 100%; height: 100%; object-fit: contain; display: block; }
.s-cover-opt.on { border-color: var(--brand); }
/* 空專案的底圖（studio.js coverOf；msg 4835 a）：還沒有任何圖或影片時 */
.rp-empty { width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 4px; color: var(--muted);
  background: linear-gradient(135deg, var(--brand-soft), transparent 70%); font-size: 13px; }
.rp-empty svg { color: var(--brand-text); opacity: .8; }
.rp-empty small { font-size: 11px; opacity: .7; }
/* 影片的預覽（studio.js coverOf）：第一格的小圖在下、小影片疊在上面，播的時候才露出來 */
.rp-cover-stack { position: relative; }
.rp-cover-stack > .rp-cover { position: absolute; inset: 0; }
.rp-cover-video { opacity: 0; transition: opacity .15s; }
.rp-cover-video.on { opacity: 1; }
.rp-name { margin-top: 10px; font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-sub { margin-top: 4px; font-size: 13px; color: var(--muted); }

.tabs-row { display: flex; align-items: center; gap: 16px; margin-bottom: 17px; }
.tabs { display: flex; gap: 29px; }
.tab { position: relative; padding: 0 0 8px; color: var(--muted); cursor: pointer; font-size: 16px; font-weight: 700; }
.tab:hover { color: var(--k-dddddd); }
.tab.active { color: var(--k-ffffff); }
.tab.active::after { content: ""; position: absolute; left: 1px; bottom: 0; width: 30px; height: 3px; background: var(--brand-line); }
.search { margin-left: auto; position: relative; display: flex; align-items: center; }
.search input {
  width: 240px; height: 36px; padding: 0 34px 0 14px; border-radius: 99px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); font-size: 13px; outline: none;
}
.search input:focus { border-color: var(--line-2); }
.search .ic { position: absolute; right: 13px; color: var(--muted); pointer-events: none; }

/* 最新上線（Figma：380×195 一張接一張，下方 91 高的漸層放 20 粗體片名、12 粗體 @作者 #ccc）*/
.strip { display: flex; overflow-x: auto; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.poster {
  flex: 0 0 380px; height: 195px; position: relative; overflow: hidden; cursor: pointer; background: var(--panel-2);
}
.poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.poster:hover img { transform: scale(1.04); }
.poster::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 91px; background: linear-gradient(transparent, rgba(0,0,0,.72)); }
.poster .p-text { position: absolute; left: 23px; right: 16px; bottom: 8px; z-index: 1; min-width: 0; }
.poster .cap { color: #f8f7fb; font-size: 20px; font-weight: 700; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poster .by { font-size: 12px; font-weight: 700; color: #ccc; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* TV Show（Figma：304×242，圖 172 高；片名 16、作者與 ♡ 14 #808080；8% 白底、8px 圓角、間距 22）*/
.grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; }
.card { cursor: pointer; background: var(--panel-2); border-radius: var(--radius); overflow: hidden; min-width: 0; }
.card .thumb { aspect-ratio: 304 / 172; background: var(--panel); position: relative; overflow: hidden; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.card:hover .thumb img { transform: scale(1.04); }
.card .badge { display: none; }   /* 設計稿的卡片上沒有角標 */
.card .meta { padding: 15px 21px 17px; }
.card .cap { font-size: 16px; line-height: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 卡片底 #1a1822：#808080 在上面 14px 字對比不夠 4.5:1，這裡用亮一點的灰 */
.card .sub { font-size: 14px; color: var(--k-999999); display: flex; align-items: center; gap: 16px; margin-top: 7px; min-width: 0; line-height: 17px; }
.card .sub span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .likes { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.more { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 30px; }
.more button {
  height: 36px; padding: 0 22px; border-radius: 99px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); cursor: pointer;
}
.more span { color: var(--muted); font-size: 16px; }
.more #count { font-size: 12px; }
.empty { color: var(--muted); padding: 30px 0; }

/* ── 詳情頁 ─────────────────────────────── */
/* 2026-10-01 設計稿：參考作品播放器、製作過程維持全螢幕（不放進側欄版面），只換成同一套配色與按鈕 */
.detail {
  position: fixed; inset: 0; background: var(--bg); z-index: 40; display: flex; flex-direction: column;
}
.detail-top { display: flex; align-items: center; gap: 12px; padding: 14px 24px; background: var(--side); border-bottom: 1px solid var(--side-line); }
.back {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--k-eeebf8);
  border-radius: var(--radius); padding: 8px 14px; cursor: pointer; flex: none; white-space: nowrap;
}
.back:hover { border-color: var(--line-2); background: var(--panel-sel); }
.avatar { flex: none; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #7a1540, #2a2a30); }
.author { font-weight: 600; flex: none; white-space: nowrap; max-width: 20vw; overflow: hidden; text-overflow: ellipsis; }   /* 不被片名擠成直排；太長的作者名自己收掉 */
.divider { color: var(--k-3a3a42); }
.d-title { color: var(--k-ffffff); font-size: 18px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-meta { text-align: right; font-size: 12px; color: var(--muted); line-height: 1.4; flex: none; white-space: nowrap; }   /* 片名一個吸收全部空間（長片名用 … 收掉） */
.stage { flex: 1; display: grid; place-items: center; overflow: hidden; background: #060609; }
.stage video, .stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.actions { display: flex; justify-content: center; gap: 10px; padding: 14px 0; }
.round {
  height: 42px; min-width: 42px; padding: 0 15px; border-radius: var(--radius); cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--k-eeebf8);
}
.round:hover { background: var(--panel-sel); border-color: var(--line-2); }
.round.wide { padding: 0 18px; background: var(--brand); border-color: transparent; color: #eeebf8; }
.round.wide:hover { background: var(--brand-hi); }
.filmstrip { display: flex; gap: 10px; padding: 0 20px 20px; overflow-x: auto; }
/* 播放中沒動作（app.js detailIdle）：按鈕列、縮圖帶收起來，影片拿到整個畫面；「收起縮圖」只收縮圖帶 */
.detail.watching .actions, .detail.watching .filmstrip, .detail.strip-off .filmstrip { display: none; }
.detail.watching { cursor: none; }
.filmstrip img {
  height: 120px; width: 190px; object-fit: cover; border-radius: var(--radius); cursor: pointer;
  opacity: .55; border: 2px solid transparent;
}
.filmstrip img:hover, .filmstrip img.on { opacity: 1; border-color: var(--brand-hi); }

/* ── 參考作品的畫布（唯讀）─────────────── */
.canvas-view { position: fixed; inset: 0; background: var(--bg); z-index: 50; display: flex; flex-direction: column; }
.canvas-top { display: flex; align-items: center; gap: 12px; padding: 14px 22px; position: relative; background: var(--side); border-bottom: 1px solid var(--side-line); }
/* 工作流／故事板切換：放在正中間（LibTV 同位置） */
.c-modes {
  position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; padding: 3px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
}
.c-mode {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 6px;
  background: none; color: var(--muted); font-size: 13px; cursor: pointer;
}
.c-mode:hover { color: var(--k-ffffff); }
.c-mode.on { background: var(--panel-sel); color: var(--brand-text); }
.c-title { font-size: 15px; font-weight: 700; }
.readonly { color: var(--dim); font-size: 12px; }
.close { width: 36px; height: 36px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); color: var(--k-eeebf8); font-size: 15px; cursor: pointer; }
.close:hover { border-color: var(--line-2); background: var(--panel-sel); }
.viewport { flex: 1; overflow: hidden; position: relative; cursor: grab;
  background-image: radial-gradient(var(--k-302a3e) 1px, transparent 1px); background-size: 20px 20px; }
.viewport.drag { cursor: grabbing; }
.world { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.edges { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
.edges path { fill: none; stroke: var(--k-5b4a7d); stroke-width: 1.4; }
/* 選了一個節點：它的線亮起來，其他淡掉 */
.edges.focus path { stroke: var(--k-2f2840); }
.edges.focus path.on { stroke: var(--k-9b75ff); stroke-width: 2.4; }
.nodes { position: absolute; top: 0; left: 0; }

.gnode {
  position: absolute; border: 1px dashed var(--k-3d3d44); border-radius: 12px; background: var(--k-ffffff-015);
}
.gnode .glabel { position: absolute; top: -22px; left: 4px; font-size: 12px; color: var(--k-7a7a83); }
.node {
  position: absolute; background: var(--k-191720); border: 1px solid var(--k-40364f); border-radius: 10px;
  overflow: hidden; display: flex; flex-direction: column;
}
.node { cursor: pointer; }
.node:hover { border-color: var(--k-6b5a8a); }
.node.sel { border-color: var(--k-9b75ff); box-shadow: 0 0 0 2px var(--k-9b75ff-45); }
/* 標頭只留「類型＋名稱」一行小字，其餘給圖／影片本身（LibTV 的卡片就是素材本身） */
.node .nhead {
  display: flex; gap: 6px; align-items: center; padding: 4px 8px; font-size: 11px; min-width: 0;
  color: var(--k-eeebf8); background: var(--k-16141c); white-space: nowrap;
}
.node .nhead .nm { overflow: hidden; text-overflow: ellipsis; }
.node .kind { color: var(--k-9aa7ff); }
.node .kind.video { color: var(--k-ffb17a); }
.node .kind.audio { color: var(--k-7ad3a8); }
.node .kind.text { color: var(--k-c9a0ff); }
.node .nbody { flex: 1; min-height: 0; }
.node .nbody img, .node .nbody video { width: 100%; height: 100%; object-fit: cover; display: block; }
.node .nbody audio { width: 100%; margin-top: 30px; }
.node .ptext { padding: 8px; font-size: 11px; line-height: 1.5; color: var(--k-c3c3cb); overflow: hidden; }
.node .nofile { display: grid; place-items: center; height: 100%; color: var(--k-55555e); font-size: 12px; }
.canvas-foot {
  display: flex; align-items: center; gap: 12px; padding: 10px 22px;
  font-size: 12px; color: var(--muted);
}
.canvas-foot button {
  background: var(--k-1f1f21); border: 1px solid var(--k-ffffff-32); color: var(--text);   /* --line-2 改成「滑過的紫框」了：這顆平常就要亮一點的白框 */
  border-radius: var(--radius); padding: 3px 10px; cursor: pointer;
}
/* ── 節點說明框（工作流、故事板共用）── */
.np {
  position: fixed; right: 18px; top: 72px; max-height: calc(100vh - 132px); width: 360px; overflow: auto; z-index: 60;
  background: var(--k-1b1b1d); border: 1px solid var(--line-strong); border-radius: 12px; padding: 14px 16px 18px;
  font-size: 13px; line-height: 1.7; box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.np-head { display: flex; align-items: center; gap: 8px; }
.np-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-kind { font-size: 11px; padding: 1px 7px; border-radius: 99px; background: var(--k-9aa7ff-15); color: var(--k-9aa7ff); }
.np-kind.video { background: var(--k-ffb17a-15); color: var(--k-ffb17a); }
.np-kind.audio { background: var(--k-7ad3a8-15); color: var(--k-7ad3a8); }
.np-kind.text { background: var(--k-c9a0ff-15); color: var(--k-c9a0ff); }
.np-close { background: none; border: 0; color: var(--muted); font-size: 15px; cursor: pointer; padding: 2px 4px; }
.np-close:hover { color: var(--k-ffffff); }
.np-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.np-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { font-size: 11px; line-height: 1; padding: 5px 8px; border-radius: 99px; border: 1px solid var(--line-strong); color: var(--k-cfcfd4); }
.np-media { display: block; width: 100%; max-height: 240px; object-fit: contain; background: #000; border-radius: 8px; margin-top: 12px; }
.np audio { width: 100%; margin-top: 12px; }
.np-label { margin-top: 14px; color: var(--muted); font-size: 12px; }
.np-refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.np-text { margin-top: 6px; color: var(--k-dedee3); white-space: pre-wrap; overflow-wrap: anywhere; }
/* 參考素材縮圖：左上角編號，跟提示詞裡的「圖片 3」對得起來 */
.rthumb {
  position: relative; width: 48px; height: 48px; padding: 0; border: 1px solid var(--line-strong); border-radius: 6px;
  overflow: hidden; background: #111; cursor: pointer; flex: 0 0 auto;
}
.rthumb.sm { width: 36px; height: 36px; }
.rthumb:hover:not(:disabled) { border-color: var(--k-9b75ff); }
.rthumb:disabled, .rchip:disabled { cursor: default; opacity: .6; }   /* 指向已刪掉的節點 */
.np:focus { outline: none; }
.sb-item:focus-visible { outline: 2px solid var(--k-9b75ff); outline-offset: 2px; }
.rthumb img, .rthumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rthumb .rglyph { display: grid; place-items: center; height: 100%; color: var(--k-7ad3a8); font-size: 16px; }
.rthumb .rglyph:only-child, .rthumb .rglyph { line-height: 1; }
.rthumb .rnum {
  position: absolute; left: 2px; top: 2px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 99px;
  background: rgba(0, 0, 0, .7); color: #fff; font-size: 10px; line-height: 16px; text-align: center;
}
/* 提示詞裡的參考小標籤 */
.rchip {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; margin: 0 2px; padding: 1px 6px 1px 2px;
  border: 1px solid var(--k-9b75ff-45); border-radius: 6px; background: var(--k-9b75ff-12);
  color: var(--k-d6c8ff); font: inherit; font-size: 12px; line-height: 1.5; cursor: pointer;
}
.rchip img { width: 18px; height: 18px; border-radius: 3px; object-fit: cover; }
.rchip:hover:not(:disabled) { background: var(--k-9b75ff-25); }

/* ── 故事板：三欄（音訊＋文字／圖片／影片），每欄自己捲 ── */
.story {
  flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 12px; padding: 0 12px 12px;
}
.np-open .story { padding-right: 392px; }   /* 說明框開著時讓出右邊，不要蓋住影片欄 */
.sb-col { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.sb-left .sb-sec:first-child { flex: 0 1 auto; max-height: 40%; }
.sb-sec {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--k-ffffff-08); border-radius: 12px;
}
.sb-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 8px; font-size: 15px; font-weight: 600; }
.sb-count { font-size: 12px; font-weight: 400; color: var(--muted); }
.sb-list { flex: 1; min-height: 0; overflow: auto; padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.sb-left .sb-sec:first-child .sb-list { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.sb-empty { color: var(--muted); font-size: 13px; padding: 6px 0; }
.sb-item {
  padding: 10px 8px 12px; border-radius: 8px; cursor: pointer; border: 1px solid transparent;
  border-bottom-color: var(--k-ffffff-06);
}
.sb-item:hover { background: var(--k-ffffff-03); }
.sb-item.sel { border-color: var(--k-9b75ff); background: var(--k-9b75ff-08); }
.sb-name { font-size: 12px; color: var(--k-cfcfd4); margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-media { display: block; max-width: 100%; max-height: 220px; border-radius: 8px; background: #0e0e0f; }
img.sb-media { min-width: 160px; min-height: 90px; object-fit: contain; }   /* 還沒載到時先佔位，不然排在後面的一路擠上來 */
.sb-video { position: relative; display: inline-block; max-width: 100%; }
.sb-video .sb-media { min-width: 160px; min-height: 90px; }
.sb-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: rgba(0, 0, 0, .6); color: #fff; font-size: 14px; cursor: pointer;
}
.sb-refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sb-text { font-size: 12px; color: var(--k-c3c3cb); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
/* 音訊：小方塊（LibTV 同樣做法） */
.sb-item.audio { width: 76px; padding: 6px; text-align: center; border-bottom-color: transparent; }
.sb-item.audio .sb-name { order: 2; margin: 4px 0 0; font-size: 11px; }
.sb-item.audio { display: flex; flex-direction: column; align-items: center; }
.sb-audio { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 8px; background: var(--k-232325); color: var(--k-7ad3a8); font-size: 18px; }

/* 訊息要放在 #world 外面：#world 帶著縮放，縮到 4% 的時候字會小到看不見 */
.canvas-msg {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 2;
  color: var(--muted); pointer-events: none;
}

/* ── 專案／素材庫（studio.js；Figma 項目1／項目2：麵包屑與右上按鈕同一列；輸入框 36 高、4 圓角、4% 白底 20% 白框）── */
/* 上方標題列固定在頂端：麵包屑放在它下面（2026-10-01 前跟右上那排同一行，要量那排的寬度讓位） */
/* 2026-10-01 設計稿：每頁上方是大標題。麵包屑最後一段（目前這頁）放大當標題，前面「首頁 ›」縮小變灰，留著點回去 */
.crumbs { display: flex; align-items: center; gap: 8px; min-height: 36px; margin: 0 0 24px; min-width: 0; color: var(--muted); }
.crumbs > .ic, .s-title > .ic { color: var(--muted); }
.s-title > span:last-child { font-size: 26px; font-weight: 700; color: var(--k-ffffff); line-height: 1.3; }
.crumb { background: none; border: 0; padding: 0; color: var(--muted); font-size: 13px; cursor: pointer; flex-shrink: 0; white-space: nowrap; }
.crumb:hover { color: var(--brand-text); }
.s-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 16px; font-weight: 400; margin: 0; white-space: nowrap; }
.s-title > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
a.crumb { text-decoration: none; font-size: 13px; }
#s-body { display: flex; flex-direction: column; gap: 24px; max-width: 1400px; }
.s-panel { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* 2026-10-01 設計稿：工作室裡的區塊都是卡片（#16161e、12 圓角、22 內距）。AI 助手的對話區自己有版面，不套 */
:is(#studio, .pc-fn-panel) .s-panel:not(.ag-panel) { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px; padding: 22px; }
.s-panel-title { font-size: 16px; font-weight: 700; }
/* 專案頁的大標題列（取代麵包屑）：左邊片名＋「項目 / 片名」，右邊 AI 助手、打開畫布、儲存 */
.has-head .crumbs { display: none; }
.s-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.s-head-main { min-width: 0; }
.s-head h1 { font-size: 26px; line-height: 1.3; margin: 0 0 6px; overflow-wrap: anywhere; }
.s-head-sub { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.s-head-sub a { color: inherit; text-decoration: none; }
.s-head-sub a:hover { color: var(--brand-text); }
.s-head .s-btn { height: 44px; font-size: 15px; }
.s-btn.primary.s-save { min-width: 0; height: 44px; }
/* 專案設定：標籤在上、欄位在下 */
.s-field { display: flex; flex-direction: column; gap: 8px; color: var(--k-aaa5b5); font-size: 14px; min-width: 0; }
:is(#studio, .pc-fn-panel) .s-field input, :is(#studio, .pc-fn-panel) .s-field select, :is(#studio, .pc-fn-panel) .s-field input[type=number] { width: 100%; height: 42px; }
.s-field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.s-row { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; }
.s-row > input { flex: 1 1 180px; min-width: 0; }
.s-row label { display: flex; align-items: center; gap: 12px; color: var(--k-ffffff); font-size: 14px; min-width: 0; }
/* 我的聲音（studio.js cloneBox；聲音複製）：表單一欄一列、手機也不會擠出畫面 */
.s-clone { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.s-clone audio { height: 32px; max-width: 100%; }
.s-clone-form { display: flex; flex-direction: column; gap: 8px; }
.s-clone-form > label { display: flex; align-items: center; gap: 12px; font-size: 14px; min-width: 0; }
.s-clone-form input[type=text], .s-clone-form input[type=file] { flex: 1 1 180px; min-width: 0; }
.s-row label.grow, .s-row .grow { flex: 1 1 200px; }
.s-row label.grow input { flex: 1; min-width: 0; }
.studio { min-width: 0; }   /* body 是 flex：不設的話寬的表單會把整頁撐出畫面外（手機實測） */
:is(#studio, .pc-fn-panel) input, :is(#studio, .pc-fn-panel) select, :is(#studio, .pc-fn-panel) textarea {
  background: var(--k-101015); border: 1px solid var(--line); color: var(--text);   /* 設計稿：比卡片深一點的底、8 圓角（後台 .cs-input 同一套） */
  border-radius: var(--radius); padding: 0 14px; height: 36px; font: inherit; font-size: 14px; outline: none;
}
:is(#studio, .pc-fn-panel) textarea { height: auto; padding: 16px 14px; width: 100%; resize: vertical; line-height: 1.6; }
:is(#studio, .pc-fn-panel) select { padding-right: 8px; }
:is(#studio, .pc-fn-panel) input:focus, :is(#studio, .pc-fn-panel) select:focus, :is(#studio, .pc-fn-panel) textarea:focus { border-color: var(--line-2); }
:is(#studio, .pc-fn-panel) input::placeholder, :is(#studio, .pc-fn-panel) textarea::placeholder { color: var(--k-ffffff-5); }
:is(#studio, .pc-fn-panel) input[type=number] { width: 61px; padding: 0 10px; }
/* 跳出來的視窗（.s-ask-shade，掛在 body 底下、不在 #studio 裡）：輸入框原本是瀏覽器預設的白底（使用者 2026-10-15 msg 4966：爆款配方視窗）。
   跟上面同一套外觀；已經有 .s-ask-input 樣式的不動 */
.s-ask-shade :is(input:not([type=radio], [type=checkbox], [type=range], [type=file], [type=color], .s-ask-input), select:not(.s-ask-input), textarea:not(.s-ask-input)) {
  background: var(--k-101015); border: 1px solid var(--line); color: var(--text); border-radius: var(--radius);
  padding: 0 12px; height: 36px; font: inherit; font-size: 14px; outline: none; }
.s-ask-shade textarea:not(.s-ask-input) { height: auto; padding: 12px 14px; resize: vertical; line-height: 1.6; }
.s-ask-shade :is(input, select, textarea):focus { border-color: var(--line-2); }
.s-ask-shade :is(input, textarea)::placeholder { color: var(--k-ffffff-5); }
.s-ask-shade :is(input[type=radio], input[type=checkbox], input[type=range]) { accent-color: var(--brand); }
:is(#studio, .pc-fn-panel) input[type=file] { height: auto; padding: 6px 10px; max-width: 100%; min-width: 0; }   /* 手機上不要撐出卡片 */
.s-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel-2);
  color: var(--k-eeebf8); cursor: pointer; font-size: 13px; white-space: nowrap;
}
.s-btn:hover { border-color: var(--line-2); background: var(--panel-sel); }
.s-btn.primary { height: 39px; min-width: 148px; padding: 0 20px; border-radius: var(--radius); background: var(--brand); color: #fdfdfd; border-color: transparent; font-size: 14px; }
.s-btn.primary:hover { background: var(--brand-hi); }
.s-btn.danger { background: var(--orange); color: #fdfdfd; border-color: rgba(245, 159, 0, .2); }
.s-btn.danger:hover { filter: brightness(1.08); }
.s-link.danger { color: var(--k-ff9a6b); }
.s-btn:disabled, .s-link:disabled { opacity: .45; cursor: default; }
.s-link { background: none; border: none; color: var(--brand-text); cursor: pointer; font-size: 13px; padding: 2px 4px; }
.s-link:hover { color: var(--k-ffb3cf); }
.s-muted { color: var(--muted); font-size: 13px; }
.s-warn { color: var(--gold); font-size: 13px; }
/* 專案頁的製作流程進度（需求 → 劇本 → 分鏡 → 角色場景 → 逐鏡 → 組裝成片 → 完成）。設計稿：一條卡片、「01 劇本」平均排開、目前這步淡紫 */
.s-steps-row { padding: 18px 22px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--panel); }
.s-steps { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 16px; list-style: none; margin: 0; padding: 0; min-width: 0; }
.s-step { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.s-dot { color: var(--k-635c70); font-size: 13px; }
.s-step.done { color: var(--k-cfcfd4); }
.s-step.done .s-dot { color: var(--k-cfcfd4); }
.s-step.now, .s-step.now .s-dot { color: var(--brand-text); font-weight: 600; }
/* 角色與場景（第 3 步） */
.s-cast-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.s-cast { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: var(--panel); }
.s-cast .s-row { gap: 8px; align-items: center; flex-wrap: wrap; }
.s-cast-text { margin-top: 6px; font-size: 13px; color: var(--k-cfcfd4); white-space: pre-wrap; overflow-wrap: anywhere; }
.s-shot-cast { gap: 6px; flex-wrap: wrap; margin: 4px 0; }
/* 逐鏡生成（第 5 步） */
.s-gen-box { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.s-gen-box .s-row { gap: 8px; align-items: center; flex-wrap: wrap; }
.s-gen-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.s-gen { padding: 8px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); }
.s-gen.adopted { border-color: var(--brand); }
.s-gen.failed { border-color: var(--k-ff7864-5); }
.s-gen-on { background: var(--brand); color: #fff; }
/* 高度先固定（測試紀錄 N-03）：每 4 秒換掉生成清單時，新的 lazy 圖載入前是 0 高、載入後又撐開，下面整段上下跳，正要點的「生成圖」位置會換成旁邊的「素材」 */
.s-gen-media { display: block; width: auto; max-width: 100%; height: 220px; object-fit: contain; margin-top: 6px; border-radius: 6px; background: #000; }
.s-gen-slots { margin-left: 8px; font-size: 13px; font-weight: normal; }
/* 參考素材選擇器（studio.js assetChooser／refStrip） */
.s-ref-chooser { margin-top: 8px; }
.s-ref-panel { margin-top: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; }
.s-ref-grid, .s-ref-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-top: 8px; }
.s-ref-item { display: flex; flex-direction: column; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 6px;
  background: transparent; color: inherit; font: inherit; font-size: 12px; text-align: left; cursor: default; min-width: 0; }
button.s-ref-item { cursor: pointer; }
button.s-ref-item:hover { border-color: var(--line-2); }
.s-ref-item .s-card-img { width: 100%; height: 80px; margin: 0; object-fit: cover; border-radius: 4px; }
.s-ref-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-link.on { font-weight: 700; text-decoration: underline; }
.s-tag { font-size: 11px; padding: 1px 7px; border-radius: 99px; background: var(--k-ffffff-1); color: var(--k-dddddd); }
.s-card-tags { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 4px 0; align-items: center; }
.s-tag-edit { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--k-ffffff-08); display: grid; gap: 6px; }
.s-tag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.s-tag-grid label { display: grid; gap: 2px; font-size: 12px; }
.s-tag-grid input { min-width: 0; }
.s-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.s-card {
  display: block; background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px;
  padding: 18px; color: inherit; text-decoration: none; min-width: 0; overflow: hidden;
}
/* 素材卡的縮圖：貼齊卡片上緣與左右（設計稿 190 高） */
.s-card-img { display: block; width: calc(100% + 36px); height: 190px; margin: -18px -18px 16px; object-fit: cover; background: var(--k-101015); }
.s-card-img.none { display: grid; place-items: center; color: var(--muted); font-size: 13px;
  background-image: radial-gradient(var(--k-302a3e) 1px, transparent 1px); background-size: 20px 20px; }
a.s-card:hover { border-color: var(--line-2); }
.s-card-title { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.s-card-sub { color: var(--k-cccccc); font-size: 14px; margin: 5px 0; overflow-wrap: anywhere; }
.s-card-meta { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
/* 「項目」頁（使用者 2026-10-12 msg 3896：對齊 LibTV 的「全部項目」）：上面一行標題＋搜尋＋回收站＋新建資料夾，下面一排 5 張卡片 */
.s-plist-head { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; flex-wrap: wrap; }
.s-plist-back { display: inline-flex; align-items: center; gap: 4px; color: var(--text); text-decoration: none; font-size: 14px; }
.s-plist-sep { width: 1px; height: 18px; background: var(--line-2); }
.s-plist-title { margin: 0; font-size: 20px; font-weight: 700; }
.s-plist-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.s-plist-search { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); color: var(--muted); }
.s-plist-search .s-plist-q { width: 180px; height: 100%; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  color: var(--text); font: inherit; font-size: 13px; outline: none; }
.s-plist-search:focus-within { border-color: var(--line-2); }
.s-plist-tools .s-btn { height: 36px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.s-plist-note { margin: -8px 0 16px; color: var(--muted); font-size: 13px; }
.s-pgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px 16px; }
.s-pcard { position: relative; display: block; min-width: 0; width: 100%; margin: 0; align-self: start; color: inherit; text-decoration: none;
  background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; }
div.s-pcard { cursor: default; }
.s-pcard-thumb { height: 140px; border-radius: 12px; border: 1px solid var(--line-soft); display: grid; place-items: center; overflow: hidden;
  color: var(--muted); font-size: 13px; background-color: var(--panel);
  background-image: radial-gradient(var(--k-302a3e) 1px, transparent 1px); background-size: 20px 20px; }
.s-pcard:hover .s-pcard-thumb, .s-pcard:focus-visible .s-pcard-thumb { border-color: var(--line-2); }
.s-pcard-new .s-pcard-thumb { background-image: none; background-color: var(--panel-2); grid-auto-flow: row; gap: 8px; align-content: center;
  color: var(--text); font-size: 14px; }
.s-pcard-plus { display: grid; place-items: center; }
.s-pcard-folder .s-pcard-thumb { background-image: none; grid-auto-flow: row; gap: 6px; align-content: center; }
.s-pcard-count { font-size: 12px; }
.s-pcard-name { margin-top: 10px; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-pcard-date { margin-top: 4px; color: var(--muted); font-size: 12px; }
.s-pcard-row { display: flex; gap: 8px; margin-top: 8px; }
.s-pcard-row .s-btn { height: 30px; padding: 0 12px; font-size: 13px; }
/* 卡片右上角的「⋯」：滑過才明顯，手機（沒有滑過）一直看得到 */
.s-pcard-more { position: absolute; top: 8px; right: 8px; z-index: 1; width: 30px; height: 30px; border: 0; border-radius: 8px;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s; }
.s-pcard:hover .s-pcard-more, .s-pcard-more:focus-visible, .s-pcard-more[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .s-pcard-more { opacity: 1; } }
.s-pcard-menu { position: absolute; top: 42px; right: 8px; z-index: 5; min-width: 140px; display: flex; flex-direction: column; padding: 6px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.s-pcard-menu button { border: 0; background: none; color: var(--text); font: inherit; font-size: 13px; text-align: left; padding: 8px 10px;
  border-radius: 6px; cursor: pointer; }
.s-pcard-menu button:hover, .s-pcard-menu button:focus-visible { background: var(--panel-2); }
.s-ask-input { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--k-101015);
  color: var(--text); font: inherit; font-size: 14px; }
.s-ask-area { height: auto; min-height: 120px; padding: 8px 10px; resize: vertical; line-height: 1.6; }   /* askText 多行（studio.js）*/
@media (max-width: 1360px) { .s-pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1080px) { .s-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .s-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; } .s-plist-search .s-plist-q { width: 120px; } }
.s-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.s-versions { display: flex; flex-direction: column; gap: 4px; }
.s-version { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 6px; border-radius: 4px; }
.s-version.on { background: var(--panel-sel); }
.s-shots { display: flex; flex-direction: column; gap: 10px; }
.s-shot { display: flex; gap: 10px; border: 1px solid var(--line); background: var(--panel); border-radius: 4px; padding: 10px; }
.s-seq { width: 26px; flex: 0 0 26px; text-align: center; color: var(--muted); font-weight: 600; padding-top: 8px; }
.s-shot-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.s-shot-actions { display: flex; flex-direction: column; align-items: stretch; }
.s-add { display: flex; flex-direction: column; gap: 15px; }
.s-media { border-top: 1px dashed var(--line); padding-top: 6px; font-size: 13px; }
.s-media summary { cursor: pointer; color: var(--muted); }
.s-link-row { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 4px; }
.s-link-row.on { background: var(--panel-sel); }
.s-link-row .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.s-log {
  background: var(--k-000000-3); border: 1px solid var(--line); border-radius: 4px; padding: 10px; margin: 0;
  font-size: 11px; color: var(--k-aaaaaa); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow: auto;
}
.s-outputs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.s-output { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.s-output video { width: 100%; aspect-ratio: 9 / 16; background: #000; border-radius: 4px; object-fit: contain; }
a.s-btn { text-decoration: none; }

/* ── 專案畫布（canvas.js；Figma 項目3：全螢幕點狀格線、左側 56 寬 16 圓角的工具列、左下角縮放）── */
.pc { position: fixed; inset: 0; background: var(--bg); z-index: 55; }
.pc-view { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none;
  background-image: radial-gradient(var(--k-302a3e) 1px, transparent 1px); background-size: 20px 20px; }
.pc-top {
  position: absolute; top: 44px; left: 55px; right: 36px; z-index: 3; display: flex; align-items: center; gap: 26px;
  pointer-events: none; flex-wrap: wrap;
}
.pc-top > * { pointer-events: auto; }
/* 右上角那排（分享、購買點數、會員、點數、帳號；照 LibTV）：左邊的標題列讓出它的實際寬度（登入與否、點數位數都會變） */
.pc-top { right: calc(var(--pc-tr-w, 100px) + 40px); }
.pc-topright { position: absolute; top: 36px; right: 24px; z-index: 4; display: flex; align-items: center; gap: 8px; }
.pc-topbtn { height: 40px; min-width: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 10px; border: 1px solid var(--k-34313f); background: var(--k-1d1c24); color: var(--k-e9e6f2); font-size: 14px; cursor: pointer; white-space: nowrap; }
.pc-topbtn:hover { border-color: var(--k-55506a); }
.pc-topbtn[hidden] { display: none; }
.pc-avatar { position: relative; width: 40px; padding: 0; border-radius: 50%; background: var(--k-3b2f6b); font-weight: 700; }
.pc-avatar.has-unread::after { content: ""; position: absolute; top: 1px; right: 1px; width: 10px; height: 10px; border-radius: 50%;
  background: #e5484d; border: 2px solid var(--bg); }
.pc-soon { font-size: 11px; color: var(--k-9a96aa); border: 1px solid var(--k-3a3746); border-radius: 6px; padding: 1px 6px; }
.pc-vip .pc-soon { color: var(--k-7fd6ff); border-color: var(--k-2a4c5e); }
.pc-topmenu { position: fixed; z-index: 80; width: 320px; max-width: calc(100vw - 16px); padding: 10px; border-radius: 14px; overflow-y: auto;
  background: var(--k-1d1c24); border: 1px solid var(--k-34313f); box-shadow: 0 12px 40px rgba(0, 0, 0, .6); display: flex; flex-direction: column; gap: 4px; }
.pc-toptitle { padding: 6px 10px 8px; font-size: 13px; color: var(--muted); }
.pc-topnote { padding: 4px 10px 8px; font-size: 13px; color: var(--k-c9c5d6); line-height: 1.5; }
.pc-topitem { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; text-align: left; width: 100%;
  padding: 10px; border-radius: 10px; border: 0; background: transparent; color: var(--k-f1eef8); cursor: pointer; }
.pc-topitem:hover:not(:disabled) { background: var(--k-2a2834); }
.pc-topitem:disabled { cursor: default; color: var(--k-8d899c); }
.pc-topitem-t { font-size: 14px; }
.pc-topitem-n { grid-column: 1; font-size: 12px; color: var(--muted); }
.pc-topitem .pc-soon { grid-column: 2; grid-row: 1 / span 2; }
.pc-toplink { margin: 0 10px 8px; padding: 8px; border-radius: 8px; border: 1px solid var(--k-3a3746); background: var(--k-14131a); color: var(--k-ffffff); font-size: 12px; }
/* 撐滿一整列才能在同一行用 … 收掉長片名；它不能點，所以讓滑鼠穿過去（不然會擋住底下畫布卡片的點擊） */
.pc-top > .pc-title { pointer-events: none; }
.pc-title { flex: 1 1 0; font-size: 16px; font-weight: 700; color: var(--k-ffffff); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-hint { color: var(--gold); font-size: 12px; }
.pc-tools {
  position: absolute; left: 39px; top: 50%; transform: translateY(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 27px 10px;
  width: 56px; background: var(--k-16161e-9); border: 1px solid var(--line-soft); border-radius: 16px; backdrop-filter: blur(8px);
  /* 視窗矮的時候不能蓋到左上的「回專案」與左下的縮放列（審查在 1280×480、手機橫放實測）：限高、放不下就捲 */
  max-height: calc(100vh - 195px); overflow-y: auto; scrollbar-width: none;   /* 「回專案」是 39 高的按鈕：上面留一點空隙 */
}
.pc-tools::-webkit-scrollbar { display: none; }
/* 還有工具在下面（視窗矮、工具列在捲）：底部淡出，看得出來可以往下捲（canvas.js 依捲動位置切換） */
/* 不用 mask-image：Chrome 在「有 backdrop-filter 的捲動容器」上套 mask 會把按鈕畫歪（實測） */
.pc-tools.has-more { box-shadow: inset 0 -28px 18px -14px rgba(0, 0, 0, .75); }
@media (max-height: 640px) {
  .pc-tools { gap: 6px; padding: 12px 10px; }
}
.pc-tool {
  width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 8px;
  background: none; color: var(--k-ffffff); cursor: pointer; padding: 0;
}
.pc-tool:hover { background: var(--panel-sel); }
.pc-tool.on { background: var(--brand-soft); color: var(--brand-text); }
.pc-tool-add { width: 39px; height: 38px; }
.pc-world { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.pc-edges { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }  /* 空白處要能拖著平移；線自己的 hit path 另外開 */
.pc-edge { fill: none; stroke: var(--k-6b5a8a); stroke-width: 1.6; pointer-events: none; }
.pc-edge-hit { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; pointer-events: stroke; }
.pc-edge-hit:hover { stroke: var(--k-6aa8ff-28); }
/* 選中的線、正在拉的線：發光的藍線（LibTV 的樣子） */
.pc-edge.on, .pc-edge.wire { stroke: var(--k-7cb8ff); stroke-width: 2.2; filter: drop-shadow(0 0 4px var(--k-5aa0ff-9)); }
.pc-edge.wire { stroke-dasharray: none; }
.pc-edge-del { position: absolute; z-index: 4; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--k-5d7fae); background: var(--k-1b2433); color: var(--k-cfe3ff); font-size: 13px; cursor: pointer; }
.pc-edge-del:hover { background: var(--k-2a3b55); }
/* 拉線時滑鼠底下那張卡片：放開就接上 */
.pc-drop { outline: 2px solid var(--k-7cb8ff); outline-offset: 3px; box-shadow: 0 0 18px var(--k-5aa0ff-45); }
/* 拖卡片時的對齊虛線 */
.pc-guide { position: absolute; z-index: 5; pointer-events: none; }
.pc-guide.v { width: 0; border-left: 1px dashed var(--k-7cb8ff); }
.pc-guide.h { height: 0; border-top: 1px dashed var(--k-7cb8ff); }
.pc-card {
  position: absolute; background: var(--k-191720); border: 1px solid var(--k-40364f); border-radius: 10px;
  display: flex; flex-direction: column; gap: 6px; padding: 0 8px 8px; cursor: default;
}
.pc-card.linking { border-color: var(--brand-hi); box-shadow: 0 0 0 2px var(--brand-soft); }
.pc-card.selected { border-color: var(--line-2); box-shadow: 0 0 0 2px var(--k-9b75ff-45); }
.pc-card.selected:not(.pc-group) { z-index: 1; }   /* 疊在一起時選中的那張在最上面：看到的就是點得到的（測試紀錄 B-09） */
/* 框選的框、右鍵選單、小地圖（canvas.js 操作手感） */
.pc-marquee { position: absolute; z-index: 3; border: 1px solid var(--line-2); background: var(--k-9b75ff-12);
  pointer-events: none; }
.pc-menu { position: fixed; z-index: 70; min-width: 170px; padding: 4px; border-radius: 8px; background: var(--panel);
  border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); display: flex; flex-direction: column; }
.pc-menu-item { text-align: left; padding: 7px 10px; border: 0; border-radius: 5px; color: var(--text); font-size: 13px;
  background: none; width: 100%; cursor: pointer; }
.pc-menu-item:hover:not(:disabled):not(.off) { background: var(--panel-sel); }
.pc-menu-item:disabled, .pc-menu-item.off { color: var(--muted); opacity: .6; cursor: default; }
.pc-mini { position: absolute; right: 16px; bottom: 16px; z-index: 2; width: 180px; height: 120px; border-radius: 8px;
  background: var(--k-101015-9); border: 1px solid var(--line); cursor: pointer; touch-action: none; }
.pc-foot #pc-select.on { background: var(--brand-soft); color: var(--brand-text); }
.pc-foot #pc-undo, .pc-foot #pc-redo, .pc-foot #pc-select { width: auto; padding: 0 10px; }
.pc-foot #pc-undo, .pc-foot #pc-redo { font-size: 16px; }
.pc-foot button:disabled { color: var(--k-6c6878); cursor: default; }   /* 不用 opacity：底下的卡片會透出來 */
/* 空白畫布：中間的起手按鈕（LibTV 的樣子）；不擋滑鼠，雙擊、拖曳照樣作用在畫布上 */
.pc-empty { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; display: flex;
  flex-direction: column; align-items: center; gap: 16px; pointer-events: none; max-width: calc(100vw - 32px); }
.pc-empty-hint { color: var(--muted); font-size: 13px; text-align: center; }
.pc-empty-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; pointer-events: auto; }
.pc-empty-btn { display: inline-flex; align-items: center; gap: 8px; min-width: 120px; height: 44px; padding: 0 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font-size: 13px; cursor: pointer; }
.pc-empty-btn:hover { border-color: var(--line-2); background: var(--panel-sel); }
.pc-menu-head { padding: 6px 10px 2px; color: var(--muted); font-size: 11px; }
/* 右鍵選單的「新增卡片 ›」：子選單（canvas.js menuAt）開在旁邊 */
.pc-menu-more { display: flex; justify-content: space-between; }
.pc-menu-more::after { content: "›"; color: var(--muted); }
.pc-submenu { z-index: 71; }
.pc-menu-sep { height: 1px; margin: 4px 6px; background: var(--line); }
/* 讓開左邊的工具列（約 100px 寬）：整個框往右挪、左右各留 112px，按鈕排不下就換行 */
.pc-empty { left: calc(50% + 48px); max-width: calc(100vw - 224px); }
/* 讓「改名」緊跟在名字後面、提示文字靠右；長名字照樣在一行裡用 … 收掉 */
.pc-top > .pc-title { flex: 0 1 auto; max-width: min(50vw, 520px); }
.pc-top > .pc-hint { margin-left: auto; }
.pc-rename { pointer-events: auto; height: 28px; padding: 0 10px; border-radius: var(--radius); background: var(--panel-2);
  border: 1px solid var(--line); color: var(--k-eeebf8); font-size: 12px; cursor: pointer; }
/* 從我的素材挑 */
.pc-pick { position: fixed; z-index: 72; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px));
  max-height: min(70vh, 640px); display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(0, 0, 0, .6); }
.pc-pick-top { display: flex; align-items: center; gap: 10px; }
.pc-pick-q { flex: 1; min-width: 0; background: var(--k-ffffff-04); border: 1px solid var(--line-strong); color: var(--text);
  border-radius: 6px; padding: 6px 10px; font: inherit; font-size: 13px; }
.pc-pick-list { overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.pc-pick-item { display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 8px; background: var(--panel-2);
  border: 1px solid var(--line); color: var(--text); font-size: 12px; text-align: left; cursor: pointer; }
.pc-pick-item:hover { border-color: var(--line-2); }
.pc-pick-item:disabled { opacity: .5; cursor: not-allowed; }
.pc-pick-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; background: #000; }
.pc-pick-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-pick-kind { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 4px; background: #000;
  color: var(--muted); }
@media (max-width: 1180px) { .pc-foot .pc-hint { display: none; } }        /* 長提示會壓到右下的小地圖 */
/* 桌機：標題列不換行（換到第二行會被抽屜蓋住），提示太長就用 … 收掉；右邊讓出右上角那排的實際寬度（canvas.js 量好寫進 --pc-tr-w） */
@media (min-width: 761px) {
  .pc-top { flex-wrap: nowrap; }
  .pc-top > .pc-hint { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 760px) { .pc-mini { display: none; } .pc-foot { gap: 6px; left: 12px; flex-wrap: wrap; right: 12px; } }
.pc-card select, .pc-card input, .pc-card textarea {
  background: var(--k-ffffff-04); border: 1px solid var(--line-strong); color: var(--text); border-radius: 4px;
  padding: 5px 8px; font: inherit; font-size: 12px;
}
.pc-prompt { width: 100%; resize: vertical; line-height: 1.5; touch-action: pan-y; }  /* 畫布整片 touch-action:none，內容框要能用手指捲 */
.pc-media { width: 100%; border-radius: 4px; background: #000; max-height: 260px; object-fit: contain; }
.pc-actions { display: flex; justify-content: space-between; }
.pc-voice { flex-direction: column; gap: 6px; }
.s-tl-track { display: flex; gap: 3px; align-items: stretch; overflow-x: auto; padding: 6px 0; flex-wrap: nowrap; }
.s-tl-cell { min-width: 44px; display: flex; flex-direction: column; justify-content: center; padding: 4px 6px; border-radius: 6px;
  background: var(--brand-soft); border: 1px solid transparent; cursor: grab; font-size: 12px; line-height: 1.3; }
.s-tl-cell.empty { background: var(--line-soft); }
.s-tl-cell.on { border-color: var(--brand-hi); }
.s-tl-cell.drop { outline: 2px dashed var(--brand-hi); }
.s-tl-cell small { color: var(--muted); white-space: nowrap; }
.s-tl-total { align-self: center; margin-left: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.s-tl-video { width: 100%; max-height: 260px; background: #000; border-radius: 6px; margin: 6px 0; }
.s-tl-num { width: 70px; }
.s-tl-head { font-size: 13px; margin-top: 6px; }
.pc-light-spots { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; margin-top: 6px; max-width: 760px; }
.pc-light-spots .pc-chip { padding: 2px 4px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .pc-light-spots { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pc-light-more summary { cursor: pointer; font-size: 13px; margin: 6px 0; }
.pc-best { font-size: 12px; color: var(--muted, #9a9aa8); margin-top: 4px; line-height: 1.4; }
.pc-voice-opts { display: flex; flex-wrap: wrap; gap: 4px; }
.pc-voice-opts select { max-width: 100%; }
/* 卡片直接生成（canvas.js genTop／genPanel） */
.pc-gen-media { position: relative; }
.pc-gen-empty { display: flex; align-items: center; justify-content: center; min-height: 96px; padding: 10px; text-align: center;
  border: 1px dashed var(--line-strong); border-radius: 4px; color: var(--muted); font-size: 12px; }
.pc-gen-busy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 4px;
  background: var(--k-09090e-72); color: var(--brand-text); font-size: 13px; font-weight: 700; }
.pc-ver { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.pc-ver-btn { padding: 2px 8px; border: 0; border-radius: 4px; background: var(--k-ffffff-06); color: var(--text); font-size: 11px;
  cursor: pointer; }
.pc-ver-btn:disabled { opacity: .35; cursor: default; }
.pc-ok { color: var(--k-7ad3a8); }
.pc-gen-err { font-size: 12px; }
.pc-gen { display: flex; flex-direction: column; gap: 6px; }
.pc-gen-info { font-size: 11px; color: var(--muted); line-height: 1.5; }
.pc-gen-row { display: flex; flex-wrap: wrap; gap: 4px; }
.pc-gen-row select { flex: 1 1 auto; min-width: 0; max-width: 100%; }
.pc-gen-go { width: 100%; }
.pc-foot {
  position: absolute; left: 26px; bottom: 12px; z-index: 3; display: flex; align-items: center; gap: 12px;
  font-size: 12px; color: var(--k-ffffff);
}
.pc-foot button {
  height: 30px; min-width: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--k-eeebf8); border-radius: var(--radius); padding: 0 8px; cursor: pointer; font-size: 12px;
}
.pc-foot button { flex: none; white-space: nowrap; }   /* 窄畫面「全覽」不要斷成兩行：讓後面的提示文字去換行 */
.pc-foot #pc-fit { width: auto; }
.pc-foot .pc-hint { color: var(--muted); font-size: 11px; margin-left: 10px; }

/* ── 後台（admin.js）──────────────────── */
:is(#studio, .pc-fn-panel) .tabs a.tab { text-decoration: none; }
/* 工作室裡的分頁（素材庫：我的／公用／角色）：設計稿是一排小按鈕、選中淡紫底，下面一條分隔線 */
:is(#studio, .pc-fn-panel) .tabs { gap: 8px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
:is(#studio, .pc-fn-panel) .tab { padding: 9px 15px; border-radius: var(--radius); font-size: 15px; font-weight: 400; }
:is(#studio, .pc-fn-panel) .tab:hover { color: var(--k-eeebf8); background: var(--panel-2); }
:is(#studio, .pc-fn-panel) .tab.active { color: var(--brand-text); background: var(--panel-sel); }
:is(#studio, .pc-fn-panel) .tab.active::after { display: none; }
.ad-num { font-size: 26px; font-weight: 600; margin-top: 4px; }
.s-card.ad-off { opacity: .55; }
.ad-table { display: flex; flex-direction: column; gap: 4px; }
.ad-rowline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--line); font-size: 13px; min-width: 0; }
.ad-mono { font-family: ui-monospace, Menlo, monospace; font-size: 12px; overflow-wrap: anywhere; }
.ad-ua { flex-basis: 100%; overflow-wrap: anywhere; font-size: 11px; }
.s-tag.ad-bad { background: var(--k-3a1d1d); color: var(--k-ff9c9c); }

/* ── AI 助手（agent.js）──────────────── */
/* 2026-10-04 msg 1910／1913：ChatGPT 那種排法 —— 對話在中間往上捲、輸入框固定在最下面、歷史對話在右邊一欄。
   高度由 agent.js 算到視窗底（fit） */
.ag-page { display: flex; gap: 20px; min-height: 420px; }
.ag-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ag-head { display: flex; align-items: center; }
.ag-head .ag-side-btn { display: none; }
.ag-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 4px 12px; }
.ag-empty { margin: auto; max-width: 520px; text-align: center; display: grid; gap: 10px; }
.ag-empty-title { font-size: 22px; font-weight: 600; }
/* 2026-10-01 設計稿：自己說的話淡紫框、助手的回覆是一般卡片色 */
.ag-msg { max-width: 78%; padding: 14px 18px; border-radius: 12px; font-size: 14px; line-height: 1.7; }
.ag-user { align-self: flex-end; background: var(--panel-sel); border: 1px solid var(--k-463661); }
.ag-bot { align-self: flex-start; background: var(--panel); border: 1px solid var(--line-soft); }
.ag-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.ag-action { margin-top: 6px; color: var(--k-7ad3a8); font-size: 13px; }
/* AI 助手生成前的確認框（agent.js confirmBox）：一般字色、框起來，跟「✓ 做完了」的綠字分開 */
.ag-confirm { color: var(--text); font-size: 14px; padding: 12px 14px; border: 1px solid var(--brand-line); border-radius: var(--radius);
  background: var(--panel); display: flex; flex-direction: column; gap: 8px; }
.ag-assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 8px; }
.ag-asset { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; font-size: 12px; min-width: 0; }
.ag-asset img, .ag-asset video, .ag-asset-none { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: #0e0e0f; display: block; }
.ag-asset:has(video[controls]) { grid-column: span 2; }
.ag-asset video[controls] { aspect-ratio: auto; max-height: 360px; object-fit: contain; }
.ag-asset-none { display: grid; place-items: center; color: var(--k-888888); }
.ag-asset span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 助手給的選擇題 */
.ag-choices { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.ag-q { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.ag-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-opt {
  padding: 7px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel-2);
  color: var(--k-eeebf8); font-size: 13px; cursor: pointer; text-align: left;
}
.ag-opt:hover { border-color: var(--line-2); background: var(--panel-sel); }
.ag-opt.on { background: var(--brand); border-color: var(--brand); color: #eeebf8; }
.ag-usage { margin-top: 4px; font-size: 11px; }
.ag-cost { margin-top: 4px; font-size: 12px; }
/* 輸入區（composer）：上面一排是專案與附件小卡片，框裡是輸入框，底下一條是 ＋、生成服務、送出 */
.ag-composer { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; }
.ag-box { padding: 10px 12px; border: 1px solid var(--k-43315f); border-radius: 14px; background: var(--panel); display: flex; flex-direction: column; gap: 6px; }
.ag-box:focus-within { border-color: var(--line-2); }   /* 輸入框自己沒有框：焦點由外框顯示 */
:is(#studio, .pc-fn-panel) .ag-box textarea { border: 0; background: transparent; padding: 6px 4px; resize: none; min-height: 96px; max-height: 220px; overflow-y: auto; }
.ag-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ag-provider-controls { display: flex; gap: 8px; min-width: 0; }
.ag-bar .grow { flex: 1 1 auto; }
.ag-plus { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--line); background: var(--panel-2);
  color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; }
.ag-plus:hover { border-color: var(--line-2); }
.ag-clip { font-size: 16px; }
/* 檔案拖到輸入區上面（agent.js dropFiles）：框亮起來 */
.ag-composer.drop .ag-box, .pc-ai.drop .pc-ai-composer { border-color: var(--brand-hi); box-shadow: 0 0 0 2px var(--brand-soft); }
:is(#studio, .pc-fn-panel) select.ag-model { height: 34px; width: auto; max-width: 240px; min-width: 0; font-size: 13px; border-radius: 17px; padding: 0 10px; }
.ag-planning { display: grid; gap: 8px; min-width: 0; container: ag-planning / inline-size; }
.ag-planning-title { font-size: 13px; font-weight: 600; }
.ag-levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ag-level { min-width: 0; min-height: 40px; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
@container ag-planning (min-width: 520px) { .ag-levels { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ag-level.on { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-text); }
.ag-level:disabled { opacity: .5; cursor: not-allowed; }
.ag-smart-control { display: grid; gap: 2px; min-width: 0; }
.ag-smart-control[hidden] { display: none; }
.ag-smart-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--muted); }
.ag-smart-heading output { color: var(--text); font-weight: 600; }
:is(#studio, .pc-fn-panel) input.ag-level-range { width: 100%; min-width: 0; height: 28px; margin: 0; padding: 0; border: 0; background: transparent; accent-color: var(--brand); cursor: pointer; }
:is(#studio, .pc-fn-panel) input.ag-level-range:disabled { opacity: .5; cursor: not-allowed; }
:is(#studio, .pc-fn-panel) input.ag-level-range:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 2px; border-radius: 4px; }
.ag-level-ticks { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--muted); }
.ag-level-ticks .on { color: var(--brand-text); font-weight: 600; }
.ag-level-ticks .is-blocked { opacity: .5; }
.ag-planning-manual { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; color: var(--muted); font-size: 12px; }
.ag-planning-manual select { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font: inherit; }
:is(#studio, .pc-fn-panel) .ag-planning-manual select.ag-model { width: 100%; max-width: none; border-radius: 8px; }
.ag-budget { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; margin-top: 10px; }
.ag-budget-input { flex: 0 1 160px; width: 160px; min-width: 0; max-width: 100%; padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--text); font: inherit; }
.ag-planning-status, .ag-planning-note, .ag-planning-fee { font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.ag-planning-status.is-blocked, .ag-planning-unpriced .ag-planning-fee { color: var(--k-ffb17a); }
.ag-planning-footer { display: grid; gap: 6px; min-width: 0; border-top: 1px solid var(--line-soft); padding-top: 8px; }
.ag-planning-fee { color: var(--text); }
.ag-planning-settings > summary { color: var(--muted); font-size: 12px; cursor: pointer; width: fit-content; max-width: 100%; }
.ag-planning-settings[open] .ag-planning-note { margin-top: 8px; }
.ag-planning-settings > summary:focus-visible, .ag-level:focus-visible { outline: 2px solid var(--brand-line); outline-offset: 3px; }
.ag-planning-priced ~ .ag-cost, .pc-ai:has(.ag-planning-priced) > .ag-cost { display: none; }
.pc-ai-planning { flex: 0 0 auto; margin: 8px 10px 0; }
.pc-ai .ag-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pc-ai .ag-planning-manual select { max-width: 100%; min-width: 0; }
.ag-send { flex: 0 0 auto; min-width: 88px; }
.ag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; padding: 4px 8px 4px 4px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font-size: 12px; }
.ag-chip img { width: 28px; height: 28px; object-fit: cover; border-radius: 5px; flex: 0 0 auto; }
.ag-chip-icon { width: 28px; text-align: center; flex: 0 0 auto; }
.ag-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ag-chip-x { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 2px; }
.ag-chip-x:hover { color: var(--text); }
button.ag-proj { padding: 6px 10px; cursor: pointer; color: var(--muted); }
button.ag-proj.on { color: var(--brand-text); border-color: var(--brand-line); }
.ag-sent { margin-top: 6px; }
/* ＋ 打開的那一塊：蓋在輸入框上面 */
.ag-pop { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 5; max-height: min(420px, 60vh); overflow-y: auto;
  padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
  display: flex; flex-direction: column; gap: 8px; }
.ag-menu { display: flex; flex-direction: column; }
.ag-menu-item, .ag-proj-item { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border: 0; border-radius: 8px;
  background: none; color: var(--text); font-size: 14px; text-align: left; cursor: pointer; }
.ag-menu-item:hover, .ag-proj-item:hover { background: var(--panel-sel); }
.ag-proj-item.on { color: var(--brand-text); background: var(--panel-sel); }
.ag-proj-list { display: flex; flex-direction: column; }
.ag-pick-grid button.s-ref-item.on { border-color: var(--line-2); background: var(--panel-sel); }

/* ── 窄畫面：設計稿是 1920 寬，筆電上等比例收一點，再窄就改欄數 ── */
@media (max-width: 1600px) {
  .poster { flex-basis: 330px; height: 170px; }
}
@media (max-width: 1360px) {
  :root { --side-w: 216px; }
  /* 側欄窄了：logo 縮一點，側欄出現（不浮動的）捲軸時字才不會被切掉 */
  .brand img { width: 40px; height: 40px; }
  .brand-name b { font-size: 20px; }
  .sidebar { padding-left: 12px; padding-right: 12px; }   /* 側欄出現（不浮動的）捲軸時「創作者巔峰賽 王者大賽」也放得下（審查實測） */
  .nav-item { padding: 0 8px; gap: 5px; }
  .nav-tag { padding: 0 2px; }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  /* 7 個工具（10/12 合併）1360 以下也放得下一排；1100 以下才分兩排：「影片拆劇本」五個字，有捲軸時 1081～1100 一排七格會被截（審查實測） */
  .tools { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .crumbs { margin: 0 0 24px; }
  .toppills #who { max-width: 140px; }   /* 後台的帳號名也叫 #who：只管工作室這條 */
  .rp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-list > :nth-child(3) { display: none; }
}
/* 手機：側欄收起來，兩欄改一欄（公開網址主要是拿手機看） */
@media (max-width: 760px) {
  /* 側欄變抽屜：平常移出畫面外（visibility 讓 Tab 也跳不進去），按左上 ☰ 滑進來 */
  .sidebar {
    position: fixed; left: 0; top: 0; z-index: 50; height: 100%; padding-top: 24px;
    transform: translateX(-100%); visibility: hidden; transition: transform .2s, visibility 0s .2s;
  }
  body.nav-open .sidebar { transform: none; visibility: visible; transition: transform .2s; box-shadow: 0 0 40px rgba(0, 0, 0, .6); }
  .nav-scrim { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, .55); }
  :root { --top-h: 60px; }
  .toppills .nav-toggle { display: inline-flex; margin-right: auto; padding: 0 10px; }
  .top-crumb { display: none; }
  .main { padding: 16px 16px 60px; }
  #s-body { padding-left: 0; }
  .toppills { left: 0; padding: 0 16px; flex-wrap: nowrap; gap: 8px; }
  .pill { height: 38px; padding: 0 11px; }
  .crumbs { margin: 0 0 16px; }
  /* 手機上收掉開通會員、頭像固定 38、帳號名截短：保證一行放得下，不會變兩行蓋到內容 */
  .toppills .vip { display: none; }   /* 開通會員：手機上收掉（同畫布） */
  .pill.who-avatar, .pill.pill-ic { width: 38px; }           /* 跟著上面的 38 高：頭像才是正圓 */
  body.anon .pill.who-avatar { padding: 0 11px; }            /* 沒登入的「登入」：同手機上其他按鈕 */
  #who, .toppills #who { max-width: 110px; }   /* 後者：蓋過 ≤1080 那條（權重較高）；後台的 #who 照樣吃前者 */
  .hero { min-height: 240px; }
  .canvas-entry { padding-bottom: 50px; }
  .hero-agent { left: 50%; right: auto; bottom: 18px; transform: translateX(-50%); }
  .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tool { height: 100px; }
  .block h2 { font-size: 20px; }
  .rp-list { grid-template-columns: minmax(0, 1fr); }
  .rp-list > :nth-child(n+2) { display: none; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card .meta { padding: 10px 12px 12px; }
  .card .cap { font-size: 14px; }
  .card .sub { font-size: 12px; }
  .tabs-row { flex-wrap: wrap; }
  .tabs { gap: 18px; overflow-x: auto; }
  .tab { font-size: 14px; }
  .search { margin-left: 0; width: 100%; }
  .search input { width: 100%; }
  .poster { flex-basis: 260px; height: 134px; }
  .poster .cap { font-size: 16px; }
  .s-cols { grid-template-columns: minmax(0, 1fr); }
  :is(#studio, .pc-fn-panel) .s-panel:not(.ag-panel), .s-steps-row { padding: 16px; }
  .s-shot { flex-wrap: wrap; }
  .s-shot-actions { flex-direction: row; width: 100%; justify-content: flex-end; }
  .ag-msg { max-width: 95%; }
  .pc-top { left: 16px; right: 16px; top: 16px; }
  .pc-topright { top: 60px; right: 16px; }
  .pc-vip { display: none; }
  /* 製作過程：標題讓位給切換鈕、故事板改成一欄往下捲、說明框改從下方滑上來 */
  .canvas-top { flex-wrap: wrap; padding: 12px 14px; }
  .detail-top { padding: 12px 16px; gap: 10px; }
  .d-title { font-size: 15px; }
  .d-meta, .detail-top .divider { display: none; }   /* 手機上留返回、作者、片名就好（抓取時間／節點數是給平台看的） */
  .canvas-top .readonly, .canvas-top .spacer { display: none; }
  .c-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .c-modes { position: static; transform: none; order: 3; width: 100%; justify-content: center; }
  .c-mode { flex: 1; justify-content: center; }
  .story { display: flex; flex-direction: column; overflow: auto; padding: 0 10px 10px; }
  .sb-col, .sb-sec, .sb-list { flex: 0 0 auto; min-height: auto; overflow: visible; }
  .sb-left .sb-sec:first-child { max-height: none; }
  .np { left: 10px; right: 10px; top: auto; bottom: 10px; width: auto; max-height: 62vh; }
  .np-open .story { padding-right: 10px; padding-bottom: 62vh; scroll-padding-bottom: 62vh; }   /* 說明框從下面蓋上來：跳到的項目要停在上面露出來的那塊 */
  .pc-tools { left: 10px; }
}
/* 很窄的手機（375 以下）：右上的按鈕多，☰ 會被擠出畫面 —— 間距縮小（#who 現在只剩沒登入的「登入」會顯示） */
@media (max-width: 400px) {
  .toppills { gap: 6px; }
  .toppills #who { max-width: 72px; }
}

/* ── 登入視窗（login-modal.js；2026-10-02 先逛、要用才登入）：樣子照 login.html 的卡片 ── */
/* <dialog>：拿掉瀏覽器預設的框與大小，整個畫面當暗幕（點暗幕關窗看的是 dialog 本身） */
.login-modal { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0;
               border: none; padding: 24px 16px; background: rgba(5, 5, 9, .72); color: var(--text); }
.login-modal[open] { display: grid; place-items: center; }
.login-modal::backdrop { background: transparent; }
body.lm-open { overflow: hidden; }
.lm-card { position: relative; width: 100%; max-width: 400px; max-height: 100%; overflow: auto; text-align: left;
           background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px; padding: 24px 22px;
           display: flex; flex-direction: column; gap: 14px; }
.lm-card h2 { font-size: 18px; margin: 0; }
.lm-sub { margin: -8px 0 0; color: var(--muted); font-size: 13px; }
.lm-card label { display: flex; flex-direction: column; gap: 8px; color: var(--k-aaa5b5); font-size: 14px; }
.lm-card input { background: var(--k-101015); border: 1px solid var(--line); color: var(--text); border-radius: 8px;
                 padding: 11px 13px; font: inherit; outline: none; }
.lm-card input:focus { border-color: var(--line-2); }
.lm-card button:not(.lm-close) { padding: 11px; border-radius: 8px; border: none; background: var(--brand); color: #fff;
                                 font: inherit; font-weight: 600; cursor: pointer; }
.lm-card button:not(.lm-close):hover { background: var(--brand-hi); }
.lm-card button:disabled { opacity: .5; cursor: default; }
.lm-close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: none; border-radius: 8px;
            background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; }
.lm-close:hover { background: var(--panel-2); color: var(--text); }
.lm-msg { color: var(--k-ff9a6b); font-size: 13px; }
.lm-msg:empty { display: none; }
.lm-social { display: flex; flex-direction: column; gap: 10px; }
.lm-social[hidden] { display: none; }
.lm-or { text-align: center; color: var(--k-7f798e); font-size: 13px; }
/* Google／LINE 按鈕保留各自的品牌色（兩家的登入按鈕規範都要求） */
.lm-card button.lm-google { background: #fff; color: #1f1f1f; }
.lm-card button.lm-google:hover { background: #ececec; }
.lm-card button.lm-line { background: #06c755; }
.lm-card button.lm-line:hover { background: #05b34c; }
.lm-card button.lm-tiktok { background: #000; color: #fff; border: 1px solid #333; }
.lm-card button.lm-tiktok:hover { background: #1a1a1a; }
.lm-note { color: var(--muted); font-size: 12px; line-height: 1.8; }
body.anon #who-btn > :not(#who) { display: none; }   /* 沒登入：只留「登入」兩個字，藏掉頭像那個字（#who-ini） */
.s-review-no { color: var(--k-ff9a6b); }   /* 公開審查沒通過（review.py）：原因用警示色 */
/* 社群作品的檢視頁（studio.js communityPage） */
.s-pre { white-space: pre-wrap; line-height: 1.8; }
.s-video { width: 100%; max-height: 70vh; border-radius: var(--radius); background: #000; }
.s-gen-op:empty { display: none; }
.s-gen-op { margin-top: 6px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.s-gen-op label { display: flex; align-items: center; gap: 6px; white-space: nowrap; min-width: 0; max-width: 100%; }
.s-gen-op select { min-width: 0; flex: 1 1 auto; max-width: 100%; }
.s-gen-pick { display: inline-flex; gap: 6px; align-items: center; max-width: 100%; }
.s-gen-prov { min-width: 0; max-width: 100%; }
/* AI 助手：AI 記住的偏好（點了在對話上面展開）、右邊的歷史對話（agent.js） */
.ag-extra:empty { display: none; }
.ag-extra { flex: 0 0 auto; display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.ag-extra textarea { width: 100%; box-sizing: border-box; }
.ag-side { flex: 0 0 260px; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--line-soft);
  border-radius: 12px; background: var(--panel); }
.ag-new { width: 100%; }
.ag-side-tools { display: flex; gap: 14px; }
.ag-side-tools .grow { flex: 1 1 auto; }
.ag-side-close { display: none; }
.ag-side-title { font-size: 12px; color: var(--muted); margin-top: 4px; }
.ag-history { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.ag-hrow { display: flex; align-items: center; border-radius: 8px; min-width: 0; }
.ag-hrow:hover, .ag-hrow.on { background: var(--panel-sel); }
.ag-htitle { flex: 1 1 auto; min-width: 0; padding: 8px 10px; border: 0; background: none; color: var(--text); font-size: 13px; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.ag-hrow.on .ag-htitle { color: var(--brand-text); }
.ag-hdel { flex: 0 0 auto; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 6px 8px; visibility: hidden; }
.ag-hrow:hover .ag-hdel, .ag-hrow.on .ag-hdel { visibility: visible; }
.ag-hdel:hover { color: var(--k-ff9c9c); }
.ag-hnone, .ag-hkeep { font-size: 12px; padding: 6px 4px; }
/* 窄畫面：右欄收起來，「歷史對話」按鈕打開時蓋在右邊 */
@media (max-width: 900px) {
  .ag-head { display: flex; }
  .ag-head .ag-side-btn { display: inline; }
  .ag-page { position: relative; }
  .ag-side { display: none; position: absolute; top: 0; right: 0; bottom: 0; width: min(300px, 88%); z-index: 6; box-shadow: -8px 0 30px rgba(0, 0, 0, .6); }
  .ag-side.open { display: flex; }
  .ag-side-close { display: inline; }
  .ag-hdel { visibility: visible; }
  :is(#studio, .pc-fn-panel) select.ag-model { max-width: 150px; }
  :is(#studio, .pc-fn-panel) .ag-provider-controls select.ag-model { flex: 1; max-width: none; }
}
/* 我的帳號 → 隱私權政策（admin.js privacyPanel）：預設收起來，點標題展開 */
.pv-box > summary { cursor: pointer; list-style: revert; }
.pv-sec { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.pv-text { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--k-cfcfd4); line-height: 1.7; }
/* 購買點數頁「各方案可生成數量」（admin.js genTable）：窄畫面左右捲動，第一欄（型號）固定 */
.gen-wrap { overflow-x: auto; margin-top: 8px; }
.gen-table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 13px; }
.gen-table th, .gen-table td { padding: 10px 12px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line-soft); }
.gen-table thead th { color: var(--muted); font-weight: 500; vertical-align: bottom; }
.gen-table tbody th, .gen-table thead th:first-child { font-weight: 500; position: sticky; left: 0; background: var(--panel); z-index: 1; }
.gen-table .gen-group span { position: sticky; left: 12px; }
.gen-table .gen-pts { color: var(--text); font-weight: 600; }
.gen-table .gen-per { color: var(--muted); font-size: 12px; }
.gen-table .gen-group td { color: var(--muted); font-size: 12px; padding-top: 16px; }
/* 同意條款視窗、18 歲確認（terms-gate.js）：蓋住整頁，關不掉（只能同意或登出） */
body.tg-lock { overflow: hidden; }
/* 我的素材：點圖片放大（studio.js zoom） */
/* 確認框（studio.js ask；msg 2581 ④：取代瀏覽器內建的 confirm()）：置中、蓋在所有東西上面（含畫布、登入視窗以外） */
.s-ask-shade { position: fixed; inset: 0; z-index: 1100; background: rgba(5, 5, 8, .62); display: grid; place-items: center; padding: 16px; }
.s-notice { z-index: 3000; }      /* 提示框（studio.js notice，取代 alert）：疊在所有視窗上面（3D 預演台 .pv-shade 是 2000）*/
.s-ask { width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: var(--panel); color: var(--text);
  border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 16px 48px rgba(0, 0, 0, .55); padding: 22px 22px 18px;
  display: flex; flex-direction: column; gap: 18px; }
.s-ask-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.7; }
.s-ask-row { display: flex; justify-content: flex-end; gap: 10px; }
.s-ask-row .s-btn { min-width: 88px; }
.s-soon { text-align: center; }
.s-soon .s-ask-row { justify-content: center; }
.s-soon-ic { font-size: 36px; line-height: 1; }
.s-soon-title { font-size: 18px; font-weight: 700; }
.s-zoomable { cursor: zoom-in; }
.s-zoom { position: fixed; inset: 0; z-index: 1000; background: rgba(5, 5, 8, .88); display: grid; place-items: center; padding: 16px; cursor: zoom-out; }
.s-zoom img { max-width: 100%; max-height: calc(100dvh - 32px); object-fit: contain; border-radius: 8px; }
.tg-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(5, 5, 8, .82); display: grid; place-items: center; padding: 16px; }
.tg-box { width: min(760px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; gap: 10px; padding: 22px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--text); }
.tg-box.small { width: min(480px, 100%); }
.tg-box h2 { margin: 0; font-size: 19px; }
.tg-box p { margin: 0; color: var(--k-cfcfd4); line-height: 1.7; font-size: 14px; }
.tg-sub, .tg-hint { color: var(--muted); font-size: 13px; }
.tg-scroll { flex: 1 1 auto; min-height: 160px; max-height: 55dvh; overflow-y: auto; padding: 12px 14px; border: 1px solid var(--line-soft);
  border-radius: 10px; background: var(--bg); font-size: 13px; }
.tg-scroll h3 { font-size: 15px; margin: 6px 0 10px; }
.tg-sec { margin-bottom: 12px; }
.tg-sec p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.tg-end { text-align: center; color: var(--muted); padding: 8px 0 2px; }
.tg-check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.tg-check input { margin-top: 3px; }
.tg-msg:empty { display: none; }
.tg-msg { color: var(--k-ff9a6b); font-size: 13px; }
.tg-row { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.tg-btn { padding: 10px 18px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font: inherit; cursor: pointer; }
.tg-btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.tg-btn:disabled { opacity: .45; cursor: default; }

/* ── 圖卡／影片卡（LibTV 的樣子；canvas.js genCard，使用者 2026-10-04 msg 2098 a）── */
.pc-card.pc-gcard { background: none; border: 0; padding: 0; gap: 0; box-shadow: none; }
.pc-card.pc-gcard.selected, .pc-card.pc-gcard.linking { box-shadow: none; }
.pc-glabel { height: 22px; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; cursor: move; }
.pc-gname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-aid { flex: none; padding: 0 6px; height: 18px; border-radius: 9px; border: 1px solid var(--line-strong); background: transparent;
          color: var(--muted); font: 11px/16px ui-monospace, SFMono-Regular, Menlo, monospace; cursor: copy; }      /* 素材編號小標（canvas.js assetTag） */
.pc-aid:hover { color: var(--text); border-color: var(--line-2); }
.pc-gname-input { min-width: 0; flex: 1 1 auto; height: 20px; padding: 0 6px; font-size: 12px; background: var(--panel); border: 1px solid var(--line-2); color: var(--text); border-radius: 4px; }
.pc-frame { position: relative; border-radius: 12px; background: var(--k-1d1c24); border: 1px solid var(--k-2c2a36); overflow: hidden; cursor: grab; }
.pc-gcard:hover .pc-frame { border-color: var(--k-4a4458); }
.pc-gcard.selected .pc-frame { border-color: var(--k-d9d4ea); box-shadow: 0 0 0 1px var(--k-d9d4ea); }
.pc-gcard.linking .pc-frame { border-color: var(--line-2); box-shadow: 0 0 0 2px var(--brand-soft); }
.pc-frame-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; user-select: none; }
.pc-frame-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: var(--k-5d5868); }
.pc-frame-hint { font-size: 12px; color: var(--muted); text-align: center; padding: 0 12px; }
.pc-frame-btn { position: absolute; width: 26px; height: 26px; border: 0; border-radius: 6px; background: rgba(0, 0, 0, .55); color: #fff;
  font-size: 14px; cursor: pointer; opacity: 0; transition: opacity .15s; }
.pc-frame-open { right: 8px; top: 8px; }
.pc-gcard:hover .pc-frame-btn, .pc-gcard.selected .pc-frame-btn { opacity: 1; }
.pc-frame-err { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 4px 8px; border-radius: 6px; background: rgba(60, 20, 20, .85);
  color: #ffb4a8; font-size: 11px; line-height: 1.4; max-height: calc(100% - 16px); overflow: auto; }
/* 錯誤小紅條（Hsiu Chia 10/10）：一行，點開才看全文 */
.pc-err-head { pointer-events: auto; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; width: 100%; }
.pc-err-head:hover { text-decoration: underline; }
/* 選片段（影片卡的 trim） */
.pc-trim-badge { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .6);
  color: #fff; font-size: 11px; pointer-events: none; }
.pc-trim { display: grid; gap: 8px; }
.pc-trim-video { width: 100%; max-height: 50vh; background: #000; border-radius: 8px; }
.pc-trim-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pc-trim-row label { display: flex; gap: 6px; align-items: center; }
.pc-trim-num { width: 90px; }
.pc-err-body { margin-top: 4px; white-space: pre-wrap; word-break: break-word; pointer-events: auto; user-select: text; }
/* 虛擬人像（portraits.py）：錯誤框底下的「登記成虛擬角色」與審核狀態 */
.pc-portrait { margin-top: 6px; display: grid; gap: 4px; justify-items: start; color: var(--k-dddddd); }
.pc-portrait-btn { pointer-events: auto; }
.pc-gen-busy { gap: 8px; }
.pc-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--k-ffffff-25); border-top-color: var(--k-ffffff); animation: pc-spin .8s linear infinite; }
@keyframes pc-spin { to { transform: rotate(360deg); } }
.pc-gcard .pc-ver { position: absolute; left: 0; right: 0; bottom: 0; justify-content: center; padding: 6px; gap: 8px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .7)); color: #fff; opacity: 0; transition: opacity .15s; }
.pc-gcard:hover .pc-ver, .pc-gcard.selected .pc-ver { opacity: 1; }
/* 版本列只有按鈕能點：透明時（滑鼠沒移上去）不擋住底下的東西；錯誤框有版本列時往上挪（Hsiu Chia 10/12「登記成虛擬角色」點不到） */
.pc-gcard .pc-ver { pointer-events: none; }
.pc-gcard .pc-ver > button { pointer-events: auto; }
.pc-frame-err.pc-above-ver { bottom: 40px; max-height: calc(100% - 48px); }
.pc-frame-err.pc-above-ver.tall { bottom: 66px; max-height: calc(100% - 74px); }   /* 版本列多了「採用到第 N 鏡」：窄卡片會換成兩行 */
.pc-ver-adopt { border: 0; border-radius: 10px; padding: 2px 8px; background: var(--brand); color: #fff; font-size: 11px; cursor: pointer; }
.pc-ver-tag { border-radius: 10px; padding: 1px 7px; background: var(--k-ffffff-06); color: var(--text); font-size: 11px; }   /* 草稿／正式版／已提高畫質 */
.pc-card-acts .pc-act-final { background: var(--brand); color: #fff; border-color: transparent; }
.pc-card-acts .pc-chip:disabled { opacity: .5; cursor: default; }
.pc-omni-row { align-items: center; }
.pc-omni { height: 26px; font-size: 12px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--k-3a3746); background: var(--k-25232e); color: var(--k-d9d6e4); }
.pc-plus { position: absolute; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--k-5b5568);
  background: var(--bg); color: var(--k-d6d2e2); font-size: 15px; line-height: 18px; padding: 0; cursor: pointer; opacity: 0; transition: opacity .15s;
  /* 看不見的時候點不到（不然縮小時點到的是隔壁卡片隱形的「＋」，測試紀錄 B-09）。只擋滑鼠：鍵盤照樣 Tab 得到（:focus-visible 會顯示） */
  pointer-events: none; }
/* 卡片和「＋」中間的空隙補一塊看不見的範圍：滑鼠從卡片移過去的路上一直算在卡片裡（:hover 不會斷、「＋」不會先變成點不到） */
.pc-plus::after { content: ""; position: absolute; top: -6px; bottom: -6px; }
.pc-plus.left::after { left: 0; right: -14px; } .pc-plus.right::after { right: 0; left: -14px; }
.pc-plus.left { left: -34px; } .pc-plus.right { right: -34px; }
.pc-card > .pc-plus { top: 50%; }              /* 文字、腳本、分鏡、配樂卡：高度不固定，接點放在中間 */
.pc-plus { touch-action: none; }               /* 按住拖線：不要讓瀏覽器當成捲動 */
.pc-gcard:hover .pc-plus, .pc-gcard.selected .pc-plus, .pc-card:hover > .pc-plus, .pc-card.selected > .pc-plus,
.pc-plus.dragging { opacity: 1; pointer-events: auto; }
.pc-plus:hover { border-color: var(--line-2); color: var(--k-ffffff); }
.pc-plus:focus-visible { opacity: 1; }        /* 用鍵盤 Tab 到的時候看得到 */
.pc-edge.flow { stroke: var(--k-6aa8ff); stroke-dasharray: 8 8; animation: pc-flow .8s linear infinite; }
@keyframes pc-flow { to { stroke-dashoffset: -16; } }
@media (prefers-reduced-motion: reduce) { .pc-edge.flow, .pc-spin { animation: none; } }

/* 生成面板（選中一張圖卡／影片卡時浮在它下面） */
.pc-panel { position: absolute; z-index: 5; width: min(600px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 8px; padding: 10px 12px;
  border-radius: 14px; background: var(--k-1d1c24); border: 1px solid var(--k-34313f); box-shadow: 0 12px 40px rgba(0, 0, 0, .55); }
.pc-panel-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* 圖片工具列（canvas.js renderImgTools；選中有圖的圖片卡時浮在它上面）＋ 裁剪／塗抹／多角度的視窗 */
.pc-imgtools { position: absolute; z-index: 4; display: flex; flex-wrap: wrap; gap: 4px; max-width: min(640px, calc(100vw - 32px)); padding: 6px;
  border-radius: 12px; background: var(--k-1d1c24); border: 1px solid var(--k-34313f); box-shadow: 0 8px 28px rgba(0, 0, 0, .5); }
.pc-tooldlg { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .7); outline: none; }
.pc-tooldlg-card { display: flex; flex-direction: column; gap: 10px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow: auto; padding: 16px;
  border-radius: 14px; background: var(--k-1d1c24); border: 1px solid var(--k-34313f); }
.pc-tooldlg-title { font-size: 15px; font-weight: 600; color: var(--text); }
.pc-tooldlg-body { display: flex; flex-direction: column; gap: 10px; min-width: min(360px, calc(100vw - 64px)); }
.pc-tooldlg-acts { display: flex; justify-content: flex-end; gap: 8px; }
.pc-tooldlg-input { height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--k-3a3746); background: var(--k-25232e); color: var(--text); }
.pc-stage { display: block; max-width: 100%; align-self: center; border-radius: 6px; cursor: crosshair; touch-action: none; }
.pc-angle-img { display: block; max-width: 100%; max-height: 240px; align-self: center; border-radius: 6px; }
.pc-pano-stage { cursor: grab; background: #000; }
.pc-pano-stage:active { cursor: grabbing; }
.pc-pano-views { flex-wrap: wrap; gap: 6px; }
.pc-cam-row { flex-wrap: wrap; gap: 6px; }
.pc-cam-sel { height: 28px; max-width: 150px; border-radius: 6px; border: 1px solid var(--k-3a3746); background: var(--k-25232e); color: var(--text); font-size: 12px; }
.pc-focus-note { height: auto; padding: 6px 10px; resize: vertical; }
.pc-light-top { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; justify-content: center; }
.pc-light-top .pc-stage { max-width: min(100%, 420px); max-height: 300px; width: auto; height: auto; cursor: default; }
.pc-light-ctl { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.pc-light-disc { width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, #2c2a38, #18171f); cursor: pointer; touch-action: none; }
.pc-light-desc { max-height: 72px; overflow: auto; }
.pc-angle-label { min-width: 64px; font-size: 12px; color: var(--muted); }
/* 做成 Skill 的視窗（canvas.js skillDialog） */
.pc-skill-form { width: min(520px, calc(100vw - 64px)); }
.pc-skill-field { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.pc-skill-field > span { min-width: 36px; }
.pc-skill-field > input, .pc-skill-field > select { flex: 1; }
.pc-skill-text { height: auto; padding: 6px 10px; resize: vertical; font: inherit; }
.pc-skill-pics { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-skill-pic { position: relative; width: 72px; height: 72px; padding: 0; border-radius: 8px; overflow: hidden; border: 2px solid transparent;
  background: #000; cursor: pointer; }
.pc-skill-pic.on { border-color: var(--brand); }
.pc-skill-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-skill-pic span { position: absolute; left: 4px; top: 4px; padding: 0 5px; border-radius: 4px; background: var(--brand); color: #fff; font-size: 11px; }
.pc-chip { height: 26px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--k-3a3746); background: var(--k-25232e); color: var(--k-d9d6e4); font-size: 12px; cursor: pointer; }
.pc-chip:hover { border-color: var(--line-2); }
.pc-panel-note { font-size: 11px; color: var(--muted); }
.pc-panel-warn { font-size: 11px; color: var(--gold); }
.pc-panel-refs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* 送出中：模式、參考圖不能動（canvas.js lockPanelRows 另外設 inert，鍵盤也按不到） */
.pc-panel.pc-sending .pc-panel-chips, .pc-panel.pc-sending .pc-panel-refs { pointer-events: none; opacity: .55; }
.pc-ref { position: relative; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: #000; border: 1px solid var(--k-3a3746); }
.pc-ref img { width: 100%; height: 100%; object-fit: cover; }
.pc-ref-n { position: absolute; left: 2px; top: 2px; min-width: 14px; height: 14px; border-radius: 7px; background: rgba(0, 0, 0, .7); color: #fff;
  font-size: 9px; line-height: 14px; text-align: center; }
.pc-ref-x { position: absolute; right: 1px; top: 1px; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .7);
  color: #fff; font-size: 9px; cursor: pointer; opacity: 0; }
.pc-ref:hover .pc-ref-x, .pc-ref-x:focus-visible { opacity: 1; }
.pc-panel-prompt { width: 100%; min-height: 64px; resize: vertical; background: none; border: 0; color: var(--text); font: inherit; font-size: 13px;
  line-height: 1.6; outline: none; }
.pc-inline-prompt { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 45vh; overflow-y: auto; padding: 2px; }
.pc-inline-prompt:empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; }
.pc-inline-prompt .pc-mention { vertical-align: middle; margin: 0 2px; user-select: all; }
.pc-prompt-count { font-size: 11px; color: var(--muted); text-align: right; margin-top: -4px; }   /* 字數 / 模型上限（msg 3274） */
/* 提示詞裡 @ 到了什麼（Hsiu Chia 10/12）：有縮圖的小標籤，對不到的紅色 */
.pc-mentions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -2px; }
.pc-mention { display: inline-flex; align-items: center; gap: 4px; max-width: 220px; height: 24px; padding: 0 8px 0 2px; border-radius: 12px;
  background: var(--k-25232e); border: 1px solid var(--k-3a3746); color: var(--k-d9d6e4); font-size: 11px; white-space: nowrap; overflow: hidden; }
.pc-mention > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pc-mention img { width: 20px; height: 20px; border-radius: 10px; object-fit: cover; flex: none; }
.pc-mention-icon { width: 20px; text-align: center; flex: none; }
.pc-mention.miss { border-color: var(--k-ff9c9c); color: var(--k-ff9c9c); padding-left: 6px; }
.pc-menu-item.has-thumb { display: flex; align-items: center; gap: 8px; }
.pc-menu-thumb { width: 28px; height: 28px; border-radius: 4px; object-fit: cover; flex: none; }
.pc-prompt-count.over { color: var(--k-ff9c9c); font-weight: 600; }
.pc-panel-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pc-panel-bar select { max-width: 220px; height: 28px; background: var(--k-25232e); border: 1px solid var(--k-3a3746); color: var(--k-d9d6e4); border-radius: 8px; font-size: 12px; padding: 0 6px; }
.pc-grow { flex: 1; }
.pc-cost { color: var(--muted); font-size: 12px; }
.pc-send { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--k-ece9f6); color: var(--k-15131c); font-size: 16px; font-weight: 700; cursor: pointer; }
.pc-send:disabled { background: var(--k-4a4757); color: var(--k-8d8a99); cursor: default; }
.pc-pop { position: fixed; z-index: 75; width: 300px; padding: 12px; border-radius: 12px; background: var(--k-1d1c24); border: 1px solid var(--k-34313f);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .6); display: flex; flex-direction: column; gap: 8px; }
.pc-pop-title { font-size: 12px; color: var(--muted); }
.pc-pop-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pc-pop-opt { min-width: 60px; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--k-3a3746); background: var(--k-25232e); color: var(--k-d9d6e4);
  font-size: 12px; cursor: pointer; }
.pc-pop-opt.on { border-color: var(--k-d9d4ea); color: var(--k-ffffff); }
.pc-pop-opt:disabled { opacity: .5; cursor: default; }
.pc-pop-range { flex: 1; }
.pc-pop-val { font-size: 12px; color: var(--text); min-width: 40px; text-align: right; }
.pc-viewer { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .85); display: flex; align-items: center; justify-content: center; outline: none; }
.pc-viewer img, .pc-viewer video { max-width: 90vw; max-height: 86vh; border-radius: 8px; }
.pc-viewer-close { position: absolute; right: 20px; top: 16px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12);
  color: #fff; font-size: 16px; cursor: pointer; }

/* 成組（分組框）、找卡片、卡片清單、生成紀錄、畫布裡的 AI 助手（canvas.js 第 ③ 批，msg 2098 c） */
/* 框本體讓滑鼠穿過去（框裡的空白處照樣能平移、框選、雙擊新增）；只有標題列和右下角接得到 */
.pc-card.pc-group { background: var(--k-9b75ff-06); border: 1px dashed var(--k-4b4560); border-radius: 14px; padding: 0; pointer-events: none; }
.pc-group-head, .pc-group-resize { pointer-events: auto; }
.pc-card.pc-group.selected { border-color: var(--line-2); box-shadow: none; }
.pc-group-head { height: 34px; display: flex; align-items: center; padding: 0 12px; color: var(--k-cfc9e2); font-size: 13px; cursor: move; }
.pc-group-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 整組執行（canvas.js runCards）：標題列右邊 */
.pc-group-run { margin-left: auto; flex: none; padding: 3px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel);
  color: var(--text); font-size: 12px; cursor: pointer; }
.pc-group-run:hover { border-color: var(--line-2); }
.pc-group-run:disabled { opacity: .5; cursor: default; }
.pc-group-resize { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, var(--k-5d566c) 50%); border-bottom-right-radius: 14px; }
.pc-search { position: absolute; z-index: 6; left: 50%; top: 90px; transform: translateX(-50%); width: min(520px, calc(100vw - 32px));
  padding: 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
  display: flex; flex-direction: column; gap: 8px; }
.pc-search-list { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.pc-search-item, .pc-list-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 0; border-radius: 6px; background: none;
  color: var(--text); font-size: 13px; text-align: left; cursor: pointer; width: 100%; }
.pc-search-item:hover, .pc-list-item:hover, .pc-list-item.on { background: var(--panel-sel); }
.pc-search-kind { flex: none; min-width: 34px; font-size: 11px; color: var(--muted); }
.pc-search-name { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-search-sub { flex: 1; min-width: 0; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-list-state { margin-left: auto; font-size: 11px; color: var(--muted); }
.pc-list-state.busy { color: var(--k-6aa8ff); }
.pc-drawer { position: absolute; z-index: 6; top: 90px; bottom: 70px; width: min(340px, calc(100vw - 32px)); display: flex; flex-direction: column;
  border-radius: 12px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(0, 0, 0, .6); overflow: hidden; }
.pc-drawer.left { left: 110px; } .pc-drawer.right { right: 16px; }
.pc-drawer-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.pc-drawer-body { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.pc-drawer > div:last-child { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pc-hist-tabs { display: flex; gap: 6px; padding: 8px 8px 0; }
.pc-chip.on { border-color: var(--k-d9d4ea); color: var(--k-ffffff); }
.pc-hist-item { display: flex; gap: 10px; align-items: center; padding: 6px; border: 0; border-radius: 8px; background: none; color: var(--text);
  text-align: left; cursor: pointer; width: 100%; }
.pc-hist-item:hover { background: var(--panel-sel); }
.pc-hist-thumb { flex: none; width: 52px; height: 52px; border-radius: 6px; overflow: hidden; background: #000; display: flex; align-items: center;
  justify-content: center; color: var(--muted); }
.pc-hist-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pc-hist-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; }
.pc-hist-meta b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-ai { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
.pc-ai-msgs { flex: 1 1 120px; min-height: 64px; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.pc-ai-resume { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--brand-line); border-radius: 10px; margin-bottom: 10px; font-size: 13px; }   /* 接回上次的對話（msg 3313 a） */
.pc-ai-new { text-align: right; margin-bottom: 6px; font-size: 12px; }
.pc-ai-hello { color: var(--muted); font-size: 13px; }
.pc-ai-starter { text-align: left; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
  font-size: 13px; cursor: pointer; }
.pc-ai-starter:hover { border-color: var(--line-2); }
.pc-ai-msg { padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.pc-ai-msg.user { align-self: flex-end; background: var(--brand-soft); max-width: 85%; }
.pc-ai-msg.assistant { background: var(--panel-2); }
.pc-ai-choices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; white-space: normal; }
.pc-ai-confirm { margin-top: 8px; padding: 8px; border-radius: 8px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; white-space: normal; }
.pc-ai-composer { flex: 0 0 auto; display: grid; gap: 8px; margin: 10px; padding: 10px; border: 1px solid var(--k-43315f); border-radius: 12px; background: var(--panel); min-width: 0; }
.pc-ai-composer:focus-within { border-color: var(--line-2); }
.pc-ai-bar { display: flex; gap: 8px; align-items: center; min-width: 0; }
.pc-ai-keyhint { flex: 1; min-width: 0; color: var(--muted); font-size: 11px; }
.pc-ai-planning-footer:empty { display: none; }
.pc-ai-model { flex: 0 0 auto; align-self: flex-start; margin: 8px 10px 0; max-width: calc(100% - 20px); height: 34px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); border-radius: 17px; padding: 0 10px; font: inherit; font-size: 13px; }
.pc-ai-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px; }
.pc-ai-chips:empty, .pc-ai-status[hidden] { display: none; }
.pc-ai-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 4px 3px 9px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel-2); font-size: 12px; }
.pc-ai-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-ai-chip-x { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 4px; }
.pc-ai-status { padding: 0 10px; font-size: 12px; }
.pc-ai-att { margin-top: 4px; font-size: 12px; opacity: .85; }
.pc-ai-did { margin-top: 6px; font-size: 12px; white-space: normal; }
.ag-noop { margin-top: 6px; font-size: 12px; }
.ag-preview { margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--panel-2); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow: auto; }
.pc-ai-clip { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--line); background: var(--panel-2);
  color: var(--text); font-size: 15px; cursor: pointer; }
.pc-ai-clip:hover { border-color: var(--line-2); }
.pc-ai .pc-ai-input { width: 100%; min-width: 0; box-sizing: border-box; min-height: 96px; max-height: 220px; resize: vertical; background: transparent; border: 0; border-radius: 0; color: var(--text); font: inherit;
  font-size: 13px; line-height: 1.6; padding: 4px; }
.pc-foot .pc-aibtn { background: linear-gradient(135deg, #7c4dff, #4a8bff); border-color: transparent; color: #fff; }
.pc-foot #pc-find, .pc-foot #pc-listbtn, .pc-foot #pc-histbtn, .pc-foot .pc-aibtn { width: auto; padding: 0 10px; }

/* 手機：畫布右上角那排佔到 100px（放在檔尾：要蓋過上面 .pc-drawer／.pc-search 的 top） */
@media (max-width: 760px) {
  .pc-drawer, .pc-search { top: 128px; }
  .pc-top { row-gap: 0; }
  /* 提示換到那排按鈕下面（約 103～121px），一行、太長用 …；左邊讓開工具列（x 10～66，矮螢幕會往上碰到這裡），不被抽屜（128px）蓋住 */
  .pc-top > .pc-hint { margin-left: 0; flex-basis: 100%; margin-top: 48px; padding-left: 64px; box-sizing: border-box;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pc-top > .pc-title { max-width: calc(100% - 170px); }    /* 長片名不要把「改名」擠到第二行（提示會跟著被推進抽屜底下） */
}

/* ── 站內通知（notices.js；使用者 2026-10-04 msg 2204 4a）：通知列表（10/10 起從頭像選單打開） ── */
.bell-panel { position: fixed; z-index: 85; width: 360px; max-width: calc(100vw - 16px); display: flex; flex-direction: column;
  border-radius: 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(0, 0, 0, .45); overflow: hidden; }
.bell-head { padding: 12px 16px; font-weight: 700; border-bottom: 1px solid var(--line-soft); }
.bell-list { overflow-y: auto; display: flex; flex-direction: column; padding: 6px; }
.bell-empty { padding: 24px 12px; text-align: center; color: var(--muted); font-size: 13px; }
.bell-item { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.bell-item:hover:not(:disabled) { background: var(--panel-2); }
.bell-item:disabled { cursor: default; }
.bell-item.unread { background: var(--brand-soft); }
.bell-ic { flex: none; width: 22px; text-align: center; }
.bell-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bell-t { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.bell-b { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.bell-time { font-size: 11px; color: var(--muted); }
.bell-more { margin: 6px; padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); cursor: pointer; }

/* AI 助手等回覆（agent.js paintWait；使用者 2026-10-05 msg 2237）：會動的三個點，讓人看得出還在跑 */
.ag-wait { color: var(--muted); }
.ag-wait-row { display: flex; align-items: center; gap: 10px; }
.ag-dots { display: inline-flex; gap: 4px; }
.ag-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-text); animation: ag-bounce 1.2s infinite ease-in-out; }
.ag-dots i:nth-child(2) { animation-delay: .15s; }
.ag-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ag-bounce { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .ag-dots i { animation: none; opacity: .7; } }
.ag-wait-done { margin-top: 4px; font-size: 12px; }
.ag-wait-done:empty { display: none; }
.pc-gen-busy-t { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pc-gen-busy-t small { font-size: 11px; font-weight: 400; color: var(--muted); }
.s-gen-spin { width: 12px; height: 12px; border-color: var(--line-strong); border-top-color: var(--brand-text); }
.pc-search-top { display: flex; gap: 6px; align-items: center; }
.pc-search-top .pc-pick-q { flex: 1; min-width: 0; }
.pc-search-x { flex: none; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2);
  color: var(--text); cursor: pointer; }
.pc-ref-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pc-ref-use { width: 84px; height: 22px; font-size: 11px; padding: 0 2px; border-radius: 6px; border: 1px solid var(--k-3a3746);
  background: var(--k-25232e); color: var(--k-d9d6e4); }

/* 畫布上方「專案功能」選單打開的面板（canvas.js openPanel，studio.js fnPanel：組裝成片、角色與場景；msg 3149 a 之前是功能卡） */
@media (max-width: 760px) { .pc-build-word { display: none; } }
.pc-drawer.wide { width: min(640px, calc(100vw - 24px)); }
.pc-fn-panel { display: flex; flex-direction: column; gap: 14px; }
#pcanvas .pc-fn-panel .s-panel { padding: 16px; }   /* 要蓋過 :is(#studio, .pc-fn-panel) .s-panel 的 22px */

/* 分鏡卡的生成紀錄、劇本卡的版本（canvas.js shotGenList／scriptVersions；使用者 2026-10-05 msg 2280） */
.pc-shotgens { display: flex; flex-direction: column; gap: 6px; padding: 6px 8px; }
.pc-shotgen { display: flex; gap: 8px; align-items: center; padding: 4px; border-radius: 6px; border: 1px solid var(--line-soft); }
.pc-shotgen.on { border-color: var(--line-2); }
.pc-shotgen img, .pc-shotgen video { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; background: #000; flex: none; }
.pc-shotgen-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 11px; color: var(--muted); }
.pc-shotgen-err { color: var(--k-ff9a6b); }
.pc-shotgen-acts { display: flex; gap: 10px; }
.pc-shotgen-acts .s-link { font-size: 12px; }
.pc-shotgen-none { font-size: 11px; color: var(--muted); }
.pc-script-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 8px; }
.pc-script-ver { max-width: 140px; height: 26px; font-size: 12px; }
.pc-script-cur { font-size: 11px; color: var(--muted); }

/* Skill 牆與介紹頁（skills.js；使用者 2026-10-07 msg 2793 a，照 LibTV 的 Agent 頁） */
.ag-log:has(.sk-wall) .ag-empty { margin: 28px auto 0; }     /* 有 Skill 牆時：歡迎字放上面，牆接在下面（不要置中撐開） */
/* 還沒開始聊（使用者 2026-10-12 msg 3919，照 LibTV）：大標題 → 輸入框 → Skill 牆，整頁一起捲 */
.ag-fresh .ag-log { padding-top: 24px; }
.ag-fresh .ag-empty, .ag-fresh .ag-log:has(.sk-wall) .ag-empty { margin: 24px auto 4px; max-width: 640px; }
.ag-fresh .ag-empty-title { font-size: 28px; }
.ag-fresh .ag-log > .ag-composer { width: min(880px, 100%); align-self: center; }
#studio .ag-fresh .ag-log > .ag-composer .ag-box textarea { min-height: 96px; }
.ag-fresh .ag-log > .ag-composer .ag-pop { bottom: auto; top: calc(100% + 6px); }   /* 對話框在頁面上方：選單往下開，免得被捲動區切掉 */
.ag-fresh .ag-skill-btn { display: none; }                    /* Skill 牆就在下面了 */
.ag-fresh .sk-wall { margin-top: 28px; }
.ag-fresh .sk-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.ag-fresh .sk-card { padding: 12px; gap: 12px; }
.ag-fresh .sk-cover { width: 168px; height: 104px; }
.ag-fresh .sk-card-name { font-size: 15px; }
.ag-fresh .sk-search { margin-left: auto; }
@media (max-width: 760px) { .ag-fresh .sk-grid { grid-template-columns: minmax(0, 1fr); } .ag-fresh .sk-cover { width: 120px; height: 80px; } }
.ag-page { min-height: 0; gap: 24px; }
.ag-page .ag-main { min-height: 0; gap: 10px; }
.ag-page .ag-head { display: none; flex: 0 0 auto; }
.ag-page :is(button, select, input:not([type="checkbox"])) { font-size: 14px; }
.ag-page .ag-side { flex-basis: clamp(300px, 25vw, 350px); padding: 17px; gap: 10px; }
.ag-page .ag-side-head { display: none; align-items: center; justify-content: space-between; gap: 10px; }
.ag-page .ag-new { min-height: 44px; flex: 0 0 auto; }
.ag-page .ag-memory { min-height: 51px; margin-top: 4px; padding: 11px 13px; text-align: left;
  border: 1px solid var(--brand-line); border-radius: 8px; background: var(--brand-soft); }
.ag-page .ag-side-title { font-size: 14px; margin-top: 7px; padding: 17px 8px 0; border-top: 1px solid var(--line-soft); }
.ag-page .ag-history { scrollbar-width: thin; }
.ag-page .ag-hrow { align-items: flex-start; }
.ag-page .ag-htitle { display: block; white-space: normal; text-overflow: clip; line-height: 1.7; padding: 10px; }
.ag-page .ag-hlabel { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ag-page .ag-hdel { min-width: 28px; min-height: 40px; padding: 6px; }
.ag-page .ag-hdel:focus-visible { visibility: visible; }
.ag-page .ag-hrow:focus-within .ag-hdel { visibility: visible; }
.ag-page .ag-extra { flex: 0 1 auto; min-height: 0; max-height: 35%; overflow-y: auto; }
.ag-page .ag-extra textarea { font-size: 16px; }
.ag-page .ag-composer { gap: 0; border: 1px solid var(--k-43315f); border-radius: 11px; background: var(--panel); }
.ag-page .ag-composer:focus-within { border-color: var(--line-2); }
.ag-page .ag-chips { padding: 12px 15px; border-bottom: 1px solid var(--line-soft); }
.ag-page .ag-chip { min-height: 34px; }
.ag-page .ag-proj { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-page .ag-planning { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); background: var(--panel-2); border-radius: 10px 10px 0 0; }
.ag-page .ag-planning-title { font-size: 14px; }
.ag-page .ag-level { font-size: 14px; }
.ag-page .ag-planning-manual { font-size: 14px; }
#studio .ag-page .ag-planning-manual select.ag-model { min-height: 38px; font-size: 14px; }
.ag-page .ag-planning-status, .ag-page .ag-planning-note, .ag-page .ag-planning-fee { font-size: 13px; }
.ag-page .ag-planning-settings > summary { font-size: 14px; }
.ag-page .ag-box { gap: 10px; padding: 12px 16px 10px; border: 0; border-radius: 0; background: transparent; }
#studio .ag-page .ag-box textarea { min-height: 96px; font-size: 16px; line-height: 1.8; }
.ag-page .ag-provider-controls { flex-wrap: wrap; align-items: center; }
#studio .ag-page .ag-provider-controls select.ag-model { height: 36px; border-radius: 7px; font-size: 14px; }
#studio .ag-page .ag-provider-controls select.ag-model:first-child { flex: 0 1 auto; max-width: 100%; }
#studio .ag-page .ag-provider-controls select.ag-model:nth-child(2) { flex: 1 1 180px; max-width: 300px; }
.ag-page .ag-material-note { font-size: 13px; }
.ag-page .ag-bar { gap: 8px; }
.ag-page .ag-library, .ag-page .ag-skill-btn { min-height: 36px; }
.ag-page .ag-skill-btn { padding: 5px 9px; border: 1px solid var(--line); border-radius: 7px; }
.ag-page .ag-send { min-width: 88px; min-height: 42px; }
.ag-page .ag-planning-footer { padding: 10px 16px; gap: 8px; background: var(--panel-2); border-radius: 0 0 10px 10px; }
.ag-page .ag-planning-footer > .s-row { justify-content: flex-end; flex-wrap: wrap; font-size: 13px; }
.ag-page .ag-planning-footer label { display: inline-flex; align-items: center; gap: 6px; }
#studio .ag-page .ag-planning-footer input[type="checkbox"] { width: 16px; height: 16px; padding: 0; flex: 0 0 auto; }
.ag-page .ag-planning-footer > .s-row > .ag-level { min-height: 34px; padding: 5px 9px; }
.ag-page .ag-advice-result { display: grid; gap: 8px; overflow-wrap: anywhere; }
.ag-page .ag-advice-result:empty { display: none; }
.ag-page .ag-advice-result > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ag-page .ag-cost { padding: 0 16px 10px; }
.ag-page .ag-main:not(.ag-fresh) > .ag-log { min-height: 64px; }
.ag-page .ag-main:not(.ag-fresh) > .ag-composer { flex: 0 0 auto; min-height: 0; max-height: calc(100% - 74px); overflow-y: auto; }
.ag-page .ag-main:not(.ag-fresh):has(> .ag-extra:not(:empty)) > .ag-composer { max-height: calc(65% - 84px); }
.ag-page .ag-main:not(.ag-fresh) .ag-pop { position: static; flex: 0 0 auto; margin: 8px; max-height: min(260px, 40vh); box-shadow: none; }
.ag-page .ag-main:not(.ag-fresh) .ag-chips { padding-top: 6px; padding-bottom: 6px; }
.ag-page .ag-main:not(.ag-fresh) .ag-planning { gap: 4px; padding-top: 6px; padding-bottom: 6px; }
.ag-page .ag-main:not(.ag-fresh) .ag-planning-title { display: none; }
.ag-page .ag-main:not(.ag-fresh) .ag-level { min-height: 34px; padding-top: 6px; padding-bottom: 6px; }
.ag-page .ag-main:not(.ag-fresh) .ag-box { padding-top: 8px; gap: 8px; }
.ag-page .ag-main:not(.ag-fresh) .ag-planning-footer { padding-top: 8px; padding-bottom: 8px; }
#studio .ag-page .ag-main:not(.ag-fresh) .ag-planning-manual select.ag-model { min-height: 34px; }
#studio .ag-page .ag-main:not(.ag-fresh) .ag-box textarea { min-height: 58px; max-height: 140px; }
.ag-page .ag-fresh .ag-log { padding-top: 8px; }
.ag-page .ag-fresh .ag-empty, .ag-page .ag-fresh .ag-log:has(.sk-wall) .ag-empty { margin: 4px 0 14px; max-width: none; text-align: left; gap: 8px; }
.ag-page .ag-fresh .ag-empty-title { font-size: 26px; }
.ag-page .ag-fresh .ag-empty .s-muted { font-size: 14px; line-height: 1.8; }
.ag-page .ag-fresh .ag-log > .ag-composer { width: 100%; }
.ag-page .ag-fresh .sk-wall { margin-top: 24px; padding: 14px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--panel); }
.ag-page .ag-fresh .sk-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.ag-page .ag-fresh .sk-card { flex-direction: column; padding: 0; gap: 0; overflow: hidden; }
.ag-page .ag-fresh .sk-cover { width: 100%; height: 96px; border-radius: 0; }
.ag-page .ag-fresh .sk-card-body { padding: 12px; gap: 8px; }
.ag-page .ag-fresh .sk-card-name { white-space: normal; overflow-wrap: anywhere; }
.ag-page .ag-fresh .sk-card-intro { font-size: 14px; }
.ag-page .ag-fresh .sk-card-meta { font-size: 13px; }
.ag-page .ag-fresh .sk-cats { padding: 4px 0 12px; border-bottom: 1px solid var(--line-soft); }
.ag-page .ag-fresh .sk-cat { height: auto; min-height: 34px; padding: 5px 9px; }
.ag-page .ag-fresh .sk-search { min-height: 38px; }
body:has(#studio:not([hidden]) .ag-page) .sk-dlg :is(.s-btn, .s-link, .sk-tab, .sk-cat, .sk-search, .pc-tooldlg-input) { font-size: 14px; }
body:has(#studio:not([hidden]) .ag-page) .sk-dlg .sk-cat { min-height: 34px; height: auto; }
body:has(#studio:not([hidden]) .ag-page) .sk-dlg .sk-search { min-height: 38px; }
body:has(#studio:not([hidden]) .ag-page) .sk-dlg :is(.sk-secs, .sk-card-intro) { font-size: 14px; }
body:has(#studio:not([hidden]) .ag-page) .sk-dlg :is(.sk-meta, .sk-note, .sk-step, .sk-card-meta) { font-size: 13px; }
body:has(#studio:not([hidden]) .ag-page) .sk-dlg textarea { font-size: 16px; }
@media (max-width: 960px) {
  .ag-page { position: relative; }
  .ag-page .ag-head { display: flex; }
  .ag-page .ag-main:not(.ag-fresh) > .ag-composer { max-height: calc(100% - 110px); }
  .ag-page .ag-main:not(.ag-fresh):has(> .ag-extra:not(:empty)) > .ag-composer { max-height: calc(65% - 120px); }
  .ag-page .ag-head .ag-side-btn { display: inline; }
  .ag-page .ag-side { display: none; position: fixed; inset: 0 0 0 auto; width: 340px; max-width: 92vw; z-index: 55;
    border-radius: 0; padding: 22px 18px; box-shadow: -8px 0 30px rgba(0, 0, 0, .6); }
  .ag-page .ag-side.open { display: flex; }
  .ag-page .ag-side-head { display: flex; min-height: 34px; }
  .ag-page .ag-side-close { display: inline; }
  .ag-page .ag-hdel { visibility: visible; }
}
@media (max-width: 760px) {
  .ag-page .ag-chips { padding: 10px 12px; }
  .ag-page .ag-planning { padding: 11px 12px; }
  .ag-page .ag-box { padding: 10px 12px; }
  .ag-page .ag-bar > .ag-plus:not(.ag-clip) { display: none; }
  .ag-page .ag-send { margin-left: auto; }
  .ag-page .ag-planning-footer { padding: 10px 12px; }
  .ag-page .ag-planning-footer > .s-row { justify-content: flex-start; }
  .ag-page .ag-fresh .ag-empty-title { font-size: 23px; }
  .ag-page .ag-fresh .sk-wall { padding: 11px; }
  .ag-page .ag-fresh .sk-search { flex: 1 1 100%; width: 100%; }
  .ag-page .ag-fresh .sk-grid { grid-template-columns: minmax(0, 1fr); }
}
.sk-wall { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; width: 100%; }
.sk-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sk-tabs { display: flex; gap: 14px; }
.sk-tab { padding: 4px 0; border: 0; background: none; color: var(--muted); font-size: 15px; cursor: pointer; }
.sk-tab.on { color: var(--text); font-weight: 600; }
.sk-search { height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--text); width: min(240px, 100%); }
.sk-cats { display: flex; gap: 6px; flex-wrap: wrap; }
.sk-cat { height: 28px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 12px; cursor: pointer; }
.sk-cat.on { color: var(--text); border-color: var(--brand); }
.sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.sk-card { display: flex; gap: 10px; padding: 10px; text-align: left; border-radius: 12px; border: 1px solid var(--line); background: var(--panel);
  color: var(--text); cursor: pointer; min-width: 0; }
.sk-card:hover { border-color: var(--brand); }
.sk-cover { width: 96px; height: 72px; flex: 0 0 auto; border-radius: 8px; object-fit: cover; background: #000; }
.sk-nocover { display: flex; align-items: center; justify-content: center; padding: 8px; overflow: hidden;
  background: linear-gradient(135deg, #4c3a8f, #1e1b3a); color: #fff; text-align: center; }
.sk-nocover span { font-size: 15px; font-weight: 700; line-height: 1.25; text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ag-fresh .sk-nocover span { font-size: 20px; }
.sk-c-film    { background: linear-gradient(135deg, #2f4a7a, #10182b); }
.sk-c-ad      { background: linear-gradient(135deg, #c2571a, #5a1f3d); }
.sk-c-drama   { background: linear-gradient(135deg, #b0305c, #3b1240); }
.sk-c-anime   { background: linear-gradient(135deg, #3a8fd8, #6b3fc4); }
.sk-c-mv      { background: linear-gradient(135deg, #d0399a, #2b1a6e); }
.sk-c-social  { background: linear-gradient(135deg, #1f9e8a, #18385c); }
.sk-c-general { background: linear-gradient(135deg, #6c56d9, #262046); }
.sk-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sk-card-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-card-intro { font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sk-card-meta { display: flex; gap: 8px; font-size: 11px; color: var(--muted); flex-wrap: wrap; }
.sk-badge { padding: 0 6px; border-radius: 4px; border: 1px solid var(--line); }
.sk-badge.on { border-color: var(--brand); color: var(--text); }
.sk-none { grid-column: 1 / -1; padding: 12px 0; }
.sk-more { align-self: center; }
.sk-dlg { position: fixed; inset: 0; z-index: 85; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .7); outline: none; padding: 16px; }
.sk-dlg-card { position: relative; display: flex; flex-direction: column; gap: 12px; width: min(760px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  padding: 18px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.sk-dlg-wide { width: min(1000px, 100%); }
.sk-dlg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sk-x { width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 16px; cursor: pointer; }
.sk-title { font-size: 20px; font-weight: 600; }
.sk-meta { font-size: 12px; }
.sk-fav.on { border-color: var(--brand); }
.sk-hero { position: relative; border-radius: 10px; overflow: hidden; background: #000; display: flex; justify-content: center; }
.sk-hero-img { max-width: 100%; max-height: 52vh; object-fit: contain; display: block; }
.sk-hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .5); color: #fff; font-size: 20px; cursor: pointer; }
.sk-hero-arrow.prev { left: 8px; } .sk-hero-arrow.next { right: 8px; }
.sk-hero-n { position: absolute; right: 10px; top: 8px; padding: 0 8px; border-radius: 10px; background: rgba(0, 0, 0, .5); color: #fff; font-size: 12px; }
.sk-secs { display: grid; grid-template-columns: 90px 1fr; gap: 6px 12px; font-size: 13px; }
.sk-sec-t { color: var(--muted); }
.sk-sec { white-space: pre-wrap; }
.sk-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-step { padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line); font-size: 12px; }
.sk-note { font-size: 12px; }
.sk-use { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 10px; border: 1px solid var(--brand); }
@media (max-width: 600px) { .sk-secs { grid-template-columns: 1fr; } .sk-cover { width: 72px; height: 56px; } }

/* 影片拆劇本的進度框（studio.js extractScript）：右下角，不擋畫面 */
.s-vscript { position: fixed; right: 16px; bottom: 16px; z-index: 1050; max-width: min(420px, calc(100vw - 32px));
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border-radius: 12px;
  background: var(--panel); color: var(--text); border: 1px solid var(--line); box-shadow: 0 8px 28px rgba(0,0,0,.35); }
.s-vscript > span { flex: 1 1 220px; line-height: 1.5; }
.s-las-box { bottom: 96px; }      /* 影片翻譯、投流素材剪輯的進度框（studio.js lasTrack）：在拆劇本那個上面 */
/* 爆款復刻存成 Skill 後的提示條（viral.js banner）：畫面上方、不擋操作；手機放到下面（不壓住畫布上方那列） */
.vr-banner { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 1050; display: flex; gap: 12px; align-items: center;
             width: max-content; max-width: min(640px, calc(100vw - 32px)); padding: 10px 14px; border-radius: 10px; background: var(--panel);
             border: 1px solid var(--line); box-shadow: 0 6px 24px rgba(0, 0, 0, .35); font-size: 13px; }
.vr-banner > span { flex: 1 1 auto; min-width: 0; line-height: 1.5; }
.vr-banner > a { white-space: nowrap; }
@media (max-width: 640px) { .vr-banner { top: auto; bottom: 92px; } }      /* 在畫布下方工具列（.pc-foot）上面 */

/* 首頁的場景分頁（scenes.js） */
.scene-tabs { margin-bottom: 12px; flex-wrap: wrap; row-gap: 8px; }
.scene-desc { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.scene-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.scene-tpl { display: contents; }
.scene-tpl > .s-muted { align-self: center; }
.scene-chip { padding: 9px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text);
  font-size: 14px; cursor: pointer; }
.scene-chip:hover { border-color: var(--line-2); }
.scene-chip:disabled { opacity: .6; cursor: default; }
/* 新建畫布的「從範本開始」（canvas.js pickStart） */
.pc-start { width: min(560px, 100%); }
.pc-start-list { display: grid; gap: 8px; max-height: 50vh; overflow: auto; margin: 8px 0; }
.pc-start-cat { font-size: 12px; color: var(--muted); margin-top: 6px; }
.pc-start-item { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); cursor: pointer; }
.pc-start-item:hover { border-color: var(--line-2); }

/* 運鏡預設（studio.js cameraPicker） */
.cam-box { width: min(760px, 100%); }
.cam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: 60vh; overflow: auto; margin: 10px 0; }
.cam-cell { position: relative; }
.cam-item { width: 100%; display: grid; gap: 4px; text-align: left; padding: 8px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); cursor: pointer; }
.cam-item:hover { border-color: var(--line-2); }
.cam-item .s-muted { font-size: 12px; line-height: 1.4; }
.cam-demo { width: 100%; aspect-ratio: 16 / 9; border-radius: 6px; background: var(--panel); object-fit: cover; }
.cam-icon { display: grid; place-items: center; font-size: 28px; }
.cam-star { position: absolute; top: 12px; right: 12px; border: 0; background: rgba(0, 0, 0, .45); color: #fff; border-radius: 6px;
  width: 26px; height: 26px; cursor: pointer; }
.cam-star.on { color: #ffd166; }

/* 一鍵成片（autofilm.js） */
.af-start { width: min(620px, 100%); }
.af-idea { width: 100%; box-sizing: border-box; margin: 8px 0; }
.af-bar { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); z-index: 30; max-width: calc(100% - 32px);
  padding: 8px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.af-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.af-dismissible-row { padding-right: 76px; min-height: 30px; }
.af-dismiss { position: absolute; top: 8px; right: 12px; font-size: 12px; padding: 4px 8px; }
.af-close { margin-left: auto; font-size: 12px; }      /* 進度列的「✕ 收起」：靠右 */
.af-pill { font-size: 12px; padding: 4px 10px; }      /* 收起後的小膠囊（點了展開） */
.af-chip { font-size: 12px; padding: 3px 8px; border-radius: 999px; background: var(--panel-2); color: var(--muted); }
.af-chip.done { color: var(--text); }
.af-chip.running { color: var(--line-2); }
.af-chip.skip { opacity: .5; text-decoration: line-through; }
.af-mv { display: flex; flex-direction: column; gap: 8px; }
.af-audio { width: 100%; }
.af-num { width: 76px; }
.af-rights { font-size: 13px; }
.af-start .s-btn.on { border-color: var(--line-2); color: var(--text); }
.af-lyrics { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }
.af-lyric { display: flex; align-items: center; gap: 6px; }
.af-lyric span { flex: 1; min-width: 0; }
.rf-box { max-width: min(560px, calc(100vw - 32px)); }
.rf-qr-wrap { display: flex; justify-content: center; }
.rf-qr { width: 220px; height: 220px; image-rendering: pixelated; border-radius: 8px; }
/* 風格庫（stylepick.js） */
.sp-box { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); display: flex; flex-direction: column; }
.sp-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.sp-tab { padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
.sp-tab.on { border-color: var(--line-2); background: var(--panel-sel); }
.sp-body { overflow-y: auto; min-height: 120px; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; margin-top: 8px; }
.sp-cell { display: flex; flex-direction: column; gap: 2px; }
.sp-item { display: flex; flex-direction: column; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: transparent;
  color: inherit; cursor: pointer; text-align: center; }
.sp-item:hover:not(:disabled) { border-color: var(--line-2); }
.sp-item.on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; background: var(--brand-soft); }
.sp-item img, .sp-noimg { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.sp-noimg { display: flex; align-items: center; justify-content: center; padding: 6px; background: var(--panel-sel); font-size: 13px; }
.sp-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.sp-acts { display: flex; justify-content: center; gap: 10px; font-size: 12px; }
.sp-mine-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sp-edit { width: min(520px, calc(100vw - 32px)); }
.sp-edit textarea { width: 100%; resize: vertical; }
.pc-style-sel { max-width: 100%; }
.rf-url { word-break: break-all; text-align: center; }
.rf-photos { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; font-size: 13px; }
.tier-wrap { overflow-x: auto; margin: 8px 0; }
.tier-table { border-collapse: collapse; min-width: 420px; font-size: 13px; }
.tier-table th, .tier-table td { padding: 6px 10px; border-bottom: 1px solid var(--k-3a3746); text-align: left; }
.tier-table .on { color: var(--line-2); font-weight: 600; }
.vr-box { max-width: min(720px, calc(100vw - 32px)); }
.vr-url { width: 100%; }
/* 角色卡片的預覽圖（studio.js characterList） */
.s-char-card { display: grid; grid-template-columns: 96px 1fr; column-gap: 14px; }
.s-char-card > :not(.s-char-thumb) { grid-column: 2; }
.s-char-thumb { grid-column: 1; grid-row: 1 / span 5; width: 96px; height: 128px; object-fit: cover; border-radius: 8px; cursor: zoom-in; }
/* 演員庫（studio.js actorLibrary） */
.s-actor-filter select { min-width: 110px; }
.s-actor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 12px; }
.s-actor-card { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line-soft, var(--line)); }
.s-actor-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--panel-2); cursor: zoom-in; }
.s-actor-img.none { display: grid; place-items: center; color: var(--muted); cursor: default; }
.s-actor-name { font-weight: 600; }
.s-actor-tags { font-size: 12px; }
.s-actor-film { margin-top: 6px; }
.s-actor-desc { font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vr-box .s-row > label { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; white-space: nowrap; }   /* 「配方名稱」不換行、輸入框吃剩下的寬 */
.vr-box .s-row > label > input { flex: 1 1 auto; min-width: 0; white-space: normal; }
.vr-progress { position: fixed; right: 16px; bottom: 16px; z-index: 90; padding: 8px 14px; border-radius: 10px; background: var(--panel-2); color: var(--text); font-size: 13px; box-shadow: 0 4px 16px rgba(0, 0, 0, .35); }
.af-chip.failed { color: #ff7a7a; }
.af-err { color: #ff7a7a; font-size: 13px; margin-top: 6px; }
.af-go { margin-left: auto; }
.af-picks { margin-top: 6px; font-size: 13px; display: grid; gap: 2px; max-height: 30vh; overflow: auto; }

/* 工作區切換（teams.js）：側欄最上面；在團隊工作區時整顆換成品牌色框，一眼看得出不是在自己的工作區 */
.ws { position: relative; margin: 0 0 12px; }
.ws-switch { width: 100%; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: var(--radius);
  border: 1px solid var(--line, rgba(255,255,255,.12)); background: var(--panel-2); color: var(--k-eeebf8); font-size: 14px; cursor: pointer; }
.ws-switch .ws-name { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.in-team .ws-switch { border-color: var(--brand); color: var(--brand-text); }
.ws-menu { position: absolute; left: 0; right: 0; top: 40px; z-index: 50; display: flex; flex-direction: column; padding: 4px;
  border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line, rgba(255,255,255,.12)); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.ws-item { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px; border: 0; border-radius: 6px; background: none;
  color: var(--k-eeebf8); font-size: 14px; cursor: pointer; text-align: left; }
.ws-item .ws-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-item small { color: var(--k-aaa5b5); font-size: 12px; }
.ws-item:hover, .ws-item.here { background: var(--panel-sel); }
/* 團隊頁（teams.js） */
.tm { display: flex; flex-direction: column; gap: 12px; max-width: 860px; }
.tm h3 { margin: 12px 0 0; font-size: 16px; }
.tm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--panel-2); }
.tm-row .grow { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.tm-box { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: var(--radius); background: var(--panel-2); }
.tm .s-num { width: 100px; flex: 0 0 100px; }
.tm > .s-btn { align-self: flex-start; }
/* 即時協作（canvas.js placePeers／paintEditing）：別人的游標與「○○正在編輯」 */
.pc-peers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.pc-peer { position: absolute; left: 0; top: 0; display: flex; align-items: flex-start; gap: 4px; transition: transform .25s linear; }
.pc-peer-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--peer); box-shadow: 0 0 0 2px rgba(0,0,0,.35); }
.pc-peer-name { padding: 1px 6px; border-radius: 6px; background: var(--peer); color: #111; font-size: 12px; white-space: nowrap; }
.pc-peer-edit { position: absolute; top: -22px; right: 0; padding: 1px 8px; border-radius: 6px; background: var(--peer); color: #111;
  font-size: 12px; white-space: nowrap; pointer-events: none; }
/* 數字人口播（talking.js） */
.tk-start { width: min(720px, 100%); }
.tk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; max-height: 280px; overflow-y: auto; margin: 8px 0; }
.tk-host { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px; border-radius: 8px; border: 2px solid transparent;
  background: var(--panel-2); color: var(--text); font-size: 12px; cursor: pointer; }
.tk-host img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 6px; }
.tk-host span { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.tk-host.on { border-color: var(--brand); }
.tk-up { justify-content: center; min-height: 120px; }
.tk-consent { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--k-ffffff); margin: 4px 0 8px; }

/* 組裝成片的混音設定（studio.js buildPanel） */
.s-mix { margin: 8px 0; }
.s-mix summary { cursor: pointer; }
.s-mix-row { display: grid; grid-template-columns: minmax(7em, 17em) minmax(100px, 280px) 3.5em; align-items: center; gap: 8px; margin: 6px 0; }
.s-mix-row select { grid-column: 2 / 4; justify-self: start; }
.s-mix-range { width: 100%; }
.s-mix-val { width: 3.5em; text-align: right; font-variant-numeric: tabular-nums; }

/* 互動劇情（story.js；畫布的分支卡） */
.pc-branch-opts { font-size: 12px; color: var(--muted); padding: 4px 8px 8px; }
.st-player { width: min(920px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.st-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.st-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-stage { display: flex; justify-content: center; background: #000; border-radius: 8px; }
.st-video { max-height: min(70vh, 720px); max-width: 100%; aspect-ratio: 9 / 16; background: #000; }
.st-stage.wide .st-video { aspect-ratio: 16 / 9; width: 100%; }
.st-stage.square .st-video { aspect-ratio: 1; }
.st-question { font-size: 18px; font-weight: 600; text-align: center; margin: 4px 0; }
.st-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.st-opt { min-width: 140px; }
.st-end { font-size: 18px; font-weight: 600; text-align: center; }
.st-panel .s-row { justify-content: center; }
.st-trail { font-size: 12px; color: var(--muted); text-align: center; }
.st-problems { margin: 0; padding-left: 20px; }
.st-write { width: min(600px, calc(100vw - 32px)); }
.st-write textarea { width: 100%; resize: vertical; }
.st-routes { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; }
.st-route { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
@media (max-width: 560px) { .st-route { grid-template-columns: 1fr; } }

/* 3D 預演台（previz.js） */
.pv-shade { z-index: 2000; }
.pv-box { width: min(1200px, calc(100vw - 24px)); height: min(860px, calc(100vh - 24px)); height: min(860px, calc(100dvh - 24px)); display: flex; flex-direction: column; gap: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.pv-title { font-weight: 600; }
.pv-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pv-btn { padding: 4px 10px; }
.pv-sep { width: 1px; height: 22px; background: var(--line); margin: 0 2px; }
.pv-grow { flex: 1; }
.pv-sel { font-size: 13px; color: var(--muted); min-width: 9em; }
.pv-focal-row { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.pv-focal { width: 110px; }
.pv-focal-val { width: 3.5em; font-variant-numeric: tabular-nums; font-size: 13px; }
.pv-stage { flex: 1; min-height: 160px; display: flex; align-items: center; justify-content: center; background: #111; border-radius: 8px; }
.pv-frame canvas { display: block; touch-action: none; }
.pv-info { font-size: 12px; color: var(--muted); }
.pv-btn.on { border-color: var(--brand); background: var(--brand-soft); }
@media (max-width: 560px) {
  .pv-box { padding: 6px; gap: 6px; }
  .pv-tools { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .pv-tools > * { flex: none; }
  .pv-sel { min-width: auto; }
}

/* 全網爆款：YouTube 熱門短片（app.js loadTrending） */
.trend { margin: 0 0 16px; }
.trend-head { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.trend-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.trend-item { display: block; padding: 10px 12px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line);
  color: var(--text); text-decoration: none; }
.trend-item:hover { border-color: var(--line-2); }
.trend-title { font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.trend-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
/* 空卡片的「試試：」清單（使用者 2026-10-12 msg 3795／3798 a，對標 LibTV） */
.pc-try { display: grid; gap: 2px; padding: 8px 4px; justify-items: stretch; width: 100%; max-width: 260px; }
.pc-try-head { font-size: 12px; color: var(--muted); padding: 0 8px 4px; }
.pc-try-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 0; border-radius: 8px; background: none;
  color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.pc-try-item:hover, .pc-try-item:focus-visible { background: var(--k-ffffff-06); }
.pc-try-ic { width: 18px; text-align: center; }
.pc-frame-try { justify-content: safe center; align-items: center; padding: 8px; overflow: auto; }
/* 文字、劇本、分鏡、配樂、配音、分支卡的新樣子（使用者 2026-10-12 msg 3822／3825 a：跟圖卡／影片卡一樣，名稱在框外、按鈕在下面的面板） */
.pc-tbox { padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.pc-tcard .pc-tbox .pc-prompt { background: none; border: 0; padding: 0; min-height: 96px; font-size: 13px; color: var(--text); cursor: text; }
.pc-tcard .pc-tbox .pc-prompt:focus { outline: none; }
.pc-tcard .pc-tbox:focus-within { border-color: var(--k-d9d4ea); }
.pc-tkind { font-size: 12px; line-height: 1; }
.pc-tshot { font-size: 12px; color: var(--muted); line-height: 1.5; }
.pc-tcard .pc-try { max-width: none; padding: 0; }
.pc-tcard .pc-branch-opts { font-size: 11px; color: var(--muted); }
.pc-tcard.k-branch .pc-tbox { border-color: var(--gold); }
.pc-tcard.k-branch.selected .pc-tbox { border-color: var(--k-d9d4ea); }
.pc-tcard.k-branch.linking .pc-tbox { border-color: var(--line-2); }
.pc-tbusy { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.pc-panel.pc-panel-text { width: min(420px, calc(100vw - 32px)); }
.pc-panel.pc-panel-text select { height: 30px; background: var(--k-25232e); border: 1px solid var(--k-3a3746); color: var(--k-d9d6e4);
  border-radius: 8px; font-size: 12px; padding: 0 6px; max-width: 100%; }

/* 購買點數頁：任務送點（tasks.py；msg 3993）、月繳／年繳切換 */
.buy-tasks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.buy-task { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--k-3a3746); border-radius: 12px; background: var(--k-25232e); }
.buy-task.done { opacity: .6; }
.buy-task-name { font-weight: 600; }
.buy-task-pts { color: var(--brand-text, #b9a2ff); font-size: 13px; }
.buy-cycle { gap: 8px; }
.buy-pay-pick { display: grid; gap: 10px; }      /* 購買時的付款方式框：付款方式那排和說明之間留空（msg 4824） */
#studio:has(> #s-body > .buy-page) { background: #0d0d12; padding-top: 29px; }
#studio:has(> #s-body > .buy-page) > .crumbs { display: none; }
.buy-page { --text: #f3eff8; --muted: #b0a6be; --panel: #18151f; --brand: #8755f4; --brand-text: #c4a9ef; --line: #342c3e; width: 100%; min-width: 0; max-width: 1400px; margin: 0 auto; color: var(--text); font: 15px/1.7 "Segoe UI", "Microsoft JhengHei", sans-serif; }
.buy-page :is(h1, h2, h3, p) { margin: 0; }
.buy-page :is(button, input, a) { font-family: inherit; }
.buy-page .s-muted { color: var(--muted); font-size: 13px; line-height: 1.85; overflow-wrap: anywhere; }
.buy-page .buy-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; text-align: left; margin: 0 0 18px; }
.buy-page .buy-top h1 { font-size: 29px; letter-spacing: -.8px; line-height: 1.4; font-weight: 600; margin: 0; }
.buy-page .buy-top p { font-size: 14px; line-height: 1.7; color: #b4a8c4; margin-top: 8px; max-width: 800px; }
.buy-page .buy-header-tier { text-align: right; white-space: nowrap; }
.buy-page .buy-header-tier small { display: block; font-size: 13px; margin-bottom: 3px; color: var(--muted); }
.buy-page .buy-back-link { display: inline-block; color: #c4a9ef; text-decoration: none; font-size: 14px; margin-bottom: 14px; }
.buy-page .buy-referral { border: 1px solid #80609b; background: #241a30; border-radius: 10px; padding: 18px 21px; margin: 0 0 20px; }
.buy-page .buy-referral-head { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 11px; }
.buy-page .buy-referral-head h2 { font-size: 18px; font-weight: 550; white-space: nowrap; }
.buy-page .buy-referral-head p { font-size: 14px; color: #c7b2d8; }
.buy-page .buy-ref-row { justify-content: flex-start; max-width: 760px; gap: 10px; margin: 0; }
#studio .buy-page input.buy-ref { flex: 1; width: auto; min-width: 0; min-height: 44px; font-size: 16px; color: var(--text); background: #100c17; border-color: #785391; border-radius: 6px; padding: 7px 11px; }
.buy-page .buy-ref-row > button { min-width: 85px; min-height: 44px; font-size: 15px; }
.buy-page .buy-ref-row > .s-muted { flex-basis: 100%; font-size: 14px; color: #c4a7df; }
.buy-page .buy-ref-row > .s-muted:empty { display: none; }
.buy-page .buy-payment-note { font-size: 13px; line-height: 1.8; color: #b7a2c8; margin-top: 12px; }
.buy-page .buy-referral-rules { font-size: 13px; line-height: 1.8; color: #bba3cb; margin-top: 7px; }
.buy-page .buy-status { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(180px, .7fr); border: 1px solid #392d43; border-radius: 10px; overflow: hidden; background: #19151f; margin-bottom: 18px; }
.buy-page .buy-status.membership-status { grid-template-columns: minmax(0, 1fr); }
.buy-page .buy-member-status { padding: 19px 22px; min-width: 0; }
.buy-page .buy-status-title { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.buy-page .buy-status-title > strong { font-size: 16px; font-weight: 500; }
.buy-page .buy-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #ac8bc9; }
.buy-page .buy-member-status p { margin-top: 6px; color: #b8abc6; }
.buy-page .buy-wallet { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 12px 22px; border-left: 1px solid #392d43; background: #21192b; min-width: 0; }
.buy-page .buy-wallet > strong { font-size: 25px; font-weight: 400; line-height: 1.4; letter-spacing: -.5px; overflow-wrap: anywhere; }
.buy-page .buy-wallet > .s-muted { font-size: 12px; }
.buy-page .buy-wallet > .s-link { padding: 0; margin-top: 3px; font-size: 13px; text-decoration: none; }
.buy-page .buy-page-links { position: sticky; top: -29px; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 12px 0 14px; margin: 7px 0 17px; border-bottom: 1px solid #2f2538; background: #0d0d12; }
.buy-page .buy-page-links .s-link { font-size: 14px; padding: 0; }
.buy-page:not(.is-topup) :is(#buy-member, #buy-models, #buy-benefits, #buy-rules, #buy-ledger),
.buy-page.is-topup :is(#buy-topup, #buy-tasks, #buy-estimates, #buy-ledger) { scroll-margin-top: 76px; }
.buy-page .buy-rules-banner { border-left: 3px solid #a27bce; background: #21182b; color: #d6c2e8; padding: 12px 16px; border-radius: 0 7px 7px 0; margin-bottom: 20px; font-size: 14px; line-height: 1.7; }
.buy-page .buy-rules-banner small { display: block; margin-top: 4px; font-size: 13px; color: #b0a6be; }
.buy-page .buy-section-title { font-size: 20px; font-weight: 550; margin: 23px 0 13px; }
.buy-page .buy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin: 0; }
.buy-page .buy-card { padding: 18px 20px 17px; gap: 0; border: 1px solid #44314f; border-radius: 11px; background: linear-gradient(135deg, #221b2d, #19151f 70%); }
.buy-page .buy-card.pro { border-color: #5b3c78; }
.buy-page .buy-card:hover { border-color: #8060a0; }
.buy-page .buy-card.mine { box-shadow: 0 0 0 1px #b38bdb inset; }
.buy-page .buy-head { font-size: 16px; font-weight: 500; color: #e7dbf4; gap: 8px; }
.buy-page .buy-head h3 { font-size: inherit; font-weight: inherit; }
.buy-page .buy-tag { font-size: 12px; font-weight: 400; line-height: 1.7; border: 1px solid #4a375c; background: #2b1f37; color: #d2b7f4; border-radius: 5px; padding: 3px 9px; white-space: nowrap; }
.buy-page .buy-tag.soft { background: transparent; color: #b8adc9; border-color: #3b3246; }
.buy-page .buy-price { font-size: 30px; font-weight: 600; line-height: 1.35; letter-spacing: -.8px; white-space: nowrap; margin: 13px 0 0; padding: 0; }
.buy-page .buy-currency { font-size: 15px; font-weight: 400; letter-spacing: 0; color: #c8b9d8; margin-right: 3px; }
.buy-page .buy-period { font-size: 14px; font-weight: 400; letter-spacing: 0; color: #c3b4d2; margin-left: 3px; }
.buy-page .buy-member-access { margin-top: 14px; font-size: 13px; color: #c7b7d5; line-height: 1.8; }
.buy-page .buy-model-tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.buy-page .buy-model-tier { min-width: 0; border: 1px solid #44314f; border-radius: 9px; padding: 18px; background: #1b1522; }
.buy-page .buy-model-tier h3 { color: #e7dbf4; font-size: 17px; font-weight: 550; }
.buy-page .buy-model-group { margin-top: 17px; }
.buy-page .buy-model-group h4 { margin: 0 0 7px; color: #cfb6e4; font-size: 14px; font-weight: 500; }
.buy-page .buy-model-group ul { margin: 0; padding-left: 20px; color: #bdb0c9; font-size: 13px; line-height: 1.9; overflow-wrap: anywhere; }
.buy-page .buy-points { display: flex; align-items: baseline; gap: 6px; margin-top: 12px; color: #d5b9f5; font-size: 15px; font-weight: 400; }
.buy-page .buy-points > strong { font-size: 24px; line-height: 1.4; letter-spacing: -.5px; font-weight: 550; }
.buy-page .buy-points > span:not(.buy-tag) { font-size: 13px; font-weight: 400; }
.buy-page .buy-points > .buy-tag { margin-left: auto; }
.buy-page .buy-points-split { margin-top: 7px; color: #b7a8c6; font-size: 13px; line-height: 1.8; min-height: 47px; }
.buy-page .buy-points-split b { font-weight: 400; color: #e5c3fa; }
.buy-page .buy-points-split small { font-size: 13px; color: var(--muted); }
.buy-page .buy-features { border-top: 1px solid #42304f; margin-top: 11px; padding-top: 10px; font-size: 13px; }
.buy-page .buy-feature { display: flex; justify-content: space-between; gap: 8px; color: #c7b7d5; }
.buy-page .buy-feature strong { font-weight: 500; color: #dfd1eb; text-align: right; }
.buy-page .s-btn.primary { background: #8755f4; border: 1px solid transparent; color: #fff; border-radius: 7px; box-shadow: none; font-weight: 500; }
.buy-page .s-btn.primary:hover:not(:disabled) { background: #9568fa; }
.buy-page .s-btn.buy-go { margin-top: 15px; min-height: 42px; height: auto; padding: 9px 18px; font-size: 14px; line-height: 1.7; }
.buy-page .s-btn.buy-go:disabled { background: #2b2335; color: #a69aaf; border-color: #4d3e59; opacity: 1; }
.buy-page .buy-small-note { font-size: 13px; color: #aa99ba; line-height: 1.9; margin-top: 12px; }
.buy-page .buy-card:not(.custom) > .buy-small-note { margin-bottom: auto; }
.buy-page .buy-card.custom { grid-column: span 2; display: block; padding: 20px; background: #1b1424; }
.buy-page .buy-card.custom .buy-points { font-size: 25px; margin: 13px 0; }
.buy-page .buy-card.custom .buy-go { width: auto; min-width: 150px; padding: 9px 18px; margin-top: 0; }
.buy-page .buy-card.custom .buy-sub { margin-top: 10px; font-size: 13px; line-height: 1.9; }
.buy-page .buy-slider { flex-wrap: nowrap; margin-top: 16px; }
#studio .buy-page .buy-slider input[type=number] { font-size: 14px; width: 180px; min-width: 0; min-height: 40px; color: var(--text); background: #100e16; border-color: #4d3a5d; border-radius: 6px; }
.buy-page .buy-crosslink { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 21px; border: 1px solid #473451; border-radius: 9px; margin-top: 21px; background: #19141f; }
.buy-page .buy-crosslink strong { font-size: 15px; font-weight: 550; }
.buy-page .buy-crosslink p { font-size: 13px; color: #b7a8c5; margin-top: 3px; }
.buy-page .buy-crosslink > a { flex-shrink: 0; color: #f3eff8; background: #221a2b; border: 1px solid #493750; border-radius: 7px; font-size: 14px; padding: 8px 14px; text-decoration: none; height: auto; }
#studio .buy-page > .s-panel { padding: 22px; margin-top: 27px; border: 1px solid #352a40; border-radius: 10px; background: #16121c; gap: 0; }
.buy-page .s-panel-title { font-size: 20px; font-weight: 550; margin-bottom: 5px; }
.buy-page .buy-point-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 19px; margin-top: 17px; }
.buy-page .buy-point-rule { border-right: 1px solid #382942; padding-right: 16px; }
.buy-page .buy-point-rule:last-child { border: 0; padding: 0; }
.buy-page .buy-point-rule > small { font-size: 12px; color: #b795d4; letter-spacing: 1px; }
.buy-page .buy-point-rule > strong { display: block; margin: 8px 0 5px; font-size: 15px; font-weight: 500; }
.buy-page .buy-point-rule > p, .buy-page .buy-faq p { font-size: 14px; color: #b7a7c5; line-height: 1.9; }
.buy-page .buy-faq { margin-top: 20px; }
.buy-page .buy-faq details { padding: 12px 0; border-top: 1px solid #33273c; }
.buy-page .buy-faq summary { cursor: pointer; font-size: 14px; color: #d0b8e4; min-height: 28px; }
.buy-page .buy-faq p { margin-top: 10px; }
.buy-page .tier-table { width: 100%; min-width: 640px; font-size: 14px; border-collapse: collapse; }
.buy-page .tier-table :is(th, td) { padding: 11px 13px; border-bottom: 1px solid #32263c; color: #bbadca; vertical-align: top; }
.buy-page .tier-table th { color: #cfbedf; font-weight: 500; }
.buy-page .tier-table thead th { background: #261b32; color: #e2cbfa; }
.buy-page .tier-table .on { background: #2b1b381f; color: #d2b7f4; }
.buy-page .tier-wrap > .s-muted { font-size: 13px; margin-top: 12px; }
.buy-page .tier-wrap > .buy-compare-intro { margin: 0 0 16px; }
.buy-page .buy-compare-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.buy-page .buy-compare-heading small { color: var(--muted); font-size: 13px; }
.buy-page .gen-wrap { margin-top: 16px; }
.buy-page .gen-table { min-width: 1000px; font-size: 14px; }
.buy-page .gen-table :is(th, td) { padding: 12px 14px; border-color: #3c2b46; text-align: right; }
.buy-page .gen-table th:first-child { text-align: left; min-width: 230px; background: #1c1524; white-space: normal; }
.buy-page .gen-table thead th { background: #2a1d35; color: #dfc6f2; font-weight: 500; }
.buy-page .gen-table .gen-group td { text-align: left; background: #30213a; color: #d1b7e5; }
.buy-page .gen-table .gen-pts, .buy-page .gen-table .gen-per { color: #bca5cc; font-size: 12px; }
.buy-page .buy-tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 15px; }
.buy-page .buy-task { display: flex; flex-direction: column; align-items: flex-start; padding: 15px; border: 1px solid #3b2c46; border-radius: 7px; background: transparent; gap: 4px; }
.buy-page .buy-task-name { font-size: 14px; font-weight: 550; }
.buy-page .buy-task-pts { font-size: 13px; color: #bb97dc; }
.buy-page .buy-task .s-row { flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.buy-page .buy-task .s-btn { font-size: 13px; color: #f3eff8; border: 1px solid #493750; background: #221a2b; border-radius: 7px; }
.buy-page .buy-task .s-btn.primary:hover:not(:disabled) { background: #2c2235; }
.buy-page .buy-task.done { opacity: .7; }
.buy-page .buy-price-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; margin: 15px 0 20px; }
.buy-page .buy-price-list > div { display: flex; justify-content: space-between; gap: 15px; font-size: 14px; border-bottom: 1px solid #35283e; padding: 9px 0; color: #bdaacb; }
.buy-page .buy-price-list strong { white-space: nowrap; font-weight: 500; color: #e5ccee; }
.buy-page .buy-cycle { flex-wrap: wrap; gap: 5px; margin: 18px 0 15px; }
.buy-page .buy-cycle .s-btn { min-width: 0; font-size: 13px; color: #b9a7ca; padding: 6px 10px; background: transparent; border: 1px solid #3d2c48; border-radius: 6px; height: auto; }
.buy-page .buy-cycle .s-btn.primary { background: #39224c; color: #edd9fe; border-color: #8860a3; }
.buy-page .buy-cycle .s-btn.primary:hover:not(:disabled) { background: #39224c; }
.buy-page .ad-rowline { display: grid; grid-template-columns: 105px minmax(0, 1fr) 105px 145px; gap: 4px 12px; align-items: center; padding: 13px 4px; border-top: 1px solid #2e2336; border-bottom: 0; font-size: 13px; overflow-wrap: anywhere; }
.buy-page .ad-rowline > :first-child { grid-column: 1; grid-row: 1 / 3; width: max-content; max-width: 100%; padding: 2px 8px; background: #302039; border: 0; border-radius: 4px; color: #ceb6df; font-size: 12px; }
.buy-page .ad-rowline > :nth-child(2) { grid-column: 3; grid-row: 1 / 3; text-align: right; color: #d6c5e3; font-size: 14px; }
.buy-page .ad-rowline > :nth-child(3) { grid-column: 2; grid-row: 2; font-size: 12px; }
.buy-page .ad-rowline > :nth-child(4):not(:last-child) { grid-column: 2; grid-row: 1; }
.buy-page .ad-rowline > :last-child { grid-column: 4; grid-row: 1 / 3; text-align: right; font-size: 12px; color: #9f8cb1; }
.buy-page :is(.gen-wrap, .tier-wrap) { max-width: 100%; }
.buy-page :is(button, input, a, summary, [tabindex]):focus-visible { outline: 2px solid #d9bcff; outline-offset: 4px; }
.buy-page :is(section, #buy-rules, #buy-estimates, #buy-tasks, #buy-ledger) { scroll-margin-top: 22px; }
.s-ask:has(.buy-pay-pick) { width: min(590px, calc(100vw - 30px)); background: #1a1422; border: 1px solid #664c79; border-radius: 13px; color: #f3eff8; }
.s-ask:has(.buy-pay-pick) .s-ask-text { font-size: 19px; font-weight: 550; }
.s-ask:has(.buy-pay-pick) .buy-order-summary { background: #261b31; border: 1px solid #4a345a; border-radius: 8px; padding: 16px 18px; color: #e9d7f5; font-size: 14px; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.s-ask:has(.buy-pay-pick) .buy-cycle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.s-ask:has(.buy-pay-pick) .buy-cycle > .s-btn { height: auto; min-height: 44px; white-space: normal; }
.s-ask:has(.buy-pay-pick) .s-muted { font-size: 13px; line-height: 1.85; color: #bba6cc; }
@media (max-width: 1150px) {
  .buy-page .buy-grid { gap: 11px; }
  .buy-page .buy-card { padding: 17px 15px; }
  .buy-page .buy-price { font-size: 27px; }
  .buy-page .buy-head { font-size: 15px; }
  .buy-page .buy-head .buy-tag { font-size: 11px; padding: 3px 6px; }
}
@media (max-width: 980px) and (min-width: 761px) {
  .buy-page .buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buy-page .buy-status { grid-template-columns: minmax(0, 1fr) 180px; }
  .buy-page .buy-header-tier { display: none; }
  .buy-page .buy-tasks { grid-template-columns: minmax(0, 1fr); }
  .buy-page .buy-point-rules { grid-template-columns: minmax(0, 1fr); }
  .buy-page .buy-point-rule { padding: 0 0 13px; border-right: 0; border-bottom: 1px solid #382942; }
}
@media (max-width: 760px) {
  .s-ask:has(.buy-pay-pick) .buy-cycle { grid-template-columns: minmax(0, 1fr); }
  .buy-page .buy-top { margin-bottom: 18px; }
  .buy-page .buy-top h1 { font-size: 26px; }
  .buy-page .buy-top p { font-size: 14px; line-height: 1.9; }
  .buy-page .buy-header-tier { display: none; }
  .buy-page .buy-referral { padding: 16px; margin-bottom: 18px; }
  .buy-page .buy-referral-head { gap: 5px; margin-bottom: 12px; }
  .buy-page .buy-referral-head h2 { font-size: 19px; }
  .buy-page .buy-referral-head p { line-height: 1.8; }
  .buy-page .buy-ref-row { gap: 8px; }
  .buy-page .buy-ref-row > button { min-width: 70px; }
  .buy-page .buy-ref-row > .s-muted { font-size: 13px; }
  .buy-page .buy-grid, .buy-page .buy-tasks, .buy-page .buy-status, .buy-page .buy-point-rules, .buy-page .buy-price-list { grid-template-columns: minmax(0, 1fr); }
  .buy-page .buy-model-tiers { grid-template-columns: minmax(0, 1fr); }
  .buy-page .buy-member-status { padding: 16px 17px; }
  .buy-page .buy-wallet { border-left: 0; border-top: 1px solid #392d43; padding: 13px 17px; }
  .buy-page .buy-page-links { gap: 16px; margin: 8px 0 18px; padding-bottom: 12px; }
  .buy-page .buy-page-links .s-link { font-size: 13px; }
  .buy-page .buy-rules-banner { padding: 12px 13px; margin-bottom: 23px; }
  .buy-page .buy-grid { gap: 13px; }
  .buy-page .buy-card, .buy-page .buy-card.custom { grid-column: auto; padding: 20px; }
  .buy-page .buy-head { font-size: 17px; }
  .buy-page .buy-head .buy-tag { font-size: 12px; }
  .buy-page .buy-price { font-size: 32px; }
  .buy-page .buy-points > strong { font-size: 26px; }
  .buy-page .buy-points-split { min-height: 0; font-size: 14px; }
  .buy-page .buy-points-split small { font-size: 14px; }
  .buy-page .buy-features { font-size: 14px; margin-top: 13px; padding-top: 12px; }
  .buy-page .s-btn.buy-go { min-height: 44px; font-size: 15px; }
  .buy-page .buy-card.custom .buy-go { width: 100%; }
  .buy-page .buy-slider { flex-wrap: wrap; }
  #studio .buy-page .buy-slider input[type=range] { flex-basis: 100%; }
  #studio .buy-page .buy-slider input[type=number] { width: 100%; }
  .buy-page .buy-crosslink { flex-direction: column; align-items: stretch; padding: 17px; }
  .buy-page .buy-crosslink > a { text-align: center; }
  #studio .buy-page > .s-panel { padding: 18px 15px; margin-top: 23px; }
  .buy-page .s-panel-title { font-size: 19px; }
  .buy-page .buy-point-rule { padding: 0 0 15px; border-right: 0; border-bottom: 1px solid #382942; }
  .buy-page .buy-task .s-row { width: 100%; }
  .buy-page .buy-task .s-row .s-btn { flex: 1; font-size: 13px; }
  .buy-page .buy-price-list { gap: 2px; }
  .buy-page .gen-table { font-size: 13px; }
  .buy-page .gen-table th:first-child { min-width: 190px; }
  .buy-page .ad-rowline { grid-template-columns: 85px minmax(0, 1fr) 90px; gap: 4px 7px; }
  .buy-page .ad-rowline > :last-child { grid-column: 2 / 4; grid-row: 3; text-align: left; }
}

/* ── 創作者主頁、作品分類、推薦作品（使用者 2026-10-13 msg 4019 a y、4022 a；app.js setCat／authorLink／relatedBox、studio.js creatorPage） ── */
.nav-cats { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 12px 6px 40px; }
.nav-cat {
  padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line-2); background: none; color: var(--muted);
  font-size: 12px; line-height: 20px; cursor: pointer;
}
.nav-cat:hover { color: var(--k-eeebf8); background: var(--panel-2); }
.nav-cat.active { color: var(--brand-text); border-color: var(--brand); background: var(--panel-sel); }
.nav-cat:focus-visible { outline: 2px solid var(--k-9b75ff); outline-offset: 1px; }
.cat-chip {
  flex: none; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--brand); background: var(--panel-sel);
  color: var(--brand-text); font-size: 13px; cursor: pointer;
}
.author-link { cursor: pointer; }
.author-link:hover, .author-link:focus-visible { color: var(--brand-text); text-decoration: underline; outline: none; }
/* 參考作品詳情頁：左邊播放、右邊推薦 */
.d-main { flex: 1; display: flex; min-height: 0; }
.d-main .stage { flex: 1; min-width: 0; }
.d-related { flex: none; width: 320px; overflow-y: auto; padding: 14px; border-left: 1px solid var(--side-line); background: var(--bg); }
.detail.watching .d-related { display: none; }
.related-head { font-weight: 700; margin-bottom: 10px; }
.related-list { display: flex; flex-direction: column; gap: 10px; }
.related-item { display: flex; gap: 10px; cursor: pointer; border-radius: var(--radius); padding: 4px; }
.related-item:hover, .related-item:focus-visible { background: var(--panel-2); outline: none; }
.related-thumb { flex: none; width: 128px; height: 72px; border-radius: 6px; overflow: hidden; background: var(--panel-2); }
.related-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.related-meta { min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.related-name { color: var(--k-eeebf8); font-size: 13px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.related-by { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 社群作品頁：左邊作品、右邊推薦 */
.cm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.cm-side { position: sticky; top: 12px; }
.cm-cat { align-items: center; gap: 8px; margin: 0 0 12px; }
/* 創作者主頁 */
.cr-head { display: flex; align-items: center; gap: 18px; margin: 8px 0 20px; }
.cr-avatar {
  flex: none; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; font-weight: 700;
  color: #fff; background: linear-gradient(135deg, var(--brand), #2a2a30);
}
.cr-info { flex: 1; min-width: 0; }
.cr-info h1 { margin: 0 0 8px; font-size: 22px; overflow-wrap: anywhere; }
.cr-stats { display: flex; gap: 20px; color: var(--muted); font-size: 13px; }
.cr-stat b { color: var(--k-eeebf8); font-size: 16px; margin-right: 4px; }
.cr-sec { font-size: 16px; margin: 22px 0 12px; }
.cr-more { margin: 16px 0; }
@media (max-width: 1100px) {
  .cm-layout { grid-template-columns: minmax(0, 1fr); }
  .cm-side { position: static; }
}
@media (max-width: 760px) {
  .d-related { display: none; }       /* 手機：詳情頁下面有縮圖帶 */
  .nav-cats { padding-left: 12px; }
  .cr-head { flex-wrap: wrap; }
  .cr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
}

/* 按讚（likes.py；使用者 2026-10-13 msg 4030；app.js likeButton） */
.like-btn {
  flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; height: 24px; border-radius: 999px;
  border: 1px solid var(--line-2); background: none; color: var(--muted); font-size: 12px; cursor: pointer; white-space: nowrap;
}
.like-btn:hover { color: var(--k-eeebf8); border-color: var(--brand); }
.like-btn.on { color: #ff5c8a; border-color: #ff5c8a; }
.like-btn:disabled { opacity: .6; cursor: default; }
.like-btn:focus-visible { outline: 2px solid var(--k-9b75ff); outline-offset: 1px; }
/* 爆款庫復刻（viral.js libraryPane）：搜尋結果一列一部 */
.vr-lib { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; margin: 8px 0; }
.vr-lib-item { text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: inherit; cursor: pointer; }
.vr-lib-item.on { border-color: var(--brand-hi); box-shadow: 0 0 0 2px var(--brand-soft); }
.vr-lib-jobs { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }

/* 逐幀精修（studio.js frameEditor） */
.s-fe { width: min(980px, 100%); overflow-y: auto; }
.s-fe-video { width: 100%; max-height: 52dvh; background: #000; border-radius: 8px; object-fit: contain; }
.s-fe-tc { font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: var(--muted); }
.s-fe-range { position: relative; height: 22px; border-radius: 6px; background: var(--line-soft); cursor: pointer; }
.s-fe-sel { position: absolute; top: 0; bottom: 0; background: rgba(139, 92, 246, .45); border-radius: 6px; }
.s-fe-head { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: #fff; }
.s-fe-strip { display: flex; gap: 4px; overflow-x: auto; min-height: 40px; }
.s-fe-thumb { flex: none; height: 54px; width: auto; border-radius: 4px; cursor: pointer; background: #000; }
.s-fe-keys .s-btn { padding: 6px 10px; }
.s-asset-tag { width: 240px; max-width: 100%; }   /* 標籤搜尋框：寬到放得下提示字（PM-08） */

/* 上傳素材視窗（studio.js uploadDialog；使用者 2026-10-14 msg 4421） */
.s-upload-row { margin: 4px 0 12px; }
.s-upload { width: min(560px, 100%); overflow-y: auto; }   /* 手機橫放、鍵盤跳出來時按鈕還捲得到 */
.s-upload-chips { gap: 8px; }
.s-upload-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.s-upload-field input { width: 100%; }
.s-upload-detail { display: flex; flex-direction: column; gap: 10px; }
.s-upload-adv summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.s-upload input, .s-upload select {   /* 視窗放在 body（不在 #studio 裡）：輸入框外觀照 #studio 的 */
  background: var(--k-101015); border: 1px solid var(--line); color: var(--text);
  border-radius: var(--radius); padding: 0 14px; height: 36px; font: inherit; font-size: 14px; outline: none;
}
.s-upload select { padding-right: 8px; }
.s-upload input:focus, .s-upload select:focus { border-color: var(--line-2); }
.s-upload input::placeholder { color: var(--k-ffffff-5); }
.s-upload input[type=file] { height: auto; padding: 6px 10px; max-width: 100%; min-width: 0; }
.s-upload .s-row label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.s-upload-file { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px dashed var(--line-2, var(--line)); border-radius: var(--radius); }
.s-upload-picked { flex: 1; min-width: 0; color: var(--k-ffffff-5); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-upload-picked.on { color: var(--text); }
.s-upload .s-upload-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }   /* 原生按鈕藏起來（還在 DOM：file.click() 要用） */
.s-upload textarea.s-upload-paste { width: 100%; min-height: 120px; resize: vertical; padding: 10px 14px; line-height: 1.6;
  background: var(--k-101015); border: 1px solid var(--line); color: var(--text); border-radius: var(--radius); font: inherit; font-size: 14px; outline: none; }

/* 我的素材：卡片只放縮圖、名稱、一行主題；點進去看詳細（studio.js assetDetail；使用者 2026-10-14 msg 4447） */
.s-card-click { cursor: pointer; }
.s-card-click:hover, .s-card-click:focus-visible { border-color: var(--line-2, var(--brand)); }
.s-card-brief { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-asset-detail { width: min(720px, 100%); overflow-y: auto; }
.s-asset-detail .s-card-img, .s-asset-detail img, .s-asset-detail video { width: 100%; max-height: 50dvh; object-fit: contain; background: #000; border-radius: 8px; margin: 0; }   /* 卡片的圖有負邊距（貼齊卡片邊）：視窗裡不要 */
.s-asset-desc { white-space: pre-wrap; line-height: 1.6; }
.s-asset-acts { flex-wrap: wrap; gap: 8px; }
.s-asset-detail input { background: var(--k-101015); border: 1px solid var(--line); color: var(--text);
  border-radius: var(--radius); padding: 0 14px; height: 36px; font: inherit; font-size: 14px; outline: none; }   /* 編輯框在視窗裡（不在 #studio）：外觀照 #studio 的 */
.s-asset-detail > * { flex-shrink: 0; }   /* tg-box 是直排 flex、有高度上限：不設的話標題會被圖片擠扁 */
.s-upload > * { flex-shrink: 0; }

.ag-page .ag-compact-composer { border-radius: 22px; }
.ag-page .ag-model-pill { display: inline-flex; align-items: center; gap: 7px; max-width: min(230px, 44vw); min-height: 34px; padding: 6px 12px; border: 0; border-radius: 18px; background: var(--panel-sel); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.ag-page .ag-model-pill:hover, .ag-page .ag-model-pill[aria-expanded="true"] { background: var(--panel-2); }
.ag-page .ag-model-caption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-page .ag-model-chevron { display: grid; place-items: center; flex: 0 0 16px; width: 16px; height: 16px; font-size: 0; color: var(--muted); }
.ag-page .ag-model-chevron::before { content: ""; width: 16px; height: 16px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.ag-page .ag-planning-popup { position: fixed; inset: auto; margin: 0; width: min(352px, calc(100vw - 24px)); max-height: min(480px, calc(100dvh - 24px)); overflow-y: auto; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--text); box-shadow: 0 14px 44px #0005; }
.ag-page .ag-planning-popup::backdrop { background: transparent; }
.ag-page .ag-composer .ag-planning-popup .ag-planning { border: 0; padding: 0; border-radius: 0; background: none; gap: 12px; }
.ag-page .ag-main .ag-planning-popup .ag-planning-title { display: block; font-size: 15px; }
.ag-page .ag-composer .ag-planning-popup .ag-planning-footer { background: none; border-radius: 0; margin-top: 14px; padding: 14px 0 0; }
.ag-page .ag-planning-popup .ag-planning-footer > .s-row { justify-content: flex-start; }
.ag-page .ag-compact-fee { padding: 0 16px 10px; }
.ag-page .ag-compact-fee .ag-planning-fee { font-size: 12px; color: var(--muted); }
.ag-page .ag-compact-priced > .ag-cost { display: none; }
.ag-page .ag-model-pill:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 3px; }
@media (max-width: 760px) {
  .ag-page .ag-model-pill { min-height: 36px; padding: 6px 10px; font-size: 13px; max-width: 48vw; }
  .ag-page .ag-compact-fee { padding: 0 12px 10px; }
}

#studio .ag-page .ag-fresh .ag-log > .ag-compact-composer .ag-box textarea { min-height: 66px; }
.ag-page .ag-compact-composer > .ag-chips { padding: 8px 15px; }
.ag-page .ag-compact-composer .ag-send { width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0; gap: 0; border-radius: 50%; font-size: 0; line-height: 1; }
.ag-page .ag-compact-composer .ag-send::before { content: ""; width: 24px; height: 24px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5m-6 6 6-6 6 6'/%3E%3C/svg%3E") center / contain no-repeat; }

.ag-page .ag-compact-composer { border: 0; border-radius: 0; background: none; }
.ag-page .ag-compact-composer > .ag-chips { border: 0; padding: 0 2px 8px; }
.ag-page .ag-compact-composer .ag-box { border: 1px solid var(--line); border-radius: 22px; background: var(--panel); }
.ag-page .ag-compact-composer .ag-box:focus-within { border-color: var(--line-2); }
.ag-page .ag-compact-composer .ag-compact-fee { padding: 8px 4px 0; }
.ag-page .ag-compact-materials { border-top: 1px solid var(--line-soft); margin-top: 14px; padding-top: 14px; }
.ag-page .ag-compact-material-title { margin-bottom: 9px; font-size: 13px; color: var(--muted); }
.ag-page .ag-planning-popup .ag-provider-controls { display: grid; grid-template-columns: auto minmax(0, 1fr); }
#studio .ag-page .ag-planning-popup .ag-provider-controls select.ag-model { max-width: 100%; width: 100%; }
.ag-page .ag-planning-popup .ag-material-note { grid-column: 1 / -1; }

@media (max-width: 760px) {
  .ag-page .ag-fresh .ag-compact-composer .ag-bar { flex-wrap: nowrap; gap: 4px; }
  .ag-page .ag-fresh .ag-compact-composer .ag-bar > .grow { display: none; }
  .ag-page .ag-fresh .ag-compact-composer .ag-library { padding-left: 0; padding-right: 0; flex: 0 0 auto; }
  .ag-page .ag-fresh .ag-compact-composer .ag-model-pill { min-width: 0; gap: 4px; padding: 6px 8px; }
  .ag-page .ag-compact-composer .ag-send { flex: 0 0 40px; }
}

.pc-script-start { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; max-width: none; }
.pc-script-start .pc-script-choice { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 5px; min-width: 0; min-height: 116px; margin: 0; padding: 12px 9px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--panel-2); text-align: left; }
.pc-script-start .pc-script-choice:hover { border-color: var(--line-2); background: var(--panel-sel); }
.pc-script-start .pc-script-choice:focus-visible { outline: 2px solid var(--line-2); outline-offset: 2px; }
.pc-script-choice strong { font-size: 12px; font-weight: 600; line-height: 1.5; }
.pc-script-choice small { color: var(--muted); font-size: 10px; line-height: 1.65; overflow-wrap: anywhere; }
.pc-script-choice .pc-script-choice-icon { display: grid; place-items: center; width: 27px; height: 27px; margin-bottom: 3px; border-radius: 7px; background: var(--brand-soft); color: var(--brand-text); font-size: 20px; }
.pc-script-choice .pc-script-choice-icon.assistant { background: var(--panel-sel); color: var(--text); }
.pc-script-start .pc-script-choice.guided { border-color: var(--brand-text); }
.pc-script-start.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pc-script-start.compact .pc-script-choice { align-items: center; justify-content: center; min-height: 32px; padding: 5px 4px; }
.pc-script-start.compact .pc-script-choice-icon { display: none; }
.pc-script-start.compact strong { font-size: 10px; white-space: nowrap; }