:root {
    --bg: #1a1a2e;
    --surface: #16213e;
    --accent: #0f3460;
    --highlight: #e94560;
    --text: #eaeaea;
    --muted: #a0a0a0;
    --light: #f0d9b5;
    --dark: #b58863;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }

/* Admin login */
.admin-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
.login-box {
    background: var(--surface);
    padding: 2rem;
    border-radius: 12px;
    width: 320px;
}
.login-box h1 { margin: 0 0 1.5rem; font-size: 1.5rem; }
.login-box input { width: 100%; padding: 0.75rem; margin-bottom: 0.75rem; border: 1px solid var(--accent); border-radius: 6px; background: var(--bg); color: var(--text); }
.login-box button { width: 100%; padding: 0.75rem; background: var(--highlight); border: none; color: white; font-weight: 600; border-radius: 6px; cursor: pointer; }
.login-box .error { color: var(--highlight); font-size: 0.9rem; margin-bottom: 0.5rem; }

/* Admin panel */
.admin-panel header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--accent);
}
.admin-panel header h1 { margin: 0; font-size: 1.25rem; }
.admin-panel header h1 a { color: inherit; text-decoration: none; }

.btn { padding: 0.5rem 1rem; border-radius: 6px; text-decoration: none; display: inline-block; cursor: pointer; border: none; font-size: 0.9rem; }
.btn-outline { background: transparent; color: var(--highlight); border: 1px solid var(--highlight); }
.btn-outline:hover { background: var(--highlight); color: white; }
.btn-danger { background: #c62828; color: white; }
.btn-sm { padding: 0.25rem 0.5rem; font-size: 0.8rem; }

.admin-content { padding: 1rem 1.5rem; max-width: 1600px; margin: 0 auto; }
.admin-nav { margin-bottom: 1rem; }
.admin-nav a { color: var(--muted); text-decoration: none; margin-right: 1rem; }
.admin-nav a.active { color: var(--highlight); }

.search-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.search-form input { padding: 0.5rem; border: 1px solid var(--accent); border-radius: 6px; background: var(--bg); color: var(--text); }
.search-form button { padding: 0.5rem 1rem; background: var(--accent); color: white; border: none; border-radius: 6px; cursor: pointer; }

.split-view { display: flex; gap: 1.5rem; min-height: 60vh; }
.puzzle-list { flex: 1; min-width: 320px; overflow-y: auto; max-height: 70vh; }
.puzzle-card {
    background: var(--surface);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--accent);
}
.puzzle-card.active { border-color: var(--highlight); box-shadow: 0 0 0 2px var(--highlight); }
.puzzle-card a { text-decoration: none; color: inherit; display: block; }
.puzzle-card .rating { color: var(--highlight); margin-left: 0.5rem; }
.puzzle-card .themes { display: block; font-size: 0.85rem; color: var(--muted); }
.puzzle-card code { font-size: 0.75rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.puzzle-card .actions { margin-top: 0.5rem; }
.puzzle-card .actions a { margin-right: 0.5rem; }

.puzzle-detail { flex: 0 0 420px; display: flex; flex-direction: column; align-items: flex-start; }
.board-container { margin-bottom: 1rem; }
.puzzle-info { width: 100%; }
.puzzle-info p { margin: 0.5rem 0; }
.puzzle-info .fen-full { font-size: 0.8rem; word-break: break-all; }
.pagination { margin-top: 1rem; display: flex; gap: 0.25rem; flex-wrap: wrap; }
.pagination a { padding: 0.5rem 0.75rem; background: var(--surface); color: var(--text); text-decoration: none; border-radius: 4px; }
.pagination a:hover:not(.disabled) { background: var(--accent); }
.pagination a.active { background: var(--highlight); }
.pagination a.disabled { opacity: 0.5; pointer-events: none; cursor: default; }
.pagination .pagination-info { margin-left: 0.5rem; align-self: center; font-size: 0.9rem; color: var(--muted); }

.puzzle-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.puzzle-form label { display: flex; flex-direction: column; gap: 0.25rem; }
.puzzle-form label input, .puzzle-form select { padding: 0.5rem; }
.puzzle-form button { grid-column: 1 / -1; padding: 0.75rem; background: var(--highlight); color: white; border: none; border-radius: 6px; cursor: pointer; width: fit-content; }
.preview-board { margin-top: 1rem; }
.empty { color: var(--muted); }

/* User app */
.user-app { min-height: 100vh; }
.user-app header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--accent);
}
.user-app .user-info { display: flex; align-items: center; gap: 1rem; }
.user-app .user-info span { color: var(--muted); }

