/* ===========================================================
   收尾人协会 · 新春「年」主题
   宣纸米白 (#faf4ea) · 朱红 (#c63a2e) · 暗金 (#c9a04a) · 墨
   =========================================================== */

:root{
  /* —— 背景层 —— */
  --bg-paper:   #faf4ea;       /* 主背景 · 米白宣纸 */
  --bg-card:    #fffbf2;       /* 卡片 · 暖象牙 */
  --bg-deep:    #f4e9d4;       /* 略深块 / 表头 */
  --bg-warm:    #f8e5d2;       /* 暖橘奶 */
  --bg-ink:     #2d1e16;       /* 反白用 */

  /* —— 红 —— */
  --red:        #c63a2e;       /* 朱红 · 主红 */
  --red-deep:   #a52821;       /* 深胭脂 */
  --red-soft:   #e07060;       /* 浅暖红 */
  --red-glow:   rgba(198,58,46,.18);
  --red-tint:   #fbe5dd;       /* 红的浅染 */

  /* —— 金 —— */
  --gold:       #c9a04a;       /* 暗金 */
  --gold-light: #e8c976;       /* 亮金 */
  --gold-deep:  #8a6a26;
  --gold-tint:  #f7ead0;

  /* —— 文 / 灰 —— */
  --ink:        #2a1f15;       /* 深墨 · 主文本 */
  --ink-mid:    #5b4a3c;
  --ink-dim:    #826f5e;
  --ink-mute:   #a89986;

  /* —— 线 —— */
  --line:       #d9c8a8;
  --line-soft:  #ebdcc0;
  --line-warm:  #c9a04a55;

  /* —— 阴影 —— */
  --shadow-1:   0 1px 0 rgba(255,255,255,.6), 0 6px 18px rgba(120,60,20,.08);
  --shadow-2:   0 12px 32px rgba(120,60,20,.12);

  /* —— 字体 —— */
  --serif:      "Noto Serif SC","Source Han Serif SC","Songti SC", serif;
  --display:    "Ma Shan Zheng","Noto Serif SC", serif;
  --sans:       "Noto Sans SC","Source Han Sans SC","PingFang SC",
                "Helvetica Neue", system-ui, sans-serif;
  --mono:       "JetBrains Mono","IBM Plex Mono", ui-monospace, monospace;
}

/* ----------- 基础 ----------- */
*{ box-sizing:border-box; }
html, body{ background:var(--bg-paper); color:var(--ink); }
body{
  font-family:var(--sans);
  font-size:15px;
  line-height:1.7;
  letter-spacing:.01em;
  min-height:100vh;
  background-image:
    radial-gradient(900px 500px at 90% -10%, rgba(198,58,46,.06), transparent 60%),
    radial-gradient(700px 400px at -10% 110%, rgba(201,160,74,.07), transparent 60%);
  background-attachment: fixed;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(140,90,30,.012) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg,
      rgba(140,90,30,.010) 0 1px, transparent 1px 5px);
  mix-blend-mode: multiply; opacity:.7;
}
main, .container, .container-fluid{ position:relative; }

a{ color:var(--red-deep); text-decoration:none;
   border-bottom:1px solid var(--line-warm); transition:.15s; }
a:hover{ color:var(--red); border-bottom-color:var(--red); }
a.plain, .nav-link, .navbar-brand, .btn{ border-bottom:0; }

h1,h2,h3,h4,h5{ font-family:var(--serif); font-weight:700; color:var(--ink); letter-spacing:.02em; }
h1{ font-size:2.1rem; }
h2{ font-size:1.55rem; }
h3{ font-size:1.2rem; }
.mono, code, .id-tag{ font-family:var(--mono); }

