/* ============================================================
   灵芒智能 · 数据平台 · 视觉方向 A：顶部导航 + 浅色卡片流 + 灵芒绿渐变
   ============================================================ */

:root {
  /* 品牌色 */
  --lm-green-700: #047857;
  --lm-green-600: #10b981;
  --lm-green-500: #14c08a;
  --lm-green-400: #34d399;
  --lm-green-50:  #ecfdf5;
  --lm-grad: linear-gradient(135deg, #10b981 0%, #34d399 100%);

  /* 中性色 */
  --lm-bg:      #f5f8f7;
  --lm-surface: #ffffff;
  --lm-text:    #18302a;
  --lm-text-2:  #5b6f68;
  --lm-muted:   #8a9d96;
  --lm-border:  #e7efeb;

  /* Element Plus 主色覆盖（按钮 / 标签 / 分页 / 开关 / 选中态全部变绿） */
  --el-color-primary:         #10b981;
  --el-color-primary-light-3: #34d399;
  --el-color-primary-light-5: #6ee7b7;
  --el-color-primary-light-7: #a7f3d0;
  --el-color-primary-light-8: #d1fae5;
  --el-color-primary-light-9: #ecfdf5;
  --el-color-primary-dark-2:  #059669;
  --el-border-radius-base: 8px;
}

html, body, #app {
  height: 100%; margin: 0; padding: 0;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "LXGW WenKai", sans-serif;
  color: var(--lm-text);
}

/* ============================ 整体布局：纵向（顶栏在上） ============================ */
.layout { height: 100vh; display: flex; flex-direction: column; background: var(--lm-bg); }

/* ============================ 顶部导航栏 ============================ */
.topnav {
  height: 62px; flex-shrink: 0;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--lm-border);
  box-shadow: 0 1px 12px rgba(16,185,129,0.05);
  display: flex; align-items: center; gap: 22px;
  padding: 0 24px; position: sticky; top: 0; z-index: 100;
}
.nav-logo {
  display: flex; align-items: center; gap: 9px;
  cursor: pointer; user-select: none; flex-shrink: 0;
}
.nav-logo .dot {
  width: 24px; height: 24px; border-radius: 8px;
  background: var(--lm-grad);
  box-shadow: 0 3px 10px rgba(16,185,129,0.45);
  position: relative;
}
.nav-logo .dot::after {
  content: ''; position: absolute; inset: 6px;
  border-radius: 4px; background: rgba(255,255,255,0.85);
}
.nav-brand { font-size: 18px; font-weight: 800; letter-spacing: 1px; color: var(--lm-text); }
.nav-sub   { font-size: 12px; color: var(--lm-muted); letter-spacing: 2px; padding-top: 4px; }

