/* ==========================================================================
   OpenNana 风格模板样式
   设计令牌取自 opennana.com：
   - 主色 #38BDF8（sky-400），hover 加深 #0EA5E9
   - 正文 #1E293B / 次要 #64748B / 弱化 #94A3B8
   - 边框 #E2E8F0，浅边 #F1F5F9
   - 背景渐变 linear-gradient(135deg,#FDFCFD,#F1F5F9)
   - 卡片圆角 12px、图片 4:3、hover 上浮 + 阴影
   - 字体 Inter
   ========================================================================== */

:root{
  --primary:#38bdf8;
  --primary-d:#0ea5e9;
  --primary-soft:rgba(56,189,248,.10);
  --primary-softer:rgba(56,189,248,.18);
  --text:#1e293b;
  --text-2:#334155;
  --muted:#64748b;
  --faint:#94a3b8;
  --border:#e2e8f0;
  --border-soft:#f1f5f9;
  --card:#ffffff;
  --bg:#f1f5f9;
  --bg-grad:linear-gradient(135deg,#FDFCFD,#F1F5F9);
  --danger:#ef4444;
  --ok:#10b981;
  --accent:#10b981;
  --radius:12px;
  --radius-lg:16px;
  --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(15,23,42,.06);
  --shadow-sm:0 4px 12px rgba(15,23,42,.06);
  --shadow-md:0 12px 28px rgba(15,23,42,.12);
  --shadow-lg:0 20px 45px rgba(15,23,42,.14);
  --sidebar-w:160px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"PingFang SC","Microsoft YaHei",sans-serif;
  background:#fff;
  color:var(--text);
  line-height:1.6;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--primary-d);text-decoration:none;}
a:hover{color:var(--primary);}
img{max-width:100%;display:block;}
h1,h2,h3,h4{margin:0;letter-spacing:-.01em;}
p{margin:0 0 10px;}

