:root {
  --kl-primary: #0470c1;
  --kl-primary-hover: #0868aa;
  --kl-primary-active: #03558f;
  --kl-sidebar: #2b2e35;
  --kl-sidebar-active: #1d1f25;
  --kl-sidebar-hover: #25282e;
  --kl-page: #f0f1f4;
  --kl-panel: #ffffff;
  --kl-head: #fbfbfb;
  --kl-text: #202124;
  --kl-text-regular: #555b63;
  --kl-text-muted: #8b9199;
  --kl-border: #e5e7eb;
  --kl-divider: #eceef1;
  --kl-green: #2f9b63;
  --kl-orange: #d98818;
  --kl-red: #d94b4b;
  --kl-teal: #238d91;
  --kl-violet: #7756a8;
  --kl-topbar-height: 50px;
  --kl-sidebar-width: 220px;
  --kl-page-header-height: 66px;
  --kl-control-height: 30px;
  --kl-row-height: 42px;
  --kl-shadow: 0 3px 12px rgba(21, 30, 42, 0.14);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 320px;
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  color: var(--kl-text);
  background: var(--kl-page);
  font-family: var(--regular-ff, Arial, "PingFang SC", "Microsoft YaHei", sans-serif);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: 0;
}

button {
  border: 0;
  cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

a {
  color: var(--kl-primary);
  text-decoration: none;
}

[hidden] {
  display: none !important;
}

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -3px;
}

.icon-sm {
  width: 14px;
  height: 14px;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Application shell */

.app-shell {
  min-width: 320px;
  min-height: 100%;
}

.topbar {
  position: fixed;
  z-index: 1200;
  inset: 0 0 auto;
  display: flex;
  align-items: stretch;
  height: var(--kl-topbar-height);
  color: #fff;
  background: var(--kl-primary);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.topbar-brand {
  display: flex;
  align-items: center;
  width: var(--kl-sidebar-width);
  min-width: var(--kl-sidebar-width);
  padding: 0 16px;
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.ecology-wordmark {
  font-family: Arial, sans-serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.brand-separator {
  width: 1px;
  height: 20px;
  margin: 0 11px;
  background: rgba(255, 255, 255, 0.32);
}

.brand-project {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-nav-toggle {
  display: none !important;
  margin-right: 6px;
}

.top-modules {
  display: flex;
  align-items: stretch;
  height: 50px;
}

.top-module {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 108px;
  height: 50px;
  padding: 0 15px;
  color: rgba(255, 255, 255, 0.82);
  background: transparent;
  white-space: nowrap;
}

.top-module:hover,
.top-module:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.top-module.active,
.top-module[aria-current="page"] {
  color: #fff;
  background: rgba(0, 0, 0, 0.1);
}

.top-module.active::after,
.top-module[aria-current="page"]::after {
  position: absolute;
  right: 15px;
  bottom: 0;
  left: 15px;
  height: 3px;
  background: #fff;
  content: "";
}

.topbar-actions {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 50px;
  margin-left: auto;
}

.global-search-wrap {
  display: flex;
  align-items: center;
  width: 228px;
  height: 30px;
  margin-right: 8px;
  padding: 0 9px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}

.global-search-wrap:focus-within {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.45);
}

.global-search-wrap .icon {
  width: 16px;
  height: 16px;
}

.global-search-wrap input {
  min-width: 0;
  width: 100%;
  height: 28px;
  margin-left: 7px;
  padding: 0;
  color: #fff;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 12px;
}

.global-search-wrap input::placeholder {
  color: rgba(255, 255, 255, 0.65);
}

.topbar-icon,
.icon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  height: 30px;
  padding: 0;
  color: var(--kl-text-regular);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
}

.topbar-icon {
  width: 38px;
  min-width: 38px;
  height: 50px;
  color: rgba(255, 255, 255, 0.9);
  border-radius: 0;
}

.topbar-icon:hover,
.topbar-icon:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

.icon-button:hover,
.icon-button:focus-visible {
  color: var(--kl-primary);
  background: #f3f7fa;
  border-color: #dce7ef;
  outline: none;
}

.notice-dot {
  position: absolute;
  top: 11px;
  right: 8px;
  width: 7px;
  height: 7px;
  background: #ffcf4a;
  border: 1px solid var(--kl-primary);
  border-radius: 50%;
}

.account-wrap {
  position: relative;
  height: 50px;
}

.account-button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 146px;
  height: 50px;
  padding: 0 12px 0 9px;
  color: #fff;
  background: rgba(0, 0, 0, 0.08);
}

.account-button:hover,
.account-button:focus-visible,
.account-button[aria-expanded="true"] {
  background: rgba(0, 0, 0, 0.15);
  outline: none;
}

.account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  color: #406070;
  background: #dbe9ed;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
}

.account-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.3;
}

.account-copy strong,
.account-copy small {
  max-width: 76px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-copy strong {
  font-size: 12px;
  font-weight: 500;
}

.account-copy small {
  color: rgba(255, 255, 255, 0.68);
  font-size: 10px;
}

.account-menu {
  position: absolute;
  z-index: 1300;
  top: 56px;
  right: 8px;
  width: 254px;
  color: var(--kl-text);
  background: #fff;
  border: 1px solid var(--kl-border);
  border-radius: 4px;
  box-shadow: var(--kl-shadow);
}

.account-menu::before {
  position: absolute;
  top: -6px;
  right: 22px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-top: 1px solid var(--kl-border);
  border-left: 1px solid var(--kl-border);
  transform: rotate(45deg);
  content: "";
}

.account-menu-header {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 70px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--kl-divider);
}

.account-avatar-large {
  width: 38px;
  height: 38px;
  font-size: 14px;
}

.account-menu-header > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.account-menu-header strong {
  font-size: 14px;
  font-weight: 600;
}

.account-menu-header small {
  overflow: hidden;
  color: var(--kl-text-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu-list {
  padding: 6px 0;
}

.account-menu-list button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 38px;
  padding: 0 15px;
  color: var(--kl-text-regular);
  background: #fff;
  text-align: left;
}

.account-menu-list button:hover,
.account-menu-list button:focus-visible {
  color: var(--kl-primary);
  background: #f4f8fb;
  outline: none;
}

.account-menu-list .menu-arrow {
  margin-left: auto;
}

.sidebar {
  position: fixed;
  z-index: 900;
  top: var(--kl-topbar-height);
  bottom: 0;
  left: 0;
  display: flex;
  width: var(--kl-sidebar-width);
  color: #fff;
  background: var(--kl-sidebar);
  flex-direction: column;
}

.project-summary {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 68px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.project-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  color: #fff;
  background: #53646f;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
}

.project-summary > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.project-summary strong,
.project-summary small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-summary strong {
  font-size: 14px;
  font-weight: 500;
}

.project-summary small {
  margin-top: 2px;
  color: var(--kl-sidebar-muted, #9da1a8);
  font-size: 11px;
}

.app-nav {
  min-height: 0;
  flex: 1;
  padding: 8px 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.nav-group {
  padding-bottom: 8px;
}

.nav-group-title {
  display: block;
  height: 31px;
  padding: 9px 18px 5px;
  color: #858b94;
  font-size: 11px;
  line-height: 17px;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 42px;
  padding: 0 18px;
  color: #c5c8ce;
  background: transparent;
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
}

.nav-item .icon {
  width: 17px;
  height: 17px;
  color: #a7abb2;
}

.nav-item:hover,
.nav-item:focus-visible {
  color: #fff;
  background: var(--kl-sidebar-hover);
  outline: none;
}

.nav-item.active,
.nav-item[aria-current="page"] {
  color: #fff;
  background: var(--kl-sidebar-active);
}

.nav-item.active::before,
.nav-item[aria-current="page"]::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: #2b98e5;
  content: "";
}

.nav-item.active .icon,
.nav-item[aria-current="page"] .icon {
  color: #59aeea;
}

.sidebar-footer {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 58px;
  padding: 10px 16px;
  color: #aeb2b9;
  background: rgba(0, 0, 0, 0.08);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.status-indicator {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  background: #50b67a;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(80, 182, 122, 0.12);
}

.sidebar-footer > span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.sidebar-footer strong,
.sidebar-footer small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-footer strong {
  color: #d0d3d8;
  font-size: 11px;
  font-weight: 400;
}

.sidebar-footer small {
  color: #7e838b;
  font-size: 10px;
}

.main-content {
  height: 100vh;
  margin-left: var(--kl-sidebar-width);
  padding-top: var(--kl-topbar-height);
  overflow: hidden;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--kl-page-header-height);
  padding: 8px 16px 7px;
  background: #fff;
  border-bottom: 1px solid var(--kl-border);
}

.page-heading {
  min-width: 0;
}

.page-breadcrumb {
  display: flex;
  align-items: center;
  height: 18px;
  color: var(--kl-text-muted);
  font-size: 11px;
  white-space: nowrap;
}

.page-breadcrumb .icon {
  width: 12px;
  height: 12px;
  margin: 0 3px;
}

.page-header h1 {
  margin: 2px 0 0;
  overflow: hidden;
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin-left: 16px;
}

.data-period {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  color: var(--kl-text-muted);
  font-size: 12px;
  white-space: nowrap;
}

.data-period .icon {
  width: 15px;
  height: 15px;
}

.view-root {
  height: calc(100vh - var(--kl-topbar-height) - var(--kl-page-header-height));
  padding: 12px;
  overflow: auto;
  scrollbar-color: #c8ccd1 transparent;
  scrollbar-width: thin;
}

.view-root::-webkit-scrollbar,
.app-nav::-webkit-scrollbar,
.table-scroll::-webkit-scrollbar,
.drawer-body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.view-root::-webkit-scrollbar-thumb,
.app-nav::-webkit-scrollbar-thumb,
.table-scroll::-webkit-scrollbar-thumb,
.drawer-body::-webkit-scrollbar-thumb {
  background: #c8ccd1;
  border-radius: 4px;
}

.app-nav::-webkit-scrollbar-thumb {
  background: #484c54;
}

.view-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: calc(100vh - 150px);
  color: var(--kl-text-muted);
  font-size: 12px;
}

.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #d8e5ee;
  border-top-color: var(--kl-primary);
  border-radius: 50%;
  animation: kl-spin 0.8s linear infinite;
}

@keyframes kl-spin {
  to { transform: rotate(360deg); }
}

/* Page composition */

.page-stack {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 12px;
}

.page-toolbar,
.filterbar {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--kl-border);
  border-radius: 4px;
}

.page-toolbar {
  justify-content: space-between;
  gap: 12px;
}

.toolbar-left,
.toolbar-right,
.toolbar-actions,
.filter-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.toolbar-left {
  flex: 1;
}

.toolbar-title {
  overflow: hidden;
  font-size: 15px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toolbar-meta {
  color: var(--kl-text-muted);
  font-size: 12px;
  white-space: nowrap;
}

.toolbar-divider {
  width: 1px;
  height: 20px;
  margin: 0 3px;
  background: var(--kl-divider);
}

.filterbar {
  flex-wrap: wrap;
  gap: 8px;
}

.filterbar .form-control,
.filterbar .input,
.filterbar .select {
  width: 160px;
}

.filterbar .filter-search {
  width: 220px;
}

.filter-label {
  color: var(--kl-text-regular);
  font-size: 12px;
  white-space: nowrap;
}

.filter-actions {
  margin-left: auto;
}

.panel {
  min-width: 0;
  background: var(--kl-panel);
  border: 1px solid var(--kl-border);
  border-radius: 4px;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--kl-divider);
}

.panel-header h2,
.panel-header h3,
.panel-title {
  margin: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel-subtitle {
  margin-left: 8px;
  color: var(--kl-text-muted);
  font-size: 11px;
  font-weight: 400;
}

.panel-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.panel-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  color: var(--kl-text-muted);
  background: transparent;
  font-size: 12px;
  white-space: nowrap;
}

.panel-link:hover,
.panel-link:focus-visible {
  color: var(--kl-primary);
  outline: none;
}

.panel-body {
  min-width: 0;
  padding: 14px;
}

.panel-body.flush {
  padding: 0;
}

.panel-body.compact {
  padding: 10px 12px;
}

.dashboard-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}

.span-12 { grid-column: span 12; }
.span-9 { grid-column: span 9; }
.span-8 { grid-column: span 8; }
.span-7 { grid-column: span 7; }
.span-6 { grid-column: span 6; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; }

/* Metrics and business overview */

.kpi-strip {
  display: grid;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--kl-border);
  border-radius: 4px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kpi-metric,
.metric-item {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 104px;
  padding: 16px 18px;
}

.kpi-metric:not(:last-child)::after,
.metric-item:not(:last-child)::after {
  position: absolute;
  top: 18px;
  right: 0;
  bottom: 18px;
  width: 1px;
  background: var(--kl-divider);
  content: "";
}

.metric-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-right: 13px;
  flex: 0 0 auto;
  color: var(--kl-primary);
  background: #edf6fc;
  border-radius: 6px;
}

.metric-icon.green { color: var(--kl-green); background: #edf8f2; }
.metric-icon.orange { color: var(--kl-orange); background: #fff6e8; }
.metric-icon.red { color: var(--kl-red); background: #fff0f0; }
.metric-icon.teal { color: var(--kl-teal); background: #ecf7f7; }
.metric-icon.violet { color: var(--kl-violet); background: #f4f0f8; }

.metric-icon .icon {
  width: 22px;
  height: 22px;
}

.metric-content {
  min-width: 0;
}

.metric-label {
  display: block;
  overflow: hidden;
  color: var(--kl-text-regular);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-value {
  display: flex;
  align-items: baseline;
  min-width: 0;
  margin-top: 3px;
  font-family: Arial, sans-serif;
  font-size: 26px;
  font-weight: 500;
  line-height: 34px;
  white-space: nowrap;
}

.metric-value small,
.metric-unit {
  margin-left: 4px;
  color: var(--kl-text-muted);
  font-size: 12px;
  font-weight: 400;
}

.metric-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 18px;
  margin-top: 3px;
  overflow: hidden;
  color: var(--kl-text-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trend-up { color: var(--kl-red); }
.trend-down { color: var(--kl-green); }
.trend-neutral { color: var(--kl-text-muted); }

.stat-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--kl-divider);
}

.stat-list-item {
  min-width: 0;
  padding: 13px 14px;
  background: #fff;
}

.stat-list-item span {
  display: block;
  overflow: hidden;
  color: var(--kl-text-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stat-list-item strong {
  display: block;
  margin-top: 3px;
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: 500;
}

/* Charts */

.chart-layout {
  display: grid;
  align-items: center;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 18px;
}

.chart-canvas {
  position: relative;
  min-width: 0;
  min-height: 250px;
  overflow: hidden;
}

.chart-svg {
  display: block;
  width: 100%;
  height: 250px;
  overflow: visible;
}

.chart-svg text {
  fill: #899099;
  font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 11px;
  letter-spacing: 0;
}

.chart-grid-line {
  stroke: #eceff2;
  stroke-width: 1;
}

.chart-axis-line {
  stroke: #d8dce1;
  stroke-width: 1;
}

.chart-line {
  fill: none;
  stroke: var(--kl-primary);
  stroke-width: 2;
}

.chart-line.secondary { stroke: var(--kl-green); }
.chart-line.warning { stroke: var(--kl-orange); }

.chart-area {
  fill: rgba(4, 112, 193, 0.09);
  stroke: none;
}

.chart-point {
  fill: #fff;
  stroke: var(--kl-primary);
  stroke-width: 2;
}

.chart-bar {
  fill: #4d9bd3;
}

.chart-bar.secondary { fill: #67a97f; }
.chart-bar.warning { fill: #d9a14f; }
.chart-bar.muted { fill: #a9b2bc; }

.chart-donut-track {
  fill: none;
  stroke: #eef0f2;
  stroke-width: 16;
}

.chart-donut-value {
  fill: none;
  stroke: var(--kl-primary);
  stroke-width: 16;
  stroke-linecap: butt;
}

.legend,
.chart-legend {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 9px;
}

.legend.inline,
.chart-legend.inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.legend-item {
  display: flex;
  align-items: center;
  min-width: 0;
  color: var(--kl-text-regular);
  font-size: 12px;
}

.legend-dot,
.legend-block {
  width: 8px;
  height: 8px;
  margin-right: 7px;
  flex: 0 0 auto;
  background: var(--kl-primary);
  border-radius: 50%;
}

.legend-block {
  border-radius: 1px;
}

.legend-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legend-value {
  margin-left: auto;
  padding-left: 10px;
  color: var(--kl-text);
  font-family: Arial, sans-serif;
  font-weight: 500;
  white-space: nowrap;
}

.chart-tooltip {
  position: absolute;
  z-index: 3;
  min-width: 120px;
  padding: 8px 10px;
  color: #fff;
  background: rgba(34, 38, 45, 0.92);
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
  font-size: 11px;
  pointer-events: none;
}

/* Room matrix */

.room-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 7px 12px;
  background: #fff;
  border-bottom: 1px solid var(--kl-divider);
}

.room-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  color: var(--kl-text-regular);
  font-size: 12px;
}

.room-matrix-scroll {
  max-width: 100%;
  overflow-x: auto;
}

.room-matrix {
  min-width: 820px;
  padding: 12px;
}

.floor-row {
  display: grid;
  align-items: start;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 6px;
}

.floor-row + .floor-row {
  margin-top: 6px;
}

.floor-rooms {
  display: grid;
  grid-template-columns: repeat(8, minmax(84px, 1fr));
  gap: 6px;
}

.floor-label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  color: var(--kl-text-regular);
  background: #f7f8f9;
  border: 1px solid var(--kl-divider);
  border-radius: 3px;
  font-size: 12px;
}

.room-cell {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 58px;
  padding: 7px 8px;
  color: var(--kl-text-regular);
  background: #fff;
  border: 1px solid #dfe3e7;
  border-left: 3px solid #aab2bb;
  border-radius: 3px;
  flex-direction: column;
  text-align: left;
}

.room-cell:hover,
.room-cell:focus-visible {
  border-color: #7fb4d9;
  box-shadow: 0 0 0 1px rgba(4, 112, 193, 0.08);
  outline: none;
}

.room-cell strong,
.room-cell small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-cell strong {
  color: var(--kl-text);
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
}

.room-cell small {
  margin-top: 4px;
  color: var(--kl-text-muted);
  font-size: 10px;
}

.room-cell.available { border-left-color: var(--kl-green); background: #fbfefc; }
.room-cell.reserved { border-left-color: var(--kl-orange); background: #fffdfa; }
.room-cell.sold { border-left-color: var(--kl-primary); background: #fbfdff; }
.room-cell.overdue { border-left-color: var(--kl-red); background: #fffafa; }
.room-cell.locked { border-left-color: #9097a0; background: #f7f8f9; }

/* Lists and timelines */

.task-list,
.alert-list,
.activity-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.task-item,
.alert-item,
.activity-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 54px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--kl-divider);
}

.task-item:last-child,
.alert-item:last-child,
.activity-item:last-child {
  border-bottom: 0;
}

button.task-item,
button.alert-item,
button.activity-item {
  width: 100%;
  background: #fff;
  text-align: left;
}

button.task-item:hover,
button.alert-item:hover,
button.activity-item:hover {
  background: #fafbfd;
}

.list-indicator {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  background: var(--kl-primary);
  border-radius: 50%;
}

.list-indicator.warning { background: var(--kl-orange); }
.list-indicator.danger { background: var(--kl-red); }
.list-indicator.success { background: var(--kl-green); }
.list-indicator.muted { background: #aeb4bb; }

.list-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  color: var(--kl-primary);
  background: #edf6fc;
  border-radius: 4px;
}

.list-icon.warning { color: var(--kl-orange); background: #fff6e8; }
.list-icon.danger { color: var(--kl-red); background: #fff0f0; }
.list-icon.success { color: var(--kl-green); background: #edf8f2; }

.list-main {
  min-width: 0;
  flex: 1;
}

.list-title,
.list-meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-title {
  color: var(--kl-text);
  font-size: 12px;
}

.list-meta {
  margin-top: 3px;
  color: var(--kl-text-muted);
  font-size: 10px;
}

.list-side {
  flex: 0 0 auto;
  color: var(--kl-text-muted);
  font-size: 11px;
  white-space: nowrap;
}

.timeline {
  position: relative;
  margin: 0;
  padding: 0 0 0 18px;
  list-style: none;
}

.timeline::before {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 5px;
  width: 1px;
  background: #dfe3e7;
  content: "";
}

.timeline-item {
  position: relative;
  display: block;
  grid-template-columns: none;
  gap: 0;
  min-height: 52px;
  padding: 0 0 14px 10px;
}

.timeline-item:not(:last-child)::after {
  display: none;
}

.timeline-item::before {
  position: absolute;
  top: 5px;
  left: -16px;
  width: 7px;
  height: 7px;
  background: #fff;
  border: 2px solid var(--kl-primary);
  border-radius: 50%;
  content: "";
}

.timeline-item strong,
.timeline-item span {
  display: block;
}

.timeline-item strong {
  font-size: 12px;
  font-weight: 500;
}

.timeline-item span {
  margin-top: 2px;
  color: var(--kl-text-muted);
  font-size: 11px;
}

/* E10 table and pagination */

.table-panel {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--kl-border);
  border-radius: 4px;
  overflow: hidden;
}

.table-scroll {
  width: 100%;
  overflow: auto;
}

.e10-table,
.data-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  table-layout: fixed;
}

.e10-table th,
.data-table th {
  height: 38px;
  padding: 0 10px;
  color: #565c64;
  background: var(--kl-head);
  border-right: 1px solid #f0f1f2;
  border-bottom: 1px solid #e3e5e8;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}

.e10-table td,
.data-table td {
  height: var(--kl-row-height);
  padding: 6px 10px;
  color: #4f555c;
  border-right: 1px solid #f2f3f4;
  border-bottom: 1px solid #eceef0;
  font-size: 12px;
  line-height: 19px;
  vertical-align: middle;
}

.e10-table th:last-child,
.e10-table td:last-child,
.data-table th:last-child,
.data-table td:last-child {
  border-right: 0;
}

.e10-table tbody tr:hover,
.data-table tbody tr:hover {
  background: #f4f9fc;
}

.e10-table tbody tr.selected,
.data-table tbody tr.selected {
  background: #ecf6fc;
}

.table-cell-ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-link {
  overflow: hidden;
  max-width: 100%;
  padding: 0;
  color: var(--kl-primary);
  background: transparent;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-link:hover,
.table-link:focus-visible {
  color: var(--kl-primary-active);
  text-decoration: underline;
  outline: none;
}

.table-checkbox {
  width: 15px;
  height: 15px;
  accent-color: var(--kl-primary);
  vertical-align: middle;
}

.table-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.table-action {
  padding: 0;
  color: var(--kl-primary);
  background: transparent;
  font-size: 12px;
}

.table-action:hover,
.table-action:focus-visible {
  color: var(--kl-primary-active);
  text-decoration: underline;
  outline: none;
}

.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 7px 12px;
  background: #fff;
  border-top: 1px solid var(--kl-divider);
}

.pagination-info {
  color: var(--kl-text-muted);
  font-size: 12px;
  white-space: nowrap;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
}

.page-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  color: var(--kl-text-regular);
  background: #fff;
  border: 1px solid #dfe2e6;
  border-radius: 3px;
  font-size: 12px;
}

.page-button:hover,
.page-button:focus-visible {
  color: var(--kl-primary);
  border-color: #8abadd;
  outline: none;
}

.page-button.active,
.page-button[aria-current="page"] {
  color: #fff;
  background: var(--kl-primary);
  border-color: var(--kl-primary);
}

/* Tabs, tags and statuses */

.tabs {
  display: flex;
  align-items: flex-end;
  min-width: 0;
  height: 40px;
  border-bottom: 1px solid var(--kl-border);
  overflow-x: auto;
}

.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  height: 40px;
  padding: 0 14px;
  color: var(--kl-text-regular);
  background: transparent;
  font-size: 12px;
  white-space: nowrap;
}

.tab:hover,
.tab:focus-visible {
  color: var(--kl-primary);
  outline: none;
}

.tab.active,
.tab[aria-selected="true"] {
  color: var(--kl-primary);
  font-weight: 500;
}

.tab.active::after,
.tab[aria-selected="true"]::after {
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 2px;
  background: var(--kl-primary);
  content: "";
}

.tab-count {
  margin-left: 4px;
  color: var(--kl-text-muted);
}

.tag,
.status-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 22px;
  padding: 0 7px;
  color: #596069;
  background: #f2f3f5;
  border: 1px solid #e4e6e9;
  border-radius: 3px;
  font-size: 11px;
  line-height: 20px;
  white-space: nowrap;
}

.tag-blue,
.status-tag.blue { color: #166ba4; background: #edf6fc; border-color: #cae3f4; }
.tag-green,
.status-tag.green { color: #287d52; background: #edf8f2; border-color: #cde9d9; }
.tag-orange,
.status-tag.orange { color: #a56a16; background: #fff6e8; border-color: #f3dfbe; }
.tag-red,
.status-tag.red { color: #b43d3d; background: #fff0f0; border-color: #f2cece; }
.tag-teal,
.status-tag.teal { color: #287a7d; background: #ecf7f7; border-color: #cae6e6; }
.tag-violet,
.status-tag.violet { color: #674d91; background: #f4f0f8; border-color: #ddd3e9; }

.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  background: #aeb4bb;
  border-radius: 50%;
}

.status-dot.blue { background: var(--kl-primary); }
.status-dot.green { background: var(--kl-green); }
.status-dot.orange { background: var(--kl-orange); }
.status-dot.red { background: var(--kl-red); }
.status-dot.teal { background: var(--kl-teal); }

/* Controls and forms */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 64px;
  height: var(--kl-control-height);
  padding: 0 12px;
  color: #4f555d;
  background: #fff;
  border: 1px solid #d9dde2;
  border-radius: 3px;
  font-size: 12px;
  white-space: nowrap;
}

.btn .icon {
  width: 15px;
  height: 15px;
}

.btn:hover,
.btn:focus-visible {
  color: var(--kl-primary);
  border-color: #87b8da;
  outline: none;
}

.btn-primary {
  color: #fff;
  background: var(--kl-primary);
  border-color: var(--kl-primary);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  color: #fff;
  background: var(--kl-primary-hover);
  border-color: var(--kl-primary-hover);
}

.btn-success { color: #fff; background: var(--kl-green); border-color: var(--kl-green); }
.btn-danger { color: #fff; background: var(--kl-red); border-color: var(--kl-red); }
.btn-text { min-width: 0; padding: 0 5px; color: var(--kl-primary); background: transparent; border-color: transparent; }

.btn-sm {
  min-width: 52px;
  height: 26px;
  padding: 0 9px;
  font-size: 11px;
}

.input,
.select,
.textarea,
.form-control {
  width: 100%;
  color: var(--kl-text);
  background: #fff;
  border: 1px solid #d9dde2;
  border-radius: 3px;
  outline: none;
  font-size: 12px;
}

.input,
.select,
.form-control {
  height: var(--kl-control-height);
  padding: 0 9px;
}

.select {
  padding-right: 26px;
}

.textarea {
  min-height: 84px;
  padding: 7px 9px;
  line-height: 1.6;
  resize: vertical;
}

.input:hover,
.select:hover,
.textarea:hover,
.form-control:hover {
  border-color: #b7c8d4;
}

.input:focus,
.select:focus,
.textarea:focus,
.form-control:focus {
  border-color: var(--kl-primary);
  box-shadow: 0 0 0 2px rgba(4, 112, 193, 0.08);
}

.input::placeholder,
.textarea::placeholder,
.form-control::placeholder {
  color: #b4b9c0;
}

.input-with-icon {
  position: relative;
  display: block;
}

.input-with-icon .icon {
  position: absolute;
  z-index: 1;
  top: 7px;
  left: 8px;
  width: 15px;
  height: 15px;
  color: #9ba1a9;
  pointer-events: none;
}

.input-with-icon .input,
.input-with-icon .form-control {
  padding-left: 30px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

.field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.field-full {
  grid-column: 1 / -1;
}

.field-label {
  color: var(--kl-text-regular);
  font-size: 12px;
}

.field-label.required::before {
  margin-right: 3px;
  color: var(--kl-red);
  content: "*";
}

.field-hint,
.field-error {
  color: var(--kl-text-muted);
  font-size: 10px;
}

.field-error {
  color: var(--kl-red);
}

.checkbox-label,
.radio-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  color: var(--kl-text-regular);
  font-size: 12px;
}

.checkbox-label input,
.radio-label input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--kl-primary);
}

.segmented-control {
  display: inline-flex;
  height: 30px;
  overflow: hidden;
  border: 1px solid #d9dde2;
  border-radius: 3px;
}

.segmented-control button {
  min-width: 58px;
  height: 28px;
  padding: 0 10px;
  color: var(--kl-text-regular);
  background: #fff;
  border-right: 1px solid #e3e5e8;
  font-size: 12px;
}

.segmented-control button:last-child {
  border-right: 0;
}

.segmented-control button.active,
.segmented-control button[aria-pressed="true"] {
  color: var(--kl-primary);
  background: #edf6fc;
}

.switch {
  position: relative;
  width: 36px;
  height: 20px;
  padding: 0;
  background: #b7bcc3;
  border-radius: 10px;
}

.switch::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.18s ease;
  content: "";
}

.switch.active,
.switch[aria-checked="true"] {
  background: var(--kl-primary);
}

.switch.active::after,
.switch[aria-checked="true"]::after {
  transform: translateX(16px);
}

/* Detail content */

.detail-summary {
  padding: 14px 16px;
  background: #f8fafb;
  border-bottom: 1px solid var(--kl-divider);
}

.detail-summary h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.detail-summary p {
  margin: 4px 0 0;
  color: var(--kl-text-muted);
  font-size: 11px;
}

.detail-section {
  padding: 14px 16px;
  border-bottom: 1px solid var(--kl-divider);
}

.detail-section:last-child {
  border-bottom: 0;
}

.detail-section-title {
  margin: 0 0 10px;
  color: var(--kl-text);
  font-size: 13px;
  font-weight: 500;
}

.description-list {
  display: grid;
  margin: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
}

.description-item {
  min-width: 0;
}

.description-item dt {
  margin: 0;
  color: var(--kl-text-muted);
  font-size: 11px;
}

.description-item dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  color: var(--kl-text);
  font-size: 12px;
}

.description-item.full {
  grid-column: 1 / -1;
}

/* Report layouts */

.report-split-view {
  display: grid;
  min-width: 0;
  min-height: calc(100vh - 154px);
  background: #fff;
  border: 1px solid var(--kl-border);
  border-radius: 4px;
  grid-template-columns: 244px minmax(0, 1fr);
  overflow: hidden;
}

.report-sidebar {
  min-width: 0;
  background: #fafbfc;
  border-right: 1px solid var(--kl-divider);
}

.report-sidebar-header {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 13px;
  border-bottom: 1px solid var(--kl-divider);
  font-size: 13px;
  font-weight: 500;
}

.report-menu {
  margin: 0;
  padding: 7px 0;
  list-style: none;
}

.report-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 38px;
  padding: 0 14px;
  color: var(--kl-text-regular);
  background: transparent;
  font-size: 12px;
  text-align: left;
}

.report-menu button small {
  flex: 0 0 auto;
  color: var(--kl-text-placeholder);
  font-size: 10px;
  font-weight: 400;
}

.report-menu button:hover,
.report-menu button.active,
.report-menu button[aria-current="page"] {
  color: var(--kl-primary);
  background: #edf6fc;
}

.report-main {
  min-width: 0;
  overflow: auto;
}

.report-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 50px;
  padding: 8px 13px;
  border-bottom: 1px solid var(--kl-divider);
}

.report-content {
  min-width: 0;
  padding: 14px;
}

.report-section + .report-section {
  margin-top: 18px;
}

.report-section h3 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 500;
}

.report-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.report-section-header h3 {
  margin: 0;
}

.report-section-header p {
  margin: 3px 0 0;
  color: var(--kl-text-muted);
  font-size: 11px;
}

.report-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--kl-divider);
  border-radius: 3px;
}

.report-stat {
  display: flex;
  align-items: baseline;
  min-width: 0;
  padding: 14px 16px;
  border-right: 1px solid var(--kl-divider);
}

.report-stat:last-child {
  border-right: 0;
}

.report-stat span {
  flex: 1;
  overflow: hidden;
  color: var(--kl-text-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-stat strong {
  margin-left: 8px;
  color: var(--kl-primary);
  font-family: Arial, sans-serif;
  font-size: 22px;
  font-weight: 500;
}

.report-stat small {
  margin-left: 3px;
  color: var(--kl-text-muted);
  font-size: 10px;
}

.report-focus-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.report-focus-card {
  min-width: 0;
  padding: 12px;
  background: #fafbfc;
  border: 1px solid var(--kl-divider);
  border-radius: 3px;
}

.report-focus-card > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.report-focus-card > header strong,
.report-focus-card > header span {
  display: block;
}

.report-focus-card > header strong {
  color: var(--kl-text);
  font-size: 13px;
  font-weight: 500;
}

.report-focus-card > header div > span {
  margin-top: 3px;
  color: var(--kl-text-muted);
  font-size: 10px;
}

.report-focus-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}

.report-focus-metrics div {
  min-width: 0;
}

.report-focus-metrics span,
.report-focus-metrics strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-focus-metrics span {
  color: var(--kl-text-muted);
  font-size: 10px;
}

.report-focus-metrics strong {
  margin-top: 3px;
  color: var(--kl-text);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 14px;
  font-weight: 500;
}

.report-work-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--kl-divider);
  border-radius: 3px;
}

.report-work-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
  background: #fff;
  table-layout: fixed;
}

.report-work-table th,
.report-work-table td {
  height: 42px;
  padding: 6px;
  border-right: 1px solid var(--kl-divider);
  border-bottom: 1px solid var(--kl-divider);
  font-size: 10px;
  text-align: center;
}

.report-work-table tr:last-child th,
.report-work-table tr:last-child td {
  border-bottom: 0;
}

.report-work-table th:last-child,
.report-work-table td:last-child {
  border-right: 0;
}

.report-work-table thead th {
  color: var(--kl-text-muted);
  background: #f7f8fa;
  font-weight: 500;
  line-height: 1.35;
}

.report-work-table th:first-child {
  position: sticky;
  z-index: 1;
  left: 0;
  width: 126px;
  background: #fafbfc;
  text-align: left;
}

.report-work-table tbody th strong,
.report-work-table tbody th small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-work-table tbody th strong {
  color: var(--kl-text);
  font-size: 11px;
  font-weight: 500;
}

.report-work-table tbody th small {
  margin-top: 3px;
  color: var(--kl-text-muted);
  font-size: 9px;
  font-weight: 400;
}

.report-work-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid #d8dde2;
  border-radius: 2px;
  color: var(--kl-text-muted);
  background: #f7f8fa;
  font-size: 10px;
}

.report-work-state.yes {
  color: #28734c;
  background: #eef8f2;
  border-color: #cce6d7;
}

.report-work-state.blank {
  color: #99671f;
  background: #fff8eb;
  border-color: #eedcb9;
}

.report-project-list {
  border: 1px solid var(--kl-divider);
  border-radius: 3px;
  overflow: hidden;
}

.report-project + .report-project {
  border-top: 1px solid var(--kl-divider);
}

.report-project > summary {
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 8px 12px;
  background: #fff;
  cursor: pointer;
  list-style: none;
}

.report-project > summary::-webkit-details-marker {
  display: none;
}

.report-project > summary:hover,
.report-project[open] > summary {
  background: #f7fafc;
}

.report-project-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin-right: 10px;
  color: var(--kl-primary);
  background: #eaf4fb;
  border-radius: 3px;
  font-family: Arial, sans-serif;
  font-size: 11px;
}

.report-project-title {
  flex: 1 1 240px;
  min-width: 0;
}

.report-project-title strong,
.report-project-title small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-project-title strong {
  color: var(--kl-text);
  font-size: 12px;
  font-weight: 500;
}

.report-project-title small {
  margin-top: 3px;
  color: var(--kl-text-muted);
  font-size: 10px;
  font-weight: 400;
}

.report-project-summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 1 320px;
  gap: 16px;
  min-width: 0;
  color: var(--kl-text-muted);
  font-size: 10px;
}

.report-project-summary > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-project-summary strong {
  margin-left: 3px;
  color: var(--kl-text);
  font-size: 11px;
  font-weight: 500;
}

.report-project-chevron {
  flex: 0 0 auto;
  margin-left: 12px;
  color: var(--kl-text-placeholder);
  transition: transform 160ms ease;
}

.report-project[open] .report-project-chevron {
  transform: rotate(180deg);
}

.report-project-body {
  padding: 12px 14px 14px 50px;
  background: #fff;
  border-top: 1px dashed var(--kl-divider);
}

.report-reference-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 16px;
}

