:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #10131a; color: #f4f6fb; }
* { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top right, #243146, #10131a 55%); } .centered { display: grid; place-items: center; padding: 24px; } .card { background: rgba(25, 30, 41, .9); border: 1px solid #353e50; border-radius: 18px; box-shadow: 0 20px 70px #0005; padding: 28px; } .login-card { width: min(100%, 430px); } .eyebrow { color: #8ea5ff; font-size: 12px; font-weight: 800; letter-spacing: .16em; } h1, h2 { margin: 7px 0 18px; } h1 { font-size: clamp(24px, 4vw, 34px); } h2 { font-size: 19px; } .muted { color: #9da8bb; line-height: 1.5; } label { display: block; margin: 18px 0 8px; font-size: 13px; font-weight: 700; color: #c8d0df; } input, textarea, select { width: 100%; border: 1px solid #424d62; border-radius: 10px; background: #131822; color: inherit; padding: 12px; font: inherit; outline: none; } textarea { resize: vertical; } input:focus, textarea:focus, select:focus { border-color: #8297ff; } button, .download { display: inline-block; margin-top: 22px; border: 0; border-radius: 10px; padding: 12px 17px; background: #7c91ff; color: #10131a; font-weight: 800; cursor: pointer; text-decoration: none; } button:hover, .download:hover { background: #a5b4ff; } button.secondary { margin-top: 10px; padding: 8px 12px; background: #34405a; color: #eef1ff; font-size: 12px; } .error { color: #ff8b8b; min-height: 20px; } .topbar { max-width: 1220px; margin: 0 auto; padding: 34px 24px 18px; display: flex; justify-content: space-between; align-items: start; } .topbar h1 { margin-bottom: 0; } .ghost { margin-top: 0; background: transparent; border: 1px solid #424d62; color: #c8d0df; } .layout { max-width: 1220px; padding: 0 24px 40px; margin: auto; display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 20px; } .columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .preview-card { min-width: 0; } .preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .preview-head h2 { margin-bottom: 0; } .download { margin-top: 0; font-size: 13px; } .preview { min-height: 300px; margin-top: 20px; border: 1px dashed #424d62; border-radius: 12px; display: grid; place-items: center; overflow: auto; background: #0e1117; } .preview img { display: block; max-width: 100%; height: auto; } .preview p { color: #68758c; } @media (max-width: 760px) { .layout { grid-template-columns: 1fr; } .columns { grid-template-columns: 1fr; gap: 0; } }
 .picker-controls { position: relative; display: block; } .asset-search { padding-right: 48px; } .filter-button { position: absolute; z-index: 2; top: 5px; right: 5px; width: 34px; height: 34px; margin: 0; padding: 7px; border: 1px solid #424d62; border-radius: 8px; background: #28334a; color: #c8d0df; } .filter-button:hover, .filter-button[aria-expanded="true"] { background: #5369b4; } .filter-button svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .filter-menu { position: absolute; z-index: 5; top: calc(100% + 6px); right: 0; width: 132px; padding: 5px; border: 1px solid #424d62; border-radius: 10px; background: #20283a; box-shadow: 0 12px 28px #0008; } .filter-menu[hidden] { display: none; } .filter-choice { display: block; width: 100%; margin: 0; padding: 8px 10px; border-radius: 6px; background: transparent; color: #c8d0df; text-align: left; font-size: 12px; font-weight: 600; } .filter-choice:hover, .filter-choice.active { background: #354568; color: #fff; } .option-list { display: flex; flex-direction: column; gap: 4px; max-height: 150px; overflow-y: auto; margin-top: 8px; padding: 4px; border: 1px solid #2d3545; border-radius: 8px; background: #0e1117; } .asset-option { width: 100%; margin: 0; padding: 7px 9px; border-radius: 6px; background: transparent; color: #c8d0df; text-align: left; font-size: 12px; font-weight: 600; } .asset-option:hover { background: #2c3852; } .asset-name, .asset-meta { display: block; } .asset-name { line-height: 1.25; } .asset-meta { margin-top: 2px; color: #7e8ba3; font-size: 10px; font-weight: 500; text-transform: lowercase; } .no-options { padding: 8px; color: #68758c; font-size: 12px; }
@media (min-width: 761px) { body { overflow: hidden; } .topbar { max-width: 1320px; padding: 22px 32px 12px; } .topbar h1 { font-size: 28px; margin: 4px 0 0; } .layout { max-width: 1320px; height: calc(100vh - 94px); padding: 0 32px 22px; grid-template-columns: 440px minmax(0, 1fr); gap: 16px; } .card { padding: 20px; min-height: 0; overflow: hidden; } .card h2 { margin: 0 0 12px; } .muted { margin: 6px 0; font-size: 13px; } #render-form > label { margin-top: 8px; } #render-form > input, #render-form > select { padding: 10px 12px; } .columns { gap: 12px; } .picker-controls { grid-template-columns: minmax(0, 1fr) 112px; gap: 6px; } .asset-search { min-height: 44px; padding: 10px 12px; font-size: 14px; } .asset-filter { min-height: 44px; padding: 8px; font-size: 12px; } .option-list { max-height: 112px; margin-top: 6px; } .asset-option { padding: 6px 8px; } .picker textarea { min-height: 58px; margin-top: 6px; } #render-form > button { margin-top: 14px; } .preview-card { display: flex; flex-direction: column; } .preview { flex: 1; min-height: 0; margin-top: 12px; } }
@media (max-width: 760px) { .picker-controls { grid-template-columns: 1fr 110px; } }
.button-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .button-row button { margin-top: 22px; } .modal { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(5, 8, 14, .78); } .modal[hidden] { display: none; } .modal-card { width: min(760px, 100%); max-height: 90vh; overflow: auto; padding: 24px; border: 1px solid #424d62; border-radius: 16px; background: #1b2230; box-shadow: 0 24px 80px #000b; } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .modal-head h2 { margin: 0; } .modal-card .secondary { margin-top: 0; } .modal-card textarea { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; line-height: 1.45; white-space: pre; }