/* ==========================================================================
   指间皮肤商店 · 全站样式
   --------------------------------------------------------------------------
   设计基调：薄荷绿品牌色 + 白色卡片 + 键盘主题预览 + 响应式瀑布流
   注意：index.php 的 CSP 为 style-src 'self'，因此本文件不得 @import 任何
        外部字体或样式，也不依赖内联样式。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计变量
   -------------------------------------------------------------------------- */
:root {
  --brand:        #2fbf9b;
  --brand-dark:   #1aa384;
  --brand-deep:   #0d7a62;
  --brand-soft:   #e8fbf4;
  --brand-mist:   #f2fbf7;

  --ink:          #16241f;
  --ink-soft:     #3b4f49;
  --muted:        #6f857f;
  --muted-light:  #9aada7;

  --line:         #e2ece8;
  --line-strong:  #cfded9;

  --bg:           #f7fbf9;
  --card:         #ffffff;

  --amber:        #b57d16;
  --amber-bg:     #fdf6e6;
  --amber-line:   #f2e0b8;

  --red:          #c0392b;
  --red-bg:       #fdf0ee;
  --red-line:     #f5d3ce;

  --radius-sm:    10px;
  --radius:       14px;
  --radius-lg:    22px;
  --radius-pill:  999px;

  --shadow-sm:    0 1px 2px rgba(16, 46, 38, .05), 0 4px 12px rgba(16, 46, 38, .04);
  --shadow:       0 2px 6px rgba(16, 46, 38, .06), 0 14px 34px rgba(16, 46, 38, .08);
  --shadow-lg:    0 8px 20px rgba(16, 46, 38, .10), 0 30px 70px rgba(16, 46, 38, .14);

  --font: "Segoe UI", system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "微软雅黑", "Helvetica Neue", Arial, sans-serif;

  --header-h: 68px;
  --wrap:     1240px;
}

/* --------------------------------------------------------------------------
   2. 基础重置
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* 关键：本文件给 .form-error / #toast 等设置了 display，
   必须用 !important 压过作者样式，否则 hidden 属性会失效。 */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.modal-open { overflow: hidden; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.02rem; }
p  { margin: 0 0 .8em; }
img { max-width: 100%; }

a { color: var(--brand-deep); text-decoration: none; }
a:hover { color: var(--brand-dark); }

ul, ol { margin: 0 0 .8em; padding-left: 1.25em; }

small { font-size: .8rem; color: var(--muted); display: block; margin-top: 4px; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 3px solid rgba(47, 191, 155, .55);
  outline-offset: 2px;
  border-radius: 6px;
}

.muted { color: var(--muted); }
.wrap-cell { white-space: normal; word-break: break-word; min-width: 180px; }

/* --------------------------------------------------------------------------
   3. 页头 / 页脚
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 22px;
  height: var(--header-h);
  padding: 0 max(20px, calc((100% - var(--wrap)) / 2));
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 1.12rem; font-weight: 800; color: var(--ink);
  letter-spacing: -.02em; white-space: nowrap;
}
.brand:hover { color: var(--ink); }

.brand-mark {
  display: block;
  width: 34px; height: 34px; flex: none;
  border-radius: 11px;
  box-shadow: 0 4px 12px rgba(47, 191, 155, .35);
}

.brand-sub {
  margin-left: 6px; padding-left: 9px;
  font-size: .72rem; font-weight: 600; letter-spacing: .06em;
  color: var(--muted);
  border-left: 1px solid var(--line-strong);
  text-transform: uppercase;
}

.site-header nav { display: flex; gap: 4px; margin-right: auto; }
.site-header nav a {
  padding: 8px 14px; border-radius: var(--radius-pill);
  font-size: .9rem; font-weight: 600; color: var(--muted);
  transition: background .18s, color .18s;
}
.site-header nav a:hover { background: var(--brand-mist); color: var(--brand-deep); }
.site-header nav a.active { background: var(--brand-soft); color: var(--brand-deep); }

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

.upload-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .9rem; font-weight: 600; color: var(--ink-soft);
}
.upload-link:hover { color: var(--brand-deep); }

#user-nav { display: flex; align-items: center; gap: 8px; }

.user-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--brand-mist); color: var(--brand-deep);
  font-size: .88rem; font-weight: 600;
}
.user-link:hover { background: var(--brand-soft); }

.admin-nav {
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--ink); color: #fff; font-size: .84rem; font-weight: 600;
}
.admin-nav:hover { background: var(--brand-deep); color: #fff; }

/* 创作者身份入口（仅创作者与管理员可见） */
.role-nav {
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--brand-soft); color: var(--brand-deep);
  font-size: .84rem; font-weight: 600;
}
.role-nav:hover { background: var(--brand); color: #fff; }

.site-footer {
  /* 页脚是多行说明文字（品牌标识已移除），因此纵向排列并居中。
     年份由 PHP 的 date('Y') 输出，不用手改。 */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  flex-wrap: wrap;
  max-width: var(--wrap); margin: 56px auto 0;
  padding: 26px 20px 40px;
  border-top: 1px solid var(--line);
  font-size: .86rem; color: var(--muted);
  text-align: center;
}
/* 页脚联系方式：一行「联系方式：」+ 图标；图标可点（邮箱复制、小红书新开页面） */.site-footer .footer-contact { display: flex; align-items: center; gap: 6px; justify-content: center; }
.site-footer .footer-contact-label { margin-right: 2px; }
.site-footer .footer-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--muted); cursor: pointer;
  transition: color .15s, background .15s;
}
.site-footer .footer-icon:hover { color: var(--brand-deep); background: var(--brand-soft); }
.site-footer .footer-icon:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* 页脚备案信息 */
.site-footer .footer-beian { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; }
.site-footer .footer-beian a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.site-footer .footer-beian a:hover { color: var(--brand-deep); border-bottom-color: var(--brand); }
/* 尚未填写的项：用灰色虚框标出，提醒去 config.local.php 里补真实值 */
.site-footer .footer-todo {
  color: var(--muted); opacity: .75;
  border: 1px dashed var(--line-strong); border-radius: 4px; padding: 0 6px;
}

/* --------------------------------------------------------------------------
   4. 按钮
   -------------------------------------------------------------------------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--ink);
  font-size: .92rem; font-weight: 600; line-height: 1.2;
  white-space: nowrap;
  transition: transform .16s, box-shadow .18s, background .18s, border-color .18s, color .18s;
}
.button:hover { border-color: var(--brand); color: var(--brand-deep); box-shadow: var(--shadow-sm); }
.button:active { transform: translateY(1px); }
.button:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.button.dark {
  background: var(--ink); border-color: var(--ink); color: #fff;
}
.button.dark:hover {
  background: var(--brand-deep); border-color: var(--brand-deep); color: #fff;
  box-shadow: 0 8px 22px rgba(13, 122, 98, .3);
}
.button.small { padding: 7px 14px; font-size: .86rem; }
.button.full { width: 100%; }

/* 危险操作按钮：删除等不可撤销动作 */
.button.danger {
  background: var(--card); border-color: var(--red-line); color: var(--red);
}
.button.danger:hover {
  background: var(--red); border-color: var(--red); color: #fff;
  box-shadow: 0 8px 22px rgba(192, 57, 43, .28);
}

