:root{
  --bg:#0b1020;
  --panel:rgba(255,255,255,.06);
  --text:#e6e8ef;
  --muted:#a7b0c0;
  --brand:#7c5cff;
  --brand-2:#36d6c4;
  --ring:rgba(124,92,255,.5);
  --shadow:0 10px 30px rgba(0,0,0,.25);

  /* Evidence hues (Phasmophobia set) */
  --ev-writing:   #67e08a;
  --ev-freezing:  #6282ff;
  --ev-emf:       #ff6d73;
  --ev-uv:        #8c4aff;
  --ev-sbox:      #61dafb; /* Spirit Box */
  --ev-orb:       #ffd166; /* Ghost Orb */
  --ev-dots:      #42d1a1; /* D.O.T.S */

  --blob1:#7c5cff;
  --blob2:#36d6c4;
}

/* Light mode palette + polish */
body.light-mode{
  --bg:#f9fafc;
  --panel:rgba(255,255,255,.85);
  --text:#1e1e2e;
  --muted:#5f6b7a;
  --ring:rgba(124,92,255,.3);
  --shadow:0 6px 20px rgba(0,0,0,.08);

  background: linear-gradient(180deg, #f9fafc 0%, #eef1f7 100%);
  color:var(--text);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  color:var(--text);
  line-height:1.6;

  /* soft blobs */
  background:
    radial-gradient(1200px 800px at 80% -10%,
      color-mix(in srgb, var(--blob1) 25%, transparent), transparent 55%),
    radial-gradient(1200px 800px at -10% 110%,
      color-mix(in srgb, var(--blob2) 20%, transparent), transparent 45%),
    var(--bg);
  background-attachment: fixed;

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{display:flex;position:relative;min-height:100dvh;z-index:1}

/* Sidebar */
.sidebar{
  width:260px;
  padding:22px 18px;
  background:var(--panel);
  backdrop-filter:saturate(140%) blur(10px);
  border-right:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow);
  position:sticky; top:0; align-self:flex-start; height:100dvh; overflow:auto; z-index:10;
  border-radius:0 18px 18px 0;
}
.sidebar.hidden{display:none}

.content{
  flex:1; padding:28px 28px 40px; display:flex; flex-direction:column; align-items:center; min-width:0;
}

/* Sidebar toggle button */
.toggle-sidebar{
  position:fixed; left:270px; top:20px; z-index:30;
  transition:left .3s ease, transform .2s ease;
}
.sidebar.hidden ~ .toggle-sidebar{ left:16px; }

h1,h2{margin:0 0 12px; text-align:center}
h1{letter-spacing:.2px; font-weight:900}

.legend{display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 12px}

/* Search */
#searchBar{
  width:100%; padding:12px 14px; margin-bottom:16px; font-size:15px; color:var(--text);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px; outline:0; transition:border-color .2s, box-shadow .2s, background .2s;
}
#searchBar:focus{ outline:3px solid var(--ring); border-color:transparent; }

/* Buttons */
button,.toggle-dark-mode{
  appearance:none; border:0; border-radius:12px; padding:12px 16px;
  font-weight:800; letter-spacing:.2px; cursor:pointer; color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  transition:transform .08s ease, filter .12s ease, box-shadow .12s ease, background .3s ease;
}
button:hover,.toggle-dark-mode:hover{ transform:translateY(-2px) }
button:active{ transform:translateY(0); filter:brightness(.98) }
button:focus-visible{ outline:3px solid var(--ring); outline-offset:2px }

/* Sidebar buttons: neutral glass */
.sidebar .toggle-dark-mode{
  background:var(--panel); color:var(--text);
  border:1px solid rgba(255,255,255,.14);
}
.sidebar .toggle-dark-mode:hover{ background:rgba(255,255,255,.1) }

/* Cards grid */
.ghost-list{
  display:grid;
  grid-template-columns:repeat(3, minmax(280px,1fr));
  gap:22px;
  padding:12px 0 0;
  width:100%; max-width:1120px;
  align-items:stretch;
}

.ghost-item{width:100%; border-radius:20px; padding:0; background:transparent; box-shadow:none; transition:opacity .2s, filter .2s, transform .18s}
.ghost-item:hover{ transform:translateY(-3px) scale(1.01) }
.ghost-item.hidden{ display:none }

.card{
  position:relative; border-radius:20px; padding:18px 18px 16px;
  background:linear-gradient(to bottom right, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow); backdrop-filter:saturate(130%) blur(8px);
}
.ghost-item.match .card{
  box-shadow:0 10px 28px rgba(124,92,255,.35), 0 0 0 1px rgba(124,92,255,.30), inset 0 1px 0 rgba(255,255,255,.06);
  border-color:rgba(124,92,255,.35);
}

/* ---------- Card content layout (uniform height, no clipping) ---------- */
.ghost-item{ height:180px; }                 /* tweak 170–190 if you like */
.card{ height:100%; display:flex; flex-direction:column; }
.card-front{ display:flex; flex-direction:column; height:100%; }

/* Chips: 2 rows, never clipped */
.card-front .chips{
  display:grid;
  grid-template-rows:repeat(2,auto);
  grid-auto-flow:column;
  grid-auto-columns:max-content;
  gap:8px 10px;
  margin-bottom:8px;
  overflow:visible;
}

/* Keep the button pinned to the bottom-left */
.card-front .view-details{
  margin-top:auto;
  align-self:flex-start;
}

/* Chips visual */
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{
  display:inline-flex; align-items:center; padding:6px 12px; border-radius:999px; font-size:.9rem; font-weight:800; letter-spacing:.2px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#dcdcdc; box-shadow:inset 0 -1px 0 rgba(0,0,0,.2);
  user-select:none; white-space:nowrap;
}
.chip.none{opacity:.6; font-weight:700}

