:root{--sticky-top:12px;--bg:#0f1115;--card:#161922;--text:#e6e6e6;--muted:#a0a0a0;--accent:#82cfff;--ok:#59d18a;--err:#ff6b6b;}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,Segoe UI,Roboto,Ubuntu,Inter,sans-serif}
header,footer{padding:16px;background:#12141b;border-bottom:1px solid #202432}
header h1{margin:0;font-size:1.1rem}
main{max-width:1300px;margin:0 auto;padding:16px}
.card{background:var(--card);border:1px solid #202432;border-radius:14px;padding:16px;margin-bottom:16px;box-shadow:0 8px 20px rgba(0,0,0,.25)}
label{display:flex;flex-direction:column;margin-bottom:12px;gap:6px}
input{padding:10px;border-radius:10px;border:1px solid #2a3142;background:#0e1118;color:var(--text)}
button{background:var(--accent);color:#04121c;border:none;padding:10px 14px;border-radius:12px;font-weight:700;cursor:pointer}
button:hover{filter:brightness(.95)}
button.danger{background:var(--err);color:#2b0b0b}
.actions{display:flex;gap:10px;margin-top:6px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.grid2{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
.inline{display:flex;align-items:center;gap:8px}
.hint{color:var(--muted)}
.progress{height:16px;background:#0b0e14;border:1px solid #2a3142;border-radius:999px;overflow:hidden}
.bar{height:100%;width:0%;background:var(--ok);transition:width .3s}
.progress-text{margin-top:8px;color:var(--muted)}
.result{min-height:140px}
.error{color:var(--err)}
.suggestions{position:relative;margin-top:6px;background:#0e1118;border:1px solid #2a3142;border-radius:10px;display:none;max-height:260px;overflow:auto}
.suggestions .item{display:flex;gap:10px;padding:8px 10px;align-items:center;cursor:pointer}
.suggestions .item:hover{background:#141924}
.suggestions .item img{width:36px;height:52px;object-fit:cover;border-radius:6px;border:1px solid #2a3142}
.suggestions .item .title{font-weight:700}
.suggestions .item .sub{color:var(--muted);font-size:.9em}

/* Live-Log: fills full page height by spanning all rows */
.layout{display:grid;grid-template-columns:2fr 1.2fr;grid-template-areas:"cfg  log" "prog log" "res  log";gap:16px;}
.cfg{grid-area:cfg}
.prog{grid-area:prog}
.res{grid-area:res}
.logwrap{grid-area:log;grid-row:1 / -1;position:sticky;top:var(--sticky-top);height:calc(100vh - var(--sticky-top));display:flex;flex-direction:column;}
.logwrap h2{margin-top:0}
.log{background:#0b0e14;border:1px solid #2a3142;border-radius:10px;padding:10px;white-space:pre-wrap;flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;}

@media (max-width: 880px){
  .layout{display:grid;grid-template-columns:2fr 1.2fr;grid-template-areas:"cfg  log" "prog log" "res  log";gap:16px;}
  .grid{grid-template-columns:repeat(2,1fr)}
  .grid2{grid-template-columns:1fr}
  .log{background:#0b0e14;border:1px solid #2a3142;border-radius:10px;padding:10px;white-space:pre-wrap;flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;}
}