/* Палитра взята с самих обложек: тёмно-синее небо, тёплое золото, тени. */
:root{
  --night:#0b1220; --night-2:#111c2e; --panel:#16233a; --panel-2:#1c2c47;
  --line:#2b3f5f; --gold:#d9a441; --gold-soft:#f0cd85; --gold-dim:#8a6a2f;
  --text:#e8eef7; --muted:#93a4bd; --ok:#4fb477; --warn:#e0a83a; --bad:#d9534f;
  --radius:14px; --shadow:0 18px 44px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font:15px/1.55 "Segoe UI",-apple-system,Roboto,sans-serif;
  color:var(--text); background:var(--night);
  background-image:
    radial-gradient(1200px 620px at 50% -8%, rgba(217,164,65,.20), transparent 62%),
    radial-gradient(900px 520px at 12% 108%, rgba(217,164,65,.10), transparent 60%),
    linear-gradient(180deg,#0b1220,#0e1626 55%,#0a1120);
  background-attachment:fixed;
}
a{color:var(--gold-soft)}
.wrap{max-width:1180px;margin:0 auto;padding:26px 22px 70px}

/* ---------- шапка ---------- */
header.top{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.mark{
  width:42px;height:42px;border-radius:11px;flex:none;
  background:linear-gradient(145deg,var(--gold),#a97a25);
  display:grid;place-items:center;color:#20160a;font-weight:800;font-size:19px;
  box-shadow:0 8px 22px rgba(217,164,65,.3);
}
.brand h1{margin:0;font-size:19px;letter-spacing:.35px}
.brand p{margin:2px 0 0;color:var(--muted);font-size:12.5px}
.spacer{flex:1}
.who{color:var(--muted);font-size:13px;margin-right:10px}

/* ---------- панели ---------- */
.grid{display:grid;grid-template-columns:390px 1fr;gap:22px;align-items:start}
@media(max-width:960px){.grid{grid-template-columns:1fr}}
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px;
}
.card h2{
  margin:0 0 4px;font-size:14px;text-transform:uppercase;
  letter-spacing:1.1px;color:var(--gold);
}
.card .hint{margin:0 0 16px;color:var(--muted);font-size:12.5px}

/* ---------- форма ---------- */
label{display:block;margin:14px 0 6px;font-size:12.5px;color:var(--muted)}
input[type=text],input[type=password],textarea,select{
  width:100%;padding:11px 13px;border-radius:10px;color:var(--text);
  background:#0e1828;border:1px solid var(--line);font:inherit;
}
textarea{resize:vertical;min-height:74px}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--gold-dim);box-shadow:0 0 0 3px rgba(217,164,65,.14);
}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.drop{
  border:1.5px dashed var(--line);border-radius:12px;padding:16px;text-align:center;
  cursor:pointer;transition:.15s;background:#0e1828;position:relative;overflow:hidden;
}
.drop:hover,.drop.over{border-color:var(--gold-dim);background:#122036}
.drop .ico{font-size:22px;opacity:.75}
.drop .lbl{font-size:12.5px;color:var(--muted);margin-top:5px}
.drop .name{font-size:12px;color:var(--gold-soft);margin-top:5px;word-break:break-all}
.drop img{max-height:104px;border-radius:8px;margin-top:9px;display:block;
  margin-left:auto;margin-right:auto}
.drop input{display:none}

button.go{
  width:100%;margin-top:20px;padding:13px;border:0;border-radius:11px;
  font:600 15px/1 inherit;cursor:pointer;color:#1d1405;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));
  box-shadow:0 10px 26px rgba(217,164,65,.26);
}
button.go:hover{filter:brightness(1.06)}
button.go:disabled{filter:grayscale(.6) brightness(.75);cursor:not-allowed}

.note{margin-top:12px;font-size:12px;color:var(--muted)}
.err{margin-top:12px;padding:10px 12px;border-radius:9px;font-size:13px;
  background:rgba(217,83,79,.14);border:1px solid rgba(217,83,79,.42);color:#f0b4b2}

/* ---------- статус ---------- */
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:6px}
@media(max-width:620px){.shots{grid-template-columns:repeat(2,1fr)}}
.shot{
  border:1px solid var(--line);border-radius:10px;padding:10px;background:#0e1828;
  font-size:11.5px;color:var(--muted);min-height:74px;
}
.shot .n{color:var(--text);font-weight:600;font-size:12px;margin-bottom:4px}
.shot.running{border-color:var(--gold-dim)}
.shot.done{border-color:rgba(79,180,119,.5)}
.shot.failed{border-color:rgba(217,83,79,.5)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px}
.dot.queued{background:var(--muted)}
.dot.running{background:var(--warn);animation:pulse 1.1s infinite}
.dot.done{background:var(--ok)}
.dot.failed{background:var(--bad)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.32}}
.bar{height:5px;border-radius:4px;background:#0b1524;overflow:hidden;margin:12px 0 4px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold-soft));
  transition:width .4s}

