/* ============================================================
   网蜂窝 · 作品墙共享品牌层  wall.css
   与官网 site.css 同一套：色板 token / 三栏导航 / 胶囊按钮 /
   卡片尺度 / hero 渐变+蜂窝纹理 / 深棕页脚 / 渐显动效
   载入位置：各页面内联样式之后（最后载入，负责归一）
   ============================================================ */

:root{
  /* ---- 品牌色（与 site.css 完全一致） ---- */
  --honey:#FFD600; --honey-deep:#F0BE00; --honey-soft:#FFF3B8;
  --brown:#5D4626; --brown-ink:#3E2F1A;
  --cream:#FFFFE6; --cream-soft:#FFFBEB; --paper:#FFFDF5;
  --ink:#241A0C; --ink-soft:#6B5B44;
  --line:rgba(93,70,38,.14);

  /* ---- 尺度 ---- */
  --radius:20px; --radius-sm:14px; --radius-xs:10px;
  --shadow:0 20px 60px -25px rgba(93,70,38,.35);
  --shadow-sm:0 3px 14px -6px rgba(93,70,38,.18);
  --ease:cubic-bezier(.22,1,.36,1);
  --font:"PingFang SC","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",system-ui,-apple-system,sans-serif;

  /* ---- 功能色：三档统一（原先 login/publish/admin 各一套红绿） ---- */
  --danger:#B4372A; --danger-soft:#FDF0EE; --danger-line:#F0D3CE;
  --ok:#3E7D4F;     --ok-soft:#EEF7F0;     --ok-line:#CFE6D5;
  --warn:#9A6B00;   --warn-soft:#FDF6EC;   --warn-line:#EBD5B4;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
body{
  font-family:var(--font);
  background:var(--paper);
  color:var(--brown);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  /* 短页面时页脚贴底，避免页面下方留白 */
  display:flex;flex-direction:column;min-height:100vh;
}
body > footer,body > .wfoot{margin-top:auto}
::selection{background:var(--honey);color:var(--brown-ink)}
:focus-visible{outline:3px solid var(--brown);outline-offset:3px;border-radius:6px}
.whero :focus-visible,footer :focus-visible,.wfoot :focus-visible{outline-color:var(--brown-ink)}
a{color:inherit;text-decoration:none}
h1,h2,h3{text-wrap:balance}

/* ---------- 统一内容宽度：与导航同为 1180 ---------- */
.wrap{max-width:none;width:min(1180px,92vw);margin:0 auto;padding:clamp(32px,4.5vw,54px) 0 80px}

/* ---------- 导航（三栏网格：品牌 | 菜单精确居中 | 操作） ---------- */
header#hd{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 0;transition:background .3s,box-shadow .3s,padding .3s}
header#hd.scrolled{background:rgba(255,253,245,.92);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 8px 30px -20px rgba(93,70,38,.5);padding:10px 0}
header#hd .nav{
  position:static;background:none;border:0;height:auto;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  justify-content:normal;
  width:min(1180px,92vw);margin:0 auto;padding:0;
}
.brand{display:flex;align-items:center;gap:.7em;font-weight:800;font-size:1.12rem;letter-spacing:.02em;color:var(--ink);justify-self:start;white-space:nowrap}
.brand .logo{width:42px;height:42px;flex:none;filter:drop-shadow(0 5px 12px rgba(93,70,38,.28))}
.brand small{display:block;font-size:.6rem;font-weight:600;letter-spacing:.14em;color:var(--ink-soft);line-height:1.2;white-space:nowrap}
header#hd .nav-links{justify-self:center;display:flex;align-items:center;gap:clamp(16px,2.2vw,34px);font-size:.94rem;font-weight:600;letter-spacing:.01em;white-space:nowrap}
header#hd .nav-links a{position:relative;display:inline-flex;align-items:center;padding:8px 2px;line-height:1.45;color:var(--brown-ink);opacity:.7;transition:opacity .2s,color .2s}
header#hd .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:3px;background:var(--honey);border-radius:3px;transition:right .28s var(--ease)}
header#hd .nav-links a:hover,header#hd .nav-links a.active{opacity:1;color:var(--brown)}
header#hd .nav-links a:hover::after,header#hd .nav-links a.active::after{right:0}
header#hd .nav > .btn,header#hd .nav > .btn-honey,header#hd .nav > .btn-dark{justify-self:end}
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px;border-radius:10px}
.burger span{display:block;width:22px;height:2.5px;background:var(--brown-ink);margin:5px 0;border-radius:2px;transition:.3s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:99;background:var(--cream);padding:104px 8vw 40px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateY(-10px);pointer-events:none;transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s}
.mobile-menu.open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.mobile-menu a{font-size:1.35rem;font-weight:700;padding:16px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;color:var(--brown-ink)}
.mobile-menu a span{color:var(--brown);opacity:.4;font-size:1rem}
.mobile-menu .mm-cta{margin-top:24px;border:none;color:var(--brown)}
@media(max-width:900px){
  header#hd .nav-links,header#hd .nav > .btn,header#hd .nav > .btn-honey,header#hd .nav > .btn-dark{display:none}
  .burger{display:block;justify-self:end}
}

