@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;600;700;800&display=swap');

:root{--bg:#101113;--panel:#17191d;--panel2:#1d2025;--line:#2d3139;--text:#f1f3f5;--muted:#8d949f;--lime:#c5f52b;--blue:#79a9ff;--red:#ff8a7a}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:14px Manrope,sans-serif}
body.lightbox-open{overflow:hidden}

.topbar{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 clamp(22px,5vw,80px);gap:20px}
.logo{font-size:20px;font-weight:800;letter-spacing:-.06em;color:var(--text);text-decoration:none}
.logo span{color:var(--lime);font:11px 'DM Mono';margin-left:7px}
.topline{height:1px;background:var(--line);flex:1}
.online{font-size:11px;color:var(--muted)}
.online i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime);margin-right:6px}
.admin-link{border:0;background:none;color:var(--muted);font:inherit;font-size:11px;cursor:pointer}

.app-shell{max-width:1720px;margin:auto;padding:clamp(45px,7vw,100px) clamp(22px,5vw,80px) 28px}
.intro{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:52px}
.kicker,.section-head small{font:500 10px 'DM Mono';letter-spacing:.14em;color:var(--lime);margin:0 0 13px}
.intro h1{font-size:clamp(48px,7vw,92px);line-height:.92;letter-spacing:-.08em;margin:0;font-weight:800}
.intro h1 span{color:var(--blue)}
.intro-copy{max-width:340px;color:var(--muted);line-height:1.8;margin:0 0 5px}

.studio-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:start}
.card{background:var(--panel);border:1px solid var(--line);min-height:520px;padding:22px;display:flex;flex-direction:column}
.section-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:18px;font-weight:700}
.section-head small{margin:0;color:var(--muted);font-size:9px}

.engine-panel.busy{border-color:var(--lime)}
.engine-panel.locked{opacity:.55}
.engine-panel.locked .drop-zone{pointer-events:none}

.panel-note{margin:-6px 0 14px;min-height:15px;color:var(--blue);font:500 11px 'DM Mono';line-height:1.4}
.drop-zone{border:1px dashed #454b56;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px 18px;min-height:230px}
.drop-zone.drag{border-color:var(--lime);background:#c5f52b0f}
.drop-body{display:flex;flex-direction:column;align-items:center}
.engine-panel.has-image .drop-body{display:none}
.drop-icon{font-size:42px;color:var(--lime);margin-bottom:16px;line-height:1}
.drop-zone strong{font-size:13px}
.drop-zone small{color:var(--muted);font-size:11px;margin-top:8px}
.input-preview{display:block;width:100%;height:190px;object-fit:contain;background:#0d0e10;border:1px solid var(--line);cursor:zoom-in}
.choose-button{margin-top:18px;padding:11px 18px;background:var(--text);color:#101113;font-weight:700;font-size:12px;cursor:pointer}
.choose-button input{display:none}

.fields{margin-top:18px}
.field{display:block;margin:0 0 16px}
.field span{display:block;font-size:12px;font-weight:700;margin-bottom:7px}
.field input,.field select,input,textarea{width:100%;border:1px solid var(--line);background:var(--panel2);color:var(--text);padding:11px 12px;outline:none;font:12px Manrope}
.field select{appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px}
.field input:focus,.field select:focus,textarea:focus{border-color:var(--lime)}

.run-button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:14px 15px;border:0;background:var(--lime);color:#0d0f0d;font:700 13px Manrope;cursor:pointer;margin-top:auto}
.run-button:disabled{background:#3a3f47;color:var(--muted);cursor:not-allowed}
.panel-status{min-height:16px;margin:12px 0 0;color:var(--muted);font:10px 'DM Mono';line-height:1.6}
.panel-status.ok{color:var(--lime)}
.panel-status.error{color:var(--red)}
.panel-status.busy{color:var(--blue)}

.result{overflow:hidden}
.result-empty,.result-pending{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;color:var(--muted);line-height:1.8}
.result-mark{font-size:38px;color:var(--blue)}
.result-pending p{color:var(--text);font-weight:700;margin:18px 0 0}
.result-pending small{color:var(--muted);font:10px 'DM Mono';margin-top:6px}
.spinner{width:34px;height:34px;border:2px solid var(--line);border-top-color:var(--lime);border-radius:50%;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.result-block{border-left:2px solid var(--blue);padding:10px 12px;line-height:1.7}
.result-block.failed{border-left-color:var(--red)}
.result-block.failed .status{color:var(--red)}
.result-block b{color:var(--red);font-size:12px}
.output-wrap{margin-top:12px}
.output-image{display:block;width:100%;max-height:330px;object-fit:contain;background:#0d0e10;border:1px solid var(--line);cursor:zoom-in}
.output-hint{margin:8px 0 0;color:var(--muted);font:10px 'DM Mono'}
.download-link{display:inline-block;margin-top:10px;padding:8px 11px;background:var(--text);color:#101113;text-decoration:none;font-size:11px;font-weight:700}
.status{color:var(--lime);font:10px 'DM Mono'}

.lightbox{position:fixed;inset:0;z-index:20;background:#08090af2;display:flex;align-items:center;justify-content:center;padding:30px}
.lightbox[hidden]{display:none}
.lightbox-content{display:flex;align-items:center;flex-direction:column;gap:15px}
.lightbox img{max-width:92vw;max-height:82vh;object-fit:contain;transform-origin:center;transition:transform .08s ease-out}
.lightbox button{position:absolute;top:18px;right:24px;color:#fff;background:none;border:0;font-size:36px;cursor:pointer}

dialog{width:min(620px,calc(100% - 32px));background:var(--panel);border:1px solid var(--line);color:var(--text);padding:28px}
dialog label{display:block;margin:17px 0;font-size:12px}
dialog textarea{height:170px}
.close{float:right;border:0;background:none;color:var(--muted);font-size:28px}
footer{display:flex;justify-content:space-between;color:#5f6670;font:10px 'DM Mono';padding-top:23px}

@media(max-width:1240px){.studio-grid{grid-template-columns:1fr 1fr}.result{grid-column:span 2}.intro{display:block}.intro-copy{margin-top:25px}}
@media(max-width:680px){.studio-grid{display:block}.card{margin-bottom:12px}.result{grid-column:auto}.topline{display:none}.online{margin-left:auto}.admin-link{display:none}}