/* 左側圖示列：圓角卡片。寬度跟 window_state.rs 的 SIDEBAR_WIDTH 一致。 */
:root {
  color-scheme: light dark;
  --bg: #eff0f3;
  --card: #ffffff;
  --card-hover: #ffffff;
  --text: #1d1d1f;
  --accent: #007aff;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05);
  --edge: rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #232326; --card: #2f2f33; --card-hover: #38383d; --text: #f2f2f5; --accent: #0a84ff;
    --shadow: 0 1px 2px rgba(0,0,0,.4); --edge: rgba(0,0,0,.5); }
}
html.private { color-scheme: dark; --bg: #1f1d28; --card: #2c2938; --card-hover: #35324a; --text: #f1effa;
  --accent: #9b8cff; --shadow: 0 1px 2px rgba(0,0,0,.4); --edge: rgba(0,0,0,.5); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg);
  font: 12px -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", sans-serif;
  -webkit-user-select: none; user-select: none; cursor: default; }
body { border-right: 1px solid var(--edge); display: flex; flex-direction: column; }
/* 按鈕多到放不下時可以捲（不顯示捲軸）；最下面固定「自訂」 */
nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0; }
nav::-webkit-scrollbar { display: none; }
footer { flex-shrink: 0; display: flex; justify-content: center; padding: 8px 0 12px; }
button { width: 68px; height: 74px; border: 1.5px solid transparent; border-radius: 14px; background: var(--card);
  box-shadow: var(--shadow); color: var(--text); font: inherit; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; padding: 0; transition: transform .1s, background-color .12s; }
button:hover { background: var(--card-hover); transform: translateY(-1px); }
button:active { transform: scale(.97); }
button.active { border-color: var(--accent); }
button.active .label { color: var(--accent); font-weight: 600; }
button { flex-shrink: 0; }
.label { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#customize { height: 60px; gap: 2px; }
#customize .svg-icon { width: 30px; height: 30px; }
/* 拖曳排序中 */
button.dragging { position: relative; z-index: 1; transform: scale(1.05); box-shadow: 0 6px 18px rgba(0,0,0,.22); }
nav.sorting button { transition: none; }
img { width: 38px; height: 38px; object-fit: contain; pointer-events: none; }
.svg-icon { width: 38px; height: 38px; display: block; pointer-events: none; }
.svg-icon svg { width: 100%; height: 100%; display: block; }
/* 自己加的按鈕：字放在彩色圓角方塊上；emoji 用淺色底 */
.glyph { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: hsl(var(--hue) 68% 50%); color: #fff; font-size: 19px; font-weight: 600; line-height: 1; pointer-events: none; overflow: hidden; }
.glyph.medium { font-size: 14.5px; }
.glyph.small { font-size: 11px; }
.glyph.emoji { background: hsl(var(--hue) 75% 92%); font-size: 23px; font-weight: 400; }
@media (prefers-color-scheme: dark) { .glyph.emoji { background: hsl(var(--hue) 30% 32%); } }
html.private .glyph.emoji { background: hsl(var(--hue) 30% 32%); }
img.dark { display: none; }
@media (prefers-color-scheme: dark) { img.light { display: none; } img.dark { display: block; } }
html.private img.light { display: none; }
html.private img.dark { display: block; }