/* LAN Control — Settings → Theme: the flippers for the Brain and the Lantern. Tokens only, so every theme carries it. */
.look-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap:18px; margin-top:18px; }
.look-grid .panel { margin:0; }
.look-flip { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:10px; }
.look-arrow { width:36px; height:36px; border-radius:50%; background:var(--soft); color:var(--ink-2); border:1px solid var(--line); }
.look-arrow:hover { background:var(--hover); color:var(--ink); border-color:var(--line-2); }
.look-stage { position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:radial-gradient(120% 90% at 50% 45%, color-mix(in srgb, var(--surface) 70%, var(--bg)), var(--bg)); }
.look-stage::before { content:""; position:absolute; inset:0 0 auto 0; height:2px; background:linear-gradient(90deg, transparent, var(--gold), var(--gold-2), var(--gold), transparent); opacity:.7; z-index:1; }
.look-big { display:block; width:100%; height:clamp(200px, 26vw, 280px); }
.look-big.flip { animation:lookFlip .42s var(--ease); }
@keyframes lookFlip { 0% { transform:perspective(900px) rotateY(-70deg); opacity:0; } 100% { transform:none; opacity:1; } }
.look-cap { position:absolute; left:12px; bottom:10px; right:12px; z-index:2; display:flex; flex-direction:column; gap:1px; pointer-events:none; }
.look-cap b { font-size:14px; font-weight:700; color:var(--ink); text-shadow:0 0 8px var(--bg), 0 0 2px var(--bg); }
.look-cap span { font-size:12px; color:var(--ink-2); text-shadow:0 0 8px var(--bg), 0 0 2px var(--bg); }
.look-dots { position:absolute; right:12px; top:10px; z-index:2; display:flex; gap:5px; }
.look-dots i { width:6px; height:6px; border-radius:50%; background:var(--line-2); transition:background .2s, transform .2s; }
.look-dots i.on { background:var(--gold); transform:scale(1.25); }
.look-strip { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:8px; margin-top:12px; }
.look-thumb { display:flex; flex-direction:column; gap:5px; align-items:stretch; padding:5px; font:inherit; cursor:pointer; border:1px solid var(--line-2); border-radius:10px; background:var(--surface); color:var(--muted); transition:border-color .2s, box-shadow .2s, transform .2s, color .2s; }
.look-thumb canvas { display:block; width:100%; height:54px; border-radius:6px; background:var(--bg); }
.look-thumb span { font-size:11px; font-weight:600; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.look-thumb:hover { border-color:var(--amber); transform:translateY(-1px); color:var(--ink); }
.look-thumb.on { border-color:var(--accent); color:var(--accent-text); box-shadow:inset 0 0 0 1px var(--accent), 0 6px 16px -10px var(--accent); }
.look-panel:focus-visible { outline:2px solid var(--amber); outline-offset:2px; }
@media (max-width: 640px) {
  .look-strip { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .look-flip { grid-template-columns:1fr; }
  .look-arrow { display:none; }
  .look-big { height:220px; }
}