[v-cloak] { display: none; }
html, body { margin: 0; height: 100%; background: #f4f6f9; color: #1f2d3d;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", -apple-system, sans-serif; font-size: 14px; }
#app { height: 100%; }

/* 登录 */
.login-wrap { height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1f2d3d 0%, #2b4c7e 100%); }
.login-card { width: 360px; background: #fff; border-radius: 10px; padding: 36px 32px 24px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.login-card h1 { font-size: 22px; margin: 0 0 6px; text-align: center; }
.login-card p { color: #80868b; text-align: center; margin: 0 0 24px; font-size: 13px; }

/* 布局 */
.layout { height: 100%; display: flex; }
.aside { width: 200px; background: #1f2d3d; display: flex; flex-direction: column; flex-shrink: 0; transition: width .2s; }
.aside .brand { color: #fff; font-size: 17px; font-weight: bold; padding: 18px 20px; background: #17222e; white-space: nowrap; overflow: hidden; }
.aside .el-menu { border-right: none; flex: 1; background: #1f2d3d; }
.aside .el-menu-item { color: #c7d0d9; height: 48px; }
.aside .el-menu-item:hover { background: #263646; }
.aside .el-menu-item.is-active { background: #2b3d51; color: #fff; border-left: 3px solid #4a90e2; padding-left: 17px !important; }
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar { height: 52px; background: #fff; border-bottom: 1px solid #e4e7ed; display: flex; align-items: center; padding: 0 20px; gap: 12px; flex-shrink: 0; }
.topbar .title { font-size: 17px; font-weight: bold; flex: 1; }
.content { flex: 1; overflow: auto; padding: 16px 20px; }

.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.toolbar .spacer { flex: 1; }
.panel { background: #fff; border: 1px solid #e4e7ed; border-radius: 8px; padding: 14px; }
.summary { color: #5f6368; margin: 10px 2px 0; font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; }
.summary b { color: #1f2d3d; }

/* 统计卡片 */
.cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.card { background: #fff; border: 1px solid #e4e7ed; border-radius: 8px; padding: 14px 16px; }
.card .t { color: #5f6368; font-size: 13px; }
.card .v { font-size: 26px; font-weight: bold; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.card .s { color: #80868b; font-size: 12px; }
@media (max-width: 1100px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.num { font-variant-numeric: tabular-nums; }
.neg { color: #d93025; }
.pos { color: #188038; }
.warn { color: #e37400; }
.muted { color: #9aa0a6; }
.el-table .row-neg td { color: #d93025; }
.el-table .row-warn td { color: #e37400; }
.el-table .row-void td { color: #9aa0a6; text-decoration: line-through; }
.el-table .row-void td.no-strike, .el-table .row-void td .el-button { text-decoration: none; }
.el-table .row-dup td { color: #9aa0a6; }
.el-table .row-err td { color: #d93025; }

.quick-amts { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.bal-tip { font-size: 13px; color: #5f6368; line-height: 1.6; }
.big { font-size: 20px; font-weight: bold; }
.form-msg { margin-top: 6px; padding: 8px 12px; border-radius: 6px; background: #e6f4ea; color: #188038; font-size: 13px; }
.form-msg.bad { background: #fce8e6; color: #d93025; }
.form-msg.mid { background: #fef7e0; color: #b06000; }
.el-dialog__body { padding-top: 6px; }

@media (max-width: 760px) {
  .aside { width: 64px; }
  .aside .brand { font-size: 0; padding: 18px 0; }
  .aside .brand::before { content: "¥"; font-size: 20px; display: block; text-align: center; }
  .aside .menu-text { display: none; }
  .content { padding: 12px; }
  .cards { grid-template-columns: minmax(0, 1fr); }
}

/* SaaS */
.login-foot { text-align: center; margin-top: 18px; font-size: 12px; color: #9aa0a6; }
.login-foot a { color: #5f6368; text-decoration: none; }
.trial-tip { font-size: 13px; color: #b06000; background: #fef7e0; padding: 4px 12px; border-radius: 14px; display: flex; align-items: center; gap: 4px; }
.trial-tip.neg { color: #d93025; background: #fce8e6; }
.who { cursor: pointer; display: flex; align-items: center; gap: 6px; }
.sub-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sub-status { font-size: 22px; font-weight: bold; margin-top: 4px; display: flex; align-items: center; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 980px; }
.plan { position: relative; background: #fff; border: 1px solid #e4e7ed; border-radius: 12px; padding: 24px 22px 20px; }
.plan.best { border: 2px solid #1a73e8; box-shadow: 0 6px 20px rgba(26,115,232,.12); }
.plan.current { border-color: #188038; }
.plan-badge { position: absolute; top: -12px; right: 18px; background: #1a73e8; color: #fff; font-size: 12px; padding: 3px 10px; border-radius: 10px; }
.plan-name { font-size: 16px; font-weight: bold; color: #3c4043; }
.plan-price { font-size: 34px; font-weight: bold; margin: 10px 0 2px; font-variant-numeric: tabular-nums; }
.plan-price span { font-size: 14px; color: #80868b; font-weight: normal; margin-left: 4px; }
.plan-sub { color: #5f6368; font-size: 13px; min-height: 20px; }
.plan ul { padding-left: 18px; color: #5f6368; font-size: 13px; line-height: 2; margin: 14px 0 18px; }
@media (max-width: 900px) { .plans { grid-template-columns: minmax(0, 1fr); } .who .company { display: none; } }
@media (max-width: 760px) { .trial-tip { display: none; } }