@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=Sora:wght@500;600;700&display=swap");

:root {
  --bg: #ffffff;
  --paper: #ffffff;
  --ink: #111318;
  --muted: #8a8f9a;
  --slate: #474a54;
  --line: rgba(17, 19, 24, 0.08);
  --soft: #ffffff;
  --accent: #111318;
  --brand: #c1121f;
  --ok: #147a5c;
  --warn: #b45309;
  --taobao: #ff5000;
  --xhs: #ff2442;
  --gold-1: #f8e7a0;
  --gold-2: #d4a017;
  --gold-3: #8a6408;
  --shadow: 0 12px 32px rgba(17, 19, 24, 0.06);
  --radius: 18px;
  --font: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", sans-serif;
  --display: "Sora", "Noto Sans SC", "PingFang SC", sans-serif;
  --mono: "SF Mono", "Menlo", "Consolas", monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

.welcome-mask {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  padding: 24px;
  background: rgba(17, 19, 24, .3);
  animation: welcomeMaskIn .4s ease both;
}
.welcome-mask.hidden { display: none !important; }
.welcome-mask.out { animation: welcomeMaskOut .35s ease forwards; }
.welcome-card {
  position: relative;
  width: min(400px, 100%);
  text-align: center;
  padding: 40px 28px 30px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 32px 80px rgba(17,19,24,.14);
  overflow: hidden;
  animation: welcomeCardIn .6s var(--ease) both;
}
.welcome-ring {
  position: absolute; left: 50%; top: 28px;
  width: 120px; height: 120px; margin-left: -60px;
  border-radius: 50%;
  border: 1px solid rgba(193,18,31,.18);
  animation: welcomeRing 1.6s var(--ease) both;
  pointer-events: none;
}
.welcome-avatar {
  position: relative; z-index: 1;
  width: 96px; height: 96px; border-radius: 50%;
  object-fit: cover; display: block; margin: 0 auto 18px;
  border: 3px solid #fff;
  box-shadow: 0 14px 36px rgba(17,19,24,.16);
  animation: welcomeAvatarIn .75s var(--ease) both;
}
.welcome-kicker {
  font-family: var(--display);
  font-size: 11px; font-weight: 700; letter-spacing: .22em;
  color: var(--brand);
  animation: welcomeFade .6s ease .08s both;
}
.welcome-title {
  margin: 10px 0 0;
  font-family: var(--display);
  font-size: 30px; font-weight: 700;
  animation: welcomeFade .6s ease .12s both;
}
.welcome-name {
  margin-top: 10px;
  font-size: 17px; font-weight: 650;
  color: var(--ink);
  animation: welcomeFade .6s ease .18s both;
}
.welcome-time {
  margin-top: 10px;
  font-size: 13px; color: var(--muted);
  font-variant-numeric: tabular-nums;
  animation: welcomeFade .6s ease .24s both;
}
.welcome-btn {
  margin-top: 24px;
  min-width: 168px;
  min-height: 46px;
  border: 0;
  border-radius: 14px !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-weight: 650;
  cursor: pointer;
  animation: welcomeFade .6s ease .3s both;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.welcome-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(17,19,24,.18);
}
@keyframes welcomeMaskIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes welcomeMaskOut { to { opacity: 0; } }
@keyframes welcomeCardIn {
  from { opacity: 0; transform: translateY(22px) scale(.94); }
  to { opacity: 1; transform: none; }
}
@keyframes welcomeAvatarIn {
  from { opacity: 0; transform: scale(.65); }
  to { opacity: 1; transform: none; }
}
@keyframes welcomeRing {
  from { opacity: 0; transform: scale(.7); }
  to { opacity: 1; transform: scale(1.15); }
}
@keyframes welcomeFade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #ffffff !important; }
body {
  font-family: var(--font);
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--ink);
  background: #ffffff !important;
  min-height: 100vh;
  line-height: 1.55;
  letter-spacing: 0.01em;
  position: relative;
}

.bg-watermark {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  background: #ffffff;
}
.wm-text-layer {
  position: absolute; inset: -30%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='200' viewBox='0 0 280 200'%3E%3Ctext x='20' y='70' fill='%23111318' fill-opacity='1' font-family='Sora,Arial,sans-serif' font-size='22' font-weight='700' letter-spacing='4'%3EASSASSIN%3C/text%3E%3Ctext x='90' y='150' fill='%23c1121f' fill-opacity='0.85' font-family='Sora,Arial,sans-serif' font-size='14' font-weight='600' letter-spacing='3'%3EDELIVERY%3C/text%3E%3C/svg%3E");
  background-size: 280px 200px;
  background-repeat: repeat;
  opacity: 0.028;
  transform: rotate(-12deg);
  animation: wmDrift 60s linear infinite, wmBreathe 5.5s ease-in-out infinite;
}
@keyframes wmDrift {
  from { background-position: 0 0; }
  to { background-position: 560px 400px; }
}
@keyframes wmBreathe {
  0%, 100% { opacity: 0.012; }
  40% { opacity: 0.045; }
  70% { opacity: 0.022; }
}

.hidden { display: none !important; }

/* 已登录刷新：首屏直接进工作台，不闪登录页 */
html.boot-authed #authScreen { display: none !important; }
html.boot-authed #appShell.hidden { display: block !important; }
html.boot-guest #appShell { display: none !important; }
html.boot-authed #appShell { animation: none; }

.auth-screen {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px 20px;
  background: #ffffff;
  overflow: hidden;
}
.auth-orbit {
  position: absolute; inset: 0; pointer-events: none;
}
.auth-orbit span {
  position: absolute; left: 50%; top: 46%;
  border: 1px solid rgba(17,19,24,.06);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: orbitPulse 8s ease-in-out infinite;
}
.auth-orbit span:nth-child(1) { width: min(520px, 88vw); height: min(520px, 88vw); }
.auth-orbit span:nth-child(2) {
  width: min(720px, 110vw); height: min(720px, 110vw);
  animation-delay: -2.5s; animation-duration: 11s;
  border-color: rgba(193,18,31,.07);
}
.auth-orbit span:nth-child(3) {
  width: min(920px, 130vw); height: min(920px, 130vw);
  animation-delay: -5s; animation-duration: 14s;
}
@keyframes orbitPulse {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.03); }
}
.auth-card {
  position: relative;
  width: min(400px, 100%);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 36px 30px 28px;
  background: #ffffff;
  box-shadow: 0 28px 70px rgba(17, 19, 24, 0.08);
  animation: authCardIn .7s var(--ease) both;
}
@keyframes authCardIn {
  from { opacity: 0; transform: translateY(28px) scale(.97); }
  to { opacity: 1; transform: none; }
}
.auth-logo-wrap {
  display: grid; place-items: center;
  margin-bottom: 18px;
}
.auth-logo {
  width: 76px; height: 76px; border-radius: 22px;
  object-fit: cover;
  box-shadow: 0 16px 36px rgba(17, 19, 24, 0.14);
  animation: authLogoFloat 3.6s ease-in-out infinite;
}
@keyframes authLogoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.auth-title-block {
  text-align: center;
  margin-bottom: 26px;
}
.auth-kicker {
  font-family: var(--display);
  font-size: 11px; font-weight: 700; letter-spacing: .2em;
  color: var(--brand);
  margin-bottom: 8px;
  animation: welcomeFade .55s ease .1s both;
}
.auth-brand {
  font-family: var(--display);
  font-size: 32px;
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--ink);
  animation: welcomeFade .55s ease .16s both;
}
.auth-desc {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--muted);
  animation: welcomeFade .55s ease .22s both;
}
.auth-form { gap: 14px; }
.auth-form input {
  background: #fff !important;
  border: 1px solid var(--line);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.auth-form input:focus {
  border-color: rgba(17,19,24,.28);
  box-shadow: 0 0 0 4px rgba(17,19,24,.04);
  outline: none;
}
.auth-login-btn {
  position: relative;
  width: 100%;
  margin-top: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px;
  border: 0;
  border-radius: 14px !important;
  background: #111318 !important;
  color: #fff !important;
  box-shadow: 0 14px 32px rgba(17, 19, 23, 0.2) !important;
  font-weight: 650;
  letter-spacing: 0.04em;
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.auth-btn-shine {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: btnShine 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes btnShine {
  0%, 40% { transform: translateX(-120%); }
  70%, 100% { transform: translateX(120%); }
}
.auth-login-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 40px rgba(17, 19, 23, 0.26) !important;
}
.auth-hint {
  margin: 18px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

.shell {
  position: relative; z-index: 1;
  width: min(1280px, calc(100% - 40px));
  margin: 0 auto;
  padding: 28px 0 80px;
  background: transparent;
  animation: shellIn .55s var(--ease) both;
}
@keyframes shellIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  animation: fadeUp .45s ease both;
}
.brand-block {
  display: flex; align-items: center; gap: 14px; min-width: 0;
}
.brand-mark {
  position: relative;
  flex: 0 0 auto;
  width: 56px; height: 56px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(17, 19, 24, 0.1);
  animation: logoIn .55s var(--ease) both;
}
.brand-mark::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 20px;
  border: 1px solid rgba(193,18,31,.2);
  animation: brandRing 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes brandRing {
  0%, 100% { opacity: .35; transform: scale(1); }
  50% { opacity: .9; transform: scale(1.04); }
}
.brand-logo {
  width: 100%; height: 100%;
  border-radius: 18px;
  object-fit: cover; display: block;
}
@keyframes logoIn {
  from { opacity: 0; transform: scale(.86); }
  to { opacity: 1; transform: none; }
}
.brand-title {
  font-family: var(--display);
  font-size: clamp(22px, 3vw, 30px);
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
  color: var(--ink);
  white-space: nowrap;
}
.brand-title span {
  color: var(--brand);
  margin-right: 6px;
}
.user-chip {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 8px 6px 6px; background: #fff;
  box-shadow: 0 8px 20px rgba(17,19,24,.04);
}
.user-avatar-wrap {
  position: relative; flex: 0 0 auto;
  border: 0; padding: 0; background: transparent; cursor: pointer;
  border-radius: 50%;
}
.user-avatar-wrap:hover .avatar-edit-hint { opacity: 1; transform: scale(1); }
.avatar-edit-hint {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(18,19,23,.55);
  color: #fff; font-size: 11px; font-weight: 700;
  opacity: 0; transform: scale(.92);
  transition: opacity .2s ease, transform .2s var(--ease);
  pointer-events: none;
}
.user-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; display: block;
  background: #111318; flex: 0 0 auto;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--line);
}
.avatar-editor {
  display: flex; align-items: center; gap: 14px;
  padding: 12px; border-radius: 16px;
  background: var(--soft); border: 1px solid var(--line);
}
.avatar-preview {
  width: 72px; height: 72px; border-radius: 50%;
  object-fit: cover; background: #111318;
  border: 3px solid #fff;
  box-shadow: 0 8px 20px rgba(18,19,23,.08);
}
.avatar-editor-actions { min-width: 0; flex: 1; }
.user-chip-text { min-width: 0; padding-right: 4px; }
.user-name-row {
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.vip-mark {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 9px 0 7px;
  border-radius: 999px;
  font-family: var(--display);
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: #6b4a00;
  background:
    linear-gradient(120deg, rgba(255,255,255,.55), transparent 40%),
    linear-gradient(135deg, #fff1b0 0%, #f0c94a 45%, #c89214 100%);
  border: 1px solid rgba(255, 236, 170, .95);
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 6px 14px rgba(200, 146, 20, .28);
  position: relative; overflow: hidden;
  flex: 0 0 auto;
  animation: vipGlow 2.8s ease-in-out infinite;
}
.vip-mark svg {
  width: 12px; height: 12px; fill: currentColor; flex: 0 0 auto;
}
.vip-mark::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -40%;
  width: 36%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg);
  animation: vipShine 2.8s ease-in-out infinite;
}
.vip-mark.inline { margin-left: 0; vertical-align: middle; }
.vip-mark.expired {
  color: #6b7280;
  background: #eef0f3;
  border-color: #e5e7eb;
  box-shadow: none;
  animation: none;
}
.vip-mark.expired::after { display: none; }
@keyframes vipGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}
@keyframes vipShine {
  0% { left: -50%; opacity: 0; }
  25% { opacity: .8; }
  100% { left: 120%; opacity: 0; }
}
/* 兼容旧 class */
.vip-badge { display: none; }
.user-chip-text strong {
  display: block; font-size: 14px; line-height: 1.2;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-chip-text .muted { font-size: 12px; margin-top: 2px; }

.person-chip {
  display: inline-flex; align-items: center; gap: 8px;
  vertical-align: middle;
}
.person-chip img, .person-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover; flex: 0 0 auto; background: #fff;
}
.person-chip strong { font-size: 13px; font-weight: 650; }
.platform-feed-avatar {
  border-radius: 8px !important;
  border: 1px solid var(--line);
  background: #fff;
}

.universal-key-box {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  background: #ffffff;
}
.tag-universal {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  background: #111318; color: #fff; margin-left: 6px;
  vertical-align: middle;
}
.tag-nokey {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  background: #f3f4f6; color: #6b7280; margin-left: 6px;
  vertical-align: middle;
  border: 1px solid var(--line);
}
.uni-key-card {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 18px;
  border-color: rgba(17,19,24,.12);
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(17,19,24,.035), transparent 55%),
    #fff;
}
.uni-key-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.uni-key-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.uni-key-brand-meta { min-width: 0; }
.uni-key-kicker {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(17,19,24,.38);
}
.uni-key-product {
  margin-top: 3px;
  font-size: 13px;
  font-weight: 600;
  color: var(--slate);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uni-key-stock {
  text-align: right;
  flex: 0 0 auto;
}
.uni-key-stock span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .04em;
}
.uni-key-stock strong {
  display: block;
  margin-top: 2px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}
