/* ============================================================
   问画网 · 设计系统 (v2)
   墨/笺/沙/金/朱 品牌令牌 · 8pt 栅格 · 艺术家居电商质感
   ============================================================ */
:root{
  --ink:        #1A1714;   /* 墨 · 主文字 */
  --ink-2:      #4A443E;   /* 次级文字 */
  --ink-3:      #8A8077;   /* 辅助文字 */
  --paper:      #FBF9F5;   /* 笺 · 背景 */
  --paper-2:    #FFFFFF;   /* 卡片 */
  --sand:       #F1ECE3;   /* 沙 · 分区底 */
  --line:       #E7E0D5;   /* 描边 */
  --gold:       #B08D57;   /* 金 */
  --gold-deep:  #8C6E3F;
  --vermilion:  #B23A2E;   /* 朱 */
  --vermilion-d:#8A2A20;
  --ok:         #3F7A52;
  --warn:       #B5862F;
  --shadow:     0 1px 2px rgba(26,23,20,.04), 0 8px 24px rgba(26,23,20,.06);
  --shadow-lg:  0 4px 12px rgba(26,23,20,.08), 0 18px 48px rgba(26,23,20,.10);
  --r:          12px;
  --r-lg:       18px;
  --maxw:       1180px;
  --serif:      "Songti SC","Source Han Serif SC","Noto Serif SC",Georgia,serif;
  --sans:       "PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; letter-spacing:.01em; line-height:1.25; color:var(--ink)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.view{min-height:62vh; padding:32px 0 64px}

/* ---------- 导航 ---------- */
.nav{position:sticky; top:0; z-index:40; background:rgba(251,249,245,.92);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; gap:28px; height:64px}
.brand{display:flex; align-items:center; gap:10px; font-weight:600}
.brand .seal{display:inline-grid; place-items:center; width:34px; height:34px; border-radius:8px;
  background:var(--vermilion); color:#fff; font-family:var(--serif); font-size:18px; box-shadow:var(--shadow)}
.brand img{border-radius:7px; box-shadow:var(--shadow)}
.brand-txt{font-family:var(--serif); font-size:20px; letter-spacing:.04em}
.brand-txt i{font-style:normal; font-family:var(--sans); font-size:11px; color:var(--ink-3); margin-left:4px; letter-spacing:.12em}
.menu{display:flex; gap:22px; margin-left:8px}
.menu a{color:var(--ink-2); font-size:14.5px; padding:6px 2px; position:relative; transition:color .2s}
.menu a:hover{color:var(--ink)}
.menu a.active{color:var(--ink)}
.menu a.active::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--gold)}
.auth{margin-left:auto; display:flex; align-items:center; gap:10px}
.auth .who{font-size:13.5px; color:var(--ink-2)}
.auth .role{display:inline-block; font-size:11px; color:var(--gold-deep); border:1px solid var(--gold); border-radius:99px; padding:1px 8px; margin-left:6px}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; cursor:pointer;
  font-family:var(--sans); font-size:14.5px; font-weight:600; padding:11px 22px; border-radius:10px;
  transition:transform .12s ease, box-shadow .2s, background .2s, color .2s; white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--ink); color:#fff}