/* Evidence chip coloring */
.ev-writing   { color:var(--ev-writing);   border-color:color-mix(in srgb, var(--ev-writing) 45%, transparent);   background:color-mix(in srgb, var(--ev-writing) 16%, transparent) }
.ev-freezing  { color:var(--ev-freezing);  border-color:color-mix(in srgb, var(--ev-freezing) 45%, transparent);  background:color-mix(in srgb, var(--ev-freezing) 16%, transparent) }
.ev-emf       { color:var(--ev-emf);       border-color:color-mix(in srgb, var(--ev-emf) 45%, transparent);       background:color-mix(in srgb, var(--ev-emf) 16%, transparent) }
.ev-uv        { color:var(--ev-uv);        border-color:color-mix(in srgb, var(--ev-uv) 45%, transparent);        background:color-mix(in srgb, var(--ev-uv) 16%, transparent) }
.ev-sbox      { color:var(--ev-sbox);      border-color:color-mix(in srgb, var(--ev-sbox) 45%, transparent);      background:color-mix(in srgb, var(--ev-sbox) 16%, transparent) }
.ev-orb       { color:var(--ev-orb);       border-color:color-mix(in srgb, var(--ev-orb) 45%, transparent);       background:color-mix(in srgb, var(--ev-orb) 16%, transparent) }
.ev-dots      { color:var(--ev-dots);      border-color:color-mix(in srgb, var(--ev-dots) 45%, transparent);      background:color-mix(in srgb, var(--ev-dots) 16%, transparent) }

/* Tri-state evidence controls (sidebar) */
.evidence{ display:flex; flex-direction:column; gap:6px }
.ev-label{
  display:inline-flex; align-items:center; gap:.45rem; user-select:none; cursor:pointer;
  padding:6px 10px; border-radius:10px;
  background:rgba(255,255,255,.04); border:2px solid transparent;
}
.ev-label.include{
  border-color:rgba(124,92,255,.9);
  box-shadow:0 0 0 3px rgba(124,92,255,.25);
}
.ev-label.exclude{
  text-decoration:line-through; opacity:.55;
  border-color:transparent; box-shadow:none;
}
.ev-dot{ width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.35) }
.ev-label.include .ev-dot{ background:#31d0aa }
.ev-label.exclude .ev-dot{ background:#ff6d73 }

/* Traits */
.traits{ margin-top:20px; padding-top:10px; border-top:1px solid rgba(255,255,255,.18) }
.traits h2{ font-size:1.1rem; margin-bottom:10px; color:var(--text); font-weight:900 }
.traits label{
  display:flex; align-items:center; gap:.6rem; padding:10px 12px; border-radius:10px;
  background:rgba(255,255,255,.06); border:2px solid transparent;
  box-shadow:0 6px 16px rgba(0,0,0,.18); color:var(--text); cursor:pointer; user-select:none;
}
.traits label:hover{ background:rgba(255,255,255,.09) }
.traits label:has(input:checked){
  border-color:rgba(124,92,255,.9);
  box-shadow:0 0 0 3px rgba(124,92,255,.22), 0 6px 16px rgba(0,0,0,.22);
}
.traits input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; width:18px; height:18px; border-radius:5px;
  border:2px solid rgba(255,255,255,.35); background:rgba(255,255,255,.06);
  display:inline-grid; place-content:center; transition:border-color .15s, background .15s;
}
.traits input[type="checkbox"]::after{
  content:""; width:10px; height:10px; border-radius:3px;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  transform:scale(0); transition:transform .12s ease;
}
.traits input[type="checkbox"]:checked{ border-color:rgba(124,92,255,.9); background:rgba(124,92,255,.12) }
.traits input[type="checkbox"]:checked::after{ transform:scale(1) }
.traits hr{ border:0; border-top:1px solid rgba(255,255,255,.14); margin:10px 0 }

/* Modal */
.modal{position:fixed; inset:0; display:grid; place-items:center; z-index:1000}
.modal.hidden{display:none}
.modal-content{
  position:relative; max-width:980px; width:min(94vw,980px); max-height:92vh; overflow:auto;
  border-radius:20px; padding:24px; background:var(--panel); color:var(--text);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
  z-index:2; backdrop-filter:saturate(130%) blur(10px);
  border:1px solid rgba(255,255,255,.12);
}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(2px); z-index:1}
.modal-close{position:sticky; top:0; margin-left:auto; background:transparent; color:var(--text); border:0; font-size:28px; line-height:1; cursor:pointer}
.modal h2{margin:0 0 6px; font-size:1.35rem}

/* Theme drawer (optional UI) */
.theme-drawer{position:fixed; inset:0; display:none; z-index:1000}
.theme-drawer:not(.hidden){display:block}
.theme-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(2px); z-index:1}
.theme-panel{
  position:absolute; right:0; top:0; height:100%; width:min(520px, 96vw);
  background:var(--panel); color:var(--text);
  border-left:1px solid color-mix(in srgb, var(--text) 10%, transparent);
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  display:flex; flex-direction:column; overflow:hidden; z-index:2;
  border-top-left-radius:18px; border-bottom-left-radius:18px;
}
.theme-panel .panel-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 16%, transparent), transparent 55%);
  border-bottom:1px solid color-mix(in srgb, var(--text) 10%, transparent);
}
.theme-panel h2{ margin:0; font-size:1.05rem; font-weight:900; letter-spacing:.2px }
#closeThemeBtn{
  appearance:none; border:0; background:transparent; width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  font-size:22px; line-height:1; color:var(--text); transition: background .15s ease, transform .06s ease;
}
#closeThemeBtn:hover{ background: color-mix(in srgb, var(--brand) 20%, transparent) }
#closeThemeBtn:active{ transform: translateY(1px) }
#closeThemeBtn:focus-visible{ outline:3px solid var(--ring); outline-offset:2px }
.theme-panel .panel-body{ padding:16px; flex:1; overflow:auto }
.theme-panel .panel-footer{ display:flex; gap:12px; padding:14px 16px; border-top:1px solid color-mix(in srgb, var(--text) 10%, transparent) }
.theme-panel .panel-footer .small{ flex:1 }

