/* P1 重设计：单一样式来源，所有正式工作台 / 后台页面引用本文件。
   设计 token 收敛点：
   - 圆角降一档（30→24 / 28→20 / 24→16 / 18→14），保留 999px 胶囊
   - 字重降一档（950→800 / 900→700 / 800→600），不再视觉过重
   - 表格密度：默认 14/16，加 .table.compact
   - 多断点：1180 / 1024 / 768 三档
   - --brand-logo 容器留给 commercial-shell.js 注入 SVG
*/
* { box-sizing: border-box; }

:root {
  --bg: #f3f6fb;
  --panel: #ffffff;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --blue: #2563eb;
  --purple: #7c3aed;
  --green: #16a34a;
  --orange: #f97316;
  --red: #dc2626;
  --shadow: 0 12px 32px rgba(15, 23, 42, .06);

  --radius-hero: 24px;
  --radius-card: 20px;
  --radius-stat: 16px;
  --radius-inner: 14px;
  --radius-menu: 12px;
  --radius-pill: 999px;

  --font-display: 800;
  --font-strong: 700;
  --font-normal: 600;

  --row-pad-y: 14px;
  --row-pad-x: 16px;
  --row-font: 14px;

  --sidebar-w: 258px;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  color: var(--ink);
  background: var(--bg);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

a { color: inherit; text-decoration: none; }

.sidebar {
  min-height: 100vh;
  padding: 24px 18px;
  position: sticky;
  top: 0;
  color: white;
  background: #0f172a;
}
/* commercial-shell.js 注入前的占位：空 sidebar 保留布局宽度但不画任何内容，
   防止旧静态菜单（已废弃）的 DOM 在 shell 接管前短暂闪现。 */
aside.sidebar:empty {
  background: #0f172a;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 10px 28px;
  font-weight: var(--font-display);
  font-size: 20px;
  letter-spacing: -.2px;
}
.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-inner);
  background: linear-gradient(135deg, var(--blue), var(--purple));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
  position: relative;
}
/* P1 默认 brand logo：内嵌 SVG，通过 ::after 显示，让所有引用 commercial-ui.css 的页面（含正式管理员后台）都自动获得 logo */
.brand-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 4h2.6l9 11.2V4H19v16h-2.6l-9-11.2V20H5V4z' fill='white'/></svg>") center / 55% no-repeat;
}
.brand-mark.has-svg::after { display: none; }
.brand-mark svg { width: 22px; height: 22px; display: block; position: relative; z-index: 1; }

