/* ============================================================
   孤本 · UNIQUE STUDIO — Design System
   Strictly reproduced from the Ardot design file (editorial-magazine).
   Tokens: paper #FBFAF7 · ink #1A1A1A · red #C0392B · gray #5C5C5C · line #E5E1D7
   Radius 4px · 2px ink borders · hard offset shadows · Noto Serif/Sans SC
   ============================================================ */

:root{
  --paper:#FBFAF7;
  --ink:#1A1A1A;
  --red:#C0392B;
  --gray:#5C5C5C;
  --line:#E5E1D7;
  --white:#FFFFFF;
  --serif:'Noto Serif SC', serif;
  --sans:'Noto Sans SC', sans-serif;
  --radius:4px;
  --shadow:4px 4px 0 var(--ink);
  --shadow-red:6px 6px 0 var(--red);
  --shadow-soft:4px 4px 0 var(--ink);
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit;}
img{max-width:100%;display:block;}

/* ---- Canvas / scaling (fluid, max 1440) ---- */
.viewport{width:100%;min-height:100vh;background:var(--paper);}
.canvas{max-width:1440px;margin:0 auto;background:var(--paper);position:relative;}

/* ============================================================
   HEADER
   ============================================================ */
.header{width:100%;background:var(--paper);}
.header-row{height:72px;padding:0 clamp(20px,8vw,120px);display:flex;align-items:center;justify-content:space-between;}
.header-border{width:100%;height:2px;background:var(--ink);}
.left-group{display:flex;align-items:center;gap:48px;}
.logo{display:flex;flex-direction:column;gap:2px;}
.logo-word{font-family:var(--serif);font-weight:700;font-size:24px;color:var(--ink);line-height:1;}
.logo-sub{font-family:var(--sans);font-weight:700;font-size:10px;letter-spacing:2px;color:var(--gray);}
.nav{display:flex;align-items:center;gap:32px;}
.nav a{font-size:15px;color:var(--ink);transition:color .15s;}
.nav a:hover{color:var(--red);}
.nav a.active{color:var(--red);font-weight:700;}
.header-cta{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border:2px solid var(--ink);border-radius:var(--radius);background:var(--white);box-shadow:var(--shadow);font-weight:700;font-size:15px;transition:transform .12s,box-shadow .12s;}
.header-cta:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink);}
.header-cta:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.header-cta.active{color:var(--red);border-color:var(--red);}
.cart-pill{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;margin-left:8px;background:var(--red);color:#fff;font-size:12px;font-weight:700;border-radius:10px;}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:88px clamp(20px,8vw,120px) 96px;display:flex;background:var(--paper);}
.hero-inner{width:100%;display:flex;gap:56px;align-items:center;justify-content:space-between;}
.hero-left{width:600px;display:flex;flex-direction:column;gap:26px;align-items:flex-start;}
.kicker{font-weight:700;font-size:13px;letter-spacing:2.5px;color:var(--red);}
.hero-headline{font-family:var(--serif);font-weight:700;font-size:60px;line-height:68px;color:var(--ink);}
.hero-sub{font-size:17px;line-height:29px;color:var(--gray);max-width:560px;}
.hero-ctas{display:flex;gap:16px;align-items:center;}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;padding:14px 28px;border-radius:var(--radius);background:var(--ink);color:#fff;font-weight:700;font-size:16px;box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s;}
.btn-primary:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink);}
.btn-primary:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;padding:14px 28px;border:2px solid var(--ink);border-radius:var(--radius);background:var(--white);color:var(--ink);font-weight:700;font-size:16px;box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s;}
.btn-secondary:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink);}
.btn-secondary:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.hero-trust{font-size:13px;color:var(--gray);}
.card-mark{width:46px;height:46px;border-radius:var(--radius);flex:0 0 auto;}
.card-text{display:flex;flex-direction:column;gap:4px;align-items:flex-start;}
.card-name{font-family:var(--serif);font-weight:700;font-size:19px;color:var(--ink);}
.card-tag{font-size:12px;color:var(--gray);}
.card-price{font-family:var(--serif);font-weight:700;font-size:16px;color:var(--ink);}

/* ============================================================
   SECTION HEADINGS (shared)
   ============================================================ */
.section{padding:88px clamp(20px,8vw,120px) 96px;background:var(--paper);display:flex;flex-direction:column;}
.section-head{display:flex;flex-direction:column;gap:12px;margin-bottom:40px;}
.section-kicker{font-weight:700;font-size:13px;letter-spacing:2.5px;color:var(--red);}
.section-title{font-family:var(--serif);font-weight:700;font-size:44px;color:var(--ink);}
.section-sub{font-size:16px;color:var(--gray);}

/* ============================================================
   软件作品 栏目（首页商品展示区）
   ============================================================ */
