/* ═════════════════════════════════════════════════════════════════════
   ANKLE OS THEME SYSTEM
   Loaded on every aleqth.com / ankle.website / ANKLE.app page.
   Activate a theme by setting `document.body.className = "theme-<name>"`.
   Overlay skins (wallpaper + grid) activate automatically when the
   corresponding CSS variables are defined on :root.
   ═════════════════════════════════════════════════════════════════════ */

/* ── Base hooks — all themed pages should use these vars ──────────── */
:root {
  --bg: #c0c0c0;
  --fg: #000;
  --panel: #fff;
  --muted: #555;
  --line: #000;
  --link: #0000ee;
  --visited: #551a8b;
  --highlight: #ffffe0;
  --media-well: #000;
  --body-font: "Times New Roman", Times, serif;
  --mono-font: "Courier New", Courier, monospace;
  --radius: 0;
  --shadow: none;

  /* Skin overlay knobs — unset by default */
  --wallpaper-url: none;
  --wallpaper-opacity: 0.28;
  --wallpaper-size: cover;     /* cover | contain | <length> */
  --wallpaper-repeat: no-repeat; /* repeat | no-repeat */
  --grid-url: none;
  --grid-opacity: 0.3;
  --grid-blend: multiply;
}

/* ── Theme presets (body class based) ─────────────────────────────── */
body.theme-discmaster {
  --bg: #c0c0c0;
  --fg: #000;
  --panel: #fff;
  --muted: #555;
  --line: #000;
  --link: #0000ee;
  --visited: #551a8b;
  --highlight: #ffffe0;
  --media-well: #000;
  --body-font: "Times New Roman", Times, serif;
  --mono-font: "Courier New", Courier, monospace;
  --display-font: "Press Start 2P","Courier New",monospace;
  --digital-font: "VT323","Courier New",monospace;
  --radius: 0;
  --shadow: none;
}
/* Hard edges EVERYWHERE under discmaster — no rounded anything */
body.theme-discmaster *,
body.theme-discmaster *::before,
body.theme-discmaster *::after { border-radius: 0 !important; }
body.theme-discmaster input,
body.theme-discmaster textarea,
body.theme-discmaster select {
  border: 2px inset #fff !important;
  background: #fff !important;
  color: #000 !important;
  font-family: var(--mono-font) !important;
  border-radius: 0 !important;
}
body.theme-discmaster button:not(.theme-opt),
body.theme-discmaster .btn {
  border: 2px outset #fff !important;
  background: #c0c0c0 !important;
  color: #000 !important;
  font-family: var(--mono-font) !important;
  border-radius: 0 !important;
}
body.theme-discmaster button:not(.theme-opt):active,
body.theme-discmaster .btn:active { border-style: inset !important; }

body.theme-midnight-acid {
  --bg: #05070b;
  --fg: #f2f5f7;
  --panel: #0b0f16;
  --muted: #8590a2;
  --line: #1d2735;
  --link: #c7ff00;
  --visited: #c7ff00;
  --highlight: #c7ff00;
  --media-well: #0b0f16;
  --body-font: "Fragment Mono","SF Mono",Monaco,Consolas,"Fira Code",monospace;
  --mono-font: "Fragment Mono","SF Mono",Monaco,Consolas,"Fira Code",monospace;
  --radius: 14px;
  --shadow: 0 12px 40px rgba(0,0,0,.45);
}

body.theme-graphpaper {
  /* Augmented discmaster: grid background built in (engineering notebook) */
  --bg: #f6f4ea;
  --fg: #102030;
  --panel: #fdfbf2;
  --muted: #6b7a88;
  --line: #2a3a50;
  --link: #1a4dff;
  --visited: #6b35d4;
  --highlight: #fff4a6;
  --media-well: #1a1a1a;
  --body-font: "Times New Roman", Times, serif;
  --mono-font: "Courier New", Courier, monospace;
  --radius: 0;
  --shadow: none;
  --grid-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><path d='M32 0H0V32' fill='none' stroke='%232a3a50' stroke-width='0.4'/></svg>");
  --grid-opacity: 0.35;
  --grid-blend: multiply;
}

