/* =======================================================
   Jewelry Free Swap — Complete CSS
   Author UI rev (archive + single + forms + gallery)
   ======================================================= */

/* ------------------ 0) Design Tokens ------------------ */
:root{
  --jfs-bg: #f6f7fb;
  --jfs-card: #ffffff;
  --jfs-line: #e6e9f0;
  --jfs-muted: #6b7280;
  --jfs-text: #0f172a;
  --jfs-brand: #1f6fd1;
  --jfs-brand-2: #1759a6;
  --jfs-success: #0ea568;
  --jfs-badge: #111827;
  --jfs-shadow-sm: 0 2px 8px rgba(2,6,23,.06);
  --jfs-shadow-md: 0 10px 28px rgba(2,6,23,.08);
  --jfs-radius-sm: 10px;
  --jfs-radius: 14px;
  --jfs-radius-lg: 18px;

  --jfs-h1: 28px;
  --jfs-h2: 20px;
  --jfs-h3: 16px;
  --jfs-body: 14px;
}

/* root wrap（如果页面背景偏深，会更干净） */
body{ background: var(--jfs-bg); }

/* 统一容器（用于首页渲染/单页） */
.swap-shell{ padding: 18px 0 32px; }
.swap-container{
  margin: 0 auto;
  background: var(--jfs-card);
  border: 1px solid var(--jfs-line);
  border-radius: var(--jfs-radius-lg);
  box-shadow: var(--jfs-shadow-md);
  padding: 22px 34px;
  max-width: 1290px;
}

/* 标题卡片（首页 hero） */
.swap-hero{
  border: 1px solid var(--jfs-line);
  border-radius: var(--jfs-radius);
  background: #fff;
  box-shadow: var(--jfs-shadow-sm);
  color: var(--jfs-text);
  padding: 14px 16px;
}
.swap-hero h2{ margin:0 0 6px; font-size: var(--jfs-h2); font-weight:700; }
.swap-hero p{ margin:0; color: var(--jfs-muted); }

/* 小区块标题与分割线 */
.swap-section{ margin: 22px 0 12px; }
.swap-h3{ margin:0 0 10px; font-size: var(--jfs-h3); font-weight:700; }
.swap-divider{ height:1px; background: var(--jfs-line); border-radius:1px; margin: 16px 0; }

/* 表单/按钮/提示 统一风格 */
.swap-form label{
  display:block; margin:.55rem 0 .3rem; font-weight:600; color:var(--jfs-text);
}

.agree label {
  display: flex;
  margin-top: 15px;
  align-items: center; /* 垂直对齐 */
  gap: 6px; /* 复选框与文字间距 */
  white-space: nowrap; /* 不允许文字换行 */
}

.swap-form input[type="text"],
.swap-form input[type="email"],
.swap-form textarea,
.swap-form select{
  width:100%; padding:10px 12px; font-size: var(--jfs-body);
  border:1px solid #d9dfea; border-radius: var(--jfs-radius-sm);
  background:#fff; color:var(--jfs-text); outline:0;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.swap-form input::placeholder{ color:#9aa3b2; }
.swap-form input:focus,
.swap-form select:focus,
.swap-form textarea:focus{
  border-color: var(--jfs-brand);
  box-shadow: 0 0 0 3px rgba(31,111,209,.16);
}
.swap-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width: 680px){ .swap-form .row{ grid-template-columns:1fr; } }

.swap-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius: 10px;
  background: var(--jfs-brand); border:1px solid var(--jfs-brand-2);
  color:#fff; font-weight:700; text-decoration:none; line-height:1;
  transition: transform .05s ease, background .15s ease;
}
.swap-btn:hover{ background: var(--jfs-brand-2); }
.swap-btn:active{ transform: translateY(1px); }
.swap-btn[aria-disabled="true"]{ opacity:.6; cursor:not-allowed; }
.swap-btn--wide{ width:100%; justify-content:center; }
.swap-btn--pager{
  background:#f3f5f9; border-color: var(--jfs-line); color: var(--jfs-text);
  font-weight:600;
}

