:root {
    --bg: #0b0f0d;
    --panel: #111915;
    --border: #1d2a22;
    --text: #e8efe9;
    --muted: #8ca195;
    --accent: #3bb273;
    --accent-strong: #2f8c5c;
    --radius: 10px;
    --shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}

.layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 20px;
    width: 100%;
    max-width: none;
    margin: 0 0 40px;
    padding: 16px 24px 0;
}

.sidebar {
    background: linear-gradient(180deg, rgba(20, 28, 24, 0.9), rgba(18, 26, 22, 0.95));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    align-self: start;
}

.logo-block {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
    column-gap: 8px;
    align-items: center;
}

.logo-mark {
    width: 36px;
    height: 36px;
    margin-bottom: 0;
    grid-row: 1 / span 2;
}
.logo-mark svg { width: 100%; height: 100%; display: block; }

.menu {
    display: grid;
    gap: 8px;
}

.menu-item {
    text-align: left;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: rgba(20, 26, 22, 0.92);
    color: var(--text);
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.menu-item:hover { border-color: var(--accent); box-shadow: 0 6px 16px rgba(59, 178, 115, 0.18); }
.menu-item:active { transform: translateY(1px); }
.menu-item.active {
    border-color: var(--accent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 22%, transparent));
}

.menu-item .icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-strong);
    flex-shrink: 0;
}
.menu-item .icon svg { width: 100%; height: 100%; display: block; }

@media (max-width: 640px) {
    .layout { grid-template-columns: 1fr; padding: 12px 16px 0; }
    .sidebar { position: relative; top: 0; }
}

/* Light theme overrides for sidebar and menu items */
body[data-theme="light"] .sidebar {
    background: linear-gradient(180deg, #ffffff, #f6f7f2);
    border-color: #e2e6dd;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}
body[data-theme="light"] .menu-item {
    background: #ffffff;
    border-color: #e4e7df;
}
body[data-theme="light"] .menu-item:hover {
    box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 18%, transparent);
}
body[data-theme="light"] .menu-item.active {
    background: color-mix(in srgb, var(--accent) 16%, #ffffff);
    border-color: var(--accent);
}