.menu-title {
  margin: 20px 10px 8px;
  color: #64748b;
  font-size: 13px;
  font-weight: var(--font-strong);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-radius: var(--radius-menu);
  color: #cbd5e1;
  font-size: 16px;
  font-weight: var(--font-normal);
  transition: background .15s, color .15s;
}
.menu a:hover { color: white; background: rgba(255, 255, 255, .04); }
.menu a.active {
  color: white;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  box-shadow: 0 8px 22px rgba(37, 99, 235, .18);
}
.menu a span:last-child { color: #94a3b8; font-size: 13px; font-weight: var(--font-normal); }
/* 菜单项之间松快一点 */
.menu a + a { margin-top: 2px; }
.menu a.active span:last-child { color: #dbeafe; }

/* 2026-05-02 · 菜单项右侧小标签（"开发中" / "NEW" 等）*/
.menu a .menu-badge {
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2px;
  background: rgba(251, 191, 36, .2);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, .3);
  flex-shrink: 0;
}
.menu a .menu-badge-amber { background: rgba(251, 191, 36, .2); color: #fbbf24; border-color: rgba(251, 191, 36, .3); }
.menu a .menu-badge-green { background: rgba(34, 197, 94, .2); color: #4ade80; border-color: rgba(34, 197, 94, .3); }
.menu a .menu-badge-red { background: rgba(239, 68, 68, .2); color: #f87171; border-color: rgba(239, 68, 68, .3); }
.menu a.active .menu-badge { background: rgba(255, 255, 255, .2); color: #fff; border-color: rgba(255, 255, 255, .3); }

/* 2026-05-15 · 发布中心改造 · sidebar 嵌套平台菜单 (OZON/淘宝/速卖通) + 添加平台 */
.menu .platform-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-radius: var(--radius-pill, 4px);
  color: #cbd5e1; font-size: 13px; font-weight: 600;
  cursor: pointer; user-select: none;
}
.menu .platform-row:hover { background: rgba(255, 255, 255, .04); color: white; }
.menu .platform-row.active-parent { background: rgba(30, 64, 175, .25); color: white; }
.menu .platform-row .caret {
  display: inline-block; width: 10px; color: #94a3b8; font-size: 10px;
  transition: transform .15s;
}
.menu .platform-row.expanded .caret { transform: rotate(90deg); }
.menu .platform-row .platform-name { display: inline-flex; align-items: center; gap: 8px; }
.menu .platform-row .platform-name .dot { width: 6px; height: 6px; border-radius: 999px; background: #16a34a; }
.menu .platform-row .platform-name .dot.off { background: #475569; }
.menu .platform-row.disabled { color: #64748b; cursor: not-allowed; }
.menu .platform-row.disabled:hover { background: transparent; color: #64748b; }
.menu .platform-children {
  margin: 2px 0 6px 14px;
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, .08);
  display: grid; gap: 1px;
}
.menu .platform-children a {
  padding: 6px 10px; font-size: 12.5px; color: #94a3b8;
  border-radius: var(--radius-pill, 4px); display: block;
}
.menu .platform-children a:hover { color: white; background: rgba(255, 255, 255, .04); }
.menu .platform-children a.active { color: white; background: #1E40AF; }
.menu .add-platform {
  display: flex; align-items: center; justify-content: center;
  margin-top: 4px; padding: 6px 10px;
  border: 1px dashed #334155; border-radius: var(--radius-pill, 4px);
  color: #64748b; font-size: 12px; cursor: pointer;
}
.menu .add-platform:hover { color: #cbd5e1; border-color: #475569; }

.main { min-width: 0; }

.topbar {
  height: 72px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(243, 246, 251, .82);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(226, 232, 240, .8);
}

.search {
  width: min(540px, 46vw);
  padding: 11px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
.search::placeholder { color: var(--muted); }

.top-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.balance, .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border-radius: var(--radius-pill);
  background: white;
  border: 1px solid var(--line);
  font-weight: var(--font-strong);
  font-size: 13px;
  color: var(--ink);
}
.balance b, .chip b { color: var(--blue); font-weight: var(--font-display); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  font-size: 13px;
  font-weight: var(--font-strong);
  cursor: pointer;
  color: white;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  transition: transform .12s, box-shadow .12s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(37, 99, 235, .18); }
.btn.dark { background: #0f172a; }
.btn.ghost { color: var(--ink); background: white; border: 1px solid var(--line); }
.btn.ghost:hover { background: #f8fafc; }

/* 头像 + 下拉（commercial-shell.js 注入） */
.user-menu { position: relative; display: inline-block; }
.user-menu .avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #dbeafe, #ede9fe);
  border: 1px solid white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-size: 13px;
  font-weight: var(--font-display);
  cursor: pointer;
  user-select: none;
}
.user-menu .avatar:hover { box-shadow: 0 8px 18px rgba(15, 23, 42, .1); }
.user-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  padding: 8px;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .14);
  display: none;
  z-index: 30;
}
.user-menu-panel.open { display: block; }
.user-menu-panel .user-info {
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.user-menu-panel .user-info b {
  display: block;
  font-size: 14px;
  font-weight: var(--font-display);
  color: var(--ink);
}
.user-menu-panel .user-info span { color: var(--muted); font-size: 12px; }
.user-menu-panel a, .user-menu-panel button {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: var(--font-normal);
  color: var(--ink);
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.user-menu-panel a:hover, .user-menu-panel button:hover { background: #f1f5f9; }
.user-menu-panel button.danger { color: var(--red); }
.user-menu-panel button.danger:hover { background: #fee2e2; }

.content { padding: 28px; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  margin-bottom: 18px;
}
.hero-card {
  padding: 28px;
  border-radius: var(--radius-hero);
  color: white;
  background:
    radial-gradient(circle at 80% 0%, rgba(255,255,255,.18), transparent 32%),
    linear-gradient(135deg, var(--blue), var(--purple));
  box-shadow: 0 18px 48px rgba(37, 99, 235, .16);
}
.hero-card h1 { margin: 0 0 12px; font-size: 28px; font-weight: var(--font-display); letter-spacing: -.5px; }
.hero-card p { margin: 0; color: #dbeafe; line-height: 1.75; font-size: 14px; }
.hero-actions { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; }

.summary-card, .panel {
  padding: 22px;
  border-radius: var(--radius-card);
  background: white;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.summary-card h3, .panel h2 { margin: 0; letter-spacing: -.2px; font-weight: var(--font-display); }
.summary-card h3 { font-size: 15px; }
.big-number, .credit-total {
  margin: 12px 0 6px;
  font-size: 36px;
  font-weight: var(--font-display);
  letter-spacing: -.6px;
  color: var(--blue);
}

.muted { color: var(--muted); }

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.stat {
  padding: 18px 20px;
  border-radius: var(--radius-stat);
  background: white;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.stat span { color: var(--muted); font-size: 12px; font-weight: var(--font-strong); }
.stat strong {
  display: block;
  margin-top: 6px;
  font-size: 26px;
  font-weight: var(--font-display);
  letter-spacing: -.4px;
}

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel-head h2 { font-size: 18px; }

/* 表格：默认密度 + .compact 紧凑模式 */
.table {
  overflow: hidden;
  border-radius: var(--radius-inner);
  border: 1px solid var(--line);
}
.row {
  display: grid;
  grid-template-columns: var(--cols, 1.1fr 1fr .8fr .7fr 1.1fr);
  gap: 12px;
  padding: var(--row-pad-y) var(--row-pad-x);
  align-items: center;
  border-bottom: 1px solid #eef2f7;
  background: white;
  font-size: var(--row-font);
}
.row.head {
  color: #475569;
  background: #f8fafc;
  font-size: 12px;
  font-weight: var(--font-strong);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.row:last-child { border-bottom: 0; }
.row b { display: block; margin-bottom: 3px; font-weight: var(--font-strong); }
.row small { color: var(--muted); line-height: 1.5; }

.table.compact { --row-pad-y: 9px; --row-pad-x: 12px; --row-font: 13px; }
.table.relaxed { --row-pad-y: 18px; --row-pad-x: 18px; }

.badge {
  justify-self: start;
  padding: 5px 9px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: var(--font-strong);
  letter-spacing: .02em;
}
.badge.green { color: #166534; background: #dcfce7; }
.badge.blue { color: #1d4ed8; background: #dbeafe; }
.badge.orange { color: #9a3412; background: #ffedd5; }
.badge.red { color: #991b1b; background: #fee2e2; }
.badge.gray { color: #475569; background: #e2e8f0; }
.badge.purple { color: #6b21a8; background: #ede9fe; }

.delta.plus { color: var(--green); font-weight: var(--font-display); }
.delta.minus { color: var(--red); font-weight: var(--font-display); }

.side-stack, .card-list { display: grid; gap: 18px; }

.rule-card, .info-card, .guide-card {
  padding: 14px 16px;
  border-radius: var(--radius-inner);
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  margin-top: 10px;
}
.rule-card b, .info-card b, .guide-card b {
  display: block;
  margin-bottom: 5px;
  font-weight: var(--font-strong);
}
.rule-card p, .info-card p, .guide-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 13px;
}

.rule-list { display: grid; gap: 8px; margin-top: 12px; }
.rule-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
}
.rule-row:last-child { border-bottom: 0; }
.rule-row span { color: var(--muted); }
.rule-row b { font-weight: var(--font-strong); }

.formula {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-inner);
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 12px;
  line-height: 1.65;
  font-weight: var(--font-normal);
}

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.field { display: grid; gap: 6px; }
.field label {
  font-size: 12px;
  color: var(--muted);
  font-weight: var(--font-strong);
}
.input, select.input, textarea.input {
  width: 100%;
  padding: 10px 13px;
  border-radius: var(--radius-inner);
  border: 1px solid var(--line);
  background: #f8fafc;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
.input:focus { outline: 2px solid rgba(37, 99, 235, .25); border-color: var(--blue); background: white; }

/* 多断点：1180 / 1024 / 768 */
@media (max-width: 1180px) {
  body { grid-template-columns: 220px minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .hero, .layout { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  body { grid-template-columns: 1fr; }
  .sidebar { position: static; min-height: auto; padding: 16px 14px; }
  .menu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .menu-title { margin-top: 12px; }
  .grid-2, .grid-3, .form-grid { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr !important; gap: 6px; }
  .row .badge, .row .delta { justify-self: start; }
}
@media (max-width: 768px) {
  .topbar { height: auto; padding: 12px 16px; flex-wrap: wrap; gap: 10px; }
  .search { display: none; }
  .top-actions { gap: 8px; }
  .stats { grid-template-columns: 1fr; }
  .content { padding: 16px; }
  .hero-card { padding: 22px; }
  .hero-card h1 { font-size: 22px; }
  .menu { grid-template-columns: 1fr; }
}