/* ----------- 顶栏 ----------- */
.navbar{
  background:linear-gradient(180deg, #fffaf0 0%, #fbf3e2 100%);
  border-bottom:2px solid var(--red);
  padding:.55rem 0;
  position:sticky; top:0; z-index:100;
  box-shadow:0 4px 16px rgba(160,80,30,.06);
}
.navbar::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px;
  height:1px; background:var(--gold); opacity:.7;
}
.navbar-brand{
  font-family:var(--display); font-weight:400; font-size:1.55rem;
  letter-spacing:.06em; color:var(--red-deep) !important;
  display:inline-flex; align-items:center; gap:.55rem;
}
.brand-mark{
  display:inline-block; width:1.4rem; height:1.4rem;
  background:var(--red); color:#fff;
  font-family:var(--serif); font-weight:700; font-size:.95rem;
  text-align:center; line-height:1.4rem;
  border-radius:2px;
  box-shadow:0 2px 4px rgba(165,40,33,.3), inset 0 0 0 2px rgba(255,255,255,.15);
}
.brand-mark::before{ content:"匯"; }
.navbar .nav-link{
  color:var(--ink-mid) !important; padding:.4rem .9rem;
  font-size:.93rem; letter-spacing:.05em; position:relative;
}
.navbar .nav-link:hover { color:var(--red) !important; }
.navbar .nav-link.active{ color:var(--red-deep) !important; font-weight:600; }
.navbar .nav-link.active::after{
  content:""; position:absolute; left:.9rem; right:.9rem; bottom:.15rem;
  height:2px; background:var(--red);
}
.unread-dot{
  display:inline-block; min-width:1.4em; height:1.4em; padding:0 .35em;
  margin-left:.35em; background:var(--red); color:#fff;
  font-size:.7rem; font-family:var(--mono); font-weight:700;
  border-radius:1em; line-height:1.4em; text-align:center;
  vertical-align:1px;
  box-shadow:0 0 0 1px #fff, 0 2px 6px rgba(198,58,46,.4);
}

/* ----------- Flash ----------- */
.flash-stack{
  position:fixed; top:72px; right:1rem; z-index:1080;
  display:flex; flex-direction:column; gap:.4rem; max-width:380px;
}
.flash{
  background:var(--bg-card); border:1px solid var(--line);
  border-left:3px solid var(--ink-mute);
  padding:.6rem .9rem; font-size:.9rem; color:var(--ink);
  box-shadow:var(--shadow-1); border-radius:2px;
  animation:slideIn .3s ease;
}
.flash.ok  { border-left-color:var(--red); }
.flash.warn{ border-left-color:var(--gold); color:var(--gold-deep); }
@keyframes slideIn{ from{transform:translateX(20px); opacity:0;} to{transform:translateX(0); opacity:1;} }

/* ----------- 面板 ----------- */
.panel{
  background:var(--bg-card); border:1px solid var(--line);
  border-radius:3px; padding:1.2rem 1.3rem;
  box-shadow:var(--shadow-1); position:relative;
}
.panel + .panel{ margin-top:1rem; }
.panel-title{
  font-family:var(--serif); font-weight:700;
  font-size:1.05rem; letter-spacing:.06em; color:var(--ink);
  margin:0 0 .8rem 0; padding-bottom:.5rem;
  border-bottom:1px solid var(--line-soft);
  display:flex; align-items:center; gap:.5rem;
}
.panel-title::before{
  content:""; display:inline-block;
  width:.35em; height:1em; background:var(--red);
  margin-right:.1em; border-radius:1px;
}
.panel-title small{
  color:var(--ink-mute); font-family:var(--mono);
  font-size:.7rem; letter-spacing:.2em;
  margin-left:auto; text-transform:uppercase;
}

