/* itops 後台(D160)。刻意樸素——呢度係工具唔係門面,
   同首頁嘅視覺紀律(D64)一致:灰階為主,顏色只用喺「有冇事」呢個訊號上。 */
.itops-body { background: var(--page); padding: 2rem 1.5rem; }
.itops-wrap { max-width: 60rem; margin: 0 auto; }

.itops-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.itops-head h1 { margin: 0; font-size: 22px; letter-spacing: .02em; }
.itops-sub { margin: .15rem 0 0; font-size: 12.5px; color: var(--muted); }
.itops-back {
  font-size: 12.5px; color: var(--muted); text-decoration: none;
  border: 1px solid var(--line); border-radius: 9px; padding: .35rem .7rem; background: var(--card);
}
.itops-back:hover { color: var(--ink); background: var(--page); }

/* D160 權力架構聲明:要喺介面見到,唔可以淨係寫喺文件 */
.itops-authority {
  margin: 0 0 1.2rem; padding: .5rem .75rem;
  border-left: 3px solid var(--line);
  font-size: 12.5px; color: var(--muted); background: var(--card);
  border-radius: 0 9px 9px 0;
}

.itops-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 1rem 1.1rem; margin-bottom: 1rem;
}
.itops-card h2 { margin: 0 0 .6rem; font-size: 14.5px; }
.itops-note { margin: .5rem 0 0; font-size: 12px; color: var(--muted); line-height: 1.55; }
.itops-empty { font-size: 12.5px; color: var(--muted); margin: 0; }

.itops-grid { display: flex; flex-wrap: wrap; gap: 1.75rem; }
.itops-stat { display: flex; flex-direction: column; gap: .15rem; }
.itops-label { font-size: 11.5px; color: var(--muted); }
.itops-value { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.itops-value.ok { color: #2F9E68; }
.itops-value.pending { color: #A8541C; }
.itops-value.bad { color: #C0392B; }

.itops-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.itops-btn {
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 10px; padding: .5rem .9rem; font: inherit; font-size: 13px; cursor: pointer;
}
.itops-btn.primary { background: #2F6F4F; border-color: #2F6F4F; color: #fff; }
/* 撳唔到就要一眼睇得出撳唔到——唔准扮有嘢撳(D150) */
.itops-btn:disabled { opacity: .45; cursor: not-allowed; }

.itops-list { margin-top: .5rem; }
.itops-row { border-top: 1px solid var(--line); padding: .6rem 0; }
.itops-row:first-child { border-top: 0; }
.itops-row-head { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.itops-ver { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; }
.itops-ver.current { color: #2F9E68; }
.itops-date { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.itops-title { font-size: 12.5px; color: var(--muted); }
.itops-notes { margin: .35rem 0 0 1rem; padding: 0; font-size: 12px; color: var(--ink); line-height: 1.6; }

.itops-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: .4rem; }
.itops-table th, .itops-table td { border-bottom: 1px solid var(--line); padding: .35rem .4rem; text-align: left; vertical-align: top; }
.itops-table th { color: var(--muted); font-weight: 600; white-space: nowrap; }
.itops-mono { font-variant-numeric: tabular-nums; white-space: nowrap; }

.itops-gate { max-width: 32rem; margin: 4rem auto; text-align: center; font-size: 13.5px; color: var(--muted); }
.itops-gate p { margin-bottom: 1rem; }