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

:root{

  --bg:#f5f6fb; --card:#ffffff; --field:#f0f2f8;
  --text:#0f1629; --muted:#6b7391;
  --border:#e4e7f2; --accent:#454CEE; --accent-hover:#1D20EE;
  --accent-soft:#8B93FF; --ok:#2ea86b; --err:#e5484d;
  --radius:20px; --radius-lg:26px;
  --shadow:0 6px 30px rgba(30,40,90,.07);
}
html.dark, [data-theme="dark"]{

  --bg:#0F1629; --card:#151C31; --field:#182039;
  --text:#ffffff; --muted:#8A93B2;
  --border:#242B47; --accent:#454CEE; --accent-hover:#1D20EE;
  --accent-soft:#8B93FF; --ok:#4ade80; --err:#f87171;
  --shadow:0 8px 40px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-0.01em;
  transition:background .25s,color .25s;
  min-height:100vh;
}


.topbar{
  display:flex;justify-content:space-between;align-items:center;
  max-width:1000px;margin:0 auto;
  padding:24px 24px;
}
.brand{
  font-weight:800;font-size:20px;
  display:flex;gap:10px;align-items:center;
  letter-spacing:-0.02em;
}
.logo.tw-logo{
  display:inline-flex;align-items:baseline;gap:0;text-decoration:none;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-weight:800;letter-spacing:-0.03em;line-height:1;font-size:22px;
}
.tw-logo-main,
.tw-logo-precloud,
.tw-logo-cloud{
  display:inline-block;margin-left:0;transform:translateX(0);
  transition:transform 220ms ease,color 220ms ease;
}
.tw-logo-main{color:var(--text)}
.tw-logo-precloud{color:var(--accent);display:inline-flex;align-items:center}
.tw-logo-cloud{color:var(--accent)}
.tw-arrow{height:0.62em;width:auto;display:block;color:var(--accent)}

.tw-logo-pill{
  margin-left:10px;align-self:center;
  font-size:0.42em;font-weight:700;letter-spacing:0.04em;text-transform:lowercase;
  padding:0.35em 0.7em;border-radius:999px;
  color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  transition:transform 220ms ease,color 220ms ease,background 220ms ease,border-color 220ms ease;
}

.tw-logo:hover .tw-logo-cloud,
.tw-logo:hover .tw-logo-pill{transform:translateX(10px)}

.actions{display:flex;gap:10px;align-items:center}

.container{max-width:1000px;margin:8px auto 48px;padding:0 24px;display:grid;gap:20px}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:28px;
  box-shadow:var(--shadow);
}
.card h2{
  margin:0 0 20px;font-size:19px;font-weight:700;letter-spacing:-0.02em;
}

.btn{
  border:none;border-radius:14px;
  padding:11px 20px;font-weight:600;font-size:14px;cursor:pointer;
  font-family:inherit;transition:.18s;letter-spacing:-0.01em;
  display:inline-flex;align-items:center;gap:8px;
}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-hover)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn.ghost:hover{background:var(--field)}

.input{
  background:var(--field);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:14px;padding:11px 16px;font-size:14px;
  font-family:inherit;outline:none;transition:.18s;
}
.input:focus{border-color:var(--accent)}
.input.small{width:90px}
.input::placeholder{color:var(--muted)}


.tabs{display:flex;gap:28px;border-bottom:1px solid var(--border);margin-bottom:24px}
.tab{
  background:none;border:none;border-bottom:2px solid transparent;
  padding:0 2px 14px;margin-bottom:-1px;cursor:pointer;
  color:var(--muted);font-size:15px;font-weight:500;font-family:inherit;transition:.18s;
}
.tab:hover{color:var(--text)}
.tab.active{color:var(--text);border-bottom-color:var(--accent)}


.dropzone{
  display:block;
  border:2px dashed var(--border);
  border-radius:var(--radius);
  background:var(--field);
  padding:48px 24px;text-align:center;cursor:pointer;transition:.2s;
}
.dropzone:hover{border-color:var(--accent)}
.dz-icon{font-size:34px;color:var(--muted);margin-bottom:8px}
.dz-inner b{color:var(--text)}
.dz-inner small{color:var(--muted);display:block;margin-top:8px;font-size:13px}
.dz-inner>div:not(.dz-icon){color:var(--muted);font-size:14px}

.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.arrow{color:var(--muted);font-size:20px}
.setting{
  margin-top:20px;display:flex;gap:10px;align-items:center;
  color:var(--muted);font-size:14px;flex-wrap:wrap;
}


.progress{
  margin-top:20px;background:var(--field);border-radius:14px;
  height:30px;position:relative;overflow:hidden;border:1px solid var(--border);
}
.progress .bar{height:100%;width:0;background:var(--accent);transition:width .3s}
.progress span{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;color:var(--text);
}


table.jobs{width:100%;border-collapse:collapse;font-size:14px}
.jobs th,.jobs td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--border)}
.jobs th{color:var(--muted);font-weight:600;font-size:13px}
.jobs td a{color:var(--accent-soft);text-decoration:none;font-weight:600}
.jobs td a:hover{text-decoration:underline}
.jobs tr:last-child td{border-bottom:none}

.hidden{display:none}