*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#f0f2f5;color:#303133;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
#app{min-height:100vh}

/* ===== Login ===== */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:linear-gradient(135deg,#f0f2f5 0%,#e8eef7 50%,#f5f7fa 100%);
}
.login-card{width:100%;max-width:400px;border-radius:12px;padding:12px 8px 8px}
.login-brand{text-align:center;margin-bottom:8px}
.login-brand h2{margin:12px 0 4px;font-size:22px;font-weight:700;color:#303133}
.login-brand p{margin:0;color:#909399;font-size:13px}
.brand-avatar{
  background:linear-gradient(135deg,#409eff,#1d4ed8)!important;
  color:#fff!important;font-weight:800;font-size:28px;
}
.code-row{display:flex;gap:8px;width:100%}
.code-row .el-input{flex:1}
.full-btn{width:100%}
.login-hint{text-align:center;color:#a8abb2;font-size:12px;margin-top:14px}

/* ===== Layout ===== */
.layout{min-height:100vh;background:#f0f2f5}
.aside{
  background:#001529!important;
  min-height:100vh;
  transition:width .2s ease;
  overflow:hidden;
  box-shadow:2px 0 8px rgba(0,21,41,.15);
  z-index:20;
}
.aside-logo{
  height:56px;display:flex;align-items:center;gap:10px;
  padding:0 16px;cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:#002140;
}
.logo-mark{
  width:32px;height:32px;border-radius:8px;flex-shrink:0;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#409eff,#1d4ed8);
  color:#fff;font-weight:800;font-size:16px;
}
.logo-text{
  color:#fff;font-weight:700;font-size:15px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.aside-scroll{height:calc(100vh - 56px)}
.aside .el-menu{border-right:0!important}
.aside .el-menu-item{height:50px;line-height:50px}
.aside .el-menu-item.is-active{
  background:linear-gradient(90deg,#1890ff 0%,#096dd9 100%)!important;
  color:#fff!important;
}
.aside .el-menu-item:hover{background:rgba(255,255,255,.08)!important}
.aside .el-menu-item .el-icon{font-size:18px;margin-right:8px}

.right-wrap{min-width:0;flex:1;background:#f0f2f5}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  background:#fff;border-bottom:1px solid #ebeef5;
  padding:0 16px;box-shadow:0 1px 4px rgba(0,21,41,.04);
  position:sticky;top:0;z-index:10;
}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:12px}
.user-entry{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  color:#606266;outline:none;
}
.user-av{
  background:linear-gradient(135deg,#409eff,#1d4ed8)!important;
  color:#fff!important;font-size:13px;font-weight:700;
}
.user-mail{
  max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:13px;
}
.main{padding:16px 18px 28px;min-height:calc(100vh - 56px)}

/* ===== Content ===== */
.mb16{margin-bottom:16px}
.mt8{margin-top:8px}
.mr8{margin-right:8px}
.stat-card{border-radius:10px}
.stat-label{color:#909399;font-size:13px}
.stat-num{font-size:24px;font-weight:700;margin-top:8px;color:#303133;letter-spacing:.3px}
.stat-num.ok{color:#67c23a}
.stat-num.warn{color:#e6a23c}
.stat-num.danger{color:#f56c6c}
.stat-num.primary{color:#409eff}

.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.item-card{border-radius:10px;height:100%}
.item-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.item-name{font-size:16px;font-weight:700;color:#303133}
.item-code{color:#909399;font-size:12px;margin-top:2px}
.meta{color:#909399;font-size:12px;line-height:1.6;margin-top:4px}
.photos{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.thumb{width:56px;height:56px;border-radius:6px;border:1px solid #ebeef5;overflow:hidden}
.actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.event-card{border-radius:8px}
.event-row{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.card-head{display:flex;align-items:center;justify-content:space-between}

/* Element tweaks */
.el-card{border-radius:10px}
.el-table{border-radius:8px;overflow:hidden}
.el-upload--picture-card{width:88px;height:88px}
.el-upload-list--picture-card .el-upload-list__item{width:88px;height:88px}

@media (max-width:768px){
  .aside{position:fixed;left:0;top:0;bottom:0}
  .user-mail{display:none}
  .main{padding:12px}
  .right-wrap{margin-left:0}
}