:root{
  --bg:#000000;
  --panel:#0b0b0b;
  --panel2:#0e0e0e;
  --border:#1f1f1f;
  --text:#ffffff;
  --muted:#a6a6a6;
  --accent:#ffffff;
  --accent-hover:#e6e6e6;
  --accent-soft: rgba(255, 255, 255, 0.35);
  --accent-strong:#ffffff;
  --accent-contrast:#0b0f14;
  --success:#22c55e;
  --warning:#f59e0b;
  --danger:#ef4444;
  --brand-shine-strong: rgba(255,255,255,0.9);
  --brand-shine-clear: rgba(255,255,255,0);

  --good: var(--success);
  --ok: var(--warning);
  --bad: var(--danger);
  --track:#141414;
  --inner:#2a2a2a;
  --radius:16px;
  --r: var(--radius);
  --panel-blur: 0px;
  --focus-ring-color: rgba(255, 255, 255, 0.35);
  --panelBlurEnabled: 0;
  --control-height: 38px;
  --control-radius: 12px;
  --control-padding-x: 12px;
  --control-bg: var(--panel2);
  --control-bg-hover: var(--panel);
  --control-border: var(--border);
  --control-border-strong: #353535;
  --control-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
  --focus-ring: 0 0 0 2px var(--focus-ring-color);
  --control-transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
  --panel-shadow: 0 10px 22px rgba(0,0,0,0.35);
  --surface-hover: var(--panel);
}

*{ box-sizing:border-box; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  padding:28px;
  transition: background-color .2s ease, color .2s ease;
}
.wrap{ max-width:1100px; margin:0 auto; }

.authBar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}
.topBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
  padding:0 6px;
}
.brandLink{
  color:inherit;
  text-decoration:none;
  display:inline-block;
}

.brandText{
  font-size:16px;
  font-weight:600;
  letter-spacing:.5px;
  display:inline-block;
  color:var(--text);
  position:relative;
  line-height:1.1;
}
.brandText::after{
  content: attr(data-text);
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(
    90deg,
    var(--brand-shine-clear) 0%,
    var(--brand-shine-strong) 50%,
    var(--brand-shine-clear) 100%
  );
  background-size:220% 100%;
  background-position:220% 0;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation: shine 2.8s linear infinite;
  opacity:.9;
}
.float{
  animation: float 3.8s ease-in-out infinite;
}
.authUser{
  display:flex;
  align-items:center;
  position:relative;
  cursor:pointer;
}
.avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid var(--border);
  background:#0b0b0b;
  display:block;
  object-fit:cover;
}
.authActions{
  display:flex;
  gap:8px;
}
.authMenu{
  position:absolute;
  top:40px;
  right:0;
  background:#0f0f0f;
  border:1px solid var(--border);
  border-radius:12px;
  padding:6px;
  display:none;
  min-width:120px;
  z-index:5;
}
.authUser.open .authMenu{ display:block; }
.authMenuItem{
  width:100%;
  border:1px solid transparent;
  background:#111;
  color:#fff;
  padding:8px 10px;
  border-radius:10px;
  text-align:left;
  cursor:pointer;
  font-size:12px;
  min-height:0;
  display:block;
}
.authMenuItem:hover{
  background:#161616;
  border-color: transparent;
}

header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  margin-bottom:18px;
}
h1{
  margin:0;
  font-size:16px;
  font-weight:700;
  letter-spacing:.2px;
}
.hint{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
  max-width:520px;
  text-align:right;
}

