/* ============================================================
   chaai.cc · Apple HIG-style
   - Aurora ambient bg
   - Glassmorphism cards (backdrop-filter)
   - Apple blue (#0071e3) primary
   - Squircle 24px / Pill buttons
   - System font stack · Big Type
   - Spring easing cubic-bezier(0.25, 1, 0.5, 1)
   ============================================================ */

:root {
  --c-bg:           #f5f5f7;
  --c-text:         #1d1d1f;
  --c-text-2:       #424245;
  --c-text-mute:    #86868b;

  --c-blue:         #0071e3;
  --c-blue-hover:   #0077ed;
  --c-blue-pale:    #e8f1fc;

  --c-line:         rgba(0, 0, 0, 0.06);
  --c-line-strong:  rgba(0, 0, 0, 0.10);

  --c-glass-bg:     rgba(255, 255, 255, 0.78);
  --c-glass-stroke: rgba(255, 255, 255, 0.6);
  --c-glass-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);

  --c-input-bg:     #f2f2f7;

  --c-success:      #30d158;
  --c-warning:      #ff9500;
  --c-danger:       #ff3b30;
  --c-purple:       #af52de;
  --c-teal:         #5ac8fa;
  --c-orange:       #ff9f0a;

  --r-card:    24px;
  --r-input:   12px;
  --r-pill:    980px;

  --ease-spring: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-snappy: cubic-bezier(0.4, 0, 0.2, 1);

  --gap:         24px;
  --pad-card:    24px;
  --maxw:        1120px;
}

/* ============ Reset / Base ============ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family:
    -apple-system, BlinkMacSystemFont,
    "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", "PingFang SC",
    "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv01";
  font-variant-ligatures: common-ligatures;
  letter-spacing: -0.005em;
  line-height: 1.5;
  margin: 0;
  min-height: 100vh;
  position: relative;
}

::selection { background: var(--c-blue); color: #fff; }

a { color: var(--c-blue); text-decoration: none; transition: color .2s var(--ease-spring); }
a:hover { color: var(--c-blue-hover); text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--c-text);
}

code, .font-monospace {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  font-feature-settings: "ss01", "ss02";
}

.x-tiny  { font-size: .72rem; }
.x-small { font-size: .82rem; }

/* ============ Aurora 背景 ============ */

.aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(96px);
  opacity: .9;
  will-change: transform;
}
.orb-1 {
  width: 60vw; height: 60vw;
  top: -20vw; left: -10vw;
  background: radial-gradient(circle, rgba(162, 210, 255, 0.55) 0%, rgba(162, 210, 255, 0) 70%);
  animation: orb-float-1 22s ease-in-out infinite;
}
.orb-2 {
  width: 55vw; height: 55vw;
  bottom: -20vw; right: -15vw;
  background: radial-gradient(circle, rgba(200, 180, 255, 0.45) 0%, rgba(200, 180, 255, 0) 70%);
  animation: orb-float-2 26s ease-in-out infinite;
}
.orb-3 {
  width: 40vw; height: 40vw;
  top: 30vh; left: 40vw;
  background: radial-gradient(circle, rgba(255, 200, 220, 0.35) 0%, rgba(255, 200, 220, 0) 70%);
  animation: orb-float-3 30s ease-in-out infinite;
}

@keyframes orb-float-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(40px, -30px) scale(1.06); }
}
@keyframes orb-float-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-50px, 40px) scale(1.08); }
}
@keyframes orb-float-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-30px, -50px) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .orb { animation: none; }
}

/* ============ 顶部导航（毛玻璃） ============ */

.topnav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--c-line);
}
.topnav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.brand {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--c-text);
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.brand:hover { color: var(--c-text); }
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0071e3, #5ac8fa);
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
}
.nav-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: var(--r-pill);
  font-size: .9rem;
  color: var(--c-text-2);
}
.avatar {
  width: 26px; height: 26px;
  background: linear-gradient(135deg, #0071e3, #af52de);
  color: #fff;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: .82rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* ============ Layout 容器 ============ */

.page-container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 32px 24px 16px;
}
.page-footer {
  text-align: center;
  color: var(--c-text-mute);
  font-size: .85rem;
  padding: 32px 16px 48px;
}

/* ============ Bento 卡片（毛玻璃） ============ */

.card,
.bento {
  background: var(--c-glass-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-radius: var(--r-card);
  border: 1px solid var(--c-glass-stroke);
  box-shadow: var(--c-glass-shadow);
  padding: 0;
  animation: fade-in-up 0.7s var(--ease-spring) both;
}
.card .card-body { padding: var(--pad-card); }
.card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--c-line);
  padding: 16px 24px;
  font-weight: 600;
  border-radius: var(--r-card) var(--r-card) 0 0;
}

