@font-face {
  font-family: "FontAwesome";
  src: url("/shared/fonts/fontawesome-webfont.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.fa { font-family: "FontAwesome" !important; font-style: normal; font-weight: normal; }
/* The bundled LVGL asset is the mature Font Awesome 4 webfont. Keep its
   original codepoint map here so later Font Awesome CSS aliases cannot point
   at glyphs that do not exist in the local font file. */
.fa-angle-down:before{content:"\f107"}.fa-angle-right:before{content:"\f105"}.fa-arrow-right:before{content:"\f061"}
.fa-ban:before{content:"\f05e"}.fa-bars:before{content:"\f0c9"}.fa-bolt:before{content:"\f0e7"}.fa-book:before{content:"\f02d"}
.fa-building:before{content:"\f1ad"}.fa-check:before{content:"\f00c"}.fa-check-circle:before{content:"\f058"}.fa-circle:before{content:"\f111"}
.fa-comments:before{content:"\f086"}.fa-credit-card:before{content:"\f09d"}.fa-diamond:before{content:"\f219"}.fa-exclamation-circle:before{content:"\f06a"}
.fa-external-link:before{content:"\f08e"}.fa-folder-o:before{content:"\f114"}.fa-folder-open:before{content:"\f07c"}.fa-history:before{content:"\f1da"}
.fa-home:before{content:"\f015"}.fa-life-ring:before{content:"\f1cd"}.fa-link:before{content:"\f0c1"}.fa-pencil:before{content:"\f040"}
.fa-plus:before{content:"\f067"}.fa-refresh:before{content:"\f021"}.fa-search:before{content:"\f002"}.fa-shield:before{content:"\f132"}
.fa-sign-in:before{content:"\f090"}.fa-sign-out:before{content:"\f08b"}.fa-signal:before{content:"\f012"}.fa-sliders:before{content:"\f1de"}
.fa-tablet:before{content:"\f10a"}.fa-times:before{content:"\f00d"}.fa-trash:before{content:"\f1f8"}.fa-upload:before{content:"\f093"}
.fa-user-plus:before{content:"\f234"}.fa-users:before{content:"\f0c0"}.fa-video-camera:before{content:"\f03d"}

:root {
  color-scheme: light;
  --lp-blue-50: #eef5ff;
  --lp-blue-100: #d9e9ff;
  --lp-blue-500: #2878f0;
  --lp-blue-600: #1764d9;
  --lp-blue-700: #164fa7;
  --lp-slate-950: #111827;
  --lp-slate-900: #172033;
  --lp-slate-700: #3d4a60;
  --lp-slate-600: #556177;
  --lp-slate-500: #737f92;
  --lp-slate-300: #cdd4df;
  --lp-slate-200: #e3e7ed;
  --lp-slate-100: #f1f3f6;
  --lp-slate-50: #f7f8fa;
  --lp-white: #fff;
  --lp-red-600: #d92d36;
  --lp-red-50: #fff0f1;
  --lp-yellow-600: #a85f00;
  --lp-yellow-50: #fff7dc;
  --lp-green-600: #168456;
  --lp-green-50: #eaf8f1;
  --lp-font: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --lp-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --lp-space-1: 4px;
  --lp-space-2: 8px;
  --lp-space-3: 12px;
  --lp-space-4: 16px;
  --lp-space-5: 20px;
  --lp-space-6: 24px;
  --lp-space-8: 32px;
  --lp-radius-control: 6px;
  --lp-radius-card: 10px;
  --lp-control-compact: 32px;
  --lp-control-default: 36px;
  --lp-control-large: 40px;
  --lp-sidebar-expanded: 216px;
  --lp-sidebar-collapsed: 56px;
  --lp-topbar-height: 64px;
  --lp-shadow-popover: 0 18px 48px rgba(21, 33, 52, .16), 0 2px 8px rgba(21, 33, 52, .08);
  --lp-focus: 0 0 0 3px rgba(40, 120, 240, .18);
}

* { box-sizing: border-box; }
html { font-family: var(--lp-font); -webkit-font-smoothing: antialiased; }
body { margin: 0; color: var(--lp-slate-950); background: var(--lp-slate-50); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }

.lp-btn {
  min-height: var(--lp-control-default); display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--lp-slate-300); border-radius: var(--lp-radius-control);
  padding: 8px 14px; color: var(--lp-slate-900); background: var(--lp-white);
  font-weight: 650; font-size: 14px; line-height: 20px; cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .1s;
}
.lp-btn:hover { border-color: #9eabba; background: #fafbfc; }
.lp-btn:focus-visible, .lp-field:focus, .lp-select:focus { outline: none; border-color: var(--lp-blue-500); box-shadow: var(--lp-focus); }
.lp-btn:active { transform: translateY(1px); }
.lp-btn:disabled { cursor: not-allowed; opacity: .5; transform: none; }
.lp-btn.primary { border-color: var(--lp-blue-600); color: var(--lp-white); background: var(--lp-blue-600); }
.lp-btn.primary:hover { background: var(--lp-blue-700); }
.lp-btn.danger { color: var(--lp-red-600); border-color: #f1b8bd; background: var(--lp-red-50); }
.lp-btn.ghost { border-color: transparent; background: transparent; }
.lp-btn.small, .lp-btn.compact { min-height: var(--lp-control-compact); padding: 5px 10px; font-size: 12px; }
.lp-btn.large { min-height: var(--lp-control-large); }

.lp-field, .lp-select, .lp-textarea {
  width: 100%; height: var(--lp-control-default); min-height: var(--lp-control-default); border: 1px solid var(--lp-slate-300);
  border-radius: var(--lp-radius-control); background: var(--lp-white); color: var(--lp-slate-950);
  padding: 7px 11px; font-size: 13px; line-height: 20px; outline: none;
}
.lp-field.compact, .lp-select.compact { height: var(--lp-control-compact); min-height: var(--lp-control-compact); padding-top: 5px; padding-bottom: 5px; }
.lp-field.large, .lp-select.large { height: var(--lp-control-large); min-height: var(--lp-control-large); font-size: 14px; }
.lp-textarea { height: auto; min-height: 96px; resize: vertical; }
.lp-field::placeholder { color: #98a2b3; }
.lp-label { display: block; margin: 0 0 6px; color: var(--lp-slate-700); font-size: 13px; font-weight: 650; }
.lp-help { color: var(--lp-slate-500); font-size: 12px; line-height: 18px; }

.lp-select-shell { position: relative; display: block; min-width: 0; }
.lp-select-shell > .lp-select { display: block; padding-right: 34px; appearance: none; -webkit-appearance: none; }
.lp-select-shell > .fa { position: absolute; right: 12px; top: 50%; z-index: 1; color: var(--lp-slate-500); font-size: 12px; transform: translateY(-50%); pointer-events: none; }
.lp-select-shell:has(.lp-select:disabled) > .fa { opacity: .45; }

.lp-control-error { border-color: var(--lp-red-600) !important; }
.lp-field-error { display: block; margin-top: 5px; color: var(--lp-red-600); font-size: 11px; line-height: 16px; }

.lp-app-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--lp-blue-500); font-size: 17px; font-weight: 850; letter-spacing: .08em; white-space: nowrap; }
.lp-app-brand::before { content: ""; width: 10px; height: 10px; flex: 0 0 10px; border: 2px solid var(--lp-green-600); border-radius: 50%; box-shadow: 0 0 12px rgba(53,208,127,.6); }
.lp-app-brand > span { color: var(--lp-blue-500); }
.lp-app-brand > small { padding-left: 10px; border-left: 1px solid var(--lp-slate-300); color: var(--lp-slate-500); font-size: 9px; font-weight: 750; letter-spacing: .12em; }

.lp-sidebar-collapse { width: calc(100% - 16px); min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; margin: auto 8px 0; border: 0; border-top: 1px solid var(--lp-slate-200); color: var(--lp-slate-500); background: transparent; cursor: pointer; }
.lp-sidebar-collapse:hover { color: var(--lp-slate-900); background: var(--lp-slate-100); }

.lp-account-trigger { min-width: 0; min-height: var(--lp-control-default); display: inline-grid; grid-template-columns: 28px minmax(0,auto) auto; align-items: center; gap: 8px; padding: 3px 9px 3px 4px; border: 1px solid var(--lp-slate-300); border-radius: var(--lp-radius-control); color: var(--lp-slate-900); background: var(--lp-white); text-align: left; cursor: pointer; }
.lp-account-trigger .avatar { width: 28px; height: 28px; font-size: 11px; }
.lp-account-trigger > span:nth-child(2) { min-width: 0; display: grid; }
.lp-account-trigger b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.lp-account-trigger small { color: var(--lp-slate-500); font-size: 9px; }

.lp-card { border: 1px solid var(--lp-slate-200); border-radius: var(--lp-radius-card); background: var(--lp-white); }
.lp-card-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--lp-slate-200); }
.lp-card-body { padding: 20px; }
.lp-title { margin: 0; font-size: 20px; line-height: 28px; letter-spacing: -.01em; }
.lp-subtitle { margin: 4px 0 0; color: var(--lp-slate-600); font-size: 14px; line-height: 22px; }

