@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;
}

#themeBtn{display:inline-grid;place-items:center;padding:0;width:40px;height:40px}
#themeBtn svg{width:20px;height:20px}

.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;
}
.view .card + .card{ margin-top:20px; }


.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)}

.icon-btn{
  width:36px;height:36px;display:inline-grid;place-items:center;
  border-radius:10px;border:1px solid var(--border);
  background:var(--field);color:var(--muted);
  transition:.18s;cursor:pointer;
}
.icon-btn:hover{
  color:var(--accent);
  border-color:color-mix(in srgb, var(--accent) 45%, var(--border));
  background:var(--card);transform:translateY(-1px);
}
.icon-btn:active{transform:translateY(0)}
.icon-btn.danger:hover{
  color:var(--err);
  border-color:color-mix(in srgb, var(--err) 45%, var(--border));
}
.icon-btn svg{width:18px;height:18px}
.icon-btns{display:inline-flex;gap:8px;align-items:center}

.icon-btn.flash-ok{
  color:var(--ok);
  border-color:color-mix(in srgb, var(--ok) 55%, transparent);
  background:color-mix(in srgb, var(--ok) 16%, var(--card));
}
.icon-btn.flash-err{
  color:var(--err);
  border-color:color-mix(in srgb, var(--err) 55%, transparent);
  background:color-mix(in srgb, var(--err) 16%, var(--card));
}

.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;
  width: 40%;
}
.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}
.dz-icon{margin-bottom:12px;line-height:0}
.dz-icon svg{width:40px;height:40px}

.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;
}

.pbar{
  position:relative;background:var(--field);border:1px solid var(--border);
  border-radius:8px;height:20px;min-width:120px;overflow:hidden;
}
.pbar .fill{height:100%;width:0;background:var(--accent);transition:width .3s}
.pbar span{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;color:var(--text);
}
/*  До SVG
.st-ok{color:var(--ok);font-weight:600}
.st-err{color:var(--err);font-weight:600}
.st-run{color:var(--accent-soft);font-weight:600} */

.st-ico{width:16px;height:16px;vertical-align:-0.18em;margin-right:6px;flex:none}
.st-ok,.st-err,.st-run{display:inline-flex;align-items:center}

.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}

.maintabs{
  display:flex;gap:28px;border-bottom:1px solid var(--border);
  margin-bottom:24px;align-items:center;
}
.mtab{
  background:none;border:none;border-bottom:2px solid transparent;
  padding:0 2px 14px;margin-bottom:-1px;cursor:pointer;
  color:var(--muted);font-size:16px;font-weight:600;font-family:inherit;transition:.18s;
  display:inline-flex;align-items:center;gap:8px;
}
.mtab:hover{color:var(--text)}
.mtab.active{color:var(--text);border-bottom-color:var(--accent)}
.badge{
  background:var(--accent);color:#fff;font-size:11px;font-weight:700;
  border-radius:999px;padding:2px 8px;min-width:20px;text-align:center;
}
.view{animation:fade .18s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}


.hint{display:block;margin-top:12px;color:var(--muted);font-size:13px}


.section{border:1px solid var(--border);border-radius:14px;overflow:hidden}
.section-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;cursor:pointer;user-select:none;
  font-weight:600;font-size:14px;background:var(--field);transition:.18s;
}
.section-head:hover{color:var(--text)}
.section-head .chev{color:var(--muted);transition:transform .2s}
.section-head.open .chev{transform:rotate(180deg)}
.section-body{padding:18px}

.mtico{width:18px;height:18px;flex:none}

.toast{
  position:fixed;right:20px;bottom:20px;z-index:999;max-width:420px;
  background:var(--card);color:var(--text);
  border:1px solid var(--border);box-shadow:var(--shadow);
  border-radius:14px;padding:14px 18px;font-size:14px;
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .2s,transform .2s;
  display:flex;align-items:center;gap:10px;
}
.toast.visible{opacity:1;transform:translateY(0)}
.toast.ok{border-color:color-mix(in srgb, var(--ok) 55%, transparent)}
.toast.err{border-color:color-mix(in srgb, var(--err) 55%, transparent)}
.toast .dot{width:8px;height:8px;border-radius:50%;flex:none}
.toast.ok .dot{background:var(--ok)}
.toast.err .dot{background:var(--err)}


.site-footer{
  border-top:1px solid var(--border);
  margin-top:48px;padding:32px 24px;color:var(--muted);
}
.foot-inner{
  max-width:640px;margin:0 auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.foot-desc{font-size:14px;color:var(--text);font-weight:600;margin:0;min-height:1.3em}
.foot-formats{
  font-size:12.5px;color:var(--muted);margin:0;min-height:1.3em;
  font-family:'JetBrains Mono','Fira Code',ui-monospace,monospace;
}
.foot-storage{font-size:13px;color:var(--muted);margin:0;min-height:1.3em}
.foot-storage .used{color:var(--accent-soft);font-weight:600}
.foot-links{display:inline-flex;align-items:center;gap:10px;font-size:13px;min-height:1.3em}
.foot-links a{color:var(--accent-soft);text-decoration:none;font-weight:600}
.foot-links a:hover{text-decoration:underline}
.foot-copy{font-size:12px;color:var(--muted);margin:4px 0 0;opacity:.8;min-height:1.3em}

.typed-line{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono','Fira Code',ui-monospace,monospace;
  font-size:14px;letter-spacing:.02em;min-height:1.4em;margin-top:4px;
}
.typed-line a{color:var(--accent-soft);text-decoration:none;font-weight:600}
.typed-line a:hover{text-decoration:underline}
.typed-line .heart{font-size:15px;line-height:1}
.foot-inner .caret{
  display:inline-block;margin-left:2px;color:var(--accent-soft);
  animation:blink 1s step-end infinite;vertical-align:baseline;
}
@keyframes blink{50%{opacity:0}}

.storage-bar{
  width:220px;max-width:80%;height:8px;margin:6px auto 0;
  background:var(--field);border:1px solid var(--border);
  border-radius:999px;overflow:hidden;
}
.storage-bar .sb-fill{
  height:100%;width:0;border-radius:999px;
  background:var(--accent);
  transition:width .4s ease, background .3s ease;
}
.storage-bar .sb-fill.warn{ background:var(--color-gold, #d97706); }
.storage-bar .sb-fill.crit{ background:var(--err); }

.storage-bar{opacity:0;transition:opacity .3s ease}
.storage-bar.revealed{opacity:1}