@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";:root{--font-ui:"Inter", system-ui, sans-serif;--bg-a:#0b0b0f;--bg-b:#16121f;--card:#17171d;--card-border:#2a2a33;--input-bg:#0f0f14;--line:#3a3a45;--text:#f1f1f4;--text-dim:#9a9aa6;--accent:#a970ff;--accent-dim:#7a4fd0;--radius-card:16px;--radius-field:9px;--setup-width:360px;--shell-max:1320px}*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg, var(--bg-a) 0%, var(--bg-b) 100%);min-height:100vh;color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;background-attachment:fixed;overflow:hidden auto}#app{justify-content:center;min-height:100vh;padding:24px;display:flex}.shell{max-width:var(--shell-max);flex:1;gap:18px;min-width:0;display:flex}.setup{width:var(--setup-width);background:var(--card);border:1.5px solid var(--card-border);border-radius:var(--radius-card);flex-direction:column;flex-shrink:0;gap:26px;max-height:calc(100vh - 48px);padding:22px 22px 28px;display:flex;overflow-y:auto}.setup-title{letter-spacing:-.02em;background:linear-gradient(90deg, #fff, var(--accent));color:#0000;-webkit-background-clip:text;background-clip:text;font-size:26px;font-weight:800}.setup-sub{color:var(--text-dim);margin-top:8px;font-size:12.5px;line-height:1.5}.group{flex-direction:column;gap:12px;display:flex}.group-title{text-transform:uppercase;letter-spacing:.08em;color:var(--text);border-bottom:1px solid var(--card-border);align-items:baseline;gap:8px;padding-bottom:8px;font-size:13px;font-weight:700;display:flex}.group-hint{text-transform:none;letter-spacing:0;color:var(--text-dim);font-size:11px;font-weight:500}.note{color:var(--text-dim);font-size:11.5px;line-height:1.5}.upload-status{color:var(--text-dim);margin:2px 0 0;font-size:11.5px;line-height:1.5}.upload-status--ok{color:#43d17a}.upload-status--error{color:#ff6b6b}.field{flex-direction:column;gap:6px;display:flex}.field-row{gap:12px;display:flex}.field-row .field{flex:1;min-width:0}.field-label{color:var(--text-dim);justify-content:space-between;font-size:12px;font-weight:600;display:flex}.field-label output{color:var(--accent);font-variant-numeric:tabular-nums}.input{background:var(--input-bg);border:1px solid var(--line);border-radius:var(--radius-field);width:100%;height:38px;color:var(--text);font-family:var(--font-ui);outline:none;padding:0 12px;font-size:13.5px;transition:border-color .15s}.input:focus{border-color:var(--accent)}select.input{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239a9aa6' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat;padding-right:32px}textarea.input{resize:vertical;height:auto;padding:10px 12px}.range{width:100%;accent-color:var(--accent);cursor:pointer}.check{color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:9px;font-size:13px;display:flex}.check input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}.color-row{align-items:center;gap:8px;display:flex}.color{border:1px solid var(--line);border-radius:var(--radius-field);background:var(--input-bg);cursor:pointer;flex-shrink:0;width:40px;height:38px;padding:2px}.input-hex{text-transform:lowercase}.seg{background:var(--input-bg);border:1px solid var(--line);border-radius:var(--radius-field);gap:4px;padding:4px;display:flex}.seg-btn{height:30px;color:var(--text-dim);font-family:var(--font-ui);cursor:pointer;background:0 0;border:none;border-radius:6px;flex:1;font-size:12.5px;font-weight:600;transition:background .15s,color .15s}.seg-btn.selected{background:var(--accent);color:#fff}.seg-btn:not(.selected):hover{color:var(--text)}.btn{font-family:var(--font-ui);border-radius:var(--radius-field);cursor:pointer;border:1px solid var(--line);font-weight:600;transition:filter .15s,transform 50ms,background .15s,border-color .15s}.btn:active{transform:translateY(1px)}.btn-ghost{background:var(--input-bg);height:34px;color:var(--text);padding:0 14px;font-size:12.5px}.btn-ghost:hover{border-color:var(--accent)}.btn-primary{background:linear-gradient(90deg, var(--accent), var(--accent-dim));color:#fff;border:none;width:100%;height:44px;font-size:14.5px;font-weight:700}.btn-primary:hover{filter:brightness(1.08)}.btn-icon{background:var(--input-bg);width:38px;height:38px;color:var(--text-dim);flex-shrink:0;justify-content:center;align-items:center;display:flex}.btn-icon svg{width:17px;height:17px}.btn-icon:hover{color:var(--text);border-color:var(--accent)}.btn-icon.copied{color:#43d17a;border-color:#43d17a}.row-btns{flex-wrap:wrap;gap:8px;display:flex}.gif-list{flex-direction:column;gap:8px;display:flex}.gif-row{align-items:center;gap:8px;display:flex}.gif-url{flex:1;min-width:0}.gif-badge{text-transform:uppercase;letter-spacing:.05em;color:var(--accent);background:#a970ff24;border-radius:5px;flex-shrink:0;padding:3px 7px;font-size:10px;font-weight:700}.tokens{flex-wrap:wrap;gap:6px;display:flex}.token{color:var(--accent);cursor:pointer;background:#a970ff1a;border:1px solid #a970ff40;border-radius:6px;padding:3px 8px;font-family:SF Mono,ui-monospace,monospace;font-size:11.5px;transition:background .15s}.token:hover{background:#a970ff38}.templates{flex-direction:column;gap:12px;display:flex}.tpl{flex-direction:column;gap:6px;display:flex}.tpl-head{font-size:12.5px;font-weight:600}.combo{position:relative}.combo-list{border:1px solid var(--line);border-radius:var(--radius-field);z-index:20;background:#1c1c23;max-height:260px;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto;box-shadow:0 12px 32px #00000080}.combo-item{cursor:pointer;padding:9px 12px;font-size:15px}.combo-item:hover,.combo-item.selected{background:#a970ff2e}.stage{flex-direction:column;flex:1;gap:14px;min-width:0;display:flex}.stage-top{display:flex}.test-bar{background:var(--card);border:1.5px solid var(--card-border);border-radius:var(--radius-card);flex-wrap:wrap;align-items:center;gap:7px;width:100%;padding:12px 16px;display:flex}.test-label{text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);margin-right:4px;font-size:12px;font-weight:700}.test-btn{border:1px solid var(--line);background:var(--input-bg);height:30px;color:var(--text);font-family:var(--font-ui);cursor:pointer;border-radius:7px;padding:0 12px;font-size:12.5px;font-weight:600;transition:border-color .15s,background .15s}.test-btn:hover{border-color:var(--accent)}.test-btn--rand{border-color:var(--accent-dim);color:var(--accent)}.preview{background:var(--card);border:1.5px solid var(--card-border);border-radius:var(--radius-card);flex:1;min-height:380px;padding:14px;display:flex}.preview-canvas{background-color:#101014;background-image:linear-gradient(45deg,#1b1b22 25%,#0000 25%),linear-gradient(-45deg,#1b1b22 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#1b1b22 75%),linear-gradient(-45deg,#0000 75%,#1b1b22 75%);background-position:0 0,0 14px,14px -14px,-14px 0;background-size:28px 28px;border-radius:12px;flex:1;position:relative;overflow:hidden}#preview-frame{background:0 0;border:0;width:100%;height:100%;position:absolute;inset:0}.exportbar{background:var(--card);border:1.5px solid var(--card-border);border-radius:var(--radius-card);flex-direction:column;gap:12px;padding:16px;display:flex}.url-row{gap:8px;display:flex}.url-row .input{min-width:0;color:var(--text-dim);flex:1;font-family:SF Mono,ui-monospace,monospace;font-size:12px}@media (width<=900px){.shell{flex-direction:column}.setup{width:100%;max-height:none}.preview{min-height:320px}}