/* ----------- 委托卡 ----------- */
.order-list{ display:flex; flex-direction:column; gap:.7rem; }
.order-card{
  display:grid; grid-template-columns:1fr auto;
  gap:.6rem 1rem; padding:1rem 1.1rem;
  background:var(--bg-card);
  border:1px solid var(--line); border-left:3px solid var(--line);
  border-radius:3px; transition:.18s; color:var(--ink);
}
.order-card:hover{
  border-left-color:var(--red); transform:translateY(-1px);
  box-shadow:var(--shadow-2); background:#fffef8;
}
.order-card .otitle{
  font-family:var(--serif); font-weight:700;
  font-size:1.15rem; color:var(--ink); margin:0; line-height:1.3;
}
.order-card .ometa{
  font-family:var(--mono); font-size:.72rem;
  color:var(--ink-mute); letter-spacing:.1em; margin-top:.25rem;
}
.order-card .ometa .sep{ margin:0 .5em; color:var(--line); }
.order-card .odesc{
  color:var(--ink-mid); font-size:.92rem; margin-top:.5rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.order-card .reward{
  font-family:var(--mono); color:var(--red-deep);
  font-size:1rem; font-weight:700; white-space:nowrap; align-self:start;
}
.order-card .reward::before{ content:"¤ "; color:var(--gold); opacity:.8; }

/* 类型徽章 */
.badge-type{
  display:inline-block; padding:.18rem .6rem;
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.18em; text-transform:uppercase;
  border:1px solid var(--ink-mute); color:var(--ink-mid);
  background:var(--bg-card);
}
.badge-type.assoc {
  color:#fff; border-color:var(--gold-deep);
  background:linear-gradient(180deg, var(--gold-light), var(--gold));
}
.badge-type.public{ color:var(--ink-mid); }
.badge-type.direct{
  color:#fff; border-color:var(--red-deep);
  background:linear-gradient(180deg, var(--red-soft), var(--red));
}

/* 状态徽章 */
.badge-status{
  display:inline-block; padding:.13rem .55rem;
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.18em; text-transform:uppercase;
  background:var(--bg-deep); color:var(--ink-mid);
  border:1px solid var(--line);
}
.badge-status.open       { color:#5a7d2c; border-color:#c8d8a8; background:#f0f5e0; }
.badge-status.in_progress{ color:#a56218; border-color:#e8c794; background:#fbeed5; }
.badge-status.completed  { color:var(--ink-mute); }
.badge-status.cancelled  { color:var(--ink-mute); text-decoration:line-through; }

/* ----------- 按钮 ----------- */
.btn{
  font-family:var(--sans); border-radius:3px;
  letter-spacing:.06em; padding:.48rem 1.1rem;
  font-size:.9rem; font-weight:500;
  border:1px solid var(--line); background:var(--bg-card); color:var(--ink);
  transition:.15s;
}
.btn:hover{ background:var(--bg-deep); color:var(--ink); }
.btn-blood, .btn-primary{
  background:linear-gradient(180deg, #d9483a, #b22a23);
  border-color:#8e1f1a; color:#fff !important; font-weight:600;
  box-shadow:0 2px 4px rgba(165,40,33,.25), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-blood:hover, .btn-primary:hover{
  background:linear-gradient(180deg, #e25448, #c43029);
  box-shadow:0 4px 14px rgba(198,58,46,.35);
}
.btn-gold{
  background:linear-gradient(180deg, #e8c976, #c9a04a);
  border-color:#9a7a2e; color:#3a2a10 !important; font-weight:600;
}
.btn-gold:hover{ background:linear-gradient(180deg, #f0d590, #d4ad58); }
.btn-ghost{
  background:transparent; border:1px solid var(--line); color:var(--ink-mid);
}
.btn-ghost:hover{ border-color:var(--red); color:var(--red); }
.btn-sm{ padding:.3rem .75rem; font-size:.8rem; }
.btn[disabled]{ opacity:.4; pointer-events:none; }

/* ----------- 表单 ----------- */
.form-control, .form-select{
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-radius:3px; color:var(--ink) !important;
  font-family:var(--sans); box-shadow:none !important;
  padding:.55rem .75rem;
}
.form-control:focus, .form-select:focus{
  border-color:var(--red) !important;
  box-shadow:0 0 0 3px var(--red-glow) !important;
}
.form-label{
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.18em; color:var(--ink-mid);
  text-transform:uppercase; font-weight:600;
  margin-bottom:.35rem;
}
textarea.form-control{ min-height:120px; resize:vertical; }

/* 文件选择器 */
.form-control[type=file]{ padding:.4rem .55rem; font-family:var(--mono); font-size:.85rem; }
.form-control[type=file]::file-selector-button{
  background:var(--gold-tint); color:var(--gold-deep);
  border:1px solid var(--gold);
  padding:.3rem .8rem; margin-right:.7rem;
  font-family:var(--sans); font-weight:600; font-size:.82rem;
  letter-spacing:.05em; border-radius:2px; cursor:pointer;
  transition:.15s;
}
.form-control[type=file]::file-selector-button:hover{
  background:var(--gold-light); color:#3a2a10;
}

/* ----------- Tabs ----------- */
.tab-bar{
  display:flex; gap:0; border-bottom:1px solid var(--line);
  margin-bottom:1rem; align-items:flex-end;
}
.tab-bar a{
  padding:.7rem 1.1rem;
  font-family:var(--mono); font-size:.78rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-dim);
  border:0; border-bottom:2px solid transparent;
  margin-bottom:-1px; background:transparent;
}
.tab-bar a:hover{ color:var(--red); }
.tab-bar a.active{ color:var(--red-deep); border-bottom-color:var(--red); font-weight:600; }

/* ----------- 沟通帖 ----------- */
.thread{
  display:flex; flex-direction:column; gap:.7rem;
  max-height:60vh; overflow-y:auto;
  padding:.4rem .2rem;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.thread::-webkit-scrollbar{ width:6px; }
.thread::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
.msg{
  background:#fff; border:1px solid var(--line-soft);
  border-left:2px solid var(--line);
  padding:.65rem .85rem; border-radius:2px;
}
.msg.system{
  background:transparent; border:1px dashed var(--line);
  border-left:1px dashed var(--line);
  color:var(--ink-mute); font-family:var(--mono);
  font-size:.78rem; letter-spacing:.05em; text-align:center;
}
.msg.mine { border-left-color:var(--red); background:#fff8f3; }
.msg.admin{ border-left-color:var(--gold); background:#fdf6e3; }
.msg .who{
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.1em; color:var(--ink-mute);
  margin-bottom:.25rem;
  display:flex; gap:.4rem; align-items:center;
}
.msg .who a, .msg .who a:hover{ border-bottom:0; }
.msg .who strong{ color:var(--red-deep); font-weight:700; }
.msg .who .when{ margin-left:auto; }
.msg .body{ white-space:pre-wrap; word-break:break-word; }

/* ----------- 照片墙 ----------- */
.wall-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:.7rem;
}
.wall-card{
  position:relative; aspect-ratio:4/5;
  background:var(--bg-deep); border:1px solid var(--line);
  overflow:hidden; cursor:pointer; transition:.2s;
  border-radius:3px;
}
.wall-card:hover{
  border-color:var(--red); transform:translateY(-2px);
  box-shadow:var(--shadow-2);
}
.wall-card img{ width:100%; height:100%; object-fit:cover; }
.wall-card .placeholder{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); color:var(--ink-mute);
  font-size:1.6rem; letter-spacing:.2em;
  background: repeating-linear-gradient(
      135deg, #f3e6cf 0 8px, #efe0c5 8px 16px);
}
.wall-card .corner{
  position:absolute; top:.4rem; right:.4rem;
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.15em;
  background:rgba(255,255,255,.92); color:var(--red-deep);
  padding:.13rem .4rem; border:1px solid var(--red);
  border-radius:2px; font-weight:600;
}
.wall-card .title{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(180deg, transparent, rgba(20,10,5,.85) 60%);
  padding:1.2rem .6rem .5rem;
  color:#fff; font-family:var(--serif); font-weight:600;
  font-size:.95rem; line-height:1.25;
}

/* 照片墙模态 · 左图 / 右上信息 / 右下评价 */
.wall-modal-grid{
  display:grid; grid-template-columns:1fr 1fr; min-height:60vh;
}
.wall-modal-grid .left{
  background:#1d130c;
  display:flex; align-items:center; justify-content:center; padding:1rem;
}
.wall-modal-grid .left img{
  max-width:100%; max-height:75vh; object-fit:contain;
  box-shadow:0 8px 28px rgba(0,0,0,.4);
}
.wall-modal-grid .left .placeholder{
  width:80%; aspect-ratio:4/5;
  background:repeating-linear-gradient(135deg, #2a1d12 0 8px, #261a10 8px 16px);
  display:flex; align-items:center; justify-content:center;
  color:#6a5a44; font-family:var(--display); font-size:2rem; letter-spacing:.3em;
}
.wall-modal-grid .right{ display:flex; flex-direction:column; background:var(--bg-card); }
.wall-modal-grid .right .top{
  padding:1.4rem 1.5rem 1.2rem;
  border-bottom:2px solid var(--red);
  background:linear-gradient(180deg, #fffef8, var(--bg-card));
}
.wall-modal-grid .right .bot{ padding:1.2rem 1.5rem 1.5rem; flex:1; }
.wall-modal-grid .right .bot .review-img{
  width:100%; max-width:300px; aspect-ratio:4/3; object-fit:cover;
  border:1px solid var(--line); margin-top:.8rem; border-radius:3px;
  cursor:zoom-in;
}
@media (max-width:780px){
  .wall-modal-grid{ grid-template-columns:1fr; }
  .wall-modal-grid .left img{ max-height:50vh; }
}

/* ----------- 状态点 ----------- */
.status-pill{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--mono); font-size:.76rem;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.22rem .65rem;
  border:1px solid var(--line);
  background:var(--bg-card); color:var(--ink-mid);
  border-radius:2px;
}
.status-pill .dot{ width:.55em; height:.55em; border-radius:50%; background:var(--line); }
.status-pill.open   .dot{ background:#7d9f3e; box-shadow:0 0 6px #b8d278; }
.status-pill.full   .dot{ background:var(--gold); }
.status-pill.closed .dot{ background:var(--ink-mute); }

/* ----------- 一键复制 ----------- */
.copy-row{
  display:flex; align-items:center; gap:.5rem;
  background:var(--gold-tint);
  border:1px dashed var(--gold);
  padding:.55rem .75rem;
  font-family:var(--mono); font-size:.88rem;
  word-break:break-all; border-radius:2px;
}
.copy-btn{
  flex:0 0 auto;
  font-family:var(--mono); font-size:.7rem; font-weight:600;
  letter-spacing:.15em; padding:.22rem .65rem;
  background:#fff; color:var(--gold-deep);
  border:1px solid var(--gold); cursor:pointer;
  transition:.15s; border-radius:2px;
}
.copy-btn:hover{ background:var(--gold); color:#fff; }
.copy-btn.copied{ background:var(--red); color:#fff; border-color:var(--red); }

/* ----------- 印章 ----------- */
.stamp{
  display:inline-block; padding:.3rem .9rem;
  border:2px solid var(--red);
  color:var(--red); background:rgba(198,58,46,.05);
  font-family:var(--display); font-weight:400;
  font-size:1.2rem; letter-spacing:.3em;
  transform:rotate(-3deg); text-transform:uppercase;
  border-radius:2px;
}
.stamp.gold{ border-color:var(--gold); color:var(--gold-deep); background:rgba(201,160,74,.08); }
.stamp.mute{ border-color:var(--ink-mute); color:var(--ink-mute); background:transparent; }

/* ----------- 评分 ----------- */
.stars{ font-family:var(--serif); color:var(--red); letter-spacing:.1em; font-size:1.2rem; }
.stars .off{ color:var(--line); }

/* ----------- 详情头 ----------- */
.detail-head{
  border:1px solid var(--line); padding:1.5rem 1.6rem;
  background:linear-gradient(180deg, #fffef8, var(--bg-card));
  position:relative; border-radius:3px; box-shadow:var(--shadow-1);
}
.detail-head::before{
  content:""; position:absolute; top:.6rem; right:.6rem;
  width:10px; height:10px;
  background:radial-gradient(circle, var(--red) 30%, transparent 70%);
  opacity:.7;
}
.detail-head::after{
  content:""; position:absolute; left:-1px; top:1rem; bottom:1rem;
  width:3px; background:var(--gold); opacity:.85;
}
.detail-head h1{ margin:.2rem 0 .5rem 0; }
.detail-head .id-tag{
  font-size:.72rem; letter-spacing:.25em;
  color:var(--ink-mute); text-transform:uppercase;
}
.detail-head .reward-big{
  font-family:var(--mono); color:var(--red-deep);
  font-size:1.6rem; font-weight:700;
}

/* ----------- 投诉条 ----------- */
.complaint-card{
  background:#fbeae6;
  border:1px solid #e9b3aa;
  border-left:3px solid var(--red);
  padding:.85rem 1rem; font-size:.92rem; border-radius:2px;
}

/* ----------- 作品图（详情页内嵌） ----------- */
.work-preview{
  display:inline-block; max-width:100%;
  border:1px solid var(--line); border-radius:3px;
  padding:.3rem; background:#fff;
  box-shadow:var(--shadow-1); margin-top:.6rem;
}
.work-preview img{ display:block; max-width:380px; max-height:380px; width:100%; height:auto; }

/* ----------- 辅助 ----------- */
.muted{ color:var(--ink-mute); }
.dim  { color:var(--ink-mid); }
.divider-thin{ height:1px; background:var(--line); margin:1rem 0; }
.cert-mark{
  font-family:var(--mono); font-size:.66rem;
  background:linear-gradient(180deg, var(--gold-light), var(--gold));
  color:#3a2a10;
  padding:.08em .55em; letter-spacing:.18em; font-weight:700;
  vertical-align:2px; margin-left:.3em;
  border-radius:2px;
  box-shadow:0 1px 2px rgba(120,80,20,.2);
}

/* ----------- 头像 ----------- */
.avatar-shell{
  width:92px; height:92px;
  border:1px solid var(--line);
  border-radius:50%;
  overflow:hidden;
  background:linear-gradient(180deg, #fffef8, var(--bg-deep));
  box-shadow:var(--shadow-1);
  flex:0 0 auto;
}
.avatar-img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}
.avatar-fallback{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif);
  font-size:2rem; font-weight:700;
  color:var(--red-deep);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.75), transparent 38%),
    linear-gradient(180deg, #fdf7eb, var(--bg-deep));
}

/* ----------- Modal 主题适配 ----------- */
.modal{ z-index:2000; }
.modal-dialog, .modal-content{ pointer-events:auto; }
.modal-content{ background:var(--bg-card); border:1px solid var(--line); border-radius:3px; }
.modal-content .modal-footer{ border-top:1px solid var(--line-soft); }
.modal-backdrop{ z-index:1990; }
.modal-backdrop.show{ opacity:.55; background:#3a2210; }

/* ----------- 移动适配 ----------- */
@media (max-width: 720px){
  .order-card{ grid-template-columns:1fr; }
  .order-card .reward{ font-size:.95rem; }
  .detail-head{ padding:1.1rem 1rem; }
  h1{ font-size:1.55rem; }
  .navbar-brand{ font-size:1.15rem; }
  .tab-bar a{ padding:.6rem .7rem; font-size:.7rem; }
  .avatar-shell{ width:72px; height:72px; }
  .avatar-fallback{ font-size:1.55rem; }
}

/* ----------- 装饰：分隔标题 ----------- */
.sep-text{
  display:flex; align-items:center; gap:.8rem;
  font-family:var(--display); color:var(--red);
  letter-spacing:.3em; font-size:1rem;
  margin:1.4rem 0;
}
.sep-text::before, .sep-text::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}