:root {
    --mars-red: #0d9488;      /* teal accent (kept var name for compatibility) */
    --mars-dark: #0a0f14;
    --mars-sand: #a5f3fc;     /* light cyan text accent */
    --mars-dust: #334155;
    --accent: #22d3ee;        /* turquoise */
    --accent-deep: #0891b2;   /* cyan-700 */
    --bg-deep: #05080c;
    --bg-panel: #0f172a;
    --bg-card: #111827;
    --border: #1e3a4c;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #05080c 0%, #0a1628 35%, #0c1a22 70%, #05080c 100%);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main { flex: 1; }

.top-bar {
    background: #030712;
    color: #67e8f9;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--border);
}

.navbar {
    background: linear-gradient(90deg, #0a1628, #0f2744) !important;
    border-bottom: 2px solid var(--accent-deep);
}

.navbar-brand {
    letter-spacing: 0.5px;
}
.brand-icon { filter: drop-shadow(0 0 6px #22d3ee); }

.nav-link { color: #a5f3fc !important; }
.nav-link:hover { color: #fff !important; }

/* Hero */
.hero-mars {
    background: radial-gradient(ellipse at center, #0e7490 0%, #0a1628 45%, #05080c 75%);
    border: 1px solid #155e75;
    border-radius: 1rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hero-mars::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2322d3ee' fill-opacity='0.07'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.6;
}

/* Product cards */
.product-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    height: 100%;
    overflow: hidden;
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(34, 211, 238, 0.18);
    border-color: var(--accent);
}
.product-emoji {
    font-size: 3.5rem;
    line-height: 1;
    text-align: center;
    padding: 1.25rem 0;
    background: linear-gradient(180deg, #0f2744, #0a1628);
}
.price-sols {
    color: #22d3ee;
    font-weight: 700;
    font-size: 1.15rem;
}
.price-credits {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Buttons */
.btn-mars {
    background: linear-gradient(135deg, #0e7490, #22d3ee);
    border: none;
    color: #041016;
    font-weight: 600;
}
.btn-mars:hover {
    background: linear-gradient(135deg, #22d3ee, #67e8f9);
    color: #041016;
}
.btn-outline-mars {
    border: 1px solid var(--accent);
    color: #67e8f9;
}
.btn-outline-mars:hover {
    background: rgba(34, 211, 238, 0.15);
    color: #fff;
    border-color: #67e8f9;
}

/* Badges */
.badge-featured {
    background: linear-gradient(90deg, #0891b2, #22d3ee);
    color: #041016;
}

/* Cart badge */
#cart-badge { font-size: 0.7rem; }

/* Filters bar */
.filters-bar {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 1rem;
}

/* Forms */
.form-control, .form-select {
    background: #0a1628;
    border-color: var(--border);
    color: var(--text);
}
.form-control:focus, .form-select:focus {
    background: #0f2744;
    border-color: var(--accent);
    color: var(--text);
    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
}
.form-control::placeholder { color: #64748b; }

/* Cards generic */
.card-mars {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
}

/* Footer */
.footer {
    background: #030712;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
}

/* Toast */
.toast { background: #0f2744; color: var(--text); }

/* Tables in dark theme */
.table-dark {
    --bs-table-bg: #0f172a;
    --bs-table-border-color: #1e3a4c;
    --bs-table-striped-bg: #111827;
    --bs-table-hover-bg: #0f2744;
}

/* Intentional UI issues for students:
   - Some long product names overflow without ellipsis on mobile
   - Filter buttons have slightly inconsistent padding
   - On very small screens the top-bar text can wrap awkwardly
   - Color contrast on secondary text is intentionally medium
*/
.product-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* BUG: on some viewports the clamp is ignored due to missing line-height */
}
.filter-btn-inconsistent {
    padding: 0.35rem 0.7rem; /* slightly different from btn-sm */
}

/* Responsive tweaks */
@media (max-width: 576px) {
    .hero-mars { padding: 1.5rem 1rem; }
    .product-emoji { font-size: 2.5rem; }
    .top-bar { font-size: 0.7rem; }
}