:root {
    --bg-page: #f0f4f9;
    --bg-card: #ffffff;
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --text-muted: #6b7280;

    /* Header Colors matching typical dashboard styles */
    --header-blue: #2563eb;
    --header-cyan: #06b6d4;
    --header-green: #10b981;
    --header-purple: #8b5cf6;
    --header-orange: #f59e0b;

    --header-bg-blue: #eff6ff;
    --header-bg-cyan: #ecfeff;
    --header-bg-green: #ecfdf5;
    --header-bg-purple: #f5f3ff;
    --header-bg-orange: #fffbeb;

    --border-radius: 12px;
    --s-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --m-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

    --font-heading: 'Inter', sans-serif;
    --font-body: 'Noto Sans SC', sans-serif;
}

/* Language Visibility Logic */
body.zh .lang-en {
    display: none !important;
}

body.en .lang-zh {
    display: none !important;
}

/* Switcher Button */
.lang-switch {
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    display: flex;
    overflow: hidden;
    cursor: pointer;
    margin-left: 20px;
}

.lang-opt {
    padding: 5px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.lang-opt.active {
    background: var(--header-blue);
    color: white;
}

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

body {
    background-color: var(--bg-page);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.5;
    padding-bottom: 80px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--text-primary);
    font-weight: 700;
}

.container {
    max-width: 1400px;
    /* Wider for dashboard view */
    margin: 0 auto;
    padding: 20px 40px;
}

/* Navbar (Simple Top Bar) */
.top-bar {
    background: var(--bg-card);
    border-bottom: 1px solid #e5e7eb;
    padding: 15px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}

.brand {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand span {
    background: var(--bg-page);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    margin-left: 20px;
    font-size: 0.9rem;
    font-weight: 500;
}

.nav-links a:hover {
    color: var(--header-blue);
}

/* Main Layout */
.main-title-section {
    padding: 40px 0 30px;
    /* No big hero image, clean text */
}

.main-title-section h1 {
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.main-title-section p {
    color: var(--text-secondary);
    max-width: 800px;
}

/* Card Styles */
.card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.card-grid-wide {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.showcase-card {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    box-shadow: var(--s-shadow);
    overflow: hidden;
    transition: box-shadow 0.2s;
    border: 1px solid #e5e7eb;
}

.showcase-card:hover {
    box-shadow: var(--m-shadow);
}

/* Card Headers with Colors */
.card-header {
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-blue {
    background-color: var(--header-blue);
    color: white;
}

.header-cyan {
    background-color: var(--header-cyan);
    color: white;
}

.header-green {
    background-color: var(--header-green);
    color: white;
}

.header-purple {
    background-color: var(--header-purple);
    color: white;
}

.header-orange {
    background-color: var(--header-orange);
    color: white;
}

/* In the reference, sometimes the whole header is colored, 
   or just a thick left border / top border. 
   The user reference images show SOLID COLOR HEADERS or LIGHT BG headers with colored text.
   Let's go with SOLID COLOR headers for strong distinction, as seen in "Blue header with white text" examples,
   OR Light BG with colored left border.
   Actually, looking closely at "uploaded_media_0", it has a cyan header block. 
   "uploaded_media_1" has "Technology Green" header block.
   So Solid Color Header Blocks are good.
*/

.showcase-card .card-content {
    padding: 24px;
}

.card-header-icon {
    font-size: 1.2rem;
}

.card-header-title {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}

.card-header-subtitle {
    font-weight: 400;
    font-size: 0.85rem;
    opacity: 0.9;
    margin-top: 2px;
}

/* Lists and Tags inside cards */
.info-list {
    list-style: none;
}

.info-list li {
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.info-list li i {
    color: var(--header-blue);
    /* Default bullet color */
    margin-top: 4px;
    font-size: 0.9rem;
}

.info-list h5 {
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.info-list p {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

.tag {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 20px;
    background: #f3f4f6;
    color: var(--text-secondary);
}

/* User Groups Horizontal Layout */
.user-groups-container {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.user-group {
    flex: 1;
    background: #f9fafb;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid #e5e7eb;
}

.user-group h5 {
    color: var(--text-primary);
    margin-bottom: 10px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-group ul {
    list-style: none;
}

.user-group li {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
    padding-left: 10px;
    border-left: 2px solid #d1d5db;
}

/* Metrics Row */
.metrics-row {
    display: flex;
    gap: 20px;
    margin-top: 24px;
}

.metric-card {
    flex: 1;
    background: white;
    padding: 20px;
    border-radius: var(--border-radius);
    border: 1px solid #e5e7eb;
    text-align: center;
    box-shadow: var(--s-shadow);
}

.metric-card .val {
    font-size: 2rem;
    font-weight: 800;
    color: var(--header-blue);
    margin-bottom: 5px;
}

.metric-card .lbl {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Footer substitute */
.footer-note {
    text-align: center;
    margin-top: 40px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

@media (max-width: 900px) {
    .card-grid {
        grid-template-columns: 1fr;
    }

    .user-groups-container {
        flex-direction: column;
    }

    .metrics-row {
        flex-direction: column;
    }

    .nav-links {
        display: none;
    }
}

/* --- Optimizations --- */

/* 1. Scroll Reveal Animation */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 2. Active Nav State */
.nav-links a.active {
    color: var(--header-blue);
    position: relative;
}

.nav-links a.active::after {
    content: '';
    position: absolute;
    bottom: -24px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--header-blue);
    border-radius: 3px 3px 0 0;
}