.main-content { padding: 1rem; max-width: 1800px; margin: 0 auto; }

.user-search { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; align-items: center; }
.user-search input, .user-search select { padding: 0.5rem; border: 1px solid var(--accent); border-radius: 6px; background: var(--bg); color: var(--text); }
.user-search select[name="theme"] { min-width: 160px; }
.user-search input[name="rating_min"], .user-search input[name="rating_max"] { width: 90px; }
.user-search button { padding: 0.5rem 1rem; background: var(--accent); color: white; border: none; border-radius: 6px; cursor: pointer; }

.user-split { display: flex; gap: 1.5rem; min-height: 70vh; align-items: flex-start; }
.user-list { flex: 1; min-width: 380px; overflow-y: auto; max-height: calc(100vh - 120px); }
.user-board-panel { flex: 0 0 480px; position: sticky; top: 1rem; align-self: flex-start; }

.puzzle-item {
    background: var(--surface);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--accent);
    cursor: pointer;
    transition: border-color 0.2s;
}
.puzzle-item:hover { border-color: var(--highlight); }
.puzzle-item.selected { border-color: var(--highlight); box-shadow: 0 0 0 2px var(--highlight); }
.puzzle-item .meta { font-size: 0.85rem; color: var(--muted); margin-bottom: 0.25rem; }
.puzzle-item .meta .rating { color: var(--highlight); }
.puzzle-item pre { margin: 0.5rem 0; font-size: 0.8rem; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }
.puzzle-item .add-to-list { margin-top: 0.5rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.puzzle-item .add-to-list select { padding: 0.25rem; background: var(--bg); color: var(--text); border: 1px solid var(--accent); border-radius: 4px; }
.puzzle-item .add-to-list button { padding: 0.25rem 0.5rem; font-size: 0.85rem; background: var(--accent); color: white; border: none; border-radius: 4px; cursor: pointer; }

.board-wrapper { position: relative; display: inline-block; margin-bottom: 1rem; }
.board-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 0.75rem; }
.board-nav button { width: 40px; height: 40px; font-size: 1.25rem; background: var(--accent); color: white; border: none; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.board-nav button:hover:not(:disabled) { background: var(--highlight); }
.board-nav button:disabled { opacity: 0.4; cursor: not-allowed; }
.board-nav span { color: var(--muted); font-size: 0.9rem; min-width: 4ch; }
.board-wrapper .board-inner { position: relative; display: inline-block; }
.board-wrapper #arrowsSvg { position: absolute; top: 0; left: 0; }
.move-controls { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.move-controls button { padding: 0.35rem 0.75rem; background: var(--accent); color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9rem; }
.move-controls button:disabled { opacity: 0.5; cursor: not-allowed; }
.solution-box { background: var(--surface); padding: 0.75rem; border-radius: 8px; margin-top: 0.5rem; }
.solution-box strong { display: block; margin-bottom: 0.25rem; }
.solution-box code { font-size: 1rem; color: var(--highlight); }

.list-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 100; }
.list-modal .modal-inner { background: var(--surface); padding: 1.5rem; border-radius: 12px; min-width: 320px; }
.list-modal input { width: 100%; padding: 0.75rem; margin: 0.5rem 0; border: 1px solid var(--accent); border-radius: 6px; background: var(--bg); color: var(--text); }
.list-modal .modal-actions { display: flex; gap: 0.5rem; margin-top: 1rem; }
.error { color: var(--highlight); }
.success { color: #4caf50; }