/* web/style.css */
/* Currently empty */

:root{
  --bg:#0b0c10;
  --panel:#111217;
  --text:#e6e7ea;
  --muted:#9aa0a6;
  --chip:#1b1e27;
  --border:#1c1f29;
  --accent:#4f8cff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:15px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif}

header{
  padding:16px 18px;border-bottom:1px solid #1c1e24;display:flex;gap:12px;align-items:center;flex-wrap:wrap
}
h1{margin:0;font-size:18px;color:#e9ecf5;letter-spacing:.3px}
#f{display:flex;gap:10px;align-items:center;flex:1}
#q{
  flex:1;padding:10px 12px;border-radius:10px;border:1px solid #263146;background:#0e1118;color:var(--text)
}
button{
  padding:10px 14px;border-radius:10px;border:1px solid #2a3b63;background:linear-gradient(180deg,#1a2440,#141b2d);color:#dfe7ff;cursor:pointer
}
.small{font-size:12px;color:var(--muted)}
.link{font-size:12px;color:#bcd0ff;text-decoration:underline;cursor:pointer}

main{
  display:grid;grid-template-columns: 1fr 360px;gap:16px;padding:16px 20px
}
.panel{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));
  border:1px solid #20242e;border-radius:14px;padding:14px
}
.panel h3{margin:0 0 8px 0;font-size:15px;color:#e9ecf5}

#list{list-style:none;margin:8px 0 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.item{
  display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:12px;background:var(--panel);border:1px solid var(--border)
}
.item.disabled{opacity:.5;cursor:not-allowed}
.item.dragging{opacity:.75}
.handle{
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:#0f1320;border:1px solid #1d2640;color:#bcd0ff;user-select:none
}
.title{color:#f0f3ff}
.meta{font-size:12px;color:var(--muted);margin-top:2px}

.item.disabled { opacity: .45; pointer-events: none; }
.item.selected { outline: 2px dashed #4f8cff; outline-offset: 2px; }
button.ghost { background: transparent; border: 1px solid #2a3b63; color: #cfe0ff; }

.actions{display:flex;align-items:center;gap:10px;margin-top:10px}
.hint{opacity:.9}

@media (max-width: 1000px){
  main{grid-template-columns:1fr}
}

/* Hard lock after first move */
#list.locked .item { pointer-events: none; }