:root {
  --bg: #0e0e11;
  --card: #17171c;
  --border: #2a2a32;
  --fg: #ededf0;
  --muted: #a0a0ab;
  --primary: #6366f1;
  --danger: #ef4444;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.page { max-width: 1100px; margin: 0 auto; padding: 48px 24px; min-height: 100vh; }
h1 { font-size: 30px; font-weight: 700; margin: 0 0 4px; }
h2 { font-size: 18px; font-weight: 600; margin: 0 0 12px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.mt { margin-top: 12px; }
.mt-lg { margin-top: 32px; }
.err { color: var(--danger); margin: 16px 0; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
}

.key-form { display: flex; gap: 8px; margin: 24px 0 8px; max-width: 420px; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
@media (max-width: 720px) { .metrics { grid-template-columns: repeat(2, 1fr); } }
.metric { display: flex; flex-direction: column; gap: 8px; }
.big { font-size: 30px; font-weight: 700; }

.actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
@media (max-width: 900px) { .actions { grid-template-columns: 1fr; } }
.stack { display: flex; flex-direction: column; gap: 10px; }
.lookup-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; font-size: 14px; }
@media (max-width: 720px) { .lookup-grid { grid-template-columns: repeat(2, 1fr); } }
.result { margin: 12px 0 0; font-size: 14px; word-break: break-word; }

input, select, button {
  font: inherit;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #101014;
  color: var(--fg);
  outline: none;
}
input:focus, select:focus { border-color: var(--primary); }

button {
  cursor: pointer;
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}
button.mini { padding: 2px 8px; font-size: 11px; border-radius: 6px; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.danger { background: var(--danger); border-color: var(--danger); }

.row-between { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.seg { padding: 4px 12px; font-size: 14px; background: #101014; text-transform: capitalize; }
.seg-active { background: var(--primary); border-color: var(--primary); }

.quota-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-top: 16px; }
.meter { position: relative; height: 8px; border-radius: 999px; background: #101014; border: 1px solid var(--border); }
.meter-fill { height: 100%; border-radius: 999px; transition: width 0.3s; }
/* "expected by now" tick: steady-burn target at this point of the window */
.meter-pace { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 2px; background: var(--fg); opacity: 0.8; }

.table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.table th, .table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); }
.table th { color: var(--muted); font-weight: 500; font-size: 12px; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

.tooltip {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  font-size: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.checkbox { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.checkbox input { width: auto; }
.job { margin-top: 12px; }
.links { list-style: none; margin: 8px 0; padding: 0; font-size: 13px; word-break: break-all; }
.links a { color: var(--primary); }
.log {
  margin-top: 8px;
  padding: 10px;
  background: #0b0b0e;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
  white-space: pre-wrap;
  max-height: 200px;
  overflow: auto;
}
main{max-width:1480px;margin:auto;padding:32px 24px}header,.row{display:flex;gap:16px;align-items:center;justify-content:space-between}header{margin-bottom:30px}nav{display:flex;gap:20px;align-items:center}a{color:#a5b4fc}h1{font-size:36px}.eyebrow{font-size:11px;letter-spacing:.18em;color:#a5b4fc}section{margin:20px 0}.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.summary .card{margin:0;padding:20px}.summary strong{font-size:30px;display:block;margin-bottom:8px}.columns{display:grid;grid-template-columns:380px 1fr;gap:20px}.badge{font-size:11px;text-transform:uppercase;font-weight:700;border-radius:5px;padding:4px 7px;display:inline-block}.ok,.resolved,.succeeded{background:#123027;color:#74e0b7}.warning,.pending,.open{background:#352c12;color:#f1cd72}.critical,.failed{background:#351d22;color:#ff929e}.unknown,.uncertain,.expired{background:#282935;color:#bdc0d1}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:13px}th,td{text-align:left;padding:14px 10px;border-bottom:1px solid var(--border)}th{color:var(--muted);font-weight:500}td:nth-child(3){max-width:560px;word-break:break-word}pre{white-space:pre-wrap;word-break:break-word;font:12px ui-monospace,monospace;line-height:1.6;margin:6px 0}.incident{width:100%;text-align:left;background:#101014;border-color:var(--border);margin:8px 0;font-weight:400}.incident.selected{border-color:var(--primary)}.incident small{display:block;margin-top:8px;color:var(--muted)}.message{border:1px solid var(--border);border-radius:10px;padding:16px;margin:14px 0}.message.operator{border-color:#6366f1}.message.assistant{border-color:#37594f}.message h3{margin:0 0 10px;font-size:12px;text-transform:uppercase;color:var(--muted)}textarea{width:100%;font:inherit;color:var(--fg);background:#101014;border:1px solid var(--border);padding:12px;border-radius:8px;margin:12px 0;resize:vertical}footer{color:var(--muted);font-size:12px;line-height:1.6;margin-top:30px}.hb{display:flex;flex-wrap:wrap;gap:12px}.hb span{background:#101014;padding:10px;border-radius:8px;font-size:13px}#messages{max-height:600px;overflow:auto}#error{color:#ff929e}#history-data{max-height:280px;overflow:auto}summary{cursor:pointer;margin-top:14px}[hidden]{display:none!important}@media(max-width:850px){header{align-items:flex-start;flex-direction:column}.columns{grid-template-columns:1fr}.summary{grid-template-columns:repeat(2,1fr)}.row{flex-wrap:wrap}}

.renewal-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}@media(max-width:850px){.renewal-fields{grid-template-columns:1fr}}