/* 后台表格里的操作列：多个按钮并排且可换行 */
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* 危险区（清空测试数据） */
.danger-zone {
  margin-top: 26px;
  padding: 22px 24px;
  border: 1px solid var(--red-line);
  border-left: 5px solid var(--red);
  border-radius: var(--radius);
  background: var(--red-bg);
}
.danger-zone h3 { margin: 0 0 .4em; color: #8f2c20; font-size: 1.02rem; }
.danger-zone p { font-size: .88rem; color: #8f2c20; margin-bottom: .6em; }
.danger-zone p.muted { color: var(--muted); font-size: .82rem; }
.danger-zone code {
  padding: 1px 6px; border-radius: 5px;
  background: rgba(192, 57, 43, .12);
  font-size: .86rem;
}
.danger-zone .form-field { color: #8f2c20; }
.danger-zone input { background: #fff; }
.danger-zone .button.danger { background: var(--red); border-color: var(--red); color: #fff; }
.danger-zone .button.danger:hover { background: #a5301f; border-color: #a5301f; }

.icon-button {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card); color: var(--ink-soft);
  transition: background .18s, color .18s;
}
.icon-button:hover { background: var(--brand-soft); color: var(--brand-deep); }

.text-link {
  padding: 0; border: 0; background: none;
  color: var(--brand-deep); font-size: .9rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.text-link:hover { color: var(--brand-dark); }

/* --------------------------------------------------------------------------
   5. 键盘主题预览组件（12 套主题）
   -------------------------------------------------------------------------- */
.theme-mint   { --k-scene: linear-gradient(150deg, #e8fbf4, #c9f0e3); --k-board: rgba(255,255,255,.82); --k-key: #ffffff; --k-text: #1d3a33; --k-accent: #2fbf9b; --k-accent-text: #ffffff; --k-radius: .6em; }
.theme-sunset { --k-scene: linear-gradient(150deg, #ffe9d6, #ffcfc0); --k-board: rgba(255,246,239,.86); --k-key: #ffffff; --k-text: #5a3226; --k-accent: #ff7a59; --k-accent-text: #ffffff; --k-radius: .6em; }
.theme-night  { --k-scene: linear-gradient(150deg, #2a2f45, #161a28); --k-board: #232838; --k-key: #333a52; --k-text: #eef1fa; --k-accent: #5b8cff; --k-accent-text: #ffffff; --k-radius: .6em; }
.theme-cream  { --k-scene: linear-gradient(150deg, #fdf6e8, #f3e5cd); --k-board: rgba(255,253,247,.9); --k-key: #ffffff; --k-text: #4a3d28; --k-accent: #d9a353; --k-accent-text: #ffffff; --k-radius: .6em; }
.theme-blue   { --k-scene: linear-gradient(150deg, #e6f1ff, #cde2ff); --k-board: rgba(247,251,255,.9); --k-key: #ffffff; --k-text: #1c3557; --k-accent: #3d7dff; --k-accent-text: #ffffff; --k-radius: .6em; }
.theme-forest { --k-scene: linear-gradient(150deg, #e4f2e3, #c5e3c3); --k-board: rgba(246,251,245,.9); --k-key: #ffffff; --k-text: #23402a; --k-accent: #3f8f52; --k-accent-text: #ffffff; --k-radius: .6em; }
.theme-pixel  { --k-scene: linear-gradient(150deg, #f4f4f4, #d9d9d9); --k-board: #ffffff; --k-key: #efefef; --k-text: #101010; --k-accent: #101010; --k-accent-text: #ffffff; --k-radius: 0em; }
.theme-berry  { --k-scene: linear-gradient(150deg, #fde8f1, #f7c8de); --k-board: rgba(255,247,251,.9); --k-key: #ffffff; --k-text: #57203a; --k-accent: #d94a8c; --k-accent-text: #ffffff; --k-radius: .6em; }
.theme-paper  { --k-scene: linear-gradient(150deg, #f8f4eb, #e8e1d2); --k-board: rgba(255,254,250,.94); --k-key: #ffffff; --k-text: #3d372c; --k-accent: #8a7c63; --k-accent-text: #ffffff; --k-radius: .35em; }
.theme-purple { --k-scene: linear-gradient(150deg, #efe9ff, #dbd0ff); --k-board: rgba(250,248,255,.9); --k-key: #ffffff; --k-text: #33265c; --k-accent: #7b5cf0; --k-accent-text: #ffffff; --k-radius: .6em; }
.theme-matcha { --k-scene: linear-gradient(150deg, #f1f6e0, #dae8bf); --k-board: rgba(251,253,243,.9); --k-key: #ffffff; --k-text: #35401f; --k-accent: #8aa832; --k-accent-text: #ffffff; --k-radius: .6em; }
.theme-mono   { --k-scene: linear-gradient(150deg, #ffffff, #e7e7e7); --k-board: #ffffff; --k-key: #f4f4f4; --k-text: #1a1a1a; --k-accent: #1a1a1a; --k-accent-text: #ffffff; --k-radius: .5em; }

.keyboard-scene {
  --scene-pad: 1.1em;
  position: relative;
  padding: var(--scene-pad);
  border-radius: 1.25em;
  background: var(--k-scene, linear-gradient(150deg, #e8fbf4, #c9f0e3));
  font-size: 10px;
  overflow: hidden;
  isolation: isolate;
}
.keyboard-scene.large { font-size: 15px; }

.scene-caption {
  display: flex; align-items: center; justify-content: space-between; gap: 1em;
  margin-bottom: .9em;
  font-size: .82em; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--k-text, #1d3a33);
  opacity: .62;
}
.scene-caption span:last-child { letter-spacing: .04em; text-transform: none; font-weight: 600; }

.keyboard {
  display: flex; flex-direction: column; gap: .42em;
  padding: .75em;
  border-radius: 1em;
  background: var(--k-board, rgba(255,255,255,.82));
  box-shadow: 0 2px 10px rgba(16, 46, 38, .08);
}

.keyboard-toolbar {
  display: flex; align-items: center; gap: .4em;
  padding: 0 .1em .35em;
  font-size: .92em; font-weight: 600;
  color: var(--k-text, #1d3a33);
  opacity: .78;
  border-bottom: 1px solid rgba(128, 128, 128, .16);
}
.keyboard-toolbar b {
  padding: .15em .5em; border-radius: .45em;
  background: var(--k-accent, #2fbf9b); color: var(--k-accent-text, #fff);
  font-weight: 700;
}
.keyboard-toolbar span:first-of-type { color: var(--k-accent, #2fbf9b); font-weight: 700; }
.keyboard-toolbar span:last-child { margin-left: auto; }

.key-row { display: flex; gap: .34em; }
.key-row.row-1 { padding: 0 .9em; }
.key-row.row-2 { padding: 0 1.8em; }

.key {
  flex: 1 1 0; min-width: 0;
  display: grid; place-items: center;
  height: 2.6em;
  padding: 0 .1em;
  border-radius: var(--k-radius, .6em);
  background: var(--k-key, #fff);
  color: var(--k-text, #1d3a33);
  font-size: .95em; font-weight: 600;
  box-shadow: 0 1px 0 rgba(16, 46, 38, .07);
  overflow: hidden; text-overflow: ellipsis;
}

.bottom-row { gap: .3em; }
.space-key { flex: 4 1 0; font-size: .85em; }
.enter-key {
  flex: 1.7 1 0;
  background: var(--k-accent, #2fbf9b);
  color: var(--k-accent-text, #fff);
  font-size: .85em;
}

.preview-note {
  position: absolute; right: 1.3em; bottom: .85em;
  font-size: .78em; font-weight: 700; letter-spacing: .08em;
  color: var(--k-text, #1d3a33); opacity: .42;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   6. 首页
   -------------------------------------------------------------------------- */
.shop-main { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

.intro {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 32px; align-items: end;
  padding: 52px 0 40px;
}
.intro h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); letter-spacing: -.03em; margin-bottom: .35em; }
.intro h1 span { color: var(--brand); }
.intro > div > p { max-width: 46ch; color: var(--muted); font-size: 1.02rem; margin-bottom: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
  font-size: .74rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand-dark);
}
.eyebrow i {
  width: 22px; height: 2px; border-radius: 2px;
  background: var(--brand); flex: none;
}

.creator-invite {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.creator-invite:hover {
  transform: translateY(-3px);
  border-color: var(--brand);
  box-shadow: var(--shadow);
  color: var(--ink);
}
.creator-invite strong { display: block; font-size: .98rem; }
.creator-invite p { margin: 2px 0 0; font-size: .84rem; color: var(--muted); display: flex; align-items: center; gap: 4px; }

.invite-icon {
  display: grid; place-items: center;
  width: 46px; height: 46px; flex: none;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--brand), var(--brand-deep));
  color: #fff;
  box-shadow: 0 6px 16px rgba(47, 191, 155, .32);
}

/* 首页 Banner */
.banner-rail { position: relative; margin: 8px 0 20px; }
.banner-window { overflow: hidden; border-radius: 28px; }
.banner-track { display: flex; transition: transform .45s ease; }
.collection-banner {
  position: relative; overflow: hidden;
  display: block; flex: 0 0 100%; width: 100%; margin: 0; padding: 0;
  background: #eafbf5; border: 0; cursor: pointer;
}
.banner-image { display: block; width: 100%; height: auto; }
.banner-arrow {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  box-sizing: border-box; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.9);
  color: var(--ink); line-height: 0; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.banner-arrow svg { display: block; flex: none; }
.banner-prev { left: 14px; }
.banner-next { right: 14px; }
.banner-dots { position: absolute; bottom: 14px; left: 50%; z-index: 2; transform: translateX(-50%); display: flex; gap: 8px; }
.banner-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.6); cursor: pointer; }
.banner-dots button[aria-current="true"] { background: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.18); }
.banner-arrow:focus-visible, .banner-dots button:focus-visible { outline: 3px solid var(--brand-deep); outline-offset: 3px; }
.banner-tag {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  display: inline-block; padding: 5px 10px; border-radius: 999px;
  background: rgba(255,255,255,.94); color: var(--brand-deep);
  font-size: .72rem; font-weight: 800; line-height: 1.3;
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
}
.collection-banner:focus-visible, .m-feature-card:focus-visible { outline: 3px solid var(--brand-deep); outline-offset: 3px; }

/* 合集区 */
.collection { padding-bottom: 20px; }

.collection-heading {
  display: flex; align-items: end; justify-content: space-between; gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.collection-heading h2 { margin: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.collection-heading h2 span { font-size: .86rem; font-weight: 500; color: var(--muted); }

.search {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  min-width: 268px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--muted);
  transition: border-color .18s, box-shadow .18s;
}
.search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(47, 191, 155, .13); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); }

/* 列表上方的搜索工具条（创作者后台「我的作品」、管理后台各标签页共用） */
.list-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.list-tools .search { flex: 0 1 340px; }
.list-count { margin: 0; font-size: .82rem; color: var(--muted); }

/* 管理后台区域标题右侧的搜索框 */
.admin-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.admin-tools .search { flex: 0 1 320px; }

.filter-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.category-list { display: flex; gap: 8px; flex-wrap: wrap; }
.category-list button {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--muted);
  font-size: .88rem; font-weight: 600;
  transition: all .18s;
}
.category-list button:hover { border-color: var(--brand); color: var(--brand-deep); }
.category-list button.selected {
  background: var(--ink); border-color: var(--ink); color: #fff;
}

.sort {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--muted);
}
.sort select { border: 0; outline: 0; background: none; color: var(--ink); font-size: .88rem; font-weight: 600; cursor: pointer; }

/* 瀑布流 */
.masonry { column-count: 4; column-gap: 22px; }
.masonry > .empty, .masonry > .loading { column-span: all; }

.skin-card {
  display: block; width: 100%;
  margin: 0 0 22px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  text-align: left;
  overflow: hidden;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .22s, border-color .22s;
}
.skin-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand);
  box-shadow: var(--shadow-lg);
}

.card-preview {
  position: relative;
  padding: 14px 14px 0;
  background: var(--brand-mist);
}
/* 用不同的内边距制造瀑布流的高度错落 */
.skin-card.card-1 .card-preview { padding-top: 22px; }
.skin-card.card-2 .card-preview { padding-top: 10px; }
.skin-card.card-3 .card-preview { padding-top: 18px; }

.card-preview img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius);
}
/* 预览图按原始比例完整显示，不裁剪。
   不同封面的天然比例差异本身就会形成瀑布流的高度错落，无需再强制宽高比。 */

.category-badge {
  position: absolute; top: 22px; left: 22px; z-index: 2;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .92);
  color: var(--brand-deep);
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  box-shadow: 0 2px 8px rgba(16, 46, 38, .12);
}

.open-card {
  position: absolute; top: 20px; right: 20px; z-index: 2;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--ink); color: #fff;
  opacity: 0; transform: scale(.8) translateY(4px);
  transition: opacity .2s, transform .2s;
}
.skin-card:hover .open-card { opacity: 1; transform: scale(1) translateY(0); }

.card-info { padding: 14px 16px 16px; }
.card-info > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.card-info h3 {
  margin: 0; font-size: .98rem; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-info p {
  display: flex; align-items: center; gap: 7px;
  margin: 10px 0 0;
  font-size: .82rem; color: var(--muted);
}
.card-info .card-meta { margin-left: auto; font-size: .78rem; color: var(--muted-light); }

.price { font-size: .92rem; font-weight: 800; color: var(--brand-deep); white-space: nowrap; }
.price.free { color: var(--brand); }

.avatar {
  display: grid; place-items: center;
  width: 22px; height: 22px; flex: none;
  border-radius: 50%;
  background: var(--k-accent, #2fbf9b);
  color: var(--k-accent-text, #fff);
  font-size: .7rem; font-weight: 700;
}

.list-end { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 0 8px; }
.list-end p { margin: 0; font-size: .85rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   7. 通用状态：loading / empty / notice / form-error
   -------------------------------------------------------------------------- */
.loading {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-size: .92rem;
}
.loading::before {
  content: ""; display: block;
  width: 26px; height: 26px; margin: 0 auto 12px;
  border: 3px solid var(--line-strong);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 56px 24px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--card);
  text-align: center;
  color: var(--muted);
}
.empty svg { color: var(--brand); margin-bottom: 8px; }
.empty h1, .empty h3 { margin: 0; color: var(--ink); }
.empty p { margin: 0 0 12px; max-width: 44ch; }
.empty .button { margin-top: 4px; }

.notice {
  padding: 13px 17px;
  margin-bottom: 18px;
  border: 1px solid var(--amber-line);
  border-left: 4px solid var(--amber);
  border-radius: var(--radius-sm);
  background: var(--amber-bg);
  color: #7a5410;
  font-size: .88rem;
}
/* 成功态提示：支付已确认等结果性消息，避免继续用「等待中」的琥珀色吓人 */
.notice-ok {
  border-color: var(--brand);
  border-left-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-deep);
}
/* 兑换弹窗里「登录后再兑换可以直接入库」这句：加粗之外再上品牌色，让它在灰字里跳出来 */
.redeem-tip { color: var(--brand-deep); font-weight: 700; }

.form-error {
  padding: 11px 15px;
  margin: 12px 0;
  border: 1px solid var(--red-line);
  border-left: 4px solid var(--red);
  border-radius: var(--radius-sm);
  background: var(--red-bg);
  color: #8f2c20;
  font-size: .88rem;
}

#toast {
  position: fixed; left: 50%; bottom: 32px; z-index: 200;
  transform: translateX(-50%);
  max-width: min(90vw, 460px);
  padding: 13px 22px;
  border-radius: var(--radius-pill);
  background: rgba(18, 34, 29, .95);
  color: #fff;
  font-size: .9rem; font-weight: 600;
  box-shadow: var(--shadow-lg);
  animation: toast-in .25s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } }

/* --------------------------------------------------------------------------
   8. 弹窗（详情 / 审核）
   -------------------------------------------------------------------------- */
#detail-dialog, #redeem-dialog, #codes-dialog {
  max-height: calc(100vh - 64px);
  padding: 0;
  border: 0;
  border-radius: 26px;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  overflow: auto;
}
#detail-dialog { width: min(1000px, calc(100vw - 32px)); }
#redeem-dialog { width: min(460px, calc(100vw - 32px)); }
#codes-dialog  { width: min(860px, calc(100vw - 32px)); }
#detail-dialog::backdrop, #redeem-dialog::backdrop, #codes-dialog::backdrop {
  background: rgba(10, 28, 23, .5); backdrop-filter: blur(3px);
}
#detail-dialog:not([open]), #redeem-dialog:not([open]), #codes-dialog:not([open]) { display: none; }

/* 兑换码弹层 */
.redeem-body { padding: 30px; }
.redeem-body h2 { font-size: 1.3rem; margin-bottom: .25em; }
.redeem-body .eyebrow { margin-bottom: 8px; }
.redeem-body .notice { margin: 0 0 14px; }
.redeem-body .form-field input { letter-spacing: .14em; font-weight: 700; text-transform: uppercase; }

/* 兑换码管理弹层 */
.codes-body { padding: 30px; }
.codes-body h2 { font-size: 1.25rem; margin-bottom: .5em; }
.codes-body .eyebrow { margin-bottom: 8px; }
.codes-body .form-row { margin-bottom: 0; }
.codes-body .form-field small { min-height: 1.2em; }
.codes-sub { margin: 22px 0 10px; font-size: 1rem; }

/* 修改作品的弹窗（复用 codes-body 的排版约定） */
.edit-body { padding: 30px; }
.edit-body h2 { font-size: 1.25rem; margin-bottom: .4em; }
.edit-body .eyebrow { margin-bottom: 8px; }
.edit-body .form-row { margin-bottom: 0; }
.edit-body .check-label { margin-top: 14px; }
.edit-body .notice { margin-bottom: 14px; }
@media (max-width: 700px) { .edit-body { padding: 18px; } }

.gen-result {
  margin: 16px 0 4px;
  padding: 16px 18px;
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  background: var(--brand-mist);
}
.gen-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.code-out {
  display: block; width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink);
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: .92rem; letter-spacing: .1em; line-height: 1.7;
  resize: vertical;
}
.gen-result .muted { margin: 8px 0 0; font-size: .82rem; }

.code-cell {
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: .9rem; letter-spacing: .1em; font-weight: 700;
  color: var(--brand-deep);
}

/* 已拥有作品时，详情弹窗里的按平台下载按钮 */
.own-downloads { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 8px; }
.own-downloads .button { flex: 1 1 auto; }

/* 首页搜索框右侧的兑换码按钮 */
.search-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.search-row .search { flex: 0 1 auto; }
.search-row #redeem-open { white-space: nowrap; }

/* 移动端顶栏的兑换码按钮：文字按钮（不用图标，手机上更直观） */
.m-redeem {
  flex: none;
  padding: 9px 13px;
  border: 1px solid var(--brand); border-radius: var(--radius-pill);
  background: var(--brand-soft); color: var(--brand-deep);
  font-size: .82rem; font-weight: 700; line-height: 1.2;
  white-space: nowrap;
  transition: background .18s, color .18s, border-color .18s;
}
.m-redeem:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
/* 窄屏（如 360px 宽的手机）空间紧张时，隐藏品牌文字只留图标，保证「兑换码」完整显示 */
@media (max-width: 400px) {
  .m-brand > span:last-child { display: none; }
  .m-redeem { padding: 9px 11px; font-size: .78rem; }
}

.dialog-close {
  position: absolute; top: 16px; right: 16px; z-index: 5;
  background: rgba(255, 255, 255, .9);
  box-shadow: var(--shadow-sm);
}

.detail-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.detail-preview { padding: 26px; background: var(--brand-mist); display: grid; place-items: center; }
.detail-preview img { width: 100%; border-radius: var(--radius); }

.detail-copy { padding: 34px 32px; display: flex; flex-direction: column; }
.detail-copy h2 { font-size: 1.5rem; margin-bottom: .35em; }
.detail-copy .description { color: var(--ink-soft); }
.detail-copy .muted { font-size: .86rem; }
.detail-copy .button.full { margin-top: 6px; }
.detail-copy .notice { margin-top: 16px; }

.detail-price {
  margin: 6px 0 18px;
  font-size: 1.7rem; font-weight: 800; color: var(--brand-deep);
}

.review-body { padding: 32px; }
.review-body h2 { padding-right: 44px; }
.review-cover {
  width: 100%; height: auto;
  border-radius: var(--radius); margin-bottom: 16px;
}
.review-body .button.small { margin-bottom: 18px; }

/* 审核时按平台分别检查安装包 */
.review-downloads { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; }
.review-downloads .button.small { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   9. 表单
   -------------------------------------------------------------------------- */
.form-card {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.form-card h2 { margin-bottom: .6em; }

.form-field { display: block; margin-bottom: 18px; font-size: .88rem; font-weight: 600; color: var(--ink-soft); }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="number"],
.form-field input:not([type]),
.form-field select,
.form-field textarea {
  display: block; width: 100%;
  margin-top: 7px;
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fcfefd;
  color: var(--ink);
  font-size: .95rem; font-weight: 400;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: 0;
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(47, 191, 155, .13);
}
.form-field textarea { min-height: 118px; resize: vertical; }
.form-field select { cursor: pointer; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* 只读的固定值（例如「适用平台：Android + iOS」），外观与输入框一致但不可编辑 */
.field-static {
  display: block;
  margin-top: 7px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--brand-mist);
  color: var(--brand-deep);
  font-size: .95rem; font-weight: 700;
}

.file-field input[type="file"] {
  display: block; width: 100%;
  margin-top: 7px;
  padding: 9px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--brand-mist);
  font-size: .85rem; font-weight: 400;
}
.file-field img {
  display: block; width: 100%; height: auto;
  margin-top: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}

.check-label {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 4px 0 18px;
  font-size: .86rem; font-weight: 500; color: var(--ink-soft);
  cursor: pointer;
}
.check-label input { width: 17px; height: 17px; flex: none; margin-top: 3px; accent-color: var(--brand-dark); }

/* --------------------------------------------------------------------------
   10. 登录 / 注册
   -------------------------------------------------------------------------- */
.auth-layout {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 34px; align-items: center;
  max-width: var(--wrap); margin: 0 auto;
  padding: 48px 20px 20px;
}

.auth-art {
  padding: 38px;
  border-radius: 30px;
  background: linear-gradient(150deg, #eafbf5, #cdeee1);
  color: #0b3b30;
}
.auth-art h1 { font-size: clamp(1.7rem, 3vw, 2.5rem); color: #0b3b30; }
.auth-art > p { color: #256a59; }
.auth-art .eyebrow { color: var(--brand-deep); }
.auth-art .keyboard-scene { margin: 22px 0; }
.auth-art > a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .9rem; font-weight: 700; color: var(--brand-deep);
}

.auth-card { padding: 34px; }
.auth-card > h1 { font-size: 1.45rem; margin-bottom: .3em; }
.auth-card .eyebrow { margin-bottom: 10px; }

.auth-switch {
  margin: 18px 0 0;
  display: flex; align-items: center; gap: 8px; justify-content: center;
  font-size: .88rem; color: var(--muted);
}

/* --------------------------------------------------------------------------
   11. 页面容器 / 创作者中心 / 我的收藏
   -------------------------------------------------------------------------- */
.page-shell { max-width: var(--wrap); margin: 0 auto; padding: 40px 20px 0; }

.page-title-row {
  display: flex; align-items: end; justify-content: space-between; gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.page-title-row h1 { margin-bottom: .2em; }
.page-title-row .muted { margin: 0; }
.page-title-row .eyebrow { margin-bottom: 8px; }

.upload-layout {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .8fr);
  gap: 26px; align-items: start;
}

.aside-card {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #f4fcf9, #e7f7f1);
}
.aside-card h3 { margin-bottom: .7em; }
.aside-card ol { padding-left: 0; list-style: none; counter-reset: step; }
.aside-card ol li {
  position: relative;
  padding-left: 34px;
  margin-bottom: 18px;
  counter-increment: step;
}
.aside-card ol li::before {
  content: counter(step);
  position: absolute; left: 0; top: 1px;
  display: grid; place-items: center;
  width: 23px; height: 23px;
  border-radius: 50%;
  background: var(--brand); color: #fff;
  font-size: .74rem; font-weight: 700;
}
.aside-card ol li strong { display: block; font-size: .95rem; color: var(--ink); }
.aside-card ol li p { margin: 3px 0 0; font-size: .85rem; color: var(--muted); }
.aside-card ol li:last-child { margin-bottom: 0; }

.step-num {
  display: inline-block; margin-bottom: 12px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--brand-deep);
  font-size: .74rem; font-weight: 800; letter-spacing: .14em;
}

.tabs { display: flex; gap: 6px; margin: 22px 0 20px; border-bottom: 1px solid var(--line); }
.tabs button {
  padding: 11px 18px;
  border: 0; border-bottom: 3px solid transparent;
  background: none;
  color: var(--muted);
  font-size: .92rem; font-weight: 700;
  transition: color .18s, border-color .18s;
}
.tabs button:hover { color: var(--brand-deep); }
.tabs button.selected { color: var(--ink); border-bottom-color: var(--brand); }

.order-card {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap;
  padding: 18px 22px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.order-card h3 { margin: 0 0 4px; font-size: 1rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.order-card p { margin: 0; font-size: .84rem; color: var(--muted); }
.order-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   12. 表格与徽标
   -------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.table-wrap table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table-wrap th {
  padding: 13px 16px;
  background: var(--brand-mist);
  color: var(--ink-soft);
  font-size: .78rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.table-wrap td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-wrap tbody tr:last-child td { border-bottom: 0; }
.table-wrap tbody tr:hover { background: #fbfefd; }
.table-wrap td small { margin-top: 2px; }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-size: .74rem; font-weight: 700;
  white-space: nowrap;
}
.badge.pending  { background: var(--amber-bg); color: var(--amber); }
.badge.published { background: var(--brand-soft); color: var(--brand-deep); }
.badge.paid      { background: var(--brand-soft); color: var(--brand-deep); }
.badge.active    { background: var(--brand-soft); color: var(--brand-deep); }
.badge.rejected  { background: var(--red-bg); color: var(--red); }
.badge.disabled  { background: var(--red-bg); color: var(--red); }
.badge.offline   { background: #eef1f0; color: var(--muted); }

/* --------------------------------------------------------------------------
   13. 管理后台
   -------------------------------------------------------------------------- */
.admin-shell {
  display: grid; grid-template-columns: 244px minmax(0, 1fr);
  gap: 26px;
  max-width: var(--wrap); margin: 0 auto;
  padding: 32px 20px 0;
  align-items: start;
}

.admin-sidebar {
  position: sticky; top: calc(var(--header-h) + 18px);
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 18px;
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, #17322a, #0d1f1a);
  color: #fff;
}
.admin-sidebar .eyebrow { color: var(--brand); margin-bottom: 6px; }
.admin-sidebar h2 { color: #fff; font-size: 1.15rem; margin-bottom: 14px; }
.admin-sidebar button {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: 0; border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .82);
  font-size: .9rem; font-weight: 600;
  text-align: left;
  transition: background .18s, color .18s;
}
.admin-sidebar button:hover { background: rgba(255, 255, 255, .13); color: #fff; }
.admin-sidebar button.selected { background: var(--brand); color: #fff; }
.admin-sidebar button svg { flex: none; }

.sidebar-foot {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .82rem; color: rgba(255, 255, 255, .6);
}
.sidebar-foot small { color: rgba(255, 255, 255, .42); margin-top: 4px; }

.admin-main { min-width: 0; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.stat span { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.stat strong { font-size: 1.6rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }

.admin-section-heading {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  flex-wrap: wrap;
  margin: 30px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.admin-section-heading h2 { margin: 0; font-size: 1.15rem; }
.admin-section-heading .muted { font-size: .84rem; }

/* 创作者管理面板（创建表单 + 列表） */
.creator-manage { display: flex; flex-direction: column; gap: 20px; }
.creator-form { margin-bottom: 0; }
.creator-form h3 { margin-bottom: .35em; }
.creator-form .button.dark { margin-top: 4px; }

/* --------------------------------------------------------------------------
   14. 响应式
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .masonry { column-count: 3; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  .intro { grid-template-columns: 1fr; gap: 24px; padding-top: 40px; align-items: start; }
  .banner-window { border-radius: 22px; }
  .auth-layout { grid-template-columns: 1fr; gap: 24px; padding-top: 32px; }
  .upload-layout { grid-template-columns: 1fr; }
  .detail-layout { grid-template-columns: 1fr; }
  .detail-preview { padding: 20px; }
  .detail-copy { padding: 26px 24px; }
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 16px; }
  .admin-sidebar h2, .admin-sidebar .eyebrow, .sidebar-foot { display: none; }
  .admin-sidebar button { width: auto; }
}

@media (max-width: 860px) {
  .masonry { column-count: 2; column-gap: 16px; }
  .skin-card { margin-bottom: 16px; }
  .site-header { gap: 12px; padding: 0 16px; }
  .site-header nav { display: none; }
  .brand-sub { display: none; }
  .upload-link { display: none; }
  .collection-heading { align-items: stretch; }
  .search { min-width: 0; width: 100%; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 700px) {
  .list-tools .search { flex: 1 1 100%; }
  /* 报表区在窄屏改为两列卡片，筛选控件各占整行 */
  .an-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .an-card { padding: 14px; }
  .an-card-num { margin: 9px 0 4px; }
  .an-card-num strong { font-size: 1.3rem; }
  .an-panel { padding: 14px; }
  .an-filters { gap: 8px; }
  .an-filters .search, .an-filters .an-range { flex: 1 1 100%; }
  .an-filters .sort { flex: 1 1 0; min-width: 0; }
  .an-filters .sort select { min-width: 0; width: 100%; }
}

@media (max-width: 560px) {
  body { font-size: 14.5px; }
  .masonry { column-count: 1; }
  .shop-main, .page-shell, .admin-shell, .auth-layout { padding-left: 14px; padding-right: 14px; }
  .intro { padding: 28px 0 24px; }
  .banner-window { border-radius: 20px; }
  .form-card, .auth-card { padding: 22px 18px; }
  .admin-shell { padding-top: 20px; }
  .page-title-row { align-items: flex-start; }
  .stats { grid-template-columns: 1fr; }
  .order-card { flex-direction: column; align-items: flex-start; }
  .order-actions { width: 100%; }
  .order-actions .button { flex: 1; }
  .keyboard-scene { font-size: 8px; }
  .keyboard-scene.large { font-size: 10px; }
  .site-footer { margin-top: 34px; }
  #toast { bottom: 18px; }
}

/* --------------------------------------------------------------------------
   15. 个人主页与收藏（已购 / 收藏）
   移动端固定「一排 3 个」的瀑布流；桌面端列数随宽度自适应，不做数量限制。
   -------------------------------------------------------------------------- */
/* 移动端：数据计数行 */
.m-counts {
  display: flex; gap: 8px;
  padding: 14px 10px; margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow-sm);
}
.m-counts > div { flex: 1 1 0; text-align: center; }
.m-counts strong { display: block; font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; }
.m-counts span { display: block; margin-top: 2px; font-size: .74rem; color: var(--muted); }

/* 移动端：功能入口行（图标 + 文字） */
.m-entries { display: flex; gap: 6px; margin-bottom: 14px; }
.m-entries a, .m-entries button {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 12px 4px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink-soft);
  font-size: .74rem; font-weight: 600;
  transition: border-color .18s, color .18s;
}
.m-entries a:hover, .m-entries button:hover { border-color: var(--brand); color: var(--brand-deep); }

/* 移动端：一排 3 个的瀑布流 */
.m-fav-grid { column-count: 3; column-gap: 6px; }
.m-fav-card {
  display: block; width: 100%;
  margin: 0 0 6px; padding: 0;
  border: 0; background: none; text-align: left;
  break-inside: avoid; -webkit-column-break-inside: avoid;
}
.m-fav-thumb {
  display: block; position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--brand-mist);
}
.m-fav-thumb img { display: block; width: 100%; height: auto; }
/* 没有封面时回退到键盘主题预览；3 列下格子很窄，需要很小的字号 */
.m-fav-thumb .keyboard-scene { font-size: 5.4px; padding: 5px; }
.m-fav-thumb .scene-caption, .m-fav-thumb .preview-note { display: none; }
.m-fav-title {
  display: block; margin-top: 4px;
  font-size: .7rem; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-fav-card:active .m-fav-thumb { border-color: var(--brand); }

/* 桌面端：已购 / 收藏网格，列数随宽度自适应，不限制为 3 个 */
.p-grid { column-count: 5; column-gap: 18px; }
@media (max-width: 1180px) { .p-grid { column-count: 4; } }
@media (max-width: 900px)  { .p-grid { column-count: 3; } }
.p-card {
  display: block; width: 100%;
  margin: 0 0 18px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); overflow: hidden; text-align: left;
  break-inside: avoid; -webkit-column-break-inside: avoid;
  box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.p-card:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: var(--shadow); }
.p-thumb { position: relative; background: var(--brand-mist); }
.p-thumb img { display: block; width: 100%; height: auto; }
.p-thumb .keyboard-scene { font-size: 8px; padding: 10px; }
.p-thumb .scene-caption { display: none; }
.p-title {
  display: block; padding: 10px 12px;
  font-size: .88rem; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 详情弹窗里的收藏按钮 */
.detail-fav { margin-top: 10px; }
.fav-btn.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-deep); }
.fav-btn.on svg { color: var(--brand); }

/* 已拥有作品的提示：替代购买按钮，让用户一眼看出可以直接下载 */
.owned-note {  display: flex; align-items: center; gap: 8px;
  margin: 4px 0 12px; padding: 12px 14px;
  border: 1px solid var(--brand); border-radius: var(--radius);
  background: var(--brand-soft); color: var(--brand-deep);
  font-size: .9rem; font-weight: 600;
}
.owned-note svg { flex: none; color: var(--brand); }

/* 免审标记：一眼看出哪些设计师的作品不经审核直接上架 */
.exempt-tag {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  background: var(--brand-deep); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; vertical-align: 1px;
}

/* 已购标记：列表上一眼看出哪些作品已经买过/兑换过 */
.owned-badge {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  padding: 3px 9px; border-radius: 999px;
  background: var(--brand-deep); color: #fff;
  font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.owned-badge + .category-badge, .owned-badge + .m-free { margin-left: 0; }

/* 金额口径说明：销售额已扣手续费，用一行小字讲清楚，避免被误解为算错 */
.stat-note {
  margin: 10px 0 0; padding: 8px 12px;
  border-left: 3px solid var(--brand); border-radius: 4px;
  background: var(--brand-soft); color: var(--brand-deep);
  font-size: .8rem; line-height: 1.5;
}

/* ---- 创作者「我的作品」/ 管理后台「皮肤管理」：与商店一致的瀑布流卡片 ----
   卡片本体直接复用 .skin-card / .card-preview / .card-info，这里只负责外层瓦片
   与卡片外侧的状态 / 操作条（按钮不能嵌在 <button> 里，所以操作条必须放在卡片外）。 */
.skin-tile { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; margin: 0 0 22px; }
.skin-tile .skin-card { margin: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
/* 卡片上浮会让底部条与卡片脱开，所以这里改成只变色 */
.skin-tile .skin-card:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--brand); }
.skin-tile:hover .tile-foot { border-color: var(--brand); }

.tile-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--brand-mist);
}
.tile-note {
  font-size: .74rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%;
}
.tile-actions { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.tile-actions .button { padding: 5px 10px; font-size: .78rem; }

/* 创作者后台与管理后台的主区域比商店窄，列数相应减少 */
.admin-main .masonry, #studio-works .masonry { column-count: 3; }
@media (max-width: 1180px) { .admin-main .masonry, #studio-works .masonry { column-count: 2; } }

/* 移动端两列瀑布流瓦片 */
.m-tile { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; margin: 0 0 10px; }
.m-tile .m-card { margin: 0; }
.m-tile .tile-foot { border-radius: 0 0 16px 16px; padding: 8px 10px; gap: 6px; }
.m-tile .tile-actions { margin-left: 0; width: 100%; }
.m-tile .tile-actions .button { padding: 4px 8px; font-size: .72rem; }
.m-tile .tile-foot .badge { font-size: .68rem; }

/* ---- 报表式布局：交易额卡片 / 面板 / 筛选行 ---- */
.an-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 22px; }
.an-card {
  padding: 18px 20px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow-sm);
}
.an-card-head { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .84rem; font-weight: 600; }
.an-card-head svg { color: var(--brand); flex: none; }
.an-card-num { display: flex; align-items: baseline; gap: 6px; margin: 12px 0 6px; }
.an-card-num strong { font-size: 1.72rem; font-weight: 800; letter-spacing: -.02em; }
.an-card-num em { font-style: normal; font-size: .74rem; font-weight: 700; color: var(--muted); }
.an-card-sub { font-size: .78rem; color: var(--muted); }

.an-panel {
  padding: 18px 20px; margin-bottom: 20px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow-sm);
}
.an-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.an-panel-head h3 { margin: 0; font-size: 1.02rem; }
.an-panel-head .muted { font-size: .8rem; }
.an-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: .74rem; color: var(--muted); }
.traffic-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.traffic-head .an-range { margin-bottom: 0; }
.traffic-note { margin: 10px 0 18px; font-size: .82rem; line-height: 1.5; }
.traffic-trend { height: 118px; overflow-x: auto; }
.traffic-trend .trend-col { flex: 1 0 4px; }
.traffic-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.traffic-panels .an-panel { min-width: 0; margin-bottom: 0; }
@media (max-width: 700px) { .traffic-panels { grid-template-columns: 1fr; } }

.an-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.an-account-picker { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.an-account-picker label { flex: none; font-weight: 700; }
.an-account-picker select, .an-account-picker input { min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font: inherit; }
.an-account-picker select { width: min(100%, 480px); }
.an-filters .an-range { margin-bottom: 0; }
.an-filters .search { flex: 0 1 280px; }
.an-filters .sort select { min-width: 130px; }
#an-table .mono, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .76rem; color: var(--muted); }
@media (max-width: 700px) { .an-account-picker { align-items: stretch; flex-direction: column; gap: 7px; } .an-account-picker select, .an-account-picker input { width: 100%; } }

/* ---- 数据统计面板（桌面端与移动端共用） ---- */
   CSP 为 style-src 'self'，禁止内联样式，因此柱状图高度用 .lv0–.lv10 类名控制。
   -------------------------------------------------------------------------- */
.an-range { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.an-range button {
  padding: 7px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--card); color: var(--muted);
  font-size: .86rem; font-weight: 600;
  transition: background .18s, color .18s, border-color .18s;
}
.an-range button:hover { border-color: var(--brand); color: var(--brand-deep); }
.an-range button.selected { background: var(--ink); border-color: var(--ink); color: #fff; }

.an-stats { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); margin-bottom: 8px; }
.an-h3 { margin: 24px 0 10px; font-size: 1.02rem; }
.an-hint { margin: 8px 0 0; font-size: .8rem; }

/* 收入趋势柱状图 */
.trend {
  display: flex; align-items: flex-end; gap: 2px;
  height: 84px; padding: 8px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card);
}
.trend-col { flex: 1 1 0; min-width: 2px; height: 100%; display: flex; align-items: flex-end; }
.trend-fill { width: 100%; min-height: 2px; border-radius: 2px 2px 0 0; background: var(--brand); }
.lv0 { height: 2%; }
.lv1 { height: 10%; }
.lv2 { height: 20%; }
.lv3 { height: 30%; }
.lv4 { height: 40%; }
.lv5 { height: 50%; }
.lv6 { height: 60%; }
.lv7 { height: 70%; }
.lv8 { height: 80%; }
.lv9 { height: 90%; }
.lv10 { height: 100%; }

/* --------------------------------------------------------------------------
   17. 移动端页面（?page=m 及 m-login / m-account / m-studio / m-admin）
   推荐大图、横向分类胶囊、皮肤瀑布流与悬浮底栏。
   配色沿用本站薄荷绿体系。所有选择器都以 .m- 前缀限定，不影响桌面端。
   -------------------------------------------------------------------------- */
/* 移动端页面（m / m-account / m-studio / m-admin）都有自己的顶栏与底栏，
   隐藏站点通用页头页脚，避免两套导航重复 */
body[data-page^="m"] .site-header,
body[data-page^="m"] .site-footer { display: none; }
body[data-page^="m"] { padding-bottom: 100px; }
body[data-page="m"] { background: #f4f5f6; }

.m-shop { max-width: 720px; margin: 0 auto; padding: 0 10px; }
.m-home-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 0 20px;
}
.m-home-top h1 { margin: 0; color: #151918; font-size: 1.8rem; font-weight: 850; }
.m-home-actions { display: flex; gap: 10px; }
.m-round-action {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid #e5e7e9; border-radius: 50%;
  background: #fff; color: #252c2a; box-shadow: 0 4px 16px rgba(22, 31, 28, .07);
}
.m-round-action:hover, .m-round-action:focus-visible { color: var(--brand-deep); border-color: var(--brand); }
.m-home-actions #redeem-open {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: auto; padding: 0 13px; border-radius: 22px;
  font-size: .85rem; font-weight: 700; white-space: nowrap;
}
.m-search-panel { margin: -5px 0 16px; }
.m-search-panel[hidden] { display: none; }
.m-feature-rail {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 22px; scrollbar-width: none;
}
.m-feature-rail::-webkit-scrollbar { display: none; }
.m-feature-rail-inner { display: contents; }
.m-feature-card {
  position: relative; flex: 0 0 44%; min-width: 0;
  aspect-ratio: 230 / 288; overflow: hidden; border-radius: 15px;
  scroll-snap-align: start; background: #eafbf5;
  border: 0; padding: 0; text-align: left; cursor: pointer; font: inherit;
}
.m-feature-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.m-feature-card:hover img { transform: scale(1.035); transition: transform .25s ease; }
.banner-manager { display: grid; gap: 20px; }
.banner-manager .form-card { max-width: none; }
.banner-form input[type="file"] { display: block; width: 100%; margin-top: 7px; }
.banner-form .form-field small { display: block; margin-top: 6px; color: var(--muted); font-weight: 400; line-height: 1.5; }
.banner-enabled { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; }
.banner-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.banner-list { display: grid; gap: 12px; }
.banner-item { display: flex; align-items: center; gap: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.banner-thumbnails { display: flex; align-items: center; gap: 6px; flex: none; }
.banner-thumbnails img { display: block; width: 120px; height: 75px; object-fit: contain; border-radius: 10px; background: var(--brand-mist); }
.banner-thumbnails img + img { width: 60px; height: 75px; }
.banner-item strong, .banner-item small { display: block; }
.banner-item small { color: var(--muted); margin-top: 4px; }
@media (max-width: 600px) { .banner-thumbnails img { width: 76px; height: 68px; } .banner-thumbnails img + img { width: 46px; height: 68px; } .banner-item { align-items: flex-start; } }
.m-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 12px; }
.m-section-head > div { min-width: 0; }
.m-section-head .m-sort { flex: none; }
.m-section-head h2 { margin: 0; font-size: 1.25rem; color: #171c1a; }
.m-section-head p { margin: 2px 0 0; color: var(--muted); font-size: .85rem; }

.m-top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 2px 12px;
  background: var(--bg);
}
.m-brand {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  font-size: 1.02rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em;
}
.m-brand .brand-mark { width: 30px; height: 30px; border-radius: 9px; }
#collection, #m-collection { scroll-margin-top: 78px; }

.m-search {
  flex: 1; min-width: 0;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: var(--card); color: var(--muted);
}
.m-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(47, 191, 155, .13); }
.m-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); font-size: .92rem; }

/* 横向滚动的分类胶囊 */
.m-cats {
  display: flex; gap: 8px;
  padding: 4px 0 18px;
  overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none;
}
.m-cats::-webkit-scrollbar { display: none; }
.m-cats button {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 15px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--card); color: var(--muted);
  font-size: .86rem; font-weight: 600; white-space: nowrap;
  transition: background .18s, color .18s, border-color .18s;
}
.m-cats button:hover { border-color: var(--brand); color: var(--brand-deep); }
.m-cats button.selected { background: var(--ink); border-color: var(--ink); color: #fff; }
.m-cat-symbol { font-size: 1rem; line-height: 1; }

.m-sort {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--card); color: var(--muted);
}
.m-sort select { border: 0; outline: 0; background: none; color: var(--ink); font-size: .84rem; font-weight: 600; cursor: pointer; }

/* 皮肤两列瀑布流 */
.m-grid { column-count: 2; column-gap: 10px; }
.m-grid > .empty, .m-grid > .loading { column-span: all; }

.m-card {
  display: block; width: 100%; min-width: 0;
  margin: 0 0 10px; padding: 0;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--card);
  text-align: left; overflow: hidden;
  break-inside: avoid; -webkit-column-break-inside: avoid;
  box-shadow: var(--shadow-sm);
  transition: transform .18s, box-shadow .2s, border-color .2s;
}
.m-card:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.m-card:active { transform: scale(.985); }

.m-preview { position: relative; overflow: hidden; background: var(--brand-mist); }

.m-preview img { display: block; width: 100%; height: auto; object-fit: contain; }
.m-card .keyboard-scene { display: flex; flex-direction: column; justify-content: center; width: 100%; aspect-ratio: 4 / 5; font-size: 7.2px; padding: 8px; border-radius: 0; }
.m-card .scene-caption { display: none; }

.m-free, .m-cat {
  position: absolute; top: 14px; z-index: 2;
  padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: .68rem; font-weight: 700; line-height: 1.6;
  box-shadow: 0 1px 6px rgba(16, 46, 38, .12);
}
.m-free { left: 14px; background: var(--brand); color: #fff; }
.m-cat { right: 14px; background: rgba(255, 255, 255, .94); color: var(--brand-deep); }

.m-info { padding: 9px 10px 11px; }
.m-info h3 {
  margin: 0; font-size: .9rem; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-info .m-sub {
  margin: 4px 0 0; font-size: .74rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-price { margin-top: 6px; font-size: .92rem; font-weight: 800; color: var(--brand-deep); }

.m-foot {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 0 6px; font-size: .8rem;
}
.m-foot a { color: var(--brand-deep); font-weight: 600; }
.m-foot .muted { font-size: .78rem; }

/* 底部固定导航 */
.m-nav {
  position: fixed; left: 0; right: 0; bottom: 12px; z-index: 60;
  display: flex; align-items: stretch;
  width: calc(100% - 24px); max-width: 470px; margin: 0 auto;
  padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid rgba(255,255,255,.9); border-radius: 28px;
  box-shadow: 0 10px 32px rgba(26, 40, 45, .18);
}
.m-nav a, .m-nav button {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 5px 2px;
  border: 0; background: none;
  color: var(--muted); font-size: .7rem; font-weight: 600;
  transition: color .18s;
}
.m-nav a:hover, .m-nav button:hover { color: var(--brand-deep); }
.m-nav a.selected { color: var(--brand-deep); }
.m-nav a.selected svg { color: var(--brand); }

/* 注册表单里的验证码一行：输入框 + 「获取验证码」按钮 */
.code-row { display: flex; gap: 8px; align-items: stretch; }
.code-row input { flex: 1 1 auto; min-width: 0; letter-spacing: 2px; }
.code-row .button { flex: none; white-space: nowrap; }

/* 移动端登录与注册页 */
.m-auth { padding: 4px 0 20px; }
.m-auth h1 { font-size: 1.35rem; margin-bottom: .3em; }
.m-auth .form-card { margin-top: 16px; }
.m-auth .eyebrow { margin-bottom: 10px; }
.m-auth-back { margin: 18px 0 0; text-align: center; font-size: .84rem; }
.m-auth-back a { color: var(--brand-deep); }

/* ---- 移动端子页面：我的 / 创作者后台 / 管理后台 ---- */
.m-page { max-width: 720px; margin: 0 auto; padding: 0 10px 10px; }

.m-bar-top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 8px;
  min-height: 52px; padding: 8px 0;
  background: var(--bg);
}
.m-back {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--card); color: var(--ink-soft);
}
.m-back:hover { border-color: var(--brand); color: var(--brand-deep); }
.m-bar-top h1 { flex: 1; min-width: 0; margin: 0; font-size: 1.05rem; font-weight: 800; }
.m-bar-actions { flex: none; display: flex; align-items: center; gap: 8px; }

.m-profile {
  display: flex; align-items: center; gap: 10px;
  padding: 14px; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow-sm);
}
.m-profile .avatar { width: 40px; height: 40px; font-size: 1rem; }
.m-profile strong { display: block; font-size: .98rem; }
.m-profile small { display: block; margin-top: 2px; font-size: .76rem; color: var(--muted); word-break: break-all; }

.m-h2 { margin: 16px 0 10px; font-size: 1rem; font-weight: 800; }

/* 横向滚动的分段标签 */
.m-tabs { display: flex; gap: 6px; margin: 4px 0 12px; overflow-x: auto; scrollbar-width: none; }
.m-tabs::-webkit-scrollbar { display: none; }
.m-tabs button {
  flex: none; padding: 8px 15px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--card); color: var(--muted);
  font-size: .86rem; font-weight: 700; white-space: nowrap;
}
.m-tabs button.selected { background: var(--ink); border-color: var(--ink); color: #fff; }

.m-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.m-stat { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.m-stat span { display: block; font-size: .74rem; color: var(--muted); margin-bottom: 4px; }
.m-stat strong { font-size: 1.15rem; font-weight: 800; }

/* 列表用卡片，不用表格 */
.m-list { display: flex; flex-direction: column; gap: 10px; }
.m-item {
  padding: 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow-sm);
}
.m-item-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.m-item-head h3 { margin: 0; font-size: .95rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-item p { margin: 2px 0; font-size: .8rem; }
.m-item-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.m-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-note {
  margin-top: 6px !important; padding: 7px 10px;
  border-left: 3px solid var(--amber); border-radius: 6px;
  background: var(--amber-bg); color: #7a5410; font-size: .78rem !important;
}

/* 移动端危险区（清空测试数据） */
.m-danger {
  padding: 16px;
  border: 1px solid var(--red-line); border-left: 5px solid var(--red);
  border-radius: var(--radius); background: var(--red-bg);
}
.m-danger h3 { margin: 0 0 .4em; color: #8f2c20; font-size: 1rem; }
.m-danger p { font-size: .84rem; color: #8f2c20; }
.m-danger .form-field { color: #8f2c20; margin-top: 10px; }
.m-danger code { padding: 1px 6px; border-radius: 5px; background: rgba(192, 57, 43, .12); }
.m-danger .button.danger { background: var(--red); border-color: var(--red); color: #fff; margin-top: 12px; }

/* --------------------------------------------------------------------------
   18. 无障碍 / 打印 / 动效降级
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .site-header, .site-footer, .filter-bar, .tabs, .admin-sidebar, .button { display: none !important; }
  body { background: #fff; }
}