* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #0f0f1a;
  color: #e0e0e0;
  min-height: 100vh;
}

header {
  background: #1a1a2e;
  padding: 20px 32px;
  border-bottom: 1px solid #2a2a3e;
  display: flex;
  align-items: center;
  gap: 12px;
}
header h1 { font-size: 1.3rem; font-weight: 600; }
header .sub { color: #888; font-size: 0.85rem; }

.container { max-width: 860px; margin: 0 auto; padding: 32px 16px; }

.card {
  background: #1a1a2e;
  border-radius: 14px;
  padding: 28px;
  margin-bottom: 24px;
  border: 1px solid #2a2a3e;
}

h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: 16px; color: #ccc; }

.direction-picker { display: flex; gap: 12px; margin-bottom: 20px; }
.dir-btn {
  flex: 1; padding: 14px; border: 2px solid #2a2a3e; border-radius: 10px;
  background: #0f0f1a; color: #aaa; cursor: pointer; font-size: 0.95rem;
  text-align: center; transition: all 0.2s;
}
.dir-btn:hover { border-color: #4a4a6e; color: #fff; }
.dir-btn.active { border-color: #7c6fff; background: #1e1a3a; color: #fff; }
.dir-btn .emoji { font-size: 1.4rem; display: block; margin-bottom: 4px; }

textarea, input[type=text], input[type=file] {
  width: 100%; padding: 12px 14px; border-radius: 8px;
  border: 1px solid #2a2a3e; background: #0f0f1a;
  color: #e0e0e0; font-size: 0.95rem; font-family: inherit;
  resize: vertical;
}
textarea:focus, input[type=text]:focus { outline: none; border-color: #7c6fff; }

.input-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.tab-btn {
  padding: 6px 14px; border-radius: 6px; border: 1px solid #2a2a3e;
  background: #0f0f1a; color: #888; cursor: pointer; font-size: 0.85rem;
}
.tab-btn.active { background: #2a2a4e; color: #fff; border-color: #7c6fff; }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

label { display: block; font-size: 0.85rem; color: #888; margin-bottom: 6px; }

.btn {
  padding: 12px 28px; border-radius: 9px; border: none;
  font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.btn-primary { background: #7c6fff; color: white; }
.btn-primary:hover { background: #6a5de0; }
.btn-primary:disabled { background: #3a3a5e; color: #666; cursor: default; }
.btn-secondary { background: #2a2a4e; color: #ccc; }
.btn-secondary:hover { background: #3a3a5e; }
.btn-success { background: #1db954; color: white; }
.btn-success:hover { background: #17a047; }

.pill {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 0.78rem; font-weight: 600;
}
.pill-green { background: #1a3a2a; color: #4caf50; }
.pill-red { background: #3a1a1a; color: #f44336; }
.pill-yellow { background: #3a2a1a; color: #ff9800; }

.song-list { list-style: none; }
.song-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 8px; margin-bottom: 6px;
  background: #0f0f1a; border: 1px solid #1e1e30;
}
.song-item.matched { border-left: 3px solid #4caf50; }
.song-item.unmatched { border-left: 3px solid #f44336; }
.song-item.low-conf { border-left: 3px solid #ff9800; }
.song-info { flex: 1; }
.song-title { font-weight: 500; font-size: 0.95rem; }
.song-artist { font-size: 0.82rem; color: #888; }
.song-match { font-size: 0.82rem; color: #7c6fff; }

.results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.stat-box { background: #0f0f1a; border-radius: 10px; padding: 16px; text-align: center; }
.stat-num { font-size: 2rem; font-weight: 700; }
.stat-label { font-size: 0.82rem; color: #888; }

.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid #3a3a5e;
  border-top-color: #7c6fff; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.hidden { display: none; }

.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

.playlist-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: #7c6fff; text-decoration: none; font-weight: 500;
}
.playlist-link:hover { color: #a08fff; }

.name-input-row { display: flex; gap: 10px; align-items: flex-end; margin-top: 12px; }
.name-input-row input { flex: 1; }

.draft-toggle { display: flex; align-items: center; gap: 8px; margin-top: 14px; cursor: pointer; }
.draft-toggle input { width: auto; }