.theme-section{
  border:1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius:12px;
  background: color-mix(in srgb, var(--bg) 70%, #ffffff0C);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  margin-bottom:12px; overflow:hidden;
}
.theme-section > summary{
  list-style:none; cursor:pointer; padding:12px 14px; font-weight:900; letter-spacing:.2px;
  display:flex; align-items:center; justify-content:space-between;
}
.theme-section > summary::-webkit-details-marker{ display:none }
.theme-section .summary-note{ opacity:.75; font-weight:700 }

.theme-grid{ display:grid; grid-template-columns:1fr; gap:12px; margin:8px 0 12px }
@media (min-width:520px){ .theme-grid{ grid-template-columns:1fr 1fr } }

.theme-panel .theme-grid label{
  display:grid; grid-template-columns: 110px 1fr; align-items:center; gap:12px;
  padding:12px; border-radius:12px;
  background: color-mix(in srgb, var(--bg) 70%, #ffffff0C);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.theme-panel .theme-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px; border-radius:12px; margin:12px 0;
  background: color-mix(in srgb, var(--bg) 70%, #ffffff0C);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
#themePanelOpacity{ width:56%; accent-color:var(--brand) }

.cpicker{ --radius:12px; --border:1px solid rgba(255,255,255,.14);
  position:relative; width:100%; max-width:240px; display:grid; grid-template-columns:1fr; gap:8px; user-select:none }
.cpicker .swatch{ height:28px; border-radius:8px; border:var(--border);
  background: repeating-conic-gradient(#0000 0% 25%, #00000010 0% 50%) 50%/12px 12px, var(--current, #7c5cff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.cpicker .sv{ position:relative; height:130px; border-radius:var(--radius); border:var(--border);
  background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(var(--h),100%,50%));
  cursor:crosshair; box-shadow:0 6px 16px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
}
.cpicker .sv .knob, .cpicker .hue .knob{ position:absolute; width:14px; height:14px; border-radius:999px; border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.35); transform:translate(-50%,-50%); pointer-events:none }
.cpicker .hue{ position:relative; height:12px; border-radius:999px; border:var(--border);
  background: linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); cursor:pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.06) }
.cpicker .row{ display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center }
.cpicker .hex{
  width:100%; padding:8px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06); color:var(--text); font-weight:700; letter-spacing:.4px; outline:none;
}

/* Responsive tweaks */
@media (max-width:1280px){
  .ghost-list{ grid-template-columns:repeat(2, minmax(260px,1fr)); gap:22px }
  .toggle-sidebar{ left:18px }
}
@media (max-width:860px){
  .container{display:block}
  .sidebar{position:static; height:auto; width:100%; border-right:0; border-bottom:1px solid rgba(255,255,255,.12); border-radius:0}
  .content{margin:0 auto; padding:20px 16px 40px}
  .ghost-list{grid-template-columns:1fr; gap:18px; max-width:760px}
  .modal-content{width:96vw}
  .ghost-item, .card{ height:auto; }     /* natural height on mobile */
}


/* --- Card height & overflow fix --- */
:root { --card-h: 212px; }          /* 210–220px works well on desktop */

.ghost-item { height: var(--card-h); }
.card { height: 100%; overflow: hidden; }  /* prevent the button glow overlay */

/* tighten vertical rhythm a touch so everything fits comfortably */
.card-front h3 { line-height: 1.25; }
.card-front .chips { gap: 8px 8px; margin-bottom: 6px; }
.chip { padding: 5px 10px; font-size: .88rem; }

/* keep natural height on small screens */
@media (max-width: 860px){
  .ghost-item, .card { height: auto; overflow: visible; }
}


/* === Lift content up (less top padding) === */
.card{
  padding: 12px 16px 14px;   /* was ~18px all around */
  overflow: hidden;          /* keep glow/shadows inside the card */
}
.card-front h3{ margin-bottom: 8px; line-height: 1.25; }

/* === Keep all 3 evidence chips on one row === */
.card-front .chips{
  display: flex;
  flex-wrap: nowrap;         /* no wrapping to a new line */
  gap: 8px;
  overflow-x: auto;          /* if it ever gets tight, allow horizontal scroll */
  scrollbar-width: none;     /* hide scrollbar (Firefox) */
}
.card-front .chips::-webkit-scrollbar{ display: none; } /* hide scrollbar (WebKit) */

/* Keep button pinned to bottom-left */
.card-front .view-details{
  margin-top: auto;
  align-self: flex-start;
}

/* Optional: make each card a bit wider so chips fit without scrolling */
@media (min-width: 1100px){
  .ghost-list{ grid-template-columns: repeat(3, minmax(360px, 1fr)); } /* was minmax(280px,1fr) */
}


/* ==== Wider grid, tighter row height ==== */
.ghost-list{
  /* give the row more room for 3 wide cards */
  max-width: 1400px;                    /* was ~1120px */
  grid-template-columns: repeat(3, minmax(420px, 1fr));  /* wider cards */
  gap: 26px;
}

/* shorter cards */
.ghost-item{ height: 160px; }           /* tweak 130–150 if you like */
.card{
  height: 100%;
  padding: 10px 16px 12px;              /* less vertical padding */
}

/* pull title + chips up slightly */
.card-front{ display:flex; flex-direction:column; height:100%; }
.card-front h3{ margin: 2px 0 8px; line-height: 1.2; }

/* keep all evidence pills on one row */
.card-front .chips{
  display: flex;
  flex-wrap: nowrap;                    /* no wrapping */
  gap: 10px;
  overflow: hidden;                     /* no scrollbars, keeps layout clean */
}

/* keep the button pinned bottom-left */
.card-front .view-details{
  margin-top: auto;
  align-self: flex-start;
}