@keyframes uniStockPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .72; }
}
.key-code-plate {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  gap: 12px;
  min-height: 0;
  padding: 22px 22px 16px;
  border-radius: 16px;
  background:
    radial-gradient(80% 120% at 50% -10%, rgba(255,255,255,.08), transparent 55%),
    #111318;
  color: #fff;
  isolation: isolate;
  transition: transform .35s var(--ease), box-shadow .35s ease;
}
.uni-key-card:hover .key-code-plate {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(17,19,24,.14);
}
.key-code-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255,255,255,.1) 48%,
    transparent 62%
  );
  transform: translateX(-120%);
  animation: keySheen 4.2s var(--ease) infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes keySheen {
  0%, 55% { transform: translateX(-120%); }
  75%, 100% { transform: translateX(120%); }
}
.key-code-hero,
.key-code-hero.mono {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .12em;
  width: 100%;
  font-family: var(--display), var(--mono);
  font-size: clamp(28px, 3.6vw, 36px) !important;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
  word-break: break-all;
}
.key-code-hero[data-len="long"],
.key-code-hero.mono[data-len="long"] {
  font-size: clamp(22px, 2.8vw, 28px) !important;
  letter-spacing: .1em;
  gap: .08em;
}
.key-code-hero[data-len="xl"],
.key-code-hero.mono[data-len="xl"] {
  font-size: clamp(16px, 2.2vw, 22px) !important;
  letter-spacing: .06em;
  gap: .04em;
}
.key-code-ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px) scale(.92);
  animation: keyCharIn .6s var(--ease) calc(var(--c, 0) * 40ms + 60ms) both;
}
@keyframes keyCharIn {
  from { opacity: 0; transform: translateY(16px) scale(.92); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}
.key-code-inline,
.key-code-inline.mono {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .04em;
  font-family: var(--display), var(--mono);
  font-size: 20px !important;
  font-weight: 700;
  letter-spacing: .08em;
  white-space: normal;
}
.key-code-inline .key-code-ch {
  animation-duration: .4s;
}
.key-code-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.key-code-footer .tag-universal {
  margin-left: 0;
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
}
.key-code-sent {
  font-size: 12px;
  color: rgba(255,255,255,.55);
}
.key-code-sent strong {
  color: #fff;
  font-weight: 700;
}
.uni-key-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.uni-send-list {
  margin-top: 0;
  display: grid;
  gap: 6px;
}
.uni-send-head {
  font-size: 12px;
  font-weight: 700;
  color: #111318;
}
.uni-send-row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr) auto;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f4f6f8;
  color: var(--slate);
}
.uni-send-row .uni-k {
  display: inline-block;
  margin-right: 6px;
  color: rgba(17,19,24,.45);
  font-size: 11px;
}
.uni-send-row .mono { font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.uni-send-more { font-size: 11px; padding: 2px 4px; }
.uni-stock-chip {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  background: #111318;
  color: #fff;
  white-space: nowrap;
}
.switch-with-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  user-select: none;
}

.platform-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.platform-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  background: #fff;
  display: flex; gap: 14px; align-items: center;
  animation: fadeUp .5s ease both;
  transition: transform .2s ease;
  min-height: 76px;
}
.platform-card:hover { transform: translateY(-2px); }
.platform-card:nth-child(2) { animation-delay: .05s; }
.platform-card:nth-child(3) { animation-delay: .1s; }
.logo {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; flex: 0 0 auto;
}
.logo.xianyu { background: #fff8d6; }
.logo.taobao { background: #ffe8de; }
.logo.xhs { background: #ffe4ea; }
.platform-card .meta {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.platform-card .name { display: none; }
.platform-card .sales {
  font-family: var(--display);
  font-size: 24px;
  line-height: 1.1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.platform-card .sub {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.stat {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: #fff;
  animation: fadeUp .55s ease both;
}
.stat .label { color: var(--muted); font-size: 12px; }
.stat .value { font-family: var(--display); font-size: 26px; margin-top: 8px; font-weight: 700; font-variant-numeric: tabular-nums; }

.tabs {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px;
  padding: 6px; border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.tab {
  border: 0; background: transparent; color: var(--muted);
  border-radius: 999px; padding: 10px 16px; cursor: pointer;
  transition: color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
  position: relative;
}
a.tab {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  font: inherit;
}
.tab:hover { color: var(--ink); background: rgba(0,0,0,.03); }
.tab.active {
  background: var(--accent); color: #fff;
  box-shadow: 0 8px 18px rgba(26,28,36,.18);
  transform: translateY(-1px);
}

.section { display: none; }
.section.active {
  display: block;
  animation: sectionIn .48s var(--ease) both;
}
@keyframes sectionIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.workspace { display: grid; gap: 18px; }
.workspace-hero {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding: 4px 2px 2px;
  animation: workspaceHeroIn .55s var(--ease) both;
}
.workspace-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.overview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.95fr);
  gap: 16px;
  align-items: start;
}
.overview-actions { animation-delay: .1s; }
.quick-ops {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.quick-op {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  padding: 14px 16px;
  border-radius: 16px !important;
  border: 1.5px solid rgba(17,19,24,.1) !important;
  background: #fff !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  transition: transform .25s var(--ease), border-color .25s ease, box-shadow .25s ease, background .25s ease !important;
  animation: itemCardIn .45s var(--ease) both;
}
.quick-op:nth-child(1) { animation-delay: .02s; }
.quick-op:nth-child(2) { animation-delay: .06s; }
.quick-op:nth-child(3) { animation-delay: .1s; }
.quick-op:nth-child(4) { animation-delay: .14s; }
.quick-op:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(17,19,24,.2) !important;
  box-shadow: 0 12px 28px rgba(17,19,24,.06) !important;
}
.quick-op.primary {
  background: #111318 !important;
  border-color: #111318 !important;
  color: #fff !important;
}
.quick-op.primary:hover {
  box-shadow: 0 16px 34px rgba(17,19,24,.2) !important;
}
.quick-op-ico {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  flex: 0 0 auto;
  background: #f4f5f7;
  color: #111318;
}
.quick-op-ico svg { width: 20px; height: 20px; display: block; }
.quick-op.primary .quick-op-ico {
  background: rgba(255,255,255,.12);
  color: #fff;
}
.quick-op-text { min-width: 0; display: grid; gap: 3px; }
.quick-op-text strong {
  font-size: 14px; font-weight: 700; line-height: 1.25;
}
.quick-op-text em {
  font-style: normal; font-size: 12px; color: var(--muted); line-height: 1.35;
}
.quick-op.primary .quick-op-text em { color: rgba(255,255,255,.62); }

.form-section {
  display: grid; gap: 10px;
  padding: 12px 0 4px;
  border-top: 1px solid var(--line);
}
.form-section:first-child { border-top: 0; padding-top: 0; }
.form-section-label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  color: var(--muted); text-transform: uppercase;
}
.sticky-actions { margin-top: 4px; }
.item-card-note {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f7f7f8;
  color: var(--slate);
  font-size: 12px; line-height: 1.45;
  word-break: break-all;
}
.item-card-note.is-content {
  background: #f4f6f8;
  color: #374151;
  white-space: pre-wrap;
}
.item-card-note.is-fail {
  background: #fff5f5;
  color: #b42318;
}
.item-card-note.is-warn {
  background: #fff8eb;
  color: #9a6700;
}
.order-rate-sync {
  margin-top: 8px;
  min-height: 32px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  border-radius: 999px !important;
}
.order-rates {
  margin-top: 8px;
  display: grid;
  gap: 6px;
}
.order-rate-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f3f7fb;
  font-size: 12px;
  line-height: 1.45;
}
.order-rate-label {
  color: #5b6b7c;
  font-weight: 600;
  white-space: nowrap;
}
.order-rate-pending {
  margin-left: 6px;
  color: #b45309;
  font-size: 12px;
}
.order-rate-text {
  color: #1f2937;
  word-break: break-word;
  white-space: pre-wrap;
}
.order-card-actions {
  min-width: 88px;
}
.order-card-actions .btn-accent,
.order-card-actions .secondary {
  width: 100%;
  min-height: 36px;
  padding: 8px 12px;
  font-size: 12px;
}

.platform-grab-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.platform-grab-card {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; text-align: center;
  padding: 18px 16px;
  border-radius: 18px !important;
  border: 1.5px solid rgba(17,19,24,.1) !important;
  background: #fff !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  transition: transform .25s var(--ease), border-color .25s ease, box-shadow .25s ease !important;
  animation: panelRise .5s var(--ease) both;
}
.platform-grab-card:nth-child(2) { animation-delay: .06s; }
.platform-grab-card:nth-child(3) { animation-delay: .12s; }
.platform-grab-card:hover {
  transform: translateY(-3px) !important;
  border-color: #111318 !important;
  box-shadow: 0 14px 32px rgba(17,19,24,.08) !important;
}
.platform-grab-card .logo-img {
  width: 42px; height: 42px; border-radius: 12px;
  object-fit: cover; flex: 0 0 auto;
  border: 1px solid var(--line);
}
.platform-grab-card strong { font-size: 15px; font-weight: 700; }
.cookie-actions .btn-accent { min-height: 40px; }
.workspace-kicker {
  margin: 0;
  font-family: var(--display);
  font-size: 11px; font-weight: 700; letter-spacing: .18em;
  color: var(--brand);
}
.workspace-title {
  margin: 6px 0 0;
  font-family: var(--display);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.1;
}
.workspace-sub {
  margin: 8px 0 0;
  color: var(--muted); font-size: 13px;
}
@keyframes workspaceHeroIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.workspace-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.08fr);
  gap: 16px;
  align-items: start;
}
.workspace-grid.orders-grid {
  grid-template-columns: minmax(300px, 0.88fr) minmax(0, 1.12fr);
}
/* 卡密页：以左侧录入高度为准，右侧对齐并内部滚动 */
.workspace-grid.keys-grid {
  align-items: start;
}
.workspace-grid.keys-grid > .panel {
  min-width: 0;
}
.workspace-grid.keys-grid .key-vault-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  /* 高度由 JS 同步为左侧录入面板高度 */
}
.workspace-grid.keys-grid .key-vault-panel .key-table-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.workspace-grid.keys-grid .key-table-body {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.grid-2 { display: grid; grid-template-columns: 1fr 1.15fr; gap: 16px; }
.grid-orders { display: grid; grid-template-columns: minmax(320px, 380px) 1fr; gap: 16px; align-items: start; }
.panel {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 22px;
  background: #ffffff;
  box-shadow: none;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s ease;
}
.panel:hover {
  border-color: rgba(17,19,24,.12);
  box-shadow: 0 18px 44px rgba(17,19,23,.06);
}
.soft-panel {
  animation: panelRise .55s var(--ease) both;
}
.editor-panel { animation-delay: .04s; }
.list-panel { animation-delay: .12s; }
@keyframes panelRise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.panel h2, .panel h3 {
  margin: 0;
  font-size: 16px;
  font-family: var(--display);
  letter-spacing: -0.02em;
  font-weight: 700;
}
.panel-chip {
  display: inline-flex; align-items: center;
  min-height: 24px; padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 11px; font-weight: 650;
}
.slim-form { gap: 12px; }
.slim-form .field { min-width: 0; }
.field-hint {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.inline-add {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.item-stack {
  display: grid;
  gap: 10px;
  max-height: min(68vh, 720px);
  overflow: auto;
  padding-right: 2px;
}

/* 卡密库存 · LICENSE VAULT */
.key-vault-panel {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 100% -10%, rgba(193, 18, 31, 0.07), transparent 55%),
    radial-gradient(90% 60% at 0% 100%, rgba(17, 19, 24, 0.04), transparent 50%),
    #fff;
}
.key-vault-panel .key-filter-tabs {
  flex: 0 0 auto;
}
.key-vault-panel .key-search-bar {
  flex: 0 0 auto;
}
.key-vault-panel .key-vault-head {
  flex: 0 0 auto;
}
.key-vault-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand), var(--ink), transparent);
  opacity: .55;
  pointer-events: none;
}
.key-vault-head {
  align-items: flex-end;
}
.key-vault-kicker {
  margin: 0 0 4px;
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--brand);
}
.key-vault-count {
  min-width: 42px;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  animation: keyCountPulse 2.8s var(--ease) infinite;
}
@keyframes keyCountPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

.key-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.key-filter-tab {
  appearance: none;
  position: relative;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.82);
  color: var(--slate);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  transition: transform .25s var(--ease), background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.key-filter-tab em {
  font-style: normal;
  margin-left: 5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.key-filter-tab:hover {
  transform: translateY(-1px);
  color: var(--ink);
  border-color: rgba(17,19,24,.16);
}
.key-filter-tab.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  box-shadow: 0 10px 24px rgba(17,19,24,.18);
}
.key-filter-tab.active em { color: rgba(255,255,255,.7); }
.key-filter-tab.active::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
  animation: keyTabUnderline .35s var(--ease) both;
}
@keyframes keyTabUnderline {
  from { transform: scaleX(.3); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}

.key-search-bar {
  margin: 0 0 12px;
}
.key-search-bar input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  background: rgba(255,255,255,.9);
  color: var(--ink);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.key-search-bar input:focus {
  border-color: rgba(17,19,24,.22);
  box-shadow: 0 0 0 3px rgba(17,19,24,.06);
}

.key-table-wrap {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 16px 40px rgba(17,19,24,.04);
  backdrop-filter: blur(8px);
  min-width: 0;
  width: 100%;
}
.key-table-wrap .key-table-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(17,19,24,.02), transparent 40%);
  overflow-x: hidden;
  overflow-y: auto;
}
.key-table-wrap[data-view="used"] .key-table-body {
  gap: 12px;
  padding: 12px;
}
.key-table-body {
  max-height: min(62vh, 640px);
  overflow-x: hidden;
  overflow-y: auto;
}