body.theme-phosphor {
  /* Dark phosphor terminal — CRT green-on-black */
  --bg: #0a0f08;
  --fg: #7fff6a;
  --panel: #0f170c;
  --muted: #4a8c3a;
  --line: #1f3316;
  --link: #c7ff00;
  --visited: #a8ff7e;
  --highlight: rgba(127,255,106,.18);
  --media-well: #000;
  --body-font: "Fragment Mono","Courier New",monospace;
  --mono-font: "Fragment Mono","Courier New",monospace;
  --radius: 0;
  --shadow: 0 0 40px rgba(127,255,106,.15);
  --grid-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><path d='M0 2H4' stroke='%23000' stroke-width='1' opacity='0.35'/></svg>");
  --grid-opacity: 1;
  --grid-blend: normal;
}

body.theme-paper {
  /* Warm white printout aesthetic */
  --bg: #f8f3e6;
  --fg: #1a1a1a;
  --panel: #fffbf0;
  --muted: #6a6458;
  --line: #1a1a1a;
  --link: #a42a00;
  --visited: #742000;
  --highlight: #fff2a8;
  --media-well: #1a1a1a;
  --body-font: "Times New Roman", Times, serif;
  --mono-font: "Courier New", Courier, monospace;
  --radius: 0;
  --shadow: 0 1px 2px rgba(0,0,0,.1);
}

/* ── Global application of theme vars to body ─────────────────────── */
body[class*="theme-"] {
  background: var(--bg) !important;
  color: var(--fg) !important;
  font-family: var(--body-font) !important;
}
body[class*="theme-"] a { color: var(--link) !important; }
body[class*="theme-"] a:visited { color: var(--visited) !important; }

/* ── Skin overlays (wallpaper + grid) ─────────────────────────────── */
/* The wallpaper layer sits behind all content; the grid layer on top. */
body[class*="theme-"]::before,
body[class*="theme-"]::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
body[class*="theme-"]::before {
  /* Wallpaper layer */
  background-image: var(--wallpaper-url);
  background-size: var(--wallpaper-size);
  background-repeat: var(--wallpaper-repeat);
  background-position: center center;
  background-attachment: fixed;
  opacity: var(--wallpaper-opacity);
}
body[class*="theme-"]::after {
  /* Grid / texture overlay layer */
  background-image: var(--grid-url);
  background-size: auto;
  background-repeat: repeat;
  opacity: var(--grid-opacity);
  mix-blend-mode: var(--grid-blend);
}
/* When neither skin layer is defined, keep the pseudos invisible */
body[style*="--wallpaper-url: none"]::before,
body[class*="theme-"]:not([style*="--wallpaper-url"])::before { opacity: 0 }
body[class*="theme-"]:not(.has-grid):not([style*="--grid-url"]):not(.theme-graphpaper):not(.theme-phosphor)::after { opacity: 0 }

/* ═══════════════════════════════════════════════════════════════════
   @⌘ terminal v2 (ankle_terminal_v2.js) — discmaster override
   "terminal by Ankle" panel: the ANKLE protocol v1.4 widget with
   ingest/collect/discover chips. Ships dark #0a0a0a bg by default; we
   repaint it in discmaster gray + Times serif + Win95 chips.
   ═══════════════════════════════════════════════════════════════════ */
body.theme-discmaster .ankle-fab{
  background:#c0c0c0 !important; color:#000 !important;
  border:2px outset #fff !important; border-radius:0 !important;
  font-family:"Courier New",Courier,monospace !important;
  box-shadow:none !important;
}
body.theme-discmaster .ankle-fab.active{
  background:#ffffe0 !important; color:#000 !important; border:1px solid #000 !important;
}
body.theme-discmaster .ankle-fab:active{ border-style:inset !important; }
body.theme-discmaster .ankle-fab:hover{ transform:none !important; box-shadow:none !important; }