/* Responsive fallbacks */
@media (max-width: 1280px){
  .ghost-list{ grid-template-columns: repeat(2, minmax(360px, 1fr)); max-width: 1100px; }
  .ghost-item{ height: 150px; }         /* a bit taller when columns drop to 2 */
}
@media (max-width: 860px){
  .ghost-list{ grid-template-columns: 1fr; max-width: 760px; }
  .ghost-item, .card{ height: auto; }   /* natural height on mobile */
}


/* --- Sidebar actions: same size + full width --- */
.sidebar .toggle-dark-mode,
.sidebar button {
  display: block;
  width: 100%;
  padding: 12px 16px;      /* match sizing */
  margin: 8px 0;           /* even vertical spacing */
  border-radius: 12px;
}

/* Keep the neutral glass style for the toggle but with the same sizing */
.sidebar .toggle-dark-mode{
  background: var(--panel);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
}

/* --- Trait rows: increase touch target + spacing --- */
.traits { margin-top: 20px; }
.traits label{
  padding: 12px 14px;      /* more internal space */
  min-height: 46px;        /* taller row */
  line-height: 1.35;       /* less cramped text */
  gap: .75rem;             /* a little more space around the checkbox */
  margin-bottom: 10px;     /* space between rows */
}

.traits input[type="checkbox"]{
  width: 20px;
  height: 20px;
  border-radius: 6px;
}

/* ───────────────────────────────────────────
   THEME DRAWER – stacked, full-width pickers
   (replaces the old theme-grid/label/cpicker styles)
   ─────────────────────────────────────────── */