.btn--primary:hover{background:#000; box-shadow:var(--shadow)}
.btn--gold{background:var(--gold); color:#fff}
.btn--gold:hover{background:var(--gold-deep)}
.btn--ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
.btn--ghost:hover{border-color:var(--ink); background:var(--paper-2)}
.btn--sm{padding:7px 14px; font-size:13px; border-radius:8px}
.btn--block{width:100%}
.btn--danger{background:transparent; color:var(--vermilion); border:1px solid var(--vermilion)}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* ---------- 通用区块 ---------- */
.section{margin:40px 0}
.section-title{font-family:var(--serif); font-size:22px; margin:0 0 16px; display:flex; align-items:baseline; gap:10px}
.section-title small{font-family:var(--sans); font-size:13px; color:var(--ink-3); font-weight:400}
.lead{color:var(--ink-2); font-size:15.5px; max-width:60ch}
.muted{color:var(--ink-3)}
.empty{color:var(--ink-3); padding:32px; text-align:center; background:var(--sand); border-radius:var(--r)}
.price{color:var(--vermilion-deep); font-weight:600}

/* ---------- 首页 Hero ---------- */
.hero{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding:54px 0 30px}
.hero h1{font-size:44px; line-height:1.2; margin:0 0 18px}
.hero h1 em{font-style:normal; color:var(--gold-deep)}
.hero p{font-size:16.5px; color:var(--ink-2); max-width:46ch; margin:0 0 26px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.hero-art{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); background:var(--sand); aspect-ratio:4/3}
.hero-art img{width:100%; height:100%; object-fit:cover}
.stats{display:flex; gap:40px; margin-top:34px; flex-wrap:wrap}
.stats .n{font-family:var(--serif); font-size:30px; color:var(--ink)}
.stats .l{font-size:13px; color:var(--ink-3)}

/* ---------- 卡片网格 / 作品卡 ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:22px}
.card{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  transition:transform .18s ease, box-shadow .18s; display:flex; flex-direction:column}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.card .thumb{position:relative; aspect-ratio:1/1; background:var(--sand); cursor:pointer; overflow:hidden}
.card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .4s}
.card:hover .thumb img{transform:scale(1.04)}
.card .fav{position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:99px; border:none;
  background:rgba(255,255,255,.86); cursor:pointer; font-size:16px; display:grid; place-items:center; color:var(--ink-3); box-shadow:var(--shadow)}
.card .fav.on{color:var(--vermilion); background:#fff}
.card .badge{position:absolute; top:10px; left:10px; font-size:11px; padding:3px 9px; border-radius:99px; background:var(--ink); color:#fff}
.card .badge.app{background:vargold; background:var(--gold); color:#fff}
.card .body{padding:14px 15px 16px; display:flex; flex-direction:column; gap:6px; flex:1}
.card .title{font-family:var(--serif); font-size:16.5px; font-weight:600; cursor:pointer}
.card .meta{font-size:12.5px; color:var(--ink-3)}
.card .tagline{display:flex; gap:6px; flex-wrap:wrap; margin-top:2px}
.card .price-row{margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding-top:8px}
.card .price{font-size:17px}
.chip{font-size:11px; color:var(--ink-2); background:var(--sand); border:1px solid var(--line); border-radius:99px; padding:2px 9px}

/* ---------- 测评 ---------- */
.assess{display:grid; grid-template-columns:340px 1fr; gap:28px; align-items:start}
.assess-form{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; position:sticky; top:84px}
.field{margin-bottom:18px}
.field>label{display:block; font-size:13px; color:var(--ink-2); margin-bottom:8px; font-weight:600}
.row-inline{display:flex; align-items:center; gap:10px}
input[type=text],input[type=number],input[type=email],input[type=password],input[type=tel],select,textarea{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px; background:var(--paper);
  font-family:var(--sans); font-size:14.5px; color:var(--ink); transition:border-color .2s, box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(176,141,87,.15)}
.pills{display:flex; flex-wrap:wrap; gap:8px}
.pill{border:1px solid var(--line); background:var(--paper); color:var(--ink-2); padding:8px 14px; border-radius:99px;
  cursor:pointer; font-size:13.5px; transition:all .18s}
.pill[aria-pressed=true]{background:var(--ink); color:#fff; border-color:var(--ink)}
.pill .cnt{font-style:normal; margin-left:6px; font-size:11.5px; opacity:.6}
.seg{display:flex; gap:8px; flex-wrap:wrap}

/* 推荐方案卡 */
.reco-plan{background:linear-gradient(180deg,#fff,var(--paper)); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:22px; margin-bottom:24px; box-shadow:var(--shadow)}
.reco-plan h3{margin:0 0 4px}
.reco-plan .rp-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-top:16px}
.reco-plan .rp-item{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r); padding:14px}
.reco-plan .rp-item .k{font-size:12px; color:var(--ink-3)}
.reco-plan .rp-item .v{font-size:16px; font-weight:600; margin-top:2px}
.reco-plan .rp-budget{color:var(--vermilion-deep); font-weight:700}

/* 匹配作品行 */
.pick{display:flex; gap:14px; align-items:center; background:var(--paper-2); border:1px solid var(--line);
  border-radius:var(--r); padding:12px; margin-bottom:10px}
.pick .pimg{width:64px; height:64px; border-radius:8px; object-fit:cover; background:var(--sand); flex:none}
.pick .pinfo{flex:1; min-width:0}
.pick .ptitle{font-family:var(--serif); font-size:15px; font-weight:600}
.scorebar{height:6px; border-radius:99px; background:var(--sand); overflow:hidden; margin-top:6px}
.scorebar i{display:block; height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-deep))}
.pick .score-num{font-size:12px; color:var(--ink-3); margin-top:3px}
.pick .preasons{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px}
.pick-act{display:flex; flex-direction:column; gap:8px; align-items:flex-end}

/* ---------- 作品详情弹层 ---------- */
.modal{position:fixed; inset:0; z-index:60; background:rgba(26,23,20,.5); display:flex; align-items:center;
  justify-content:center; padding:24px; overflow:auto}
.modal[hidden]{display:none}
.modal-box{background:var(--paper); border-radius:var(--r-lg); max-width:920px; width:100%; max-height:92vh; overflow:auto; box-shadow:var(--shadow-lg)}
.modal-box--lg{max-width:980px}
.modal-x{position:absolute; top:18px; right:22px; border:none; background:transparent; font-size:26px; color:var(--ink-3); cursor:pointer; line-height:1}
.work-detail{display:grid; grid-template-columns:1fr 1fr; gap:0}
.work-detail .wimg{background:var(--sand); min-height:420px}
.work-detail .wimg img{width:100%; height:100%; object-fit:cover}
.work-detail .winfo{padding:30px 32px}
.winfo h2{margin:0 0 4px; font-size:26px}
.winfo .wauthor{color:var(--ink-3); font-size:13.5px; margin-bottom:18px}
.six{display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; margin:16px 0; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.six div{font-size:13.5px}
.six b{color:var(--ink-3); font-weight:500; margin-right:6px}
.fr{margin:18px 0}
.fr h4{margin:0 0 10px; font-size:15px}
.fr-views{display:flex; gap:14px; flex-wrap:wrap}
.fr-view{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r); padding:12px; text-align:center; flex:1; min-width:160px}
.fr-view svg{width:100%; height:140px}
.fr-view .cap{font-size:12px; color:var(--ink-3); margin-top:6px}
.pkg{display:flex; gap:10px; flex-wrap:wrap; margin:12px 0}
.pkg .opt{flex:1; min-width:130px; border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; cursor:pointer; transition:all .18s}
.pkg .opt[aria-checked=true]{border-color:var(--gold); box-shadow:0 0 0 3px rgba(176,141,87,.15)}
.pkg .opt .pn{font-weight:600; font-family:var(--serif)}
.pkg .opt .pf{color:var(--vermilion-deep); font-weight:600}

/* ---------- 合规页 / 通用文章 ---------- */
.doc{max-width:820px; margin:0 auto}
.doc h1{font-size:30px; margin-bottom:6px}
.doc .doc-meta{color:var(--ink-3); font-size:13px; margin-bottom:24px}
.doc h2{font-size:20px; margin:30px 0 10px; padding-left:12px; border-left:3px solid var(--gold)}
.doc p,.doc li{color:var(--ink-2); line-height:1.9}
.doc ul{padding-left:20px}
.flow{display:grid; grid-template-columns:repeat(7,1fr); gap:10px; margin:24px 0; counter-reset:step}
.flow .step{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r); padding:14px 12px; text-align:center; position:relative}
.flow .step .num{width:26px; height:26px; border-radius:99px; background:var(--gold); color:#fff; display:grid; place-items:center; font-size:13px; margin:0 auto 8px; font-weight:600}
.flow .step .t{font-size:13px; font-weight:600}
.flow .step .d{font-size:11px; color:var(--ink-3); margin-top:4px}
@media(max-width:880px){.flow{grid-template-columns:repeat(2,1fr)}}

/* ---------- 关于 ---------- */
.about-hero{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding:40px 0}
.about-hero h1{font-size:38px}
.transfer{background:var(--sand); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px 24px; margin-top:24px; display:flex; align-items:center; gap:18px; justify-content:space-between; flex-wrap:wrap}
.transfer h3{margin:0; font-size:18px}
.feat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:22px}
.feat{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px}
.feat .ic{font-size:22px}
.feat h3{font-size:16px; margin:10px 0 6px}
.feat p{font-size:13.5px; color:var(--ink-2); margin:0}

