:root {
    --color-primary: #1a56db;
    --color-primary-dark: #1e40af;
    --color-success: #059669;
    --color-danger: #dc2626;
    --color-warning: #d97706;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-500: #6b7280;
    --color-gray-700: #374151;
    --color-gray-900: #111827;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    color: var(--color-gray-900);
    line-height: 1.6;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); }

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    border-block-end: 1px solid var(--color-gray-200);
    position: relative;
}

.navbar-brand { font-size: 1.5rem; font-weight: 700; color: var(--color-primary); text-decoration: none; }
.navbar-center { display: flex; gap: var(--spacing-md); position: absolute; left: 50%; transform: translateX(-50%); }
.navbar-links { display: flex; gap: var(--spacing-md); }
.navbar-links a { color: var(--color-gray-700); text-decoration: none; }
.navbar-links a:hover { color: var(--color-primary); }
.navbar-end { display: flex; align-items: center; gap: var(--spacing-sm); }

.nav-logout {
    background: none;
    border: none;
    color: var(--color-gray-700);
    cursor: pointer;
    font: inherit;
    padding: 0;
}
.nav-logout:hover { color: var(--color-primary); }

.btn-menu-toggle {
    display: none;
    background: none;
    border: 1px solid var(--color-gray-200);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--color-gray-700);
}
.btn-menu-toggle:hover { background: var(--color-gray-100); }

.navbar-top { display: contents; }

.btn-dir-toggle {
    background: var(--color-gray-100);
    color: var(--color-gray-700);
    border: 1px solid var(--color-gray-200);
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
}
.btn-dir-toggle:hover { background: var(--color-gray-200); }

.footer {
    margin-block-start: var(--spacing-xl);
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--color-gray-500);
    border-block-start: 1px solid var(--color-gray-200);
}

.btn {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

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

.form-group { margin-block-end: var(--spacing-md); }
.form-group label { display: block; margin-block-end: var(--spacing-xs); font-weight: 500; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--color-gray-200);
    border-radius: 6px;
    font-size: 1rem;
}

.card {
    border: 1px solid var(--color-gray-200);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.card-body { padding: var(--spacing-md); }
.card-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}
.badge-verified { background: var(--color-success); color: white; }

.grid { display: grid; gap: var(--spacing-md); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

    .navbar { padding: var(--spacing-sm) var(--spacing-md); flex-wrap: wrap; }
    .navbar-top { display: flex; justify-content: space-between; align-items: center; width: 100%; }
    .btn-menu-toggle { display: block; }
    .navbar-center { position: static; transform: none; }
    .navbar-links { display: none; flex-direction: column; width: 100%; gap: var(--spacing-xs); padding-block-start: var(--spacing-sm); margin-block-start: var(--spacing-sm); border-block-start: 1px solid var(--color-gray-200); }
    .navbar-links.open { display: flex; }
    .navbar-links a, .navbar-links button { padding: var(--spacing-sm) 0; }
    .navbar-end { display: none; }
    .navbar-links.open + .navbar-end { display: flex; margin-block-start: var(--spacing-xs); }

    .container { padding: 0 var(--spacing-sm); }

    [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
    [style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr !important; }
    [style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
    [style*="grid-template-columns: 200px 1fr"] { grid-template-columns: 1fr !important; }

    [style*="max-width: 800px"],
    [style*="max-width: 700px"],
    [style*="max-width: 600px"] { padding-inline: var(--spacing-sm) !important; }

    [style*="display: flex"][style*="justify-content: space-between"] { flex-wrap: wrap; gap: var(--spacing-sm); }

    [style*="display: flex"][style*="gap: var(--spacing-xl)"][style*="align-items: start"] {
        flex-direction: column !important;
    }
    [style*="display: flex"][style*="gap: var(--spacing-xl)"][style*="align-items: start"] > nav {
        min-width: 100% !important;
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }

    .pipeline { flex-direction: column; }
    .pipeline-stage { min-width: 100%; }

    .search-results .card-img { aspect-ratio: 16/9; }

    [style*="display: flex"][style*="justify-content: center"][style*="gap"] { flex-wrap: wrap; }

    .wizard-steps { gap: var(--spacing-sm); }
    .wizard-step { padding: var(--spacing-xs) var(--spacing-sm); font-size: 0.85rem; }
}

.search-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: 80vh; }
.search-map { position: sticky; top: 0; height: 80vh; }
.search-results { padding: var(--spacing-md); overflow-y: auto; }

@media (max-width: 768px) {
    .search-layout { grid-template-columns: 1fr; }
    .search-map { height: 30vh; position: relative; }
}

.alert { padding: var(--spacing-sm) var(--spacing-md); border-radius: 6px; margin-block-end: var(--spacing-md); }
.alert-success { background: #ecfdf5; color: var(--color-success); }
.alert-error { background: #fef2f2; color: var(--color-danger); }

.pipeline { display: flex; gap: var(--spacing-md); overflow-x: auto; padding: var(--spacing-md) 0; }
.pipeline-stage { min-width: 250px; background: var(--color-gray-50); border-radius: 8px; padding: var(--spacing-md); }
.pipeline-stage-title { font-weight: 600; margin-block-end: var(--spacing-sm); }

.wizard-steps {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-block-end: var(--spacing-xl);
    padding: var(--spacing-md);
}
.wizard-step { padding: var(--spacing-sm) var(--spacing-md); border-radius: 20px; background: var(--color-gray-100); }
.wizard-step.active { background: var(--color-primary); color: white; }

.btn-secondary { background: var(--color-gray-100); color: var(--color-gray-700); border: 1px solid var(--color-gray-200); }
.btn-secondary:hover { background: var(--color-gray-200); }
.btn-danger { background: var(--color-danger); color: white; }
.btn-danger:hover { background: #b91c1c; }

.notif-badge {
    position: absolute;
    top: -6px;
    inset-inline-end: -8px;
    background: var(--color-danger);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
}

.notif-panel {
    position: absolute;
    top: 100%;
    inset-inline-end: 0;
    width: 300px;
    background: white;
    border: 1px solid var(--color-gray-200);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 100;
    max-height: 400px;
    overflow-y: auto;
}

.notification-item {
    padding: var(--spacing-sm) var(--spacing-md);
    border-block-end: 1px solid var(--color-gray-100);
    font-size: 0.85rem;
}
.notification-item.unread { background: var(--color-gray-50); }
.notification-item strong { display: block; margin-block-end: 2px; }
.notification-item p { color: var(--color-gray-500); margin: 0; font-size: 0.8rem; }

.notification-dropdown { padding: var(--spacing-xs) 0; }
.notification-dropdown > p { padding: var(--spacing-md); text-align: center; color: var(--color-gray-500); }