.bookmark-placeholder {opacity: 0;pointer-events: none;visibility: hidden;}.search-container {text-align: center;padding: 40px 0;margin-bottom: 30px;}.search-title {font-size: 2.4rem;margin-bottom: 25px;color: #323130;font-weight: 300;letter-spacing: -0.2px;}.search-box {max-width: 800px;margin: 0 auto;display: flex;align-items: center;gap: 0;background: white;border: 1px solid #d2d2d2;border-radius: 6px;overflow: hidden;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);transition: all 0.2s ease;height: 48px;}.search-select-wrapper {position: relative;width: 130px;height: 100%;background: #f8f8f8;border-right: 1px solid #d2d2d2;}.search-select {width: 100%;height: 100%;padding: 0 32px 0 16px;background: transparent;border: none;font-size: 15px;font-weight: 500;color: #323130;appearance: none;cursor: pointer;outline: none;transition: background 0.2s ease;}.search-select:hover {background: #f0f0f0;}.search-select:focus {background: white;}.search-select-wrapper::after {content: '';position: absolute;right: 14px;top: 50%;transform: translateY(-50%);width: 6px;height: 6px;border-left: 2px solid #666;border-bottom: 2px solid #666;transform: translateY(-70%) rotate(-45deg);pointer-events: none;}.search-select-icon {display: none;}.search-input {flex: 1;height: 100%;padding: 0 20px;border: none;font-size: 16px;color: #323130;outline: none;background: transparent;}.search-input::placeholder {color: #8a8886;}.search-btn {width: 60px;height: 100%;background: #0067b8;border: none;color: white;cursor: pointer;transition: all 0.2s ease;display: flex;align-items: center;justify-content: center;font-size: 16px;}.search-btn:hover {background: #005da6;}.search-btn:active {background: #004e8a;}.search-hint {margin-top: 15px;color: #605e5c;font-size: 13px;}.categories-filter {display: flex;gap: 10px;margin-bottom: 30px;flex-wrap: wrap;}.category-filter-btn {padding: 8px 16px;background: white;border: 1px solid #e5e7eb;border-radius: 20px;cursor: pointer;transition: all 0.3s ease;font-size: 14px;color: #6b7280;border: none;}.category-filter-btn:hover,.category-filter-btn.active {background: #4f46e5;color: white;}.sites-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 20px;margin-bottom: 40px;}.site-card {background: white;overflow: hidden;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);display: flex;flex-direction: column;height: 100%;padding: 14px;position: relative;cursor: pointer;border: 1px solid #f5f5f5;border-radius: 16px;}.site-card:hover {transform: translateY(-3px);box-shadow: 0 8px 10px rgba(0, 0, 0, 0.15);}.site-content {display: flex;gap: 14px;margin-bottom: 12px;flex: 1;overflow: hidden;}.site-logo {width: 60px;height: 60px;flex-shrink: 0;display: flex;align-items: center;justify-content: center;border-radius: 14px;overflow: hidden;transition: all 0.3s ease;}.site-card:hover .site-logo {transform: scale(1.05);}.site-logo img {width: 100%;height: 100%;object-fit: contain;border-radius: 0;}.site-info {flex: 1;min-width: 0;display: flex;flex-direction: column;overflow: hidden;}.site-title {font-size: 15px;font-weight: 600;line-height: 1.4;color: #1a1a1a;transition: color 0.2s ease;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;height: 21px;margin-bottom: 6px;}.site-description {color: #666;font-size: 13px;line-height: 1.6;margin: 0;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;flex: 1;max-height: calc(13px * 1.6 * 2);min-height: calc(13px * 1.6 * 2);}.site-footer {display: flex;justify-content: space-between;align-items: center;}.site-category {background: #f8f9fa;color: #666;padding: 2px 8px;border-radius: 12px;font-size: 11px;font-weight: 500;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 60%;border: 1px solid #e9ecef;transition: all 0.2s ease;}.bookmark-btn {background: transparent;border: 1px solid #e0e0e0;color: #999;padding: 2px 16px;border-radius: 20px;cursor: pointer;font-size: 11px;display: flex;align-items: center;justify-content: center;transition: all 0.2s ease;position: relative;z-index: 2;}.bookmark-btn:hover {color: #4f46e5;background: rgba(79, 70, 229, 0.05);}.bookmark-btn .fa-bookmark {transition: all 0.3s ease;}.bookmark-btn.bookmarked {background: #928bf8;color: white;border-color: #928bf8;}.bookmark-btn.bookmarked:hover {background: #4338ca;border-color: #4338ca;}.bookmark-btn i {font-size: 12px;}.bookmark-btn .bookmark-text {display: none;}.site-card-link {position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 1;text-decoration: none;}.empty-state {grid-column: 1 / -1;background: white;padding: 60px 20px;text-align: center;border-radius: 16px;box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);border: 1px solid #f5f5f5;}.empty-state i {font-size: 3rem;margin-bottom: 20px;color: #e0e0e0;}.empty-state h3 {font-size: 1.2rem;margin-bottom: 10px;color: #1f2937;}.popular-sites {margin-top: 60px;padding-top: 40px;border-top: 1px solid #e5e7eb;}.popular-sites .section-title {font-size: 1.5rem;font-weight: 600;color: #1f2937;margin-bottom: 20px;}.popular-sites-list {display: grid;grid-template-columns: repeat(4, 1fr);gap: 20px;margin-bottom: 40px;}.popular-site-card {background: white;overflow: hidden;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);display: flex;flex-direction: column;height: 100%;padding: 14px;position: relative;cursor: pointer;border: 1px solid #f5f5f5;border-radius: 16px;width: 100%;box-sizing: border-box;}.popular-site-card:hover {transform: translateY(-3px);box-shadow: 0 8px 10px rgba(0, 0, 0, 0.15);}.popular-site-content {display: flex;gap: 14px;flex: 1;overflow: hidden;}.popular-site-logo {width: 45px;height: 45px;flex-shrink: 0;display: flex;align-items: center;justify-content: center;border-radius: 14px;overflow: hidden;transition: all 0.3s ease;}.popular-site-card:hover .popular-site-logo {transform: scale(1.05);}.popular-site-logo img {width: 100%;height: 100%;object-fit: contain;border-radius: 0;display: block;}.popular-site-info {flex: 1;min-width: 0;display: flex;flex-direction: column;overflow: hidden;width: 100%;}.popular-site-title {font-size: 15px;font-weight: 600;line-height: 1.4;color: #1a1a1a;transition: color 0.2s ease;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;height: 21px;margin-bottom: 6px;}.popular-site-description {color: #666;font-size: 13px;line-height: 1.6;margin: 0;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;flex: 1;max-height: calc(13px * 1.6 * 1);min-height: calc(13px * 1.6 * 1);width: 100%;}.popular-site-link {position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 1;text-decoration: none;}.pagination {display: flex;justify-content: center;gap: 8px;margin-top: 40px;font-size: 12px;}.page-link {padding: 5px 12px;background: white;border: 1px solid #e5e7eb;border-radius: 8px;color: #1f2937;text-decoration: none;transition: all 0.3s ease;}.page-link:hover {background: #f3f4f6;}.page-link.active {background: #4f46e5;color: white;border-color: #4f46e5;}.modal {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);z-index: 10000;align-items: center;justify-content: center;padding: 20px;}.modal.show {display: flex;}.modal-content {background: white;border-radius: 20px;width: 100%;max-width: 500px;max-height: 90vh;overflow-y: auto;box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);}.category-modal {max-width: 600px;}.modal-header {display: flex;justify-content: space-between;align-items: center;padding: 24px;border-bottom: 1px solid #e5e7eb;}.modal-header h3 {font-size: 20px;font-weight: 600;color: #1f2937;margin: 0;}.modal-close {background: transparent;border: none;font-size: 24px;cursor: pointer;color: #6b7280;transition: color 0.2s ease;width: 32px;height: 32px;display: flex;align-items: center;justify-content: center;border-radius: 8px;line-height: 1;}.modal-close:hover {color: #1f2937;background: #f3f4f6;}.modal-body {padding: 24px;}.form-group {margin-bottom: 20px;}.form-label {display: block;margin-bottom: 8px;font-weight: 500;color: #374151;font-size: 14px;}.form-label.required::after {content: " *";color: #ef4444;}.form-control {width: 100%;padding: 12px 16px;border: 1px solid #d1d5db;border-radius: 12px;font-size: 15px;transition: all 0.2s ease;background: #ffffff;}.form-control:focus {outline: none;border-color: #4f46e5;box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);}.form-text {font-size: 13px;color: #6b7280;margin-top: 6px;}.form-group-row {display: flex;gap: 10px;align-items: center;}.form-actions {display: flex;justify-content: flex-end;gap: 12px;margin-top: 24px;padding-top: 24px;border-top: 1px solid #e5e7eb;}.btn {padding: 10px 20px;border-radius: 10px;font-weight: 500;font-size: 14px;cursor: pointer;border: none;transition: all 0.2s ease;display: inline-flex;align-items: center;justify-content: center;gap: 8px;}.btn-primary {background: #4f46e5;color: white;}.btn-primary:hover {background: #4338ca;transform: translateY(-1px);box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);}.btn-outline {background: transparent;border: 1px solid #d1d5db;color: #374151;}.btn-outline:hover {background: #f9fafb;border-color: #9ca3af;}.btn-sm {padding: 6px 12px;font-size: 12px;}.category-list {max-height: 300px;overflow-y: auto;margin: 16px 0;padding: 8px;border: 1px solid #e2e8f0;border-radius: 8px;}.category-item {display: flex;align-items: center;justify-content: space-between;padding: 12px;border-radius: 6px;margin-bottom: 8px;background: #f8fafc;transition: background 0.2s ease;}.category-item:hover {background: #f1f5f9;}.category-item-info {display: flex;align-items: center;gap: 12px;}.category-color-preview {width: 20px;height: 20px;border-radius: 4px;}.category-actions {display: flex;gap: 8px;}.color-picker {display: grid;grid-template-columns: repeat(7, 1fr);gap: 10px;margin-top: 8px;padding: 12px;background: #f8fafc;border-radius: 12px;border: 1px solid #e2e8f0;}.color-option {width: 32px;height: 32px;border-radius: 8px;cursor: pointer;border: 2px solid transparent;transition: all 0.2s ease;position: relative;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}.color-option:hover {transform: scale(1.1);box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);}.color-option.selected {border-color: #1e293b;box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);}.color-option.selected::after {content: "✓";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);color: white;font-size: 14px;font-weight: bold;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);}.color-option[style*="background-color: #1e293b"]::after,.color-option[style*="background-color: #475569"]::after,.color-option[style*="background-color: #4f46e5"]::after,.color-option[style*="background-color: #3b82f6"]::after,.color-option[style*="background-color: #0ea5e9"]::after,.color-option[style*="background-color: #06b6d4"]::after,.color-option[style*="background-color: #10b981"]::after,.color-option[style*="background-color: #059669"]::after,.color-option[style*="background-color: #f59e0b"]::after,.color-option[style*="background-color: #f97316"]::after,.color-option[style*="background-color: #dc2626"]::after,.color-option[style*="background-color: #8b5cf6"]::after,.color-option[style*="background-color: #6366f1"]::after,.color-option[style*="background-color: #14b8a6"]::after {color: white;}.color-option[style*="background-color: #eab308"]::after,.color-option[style*="background-color: #84cc16"]::after,.color-option[style*="background-color: #22c55e"]::after,.color-option[style*="background-color: #ec4899"]::after,.color-option[style*="background-color: #9ca3af"]::after {color: #1e293b;}@keyframes modalFadeIn {from {opacity: 0;transform: translateY(-20px);}to {opacity: 1;transform: translateY(0);}}@media (max-width: 1200px) {.sites-grid,.popular-sites-list {grid-template-columns: repeat(3, 1fr);}}@media (max-width: 992px) {.sites-grid,.popular-sites-list {grid-template-columns: repeat(2, 1fr);}}@media (max-width: 768px) {.color-picker {grid-template-columns: repeat(5, 1fr);gap: 8px;padding: 10px;}.color-option {width: 28px;height: 28px;}.search-container {padding: 30px 15px;}.search-title {font-size: 1.8rem;margin-bottom: 20px;line-height: 1.3;}.search-box {flex-direction: column;min-height: 105px;gap: 12px;border: none;background: transparent;box-shadow: none;border-radius: 0;max-width: 100%;}.search-select-wrapper {width: 100%;height: 52px;border: 2px solid #e0e6ed;border-radius: 10px;background: white;border-right: 2px solid #e0e6ed;}.search-select {width: 100%;height: 100%;padding: 0 20px;font-size: 16px;color: #2d3748;background: white;}.search-input {width: 100%;height: 52px;border: 2px solid #e0e6ed;border-radius: 10px;padding: 0 20px;font-size: 16px;background: white;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);}.search-btn {width: 100%;height: 52px;border-radius: 10px;font-size: 16px;font-weight: 500;background: linear-gradient(135deg, #4f46e5, #4338ca);color: white;border: none;margin-top: 8px;display: flex;align-items: center;justify-content: center;gap: 10px;box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);}.search-btn:hover {transform: translateY(-1px);box-shadow: 0 6px 16px rgba(79, 70, 229, 0.3);}.search-btn i {font-size: 18px;}.search-hint {margin-top: 15px;font-size: 14px;color: #64748b;line-height: 1.5;padding: 0 10px;}.site-title {font-size: 14px;height: 20px;}.site-description {font-size: 12px;line-height: 1.5;max-height: calc(12px * 1.5 * 2);min-height: calc(12px * 1.5 * 2);}.sites-grid,.popular-sites-list {grid-template-columns: repeat(2, 1fr);gap: 16px;}.site-card,.popular-site-card {padding: 14px;border-radius: 14px;}.site-logo,.popular-site-logo {width: 52px;height: 52px;border-radius: 12px;}.site-content,.popular-site-content {gap: 12px;margin-bottom: 10px;}.site-title,.popular-site-title {font-size: 14px;height: 20px;margin-bottom: 6px;}.site-description,.popular-site-description {font-size: 12px;line-height: 1.5;max-height: calc(12px * 1.5 * 2);min-height: calc(12px * 1.5 * 2);}.site-footer {min-height: 32px;padding-top: 10px;}.bookmark-btn {width: 28px;height: 28px;padding: 0;}}@media (max-width: 480px) {.color-picker {grid-template-columns: repeat(4, 1fr);gap: 6px;}.color-option {width: 24px;height: 24px;}.color-option.selected::after {font-size: 12px;}.search-container {padding: 25px 12px;}.search-title {font-size: 1.6rem;margin-bottom: 18px;}.search-select-wrapper,.search-input,.search-btn {height: 48px;border-radius: 8px;}.search-select,.search-input {font-size: 15px;padding: 0 16px;}.search-btn {height: 48px;font-size: 15px;}.sites-grid,.popular-sites-list {grid-template-columns: 1fr;}}@media (min-width: 769px) and (max-width: 1024px) {.search-box {max-width: 90%;}.search-select-wrapper {width: 140px;}}@media (hover: hover) {.search-box:focus-within {border-color: #0067b8;box-shadow: 0 0 0 2px rgba(0, 103, 184, 0.15);}.search-select:hover {background: #f0f0f0;}.search-btn:hover {background: #005da6;}}