/* ---------- 支付 / 订单 ---------- */
.pay-box{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; max-width:520px; margin:20px auto}
.pay-amt{font-family:var(--serif); font-size:34px; color:var(--vermilion-deep); text-align:center; margin:10px 0}
.pay-methods{display:flex; gap:10px; margin:16px 0}
.pay-methods .pm{flex:1; border:1px solid var(--line); border-radius:var(--r); padding:12px; text-align:center; cursor:pointer}
.pay-methods .pm[aria-checked=true]{border-color:var(--gold); box-shadow:0 0 0 3px rgba(176,141,87,.15)}
.order{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; margin-bottom:16px}
.order-head{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:12px}
.order-no{font-family:var(--serif); font-weight:600}
.status{font-size:12.5px; padding:3px 12px; border-radius:99px; background:var(--sand); color:var(--ink-2); border:1px solid var(--line)}
.status.s-待付款{color:var(--warn); border-color:var(--warn)}
.status.s-支付中{color:var(--warn); border-color:var(--warn); background:rgba(214,158,46,.08)}
.status.s-待认领{color:var(--warn); border-color:var(--warn); background:rgba(214,158,46,.08)}
.status.s-待付定金{color:var(--warn); border-color:var(--warn)}
.status.s-待确认{color:var(--gold-deep); border-color:var(--gold); background:rgba(176,141,87,.08)}
.status.s-配送中{color:var(--ok); border-color:var(--ok)}
.status.s-已付款,.status.s-制作中{color:var(--gold-deep); border-color:var(--gold)}
.status.s-已发货,.status.s-已完成{color:var(--ok); border-color:var(--ok)}
.status.s-已取消,.status.s-已退款{color:var(--ink-3)}
.order-item{display:flex; gap:12px; padding:8px 0; align-items:center}
.order-item img{width:52px; height:52px; border-radius:8px; object-fit:cover; background:var(--sand)}
.timeline{margin:14px 0 4px; border-left:2px solid var(--line); padding-left:18px}
.timeline .tl{position:relative; padding:6px 0 14px; font-size:13.5px}
.timeline .tl::before{content:""; position:absolute; left:-25px; top:10px; width:11px; height:11px; border-radius:99px; background:var(--sand); border:2px solid var(--line)}
.timeline .tl.done::before{background:var(--ok); border-color:var(--ok)}
.timeline .tl .ts{color:var(--ink-3); font-size:12px}

