/*
 * 顏色盤（templates/_palette.html）。對外頁面與系統內頁都載入這一份：
 * 兩邊的變數名不同，所以每個顏色都寫成「對外的變數 → 系統的變數 → 固定色」三層退路。
 */
.palette{position:relative;display:inline-flex}
.palbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;cursor:pointer;border-radius:8px;
  background:var(--panel-2,transparent);
  border:1px solid var(--rule2,transparent);
}
.palbtn:hover{border-color:var(--accent)}
.palbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* 按鈕本身就是三格顏色的縮圖：主色、背景、跑道 */
.paldot{
  width:18px;height:18px;border-radius:50%;
  background:conic-gradient(var(--accent) 0 120deg,var(--track,#bf4029) 120deg 240deg,var(--bg-1,var(--bg,#181b19)) 240deg 360deg);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.55);
}
.palpanel{
  position:absolute;top:calc(100% + 10px);right:0;z-index:120;
  width:min(300px,calc(100vw - 32px));padding:14px;
  background:var(--white,var(--surface,#232724));
  color:var(--ink,var(--text,#fff));
  border:1px solid var(--rule,var(--border,#373c38));border-radius:12px;
  box-shadow:0 24px 50px -20px rgba(0,0,0,.55);
  text-align:left;
}
.paltitle{margin:0 0 10px;font-weight:700;font-size:14px}
.palslot{margin:0 0 10px}
.pallabel{display:block;font-size:12px;margin-bottom:6px;color:var(--mute,var(--text-dim,#8e938f))}
.palrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.palsw{
  width:26px;height:26px;padding:0;cursor:pointer;border-radius:50%;
  background:var(--sw);border:2px solid transparent;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}
/* 「預設」一格：斜線代表「不自訂」 */
.palsw.is-default{
  background:linear-gradient(135deg,transparent 45%,var(--mute,var(--text-dim,#8e938f)) 45% 55%,transparent 55%),
    var(--panel-2,var(--surface-2,#2b302d));
}
.palsw[aria-pressed="true"]{border-color:var(--ink,var(--text,#fff));box-shadow:0 0 0 2px var(--accent)}
.palsw:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.palpick{position:relative;width:26px;height:26px;border-radius:50%;overflow:hidden;cursor:pointer;
  background:conic-gradient(#f44 0deg,#fd4 60deg,#4d4 120deg,#4dd 180deg,#44f 240deg,#d4d 300deg,#f44 360deg)}
.palpick input{position:absolute;inset:-6px;width:40px;height:40px;opacity:0;cursor:pointer;border:0;padding:0}
.palnote{margin:4px 0 10px;font-size:12px;line-height:1.5;color:var(--mute,var(--text-dim,#8e938f))}
.palette.is-dirty .palnote{color:var(--ink,var(--text,#fff))}
.palacts{display:flex;gap:8px}
.palacts button{flex:1;min-height:36px;border-radius:8px;cursor:pointer;font:inherit;font-size:13px;font-weight:600}
.palsave{background:var(--accent);color:var(--accent-ink,#fff);border:1px solid var(--accent)}
.palreset{background:transparent;color:var(--ink,var(--text,#fff));border:1px solid var(--rule,var(--border,#373c38))}
/* 手機：面板改成貼住畫面右邊，不會超出 375px */
@media (max-width:600px){
  .palpanel{position:fixed;top:64px;right:16px;left:16px;width:auto}
}