/* X 提示词画廊 —— 视频/图片与提示词配对展示（对齐 youmind.css 的暗色基调） */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0d1017; --panel: #151a24; --line: #242b3a; --txt: #dce3f0;
  --dim: #8b94a7; --acc: #5b9dff; --pink: #e0637f;
}
body { background: var(--bg); color: var(--txt); font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }

.navbar { display: flex; align-items: center; gap: 14px; padding: 14px 22px; border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; z-index: 20; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; margin-right: auto; }
.logo { font-size: 22px; }
.nav-btn { color: var(--dim); text-decoration: none; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; transition: .15s; }
.nav-btn:hover { color: var(--txt); border-color: var(--acc); }

.toolbar { display: flex; align-items: center; gap: 10px; padding: 14px 22px; flex-wrap: wrap; position: sticky; top: 63px; background: var(--bg); z-index: 10; border-bottom: 1px solid var(--line); }
.tagrow { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 22px 2px; }
.chip { background: var(--panel); border: 1px solid var(--line); color: var(--dim); border-radius: 20px; padding: 5px 13px; font-size: 12.5px; cursor: pointer; transition: .15s; font-family: inherit; }
.chip:hover { color: var(--txt); border-color: var(--acc); }
.chip.on { background: var(--acc); border-color: var(--acc); color: #fff; }
.chip.nsfw { border-color: rgba(224,99,127,.6); color: var(--pink); }
.chip.nsfw:hover { border-color: var(--pink); color: var(--pink); }
.chip.nsfw.on { background: var(--pink); border-color: var(--pink); color: #fff; }
.count { color: var(--dim); font-size: 12.5px; min-width: 120px; }
#search { flex: 1; min-width: 200px; max-width: 420px; background: var(--panel); border: 1px solid var(--line); color: var(--txt); border-radius: 8px; padding: 8px 12px; font-size: 13px; outline: none; }
#search:focus { border-color: var(--acc); }
select { background: var(--panel); border: 1px solid var(--line); color: var(--txt); border-radius: 8px; padding: 8px 10px; font-size: 13px; outline: none; }

.reswrap { max-width: 1100px; margin: 4px auto 0; padding: 0 22px; }
.reswrap h2 { font-size: 15px; margin: 18px 0 12px; color: var(--txt); }
.resgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.res { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; text-decoration: none; transition: .15s; }
.res:hover { border-color: var(--acc); transform: translateY(-1px); }
.res .rhead { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.res .rhead b { color: var(--txt); font-size: 13px; line-height: 1.4; }
.res .rk { flex-shrink: 0; font-size: 10.5px; border-radius: 5px; padding: 1px 6px; }
.res.gh .rk { background: rgba(91,157,255,.15); color: var(--acc); }
.res.site .rk { background: rgba(224,99,127,.15); color: var(--pink); }
.res.tool .rk { background: rgba(139,148,167,.2); color: var(--dim); }
.res .rscale { font-size: 11.5px; color: var(--acc); margin-bottom: 4px; }
.res .rdesc { font-size: 12px; color: var(--dim); line-height: 1.6; }
#grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; padding: 20px 22px 40px; margin-top: 6px; }
#empty { display: none; text-align: center; color: var(--dim); padding: 60px 0; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; cursor: pointer; transition: .15s; display: flex; flex-direction: column; }
.card:hover { border-color: var(--acc); transform: translateY(-2px); }
.thumb { position: relative; background: #000; aspect-ratio: 16/10; overflow: hidden; }
.thumb video { width: 100%; height: 100%; object-fit: contain; display: block; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .more { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.7); color: #fff; font-size: 12px; border-radius: 6px; padding: 2px 8px; }
.thumb .kbadge { position: absolute; left: 8px; top: 8px; background: rgba(0,0,0,.7); color: #fff; font-size: 12px; border-radius: 6px; padding: 2px 8px; }
.cinfo { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ctitle { font-size: 14.5px; font-weight: 600; line-height: 1.45; }
.ctags { display: flex; flex-wrap: wrap; gap: 6px; }
.ctags span { font-size: 11px; color: var(--acc); border: 1px solid rgba(91,157,255,.45); border-radius: 20px; padding: 1px 8px; }
.cmeta { color: var(--dim); font-size: 12px; margin-top: auto; }
.cmeta b { color: var(--txt); font-weight: 600; }

#modal { display: none; position: fixed; inset: 0; background: rgba(5,8,14,.82); z-index: 100; overflow-y: auto; padding: 30px 14px; }
#modal.show { display: block; }
#dialog { max-width: 880px; margin: 0 auto; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; position: relative; }
#closebtn { position: absolute; right: 12px; top: 12px; z-index: 5; background: rgba(0,0,0,.6); color: #fff; border: none; border-radius: 50%; width: 34px; height: 34px; font-size: 15px; cursor: pointer; }
.vwrap { background: #000; }
.vwrap video { width: 100%; max-height: 62vh; display: block; }
.imgshow { position: relative; }
.imgshow img { width: 100%; max-height: 62vh; object-fit: contain; display: block; background: #0a0d13; }
.imgnav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.55); color: #fff; border: none; font-size: 20px; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; }
.imgnav.prev { left: 10px; } .imgnav.next { right: 10px; }
.imgidx { position: absolute; right: 12px; bottom: 10px; background: rgba(0,0,0,.7); color: #fff; font-size: 12px; border-radius: 6px; padding: 2px 8px; }
.body { padding: 18px 20px 20px; }
.body h2 { font-size: 17px; margin-bottom: 10px; }
.mrow { color: var(--dim); font-size: 12.5px; margin-bottom: 8px; line-height: 1.7; }
.mrow b { color: var(--txt); }
.note { color: var(--dim); font-size: 13px; background: var(--bg); border: 1px dashed #33415e; border-radius: 10px; padding: 10px 12px; margin: 10px 0; line-height: 1.7; }
.ptype { font-size: 12px; color: var(--pink); margin-bottom: 6px; }
#promptbox { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 14px; max-height: 300px; overflow-y: auto; margin-top: 4px; }
#promptbox pre { white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 13.5px; line-height: 1.75; }
.row { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
#copybtn { background: var(--acc); color: #fff; border: none; border-radius: 8px; padding: 9px 16px; font-size: 13px; cursor: pointer; }
#copybtn:active { opacity: .8; }
.row a { color: var(--acc); font-size: 13px; text-decoration: none; border-bottom: 1px dotted var(--acc); }

.footer { text-align: center; color: var(--dim); font-size: 12px; padding: 18px 14px 30px; line-height: 1.8; }
.footer b { color: var(--acc); }