.nav-menu {
  display: flex; align-items: center; gap: 2px;
  flex: 1; overflow-x: auto; scrollbar-width: none;
}
.nav-menu::-webkit-scrollbar { display: none; }
.nav-item {
  padding: 8px 15px; border-radius: 9px;
  font-size: 14px; font-weight: 500; color: var(--lm-text-2);
  cursor: pointer; white-space: nowrap;
  transition: background .18s, color .18s, box-shadow .18s, transform .18s;
}
.nav-item:hover { background: var(--lm-green-50); color: var(--lm-green-700); }
.nav-item.active {
  background: var(--lm-grad); color: #fff;
  box-shadow: 0 5px 14px rgba(16,185,129,0.32);
}
.nav-item.admin { color: #f97316; }
.nav-item.admin.active { background: linear-gradient(135deg,#f97316,#fb923c); box-shadow: 0 5px 14px rgba(249,115,22,.32); }

.nav-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; margin-left: auto; }
.nav-user {
  cursor: pointer; color: var(--lm-text-2);
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px; transition: background .18s;
}
.nav-user:hover { background: var(--lm-green-50); color: var(--lm-green-700); }

/* ============================ 内容区 ============================ */
.content { flex: 1; overflow: auto; padding: 24px 28px 40px; }
.page-head {
  margin: 2px 0 20px; font-size: 21px; font-weight: 800;
  color: var(--lm-text); display: flex; align-items: center; gap: 11px;
}
.page-head::before {
  content: ''; width: 5px; height: 21px; border-radius: 3px;
  background: var(--lm-grad);
}

/* ============================ 卡片 ============================ */
.card {
  background: var(--lm-surface); border-radius: 16px; padding: 20px 22px;
  border: 1px solid var(--lm-border);
  box-shadow: 0 1px 2px rgba(20,50,40,0.03), 0 10px 30px rgba(20,50,40,0.03);
  margin-bottom: 18px;
}
.card-title { font-size: 15px; font-weight: 700; margin-bottom: 14px; color: var(--lm-text); }

/* ============================ 统计大数字卡片 ============================ */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 18px; }
.stat-card {
  position: relative; overflow: hidden;
  background: var(--lm-surface); border-radius: 16px; padding: 22px 22px 20px;
  border: 1px solid var(--lm-border);
  box-shadow: 0 1px 2px rgba(20,50,40,0.03);
  display: flex; flex-direction: column; gap: 7px;
  transition: transform .2s, box-shadow .2s;
}
.stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--lm-grad);
}
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(16,185,129,0.12); }
.stat-card .label { color: var(--lm-muted); font-size: 13px; font-weight: 500; }
.stat-card .value { font-size: 30px; font-weight: 800; color: var(--lm-text); line-height: 1.1; letter-spacing: -0.5px; }
.stat-card .sub   { color: var(--lm-muted); font-size: 12px; }
.stat-card.primary { } .stat-card.primary .value { color: var(--lm-green-600); }
.stat-card.success::before { background: linear-gradient(135deg,#0ea5e9,#38bdf8); }
.stat-card.success .value { color: #0ea5e9; }
.stat-card.warning::before { background: linear-gradient(135deg,#f97316,#fbbf24); }
.stat-card.warning .value { color: #f97316; }
.stat-card.danger::before { background: linear-gradient(135deg,#f43f5e,#fb7185); }
.stat-card.danger .value { color: #f43f5e; }

/* ============================ 图表 / 筛选 / 杂项 ============================ */
.chart { width: 100%; height: 320px; }
.chart-sm { width: 100%; height: 260px; }

.filters { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.filters .el-input, .filters .el-select { width: 200px; }

.api-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  background: var(--lm-green-50); color: var(--lm-green-700);
  padding: 2px 7px; border-radius: 5px;
}

.bill-detail { padding: 8px; }
.bill-detail .row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--lm-border); }
.bill-detail .row .k { color: var(--lm-text-2); }
.bill-detail .row .v { color: var(--lm-text); font-weight: 600; }

.tag-cat-ai { color: #10b981; }
.tag-cat-robot { color: #0ea5e9; }
.tag-cat-tactile { color: #f97316; }

/* ============================ 数据驾驶舱（深色大屏，改成暗青绿） ============================ */
.cockpit {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(16,185,129,0.18) 0%, transparent 55%),
    linear-gradient(180deg, #06251c 0%, #021410 100%);
  color: #d1fae5; padding: 22px; border-radius: 16px; min-height: calc(100vh - 150px);
}
.cockpit h1 { text-align: center; color: #34d399; letter-spacing: 5px; margin: 0 0 18px; font-weight: 500; text-shadow: 0 0 24px rgba(52,211,153,0.4); }
.cockpit .stat-card { background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.22); color: #d1fae5; }
.cockpit .stat-card::before { background: var(--lm-grad); }
.cockpit .stat-card:hover { transform: none; box-shadow: 0 0 24px rgba(16,185,129,0.18); }
.cockpit .stat-card .label { color: #6fcaa9; }
.cockpit .stat-card .value { color: #34d399; }
.cockpit .card { background: rgba(16,185,129,0.06); border: 1px solid rgba(16,185,129,0.16); color: #d1fae5; }
.cockpit .card-title { color: #34d399; }

/* ============================================================
   登录页：浅色 + 灵芒绿渐变品牌区 + 柔和光斑
   ============================================================ */
.login-stage {
  position: relative; height: 100vh; width: 100vw; overflow: hidden;
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 50%, #f5f8f7 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.login-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.login-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.55; animation: orbFloat 18s ease-in-out infinite; }
.login-orb.orb1 { width: 480px; height: 480px; background: radial-gradient(circle, #34d399 0%, transparent 70%); top: -120px; left: -100px; }
.login-orb.orb2 { width: 420px; height: 420px; background: radial-gradient(circle, #10b981 0%, transparent 70%); bottom: -140px; right: -80px; animation-delay: -6s; }
.login-orb.orb3 { width: 360px; height: 360px; background: radial-gradient(circle, #5eead4 0%, transparent 70%); top: 42%; left: 48%; animation-delay: -12s; }
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(60px, -40px) scale(1.1); }
  66%      { transform: translate(-40px, 60px) scale(0.95); }
}
.login-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(16,185,129,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,185,129,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

.login-shell {
  position: relative; display: flex; width: 880px; max-width: 92vw; min-height: 520px;
  border-radius: 20px; overflow: hidden; background: #fff;
  box-shadow: 0 30px 70px rgba(16,80,60,0.18), 0 0 0 1px rgba(16,185,129,0.06);
}

/* 左侧品牌区：灵芒绿渐变 */
.login-brand {
  flex: 1; background: var(--lm-grad);
  padding: 52px 44px 40px; color: #fff;
  display: flex; flex-direction: column; position: relative; overflow: hidden;
}
.login-brand::after {
  content: ''; position: absolute; width: 280px; height: 280px; border-radius: 50%;
  background: rgba(255,255,255,0.12); bottom: -90px; left: -60px;
}
.brand-mark { display: flex; align-items: center; gap: 10px; margin-bottom: 34px; position: relative; }
.mark-dot { width: 12px; height: 12px; border-radius: 4px; background: #fff; box-shadow: 0 0 14px rgba(255,255,255,0.8); }
.mark-line { width: 26px; height: 1px; background: rgba(255,255,255,0.5); }
.mark-text { font-size: 11px; letter-spacing: 4px; color: rgba(255,255,255,0.8); }
.brand-title { font-size: 46px; font-weight: 800; margin: 0 0 10px; letter-spacing: 6px; color: #fff; text-shadow: 0 4px 20px rgba(0,0,0,0.12); position: relative; }
.brand-sub { font-size: 14px; color: rgba(255,255,255,0.88); letter-spacing: 2px; margin-bottom: 46px; position: relative; }
.brand-features { list-style: none; padding: 0; margin: 0; flex: 1; position: relative; }
.brand-features li {
  font-size: 13px; color: rgba(255,255,255,0.92); padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  display: flex; align-items: center; gap: 10px;
}
.brand-features li span { color: #fff; font-size: 8px; }
.brand-footer { font-size: 11px; color: rgba(255,255,255,0.7); margin-top: 20px; letter-spacing: 1px; position: relative; }

/* 右侧表单区 */
.login-panel { flex: 0 0 380px; background: #fff; padding: 56px 44px 40px; display: flex; flex-direction: column; }
.panel-head { margin-bottom: 32px; }
.panel-title { font-size: 25px; font-weight: 800; color: var(--lm-text); margin-bottom: 6px; }
.panel-sub { font-size: 13px; color: var(--lm-muted); letter-spacing: 0.5px; }
.panel-form { flex: 1; }
.panel-form .el-input__wrapper { background: #f3f8f6; box-shadow: 0 0 0 1px transparent inset; padding: 6px 12px; border-radius: 10px; transition: all 0.2s; }
.panel-form .el-input__wrapper:hover { background: #eaf4f0; }
.panel-form .el-input__wrapper.is-focus { background: #fff; box-shadow: 0 0 0 1px #10b981 inset, 0 0 0 4px rgba(16,185,129,0.12) !important; }
.panel-form .el-input__inner { height: 40px; font-size: 14px; }
.panel-form .el-form-item { margin-bottom: 20px; }
.login-btn {
  width: 100%; height: 46px !important; margin-top: 12px;
  font-size: 15px !important; letter-spacing: 4px; border-radius: 10px !important;
  background: var(--lm-grad) !important; border: 0 !important;
  box-shadow: 0 8px 22px rgba(16,185,129,0.35) !important; transition: all 0.2s !important;
}
.login-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(16,185,129,0.5) !important; }
.login-btn:active { transform: translateY(0); }
.panel-foot { margin-top: 24px; text-align: center; color: var(--lm-muted); font-size: 12px; letter-spacing: 0.5px; }

@media (max-width: 900px) {
  .login-shell { width: 92vw; }
  .login-brand { padding: 36px 30px; }
  .brand-title { font-size: 38px; letter-spacing: 5px; }
  .login-panel { flex: 0 0 340px; padding: 44px 32px; }
}
@media (max-width: 640px) {
  .login-shell { flex-direction: column; width: 92vw; min-height: auto; }
  .login-brand { display: none; }
  .login-panel { flex: 1; padding: 40px 28px; }
  .login-orb { filter: blur(60px); }
  .login-orb.orb1 { width: 280px; height: 280px; }
  .login-orb.orb2 { width: 240px; height: 240px; }
  .login-orb.orb3 { width: 200px; height: 200px; }
}

/* ============================ 手机抽屉菜单（浅色） ============================ */
.drawer-logo {
  height: 62px; display: flex; align-items: center; gap: 9px;
  padding: 0 20px; font-size: 16px; font-weight: 800; color: var(--lm-text);
  border-bottom: 1px solid var(--lm-border); cursor: pointer; user-select: none;
}
.drawer-logo .dot { width: 22px; height: 22px; border-radius: 7px; background: var(--lm-grad); }
.el-drawer__body { padding: 0 !important; background: #fff !important; }
.drawer-menu { border-right: 0 !important; }

/* ============================ 响应式：平板 ============================ */
@media (max-width: 1024px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .filters .el-input, .filters .el-select { width: 100%; max-width: 220px; }
}

/* ============================ 响应式：手机 ============================ */
@media (max-width: 768px) {
  .topnav { padding: 0 14px; gap: 10px; }
  .nav-sub { display: none; }
  .content { padding: 14px 12px 30px; }
  .page-head { font-size: 18px; margin-bottom: 14px; }
  .card { padding: 14px; margin-bottom: 12px; border-radius: 12px; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 16px; }
  .stat-card .value { font-size: 24px; }
  .chart { height: 260px; }
  .chart-sm { height: 220px; }
  .filters { gap: 6px; }
  .filters .el-input, .filters .el-select, .filters .el-date-editor { width: 100% !important; max-width: none; }
  .cockpit { padding: 12px; }
  .cockpit h1 { font-size: 18px; letter-spacing: 2px; }
  .el-table { font-size: 12px; }
  .el-dialog { width: 92vw !important; margin: 5vh auto !important; }
  .el-dialog__body { padding: 14px 16px !important; }

  /* 弹窗内表单：手机上一律单列堆叠 + 标签置顶，避免 2 列挤压/溢出 */
  .el-dialog .el-row > .el-col { max-width: 100% !important; flex: 0 0 100% !important; }
  .el-dialog .el-form-item { display: block !important; margin-bottom: 14px; }
  .el-dialog .el-form--inline .el-form-item { display: block !important; margin-right: 0; }
  .el-dialog .el-form-item__label {
    width: auto !important; float: none; display: block;
    text-align: left; padding: 0 0 4px; line-height: 1.4;
  }
  .el-dialog .el-form-item__content { margin-left: 0 !important; }
  .el-dialog .el-form-item__content > .el-input,
  .el-dialog .el-form-item__content > .el-select,
  .el-dialog .el-form-item__content > .el-input-number,
  .el-dialog .el-form-item__content > .el-date-editor,
  .el-dialog .el-form-item__content > .el-textarea { width: 100% !important; }

  /* 日期区间选择器：手机上面板单列、可滚动，避免双月面板横向溢出 */
  .el-picker-panel { max-width: 96vw !important; overflow-x: auto; }
  .el-picker-panel .el-date-range-picker__content { min-width: 0; }

  /* 弹窗 footer 按钮换行不溢出 */
  .el-dialog__footer { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
  .el-dialog__footer .el-button { margin-left: 0 !important; }

  /* 控制中心等页面内联表单也单列，避免横向溢出 */
  .content .el-form--inline .el-form-item { display: block; margin-right: 0; }
}
@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr; }
}