/* ============================================================
   一心水晶 · 东方典雅设计系统
   shared design tokens + components
   ============================================================ */

:root {
  /* === Brand colors === */
  --color-paper: #f5efe0;        /* 宣纸米 */
  --color-paper-deep: #ebe7dd;
  --color-paper-edge: #d6c9a8;
  --color-ink: #2d2d2d;          /* 墨色 */
  --color-ink-light: #6d6d6d;
  --color-ink-muted: #999;
  --color-cinnabar: #8b1a1a;     /* 朱砂 */
  --color-cinnabar-deep: #5d1010;
  --color-cinnabar-bright: #b53030;
  --color-jade: #2d5016;         /* 墨绿（现货标签） */
  --color-jade-light: #5a8235;
  --color-gold: #b8941f;         /* 金色（VIP） */
  --color-gold-light: #d4af37;

  /* === Surface colors === */
  --bg-page: linear-gradient(180deg, #ebe7dd 0%, #d9d2bd 100%);
  --bg-card: #ffffff;
  --bg-soft: #fff5e6;
  --bg-tag-jade: #e8efe0;

  /* === Type === */
  --font-serif: "Songti SC", "STSong", "SimSun", serif;
  --font-sans: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: "SF Mono", Menlo, monospace;

  /* === Radius === */
  --radius-tight: 2px;
  --radius-soft: 4px;
  --radius-medium: 8px;
  --radius-phone: 36px;

  /* === Shadows === */
  --shadow-card: 0 2px 8px rgba(60, 40, 20, 0.08);
  --shadow-phone: 0 20px 60px rgba(60, 40, 20, 0.25);
  --shadow-bead: 0 4px 8px rgba(0, 0, 0, 0.25);
  --shadow-pop: 0 8px 24px rgba(60, 40, 20, 0.15);

  /* === Spacing === */
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap-md: 12px;
  --gap-lg: 18px;
  --gap-xl: 24px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ============================================================
   Phone frame (375 viewport simulated)
   ============================================================ */
.phone-stage {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 20px;
  min-height: 100vh;
}
.phone-frame {
  width: 380px;
  min-height: 880px;
  background: var(--color-paper);
  border-radius: var(--radius-phone);
  box-shadow: var(--shadow-phone);
  overflow: hidden;
  position: relative;
  font-family: var(--font-serif);
}
.phone-statusbar {
  display: flex;
  justify-content: space-between;
  padding: 14px 28px 4px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--color-ink);
}
.phone-nav {
  padding: 8px 18px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.phone-nav .nav-back { font-size: 22px; color: var(--color-ink); }
.phone-nav .nav-title { font-size: 14px; color: var(--color-cinnabar); letter-spacing: 3px; }
.phone-nav .nav-action { font-size: 18px; color: var(--color-ink); }

/* Bottom tab bar */
.tab-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,0.96);
  border-top: 1px solid var(--color-paper-edge);
  display: flex;
  padding: 8px 0 16px;
  backdrop-filter: blur(8px);
}
.tab-bar .tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 10px;
  color: var(--color-ink-muted);
  font-family: var(--font-sans);
}
.tab-bar .tab.active { color: var(--color-cinnabar); }
.tab-bar .tab .icon { font-size: 22px; margin-bottom: 2px; }

/* ============================================================
   Crystal bead (parameterized) — set --bead-color inline
   ============================================================ */
.bead {
  width: 36px; height: 36px; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.95), transparent 50%),
    var(--bead-color, #9b59b6);
  box-shadow: var(--shadow-bead);
}
.bead.sm { width: 24px; height: 24px; }
.bead.lg { width: 44px; height: 44px; }
.bead.xl { width: 56px; height: 56px; }

