:root{
  --bg:#f4f6fb; --card:#fff; --line:#e3e9f2; --ink:#16233a; --muted:#7a8698;
  --blue:#1466c8; --green:#1e8e4e; --red:#c0392b; --amber:#c26a00;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;background:var(--bg);color:var(--ink)}
a{color:inherit}

.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 20px;background:#0f2038;color:#fff;flex-wrap:wrap}
.brand{font-weight:800;letter-spacing:.02em}
.top-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.updated{font-size:12px;color:#b9c6da}
.btn{display:inline-block;padding:7px 14px;border-radius:999px;background:var(--blue);color:#fff;text-decoration:none;font-size:13px;font-weight:700}
.btn.ghost{background:transparent;border:1px solid #3a4d68;color:#cfe}
.wrap{max-width:1080px;margin:20px auto;padding:0 16px}

.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:16px}
.sec{margin:0 0 12px;font-size:16px;display:flex;align-items:center;gap:8px}
.sec small{margin-left:auto;font-size:12px;color:var(--muted);font-weight:600}
.empty{color:var(--muted);font-size:13px;padding:10px 0}

.health{display:flex;gap:10px;flex-wrap:wrap}
.hchip{flex:1;min-width:150px;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.hname{font-weight:700;font-size:14px;margin-bottom:6px}
.hstat{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.hchip.up .dot{background:var(--green)} .hchip.up{background:#f2fbf5}
.hchip.down .dot{background:var(--red)} .hchip.down{background:#fdf2f0}
.hchip .ms{color:#8a94a3}
.herr{width:100%;color:var(--red);font-size:11.5px;margin-top:4px}

.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.mcell{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff}
.mcell.alert{border-color:#f2c3ba;background:#fdf3f1}
.mval{font-size:24px;font-weight:800;color:var(--ink);line-height:1.1}
.mval .unit{font-size:12px;font-weight:600;color:var(--muted);margin-left:3px}
.mlabel{font-size:13px;margin-top:4px}
.msite{font-size:11px;color:var(--muted);margin-top:2px}

.foot{text-align:center;color:var(--muted);font-size:12px;padding:20px}

/* login */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;width:320px;display:flex;flex-direction:column;gap:12px;box-shadow:0 10px 40px rgba(15,32,56,.08)}
.login-brand{font-weight:800;font-size:18px;text-align:center;margin-bottom:4px}
.login-card label{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:5px}
.login-card input{border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:15px}
.login-card button{margin-top:6px;background:var(--blue);color:#fff;border:0;border-radius:999px;padding:11px;font-size:15px;font-weight:700;cursor:pointer}
.login-err{background:#fdecea;color:var(--red);font-size:13px;border-radius:8px;padding:8px 10px;text-align:center}
.flash{font-size:13px;border-radius:8px;padding:9px 12px}
.flash-ok{background:#effaf0;color:var(--green)}

/* ===== Phase3: タブ / 要対応サマリー / リンク化セル ===== */
a.mcell,a.hchip,a.achip{text-decoration:none;color:inherit;display:block}

.tabs{display:flex;gap:6px;background:rgba(255,255,255,.08);padding:3px;border-radius:999px}
.tab{padding:6px 14px;border-radius:999px;font-size:13px;font-weight:700;color:#b9c6da;text-decoration:none;white-space:nowrap}
.tab.on{background:#fff;color:#0f2038}
.updated .at{display:block;font-size:10.5px;color:#8194ad;line-height:1.3}

.sq{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;vertical-align:middle}
.sdot{display:inline-block;width:11px;height:11px;border-radius:50%}
.opener{margin-left:10px;font-size:12px;font-weight:700;color:var(--blue);text-decoration:none}
.opener:hover{text-decoration:underline}

.alertcard.has{border-color:#f0c4bb;background:linear-gradient(180deg,#fff6f4,#fff)}
.alertcard.none{background:#f6fbf7;border-color:#cfe8d8}
.empty.ok{color:var(--green);font-weight:600}

.achips{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px}
.achip{display:flex;align-items:center;gap:12px;border:1px solid #f0c4bb;background:#fff;border-radius:12px;padding:11px 14px}
.achip .aval{font-size:26px;font-weight:800;color:var(--red);line-height:1;flex:0 0 auto}
.achip .aval .unit{font-size:11px;font-weight:700;margin-left:2px}
.achip .atext{min-width:0}
.achip .atext b{display:block;font-size:14px;line-height:1.3}
.achip .atext span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.achip.down{border-color:#e0b4ad;background:#fdf2f0}
.achip.down .aval{font-size:20px}
.achip.linked:hover{border-color:var(--red);box-shadow:0 3px 12px rgba(192,57,43,.13)}

.mcell.linked{transition:border-color .12s,box-shadow .12s,transform .12s}
.mcell.linked:hover{border-color:var(--blue);box-shadow:0 3px 12px rgba(20,102,200,.12);transform:translateY(-1px)}
.mcell.alert.linked:hover{border-color:var(--red);box-shadow:0 3px 12px rgba(192,57,43,.13)}
.msite{display:flex;align-items:center}
.hchip.linked:hover{box-shadow:0 3px 12px rgba(15,32,56,.1)}

@media (max-width:720px){
  .topbar{padding:10px 12px;gap:8px}
  .brand{font-size:15px}
  .tabs{order:3;width:100%;justify-content:center}
  .top-actions{margin-left:auto}
  .updated{font-size:11px}
  .wrap{margin:12px auto;padding:0 10px}
  .card{padding:13px 13px;border-radius:12px;margin-bottom:12px}
  .sec{font-size:15px;flex-wrap:wrap}
  .mgrid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
  .mcell{padding:10px 11px}
  .mval{font-size:20px}
  .achips{grid-template-columns:1fr}
  .hchip{min-width:100%}
}

/* ===== 作業指示（task.php） ===== */
.taskform{display:flex;flex-direction:column;gap:12px}
.tf-label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);font-weight:700}
.tf-label select,.tf-label textarea{border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:15px;color:var(--ink);font-family:inherit;background:#fff}
.tf-label textarea{resize:vertical;line-height:1.6}
.tf-note{margin:0;font-size:12px;color:var(--muted);background:#f6f8fc;border:1px solid var(--line);border-radius:9px;padding:9px 12px;line-height:1.7}
.tf-note code,.empty code{background:#eef2f8;border-radius:4px;padding:1px 5px;font-size:11.5px}
.tf-send{align-self:flex-start;background:var(--blue);color:#fff;border:0;border-radius:999px;padding:11px 26px;font-size:15px;font-weight:700;cursor:pointer}
.tf-send:hover{filter:brightness(1.08)}

.tasklist{display:flex;flex-direction:column;gap:10px}
.taskrow{border:1px solid var(--line);border-radius:12px;padding:11px 14px;background:#fff}
.tr-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tr-site{font-weight:700;font-size:14px}
.tr-when{font-size:11.5px;color:var(--muted)}
.tr-state{margin-left:auto;font-size:12px;font-weight:700;border-radius:999px;padding:3px 11px;text-decoration:none;white-space:nowrap}
.tr-state.run{background:#eaf2fd;color:var(--blue)}
.tr-state.pr{background:#fff3e0;color:var(--amber)}
.tr-state.ok{background:#effaf0;color:var(--green)}
.tr-state.ng{background:#fdecea;color:var(--red)}
.tr-state.muted{background:#f0f2f6;color:var(--muted)}
.tr-prompt{font-size:13.5px;line-height:1.7;margin-top:7px;white-space:pre-wrap;word-break:break-word}
.tr-meta{font-size:11px;color:var(--muted);margin-top:6px}

@media (max-width:720px){
  .tr-state{margin-left:0}
  .tf-send{align-self:stretch}
}