.swap-alert{
  background:#f7f8fb; border:1px solid var(--jfs-line);
  color: var(--jfs-text); padding:10px 12px; border-radius: var(--jfs-radius-sm);
}
.swap-alert--white{ background:#fff; }

/* Quill 风格保持轻量 */
#swap_quill{ min-height:240px; background:#fff; border:1px solid #dce1e7; border-radius: var(--jfs-radius-sm); }
.ql-toolbar.ql-snow{
  background:#fff; border:1px solid #dce1e7; border-bottom:none; border-radius: var(--jfs-radius-sm) var(--jfs-radius-sm) 0 0;
}
.ql-container.ql-snow{
  border:1px solid #dce1e7; border-top:none; border-radius: 0 0 var(--jfs-radius-sm) var(--jfs-radius-sm);
}
.ql-snow .ql-stroke{ stroke:#222; } .ql-snow .ql-fill{ fill:#222; }

/* 发表页相册预览（可排序） */
.album-previews{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:10px; margin-top:8px;
}
.alb-it{
  position:relative; border:1px solid var(--jfs-line); border-radius: var(--jfs-radius-sm);
  overflow:hidden; background:#fff;
}
.alb-it img{ width:100%; height:120px; object-fit:cover; display:block; }
.alb-it .drag{
  position:absolute; left:6px; top:6px; font-size:12px; line-height:1;
  background:#111827; color:#fff; padding:2px 6px; border-radius:999px; opacity:.95; cursor:grab;
}
.alb-it .rm{
  position:absolute; right:6px; top:6px; background:#ef4444; color:#fff;
  border:none; border-radius:8px; padding:2px 6px; font-size:12px; cursor:pointer;
}
.alb-it .badge{
  position:absolute; left:6px; bottom:6px; background:#10b981; color:#fff;
  padding:2px 6px; border-radius:8px; font-size:12px;
}
.add-tile{
  display:flex; align-items:center; justify-content:center;
  border:1.5px dashed #d7dbe2; border-radius: var(--jfs-radius-sm);
  height:120px; background:#fff; cursor:pointer;
}
.add-tile:hover{ background:#f8fafc; border-color:#cfd6e0; }
.add-tile .plus{ font-size:26px; margin-right:6px; color:#9aa3b2; }
.add-tile span{ color:var(--jfs-muted); font-weight:600; }

/* ------------------ 1) Archive / List ------------------ */

/* 列表网格像精品电商：大图 + 三行文本 + 悬停轻浮起 */
.swap-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:26px;
}
@media (max-width: 1200px){ .swap-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width: 900px){ .swap-grid{ grid-template-columns:repeat(2,1fr); gap:18px; } }
@media (max-width: 520px){ .swap-grid{ grid-template-columns:1fr; } }

.swap-card{
  background:#fff; border:1px solid var(--jfs-line); border-radius: var(--jfs-radius);
  overflow:hidden; box-shadow: var(--jfs-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.swap-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(2,6,23,.10);
  border-color: #dfe4ee;
}

/* 顶部大图：比例 4:3，确保整齐 */
.thumb-wrap{ position:relative; background:#fafafa; }
.thumb-wrap img{
  width:100%; aspect-ratio: 1 / 1; object-fit:cover; display:block;
}
/* 角标：Available/Claimed */
.swap-badge{
  position:absolute; left:12px; top:12px; z-index:2;
  background: var(--jfs-badge); color:#fff;
  padding:4px 8px; border-radius:999px; font-size:12px; opacity:.92;
}

/* 下部三行文本风格 */
.swap-card .bd{ padding:14px 12px 16px; text-align:center; }
.swap-title{ margin:8px 0 6px; font-size:15px; font-weight:700; line-height:1.25; }
.swap-title a{ color: var(--jfs-text); text-decoration:none; }
.swap-title a:hover{ text-decoration:underline; }
.swap-meta-1, .swap-meta-2{
  display:block; font-size:12px; color:#556; opacity:.85; margin-top:2px;
}
.swap-meta-2{ color:#6f7785; }
.swap-excerpt{ display:none; } /* 列表页不展示长摘录，更克制 */

/* 分页按钮 */
.swap-pager{ margin-top:18px; text-align:center; }
.swap-pager .page-numbers{ padding:.15rem .55rem; }
.swap-pager .current{
  background: var(--jfs-brand); color:#fff; border-radius:8px; padding:.15rem .6rem;
}

/* ------------------ 2) Single / Detail ------------------ */

/* 头部标题与 chips */
.swap-single-wrap{ padding-top:6px; }
.swap-single-head{ margin:6px 0 12px; }
.swap-single-title{ margin:0; font-size: var(--jfs-h1); letter-spacing:.2px; }
.swap-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.chip{
  display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px;
  font-size:12px; border:1px solid var(--jfs-line); background:#fff; color:#374151;
}
.chip--cat{ background:#f6faf7; border-color:#d7efe0; color:#256f48; }
.chip--tag{ background:#f7f8ff; border-color:#dfe5ff; color:#3344aa; }

/* 双列布局：左画廊 + 右信息卡 */
.swap-single-grid{
  display:grid; grid-template-columns: 1.1fr .95fr; gap:18px; align-items:flex-start;
}
@media (max-width: 980px){
  .swap-single-grid{ grid-template-columns: 1fr; }
}

/* 卡片基类 */
.card{
  background:#fff; border:1px solid var(--jfs-line); border-radius: var(--jfs-radius);
  box-shadow: var(--jfs-shadow-sm); padding:12px;
}
.card-claim {
    margin-top: 15px;
}
.card .card-title{ margin:0 0 10px; font-size: var(--jfs-h3); font-weight:700; }

.card-title {
    font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    color: #0f172a;
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    position: relative;
    border-bottom: 1px solid #e5e5e5;
}

/* 信息卡（状态 + 表单） */
.card-info .row-line{ display:flex; justify-content:space-between; font-weight:600; }
.card-info .meta-k{ color:var(--jfs-muted); }
.card-info .meta-v.ok{ color: var(--jfs-success); }
.card-info .meta-v.muted{ color:#9ca3af; }
.card-info .note{ margin:.5rem 0 0; color:var(--jfs-muted); font-size:12.5px; }

.card-claim .swap-form label{ margin:.35rem 0 .25rem; }
.mt6{ margin-top:6px; }

/* 内容、评论块间距 */
.card-content, .card-comments{ margin-top:50px; }

/* -------- 详情页画廊（主图 + 缩略图永远正方形） -------- */
.swap-photos{ margin: 0; }
.swap-main{
  border:1px solid var(--jfs-line); border-radius: var(--jfs-radius);
  overflow:hidden; background:#fff; position:relative;
}
.swap-main .slide img{
  display:block; width:100%; height:auto;
  transition: transform .25s ease;
}
.swap-main:hover .slide img{ transform: scale(1.01); }

/* 缩略图条：方形、可横向滚动（由 tiny-slider/JS 控制） */
.swap-thumbs{
  display:flex; gap:10px; margin-top:12px;
}
.swap-thumbs .thumb{
  border:1px solid var(--jfs-line); border-radius: var(--jfs-radius-sm);
  overflow:hidden; width:100px; aspect-ratio:1/1; flex:0 0 auto; cursor:pointer; background:#fff;
}
@media (max-width: 520px){
  .swap-thumbs .thumb{ width:82px; }
}
.swap-thumbs .thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.swap-thumbs .thumb.is-active{
  outline:2px solid var(--jfs-brand); outline-offset:2px;    margin: 0px 0px 4px 4px;
}

/* tiny-slider 控件（上一页/下一页） */
.tns-outer{ position:relative; }
.tns-controls [data-controls]{
  position:absolute; top:50%; transform:translateY(-50%);
  background:#fff; border:1px solid var(--jfs-line); border-radius:999px;
  padding:8px 10px; line-height:1; box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.tns-controls [data-controls="prev"]{ left:10px; }
.tns-controls [data-controls="next"]{ right:10px; }
.tns-controls [data-controls]:hover{ background:#f3f4f6; }

/* 状态提示条复用 alert */
.status-badge{
  display:inline-flex; align-items:center; gap:6px; font-weight:700;
  color: var(--jfs-success);
}

/* ------------------ 3) Utility ------------------ */
.mt10{ margin-top:10px; }
.center{ text-align:center; }

/* ------------------ 4) Compatibility ------------------ */
/* 兼容主题里的 a、img 默认样式 */
.swap-container img{ max-width:100%; height:auto; }



/* ===== My Account > Claims modal ===== */
.jfs-modal-open { overflow: hidden; }
.jfs-modal { position: fixed; inset: 0; z-index: 9999; }
.jfs-modal[hidden] { display: none !important; }
.jfs-modal__backdrop {
  position: absolute; inset: 0; background: rgba(15,23,42,.45);
}
.jfs-modal__dialog {
  position: relative; margin: 6vh auto 0; max-width: 560px; width: calc(100% - 32px);
  background:#fff; border:1px solid #e5e7eb; border-radius:14px;
  box-shadow: 0 20px 60px rgba(2,6,23,.20), 0 4px 16px rgba(2,6,23,.10);
  outline: none;
}
.jfs-modal__head {
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 14px; border-bottom:1px solid #eef1f5;
}
.jfs-modal__body {
  padding: 12px 14px;
  max-height: 60vh; overflow: auto;
}
.jfs-modal__close {
  appearance: none; border:0; background: transparent; font-size: 22px; line-height:1;
  padding: 2px 6px; cursor: pointer; border-radius: 8px; color:#334155;
}
.jfs-modal__close:hover { background:#f1f5f9; }

.jfs-claims-list { list-style:none; margin:0; padding:0; }
.jfs-claims-list li { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:8px 0; border-bottom:1px dashed #eef1f5; }
.jfs-claims-list li:last-child { border-bottom:0; }
.jfs-claims-list .n { font-weight:600; color:#111827; }
.jfs-claims-list .e { color:#2271b1; text-decoration:none; }
.jfs-claims-list .e:hover { text-decoration:underline; }
.jfs-claims-list .t { color:#6b7280; font-size:12px; }


/* meta row (date + views) */
.swap-meta-row{
  margin: 6px 0 8px;
  font-size: 13px;
  color: #6b7280; /* slate-500 */
  display: flex;
  align-items: center;
  gap: 6px;
}
.swap-meta-row .dot{ opacity:.6; }
.swap-meta-row .meta-item{ white-space: nowrap; }
@media (max-width: 680px){
  .swap-meta-row{ font-size: 12px; }
}