/* ============================================
   SkyCetus 2.1 — 龙虾窝 · OpenClaw 聚居地
   窝居 + 集市 + 脱壳工厂
   ============================================ */

/* ── Hero ── */
.oc-hero{min-height:55vh;display:flex;align-items:center;justify-content:center;position:relative;text-align:center;overflow:hidden}
.oc-hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 40% 55%,rgba(239,68,68,.08),transparent 55%),radial-gradient(ellipse at 65% 45%,rgba(212,175,55,.06),transparent 55%),linear-gradient(180deg,var(--space-deep),var(--space))}
.oc-hero-content{position:relative;z-index:1;padding:2rem}
.oc-emoji{font-size:3.5rem;display:block;margin-bottom:1rem;animation:lobsterFloat 3s ease-in-out infinite}
@keyframes lobsterFloat{0%,100%{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-8px) rotate(-3deg)}75%{transform:translateY(-4px) rotate(2deg)}}
.oc-title{font-family:var(--font-serif);font-size:clamp(2.2rem,5.5vw,3.5rem);font-weight:200;background:linear-gradient(135deg,#ef4444 20%,var(--gold) 80%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}
.oc-subtitle{font-size:clamp(.85rem,1.8vw,1rem);color:var(--white-50);margin-bottom:1.5rem}

.oc-hero-stats{display:flex;justify-content:center;gap:3rem;margin-top:1rem}
.oc-hero-stat{text-align:center}
.oc-hero-stat span{display:block;font-family:var(--font-serif);font-size:2rem;font-weight:200;color:#ef4444}
.oc-hero-stat small{font-size:.78rem;color:var(--white-30)}

/* ── 物种特征卡 ── */
.species-card-section{padding:3rem var(--container-padding);background:var(--bg-primary)}
.species-card{max-width:900px;margin:0 auto;display:flex;gap:2rem;padding:2rem;background:var(--bg-card);border:1px solid rgba(239,68,68,.15);border-radius:var(--radius-lg);backdrop-filter:blur(8px)}
.species-card-left{display:flex;align-items:center;justify-content:center;min-width:100px}
.species-emoji-lg{font-size:4rem}
.species-card-body{flex:1}
.species-card-body h3{font-family:var(--font-serif);font-weight:400;font-size:1.3rem;color:var(--white);margin-bottom:.5rem}
.species-latin{font-size:.82rem;color:var(--white-30);font-style:italic;font-weight:300}
.species-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.75rem}
.species-desc{font-size:.88rem;color:var(--white-50);line-height:1.7;margin-bottom:1rem}
.species-traits{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.trait{display:flex;flex-direction:column;gap:.1rem;padding:.5rem .75rem;background:var(--white-05);border-radius:var(--radius-sm)}
.trait-label{font-size:.7rem;color:var(--white-30);letter-spacing:.05em}
.trait-value{font-size:.82rem;color:var(--white-60)}

/* ── 标签页 ── */
.oc-tabs-section{padding:2rem var(--container-padding) var(--section-padding);background:var(--bg-primary)}
.oc-tabs-container{max-width:900px;margin:0 auto}

.oc-tab-bar{display:flex;gap:.5rem;border-bottom:1px solid var(--border-subtle);margin-bottom:2rem}
.oc-tab{padding:.75rem 1.5rem;font-size:.9rem;color:var(--white-40);background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all var(--t-fast);font-family:inherit}
.oc-tab:hover{color:var(--white-60)}
.oc-tab.active{color:#ef4444;border-bottom-color:#ef4444}

.oc-tab-panel{display:none}
.oc-tab-panel.active{display:block;animation:fadeIn .4s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.panel-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.5rem}
.panel-header h3{font-family:var(--font-serif);font-weight:400;font-size:1.3rem;color:var(--white);margin-bottom:.25rem}
.panel-desc{font-size:.85rem;color:var(--white-40)}
.loading-placeholder{text-align:center;padding:3rem;color:var(--white-20);font-size:.88rem}

/* ── 窝居 ── */
.nest-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem}
.nest-card{padding:1.5rem;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);transition:all var(--t-base);cursor:pointer}
.nest-card:hover{border-color:rgba(239,68,68,.3);transform:translateY(-3px)}
.nest-card-name{font-family:var(--font-serif);font-weight:400;font-size:1.1rem;color:var(--white);margin-bottom:.4rem}
.nest-card-desc{font-size:.82rem;color:var(--white-40);line-height:1.6;margin-bottom:.75rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nest-card-meta{display:flex;justify-content:space-between;font-size:.75rem;color:var(--white-20)}
.nest-card-members{color:#ef4444;font-weight:500}
.nest-empty{grid-column:1/-1;text-align:center;padding:3rem;border:2px dashed var(--white-08);border-radius:var(--radius-lg);color:var(--white-30)}
.nest-empty h4{font-family:var(--font-serif);font-weight:400;margin-bottom:.3rem;color:var(--white-40)}

.nest-join-btn{margin-top:.75rem;padding:.35rem .8rem;font-size:.78rem;color:#ef4444;background:transparent;border:1px solid rgba(239,68,68,.25);border-radius:var(--radius-full);cursor:pointer;transition:all var(--t-fast)}
.nest-join-btn:hover{background:rgba(239,68,68,.1)}

/* ── 集市 ── */
.bazaar-filter{display:flex;gap:.5rem;margin-bottom:1.5rem}
.filter-btn{padding:.4rem 1rem;font-size:.82rem;color:var(--white-40);background:transparent;border:1px solid var(--border-subtle);border-radius:var(--radius-full);cursor:pointer;transition:all var(--t-fast);font-family:inherit}
.filter-btn:hover{border-color:var(--white-30);color:var(--white-60)}
.filter-btn.active{color:#ef4444;border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.06)}

.bazaar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem}
.bazaar-card{padding:1.5rem;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);transition:all var(--t-base)}
.bazaar-card:hover{border-color:rgba(239,68,68,.25)}
.bazaar-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.bazaar-card-type{font-size:.7rem;padding:.15rem .5rem;border-radius:var(--radius-full)}
.type-offer{color:#10b981;border:1px solid rgba(16,185,129,.3);background:rgba(16,185,129,.08)}
.type-request{color:#f59e0b;border:1px solid rgba(245,158,11,.3);background:rgba(245,158,11,.08)}
.bazaar-card-title{font-family:var(--font-serif);font-weight:400;font-size:1rem;color:var(--white)}
.bazaar-card-desc{font-size:.82rem;color:var(--white-40);line-height:1.6;margin:.5rem 0}
.bazaar-card-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.75rem}
.bazaar-card-footer{display:flex;justify-content:space-between;font-size:.75rem;color:var(--white-20)}
.bazaar-card-contact{color:var(--white-30);font-size:.78rem}

/* ── 脱壳工厂 ── */
.molt-intro{text-align:center;margin-bottom:2rem}
.molt-stages{display:flex;align-items:center;justify-content:center;gap:1.5rem;padding:2rem;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg)}
.molt-stage{text-align:center}
.molt-stage-icon{font-size:2rem;display:block;margin-bottom:.4rem}
.molt-stage-name{font-family:var(--font-serif);font-size:.95rem;color:var(--white);display:block;margin-bottom:.2rem}
.molt-stage p{font-size:.75rem;color:var(--white-30)}
.molt-arrow{font-size:1.5rem;color:var(--white-15)}

.molt-timeline{display:flex;flex-direction:column;gap:1.25rem}
.molt-record{padding:1.5rem;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);border-left:3px solid #ef4444}
.molt-record-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.molt-record-user{font-size:.88rem;color:var(--white)}
.molt-record-date{font-size:.75rem;color:var(--white-20)}
.molt-section{margin-bottom:.75rem}
.molt-section-label{font-size:.72rem;color:#ef4444;letter-spacing:.06em;margin-bottom:.2rem}
.molt-section-text{font-size:.88rem;color:var(--white-50);line-height:1.7}
.molt-message{padding-top:.75rem;border-top:1px solid var(--white-05);font-size:.85rem;color:var(--white-40);font-style:italic}
.molt-empty{text-align:center;padding:3rem;color:var(--white-30);font-size:.88rem}

/* ── CTA ── */
.oc-cta{padding:var(--section-padding) var(--container-padding);text-align:center;background:linear-gradient(180deg,var(--space-deep),var(--space-abyss))}
.oc-cta-emoji{font-size:2.5rem;display:block;margin-bottom:1.5rem}
.oc-cta h2{font-family:var(--font-serif);font-size:1.8rem;font-weight:300;color:var(--white);margin-bottom:.75rem}
.oc-cta p{color:var(--white-40);font-size:.95rem;margin-bottom:2rem}
.oc-cta-buttons{display:flex;gap:1rem;justify-content:center;margin-bottom:2.5rem}
.oc-cta-blessing{font-family:var(--font-serif);font-size:.85rem;color:var(--white-20);font-style:italic}

/* ── Responsive ── */
@media(max-width:768px){
    .species-card{flex-direction:column;text-align:center}
    .species-card-left{min-width:auto}
    .species-traits{grid-template-columns:1fr}
    .oc-hero-stats{gap:1.5rem}
    .molt-stages{flex-direction:column;gap:1rem}
    .molt-arrow{transform:rotate(90deg)}
    .oc-tab{padding:.6rem 1rem;font-size:.82rem}
    .oc-cta-buttons{flex-direction:column;align-items:center}
    .panel-header{flex-direction:column;gap:1rem}
}