:root{font-family:Arial, Helvetica, sans-serif;}
body{margin:0;background:#f7f7f8;color:#111;}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#153c6f;color:#fff;}
.brand{font-weight:700;}
.nav a{color:#fff;text-decoration:none;margin-left:12px;opacity:.9}
.nav a:hover{opacity:1;text-decoration:underline}
.container{padding:16px;max-width:1200px;margin:0 auto;}
h1{margin-top:0}
.row{display:flex;gap:10px;align-items:center;margin:10px 0;flex-wrap:wrap}
label{min-width:120px;font-weight:600}
select,input,textarea,button{padding:8px;border:1px solid #ccc;border-radius:8px;font-size:14px}
button{cursor:pointer;background:#153c6f;color:#fff}
button:hover{opacity:.9}
.btn-link{margin-left:8px}
.card{background:#fff;border:1px solid #e6e6e6;border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.card-header{padding:12px 14px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center}
.card-title{font-weight:700}
.card-body{padding:12px 14px}
.card-footer{padding:12px 14px;border-top:1px solid #eee;display:flex;gap:10px;align-items:center}
.muted{color:#666;margin-top:8px}
.code{background:#153c6f;color:#fff;padding:12px;border-radius:10px;overflow:auto}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.kpi{padding:12px 14px}
.kpi-label{color:#666;font-size:12px}
.kpi-value{font-size:28px;font-weight:800}
.table-wrap{overflow:auto;max-height:420px}
table{border-collapse:collapse;width:100%}
th,td{border:1px solid #eee;padding:6px 8px;font-size:12px;vertical-align:top}
th{background:#fafafa;position:sticky;top:0}
.doc-line { margin: 6px 0; line-height: 1.5; }
.doc-space { height: 3px; }
.doc-bullet { padding-left: 10px; }
.doc-url { word-break: break-all; }
.sp-url { font-weight: 600; text-decoration: underline; }
.doc-img-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 10px; margin-top: 10px; }
.doc-img { width: 100%; border-radius: 10px; border: 1px solid #ddd; }
.brandlink{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:inherit;
}

.logo{
  height:34px;
  width:auto;
  display:block;
}
.status-cards{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:14px 0 6px 0;
}
.status-card{
  min-width:160px;
  padding:12px 14px;
  border:1px solid #e6e6e6;
  border-radius:12px;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,0.04);
}
.status-card.ok{
  border-color:#b7e4c7;
  background:#f2fbf5;
}
.status-name{
  font-size:13px;
  color:#666;
  text-transform:capitalize;
}
.status-value{
  font-size:28px;
  font-weight:700;
  margin-top:6px;
}
.grid4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px}
@media (max-width: 900px){
  .grid2,.grid3{grid-template-columns:1fr}
  label{min-width:90px}
}