/* ---------- 按钮：全站统一胶囊 + 官网动效 ---------- */
.btn,.btn-honey,.btn-dark,.btn-ghost,.btn-line,.btn-danger{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:inherit;font-weight:700;font-size:.95rem;letter-spacing:.02em;
  padding:.85em 1.7em;border-radius:999px;cursor:pointer;border:none;
  text-decoration:none;white-space:nowrap;
  transition:transform .2s var(--ease),box-shadow .25s,background .2s,color .2s;
}
.btn:active,.btn-honey:active,.btn-dark:active,.btn-ghost:active{transform:translateY(0) scale(.985)}
.btn .ico,.btn-honey .ico,.btn-dark .ico,.btn-ghost .ico{transition:transform .25s var(--ease)}
.btn:hover .ico,.btn-honey:hover .ico,.btn-dark:hover .ico,.btn-ghost:hover .ico{transform:translateX(3px)}
.btn-honey{background:var(--honey);color:var(--brown-ink);box-shadow:0 10px 24px -8px rgba(255,190,0,.55)}
.btn-honey:hover{background:var(--honey);transform:translateY(-2px);box-shadow:0 16px 32px -10px rgba(255,190,0,.65)}
.btn-dark{background:var(--brown);color:var(--cream);box-shadow:0 10px 24px -12px rgba(62,47,26,.8)}
.btn-dark:hover{background:var(--brown-ink);transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(62,47,26,.7)}
.btn-ghost,.btn-line{background:transparent;color:var(--brown-ink);border:1.5px solid rgba(93,70,38,.35)}
.btn-ghost:hover,.btn-line:hover{border-color:var(--brown);transform:translateY(-2px);background:rgba(255,255,255,.35)}
.btn-danger{background:transparent;color:var(--danger);border:1.5px solid var(--danger-line)}
.btn-danger:hover{background:var(--danger-soft);border-color:var(--danger);transform:translateY(-2px)}
header#hd .nav > .btn,header#hd .nav > .btn-honey,header#hd .nav > .btn-dark{padding:.7em 1.4em}

/* ---------- eyebrow（区块小标签，官网同款） ---------- */
.eyebrow,.page-eyebrow{
  display:inline-flex;align-items:center;gap:.55em;
  font-size:.78rem;font-weight:700;letter-spacing:.12em;
  color:var(--brown);background:rgba(255,214,0,.22);
  border:1px solid rgba(93,70,38,.18);
  padding:.45em 1.1em;border-radius:999px;
}
.eyebrow::before,.page-eyebrow::before{content:"";width:7px;height:7px;background:var(--honey);border-radius:50%;box-shadow:0 0 0 3px rgba(255,214,0,.35)}