.controls{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:14px;
  margin-bottom:18px;
  backdrop-filter: blur(var(--panel-blur));
  -webkit-backdrop-filter: blur(var(--panel-blur));
}
.controls,
.settingsSection,
.card,
.soundCard,
.selectMenu,
.toast,
.modalContent,
.authMenu,
.adminCard,
.statCard,
.authCard{
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.row{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
  align-items:end;
}
label{
  display:block;
  font-size:11px;
  color:var(--muted);
  margin:0 0 6px;
}
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]){
  width:100%;
  min-height:var(--control-height);
  height:var(--control-height);
  background:var(--control-bg);
  border:1px solid var(--control-border);
  color:var(--text);
  padding:0 var(--control-padding-x);
  border-radius:var(--control-radius);
  outline:none;
  transition: var(--control-transition);
}
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover{
  border-color:var(--control-border-strong);
  background:var(--control-bg-hover);
}
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus{
  border-color:var(--accent);
  box-shadow: var(--focus-ring);
}
input::placeholder{ color:var(--muted); opacity:0.7; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"]{
  -moz-appearance: textfield;
  appearance: textfield;
}
select{
  width:100%;
  min-height:var(--control-height);
  height:var(--control-height);
  background:var(--control-bg);
  border:1px solid var(--control-border);
  color:var(--text);
  padding:0 var(--control-padding-x);
  padding-right:44px;
  border-radius:var(--control-radius);
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  box-shadow: var(--control-shadow);
  transition: var(--control-transition);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1.5 L5 4.5 L9 1.5' fill='none' stroke='%23cfcfcf' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-position: right 16px center;
  background-size: 10px 6px;
  background-repeat:no-repeat;
  background-origin: padding-box;
}
select:hover{
  border-color:var(--control-border-strong);
  background:var(--control-bg-hover);
}
select:focus{
  border-color:var(--accent);
  box-shadow: var(--focus-ring);
}
select::-ms-expand{ display:none; }

.selectWrap{
  position:relative;
}
.selectTrigger{
  width:100%;
  min-height:var(--control-height);
  height:var(--control-height);
  background:var(--control-bg);
  border:1px solid var(--control-border);
  color:var(--text);
  padding:0 var(--control-padding-x);
  padding-right:44px;
  border-radius:var(--control-radius);
  text-align:left;
  cursor:pointer;
  box-shadow: var(--control-shadow);
  transition: var(--control-transition);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1.5 L5 4.5 L9 1.5' fill='none' stroke='%23cfcfcf' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-position: right 16px center;
  background-size: 10px 6px;
  background-repeat:no-repeat;
}
.selectTrigger:hover{
  border-color:var(--control-border-strong);
  background:var(--control-bg-hover);
}
.selectTrigger:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow: var(--focus-ring);
}
.selectMenu{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:6px;
  display:none;
  z-index:20;
  box-shadow: var(--panel-shadow);
}
.selectWrap.open .selectMenu{
  display:block;
}
.selectOption{
  width:100%;
  background:transparent;
  border:1px solid transparent;
  color:var(--text);
  padding:6px 10px;
  border-radius:10px;
  text-align:left;
  cursor:pointer;
  font-size:12px;
  min-height:32px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  transition: var(--control-transition);
}
.selectOption:hover{
  background:var(--panel2);
}
.selectOption[aria-selected="true"]{
  background:var(--panel2);
  border-color:var(--border);
}
option{
  background:var(--panel);
  color:var(--text);
}
button{
  border-radius:var(--control-radius);
  min-height:var(--control-height);
  padding:0 14px;
  background:var(--control-bg);
  border:1px solid var(--control-border);
  color:var(--text);
  cursor:pointer;
  font-weight:650;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition: var(--control-transition);
}
button:hover{
  background:var(--control-bg-hover);
  border-color:var(--control-border-strong);
}
button:disabled{ opacity:.55; cursor:not-allowed; }
button:focus-visible{
  outline:none;
  border-color:var(--accent);
  box-shadow: var(--focus-ring);
}

.status{
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
  min-height:16px;
}
.scanLabel{ font-weight:600; }
.scanDots{
  display:inline-block;
  width:3ch;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-align:left;
}
.scanText{ white-space:nowrap; }
.error{
  margin-top:10px;
  background:#0b0000;
  border:1px solid #2a0f0f;
  color:#ffd1d1;
  padding:10px 12px;
  border-radius:12px;
  display:none;
  font-size:12px;
  white-space: pre-wrap;
}

