:root{
  --bg:#050914;
  --panel:#0b1020;
  --panel-soft:#0e1529;
  --text:#eaf1ff;
  --muted:#96a7c8;
  --line:rgba(255,255,255,.08);
  --cyan:#56f2ff;
  --gold:#f7c94b;
  --purple:#8f7cff;
  --red:#ff5c82;
  --shadow:0 18px 42px rgba(0,0,0,.38);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"PingFang SC","Noto Sans CJK SC";
  color:var(--text);
  background:
    radial-gradient(1100px 600px at 12% 10%, rgba(86,242,255,.09), transparent 55%),
    radial-gradient(900px 500px at 88% 16%, rgba(247,201,75,.08), transparent 55%),
    radial-gradient(1000px 700px at 50% 100%, rgba(30,64,175,.12), transparent 60%),
    var(--bg);
}
a{color:inherit;text-decoration:none}
button,textarea{font:inherit}

.page{
  min-height:100vh;
  display:grid;
  grid-template-columns:250px 1fr;
}

.sidebar{
  border-right:1px solid var(--line);
  padding:14px;
  background:rgba(6,10,20,.72);
  backdrop-filter:blur(10px);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.name{font-weight:900}
.sub{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

.publishBtn,.primaryBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 14px;
  border-radius:12px;
  border:0;
  background:linear-gradient(135deg, rgba(86,242,255,.95), rgba(247,201,75,.95));
  color:#061018;
  font-weight:900;
}
.publishBtn{width:100%}

.ghostBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  color:var(--text);
}
.smallBtn{
  height:34px;
  padding:0 12px;
  font-size:12px;
  cursor: pointer
}

