:root {
    --sidebar-width: 250px;
    --primary-color: #2c3e50;
    --accent-color: #3498db;
    --bg-light: #f4f7f6;
}

body { font-family: 'Segoe UI', sans-serif; margin: 0; display: flex; height: 100vh; overflow: hidden; }

/* Sidebar */
.sidebar { width: var(--sidebar-width); background: var(--primary-color); color: white; display: flex; flex-direction: column; }
.sidebar-header { padding: 20px; background: #1a252f; text-align: center; font-weight: bold; }
.sidebar-menu { list-style: none; padding: 0; margin: 0; flex-grow: 1; }
.sidebar-menu a { display: block; padding: 15px; color: #ecf0f1; text-decoration: none; border-left: 4px solid transparent; }
.sidebar-menu a:hover { background: #34495e; border-left-color: var(--accent-color); }

/* Main Area */
.main-wrapper { flex-grow: 1; display: flex; flex-direction: column; background: var(--bg-light); }

/* Tab Bar */
.tab-bar { display: flex; background: #d1d5da; padding: 5px 5px 0; gap: 3px; border-bottom: 1px solid #aaa; }
.tab { 
    padding: 8px 15px; background: #babbbd; border-radius: 5px 5px 0 0; 
    cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 13px; transition: 0.2s;
}
.tab.active { background: var(--bg-light); font-weight: bold; border: 1px solid #aaa; border-bottom: none; }
.tab .close-tab { font-size: 11px; color: #666; }
.tab .close-tab:hover { color: #c0392b; }

/* Tab Contents */
#tab-container { flex-grow: 1; position: relative; overflow-y: auto; }
.tab-content { display: none; padding: 20px; animation: fadeIn 0.3s; }
.tab-content.active { display: block; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin-bottom: 20px; }

        .sidebar-menu {
            flex: 1;
            padding: 10px;
        }

        .menu-item {
            padding: 15px;
            margin: 5px 0;
            display: flex;
            align-items: center;
            cursor: pointer;
            border-radius: 8px;
            transition: 0.2s;
        }

        .menu-item:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .menu-item i {
            margin-right: 15px;
            width: 20px;
        }

        /* Main Content & Tabs */
        .main-container {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .tab-bar {
            background: white;
            display: flex;
            border-bottom: 1px solid #ddd;
            padding: 5px 10px 0;
        }

        .tab {
            padding: 10px 20px;
            background: #e5e7eb;
            margin-right: 5px;
            border-radius: 8px 8px 0 0;
            cursor: pointer;
            display: flex;
            align-items: center;
            font-size: 0.9rem;
            border: 1px solid transparent;
        }

        .tab.active {
            background: white;
            border: 1px solid #ddd;
            border-bottom: 2px solid var(--primary-color);
            color: var(--primary-color);
            font-weight: bold;
        }

        .tab i.close-tab {
            margin-left: 10px;
            font-size: 0.8rem;
            color: #9ca3af;
        }

        .tab i.close-tab:hover {
            color: #ef4444;
        }

        .content-area {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            background: white;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
            animation: fadeIn 0.3s;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(5px); }
            to { opacity: 1; transform: translateY(0); }
        }