/* Scanner list should NOT push the page down as it updates */
#scanResults{
  margin-top:10px;
  display:grid;
  gap:8px;
  max-height:320px;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-right:6px; /* avoids layout shift when scrollbar appears */
  scrollbar-width:none; /* firefox */
}
#scanResults::-webkit-scrollbar{ width:0; height:0; }
.scanItem{
  border:1px solid var(--border);
  background:var(--panel2);
  border-radius:12px;
  padding:10px 12px;
  display:grid;
  grid-template-columns: 52px 1fr auto;
  gap:10px;
  align-items:center;
  cursor:pointer;
}
.scanItem:hover{ background:var(--panel); }
.scanThumb{ width:52px; height:52px; border-radius:10px; overflow:hidden; border:1px solid var(--border); background:#050505; }
.scanThumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.scanTitle{ font-size:12px; font-weight:700; line-height:1.2; display:flex; gap:8px; align-items:center; }
.scanTitle a{ color:inherit; text-decoration:none; }
.scanTitle a:hover{ text-decoration:none; }
.scanSub{ font-size:11px; color:var(--muted); margin-top:4px; }
.scanScore{ font-size:12px; font-weight:800; }
.newBadge{
  font-size:10px;
  font-weight:700;
  letter-spacing:.4px;
  padding:2px 6px;
  border-radius:999px;
  background:#b7fbd1;
  color:#0d3b22;
  border:1px solid #8debb5;
}
.oldBadge{
  font-size:10px;
  font-weight:700;
  letter-spacing:.4px;
  padding:2px 6px;
  border-radius:999px;
  background:#d7dcf7;
  color:#2a355f;
  border:1px solid #b8c1ee;
}
.targetBadge{
  font-size:10px;
  font-weight:700;
  letter-spacing:.4px;
  padding:2px 6px;
  border-radius:999px;
  background:#ff9d2f;
  color:#3a1c00;
  border:1px solid #ff7a00;
}
.siteBadge{
  font-size:10px;
  font-weight:700;
  letter-spacing:.4px;
  padding:2px 6px;
  border-radius:999px;
  color:#fff;
  border:1px solid transparent;
}
.site-vinted{
  background:#007782;
  border-color:#00636b;
}
.site-mercari{
  background:#ff0211;
  border-color:#d9000e;
}
.soldBadge{
  font-size:10px;
  font-weight:700;
  letter-spacing:.4px;
  padding:2px 6px;
  border-radius:999px;
  background:#ffe7a3;
  color:#6b5200;
  border:1px solid #ffd66e;
}

.switch{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:var(--text);
  cursor:pointer;
  user-select:none;
  position:relative;
}
.switch input{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
}
.switchTrack{
  width:38px;
  height:20px;
  border-radius:999px;
  background:var(--control-bg);
  border:1px solid var(--control-border);
  position:relative;
  transition: var(--control-transition);
  box-shadow: var(--control-shadow);
  flex:0 0 auto;
}
.switchTrack::after{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--text);
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.switch input:checked + .switchTrack{
  background:var(--accent);
  border-color:var(--accent);
}
.switch input:checked + .switchTrack::after{
  transform: translateX(18px);
  background:var(--accent-contrast);
}
.switch input:focus-visible + .switchTrack{
  box-shadow: var(--focus-ring);
}
.switchLabel{
  color:var(--muted);
}
.settingsHeader{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  margin-bottom:14px;
}
.settingsHeader h1{
  margin:0;
  font-size:16px;
  font-weight:700;
  letter-spacing:.2px;
}
.settingsSection{
  border:1px solid var(--border);
  background:var(--panel2);
  border-radius:14px;
  padding:12px;
  backdrop-filter: blur(var(--panel-blur));
  -webkit-backdrop-filter: blur(var(--panel-blur));
}
.targetSection{
  background:var(--panel);
}
.settingsSection + .settingsSection{
  margin-top:16px;
}

.themeSection{
  margin-top:12px;
}
.sectionHeader{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:10px;
}
.sectionTitle{
  font-size:12px;
  font-weight:700;
  color:var(--text);
}
.sectionHint{
  font-size:11px;
  color:var(--muted);
  margin-top:4px;
}
.themeAdvanced{
  margin-top:10px;
}
.collapseToggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:var(--control-height);
  height:var(--control-height);
  background:var(--control-bg);
  border:1px solid var(--control-border);
  color:var(--text);
  padding:0 var(--control-padding-x);
  border-radius:var(--control-radius);
  font-size:12px;
  cursor:pointer;
  box-shadow: var(--control-shadow);
  transition: var(--control-transition);
}
.collapseToggle:hover{
  border-color:var(--control-border-strong);
  background:var(--control-bg-hover);
}
.collapseToggle:focus-visible{
  outline:none;
  border-color:var(--accent);
  box-shadow: var(--focus-ring);
}
.collapseIcon{
  width:10px;
  height:6px;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1.5 L5 4.5 L9 1.5' fill='none' stroke='%23cfcfcf' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-size:10px 6px;
  background-position:center;
  transform: rotate(0deg);
  transition: transform .16s ease;
}
.collapseToggle[aria-expanded="true"] .collapseIcon{
  transform: rotate(180deg);
}
.collapsePanel{
  max-height:0;
  opacity:0;
  overflow:hidden;
  transform: translateY(-4px);
  transition: max-height .2s ease, opacity .2s ease, transform .2s ease;
}
.collapsePanel.open{
  max-height:800px;
  opacity:1;
  transform: translateY(0);
  margin-top:10px;
}
.colorRows{
  display:grid;
  gap:8px;
}
.colorRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  padding:8px 10px;
  border-radius:10px;
  transition: var(--control-transition);
}
.colorRow:hover{
  background:var(--panel2);
  border-color:var(--control-border-strong);
}
.colorLabel{
  font-size:11px;
  font-weight:600;
}
.colorValue{
  display:flex;
  align-items:center;
  gap:8px;
}
.colorSwatch{
  width:24px;
  height:24px;
  min-height:24px;
  min-width:24px;
  padding:0;
  border-radius:8px;
  background:var(--swatch, #888);
  border:1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.colorHex{
  min-height:24px;
  padding:0 10px;
  font-size:11px;
  font-weight:650;
  border-radius:8px;
  background:var(--panel2);
  border:1px solid var(--border);
  color:var(--muted);
  letter-spacing:.4px;
}
.colorHex:hover{
  color:var(--text);
  border-color:var(--control-border-strong);
}
.colorPickerPanel{
  position:fixed;
  width:min(320px, 92vw);
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(var(--panel-blur));
  -webkit-backdrop-filter: blur(var(--panel-blur));
  opacity:0;
  transform: translateY(-6px);
  pointer-events:none;
  transition: opacity .15s ease, transform .15s ease;
  z-index:90;
}
.colorPickerPanel.open{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}
.colorPickerHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.colorPickerTitle{
  font-size:12px;
  font-weight:700;
}
.colorPickerSv{
  position:relative;
  width:100%;
  height:160px;
  border-radius:12px;
  border:1px solid var(--border);
  background:
    linear-gradient(to top, #000, rgba(0,0,0,0)),
    linear-gradient(to right, #fff, rgba(255,255,255,0)),
    hsl(var(--picker-hue, 180), 100%, 50%);
  cursor:crosshair;
}
.colorPickerSvHandle{
  position:absolute;
  width:14px;
  height:14px;
  border-radius:50%;
  border:2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
  transform: translate(-7px, -7px);
}
.colorPickerHue{
  position:relative;
  height:12px;
  border-radius:999px;
  margin-top:10px;
  border:1px solid var(--border);
  background: linear-gradient(
    to right,
    #ff0000 0%,
    #ffff00 17%,
    #00ff00 33%,
    #00ffff 50%,
    #0000ff 67%,
    #ff00ff 83%,
    #ff0000 100%
  );
  cursor:pointer;
}
.colorPickerHueHandle{
  position:absolute;
  top:50%;
  width:12px;
  height:12px;
  border-radius:50%;
  border:2px solid #fff;
  background: hsl(var(--picker-hue, 180), 100%, 50%);
  transform: translate(-6px, -50%);
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
}
.colorPickerInputs{
  display:grid;
  gap:8px;
  margin-top:10px;
}
.colorPickerInput{
  display:grid;
  gap:6px;
}
.colorPickerInput label{
  margin:0;
}
.colorPickerRgbInputs{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:6px;
}
.colorPickerActions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:10px;
}
.themeSwatchGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:8px;
}
.swatchField{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
}
.swatchField:hover{
  background:var(--panel2);
}
.swatchDot{
  width:12px;
  height:12px;
  border-radius:50%;
  background: var(--swatch, #888);
  border:1px solid rgba(255,255,255,0.15);
  flex:0 0 auto;
}
.swatchLabel{
  font-size:11px;
  font-weight:600;
}
.swatchInput{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.themeControls{
  margin-top:10px;
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
}
.themeControl{
  min-width:220px;
  display:grid;
  gap:6px;
}
.themeControls .switch{
  padding-bottom:2px;
}
.btnPrimary{
  background:var(--accent);
  color:var(--accent-contrast);
  border-color:var(--accent);
}
.btnPrimary:hover{
  background:var(--accent-hover);
  border-color:var(--accent-hover);
}
.btnGhost{
  background:transparent;
  color:var(--muted);
  border:1px solid var(--border);
  padding:0 12px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
}
.btnGhost:hover{
  color:var(--text);
  background:var(--panel2);
  border-color:var(--control-border-strong);
}
.themeActions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}
.themeSectionHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.themeSectionHeader .hint{
  margin:0;
  text-align:right;
  max-width:none;
}
.themeList{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:8px;
}
.themeOption{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  text-align:left;
  min-height:40px;
}
.themeOption:hover{
  background:var(--panel2);
}
.themeOption.selected{
  border-color:var(--accent);
  box-shadow: 0 0 0 2px var(--focus-ring-color);
}
.themeSwatch{
  width:14px;
  height:14px;
  border-radius:50%;
  background: var(--swatch, #888);
  border:1px solid rgba(255,255,255,0.12);
  flex:0 0 auto;
}
.themeName{
  font-size:12px;
  font-weight:600;
}
.themeBuilder{
  margin-top:12px;
  display:none;
}
.themeBuilder.active{
  display:block;
}
.themeGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
}
.themeField label{
  display:block;
  font-size:11px;
  color:var(--muted);
  margin:0 0 6px;
}
.themeField input[type="color"]{
  width:100%;
  height:36px;
  padding:4px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--panel2);
}
.themeSliderRow{
  display:flex;
  align-items:center;
  gap:10px;
}
.themeSliderValue{
  font-size:11px;
  color:var(--muted);
  min-width:36px;
  text-align:right;
}
.themeActions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}
.soundCards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:12px;
}
.soundCard{
  border:1px solid var(--border);
  background:var(--panel2);
  border-radius:12px;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  cursor:pointer;
  backdrop-filter: blur(var(--panel-blur));
  -webkit-backdrop-filter: blur(var(--panel-blur));
}
.soundCard.dragging{
  border-color:var(--accent);
  background:var(--surface-hover);
}
.soundTitle{
  font-size:12px;
  font-weight:700;
  color:var(--text);
}
.soundMeta{
  font-size:11px;
  color:var(--muted);
}
.soundActions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.soundFileInput{
  display:none;
}
.soundBtn{
  min-height:30px;
  padding:0 10px;
  font-size:11px;
  font-weight:650;
  border-radius:10px;
  background:var(--panel2);
  border:1px solid var(--border);
  color:var(--text);
  cursor:pointer;
}
.soundBtn:hover{ background:var(--panel); }
.soundBtn:disabled{
  opacity:.5;
  cursor:not-allowed;
}
.soundBtn.danger{
  background:#120606;
  border-color:#2a0f0f;
  color:#ffd1d1;
}
.soundBtn.danger:hover{ background:#190707; }
.targetControls{
  display:grid;
  gap:10px;
  margin-top:10px;
}
.targetRow{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 180px;
  gap:10px;
  align-items:center;
}
.targetRow button{
  width:100%;
  height:var(--control-height);
}
.targetControls .settingsStatus{
  justify-self:end;
  white-space:nowrap;
}
.targetTableWrap{
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--panel);
  overflow:hidden;
}
.targetTableWrap .adminTable{
  width:100%;
  border-collapse:collapse;
}
.targetTableWrap .adminTable thead{
  display:table;
  width:100%;
  table-layout:fixed;
  background:#0b0b0b;
}
.targetTableWrap .adminTable tbody{
  display:block;
  max-height:320px;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter: stable;
  scrollbar-color:#2a2a2a #0b0b0b;
}
.targetTableWrap .adminTable tbody tr{
  display:table;
  width:100%;
  table-layout:fixed;
}
.targetTableWrap .adminTable th:nth-child(1),
.targetTableWrap .adminTable td:nth-child(1){
  width:60%;
}
.targetTableWrap .adminTable th:nth-child(2),
.targetTableWrap .adminTable td:nth-child(2){
  width:20%;
}
.targetTableWrap .adminTable th:nth-child(3),
.targetTableWrap .adminTable td:nth-child(3){
  width:20%;
}
.targetTableWrap .adminTable th{
  position:static;
}
.targetTableWrap .adminTable td{
  max-width:none;
  white-space:normal;
  overflow:visible;
}
.targetTableWrap .adminTable tbody::-webkit-scrollbar{
  width:10px;
}
.targetTableWrap .adminTable tbody::-webkit-scrollbar-track{
  background:#0b0b0b;
  border-radius:999px;
}
.targetTableWrap .adminTable tbody::-webkit-scrollbar-thumb{
  background:#2a2a2a;
  border-radius:999px;
  border:2px solid #0b0b0b;
}
.priorityBtn{
  min-height:28px;
  padding:0 10px;
  font-size:11px;
  font-weight:700;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--text);
  cursor:pointer;
}
.priorityBtn.priority-high{
  background:#3a2300;
  border-color:#8a5600;
  color:#ffd9a1;
}
.priorityBtn.priority-medium{
  background:#1b1f10;
  border-color:#4e5a2a;
  color:#e4f2c0;
}
.priorityBtn.priority-low{
  background:#161616;
  border-color:#2f2f2f;
  color:#cfcfcf;
}
.iconBtn.danger{
  background:#120606;
  border-color:#2a0f0f;
  color:#ffd1d1;
}
.iconBtn.danger:hover{
  background:#190707;
}
.settingsRow{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.volumeRow{
  display:flex;
  align-items:center;
  gap:10px;
}
.volumeRow input[type="range"]{
  width:180px;
}
.settingsSection input[type="range"]{
  appearance:none;
  -webkit-appearance:none;
  width:180px;
  height:18px;
  background:transparent;
}
.settingsSection input[type="range"]::-webkit-slider-runnable-track{
  height:6px;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    var(--accent) 0%,
    var(--accent) var(--value, 100%),
    var(--inner) var(--value, 100%),
    var(--inner) 100%
  );
  border:1px solid var(--inner);
}
.settingsSection input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--text);
  border:1px solid var(--border);
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
  cursor:pointer;
  margin-top:-6px;
}
.settingsSection input[type="range"]:focus-visible::-webkit-slider-thumb{
  box-shadow: 0 0 0 2px var(--focus-ring-color), 0 2px 6px rgba(0,0,0,0.45);
}
.settingsSection input[type="range"]::-moz-range-track{
  height:6px;
  border-radius:999px;
  background:#2a2a2a;
  border:1px solid var(--inner);
}
.settingsSection input[type="range"]::-moz-range-progress{
  height:6px;
  border-radius:999px;
  background:var(--accent);
}
.settingsSection input[type="range"]::-moz-range-thumb{
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--text);
  border:1px solid var(--border);
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
  cursor:pointer;
}
.settingsSection input[type="range"]:focus-visible::-moz-range-thumb{
  box-shadow: 0 0 0 2px var(--focus-ring-color), 0 2px 6px rgba(0,0,0,0.45);
}
.settingsStatus{
  font-size:12px;
  color:var(--muted);
}
.scanActions{
  display:flex;
  gap:10px;
  align-items:flex-end;
  align-self:end;
  padding-bottom:2px;
}

