/* ============================================================
   仿 TikTok 营销管理系统 —— UI（参照原站真实设计系统复刻）
   主色 #7a5ef5 / 深 #5030e5 / 浅 hover rgba(80,48,229,.08)
   青色强调 #20b2aa / #00c2bf
   浅色侧边栏渐变 #fefdff -> #f2effe，圆角菜单(8px)+青色小圆点
   卡片圆角4px、边框 #e6ebf5
   ============================================================ */
:root {
  --theme: #7a5ef5;
  --theme-dark: #5030e5;
  --theme-soft: rgba(80, 48, 229, 0.08);
  --teal: #20b2aa;
  --teal2: #00c2bf;
  --card-border: #e6ebf5;
}

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

/* 全局：Element 主色覆盖为 #7a5ef5 */
.el-button--primary {
  background-color: var(--theme) !important;
  border-color: var(--theme) !important;
}
.el-button--primary:hover,
.el-button--primary:focus {
  background-color: #8e75f7 !important;
  border-color: #8e75f7 !important;
}
.el-button--primary.is-plain {
  background: #f2effe !important;
  color: var(--theme) !important;
  border-color: #c9bdf9 !important;
}
.el-button--cyan {
  background-color: var(--teal) !important;
  border-color: var(--teal) !important;
  color: #fff !important;
}
.el-link--primary,
.el-radio__input.is-checked + .el-radio__label,
.el-checkbox__input.is-checked + .el-checkbox__label { color: var(--theme) !important; }
.el-radio__input.is-checked .el-radio__inner,
.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: var(--theme) !important;
  border-color: var(--theme) !important;
}
.el-switch.is-checked .el-switch__core { border-color: var(--theme) !important; background-color: var(--theme) !important; }
.el-input__inner:focus, .el-textarea__inner:focus { border-color: var(--theme) !important; }
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: var(--theme) !important;
}
.el-progress-bar__inner { background-color: var(--theme); }
.el-tag--primary { background: #f2effe; border-color: #d7ccf9; color: var(--theme); }
a { color: var(--theme); }

/* ============ 登录页（参照原站：左品牌 + 右登录卡） ============ */
.login-wrap {
  height: 100%;
  display: flex;
  background: linear-gradient(120deg, #6e55dd 0%, #7a5ef5 45%, #9a7ff8 100%);
  position: relative;
  overflow: hidden;
}
.login-wrap .blob {
  position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.08);
}
.login-wrap .blob.b1 { width: 560px; height: 560px; top: -180px; left: -120px; }
.login-wrap .blob.b2 { width: 380px; height: 380px; bottom: -140px; right: 18%; background: rgba(255,255,255,0.06); }
.login-wrap .blob.b3 { width: 200px; height: 200px; top: 18%; right: 8%; background: rgba(0,194,191,0.18); }

.login-brand {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 8% ; color: #fff; z-index: 2;
}
.login-brand .b-logo {
  width: 64px; height: 64px; border-radius: 16px;
  background: rgba(255,255,255,0.16); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 800; margin-bottom: 26px;
}
.login-brand h1 { font-size: 40px; margin: 0 0 14px; letter-spacing: 1px; }
.login-brand .tagline { font-size: 17px; opacity: 0.85; letter-spacing: 4px; }
.login-brand .feat { margin-top: 40px; display: flex; gap: 26px; }
.login-brand .feat .fi { display: flex; align-items: center; gap: 8px; font-size: 14px; opacity: 0.9; }
.login-brand .feat .fi i { color: #c6f5f4; font-size: 18px; }

.login-panel {
  width: 460px;
  background: #fff;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 50px; z-index: 2;
  box-shadow: -10px 0 50px rgba(0,0,0,0.15);
}
.login-panel .lp-title { font-size: 24px; font-weight: 700; color: #2c2c3a; margin-bottom: 6px; }
.login-panel .lp-sub { color: #909399; font-size: 13px; margin-bottom: 30px; }
.captcha-row { display: flex; gap: 10px; }
.captcha-img {
  width: 120px; height: 40px; border: 1px solid #dcdfe6; border-radius: 4px;
  cursor: pointer; flex-shrink: 0;
}
.lp-foot { margin-top: 8px; display: flex; justify-content: space-between; align-items: center; }
.login-tip { margin-top: 18px; font-size: 12px; color: #c0c4cc; text-align: center; }
.login-lang { position: absolute; top: 22px; right: 28px; z-index: 5; }

/* ============ 主框架 ============ */
.layout { height: 100%; }
/* el-container 仅在含 el-header/el-footer 时才自动竖向；我们用 div 当顶栏，
   需手动让右侧主区域竖向堆叠：顶栏 → 标签页 → 内容（否则会横向并排=排版错乱） */
.layout > .el-container {
  flex-direction: column;
  min-width: 0; /* 防止 flex 子项撑破，表格才能正常溢出滚动 */
  overflow: hidden;
}

/* 侧边栏：浅色渐变（原站真实样式） */
.aside {
  background: linear-gradient(180deg, #fefdff 0%, #fefdff 30%, #f2effe 100%) !important;
  height: 100%;
  border-right: 1px solid #efeafc;
}
.logo-bar {
  height: 60px; display: flex; align-items: center; gap: 10px;
  padding: 0 18px; font-size: 16px; font-weight: 700; color: var(--theme-dark);
  white-space: nowrap; border-bottom: 1px solid #efeafc;
}
.logo-bar .dot {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, var(--theme), #9a7ff8);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: #fff; box-shadow: 0 4px 10px rgba(122,94,245,0.4);
}
/* 侧边菜单：透明底 + 圆角 item */
.aside .el-menu { border-right: none !important; background: transparent !important; padding-top: 10px; }
.aside .el-menu-item {
  height: 44px !important; line-height: 44px !important;
  margin: 0 12px 6px !important; border-radius: 8px !important;
  color: #5b5670 !important; font-size: 15px;
}
.aside .el-menu-item i { color: #8b86a3; }
.aside .el-menu-item:hover { background: #f4f4f5 !important; }
.aside .el-menu-item.is-active {
  background: var(--theme-soft) !important; color: var(--theme) !important; font-weight: 600;
}
.aside .el-menu-item.is-active i { color: var(--theme) !important; }
/* 激活项左侧青色小圆点（原站特征） */
.aside .el-menu-item.is-active::before {
  content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--teal2);
}

/* 顶栏 */
.navbar {
  height: 60px; background: #fff; border-bottom: 1px solid #ebeef5;
  display: flex; align-items: center; justify-content: space-between; padding: 0 22px;
}
.navbar .nb-left { display: flex; align-items: center; gap: 10px; }
.navbar .nb-left .crumb { color: #97a3b4; font-size: 14px; }
.navbar .nb-left .crumb b { color: #303133; font-weight: 600; }
.navbar .right { display: flex; align-items: center; gap: 18px; }
.online-badge { font-size: 13px; color: var(--teal); display: flex; align-items: center; gap: 6px; }
.online-badge .pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--teal);
  box-shadow: 0 0 0 0 rgba(32,178,170,0.6); animation: pulse 1.6s infinite;
}
.auth-pill {
  background: #f2effe; color: var(--theme); font-size: 12px;
  padding: 3px 10px; border-radius: 20px;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(32,178,170,0.6); }
  70% { box-shadow: 0 0 0 8px rgba(32,178,170,0); }
  100% { box-shadow: 0 0 0 0 rgba(32,178,170,0); }
}

/* 标签页 tags-view（原站特征） */
.tags-view {
  height: 38px; background: #fff; border-bottom: 1px solid #ebeef5;
  display: flex; align-items: center; gap: 6px; padding: 0 16px; overflow-x: auto;
}
.tags-view .tag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 12px; font-size: 12px; cursor: pointer;
  border: 1px solid #e4e7ed; border-radius: 3px; color: #5b5670; background: #fff;
}
.tags-view .tag.active { background: var(--theme); color: #fff; border-color: var(--theme); }
.tags-view .tag.active::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; margin-right: 2px;
}

.main-content { padding: 16px; height: calc(100% - 98px); overflow: auto; background: #f5f6fa; }

/* 卡片：圆角4px 边框 #e6ebf5（原站） */
.page-card { background: #fff; border-radius: 6px; padding: 18px; border: 1px solid var(--card-border); }
.page-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.page-title { font-size: 16px; font-weight: 600; position: relative; padding-left: 12px; }
.page-title::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 16px; border-radius: 2px; background: var(--theme);
}

/* 仪表盘卡片 */
.stat-row { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.stat-card {
  flex: 1; min-width: 180px; background: #fff; border-radius: 6px; padding: 20px;
  display: flex; align-items: center; gap: 16px; border: 1px solid var(--card-border);
  transition: 0.25s;
}
.stat-card:hover { box-shadow: 0 6px 20px rgba(122,94,245,0.12); transform: translateY(-2px); }
.stat-icon {
  width: 50px; height: 50px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff;
}
.stat-num { font-size: 28px; font-weight: 700; line-height: 1; }
.stat-label { color: #909399; font-size: 13px; margin-top: 7px; }

.foster-tip {
  background: #f2effe; border-left: 3px solid var(--theme);
  padding: 10px 14px; border-radius: 4px; color: var(--theme-dark); font-size: 13px; margin-bottom: 18px;
}
/* 设备选择区移到表单下方后变为整行宽度，列表用网格多列铺满，避免大片空白 */
.stack-col { margin-top: 16px; }
.dev-pick { max-height: 300px; overflow: auto; border: 1px solid #ebeef5; border-radius: 6px; padding: 4px 14px; }
.dev-pick .el-checkbox-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0 20px;
}
.dev-pick .dev-item { padding: 8px 2px; border-bottom: 1px solid #f5f5f5; }

/* ============ 真实系统结构复刻：密集筛选/工具栏/模块卡 ============ */
.dense-query {
  background: #fff;
  border: 1px solid #f1effc;
  border-radius: 4px;
  padding: 12px 12px 4px;
  margin-bottom: 10px;
}
.dense-query .el-form-item {
  margin-right: 12px;
  margin-bottom: 10px;
}
.dense-query .el-form-item__label {
  color: #606266;
  font-size: 12px;
}
.dense-query .el-input,
.dense-query .el-select,
.dense-query .el-date-editor {
  width: 168px;
}
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 12px;
}
.module-card {
  border-color: #eee8ff !important;
}
.module-card p {
  color: #909399;
  font-size: 12px;
  margin: 8px 0 0;
}