.reference-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid #494329;background:#1b1b14;border-radius:14px;padding:20px 24px;margin:0 0 24px}.reference-intro strong{display:block;font-size:19px;color:#ffeb3b}.reference-intro p{margin:6px 0 0;color:#b4b4ba;line-height:1.5}.reference-filters{display:flex;gap:12px;margin:0 0 24px;flex-wrap:wrap}.reference-filters label{display:flex;align-items:center;gap:10px;color:#aaa;font-size:13px}.reference-filters select{font:inherit;color:#eee;background:#222326;border:1px solid #444;border-radius:8px;padding:10px}.external-card .card-media-label{border-color:#655b20;color:#ffe52d}.external-card .card-bottom span:first-child{color:#bdb9a1}#referenceDialog{width:min(1360px,96vw);max-width:96vw;max-height:94dvh;padding:0;background:#151619;color:#f5f5f6;border:1px solid #45464a;border-radius:20px;overflow:auto}#referenceDialog::backdrop{background:#000c;backdrop-filter:blur(5px)}.ref-shell{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(400px,1.15fr);position:relative}.ref-preview-side{padding:30px;background:#0e0f10;position:sticky;top:0;align-self:start;min-height:94dvh}.ref-player{height:66dvh;min-height:300px;display:flex;justify-content:center;background:black;border-radius:14px;overflow:hidden;margin:18px 0}.ref-player iframe{display:block;width:100%;height:100%;border:0}.ref-source-badge{font-size:12px;font-weight:700;letter-spacing:1.5px;color:#ffe52d}.ref-source-note{font-size:13px;color:#999;line-height:1.5}.ref-preview-side .text-link{display:inline-block;margin:12px 12px 10px 0;color:#ffe52d}.ref-preview-side .button{padding:10px;font-size:13px}.ref-content{padding:60px 34px 32px}.ref-content h2{font-size:34px;margin:16px 0}.ref-content h3{font-size:22px}.ref-explanation{color:#b4b4bc;line-height:1.6}.ref-content .template-fields{display:grid;gap:18px}.ref-content label{display:grid;gap:8px;font-size:14px}.ref-content label span{font-size:12px;color:#aaa}.ref-content input,.ref-content select,.ref-content textarea:not(#refPrompt){font:inherit;background:#101112;color:#eee;padding:12px;border:1px solid #4a4b50;border-radius:8px;width:100%}.ref-content details{line-height:1.5}.ref-content details label{margin-top:14px}.ref-content .template-studio{padding:20px;margin-top:24px}.ref-content .prompt-box textarea{height:340px}.ref-content .prompt-box>div{padding:14px;gap:10px}.ref-content .prompt-box span{font-size:12px}#refGenerate{margin-top:18px}#refPhotoPreview{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}#refPhotoPreview[hidden]{display:none}#refPhoto{width:76px;height:76px;object-fit:contain;border-radius:8px;background:#222}#refPhotoName{max-width:220px;overflow-wrap:anywhere;font-size:12px}#refRemovePhoto{border:0;background:transparent;color:#ddd;text-decoration:underline;cursor:pointer}#refStatus{min-height:24px;color:#ffe52d;font-size:14px}.ref-content .download-actions{margin-top:18px}.ref-content button:disabled{opacity:.45;cursor:not-allowed}.ref-content input:focus,.ref-content textarea:focus{outline:2px solid #ffe52d;outline-offset:2px}@media(max-width:800px){.ref-shell{display:block}.ref-preview-side{position:relative;min-height:0;padding:24px}.ref-player{height:60dvh}.ref-content{padding:28px 22px}.ref-content h2{font-size:28px}.reference-intro{align-items:flex-start;flex-direction:column}.reference-intro .button{width:100%;justify-content:center}}@media(prefers-reduced-motion:reduce){#referenceDialog *{scroll-behavior:auto!important}}
.reference-intro[hidden],.reference-filters[hidden]{display:none}
#refClose{position:sticky;top:12px;right:auto;display:flex;margin:12px 12px -56px auto;z-index:5}