.system-ui { overflow-wrap: anywhere; }
.system-ui [hidden] { display: none !important; }
.system-ui :is(a,button,input,summary,[tabindex]):focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
.system-ui input[type="checkbox"] { accent-color: #2563eb; width: 1rem; height: 1rem; }
.system-card { min-width: 0; overflow: hidden; border: 1px solid #e5e7eb; border-radius: 0.75rem; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 5%); }
.system-card-header { padding: 1rem 1.5rem; border-bottom: 1px solid #e5e7eb; }
.system-tabs { display: flex; gap: 0.25rem; max-width: 100%; overflow-x: auto; }
.system-tab { display: inline-flex; align-items: center; gap: 0.5rem; flex-shrink: 0; padding: 0.75rem 1rem; border-radius: 0.5rem; color: #6b7280; font-size: 0.875rem; font-weight: 500; white-space: nowrap; }
.system-tab:hover { background: #f9fafb; }
.system-tab[aria-current] { background: #eff6ff; color: #2563eb; }
.system-link { color: #2563eb; }
.system-link:hover { text-decoration: underline; }
.system-button { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; background: #fff; color: #374151; font-size: 0.875rem; font-weight: 500; cursor: pointer; }
.system-button:hover { background: #f3f4f6; }
.system-button:disabled { opacity: 0.5; cursor: wait; }
.system-search { width: min(100%,22rem); }
.system-search input { width: 100%; min-width: 0; padding: 0.625rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; background: #fff; color: #1f2937; font-size: 0.875rem; }
.system-table-scroll { position: relative; max-width: 100%; overflow-x: auto; }
.system-table { width: 100%; min-width: 44rem; border-collapse: collapse; font-size: 0.875rem; text-align: left; }
.system-table :is(th,td) { position: relative; padding: 0.875rem 1.5rem; text-align: start; vertical-align: middle; }
.system-table thead th { background: #f9fafb; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; white-space: nowrap; }
.system-table thead button { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; text-transform: inherit; }
.system-table tbody :is(th,td) { border-top: 1px solid #e5e7eb; }
.system-table tbody th { font-weight: 600; }
.system-table tr:target { background: #eff6ff; }
.system-runtime-cell { min-width: 16rem; }
.system-runtime { max-width: 100%; border: 1px solid #d1d5db; border-radius: 0.5rem; font-size: 0.75rem; }
.system-runtime summary { padding: 0.25rem 0.5rem; cursor: pointer; }
.system-runtime code { display: block; padding: 0.5rem; border-top: 1px solid #e5e7eb; white-space: normal; }
.system-runtime-description { width: 65%; min-width: 20rem; }
.system-runtime-description code { white-space: normal; }
.system-runtime-description pre { max-width: 100%; overflow-x: auto; }
.system-empty { padding: 2rem 1.5rem !important; color: #6b7280; font-size: 0.875rem; text-align: center !important; }
.system-error { border: 1px solid #fecaca; border-radius: 0.5rem; padding: 0.75rem 1rem; background: #fef2f2; color: #b91c1c; font-size: 0.875rem; }
.system-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border: 1px solid #d1d5db; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; }
.system-badge[data-state="online"],.system-badge[data-state="latest"],.system-version[data-version="latest"] { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
.system-badge[data-state="offline"] { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.system-badge[data-state="older"],.system-version[data-version="older"] { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.system-version { min-width: 10rem; }
.statistics-chart { position: relative; width: 100%; height: 21rem; min-width: 0; }
.statistics-chart canvas { max-width: 100%; }
.statistics-table { min-width: 22rem; }
.dark .system-card { border-color: #404040; background: #262626; }
.dark .system-card-header,.dark .system-table tbody :is(th,td),.dark .system-runtime code { border-color: #404040; }
.dark .system-tab,.dark .system-empty { color: #a3a3a3; }
.dark .system-tab:hover,.dark .system-tab[aria-current] { background: #404040; color: #e5e5e5; }
.dark .system-link { color: #60a5fa; }
.dark .system-button,.dark .system-runtime { border-color: #525252; background: #262626; color: #e5e5e5; }
.dark .system-button:hover { background: #404040; }
.dark .system-search input { border-color: #404040; background: #171717; color: #e5e5e5; }
.dark .system-table thead th { background: #171717; }
.dark .system-table tr:target { background: #172554; }
.dark .system-error { border-color: #991b1b; background: #450a0a; color: #fca5a5; }
.dark .system-badge { border-color: #525252; }
.dark .system-badge[data-state="online"],.dark .system-badge[data-state="latest"],.dark .system-version[data-version="latest"] { border-color: #065f46; background: #022c22; color: #6ee7b7; }
.dark .system-badge[data-state="offline"] { border-color: #991b1b; background: #450a0a; color: #fca5a5; }
.dark .system-badge[data-state="older"],.dark .system-version[data-version="older"] { border-color: #92400e; background: #451a03; color: #fcd34d; }