/* Section headers (Holiday Themes / Custom Theme, etc.) */
.theme-section{
  border:1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius:12px;
  background: color-mix(in srgb, var(--bg) 70%, #ffffff0C);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  margin-bottom:12px; overflow:hidden;
}
.theme-section > summary{
  list-style:none; cursor:pointer; padding:14px 16px;
  font-weight:900; letter-spacing:.2px;
  display:flex; align-items:center; justify-content:space-between;
}
.theme-section > summary::-webkit-details-marker{ display:none }

/* The grid now stacks one picker per row */
.theme-grid{
  display:grid; grid-template-columns:1fr; gap:12px; margin:8px 0 12px;
}

/* Each color field becomes a card with the name on top */
.theme-panel .theme-grid label{
  display:block;                                      /* was 2-col grid — now vertical */
  padding:14px; border-radius:12px;
  background: color-mix(in srgb, var(--bg) 70%, #ffffff0C);
  border:1px solid color-mix(in srgb, var(--text) 10%, transparent);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  font-weight:900; letter-spacing:.2px;
}

/* Put the picker itself under the label text */
.theme-panel .theme-grid label .cpicker{ margin-top:10px; }

/* Bigger, wide color picker */
.cpicker{
  --radius:12px; --border:1px solid rgba(255,255,255,.14);
  width:100%; max-width:none; display:grid; gap:10px;
}

/* Thin “alpha/preview” strip (checkered) */
.cpicker .swatch{
  height:16px; border-radius:8px; border:var(--border);
  background:
    repeating-conic-gradient(#0000 0% 25%, #00000010 0% 50%) 50%/12px 12px,
    var(--current, #7c5cff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* Big SV (saturation/value) panel */
.cpicker .sv{
  position:relative; height:220px; border-radius:var(--radius); border:var(--border);
  background: linear-gradient(to top, #000, transparent),
             linear-gradient(to right, #fff, hsl(var(--h),100%,50%));
  cursor:crosshair; box-shadow:0 6px 16px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
}
.cpicker .sv .knob{ position:absolute; width:16px; height:16px; border-radius:999px;
  border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.35); transform:translate(-50%,-50%); pointer-events:none; }

/* Hue strip + knob */
.cpicker .hue{
  position:relative; height:12px; border-radius:999px; border:var(--border);
  background: linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
  cursor:pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.06)
}
.cpicker .hue .knob{ position:absolute; top:50%; transform:translate(-50%,-50%);
  width:14px; height:14px; border-radius:999px; border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.35); pointer-events:none; }

/* Input row */
.cpicker .row{
  display:grid; grid-template-columns: 1fr auto; gap:8px; align-items:center;
}
.cpicker .hex{
  width:100%; padding:12px 14px; border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06); color:var(--text);
  font-weight:800; letter-spacing:.4px; outline:none;
}
.cpicker .fmt{
  padding:0 10px; height:40px; display:grid; place-items:center;
  border-radius:10px; font-weight:900; letter-spacing:.3px;
  color:var(--muted);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
}

/* Slightly tighter on small screens */
@media (max-width:720px){
  .cpicker .sv{ height:190px }
}


/* ───────────────────────────────────────────
   HOLIDAY THEMES / PRESET CARDS
   (works with your existing "Holiday Themes" section)
   ─────────────────────────────────────────── */

/* Optional pill on the right side of the <summary> (e.g., "Using Custom") */
.theme-section .summary-note{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  font-weight:800; font-size:.78rem; letter-spacing:.2px;
  opacity:1;
}

/* Grid of preset cards */
.holiday-themes,
.theme-presets{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:12px;
  margin:8px 0 12px;
}

/* Individual preset card */
.holiday-card,
.preset-card{
  position:relative;
  border-radius:12px;
  padding:12px;
  background: color-mix(in srgb, var(--bg) 70%, #ffffff0C);
  border:1px solid color-mix(in srgb, var(--text) 10%, transparent);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  display:flex; flex-direction:column; gap:10px;
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.holiday-card:hover,
.preset-card:hover{
  transform: translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.25);
  border-color: rgba(255,255,255,.18);
}

/* Active/selected state */
.holiday-card.is-active,
.preset-card.is-active,
.holiday-card[aria-selected="true"],
.preset-card[aria-selected="true"]{
  border-color: rgba(124,92,255,.9);
  box-shadow:
    0 10px 28px rgba(124,92,255,.28),
    0 0 0 2px rgba(124,92,255,.35) inset,
    0 1px 0 rgba(255,255,255,.06) inset;
}

/* Header row inside the card (name + optional badge) */
.preset-header{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-weight:900; letter-spacing:.2px;
}

/* A wide preview bar (uses a gradient from --p1 to --p2 if provided) */
.preset-preview{
  height:26px; border-radius:8px;
  border:1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(90deg, var(--p1, #7c5cff), var(--p2, #36d6c4));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* Swatches row (small circles showing palette colors) */
.preset-swatches,
.holiday-swatches{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
}
.preset-swatches .swatch,
.holiday-swatches .swatch{
  width:22px; height:22px; border-radius:999px;
  border:1px solid rgba(255,255,255,.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 1px 8px rgba(0,0,0,.25);
}

/* Actions row */
.preset-actions{ display:flex; gap:8px; margin-top:2px; }
.preset-actions .apply-preset,
.preset-actions .preview-preset{
  appearance:none; border:0; border-radius:10px; padding:10px 12px;
  font-weight:800; letter-spacing:.2px; cursor:pointer; color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  transition:transform .08s ease, filter .12s ease, box-shadow .12s ease;
}
.preset-actions .apply-preset:hover,
.preset-actions .preview-preset:hover{ transform:translateY(-1px) }
.preset-actions .apply-preset:active,
.preset-actions .preview-preset:active{ transform:none; filter:brightness(.98) }

/* Secondary/ghost style for a preview button */
.preset-actions .preview-preset{
  background:rgba(255,255,255,.06); color:var(--text);
  border:1px solid rgba(255,255,255,.14);
}

/* Small helper badge (e.g., “New”, “Limited”) */
.preset-badge{
  padding:3px 8px; border-radius:999px; font-size:.72rem; font-weight:900;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
}

/* Focus ring */
.holiday-card:focus-visible,
.preset-card:focus-visible,
.preset-actions button:focus-visible{
  outline:3px solid var(--ring); outline-offset:2px;
}

/* Compact on very small screens */
@media (max-width:520px){
  .holiday-themes, .theme-presets{ grid-template-columns:1fr; }
}



/* =========================
   THEME DRAWER SHELL
   ========================= */
.theme-drawer{position:fixed; inset:0; display:none; z-index:1000}
.theme-drawer:not(.hidden){display:block}

.theme-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.45); backdrop-filter:blur(2px); z-index:1;
}

.theme-panel{
  position:absolute; right:0; top:0; height:100%; width:min(520px,96vw);
  background:var(--panel); color:var(--text);
  border-left:1px solid color-mix(in srgb, var(--text) 10%, transparent);
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  display:flex; flex-direction:column; overflow:hidden; z-index:2;
  border-top-left-radius:18px; border-bottom-left-radius:18px;
}

.theme-panel .panel-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 16%, transparent), transparent 55%);
  border-bottom:1px solid color-mix(in srgb, var(--text) 10%, transparent);
}
.theme-panel h2{margin:0; font-size:1.05rem; font-weight:900; letter-spacing:.2px}

#closeThemeBtn{
  appearance:none; border:0; background:transparent;
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  font-size:22px; line-height:1; color:var(--text);
  transition: background .15s ease, transform .06s ease;
}
#closeThemeBtn:hover{ background:color-mix(in srgb, var(--brand) 20%, transparent) }
#closeThemeBtn:active{ transform:translateY(1px) }
#closeThemeBtn:focus-visible{ outline:3px solid var(--ring); outline-offset:2px }

.theme-panel .panel-body{ padding:16px; flex:1; overflow:auto }
.theme-panel .panel-footer{
  display:flex; gap:12px; padding:14px 16px;
  border-top:1px solid color-mix(in srgb, var(--text) 10%, transparent);
  background:linear-gradient(0deg, color-mix(in srgb, var(--brand-2) 10%, transparent), transparent 55%);
}
.theme-panel .panel-footer .small{ flex:1 }
.theme-panel .toggle-dark-mode.small{ border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,.2) }

/* =========================
   THEME SECTIONS (COMMON)
   ========================= */
.theme-section{
  border:1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius:12px;
  background:color-mix(in srgb, var(--bg) 70%, #ffffff0C);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  margin-bottom:12px; overflow:hidden;
}
.theme-section > summary{
  list-style:none; cursor:pointer; padding:12px 14px;
  font-weight:900; letter-spacing:.2px;
  display:flex; align-items:center; justify-content:space-between;
}
.theme-section > summary::-webkit-details-marker{display:none}
.theme-section .summary-note{opacity:.75; font-weight:700}

.theme-panel select{
  width:56%; padding:8px 10px; border-radius:10px;
  border:1px solid color-mix(in srgb, var(--text) 12%, transparent);
  background:color-mix(in srgb, var(--bg) 50%, #ffffff12);
  color:var(--text); font-weight:700; outline:none;
}

.theme-panel .theme-grid{ display:grid; grid-template-columns:1fr; gap:12px; margin:8px 0 12px }
@media (min-width:520px){ .theme-panel .theme-grid{ grid-template-columns:1fr 1fr } }

.theme-panel .theme-grid label{
  display:grid; grid-template-columns:110px 1fr; align-items:center; gap:12px;
  padding:12px; border-radius:12px;
  background:color-mix(in srgb, var(--bg) 70%, #ffffff0C);
  border:1px solid color-mix(in srgb, var(--text) 10%, transparent);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.theme-panel .theme-grid label > span{ font-weight:800; letter-spacing:.2px; opacity:.9 }

.theme-panel .theme-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px; border-radius:12px; margin:12px 0;
  background:color-mix(in srgb, var(--bg) 70%, #ffffff0C);
  border:1px solid color-mix(in srgb, var(--text) 10%, transparent);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}

#themePanelOpacity{ width:56%; accent-color:var(--brand) }

/* =========================
   COLOR PICKER (BIG)
   ========================= */
.cpicker{ --radius:12px; --border:1px solid rgba(255,255,255,.14);
  position:relative; width:100%; max-width:240px; display:grid; grid-template-columns:1fr; gap:8px; user-select:none }
.cpicker .swatch{ height:28px; border-radius:8px; border:var(--border);
  background:repeating-conic-gradient(#0000 0% 25%, #00000010 0% 50%) 50%/12px 12px, var(--current, #7c5cff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06) }
.cpicker .sv{ position:relative; height:130px; border-radius:var(--radius); border:var(--border);
  background:linear-gradient(to top,#000,transparent), linear-gradient(to right,#fff,hsl(var(--h),100%,50%));
  cursor:crosshair; box-shadow:0 6px 16px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06) }
.cpicker .sv .knob, .cpicker .hue .knob{
  position:absolute; width:14px; height:14px; border-radius:999px; border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.35); transform:translate(-50%,-50%); pointer-events:none }
.cpicker .hue{ position:relative; height:12px; border-radius:999px; border:var(--border);
  background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,.06) }
.cpicker .row{ display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center }
.cpicker .hex{
  width:100%; padding:8px 10px; border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06); color:var(--text);
  font-weight:700; letter-spacing:.4px; outline:none;
}

/* =========================
   HOLIDAY THEMES SECTION
   ========================= */
#holidaySection.theme-section{ background:transparent; border:0; box-shadow:none; overflow:visible; padding:0 }
#holidaySection > summary{
  padding:12px 14px; border-radius:12px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 16%, transparent), transparent 55%);
  border:1px solid color-mix(in srgb, var(--text) 10%, transparent);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}
#holidaySection > summary::-webkit-details-marker{display:none}
#holidaySection[open] > summary{ margin-bottom:10px }
#holidaySection > :not(summary){ margin:6px 0 }
#holidaySection .theme-row{
  padding:12px; border-radius:12px;
  background:color-mix(in srgb, var(--bg) 70%, #ffffff0C);
  border:1px solid color-mix(in srgb, var(--text) 10%, transparent);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}
#holidaySection .theme-row select{ width:56% }

/* =========================
   CUSTOM THEME SECTION
   ========================= */
#customThemeSection.theme-section{ background:transparent; border:0; box-shadow:none; overflow:visible; padding:0 }
#customThemeSection > summary{
  padding:12px 14px; border-radius:12px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 16%, transparent), transparent 55%);
  border:1px solid color-mix(in srgb, var(--text) 10%, transparent);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}
