/* ===== 谋略典藏 · 全局样式 ===== */
@import url('./tokens.css');
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--sans-cn);
  line-height:1.6;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--bg)}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit}
.container{max-width:1280px;margin:0 auto;padding:0 var(--sp-6)}
.muted{color:var(--text-sec)}
.gold{color:var(--gold)}

/* ===== HEADER ===== */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(10,10,10,0.85);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:0 var(--sp-6);height:64px;
  display:flex;align-items:center;justify-content:space-between;
}
.header-logo{display:flex;align-items:center;gap:12px}
.header-logo .logo-mark{
  width:36px;height:36px;border:1px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif-cn);font-size:18px;font-weight:700;color:var(--gold);
}
.header-logo .logo-text{font-family:var(--serif-cn);font-size:16px;font-weight:500;letter-spacing:2px}
.header-logo .logo-text span{color:var(--gold)}
.header-nav{display:flex;gap:36px}
.header-nav a{font-size:14px;color:var(--text-sec);transition:color .3s;position:relative}
.header-nav a:hover,.header-nav a.active{color:var(--text)}
.header-nav a::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .3s)}
.header-nav a:hover::after,.header-nav a.active::after{transform:scaleX(1)}
.header-cta{padding:8px 20px;border:1px solid var(--gold);color:var(--gold);font-size:13px;letter-spacing:1px;transition:all .3s}
.header-cta:hover{background:var(--gold);color:var(--bg)}

/* ===== FOOTER ===== */
.footer{border-top:1px solid var(--border);padding:64px var(--sp-6) 32px;margin-top:var(--sp-9)}
.footer-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-brand .logo{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.footer-brand .logo .mark{width:36px;height:36px;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;font-family:var(--serif-cn);font-size:18px;font-weight:700;color:var(--gold)}
.footer-brand .logo .text{font-family:var(--serif-cn);font-size:16px;font-weight:500;letter-spacing:2px}
.footer-brand .logo .text span{color:var(--gold)}
.footer-brand p{font-size:13px;color:var(--text-sec);line-height:1.8;max-width:320px}
.footer-col h4{font-size:14px;font-weight:500;letter-spacing:2px;margin-bottom:20px;color:var(--text)}
.footer-col a{display:block;font-size:13px;color:var(--text-sec);margin-bottom:12px;transition:color .3s}
.footer-col a:hover{color:var(--gold)}
.footer-bottom{max-width:1280px;margin:0 auto;padding-top:32px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-faint)}

/* ===== PAGE SHELL ===== */
.page{padding-top:64px}
.page-head{padding:var(--sp-9) var(--sp-6) var(--sp-7);text-align:center;max-width:1280px;margin:0 auto}
.page-eyebrow{font-family:var(--serif-en);font-size:13px;color:var(--gold);letter-spacing:4px;text-transform:uppercase;margin-bottom:16px}
.page-title{font-family:var(--serif-cn);font-size:44px;font-weight:700;letter-spacing:6px;margin-bottom:16px}
.page-sub{font-size:15px;color:var(--text-sec);max-width:560px;margin:0 auto;line-height:1.8}
.breadcrumb{font-size:13px;color:var(--text-ter);padding:var(--sp-4) var(--sp-6) 0;max-width:1280px;margin:0 auto}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb .sep{margin:0 8px;color:var(--text-faint)}

/* ===== SECTION ===== */
.section{padding:var(--sp-9) var(--sp-6);max-width:1280px;margin:0 auto}
.section-head{text-align:center;margin-bottom:64px}
.section-tag{font-family:var(--serif-en);font-size:13px;color:var(--gold);letter-spacing:3px;text-transform:uppercase;margin-bottom:16px}
.section-title{font-family:var(--serif-cn);font-size:42px;font-weight:500;letter-spacing:4px;margin-bottom:16px}
.section-desc{max-width:520px;margin:0 auto;font-size:14px;color:var(--text-sec);line-height:1.8}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 32px;border:1px solid var(--gold);color:var(--gold);font-size:14px;letter-spacing:2px;background:transparent;transition:all var(--dur) var(--ease)}
.btn:hover{background:var(--gold);color:var(--bg);box-shadow:0 0 40px var(--gold-glow)}
.btn-solid{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.btn-solid:hover{background:var(--gold-bright);border-color:var(--gold-bright)}

/* ===== BADGES ===== */
.source-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;padding:3px 10px;border:1px solid currentColor;border-radius:var(--r-pill);line-height:1.4}
.source-badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.lv-primary{color:var(--lv-primary)}
.lv-secondary{color:var(--lv-secondary)}
.lv-tertiary{color:var(--lv-tertiary)}
.lv-disputed{color:var(--lv-disputed)}
.tag{font-size:11px;padding:3px 10px;background:rgba(196,154,74,0.08);color:var(--gold-dim);border-radius:var(--r-sm)}
.std-chip{font-size:12px;padding:5px 14px;border:1px solid var(--border-hi);color:var(--text-sec);border-radius:var(--r-pill);transition:all .3s;cursor:pointer;background:transparent}
.std-chip:hover{border-color:var(--gold-dim);color:var(--gold)}
.std-chip.active{background:var(--gold);color:var(--bg);border-color:var(--gold)}

