/* ======= 首页列表页样式（header 在 .page 内，CSS 出血） ======= */
:root{
  --brand:#22c55e; --brand-dark:#16a34a;
  --text:#1f2328; --muted:#8a919f; --line:#e9edf2;
  --red-200:#ffd6d6;
  --shadow-sm:0 6px 14px rgba(31,35,40,.06);
  --shadow-md:0 10px 22px rgba(31,35,40,.08);
  --shadow-lg:0 16px 36px rgba(31,35,40,.10);
}

*{box-sizing:border-box}
html,body{height:100%; overflow-x:hidden}

body{
  margin:0;
  background:
    radial-gradient(1200px 700px at -10% -10%, rgba(99,102,241,.10), transparent 60%),
    radial-gradient(800px 600px at 110% 0%, rgba(6,182,212,.10), transparent 60%),
    radial-gradient(900px 600px at 20% 120%, rgba(244,114,182,.10), transparent 55%),
    linear-gradient(180deg,#f9fbff 0%,#f2f4f8 100%);
  color:var(--text);
  font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

/* 主体容器 */
.page{max-width:600px;margin:0 auto;padding-bottom:8px}

/* 顶部：在 .page 内使用出血实现全宽 */
.header{
  position:sticky; top:0; z-index:20;
  width:100vw;
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
   /* 更丰富的绿色渐变 + 半圆角 */
  background:
    radial-gradient(120% 120% at 85% -10%, rgba(255,255,255,.20), rgba(255,255,255,0) 45%),
    linear-gradient(135deg,#06c755 0%,#19d36e 33%,#25d98f 66%,#11c9c0 100%);
  border-bottom-left-radius: 18px;
  border-bottom-right-radius:18px;
  color:#fff;
  padding:12px calc(max(12px, env(safe-area-inset-right))) 12px
          calc(max(16px, env(safe-area-inset-left)));
  text-align:center; font-size:18px; font-weight:600;
  box-shadow:0 6px 16px rgba(34,197,94,.16);
  max-width: 600px;
  margin: 0 auto;
}
.header-inner{
  max-width:600px; margin:0 auto; position:relative;
  display:flex; align-items:center; justify-content:center;
}
.header-title{font-size:18px;font-weight:800;letter-spacing:.2px}

/* 搜索按钮 */
.search-toggle{
  position:absolute; right:calc(max(0px, env(safe-area-inset-right))); top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px;
  -webkit-appearance:none; appearance:none; border:1px solid rgba(255,255,255,.18); outline:none;
  background:rgba(255,255,255,.16); color:#fff; transition:background .15s, transform .08s, border-color .15s;
}
.search-toggle:hover{ background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.28) }
.search-toggle:active{ transform:translateY(1px) }
.search-toggle svg{ width:20px; height:20px; display:block }

/* 搜索弹层 */
.search-pop{
  position:absolute; right:calc(max(6px, env(safe-area-inset-right))); top:100%; margin-top:8px; z-index:99;
  display:none; gap:8px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-lg); padding:8px 10px;
}
.search-pop.show{display:flex}
.search-pop input{ width:240px; max-width:62vw; border:1px solid var(--line); border-radius:10px; padding:8px 10px }

/* 用户条 */
.userbar{padding:10px 10px 4px}
.usercard{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  background:linear-gradient(180deg,#ffffff 0%, #fafcff 100%);
  border:1px solid var(--line);border-radius:14px;padding:12px 14px;
  box-shadow:var(--shadow-md)
}
.user-info{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.avatar{width:34px;height:34px;border-radius:999px;background:linear-gradient(135deg,#e8f3ff,#f5fff7);display:flex;align-items:center;justify-content:center;border:1px solid #e6ecf3}
.avatar svg{width:20px;height:20px;color:#1f6feb}
.hello{font-weight:700}.u-name{font-weight:800}
.gold-chip{display:inline-flex;align-items:center;gap:6px;background:#fff7e6;border:1px solid #ffe7ba;border-radius:999px;padding:5px 9px;font-size:12px;color:#8a5a00}
.gold-chip svg{width:14px;height:14px;color:#f59e0b}

.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* 按钮 */
.btn{white-space:nowrap;border:none;border-radius:12px;background:linear-gradient(135deg,#2563eb 0%,#4f46e5 100%);color:#fff;padding:10px 16px;cursor:pointer;box-shadow:0 7px 18px rgba(79,70,229,.2);transition:transform .12s,text-shadow .12s; text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px}

.btn-profile{
  background:linear-gradient(135deg,#3b82f6 0%, #60a5fa 100%);
  padding:8px 12px; border-radius:10px; box-shadow:0 8px 16px rgba(59,130,246,.18);
  font-size:13px;
}
.btn-profile svg{width:16px;height:16px}

.btn-auth{
  position:relative; overflow:hidden;
  padding:8px 14px; font-size:13.5px;
  background:linear-gradient(135deg,#7dd3fc 0%, #60a5fa 35%, #a78bfa 100%);
  background-size:220% 220%; animation:grad-move 7s ease-in-out infinite;
  border:0;
  box-shadow:0 10px 22px rgba(96,165,250,.25), 0 6px 14px rgba(167,139,250,.18), inset 0 0 0 1px rgba(255,255,255,.25);
}
.btn-auth::after{
  content:""; position:absolute; left:-30%; top:-120%; width:60%; height:300%; transform:rotate(25deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transition:transform .6s ease;
}
.btn-auth:hover::after{ transform:rotate(25deg) translateX(180%) }
@keyframes grad-move{
  0%{ background-position:0% 50% } 50%{ background-position:100% 50% } 100%{ background-position:0% 50% }
}

.btn-publish,.btn-danger{ padding:8px 12px; font-size:13px; border-radius:10px }
.btn-publish svg,.btn-danger svg{width:16px;height:16px}
.btn-publish{background:linear-gradient(135deg,#16a34a 0%, #22c55e 100%);box-shadow:0 7px 16px rgba(34,197,94,.22)}
.btn-danger {background:linear-gradient(135deg,#ef4444 0%, #f87171 100%);box-shadow:0 7px 16px rgba(239,68,68,.22)}

/* 分区条 */
.section-wrap{margin:8px 10px 6px}
.section-bar{
  background: linear-gradient(90deg, rgba(34,197,94,.16), rgba(6,182,212,.16) 50%, rgba(139,92,246,.16));
  border:1px solid rgba(34,197,94,.25); padding:10px 12px; border-radius:12px;
  box-shadow:0 10px 24px rgba(31,35,40,.06); display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.section-left{display:flex;align-items:center;gap:10px}
.section-dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#22c55e,#34d399);box-shadow:0 0 0 4px rgba(34,197,94,.18); position:relative}
.section-dot:after{content:""; position:absolute; inset:-4px; border-radius:999px; border:2px solid rgba(16,185,129,.28); animation:pulse 2.2s ease-out infinite}
@keyframes pulse{0%{transform:scale(.7);opacity:.8} 70%{transform:scale(1.2);opacity:.15} 100%{transform:scale(1.35);opacity:0}}
.section-title{font-weight:900;color:#0f172a;letter-spacing:.2px}
.section-desc{font-size:12px;color:#475569}
.online-chip{display:inline-flex;align-items:center;gap:8px; padding:6px 10px; border-radius:999px;background:rgba(16,185,129,.12); color:#065f46; font-weight:800; box-shadow:var(--shadow-sm)}
.online-dot{width:8px;height:8px;border-radius:999px;background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.18)}

/* 筛选 tabs */
.filter-tabs{display:flex;align-items:center;gap:8px;margin:8px 10px 6px}
.tab{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px; border-radius:10px; border:1px solid var(--line);
  background:rgba(255,255,255,.88); backdrop-filter:saturate(140%) blur(6px);
  color:#374151;text-decoration:none;font-size:13px;font-weight:600;
  box-shadow:var(--shadow-sm); transition:transform .1s, box-shadow .15s, border-color .15s;
}
.tab:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.tab svg{width:16px;height:16px}
.tab.active{border-color:transparent;color:#fff}
.tab.active.all{background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%)}
.tab.active.free{background:linear-gradient(135deg,#06b6d4 0%,#3b82f6 100%)}
.tab.active.paid{background:linear-gradient(135deg,#f97316 0%,#ef4444 100%)}

/* 列表 */
.list{max-width:600px;margin:0 auto;padding:0 10px 4px}
.item{
  position:relative;background:linear-gradient(180deg,#fff 0%,#fbfbfe 100%);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:10px 0;
  box-shadow:var(--shadow-md);transition:transform .15s, box-shadow .2s;
}
/* >>> 仅此处修改：左侧竖条更丰富柔和的渐变配色 <<< */
.item:before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background: linear-gradient(
    180deg,
    rgba(34, 197, 94, .95) 0%,
    rgba(6, 182, 212, .95) 50%,
    rgba(139, 92, 246, .95) 100%
  );
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  opacity:.95;
}



/* 左侧竖条：极光流光 + 扫光增强（更明显） */
/*.item:before{*/
/*  content:"";*/
  /*position:absolute; left:0; top:0; bottom:0; width:6px;*/ /* 不想变宽就改回 4px */
/*  background:*/
/*    linear-gradient(180deg,*/
/*      #06b6d4 0%,*/
/*      #3b82f6 18%,*/
/*      #8b5cf6 36%,*/
/*      #a78bfa 54%,*/
/*      #f0abfc 72%,*/
/*      #fb7185 100%*/
/*    );*/
/*  background-size:100% 220%;*/
 /* animation: gradientShift 6s linear infinite;*/ /* 渐变滚动 */
/*  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);*/
/*  z-index:0;*/
/*}*/

/* 竖条上的流动高光（很明显的扫光） */
/*.item:after{*/
/*  content:"";*/
/*  position:absolute; left:0; top:-30%; width:8px; height:160%;*/
  /* 仅覆盖左侧条区域，避免影响内容 */
/*  clip-path: polygon(0 0, 6px 0, 6px 100%, 0 100%);*/
/*  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.95) 50%, transparent 100%);*/
/*  filter: blur(6px);*/
/*  mix-blend-mode: screen;*/
/*  opacity:.9;*/
/*  animation: glowSweep 1.8s cubic-bezier(.25,.6,.3,1) infinite;*/
/*  z-index:2;*/
/*}*/

/* 低动态偏好时停掉动画 */
/*@media (prefers-reduced-motion: reduce){*/
/*  .item:before,.item:after{ animation:none; }*/
/*}*/

/* 渐变纵向滚动，让颜色在条里缓慢流动 */
/*@keyframes gradientShift{*/
/*  0%   { background-position: 0 0; }*/
/*  100% { background-position: 0 100%; }*/
/*}*/

/* 高光上下往返扫动，明显可见 */
/*@keyframes glowSweep{*/
/*  0%   { transform: translateY(-30%); }*/
/*  50%  { transform: translateY(30%); }*/
/*  100% { transform: translateY(-30%); }*/
/*}*/




.item:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.item-inner{padding:24px 88px 12px 14px}
.title{font-size:15px;line-height:1.55;font-weight:800;color:#101418;letter-spacing:.1px;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{display:flex;gap:3px;align-items:center;margin-top:8px;flex-wrap:wrap}
.chip{font-size:12px;background:#f6f7fb;border:1px solid #e8ebf0;color:#566074;border-radius:8px;padding:3px 7px}
.chip.time{color:#8a919f;background:#f1f3f6}
.chip.views{background:#eef4ff;border-color:#dae6ff;color:#1f4cd6}
.chip.author{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(180deg,#f2f7ff,#ffffff);border-color:#d9e5ff;color:#2b50c7;font-weight:600}
.chip.author svg{width:14px;height:14px;opacity:.9}

/* 角标与价格 */
.flag{position:absolute;left:0;top:0;color:#fff;border-radius:0 0 8px 0;padding:5px 10px;font-size:12px;line-height:1;font-weight:800;letter-spacing:.5px;box-shadow:0 6px 16px rgba(0,0,0,.08)}
.flag.free{background:linear-gradient(135deg,#34d399 0%, #10b981 100%);}
.flag.paid{background:linear-gradient(135deg,#ff7a45 0%, #ff9f6e 100%);}
.flag::after{content:'';position:absolute;left:0;bottom:-6px;width:0;height:0;border-style:solid;border-width:6px 6px 0 0;border-color:rgba(0,0,0,.08) transparent transparent transparent;opacity:.35}
.price-box{position:absolute;top:10px;right:10px}
.price-badge{display:flex;align-items:baseline;gap:4px;padding:3px 7px;border-radius:999px;background:#fff7f6;border:1px solid var(--red-200);box-shadow:0 6px 14px rgba(255,77,79,.10)}
.price-badge .num{color:#ff4d4f;font-size:15px;font-weight:800;line-height:1}
.price-badge .unit{color:#ff4d4f;font-size:10px;transform:translateY(1px)}

/* 响应式 */
@media (max-width: 480px){
  .actions{gap:6px}
  .btn{padding:9px 12px;font-size:13px}
  .btn svg{width:16px;height:16px}
  .btn-profile{padding:7px 10px;font-size:12.5px}
  .btn-auth{padding:8px 12px;font-size:13px}
  .btn-publish,.btn-danger{padding:7px 10px;font-size:12.5px}
  .item-inner{padding:22px 82px 10px 12px}
}

/* 分页 */
.pager{display:flex;justify-content:center;gap:6px;margin:12px 0 6px}
.pager a,.pager span{display:inline-block;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:#333;text-decoration:none;box-shadow:0 4px 10px rgba(31,35,40,.04)}
.pager .active{background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);color:#fff;border-color:transparent}

/* ======= 首页列表页样式（结束） ======= */