/* Ripple 講者後台與一般頁面的品牌樣式（手繪風，跟首頁一致）
 * 套用方式：<html class="bx"> + 在 app.css（與 themes.css）之後載入本檔
 * 用於：登入、我的場次、建立場次、手機控制台、輸入代碼、配對、管理後台、隱私／條款
 * 不用於：舞台、聽眾手機、增益集（那些跟著場次版型） */
@font-face { font-family: "Comfortaa"; src: url("/assets/fonts/comfortaa.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("/assets/fonts/caveat.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

html.bx {
  --paper: #fdf9f1; --pen: #3d2c1e;
  --p-mint: #bce8d0; --p-lemon: #fee599; --p-coral: #ffaaa6; --p-sky: #bae3f8; --p-clay: #c2593f;
  --bg-0: #fdf9f1; --bg-1: #fdf9f1; --bg-2: #f6efe2;
  --ink: #3d2c1e; --ink-2: #5b4636; --ink-3: #6f5a47; --ink-4: #7d6855;
  --cyan: #3d2c1e; --cyan-soft: rgba(61, 44, 30, .1);
  --amber: #9a5b00; --amber-2: #fee599; --amber-ink: #3d2c1e; --amber-soft: rgba(254, 229, 153, .55);
  --green: #2f8f5b; --danger: #c2593f;
  --glass: #ffffff; --glass-2: rgba(61, 44, 30, .05);
  --line: rgba(61, 44, 30, .22); --line-2: rgba(61, 44, 30, .5);
  --well: 246 238 224; --on-accent: #fdf9f1;
  --sans: "Comfortaa", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --head: "Comfortaa", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --wob: 14px 10px 16px 12px / 12px 16px 10px 14px;
  --wob-card: 20px 14px 22px 16px / 16px 22px 14px 20px;
  color-scheme: light;
  background: var(--paper);
}
html.bx body { background: var(--paper); color: var(--ink); font-family: var(--sans); }
html.bx .ocean-bg { display: none; }
html.bx ::selection { background: var(--p-lemon); }

/* 卡片 */
html.bx .glass { background: #fff; border: 2px solid var(--pen); border-radius: var(--wob-card); box-shadow: 5px 5px 0 var(--pen); backdrop-filter: none; -webkit-backdrop-filter: none; }

/* 按鈕 */
html.bx .btn { background: #fff; color: var(--pen); border: 2px solid var(--pen); border-radius: var(--wob); box-shadow: none; font-family: var(--sans); }
html.bx .btn:hover { background: #fffaf0; border-color: var(--pen); }
html.bx .btn.primary { background: var(--p-lemon); color: var(--pen); border-color: var(--pen); box-shadow: 3px 3px 0 var(--pen); filter: none; }
html.bx .btn.primary:hover { box-shadow: 4px 4px 0 var(--pen); transform: translate(-1px, -1px); }
html.bx .btn.primary:active { box-shadow: 1px 1px 0 var(--pen); transform: translate(2px, 2px); }
html.bx .btn.cyan { background: var(--p-mint); color: var(--pen); border-color: var(--pen); box-shadow: 3px 3px 0 var(--pen); }
html.bx .btn.ghost { background: transparent; border-color: transparent; }
html.bx .btn.ghost:hover { background: var(--glass-2); }
html.bx .btn.danger:hover, html.bx .btn.danger { color: #a3432b; }
html.bx .btn.danger:hover { background: #fff1ec; border-color: #a3432b; }
html.bx .btn.ok:hover { color: var(--green); background: #effaf3; }
html.bx .btn.on { background: var(--p-lemon); color: var(--pen); border-color: var(--pen); }
html.bx .btn.google { background: #fff; color: #1f1f1f; border-color: var(--pen); box-shadow: 3px 3px 0 var(--pen); }
html.bx .btn.google:hover { background: #fffaf0; }

/* 輸入 */
html.bx .input { background: #fff; color: var(--pen); border: 2px solid rgba(61, 44, 30, .35); border-radius: 12px 9px 13px 10px; }
html.bx .input:focus { border-color: var(--pen); box-shadow: 0 0 0 3px rgba(254, 229, 153, .9); }
html.bx .input::placeholder { color: var(--ink-4); }
html.bx select.input { background-color: #fff; }
html.bx .input-wrap .peek:hover { background: var(--glass-2); }

/* 分段按鈕、分頁、開關 */
html.bx .seg, html.bx .tabs { background: rgb(var(--well)); border: 2px solid var(--line); }
html.bx .seg label, html.bx .tab { color: var(--ink-2); }
html.bx .seg input:checked + label, html.bx .tab.on { background: var(--pen); color: var(--paper); box-shadow: none; }
html.bx input.sw { border: 2px solid var(--pen); background: var(--paper); }
html.bx input.sw::after { background: var(--pen); top: 1px; left: 1px; }
html.bx input.sw:checked { background: var(--p-mint); }

/* 導覽列 */
html.bx .topnav { background: rgba(253, 249, 241, .94); border-bottom: 2px dashed var(--line); backdrop-filter: blur(6px); }
html.bx .topnav .brand { color: var(--pen); }

/* 標籤、小膠囊、說明 */
html.bx .pill { background: #fff; border: 2px solid var(--pen); color: var(--pen); }
html.bx .pill.cyan { background: var(--p-mint); }
html.bx .pill .dot.live, html.bx .dot.live { background: var(--green); box-shadow: none; }
html.bx .kbd { background: #fff; color: var(--pen); border: 1.5px solid var(--line-2); }
html.bx .set-details { background: rgb(var(--well) / .5); border: 2px dashed var(--line); }
html.bx .tip { background: rgba(254, 229, 153, .35); border: 2px dashed var(--line-2); color: var(--ink-2); }
html.bx a { color: inherit; }
html.bx .doc a, html.bx .auth-legal a, html.bx .hint a { color: #a3432b; text-decoration: underline; text-underline-offset: 2px; }
html.bx .err { color: #a3432b; }

/* 登入頁 */
html.bx .auth-card { box-shadow: 8px 8px 0 var(--pen); }
html.bx .auth-card h1 { font-family: var(--head); color: var(--pen); }
html.bx .auth-card .sub, html.bx .auth-card .hint { color: var(--ink-2); }
html.bx .admin-pw summary { color: var(--ink-2); }

/* 我的場次 */
html.bx .room { background: #fff; border: 2px solid var(--pen); border-radius: var(--wob-card); box-shadow: 4px 4px 0 var(--pen); }
html.bx .room:hover { background: #fffaf0; }
html.bx .room .sub { color: var(--ink-3); }

/* 活動列、清單（控制台、建立頁） */
html.bx .act-row, html.bx .pend-row, html.bx .dm-item, html.bx .ad-room { background: #fff; border: 2px solid var(--line); }
html.bx .act-row.on, html.bx .act-row[aria-current="true"] { border-color: var(--pen); background: rgba(254, 229, 153, .35); }
html.bx .tpl span, html.bx .pk-type, html.bx .ae-type { background: #fff; border: 2px solid var(--line); }
html.bx .tpl input:checked + span, html.bx .pk-type[aria-pressed="true"], html.bx .ae-type[aria-pressed="true"], html.bx .ae-type.on { border-color: var(--pen); background: rgba(254, 229, 153, .45); box-shadow: 3px 3px 0 var(--pen); }
html.bx .fx-chip { background: #fff; border: 2px solid var(--line); color: var(--ink-2); }
html.bx .fx-chip[aria-pressed="true"] { border-color: var(--pen); background: var(--p-mint); color: var(--pen); }
html.bx .th-opt { background: #fff; border: 2px solid var(--line); color: var(--ink-2); }
html.bx .th-opt[aria-checked="true"] { border-color: var(--pen); background: rgba(254, 229, 153, .45); box-shadow: inset 0 0 0 1px var(--pen); }
html.bx .ov-emo { background: #fff; border: 2px solid var(--line); }
html.bx .ov-emo[aria-pressed="true"] { border-color: var(--pen); background: rgba(254, 229, 153, .5); }
html.bx .meter-bar { background: #fff; border: 2px solid var(--line); color: var(--ink-2); }
html.bx .snack, html.bx .toast { background: var(--pen); color: var(--paper); border-color: var(--pen); }

/* 建立頁的手機預覽：不能繼承後台的淺色變數，預設回到深海（其他版型由 themes.css 覆蓋） */
:where(html.bx .pv-phone) {
  --bg-0: #000b1a; --bg-1: #00132c; --bg-2: #0a2e55;
  --ink: #e8f4ff; --ink-2: #bcc8cf; --ink-3: #8fa9c7; --ink-4: #5d7594;
  --cyan: #4fd1ff; --cyan-soft: rgba(79, 209, 255, .14);
  --amber: #ffb547; --amber-2: #f59e0b; --amber-ink: #2a1a00; --amber-soft: rgba(255, 181, 71, .14);
  --green: #4ade80; --danger: #ff8a80;
  --glass: rgba(13, 32, 57, .62); --glass-2: rgba(255, 255, 255, .06);
  --line: rgba(255, 255, 255, .12); --line-2: rgba(79, 209, 255, .28);
  --well: 0 10 26; --on-accent: #00222e;
  --sans: "Inter", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --head: "Jakarta", "Inter", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  color-scheme: dark;
}