/* ═══════════════════════════════════════════
   FC Live Race — Admin Panel Styles
   ═══════════════════════════════════════════ */

:root {
    /* Light Mode (Default) */
    --bg-primary: #f5f8fa;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-input: #f0f4f8;
    --text-primary: #1a2b3c;
    --text-secondary: #4a6372;
    --text-muted: #8b9ca7;
    --accent: #D01010;
    --accent-hover: #e82020;
    --accent-dim: rgba(208, 16, 16, 0.15);
    --border: #e1e8ed;
    --success: #22c55e;
    --warning: #f59e0b;
    --radius: 10px;
    --radius-sm: 6px;
    --font: 'Inter', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --transition: 0.2s ease;
}

[data-theme="dark"] {
    --bg-primary: #001f2b;
    --bg-secondary: #003649;
    --bg-card: #002837;
    --bg-input: #001a24;
    --text-primary: #ffffff;
    --text-secondary: #a3c2d1;
    --text-muted: #668b9c;
    --border: #004a63;
}

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

body {
    font-family: var(--font);
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* ─── VIEWS ─────────────────────────────── */

.view { display: none; min-height: 100vh; }
.view.active { display: flex; flex-direction: column; }

/* ─── LOGIN ─────────────────────────────── */

.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    background: radial-gradient(ellipse at center, #1a0505 0%, #0f0f0f 70%);
}

.login-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 48px 40px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    animation: fadeInScale 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.login-logo {
    text-align: center;
    margin-bottom: 36px;
}

.logo-img {
    max-width: 100%;
    height: auto;
    max-height: 80px;
    margin-bottom: 16px;
    filter: brightness(1.1);
    object-fit: contain;
}

.login-logo .subtitle {
    color: var(--text-secondary);
    font-size: 14px;
    margin-top: 4px;
}

/* ─── FORMS ─────────────────────────────── */

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 15px;
    transition: border-color var(--transition);
    outline: none;
}

.form-group input:focus,
.form-group select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.form-group input::placeholder {
    color: var(--text-muted);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.form-row.wide-left {
    grid-template-columns: 2fr 1fr;
}

.form-row.wide-right {
    grid-template-columns: 1fr 2fr;
}

.hint {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ─── BUTTONS ───────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
}

.btn-primary {
    background: var(--accent);
    color: white;
}

.btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(208, 16, 16, 0.4);
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.btn-ghost:hover {
    background: var(--bg-input);
    color: var(--text-primary);
}

.btn-full { width: 100%; justify-content: center; }
.btn-sm { padding: 6px 12px; font-size: 12px; }

.btn-status {
    background: var(--bg-input);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    flex: 1;
}

.btn-status.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.error-text {
    color: var(--accent);
    font-size: 13px;
    text-align: center;
    margin-top: 12px;
}

.hidden { display: none !important; }

/* ─── HEADER ────────────────────────────── */

.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-logo {
    height: 48px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.admin-email {
    font-size: 13px;
    color: var(--text-secondary);
}

/* ─── MAIN CONTENT ──────────────────────── */

.admin-main {
    flex: 1;
    padding: 32px;
}

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.toolbar h2 {
    font-size: 24px;
    font-weight: 600;
}

/* ─── RACE CARDS ────────────────────────── */

.races-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 20px;
}

.race-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    transition: all var(--transition);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.race-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transition: transform var(--transition);
}

.race-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.race-card:hover::before {
    transform: scaleX(1);
}

.race-card-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 12px;
}

.race-card h3 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.draft { background: var(--bg-input); color: var(--text-muted); }
.status-badge.active { background: rgba(34, 197, 94, 0.15); color: var(--success); }
.status-badge.finished { background: var(--accent-dim); color: var(--accent); }

.race-card-meta {
    display: flex;
    gap: 20px;
    color: var(--text-secondary);
    font-size: 13px;
}

.race-card-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.empty-state {
    text-align: center;
    color: var(--text-muted);
    padding: 60px 20px;
    font-size: 16px;
}

/* ─── EDITOR LAYOUT ─────────────────────── */

.editor-layout {
    display: grid;
    grid-template-columns: 320px 1fr 320px;
    gap: 24px;
    align-items: start;
}

.editor-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}

