:root{
  --border:#e5e5e5;
  --soft:#f7f7f7;
  --ok:#0a7a0a;
  --no:#b00020;
  --muted:#777;

  --active:#0a7a0a;
  --dormant:#b36b00;
  --dead:#b00020;
}

*{ box-sizing:border-box; }

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  margin:14px;
  background:#fff;
  color:#111;
}

.wrap{
  max-width:1100px;
  margin:0 auto;
}

.menu{ margin:10px 0; }

.page-title{
  font-size:18px;
  margin:0 0 14px 0;
}

.view-title{
  font-size:16px;
  margin:14px 0 10px 0;
}

.subhead{
  font-size:14px;
  margin:16px 0 8px 0;
}

.tabs{
  display:flex;
  gap:8px;
  margin:10px 0 14px;
  flex-wrap:wrap;
}

.tab{
  padding:8px 14px;
  border:1px solid var(--border);
  border-radius:20px;
  background:#fff;
  color:#111;
  cursor:pointer;
  font-size:14px;
}

.tab.is-active{
  background:#111;
  color:#fff;
  border-color:#111;
}

.toolbar{
  display:flex;
  gap:10px;
  margin-bottom:12px;
  /*align-items:flex-end;*/
  align-items:center;
  flex-wrap:wrap;
}

.toolbar input{
  /*padding:8px 12px;*/
  border:1px solid var(--border);
  border-radius:20px;
  font-size:15px;
}

.toolbar button{
  /*padding:8px 14px;*/
  border:1px solid var(--border);
  border-radius:20px;
  background:#111;
  color:#fff;
  cursor:pointer;
  font-size:15px;
}

.toolbar input,
.toolbar button{
  height:38px;
  line-height:38px;
  padding:0 14px;
}

.toolbar button:hover{ opacity:.92; }

.field{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.field--sm input{ width:90px; }

.label{
  font-size:11px;
  color:#666;
  padding-left:6px;
}

.status{
  font-size:13px;
  color:#666;
  margin-left:8px;
  display:inline-flex;
  align-items:center;
  min-height:18px;
}

.page-title{
  display:flex;
  align-items:center;
  gap:0.4em;
}

.page-title .logo{
  fill:currentColor;
}

.panel{
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}

.legend{
  font-size:11px;
  color:#666;
  padding:6px 8px;
  border-bottom:1px solid var(--border);
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  background:#fff;
}

table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}

thead{ background:var(--soft); }

th, td{
  padding:8px 6px;
  border-bottom:1px solid var(--border);
  text-align:left;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  vertical-align:top;
}

th{
  font-weight:600;
  font-size:13px;
}

tr:last-child td{ border-bottom:0; }

.col-user{ width:40%; }
.col-flag{ width:10%; }

a{ text-decoration:none; color:inherit; }
a:hover{ text-decoration:underline; }

.flag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  font-size:12px;
  font-weight:700;
  line-height:1;
}
.flag.ok{ color:var(--ok); }
.flag.no{ color:var(--no); }

.usercell{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.userline{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.meta{
  font-size:11px;
  color:var(--muted);
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.dot{
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  flex:0 0 auto;
  background:#bbb;
}
.dot.active{ background:var(--active); }
.dot.dormant{ background:var(--dormant); }
.dot.dead{ background:var(--dead); }

.error{
  margin-top:10px;
  padding:8px;
  border:1px solid #f3c2c2;
  background:#fff5f5;
  color:#900;
  border-radius:10px;
  display:none;
  font-size:13px;
}

.small{
  color:#666;
  font-size:12px;
  line-height:1.4;
  margin-top:8px;
}

.hint{
  color:#666;
  font-size:12px;
  line-height:1.4;
  margin:10px 0;
}

.mono{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.kpi{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:12px 0 18px;
}

.kpi-card{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  min-width:220px;
}

.kpi-card .t{ color:#666; font-size:12px; margin-bottom:4px; }
.kpi-card .v{ font-size:18px; font-weight:700; }

@media (max-width:600px){
  body{ margin:8px; }
  .page-title{ font-size:16px; }

  th, td{ padding:6px 4px; font-size:12px; }
  th{ font-size:11px; }

  .flag{ width:18px; height:18px; font-size:11px; }
  .meta{ font-size:10px; }
  .dot{ width:6px; height:6px; }
  .field--sm input{ width:80px; }
}