body.theme-discmaster .ankle-terminal{
  background:#c0c0c0 !important; color:#000 !important;
  border:1px solid #000 !important; border-radius:0 !important;
  box-shadow:none !important;
}
body.theme-discmaster .terminal-header{
  background:#eee !important; color:#000 !important;
  border-bottom:1px solid #000 !important;
}
body.theme-discmaster .terminal-header .label{
  font-family:"Courier New",Courier,monospace !important;
  color:#000 !important; letter-spacing:0 !important;
}
body.theme-discmaster .terminal-header .label span{ color:#0000ee !important; }

body.theme-discmaster .terminal-close,
body.theme-discmaster .terminal-reset,
body.theme-discmaster .terminal-copy,
body.theme-discmaster .terminal-expand,
body.theme-discmaster .terminal-popout{
  color:#0000ee !important;
  font-family:"Courier New",Courier,monospace !important;
  background:transparent !important; border:0 !important;
}
body.theme-discmaster .terminal-close:hover{ color:#000 !important; background:#ffffe0 !important; }
body.theme-discmaster .terminal-copy:hover,
body.theme-discmaster .terminal-expand:hover,
body.theme-discmaster .terminal-popout:hover,
body.theme-discmaster .terminal-reset:hover{ color:#000 !important; background:#ffffe0 !important; }

body.theme-discmaster .terminal-output{
  background:#c0c0c0 !important; color:#000 !important;
  font-family:"Courier New",Courier,monospace !important;
}
body.theme-discmaster .terminal-output .line.cmd{ color:#0000ee !important; }
body.theme-discmaster .terminal-output .line.cmd::before{ color:#555 !important; content:'> ' !important; }
body.theme-discmaster .terminal-output .line.result{ color:#000 !important; }
body.theme-discmaster .terminal-output .line.error{ color:#a42a00 !important; }
body.theme-discmaster .terminal-output .line.system{ color:#555 !important; }
body.theme-discmaster .terminal-output .line.hermes{ color:#000 !important; }
body.theme-discmaster .terminal-output .line.hermes::before{ color:#a42a00 !important; }

body.theme-discmaster .terminal-input-row{
  background:#eee !important; color:#000 !important;
  border-top:1px solid #000 !important;
}
body.theme-discmaster .terminal-prompt{
  color:#000 !important; font-weight:bold !important;
  font-family:"Courier New",Courier,monospace !important;
}
body.theme-discmaster .terminal-hermes-tag{ color:#a42a00 !important; }
body.theme-discmaster .terminal-input{
  background:#fff !important; color:#000 !important;
  border:2px inset #fff !important; border-radius:0 !important;
  font-family:"Courier New",Courier,monospace !important;
  caret-color:#000 !important; padding:2px 4px !important;
}
body.theme-discmaster .terminal-input::placeholder{ color:#888 !important; }

/* Hermes response bubble */
body.theme-discmaster .hermes-bubble{
  background:#ffffe0 !important; border:1px solid #000 !important;
  border-left:2px solid #000 !important; border-radius:0 !important;
  margin:6px 0 10px 0 !important;
}
body.theme-discmaster .hermes-bubble .b-text{
  color:#000 !important; font-family:"Times New Roman",Times,serif !important;
  font-size:13px !important;
}
body.theme-discmaster .hermes-bubble .b-text strong{ color:#000 !important; }
body.theme-discmaster .hermes-bubble .b-text em{ color:#a42a00 !important; font-style:italic !important; }

/* The action chips: "◇ ingest page", "◇ collect imgs", "⇌ to /surf", "≋ refine", etc. */
body.theme-discmaster .cmd-chip{
  background:#c0c0c0 !important; color:#000 !important;
  border:2px outset #fff !important; border-radius:0 !important;
  font-family:"Courier New",Courier,monospace !important;
}
body.theme-discmaster .cmd-chip:hover{ background:#ffffe0 !important; color:#000 !important; }
body.theme-discmaster .cmd-chip:active{ border-style:inset !important; }
body.theme-discmaster .cmd-chip.primary{
  background:#ffffe0 !important; border:1px solid #000 !important;
  color:#000 !important; font-weight:bold !important;
}
body.theme-discmaster .cmd-chip.muted{
  background:#c0c0c0 !important; color:#555 !important;
  border:2px outset #fff !important;
}
body.theme-discmaster .hermes-meta{ color:#555 !important; font-family:"Courier New",Courier,monospace !important; }

/* Bottom "quick actions" row (ingest page / collect imgs / to /surf / …) */
body.theme-discmaster .quick-actions{
  background:#c0c0c0 !important; border-top:1px solid #000 !important;
}
body.theme-discmaster .qa-btn{
  background:#c0c0c0 !important; color:#000 !important;
  border:2px outset #fff !important; border-radius:0 !important;
  font-family:"Courier New",Courier,monospace !important;
}
body.theme-discmaster .qa-btn:hover{ background:#ffffe0 !important; color:#000 !important; }
body.theme-discmaster .qa-btn:active{ border-style:inset !important; }
body.theme-discmaster .qa-btn .g{ color:#0000ee !important; }

/* Slash-command menu popup ( / autocomplete ) */
body.theme-discmaster .slash-menu{
  background:#fff !important; border:1px solid #000 !important; border-radius:0 !important;
  box-shadow:none !important;
}
body.theme-discmaster .slash-item{
  color:#000 !important; font-family:"Courier New",Courier,monospace !important;
  border-bottom:1px dotted #999 !important;
}
body.theme-discmaster .slash-item .k{ color:#0000ee !important; font-weight:bold !important; }
body.theme-discmaster .slash-item .d{ color:#555 !important; }
body.theme-discmaster .slash-item:hover,
body.theme-discmaster .slash-item.sel{ background:#ffffe0 !important; color:#000 !important; }
body.theme-discmaster .slash-item:hover .k,
body.theme-discmaster .slash-item.sel .k{ color:#000 !important; }
body.theme-discmaster .slash-item:hover .d,
body.theme-discmaster .slash-item.sel .d{ color:#555 !important; }

body.theme-discmaster .ankle-notification{
  background:#ffffe0 !important; color:#000 !important;
  border:1px solid #000 !important; border-radius:0 !important;
  font-family:"Courier New",Courier,monospace !important;
  box-shadow:none !important;
}
body.theme-discmaster .ankle-notification .notif-sigil{ color:#0000ee !important; }

/* ═══════════════════════════════════════════════════════════════════
   @⌘ legacy (#botta-panel) — discmaster override for the older widget
   Repaints the built-in #botta-panel / botta-* chrome in discmaster gray
   + Times serif + classic pills. atcmd.js ships its own dark palette, so
   we override with body.theme-discmaster + !important.
   ═══════════════════════════════════════════════════════════════════ */
body.theme-discmaster #botta-fab{
  background:#c0c0c0 !important; color:#000 !important;
  border:2px outset #fff !important; border-radius:0 !important;
  font-family:"Courier New",Courier,monospace !important;
  box-shadow:none !important;
}
body.theme-discmaster #botta-fab:active{ border-style:inset !important; }
body.theme-discmaster #botta-panel,
body.theme-discmaster #botta-panel *{
  font-family:"Times New Roman",Times,serif !important;
  border-radius:0 !important;
}
body.theme-discmaster #botta-panel{
  background:#c0c0c0 !important; color:#000 !important;
  border:1px solid #000 !important;
  box-shadow:none !important;
}
body.theme-discmaster #botta-panel .botta-h{
  background:#eee !important; color:#000 !important;
  border-bottom:1px solid #000 !important;
  font-family:"Courier New",Courier,monospace !important;
  font-weight:bold !important;
  padding:4px 10px !important;
}
body.theme-discmaster #botta-panel #bottaClose{
  color:#0000ee !important; text-decoration:underline !important;
  font-family:"Courier New",Courier,monospace !important;
}
body.theme-discmaster #botta-panel .botta-body,
body.theme-discmaster #botta-panel .botta-log,
body.theme-discmaster #botta-panel .botta-site-status{
  background:#c0c0c0 !important; color:#000 !important;
}
body.theme-discmaster #botta-panel code,
body.theme-discmaster #botta-panel pre,
body.theme-discmaster #botta-panel .botta-cmd,
body.theme-discmaster #botta-panel .botta-log em{
  font-family:"Courier New",Courier,monospace !important;
  color:#000 !important; background:transparent !important;
}
/* All inputs inside the @⌘ panel: classic inset bevel */
body.theme-discmaster #botta-panel input,
body.theme-discmaster #botta-panel textarea,
body.theme-discmaster #botta-panel select{
  background:#fff !important; color:#000 !important;
  border:2px inset #fff !important; border-radius:0 !important;
  font-family:"Courier New",Courier,monospace !important;
}
/* All buttons: Win95 outset pills with yellow highlight on primary */
body.theme-discmaster #botta-panel button{
  background:#c0c0c0 !important; color:#000 !important;
  border:2px outset #fff !important; border-radius:0 !important;
  font-family:"Courier New",Courier,monospace !important;
  padding:3px 10px !important;
}
body.theme-discmaster #botta-panel button:active{ border-style:inset !important; }
body.theme-discmaster #botta-panel button.primary{
  background:#ffffe0 !important; border:1px solid #000 !important;
  font-weight:bold !important;
}
/* Orange/blue outline chips → yellow highlight pills */
body.theme-discmaster #botta-panel .chip,
body.theme-discmaster #botta-panel [class*="action"],
body.theme-discmaster #botta-panel [class*="suggest"],
body.theme-discmaster #botta-panel .botta-cta,
body.theme-discmaster #botta-panel .botta-quick,
body.theme-discmaster #botta-panel [style*="border:1px solid"]{
  background:#c0c0c0 !important; color:#000 !important;
  border:2px outset #fff !important; border-radius:0 !important;
}
body.theme-discmaster #botta-panel [style*="color:#"]{
  color:#000 !important;
}
body.theme-discmaster #botta-panel a{
  color:#0000ee !important; text-decoration:underline !important;
}
/* Top "@⌘ terminal by Ankle" title bar if styled differently */
body.theme-discmaster #botta-panel [class*="title"],
body.theme-discmaster #botta-panel [class*="header"]{
  background:#eee !important; color:#000 !important;
}
/* Prompt row "hermes > ask hermes…" */
body.theme-discmaster #botta-panel .botta-input{
  background:#c0c0c0 !important; border-top:1px solid #000 !important;
}

/* ── Theme picker widget (floating ⚙ button + panel) ──────────────── */
#ankle-theme-fab {
  position: fixed; top: 10px; right: 10px; z-index: 1200;
  width: 38px; height: 32px;
  border: 2px outset #fff; background: var(--panel); color: var(--fg);
  font-family: var(--mono-font); font-size: 16px;
  cursor: pointer; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
}
/* Hide the ⚙ FAB + panel when a modal/lightbox locks body scroll,
   so they don't float above the dashboard inventory lightbox etc. */
body[style*="overflow: hidden"] #ankle-theme-fab,
body[style*="overflow:hidden"] #ankle-theme-fab,
body[style*="overflow: hidden"] #ankle-theme-panel,
body[style*="overflow:hidden"] #ankle-theme-panel { display: none !important; }
body.theme-discmaster #ankle-theme-fab{background:#fff;border:2px outset #fff;color:#000}
#ankle-theme-fab:hover { background: var(--highlight) }
#ankle-theme-fab:active{border-style:inset}

#ankle-theme-panel {
  position: fixed; top: 50px; right: 10px; z-index: 1201;
  width: 320px; max-width: calc(100vw - 20px); max-height: calc(100vh - 80px); overflow-y: auto;
  background: var(--panel); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--body-font); font-size: 13px;
  padding: 12px 14px; display: none;
  box-shadow: var(--shadow);
}
body.theme-discmaster #ankle-theme-panel{
  font-family:"Times New Roman",Times,serif !important;
  font-size:14px !important;
}
body.theme-discmaster #ankle-theme-panel h4{
  font-family:"Press Start 2P","Courier New",monospace !important;
  font-size:13px !important; font-weight:normal !important;
  letter-spacing:.06em !important;
}
body.theme-discmaster #ankle-theme-panel h5{
  font-family:"Times New Roman",Times,serif !important;
  font-size:14px !important; font-weight:bold !important;
  letter-spacing:0 !important; text-transform:none !important;
}
body.theme-discmaster #ankle-theme-panel label,
body.theme-discmaster #ankle-theme-panel .skin-field label{
  font-family:"Courier New",Courier,monospace !important;
  font-size:11px !important;
}
body.theme-discmaster #ankle-theme-panel .theme-opt{
  font-family:"Times New Roman",Times,serif !important;
  font-size:13px !important;
  border:2px outset #fff !important; background:#c0c0c0 !important;
  border-radius:0 !important;
}
body.theme-discmaster #ankle-theme-panel .theme-opt.active{
  border:1px solid #000 !important; background:#ffffe0 !important;
  font-weight:bold !important;
}

