/* ==================================================================
   佩姐AI卖货大师 · 管理后台样式
   独立于前台样式表，配色沿用同一套变量，保证观感一致。
   ================================================================== */

:root {
  --brand: #ff2442;
  --brand-strong: #e01e3a;
  --brand-soft: #fff0f3;
  --brand-line: #ffd3dc;
  --brand-grad: linear-gradient(135deg, #ff4a55, var(--brand) 52%, var(--brand-strong));

  /* 与前台同一套暖灰墨阶 —— 两份 :root 改动必须同步，否则前后台观感割裂 */
  --ink-900: #1c1917;
  --ink-700: #44403c;
  --ink-500: #78716c;
  --ink-400: #a8a29e;

  --line: #e9e4de;
  --line-soft: #f2efea;
  --bg: #f7f5f2;
  --card: #ffffff;

  --green: #0c9d6e;
  --green-soft: #e8f8f1;
  --blue: #2e6be6;
  --blue-soft: #eef3ff;
  --orange: #f5871f;
  --orange-soft: #fff6e9;
  --red: #e5484d;
  --red-soft: #fdecec;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  --sh-1: 0 1px 2px rgba(28, 25, 23, 0.04), 0 1px 3px rgba(28, 25, 23, 0.05);
  --sh-2: 0 1px 2px rgba(28, 25, 23, 0.05), 0 10px 28px -10px rgba(28, 25, 23, 0.12);
  --sh-3: 0 2px 4px rgba(28, 25, 23, 0.06), 0 24px 56px -12px rgba(28, 25, 23, 0.22);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;

  --sidebar-w: 208px;
  --top-h: 58px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d6cfc6; border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #c2b9ae; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: #d6cfc6 transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-900);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* 品牌光晕：与前台同一套手法 —— html 放底色、body 透明 + fixed 伪元素，光晕才落对层 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 460px at 12% -8%, rgba(255, 36, 66, 0.05), transparent 62%),
    radial-gradient(760px 420px at 92% 0%, rgba(255, 122, 89, 0.04), transparent 58%);
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-strong); }
code { font-family: var(--mono); font-size: 0.9em; background: var(--line-soft); padding: 1px 5px; border-radius: 5px; }
.hidden { display: none !important; }
.muted { color: var(--ink-500); }
.mono { font-family: var(--mono); }

/* ------------------------------ 顶栏 ------------------------------ */

.a-top {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--top-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 20px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.a-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; }
.a-brand em {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  padding: 1px 8px;
}
.a-brand .a-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.a-top-right { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.a-who { color: var(--ink-500); }
.a-who b { color: var(--ink-900); font-weight: 600; }

/* ------------------------------ 布局 ------------------------------ */

.a-shell { display: flex; align-items: flex-start; min-height: calc(100vh - var(--top-h)); }

.a-side {
  position: sticky;
  top: var(--top-h);
  width: var(--sidebar-w);
  flex: none;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: stretch;
}

.a-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 13px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-700);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  transition: background .15s, color .15s;
}
.a-nav:hover { background: rgba(28, 25, 23, 0.045); color: var(--ink-900); }
.a-nav.on { background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; }
/* 激活项左侧的品牌色指示条 */
.a-nav.on::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  border-radius: 999px;
  background: var(--brand-grad);
}
.a-nav .a-nav-ico { width: 18px; text-align: center; flex: none; font-size: 14px; line-height: 1; }

.a-main { flex: 1; min-width: 0; padding: 22px 26px 64px; }

.a-page-head { margin-bottom: 18px; }
.a-page-head h2 { font-size: 20px; }
.a-page-head p { color: var(--ink-500); font-size: 13px; margin-top: 4px; }

/* ------------------------------ 卡片 / 网格 ------------------------------ */

.a-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--sh-1);
  margin-bottom: 18px;
  overflow: hidden;
}
.a-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.a-card-head h3 { font-size: 15px; }
.a-card-head .sub, .a-card-head .hint { font-size: 12.5px; color: var(--ink-400); }
.a-card-body { padding: 18px; }
.a-card-body.tight { padding: 0; }

