/* ─── Design Tokens ─────────────────────────────────────────── */
:root {
    --bg:            #f5f3ff;
    --card-bg:       #ffffff;
    --header-from:   #312e81;
    --header-to:     #4f46e5;
    --nav-bg:        #1e1b4b;
    --nav-hover:     #2e2a63;
    --dropdown-bg:   #1e1b4b;
    --accent:        #4f46e5;
    --accent-hover:  #4338ca;
    --accent-light:  #ede9fe;
    --text:          #1e1b4b;
    --text-muted:    #6b7280;
    --border:        #c7d2fe;
    --shadow:        rgba(79, 70, 229, 0.12);
    --success-bg:    #d1fae5;
    --success-text:  #065f46;
    --error-bg:      #fee2e2;
    --error-text:    #991b1b;
    --code-bg:       #0f172a;
}

/* ─── Reset & Base ───────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Inter', Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
}

/* ─── Top Header (gradient banner) ──────────────────────────── */
.top-header {
    background: linear-gradient(135deg, var(--header-from) 0%, var(--header-to) 100%);
    color: white;
    padding: 28px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 24px rgba(49, 46, 129, 0.35);
}

.top-header h1 {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.top-header p {
    margin: 5px 0 0;
    color: #c4b5fd;
    font-size: 0.9rem;
}

.login-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: #c4b5fd;
    white-space: nowrap;
}

.login-status a {
    color: white;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 7px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s;
}

.login-status a:hover {
    background: rgba(255, 255, 255, 0.28);
}

/* ─── Top Nav Bar ────────────────────────────────────────────── */
.topnav {
    background: var(--nav-bg);
    padding: 8px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid rgba(99, 102, 241, 0.25);
    gap: 12px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
}

.nav-link {
    color: #a5b4fc;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 7px;
    transition: background 0.18s, color 0.18s;
    position: relative;
}

.nav-link:hover {
    background: var(--nav-hover);
    color: #fff;
}

.nav-link.active {
    color: #fff;
    background: rgba(99, 102, 241, 0.25);
}

.nav-link.active::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: #818cf8;
    border-radius: 2px;
}

