/* ============================================================
   网蜂窝 OPC 作品发布墙 · 品牌样式表
   ============================================================
   为什么不用官网的 /styles.css：
   官网那份是给首页落地页写的，.hero 是 min-height:100vh 的 flex
   居中容器，.grid / .item / .btn / .card / .foot 全被占用。
   OPC 页面一旦撞上这些类名，布局就会被改写（实测 hero 内容被压成
   一小块就是这个原因）。

   所以这里做两件事：
  1. 视觉语言严格对齐官网 —— 深色底 #0f172a、白字、黄色渐变高亮、
     玻璃拟态卡片、发光球背景、胶囊 section-tag。进 OPC 页面要像
     还在官网里，不能像跳到了另一个产品。
  2. 所有类名加 opc- 前缀，与官网 CSS 零冲突，官网改版也不受影响。
   ============================================================ */

/* ---------- 品牌变量（与官网 styles.css 完全一致） ---------- */
:root {
  --primary: #FFD600;
  --primary-light: #FFE44D;
  --primary-dark: #E6B800;
  --accent: #FF9D00;
  --gradient-1: linear-gradient(135deg, #FFD600 0%, #FFC400 50%, #FF9D00 100%);
  --gradient-2: linear-gradient(135deg, #FFD600 0%, #FF9D00 100%);
  --dark: #0f172a;
  --dark-light: #1e293b;
  --brown: #5B4636;
  --white: #ffffff;

  --gray-100: #f1f5f9;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;

  /* 深色主题下的表面与描边 */
  --surface: rgba(30, 41, 59, .72);
  --surface-2: rgba(30, 41, 59, .5);
  --line: rgba(255, 214, 0, .12);
  --line-soft: rgba(255, 255, 255, .08);
  --line-input: rgba(255, 255, 255, .14);

  /* 状态色：深底上要提亮，否则发灰看不清 */
  --ok-bg: rgba(52, 211, 153, .12);   --ok-fg: #6EE7B7;   --ok-line: rgba(52, 211, 153, .35);
  --err-bg: rgba(248, 113, 113, .12); --err-fg: #FCA5A5; --err-line: rgba(248, 113, 113, .35);
  --warn-bg: rgba(251, 191, 36, .12); --warn-fg: #FCD34D; --warn-line: rgba(251, 191, 36, .35);
  --info-bg: rgba(96, 165, 250, .12); --info-fg: #93C5FD; --info-line: rgba(96, 165, 250, .35);

  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, .45);

  --font: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  line-height: 1.6;
  color: var(--white);
  background: var(--dark);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   窄屏防溢出兜底（全站生效）
   ------------------------------------------------------------
   grid / flex 子项的 min-width 默认是 auto，意思是「不许比内容窄」。
   中文长句、无空格 URL、联系方式的最小内容宽度常常超过 360px
   手机的可用宽度，于是整页出现横向滚动条却看不出是哪一行在撑。
   min-width:0 允许收缩，overflow-wrap 让长串自己断行。
   表单控件排除：input 有原生 min-width，归零会让尺寸计算失灵。
   ============================================================ */
@media (max-width: 720px) {
  .opc-wrap > *, .insp-head > *, .insp-head-top > *,
  .insp-cats > *, .insp-wrap > *, .opc-modal-cols > *,
  .opc-dash-cols > *, .opc-form-row > * {
    min-width: 0;
  }
  .opc-wrap p, .opc-wrap h1, .opc-wrap h2, .opc-wrap h3,
  .insp-head p, .insp-head h1, .insp-head h2, .insp-head h3,
  .opc-modal p, .opc-modal h1, .opc-modal h2, .opc-modal h3,
  .opc-modal label, .opc-modal span, .opc-modal li {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  input, textarea, select { min-width: 0; max-width: 100%; }
}

a { text-decoration: none; color: inherit; transition: all .3s ease; }
ul { list-style: none; margin: 0; padding: 0; }

::selection { background: var(--primary); color: #3B2A1A; }

/* ============================================================
   发光球背景（复用官网 .gradient-orb 的视觉）
   ============================================================ */
.opc-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  pointer-events: none;
  z-index: 0;
  animation: opcFloat 20s infinite ease-in-out;
}
.opc-orb-1 {
  width: 560px; height: 560px; top: -180px; right: -140px;
  background: radial-gradient(circle, rgba(255,214,0,.38) 0%, transparent 70%);
}
.opc-orb-2 {
  width: 480px; height: 480px; bottom: -160px; left: -120px;
  background: radial-gradient(circle, rgba(255,157,0,.28) 0%, transparent 70%);
  animation-delay: -7s;
}
.opc-orb-3 {
  width: 380px; height: 380px; top: 45%; left: 52%;
  background: radial-gradient(circle, rgba(91,70,54,.42) 0%, transparent 70%);
  animation-delay: -13s;
}
@keyframes opcFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(30px, -30px) scale(1.05); }
  50%      { transform: translate(-20px, 20px) scale(.95); }
  75%      { transform: translate(-30px, -20px) scale(1.02); }
}

/* ============================================================
   顶栏（三个页面共用）—— 对齐官网 .navbar

   布局：logo │ 导航菜单 │ ← 大留白 → │ 身份 + 主按钮
   导航靠左、动作靠右，是站点导航的通用阅读顺序：
   用户扫页面时视线从左上角开始，先看「这里有哪些页」，
   再看右上角「我能做什么」。反过来（菜单在右）会让
   「官网首页」这种纯出口链接和「开始发布」这个主 CTA 挤在一起 ——
   两者重要性完全不同，混在一堆里等于都没有被强调。
   ============================================================ */
.opc-bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center;
  gap: 22px; flex-wrap: wrap;
  padding: 16px 24px;
  background: rgba(15, 23, 42, .82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
}
.opc-logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 20px; font-weight: 700;
  /* 导航变多后 logo 必须是「不参与压缩」的那一个：
     否则窗口一窄，先被压扁的是品牌名，而它恰恰最不该变形 */
  flex: 0 0 auto;
}
/* 渐变文字 logo：与官网 .logo-text 同款 */
.opc-logo-tx {
  background: var(--gradient-1);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.opc-mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--gradient-1);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; flex: 0 0 auto;
}
.opc-bar-nav { display: flex; align-items: center; gap: 4px; font-size: 14px; }
/* 右侧动作区（身份 + 主按钮）：margin-left:auto 把它推到最右。
   没有它的话，导航和身份会紧贴 logo 挤在左边，右侧空一大片。 */
.opc-bar-right {
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
  flex: 0 0 auto;
}
/* 顶栏里的普通链接：不是按钮，就不该长成按钮的样子。
   只给文字色 + 极轻的 hover，不加背景块 —— 否则它和黄色主按钮
   并排时会变成「两个按钮」，用户反而不知道该点哪个。

   ★ 选择器用 `.opc-bar` 而不是 `.opc-bar-nav`：
     「退出」这类操作链接现在住在 .opc-bar-right 里，
     挂到 .opc-bar-nav 上会被漏掉，然后变成「无样式的裸链接」。

   ★ 这里必须用 :not(.opc-btn-primary) 排除主按钮。
     写成 `.opc-bar a` 的话权重是 (0,1,1)，会压过 `.opc-btn-primary`
     的 (0,1,0) —— 结果是主按钮的内边距被 9px 12px 覆盖、
     颜色被 var(--gray-400) 覆盖，黄色主按钮被吃成普通链接。
     这是实测踩过的坑，不是理论担忧。 */
.opc-bar a:not(.opc-btn-primary):not(.opc-logo) {
  color: var(--gray-400);
  padding: 9px 12px; border-radius: 10px;
  transition: color .2s ease, background .2s ease;
}
.opc-bar a:not(.opc-btn-primary):not(.opc-logo):hover {
  color: var(--primary-light); background: rgba(255, 214, 0, .07);
}
/* 图标 + 文字的导航项：中文和图标基线容易错位，用 flex 锁死 */
.opc-bar .opc-nav-link {
  display: inline-flex; align-items: center; gap: 7px;
}
.opc-bar .opc-nav-link i { font-size: 12.5px; opacity: .85; }

/* 当前所在页面：光靠「点下去变白」不够 —— 用户是从别的页面跳过来的，
   落地后需要一眼看出「我现在在灵感广场，不在作品墙」。
   用黄字 + 极淡黄底，不做成实心块（实心块会和右侧主按钮抢注意力）。 */
.opc-bar .opc-nav-link[aria-current="page"] {
  color: var(--primary-light);
  background: rgba(255, 214, 0, .1);
}

/* 导航项变多以后，窄屏必须能收窄，否则 logo 会被挤到换行下面。
   策略是「先砍次要、再换行、再横向滚」三级：
     1080px 以下隐藏 opc-nav-extra（学院 / 跨境 / 联系我们）
     900px 以下导航允许换行到第二行（此时右侧动作区仍靠右）
     720px 以下导航整条横向滚动，不换行 —— 换行会让顶栏
              高度随窗口宽度剧烈跳动，滚动条反而更稳
   「官网首页」永远不隐藏 —— 全藏光会让用户困在子站里出不去。 */
@media (max-width: 1080px) {
  .opc-bar-nav .opc-nav-extra { display: none; }
}
@media (max-width: 900px) {
  .opc-bar { gap: 10px 16px; }
  .opc-bar-nav { order: 3; width: 100%; }
}
@media (max-width: 720px) {
  .opc-bar { padding: 12px 16px; row-gap: 8px; }
  .opc-bar-nav { order: 0; width: auto; flex: 1 1 100%;
    justify-content: flex-start; overflow-x: auto;
    scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; }
  .opc-bar-nav::-webkit-scrollbar { display: none; }
  .opc-bar-nav > * { flex: 0 0 auto; }
  /* 身份标识在窄屏是第一个被牺牲的：它只是「我是谁」，
     不影响任何一个跳转，用户不需要它就能完成操作 */
  .opc-nav-user { display: none !important; }

  /* 窄屏顶栏重排为两行：
       第一行 = logo（自适应占满剩余空间）+ 主 CTA
       第二行 = 整条导航（横向滚动）
     原来 CTA 跟在导航后面，flex 换行时它被挤到第三行独占一行，
     顶栏因此高出 60px 左右，白白吃掉首屏。 */
  .opc-logo { flex: 1 1 auto; min-width: 0; }
  .opc-bar-right { order: 0; flex: 0 0 auto; margin-left: 0; }
  .opc-bar-nav { order: 1; flex: 1 1 100%; }
}

