.art-toolbar {
  display:flex; gap:10px; align-items:center;
  margin-bottom:14px; flex-wrap:wrap;
}
.art-search { display:flex; flex:1; min-width:240px; gap:8px; }
.art-search input {
  flex:1; padding:9px 12px;
  border:1px solid var(--n300); border-radius:var(--r);
  font-size:14px; font-family:inherit; background:var(--n0);
}
.art-search input:focus { outline:none; border-color:var(--accent); }
.art-search button {
  padding:9px 18px; background:var(--accent); color:#fff;
  border:1px solid var(--accent); border-radius:var(--r);
  cursor:pointer; font-size:14px; font-family:inherit;
}
.art-search button:hover { background:var(--accent-deep); border-color:var(--accent-deep); }
.art-write {
  padding:9px 18px; border:1px solid var(--n300);
  color:var(--n700); border-radius:var(--r);
  text-decoration:none; font-size:14px; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
}
.art-write:hover { border-color:var(--accent); color:var(--accent); }

.art-cats { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:20px; }
.art-cat {
  padding:5px 13px; border-radius:var(--r);
  background:var(--n0); border:1px solid var(--line, var(--n200));
  color:var(--n600); font-size:13px; text-decoration:none;
}
.art-cat:hover { border-color:var(--n400); color:var(--n900); }
.art-cat.on { background:var(--n900); border-color:var(--n900); color:#fff; }

.art-card { position:relative; }
.art-cat-badge {
  position:absolute; left:10px; top:10px;
  background:var(--n0); border:1px solid var(--n200); color:var(--n900);
  font-size:12px; padding:2px 9px; border-radius:2px;
}
.art-author {
  display:flex; align-items:center; gap:6px;
  font-size:13px; color:var(--n500); margin:7px 0 5px;
}
.art-author a { display:flex; align-items:center; gap:6px; color:var(--n600); text-decoration:none; }
.art-author a:hover { color:var(--accent); }
.art-avatar { width:20px; height:20px; border-radius:50%; object-fit:cover; }
.art-tags { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:7px; }
.art-tags a {
  font-size:13px; color:var(--n600);
  background:var(--n100); border:1px solid var(--n150);
  padding:1px 8px; border-radius:2px; text-decoration:none;
}
.art-tags a:hover { color:var(--accent); border-color:var(--n300); }

.art-summary {
  background:var(--n50); border:1px solid var(--n150);
  border-left:3px solid var(--accent);
  padding:11px 14px; color:var(--n600);
  font-size:14px; border-radius:0 var(--r) var(--r) 0; margin:14px 0;
}
.art-video, .art-attach { margin-top:18px; }
.art-attach a {
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; border:1px solid var(--n200);
  border-radius:var(--r); color:var(--n700);
  text-decoration:none; font-size:14px;
}
.art-attach a:hover { border-color:var(--accent); color:var(--accent); }

.yx-article-body img { max-width:100%; height:auto; border-radius:var(--r); margin:12px 0; }
.yx-article-body video { max-width:100%; border-radius:var(--r); margin:12px 0; }
.yx-article-body iframe { max-width:100%; border-radius:var(--r); }
.yx-article-body blockquote {
  border-left:2px solid var(--n300); background:var(--n50);
  padding:8px 14px; margin:12px 0; color:var(--n600);
}
.yx-article-body pre {
  background:var(--n900); color:var(--n150);
  padding:14px; border-radius:var(--r); overflow:auto; font-size:13px;
}
.yx-article-body table { width:100%; border-collapse:collapse; margin:12px 0; font-size:14px; }
.yx-article-body th, .yx-article-body td { border:1px solid var(--n200); padding:8px 10px; }

.art-actions {
  display:flex; gap:8px; flex-wrap:wrap;
  margin-top:24px; padding-top:16px; border-top:1px solid var(--n200);
}
.act-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border:1px solid var(--n200);
  background:var(--n0); border-radius:var(--r);
  cursor:pointer; font-size:13px; color:var(--n600);
  font-family:inherit; transition:border-color .14s, color .14s;
}
.act-btn:hover { border-color:var(--n400); color:var(--n900); }
.act-btn.like.on { background:var(--accent-soft); border-color:#CFE3DA; color:var(--accent-deep); font-weight:600; }
.act-btn.reward:hover { border-color:var(--warn); color:var(--warn); }

.art-reward {
  margin-top:16px; background:var(--n0);
  border:1px solid var(--n200); border-radius:var(--r); padding:14px 16px;
}
.art-reward h4 {
  margin:0 0 10px; font-size:13px; color:var(--n700); font-weight:600;
}
.reward-list { display:flex; gap:6px; flex-wrap:wrap; }
.reward-list .rw {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--n50); border:1px solid var(--n150);
  border-radius:var(--r); padding:2px 9px; font-size:13px; color:var(--n600);
}
.reward-list img { width:17px; height:17px; border-radius:50%; object-fit:cover; }

