/* === verse theme (default) — McLaren papaya orange + carbon black === */
:root, [data-theme="verse"] {
  --bg: #0c0c0c; --bg2: #111111; --bg3: #1a1a1a; --bg4: #242424;
  --border: rgba(255,255,255,0.06);
  --t1: #f0f0f0; --t2: #999; --t3: #555;
  --ac: #ff8000; --ac2: #ff9933; --ac-rgb: 255,128,0;
  --r: 4px; --font: 'Inter', system-ui, sans-serif;
}
[data-theme="spotify"] {
  --bg: #121212; --bg2: #181818; --bg3: #212121; --bg4: #2a2a2a;
  --border: rgba(255,255,255,0.07);
  --t1: #fff; --t2: #b3b3b3; --t3: #535353;
  --ac: #1db954; --ac2: #1ed760; --ac-rgb: 29,185,84;
}
[data-theme="apple"] {
  --bg: #000; --bg2: #1c1c1e; --bg3: #2c2c2e; --bg4: #3a3a3c;
  --border: rgba(255,255,255,0.1);
  --t1: #fff; --t2: #98989f; --t3: #636366;
  --ac: #fc3c44; --ac2: #ff453a; --ac-rgb: 252,60,68;
  --r: 10px;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--font); background:var(--bg); color:var(--t1); min-height:100vh; overflow:hidden; -webkit-font-smoothing:antialiased; }

.header {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; height:48px;
  background:var(--bg); border-bottom:none;
}
.logo-wrap { display:flex; align-items:center; gap:10px; user-select:none; }
.logo-icon { width:26px; height:26px; flex-shrink:0; }
.logo {
  font-family:var(--font);
  font-size:0.92rem; font-weight:600; color:var(--t1);
  letter-spacing:-0.2px; line-height:1;
}

.theme-switch { display:flex; gap:1px; background:var(--bg3); border-radius:6px; padding:2px; }
.theme-btn {
  padding:4px 12px; border:none; border-radius:5px; background:transparent;
  color:var(--t3); font:600 0.65rem var(--font); cursor:pointer; transition:all 0.15s;
}
.theme-btn.active { background:var(--ac); color:#fff; }

.layout { display:grid; grid-template-columns:320px 1fr; height:calc(100vh - 48px); }

.panel { border-right:1px solid var(--border); overflow-y:auto; height:calc(100vh - 48px); background:var(--bg2); }
.panel::-webkit-scrollbar { width:3px; }
.panel::-webkit-scrollbar-thumb { background:var(--bg4); border-radius:2px; }
.section { padding:12px 16px; border-bottom:1px solid var(--border); }
.section:last-child { border-bottom:none; }

.section-head {
  font-size:0.58rem; font-weight:700; color:var(--t2); text-transform:uppercase;
  letter-spacing:1px; margin-bottom:8px; padding-left:8px;
  border-left:2px solid var(--ac);
}

label {
  display:flex; align-items:center; gap:4px; font-size:0.62rem; font-weight:600;
  color:var(--t3); margin:8px 0 3px; text-transform:uppercase; letter-spacing:0.5px;
}
.section > label:first-child { margin-top:0; }
.val { margin-left:auto; color:var(--ac); font-variant-numeric:tabular-nums; font-size:0.58rem; }
.help {
  width:13px; height:13px; border-radius:50%; border:1px solid rgba(var(--ac-rgb),0.25); color:var(--t3);
  font-size:0.48rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center;
  cursor:help; position:relative; flex-shrink:0; font-style:normal; transition:all 0.15s;
}
.help:hover { border-color:var(--ac); color:var(--ac); }
.help:hover::after {
  content:attr(data-tip); position:absolute; bottom:calc(100% + 5px); left:0;
  background:var(--bg4); color:var(--t1); padding:5px 9px; border-radius:5px; font-size:0.65rem;
  font-weight:400; z-index:20; letter-spacing:0; text-transform:none;
  box-shadow:0 4px 12px rgba(0,0,0,0.5); border:1px solid var(--border); pointer-events:none;
  max-width:240px; white-space:normal;
}

input[type="text"], textarea, select {
  width:100%; background:var(--bg3); border:1px solid var(--border);
  color:var(--t1); border-radius:var(--r); padding:7px 10px;
  font:0.78rem var(--font); outline:none; transition:all 0.15s;
}
input[type="text"]:focus, textarea:focus, select:focus { border-color:var(--ac); box-shadow:0 0 0 2px rgba(var(--ac-rgb),0.08); }
textarea { resize:vertical; min-height:64px; line-height:1.5; }
.lyrics-ac-wrap { position:relative; }
.lyrics-ac-wrap textarea { background:transparent; position:relative; z-index:1; }
.lyrics-ghost { position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none; overflow:hidden;
  background:var(--bg3); border:1px solid transparent; border-radius:var(--r); padding:7px 10px;
  font:0.78rem var(--font); line-height:1.5; white-space:pre-wrap; word-wrap:break-word; color:transparent; }
.lyrics-ghost span { color:var(--t3); opacity:0.4; }
select { cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%239a9aaa' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; padding-right:24px; }
input[type="range"] { width:100%; height:3px; appearance:none; background:var(--bg4); border-radius:2px; outline:none; cursor:pointer; margin:4px 0; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--ac); border:2px solid var(--bg2); cursor:pointer; }
input[type="range"]::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:var(--ac); border:2px solid var(--bg2); }