/* 更窄的机器（≤400px）：logo 文字 + CTA 会开始互相挤，
   此时把「OPC作品墙」后半段收掉，只留品牌名 —— 认得出是网蜂窝就行。 */
@media (max-width: 400px) {
  .opc-logo-tx { font-size: 14px; }
  .opc-bar .opc-btn-primary { padding: 8px 14px; font-size: 13.5px; }
  .opc-bar .opc-btn-primary i { font-size: 11px; }
}

/* 已登录身份标识：告诉用户「你是谁」，而不只是「你可以点哪里」。
   分隔线保留：它把「我是谁」和「我能做什么」（主按钮）隔开，
   两者性质不同，糊在一团就都看不清了。 */
.opc-nav-user {
  display: inline-flex; align-items: center; gap: 6px;
  padding-right: 12px;
  border-right: 1px solid var(--line-soft);
  font-size: 13px; color: var(--gray-500);
  white-space: nowrap;
}
.opc-nav-user::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
  background: var(--primary); box-shadow: 0 0 8px rgba(255,214,0,.6);
}
.opc-nav-user b {
  font-weight: 500; color: var(--gray-300);
  max-width: 110px; overflow: hidden; text-overflow: ellipsis;
}

/* 主按钮：黄色渐变。
   字色 #1A1400（深棕近黑）—— 官网那个 #3B2A1A 是棕灰，压在亮黄上
   对比度不足，截图里「我的作品」看着发闷发灰就是这个原因。 */
.opc-btn-primary {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 12px;
  font-weight: 600; letter-spacing: .2px;
  background: var(--gradient-1); color: #1A1400;
  box-shadow: 0 4px 20px rgba(255, 214, 0, .3);
  transition: transform .25s ease, box-shadow .25s ease;
}
.opc-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(255, 214, 0, .45);
  background: var(--gradient-1);
  color: #1A1400;
}
.opc-btn-primary i { font-size: 12.5px; }
/* 聚焦态：键盘用户必须看得见焦点框 */
.opc-btn-primary:focus-visible {
  outline: 2px solid var(--primary-light); outline-offset: 3px;
}

/* 次按钮：描边，对齐官网 .btn-outline */
.opc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 18px; font-size: 14px; font-family: inherit;
  border: 2px solid var(--gray-600); border-radius: 12px;
  background: transparent; color: var(--white);
  cursor: pointer; transition: all .3s ease;
}
.opc-btn:hover { border-color: var(--primary); background: rgba(255, 214, 0, .1); }
.opc-btn:disabled { opacity: .5; cursor: not-allowed; }

/* 大按钮（Hero / 表单提交） */
.opc-btn-lg {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 34px; font-size: 16px; font-weight: 600; font-family: inherit;
  border: 0; border-radius: 12px;
  background: var(--gradient-1); color: #3B2A1A;
  box-shadow: 0 4px 20px rgba(255, 214, 0, .4);
  cursor: pointer; transition: all .3s ease;
}
.opc-btn-lg:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(255, 214, 0, .5); }
.opc-btn-lg:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.opc-btn-dark {
  background: transparent; color: var(--white);
  border: 2px solid var(--gray-600);
}
.opc-btn-dark:hover { border-color: var(--primary); background: rgba(255, 214, 0, .1); }

/* ============================================================
   通用区块标题 —— 对齐官网 .section-header
   ============================================================ */
.opc-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }

.opc-head { text-align: center; margin-bottom: 52px; }
.opc-tag {
  display: inline-block; padding: 8px 20px; margin-bottom: 16px;
  background: rgba(255, 214, 0, .1);
  border: 1px solid rgba(255, 214, 0, .3);
  border-radius: 20px;
  font-size: 14px; font-weight: 500;
  color: var(--primary-light);
}
.opc-h2 {
  font-size: clamp(28px, 4.6vw, 44px);
  font-weight: 800; line-height: 1.2;
  margin: 0 0 16px; letter-spacing: -1px;
}
.opc-desc {
  font-size: 17px; color: var(--gray-400);
  max-width: 640px; margin: 0 auto; line-height: 1.8;
}
/* 关键词行：复用官网 .hero-keywords */
.opc-keywords {
  font-size: 15px; color: var(--primary-light);
  font-weight: 500; letter-spacing: 1px;
}

/* ============================================================
   作品墙首页 · Hero —— 对齐官网 .hero
   ============================================================ */
.opc-hero {
  max-width: 900px; margin: 0 auto;
  padding: 96px 24px 72px;
  text-align: center; position: relative; z-index: 1;
}
.opc-hero-badge {
  display: inline-block; margin-bottom: 28px;
  padding: 8px 22px; border-radius: 30px;
  background: rgba(255, 214, 0, .08);
  border: 1px solid rgba(255, 214, 0, .35);
  font-size: 13px; font-weight: 500; letter-spacing: 1px;
  color: var(--primary-light);
}
.opc-hero h1 {
  font-size: clamp(38px, 7.6vw, 76px);
  font-weight: 900; line-height: 1.1;
  margin: 0 0 24px; letter-spacing: -2px;
}
/* 后半句用黄色渐变：与官网 .title-line.highlight 同款。
   写成通用 .hl 而不是只挂在 .opc-hero 下 ——
   孵化链路标题里的「第三步」也要用同一套高亮，视觉语言得一致。 */
.hl {
  background: var(--gradient-1);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.opc-hero-en {
  font-size: 13px; letter-spacing: .26em;
  color: var(--gray-500); margin: 0 0 24px;
  text-transform: uppercase;
}
.opc-hero-lead {
  font-size: 18px; color: var(--gray-400);
  max-width: 620px; margin: 0 auto 20px; line-height: 1.8;
}
.opc-hero-lead strong { color: var(--primary-light); font-weight: 700; }
.opc-hero-cta {
  display: flex; gap: 16px; justify-content: center;
  flex-wrap: wrap; margin-top: 36px;
}

/* Hero 身份自述
   放CTA 之后而不是之前：读者先认同（共鸣），再认同定位（对号入座），
   顺序反了就变成「又一页在介绍产品」。
   视觉上刻意弱于 H1 —— 它是筛选器，不是标题。 */
.opc-forwho {
  max-width: 660px; margin: 44px auto 0;
  padding: 24px 28px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 14.5px; line-height: 2; color: var(--gray-300);
}
.opc-forwho em { font-style: normal; color: var(--primary-light); font-weight: 600; }
.opc-forwho b { color: #fff; font-weight: 500; }

/* ---------- 三步流程：卡片对齐官网 .service-card ---------- */
.opc-steps {
  max-width: 1100px; margin: 0 auto;
  padding: 0 24px 96px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
  position: relative; z-index: 1;
}
.opc-step {
  position: relative; overflow: hidden;
  background: linear-gradient(145deg, rgba(30,41,59,.8), rgba(15,23,42,.8));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 38px 30px;
  transition: all .4s ease;
}
.opc-step::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gradient-1); opacity: 0; transition: opacity .4s ease;
}
.opc-step:hover { transform: translateY(-6px); border-color: rgba(255,214,0,.3); box-shadow: var(--shadow); }
.opc-step:hover::before { opacity: 1; }
.opc-step-ico {
  width: 56px; height: 56px; border-radius: 16px;
  background: rgba(255, 214, 0, .1);
  border: 1px solid rgba(255, 214, 0, .25);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--primary);
  margin-bottom: 20px;
}
.opc-step-n {
  position: absolute; top: 26px; right: 30px;
  font-size: 40px; font-weight: 900; line-height: 1;
  color: rgba(255, 214, 0, .14);
}
.opc-step h3 { font-size: 19px; font-weight: 700; margin: 0 0 10px; }
.opc-step p { font-size: 14.5px; color: var(--gray-400); margin: 0; line-height: 1.8; }
.opc-step code {
  font-family: var(--mono); font-size: 13px;
  background: rgba(255, 214, 0, .12); color: var(--primary-light);
  padding: 2px 6px; border-radius: 4px;
}

/* ---------- 作品墙 ---------- */
/* ============================================================
   孵化链路：把页面挂进「一人公司五步」里
   ------------------------------------------------------------
   为什么加这一段：这页原本只讲「怎么把文件传上去」，
   读起来像一个独立的托管工具，读完不知道跟网蜂窝什么关系。
   这五步把 OPC 定位成第三环，前两环交给 WfwCreator，
   后两环交给孵化陪跑 —— 页面就从「工具说明书」变成
   「孵化链路的一环」，工具的价值才有上限被说出来。
   ============================================================ */
