:root {
  --hub-bg: #f5f6f8;
  --hub-surface: #ffffff;
  --hub-border: #dfe3ea;
  --hub-text: #20242d;
  --hub-muted: #707887;
  --hub-primary: #4f65d9;
  --hub-primary-soft: rgba(79, 101, 217, .1);
  --hub-shadow: 0 8px 30px rgba(20, 28, 50, .08);
}
html[data-hub-theme="dark"] {
  --hub-bg: #12141a;
  --hub-surface: #1b1e27;
  --hub-border: #343947;
  --hub-text: #eef1f7;
  --hub-muted: #9da6b7;
  --hub-primary: #9aabff;
  --hub-primary-soft: rgba(154, 171, 255, .12);
  --hub-shadow: 0 10px 34px rgba(0, 0, 0, .28);
}
.hub-body { background:var(--hub-bg)!important; color:var(--hub-text)!important; max-width:100%; overflow-x:hidden; }
.hub-navbar {
  min-height:62px; display:grid; grid-template-columns:auto auto minmax(0,1fr) auto;
  align-items:center; gap:1rem; padding:.55rem 1.25rem;
  background:var(--hub-surface); border-bottom:1px solid var(--hub-border);
  box-shadow:0 1px 8px rgba(0,0,0,.04); position:relative; z-index:20; flex-shrink:0;
}
.hub-brand { display:flex; align-items:center; gap:.65rem; color:var(--hub-text); text-decoration:none; flex:none; }
.hub-brand-mark {
  width:36px; height:36px; display:grid; place-items:center; border-radius:10px;
  color:var(--hub-primary); background:var(--hub-primary-soft); font-size:1.15rem;
}
.hub-brand-name { display:block; font-weight:750; line-height:1.05; letter-spacing:-.02em; }
.hub-brand-subtitle { display:block; color:var(--hub-muted); font-size:.66rem; margin-top:.2rem; }
.hub-divider { width:1px; height:30px; background:var(--hub-border); flex:none; }
.hub-nav-links {
  display:flex; flex-wrap:wrap; align-items:center; gap:.25rem;
  list-style:none; padding:0; margin:0; min-width:0;
}
.hub-nav-link {
  display:flex; align-items:center; gap:.48rem; padding:.55rem .72rem; border:0;
  border-radius:8px; color:var(--hub-muted); background:transparent; text-decoration:none;
  font-size:.82rem; font-weight:600; white-space:nowrap; cursor:pointer;
}
.hub-nav-link:hover { color:var(--hub-primary); background:var(--hub-primary-soft); }
.hub-nav-link.active { color:var(--hub-primary); background:var(--hub-primary-soft); }
.hub-nav-right { display:flex; align-items:center; gap:.5rem; flex:none; white-space:nowrap; }
.hub-icon-btn {
  width:36px; height:36px; border:1px solid var(--hub-border); border-radius:8px;
  display:grid; place-items:center; color:var(--hub-muted); background:var(--hub-surface);
}
.hub-icon-btn:hover { color:var(--hub-primary); background:var(--hub-primary-soft); }
.hub-user-menu { position:relative; }
.hub-user-menu summary {
  display:flex; align-items:center; gap:.55rem; cursor:pointer; list-style:none;
  padding:.28rem .55rem .28rem .3rem; border-radius:9px;
}
.hub-user-menu summary::-webkit-details-marker { display:none; }
.hub-user-menu summary:hover { background:var(--hub-primary-soft); }
.hub-avatar {
  width:32px; height:32px; display:grid; place-items:center; border-radius:50%;
  background:var(--hub-primary); color:white; font-size:.72rem; font-weight:750;
}
.hub-user-name { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.82rem; font-weight:600; }
.hub-menu-panel {
  position:absolute; right:0; top:44px; min-width:210px; padding:.45rem;
  background:var(--hub-surface); border:1px solid var(--hub-border); border-radius:10px;
  box-shadow:var(--hub-shadow);
}
.hub-menu-label { padding:.45rem .6rem; color:var(--hub-muted); font-size:.72rem; border-bottom:1px solid var(--hub-border); margin-bottom:.3rem; }
.hub-menu-item {
  display:flex; width:100%; align-items:center; gap:.6rem; border:0; border-radius:7px;
  padding:.58rem .65rem; background:transparent; color:var(--hub-text); text-decoration:none;
  font-size:.82rem; text-align:left;
}
.hub-menu-item:hover { background:var(--hub-primary-soft); color:var(--hub-primary); }
.hub-surface {
  background:var(--hub-surface)!important; border:1px solid var(--hub-border)!important;
  color:var(--hub-text)!important; border-radius:10px!important; box-shadow:none;
}
.hub-table {
  --bs-table-color:var(--hub-text);
  --bs-table-bg:transparent;
  --bs-table-border-color:var(--hub-border);
  --bs-table-striped-color:var(--hub-text);
  --bs-table-hover-color:var(--hub-text);
  --bs-table-hover-bg:var(--hub-primary-soft);
  color:var(--hub-text);
}
.hub-table thead { border-color:var(--hub-border); }
.hub-sort-button { color:var(--hub-text)!important; }
.hub-sort-button:hover { color:var(--hub-primary)!important; }
.hub-page { padding:1.5rem 2rem; }
.hub-page-title { font-size:1.45rem; font-weight:650; margin:0; }
.hub-page-subtitle { color:var(--hub-muted); font-size:.82rem; }
.hub-section-title {
  font-size:.75rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--hub-muted); font-weight:750; margin-bottom:1rem;
}
@media (max-width:1600px) {
  .hub-navbar { gap:.45rem; padding-inline:.75rem; }
  .hub-nav-link { padding-inline:.52rem; }
  .hub-brand-subtitle { display:none; }
}
@media (max-width:1200px) {
  .hub-navbar { grid-template-columns:auto minmax(0,1fr) auto; overflow:visible; }
  .hub-divider { display:none; }
  .hub-nav-links { grid-column:1 / -1; grid-row:2; gap:.15rem; }
  .hub-nav-right { grid-column:3; grid-row:1; }
  .hub-user-name,.hub-brand-subtitle { display:none; }
}
@media (max-width:600px) {
  .hub-navbar { padding:.5rem; }
  .hub-brand-name { display:none; }
  .hub-nav-link { padding:.45rem .5rem; font-size:.76rem; }
}