/* ─── Burger Button ──────────────────────────────────────────── */
.burger-btn {
    background: rgba(99, 102, 241, 0.14);
    border: 1px solid rgba(99, 102, 241, 0.38);
    border-radius: 9px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 13px;
    color: #a5b4fc;
    font-family: inherit;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.burger-btn:hover {
    background: rgba(99, 102, 241, 0.26);
    border-color: rgba(99, 102, 241, 0.6);
    color: #fff;
}

.burger-btn .burger-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.burger-lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.burger-lines span {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.28s ease, opacity 0.28s ease;
}

.burger-btn.open .burger-lines span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger-btn.open .burger-lines span:nth-child(2) { opacity: 0; }
.burger-btn.open .burger-lines span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.burger-arrow {
    transition: transform 0.28s ease;
    opacity: 0.7;
}

.burger-btn.open .burger-arrow {
    transform: rotate(180deg);
}

/* ─── Activity Dropdown ──────────────────────────────────────── */
.nav-dropdown {
    background: var(--dropdown-bg);
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 0px solid rgba(99, 102, 241, 0.35);
}

.nav-dropdown.open {
    max-height: 500px;
    border-bottom-width: 2px;
}

.activity-link {
    color: #c4b5fd;
    text-decoration: none;
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 500;
    border-bottom: 1px solid rgba(99, 102, 241, 0.12);
    border-right: 1px solid rgba(99, 102, 241, 0.12);
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.activity-link:nth-child(2n) { border-right: none; }
.activity-link:nth-last-child(-n+2) { border-bottom: none; }

.activity-link:hover {
    background: rgba(99, 102, 241, 0.18);
    color: #fff;
}

.activity-link.active {
    background: rgba(99, 102, 241, 0.22);
    color: #fff;
}

.activity-num {
    background: rgba(99, 102, 241, 0.35);
    color: #a5b4fc;
    min-width: 22px;
    height: 22px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.activity-link:hover .activity-num,
.activity-link.active .activity-num {
    background: var(--accent);
    color: #fff;
}

/* ─── Layout ─────────────────────────────────────────────────── */
.container {
    width: 92%;
    max-width: 1100px;
    margin: 32px auto;
}

/* ─── Cards ──────────────────────────────────────────────────── */
.card {
    background: var(--card-bg);
    padding: 28px 30px;
    border-radius: 14px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px var(--shadow);
    border: 1px solid var(--border);
    transition: box-shadow 0.2s;
}

.card:hover {
    box-shadow: 0 8px 32px rgba(79, 70, 229, 0.18);
}

.card h2 {
    margin-top: 0;
    color: var(--text);
    font-size: 1.25rem;
    font-weight: 700;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--accent-light);
    margin-bottom: 16px;
}

/* ─── Demo Area ──────────────────────────────────────────────── */
.demo-area {
    background: var(--accent-light);
    border: 1px solid var(--border);
    padding: 20px;
    border-radius: 10px;
    margin: 16px 0;
}

/* ─── Buttons ────────────────────────────────────────────────── */
.source-btn,
.btn {
    border: none;
    background: var(--accent);
    color: white;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    margin: 5px 4px 5px 0;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
}

.source-btn:hover,
.btn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
}

/* ─── Source Code Block ──────────────────────────────────────── */
.source-code {
    background: var(--code-bg);
    color: #e2e8f0;
    padding: 20px;
    border-radius: 10px;
    overflow-x: auto;
    margin-top: 12px;
    font-size: 0.85rem;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

/* ─── Tables ─────────────────────────────────────────────────── */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 0.9rem;
}

table th,
table td {
    border: 1px solid var(--border);
    padding: 12px 14px;
    text-align: left;
}

table th {
    background: linear-gradient(135deg, var(--header-from), var(--header-to));
    color: white;
    font-weight: 600;
    letter-spacing: 0.3px;
}

table tr:nth-child(even) td {
    background: var(--accent-light);
}

table tr:hover td {
    background: #ddd6fe;
}

/* ─── Form Inputs ────────────────────────────────────────────── */
input,
select,
textarea {
    width: 100%;
    padding: 11px 13px;
    margin-top: 5px;
    margin-bottom: 14px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--text);
    background: #fafbff;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
    background: #fff;
}

label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* ─── Alerts ─────────────────────────────────────────────────── */
.alert {
    padding: 13px 16px;
    border-radius: 9px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    font-weight: 500;
}

.alert-success {
    background: var(--success-bg);
    color: var(--success-text);
    border-left: 4px solid #10b981;
}

.alert-error {
    background: var(--error-bg);
    color: var(--error-text);
    border-left: 4px solid #ef4444;
}

/* ─── Gallery Grid ───────────────────────────────────────────── */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.gallery-item {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px;
    transition: box-shadow 0.2s, transform 0.2s;
}

.gallery-item:hover {
    box-shadow: 0 6px 20px var(--shadow);
    transform: translateY(-2px);
}

/* ─── Footer ─────────────────────────────────────────────────── */
.footer {
    text-align: center;
    background: linear-gradient(135deg, var(--header-from) 0%, var(--header-to) 100%);
    color: #c4b5fd;
    padding: 22px;
    margin-top: 48px;
    font-size: 0.875rem;
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 700px) {
    .top-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px 24px;
    }

    .top-header h1 { font-size: 1.3rem; }

    .nav-link.active::after { display: none; }

    .nav-links { gap: 0; }

    .nav-link { font-size: 12px; padding: 6px 10px; }

    .nav-dropdown { grid-template-columns: 1fr; }

    .activity-link:nth-child(2n) { border-right: 1px solid rgba(99, 102, 241, 0.12); }
    .activity-link:nth-last-child(-n+2) { border-bottom: 1px solid rgba(99, 102, 241, 0.12); }
    .activity-link:last-child { border-bottom: none; }

    .form-row { grid-template-columns: 1fr; }

    .container { width: 95%; }

    .card { padding: 20px 18px; }
}