.opc-chain {
  max-width: 1100px; margin: 0 auto;
  padding: 0 24px 100px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
  position: relative; z-index: 1;
}
@media (max-width: 980px) { .opc-chain { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 560px)  { .opc-chain { grid-template-columns: 1fr; } }

.opc-chain-item {
  position: relative; overflow: hidden;
  background: linear-gradient(145deg, rgba(30,41,59,.72), rgba(15,23,42,.8));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 26px 20px 22px;
  transition: all .4s ease;
}
.opc-chain-item:hover { transform: translateY(-5px); border-color: rgba(255,214,0,.26); }
.opc-chain-n {
  display: block; font-size: 13px; font-weight: 900;
  letter-spacing: 1px; margin-bottom: 14px;
  color: var(--gray-500);
}
.opc-chain-item h3 { font-size: 17px; margin: 0 0 10px; color: #fff; line-height: 1.4; }
.opc-chain-item p  { font-size: 13.5px; color: var(--gray-400); line-height: 1.75; margin: 0; }

/* 当前所在环节：品牌色点亮 + 顶部一道渐变 + 缩放略大 */
.opc-chain-now {
  background: linear-gradient(145deg, rgba(255,214,0,.09), rgba(30,41,59,.9));
  border-color: rgba(255,214,0,.42);
  box-shadow: 0 12px 40px rgba(255,214,0,.1);
}
.opc-chain-now::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gradient-1);
}
.opc-chain-now .opc-chain-n { color: var(--primary); }
.opc-chain-now h3 { color: #fff; }
.opc-chain-badge {
  display: inline-block; vertical-align: middle;
  margin-left: 6px; padding: 2px 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0;
  color: #1a1400; background: var(--gradient-1);
  border-radius: 20px;
}
.opc-chain-who {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 16px; padding-top: 12px;
  border-top: 1px dashed var(--line-soft);
  font-size: 12px; color: var(--gray-500);
}
.opc-chain-now .opc-chain-who { color: var(--primary-light); border-top-color: rgba(255,214,0,.2); }

/* ============================================================
   从作品到生意：把「被看见」翻译成具体使用场景
   ------------------------------------------------------------
   为什么加这一段：作品墙解决的是展示，但用户真正掏钱的理由
   不是「作品墙好用」，而是「它能帮我接到单」。这四个场景
   每一个都是一人公司真实会遇到的处境 —— 直接说，比讲功能有效。
   ============================================================ */
.opc-loop { padding-bottom: 100px; position: relative; z-index: 1; }
.opc-loop-grid {
  max-width: 1100px; margin: 0 auto 26px;
  padding: 0 24px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
@media (max-width: 980px) { .opc-loop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .opc-loop-grid { grid-template-columns: 1fr; } }

.opc-loop-card {
  background: linear-gradient(145deg, rgba(30,41,59,.8), rgba(15,23,42,.8));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: all .4s ease;
}
.opc-loop-card:hover { transform: translateY(-5px); border-color: rgba(255,214,0,.3); box-shadow: var(--shadow); }
.opc-loop-ico {
  width: 48px; height: 48px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; color: var(--primary);
  background: rgba(255,214,0,.1);
  border: 1px solid rgba(255,214,0,.25);
  margin-bottom: 18px;
}
.opc-loop-card h3 { font-size: 17px; margin: 0 0 10px; color: #fff; }
.opc-loop-card p  { font-size: 13.5px; color: var(--gray-400); line-height: 1.75; margin: 0; }

/* 出口：把工具页导流回孵化服务（商业闭环） */
.opc-loop-exit {
  max-width: 860px; margin: 46px auto 0; padding: 40px 44px;
  background: linear-gradient(145deg, rgba(255,214,0,.07), rgba(30,41,59,.85));
  border: 1px solid rgba(255,214,0,.3);
  border-radius: var(--radius);
  text-align: center;
}
.opc-loop-exit h3 { font-size: 23px; margin: 0 0 14px; color: #fff; }
.opc-loop-exit p  {
  font-size: 14.5px; color: var(--gray-300); line-height: 1.9;
  margin: 0 auto 28px; max-width: 660px;
}
.opc-loop-ops { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* 深色底上的正文高亮 */
.opc-loop-exit b, .opc-faq-item b { color: var(--primary-light); }

/* ============================================================
   定价区
   ------------------------------------------------------------
   为什么现在就把价格摆出来：整站原本一个字没提收费。
   对站主是「省钱」，对商业化是「这东西不值钱」——
   于是不分享，作品墙没流量，最后还是收不到钱。
   定价原则只有一条：卡曝光，不卡上传。
   ============================================================ */
.opc-price { padding-bottom: 100px; }
.opc-price-grid {
  max-width: 1100px; margin: 0 auto 26px;
  padding: 0 24px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  align-items: stretch;
}
/* 砍掉工作室档后只剩两档，栅格跟着收。
   两列在 1100px 容器里每列仍有 530px，不会挤到内容换行。 */
.opc-price-grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 860px; }
@media (max-width: 900px) {
  .opc-price-grid-2 { grid-template-columns: 1fr; max-width: 460px; }
}

/* 诚实限定段
   为什么要显式写「我们没有」：企业采购看的是案例、合规、服务能力，
   三样都没有的时候主动承认，比摆一个空档位专业。 */
.opc-price-note {
  max-width: 860px; margin: 0 auto;
  padding: 26px 30px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid rgba(255, 214, 0, .5);
  border-radius: var(--radius);
  font-size: 14px; line-height: 1.95; color: var(--gray-300);
}
.opc-price-note b { color: #fff; }

@media (max-width: 900px) { .opc-price { padding-bottom: 70px; } .opc-price-note { padding: 22px 20px; font-size: 13.5px; } }

.opc-tier {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: linear-gradient(145deg, rgba(30,41,59,.8), rgba(15,23,42,.85));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px 30px;
  transition: all .4s ease;
}
.opc-tier:hover { transform: translateY(-5px); border-color: rgba(255,214,0,.3); box-shadow: var(--shadow); }
.opc-tier h3 { font-size: 18px; margin: 0 0 16px; color: #fff; }
.opc-tier-price { margin-bottom: 14px; }
.opc-tier-price b {
  display: block; font-size: 34px; font-weight: 900;
  letter-spacing: -1px; line-height: 1.1;
  background: var(--gradient-1);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.opc-tier-price span { font-size: 12.5px; color: var(--gray-500); margin-left: 6px; }
.opc-tier-for {
  font-size: 13px; color: var(--gray-400); line-height: 1.7;
  margin: 0 0 20px; padding-bottom: 20px;
  border-bottom: 1px dashed var(--line-soft);
}
.opc-tier ul { list-style: none; margin: 0 0 26px; padding: 0; flex: 1; }
.opc-tier li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13.5px; color: var(--gray-300); line-height: 1.6;
  margin-bottom: 12px;
}
.opc-tier li i { color: var(--primary); font-size: 12px; margin-top: 4px; flex: 0 0 auto; }
/* 按钮撑满卡片底部：三档对齐，看起来才像一套报价 */
.opc-tier .opc-btn-lg { width: 100%; }

/* 角标 */
.opc-tier-tag {
  position: absolute; top: 0; right: 0;
  padding: 6px 14px; font-size: 11.5px; font-weight: 700;
  color: var(--gray-400);
  background: rgba(15,23,42,.9);
  border-left: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0 var(--radius) 0 12px;
}
/* 推荐档：唯一带品牌色的一档，视觉上直接指向它 */
.opc-tier-hot {
  background: linear-gradient(145deg, rgba(255,214,0,.08), rgba(30,41,59,.92));
  border-color: rgba(255,214,0,.4);
  box-shadow: 0 14px 44px rgba(255,214,0,.1);
}
.opc-tier-hot::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gradient-1);
}
.opc-tier-hot .opc-tier-tag { color: #1A1400; background: var(--gradient-1); border-color: transparent; }

/* 定价说明：解释「为什么还没价格」——把犹豫变成内测报名 */
.opc-price-note {
  max-width: 860px; margin: 0 auto; padding: 24px 28px;
  display: flex; align-items: flex-start; gap: 14px;
  background: rgba(15,23,42,.5);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.opc-price-note i { color: var(--primary); font-size: 15px; margin-top: 4px; flex: 0 0 auto; }
.opc-price-note p { font-size: 13.5px; color: var(--gray-400); line-height: 1.85; margin: 0; }
.opc-price-note b { color: var(--primary-light); }
.opc-price-note a { color: var(--primary); text-decoration: none; }
.opc-price-note a:hover { text-decoration: underline; }

.opc-wall { padding-bottom: 96px; }
.opc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.opc-card {
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  background: linear-gradient(145deg, rgba(30,41,59,.8), rgba(15,23,42,.8));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  transition: all .4s ease;
}
.opc-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gradient-1); opacity: 0; transition: opacity .4s ease;
}
.opc-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 214, 0, .3);
  box-shadow: var(--shadow);
}
.opc-card:hover::before { opacity: 1; }
.opc-card-ico {
  width: 46px; height: 46px; border-radius: 13px;
  background: rgba(255, 214, 0, .1);
  border: 1px solid rgba(255, 214, 0, .22);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--primary);
  margin-bottom: 16px;
}
.opc-card-nm {
  font-size: 17px; font-weight: 700; margin: 0 0 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.opc-card-in {
  font-size: 13.5px; color: var(--gray-400); line-height: 1.75;
  margin: 0 0 18px; flex: 1; min-height: 46px;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.opc-card-by {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--gray-500);
  padding-top: 16px; border-top: 1px solid var(--line-soft);
}
.opc-card-au { color: var(--primary-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opc-card-go { color: var(--gray-500); font-size: 12px; display: inline-flex; align-items: center; gap: 5px; }
.opc-card:hover .opc-card-go { color: var(--primary); }

/* 卡片现在是 div 包 a：整块可点开作品，但联系方式行必须在链接之外。
   放进去会被 a 吞掉，点击复制会变成跳转 —— 所以拆成两层。 */
.opc-card { padding: 0; }
.opc-card-hit {
  display: flex; flex-direction: column;
  padding: 26px 24px 20px;
  color: inherit; text-decoration: none;
  flex: 1;
}
.opc-card-ct {
  display: flex; align-items: center; gap: 9px;
  margin: 0 20px 20px; padding: 11px 12px;
  background: rgba(255, 214, 0, .06);
  border: 1px solid rgba(255, 214, 0, .16);
  border-radius: 10px;
  font-size: 12.5px; color: var(--primary-light);
}
.opc-card-ct > i { font-size: 11.5px; flex: 0 0 auto; }
.opc-card-ctx {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: left;
}
.opc-card-copy {
  flex: 0 0 auto; width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 214, 0, .1);
  border: 1px solid rgba(255, 214, 0, .22);
  border-radius: 7px; color: var(--primary);
  font-size: 11px; cursor: pointer;
  transition: all .2s ease;
}
.opc-card-copy:hover { background: rgba(255, 214, 0, .2); }
.opc-card-copy.ok { color: #0F6E56; background: rgba(52,211,153,.16); border-color: rgba(52,211,153,.3); }

/* 作品墙空态
   原样式是纯文字换行（color + line-height 撑出来的），
   现在加了 h3 + p + 按钮，需要按块级排。
   「还空着」暴露稀缺，改成「还没有作品」描述状态而非评价状态。 */
.opc-empty {
  text-align: center; padding: 62px 24px 58px;
  border: 1px dashed rgba(255, 214, 0, .28); border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--gray-400); font-size: 15px; line-height: 2;
}
.opc-empty h3 {
  font-size: 24px; line-height: 1.55; margin: 0 0 16px;
  color: #fff; font-weight: 700;
}
.opc-empty p { margin: 0 0 30px; font-size: 14.5px; color: var(--gray-400); }
.opc-empty .opc-btn-primary { display: inline-block; }

/* ---------- FAQ：手风琴对齐官网 .faq-item ---------- */
.opc-faq { max-width: 880px; margin: 0 auto; padding: 0 24px 100px; position: relative; z-index: 1; }
.opc-faq-list { display: flex; flex-direction: column; gap: 14px; }
.opc-faq-item {
  background: linear-gradient(145deg, rgba(30,41,59,.75), rgba(15,23,42,.75));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 4px 26px;
  transition: border-color .3s ease, background .3s ease;
}
.opc-faq-item[open] {
  border-color: rgba(255, 214, 0, .4);
  background: linear-gradient(145deg, rgba(255,214,0,.08), rgba(15,23,42,.85));
}
.opc-faq-item summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 22px 0;
  font-size: 17px; font-weight: 600; cursor: pointer; list-style: none;
}
.opc-faq-item summary::-webkit-details-marker { display: none; }
.opc-faq-item summary i {
  color: var(--primary); font-size: 14px;
  transition: transform .3s ease; flex-shrink: 0;
}
.opc-faq-item[open] summary i { transform: rotate(180deg); }
.opc-faq-item p {
  padding: 0 0 24px; margin: 0;
  font-size: 15px; color: var(--gray-300); line-height: 1.9;
}
.opc-faq-item code {
  font-family: var(--mono); font-size: 13px;
  background: rgba(255, 214, 0, .12); color: var(--primary-light);
  padding: 2px 6px; border-radius: 4px;
}

/* ---------- 页脚 ---------- */
.opc-foot {
  border-top: 1px solid var(--line);
  background: rgba(15, 23, 42, .6);
  padding: 46px 24px 34px;
  text-align: center;
  font-size: 13.5px; color: var(--gray-500); line-height: 2.1;
  position: relative; z-index: 1;
}
.opc-foot-logo {
  font-size: 22px; font-weight: 700; margin-bottom: 8px;
  display: block;
}
.opc-foot-slogan {
  font-size: 12px; letter-spacing: .24em; color: var(--gray-600);
  margin-bottom: 18px;
}
.opc-foot a { color: var(--gray-400); }
.opc-foot a:hover { color: var(--primary-light); }
.opc-foot-sep { margin: 0 10px; opacity: .4; }

/* ============================================================
   登录页
   ============================================================ */
.opc-auth-wrap {
  min-height: 100vh; display: flex; flex-direction: column;
  position: relative;
}
.opc-auth-main {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 40px 22px 80px;
  position: relative; z-index: 1;
}
.opc-auth-split {
  display: none; max-width: 1000px; margin: 0 auto; width: 100%;
  align-items: center; gap: 60px;
}
@media (min-width: 940px) { .opc-auth-split { display: flex; } }

.opc-auth-side h2 {
  font-size: clamp(30px, 4vw, 44px); font-weight: 900;
  line-height: 1.2; margin: 0 0 20px; letter-spacing: -1px;
}
.opc-auth-side .hl {
  background: var(--gradient-1);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.opc-auth-side > p {
  font-size: 16px; color: var(--gray-400);
  margin: 0 0 30px; line-height: 1.85;
}
.opc-auth-points li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 14.5px; color: var(--gray-300);
  margin-bottom: 14px; line-height: 1.7;
}
.opc-auth-points i { color: var(--primary); margin-top: 5px; flex: 0 0 auto; }

.opc-auth-card {
  width: 100%; max-width: 430px; flex: 0 0 auto;
  background: linear-gradient(145deg, rgba(30,41,59,.85), rgba(15,23,42,.9));
  border: 1px solid var(--line);
  border-radius: 24px; padding: 38px 32px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.opc-auth-card h1 { font-size: 24px; font-weight: 800; margin: 0 0 8px; letter-spacing: -.5px; }
.opc-auth-slogan { font-size: 13.5px; color: var(--primary-light); margin: 0 0 26px; }

.opc-tabs {
  display: flex; gap: 4px; padding: 4px;
  background: rgba(15, 23, 42, .7);
  border: 1px solid var(--line-soft);
  border-radius: 12px; margin-bottom: 22px;
}
.opc-tab {
  flex: 1; padding: 10px; text-align: center;
  font-size: 14px; border-radius: 9px; cursor: pointer;
  border: 0; background: transparent; color: var(--gray-400);
  font-family: inherit; transition: all .25s ease;
}
.opc-tab:hover { color: var(--primary-light); }
.opc-tab.opc-on {
  background: var(--gradient-1); color: #3B2A1A; font-weight: 600;
}

.opc-field { margin-bottom: 17px; }
.opc-field label { display: block; font-size: 13.5px; font-weight: 500; margin: 0 0 8px; color: var(--gray-300); }
.opc-field input {
  width: 100%; padding: 12px 14px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--line-input); border-radius: 10px;
  outline: none;
  background: rgba(15, 23, 42, .6); color: var(--white);
  transition: all .25s ease;
}
.opc-field input::placeholder { color: var(--gray-600); }
.opc-field input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255, 214, 0, .15);
}
.opc-field-hint { font-size: 12px; color: var(--gray-500); margin: 7px 0 0; }