.tip-modal {
  position:fixed; inset:0; background:rgba(15,23,42,.55);
  display:none; align-items:center; justify-content:center; z-index:2000; padding:20px;
}
.tip-modal.show { display:flex; }
.tip-panel {
  background:#fff; border-radius:20px;
  max-width:400px; width:100%; padding:22px 20px 20px; position:relative;
  box-shadow:0 24px 60px -20px rgba(15,23,42,.45);
  animation:tipIn .22s cubic-bezier(.2,.9,.3,1.15);
}
@keyframes tipIn { from { opacity:0; transform:translateY(14px) scale(.97); } to { opacity:1; transform:none; } }
.tip-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; }
.tip-head h3 { font-size:16px; font-weight:650; margin:0; display:flex; align-items:center; gap:8px; color:#1C2620; }
.tip-head h3 svg { color:#C9922B; flex-shrink:0; }
.tip-bal {
  font-size:13px; color:#6B7A72; background:#F3F6F4; border:1px solid #E3EBE6;
  padding:4px 10px; border-radius:999px; white-space:nowrap; flex-shrink:0;
  font-variant-numeric:tabular-nums;
}
.tip-bal b { color:#1E7A47; font-weight:650; }
.tip-label { font-size:13px; color:#8A9490; margin:0 0 8px; }
.tip-login { font-size:13px; color:#B04A2E; background:#FDF1EC; border:1px solid #F5D9CC; border-radius:12px; padding:14px 16px; margin:0; }
.tip-login a { color:#1E7A47; font-weight:600; }
.tip-amounts { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.tip-amt {
  padding:11px 0 9px; text-align:center;
  border:1.5px solid #E3EBE6; border-radius:12px;
  background:#FAFCFB; cursor:pointer; font-size:16px; font-weight:650;
  color:#2E3B34; transition:border-color .15s, background .15s, color .15s, box-shadow .15s;
  font-variant-numeric:tabular-nums; font-family:inherit;
}
.tip-amt small { display:block; font-size:12px; font-weight:400; color:#A9B4AE; margin-top:2px; }
.tip-amt:hover { border-color:#3E9E72; }
.tip-amt.on { background:#1E7A47; border-color:#1E7A47; color:#fff; box-shadow:0 6px 14px -6px rgba(30,122,71,.5); }
.tip-amt.on small { color:rgba(255,255,255,.75); }
.tip-inputs { display:grid; gap:9px; margin-bottom:16px; }
.tip-panel .form-control {
  width:100%; border:1.5px solid #E3EBE6; border-radius:12px; padding:11px 13px;
  font-size:14px; background:#FAFCFB; color:#1C2620;
  transition:border-color .15s, box-shadow .15s;
}
.tip-panel .form-control::placeholder { color:#A9B4AE; }
.tip-panel .form-control:focus { outline:none; border-color:#3E9E72; box-shadow:0 0 0 3px rgba(62,158,114,.14); background:#fff; }
.tip-btns { display:flex; gap:9px; }
.tip-btns .btn { flex:1; margin:0; min-height:44px; border-radius:12px; font-size:14px; font-weight:600; }
.tip-btns .btn-primary {
  background:linear-gradient(135deg,#27965C,#1E7A47)!important;
  border:1px solid #1E7A47!important; color:#fff!important;
  box-shadow:0 8px 18px -8px rgba(30,122,71,.55);
}
.tip-btns .btn-primary:hover { background:linear-gradient(135deg,#22854F,#175F38)!important; }
.tip-btns .btn-outline { background:#fff!important; border:1.5px solid #DCE5E0!important; color:#3D4A44!important; }
.tip-btns .btn-outline:hover { border-color:#3E9E72!important; color:#1E7A47!important; background:#F3F9F6!important; }
.tip-panel h4 { font-size:16px; font-weight:650; margin:0 0 10px; color:#1C2620; }

@media (max-width:600px) {
  .tip-modal { padding:0; align-items:flex-end; }
  .tip-panel {
    max-width:none; border-radius:20px 20px 0 0;
    padding:20px 18px calc(16px + env(safe-area-inset-bottom));
    animation:tipUp .28s cubic-bezier(.2,.9,.3,1);
  }
  @keyframes tipUp { from { transform:translateY(60%); opacity:.4; } to { transform:none; opacity:1; } }
  .tip-amounts { gap:7px; }
}

.art-comments { margin-top:28px; }
.art-rel { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px; }
.art-rel .rel-item {
  border:1px solid var(--n200); border-radius:var(--r);
  padding:12px 14px; background:var(--n0); display:block;
  transition:border-color .14s;
}
.art-rel .rel-item:hover { border-color:var(--n400); }
.art-rel h5 { font-size:14px; margin-bottom:4px; line-height:1.5; color:var(--n900); font-weight:500; }
.art-rel time { font-size:13px; color:var(--n500); }

.art-comments > h3 { font-size:16px; font-weight:600; color:var(--n900); margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.art-comments > h3 small { font-size:13px; font-weight:400; color:var(--n500); }

.cmt-form { margin-bottom:22px; }
.cmt-box {
  display:flex; gap:12px; align-items:flex-start;
  border:1px solid var(--n200); border-radius:14px; padding:12px 14px; background:var(--n0);
  transition:border-color .15s, box-shadow .15s;
}
.cmt-box:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.cmt-box-av { width:38px; height:38px; border-radius:50%; object-fit:cover; flex-shrink:0; background:var(--n100); }
.cmt-box-main { flex:1; min-width:0; }
.cmt-box textarea {
  width:100%; border:none; background:transparent; resize:none; outline:none;
  font:inherit; font-size:14px; color:var(--n800); line-height:1.7; min-height:62px;
}
.cmt-form-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px; }
.cmt-form-foot .hint { font-size:13px; color:var(--n400); }
.cmt-form-foot .cnt { font-size:13px; color:var(--n400); font-variant-numeric:tabular-nums; }
.cmt-form-foot .btn { height:34px; padding:0 18px; }

.cmt-list { list-style:none; margin-top:4px; }
.cmt-item { display:flex; gap:12px; padding:16px 0; border-bottom:1px solid var(--n150); }
.cmt-item:last-child { border-bottom:none; }
.cmt-avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0; background:var(--n100); }
.cmt-ava-link { display:block; flex-shrink:0; }
.cmt-body { flex:1; min-width:0; }
.cmt-row { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:6px; }
.cmt-name { font-size:14px; font-weight:600; color:var(--n900); text-decoration:none; }
.cmt-name:hover { color:var(--accent); }
.cmt-cert {
  font-size:12px; font-weight:600; color:#1E7A47;
  background:rgba(30,122,71,.1); border:1px solid rgba(30,122,71,.25);
  padding:1px 7px; border-radius:20px; line-height:1.6; font-family:inherit;
}
.cmt-time { font-size:13px; color:var(--n400); margin-left:auto; }
.cmt-text { font-size:14px; color:var(--n700); line-height:1.8; overflow-wrap:anywhere; }
.cmt-closed { text-align:center; font-size:13px; color:var(--n500); padding:22px 0; background:var(--n50); border:1px dashed var(--n200); border-radius:12px; }
.cmt-empty { text-align:center; font-size:13px; color:var(--n500); padding:26px 0; }

@media (max-width:768px) {
  .art-toolbar { gap:8px; }
  .art-search { width:100%; }
  .art-write { width:100%; text-align:center; justify-content:center; }
  .art-rel { grid-template-columns:1fr; gap:10px; }
  .tip-amounts { grid-template-columns:repeat(3,1fr); gap:7px; }
  .cmt-box { padding:10px 12px; gap:10px; }
  .cmt-box-av { width:34px; height:34px; }
  .cmt-avatar { width:36px; height:36px; }
  .cmt-row { gap:6px; }
}

.rpt-reasons { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.rpt-opt {
  padding: 6px 12px; font-size:13px; font-family: inherit;
  background: var(--n0); color: var(--n700);
  border: 1px solid var(--n300); border-radius: var(--r);
  cursor: pointer; transition: border-color .14s, background .14s, color .14s;
}
.rpt-opt:hover { border-color: var(--n500); }
.rpt-opt.on { background: var(--n900); border-color: var(--n900); color: #fff; font-weight: 600; }
#rptDetail { width: 100%; margin-bottom: 14px; resize: vertical; }
.act-report { color: var(--text-light); }
.act-report:hover { color: var(--danger); border-color: var(--danger); }
.act-report:disabled { opacity: .5; cursor: default; }