.works-section{display:flex;flex-direction:column;}
.works-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;margin-top:24px;}
.work-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:20px;border:2px solid var(--ink);border-radius:var(--radius);background:var(--white);box-shadow:var(--shadow);cursor:pointer;transition:transform .12s,box-shadow .12s;}
.work-card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);}
.work-pin{position:absolute;top:-1px;right:-1px;background:var(--red);color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border:2px solid var(--ink);}
.work-mark{width:40px;height:40px;border-radius:var(--radius);flex:0 0 auto;}
.work-name{font-family:var(--serif);font-weight:700;font-size:20px;color:var(--ink);line-height:1.2;}
.work-tag{font-size:13px;color:var(--gray);flex:1;}
.work-price{font-family:var(--serif);font-weight:700;font-size:18px;color:var(--ink);}

/* ============================================================
   DOCS (technical documentation)
   ============================================================ */
.docs-section{display:flex;flex-direction:column;}
.docs-layout{display:flex;gap:48px;align-items:flex-start;}
.docs-sidebar{width:260px;flex:0 0 auto;position:sticky;top:24px;}
.docs-sidebar-label{display:block;font-weight:700;font-size:12px;letter-spacing:1px;color:var(--gray);text-transform:uppercase;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--line);}
.docs-nav{display:flex;flex-direction:column;gap:4px;}
.docs-nav-link{display:block;padding:10px 12px;border-radius:var(--radius);font-size:14px;color:var(--ink);transition:background .12s,color .12s;}
.docs-nav-link:hover{background:#f0ede5;color:var(--red);}
.docs-nav-link.active{background:var(--ink);color:#fff;font-weight:700;}
.docs-content{flex:1;min-width:0;}
.docs-title{font-family:var(--serif);font-weight:700;font-size:36px;color:var(--ink);margin-bottom:28px;padding-bottom:16px;border-bottom:2px solid var(--ink);}
.docs-article{font-size:16px;line-height:28px;color:var(--ink);}
.docs-article h1,.docs-article h2,.docs-article h3,.docs-article h4{font-family:var(--serif);font-weight:700;color:var(--ink);margin-top:28px;margin-bottom:14px;}
.docs-article h1{font-size:28px;}
.docs-article h2{font-size:24px;}
.docs-article h3{font-size:20px;}
.docs-article p{margin-bottom:16px;color:var(--gray);}
.docs-article ul,.docs-article ol{margin-bottom:16px;padding-left:24px;color:var(--gray);}
.docs-article li{margin-bottom:8px;}
.docs-article code{font-family:"SF Mono",monospace;font-size:14px;background:#f0ede5;padding:2px 6px;border-radius:2px;color:var(--ink);}
.docs-article a{color:var(--red);text-decoration:underline;}
.docs-empty{padding:40px;border:2px dashed var(--line);color:var(--gray);text-align:center;border-radius:var(--radius);}

/* ============================================================
   FEEDBACK (意见 / 工单系统)
   ============================================================ */
.feedback-section{display:flex;flex-direction:column;gap:32px;max-width:760px;margin:0 auto;}
.card{background:var(--white);border:2px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;}
.feedback-form{display:flex;flex-direction:column;gap:14px;}
.field-label{font-weight:700;font-size:14px;color:var(--ink);}
.field-label .req{color:var(--red);}
.fb-textarea{width:100%;min-height:140px;resize:vertical;padding:14px;border:2px solid var(--line);border-radius:var(--radius);font-size:15px;font-family:inherit;color:var(--ink);background:var(--paper);}
.fb-textarea:focus,.fb-input:focus{outline:none;border-color:var(--ink);}
.fb-input{width:100%;padding:12px 14px;border:2px solid var(--line);border-radius:var(--radius);font-size:15px;font-family:inherit;color:var(--ink);background:var(--paper);}
.fb-actions{display:flex;align-items:center;gap:16px;margin-top:4px;}
.fb-hint{font-size:14px;color:var(--gray);}
.feedback-list{display:flex;flex-direction:column;gap:14px;}
.fb-list-head{display:flex;align-items:center;justify-content:space-between;}
.text-btn{background:none;border:none;color:var(--red);font-weight:700;font-size:14px;cursor:pointer;padding:0;}
.text-btn:hover{text-decoration:underline;}
.fb-empty{color:var(--gray);font-size:14px;margin:0;padding:8px 0;}
.fb-items{display:flex;flex-direction:column;gap:14px;}
.fb-item{border:1px solid var(--line);border-radius:var(--radius);padding:16px;background:var(--paper);}
.fb-item-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.fb-ticket{font-family:"SF Mono",monospace;font-weight:700;font-size:14px;color:var(--ink);}
.fb-status{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;border:1px solid var(--ink);color:var(--gray);}
.fb-status.done{background:var(--ink);color:#fff;border-color:var(--ink);}
.fb-content{margin:0 0 8px;color:var(--ink);font-size:15px;white-space:pre-wrap;word-break:break-word;}
.fb-time{font-size:12px;color:var(--gray);}

/* feedback replies (admin → submitter thread) */
.fb-replies{margin-top:12px;border-top:1px dashed var(--line);padding-top:12px;display:flex;flex-direction:column;gap:12px;}
.fb-reply{border-left:3px solid var(--red);padding:8px 0 8px 12px;background:rgba(192,57,43,0.04);border-radius:0 var(--radius) var(--radius) 0;}
.fb-reply-top{display:flex;align-items:center;gap:10px;margin-bottom:4px;}
.fb-reply-author{font-weight:700;font-size:13px;color:var(--red);}
.fb-reply-time{font-size:11px;color:var(--gray);}
.fb-reply-content{margin:0;font-size:14px;color:var(--ink);white-space:pre-wrap;word-break:break-word;}
.fb-attachments{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;}
.fb-att{border:1px solid var(--line);border-radius:var(--radius);max-width:160px;max-height:160px;object-fit:cover;cursor:zoom-in;transition:transform .15s;}
.fb-att:hover{transform:scale(1.02);}
.fb-att-link{display:inline-block;}

/* admin feedback — 邮件式收件箱 */
.fb-count{font-size:13px;color:var(--gray);margin-right:6px;}
.fb-inbox-wrap{display:flex;gap:16px;align-items:stretch;min-height:62vh;}
.fb-list-pane{width:380px;flex:0 0 auto;border:2px solid var(--line);border-radius:var(--radius);background:var(--paper);overflow:auto;max-height:72vh;box-shadow:4px 4px 0 var(--ink);}
.fb-list{display:flex;flex-direction:column;}
.fb-list-empty{padding:40px 16px;color:var(--gray);text-align:center;font-size:14px;}
.fb-row{padding:18px 20px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .12s,box-shadow .12s;display:flex;align-items:flex-start;gap:14px;}
.fb-row:hover{background:#f6f4ee;}
.fb-row.active{background:var(--ink);box-shadow:inset 4px 0 0 var(--red);}
.fb-row.active .fb-row-ticket,
.fb-row.active .fb-row-contact,
.fb-row.active .fb-row-snippet,
.fb-row.active .fb-row-time,
.fb-row.active .fb-row-tag{color:#fff;}
.fb-row.active .fb-row-status{background:#fff;}
.fb-row.active .fb-row-status.done{background:var(--gray);}
.fb-row-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:6px;}
.fb-row-title-line{display:flex;align-items:center;gap:10px;}
.fb-row-status{width:10px;height:10px;border-radius:999px;background:var(--red);flex:0 0 auto;box-shadow:0 0 0 2px rgba(192,57,43,0.15);}
.fb-row-status.done{background:var(--line);box-shadow:none;}
.fb-row-ticket{font-family:"SF Mono",monospace;font-weight:700;font-size:14px;color:var(--ink);}
.fb-row-time{margin-left:auto;font-size:11px;color:var(--gray);white-space:nowrap;}
.fb-row-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.fb-row-contact{font-size:13px;font-weight:700;color:var(--ink);}
.fb-row-tag{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;border:1px solid currentColor;}
.fb-row-tag.pending{color:var(--red);background:rgba(192,57,43,0.08);}
.fb-row-tag.done{color:var(--gray);background:var(--line);}
.fb-row-snippet{font-size:13px;color:var(--gray);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.fb-row-reply-badge{flex:0 0 auto;font-size:12px;color:var(--gray);background:#f4f1ea;border:1px solid var(--line);border-radius:var(--radius);padding:4px 8px;align-self:center;}
.fb-row.active .fb-row-reply-badge{background:rgba(255,255,255,0.12);color:#fff;border-color:rgba(255,255,255,0.3);}
.fb-detail-pane{flex:1;min-width:0;border:2px solid var(--line);border-radius:var(--radius);background:var(--paper);display:flex;flex-direction:column;max-height:72vh;overflow:hidden;box-shadow:4px 4px 0 var(--ink);}
.fb-detail-empty{margin:auto;color:var(--gray);text-align:center;font-size:14px;padding:40px;}
.fb-detail-head{padding:20px 24px;border-bottom:1px solid var(--line);background:var(--paper);}
.fb-detail-title-row{display:flex;align-items:center;gap:12px;}
.fb-detail-title-row .mono{font-size:18px;font-weight:700;}
.fb-detail-sub{margin-top:8px;font-size:13px;color:var(--gray);}
.fb-thread{flex:1;overflow:auto;padding:24px;display:flex;flex-direction:column;gap:20px;background:#fbfaf7;}
.fb-msg{border-radius:var(--radius);padding:14px 16px;max-width:85%;box-shadow:2px 2px 0 rgba(0,0,0,0.05);}
.fb-msg-user{align-self:flex-start;background:#fff;border:1px solid var(--line);border-left:4px solid var(--ink);}
.fb-msg-admin{align-self:flex-end;background:rgba(192,57,43,0.06);border:1px solid var(--line);border-right:4px solid var(--red);}
.fb-msg-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.fb-msg-author{font-weight:700;font-size:13px;color:var(--ink);}
.fb-msg-time{font-size:11px;color:var(--gray);}
.fb-msg-body{font-size:14px;color:var(--ink);white-space:pre-wrap;word-break:break-word;line-height:1.6;}
.fb-reply-atts{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;}
.fb-att-thumb{border:1px solid var(--line);border-radius:var(--radius);max-width:140px;max-height:140px;object-fit:cover;cursor:zoom-in;transition:transform .15s;}
.fb-att-thumb:hover{transform:scale(1.02);}
.fb-file{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink);text-decoration:none;border:1px solid var(--ink);border-radius:var(--radius);padding:6px 10px;background:var(--paper);transition:border-color .15s,color .15s;}
.fb-file:hover{border-color:var(--red);color:var(--red);}
.fb-file::before{content:"📎";}
/* compose reply */
.fb-compose{border-top:2px solid var(--line);padding:20px 24px;background:var(--paper);}
.fb-compose-head{font-weight:700;font-size:14px;color:var(--ink);margin-bottom:10px;}
.fb-compose-area{min-height:220px;font-size:15px;line-height:1.6;}
.fb-compose-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;}
.fb-attach-btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;color:var(--ink);border:1px solid var(--ink);border-radius:var(--radius);padding:7px 12px;background:var(--paper);transition:border-color .15s,color .15s;}
.fb-attach-btn:hover{border-color:var(--red);color:var(--red);}
.fb-file-input-hidden{display:none;}
.fb-compose-hint{font-size:12px;color:var(--gray);flex:1;}
.fb-compose-actions{display:flex;align-items:center;gap:10px;margin-left:auto;}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{padding:72px clamp(20px,8vw,120px) 40px;background:var(--paper);display:flex;flex-direction:column;}
.footer-top{width:100%;height:2px;background:var(--ink);}
.statement-wrap{display:flex;gap:20px;align-items:center;padding:40px 0 44px;}
.statement-bar{width:4px;height:92px;background:var(--red);flex:0 0 auto;}
.footer-statement{font-family:var(--serif);font-weight:700;font-size:52px;line-height:64px;color:var(--ink);}
.footer-cols{display:flex;justify-content:space-between;gap:48px;padding-top:8px;}
.footer-col{width:280px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;}
.footer-col.narrow{width:160px;}
.brand-word{font-family:var(--serif);font-weight:700;font-size:22px;color:var(--ink);}
.brand-tag{font-size:13px;color:var(--gray);}
.brand-note{font-size:12px;color:var(--gray);}
.col-heading{font-weight:700;font-size:13px;color:var(--ink);}
.col-heading.red{color:var(--red);}
.col-link{font-size:14px;color:var(--gray);transition:color .15s;cursor:pointer;}
.col-link:hover{color:var(--ink);}
.footer-bottom{display:flex;justify-content:space-between;align-items:flex-end;padding-top:28px;flex-wrap:wrap;gap:12px;}

.footer-bottom-left{display:flex;flex-direction:column;gap:6px;}
.footer-bottom-left .copyright{font-size:12px;color:var(--gray);}
.icp{display:inline-block;font-size:12px;color:var(--gray);text-decoration:none;transition:color .15s;}
.icp:hover{color:var(--red);text-decoration:underline;}
.maker-credit{font-weight:700;font-size:11px;letter-spacing:2px;color:var(--ink);}

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.crumbs{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--gray);margin-bottom:32px;}
.crumbs a:hover{color:var(--red);}
.pd{display:flex;gap:56px;align-items:flex-start;}
.pd-left{width:560px;display:flex;flex-direction:column;gap:24px;align-items:flex-start;}
.pd-mark{width:96px;height:96px;border-radius:var(--radius);}
.pd-name{font-family:var(--serif);font-weight:700;font-size:48px;line-height:1.1;color:var(--ink);}
.pd-tag{font-size:18px;color:var(--gray);}
.pd-price{font-family:var(--serif);font-weight:700;font-size:40px;color:var(--ink);}
.pd-price small{font-family:var(--sans);font-weight:400;font-size:16px;color:var(--gray);}
.pd-desc{font-size:16px;line-height:28px;color:var(--gray);}
.pd-meta{display:flex;flex-direction:column;gap:10px;width:100%;padding-top:8px;border-top:1px solid var(--line);}
.pd-meta-row{display:flex;justify-content:space-between;font-size:14px;}
.pd-meta-row span:first-child{color:var(--gray);}
.pd-right{width:480px;display:flex;flex-direction:column;gap:20px;}
.pd-panel{border:2px solid var(--ink);border-radius:var(--radius);background:var(--white);box-shadow:var(--shadow);padding:28px;display:flex;flex-direction:column;gap:18px;align-items:flex-start;}
.pd-features{display:flex;flex-direction:column;gap:14px;width:100%;}
.pd-feature{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:22px;color:var(--ink);}
.pd-bullet{width:8px;height:8px;background:var(--red);border-radius:1px;margin-top:7px;flex:0 0 auto;}
.pd-delivery{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:flex-start;gap:8px;}
.related{display:flex;gap:20px;margin-top:8px;}
.related-card{flex:1;display:flex;align-items:center;gap:12px;padding:14px;border:2px solid var(--ink);border-radius:var(--radius);background:var(--white);box-shadow:var(--shadow);cursor:pointer;transition:transform .12s,box-shadow .12s;}
.related-card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);}

/* ============================================================
   MEMBERSHIP PAGE
   ============================================================ */
.mem-hero{display:flex;flex-direction:column;gap:16px;align-items:flex-start;}
.mem-grid{display:flex;gap:24px;align-items:stretch;margin-top:8px;}
.mem-col{flex:1;display:flex;flex-direction:column;gap:16px;padding:32px;border:2px solid var(--ink);border-radius:var(--radius);background:var(--white);box-shadow:var(--shadow);}
.mem-col.featured{box-shadow:var(--shadow-red);}
.mem-badge{display:inline-flex;align-items:center;padding:5px 12px;border-radius:var(--radius);background:var(--red);color:#fff;font-weight:700;font-size:12px;}
.mem-name{font-family:var(--serif);font-weight:700;font-size:28px;color:var(--ink);}
.mem-price{font-family:var(--serif);font-weight:700;font-size:40px;color:var(--ink);line-height:1;}
.mem-price-sub{font-size:13px;color:var(--gray);}
.mem-benefits{font-size:14px;line-height:24px;color:var(--gray);white-space:pre-line;}
.mem-cta{display:inline-flex;align-items:center;justify-content:center;padding:14px 20px;border-radius:var(--radius);background:var(--ink);color:#fff;font-weight:700;font-size:16px;box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s;border:none;cursor:pointer;}
.mem-cta:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink);}
.mem-cta:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.mem-cta.outline{background:var(--white);color:var(--ink);border:2px solid var(--ink);}
.mem-cta.outline:hover{box-shadow:5px 5px 0 var(--ink);}
.mem-faq{display:flex;flex-direction:column;gap:18px;margin-top:8px;}
.faq-item{border-top:1px solid var(--line);padding-top:18px;}
.faq-q{font-family:var(--serif);font-weight:700;font-size:18px;color:var(--ink);margin-bottom:8px;}
.faq-a{font-size:15px;line-height:24px;color:var(--gray);}

/* ============================================================
   CHECKOUT
   ============================================================ */
.checkout{display:flex;gap:48px;align-items:flex-start;}
.co-left{flex:1;display:flex;flex-direction:column;gap:24px;}
.co-right{width:420px;display:flex;flex-direction:column;gap:0;}
.co-summary{border:2px solid var(--ink);border-radius:var(--radius);background:var(--white);box-shadow:var(--shadow);padding:28px;display:flex;flex-direction:column;gap:16px;}
.co-line{display:flex;justify-content:space-between;font-size:15px;padding-bottom:12px;border-bottom:1px solid var(--line);}
.co-line .name{color:var(--ink);font-weight:600;}
.co-line .price{font-family:var(--serif);font-weight:700;}
.co-total{display:flex;justify-content:space-between;font-size:18px;padding-top:6px;}
.co-total .price{font-family:var(--serif);font-weight:700;font-size:22px;}
.field{display:flex;flex-direction:column;gap:8px;}
.field label{font-size:13px;font-weight:700;color:var(--ink);}
.field input,.field select{height:46px;padding:0 14px;border:2px solid var(--ink);border-radius:var(--radius);background:var(--white);font-family:var(--sans);font-size:15px;color:var(--ink);}
.field input:focus,.field select:focus{outline:none;box-shadow:var(--shadow);}
.pay-methods{display:flex;flex-direction:column;gap:12px;}
.pay-method{display:flex;align-items:center;gap:12px;padding:14px 16px;border:2px solid var(--ink);border-radius:var(--radius);background:var(--white);cursor:pointer;transition:box-shadow .12s,transform .12s;}
.pay-method.active{box-shadow:var(--shadow);transform:translate(-1px,-1px);}
.pay-method .dot{width:16px;height:16px;border:2px solid var(--ink);border-radius:50%;flex:0 0 auto;position:relative;}
.pay-method.active .dot::after{content:"";position:absolute;inset:3px;background:var(--red);border-radius:50%;}
.pay-method .pm-name{font-weight:700;font-size:15px;}
.co-success{border:2px solid var(--ink);border-radius:var(--radius);background:var(--white);box-shadow:var(--shadow-red);padding:40px;display:flex;flex-direction:column;gap:20px;align-items:flex-start;}
.co-success h2{font-family:var(--serif);font-weight:700;font-size:32px;color:var(--ink);}
.license-box{border:2px dashed var(--ink);border-radius:var(--radius);padding:16px;width:100%;background:var(--paper);}
.license-key{font-family:var(--serif);font-weight:700;font-size:18px;letter-spacing:1px;color:var(--ink);word-break:break-all;}
.dl-link{display:inline-flex;align-items:center;justify-content:center;padding:12px 22px;border:2px solid var(--ink);border-radius:var(--radius);background:var(--ink);color:#fff;font-weight:700;box-shadow:var(--shadow);}

/* ============================================================
   ACCOUNT
   ============================================================ */
.acc-head{display:flex;flex-direction:column;gap:8px;margin-bottom:32px;}
.acc-name{font-family:var(--serif);font-weight:700;font-size:40px;color:var(--ink);}
.acc-email{font-size:15px;color:var(--gray);}
.acc-logout{margin-top:4px;align-self:flex-start;border:2px solid var(--ink);background:var(--white);color:var(--ink);font-size:13px;padding:7px 16px;border-radius:var(--radius);cursor:pointer;font-family:var(--sans);transition:background .15s,color .15s;}
.acc-logout:hover{background:var(--ink);color:var(--white);}
.acc-grid{display:flex;gap:24px;align-items:flex-start;}
.acc-col{flex:1;display:flex;flex-direction:column;gap:16px;}
.acc-card{border:2px solid var(--ink);border-radius:var(--radius);background:var(--white);box-shadow:var(--shadow);padding:24px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
.acc-card .row{display:flex;justify-content:space-between;width:100%;font-size:14px;}
.acc-card .row .k{color:var(--gray);}
.status-pill{display:inline-flex;align-items:center;padding:4px 12px;border-radius:10px;font-size:12px;font-weight:700;}
.status-pill.on{background:var(--ink);color:#fff;}
.status-pill.off{background:var(--line);color:var(--ink);}

/* ============================================================
   AUTH MODAL (register / login)
   ============================================================ */
.auth-overlay{position:fixed;inset:0;background:rgba(26,26,26,.5);display:flex;align-items:center;justify-content:center;z-index:300;}
.auth-modal{position:relative;width:440px;max-width:92vw;background:var(--paper);border:2px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-red);padding:32px;display:flex;flex-direction:column;gap:18px;}
.auth-close{position:absolute;top:14px;right:16px;font-size:22px;line-height:1;color:var(--ink);background:none;cursor:pointer;}
.auth-close:hover{color:var(--red);}
.auth-title{font-family:var(--serif);font-weight:700;font-size:28px;color:var(--ink);margin-top:-6px;}
.auth-tabs{display:flex;gap:0;border:2px solid var(--ink);border-radius:var(--radius);overflow:hidden;}
.auth-tab{flex:1;padding:10px 0;font-weight:700;font-size:14px;background:var(--paper);color:var(--ink);border:none;cursor:pointer;transition:background .12s,color .12s;}
.auth-tab.active{background:var(--ink);color:#fff;}
.auth-form{display:flex;flex-direction:column;gap:16px;}
.auth-submit{width:100%;margin-top:2px;}
.auth-hint{font-size:12px;color:var(--gray);line-height:18px;}

/* ============================================================
   PAYMENT MODAL — scan-to-pay QR (支付宝当面付 / 微信扫码)
   ============================================================ */
.pay-overlay{position:fixed;inset:0;background:rgba(26,26,26,.5);display:flex;align-items:center;justify-content:center;z-index:320;}
.pay-modal{position:relative;width:360px;max-width:92vw;background:var(--paper);border:2px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-red);padding:32px;display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center;}
.pay-qr{width:240px;height:240px;border:2px solid var(--ink);border-radius:var(--radius);background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.pay-qr-img{width:100%;height:100%;display:block;}
.pay-qr-text{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:12px;font-size:12px;color:var(--gray);word-break:break-all;}
.pay-status{font-size:14px;color:var(--ink);font-weight:700;}
.pay-modal .auth-submit{margin-top:2px;}

/* ============================================================
   MEMBERSHIP RECHARGE (join) PAGE
   ============================================================ */
.join-wrap{display:flex;gap:40px;align-items:stretch;margin-top:8px;flex-wrap:wrap;}
.join-plan{flex:1;min-width:320px;display:flex;flex-direction:column;gap:14px;padding:32px;border:2px solid var(--ink);border-radius:var(--radius);background:var(--white);box-shadow:var(--shadow);}
.join-pay{width:420px;display:flex;flex-direction:column;gap:20px;}
.join-email{font-size:13px;color:var(--ink);padding:10px 14px;border:2px dashed var(--ink);border-radius:var(--radius);background:var(--paper);}
.join-email:empty{display:none;}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-section{display:flex;flex-direction:column;}
.contact-grid{display:grid;grid-template-columns:320px 1fr;gap:24px;margin-top:8px;align-items:start;}
.contact-info{padding:28px;display:flex;flex-direction:column;gap:20px;}
.contact-info-row{display:flex;flex-direction:column;gap:6px;align-items:flex-start;}
.contact-info-label{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--gray);}
.contact-info-value{font-family:var(--serif);font-weight:700;font-size:18px;color:var(--ink);transition:color .15s;}
.contact-info-value:hover{color:var(--red);}
.contact-socials{display:flex;flex-direction:column;gap:8px;align-items:flex-start;}
.contact-form{padding:28px;}
.contact-form .form-row{margin-bottom:0;}
.contact-form .fb-actions{margin-top:4px;}
.contact-form .btn-primary:disabled{opacity:.6;cursor:default;}

/* ============================================================
   BLOG (博客 / 开发笔记)
   ============================================================ */
.blog-section{display:flex;flex-direction:column;}
.blog-banner{
  display:flex;flex-direction:column;gap:14px;
  padding:64px 0 48px;
  border-bottom:2px solid var(--ink);
  margin-bottom:48px;
}
.blog-banner-title{
  font-family:var(--serif);font-weight:700;font-size:52px;line-height:1.1;color:var(--ink);
  max-width:760px;
}
.blog-banner-sub{font-size:17px;line-height:28px;color:var(--gray);max-width:620px;}
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.blog-card{
  display:flex;flex-direction:column;
  border:2px solid var(--ink);border-radius:var(--radius);
  background:var(--white);box-shadow:var(--shadow);
  overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .12s,box-shadow .12s;
}
.blog-card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);}
.blog-cover{
  height:180px;background-size:cover;background-position:center;background-color:#efece4;
  border-bottom:2px solid var(--ink);
}
.blog-cover--empty{
  display:flex;align-items:center;justify-content:center;
  background:var(--ink);
}
.blog-cover--empty span{
  font-family:var(--serif);font-weight:700;font-size:72px;color:var(--paper);line-height:1;
}
.blog-card-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1;}
.blog-card-title{font-family:var(--serif);font-weight:700;font-size:21px;line-height:1.3;color:var(--ink);margin:0;}
.blog-card-excerpt{font-size:14px;line-height:23px;color:var(--gray);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.blog-card-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--gray);margin-top:auto;}
.blog-dot{color:var(--line);}
.blog-tags{display:flex;flex-wrap:wrap;gap:6px;}
.blog-tag{
  font-size:11px;padding:3px 9px;border:1px solid var(--line);border-radius:999px;
  color:var(--gray);background:var(--paper);
}
.blog-empty{
  grid-column:1/-1;padding:48px;text-align:center;
  border:2px dashed var(--line);border-radius:var(--radius);color:var(--gray);font-size:15px;
}
.blog-back{
  display:inline-block;margin-bottom:24px;font-size:14px;font-weight:700;color:var(--red);
  text-decoration:none;
}
.blog-back:hover{text-decoration:underline;}
.blog-detail{max-width:760px;margin:0 auto;width:100%;}
.blog-detail-title{font-family:var(--serif);font-weight:700;font-size:40px;line-height:1.2;color:var(--ink);margin:10px 0 14px;}
.blog-detail-meta{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gray);margin-bottom:28px;}
.blog-detail-cover{
  height:320px;background-size:cover;background-position:center;background-color:#efece4;
  border:2px solid var(--ink);border-radius:var(--radius);margin-bottom:28px;
}
.blog-article{font-size:16px;line-height:29px;color:var(--ink);}
.blog-article h1,.blog-article h2,.blog-article h3,.blog-article h4{
  font-family:var(--serif);font-weight:700;color:var(--ink);margin-top:30px;margin-bottom:14px;
}
.blog-article h1{font-size:30px;}.blog-article h2{font-size:26px;}.blog-article h3{font-size:22px;}.blog-article h4{font-size:19px;}
.blog-article p{margin:0 0 16px;}
.blog-article ul{margin:0 0 16px;padding-left:22px;list-style:disc;}
.blog-article li{margin-bottom:6px;}
.blog-article code{font-family:monospace;background:#f0ede5;padding:2px 6px;border-radius:4px;font-size:14px;}
.blog-article a{color:var(--red);text-decoration:underline;}
.blog-article blockquote{
  margin:0 0 16px;padding:12px 18px;border-left:3px solid var(--red);
  background:#faf7f1;color:var(--gray);font-style:italic;
}

/* ============================================================
   RESPONSIVE — H5 / 移动端适配
   断点：>820 桌面（含顶部导航）；≤820 启用汉堡抽屉菜单；≤640 字号/间距压缩
   仅新增适配规则，桌面样式与其他区块保持不变。
   ============================================================ */
html,body{overflow-x:clip;}
body.no-scroll{overflow:hidden;}

/* 汉堡按钮：桌面隐藏，移动端显示（44px 触控区） */
.nav-toggle{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:2px solid var(--ink);border-radius:var(--radius);background:var(--white);box-shadow:var(--shadow);}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);transition:transform .2s,opacity .2s;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* 移动端抽屉菜单（右侧滑入） */
.nav-drawer{position:fixed;inset:0;z-index:400;visibility:hidden;pointer-events:none;}
.nav-drawer.open{visibility:visible;pointer-events:auto;}
.nav-drawer-backdrop{position:absolute;inset:0;background:rgba(26,26,26,.45);opacity:0;transition:opacity .25s;}
.nav-drawer.open .nav-drawer-backdrop{opacity:1;}
.nav-drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(82vw,340px);background:var(--paper);border-left:2px solid var(--ink);box-shadow:-6px 0 0 rgba(0,0,0,.06);transform:translateX(100%);transition:transform .28s ease;display:flex;flex-direction:column;padding:20px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.nav-drawer.open .nav-drawer-panel{transform:translateX(0);}
.nav-drawer-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:2px solid var(--ink);}
.nav-drawer-close{font-size:26px;line-height:1;color:var(--ink);background:none;cursor:pointer;}
.nav-drawer-close:hover{color:var(--red);}
.nav-drawer-nav{display:flex;flex-direction:column;margin-top:8px;}
.nav-drawer-nav a{font-family:var(--serif);font-weight:700;font-size:19px;color:var(--ink);padding:16px 4px;border-bottom:1px solid var(--line);transition:color .15s;}
.nav-drawer-nav a:hover,.nav-drawer-nav a.active{color:var(--red);}
.nav-drawer-cta{margin-top:24px;align-self:stretch;justify-content:center;}

@media (max-width:1100px){
  .hero-inner,.pd,.checkout,.mem-grid,.acc-grid,.related,.docs-layout{flex-direction:column;}
  .hero-left,.pd-left,.pd-right,.co-right,.docs-sidebar,.docs-content{width:100%;}
  .docs-sidebar{position:static;}
  .fb-inbox-wrap{flex-direction:column;min-height:0;}
  .fb-list-pane{width:100%;max-height:280px;box-shadow:none;}
  .fb-detail-pane{max-height:none;overflow:visible;box-shadow:none;}
  .contact-grid{grid-template-columns:1fr;}
  .fb-compose-foot{flex-direction:column;align-items:flex-start;}
  .fb-compose-actions{margin-left:0;width:100%;justify-content:flex-end;}
  .blog-grid{grid-template-columns:1fr 1fr;}
}

/* 平板 / 手机：切到汉堡抽屉 + 页脚堆叠 + 文档侧栏横滑 */
@media (max-width:820px){
  .nav{display:none;}
  .header-cta{display:none;}
  .nav-toggle{display:inline-flex;}
  .header-row{height:60px;padding-top:env(safe-area-inset-top);}

  .footer-cols{flex-direction:column;gap:28px;}
  .footer-col,.footer-col.narrow{width:100%;}
  .footer-bottom{flex-direction:column;gap:12px;align-items:flex-start;}

  .docs-sidebar{position:static;width:100%;margin-bottom:24px;}
  .docs-nav{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:8px;-webkit-overflow-scrolling:touch;}
  .docs-nav-link{white-space:nowrap;border:1px solid var(--line);}
  .docs-nav-link.active{background:var(--ink);}

  .works-grid{grid-template-columns:1fr;}

  .mem-col,.pd-panel,.acc-card,.co-summary{padding:22px;}
  .join-plan{min-width:0;}
  .join-pay{width:100%;}
}

@media (max-width:640px){
  .hero-headline{font-size:34px;line-height:42px;}
  .section-title{font-size:28px;}
  .section{padding:48px 18px 56px;}
  .hero{padding:44px 18px 52px;}
  .footer{padding:44px 18px 32px;}
  .blog-banner{padding:40px 0 32px;margin-bottom:32px;}
  .blog-banner-title{font-size:34px;}
  .blog-grid{grid-template-columns:1fr;}
  .blog-cover{height:160px;}
  .blog-detail-title{font-size:28px;}
  .blog-detail-cover{height:200px;}
  .blog-detail{max-width:100%;}
  .pd-name{font-size:30px;}
  .pd-mark{width:76px;height:76px;}
  .footer-statement{font-size:30px;line-height:40px;}
  .logo-word{font-size:20px;}
  .nav-drawer-panel{width:86vw;padding-top:calc(20px + env(safe-area-inset-top));}
  .section-sub{font-size:15px;}
  .docs-title{font-size:28px;}
  .pd-price{font-size:32px;}
  .mem-price{font-size:32px;}
  .auth-modal,.pay-modal{padding:24px;}
  .hero-ctas{flex-direction:column;align-items:stretch;}
  .hero-ctas .btn-primary,.hero-ctas .btn-secondary{width:100%;}
  .fb-actions{flex-direction:column;align-items:stretch;}
  .fb-actions .btn-primary{width:100%;}
  .fb-compose-actions .btn-primary{width:100%;}
}

/* 触摸设备：去除点击高亮，按钮更易点 */
@media (hover:none){
  a,button{-webkit-tap-highlight-color:transparent;}
}