:root{
  --bg:#0b0c10; --panel:#121318; --muted:#a7adba; --fg:#e7e9ee;
  --brand:#7cd2ff; --accent:#6ce39c; --warn:#ffd166; --err:#ff6b6b;
  --border:#20222b; --chip:#1a1c24;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.5 Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--border); background:#0d0e13;
  position:sticky; top:0; z-index:10;
}
.brand{font-weight:800; letter-spacing:.2px}
.brand .muted{color:var(--muted); font-weight:600}
.actions .btn{margin-left:.5rem}
.wrap{max-width:1100px; margin:24px auto; padding:0 16px}
.panel{
  background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:18px 16px; margin-bottom:18px;
}
.panel h2{margin:0 0 12px; font-size:20px}
.row{display:flex; gap:10px; align-items:center; margin:8px 0}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.controls .right{justify-self:end}
.kv{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:6px 0 10px}
.k{color:var(--muted); font-size:12px}
.v code{color:#b6e0ff}

input,select,button{
  font:inherit; color:inherit; background:#0e1016; border:1px solid var(--border);
  border-radius:10px; padding:10px 12px; outline:none;
}
input::placeholder{color:#7f8593}
select{appearance:none; background:#0e1016 right 10px center/12px no-repeat}
.btn{background:#1b1f2b; cursor:pointer}
.btn:hover{filter:brightness(1.07)}
.btn.primary{background:var(--accent); color:#0b1912; font-weight:700}
.btn:disabled{opacity:.6; cursor:not-allowed}
.hint{font-size:12px; color:var(--muted); margin-top:4px}
.msg{margin-top:8px; font-size:14px}
.msg.ok{color:var(--accent)}
.msg.err{color:var(--err)}

.preview img{max-height:140px; border-radius:10px; display:block; margin-top:8px}

.log{
  white-space:pre-wrap; background:#0d0f14; color:#9cffb0;
  border-radius:10px; padding:10px; border:1px solid var(--border); min-height:80px;
}

.grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:10px; margin-top:8px;
}
.card{
  background:var(--chip); border:1px solid var(--border); border-radius:12px; overflow:hidden;
  display:flex; flex-direction:column; cursor:zoom-in;
}
.card img{display:block; width:100%; height:140px; object-fit:cover; background:#0e1016}
.card .meta{padding:8px 10px; font-size:12px; color:var(--muted)}
.center{justify-content:center}

.modal{
  position:fixed; inset:0; background:rgba(0,0,0,.7);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.modal.hidden{display:none}
.modal img{
  max-width:92vw; max-height:82vh; border-radius:12px; display:block; background:#000;
}
.modal .meta{
  color:#c8ceda; margin-top:8px; text-align:center; max-width:92vw;
}
.modal-close{
  position:absolute; top:10px; right:10px; background:#232838; color:#fff;
  border:1px solid var(--border); width:36px; height:36px; border-radius:50%; font-size:22px; line-height:22px;
}
@media (max-width:720px){
  .kv{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
}