:root { color: #1f2937; background: #f7f8fb; font-family: "Aptos", "Segoe UI", ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; color: #1f2937; background: #f7f8fb; }
button,input,select { font: inherit; }
.shell { width: min(1680px, calc(100% - 28px)); margin: 0 auto; padding: 18px 0 36px; }
.topbar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:end; border:1px solid #d6dde7; border-radius:14px; background:#fff; padding:18px; }
.kicker { margin:0 0 6px; color:#64748b; font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
h1 { margin:0; font-size:clamp(1.9rem,4.5vw,3.6rem); line-height:.95; text-transform:uppercase; }
.intro { margin:10px 0 0; color:#4b5563; max-width:72ch; line-height:1.5; font-size:.96rem; }
.stats { display:grid; grid-template-columns:repeat(3,minmax(110px,1fr)); gap:8px; }
.stats span { border:1px solid #e2e8f0; border-radius:10px; background:#fcfdff; padding:10px; color:#64748b; font-size:.8rem; font-weight:700; }
.stats strong { display:block; color:#0f172a; font-size:1.25rem; }
.controls-wrap { position:sticky; top:0; z-index:5; margin:14px 0; border:1px solid #d6dde7; border-radius:14px; background:rgba(247,248,251,.96); backdrop-filter:blur(6px); padding:10px; }
.controls { display:grid; grid-template-columns:minmax(260px,1.5fr) repeat(2,minmax(150px,.5fr)); gap:8px; }
label { display:grid; gap:5px; }
label span { color:#64748b; font-size:.74rem; font-weight:700; }
input,select { min-height:42px; width:100%; border:1px solid #d0d7e2; border-radius:10px; background:#fff; color:#111827; outline:none; padding:0 10px; }
input:focus,select:focus { border-color:#60a5fa; box-shadow:0 0 0 3px rgba(96,165,250,.22); }
button,.viewer-actions a { min-height:40px; border:1px solid #d0d7e2; border-radius:10px; background:#fff; color:#0f172a; cursor:pointer; padding:0 12px; text-decoration:none; font-weight:700; line-height:38px; transition:background-color .15s ease,border-color .15s ease,color .15s ease; }
button:hover,.viewer-actions a:hover { border-color:#bfdbfe; background:#f8fbff; }
button:focus-visible,.viewer-actions a:focus-visible,.thumb-button:focus-visible,.copy-card:focus-visible { outline:3px solid rgba(96,165,250,.35); outline-offset:1px; }
.status-line { margin:8px 2px 2px; color:#475569; font-size:.88rem; font-weight:600; }
.status-line.error { color:#b91c1c; }
.gallery { column-count:6; column-gap:12px; }
.tile { display:inline-block; width:100%; overflow:hidden; margin:0 0 12px; border:1px solid #dde5ef; border-radius:12px; background:#fff; text-align:left; break-inside:avoid; page-break-inside:avoid; transition:transform .16s ease,border-color .16s ease; }
.tile:hover,.tile:focus-within { border-color:#bfdbfe; transform:translateY(-1px); }
.thumb-button { display:block; width:100%; border:0; border-radius:0; background:transparent; cursor:zoom-in; padding:0; min-height:unset; }
.tile img { display:block; width:100%; height:auto; object-fit:contain; }
.tile-info { display:grid; gap:7px; border-top:1px solid #e9eef5; padding:8px; }
.tile-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.model-tag { display:inline-flex; max-width:100%; overflow:hidden; border:1px solid #dbe6f4; border-radius:999px; background:#f8fbff; padding:3px 8px; color:#1d4ed8; text-overflow:ellipsis; white-space:nowrap; font-size:.72rem; font-weight:700; }
.prompt-excerpt { display:-webkit-box; margin:0; overflow:hidden; color:#334155; font-size:.82rem; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.copy-card { flex:0 0 auto; min-height:28px; border-radius:999px; padding:0 9px; font-size:.72rem; line-height:26px; }
.load-more { display:flex; justify-content:center; padding:24px 0 0; }

/* modal */
dialog { width:min(1380px,calc(100% - 28px)); height:min(92vh,1080px); max-height:calc(100vh - 28px); border:1px solid #d0d7e2; border-radius:12px; background:#fff; color:#0f172a; padding:0; overflow:hidden; }
dialog::backdrop { background: rgba(2, 6, 23, 0.62); }
#viewer { grid-template-columns:minmax(0,1.4fr) minmax(320px,1fr); }
#viewer[open] { display:grid; }
#viewer img { width:100%; height:100%; min-height:0; object-fit:contain; background:#f8fafc; }
#viewer aside { display:grid; grid-template-rows:auto auto minmax(0,1fr); gap:10px; min-height:0; overflow:hidden; padding:18px; }
#viewerModel { margin:0; color:#1e3a8a; font-size:.78rem; font-weight:700; text-transform:uppercase; }
#viewerTitle { margin:0; font-size:1.1rem; line-height:1.35; }
.prompt-panel { min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr); border:1px solid #e2e8f0; border-radius:10px; background:#f8fafc; overflow:hidden; }
.prompt-panel-head { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid #e2e8f0; background:#f8fafc; padding:10px; }
.prompt-panel-head > span { color:#475569; font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
#viewerPrompt { margin:0; min-height:0; overflow:auto; padding:10px; white-space:pre-wrap; word-break:break-word; line-height:1.5; }
.viewer-actions { display:flex; flex-wrap:wrap; gap:8px; }
.viewer-actions button,.viewer-actions a { min-height:34px; line-height:32px; border-radius:999px; font-size:.8rem; padding:0 12px; }
.close { position:absolute; top:10px; right:10px; z-index:2; width:38px; height:38px; min-height:38px; border-radius:999px; padding:0; line-height:34px; font-size:1.1rem; }

@media (max-width:1400px){.gallery{column-count:5;}}
@media (max-width:1200px){.gallery{column-count:4;}}
@media (max-width:940px){
  .topbar{grid-template-columns:1fr;}
  .stats{grid-template-columns:repeat(3,minmax(90px,1fr));}
  .controls{grid-template-columns:1fr;}
  .gallery{column-count:3;}
  #viewer{grid-template-columns:1fr; grid-template-rows:minmax(220px,42vh) minmax(0,1fr);} 
  #viewer img{height:100%;}
}
@media (max-width:640px){
  .shell{width:min(1680px,calc(100% - 14px));}
  .gallery{column-count:2;}
  .topbar,.controls-wrap{border-radius:10px;}
  .stats{grid-template-columns:1fr 1fr;}
  dialog{width:calc(100% - 12px); max-height:calc(100vh - 12px); border-radius:10px;}
  #viewer aside{padding:12px; gap:8px;}
  .prompt-panel-head{padding:8px; align-items:flex-start; flex-direction:column;}
  .viewer-actions{width:100%;}
}