* { margin: 0; padding: 0; box-sizing: border-box; }
html, body, #app { height: 100%; }

/* Layout */
.layout { display: flex; height: 100vh; }
.layout-sidebar { width: 220px; background: #304156; overflow-y: auto; flex-shrink: 0; }
.layout-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.layout-header { height: 50px; background: #fff; border-bottom: 1px solid #e6e6e6; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; flex-shrink: 0; }
.layout-content { flex: 1; padding: 20px; overflow-y: auto; background: #f0f2f5; }

/* Sidebar */
.sidebar-logo { height: 50px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; font-weight: 700; background: #263445; letter-spacing: 2px; }
.el-menu { border-right: none !important; }

/* Login */
.login-container { display: flex; align-items: center; justify-content: center; height: 100vh; background: linear-gradient(135deg, #1d2b3a 0%, #2c3e50 100%); }
.login-card { width: 420px; padding: 40px 36px; background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,.12); }
.login-title { font-size: 22px; font-weight: 700; text-align: center; margin-bottom: 30px; color: #303133; }

/* Page */
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.page-title { font-size: 18px; font-weight: 600; color: #303133; }

/* Utility */
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mb-16 { margin-bottom: 16px; }
.text-right { text-align: right; }