:root {
  --bg:#0b1020; --card:#121831; --card2:#0d1431;
  --fg:#d6e1ff; --muted:#7d8ab0; --border:#1d2645;
  --ac:#5b8def; --bad:#ff5470; --ok:#62d5a1; --warn:#ffb84d;
  --shadow:0 2px 24px rgba(0,0,0,.3);
}
[data-theme="light"] {
  --bg:#f4f6fb; --card:#ffffff; --card2:#f7f9fd;
  --fg:#1b2140; --muted:#606b8a; --border:#d8deec;
  --ac:#3a6fd8; --bad:#d8335d; --ok:#1e9c72; --warn:#c88200;
  --shadow:0 2px 18px rgba(30,40,80,.08);
}
* { box-sizing:border-box }
html, body { margin:0; background:var(--bg); color:var(--fg);
  font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif }
a { color:var(--ac); text-decoration:none } a:hover { text-decoration:underline }
.wrap { max-width:1200px; margin:0 auto; padding:18px }
header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px }
.logo { font-size:20px; font-weight:700; letter-spacing:.3px }
.head-right { display:flex; gap:10px; align-items:center }
.muted { color:var(--muted); font-size:13px }
main { background:var(--card); padding:20px; border-radius:12px; box-shadow:var(--shadow) }
h1,h2 { margin:0 0 12px }
form { margin:0 }
label { display:block; margin:10px 0; font-size:13px; color:var(--muted) }
.row { display:grid; grid-template-columns:1fr 1fr; gap:10px }
input, textarea, select, button { font:inherit; color:var(--fg) }
input[type=text], input[type=password], input:not([type]), textarea, input[type=file] {
  width:100%; padding:9px 11px; border-radius:8px;
  border:1px solid var(--border); background:var(--card2); color:var(--fg)
}
textarea { font-family:ui-monospace,Menlo,Consolas,monospace; white-space:pre; resize:vertical }
button {
  cursor:pointer; padding:9px 18px; border-radius:8px; border:0;
  background:var(--ac); color:#fff; font-weight:600
}
button:hover { filter:brightness(1.08) }
button.warn { background:var(--bad) }
button.ghost { background:transparent; color:var(--fg); padding:6px 10px; font-size:16px }
button.ghost:hover { background:var(--card2) }
.inline { display:inline-block }
.check { display:flex; align-items:center; gap:8px; color:var(--fg) }

.login { max-width:460px }
.disclaimer { margin-top:26px; padding-top:18px; border-top:1px solid var(--border); color:var(--muted); font-size:13px }
.disclaimer p { margin:8px 0 }
.disclaimer b { color:var(--fg) }

.bar { display:flex; justify-content:space-between; align-items:center;
  margin-bottom:12px; gap:10px; flex-wrap:wrap }
.cwd { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:14px }
.cwd .up { margin-left:12px; color:var(--muted) }

.dropzone {
  border:2px dashed var(--border); border-radius:10px; padding:16px;
  text-align:center; margin:10px 0; background:var(--card2);
  transition:border-color .15s, background .15s
}
.dropzone.over { border-color:var(--ac); background:color-mix(in srgb, var(--ac) 8%, var(--card2)) }
.dz-hint { color:var(--muted); font-size:14px }
.dz-hint a { color:var(--ac) }
#dz-queue { list-style:none; margin:10px 0 0; padding:0; text-align:left }
#dz-queue li {
  display:grid; grid-template-columns:1fr auto auto; gap:10px;
  align-items:center; padding:6px 10px; margin:4px 0;
  background:var(--card); border-radius:6px; font-size:13px
}
#dz-queue progress { width:180px; height:10px }
#dz-queue .status { min-width:70px; text-align:right; font-size:12px; color:var(--muted) }
#dz-queue .status.ok { color:var(--ok) }
#dz-queue .status.err { color:var(--bad) }

.mkdir-row { display:flex; gap:8px; margin:10px 0 16px }
.mkdir-row input { flex:1 }

table { width:100%; border-collapse:collapse; margin-top:4px }
th, td { padding:7px 8px; border-bottom:1px solid var(--border); text-align:left; font-size:14px }
th { color:var(--muted); font-weight:500; user-select:none }
td.s, th:last-child { text-align:right; color:var(--muted); font-variant-numeric:tabular-nums }
td.m { color:var(--muted); font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px }
td.act { font-size:12px }
td.act a { margin-right:2px }
td.n-dir a { color:var(--warn); font-weight:600 }
td.n-dir a::before { content:'📁 ' }
td.n-link a { color:#ff9fe5 }
td.n-file a::before { content:'📄 ' }
.actions { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; align-items:center }
.actions input { flex:1; min-width:220px }
.err { padding:14px; background:color-mix(in srgb, var(--bad) 10%, transparent);
  border:1px solid var(--bad); color:var(--bad); border-radius:8px }

.editor .CodeMirror { height:auto; min-height:60vh; border-radius:8px; border:1px solid var(--border) }
.editor textarea { min-height:60vh }
.editor-bar { display:flex; gap:12px; align-items:center; margin-top:10px }

[data-theme="light"] .CodeMirror { background:#fff }
@media (max-width:720px) {
  .row { grid-template-columns:1fr }
  th:nth-child(4), td.m { display:none }
  #dz-queue progress { width:100px }
}