:root{
  --bg:#f4f6fb; --card:#fff; --ink:#1f2733; --muted:#6b7686; --line:#e6e9f0;
  --primary:#3b6ef5; --primary-d:#2c57d6;
  --danger:#e5484d;
  --open:#f0a020; --progress:#3b6ef5; --resolved:#22a06b; --closed:#8a93a3; --wontfix:#b06bd6;
  --shadow:0 1px 3px rgba(20,30,60,.06),0 6px 20px rgba(20,30,60,.06);
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:15px; line-height:1.55;
  -webkit-text-size-adjust:100%;
}
a{color:var(--primary); text-decoration:none}
.wrap{max-width:860px; margin:0 auto; padding:0 16px}

/* 顶栏 */
.topbar{background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; height:56px; gap:10px}
.brand{font-weight:700; color:var(--ink); font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.nav{display:flex; align-items:center; gap:14px; white-space:nowrap}
.nav a{color:var(--muted); font-size:14px}
.admin-flag{background:#eef3ff; color:var(--primary); padding:2px 8px; border-radius:20px; font-size:12px; font-weight:600}

/* 按钮 */
.btn-primary{background:var(--primary); color:#fff !important; padding:8px 16px; border-radius:10px; border:0; font-size:14px; font-weight:600; cursor:pointer; display:inline-block}
.btn-primary:hover{background:var(--primary-d)}
.btn-ghost{color:var(--muted) !important; padding:8px 16px; border-radius:10px; border:1px solid var(--line); background:#fff; cursor:pointer; display:inline-block}
.btn-danger{background:#fff; color:var(--danger); border:1px solid #f3c0c2; padding:8px 16px; border-radius:10px; cursor:pointer}
.btn-danger:hover{background:var(--danger); color:#fff}
button{font-family:inherit}

/* flash */
.flashes{margin:16px 0 0}
.flash{padding:10px 14px; border-radius:10px; margin-bottom:8px; font-size:14px}
.flash-ok{background:#e7f7ef; color:#1d7a52}
.flash-error{background:#fdecec; color:#c0383c}

/* 统计 */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:18px 0}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 10px; text-align:center; box-shadow:var(--shadow)}
.stat-num{font-size:26px; font-weight:800; line-height:1}
.stat-label{font-size:12px; color:var(--muted); margin-top:6px}
.stat.on{outline:2px solid var(--primary); outline-offset:-2px}
.stat-active .stat-num{color:var(--open)}
.stat-done .stat-num{color:var(--resolved)}

/* 过滤 */
.filters{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin-bottom:14px}
.seg{display:inline-flex; background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden}
.seg a, .seg-opt{padding:7px 12px; font-size:13px; color:var(--muted); cursor:pointer}
.seg a.on{background:var(--primary); color:#fff}
.filter-right{display:flex; gap:8px; flex:1; min-width:240px; justify-content:flex-end}
.filter-right input[type=search]{flex:1; min-width:120px}
input,select,textarea{font-size:15px; padding:9px 11px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); width:100%; font-family:inherit}
.filter-right select{width:auto}
.filter-right button{background:var(--primary); color:#fff; border:0; border-radius:10px; padding:0 16px; cursor:pointer}

/* 列表 */
.issue-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.issue-card{position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); border-left:4px solid var(--closed); overflow:hidden}
.issue-card.status-open{border-left-color:var(--open)}
.issue-card.status-in_progress{border-left-color:var(--progress)}
.issue-card.status-resolved{border-left-color:var(--resolved)}
.issue-card.status-wontfix{border-left-color:var(--wontfix)}
.card-link{display:block; padding:13px 15px; color:inherit}
.card-link:hover{background:#fafbff}
.card-top{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:7px}
.card-title{font-weight:600; font-size:15.5px}
.card-meta{display:flex; flex-wrap:wrap; gap:14px; color:var(--muted); font-size:12.5px; margin-top:7px}

/* badge */
.badge{font-size:12px; padding:2px 9px; border-radius:20px; font-weight:600; line-height:1.7}
.type-bug{background:#fdecec; color:#d23b3f}
.type-suggestion{background:#eaf4ff; color:#1f6fd6}
.proj{background:#f0f1f5; color:#5a6473}
.prio-high{background:#fde8e8; color:#d23b3f}
.prio-medium{background:#fff3e0; color:#c47d12}
.prio-low{background:#eef0f3; color:#6b7686}
.st{color:#fff}
.st-open{background:var(--open)} .st-in_progress{background:var(--progress)}
.st-resolved{background:var(--resolved)} .st-closed{background:var(--closed)} .st-wontfix{background:var(--wontfix)}

/* 卡片 / 表单 */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; margin:16px 0}
.form-h{margin:0 0 16px}
.field{display:block; margin-bottom:15px}
.field .lbl{display:block; font-size:13px; color:var(--muted); margin-bottom:6px; font-weight:600}
.field .lbl i{color:var(--danger); font-style:normal}
.field-row{display:flex; gap:14px}
.field-row .field{flex:1}
.type-seg{display:flex; gap:0}
.seg-opt{position:relative; flex:1; text-align:center; border:1px solid var(--line)}
.seg-opt:first-child{border-radius:10px 0 0 10px}
.seg-opt:last-child{border-radius:0 10px 10px 0; border-left:0}
.seg-opt input{position:absolute; opacity:0; pointer-events:none}
.seg-opt span{display:block}
.seg-opt:has(input:checked){background:var(--primary); color:#fff; border-color:var(--primary)}
.form-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:8px}
.login-card{max-width:420px; margin:32px auto}
.muted{color:var(--muted)}

/* 上传 */
.upload-zone{display:block; border:2px dashed #c7cfde; border-radius:12px; padding:22px; text-align:center; cursor:pointer; background:#fbfcff}
.upload-zone:hover{border-color:var(--primary); background:#f5f8ff}
.upload-zone.pasted{border-color:var(--resolved); background:#eef9f2}
.upload-zone.pasted .upload-hint{color:var(--resolved); font-weight:600}
.upload-zone.warn{border-color:var(--open); background:#fff7ea}
.upload-zone.warn .upload-hint{color:#c47d12; font-weight:600}
.upload-zone input{display:none}
.upload-hint{color:var(--muted); font-size:14px}
.preview{display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px; margin-top:10px}
.preview .thumb{position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden; border:1px solid var(--line)}
.preview .thumb img{width:100%; height:100%; object-fit:cover; display:block}
.preview .rm{position:absolute; top:3px; right:3px; background:rgba(0,0,0,.55); color:#fff; border:0; border-radius:50%; width:20px; height:20px; cursor:pointer; font-size:12px; line-height:20px; padding:0}

/* 已解决印章（仅展示，不影响数据）*/
.stamp{
  position:absolute; pointer-events:none; user-select:none;
  font-weight:800; color:#c0392b;
  border:3px double #c0392b; border-radius:9px;
  background:rgba(255,255,255,.30);
  transform:rotate(-13deg);
  font-family:"STKaiti","KaiTi","PingFang SC","Microsoft YaHei",serif;
  box-shadow:inset 0 0 0 1px rgba(192,57,43,.25);
  opacity:.85;
}
.stamp-detail{top:16px; right:18px; font-size:22px; letter-spacing:4px; padding:6px 14px}
.stamp-card{top:9px; right:10px; font-size:12.5px; letter-spacing:2px; padding:2px 7px; border-width:2px; border-radius:7px; opacity:.8}
@media (max-width:640px){ .stamp-detail{font-size:18px; padding:5px 11px; top:12px; right:12px} }

/* 详情 */
.back{display:inline-block; margin:16px 0 0; color:var(--muted); font-size:14px}
.detail{position:relative}
.detail-title{font-size:21px; margin:10px 0}
.detail-meta{color:var(--muted); font-size:13px; display:flex; flex-wrap:wrap; gap:12px; margin-bottom:14px}
.detail-desc{white-space:pre-wrap; background:#fafbff; border:1px solid var(--line); border-radius:10px; padding:13px 15px; margin:6px 0 14px; line-height:1.7}
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px}
.gallery-item{border-radius:10px; overflow:hidden; border:1px solid var(--line); aspect-ratio:1; background:#f0f1f5}
.gallery-item img{width:100%; height:100%; object-fit:cover; display:block}

/* 管理面板 */
.admin-panel h3{margin:0 0 12px}
.admin-row{display:flex; gap:14px}
.admin-row label{flex:1; font-size:13px; color:var(--muted)}
.admin-row select{margin-top:5px}
.admin-panel textarea{margin:12px 0}
.admin-actions{display:flex; gap:10px; justify-content:space-between}

/* 时间线 */
.timeline{margin:16px 0 40px}
.timeline h3{margin:0 0 14px}
.events{list-style:none; padding:0; margin:0 0 18px}
.event{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:10px}
.event-admin{border-color:#cfe0ff; background:#f6f9ff}
.event-head{display:flex; align-items:center; gap:8px; font-size:13px}
.event-time{color:var(--muted); margin-left:auto; font-size:12px}
.tag-admin{background:var(--primary); color:#fff; font-size:11px; padding:1px 7px; border-radius:10px}
.event-status{font-size:13px; color:var(--muted); margin-top:6px}
.event-body{margin-top:6px; white-space:pre-wrap}
.comment-form{display:flex; flex-direction:column; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px}
.comment-form .btn-primary{align-self:flex-end}

.empty{text-align:center; padding:50px 20px; color:var(--muted)}
.footer{color:var(--muted); font-size:12.5px; text-align:center; padding:24px 16px 36px}

@media (max-width:640px){
  .stats{grid-template-columns:repeat(4,1fr); gap:7px}
  .stat{padding:11px 4px}
  .stat-num{font-size:21px}
  .field-row{flex-direction:column; gap:0}
  .filter-right{justify-content:stretch}
  .brand{font-size:15px; max-width:48vw}
  .nav{gap:10px}
}