.editor-panel h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.panel-header h3 {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* ─── GPX UPLOAD ────────────────────────── */

.gpx-upload-area {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
}

.gpx-upload-area:hover,
.gpx-upload-area.dragover {
    border-color: var(--accent);
    background: var(--accent-dim);
}

.upload-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.gpx-upload-area small {
    color: var(--text-muted);
    font-size: 12px;
}

.hidden-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.gpx-processing {
    text-align: center;
    padding: 40px;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.gpx-stats {
    display: flex;
    gap: 20px;
    justify-content: center;
    padding: 16px 0;
    margin-bottom: 16px;
}

.stat { text-align: center; }
.stat-value { font-size: 28px; font-weight: 700; color: var(--accent); }
.stat-label { font-size: 12px; color: var(--text-secondary); margin-left: 4px; }

.admin-map {
    width: 100%;
    height: 300px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 16px;
}

.admin-profile {
    width: 100%;
    height: 120px;
    border-radius: var(--radius-sm);
}

/* ─── PUBLIC URL ────────────────────────── */

.public-url-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.public-url-section h4 {
    font-size: 13px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.url-display {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-input);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    margin-top: 10px;
}

.url-display code {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── STATUS CONTROLS ───────────────────── */

.status-controls {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.status-controls h4 {
    font-size: 13px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.status-buttons {
    display: flex;
    gap: 8px;
}

/* ─── KEY POINTS LIST ───────────────────── */

.keypoints-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 500px;
    overflow-y: auto;
}

.kp-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: all var(--transition);
    cursor: pointer;
}

.kp-item:hover {
    border-color: var(--border);
    background: var(--bg-secondary);
}

.kp-icon-circle {
    width: auto;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    font-size: 14px;
    flex-shrink: 0;
}

.kp-icon-circle.climb { background: rgba(216, 90, 48, 0.15); color: #D85A30; border-color: #D85A30; }
.kp-icon-circle.sprint { background: rgba(239, 159, 39, 0.15); color: #EF9F27; border-color: #EF9F27; }
.kp-icon-circle.feed { background: rgba(59, 139, 212, 0.15); color: #3B8BD4; border-color: #3B8BD4; }
.kp-icon-circle.danger { background: rgba(239, 68, 68, 0.15); color: #ef4444; border-color: #ef4444; }
.kp-icon-circle.start { background: rgba(26, 43, 60, 0.15); color: var(--text-primary); border-color: var(--text-primary); }

.kp-icon {
    font-size: 16px;
}

.kp-info {
    flex: 1;
    min-width: 0;
}

.kp-name {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kp-distance {
    font-size: 11px;
    color: var(--text-secondary);
}

.kp-delete {
    opacity: 0;
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    transition: opacity var(--transition);
}

.kp-item:hover .kp-delete {
    opacity: 1;
}

/* ─── MODAL ─────────────────────────────── */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
}

.modal-content {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 100%;
    max-width: 480px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    /* The whole modal scrolls. We cap its height at the viewport so
       the user can always reach the action bar at the bottom by
       scrolling, regardless of how tall the form is. The action bar
       sticks to the modal's bottom edge using position: sticky, so
       Cancelar / Guardar stay visible even while scrolling. */
    max-height: 90vh;
    overflow-y: auto;
    margin: 16px;
    padding: 24px 24px 0; /* bottom padding lives on .modal-actions */
}

.modal-content h3 {
    font-size: 18px;
    margin-bottom: 16px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding: 16px 0;
    border-top: 1px solid var(--border);
    /* Stick to the modal's bottom edge while scrolling. Negative
       horizontal margins extend the bar to touch the modal's left
       and right edges, then we restore the inner padding so the
       buttons don't sit flush against them. */
    position: sticky;
    bottom: 0;
    background: var(--bg-card);
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
    /* Slim shadow above so users notice content scrolls underneath. */
    box-shadow: 0 -8px 16px -8px rgba(0,0,0,0.15);
    z-index: 1;
}

/* ─── RESPONSIVE ────────────────────────── */

@media (max-width: 1200px) {
    .editor-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .admin-main { padding: 16px; }
    .admin-header { padding: 12px 16px; }
    .races-grid { grid-template-columns: 1fr; }
    .login-card { padding: 32px 24px; }
}
.gpx-replace-container {
    padding: 10px;
    background: var(--bg-input);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.admin-profile {
    width: 100%;
    height: 120px;
    background: #0f172a;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-top: 10px;
}

.admin-pk-marker {
    background: white;
    border: 1px solid #333;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #333;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* PK 0 marker (official start vs GPX start) */
.admin-pk-zero-marker {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    border: 2px solid white;
}
.admin-pk-zero-marker.gpx-start { background: #6b7280; }
.admin-pk-zero-marker.official-start { background: #059669; }

/* Raw points overlay (shows what RDP discarded) */
.admin-raw-point {
    background: rgba(120, 120, 120, 0.55);
    border-radius: 50%;
    pointer-events: none;
}

/* Hover crosshair on map */
.admin-hover-marker {
    background: #D01010;
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(208,16,16,0.7);
    pointer-events: none;
}

/* Keypoint markers on the admin map. Color matches the right-panel
   list so the user can match a list row with its map dot at a glance. */
.admin-kp-marker { background: none; border: none; }
.admin-kp-marker-inner {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: white;
    border: 2px solid #D01010;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    line-height: 1;
}
.admin-kp-marker-inner.climb  { border-color: #D85A30; color: #D85A30; }
.admin-kp-marker-inner.sprint { border-color: #EF9F27; color: #EF9F27; }
.admin-kp-marker-inner.feed   { border-color: #3B8BD4; color: #3B8BD4; }
.admin-kp-marker-inner.danger { border-color: #ef4444; color: #ef4444; }
.admin-kp-marker-inner.start  { border-color: #1a2b3c; color: #1a2b3c; }
.admin-kp-marker-inner.finish { border-color: #1a2b3c; color: #1a2b3c; }

/* ───────── DIAGNOSTICS PANEL ───────── */

.gpx-diagnostics {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--bg-elevated, #f8fafc);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 4px 16px;
}
.diag-row {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
}
.diag-label {
    color: var(--text-muted);
}
.diag-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

[data-theme="dark"] .gpx-diagnostics {
    background: rgba(255,255,255,0.03);
}

/* ───────── MAP CONTROLS ───────── */

.map-controls {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    padding: 8px 12px;
    background: var(--bg-elevated, #f8fafc);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-top: 10px;
    font-size: 12px;
}
.map-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}
.map-toggle input { cursor: pointer; }
[data-theme="dark"] .map-controls {
    background: rgba(255,255,255,0.03);
}

/* ───────── HOVER READOUT ───────── */

.hover-readout {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-elevated, #f8fafc);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-top: 10px;
    font-size: 12px;
}
.hr-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hr-label {
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.hr-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
}
[data-theme="dark"] .hover-readout {
    background: rgba(255,255,255,0.03);
}

/* ───────── TRACK EXPLORER ───────── */

.track-explorer {
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--bg-elevated, #f8fafc);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.track-explorer input[type=range] {
    width: 100%;
    margin-bottom: 6px;
}
.explorer-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}
.explorer-meta span {
    font-weight: 600;
    color: var(--text);
}
[data-theme="dark"] .track-explorer {
    background: rgba(255,255,255,0.03);
}

/* ───────── CLIMBS TABLE ───────── */

.climbs-section {
    margin-top: 14px;
}
.climbs-section h4 {
    margin: 0 0 8px 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}
.climbs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.climbs-table thead th {
    text-align: left;
    padding: 6px 8px;
    background: var(--bg-elevated, #f8fafc);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    color: var(--text-muted);
}
.climbs-table tbody tr {
    cursor: pointer;
    transition: background 0.1s;
}
.climbs-table tbody tr:hover {
    background: rgba(208,16,16,0.06);
}
.climbs-table tbody td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
}
.climb-grad-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    color: white;
    font-weight: 700;
    font-size: 11px;
}
[data-theme="dark"] .climbs-table thead th {
    background: rgba(255,255,255,0.03);
}

/* Stats grid: more columns now */
.gpx-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: 8px;
}

/* ─── ICON CATALOG VIEW ──────────────────────────────────────────── */

.catalog-grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
    width: 100%;
}

.catalog-category {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
}

.catalog-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.catalog-category-title {
    display: flex;
    align-items: center;
    gap: 10px;
}
.catalog-category-swatch {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.1);
}
.catalog-category-name {
    font-size: 16px;
    font-weight: 600;
}
.catalog-category-count {
    color: var(--text-muted);
    font-size: 12px;
    margin-left: 6px;
}
.catalog-category-actions {
    display: flex;
    gap: 6px;
}
.catalog-category-actions button {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    padding: 4px 10px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    transition: all var(--transition);
}
.catalog-category-actions button:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.catalog-icons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
}

.catalog-icon-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 8px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
    min-height: 100px;
    position: relative;
}
.catalog-icon-cell:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.catalog-icon-cell-label {
    font-size: 11px;
    text-align: center;
    color: var(--text-secondary);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}
.catalog-icon-cell-id {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-muted);
    word-break: break-all;
}
.catalog-icon-cell-builtin {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.6;
}

/* ─── ICON EDIT MODAL ───────────────────────────────────────────── */

.modal-content-wide {
    max-width: 980px;
    width: 100%;
}

.icon-form-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 24px;
    align-items: start;
}
.icon-form-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.icon-form-preview {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px;
}
.icon-form-preview h4 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 12px;
}
.icon-preview-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.icon-preview-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.icon-preview-label {
    flex: 1;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.icon-preview-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
}

#icon-svg {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.4;
    width: 100%;
    padding: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    resize: vertical;
    min-height: 140px;
    box-sizing: border-box;
}
#icon-svg:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.icon-svg-error {
    margin-top: 6px;
    color: var(--accent);
    font-size: 12px;
}
.icon-svg-error.hidden { display: none; }

.icon-builtin-notice {
    margin-top: 14px;
    padding: 10px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid var(--warning);
    border-radius: var(--radius-sm);
    color: var(--warning);
    font-size: 12px;
}
.icon-builtin-notice.hidden { display: none; }

@media (max-width: 800px) {
    .icon-form-grid {
        grid-template-columns: 1fr;
    }
}