/* ===== CARD GRID ===== */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:32px}

/* ===== PERSON CARD ===== */
.person-card{background:var(--bg-card);border:1px solid var(--border);padding:40px 32px;text-align:center;transition:all var(--dur) var(--ease);position:relative;overflow:hidden;cursor:pointer}
.person-card:hover{border-color:var(--gold-dim);background:var(--bg-card-hover);transform:translateY(-4px)}
.person-seal{width:72px;height:72px;border:2px solid var(--gold-dim);display:flex;align-items:center;justify-content:center;margin:0 auto 24px;font-family:var(--serif-cn);font-size:32px;font-weight:700;color:var(--gold);transition:transform var(--dur) var(--ease)}
.person-card:hover .person-seal{transform:rotate(5deg);border-color:var(--gold)}
.person-name{font-family:var(--serif-cn);font-size:22px;font-weight:500;letter-spacing:2px;margin-bottom:4px}
.person-en{font-family:var(--serif-en);font-size:13px;color:var(--text-faint);letter-spacing:1px;margin-bottom:16px}
.person-era{font-size:12px;color:var(--gold);padding:2px 12px;border:1px solid var(--gold-dim);display:inline-block;margin-bottom:16px}
.person-quote{font-size:13px;color:var(--text-sec);line-height:1.7;font-style:italic}