.opc-msg {
  font-size: 13.5px; padding: 12px 15px;
  border-radius: 10px; margin-bottom: 18px; display: none;
}
.opc-msg-opc-err { background: var(--err-bg); border: 1px solid var(--err-line); color: var(--err-fg); display: block; }
.opc-msg-opc-ok  { background: var(--ok-bg);  border: 1px solid var(--ok-line);  color: var(--ok-fg);  display: block; }

.opc-auth-foot { text-align: center; margin-top: 20px; font-size: 14px; color: var(--gray-400); }
.opc-auth-foot a { color: var(--primary-light); font-weight: 600; }

.opc-note {
  margin-top: 26px; padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--gray-500); line-height: 1.85;
}

/* ============================================================
   Dashboard
   ============================================================ */
.opc-page { padding: 44px 0 90px; }
.opc-page-h1 { font-size: clamp(26px, 4vw, 36px); font-weight: 800; margin: 0 0 10px; letter-spacing: -1px; }
.opc-lead { font-size: 15.5px; color: var(--gray-400); margin: 0 0 32px; line-height: 1.75; }

/* 拖拽上传区 */
.opc-drop {
  border: 2px dashed rgba(255, 214, 0, .3); border-radius: var(--radius);
  background: var(--surface-2);
  padding: 52px 26px; text-align: center; cursor: pointer;
  transition: all .3s ease;
}
.opc-drop:hover, .opc-drop.opc-over {
  border-color: var(--primary);
  background: rgba(255, 214, 0, .06);
  transform: scale(1.004);
}
.opc-drop-ico {
  width: 68px; height: 68px; border-radius: 20px; margin: 0 auto 18px;
  background: rgba(255, 214, 0, .1);
  border: 1px solid rgba(255, 214, 0, .25);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: var(--primary);
}
.opc-drop-t1 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.opc-drop-t2 { font-size: 14px; color: var(--gray-400); line-height: 1.75; }
.opc-drop input { display: none; }

/* 形态切换：两张卡并排，选中态用黄边 + 深黄底。
   不用 display:grid 而用 flex-wrap —— 窄屏时自然折行，
   不会像 grid 那样把第二张卡挤成一条缝。 */
.opc-kindpick {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin: 0 0 20px;
}
.opc-kindpick button {
  flex: 1 1 240px; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 15px 18px; cursor: pointer; text-align: left;
  font-family: inherit; color: var(--gray-400);
  background: var(--surface-2);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  transition: all .25s ease;
}
.opc-kindpick button:hover { border-color: rgba(255, 214, 0, .4); }
.opc-kindpick button.on {
  border-color: var(--primary);
  background: rgba(255, 214, 0, .08);
  color: #fff;
}
.opc-kindpick button i { font-size: 17px; color: var(--primary); }
.opc-kindpick button b { font-size: 14.5px; font-weight: 700; color: #fff; }
.opc-kindpick button small {
  font-size: 12px; color: var(--gray-500); line-height: 1.6;
}
.opc-kindpick button.on small { color: var(--gray-400); }

/* ---------- 图片卡片 ----------
   一张图 = 一张卡：缩略图 + 序号 + 名称 + 体积 + 操作。
   之前是「一行文字」+ 下面「一块缩略图网格」两份信息，
   用户得在两个地方来回对照才能确认第 3 张是哪张 —— 自造的往返。 */
.opc-icard {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; margin-bottom: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft); border-radius: 12px;
  transition: border-color .2s ease, background .2s ease;
}
.opc-icard:hover { border-color: rgba(255, 214, 0, .3); }
.opc-icard.opc-dragging { opacity: .35; }
/* 拖拽落点：只换边框色。整行反色会和「不合格」的红底撞在一起，
   用户分不清自己是在排序还是被拒了 */
.opc-icard.opc-dropzone {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(255, 214, 0, .25);
}

/* 序号：放在缩略图左上角，角标形式 —— 不占独立列，卡片更紧凑 */
.opc-ipos {
  position: absolute; left: 6px; top: 6px; z-index: 2;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #1A1400;
  background: var(--gradient-1);
}
/* 「封面」角标放在缩略图**下方**的 meta 区，不做绝对定位。
   ★ 原来它绝对定位在缩略图右上角（top:6 right:6），
     而「前移」按钮也在卡片右侧同一位置 ——
     实测截图里↑ 按钮被角标压住，两个元素直接叠在一起。
     角标挪进 meta 行后：缩略图右上角空出来了，
     而「第几张是封面」本来就是文字信息，
     和文件名、尺寸排在同一区域更自然。 */
.opc-iwork {
  display: inline-block; margin-top: 5px;
  font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px;
  color: #1A1400; background: var(--primary);
}

.opc-ithumb {
  position: relative; flex: 0 0 auto;
  width: 96px; height: 68px; border-radius: 8px; overflow: hidden;
  background: rgba(15, 23, 42, .5);
  border: 1px solid var(--line-soft);
}
.opc-ithumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.opc-ibusy {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, .68); color: var(--primary); font-size: 15px;
}

.opc-imeta { flex: 1 1 auto; min-width: 0; }
/* 两行布局：第一行文件名，第二行体积+尺寸。
   不截断文件名 —— 传错文件是最常见的错误，
   只显示「IMG_0231…」会让人分不清是不是自己要传的那张 */
.opc-iname {
  display: block; font-size: 13px; color: var(--gray-200);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-bottom: 4px;
}
.opc-isz { display: block; font-size: 12px; color: var(--gray-500); }
.opc-idim {
  font-size: 11.5px; color: var(--gray-600); margin-left: 7px;
}
.opc-ibadge {
  display: inline-block; margin-top: 5px;
  font-size: 11px; padding: 2px 9px; border-radius: 20px;
  background: rgba(148, 163, 184, .12); color: var(--gray-400);
}
.opc-ibadge-bad {
  background: var(--err-bg); color: var(--err-fg);
}
.opc-icard-bad { border-color: rgba(248, 113, 113, .4); }
.opc-icard-bad .opc-ithumb img { opacity: .4; }
.opc-icard-busy { border-color: rgba(255, 214, 0, .28); }