/* 库存卡：纵向信息块，订单号再长也不撑开整行 */
.key-stock-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(17,19,24,.06);
  border-radius: 14px;
  background: #fff;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  animation: keyRowIn .42s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 28ms);
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s var(--ease);
}
.key-stock-card:hover {
  border-color: rgba(193, 18, 31, 0.18);
  box-shadow: 0 10px 24px rgba(17,19,24,.05);
  transform: translateY(-1px);
}
.key-stock-card.is-uni {
  background:
    linear-gradient(135deg, rgba(17,19,24,.03), transparent 50%),
    #fff;
}
@keyframes keyRowIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.key-stock-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.key-stock-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.key-stock-code {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.key-stock-code .key-row-code {
  font-size: 15px;
  letter-spacing: .12em;
}
.key-stock-flags {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.key-stock-months {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(17,19,24,.04);
  white-space: nowrap;
}
.key-stock-shop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  min-width: 0;
  font-size: 12px;
  color: var(--slate);
}
.key-stock-shop .shop-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-width: 0;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(17,19,24,.04);
  border: 1px solid rgba(17,19,24,.05);
  color: var(--ink);
  font-weight: 600;
  font-size: 11px;
}
.key-stock-shop .shop-chip em {
  font-style: normal;
  color: var(--muted);
  font-weight: 500;
  flex: 0 0 auto;
}
.key-stock-shop .shop-chip strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
}
.key-stock-shop .prod-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
}
.key-stock-extra {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  min-width: 0;
}
.key-stock-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  font-size: 11px;
  color: var(--muted);
}
.key-stock-line > span {
  flex: 0 0 auto;
  letter-spacing: .04em;
}
.key-stock-line > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-weight: 600;
  font-size: 11px;
}
.key-stock-line > strong.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .02em;
}
.key-stock-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
  margin-top: 2px;
}

.key-code-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}
.key-ico {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #1a1c24, #111318);
  color: #fff;
  box-shadow: 0 6px 14px rgba(17,19,24,.18);
  position: relative;
  overflow: hidden;
}
.key-ico svg { width: 14px; height: 14px; display: block; }
.key-ico::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.28), transparent 70%);
  transform: translateX(-120%) rotate(18deg);
  animation: keyIcoSheen 2.8s var(--ease) infinite;
}
.key-stock-card:hover .key-ico {
  animation: keyIcoPop .45s var(--ease);
}
.key-ico.is-used {
  background: linear-gradient(145deg, #c1121f, #8f0d16);
  box-shadow: 0 6px 16px rgba(193,18,31,.28);
}
.key-ico.is-disabled {
  background: linear-gradient(145deg, #6b7280, #4b5563);
}
@keyframes keyIcoSheen {
  0%, 55% { transform: translateX(-120%) rotate(18deg); }
  75%, 100% { transform: translateX(120%) rotate(18deg); }
}
@keyframes keyIcoPop {
  0% { transform: scale(1) rotate(0); }
  40% { transform: scale(1.12) rotate(-8deg); }
  100% { transform: scale(1) rotate(0); }
}

.key-row-code {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: .1em;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
}
button.ghost.tiny,
button.secondary.tiny {
  padding: 3px 7px;
  font-size: 11px;
  min-height: 0;
  border-radius: 7px;
  transition: transform .2s var(--ease), background .2s ease;
}
button.ghost.tiny:hover,
button.secondary.tiny:hover { transform: translateY(-1px); }

/* 已激活详情卡 */
.key-activated-card {
  position: relative;
  flex: 0 0 auto;
  min-height: min-content;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 14px 12px;
  background:
    linear-gradient(135deg, rgba(193,18,31,.06), transparent 42%),
    #fff;
  box-shadow: 0 10px 28px rgba(17,19,24,.05);
  animation: keyActIn .5s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 45ms);
  transition: transform .25s var(--ease), box-shadow .25s ease;
  overflow: visible;
  box-sizing: border-box;
}
.key-activated-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(17,19,24,.08);
}
@keyframes keyActIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: none; }
}
.key-activated-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.key-activated-code {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.key-activated-code .key-row-code {
  font-size: 18px;
  letter-spacing: .14em;
}
.key-activated-product {
  font-size: 11px;
  margin-top: 3px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.key-activated-shop {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  margin-top: 6px;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(17,19,24,.04);
  border: 1px solid rgba(17,19,24,.05);
  font-size: 11px;
  color: var(--ink);
  font-weight: 600;
}
.key-activated-shop em {
  font-style: normal;
  color: var(--muted);
  font-weight: 500;
  flex: 0 0 auto;
}
.key-activated-shop strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
}
.key-activated-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.key-activated-time {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.key-activated-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: min-content;
  align-content: start;
  gap: 8px 12px;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.key-activated-item {
  min-width: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(17,19,24,.03);
  border: 1px solid rgba(17,19,24,.04);
}
.key-activated-item span {
  display: block;
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 3px;
}
.key-activated-item strong {
  display: block;
  font-size: 12px;
  color: var(--ink);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.key-activated-item strong.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .02em;
  /* 设备码允许换行，避免被挤没 */
  white-space: normal;
  word-break: break-all;
  line-height: 1.35;
}
.key-activated-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
  border-top: 1px dashed var(--line);
  padding-top: 10px;
  margin-top: 2px;
}

.key-empty {
  padding: 36px 12px;
  text-align: center;
  color: var(--muted);
}
@media (max-width: 900px) {
  .key-stock-top { flex-wrap: wrap; }
  .key-stock-actions { justify-content: flex-start; }
  .key-activated-grid { grid-template-columns: 1fr; }
}
.item-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  transition: transform .25s var(--ease), border-color .25s ease, box-shadow .25s ease;
  animation: itemCardIn .45s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
.item-card:hover {
  transform: translateY(-2px);
  border-color: rgba(17,19,24,.14);
  box-shadow: 0 12px 28px rgba(17,19,24,.05);
}
.item-card.compact { padding: 12px 14px; }
@keyframes itemCardIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.item-card-main {
  display: flex; align-items: flex-start; gap: 12px; min-width: 0; flex: 1;
}
.item-card-logo .logo-img {
  width: 40px; height: 40px; border-radius: 12px;
  object-fit: cover; display: block;
  border: 1px solid var(--line);
  background: #fff;
}
.logo-fallback {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: #111318; color: #fff;
  font-size: 13px; font-weight: 700;
}
.item-card-body { min-width: 0; }
.item-card-title {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 14px;
}
.item-card-title strong { font-weight: 700; }
.item-card-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 4px;
  color: var(--muted); font-size: 12px; line-height: 1.45;
}
.item-card-side {
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  flex: 0 0 auto;
}
.item-stat {
  text-align: right;
}
.item-stat span {
  display: block; font-size: 11px; color: var(--muted);
}
.item-stat strong {
  display: block; margin-top: 2px;
  font-family: var(--display); font-size: 18px; font-weight: 700;
}
.empty-state {
  display: grid; place-items: center;
  text-align: center;
  padding: 48px 16px;
  border: 1px dashed rgba(17,19,24,.12);
  border-radius: 18px;
  background: #fff;
  animation: emptyIn .55s var(--ease) both;
}
.empty-state p {
  margin: 12px 0 0;
  font-weight: 650; font-size: 14px;
}
.empty-state span {
  margin-top: 4px;
  color: var(--muted); font-size: 12px;
}
.empty-orb {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(193,18,31,.18);
  background: radial-gradient(circle at 35% 30%, rgba(193,18,31,.12), transparent 65%);
  animation: emptyOrb 2.8s ease-in-out infinite;
}
@keyframes emptyOrb {
  0%, 100% { transform: scale(1); opacity: .7; }
  50% { transform: scale(1.08); opacity: 1; }
}
@keyframes emptyIn {
  from { opacity: 0; transform: scale(.98); }
  to { opacity: 1; transform: none; }
}

.form-grid { display: grid; gap: 14px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

input, select, textarea, button { font: inherit; }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--soft);
  border-radius: 14px;
  padding: 12px 14px;
  color: var(--ink);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  background: #fff;
  border-color: rgba(26,28,36,.28);
  box-shadow: 0 0 0 4px rgba(26,28,36,.06);
}
textarea { min-height: 120px; resize: vertical; }
label.field-label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
button, .btn {
  border: 0; border-radius: 14px; padding: 11px 18px;
  background: var(--accent); color: #fff; cursor: pointer;
  font-weight: 650;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s ease, border-color .2s ease;
}
button:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(26,28,36,.16); }
button.secondary {
  background: #fff; color: var(--ink);
  border: 1.5px solid rgba(17,19,24,.16); box-shadow: none;
}
button.secondary:hover {
  border-color: rgba(17,19,24,.28);
  background: #fafafa;
  box-shadow: none;
}
button.danger { background: var(--brand); }
button.ghost.danger-text,
.danger-text {
  color: #b42318 !important;
  border-color: rgba(180, 35, 24, 0.35) !important;
}
button.ghost {
  background: #fff; color: var(--slate);
  border: 1.5px solid rgba(17,19,24,.12); box-shadow: none;
}
button:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-accent {
  background: #111318 !important; color: #fff !important;
  border: 0 !important;
  box-shadow: 0 10px 24px rgba(17,19,24,.16) !important;
}
.btn-accent:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(17,19,24,.22) !important;
}
.btn-block { width: 100%; justify-content: center; min-height: 46px; border-radius: 14px; }

.perm-box, .vip-config-box {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--soft);
}
.perm-grid {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.perm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  font-size: 12px; cursor: pointer;
  transition: border-color .2s ease, transform .2s var(--ease);
}
.perm-chip:hover { transform: translateY(-1px); }
.perm-chip input { width: auto; margin: 0; }
.access-editor {
  display: grid; gap: 12px;
  margin-top: 8px; padding-top: 12px;
  border-top: 1px dashed var(--line);
}

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td {
  text-align: left; padding: 14px 10px;
  border-bottom: 1px solid var(--line); vertical-align: middle;
}
th { color: var(--muted); font-weight: 600; font-size: 12px; }

