body { font-family: Arial, sans-serif; margin: 40px; background-color: #f9f9f9; color: #333; }
h1 { color: #2c3e50; }
.breed-card { background: white; padding: 15px; margin-bottom: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: relative; }
h3 { margin-top: 0; color: #e67e22; display: inline-block; }
.badge { float: right; background-color: #34495e; color: white; padding: 4px 10px; border-radius: 12px; font-size: 0.85em; margin-left: 5px; }
.approved-badge { background-color: #27ae60; }
.badge-no { background-color: #95a5a6; }
p { margin: 5px 0; }
a { color: #3498db; text-decoration: none; }
a:hover { text-decoration: underline; }
.source-list { list-style: none; padding: 0; margin: 5px 0; }
.source-list li { margin: 3px 0; }
.source-type { display: inline-block; background: #ecf0f1; color: #2c3e50; padding: 2px 8px; border-radius: 10px; font-size: 0.8em; margin-right: 6px; }
.color-refs { margin: 4px 0 10px; }
.color-chip { display: inline-block; background: #eaf4fb; color: #21618c; padding: 2px 9px; border-radius: 10px; font-size: 0.85em; margin: 0 4px 4px 0; }
.color-chip:hover { background: #d6ebf8; text-decoration: none; }
.color-chip--edit { display: inline-flex; align-items: center; gap: 4px; }
.chip-x { border: 0; background: transparent; color: #21618c; font-size: 1.1em; line-height: 1; cursor: pointer; padding: 0 2px; }
.chip-x:hover { color: #c0392b; }
.color-ref-add { position: relative; margin: 6px 0 12px; }
.color-ref-add input { width: 100%; box-sizing: border-box; }
.suggestions { list-style: none; margin: 2px 0 0; padding: 0; position: absolute; z-index: 5; left: 0; right: 0; background: #fff; border: 1px solid #ccc; border-radius: 4px; max-height: 220px; overflow-y: auto; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.suggestions li { padding: 6px 10px; cursor: pointer; font-size: 0.9em; }
.suggestions li.is-active, .suggestions li:hover { background: #eaf4fb; }
.muted { color: #999; }
.status-line { margin-top: 8px; padding-top: 8px; border-top: 1px solid #eee; font-size: 0.9em; color: #555; }
.edit-link { display: inline-block; margin-top: 8px; background-color: #3498db; color: white; padding: 5px 12px; border-radius: 4px; font-size: 0.9em; border: 0; cursor: pointer; }
.edit-link:hover { background-color: #2980b9; text-decoration: none; }
.login-bar { margin-bottom: 12px; text-align: right; }
form.edit-form label { display: block; margin-top: 12px; font-weight: bold; }
form.edit-form input, form.edit-form select { width: 100%; max-width: 500px; padding: 6px; margin-top: 4px; box-sizing: border-box; }
.save-btn { margin-top: 15px; background-color: #27ae60; color: white; border: none; padding: 8px 18px; border-radius: 4px; cursor: pointer; font-size: 1em; }
.save-btn:hover { background-color: #219150; }
.delete-btn { background-color: #e74c3c; color: white; border: none; padding: 3px 10px; border-radius: 4px; cursor: pointer; font-size: 0.8em; }
.delete-btn:hover { background-color: #c0392b; }
.add-source-form { display: flex; gap: 8px; margin-top: 10px; align-items: flex-end; flex-wrap: wrap; }
.add-source-form > div { flex: 1; min-width: 140px; }
.add-source-form label { font-weight: bold; font-size: 0.9em; }
.add-source-form input, .add-source-form select { width: 100%; padding: 6px; box-sizing: border-box; }
.add-source-form button { padding: 7px 14px; background-color: #2980b9; color: white; border: none; border-radius: 4px; cursor: pointer; }
.back-link { display: inline-block; margin-bottom: 15px; }
.table-wrapper { overflow-x: auto; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.breed-table { width: 100%; min-width: 1100px; border-collapse: collapse; }
.breed-table th, .breed-table td { padding: 10px 12px; border-bottom: 1px solid #eee; text-align: left; vertical-align: top; }
.breed-table th { background-color: #34495e; color: white; white-space: nowrap; }
.breed-table tr:last-child td { border-bottom: none; }
.breed-table tbody tr:hover { background-color: #f8fbfc; }
.table-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 15px 0; }
.table-controls input, .table-controls select { padding: 8px; border: 1px solid #ccd1d1; border-radius: 4px; font-size: 1em; }
.table-controls input { min-width: 280px; }
.sort-button { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; font-weight: bold; padding: 0; }
.sort-button::after { content: " \2195"; opacity: 0.7; }
.sort-button[aria-sort="ascending"]::after { content: " \2191"; opacity: 1; }
.sort-button[aria-sort="descending"]::after { content: " \2193"; opacity: 1; }
.result-count { color: #555; font-size: 0.95em; }
.breed-name-link { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: bold; color: #2980b9; cursor: pointer; text-decoration: underline; }
.breed-name-link:hover { color: #1c5a80; }
.breed-table .breed-name-link { font-weight: normal; }
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 40px 15px; }
.modal-overlay.is-open { display: flex; }
.modal-box { background: #f9f9f9; border-radius: 8px; max-width: 700px; width: 100%; position: relative; padding: 20px; box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
.modal-close { position: absolute; top: 10px; right: 12px; background: none; border: 0; font-size: 1.4em; cursor: pointer; color: #555; line-height: 1; }
.modal-close:hover { color: #000; }
.modal-box h2 { margin-top: 5px; color: #2c3e50; }
.site-footer { margin-top: 24px; padding: 16px 0; border-top: 1px solid #ddd; text-align: center; color: #666; font-size: 0.9em; }
.error { color: #c0392b; margin-top: 10px; }
.login-box { max-width: 420px; margin: 60px auto; background: white; padding: 24px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.login-box label { display: block; margin-top: 12px; font-weight: bold; }
.login-box input, .login-box select { width: 100%; padding: 8px; margin-top: 4px; box-sizing: border-box; }
.login-box button { margin-top: 18px; width: 100%; background: #2c3e50; color: white; border: none; padding: 10px; border-radius: 6px; font-size: 1em; cursor: pointer; }