.report-reference-grid > div {
  min-width: 0;
  padding: 13px;
  background: #fafbfc;
  border: 1px solid var(--kl-divider);
  border-radius: 3px;
}

.report-reference-grid h4 {
  margin: 0 0 10px;
  color: var(--kl-text);
  font-size: 12px;
  font-weight: 500;
}

.report-reference-grid ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.report-reference-grid li + li {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--kl-divider);
}

.report-reference-grid li strong,
.report-reference-grid li span {
  display: block;
}

.report-reference-grid li strong {
  margin-bottom: 3px;
  color: var(--kl-primary);
  font-size: 10px;
  font-weight: 500;
}

.report-reference-grid li span {
  color: var(--kl-text-regular);
  font-size: 11px;
  line-height: 1.6;
}

.report-reference-grid .report-footnote-title {
  margin-top: 16px;
}

.report-source-warning {
  margin-bottom: 10px;
}

.report-pdf-frame {
  display: block;
  flex: 1;
  width: 100%;
  min-height: 0;
  background: #f5f6f8;
  border: 1px solid var(--kl-border);
}

.app-modal.modal-report .modal-body {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}

.app-modal.modal-report .modal-footer {
  flex: 0 0 auto;
  margin: 10px -16px -16px;
}

.modal-footer-note {
  margin-right: auto;
  color: var(--kl-text-muted);
  font-size: 11px;
}

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.comparison-item {
  min-width: 0;
  padding: 12px;
  background: #fafbfc;
  border: 1px solid var(--kl-divider);
  border-radius: 3px;
}

.comparison-item span,
.comparison-item strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.comparison-item span {
  color: var(--kl-text-muted);
  font-size: 11px;
}

.comparison-item strong {
  margin-top: 5px;
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: 500;
}

/* Empty and feedback states */

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  padding: 30px 16px;
  color: var(--kl-text-muted);
  text-align: center;
}

.empty-state-inner {
  max-width: 320px;
}

.empty-visual {
  position: relative;
  width: 66px;
  height: 52px;
  margin: 0 auto 12px;
  background: #f4f6f8;
  border: 1px solid #dfe3e7;
  border-radius: 4px;
}

.empty-visual::before,
.empty-visual::after {
  position: absolute;
  left: 14px;
  height: 2px;
  background: #d4d9de;
  content: "";
}

.empty-visual::before { top: 18px; width: 36px; }
.empty-visual::after { top: 27px; width: 27px; }

.empty-state h3 {
  margin: 0;
  color: var(--kl-text-regular);
  font-size: 14px;
  font-weight: 500;
}

.empty-state p {
  margin: 5px 0 0;
  font-size: 11px;
}

.inline-message {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 11px;
  color: #53616b;
  background: #f2f8fc;
  border: 1px solid #d5e8f4;
  border-radius: 3px;
  font-size: 12px;
}