.lp-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 8px; border-radius: 999px; background: var(--lp-slate-100); color: var(--lp-slate-700); font-size: 12px; font-weight: 700; }
.lp-badge.ok { background: var(--lp-green-50); color: var(--lp-green-600); }
.lp-badge.warn { background: var(--lp-yellow-50); color: var(--lp-yellow-600); }
.lp-badge.danger { background: var(--lp-red-50); color: var(--lp-red-600); }
.lp-badge.info { background: var(--lp-blue-50); color: var(--lp-blue-700); }

.lp-table-wrap { width: 100%; overflow: auto; }
.lp-table { width: 100%; border-collapse: collapse; white-space: nowrap; font-size: 13px; }
.lp-table th { height: 42px; padding: 0 14px; color: var(--lp-slate-600); background: #fafbfc; border-bottom: 1px solid var(--lp-slate-200); text-align: left; font-size: 12px; font-weight: 750; }
.lp-table td { min-height: 48px; padding: 11px 14px; border-bottom: 1px solid var(--lp-slate-200); vertical-align: middle; }
.lp-table tr:last-child td { border-bottom: 0; }
.lp-table tbody tr:hover { background: #fbfcfe; }

.lp-empty { min-height: 180px; display: grid; place-items: center; padding: 32px; color: var(--lp-slate-500); text-align: center; }
.lp-empty .fa { display: block; margin: 0 auto 12px; color: #aab4c3; font-size: 30px; }

.lp-dialog-backdrop { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; padding: 20px; background: rgba(18, 28, 45, .52); }
.lp-dialog-backdrop.open { display: grid; }
.lp-dialog { width: min(520px, 100%); max-height: calc(100vh - 40px); overflow: auto; border: 1px solid var(--lp-slate-200); border-radius: var(--lp-radius-card); background: var(--lp-white); box-shadow: var(--lp-shadow-popover); }
.lp-dialog-head, .lp-dialog-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; }
.lp-dialog-head { border-bottom: 1px solid var(--lp-slate-200); }
.lp-dialog-foot { justify-content: flex-end; border-top: 1px solid var(--lp-slate-200); }
.lp-dialog-body { padding: 20px; }
.lp-dialog h2 { margin: 0; font-size: 18px; }

.lp-toast { position: fixed; right: 20px; bottom: 20px; z-index: 140; max-width: 420px; padding: 11px 14px; border-radius: 8px; color: var(--lp-white); background: var(--lp-slate-900); box-shadow: var(--lp-shadow-popover); font-size: 13px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: .18s; }
.lp-toast.show { opacity: 1; transform: translateY(0); }
.lp-toast.error { background: #a51d28; }

.lp-icon-box { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 8px; color: var(--lp-blue-700); background: var(--lp-blue-50); }

.lp-dark {
  color-scheme: dark;
  --lp-white: #111827;
  --lp-slate-50: #080d17;
  --lp-slate-100: #172033;
  --lp-slate-200: #253047;
  --lp-slate-300: #35425c;
  --lp-slate-500: #95a1b7;
  --lp-slate-600: #aab5c8;
  --lp-slate-700: #d1d8e6;
  --lp-slate-900: #edf2fa;
  --lp-slate-950: #f7f9fc;
}

@media (max-width: 720px) {
  .lp-card-header, .lp-card-body { padding-left: 16px; padding-right: 16px; }
  .lp-dialog-backdrop { padding: 0; align-items: end; }
  .lp-dialog { width: 100%; max-height: 88vh; border-radius: 12px 12px 0 0; }
}