:root{
  --bg:#070b17;
  --bg-2:#0c1327;
  --bg-3:#101a33;
  --card:#101a31;
  --card-soft:#162341;
  --card-deep:#0c1530;
  --text:#eaf0ff;
  --muted:#9daccc;
  --line:#24365f;
  --line-soft:#2f4678;
  --primary:#5ca6ff;
  --primary-2:#7a6dff;
  --primary-deep:#3a8ff7;
  --danger:#ff6d7a;
  --success:#36d69f;
  --warning:#ffb648;
  --shadow:0 12px 30px rgba(2,8,24,.35);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:
    radial-gradient(1000px 500px at 10% -10%, #243b77 0%, transparent 45%),
    radial-gradient(900px 500px at 95% -15%, #372f74 0%, transparent 42%),
    radial-gradient(700px 360px at 0% 100%, #123b58 0%, transparent 45%),
    linear-gradient(180deg,var(--bg-2) 0,var(--bg) 250px,var(--bg) 100%);
  position:relative;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.16;
  background-image:linear-gradient(to right, rgba(255,255,255,.07) 1px, transparent 1px),
                   linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.08));
}

a{color:var(--primary);text-decoration:none}
a:hover{color:#9ec8ff}

.container{max-width:1220px;margin:0 auto;padding:0 16px;position:relative;z-index:1}

.topbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(140%) blur(12px);
  background:rgba(10,17,36,.74);
  border-bottom:1px solid rgba(89,121,184,.24);
  box-shadow:0 6px 22px rgba(0,0,0,.22);
}
.topbar-inner{
  display:grid;
  grid-template-columns:210px 1fr 280px auto;
  gap:12px;
  align-items:center;
  min-height:72px;
}
.logo{
  display:inline-flex;align-items:center;gap:10px;
  font-size:20px;font-weight:800;color:#f7fbff;letter-spacing:.2px;
}
.logo .dot{
  width:9px;height:9px;border-radius:99px;
  background:linear-gradient(135deg,#57bbff,#7a6dff);
  box-shadow:0 0 18px rgba(87,187,255,.8);
}

.nav{display:flex;gap:8px;flex-wrap:wrap}
.nav a{
  color:#c6d3f0;
  padding:8px 11px;
  border-radius:11px;
  transition:.2s ease;
}
.nav a:hover{background:rgba(99,141,220,.2);color:#fff}

.search{display:flex;gap:8px}
.search input{
  width:100%;padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(16,29,56,.9);
  color:var(--text);
  outline:none;
  transition:.2s ease;
}
.search input:focus{
  border-color:#70a9ff;
  box-shadow:0 0 0 3px rgba(92,166,255,.18);
}
.search input::placeholder{color:#7f94bc}

button,.btn{
  border:none;outline:none;cursor:pointer;
  background:linear-gradient(135deg,var(--primary-deep),#7b6dff);
  color:#fff;
  border-radius:11px;
  padding:9px 14px;
  font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .15s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow:0 10px 18px rgba(56,126,246,.25);
}
button:hover,.btn:hover{transform:translateY(-1px)}
.btn.gray{
  background:linear-gradient(135deg,#506286,#64799f);
  box-shadow:0 8px 16px rgba(63,86,125,.28);
}
.btn.success{
  background:linear-gradient(135deg,#2bcf95,#12b884);
  box-shadow:0 8px 16px rgba(24,186,133,.28);
}
.btn.danger{
  background:linear-gradient(135deg,#ff7d86,#ff5968);
  box-shadow:0 8px 16px rgba(255,97,114,.28);
}
.btn.warn{
  background:linear-gradient(135deg,#ffb94d,#ff8f3d);
  box-shadow:0 8px 16px rgba(255,157,67,.28);
  color:#231700;
}
.btn.ghost{
  background:rgba(92,166,255,.12);
  color:#cfe4ff;
  border:1px solid rgba(114,171,255,.35);
  box-shadow:none;
}
.btn.small{padding:6px 10px;font-size:12px;border-radius:9px}

.userbox{display:flex;gap:10px;align-items:center;justify-content:flex-end}
.user-link{font-weight:700;color:#ddecff}
.link-muted{color:#b6c7e9}
.vip{
  display:inline-flex;align-items:center;
  background:linear-gradient(90deg,#ffc347,#ff8c2f);
  color:#2b1a00;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:800;
  box-shadow:0 8px 14px rgba(255,136,0,.24);
}

.alert{margin-top:16px;padding:12px 14px;border-radius:12px;font-size:14px;border:1px solid transparent}
.alert.success{background:rgba(31,95,71,.45);border-color:rgba(73,211,157,.4);color:#c8ffe8}
.alert.error{background:rgba(108,32,43,.45);border-color:rgba(255,121,142,.42);color:#ffd4db}

.layout{margin-top:16px;display:grid;grid-template-columns:1fr 320px;gap:14px;align-items:start}

.card{
  background:linear-gradient(160deg, rgba(18,29,54,.92) 0%, rgba(12,22,43,.94) 100%);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
  box-shadow:var(--shadow);
}
.card + .card{margin-top:12px}

.hero-banner{
  position:relative;overflow:hidden;
  background:linear-gradient(130deg,#2148b1 0,#3f5fff 42%,#6d59ff 100%);
  color:#fff;border:none;
}
.hero-banner::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(430px 190px at 100% 0%, rgba(255,255,255,.25), transparent 72%),
    radial-gradient(460px 260px at 0% 100%, rgba(255,255,255,.14), transparent 70%);
  pointer-events:none;
}
.hero-banner h2,.hero-banner h3{margin:0 0 8px;position:relative;z-index:1}
.hero-banner .meta,.hero-banner .tag,.hero-banner .btn{position:relative;z-index:1}
.hero-banner .meta{color:rgba(237,244,255,.95)}
.hero-banner .tag{border-color:rgba(255,255,255,.35);color:#fff;background:rgba(255,255,255,.1)}
.hero-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

.meta{color:var(--muted);font-size:13px}
.badge{display:inline-block;padding:2px 9px;border-radius:999px;background:rgba(95,141,255,.22);color:#b7d1ff;font-size:12px;font-weight:700;border:1px solid rgba(128,168,255,.28)}
.badge.paid{background:rgba(255,188,78,.16);color:#ffd58a;border-color:rgba(255,196,101,.34)}
.badge.free{background:rgba(67,212,155,.15);color:#93f1c9;border-color:rgba(103,225,173,.32)}

.post-card{position:relative}
.post-card:hover{border-color:#3a5f9d;box-shadow:0 14px 30px rgba(7,22,58,.5)}
.post-card .title{font-size:21px;line-height:1.4;margin:8px 0 9px;color:#ecf3ff}
.post-card .title a{color:#ecf3ff}
.post-card .title a:hover{color:#9ec8ff}
.excerpt{color:#b9c7e5;line-height:1.8;margin:0 0 8px}

.side-list{display:flex;flex-direction:column;gap:10px}
.side-item{
  display:flex;justify-content:space-between;gap:10px;
  color:#d7e4ff;font-size:14px;
  padding:10px;border:1px solid #2a406f;border-radius:10px;
  background:linear-gradient(140deg, rgba(23,37,69,.92), rgba(16,28,54,.9));
}
.side-item span:last-child{color:#9fb2d7;font-size:12px}

.taglist{display:flex;gap:8px;flex-wrap:wrap}
.tag{
  padding:5px 11px;border-radius:999px;border:1px solid #385892;color:#d8e7ff;background:rgba(22,38,73,.85);font-size:13px;
}
.tag:hover{border-color:#5f8dff;color:#fff;background:rgba(40,66,118,.95)}

.cover-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:8px}
.cover{
  background:linear-gradient(145deg, rgba(36,55,95,.82), rgba(25,40,72,.88));
  border:1px solid #355288;
  border-radius:12px;padding:12px;font-size:13px;color:#d1e0ff;
}
.price{font-size:26px;font-weight:800;color:#ffd28f;letter-spacing:.3px}
.metric-num{font-size:26px;font-weight:800;color:#9fd2ff;letter-spacing:.3px}

.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.stat-item{
  border:1px solid rgba(255,255,255,.26);
  background:rgba(255,255,255,.12);
  border-radius:12px;padding:10px 12px;
}
.stat-item .num{font-size:22px;font-weight:800;color:#fff;line-height:1.25}
.stat-item .label{font-size:12px;color:rgba(255,255,255,.88)}

.empty{text-align:center;color:#9fb3d8;padding:40px 10px}

.form-card{max-width:860px;margin:20px auto}
.form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.form-row label{font-weight:700;color:#d4e3ff}
input[type="text"],input[type="email"],input[type="password"],input[type="number"],select,textarea{
  width:100%;padding:10px 11px;border:1px solid var(--line-soft);border-radius:11px;background:#0f1a34;color:var(--text);font-size:14px;outline:none;
  transition:.2s ease;
}
input[type="text"]::placeholder,input[type="email"]::placeholder,input[type="password"]::placeholder,input[type="number"]::placeholder,textarea::placeholder{color:#7f94bc}
input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus,input[type="number"]:focus,select:focus,textarea:focus{
  border-color:#70a9ff;box-shadow:0 0 0 3px rgba(92,166,255,.18)
}
textarea{min-height:180px;resize:vertical;line-height:1.75}

.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #253a69;padding:10px 8px;text-align:left;font-size:14px;vertical-align:top;color:#d8e5ff}
.table th{background:rgba(66,97,157,.18);color:#c8dcff}

.content{
  line-height:1.9;white-space:pre-wrap;
  background:linear-gradient(160deg, rgba(15,24,46,.9), rgba(12,19,37,.95));
  border:1px solid var(--line);border-radius:var(--radius);padding:16px;
  box-shadow:var(--shadow);
  color:#e8f1ff;
}
.block{
  padding:12px;background:rgba(54,84,138,.26);border:1px solid rgba(108,150,238,.38);border-radius:12px;margin:12px 0;color:#d9e8ff;
}
.inline-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.paywall{
  border:1px dashed rgba(255,195,95,.56);
  background:linear-gradient(140deg, rgba(80,47,8,.40), rgba(36,25,8,.56));
  border-radius:14px;
  padding:18px;
}
.paywall-title{font-size:20px;font-weight:800;color:#ffdc9f;margin:0 0 6px}
.paywall-sub{color:#ffdcb0;font-size:14px;line-height:1.7;margin:0}
.paywall-panel{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.paywall-box{
  border:1px solid rgba(255,213,146,.45);
  background:rgba(59,37,9,.65);
  border-radius:12px;padding:10px;
}
.paywall-box strong{font-size:18px;color:#ffd394}

/* 评论区 */
.comment-list{display:flex;flex-direction:column;gap:12px}
.comment-item{
  border:1px solid #2f4a7f;
  background:linear-gradient(145deg, rgba(21,34,64,.86), rgba(15,24,47,.86));
  border-radius:12px;
  padding:11px 12px;
}
.comment-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.comment-content{line-height:1.8;color:#dce9ff;white-space:pre-wrap;word-break:break-word}
.split-line{border:none;border-top:1px dashed #37558f;margin:14px 0}

.footer{margin-top:28px;background:rgba(8,14,30,.75);border-top:1px solid rgba(79,112,179,.3);backdrop-filter:blur(4px)}
.footer-inner{min-height:62px;display:flex;align-items:center;justify-content:space-between;color:#a9bbdf;font-size:14px}
.footer-links{display:flex;gap:12px}
.footer-links a{color:#bcd3ff}
.footer-links a:hover{color:#fff}

/* 小装饰 */
.glow-line{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(122,178,255,.55), transparent);
  margin:10px 0 0;
}

@media (max-width: 1060px){
  .topbar-inner{grid-template-columns:1fr;gap:8px;padding:10px 0}
  .userbox{justify-content:flex-start}
  .layout{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 680px){
  .container{padding:0 12px}
  .cover-grid{grid-template-columns:1fr}
  .paywall-panel{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr}
  .post-card .title{font-size:19px}
}

/* 附件相关 */
.badge.attach{
  background:rgba(98,162,255,.16);
  color:#b8d6ff;
  border-color:rgba(126,177,255,.35);
}

.file-input{
  width:100%;
  padding:10px;
  border:1px dashed #4a6cab;
  border-radius:11px;
  background:rgba(12,22,44,.6);
  color:#d8e7ff;
}
.file-input::file-selector-button{
  margin-right:10px;
  border:none;
  background:linear-gradient(135deg,#4d95ff,#6b6dff);
  color:#fff;
  padding:7px 12px;
  border-radius:8px;
  cursor:pointer;
}

.attachment-card{
  border:1px solid #355188;
  background:linear-gradient(145deg, rgba(24,39,73,.94), rgba(15,26,52,.95));
}
.attachment-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.attachment-main{min-width:0}
.attachment-name{
  font-weight:700;
  color:#eaf2ff;
  word-break:break-word;
}

.locked-attachment{
  margin-top:10px;
  border:1px dashed rgba(255,214,142,.5);
  background:rgba(64,41,12,.55);
  border-radius:10px;
  padding:10px;
  color:#ffe1b2;
}

.attachment-edit-box{
  border:1px solid #355188;
  background:linear-gradient(145deg, rgba(22,36,67,.9), rgba(15,24,46,.92));
  border-radius:12px;
  padding:10px;
}