/* ---------- 页面品牌横幅 whero ---------- */
.whero{
  position:relative;overflow:hidden;
  background:radial-gradient(120% 120% at 12% -10%,#FFE96B 0%,var(--honey) 42%,var(--honey-deep) 100%);
  border-bottom:1px solid rgba(93,70,38,.16);
  padding:clamp(104px,13vh,132px) 0 clamp(34px,4.5vw,52px);
}
.whero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='96' viewBox='0 0 56 96'%3E%3Cpath d='M28 2 52 16v28L28 58 4 44V16Z' fill='none' stroke='%235D4626' stroke-opacity='.10' stroke-width='1.4'/%3E%3Cpath d='M28 60 52 74v28L28 116 4 102V74Z' fill='none' stroke='%235D4626' stroke-opacity='.10' stroke-width='1.4'/%3E%3C/svg%3E");
}
.whero > .in{position:relative;z-index:2;width:min(1180px,92vw);margin:0 auto}
.whero .eyebrow,.whero .page-eyebrow{background:rgba(255,253,245,.62);border-color:rgba(93,70,38,.22);margin-bottom:.9em}
.whero h1{
  font-size:clamp(1.75rem,3.5vw,2.55rem);line-height:1.22;font-weight:900;
  letter-spacing:-.01em;margin:0 0 .5em;color:var(--brown-ink);
}
.whero h1 em,.whero h1 .st{
  font-style:normal;display:inline-block;background:var(--cream);color:var(--brown-ink);
  padding:.01em .14em .05em;border-radius:.14em;box-shadow:0 18px 36px -26px rgba(62,47,26,.95);
}
.whero p,.whero .lead{font-size:clamp(.9rem,1.25vw,1rem);color:rgba(62,47,26,.84);max-width:44em;margin:0;font-weight:500}
.whero .who{margin-top:18px;font-size:.85rem;color:rgba(62,47,26,.82)}
.whero .who b{color:var(--brown-ink)}
.whero .who a{color:var(--brown-ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.whero .who button{margin-left:12px;border:1.4px solid rgba(93,70,38,.35);background:rgba(255,253,245,.5);color:var(--brown-ink);border-radius:999px;padding:.35em 1em;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;transition:.2s}
.whero .who button:hover{background:var(--cream);border-color:var(--brown)}
.whero .head{margin:0}

/* 作品墙首页的大横幅：补上官网同款蜂窝纹理 */
.hero{position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='96' viewBox='0 0 56 96'%3E%3Cpath d='M28 2 52 16v28L28 58 4 44V16Z' fill='none' stroke='%235D4626' stroke-opacity='.10' stroke-width='1.4'/%3E%3Cpath d='M28 60 52 74v28L28 116 4 102V74Z' fill='none' stroke='%235D4626' stroke-opacity='.10' stroke-width='1.4'/%3E%3C/svg%3E");
}
.hero > .in,.hero > .wrap{position:relative;z-index:2}

/* ---------- 卡片 / 面板：统一圆角与阴影 ---------- */
.card,.panel,.st,.hstep,.step,.modal,.details-pw,details.pw,.claim{
  border-radius:var(--radius);border:1px solid var(--line);
}
.card{background:#fff;overflow:hidden;box-shadow:var(--shadow-sm)}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 48px -28px rgba(93,70,38,.55);border-color:rgba(255,214,0,.6)}
.card .cover{border-bottom:1px solid var(--line)}
.st{background:#fff;position:relative;overflow:hidden}
.st::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--honey),rgba(255,214,0,0))}
.panel{background:#fff;box-shadow:var(--shadow-sm)}
.modal{border-radius:var(--radius)}

/* ---------- 表单控件统一 ---------- */
input,select,textarea{font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brown)!important}
input[type=text],input[type=email],input[type=password],input[type=search],select,textarea{
  border-radius:var(--radius-xs);
}
.tabs{border-radius:var(--radius-sm)}
.tabs button{border-radius:var(--radius-xs);transition:background .2s,color .2s,opacity .2s}

/* ---------- 功能色归一（覆盖各页原先的红绿） ---------- */
.msg.err{background:var(--danger-soft);color:var(--danger);border:1px solid var(--danger-line)}
.msg.ok{background:var(--ok-soft);color:var(--ok);border:1px solid var(--ok-line)}
.msg.warn{background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn-line)}
.tag.del,.acts .bad{background:var(--danger-soft);border-color:var(--danger-line);color:var(--danger)}
.tag.off{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn)}
.pmsg,.mmsg{color:var(--danger)}
code{background:var(--cream-soft);border:1px solid var(--line);border-radius:6px;padding:.1em .4em;font-size:.9em}

