:root {
  --bg: #0a0a0a;
  --bg-deep: #080808;
  --surface: #1C1C1E;
  --surface2: #2C2C2E;
  --surface3: #222224;
  --border: rgba(255,255,255,0.08);
  --border2: rgba(255,255,255,0.12);
  --text: #f0f0f0;
  --muted: #777;
  --muted2: #8E8E93;
  --accent: #e8ff47;
  --accent2: #d4d4c8;
  --heart: #ff4d6d;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { background: var(--bg); color: var(--text); font-family: 'Barlow Condensed', -apple-system, BlinkMacSystemFont, sans-serif; min-height: 100vh; }
html { overflow-x: clip; }
body { max-width: 100%; overflow-x: clip; }

/* TOAST */
.toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--surface2); border: 1px solid var(--border2); color: var(--text); font-size: 12px; padding: 10px 18px; border-radius: 999px; opacity: 0; pointer-events: none; transition: all 0.25s; z-index: 9999; white-space: nowrap; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* BACK TO TOP */
#backToTop { position: fixed; bottom: 24px; right: 16px; z-index: 350; width: 36px; height: 36px; background: var(--surface); border: 1px solid rgba(232,255,71,0.4); border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.2s, bottom 0.35s; color: rgba(232,255,71,0.7); font-size: 16px; }
#backToTop.visible { opacity: 1; pointer-events: auto; }
#backToTop:hover { color: var(--accent2); border-color: var(--accent2); }

/* INSTALL BANNER */
#installBanner { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: var(--accent); color: #0a0a0a; padding: 16px 20px; gap: 12px; align-items: center; font-size: 13px; }
#installBanner.show { display: flex; }
#installBanner .bt { flex: 1; }
#installBanner button { background: #0a0a0a; color: var(--accent); border: none; padding: 8px 14px; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; }

