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

:root {
    --bg: #fff; --text: #111; --text-secondary: #666; --text-muted: #999;
    --border: #ddd; --border-light: #eee; --bg-input: #fafafa; --bg-hover: #f5f5f5;
    --link: #0066cc; --heart: #ef4444; --rank2: #3b82f6; --rank3: #22c55e;
    --success-bg: #f0fdf4; --success-border: #d1fae5;
}
.dark {
    --bg: #111; --text: #e0e0e0; --text-secondary: #aaa; --text-muted: #666;
    --border: #333; --border-light: #222; --bg-input: #1a1a1a; --bg-hover: #222;
    --link: #5b9bd5; --success-bg: #0a2010; --success-border: #1a3a20;
}

body { font-family: Georgia, serif; color: var(--text); background: var(--bg); line-height: 1.6; }

header { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--border); }
header h1 { font-size: 16px; font-weight: normal; }
header span { font-size: 12px; color: var(--text-muted); }
.header-right { display: flex; align-items: center; gap: 16px; }
.dark-toggle { cursor: pointer; font-size: 14px; }

.container { max-width: 960px; margin: 0 auto; padding: 24px; }
section { margin-bottom: 32px; }
section h2 { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; font-family: sans-serif; }
.sub { font-size: 12px; color: var(--text-muted); margin-bottom: 16px; }
hr { border: none; border-top: 1px solid var(--border-light); margin: 24px 0; }
a { color: var(--link); text-decoration: underline; }

.my-picks-layout { display: flex; gap: 32px; }
.my-picks-form { flex: 1; }
.my-picks-ranking { flex: 1; }

.pick-row { display: flex; gap: 8px; margin-bottom: 10px; align-items: center; }
.pick-row .num { font-size: 13px; color: var(--text-muted); width: 20px; }
.pick-row input {
    flex: 1; padding: 7px 8px; font-size: 12px;
    border: 1px solid var(--border); font-family: monospace;
    background: var(--bg-input); color: var(--text);
}
.pick-row input.empty { border-style: dashed; }
.pick-row .status { font-size: 12px; width: 20px; text-align: center; }
.pick-row .status.ok { color: var(--rank3); }
.pick-row .status.empty { color: var(--border); }
.pick-row .delete-btn {
    font-size: 11px; color: var(--text-muted); cursor: pointer;
    background: none; border: none; padding: 4px;
}
.pick-row .delete-btn:hover { color: var(--heart); }

.ranking-table { width: 100%; font-size: 13px; border-collapse: collapse; }
.ranking-table th { text-align: left; font-weight: normal; color: var(--text-muted); font-size: 11px; padding: 4px 8px; border-bottom: 1px solid var(--border-light); }
.ranking-table td { padding: 6px 8px; border-bottom: 1px solid var(--border-light); }
.ranking-table .score { font-weight: 600; text-align: right; }

.member-block { margin-bottom: 28px; }
.member-block h3 { font-size: 14px; font-weight: 600; margin-bottom: 4px; font-family: sans-serif; }
.member-block .meta { font-size: 11px; color: var(--text-muted); margin-bottom: 12px; }
.voted-badge { font-size: 11px; color: var(--rank3); font-weight: normal; }
.pending-badge { font-size: 11px; color: #d97706; font-weight: normal; }

.track { border-bottom: 1px solid var(--border-light); padding: 10px 0; }
.track:last-child { border-bottom: none; }
.track-title { font-size: 14px; color: var(--text); font-weight: 600; }
.track-detail { font-size: 12px; color: var(--text-secondary); }
.track-links { font-size: 11px; margin-top: 4px; }
.track-links a { margin-right: 10px; }

.yt-embed { margin: 8px 0; }
.yt-embed iframe { width: 100%; max-width: 480px; height: 270px; border: none; }

.vote-btns { display: flex; gap: 6px; margin-top: 8px; }
.vote-btn {
    padding: 6px 14px; border: 1px solid var(--border); font-size: 13px;
    cursor: pointer; border-radius: 4px; background: var(--bg);
    color: var(--text-secondary); font-family: sans-serif;
}
.vote-btn:hover { background: var(--bg-hover); }
.vote-btn.active-heart { border: 2px solid var(--heart); background: #fef2f2; color: var(--heart); }
.vote-btn.active-2 { border: 2px solid var(--rank2); background: #eff6ff; color: var(--rank2); font-weight: 600; }
.vote-btn.active-3 { border: 2px solid var(--rank3); background: var(--success-bg); color: var(--rank3); font-weight: 600; }

.confirm-link { font-size: 13px; margin-top: 12px; display: inline-block; }

.preview { background: var(--success-bg); border: 1px solid var(--success-border); padding: 8px 12px; margin-top: 8px; font-size: 12px; border-radius: 4px; }
.preview .label { font-size: 11px; color: var(--rank3); font-weight: 500; }

.admin-table { width: 100%; font-size: 13px; border-collapse: collapse; }
.admin-table th { text-align: left; font-weight: 500; padding: 6px 8px; border-bottom: 1px solid var(--border); font-family: sans-serif; font-size: 12px; }
.admin-table td { padding: 6px 8px; border-bottom: 1px solid var(--border-light); }

.admin-actions { display: flex; gap: 12px; margin: 16px 0; }
.admin-btn { font-size: 13px; color: var(--link); text-decoration: underline; cursor: pointer; background: none; border: none; font-family: Georgia, serif; }

@media (max-width: 640px) {
    .my-picks-layout { flex-direction: column; gap: 20px; }
    header { flex-direction: column; gap: 12px; align-items: flex-start; }
    .pick-row { flex-wrap: wrap; }
    .pick-row input { min-width: 0; }
}