/* ===== STORY CARD ===== */
.story-card{background:var(--bg-card);border:1px solid var(--border);overflow:hidden;transition:all var(--dur) var(--ease);cursor:pointer;display:flex;flex-direction:column}
.story-card:hover{border-color:var(--gold-dim);transform:translateY(-4px)}
.story-banner{height:120px;background:linear-gradient(135deg,#1a1a1a 0%,#0F0F0F 100%);display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid var(--border)}
.story-banner .char{font-family:var(--serif-cn);font-size:56px;font-weight:700;color:var(--gold);opacity:.15;position:absolute}
.story-banner .type{font-family:var(--serif-cn);font-size:16px;font-weight:500;color:var(--gold);letter-spacing:2px;z-index:1}
.story-banner.yin .type{color:var(--yin)}
.story-banner.hybrid .type{color:var(--hybrid)}
.story-body{padding:28px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.story-name{font-family:var(--serif-cn);font-size:20px;font-weight:500;letter-spacing:2px}
.story-source{font-size:12px;color:var(--text-faint)}
.story-desc{font-size:13px;color:var(--text-sec);line-height:1.7}
.story-foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:auto;padding-top:8px}
.story-banner-wrap{display:block;text-decoration:none}
.story-name a{color:var(--text);text-decoration:none;transition:color var(--dur) var(--ease)}
.story-name a:hover{color:var(--gold)}
.person-link{color:var(--text-faint);text-decoration:none;transition:color var(--dur) var(--ease);border-bottom:1px dotted var(--border)}
.person-link:hover{color:var(--gold);border-bottom-color:var(--gold)}

/* ===== COLLECTION CARD ===== */
.collection-card{background:linear-gradient(135deg,#141414,#0F0F0F);border:1px solid var(--border);padding:40px 32px;position:relative;overflow:hidden;transition:all var(--dur) var(--ease);cursor:pointer}
.collection-card:hover{border-color:var(--gold-dim);transform:translateY(-4px)}
.collection-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s}
.collection-card:hover::before{transform:scaleX(1)}
.collection-char{font-family:var(--serif-cn);font-size:64px;font-weight:700;color:var(--gold);opacity:.12;position:absolute;right:24px;top:16px}
.collection-name{font-family:var(--serif-cn);font-size:24px;font-weight:500;letter-spacing:2px;margin-bottom:12px;position:relative}
.collection-desc{font-size:13px;color:var(--text-sec);line-height:1.7;margin-bottom:16px;position:relative}
.collection-count{font-size:12px;color:var(--gold);position:relative}

/* ===== FILTER BAR ===== */
.filter-bar{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-bottom:40px;padding:20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md)}
.filter-group{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.filter-label{font-size:13px;color:var(--text-ter);margin-right:4px}
.search-input{flex:1;min-width:220px;background:var(--bg);border:1px solid var(--border-hi);color:var(--text);padding:10px 16px;border-radius:var(--r-sm);font-size:14px;outline:none;transition:border-color .3s}
.search-input:focus{border-color:var(--gold-dim)}
select.filter-select{background:var(--bg);border:1px solid var(--border-hi);color:var(--text);padding:10px 14px;border-radius:var(--r-sm);font-size:14px;outline:none;cursor:pointer}
select.filter-select:focus{border-color:var(--gold-dim)}

/* ===== TIMELINE (P1) ===== */
.tl-tabs{display:flex;gap:12px;justify-content:center;margin-bottom:24px}
.tl-tab{padding:10px 28px;border-radius:var(--r-sm);background:var(--bg-card);border:1px solid var(--border-hi);color:var(--text-sec);font-size:15px;transition:all .3s}
.tl-tab.active{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.tl-era-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:48px}
.tl-axis{position:relative;padding:20px 0 40px}
.tl-line{position:absolute;left:120px;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,var(--border-hi) 8%,var(--border-hi) 92%,transparent)}
.tl-row{display:grid;grid-template-columns:120px 1fr;gap:32px;margin-bottom:8px;align-items:stretch}
.tl-year{font-family:var(--serif-en);font-size:22px;font-weight:600;color:var(--gold);text-align:right;padding-top:18px}
.tl-event{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);padding:18px 22px;margin-bottom:20px;cursor:pointer;transition:all .3s;position:relative}
.tl-event::before{content:'';position:absolute;left:-33px;top:28px;width:10px;height:10px;border:2px solid var(--gold);background:var(--bg);border-radius:50%}
.tl-event:hover{border-color:var(--gold-dim);background:var(--bg-card-hover)}
.tl-event .e-title{font-family:var(--serif-cn);font-size:18px;font-weight:500;letter-spacing:1px;margin-bottom:6px}
.tl-event .e-desc{font-size:13px;color:var(--text-sec);line-height:1.7}
.tl-event .e-civ{font-size:11px;color:var(--text-faint);margin-top:8px;letter-spacing:1px}

/* ===== DETAIL (P3/P5) ===== */
.detail-hero{padding:var(--sp-8) var(--sp-6);text-align:center;max-width:900px;margin:0 auto}
.detail-seal{width:120px;height:120px;border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;margin:0 auto 28px;font-family:var(--serif-cn);font-size:56px;font-weight:700;color:var(--gold)}
.detail-name{font-family:var(--serif-cn);font-size:48px;font-weight:700;letter-spacing:6px;margin-bottom:8px}
.detail-en{font-family:var(--serif-en);font-size:20px;color:var(--text-ter);letter-spacing:2px;margin-bottom:20px}
.detail-era{font-size:13px;color:var(--gold);padding:4px 16px;border:1px solid var(--gold-dim);display:inline-block;margin-bottom:24px}
.detail-quote{font-size:18px;color:var(--text-sec);line-height:1.9;font-style:italic;max-width:640px;margin:0 auto}
.detail-bio{max-width:760px;margin:var(--sp-7) auto;padding:0 var(--sp-6);font-size:15px;color:var(--text-sec);line-height:2}
.detail-bio h3{font-family:var(--serif-cn);font-size:22px;color:var(--text);margin-bottom:16px;letter-spacing:2px}
.rel-list{max-width:760px;margin:0 auto var(--sp-7);padding:0 var(--sp-6);display:flex;flex-direction:column;gap:12px}
.rel-item{display:flex;align-items:center;gap:16px;padding:18px 22px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);transition:all .3s;cursor:pointer}
.rel-item:hover{border-color:var(--gold-dim);transform:translateX(4px)}
.rel-item .r-idx{font-family:var(--serif-en);font-size:20px;color:var(--gold);font-weight:600}
.rel-item .r-name{font-family:var(--serif-cn);font-size:18px;letter-spacing:1px}
.rel-item .r-type{font-size:12px;color:var(--text-ter);margin-left:auto}

/* info 4-grid (P5) */
.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:900px;margin:0 auto var(--sp-7);padding:0 var(--sp-6)}
.info-cell{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);padding:20px;text-align:center}
.info-cell .k{font-size:12px;color:var(--text-ter);letter-spacing:2px;margin-bottom:8px}
.info-cell .v{font-family:var(--serif-cn);font-size:16px;color:var(--text);letter-spacing:1px}

