.ux{max-width:1560px;margin:auto;padding:26px;color:var(--text-color,#f2ecff)}.ux *{box-sizing:border-box}.ux h1{font-size:clamp(28px,3vw,42px)}.ux header p{max-width:950px;color:#c9bed8;line-height:1.65}.ux-eyebrow{color:#b995ed;letter-spacing:.09em;font-size:13px}.ux-command{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:18px 0}.ux button{font:inherit;border:1px solid #685584;background:#372947;color:#f4efff;border-radius:10px;padding:12px 16px;cursor:pointer}.ux button.primary{background:#8553d3;font-weight:700}.ux button:disabled{opacity:.4;cursor:default}.ux label{display:grid;gap:8px;margin-bottom:15px;min-width:0;font-size:14px}.ux-command label{margin:0;flex:0 1 250px}.ux input,.ux select,.ux textarea{width:100%;max-width:100%;min-width:0;font:inherit;color:#f4efff;background:#171120;border:1px solid #675578;border-radius:9px;padding:11px}.ux textarea{resize:vertical;line-height:1.5;font-family:ui-monospace,Consolas,monospace;font-size:13px}.ux input:focus-visible,.ux textarea:focus-visible,.ux button:focus-visible,.ux select:focus-visible{outline:2px solid #cda5fa;outline-offset:3px}.ux-workspace{display:grid;grid-template-columns:minmax(330px,.85fr) minmax(0,1.6fr);gap:22px;align-items:start}.ux-input,.ux-result{min-width:0;padding:22px;border:1px solid #4d3b67;border-radius:16px;background:#251c33}.ux h2{margin:0 0 18px;font-size:22px}.ux-status{padding:14px 18px;border-left:4px solid #af7deb;background:#2c203d;white-space:pre-wrap}.ux-status[data-error=true]{border-color:#ff8ba1}.ux-muted{font-size:13px;color:#beafce;display:block;margin:9px 0 16px}.ux details{margin:18px 0}.ux summary{cursor:pointer;padding:9px 0;color:#dcc3fb}.ux-table{overflow:auto;max-height:620px;min-height:100px}.ux table{width:100%;border-collapse:collapse;font-size:14px}.ux th,.ux td{text-align:left;padding:12px;border-bottom:1px solid #51405f;vertical-align:top;max-width:400px;overflow-wrap:anywhere}.ux th{background:#382746;position:sticky;top:0;z-index:1;white-space:nowrap}.ux td{white-space:pre-wrap}.ux-pager{display:flex;gap:15px;justify-content:center;align-items:center;margin:20px 0}.ux-warning{padding:11px 14px;margin:9px 0;background:#ffffff07;border-left:3px solid #c096ed;overflow-wrap:anywhere}.ux p{overflow-wrap:anywhere;line-height:1.55}#uxPreview{max-height:500px}.ux-second-file{margin-top:7px}.ux-input>label{margin-top:18px}@media(min-width:1100px){.ux-input{position:sticky;top:100px;max-height:calc(100dvh - 125px);overflow-y:auto;scrollbar-width:thin}}@media(max-width:900px){.ux-workspace{grid-template-columns:1fr}.ux{padding:15px}.ux-input,.ux-result{padding:17px}.ux-command button{flex:1 1 140px}.ux-pager{flex-wrap:wrap}.ux-table{max-height:440px}}

.ux td{min-width:120px}.ux td:first-child{min-width:170px}.ux-table{overscroll-behavior-x:contain}


/* Main toolbar: one framed bar; file pickers look like buttons; project actions sit apart and quieter; Run first on phones. */
.ux .ux-command:has(#uxRun){gap:8px;align-items:center;padding:10px;border:1px solid #4d3d66;border-radius:14px;background:#221a2e;margin:16px 0 12px}
.ux .ux-command:has(#uxRun) button{flex:0 0 auto;padding:10px 16px;font-weight:600}
.ux .ux-command:has(#uxRun) label:has(input[type=file]){position:relative;display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;margin:0;padding:10px 16px;border:1px solid #685584;border-radius:10px;background:#372947;color:#f4efff;font-weight:600;font-size:inherit;cursor:pointer}
.ux .ux-command:has(#uxRun) label:has(input[type=file]):hover{background:#463459}
.ux .ux-command:has(#uxRun) label:has(input[type=file]):focus-within{outline:2px solid #cda5fa;outline-offset:3px}
.ux .ux-command:has(#uxRun) label:has(input:disabled){opacity:.4;cursor:default}
.ux .ux-command:has(#uxRun) input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:0}
.ux .ux-command:has(#uxRun) label:has(#uxFile)::before{content:'📂'}
.ux .ux-command:has(#uxRun) label:has(#uxProject)::before{content:'🗂'}
.ux .ux-command:has(#uxRun) #uxSave{margin-left:auto}
.ux .ux-command:has(#uxRun) :is(#uxSave,label:has(#uxProject)){background:transparent;border-color:#4d3d66;font-weight:500;font-size:.93em;padding:9px 13px}
@media(max-width:600px){.ux .ux-command:has(#uxRun){display:grid;grid-template-columns:1fr 1fr}
 .ux .ux-command:has(#uxRun) #uxRun{grid-column:1/-1;order:-1}
 .ux .ux-command:has(#uxRun) :is(button,label){justify-content:center;width:100%;box-sizing:border-box}
 .ux .ux-command:has(#uxRun) #uxSave{margin-left:0}}
@media(max-width:600px){.ux .ux-command:has(#uxRun){align-items:stretch}.ux .ux-command:has(#uxRun) :is(button,label){white-space:nowrap;padding:10px 8px;font-size:14px;min-height:44px}.ux .ux-command:has(#uxRun) #uxClear{order:5;grid-column:1/-1}}