:root{
  --bg:#0b0f14; --card:#111826; --muted:#8aa0b4; --text:#e5eef7;
  --pri:#3b82f6; --pri-2:#60a5fa; --ok:#10b981; --warn:#f59e0b; --err:#ef4444; --border:#1f2a3a
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,Segoe UI,Roboto,Inter,Arial}
.topbar{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#0b1220;border-bottom:1px solid var(--border);backdrop-filter:saturate(1.2) blur(8px)}
.brand{font-weight:700;letter-spacing:.3px}
.nav a{color:var(--muted);margin-right:12px;text-decoration:none}
.nav a.active{color:var(--text)}
.nav .hidden{display:none}
.btn{border:1px solid var(--border);padding:10px 14px;border-radius:10px;cursor:pointer;background:transparent;color:var(--text);transition:background .15s,border-color .15s}
.btn:hover{border-color:var(--pri);background:#0f1a2c}
.btn-primary{background:linear-gradient(180deg,var(--pri),var(--pri-2));border-color:transparent;color:white}
.btn-secondary{background:#1a2334}
.btn-danger{background:var(--err);border-color:transparent;color:white}
.btn-ghost{border-color:transparent;color:var(--muted)}
.btn-sm{padding:6px 10px;border-radius:8px;font-size:14px}

.view{padding:28px}
.hidden{display:none}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px;margin:0 auto 24px;max-width:1100px}
.card-center{max-width:640px;text-align:center;margin-top:10vh}

.grid{
  display:grid; grid-template-columns: 3fr 2fr; grid-column-gap:24px; grid-row-gap:24px;
  max-width:1100px; margin:0 auto;
}
@media(max-width: 1100px){ .grid{ grid-template-columns:1fr; } }

.row{display:flex;gap:12px;align-items:center; flex-wrap:wrap}
.gap{gap:14px}
.muted{color:var(--muted)}
h1,h2,h3{margin:.2em 0 12px}
h2{font-size:20px}

input,select,textarea{
  background:#0b1220;border:1px solid var(--border);border-radius:12px;color:var(--text);
  padding:12px 14px; min-width:0; width:100%;
}
textarea{min-height:96px; resize:vertical; line-height:1.45}

.list{list-style:none;padding:0;margin:14px 0}
.list li{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  border-bottom:1px solid var(--border); padding:12px 0;
  opacity:0; transform:translateY(6px); animation:fadeIn .25s forwards
}
.list li .meta{color:var(--muted); font-size:.85em; margin-left:8px; white-space:nowrap}
.list li .text{flex:1; line-height:1.55; white-space:pre-wrap; word-break:break-word}
.list li .actions{flex-shrink:0}

.drop{
  border:2px dashed var(--pri); border-radius:12px; padding:18px; text-align:center;
  color:#cfe1ff; background:rgba(59,130,246,0.08); cursor:pointer; user-select:none;
}
.drop.hover{ background:rgba(59,130,246,0.16) }
.drop .hint{ display:block; color:var(--muted); font-size:.9em; margin-top:6px }

.progress{height:8px;border-radius:999px;background:#0b1220;border:1px solid var(--border);overflow:hidden;margin:10px 0 12px}
.bar{height:100%;width:0;transition:width .2s linear;background:linear-gradient(90deg,var(--pri),var(--ok))}
.file-row{display:flex;gap:8px;align-items:center;justify-content:space-between}
.chip{padding:2px 8px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:.8em}

.form-grid{display:grid;grid-template-columns:1.2fr 1fr .9fr .6fr;gap:12px}
@media(max-width: 900px){ .form-grid{grid-template-columns:1fr} }

/* Toasts */
.toast-wrap{position:fixed;right:16px;top:16px;z-index:9999;display:flex;flex-direction:column;gap:10px}
.toast{background:#0b1220;border:1px solid var(--border);color:var(--text);padding:10px 12px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.35);opacity:.98}
.toast.ok{border-color:#194b3a}
.toast.warn{border-color:#775a19}
.toast.err{border-color:#5a1c1c}
@keyframes fadeIn{to{opacity:1;transform:none}}
@keyframes fadeOut{to{opacity:0;transform:translateY(-8px)}}