:root {
    --bg1: #f7f9ff;
    --bg2: #ffffff;
    --card: #ffffff;
    --text: #111827;
    --muted: #6b7280;
    --primary: #6759ff;
    --primary-2: #00c2ff;
    --radius: 18px;
    --shadow: 0 10px 30px rgba(16,24,40,.06);
}

    :root[data-theme="dark"],
    html[data-theme="dark"] {
        --bg1: #0b1020;
        --bg2: #0b1020;
        --card: #0f1528;
        --text: #e5e7eb;
        --muted: #9ca3af;
        --shadow: 0 10px 30px rgba(0,0,0,.45);
    }

* {
    box-sizing: border-box;
}

body {
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    color: var(--text);
    background: var(--bg2);
    transition: background .2s ease, color .2s ease;
}

.brand-gradient {
    background: linear-gradient(90deg,var(--primary),var(--primary-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.page-bg {
    background: radial-gradient(1200px 800px at 10% -10%, #eef2ff20 0%, transparent 65%), radial-gradient(1000px 700px at 90% -20%, #e6fbff20 0%, transparent 60%), linear-gradient(var(--bg2), var(--bg2));
}

.card-modern {
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: var(--card);
}

    .card-modern .card-img-top {
        border-top-left-radius: var(--radius);
        border-top-right-radius: var(--radius);
        object-fit: cover;
    }

.masonry {
    column-width: 320px;
    column-gap: 1rem;
}

    .masonry .masonry-item {
        break-inside: avoid;
        margin-bottom: 1rem;
    }

.dropzone {
    border: 2px dashed #cbd5e1;
    border-radius: var(--radius);
    padding: 28px;
    text-align: center;
    background: #fafafa10;
    transition: .2s ease;
}

    .dropzone.dragover {
        background: #c7d2fe20;
        border-color: #93c5fd;
    }

.preview-img {
    max-width: 100%;
    border-radius: var(--radius);
    box-shadow: 0 6px 20px rgba(2,6,23,.12);
}

.feedback {
    background: #f8fafc10;
    border: 1px solid #eef2f710;
    border-radius: 14px;
    padding: 10px 12px;
}

.reaction-btn {
    border: 1px solid #e5e7eb40;
    background: transparent;
    border-radius: 999px;
    padding: .35rem .7rem;
    line-height: 1;
}

    .reaction-btn:hover {
        background: #eef2ff40;
    }

.pagination .page-link {
    border-radius: 999px;
}

html[data-theme="dark"] {
    --bs-body-color: #ffffff;
    --bs-emphasis-color: #ffffff;
    --bs-heading-color: #ffffff;
    --bs-secondary-color: #cbd5e1; 
    --bs-secondary-color-rgb: 203,213,225;
    --bs-link-color: #9ecbff;
    --bs-border-color: #293249;
    --bs-body-bg: #0b1020;
}

[data-theme="dark"] .navbar.bg-body-tertiary {
    background-color: #0f1528 !important;
}

[data-theme="dark"] .navbar .nav-link {
    color: #e5e7eb !important;
}

    [data-theme="dark"] .navbar .nav-link:hover {
        color: #ffffff !important;
    }

[data-theme="dark"] .navbar .text-body-secondary {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .navbar .navbar-toggler {
    border-color: #3a4563;
}

[data-theme="dark"] .navbar .navbar-toggler-icon {
    filter: invert(1) grayscale(1);
}

[data-theme="dark"] .card,
[data-theme="dark"] .card .card-body {
    color: #ffffff;
    background-color: var(--card);
}

[data-theme="dark"] .text-secondary,
[data-theme="dark"] .small,
[data-theme="dark"] .form-text {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] textarea.form-control {
    background-color: #0f1528;
    color: #ffffff;
    border-color: #2c3550;
}

    [data-theme="dark"] .form-control::placeholder {
        color: #9ca3af;
    }

[data-theme="dark"] .btn-outline-secondary {
    color: #e5e7eb;
    border-color: #667085;
}

    [data-theme="dark"] .btn-outline-secondary:hover {
        background-color: #2b344a;
        border-color: #8a93a8;
    }

[data-theme="dark"] .reaction-btn {
    color: #e5e7eb;
    border-color: #3a4563;
}

[data-theme="dark"] .dropzone {
    color: #e5e7eb;
}

#similarList a {
    padding: .35rem .25rem;
    border-radius: 12px;
}

    #similarList a:hover {
        background: #eef2ff60;
    }

html[data-theme="dark"] #similarList a:hover {
    background: #2b344a80;
}

a.btn.btn-primary.rounded-pill,
button.btn.btn-primary.rounded-pill {
    background-color: #0d6efd !important;
    color: #ffffff !important;
    border: 1px solid #0d6efd !important;
}

    a.btn.btn-primary.rounded-pill:hover,
    button.btn.btn-primary.rounded-pill:hover {
        background-color: #0b5ed7 !important;
        color: #ffffff !important;
        border-color: #0b5ed7 !important;
    }
a.btn.btn-sm.btn-outline-primary.rounded-pill {
    background-color: transparent !important;
    color: #0d6efd !important; 
    border: 1px solid #0d6efd !important;
}

    a.btn.btn-sm.btn-outline-primary.rounded-pill:hover {
        background-color: #0d6efd !important; 
        color: #ffffff !important; 
    }

html[data-theme="dark"] a.btn.btn-sm.btn-outline-primary.rounded-pill {
    color: #e5e7eb !important; 
    border: 1px solid #0d6efd !important;
}

    html[data-theme="dark"] a.btn.btn-sm.btn-outline-primary.rounded-pill:hover {
        background-color: #0d6efd !important;
        color: #ffffff !important;
    }

.navbar .btn.btn-outline-danger {
    background-color: transparent !important;
    color: #dc3545 !important; 
    border-color: #dc3545 !important; 
    transition: none !important;
}
    .navbar .btn.btn-outline-danger:hover,
    .navbar .btn.btn-outline-danger:focus,
    .navbar .btn.btn-outline-danger:active,
    .navbar .btn.btn-outline-danger:visited,
    .navbar .btn.btn-outline-danger.active {
        background-color: transparent !important;
        color: #dc3545 !important;
        border-color: #dc3545 !important;
        box-shadow: none !important;
        outline: none !important;
    }

    .navbar .btn.btn-outline-danger:hover {
        background-color: rgba(220, 53, 69, 0.08) !important;
    }