/* HEADER */
header { position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: 1px solid var(--border); padding: 0 12px; }
.header-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 11px 0 0; }
.logo { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 32px; letter-spacing: 0.04em; color: var(--text); flex-shrink: 0; cursor: pointer; }
.logo span { color: var(--accent); }
.search-wrap { flex: 1; min-width: 0; position: relative; }
#searchInput { width: 100%; height: 38px; background: var(--surface); border: 1px solid var(--border2); border-radius: 8px; padding: 8px 12px; color: var(--text); font-size: 14px; outline: none; transition: border-color 0.15s; }
#searchInput:focus { border-color: var(--accent); }
#searchInput::placeholder { color: var(--muted); }
#searchClearBtn { display: none; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--muted2); font-size: 15px; line-height: 1; cursor: pointer; padding: 4px 2px; }
#searchClearBtn:hover { color: var(--text); }
@media (max-width: 600px) { #searchClearBtn.visible { display: block; } }

/* HEADER BUTTONS */
.header-btn { width: 128px; height: 38px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; border: 1.5px solid var(--border2); background: var(--surface); color: var(--muted2); white-space: nowrap; flex-shrink: 0; transition: all 0.15s; text-transform: uppercase; letter-spacing: 0.05em; }
.header-btn:hover { color: var(--text); border-color: var(--muted2); }
.header-btn.active { color: var(--text); border-color: var(--accent); background: var(--surface2); }
.accent-btn { background: var(--accent); color: #0a0a0a !important; border-color: var(--accent) !important; }
.wilde-picks-btn { color: var(--accent); border-color: var(--accent); background: transparent; gap: 6px; }
.wilde-picks-btn:hover { background: rgba(232,255,71,0.08); }
.wilde-picks-btn.active { background: rgba(232,255,71,0.12); }
.accent-btn:hover { opacity: 0.85; }

/* FILTER DROPDOWNS */
.filter-dropdown { position: relative; }
.filter-dropdown-btn { background: var(--surface); border: 1px solid var(--border2); color: var(--muted2); font-size: 12px; padding: 0 9px; height: 28px; border-radius: 6px; cursor: pointer; white-space: nowrap; transition: all 0.15s; outline: none; display: flex; align-items: center; }
.filter-dropdown-btn:hover { color: var(--text); border-color: var(--muted2); }
.filter-dropdown-btn.active { color: var(--accent); border-color: var(--accent); }
.filter-dropdown-panel { display: none; position: fixed; background: var(--surface); border: 1px solid var(--border2); border-radius: 8px; padding: 4px; min-width: 150px; max-width: calc(100vw - 16px); z-index: 1000; overflow-y: auto; scrollbar-width: thin; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.filter-dropdown.open .filter-dropdown-panel { display: block; }
.dd-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 5px; cursor: pointer; font-size: 12px; color: var(--muted2); transition: background 0.1s, color 0.1s; user-select: none; }
.dd-item:hover { background: var(--surface2); color: var(--text); }
.dd-item input[type="checkbox"] { accent-color: var(--accent); width: 12px; height: 12px; cursor: pointer; flex-shrink: 0; }

/* RESULTS BAR */
.results-bar { display: flex; align-items: center; padding: 7px 12px; border-top: 1px solid var(--border); gap: 10px; background: var(--bg); flex: 0 0 calc(100% + 24px); margin: 0 -12px; order: 10; }
.results-count { font-size: 11px; color: var(--muted2); white-space: nowrap; font-weight: 500; letter-spacing: 0.01em; }
.results-count strong { color: var(--accent); font-weight: 700; }
.results-bar-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.results-fav-btn { background: var(--surface); border: 1px solid var(--border2); border-radius: 6px; cursor: pointer; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; transition: all 0.15s; }
.results-fav-btn:hover .heart-icon { stroke: var(--heart); }
.results-fav-btn.active .heart-icon { fill: var(--heart); stroke: var(--heart); }
#clearFiltersBtn { background: none; border: 1px solid var(--accent); color: var(--accent); font-size: 12px; padding: 0 9px; height: 28px; border-radius: 6px; cursor: pointer; white-space: nowrap; transition: all 0.15s; outline: none; }
#clearFiltersBtn:hover { background: var(--accent); color: var(--bg); }

/* LIST */
#listContainer { padding: 6px 8px 200px; }
.ex-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; margin-bottom: 8px; overflow: hidden; transition: border-color 0.25s, box-shadow 0.25s; box-shadow: 0 1px 3px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.3); }
.ex-card:hover { border-color: rgba(232,255,71,0.35); box-shadow: 0 2px 6px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(232,255,71,0.06); }
.ex-card.expanded { border-color: var(--border2); }
.ex-card-main { display: flex; align-items: center; padding: 10px 7px 10px 0; gap: 12px; cursor: pointer; min-height: 80px; }
.muscle-bar { width: 3px; border-radius: 0; flex-shrink: 0; align-self: stretch; }
.ex-info { flex: 1; min-width: 0; padding-left: 4px; }
.ex-name { font-size: 21px; font-weight: 700; line-height: 1.2; white-space: normal; word-break: break-word; letter-spacing: -0.01em; font-family: 'Inter', sans-serif; }
.ex-name-paren { font-weight: 500; opacity: 0.58; }
.ex-tags { display: flex; gap: 5px; margin-top: 10px; flex-wrap: wrap; }
.ex-tag { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 6px; border-radius: 3px; border: 1px solid; white-space: nowrap; }
/* Difficulty tags — clean, readable progression: slate blue → orange → red-gold */
[class*="diff-tag-"] { border-radius: 2px; font-weight: 700; font-size: 9.5px; }
.diff-tag-novice       { background:rgba(100,160,255,0.12); color:#82AAFF; border-color:rgba(100,160,255,0.40); }
.diff-tag-beginner     { background:rgba(80,200,220,0.12);  color:#4FC8DC; border-color:rgba(80,200,220,0.40);  }
.diff-tag-intermediate { background:rgba(60,210,160,0.12);  color:#38D4A0; border-color:rgba(60,210,160,0.38);  }
.diff-tag-advanced     { background:rgba(232,255,71,0.10);  color:#C8D93A; border-color:rgba(232,255,71,0.38);  }
.diff-tag-expert       { background:rgba(255,185,60,0.12);  color:#FFB93C; border-color:rgba(255,185,60,0.40);  }
.diff-tag-master       { background:rgba(255,120,50,0.12);  color:#FF7832; border-color:rgba(255,120,50,0.42);  }
.diff-tag-legendary    { background:rgba(255,70,80,0.12);   color:#FF5560; border-color:rgba(255,70,80,0.42);   }
.diff-tag-grand-master { background:rgba(220,50,255,0.12);  color:#E060FF; border-color:rgba(220,50,255,0.42);  letter-spacing:0.07em; }
.ex-tag-equip { background: rgba(160,160,165,0.1); color: rgba(200,200,205,0.8); border-color: rgba(160,160,165,0.3); font-size: 10px; font-weight: 400; }
.ex-meta { font-size: 10px; color: var(--muted2); margin-top: 4px; }
.fav-btn { background: none; border: none; cursor: pointer; flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0; }
.heart-icon { fill: none; stroke: var(--muted); transition: fill 0.15s, stroke 0.15s; }
.fav-btn.active .heart-icon { fill: var(--heart); stroke: var(--heart); }
.fav-btn:hover .heart-icon { stroke: var(--heart); }

/* SKELETON / SHIMMER */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.skel-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; margin-bottom: 8px; overflow: hidden; }
.skel-card-main { display: flex; align-items: center; padding: 10px 7px 10px 0; gap: 12px; min-height: 80px; }
.skel-bar { width: 3px; align-self: stretch; flex-shrink: 0; background: var(--surface2); }
.skel-info { flex: 1; min-width: 0; padding-left: 4px; }
.skel-line, .skel-tag { border-radius: 4px; background: linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 50%, var(--surface2) 75%); background-size: 800px 100%; animation: shimmer 1.4s infinite linear; }
.skel-line { height: 18px; width: 62%; }
.skel-tags { display: flex; gap: 5px; margin-top: 12px; }
.skel-tag { height: 16px; border-radius: 3px; }
.skel-tag:first-child { width: 72px; }
.skel-tag:last-child  { width: 52px; }
.skel-fav { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--surface2); }

/* EXPANDED CARD */
.ex-video-wrap { padding: 12px 14px 10px; }
.ex-video-link { display: flex; align-items: center; justify-content: center; gap: 10px; background: transparent; color: var(--accent); border: 1.5px solid var(--accent); border-radius: 10px; padding: 13px 18px; font-size: 14px; font-weight: 800; text-decoration: none; transition: background 0.15s, color 0.15s; text-transform: uppercase; letter-spacing: 0.05em; }
.ex-video-link:hover { background: var(--accent); color: #0a0a0a; }
.ex-video-play { font-size: 15px; line-height: 1; }
.ex-details { margin: 0 14px 12px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.ex-detail-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.ex-detail-row:last-child { border-bottom: none; }
.ex-detail-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted2); }
.ex-detail-value { font-size: 12px; color: var(--text); text-align: right; max-width: 60%; }
.ex-actions { display: flex; gap: 8px; padding: 0 14px 14px; }
.ex-action-btn { flex: 1; background: var(--surface2); border: 1.5px solid var(--border2); border-radius: 10px; padding: 13px 10px; color: var(--muted2); font-size: 13px; font-weight: 800; cursor: pointer; transition: all 0.15s; letter-spacing: 0.04em; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; text-transform: uppercase; }
.ex-action-btn:hover { color: var(--accent2); border-color: rgba(212,212,200,0.35); }
/* EXPANDED CARD PANELS — 3-column layout */
.ex-card-panels { display: grid; grid-template-columns: auto 1fr auto; padding: 0 0 10px; background: var(--surface3); }
.ex-panel-left  { min-width: 0; overflow: hidden; padding: 10px 10px 10px 12px; display: flex; flex-direction: column; }
.ex-panel-mid   { min-width: 0; overflow: hidden; padding: 10px 8px; border-left: 1px solid var(--border); border-right: 1px solid var(--border); display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.ex-panel-right { min-width: 0; overflow: hidden; padding: 10px 12px 10px 10px; }

/* Left panel — metadata key-value list */
.ex-meta-kv-list    { display: flex; flex-direction: column; gap: 10px; padding: 2px 0; }
.ex-meta-kv         { display: flex; flex-direction: column; gap: 0; }
.ex-meta-kv-label   { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(200,200,205,0.75); margin-bottom: 2px; }
.ex-meta-kv-val     { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3; word-break: break-word; }

/* Center panel — video thumbnail */
.ex-thumb-wrap { display: block; position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: #111; text-decoration: none; }
.ex-thumb-img  { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ex-thumb-play { position: absolute; bottom: 6px; left: 6px; display: flex; align-items: center; justify-content: center; background: none; transition: opacity 0.15s; }
.ex-thumb-wrap:hover .ex-thumb-play { opacity: 0.85; }
.ex-thumb-play.no-video { background: transparent; border: 1.5px solid var(--accent); border-radius: 8px; inset: 0; position: absolute; bottom: unset; left: unset; }
.ex-thumb-play-icon { width: 28px; height: 28px; background: rgba(0,0,0,0.72); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; padding-left: 2px; }
.ex-thumb-play.no-video .ex-thumb-play-icon { background: rgba(232,255,71,0.12); color: var(--accent); }
.ex-thumb-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Right panel — difficulty meter */
.ex-diff-label-top { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: rgba(200,200,205,0.8); margin-bottom: 4px; }
.ex-diff-pips      { display: flex; gap: 2px; margin-bottom: 3px; }
.ex-diff-pip       { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.07); }
.ex-diff-pip.filled { opacity: 1; }
.ex-diff-range     { display: flex; justify-content: space-between; font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: rgba(200,200,205,0.7); }

/* Right panel — dual muscle diagram */
.dual-diagram-inner { display: flex; gap: 6px; justify-content: center; padding-top: 4px; }

/* Image-based muscle diagram */
.dual-diagram-inner--images { gap: 8px; align-items: stretch; }
.diagram-img-col  { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
.diagram-img      { width: 100%; height: 180px; object-fit: contain; display: block; background: transparent; }
.diagram-img--secondary { filter: brightness(0.45) saturate(0.6); }
.diagram-img-label { font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
/* Overlay layout: same body-side muscles stacked on one figure */
.dual-diagram-inner--overlay { position: relative; display: flex; justify-content: center; align-items: center; }
.dual-diagram-inner--overlay .diagram-img { width: 100%; height: auto; }
.dual-diagram-inner--overlay .diagram-img--secondary { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: none; opacity: 0.38; }
.dual-diagram-inner--overlay .diagram-img--primary { position: relative; }
.dual-diagram-view  { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; }
.dual-diagram-label { font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(142,142,147,0.45); order: 1; margin-top: 2px; }
.dual-diagram-svg   { width: 100%; aspect-ratio: 1/2; opacity: 0.35; transition: opacity 0.25s; order: 0; }
.dual-diagram-svg.has-highlight { opacity: 1; }

@keyframes muscle-pulse {
  0%   { opacity: 0; }
  40%  { opacity: 1; }
  70%  { opacity: 0.6; }
  100% { opacity: 1; }
}
.dual-diagram-svg.has-highlight .muscle-lit {
  animation: muscle-pulse 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Difficulty bar above video */
.ex-diff-above-video { flex-shrink: 0; }
.ex-diff-desktop { display: none; }
.ex-diff-mobile  { display: none; }

/* Mobile: diff bar full-width above grid, meta + video side-by-side, diagram below */
@media (max-width: 600px) {
  .ex-diff-mobile  { display: block; padding: 8px 12px 6px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .ex-card-panels  { grid-template-columns: auto 1fr; grid-template-rows: auto auto; }
  .ex-panel-left   { grid-column: 1; grid-row: 1; border-right: 1px solid var(--border); align-self: start; }
  .ex-panel-mid    { grid-column: 2; grid-row: 1; border-left: none; border-right: none; padding: 10px 10px; justify-content: flex-start; }
  .ex-panel-right  { grid-column: 1 / -1; grid-row: 2; padding: 10px 12px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
  .dual-diagram-inner { max-width: 180px; margin: 0 auto; }
}

/* Desktop: scale up all panel content uniformly */
@media (min-width: 601px) {
  .ex-panel-left  { padding: 14px 14px 14px 16px; }
  .ex-panel-mid   { padding: 14px 10px; }
  .ex-panel-right { padding: 14px 16px 14px 10px; }
  .ex-meta-kv-val { font-size: 13px; }
  .dual-diagram-inner { gap: 8px; }
  .ex-card-panels { grid-template-columns: 190px 1fr 170px; }
  .ex-diff-desktop { display: block; background: var(--surface3); padding: 8px 16px 6px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .ex-diff-mobile { display: none; }
  .results-count { font-size: 15px; }
}

/* Expanded card header — tighter, tags inline with title */
.ex-card.expanded .ex-card-main { padding: 8px 7px 8px 0; min-height: 0; }
.ex-card.expanded .ex-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ex-card.expanded .ex-name { max-width: 100%; }
.ex-card.expanded .ex-tags { margin-top: 0; flex-shrink: 0; }

/* EMPTY / LOADING */
.empty-state, .loading-state { text-align: center; padding: 60px 20px; color: var(--muted2); font-size: 13px; }

/* VISUAL EXPLORER */
#explorerOverlay { display: none; position: fixed; inset: 0; z-index: 200; background: var(--bg-deep); flex-direction: column; }
#explorerOverlay.open { display: flex; }
.explorer-header { position: relative; display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; min-height: 56px; }
.explorer-back-btn { background: var(--surface); border: 1px solid var(--border2); color: var(--text); font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 8px; cursor: pointer; flex-shrink: 0; }
.explorer-back-btn:hover { border-color: var(--accent2); color: var(--accent2); }
.explorer-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 24px; font-weight: 800; color: var(--text); pointer-events: none; letter-spacing: -0.03em; white-space: nowrap; }
.explorer-canvas { flex: 1; position: relative; overflow: hidden; cursor: grab; user-select: none; }

/* Lines */
#explorerLines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity 0.18s; }
#explorerLines.explorer-transitioning { opacity: 0; }
.explorer-line { stroke-width: 3; fill: none; }
.explorer-line.regression  { stroke: #3b82f6; opacity: 0.7; }
.explorer-line.progression { stroke: #4ade80; opacity: 0.7; }
.explorer-line.variation   { stroke: #555;    opacity: 0.4; stroke-dasharray: 5 9; }

/* Explorer viewport — pan/zoom transform applied here */
#explorerViewport { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }

/* Nodes container */
#explorerNodes { position: absolute; inset: 0; transition: opacity 0.18s; }
#explorerNodes.explorer-transitioning { opacity: 0; }

/* Dim non-hovered satellites */
.explorer-canvas:has(.satellite-node:hover) .satellite-node:not(:hover) { opacity: 0.22; transition: opacity 0.2s; }

/* Base node */
.explorer-node { position: absolute; transform: translate(-50%, -50%); cursor: pointer; z-index: 2; }

/* Center node */
@keyframes center-glow {
  0%   { box-shadow: 0 0 0 0 rgba(232,255,71,0.22); }
  45%  { box-shadow: 0 0 32px 10px rgba(232,255,71,0.07); }
  100% { box-shadow: 0 0 0 0 rgba(232,255,71,0); }
}
.center-node {
  width: 230px;
  background: radial-gradient(ellipse at 50% 30%, var(--surface) 0%, var(--bg) 100%);
  border: 1.5px solid #484848;
  border-radius: 18px;
  padding: 22px 20px;
  text-align: center;
  cursor: pointer;
  animation: center-glow 2s ease-out;
}
.cn-name { font-size: 20px; font-weight: 800; color: #f2f2f2; line-height: 1.3; }
.cn-meta { font-size: 10px; color: var(--muted); margin-top: 9px; text-transform: uppercase; letter-spacing: 0.06em; }

/* Satellite nodes */
.satellite-node { display: flex; flex-direction: column; align-items: center; transition: transform 0.2s, opacity 0.2s; cursor: pointer; }
.satellite-node:hover { transform: translate(-50%, -50%) scale(1.1); z-index: 10; }
.sat-badge { font-size: 6px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; padding: 2px 6px; border-radius: 999px; margin-bottom: 4px; }
.type-regression  .sat-badge { color: #3b82f6; background: rgba(59,130,246,0.1);  border: 1px solid rgba(59,130,246,0.3); }
.type-progression .sat-badge { color: #4ade80; background: rgba(74,222,128,0.1);  border: 1px solid rgba(74,222,128,0.3); }
.type-variation   .sat-badge { color: #777;    background: rgba(136,136,136,0.08); border: 1px solid rgba(136,136,136,0.2); }
.satellite-node .sat-inner { width: 140px; background: var(--bg); border: 1px solid var(--surface2); border-radius: 10px; padding: 10px 10px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 5px; transition: border-color 0.2s, box-shadow 0.2s; overflow: hidden; }
.satellite-node:hover .sat-inner { border-color: var(--accent); box-shadow: 0 0 16px rgba(232,255,71,0.14); }
.sat-regression  .sat-inner { border-left: 2px solid rgba(59,130,246,0.45); }
.sat-progression .sat-inner { border-left: 2px solid rgba(74,222,128,0.45); }
.sat-variation   .sat-inner { border-left: 2px solid rgba(136,136,136,0.3); }
.sat-name { font-size: 11px; font-weight: 700; color: #ccc; line-height: 1.35; word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sat-diff { font-size: 8px; color: var(--muted2); text-transform: uppercase; letter-spacing: 0.04em; }

/* Satellite tooltip — muscle on hover */
.sat-tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--surface); border: 1px solid var(--border2); border-radius: 6px; padding: 5px 10px; pointer-events: none; opacity: 0; transition: opacity 0.15s; white-space: nowrap; z-index: 20; }
.satellite-node:hover .sat-tooltip { opacity: 1; }
.sat-tip-muscle { font-size: 10px; font-weight: 700; color: #e0e0e0; }

/* "YOU ARE HERE" label on the center node */
.cn-badge { font-size: 7px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); opacity: 0.7; margin-bottom: 8px; }

/* Ancestor nodes — on the yellow path leading to the current exercise */
.type-ancestor .sat-badge { color: var(--accent); background: rgba(232,255,71,0.08); border: 1px solid rgba(232,255,71,0.28); }
.sat-ancestor { border-left: 2px solid rgba(232,255,71,0.6) !important; }
.type-ancestor:hover .sat-inner { border-color: var(--accent) !important; box-shadow: 0 0 16px rgba(232,255,71,0.18) !important; }

/* Descendant nodes — the harder moves that lie ahead */
.type-descendant .sat-badge { color: #4ade80; background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.3); }
.sat-descendant { border-left: 2px solid rgba(74,222,128,0.5) !important; }

/* ADMIN HEADER BUTTON */
.exit-edit-btn { background: #7f1d1d !important; color: #fca5a5 !important; border-color: #991b1b !important; }
.exit-edit-btn:hover { background: #991b1b !important; color: #fff !important; }

/* CARD EDIT CONTROLS */
.card-checkbox { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border: 1.5px solid var(--border2); border-radius: 4px; background: var(--surface); cursor: pointer; flex-shrink: 0; transition: all 0.15s; margin-left: 10px; }
.card-checkbox:checked { background: var(--accent); border-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%230a0a0a' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.card-edit-btn, .card-del-btn { background: none; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.15s; }
.card-edit-btn { color: var(--muted2); }
.card-edit-btn:hover { color: var(--accent); border-color: var(--accent); }
.card-del-btn { color: var(--muted); }
.card-del-btn:hover { color: #f87171; border-color: #f87171; }
.card-edit-btn--quick { display: none; }
@media (max-width: 600px) { .card-edit-btn--quick { display: none !important; } }
@media (min-width: 601px) { .ex-card:hover .card-edit-btn--quick { display: flex; } }

/* CARD STATES */
.card-unsaved { outline: 2px solid #e8c547; outline-offset: -1px; }
.card-selected { outline: 2px solid var(--accent); outline-offset: -1px; background: rgba(232,255,71,0.04); }

/* ADMIN BAR */
#adminBar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 400; background: var(--surface); border-top: 1px solid var(--border2); padding: 10px 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-add-btn { background: #14532d; color: #86efac; border: 1px solid #166534; border-radius: 8px; padding: 8px 14px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.admin-add-btn:hover { background: #166534; color: #fff; }
#adminBulkArea { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; }
#adminSelLabel { font-size: 10px; color: var(--muted2); white-space: nowrap; }
.admin-bulk-btn { background: var(--surface2); border: 1px solid var(--border2); color: var(--muted2); font-size: 10px; padding: 5px 10px; border-radius: 6px; cursor: pointer; }
.admin-bulk-btn:hover { color: var(--text); border-color: var(--muted2); }
.admin-bulk-del-btn { background: #450a0a; color: #fca5a5; border: 1px solid #7f1d1d; font-size: 10px; padding: 5px 10px; border-radius: 6px; cursor: pointer; }
.admin-bulk-del-btn:hover { background: #7f1d1d; color: #fff; }
#adminBulkArea select { background: var(--surface2); border: 1px solid var(--border2); color: var(--muted2); font-size: 10px; padding: 5px 8px; border-radius: 6px; cursor: pointer; outline: none; }
.admin-bar-right { margin-left: auto; display: flex; gap: 6px; }
.admin-save-btn { background: #1e3a5f; color: #93c5fd; border: 1px solid #1d4ed8; border-radius: 8px; padding: 8px 14px; font-size: 12px; font-weight: 700; cursor: pointer; display: flex; align-items: center; }
.admin-save-btn:hover { background: #1d4ed8; color: #fff; }
.admin-discard-btn { background: none; color: #f87171; border: 1px solid #7f1d1d; border-radius: 8px; padding: 8px 14px; font-size: 12px; font-weight: 700; cursor: pointer; }
.admin-discard-btn:hover { background: #450a0a; }

/* MODALS */
.modal-overlay { display: none; position: fixed; inset: 0; z-index: 600; background: rgba(0,0,0,0.7); align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.open { display: flex; }
.modal-box { background: var(--surface); border: 1px solid var(--border2); border-radius: 14px; padding: 24px 22px; width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 10px; }
.modal-box-lg { max-width: 480px; max-height: 85vh; overflow-y: auto; }
.modal-title { font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.modal-label { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: -4px; }
.modal-input { background: var(--surface2); border: 1px solid var(--border2); border-radius: 8px; padding: 9px 12px; color: var(--text); font-size: 13px; outline: none; width: 100%; transition: border-color 0.15s; }
.modal-input:focus { border-color: var(--accent); }
.modal-textarea { resize: vertical; min-height: 72px; }
.modal-actions { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.modal-btn-primary { background: var(--accent); color: #0a0a0a; border: none; border-radius: 8px; padding: 9px 18px; font-size: 13px; font-weight: 800; cursor: pointer; }
.modal-btn-primary:hover { opacity: 0.88; }
.modal-btn-cancel { background: var(--surface2); color: var(--muted2); border: 1px solid var(--border2); border-radius: 8px; padding: 9px 14px; font-size: 13px; font-weight: 700; cursor: pointer; }
.modal-btn-cancel:hover { color: var(--text); }
.modal-btn-danger { background: #450a0a; color: #fca5a5; border: 1px solid #7f1d1d; border-radius: 8px; padding: 9px 14px; font-size: 13px; font-weight: 700; cursor: pointer; margin-left: auto; }
.modal-btn-danger:hover { background: #7f1d1d; color: #fff; }

/* EQUIP CHIPS */
.equip-group { display: flex; gap: 8px; flex-wrap: wrap; }
.equip-chip { display: flex; align-items: center; gap: 6px; background: var(--surface2); border: 1px solid var(--border2); border-radius: 20px; padding: 6px 14px; font-size: 12px; cursor: pointer; transition: border-color 0.15s, background 0.15s; user-select: none; color: var(--muted2); }
.equip-chip input { display: none; }
.equip-chip.checked { border-color: var(--accent); background: rgba(232,255,71,0.08); color: var(--accent); }

/* WILDE PICK TOGGLE */
.modal-wilde-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 2px; }
.toggle-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track { position: absolute; inset: 0; background: var(--surface2); border: 1px solid var(--border2); border-radius: 999px; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.toggle-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: var(--muted); border-radius: 50%; transition: transform 0.2s, background 0.2s; }
.toggle-switch input:checked + .toggle-track { background: var(--accent); border-color: var(--accent); }
.toggle-switch input:checked + .toggle-track::after { transform: translateX(18px); background: #0a0a0a; }

/* Keep bottom padding when admin bar is visible */
body.edit-mode #listContainer { padding-bottom: 100px; }


/* ── DRAWER INTERIOR — redesigned layout ──────────────────────────────────── */
.ex-drawer__peek-tags {
  display: flex; gap: 5px; align-items: center; flex-shrink: 0;
}
.ex-drawer__title-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 0; overflow: visible;
}
.ex-drawer__title-row .ex-drawer__name {
  font-size: clamp(21px, 5.5vw, 25px); font-weight: 700;
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.02em; line-height: 1.2;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  flex: 1; min-width: 0;
}
.ex-drawer__title-row .ex-name-paren { font-weight: 500; opacity: 0.58; }

/* Mobile drawer: hide equipment parens and grow title to fill space */
@media (max-width: 600px) {
  .ex-drawer__title-row .ex-name-paren { display: none; }
  .ex-drawer__title-row .ex-drawer__name { font-size: clamp(24px, 7vw, 30px); }
  .ex-drawer-chips { justify-content: flex-start; }
  .ex-drawer-chip { align-items: flex-start; }
  .ex-drawer-chip__label { font-size: 12px; }
  .ex-drawer-chip__val { font-size: 17px; }
}

/* Fav button in drawer peek header */
.ex-drawer__fav-btn {
  flex-shrink: 0;
  width: 40px; height: 40px;
  margin-left: auto;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  transition: background 0.15s, border-color 0.15s;
}
.ex-drawer__fav-btn:hover { background: rgba(255,80,100,0.1); border-color: rgba(255,80,100,0.3); }
.ex-drawer__fav-btn .heart-icon { stroke: var(--muted2); transition: fill 0.15s, stroke 0.15s; }
.ex-drawer__fav-btn:hover .heart-icon { stroke: var(--heart); }
.ex-drawer__fav-btn.active .heart-icon { fill: var(--heart); stroke: var(--heart); }
.ex-drawer__fav-btn.active { background: rgba(255,77,109,0.12); border-color: rgba(255,77,109,0.35); }

/* Hero diff section */
.ex-drawer-hero {
  padding: 8px 16px 10px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.2);
}
.ex-drawer-hero__diff-name {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; white-space: nowrap;
}
.ex-drawer-hero__pips {
  display: flex; gap: 3px; margin-bottom: 8px; position: relative;
}
.ex-drawer-hero__pip {
  flex: 1; height: 9px; border-radius: 4px;
  background: rgba(255,255,255,0.07);
}
.ex-drawer-hero__pip.filled { opacity: 1; }
.ex-drawer-hero__pip.filled.last-filled {
  position: relative;
}
.ex-drawer-hero__pip.filled.last-filled::after {
  content: '';
  position: absolute;
  right: -1px; top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: inherit;
  border: 2px solid var(--bg);
  box-shadow: 0 0 6px rgba(0,0,0,0.5);
}
.ex-drawer-hero__range {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: rgba(200,200,205,0.5);
  position: relative;
}

/* Video section */
.ex-drawer-video {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.ex-drawer-video .ex-thumb-wrap { border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.6); }

/* Chips row */
.ex-drawer-chips {
  display: flex; gap: 8px; padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.ex-drawer-chip {
  display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 80px;
}
.ex-drawer-chip__label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: rgba(180,180,190,0.75);
}
.ex-drawer-chip__val {
  font-size: 15px; font-weight: 700; line-height: 1.2;
  color: #f0f0f2;
}

.ex-drawer-chip__diagram-img { display: block; width: 100%; max-height: 90px; object-fit: contain; margin-top: 6px; }

/* Diagrams section — hidden on mobile (chips show images); visible on desktop via side panel */
.ex-drawer-diagrams {
  padding: 16px 16px 24px;
  display: none; justify-content: center;
}
.ex-drawer-diagrams .dual-diagram-inner {
  max-width: 220px; width: 100%;
}

/* ── DRAWER DESKTOP LAYOUT (≥601px) ───────────────────────────────────────── */
@media (min-width: 601px) {
  #exDrawer {
    left: 0; right: 0;
    width: min(600px, 92vw);
    margin-left: auto; margin-right: auto;
    height: 80vh;
    border-radius: 18px 18px 0 0;
  }
  #exDrawer.ex-drawer--closed  { transform: translateY(100%); }
  #exDrawer.ex-drawer--peek    { transform: translateY(calc(100% - var(--drawer-header-h))); }
  #exDrawer.ex-drawer--full    { transform: translateY(15vh); }
  #exDrawer.ex-drawer--dragging { transition: none !important; transform: translateY(var(--drawer-ty, 100%)); }

  /* Two-column panel layout: video left, sidebar right */
  #exDrawerPanels {
    display: grid;
    grid-template-columns: 1fr 200px;
    grid-template-rows: auto auto auto;
    gap: 0;
  }
  .ex-drawer-hero  { grid-column: 1 / -1; }
  .ex-drawer-video {
    grid-column: 1; grid-row: 2 / 4;
    border-bottom: none; border-right: 1px solid var(--border);
    padding: 16px 20px 20px;
    display: flex; align-items: flex-start;
  }
  .ex-drawer-video .ex-thumb-wrap { width: 100%; }
  .ex-drawer-chips {
    grid-column: 2; grid-row: 2 / 4;
    flex-direction: column; gap: 10px;
    border-bottom: none;
    padding: 14px 16px 16px;
    overflow-y: auto;
  }
  .ex-drawer-chip { flex: none; }
  .ex-drawer-chip__diagram-img { max-height: 110px; }
  .ex-drawer-diagrams { display: none; }
}

/* ── BOTTOM SHEET DRAWER ──────────────────────────────────────────────────── */
#exDrawer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 85vh;
  max-width: 100%;
  z-index: 450;
  background: linear-gradient(180deg, #252527 0%, #1a1a1c 100%);
  border-radius: 18px 18px 0 0;
  border-top: 1px solid rgba(255,255,255,0.14);
  border-left: 1px solid rgba(255,255,255,0.07);
  border-right: 1px solid rgba(255,255,255,0.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ex-drawer--closed  { transform: translateY(100%); }
.ex-drawer--peek    { transform: translateY(calc(100% - var(--drawer-header-h))); }
.ex-drawer--full    { transform: translateY(20vh); }
.ex-drawer--dragging { transition: none !important; }

:root { --drawer-header-h: 76px; }

.ex-drawer__header {
  flex-shrink: 0;
  min-height: var(--drawer-header-h);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  touch-action: none;
  user-select: none;
  padding-top: 10px;
  gap: 0;
}
.ex-drawer__handle-knob {
  flex-shrink: 0;
  align-self: center;
  width: 40px; height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  margin-bottom: 0;
}
.ex-drawer__title {
  flex: 1;
  width: 100%;
  font-size: clamp(21px, 5.5vw, 25px);
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.2;
  padding: 6px 10px 10px 16px;
  color: var(--text);
  white-space: normal;
  overflow: visible;
  display: flex;
  align-items: center;
}
.ex-drawer__title .ex-name-paren {
  font-weight: 500;
  opacity: 0.58;
}
.ex-drawer__full-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 32px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
#exDrawerBackdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 449;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: opacity 0.25s;
}
#exDrawerBackdrop.active { display: block; pointer-events: auto; }

/* ── DRAWER META PANEL — spread kv rows to fill the column ──────────────────── */
#exDrawer .ex-panel-left {
  height: 100%;
}
#exDrawer .ex-meta-kv-list {
  flex: 1;
  height: 100%;
  justify-content: space-between;
  gap: 0;
}

/* Card highlight when shown in drawer */
.ex-card--drawer-active {
  border-color: rgba(232,255,71,0.4) !important;
  background: rgba(232,255,71,0.03) !important;
}

/* Nudge backToTop button up when drawer is peeking/open */
body.drawer-full #backToTop { bottom: 80px; }

/* ── SEARCH HIGHLIGHT ──────────────────────────────────────────────────────── */
mark.search-highlight {
  background: rgba(232, 255, 71, 0.30);
  color: var(--accent);
  border-radius: 0;
  padding: 0 1px;
  font-style: normal;
}

/* ── SEARCH DROPDOWN ───────────────────────────────────────────────────────── */
.search-wrap { position: relative; }
.search-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 10px;
  overflow: hidden;
  z-index: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.search-dropdown.open { display: block; }
.search-dd-section { padding: 4px 0; }
.search-dd-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted2); padding: 6px 12px 2px;
}
.search-dd-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; cursor: pointer;
  font-size: 13px; color: var(--text);
  transition: background 0.1s;
  border: none; background: none; width: 100%; text-align: left;
}
.search-dd-item:hover, .search-dd-item.dd-focused {
  background: var(--surface2); color: var(--accent2);
}
.search-dd-item-icon { font-size: 12px; color: var(--muted2); flex-shrink: 0; }
.search-dd-clear {
  font-size: 10px; color: var(--muted2); background: none; border: none;
  cursor: pointer; padding: 4px 12px 6px; display: block; width: 100%;
  text-align: left; transition: color 0.1s;
}
.search-dd-clear:hover { color: var(--accent2); }
.search-dd-divider { height: 1px; background: var(--border); margin: 2px 0; }

/* MOBILE HEADER — two-row layout */
@media (max-width: 600px) {
  .header-top {
    flex-wrap: wrap;
    height: auto;
    padding: 8px 0 0;
    gap: 6px;
  }
  .logo { flex: 0 0 auto; }
  /* Filters row below logo+search row on mobile */
  .results-bar {
    order: 2;
    flex: 0 0 calc(100% + 24px);
    padding: 6px 12px;
    gap: 6px;
    align-items: center;
    align-content: center;
  }
  .results-bar-right { gap: 4px; width: 100%; align-items: stretch; }
  .results-bar-right > * { flex: 1; }
  .results-bar-right .filter-dropdown-btn,
  .results-bar-right #clearFiltersBtn { height: 38px; font-size: 13px; width: 100%; justify-content: center; text-align: center; padding: 0 4px; }
  .results-bar-right .results-fav-btn { height: 38px; width: auto; flex: 0 0 38px; }
  .results-bar-right .results-fav-btn .heart-icon { width: 18px; height: 18px; }
  .filter-dropdown-panel .dd-item { padding: 10px 12px; font-size: 13px; gap: 12px; }
  .filter-dropdown-panel .dd-item input[type="checkbox"] { width: 18px; height: 18px; }
  .results-count { display: none; }
  .search-wrap {
    flex: 1;
  }
  #searchInput { padding-right: 32px; }
  /* Collapse action buttons to icon-only squares */
  .wilde-picks-btn,
  .dice-btn {
    width: 38px;
    padding: 0;
    gap: 0;
    font-size: 0;
    letter-spacing: 0;
  }
  .wilde-picks-btn svg,
  .dice-btn svg {
    width: 16px;
    height: 16px;
  }
  .ex-name { font-size: 19px; }
  .ex-card.expanded .ex-name { font-size: 18px; }
}

/* ── DESKTOP SIDE PANEL ────────────────────────────────────────────────────── */
:root { --panel-w: 480px; }
#exSidePanel { display: none; }
@media (min-width: 601px) {
  #exSidePanel { display: block; }
  /* When panel is open, list shrinks and panel slides in from right */
  body.panel-open #listContainer {
    margin-right: var(--panel-w);
    transition: margin-right 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    border-radius: 0 16px 16px 0;
    overflow: hidden;
  }
  body.panel-open header {
    padding-right: var(--panel-w);
    transition: padding-right 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    border-radius: 0 16px 0 0;
  }
  body.panel-open #backToTop {
    right: calc(var(--panel-w) + 16px);
  }
  /* Collapse icon-text buttons to icon-only when side panel compresses the header */
  body.panel-open .wilde-picks-btn,
  body.panel-open .dice-btn {
    width: 38px;
    padding: 0;
    gap: 0;
    font-size: 0;
    letter-spacing: 0;
  }
  body.panel-open .wilde-picks-btn svg {
    width: 16px;
    height: 16px;
  }
  header {
    transition: padding-right 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  }
  #listContainer {
    transition: margin-right 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .ex-side-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: var(--panel-w);
    z-index: 200;
    background: linear-gradient(180deg, #252527 0%, #1e1e20 100%);
    border-left: 1px solid rgba(255,255,255,0.10);
    box-shadow: -8px 0 40px rgba(0,0,0,0.6), -2px 0 12px rgba(0,0,0,0.4), inset 1px 0 0 rgba(255,255,255,0.04);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden;
  }
  .ex-side-panel--open {
    transform: translateX(0);
  }

  /* Drag-to-resize handle */
  .ex-side-panel__resize {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 6px;
    cursor: col-resize;
    z-index: 10;
    background: transparent;
    transition: background 0.15s;
  }
  .ex-side-panel__resize:hover,
  .ex-side-panel__resize.dragging {
    background: rgba(212,212,200,0.18);
  }

  .ex-side-panel__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding-top: 0;
  }

  .ex-side-panel__close {
    position: absolute;
    top: 14px; right: 14px;
    width: 28px; height: 28px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 6px;
    color: var(--muted2);
    font-size: 13px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    line-height: 1;
    padding: 0;
  }
  .ex-side-panel__close:hover {
    color: var(--text);
    border-color: rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.1);
  }

  .ex-side-panel__title {
    flex-shrink: 0;
    padding: 18px 50px 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    background: rgba(0,0,0,0.15);
  }
  .ex-side-panel__title .ex-side-panel__name {
    font-size: 19px; font-weight: 700;
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.02em; line-height: 1.2;
    color: var(--text);
  }
  .ex-side-panel__title .ex-name-paren { font-weight: 500; opacity: 0.58; }
  .ex-side-panel__title-tags {
    display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap;
  }

  .ex-side-panel__content {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
  }

  /* Reuse the drawer interior sections inside the side panel */
  #exSidePanelContent .ex-drawer-hero { background: rgba(0,0,0,0.2); }
  #exSidePanelContent .ex-drawer-video .ex-thumb-wrap { box-shadow: 0 4px 20px rgba(0,0,0,0.6); border-radius: 10px; }

  /* Panel grid layout — same as drawer desktop layout */
  #exSidePanelContent #exDrawerPanels {
    display: block;
  }
  #exSidePanelContent .ex-drawer-video {
    border-bottom: 1px solid var(--border);
    border-right: none;
    padding: 14px 20px;
    display: block;
  }
  #exSidePanelContent .ex-drawer-chips {
    flex-direction: row;
    grid-column: unset;
    border-bottom: 1px solid var(--border);
    padding: 14px 20px;
  }
  #exSidePanelContent .ex-drawer-chip { flex: 1; }
  #exSidePanelContent .ex-drawer-diagrams {
    display: flex;
    padding: 16px 20px 24px;
    border-bottom: none;
  }
  #exSidePanelContent .ex-drawer-diagrams .dual-diagram-inner { max-width: 240px; }
}

/* ── MOBILITY SUB-SECTION ──────────────────────────────────────────────────── */
.mobility-divider {
  border-top: 1px solid rgba(255,255,255,0.08);
  margin: 4px 0;
}

.mobility-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
  border-radius: 4px;
  user-select: none;
}

.mobility-toggle:hover {
  color: var(--text);
}

.mobility-toggle.has-selection {
  color: var(--accent);
}

.mobility-arrow {
  font-size: 9px;
  transition: transform 0.15s;
  display: inline-block;
}

.mobility-toggle.open .mobility-arrow {
  transform: rotate(90deg);
}

.mobility-items {
  display: none;
}

.mobility-toggle.open + .mobility-items {
  display: block;
}

/* ── WORKOUT QUEUE: DESKTOP "+" BUTTON ───────────────────────────────────── */
.queue-btn {
  background: none; border: 1px solid var(--border2); border-radius: 8px;
  cursor: pointer; width: 32px; height: 32px;
  display: none; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all 0.15s; color: var(--muted2);
  font-size: 18px; line-height: 1; font-weight: 300;
}
@media (max-width: 600px) {
  .queue-btn { display: none !important; }
}
@media (min-width: 601px) {
  .ex-card:hover .queue-btn { display: flex; }
  .ex-card.in-queue .queue-btn { display: flex; color: var(--accent); border-color: var(--accent); }
}
.queue-btn:hover { color: var(--accent); border-color: var(--accent); }
.queue-btn.in-queue { color: var(--accent); border-color: var(--accent); }

/* ── DRAWER WORKOUT BUTTON (MOBILE) ──────────────────────────────────────── */
.ex-drawer-queue-wrap {
  padding: 16px 20px 8px;
  display: flex; gap: 10px; align-items: stretch;
}
.ex-drawer-queue-btn {
  flex: 1; padding: 14px;
  background: none; border: 2px solid var(--accent);
  border-radius: 12px; color: var(--accent); font-size: 15px;
  font-weight: 700; cursor: pointer; transition: all 0.18s;
  letter-spacing: 0.02em;
}
.ex-drawer-queue-btn:hover { background: rgba(232,255,71,0.08); }
.ex-drawer-queue-btn:active { opacity: 0.7; }
.ex-drawer-queue-btn.in-queue {
  background: rgba(232,255,71,0.12);
  border-color: var(--accent); color: var(--accent);
}
.ex-drawer-share-btn {
  flex-shrink: 0; width: 50px;
  background: none; border: 1.5px solid var(--border2);
  border-radius: 12px; color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.18s;
}
.ex-drawer-share-btn:hover { border-color: var(--text); color: var(--text); }
.ex-drawer-share-btn:active { opacity: 0.7; }

/* ── WORKOUT BOTTOM BAR ──────────────────────────────────────────────────── */
.workout-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 390;
  background: var(--surface);
  border-top: 1px solid rgba(232,255,71,0.25);
  display: flex; align-items: center; gap: 0;
  transform: translateY(0); transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
  box-shadow: 0 -4px 32px rgba(0,0,0,0.5);
}
.workout-bar--hidden { transform: translateY(110%); pointer-events: none; }
.workout-bar__clear {
  width: 52px; height: 58px; background: none; border: none;
  border-right: 1px solid var(--border); color: var(--muted);
  font-size: 16px; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.15s;
}
.workout-bar__clear:hover { color: #f87171; }
.workout-bar__info {
  flex: 1; min-width: 0; padding: 0 16px;
  font-size: 13px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 6px;
}
#workoutBarCount { font-size: 22px; font-weight: 800; color: var(--accent); font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.04em; }
.bar-exercises-label { flex-shrink: 0; }
.bar-paren-open, .bar-paren-close { display: none; color: var(--muted); flex-shrink: 0; font-size: 0.75rem; }
.bar-btn-short { display: none; }
.bar-btn-full { display: inline; }
#workoutBarMuscles {
  flex: 1;
  min-width: 0;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-divider {
  color: var(--muted);
  margin-right: 4px;
}
.bar-dot,
.bar-ellipsis {
  color: var(--muted);
}
.workout-bar__view {
  height: 58px; padding: 0 20px;
  background: var(--accent); color: #0a0a0a;
  border: none; font-size: 13px; font-weight: 800;
  cursor: pointer; flex-shrink: 0;
  letter-spacing: 0.04em; text-transform: uppercase;
  transition: opacity 0.15s;
}
.workout-bar__view:hover { opacity: 0.88; }

/* Lift bottom-positioned elements when workout bar is active */
body.workout-bar-active #backToTop { bottom: 74px; }
body.workout-bar-active .toast { bottom: 80px; }

/* On desktop, keep workout bar confined to the list area (not over the side panel) */
@media (min-width: 601px) {
  body.panel-open .workout-bar { right: var(--panel-w); }
}

@media (max-width: 600px) {
  .bar-exercises-label { display: none; }
  .bar-paren-open, .bar-paren-close { display: inline; }
  .bar-btn-full { display: none; }
  .bar-btn-short { display: inline; }
  .workout-bar__view { padding: 0 14px; }
  #workoutBarMuscles { font-size: 0.72rem; }
  #workoutBarMuscles .bar-divider { display: none; }
}

/* ── REVIEW DRAWER (mobile bottom sheet) ─────────────────────────────────── */
.review-drawer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 800;
  height: 92vh;
  background: var(--surface);
  border-top: 1px solid var(--border2);
  border-radius: 20px 20px 0 0;
  display: flex; flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
  will-change: transform;
}
.review-drawer--closed { transform: translateY(100%); pointer-events: none; }
.review-drawer--open   { transform: translateY(0); }
.review-drawer__backdrop {
  display: none; position: fixed; inset: 0; z-index: 799;
  background: rgba(0,0,0,0.55);
}
.review-drawer__backdrop.active { display: block; }
.review-drawer__handle-area {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 16px 12px; flex-shrink: 0;
  cursor: grab; border-bottom: 1px solid var(--border);
}
.review-drawer__knob {
  width: 36px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.2); margin-bottom: 10px;
}
.review-drawer__header-title {
  font-size: 18px; font-weight: 800; color: var(--text);
  letter-spacing: -0.02em;
}
.review-drawer__content {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}

/* ── REVIEW MODAL (desktop) ──────────────────────────────────────────────── */
.review-modal-box { max-width: 560px; max-height: 80vh; overflow-y: auto; }

/* ── REVIEW SHEET CONTENT (shared mobile/desktop) ────────────────────────── */
.review-name-input {
  width: 100%; background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 10px; padding: 12px 14px; color: var(--text);
  font-size: 16px; font-weight: 700; outline: none;
  transition: border-color 0.15s; font-family: 'Inter', sans-serif;
}
.review-name-input:focus { border-color: var(--accent); }
.review-name-input::placeholder { color: var(--muted); font-weight: 400; }
.review-list { display: flex; flex-direction: column; gap: 6px; list-style: none; }
.review-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px;
  cursor: default; user-select: none;
  transition: background 0.15s, border-color 0.15s;
}
.review-item.drag-over { border-color: var(--accent); background: rgba(232,255,71,0.05); }
.review-item.dragging  { opacity: 0.4; }
.review-item__handle {
  color: var(--muted); font-size: 16px; cursor: grab;
  flex-shrink: 0; line-height: 1; padding: 2px 0;
  touch-action: none;
}
.review-item__bar {
  width: 3px; height: 36px; border-radius: 3px; flex-shrink: 0;
}
.review-item__name {
  flex: 1; font-size: 14px; font-weight: 700; color: var(--text);
  min-width: 0;
  font-family: 'Inter', sans-serif;
}
.review-item__muscle {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted2); flex-shrink: 0;
}
.review-item__remove {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 14px; padding: 4px; flex-shrink: 0; border-radius: 4px;
  transition: color 0.15s;
}
.review-item__remove:hover { color: #f87171; }
.review-actions {
  display: flex; gap: 8px; margin-top: 4px; flex-shrink: 0;
}
.review-save-btn {
  flex: 1; background: var(--accent); color: #0a0a0a;
  border: none; border-radius: 10px; padding: 13px;
  font-size: 14px; font-weight: 800; cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.04em;
  transition: opacity 0.15s;
}
.review-save-btn:hover { opacity: 0.88; }
.review-save-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.review-cancel-btn {
  background: var(--surface2); color: var(--muted2);
  border: 1px solid var(--border2); border-radius: 10px;
  padding: 13px 18px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: color 0.15s;
}
.review-cancel-btn:hover { color: var(--text); }

/* ── HEART PANEL ─────────────────────────────────────────────────────────── */
.heart-panel {
  position: fixed; inset: 0; z-index: 700;
  pointer-events: none;
}
.heart-panel--open { pointer-events: auto; }
.heart-panel__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0);
  transition: background 0.3s;
}
.heart-panel--open .heart-panel__backdrop {
  background: rgba(0,0,0,0.55);
}
.heart-panel__sheet {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border2);
  border-radius: 20px 20px 0 0;
  display: flex; flex-direction: column;
  max-height: 88vh;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.heart-panel--open .heart-panel__sheet {
  transform: translateY(0);
}
@media (min-width: 601px) {
  .heart-panel__sheet {
    left: auto; right: 0; bottom: 0; top: 0; max-height: 100vh;
    width: 360px; border-radius: 0; border-left: 1px solid var(--border2);
    border-top: none; transform: translateX(100%);
  }
  .heart-panel--open .heart-panel__sheet { transform: translateX(0); }
}
.heart-panel__header {
  display: flex; align-items: center;
  padding: 14px 16px 0; flex-shrink: 0; gap: 8px;
}
.heart-panel__tabs {
  display: flex; gap: 2px; flex: 1;
  background: var(--bg); border-radius: 8px; padding: 3px;
}
.heart-panel__tab {
  flex: 1; background: none; border: none; border-radius: 6px;
  padding: 7px 12px; font-size: 12px; font-weight: 700;
  color: var(--muted2); cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.05em;
  transition: all 0.15s;
}
.heart-panel__tab.active {
  background: var(--surface2); color: var(--text);
}
.heart-panel__close {
  background: none; border: none; color: var(--muted2); cursor: pointer;
  font-size: 16px; padding: 6px; border-radius: 6px;
  transition: color 0.15s; flex-shrink: 0;
}
.heart-panel__close:hover { color: var(--text); }
.heart-panel__body {
  flex: 1; overflow-y: auto; padding: 12px 16px 24px;
}
.heart-panel__empty {
  text-align: center; padding: 48px 16px;
  color: var(--muted2); font-size: 13px;
}
.heart-panel__fav-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0 12px; margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.heart-panel__fav-toggle-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted2);
}
.heart-panel__fav-toggle-btn {
  background: var(--bg); border: 1px solid var(--border2);
  border-radius: 6px; padding: 4px 10px;
  font-size: 11px; font-weight: 700; cursor: pointer;
  color: var(--muted2); transition: all 0.15s;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.heart-panel__fav-toggle-btn.active {
  color: var(--heart); border-color: var(--heart);
  background: rgba(255,77,109,0.08);
}
.heart-fav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.heart-fav-item:last-child { border-bottom: none; }
.heart-fav-item__bar {
  width: 3px; height: 32px; border-radius: 3px; flex-shrink: 0;
}
.heart-fav-item__info { flex: 1; min-width: 0; }
.heart-fav-item__name {
  font-size: 13px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.heart-fav-item__muscle {
  font-size: 10px; color: var(--muted2); margin-top: 1px;
}
/* Saved workout cards */
.saved-workout-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 8px;
  cursor: pointer; transition: border-color 0.15s;
  display: flex; align-items: flex-start; gap: 10px;
}
.saved-workout-card:hover { border-color: var(--accent); }
.saved-workout-card__info { flex: 1; min-width: 0; }
.saved-workout-card__name {
  font-size: 14px; font-weight: 800; color: var(--text);
  font-family: 'Inter', sans-serif; margin-bottom: 3px;
}
.saved-workout-card__meta {
  font-size: 10px; color: var(--muted2); text-transform: uppercase;
  letter-spacing: 0.04em;
}
.saved-workout-card__del {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 14px; padding: 2px 4px; border-radius: 4px;
  transition: color 0.15s; flex-shrink: 0;
}
.saved-workout-card__del:hover { color: #f87171; }
/* Saved workout readonly view */
.saved-workout-view-back {
  background: none; border: none; color: var(--accent);
  font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 0 0 12px; display: flex; align-items: center; gap: 4px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.saved-workout-view-title {
  font-size: 18px; font-weight: 800; color: var(--text);
  margin-bottom: 4px; font-family: 'Inter', sans-serif;
}
.saved-workout-view-meta {
  font-size: 11px; color: var(--muted2); margin-bottom: 14px;
}
.saved-workout-view-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.saved-workout-view-item:last-child { border-bottom: none; }
.saved-workout-view-item__bar {
  width: 3px; height: 32px; border-radius: 3px; flex-shrink: 0;
}
.saved-workout-view-item__name {
  font-size: 13px; font-weight: 700; color: var(--text);
}
.saved-workout-view-item__muscle { font-size: 10px; color: var(--muted2); }

/* MUSCLE DIAGRAMS */
.muscle-diagram-wrap { padding: 0 14px 12px; display: flex; justify-content: center; }
.muscle-diagram-inner { display: flex; gap: 16px; justify-content: center; padding: 12px 0; }
.diagram-view { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.diagram-label { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 10px; font-weight: 500; color: var(--muted2); text-transform: uppercase; letter-spacing: 0.1em; }
.diagram-svg-box { width: 80px; height: 160px; opacity: 0.4; transition: opacity 0.25s; }
.diagram-svg-box.has-highlight { opacity: 1; }
.dual-diagram-inner--images { display: flex; gap: 16px; justify-content: center; align-items: flex-end; height: 200px; }
.diagram-img-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; flex: 1; max-width: 120px; }
.diagram-img { height: 100%; width: auto; object-fit: contain; display: block; }
.diagram-img--primary { filter: none; }
.diagram-img--secondary { filter: brightness(0.45) saturate(0.6); }
.diagram-img-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; text-align: center; }
.muscle-diagram-stack { display: flex; justify-content: center; }
.muscle-diagram-img { width: 100%; height: auto; object-fit: contain; display: block; }

/* ── AUTH MODAL ──────────────────────────────────────────────────────────── */
.auth-modal-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  align-items: flex-end;
  justify-content: center;
}
.auth-modal-overlay.open { display: flex; }

.auth-modal-sheet {
  width: 100%; max-width: 480px;
  background: linear-gradient(180deg, #252527 0%, #1a1a1c 100%);
  border-top: 1px solid rgba(255,255,255,0.14);
  border-left: 1px solid rgba(255,255,255,0.07);
  border-right: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px 20px 0 0;
  padding: 14px 24px 40px;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
  display: flex; flex-direction: column; gap: 0;
}
.auth-modal-overlay.open .auth-modal-sheet { transform: translateY(0); }

.auth-modal-knob {
  width: 40px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.2);
  margin: 0 auto 20px;
  flex-shrink: 0;
}

.auth-modal-body { display: flex; flex-direction: column; gap: 14px; }

.auth-modal-icon {
  color: var(--heart);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 2px;
}

.auth-modal-headline {
  font-size: 22px; font-weight: 800;
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.02em; color: var(--text);
  text-align: center; line-height: 1.2;
}

.auth-modal-sub {
  font-size: 13px; color: var(--muted2);
  text-align: center; line-height: 1.5; margin-top: -4px;
}

.auth-btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px;
  background: #fff; color: #1a1a1a;
  border: none; border-radius: 10px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: opacity 0.15s;
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.01em;
}
.auth-btn-google:hover { opacity: 0.92; }
.auth-btn-google:active { opacity: 0.80; }

.auth-divider {
  display: flex; align-items: center; gap: 10px;
  color: var(--muted); font-size: 11px;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

.auth-email-form {
  display: flex; flex-direction: column; gap: 8px;
}

.auth-input {
  width: 100%; padding: 12px 14px;
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 10px; color: var(--text); font-size: 14px;
  outline: none; transition: border-color 0.15s;
  font-family: 'Inter', sans-serif;
}
.auth-input:focus { border-color: var(--accent); }
.auth-input::placeholder { color: var(--muted); }

.auth-btn-email {
  width: 100%; padding: 13px;
  background: var(--surface2); color: var(--text);
  border: 1.5px solid var(--border2); border-radius: 10px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-family: 'Inter', sans-serif;
}
.auth-btn-email:hover { border-color: var(--accent); color: var(--accent); }

.auth-error {
  font-size: 12px; color: #f87171; padding: 8px 12px;
  background: rgba(248,113,113,0.08); border-radius: 8px;
  border: 1px solid rgba(248,113,113,0.2);
}

.auth-signin-row {
  text-align: center; font-size: 13px; color: var(--muted2); margin-top: 2px;
}
.auth-signin-link {
  background: none; border: none; color: var(--accent);
  font-size: 13px; font-weight: 700; cursor: pointer; padding: 0;
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: rgba(232,255,71,0.4);
  transition: text-decoration-color 0.15s;
}
.auth-signin-link:hover { text-decoration-color: var(--accent); }

/* Desktop: center card instead of bottom sheet */
@media (min-width: 601px) {
  .auth-modal-overlay {
    align-items: center;
  }
  .auth-modal-sheet {
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.12);
    max-width: 420px;
    transform: translateY(20px) scale(0.97);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), opacity 0.2s;
  }
  .auth-modal-overlay.open .auth-modal-sheet {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  .auth-modal-knob { display: none; }
}

/* ── ACCOUNT BUTTON ────────────────────────────────────────────────────────── */
.account-btn { color: var(--muted2); }
.account-btn:hover { color: var(--text); border-color: var(--muted2); }
.account-btn.signed-in { border-color: rgba(232,255,71,0.4); color: var(--accent); }

/* ── ACCOUNT MENU (dropdown) ─────────────────────────────────────────────── */
.account-menu {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 6px;
  min-width: 180px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  z-index: 800;
  display: flex; flex-direction: column; gap: 2px;
}
.account-menu-email {
  font-size: 11px; color: var(--muted2); padding: 6px 8px 8px;
  border-bottom: 1px solid var(--border); margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-menu-btn {
  background: none; border: none; color: var(--text);
  font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 8px 10px; border-radius: 6px;
  text-align: left; transition: background 0.1s;
}
.account-menu-btn:hover { background: var(--surface2); }