#customThemeSection > summary::-webkit-details-marker{display:none}
#customThemeSection[open] > summary{ margin-bottom:10px }
#customThemeSection > :not(summary){ margin:6px 0 }

#customThemeSection .theme-grid{ display:grid; grid-template-columns:1fr; gap:12px }
@media (min-width:640px){ #customThemeSection .theme-grid{ grid-template-columns:1fr 1fr } }

#customThemeSection .theme-grid > label{
  display:grid; grid-template-columns:110px minmax(0,1fr); align-items:start; gap:12px;
  padding:12px; border-radius:12px; min-height:190px; overflow:hidden;
  background:color-mix(in srgb, var(--bg) 70%, #ffffff0C);
  border:1px solid color-mix(in srgb, var(--text) 10%, transparent);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}
#customThemeSection .theme-grid > label > span{
  font-weight:800; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#customThemeSection .cpicker{ width:100%; max-width:none }
#customThemeSection .cpicker .sv{ height:140px }
#customThemeSection .cpicker .hue{ height:12px }
#customThemeSection .cpicker .hex{ width:100% }

/* =========================
   HOLIDAY DECOR (used by JS)
   ========================= */
.holiday-deco{ position:fixed; inset:0; pointer-events:none; z-index:3 }

/* Halloween web + spider */
.halloween-web{ position:absolute; width:240px; height:240px; color:rgba(255,255,255,.22); filter:drop-shadow(0 4px 8px rgba(0,0,0,.18)) }
.halloween-web svg{ width:100%; height:100%; display:block; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round }
.halloween-web.tl{ top:12px; left:12px }
.halloween-web.tr{ top:12px; right:12px; transform:scaleX(-1) }

.spider-wrap{ --len:160px; position:absolute; top:0; right:140px; width:2px; height:0;
  transform-origin:top center; animation: lineGrow .8s ease-out forwards, spiderSwing 6s ease-in-out 1.1s infinite alternate }
.spider-line{ position:absolute; inset:0 auto auto 0; width:2px; height:100%;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.55) 0 6px, rgba(255,255,255,.18) 6px 12px) }
.spider{ position:absolute; left:-14px; bottom:-10px; width:32px; height:24px; color:#1c1230; filter:drop-shadow(0 4px 6px rgba(0,0,0,.35)) }
.spider svg{ width:100%; height:100%; display:block; fill:currentColor }

.halloween-glow{ position:absolute; width:340px; height:340px; border-radius:50%; filter:blur(90px); opacity:.25; background:radial-gradient(closest-side,#ff7a00 25%,transparent 60%) }
.halloween-glow.bl{ left:-120px; bottom:-120px } .halloween-glow.br{ right:-120px; bottom:-120px }

@keyframes lineGrow{ from{height:0} to{height:var(--len)} }
@keyframes spiderSwing{ 0%{transform:rotate(-6deg)} 100%{transform:rotate(6deg)} }

/* Floating ghosts for Halloween */
.halloween-ghost{ position:absolute; top:-12vh; left:var(--left,50vw); pointer-events:none; filter:drop-shadow(0 6px 10px rgba(0,0,0,.25)); animation:ghostFall var(--dur,12s) linear infinite; animation-delay:var(--delay,0s); opacity:var(--alpha,.75); z-index:0 }
.halloween-ghost .g{ display:block; width:var(--size,28px); height:auto; animation:ghostWobble calc(var(--dur,12s)*.6) ease-in-out infinite alternate }
.halloween-ghost .g path.body{ fill:#fff } .halloween-ghost .g .eye{ fill:#1c1230; opacity:.9 }
@keyframes ghostFall{ 0%{top:-12vh} 100%{top:110vh} }
@keyframes ghostWobble{ 0%{ transform:translateX(calc(-1 * var(--amp,18px))) } 100%{ transform:translateX(var(--amp,18px)) } }

/* Snowflakes, confetti, hearts, badge */
.snowflake{ position:absolute; top:-10px; font-size:12px; opacity:.8; animation:snow 10s linear infinite }
@keyframes snow{ to{ transform:translateY(110vh); opacity:.95 } }

.confetti{ position:absolute; width:8px; height:14px; background:currentColor; opacity:.95; pointer-events:none; will-change:transform,opacity; animation:confettiFall var(--dur,4.6s) linear both }
@keyframes confettiFall{ 0%{ transform:translate3d(0,0,0) rotate(0deg); opacity:.95 } 100%{ transform:translate3d(var(--drift,0px),140vh,0) rotate(720deg); opacity:0 } }

.heart{ position:absolute; width:14px; height:14px; background:currentColor; color:#ff4d6d; transform:rotate(45deg); opacity:.28; animation:hearts 8s ease-in infinite; bottom:-10vh }
.heart:before,.heart:after{ content:""; position:absolute; width:14px; height:14px; background:currentColor; border-radius:50% }
.heart:before{ left:-7px } .heart:after{ top:-7px }
@keyframes hearts{ 0%{ transform:translateY(0) rotate(45deg) } 100%{ transform:translateY(-90vh) rotate(45deg) } }

.holiday-badge{
  position:fixed; right:16px; bottom:16px; z-index:4;
  padding:8px 12px; border-radius:999px; font-weight:900;
  background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.2)
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .spider-wrap{ animation: lineGrow .6s ease-out forwards }
  .halloween-ghost .g{ animation:none }
  .snowflake, .confetti, .heart{ animation:none !important }
}

/* =========================
   LIGHT MODE POLISH (theme only)
   ========================= */
body.light-mode .theme-panel{
  background:#fff; border-left:1px solid rgba(20,28,40,.10); box-shadow:0 20px 50px rgba(0,0,0,.08)
}
body.light-mode .theme-panel .theme-grid label,
body.light-mode .theme-panel .theme-row{
  background:#fbfcff; border:1px solid rgba(20,28,40,.10); box-shadow:0 6px 14px rgba(0,0,0,.05)
}
body.light-mode .theme-panel select{
  border:1px solid rgba(20,28,40,.10); background:#fff; color:var(--text)
}
body.light-mode .cpicker .sv,
body.light-mode .cpicker .hue,
body.light-mode .cpicker .swatch,
body.light-mode .cpicker .hex{
  border-color:rgba(17,24,39,.12); background-color:rgba(17,24,39,.04)
}


/* ============================================
   Holiday preset themes (class-based overrides)
   Add one of these classes to <body>:
   - holiday-halloween
   - holiday-christmas
   - holiday-newyear
   - holiday-valentines
   These override your CSS variables, so the
   whole UI picks up the palette automatically.
   ============================================ */

/* Halloween */
body.holiday-halloween{
  --brand:   #FF7A00;
  --brand-2: #7C2CFF;
  --bg:      #0B0A12;
  --text:    #EFE9FF;
  --blob1:   #FF7A00;
  --blob2:   #7C2CFF;
  /* slightly stronger panel in dark spooky mode */
  --panel: rgba(255,255,255,.10);
  --ring:  rgba(255,122,0,.45);
}
body.holiday-halloween .halloween-web{ color: color-mix(in srgb, var(--brand) 40%, #ffffff 40%); }

/* Christmas */
body.holiday-christmas{
  --brand:   #B22222; /* firebrick */
  --brand-2: #2E8B57; /* sea green */
  --bg:      #0B1020;
  --text:    #F5F7FF;
  --blob1:   #B22222;
  --blob2:   #2E8B57;
  --panel:   rgba(255,255,255,.10);
  --ring:    rgba(178,34,34,.40);
}

/* New Year */
body.holiday-newyear{
  --brand:   #FFD166; /* gold */
  --brand-2: #06D6A0; /* teal */
  --bg:      #0A0B14;
  --text:    #F7F9FF;
  --blob1:   #FFD166;
  --blob2:   #118AB2;
  --panel:   rgba(255,255,255,.10);
  --ring:    rgba(255,209,102,.40);
}

/* Valentine’s */
body.holiday-valentines{
  --brand:   #FF4D6D;
  --brand-2: #FF99AC;
  --bg:      #121018;
  --text:    #FFF1F5;
  --blob1:   #FF4D6D;
  --blob2:   #C77DFF;
  --panel:   rgba(255,255,255,.10);
  --ring:    rgba(255,77,109,.40);
}

/* Optional: make Halloween décor tint respect theme brand */
body.holiday-halloween .holiday-badge{ background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
/* Optional: same idea for other holidays (already uses --brand vars) */


.ghost-item.selected .card{
  outline:2px solid color-mix(in srgb, var(--brand) 70%, transparent);
  box-shadow:0 10px 28px rgba(124,92,255,.25);
}
.ghost-item.mark-2 .card{
  outline:2px dashed color-mix(in srgb, var(--brand-2) 70%, transparent);
}


/* === Color Picker — wide, full-width (override) === */
#customThemeSection .theme-grid{
  display:grid;
  grid-template-columns:1fr;     /* stack one per row */
  gap:12px;
}

/* each field becomes a card with the picker underneath the label */
#customThemeSection .theme-grid > label{
  display:block;                 /* not a two-column grid */
  padding:14px;
  border-radius:12px;
  background:color-mix(in srgb, var(--bg) 70%, #ffffff0C);
  border:1px solid color-mix(in srgb, var(--text) 10%, transparent);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  font-weight:900;
}

/* the picker itself fills the card width */
.cpicker{
  --radius:12px; --border:1px solid rgba(255,255,255,.14);
  width:100%;
  max-width:none;
  display:grid;
  gap:10px;
  user-select:none;
}

/* thin preview strip */
.cpicker .swatch{
  height:16px;
  border-radius:8px;
  border:var(--border);
  background:
    repeating-conic-gradient(#0000 0% 25%, #00000010 0% 50%) 50%/12px 12px,
    var(--current, #7c5cff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* BIG saturation/value panel */
.cpicker .sv{
  position:relative;
  height:220px;                  /* adjust 180–260px to taste */
  border-radius:var(--radius);
  border:var(--border);
  background:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, hsl(var(--h),100%,50%));
  cursor:crosshair;
  box-shadow:0 6px 16px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
}
.cpicker .sv .knob{
  position:absolute;
  width:16px; height:16px;
  border-radius:999px;
  border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.35);
  transform:translate(-50%,-50%);
  pointer-events:none;
}

/* Hue strip under the SV panel */
.cpicker .hue{
  position:relative;
  height:12px;
  border-radius:999px;
  border:var(--border);
  background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  cursor:pointer;
}
.cpicker .hue .knob{
  position:absolute; top:50%;
  transform:translate(-50%,-50%);
  width:14px; height:14px;
  border-radius:999px;
  border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.35);
  pointer-events:none;
}

/* HEX input row */
.cpicker .row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px; align-items:center;
}
.cpicker .hex{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:var(--text);
  font-weight:800; letter-spacing:.4px;
  outline:none;
}
.cpicker .row span{
  padding:0 10px; height:40px;
  display:grid; place-items:center;
  border-radius:10px; font-weight:900;
  color:var(--muted);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
}

/* slightly shorter on very small screens */
@media (max-width:720px){ .cpicker .sv{ height:190px } }


body::before {
  width: 500px;
  height: 500px;
  right: -140px;
  top: -100px;

  background: conic-gradient(
    from 0deg at 50% 50%,
    var(--blob1) 0%,
    color-mix(in srgb, var(--blob1) 60%, var(--brand) 40%) 20%,
    var(--brand) 35%,
    color-mix(in srgb, var(--brand) 40%, var(--brand-2) 60%) 55%,
    var(--brand-2) 70%,
    color-mix(in srgb, var(--brand-2) 40%, var(--blob2) 60%) 85%,
    var(--blob2) 100%
  );

  
  -webkit-mask: radial-gradient(closest-side, #000 45%, #0000 80%);
          mask: radial-gradient(closest-side, #000 45%, #0000 80%);

  animation: orbSpinA 38s linear infinite, orbBobA 26s ease-in-out infinite;
}


body::after {
  width: 420px;
  height: 420px;
  left: -100px;
  bottom: -80px;

  background: conic-gradient(
    from 120deg at 50% 50%,
    var(--blob2) 0%,
    color-mix(in srgb, var(--blob2) 60%, var(--brand-2) 40%) 18%,
    var(--brand-2) 36%,
    color-mix(in srgb, var(--brand-2) 40%, var(--brand) 60%) 58%,
    var(--brand) 76%,
    color-mix(in srgb, var(--brand) 45%, var(--blob1) 55%) 90%,
    var(--blob1) 100%
  );

  -webkit-mask: radial-gradient(closest-side, #000 45%, #0000 80%);
          mask: radial-gradient(closest-side, #000 45%, #0000 80%);

  animation: orbSpinB 42s linear infinite, orbBobB 30s ease-in-out infinite;
}


/* Top-right Home button */
.home-btn{
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 40;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .2px;
  padding: 10px 14px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
  transition: transform .08s ease, filter .12s ease;
}
.home-btn:hover{ transform: translateY(-2px); }
.home-btn:active{ transform: translateY(0); filter: brightness(.98); }
.home-btn:focus-visible{ outline: 3px solid var(--ring); outline-offset: 2px; }

/* (optional) nudge on very small screens */
@media (max-width:520px){
  .home-btn{ top:12px; right:12px; padding:9px 12px; }
}


/* Grey out on 3rd click (state = mark-2) */
.ghost-item.mark-2 .card{
  outline: 0;                                   /* remove dashed outline */
  filter: grayscale(1) brightness(.85);         /* desaturate + dim */
  opacity: .6;                                  /* overall fade */
  transition: filter .15s ease, opacity .15s ease;
}

/* Make chips/title look muted too */
.ghost-item.mark-2 h3,
.ghost-item.mark-2 .chip{ opacity: .75; }

/* Optional: a soft overlay for more “disabled” feel */
.ghost-item.mark-2 .card::after{
  content: "";
  position: absolute; inset: 0; border-radius: 20px;
  background: rgba(0,0,0,.12);
  pointer-events: none;                          /* keep card clickable to cycle */
}


.acc{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:rgba(255,255,255,.06);
  margin:10px 0; overflow:hidden; box-shadow:var(--shadow)
}
.acc-summary{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  list-style:none; cursor:pointer; padding:14px 16px; font-weight:900; letter-spacing:.2px; user-select:none
}
.acc-summary::-webkit-details-marker{display:none}
.acc-chevron{width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .18s ease;opacity:.8}
.acc[open] .acc-chevron{transform:rotate(45deg)}
.acc-body{display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:12px 16px 16px}
.acc-list{margin:6px 0 0 18px}
.acc-empty{opacity:.7; font-style:italic}

.select-group{ margin: 10px 0 16px; }
.select-group h2{ font-size:1.1rem; margin:0 0 8px; font-weight:900; }

.sidebar select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  color:var(--text);
  font-weight:800;
  outline:0;
}
.sidebar select:focus{
  outline:3px solid var(--ring);
  border-color:transparent;
}