:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#f5f7fb;background:#0b0d12}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top,#171b25 0,#0b0d12 45%);min-height:100vh}
button,input,select,textarea{font:inherit}
.shell{max-width:1080px;margin:auto;padding:48px 24px 80px}
.hero,.jobsHead{display:flex;justify-content:space-between;gap:24px;align-items:flex-end}
.eyebrow{letter-spacing:.18em;font-size:12px;color:#8e98ad;margin:0 0 10px}
h1{font-size:clamp(36px,6vw,72px);line-height:.98;margin:0;max-width:760px}
h2{font-size:30px;margin:0}.sub{color:#9ca6b8;max-width:640px}
.status{padding:10px 14px;border:1px solid #2a3140;border-radius:999px;color:#9ca6b8;white-space:nowrap}
.status.ok{color:#baf4ce;border-color:#29583a;background:#102419}
.panel{margin-top:42px;padding:24px;border:1px solid #252b36;border-radius:24px;background:rgba(16,19,26,.88);box-shadow:0 24px 80px rgba(0,0,0,.28)}
form{display:grid;gap:18px}.grid{display:grid;grid-template-columns:1fr 180px;gap:16px}
label{display:grid;gap:8px;color:#d9deea;font-size:14px}
input,select,textarea{width:100%;background:#0d1016;color:#f6f7fa;border:1px solid #2a3140;border-radius:14px;padding:13px 14px;outline:none}
textarea{resize:vertical;min-height:110px}
input:focus,select:focus,textarea:focus{border-color:#667085}
button{border:0;border-radius:14px;padding:13px 18px;cursor:pointer;background:#f4f6fb;color:#0b0d12;font-weight:700}
button:disabled{opacity:.5;cursor:not-allowed}.ghost{background:transparent;color:#c9d0dc;border:1px solid #2a3140}
.jobsHead{margin-top:42px}.jobs{display:grid;gap:12px;margin-top:16px}
.job{display:grid;grid-template-columns:1fr auto;gap:16px;padding:18px;border-radius:18px;background:#11151c;border:1px solid #242a35}
.jobMeta{display:flex;gap:10px;flex-wrap:wrap;color:#8994a7;font-size:13px}.job h3{margin:0 0 8px;font-size:17px}
.badge{display:inline-flex;align-items:center;padding:5px 8px;border-radius:999px;background:#202633;color:#c8d0dd;text-transform:uppercase;font-size:11px;letter-spacing:.08em}
.badge.completed{background:#12301e;color:#baf4ce}.badge.failed{background:#35151a;color:#ffbec7}.badge.processing{background:#1b2842;color:#bed3ff}
.jobActions{display:flex;align-items:center;gap:8px}.small{padding:9px 12px;border-radius:10px;font-size:13px}
.empty{padding:28px;text-align:center;color:#7f899a;border:1px dashed #2a3140;border-radius:18px}
@media(max-width:700px){.hero,.jobsHead{align-items:flex-start;flex-direction:column}.grid{grid-template-columns:1fr}.job{grid-template-columns:1fr}.jobActions{justify-content:flex-start}.shell{padding:28px 16px 56px}}

@media(max-width:700px){
  html{-webkit-text-size-adjust:100%}
  body{min-width:320px}
  .shell{
    padding-left:max(16px,env(safe-area-inset-left));
    padding-right:max(16px,env(safe-area-inset-right));
    padding-bottom:max(56px,env(safe-area-inset-bottom));
  }
  h1{font-size:clamp(36px,11vw,52px);line-height:1.02}
  .panel{margin-top:28px;padding:18px;border-radius:20px}
  input,select,textarea,button{font-size:16px;min-height:48px}
  input[type=file]{padding:10px}
  textarea{min-height:120px}
  form>button{width:100%}
  .status{white-space:normal;max-width:100%}
  .jobMeta{gap:8px}
  .jobActions{width:100%}
  .jobActions button{flex:1}
}

@media(max-width:700px){
  html{-webkit-text-size-adjust:100%}
  body{min-width:320px}
  .shell{
    padding-left:max(16px,env(safe-area-inset-left));
    padding-right:max(16px,env(safe-area-inset-right));
    padding-bottom:max(56px,env(safe-area-inset-bottom));
  }
  h1{font-size:clamp(36px,11vw,52px);line-height:1.02}
  .panel{margin-top:28px;padding:18px;border-radius:20px}
  input,select,textarea,button{font-size:16px;min-height:48px}
  input[type=file]{padding:10px}
  textarea{min-height:120px}
  form>button{width:100%}
  .status{white-space:normal;max-width:100%}
  .jobMeta{gap:8px}
  .jobActions{width:100%}
  .jobActions button{flex:1}
}