:root {
  --bg: #f4f5fa;
  --surface: #ffffff;
  --surface-2: #fafaff;
  --line: #e7e8f0;
  --line-strong: #d8dae6;
  --text: #1f2233;
  --muted: #707487;
  --faint: #9a9eb0;
  --accent: #6d49d8;
  --accent-weak: #efeaff;
  --accent-strong: #5b39c4;
  /* 側欄配色(2026-07-24 主題化):預設深紫,各主題覆寫 */
  --side-bg1: #322a5e; --side-bg2: #2a2350;
  --side-text: #e8e6f7; --side-item: #cdc9e6; --side-muted: #8d88ad;
  --side-link: #9a93c4; --side-shadow: rgba(109,73,216,.4);
  --green: #1f9d6b;
  --green-weak: #e3f6ee;
  --amber: #c9851b;
  --amber-weak: #fdf2dd;
  --red: #d24a4a;
  --red-weak: #fbe7e7;
  --blue: #2f6fd6;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(20,20,50,.04), 0 8px 24px rgba(20,20,50,.06);
  /* 內容區也跟著主題一起變：各主題可只覆寫 token，不必複製整套元件 CSS。 */
  --theme-topbar-bg: linear-gradient(90deg,var(--surface),color-mix(in srgb,var(--accent-weak) 34%,var(--surface)));
  --theme-toolbar-bg: color-mix(in srgb,var(--accent-weak) 36%,var(--surface-2));
  --theme-table-head-bg: color-mix(in srgb,var(--accent-weak) 46%,var(--surface));
  --theme-row-hover-bg: color-mix(in srgb,var(--accent-weak) 30%,var(--surface-2));
  --theme-overlay-head-bg: linear-gradient(90deg,color-mix(in srgb,var(--accent-weak) 48%,var(--surface)),var(--surface));
  --theme-panel-edge: color-mix(in srgb,var(--accent) 48%,var(--line));
  --theme-control-radius: 9px;
  --theme-panel-radius: var(--radius);
  --theme-card-shadow: var(--shadow);
  --theme-action-shadow: 0 3px 0 color-mix(in srgb,var(--accent-strong) 72%,transparent);
  --theme-toast-bg: color-mix(in srgb,var(--accent-strong) 78%,#17141f);
  font-family: "Noto Sans TC", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
/* author display rules (e.g. .drawer{display:flex}) otherwise beat the UA [hidden] rule */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  display: grid;
  grid-template-columns: 224px 1fr;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

/* ── Sidebar ─────────────────────────────────────────── */
.sidebar {
  background: linear-gradient(180deg, var(--side-bg1) 0%, var(--side-bg2) 100%);
  color: var(--side-text);
  display: flex;
  flex-direction: column;
  padding: 18px 12px;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 12px; }
.logo {
  min-width: 34px; height: 34px; padding: 0 7px; box-sizing: border-box; border-radius: 9px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center; font-weight: 700; letter-spacing: .5px;
}
.brand-name { font-weight: 700; font-size: 18px; letter-spacing: 2px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 9px;
  color: var(--side-item); cursor: pointer; user-select: none;
  font-size: 14px; transition: background .12s, color .12s;
}
.nav-item .ic { width: 18px; text-align: center; opacity: .85; }
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-item.active { background: var(--accent); color: #fff; box-shadow: 0 4px 14px var(--side-shadow); }
.nav-parent-link.section-active:not(.active) { background:rgba(255,255,255,.075); color:var(--side-text); }
.nav-item[data-soon] { opacity: .55; }
.nav-item[data-soon]::after { content: "soon"; margin-left: auto; font-size: 10px; opacity: .6; }
.sidebar-bottom { margin-top:0; display:flex; min-height:0; flex:0 0 auto; flex-direction:column; align-items:stretch; overflow:hidden; }
.sidebar-foot { padding: 12px 10px 0; font-size: 11px; color: var(--side-muted); }
.conan-mascot { display: none; }
.custom-theme-mascot { display: none; }
.chiikawa-mascot, .kuromi-mascot, .miffy-mascot, .kanahei-mascot, .kanahei-bakery-mascot, .spongebob-mascot, .chainsaw-mascot,
.pretty-rhythm-mascot, .pingu-mascot, .pikmin-mascot, .crayon-shinchan-mascot, .chainsaw-dance { display: none; }
.agnes-mascot { display: none; }
.crayon-shinchan-walk { display:none; }
.studio-ug-title-mascot, .studio-ug-page-friend, .studio-ug-mascot, .theme-page-watermark { display: none; }
.theme-staff-avatar { display:none; }
.nav-search-wrap {
  position:relative;
  flex:0 0 auto;
  margin:0 4px 10px;
}
.nav-search-wrap input[type="search"] {
  width:100%;
  height:39px;
  padding:0 35px 0 29px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:14px;
  background:rgba(255,255,255,.94);
  color:#4d4052;
  font-weight:500; font-size:11px; line-height:1; /* font 簡寫不可帶 inherit(整條會失效) */
  box-shadow:0 4px 14px rgba(32,24,56,.1);
  outline:none;
}
.nav-search-wrap input[type="search"]::-webkit-search-cancel-button { appearance:none; }
.nav-search-wrap input[type="search"]::placeholder { color:#8f8292; opacity:1; }
.nav-search-wrap input[type="search"]:focus { border-color:#f0b4c7; box-shadow:0 0 0 3px rgba(247,199,216,.28),0 4px 14px rgba(32,24,56,.1); }
.nav-search-glyph {
  position:absolute;
  left:11px;
  top:50%;
  z-index:1;
  translate:0 -50%;
  color:#8c718f;
  font-size:20px;
  line-height:1;
  pointer-events:none;
}
.nav-search-empty { margin:-4px 8px 8px; color:var(--side-muted); font-size:11px; text-align:center; }
.theme-search-character { display:none; }
.desktop-note {
  display:none;
  position:relative;
  flex:0 0 auto;
  margin:4px 10px 8px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.58);
  border-radius:12px;
  background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,250,226,.95));
  box-shadow:0 5px 14px rgba(30,24,48,.16);
}
.desktop-note::before {
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:3px;
  z-index:2;
  background:linear-gradient(90deg,var(--accent),var(--theme-panel-edge));
}
.desktop-note input {
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:36px;
  padding:0 12px;
  border:0;
  outline:0;
  border-radius:inherit;
  background:transparent;
  color:#4d4052;
  font-weight:600; font-size:11px; line-height:1.2; /* font 簡寫不可帶 inherit(整條會失效) */
}
.desktop-note input::placeholder { color:#8e8290; opacity:1; }
.desktop-note:not([hidden]) { display:block; }
.theme-options {
  margin-top:6px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:8px;
  color:var(--side-item);
  background:rgba(255,255,255,.055);
}
.theme-options summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:26px;
  padding:3px 7px;
  list-style:none;
  cursor:pointer;
  user-select:none;
  font-weight:700;
}
.theme-options summary::-webkit-details-marker { display:none; }
.theme-options summary::after { content:"▾"; opacity:.72; transition:rotate .16s ease; }
.theme-options[open] summary::after { rotate:180deg; }
.theme-options[open] { max-height:min(440px,62vh); overflow:auto; }
.theme-options-grid { display:grid; gap:6px; padding:3px 7px 7px; }
.desktop-note-toggle { display:flex; align-items:center; gap:5px; white-space:nowrap; cursor:pointer; }
.theme-scene-control { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:6px; }
.theme-scene-control[hidden] { display:none; }
.theme-scene-control select {
  min-width:0;
  width:100%;
  height:26px;
  padding:0 5px;
  border:1px solid var(--line-strong);
  border-radius:6px;
  background:var(--surface);
  color:var(--text);
  font:inherit;
}
.desktop-note-toggle input { accent-color:var(--accent); }
.theme-custom-assets {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:5px;
  padding-top:6px;
  border-top:1px solid rgba(255,255,255,.14);
}
.theme-custom-assets[hidden] { display:none; }
.theme-custom-heading,
.theme-custom-status,
.theme-custom-list { grid-column:1 / -1; }
.theme-custom-heading { font-weight:800; color:var(--side-text); }
.theme-custom-file,
.theme-custom-assets input,
.theme-custom-assets select,
.theme-custom-assets button {
  min-width:0;
  min-height:27px;
  border:1px solid var(--line-strong);
  border-radius:6px;
  background:var(--surface);
  color:var(--text);
  font:inherit;
}
.theme-custom-file {
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  padding:3px 7px;
  cursor:pointer;
  overflow:hidden;
}
.theme-custom-file span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.theme-custom-label { grid-column:1 / -1; padding:3px 7px; }
.theme-custom-assets select { padding:2px 4px; }
.theme-custom-assets button {
  padding:3px 7px;
  border-color:color-mix(in srgb,var(--accent) 62%,var(--line));
  background:var(--accent);
  color:#fff;
  font-weight:800;
  cursor:pointer;
}
.theme-custom-assets button:disabled { opacity:.58; cursor:wait; }
.theme-custom-status { min-height:14px; color:var(--side-muted); line-height:1.35; }
.theme-custom-status.is-error { color:#ffd1d1; }
.theme-custom-list { display:grid; gap:3px; }
.theme-custom-item {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:5px;
  min-width:0;
  padding:3px 5px;
  border-radius:6px;
  background:rgba(255,255,255,.075);
}
.theme-custom-item-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.theme-custom-item-scope { margin-left:4px; color:var(--side-muted); font-size:10px; }
.theme-custom-item button { min-height:22px; padding:1px 5px; background:transparent; color:var(--side-item); }
html[data-theme-custom-scene="1"] .custom-theme-mascot:not([hidden]) {
  display:block;
  width:min(100%,190px);
  max-height:180px;
  margin:2px auto -3px;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 8px 10px rgba(15,18,30,.25));
}
html[data-theme-custom-scene="1"] .theme-page-watermark {
  display:block;
  position:fixed;
  right:1.5vw;
  bottom:1.5vh;
  width:min(38vw,620px);
  height:min(48vh,500px);
  z-index:0;
  pointer-events:none;
  opacity:.065;
  background:var(--theme-scene-watermark) var(--theme-scene-watermark-position,right bottom)/var(--theme-scene-watermark-size,contain) no-repeat;
}
@media (max-height:700px) and (min-width:861px) {
  html[data-theme-custom-scene="1"] .custom-theme-mascot:not([hidden]) { max-height:105px; margin-bottom:0; }
}
@media (max-height:520px) and (min-width:861px) {
  html[data-theme-custom-scene="1"] .custom-theme-mascot { display:none !important; }
}
.sidebar-bottom > img,
.theme-page-watermark { transition:opacity .24s ease; }
.sidebar-bottom > img.is-switching,
.theme-page-watermark.is-switching { opacity:0 !important; }
/* 手動關閉的語意是整組消失,不是停在靜態影格(2026-08-01 拆兩顆開關):
   左側角色(data-theme-char)=場景人物+浮水印;右下動畫(data-theme-motion)=影片角色 */
html[data-theme-char="off"] :is(
  [data-theme-scene-mascot],
  .theme-page-watermark,
  .studio-ug-title-mascot,
  .studio-ug-page-friend
) { display:none !important; }
html[data-theme-motion="off"] :is(
  .chainsaw-dance,
  .crayon-shinchan-walk
) { display:none !important; }
.theme-q-icons-toggle {
  margin-top:6px;
  display:flex;
  align-items:center;
  gap:5px;
  color:var(--side-item);
  cursor:pointer;
  user-select:none;
}
.theme-q-icons-toggle input { accent-color:#e77d9b; }

/* ── Main ────────────────────────────────────────────── */
.main, .main-col { min-width: 0; display: flex; flex-direction: column; height: 100vh; height:100dvh; }
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
.topbar {
  display: flex; align-items: center; gap: 24px;
  padding: 16px 24px; background: var(--theme-topbar-bg); border-bottom: 1px solid var(--line);
}
.topbar h1 { font-size: 18px; margin: 0; font-weight: 700; }
.stat-strip {
  display:flex;
  gap:13px;
  margin-left:auto;
  padding:7px 12px;
  flex-wrap:wrap;
  border:1px solid color-mix(in srgb,var(--line) 72%,transparent);
  border-radius:14px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  /* 陰影基色寫死深色:用 var(--text) 調在深色主題會變白色光暈(24 主題 20 個中招) */
  box-shadow:0 4px 14px color-mix(in srgb,#1a2030 12%,transparent);
}
.stat-strip:empty { display:none; }
.stat { display: flex; flex-direction: column; line-height: 1.2; }
.stat b { font-size: 17px; }
.stat span { font-size: 11px; color: var(--muted); }
.topbar .stat b { color:var(--text); text-shadow:none; }
.topbar .stat span { color:var(--muted); }
.stat.warn b { color: var(--red); }
.stat.info b { color: var(--blue); }

/* 原版小圖：直接使用使用者提供的直式圖集，不重新描繪。 */
html[data-nav-icons="q"] :is(.nav-item > .ic,#navMisc > summary > .ic) {
  width:34px !important;
  height:34px !important;
  flex:0 0 34px !important;
  display:grid;
  place-items:center;
  overflow:visible;
  color:#8c5364 !important;
  font-size:0 !important;
  opacity:1;
  background-image:none !important;
  border-radius:10px;
  background-color:rgba(255,255,255,.78) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.5),0 2px 7px rgba(57,33,47,.14);
  filter:none !important;
}
html[data-nav-icons="q"] :is(.nav-item > .ic,#navMisc > summary > .ic)::before {
  content:"";
  display:block;
  width:30px;
  height:30px;
  border-radius:8px;
  background-image:url('/assets/original-nav-icons.png');
  background-size:52px 330px;
  background-repeat:no-repeat;
  background-position:50% var(--q-icon-y,28.6667%);
}
html[data-nav-icons="q"] [data-qicon="home"] { --q-icon-y:3%; }
html[data-nav-icons="q"] [data-qicon="chart"] { --q-icon-y:15.6667%; }
html[data-nav-icons="q"] [data-qicon="box"] { --q-icon-y:28.6667%; }
html[data-nav-icons="q"] [data-qicon="bulb"] { --q-icon-y:41.3333%; }
html[data-nav-icons="q"] [data-qicon="cart"] { --q-icon-y:54%; }
html[data-nav-icons="q"] [data-qicon="clipboard"] { --q-icon-y:66.6667%; }
html[data-nav-icons="q"] [data-qicon="shelf"] { --q-icon-y:80%; }
html[data-nav-icons="q"] [data-qicon="truck"] { --q-icon-y:93%; }
html[data-nav-icons="q"] .nav-item.active {
  color:#75475b !important;
  background:linear-gradient(90deg,#fff2f6,#f8dbe4) !important;
  border:1px solid rgba(225,133,160,.56) !important;
  box-shadow:0 4px 14px rgba(91,54,76,.2) !important;
}
html[data-nav-icons="q"] .nav-parent-link.section-active:not(.active) {
  color:#7e5869 !important;
  background:rgba(255,235,242,.76) !important;
  border:1px solid rgba(238,175,194,.34) !important;
}
html[data-nav-icons="q"] :is(.nav-item.active,.nav-parent-link.section-active) > .ic {
  color:#91546a !important;
  border-radius:11px;
  background-color:#fff8fa !important;
  box-shadow:0 0 0 1px rgba(221,129,156,.34),0 3px 8px rgba(94,49,72,.13);
}
html[data-nav-icons="q"] .nav-group:not([open]) summary .ic { transform:none; }
html[data-nav-icons="q"] .nav.is-filtering [draggable="false"] { cursor:pointer; }

/* ── Toolbar ─────────────────────────────────────────── */
.toolbar {
  padding: 14px 24px; background: var(--theme-toolbar-bg);
  border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px;
}
.search { display: flex; gap: 8px; max-width: 520px; }
.search input { flex: 1; }
.filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
input[type="search"], select {
  height: 38px; padding: 0 12px; border: 1px solid var(--line-strong);
  border-radius: var(--theme-control-radius); background: var(--surface); color: var(--text); font-size: 14px; font-family: inherit;
  outline: none; transition: border-color .12s, box-shadow .12s;
}
input[type="search"]:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.chk { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; cursor: pointer; }
.btn {
  height: 38px; padding: 0 16px; border-radius: var(--theme-control-radius); border: 1px solid transparent;
  font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit;
  transition: background .12s, border-color .12s, color .12s;
}
.btn.primary { background: var(--accent); color: #fff; box-shadow:var(--theme-action-shadow); }
.btn.primary:hover { background: var(--accent-strong); }
.btn.ghost { background: var(--surface); border-color: var(--line-strong); color: var(--muted); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ── Grid ────────────────────────────────────────────── */
.grid-wrap { flex: 1; overflow: auto; padding: 0 0 8px; }
.grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.grid thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--theme-table-head-bg); color: var(--muted); font-weight: 500;
  text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.grid th.num, .grid td.num { text-align: right; }
.col-img { width: 92px; }
.col-price { width: 76px; }

.item-row > td {
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 10px 12px; vertical-align: middle;
}
.item-row:hover > td { background: var(--theme-row-hover-bg); }
.item-row.expanded > td { background: var(--accent-weak); }

.thumb {
  width: 80px; height: 80px; border-radius: 8px; object-fit: cover;
  background: #eee url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80"><rect width="80" height="80" fill="%23eef0f6"/></svg>') center/cover;
  border: 1px solid var(--line);
}
.iname { display: flex; flex-direction: column; gap: 3px; max-width: 360px; }
.iname .brand-tag {
  align-self: flex-start; font-size: 11px; color: var(--accent);
  background: var(--accent-weak); padding: 1px 7px; border-radius: 6px; font-weight: 500;
}
.iname .title { line-height: 1.35; color: var(--text); }
.iname .title:hover { color: var(--accent); cursor: pointer; }
.spec-count {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  color: var(--muted); user-select: none;
}
.spec-count .chev { transition: transform .15s; display: inline-block; }
.item-row.expanded .spec-count .chev { transform: rotate(90deg); }
.spec-count b { color: var(--text); }

/* variant sub-rows */
.variant-row > td {
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  padding: 8px 12px; font-size: 12.5px; color: var(--text);
}
.variant-row:hover > td { background: var(--surface-2); }
.variant-row .vname { color: var(--text); }
.variant-row .code { font-variant-numeric: tabular-nums; color: var(--text); }
.variant-row .pos { color: var(--muted); font-size: 11.5px; }
.num.pos-val { font-variant-numeric: tabular-nums; }
.zero { color: var(--faint); }
.avail-low { color: var(--red); font-weight: 700; }
.avail-ok { color: var(--green); font-weight: 700; }

.badge {
  display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 6px; font-weight: 500;
}
.badge.normal { color: var(--green); background: var(--green-weak); }
.badge.stop { color: var(--red); background: var(--red-weak); }
.badge.nosale { color: var(--muted); background: #eceef4; }
.badge.pre { color: var(--amber); background: var(--amber-weak); }
/* 淘寶補貨監控回推徽章(2026-08-03):固定色底白字,深淺色模式皆可讀;可點開詳情 */
.badge.rw-watch { color: #fff; background: #5b4bd8; cursor: pointer; }
.badge.rw-done { color: #fff; background: #2e9e5b; cursor: pointer; }
.edit-link { color: var(--accent); cursor: pointer; font-size: 12px; }
.edit-link:hover { text-decoration: underline; }

.empty { text-align: center; color: var(--muted); padding: 48px; }

/* ── Pager ───────────────────────────────────────────── */
.pager {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px; background: var(--surface); border-top: 1px solid var(--line);
}
#pageInfo { color: var(--muted); font-size: 13px; }
.pager-btns { display: flex; gap: 8px; }

/* ── Drawer ──────────────────────────────────────────── */
.drawer { position: fixed; inset: 0; background: rgba(28,26,55,.32); display: flex; justify-content: flex-end; z-index: 50; }
.drawer-panel {
  width: 420px; max-width: 92vw; background: var(--surface); height: 100%;
  display: flex; flex-direction: column; box-shadow: -8px 0 30px rgba(20,20,50,.18);
  animation: slidein .18s ease; border-top:3px solid var(--theme-panel-edge);
}
@keyframes slidein { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }
/* 置中彈窗模式(openDrawer modal:true;2026-07-22 編輯商品改彈窗)— 其餘行為與抽屜完全相同。
   用 .drawer.center 提高優先度,避免後面的 .drawer-panel.wide 蓋掉寬高設定 */
.drawer.center { justify-content: center; align-items: center; }
.drawer.center .drawer-panel {
  /* 2026-08-20 user:入庫作業點商品標題開編輯器,更新採購網址後要拖曳才看得完 → 加寬 */
  width: min(1440px, 96vw); height: auto; max-height: 92vh; border-radius: 14px;
  box-shadow: 0 18px 60px rgba(20,20,50,.28); animation: popin .16s ease;
}
@keyframes popin { from { transform: scale(.97); opacity: .5; } to { transform: none; opacity: 1; } }
.drawer-head { display: flex; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); background:var(--theme-overlay-head-bg); }
.drawer-head h3 { margin: 0; font-size: 16px; }
.icon-btn { margin-left: auto; border: none; background: none; font-size: 16px; cursor: pointer; color: var(--muted); }
.drawer-body { padding: 20px; overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field label { font-size: 12px; color: var(--muted); }
.field input, .field select {
  width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--line-strong);
  border-radius: var(--theme-control-radius); font-size: 14px; font-family: inherit;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.drawer-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 20px; border-top: 1px solid var(--line); background:var(--theme-toolbar-bg); }
.drawer-meta { font-size: 12px; color: var(--muted); line-height: 1.6; }

/* ── Toast ───────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--theme-toast-bg); color: #fff; padding: 11px 20px; border-radius: var(--theme-control-radius);
  box-shadow: var(--shadow); z-index: 80; font-size: 14px;
}
.toast.err { background: var(--red); }
.toast-tr {
  position: fixed; top: 20px; right: 20px;
  background: var(--theme-toast-bg); color: #fff; padding: 11px 18px; border-radius: var(--theme-control-radius);
  box-shadow: var(--shadow); z-index: 12001; font-size: 13.5px; max-width: 380px; line-height: 1.5;
}
.toast-tr.err { background: var(--red); }

@media (max-width: 860px) {
  body { grid-template-columns: 64px 1fr; }
  .brand-name, .nav-item span:not(.ic), .nav-item[data-soon]::after, .sidebar-foot { display: none; }
  .nav-search-wrap, .nav-search-empty { display:none !important; }
  .desktop-note, .theme-options { display:none !important; }
  .conan-mascot { display: none !important; }
  .custom-theme-mascot { display: none !important; }
  .studio-ug-mascot, .chiikawa-mascot, .kuromi-mascot, .miffy-mascot, .kanahei-mascot, .kanahei-bakery-mascot, .spongebob-mascot, .chainsaw-mascot,
  .pretty-rhythm-mascot, .pingu-mascot, .pikmin-mascot, .crayon-shinchan-mascot { display: none !important; }
  .agnes-mascot { display: none !important; }
  .studio-ug-title-mascot, .studio-ug-page-friend, .theme-page-watermark, .chainsaw-dance { display: none !important; }
  .crayon-shinchan-walk { display:none !important; }
  .col-price, .col-pos, .col-sku { display: none; }
}

/* ════════ v0.2 shared kit ════════ */

/* sidebar extras */
.user-chip { color: var(--side-item); font-size: 12px; margin-bottom: 4px; }
.logout-link { color: var(--side-link); font-size: 12px; cursor: pointer; }
.logout-link:hover { color: #fff; text-decoration: underline; }
.nav { overflow-y: auto; min-height: 0; flex:1 1 auto; }
.nav::-webkit-scrollbar { width: 4px; }
.nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

/* Browser zoom reduces the CSS viewport height. Keep the footer controls inside
   the sidebar and let the decorative mascot yield space to the scrollable nav. */
.sidebar-bottom > :is(
  .conan-mascot,.studio-ug-mascot,.chiikawa-mascot,.kuromi-mascot,.miffy-mascot,
  .kanahei-mascot,.kanahei-bakery-mascot,.spongebob-mascot,.chainsaw-mascot,
  .pretty-rhythm-mascot,.pingu-mascot,.pikmin-mascot,.crayon-shinchan-mascot,.agnes-mascot
) {
  max-width:calc(100% - 2px);
  object-fit:contain;
}
@media (min-width:861px) and (max-height:760px) {
  .sidebar { padding-top:10px; padding-bottom:10px; }
  .brand { padding-bottom:6px; }
  .nav-search-wrap { margin-bottom:6px; }
  .nav-item { padding-top:7px; padding-bottom:7px; }
  .desktop-note { margin:2px 8px 5px; }
  .desktop-note input { height:30px; }
  .theme-options { margin-top:3px; }
  .theme-options summary { min-height:23px; padding-block:1px; }
  .sidebar-foot { padding-top:4px; }
  .sidebar-bottom > :is(
    .conan-mascot,.studio-ug-mascot,.chiikawa-mascot,.kuromi-mascot,.miffy-mascot,
    .kanahei-mascot,.kanahei-bakery-mascot,.spongebob-mascot,.chainsaw-mascot,
    .pretty-rhythm-mascot,.pingu-mascot,.pikmin-mascot,.crayon-shinchan-mascot,.agnes-mascot
  ) {
    max-width:calc(100% - 8px);
    max-height:clamp(84px,16vh,150px);
    align-self:center;
    margin:2px auto -4px;
  }
}
@media (min-width:861px) and (max-height:480px) {
  .sidebar-bottom { max-height:60vh; overflow-y:auto; scrollbar-width:thin; }
  .sidebar-bottom > :is(
    .conan-mascot,.studio-ug-mascot,.chiikawa-mascot,.kuromi-mascot,.miffy-mascot,
    .kanahei-mascot,.kanahei-bakery-mascot,.spongebob-mascot,.chainsaw-mascot,
    .pretty-rhythm-mascot,.pingu-mascot,.pikmin-mascot,.crayon-shinchan-mascot,.agnes-mascot
  ) { display:none !important; }
}

/* login — 版面樣式全部在檔案末端的「登入頁」區塊(必須排在主題規則之後才蓋得過) */

/* panels / toolbar / tabs */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--theme-panel-radius);
  padding: 16px 18px; margin: 12px 24px;
  /* view 是 flex 直欄:overflow:hidden 的面板最小高會被算 0 → 長單據被壓扁、滾動條消失(採購單詳情案)。
     一律不縮;要「內部滾動」的面板自己 inline 宣告 flex:1;min-height:0;overflow:auto(智能採購那種) */
  flex-shrink: 0; box-shadow:inset 3px 0 0 var(--theme-panel-edge),var(--theme-card-shadow); }
.panel.flush { padding: 0; overflow: hidden; }
.toolbar-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 24px; background: var(--theme-toolbar-bg); border-bottom: 1px solid var(--line); }
.toolbar-line input[type="text"], .toolbar-line input[type="search"], .toolbar-line input[type="date"],
.toolbar-line input[type="number"], .toolbar-line select {
  height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--theme-control-radius);
  font-size: 13.5px; font-family: inherit; background: var(--surface); }
.spacer { flex: 1; }
.tabs { display: flex; gap: 4px; padding: 10px 24px 0; background: var(--theme-toolbar-bg); flex-wrap: wrap; }
.tab { padding: 8px 16px; border-radius: var(--theme-control-radius) var(--theme-control-radius) 0 0; cursor: pointer; color: var(--muted);
  font-size: 13.5px; border: 1px solid transparent; border-bottom: none; user-select: none; }
.tab:hover { color: var(--accent); }
.tab.active { background: var(--surface); color: var(--accent); font-weight: 600;
  border-color: var(--line); box-shadow:inset 0 3px 0 var(--theme-panel-edge); }
.tab .cnt { font-size: 11px; background: var(--accent-weak); color: var(--accent);
  border-radius: 8px; padding: 0 6px; margin-left: 5px; }

/* standard table */
.table-std { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.table-std thead th { position: sticky; top: 0; z-index: 2; background: var(--theme-table-head-bg);
  color: var(--muted); font-weight: 500; text-align: left; padding: 10px 12px;
  border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.table-std tbody td { background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 9px 12px; vertical-align: middle; }
.table-std tbody tr:hover td { background: var(--theme-row-hover-bg); }
.table-std tbody tr.clickable { cursor: pointer; }
.table-std .num { text-align: right; font-variant-numeric: tabular-nums; }
.table-std tfoot td { padding: 10px 12px; font-weight: 600; border-top: 2px solid var(--line-strong); }

/* status pills (0草稿 1進行 2部分 3完成 9取消) */
.pill { display: inline-block; font-size: 11.5px; padding: 2px 9px; border-radius: 999px; font-weight: 500; }
.pill.s0 { background: #eceef4; color: #5a5f73; }
.pill.s1 { background: #e2edff; color: #2f6fd6; }
.pill.s2 { background: var(--amber-weak); color: var(--amber); }
.pill.s3 { background: var(--green-weak); color: var(--green); }
.pill.s9 { background: var(--red-weak); color: var(--red); }

/* KPI cards */
.kpi-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 24px 0; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--theme-panel-radius);
  padding: 12px 18px; min-width: 130px; box-shadow:inset 3px 0 0 var(--theme-panel-edge),var(--theme-card-shadow); }
.kpi b { font-size: 20px; display: block; }
.kpi span { font-size: 12px; color: var(--muted); }
.kpi.warn b { color: var(--red); }
.kpi.good b { color: var(--green); }
.kpi.info b { color: var(--blue); }

/* buttons */
.btn.small { height: 30px; padding: 0 11px; font-size: 12.5px; }
.btn.danger { background: var(--red); color: #fff; }
.btn.danger:hover { background: #b93c3c; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* drawer wide variant */
.drawer-panel.wide { width: 92vw; max-width: 1400px; }

/* modal confirm */
.modal-mask { position: fixed; inset: 0; background: rgba(28,26,55,.4); z-index: 90;
  display: grid; place-items: center; }
.modal-box { background: var(--surface); border-radius: 14px; padding: 22px 24px; width: 360px;
  max-width: 90vw; box-shadow: var(--shadow); border-top:3px solid var(--theme-panel-edge); }
.modal-msg { font-size: 14.5px; line-height: 1.6; margin-bottom: 18px; }
.modal-btns { display: flex; justify-content: flex-end; gap: 8px; }

/* inline editable qty input in tables */
.qty-in { width: 76px; height: 32px; padding: 0 8px; border: 1px solid var(--line-strong);
  border-radius: var(--theme-control-radius); text-align: right; font-size: 13px; font-family: inherit; }
.qty-in:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-weak); }
/* 深色模式白底元凶:沒設背景的 input/textarea 吃 UA 預設白 → 全域跟主題走 */
input, select, textarea { background-color: var(--surface); color: var(--text); }
.diff-pos { color: var(--green); font-weight: 700; }
.diff-neg { color: var(--red); font-weight: 700; }

/* doc page header */
.doc-head { display: flex; align-items: center; gap: 14px; padding: 14px 24px;
  background: var(--surface); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.doc-head h2 { margin: 0; font-size: 17px; }
.doc-meta { color: var(--muted); font-size: 12.5px; }

/* print — visibility trick so nested .print-area still shows
   ⚠ visible 規則帶 !important:面單列印頁的 #shipPrintCss 用「body * 隱藏 !important」,
   若殘留(或未來有同類樣式),沒有 !important 的 .print-area 會被蓋掉 → 檢貨單印出全白(2026-07-12 實測) */
@media print {
  body * { visibility: hidden; }
  .print-area, .print-area * { visibility: visible !important; }
  .print-area { position: absolute; left: 0; top: 0; width: 100%; background: #fff; color: #000; }
  body { display: block; background: #fff; }
  /* 側欄與主欄的 100vh 是「隱形但佔位」:不收掉會在單據後面多印空白頁(2026-07-12 headless 實測) */
  .sidebar { display: none !important; }
  .main-col { height: auto !important; }
}


/* 採購三階段器(2026-07-24 學 ezPOS:採購單 → 入庫單 → 已結案) */
.po-steps { display: flex; align-items: center; gap: 12px; padding: 12px 18px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.po-step { display: flex; align-items: center; gap: 8px; color: var(--faint); }
.po-step b { font-size: 14px; color: inherit; display: block; }
.po-step small { display: block; font-weight: 400; font-size: 11.5px; }
.po-step .dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; flex: none; }
.po-step.cur { color: var(--accent); }
.po-step.cur .dot { border-color: var(--accent); color: var(--accent); }
.po-step.done { color: var(--green); }
.po-step.done .dot { background: var(--green); border-color: var(--green); color: #fff; }
.po-line { flex: 1; max-width: 180px; height: 2px; background: var(--line-strong); border-radius: 1px; }
.po-line.done { background: var(--green); }

/* 快速新增商品框 + 手動選擇三欄選取器(2026-07-24 仿 ezPOS) */
.qadd-box { border: 2px solid var(--accent-weak); background: linear-gradient(0deg, var(--surface-2), var(--accent-weak)); border-radius: 12px; padding: 10px 14px; }
.qadd-head { font-weight: 700; color: var(--accent); font-size: 13.5px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.qadd-hint { color: var(--muted); font-size: 12px; margin-top: 6px; }
.ipk-col { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); min-height: 0; }
.ipk-item { border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; margin-bottom: 6px; cursor: pointer; background: var(--surface); }
.ipk-item:hover { border-color: var(--accent); background: var(--accent-weak); }
.ipk-focus { border: 1px solid var(--accent-weak); background: var(--surface); border-radius: 10px; padding: 10px 12px; }
.ipk-spec { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; cursor: pointer; background: var(--surface); }
.ipk-spec.on { border-color: var(--accent); background: var(--accent-weak); }
.ipk-spec input { margin-top: 3px; }
.ipk-chip { display: inline-block; background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; font-size: 11px; padding: 1px 7px; color: var(--muted); }
.ipk-chip.bad { background: var(--red-weak); color: var(--red); border-color: #f0c4c4; font-weight: 700; }
.ipk-selrow { display: flex; gap: 6px; align-items: center; border-bottom: 1px solid var(--line); padding: 6px 2px; font-size: 12.5px; }

/* 訂單內頁:商品標題連蝦皮後台(2026-07-24) */
.ord-title-link { color: var(--accent); text-decoration: none; }
.ord-title-link:hover { text-decoration: underline; }
@media print { .ord-title-link { color: inherit; } }

/* ═══ 主題皮膚(2026-07-24):html[data-theme] 覆寫 CSS 變數,側欄 🎨 切換,存 localStorage ═══ */
/* 名偵探柯南:深海軍藍偵探風,領結紅作為主要操作色。 */
html[data-theme="conan"] {
  --character-nav-icon:url('/assets/conan-nav-characters.webp');
  --bg:#eef3f8; --surface:#ffffff; --surface-2:#f6f9fc; --line:#dce5ef; --line-strong:#becddd;
  --text:#15263b; --muted:#617389; --faint:#91a0b1;
  --accent:#d83a43; --accent-weak:#fbeaec; --accent-strong:#af202a;
  --green:#17845f; --green-weak:#e3f5ee; --amber:#b87914; --amber-weak:#fff2d8;
  --red:#d83a43; --red-weak:#fbeaec; --blue:#1d5fa6;
  --side-bg1:#12355f; --side-bg2:#071b35; --side-text:#f4f8fd; --side-item:#c8d7e8;
  --side-muted:#91a8c1; --side-link:#b4c9de; --side-shadow:rgba(216,58,67,.42);
  --shadow:0 1px 2px rgba(7,27,53,.05),0 10px 28px rgba(18,53,95,.09);
  --theme-panel-edge:#d83a43; --theme-control-radius:7px; --theme-panel-radius:10px;
}
html[data-theme="conan"] .sidebar {
  background:
    radial-gradient(circle at 16% 10%, rgba(74,137,204,.22), transparent 31%),
    linear-gradient(180deg, var(--side-bg1) 0%, var(--side-bg2) 100%);
}
html[data-theme="conan"] .logo { box-shadow:0 0 0 2px rgba(255,255,255,.16); }
html[data-theme="conan"] .topbar { border-bottom:2px solid rgba(216,58,67,.32); }
html[data-theme="conan"] .conan-mascot {
  display:block;
  width:192px;
  height:240px;
  max-width:100%;
  object-fit:contain;
  object-position:center bottom;
  align-self:center;
  flex:0 0 auto;
  margin:6px 0 -10px;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.34));
}
html[data-theme="conan"] .theme-page-watermark {
  display:block;
  position:fixed;
  right:10px;
  bottom:0;
  width:min(780px,58vw);
  height:min(440px,48vh);
  z-index:0;
  pointer-events:none;
  user-select:none;
  opacity:.065;
  background:var(--theme-scene-watermark) var(--theme-scene-watermark-position,right bottom)/var(--theme-scene-watermark-size,contain) no-repeat;
}
/* Studio UG:台北活動海報的亮藍底、粉紅與橘黃角色色票。 */
html[data-theme="studio-ug"] {
  --character-nav-icon:url('/assets/studio-ug-nav-characters.webp');
  --bg:#f1f9fd; --surface:#ffffff; --surface-2:#f7fcff; --line:#d7eaf4; --line-strong:#b9d9e9;
  --text:#183247; --muted:#678294; --faint:#95aebb;
  --accent:#0c6cb1; --accent-weak:#e7f2fa; --accent-strong:#075a96;
  --green:#17845f; --green-weak:#e5f6ef; --amber:#e98314; --amber-weak:#fff0d9;
  --red:#df5f83; --red-weak:#fde9ef; --blue:#0c6cb1;
  --side-bg1:#095283; --side-bg2:#095283; --side-text:#ffffff; --side-item:#e6f5fc;
  --side-muted:#b7dceb; --side-link:#d4edf7; --side-shadow:rgba(243,155,190,.48);
  --shadow:0 1px 2px rgba(12,108,177,.05),0 10px 26px rgba(12,108,177,.09);
  --theme-topbar-bg:
    radial-gradient(circle at 34% 25%,rgba(243,155,190,.22) 0 4px,transparent 5px),
    radial-gradient(circle at 42% 72%,rgba(244,166,77,.18) 0 3px,transparent 4px),
    linear-gradient(90deg,#fff,#f1f9fd);
  --theme-toolbar-bg:linear-gradient(90deg,#f4fbff,#fff5f9);
  --theme-table-head-bg:#eaf7fd; --theme-row-hover-bg:#fff1f6;
  --theme-overlay-head-bg:linear-gradient(90deg,#eaf7fd,#fff1f6);
  --theme-panel-edge:#f39bbe; --theme-control-radius:13px; --theme-panel-radius:16px;
  --theme-action-shadow:0 3px 0 #f39bbe; --theme-toast-bg:#0c6cb1;
}
html[data-theme="studio-ug"] .sidebar {
  background:#095283;
}
html[data-theme="studio-ug"] .logo { background:#f39bbe; color:#173347; box-shadow:0 0 0 2px rgba(255,255,255,.3); }
html[data-theme="studio-ug"] .nav-item.active { background:#f39bbe; color:#173347; }
html[data-theme="studio-ug"] .topbar { border-bottom:3px solid #f39bbe; }
html[data-theme="studio-ug"] .panel { border-color:#cce5f1; }

/* 頁面標題與右下角朋友保留原本依父分類切換。 */
html[data-theme="studio-ug"][data-nav-section="items"] { --ug-title:url('/assets/studio-ug-cat.webp'); --ug-friend:url('/assets/studio-ug-skeleton.webp'); }
html[data-theme="studio-ug"][data-nav-section="purchases"] { --ug-title:url('/assets/studio-ug-rabbit.webp'); --ug-friend:url('/assets/studio-ug-mouse.webp'); }
html[data-theme="studio-ug"][data-nav-section="stocktake"] { --ug-title:url('/assets/studio-ug-panda.webp'); --ug-friend:url('/assets/studio-ug-cat.webp'); }
html[data-theme="studio-ug"][data-nav-section="orders"] { --ug-title:url('/assets/studio-ug-mouse.webp'); --ug-friend:url('/assets/studio-ug-panda.webp'); }
html[data-theme="studio-ug"][data-nav-section="misc"] { --ug-title:url('/assets/studio-ug-skeleton.webp'); --ug-friend:url('/assets/studio-ug-rabbit.webp'); }
html[data-theme="studio-ug"] .studio-ug-title-mascot {
  display:block;
  width:44px;
  height:44px;
  flex:0 0 44px;
  background:var(--ug-title) center/contain no-repeat;
  filter:drop-shadow(0 3px 3px rgba(20,54,77,.18));
}
html[data-theme="studio-ug"] .studio-ug-page-friend {
  display:block;
  position:fixed;
  right:18px;
  bottom:8px;
  width:132px;
  height:148px;
  z-index:5;
  pointer-events:none;
  opacity:.18;
  background:var(--ug-friend) right bottom/contain no-repeat;
  filter:drop-shadow(0 5px 7px rgba(20,54,77,.16));
}
html[data-theme="studio-ug"] .studio-ug-mascot {
  display:block;
  width:190px;
  height:auto;
  max-width:100%;
  align-self:flex-start;
  flex:0 0 auto;
  margin:8px 0 -10px 5px;
  border-radius:14px;
  clip-path:inset(0 round 14px);
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.24));
}
html[data-theme="studio-ug"] .theme-page-watermark {
  display:block;
  position:fixed;
  right:86px;
  bottom:0;
  width:min(610px,48vw);
  height:min(390px,42vh);
  z-index:0;
  pointer-events:none;
  user-select:none;
  opacity:.05;
  background:var(--theme-scene-watermark) var(--theme-scene-watermark-position,right bottom)/var(--theme-scene-watermark-size,contain) no-repeat;
}
/* 吉伊卡哇:奶油白、晴空藍與蜂蜜黃；三人組留在左下角，頁面帶淡淡任務小隊浮水印。 */
html[data-theme="chiikawa"] {
  --character-nav-icon:url('/assets/chiikawa-nav-characters.webp');
  --bg:#fff9ed; --surface:#ffffff; --surface-2:#fffdf7; --line:#eadfca; --line-strong:#d8c8aa;
  --text:#334052; --muted:#718093; --faint:#a5afba;
  --accent:#5ca9d6; --accent-weak:#e4f3fb; --accent-strong:#347fa8;
  --green:#56a66f; --green-weak:#e8f7eb; --amber:#df9b24; --amber-weak:#fff0c9;
  --red:#e87788; --red-weak:#fde9ed; --blue:#5ca9d6;
  --side-bg1:#5c9fc7; --side-bg2:#347a9f; --side-text:#ffffff; --side-item:#e8f7ff;
  --side-muted:#c4e4f2; --side-link:#d7eff8; --side-shadow:rgba(255,204,91,.42);
  --shadow:0 1px 2px rgba(52,127,168,.05),0 10px 26px rgba(52,127,168,.10);
  --theme-panel-edge:#ffd36a; --theme-control-radius:15px; --theme-panel-radius:18px;
}
html[data-theme="chiikawa"] .sidebar {
  background:
    radial-gradient(circle at 22% 12%, rgba(255,221,119,.28), transparent 25%),
    linear-gradient(180deg,var(--side-bg1),var(--side-bg2));
}
html[data-theme="chiikawa"] .logo,
html[data-theme="chiikawa"] .nav-item.active { background:#ffd36a; color:#354052; }
html[data-theme="chiikawa"] .topbar { border-bottom:3px solid #ffd36a; }

/* 庫洛米:薰衣草紫、惡作劇粉與黑莓側欄；Baku 抱著神祕包裹形成小劇情。 */
html[data-theme="kuromi"] {
  --character-nav-icon:url('/assets/kuromi-nav-characters.webp');
  --bg:#faf5ff; --surface:#ffffff; --surface-2:#fdf9ff; --line:#eadcf1; --line-strong:#d8c4e3;
  --text:#34283b; --muted:#7f6e88; --faint:#aa98b2;
  --accent:#d65e9e; --accent-weak:#f9e4f0; --accent-strong:#ad3f7a;
  --green:#418f72; --green-weak:#e5f5ee; --amber:#bc7b22; --amber-weak:#faefd9;
  --red:#d54f74; --red-weak:#fbe5ec; --blue:#8065c7;
  --side-bg1:#493553; --side-bg2:#261d2d; --side-text:#fff5fb; --side-item:#ead9ef;
  --side-muted:#ae99b5; --side-link:#d7badf; --side-shadow:rgba(214,94,158,.48);
  --shadow:0 1px 2px rgba(73,53,83,.06),0 10px 28px rgba(73,53,83,.12);
  --theme-panel-edge:#e78bb9; --theme-control-radius:12px; --theme-panel-radius:16px;
}
html[data-theme="kuromi"] .sidebar {
  background:
    radial-gradient(circle at 16% 10%, rgba(214,94,158,.24), transparent 29%),
    linear-gradient(180deg,var(--side-bg1),var(--side-bg2));
}
html[data-theme="kuromi"] .logo { background:#f18cbd; color:#2f2435; }
html[data-theme="kuromi"] .topbar { border-bottom:3px solid #e78bb9; }

html[data-theme="chiikawa"] .chiikawa-mascot,
html[data-theme="kuromi"] .kuromi-mascot {
  display:block;
  width:194px;
  height:208px;
  max-width:100%;
  object-fit:contain;
  object-position:left bottom;
  align-self:flex-start;
  flex:0 0 auto;
  margin:8px 0 -10px 3px;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 9px 11px rgba(0,0,0,.26));
}
html[data-theme="chiikawa"] .theme-page-watermark,
html[data-theme="kuromi"] .theme-page-watermark {
  display:block;
  position:fixed;
  right:26px;
  bottom:10px;
  width:310px;
  height:310px;
  z-index:5;
  pointer-events:none;
  user-select:none;
  opacity:.065;
  background-position:var(--theme-scene-watermark-position,right bottom);
  background-repeat:no-repeat;
  background-size:var(--theme-scene-watermark-size,contain);
}
html[data-theme="chiikawa"] .theme-page-watermark { background-image:url('/assets/chiikawa-scene.webp'); }
html[data-theme="kuromi"] .theme-page-watermark { background-image:url('/assets/kuromi-scene.webp'); }
html[data-theme="chiikawa"] .theme-page-watermark,
html[data-theme="kuromi"] .theme-page-watermark { background-image:var(--theme-scene-watermark); }

/* Kanahei: soft lavender header, blush surfaces, stars and parcel details from the approved mockup. */
html[data-theme="kanahei"] {
  --character-nav-icon:url('/assets/kanahei-nav-characters.webp');
  --bg:#fff8fa; --surface:#fffefe; --surface-2:#fff7fa; --line:#f2dce5; --line-strong:#e5c4d3;
  --text:#493b50; --muted:#846f89; --faint:#b39dac;
  --accent:#9b79cf; --accent-weak:#f0e9fb; --accent-strong:#7e5bb8;
  --green:#2aa79b; --green-weak:#dff6f3; --amber:#d68a39; --amber-weak:#fff0df;
  --red:#e56688; --red-weak:#fde7ee; --blue:#6c77c8;
  --side-bg1:#b49bd9; --side-bg2:#8f76bd; --side-text:#fffaff; --side-item:#fff5fb;
  --side-muted:#eadff4; --side-link:#f7edf9; --side-shadow:rgba(131,91,184,.34);
  --radius:15px;
  --shadow:0 1px 2px rgba(117,77,123,.045),0 10px 28px rgba(142,94,132,.09);
  --theme-table-head-bg:#fff5f8;
  --theme-panel-edge:#f2a8bf; --theme-control-radius:16px; --theme-panel-radius:18px;
}
html[data-theme="kanahei"] body {
  font-family:"Arial Rounded MT Bold","Noto Sans TC","Microsoft JhengHei",sans-serif;
  letter-spacing:.008em;
}
html[data-theme="kanahei"] .sidebar {
  background:
    radial-gradient(circle at 22px 82px,rgba(255,239,177,.9) 0 2px,transparent 3px),
    radial-gradient(circle at 180px 132px,rgba(255,218,231,.72) 0 3px,transparent 4px),
    radial-gradient(circle at 38px 46%,rgba(255,255,255,.32) 0 2px,transparent 3px),
    linear-gradient(180deg,var(--side-bg1),var(--side-bg2));
}
html[data-theme="kanahei"] .topbar {
  color:#fff;
  border-bottom:3px solid #f3bfd1;
  background:
    radial-gradient(circle at 29% 50%,rgba(255,240,176,.95) 0 3px,transparent 4px),
    radial-gradient(circle at 74% 36%,rgba(255,255,255,.55) 0 2px,transparent 3px),
    linear-gradient(90deg,#aa8bd2,#8e74bb);
}
html[data-theme="kanahei"] .topbar a { color:#654493 !important; background:#fff0f5 !important; border-color:#f2cad9 !important; }
html[data-theme="kanahei"] .topbar .stat-strip {
  gap:13px;
  padding:7px 12px;
  border:1px solid rgba(255,255,255,.58);
  border-radius:14px;
  background:rgba(255,255,255,.9);
  box-shadow:0 4px 14px rgba(69,41,92,.16);
}
html[data-theme="kanahei"] .topbar .stat b { color:#5a416d; text-shadow:none; }
html[data-theme="kanahei"] .topbar .stat span { color:#725f7b; }
html[data-theme="kanahei"] .topbar .stat.info b { color:#4057a6; }
html[data-theme="kanahei"] .topbar .stat.warn b { color:#ba3f64; }
html[data-theme="kanahei"] .logo,
html[data-theme="kanahei"] .nav-item.active { background:#f7c7d8; color:#6b466e; }
html[data-theme="kanahei"] :is(.btn,.pill,.badge,input,select) { border-radius:999px; }
html[data-theme="kanahei"] .panel { box-shadow:inset 3px 0 0 var(--theme-panel-edge),var(--shadow); }
html[data-theme="kanahei"] .toolbar-line { box-shadow:var(--shadow); }
html[data-theme="kanahei"] .kanahei-mascot {
  display:block;
  width:204px;
  height:152px;
  max-width:100%;
  object-fit:contain;
  object-position:left bottom;
  align-self:flex-start;
  flex:0 0 auto;
  margin:5px 0 -8px 1px;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 8px 10px rgba(81,48,78,.22));
}
html[data-theme="kanahei"] .theme-page-watermark {
  display:block;
  position:fixed;
  right:18px;
  bottom:2px;
  width:390px;
  height:300px;
  z-index:0;
  pointer-events:none;
  user-select:none;
  opacity:.052;
  background:var(--theme-scene-watermark) var(--theme-scene-watermark-position,right bottom)/var(--theme-scene-watermark-size,contain) no-repeat;
}

/* Kanahei bakery: the supplied cream, mint and cocoa-brown bread artwork. */
html[data-theme="kanahei-bakery"] {
  --character-nav-icon:url('/assets/kanahei-bakery-nav-characters.webp');
  --bg:#fffaf4; --surface:#fffdf9; --surface-2:#fbf4eb; --line:#eadfd2; --line-strong:#d7c4b3;
  --text:#5c392d; --muted:#85695d; --faint:#b39a8b;
  --accent:#9fc4b4; --accent-weak:#e4f0e9; --accent-strong:#628f7d;
  --green:#5d9b80; --green-weak:#e4f2ea; --amber:#c88947; --amber-weak:#f9e8d3;
  --red:#cf6f72; --red-weak:#fae8e5; --blue:#709b91;
  --side-bg1:#fffaf4; --side-bg2:#d4e4d7; --side-text:#5c392d; --side-item:#6d4b3e;
  --side-muted:#9b8173; --side-link:#7d5e50; --side-shadow:rgba(103,75,55,.17);
  --radius:14px;
  --shadow:0 1px 2px rgba(93,57,44,.045),0 10px 28px rgba(132,98,76,.09);
  --theme-table-head-bg:#faf1e7;
  --theme-panel-edge:#8eb8a5; --theme-control-radius:14px; --theme-panel-radius:18px;
}
html[data-theme="kanahei-bakery"] body {
  font-family:"Arial Rounded MT Bold","Noto Sans TC","Microsoft JhengHei",sans-serif;
  letter-spacing:.008em;
  background:var(--bg);
}
html[data-theme="kanahei-bakery"] .sidebar {
  border-right:1px solid #e4d5c7;
  background:
    linear-gradient(180deg,rgba(255,250,244,.97) 0 67%,rgba(213,229,217,.98) 100%),
    url('/assets/kanahei-bakery-pattern.webp') center/300px repeat;
}
html[data-theme="kanahei-bakery"] .brand { color:#684536; }
html[data-theme="kanahei-bakery"] .logo { background:#c88745; color:#fffaf4; box-shadow:0 3px 0 #a66f3c; }
html[data-theme="kanahei-bakery"] .nav-item:hover { color:#59392d; background:rgba(225,197,165,.28); }
html[data-theme="kanahei-bakery"] .nav-item.active,
html[data-theme="kanahei-bakery"] .nav-parent-link.section-active:not(.active) {
  color:#55362c;
  border:1px solid rgba(106,143,126,.36);
  background:linear-gradient(90deg,#e8f1ea,#cfe1d4);
  box-shadow:0 4px 13px rgba(93,115,94,.15);
}
html[data-theme="kanahei-bakery"] .nav-search-wrap input[type="search"] {
  border-color:#e4d3c0;
  color:#5c392d;
  background:rgba(255,252,247,.96);
}
html[data-theme="kanahei-bakery"] .nav-search-glyph { color:#a46c43; }
html[data-theme="kanahei-bakery"] .topbar {
  position:relative;
  overflow:hidden;
  color:#5c392d;
  border-bottom:3px solid #a8cbbd;
  background:linear-gradient(90deg,#fffaf4 0%,#fbf1e6 72%,#dce9df 100%);
}
html[data-theme="kanahei-bakery"] .topbar::after {
  content:"";
  position:absolute;
  right:205px;
  top:50%;
  width:224px;
  height:56px;
  translate:0 -50%;
  opacity:.17;
  pointer-events:none;
  background:url('/assets/kanahei-bakery-bread-row.webp') center/contain no-repeat;
}
html[data-theme="kanahei-bakery"] .topbar > * { position:relative; z-index:1; }
html[data-theme="kanahei-bakery"] .topbar a { color:#684536 !important; background:#fff8ee !important; border-color:#d9c2aa !important; }
html[data-theme="kanahei-bakery"] .topbar .stat-strip {
  gap:13px;
  padding:7px 12px;
  border:1px solid rgba(151,118,92,.25);
  border-radius:14px;
  background:rgba(255,253,249,.92);
  box-shadow:0 4px 14px rgba(91,58,42,.1);
}
html[data-theme="kanahei-bakery"] .topbar .stat b { color:#5c392d; text-shadow:none; }
html[data-theme="kanahei-bakery"] .topbar .stat span { color:#80675b; }
html[data-theme="kanahei-bakery"] .topbar .stat.info b { color:#4f8575; }
html[data-theme="kanahei-bakery"] .topbar .stat.warn b { color:#b95661; }
html[data-theme="kanahei-bakery"] :is(.btn,.pill,.badge,input,select) { border-radius:999px; }
html[data-theme="kanahei-bakery"] .btn.primary { background:#8eb8a5; box-shadow:0 3px 0 #67917e; }
html[data-theme="kanahei-bakery"] .btn.primary:hover { background:#76a48f; }
html[data-theme="kanahei-bakery"] .panel { box-shadow:inset 3px 0 0 var(--theme-panel-edge),var(--shadow); }
html[data-theme="kanahei-bakery"] .toolbar-line { box-shadow:var(--shadow); }
html[data-theme="kanahei-bakery"] .kanahei-bakery-mascot {
  display:block;
  width:212px;
  height:103px;
  max-width:100%;
  object-fit:contain;
  object-position:left bottom;
  align-self:flex-start;
  flex:0 0 auto;
  margin:5px 0 -4px 1px;
  border-radius:8px;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 7px 9px rgba(83,56,40,.16));
}
html[data-theme="kanahei-bakery"] .theme-page-watermark {
  display:block;
  position:fixed;
  right:0;
  bottom:0;
  width:calc(100vw - 215px);
  height:calc(100vh - 63px);
  z-index:0;
  pointer-events:none;
  user-select:none;
  opacity:.095;
  background:
    url('/assets/kanahei-bakery-scene.webp') right 14px bottom 4px/520px auto no-repeat,
    url('/assets/kanahei-bakery-pattern.webp') center/430px repeat;
  background:
    var(--theme-scene-watermark) var(--theme-scene-watermark-position,right 14px bottom 4px)/var(--theme-scene-watermark-size,520px auto) no-repeat,
    url('/assets/kanahei-bakery-pattern.webp') center/430px repeat;
}

/* SpongeBob: ocean-blue chrome, yellow controls, bubbles and Bikini Bottom floor from the approved mockup. */
html[data-theme="spongebob"] {
  --character-nav-icon:url('/assets/spongebob-nav-characters.webp');
  --bg:#f7fbfc; --surface:#fffef9; --surface-2:#f7fcfe; --line:#d8e9ef; --line-strong:#b9d5e0;
  --text:#173a53; --muted:#5f7d8e; --faint:#91aab6;
  --accent:#0788c8; --accent-weak:#dff5ff; --accent-strong:#006ca8;
  --green:#2c9a55; --green-weak:#e3f7e8; --amber:#dc861c; --amber-weak:#fff0cc;
  --red:#ea6b76; --red-weak:#fde7ea; --blue:#0788c8;
  --side-bg1:#28bde9; --side-bg2:#0785c5; --side-text:#08344d; --side-item:#083b59;
  --side-muted:#d9f6ff; --side-link:#e8faff; --side-shadow:rgba(255,207,39,.46);
  --radius:14px;
  --shadow:0 1px 2px rgba(1,94,140,.05),0 10px 28px rgba(0,116,171,.1);
  --theme-table-head-bg:#eefaff;
  --theme-panel-edge:#ffd632; --theme-control-radius:7px; --theme-panel-radius:10px;
}
html[data-theme="spongebob"] body {
  font-family:"Trebuchet MS","Noto Sans TC","Microsoft JhengHei",sans-serif;
  letter-spacing:.006em;
}
html[data-theme="spongebob"] .sidebar {
  background:
    radial-gradient(circle at 28px 95px,transparent 0 8px,rgba(255,255,255,.48) 9px 11px,transparent 12px),
    radial-gradient(circle at 182px 230px,transparent 0 12px,rgba(255,255,255,.35) 13px 15px,transparent 16px),
    radial-gradient(ellipse at 55px 44%,rgba(185,241,255,.36) 0 18px,transparent 19px),
    linear-gradient(180deg,var(--side-bg1),var(--side-bg2));
}
html[data-theme="spongebob"] .topbar {
  color:#fff;
  border-bottom:3px solid #ffd632;
  background:
    radial-gradient(circle at 74% 30%,transparent 0 5px,rgba(255,255,255,.45) 6px 7px,transparent 8px),
    radial-gradient(circle at 87% 65%,transparent 0 9px,rgba(255,255,255,.28) 10px 11px,transparent 12px),
    linear-gradient(90deg,#0aa1dc,#0077b8);
}
html[data-theme="spongebob"] .topbar a { color:#163d57 !important; background:#ffd632 !important; border-color:#eab400 !important; }
html[data-theme="spongebob"] .topbar .stat-strip {
  gap:13px;
  padding:7px 12px;
  border:1px solid rgba(255,255,255,.68);
  border-radius:14px;
  background:rgba(255,255,255,.92);
  box-shadow:0 4px 14px rgba(0,63,98,.18);
}
html[data-theme="spongebob"] .topbar .stat b { color:#173a53; text-shadow:none; }
html[data-theme="spongebob"] .topbar .stat span { color:#496779; }
html[data-theme="spongebob"] .topbar .stat.info b { color:#00689f; }
html[data-theme="spongebob"] .topbar .stat.warn b { color:#c3314f; }
html[data-theme="spongebob"] .logo,
html[data-theme="spongebob"] .nav-item.active { background:#ffd632; color:#173a53; }
html[data-theme="spongebob"] .nav-item:hover { background:rgba(255,232,92,.28); color:#0d3550; }
html[data-theme="spongebob"] .btn.primary { background:#0788c8; box-shadow:0 3px 0 #00679b; }
html[data-theme="spongebob"] .btn.primary:hover { background:#006fa9; }
html[data-theme="spongebob"] :is(.btn,.pill,.badge) { border-radius:10px; }
html[data-theme="spongebob"] .panel { box-shadow:inset 3px 0 0 var(--theme-panel-edge),var(--shadow); }
html[data-theme="spongebob"] .toolbar-line { box-shadow:var(--shadow); }
html[data-theme="spongebob"] .spongebob-mascot {
  display:block;
  width:206px;
  height:232px;
  max-width:100%;
  object-fit:contain;
  object-position:left bottom;
  align-self:flex-start;
  flex:0 0 auto;
  margin:5px 0 -10px 0;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 9px 10px rgba(0,69,105,.24));
}
html[data-theme="spongebob"] .theme-page-watermark {
  display:block;
  position:fixed;
  right:18px;
  bottom:-6px;
  width:340px;
  height:390px;
  z-index:0;
  pointer-events:none;
  user-select:none;
  opacity:.045;
  background:var(--theme-scene-watermark) var(--theme-scene-watermark-position,right bottom)/var(--theme-scene-watermark-size,contain) no-repeat;
}
html[data-theme="spongebob"] .main-col { position:relative; isolation:isolate; }
html[data-theme="spongebob"] .main-col::after {
  content:"";
  position:fixed;
  left:224px;
  right:0;
  bottom:0;
  height:82px;
  z-index:0;
  pointer-events:none;
  opacity:.42;
  background:
    radial-gradient(ellipse at 8% 100%,#d7c18c 0 70px,transparent 72px),
    radial-gradient(ellipse at 92% 100%,#d7c18c 0 92px,transparent 94px),
    radial-gradient(circle at 73% 42%,transparent 0 9px,#b9e8f3 10px 11px,transparent 12px),
    linear-gradient(transparent 62%,#ead7a8 63% 100%);
}
html[data-theme="spongebob"] .main-col > :is(.topbar,.view) { position:relative; z-index:1; }

/* Miffy: classic primary-color picture-book blocks with clean white space. */
html[data-theme="miffy"] {
  --character-nav-icon:url('/assets/miffy-nav-characters.webp');
  --bg:#fffaf1; --surface:#ffffff; --surface-2:#fff6e7; --line:#eadfce; --line-strong:#d6c7b4;
  --text:#1f2f3f; --muted:#687988; --faint:#98a4ad;
  --accent:#df4c3f; --accent-weak:#ffe7df; --accent-strong:#ba3028;
  --green:#4d8b60; --green-weak:#e6f4e9; --amber:#d99822; --amber-weak:#fff0c9;
  --red:#df4c3f; --red-weak:#fbe6e2; --blue:#3d7fb2;
  --side-bg1:#f5c83c; --side-bg2:#eda637; --side-text:#223345; --side-item:#2c4154;
  --side-muted:#755d32; --side-link:#5e4826; --side-shadow:rgba(186,48,40,.3);
  --radius:10px;
  --shadow:0 1px 2px rgba(31,47,63,.05),0 10px 26px rgba(73,55,30,.09);
  --theme-table-head-bg:#fff3de;
  --theme-panel-edge:#3d7fb2; --theme-control-radius:8px; --theme-panel-radius:11px;
}
html[data-theme="miffy"] body {
  font-family:"Avenir Next","Noto Sans TC","Microsoft JhengHei",sans-serif;
  letter-spacing:.004em;
}
html[data-theme="miffy"] .sidebar {
  border-right:1px solid rgba(87,61,20,.2);
  background:
    radial-gradient(circle at 26px 92px,#fff7d5 0 7px,transparent 8px),
    radial-gradient(circle at 184px 212px,rgba(255,255,255,.34) 0 12px,transparent 13px),
    linear-gradient(180deg,var(--side-bg1),var(--side-bg2));
}
html[data-theme="miffy"] .brand { color:#203448; }
html[data-theme="miffy"] .logo { background:#df4c3f; color:#fff; box-shadow:0 3px 0 #b8362d; }
html[data-theme="miffy"] .nav-item:hover { color:#1f3041; background:rgba(255,255,255,.3); }
html[data-theme="miffy"] .nav-item.active,
html[data-theme="miffy"] .nav-parent-link.section-active:not(.active) {
  color:#fff;
  background:#df4c3f;
  box-shadow:0 4px 12px rgba(159,46,39,.28);
}
html[data-theme="miffy"] .nav-search-wrap input[type="search"] {
  border-color:rgba(80,55,18,.22);
  color:#203448;
  background:rgba(255,253,244,.96);
}
html[data-theme="miffy"] .nav-search-glyph { color:#3d7fb2; }
html[data-theme="miffy"] .topbar {
  color:#fff;
  border-bottom:3px solid #f5c83c;
  background:
    linear-gradient(90deg,transparent 0 72%,rgba(255,255,255,.08) 72% 84%,transparent 84%),
    #3d7fb2;
}
html[data-theme="miffy"] .topbar a { color:#27394a !important; background:#f5c83c !important; border-color:#dca924 !important; }
html[data-theme="miffy"] .topbar .stat-strip {
  gap:13px;
  padding:7px 12px;
  border:1px solid rgba(255,255,255,.62);
  border-radius:10px;
  background:rgba(255,255,255,.94);
  box-shadow:0 4px 14px rgba(20,65,98,.18);
}
html[data-theme="miffy"] .topbar .stat b { color:#26394a; text-shadow:none; }
html[data-theme="miffy"] .topbar .stat span { color:#677987; }
html[data-theme="miffy"] .topbar .stat.info b { color:#2d709f; }
html[data-theme="miffy"] .topbar .stat.warn b { color:#c83d36; }
html[data-theme="miffy"] .btn.primary { background:#df4c3f; box-shadow:0 3px 0 #b8362d; }
html[data-theme="miffy"] .btn.primary:hover { background:#c83f35; }
html[data-theme="miffy"] :is(.btn,.pill,.badge) { border-radius:8px; }
html[data-theme="miffy"] .panel { box-shadow:inset 3px 0 0 var(--theme-panel-edge),var(--shadow); }
html[data-theme="miffy"] .miffy-mascot {
  display:block;
  width:212px;
  height:188px;
  max-width:100%;
  object-fit:contain;
  object-position:left bottom;
  align-self:flex-start;
  flex:0 0 auto;
  margin:5px 0 -8px 1px;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 8px 9px rgba(77,55,28,.2));
}
html[data-theme="miffy"] .theme-page-watermark {
  display:block;
  position:fixed;
  right:18px;
  bottom:0;
  width:430px;
  height:315px;
  z-index:0;
  pointer-events:none;
  user-select:none;
  opacity:.05;
  background:var(--theme-scene-watermark) var(--theme-scene-watermark-position,right bottom)/var(--theme-scene-watermark-size,contain) no-repeat;
}

.theme-staff { display:inline-flex; align-items:center; gap:6px; min-width:0; }
:is(html[data-theme="miffy"],html[data-theme="kanahei"],html[data-theme="kanahei-bakery"],html[data-theme="spongebob"],html[data-theme="pretty-rhythm"],html[data-theme="pingu"],html[data-theme="pikmin"],html[data-theme="crayon-shinchan"],html[data-theme="agnes"]) .theme-staff-avatar {
  display:inline-block;
  width:28px;
  height:28px;
  flex:0 0 28px;
  border-radius:50%;
  background-image:var(--character-nav-icon);
  background-repeat:no-repeat;
  background-size:500% 100%;
  background-position:var(--staff-avatar-x,0%) center;
  filter:drop-shadow(0 2px 2px rgba(37,39,61,.18));
}
html[data-theme="kanahei"] .theme-staff-avatar { background-color:#fff0f5; box-shadow:0 0 0 2px #f5cbd9; }
html[data-theme="kanahei-bakery"] .theme-staff-avatar { background-color:#fff8ef; box-shadow:0 0 0 2px #bad2c4; }
html[data-theme="spongebob"] .theme-staff-avatar { background-color:#dff7ff; box-shadow:0 0 0 2px #79cce8; }
html[data-theme="miffy"] .theme-staff-avatar { background-color:#fff7dc; box-shadow:0 0 0 2px #e9b62f; }
html[data-theme="pretty-rhythm"] .theme-staff-avatar { background-color:#f7edff; box-shadow:0 0 0 2px #cbb9ed; }
html[data-theme="pingu"] .theme-staff-avatar { background-color:#edf9fd; box-shadow:0 0 0 2px #9fc9d8; }
html[data-theme="pikmin"] .theme-staff-avatar { background-color:#f2f5df; box-shadow:0 0 0 2px #9bc28b; }
html[data-theme="crayon-shinchan"] .theme-staff-avatar { background-color:#fff1cf; box-shadow:0 0 0 2px #f0b54b; }

@media (max-width:860px) {
  html[data-theme="spongebob"] .main-col::after { display:none; }
}

/* Chainsaw Man: Makima crimson, Power pink, coal black and cold paper white. */
html[data-theme="chainsaw"] {
  --character-nav-icon:url('/assets/chainsaw-nav-characters.webp');
  --bg:#f6f1f3; --surface:#fffdfd; --surface-2:#faf4f6; --line:#ead8df; --line-strong:#cfb8c1;
  --text:#281e23; --muted:#7a646d; --faint:#a88f99;
  --accent:#d43b50; --accent-weak:#f8dfe6; --accent-strong:#a91f36;
  --green:#318760; --green-weak:#e3f3eb; --amber:#c88216; --amber-weak:#fff0d3;
  --red:#9f1f32; --red-weak:#f8e1e7; --blue:#3d6f8f;
  --side-bg1:#2b2025; --side-bg2:#0e0b0d; --side-text:#fff7fa; --side-item:#ecd9df;
  --side-muted:#ad929c; --side-link:#dcb8c4; --side-shadow:rgba(212,59,80,.5);
  --shadow:0 1px 2px rgba(40,30,35,.06),0 10px 28px rgba(40,30,35,.12);
  --theme-panel-edge:#d43b50; --theme-control-radius:4px; --theme-panel-radius:7px;
}
html[data-theme="chainsaw"] .sidebar {
  background:
    radial-gradient(circle at 50% 12%, rgba(212,59,80,.28), transparent 30%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 2px, transparent 2px 12px),
    linear-gradient(180deg,var(--side-bg1),var(--side-bg2));
}
html[data-theme="chainsaw"] .logo,
html[data-theme="chainsaw"] .nav-item.active { background:var(--accent); color:#fffafc; }
html[data-theme="chainsaw"] .topbar { border-bottom:3px solid color-mix(in srgb,var(--accent) 76%,#f4a0b8); }

/* Pretty Rhythm: Aurora Dream — prism pink, ice blue and stage violet. */
html[data-theme="pretty-rhythm"] {
  --character-nav-icon:url('/assets/pretty-rhythm-nav-characters.webp');
  --bg:#f8f3fb; --surface:#fffefe; --surface-2:#fbf7fd; --line:#e9dff1; --line-strong:#cdbdde;
  --text:#2d2440; --muted:#756887; --faint:#a99bb7;
  --accent:#8c72d8; --accent-weak:#eee9fb; --accent-strong:#6b50bb;
  --green:#26866a; --green-weak:#e4f5ef; --amber:#d69a24; --amber-weak:#fff2d8;
  --red:#dd5e8f; --red-weak:#fce6ef; --blue:#55a9cf;
  --side-bg1:#463a77; --side-bg2:#17142b; --side-text:#fff9ff; --side-item:#ece2fb;
  --side-muted:#b8a9cf; --side-link:#d9c9ed; --side-shadow:rgba(238,125,175,.46);
  --shadow:0 1px 2px rgba(45,36,64,.05),0 10px 28px rgba(83,62,119,.11);
  --theme-panel-edge:#ee7daf; --theme-control-radius:13px; --theme-panel-radius:16px;
}
html[data-theme="pretty-rhythm"] .sidebar {
  background:radial-gradient(circle at 25% 9%,rgba(114,216,240,.28),transparent 30%),linear-gradient(180deg,var(--side-bg1),var(--side-bg2));
}
html[data-theme="pretty-rhythm"] .topbar { border-bottom:3px solid #ffd36a; }
html[data-theme="pretty-rhythm"] .logo,
html[data-theme="pretty-rhythm"] .nav-item.active { background:linear-gradient(135deg,#ee7daf,#8c72d8); color:#fff; }

/* Pingu — original clay-stop-motion polar palette. */
html[data-theme="pingu"] {
  --character-nav-icon:url('/assets/pingu-nav-characters.webp');
  --bg:#edf7fb; --surface:#ffffff; --surface-2:#f5fbfd; --line:#d5e7ee; --line-strong:#b8d2dd;
  --text:#172b38; --muted:#627985; --faint:#92a7b0;
  --accent:#f28c28; --accent-weak:#fff0df; --accent-strong:#c7650f;
  --green:#25826d; --green-weak:#e1f4ee; --amber:#bf7a16; --amber-weak:#fff2d9;
  --red:#df526b; --red-weak:#fce7eb; --blue:#2b83aa;
  --side-bg1:#173f54; --side-bg2:#0c2433; --side-text:#f6fbff; --side-item:#d9eef6;
  --side-muted:#9cbcca; --side-link:#bfe0ec; --side-shadow:rgba(242,140,40,.45);
  --shadow:0 1px 2px rgba(12,36,51,.05),0 10px 26px rgba(12,36,51,.1);
  --theme-panel-edge:#b8dfea; --theme-control-radius:12px; --theme-panel-radius:14px;
}
html[data-theme="pingu"] .sidebar {
  background:radial-gradient(circle at 22% 8%,rgba(184,223,234,.27),transparent 32%),linear-gradient(180deg,var(--side-bg1),var(--side-bg2));
}
html[data-theme="pingu"] .topbar { border-bottom:3px solid #b8dfea; }
html[data-theme="pingu"] .logo,
html[data-theme="pingu"] .nav-item.active { background:#f28c28; color:#17212a; }

/* Pikmin 4 — garden ivory, leaf green and cave-dark sidebar. */
html[data-theme="pikmin"] {
  --character-nav-icon:url('/assets/pikmin-nav-characters.webp');
  --bg:#f3f4e8; --surface:#fffef6; --surface-2:#f8f8ee; --line:#dde1ca; --line-strong:#c2c9a8;
  --text:#263127; --muted:#687461; --faint:#9aa38f;
  --accent:#5bae47; --accent-weak:#e7f4e3; --accent-strong:#3f8632;
  --green:#4e9d3f; --green-weak:#e2f2df; --amber:#c89023; --amber-weak:#fff1cf;
  --red:#da4c3d; --red-weak:#f9e5e2; --blue:#3886b1;
  --side-bg1:#31473a; --side-bg2:#17211d; --side-text:#fbf7e9; --side-item:#e1eadc;
  --side-muted:#a5b6a3; --side-link:#c3d4bd; --side-shadow:rgba(91,174,71,.43);
  --shadow:0 1px 2px rgba(38,49,39,.05),0 10px 26px rgba(38,49,39,.11);
  --theme-panel-edge:#806044; --theme-control-radius:12px; --theme-panel-radius:15px;
}
html[data-theme="pikmin"] .sidebar {
  background:radial-gradient(circle at 18% 8%,rgba(167,221,242,.2),transparent 31%),linear-gradient(180deg,var(--side-bg1),var(--side-bg2));
}
html[data-theme="pikmin"] .topbar { border-bottom:3px solid #5bae47; }
html[data-theme="pikmin"] .logo,
html[data-theme="pikmin"] .nav-item.active { background:#5bae47; color:#fff; }

/* Crayon Shin-chan — flat TV-animation red, yellow and Kasukabe sky blue. */
html[data-theme="crayon-shinchan"] {
  --character-nav-icon:url('/assets/crayon-shinchan-nav-characters.webp');
  --bg:#fff8e8; --surface:#fffef8; --surface-2:#fffaf0; --line:#eadfca; --line-strong:#d2c2a4;
  --text:#302b2a; --muted:#766b63; --faint:#a59a90;
  --accent:#e94436; --accent-weak:#fde6df; --accent-strong:#bd2f25;
  --green:#4f9a4f; --green-weak:#e4f3e2; --amber:#bf8420; --amber-weak:#fff0c8;
  --red:#e94436; --red-weak:#fce4e0; --blue:#4c99c5;
  --side-bg1:#315674; --side-bg2:#1d3045; --side-text:#fffaf0; --side-item:#e8f2f8;
  --side-muted:#aac0cf; --side-link:#cbdce7; --side-shadow:rgba(233,68,54,.45);
  --shadow:0 1px 2px rgba(48,43,42,.05),0 9px 25px rgba(48,43,42,.1);
  --theme-panel-edge:#ffd83d; --theme-control-radius:9px; --theme-panel-radius:12px;
}
html[data-theme="crayon-shinchan"] .sidebar {
  background:radial-gradient(circle at 18% 9%,rgba(100,181,229,.25),transparent 32%),linear-gradient(180deg,var(--side-bg1),var(--side-bg2));
}
html[data-theme="crayon-shinchan"] .topbar { border-bottom:3px solid #ffd83d; }
html[data-theme="crayon-shinchan"] .logo,
html[data-theme="crayon-shinchan"] .nav-item.active { background:#e94436; color:#fff; }

html[data-theme="pretty-rhythm"] .pretty-rhythm-mascot,
html[data-theme="pingu"] .pingu-mascot,
html[data-theme="pikmin"] .pikmin-mascot,
html[data-theme="crayon-shinchan"] .crayon-shinchan-mascot,
html[data-theme="agnes"] .agnes-mascot {
  display:block;
  width:214px;
  height:190px;
  max-width:100%;
  object-fit:contain;
  object-position:left bottom;
  align-self:flex-start;
  flex:0 0 auto;
  margin:5px 0 -8px;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 9px 10px rgba(21,30,39,.24));
}
:is(html[data-theme="pretty-rhythm"],html[data-theme="pingu"],html[data-theme="pikmin"],html[data-theme="crayon-shinchan"],html[data-theme="agnes"]) .theme-page-watermark {
  display:block;
  position:fixed;
  right:16px;
  bottom:0;
  width:min(700px,55vw);
  height:min(400px,45vh);
  z-index:0;
  pointer-events:none;
  user-select:none;
  opacity:.055;
  background:var(--theme-scene-watermark) var(--theme-scene-watermark-position,right bottom)/var(--theme-scene-watermark-size,contain) no-repeat;
}
html[data-theme="pingu"] :is(.pingu-mascot,.theme-page-watermark) { filter:drop-shadow(0 0 1px rgba(255,255,255,.9)); }

/* 神偷奶爸 — 小小兵黃、丹寧藍與 Gru 深灰，保留 Agnes 獨角獸粉作柔和點綴。 */
html[data-theme="agnes"] {
  --character-nav-icon:url('/assets/agnes-nav-characters.webp');
  --bg:#fff9e8; --surface:#ffffff; --surface-2:#fffdf4; --line:#eadfbf; --line-strong:#d1c08f;
  --text:#242831; --muted:#6d6f72; --faint:#9a978d;
  --accent:#2f74a8; --accent-weak:#e4f0fa; --accent-strong:#205781;
  --green:#2f8a68; --green-weak:#e1f3ec; --amber:#c8940e; --amber-weak:#fff0b8;
  --red:#d94f57; --red-weak:#fce6e7; --blue:#2f74a8;
  --side-bg1:#353945; --side-bg2:#1e222b; --side-text:#fffaf0; --side-item:#e7edf2;
  --side-muted:#aeb9c4; --side-link:#d0dae3; --side-shadow:rgba(47,116,168,.45);
  --shadow:0 1px 2px rgba(30,34,43,.05),0 10px 26px rgba(30,34,43,.12);
  --theme-panel-edge:#f4c430; --theme-control-radius:12px; --theme-panel-radius:14px;
}
html[data-theme="agnes"] .sidebar {
  background:radial-gradient(circle at 20% 8%,rgba(244,196,48,.24),transparent 32%),linear-gradient(180deg,var(--side-bg1),var(--side-bg2));
}
html[data-theme="agnes"] .topbar { border-bottom:3px solid #f4c430; }
html[data-theme="agnes"] .logo,
html[data-theme="agnes"] .nav-item.active { background:#2f74a8; color:#fff; }
html[data-theme="agnes"] .theme-staff-avatar { background-color:#fff1a8; box-shadow:0 0 0 2px #f4c430; }
html[data-theme="agnes"] :is(.agnes-mascot,.theme-page-watermark) { filter:drop-shadow(0 0 1px rgba(255,255,255,.9)); }

/* 午夜酒紅:暖白紙面、酒紅重點與午夜藍側欄。 */
html[data-theme="midnight-burgundy"] {
  --bg:#f5f2ee; --surface:#fffdfb; --surface-2:#f9f6f2; --line:#e4dcd7; --line-strong:#cdbfba;
  --text:#251f27; --muted:#756873; --faint:#a596a2;
  --accent:#942f43; --accent-weak:#f6e4e8; --accent-strong:#742033;
  --green:#26766e; --green-weak:#e0f1ee; --amber:#c68d28; --amber-weak:#faefd8;
  --red:#d04b52; --red-weak:#f9e3e5; --blue:#357c9e;
  --side-bg1:#20243c; --side-bg2:#0d1324; --side-text:#fff8f3; --side-item:#ddd8e7;
  --side-muted:#918ba3; --side-link:#b6acc7; --side-shadow:rgba(148,47,67,.48);
  --shadow:0 1px 2px rgba(37,31,39,.06),0 10px 28px rgba(37,31,39,.11);
  --theme-panel-edge:#26766e; --theme-control-radius:6px; --theme-panel-radius:9px;
}
html[data-theme="midnight-burgundy"] .sidebar {
  background:
    radial-gradient(circle at 52% 10%,rgba(196,165,224,.2),transparent 27%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 2px,transparent 2px 14px),
    linear-gradient(180deg,var(--side-bg1),var(--side-bg2));
}
html[data-theme="midnight-burgundy"] .logo,
html[data-theme="midnight-burgundy"] .nav-item.active { background:#942f43; color:#fff8f3; }
html[data-theme="midnight-burgundy"] .topbar { border-bottom:3px solid rgba(38,118,110,.7); }

/* 角色主題以角色圖集取代一般功能圖示；午夜酒紅保留 ERP 原本功能圖示。 */
:is(html[data-theme="conan"],html[data-theme="studio-ug"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="miffy"],html[data-theme="kanahei"],html[data-theme="kanahei-bakery"],html[data-theme="spongebob"],html[data-theme="chainsaw"],html[data-theme="pretty-rhythm"],html[data-theme="pingu"],html[data-theme="pikmin"],html[data-theme="crayon-shinchan"],html[data-theme="agnes"]) .theme-search-character {
  display:block;
  position:absolute;
  right:-4px;
  bottom:-7px;
  z-index:2;
  width:47px;
  height:47px;
  pointer-events:none;
  background-image:var(--character-nav-icon);
  background-size:500% 500%;
  background-position:0 0;
  background-repeat:no-repeat;
  filter:drop-shadow(0 3px 3px rgba(47,31,50,.2));
}
:is(html[data-theme="miffy"],html[data-theme="kanahei"],html[data-theme="kanahei-bakery"],html[data-theme="spongebob"],html[data-theme="chainsaw"],html[data-theme="pretty-rhythm"],html[data-theme="pingu"],html[data-theme="pikmin"],html[data-theme="crayon-shinchan"],html[data-theme="agnes"]) .theme-search-character {
  background-size:500% 100%;
  background-position:100% center;
}
html[data-theme="conan"] .theme-search-character { background-position:75% 0; }
html[data-theme="kanahei"] .theme-search-character { background-position:75% center; }
html[data-theme="agnes"] .theme-search-character {
  width:50px;
  height:50px;
  right:-5px;
  bottom:-8px;
  background-position:25% center;
}
html[data-theme="miffy"] .theme-search-character {
  width:50px;
  height:50px;
  right:-5px;
  bottom:-8px;
  background-image:url('/assets/miffy-search-character.webp');
  background-size:contain;
  background-position:center;
}
html[data-theme="kanahei-bakery"] .theme-search-character {
  width:52px;
  height:52px;
  right:-5px;
  bottom:-8px;
  background-image:url('/assets/kanahei-bakery-search-character.webp');
  background-size:contain;
  background-position:center;
}

/* Content search actions use the same active-theme character as the sidebar search. */
:is(html[data-theme="conan"],html[data-theme="studio-ug"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="miffy"],html[data-theme="kanahei"],html[data-theme="kanahei-bakery"],html[data-theme="spongebob"],html[data-theme="chainsaw"],html[data-theme="pretty-rhythm"],html[data-theme="pingu"],html[data-theme="pikmin"],html[data-theme="crayon-shinchan"],html[data-theme="agnes"]):not([data-nav-icons="q"]) .theme-character-search-btn {
  --theme-search-button-gutter:20px;
  position:relative;
  overflow:visible;
  max-width:calc(100% - var(--theme-search-button-gutter));
  margin-inline-end:var(--theme-search-button-gutter);
  padding-inline-end:24px;
}
:is(html[data-theme="conan"],html[data-theme="studio-ug"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="miffy"],html[data-theme="kanahei"],html[data-theme="kanahei-bakery"],html[data-theme="spongebob"],html[data-theme="chainsaw"],html[data-theme="pretty-rhythm"],html[data-theme="pingu"],html[data-theme="pikmin"],html[data-theme="crayon-shinchan"],html[data-theme="agnes"]):not([data-nav-icons="q"]) .theme-character-search-btn::after {
  content:"";
  display:block;
  position:absolute;
  right:-24px;
  bottom:-7px;
  z-index:3;
  width:42px;
  height:42px;
  pointer-events:none;
  user-select:none;
  background-image:var(--character-nav-icon);
  background-repeat:no-repeat;
  background-size:500% 500%;
  background-position:0 0;
  filter:drop-shadow(0 3px 3px rgba(47,31,50,.2));
}
:is(html[data-theme="miffy"],html[data-theme="kanahei"],html[data-theme="kanahei-bakery"],html[data-theme="spongebob"],html[data-theme="chainsaw"],html[data-theme="pretty-rhythm"],html[data-theme="pingu"],html[data-theme="pikmin"],html[data-theme="crayon-shinchan"],html[data-theme="agnes"]):not([data-nav-icons="q"]) .theme-character-search-btn::after {
  background-size:500% 100%;
  background-position:100% center;
}
html[data-theme="conan"]:not([data-nav-icons="q"]) .theme-character-search-btn::after { background-position:75% 0; }
html[data-theme="kanahei"]:not([data-nav-icons="q"]) .theme-character-search-btn::after { background-position:75% center; }
html[data-theme="agnes"]:not([data-nav-icons="q"]) .theme-character-search-btn::after { background-position:25% center; }
html[data-theme="miffy"]:not([data-nav-icons="q"]) .theme-character-search-btn::after {
  background-image:url('/assets/miffy-search-character.webp');
  background-size:contain;
  background-position:center;
}
html[data-theme="kanahei-bakery"]:not([data-nav-icons="q"]) .theme-character-search-btn::after {
  background-image:url('/assets/kanahei-bakery-search-character.webp');
  background-size:contain;
  background-position:center;
}
html[data-nav-icons="q"] .theme-character-search-btn::after { display:none !important; }

@media (max-width:720px) {
  :is(html[data-theme="conan"],html[data-theme="studio-ug"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="miffy"],html[data-theme="kanahei"],html[data-theme="kanahei-bakery"],html[data-theme="spongebob"],html[data-theme="chainsaw"],html[data-theme="pretty-rhythm"],html[data-theme="pingu"],html[data-theme="pikmin"],html[data-theme="crayon-shinchan"],html[data-theme="agnes"]):not([data-nav-icons="q"]) .theme-character-search-btn {
    --theme-search-button-gutter:12px;
    padding-inline-end:22px;
  }
  :is(html[data-theme="conan"],html[data-theme="studio-ug"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="miffy"],html[data-theme="kanahei"],html[data-theme="kanahei-bakery"],html[data-theme="spongebob"],html[data-theme="chainsaw"],html[data-theme="pretty-rhythm"],html[data-theme="pingu"],html[data-theme="pikmin"],html[data-theme="crayon-shinchan"],html[data-theme="agnes"]):not([data-nav-icons="q"]) .theme-character-search-btn::after {
    right:-15px;
    bottom:-4px;
    width:30px;
    height:30px;
  }
}
:is(html[data-theme="conan"],html[data-theme="studio-ug"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="miffy"],html[data-theme="kanahei"],html[data-theme="kanahei-bakery"],html[data-theme="spongebob"],html[data-theme="chainsaw"],html[data-theme="pretty-rhythm"],html[data-theme="pingu"],html[data-theme="pikmin"],html[data-theme="crayon-shinchan"],html[data-theme="agnes"]):not([data-nav-icons="q"]) :is(.nav-item.active,.nav-parent-link.section-active) > .ic {
  border-radius:11px;
  outline:2px solid rgba(255,255,255,.64);
  outline-offset:1px;
  transform:scale(1.04);
}
:is(html[data-theme="conan"],html[data-theme="studio-ug"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="miffy"],html[data-theme="kanahei"],html[data-theme="kanahei-bakery"],html[data-theme="spongebob"],html[data-theme="chainsaw"],html[data-theme="pretty-rhythm"],html[data-theme="pingu"],html[data-theme="pikmin"],html[data-theme="crayon-shinchan"],html[data-theme="agnes"]) .nav-item > .ic,
:is(html[data-theme="conan"],html[data-theme="studio-ug"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="miffy"],html[data-theme="kanahei"],html[data-theme="kanahei-bakery"],html[data-theme="spongebob"],html[data-theme="chainsaw"],html[data-theme="pretty-rhythm"],html[data-theme="pingu"],html[data-theme="pikmin"],html[data-theme="crayon-shinchan"],html[data-theme="agnes"]) #navMisc > summary > .ic {
  width:28px;
  height:28px;
  flex:0 0 28px;
  overflow:hidden;
  color:transparent;
  font-size:0;
  --theme-icon-x:0%;
  --theme-icon-y:0%;
  background-image:var(--character-nav-icon);
  background-size:500% 500%;
  background-position:var(--theme-icon-x) var(--theme-icon-y);
  background-repeat:no-repeat;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.32));
}
:is(html[data-theme="conan"],html[data-theme="studio-ug"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="miffy"],html[data-theme="kanahei"],html[data-theme="kanahei-bakery"],html[data-theme="spongebob"],html[data-theme="pretty-rhythm"],html[data-theme="pingu"],html[data-theme="pikmin"],html[data-theme="crayon-shinchan"],html[data-theme="agnes"]) .nav-item > .ic,
:is(html[data-theme="conan"],html[data-theme="studio-ug"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="miffy"],html[data-theme="kanahei"],html[data-theme="kanahei-bakery"],html[data-theme="spongebob"],html[data-theme="pretty-rhythm"],html[data-theme="pingu"],html[data-theme="pikmin"],html[data-theme="crayon-shinchan"],html[data-theme="agnes"]) #navMisc > summary > .ic {
  width:34px;
  height:34px;
  flex-basis:34px;
}
html[data-theme="chainsaw"] .nav-item > .ic,
html[data-theme="chainsaw"] #navMisc > summary > .ic {
  width:38px;
  height:38px;
  flex-basis:38px;
  background-size:500% 100%;
}
:is(html[data-theme="miffy"],html[data-theme="kanahei"],html[data-theme="kanahei-bakery"],html[data-theme="spongebob"],html[data-theme="pretty-rhythm"],html[data-theme="pingu"],html[data-theme="pikmin"],html[data-theme="crayon-shinchan"],html[data-theme="agnes"]) .nav-item > .ic,
:is(html[data-theme="miffy"],html[data-theme="kanahei"],html[data-theme="kanahei-bakery"],html[data-theme="spongebob"],html[data-theme="pretty-rhythm"],html[data-theme="pingu"],html[data-theme="pikmin"],html[data-theme="crayon-shinchan"],html[data-theme="agnes"]) #navMisc > summary > .ic {
  background-size:500% 100%;
  --theme-icon-y:0%;
}
/* 角色主題導覽表:每個功能固定一位角色,拖曳排序也不會換人。 */
:is(html[data-theme="conan"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="chainsaw"]) .nav-item[data-route="items"] > .ic { --theme-icon-x:0%; --theme-icon-y:0%; }
:is(html[data-theme="conan"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="chainsaw"]) .nav-item[data-route="combined"] > .ic { --theme-icon-x:25%; --theme-icon-y:0%; }
:is(html[data-theme="conan"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="chainsaw"]) .nav-item[data-route="catalog"] > .ic { --theme-icon-x:50%; --theme-icon-y:0%; }
:is(html[data-theme="conan"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="chainsaw"]) .nav-item[data-route="platform-shopee"] > .ic { --theme-icon-x:75%; --theme-icon-y:0%; }
:is(html[data-theme="conan"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="chainsaw"]) .nav-item[data-route="purchases"] > .ic { --theme-icon-x:100%; --theme-icon-y:0%; }
:is(html[data-theme="conan"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="chainsaw"]) .nav-item[data-route="smart"] > .ic { --theme-icon-x:0%; --theme-icon-y:25%; }
:is(html[data-theme="conan"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="chainsaw"]) .nav-item[data-route="stocktake"] > .ic { --theme-icon-x:25%; --theme-icon-y:25%; }
:is(html[data-theme="conan"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="chainsaw"]) .nav-item[data-route="mobile-stocktake"] > .ic { --theme-icon-x:50%; --theme-icon-y:25%; }
:is(html[data-theme="conan"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="chainsaw"]) .nav-item[data-route="orders"] > .ic { --theme-icon-x:75%; --theme-icon-y:25%; }
:is(html[data-theme="conan"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="chainsaw"]) .nav-item[data-route="groups"] > .ic { --theme-icon-x:100%; --theme-icon-y:25%; }
:is(html[data-theme="conan"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="chainsaw"]) .nav-item[data-route="mobile-pick"] > .ic { --theme-icon-x:0%; --theme-icon-y:50%; }
:is(html[data-theme="conan"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="chainsaw"]) .nav-item[data-route="smartship"] > .ic { --theme-icon-x:25%; --theme-icon-y:50%; }
:is(html[data-theme="conan"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="chainsaw"]) .nav-item[data-route="ordercheck"] > .ic { --theme-icon-x:50%; --theme-icon-y:50%; }
:is(html[data-theme="conan"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="chainsaw"]) .nav-item[data-route="ordercat"] > .ic { --theme-icon-x:75%; --theme-icon-y:50%; }
:is(html[data-theme="conan"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="chainsaw"]) .nav-item[data-route="reports"] > .ic { --theme-icon-x:100%; --theme-icon-y:50%; }
:is(html[data-theme="conan"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="chainsaw"]) .nav-item[data-route="employees"] > .ic { --theme-icon-x:0%; --theme-icon-y:75%; }
:is(html[data-theme="conan"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="chainsaw"]) .nav-item[data-route="settings"] > .ic { --theme-icon-x:25%; --theme-icon-y:75%; }
:is(html[data-theme="conan"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="chainsaw"]) .nav-item[data-route="mquery"] > .ic { --theme-icon-x:50%; --theme-icon-y:75%; }
:is(html[data-theme="conan"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="chainsaw"]) .nav-item[data-route="pos"] > .ic { --theme-icon-x:75%; --theme-icon-y:75%; }
:is(html[data-theme="conan"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="chainsaw"]) .nav-item[data-route="customers"] > .ic { --theme-icon-x:100%; --theme-icon-y:75%; }
:is(html[data-theme="conan"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="chainsaw"]) .nav-item[data-route="invoices"] > .ic { --theme-icon-x:0%; --theme-icon-y:100%; }
:is(html[data-theme="conan"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="chainsaw"]) .nav-item[data-route="wallet"] > .ic { --theme-icon-x:25%; --theme-icon-y:100%; }
:is(html[data-theme="conan"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="chainsaw"]) .nav-item[data-route="customs"] > .ic { --theme-icon-x:50%; --theme-icon-y:100%; }
:is(html[data-theme="conan"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="chainsaw"]) .nav-item[data-route="suppliers"] > .ic { --theme-icon-x:75%; --theme-icon-y:100%; }
:is(html[data-theme="conan"],html[data-theme="chiikawa"],html[data-theme="kuromi"],html[data-theme="chainsaw"]) #navMisc > summary > .ic { --theme-icon-x:100%; --theme-icon-y:100%; }

/* Five-cell character strips: every parent category starts with a different character. */
:is(html[data-theme="miffy"],html[data-theme="kanahei"],html[data-theme="kanahei-bakery"],html[data-theme="spongebob"],html[data-theme="pretty-rhythm"],html[data-theme="pingu"],html[data-theme="pikmin"],html[data-theme="crayon-shinchan"],html[data-theme="agnes"]) :is(
  .nav-item[data-route="items"],.nav-item[data-route="mobile-stocktake"],.nav-item[data-route="mobile-pick"],
  .nav-item[data-route="employees"],.nav-item[data-route="invoices"]
) > .ic { --theme-icon-x:0%; }
:is(html[data-theme="miffy"],html[data-theme="kanahei"],html[data-theme="kanahei-bakery"],html[data-theme="spongebob"],html[data-theme="pretty-rhythm"],html[data-theme="pingu"],html[data-theme="pikmin"],html[data-theme="crayon-shinchan"],html[data-theme="agnes"]) :is(
  .nav-item[data-route="purchases"],.nav-item[data-route="combined"],.nav-item[data-route="smartship"],
  .nav-item[data-route="settings"],.nav-item[data-route="wallet"]
) > .ic { --theme-icon-x:25%; }
:is(html[data-theme="miffy"],html[data-theme="kanahei"],html[data-theme="kanahei-bakery"],html[data-theme="spongebob"],html[data-theme="pretty-rhythm"],html[data-theme="pingu"],html[data-theme="pikmin"],html[data-theme="crayon-shinchan"],html[data-theme="agnes"]) :is(
  .nav-item[data-route="stocktake"],.nav-item[data-route="catalog"],.nav-item[data-route="ordercheck"],
  .nav-item[data-route="mquery"],.nav-item[data-route="customs"]
) > .ic,
:is(html[data-theme="miffy"],html[data-theme="kanahei"],html[data-theme="kanahei-bakery"],html[data-theme="spongebob"],html[data-theme="pretty-rhythm"],html[data-theme="pingu"],html[data-theme="pikmin"],html[data-theme="crayon-shinchan"],html[data-theme="agnes"]) #navMisc > summary > .ic { --theme-icon-x:50%; }
:is(html[data-theme="miffy"],html[data-theme="kanahei"],html[data-theme="kanahei-bakery"],html[data-theme="spongebob"],html[data-theme="pretty-rhythm"],html[data-theme="pingu"],html[data-theme="pikmin"],html[data-theme="crayon-shinchan"],html[data-theme="agnes"]) :is(
  .nav-item[data-route="orders"],.nav-item[data-route="platform-shopee"],.nav-item[data-route="ordercat"],
  .nav-item[data-route="pos"],.nav-item[data-route="suppliers"]
) > .ic { --theme-icon-x:75%; }
:is(html[data-theme="miffy"],html[data-theme="kanahei"],html[data-theme="kanahei-bakery"],html[data-theme="spongebob"],html[data-theme="pretty-rhythm"],html[data-theme="pingu"],html[data-theme="pikmin"],html[data-theme="crayon-shinchan"],html[data-theme="agnes"]) :is(
  .nav-item[data-route="reports"],.nav-item[data-route="smart"],.nav-item[data-route="groups"],
  .nav-item[data-route="customers"]
) > .ic { --theme-icon-x:100%; }

/* Studio UG 使用 25 個不同表情與動作。 */
html[data-theme="studio-ug"] .nav-item[data-route="items"] > .ic { --theme-icon-x:0%; --theme-icon-y:0%; }
html[data-theme="studio-ug"] .nav-item[data-route="combined"] > .ic { --theme-icon-x:25%; --theme-icon-y:0%; }
html[data-theme="studio-ug"] .nav-item[data-route="catalog"] > .ic { --theme-icon-x:50%; --theme-icon-y:0%; }
html[data-theme="studio-ug"] .nav-item[data-route="platform-shopee"] > .ic { --theme-icon-x:75%; --theme-icon-y:0%; }
html[data-theme="studio-ug"] .nav-item[data-route="purchases"] > .ic { --theme-icon-x:100%; --theme-icon-y:0%; }
html[data-theme="studio-ug"] .nav-item[data-route="smart"] > .ic { --theme-icon-x:0%; --theme-icon-y:25%; }
html[data-theme="studio-ug"] .nav-item[data-route="stocktake"] > .ic { --theme-icon-x:25%; --theme-icon-y:25%; }
html[data-theme="studio-ug"] .nav-item[data-route="mobile-stocktake"] > .ic { --theme-icon-x:50%; --theme-icon-y:25%; }
html[data-theme="studio-ug"] .nav-item[data-route="orders"] > .ic { --theme-icon-x:75%; --theme-icon-y:25%; }
html[data-theme="studio-ug"] .nav-item[data-route="groups"] > .ic { --theme-icon-x:100%; --theme-icon-y:25%; }
html[data-theme="studio-ug"] .nav-item[data-route="mobile-pick"] > .ic { --theme-icon-x:0%; --theme-icon-y:50%; }
html[data-theme="studio-ug"] .nav-item[data-route="smartship"] > .ic { --theme-icon-x:25%; --theme-icon-y:50%; }
html[data-theme="studio-ug"] .nav-item[data-route="ordercheck"] > .ic { --theme-icon-x:50%; --theme-icon-y:50%; }
html[data-theme="studio-ug"] .nav-item[data-route="ordercat"] > .ic { --theme-icon-x:75%; --theme-icon-y:50%; }
html[data-theme="studio-ug"] .nav-item[data-route="reports"] > .ic { --theme-icon-x:100%; --theme-icon-y:50%; }
html[data-theme="studio-ug"] .nav-item[data-route="employees"] > .ic { --theme-icon-x:0%; --theme-icon-y:75%; }
html[data-theme="studio-ug"] .nav-item[data-route="settings"] > .ic { --theme-icon-x:25%; --theme-icon-y:75%; }
html[data-theme="studio-ug"] .nav-item[data-route="mquery"] > .ic { --theme-icon-x:50%; --theme-icon-y:75%; }
html[data-theme="studio-ug"] .nav-item[data-route="pos"] > .ic { --theme-icon-x:75%; --theme-icon-y:75%; }
html[data-theme="studio-ug"] .nav-item[data-route="customers"] > .ic { --theme-icon-x:100%; --theme-icon-y:75%; }
html[data-theme="studio-ug"] .nav-item[data-route="invoices"] > .ic { --theme-icon-x:0%; --theme-icon-y:100%; }
html[data-theme="studio-ug"] .nav-item[data-route="wallet"] > .ic { --theme-icon-x:25%; --theme-icon-y:100%; }
html[data-theme="studio-ug"] .nav-item[data-route="customs"] > .ic { --theme-icon-x:50%; --theme-icon-y:100%; }
html[data-theme="studio-ug"] .nav-item[data-route="suppliers"] > .ic { --theme-icon-x:75%; --theme-icon-y:100%; }
html[data-theme="studio-ug"] #navMisc > summary > .ic { --theme-icon-x:100%; --theme-icon-y:100%; }

/* 柯南只循環圖集前六位角色；第六位在第二列第一格。 */
html[data-theme="conan"] :is(.nav-item[data-route="stocktake"],.nav-item[data-route="ordercheck"],.nav-item[data-route="pos"]) > .ic,
html[data-theme="conan"] #navMisc > summary > .ic { --theme-icon-x:0%; --theme-icon-y:0%; }
html[data-theme="conan"] :is(.nav-item[data-route="mobile-stocktake"],.nav-item[data-route="ordercat"],.nav-item[data-route="customers"]) > .ic { --theme-icon-x:25%; --theme-icon-y:0%; }
html[data-theme="conan"] :is(.nav-item[data-route="orders"],.nav-item[data-route="reports"],.nav-item[data-route="invoices"]) > .ic { --theme-icon-x:50%; --theme-icon-y:0%; }
html[data-theme="conan"] :is(.nav-item[data-route="groups"],.nav-item[data-route="employees"],.nav-item[data-route="wallet"]) > .ic { --theme-icon-x:75%; --theme-icon-y:0%; }
html[data-theme="conan"] :is(.nav-item[data-route="mobile-pick"],.nav-item[data-route="settings"],.nav-item[data-route="customs"]) > .ic { --theme-icon-x:100%; --theme-icon-y:0%; }
html[data-theme="conan"] :is(.nav-item[data-route="smartship"],.nav-item[data-route="mquery"],.nav-item[data-route="suppliers"]) > .ic { --theme-icon-x:0%; --theme-icon-y:25%; }


html[data-theme="chainsaw"] .chainsaw-mascot {
  display:block;
  width:198px;
  height:238px;
  max-width:100%;
  object-fit:contain;
  object-position:left bottom;
  align-self:flex-start;
  flex:0 0 auto;
  margin:6px 0 -10px 2px;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.38));
}
html[data-theme="chainsaw"] .theme-page-watermark {
  display:block;
  position:fixed;
  right:138px;
  bottom:8px;
  width:330px;
  height:350px;
  z-index:4;
  pointer-events:none;
  user-select:none;
  opacity:.052;
  background:var(--theme-scene-watermark) var(--theme-scene-watermark-position,right bottom)/var(--theme-scene-watermark-size,contain) no-repeat;
}

/* Sets 3-5 share one three-column image. Crop exactly one story panel for the
   sidebar mascot; the same position drives the low-opacity page backplate. */
[data-theme-scene-mascot].theme-scene-sprite {
  width:184px !important;
  height:310px !important;
  max-width:calc(100% - 8px);
  object-fit:cover !important;
  object-position:var(--theme-scene-position,left) center !important;
  border-radius:12px;
  clip-path:inset(0 round 12px);
}
@media (min-width:861px) and (max-height:760px) {
  [data-theme-scene-mascot].theme-scene-sprite {
    width:88px !important;
    height:148px !important;
    max-height:148px;
  }
}
html[data-theme="chainsaw"] .chainsaw-dance {
  display:block;
  position:fixed;
  right:14px;
  bottom:0;
  width:180px;
  max-width:calc(100vw - 32px);
  z-index:5;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 9px 9px rgba(30,18,12,.24));
}
html[data-theme="chainsaw"] .chainsaw-dance[hidden] { display:none !important; }
.chainsaw-dance-player {
  display:block;
  width:100%;
  height:auto;
  background:transparent;
}
.chainsaw-dance-poster { display:none; width:100%; height:auto; }
html[data-theme="crayon-shinchan"] .crayon-shinchan-walk {
  display:block;
  position:fixed;
  right:8px;
  bottom:0;
  width:clamp(220px, 26vw, 340px); /* 2026-07-30 user:再小一點,約原尺寸 60% */
  max-width:calc(100vw - 84px);
  z-index:5;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 8px 7px rgba(55,35,25,.2));
}
html[data-theme="crayon-shinchan"] .crayon-shinchan-walk[hidden] { display:none !important; }
.crayon-shinchan-walk-player {
  display:block;
  width:100%;
  height:auto;
  background:transparent;
}
.crayon-shinchan-walk-poster { display:none; width:100%; height:auto; }
/* 動畫暫停降級(is-motion-paused 由 JS 掛,只在「主題吻合+角色動畫開+系統 prefers-reduced-motion」
   時成立 → 顯示靜態 poster;手動關閉=整個 panel hidden 且不載影片,不走 poster 降級
   (2026-07-31 改制)。規則置頂層是因為 class 由 JS 判斷,不鎖在 media query 內 */
html[data-theme="chainsaw"] .chainsaw-dance.is-motion-paused .chainsaw-dance-player { display:none; }
html[data-theme="chainsaw"] .chainsaw-dance.is-motion-paused .chainsaw-dance-poster { display:block; }
html[data-theme="crayon-shinchan"] .crayon-shinchan-walk.is-motion-paused .crayon-shinchan-walk-player { display:none; }
html[data-theme="crayon-shinchan"] .crayon-shinchan-walk.is-motion-paused .crayon-shinchan-walk-poster { display:block; }
@media (prefers-reduced-motion:reduce) {
  .sidebar-bottom > img,
  .theme-page-watermark { transition:none; }
}
@media (max-width:720px) {
}
/* 高質感(黑金) */
html[data-theme="luxe"] { --bg:#f7f5f0; --surface-2:#faf8f2; --line:#e8e1d1; --line-strong:#d6cbb2;
  --text:#26221a; --muted:#7d7462; --faint:#a89e8a;
  --accent:#a8853c; --accent-weak:#f3ecd9; --accent-strong:#8a6b2a;
  --theme-panel-edge:#a8853c; --theme-control-radius:4px; --theme-panel-radius:6px; }
/* 韓國風(奶膚粉) */
html[data-theme="korean"] { --bg:#fdf8f7; --surface-2:#fefaf9; --line:#f2e3e1; --line-strong:#e6cdc9;
  --text:#3b2c2c; --muted:#96807e; --faint:#b8a5a3;
  --accent:#e0788f; --accent-weak:#fdeef1; --accent-strong:#c95d77;
  --theme-panel-edge:#e9a5b4; --theme-control-radius:15px; --theme-panel-radius:18px; }
/* 專業風(海軍藍) */
html[data-theme="pro"] { --bg:#f4f6f9; --surface-2:#f8fafc; --line:#e2e8f0; --line-strong:#cbd6e2;
  --text:#1a2433; --muted:#64748b; --faint:#94a3b8;
  --accent:#1e4e8c; --accent-weak:#e6eef8; --accent-strong:#173e70;
  --theme-panel-edge:#1e4e8c; --theme-control-radius:6px; --theme-panel-radius:8px; }
/* 時尚風(墨黑) */
html[data-theme="fashion"] { --bg:#f6f6f6; --surface-2:#fafafa; --line:#e6e6e6; --line-strong:#d0d0d0;
  --text:#141414; --muted:#6e6e6e; --faint:#9c9c9c;
  --accent:#1f1f24; --accent-weak:#ebebee; --accent-strong:#000000;
  --theme-panel-edge:#1f1f24; --theme-control-radius:2px; --theme-panel-radius:3px; }
/* 海洋藍(藍綠) */
html[data-theme="ocean"] { --bg:#f2f7f7; --surface-2:#f7fbfb; --line:#dcebea; --line-strong:#c2dbd9;
  --text:#132a28; --muted:#587472; --faint:#87a19f;
  --accent:#0f766e; --accent-weak:#e0f2f0; --accent-strong:#0b5d57;
  --theme-panel-edge:#43a49d; --theme-control-radius:12px; --theme-panel-radius:14px; }
/* 極簡灰 */
html[data-theme="mono"] { --bg:#f6f7f8; --surface-2:#fafbfc; --line:#e5e7ea; --line-strong:#d1d5da;
  --text:#1f2328; --muted:#697077; --faint:#9aa1a9;
  --accent:#4b5563; --accent-weak:#eceef1; --accent-strong:#374151;
  --theme-panel-edge:#77808c; --theme-control-radius:4px; --theme-panel-radius:5px; }
/* 莫蘭迪(霧藍灰) */
html[data-theme="morandi"] { --bg:#f5f6f7; --surface-2:#f9fafa; --line:#e3e7ea; --line-strong:#cfd6db;
  --text:#2b333a; --muted:#71808c; --faint:#9aa7b1;
  --accent:#7d8fa3; --accent-weak:#edf1f4; --accent-strong:#63788c;
  --theme-panel-edge:#9ba9b8; --theme-control-radius:14px; --theme-panel-radius:16px; }

/* ═══ 各主題的側欄深色配套(同色相深階,LOGO/選中沿用 --accent)═══ */
html[data-theme="luxe"] { --side-bg1:#2b2620; --side-bg2:#211d18; --side-text:#efe9da; --side-item:#d8d0bd; --side-muted:#97917e; --side-link:#b3a98d; --side-shadow:rgba(168,133,60,.35); }
html[data-theme="korean"] { --side-bg1:#4a2f38; --side-bg2:#3b242c; --side-text:#f7e9ed; --side-item:#e8cdd4; --side-muted:#a88a93; --side-link:#cfa3af; --side-shadow:rgba(224,120,143,.4); }
html[data-theme="pro"] { --side-bg1:#1b2c44; --side-bg2:#152338; --side-text:#e8eef5; --side-item:#c3d0e0; --side-muted:#8595aa; --side-link:#9fb4cc; --side-shadow:rgba(30,78,140,.4); }
html[data-theme="fashion"] { --side-bg1:#1a1a1e; --side-bg2:#101013; --side-text:#ececf0; --side-item:#c9c9cf; --side-muted:#85858d; --side-link:#a4a4ac; --side-shadow:rgba(0,0,0,.45); }
html[data-theme="ocean"] { --side-bg1:#143230; --side-bg2:#0f2725; --side-text:#e4f1ef; --side-item:#bcd8d5; --side-muted:#7fa09d; --side-link:#9cc2be; --side-shadow:rgba(15,118,110,.4); }
html[data-theme="mono"] { --side-bg1:#26292e; --side-bg2:#1d2024; --side-text:#e8ebee; --side-item:#c6cbd2; --side-muted:#878d95; --side-link:#a6adb5; --side-shadow:rgba(75,85,99,.4); }
html[data-theme="morandi"] { --side-bg1:#2e3a46; --side-bg2:#242e38; --side-text:#e7edf2; --side-item:#c5cfd9; --side-muted:#8794a1; --side-link:#a3b2c0; --side-shadow:rgba(125,143,163,.4); }

/* BLACK PINK(墨黑側欄 × 螢光粉主色) */
html[data-theme="blackpink"] { --bg:#faf7f9; --surface-2:#fcf9fb; --line:#f0dfe9; --line-strong:#e2c8d7;
  --text:#1c1418; --muted:#7d6a75; --faint:#a6919d;
  --accent:#e0788f; --accent-weak:#fdeef1; --accent-strong:#c95d77;
  --side-bg1:#161216; --side-bg2:#0b090b; --side-text:#f7ebf1; --side-item:#dcc2d1;
  --side-muted:#8d7a86; --side-link:#c095ab; --side-shadow:rgba(224,120,143,.5);
  --theme-panel-edge:#e0788f; --theme-control-radius:5px; --theme-panel-radius:7px; }

/* 深色模式(2026-07-24):整站深底;側欄更深一階;列印時強制回亮色(面單/揀貨單不能印深底) */
html[data-theme="dark"] {
  --bg:#12141a; --surface:#1a1e27; --surface-2:#20252f; --line:#2c3340; --line-strong:#3d4657;
  --text:#e5e8f0; --muted:#9aa3b5; --faint:#707a8c;
  --accent:#8b6cf0; --accent-weak:#2b2650; --accent-strong:#b09bf7;
  --green:#3dbb85; --green-weak:#17332a; --amber:#d9a13c; --amber-weak:#33290f; --red:#e06666; --red-weak:#3a1e1e;
  --blue:#6ea8ff;
  --side-bg1:#0e1015; --side-bg2:#090b0f; --side-text:#e8ebf2; --side-item:#b9c1d1;
  --side-muted:#727b8c; --side-link:#96a1b5; --side-shadow:rgba(139,108,240,.4);
  --theme-panel-edge:#8b6cf0; --theme-control-radius:8px; --theme-panel-radius:10px;
}

/* 所有主題共用三段深色外觀；保留各主題 accent 與角色，僅置換底色與文字階層。 */
html[data-theme-dark="1"] {
  color-scheme:dark;
  --text:#eef1f6; --muted:#aab2c0; --faint:#7f8998;
  --accent-weak:color-mix(in srgb,var(--accent) 24%,var(--surface));
  --theme-topbar-bg:linear-gradient(90deg,var(--surface),color-mix(in srgb,var(--accent) 9%,var(--surface)));
  --theme-toolbar-bg:color-mix(in srgb,var(--accent) 7%,var(--surface-2));
  --theme-table-head-bg:color-mix(in srgb,var(--accent) 10%,var(--surface));
  --theme-row-hover-bg:color-mix(in srgb,var(--accent) 8%,var(--surface-2));
  --theme-overlay-head-bg:linear-gradient(90deg,color-mix(in srgb,var(--accent) 10%,var(--surface)),var(--surface));
  --theme-toast-bg:color-mix(in srgb,var(--accent) 58%,#101218);
  --green:#55c895; --green-weak:#19382d;
  --amber:#e1ad4d; --amber-weak:#3c3018;
  --red:#ef7a82; --red-weak:#3e2027;
  --blue:#78adff;
  --side-text:#f1f3f8; --side-item:#cbd1dc; --side-muted:#8993a3; --side-link:#aab4c4;
  --shadow:0 1px 2px rgba(0,0,0,.18),0 10px 28px rgba(0,0,0,.28);
}
html[data-theme-dark="1"] .sidebar {
  background:linear-gradient(180deg,var(--side-bg1),var(--side-bg2));
}
html[data-theme-dark="1"][data-theme-dark-level="0"] {
  --bg:#08090c; --surface:#101216; --surface-2:#16191e; --line:#252a32; --line-strong:#373e49;
  --side-bg1:color-mix(in srgb,var(--accent) 10%,#090a0d); --side-bg2:#050609;
}
html[data-theme-dark="1"][data-theme-dark-level="1"] {
  --bg:#15181d; --surface:#1d2127; --surface-2:#242930; --line:#343a44; --line-strong:#474f5b;
  --side-bg1:color-mix(in srgb,var(--accent) 13%,#15171c); --side-bg2:#0e1014;
}
html[data-theme-dark="1"][data-theme-dark-level="2"] {
  --bg:#242830; --surface:#2d323b; --surface-2:#353b45; --line:#464e5a; --line-strong:#5b6572;
  --side-bg1:color-mix(in srgb,var(--accent) 16%,#24272e); --side-bg2:#1a1d22;
}
html[data-theme-dark="1"] .theme-page-watermark { opacity:.09; }
html[data-theme-dark="1"] .nav-search-wrap input[type="search"] {
  background:rgba(20,23,29,.94);
  color:#f2eaf0;
  border-color:rgba(255,255,255,.22);
}
html[data-theme-dark="1"] .nav-search-wrap input[type="search"]::placeholder { color:#b8aeb8; }
html[data-theme-dark="1"] .desktop-note {
  border-color:rgba(255,255,255,.22);
  background:linear-gradient(135deg,rgba(28,32,39,.98),rgba(37,38,34,.96));
  box-shadow:0 6px 16px rgba(0,0,0,.32);
}
html[data-theme-dark="1"] .desktop-note input { color:#f2eaf0; }
html[data-theme-dark="1"] .desktop-note input::placeholder { color:#aaa1ad; }
html[data-theme-dark="1"][data-theme="kanahei-bakery"] .topbar {
  color:var(--text);
  border-bottom-color:#6f9d8a;
  background:linear-gradient(90deg,var(--surface),var(--surface-2));
}
html[data-theme-dark="1"][data-theme="kanahei-bakery"] .topbar a {
  color:#d9eee3 !important;
  background:#29372f !important;
  border-color:#577b6c !important;
}
html[data-theme-dark="1"][data-theme="kanahei-bakery"] :is(.nav-item.active,.nav-parent-link.section-active:not(.active)) {
  color:#edf8f1;
  border-color:rgba(148,197,175,.35);
  background:linear-gradient(90deg,rgba(83,130,109,.52),rgba(64,102,84,.7));
}
html[data-theme-dark="1"]:is([data-theme="miffy"],[data-theme="kanahei"],[data-theme="kanahei-bakery"],[data-theme="spongebob"]) .topbar .stat-strip {
  background:rgba(18,23,31,.88);
  border-color:rgba(255,255,255,.2);
}
html[data-theme-dark="1"]:is([data-theme="miffy"],[data-theme="kanahei"],[data-theme="kanahei-bakery"],[data-theme="spongebob"]) .topbar .stat b { color:#f5f7fb; }
html[data-theme-dark="1"]:is([data-theme="miffy"],[data-theme="kanahei"],[data-theme="kanahei-bakery"],[data-theme="spongebob"]) .topbar .stat span { color:#c2cad5; }
html[data-theme-dark="1"]:is([data-theme="miffy"],[data-theme="kanahei"],[data-theme="kanahei-bakery"],[data-theme="spongebob"]) .topbar .stat.info b { color:#8fc4ff; }
html[data-theme-dark="1"]:is([data-theme="miffy"],[data-theme="kanahei"],[data-theme="kanahei-bakery"],[data-theme="spongebob"]) .topbar .stat.warn b { color:#ff9aad; }
@media print {
  html[data-theme="dark"], html[data-theme-dark="1"] {
    color-scheme:light;
    --bg:#fff; --surface:#fff; --surface-2:#fff; --line:#ddd; --line-strong:#bbb;
    --text:#000; --muted:#444; --faint:#666;
    --accent:#333; --accent-weak:#eee; --accent-strong:#000;
    --green:#1f7a4d; --green-weak:#eef; --amber:#8a6d1a; --amber-weak:#f5f0e0; --red:#b91c1c; --red-weak:#fbe7e7;
  }
}

/* 內容區主題連動：只作用於螢幕，避免面單／揀貨單被裝飾色污染。 */
@media screen {
  input[type="checkbox"], input[type="range"] { accent-color:var(--accent); }
  ::selection { background:var(--accent-weak); color:var(--text); }
  * { scrollbar-color:var(--theme-panel-edge) transparent; }
  *::-webkit-scrollbar-thumb { background:var(--theme-panel-edge); border-radius:999px; }

  .pager { background:var(--theme-toolbar-bg); }
  .po-steps, .qadd-box, .ipk-col, .ipk-focus {
    border-radius:var(--theme-panel-radius);
    box-shadow:inset 3px 0 0 var(--theme-panel-edge),var(--theme-card-shadow);
  }
  .drawer.center .drawer-panel, .modal-box { border-radius:var(--theme-panel-radius); }
  :is(input,select,textarea,.qty-in):focus-visible {
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-weak);
  }

  /* Studio UG：沿用同一張 5×5 角色圖集，讓常用狀態也有角色反應。 */
  html[data-theme="studio-ug"] .view {
    background-color:var(--bg);
    background-image:
      radial-gradient(circle at 9px 9px,rgba(12,108,177,.055) 0 1.5px,transparent 2px),
      radial-gradient(circle at 23px 23px,rgba(243,155,190,.07) 0 1.5px,transparent 2px);
    background-size:32px 32px;
  }
  html[data-theme="studio-ug"] .topbar h1::after {
    content:"STUDIO UG";
    display:block;
    margin-top:2px;
    color:#dc648e;
    font-size:9px;
    font-weight:800;
    letter-spacing:.16em;
  }
  html[data-theme="studio-ug"] .studio-ug-title-mascot {
    border-radius:50%;
    background-color:rgba(255,255,255,.72);
    box-shadow:0 0 0 2px rgba(243,155,190,.42),0 5px 12px rgba(12,108,177,.13);
  }
  html[data-theme="studio-ug"] .nav-search-wrap:focus-within .theme-search-character {
    background-position:25% 0;
    transform:translateY(-2px) rotate(-2deg);
  }
  html[data-theme="studio-ug"] .nav-search-wrap:has(input:not(:placeholder-shown)):not(:focus-within) .theme-search-character {
    background-position:75% 0;
  }
  html[data-theme="studio-ug"] .panel:not(.flush) {
    background-image:
      linear-gradient(color-mix(in srgb,var(--surface) 94%,transparent),color-mix(in srgb,var(--surface) 94%,transparent)),
      var(--ug-friend);
    background-repeat:no-repeat;
    background-position:0 0,calc(100% - 10px) 8px;
    background-size:auto,70px 70px;
  }
  html[data-theme="studio-ug"] .tab.active {
    position:relative;
    padding-right:34px;
  }
  html[data-theme="studio-ug"] .tab.active::after,
  html[data-theme="studio-ug"] .kpi::after,
  html[data-theme="studio-ug"] .view > .empty::before,
  html[data-theme="studio-ug"] :is(.toast,.toast-tr):not(.err)::before {
    content:"";
    display:inline-block;
    pointer-events:none;
    background-image:url('/assets/studio-ug-nav-characters.webp');
    background-repeat:no-repeat;
    background-size:500% 500%;
  }
  html[data-theme="studio-ug"] .tab.active::after {
    position:absolute;
    right:5px;
    top:50%;
    width:23px;
    height:23px;
    translate:0 -50%;
    background-position:75% 50%;
  }
  html[data-theme="studio-ug"] .kpi {
    position:relative;
    overflow:hidden;
    padding-right:42px;
  }
  html[data-theme="studio-ug"] .kpi::after {
    position:absolute;
    right:3px;
    bottom:-3px;
    width:38px;
    height:38px;
    opacity:.2;
    background-position:var(--ug-kpi-x,0%) 0;
  }
  html[data-theme="studio-ug"] .kpi:nth-child(2)::after { --ug-kpi-x:25%; }
  html[data-theme="studio-ug"] .kpi:nth-child(3)::after { --ug-kpi-x:50%; }
  html[data-theme="studio-ug"] .kpi:nth-child(4)::after { --ug-kpi-x:75%; }
  html[data-theme="studio-ug"] .kpi:nth-child(5)::after { --ug-kpi-x:100%; }
  html[data-theme="studio-ug"] .view > .empty::before {
    width:58px;
    height:58px;
    margin:0 auto 8px;
    background-position:75% 100%;
  }
  html[data-theme="studio-ug"] :is(.toast,.toast-tr):not(.err)::before {
    width:28px;
    height:28px;
    margin:-6px 8px -8px -9px;
    vertical-align:middle;
    background-position:0 25%;
  }
  html[data-theme-dark="1"][data-theme="studio-ug"] .panel:not(.flush) {
    background-image:
      linear-gradient(color-mix(in srgb,var(--surface) 90%,transparent),color-mix(in srgb,var(--surface) 90%,transparent)),
      var(--ug-friend);
  }
}

@media (max-width:860px) {
  html[data-theme="studio-ug"] .panel:not(.flush) { background-image:none; }
  html[data-theme="studio-ug"] .tab.active { padding-right:16px; }
  html[data-theme="studio-ug"] .tab.active::after,
  html[data-theme="studio-ug"] .kpi::after,
  html[data-theme="studio-ug"] .view > .empty::before,
  html[data-theme="studio-ug"] :is(.toast,.toast-tr):not(.err)::before { display:none; }
}

/* ── 登入頁(2026-07-30 改版)──────────────────────────────────────────────
   紙感主控台:暖灰熱感紙底 + 等寬字 + 直角高對比。左敘事欄(公司識別)/右表單卡。
   ⚠ 登入頁統一一種樣貌,主題只作用在登入後的系統內 —— 8 個角色主題原本各自畫的
     .login-wrap 背景與 ::after 吉祥物已在改版時刪除(同特異度 0,2,1 會互相蓋成死碼)。
     要是未來想做主題化登入,規則必須放在這個區塊「之後」才會生效,別放回上面主題區。
     下面的 ::after !important 是保險:任何人再加主題吉祥物也不會壓到表單。
   ⚠ 一切樣式都掛 [data-login-style],不會外溢到其他頁面。 */
.login-wrap[data-login-style] {
  --login-bg:#d9d4ca;
  --login-story-ink:#171717;
  --login-card:#fffefa;
  --login-ink:#171717;
  --login-muted:#5a564e;
  --login-input:#fff;
  --login-accent:#171717;
  --login-accent-ink:#fff;
  --login-line:#171717;
  --login-radius:0px;
  --login-shadow:0 18px 40px rgba(25,22,17,.2);
  --login-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
html .login-wrap[data-login-style] {
  position:fixed;
  inset:0;
  /* ⚠ 不要在這裡放 z-index:120 —— toast 是 z-index:80 且掛在 body 尾端,
     登入層一疊上去就把 toast 蓋住:session 過期被 401 踢回登入頁時(那條路沒有
     頁內錯誤區)員工會完全看不到任何說明。登入頁是 body 唯一內容,不需要 z-index。 */
  isolation:isolate;
  /* 強制淺色:深色主題會在 html 掛 color-scheme:dark,繼承下來會讓瀏覽器把
     自動填入欄位/UA 控件畫成深色配色,疊在紙感白卡上變低對比。 */
  color-scheme:light;
  display:grid;
  grid-template-columns:minmax(0,1.16fr) minmax(360px,.84fr);
  place-items:stretch;
  min-height:100vh;
  min-height:100dvh;
  overflow:auto;
  background:var(--login-bg);
  color:var(--login-ink);
  font-family:"Noto Sans TC",system-ui,-apple-system,"Segoe UI",sans-serif;
}
/* 角色主題的登入吉祥物在新版面會壓到表單 → 關掉(主題本體不受影響) */
html .login-wrap[data-login-style]::after { display:none !important; content:none !important; }

.login-scene { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
/* 熱感紙的細橫紋 */
.login-deco-grid { position:absolute; inset:0; background:repeating-linear-gradient(0deg,rgba(0,0,0,.035) 0 1px,transparent 1px 4px); }

.login-story,
.login-panel { position:relative; z-index:1; min-width:0; }
.login-story {
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(48px,7vw,112px);
  color:var(--login-story-ink);
}
/* ⚠ 這一欄的每個元素都用固定 margin 銜接:曾經用 margin-bottom:auto(招牌)+
   margin-top:auto(大標)兩個 auto 互推,內容被拉到上下兩端、中間開一個大洞。 */
.login-wordmark { display:flex; align-items:baseline; gap:10px; margin:0 0 clamp(26px,4.6vh,58px); }
.login-wordmark strong { font-size:clamp(15px,1.45vw,22px); font-weight:800; letter-spacing:.075em; }
.login-story h1 {
  max-width:780px;
  margin:0;
  font-family:var(--login-mono);
  font-size:clamp(38px,5.3vw,78px);
  line-height:1.02;
  letter-spacing:-.05em;
  text-wrap:balance;
}
.login-caption { max-width:520px; margin:22px 0 0; font-size:clamp(14px,1.2vw,17px); line-height:1.8; letter-spacing:.04em; opacity:.78; }
.login-story-meta {
  display:flex; flex-wrap:wrap; gap:20px;
  margin-top:clamp(24px,4vh,44px); padding-top:14px;
  border-top:1px solid currentColor;
  max-width:520px;
  font:600 9px/1.2 var(--login-mono); letter-spacing:.14em;
  opacity:.5;
}

.login-panel { display:flex; flex-direction:column; justify-content:center; gap:12px; padding:clamp(28px,5vw,80px); }
.login-card {
  position:relative;
  width:min(100%,430px);
  align-self:center;
  display:flex;
  flex-direction:column;
  gap:17px;
  padding:clamp(28px,4vw,44px);
  border:1px solid var(--login-line);
  border-radius:var(--login-radius);
  background:var(--login-card);
  color:var(--login-ink);
  box-shadow:var(--login-shadow);
  font-family:var(--login-mono);
}
.login-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:6px; }
.login-card .login-logo { display:flex; align-items:center; gap:11px; margin:0; color:inherit; font-size:15px; font-weight:700; letter-spacing:.06em; }
.login-logo-mark {
  width:40px; height:40px; flex:0 0 auto;
  display:grid; place-items:center;
  border-radius:11px;
  background:var(--login-accent);
  color:var(--login-accent-ink);
  font:900 20px/1 Arial,sans-serif;
}
.login-logo small { display:block; margin-top:4px; color:var(--login-muted); font:600 8px/1.1 var(--login-mono); letter-spacing:.13em; }
.login-secure-dot { display:flex; align-items:center; gap:5px; color:var(--login-muted); font:700 8px/1 var(--login-mono); letter-spacing:.08em; white-space:nowrap; }
.login-secure-dot::before { content:""; width:6px; height:6px; border-radius:50%; background:#2f9e6b; box-shadow:0 0 0 4px rgba(47,158,107,.14); }

.login-card .field { gap:7px; }
.login-card .field label { display:flex; justify-content:space-between; align-items:baseline; color:var(--login-muted); font-size:12px; font-weight:700; letter-spacing:.05em; }
.login-card .field label small { font:600 8px/1 var(--login-mono); letter-spacing:.1em; opacity:.65; }
.login-card .field input {
  width:100%;
  height:50px;
  padding:0 15px;
  border:1px solid var(--login-line);
  border-radius:calc(var(--login-radius) + 2px);
  outline:0;
  background:var(--login-input);
  color:var(--login-ink);
  /* 16px 是 iOS 不自動放大縮放的門檻 —— 手機登入不可小於這個值 */
  /* ⚠ 不可寫成 font:600 16px/1 inherit —— font 簡寫的 family 位置不接受 inherit,
     整條宣告會被瀏覽器丟掉(實測 font-size 掉回 14px)。字體本來就從 .login-card 繼承。
     16px 是 iOS Safari 聚焦時不自動放大縮放的門檻,手機登入不可小於這個值。 */
  font-weight:600;
  font-size:16px;
  line-height:1;
}
html .login-wrap[data-login-style] .login-card .field input:focus-visible,
html .login-wrap[data-login-style] .login-card .field input:focus {
  border-color:var(--login-accent);
  box-shadow:0 0 0 4px rgba(23,23,23,.14);
}
/* 密碼欄 + 顯示/隱藏切換(觸控目標 ≥44px) */
.login-pass { position:relative; display:flex; }
/* ⚠ 選擇器要壓過同區塊的 `.login-card .field input { padding:0 15px }`(0,3,0)——
   否則 padding 簡寫會把 padding-right 重設成 15px,長密碼的字會跑到「顯示」鈕底下。 */
.login-card .field .login-pass input { padding-right:74px; }
.login-eye {
  position:absolute; right:5px; top:50%; transform:translateY(-50%);
  min-width:62px; height:44px; padding:0 10px; /* 44px = 觸控目標下限,別再調小 */
  border:1px solid var(--login-line); border-radius:calc(var(--login-radius) + 2px);
  background:transparent; color:var(--login-muted);
  font:700 11px/1 var(--login-mono); letter-spacing:.06em; cursor:pointer;
}
.login-eye:hover { color:var(--login-ink); }
.login-eye[aria-pressed="true"] { background:var(--login-accent); border-color:var(--login-accent); color:var(--login-accent-ink); }
.login-caps,
.login-alert { margin:0; font:700 11.5px/1.5 var(--login-mono); letter-spacing:.03em; }
.login-caps { color:#a8681c; }
.login-alert { padding:10px 12px; border:1px solid #b3392f; background:rgba(179,57,47,.08); color:#8e2b23; }
html .login-wrap[data-login-style] .login-card .login-submit {
  width:100%;
  height:52px;
  display:flex; align-items:center; justify-content:space-between;
  margin-top:3px;
  padding:0 17px;
  border:0;
  border-radius:calc(var(--login-radius) + 2px);
  background:var(--login-accent);
  color:var(--login-accent-ink);
  box-shadow:none;
  font-family:inherit;
  font-size:14px;
  font-weight:800;
  letter-spacing:.04em;
}
html .login-wrap[data-login-style] .login-card .login-submit:hover:not(:disabled) { filter:brightness(1.35); background:var(--login-accent); color:var(--login-accent-ink); }
.login-card .login-submit span { font:700 9px/1 var(--login-mono); letter-spacing:.1em; opacity:.75; }
.login-card .login-hint { margin:0; color:var(--login-muted); font:600 9px/1.5 var(--login-mono); letter-spacing:.09em; text-align:center; }

@media (max-width:900px) {
  html .login-wrap[data-login-style] { grid-template-columns:1fr; align-content:start; }
  .login-story { min-height:34vh; padding:30px 26px 24px; }
  .login-wordmark { margin-bottom:46px; }
  .login-story h1 { max-width:88%; font-size:clamp(34px,9.4vw,60px); }
  .login-caption { max-width:88%; margin-top:12px; font-size:13.5px; line-height:1.7; }
  .login-story-meta { margin-top:16px; gap:14px; }
  .login-panel { padding:18px 18px 34px; }
  .login-card { width:min(100%,520px); }
}
@media (max-width:520px) {
  .login-story { min-height:0; padding:26px 20px 20px; }
  .login-wordmark { margin-bottom:30px; }
  .login-wordmark strong { font-size:14px; }
  .login-story-meta { gap:11px; font-size:7.5px; }
  .login-panel { padding:14px 14px 26px; }
  .login-card { gap:15px; padding:24px 20px; }
}
/* 桌機矮視窗(筆電 + 開了工作列/分頁)不要讓卡片被切掉 */
@media (min-width:901px) and (max-height:690px) {
  .login-story { padding-top:34px; padding-bottom:34px; }
  .login-wordmark { margin-bottom:30px; }
  .login-story h1 { font-size:clamp(34px,4.4vw,62px); }
  .login-caption { margin-top:14px; }
  .login-story-meta { margin-top:18px; }
  .login-panel { padding-top:22px; padding-bottom:22px; }
  .login-card { gap:13px; padding:24px 30px; }
  .login-card .field input { height:46px; }
  .login-eye { height:40px; } /* 矮視窗只在桌機出現(滑鼠操作),可讓一點高度 */
  html .login-wrap[data-login-style] .login-card .login-submit { height:48px; }
}
@media (prefers-reduced-motion:reduce) {
  .login-wrap[data-login-style],
  .login-wrap[data-login-style] *,
  .login-wrap[data-login-style] *::before,
  .login-wrap[data-login-style] *::after { animation:none !important; transition:none !important; }
}


/* 合併檢貨單列印預覽視窗(2026-08-18 user:「別切走畫面」)—— 疊在清單上,關掉勾選還在;
   列印時只留 .print-area(既有全域 @media print 規則),外框與工具列用 .no-print 隱藏 */
.pk-modal { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.35);
  display: flex; align-items: flex-start; justify-content: center; padding: 24px; overflow: auto; }
.pk-modal-panel { background: var(--card, #fff); border-radius: 12px; width: min(1100px, 100%);
  box-shadow: 0 12px 40px rgba(0,0,0,.25); overflow: hidden; }
.pk-modal-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid var(--line, #e5e5e5); position: sticky; top: 0; background: var(--card, #fff); z-index: 1; }
.pk-modal-body { padding: 0 0 12px; }
@media print {
  .pk-modal { position: static; background: none; padding: 0; overflow: visible; }
  .pk-modal-panel { box-shadow: none; border-radius: 0; width: 100%; }
  .pk-modal-head { display: none !important; }
}

/* Last print fence: character and colour themes must never tint shipping labels,
   picking sheets or other printable documents. */
@media print {
  .desktop-note,
  .theme-options,
  .theme-page-watermark,
  .studio-ug-page-friend,
  .chainsaw-dance,
  .crayon-shinchan-walk,
  .theme-character-search-btn::after,
  [data-theme-scene-mascot] { display:none !important; }
  .theme-character-search-btn { margin-inline-end:0 !important; max-width:none !important; }
  :root, html[data-theme], html[data-theme-dark="1"] {
    --theme-topbar-bg:#fff;
    --theme-toolbar-bg:#fff;
    --theme-table-head-bg:#fff;
    --theme-row-hover-bg:#fff;
    --theme-overlay-head-bg:#fff;
    --theme-panel-edge:#ddd;
    --theme-card-shadow:none;
    --theme-action-shadow:none;
  }
  :is(.print-area,.print-area .panel,.print-area .kpi) {
    background:#fff !important;
    box-shadow:none !important;
  }
  .print-area :is(.grid,.table-std) thead th {
    background:#fff !important;
    color:#000 !important;
  }
  .print-area :is(.toolbar,.toolbar-line,.tabs,.pager) {
    background:#fff !important;
    box-shadow:none !important;
  }
  .print-area .btn { box-shadow:none !important; }
}