/* ---------------- 左侧导航 ---------------- */
.side-nav{
  position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);z-index:40;
  display:flex;flex-direction:column;
  background:#fff;border-right:1px solid var(--border);
}
.side-logo{
  height:56px;display:flex;align-items:center;padding:0 16px;
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.side-logo a{
  font-size:18px;font-weight:900;letter-spacing:-.04em;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.side-links{flex:1;padding:12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;}
.side-links a{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:12px;
  font-size:14px;font-weight:500;color:var(--muted);
  transition:background .2s,color .2s;white-space:nowrap;
}
.side-links a:hover{background:#f8fafc;color:var(--text-2);}
.side-links a.active{background:var(--primary-soft);color:var(--primary-d);font-weight:600;}
.side-links .side-sep{height:1px;background:var(--border-soft);margin:8px 4px;}
.side-foot{padding:12px;border-top:1px solid var(--border-soft);}

/* ---------------- 移动端顶栏 ---------------- */
.topbar{
  display:none;position:fixed;top:0;left:0;right:0;height:56px;z-index:45;
  align-items:center;gap:10px;padding:0 14px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.topbar .logo{font-size:17px;font-weight:900;letter-spacing:-.04em;color:var(--text);}
.topbar .menu-btn{
  width:34px;height:34px;border-radius:10px;border:1px solid var(--border);
  background:#fff;display:flex;align-items:center;justify-content:center;
  color:var(--muted);cursor:pointer;padding:0;
}
.topbar .spacer{flex:1;}
.mask{display:none;position:fixed;inset:0;background:rgba(15,23,42,.4);z-index:39;}
.mask.show{display:block;}

/* ---------------- 主区域 ---------------- */
.main{
  margin-left:var(--sidebar-w);min-height:100vh;
  background:var(--bg-grad);
}
.page{max-width:1440px;margin:0 auto;padding:20px 24px 56px;}

/* ---------------- 页头 ---------------- */
.page-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:18px;
}
.page-head h1{font-size:22px;font-weight:800;color:var(--text);letter-spacing:-.02em;}
.page-head .sub{font-size:13px;color:var(--faint);margin-top:4px;}

/* 区块标题（左侧渐变小竖条，与站点一致） */
.section-title{display:flex;align-items:center;gap:10px;margin:26px 0 14px;}
.section-title::before{
  content:"";width:4px;height:20px;border-radius:99px;
  background:linear-gradient(to bottom,var(--primary),rgba(56,189,248,.45));
}
.section-title h2{font-size:16px;font-weight:600;color:var(--text-2);}
.section-title .count{font-size:12px;color:var(--faint);margin-left:auto;}

/* ---------------- 搜索与筛选 ---------------- */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.search{display:flex;flex:1;min-width:180px;max-width:380px;position:relative;}
.search input{
  width:100%;padding:9px 14px 9px 36px;border-radius:var(--radius-pill);
  border:1px solid var(--border);background:#fff;font-size:13px;color:var(--text);
  outline:none;transition:border-color .2s,box-shadow .2s;font-family:inherit;
}
.search input::placeholder{color:var(--faint);}
.search input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);}
.search::before{
  content:"";position:absolute;left:13px;top:50%;width:14px;height:14px;
  transform:translateY(-50%);
  background:no-repeat center/14px url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-4.35-4.35M17 11a6 6 0 11-12 0 6 6 0 0112 0z'/%3E%3C/svg%3E");
  pointer-events:none;
}
.pills{display:flex;gap:8px;flex-wrap:wrap;}
.pill{
  display:inline-flex;align-items:center;padding:7px 14px;border-radius:var(--radius-pill);
  font-size:13px;font-weight:500;color:var(--muted);background:#fff;
  border:1px solid var(--border);transition:all .2s;cursor:pointer;
}
.pill:hover{border-color:var(--primary);color:var(--primary-d);}
.pill.active{background:var(--primary-soft);border-color:rgba(56,189,248,.35);color:var(--primary-d);font-weight:600;}

/* ---------------- 画廊栅格 ---------------- */
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px;}
@media(min-width:640px){.gallery{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(min-width:1024px){.gallery{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media(min-width:1500px){.gallery{grid-template-columns:repeat(5,minmax(0,1fr));}}

.card{display:block;color:inherit;text-decoration:none;}
.card:hover{color:inherit;}
.card .thumb-wrap{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:#f1f5f9;aspect-ratio:4/3;
  box-shadow:var(--shadow-xs);
  transition:box-shadow .3s ease,transform .3s ease;
}
.card:hover .thumb-wrap{box-shadow:var(--shadow-md);transform:translateY(-4px);}
.card .thumb-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.card:hover .thumb-wrap img{transform:scale(1.04);}
.card .thumb-wrap .empty{width:100%;height:100%;background:linear-gradient(135deg,#f8fafc,#eef2f7);}
.card .thumb-wrap::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.38),transparent 55%);
  opacity:0;transition:opacity .3s;
}
.card:hover .thumb-wrap::after{opacity:1;}
.card .paid-badge{
  position:absolute;top:8px;right:8px;z-index:2;
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 8px;border-radius:var(--radius-pill);
  background:rgba(15,23,42,.55);border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(4px);
  color:rgba(255,255,255,.92);font-size:10px;font-weight:500;line-height:1.5;
}
.card .title{
  margin:9px 2px 0;font-size:14px;font-weight:500;color:var(--text-2);
  line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;transition:color .2s;
}
.card:hover .title{color:var(--primary-d);}
.card .meta{margin:4px 2px 0;font-size:12px;color:var(--faint);display:flex;gap:8px;align-items:center;}

/* ---------------- 按钮 ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 18px;border-radius:var(--radius);
  background:var(--primary);color:#fff;border:1px solid var(--primary);
  font-size:14px;font-weight:600;font-family:inherit;
  cursor:pointer;transition:all .2s;text-decoration:none;line-height:1.4;
}
.btn:hover{background:var(--primary-d);border-color:var(--primary-d);color:#fff;transform:translateY(-1px);}
.btn:active{transform:none;}
.btn.ghost{background:#fff;color:var(--text-2);border-color:var(--border);}
.btn.ghost:hover{background:#f8fafc;border-color:var(--primary);color:var(--primary-d);}
.btn.sm{padding:6px 12px;font-size:13px;border-radius:10px;}
.btn.block{display:flex;width:100%;}
.btn.danger{background:var(--danger);border-color:var(--danger);}
.btn.danger:hover{background:#dc2626;border-color:#dc2626;}
.btn[disabled]{opacity:.6;cursor:not-allowed;transform:none;}

/* ---------------- 表单 ---------------- */
.form{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:24px;max-width:520px;margin:0 auto;box-shadow:var(--shadow-xs);
}
.form h2{font-size:18px;font-weight:700;margin-bottom:16px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:6px;}
.field input[type=text],.field input[type=email],.field input[type=password],
.field input[type=number],.field input[type=url],.field input:not([type]),
.field select,.field textarea{
  width:100%;padding:10px 12px;border-radius:10px;
  border:1px solid var(--border);background:#fff;
  font-size:14px;color:var(--text);font-family:inherit;outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);
}
.field textarea{min-height:110px;resize:vertical;line-height:1.6;}
.field input[type=file]{font-size:13px;color:var(--muted);}
.field input[type=checkbox]{accent-color:var(--primary);}

/* ---------------- 提示与徽标 ---------------- */
.alert{
  padding:12px 14px;border-radius:var(--radius);font-size:13px;line-height:1.7;
  margin-bottom:14px;border:1px solid transparent;
}
.alert.ok{background:#ecfdf5;border-color:#a7f3d0;color:#065f46;}
.alert.err{background:#fef2f2;border-color:#fecaca;color:#991b1b;}
.alert.info{background:var(--primary-soft);border-color:rgba(56,189,248,.35);color:#075985;}
.tag{
  display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--radius-pill);
  background:var(--primary-soft);color:var(--primary-d);
  font-size:12px;font-weight:500;margin-right:6px;
}
.tag:hover{background:var(--primary-softer);}
.tag.paid{background:rgba(15,23,42,.06);color:var(--text-2);}
.muted{color:var(--faint);font-size:13px;}
.center{text-align:center;}
.hr{height:1px;background:var(--border-soft);margin:22px 0;border:0;}

/* ---------------- 详情页 ---------------- */
.detail{max-width:900px;margin:0 auto;}
.detail-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);
}
.detail-head{padding:18px 22px 14px;background:rgba(248,250,252,.8);border-bottom:1px solid var(--border-soft);}
.detail-head h1{font-size:20px;font-weight:700;line-height:1.4;margin-bottom:10px;}
@media(min-width:768px){.detail-head h1{font-size:23px;}}
.detail-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted);}
.detail-meta b{color:var(--text-2);font-weight:600;}
.detail-body{padding:18px 22px 22px;}
.detail-cover{
  border-radius:var(--radius);overflow:hidden;background:#f1f5f9;
  box-shadow:var(--shadow-xs);margin-bottom:18px;
}
.detail-cover img{width:100%;max-height:640px;object-fit:contain;background:#f8fafc;}
.detail-cover video{display:block;width:100%;max-height:640px;background:#0f172a;}

/* 详情页图集缩略图 */
.gallery-thumbs{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
  gap:8px;margin-bottom:18px;
}
.gallery-thumbs a{
  display:block;border-radius:10px;overflow:hidden;background:#f1f5f9;
  border:1px solid var(--border);transition:transform .16s ease,box-shadow .16s ease;
}
.gallery-thumbs a:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.gallery-thumbs img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;}

.prompt-block{
  border:1px solid var(--border);border-radius:var(--radius);
  background:#fff;overflow:hidden;margin-bottom:14px;box-shadow:var(--shadow-xs);
}
.prompt-block .pb-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 14px;background:#f8fafc;border-bottom:1px solid var(--border-soft);
}
.prompt-block .pb-head .label{
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
}
.prompt-block .pb-head .acts{display:flex;align-items:center;gap:14px;}
.prompt-block .pb-head a,.prompt-block .pb-head button{
  font-size:12px;font-weight:600;color:var(--primary-d);background:none;border:0;
  cursor:pointer;padding:0;font-family:inherit;letter-spacing:.04em;
}
.prompt-block .pb-head a:hover,.prompt-block .pb-head button:hover{color:var(--primary);}
.prompt-block pre{
  margin:0;padding:16px 18px;white-space:pre-wrap;word-break:break-word;
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13.5px;line-height:1.8;color:var(--text-2);
  max-height:520px;overflow:auto;
}
.prompt-box{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 18px;white-space:pre-wrap;font-size:14px;line-height:1.8;
  position:relative;color:var(--text-2);
}
.prompt-box .copy{position:absolute;top:10px;right:10px;padding:5px 12px;font-size:12px;border-radius:9px;}
.locked{filter:blur(7px);user-select:none;pointer-events:none;}
.gen-result{margin-top:14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;}
.gen-result img{border-radius:var(--radius);border:1px solid var(--border);}
.interact{display:flex;gap:10px;margin-top:16px;align-items:center;flex-wrap:wrap;}

