@import url("/landing/yao-site.css");
.gallery-mast { position: relative; padding: 48px 0 38px; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: end; border-bottom: 1px solid var(--yao-border); }
.gallery-mast h1 { font-size: clamp(33px, 3.8vw, 48px); line-height: 1.35; margin: 18px 0 14px; font-weight: 580; letter-spacing: -.055em; }
.gallery-mast p { font-size: 13px; color: var(--yao-muted); line-height: 1.9; margin: 0; max-width: 630px; }
.gallery-mast .mast-note { font-size: 11px; color: var(--yao-muted); margin-top: 6px; }
.gallery-seal { width: 118px; height: 118px; border: 1px solid var(--yao-border-strong); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; transform: rotate(10deg); margin-bottom: 10px; }
.gallery-seal img { width: 39px; height: 39px; filter: saturate(.8); }
.gallery-seal span { font: 8px var(--yao-mono); letter-spacing: .16em; color: var(--yao-muted); }
.gallery-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 36px; padding-top: 30px; }
.gallery-sidebar { align-self: start; position: sticky; top: 106px; }
.gallery-sidebar .sidebar-title { font: 10px var(--yao-mono); letter-spacing: .11em; color: var(--yao-muted); margin: 5px 0 15px; }
.gallery-sidebar .sidebar-title:not(:first-child) { margin-top: 30px; }
.gallery-side-option { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 10px 12px; margin-bottom: 4px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--yao-muted); font-size: 12px; text-align: left; }
.gallery-side-option span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery-side-option span:last-child { color: var(--yao-quiet); font: 10px var(--yao-mono); }
.gallery-side-option:hover { background: var(--yao-bg-soft); }
.gallery-side-option[aria-pressed="true"] { background: var(--yao-accent-soft); color: var(--yao-accent-ink); border-color: color-mix(in srgb, var(--yao-accent) 20%, transparent); }
.gallery-side-option[aria-pressed="true"] span:last-child { color: var(--yao-accent-ink); }
.gallery-sidebar-note { margin-top: 30px; padding: 18px 15px; border: 1px solid var(--yao-border); border-radius: 10px; font-size: 11px; line-height: 1.95; color: var(--yao-muted); }
.gallery-sidebar-note strong { display: block; color: var(--yao-text); font-weight: 550; margin-bottom: 8px; }
.gallery-content { min-width: 0; }
.gallery-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.gallery-search { position: relative; flex: 1; min-width: 180px; }
.gallery-search svg { position: absolute; top: 13px; left: 13px; color: var(--yao-muted); }
.gallery-search input { padding-left: 39px; }
.gallery-toolbar .view-switch { display: flex; border: 1px solid var(--yao-border); background: var(--yao-surface); border-radius: 9px; padding: 3px; flex-shrink: 0; }
.view-switch button { min-height: 34px; width: 34px; display: grid; place-items: center; border: 0; border-radius: 6px; color: var(--yao-muted); background: transparent; }
.view-switch button[aria-pressed="true"] { background: var(--yao-bg-soft); color: var(--yao-text); }
.gallery-filterbar { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 10px; padding: 17px; border: 1px solid var(--yao-border); border-radius: 12px; background: var(--yao-surface); margin-bottom: 22px; }
.gallery-filterbar label { display: grid; gap: 8px; color: var(--yao-muted); font-size: 10px; }
.gallery-filterbar select { min-width: 0; min-height: 37px; padding: 8px 26px 8px 10px; font-size: 11px; background: var(--yao-bg); }
.gallery-filterbar option { background: var(--yao-surface); }
.gallery-results-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 11px; margin-bottom: 20px; color: var(--yao-muted); }
.gallery-results-line b { color: var(--yao-text); font-weight: 550; }
.gallery-results-line button { border: 0; padding: 5px 0; background: transparent; color: var(--yao-accent-ink); font-size: 11px; }
.gallery-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 18px; }
.gallery-card { min-width: 0; border: 1px solid var(--yao-border); border-radius: 12px; overflow: hidden; background: var(--yao-surface); transition: border-color .18s, box-shadow .18s; }
.gallery-card:hover { border-color: var(--yao-border-strong); box-shadow: var(--yao-shadow); }
.gallery-cover-link { position: relative; display: block; margin: 10px 10px 0; text-decoration: none; }
.gallery-preview { overflow: hidden; aspect-ratio: 4/3; border-radius: 6px; position: relative; background: var(--yao-bg-soft); isolation: isolate; }
.gallery-preview::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--yao-border) 1px, transparent 1px), linear-gradient(90deg, var(--yao-border) 1px, transparent 1px); background-size: 22px 22px; opacity: .3; z-index: -1; }
.gallery-preview .preview-symbol { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--yao-muted); }
.preview-symbol img { width: 44px; height: 44px; opacity: .5; }
.preview-symbol span { font: 8px var(--yao-mono); letter-spacing: .1em; }
.gallery-preview iframe { width: 1200px; height: 900px; position: absolute; top: 0; left: 0; transform-origin: top left; border: 0; pointer-events: none; background: #fff; opacity: 0; }
.gallery-preview[data-preview-state="ready"] iframe { opacity: 1; }
.gallery-preview[data-preview-state="ready"] .preview-symbol { visibility: hidden; }
.gallery-preview[data-preview-warning="true"]::after { content: "原作脚本异常 · 可打开详情"; position: absolute; bottom: 6px; left: 6px; right: 6px; background: #fff3d8; color: #68471c; font-size: 10px; line-height: 1.6; padding: 3px 6px; border-radius: 4px; }
.preview-symbol span { text-align: center; padding: 0 10px; line-height: 1.8; }
.gallery-retry { display: block; margin: 8px auto 0; border: 1px solid var(--yao-border); border-radius: 6px; padding: 6px 12px; background: var(--yao-surface); color: var(--yao-accent-ink); font-size: 11px; }
.gallery-view-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(30, 35, 26, .08); opacity: 0; transition: opacity .18s; }
.gallery-view-overlay span { display: inline-flex; align-items: center; gap: 7px; background: var(--yao-surface); border: 1px solid var(--yao-border); border-radius: 7px; padding: 9px 13px; font-size: 11px; color: var(--yao-text); }
.gallery-cover-link:hover .gallery-view-overlay, .gallery-cover-link:focus-visible .gallery-view-overlay { opacity: 1; }
.gallery-banner { position: absolute; top: 8px; left: 8px; padding: 4px 7px; border-radius: 4px; color: #5c411c; background: #f5e4ae; font-size: 9px; z-index: 1; }
.gallery-banner.radiant { background: #f9d4b8; color: #833d1b; }
.gallery-card-body { padding: 16px 16px 0; }
.gallery-card-meta { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 9px; }
.gallery-card-meta span { font: 9px var(--yao-mono); color: var(--yao-muted); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.gallery-card h2 { font-size: 13px; font-weight: 580; letter-spacing: -.02em; margin: 0 0 8px; line-height: 1.6; overflow-wrap: anywhere; }
.gallery-card h2 a { text-decoration: none; }
.gallery-card .gallery-prompt { color: var(--yao-muted); font-size: 10px; line-height: 1.85; margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 37px; }
.gallery-card .gallery-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 13px; }
.gallery-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; border-top: 1px solid var(--yao-border); padding: 9px 13px; margin-top: 15px; }
.gallery-card-foot span { font: 9px var(--yao-mono); color: var(--yao-muted); }
.compare-pick { display: flex; align-items: center; gap: 5px; background: transparent; color: var(--yao-muted); border: 0; font-size: 10px; padding: 7px 3px; min-height: 30px; }
.compare-pick::before { content: "+"; font: 15px var(--yao-mono); }
.compare-pick[aria-pressed="true"] { color: var(--yao-accent-ink); }
.compare-pick[aria-pressed="true"]::before { content: "✓"; font-size: 12px; }
.gallery-board[data-view="list"] { grid-template-columns: 1fr; gap: 12px; }
.gallery-board[data-view="list"] .gallery-card { display: grid; grid-template-columns: 190px 1fr 120px; align-items: center; }
.gallery-board[data-view="list"] .gallery-cover-link { margin: 10px; }
.gallery-board[data-view="list"] .gallery-card-body { padding: 16px 20px; }
.gallery-board[data-view="list"] .gallery-card-foot { border: 0; border-left: 1px solid var(--yao-border); display: grid; align-content: center; height: 100%; margin: 0; padding: 20px; }
.gallery-board .yao-empty { grid-column: 1/-1; }
.gallery-skeleton { border: 1px solid var(--yao-border); background: var(--yao-surface); border-radius: 12px; padding: 10px; }
.gallery-skeleton .skeleton-cover { background: var(--yao-bg-soft); aspect-ratio: 4/3; border-radius: 6px; }
.gallery-skeleton .skeleton-line { height: 9px; width: 65%; background: var(--yao-bg-soft); border-radius: 4px; margin: 18px 6px; }
.gallery-skeleton .skeleton-line:last-child { width: 42%; }
.gallery-footer-note { border-top: 1px solid var(--yao-border); margin-top: 28px; padding-top: 20px; color: var(--yao-muted); font-size: 11px; line-height: 1.9; display: flex; justify-content: space-between; gap: 24px; }
.compare-dock { position: fixed; z-index: 80; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 18px; width: min(640px, calc(100% - 36px)); background: var(--yao-night); color: #f4f5e9; border: 1px solid #56624b; border-radius: 12px; box-shadow: var(--yao-shadow-float); }
.compare-dock .dock-copy { display: grid; gap: 5px; font-size: 12px; }
.compare-dock small { color: #bec6b1; font-size: 10px; }
.compare-dock .dock-actions { display: flex; align-items: center; gap: 10px; }
.compare-dock .dock-actions > button { border: 0; padding: 7px; font-size: 11px; background: transparent; color: #bec6b1; }
.compare-dock .yao-btn { background: #eea36d; color: #332b1e; border-color: transparent; }
.compare-dialog { width: min(1060px, calc(100vw - 32px)); }
.compare-grid { display: grid; gap: 18px; padding: 24px; grid-template-columns: repeat(var(--compare-count, 2), minmax(0, 1fr)); }
.compare-column { min-width: 0; }
.compare-column h3 { margin: 0 0 12px; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.compare-preview { border: 1px solid var(--yao-border); border-radius: 8px; }
.compare-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; }
.compare-column dl { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px 8px; margin: 20px 0; font-size: 11px; }
.compare-column dt { color: var(--yao-muted); }
.compare-column dd { margin: 0; color: var(--yao-text); overflow-wrap: anywhere; line-height: 1.8; }
.compare-column .compare-prompt { font-size: 11px; color: var(--yao-muted); line-height: 1.9; max-height: 130px; overflow: auto; white-space: pre-wrap; }
.gallery-admin-link { display: inline-flex; gap: 6px; font-size: 11px; color: var(--yao-muted); text-decoration: none; }
@media (max-width: 1120px) { .gallery-layout { grid-template-columns: 155px 1fr; gap: 24px; } .gallery-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .gallery-layout { grid-template-columns: 1fr; gap: 18px; padding-top: 20px; }
  .gallery-sidebar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; position: static; }
  .gallery-sidebar .sidebar-title, .gallery-sidebar-note, #channel-side { display: none; }
  .gallery-side-option { width: auto; margin: 0; font-size: 11px; padding: 8px 10px; min-height: 36px; }
  .gallery-filterbar { margin-bottom: 20px; }
  .gallery-mast { padding-top: 36px; }
  .gallery-seal { width: 92px; height: 92px; }
  .gallery-board[data-view="list"] .gallery-card { grid-template-columns: 155px 1fr 110px; }
}
@media (max-width: 620px) {
  .gallery-mast { grid-template-columns: 1fr; gap: 18px; padding-bottom: 26px; }
  .gallery-mast h1 { font-size: 36px; margin-top: 16px; }
  .gallery-seal { display: none; }
  .gallery-filterbar { grid-template-columns: 1fr 1fr; gap: 14px 10px; padding: 15px; }
  .gallery-toolbar { gap: 8px; }
  .gallery-toolbar .share-filter { font-size: 0; gap: 0; width: 40px; padding: 0; }
  .gallery-toolbar .share-filter svg { width: 16px; }
  .gallery-board { gap: 14px 10px; }
  .gallery-card-body { padding: 13px 11px 0; }
  .gallery-cover-link { margin: 7px 7px 0; }
  .gallery-card-meta { gap: 3px; margin-bottom: 7px; }
  .gallery-card-meta span { font-size: 8px; }
  .gallery-card h2 { font-size: 12px; }
  .gallery-card .gallery-tags { gap: 4px; margin-top: 10px; }
  .gallery-tags .yao-tag { padding: 3px 5px; font-size: 8px; }
  .gallery-card-foot { padding: 7px 9px; }
  .gallery-card-foot > span { font-size: 8px; }
  .compare-pick { font-size: 9px; gap: 3px; }
  .gallery-card .gallery-prompt { font-size: 9px; }
  .gallery-board[data-view="list"] .gallery-card { grid-template-columns: 110px 1fr; }
  .gallery-board[data-view="list"] .gallery-card-body { padding: 13px 10px; }
  .gallery-board[data-view="list"] .gallery-card-foot { grid-column: 1/-1; height: auto; border-left: 0; border-top: 1px solid var(--yao-border); display: flex; padding: 7px 12px; }
  .gallery-footer-note { flex-direction: column; gap: 10px; }
  .compare-grid { grid-template-columns: 1fr; padding: 20px; }
  .compare-column + .compare-column { padding-top: 20px; border-top: 1px solid var(--yao-border); }
}
@media (max-width: 359px) { .gallery-board { grid-template-columns: 1fr; } }