*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0b0e11;--bg2:#12171c;--bg3:#1a2028;--fg:#e4e8ec;--fg2:#8b949e;--fg3:#5c6570;
  --accent:#f0a050;--accent2:#d08030;--red:#e05555;--green:#4caf84;--radius:8px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--fg);line-height:1.7;min-height:100vh}
a{color:inherit;text-decoration:none}

.back-bar{display:inline-flex;align-items:center;gap:4px;padding:0 0 12px;font-size:.85rem;color:var(--fg2);transition:color .15s}
.back-bar:hover{color:var(--accent)}

.nav{position:sticky;top:0;z-index:100;background:var(--bg);border-bottom:1px solid var(--bg3);backdrop-filter:blur(12px)}
.nav-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 24px}
.logo{font-size:1.1rem;font-weight:700;flex-shrink:0}
.nav-links{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.nav-link{font-size:.82rem;color:var(--fg2);padding:4px 10px;border-radius:4px;transition:all .15s}
.nav-link:hover{color:var(--fg);background:var(--bg3)}

.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 22px;border-radius:var(--radius);font-size:.9rem;font-weight:600;border:none;cursor:pointer;transition:all .2s;position:relative}
.btn--primary{background:var(--accent);color:#0b0e11}
.btn--primary:hover{background:var(--accent2);transform:translateY(-1px);box-shadow:0 4px 16px rgba(240,160,80,.25)}
.btn--primary::after{content:attr(title);position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--bg3);color:var(--fg2);font-size:.72rem;font-weight:400;padding:4px 10px;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;z-index:10}
.btn--primary:hover::after{opacity:1}
.btn--secondary{background:transparent;color:var(--fg);border:1px solid var(--bg3)}
.btn--secondary:hover{background:var(--bg3);transform:none}
.btn--secondary::after{content:attr(title);position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--bg3);color:var(--fg2);font-size:.72rem;font-weight:400;padding:4px 10px;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;z-index:10}
.btn--secondary:hover::after{opacity:1}
.btn--small{padding:5px 12px;font-size:.8rem}
.btn--small::after{display:none}
.btn--lg{padding:14px 32px;font-size:1rem}

.view{display:none;max-width:1100px;margin:0 auto;padding:40px 24px 80px}
.view.active{display:block}
.page-head{text-align:center;margin-bottom:32px}
.page-head h2{font-size:1.8rem;margin-bottom:6px}
.page-head p{color:var(--fg2);font-size:.95rem}

.hero{text-align:center;padding:60px 0 50px}
.hero__tag{display:inline-block;padding:4px 14px;border-radius:20px;background:var(--bg3);color:var(--accent);font-size:.8rem;font-weight:600;margin-bottom:20px;letter-spacing:.04em}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.25;margin-bottom:16px;letter-spacing:-.03em}
.hero h1 span{color:var(--accent)}
.hero__desc{color:var(--fg2);font-size:1.05rem;margin-bottom:30px;line-height:1.8}
.hero__btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:50px}
.hero__stats{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.stat-card{background:var(--bg2);border:1px solid var(--bg3);border-radius:var(--radius);padding:16px 24px;text-align:center;cursor:pointer;transition:all .2s;min-width:110px}
.stat-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 16px rgba(240,160,80,.1)}
.stat-card strong{display:block;font-size:1.8rem;font-weight:700;color:var(--accent);line-height:1.2}
.stat-card span{display:block;font-size:.8rem;color:var(--fg2);margin:2px 0}
.stat-card small{display:block;font-size:.7rem;color:var(--fg3)}

.selling{padding:60px 0 80px}
.selling__head{text-align:center;margin-bottom:48px}
.selling__head h2{font-size:1.6rem;margin-bottom:12px}
.selling__head p{color:var(--fg2);font-size:.95rem;line-height:1.8}
.selling__head b{color:var(--accent)}
.selling__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1000px;margin:0 auto 50px}
.sell-card{background:var(--bg2);border:1px solid var(--bg3);border-radius:var(--radius);padding:28px}
.sell-card__icon{font-size:2.2rem;margin-bottom:16px}
.sell-card h3{font-size:1.05rem;margin-bottom:10px;color:var(--accent)}
.sell-card p{font-size:.85rem;color:var(--fg2);line-height:1.7;margin-bottom:14px}
.sell-card ul{list-style:none;padding:0}
.sell-card li{font-size:.82rem;color:var(--fg2);padding:6px 0 6px 4px;line-height:1.6}
.sell-card li b{color:var(--fg)}
.selling__bottom{text-align:center;padding:40px 0 0;border-top:1px solid var(--bg3)}
.selling__bottom p{color:var(--fg2);font-size:1rem}