/* ---------- 购物车 ---------- */
.cart-item{display:flex; gap:14px; align-items:center; padding:14px; border:1px solid var(--line); border-radius:var(--r); margin-bottom:12px; background:var(--paper-2)}
.cart-item img{width:70px; height:70px; border-radius:8px; object-fit:cover; background:var(--sand)}
.cart-summary{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; position:sticky; top:84px}
.cart-summary .row{display:flex; justify-content:space-between; padding:6px 0; font-size:14px}
.cart-summary .row.total{border-top:1px solid var(--line); margin-top:8px; padding-top:12px; font-weight:700; font-size:17px}

/* ---------- 顶部购物车按钮 ---------- */
.cart-area{display:flex; align-items:center; margin-right:4px}
.cart-btn{position:relative; display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 14px;
  border-radius:10px; border:1px solid var(--line); background:var(--paper-2); color:var(--ink-2); cursor:pointer;
  font-size:14px; text-decoration:none; transition:all .18s}
.cart-btn .cart-ic{font-size:17px; line-height:1}
.cart-btn .cart-txt{font-weight:600; letter-spacing:.5px}
.cart-btn:hover{border-color:var(--gold); color:var(--ink)}
.cart-btn.has{border-color:var(--gold); background:var(--sand)}
.cart-count{position:absolute; top:-7px; right:-7px; min-width:19px; height:19px; padding:0 5px; border-radius:99px;
  background:var(--vermilion); color:#fff; font-size:11px; font-family:var(--sans); display:grid; place-items:center; box-shadow:0 0 0 2px var(--paper)}
.cart-count.hide{display:none}
.cart-empty{text-align:center; padding:60px 0; color:var(--ink-3)}
.cart-empty a{color:var(--gold-deep); font-weight:600}

/* ---------- 购物车悬浮结算条 ---------- */
.cart-bar{position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; align-items:center; justify-content:center; gap:16px;
  background:var(--ink); color:#ECE6DC; padding:11px 18px; font-size:14px; box-shadow:0 -6px 24px rgba(17,13,15,.18)}
.cart-bar b{color:#E8CFA3; font-family:var(--serif)}
.cart-bar .btn--sm{padding:8px 18px}

/* ---------- 加入购物车确认弹层 ---------- */
.modal-box--cart{max-width:400px; width:calc(100% - 40px); padding:26px 24px}
.cc-item{display:flex; gap:14px; align-items:center; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r); padding:12px}
.cc-item img{width:64px; height:64px; object-fit:cover; border-radius:8px; background:var(--sand)}
.cc-item b{font-family:var(--serif); font-size:15px}
.cc-sum{margin:14px 0 4px; font-size:14px; text-align:center}
.cc-btns{display:flex; gap:10px; margin-top:14px}
.cc-btns .btn{flex:1}

/* ---------- 支付方式选择 ---------- */
.pay-methods-sel{display:flex; flex-direction:column; gap:12px; margin:6px 0 4px}
.pm-opt{display:flex; gap:12px; align-items:flex-start; border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; cursor:pointer; transition:all .18s; background:var(--paper-2)}
.pm-opt:hover{border-color:var(--gold)}
.pm-opt:has(input:checked){border-color:var(--gold); box-shadow:0 0 0 3px rgba(176,141,87,.15)}
.pm-opt input{margin-top:4px; accent-color:var(--gold)}
.pm-opt b{font-family:var(--serif); font-size:15.5px}
.pm-opt .muted{display:block; font-size:12.5px; margin-top:3px; line-height:1.7}
.pay-note{background:var(--sand); border:1px dashed var(--gold); border-radius:var(--r); padding:14px 16px; font-size:13.5px; color:var(--ink-2); line-height:1.85; margin-top:6px}
.pay-note b{color:var(--vermilion-deep)}
.pay-ok{text-align:center; padding:8px 0}
.pay-ok .pm-ic{font-size:40px}
.pay-ok h3{margin:8px 0 4px}
.pay-ok .muted{font-size:13.5px}

/* ---------- 整页支付页 ---------- */
.pay-page{max-width:520px; margin:24px auto; padding:28px 26px}
.pay-page .btn--lg{padding:14px 22px; font-size:16.5px}
.pay-steps{display:flex; justify-content:center; gap:4px; flex-wrap:wrap; font-size:11.5px; color:var(--ink-3); margin-bottom:14px}
.pay-steps span{padding:4px 9px; border-radius:99px; background:var(--paper-2); border:1px solid var(--line)}
.pay-steps span.on{background:var(--sand); border-color:var(--gold); color:var(--ink); font-weight:600}
.pay-breakdown{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r); padding:6px 14px; margin:16px 0 18px}
.pay-breakdown .row{display:flex; justify-content:space-between; padding:9px 0; font-size:14px; border-bottom:1px dashed var(--line)}
.pay-breakdown .row:last-child{border-bottom:none}
.pay-breakdown .price{color:var(--vermilion-deep)}

/* ---------- 模拟收银台（沙箱，扮演支付网关） ---------- */
.gw-box{max-width:460px; margin:28px auto; background:#2B2B33; color:#ECEAF2; border-radius:var(--r-lg); padding:26px 24px; box-shadow:0 12px 40px rgba(17,13,15,.28)}
.gw-badge{display:inline-block; background:#6B4A12; color:#FFD98A; font-size:12px; padding:5px 12px; border-radius:99px; margin-bottom:14px; letter-spacing:1px}
.gw-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px}
.gw-logo{font-weight:700; font-size:17px; letter-spacing:.5px}
.gw-amt{font-family:var(--serif); font-size:38px; text-align:center; margin:14px 0}
.gw-meta{font-size:12.5px; opacity:.75; margin:3px 0}
.gw-note{font-size:12.5px; line-height:1.8; opacity:.85; background:rgba(255,255,255,.06); border-radius:var(--r); padding:12px 14px; margin:14px 0 18px}
.gw-note b{color:#FFD98A}
.gw-box .btn--ghost{border-color:rgba(255,255,255,.3); color:#ECEAF2; background:transparent}
.gw-box .btn--ghost:hover{border-color:#fff}

/* ---------- 支付确认状态条 ---------- */
.conf-ok{background:#EFF6EE; border:1px solid #7BA05B; color:#2F5220; border-radius:var(--r); padding:10px 14px; font-size:13px; margin-top:12px}
.conf-wait{background:var(--sand); border:1px dashed var(--gold); color:var(--ink-2); border-radius:var(--r); padding:10px 14px; font-size:13px; margin-top:12px; line-height:1.8}

/* ---------- 售后 / 增值服务卡片 ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-top:16px}
.svc-card{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px}
.svc-card .svc-ic{font-size:26px; margin-bottom:8px}
.svc-card b{font-family:var(--serif); font-size:16px; display:block; margin-bottom:6px}
.svc-card .muted{font-size:13px; line-height:1.8}
.svc-card--recycle{border-color:var(--gold); background:var(--sand)}

/* ---------- 后台 ---------- */
.admin-nav{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px}
.admin-nav button{border:1px solid var(--line); background:var(--paper); padding:9px 16px; border-radius:99px; cursor:pointer; font-size:14px; color:var(--ink-2)}
.admin-nav button.active{background:var(--ink); color:#fff; border-color:var(--ink)}
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:24px}
.stat-card{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px}
.stat-card .n{font-family:var(--serif); font-size:28px}
.stat-card .l{font-size:13px; color:var(--ink-3)}
.stat-card .sub{font-size:12px; color:var(--ink-3); margin-top:6px}
.table{width:100%; border-collapse:collapse; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.table th,.table td{padding:11px 13px; text-align:left; font-size:13.5px; border-bottom:1px solid var(--line)}
.table th{background:var(--sand); font-weight:600; color:var(--ink-2)}
.table tr:last-child td{border-bottom:none}
.table .acts{display:flex; gap:6px}
.mini{font-size:12px; padding:5px 10px; border-radius:7px; border:1px solid var(--line); background:var(--paper); cursor:pointer}
.mini.danger{color:var(--vermilion); border-color:var(--vermilion)}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.form-grid .full{grid-column:1/-1}
.admin-card{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; margin-bottom:20px}
.upload-prev{width:120px; height:120px; border-radius:10px; object-fit:cover; border:1px solid var(--line); background:var(--sand); margin-top:8px}
.admin-login{max-width:380px; margin:60px auto; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px}

/* ---------- 页脚 ---------- */
.foot{background:var(--ink); color:#ECE6DC; padding:40px 0 30px; margin-top:40px}
.foot-in{display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap}
.foot .brand .seal{background:var(--vermilion)}
.foot .brand b{font-family:var(--serif); font-size:18px; color:#fff}
.foot-note{color:#B9AF9F; font-size:13.5px; margin:8px 0 0; max-width:32ch}
.foot-meta p{margin:4px 0; font-size:13px; color:#C9BFAE}
.foot-dim{color:#8E8474; font-size:12px; max-width:46ch}
.foot-links{margin-top:10px; display:flex; gap:14px; flex-wrap:wrap}
.foot-links a{color:#E3D8C6; font-size:13px; border-bottom:1px solid transparent}
.foot-links a:hover{border-color:var(--gold)}

/* ---------- 提示 ---------- */
.toast{position:fixed; left:50%; bottom:30px; transform:translateX(-50%) translateY(20px); z-index:90;
  background:var(--ink); color:#fff; padding:11px 20px; border-radius:99px; font-size:14px; opacity:0; pointer-events:none; transition:all .25s; box-shadow:var(--shadow-lg)}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.terms-check{display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--ink-2); margin:6px 0 14px}
.terms-check input{margin-top:3px}
.auth-msg{color:var(--vermilion); font-size:13px; min-height:18px; margin:6px 0 0}

/* ---------- 登录/注册弹层（品牌双栏） ---------- */
.modal-box--auth{display:grid; grid-template-columns:270px 1fr; max-width:680px; padding:0; overflow:hidden}
.auth-brand{background:var(--ink); color:#FAF4EA; padding:34px 26px; display:flex; flex-direction:column; position:relative}
.auth-brand::after{content:""; position:absolute; right:-22px; bottom:-22px; width:120px; height:120px;
  border:1px solid rgba(176,141,87,.35); border-radius:50%}
.ab-mark{display:flex; align-items:center; gap:10px}
.ab-mark svg,.ab-mark img{border-radius:5px; box-shadow:0 2px 10px rgba(0,0,0,.35)}
.ab-mark span{font-family:var(--serif); font-size:24px; letter-spacing:6px}
.ab-slogan{font-family:var(--serif); font-size:17px; letter-spacing:2px; color:#EAD9BC; margin:26px 0 0}
.ab-note{font-size:13px; color:#C9BFAE; margin:8px 0 0; letter-spacing:1px}
.ab-oath{margin-top:auto; font-size:12px; color:#8E8474; letter-spacing:2px; border-top:1px solid rgba(176,141,87,.25); padding-top:14px}
.auth-pane{padding:30px 32px 26px}
.auth-tabs{display:flex; gap:4px; background:var(--sand); border-radius:99px; padding:4px; margin-bottom:22px}
.auth-tabs .tab{flex:1; border:none; background:transparent; font-size:14.5px; padding:9px 0; border-radius:99px;
  cursor:pointer; color:var(--ink-2); font-family:var(--serif); letter-spacing:2px}
.auth-tabs .tab.is-on{background:var(--paper); color:var(--ink); font-weight:600; box-shadow:0 1px 4px rgba(26,23,20,.12)}
.auth-form label{display:block; font-size:13px; color:var(--ink-2); margin-bottom:16px; letter-spacing:.5px}
.auth-form input:not([type=checkbox]){width:100%; margin-top:6px; padding:11px 13px; font-size:15px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--paper); transition:border-color .15s, box-shadow .15s}
.auth-form input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(176,141,87,.14)}
.auth-form .btn{width:100%; margin-top:4px}
@media(max-width:640px){ .modal-box--auth{grid-template-columns:1fr} .auth-brand{display:none} .auth-pane{padding:24px 22px} }

/* ---------- 空间测评（拍照选型） ---------- */
.wall-upload{border:1.5px dashed var(--gold); border-radius:var(--r-lg); background:var(--paper-2);
  padding:22px 18px; text-align:center; cursor:pointer; transition:background .15s}
.wall-upload:hover{background:var(--sand)}
.wall-upload.has-img{padding:10px; cursor:pointer}
.wall-upload input[type=file]{display:none}
.wall-upload .wu-hint{color:var(--ink-3); font-size:13.5px; line-height:1.7}
.wall-upload .wu-hint b{display:block; font-family:var(--serif); font-size:15.5px; color:var(--ink); margin-bottom:4px; letter-spacing:1px}
.wall-upload img{width:100%; max-height:300px; object-fit:contain; border-radius:10px; display:block}
.swatches{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.swatches i{width:34px; height:34px; border-radius:8px; border:1px solid rgba(26,23,20,.12); display:inline-block; position:relative}
.swatches i::after{content:attr(data-hex); position:absolute; top:38px; left:50%; transform:translateX(-50%);
  font-size:10px; color:var(--ink-3); white-space:nowrap}
.swatches{padding-bottom:18px}
.plan-note{font-size:13px; line-height:1.9; color:var(--ink-2); margin:14px 0 0; border-left:3px solid var(--gold); padding-left:12px}
.privacy-tag{display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--ink-3);
  background:var(--sand); border-radius:99px; padding:3px 10px; margin-top:12px}

/* ---------- 响应式 ---------- */
@media(max-width:880px){
  .hero{grid-template-columns:1fr; gap:24px; padding:30px 0}
  .hero h1{font-size:34px}
  .assess{grid-template-columns:1fr}
  .assess-form{position:static}
  .work-detail{grid-template-columns:1fr}
  .work-detail .wimg{min-height:280px}
  .about-hero{grid-template-columns:1fr}
  .menu{display:none}
  .form-grid{grid-template-columns:1fr}
  .reco-plan .rp-grid{grid-template-columns:1fr 1fr}
  .pick{flex-wrap:wrap}
  .pick-act{flex-direction:row; width:100%}
}