:root{
  --bg:#0b0f19; --card:#121a2a; --text:#e9eefc; --muted:#aab6d3;
  --line:rgba(255,255,255,.09); --pri:#7c5cff; --pri2:#23d5ff;
  --shadow:0 18px 60px rgba(0,0,0,.4); --r:16px;
  --bad:#ff4d6d;
}
*{box-sizing:border-box}
body{
  margin:0; color:var(--text);
  background: radial-gradient(1000px 700px at 20% -10%, rgba(124,92,255,.22), transparent 55%),
              radial-gradient(900px 650px at 110% 0%, rgba(35,213,255,.14), transparent 50%),
              var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Sans","Noto Sans JP",Arial,sans-serif;
}
.top{
  position:sticky; top:0; z-index:10;
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px; border-bottom:1px solid var(--line);
  background:rgba(11,15,25,.72); backdrop-filter:blur(14px);
}
.brand{display:flex; gap:12px; align-items:center}
.logo{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:900;
  background:linear-gradient(135deg, rgba(124,92,255,.9), rgba(35,213,255,.85));
  box-shadow:0 12px 30px rgba(124,92,255,.22);
}
.title{font-weight:800}
.sub{color:var(--muted); font-size:12px; margin-top:2px}
.topActions{display:flex; gap:10px; flex-wrap:wrap}

.wrap{max-width:1180px; margin:16px auto; padding:0 14px 50px}
.card{
  background:rgba(18,26,42,.92); border:1px solid var(--line);
  border-radius:var(--r); padding:14px; box-shadow:var(--shadow); margin:12px 0;
}
h2{margin:0 0 12px 0; font-size:16px}
.cardHead{display:flex; justify-content:space-between; align-items:center; gap:10px}
.hint{color:var(--muted); font-size:12px}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px}
@media (max-width:960px){
  .grid2,.grid3{grid-template-columns:1fr}
  .top{flex-direction:column; gap:10px; align-items:stretch}
}

.field span{display:block; font-size:12px; color:var(--muted); margin:0 0 6px 2px}
.field input,.field select{
  width:100%; padding:11px 12px; border-radius:14px; border:1px solid var(--line);
  background:rgba(0,0,0,.18); color:var(--text); outline:none;
}
small{color:var(--muted)}
.row{display:flex; align-items:center; gap:10px}
.actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}

.btn{
  padding:10px 12px; border-radius:14px; border:1px solid var(--line);
  background:rgba(255,255,255,.05); color:var(--text); font-weight:700; cursor:pointer;
}
.btn.primary{
  border:none; color:#06101f;
  background:linear-gradient(135deg, rgba(124,92,255,.95), rgba(35,213,255,.85));
}
.btn.danger{
  border:1px solid rgba(255,77,109,.45);
  background:rgba(255,77,109,.12);
}

.pill{padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.04); font-size:12px}
.pill.ok{border-color:rgba(61,220,151,.35); background:rgba(61,220,151,.10)}
.pill.ng{border-color:rgba(255,77,109,.35); background:rgba(255,77,109,.10)}

.muted{color:var(--muted); font-size:12px}
.statusRow{display:flex; justify-content:space-between; gap:10px; margin-top:10px}

.search{
  flex:1; padding:10px 12px; border-radius:14px; border:1px solid var(--line);
  background:rgba(0,0,0,.18); color:var(--text)
}

.list{display:flex; flex-direction:column; gap:10px; margin-top:12px}
.item{border:1px solid var(--line); border-radius:16px; background:rgba(0,0,0,.14); padding:12px}
.itemTop{display:flex; justify-content:space-between; gap:10px}
.itemTitle{font-weight:900}
.itemMeta{color:var(--muted); font-size:12px; margin-top:6px; line-height:1.5}
.itemActions{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}

.toast{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  background:rgba(0,0,0,.72); border:1px solid var(--line);
  color:var(--text); padding:10px 12px; border-radius:14px; opacity:0; pointer-events:none;
  transition:opacity .2s ease; max-width:92vw; box-shadow:var(--shadow); font-size:13px;
  z-index:9999;
}
.toast.show{opacity:1}

code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}