:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0b1020; color: #edf2ff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: linear-gradient(135deg, #0b1020 0%, #111a33 54%, #0b1020 100%); }
button, textarea, select, input { font: inherit; }
.shell { width: min(1080px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 36px; }
.hero { margin-bottom: 16px; }
.eyebrow { margin: 0 0 6px; color: #8fb3ff; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; font-weight: 800; }
h1 { margin: 0; font-size: clamp(32px, 5.5vw, 52px); line-height: 1; letter-spacing: -.04em; }
.desc { max-width: 720px; margin: 12px 0 0; color: #b8c3df; line-height: 1.5; }
.panel { background: rgba(15, 23, 42, .86); border: 1px solid rgba(148, 163, 184, .24); border-radius: 2px; padding: 16px; margin: 12px 0; box-shadow: 0 18px 50px rgba(0,0,0,.22); backdrop-filter: blur(12px); }
.label { display: block; margin: 0 0 7px; color: #cbd5e1; font-size: 13px; font-weight: 800; }
textarea, select, input[type=file] { width: 100%; border: 1px solid rgba(148, 163, 184, .34); border-radius: 2px; background: rgba(2, 6, 23, .72); color: #f8fafc; padding: 10px 11px; outline: none; }
#images { font-size: 12px; }
textarea { min-height: 104px; resize: vertical; }
select, input[type=file] { min-height: 42px; }
textarea:focus, select:focus, input[type=file]:focus { border-color: #7aa2ff; box-shadow: 0 0 0 2px rgba(122, 162, 255, .18); }
.row { display: flex; gap: 10px; margin: 10px 0; align-items: end; flex-wrap: wrap; }
.field { min-width: 180px; flex: 0 0 210px; }
.grow { flex: 1 1 320px; }
button { border: 0; border-radius: 2px; background: #7aa2ff; color: #071126; padding: 9px 14px; font-weight: 900; cursor: pointer; min-height: 38px; }
button:disabled { opacity: .5; cursor: progress; }
.ghost { background: rgba(148, 163, 184, .14); color: #e2e8f0; border: 1px solid rgba(148, 163, 184, .24); }
.msg { min-height: 22px; margin: 10px 0 0; color: #a7f3d0; }
.sectionHead { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.sectionHead h2 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.history { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pager { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 0 0; color: #cbd5e1; }
.pager button:disabled { opacity: .35; cursor: default; }
.card { overflow: hidden; border-radius: 2px; border: 1px solid rgba(148, 163, 184, .22); background: rgba(2, 6, 23, .52); cursor: pointer; transition: transform .14s ease, border-color .14s ease, background .14s ease; }
.card:hover { transform: translateY(-1px); border-color: rgba(122, 162, 255, .72); background: rgba(2, 6, 23, .68); }
.thumb { aspect-ratio: 1 / 1; background: #111827; display: grid; place-items: center; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.placeholder { font-size: 42px; color: #64748b; animation: pulse 1.3s infinite ease-in-out; }
.card.error .placeholder { color: #fb7185; animation: none; }
@keyframes pulse { 50% { opacity: .35; } }
.meta { padding: 11px; }
.line { display: flex; justify-content: space-between; gap: 10px; color: #93a4c7; font-size: 12px; }
.badge { color: #071126; background: #93c5fd; border-radius: 2px; padding: 2px 7px; font-weight: 900; }
.done .badge { background: #86efac; }
.error .badge { background: #fda4af; }
.prompt { margin: 8px 0 7px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.errorText { margin: 6px 0; color: #fecdd3; font-size: 12px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cardActions, .detailActions { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.sub, .empty { color: #94a3b8; }
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px; }
.shade { position: absolute; inset: 0; background: rgba(2, 6, 23, .76); }
.dialog { position: relative; width: min(860px, 100%); max-height: 88vh; overflow: auto; background: #0f172a; border: 1px solid rgba(148, 163, 184, .32); border-radius: 2px; padding: 20px; box-shadow: 0 30px 90px rgba(0,0,0,.55); }
.close { position: sticky; top: 0; float: right; width: 36px; height: 36px; padding: 0; background: rgba(148, 163, 184, .18); color: #fff; }
.detailImg { width: 100%; border-radius: 2px; margin: 8px 0 16px; }
.details { display: grid; grid-template-columns: 130px 1fr; gap: 10px 14px; }
dt { color: #93a4c7; font-weight: 800; }
dd { margin: 0; min-width: 0; }
pre { white-space: pre-wrap; word-break: break-word; margin: 0; padding: 11px; background: rgba(2, 6, 23, .65); border-radius: 2px; color: #dbeafe; }
.promptBox { display: grid; gap: 8px; }
.promptDetails summary { cursor: pointer; color: #8fb3ff; font-weight: 800; margin-bottom: 8px; }
.ipmptPanel { margin: 8px 0 16px; padding: 12px; border: 1px solid rgba(240, 164, 107, .28); background: rgba(240, 164, 107, .08); border-radius: 2px; }
.ipmptPanel h3 { margin: 0 0 4px; font-size: 18px; }
.ipmptPanel .sub { margin: 0 0 10px; }
.copyBtn { justify-self: start; padding: 7px 11px; font-size: 13px; background: rgba(122, 162, 255, .18); color: #dbeafe; border: 1px solid rgba(122, 162, 255, .38); }
.copyBtn:disabled { cursor: default; opacity: .85; }
.miniBtn, .retryDetail, .deleteDetail { margin-top: 9px; padding: 7px 11px; font-size: 13px; background: rgba(251, 113, 133, .16); color: #fecdd3; border: 1px solid rgba(251, 113, 133, .38); min-height: 34px; }
.ipmptBtn, .ipmptDetail { background: rgba(240, 164, 107, .18); color: #fed7aa; border-color: rgba(240, 164, 107, .45); }
.savedMark { align-self: center; color: #fed7aa; border: 1px solid rgba(240, 164, 107, .38); background: rgba(240, 164, 107, .12); border-radius: 2px; padding: 6px 9px; font-size: 12px; font-weight: 800; }
.danger, .deleteDetail { background: rgba(248, 113, 113, .2); color: #fee2e2; border-color: rgba(248, 113, 113, .55); }
.retryDetail, .deleteDetail { margin: 0 0 14px; }
.pickerSearch { width: 100%; margin: 8px 0 12px; border: 1px solid rgba(148, 163, 184, .34); border-radius: 2px; background: rgba(2, 6, 23, .72); color: #f8fafc; padding: 10px 11px; outline: none; }
.pickerList { display: grid; gap: 8px; max-height: 52vh; overflow: auto; }
.pickerItem { display: grid; grid-template-columns: 56px 1fr; gap: 10px; width: 100%; text-align: left; border: 1px solid rgba(148, 163, 184, .24); background: rgba(2, 6, 23, .58); color: #e2e8f0; border-radius: 2px; padding: 8px; align-items: center; }
.pickerItem img, .pickerNoThumb { width: 56px; height: 56px; object-fit: cover; background: rgba(15, 23, 42, .9); display: grid; place-items: center; color: #94a3b8; }
.pickerMeta { display: grid; gap: 4px; min-width: 0; }
.pickerMeta span { color: #94a3b8; font-size: 12px; line-height: 1.35; }
@media (max-width: 620px) { .shell { width: min(100% - 20px, 1080px); padding: 22px 0; } .panel { padding: 14px; border-radius: 2px; } .details { grid-template-columns: 1fr; } }