:root {
  color-scheme: light;
  --bg: #f5f5f7;
  --surface: rgba(255, 255, 255, .86);
  --surface-solid: #fff;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --line: rgba(0, 0, 0, .08);
  --blue: #0071e3;
  --blue-dark: #0058b0;
  --green: #1f9d68;
  --amber: #b66a00;
  --red: #d92d20;
  --nav: #111827;
  --radius: 22px;
  --shadow: 0 18px 50px rgba(17, 24, 39, .08);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; color: var(--text); background:
  radial-gradient(circle at 92% -10%, rgba(0,113,227,.13), transparent 34rem),
  var(--bg); min-height: 100vh; }
a { color: inherit; }
button, input, select { font: inherit; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 252px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 24px 18px; color: #fff;
  background: linear-gradient(180deg, #111827, #172033); display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 25px; }
.brand img { width: 47px; height: 47px; border-radius: 50%; background: #fff; box-shadow: 0 8px 24px #0005; }
.brand strong { display: block; font-size: 15px; letter-spacing: -.01em; }
.brand span { color: #aab4c5; font-size: 12px; }
.nav { display: grid; gap: 6px; }
.nav a { color: #cbd5e1; text-decoration: none; padding: 11px 13px; border-radius: 12px; font-size: 14px; transition: .18s ease; }
.nav a:hover, .nav a.active { color: #fff; background: rgba(255,255,255,.1); transform: translateX(2px); }
.sidebar-foot { margin-top: auto; border-top: 1px solid #ffffff1b; padding-top: 18px; }
.operator { font-size: 13px; margin-bottom: 12px; }
.operator span { display: block; color: #9aa6b8; margin-top: 3px; }
.logout { width: 100%; color: #dbe4f0; background: transparent; border: 1px solid #ffffff24; }
.content { min-width: 0; padding: 30px clamp(22px, 4vw, 58px) 60px; }
.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 28px; }
.eyebrow { color: var(--blue); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 750; }
h1 { margin: 5px 0 5px; font-size: clamp(28px, 3vw, 42px); letter-spacing: -.045em; line-height: 1.08; }
h2 { margin: 0 0 15px; font-size: 20px; letter-spacing: -.025em; }
h3 { margin: 0 0 7px; font-size: 15px; }
p { line-height: 1.55; }
.muted { color: var(--muted); }
.live-pill, .pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 999px; font-size: 12px; font-weight: 650; background: #edf8f3; color: #16714d; }
.live-pill::before { content: ""; width: 8px; height: 8px; background: #2fb878; border-radius: 50%; box-shadow: 0 0 0 5px #2fb87820; }
.pill.warning { background: #fff6e5; color: #915400; }
.pill.danger { background: #ffefed; color: #b42318; }
.pill.neutral { background: #eff1f4; color: #4b5563; }
.card { background: var(--surface); border: 1px solid rgba(255,255,255,.8); border-radius: var(--radius);
  box-shadow: var(--shadow); backdrop-filter: blur(18px); padding: 22px; }
.grid { display: grid; gap: 18px; }
.stats-grid { grid-template-columns: repeat(4, minmax(0,1fr)); margin-bottom: 18px; }
.stat { position: relative; overflow: hidden; min-height: 142px; }
.stat::after { content: ""; position: absolute; width: 90px; height: 90px; border-radius: 50%; right: -35px; bottom: -35px; background: var(--accent,#0071e3); opacity: .08; }
.stat-label { color: var(--muted); font-size: 13px; }
.stat-value { display: block; margin: 14px 0 5px; font-size: 34px; font-weight: 720; letter-spacing: -.05em; }
.stat-detail { font-size: 12px; color: var(--muted); }
.two-col { grid-template-columns: minmax(0, 1.6fr) minmax(300px, .7fr); margin-bottom: 18px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.alerts { display: grid; gap: 10px; }
.alert { display: grid; grid-template-columns: 10px 1fr; gap: 12px; padding: 13px; background: #f8f9fb; border: 1px solid var(--line); border-radius: 14px; }
.alert::before { content: ""; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--green); }
.alert.warning::before { background: #f59e0b; }
.alert.critical::before { background: var(--red); }
.alert.info::before { background: var(--blue); }
.alert p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.chart { height: 225px; display: grid; grid-template-columns: repeat(24,minmax(8px,1fr)); align-items: end; gap: 5px; padding-top: 20px; border-bottom: 1px solid var(--line); }
.chart-column { height: 100%; display: flex; align-items: end; justify-content: center; gap: 2px; position: relative; }
.bar { width: 28%; min-width: 3px; border-radius: 5px 5px 1px 1px; height: var(--height); transition: opacity .15s; }
.bar:hover { opacity: .72; }
.bar.requests { background: linear-gradient(#4fa3f7,#0071e3); }
.bar.records { background: linear-gradient(#5bd19a,#1f9d68); }
.bar.errors { background: linear-gradient(#ff9a91,#d92d20); }
.chart-label { position: absolute; bottom: -22px; font-size: 9px; color: var(--muted); }
.legend { display: flex; gap: 16px; margin-top: 30px; color: var(--muted); font-size: 12px; }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.table-card { padding: 0; overflow: hidden; }
.table-head { padding: 22px 22px 10px; }
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; text-align: left; padding: 12px 18px; background: #fafafa; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
td { padding: 15px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:hover { background: rgba(0,113,227,.025); }
tbody tr:last-child td { border-bottom: 0; }
code { font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; overflow-wrap: anywhere; }
.button, button { appearance: none; border: 0; border-radius: 12px; padding: 10px 15px; background: var(--blue); color: #fff; font-weight: 650; cursor: pointer; text-decoration: none; display: inline-flex; justify-content: center; align-items: center; gap: 7px; transition: .18s ease; }
.button:hover, button:hover { background: var(--blue-dark); transform: translateY(-1px); }
.button.secondary, button.secondary { background: #eef1f5; color: #273142; }
.button.danger, button.danger { background: #fff0ef; color: #b42318; }
.button.compact, button.compact { padding: 7px 10px; border-radius: 9px; font-size: 12px; }
form.inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
label { display: grid; gap: 6px; color: #3f4650; font-size: 12px; font-weight: 650; }
input, select { width: 100%; border: 1px solid #d7dbe1; border-radius: 12px; padding: 11px 12px; background: rgba(255,255,255,.9); color: var(--text); outline: none; transition: .15s; }
input:focus, select:focus { border-color: #55a5ef; box-shadow: 0 0 0 4px #0071e315; }
.search { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.notice, .error-box { padding: 14px 16px; border-radius: 14px; margin-bottom: 18px; font-size: 13px; }
.notice { background: #eaf8f1; color: #156b49; border: 1px solid #bce8d2; }
.error-box { background: #fff0ef; color: #a5261c; border: 1px solid #ffc9c4; }
details { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
summary { cursor: pointer; color: var(--blue); font-weight: 650; font-size: 13px; }
.detail-panel { margin-top: 12px; padding: 14px; border-radius: 14px; background: #f7f8fa; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow: auto; padding: 16px; border-radius: 14px; color: #d7e0ec; background: #131b29; font: 12px/1.55 "SFMono-Regular",Consolas,monospace; }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background:
  radial-gradient(circle at 20% 10%, #55a5ef2e, transparent 28rem),
  radial-gradient(circle at 90% 90%, #70c79e25, transparent 30rem), #f5f5f7; }
.login-card { width: min(440px,100%); padding: 36px; background: rgba(255,255,255,.9); border: 1px solid #fff; border-radius: 30px; box-shadow: 0 30px 90px #1d35571c; backdrop-filter: blur(25px); }
.login-brand { text-align: center; margin-bottom: 25px; }
.login-brand img { width: 74px; height: 74px; }
.login-brand h1 { font-size: 30px; margin-top: 15px; }
.login-card form { display: grid; gap: 15px; }
.login-card button { margin-top: 5px; padding: 12px; }
.credential-panel { margin-bottom: 18px; border: 1px solid #a9d9bf; background: #effaf4; }
.secret { padding: 12px; border: 1px dashed #7cb596; border-radius: 12px; background: #fff; margin: 8px 0; }
.empty { text-align: center; color: var(--muted); padding: 35px; }
.mobile-menu { display: none; }
@media (max-width: 1060px) {
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .two-col { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .nav { grid-template-columns: repeat(3,1fr); }
  .sidebar-foot { margin-top: 18px; }
  .content { padding: 24px 16px 45px; }
  .stats-grid, .form-grid { grid-template-columns: 1fr; }
  .topbar { align-items: center; }
}