.sideSection{margin-top:14px}
.sideTitle{
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.8px;
  margin-bottom:9px;
}
.sideNav{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.sideNavItem{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  transition:.22s ease;
}
.sideNavItem:hover,
.sideNavItem.isActive{
  border-color:rgba(86,242,255,.26);
  background:rgba(86,242,255,.06);
  transform:translateX(3px);
}
.sideCard{
  padding:13px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
}
.sideText{
  color:var(--muted);
  font-size:12px;
  line-height:1.7;
}

.main{
  padding:14px 16px;
}

.hero{
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px 18px;
  background:
    linear-gradient(135deg, rgba(86,242,255,.05), rgba(247,201,75,.04)),
    rgba(255,255,255,.02);
  box-shadow:var(--shadow);
}
.crumbs{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  margin-bottom:10px;
}
.crumb{
  padding:5px 10px;
  border-radius:999px;
  border:1px dashed rgba(255,255,255,.14);
  color:var(--muted);
}
.crumb.current{color:var(--text)}
.sep{opacity:.45}

.heroMain{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.heroKicker{
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.9px;
}
.heroLeft h1{
  margin:8px 0 8px;
  font-size:28px;
  line-height:1.1;
}
.heroLeft p{
  margin:0;
  max-width:760px;
  color:var(--muted);
  line-height:1.65;
  font-size:14px;
}
.heroRight{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* 顶部提交新平台按钮美化 */
.submitBtn{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  height: 42px;
  padding: 0 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #67f3ff 0%, #89efff 35%, #f7c94b 100%);
  color: #07111c;
  box-shadow:
    0 10px 24px rgba(86,242,255,.18),
    0 2px 8px rgba(247,201,75,.10);
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    filter .22s ease;
}
.submitBtn .btnText{
  position: relative;
  z-index: 2;
  font-weight: 950;
  letter-spacing: .2px;
}
.submitBtn .btnGlow{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(120deg,
    transparent 12%,
    rgba(255,255,255,.35) 30%,
    rgba(255,255,255,.12) 42%,
    transparent 60%);
  transform: translateX(-130%);
  transition: transform .8s ease;
}
.submitBtn:hover{
  transform: translateY(-2px);
  box-shadow:
    0 16px 30px rgba(86,242,255,.24),
    0 4px 14px rgba(247,201,75,.16);
  filter: brightness(1.03);
}
.submitBtn:hover .btnGlow{
  transform: translateX(130%);
}
.submitBtn:active{
  transform: translateY(0);
}

.noticePanel{
  margin-top:14px;
}
.noticeStrip{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(247,201,75,.18);
  background:linear-gradient(90deg, rgba(247,201,75,.12), rgba(86,242,255,.06), transparent);
  box-shadow:var(--shadow);
}
.noticeBadge{
  flex-shrink:0;
  padding:5px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  color:#061018;
  background:linear-gradient(135deg, rgba(247,201,75,.98), rgba(255,231,167,.98));
}
.noticeText{
  color:rgba(234,241,255,.88);
  font-size:12px;
  line-height:1.6;
}

.directoryColumns{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
  align-items:start;
}

.dirPanel,
.reviewsPanel{
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent 60%), var(--panel);
  box-shadow:var(--shadow);
  padding:13px;
}

.groupHead{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:12px;
}
.groupBar{
  width:4px;
  min-height:34px;
  border-radius:999px;
  flex-shrink:0;
}
.groupBar.cyan{background:var(--cyan)}
.groupBar.gold{background:var(--gold)}
.groupBar.purple{background:var(--purple)}

.panelTitle{
  font-size:17px;
  font-weight:900;
}
.panelSub{
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
}

.platformList{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.platformItem{
  position: relative;
  overflow: hidden;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.02);
  padding:10px;
  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}
.platformItem:hover{
  border-color: rgba(86,242,255,.22);
  transform: translateY(-1px);
  box-shadow:
    0 10px 20px rgba(0,0,0,.18),
    0 0 0 1px rgba(86,242,255,.05);
}
.platformName{
  font-size:15px;
  font-weight:900;
}
.platformDesc{
  margin-top:5px;
  color:var(--muted);
  line-height:1.55;
  font-size:12px;
}

/* 推荐卡片斜标 */
.recommendedCard{
  position: relative;
  overflow: hidden;
}
.cardRibbon{
  position: absolute;
  top: 10px;
  right: -33px;
  width: 110px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .5px;
  color: #061018;
  background: linear-gradient(135deg, #56f2ff, #9ef9ff 45%, #f7c94b);
  transform: rotate(35deg);
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
}

.platformBtnGrid{
  margin-top:9px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:7px;
}
.actionBtn{
  position: relative;
  overflow: hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 8px;
  border-radius:9px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  color:var(--text);
  font-size:11px;
  font-weight:800;
  text-align:center;
  transition:.2s ease;
}
.actionBtn:hover{
  border-color:rgba(86,242,255,.24);
  background:rgba(86,242,255,.05);
}

/* 访问平台主按钮 */
.visitBtn{
  color: #061018;
  border: 1px solid rgba(86,242,255,.22);
  background: linear-gradient(135deg, rgba(86,242,255,.98), rgba(120,240,255,.95));
  box-shadow: 0 6px 18px rgba(86,242,255,.12);
}
.visitBtn:hover{
  border-color: rgba(86,242,255,.28);
  background: linear-gradient(135deg, rgba(96,244,255,1), rgba(146,245,255,.98));
  box-shadow: 0 10px 20px rgba(86,242,255,.18);
}

/* AFF按钮 */
.affWrap{
  position: relative;
  overflow: hidden;
}
.affBtn{
  border-color: rgba(247,201,75,.18);
  background: rgba(247,201,75,.06);
  color: #ffe8aa;
}
.affBtn:hover{
  border-color: rgba(247,201,75,.30);
  background: rgba(247,201,75,.10);
}
.affRibbon{
  position: absolute;
  top: 6px;
  right: -22px;
  width: 66px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  font-size: 9px;
  font-weight: 900;
  color: #061018;
  background: linear-gradient(135deg, #f7c94b, #ffe08a);
  transform: rotate(35deg);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  pointer-events: none;
}

.dangerBtn{
  color:#ffd7e1;
  border-color:rgba(255,92,130,.18);
  background:rgba(255,92,130,.05);
}

.reviewsPanel{
  margin-top:14px;
}
.panelHead{
  margin-bottom:12px;
}
.commentEditor{
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.02);
  padding:12px;
}
.commentEditor textarea{
  width:100%;
  min-height:108px;
  resize:vertical;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel-soft);
  color:var(--text);
  padding:12px;
  outline:none;
}
.editorActions{
  margin-top:10px;
  display:flex;
  justify-content: right;
  gap:10px;
  flex-wrap:wrap;
}
.commentList{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.commentItem{
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.02);
  padding:12px;
}
.commentTop{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-size:12px;
}
.user{font-weight:800}
.platformRef{color:#c8fbff}
.date{color:var(--muted)}
.commentItem p{
  margin:8px 0 0;
  color:var(--muted);
  line-height:1.65;
  font-size:13px;
}
.commentItem .quote {
  margin:8px 0 0;
  color:var(--muted);
  line-height:1.65;
  font-size:13px;
}

@media (max-width:1280px){
  .directoryColumns{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}
@media (max-width:980px){
  .page{
    grid-template-columns:1fr;
  }
  .sidebar{
    display:none;
  }
  .heroMain{
    flex-direction:column;
  }
  .directoryColumns{
    grid-template-columns:1fr;
  }
}
@media (max-width:760px){
  .heroLeft h1{
    font-size:24px;
  }
  .heroRight{
    width:100%;
  }
  .heroRight .primaryBtn{
    flex:1;
  }

  .cardRibbon{
    top: 8px;
    right: -36px;
    width: 108px;
    height: 20px;
    line-height: 20px;
    font-size: 9px;
  }

  .affRibbon{
    top: 5px;
    right: -24px;
    width: 64px;
    height: 15px;
    line-height: 15px;
    font-size: 8px;
  }
}
.editorActions .px { box-sizing: unset}