/* 入场序列：第 N 个卡片延迟 */
.card:nth-of-type(2)  { animation-delay: 0.06s; }
.card:nth-of-type(3)  { animation-delay: 0.12s; }
.card:nth-of-type(4)  { animation-delay: 0.18s; }
.card:nth-of-type(5)  { animation-delay: 0.24s; }
.card:nth-of-type(6)  { animation-delay: 0.30s; }

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============ 按钮 ============ */

.btn,
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  font-weight: 500;
  font-size: .9rem;
  line-height: 1.4;
  border: 0;
  border-radius: var(--r-input);
  cursor: pointer;
  transition: all .25s var(--ease-spring);
  text-decoration: none;
  white-space: nowrap;
}
.btn-pill { border-radius: var(--r-pill); padding: 7px 16px; font-size: .88rem; }
.btn:focus, .btn-pill:focus { outline: 0; }

.btn-primary,
.btn-pill.btn-primary {
  background: var(--c-blue);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 113, 227, 0.18);
}
.btn-primary:hover,
.btn-pill.btn-primary:hover {
  background: var(--c-blue-hover);
  color: #fff;
  transform: scale(1.02);
  box-shadow: 0 6px 20px rgba(0, 113, 227, 0.32);
}
.btn-primary:active { transform: scale(0.98); }

.btn-secondary,
.btn-pill.btn-secondary {
  background: rgba(0, 0, 0, 0.05);
  color: var(--c-text);
}
.btn-secondary:hover,
.btn-pill.btn-secondary:hover {
  background: rgba(0, 0, 0, 0.09);
  color: var(--c-text);
  transform: scale(1.02);
}