/* 统计卡：顶部一条 3px 色带 + 右上角淡色图标 */
.a-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.a-stat {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff, #fdfcfa);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--sh-1);
  transition: box-shadow .2s, transform .2s;
}
.a-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--line);
  opacity: .6;
}
.a-stat.is-brand::before { background: var(--brand-grad); opacity: 1; }
.a-stat.is-green::before { background: linear-gradient(90deg, #2fbe8d, var(--green)); opacity: 1; }
.a-stat.is-blue::before { background: linear-gradient(90deg, #5c8ef0, var(--blue)); opacity: 1; }
.a-stat.is-orange::before { background: linear-gradient(90deg, #ffa94d, var(--orange)); opacity: 1; }
.a-stat:hover { box-shadow: var(--sh-2); transform: translateY(-1px); }
.a-stat .k { font-size: 12.5px; color: var(--ink-500); display: flex; align-items: center; gap: 5px; }
.a-stat .v { font-size: 26px; font-weight: 700; line-height: 1.25; margin-top: 4px; font-variant-numeric: tabular-nums; }
.a-stat .s { font-size: 12px; color: var(--ink-400); }
.a-stat.is-brand .v { color: var(--brand); }
.a-stat.is-green .v { color: var(--green); }
.a-stat.is-blue .v { color: var(--blue); }
.a-stat.is-orange .v { color: var(--orange); }
.a-stat-ico {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 15px;
  background: var(--line-soft);
}
.a-stat.is-brand .a-stat-ico { background: var(--brand-soft); }
.a-stat.is-green .a-stat-ico { background: var(--green-soft); }
.a-stat.is-blue .a-stat-ico { background: var(--blue-soft); }
.a-stat.is-orange .a-stat-ico { background: var(--orange-soft); }

/* 7 天趋势 */
.a-trend { display: flex; align-items: flex-end; gap: 10px; height: 132px; padding-top: 8px; }
.a-trend-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.a-trend-bar {
  width: 100%;
  max-width: 44px;
  min-height: 5px;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, #ff6b81, var(--brand));
  transition: height .3s ease;
}
/* 当天 0 人注册：用浅灰短柱，避免连成一条红线看起来像分隔线 */
.a-trend-bar.zero { background: #e7e1d8; }
.a-trend-num { font-size: 12px; font-weight: 600; color: var(--ink-700); font-variant-numeric: tabular-nums; }
.a-trend-num:empty { display: none; }
.a-trend-day { font-size: 11.5px; color: var(--ink-400); white-space: nowrap; }

.a-kv { display: flex; flex-wrap: wrap; gap: 10px 32px; }
.a-kv div { font-size: 13px; color: var(--ink-500); }
.a-kv b { color: var(--ink-900); font-weight: 600; }

/* ------------------------------ 表单 ------------------------------ */

.a-row { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-end; }
.a-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.a-field > label { font-size: 12.5px; color: var(--ink-500); font-weight: 500; }
.a-field .hint { font-size: 12px; color: var(--ink-400); line-height: 1.55; }

/* 规整的表单网格：字段等宽对齐，替代随手 flex 排布 */
.a-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 16px;
  align-items: start;
}
.a-form-grid .a-field { min-width: 0; }
.a-form-grid .a-field.grow { grid-column: span 2; }
@media (max-width: 720px) {
  .a-form-grid .a-field.grow { grid-column: auto; }
}
.a-form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

.a-input, .a-select {
  height: 38px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--ink-900);
  font-family: inherit;
  font-size: 14px;
  min-width: 130px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.a-input:hover, .a-select:hover { border-color: #d8d1c8; }
.a-input:focus, .a-select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.a-input.mono { font-family: var(--mono); font-size: 13px; }
.a-input::placeholder { color: var(--ink-400); }
.a-input[type="number"] { min-width: 96px; }

.a-search { min-width: 190px; }

/* ------------------------------ 按钮 ------------------------------ */

.a-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--ink-700);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.a-btn:hover { background: var(--line-soft); color: var(--ink-900); border-color: #ddd6cd; }
.a-btn:disabled { opacity: .55; cursor: not-allowed; }
.a-btn.primary {
  background: var(--brand-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 8px rgba(255, 36, 66, 0.26);
}
.a-btn.primary:hover { background: var(--brand-strong); border-color: transparent; color: #fff; }
.a-btn.ghost { background: transparent; border-color: transparent; color: var(--ink-500); padding: 0 8px; height: 30px; }
.a-btn.ghost:hover { background: rgba(28, 25, 23, 0.06); color: var(--ink-900); }
.a-btn.danger-ghost { background: transparent; border-color: transparent; color: var(--red); padding: 0 8px; height: 30px; opacity: .82; }
.a-btn.danger-ghost:hover { background: var(--red-soft); opacity: 1; }
.a-btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.a-btn.danger:hover { background: #cf3b40; color: #fff; }
.a-btn.sm { height: 32px; padding: 0 11px; font-size: 13px; }

/* 行内操作组：低饱和降噪，按组分隔 */
.a-actions-cell { display: inline-flex; flex-wrap: wrap; gap: 2px; align-items: center; row-gap: 4px; }
.a-actions-cell .a-sep {
  flex: none;
  width: 1px;
  height: 14px;
  background: var(--line);
  margin: 0 5px;
}

/* ------------------------------ 表格 ------------------------------ */

.a-table-wrap { overflow-x: auto; }
.a-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.a-table th {
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  color: var(--ink-400);
  letter-spacing: .04em;
  background: #faf9f7;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.a-table td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; color: var(--ink-700); }
.a-table td b, .a-table td .b { color: var(--ink-900); }
.a-table tbody tr { transition: background .12s; }
.a-table tbody tr:hover { background: #faf7f3; }
.a-table tbody tr:last-child td { border-bottom: 0; }
.a-table .num { font-variant-numeric: tabular-nums; }
.a-table .nowrap { white-space: nowrap; }
.a-table code { background: transparent; padding: 0; font-size: 12.5px; }

/* 薯条余额：淡金小圆片，和普通数字列区分开 */
.a-fries-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px 2px 6px;
  border-radius: 999px;
  background: var(--orange-soft);
  border: 1px solid #ffe3b8;
  color: #9a6200;
  font-weight: 600;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.a-fries-chip .ico { font-size: 12px; line-height: 1; }

/* 普通身份：只留最轻的灰字，别和正式版/管理员抢视线 */
.a-tag.plain { background: transparent; border-color: transparent; color: var(--ink-400); font-weight: 500; padding: 1px 2px; }

.a-empty { padding: 40px 16px; text-align: center; color: var(--ink-400); font-size: 13.5px; }

/* 标签 */
.a-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1.5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.a-tag.pro { background: var(--orange-soft); color: #b76a00; border-color: #ffe0b2; }
.a-tag.free { background: var(--line-soft); color: var(--ink-500); border-color: var(--line); }
.a-tag.admin { background: var(--brand-soft); color: var(--brand-strong); border-color: var(--brand-line); }
.a-tag.off { background: var(--red-soft); color: var(--red); border-color: #f8d4d5; }
.a-tag.on { background: var(--green-soft); color: #00794f; border-color: #c8ecdc; }
.a-tag.used { background: var(--line-soft); color: var(--ink-500); border-color: var(--line); }

.a-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; flex-wrap: wrap; }
.a-pager-info { font-size: 13px; color: var(--ink-500); }

/* ------------------------------ 站点品牌编辑 ------------------------------ */

.a-brand-edit { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.a-brand-fields { flex: 1; min-width: 300px; }

/* 预览方块：即前台顶栏 .brand-mark 的后台版 */
.a-brand-preview {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--brand-grad);
  color: #fff;
  font-weight: 700;
  font-size: 28px;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 18px rgba(255, 36, 66, 0.26);
}
.a-brand-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 上传按钮贴在地址输入框右侧，不换行 */
.a-logo-row { display: flex; gap: 8px; align-items: center; }
.a-logo-row .a-input { flex: 1; min-width: 0; }
.a-logo-row .a-btn { flex: none; }
@media (max-width: 560px) {
  /* 窄屏下按钮换到下一行并撑满，避免地址被压成一格 */
  .a-logo-row { flex-wrap: wrap; }
  .a-logo-row .a-btn { width: 100%; }
}

/* 站点图标：一行「小预览 + 两个动作 + 当前来源」。
   预览做 40px（实际浏览器标签只有 16px，但太小看不出设的是哪张）。 */
.a-icon-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.a-icon-prev {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.a-icon-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a-icon-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.a-icon-state { font-size: 12.5px; color: var(--ink-400); }

/* ------------------------------ 卡密结果 ------------------------------ */

.a-code-out { margin-top: 16px; }
.a-code-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  padding: 11px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.a-code-grid span {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .3px;
  color: var(--ink-900);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 5px 8px;
  text-align: center;
  user-select: all;
  transition: border-color .15s;
}
.a-code-grid span:hover { border-color: var(--brand-line); }

/* ------------------------------ 提示条 ------------------------------ */

.a-note {
  display: flex;
  gap: 9px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.6;
  border: 1px solid;
  margin-bottom: 14px;
}
.a-note:last-child { margin-bottom: 0; }
.a-note.info { background: var(--blue-soft); border-color: #d5e4ff; color: #1c4fa1; }
.a-note.warn { background: var(--orange-soft); border-color: #ffe3b8; color: #9a6200; }
.a-note.err { background: var(--red-soft); border-color: #f8d4d5; color: #a92b2f; }
.a-note.ok { background: var(--green-soft); border-color: #c8ecdc; color: #00603f; }

/* 示例卡：浅底无边框，说明性内容一眼能分清不是表单 */
.a-example {
  margin-top: 16px;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--line-soft);
  border: 1px dashed var(--line);
  font-size: 13px;
  color: var(--ink-700);
}
.a-example b { color: var(--brand-strong); }

/* ------------------------------ 弹窗 ------------------------------ */

.a-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(28, 25, 23, .45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: a-modal-in .16s ease;
}
@keyframes a-modal-in { from { opacity: 0; } }
.a-modal-panel {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: a-modal-pop .18s ease;
}
@keyframes a-modal-pop { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.a-modal-head { padding: 18px 20px 0; }
.a-modal-head h3 { font-size: 16.5px; }
.a-modal-head p { color: var(--ink-500); font-size: 13px; margin-top: 5px; }
.a-modal-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 13px; overflow-y: auto; }
.a-modal-foot { display: flex; justify-content: flex-end; gap: 9px; padding: 0 20px 18px; }

/* ------------------------------ 登录 ------------------------------ */

.a-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 22px; }
.a-login {
  position: relative;
  width: 100%;
  max-width: 386px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: 30px 28px 24px;
  overflow: hidden;
  animation: a-login-in .22s ease;
}
/* 卡片顶部一条品牌渐变饰线 */
.a-login::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--brand-grad);
}
@keyframes a-login-in { from { opacity: 0; transform: translateY(6px); } }
.a-login h1 { font-size: 19px; display: flex; align-items: center; gap: 8px; }
.a-login .a-sub { color: var(--ink-500); font-size: 13px; margin: 6px 0 20px; }
.a-login .a-field { margin-bottom: 13px; }
.a-login .a-input { width: 100%; height: 42px; font-size: 15px; }
.a-login .a-btn { width: 100%; height: 44px; font-size: 15px; margin-top: 4px; }
.a-login .a-back { margin-top: 15px; text-align: center; font-size: 13px; }

/* ------------------------------ Toast ------------------------------ */

.a-toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translate(-50%, 14px);
  z-index: 120;
  max-width: min(90vw, 460px);
  padding: 10px 17px;
  border-radius: 999px;
  background: #292524;
  color: #fff;
  font-size: 13.5px;
  box-shadow: var(--sh-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.a-toast.show { opacity: 1; transform: translate(-50%, 0); }
.a-toast.err { background: #b3272c; }
.a-toast.ok { background: #00794f; }

/* ------------------------------ 响应式 ------------------------------ */

@media (max-width: 1080px) {
  .a-stats { grid-template-columns: repeat(2, 1fr); }
  .a-main { padding: 18px 18px 60px; }
}

@media (max-width: 860px) {
  :root { --top-h: 54px; }
  .a-shell { flex-direction: column; }
  .a-side {
    position: sticky;
    top: var(--top-h);
    z-index: 30;
    width: 100%;
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    padding: 8px 10px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    -webkit-overflow-scrolling: touch;
  }
  .a-side::-webkit-scrollbar { display: none; }
  .a-nav {
    width: auto;
    flex: none;
    padding: 8px 13px;
    border: 1px solid var(--line);
    background: #fff;
    font-size: 13.5px;
    border-radius: 999px;
  }
  .a-nav.on { border-color: var(--brand); }
  .a-nav.on::before { display: none; }
  .a-nav .a-nav-ico { display: none; }
  .a-main { padding: 14px 14px 60px; }
  .a-brand span.a-brand-text { display: none; }
  .a-who { display: none; }
  .a-field { width: 100%; }
  .a-input, .a-select { width: 100%; }
  .a-input[type="number"] { width: 100%; }
  .a-search { min-width: 0; }
  .a-row { gap: 10px; }
  .a-row > .a-btn { flex: 1; }
}

@media (max-width: 560px) {
  .a-stats { grid-template-columns: 1fr 1fr; gap: 9px; }
  .a-stat { padding: 11px 12px; }
  .a-stat .v { font-size: 21px; }
  .a-stat-ico { display: none; }
  .a-trend { height: 110px; gap: 5px; }
  .a-trend-day { font-size: 10px; }
  .a-modal { padding: 12px; }
  .a-modal-foot { flex-direction: column-reverse; }
  .a-modal-foot .a-btn { width: 100%; }
}