/* 常用工具 */
.tl { --tc: #364fc7; padding-bottom: 40px; }
.tl h1 { margin: 6px 0 4px; }
.tl-sub { color: var(--sub, #666); margin: 0 0 14px; font-size: 14px; }
.tl-grp { margin: 18px 0 8px; font-size: 16px; display: flex; align-items: center; gap: 6px; }
.tl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.tl-card { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 12px; border: 1px solid var(--line, #ddd); background: color-mix(in srgb, var(--tc) 7%, var(--card, #fff)); text-decoration: none; color: inherit; border-top: 4px solid var(--tc); transition: transform .12s, box-shadow .12s; }
.tl-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.1); }
.tl-card .ic { font-size: 30px; line-height: 1; }
.tl-card b { font-size: 16px; color: var(--tc); }
.tl-card span.d { font-size: 12.5px; color: var(--sub, #666); line-height: 1.5; }
.tl-card.soon { opacity: .75; border-top-color: var(--line, #ccc); }
.tl-card .soon-tag { align-self: flex-start; font-size: 11px; padding: 1px 8px; border-radius: 99px; background: var(--line, #eee); color: var(--sub, #666); }

.tl-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.tl-head .ic { width: 52px; height: 52px; border-radius: 14px; background: var(--tc); display: flex; align-items: center; justify-content: center; font-size: 30px; }
.tl-head h1 { margin: 0; color: var(--tc); }
.tl-head p { margin: 2px 0 0; color: var(--sub, #666); font-size: 13.5px; }
.tl-inst { margin-left: auto; }

.tl-box { background: var(--card, #fff); border: 1px solid var(--line, #ddd); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.tl-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.tl-row label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--sub, #666); }
.tl input[type=text], .tl input[type=number], .tl input[type=date], .tl input[type=time], .tl select, .tl textarea { padding: 8px 10px; border: 1px solid var(--line, #ccc); border-radius: 8px; font-size: 15px; background: var(--card, #fff); color: inherit; font-family: inherit; max-width: 100%; box-sizing: border-box; }
.tl textarea { width: 100%; min-height: 120px; resize: vertical; line-height: 1.5; }
.tl-btn { padding: 9px 18px; border-radius: 8px; border: 1px solid var(--tc); background: var(--tc); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; }
.tl-btn:hover { filter: brightness(1.08); }
.tl-btn:disabled { opacity: .5; cursor: default; }
.tl-btn.ghost { background: transparent; color: var(--tc); }
.tl-btn.big { padding: 12px 28px; font-size: 18px; }
.tl-btn.sm { padding: 5px 12px; font-size: 13px; }
.tl-center { text-align: center; }
.tl-res { font-size: 20px; font-weight: 700; text-align: center; padding: 14px; min-height: 28px; }
.tl-note { font-size: 12.5px; color: var(--sub, #666); }
.tl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tl-chip { background: color-mix(in srgb, var(--tc) 12%, var(--card, #fff)); border: 1px solid color-mix(in srgb, var(--tc) 35%, transparent); border-radius: 99px; padding: 3px 12px; font-size: 14px; }
.tl-list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.tl-list li { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border: 1px solid var(--line, #ddd); border-radius: 8px; background: var(--card, #fff); }
.tl-list li .sp { flex: 1; }
.tl-big { font-size: clamp(44px, 12vw, 72px); font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: 1px; color: var(--tc); line-height: 1.1; margin: 8px 0; }
.tl-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; align-items: start; }
@media (max-width: 640px) { .tl-2 { grid-template-columns: minmax(0, 1fr); } }
.tl-ring { width: min(240px, 70vw); aspect-ratio: 1; margin: 6px auto; position: relative; }
.tl-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tl-ring .t { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(36px, 12vw, 56px); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--tc); }
.tl-seg { display: inline-flex; border: 1px solid var(--tc); border-radius: 8px; overflow: hidden; }
.tl-seg button { padding: 6px 14px; border: 0; background: transparent; color: var(--tc); cursor: pointer; font-size: 14px; font-family: inherit; }
.tl-seg button.on { background: var(--tc); color: #fff; }

/* 輪盤 */
.wh-wrap { position: relative; width: min(360px, 88vw); aspect-ratio: 1; margin: 0 auto; }
.wh-wrap canvas { width: 100%; height: 100%; display: block; }
.wh-ptr { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 28px solid #222; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); z-index: 2; }
@media (prefers-color-scheme: dark) { .wh-ptr { border-top-color: #eee; } }
/* 骰子 */
.dc-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; min-height: 90px; padding: 10px 0; }
.dc { width: 78px; height: 78px; border-radius: 14px; background: #fff; border: 2px solid #333; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 8px; box-shadow: 0 3px 8px rgba(0,0,0,.2); }
.dc i { width: 13px; height: 13px; border-radius: 50%; background: #222; align-self: center; justify-self: center; }
.dc.n { display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; color: #222; }
.dc.roll { animation: dcr .5s; }
@keyframes dcr { 0% { transform: rotate(0) scale(.6); } 60% { transform: rotate(300deg) scale(1.1); } 100% { transform: rotate(360deg) scale(1); } }
/* 硬幣、筊 */
.cn { width: 150px; height: 150px; border-radius: 50%; margin: 10px auto; display: flex; align-items: center; justify-content: center; font-size: 64px; font-weight: 800; color: #6b4e00; background: radial-gradient(circle at 35% 30%, #ffe27a, #e6a700); border: 6px solid #c98f00; box-shadow: inset 0 0 0 4px #ffd34d, 0 6px 14px rgba(0,0,0,.25); }
.cn.flip { animation: cnf .8s; }
@keyframes cnf { 0% { transform: rotateY(0); } 100% { transform: rotateY(1440deg); } }
.jb-row { display: flex; gap: 30px; justify-content: center; padding: 14px 0; }
.jb { width: 84px; height: 130px; position: relative; }
.jb svg { width: 100%; height: 100%; }
.jb.roll { animation: jbr .9s; }
@keyframes jbr { 0% { transform: translateY(-80px) rotate(0); opacity: .2; } 70% { transform: translateY(8px) rotate(540deg); opacity: 1; } 100% { transform: translateY(0) rotate(720deg); } }
.tl-flip { display: block; width: 100%; }
@media (max-width: 520px) { .tl-head .tl-inst { margin-left: 0; } }

/* 行事曆 */
.cal-bar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; }
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-title { font-size: 20px; min-width: 130px; text-align: center; }
.cal-opts { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 14px; }
.cal-opts label { display: flex; align-items: center; gap: 4px; flex-direction: row; font-size: 14px; color: inherit; }
.cal-ccs { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.cal-cc { padding: 3px 11px; border-radius: 99px; border: 1px solid var(--hc); background: transparent; color: var(--hc); cursor: pointer; font-size: 13px; font-family: inherit; }
.cal-cc.on { background: var(--hc); color: #fff; }
.cal-2 { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 0 14px; align-items: start; }
@media (max-width: 900px) { .cal-2 { grid-template-columns: minmax(0, 1fr); } }
.cal-main { padding: 8px; }
.cal-wk, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-wk div { text-align: center; padding: 6px 0; font-size: 13px; color: var(--sub, #666); font-weight: 600; }
.cal-wk .we { color: #d4534f; }
.cal-grid { gap: 1px; background: var(--line, #ddd); border: 1px solid var(--line, #ddd); border-radius: 8px; overflow: hidden; }
.cal-c { background: var(--card, #fff); min-height: 92px; padding: 3px 4px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; overflow: hidden; outline-offset: -2px; }
.cal-c:hover { background: color-mix(in srgb, var(--tc) 7%, var(--card, #fff)); }
.cal-c.out { opacity: .45; }
.cal-c.sel { box-shadow: inset 0 0 0 2px var(--tc); }
.cal-c.today .cal-n b { background: var(--tc); color: #fff; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.cal-c.we .cal-n b, .cal-c.off .cal-n b { color: #d4534f; }
.cal-c.today .cal-n b { color: #fff; }
.cal-n { display: flex; align-items: center; gap: 4px; font-size: 14px; }
.cal-n b { font-weight: 600; min-width: 24px; text-align: center; }
.cal-lu { margin-left: auto; font-size: 11px; color: var(--sub, #777); white-space: nowrap; }
.cal-lu em { font-style: normal; color: #2f9e44; font-weight: 600; }
.cal-h { font-size: 11px; line-height: 1.3; padding: 0 4px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--hc); background: color-mix(in srgb, var(--hc) 8%, transparent); }
.cal-h.h { background: var(--hc); color: #fff; }
.cal-e { font-size: 11px; line-height: 1.3; padding: 0 4px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, var(--ec) 20%, var(--card, #fff)); border-left: 3px solid var(--ec); }
.cal-more { font-size: 11px; color: var(--sub, #777); }
.cal-bd { display: inline-block; font-size: 10px; line-height: 1; padding: 2px 3px; border-radius: 3px; background: #495057; color: #fff; }
.cal-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; flex: none; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; align-items: center; }
.cal-dh { font-size: 16px; margin-bottom: 2px; }
.cal-sh { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.cal-ev { align-items: flex-start !important; }
.cal-note { font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
.cal-form { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line, #ccc); display: grid; gap: 8px; }
.cal-form label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--sub, #666); }
.cal-form .ef-chk { flex-direction: row; align-items: center; gap: 6px; }
.cal-form [hidden] { display: none !important; }
.cal-form input[type=text] { width: 100%; }
.cal-cols { display: flex; gap: 8px; flex-wrap: wrap; }
.cal-col { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.cal-col.on { border-color: var(--ink, #222); box-shadow: 0 0 0 2px var(--card, #fff) inset; }
.cal-go { cursor: pointer; }
.cal-go:hover { background: color-mix(in srgb, var(--tc) 8%, var(--card, #fff)); }
@media (max-width: 640px) {
  .cal-c { min-height: 64px; padding: 2px; }
  .cal-lu { display: none; }
  .cal-h, .cal-e { font-size: 10px; padding: 0 2px; }
  .cal-title { min-width: 0; font-size: 17px; }
}

/* ---- 行事曆 第2批 ---- */
.cal-nav select { padding: 4px 6px; font-size: 14px; }
.cal .cal-c.drag { background: color-mix(in srgb, var(--tc) 38%, var(--card, #fff)) !important; box-shadow: inset 0 0 0 2px var(--tc); }
.cal.dragging, .cal.dragging * { user-select: none !important; -webkit-user-select: none !important; cursor: crosshair; }
.cal-c { user-select: none; }
.cal-cd { font-size: 11px; line-height: 1.3; padding: 0 4px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; background: var(--ec); }
.tg { border: 1px solid var(--line, #ddd); border-radius: 8px; overflow: hidden; --gw: 48px; }
.tg-top { display: grid; grid-template-columns: var(--gw) repeat(var(--n), minmax(0, 1fr)); background: var(--card, #fff); border-bottom: 1px solid var(--line, #ddd); }
.tg-gut { width: var(--gw); flex: none; font-size: 11px; color: var(--sub, #777); text-align: right; }
.tg-top .tg-gut { padding: 6px 4px; }
.tg-dh { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 2px; border-left: 1px solid var(--line, #ddd); cursor: pointer; min-width: 0; overflow: hidden; }
.tg-dh small { font-size: 11px; color: var(--sub, #777); }
.tg-dh.off b { color: #d4534f; }
.tg-dh.today b { background: var(--tc); color: #fff; border-radius: 99px; padding: 0 8px; }
.tg-ad { border-left: 1px solid var(--line, #ddd); padding: 2px; display: flex; flex-direction: column; gap: 2px; min-height: 24px; min-width: 0; }
.tg-scroll { max-height: 520px; overflow-y: auto; }
.tg-in { display: grid; grid-template-columns: var(--gw) repeat(var(--n), minmax(0, 1fr)); }
.tg-h { position: relative; border-top: 1px solid var(--line, #eee); box-sizing: border-box; }
.tg-h span { position: absolute; top: -8px; right: 4px; background: var(--card, #fff); padding: 0 2px; }
.tg-h:first-child { border-top: 0; }
.tg-col { position: relative; border-left: 1px solid var(--line, #ddd); cursor: crosshair; user-select: none;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--hh, 44px) - 1px), var(--line, #eee) calc(var(--hh, 44px) - 1px), var(--line, #eee) var(--hh, 44px)); }
.tg-e { position: absolute; box-sizing: border-box; overflow: hidden; padding: 1px 4px; font-size: 12px; line-height: 1.25; border-radius: 4px; border-left: 3px solid var(--ec); background: color-mix(in srgb, var(--ec) 22%, var(--card, #fff)); cursor: pointer; }
.tg-e b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-e small { font-size: 10.5px; color: var(--sub, #666); }
.tg-now { position: absolute; left: 0; right: 0; height: 2px; background: #e03131; pointer-events: none; z-index: 2; }
.tg-ghost { position: absolute; left: 2px; right: 2px; background: color-mix(in srgb, var(--tc) 30%, transparent); border: 1px dashed var(--tc); border-radius: 4px; pointer-events: none; }
.tg-ghost[hidden] { display: none; }
.ag-d { padding: 8px 4px; border-bottom: 1px solid var(--line, #eee); }
.ag-d.today > b { color: var(--tc); }
.ag-r { display: flex; align-items: center; padding: 4px 0 4px 8px; font-size: 14px; }
.ag-e { cursor: pointer; }
.ag-e:hover { background: color-mix(in srgb, var(--tc) 8%, transparent); }
.pl-g { padding: 8px 0; border-bottom: 1px dashed var(--line, #ddd); }
.pl-o { display: flex; gap: 8px; padding: 4px 6px; font-size: 13.5px; border-radius: 6px; }
@media (max-width: 640px) { .tg { --gw: 38px; } .tg-e { font-size: 11px; } .tg-dh small { display: none; } }
@media print {
  header, nav, footer, .tl-head .tl-inst, .cal-bar, #cal-side, .cal-2 > :not(.cal-main), .cal-legend, .tl-foot, [id^="tl-install"] { display: none !important; }
  .cal-2 { display: block; }
  .tl-box { border: 0; box-shadow: none; }
  .tg-scroll { max-height: none; overflow: visible; }
  .cal-c { min-height: 90px; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.cal-nav { flex-wrap: wrap; }
.cal-nav .tl-btn, .tl-seg button { white-space: nowrap; }
@media (max-width: 640px) { .tg-dh b { font-size: 12px; } .tg-dh .cal-h { font-size: 9.5px; } .cal-nav input[type=search] { width: 100px !important; } }

/* ---- 行事曆 第3批：背景、設定、經期 ---- */
.cal.has-bg .cal-main { background-image: linear-gradient(color-mix(in srgb, var(--card, #fff) var(--dim, 80%), transparent), color-mix(in srgb, var(--card, #fff) var(--dim, 80%), transparent)), var(--bgimg); background-size: cover; background-position: center; }
.cal.has-bg .cal-c { background: color-mix(in srgb, var(--card, #fff) 55%, transparent); }
.cal.has-bg .cal-grid { background: color-mix(in srgb, var(--line, #ddd) 60%, transparent); }
.cal.has-bg .tg-top, .cal.has-bg .tg-h span { background: color-mix(in srgb, var(--card, #fff) 60%, transparent); }
.st-ph { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; max-height: 220px; overflow-y: auto; }
.st-p { padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; background: none; aspect-ratio: 1; }
.st-p img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-p.on { border-color: var(--tc); }
.cal-pd { font-size: 11px; line-height: 1; color: #e64980; }
.cal-pd.p { opacity: .75; }
.cal-n input[type=range], #st-dim { width: 140px; }
@media print { .cal.has-bg .cal-main { background-image: none !important; } #cal-period, #cal-set { display: none !important; } }
.df { display: inline-flex; gap: 4px; align-items: center; flex-wrap: nowrap; }
.df .df-y { width: 76px; }
.df select { padding: 4px 2px; }
.cal-form .tl-row { align-items: flex-end; }
/* 工具列：下拉選單不要被全站的「選單撐滿整行」樣式拉長；左右箭頭不要掉到別行 */
.cal .cal-nav select, .cal .cal-opts select { width: auto; min-width: 0; max-width: none; flex: none; }
.cal .cal-nav input[type=search] { width: 130px; flex: none; }
.cal .cal-opts label { white-space: nowrap; }
.cal .cal-nav .tl-btn { flex: none; }
@media (min-width: 700px) { .cal .cal-nav { flex-wrap: nowrap; } }
.st-ab { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.st-ab .tl-chip { cursor: pointer; font-family: inherit; color: inherit; }
.st-ab .tl-chip.on { background: var(--tc); color: #fff; border-color: var(--tc); }

.cal-flash{outline:3px solid #f59e0b;outline-offset:2px;transition:outline .3s}

/* ---------- 記帳 ---------- */
.led .led-nav { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.led-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; }
.led-card { background: var(--card, #fff); border: 1px solid var(--line, #e5e5e5); border-radius: 12px; padding: 8px 10px; text-align: center; }
.led-card small { display: block; color: var(--sub, #666); font-size: 12.5px; }
.led-card b { font-size: 18px; word-break: break-all; }
.led-tabs { display: flex; width: 100%; margin-bottom: 8px; overflow-x: auto; }
.led-tabs button { flex: 1 0 auto; white-space: nowrap; }
.led-fh { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.led-amt input { font-size: 24px; font-weight: 700; width: 170px; max-width: 100%; }
.led-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.led-cat { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line, #d0d0d0); background: var(--card, #fff); color: inherit; cursor: pointer; font-size: 14px; font-family: inherit; }
.led-cat.on { background: var(--tc); border-color: var(--tc); color: #fff; }
.led-day { display: flex; justify-content: space-between; font-size: 13px; color: var(--sub, #666); padding: 8px 2px 3px; border-bottom: 1px solid var(--line, #eee); margin-top: 6px; }
.led-row { display: flex; align-items: center; gap: 8px; padding: 9px 4px; border-bottom: 1px dashed var(--line, #eee); cursor: pointer; }
.led-row:hover, .led-row:focus-visible { background: color-mix(in srgb, var(--tc) 6%, transparent); outline: none; }
.led-pill { flex: none; min-width: 52px; text-align: center; font-size: 12.5px; padding: 3px 8px; border-radius: 99px; background: color-mix(in srgb, var(--tc) 14%, var(--card, #fff)); }
.led-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.led-mid > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.led-mid small { color: var(--sub, #777); }
.led-bar { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 14px; }
.led-bar .n { flex: none; width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.led-bar .t { flex: 1; height: 12px; background: color-mix(in srgb, var(--tc) 10%, var(--card, #fff)); border-radius: 6px; overflow: hidden; }
.led-bar .t i { display: block; height: 100%; border-radius: 6px; }
.led-bar .v { flex: none; min-width: 120px; text-align: right; }
.led-bar .v small { color: var(--sub, #777); }
.led-yr { display: flex; gap: 4px; height: 130px; align-items: flex-end; margin: 10px 0 4px; }
.led-ym { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; cursor: pointer; border-radius: 6px; }
.led-ym.on { background: color-mix(in srgb, var(--tc) 12%, transparent); }
.led-ym .b { flex: 1; width: 100%; display: flex; gap: 2px; align-items: flex-end; justify-content: center; }
.led-ym .b i { display: block; width: 36%; min-height: 1px; border-radius: 3px 3px 0 0; }
.led-ym small { color: var(--sub, #777); }
@media (max-width: 520px) { .led-bar .n { width: 56px; } .led-bar .v { min-width: 96px; font-size: 13px; } .led-card b { font-size: 16px; } }
.led-bud { display: flex; align-items: center; gap: 8px; margin: 7px 0; font-size: 14px; flex-wrap: wrap; }
.led-bud .n { flex: none; width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.led-bud input { width: 96px; flex: none; }
.led-bud .t { flex: 1; min-width: 80px; height: 12px; background: color-mix(in srgb, var(--tc) 10%, var(--card, #fff)); border-radius: 6px; overflow: hidden; }
.led-bud .t i { display: block; height: 100%; border-radius: 6px; }
.led-bud .v { flex: none; text-align: right; }
.led-bud .v small { color: var(--sub, #777); }

.led-bk { display: flex; flex-direction: row; align-items: center; gap: 8px; font-weight: 600; }
.led-bk select { width: auto; min-width: 140px; font-size: 16px; }
.led-newbk { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--tc); border-radius: 10px; background: color-mix(in srgb, var(--tc) 5%, transparent); }
.led-newbk p { margin: 0 0 8px; font-size: 14px; line-height: 1.7; }
.led-chart { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.led-chart .dn { flex: none; width: 210px; max-width: 100%; margin: 0 auto; }
.led-donut { width: 100%; height: auto; display: block; }
.led-donut circle:hover { opacity: .85; }
.led-legend { flex: 1; min-width: 230px; }
.led-lg { display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.led-lg:hover, .led-lg.on, .led-lg:focus-visible { background: color-mix(in srgb, var(--tc) 10%, transparent); outline: none; }
.led-lg i { flex: none; width: 12px; height: 12px; border-radius: 3px; }
.led-lg .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.led-lg .v { font-weight: 600; }
.led-lg .p { width: 52px; text-align: right; color: var(--sub, #666); }
.led-lg small { width: 42px; text-align: right; color: var(--sub, #888); }
.led-sm { height: 100px; }
.led-days { height: 110px; gap: 1px; }
.led-days .led-ym small { font-size: 10px; height: 12px; }
@media (max-width: 520px) { .led-lg small { display: none; } .led-lg .p { width: 46px; } }
.led-cat { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; padding: 8px 10px; border-radius: 14px; }
.led-cat .ci { font-size: 24px; line-height: 1.1; }
.led-cat span:last-child { font-size: 13px; }
.ce-row { display: flex; align-items: center; gap: 6px; margin: 5px 0; }
.ce-ic { flex: none; width: 44px; height: 44px; font-size: 24px; border-radius: 12px; border: 1px solid var(--line, #d0d0d0); background: var(--card, #fff); cursor: pointer; }
.ce-name { flex: 1; min-width: 0; }
.ce-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 4px; padding: 8px; margin: 2px 0 6px; border: 1px dashed var(--tc); border-radius: 10px; background: color-mix(in srgb, var(--tc) 5%, transparent); }
.ce-icons button { font-size: 22px; padding: 6px 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.ce-icons button:hover { background: color-mix(in srgb, var(--tc) 18%, transparent); }
.led-edit { padding: 10px; margin: 6px 0; border: 1px dashed var(--tc); border-radius: 10px; background: color-mix(in srgb, var(--tc) 5%, transparent); }
.led-tabs button { padding-left: 10px; padding-right: 10px; }
.tl [hidden], .tl-row[hidden], .led [hidden] { display: none !important; }
.led-roletip { margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, #2f9e44 10%, transparent); font-size: 14px; }
.led-roletip.ro { background: color-mix(in srgb, #f08c00 14%, transparent); }

/* 記帳：算式鍵盤、常用項目、固定收支、借貸 */
.led-keys { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.led-keys button { min-width: 40px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line, #d0d0d0); background: var(--card, #fff); color: inherit; font-size: 15px; font-family: inherit; cursor: pointer; }
.led-keys button:active { background: color-mix(in srgb, var(--tc) 14%, var(--card, #fff)); }
.led-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; }
.led-quick small { color: var(--sub, #777); }
.led-chip { padding: 5px 12px; border-radius: 99px; border: 1px solid var(--tc); background: color-mix(in srgb, var(--tc) 8%, var(--card, #fff)); color: inherit; font-size: 13.5px; font-family: inherit; cursor: pointer; }
.led-recrow, .led-lnrow { display: flex; align-items: center; gap: 8px; padding: 9px 4px; border-bottom: 1px dashed var(--line, #eee); flex-wrap: wrap; }
.led-recrow.off, .led-lnrow.done { opacity: .55; }
.led-lnrow > span:first-child:not(.led-mid) { flex: 1; }
.led-rb { display: inline-flex; gap: 4px; flex: none; }
.led-sumrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }

.led-streak { margin: 0 0 8px; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, #f08c00 14%, var(--card, #fff)); border: 1px solid color-mix(in srgb, #f08c00 40%, transparent); font-size: 14px; }
.led-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 8px; }
.led-badge { text-align: center; padding: 10px 4px; border-radius: 12px; border: 1px dashed var(--line, #ccc); opacity: .45; filter: grayscale(1); }
.led-badge.on { opacity: 1; filter: none; border-style: solid; background: color-mix(in srgb, #f08c00 10%, var(--card, #fff)); }
.led-badge span { display: block; font-size: 30px; line-height: 1.2; }
.led-badge b { display: block; font-size: 13px; }
.led-badge small { color: var(--sub, #777); font-size: 11.5px; }
/* 年度報表 */
#led-report { display: none; position: fixed; inset: 0; z-index: 9999; background: #f1f3f5; overflow: auto; color: #212529; }
#led-report .rp-bar { position: sticky; top: 0; background: #fff; border-bottom: 1px solid #ddd; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; z-index: 1; }
#led-report .rp-page { max-width: 820px; margin: 14px auto; background: #fff; padding: 28px 30px; box-shadow: 0 1px 6px rgba(0,0,0,.12); }
#led-report h2 { margin: 0 0 4px; font-size: 22px; }
#led-report h3 { margin: 22px 0 8px; font-size: 16px; border-left: 4px solid #e8590c; padding-left: 8px; }
#led-report .rp-h p, #led-report .rp-n { color: #868e96; font-size: 13px; margin: 2px 0; }
#led-report .rp-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
#led-report .rp-sum div { border: 1px solid #dee2e6; border-radius: 10px; padding: 8px 10px; text-align: center; }
#led-report .rp-sum small { display: block; color: #868e96; font-size: 12px; }
#led-report .rp-sum b { font-size: 18px; }
#led-report .rp-t { width: 100%; border-collapse: collapse; font-size: 14px; }
#led-report .rp-t th, #led-report .rp-t td { padding: 5px 6px; border-bottom: 1px solid #e9ecef; text-align: left; }
#led-report .rp-t .r { text-align: right; white-space: nowrap; }
#led-report .rp-t td.bar { width: 34%; }
#led-report .rp-t td.bar i { display: block; height: 7px; border-radius: 4px; margin: 1px 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
@media print {
  body.led-printing > *:not(#led-report) { display: none !important; }
  #led-report { position: static; background: #fff; overflow: visible; }
  #led-report .rp-bar { display: none; }
  #led-report .rp-page { box-shadow: none; margin: 0; max-width: none; padding: 0; }
  #led-report .rp-t tr, #led-report .rp-sum div { break-inside: avoid; }
  #led-report h3 { break-after: avoid; }
}
#led-report .tl-btn { background: #e8590c; color: #fff; border: 1px solid #e8590c; border-radius: 8px; padding: 7px 14px; font-size: 14px; font-family: inherit; cursor: pointer; }
#led-report .tl-btn.ghost { background: #fff; color: #e8590c; }
#led-report select { padding: 4px 6px; font-size: 14px; }

.led-cardinfo { margin: -2px 4px 8px; padding: 6px 10px; border-radius: 8px; font-size: 13px; background: color-mix(in srgb, #1c7ed6 9%, var(--card, #fff)); border: 1px solid color-mix(in srgb, #1c7ed6 30%, transparent); }
.led-alerts { margin: 0 0 8px; display: grid; gap: 6px; }
.led-alerts > div { padding: 8px 12px; border-radius: 12px; font-size: 14px; background: color-mix(in srgb, #e03131 9%, var(--card, #fff)); border: 1px solid color-mix(in srgb, #e03131 35%, transparent); }
.led-split { margin: 4px 0 6px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--tc) 6%, transparent); }

.led-phrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.led-th { position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line, #d0d0d0); }
.led-th img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.led-th button { position: absolute; top: 0; right: 0; border: 0; background: rgba(0,0,0,.55); color: #fff; width: 22px; height: 22px; cursor: pointer; border-radius: 0 0 0 8px; font-size: 12px; }
.led-th.bad { background: #f1f3f5; } .led-th.bad img { opacity: .1; }
.led-phbox { margin: 4px 0 8px; padding: 8px; border: 1px dashed var(--line, #ccc); border-radius: 10px; }
.led-phab { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.led-phgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 6px; max-height: 260px; overflow: auto; }
.led-pp { padding: 0; border: 3px solid transparent; border-radius: 8px; background: none; cursor: pointer; aspect-ratio: 1; overflow: hidden; }
.led-pp.on { border-color: var(--tc); }
.led-pp img { width: 100%; height: 100%; object-fit: cover; display: block; }
.led-clip { cursor: zoom-in; margin-left: 4px; }
#led-lb { display: none; position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.88); flex-direction: column; align-items: center; justify-content: center; cursor: pointer; padding: 12px; }
#led-lb img { max-width: 96vw; max-height: 84vh; object-fit: contain; border-radius: 6px; }
#led-lb p { color: #ddd; font-size: 13px; margin: 10px 0 0; }
.led-recap { margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #2f9e44 10%, var(--card, #fff)); border: 1px solid color-mix(in srgb, #2f9e44 35%, transparent); font-size: 14px; }

/* 手機模擬畫面 */
.ph-ck { flex-direction: row !important; align-items: center; gap: 6px; }
.ph-quick small { color: var(--sub, #777); }
.ph-stage { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; align-items: flex-start; margin: 12px 0; min-height: 200px; }
.ph-panel { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ph-hd { display: flex; gap: 6px; align-items: center; max-width: 100%; }
.ph-hd select { max-width: 260px; }
.ph-size { margin: 0; text-align: center; }
.ph-wrap { position: relative; }
.ph-dev { position: absolute; top: 0; left: 0; box-sizing: border-box; background: #1b1c1f; box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 2px #3a3b40; }
.ph-dev.nf { background: transparent; box-shadow: 0 0 0 1px #adb5bd; }
.ph-scr { position: relative; background: #fff; overflow: hidden; display: flex; flex-direction: column; color: #111; }
.ph-st { flex: none; display: flex; justify-content: space-between; align-items: center; padding: 0 28px; font: 600 15px/1 -apple-system, "Segoe UI", sans-serif; background: #f8f9fa; }
.ph-st .r { font-size: 12px; letter-spacing: 1px; }
.ph-ind { flex: none; display: flex; align-items: center; justify-content: center; background: #f8f9fa; }
.ph-ind i { width: 36%; max-width: 140px; height: 5px; border-radius: 3px; background: #111; opacity: .85; }
.ph-if { flex: none; border: 0; display: block; background: #fff; }
.ph-chrome { flex: none; display: flex; align-items: center; justify-content: center; background: #f1f3f5; border-top: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; padding: 0 10px; box-sizing: border-box; }
.ph-chrome .addr { background: #e9ecef; border: 0; border-radius: 12px; padding: 6px 14px; font: inherit; font-size: 13px; color: #495057; width: 90%; max-width: 90%; text-align: center; text-overflow: ellipsis; outline: none; }
.ph-chrome .addr:focus { background: #fff; box-shadow: 0 0 0 2px #4dabf7; text-align: left; }
.ph-chrome.and .addr { border-radius: 20px; flex: 1; }
.ph-island, .ph-notch, .ph-punch { position: absolute; z-index: 3; pointer-events: none; background: #000; }
.ph-island { top: 11px; left: 50%; width: 118px; height: 34px; margin-left: -59px; border-radius: 20px; }
.ph-notch { top: 0; left: 50%; width: 160px; height: 30px; margin-left: -80px; border-radius: 0 0 20px 20px; }
.ph-punch { top: 9px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; }

/* 時刻表查詢 */
.tr-modes { display: flex; gap: 6px; align-items: flex-end; flex-wrap: wrap; }
.tr-ft { align-items: flex-end; }
.tr-ft label { flex: 1; min-width: 130px; }
.tr-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.tr-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line, #e4e0d6); border-radius: 10px; }
.tr-row .tm { display: flex; align-items: baseline; gap: 6px; font-size: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-row .tm span { color: var(--sub, #6b6b66); font-size: 14px; }
.tr-row .mid { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tr-row .mid small { color: var(--sub, #6b6b66); }
.tr-row.next { border-color: var(--tc, #1971c2); background: color-mix(in srgb, var(--tc, #1971c2) 10%, transparent); }
.tr-row.past { opacity: .5; }
.tr-row .nx { flex: none; padding: 2px 8px; border-radius: 99px; background: var(--tc, #1971c2); color: #fff; font-size: 12px; font-style: normal; }
@media (max-width: 480px) { .tr-row { flex-wrap: wrap; gap: 4px 10px; } .tr-row .tm { font-size: 18px; } }
.tr-cb { position: relative; display: block; }
.tr-pn { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; max-height: 320px; overflow-y: auto; min-width: 220px; padding: 6px; border: 1px solid var(--line, #e4e0d6); border-radius: 10px; background: var(--card, #fff); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.tr-pn[hidden] { display: none; }
.tr-gt { padding: 6px 6px 2px; color: var(--sub, #6b6b66); font-size: 12px; font-weight: 700; }
.tr-hot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 4px; }
.tr-opt { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tr-opt small { color: var(--sub, #6b6b66); font-size: 11px; }
.tr-opt:hover { background: color-mix(in srgb, var(--tc, #1971c2) 12%, transparent); }
.tr-hot .tr-opt { border: 1px solid var(--line, #e4e0d6); justify-content: center; padding: 8px 4px; }
.tr-hot .tr-opt small { display: none; }
/* 高鐵（橘）、台鐵（藍）並排 */
.tr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.tr-cols .tr-head { grid-column: 1 / -1; margin-bottom: 0; }
.tr-col { min-width: 0; padding: 10px; border: 1px solid var(--line, #e4e0d6); border-top: 4px solid var(--mc); border-radius: 12px; background: var(--card, #fff); }
.m-thsr { --mc: #e8590c; } .m-tra { --mc: #1971c2; }
.tr-ch { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.tr-ch .bd { padding: 2px 12px; border-radius: 99px; background: var(--mc); color: #fff; font-weight: 700; }
.tr-col .tr-row { border-left: 4px solid var(--mc); }
.tr-col .tr-row.next { border-color: var(--mc); background: color-mix(in srgb, var(--mc) 12%, transparent); }
.tr-col .tr-row .nx { background: var(--mc); }
.tr-col .tr-row .ty { color: var(--mc); font-weight: 600; }
.tr-dot { display: inline-block; width: 9px; height: 9px; margin: 0 2px; border-radius: 50%; background: var(--mc, #999); }
.tr-lg { font-weight: 400; }
.tr-opt .r { display: inline-flex; align-items: center; gap: 4px; }
.tr-opt.big { font-weight: 800; font-size: 1.08em; }
@media (max-width: 760px) { .tr-cols { grid-template-columns: 1fr; } }
.tr-nt { margin: 2px 0 6px; padding: 4px 8px; border-radius: 6px; background: color-mix(in srgb, var(--mc) 10%, transparent); }
.tr-tf { grid-column: 1 / -1; }
.tr-plan { display: flex; gap: 14px; align-items: center; padding: 10px 12px; border: 1px solid var(--line, #e4e0d6); border-radius: 10px; }
.tr-plan .tm { display: flex; flex-direction: column; flex: none; min-width: 120px; font-size: 18px; font-variant-numeric: tabular-nums; }
.tr-plan .tm b, .tr-plan .tm span { display: inline; }
.tr-plan .tm small { color: var(--sub, #6b6b66); font-size: 13px; }
.tr-plan .mid { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.tr-plan .lg { padding: 4px 8px; border-left: 4px solid var(--mc); border-radius: 4px; background: color-mix(in srgb, var(--mc) 8%, transparent); }
.tr-plan .lg .bd { padding: 1px 8px; border-radius: 99px; background: var(--mc); color: #fff; font-size: 12px; }
.tr-plan .sw { padding-left: 12px; color: var(--sub, #6b6b66); font-size: 13px; }
@media (max-width: 560px) { .tr-plan { flex-direction: column; align-items: stretch; gap: 6px; } }

/* 捷運查詢 */
.mt-tot { margin: 6px 0 10px; font-size: 18px; }
.mt-tot b { font-size: 30px; color: #2b8a3e; }
.mt-tot small { color: var(--sub, #6b6b66); font-size: 13px; }
.mt-steps { display: flex; flex-direction: column; gap: 6px; }
.mt-st { padding: 8px 10px; border: 1px solid var(--line, #e4e0d6); border-radius: 10px; }
.mt-st small { color: var(--sub, #6b6b66); }
.mt-x { padding: 4px 12px; color: var(--sub, #6b6b66); font-size: 14px; }
.mt-ln { display: inline-block; padding: 2px 10px; border-radius: 99px; color: #fff; font-size: 13px; font-weight: 700; margin-right: 4px; }
.mt-fl { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.mt-fl > div { display: flex; gap: 14px; align-items: baseline; padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, #2b8a3e 6%, transparent); }
.mt-fl span { flex: 1; }
.mt-way { margin: 8px 0 0 6px; padding-left: 14px; border-left: 4px solid var(--lc, #868e96); }
.mt-sn { position: relative; display: flex; align-items: baseline; gap: 8px; padding: 3px 0; font-size: 14px; }
.mt-sn i { position: absolute; left: -22px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #fff; border: 3px solid var(--lc, #868e96); }
.mt-sn.end i { left: -24px; width: 14px; height: 14px; margin-top: -7px; background: var(--lc, #868e96); }
.mt-sn.end b { font-size: 16px; }
.mt-sn em { color: var(--sub, #6b6b66); font-size: 12px; font-style: normal; }
.mt-way details { margin: 2px 0; }
.mt-way summary { cursor: pointer; color: var(--sub, #6b6b66); font-size: 13px; padding: 3px 0; }

.tr-fare{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:6px 0 2px;padding:6px 10px;border-radius:8px;background:rgba(43,138,62,.1);font-size:.92rem}
.tr-fare b{color:#2b8a3e;font-size:1.05rem}
.tr-fare small{opacity:.7}
.tr-fare details{flex-basis:100%;font-size:.85rem}
.tr-fare details div{display:flex;justify-content:space-between;gap:12px;padding:2px 0}

.tr-buy{margin-left:auto;font-size:.82rem;padding:2px 10px;border-radius:999px;background:rgba(0,0,0,.06);text-decoration:none;white-space:nowrap}
.tl-note .tr-buy{margin-left:0}
.tr-ch .tr-buy{order:9}
.tr-px{color:#2b8a3e;font-weight:700}

/* 公車查詢 */
.bs-q{flex:1 1 220px}.bs-q input{width:100%}
.bs-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.bs-rt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 12px;border:1px solid rgba(128,128,128,.35);border-radius:10px;background:transparent;color:inherit;cursor:pointer;text-align:left;max-width:100%}
.bs-rt b{font-size:1.05rem;color:#e8590c}.bs-rt small{opacity:.7}.bs-rt.on{background:rgba(232,89,12,.12);border-color:#e8590c}
.bs-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.bs-head b{font-size:1.3rem;color:#e8590c}.bs-head .tl-btn{margin-left:auto}
.bs-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.bs-tab{padding:6px 12px;border-radius:999px;border:1px solid rgba(128,128,128,.4);background:transparent;color:inherit;cursor:pointer}.bs-tab.on{background:#e8590c;border-color:#e8590c;color:#fff}
.bs-stops{list-style:none;margin:0;padding:0 0 0 6px;position:relative}
.bs-stops li{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid rgba(128,128,128,.15);position:relative}
.bs-stops .dot{width:10px;height:10px;border-radius:50%;background:#e8590c;flex:none}
.bs-stops .nm{flex:1}
.bs-e{font-style:normal;font-weight:700;padding:2px 10px;border-radius:999px;background:rgba(43,138,62,.12);color:#2b8a3e;white-space:nowrap}
.bs-e.soon{background:rgba(232,89,12,.15);color:#e8590c}.bs-e.now{background:#e8590c;color:#fff}
.bs-e.none,.bs-e.wait{background:rgba(128,128,128,.12);color:inherit;opacity:.75;font-weight:400}

/* 縣市格子選擇器 */
.ct-t{display:block;margin-bottom:6px}
.ct-gt{font-size:.82rem;opacity:.65;margin:8px 0 4px}
.ct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px}
.ct-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:48px;padding:8px 6px;border:1px solid rgba(128,128,128,.35);border-radius:10px;background:transparent;color:inherit;cursor:pointer;font:inherit}
.ct-tile b{font-size:.98rem}.ct-tile small{font-size:.74rem;opacity:.7}
.ct-tile:hover{border-color:var(--tc,#1971c2)}
.ct-tile.on{background:var(--tc,#1971c2);border-color:var(--tc,#1971c2);color:#fff}.ct-tile.on small{opacity:.9}

.bs-cityline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}.bs-cityline #bs-cityname{font-weight:700;color:#e8590c}
.bs-fav{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;margin-top:8px}
.bs-fc{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid rgba(128,128,128,.3);border-radius:12px;background:rgba(232,89,12,.05)}
.bs-fgo{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:1px;background:transparent;border:0;color:inherit;cursor:pointer;text-align:left;padding:0;font:inherit;min-width:0}
.bs-fgo b{font-size:1.1rem;color:#e8590c}.bs-fgo small{opacity:.65}
.bs-fx{background:transparent;border:0;color:inherit;opacity:.45;cursor:pointer;font-size:1rem}.bs-fx:hover{opacity:1}
.bs-star{background:transparent;border:0;cursor:pointer;font-size:1.25rem;color:#e8590c;padding:0 2px;line-height:1}.bs-star.on{color:#f08c00}

.bs-nbh{align-items:center}.bs-nbh b{margin-right:auto}
.bs-ng{margin-top:10px;padding:10px;border:1px solid rgba(128,128,128,.3);border-radius:12px}
.bs-nh{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}.bs-nh b{font-size:1.05rem}.bs-nh small{opacity:.65}
.bs-nr{display:flex;flex-wrap:wrap;gap:6px}
.bs-nc{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid rgba(128,128,128,.3);border-radius:10px;background:transparent;color:inherit;font:inherit;cursor:pointer}
span.bs-nc{cursor:default}.bs-nc>b{color:#e8590c}.bs-nc .bs-e{font-size:.85rem;padding:1px 8px}

/* 商業記帳 */
#biz{--tc:#2f9e44}
.biz-bar{align-items:center;margin-bottom:10px}
#biz-tabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:12px;padding-bottom:4px}
#biz-tabs button{flex:none;padding:8px 14px;border:1px solid rgba(128,128,128,.35);border-radius:999px;background:transparent;color:inherit;font:inherit;cursor:pointer;white-space:nowrap}
#biz-tabs button.on{background:var(--tc);border-color:var(--tc);color:#fff}
.tl-btn.sm{padding:5px 11px;font-size:13px}
.biz-tpls{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:10px 0}
.biz-tp{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:12px;border:2px solid rgba(128,128,128,.3);border-radius:12px;background:transparent;color:inherit;font:inherit;cursor:pointer;text-align:left}
.biz-tp .i{font-size:1.6rem}.biz-tp small{opacity:.7}.biz-tp.on{border-color:var(--tc);background:rgba(47,158,68,.08)}
.biz-pos{background:var(--bg,#fff);color:inherit}
.biz-pos-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}.biz-pos-title{font-size:1.1rem;margin-right:auto}
.biz-fs-x{display:none}
.biz-pos-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:12px;align-items:start}
.biz-cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.biz-cat{padding:6px 12px;border:1px solid rgba(128,128,128,.35);border-radius:999px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.biz-cat.on{background:var(--tc);border-color:var(--tc);color:#fff}
.biz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.biz-it{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-height:74px;padding:8px;border:1px solid rgba(128,128,128,.35);border-radius:12px;background:rgba(47,158,68,.06);color:inherit;font:inherit;cursor:pointer;text-align:center}
.biz-it:active{background:var(--tc);color:#fff}.biz-it span{opacity:.75;font-size:.9rem}
.biz-custom{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}.biz-custom input{flex:1;min-width:90px;padding:7px;border:1px solid rgba(128,128,128,.4);border-radius:8px;background:transparent;color:inherit;font:inherit}
.biz-cart{border:1px solid rgba(128,128,128,.3);border-radius:12px;padding:10px;position:sticky;top:8px}
.biz-lines{max-height:34vh;overflow:auto;margin-bottom:8px}
.biz-ln{display:grid;grid-template-columns:1fr 70px auto 80px 24px;gap:6px;align-items:center;padding:5px 0;border-bottom:1px solid rgba(128,128,128,.15)}
.biz-ln .pr{width:70px;padding:4px;border:1px solid rgba(128,128,128,.35);border-radius:6px;background:transparent;color:inherit;font:inherit}
.biz-ln .qt{display:inline-flex;align-items:center;gap:4px}.biz-ln .qt button{width:28px;height:28px;border-radius:50%;border:1px solid rgba(128,128,128,.4);background:transparent;color:inherit;cursor:pointer}
.biz-ln .sb{text-align:right}.biz-ln .x{background:transparent;border:0;color:inherit;opacity:.5;cursor:pointer}
.biz-ord{display:grid;grid-template-columns:1fr 1fr;gap:6px}.biz-ord label{display:flex;flex-direction:column;font-size:.8rem;gap:2px}
.biz-ord input,.biz-ord select{width:100%;box-sizing:border-box;min-width:0}.biz-ord input,.biz-ord select,.biz-recv input{padding:6px;border:1px solid rgba(128,128,128,.4);border-radius:8px;background:transparent;color:inherit;font:inherit}
.biz-sum{display:flex;justify-content:space-between;align-items:baseline;margin:10px 0 6px}.biz-sum b{font-size:1.8rem;color:var(--tc)}
.biz-pm{display:flex;gap:6px;flex-wrap:wrap}.biz-pmb{flex:1;padding:9px 6px;border:1px solid rgba(128,128,128,.4);border-radius:10px;background:transparent;color:inherit;font:inherit;cursor:pointer}.biz-pmb.on{background:var(--tc);border-color:var(--tc);color:#fff}
.biz-recv{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin-top:8px}.biz-recv[hidden]{display:none}.biz-recv label{display:flex;flex-direction:column;font-size:.8rem}.biz-recv input{width:110px}
.biz-quick button{margin-right:4px;padding:6px 9px;border:1px solid rgba(128,128,128,.4);border-radius:8px;background:transparent;color:inherit;cursor:pointer}.biz-change{font-weight:700}
.biz-go{display:grid;grid-template-columns:1fr 2fr;gap:8px;margin-top:10px}.biz-pay{font-size:1.2rem;padding:14px}
.biz-pos.is-max{position:fixed;inset:0;z-index:9999;overflow:auto;padding:12px;background:var(--bg,#fff)}
.biz-pos.is-max .biz-fs-x{display:inline-block}.biz-pos.is-max #biz-fs{display:none}
.biz-pos.is-max .biz-cart{top:0}.biz-pos.is-max .biz-lines{max-height:30vh}
body.biz-lock{overflow:hidden}
@media (max-width:760px){.biz-pos-body{grid-template-columns:1fr}.biz-cart{position:static}.biz-ln{grid-template-columns:1fr 62px auto 70px 22px}}
.biz-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:10px 0}
.biz-kpi>div{padding:10px;border-radius:10px;background:rgba(47,158,68,.07)}.biz-kpi small{display:block;opacity:.7}.biz-kpi b{font-size:1.2rem}.biz-kpi i{font-style:normal;font-size:.8rem;opacity:.7;margin-left:6px}
.biz-sr{padding:8px 0;border-bottom:1px solid rgba(128,128,128,.15)}.biz-sr .h{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.biz-sr .tot{font-weight:700}.biz-sr em{font-style:normal;opacity:.7}.biz-sr .vd{color:#c92a2a;opacity:1}.biz-sr .d{font-size:.9rem;opacity:.85;margin-top:2px}.biz-sr.void{opacity:.5;text-decoration:line-through}.biz-sr.void .h button{text-decoration:none}
.biz-bars{display:flex;align-items:flex-end;gap:3px;height:130px;margin-top:8px;overflow-x:auto}.biz-bars .bb{flex:1;min-width:14px;max-width:46px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}.biz-bars .bb i{display:block;width:100%;background:var(--tc);border-radius:3px 3px 0 0}.biz-bars small{font-size:.65rem;opacity:.7}
.biz-rank>div{display:flex;align-items:center;gap:8px;padding:5px 0}.biz-rank span{flex:0 0 36%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.biz-rank .bar{flex:1;height:8px;border-radius:4px;background:rgba(128,128,128,.15)}.biz-rank .bar i{display:block;height:100%;background:var(--tc);border-radius:4px}.biz-rank b{margin-left:auto}
.biz-ir{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 0;border-bottom:1px solid rgba(128,128,128,.15)}.biz-ir .nm{font-weight:600;min-width:90px}.biz-ir small{flex:1;opacity:.7}.biz-ir.off{opacity:.5}
.tl-seg{display:flex;gap:4px;flex-wrap:wrap}.tl-seg button{padding:6px 12px;border:1px solid rgba(128,128,128,.35);border-radius:8px;background:transparent;color:inherit;font:inherit;cursor:pointer}.tl-seg button.on{background:var(--tc);border-color:var(--tc);color:#fff}

.biz-rr{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin:6px 0}.biz-rr label{display:flex;flex-direction:column;font-size:.8rem;gap:2px}.biz-rr input{padding:6px;border:1px solid rgba(128,128,128,.4);border-radius:8px;background:transparent;color:inherit;font:inherit;width:140px}
.biz-hr{border:0;border-top:1px dashed rgba(128,128,128,.35);margin:12px 0}
.biz-help{margin:6px 0}.biz-help summary{cursor:pointer;color:var(--tc)}
.tl-row input[type=text],.tl-row input[type=number],.tl-row input[type=date],.tl-row input[type=month],.tl-row select{padding:7px;border:1px solid rgba(128,128,128,.4);border-radius:8px;background:transparent;color:inherit;font:inherit}

.biz-dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin:10px 0}.biz-dl label{display:flex;flex-direction:column;font-size:.85rem;gap:3px}.biz-dl input{padding:9px;border:1px solid rgba(128,128,128,.4);border-radius:8px;background:transparent;color:inherit;font:inherit;font-size:1.05rem}

.biz-inc{display:flex;gap:8px;align-items:flex-start;margin:8px 0;padding:8px 10px;border-radius:10px;background:rgba(47,158,68,.08);font-size:.9rem}

.biz-rank .tot{border-top:1px solid rgba(128,128,128,.35);margin-top:4px;padding-top:8px;font-weight:700}.biz-rank small{opacity:.7;min-width:34px;text-align:right}.biz-rc{margin-top:6px;padding-top:8px;border-top:1px dashed rgba(128,128,128,.3)}

/* 多店彙總表 */
.biz-mt{overflow-x:auto;margin:8px 0;-webkit-overflow-scrolling:touch}
.biz-mt table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:520px}
.biz-mt th,.biz-mt td{padding:8px 6px;text-align:right;border-bottom:1px solid rgba(128,128,128,.2);white-space:nowrap}
.biz-mt th:first-child,.biz-mt td:first-child{text-align:left}
.biz-mt th{font-weight:600;opacity:.7;font-size:.82rem}
.biz-mt tr.tot td{font-weight:700;border-top:2px solid rgba(128,128,128,.4);border-bottom:0}
/* QR 點餐 */
.biz-obar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 10px;padding:12px 14px;background:#fff4e6;border:2px solid #f08c00;border-radius:12px;color:#222}.biz-obar.hot{background:#ffe8cc;border-color:#e8590c}.biz-obt{font-weight:700;font-size:1.1rem;flex:1;min-width:180px}.biz-obb{border:0;background:#e8590c;color:#fff;font:inherit;font-weight:700;padding:9px 16px;border-radius:10px;cursor:pointer}.biz-obb.gray{background:#fff;color:#555;border:1px solid #aaa}
.biz-olist{max-height:46vh;overflow:auto;margin:0 0 8px}
.biz-oc{border:1px solid #d0d7d0;border-left:5px solid #f08c00;border-radius:8px;padding:8px 10px;margin:0 0 8px;background:#fff;color:#222}
.biz-oc.accepted{border-left-color:#2f9e44}
.biz-oh{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.biz-ol{display:flex;justify-content:space-between;gap:8px;padding:2px 0}
.biz-ost{font-size:12px;padding:1px 8px;border-radius:99px;background:#f08c00;color:#fff}
.biz-ost.accepted{background:#2f9e44}.biz-ost.ed{background:#7048e8}
.biz-qrg{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-top:8px}
.biz-qrc{border:1px solid #ccc;border-radius:8px;padding:8px;text-align:center;background:#fff;color:#222}
.biz-qrc .qs{display:flex;justify-content:center;margin:4px 0}
.biz-snd{display:flex;align-items:center;gap:6px;font-size:.9rem}.biz-snd select{padding:4px}.biz-snd label{display:flex;align-items:center;gap:3px;margin:0}
.biz-ot{display:block;color:#666;font-size:12px;font-weight:400}.biz-ot2{color:#666;font-size:12px}
.biz-ost.lg{background:#1971c2}
.biz-lk{border-top:1px dashed #bbb;margin-top:12px;padding-top:10px}
.biz-ge{margin-top:10px;border:1px solid #2f9e44}
.bg-items{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0}.bg-it{display:flex;align-items:center;gap:4px;margin:0}
.biz-lk .qs{display:flex}

/* ───── 文件（Word 風格） ───── */
.dc-tpls{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.dc-tpl{display:flex;align-items:center;gap:6px;padding:10px 14px;border:1px solid var(--line,#ddd);border-radius:10px;background:var(--card,#fff);color:inherit;font:inherit;font-size:14.5px;cursor:pointer}
.dc-tpl:hover{border-color:var(--tc);color:var(--tc)}
.dc-tpl:disabled{opacity:.5}
.dc-tabs{display:flex;gap:6px;margin-bottom:10px}
.dc-tabs button{padding:6px 14px;border:1px solid var(--line,#ddd);border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:14px;cursor:pointer}
.dc-tabs button.on{background:var(--tc);border-color:var(--tc);color:#fff}
.dc-ul{list-style:none;margin:0;padding:0}
.dc-ul li{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:10px 4px;border-top:1px solid var(--line,#eee)}
.dc-ul li:first-child{border-top:0}
.dc-name{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 220px;color:inherit;text-decoration:none}
.dc-name>span{font-size:24px}
.dc-name b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-name small{display:block;color:var(--sub,#666);font-size:12px;font-weight:400}
.dc-name>b,.dc-name>small{max-width:100%}
.dc-acts{display:flex;gap:6px;flex-wrap:wrap}

.dc-edit{position:relative}
.dc-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.dc-back{flex:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--line,#ddd);display:flex;align-items:center;justify-content:center;text-decoration:none;color:inherit;font-size:18px}
#dc-title{flex:1 1 auto;min-width:0;font-size:18px;font-weight:700;padding:8px 10px}
.dc-top .tl-btn{white-space:nowrap;flex:none}
.dc-state{flex:none;font-size:12.5px;color:var(--sub,#666);white-space:nowrap}
.dc-state.ok{color:#2f9e44}.dc-state.warn{color:#e8590c}.dc-state.err{color:#e03131}
.dc-bar{position:sticky;top:var(--f-stick,0px);z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:6px 8px;background:var(--card,#fff);border:1px solid var(--line,#ddd);border-radius:10px}
.dc-g{flex:none;display:flex;flex-wrap:nowrap;align-items:center;gap:2px}
.dc-g+.dc-g{padding-left:8px;border-left:1px solid var(--line,#ddd)}
.dc-bar button,.dc-color{flex:none;width:38px;height:38px;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:inherit;font:inherit;font-size:19px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.dc-bar button svg,.dc-color svg{width:23px;height:23px;display:block}
.dc-bar button:hover,.dc-color:hover{background:rgba(28,126,214,.12)}
.dc-bar button.on{background:var(--tc);color:#fff}
.dc-bar select{flex:none;width:auto;height:38px;padding:0 6px;font-size:14.5px;margin-right:2px}
#dc-block{width:84px}#dc-font{width:150px}#dc-size{width:66px}
.dc-color{position:relative;flex-direction:column;gap:0;line-height:1;overflow:hidden}
.dc-color span{font-size:19px;font-weight:700;line-height:1}
.dc-color i{display:block;width:20px;height:4px;border-radius:2px;margin-top:2px}
.dc-color input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;padding:0;border:0}
.dc-top .tl-btn svg{vertical-align:-4px}
.dc-tbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px;padding:6px 8px;border:1px dashed var(--tc);border-radius:10px;font-size:13px}
.dc-tbar[hidden]{display:none}
.dc-tbar button{padding:5px 9px;border:1px solid var(--line,#ccc);border-radius:7px;background:var(--card,#fff);color:inherit;font:inherit;font-size:13px;cursor:pointer}
.dc-lock{margin:8px 0;padding:10px 12px;border-radius:10px;background:#fff4e6;border:1px solid #ffa94d;color:#7c3a00;display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;font-size:14px;line-height:1.6}
.dc-lock[hidden]{display:none}
.dc-lock .a{display:flex;gap:6px;flex-wrap:wrap}
.dc-paper-wrap{margin-top:10px;padding:14px 0;background:rgba(127,127,127,.12);border-radius:10px;overflow-x:auto}
.dc-paper{box-sizing:border-box;width:min(100%,820px);min-height:70vh;margin:0 auto;padding:36px clamp(14px,5vw,56px);background:#fff;color:#111;border-radius:4px;box-shadow:0 1px 6px rgba(0,0,0,.18);font-size:16px;line-height:1.75;outline:0;overflow-wrap:anywhere;word-break:break-word}
.dc-paper h1{font-size:2em;margin:.6em 0 .3em;line-height:1.3}
.dc-paper h2{font-size:1.5em;margin:.6em 0 .3em;line-height:1.3}
.dc-paper h3{font-size:1.2em;margin:.6em 0 .3em}
.dc-paper p{margin:0 0 .6em}
.dc-paper ul,.dc-paper ol{margin:0 0 .6em;padding-left:1.6em}
.dc-paper table{border-collapse:collapse;max-width:100%;margin:.4em 0;table-layout:fixed;width:100%}
.dc-paper td,.dc-paper th{border:1px solid #888;padding:4px 8px;vertical-align:top;min-width:40px;overflow-wrap:anywhere}
.dc-paper th{background:#eef2f7}
.dc-paper img{max-width:100%;height:auto;cursor:pointer}
.dc-paper blockquote{margin:.6em 0;padding-left:1em;border-left:4px solid #bbb;color:#444}
.dc-paper pre{background:#f3f3f3;padding:8px 10px;border-radius:6px;white-space:pre-wrap;font-family:ui-monospace,Consolas,monospace;font-size:14px}
.dc-paper hr{border:0;border-top:1px solid #bbb;margin:1em 0}
.dc-paper hr.pb{border-top:2px dashed #7aa7d9;position:relative;margin:1.4em 0}
.dc-paper hr.pb::after{content:'分頁';position:absolute;right:0;top:-.9em;font-size:11px;color:#7aa7d9;background:#fff;padding-left:4px}
.dc-paper a{color:#1c7ed6}
.is-ro .dc-paper{opacity:.75}
.is-ro .dc-bar{opacity:.5;pointer-events:none}
.dc-foot{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font-size:13px}
.dc-imgbar{position:absolute;z-index:30;display:flex;gap:4px;padding:4px;background:#222;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.dc-imgbar button{padding:5px 10px;border:0;border-radius:6px;background:#444;color:#fff;font:inherit;font-size:13px;cursor:pointer}
@media (max-width:640px){
  .dc-bar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .dc-paper{padding:20px 14px;min-height:60vh}
}

.dc-bulk{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 4px 10px}
.dc-all{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;cursor:pointer}
.dc-bulk input[type=checkbox],.dc-ck input{width:20px;height:20px;accent-color:var(--tc);cursor:pointer}
.dc-sel{font-size:13px;color:var(--sub,#666);min-width:64px}
.dc-ck{flex:none;display:flex;align-items:center;padding:6px}
@media (max-width:640px){.dc-pt{display:none}}

.dc-quota{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:6px;font-size:14px}

/* ───── 試算表 ───── */
.sx-tools{margin-top:6px;border-style:solid;border-color:var(--line,#ddd);align-items:center}
.sx-tools button{white-space:nowrap}
.sx-tools button.on{background:var(--tc);color:#fff;border-color:var(--tc)}
.sx-tools select{height:32px;font-size:13px;padding:0 6px;width:auto}
.sx-sep{width:1px;align-self:stretch;background:var(--line,#ddd);margin:0 2px}
.sx-fbar{display:flex;align-items:center;gap:6px;margin-top:6px}
.sx-addr{flex:none;min-width:52px;padding:6px 8px;border:1px solid var(--line,#ccc);border-radius:7px;text-align:center;font-size:13px;font-weight:700;background:var(--card,#fff)}
.sx-fx{flex:none;font-style:italic;color:var(--sub,#666);font-size:13px}
#sx-fx{flex:1 1 auto;min-width:0;font-size:15px;padding:6px 8px;font-family:ui-monospace,Consolas,"Noto Sans TC",monospace}
.sx-wrap{position:relative;margin-top:8px;height:calc(100vh - 380px);min-height:340px;overflow:auto;border:1px solid var(--line,#ccc);border-radius:8px;background:#fff;color:#111;outline:none;-webkit-overflow-scrolling:touch}
.sx-t{border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:14px;-webkit-user-select:none;user-select:none}
.sx-t th{position:sticky;top:0;z-index:3;height:26px;background:#f1f3f5;color:#444;font-weight:600;font-size:12.5px;border-right:1px solid #cfd4da;border-bottom:1px solid #cfd4da;padding:0;cursor:pointer}
.sx-t th.sx-corner{left:0;z-index:5}
.sx-t td.sx-rh{position:sticky;left:0;z-index:2;background:#f1f3f5;color:#444;text-align:center;font-size:12px;cursor:pointer;border-right:1px solid #cfd4da;padding:0}
.sx-t td{height:26px;padding:0 4px;border-right:1px solid #e3e7ec;border-bottom:1px solid #e3e7ec;overflow:hidden;white-space:nowrap;box-sizing:border-box;line-height:25px;background:#fff;color:#111}
.sx-t td.sx-w{white-space:normal;line-height:1.3;padding-top:3px;padding-bottom:3px;overflow-wrap:anywhere;vertical-align:top}
.sx-t td.sx-sel{box-shadow:inset 0 0 0 9999px rgba(47,158,68,.14)}
.sx-t td.sx-act{outline:2px solid var(--tc);outline-offset:-2px}
.sx-t td.sx-err{color:#c92a2a;text-align:center}
.sx-t th.sx-hs,.sx-t td.sx-rh.sx-hs{background:#d3f0da;color:#1b5e20}
.sx-t td.sx-fr{position:sticky;top:var(--sx-hh,26px);z-index:1;border-bottom:2px solid #868e96}
.sx-t td.sx-fc{position:sticky;left:var(--sx-rw,44px);z-index:1;border-right:2px solid #868e96}
.sx-t td.sx-fr.sx-fc{z-index:2}
.sx-rz{position:absolute;right:-4px;top:0;bottom:0;width:9px;cursor:col-resize;z-index:6;touch-action:none}
.sx-in{position:absolute;z-index:7;box-sizing:border-box;margin:0;border:2px solid var(--tc);padding:0 4px;font:inherit;font-size:14px;background:#fff;color:#111;border-radius:0;outline:none;min-width:40px}
.sx-in.idle{opacity:0;pointer-events:none;border:0;width:1px!important;height:1px!important;padding:0;min-width:0}
.sx-more{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.sx-fn{margin-top:10px;font-size:13.5px}
.sx-fn summary{cursor:pointer}
#sx-fnlist{font-family:ui-monospace,Consolas,monospace;line-height:1.9;word-break:break-word}
.is-ro .sx-tools,.is-ro .sx-fbar,.is-ro .sx-more{opacity:.5;pointer-events:none}
@media (pointer:coarse){.sx-rz{width:20px;right:-10px}.sx-t td{height:32px;line-height:31px}.sx-t th{height:30px}}
@media (max-width:640px){
  .sx-edit .dc-top{flex-wrap:wrap}
  .sx-edit #dc-title{order:10;flex:1 1 100%}
  .sx-edit .dc-state{margin-left:auto}
  .sx-tools{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .sx-wrap{height:calc(100vh - 300px);min-height:300px}
}

/* ───── 全螢幕、試算表狀態列 ───── */
html.dc-fs-lock,html.dc-fs-lock body{overflow:hidden}
.dc-fullbtn{border:2px solid #e8590c!important;color:#e8590c!important;font-weight:700;background:transparent}
.dc-fullbtn.on{background:#e8590c!important;color:#fff!important}
.dc-full{position:fixed!important;inset:0;z-index:9000;box-sizing:border-box;width:auto!important;max-width:none!important;margin:0!important;padding:8px 10px;overflow:auto;display:flex;flex-direction:column;background:var(--bg,#f6f4ef);border:3px solid #e8590c}
.dc-full .dc-bar{top:0}
.dc-full .dc-paper-wrap{flex:1 1 auto;min-height:0;overflow:auto}
.dc-full .dc-paper{min-height:calc(100% - 4px)}
.dc-full .sx-wrap{flex:1 1 auto;height:auto;min-height:0}
.dc-full .sx-more{margin-top:6px}
.sx-status{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;min-height:34px;margin-top:6px;padding:5px 8px;border:1px solid var(--tc);border-radius:8px;background:rgba(47,158,68,.1);font-size:14px}
.sx-status .sx-hint{color:var(--sub,#666);font-size:13px}
.sx-chip{display:inline-flex;align-items:baseline;gap:6px;padding:2px 10px;border-radius:999px;background:var(--tc);color:#fff;white-space:nowrap}
.sx-chip i{font-style:normal;font-size:12px;opacity:.9}
.sx-chip b{font-size:15px;font-variant-numeric:tabular-nums}
.sx-chip.n{background:rgba(127,127,127,.22);color:inherit}
.sx-find{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px;padding:6px 8px;border:2px solid #e8590c;border-radius:10px;background:var(--card,#fff)}
.sx-find[hidden]{display:none}
.sx-find input{width:150px;flex:1 1 120px;max-width:220px;padding:6px 8px;font-size:14px}
.sx-find button{padding:5px 10px;border:1px solid var(--line,#ccc);border-radius:7px;background:var(--card,#fff);color:inherit;font:inherit;font-size:13px;cursor:pointer}
.sx-tools select{max-width:150px}

/* ───── 試算表：檔案選單、置中狀態列、版面 ───── */
.sx-menu{position:relative;flex:none}
.sx-pop{position:absolute;right:0;top:calc(100% + 4px);z-index:60;min-width:210px;padding:6px;background:var(--card,#fff);border:1px solid var(--line,#ccc);border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.18);display:flex;flex-direction:column;gap:2px}
.sx-pop[hidden]{display:none}
.sx-pop button{padding:9px 12px;border:0;border-radius:7px;background:transparent;color:inherit;font:inherit;font-size:14.5px;text-align:left;cursor:pointer;white-space:nowrap}
.sx-pop button:hover{background:rgba(47,158,68,.14)}
.sx-status{justify-content:center;text-align:center}
.sx-more{align-items:center}
.sx-note{margin-left:auto;text-align:right}
@media (max-width:640px){.sx-pop{right:auto;left:0}}

/* ───── 網頁內對話框 ───── */
.dc-modal{position:fixed;inset:0;z-index:9600;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.dc-mbox{width:min(440px,100%);padding:18px 18px 14px;border-radius:14px;background:var(--card,#fff);color:var(--ink,#222);box-shadow:0 10px 40px rgba(0,0,0,.35);border:2px solid var(--tc,#2f9e44)}
.dc-mbox p{margin:0 0 12px;font-size:15.5px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}
.dc-mbox input{width:100%;margin-bottom:12px;padding:9px 10px;font-size:15px}
.dc-mact{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.dc-mact button{padding:9px 16px;border:1px solid var(--line,#ccc);border-radius:9px;background:var(--card,#fff);color:inherit;font:inherit;font-size:14.5px;cursor:pointer}
.dc-mact button.ok{background:var(--tc,#2f9e44);border-color:var(--tc,#2f9e44);color:#fff;font-weight:700}

/* ───── 試算表：拖曳填滿 ───── */
.sx-fh{position:absolute;z-index:8;width:9px;height:9px;box-sizing:border-box;background:var(--tc,#2f9e44);border:1px solid #fff;cursor:crosshair;touch-action:none;transform:translate(-70%,-70%)}
.sx-fp{position:absolute;z-index:6;pointer-events:none;box-sizing:border-box;border:2px dashed var(--tc,#2f9e44)}
.sx-fo{position:absolute;z-index:9}
.sx-fob{display:flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:1px solid #aaa;border-radius:6px;background:#fff;color:#222;cursor:pointer}
.sx-fom{position:absolute;top:30px;left:0;min-width:200px;padding:4px;background:#fff;border:1px solid #aaa;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.sx-fom button{display:block;width:100%;padding:8px 10px;border:0;border-radius:6px;background:none;color:#222;font:inherit;font-size:14px;text-align:left;cursor:pointer}
.sx-fom button:hover{background:#f0f0f0}.sx-fom button.on{font-weight:700;background:#e8f5e9}
.sx-fh[hidden],.sx-fp[hidden],.sx-fo[hidden],.sx-fom[hidden]{display:none}
@media (pointer:coarse){.sx-fh{width:20px;height:20px;border-radius:50%;transform:translate(-50%,-50%)}.sx-fob{width:34px;height:34px}.sx-fom{top:38px}}
/* ───── 線上點餐單（列表／卡片） ───── */
.biz-obar{display:block;padding:10px 12px}
.biz-obtop{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.biz-obt{font-weight:800;font-size:1.1rem}
.biz-ost-line{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:.92rem}
.biz-good{color:#2f9e44}.biz-bad{color:#c92a2a}
.biz-obbtns{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.biz-obbtns .biz-obb{white-space:nowrap;min-height:38px}
.biz-snd{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px;padding:8px 10px;background:#fff;border-radius:10px;font-size:.92rem}
.biz-snd .biz-obb{white-space:nowrap}
.biz-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.biz-chip{border:1px solid #d9b98a;background:#fff;color:#444;border-radius:99px;padding:6px 14px;font:inherit;font-size:.9rem;cursor:pointer;min-height:36px}
.biz-chip.on{background:#e8590c;border-color:#e8590c;color:#fff;font-weight:700}
.biz-olist{max-height:none;overflow:visible;display:grid;gap:10px;margin:0 0 8px}
.biz-olist.list{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));align-items:start}
.biz-olist.card{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));align-items:start}
.biz-olist>p{grid-column:1/-1}
.biz-olist .biz-oc{margin:0;border:1px solid #e3e8e3;border-top:5px solid #f08c00;border-radius:14px;padding:12px;box-shadow:0 2px 8px rgba(0,0,0,.07)}
.biz-olist .biz-oc.accepted{border-top-color:#2f9e44}
.biz-olist .biz-oc.done{border-top-color:#868e96}
.biz-olist .biz-oc.rsv{border-top-color:#7048e8}
.biz-oh{gap:4px 10px}.biz-oh2{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0 4px}
.biz-on{color:#e8590c}.biz-tel{color:#1c7ed6;font-weight:700;text-decoration:none}
.biz-ost.rv{background:#7048e8;color:#fff}
.biz-oc .biz-ol{align-items:flex-start}
.biz-oln{flex:1;min-width:0;overflow-wrap:anywhere}.biz-olp{white-space:nowrap}
.biz-sum{color:#444;font-size:.92rem;padding:4px 0;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.biz-tot{display:flex;justify-content:space-between;align-items:center;margin:6px 0}
.biz-more{border:0;background:none;color:#1c7ed6;font:inherit;font-size:.88rem;cursor:pointer;padding:4px 2px}
.biz-oc .biz-ob{display:flex;gap:8px;flex-wrap:wrap}
.biz-oc .biz-ob .tl-btn{min-height:40px;padding:8px 16px;font-size:15px}
.biz-morew{text-align:center;margin:4px 0 10px}
.biz-pushrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px;padding:10px;background:#fff;border-radius:10px;font-size:.92rem}
.biz-pushrow .tl-note{flex-basis:100%}
.biz-pushrow label{display:flex;align-items:center;gap:5px}
.biz-pushnote{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px;padding:8px 10px;background:#e7f5ff;border-radius:10px;font-size:.92rem;color:#1864ab}
/* ───── 商業記帳「設定」分頁：子分頁＋較大的字（只作用在 .biz-set 內） ───── */
.biz-set{font-size:16px}
.biz-sst{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;margin:0 0 6px;scrollbar-width:thin}
.biz-sst button{flex:0 0 auto;border:1px solid #cfd8cf;background:#fff;color:#333;border-radius:99px;padding:9px 16px;font:inherit;font-size:15px;cursor:pointer;min-height:42px;white-space:nowrap}
.biz-sst button.on{background:#2f9e44;border-color:#2f9e44;color:#fff;font-weight:700}
.biz-set .tl-box{padding:16px;margin:0 0 14px}
.biz-set .tl-box>b{display:block;font-size:17px;margin-bottom:8px}
.biz-set .tl-note{font-size:14.5px;line-height:1.6}
.biz-set label{font-size:15px}
.biz-set input[type=text],.biz-set input[type=number],.biz-set input[type=date],.biz-set select{font-size:16px;min-height:42px}
.biz-set .tl-btn{min-height:42px;font-size:15px}
.biz-sg{margin:14px 0}.biz-sg>b{display:block;font-size:15.5px;margin-bottom:6px}
.biz-chk{display:flex;flex-wrap:wrap;gap:8px 14px}
.biz-set .biz-rd{display:flex;flex-direction:row;align-items:center;gap:8px;margin:6px 0;font-size:15.5px}
.biz-set input[type=radio],.biz-set input[type=checkbox]{width:20px;height:20px;flex:none}
.biz-sws{display:grid;gap:10px;margin:10px 0}
.biz-sw{display:flex;flex-direction:row!important;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid #e3e8e3;border-radius:12px;background:var(--card,#fff);cursor:pointer}
.biz-sw span{display:flex;flex-direction:column;gap:3px;min-width:0}
.biz-sw b{font-size:16px}.biz-sw small{font-size:13.5px;line-height:1.55;opacity:.78}
.biz-sw input{margin-top:3px}
.biz-sw.off{opacity:.6;cursor:default}

/* ===== 商業記帳（零售簡化版）：商品卡片與表單 ===== */
.bz-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 12px}
.bz-h{font-size:1.15rem;font-weight:800}.bz-h small{font-weight:500;opacity:.6;margin-left:4px}
.bz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.bz-card{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid rgba(128,128,128,.22);border-radius:14px;background:rgba(128,128,128,.05);transition:transform .12s,box-shadow .12s}
.bz-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.08)}
.bz-card.off{opacity:.5}
.bz-nm{font-weight:700;line-height:1.3;min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bz-pr{font-size:1.3rem;font-weight:900;color:#2b8a3e}
.bz-bd{display:flex;flex-wrap:wrap;gap:5px}
.bz-b{padding:2px 9px;border-radius:99px;font-size:.78rem;font-weight:700;background:rgba(128,128,128,.15)}
.bz-b.ok{background:#d3f9d8;color:#2b8a3e}.bz-b.low{background:#fff3bf;color:#e67700}.bz-b.zero{background:#ffe3e3;color:#c92a2a}.bz-b.na{background:rgba(128,128,128,.15);opacity:.8}
.bz-b.cat{background:#e7f5ff;color:#1c7ed6}.bz-b.mall{background:#fff0f6;color:#c2255c}
.bz-act{display:flex;gap:6px;margin-top:auto}
.bz-form{padding:16px;border:2px solid #2b8a3e;border-radius:16px;margin:0 0 14px;background:rgba(43,138,62,.04)}
.bz-ft{font-size:1.05rem;font-weight:800;margin-bottom:10px}.bz-ft small{font-weight:500;opacity:.65}
.bz-g2{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bz-g2 label{display:flex;flex-direction:column;gap:4px;font-size:.88rem;font-weight:600}
.bz-g2 label.bz-w2{grid-column:span 3}
.bz-g2 input,.bz-g2 select{width:100%;box-sizing:border-box}
.bz-in{display:flex;gap:6px;flex-wrap:wrap}.bz-in input{flex:1;min-width:140px}
.bz-sync{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:.9rem}
.bz-btns{display:flex;gap:8px;margin-top:12px}
.bz-empty{padding:28px;text-align:center;opacity:.65;border:2px dashed rgba(128,128,128,.3);border-radius:14px}
@media(max-width:640px){.bz-g2{grid-template-columns:1fr 1fr}.bz-g2 label.bz-w2{grid-column:span 2}.bz-grid{grid-template-columns:repeat(2,1fr)}}