/* 操作按钮：单行三个。
   ★ 原来是 2 列网格（`repeat(2, 26px)`），三个按钮排成
     「前移/后移」一行、「移除」孤零零在第二行 ——
     实测截图里那个孤儿按钮看起来像「本来该有两个但少了一个」。
     单行三个在96×68 的缩略图高度里放得下，且语义分组更清楚：
     排序两个挨着，删除独立在最右。 */
.opc-imgact {
  flex: 0 0 auto;
  display: flex; gap: 4px; align-items: center;
}
.opc-imgact button {
  width: 27px; height: 27px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line-soft);
  border-radius: 7px; color: var(--gray-400);
  cursor: pointer; font-size: 11px;
  transition: all .2s ease;
}
.opc-imgact button:hover:not(:disabled) {
  border-color: var(--primary); color: var(--primary-light);
}
.opc-imgact button:disabled { opacity: .25; cursor: not-allowed; }
/* 删除与排序之间加一条竖分隔：
   两组动作性质不同（排序 vs 破坏性），视觉上分开更好点准 */
.opc-imgact .opc-danger {
  margin-left: 4px;
  border-color: rgba(248, 113, 113, .28);
  color: var(--err-fg);
}
.opc-imgact .opc-danger:hover:not(:disabled) {
  background: var(--err-bg); border-color: var(--err-fg);
}

/* 操作提示行：解释 ↑↓/拖动/封面这三个「需要被解释才会用」的功能 */
.opc-hint-row {
  background: transparent; border-style: dashed;
  border-color: var(--line-soft);
}
.opc-hint-row .opc-filerow-nm {
  color: var(--gray-600); font-size: 12px; direction: ltr; text-align: left;
}

/* 压缩前体积用删除线标出：省了多少要一眼看到，
   而不是让用户自己拿两列数字做减法 */
.opc-was {
  color: var(--gray-600); text-decoration: line-through;
  margin-left: 5px; font-size: 11px;
}
/* 压缩收益汇总条：绿色系，因为这是「帮用户赚到了」 */
.opc-saved {
  background: rgba(52, 211, 153, .1); border-color: rgba(52, 211, 153, .28);
}
.opc-saved .opc-filerow-nm { color: #6EE7B7; direction: ltr; text-align: left; }
.opc-saved i { margin-right: 5px; }

.opc-imgprev-bad img { border-color: var(--err-fg); opacity: .5; }

/* 封面处理中的占位与结果说明 */
.opc-coverwork { font-size: 13px; color: var(--gray-400); }
.opc-covermeta {
  margin-top: 7px; font-size: 12px; color: var(--gray-500);
  line-height: 1.6; word-break: break-all;
}

/* 图片预览网格：flex-wrap + 子项固定宽，
   不用 grid（部分安卓 webview 对 minmax 支持不稳） */
.opc-imgprev {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 14px; margin-bottom: 7px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft); border-radius: 10px;
}
.opc-imgprev-i {
  flex: 0 0 108px; width: 108px;
  position: relative;
}
.opc-imgprev-i img {
  width: 100%; height: 74px; object-fit: cover; display: block;
  border-radius: 7px; border: 1px solid var(--line-soft);
}
.opc-imgprev-i span {
  display: block; margin-top: 5px;
  font-size: 10.5px; color: var(--gray-500); text-align: center;
}
/* 第一张是封面，要看得出来 */
.opc-imgprev-i:first-child img { border-color: var(--primary); }
.opc-imgprev-i:first-child span { color: var(--primary-light); }

/* 编辑弹窗里的当前图集 */
.opc-ed-gallery {
  display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 6px;
}
.opc-ed-gallery-i {
  flex: 0 0 62px; width: 62px; position: relative;
}
.opc-ed-gallery-i img {
  width: 100%; height: 46px; object-fit: cover; display: block;
  border-radius: 6px; border: 1px solid var(--line-soft);
}
.opc-ed-gallery-i span {
  position: absolute; right: 2px; bottom: 2px;
  font-size: 9.5px; padding: 0 4px; border-radius: 4px;
  background: rgba(15, 23, 42, .82); color: var(--gray-300);
}
.opc-ed-gallery-i:first-child img { border-color: var(--primary); }

.opc-tag-kind { color: var(--primary-light); }
/* 警告级提示（「跳过了 3 个不支持的文件」）不是错误：
   用黄色而不是红色，且必须 display:block —— .opc-msg 默认 none，
   只写颜色的话提示永远不会出现。 */
.opc-msg-warn {
  display: block; color: var(--primary-light);
  background: rgba(255, 214, 0, .08); border: 1px solid rgba(255, 214, 0, .28);
}

/* ---------- 发布状态说明 ----------
   位置：发布按钮正下方。
   之前这个职责在吸底发布条（常驻视口底部）与跳转条上，
   两处都已移除 —— 说明文字必须紧挨着那个可能被置灰的按钮，
   否则「为什么不能发」就成了看不见的信息。 */
.opc-publish-note {
  margin: 10px 0 0;
  font-size: 12.5px; line-height: 1.65; text-align: center;
  min-height: 18px;
}
/* 阻断/缺项是「需要处理」而不是「你错了」：黄色，不用红色。
   红色会让人以为操作失败并放弃，而多数情况只是少填一项。 */
.opc-publish-note.warn { color: #FCD34D; }
.opc-publish-note.ok   { color: #6EE7B7; }

/* ---------- 文件折叠 ----------
   2000 个文件全量渲染就是 2000 个 DOM 节点，
   中低端安卓机上光布局就要几秒。这里默认折起。 */
.opc-fold {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 11px 15px; margin-bottom: 7px;
  background: var(--surface-2);
  border: 1px dashed var(--line-soft); border-radius: 10px;
  font-size: 12.5px; color: var(--gray-500);
}
.opc-fold button {
  padding: 6px 14px; font-size: 12.5px; font-family: inherit;
  color: var(--primary-light); cursor: pointer;
  background: rgba(255, 214, 0, .08);
  border: 1px solid rgba(255, 214, 0, .3); border-radius: 8px;
}
.opc-fold button:hover:not(:disabled) { background: rgba(255, 214, 0, .16); }
.opc-fold button:disabled { opacity: .5; cursor: wait; }

.opc-filerow {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 15px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft); border-radius: 10px;
  margin-bottom: 7px; font-size: 13px;
}
.opc-filerow-nm {
  flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
  direction: rtl; text-align: left; color: var(--gray-300);
}
.opc-filerow-sz { color: var(--gray-500); font-size: 12px; flex: 0 0 auto; }
.opc-badge { flex: 0 0 auto; font-size: 11px; padding: 2px 9px; border-radius: 20px; }
.opc-badge-entry { background: var(--ok-bg); color: var(--ok-fg); }
.opc-badge-bad { background: var(--err-bg); color: var(--err-fg); }
.opc-filerow-warn { background: var(--warn-bg); border-color: var(--warn-line); }
.opc-filerow-warn .opc-filerow-nm { direction: ltr; }

/* 面板（选项 / 列表 / 成功） */
.opc-panel {
  margin-top: 22px;
  background: linear-gradient(145deg, rgba(30,41,59,.75), rgba(15,23,42,.8));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
}
.opc-panel-h { font-size: 17px; font-weight: 700; margin: 0 0 20px; }

.opc-opts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .opc-opts-grid { grid-template-columns: 1fr; } }

.opc-lbl { display: block; font-size: 13.5px; font-weight: 500; margin: 0 0 8px; color: var(--gray-300); }
/* 字段下方的说明：告诉用户「填了有什么用」，而不只是「填什么」 */
.opc-lbl-hint { font-size: 12px; color: var(--gray-500); line-height: 1.65; margin: 8px 0 0; }

/* 联系方式状态标签 */
.opc-tag-ct {
  color: #6EE7B7; background: rgba(52,211,153,.12);
  border-color: rgba(52,211,153,.28);
}
.opc-tag-ct i { margin-right: 3px; }
/* 没填不是错误，但值得提醒 —— 不提醒就会一直空着 */
.opc-tag-ctnone {
  color: #FCD34D; background: rgba(251,191,36,.1);
  border-color: rgba(251,191,36,.24);
  cursor: help;
}
.opc-input {
  width: 100%; padding: 11px 13px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--line-input); border-radius: 10px;
  outline: none;
  background: rgba(15, 23, 42, .6); color: var(--white);
  transition: all .25s ease;
}
.opc-input::placeholder { color: var(--gray-600); }
.opc-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255, 214, 0, .15); }

.opc-block { margin-top: 22px; }
.opc-block > label { display: block; font-size: 13.5px; font-weight: 500; margin: 0 0 10px; color: var(--gray-300); }

.opc-radios { display: flex; gap: 9px; flex-wrap: wrap; }
.opc-radios label {
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; margin: 0;
  padding: 10px 15px;
  border: 1px solid var(--line-input); border-radius: 10px;
  cursor: pointer; transition: all .25s ease; color: var(--gray-300);
}
.opc-radios label:hover { border-color: rgba(255, 214, 0, .4); }
.opc-radios input { margin: 0; accent-color: var(--primary); }

.opc-check {
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  display: flex; align-items: flex-start; gap: 10px; font-size: 14px;
  color: var(--gray-300);
}
.opc-check input { margin: 4px 0 0; flex: 0 0 auto; accent-color: var(--primary); }
.opc-check small { display: block; color: var(--gray-500); font-size: 12.5px; margin-top: 4px; }

.opc-submit {
  width: 100%; margin-top: 22px; padding: 15px;
  font-size: 16px; font-weight: 600; font-family: inherit;
  background: var(--gradient-1); color: #3B2A1A; border: 0;
  border-radius: 12px; cursor: pointer;
  box-shadow: 0 4px 20px rgba(255, 214, 0, .3);
  transition: all .3s ease;
}
.opc-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(255, 214, 0, .45); }
.opc-submit:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.opc-linkbtn {
  background: none; border: 0; color: var(--gray-500);
  font-size: 13px; font-family: inherit; cursor: pointer;
  text-decoration: underline; padding: 0;
}
.opc-linkbtn:hover { color: var(--primary-light); }