/* ---------- 页脚：深棕，与官网同一套排版语言 ---------- */
footer,.wfoot{background:var(--brown-ink);color:rgba(255,251,235,.74);margin-top:clamp(56px,7vw,88px);padding:clamp(40px,5vw,56px) 0 26px}
footer .in,.wfoot .win{width:min(1180px,92vw);margin:0 auto}
.wfoot .win{display:grid;grid-template-columns:1.4fr auto;align-items:center;gap:18px 32px}
.wfoot-brand{display:flex;align-items:center;gap:.7em;font-weight:800;font-size:1.02rem;color:var(--cream);justify-self:start}
.wfoot-brand .logo{width:36px;height:36px;flex:none}
.wfoot-brand small{display:block;font-size:.56rem;font-weight:600;letter-spacing:.14em;color:rgba(255,251,235,.55);line-height:1.2}
.wfoot-links{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.84rem}
.wfoot-links a{color:rgba(255,251,235,.72);transition:color .2s}
.wfoot-links a:hover{color:var(--honey)}
.wfoot-legal{grid-column:1/-1;border-top:1px solid rgba(255,251,235,.14);padding-top:20px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.76rem;letter-spacing:.06em;color:rgba(255,251,235,.5)}
.foot-grid{grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.foot-grid h4{color:var(--honey);font-size:.9rem;letter-spacing:.06em}
.foot-grid a{color:rgba(255,251,235,.72);font-size:.86rem}
.foot-grid a:hover{color:var(--honey)}
@media(max-width:760px){.wfoot .win{grid-template-columns:1fr}.foot-grid{grid-template-columns:1fr}}

/* ---------- 动效：渐显 + 卡片入场（官网 .rv 同源） ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s var(--ease)}
.rv.on{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
.rv.d4{transition-delay:.32s}.rv.d5{transition-delay:.4s}
@keyframes wfIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.grid > .card{animation:wfIn .5s var(--ease) both}
.grid > .card:nth-child(2){animation-delay:.04s}
.grid > .card:nth-child(3){animation-delay:.08s}
.grid > .card:nth-child(4){animation-delay:.12s}
.grid > .card:nth-child(5){animation-delay:.16s}
.grid > .card:nth-child(6){animation-delay:.2s}
.grid > .card:nth-child(n+7){animation-delay:.24s}
/* 滚动进度条（渐进增强） */
@supports (animation-timeline:scroll()){
  body::before{
    content:"";position:fixed;top:0;left:0;right:0;height:3px;z-index:120;pointer-events:none;
    background:linear-gradient(90deg,var(--honey),var(--honey-deep));
    transform-origin:0 50%;animation:wfProgress linear both;animation-timeline:scroll(root block);
  }
  @keyframes wfProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .grid > .card{animation:none}
  body::before{display:none}
  *{scroll-behavior:auto}
}

/* ---------- 无全宽横幅的页面：给固定导航留出高度 ---------- */
body.page-pad{padding-top:78px}

/* ---------- 登录页：柔和品牌光晕（无横幅也有品牌感） ---------- */
body.auth{padding-top:76px;background:var(--paper);position:relative}
body.auth::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 46% at 50% -6%,rgba(255,214,0,.55) 0%,rgba(255,233,107,.22) 46%,transparent 74%),
    radial-gradient(80% 60% at 50% 110%,rgba(255,243,184,.6) 0%,transparent 68%);
}
body.auth .box{position:relative;z-index:1}
body.auth .card{border-radius:var(--radius);box-shadow:var(--shadow);padding:32px 30px}
body.auth .brandmark{margin-bottom:18px}

/* ---------- 详情页全屏模式 ---------- */
body.full #head{display:none}

/* ---------- 横幅内的局部元素 ---------- */
.whero .tag{display:inline-flex;align-items:center;gap:.5em;font-size:.72rem;font-weight:800;letter-spacing:.12em;color:var(--brown);background:rgba(255,253,245,.62);border:1px solid rgba(93,70,38,.22);padding:.4em 1em;border-radius:999px;margin-bottom:.9em}
.whero .meta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.8rem;color:rgba(62,47,26,.78);margin-top:14px}
.whero .meta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;margin-right:5px;vertical-align:-2px}
.whero .au{margin-bottom:0}
.whero .avatar{background:var(--cream);border:2.5px solid var(--brown);color:var(--brown-ink)}
.whero .au h1{margin:0 0 4px}
.whero .au .meta{margin-top:0;font-size:.85rem}
.whero .austats b{color:var(--brown-ink)}
.whero .austats span{color:rgba(62,47,26,.7)}
.whero .acts{display:flex;flex-wrap:wrap;gap:10px}
/* 黄底上不再用黄按钮：改奶油底，保证对比度 */
.whero .btn-honey{background:var(--cream);color:var(--brown-ink);box-shadow:0 10px 24px -14px rgba(62,47,26,.85)}
.whero .btn-honey:hover{background:#fff;box-shadow:0 16px 30px -16px rgba(62,47,26,.9)}
.whero .btn-ghost,.whero .btn-line{background:rgba(255,253,245,.35);border-color:rgba(93,70,38,.4);color:var(--brown-ink)}
.whero .btn-ghost:hover,.whero .btn-line:hover{background:rgba(255,253,245,.75);border-color:var(--brown)}
.whero .btn-dark{background:var(--brown);color:var(--cream)}
.whoami-line{margin:0;font-size:.85rem;color:rgba(62,47,26,.75)}
/* 后台/看板内嵌版横幅（不做全宽出血） */
.whero-inline{border-radius:var(--radius);border:1px solid rgba(93,70,38,.16);box-shadow:var(--shadow-sm);padding:clamp(22px,3vw,32px);margin-bottom:26px;overflow:hidden}
.whero-inline > .in{width:auto;margin:0}
.whero-inline h1{font-size:clamp(1.4rem,2.4vw,1.95rem);margin-bottom:.35em}

/* ---------- 移动端 ---------- */
@media(max-width:620px){
  .wrap{padding-top:24px}
  .whero{padding-top:96px}
}