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

/* Layout — 方案 A：顶栏 + 侧栏深色科技风，内容区保持浅色 */
.layout { display: flex; flex-direction: column; height: 100vh; }

/* ========= Header ========= */
.layout-header {
  height: 56px; padding: 0 20px; flex-shrink: 0; z-index: 1002;
  display: flex; align-items: center;
  background: linear-gradient(90deg, #0a0e27 0%, #0f1838 100%);
  border-bottom: 1px solid rgba(0, 212, 255, 0.18);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  position: relative;
}
.layout-header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,0.6), rgba(124,92,255,0.6), transparent);
}
.header-logo { width: 200px; display: flex; align-items: center; gap: 10px; letter-spacing: 1px; }
.header-logo-icon {
  width: 30px; height: 30px; border-radius: 7px;
  background: linear-gradient(135deg, #00d4ff 0%, #7c5cff 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 16px;
  box-shadow: 0 0 14px rgba(0, 212, 255, 0.45);
}
.header-logo-text {
  font-size: 16px; font-weight: 700; letter-spacing: 2px;
  background: linear-gradient(90deg, #00d4ff, #7c5cff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.header-user {
  cursor: pointer; color: #c5d2ec; font-size: 14px;
  display: flex; align-items: center; padding: 4px 10px; border-radius: 6px;
  transition: all .2s;
}
.header-user:hover { background: rgba(0, 212, 255, 0.08); color: #00d4ff; }

/* ========= Body ========= */
.layout-body { display: flex; flex: 1; overflow: hidden; }

/* ========= Sidebar ========= */
.layout-sidebar {
  width: 200px; flex-shrink: 0; transition: width .3s; overflow-y: auto;
  background: linear-gradient(180deg, #0a0e27 0%, #0f1838 100%);
  border-right: 1px solid rgba(0, 212, 255, 0.12);
  position: relative;
}
.layout-sidebar.collapsed { width: 64px; }
.layout-sidebar::-webkit-scrollbar { width: 4px; }
.layout-sidebar::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.25); border-radius: 2px; }

/* el-menu —— 科技深色定制 */
.el-menu.tech-menu { border-right: none !important; background: transparent !important; }
.el-menu.tech-menu .el-menu-item,
.el-menu.tech-menu .el-sub-menu__title {
  color: #8b9bbd !important; background: transparent !important;
  height: 48px; line-height: 48px; transition: all .25s;
}
.el-menu.tech-menu .el-menu-item .el-icon,
.el-menu.tech-menu .el-sub-menu__title .el-icon { color: #5e7099; }
.el-menu.tech-menu .el-menu-item:hover,
.el-menu.tech-menu .el-sub-menu__title:hover {
  color: #e6edf7 !important; background: rgba(0, 212, 255, 0.06) !important;
}
.el-menu.tech-menu .el-menu-item:hover .el-icon,
.el-menu.tech-menu .el-sub-menu__title:hover .el-icon { color: #00d4ff; }
.el-menu.tech-menu .el-menu-item.is-active {
  color: #00d4ff !important;
  background: linear-gradient(90deg, rgba(0,212,255,0.18) 0%, rgba(0,212,255,0) 100%) !important;
  border-left: 2px solid #00d4ff;
  box-shadow: inset 0 0 12px rgba(0, 212, 255, 0.1);
}
.el-menu.tech-menu .el-menu-item.is-active .el-icon { color: #00d4ff; }
.el-menu.tech-menu .el-sub-menu.is-active > .el-sub-menu__title { color: #e6edf7 !important; }
.el-menu.tech-menu .el-sub-menu .el-menu { background: rgba(0, 0, 0, 0.25) !important; }
.el-menu.tech-menu .el-sub-menu .el-menu-item { padding-left: 48px !important; }

.layout-content-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.breadcrumb-bar {
  height: 40px; padding: 0 20px; flex-shrink: 0; font-size: 13px;
  display: flex; align-items: center;
  background: #fff; color: #606266;
  border-bottom: 1px solid #e6e6e6;
}
.breadcrumb-bar .el-icon { color: #909399; }
.breadcrumb-bar .el-icon:hover { color: #00d4ff; }
.layout-content { flex: 1; padding: 16px; overflow-y: auto; background: #f5f7fa; }

/* sidebar 旧样式占位（兼容） */
.sidebar-toggle { height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #5e7099; }
.sidebar-toggle:hover { color: #00d4ff; }

/* ========= 主题色覆盖：让 primary 按钮/链接呼应科技色 ========= */
.layout .el-button--primary:not(.is-text):not(.is-link) {
  background: linear-gradient(90deg, #00d4ff 0%, #7c5cff 100%);
  border: none;
  box-shadow: 0 2px 10px rgba(0, 212, 255, 0.25);
  transition: all .2s;
}
.layout .el-button--primary:not(.is-text):not(.is-link):hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 16px rgba(0, 212, 255, 0.4);
}
.layout .el-button--primary.is-disabled,
.layout .el-button--primary.is-disabled:hover { filter: grayscale(0.5) brightness(0.85); }

/* Login —— 科技感深色风格（背景图） */
.login-page {
  position: relative; min-height: 100vh; overflow: hidden;
  background: #0a0e27 url('/static/merchant/assets/login-bg.png') center center / cover no-repeat;
  color: #e6edf7;
}
/* 暗化叠层，让卡片更突出 */
.login-page::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(10,14,39,0.35) 0%, rgba(10,14,39,0.15) 50%, rgba(10,14,39,0.45) 100%);
}
/* 轻微浮动光斑（弱化，避免与图叠加冲突） */
.login-orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; opacity: 0.35; }
.login-orb.o1 { width: 320px; height: 320px; background: #00d4ff; top: 12%; left: 8%; animation: float1 14s ease-in-out infinite; }
.login-orb.o2 { width: 300px; height: 300px; background: #7c5cff; bottom: 10%; right: 12%; animation: float2 16s ease-in-out infinite; }
.login-orb.o3 { display: none; }
@keyframes float1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(30px,20px) scale(1.08); } }
@keyframes float2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-25px,-30px) scale(1.06); } }

.login-brand {
  position: absolute; top: 28px; left: 36px; display: flex; align-items: center; gap: 10px; z-index: 2;
}
.login-brand .brand-logo {
  width: 36px; height: 36px; border-radius: 8px;
  background: linear-gradient(135deg, #00d4ff 0%, #7c5cff 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 18px;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
}
.login-brand .brand-name {
  font-size: 18px; font-weight: 700; letter-spacing: 2px;
  background: linear-gradient(90deg, #00d4ff, #7c5cff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.login-wrap {
  position: relative; z-index: 1; min-height: 100vh;
  display: flex; align-items: center; justify-content: center; padding: 60px 20px 80px;
}
.login-card {
  width: 440px; padding: 44px 40px 32px; position: relative;
  background: rgba(15, 24, 56, 0.55);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 212, 255, 0.25);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 80px rgba(0, 212, 255, 0.15);
}
/* 边角发光装饰 */
.login-card::before, .login-card::after {
  content: ''; position: absolute; width: 32px; height: 32px; pointer-events: none;
  border-color: #00d4ff;
}
.login-card::before {
  top: -1px; left: -1px;
  border-top: 2px solid; border-left: 2px solid;
  border-top-left-radius: 14px;
}
.login-card::after {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid; border-right: 2px solid;
  border-bottom-right-radius: 14px;
  border-color: #7c5cff;
}

.login-title {
  font-size: 28px; font-weight: 700; margin-bottom: 8px;
  background: linear-gradient(90deg, #fff 0%, #00d4ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: 2px;
}
.login-subline { font-size: 13px; color: #8b9bbd; margin-bottom: 28px; letter-spacing: 1px; }

.login-input.el-input .el-input__wrapper {
  background: rgba(255, 255, 255, 0.04) !important;
  box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.2) inset !important;
  height: 46px; border-radius: 6px;
  transition: all .25s;
}
.login-input.el-input .el-input__wrapper:hover {
  box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.5) inset !important;
}
.login-input.el-input .el-input__wrapper.is-focus {
  background: rgba(0, 212, 255, 0.06) !important;
  box-shadow:
    0 0 0 1px #00d4ff inset,
    0 0 16px rgba(0, 212, 255, 0.4) !important;
}
.login-input.el-input .el-input__inner { color: #e6edf7 !important; }
.login-input.el-input .el-input__inner::placeholder { color: #5a6a8e !important; }

.login-card .el-button {
  background: rgba(255,255,255,0.04); border-color: rgba(0,212,255,0.3); color: #e6edf7;
}
.login-card .el-button:hover {
  background: rgba(0,212,255,0.08); border-color: #00d4ff; color: #00d4ff;
}

.login-btn {
  width: 100%; height: 46px; font-size: 15px; letter-spacing: 6px; margin-top: 6px;
  background: linear-gradient(90deg, #00d4ff 0%, #7c5cff 100%) !important;
  border: none !important; color: #fff !important;
  box-shadow: 0 4px 20px rgba(0, 212, 255, 0.35);
  transition: all .25s;
}
.login-btn:hover {
  filter: brightness(1.15);
  box-shadow: 0 6px 28px rgba(0, 212, 255, 0.55);
}

.login-actions {
  display: flex; justify-content: space-between; margin-top: 16px; font-size: 13px;
}
.login-actions a {
  color: #00d4ff; text-decoration: none; cursor: pointer; transition: all .2s;
  text-shadow: 0 0 8px rgba(0,212,255,0.4);
}
.login-actions a:hover { color: #7c5cff; }

.login-agreement { font-size: 12px; color: #8b9bbd; margin: 16px 0 12px; }
.login-agreement a { color: #00d4ff; text-decoration: none; }
.login-agreement .el-checkbox__label { color: #8b9bbd !important; }
.login-agreement .el-checkbox__inner {
  background: transparent; border-color: rgba(0,212,255,0.4);
}
.login-agreement .el-checkbox.is-checked .el-checkbox__inner {
  background: #00d4ff; border-color: #00d4ff;
}

.login-footer {
  position: absolute; left: 0; right: 0; bottom: 16px; text-align: center;
  color: #5a6a8e; font-size: 12px; letter-spacing: 1px;
}

.login-merchant-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.login-merchant-item {
  border: 1px solid rgba(0, 212, 255, 0.2); border-radius: 8px; padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  cursor: pointer; transition: all .25s;
}
.login-merchant-item:hover { border-color: rgba(0, 212, 255, 0.6); background: rgba(0, 212, 255, 0.05); }
.login-merchant-item.active {
  border-color: #00d4ff;
  background: rgba(0, 212, 255, 0.1);
  box-shadow: 0 0 16px rgba(0, 212, 255, 0.25);
}
.login-merchant-item .m-name { font-weight: 600; color: #e6edf7; }
.login-merchant-item .m-meta { color: #8b9bbd; font-size: 12px; margin-top: 4px; }

/* Page */
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.page-title { font-size: 17px; font-weight: 600; color: #303133; }
.card-box { background: #fff; border-radius: 4px; padding: 20px; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 16px; }
.stat-card { background: #fff; border-radius: 8px; padding: 20px; }

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