/* 发布成功 */
.opc-done {
  margin-top: 22px;
  background: linear-gradient(145deg, rgba(255,214,0,.1), rgba(15,23,42,.85));
  border: 1px solid rgba(255, 214, 0, .4);
  border-radius: var(--radius); padding: 28px;
}
.opc-done h3 { font-size: 19px; font-weight: 700; margin: 0 0 8px; }
.opc-done h3 i { color: var(--primary); margin-right: 8px; }
.opc-done p { font-size: 14px; color: var(--gray-400); margin: 0 0 18px; line-height: 1.75; }
.opc-linkbox { display: flex; gap: 9px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.opc-linkbox input {
  flex: 1 1 280px; min-width: 0;
  font-size: 13px; font-family: var(--mono);
  padding: 12px 14px;
  border: 1px solid var(--line-input); border-radius: 10px;
  outline: none; background: rgba(15, 23, 42, .7); color: var(--primary-light);
}
.opc-linkbox button {
  flex: 0 0 auto; padding: 12px 20px; font-size: 14px; font-family: inherit;
  border: 0; border-radius: 10px; font-weight: 600;
  background: var(--gradient-1); color: #3B2A1A; cursor: pointer;
}
.opc-acts { display: flex; gap: 9px; flex-wrap: wrap; }
.opc-acts a, .opc-acts button {
  padding: 10px 18px; font-size: 13.5px; font-family: inherit;
  border: 1px solid var(--line-input); border-radius: 10px;
  background: rgba(15, 23, 42, .5); color: var(--gray-300);
  text-decoration: none; cursor: pointer; transition: all .25s ease;
}
.opc-acts a:hover, .opc-acts button:hover { border-color: var(--primary); color: var(--primary-light); }
.opc-acts .opc-act-primary {
  background: var(--gradient-1); color: #3B2A1A; border-color: transparent; font-weight: 600;
}

/* 作品列表 */
.opc-list { margin-top: 44px; }
.opc-list h2 { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.opc-list-sum { font-size: 14px; color: var(--gray-400); margin: 0 0 20px; }

.opc-item {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 20px 22px; margin-bottom: 12px;
  transition: all .3s ease;
}
.opc-item:hover { border-color: var(--line); background: var(--surface); }
.opc-item-nm { font-size: 16px; font-weight: 700; margin: 0 0 5px; word-break: break-all; }
.opc-item-meta { font-size: 12.5px; color: var(--gray-500); }

.opc-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; }
.opc-tag { font-size: 11.5px; padding: 3px 10px; border-radius: 20px; background: rgba(255,255,255,.06); color: var(--gray-400); }
.opc-tag-pub  { background: var(--ok-bg);  color: var(--ok-fg); }
.opc-tag-pwd  { background: var(--warn-bg); color: var(--warn-fg); }
.opc-tag-priv { background: var(--info-bg); color: var(--info-fg); }
.opc-tag-off  { background: var(--err-bg); color: var(--err-fg); }

.opc-item-acts { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.opc-item-acts a, .opc-item-acts button {
  padding: 8px 15px; font-size: 12.5px; font-family: inherit;
  border: 1px solid var(--line-input); border-radius: 9px;
  background: rgba(15, 23, 42, .5); color: var(--gray-300);
  text-decoration: none; cursor: pointer; transition: all .25s ease;
}
.opc-item-acts a:hover, .opc-item-acts button:hover { border-color: var(--primary); color: var(--primary-light); }
.opc-item-acts .opc-danger { color: var(--err-fg); border-color: var(--err-line); }
.opc-item-acts .opc-danger:hover { background: var(--err-bg); border-color: var(--err-fg); color: var(--err-fg); }

.opc-blank {
  text-align: center; padding: 46px 24px;
  background: var(--surface-2);
  border: 1px dashed rgba(255, 214, 0, .25); border-radius: var(--radius);
  color: var(--gray-400); font-size: 14.5px; line-height: 1.9;
}

/* ============================================================
   后台管理（admin.html 复用）
   ============================================================ */
.opc-gate-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 40px 22px; position: relative;
}
.opc-gate {
  width: 100%; max-width: 400px;
  background: linear-gradient(145deg, rgba(30,41,59,.85), rgba(15,23,42,.9));
  border: 1px solid var(--line);
  border-radius: 24px; padding: 36px 32px;
  box-shadow: var(--shadow-lg);
  position: relative; z-index: 1;
}
.opc-gate h1 { font-size: 23px; font-weight: 800; margin: 0 0 8px; }
.opc-gate p { font-size: 13.5px; color: var(--gray-400); margin: 0 0 24px; }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 900px) {
  .opc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .opc-steps { grid-template-columns: 1fr; padding-bottom: 72px; }
  .opc-hero { padding: 60px 20px 48px; }
  .opc-bar { padding: 14px 18px; }
  .opc-logo { font-size: 17px; }
}
@media (max-width: 600px) {
  .opc-grid { grid-template-columns: 1fr; }
  .opc-wrap, .opc-faq, .opc-steps { padding-left: 18px; padding-right: 18px; }
  .opc-auth-card { padding: 28px 22px; }
  .opc-panel { padding: 20px 18px; }
  .opc-orb { opacity: .3; }
}

/* 降低动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .opc-orb { animation: none; }
  * { transition-duration: .01ms !important; }
}
/* ============================================================
   灵感广场 inspire.html
   ------------------------------------------------------------
   与作品墙的分工：作品墙是「我做了东西，来看看」，
   灵感广场是「我不知道能做什么，先看别人怎么做」。
   所以这里的卡片主角是**图**，文字退居次要信息 ——
   访客是来扫的，不是来读的。
   ============================================================ */

/* ---------- 页头 ---------- */
.insp-head {
  max-width: 1240px; margin: 0 auto; padding: 52px 24px 26px;
  position: relative; z-index: 1;
}
.insp-head-top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 8px;
}
/* flex 子项默认 min-width:auto —— 标题里的长句会把这一行撑到
   比视口还宽（实测 360px 下 insp-head-top scroll 330 / client 312）。
   min-width:0 允许它收缩，交给下面各元素自己的换行规则处理。 */
.insp-head-top > * { min-width: 0; }
.insp-title { font-size: 40px; font-weight: 900; letter-spacing: -1px; line-height: 1.1; }
.insp-title em {
  font-style: normal; margin-left: 14px;
  font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--gray-400);
  vertical-align: middle;
}
.insp-sub {
  font-size: 14.5px; color: var(--gray-400); line-height: 1.85;
  max-width: 660px; margin: 12px 0 0;
}
.insp-sub b { color: var(--primary-light); font-weight: 600; }

/* 搜索 + 右侧次要操作 */
.insp-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* flex:1 + min-width:0 —— 搜索框在窄屏要能占满一行并随视口收缩，
   固定 250px 在 360px 屏上会把「发布我的」按钮挤出可视区。 */
.insp-search { position: relative; flex: 1 1 220px; min-width: 0; }
.insp-search i {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: var(--gray-500); font-size: 14px; pointer-events: none;
}
.insp-search input {
  width: 100%; padding: 11px 15px 11px 40px;
  font-size: 14px; font-family: inherit; color: #fff;
  background: rgba(30, 41, 59, .7);
  border: 1px solid var(--line-input); border-radius: 12px;
  outline: none; transition: border-color .3s ease, box-shadow .3s ease;
}
.insp-search input::placeholder { color: var(--gray-600); }
.insp-search input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255, 214, 0, .15);
}

/* 窄屏：搜索独占一整行，「发布我的」独占第二行。
   两者并排时 360px 下按钮只剩 ~90px，「发布我的」四个字被压成
   「发布我 / 的」两行 —— 按钮高度被撑高，搜索框同时被挤扁。 */
@media (max-width: 560px) {
  .insp-tools { flex-direction: column; align-items: stretch; gap: 9px; }
  .insp-search { flex: 0 0 auto; width: 100%; }
  .insp-tools .opc-btn-primary { justify-content: center; padding: 11px 18px; }
}

/* ---------- 分类栏 ----------
   ★ 这里从「横向滚动」改成「自动换行」，是用户明确要求的。

   为什么原来横向滚动是个问题（不是「不好看」，是「信息不可达」）：
   1. 滚动条被 display:none 藏掉了，鼠标用户根本不知道右边还有分类；
      只有用触控板横向划的人才会发现 —— 这等于把 1/3 的分类藏起来。
   2. 一旦折行，overflow-x:auto 会把换行后的第二行也一起裁掉
      （截图里「其他」被切一半就是这个原因），分类直接消失。
   3. 分类只有 10 个，两行以内就能排完，横向滚动省下的那点高度
      根本不值这个可用性代价。

   改成 flex-wrap 后：宽屏一行排完，窄屏自然折行，任何分类都不会丢。 */
/* ---------- 形态筛选（网页 / 图片） ----------
   位置在分类栏之上：形态是更粗的一层筛选（「看什么」），
   分类是更细的一层（「做什么」）。先粗后细，符合扫视顺序。 */
