:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:16px;
  --space-4:24px;
  --space-5:32px;

  --font-family-base:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-size-h1:32px;
  --font-size-h2:24px;
  --font-size-h3:16px;
  --font-size-body:14px;
  --font-size-small:12px;

  --color-primary:#2D7FF9;
  --color-secondary:#0EA5E9;
  --color-success:#22C55E;
  --color-error:#EF4444;

  --color-bg:#0B0F14;
  --color-surface:#101826;
  --color-surface-2:rgba(255,255,255,.03);
  --color-text:#E6EDF6;
  --color-muted:#9FB0C3;
  --color-border:rgba(255,255,255,.10);

  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:16px;
  --shadow-panel:0 8px 24px rgba(0,0,0,.35);
  --focus-ring:0 0 0 3px color-mix(in srgb, var(--color-primary) 28%, transparent);
}

html,body{
  font-family:var(--font-family-base);
}

.ui-callout{
  border:1px solid var(--ui-callout-border, var(--color-border));
  border-radius:var(--radius-md);
  padding:var(--space-2) var(--space-3);
  font-size:var(--font-size-small);
  background:var(--ui-callout-bg, var(--color-surface-2));
  color:var(--ui-callout-text, var(--color-text));
}

.ui-callout.error{
  border-color:color-mix(in srgb, var(--color-error) 45%, transparent);
  background:color-mix(in srgb, var(--color-error) 10%, transparent);
}

.ui-callout.success{
  border-color:color-mix(in srgb, var(--color-success) 45%, transparent);
  background:color-mix(in srgb, var(--color-success) 10%, transparent);
}

.ui-input{
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  font-size:var(--font-size-body);
  font-family:var(--font-family-base);
}

.ui-input:focus-visible,
.ui-btn:focus-visible{
  outline:2px solid color-mix(in srgb, var(--color-primary) 65%, white 35%);
  outline-offset:2px;
}

.ui-btn{
  border-radius:999px;
  padding:8px 12px;
  border:1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
  background:color-mix(in srgb, var(--color-primary) 16%, transparent);
  color:var(--color-text);
  font-size:12px;
  font-weight:800;
  text-decoration:none;
  line-height:1;
  cursor:pointer;
}

.ui-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* Standardized dark-shell UI primitives (opt-in via body.ui-standard) */
.ui-standard .app{
  max-width:1240px;
  margin:0 auto;
  padding:var(--space-3) 12px var(--space-5);
}

.ui-standard .topbar{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  flex-wrap:wrap;
  margin-bottom:var(--space-3);
  padding:10px 12px;
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  background:rgba(11,15,20,.82);
  backdrop-filter:blur(10px);
  box-shadow:var(--shadow-panel);
}

.ui-standard .brand{min-width:0}
.ui-standard .brand strong{
  display:block;
  font-size:18px;
  letter-spacing:.2px;
}
.ui-standard .brand span{
  display:block;
  margin-top:4px;
  color:var(--color-muted);
  font-size:var(--font-size-small);
}

.ui-standard .nav{
  display:flex;
  gap:var(--space-2);
  flex-wrap:wrap;
}
.ui-standard .nav a,
.ui-standard .nav .navLink{
  text-decoration:none;
  padding:7px 11px;
  border:1px solid rgba(143,170,199,.30);
  border-radius:999px;
  background:rgba(12,23,35,.72);
  color:#eff8ff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  line-height:1;
  white-space:nowrap;
}
.ui-standard .nav a:hover,
.ui-standard .nav .navLink:hover{
  border-color:rgba(143,170,199,.45);
}

.ui-standard .pageHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--space-3);
  flex-wrap:wrap;
  margin:10px 2px var(--space-3);
}
.ui-standard .pageHead h1{
  margin:0;
  font-size:28px;
  letter-spacing:.2px;
  line-height:1.2;
}
.ui-standard .pageHead p{
  margin:6px 0 0;
  color:var(--color-muted);
  font-size:13px;
}
.ui-standard .status{
  color:var(--color-muted);
  font-size:13px;
}

.ui-standard .panel{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-panel);
  overflow:hidden;
}
.ui-standard .panelHead{
  padding:18px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.ui-standard .panelHead strong{font-size:18px}
.ui-standard .panelHead p{
  margin:6px 0 0;
  color:var(--color-muted);
  font-size:13px;
  line-height:1.45;
}
.ui-standard .panelBody{padding:18px}

.ui-standard .toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.ui-standard .filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.ui-standard .field{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(12,23,35,.72);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.ui-standard .field svg{
  width:14px;
  height:14px;
  color:var(--color-muted);
  flex:0 0 auto;
}
.ui-standard .field input{
  border:0;
  outline:none;
  min-width:220px;
  font-size:13px;
  color:var(--color-text);
  background:transparent;
  font-family:var(--font-family-base);
}

.ui-standard .select{
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:9px 12px;
  font-size:13px;
  background:rgba(12,23,35,.72);
  color:var(--color-text);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  font-family:var(--font-family-base);
  outline:none;
}
.ui-standard .field input:focus-visible,
.ui-standard .select:focus-visible,
.ui-standard .tabBtn:focus-visible,
.ui-standard .linkPill:focus-visible{
  box-shadow:var(--focus-ring);
}
.ui-standard .select:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.ui-standard .tabs{
  display:flex;
  gap:var(--space-2);
  flex-wrap:wrap;
}
.ui-standard .tabBtn{
  border:1px solid rgba(143,170,199,.28);
  background:rgba(12,23,35,.72);
  border-radius:999px;
  padding:9px 14px;
  font-size:13px;
  font-weight:900;
  color:#d5e6f8;
  cursor:pointer;
}
.ui-standard .tabBtn.active{
  border-color:rgba(90,167,255,.55);
  background:rgba(90,167,255,.16);
  color:#eff8ff;
}
.ui-standard .tabPanel{display:none}
.ui-standard .tabPanel.active{display:block}

.ui-standard .summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:12px 0 14px;
}
.ui-standard .stat{
  padding:14px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.02);
}
.ui-standard .stat span{
  display:block;
  margin-bottom:6px;
  color:var(--color-muted);
  font-size:12px;
}
.ui-standard .stat strong{font-size:20px}