/* Vintage Win95 sliders under discmaster — beveled track + square thumb */
body.theme-discmaster #ankle-theme-panel input[type=range]{
  -webkit-appearance:none !important; appearance:none !important;
  height:18px !important; background:transparent !important;
  border:0 !important; padding:0 !important;
}
body.theme-discmaster #ankle-theme-panel input[type=range]::-webkit-slider-runnable-track{
  height:6px; background:#c0c0c0;
  border:2px inset #fff; border-radius:0;
}
body.theme-discmaster #ankle-theme-panel input[type=range]::-moz-range-track{
  height:6px; background:#c0c0c0;
  border:2px inset #fff; border-radius:0;
}
body.theme-discmaster #ankle-theme-panel input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:16px; height:18px; background:#c0c0c0;
  border:2px outset #fff; border-radius:0;
  margin-top:-6px; cursor:pointer;
}
body.theme-discmaster #ankle-theme-panel input[type=range]::-moz-range-thumb{
  width:16px; height:18px; background:#c0c0c0;
  border:2px outset #fff; border-radius:0; cursor:pointer;
}
body.theme-discmaster #ankle-theme-panel input[type=file]{
  font-family:"Courier New",monospace !important;
  font-size:11px !important;
  border:2px inset #fff !important; background:#fff !important;
  padding:2px !important;
}
@media(max-width: 600px){
  #ankle-theme-panel{ width: calc(100vw - 20px); right: 10px; left: 10px }
  #ankle-theme-panel .theme-list{ grid-template-columns: 1fr 1fr !important }
}
#ankle-theme-panel.open { display: block }
#ankle-theme-panel h4 {
  font-family: var(--body-font); font-size: 16px; font-weight: bold;
  margin: 6px 0 8px; color: var(--fg);
}
#ankle-theme-panel h5 {
  font-family: var(--mono-font); font-size: 11px; font-weight: bold;
  margin: 14px 0 6px; color: var(--fg); letter-spacing: .06em;
  border-bottom: 1px solid var(--line); padding-bottom: 2px;
}
#ankle-theme-panel .theme-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
#ankle-theme-panel .theme-opt {
  padding: 8px; border: 1px solid var(--line);
  background: var(--panel); color: var(--fg); cursor: pointer;
  font-family: var(--mono-font); font-size: 11px; text-align: left;
  border-radius: var(--radius); transition: background .15s;
}
#ankle-theme-panel .theme-opt:hover { background: var(--highlight) }
#ankle-theme-panel .theme-opt.active {
  background: var(--highlight); font-weight: bold; border-color: var(--fg);
}
#ankle-theme-panel .theme-opt .swatch {
  display: block; width: 100%; height: 28px; margin-bottom: 4px;
  border: 1px solid var(--line); border-radius: var(--radius);
}
#ankle-theme-panel .skin-field {
  margin-top: 6px; display: flex; flex-direction: column; gap: 4px;
}
#ankle-theme-panel .skin-field label {
  font-size: 10px; color: var(--muted); font-weight: bold;
}
#ankle-theme-panel button.btn {
  padding: 4px 10px; border: 2px outset #eee; background: var(--panel);
  color: var(--fg); font-family: var(--mono-font); font-size: 11px;
  cursor: pointer; border-radius: var(--radius);
}
#ankle-theme-panel button.btn:active { border-style: inset }
#ankle-theme-panel button.btn.primary {
  background: var(--highlight); font-weight: bold; border: 1px solid var(--fg);
}
#ankle-theme-panel input[type=range] { width: 100%; accent-color: var(--link) }
#ankle-theme-panel input[type=file] {
  font-family: var(--mono-font); font-size: 10px; color: var(--fg);
}
#ankle-theme-panel .swatch-preview {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px;
}
#ankle-theme-panel .swatch-preview img {
  width: 42px; height: 42px; object-fit: cover;
  border: 1px solid var(--line); cursor: pointer;
}
#ankle-theme-panel .swatch-preview img.selected { outline: 2px solid var(--link) }
#ankle-theme-panel .close-x {
  position: absolute; top: 8px; right: 10px; cursor: pointer;
  background: transparent; border: 0; color: var(--muted); font-size: 14px;
}