.insp-kinds {
  max-width: 1240px; margin: 0 auto; padding: 0 24px 12px;
  position: relative; z-index: 1;
}
.insp-kinds-in {
  display: inline-flex; flex-wrap: wrap; gap: 8px;
  padding: 5px; border-radius: 999px;
  background: rgba(15, 23, 42, .55);
  border: 1px solid var(--line-soft);
}
.insp-kindbtn {
  display: inline-flex; align-items: center; gap: 7px;
  flex: 0 0 auto;   /* 不加的话窄屏会被压成竖排文字 */
  padding: 8px 16px; white-space: nowrap;
  font-size: 13.5px; font-family: inherit; font-weight: 500;
  color: var(--gray-400); background: transparent;
  border: 0; border-radius: 999px; cursor: pointer;
  transition: all .25s ease;
}
.insp-kindbtn:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.insp-kindbtn.on {
  color: #1A1400; font-weight: 700;
  background: var(--gradient-1);
  box-shadow: 0 4px 14px rgba(255, 214, 0, .24);
}
.insp-kindbtn b {
  font-size: 11.5px; font-weight: 700; color: var(--gray-500);
  padding: 1px 6px; border-radius: 20px; background: rgba(255, 255, 255, .06);
}
.insp-kindbtn.on b { color: #1A1400; background: rgba(0, 0, 0, .16); }

/* ---------- 分类栏 ---------- */
.insp-cats {
  max-width: 1240px; margin: 0 auto; padding: 0 24px 22px;
  position: relative; z-index: 1;
}
.insp-cats-in { display: flex; flex-wrap: wrap; gap: 9px; }
.insp-cat {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 17px; white-space: nowrap;
  /* flex:0 0 auto —— 不加的话，flex 容器在窄屏会尝试压缩胶囊宽度，
     文字被挤成竖排（一列一个字），比换行难看得多。 */
  flex: 0 0 auto;
  font-size: 13.5px; font-family: inherit; font-weight: 500;
  color: var(--gray-300); background: rgba(30, 41, 59, .6);
  border: 1px solid var(--line-soft); border-radius: 999px;
  cursor: pointer; transition: all .25s ease;
}
.insp-cat:hover { color: #fff; border-color: var(--line); background: rgba(30, 41, 59, .9); }
.insp-cat b {
  font-size: 11.5px; font-weight: 700; color: var(--gray-500);
  padding: 1px 6px; border-radius: 20px; background: rgba(255, 255, 255, .06);
}
.insp-cat.on {
  color: #1A1400; font-weight: 700; background: var(--gradient-1);
  border-color: transparent; box-shadow: 0 4px 16px rgba(255, 214, 0, .28);
}
.insp-cat.on b { color: #1A1400; background: rgba(0, 0, 0, .16); }

/* 与当前形态不匹配的分类：置灰但保留可点。
   ★ 不能 display:none —— 隐藏会让用户以为「这平台没有这个品类」，
     而实际上它存在、只是当前形态下没有作品。
     置灰 + opacity 是「有，但此刻无关」的唯一正确表达。 */
.insp-cat.off { opacity: .38; }
.insp-cat.off:hover { opacity: .7; }

/* ---------- 卡片网格 ---------- */
.insp-wrap { max-width: 1240px; margin: 0 auto; padding: 6px 24px 90px; position: relative; z-index: 1; }
.insp-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1100px) { .insp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .insp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .insp-grid { grid-template-columns: 1fr; } }

.insp-card {
  display: flex; flex-direction: column;
  background: linear-gradient(145deg, rgba(30, 41, 59, .8), rgba(15, 23, 42, .88));
  border: 1px solid var(--line-soft); border-radius: 18px;
  overflow: hidden; transition: all .4s ease;
}
.insp-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 214, 0, .32);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

/* 缩略图：16:10，与参考图一致的横版比例。
   minmax(0,1fr) + overflow:hidden 是必要的 —— grid 子项默认
   min-width:auto，长标题会把整个卡片撑破网格。 */
.insp-thumb {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--dark-light);
  border-bottom: 1px solid var(--line-soft);
}
.insp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 没传封面时的降级：分类色块 + 图标。
   ★ 试过「首字水印」方案，截图后发现 20 张卡并排时
     每张都压着一个大灰字，整屏看下去像加载失败 / 出了 bug，
     恰好是要避免的效果。改成小图标 + 低饱和度，
     有设计感但不抢眼，也就不会被误读成「图坏了」。 */
.insp-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,214,0,.07) 0%, transparent 62%),
    linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}
.insp-ph i { font-size: 26px; color: rgba(255, 214, 0, .28); }

/* 占位状态下，标题首字做成小水印（角上，不占中心） */
.insp-ph span {
  position: absolute; right: 12px; bottom: 4px;
  font-size: 34px; font-weight: 900; color: rgba(255, 255, 255, .045);
  line-height: 1; letter-spacing: -2px;
}

/* 分类角标：压在缩略图左上角 */
.insp-badge {
  position: absolute; top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; font-size: 11.5px; font-weight: 600;
  color: #1A1400; background: var(--gradient-1);
  border-radius: 20px; backdrop-filter: blur(8px);
}
.insp-badge i { font-size: 10px; }

/* PV 角标：右上角。用社会认同当视觉卖点 */
.insp-pv {
  position: absolute; top: 10px; right: 10px;
  padding: 5px 10px; font-size: 11.5px; font-weight: 600;
  color: var(--gray-300);
  background: rgba(15, 23, 42, .78);
  border: 1px solid var(--line-soft);
  border-radius: 20px; backdrop-filter: blur(8px);
}
.insp-pv i { font-size: 10px; color: var(--primary); margin-right: 4px; }

/* 形态角标：左下角，压在分类角标下方。
   ★ 不能放右上——那里已经被 insp-pv 占了，叠在一起两个都读不清。
   深底上必须提亮：沿用项目约定的 rgba(52,211,153,.12) 底 + #6EE7B7 字，
   直接用浅色系的 #E1F5EE 在深底会发灰。 */
.insp-kind {
  position: absolute; left: 10px; bottom: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; font-size: 11px; font-weight: 600;
  color: #6EE7B7; background: rgba(52, 211, 153, .12);
  border: 1px solid rgba(52, 211, 153, .3);
  border-radius: 20px; backdrop-filter: blur(8px);
}
.insp-kind i { font-size: 10px; }

/* 空态里的两条路：必须 flex-wrap + 子项不伸缩，
   否则窄屏下第二行会被裁掉一半（项目里踩过这个坑）。 */
.insp-ways {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center; margin: 0 0 26px;
}
.insp-ways .insp-cta { flex: 0 0 auto; }