.inline-message.warning { color: #7f5c26; background: #fff9ee; border-color: #f1dfbd; }
.inline-message.danger { color: #914242; background: #fff4f4; border-color: #f0d3d3; }
.inline-message.success { color: #367354; background: #f1f9f5; border-color: #d3eadd; }

/* Drawer, modal and toast */

.drawer-mask,
.modal-mask {
  position: fixed;
  z-index: 1800;
  inset: 0;
  background: rgba(22, 27, 33, 0.38);
}

.detail-drawer {
  position: fixed;
  z-index: 1810;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: min(560px, calc(100vw - 36px));
  background: #fff;
  box-shadow: -4px 0 18px rgba(24, 30, 38, 0.2);
  flex-direction: column;
  transform: translateX(102%);
  transition: transform 0.22s ease;
}

.detail-drawer.open,
.detail-drawer[aria-hidden="false"] {
  transform: translateX(0);
}

.drawer-header,
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 9px 16px;
  background: #fff;
  border-bottom: 1px solid var(--kl-divider);
}

.drawer-header h2,
.modal-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.drawer-eyebrow {
  display: block;
  color: var(--kl-text-muted);
  font-size: 10px;
  line-height: 15px;
}

.drawer-body {
  min-height: 0;
  flex: 1;
  overflow: auto;
}

.drawer-footer,
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 54px;
  padding: 10px 16px;
  background: #fafbfc;
  border-top: 1px solid var(--kl-divider);
}

.modal-mask {
  z-index: 1900;
}

.app-modal {
  position: fixed;
  z-index: 1910;
  top: 50%;
  left: 50%;
  display: flex;
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 12px 36px rgba(20, 27, 35, 0.28);
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -48%) scale(0.98);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.app-modal.open,
.app-modal[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.modal-body {
  min-height: 80px;
  padding: 16px;
  overflow: auto;
}

.toast {
  position: fixed;
  z-index: 2100;
  top: 66px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 160px;
  max-width: min(420px, calc(100vw - 32px));
  min-height: 38px;
  padding: 8px 14px;
  color: #fff;
  background: rgba(32, 36, 42, 0.94);
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.toast.show,
.toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast .icon {
  width: 16px;
  height: 16px;
  color: #6ed29b;
}

/* Useful data visuals */

.progress-row {
  display: grid;
  align-items: center;
  min-height: 31px;
  grid-template-columns: 90px minmax(80px, 1fr) 56px;
  gap: 9px;
  font-size: 11px;
}

.progress-label {
  overflow: hidden;
  color: var(--kl-text-regular);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-track {
  height: 7px;
  overflow: hidden;
  background: #edf0f2;
  border-radius: 4px;
}

.progress-value {
  display: block;
  height: 100%;
  background: var(--kl-primary);
  border-radius: 4px;
}

.progress-value.green { background: var(--kl-green); }
.progress-value.orange { background: var(--kl-orange); }
.progress-value.red { background: var(--kl-red); }

.progress-number {
  color: var(--kl-text);
  font-family: Arial, sans-serif;
  text-align: right;
  white-space: nowrap;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--kl-divider);
}

.quick-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 64px;
  padding: 8px;
  color: var(--kl-text-regular);
  background: #fff;
  font-size: 12px;
}

.quick-action:hover,
.quick-action:focus-visible {
  color: var(--kl-primary);
  background: #f5f9fc;
  outline: none;
}

.quick-action .icon {
  color: var(--kl-primary);
}

/* Responsive layout */

@media (max-width: 1180px) {
  .global-search-wrap {
    width: 174px;
  }

  .top-module {
    min-width: 92px;
    padding-right: 11px;
    padding-left: 11px;
  }

  .account-button {
    min-width: 122px;
  }

  .account-copy small {
    display: none;
  }

  .kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kpi-metric:nth-child(2)::after {
    display: none;
  }

  .kpi-metric:nth-child(-n + 2) {
    border-bottom: 1px solid var(--kl-divider);
  }
}

@media (max-width: 940px) {
  .global-search-wrap {
    display: none;
  }

  .top-module {
    min-width: 72px;
  }

  .top-module .icon {
    display: none;
  }

  .span-9,
  .span-8,
  .span-7,
  .span-6,
  .span-5,
  .span-4,
  .span-3 {
    grid-column: span 12;
  }

  .chart-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .chart-legend {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .chart-legend .legend-item {
    min-width: 130px;
  }
}

@media (max-width: 760px) {
  body {
    overflow: hidden;
  }

  .topbar-brand {
    width: auto;
    min-width: 116px;
    padding: 0 8px;
    background: transparent;
  }

  .mobile-nav-toggle {
    display: inline-flex !important;
  }

  .ecology-wordmark {
    font-size: 17px;
  }

  .brand-separator,
  .brand-project {
    display: none;
  }

  .top-modules {
    min-width: 0;
    flex: 1;
    justify-content: center;
  }

  .top-module {
    min-width: 42px;
    max-width: 82px;
    flex: 1;
    padding: 0 5px;
    font-size: 11px;
  }

  .top-module .icon {
    display: none;
  }

  .top-module.active::after,
  .top-module[aria-current="page"]::after {
    right: 6px;
    left: 6px;
  }

  .hide-on-compact,
  .account-copy,
  .account-button > .icon {
    display: none;
  }

  .account-button {
    min-width: 48px;
    width: 48px;
    padding: 0;
    justify-content: center;
  }

  .account-menu {
    position: fixed;
    top: 56px;
    right: 8px;
  }

  .sidebar {
    z-index: 1150;
    box-shadow: 5px 0 18px rgba(0, 0, 0, 0.2);
    transform: translateX(-102%);
    transition: transform 0.2s ease;
  }

  .app-shell.nav-open .sidebar,
  body.nav-open .sidebar {
    transform: translateX(0);
  }

  .app-shell.nav-open::after,
  body.nav-open .app-shell::after {
    position: fixed;
    z-index: 1100;
    inset: 50px 0 0;
    background: rgba(22, 27, 33, 0.34);
    content: "";
  }

  .main-content {
    margin-left: 0;
  }

  .page-header {
    height: 58px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .page-breadcrumb,
  .data-period {
    display: none;
  }

  .page-header h1 {
    margin: 0;
    font-size: 16px;
    line-height: 28px;
  }

  .view-root {
    height: calc(100vh - var(--kl-topbar-height) - 58px);
    padding: 8px;
  }

  .page-stack,
  .dashboard-grid {
    gap: 8px;
  }

  .page-toolbar,
  .filterbar {
    border-radius: 3px;
  }

  .page-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .toolbar-right,
  .toolbar-actions {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 1px;
  }

  .filterbar {
    align-items: stretch;
  }

  .filterbar .form-control,
  .filterbar .input,
  .filterbar .select,
  .filterbar .filter-search {
    width: calc(50% - 4px);
  }

  .filter-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
  }

  .kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kpi-metric,
  .metric-item {
    min-height: 92px;
    padding: 12px;
  }

  .metric-icon {
    width: 34px;
    height: 34px;
    margin-right: 9px;
  }

  .metric-icon .icon {
    width: 18px;
    height: 18px;
  }

  .metric-value {
    font-size: 20px;
    line-height: 29px;
  }

  .chart-canvas,
  .chart-svg {
    min-height: 220px;
    height: 220px;
  }

  .room-matrix {
    padding: 8px;
  }

  .pagination-bar {
    align-items: flex-start;
    gap: 8px;
    flex-direction: column;
  }

  .pagination {
    max-width: 100%;
    overflow-x: auto;
  }

  .report-split-view {
    min-height: auto;
    grid-template-columns: minmax(0, 1fr);
  }

  .report-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--kl-divider);
  }

  .report-sidebar-header {
    display: none;
  }

  .report-menu {
    display: flex;
    padding: 0;
    overflow-x: auto;
  }

  .report-menu li {
    flex: 0 0 auto;
  }

  .report-menu button {
    width: auto;
    min-width: 94px;
  }

  .report-menu button small {
    display: none;
  }

  .report-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .report-stat-grid,
  .report-focus-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-stat:nth-child(2) {
    border-right: 0;
  }

  .report-stat:nth-child(-n + 2) {
    border-bottom: 1px solid var(--kl-divider);
  }

  .report-project-summary {
    display: none;
  }

  .report-project-body {
    padding-left: 14px;
  }

  .report-reference-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .report-pdf-frame {
    min-height: 0;
  }

  .comparison-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-drawer {
    width: 100vw;
  }

  .app-modal {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .field-full {
    grid-column: auto;
  }

  .quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 460px) {
  .topbar-brand {
    min-width: 84px;
  }

  .ecology-wordmark {
    display: none;
  }

  .top-module {
    max-width: none;
  }

  .topbar-icon {
    width: 32px;
    min-width: 32px;
  }

  .account-button {
    width: 42px;
    min-width: 42px;
  }

  .kpi-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .report-focus-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .report-stat {
    padding: 12px 10px;
  }

  .report-stat strong {
    font-size: 18px;
  }

  .report-section-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .report-section-header .toolbar-actions {
    width: 100%;
  }

  .report-project-index {
    display: none;
  }

  .report-project-title {
    flex-basis: auto;
  }

  .modal-footer-note {
    display: none;
  }

  .kpi-metric,
  .metric-item {
    border-bottom: 1px solid var(--kl-divider);
  }

  .kpi-metric::after,
  .metric-item::after {
    display: none;
  }

  .kpi-metric:last-child,
  .metric-item:last-child {
    border-bottom: 0;
  }

  .filterbar .form-control,
  .filterbar .input,
  .filterbar .select,
  .filterbar .filter-search {
    width: 100%;
  }

  .description-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .description-item.full {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* --------------------------------------------------------------------------
   E10 customer-demo alignment layer
   The shared DemoKit styles are loaded before this file. These rules bind the
   Kunlundi shell and customer-specific pages to the same PC visual contract.
   -------------------------------------------------------------------------- */

:root {
  --kl-primary: #0470c1;
  --kl-primary-hover: #3188cb;
  --kl-primary-active: #035f9f;
  --kl-sidebar: #2b2e35;
  --kl-sidebar-active: #1d1f25;
  --kl-sidebar-hover: #25282e;
  --kl-page: #f0f1f4;
  --kl-panel: #ffffff;
  --kl-head: #fbfbfb;
  --kl-text: #111111;
  --kl-text-regular: #666666;
  --kl-text-muted: #999999;
  --kl-border: #e5e5e5;
  --kl-divider: #ebebeb;
  --kl-topbar-height: 50px;
  --kl-sidebar-width: 220px;
  --kl-page-header-height: 50px;
  --kl-control-height: 30px;
  --kl-row-height: 40px;
  --kl-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}

html,
body {
  color: #111111;
  background: #f0f1f4;
  font-family: Arial, PingFangSC-Light, "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.15;
}

.icon {
  width: 16px;
  height: 16px;
  stroke-width: 1.8;
}

/* E10 application shell */

.topbar {
  height: 50px;
  min-height: 50px;
  align-items: stretch;
  background: #0470c1;
  border: 0;
  box-shadow: none;
  font-family: Arial, "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
  line-height: 1.15;
}

.topbar-brand {
  width: 220px;
  min-width: 220px;
  height: 50px;
  padding: 0 16px;
  background: transparent;
}

.brand-trigger {
  display: inline-flex;
  height: 50px;
  align-items: center;
  gap: 7px;
  padding: 0;
  color: #ffffff;
  background: transparent;
}

.brand-trigger:hover,
.brand-trigger:focus-visible {
  color: #ffffff;
  outline: none;
}

.ecology-wordmark {
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0;
}

.brand-chevron {
  width: 13px;
  height: 13px;
  opacity: 0.86;
}

.brand-separator,
.brand-project {
  display: none;
}

.top-modules {
  height: 50px;
  align-items: stretch;
}

.top-module {
  min-width: 50px;
  height: 50px;
  gap: 9px;
  padding: 0 18px;
  color: #ffffff;
  border-radius: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.15;
}

.top-module:hover,
.top-module:focus-visible,
.top-module.active,
.top-module[aria-current="page"] {
  color: #ffffff;
  background: rgba(0, 42, 82, 0.2);
}

.top-module:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.75);
  outline-offset: -2px;
}

.top-module::after,
.top-module.active::after,
.top-module[aria-current="page"]::after {
  display: none;
}

.top-module .icon {
  width: 16px;
  height: 16px;
}

.top-module .label-short {
  display: none;
}

.topbar-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
  height: 50px;
}

.topbar-icon {
  width: 50px;
  min-width: 50px;
  height: 50px;
  color: #ffffff;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.topbar-actions > .topbar-icon > .icon {
  width: 20px;
  height: 20px;
  stroke-width: 1.65;
}

.topbar-action-divider {
  width: 1px;
  height: 24px;
  flex: 0 0 1px;
  align-self: center;
  margin: 0 5px;
  background: rgba(255, 255, 255, 0.32);
}

.topbar-icon:hover,
.topbar-icon:focus-visible {
  color: #ffffff;
  background: rgba(0, 35, 72, 0.18);
  border-color: transparent;
  outline: none;
}

.global-search-wrap {
  width: 210px;
  height: 30px;
  margin-right: 3px;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}

.topbar-search-dialog {
  padding: 6px 0 2px;
}

.topbar-search-field {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 10px;
  color: #999999;
  background: #ffffff;
  border: 1px solid #d9d9d9;
}

.topbar-search-field:focus-within {
  border-color: #0470c1;
  box-shadow: 0 0 0 1px rgba(4, 112, 193, 0.08);
}

.topbar-search-field .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.topbar-search-field input {
  width: 100%;
  height: 36px;
  margin-left: 9px;
  padding: 0;
  color: #111111;
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
}

.topbar-search-hint {
  display: block;
  margin-top: 8px;
  color: #999999;
  font-size: 12px;
}

.account-button {
  min-width: 160px;
  height: 50px;
  gap: 10px;
  padding: 0 14px 0 10px;
  background: transparent;
  border-radius: 0;
}

.account-button:hover,
.account-button:focus-visible,
.account-button[aria-expanded="true"] {
  background: rgba(0, 35, 72, 0.22);
}

.account-avatar {
  width: 34px;
  height: 34px;
  color: #ffffff;
  background: #5f9deb;
  border: 1px solid rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 400;
}

.account-copy strong {
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
}

.account-copy small {
  color: rgba(255, 255, 255, 0.94);
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
}

.account-menu {
  position: fixed;
  z-index: 1999;
  top: 50px;
  right: 8px;
  width: 270px;
  color: #666666;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-top: 0;
  border-radius: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
}

.account-menu::before {
  display: none;
}

.account-menu-header {
  min-height: 64px;
  padding: 10px 14px;
  color: #333333;
  background: #f8f9fa;
}

.account-menu-header .account-avatar-large {
  width: 38px;
  height: 38px;
}

.account-menu-header strong {
  font-size: 14px;
  font-weight: 500;
}

.account-menu-header small {
  color: #999999;
  font-size: 11px;
}

.account-menu-list {
  padding: 5px 0;
}

.account-menu-list button {
  min-height: 36px;
  height: auto;
  gap: 10px;
  padding: 7px 14px;
  color: #666666;
  background: #ffffff;
  font-size: 13px;
}

.account-menu-list button:hover,
.account-menu-list button:focus-visible {
  color: #0470c1;
  background: #f3f8fc;
}

.account-menu-admin {
  margin: 5px 0;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
}

.account-menu-admin > span {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.account-menu-admin strong,
.account-menu-admin small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu-admin strong {
  color: #444444;
  font-size: 13px;
  font-weight: 500;
}

.account-menu-admin small {
  margin-top: 2px;
  color: #999999;
  font-size: 10px;
}

/* Context navigation */

.sidebar {
  top: 50px;
  width: 220px;
  color: #ffffff;
  background: #2b2e35;
  border: 0;
  font-family: Arial, "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
  line-height: 1.15;
}

.app-nav {
  padding: 14px 0 44px;
  overscroll-behavior: contain;
}

.nav-group {
  margin: 0;
  padding: 0;
}

.nav-group + .nav-group:not([hidden]) {
  margin-top: 4px;
}

.nav-group-title {
  height: 30px;
  padding: 0 15px;
  color: #c2c6cc;
  font-size: 11px;
  line-height: 30px;
}

.nav-item {
  height: 35px;
  gap: 12px;
  padding: 0 14px 0 20px;
  color: rgba(255, 255, 255, 0.97);
  border-radius: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.15;
}

.nav-item .icon {
  width: 16px;
  height: 16px;
  color: #eef0f3;
}

.nav-item:hover,
.nav-item:focus-visible {
  color: #ffffff;
  background: #25282e;
}

.nav-item.active,
.nav-item[aria-current="page"] {
  color: #ffffff;
  background: #1d1f25;
  font-weight: 400;
}

.nav-item.active::before,
.nav-item[aria-current="page"]::before {
  width: 3px;
  background: #1a86e5;
}

.nav-item.active .icon,
.nav-item[aria-current="page"] .icon {
  color: #ffffff;
}

.nav-badge {
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 0 5px;
  color: #ffffff;
  background: #d94b4b;
  border-radius: 9px;
  font-family: Arial, sans-serif;
  font-size: 10px;
  line-height: 18px;
}

.project-summary,
.sidebar-footer {
  display: none !important;
}

/* Main workspace */

.main-content {
  margin-left: 220px;
  padding-top: 50px;
}

.page-header {
  height: 50px;
  min-height: 50px;
  padding: 0 12px 0 16px;
  background: #ffffff;
  border-bottom: 1px solid #e5e5e5;
}

.page-heading {
  display: flex;
  min-width: 0;
  align-items: center;
}

.page-breadcrumb {
  display: none;
}

.page-header h1 {
  margin: 0;
  color: #222222;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}

.page-header-actions {
  gap: 6px;
}

.data-period {
  color: #999999;
  font-size: 11px;
}

.view-root {
  height: calc(100vh - 100px);
  padding: 10px;
}

.page-stack,
.dashboard-grid {
  gap: 10px;
}

.page-toolbar,
.filterbar,
.panel,
.kpi-strip,
.table-panel {
  border-color: #e5e5e5;
  border-radius: 0;
}

.page-toolbar,
.filterbar {
  min-height: 46px;
  padding: 7px 12px;
}

.panel-header {
  min-height: 42px;
  padding: 7px 12px;
}

.panel-header h2,
.panel-header h3,
.panel-title {
  color: #333333;
  font-size: 14px;
  font-weight: 500;
}

.panel-subtitle,
.toolbar-meta {
  color: #999999;
}

/* E10 controls, ledgers and feedback */

.btn,
.input,
.select,
.form-control {
  height: 30px;
  border-radius: 3px;
  font-size: 12px;
}

.btn {
  color: #666666;
  background: #ffffff;
  border-color: #d9d9d9;
}

.btn:hover,
.btn:focus-visible {
  color: #0470c1;
  background: #ffffff;
  border-color: #0470c1;
}

.btn-primary {
  color: #ffffff;
  background: #0470c1;
  border-color: #0470c1;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  color: #ffffff;
  background: #3188cb;
  border-color: #3188cb;
}

.e10-table th,
.data-table th {
  height: 36px;
  color: #111111;
  background: #fbfbfb;
  border-right: 0;
  border-bottom: 1px solid #e5e5e5;
  font-size: 12px;
  font-weight: 400;
}

.e10-table td,
.data-table td {
  height: 40px;
  color: #666666;
  border-right: 0;
  border-bottom: 1px solid #ebebeb;
  font-size: 12px;
}

.e10-table tbody tr:hover,
.data-table tbody tr:hover {
  background: #ecf5ff;
}

.pagination-bar {
  min-height: 42px;
}

.page-button {
  min-width: 28px;
  height: 28px;
  color: #666666;
  background: transparent;
  border-color: transparent;
  border-radius: 0;
}

.page-button:hover,
.page-button:focus-visible {
  color: #0470c1;
  background: #f3f8fc;
  border-color: transparent;
}

.page-button.active,
.page-button[aria-current="page"] {
  color: #0470c1;
  background: transparent;
  border-color: transparent;
  font-weight: 500;
}

.tag,
.status-tag {
  height: 22px;
  border-radius: 3px;
}

.inline-message {
  border-radius: 3px;
}

.detail-drawer {
  top: 50px;
  width: min(560px, calc(100vw - 36px));
  border-left: 1px solid #e5e5e5;
  box-shadow: -5px 0 16px rgba(0, 0, 0, 0.14);
}

.drawer-mask {
  top: 50px;
}

.drawer-header,
.modal-header {
  min-height: 50px;
  padding: 8px 14px;
}

.drawer-header h2,
.modal-header h2 {
  color: #222222;
  font-size: 16px;
  font-weight: 500;
}

.drawer-footer,
.modal-footer {
  min-height: 50px;
  padding: 9px 14px;
}

.app-modal {
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22);
}

.toast {
  top: 62px;
  min-width: 180px;
  min-height: 38px;
  color: #333333;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

.toast .icon {
  color: #2f9b63;
}

/* Right-side application drawer */

.shell-overlay {
  position: fixed;
  z-index: 1740;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  background: rgba(0, 0, 0, 0.34);
}

.shell-overlay.open,
.shell-overlay.is-open,
.shell-overlay:not([hidden]),
.shell-overlay[aria-hidden="false"],
.shell-overlay[data-open="true"] {
  display: block;
}

.app-drawer {
  position: fixed;
  z-index: 1750;
  top: 50px;
  right: 0;
  bottom: 0;
  display: flex;
  width: min(520px, calc(100vw - 28px));
  flex-direction: column;
  color: #666666;
  background: #ffffff;
  border-left: 1px solid #e5e5e5;
  box-shadow: -5px 0 16px rgba(0, 0, 0, 0.14);
  visibility: hidden;
  transform: translateX(102%);
  transition: transform 0.2s ease, visibility 0s linear 0.2s;
}

.app-drawer.open,
.app-drawer.is-open,
.app-drawer[aria-hidden="false"],
.app-drawer[data-open="true"] {
  visibility: visible;
  transform: translateX(0);
  transition: transform 0.2s ease;
}

.app-drawer-header {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px 0 16px;
  color: #222222;
  border-bottom: 1px solid #e5e5e5;
}

.app-drawer-header > div {
  min-width: 0;
}

.app-drawer-header h2 {
  margin: 0;
  overflow: hidden;
  color: #222222;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-drawer-header > div > span {
  display: block;
  overflow: hidden;
  color: #999999;
  font-size: 10px;
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-drawer-header .icon-button {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  color: #666666;
  background: transparent;
  border-radius: 0;
}

.app-drawer-header .icon-button:hover,
.app-drawer-header .icon-button:focus-visible {
  color: #0470c1;
  background: #f3f8fc;
}

.app-drawer-body {
  min-height: 0;
  flex: 1;
  padding: 0 16px 20px;
  overflow: auto;
  overscroll-behavior: contain;
}

.app-drawer-section {
  padding-top: 18px;
}

.app-drawer-section + .app-drawer-section {
  margin-top: 2px;
  border-top: 1px solid #eeeeee;
}

.app-drawer-section > h3 {
  display: flex;
  min-height: 28px;
  align-items: center;
  margin: 0;
  color: #333333;
  font-size: 13px;
  font-weight: 500;
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 6px;
  border-top: 1px solid #e5e5e5;
  border-left: 1px solid #e5e5e5;
}

.app-entry {
  display: grid;
  min-width: 0;
  min-height: 86px;
  grid-template-rows: 30px auto;
  align-content: center;
  justify-items: center;
  gap: 7px;
  padding: 10px 6px;
  overflow: hidden;
  color: #555555;
  background: #ffffff;
  border: 0;
  border-right: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  border-radius: 0;
  text-align: center;
}

.app-entry:hover,
.app-entry:focus-visible {
  color: #0470c1;
  background: #f3f8fc;
  outline: none;
}

.app-entry.active,
.app-entry.is-active {
  color: #0470c1;
  background: #e7f3fc;
}

.app-entry-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #ffffff;
  background: #0470c1;
  border-radius: 3px;
}

.app-entry:nth-child(4n + 2) .app-entry-icon { background: #36a37d; }
.app-entry:nth-child(4n + 3) .app-entry-icon { background: #6d81b8; }
.app-entry:nth-child(4n) .app-entry-icon { background: #d28a35; }

.app-entry > span:last-child {
  width: 100%;
  overflow: hidden;
}

.app-entry > span:last-child strong,
.app-entry > span:last-child small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-entry > span:last-child strong {
  color: #444444;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}

.app-entry > span:last-child small {
  color: #999999;
  font-size: 10px;
  line-height: 15px;
}

/* Portal cockpit */

.portal-page {
  min-width: 0;
}

.portal-welcome {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-left: 3px solid #0470c1;
}

.portal-welcome-content {
  min-width: 0;
}

.portal-welcome-content > p {
  margin: 4px 0 0;
  color: #666666;
  font-size: 12px;
  line-height: 18px;
}

.portal-welcome-title {
  margin: 0;
  overflow: hidden;
  color: #222222;
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-welcome-meta {
  display: block;
  margin: 0 0 2px;
  color: #999999;
  font-size: 11px;
  white-space: nowrap;
}

.portal-month-select {
  display: flex;
  width: 112px;
  flex: 0 0 112px;
  flex-direction: column;
  gap: 5px;
  color: #666666;
  font-size: 11px;
}

.portal-month-select .select {
  width: 100%;
}

.portal-segment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.portal-segment {
  min-width: 0;
  padding: 12px 14px;
  color: #666666;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-top: 2px solid #0470c1;
  border-radius: 0;
  text-align: left;
}

button.portal-segment:hover,
button.portal-segment:focus-visible {
  background: #f7fbfe;
  border-color: #a9d1ee;
  outline: none;
}

.portal-segment:nth-child(2) { border-top-color: #36a37d; }
.portal-segment:nth-child(3) { border-top-color: #d28a35; }

.segment-head {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  color: #333333;
  font-size: 13px;
  font-weight: 500;
}

.segment-head span:last-child {
  color: #999999;
  font-size: 11px;
  font-weight: 400;
}

.segment-value {
  display: block;
  margin-bottom: 7px;
  color: #222222;
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
}

.segment-value small {
  margin-left: 3px;
  color: #999999;
  font-size: 11px;
  font-weight: 400;
}

.portal-segment > .progress-track {
  display: block;
  height: 6px;
  margin: 2px 0 8px;
}

.segment-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #999999;
  font-size: 11px;
  white-space: nowrap;
}

.segment-meta b {
  color: #444444;
  font-weight: 500;
}

.portal-segment .stat-list,
.portal-segment .segment-metrics {
  border-top: 1px solid #eeeeee;
}

.portal-app-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: #ebebeb;
}

.portal-app {
  display: flex;
  min-width: 0;
  min-height: 72px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: #555555;
  background: #ffffff;
  border-radius: 0;
  text-align: left;
}

.portal-app:hover,
.portal-app:focus-visible {
  color: #0470c1;
  background: #f3f8fc;
  outline: none;
}

.portal-app > .icon,
.portal-app > span:first-child {
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  color: #0470c1;
  background: #edf6fc;
  border-radius: 3px;
}

.portal-app strong,
.portal-app small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-app strong {
  color: #444444;
  font-size: 12px;
  font-weight: 500;
}

.portal-app small {
  margin-top: 3px;
  color: #999999;
  font-size: 10px;
}

.portal-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.65fr);
  gap: 14px;
}

.gender-summary {
  display: grid;
  min-height: 118px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 10px;
  padding: 14px;
}

.gender-split {
  display: flex;
  height: 14px;
  overflow: hidden;
  background: #edf0f2;
  border-radius: 2px;
}

.gender-part {
  display: flex;
  min-width: 0;
  min-height: 66px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  color: #555555;
  background: #fafafa;
  border: 1px solid #eeeeee;
}

.gender-part + .gender-part {
  background: #fafafa;
}

.gender-part > span:last-child {
  min-width: 0;
}

.gender-part strong,
.gender-part small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gender-part strong {
  color: #333333;
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
}

.gender-part small {
  margin-top: 3px;
  color: #999999;
  font-size: 11px;
}

.gender-summary .gender-legend {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  color: #666666;
  font-size: 12px;
}

.portal-brief-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-brief-list > li,
.portal-brief-list > button {
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  color: #555555;
  background: #ffffff;
  border-bottom: 1px solid #eeeeee;
  text-align: left;
}

.portal-brief-list > li:last-child,
.portal-brief-list > button:last-child {
  border-bottom: 0;
}

.portal-brief-list > button:hover,
.portal-brief-list > button:focus-visible {
  color: #0470c1;
  background: #f3f8fc;
  outline: none;
}

.portal-brief-list > button > span:first-child {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 8px;
}

.portal-brief-list > button strong {
  overflow: hidden;
  color: #444444;
  font-size: 12px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-page .activity-item,
.workflow-template-grid + .dashboard-grid .activity-item {
  min-height: 48px;
}

.portal-page button.activity-item:hover,
.portal-page button.activity-item:focus-visible {
  background: #ecf5ff;
  outline: none;
}

.portal-page .list-side {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  flex-direction: column;
}

.list-icon.blue { color: #166ba4; background: #edf6fc; }
.list-icon.green { color: #287d52; background: #edf8f2; }
.list-icon.orange { color: #a56a16; background: #fff6e8; }
.list-icon.red { color: #b43d3d; background: #fff0f0; }

.portal-brief-list time,
.portal-brief-list small {
  margin-left: auto;
  color: #999999;
  font-size: 11px;
  white-space: nowrap;
}

/* Workflow overview, templates and approval detail */

.workflow-template-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.workflow-template-card {
  display: flex;
  min-width: 0;
  min-height: 88px;
  align-items: center;
  gap: 12px;
  padding: 12px;
  color: #555555;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  text-align: left;
}

.workflow-template-card:hover,
.workflow-template-card:focus-visible {
  color: #0470c1;
  background: #f7fbfe;
  border-color: #a9d1ee;
  outline: none;
}

.workflow-template-icon {
  display: inline-grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  color: #0470c1;
  background: #edf6fc;
  border-radius: 3px;
}

.workflow-template-card:nth-child(4n + 2) .workflow-template-icon { color: #287d52; background: #edf8f2; }
.workflow-template-card:nth-child(4n + 3) .workflow-template-icon { color: #a56a16; background: #fff6e8; }
.workflow-template-card:nth-child(4n) .workflow-template-icon { color: #674d91; background: #f4f0f8; }

.workflow-template-card strong,
.workflow-template-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-template-card > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.workflow-template-card.active,
.workflow-template-card.is-active {
  color: #0470c1;
  background: #e7f3fc;
  border-color: #8dc2e7;
}

.workflow-template-card strong {
  color: #333333;
  font-size: 13px;
  font-weight: 500;
}

.workflow-template-card small {
  margin-top: 5px;
  color: #999999;
  font-size: 10px;
}

.workflow-form {
  padding: 0;
  background: #ffffff;
  border: 1px solid #e5e5e5;
}

.workflow-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px 18px;
}

.workflow-form-grid .form-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
}

.workflow-form-grid .form-field > label,
.workflow-form-grid .form-field > span {
  color: #555555;
  font-size: 12px;
}

.workflow-form-grid .form-field > label .required,
.workflow-form-grid .form-field > span .required,
.workflow-form-grid .form-field > span b {
  margin-right: 3px;
  color: #d94b4b;
  font-weight: 400;
}

.workflow-form-grid .span-2 {
  grid-column: span 2;
}

.workflow-form textarea.input {
  height: auto;
  min-height: 108px;
  padding: 7px 9px;
  line-height: 1.6;
  resize: vertical;
}

.workflow-form .batch-upload {
  min-height: 108px;
  padding: 14px;
}

.workflow-form .upload-visual {
  width: 40px;
  height: 40px;
  margin-bottom: 7px;
}

.workflow-form .batch-upload > small {
  display: block;
  margin-top: 5px;
  color: #999999;
  font-size: 10px;
}

.workflow-node {
  position: relative;
  min-height: 54px;
  padding: 0 0 14px 24px;
}

.workflow-node::before {
  position: absolute;
  top: 5px;
  bottom: -5px;
  left: 6px;
  width: 1px;
  background: #dfe3e7;
  content: "";
}

.workflow-node::after {
  position: absolute;
  top: 4px;
  left: 2px;
  width: 9px;
  height: 9px;
  background: #ffffff;
  border: 2px solid #0470c1;
  border-radius: 50%;
  content: "";
}

.workflow-node:last-child::before {
  display: none;
}

.workflow-node strong,
.workflow-node span,
.workflow-node small {
  display: block;
}

.workflow-node strong {
  color: #333333;
  font-size: 12px;
  font-weight: 500;
}

.workflow-node span,
.workflow-node small {
  margin-top: 3px;
  color: #999999;
  font-size: 11px;
}

.workflow-opinion {
  margin-top: 8px;
  padding: 8px 10px;
  color: #666666;
  background: #f8f9fa;
  border-left: 2px solid #a9d1ee;
  font-size: 12px;
  line-height: 1.6;
}

/* Batch import pattern */

.batch-page {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 12px;
}

.batch-panel {
  min-width: 0;
  background: #ffffff;
  border: 1px solid #e5e5e5;
}

.batch-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #ffffff;
  border: 1px solid #e5e5e5;
}

.batch-step {
  position: relative;
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 10px;
  color: #999999;
  border-right: 1px solid #eeeeee;
  font-size: 12px;
}

.batch-step:last-child {
  border-right: 0;
}

.batch-step::before {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  color: #999999;
  background: #f5f5f5;
  border: 1px solid #d9d9d9;
  border-radius: 50%;
  content: counter(batch-step);
  counter-increment: batch-step;
  font-family: Arial, sans-serif;
  font-size: 11px;
}

.batch-steps {
  counter-reset: batch-step;
}

.batch-step.active,
.batch-step.is-active,
.batch-step.done,
.batch-step.is-done {
  color: #0470c1;
}

.batch-step.active::before,
.batch-step.is-active::before {
  color: #ffffff;
  background: #0470c1;
  border-color: #0470c1;
}

.batch-step.done::before,
.batch-step.is-done::before {
  color: #287d52;
  background: #edf8f2;
  border-color: #a8d6bb;
}

.batch-upload {
  display: grid;
  min-height: 220px;
  place-items: center;
  padding: 24px;
  color: #666666;
  background: #fbfcfd;
  border: 1px dashed #b9c4cc;
  border-radius: 3px;
  text-align: center;
}

.batch-upload:hover,
.batch-upload:focus-within {
  background: #f7fbfe;
  border-color: #0470c1;
}

.upload-visual {
  display: grid;
  width: 54px;
  height: 54px;
  margin: 0 auto 12px;
  place-items: center;
  color: #0470c1;
  background: #edf6fc;
  border-radius: 3px;
}

.upload-visual .icon {
  width: 25px;
  height: 25px;
}

.batch-rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  margin: 0;
  padding: 12px 16px 12px 32px;
  color: #666666;
  background: #fafafa;
  border: 1px solid #e5e5e5;
  font-size: 11px;
  line-height: 1.6;
}

.inline-progress {
  display: flex;
  min-width: 160px;
  align-items: center;
  gap: 8px;
}

.inline-progress > span:first-child,
.inline-progress-track {
  height: 6px;
  flex: 1;
  overflow: hidden;
  background: #edf0f2;
  border-radius: 3px;
}

.inline-progress > span:first-child > i,
.inline-progress-track > i,
.inline-progress-value {
  display: block;
  height: 100%;
  background: #0470c1;
  border-radius: 3px;
}

.inline-progress small,
.inline-progress > span:last-child {
  flex: 0 0 auto;
  color: #999999;
  font-family: Arial, sans-serif;
  font-size: 11px;
}

/* Compact management-center preview opened from the account menu */

.admin-preview {
  display: grid;
  min-width: 0;
  min-height: 520px;
  grid-template-columns: 190px minmax(0, 1fr);
  overflow: hidden;
  background: #f0f1f4;
  border: 1px solid #e5e5e5;
}

.admin-preview-nav {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 0 0 12px;
  color: rgba(255, 255, 255, 0.88);
  background: #263746;
}

.admin-preview-nav > strong {
  display: flex;
  min-height: 52px;
  align-items: center;
  padding: 0 16px;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 16px;
  font-weight: 500;
}

.admin-preview-nav > button {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 38px;
  align-items: center;
  gap: 10px;
  padding: 0 14px 0 18px;
  color: rgba(255, 255, 255, 0.82);
  background: transparent;
  border-radius: 0;
  font-size: 13px;
  text-align: left;
}

.admin-preview-nav > button:hover,
.admin-preview-nav > button:focus-visible {
  color: #ffffff;
  background: #304655;
  outline: none;
}

.admin-preview-nav > button.active {
  color: #ffffff;
  background: #0875b9;
}

.admin-preview-nav > button.active::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: #55b8ee;
  content: "";
}

.admin-preview-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  overflow: auto;
  background: #f0f1f4;
}

.admin-preview-main .page-toolbar,
.admin-preview-main .kpi-strip,
.admin-preview-main .panel {
  flex: 0 0 auto;
}

/* Responsive E10 shell and new page recipes */

@media (max-width: 1240px) {
  .global-search-wrap {
    display: none;
  }

  .topbar-actions > .topbar-icon {
    width: 46px;
    min-width: 46px;
  }

  .top-module {
    gap: 6px;
    padding: 0 12px;
  }

  .workflow-template-grid,
  .portal-app-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .topbar-brand {
    width: 180px;
    min-width: 180px;
  }

  .top-module {
    min-width: 48px;
    padding: 0 10px;
  }

  .top-module .icon {
    display: none;
  }

  .account-button {
    min-width: 52px;
    width: 52px;
    justify-content: center;
    padding: 0;
  }

  .account-copy,
  .account-button > .icon {
    display: none;
  }

  .topbar-tool-message {
    display: none;
  }

  .portal-segment-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .workflow-template-grid,
  .portal-app-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .topbar-brand {
    width: 104px;
    min-width: 104px;
    padding: 0 5px;
  }

  .mobile-nav-toggle {
    display: inline-flex !important;
    width: 32px;
    min-width: 32px;
    margin-right: 3px;
  }

  .ecology-wordmark {
    display: inline;
    font-size: 16px;
  }

  .brand-chevron {
    display: none;
  }

  .top-modules {
    min-width: 0;
    flex: 1;
  }

  .top-module {
    min-width: 30px;
    max-width: none;
    flex: 1;
    gap: 0;
    padding: 0 3px;
    font-size: 11px;
  }

  .top-module .label-full {
    display: none;
  }

  .top-module .label-short {
    display: inline;
  }

  .topbar-tool-todo,
  .topbar-tool-message,
  .topbar-tool-alert,
  .topbar-action-divider {
    display: none;
  }

  .topbar-actions .topbar-icon {
    width: 34px;
    min-width: 34px;
  }

  .account-button {
    width: 42px;
    min-width: 42px;
  }

  .account-avatar {
    width: 28px;
    height: 28px;
  }

  .account-menu {
    top: 50px;
    right: 0;
    width: min(270px, calc(100vw - 12px));
  }

  .main-content {
    margin-left: 0;
  }

  .page-header {
    height: 46px;
    min-height: 46px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    margin: 0;
    padding: 0 8px 0 10px;
  }

  .page-header-actions {
    margin-left: auto;
  }

  .page-header h1 {
    font-size: 15px;
  }

  .data-period {
    display: none;
  }

  .view-root {
    height: calc(100vh - 96px);
    padding: 8px;
  }

  .app-drawer {
    width: 100vw;
  }

  .app-drawer-body {
    padding: 0 10px 16px;
  }

  .app-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-welcome {
    min-height: 78px;
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
    padding: 11px 12px;
  }

  .portal-welcome-title {
    width: 100%;
    font-size: 16px;
  }

  .portal-welcome-meta {
    max-width: calc(100vw - 48px);
    overflow-x: auto;
  }

  .portal-month-select {
    width: 100%;
    flex-basis: auto;
  }

  .portal-profile-grid,
  .workflow-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .workflow-form-grid .span-2 {
    grid-column: auto;
  }

  .workflow-template-grid,
  .portal-app-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workflow-template-card,
  .portal-app {
    min-height: 78px;
    padding: 9px;
  }

  .batch-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .batch-step:nth-child(2) {
    border-right: 0;
  }

  .batch-step:nth-child(-n + 2) {
    border-bottom: 1px solid #eeeeee;
  }

  .batch-rules {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-drawer {
    top: 50px;
    width: 100vw;
  }

  .admin-preview {
    min-height: 560px;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-preview-nav {
    display: flex;
    flex-direction: row;
    padding: 0;
    overflow-x: auto;
  }

  .admin-preview-nav > strong {
    display: none;
  }

  .admin-preview-nav > button {
    width: auto;
    min-width: 100px;
    flex: 0 0 auto;
    justify-content: center;
    padding: 0 10px;
  }

  .admin-preview-nav > button.active::before {
    top: auto;
    right: 0;
    bottom: 0;
    width: auto;
    height: 2px;
  }
}

@media (max-width: 430px) {
  .topbar-brand {
    width: 92px;
    min-width: 92px;
  }

  .ecology-wordmark {
    font-size: 15px;
  }

  .top-module {
    font-size: 10px;
  }

  .topbar-actions .topbar-icon {
    width: 32px;
    min-width: 32px;
  }

  .account-button {
    width: 38px;
    min-width: 38px;
  }

  .account-avatar {
    width: 26px;
    height: 26px;
  }

  .portal-app-grid,
  .workflow-template-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .portal-app,
  .workflow-template-card {
    min-height: 68px;
  }

  .portal-brief-list time,
  .portal-brief-list small {
    display: none;
  }
}

/* Standard E10 recipe integration. Customer pages keep their own profiles. */

html,
body {
  color: var(--regular-fc, #666666);
  font-family: var(--regular-ff, Arial, PingFangSC-Light, "Hiragino Sans GB", "Microsoft YaHei", sans-serif);
  line-height: 1.5;
}

.page-header h1,
.toolbar-title,
.panel-header h2,
.panel-header h3,
.panel-title,
.list-title,
.table-link {
  color: var(--main-fc, #111111);
}

.input,
.select,
.form-control,
.request-control {
  color: #333333;
  border-color: var(--border-color, #e5e5e5);
}

.btn {
  border-color: var(--border-color, #e5e5e5);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  color: #ffffff;
  background: var(--primary-active, #035f9f);
  border-color: var(--primary-active, #035f9f);
}

.workflow-nav-section {
  display: flex;
  min-height: 30px;
  align-items: center;
  padding: 7px 18px 3px 24px;
  color: #c2c6cc;
  font-size: 11px;
  line-height: 20px;
}

.workflow-nav-child {
  padding-left: 38px;
}

.workflow-nav-child .icon {
  width: 14px;
  height: 14px;
}

.nav-expand-icon {
  margin-left: auto;
}

body.e10-recipe-route .page-header {
  display: none;
}

body.e10-recipe-route .view-root {
  height: calc(100vh - 50px);
  padding: 0;
  overflow: hidden;
}

body.e10-recipe-route .content-toolbar {
  height: 50px;
  min-height: 50px;
  padding: 0 16px;
  background: #f6f7f9;
  border-bottom: 1px solid #e5e5e5;
}

body.e10-recipe-route .content-toolbar strong {
  color: var(--main-fc, #111111);
}

body.e10-recipe-route .compact-select {
  width: auto;
  min-width: 82px;
}

.workflow-home-view .range-label {
  white-space: nowrap;
}

.workflow-home-view .overview-metrics {
  align-items: start;
}

body.e10-recipe-route .e10-view.active {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
}

.launch-empty {
  display: flex;
  min-height: 220px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: var(--secondary-fc, #999999);
  background: #ffffff;
  border: 1px solid var(--border-color, #e5e5e5);
}

.launch-empty strong {
  color: var(--main-fc, #111111);
  font-size: 14px;
  font-weight: 500;
}

.portal-standard-workbench {
  min-width: 0;
  background: #ffffff;
  border: 1px solid var(--border-color, #e5e5e5);
}

.portal-standard-heading {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border-color, #e5e5e5);
}

.portal-standard-heading > div {
  min-width: 0;
}

.portal-standard-heading strong,
.portal-standard-heading span {
  display: block;
}

.portal-standard-heading strong {
  color: var(--main-fc, #111111);
  font-size: 15px;
  font-weight: 600;
}

.portal-standard-heading span {
  margin-top: 2px;
  color: var(--secondary-fc, #999999);
  font-size: 11px;
}

.portal-standard-workbench .portal-app-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-bottom: 1px solid var(--border-color, #e5e5e5);
}

.portal-standard-grid {
  padding: 10px;
  background: #f0f1f4;
}

@media (max-width: 1200px) {
  .portal-standard-workbench .portal-app-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .portal-standard-workbench .portal-app-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-standard-heading {
    padding: 0 12px;
  }
}

#adminShell {
  position: relative;
  z-index: 3000;
  width: 100%;
  height: 100%;
}

@media (max-width: 760px) {
  .workflow-nav-section,
  .workflow-nav-child {
    display: none;
  }

  body.e10-recipe-route .view-root {
    height: calc(100vh - 50px);
  }
}

/* Standard E10 workflow focus page */
body.e10-workflow-focus-route {
  overflow: hidden;
  line-height: 1.15;
}

body.e10-workflow-focus-route .topbar,
body.e10-workflow-focus-route .sidebar,
body.e10-workflow-focus-route .page-header {
  display: none;
}

body.e10-workflow-focus-route .main-content {
  height: 100vh;
  margin-left: 0;
  padding-top: 0;
}

body.e10-workflow-focus-route .view-root {
  height: 100vh;
  padding: 0;
  overflow: hidden;
}

body.e10-workflow-focus-route .content-toolbar {
  height: 54px;
  min-height: 54px;
}

.workflow-form-heading {
  display: flex;
  min-width: 0;
  align-self: stretch;
  align-items: center;
  gap: 8px;
}

.workflow-form-heading > .view-back-button {
  align-self: center;
}

body.e10-workflow-focus-route .workflow-form-toolbar .toolbar-title > div {
  padding-top: 6px;
}

body.e10-workflow-focus-route .workflow-form-toolbar .toolbar-title strong {
  line-height: 18px;
}

.workflow-form-toolbar .toolbar-tabs {
  height: 29px;
  align-items: flex-end;
  gap: 24px;
  margin-top: 0;
}

.workflow-main-tab {
  position: relative;
  display: inline-flex;
  height: 29px;
  align-items: center;
  padding: 0;
  color: #666666;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  font-size: 13px;
  line-height: 27px;
}

.workflow-main-tab:hover,
.workflow-main-tab:focus-visible,
.workflow-main-tab.active {
  color: var(--primary, #0470c1);
  outline: none;
}

.workflow-main-tab.active {
  border-bottom-color: var(--primary, #0470c1);
}

.workflow-flow-canvas {
  overflow: auto;
}

.workflow-flow-canvas .flow-stack {
  top: 62px;
}

.workflow-flow-canvas .flow-node {
  position: relative;
}

.workflow-flow-canvas .flow-node.current {
  border-color: #78afe0;
  box-shadow: 0 0 0 2px rgba(4, 112, 193, 0.1);
}

.workflow-flow-canvas .flow-node.current strong {
  background: #0470c1;
}

.workflow-flow-canvas .flow-node.done strong {
  background: #6f9f7e;
}

.workflow-flow-canvas .flow-node.future strong {
  background: #b9bdc3;
}

.workflow-flow-canvas .legend-button {
  z-index: 2;
}

.workflow-flow-legend {
  position: absolute;
  z-index: 2;
  top: 78px;
  right: 28px;
  display: flex;
  min-width: 132px;
  padding: 9px 11px;
  color: #666666;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
  flex-direction: column;
  gap: 7px;
  font-size: 11px;
}

.workflow-flow-legend span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.workflow-flow-legend i {
  width: 9px;
  height: 9px;
  background: #b9bdc3;
}

.workflow-flow-legend i.done {
  background: #6f9f7e;
}

.workflow-flow-legend i.current {
  background: #0470c1;
}

@media (max-width: 760px) {
  body.e10-workflow-focus-route .view-root {
    height: 100vh;
  }

  .workflow-form-heading {
    gap: 2px;
  }

  .workflow-form-toolbar .toolbar-tabs {
    gap: 18px;
  }

  .workflow-flow-canvas .flow-stack {
    top: 54px;
  }
}

/* --------------------------------------------------------------------------
 * Alumni resource platform
 * Scoped business styles layered over the shared E10 shell above.  These
 * rules intentionally keep the content work-focused: compact cards, clear
 * table-like hierarchy and restrained status colour.
 * -------------------------------------------------------------------------- */

.alumni-portal {
  --alumni-primary: #0470c1;
  --alumni-primary-soft: #edf6fc;
  --alumni-ink: #222222;
  --alumni-muted: #8a8f96;
  --alumni-line: #e5e5e5;
  --alumni-surface: #ffffff;
  --alumni-page: #f0f1f4;
  --alumni-green: #2f8f5b;
  --alumni-orange: #bd7816;
  --alumni-red: #c94b4b;
  --alumni-violet: #705698;
  min-width: 0;
  color: var(--alumni-ink);
  overflow-wrap: anywhere;
}

.alumni-portal *,
.alumni-portal *::before,
.alumni-portal *::after {
  box-sizing: border-box;
}

.alumni-portal button,
.alumni-portal input,
.alumni-portal select,
.alumni-portal textarea {
  font-family: inherit;
}

.alumni-portal .btn,
.alumni-portal .input,
.alumni-portal .select,
.alumni-portal .form-control {
  flex: 0 0 auto;
}

.alumni-portal .page-stack {
  min-width: 0;
}

.alumni-hero {
  position: relative;
  display: flex;
  min-height: 112px;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px 18px 23px;
  overflow: hidden;
  background: var(--alumni-surface);
  border: 1px solid var(--alumni-line);
  border-radius: 4px;
}

.alumni-hero::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--alumni-primary);
  content: "";
}

.alumni-hero-main {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 14px;
}

.alumni-hero-emblem {
  display: inline-flex;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  align-items: center;
  justify-content: center;
  color: var(--alumni-primary);
  background: #f2f8fc;
  border: 1px solid #d6e8f5;
  border-radius: 4px;
}

.alumni-hero-emblem .icon {
  width: 25px;
  height: 25px;
}

.alumni-hero-copy {
  min-width: 0;
}

.alumni-hero-kicker,
.alumni-eyebrow {
  display: block;
  margin: 0 0 4px;
  color: #74808b;
  font-size: 11px;
  line-height: 16px;
}

.alumni-hero h2,
.alumni-hero-title {
  margin: 0;
  overflow: hidden;
  color: #222222;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-hero-desc {
  max-width: 700px;
  margin: 3px 0 0;
  overflow: hidden;
  color: #777777;
  font-size: 12px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-hero-actions,
.alumni-inline-actions,
.alumni-detail-actions,
.alumni-form-actions,
.alumni-toolbar-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.alumni-hero-actions {
  flex: 0 0 auto;
}

.alumni-hero-actions .btn,
.alumni-inline-actions .btn,
.alumni-detail-actions .btn,
.alumni-form-actions .btn {
  min-width: 72px;
}

.alumni-role-strip {
  display: flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  color: #666666;
  background: #ffffff;
  border: 1px solid var(--alumni-line);
  border-radius: 4px;
}

.alumni-role-strip > .icon {
  width: 16px;
  height: 16px;
  color: var(--alumni-primary);
}

.alumni-role-strip-label {
  flex: 0 0 auto;
  color: #777777;
  font-size: 12px;
  white-space: nowrap;
}

.alumni-role-strip .select,
.alumni-role-strip select {
  width: min(190px, 100%);
}

.alumni-role-intro {
  min-width: 0;
  overflow: hidden;
  color: #999999;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-role-strip .alumni-role-intro + .btn,
.alumni-role-strip .alumni-role-intro + button {
  margin-left: auto;
}

.alumni-stat-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.alumni-stat-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 96px;
  padding: 14px 13px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--alumni-line);
  border-radius: 4px;
  flex-direction: column;
  justify-content: space-between;
}

.alumni-stat-card:hover {
  border-color: #c7ddeb;
  box-shadow: 0 2px 7px rgba(4, 112, 193, 0.08);
}

.alumni-stat-label {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  color: #777777;
  font-size: 12px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-stat-label .icon {
  width: 15px;
  height: 15px;
  color: #78a8ca;
}

.alumni-stat-value {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: #222222;
  font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 32px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-stat-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  color: #999999;
  font-size: 11px;
  line-height: 16px;
}

.alumni-stat-meta.is-up { color: var(--alumni-green); }
.alumni-stat-meta.is-warn { color: var(--alumni-orange); }
.alumni-stat-meta.is-down { color: var(--alumni-red); }

.alumni-section-heading {
  display: flex;
  min-width: 0;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.alumni-section-heading h2,
.alumni-section-heading h3 {
  margin: 0;
  overflow: hidden;
  color: #333333;
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-section-heading small {
  color: #999999;
  font-size: 11px;
  font-weight: 400;
}

.alumni-resource-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.alumni-resource-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 208px;
  overflow: hidden;
  color: inherit;
  background: #ffffff;
  border: 1px solid var(--alumni-line);
  border-radius: 4px;
  cursor: pointer;
  flex-direction: column;
  text-align: left;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

button.alumni-resource-card {
  padding: 0;
}

.alumni-resource-card:hover,
.alumni-resource-card:focus-visible {
  border-color: #9ec8e7;
  box-shadow: 0 3px 10px rgba(4, 112, 193, 0.1);
  outline: none;
}

.alumni-resource-card::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--alumni-primary);
  content: "";
}

.alumni-resource-card[data-type="product"]::before,
.alumni-resource-card.is-product::before { background: #ba7b29; }
.alumni-resource-card[data-type="service"]::before,
.alumni-resource-card.is-service::before { background: #2c8d75; }
.alumni-resource-card[data-type="company"]::before,
.alumni-resource-card.is-company::before { background: #477eb3; }
.alumni-resource-card[data-type="event"]::before,
.alumni-resource-card.is-event::before { background: #7960a4; }
.alumni-resource-card[data-type="offer"]::before,
.alumni-resource-card.is-offer::before { background: #b7684f; }

.alumni-resource-card-header {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 14px 10px 17px;
}

.alumni-resource-icon {
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  color: var(--alumni-primary);
  background: #f0f7fc;
  border: 1px solid #d8eaf6;
  border-radius: 4px;
}

.alumni-resource-icon .icon {
  width: 19px;
  height: 19px;
}

.is-product .alumni-resource-icon,
[data-type="product"] .alumni-resource-icon { color: #a76716; background: #fff8ef; border-color: #f0dec4; }
.is-service .alumni-resource-icon,
[data-type="service"] .alumni-resource-icon { color: #26745f; background: #eff8f4; border-color: #d1eadf; }
.is-event .alumni-resource-icon,
[data-type="event"] .alumni-resource-icon { color: #684c91; background: #f5f1f9; border-color: #ded3eb; }
.is-offer .alumni-resource-icon,
[data-type="offer"] .alumni-resource-icon { color: #a5533e; background: #fff3ef; border-color: #f0d5cb; }

.alumni-resource-card-title {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #333333;
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-resource-card-subtitle {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #999999;
  font-size: 11px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-resource-card-body {
  display: flex;
  min-width: 0;
  padding: 0 14px 12px 17px;
  flex: 1;
  flex-direction: column;
}

.alumni-resource-summary {
  display: -webkit-box;
  min-height: 38px;
  margin: 0;
  overflow: hidden;
  color: #666666;
  font-size: 12px;
  line-height: 19px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.alumni-resource-tags,
.alumni-tag-list {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}

.alumni-type-chip,
.alumni-resource-tag,
.alumni-role-chip,
.alumni-approval-chip {
  display: inline-flex;
  max-width: 100%;
  height: 21px;
  align-items: center;
  padding: 0 7px;
  overflow: hidden;
  color: #47718b;
  background: #f1f7fb;
  border: 1px solid #d7e8f4;
  border-radius: 3px;
  font-size: 11px;
  line-height: 19px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-type-chip--product,
.alumni-resource-tag--product { color: #9b641b; background: #fff8ef; border-color: #f1dfc6; }
.alumni-type-chip--service,
.alumni-resource-tag--service { color: #28775f; background: #eff8f4; border-color: #d0eadf; }
.alumni-type-chip--company,
.alumni-resource-tag--company { color: #3972a8; background: #eff6fc; border-color: #d1e4f2; }
.alumni-type-chip--event,
.alumni-resource-tag--event { color: #674d8f; background: #f5f1f9; border-color: #ded3ea; }
.alumni-type-chip--offer,
.alumni-resource-tag--offer { color: #a1533d; background: #fff3ef; border-color: #f1d5cb; }

.alumni-resource-card-footer {
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 12px 7px 17px;
  border-top: 1px solid #eeeeee;
}

.alumni-resource-owner {
  min-width: 0;
  overflow: hidden;
  color: #999999;
  font-size: 11px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-card-link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  color: var(--alumni-primary);
  font-size: 12px;
  line-height: 22px;
  white-space: nowrap;
}

.alumni-card-link .icon {
  width: 13px;
  height: 13px;
}

.alumni-filterbar {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 9px 12px;
  background: #ffffff;
  border: 1px solid var(--alumni-line);
  border-radius: 4px;
}

.alumni-filterbar .input,
.alumni-filterbar .select,
.alumni-filterbar .form-control {
  width: 150px;
}

.alumni-filterbar .alumni-search-input {
  width: min(260px, 100%);
}

.alumni-filterbar .alumni-filter-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
}

.alumni-workflow-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.alumni-workflow-card {
  min-width: 0;
  background: #ffffff;
  border: 1px solid var(--alumni-line);
  border-radius: 4px;
}

.alumni-workflow-card-header {
  display: flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid #eeeeee;
}

.alumni-workflow-card-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  color: #333333;
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-workflow-card-title .icon {
  width: 16px;
  height: 16px;
  color: var(--alumni-primary);
}

.alumni-workflow-card-body {
  padding: 12px;
}

.alumni-workflow-card-desc {
  margin: 0;
  color: #777777;
  font-size: 12px;
  line-height: 20px;
}

.alumni-workflow-path {
  display: flex;
  min-width: 0;
  align-items: stretch;
  gap: 0;
  margin-top: 13px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.alumni-workflow-step {
  position: relative;
  display: flex;
  min-width: 90px;
  flex: 1 0 90px;
  align-items: center;
  gap: 7px;
  padding-right: 19px;
  color: #777777;
  font-size: 11px;
  line-height: 17px;
}

.alumni-workflow-step:not(:last-child)::after {
  position: absolute;
  top: 10px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-top: 1px solid #aeb4ba;
  border-right: 1px solid #aeb4ba;
  content: "";
  transform: rotate(45deg);
}

.alumni-workflow-step-index {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  align-items: center;
  justify-content: center;
  color: #777777;
  background: #f2f3f4;
  border: 1px solid #e2e4e6;
  border-radius: 50%;
  font-size: 11px;
}

.alumni-workflow-step.is-done { color: #4d755e; }
.alumni-workflow-step.is-current { color: var(--alumni-primary); }
.alumni-workflow-step.is-done .alumni-workflow-step-index { color: #ffffff; background: var(--alumni-green); border-color: var(--alumni-green); }
.alumni-workflow-step.is-current .alumni-workflow-step-index { color: #ffffff; background: var(--alumni-primary); border-color: var(--alumni-primary); }
.alumni-workflow-step.is-rejected { color: var(--alumni-red); }
.alumni-workflow-step.is-rejected .alumni-workflow-step-index { color: #ffffff; background: var(--alumni-red); border-color: var(--alumni-red); }

.alumni-kanban-wrap {
  min-width: 0;
  overflow-x: auto;
  scrollbar-color: #c8ccd1 transparent;
  scrollbar-width: thin;
}

.alumni-kanban {
  display: grid;
  min-width: 900px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.alumni-kanban-column {
  min-width: 0;
  min-height: 245px;
  background: #f6f7f8;
  border: 1px solid #e4e6e8;
  border-radius: 4px;
}

.alumni-kanban-heading {
  display: flex;
  min-width: 0;
  min-height: 39px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid #e4e6e8;
}

.alumni-kanban-heading strong {
  min-width: 0;
  overflow: hidden;
  color: #555555;
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-kanban-count {
  display: inline-flex;
  min-width: 19px;
  height: 19px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  color: #777777;
  background: #e9ebed;
  border-radius: 10px;
  font-size: 10px;
}

.alumni-kanban-list {
  display: flex;
  min-height: 204px;
  padding: 8px;
  flex-direction: column;
  gap: 8px;
}

.alumni-kanban-item {
  min-width: 0;
  padding: 10px;
  background: #ffffff;
  border: 1px solid #e4e6e8;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.alumni-kanban-item:hover {
  border-color: #b9d7eb;
}

.alumni-kanban-item-title {
  display: block;
  overflow: hidden;
  color: #444444;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-kanban-item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  margin-top: 8px;
  color: #999999;
  font-size: 11px;
}

.alumni-detail {
  min-width: 0;
  background: #ffffff;
  border: 1px solid var(--alumni-line);
  border-radius: 4px;
}

.alumni-detail-header {
  display: flex;
  min-width: 0;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid #eeeeee;
}

.alumni-detail-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.alumni-detail-heading .alumni-resource-icon {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
}

.alumni-detail-heading h2,
.alumni-detail-heading h3 {
  margin: 0;
  overflow: hidden;
  color: #333333;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-detail-heading p {
  margin: 1px 0 0;
  overflow: hidden;
  color: #999999;
  font-size: 11px;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-detail-body {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1.6fr) minmax(250px, 0.8fr);
  gap: 16px;
  padding: 16px;
}

.alumni-detail-main,
.alumni-detail-aside {
  min-width: 0;
}

.alumni-detail-section + .alumni-detail-section {
  margin-top: 18px;
}

.alumni-detail-section h3 {
  display: flex;
  min-height: 26px;
  align-items: center;
  margin: 0 0 9px;
  padding-left: 8px;
  color: #555555;
  border-left: 3px solid var(--alumni-primary);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

.alumni-detail-section p {
  margin: 0;
  color: #666666;
  font-size: 12px;
  line-height: 21px;
}

.alumni-detail-list {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid #eeeeee;
  border-left: 1px solid #eeeeee;
}

.alumni-detail-list > div {
  display: grid;
  min-width: 0;
  min-height: 37px;
  grid-template-columns: 92px minmax(0, 1fr);
  border-right: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
}

.alumni-detail-list dt,
.alumni-detail-list dd {
  min-width: 0;
  margin: 0;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 20px;
}

.alumni-detail-list dt {
  color: #777777;
  background: #fafafa;
}

.alumni-detail-list dd {
  overflow: hidden;
  color: #555555;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-detail-aside-card {
  padding: 13px;
  background: #f8fafb;
  border: 1px solid #e4eaee;
  border-radius: 4px;
}

.alumni-detail-aside-card + .alumni-detail-aside-card {
  margin-top: 10px;
}

.alumni-detail-aside-card h4 {
  margin: 0 0 7px;
  color: #555555;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

.alumni-detail-aside-card p {
  margin: 0;
  color: #777777;
  font-size: 12px;
  line-height: 20px;
}

.alumni-form-card {
  min-width: 0;
  background: #ffffff;
  border: 1px solid var(--alumni-line);
  border-radius: 4px;
}

.alumni-form-card-header {
  display: flex;
  min-height: 48px;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid #eeeeee;
}

.alumni-form-card-header h2,
.alumni-form-card-header h3 {
  margin: 0;
  color: #333333;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}

.alumni-form-card-body {
  padding: 16px;
}

.alumni-form-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 22px;
  row-gap: 14px;
}

.alumni-form-field {
  display: grid;
  min-width: 0;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.alumni-form-field.is-wide,
.alumni-form-field--wide {
  grid-column: 1 / -1;
}

.alumni-form-field.is-wide {
  align-items: start;
}

.alumni-form-field label,
.alumni-form-label {
  overflow: hidden;
  color: #666666;
  font-size: 12px;
  line-height: 30px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-form-field label.is-required::before,
.alumni-form-label.is-required::before {
  margin-right: 3px;
  color: #d94b4b;
  content: "*";
}

.alumni-form-field .textarea,
.alumni-form-field textarea {
  min-height: 78px;
  padding: 7px 9px;
  line-height: 19px;
  resize: vertical;
}

.alumni-field-help {
  grid-column: 2;
  margin-top: -4px;
  color: #999999;
  font-size: 11px;
  line-height: 16px;
}

.alumni-upload-placeholder {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #7990a2;
  background: #f7fafc;
  border: 1px dashed #bfd5e3;
  border-radius: 3px;
  font-size: 12px;
}

.alumni-upload-placeholder:hover,
.alumni-upload-placeholder:focus-visible {
  color: var(--alumni-primary);
  border-color: var(--alumni-primary);
  outline: none;
}

.alumni-form-actions {
  min-height: 52px;
  justify-content: flex-end;
  margin-top: 16px;
  padding: 10px 14px;
  background: #fafafa;
  border-top: 1px solid #eeeeee;
}

.alumni-timeline {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.alumni-timeline-item {
  position: relative;
  min-height: 64px;
  padding: 0 0 16px 28px;
}

.alumni-timeline-item:last-child {
  min-height: 30px;
  padding-bottom: 0;
}

.alumni-timeline-item::before {
  position: absolute;
  top: 5px;
  bottom: -5px;
  left: 7px;
  width: 1px;
  background: #dfe4e7;
  content: "";
}

.alumni-timeline-item:last-child::before {
  display: none;
}

.alumni-timeline-dot {
  position: absolute;
  z-index: 1;
  top: 3px;
  left: 2px;
  width: 11px;
  height: 11px;
  background: #b6bec5;
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #b6bec5;
}

.alumni-timeline-item.is-done .alumni-timeline-dot { background: var(--alumni-green); box-shadow: 0 0 0 1px var(--alumni-green); }
.alumni-timeline-item.is-current .alumni-timeline-dot { background: var(--alumni-primary); box-shadow: 0 0 0 1px var(--alumni-primary); }
.alumni-timeline-item.is-rejected .alumni-timeline-dot { background: var(--alumni-red); box-shadow: 0 0 0 1px var(--alumni-red); }

.alumni-timeline-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  color: #555555;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}

.alumni-timeline-time {
  margin-left: auto;
  color: #999999;
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
}

.alumni-timeline-desc {
  margin: 4px 0 0;
  color: #777777;
  font-size: 12px;
  line-height: 19px;
}

.alumni-status {
  display: inline-flex;
  max-width: 100%;
  height: 22px;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  color: #777777;
  background: #f3f4f5;
  border: 1px solid #e1e3e5;
  border-radius: 3px;
  font-size: 11px;
  line-height: 20px;
  white-space: nowrap;
}

.alumni-status::before {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  background: #aeb4ba;
  border-radius: 50%;
  content: "";
}

.alumni-status.is-pending,
.alumni-status--pending { color: #93651d; background: #fff8ec; border-color: #f0dfbd; }
.alumni-status.is-pending::before,
.alumni-status--pending::before { background: #c08a2a; }
.alumni-status.is-approved,
.alumni-status--approved,
.alumni-status.is-online { color: #287650; background: #eff8f3; border-color: #d0eadb; }
.alumni-status.is-approved::before,
.alumni-status--approved::before,
.alumni-status.is-online::before { background: var(--alumni-green); }
.alumni-status.is-rejected,
.alumni-status--rejected { color: #b44141; background: #fff1f1; border-color: #f0d0d0; }
.alumni-status.is-rejected::before,
.alumni-status--rejected::before { background: var(--alumni-red); }
.alumni-status.is-processing,
.alumni-status--processing { color: #2c70a2; background: #eff7fc; border-color: #cfe5f4; }
.alumni-status.is-processing::before,
.alumni-status--processing::before { background: var(--alumni-primary); }

.alumni-empty {
  display: flex;
  min-height: 210px;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #999999;
  background: #ffffff;
  border: 1px solid var(--alumni-line);
  border-radius: 4px;
  flex-direction: column;
  text-align: center;
}

.alumni-empty .icon {
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  color: #b7c7d2;
}

.alumni-empty strong {
  color: #666666;
  font-size: 13px;
  font-weight: 500;
  line-height: 21px;
}

.alumni-empty p {
  max-width: 340px;
  margin: 3px 0 12px;
  color: #999999;
  font-size: 12px;
  line-height: 19px;
}

.alumni-activity-list {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-direction: column;
}

.alumni-activity-item {
  display: grid;
  min-width: 0;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 8px 2px;
  border-bottom: 1px solid #eeeeee;
}

.alumni-activity-item:last-child {
  border-bottom: 0;
}

.alumni-activity-avatar {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  color: #47758f;
  background: #eef6fb;
  border: 1px solid #d8e8f2;
  border-radius: 50%;
  font-size: 11px;
}

.alumni-activity-copy {
  min-width: 0;
}

.alumni-activity-copy strong,
.alumni-activity-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-activity-copy strong {
  color: #555555;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

.alumni-activity-copy span,
.alumni-activity-time {
  color: #999999;
  font-size: 11px;
  line-height: 16px;
}

.alumni-activity-time {
  white-space: nowrap;
}

.alumni-mobile-only {
  display: none;
}

@media (max-width: 1180px) {
  .alumni-resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .alumni-detail-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .alumni-detail-aside {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .alumni-detail-aside-card + .alumni-detail-aside-card {
    margin-top: 0;
  }
}

@media (max-width: 920px) {
  .alumni-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .alumni-workflow-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .alumni-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .alumni-form-field,
  .alumni-form-field.is-wide,
  .alumni-form-field--wide {
    grid-column: auto;
  }
}

@media (max-width: 680px) {
  .alumni-portal {
    overflow-x: clip;
  }

  .alumni-hero {
    min-height: 0;
    align-items: flex-start;
    padding: 14px 13px 14px 17px;
    flex-direction: column;
    gap: 12px;
  }

  .alumni-hero-main {
    align-items: flex-start;
  }

  .alumni-hero-emblem {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .alumni-hero h2,
  .alumni-hero-title {
    overflow: visible;
    font-size: 17px;
    line-height: 25px;
    text-overflow: clip;
    white-space: normal;
  }

  .alumni-hero-desc {
    overflow: visible;
    line-height: 19px;
    text-overflow: clip;
    white-space: normal;
  }

  .alumni-hero-actions {
    width: 100%;
  }

  .alumni-hero-actions .btn {
    flex: 1 1 0;
  }

  .alumni-role-strip {
    align-items: stretch;
    flex-wrap: wrap;
    gap: 7px;
    padding: 8px 10px;
  }

  .alumni-role-strip-label {
    display: flex;
    align-items: center;
  }

  .alumni-role-strip .select,
  .alumni-role-strip select {
    width: calc(100% - 68px);
    flex: 1 1 0;
  }

  .alumni-role-intro {
    width: 100%;
    overflow: visible;
    line-height: 18px;
    text-overflow: clip;
    white-space: normal;
  }

  .alumni-role-strip .alumni-role-intro + .btn,
  .alumni-role-strip .alumni-role-intro + button {
    margin-left: 0;
  }

  .alumni-stat-grid,
  .alumni-resource-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .alumni-stat-card {
    min-height: 82px;
  }

  .alumni-stat-value {
    font-size: 23px;
    line-height: 28px;
  }

  .alumni-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .alumni-section-heading h2,
  .alumni-section-heading h3 {
    overflow: visible;
    white-space: normal;
  }

  .alumni-filterbar .input,
  .alumni-filterbar .select,
  .alumni-filterbar .form-control,
  .alumni-filterbar .alumni-search-input {
    width: 100%;
    flex: 1 1 100%;
  }

  .alumni-filterbar .alumni-filter-actions {
    width: 100%;
    margin-left: 0;
  }

  .alumni-filterbar .alumni-filter-actions .btn {
    flex: 1 1 0;
  }

  .alumni-resource-card {
    min-height: 184px;
  }

  .alumni-detail-header {
    align-items: flex-start;
    padding: 11px;
    flex-direction: column;
    gap: 9px;
  }

  .alumni-detail-actions {
    width: 100%;
  }

  .alumni-detail-actions .btn {
    flex: 1 1 0;
  }

  .alumni-detail-body {
    gap: 12px;
    padding: 12px;
  }

  .alumni-detail-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .alumni-detail-list > div {
    grid-template-columns: 84px minmax(0, 1fr);
  }

  .alumni-detail-aside {
    grid-template-columns: minmax(0, 1fr);
  }

  .alumni-form-card-body {
    padding: 12px;
  }

  .alumni-form-field {
    display: flex;
    align-items: stretch;
    gap: 4px;
    flex-direction: column;
  }

  .alumni-form-field label,
  .alumni-form-label {
    overflow: visible;
    line-height: 20px;
    text-align: left;
    text-overflow: clip;
    white-space: normal;
  }

  .alumni-field-help {
    margin-top: 0;
  }

  .alumni-form-actions {
    padding: 10px 12px;
  }

  .alumni-form-actions .btn {
    flex: 1 1 0;
  }

  .alumni-timeline-time {
    margin-left: 0;
  }

  .alumni-timeline-title {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .alumni-mobile-only {
    display: initial;
  }
}

/* Member-facing pages use all available content width; the reserved desktop strip
   made ordinary service pages look like a back-office workspace. */
body.alumni-member-route .alumni-home,
body.alumni-member-route .alumni-plaza-page,
body.alumni-member-route .alumni-portal:not(.focus-workflow-page),
body.alumni-member-route .alumni-activity-ledger-page,
body.alumni-member-route .alumni-activity-detail-page {
  width: 100%;
  max-width: none;
}

/* Resource card view: each cover is a local first image with a quiet overlay,
   so information remains readable while each type keeps a distinct character. */
.alumni-resource-gallery {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.alumni-resource-gallery-card {
  display: flex;
  min-width: 0;
  min-height: 292px;
  padding: 0;
  overflow: hidden;
  color: #3c525f;
  background: #ffffff;
  border: 1px solid #dbe6eb;
  border-radius: 4px;
  cursor: pointer;
  flex-direction: column;
  text-align: left;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.alumni-resource-gallery-card:hover,
.alumni-resource-gallery-card:focus-visible {
  border-color: #86b9d6;
  box-shadow: 0 8px 20px rgba(32, 89, 118, 0.12);
  outline: 0;
  transform: translateY(-2px);
}

.alumni-resource-gallery-cover {
  position: relative;
  display: flex;
  min-height: 154px;
  align-items: stretch;
  justify-content: space-between;
  padding: 12px;
  overflow: hidden;
  background-color: #dce9ee;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  flex-direction: column;
}

.alumni-resource-gallery-topline,
.alumni-resource-gallery-heading {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.alumni-resource-gallery-topline > small {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-resource-gallery-topline .alumni-resource-tag {
  color: #eef9ff;
  background: rgba(16, 52, 71, 0.56);
  border-color: rgba(255, 255, 255, 0.24);
}

.alumni-resource-gallery-heading {
  display: block;
  padding-top: 26px;
}

.alumni-resource-gallery-heading strong,
.alumni-resource-gallery-heading small {
  display: block;
  overflow: hidden;
  color: #ffffff;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
}

.alumni-resource-gallery-heading strong {
  font-size: 16px;
  font-weight: 500;
  line-height: 23px;
  white-space: nowrap;
}

.alumni-resource-gallery-heading small {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 11px;
  line-height: 17px;
  white-space: nowrap;
}

.alumni-resource-gallery-body {
  display: flex;
  min-width: 0;
  padding: 12px 13px 10px;
  flex: 1;
  flex-direction: column;
}

.alumni-resource-gallery-body .alumni-resource-summary {
  min-height: 38px;
  color: #627581;
}

.alumni-resource-gallery-body .alumni-resource-tags {
  margin-top: 8px;
}

.alumni-resource-gallery-footer {
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 8px 12px;
  color: #8a99a2;
  border-top: 1px solid #edf1f3;
  font-size: 10px;
  line-height: 16px;
}

.alumni-resource-gallery-footer > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-resource-gallery-footer b {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  color: #2876a7;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.alumni-resource-gallery-footer .icon {
  width: 13px;
  height: 13px;
}

/* Table mode stays operational: short rows, soft type gradients, and no heavy cards. */
.alumni-plaza-table {
  min-width: 980px;
}

.alumni-plaza-table tbody td {
  height: 62px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.alumni-resource-table-title {
  min-width: 255px;
  max-width: 360px;
  grid-template-columns: 94px minmax(0, 1fr);
  gap: 9px;
}

.alumni-resource-table-thumb {
  width: 94px;
  height: 46px;
  border-radius: 3px;
}

.alumni-resource-table-thumb > i {
  width: 25px;
  height: 25px;
  margin-left: 9px;
}

.alumni-resource-table-thumb .icon {
  width: 14px;
  height: 14px;
}

.alumni-resource-table-thumb.is-company {
  background: linear-gradient(90deg, #eff7fc 0%, #cfe5f1 56%, #9ec7dd 100%);
}

.alumni-resource-table-thumb.is-service {
  background: linear-gradient(90deg, #eef8f4 0%, #cfebdf 58%, #95cdb6 100%);
}

.alumni-resource-table-thumb.is-product {
  background: linear-gradient(90deg, #fff9ef 0%, #f5dfb8 58%, #d9ad68 100%);
}

.alumni-resource-table-thumb.is-event {
  background: linear-gradient(90deg, #f7f2fb 0%, #decdec 57%, #b596d0 100%);
}

.alumni-resource-table-thumb.is-offer {
  background: linear-gradient(90deg, #fff4f0 0%, #f4d3c8 58%, #dca38f 100%);
}

.alumni-resource-table-thumb > b {
  font-size: 10px;
}

.alumni-plaza-metric b {
  font-size: 12px;
}

/* Editorial resource detail built from actual local assets and first-person copy. */
.alumni-publisher-article {
  color: #51636e;
}

.alumni-article-head {
  margin-bottom: 11px;
}

.alumni-article-head > span {
  color: #8c9aa3;
  font-size: 11px;
}

.alumni-article-head h5 {
  margin: 4px 0 0;
  color: #2f4958;
  font-size: 17px;
  font-weight: 500;
  line-height: 27px;
}

.alumni-article-hero,
.alumni-article-figure {
  margin: 0 0 13px;
}

.alumni-article-hero {
  overflow: hidden;
  background: #e8eef1;
  border-radius: 3px;
}

.alumni-article-hero img {
  display: block;
  width: 100%;
  height: 205px;
  object-fit: cover;
}

.alumni-article-hero figcaption,
.alumni-article-figure figcaption {
  padding: 7px 9px;
  color: #84929b;
  background: #f7f9fa;
  font-size: 10px;
  line-height: 16px;
}

.alumni-publisher-article > p:not(.alumni-rich-lead),
.alumni-publisher-article .alumni-article-closing > p {
  margin: 0 0 12px;
  color: #5d6d76;
  font-size: 13px;
  line-height: 23px;
}

.alumni-publisher-article h5 {
  margin: 17px 0 7px;
  color: #3e5563;
  font-size: 14px;
  font-weight: 500;
}

.alumni-article-figure {
  overflow: hidden;
  border: 1px solid #e2e9ed;
  border-radius: 3px;
}

.alumni-article-figure img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
}

.alumni-article-list {
  margin: 12px 0;
  padding: 11px 13px;
  background: #f7fafb;
  border: 1px solid #e2ecef;
  border-radius: 3px;
}

.alumni-article-list strong {
  color: #456373;
  font-size: 12px;
  font-weight: 500;
}

.alumni-article-list ul {
  margin: 7px 0 0;
  padding-left: 18px;
}

.alumni-article-list li {
  margin: 4px 0;
  color: #667782;
  font-size: 12px;
  line-height: 19px;
}

.alumni-publisher-article blockquote {
  margin: 13px 0;
  padding: 8px 12px;
  color: #4e7184;
  background: #f1f8fb;
  border-left: 3px solid #6faed2;
  font-size: 13px;
  line-height: 22px;
}

.alumni-article-closing {
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid #e7edef;
}

.alumni-media-preview-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #dce7eb;
  border-radius: 3px;
}

.alumni-media-preview-photo img {
  display: block;
  width: 100%;
  max-height: 280px;
  object-fit: cover;
}

.alumni-media-preview-photo .alumni-media-preview-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Publication and connection records show a small amount of useful context without
   turning normal alumni pages into a management dashboard. */
.alumni-publication-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #dfe8ec;
  border-radius: 4px;
}

.alumni-publication-overview > span {
  display: grid;
  min-height: 66px;
  align-content: center;
  gap: 2px;
  padding: 8px 15px;
  border-right: 1px solid #e7edef;
}

.alumni-publication-overview > span:last-child { border-right: 0; }
.alumni-publication-overview b { color: #2f5267; font-size: 19px; font-weight: 500; }
.alumni-publication-overview small { color: #82919a; font-size: 11px; }
.alumni-publication-note,
.alumni-connection-summary { display: block; max-width: 330px; overflow: hidden; color: #667782; font-size: 11px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.alumni-publications-panel .panel-header { gap: 12px; }
.alumni-publication-tabs small { color: inherit; font-size: 10px; }
.alumni-return-note { margin-bottom: 12px; padding: 9px 11px; color: #8a6333; background: #fffaf1; border: 1px solid #f0dfc0; border-radius: 3px; }
.alumni-return-note strong { font-size: 12px; font-weight: 500; }
.alumni-return-note p { margin: 4px 0 0; font-size: 12px; line-height: 19px; }

.alumni-connection-guidance {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  color: #5a717e;
  background: #f8fbfc;
  border: 1px solid #d7e7ee;
  border-left: 3px solid #5f9fc4;
  border-radius: 3px;
}

.alumni-connection-guidance > span {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  color: #3179a4;
  background: #eaf5fa;
  border-radius: 50%;
}

.alumni-connection-guidance .icon { width: 16px; height: 16px; }
.alumni-connection-guidance strong { color: #405e6e; font-size: 13px; font-weight: 500; }
.alumni-connection-guidance p { margin: 3px 0 0; color: #72838d; font-size: 11px; line-height: 18px; }

/* Activity ledger and detail have a warmer, event-oriented rhythm while keeping the
   base E10 control styles and compact data density. */
.alumni-activity-ledger-intro {
  display: flex;
  min-height: 94px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
  color: #49616f;
  background: #fbfcfd;
  border: 1px solid #dbe7ec;
  border-left: 4px solid #6b9abb;
}

.alumni-activity-ledger-intro strong { display: block; margin-top: 3px; color: #334e60; font-size: 18px; font-weight: 500; line-height: 27px; }
.alumni-activity-ledger-intro p { margin: 4px 0 0; color: #73838d; font-size: 12px; line-height: 19px; }
.alumni-activity-ledger-stats { display: flex; flex: 0 0 auto; }
.alumni-activity-ledger-stats > span { display: grid; min-width: 76px; gap: 3px; padding: 0 17px; border-left: 1px solid #e2eaee; }
.alumni-activity-ledger-stats b { color: #367aa5; font-size: 21px; font-weight: 500; }
.alumni-activity-ledger-stats small { color: #8998a1; font-size: 10px; }

.alumni-ledger-filter { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.alumni-ledger-filter > span { color: #87959e; font-size: 11px; }
.alumni-activity-tabs { display: flex; gap: 3px; }

.alumni-ledger-activity-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}

.alumni-ledger-activity-card {
  display: flex;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: #425866;
  background: #ffffff;
  border: 1px solid #dce7eb;
  border-radius: 4px;
  cursor: pointer;
  flex-direction: column;
  text-align: left;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.alumni-ledger-activity-card:hover,
.alumni-ledger-activity-card:focus-visible { border-color: #8db8d0; box-shadow: 0 8px 18px rgba(42, 94, 120, 0.11); outline: none; transform: translateY(-2px); }
.alumni-ledger-activity-cover { display: flex; height: 132px; align-items: flex-start; justify-content: space-between; padding: 11px; background-position: center; background-size: cover; }
.alumni-ledger-activity-date { display: grid; min-width: 46px; padding: 4px 6px; color: #ffffff; background: rgba(12, 37, 49, 0.62); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 3px; text-align: center; }
.alumni-ledger-activity-date b { font-size: 16px; font-weight: 500; line-height: 19px; }
.alumni-ledger-activity-date small { color: rgba(255, 255, 255, 0.8); font-size: 9px; line-height: 14px; }
.alumni-ledger-activity-cover .status-tag { color: #ffffff; background: rgba(16, 49, 66, 0.62); border-color: rgba(255, 255, 255, 0.2); }
.alumni-ledger-activity-copy { display: flex; min-width: 0; min-height: 139px; padding: 12px 13px 9px; flex-direction: column; }
.alumni-ledger-activity-category { color: #6091ad; font-size: 10px; line-height: 16px; }
.alumni-ledger-activity-copy strong { display: block; margin-top: 3px; overflow: hidden; color: #364f5f; font-size: 15px; font-weight: 500; line-height: 22px; text-overflow: ellipsis; white-space: nowrap; }
.alumni-ledger-activity-copy > small { display: block; margin-top: 3px; overflow: hidden; color: #84929a; font-size: 11px; line-height: 17px; text-overflow: ellipsis; white-space: nowrap; }
.alumni-ledger-activity-copy > span:not(.alumni-ledger-activity-category) { display: flex; min-width: 0; align-items: center; gap: 4px; margin-top: 6px; overflow: hidden; color: #687a84; font-size: 10px; line-height: 15px; text-overflow: ellipsis; white-space: nowrap; }
.alumni-ledger-activity-copy .icon { width: 12px; height: 12px; flex: 0 0 12px; color: #8eacba; }
.alumni-ledger-activity-foot { display: flex; min-height: 40px; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px; border-top: 1px solid #edf1f3; }
.alumni-ledger-activity-foot > span { display: flex; min-width: 0; gap: 4px; overflow: hidden; }
.alumni-ledger-activity-foot b { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 2px; color: #2876a7; font-size: 11px; font-weight: 500; white-space: nowrap; }
.alumni-ledger-activity-foot .icon { width: 13px; height: 13px; }

.alumni-activity-detail { display: grid; gap: 14px; }
.alumni-activity-detail-hero { position: relative; display: flex; min-height: 272px; align-items: flex-end; justify-content: space-between; gap: 22px; padding: 27px 30px; overflow: hidden; color: #ffffff; background-color: #486a78; background-position: center; background-size: cover; border-radius: 4px; }
.alumni-activity-detail-hero-copy { max-width: 700px; }
.alumni-activity-detail-hero .alumni-eyebrow { color: rgba(255, 255, 255, 0.72); }
.alumni-activity-detail-hero h2 { margin: 6px 0 6px; color: #ffffff; font-size: 27px; font-weight: 500; line-height: 39px; }
.alumni-activity-detail-hero p { margin: 0 0 13px; color: rgba(255, 255, 255, 0.83); font-size: 13px; line-height: 21px; }
.alumni-activity-detail-hero-copy > div { display: flex; align-items: center; gap: 5px; margin-top: 5px; color: rgba(255, 255, 255, 0.83); font-size: 12px; line-height: 18px; }
.alumni-activity-detail-hero-copy .icon { width: 14px; height: 14px; }
.alumni-activity-detail-hero-action { flex: 0 0 auto; }
.alumni-activity-detail-hero-action .btn-primary { color: #2b6e99; background: #ffffff; border-color: #ffffff; }
.alumni-activity-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 244px; gap: 14px; }
.alumni-activity-detail-main { display: grid; gap: 14px; min-width: 0; }
.alumni-activity-article,
.alumni-activity-agenda,
.alumni-activity-gallery { padding: 19px 22px; background: #ffffff; border: 1px solid #dfe8ec; border-radius: 4px; }
.alumni-activity-article h3,
.alumni-activity-agenda h3,
.alumni-activity-gallery h3 { margin: 4px 0 10px; color: #3b5565; font-size: 18px; font-weight: 500; line-height: 28px; }
.alumni-activity-article p:not(.alumni-rich-lead) { margin: 0 0 10px; color: #64757e; font-size: 13px; line-height: 23px; }
.alumni-activity-article blockquote { margin: 13px 0 0; padding: 9px 13px; color: #52768a; background: #f0f8fb; border-left: 3px solid #6fa9ca; font-size: 13px; line-height: 22px; }
.alumni-activity-agenda ol { margin: 14px 0 0; padding: 0; list-style: none; }
.alumni-activity-agenda li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 0 0 15px; }
.alumni-activity-agenda li + li { padding-top: 14px; border-top: 1px solid #edf1f3; }
.alumni-activity-agenda time { color: #4b8bb1; font-size: 13px; font-weight: 500; line-height: 21px; }
.alumni-activity-agenda strong { display: block; color: #465d6a; font-size: 13px; font-weight: 500; line-height: 20px; }
.alumni-activity-agenda small { display: block; margin-top: 2px; color: #98a5ac; font-size: 10px; }
.alumni-activity-agenda p { margin: 4px 0 0; color: #71828b; font-size: 12px; line-height: 19px; }
.alumni-activity-gallery > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.alumni-activity-gallery figure { margin: 0; overflow: hidden; background: #f3f6f7; border: 1px solid #e1e9ec; border-radius: 3px; }
.alumni-activity-gallery img { display: block; width: 100%; height: 154px; object-fit: cover; }
.alumni-activity-gallery figcaption { padding: 7px 8px; color: #7c8b93; font-size: 10px; line-height: 16px; }
.alumni-activity-detail-aside { display: grid; align-content: start; gap: 9px; }
.alumni-activity-detail-aside section { display: grid; gap: 5px; padding: 13px; background: #ffffff; border: 1px solid #dfe8ec; border-radius: 4px; }
.alumni-activity-detail-aside section > span { color: #94a0a7; font-size: 10px; }
.alumni-activity-detail-aside strong { color: #48606d; font-size: 13px; font-weight: 500; line-height: 20px; }
.alumni-activity-detail-aside small { color: #778890; font-size: 11px; line-height: 18px; }

/* Reuse the E10 recipe workflow components; custom selectors only support the
   activity-specific buttons and diagram in this demo. */
.alumni-workflow-detail-page { display: flex; min-height: calc(100vh - 138px); padding: 0; overflow: hidden; }
.alumni-e10-workflow { display: flex; width: 100%; min-height: 0; flex: 1; flex-direction: column; overflow: hidden; border: 1px solid #dfe3e6; }
.alumni-e10-workflow .workflow-form-toolbar { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 14px; padding: 0 14px; background: #ffffff; border-bottom: 1px solid #e5e5e5; }
.alumni-e10-workflow .toolbar-buttons,
.alumni-workflow-actions { display: flex; align-items: center; gap: 7px; }
.alumni-e10-workflow .toolbar-tabs { display: flex; }
.alumni-e10-workflow .toolbar-tabs button { height: 27px; margin-right: 24px; padding: 0; color: #777; background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer; font-size: 13px; }
.alumni-e10-workflow .toolbar-tabs button.active { color: var(--primary); border-bottom-color: var(--primary); }
.alumni-e10-workflow .workflow-workspace { min-height: 540px; }
.alumni-e10-workflow .request-cell-wide { display: grid; width: 100%; grid-template-columns: 128px minmax(0, 1fr); }
.alumni-e10-workflow .request-section .request-cell-wide + .request-cell-wide { border-top: 0; }
.alumni-e10-workflow .request-value-block { white-space: normal; }
.alumni-e10-workflow .attachment-row .btn { flex: 0 0 auto; }
.alumni-e10-workflow .workflow-side-tabs button { color: #777; }
.alumni-e10-workflow .workflow-side-tabs button.active { color: var(--primary); }
.alumni-approval-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0 0 12px; overflow: hidden; background: #e9eef1; border: 1px solid #e0e7ea; border-radius: 3px; }
.alumni-approval-summary > span { display: grid; gap: 3px; padding: 9px 10px; background: #f8fafb; }
.alumni-approval-summary small { color: #94a0a6; font-size: 10px; }
.alumni-approval-summary strong { overflow: hidden; color: #526772; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.alumni-modal-inline-tools { display: flex; align-items: center; gap: 6px; margin-top: -2px; }
.alumni-workflow-diagram-content { padding: 20px 24px 24px; }
.alumni-workflow-diagram-canvas { display: flex; min-height: 190px; align-items: center; justify-content: center; gap: 0; padding: 22px; overflow: auto; background: #f7f8f9; border: 1px solid #e6e8ea; }
.alumni-workflow-diagram-node { display: grid; min-width: 122px; min-height: 88px; place-items: center; gap: 4px; padding: 11px; color: #849097; background: #ffffff; border: 1px solid #d9dee1; border-radius: 2px; text-align: center; }
.alumni-workflow-diagram-node > span { display: grid; width: 21px; height: 21px; place-items: center; color: #ffffff; background: #bdc7cd; border-radius: 50%; font-size: 11px; }
.alumni-workflow-diagram-node strong { color: inherit; font-size: 12px; font-weight: 500; }
.alumni-workflow-diagram-node small { color: #9ca7ad; font-size: 10px; }
.alumni-workflow-diagram-node.done { color: #4d839f; border-color: #a8c8d7; }
.alumni-workflow-diagram-node.done > span { background: #72a9c4; }
.alumni-workflow-diagram-node.active { color: #2270a5; background: #f1f9fd; border-color: #5fa5cd; box-shadow: 0 0 0 3px rgba(86, 157, 198, 0.1); }
.alumni-workflow-diagram-node.active > span { background: #2379af; }
.alumni-workflow-diagram-line { width: 34px; height: 1px; flex: 0 0 34px; background: #cfd7db; }
.alumni-workflow-diagram-content .inline-message { margin-top: 14px; }

@media (max-width: 1120px) {
  .alumni-resource-gallery,
  .alumni-ledger-activity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alumni-activity-detail-layout { grid-template-columns: minmax(0, 1fr); }
  .alumni-activity-detail-aside { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .alumni-e10-workflow .workflow-workspace { grid-template-columns: minmax(0, 1fr) 270px; }
}

@media (max-width: 760px) {
  .alumni-resource-gallery,
  .alumni-ledger-activity-grid { grid-template-columns: minmax(0, 1fr); }
  .alumni-resource-gallery-card { min-height: 276px; }
  .alumni-resource-gallery-cover { min-height: 145px; }
  .alumni-publication-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alumni-publication-overview > span:nth-child(2) { border-right: 0; }
  .alumni-publication-overview > span:nth-child(-n+2) { border-bottom: 1px solid #e7edef; }
  .alumni-connection-guidance { align-items: flex-start; }
  .alumni-activity-ledger-intro { align-items: flex-start; flex-direction: column; }
  .alumni-activity-ledger-stats { width: 100%; }
  .alumni-activity-ledger-stats > span { flex: 1; }
  .alumni-activity-detail-hero { min-height: 260px; align-items: flex-start; padding: 22px 20px; flex-direction: column; }
  .alumni-activity-detail-hero h2 { font-size: 22px; line-height: 33px; }
  .alumni-activity-detail-hero-action { margin-top: auto; }
  .alumni-activity-detail-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alumni-e10-workflow .workflow-form-toolbar { align-items: flex-start; padding: 10px; flex-direction: column; }
  .alumni-e10-workflow .toolbar-title strong { max-width: calc(100vw - 44px); }
  .alumni-e10-workflow .toolbar-buttons,
  .alumni-workflow-actions { width: 100%; flex-wrap: wrap; }
  .alumni-e10-workflow .workflow-workspace { display: flex; padding: 8px; flex-direction: column; overflow: visible; }
  .alumni-e10-workflow .workflow-paper { min-height: auto; overflow: visible; }
  .alumni-e10-workflow .workflow-side-panel { min-height: 280px; max-height: 380px; }
  .alumni-approval-summary { grid-template-columns: minmax(0, 1fr); }
  .alumni-workflow-diagram-canvas { align-items: stretch; justify-content: flex-start; flex-direction: column; }
  .alumni-workflow-diagram-node { width: 100%; }
  .alumni-workflow-diagram-line { width: 1px; height: 21px; min-height: 21px; margin-left: 50%; }
}

@media (max-width: 480px) {
  .alumni-resource-gallery-footer b { max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
  .alumni-activity-gallery > div,
  .alumni-activity-detail-aside { grid-template-columns: minmax(0, 1fr); }
  .alumni-activity-article,
  .alumni-activity-agenda,
  .alumni-activity-gallery { padding: 15px; }
  .alumni-article-hero img { height: 168px; }
}

/* Dynamic role navigation keeps its identity line separate from the vertical menu. */
body:not(.e10-workflow-focus-route) .app-shell .alumni-role-nav {
  display: block;
  padding: 0 0 10px;
  color: #555e66;
  background: transparent;
  border: 0;
  border-radius: 0;
}

body:not(.e10-workflow-focus-route) .app-shell .alumni-role-nav-header {
  display: flex;
  min-width: 0;
  min-height: 31px;
  align-items: center;
  gap: 7px;
  padding: 0 15px;
}

body:not(.e10-workflow-focus-route) .app-shell .alumni-role-nav .nav-group-title {
  min-width: 0;
  height: auto;
  padding: 0;
  overflow: hidden;
  color: #8c949b;
  font-size: 11px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.e10-workflow-focus-route) .app-shell .alumni-role-nav .alumni-role-nav-meta {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  color: #a0a6ab;
  font-size: 10px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.e10-workflow-focus-route) .app-shell .alumni-role-nav-items {
  display: block;
}

@media (max-width: 680px) {
  body:not(.e10-workflow-focus-route) .app-shell .alumni-role-nav-header {
    min-height: 34px;
  }

  body:not(.e10-workflow-focus-route) .app-shell .alumni-role-nav .alumni-role-nav-meta {
    width: auto;
    margin-left: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
 * Alumni shell and home refinements
 * This final layer deliberately changes only the shell presentation. Workflow
 * and form surfaces continue to use the existing E10 recipes above.
 * -------------------------------------------------------------------------- */

body:not(.e10-workflow-focus-route) {
  --alumni-warm: #b8864c;
  --alumni-warm-soft: #fbf7f1;
  --alumni-light-nav: #ffffff;
  --alumni-light-nav-hover: #f4f8fb;
  --alumni-light-nav-active: #eaf4fb;
}

/* Compact brand and tool bar: navigation lives in the left rail. */
body:not(.e10-workflow-focus-route) .app-shell .topbar {
  color: #ffffff;
  background: #0470c1;
  box-shadow: 0 1px 2px rgba(0, 55, 93, 0.14);
}

body:not(.e10-workflow-focus-route) .app-shell .topbar-brand {
  width: 264px;
  min-width: 264px;
  padding: 0 17px;
  background: rgba(0, 0, 0, 0.055);
}

body:not(.e10-workflow-focus-route) .app-shell .brand-trigger {
  position: relative;
  min-width: 0;
  gap: 0;
}

body:not(.e10-workflow-focus-route) .app-shell .brand-trigger .ecology-wordmark {
  width: 0;
  overflow: hidden;
  font-size: 0;
  white-space: nowrap;
}

body:not(.e10-workflow-focus-route) .app-shell .brand-trigger::before {
  overflow: hidden;
  color: #ffffff;
  content: "兰州理工大学上海校友会";
  font-family: Arial, "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.e10-workflow-focus-route) .app-shell .brand-trigger::after {
  width: 1px;
  height: 17px;
  margin: 0 8px 0 10px;
  background: rgba(255, 255, 255, 0.32);
  content: "";
}

body:not(.e10-workflow-focus-route) .app-shell .brand-trigger .brand-chevron {
  display: block;
  width: 13px;
  height: 13px;
  color: rgba(255, 255, 255, 0.9);
}

body:not(.e10-workflow-focus-route) .app-shell .top-modules {
  display: none !important;
}

body:not(.e10-workflow-focus-route) .app-shell .topbar-actions {
  min-width: 0;
  margin-left: auto;
}

body:not(.e10-workflow-focus-route) .app-shell .topbar-icon {
  width: 44px;
  min-width: 44px;
}

body:not(.e10-workflow-focus-route) .app-shell .topbar-actions > .topbar-icon > .icon {
  width: 18px;
  height: 18px;
}

body:not(.e10-workflow-focus-route) .app-shell .topbar-action-divider {
  height: 18px;
  margin: 0 4px;
  background: rgba(255, 255, 255, 0.26);
}

body:not(.e10-workflow-focus-route) .app-shell .account-wrap {
  height: 50px;
}

body:not(.e10-workflow-focus-route) .app-shell .account-button {
  width: 50px;
  min-width: 50px;
  justify-content: center;
  gap: 0;
  padding: 0;
}

body:not(.e10-workflow-focus-route) .app-shell .account-button .account-copy,
body:not(.e10-workflow-focus-route) .app-shell .account-button > .icon {
  display: none;
}

body:not(.e10-workflow-focus-route) .app-shell .account-avatar {
  width: 30px;
  height: 30px;
  color: #ffffff;
  background: #5c9ad0;
  border-color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
}

/* Account menu also accommodates a role-specific menu rendered by the app. */
body:not(.e10-workflow-focus-route) :is(.account-menu, .alumni-role-menu) {
  width: min(304px, calc(100vw - 16px));
  color: #555555;
  background: #ffffff;
  border: 1px solid #dfe4e8;
  border-top: 0;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.14);
}

body:not(.e10-workflow-focus-route) :is(.account-menu, .alumni-role-menu) .account-menu-header,
body:not(.e10-workflow-focus-route) .alumni-role-menu-header {
  min-height: 70px;
  padding: 12px 14px;
  background: #f8fafb;
  border-bottom: 1px solid #e9edef;
}

body:not(.e10-workflow-focus-route) :is(.account-menu, .alumni-role-menu) .account-menu-header strong,
body:not(.e10-workflow-focus-route) .alumni-role-menu-header strong {
  color: #333333;
  font-size: 14px;
  font-weight: 500;
}

body:not(.e10-workflow-focus-route) :is(.account-menu, .alumni-role-menu) .account-menu-header small,
body:not(.e10-workflow-focus-route) .alumni-role-menu-header small {
  margin-top: 3px;
  color: #999999;
  font-size: 11px;
}

body:not(.e10-workflow-focus-route) .role-switcher,
body:not(.e10-workflow-focus-route) .alumni-role-menu-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 10px 12px;
  background: #ffffff;
  border-bottom: 1px solid #eeeeee;
}

body:not(.e10-workflow-focus-route) .role-switcher > span,
body:not(.e10-workflow-focus-route) .alumni-role-menu-label {
  grid-column: 1 / -1;
  margin-bottom: 1px;
  color: #8a9097;
  font-size: 11px;
  line-height: 17px;
}

body:not(.e10-workflow-focus-route) .role-switcher button,
body:not(.e10-workflow-focus-route) .alumni-role-menu-option {
  display: flex;
  min-width: 0;
  height: 29px;
  align-items: center;
  justify-content: flex-start;
  padding: 0 8px;
  overflow: hidden;
  color: #5b6470;
  background: #f8fafb;
  border: 1px solid #e2e8ec;
  border-radius: 3px;
  font-size: 11px;
  line-height: 27px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.e10-workflow-focus-route) .role-switcher button:hover,
body:not(.e10-workflow-focus-route) .role-switcher button:focus-visible,
body:not(.e10-workflow-focus-route) .role-switcher button.is-active,
body:not(.e10-workflow-focus-route) .alumni-role-menu-option:hover,
body:not(.e10-workflow-focus-route) .alumni-role-menu-option:focus-visible,
body:not(.e10-workflow-focus-route) .alumni-role-menu-option.is-active {
  color: #0470c1;
  background: #edf6fc;
  border-color: #a9cfe8;
  outline: none;
}

body:not(.e10-workflow-focus-route) .account-menu-list {
  padding: 5px 0;
}

body:not(.e10-workflow-focus-route) .account-menu-list button {
  min-height: 34px;
  padding: 6px 14px;
}

/* Flat light navigation keeps the E10 information density without a heavy rail. */
body:not(.e10-workflow-focus-route) .app-shell .sidebar,
body:not(.e10-workflow-focus-route) .app-shell .light-nav {
  width: 214px;
  color: #555555;
  background: var(--alumni-light-nav);
  border-right: 1px solid #e2e6e9;
  box-shadow: none;
}

body:not(.e10-workflow-focus-route) .app-shell .app-nav,
body:not(.e10-workflow-focus-route) .app-shell .light-nav-body {
  padding: 11px 0 36px;
}

body:not(.e10-workflow-focus-route) .app-shell .nav-group + .nav-group:not([hidden]) {
  margin-top: 12px;
}

body:not(.e10-workflow-focus-route) .app-shell .nav-group-title,
body:not(.e10-workflow-focus-route) .app-shell .light-nav-heading {
  height: 26px;
  padding: 0 15px;
  color: #9b9b9b;
  font-size: 11px;
  line-height: 26px;
}

body:not(.e10-workflow-focus-route) .app-shell .nav-item,
body:not(.e10-workflow-focus-route) .app-shell .light-nav-item {
  position: relative;
  width: 100%;
  height: 35px;
  gap: 10px;
  padding: 0 14px 0 18px;
  color: #555e66;
  background: transparent;
  border-radius: 0;
  font-size: 13px;
  line-height: 35px;
}

body:not(.e10-workflow-focus-route) .app-shell .nav-item .icon,
body:not(.e10-workflow-focus-route) .app-shell .light-nav-item .icon {
  width: 16px;
  height: 16px;
  color: #89939c;
}

body:not(.e10-workflow-focus-route) .app-shell .nav-item:hover,
body:not(.e10-workflow-focus-route) .app-shell .nav-item:focus-visible,
body:not(.e10-workflow-focus-route) .app-shell .light-nav-item:hover,
body:not(.e10-workflow-focus-route) .app-shell .light-nav-item:focus-visible {
  color: #0470c1;
  background: var(--alumni-light-nav-hover);
  outline: none;
}

body:not(.e10-workflow-focus-route) .app-shell .nav-item.active,
body:not(.e10-workflow-focus-route) .app-shell .nav-item[aria-current="page"],
body:not(.e10-workflow-focus-route) .app-shell .light-nav-item.is-active,
body:not(.e10-workflow-focus-route) .app-shell .light-nav-item[aria-current="page"] {
  color: #0470c1;
  background: var(--alumni-light-nav-active);
  font-weight: 500;
}

body:not(.e10-workflow-focus-route) .app-shell .nav-item.active::before,
body:not(.e10-workflow-focus-route) .app-shell .nav-item[aria-current="page"]::before,
body:not(.e10-workflow-focus-route) .app-shell .light-nav-item.is-active::before,
body:not(.e10-workflow-focus-route) .app-shell .light-nav-item[aria-current="page"]::before {
  width: 3px;
  background: #0470c1;
}

body:not(.e10-workflow-focus-route) .app-shell .nav-item.active .icon,
body:not(.e10-workflow-focus-route) .app-shell .nav-item[aria-current="page"] .icon,
body:not(.e10-workflow-focus-route) .app-shell .light-nav-item.is-active .icon,
body:not(.e10-workflow-focus-route) .app-shell .light-nav-item[aria-current="page"] .icon {
  color: #0470c1;
}

body:not(.e10-workflow-focus-route) .app-shell .nav-badge {
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  color: #93651d;
  background: #fff5e5;
  border: 1px solid #f0d49f;
  border-radius: 9px;
  font-size: 10px;
  line-height: 15px;
}

body:not(.e10-workflow-focus-route) .app-shell .main-content {
  margin-left: 214px;
}

/* Smaller page chrome lets the service content retain the emphasis. */
body:not(.e10-workflow-focus-route) .app-shell .page-header {
  min-height: 48px;
  height: 48px;
  padding: 0 12px 0 15px;
  background: #ffffff;
  border-bottom-color: #e5e7e9;
}

body:not(.e10-workflow-focus-route) .app-shell .page-header h1 {
  color: #333333;
  font-size: 15px;
  font-weight: 500;
}

body:not(.e10-workflow-focus-route) .app-shell .page-header-actions .data-period {
  display: none;
}

body:not(.e10-workflow-focus-route) .app-shell .page-header-actions .icon-button {
  width: 30px;
  height: 30px;
  color: #78828b;
}

body:not(.e10-workflow-focus-route) .app-shell .page-header-actions .icon-button:hover,
body:not(.e10-workflow-focus-route) .app-shell .page-header-actions .icon-button:focus-visible {
  color: #0470c1;
  background: #f1f7fb;
}

body:not(.e10-workflow-focus-route) .app-shell .view-root {
  height: calc(100vh - 98px);
  padding: 12px;
}

/* More applications is role aware at the app level; this provides the visual contract. */
body:not(.e10-workflow-focus-route) .app-drawer {
  width: min(474px, calc(100vw - 22px));
  color: #555555;
  border-left-color: #dde3e7;
  box-shadow: -5px 0 16px rgba(17, 39, 56, 0.16);
}

body:not(.e10-workflow-focus-route) .app-drawer-header {
  min-height: 56px;
  padding: 0 14px 0 16px;
  border-bottom-color: #e4e8eb;
}

body:not(.e10-workflow-focus-route) .app-drawer-header h2 {
  color: #333333;
  font-size: 15px;
}

body:not(.e10-workflow-focus-route) .app-drawer-header > div > span {
  color: #9a9a9a;
  font-size: 10px;
}

body:not(.e10-workflow-focus-route) .app-drawer-body {
  padding: 0 14px 18px;
}

body:not(.e10-workflow-focus-route) .app-drawer-section,
body:not(.e10-workflow-focus-route) .alumni-app-drawer-section {
  padding-top: 14px;
}

body:not(.e10-workflow-focus-route) .app-drawer-section + .app-drawer-section,
body:not(.e10-workflow-focus-route) .alumni-app-drawer-section + .alumni-app-drawer-section {
  margin-top: 10px;
  border-top-color: #eceff1;
}

body:not(.e10-workflow-focus-route) .app-drawer-section > h3,
body:not(.e10-workflow-focus-route) .alumni-app-drawer-section > h3 {
  min-height: 24px;
  color: #666666;
  font-size: 12px;
  font-weight: 500;
}

body:not(.e10-workflow-focus-route) .app-drawer .app-grid,
body:not(.e10-workflow-focus-route) .alumni-app-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
  border: 0;
}

body:not(.e10-workflow-focus-route) .app-drawer .app-entry,
body:not(.e10-workflow-focus-route) .alumni-app-entry {
  display: flex;
  min-height: 62px;
  grid-template-rows: none;
  align-items: center;
  justify-items: unset;
  gap: 9px;
  padding: 9px;
  color: #555555;
  background: #ffffff;
  border: 1px solid #e2e6e9;
  border-radius: 4px;
  text-align: left;
}

body:not(.e10-workflow-focus-route) .app-drawer .app-entry:hover,
body:not(.e10-workflow-focus-route) .app-drawer .app-entry:focus-visible,
body:not(.e10-workflow-focus-route) .alumni-app-entry:hover,
body:not(.e10-workflow-focus-route) .alumni-app-entry:focus-visible {
  color: #0470c1;
  background: #f5f9fc;
  border-color: #b8d8eb;
  outline: none;
}

body:not(.e10-workflow-focus-route) .app-drawer .app-entry-icon,
body:not(.e10-workflow-focus-route) .alumni-app-entry-icon {
  display: inline-flex;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  align-items: center;
  justify-content: center;
  color: #267db9;
  background: #edf6fc;
  border: 1px solid #d5e7f3;
  border-radius: 3px;
}

body:not(.e10-workflow-focus-route) .app-drawer .app-entry > span:last-child,
body:not(.e10-workflow-focus-route) .alumni-app-entry > span:last-child {
  min-width: 0;
}

body:not(.e10-workflow-focus-route) .app-drawer .app-entry strong,
body:not(.e10-workflow-focus-route) .app-drawer .app-entry small,
body:not(.e10-workflow-focus-route) .alumni-app-entry strong,
body:not(.e10-workflow-focus-route) .alumni-app-entry small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.e10-workflow-focus-route) .app-drawer .app-entry strong,
body:not(.e10-workflow-focus-route) .alumni-app-entry strong {
  color: #555555;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}

body:not(.e10-workflow-focus-route) .app-drawer .app-entry small,
body:not(.e10-workflow-focus-route) .alumni-app-entry small {
  margin-top: 1px;
  color: #999999;
  font-size: 10px;
  line-height: 15px;
}

body:not(.e10-workflow-focus-route) .app-drawer [data-role-hidden="true"],
body:not(.e10-workflow-focus-route) .app-drawer .is-role-hidden,
body:not(.e10-workflow-focus-route) .alumni-app-entry[hidden] {
  display: none !important;
}

/* School-alumni portal: an operational home, not a marketing landing page. */
.alumni-home {
  display: flex;
  min-width: 0;
  max-width: 1520px;
  margin: 0 auto;
  flex-direction: column;
  gap: 12px;
}

.alumni-home-welcome {
  position: relative;
  display: flex;
  min-height: 108px;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 19px 17px 21px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e2e5e7;
  border-radius: 4px;
}

.alumni-home-welcome::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: #0470c1;
  content: "";
}

.alumni-home-welcome-main {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 13px;
}

.alumni-home-welcome-icon {
  display: inline-flex;
  width: 45px;
  height: 45px;
  flex: 0 0 45px;
  align-items: center;
  justify-content: center;
  color: #a27139;
  background: var(--alumni-warm-soft, #fbf7f1);
  border: 1px solid #eadbc9;
  border-radius: 4px;
}

.alumni-home-welcome-icon .icon {
  width: 23px;
  height: 23px;
}

.alumni-home-welcome-copy {
  min-width: 0;
}

.alumni-home-welcome-kicker {
  display: block;
  margin-bottom: 3px;
  color: #8c949c;
  font-size: 10px;
  line-height: 16px;
}

.alumni-home-welcome h2,
.alumni-home-welcome-title {
  margin: 0;
  overflow: hidden;
  color: #333333;
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-home-welcome p,
.alumni-home-welcome-desc {
  max-width: 700px;
  margin: 3px 0 0;
  overflow: hidden;
  color: #7d858c;
  font-size: 12px;
  line-height: 19px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-home-welcome-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
}

.alumni-home-actions {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.alumni-home-action {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 84px;
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  color: #555555;
  background: #ffffff;
  border: 1px solid #e1e5e7;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

button.alumni-home-action {
  font: inherit;
}

.alumni-home-action:hover,
.alumni-home-action:focus-visible {
  background: #fcfdfe;
  border-color: #aacde5;
  box-shadow: 0 2px 8px rgba(4, 112, 193, 0.09);
  outline: none;
}

.alumni-home-action-icon {
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  color: #247ab5;
  background: #eef6fb;
  border: 1px solid #d6e7f2;
  border-radius: 4px;
}

.alumni-home-action-icon .icon {
  width: 18px;
  height: 18px;
}

.alumni-home-action.is-warm .alumni-home-action-icon,
.alumni-home-action[data-tone="warm"] .alumni-home-action-icon {
  color: #a57238;
  background: #fcf8f1;
  border-color: #ecdcc8;
}

.alumni-home-action-copy {
  display: block;
  min-width: 0;
}

.alumni-home-action strong,
.alumni-home-action-title {
  display: block;
  overflow: hidden;
  color: #444444;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-home-action small,
.alumni-home-action-desc {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #999999;
  font-size: 11px;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-home-action .alumni-home-action-arrow {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin-left: auto;
  color: #9ba3a9;
}

.alumni-home-content-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.8fr);
  gap: 12px;
}

.alumni-home-main,
.alumni-home-side {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 12px;
}

.alumni-home-panel {
  min-width: 0;
  background: #ffffff;
  border: 1px solid #e1e5e7;
  border-radius: 4px;
}

.alumni-home-panel-header {
  display: flex;
  min-height: 42px;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid #eceeef;
}

.alumni-home-panel-header h2,
.alumni-home-panel-header h3 {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  margin: 0;
  overflow: hidden;
  color: #4b4b4b;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-home-panel-header h2 .icon,
.alumni-home-panel-header h3 .icon {
  width: 16px;
  height: 16px;
  color: #4986b2;
}

.alumni-home-panel-header .btn-text,
.alumni-home-panel-header .panel-link {
  flex: 0 0 auto;
  color: #0470c1;
  font-size: 12px;
}

.alumni-home-panel-body {
  min-width: 0;
  padding: 10px 12px;
}

.alumni-activity-stack {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}

.alumni-activity-card {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 57px;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  color: #555555;
  background: #fafbfc;
  border: 1px solid #e9ecee;
  border-radius: 3px;
  text-align: left;
}

button.alumni-activity-card {
  font: inherit;
}

.alumni-activity-card:hover,
.alumni-activity-card:focus-visible {
  color: #555555;
  background: #f4f9fc;
  border-color: #bfdaea;
  outline: none;
}

.alumni-activity-card-icon,
.alumni-activity-card-avatar {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  color: #4d83aa;
  background: #edf6fb;
  border: 1px solid #d7e7f1;
  border-radius: 50%;
}

.alumni-activity-card-icon .icon,
.alumni-activity-card-avatar .icon {
  width: 15px;
  height: 15px;
}

.alumni-activity-card-copy {
  min-width: 0;
}

.alumni-activity-card strong,
.alumni-activity-card-title,
.alumni-activity-card-copy strong {
  display: block;
  overflow: hidden;
  color: #555555;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-activity-card small,
.alumni-activity-card-desc,
.alumni-activity-card-copy small,
.alumni-activity-card-copy span {
  display: block;
  overflow: hidden;
  color: #999999;
  font-size: 11px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-activity-card-time {
  color: #a0a6ab;
  font-size: 11px;
  line-height: 16px;
  white-space: nowrap;
}

.alumni-notice-list {
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.alumni-notice-list > li,
.alumni-notice-item {
  display: grid;
  min-width: 0;
  min-height: 39px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid #eeeeee;
}

.alumni-notice-list > li:last-child,
.alumni-notice-item:last-child {
  border-bottom: 0;
}

.alumni-notice-list a,
.alumni-notice-item-title {
  min-width: 0;
  overflow: hidden;
  color: #666666;
  font-size: 12px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-notice-list a:hover,
.alumni-notice-list a:focus-visible,
.alumni-notice-item-title:hover,
.alumni-notice-item-title:focus-visible {
  color: #0470c1;
  outline: none;
}

.alumni-notice-list time,
.alumni-notice-date {
  color: #a0a6ab;
  font-size: 10px;
  white-space: nowrap;
}

.alumni-notice-list .is-important::before,
.alumni-notice-item.is-important::before {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 6px;
  background: var(--alumni-warm, #b8864c);
  border-radius: 50%;
  content: "";
  vertical-align: 2px;
}

.alumni-home-resource-section {
  min-width: 0;
}

.alumni-home-resource-section .alumni-section-heading {
  min-height: 34px;
}

.alumni-home-resource-section .alumni-resource-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.alumni-home-resource-section .alumni-resource-card {
  min-height: 194px;
}

@media (max-width: 1120px) {
  body:not(.e10-workflow-focus-route) .app-shell .topbar-brand {
    width: 235px;
    min-width: 235px;
  }

  body:not(.e10-workflow-focus-route) .app-shell .topbar-icon {
    width: 40px;
    min-width: 40px;
  }

  .alumni-home-content-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.78fr);
  }

  .alumni-home-resource-section .alumni-resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  body:not(.e10-workflow-focus-route) .app-shell .sidebar,
  body:not(.e10-workflow-focus-route) .app-shell .light-nav {
    width: 202px;
  }

  body:not(.e10-workflow-focus-route) .app-shell .main-content {
    margin-left: 202px;
  }

  body:not(.e10-workflow-focus-route) .app-shell .topbar-brand {
    width: 218px;
    min-width: 218px;
  }

  body:not(.e10-workflow-focus-route) .app-shell .brand-trigger::before {
    font-size: 14px;
  }

  body:not(.e10-workflow-focus-route) .app-shell .topbar-actions > [data-route="messages"],
  body:not(.e10-workflow-focus-route) .app-shell .topbar-actions > [data-action="notifications"] {
    display: none;
  }

  .alumni-home-content-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .alumni-home-side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

@media (max-width: 680px) {
  body:not(.e10-workflow-focus-route) .app-shell .topbar-brand {
    width: auto;
    min-width: 0;
    padding: 0 8px;
    flex: 1 1 auto;
  }

  body:not(.e10-workflow-focus-route) .app-shell .mobile-nav-toggle {
    display: inline-flex !important;
    width: 31px;
    min-width: 31px;
    margin-right: 2px;
  }

  body:not(.e10-workflow-focus-route) .app-shell .brand-trigger::before {
    max-width: calc(100vw - 164px);
    font-size: 13px;
  }

  body:not(.e10-workflow-focus-route) .app-shell .brand-trigger::after,
  body:not(.e10-workflow-focus-route) .app-shell .brand-trigger .brand-chevron {
    display: none;
  }

  body:not(.e10-workflow-focus-route) .app-shell .topbar-actions > .topbar-icon:not(#moreAppsButton) {
    display: none;
  }

  body:not(.e10-workflow-focus-route) .app-shell .topbar-actions > #moreAppsButton,
  body:not(.e10-workflow-focus-route) .app-shell .account-button {
    width: 44px;
    min-width: 44px;
  }

  body:not(.e10-workflow-focus-route) .app-shell .account-avatar {
    width: 28px;
    height: 28px;
  }

  body:not(.e10-workflow-focus-route) .app-shell .sidebar,
  body:not(.e10-workflow-focus-route) .app-shell .light-nav {
    width: 226px;
    background: #ffffff;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.14);
  }

  body:not(.e10-workflow-focus-route) .app-shell .main-content {
    margin-left: 0;
  }

  body:not(.e10-workflow-focus-route) .app-shell .page-header {
    min-height: 46px;
    height: 46px;
    padding: 0 8px 0 11px;
  }

  body:not(.e10-workflow-focus-route) .app-shell .view-root {
    height: calc(100vh - 96px);
    padding: 8px;
  }

  body:not(.e10-workflow-focus-route) :is(.account-menu, .alumni-role-menu) {
    right: 5px;
    width: min(304px, calc(100vw - 10px));
  }

  body:not(.e10-workflow-focus-route) .app-drawer {
    width: 100vw;
  }

  body:not(.e10-workflow-focus-route) .app-drawer .app-grid,
  body:not(.e10-workflow-focus-route) .alumni-app-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .alumni-home {
    gap: 10px;
  }

  .alumni-home-welcome {
    min-height: 0;
    align-items: flex-start;
    padding: 14px 12px 14px 17px;
    flex-direction: column;
    gap: 10px;
  }

  .alumni-home-welcome-main {
    align-items: flex-start;
    gap: 10px;
  }

  .alumni-home-welcome-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .alumni-home-welcome h2,
  .alumni-home-welcome-title {
    overflow: visible;
    font-size: 16px;
    line-height: 23px;
    text-overflow: clip;
    white-space: normal;
  }

  .alumni-home-welcome p,
  .alumni-home-welcome-desc {
    overflow: visible;
    line-height: 18px;
    text-overflow: clip;
    white-space: normal;
  }

  .alumni-home-welcome-actions {
    width: 100%;
  }

  .alumni-home-welcome-actions .btn {
    flex: 1 1 0;
  }

  .alumni-home-actions {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .alumni-home-action {
    min-height: 70px;
    padding: 10px 11px;
  }

  .alumni-home-content-grid,
  .alumni-home-side {
    grid-template-columns: minmax(0, 1fr);
  }

  .alumni-home-side {
    display: flex;
  }

  .alumni-home-resource-section .alumni-resource-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .alumni-home-panel-header {
    padding: 7px 10px;
  }

  .alumni-home-panel-body {
    padding: 9px 10px;
  }

  .alumni-activity-card {
    grid-template-columns: 29px minmax(0, 1fr);
  }

  .alumni-activity-card-time {
    display: none;
  }

  .alumni-notice-list > li,
  .alumni-notice-item {
    min-height: 36px;
  }
}

/* Home markup aliases used by the lightweight portal renderer. */
.alumni-home-action-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.alumni-home-action-tile {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 84px;
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  color: #555555;
  background: #ffffff;
  border: 1px solid #e1e5e7;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

button.alumni-home-action-tile {
  font: inherit;
}

.alumni-home-action-tile:hover,
.alumni-home-action-tile:focus-visible {
  background: #fcfdfe;
  border-color: #aacde5;
  box-shadow: 0 2px 8px rgba(4, 112, 193, 0.09);
  outline: none;
}

.alumni-home-action-tile .alumni-home-action-icon {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
}

.alumni-home-action-tile > span:not(.alumni-home-action-icon) {
  display: block;
  min-width: 0;
}

.alumni-home-action-tile strong,
.alumni-home-action-tile .alumni-home-action-title {
  display: block;
  overflow: hidden;
  color: #444444;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-home-action-tile small,
.alumni-home-action-tile .alumni-home-action-desc {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #999999;
  font-size: 11px;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-home-section-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1.35fr) minmax(290px, 0.8fr);
  gap: 12px;
}

.alumni-home-list,
.alumni-home-announcements {
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.alumni-home-list-item {
  display: grid;
  min-width: 0;
  min-height: 52px;
  grid-template-columns: 29px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px 2px;
  color: #555555;
  border-bottom: 1px solid #eeeeee;
}

button.alumni-home-list-item {
  width: 100%;
  background: transparent;
  font: inherit;
  text-align: left;
}

button.alumni-home-list-item:hover,
button.alumni-home-list-item:focus-visible {
  color: #555555;
  background: #f7fafc;
  outline: none;
}

.alumni-home-list-item:last-child {
  border-bottom: 0;
}

.alumni-home-list-item > .icon,
.alumni-home-list-item-icon {
  display: inline-flex;
  width: 29px;
  height: 29px;
  align-items: center;
  justify-content: center;
  color: #4d83aa;
  background: #edf6fb;
  border: 1px solid #d7e7f1;
  border-radius: 50%;
}

.alumni-home-list-item > .icon {
  padding: 6px;
}

.alumni-home-list-item-copy {
  min-width: 0;
}

.alumni-home-list-item strong,
.alumni-home-list-item-copy strong {
  display: block;
  overflow: hidden;
  color: #555555;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-home-list-item small,
.alumni-home-list-item-copy small,
.alumni-home-list-item-copy span {
  display: block;
  overflow: hidden;
  color: #999999;
  font-size: 11px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-home-list-item-time {
  color: #a0a6ab;
  font-size: 11px;
  line-height: 16px;
  white-space: nowrap;
}

.alumni-home-announcements > li,
.alumni-home-announcement {
  display: grid;
  min-width: 0;
  min-height: 39px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid #eeeeee;
}

.alumni-home-announcements > li:last-child,
.alumni-home-announcement:last-child {
  border-bottom: 0;
}

.alumni-home-announcements a,
.alumni-home-announcement-title {
  min-width: 0;
  overflow: hidden;
  color: #666666;
  font-size: 12px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-home-announcements a:hover,
.alumni-home-announcements a:focus-visible,
.alumni-home-announcement-title:hover,
.alumni-home-announcement-title:focus-visible {
  color: #0470c1;
  outline: none;
}

.alumni-home-announcements time,
.alumni-home-announcement-date {
  color: #a0a6ab;
  font-size: 10px;
  white-space: nowrap;
}

.alumni-home-resource-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.alumni-home-resource-grid .alumni-resource-card {
  min-height: 194px;
}

.alumni-role-nav {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  color: #68727a;
  background: #f7fafc;
  border: 1px solid #e2e8ec;
  border-radius: 3px;
}

.alumni-role-nav .icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: #4f8ab5;
}

.alumni-role-nav strong {
  min-width: 0;
  overflow: hidden;
  color: #59636b;
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-role-nav-meta {
  min-width: 0;
  overflow: hidden;
  margin-left: auto;
  color: #929aa1;
  font-size: 11px;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1120px) {
  .alumni-home-action-grid,
  .alumni-home-resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .alumni-home-section-grid {
    grid-template-columns: minmax(0, 1fr) minmax(274px, 0.8fr);
  }
}

@media (max-width: 860px) {
  .alumni-home-section-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 680px) {
  .alumni-home-action-grid,
  .alumni-home-resource-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .alumni-home-action-tile {
    min-height: 70px;
    padding: 10px 11px;
  }

  .alumni-home-list-item {
    grid-template-columns: 29px minmax(0, 1fr);
  }

  .alumni-home-list-item-time {
    display: none;
  }

  /* Portal markup keeps the shared activity-time class for desktop alignment. */
  .alumni-home-list-item .alumni-activity-time {
    display: none;
  }

  .alumni-home-announcements > li,
  .alumni-home-announcement {
    min-height: 36px;
  }

  .alumni-role-nav {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .alumni-role-nav-meta {
    width: 100%;
    margin-left: 22px;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
}

/* Actual role-menu and role-aware navigation markup compatibility. */
body:not(.e10-workflow-focus-route) .app-shell .account-menu {
  top: 50px;
  right: 6px;
  padding: 6px;
  overflow: hidden;
}

body:not(.e10-workflow-focus-route) .app-shell .account-menu-group {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

body:not(.e10-workflow-focus-route) .app-shell .account-menu-item.role-switch-option {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 56px;
  grid-template-columns: 29px minmax(0, 1fr) 13px;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  color: #59636b;
  background: #ffffff;
  border: 1px solid transparent;
  border-radius: 3px;
  font: inherit;
  text-align: left;
}

body:not(.e10-workflow-focus-route) .app-shell .account-menu-item.role-switch-option:hover,
body:not(.e10-workflow-focus-route) .app-shell .account-menu-item.role-switch-option:focus-visible {
  color: #3e7298;
  background: #f5f9fc;
  border-color: #d7e6ef;
  outline: none;
}

body:not(.e10-workflow-focus-route) .app-shell .account-menu-item.role-switch-option > .icon {
  width: 29px;
  height: 29px;
  padding: 6px;
  color: #4f87ae;
  background: #eef6fb;
  border: 1px solid #d7e8f3;
  border-radius: 50%;
}

body:not(.e10-workflow-focus-route) .app-shell .account-menu-identity {
  display: block;
  min-width: 0;
}

body:not(.e10-workflow-focus-route) .app-shell .account-menu-name,
body:not(.e10-workflow-focus-route) .app-shell .account-menu-meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.e10-workflow-focus-route) .app-shell .account-menu-name {
  color: #4b5359;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}

body:not(.e10-workflow-focus-route) .app-shell .account-menu-meta {
  margin-top: 1px;
  color: #969da3;
  font-size: 10px;
  font-weight: 400;
  line-height: 16px;
}

body:not(.e10-workflow-focus-route) .app-shell .account-menu-item.role-switch-option::after {
  width: 7px;
  height: 4px;
  justify-self: end;
  border-bottom: 1.5px solid transparent;
  border-left: 1.5px solid transparent;
  content: "";
  transform: rotate(-45deg) translateY(-1px);
}

body:not(.e10-workflow-focus-route) .app-shell .account-menu-item.role-switch-option.active,
body:not(.e10-workflow-focus-route) .app-shell .account-menu-item.role-switch-option[aria-checked="true"] {
  color: #246f9f;
  background: #edf6fc;
  border-color: #a9cfe8;
}

body:not(.e10-workflow-focus-route) .app-shell .account-menu-item.role-switch-option.active > .icon,
body:not(.e10-workflow-focus-route) .app-shell .account-menu-item.role-switch-option[aria-checked="true"] > .icon {
  color: #ffffff;
  background: #0470c1;
  border-color: #0470c1;
}

body:not(.e10-workflow-focus-route) .app-shell .account-menu-item.role-switch-option.active .account-menu-name,
body:not(.e10-workflow-focus-route) .app-shell .account-menu-item.role-switch-option[aria-checked="true"] .account-menu-name {
  color: #246f9f;
}

body:not(.e10-workflow-focus-route) .app-shell .account-menu-item.role-switch-option.active::after,
body:not(.e10-workflow-focus-route) .app-shell .account-menu-item.role-switch-option[aria-checked="true"]::after {
  border-color: #0470c1;
}

/* The sidebar receives role-specific items at runtime, rather than static groups. */
body:not(.e10-workflow-focus-route) .app-shell .context-nav,
body:not(.e10-workflow-focus-route) .app-shell .app-nav.context-nav {
  display: block;
  min-height: 0;
  flex: 1 1 auto;
  padding: 11px 0 36px;
  overflow: auto;
}

body:not(.e10-workflow-focus-route) .app-shell .context-nav > .nav-item,
body:not(.e10-workflow-focus-route) .app-shell .context-nav .nav-group > .nav-item {
  display: flex;
  min-width: 0;
  align-items: center;
}

body:not(.e10-workflow-focus-route) .app-shell .context-nav > .nav-item + .nav-item {
  margin-top: 2px;
}

body:not(.e10-workflow-focus-route) .app-shell .context-nav .nav-item > span:not(.nav-badge) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.e10-workflow-focus-route) .app-shell .context-nav .nav-item[hidden],
body:not(.e10-workflow-focus-route) .app-shell .context-nav .nav-group[hidden] {
  display: none !important;
}

/* The home welcome uses a right-aligned flex action zone, never the tile grid. */
.alumni-home-welcome > .alumni-home-welcome-actions {
  display: flex !important;
  width: auto;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  grid-auto-flow: initial;
  grid-template-columns: none !important;
}

.alumni-home-welcome > .alumni-home-welcome-actions .btn {
  flex: 0 0 auto;
}

@media (max-width: 680px) {
  body:not(.e10-workflow-focus-route) .app-shell .account-menu {
    right: 5px;
    width: min(304px, calc(100vw - 10px));
    padding: 5px;
  }

  body:not(.e10-workflow-focus-route) .app-shell .account-menu-item.role-switch-option {
    min-height: 54px;
    grid-template-columns: 28px minmax(0, 1fr) 12px;
    gap: 8px;
    padding: 7px 8px;
  }

  body:not(.e10-workflow-focus-route) .app-shell .account-menu-item.role-switch-option > .icon {
    width: 28px;
    height: 28px;
  }

  body:not(.e10-workflow-focus-route) .app-shell .context-nav,
  body:not(.e10-workflow-focus-route) .app-shell .app-nav.context-nav {
    padding-top: 9px;
  }

  .alumni-home-welcome > .alumni-home-welcome-actions {
    width: auto;
    align-self: flex-end;
    margin-left: auto;
  }

  .alumni-home-welcome > .alumni-home-welcome-actions .btn {
    flex: 0 0 auto;
  }
}

/* Keep the generated role label above, rather than beside, its vertical links. */
body:not(.e10-workflow-focus-route) .app-shell .context-nav .alumni-role-nav {
  display: block;
  padding: 0 0 10px;
  color: #555e66;
  background: transparent;
  border: 0;
  border-radius: 0;
}

body:not(.e10-workflow-focus-route) .app-shell .context-nav .alumni-role-nav-header {
  display: flex;
  min-width: 0;
  min-height: 31px;
  align-items: center;
  gap: 7px;
  padding: 0 15px;
}

body:not(.e10-workflow-focus-route) .app-shell .context-nav .alumni-role-nav .nav-group-title {
  min-width: 0;
  height: auto;
  padding: 0;
  overflow: hidden;
  color: #8c949b;
  font-size: 11px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.e10-workflow-focus-route) .app-shell .context-nav .alumni-role-nav .alumni-role-nav-meta {
  min-width: 0;
  width: auto;
  margin-left: auto;
  overflow: hidden;
  color: #a0a6ab;
  font-size: 10px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.e10-workflow-focus-route) .app-shell .context-nav .alumni-role-nav-items {
  display: block;
}

/* Resource plaza: content-first browsing with an explicit taxonomy and two useful views. */
.alumni-plaza-page {
  gap: 15px;
}

.alumni-plaza-intro {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 17px;
  color: #52606b;
  background: #f6fafc;
  border: 1px solid #dcebf4;
  border-left: 3px solid #267cb9;
  border-radius: 4px;
}

.alumni-plaza-intro > div,
.alumni-plaza-intro small {
  min-width: 0;
}

.alumni-plaza-intro .alumni-eyebrow {
  display: block;
  margin-bottom: 3px;
  color: #4c82a8;
  font-size: 10px;
  line-height: 16px;
}

.alumni-plaza-intro strong {
  display: block;
  color: #334d61;
  font-size: 15px;
  font-weight: 500;
  line-height: 23px;
}

.alumni-plaza-intro > small {
  max-width: 320px;
  color: #83909a;
  font-size: 11px;
  line-height: 18px;
  text-align: right;
}

.alumni-plaza-categories {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.alumni-plaza-category {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 68px;
  align-items: center;
  gap: 8px;
  padding: 10px 9px;
  color: #54616a;
  background: #ffffff;
  border: 1px solid #e0e8ed;
  border-radius: 4px;
  cursor: pointer;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  text-align: left;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.alumni-plaza-category:hover,
.alumni-plaza-category:focus-visible {
  border-color: #a7cae1;
  background: #fbfdff;
  box-shadow: 0 2px 8px rgba(24, 104, 156, 0.08);
  outline: none;
  transform: translateY(-1px);
}

.alumni-plaza-category.active {
  color: #1d659c;
  background: #f1f8fc;
  border-color: #75b3da;
  box-shadow: inset 0 0 0 1px rgba(42, 125, 184, 0.06);
}

.alumni-plaza-category-icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  color: #4a88b2;
  background: #edf6fb;
  border: 1px solid #d8e9f3;
  border-radius: 50%;
}

.alumni-plaza-category.active .alumni-plaza-category-icon {
  color: #ffffff;
  background: #2a7eb8;
  border-color: #2a7eb8;
}

.alumni-plaza-category-icon .icon {
  width: 15px;
  height: 15px;
}

.alumni-plaza-category-copy {
  min-width: 0;
}

.alumni-plaza-category-copy strong,
.alumni-plaza-category-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-plaza-category-copy strong {
  color: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 19px;
}

.alumni-plaza-category-copy small {
  margin-top: 1px;
  color: #9aa5ad;
  font-size: 10px;
  line-height: 15px;
}

.alumni-plaza-category > b {
  min-width: 17px;
  color: #8b9aa5;
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  text-align: right;
}

.alumni-plaza-category.active > b {
  color: #2a7eb8;
}

.alumni-plaza-filterbar {
  min-height: 52px;
  padding: 8px 11px;
}

.alumni-plaza-filterbar .alumni-search-input {
  width: min(340px, 100%);
}

.alumni-plaza-sort {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  color: #7a8791;
  font-size: 11px;
  white-space: nowrap;
}

.alumni-plaza-sort .select {
  width: 126px;
}

.alumni-view-switch {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 2px;
  background: #f3f7f9;
  border: 1px solid #dce7ed;
  border-radius: 4px;
}

.alumni-view-switch button {
  display: inline-flex;
  height: 27px;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  color: #85919a;
  background: transparent;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  line-height: 25px;
}

.alumni-view-switch button .icon {
  width: 14px;
  height: 14px;
}

.alumni-view-switch button:hover,
.alumni-view-switch button:focus-visible {
  color: #397da9;
  outline: none;
}

.alumni-view-switch button.active {
  color: #236fa6;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(42, 91, 125, 0.12);
}

.alumni-plaza-results {
  min-width: 0;
}

.alumni-plaza-page .alumni-plaza-resource-grid {
  gap: 12px;
}

.alumni-plaza-page .alumni-resource-card {
  min-height: 216px;
  border-color: #dfe8ed;
  box-shadow: 0 1px 2px rgba(41, 78, 101, 0.025);
}

.alumni-plaza-page .alumni-resource-card:hover,
.alumni-plaza-page .alumni-resource-card:focus-visible {
  border-color: #8dbbd8;
  box-shadow: 0 5px 14px rgba(28, 96, 140, 0.11);
}

.alumni-plaza-table-wrap {
  overflow: auto;
  background: #ffffff;
  border: 1px solid #dfe8ed;
  border-radius: 4px;
}

.alumni-plaza-table {
  min-width: 960px;
  margin: 0;
  border: 0;
}

.alumni-plaza-table thead th {
  height: 38px;
  color: #70808c;
  background: #f7fafb;
  border-bottom: 1px solid #dfe8ed;
  font-size: 11px;
  font-weight: 500;
}

.alumni-plaza-table tbody td {
  height: 73px;
  padding-top: 8px;
  padding-bottom: 8px;
  color: #64727c;
  border-bottom-color: #edf1f3;
  font-size: 11px;
}

.alumni-plaza-table tbody tr:last-child td {
  border-bottom: 0;
}

.alumni-plaza-table tbody tr:hover td {
  background: #fbfdfe;
}

.alumni-resource-table-title {
  display: grid;
  min-width: 250px;
  max-width: 365px;
  align-items: center;
  gap: 10px;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  grid-template-columns: 98px minmax(0, 1fr);
  text-align: left;
}

.alumni-resource-table-title:focus-visible {
  outline: 1px solid #70aed8;
  outline-offset: 2px;
}

.alumni-resource-table-title > span:last-child {
  min-width: 0;
}

.alumni-resource-table-title strong,
.alumni-resource-table-title small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-resource-table-title strong {
  color: #405563;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
}

.alumni-resource-table-title small {
  margin-top: 2px;
  color: #98a3ab;
  font-size: 10px;
  line-height: 16px;
}

.alumni-resource-table-thumb {
  position: relative;
  display: inline-flex;
  width: 98px;
  height: 55px;
  align-items: center;
  overflow: hidden;
  color: #407fa8;
  background: linear-gradient(90deg, #dbeefa 0%, #e9f5fb 54%, #f8fbfc 100%);
  border: 1px solid #d4e6f1;
  border-radius: 3px;
}

.alumni-resource-table-thumb::before {
  position: absolute;
  top: -25px;
  right: -18px;
  width: 76px;
  height: 104px;
  border: 1px solid rgba(53, 132, 182, 0.2);
  border-radius: 50%;
  content: "";
  transform: rotate(26deg);
}

.alumni-resource-table-thumb::after {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 24px;
  height: 2px;
  background: rgba(45, 125, 174, 0.38);
  box-shadow: 0 -6px 0 rgba(45, 125, 174, 0.24), 0 -12px 0 rgba(45, 125, 174, 0.16);
  content: "";
}

.alumni-resource-table-thumb > i {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: 27px;
  height: 27px;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(59, 135, 180, 0.24);
  border-radius: 50%;
}

.alumni-resource-table-thumb .icon {
  width: 14px;
  height: 14px;
}

.alumni-resource-table-thumb > b {
  position: absolute;
  z-index: 1;
  right: 8px;
  top: 8px;
  color: rgba(48, 111, 151, 0.8);
  font-size: 9px;
  font-weight: 500;
  line-height: 14px;
}

.alumni-resource-table-thumb.is-product {
  color: #a96b21;
  background: linear-gradient(90deg, #f8e9cf 0%, #fff5e8 54%, #fffdfa 100%);
  border-color: #efdbc0;
}

.alumni-resource-table-thumb.is-product::before { border-color: rgba(178, 111, 33, 0.18); }
.alumni-resource-table-thumb.is-product::after { background: rgba(174, 110, 35, 0.4); box-shadow: 0 -6px 0 rgba(174, 110, 35, 0.24), 0 -12px 0 rgba(174, 110, 35, 0.14); }
.alumni-resource-table-thumb.is-product > i { border-color: rgba(178, 111, 33, 0.22); }
.alumni-resource-table-thumb.is-product > b { color: rgba(146, 91, 27, 0.82); }

.alumni-resource-table-thumb.is-service {
  color: #2a7c65;
  background: linear-gradient(90deg, #dcefe8 0%, #eff9f4 54%, #fbfdfc 100%);
  border-color: #d1e9df;
}

.alumni-resource-table-thumb.is-service::before { border-color: rgba(38, 119, 94, 0.18); }
.alumni-resource-table-thumb.is-service::after { background: rgba(38, 119, 94, 0.4); box-shadow: 0 -6px 0 rgba(38, 119, 94, 0.24), 0 -12px 0 rgba(38, 119, 94, 0.14); }
.alumni-resource-table-thumb.is-service > i { border-color: rgba(38, 119, 94, 0.22); }
.alumni-resource-table-thumb.is-service > b { color: rgba(35, 112, 88, 0.82); }

.alumni-resource-table-thumb.is-event {
  color: #75599a;
  background: linear-gradient(90deg, #e9e0f3 0%, #f5f1f9 54%, #fcfbfd 100%);
  border-color: #dfd2ed;
}

.alumni-resource-table-thumb.is-event::before { border-color: rgba(103, 73, 141, 0.18); }
.alumni-resource-table-thumb.is-event::after { background: rgba(103, 73, 141, 0.4); box-shadow: 0 -6px 0 rgba(103, 73, 141, 0.24), 0 -12px 0 rgba(103, 73, 141, 0.14); }
.alumni-resource-table-thumb.is-event > i { border-color: rgba(103, 73, 141, 0.22); }
.alumni-resource-table-thumb.is-event > b { color: rgba(92, 63, 129, 0.82); }

.alumni-resource-table-thumb.is-offer {
  color: #aa6049;
  background: linear-gradient(90deg, #f8e3da 0%, #fff2ed 54%, #fefcfc 100%);
  border-color: #f0d7cc;
}

.alumni-resource-table-thumb.is-offer::before { border-color: rgba(162, 80, 58, 0.18); }
.alumni-resource-table-thumb.is-offer::after { background: rgba(162, 80, 58, 0.4); box-shadow: 0 -6px 0 rgba(162, 80, 58, 0.24), 0 -12px 0 rgba(162, 80, 58, 0.14); }
.alumni-resource-table-thumb.is-offer > i { border-color: rgba(162, 80, 58, 0.22); }
.alumni-resource-table-thumb.is-offer > b { color: rgba(145, 70, 51, 0.82); }

.alumni-plaza-direction {
  display: block;
  max-width: 142px;
  overflow: hidden;
  color: #657885;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-plaza-metric {
  display: flex;
  min-width: 72px;
  flex-direction: column;
}

.alumni-plaza-metric b {
  color: #527184;
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
}

.alumni-plaza-metric small {
  color: #98a3ab;
  font-size: 10px;
  line-height: 15px;
}

/* Public resource detail: a few facts, then the publisher's richer narrative. */
.alumni-resource-detail .alumni-detail-body {
  gap: 20px;
}

.alumni-resource-detail .alumni-detail-section h4 {
  display: flex;
  min-height: 24px;
  align-items: center;
  margin: 0 0 9px;
  padding-left: 8px;
  color: #4c6270;
  border-left: 3px solid #287db7;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

.alumni-resource-overview .alumni-tag-list {
  margin: 0 0 10px;
}

.alumni-resource-overview .alumni-detail-list {
  border-color: #e5ecef;
}

.alumni-resource-overview .alumni-detail-list > div {
  border-color: #e5ecef;
}

.alumni-resource-overview .alumni-detail-list dt {
  color: #75838c;
  background: #f8fafb;
}

.alumni-resource-overview .alumni-detail-list dd {
  color: #53656f;
}

.alumni-publisher-story {
  padding-top: 2px;
}

.alumni-story-heading {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.alumni-story-heading .alumni-eyebrow {
  display: block;
  margin-bottom: 1px;
  color: #7192a7;
  font-size: 10px;
  line-height: 15px;
}

.alumni-story-heading h4 {
  margin-bottom: 11px !important;
}

.alumni-story-owner {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
  padding-top: 2px;
  overflow: hidden;
  color: #8c9ba4;
  font-size: 10px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-story-owner .icon {
  width: 12px;
  height: 12px;
  color: #75a1bc;
}

.alumni-story-layout {
  display: grid;
  min-width: 0;
  align-items: stretch;
  gap: 13px;
  grid-template-columns: minmax(190px, 0.92fr) minmax(0, 1.08fr);
}

.alumni-story-image {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 174px;
  padding: 0;
  overflow: hidden;
  background: #eef7fc;
  border: 1px solid #d5e7f1;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
}

.alumni-story-image:hover,
.alumni-story-image:focus-visible {
  border-color: #7bb3d5;
  box-shadow: 0 4px 12px rgba(32, 104, 147, 0.12);
  outline: none;
}

.alumni-story-image-note {
  position: absolute;
  z-index: 3;
  right: 9px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  color: #edf7fc;
  background: rgba(35, 77, 103, 0.72);
  border-radius: 2px;
  font-size: 10px;
  line-height: 15px;
}

.alumni-story-image-note .icon {
  width: 11px;
  height: 11px;
}

.alumni-media-visual {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  overflow: hidden;
  color: #ffffff;
  background: linear-gradient(112deg, #0f5885 0%, #277fad 51%, #bedceb 100%);
}

.alumni-media-visual::before {
  position: absolute;
  top: -35%;
  right: -15%;
  width: 72%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  box-shadow: 0 0 0 26px rgba(255, 255, 255, 0.07), 0 0 0 56px rgba(255, 255, 255, 0.04);
  content: "";
}

.alumni-media-visual.is-product { background: linear-gradient(112deg, #8c551a 0%, #c58232 50%, #f3d398 100%); }
.alumni-media-visual.is-service { background: linear-gradient(112deg, #176452 0%, #2d987a 50%, #bde4d2 100%); }
.alumni-media-visual.is-event { background: linear-gradient(112deg, #554071 0%, #79619d 50%, #d7c8e7 100%); }
.alumni-media-visual.is-offer { background: linear-gradient(112deg, #8c4938 0%, #bd7258 50%, #f0c6b8 100%); }

.alumni-media-visual-grid {
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: 0.23;
  background-image: linear-gradient(rgba(255, 255, 255, 0.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.6) 1px, transparent 1px);
  background-size: 26px 26px;
  transform: perspective(120px) rotateX(52deg) scale(1.36) translateY(31%);
  transform-origin: bottom;
}

.alumni-media-visual-orbit {
  position: absolute;
  z-index: 1;
  right: 21px;
  bottom: 27px;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
}

.alumni-media-visual-orbit::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
}

.alumni-media-visual-icon {
  position: absolute;
  z-index: 2;
  top: 17px;
  left: 16px;
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  color: #eefaff;
  background: rgba(255, 255, 255, 0.17);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
}

.alumni-media-visual-icon .icon {
  width: 17px;
  height: 17px;
}

.alumni-media-visual-copy {
  position: absolute;
  z-index: 2;
  left: 16px;
  right: 20px;
  bottom: 16px;
}

.alumni-media-visual-copy b,
.alumni-media-visual-copy small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-media-visual-copy b {
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

.alumni-media-visual-copy small {
  margin-top: 2px;
  color: rgba(247, 252, 255, 0.82);
  font-size: 10px;
  line-height: 15px;
}

.alumni-rich-copy {
  min-width: 0;
  padding: 1px 1px 0 0;
}

.alumni-rich-copy p {
  margin: 0;
  color: #64747f;
  font-size: 12px;
  line-height: 21px;
}

.alumni-rich-copy .alumni-rich-lead {
  color: #405867;
  font-size: 13px;
  font-weight: 500;
  line-height: 22px;
}

.alumni-rich-copy p + p {
  margin-top: 9px;
}

.alumni-rich-copy blockquote {
  position: relative;
  margin: 11px 0 0;
  padding: 7px 9px 7px 12px;
  color: #668096;
  background: #f5f9fb;
  border-left: 2px solid #8ebbd4;
  font-size: 11px;
  line-height: 18px;
}

.alumni-story-media-row {
  display: grid;
  min-width: 0;
  align-items: center;
  gap: 10px;
  margin-top: 11px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.alumni-story-video {
  display: grid;
  min-width: 0;
  min-height: 49px;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  color: #567184;
  background: #f8fafb;
  border: 1px solid #e0eaef;
  border-radius: 4px;
  cursor: pointer;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  text-align: left;
}

.alumni-story-video:hover,
.alumni-story-video:focus-visible {
  color: #2e779f;
  background: #fbfdfe;
  border-color: #9bc5dc;
  outline: none;
}

.alumni-story-video-play {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: #4689b3;
  border-radius: 50%;
}

.alumni-story-video-play .icon {
  width: 14px;
  height: 14px;
}

.alumni-story-video.is-product .alumni-story-video-play { background: #bd7a2d; }
.alumni-story-video.is-service .alumni-story-video-play { background: #31886e; }
.alumni-story-video.is-event .alumni-story-video-play { background: #7a609e; }
.alumni-story-video.is-offer .alumni-story-video-play { background: #b56850; }

.alumni-story-video > span:nth-child(2) {
  min-width: 0;
}

.alumni-story-video strong,
.alumni-story-video small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-story-video strong {
  color: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: 17px;
}

.alumni-story-video small {
  margin-top: 1px;
  color: #98a6af;
  font-size: 10px;
  line-height: 14px;
}

.alumni-story-video > i {
  display: inline-flex;
  color: #91a3ae;
}

.alumni-story-video > i .icon {
  width: 13px;
  height: 13px;
}

.alumni-story-caption {
  display: flex;
  min-width: 0;
  flex-direction: column;
  color: #98a5ae;
  font-size: 10px;
  line-height: 16px;
  text-align: right;
}

.alumni-story-caption small {
  color: #a8b3ba;
  font-size: 10px;
}

.alumni-detail-trust-card {
  background: #f4f9fc;
  border-color: #d9eaf4;
}

.alumni-detail-trust-card > strong {
  color: #39749a;
}

.alumni-detail-aside-card > span,
.alumni-detail-aside-card > strong,
.alumni-detail-aside-card > small {
  display: block;
}

.alumni-detail-aside-card > span {
  color: #8b99a3;
  font-size: 10px;
  line-height: 16px;
}

.alumni-detail-aside-card > strong {
  margin-top: 3px;
  color: #536876;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}

.alumni-detail-aside-card > small {
  margin-top: 2px;
  color: #97a4ad;
  font-size: 10px;
  line-height: 16px;
}

.alumni-media-preview {
  min-width: 0;
}

.alumni-media-preview-visual {
  position: relative;
  height: 214px;
  overflow: hidden;
  border: 1px solid #d7e8f1;
  border-radius: 4px;
}

.alumni-media-preview-visual .alumni-media-visual {
  min-height: 214px;
}

.alumni-media-preview-play {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: rgba(26, 63, 86, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.alumni-media-preview-play .icon {
  width: 21px;
  height: 21px;
}

.alumni-media-preview-copy {
  padding: 14px 1px 1px;
}

.alumni-media-preview-copy .alumni-eyebrow {
  color: #7393a7;
  font-size: 10px;
  line-height: 16px;
}

.alumni-media-preview-copy h3 {
  margin: 3px 0 8px;
  color: #405968;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.alumni-media-preview-copy p {
  margin: 0;
  color: #647580;
  font-size: 12px;
  line-height: 21px;
}

.alumni-media-preview-copy p + p {
  margin-top: 8px;
}

.alumni-media-preview .inline-message {
  margin-top: 12px;
}

.alumni-media-preview .modal-footer {
  margin-top: 15px;
}

@media (max-width: 1180px) {
  .alumni-plaza-categories {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .alumni-plaza-intro {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .alumni-plaza-intro > small {
    max-width: none;
    text-align: left;
  }

  .alumni-plaza-filterbar .alumni-search-input {
    width: 100%;
  }

  .alumni-plaza-filterbar .alumni-filter-actions {
    margin-left: 0;
  }

  .alumni-story-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .alumni-story-image {
    min-height: 168px;
  }
}

@media (max-width: 560px) {
  .alumni-plaza-categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .alumni-plaza-category {
    min-height: 62px;
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .alumni-plaza-category > b {
    display: none;
  }

  .alumni-plaza-category-icon {
    width: 28px;
    height: 28px;
  }

  .alumni-section-heading:has(.alumni-view-switch) {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .alumni-section-heading:has(.alumni-view-switch) > .alumni-view-switch {
    margin-left: auto;
  }

  .alumni-story-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0;
  }

  .alumni-story-owner {
    margin: -6px 0 9px;
  }

  .alumni-story-media-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .alumni-story-caption {
    text-align: left;
  }

  .alumni-resource-detail .alumni-detail-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .alumni-media-preview-visual,
  .alumni-media-preview-visual .alumni-media-visual {
    height: 178px;
    min-height: 178px;
  }
}

/* Member pages use a quieter, editorial service surface instead of an admin toolbar. */
body.alumni-member-route .app-shell .page-header {
  display: none;
}

body.alumni-member-route .app-shell .view-root {
  height: calc(100vh - 50px);
  padding: 20px 22px 30px;
  background: #f3f5f6;
}

body.alumni-member-route .alumni-home,
body.alumni-member-route .alumni-plaza-page,
body.alumni-member-route .alumni-portal:not(.focus-workflow-page) {
  max-width: 1280px;
}

body.alumni-member-route .alumni-home {
  gap: 16px;
}

body.alumni-member-route .alumni-home-welcome {
  min-height: 142px;
  padding: 25px 27px 24px 30px;
  background: #f8fbfc;
  border-color: #ccdde7;
  box-shadow: 0 7px 18px rgba(30, 69, 90, 0.045);
}

body.alumni-member-route .alumni-home-welcome::before {
  width: 5px;
  background: #166fa8;
}

body.alumni-member-route .alumni-home-welcome .alumni-eyebrow {
  margin-bottom: 6px;
  color: #66859a;
  font-size: 11px;
  letter-spacing: 0;
}

body.alumni-member-route .alumni-home-welcome h2 {
  color: #233d4e;
  font-size: 22px;
  line-height: 32px;
}

body.alumni-member-route .alumni-home-welcome p {
  max-width: 760px;
  margin-top: 5px;
  color: #667984;
  font-size: 13px;
  line-height: 21px;
}

body.alumni-member-route .alumni-home-action-grid {
  gap: 12px;
}

body.alumni-member-route .alumni-home-action-tile {
  min-height: 88px;
  background: #ffffff;
  border-color: #dde6ea;
  box-shadow: 0 2px 7px rgba(33, 76, 99, 0.025);
}

body.alumni-member-route .alumni-home-action-tile:nth-child(2) {
  background: #fdfaf5;
  border-color: #eadfce;
}

body.alumni-member-route .alumni-home-action-tile:nth-child(3) {
  background: #f7fbfa;
  border-color: #d7e8e2;
}

body.alumni-member-route .alumni-home-action-tile:nth-child(2) .alumni-home-action-icon {
  color: #9b6c31;
  background: #fbf4e9;
  border-color: #ead6b9;
}

body.alumni-member-route .alumni-home-action-tile:nth-child(3) .alumni-home-action-icon {
  color: #3b8170;
  background: #edf8f5;
  border-color: #d3e9e1;
}

body.alumni-member-route .alumni-hero {
  min-height: 126px;
  padding: 23px 25px 22px 28px;
  background: #f8fbfc;
  border-color: #cfdee7;
  box-shadow: 0 5px 15px rgba(30, 69, 90, 0.04);
}

body.alumni-member-route .alumni-hero-emblem {
  color: #226f9f;
  background: #eef7fb;
  border-color: #d3e7f2;
}

body.alumni-member-route .alumni-hero h2 {
  color: #223d4f;
  font-size: 21px;
}

body.alumni-member-route .alumni-hero-kicker {
  color: #6f8a9c;
}

body.alumni-member-route .alumni-hero-desc {
  color: #657985;
}

/* The default resource mode is a readable content list, not a wall of cards. */
.alumni-resource-list {
  display: grid;
  min-width: 0;
  gap: 10px;
}

.alumni-resource-list-item {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 124px;
  grid-template-columns: 156px minmax(0, 1fr) minmax(208px, 0.28fr);
  align-items: stretch;
  gap: 15px;
  padding: 12px;
  color: #526570;
  background: #ffffff;
  border: 1px solid #dfe8ed;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(40, 78, 102, 0.02);
  text-align: left;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.alumni-resource-list-item:hover,
.alumni-resource-list-item:focus-visible {
  color: #526570;
  background: #fcfeff;
  border-color: #8fbdd7;
  box-shadow: 0 6px 16px rgba(25, 91, 132, 0.09);
  outline: none;
  transform: translateY(-1px);
}

.alumni-resource-list-media {
  display: flex;
  min-width: 0;
  align-items: center;
}

.alumni-resource-list-media .alumni-resource-table-thumb {
  width: 156px;
  height: 98px;
}

.alumni-resource-list-media .alumni-resource-table-thumb > i {
  width: 34px;
  height: 34px;
  margin-left: 14px;
}

.alumni-resource-list-media .alumni-resource-table-thumb .icon {
  width: 17px;
  height: 17px;
}

.alumni-resource-list-copy {
  display: flex;
  min-width: 0;
  padding: 1px 0;
  flex-direction: column;
  justify-content: center;
}

.alumni-resource-list-topline {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.alumni-resource-list-topline > small {
  overflow: hidden;
  color: #9aa6ad;
  font-size: 10px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-resource-list-copy > strong {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: #3d5666;
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-resource-list-subtitle,
.alumni-resource-list-summary {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-resource-list-subtitle {
  margin-top: 2px;
  color: #7d8d97;
  font-size: 11px;
  line-height: 17px;
}

.alumni-resource-list-summary {
  margin-top: 5px;
  color: #687a85;
  font-size: 12px;
  line-height: 18px;
}

.alumni-resource-list-tags {
  display: flex;
  min-width: 0;
  gap: 5px;
  margin-top: 7px;
  overflow: hidden;
}

.alumni-resource-list-aside {
  display: flex;
  min-width: 0;
  padding: 7px 4px 7px 15px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  border-left: 1px solid #edf1f3;
}

.alumni-resource-list-aside > small {
  color: #97a4ac;
  font-size: 10px;
  line-height: 16px;
}

.alumni-resource-list-aside > span {
  color: #71838e;
  font-size: 11px;
  line-height: 17px;
}

.alumni-resource-list-aside > b {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  color: #2775a7;
  font-size: 11px;
  font-weight: 500;
  line-height: 17px;
}

.alumni-resource-list-aside > b .icon {
  width: 13px;
  height: 13px;
}

/* Keep the table mode visually distinct: a wider horizontal thumbnail anchors each row. */
.alumni-plaza-table {
  min-width: 1090px;
}

.alumni-plaza-table tbody td {
  height: 88px;
}

.alumni-resource-table-title {
  min-width: 290px;
  max-width: 390px;
  grid-template-columns: 128px minmax(0, 1fr);
}

.alumni-resource-table-thumb {
  width: 128px;
  height: 64px;
}

.alumni-resource-table-thumb > i {
  width: 31px;
  height: 31px;
  margin-left: 12px;
}

.alumni-resource-table-thumb .icon {
  width: 16px;
  height: 16px;
}

@media (max-width: 880px) {
  body.alumni-member-route .app-shell .view-root {
    padding: 14px 12px 24px;
  }

  .alumni-resource-list-item {
    grid-template-columns: 138px minmax(0, 1fr);
  }

  .alumni-resource-list-media .alumni-resource-table-thumb {
    width: 138px;
    height: 92px;
  }

  .alumni-resource-list-aside {
    grid-column: 2;
    padding: 7px 0 0;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    border-top: 1px solid #edf1f3;
    border-left: 0;
  }

  .alumni-resource-list-aside > b {
    margin-left: auto;
  }
}

@media (max-width: 680px) {
  body.alumni-member-route .app-shell .view-root {
    height: calc(100vh - 50px);
    padding: 10px 8px 20px;
  }

  body.alumni-member-route .alumni-home-welcome,
  body.alumni-member-route .alumni-hero {
    min-height: 0;
    padding: 17px 15px 17px 19px;
  }

  body.alumni-member-route .alumni-home-welcome h2,
  body.alumni-member-route .alumni-hero h2 {
    font-size: 18px;
    line-height: 26px;
  }

  body.alumni-member-route .alumni-home-welcome p,
  body.alumni-member-route .alumni-hero-desc {
    white-space: normal;
  }

  .alumni-resource-list-item {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px;
  }

  .alumni-resource-list-media .alumni-resource-table-thumb {
    width: 100%;
    height: 116px;
  }

  .alumni-resource-list-aside {
    grid-column: auto;
  }

  .alumni-resource-list-copy > strong,
  .alumni-resource-list-subtitle,
  .alumni-resource-list-summary {
    white-space: normal;
  }

  .alumni-resource-list-summary {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

/* The public detail is intentionally editorial: its content gets the drawer width,
   while the concise service facts remain visible as a quiet secondary row. */
.detail-drawer {
  width: min(680px, calc(100vw - 20px));
}

.detail-drawer .alumni-detail {
  border: 0;
  border-radius: 0;
}

.detail-drawer .alumni-detail-body {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.detail-drawer .alumni-detail-aside {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.detail-drawer .alumni-detail-aside-card + .alumni-detail-aside-card {
  margin-top: 0;
}

.detail-drawer .alumni-story-layout {
  grid-template-columns: minmax(224px, 0.9fr) minmax(0, 1.1fr);
}

/* Fixed column proportions preserve a readable title beside its horizontal thumbnail. */
.alumni-plaza-table {
  min-width: 1000px;
  table-layout: fixed;
}

.alumni-plaza-col-resource { width: 34%; }
.alumni-plaza-col-category { width: 10%; }
.alumni-plaza-col-direction { width: 17%; }
.alumni-plaza-col-region { width: 12%; }
.alumni-plaza-col-metric { width: 11%; }
.alumni-plaza-col-date { width: 9%; }
.alumni-plaza-col-action { width: 7%; }

.alumni-review-table-wrap {
  overflow: auto;
  background: #fff;
  border: 1px solid #e1e8ec;
  border-radius: 4px;
}

.alumni-review-table {
  min-width: 760px;
  margin: 0;
  border: 0;
  table-layout: fixed;
}

.alumni-review-table th {
  height: 38px;
  color: #71808b;
  background: #f7fafb;
  border-bottom: 1px solid #e1e8ec;
  font-size: 11px;
  font-weight: 500;
}

.alumni-review-table th:nth-child(1) { width: 34%; }
.alumni-review-table th:nth-child(2) { width: 16%; }
.alumni-review-table th:nth-child(3) { width: 15%; }
.alumni-review-table th:nth-child(4) { width: 15%; }
.alumni-review-table th:nth-child(5) { width: 20%; }

.alumni-review-table td {
  height: 70px;
  color: #667681;
  border-bottom-color: #edf1f3;
  font-size: 11px;
}

.alumni-review-table tbody tr:last-child td {
  border-bottom: 0;
}

.alumni-review-resource {
  display: flex;
  max-width: 100%;
  min-width: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  flex-direction: column;
  text-align: left;
}

.alumni-review-resource strong,
.alumni-review-resource small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-review-resource strong {
  color: #405968;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
}

.alumni-review-resource small {
  margin-top: 2px;
  color: #97a4ac;
  font-size: 10px;
  line-height: 15px;
}

.alumni-review-resource:hover strong,
.alumni-review-resource:focus-visible strong {
  color: #2474a8;
}

.alumni-review-resource:focus-visible {
  outline: 1px solid #6faed5;
  outline-offset: 2px;
}

@media (max-width: 680px) {
  .detail-drawer {
    width: calc(100vw - 10px);
  }

  .detail-drawer .alumni-detail-aside {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-drawer .alumni-story-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Final front-office overrides: these follow the legacy list rules above. */
body.alumni-member-route .alumni-home,
body.alumni-member-route .alumni-plaza-page,
body.alumni-member-route .alumni-portal:not(.focus-workflow-page),
body.alumni-member-route .alumni-activity-ledger-page,
body.alumni-member-route .alumni-activity-detail-page {
  width: 100%;
  max-width: none;
}

.alumni-plaza-table {
  min-width: 980px;
}

.alumni-plaza-table tbody td {
  height: 62px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.alumni-resource-table-title {
  min-width: 255px;
  max-width: 360px;
  grid-template-columns: 94px minmax(0, 1fr);
  gap: 9px;
}

.alumni-resource-table-thumb {
  width: 94px;
  height: 46px;
  border-radius: 3px;
}

.alumni-resource-table-thumb > i {
  width: 25px;
  height: 25px;
  margin-left: 9px;
}

.alumni-resource-table-thumb .icon {
  width: 14px;
  height: 14px;
}

.alumni-resource-table-thumb.is-company { background: linear-gradient(90deg, #eff7fc 0%, #cfe5f1 56%, #9ec7dd 100%); }
.alumni-resource-table-thumb.is-service { background: linear-gradient(90deg, #eef8f4 0%, #cfebdf 58%, #95cdb6 100%); }
.alumni-resource-table-thumb.is-product { background: linear-gradient(90deg, #fff9ef 0%, #f5dfb8 58%, #d9ad68 100%); }
.alumni-resource-table-thumb.is-event { background: linear-gradient(90deg, #f7f2fb 0%, #decdec 57%, #b596d0 100%); }
.alumni-resource-table-thumb.is-offer { background: linear-gradient(90deg, #fff4f0 0%, #f4d3c8 58%, #dca38f 100%); }

.alumni-article-hero > button {
  display: block;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: zoom-in;
}

.alumni-article-hero > button:focus-visible {
  outline: 2px solid #5ca7dc;
  outline-offset: -2px;
}

@media (max-width: 760px) {
  .alumni-resource-gallery,
  .alumni-ledger-activity-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Life plaza: a compact, member-facing E10 listing surface. */
body.alumni-member-route .alumni-life-page,
body.alumni-member-route .alumni-life-square-page {
  width: 100%;
  max-width: none;
}

.alumni-life-page,
.alumni-life-square-page {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 10px;
}

.alumni-life-hero {
  position: relative;
  display: flex;
  min-height: 116px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 26px 21px 29px;
  overflow: hidden;
  color: #415e70;
  background:
    linear-gradient(104deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 251, 253, 0.96) 58%, rgba(231, 243, 249, 0.92) 100%);
  border: 1px solid #d4e2e9;
  border-radius: 4px;
  box-shadow: 0 5px 17px rgba(30, 69, 90, 0.045);
}

.alumni-life-hero::after {
  position: absolute;
  top: -65px;
  right: 7%;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(74, 142, 178, 0.12);
  border-radius: 50%;
  box-shadow: 0 0 0 24px rgba(74, 142, 178, 0.055), 0 0 0 48px rgba(74, 142, 178, 0.028);
  content: "";
  pointer-events: none;
}

.alumni-life-hero-copy,
.alumni-life-hero-actions {
  position: relative;
  z-index: 1;
}

.alumni-life-hero-copy {
  min-width: 0;
}

.alumni-life-hero .alumni-eyebrow {
  margin-bottom: 4px;
  color: #66899f;
  font-size: 10px;
  line-height: 16px;
}

.alumni-life-hero h2,
.alumni-life-hero h3 {
  margin: 0;
  color: #38596d;
  font-size: 21px;
  font-weight: 500;
  line-height: 31px;
}

.alumni-life-hero p {
  max-width: 620px;
  margin: 3px 0 0;
  color: #6d808d;
  font-size: 12px;
  line-height: 20px;
}

.alumni-life-hero-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.alumni-life-hero-actions .btn {
  min-width: 82px;
}

.alumni-life-surface {
  overflow: hidden;
  background: #fff;
  border: 1px solid #e0e8ec;
  border-radius: 4px;
  box-shadow: 0 3px 11px rgba(29, 56, 72, 0.025);
}

.alumni-life-tabs {
  display: flex;
  min-width: 0;
  align-items: stretch;
  height: 49px;
  padding: 0 19px;
  border-bottom: 1px solid #e4ebef;
}

.alumni-life-tabs > button,
.alumni-life-tab {
  position: relative;
  display: inline-flex;
  height: 49px;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  color: #6c7c87;
  background: transparent;
  border: 0;
  font-size: 13px;
  white-space: nowrap;
}

.alumni-life-tabs > button:first-child,
.alumni-life-tab:first-child {
  padding-left: 8px;
}

.alumni-life-tabs > button:hover,
.alumni-life-tabs > button:focus-visible,
.alumni-life-tab:hover,
.alumni-life-tab:focus-visible {
  color: #2879a9;
  background: #f8fbfc;
  outline: none;
}

.alumni-life-tabs > button.active,
.alumni-life-tabs > button[aria-selected="true"],
.alumni-life-tab.active,
.alumni-life-tab[aria-selected="true"] {
  color: #2578aa;
  font-weight: 500;
}

.alumni-life-tabs > button.active::after,
.alumni-life-tabs > button[aria-selected="true"]::after,
.alumni-life-tab.active::after,
.alumni-life-tab[aria-selected="true"]::after {
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 2px;
  background: #3b98cd;
  content: "";
}

.alumni-life-tabs > button:first-child.active::after,
.alumni-life-tabs > button:first-child[aria-selected="true"]::after,
.alumni-life-tab:first-child.active::after,
.alumni-life-tab:first-child[aria-selected="true"]::after {
  left: 7px;
}

.alumni-life-tabs .alumni-life-tab-count {
  margin-left: 3px;
  font-size: 11px;
  font-weight: 400;
}

.alumni-life-filterbar {
  display: flex;
  min-width: 0;
  align-items: end;
  flex-wrap: wrap;
  gap: 10px 12px;
  padding: 14px 19px 13px;
  background: #fcfdfe;
  border-bottom: 1px solid #edf1f3;
}

.alumni-life-filter-field {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.alumni-life-filter-field > label,
.alumni-life-filter-label {
  flex: 0 0 auto;
  color: #74828c;
  font-size: 12px;
  line-height: 30px;
  white-space: nowrap;
}

.alumni-life-filter-field .input,
.alumni-life-filter-field .select {
  min-width: 118px;
  height: 30px;
  color: #556773;
  font-size: 12px;
}

.alumni-life-filter-field.is-subject .input,
.alumni-life-filter-field[data-field="subject"] .input {
  width: 174px;
}

.alumni-life-filter-field.is-category .select,
.alumni-life-filter-field[data-field="category"] .select {
  width: 154px;
}

.alumni-life-date-range {
  display: grid;
  min-width: 244px;
  gap: 6px;
  grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr);
}

.alumni-life-date-range .input {
  width: 100%;
  min-width: 0;
}

.alumni-life-date-range > span {
  color: #a1aeb6;
  font-size: 12px;
  line-height: 30px;
  text-align: center;
}

.alumni-life-filter-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.alumni-life-filter-actions .btn {
  min-width: 58px;
}

.alumni-life-filter-more {
  display: inline-flex;
  height: 30px;
  align-items: center;
  gap: 3px;
  padding: 0 10px;
  color: #637784;
  background: #fff;
  border: 1px solid #dce5e9;
  border-radius: 2px;
  font-size: 12px;
}

.alumni-life-filter-more:hover,
.alumni-life-filter-more:focus-visible {
  color: #297eae;
  background: #f8fbfc;
  border-color: #a9cbe0;
  outline: none;
}

.alumni-life-table-wrap {
  min-width: 0;
  overflow: auto;
}

.alumni-life-table {
  width: 100%;
  min-width: 1060px;
  border: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

.alumni-life-table th {
  height: 39px;
  padding: 0 12px;
  color: #73818a;
  background: #f8fafb;
  border-bottom: 1px solid #e4eaed;
  font-size: 11px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}

.alumni-life-table th:first-child,
.alumni-life-table td:first-child {
  padding-left: 20px;
}

.alumni-life-table th:last-child,
.alumni-life-table td:last-child {
  padding-right: 20px;
}

.alumni-life-table td {
  height: 57px;
  padding: 6px 12px;
  overflow: hidden;
  color: #5e707c;
  border-bottom: 1px solid #edf1f3;
  font-size: 12px;
  line-height: 18px;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.alumni-life-table tbody tr {
  background: #fff;
  transition: background-color 0.16s ease;
}

.alumni-life-table tbody tr:hover {
  background: #fbfdfe;
}

.alumni-life-table tbody tr:last-child td {
  border-bottom: 0;
}

.alumni-life-table .is-index,
.alumni-life-index {
  width: 48px;
  color: #87959d;
  text-align: center;
}

.alumni-life-subject {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  text-align: left;
}

.alumni-life-subject:hover .alumni-life-subject-title,
.alumni-life-subject:focus-visible .alumni-life-subject-title {
  color: #1d7bb0;
}

.alumni-life-subject:focus-visible {
  outline: 1px solid #73b2d3;
  outline-offset: 2px;
}

.alumni-life-subject-mark {
  display: inline-flex;
  width: 4px;
  height: 29px;
  flex: 0 0 auto;
  border-radius: 2px;
  background: #9eb6c3;
}

.alumni-life-subject.is-help .alumni-life-subject-mark,
.alumni-life-subject-mark.is-help { background: #5f9fbd; }
.alumni-life-subject.is-market .alumni-life-subject-mark,
.alumni-life-subject-mark.is-market { background: #c59357; }
.alumni-life-subject.is-housing .alumni-life-subject-mark,
.alumni-life-subject-mark.is-housing { background: #8d88ba; }
.alumni-life-subject.is-pet .alumni-life-subject-mark,
.alumni-life-subject-mark.is-pet { background: #75a98d; }
.alumni-life-subject.is-share .alumni-life-subject-mark,
.alumni-life-subject-mark.is-share { background: #7897b2; }
.alumni-life-subject.is-event .alumni-life-subject-mark,
.alumni-life-subject-mark.is-event { background: #bd7994; }
.alumni-life-subject.is-secondhand .alumni-life-subject-mark,
.alumni-life-subject-mark.is-secondhand { background: #5f90ba; }
.alumni-life-subject.is-rental .alumni-life-subject-mark,
.alumni-life-subject-mark.is-rental { background: #8d88ba; }
.alumni-life-subject.is-lost-found .alumni-life-subject-mark,
.alumni-life-subject-mark.is-lost-found { background: #c59357; }
.alumni-life-subject.is-activity-call .alumni-life-subject-mark,
.alumni-life-subject-mark.is-activity-call { background: #bd7994; }
.alumni-life-subject.is-pet-help .alumni-life-subject-mark,
.alumni-life-subject-mark.is-pet-help { background: #75a98d; }
.alumni-life-subject.is-alumni-help .alumni-life-subject-mark,
.alumni-life-subject-mark.is-alumni-help { background: #5f9fbd; }

.alumni-life-subject-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.alumni-life-subject-title,
.alumni-life-subject-copy > strong {
  display: block;
  overflow: hidden;
  color: #3e6175;
  font-size: 12px;
  font-weight: 500;
  line-height: 19px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-life-subject-copy > small {
  display: block;
  margin-top: 1px;
  overflow: hidden;
  color: #9aa7ae;
  font-size: 10px;
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-life-ellipsis,
.alumni-life-preview {
  display: block;
  overflow: hidden;
  color: #687a85;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-life-preview {
  max-width: 100%;
}

.alumni-life-city,
.alumni-life-date,
.alumni-life-publisher {
  color: #71818b;
}

.alumni-life-department {
  display: block;
  overflow: hidden;
  color: #6b7c86;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-life-category,
.alumni-life-attribute {
  display: inline-flex;
  max-width: 100%;
  height: 21px;
  align-items: center;
  padding: 0 7px;
  overflow: hidden;
  color: #5f798a;
  background: #f3f7f9;
  border: 1px solid #e2ebef;
  border-radius: 2px;
  font-size: 10px;
  line-height: 19px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-life-category.is-help { color: #4d839f; background: #f0f8fb; border-color: #d7eaf2; }
.alumni-life-category.is-market { color: #9b7140; background: #fff8ee; border-color: #f0e0c9; }
.alumni-life-category.is-housing { color: #716d9f; background: #f5f4fb; border-color: #e1dff1; }
.alumni-life-category.is-pet { color: #5d8b6c; background: #f2f8f3; border-color: #d8e9dc; }
.alumni-life-category.is-share { color: #5e7e96; background: #f1f6fa; border-color: #dce8ef; }
.alumni-life-category.is-event { color: #9c5e78; background: #fcf3f6; border-color: #efdbe3; }
.alumni-life-category.is-secondhand { color: #557c99; background: #f1f6fa; border-color: #dce8ef; }
.alumni-life-category.is-rental { color: #716d9f; background: #f5f4fb; border-color: #e1dff1; }
.alumni-life-category.is-lost-found { color: #9b7140; background: #fff8ee; border-color: #f0e0c9; }
.alumni-life-category.is-activity-call { color: #9c5e78; background: #fcf3f6; border-color: #efdbe3; }
.alumni-life-category.is-pet-help { color: #5d8b6c; background: #f2f8f3; border-color: #d8e9dc; }
.alumni-life-category.is-alumni-help { color: #4d839f; background: #f0f8fb; border-color: #d7eaf2; }

.alumni-life-status {
  display: inline-flex;
  min-width: 58px;
  height: 22px;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  color: #3d8657;
  background: #eef8f1;
  border: 1px solid #d2ebd9;
  border-radius: 2px;
  font-size: 10px;
  line-height: 20px;
  white-space: nowrap;
}

.alumni-life-status.is-closed,
.alumni-life-status.is-disabled {
  color: #8c98a0;
  background: #f5f6f7;
  border-color: #e5e8ea;
}

.alumni-life-status.is-pending {
  color: #a17835;
  background: #fff8eb;
  border-color: #f1e1c2;
}

.alumni-life-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.alumni-life-row-actions .btn-text {
  height: 24px;
  padding: 0 4px;
  font-size: 11px;
}

.alumni-life-empty {
  display: flex;
  min-height: 238px;
  align-items: center;
  justify-content: center;
  padding: 38px 20px;
  color: #8a9aa4;
  flex-direction: column;
  text-align: center;
}

.alumni-life-empty .icon {
  width: 29px;
  height: 29px;
  margin-bottom: 9px;
  color: #adc4d0;
}

.alumni-life-empty strong {
  color: #66808f;
  font-size: 13px;
  font-weight: 500;
  line-height: 21px;
}

.alumni-life-empty span {
  margin-top: 3px;
  font-size: 11px;
  line-height: 18px;
}

.alumni-life-pagination {
  display: flex;
  min-height: 47px;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 8px 19px;
  color: #87959e;
  border-top: 1px solid #edf1f3;
  font-size: 11px;
}

.alumni-life-pagination .btn {
  min-width: 28px;
  padding: 0 7px;
}

/* Detail drawer and compose form share the established E10 overlay chrome. */
.detail-drawer .alumni-life-detail,
.app-modal .alumni-life-detail {
  min-width: 0;
}

.alumni-life-detail-header {
  display: grid;
  min-width: 0;
  gap: 13px;
  padding: 1px 0 15px;
  border-bottom: 1px solid #e4ebee;
  grid-template-columns: 5px minmax(0, 1fr) auto;
}

.alumni-life-detail-header::before {
  width: 5px;
  height: 46px;
  align-self: center;
  border-radius: 2px;
  background: #5e9fbd;
  content: "";
}

.alumni-life-detail-heading {
  min-width: 0;
}

.alumni-life-detail-heading .alumni-eyebrow {
  color: #7790a0;
  font-size: 10px;
  line-height: 16px;
}

.alumni-life-detail-heading h3 {
  margin: 2px 0 0;
  color: #3e5d6f;
  font-size: 17px;
  font-weight: 500;
  line-height: 26px;
}

.alumni-life-detail-heading p {
  margin: 3px 0 0;
  color: #8797a1;
  font-size: 11px;
  line-height: 18px;
}

.alumni-life-detail-status {
  align-self: start;
  margin-top: 4px;
}

.alumni-life-detail-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 16px;
  padding: 12px 0;
  color: #83929b;
  border-bottom: 1px solid #edf1f3;
  font-size: 11px;
  line-height: 18px;
}

.alumni-life-detail-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.alumni-life-detail-meta .icon {
  width: 13px;
  height: 13px;
  color: #8eabb9;
}

.alumni-life-article {
  padding: 18px 0 4px;
  color: #566d7b;
  font-size: 13px;
  line-height: 24px;
}

.alumni-life-article > :first-child {
  margin-top: 0;
}

.alumni-life-article p {
  margin: 0 0 13px;
}

.alumni-life-article h4,
.alumni-life-article h5 {
  margin: 19px 0 8px;
  color: #456477;
  font-size: 14px;
  font-weight: 500;
  line-height: 23px;
}

.alumni-life-article blockquote {
  margin: 15px 0;
  padding: 10px 14px;
  color: #668093;
  background: #f5f9fb;
  border-left: 3px solid #87bdd9;
  font-size: 12px;
  line-height: 21px;
}

.alumni-life-article ul,
.alumni-life-article ol {
  margin: 8px 0 16px;
  padding-left: 20px;
}

.alumni-life-article li + li {
  margin-top: 4px;
}

.alumni-life-media-grid {
  display: grid;
  gap: 8px;
  margin: 15px 0 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.alumni-life-media-grid figure {
  position: relative;
  min-width: 0;
  min-height: 110px;
  margin: 0;
  overflow: hidden;
  background: #edf3f6;
  border: 1px solid #e0e9ed;
  border-radius: 3px;
}

.alumni-life-media-grid img,
.alumni-life-media-grid video {
  display: block;
  width: 100%;
  height: 130px;
  object-fit: cover;
  transition: transform 0.22s ease;
}

.alumni-life-media-grid button {
  display: block;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
}

.alumni-life-media-grid button:hover img,
.alumni-life-media-grid button:focus-visible img {
  transform: scale(1.035);
}

.alumni-life-media-grid button:focus-visible {
  outline: 2px solid #5ba8d1;
  outline-offset: -2px;
}

.alumni-life-media-grid figcaption {
  padding: 5px 7px 6px;
  overflow: hidden;
  color: #82919b;
  background: #fff;
  font-size: 10px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-life-detail-footnote {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 19px;
  padding: 10px 12px;
  color: #77909e;
  background: #f8fbfc;
  border: 1px solid #e1ebef;
  border-radius: 3px;
  font-size: 11px;
  line-height: 19px;
}

.alumni-life-detail-footnote .icon {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: #73a6bf;
}

.alumni-life-comment-panel {
  margin-top: 19px;
  padding-top: 15px;
  border-top: 1px solid #e4ebee;
}

.alumni-life-comment-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.alumni-life-comment-panel h4 {
  margin: 0;
  color: #4b6676;
  font-size: 13px;
  font-weight: 500;
  line-height: 22px;
}

.alumni-life-comment-panel > header > span {
  color: #99a7af;
  font-size: 10px;
}

.alumni-life-comment-list {
  margin-top: 8px;
}

.alumni-life-comment {
  display: grid;
  gap: 9px;
  padding: 10px 0;
  border-bottom: 1px solid #eef2f4;
  grid-template-columns: 27px minmax(0, 1fr);
}

.alumni-life-comment:last-child {
  border-bottom: 0;
}

.alumni-life-comment-avatar {
  display: inline-flex;
  width: 27px;
  height: 27px;
  align-items: center;
  justify-content: center;
  color: #56809a;
  background: #e8f2f6;
  border-radius: 50%;
  font-size: 11px;
}

.alumni-life-comment-copy {
  min-width: 0;
}

.alumni-life-comment-copy > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.alumni-life-comment-copy strong {
  overflow: hidden;
  color: #567184;
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-life-comment-copy time {
  flex: 0 0 auto;
  color: #a1adb4;
  font-size: 10px;
}

.alumni-life-comment-copy p {
  margin: 2px 0 0;
  color: #71818b;
  font-size: 11px;
  line-height: 18px;
}

.alumni-life-compose {
  min-width: 0;
}

.alumni-life-compose-lead {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 15px;
  padding: 11px 12px;
  color: #6f8695;
  background: #f4f9fb;
  border: 1px solid #dcebf1;
  border-radius: 3px;
  font-size: 11px;
  line-height: 19px;
}

.alumni-life-compose-lead .icon {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: #559abf;
}

.alumni-life-compose-grid {
  display: grid;
  gap: 13px 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.alumni-life-compose .form-item,
.alumni-life-compose-field {
  min-width: 0;
}

.alumni-life-compose .form-item.wide,
.alumni-life-compose-field.is-wide {
  grid-column: 1 / -1;
}

.alumni-life-compose .form-item > label,
.alumni-life-compose-field > label {
  display: block;
  margin-bottom: 5px;
  color: #667985;
  font-size: 12px;
  line-height: 19px;
}

.alumni-life-compose .input,
.alumni-life-compose .select,
.alumni-life-compose textarea {
  width: 100%;
  color: #526673;
  font-size: 12px;
}

.alumni-life-compose textarea {
  min-height: 126px;
  padding: 7px 9px;
  resize: vertical;
}

.alumni-life-compose-help {
  display: block;
  margin-top: 4px;
  color: #9aa8b0;
  font-size: 10px;
  line-height: 16px;
}

.alumni-life-compose-upload {
  display: flex;
  min-height: 70px;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  color: #718692;
  background: #fbfdfe;
  border: 1px dashed #bdced7;
  border-radius: 3px;
}

.alumni-life-compose-upload > .icon {
  width: 21px;
  height: 21px;
  color: #7da9c0;
}

.alumni-life-compose-upload > span {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.alumni-life-compose-upload strong {
  color: #597181;
  font-size: 12px;
  font-weight: 500;
  line-height: 19px;
}

.alumni-life-compose-upload small {
  margin-top: 1px;
  color: #98a7af;
  font-size: 10px;
  line-height: 16px;
}

.alumni-life-compose-upload .btn {
  flex: 0 0 auto;
}

.alumni-life-compose-scope {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 13px;
  padding: 11px 12px;
  color: #71818b;
  background: #fafcfd;
  border: 1px solid #e5ecef;
  border-radius: 3px;
  font-size: 11px;
  line-height: 19px;
}

.alumni-life-compose-scope > strong {
  color: #5d7482;
  font-weight: 500;
}

.alumni-life-compose-scope label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.alumni-life-compose-scope input {
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: #328cc0;
}

@media (max-width: 1180px) {
  .alumni-life-filter-actions {
    margin-left: 0;
  }

  .alumni-life-filterbar {
    gap: 9px 10px;
  }

  .alumni-life-hero::after {
    right: 3%;
  }
}

@media (max-width: 760px) {
  body.alumni-member-route .app-shell .view-root {
    padding: 13px 12px 22px;
  }

  .alumni-life-page {
    gap: 10px;
  }

  .alumni-life-hero {
    min-height: 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
    padding: 18px 17px;
  }

  .alumni-life-hero::after {
    top: -89px;
    right: -57px;
    width: 160px;
    height: 160px;
  }

  .alumni-life-hero h2,
  .alumni-life-hero h3 {
    font-size: 18px;
    line-height: 27px;
  }

  .alumni-life-hero p {
    padding-right: 6px;
  }

  .alumni-life-hero-actions {
    width: 100%;
  }

  .alumni-life-hero-actions .btn {
    flex: 1 1 0;
  }

  .alumni-life-tabs {
    height: 44px;
    padding: 0 10px;
    overflow-x: auto;
  }

  .alumni-life-tabs > button,
  .alumni-life-tab {
    height: 44px;
    padding: 0 11px;
    font-size: 12px;
  }

  .alumni-life-filterbar {
    display: grid;
    padding: 12px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .alumni-life-filter-field,
  .alumni-life-filter-field.is-subject,
  .alumni-life-filter-field[data-field="subject"],
  .alumni-life-filter-actions {
    min-width: 0;
    width: 100%;
  }

  .alumni-life-filter-field.is-subject,
  .alumni-life-filter-field[data-field="subject"],
  .alumni-life-filter-field.is-date,
  .alumni-life-filter-field[data-field="date"],
  .alumni-life-filter-actions {
    grid-column: 1 / -1;
  }

  .alumni-life-filter-field .input,
  .alumni-life-filter-field .select,
  .alumni-life-filter-field.is-subject .input,
  .alumni-life-filter-field[data-field="subject"] .input,
  .alumni-life-filter-field.is-category .select,
  .alumni-life-filter-field[data-field="category"] .select {
    min-width: 0;
    width: 100%;
  }

  .alumni-life-date-range {
    min-width: 0;
    width: 100%;
  }

  .alumni-life-filter-actions {
    justify-content: flex-end;
  }

  .alumni-life-table {
    min-width: 820px;
  }

  .alumni-life-table th:first-child,
  .alumni-life-table td:first-child {
    padding-left: 12px;
  }

  .alumni-life-table th:last-child,
  .alumni-life-table td:last-child {
    padding-right: 12px;
  }

  .alumni-life-detail-header {
    grid-template-columns: 4px minmax(0, 1fr);
  }

  .alumni-life-detail-status {
    display: none;
  }

  .alumni-life-detail-meta {
    gap: 4px 11px;
  }

  .alumni-life-media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .alumni-life-compose-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .alumni-life-compose .form-item.wide,
  .alumni-life-compose-field.is-wide {
    grid-column: auto;
  }
}

@media (max-width: 420px) {
  .alumni-life-filterbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .alumni-life-filter-field,
  .alumni-life-filter-field.is-subject,
  .alumni-life-filter-field[data-field="subject"],
  .alumni-life-filter-field.is-date,
  .alumni-life-filter-field[data-field="date"],
  .alumni-life-filter-actions {
    grid-column: auto;
  }

  .alumni-life-filter-field {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .alumni-life-filter-label,
  .alumni-life-filter-field > label {
    line-height: 18px;
  }

  .alumni-life-filter-actions {
    justify-content: stretch;
  }

  .alumni-life-filter-actions .btn,
  .alumni-life-filter-more {
    flex: 1 1 0;
    justify-content: center;
  }

  .alumni-life-tabs > button,
  .alumni-life-tab {
    padding: 0 9px;
  }

  .alumni-life-media-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .alumni-life-media-grid img,
  .alumni-life-media-grid video {
    height: 165px;
  }

  .alumni-life-compose-upload {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .alumni-life-compose-upload .btn {
    width: 100%;
  }
}

/* Rendered life-square route hooks and its compact top-bar entry. */
.topbar-life-entry {
  position: relative;
  display: inline-flex;
  height: var(--kl-topbar-height);
  min-width: 104px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;
  color: rgba(255, 255, 255, 0.84);
  background: transparent;
  border: 0;
  font-size: 13px;
  white-space: nowrap;
}

.topbar-life-entry:hover,
.topbar-life-entry:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  outline: none;
}

.topbar-life-entry.active,
.topbar-life-entry[aria-current="page"] {
  color: #fff;
  background: rgba(0, 0, 0, 0.095);
}

.topbar-life-entry.active::after,
.topbar-life-entry[aria-current="page"]::after {
  position: absolute;
  right: 14px;
  bottom: 0;
  left: 14px;
  height: 3px;
  background: #fff;
  content: "";
}

.topbar-life-entry .icon {
  width: 16px;
  height: 16px;
}

.alumni-life-hero > div:last-child {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.alumni-life-hero > div:last-child .btn {
  min-width: 108px;
}

.alumni-life-tabs {
  background: #fff;
  border: 1px solid #e0e8ec;
  border-radius: 4px 4px 0 0;
}

.alumni-life-tabs > button > b {
  margin-left: 3px;
  color: inherit;
  font-size: 11px;
  font-weight: 400;
}

.alumni-life-filterbar {
  background: #fcfdfe;
  border: 1px solid #e0e8ec;
  border-top: 0;
  border-bottom: 0;
}

.alumni-life-filterbar > label {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.alumni-life-filterbar > label > span {
  flex: 0 0 auto;
  color: #74828c;
  font-size: 12px;
  line-height: 30px;
  white-space: nowrap;
}

.alumni-life-filterbar > label .input,
.alumni-life-filterbar > label .select {
  min-width: 0;
  height: 30px;
  color: #566976;
  font-size: 12px;
}

.alumni-life-filterbar > label:first-child .input {
  width: 216px;
}

.alumni-life-filterbar > label:nth-child(2) .select {
  width: 150px;
}

.alumni-life-list-head {
  display: flex;
  min-width: 0;
  min-height: 43px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 19px;
  background: #fff;
  border: 1px solid #e0e8ec;
  border-top: 0;
  border-bottom: 1px solid #e4eaed;
}

.alumni-life-list-head > div {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 10px;
}

.alumni-life-list-head strong {
  flex: 0 0 auto;
  color: #506b7c;
  font-size: 13px;
  font-weight: 500;
  line-height: 22px;
}

.alumni-life-list-head span {
  overflow: hidden;
  color: #9aa7ae;
  font-size: 10px;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-life-list-head > small {
  flex: 0 0 auto;
  color: #8a99a2;
  font-size: 11px;
  white-space: nowrap;
}

.alumni-life-table-wrap {
  border: 1px solid #e0e8ec;
  border-top: 0;
  border-radius: 0 0 4px 4px;
}

.alumni-life-table {
  min-width: 1130px;
}

.alumni-life-table .alumni-life-col-index { width: 5%; }
.alumni-life-table .alumni-life-col-title { width: 17%; }
.alumni-life-table .alumni-life-col-date { width: 9%; }
.alumni-life-table .alumni-life-col-city { width: 6%; }
.alumni-life-table .alumni-life-col-description { width: 16%; }
.alumni-life-table .alumni-life-col-location { width: 15%; }
.alumni-life-table .alumni-life-col-publisher { width: 10%; }
.alumni-life-table .alumni-life-col-published { width: 8%; }
.alumni-life-table .alumni-life-col-replies { width: 6%; }
.alumni-life-table .alumni-life-col-status { width: 8%; }

.alumni-life-table .alumni-life-sequence {
  width: 48px;
  color: #89969e;
  text-align: center;
}

.alumni-life-title {
  display: flex;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  gap: 7px;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  text-align: left;
}

.alumni-life-title:hover strong,
.alumni-life-title:focus-visible strong {
  color: #1d7bb0;
}

.alumni-life-title:focus-visible {
  outline: 1px solid #73b2d3;
  outline-offset: 2px;
}

.alumni-life-title > strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #3e6175;
  font-size: 12px;
  font-weight: 500;
  line-height: 19px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-life-title .alumni-life-category {
  flex: 0 0 auto;
  max-width: 76px;
  gap: 3px;
  padding: 0 5px;
}

.alumni-life-title .alumni-life-category .icon {
  width: 12px;
  height: 12px;
}

.alumni-life-title .alumni-life-category small {
  overflow: hidden;
  font-size: 9px;
  line-height: 19px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-life-description {
  display: block;
  overflow: hidden;
  color: #6c7d87;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-life-location {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  color: #71818b;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-life-location .icon {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  color: #8eabb9;
}

.alumni-life-publisher {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.alumni-life-publisher strong,
.alumni-life-publisher small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-life-publisher strong {
  color: #617886;
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
}

.alumni-life-publisher small {
  margin-top: 1px;
  color: #9aa7ae;
  font-size: 10px;
  line-height: 14px;
}

.alumni-life-replies {
  color: #6e8e9f;
  font-size: 11px;
  white-space: nowrap;
}

.alumni-life-row.is-closed td {
  color: #9ba6ac;
  background: #fcfcfc;
}

.alumni-life-row.is-closed .alumni-life-title > strong {
  color: #7c8c95;
}

.alumni-life-privacy-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  padding: 9px 11px;
  color: #8497a3;
  background: #f8fbfc;
  border: 1px solid #e0e8ec;
  border-top: 0;
  border-radius: 0 0 4px 4px;
  font-size: 10px;
  line-height: 17px;
}

.alumni-life-privacy-note .icon {
  width: 14px;
  height: 14px;
  margin-top: 1px;
  flex: 0 0 auto;
  color: #75a5bd;
}

.alumni-life-table-wrap + .alumni-life-privacy-note {
  margin-top: -1px;
}

.detail-drawer .alumni-life-detail {
  padding: 17px 18px 22px;
}

.alumni-life-detail-head {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 13px;
  padding: 1px 0 15px 12px;
  border-bottom: 1px solid #e4ebee;
  box-shadow: inset 4px 0 0 #5e9fbd;
}

.alumni-life-detail-head > div:first-child {
  min-width: 0;
}

.alumni-life-detail-head .alumni-life-category {
  margin-bottom: 6px;
}

.alumni-life-detail-head h3 {
  margin: 0;
  color: #3e5d6f;
  font-size: 17px;
  font-weight: 500;
  line-height: 27px;
}

.alumni-life-detail-head p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  margin: 5px 0 0;
  color: #8697a1;
  font-size: 11px;
  line-height: 18px;
}

.alumni-life-detail-head p .icon {
  width: 13px;
  height: 13px;
  color: #8eabb9;
}

.alumni-life-detail-head > div:last-child {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  padding-top: 2px;
}

.alumni-life-detail-head > div:last-child .btn {
  min-width: 72px;
}

.alumni-life-detail-layout {
  display: grid;
  min-width: 0;
  gap: 19px;
  padding-top: 17px;
  grid-template-columns: minmax(0, 1fr) 148px;
}

.alumni-life-detail-layout > article {
  min-width: 0;
}

.alumni-life-detail-layout > article > section + section {
  margin-top: 17px;
  padding-top: 15px;
  border-top: 1px solid #edf1f3;
}

.alumni-life-detail-layout h4 {
  margin: 0 0 8px;
  color: #4d6878;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
}

.alumni-life-detail-copy {
  margin: 0;
  color: #647783;
  font-size: 12px;
  line-height: 22px;
}

.alumni-life-price-note {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin: 10px 0 0;
  padding: 8px 9px;
  color: #90713e;
  background: #fffaf1;
  border: 1px solid #f2e4c9;
  border-radius: 3px;
  font-size: 11px;
  line-height: 18px;
}

.alumni-life-price-note .icon {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  flex: 0 0 auto;
  color: #c29350;
}

.alumni-life-detail-layout .alumni-detail-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.alumni-life-detail-layout .alumni-detail-list > div {
  min-height: 0;
  padding: 7px 8px;
  background: #fafcfd;
  border-color: #e8eef1;
}

.alumni-life-detail-layout > aside {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}

.alumni-life-detail-layout > aside > section {
  display: flex;
  min-height: 65px;
  flex-direction: column;
  padding: 9px 10px;
  background: #f8fbfc;
  border: 1px solid #e1ebef;
  border-radius: 3px;
}

.alumni-life-detail-layout > aside > section > span {
  color: #8c9ca6;
  font-size: 10px;
  line-height: 15px;
}

.alumni-life-detail-layout > aside > section > strong {
  margin-top: 3px;
  overflow: hidden;
  color: #59717f;
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-life-detail-layout > aside > section > small {
  display: -webkit-box;
  margin-top: 2px;
  overflow: hidden;
  color: #91a0a8;
  font-size: 10px;
  line-height: 16px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.alumni-life-detail-media > div {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.alumni-life-detail-media figure {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #f3f7f9;
  border: 1px solid #e0e9ed;
  border-radius: 3px;
}

.alumni-life-detail-media img {
  display: block;
  width: 100%;
  height: 122px;
  object-fit: cover;
}

.alumni-life-detail-media figcaption {
  padding: 5px 6px;
  overflow: hidden;
  color: #84949d;
  background: #fff;
  font-size: 10px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumni-life-compose .inline-message {
  margin-bottom: 15px;
}

.alumni-life-compose .field-label {
  display: block;
  margin: 0 0 12px;
}

.alumni-life-compose .field-label > span {
  display: block;
  margin-bottom: 5px;
  color: #657984;
  font-size: 12px;
  line-height: 18px;
}

.alumni-life-compose .field-label > span > b {
  color: #d06a6a;
  font-weight: 400;
}

.alumni-life-compose .alumni-life-compose-grid {
  margin-bottom: 0;
}

.alumni-life-compose .alumni-life-upload {
  display: flex;
  min-height: 70px;
  align-items: center;
  gap: 11px;
  margin: 1px 0 12px;
  padding: 10px 12px;
  color: #718692;
  background: #fbfdfe;
  border: 1px dashed #bdced7;
  border-radius: 3px;
}

.alumni-life-compose .alumni-life-upload > .icon {
  width: 21px;
  height: 21px;
  color: #7da9c0;
}

.alumni-life-compose .alumni-life-upload > span {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.alumni-life-compose .alumni-life-upload strong {
  color: #597181;
  font-size: 12px;
  font-weight: 500;
  line-height: 19px;
}

.alumni-life-compose .alumni-life-upload small {
  margin-top: 1px;
  color: #98a7af;
  font-size: 10px;
  line-height: 16px;
}

.alumni-life-compose .alumni-life-upload .btn {
  flex: 0 0 auto;
}

@media (max-width: 760px) {
  .topbar-life-entry {
    width: 43px;
    min-width: 43px;
    padding: 0;
  }

  .topbar-life-entry > span {
    display: none;
  }

  .topbar-life-entry.active::after,
  .topbar-life-entry[aria-current="page"]::after {
    right: 8px;
    left: 8px;
  }

  .alumni-life-hero > div:last-child {
    width: 100%;
  }

  .alumni-life-hero > div:last-child .btn {
    width: 100%;
  }

  .alumni-life-filterbar > label:first-child,
  .alumni-life-filterbar > label:nth-child(2),
  .alumni-life-filterbar > label:first-child .input,
  .alumni-life-filterbar > label:nth-child(2) .select {
    width: 100%;
  }

  .alumni-life-filterbar > label:first-child {
    grid-column: 1 / -1;
  }

  .alumni-life-list-head {
    padding: 8px 12px;
  }

  .alumni-life-list-head > div {
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .alumni-life-list-head span {
    max-width: 100%;
  }

  .alumni-life-table {
    min-width: 960px;
  }

  .detail-drawer .alumni-life-detail {
    padding: 14px 13px 18px;
  }

  .alumni-life-detail-head {
    padding-left: 10px;
  }

  .alumni-life-detail-head h3 {
    font-size: 16px;
    line-height: 25px;
  }

  .alumni-life-detail-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .alumni-life-detail-layout > aside {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .topbar-life-entry {
    width: 38px;
    min-width: 38px;
  }

  .alumni-life-filterbar > label:first-child {
    grid-column: auto;
  }

  .alumni-life-detail-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .alumni-life-detail-head > div:last-child {
    width: 100%;
    justify-content: space-between;
  }

  .alumni-life-detail-layout > aside {
    grid-template-columns: minmax(0, 1fr);
  }

  .alumni-life-detail-media > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .alumni-life-compose .alumni-life-upload {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .alumni-life-compose .alumni-life-upload .btn {
    width: 100%;
  }
}

/* The activity ledger is a vertical feed on phones. Keep the cover as a full-width
   lead image so WebViews cannot shrink it beside the copy into a thumbnail column. */
@media (max-width: 760px) {
  .alumni-ledger-activity-card {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: stretch;
    flex-direction: column;
  }

  .alumni-ledger-activity-cover {
    display: flex;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 156px;
    box-sizing: border-box;
    flex: 0 0 156px;
  }

  .alumni-ledger-activity-copy,
  .alumni-ledger-activity-foot {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    flex: 0 0 auto;
  }
}