/* story modules */
.story-module{max-width:760px;margin:0 auto var(--sp-5);padding:0 var(--sp-6)}
.story-module h3{font-family:var(--serif-cn);font-size:22px;color:var(--gold);margin-bottom:16px;letter-spacing:2px;display:flex;align-items:center;gap:12px}
.story-module h3::before{content:'';width:4px;height:22px;background:var(--gold)}
.story-module p{font-size:15px;color:var(--text-sec);line-height:2}
.module-inspire{background:linear-gradient(135deg,rgba(196,154,74,0.08),rgba(196,154,74,0.02));border:1px solid var(--border-gold);border-radius:var(--r-lg);padding:32px;max-width:760px;margin:0 auto var(--sp-5)}
.module-inspire h3{font-family:var(--serif-cn);font-size:22px;color:var(--gold);margin-bottom:16px;letter-spacing:2px}
.module-inspire p{font-size:16px;color:var(--text);line-height:2}
.source-block{max-width:760px;margin:0 auto var(--sp-7);padding:24px var(--sp-6);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md)}
.source-block .s-title{font-size:13px;color:var(--text-ter);letter-spacing:2px;margin-bottom:12px}
.source-block .s-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:14px;color:var(--text-sec)}

/* ===== FORM (P6) ===== */
.form-card{max-width:760px;margin:0 auto var(--sp-7);padding:40px;background:var(--bg-card);border:1px solid var(--border-gold);border-radius:var(--r-lg)}
.form-field{margin-bottom:24px;display:flex;flex-direction:column;gap:8px}
.form-field label{font-size:14px;color:var(--text-sec);font-weight:500}
.form-field label .req{color:var(--gold)}
.form-input,.form-textarea{background:var(--bg);border:1px solid var(--border-hi);color:var(--text);padding:14px 16px;border-radius:var(--r-sm);font-size:14px;outline:none;transition:border-color .3s;width:100%}
.form-input:focus,.form-textarea:focus{border-color:var(--gold-dim)}
.form-textarea{resize:vertical;min-height:120px}
.form-hint{font-size:12px;color:var(--text-ter);line-height:1.6}
.type-chips{display:flex;flex-wrap:wrap;gap:12px}
.type-chip{padding:10px 20px;border-radius:var(--r-pill);background:var(--bg);border:1px solid var(--border-hi);color:var(--gold);font-size:14px;transition:all .3s}
.type-chip.active{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.form-success{text-align:center;padding:60px 40px;background:var(--bg-card);border:1px solid var(--border-gold);border-radius:var(--r-lg);max-width:760px;margin:0 auto}
.form-success .ok{font-size:48px;color:var(--gold);margin-bottom:16px}
.guide-note{text-align:center;font-size:13px;color:var(--text-ter);max-width:620px;margin:0 auto;line-height:1.8}

/* ===== EMPTY ===== */
.empty{text-align:center;padding:80px 20px;color:var(--text-ter);font-size:15px}

/* ===== 我的投稿（本地草稿） ===== */
#my-submissions{display:flex;flex-direction:column;gap:16px;max-width:820px}
.sub-item{background:var(--bg-card);border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:10px;padding:18px 22px;transition:border-color .25s var(--ease)}
.sub-item:hover{border-color:var(--border-gold)}
.sub-meta{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.sub-type{font-size:12px;color:var(--gold);background:rgba(196,154,74,.12);border:1px solid var(--border-gold);border-radius:999px;padding:2px 12px}
.sub-status{font-size:12px;color:var(--text-sec);background:var(--bg-elev);border-radius:999px;padding:2px 12px}
.sub-title{font-family:var(--serif-cn);font-size:20px;color:var(--text-pri);letter-spacing:1px;margin-bottom:4px}
.sub-sub{font-size:13px;color:var(--text-ter)}

/* ===== SCROLL ANIM ===== */
.fade-in{opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .header{padding:0 24px}
  .header-nav{display:none}
  .page-title{font-size:32px;letter-spacing:3px}
  .section{padding:64px 24px}
  .section-title{font-size:32px}
  .container,.page-head,.breadcrumb,.section,.footer{padding-left:24px;padding-right:24px}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .info-grid{grid-template-columns:1fr 1fr}
  .tl-line{left:64px}
  .tl-row{grid-template-columns:64px 1fr;gap:20px}
  .tl-event::before{left:-21px}
}
@media(min-width:901px) and (max-width:1200px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
}