.row { display:flex; gap:6px; align-items:flex-end; }
.field { flex:1; }

.btn-accent { padding:7px 14px; border:none; border-radius:6px; background:var(--ac); color:#fff; font:700 0.72rem var(--font); cursor:pointer; white-space:nowrap; transition:all 0.15s; display:inline-flex; align-items:center; justify-content:center; gap:4px; min-width:56px; min-height:30px; }
.btn-accent:hover { background:var(--ac2); }
.btn-sm { padding:6px 12px; border:1px solid var(--border); border-radius:var(--r); background:var(--bg3); color:var(--t3); font:600 0.62rem var(--font); cursor:pointer; transition:all 0.15s; white-space:nowrap; }
.btn-sm:hover { border-color:var(--t3); color:var(--t2); }
.btn-sm.active { background:rgba(var(--ac-rgb),0.1); border-color:var(--ac); color:var(--ac); }
.btn-download { width:100%; padding:10px; margin-top:8px; border:none; border-radius:500px; background:var(--ac); color:#fff; font:700 0.8rem var(--font); cursor:pointer; transition:all 0.15s; display:flex; align-items:center; justify-content:center; gap:6px; }
.btn-download:hover { background:var(--ac2); }
.btn-group { display:flex; gap:1px; background:var(--bg3); border-radius:var(--r); padding:2px; flex:1; border:1px solid var(--border); }
.btn-toggle { flex:1; padding:6px 0; border:none; border-radius:calc(var(--r) - 2px); background:transparent; color:var(--t3); font:600 0.62rem var(--font); cursor:pointer; text-align:center; transition:all 0.12s; }
.btn-toggle:hover { color:var(--t2); }
.btn-toggle.active { background:var(--ac); color:#fff; }
.btn-loader { display:inline-block; width:12px; height:12px; border:2px solid rgba(255,255,255,0.2); border-top-color:#fff; border-radius:50%; animation:spin 0.5s linear infinite; vertical-align:middle; }
@keyframes spin { to { transform:rotate(360deg); } }
.hidden { display:none !important; }

.palette { display:grid; grid-template-columns:repeat(8,1fr); gap:3px; margin-top:4px; }
.swatch { aspect-ratio:1; border-radius:4px; border:1.5px solid rgba(255,255,255,0.08); cursor:pointer; transition:all 0.12s; }
.swatch:hover { transform:scale(1.15); border-color:rgba(255,255,255,0.3); }
.swatch.active { border-color:#fff; border-width:2px; box-shadow:0 0 0 1px var(--ac); }

.template-grid { display:flex; gap:5px; }
.template-thumb { flex:1; aspect-ratio:1; border-radius:4px; border:2px solid var(--border); cursor:pointer; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:4px; background:var(--bg3); transition:all 0.15s; }
.template-thumb:hover { border-color:var(--t3); }
.template-thumb.active { border-color:var(--ac); box-shadow:0 0 0 1px var(--ac); }
.template-thumb .thumb-preview { width:100%; flex:1; border-radius:2px; margin-bottom:2px; }
.template-thumb .thumb-label { font-size:0.42rem; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:0.2px; }
.template-thumb.active .thumb-label { color:var(--ac); }

.upload { display:flex; align-items:center; justify-content:center; gap:6px; padding:12px; border:1px dashed var(--border); border-radius:var(--r); color:var(--t3); font-size:0.68rem; text-align:center; cursor:pointer; transition:all 0.15s; margin-top:6px; text-transform:none; font-weight:400; }
.upload:hover { border-color:var(--ac); color:var(--ac); }
.upload input { display:none; }
.art-preview { display:flex; justify-content:center; margin-top:6px; position:relative; }
.art-preview img { width:72px; height:72px; object-fit:cover; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,0.4); }
.art-remove { position:absolute; top:-4px; right:calc(50% - 40px); width:18px; height:18px; border-radius:50%; border:none; background:rgba(var(--ac-rgb),0.8); color:#fff; font-size:11px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }

.suggest-wrap { position:relative; }
.suggest-list { position:absolute; top:100%; left:0; right:0; z-index:10; background:var(--bg3); border:1px solid var(--border); border-radius:var(--r); max-height:140px; overflow-y:auto; margin-top:2px; box-shadow:0 4px 16px rgba(0,0,0,0.4); }
.suggest-item { padding:6px 10px; font-size:0.72rem; color:var(--t2); cursor:pointer; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; transition:background 0.1s; }
.suggest-item:last-child { border-bottom:none; }
.suggest-item:hover { background:rgba(var(--ac-rgb),0.06); color:var(--t1); }
.suggest-item img { width:28px; height:28px; border-radius:3px; object-fit:cover; flex-shrink:0; }

.preview {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:calc(100vh - 48px); padding:20px; overflow:hidden; background:var(--bg2);
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,0.015) 1px, transparent 0);
  background-size:20px 20px;
}
.preview-frame { overflow:hidden; border-radius:4px; box-shadow:0 4px 24px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03); }
#card-canvas { transform-origin:top left; overflow:hidden; }
.preview-dim { margin-top:8px; font-size:0.58rem; color:var(--t3); font-weight:500; letter-spacing:1.5px; }

.toast { position:fixed; bottom:16px; left:50%; transform:translateX(-50%) translateY(10px); background:var(--bg4); color:var(--t1); padding:8px 18px; border-radius:500px; font-size:0.72rem; z-index:999; opacity:0; transition:all 0.15s; pointer-events:none; border:1px solid var(--border); }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

@media (max-width:768px) {
  body { overflow:auto; }
  .layout { grid-template-columns:1fr; height:auto; }
  .panel { border-right:none; border-bottom:1px solid var(--border); height:auto; order:2; }
  .preview { order:1; height:70vh; min-height:320px; padding:16px; }
  input[type="text"], textarea, select { font-size:16px; padding:10px; }
  .header { padding:0 12px; }
}
@media (max-width:400px) { .section { padding:10px 12px; } .row { flex-wrap:wrap; } }

@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.shake { animation:shake 0.3s ease; }
@media (prefers-reduced-motion:reduce) { * { animation-duration:0.01ms!important; transition-duration:0.01ms!important; } }