/* Warna aksen per user: bulatan pilihan, tombol header, kartu Tampilan dan kartu admin. Semua warna dari token, jadi ikut aksen dan mode gelap. */
.swatches{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0 6px}
.swatch{--sw:#2563EB;position:relative;width:44px;height:44px;border-radius:50%;border:0;padding:0;background:var(--sw);color:#fff;display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);transition:transform .16s var(--ease-out,cubic-bezier(.23,1,.32,1)),box-shadow .16s var(--ease-out,cubic-bezier(.23,1,.32,1))}
.swatch svg{width:20px;height:20px;opacity:0;transform:scale(.6);stroke-width:3;transition:opacity .16s,transform .16s var(--ease-out,cubic-bezier(.23,1,.32,1))}
.swatch[aria-pressed=true]{box-shadow:0 0 0 3px var(--surface,#fff),0 0 0 5px var(--sw)}
.swatch[aria-pressed=true] svg{opacity:1;transform:none}
.swatch:active{transform:scale(.94)}
.swatch:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
@media (hover:hover) and (pointer:fine){.swatch:hover{transform:scale(1.07)}.swatch:active{transform:scale(.94)}}

.accent-btn .accent-dot{position:absolute;right:7px;bottom:7px;width:9px;height:9px;border-radius:50%;background:var(--blue);border:2px solid var(--surface,#fff);box-sizing:content-box;margin:-2px}
.accent-pop{width:300px;padding-bottom:10px}
.accent-pop .accent-body{padding:0 16px 6px}
.accent-pop .sub{margin:0;color:var(--ink-2);font-size:13px}
.accent-pop .swatches{margin:12px 0 10px;gap:10px}
.accent-pop .swatch{width:40px;height:40px}
.accent-pop .pop-item{margin:0 -16px;width:calc(100% + 32px)}

.accent-free{display:flex;gap:12px;align-items:center;margin:12px 0}
.accent-free input[type=color]{width:44px;height:44px;padding:3px;border:1px solid var(--line);border-radius:12px;background:var(--surface,#fff)}
.accent-free .hex{width:120px;height:44px;border:1px solid var(--line);border-radius:12px;padding:0 12px;font-family:var(--sans);font-variant-numeric:tabular-nums;font-weight:600;text-transform:uppercase;background:var(--surface,#fff);color:var(--ink)}
.accent-sample{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0;padding:14px;border:1px dashed var(--line);border-radius:14px}
.accent-sample .bar{flex:1;min-width:90px;height:8px;border-radius:99px;background:var(--mint-2);overflow:hidden}
.accent-sample .bar i{display:block;width:62%;height:100%;border-radius:99px;background:var(--blue)}
.accent-actions{display:flex;gap:10px;flex-wrap:wrap}
.panel .checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin:12px 0}
.check .sw-dot{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--sw);margin-right:8px;vertical-align:-2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
html[data-theme="dark"] .swatch[aria-pressed=true]{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--sw)}
@media (max-width:420px){.accent-btn,.top .pop-wrap:has(.accent-btn){display:none}}
@media (prefers-reduced-motion:reduce){.swatch,.swatch svg{transition:none}}
.panel .user-btn .who{display:block}

/* Pilihan palet warna (Classic Blue, Ocean, Sunset, Forest, Earth, Midnight) */
.pal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:8px;margin:12px 0 8px}
.pal-chip{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface,#fff);color:var(--ink);font-weight:500;text-align:left;transition:border-color .16s,box-shadow .16s,transform .16s var(--ease-out,cubic-bezier(.23,1,.32,1))}
.pal-chip:active{transform:scale(.97)}
.pal-chip[aria-pressed=true]{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue);font-weight:600}
.pal-chip{min-width:0}
.pal-chip>span:not(.pal-dots){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pal-chip svg{display:none}
.pal-dots{display:inline-flex;flex:none}
.pal-dots i{width:16px;height:16px;border-radius:50%;background:var(--sw);border:2px solid var(--surface,#fff);margin-left:-5px;box-sizing:content-box;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.pal-dots i:first-child{margin-left:0}
html[data-theme=dark] .pal-dots i{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
@media (hover:hover) and (pointer:fine){.pal-chip:hover{border-color:var(--ink-3)}}
.accent-pop{width:380px;max-width:calc(100vw - 24px)}
.accent-pop .pal-grid{grid-template-columns:1fr 1fr;margin:10px 0 12px}
.accent-pop .pal-chip{padding:6px 10px;gap:8px;font-size:13px}
.accent-pop .pop-sub{margin:10px 0 2px;font:600 13px var(--sans);color:var(--ink)}
@media (prefers-reduced-motion:reduce){.pal-chip{transition:none}}
.neon-switch{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-top:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font-weight:600}
.neon-switch .ns-track{position:relative;width:38px;height:22px;border-radius:99px;background:var(--line);transition:background-color .25s var(--ease-out)}
.neon-switch .ns-track i{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .25s var(--ease-out)}
.neon-switch[aria-checked=true] .ns-track{background:var(--nx,var(--blue))}
.neon-switch[aria-checked=true] .ns-track i{transform:translateX(16px)}