/* sort bar */
.sortbar-row{display:flex;justify-content:flex-end;margin-bottom:16px}
.sort-options{display:flex;gap:4px}
.sort-btn{padding:5px 14px;border:1px solid var(--bg3);border-radius:6px;background:transparent;color:var(--fg2);font-size:.8rem;cursor:pointer;font-family:var(--font);transition:all .15s}
.sort-btn:hover{color:var(--fg);border-color:var(--fg3)}
.sort-btn.active{background:var(--accent);color:#0b0e11;border-color:var(--accent)}

/* filter tags */
.filters{margin-bottom:24px}
.filter-tags{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-bottom:10px}
.filter-label{font-size:.78rem;color:var(--fg3);flex-shrink:0;margin-right:4px}
.tag-chip{padding:4px 12px;border:1px solid var(--bg3);border-radius:20px;background:transparent;color:var(--fg2);font-size:.78rem;cursor:pointer;font-family:var(--font);transition:all .15s}
.tag-chip:hover{border-color:var(--fg3);color:var(--fg)}
.tag-chip.active{background:var(--accent);color:#0b0e11;border-color:var(--accent)}
.filter-search-row{margin-top:8px}
.filter-search-row input{width:100%;padding:9px 14px;border-radius:var(--radius);border:1px solid var(--bg3);background:var(--bg2);color:var(--fg);font-size:.85rem;font-family:var(--font)}
.filter-search-row input:focus{outline:none;border-color:var(--accent)}

/* cards */
.grid{display:flex;flex-direction:column;gap:12px}
.card{background:var(--bg2);border:1px solid var(--bg3);border-radius:var(--radius);padding:18px 22px;cursor:pointer;transition:all .2s;display:flex;gap:16px;align-items:flex-start}
.card:hover{border-color:var(--accent);transform:translateY(-1px)}
.card__left{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:4px;min-width:44px}
.card__body{flex:1;min-width:0}
.card__title{font-size:1rem;font-weight:700;line-height:1.35;margin-bottom:4px}
.card__summary{font-size:.84rem;color:var(--fg2);line-height:1.55;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card__meta-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card__tag{padding:2px 10px;border-radius:20px;font-size:.73rem;font-weight:600}
.card__tag--category{background:rgba(240,160,80,.12);color:var(--accent)}
.card__tag--stage{background:var(--bg3);color:var(--fg2)}
.card__tag--date{font-size:.73rem;color:var(--fg3)}
.card__stats-row{display:flex;align-items:center;gap:14px;font-size:.78rem;color:var(--fg3);margin-top:8px}
.card__stats-row span{display:flex;align-items:center;gap:3px}
.vote-btn{background:none;border:none;cursor:pointer;font-size:.85rem;padding:2px 3px;color:var(--fg3);transition:color .15s;font-family:var(--font)}
.vote-btn:hover{color:var(--fg)}
.vote-btn.voted{color:var(--accent)}
.card__left .vote-btn{font-size:1rem}

/* empty */
.empty{text-align:center;padding:60px 20px;display:none}
.empty p:first-child{font-size:3rem;margin-bottom:10px}
.empty h3{font-size:1.2rem;margin-bottom:6px}
.empty>p{color:var(--fg2);margin-bottom:20px}

/* pagination */
.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:32px}
.page-btn{padding:6px 14px;border:1px solid var(--bg3);border-radius:6px;background:transparent;color:var(--fg2);font-size:.82rem;cursor:pointer;font-family:var(--font);transition:all .15s}
.page-btn:hover:not(:disabled){border-color:var(--fg3);color:var(--fg)}
.page-btn.active{background:var(--accent);color:#0b0e11;border-color:var(--accent)}
.page-btn:disabled{opacity:.3;cursor:default}
.page-info{font-size:.8rem;color:var(--fg3);margin:0 4px}

/* form */
.form{max-width:720px;margin:0 auto}
.form__section{margin-bottom:28px;padding:24px;background:var(--bg2);border:1px solid var(--bg3);border-radius:var(--radius)}
.form__section h3{font-size:.95rem;margin-bottom:16px;color:var(--accent)}
.form__row{display:flex;gap:16px;flex-wrap:wrap}
.form__row.cols-3>div{flex:1;min-width:180px}
.form__row label{display:block;font-size:.8rem;color:var(--fg2);margin-bottom:4px;font-weight:600}
.form__row input,.form__row select{width:100%;padding:10px 14px;border-radius:var(--radius);border:1px solid var(--bg3);background:var(--bg);color:var(--fg);font-size:.9rem;font-family:var(--font)}
.form__row :focus{outline:none;border-color:var(--accent)}
.radio-label{display:flex!important;align-items:center;gap:6px;color:var(--fg)!important;font-size:.9rem!important;cursor:pointer;font-weight:400!important}
.radio-label input{width:auto!important}
.required{color:var(--red)}
.field-block{display:flex;gap:14px;margin-bottom:20px;padding:16px;background:var(--bg);border-radius:var(--radius)}
.field-num{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:var(--bg3);color:var(--fg2);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700}
.field-num.err{background:rgba(224,85,85,.15);color:var(--red)}
.field-num.ok{background:rgba(76,175,132,.15);color:var(--green)}
.field-body{flex:1}
.field-body label{display:block;font-size:.85rem;font-weight:600;margin-bottom:8px}
.field-body label span{font-weight:400;color:var(--fg3);font-size:.78rem;margin-left:8px}
.field-body textarea{width:100%;padding:12px;border-radius:var(--radius);border:1px solid var(--bg3);background:var(--bg2);color:var(--fg);font-size:.88rem;font-family:var(--font);resize:vertical;line-height:1.7}
.field-body textarea:focus{outline:none;border-color:var(--accent)}

.form-hint{font-size:.8rem;color:var(--fg3);margin-bottom:12px;line-height:1.5}
.form__section small{font-weight:400;color:var(--fg3);font-size:.78rem;margin-left:4px}
.char-count{display:block;text-align:right;font-size:.72rem;color:var(--fg3);margin-top:4px}
.char-count.warn{color:var(--red)}
.form__actions{text-align:center;margin-top:36px}
.form__actions p{color:var(--fg3);font-size:.8rem;margin-top:12px}
.success-msg{text-align:center;padding:60px 20px;display:none}
.success-msg>p:first-child{font-size:3rem;margin-bottom:10px}
.success-msg h3{font-size:1.4rem;margin-bottom:6px}
.success-msg p{color:var(--fg2);margin-bottom:20px}

.followups{margin-top:32px;padding:24px;background:var(--bg2);border:1px solid rgba(240,160,80,.2);border-radius:var(--radius)}
.followups h3{font-size:1rem;margin-bottom:14px;color:var(--accent)}
.followups .comment-list{margin-bottom:16px}

.detail{max-width:780px;margin:0 auto}
.detail h1{font-size:1.8rem;margin-bottom:8px}
.detail__meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.detail__meta span{padding:3px 12px;border-radius:20px;font-size:.8rem;background:var(--bg3);color:var(--fg2)}
.detail__vote-bar{display:flex;align-items:center;gap:8px;margin-bottom:28px;padding:10px 18px;background:var(--bg2);border:1px solid var(--bg3);border-radius:var(--radius)}
.detail__vote-bar .vote-btn{font-size:1rem}
.detail__section{margin-bottom:24px;padding:20px;background:var(--bg2);border:1px solid var(--bg3);border-radius:var(--radius)}
.detail__section h3{font-size:.85rem;color:var(--accent);margin-bottom:10px}
.detail__section p{font-size:.92rem;color:var(--fg2);line-height:1.8;white-space:pre-wrap}
.detail__section--mistake{border-color:rgba(224,85,85,.25);background:rgba(224,85,85,.04)}
.detail__section--mistake h3{color:var(--red)}
.detail__section--lesson{border-color:rgba(76,175,132,.25);background:rgba(76,175,132,.04)}
.detail__section--lesson h3{color:var(--green)}

.comments{margin-top:32px}
.comments h3{font-size:1rem;margin-bottom:16px}
.comment-list{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.comment{padding:14px;background:var(--bg2);border:1px solid var(--bg3);border-radius:var(--radius)}
.comment__meta{font-size:.75rem;color:var(--fg3);margin-bottom:6px}
.comment__body{font-size:.88rem;color:var(--fg2);line-height:1.6;white-space:pre-wrap}
.comment-form{display:flex;gap:10px}
.comment-form input{flex:1;padding:10px 14px;border-radius:var(--radius);border:1px solid var(--bg3);background:var(--bg2);color:var(--fg);font-size:.88rem;font-family:var(--font)}
.file-upload{display:flex;align-items:center;gap:12px}.file-label{display:inline-block;padding:8px 16px;border:1px dashed var(--bg3);border-radius:6px;color:var(--fg2);font-size:.85rem;cursor:pointer;transition:all .15s}.file-label:hover{border-color:var(--accent);color:var(--accent)}.file-hint{font-size:.8rem;color:var(--fg3)}.file-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.file-chip{display:flex;align-items:center;gap:6px;padding:4px 12px;background:var(--bg);border:1px solid var(--bg3);border-radius:20px;font-size:.78rem}.file-chip button{background:none;border:none;color:var(--fg3);cursor:pointer;font-size:.9rem;padding:0 2px}.file-chip button:hover{color:var(--red)}.file-size-warn{color:var(--accent);font-size:.75rem}.comment-form input:focus{outline:none;border-color:var(--accent)}

footer{text-align:center;padding:30px 24px;border-top:1px solid var(--bg3);color:var(--fg3);font-size:.8rem}

@media(max-width:640px){
  .hero__stats{gap:10px}
  .stat-card{padding:12px 16px;min-width:80px}
  .stat-card strong{font-size:1.4rem}
  .selling__grid{grid-template-columns:1fr}
  .filters{flex-direction:column}
  .form__row.cols-3>div{min-width:100%}
  .field-block{flex-direction:column;gap:8px}
  .comment-form{flex-direction:column}
  .nav-links{gap:2px}
  .nav-link{font-size:.75rem;padding:3px 7px}
  .card{padding:14px 16px;gap:10px}
  .sortbar-row{justify-content:flex-start}
}