.ui-standard .tableWrap{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable both-edges;
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius-md);
}
.ui-standard table{
  width:100%;
  min-width:940px;
  border-collapse:collapse;
  background:rgba(255,255,255,.02);
}
.ui-standard th,
.ui-standard td{
  padding:14px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  text-align:left;
  font-size:13px;
  vertical-align:middle;
}
.ui-standard th{
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--color-muted);
  background:rgba(255,255,255,.03);
}
.ui-standard tr:last-child td{border-bottom:0}

.ui-standard .linkPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(90,167,255,.42);
  background:rgba(90,167,255,.14);
  color:#eff8ff;
  text-decoration:none;
  font-size:12px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
}
.ui-standard .linkPill:hover{
  background:rgba(90,167,255,.22);
  border-color:rgba(90,167,255,.62);
}

.ui-standard .empty{
  padding:16px 2px;
  color:var(--color-muted);
  font-size:14px;
}
.ui-standard .status.is-success{color:#9be8bf}
.ui-standard .status.is-error{color:#ff9eb5}

@media (max-width:980px){
  .ui-standard .summary{grid-template-columns:1fr}
  .ui-standard table{min-width:860px}
}

/* Standardized light-shell UI primitives (opt-in via body.ui-light-standard) */
.ui-light-standard{
  --bg:#f3f5f7;
  --panel:#ffffff;
  --text:#142033;
  --muted:#67768a;
  --border:#d9e1ea;
  --primary:#1b4b7a;
  --primary-strong:#153a61;
  --shadow:0 16px 40px rgba(20,32,51,.08);
  --radius:18px;
  --ui-callout-bg:#f7f9fc;
  --ui-callout-border:#d9e1ea;
  --ui-callout-text:#233447;
  color:var(--text);
  background:var(--bg);
  min-height:100vh;
}

.ui-light-standard .app{
  max-width:1080px;
  margin:0 auto;
  padding:24px 18px 40px;
}

.ui-light-standard .topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:24px;
}

.ui-light-standard .brand strong{
  display:block;
  font-size:18px;
}
.ui-light-standard .brand span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:13px;
}

.ui-light-standard .nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.ui-light-standard .nav a,
.ui-light-standard .nav .navLink{
  text-decoration:none;
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  color:var(--text);
  font-size:13px;
  font-weight:600;
  line-height:1;
}
.ui-light-standard .nav a:hover,
.ui-light-standard .nav .navLink:hover{
  border-color:#bfd0e2;
}

.ui-light-standard .pageHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.ui-light-standard .pageHead h1{
  margin:0 0 6px;
  font-size:28px;
}
.ui-light-standard .pageHead p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}

.ui-light-standard .panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.ui-light-standard .panelHead{
  padding:20px 22px;
  border-bottom:1px solid #eef2f6;
}
.ui-light-standard .panelBody{padding:22px}

.ui-light-standard .nav .navLink.is-active{
  border-color:var(--primary);
  background:var(--primary);
  color:#fff;
}

.ui-light-standard .tabs{
  display:flex;
  gap:8px;
  margin-bottom:20px;
}
.ui-light-standard .tabBtn{
  border:1px solid var(--border);
  background:#fff;
  color:var(--muted);
  border-radius:10px;
  padding:10px 14px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
.ui-light-standard .tabBtn.active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}

.ui-light-standard .field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:16px;
}
.ui-light-standard .field label{
  font-size:12px;
  font-weight:600;
  color:var(--muted);
}
.ui-light-standard .field input,
.ui-light-standard .field select,
.ui-light-standard .field textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:10px;
  padding:0 12px;
  font-size:14px;
  color:var(--text);
  background:#fff;
}
.ui-light-standard .field input,
.ui-light-standard .field select{
  height:44px;
}
.ui-light-standard .field textarea{
  min-height:108px;
  resize:vertical;
  padding:12px;
}

.ui-light-standard .actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.ui-light-standard .btn{
  border:0;
  border-radius:10px;
  padding:12px 16px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
}
.ui-light-standard .btn.primary{
  background:var(--primary);
  color:#fff;
}
.ui-light-standard .btn.primary:hover{
  background:var(--primary-strong);
}
.ui-light-standard .btn.secondary{
  background:#eef3f8;
  color:var(--text);
}

.ui-light-standard .link{
  color:var(--primary);
  text-decoration:none;
  font-size:14px;
  font-weight:600;
}

.ui-light-standard .infoList{
  margin:0;
  padding-left:18px;
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
}
.ui-light-standard .status{
  color:var(--muted);
  font-size:13px;
}
.ui-light-standard .status.is-success{color:#145c36}
.ui-light-standard .status.is-error{color:#8c1d1d}
.ui-light-standard .tableWrap{
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable both-edges;
}

.ui-light-standard input:focus-visible,
.ui-light-standard select:focus-visible,
.ui-light-standard textarea:focus-visible,
.ui-light-standard button:focus-visible,
.ui-light-standard a:focus-visible{
  outline:2px solid color-mix(in srgb, var(--primary) 55%, white 45%);
  outline-offset:2px;
}

@media (max-width:820px){
  .ui-light-standard .app{padding:18px 14px 28px}
  .ui-light-standard .pageHead{margin-bottom:14px}
}