/* ---------------- 会员套餐 ---------------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;}
.plan{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:22px 18px;text-align:center;transition:all .25s;box-shadow:var(--shadow-xs);
}
.plan:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.plan.feat{border:2px solid var(--primary);box-shadow:0 8px 26px rgba(56,189,248,.18);}
.plan .pname{font-size:15px;font-weight:700;color:var(--text);letter-spacing:.02em;}
.plan .price{font-size:28px;font-weight:800;color:var(--text);margin:8px 0 4px;letter-spacing:-.02em;}
.plan .pts{color:var(--faint);font-size:13px;margin-bottom:16px;}

/* ---------------- 数据卡片 ---------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:20px;}
.stat{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow-xs);
}
.stat .n{font-size:24px;font-weight:800;color:var(--text);letter-spacing:-.02em;line-height:1.3;}
.stat .l{color:var(--faint);font-size:12.5px;margin-top:2px;}
.stat .l a{color:var(--faint);}

/* ---------------- 表格 ---------------- */
table.grid{
  width:100%;border-collapse:collapse;font-size:13.5px;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
}
table.grid th,table.grid td{
  border-bottom:1px solid var(--border-soft);padding:11px 12px;text-align:left;vertical-align:top;
}
table.grid th{color:var(--faint);font-weight:500;font-size:12.5px;background:#fafbfc;}
table.grid tr:last-child td{border-bottom:0;}
table.grid tr:hover td{background:#fafcfe;}
.row-actions a{margin-right:10px;font-size:13px;}
.thumb{width:76px;border-radius:8px;}

/* ---------------- 后台 ---------------- */
.admin-wrap{display:grid;grid-template-columns:190px minmax(0,1fr);gap:18px;align-items:start;}
@media(max-width:860px){.admin-wrap{grid-template-columns:1fr;}}
.admin-wrap .side{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:10px;box-shadow:var(--shadow-xs);
}
.admin-wrap .side a{
  display:block;padding:9px 12px;border-radius:10px;
  color:var(--muted);font-size:13.5px;font-weight:500;transition:all .2s;
}
.admin-wrap .side a:hover{background:#f8fafc;color:var(--text-2);}
.admin-wrap .side a.active{background:var(--primary-soft);color:var(--primary-d);font-weight:600;}
.panel{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:20px;box-shadow:var(--shadow-xs);min-width:0;
}
.panel h2{font-size:16px;font-weight:700;margin-bottom:14px;}

/* ---------------- 站内信 ---------------- */
.badge-dot{
  display:inline-block;min-width:16px;height:16px;line-height:16px;padding:0 4px;
  margin-left:5px;border-radius:9px;background:var(--danger);color:#fff;
  font-size:11px;text-align:center;vertical-align:1px;
}
.msg-list{display:grid;gap:12px;}
.msg{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:15px 17px;box-shadow:var(--shadow-xs);
}
.msg.unread{border-left:3px solid var(--primary);}
.msg-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px;}
.msg-head b{font-size:14px;color:var(--text);}
.msg-body{font-size:13.5px;line-height:1.8;color:var(--text-2);}
.msg-act{margin-top:10px;font-size:13px;}

/* ---------------- 弹层与加载 ---------------- */
.modal{
  position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(2px);
  display:none;align-items:center;justify-content:center;z-index:100;padding:20px;
}
.modal.show{display:flex;}
.modal .box{background:#fff;border-radius:var(--radius-lg);padding:22px;max-width:480px;width:100%;box-shadow:var(--shadow-lg);}
.spinner{
  display:inline-block;width:16px;height:16px;border:2px solid rgba(148,163,184,.35);
  border-top-color:var(--primary);border-radius:50%;
  animation:spin .8s linear infinite;vertical-align:-3px;margin-right:6px;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------------- 页脚 ---------------- */
.footer{border-top:1px solid var(--border-soft);margin-top:32px;padding:18px 0;color:var(--faint);font-size:12.5px;}
.footer .inner{max-width:1440px;margin:0 auto;padding:0 24px;}

/* ---------------- 响应式 ---------------- */
@media(max-width:1023px){
  .side-nav{transform:translateX(-100%);transition:transform .28s ease;box-shadow:var(--shadow-lg);}
  .side-nav.open{transform:translateX(0);}
  .topbar{display:flex;}
  .main{margin-left:0;padding-top:56px;}
  .page{padding:14px 14px 48px;}
  .gallery{gap:14px 12px;}
  .detail-head h1{font-size:18px;}
  .footer .inner{padding:0 14px;}
}