/* ---------- галерея ---------- */
.gal-group{margin-top:22px}
.gal-group h3{
  margin:0 0 10px;font-size:13px;color:var(--gold-soft);letter-spacing:.4px;
  display:flex;align-items:center;gap:9px;
}
.gal-group h3 span{color:var(--muted);font-size:11.5px;font-weight:400}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:12px}
.tile{
  position:relative;border-radius:11px;overflow:hidden;cursor:pointer;
  border:1px solid var(--line);background:#0e1828;aspect-ratio:9/16;
}
.tile img{width:100%;height:100%;object-fit:cover;display:block;transition:.25s}
.tile:hover img{transform:scale(1.04)}
.tile .cap{
  position:absolute;left:0;right:0;bottom:0;padding:7px 9px;font-size:11px;
  background:linear-gradient(transparent,rgba(6,10,18,.9));color:var(--muted);
}
.empty{color:var(--muted);font-size:13px;padding:20px 0}

/* ---------- лайтбокс ---------- */
.lb{position:fixed;inset:0;background:rgba(5,8,14,.93);display:none;z-index:50;
  align-items:center;justify-content:center;padding:22px;backdrop-filter:blur(3px)}
.lb.on{display:flex}
.lb-inner{display:flex;gap:20px;align-items:flex-start;max-height:100%}
.lb img{max-height:88vh;max-width:min(52vh,100%);border-radius:12px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);display:block}
.lb-side{width:246px;color:var(--muted);font-size:13px}
.lb-side h4{margin:0 0 6px;color:var(--text);font-size:15px}
.lb-side .kv{margin:12px 0;padding-top:12px;border-top:1px solid var(--line)}
.lb-btn{
  display:block;width:100%;margin-top:9px;padding:11px;border:0;border-radius:10px;
  font:600 13.5px/1 inherit;cursor:pointer;text-align:center;text-decoration:none;
  color:#1d1405;background:linear-gradient(180deg,var(--gold-soft),var(--gold));
}
.lb-btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.toggle{display:flex;align-items:center;gap:9px;margin:14px 0;cursor:pointer;
  user-select:none;font-size:13px;color:var(--text)}
.toggle input{display:none}
.sw{width:38px;height:21px;border-radius:11px;background:#20304a;position:relative;
  transition:.18s;flex:none}
.sw::after{content:"";position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;
  border-radius:50%;background:var(--muted);transition:.18s}
.toggle input:checked + .sw{background:var(--gold-dim)}
.toggle input:checked + .sw::after{left:19.5px;background:var(--gold-soft)}
.lb-close{position:absolute;top:18px;right:22px;font-size:26px;color:var(--muted);
  cursor:pointer;line-height:1}

/* ---------- вход ---------- */
.login-wrap{min-height:100%;display:grid;place-items:center;padding:24px}
.login{width:100%;max-width:352px}
.login .mark{margin:0 auto 16px;width:52px;height:52px;font-size:23px}
.login h1{text-align:center;margin:0 0 4px;font-size:20px}
.login p.sub{text-align:center;margin:0 0 22px;color:var(--muted);font-size:12.5px}

/* ---------- журнал (/logs) и удаление ---------- */
.lb-btn.danger{background:transparent;border:1px solid #7a2e2e;color:#e08585}
.lb-btn.danger:hover{background:rgba(122,46,46,.25)}
table.log{width:100%;border-collapse:collapse;font-size:12.5px;color:var(--muted)}
table.log th,table.log td{padding:7px 10px;border-bottom:1px solid var(--line);
  text-align:left;vertical-align:top}
table.log th{color:var(--text);font-weight:600;white-space:nowrap}
table.log td:first-child{white-space:nowrap;font-variant-numeric:tabular-nums}
table.log tr.image_deleted td{color:#e08585}
table.log tr.login_fail td{color:#e0b285}
table.log td b{color:var(--text);font-weight:600}