.badge {
  display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px;
  background: var(--soft); white-space: nowrap;
}
.badge.ok { background: #e8f7ef; color: var(--ok); }
.badge.warn { background: #fff4e5; color: var(--warn); }
.badge.fail { background: #fdebec; color: var(--accent); }
.badge.idle { background: #f3f4f6; color: #4b5563; }
.badge.testing {
  background: #eef2ff; color: #3730a3;
  animation: blink 1.2s ease infinite;
}

.plat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot.xianyu { background: #e6b800; }
.dot.taobao { background: var(--taobao); }
.dot.xhs { background: var(--xhs); }

.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: 12px; white-space: pre-wrap; }
.alert {
  background: #fff8eb; border: 1px solid #f0d7a3; color: #8a5a00;
  padding: 10px 12px; border-radius: 12px; margin-bottom: 12px; font-size: 13px;
}

.stock-alert {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  margin: 0 0 16px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(196, 120, 12, 0.22);
  background:
    linear-gradient(135deg, rgba(255,248,235,.96), rgba(255,255,255,.92)),
    radial-gradient(120% 80% at 0% 0%, rgba(255, 196, 64, 0.22), transparent 55%);
  box-shadow: 0 14px 36px rgba(140, 84, 8, 0.08);
  animation: stockIn .55s cubic-bezier(.2,.8,.2,1) both;
}
.stock-alert.critical {
  border-color: rgba(196, 48, 48, 0.28);
  background:
    linear-gradient(135deg, rgba(255, 242, 242, .98), rgba(255,255,255,.94)),
    radial-gradient(120% 80% at 0% 0%, rgba(255, 88, 88, 0.18), transparent 55%);
  box-shadow: 0 16px 40px rgba(160, 28, 28, 0.1);
}
.stock-alert-beam {
  position: absolute; inset: 0 auto 0 -40%;
  width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg);
  animation: stockBeam 2.8s ease-in-out infinite;
  pointer-events: none;
}
.stock-alert-icon {
  position: relative;
  width: 52px; height: 52px;
  border-radius: 16px;
  display: grid; place-items: center;
  background: #111318; color: #ffd56a;
  font-size: 22px; font-weight: 800;
  box-shadow: 0 10px 24px rgba(17,19,24,.18);
}
.stock-alert.critical .stock-alert-icon { color: #ff8e8e; }
.stock-ring {
  position: absolute; inset: -6px;
  border: 1.5px solid rgba(255, 196, 64, .45);
  border-radius: 20px;
  animation: stockPulse 1.8s ease-out infinite;
}
.stock-ring.delay { animation-delay: .6s; opacity: .55; }
.stock-alert.critical .stock-ring { border-color: rgba(255, 110, 110, .5); }
.stock-alert-main { min-width: 0; }
.stock-alert-head {
  display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
}
.stock-alert-kicker {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: #a56b10; font-weight: 700; margin-bottom: 2px;
}
.stock-alert.critical .stock-alert-kicker { color: #b42318; }
.stock-alert-title { font-size: 16px; font-weight: 750; color: #1c1917; }
.stock-alert-count {
  min-width: 48px; text-align: center; font-size: 22px; font-weight: 800; line-height: 1;
  color: #8a5a00;
}
.stock-alert.critical .stock-alert-count { color: #b42318; }
.stock-alert-count span { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.stock-alert-items {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}
.stock-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(168, 110, 18, 0.16);
  font-size: 12px;
  animation: stockChip .45s ease both;
}
.stock-chip.empty {
  border-color: rgba(180, 35, 24, 0.22);
  background: rgba(255, 236, 236, .9);
}
.stock-chip-name { font-weight: 600; color: #292524; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-chip-val { color: #a56b10; font-weight: 700; font-variant-numeric: tabular-nums; }
.stock-chip.empty .stock-chip-val { color: #b42318; }
@keyframes stockIn {
  from { opacity: 0; transform: translateY(-8px) scale(.985); }
  to { opacity: 1; transform: none; }
}
@keyframes stockBeam {
  0% { left: -40%; opacity: 0; }
  20% { opacity: .7; }
  55% { opacity: .35; }
  100% { left: 110%; opacity: 0; }
}
@keyframes stockPulse {
  0% { transform: scale(.92); opacity: .75; }
  100% { transform: scale(1.28); opacity: 0; }
}
@keyframes stockChip {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.cookie-guide { margin-bottom: 0; }
.cookie-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.cookie-guide-item {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: #ffffff;
}
.cookie-guide-brand {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px; font-size: 14px;
}
.cookie-guide-brand .logo-img { width: 32px; height: 32px; border-radius: 9px; }
.cookie-guide-item ol {
  margin: 0; padding-left: 18px;
  color: #444; font-size: 12.5px; line-height: 1.75;
}
.cookie-guide-item code, .cookie-guide-item kbd {
  font-family: var(--mono);
  font-size: 11.5px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 5px;
}
@media (max-width: 1100px) {
  .cookie-guide-grid { grid-template-columns: 1fr; }
}
.toast {
  position: fixed; right: 18px; bottom: 18px; background: var(--ink); color: #fff;
  padding: 12px 16px; border-radius: 12px; opacity: 0; transform: translateY(8px);
  transition: .25s ease; max-width: 360px; z-index: 40;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* —— 聊天记录（主站页签） —— */
.chat-desk { display: grid; gap: 0; }
.chat-desk-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chat-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  animation: chatRise .45s var(--ease) both;
}
.chat-panel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #fafbfc;
}
.chat-plat-cards {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px;
  border-radius: 999px;
  background: #eef0f3;
}
.chat-plat-card {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--slate);
  cursor: pointer;
  transition: background .22s ease, color .22s ease, transform .22s var(--ease), box-shadow .22s ease;
  animation: chatRise .4s var(--ease) both;
}
.chat-plat-card:nth-child(2) { animation-delay: .04s; }
.chat-plat-card:nth-child(3) { animation-delay: .08s; }
.chat-plat-card img {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  border: 1px solid rgba(17,19,24,.08); background: #fff;
}
.chat-plat-card span {
  font-size: 13px; font-weight: 700;
}
.chat-plat-card:hover { transform: translateY(-1px); }
.chat-plat-card.active {
  background: #111318; color: #fff;
  box-shadow: 0 8px 18px rgba(17,19,24,.16);
}
.chat-plat-card.active img { border-color: rgba(255,255,255,.18); }
.chat-seller-select {
  min-width: 140px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 10px;
  background: #fff;
  font-size: 13px;
}
.chat-refresh { border-radius: 999px !important; }
.chat-panel-body {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  min-height: 420px;
  max-height: min(58vh, 560px);
}
.chat-list-col {
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #fff;
}
.chat-list-label {
  padding: 12px 14px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.chat-search {
  margin: 0 12px 8px;
  width: calc(100% - 24px);
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  background: #f7f8fa;
  font-size: 13px;
}
.chat-session-list {
  flex: 1;
  overflow: auto;
  padding: 2px 8px 10px;
}
.chat-session-item {
  width: 100%;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: 12px;
  padding: 8px;
  cursor: pointer;
  transition: background .2s ease, transform .2s var(--ease);
  animation: chatRise .35s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 28ms);
}
.chat-session-item:hover { background: rgba(17,19,24,.04); }
.chat-session-item.active {
  background: #fff;
  color: var(--ink);
  border: 1px solid rgba(17,19,24,.12);
  box-shadow: 0 6px 16px rgba(17,19,24,.06);
}
.chat-session-item.active .chat-session-preview,
.chat-session-item.active .chat-session-time,
.chat-session-item.active .chat-plat-tag { color: var(--muted); }
.chat-session-avatar {
  width: 36px; height: 36px; border-radius: 10px;
  object-fit: cover; background: #fff;
  border: 1px solid var(--line);
}
.chat-session-name {
  font-size: 13px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-plat-tag {
  margin-top: 1px;
  font-size: 11px; font-weight: 650; color: var(--slate);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-session-preview {
  margin-top: 2px;
  font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-session-time {
  font-size: 11px; color: var(--muted);
  white-space: nowrap;
  align-self: start;
  padding-top: 2px;
}
.chat-room-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-room-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
.chat-room-head-logo {
  width: 34px; height: 34px; border-radius: 10px; object-fit: cover;
  border: 1px solid var(--line); background: #fff;
  animation: chatPop .4s var(--ease) both;
}
.chat-room-head-text { min-width: 0; }
.chat-room-head strong {
  display: block;
  font-size: 14px; font-weight: 700;
}
.chat-room-head .muted { font-size: 12px; }
.chat-room-msgs {
  flex: 1;
  overflow: auto;
  padding: 12px 14px 16px;
  background: #f7f8fa;
}
.chat-blank {
  padding: 20px 12px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.chat-blank.tall {
  min-height: 180px;
  display: grid;
  place-content: center;
  gap: 6px;
  padding: 24px 12px;
}
.chat-empty-logo {
  width: 40px; height: 40px; border-radius: 12px; object-fit: cover;
  margin: 0 auto;
  border: 1px solid var(--line);
  animation: chatFloat 2.8s ease-in-out infinite;
}
.chat-msg {
  display: flex;
  margin: 8px 0;
  animation: chatRise .3s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 22ms);
}
.chat-msg.mine { justify-content: flex-end; }
.chat-msg-bubble {
  max-width: min(78%, 480px);
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-msg.mine .chat-msg-bubble {
  background: #fff;
  border-color: rgba(17,19,24,.14);
  color: var(--ink);
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 14px rgba(17,19,24,.05);
}
.chat-msg:not(.mine) .chat-msg-bubble { border-bottom-left-radius: 4px; }
.chat-msg-meta {
  margin-top: 5px;
  font-size: 11px;
  opacity: .5;
}
@keyframes chatRise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes chatPop {
  from { opacity: 0; transform: scale(.9); }
  to { opacity: 1; transform: none; }
}
@keyframes chatFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@media (max-width: 900px) {
  .chat-panel-body {
    grid-template-columns: 1fr;
    max-height: none;
    min-height: 0;
  }
  .chat-list-col {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    max-height: 280px;
  }
  .chat-room-msgs { min-height: 260px; }
  .chat-seller-select { width: 100%; }
}

/* —— 全系统通用对话框 —— */
.app-dialog-mask {
  position: fixed; inset: 0; z-index: 12000;
  display: grid; place-items: center;
  padding: 24px;
  background: rgba(17, 19, 24, .3);
  animation: appDialogMaskIn .28s ease both;
}
.app-dialog-mask.hidden { display: none !important; }
.app-dialog-mask.out { animation: appDialogMaskOut .22s ease forwards; }
@keyframes appDialogMaskIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes appDialogMaskOut {
  to { opacity: 0; }
}
.app-dialog {
  position: relative;
  width: min(420px, 100%);
  padding: 28px 26px 22px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 28px 80px rgba(17, 19, 24, .22);
  overflow: hidden;
  animation: appDialogIn .42s var(--ease) both;
}
.app-dialog-mask.out .app-dialog {
  animation: appDialogOut .2s ease forwards;
}
@keyframes appDialogIn {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes appDialogOut {
  to { opacity: 0; transform: translateY(8px) scale(.98); }
}
.app-dialog-orb {
  position: absolute; right: 34px; top: -30px;
  width: 170px; height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(193,18,31,.1), transparent 62%);
  pointer-events: none;
  animation: appDialogOrb 2.8s ease-in-out infinite;
}
@keyframes appDialogOrb {
  0%, 100% { transform: scale(1); opacity: .85; }
  50% { transform: scale(1.08); opacity: 1; }
}
.app-dialog-kicker {
  position: relative; z-index: 1;
  font-family: var(--display);
  font-size: 10px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brand);
}
.app-dialog.is-danger .app-dialog-kicker { color: var(--brand); }
.app-dialog.is-prompt .app-dialog-kicker { color: var(--slate); }
.app-dialog-title {
  position: relative; z-index: 1;
  margin: 10px 0 0;
  font-family: var(--display);
  font-size: 22px; font-weight: 700; line-height: 1.25;
  color: var(--ink);
}
.app-dialog-msg {
  position: relative; z-index: 1;
  margin: 12px 0 0;
  font-size: 14px; line-height: 1.62; color: var(--slate);
}
.app-dialog-msg:empty { display: none; }
.app-dialog-field {
  position: relative; z-index: 1;
  margin-top: 16px;
}
.app-dialog-field.hidden { display: none !important; }
.app-dialog-input {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(17,19,24,.12);
  background: #f7f8fa;
  font-family: inherit;
  font-size: 15px; font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.app-dialog-input:focus {
  background: #fff;
  border-color: rgba(17,19,24,.28);
  box-shadow: 0 0 0 4px rgba(17,19,24,.06);
}
.app-dialog-actions {
  position: relative; z-index: 1;
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 22px;
}
.app-dialog-actions .secondary,
.app-dialog-actions .btn-accent,
.app-dialog-actions .btn-danger {
  min-width: 96px;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 650;
}
.app-dialog .btn-danger,
.app-dialog .btn-accent {
  border: 0;
  background: #111114;
  color: #fff;
  box-shadow: 0 8px 20px rgba(17, 19, 24, .18);
}
.app-dialog .btn-danger:hover,
.app-dialog .btn-accent:hover { filter: brightness(1.35); }
.app-dialog-actions .secondary {
  background: #fff;
  border: 1px solid rgba(17, 19, 24, .16);
  color: var(--ink);
  box-shadow: none;
}
.app-dialog-actions .secondary:hover { background: #f6f6f7; }

.panel-desc { margin: -8px 0 16px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.panel-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.panel-head h2, .panel-head h3 { margin: 0; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

.platforms-layout {
  display: grid;
  gap: 18px;
  width: 100%;
  max-width: none;
}
.platform-create-card { width: 100%; margin-bottom: 0; }
.soft-hr {
  border: 0; border-top: 1px solid var(--line); margin: 22px 0;
}
.seller-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}
.seller-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  background: #fff;
  animation: feedIn .4s ease both;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  gap: 12px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.seller-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(17,19,24,.06); }
.seller-card .brand-top {
  display: flex; gap: 14px; align-items: center; justify-content: space-between;
  margin-bottom: 14px; flex-wrap: wrap;
}
.seller-card .brand-left { display: flex; gap: 12px; align-items: center; min-width: 0; }
.seller-card .brand-top img.logo-img,
.seller-card .brand-left img.logo-img {
  width: 52px; height: 52px; border-radius: 14px; flex: 0 0 auto;
  box-shadow: 0 6px 16px rgba(17,19,24,.08); object-fit: cover;
}
.seller-card .brand-top strong { font-size: 17px; display: block; }
.seller-card .fields,
.seller-card form.seller-form {
  display: grid;
  gap: 14px;
  width: 100%;
  flex: 1;
}
.seller-card .fields input,
.seller-card .fields textarea,
.seller-card form.seller-form input,
.seller-card form.seller-form textarea,
.seller-card form.seller-form select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.seller-card form.seller-form textarea { min-height: 96px; }
.seller-card .actions {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.seller-card .actions button { width: 100%; border-radius: 12px; }
.status-live {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 12px; background: var(--soft); font-size: 13px;
}
.status-live .orb {
  width: 10px; height: 10px; border-radius: 50%; background: #9ca3af; flex: 0 0 auto;
}
.status-live.ok .orb { background: var(--ok); box-shadow: 0 0 0 0 rgba(15,122,76,.35); animation: pingOk 1.8s infinite; }
.status-live.error .orb { background: var(--accent); }
.status-live.testing .orb { background: #4f46e5; animation: blink 1s infinite; }

.notify-toggle-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f7f8fa;
}
.notify-toggle-card strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}
.notify-toggle-card p {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

/* —— 个人 / 企微 —— */
.settings-workspace { gap: 20px; }
.settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.78fr);
  gap: 16px;
  align-items: start;
}
.settings-main {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.settings-side {
  min-width: 0;
  position: sticky;
  top: 14px;
}
.settings-card {
  animation: panelRise .55s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.settings-card .panel-head {
  align-items: flex-start;
  margin-bottom: 18px;
}
.settings-card-sub {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 400;
}
.settings-card-sub a {
  color: var(--slate);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.settings-avatar {
  background: #f7f8fa;
  padding: 14px 16px;
}
.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.settings-actions button { min-height: 42px; }
.settings-hint-block {
  margin: -4px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f7f8fa;
  border: 1px dashed var(--line);
}
.doubao-preview-box {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
}
.doubao-preview-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin-bottom: 14px;
}
.doubao-preview-head strong {
  font-size: 15px;
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.chip-btn:hover {
  border-color: var(--slate);
}
.chip-btn.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.doubao-preview-result {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f7f8fa;
  border: 1px solid var(--line);
  display: grid;
  gap: 10px;
}
.doubao-preview-result .order-rate-text.is-error {
  color: #b42318;
}
.settings-hint-block code {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink);
}
.settings-lab {
  animation: panelRise .55s var(--ease) both;
  animation-delay: .08s;
  background:
    linear-gradient(165deg, #ffffff 0%, #fafbfc 55%, #f4f5f7 100%);
  border-color: rgba(17, 19, 24, 0.1);
}
.settings-lab .panel-head { margin-bottom: 14px; }
.settings-lab-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.settings-lab-steps span {
  display: grid;
  place-items: center;
  min-height: 32px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--slate);
  background: #fff;
  border: 1px solid var(--line);
  position: relative;
}
.settings-lab-steps span:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  width: 6px;
  height: 1px;
  background: rgba(17, 19, 24, 0.18);
  transform: translateY(-50%);
  z-index: 1;
}
.settings-lab-go {
  width: 100%;
  min-height: 48px;
  border-radius: 14px !important;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.settings-lab-tip {
  margin-top: 16px;
  padding: 14px 14px 13px;
  border-radius: 14px;
  background: rgba(17, 19, 24, 0.04);
  border: 1px solid var(--line);
}
.settings-lab-tip strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 4px;
}
.settings-lab-tip p {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
}
.switch {
  position: relative; width: 42px; height: 24px; display: inline-block;
  flex: 0 0 auto;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; inset: 0; background: #d1d5db; border-radius: 999px; cursor: pointer;
  transition: .2s ease;
}
.switch .slider::before {
  content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: .2s ease;
}
.switch input:checked + .slider { background: var(--ok); }
.switch input:checked + .slider::before { transform: translateX(18px); }
.enable-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }

.orders-workspace {
  display: grid;
  grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.order-form { display: grid; gap: 12px; }
.order-form input, .order-form select { min-height: 44px; }
.order-list-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 12px;
  background: #ffffff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  animation: fadeUp .35s ease both;
  transition: border-color .2s ease, transform .2s ease;
}
.order-list-card:hover { border-color: #d7dbe3; transform: translateY(-1px); }
.order-list-card .title { font-weight: 700; margin-bottom: 4px; }
.order-list-card .meta { color: var(--muted); font-size: 12px; line-height: 1.5; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.row-actions button { padding: 8px 12px; font-size: 12px; }
.tag {
  display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: #f3f4f6; color: #4b5563; margin-left: 6px;
}
.tag.test { background: #fff4e5; color: var(--warn); }
.tag.auto { background: #eef2ff; color: #3730a3; }

.logo-img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; display: block; }
.logo-stack {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.logo-stack .logo-img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  margin-left: -6px;
  box-shadow: 0 0 0 2px #fff;
}
.logo-stack .logo-img:first-child { margin-left: 0; }
.item-card-logo .logo-stack .logo-img {
  width: 32px;
  height: 32px;
}

.notify-stack {
  /* 高于欢迎页(9999)与通用对话框(12000)，进入系统时新单提醒不能被挡住 */
  position: fixed; right: 20px; bottom: 20px; z-index: 13050;
  display: flex; flex-direction: column-reverse; gap: 12px; width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.notify-card {
  pointer-events: auto;
  background: #111318; color: #fff; border-radius: 18px; padding: 16px 18px;
  box-shadow: 0 20px 50px rgba(17,19,24,.28);
  animation: notifyIn .45s cubic-bezier(.2,.8,.2,1) both;
  border: 1px solid rgba(255,255,255,.08);
  position: relative; overflow: hidden;
}
.notify-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent);
}
.notify-card.ok::before { background: var(--ok); }
.notify-card.order::before { background: #f5a524; }
.notify-card .n-title { font-weight: 700; font-size: 15px; margin-bottom: 8px; padding-right: 24px; }
.notify-card .n-body { font-size: 13px; color: rgba(255,255,255,.78); line-height: 1.55; }
.notify-card .n-grid {
  display: grid; gap: 6px; font-size: 13px; color: rgba(255,255,255,.86);
}
.notify-card .n-grid div { display: flex; justify-content: space-between; gap: 12px; }
.notify-card .n-grid span { color: rgba(255,255,255,.55); flex: 0 0 auto; }
.notify-card .n-grid strong { font-weight: 600; text-align: right; word-break: break-all; }
.notify-card .n-close {
  position: absolute; right: 10px; top: 10px; border: 0; background: transparent;
  color: rgba(255,255,255,.55); cursor: pointer; padding: 4px 8px; border-radius: 8px;
}
.notify-card.out { animation: notifyOut .35s ease forwards; }
.toast { bottom: 18px; right: 18px; z-index: 55; }

.admin-card {
  border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin-bottom: 14px;
  display: grid; gap: 14px;
  animation: feedIn .4s ease both;
  background: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.admin-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(17,19,24,.06); }
.admin-user-main { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.admin-user-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: #eef1f6;
  border: 1px solid rgba(17, 19, 24, 0.06);
}
.admin-user-avatar.sm { width: 32px; height: 32px; }
.admin-drawer-title-row { display: inline-flex; align-items: center; gap: 10px; }
.admin-card .admin-head {
  display: grid; grid-template-columns: 1.2fr auto; gap: 12px; align-items: center;
}
.admin-card .metrics {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; font-size: 12px;
}
.admin-card .metrics div {
  background: var(--soft); border-radius: 12px; padding: 10px 12px;
  animation: fadeUp .35s ease both;
}
.admin-card .metrics strong { display: block; font-size: 15px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.admin-card .product-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-card .product-chip {
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; font-size: 12px;
  background: #fff; animation: fadeUp .4s ease both;
}
.admin-card .product-chip em { color: var(--muted); font-style: normal; margin-left: 6px; }
.admin-card.clickable { cursor: pointer; }
.admin-card.clickable:active { transform: scale(.995); }

.drawer-mask {
  position: fixed; inset: 0; background: rgba(17,19,24,.35); z-index: 70;
  animation: fadeUp .2s ease both;
}
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100vw);
  background: #fff; z-index: 80; box-shadow: -16px 0 40px rgba(17,19,24,.12);
  display: flex; flex-direction: column;
  animation: drawerIn .35s cubic-bezier(.2,.8,.2,1) both;
}
.drawer-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 20px 22px; border-bottom: 1px solid var(--line);
}
.drawer-head h2 { margin: 0; font-size: 18px; }
.drawer-body {
  padding: 18px 22px 28px; overflow: auto; display: grid; gap: 14px;
}
.drawer-body .metrics {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; font-size: 12px;
}
.drawer-body .metrics div {
  background: var(--soft); border-radius: 12px; padding: 10px 12px;
}
.drawer-body .metrics strong { display: block; font-size: 15px; margin-top: 4px; }
.drawer-body .brand-left, .drawer-row .logo-img { display: inline-flex; vertical-align: middle; }
.drawer-body .logo-img { width: 28px; height: 28px; border-radius: 8px; }
.drawer-section {
  border: 1px solid var(--line); border-radius: 14px; padding: 14px;
  animation: feedIn .35s ease both;
}
.drawer-section h3 { margin: 0 0 10px; font-size: 14px; }
.drawer-row {
  display: flex; justify-content: space-between; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--line); font-size: 13px;
}
.drawer-row:last-child { border-bottom: 0; }

@keyframes drawerIn {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: none; }
}

.cookie-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 10px;
}
.cookie-grab-mask {
  position: fixed; inset: 0; z-index: 9600;
  display: grid; place-items: center;
  padding: 24px;
  background: rgba(17, 19, 24, .3);
}
.cookie-grab-mask.hidden { display: none !important; }
.cookie-grab-card {
  width: min(520px, 100%);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 22px 22px 20px;
  box-shadow: 0 28px 70px rgba(17,19,24,.14);
  animation: welcomeCardIn .45s var(--ease) both;
}
.cookie-grab-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.cookie-grab-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700;
}
.cookie-grab-brand .logo-img { width: 36px; height: 36px; border-radius: 10px; }
.cookie-grab-title {
  margin: 14px 0 0;
  font-family: var(--display);
  font-size: 22px;
}
.cookie-grab-desc {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.cookie-grab-status {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 13px;
  line-height: 1.5;
}
.cookie-grab-status.testing { border-color: rgba(180,83,9,.25); background: #fffaf3; color: #9a5b10; }
.cookie-grab-status.ok { border-color: rgba(20,122,92,.25); background: #f3fbf7; color: #147a5c; }
.cookie-grab-status.warn { border-color: rgba(180,83,9,.25); background: #fff8eb; color: #8a5a00; }
.cookie-grab-status.fail { border-color: rgba(193,18,31,.22); background: #fff5f5; color: #b42318; }
.cookie-grab-steps {
  margin: 14px 0 0;
  padding-left: 18px;
  color: var(--slate);
  font-size: 13px;
  line-height: 1.65;
}
.cookie-grab-actions { margin-top: 16px; }

.online-dot {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px;
  background: #9ca3af;
}
.online-dot.on { background: var(--ok); box-shadow: 0 0 0 3px rgba(15,122,76,.15); }

.timeline-item {
  display: block; margin-bottom: 12px;
  animation: feedIn .45s cubic-bezier(.2,.8,.2,1) both;
}
.timeline-item:nth-child(2) { animation-delay: .04s; }
.timeline-item:nth-child(3) { animation-delay: .08s; }
.timeline-item:nth-child(4) { animation-delay: .12s; }
.timeline-item .pulse {
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(193,18,31,.35); animation: ping 1.8s infinite;
}
.timeline-item .pulse.ok { background: var(--ok); box-shadow: 0 0 0 0 rgba(15,122,76,.35); animation: pingOk 1.8s infinite; }
.timeline-item .body {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  transition: transform .2s ease, border-color .2s ease;
}
.timeline-item .body:hover { transform: translateY(-1px); border-color: #d7dbe3; }
.timeline-item .feed-top {
  display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap;
}
.timeline-item .feed-top-left {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
}
.timeline-item .feed-title {
  margin-top: 8px; font-weight: 700; font-size: 14px;
}
.timeline-item .feed-meta {
  margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.55;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(193,18,31,.35); }
  70% { box-shadow: 0 0 0 10px rgba(193,18,31,0); }
  100% { box-shadow: 0 0 0 0 rgba(193,18,31,0); }
}
@keyframes pingOk {
  0% { box-shadow: 0 0 0 0 rgba(15,122,76,.35); }
  70% { box-shadow: 0 0 0 10px rgba(15,122,76,0); }
  100% { box-shadow: 0 0 0 0 rgba(15,122,76,0); }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
@keyframes notifyIn {
  from { opacity: 0; transform: translateX(28px) scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes notifyOut {
  to { opacity: 0; transform: translateX(24px); }
}
@keyframes feedIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: none; }
}

.sales-page {
  display: grid;
  gap: 18px;
  animation: salesPageIn .5s var(--ease) both;
}
@keyframes salesPageIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.sales-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 22px 22px 18px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(193,18,31,.08), transparent 55%),
    linear-gradient(180deg, #fff 0%, #fafafa 100%);
  box-shadow: var(--shadow);
}
.sales-hero::after {
  content: "";
  position: absolute;
  right: -40px; top: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(17,19,24,.05), transparent 70%);
  pointer-events: none;
  animation: salesOrb 8s ease-in-out infinite alternate;
}
@keyframes salesOrb {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-18px, 22px) scale(1.12); }
}
.sales-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.sales-kicker {
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.sales-hero-title {
  margin: 0;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.sales-refresh {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--slate);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.sales-refresh:hover { transform: translateY(-1px); background: #f5f5f6; }
.sales-period {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--line);
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}
.sales-chip {
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
  transition: color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.sales-chip:hover { color: var(--ink); background: rgba(0,0,0,.03); }
.sales-chip.active {
  background: var(--accent);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(17,19,24,.16);
}
.sales-hero-metric {
  position: relative;
  z-index: 1;
  margin-bottom: 16px;
  animation: salesMetricIn .55s var(--ease) both;
}
@keyframes salesMetricIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.sales-hero-label {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 4px;
}
.sales-hero-amount {
  display: block;
  font-family: var(--display);
  font-size: clamp(36px, 6vw, 48px);
  font-weight: 700;
  color: var(--ok);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.sales-hero-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  color: var(--slate);
  font-size: 13px;
}
.sales-hero-sub b {
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
  margin-right: 2px;
}
.sales-plat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  position: relative;
  z-index: 1;
  margin-bottom: 12px;
}
.sales-plat-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 14px;
  background: rgba(255,255,255,.88);
  animation: salesCardIn .45s var(--ease) both;
  transition: transform .25s var(--ease);
}
.sales-plat-card:hover { transform: translateY(-2px); }
.sales-plat-card:nth-child(1) { animation-delay: .05s; }
.sales-plat-card:nth-child(2) { animation-delay: .1s; }
.sales-plat-card:nth-child(3) { animation-delay: .15s; }
@keyframes salesCardIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.sales-plat-card .name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.sales-plat-card .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
}
.sales-plat-card .dot.xianyu { background: #f0b429; }
.sales-plat-card .dot.taobao { background: var(--taobao); }
.sales-plat-card .dot.xiaohongshu { background: var(--xhs); }
.sales-plat-card .amt {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.sales-plat-card .sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.sales-plat-bar {
  margin-top: 8px;
  height: 4px;
  border-radius: 999px;
  background: rgba(17,19,24,.06);
  overflow: hidden;
}
.sales-plat-bar > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--accent);
  transition: width .8s var(--ease);
}
.sales-plat-bar > i.xianyu { background: #f0b429; }
.sales-plat-bar > i.taobao { background: var(--taobao); }
.sales-plat-bar > i.xiaohongshu { background: var(--xhs); }
.sales-filters {
  position: relative;
  z-index: 1;
}
.sales-filters select {
  width: 100%;
  max-width: 220px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
  color: var(--ink);
}
.sales-boards {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 14px;
}
.sales-board {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 16px;
  min-height: 280px;
  animation: salesCardIn .5s var(--ease) both;
}
.sales-board:nth-child(2) { animation-delay: .08s; }
.sales-board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.sales-board-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}
.sales-board-head span {
  color: var(--muted);
  font-size: 12px;
}
.sales-list {
  display: grid;
  gap: 8px;
  max-height: 520px;
  overflow: auto;
}
.sales-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  background: #fafafa;
  border: 1px solid transparent;
  animation: salesRowIn .4s var(--ease) both;
  transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.sales-row.hist { grid-template-columns: 1fr auto; }
.sales-row:hover {
  transform: translateY(-1px);
  background: #fff;
  border-color: var(--line);
}
@keyframes salesRowIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.sales-rank-no {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  background: #eceef2;
  color: var(--ink);
}
.sales-rank-no.top {
  background: var(--accent);
  color: #fff;
}
.sales-row-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.sales-row-meta {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
  line-height: 1.4;
}
.sales-row-nums {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sales-row-nums strong {
  display: block;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.sales-row-nums span {
  color: var(--muted);
  font-size: 12px;
}
.sales-empty {
  color: var(--muted);
  text-align: center;
  padding: 36px 12px;
  font-size: 13px;
}

@media (max-width: 980px) {
  .platform-strip, .stats, .grid-2, .grid-orders, .form-row-2, .form-row-3,
  .workspace-grid, .overview-layout, .platform-grab-row,
  .orders-workspace, .admin-card, .seller-stack,
  .sales-plat-strip, .sales-boards,
  .settings-layout { grid-template-columns: 1fr; }
  .settings-side { position: static; }
  .settings-lab-steps span:not(:last-child)::after { display: none; }
  .admin-card .metrics { grid-template-columns: 1fr 1fr; }
  .topbar { flex-direction: column; }
  .workspace-hero { flex-direction: column; align-items: flex-start; }
  .item-card { flex-direction: column; align-items: stretch; }
  .item-card-side { flex-direction: row; align-items: center; justify-content: space-between; }
  .item-stat { text-align: left; }
  .key-code-plate { padding: 18px 14px 14px; }
  .key-code-hero,
  .key-code-hero.mono { font-size: 26px !important; letter-spacing: .12em; }
  .key-code-hero[data-len="long"],
  .key-code-hero.mono[data-len="long"] { font-size: 20px !important; }
  .key-code-hero[data-len="xl"],
  .key-code-hero.mono[data-len="xl"] { font-size: 16px !important; }
  .uni-key-actions { justify-content: stretch; }
  .uni-key-actions .secondary,
  .uni-key-actions .ghost { flex: 1; }
  .order-card-actions { width: 100%; flex-direction: row; }
  .order-card-actions .btn-accent,
  .order-card-actions .secondary { width: auto; flex: 1; }
}

/* ===== 阿奇索对接（AGISO） ===== */
.agiso-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.agiso-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(127, 127, 127, 0.07);
  border: 1px solid rgba(127, 127, 127, 0.14);
}
.agiso-stat-label { font-size: 12px; opacity: 0.62; letter-spacing: 0.02em; }
.agiso-stat strong { font-size: 14px; font-weight: 600; word-break: break-all; }
.agiso-copy { cursor: pointer; }
.agiso-copy:hover { text-decoration: underline; }
.agiso-ok { background: rgba(34, 197, 94, 0.16) !important; color: #16a34a !important; }
.agiso-warn { background: rgba(234, 179, 8, 0.18) !important; color: #b45309 !important; }
.agiso-bad { background: rgba(239, 68, 68, 0.14) !important; color: #dc2626 !important; }
.agiso-steps {
  margin: 12px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  line-height: 1.65;
}
.agiso-steps li { opacity: 0.88; }

/* ── 卡密工作台：发卡密 / 导出卡密 / 查激活码 分区 ── */
.key-workbench-kicker {
  margin: 0 0 3px;
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--muted);
}
.key-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 16px;
}
.key-mode-tab {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s var(--ease);
}
.key-mode-tab:hover { border-color: rgba(17, 19, 24, .16); }
.key-mode-tab:active { transform: translateY(1px); }
.key-mode-ico {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(17, 19, 24, .05);
  color: var(--slate);
  transition: background .25s ease, color .25s ease;
}
.key-mode-ico svg { width: 16px; height: 16px; }
.key-mode-text { display: grid; gap: 2px; min-width: 0; }
.key-mode-text strong { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
.key-mode-text em {
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.key-mode-tab.active {
  border-color: rgba(17, 19, 24, .85);
  box-shadow: 0 10px 24px rgba(17, 19, 24, .08);
}
.key-mode-tab.active .key-mode-ico { background: var(--ink); color: #fff; }
.key-mode-tab[data-key-mode="out"].active {
  border-color: rgba(20, 122, 92, .55);
  box-shadow: 0 10px 24px rgba(20, 122, 92, .12);
}
.key-mode-tab[data-key-mode="out"].active .key-mode-ico { background: var(--ok); color: #fff; }
.key-mode-tab[data-key-mode="query"].active { border-color: rgba(71, 74, 84, .5); }
.key-mode-tab[data-key-mode="query"].active .key-mode-ico { background: var(--slate); color: #fff; }

.key-block {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(17, 19, 24, .015);
}
.key-block-out {
  background: rgba(20, 122, 92, .035);
  border-color: rgba(20, 122, 92, .16);
}
.key-block-tip { background: rgba(17, 19, 24, .025); }
.key-block-head { display: flex; align-items: center; gap: 8px; }
.key-block-head h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.key-step {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--display);
}
.key-step-out { background: var(--ok); }
.key-step-info { background: var(--slate); }
.key-block-tag {
  margin-left: auto;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}
.key-mini-field { display: grid; gap: 6px; min-width: 0; }
.key-mini-field > span { font-size: 11px; font-weight: 650; color: var(--muted); }
.key-gen-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.key-format-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}
.key-format-sample {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border: 1px dashed rgba(17, 19, 24, .18);
  border-radius: 12px;
  background: #fff;
}
.key-format-sample-label { font-size: 11px; color: var(--muted); white-space: nowrap; }
.key-format-sample code {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  text-align: right;
  word-break: break-all;
}
.key-export-counter {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(20, 122, 92, .18);
  border-radius: 12px;
  background: #fff;
}
.key-export-counter strong {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--ok);
}
.key-export-counter span { font-size: 12px; color: var(--slate); }
.key-export-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.key-export-actions button { flex: 1 1 auto; }
.key-search-rows { display: grid; gap: 8px; }
@media (max-width: 900px) {
  .key-mode-tabs { grid-template-columns: 1fr; }
  .key-gen-row { grid-template-columns: 1fr; }
}

/* ── 销售记录：平台头像 + 统计日 ── */
.sales-avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  object-fit: cover;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(17, 19, 24, .06);
}
.sales-avatar.rank { width: 34px; height: 34px; border-radius: 11px; }
.sales-avatar.hist { width: 40px; height: 40px; }
.sales-avatar.mini {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  box-shadow: none;
}
.sales-avatar.plat-xianyu { border-color: rgba(240, 180, 41, .45); }
.sales-avatar.plat-taobao { border-color: rgba(255, 80, 0, .35); }
.sales-avatar.plat-xiaohongshu { border-color: rgba(255, 45, 85, .35); }
.sales-avatar.fallback {
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
  background: rgba(17, 19, 24, .04);
}
.sales-thumb {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  object-fit: cover;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(17, 19, 24, .06);
}
.sales-thumb.rank { width: 34px; height: 34px; border-radius: 11px; }
.sales-thumb.hist { width: 40px; height: 40px; }
.sales-thumb.img-failed { display: none; }
.sales-row.hist { grid-template-columns: 40px 1fr auto; }
.sales-row { grid-template-columns: 34px 34px 1fr auto; }
.sales-today-chip {
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(17, 19, 24, .05);
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--slate);
}
@media (max-width: 520px) {
  .sales-row.hist { grid-template-columns: 34px 1fr auto; }
  .sales-row { grid-template-columns: 28px 28px 1fr auto; gap: 8px; }
  .sales-avatar, .sales-avatar.hist { width: 34px; height: 34px; }
}

/* ── 卡密条目复制按钮 ── */
.key-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.key-copy-btn::before {
  content: "";
  width: 12px;
  height: 12px;
  background: currentColor;
  opacity: .75;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='9' y='9' width='11' height='11' rx='2.5' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M15 5.5A2.5 2.5 0 0 0 12.5 3h-6A2.5 2.5 0 0 0 4 5.5v6A2.5 2.5 0 0 0 6.5 14' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='9' y='9' width='11' height='11' rx='2.5' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M15 5.5A2.5 2.5 0 0 0 12.5 3h-6A2.5 2.5 0 0 0 4 5.5v6A2.5 2.5 0 0 0 6.5 14' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.key-copy-btn.copied {
  color: var(--ok);
  border-color: rgba(20, 122, 92, .45);
  background: rgba(20, 122, 92, .08);
}

/* ── 卡密条目复制按钮 ── */
.key-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.key-copy-btn::before {
  content: "";
  width: 12px;
  height: 12px;
  background: currentColor;
  opacity: .75;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='9' y='9' width='11' height='11' rx='2.5' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M15 5.5A2.5 2.5 0 0 0 12.5 3h-6A2.5 2.5 0 0 0 4 5.5v6A2.5 2.5 0 0 0 6.5 14' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='9' y='9' width='11' height='11' rx='2.5' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M15 5.5A2.5 2.5 0 0 0 12.5 3h-6A2.5 2.5 0 0 0 4 5.5v6A2.5 2.5 0 0 0 6.5 14' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.key-copy-btn.copied {
  color: var(--ok);
  border-color: rgba(20, 122, 92, .45);
  background: rgba(20, 122, 92, .08);
}

/* ── 卡密发送记录 ── */
.key-mode-tab[data-key-mode="log"].active { border-color: rgba(193, 18, 31, .45); }
.key-mode-tab[data-key-mode="log"].active .key-mode-ico { background: var(--brand); color: #fff; }
.sendlog-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.sendlog-stat {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.sendlog-stat em {
  font-style: normal;
  font-size: 11px;
  font-weight: 650;
  color: var(--muted);
}
.sendlog-stat strong {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.sendlog-list {
  display: grid;
  gap: 8px;
  max-height: min(56vh, 620px);
  overflow: auto;
  padding-right: 2px;
}
.sendlog-row {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.sendlog-row:hover { border-color: rgba(17, 19, 24, .16); box-shadow: 0 8px 20px rgba(17, 19, 24, .05); }
.sendlog-head { display: flex; align-items: center; gap: 10px; }
.sendlog-head .sales-avatar { width: 30px; height: 30px; border-radius: 10px; }
.sendlog-head-main { display: grid; gap: 2px; min-width: 0; flex: 1; }
.sendlog-code-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sendlog-code {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
}
.sendlog-plat {
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(17, 19, 24, .03);
  color: var(--slate);
  font-size: 11px;
  font-weight: 650;
}
.sendlog-time { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sendlog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 10px;
}
.sendlog-grid > span {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
}
.sendlog-grid em {
  flex: 0 0 auto;
  font-style: normal;
  color: var(--muted);
  font-size: 11px;
}
.sendlog-grid b {
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sendlog-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sendlog-chip-label { font-size: 11px; color: var(--muted); }
.sendlog-chip {
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--slate);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}
.sendlog-chip.ok { border-color: rgba(20, 122, 92, .3); background: rgba(20, 122, 92, .07); color: var(--ok); }
.sendlog-chip.fail { border-color: rgba(193, 18, 31, .32); background: rgba(193, 18, 31, .07); color: var(--brand); }
.sendlog-detail {
  margin: 0;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(17, 19, 24, .03);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  max-height: 34px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== 移动端适配（手机竖屏优先，2026-11 重构） ===== */
@media (max-width: 820px) {
  /* 用 clip 而不是 hidden：hidden 会破坏页签的 position: sticky */
  html, body { overflow-x: clip; max-width: 100%; }
  body { -webkit-text-size-adjust: 100%; }
  .shell {
    width: 100%; max-width: 100%;
    padding: 12px 12px calc(56px + env(safe-area-inset-bottom, 0px));
  }

  /* 顶栏 */
  .topbar { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 12px; }
  .brand-block { gap: 10px; }
  .brand-mark { width: 44px; height: 44px; }
  .user-chip-text { font-size: 12.5px; }

  /* 页签：一行横向滑动，不再挤成三行 */
  .tabs {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    gap: 4px; padding: 5px; border-radius: 16px;
    margin-bottom: 12px; position: sticky; top: 0; z-index: 30;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; white-space: nowrap; padding: 8px 12px; font-size: 13px; border-radius: 12px; }
  .tab.active { transform: none; }

  /* 面板 / 工作区 */
  .workspace { gap: 12px; }
  .workspace-hero { gap: 8px; }
  .workspace-hero h2, .workspace-title { font-size: 22px; }
  .workspace-sub, .workspace-kicker { font-size: 11.5px; }
  .workspace-grid, .grid-2, .grid-orders, .form-row-2, .form-row-3,
  .key-gen-row, .settings-layout, .sales-boards { grid-template-columns: 1fr !important; }
  .panel {
    padding: 14px 13px;
    border-radius: 16px;
    min-width: 0;
  }
  .panel-head { margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
  .panel-desc { font-size: 12px; }

  /* 表单：16px 防 iOS 自动放大；标签与输入对齐 */
  .form-grid, .slim-form { gap: 10px; }
  .field { min-width: 0; }
  label.field-label { font-size: 11.5px; margin-bottom: 5px; letter-spacing: 0; }
  input, select, textarea {
    font-size: 16px; line-height: 1.35;
    padding: 10px 12px; border-radius: 12px;
    min-width: 0; max-width: 100%;
  }
  input[type="checkbox"], input[type="radio"] { width: auto; min-width: 0; }
  textarea { min-height: 128px; }
  .field-hint { font-size: 11.5px; word-break: break-word; }
  .field-hint code { word-break: break-all; font-size: 11px; }
  .actions { gap: 8px; }
  .actions button, .btn-block { flex: 1 1 100%; }

  /* 商品 / 订单卡片：纵向排列，长文本换行 */
  .item-stack { max-height: none; overflow: visible; gap: 10px; }
  .item-card { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; border-radius: 14px; }
  .item-card-side { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
  .item-stat { text-align: left; }
  .item-card-title { font-size: 13.5px; gap: 6px; }
  .item-card-meta { font-size: 11.5px; gap: 6px; word-break: break-word; }
  .item-card-logo .logo-img, .logo-fallback { width: 34px; height: 34px; border-radius: 10px; }

  /* 卡密工作台 */
  .key-mode-tabs { grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0 12px; }
  .key-mode-tab { padding: 9px; gap: 6px; }
  .key-mode-ico { width: 26px; height: 26px; }
  .key-mode-text strong { font-size: 13px; }
  .key-mode-text em { font-size: 10.5px; }
  .key-block { padding: 12px; border-radius: 14px; }
  .key-filter-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .key-filter-tabs::-webkit-scrollbar { display: none; }
  .key-filter-tab { flex: 0 0 auto; white-space: nowrap; }
  .key-table-wrap { border-radius: 14px; }

  /* 发送记录 */
  .sendlog-list { max-height: none; gap: 8px; }
  .sendlog-row { padding: 11px; border-radius: 12px; }
  .sendlog-grid { grid-template-columns: 1fr; gap: 3px; }
  .sendlog-grid b { white-space: normal; word-break: break-all; }
  .sendlog-code { font-size: 14px; }
  .sendlog-detail { max-height: none; }

  /* 统计条 / 平台条 */
  .stats, .metrics, .sendlog-stats, .admin-card .metrics { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .stat { padding: 12px; }
  .stat .value { font-size: 20px; margin-top: 4px; }
  .platform-strip, .sales-plat-strip { grid-template-columns: 1fr !important; }

  /* 销售记录 */
  .sales-row, .sales-row.hist { grid-template-columns: 28px 1fr auto; gap: 8px; }
  .sales-avatar, .sales-avatar.hist { width: 32px; height: 32px; }

  /* 浮动层 */
  .notify-stack { left: 10px; right: 10px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: auto; }
  .notify-card { padding: 13px 14px; border-radius: 14px; }
  .toast { left: 12px; right: 12px; max-width: none; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .drawer { width: 100vw; }
  .app-dialog { padding: 20px 16px 16px; border-radius: 18px; }
  .app-dialog-title { font-size: 19px; }

  /* 兜底：任何超长内容都不许撑破屏幕 */
  img, svg, video, canvas { max-width: 100%; height: auto; }
  .agiso-stat strong, .key-code, .key-card-code, .order-no, .mono { word-break: break-all; }
  pre, code { white-space: pre-wrap; word-break: break-word; }
}

@media (max-width: 400px) {
  .shell { padding-left: 9px; padding-right: 9px; }
  .panel { padding: 12px 10px; }
  .tab { padding: 7px 10px; font-size: 12.5px; }
  .key-mode-tabs { grid-template-columns: 1fr; }
  .stats, .metrics, .sendlog-stats { grid-template-columns: 1fr 1fr !important; }
}

/* ===== 手机端第二轮：导航提到最前 + 摘要条压缩成横向滑动 ===== */
@media (max-width: 820px) {
  /* 导航优先：页签紧跟顶栏，摘要卡片移到页签下方 */
  .shell { display: flex; flex-direction: column; }
  .shell > * { order: 10; }
  .shell > .topbar { order: 1; }
  .shell > .tabs { order: 2; }
  .shell > .platform-strip { order: 3; }
  .shell > .stats { order: 4; }
  .shell > #lowStock { order: 5; }
  .shell > .section { order: 6; }

  /* 平台销售额：一行横滑，卡片压缩 */
  .platform-strip {
    display: flex; flex-wrap: nowrap; gap: 8px;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-bottom: 10px; padding-bottom: 2px;
  }
  .platform-strip::-webkit-scrollbar { display: none; }
  .platform-card {
    flex: 0 0 148px; min-height: 0;
    padding: 10px 12px; gap: 9px; border-radius: 14px;
  }
  .platform-card .logo { width: 30px; height: 30px; border-radius: 9px; }
  .platform-card .logo img { width: 22px; height: 22px; }
  .platform-card .sales { font-size: 17px; }
  .platform-card .sub { font-size: 10.5px; }

  /* 统计卡：一行横滑，数字缩小 */
  .stats {
    display: flex; flex-wrap: nowrap; gap: 8px;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-bottom: 10px; padding-bottom: 2px;
  }
  .stats::-webkit-scrollbar { display: none; }
  .stats .stat {
    flex: 0 0 106px; padding: 10px 12px; border-radius: 14px;
  }
  .stats .stat .label { font-size: 10.5px; }
  .stats .stat .value { font-size: 17px; margin-top: 3px; }

  /* 卡密工作台：390 宽也保持两列，四行太占屏 */
  .key-mode-tabs { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 360px) {
  .key-mode-tabs { grid-template-columns: 1fr; }
}

/* ===== 手机端第三轮：细节收口 ===== */
@media (max-width: 820px) {
  /* 发货文案文本框：默认高度不够，6 行文案会被切一半 */
  .slim-form textarea[name="message_template"] { min-height: 178px; }
  #keyForm textarea { min-height: 120px; }

  /* 商品卡片里的超长商品 ID：只显示两行，多余省略，别把卡片撑很高 */
  .item-card-meta.mono {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; word-break: break-all;
    font-size: 10.5px; line-height: 1.4; opacity: .8;
  }

  /* 商品卡片底部操作区更紧凑 */
  .item-card-side { gap: 6px; }
  .item-card-side .row-actions { gap: 6px; }
  .item-card-side button { padding: 7px 12px; font-size: 12.5px; }
  .item-stat span { font-size: 10.5px; }
  .item-stat strong { font-size: 16px; margin-top: 0; }

  /* 发送记录：每行信息压紧一点，一屏能多看两条 */
  .sendlog-head { gap: 8px; }
  .sendlog-chips { gap: 4px; }
  .sendlog-chip { font-size: 10.5px; padding: 1px 7px; }
  .sendlog-detail { font-size: 10.5px; }
}

/* 吸顶页签：补一块不透明的底，避免滚动时内容从圆角/上沿透出来 */
@media (max-width: 820px) {
  .tabs { background: #fff; isolation: isolate; }
  .tabs::before {
    content: ""; position: absolute;
    left: -12px; right: -12px; top: -16px; bottom: 0;
    background: #fff; z-index: -1;
  }
}

/* ===== 文件分享（网盘式外链下载 · 重塑版） ===== */
.share-workspace { display: flex; flex-direction: column; gap: 18px; }

/* 覆盖全局 img/svg 的 max-width:100%，避免 grid 内图标被压成 0 宽 */
.share-workspace svg { max-width: none; }

/* —— 头部 —— */
.share-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.share-hero-l { display: flex; align-items: center; gap: 14px; min-width: 0; }
.share-hero-badge {
  position: relative; flex: none;
  width: 52px; height: 52px; border-radius: 17px;
  display: grid; place-items: center;
  color: var(--brand);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 12px 26px -16px rgba(193, 18, 31, .65), inset 0 1px 0 #fff;
  overflow: hidden;
}
.share-hero-badge::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 18% 0%, rgba(193, 18, 31, .14), transparent 72%);
}
.share-hero-badge svg {
  position: relative; z-index: 1; width: 25px; height: 25px;
  animation: shareBadgeFloat 5.4s ease-in-out infinite;
}
@keyframes shareBadgeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.share-hero-txt { min-width: 0; }
.share-hero-sub { margin: 5px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
.share-hero-r { display: flex; align-items: center; gap: 8px; }
.share-stat {
  min-width: 84px; padding: 7px 13px; border-radius: 14px;
  background: #fff; border: 1px solid var(--line); line-height: 1.2;
}
.share-stat b {
  display: block;
  font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.share-stat span { font-size: 11px; color: var(--muted); }
.share-icon-btn {
  flex: none;
  width: 38px; height: 38px; border-radius: 12px;
  border: 1px solid var(--line); background: #fff; color: var(--slate);
  display: grid; place-items: center; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s, color .25s;
}
.share-icon-btn:hover {
  color: var(--ink); border-color: rgba(17, 19, 24, .16); transform: translateY(-1px);
  box-shadow: 0 10px 20px -14px rgba(17, 19, 24, .6);
}
.share-icon-btn svg { width: 16px; height: 16px; }
.share-icon-btn.is-spinning svg { animation: shareSpin .7s linear infinite; }
@keyframes shareSpin { to { transform: rotate(360deg); } }

/* —— 上传区 —— */
.share-upload {
  display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 14px;
  padding: 14px; border-radius: 22px;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 18px 40px -34px rgba(17, 19, 24, .55);
}
.share-drop {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  min-height: 138px; padding: 18px;
  border: 1.5px dashed rgba(17, 19, 24, .14);
  border-radius: 16px;
  background: linear-gradient(180deg, #fcfcfd, #f7f8fa);
  cursor: pointer; text-align: center;
  transition: border-color .28s var(--ease), background .28s var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease);
}
.share-drop::before {
  content: ""; position: absolute; inset: -40% -10% auto -10%; height: 150%;
  background: radial-gradient(60% 60% at 50% 0%, rgba(193, 18, 31, .07), transparent 70%);
  opacity: 0; transition: opacity .35s var(--ease); pointer-events: none;
}
.share-drop:hover::before, .share-drop.is-drag::before { opacity: 1; }
.share-drop:hover { border-color: rgba(193, 18, 31, .34); background: linear-gradient(180deg, #fff, #fdf6f6); }
.share-drop.is-drag {
  border-color: var(--brand); border-style: solid;
  background: #fff6f6; transform: scale(1.005);
  box-shadow: inset 0 0 0 3px rgba(193, 18, 31, .07);
}
.share-drop:focus-visible { outline: 2px solid rgba(193, 18, 31, .45); outline-offset: 2px; }
.share-drop-glyph {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: 2px;
  border-radius: 15px; color: var(--slate);
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 8px 18px -12px rgba(17, 19, 24, .55);
  transition: transform .35s var(--ease), color .35s;
}
.share-drop-glyph svg { width: 22px; height: 22px; }
.share-drop:hover .share-drop-glyph { color: var(--brand); transform: translateY(-2px); }
.share-drop.is-drag .share-drop-glyph { color: var(--brand); transform: translateY(-3px) scale(1.04); }
.share-drop-title { font-size: 13.5px; font-weight: 500; color: var(--ink); letter-spacing: -.005em; }
.share-drop-title em { font-style: normal; color: var(--brand); border-bottom: 1px solid rgba(193, 18, 31, .3); padding-bottom: 1px; }
.share-drop-hint { font-size: 11.5px; color: var(--muted); }

.share-picked {
  display: none; align-items: center; gap: 10px;
  max-width: 100%; padding: 8px 10px 8px 8px;
  border-radius: 14px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 10px 22px -18px rgba(17, 19, 24, .6);
  text-align: left;
  animation: sharePickedIn .4s var(--ease) both;
}
@keyframes sharePickedIn { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
.share-drop.has-file { border-style: solid; border-color: rgba(17, 19, 24, .1); background: linear-gradient(180deg, #fff, #fbfcfd); gap: 10px; }
.share-drop.has-file .share-drop-glyph,
.share-drop.has-file .share-drop-title,
.share-drop.has-file .share-drop-hint { display: none; }
.share-drop.has-file .share-picked { display: flex; }
.share-picked-tile {
  flex: none; width: 34px; height: 34px; border-radius: 11px;
  display: grid; place-items: center; overflow: hidden;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 8px 16px -12px rgba(193, 18, 31, .8);
}
.share-picked-tile img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; transform: scale(1.14); }
.share-picked-tile svg { width: 17px; height: 17px; }
.share-picked-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.share-picked-txt b {
  font-size: 12.8px; font-weight: 600; color: var(--ink);
  max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.share-picked-txt i { font-style: normal; font-size: 11px; color: var(--muted); }
.share-picked-x {
  flex: none; width: 24px; height: 24px; border-radius: 8px;
  display: grid; place-items: center; color: #a2a8b3; cursor: pointer;
  transition: background .2s, color .2s;
}
.share-picked-x:hover { background: #f4f5f7; color: var(--brand); }
.share-picked-x svg { width: 13px; height: 13px; }

.share-upload-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.share-field { display: flex; flex-direction: column; gap: 5px; }
.share-field-label { font-size: 11.5px; font-weight: 500; color: var(--slate); letter-spacing: .01em; }
.share-note-input {
  width: 100%; min-height: 40px;
  border-radius: 11px; border: 1px solid var(--line);
  background: #fbfcfd; padding: 0 12px;
  font-size: 12.5px; color: var(--ink); font-family: inherit;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.share-note-input::placeholder { color: #adb2bd; }
.share-note-input:focus {
  outline: none; background: #fff; border-color: rgba(17, 19, 24, .22);
  box-shadow: 0 0 0 3px rgba(17, 19, 24, .05);
}
.share-upload-btn {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 44px; border: 0; border-radius: 12px;
  background: linear-gradient(135deg, #1d2027, #0b0d11);
  color: #fff; font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer;
  box-shadow: 0 14px 26px -16px rgba(17, 19, 24, .8), inset 0 1px 0 rgba(255, 255, 255, .1);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), opacity .25s;
}
.share-upload-btn svg { width: 15px; height: 15px; }
.share-upload-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 32%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .24), transparent);
  transform: skewX(-15deg);
  transition: left .7s var(--ease);
}
.share-upload-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 18px 30px -16px rgba(17, 19, 24, .85); }
.share-upload-btn:hover:not(:disabled)::after { left: 118%; }
.share-upload-btn:active:not(:disabled) { transform: translateY(0) scale(.995); }
.share-upload-btn:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }
.share-upload-btn.is-busy { opacity: 1; pointer-events: none; }
.share-upload-btn.is-busy svg { animation: shareBadgeFloat 1.2s ease-in-out infinite; }
.share-upload-tip { margin: 0; font-size: 11px; line-height: 1.6; color: var(--muted); }

.share-progress { display: none; align-items: center; gap: 9px; }
.share-progress.is-on { display: flex; animation: sharePickedIn .3s var(--ease) both; }
.share-progress-track { flex: 1; height: 6px; border-radius: 999px; background: #eef0f4; overflow: hidden; }
.share-progress-bar {
  height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, #c1121f, #ef5a4e);
  transition: width .25s var(--ease);
  position: relative;
}
.share-progress-bar::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  animation: shareBarShine 1.1s linear infinite;
}
@keyframes shareBarShine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.share-progress-txt {
  font-size: 11px; font-weight: 600; color: var(--brand);
  font-variant-numeric: tabular-nums; min-width: 32px; text-align: right;
}

/* —— 文件列表 —— */
.share-list { display: flex; flex-direction: column; gap: 12px; }
.share-card {
  position: relative;
  display: flex; gap: 13px; align-items: flex-start;
  padding: 14px 15px;
  border-radius: 18px; background: #fff; border: 1px solid var(--line);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  animation: shareCardIn .5s var(--ease) both;
}
@keyframes shareCardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.share-card::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 3px; height: 0; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #e0454e, #a10f18);
  transform: translateY(-50%);
  transition: height .35s var(--ease);
  pointer-events: none;
}
.share-card:hover::before { height: 56%; }
.share-card:hover {
  transform: translateY(-2px);
  border-color: rgba(17, 19, 24, .12);
  box-shadow: 0 20px 40px -32px rgba(17, 19, 24, .7);
}
.share-card.is-off { background: #fcfcfd; }
.share-card.is-off .share-name { color: #7c828d; }
.share-card.is-new { animation: shareCardNew 1.5s var(--ease) both; }
@keyframes shareCardNew {
  0% { opacity: 0; transform: translateY(12px); box-shadow: 0 0 0 0 rgba(193, 18, 31, .3); }
  40% { opacity: 1; transform: none; box-shadow: 0 0 0 6px rgba(193, 18, 31, .12); }
  100% { opacity: 1; transform: none; box-shadow: 0 0 0 0 rgba(193, 18, 31, 0); }
}
.share-tile {
  position: relative; flex: none;
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .36), 0 10px 20px -14px rgba(17, 19, 24, .9);
  overflow: hidden;
}
.share-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(165deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 56%);
}
.share-tile svg { position: relative; z-index: 1; width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .18)); }
.share-tile-logo { background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 20px -14px rgba(193, 18, 31, .8); }
.share-tile-logo img {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 38%;
  transform: scale(1.14);
}
.share-tile-logo::after { background: linear-gradient(165deg, rgba(255, 255, 255, .2), transparent 55%); }
.share-tile-ext {
  position: absolute; z-index: 2; right: 3px; bottom: 2px;
  font-size: 7.5px; font-weight: 800; letter-spacing: .04em;
  color: rgba(255, 255, 255, .92);
}
.share-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.share-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.share-name {
  flex: 1 1 200px; min-width: 0;
  font-size: 13.8px; font-weight: 600; color: var(--ink); letter-spacing: -.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.share-off {
  flex: none; padding: 1px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600;
  color: #b45309; background: #fff5e6; border: 1px solid #ffe2b8;
}
.share-card-actions { display: flex; align-items: center; gap: 6px; flex: none; }

.share-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 11px;
  border-radius: 10px; border: 1px solid var(--line); background: #fff;
  color: var(--slate); font-size: 12px; font-weight: 500; font-family: inherit;
  cursor: pointer; white-space: nowrap;
  transition: transform .2s var(--ease), background .2s, border-color .2s, color .2s, box-shadow .2s;
}
.share-btn svg { width: 14px; height: 14px; }
.share-btn:hover {
  color: var(--ink); border-color: rgba(17, 19, 24, .16); background: #fbfbfc;
  box-shadow: 0 8px 16px -14px rgba(17, 19, 24, .8);
}
.share-btn:active { transform: scale(.97); }
.share-btn.is-primary {
  background: linear-gradient(135deg, #1d2027, #0b0d11);
  color: #fff; border-color: transparent;
  box-shadow: 0 10px 20px -14px rgba(17, 19, 24, .9);
}
.share-btn.is-primary:hover { box-shadow: 0 14px 24px -14px rgba(17, 19, 24, 1); color: #fff; background: linear-gradient(135deg, #24272f, #101317); }
.share-btn.is-primary.is-done { background: linear-gradient(135deg, #17855f, #0d6a4a); }
.share-btn.is-danger { padding: 0 9px; color: #98a0ab; }
.share-btn.is-danger:hover { color: var(--brand); border-color: rgba(193, 18, 31, .28); background: #fff6f6; }

.share-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.share-meta-item {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.share-meta-item svg { width: 13px; height: 13px; opacity: .62; }
.share-meta-item b { font-weight: 600; color: var(--slate); }
.share-meta-note {
  max-width: 240px; padding: 1px 8px; border-radius: 7px;
  background: #f7f8fa; border: 1px solid rgba(17, 19, 24, .04);
  font-size: 11px; color: #7b828e;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.share-link-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.share-link-pill {
  flex: 1 1 240px; min-width: 0;
  display: flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 10px;
  border-radius: 10px; background: #f8f9fb; border: 1px solid rgba(17, 19, 24, .05);
  transition: background .2s, border-color .2s;
}
.share-link-pill:hover { background: #f4f5f8; border-color: rgba(17, 19, 24, .1); }
.share-link-pill svg { flex: none; width: 14px; height: 14px; color: #a3a9b4; }
.share-link-input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; background: transparent; outline: none;
  font-family: var(--mono); font-size: 11.5px; color: #5a626f;
  letter-spacing: -.01em;
}

.share-recent { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-top: 2px; }
.share-recent-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: #8b929d; font-variant-numeric: tabular-nums;
}
.share-recent-item svg { width: 13px; height: 13px; opacity: .55; }
.share-recent-item b { font-weight: 600; color: #6d7480; font-family: var(--mono); font-size: 10.5px; }
.share-recent-ip { font-family: var(--mono); font-size: 10.5px; color: #78808c; }
.share-recent-item.is-muted { color: #aab0ba; }

/* —— 下载明细 —— */
.share-logs {
  margin-top: 2px; padding: 12px 13px;
  border-radius: 14px; background: #fbfcfd; border: 1px solid rgba(17, 19, 24, .06);
  animation: sharePickedIn .35s var(--ease) both;
}
.share-logs-loading, .share-logs-empty { font-size: 12px; color: var(--muted); padding: 6px 2px; }
.share-logs-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 8px; padding-bottom: 8px;
  border-bottom: 1px solid rgba(17, 19, 24, .06);
}
.share-logs-head b { font-size: 12.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-logs-head span { flex: none; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.share-log-tr {
  display: grid; grid-template-columns: 132px 118px 96px minmax(0, 1fr);
  gap: 10px; align-items: center;
  padding: 5px 4px; border-radius: 8px;
  font-size: 11.5px; color: #6d7480;
  font-variant-numeric: tabular-nums;
}
.share-log-tr:not(.is-head):hover { background: #fff; }
.share-log-tr.is-head { font-size: 10.5px; color: #a6acb6; letter-spacing: .02em; }
.share-log-tr.is-head span { font-weight: 500; }
.share-log-ip { font-family: var(--mono); font-size: 11px; color: #4f5763; }
.share-log-ua { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #9aa1ac; }

/* —— 空态 / 骨架 —— */
.share-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 44px 20px;
  border-radius: 20px; border: 1px dashed rgba(17, 19, 24, .12); background: #fcfcfd;
  text-align: center;
}
.share-empty-art {
  display: grid; place-items: center;
  width: 58px; height: 58px; margin-bottom: 6px;
  border-radius: 19px; color: #b3b9c3;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 12px 24px -18px rgba(17, 19, 24, .7);
  animation: shareBadgeFloat 4.6s ease-in-out infinite;
}
.share-empty-art svg { width: 26px; height: 26px; }
.share-empty-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.share-empty-sub { font-size: 12px; color: var(--muted); }
.share-skeleton { display: flex; flex-direction: column; gap: 12px; }
.share-skeleton span {
  display: block; height: 92px; border-radius: 18px;
  background: linear-gradient(100deg, #f7f8fa 20%, #f0f2f6 40%, #f7f8fa 60%);
  background-size: 220% 100%;
  animation: shareSkeleton 1.3s ease-in-out infinite;
}
@keyframes shareSkeleton { from { background-position: 120% 0; } to { background-position: -40% 0; } }

/* —— 移动端 —— */
@media (max-width: 820px) {
  .share-workspace { gap: 14px; }
  .share-hero { gap: 12px; }
  .share-hero-txt .workspace-title { font-size: 19px; }
  .share-hero-sub { font-size: 11.5px; }
  .share-hero-r { width: 100%; justify-content: space-between; gap: 8px; }
  .share-stat { flex: 1 1 0; min-width: 0; text-align: center; }
  .share-upload { grid-template-columns: minmax(0, 1fr); padding: 12px; border-radius: 18px; }
  .share-drop { min-height: 132px; }
  .share-picked-txt b { max-width: 52vw; }
  .share-note-input { font-size: 16px; }
  .share-card { padding: 12px; gap: 11px; border-radius: 16px; }
  .share-tile { width: 40px; height: 40px; border-radius: 12px; }
  .share-tile svg { width: 19px; height: 19px; }
  .share-name { flex: 1 1 100%; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .share-card-head { gap: 6px; }
  .share-card-actions { width: 100%; }
  .share-card-actions .share-btn { flex: 1 1 0; justify-content: center; }
  .share-card-actions .share-btn.is-danger { flex: 0 0 auto; padding: 0 11px; }
  .share-meta { gap: 8px 12px; }
  .share-meta-note { max-width: 100%; }
  .share-link-row { gap: 6px; }
  .share-link-pill { flex: 1 1 100%; height: 34px; }
  .share-link-row .share-btn { flex: 1; justify-content: center; height: 32px; }
  .share-log-tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 10px; padding: 6px 4px; }
  .share-log-tr.is-head { display: none; }
  .share-log-ua, .share-log-tr > span:nth-child(4) { display: none; }
  .share-logs-head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .share-empty { padding: 32px 16px; }
}
@media (max-width: 400px) {
  .share-stat { min-width: 0; padding: 6px 8px; }
  .share-stat b { font-size: 15px; }
  .share-drop-hint { display: none; }
}

/* ===== 商品表单：从分享里挑文件 ===== */
.sharepick-mask {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(17, 19, 24, .3);
  opacity: 0; transition: opacity .18s ease;
}
.sharepick-mask.is-on { opacity: 1; }
.sharepick-mask.is-off { pointer-events: none; }
.sharepick-panel {
  width: min(480px, 100%);
  max-height: min(70vh, 560px);
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(17, 19, 24, .07);
  box-shadow: 0 32px 64px -28px rgba(17, 19, 24, .5);
  overflow: hidden;
  transform: translateY(8px) scale(.985);
  transition: transform .22s cubic-bezier(.22, 1, .36, 1);
}
.sharepick-mask.is-on .sharepick-panel { transform: none; }
.sharepick-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(17, 19, 24, .06);
}
.sharepick-title { font-size: 14.5px; font-weight: 600; color: #1f2329; }
.sharepick-sub { font-size: 12px; color: #8a9099; margin-top: 3px; }
.sharepick-close {
  flex: none; width: 28px; height: 28px; border-radius: 9px;
  border: 1px solid rgba(17, 19, 24, .08); background: #fff;
  color: #6b7280; font-size: 16px; line-height: 1; cursor: pointer;
}
.sharepick-close:hover { background: #f6f7f9; color: #111; }
.sharepick-close svg { width: 14px; height: 14px; display: block; margin: auto; max-width: none; }
.sharepick-list { min-height: 120px; padding: 8px; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.sharepick-empty { padding: 26px 12px; text-align: center; font-size: 12.5px; color: #8a9099; }
.sharepick-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left; cursor: pointer;
  padding: 9px 10px; border-radius: 12px;
  border: 1px solid transparent; background: #fff;
  transition: background .16s ease, border-color .16s ease;
}
.sharepick-item:hover { background: #fdf4f4; border-color: rgba(193, 18, 31, .16); }
.sharepick-tile {
  flex: none; width: 32px; height: 32px; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(17, 19, 24, .08); background: #fff;
}
.sharepick-tile img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; transform: scale(1.14); }
.sharepick-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sharepick-name {
  font-size: 13px; font-weight: 600; color: #1f2329;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sharepick-meta { font-size: 11.5px; color: #8a9099; }

@media (max-width: 820px) {
  .sharepick-panel { max-height: 76vh; border-radius: 16px; }
  .sharepick-title { font-size: 14px; }
}