.bracelet-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  justify-items: center;
  align-items: center;
}
.bracelet-fan {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

/* Pre-defined crystal palettes (use as classes or copy --bead-color values) */
.bead-amethyst    { --bead-color: #8e44ad; }   /* 紫晶 */
.bead-amethyst-light { --bead-color: #b58fcf; }
.bead-amethyst-deep  { --bead-color: #5d2879; }
.bead-rose        { --bead-color: #ffabab; }   /* 粉晶 */
.bead-rose-deep   { --bead-color: #ff80a0; }
.bead-strawberry  { --bead-color: #c0392b; }   /* 草莓晶 */
.bead-citrine     { --bead-color: #f1c40f; }   /* 黄晶 */
.bead-citrine-deep { --bead-color: #d4a017; }
.bead-clear       { --bead-color: #f5f5f5; }   /* 白晶 */
.bead-green-phantom { --bead-color: #27ae60; } /* 绿幽灵 */
.bead-green-deep  { --bead-color: #196f3d; }
.bead-aquamarine  { --bead-color: #74b9ff; }   /* 海蓝宝 */
.bead-obsidian    { --bead-color: #2c3e50; }   /* 黑曜石 */
.bead-obsidian-deep { --bead-color: #1a1a1a; }
.bead-titanium    { --bead-color: #d4a017; }   /* 钛晶 */
.bead-titanium-bright { --bead-color: #f1c40f; }
.bead-tea         { --bead-color: #8b6f47; }   /* 茶晶 */
.bead-moonstone   { --bead-color: #c8d6e5; }   /* 月光石 */
.bead-labradorite { --bead-color: #4ad6dd; }   /* 拉长石（彩光）*/
.bead-sugilite    { --bead-color: #6a1b9a; }   /* 舒俱来 */
.bead-pixie       { --bead-color: #ff6b6b; }   /* 红玛瑙 */
.bead-southern-red { --bead-color: #c44536; }  /* 南红 */
.bead-sunstone    { --bead-color: #ff8c42; }   /* 太阳石 */
.bead-rutilated   { --bead-color: #c9b58c; }   /* 发晶 */

/* ============================================================
   Common UI primitives
   ============================================================ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--color-paper-edge);
  border-radius: var(--radius-soft);
  padding: var(--gap-lg);
  box-shadow: var(--shadow-card);
}
.section-title {
  display: flex;
  align-items: center;
  margin-bottom: var(--gap-md);
}
.section-title::before {
  content: '';
  display: block;
  width: 3px; height: 14px;
  background: var(--color-cinnabar);
  margin-right: var(--gap-sm);
}
.section-title .label { font-size: 14px; letter-spacing: 2px; color: var(--color-ink); }

/* Seal-style red square stamp */
.seal {
  width: 56px; height: 56px;
  background: var(--color-cinnabar);
  color: var(--color-paper);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  font-family: var(--font-serif);
  border: 2px solid var(--color-paper);
  box-shadow: 0 4px 12px rgba(139,26,26,0.4);
  transform: rotate(-4deg);
}
.seal.sm { width: 36px; height: 36px; font-size: 14px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px;
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 2px;
  border-radius: var(--radius-tight);
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: transform 0.1s;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--color-cinnabar);
  color: var(--color-paper);
}
.btn-secondary {
  background: var(--bg-soft);
  color: var(--color-cinnabar);
  border-color: var(--color-cinnabar);
}
.btn-ghost {
  background: transparent;
  color: var(--color-ink-light);
  border-color: var(--color-paper-edge);
}

/* Price */
.price-cinnabar { color: var(--color-cinnabar); font-family: var(--font-sans); font-weight: 600; }
.price-large { font-size: 28px; letter-spacing: -0.5px; }
.price-strike { text-decoration: line-through; color: var(--color-ink-muted); font-size: 12px; }

/* Chips / tags */
.chip {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  font-size: 11px;
  border-radius: 12px;
  font-family: var(--font-sans);
  background: var(--bg-soft);
  color: var(--color-cinnabar);
  border: 1px solid var(--color-paper-edge);
}
.chip-jade { background: var(--bg-tag-jade); color: var(--color-jade); border-color: #c8d4ad; }
.chip-gold { background: #fff5e0; color: var(--color-gold); border-color: #e8d4a8; }
.chip-ink  { background: #eee; color: var(--color-ink); }

/* Live pulse */
.live-dot {
  width: 8px; height: 8px;
  background: var(--color-cinnabar);
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  animation: pulse 1.4s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.3); }
}

/* Stat tile */
.stat-tile {
  background: var(--bg-card);
  padding: var(--gap-lg);
  border-radius: var(--radius-soft);
  border: 1px solid var(--color-paper-edge);
}
.stat-tile .v {
  font-size: 28px;
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: -0.5px;
}
.stat-tile .v.cinnabar { color: var(--color-cinnabar); }
.stat-tile .l {
  font-size: 12px;
  color: var(--color-ink-muted);
  font-family: var(--font-sans);
  margin-top: 4px;
}

/* ============================================================
   Index / TOC page
   ============================================================ */
.toc-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 60px 30px;
}
.toc-hero {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 50px;
}
.toc-hero .seal { width: 120px; height: 120px; font-size: 56px; transform: rotate(0); }
.toc-hero h1 { font-family: var(--font-serif); font-size: 42px; color: var(--color-ink); letter-spacing: 4px; }
.toc-hero p { font-family: var(--font-sans); font-size: 14px; color: var(--color-ink-light); margin-top: 8px; max-width: 600px; line-height: 1.7; }

.toc-section { margin-bottom: 60px; }
.toc-section h2 {
  font-family: var(--font-serif);
  font-size: 22px;
  letter-spacing: 6px;
  color: var(--color-cinnabar);
  border-bottom: 1px solid var(--color-paper-edge);
  padding-bottom: 10px;
  margin-bottom: 24px;
}
.toc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.toc-card {
  background: var(--bg-card);
  border: 1px solid var(--color-paper-edge);
  border-radius: var(--radius-soft);
  padding: 18px;
  text-decoration: none;
  color: var(--color-ink);
  transition: transform 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 110px;
}
.toc-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-pop);
  border-color: var(--color-cinnabar);
}
.toc-card .toc-icon {
  font-size: 22px;
  margin-bottom: 4px;
}
.toc-card .toc-name {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--color-ink);
}
.toc-card .toc-desc {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--color-ink-muted);
  line-height: 1.5;
}
.toc-card .toc-tag {
  align-self: flex-start;
  font-size: 10px;
  font-family: var(--font-sans);
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--bg-soft);
  color: var(--color-cinnabar);
  margin-top: auto;
}

/* ============================================================
   Admin layout (PC)
   ============================================================ */
.admin-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
  background: #f5f3eb;
}
.admin-sidebar {
  background: linear-gradient(180deg, #5d1010 0%, #3d0808 100%);
  color: var(--color-paper);
  padding: 24px 16px;
}
.admin-sidebar .brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 24px;
  border-bottom: 1px solid rgba(245,239,224,0.15);
  margin-bottom: 16px;
}
.admin-sidebar .brand .brand-seal {
  width: 36px; height: 36px;
  background: var(--color-paper);
  color: var(--color-cinnabar);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif);
  font-size: 22px;
  border-radius: 2px;
}
.admin-sidebar .brand .brand-name {
  font-family: var(--font-serif);
  font-size: 18px;
  letter-spacing: 4px;
}
.admin-sidebar .nav-section {
  margin-top: 18px;
  font-family: var(--font-sans);
  font-size: 11px;
  color: rgba(245,239,224,0.4);
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 0 8px 4px;
}
.admin-sidebar .nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 13px;
  cursor: pointer;
  color: rgba(245,239,224,0.85);
  text-decoration: none;
}
.admin-sidebar .nav-item:hover { background: rgba(245,239,224,0.08); }
.admin-sidebar .nav-item.active {
  background: rgba(245,239,224,0.15);
  color: var(--color-paper);
  font-weight: 600;
}
.admin-sidebar .nav-item .ico { font-size: 16px; }
.admin-main {
  padding: 28px 36px;
  overflow-x: auto;
}
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.admin-header h1 {
  font-family: var(--font-serif);
  font-size: 26px;
  letter-spacing: 3px;
  color: var(--color-ink);
}
.admin-header .crumbs {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--color-ink-muted);
  margin-top: 4px;
}

/* Admin tables */
.adm-table {
  width: 100%;
  background: var(--bg-card);
  border-collapse: collapse;
  border: 1px solid var(--color-paper-edge);
  font-family: var(--font-sans);
  font-size: 13px;
}
.adm-table th {
  text-align: left;
  background: var(--color-paper);
  padding: 12px 14px;
  font-weight: 600;
  color: var(--color-ink-light);
  border-bottom: 1px solid var(--color-paper-edge);
  font-size: 12px;
  letter-spacing: 1px;
}
.adm-table td {
  padding: 14px;
  border-bottom: 1px solid var(--color-paper-edge);
  vertical-align: middle;
}
.adm-table tr:last-child td { border-bottom: none; }
.adm-table tr:hover { background: var(--color-paper); }

/* Forms */
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.form-row label { font-family: var(--font-sans); font-size: 12px; color: var(--color-ink-light); letter-spacing: 1px; }
.form-row input, .form-row select, .form-row textarea {
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--color-paper-edge);
  border-radius: var(--radius-soft);
  background: white;
}
.form-row input:focus { outline: 2px solid var(--color-cinnabar); border-color: transparent; }

/* Misc helpers */
.divider {
  height: 1px;
  background: var(--color-paper-edge);
  margin: var(--gap-lg) 0;
}
.divider-dashed { border-top: 1px dashed var(--color-paper-edge); margin: var(--gap-md) 0; }
.muted { color: var(--color-ink-muted); }
.center { text-align: center; }
.spacer-sm { height: 12px; }
.spacer-md { height: 24px; }
.spacer-lg { height: 40px; }