.btn-success {
  background: var(--c-success); color: #fff;
}
.btn-success:hover { background: #2ec24f; transform: scale(1.02); color: #fff; }
.btn-danger {
  background: var(--c-danger); color: #fff;
}
.btn-danger:hover { background: #e3342a; transform: scale(1.02); color: #fff; }
.btn-warning {
  background: var(--c-warning); color: #fff;
}
.btn-warning:hover { background: #e88800; transform: scale(1.02); color: #fff; }
.btn-outline-secondary {
  background: rgba(0, 0, 0, 0.04);
  color: var(--c-text);
}
.btn-outline-secondary:hover { background: rgba(0, 0, 0, 0.08); }

.btn-sm { padding: 5px 12px; font-size: .82rem; border-radius: 10px; }
.btn-lg { padding: 11px 26px; font-size: 1rem; border-radius: 14px; }

.btn:disabled { opacity: .4; cursor: not-allowed; transform: none !important; }

/* ============ 输入框 ============ */

.form-control,
.form-select {
  background: var(--c-input-bg);
  border: 1px solid transparent;
  border-radius: var(--r-input);
  padding: 10px 14px;
  font-size: .95rem;
  color: var(--c-text);
  transition: all .2s var(--ease-spring);
}
.form-control::placeholder { color: var(--c-text-mute); }
.form-control:focus,
.form-select:focus {
  background: #fff;
  border-color: var(--c-blue);
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15);
  outline: 0;
}
textarea.form-control { resize: vertical; }

.form-label { font-weight: 600; color: var(--c-text); margin-bottom: 6px; }
.form-text  { color: var(--c-text-mute); font-size: .8rem; margin-top: 6px; }

/* input-group：让按钮右接输入框 */
.input-group .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group .btn:last-child {
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  padding-left: 18px; padding-right: 18px;
}

/* ============ Alert / Badge ============ */

.glass-alert {
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  padding: 14px 18px;
}
.alert-success { background: #e6f7ec; color: #166534; border-color: #bbf7d0; }
.alert-danger  { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.alert-warning { background: #fff7ed; color: #92400e; border-color: #fed7aa; }
.alert-info    { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }

.badge {
  font-weight: 600;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: .72rem;
  letter-spacing: 0;
}
.badge.bg-success { background: rgba(48, 209, 88, 0.15) !important; color: #1d7c2c !important; }
.badge.bg-warning { background: rgba(255, 149, 0, 0.18) !important; color: #8d4f00 !important; }
.badge.bg-danger  { background: rgba(255, 59, 48, 0.15) !important; color: #9a221b !important; }
.badge.bg-info    { background: rgba(90, 200, 250, 0.20) !important; color: #075778 !important; }
.badge.bg-primary { background: rgba(0, 113, 227, 0.15) !important; color: #00488f !important; }
.badge.bg-secondary { background: rgba(0, 0, 0, 0.08) !important; color: #424245 !important; }
.badge.bg-dark    { background: rgba(29, 29, 31, 0.85) !important; color: #fff !important; }
.badge.bg-light   { background: #f5f5f7 !important; color: #424245 !important; border: 1px solid var(--c-line); }

/* ============ Hero 查询卡片 ============ */

.hero {
  margin-bottom: 16px;
}
.hero-top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.hero-title {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0;
  background: linear-gradient(135deg, #1d1d1f 30%, #5b6cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  margin-top: 8px;
  margin-bottom: 0;
  font-size: 1rem;
  color: var(--c-text-2);
  max-width: 640px;
  letter-spacing: -0.005em;
}
.hero-sub code {
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 6px;
  border-radius: 6px;
  font-size: .88em;
  color: var(--c-text);
}
.hero-quota { margin-left: auto; }
.quota-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(0, 113, 227, 0.10);
  color: var(--c-blue);
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: 0;
}
.quota-pill strong { font-size: 1rem; margin: 0 2px; }
.quota-pill .quota-sub { color: var(--c-blue); opacity: .7; }
.quota-pill.quota-unlimited {
  background: linear-gradient(135deg, rgba(48, 209, 88, 0.16), rgba(0, 113, 227, 0.16));
  color: #0a6027;
}
.quota-pill.quota-unlimited i { font-size: 1rem; }
.quota-pill.quota-unlimited small { opacity: .7; font-weight: 500; }

/* Hero 输入区 */
.hero-form { margin-top: 4px; }
.hero-input-wrap {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.hero-input {
  flex: 1;
  font-size: 1rem;
  padding: 14px 18px;
  border-radius: 14px;
}
.hero-input:focus {
  background: #fff;
}
.hero-btn {
  padding: 14px 28px;
  font-size: .95rem;
  font-weight: 600;
  border-radius: 14px;
  min-width: 110px;
}
.hero-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-left: 4px;
  font-size: .82rem;
  color: var(--c-text-mute);
  flex-wrap: wrap;
  gap: 8px;
}
.extract-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--c-blue);
  font-weight: 600;
  background: rgba(0, 113, 227, 0.08);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  animation: hint-pop 0.4s var(--ease-spring);
}
@keyframes hint-pop {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* ============ Loading 状态 ============ */

.result-loading {
  text-align: center;
  padding: 64px 24px;
  color: var(--c-text-mute);
}
.result-loading .spinner-border {
  width: 2.4rem;
  height: 2.4rem;
}

/* ============ 空状态 ============ */

.empty-state {
  text-align: center;
  padding: 48px 24px;
}
.empty-icon {
  width: 84px; height: 84px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(0, 113, 227, 0.12), rgba(175, 82, 222, 0.10));
  font-size: 2.6rem;
  color: var(--c-blue);
}
.empty-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.empty-sub {
  color: var(--c-text-mute);
  font-size: .92rem;
  margin-bottom: 28px;
}
.empty-tips {
  display: grid;
  gap: 8px;
  max-width: 440px;
  margin: 0 auto;
}
.empty-tip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.025);
  border-radius: 12px;
  font-size: .88rem;
  color: var(--c-text-2);
  text-align: left;
  transition: all .25s var(--ease-spring);
}
.empty-tip:hover { background: rgba(0, 113, 227, 0.06); transform: translateX(2px); }
.empty-tip-ic {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(0, 113, 227, 0.12);
  color: var(--c-blue);
  flex-shrink: 0;
  font-size: 1rem;
}

/* ============ History 列表 ============ */

.history-card { position: sticky; top: 84px; }
.history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.history-head h6 { font-weight: 700; letter-spacing: -0.01em; }
.history-head h6 i { color: var(--c-blue); margin-right: 4px; }
.history-count {
  background: rgba(0, 0, 0, 0.05);
  color: var(--c-text-2);
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: .75rem;
  font-weight: 600;
}

.history-list {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 2px;
  scroll-behavior: smooth;
}
.history-list::-webkit-scrollbar { width: 6px; }
.history-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 3px; }

.history-item {
  display: block;
  padding: 12px 14px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--c-text);
  margin-bottom: 4px;
  border: 1px solid transparent;
  transition: all .2s var(--ease-spring);
  cursor: pointer;
}
.history-item:hover {
  background: rgba(0, 113, 227, 0.06);
  color: var(--c-text);
  transform: translateX(2px);
}

.hist-uuid {
  font-size: .82rem;
  color: var(--c-text);
  font-weight: 600;
  letter-spacing: 0;
}
.hist-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  font-size: .72rem;
  color: var(--c-text-mute);
}
.hist-summary {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}

.status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.status-success { background: var(--c-success); }
.status-dot.status-warning { background: var(--c-warning); }
.status-dot.status-danger  { background: var(--c-danger); }
.status-dot.status-mute    { background: #c7c7cc; }

/* ============ 结果展示 ============ */

.result-section { margin-top: 24px; }
.result-section:first-of-type { margin-top: 8px; }

.section-title {
  margin-bottom: 12px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--c-text);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.01em;
}
.section-title i { color: var(--c-blue); }

/* 顶部状态横幅 */
.banner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  border-radius: var(--r-card);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--c-glass-stroke);
}
.banner-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  color: #fff;
  flex-shrink: 0;
}
.banner-text { flex: 1; }
.banner-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: var(--c-text); }
.banner-desc  { font-size: .92rem; margin-top: 4px; color: var(--c-text-2); }

.banner-success   { background: rgba(48, 209, 88, 0.10); }
.banner-success   .banner-icon { background: linear-gradient(135deg, #30d158, #5ac8fa); }
.banner-warning   { background: rgba(255, 149, 0, 0.10); }
.banner-warning   .banner-icon { background: linear-gradient(135deg, #ff9500, #ffcc00); }
.banner-danger    { background: rgba(255, 59, 48, 0.10); }
.banner-danger    .banner-icon { background: linear-gradient(135deg, #ff3b30, #ff2d55); }
.banner-secondary { background: rgba(0, 0, 0, 0.04); }
.banner-secondary .banner-icon { background: linear-gradient(135deg, #8e8e93, #aeaeb2); }

/* 权益卡片 */
.ent-card {
  border-radius: 16px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--c-glass-stroke);
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: all .3s var(--ease-spring);
}
.ent-card:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}
.ent-card .ent-icon-bg {
  position: absolute;
  right: -16px; top: -16px;
  width: 64px; height: 64px;
  border-radius: 16px;
  opacity: .14;
}
.ent-card.accent-plus    .ent-icon-bg { background: linear-gradient(135deg, #30d158, #5ac8fa); }
.ent-card.accent-pro     .ent-icon-bg { background: linear-gradient(135deg, #af52de, #5e5ce6); }
.ent-card.accent-prolite .ent-icon-bg { background: linear-gradient(135deg, #5ac8fa, #0071e3); }
.ent-card.accent-go      .ent-icon-bg { background: linear-gradient(135deg, #ff9500, #ffcc00); }
.ent-card.accent-other   .ent-icon-bg { background: linear-gradient(135deg, #8e8e93, #aeaeb2); }

.ent-active::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 4px 0 0 4px;
}
.ent-card.accent-plus.ent-active::after    { background: var(--c-success); }
.ent-card.accent-pro.ent-active::after     { background: var(--c-purple); }
.ent-card.accent-prolite.ent-active::after { background: var(--c-teal); }
.ent-card.accent-go.ent-active::after      { background: var(--c-orange); }
.ent-card.accent-other.ent-active::after   { background: var(--c-text-mute); }

.ent-expired { opacity: .55; }
.ent-name {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 6px;
  color: var(--c-text);
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}
.ent-active .ent-name i  { color: var(--c-success); }
.ent-expired .ent-name i { color: var(--c-text-mute); }
.ent-left {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}
.ent-exp {
  font-size: .76rem;
  color: var(--c-text-mute);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  position: relative;
  z-index: 1;
}

/* 渠道徽章 */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: .74rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid var(--c-line);
}
.store-badge i { font-size: .85rem; }
.store-badge.store-google { background: rgba(48, 209, 88, 0.10); color: #1d7c2c; border-color: rgba(48, 209, 88, 0.25); }
.store-badge.store-ios    { background: rgba(0, 0, 0, 0.04); color: var(--c-text); }
.store-badge.store-stripe { background: rgba(0, 113, 227, 0.10); color: #00488f; border-color: rgba(0, 113, 227, 0.25); }
.store-badge.store-amazon { background: rgba(255, 149, 0, 0.12); color: #8d4f00; border-color: rgba(255, 149, 0, 0.25); }
.store-badge.store-other  { background: rgba(0, 0, 0, 0.04); color: var(--c-text-2); }

.trial-badge {
  background: rgba(0, 113, 227, 0.12);
  color: var(--c-blue);
  border: 0;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: .72rem;
  font-weight: 600;
}

/* 订阅表 */
.sub-table {
  background: transparent;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--c-line);
}
.sub-table th {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-text-mute);
  font-weight: 600;
  background: rgba(0, 0, 0, 0.025);
  border-bottom: 1px solid var(--c-line);
  padding: 10px 14px;
}
.sub-table td { vertical-align: middle; padding: 12px 14px; border-color: var(--c-line); }
.sub-row td   { font-size: .88rem; }
.sub-row:hover td { background: rgba(0, 113, 227, 0.04); }
.sub-row.sub-active td:nth-child(2)   { font-weight: 600; }
.sub-row.sub-expired                  { color: var(--c-text-mute); }
.sub-row.sub-refunded td:nth-child(2) { text-decoration: line-through; opacity: .8; }

/* 元数据折叠 */
.meta-block summary {
  cursor: pointer;
  padding: 8px 0;
  user-select: none;
  color: var(--c-text-mute);
}
.meta-block summary:hover { color: var(--c-text-2); }
.meta-block[open] summary { color: var(--c-text); }

.kv {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 8px 16px;
  font-size: .85rem;
  background: rgba(0, 0, 0, 0.025);
  padding: 16px 18px;
  border-radius: 14px;
}
.kv .k { color: var(--c-text-mute); }
.kv .v {
  word-break: break-all;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--c-text);
}

/* ============ 管理后台 ============ */

.admin-stat {
  background: var(--c-glass-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-radius: 18px;
  border: 1px solid var(--c-glass-stroke);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: all .3s var(--ease-spring);
}
.admin-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}
.admin-stat .stat-tag {
  background: rgba(0, 0, 0, 0.06);
  color: var(--c-text-2);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-size: .72rem;
  font-weight: 600;
  display: inline-block;
}
.admin-stat.tag-success .stat-tag { background: rgba(48, 209, 88, 0.15); color: #1d7c2c; }
.admin-stat.tag-warning .stat-tag { background: rgba(255, 149, 0, 0.15); color: #8d4f00; }
.admin-stat.tag-info    .stat-tag { background: rgba(90, 200, 250, 0.20); color: #075778; }
.admin-stat.tag-rose    .stat-tag { background: rgba(255, 59, 48, 0.12); color: #9a221b; }
.admin-stat.tag-mute    .stat-tag { background: rgba(0, 0, 0, 0.06); color: var(--c-text-2); }

.admin-stat .h3,
.admin-stat .h4 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* 表格 */
.table {
  border-color: var(--c-line);
}
.table thead.table-light th {
  background: rgba(0, 0, 0, 0.025);
  color: var(--c-text-mute);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  border-color: var(--c-line);
}
.table > :not(caption) > * > * { border-color: var(--c-line); }

/* ============ 响应式 ============ */

@media (max-width: 768px) {
  .topnav-inner   { padding: 10px 16px; }
  .page-container { padding: 20px 16px 12px; }
  .nav-actions    { gap: 6px; }
  .btn-pill       { padding: 6px 12px; font-size: .82rem; }
  .user-chip      { display: none; }
  .banner         { padding: 16px; gap: 12px; }
  .banner-icon    { width: 44px; height: 44px; font-size: 1.4rem; border-radius: 12px; }
  .banner-title   { font-size: 1.1rem; }
  .ent-card       { padding: 14px; }
  .kv             { grid-template-columns: 110px 1fr; padding: 12px; }
  .card .card-body { padding: 18px; }

  .hero-title     { font-size: 1.5rem; }
  .hero-sub       { font-size: .9rem; }
  .hero-quota     { margin-left: 0; }
  .hero-input-wrap { flex-direction: column; }
  .hero-btn       { width: 100%; }
  .empty-icon     { width: 64px; height: 64px; font-size: 2rem; border-radius: 18px; }
  .history-card   { position: static; }
}