/* ===================================
   Simple & Clean Styles for Prompts Gallery
   =================================== */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ===================================
   Simple Variables
   =================================== */
:root {
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.1);
    --shadow-md: 0 2px 4px rgba(0,0,0,0.1);
    --transition: 200ms ease;
}

/* ===================================
   Typography
   =================================== */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    background: #ffffff;
    color: #1a1a1a;
}

.dark body {
    background: #0a0a0a;
    color: #f5f5f5;
}

/* ===================================
   Simple Background
   =================================== */
.animated-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #fafafa;
}

.dark .animated-bg {
    background: #0a0a0a;
}

/* ===================================
   Glass Cards
   =================================== */
.glass-enhanced {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    box-shadow: var(--shadow-sm);
}

.dark .glass-enhanced {
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
}

/* ===================================
   Simple Card Hover
   =================================== */
.card-enhanced {
    transition: all var(--transition);
    border: 1px solid #e5e5e5;
}

.dark .card-enhanced {
    border: 1px solid #2a2a2a;
}

.card-enhanced:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: #d4d4d4;
}

.dark .card-enhanced:hover {
    border-color: #404040;
}

/* ===================================
   Text Styling
   =================================== */
.gradient-text-animated {
    color: inherit;
}

/* Remove all animations for simplicity */
.float,
.float-delayed,
.pulse-glow {
    animation: none;
}

/* ===================================
   Simple Buttons
   =================================== */
.btn-enhanced {
    transition: all var(--transition);
}

.btn-enhanced:hover {
    opacity: 0.9;
}

.btn-enhanced:active {
    transform: scale(0.98);
}

/* Remove all complex animations and effects for simplicity */

/* ===================================
   Simple Tags
   =================================== */
.tag-pill {
    display: inline-flex;
    align-items: center;
    transition: all var(--transition);
}

.tag-pill:hover {
    opacity: 0.8;
}

/* ===================================
   Navbar
   =================================== */
.navbar-blur {
    background: #ffffff;
    box-shadow: var(--shadow-sm);
    border-bottom: 1px solid #e5e5e5;
}

.dark .navbar-blur {
    background: #1a1a1a;
    border-bottom: 1px solid #2a2a2a;
}

/* ===================================
   Search Bar
   =================================== */
.search-enhanced input:focus {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

.dark .search-enhanced input:focus {
    outline-color: #f5f5f5;
}

/* ===================================
   Scrollbar
   =================================== */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f5f5f5;
}

::-webkit-scrollbar-thumb {
    background: #d4d4d4;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a3a3a3;
}

.dark ::-webkit-scrollbar-track {
    background: #1a1a1a;
}

.dark ::-webkit-scrollbar-thumb {
    background: #404040;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #525252;
}

/* ===================================
   Text Visibility - Keep text readable always
   =================================== */
/* Ensure text color is always visible */
body, h1, h2, h3, h4, h5, h6, p, a, span, div, label, input, textarea, select, button {
    color: inherit;
}

/* Light mode text colors */
body {
    color: #1a1a1a;
}

.dark body {
    color: #f5f5f5;
}

/* Links should be visible */
a {
    color: #1a1a1a;
}

.dark a {
    color: #f5f5f5;
}

a:hover {
    opacity: 0.7;
}

/* Buttons maintain their color */
button {
    color: inherit;
}

/* Tables */
table tr:hover {
    background-color: #f5f5f5;
}

.dark table tr:hover {
    background-color: #2a2a2a;
}

/* Form inputs */
input, textarea, select {
    color: #1a1a1a;
    background: #ffffff;
    border: 1px solid #d4d4d4;
}

.dark input,
.dark textarea,
.dark select {
    color: #f5f5f5;
    background: #1a1a1a;
    border-color: #404040;
}

input::placeholder,
textarea::placeholder {
    color: #a3a3a3;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #737373;
}

/* ===================================
   Responsive
   =================================== */
@media (max-width: 768px) {
    .card-enhanced:hover {
        transform: translateY(-1px);
    }
}