/* 卡片正文 */
.insp-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.insp-name {
  font-size: 15.5px; font-weight: 700; color: #fff; margin: 0 0 8px;
  line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.insp-desc {
  font-size: 12.5px; color: var(--gray-400); line-height: 1.7; margin: 0 0 14px;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  min-height: 42px;
}
.insp-foot {
  margin-top: auto; padding-top: 12px;
  border-top: 1px dashed var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.insp-who { display: flex; align-items: center; gap: 7px; min-width: 0; }
.insp-who i {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #1A1400; background: var(--gradient-1);
}
.insp-who span {
  font-size: 12px; color: var(--gray-500);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.insp-go {
  flex: 0 0 auto; font-size: 12px; font-weight: 600;
  color: var(--primary); text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.insp-go:hover { color: var(--primary-light); }

/* 联系方式：灵感页的转化点。
   放在卡片底部而不是详情页，是因为「看到好作品 → 立刻要联系方式」
   的冲动只有几秒，过了就得再点一次。 */
.insp-ct {
  margin-top: 12px; padding: 9px 12px;
  display: flex; align-items: center; gap: 8px;
  background: rgba(255, 214, 0, .07);
  border: 1px solid rgba(255, 214, 0, .18);
  border-radius: 10px;
}
.insp-ct i { color: var(--primary); font-size: 12px; flex: 0 0 auto; }
.insp-ct span {
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--gray-200, #e2e8f0);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.insp-ct button {
  flex: 0 0 auto; padding: 4px 9px; font-size: 11.5px; font-family: inherit;
  color: var(--primary); background: rgba(255, 214, 0, .12);
  border: 1px solid rgba(255, 214, 0, .28); border-radius: 7px;
  cursor: pointer; transition: all .25s ease;
}
.insp-ct button:hover { background: var(--gradient-1); color: #1A1400; border-color: transparent; }

/* ---------- 空态 ----------
   原来只有「灰图标 + 一句话 + 一颗大黄按钮」，在满屏卡片里显得又空又单。
   这里改成一张「等待被填满的画布」：网格底纹暗示这里本该有东西，
   徽章 + 标题 + 三步说明 + 带箭头的胶囊 CTA + 次级入口，层次就出来了。 */
.insp-empty {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 52px 30px 44px;
  border: 1px dashed rgba(255, 214, 0, .3);
  border-radius: 24px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 214, 0, .07), transparent 62%),
    linear-gradient(160deg, rgba(30, 41, 59, .62), rgba(15, 23, 42, .5));
}
/* 网格底纹：暗示「这里本该有作品」 */
.insp-empty::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(68% 68% at 50% 42%, #000, transparent 78%);
  mask-image: radial-gradient(68% 68% at 50% 42%, #000, transparent 78%);
}
/* 内容压在底纹之上 */
.insp-empty > * { position: relative; z-index: 1; }

.insp-empty-ic {
  position: relative;
  width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center;
  margin-bottom: 24px;
  background: radial-gradient(circle at 50% 38%, rgba(255, 214, 0, .24), rgba(255, 214, 0, .04) 72%);
  border: 1px solid rgba(255, 214, 0, .3);
  box-shadow: 0 0 0 8px rgba(255, 214, 0, .05), 0 14px 44px rgba(255, 214, 0, .18);
}
.insp-empty-ic i { font-size: 30px; color: var(--primary); }
.insp-empty h3 {
  font-size: 21px; color: #fff; margin: 0 0 10px; font-weight: 700; letter-spacing: -.2px;
}
.insp-empty h3 em {
  font-style: normal;
  background: var(--gradient-1);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.insp-empty p {
  font-size: 14px; color: var(--gray-400); line-height: 1.85;
  margin: 0 0 26px; max-width: 30em;
}

/* 三步说明 */
.insp-steps { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin: 0 0 30px; }
.insp-step {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px 8px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line-soft);
  font-size: 13px; color: var(--gray-300); white-space: nowrap;
}
.insp-step b {
  width: 19px; height: 19px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--gradient-1); color: #1A1400; font-size: 11px; font-weight: 700;
}

/* 主 CTA：胶囊 + 箭头位移，比裸黄按钮更有"入口感" */
.insp-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 30px; border: 0; border-radius: 999px;
  font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: .2px;
  text-decoration: none; cursor: pointer;
  background: var(--gradient-1); color: #1A1400;
  box-shadow: 0 8px 28px rgba(255, 214, 0, .32);
  transition: transform .25s ease, box-shadow .25s ease;
}
.insp-cta i { font-size: 13px; transition: transform .25s ease; }
.insp-cta:hover {
  transform: translateY(-3px); color: #1A1400;
  box-shadow: 0 16px 42px rgba(255, 214, 0, .45);
}
.insp-cta:hover .fa-arrow-right { transform: translateX(5px); }
.insp-cta:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 3px; }

/* 次级入口：低调的描边按钮，和主 CTA 分主次 */
.insp-cta-2 {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 14px; padding: 9px 18px; border-radius: 999px;
  font-size: 13.5px; color: var(--gray-300); text-decoration: none;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line-input);
  transition: all .25s ease;
}
.insp-cta-2:hover { color: #fff; background: rgba(255, 255, 255, .09); border-color: var(--line); }

.insp-empty-note {
  margin-top: 18px; font-size: 12.5px; color: var(--gray-500);
  display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: center;
}
.insp-empty-note span { display: inline-flex; align-items: center; gap: 5px; }
.insp-empty-note i { font-size: 11px; color: var(--primary); opacity: .8; }
.insp-empty-note em { font-style: normal; opacity: .5; }

/* 出错态：不需要三步和 CTA，压扁成一条即可，别抢戏 */
.insp-empty.mini { padding: 46px 24px; border-style: dashed; }
.insp-empty.mini .insp-empty-ic {
  width: 60px; height: 60px; margin-bottom: 18px;
  background: rgba(255, 255, 255, .03);
  border-color: var(--line-input);
  box-shadow: none;
}
.insp-empty.mini .insp-empty-ic i { font-size: 22px; color: var(--gray-500); }
.insp-empty.mini p { margin-bottom: 0; }

@media (max-width: 560px) {
  .insp-empty { padding: 40px 20px 34px; border-radius: 20px; }
  .insp-empty h3 { font-size: 18px; }
  .insp-cta { width: 100%; justify-content: center; }
}

/* ---------- 骨架屏 ---------- */
.insp-skel {
  aspect-ratio: 16 / 10; border-radius: 18px 18px 0 0;
  background: linear-gradient(100deg, #1e293b 30%, #263449 50%, #1e293b 70%);
  background-size: 220% 100%;
  animation: inspShimmer 1.4s infinite;
}
@keyframes inspShimmer { 0% { background-position: 220% 0; } 100% { background-position: -20% 0; } }
.insp-skel-card {
  background: linear-gradient(145deg, rgba(30, 41, 59, .8), rgba(15, 23, 42, .88));
  border: 1px solid var(--line-soft); border-radius: 18px; overflow: hidden;
}
.insp-skel-line { height: 11px; border-radius: 6px; background: #263449; margin: 10px 0; }

/* 加载更多 */
.insp-more { text-align: center; margin-top: 34px; }

/* 首页通往灵感广场的横条 */
.opc-insp-go {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-bottom: 90px; padding: 30px 34px;
  background: linear-gradient(120deg, rgba(255,214,0,.07), rgba(30,41,59,.85));
  border: 1px solid rgba(255,214,0,.26);
  border-radius: var(--radius);
  text-decoration: none;
  transition: all .4s ease;
}
.opc-insp-go:hover {
  transform: translateY(-4px);
  border-color: rgba(255,214,0,.5);
  box-shadow: 0 16px 40px rgba(255,214,0,.12);
}
.opc-insp-go h3 { font-size: 20px; color: #fff; margin: 0 0 8px; }
.opc-insp-go h3 span { color: var(--primary-light); }
.opc-insp-go p { font-size: 14px; color: var(--gray-400); margin: 0; line-height: 1.75; }
.opc-insp-go > i {
  flex: 0 0 auto; font-size: 22px; color: var(--primary);
  transition: transform .4s ease;
}
.opc-insp-go:hover > i { transform: translateX(6px); }
@media (max-width: 640px) {
  .opc-insp-go { padding: 24px 22px; }
  .opc-insp-go h3 { font-size: 17px; }
  .opc-insp-go h3 span { display: block; }
}

/* ============================================================
   编辑作品信息弹窗（dashboard）
   ------------------------------------------------------------
   为什么必须是弹窗，不能复用页面顶部的发布表单：
   发布表单是「选文件 → 填信息 → 上传」一条龙，
   打开它就等于把用户拽回上传流程 —— 他只想改个标题，
   却被要求重新面对拖拽区，体感上就是「跳到新发布」。
   弹窗把「改信息」和「传文件」彻底分开：
   改信息不碰文件，链接和内容完全不动。
   ============================================================ */
.opc-modal {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(2, 6, 23, .78);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.opc-modal.on { display: flex; }

/* 面板自身可滚动：字段有 6 项，矮屏（如 1366×768）上
   固定高度会把「保存」按钮顶出视口，用户滚到底才看得见。
   max-height 用 92vh 而不是固定 px：1080p 和 768p 都能吃掉大部分屏高。 */
.opc-modal-box {
  width: 100%; max-width: 880px; max-height: 92vh; overflow-y: auto;
  background: linear-gradient(160deg, #1e293b, #0f172a);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 26px 30px 22px;
  animation: opcModalIn .28s ease;
}
/* 双栏：把 6 个字段从「一列 6 行」压成「两列 3 行」，
   高度直接砍半，1080p 下彻底不出滚动条。
   ★ 不用 grid-template-columns: 1fr 1fr ——
     栅格列在部分安卓 webview 支持不稳（这个项目的小程序端已踩过），
     flex + min-width:0 是这里更稳的写法。 */
.opc-modal-cols { display: flex; gap: 26px; align-items: flex-start; }
.opc-modal-col { flex: 1 1 0; min-width: 0; }
@media (max-width: 820px) {
  .opc-modal-cols { flex-direction: column; gap: 0; }
}
/* 双栏下把「同时发布到作品墙」和上一块的间距收一点，
   否则右栏底部会多出一截空白，看起来像没对齐 */
.opc-modal-col .opc-check { margin-top: 20px; }

@keyframes opcModalIn {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.opc-modal-hd {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 4px;
}
.opc-modal-hd h3 { font-size: 18px; font-weight: 700; margin: 0; color: #fff; }
.opc-modal-hd p { font-size: 12.5px; color: var(--gray-500); margin: 6px 0 0; line-height: 1.6; }
.opc-modal-x {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .06); border: none; cursor: pointer;
  color: var(--gray-400); font-size: 14px; transition: all .2s ease;
}
.opc-modal-x:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.opc-modal-body { margin-top: 18px; }
/* 弹窗内的块间距比发布表单更紧：这里字段更多但每个都更简单，
   沿用发布表单的 22px 间距会白吃掉十几像素，正好把「不滚动」的目标推掉 */
.opc-modal-col .opc-block { margin-top: 16px; }
.opc-modal-col .opc-block:first-child { margin-top: 0; }
.opc-modal-col .opc-lbl { margin-bottom: 6px; }
/* hint 与上方控件的间距也收一点，理由同上 */
.opc-modal-col .opc-lbl-hint { margin-top: 6px; }

/* 细滚动条：双栏后大多数屏高下已经不出滚动条了，
   但 768p 笔记本 + 浏览器缩放放大时仍可能出现。
   默认滚动条是一条 15px 宽的亮灰竖条，压在深色面板上非常扎眼，
   而它的存在本身就在暗示「下面还有东西」，把双栏好不容易省下的空间又还回去了。
   改成 6px 半透明，不占地方也不抢视线。 */
.opc-modal-box { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.opc-modal-box::-webkit-scrollbar { width: 6px; }
.opc-modal-box::-webkit-scrollbar-track { background: transparent; }
.opc-modal-box::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .16); border-radius: 3px;
}
.opc-modal-box::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .3); }

.opc-modal-ft {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.opc-modal-ft .opc-submit { margin: 0; }
/* 弹窗里的次要按钮不能继承发布按钮的黄色 —— 两个黄按钮并排
   会让用户犹豫「是不是要点两个」。这里用幽灵按钮。 */
.opc-btn-ghost {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 20px; border-radius: 12px; cursor: pointer;
  font-size: 14px; font-weight: 500; font-family: inherit;
  color: var(--gray-300); background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line-input);
  transition: all .25s ease;
}
.opc-btn-ghost:hover { color: #fff; background: rgba(255, 255, 255, .1); border-color: var(--line); }
.opc-btn-ghost:disabled { opacity: .5; cursor: not-allowed; }

/* 弹窗里的保存结果提示：不用 alert —— alert 会把弹窗关掉的感觉做实，
   用户改完看不到「成功」就走了，不知道到底存没存上 */
.opc-modal-msg {
  font-size: 13px; line-height: 1.7; margin-top: 12px;
  padding: 0; border-radius: 10px; transition: all .25s ease;
}
.opc-modal-msg.on { padding: 10px 13px; }
.opc-modal-msg.ok  { color: var(--ok-fg);  background: var(--ok-bg);  border: 1px solid var(--ok-line); }
.opc-modal-msg.err { color: var(--err-fg); background: var(--err-bg); border: 1px solid var(--err-line); }

/* 封面图当前状态：让用户改之前先知道「现在这张是什么样」 */
.opc-ed-cover-now {
  display: flex; align-items: center; gap: 12px; margin-top: 10px;
  padding: 10px; border-radius: 12px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line-soft);
}
.opc-ed-cover-now img {
  width: 104px; height: 65px; object-fit: cover; flex: 0 0 auto;
  border-radius: 8px; background: var(--dark);
}
.opc-ed-cover-now span { font-size: 12.5px; color: var(--gray-500); line-height: 1.6; }

@media (max-width: 560px) {
  .opc-modal { padding: 0; align-items: flex-end; }
  .opc-modal-box {
    max-width: none; max-height: 92vh;
    border-radius: var(--radius) var(--radius) 0 0;
    /* 底部留出操作条的高度：操作条改成 sticky 吸底后，
       如果不给 padding-bottom，最后一个字段会被吸底条盖住 */
    padding: 24px 18px 96px;
  }
  .opc-modal-ft {
    /* 吸底而不是跟着内容滚走 ——
       字段有 6 项，矮屏上内容区可滚动，若按钮跟着滚，
       用户改完最后一个字段必须再滚一段才能看见「保存」，
       很容易以为没有保存按钮直接放弃。sticky 让它始终可点。 */
    position: sticky; bottom: -24px;
    margin: 24px -18px -96px; padding: 14px 18px 18px;
    /* 必须是纯色不能用渐变：半透明会让下面的字段透上来，
       截图里能看到「取消」后面还压着「谁能看」的选项，
       看起来像两层内容重叠。 */
    background: #131c31;
    border-top: 1px solid var(--line-soft);
    flex-direction: row;
  }
  /* 窄屏两个按钮并排，「取消」只有两个字，
     不锁 flex-basis 会被压到竖排（一列一个字） */
  .opc-modal-ft .opc-btn-ghost { flex: 0 0 88px; }
  .opc-modal-ft .opc-submit   { flex: 1 1 auto; }
  .opc-modal-ft .opc-submit, .opc-modal-ft .opc-btn-ghost {
    justify-content: center; white-space: nowrap;
  }
  /* 消息区在打开时才有高度；空闲时用 margin 而不是 padding，
     免得「.on」一加就突然多出一块空白把内容顶上去 */
  .opc-modal-msg.on { margin-bottom: 14px; }
}