.tagList{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:var(--text);
  background:var(--panel2);
  border:1px solid var(--border);
  padding:4px 8px;
  border-radius:999px;
  cursor:pointer;
  transition: var(--control-transition);
}
.tag:hover{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--text);
}
.tag .x{
  color:var(--muted);
  font-weight:700;
}
.tag:hover .x{
  color:var(--text);
}

.card{
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:var(--r);
  overflow:hidden;
  display:grid;
  grid-template-columns: 340px 1fr 300px;
  gap:18px;
  padding:18px;
}

.img{
  border-radius:14px;
  overflow:hidden;
  background:#050505;
  border:1px solid var(--border);
  height:340px;
}
.img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform 0.15s ease;
}
.img.zoomable:hover img{
  transform: scale(1.8);
  cursor: zoom-in;
}

.thumbs{
  display:flex;
  gap:8px;
  margin-top:10px;
  overflow:hidden;
  padding-bottom:0;
}
.thumbs button{
  width:56px; height:56px;
  padding:0;
  border-radius:12px;
  overflow:hidden;
  background:#050505;
  border:1px solid var(--border);
  flex:0 0 auto;
}
.thumbs img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  opacity:.9;
}

.title{
  margin:0;
  font-size:20px;
  font-weight:750;
  letter-spacing:.2px;
  line-height:1.2;
}
.link{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
}
.link a{ color:#cfcfff; text-decoration:none; }
.link a:hover{ text-decoration:underline; }

.priceLine{
  margin-top:14px;
  display:flex;
  gap:14px;
  align-items:baseline;
  flex-wrap:wrap;
}
.price{
  font-size:34px;
  font-weight:800;
  letter-spacing:.2px;
}
.gbpPrice{
  font-size:14px;
  font-weight:650;
  color:var(--muted);
  margin-left:8px;
}
.sub{
  font-size:12px;
  color:var(--muted);
}

.meta{
  margin-top:14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.metaItem{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 10px;
  background:var(--panel2);
  font-size:12px;
  color:var(--muted);
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap:10px;
}
.metaItem b{ color:#fff; font-weight:650; }

.desc{
  margin-top:14px;
  color:#d8d8d8;
  font-size:13px;
  line-height:1.45;
  max-height:120px;
  overflow:hidden;
  padding-right:6px;
  scrollbar-width:thin;
  scrollbar-color:#bfbfbf #1a1a1a;
}
.desc:hover{
  overflow:auto;
}
.desc::-webkit-scrollbar{
  width:10px;
}
.desc::-webkit-scrollbar-track{
  background:#1a1a1a;
  border-radius:999px;
}
.desc::-webkit-scrollbar-thumb{
  background:#bfbfbf;
  border-radius:999px;
  border:2px solid #1a1a1a;
}
.desc::-webkit-scrollbar-thumb:hover{
  background:#d6d6d6;
}

.title{
  cursor:pointer;
}

.right{
  border-left:1px solid var(--border);
  padding-left:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.scoreTop{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:center;
}
.starBtn{
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--text);
  padding:0 12px;
  border-radius:var(--control-radius);
  font-size:12px;
  cursor:pointer;
  margin-top:10px;
  min-height:32px;
  transition: var(--control-transition);
}
.starBtn:hover{
  border-color:var(--accent);
  background:var(--accent-soft);
}
.starBtn.active{
  background:var(--accent);
  color:var(--accent-contrast);
  border-color:var(--accent);
}

.score-ring{
  width:132px;
  height:132px;
  position:relative;
  display:grid;
  place-items:center;
}
.score-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.score-ring .center{
  position:absolute;
  inset:14px;
  background:var(--inner);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
}
.score-ring .number{
  font-size:36px;
  font-weight:800;
  line-height:1;
}
.score-ring .label{
  font-size:11px;
  color:var(--muted);
}

.profitBox{
  flex:1;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--panel2);
  padding:12px;
}
.profitBox .top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:baseline;
  margin-bottom:8px;
}
.profitBox .top b{ font-size:13px; }
.profitBox .top span{ color:var(--muted); font-size:12px; }
.profitBox .line{
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:var(--muted);
  font-size:12px;
  padding:3px 0;
}
.profitBox .line b{ color:#fff; font-weight:650; }

.breakdown{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.breakdown li{
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--panel2);
  padding:10px 12px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:13px;
}
.breakdown .k{ color:#fff; }
.breakdown .v{ color:var(--muted); }
.breakdown .v b{ color:#fff; }

.savedWrap{
  margin-top:14px;
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:12px;
}
.savedHeader{
  font-size:12px;
  color:var(--muted);
  margin-bottom:8px;
}
.savedList{
  display:grid;
  gap:8px;
}
.savedItem{
  border:1px solid var(--border);
  background:var(--panel2);
  border-radius:12px;
  padding:8px 10px;
  display:grid;
  grid-template-columns: 40px 1fr auto;
  gap:8px;
  align-items:center;
  cursor:pointer;
}
.savedItem:hover{ background:var(--surface-hover); }
.savedThumb{
  width:40px;
  height:40px;
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--border);
  background:#050505;
}
.savedThumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.savedTitle{ font-size:12px; font-weight:700; line-height:1.2; }
.savedSub{ font-size:11px; color:var(--muted); margin-top:3px; }
.savedScore{ font-size:12px; font-weight:800; }

@media (max-width: 980px){
  header{ flex-direction:column; align-items:flex-start; }
  .hint{ text-align:left; max-width:none; }
  .row{ grid-template-columns: 1fr 1fr; }
  .row .span2{ grid-column:span 2; }
  .card{ grid-template-columns: 1fr; }
  .right{ border-left:none; padding-left:0; border-top:1px solid var(--border); padding-top:18px; }
  .img{ height:320px; }
  .targetRow{ grid-template-columns: 1fr; }
  .soundCards{ grid-template-columns: 1fr; }
  .themeGrid{ grid-template-columns: 1fr; }
  .themeList{ grid-template-columns: 1fr; }
  .themeSwatchGrid{ grid-template-columns: 1fr 1fr; }
}

.toast{
  position:fixed;
  right:20px;
  bottom:20px;
  background:#111;
  border:1px solid var(--border);
  padding:10px 12px;
  border-radius:12px;
  font-size:12px;
  color:#fff;
  opacity:0;
  transform: translateY(6px);
  transition: all .2s ease;
  pointer-events:none;
  z-index:80;
}
.toast.show{
  opacity:1;
  transform: translateY(0);
}
.toast.success{ border-color: var(--success); }
.toast.warning{ border-color: var(--warning); }
.toast.error{ border-color: var(--danger); }
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:90;
}
.modal.open{ display:flex; }
.modalContent{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  width:min(520px, 92vw);
}
.modalHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}
.modalHeader h3{
  margin:0;
  font-size:14px;
}
.modalBody{
  font-size:12px;
  color:#d8d8d8;
  line-height:1.5;
}
.modalSection{
  margin-bottom:10px;
}
.modalLabel{
  font-size:11px;
  color:var(--muted);
}

/* Admin */
.adminHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
}
.adminHeader h1{
  font-size:18px;
  margin:0;
}
.adminLink{
  color:#fff;
  text-decoration:none;
  font-size:12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#0b0b0b;
}
.adminLink:hover{ text-decoration:underline; }
.adminLink::before{
  content:"<";
  display:inline-block;
  font-size:12px;
  line-height:1;
}
.adminCard{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:14px;
  margin-bottom:14px;
}
.adminCard h2{
  margin:0 0 10px;
  font-size:14px;
}
.adminStats{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:10px;
  margin-bottom:14px;
}
.statCard{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
}
.statLabel{
  font-size:11px;
  color:var(--muted);
}
.statValue{
  font-size:20px;
  font-weight:700;
  margin-top:6px;
}
.statMeta{
  font-size:11px;
  color:var(--muted);
  margin-top:4px;
}
.adminGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:10px;
  margin-bottom:10px;
}
.adminActions{
  display:flex;
  align-items:flex-end;
  gap:10px;
}
.adminRow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.adminRow input{
  width:90px;
}
.adminStatus{
  font-size:12px;
  color:var(--muted);
}
.adminFilters{
  display:grid;
  grid-template-columns: 1fr 180px 180px;
  gap:10px;
  margin:10px 0;
}
.adminTableWrap{
  overflow:auto;
}
.adminTableWrap.targetTableWrap{
  overflow:hidden;
}
.adminTable{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}
.adminTable th,
.adminTable td{
  padding:10px 8px;
  border-bottom:1px solid var(--border);
  text-align:left;
  vertical-align:top;
}
.adminTable td{
  max-width:220px;
  overflow:auto;
  white-space:nowrap;
}
.adminTable td::-webkit-scrollbar{
  height:6px;
}
.adminTable td::-webkit-scrollbar-thumb{
  background:#2a2a2a;
  border-radius:999px;
}
.adminTable th{
  color:var(--muted);
  font-weight:600;
  background:#0b0b0b;
  position:sticky;
  top:0;
  z-index:1;
}
.adminTable th:nth-child(even),
.adminTable td:nth-child(even){
  background: transparent;
}
.adminTable tbody tr:nth-child(odd){
  background:#0a0a0a;
}
.adminTable tbody tr:hover{
  background:#101010;
}
.adminTable code{
  background:#111;
  padding:2px 6px;
  border-radius:8px;
  border:1px solid var(--border);
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:700;
  border:1px solid transparent;
}
.badge-active{
  background:#0f3f2a;
  border-color:#165a3e;
  color:#b8f7d3;
}
.badge-used{
  background:#0e2f4f;
  border-color:#14456e;
  color:#b7d9ff;
}
.badge-revoked{
  background:#3a0e0e;
  border-color:#5b1515;
  color:#ffc8c8;
}
.badge-expired{
  background:#3b330f;
  border-color:#5f4f14;
  color:#ffe7a3;
}
.badge-admin{
  background:#3a1630;
  border-color:#5c214b;
  color:#ffc4e6;
}
.badge-owner{
  background:#3a2a0f;
  border-color:#6b4e14;
  color:#ffe7a3;
}
.badge-user{
  background:#1f1f1f;
  border-color:#3a3a3a;
  color:#cfcfcf;
}
.badge-disabled{
  background:#2a2a2a;
  border-color:#3a3a3a;
  color:#cfcfcf;
}
.adminActionsBtn{
  display:inline-flex;
  gap:6px;
}
.adminActionsBtn .iconBtn{
  min-height:28px;
  padding:4px 8px;
  font-size:11px;
  line-height:1.1;
}
.iconBtn{
  border:1px solid var(--border);
  background:#111;
  color:#fff;
  padding:6px 8px;
  border-radius:10px;
  font-size:11px;
  cursor:pointer;
}
.iconBtn:hover{ background:#161616; }
.emptyState{
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
}