/*
 * TeamWFA brand skin — single UI template for all admin consoles.
 * Tokens from twfa-desktop-preview (RustDesk/TeamViewer UI theme.css).
 * Wordmark: variant 5 (dark) / variant 2 (light) — mixed-weight Team+WFA, no slogans.
 */
html[data-ui-skin='twfa'] {
  /* Desktop preview :root — chrome + accent */
  --twfa-navy: #0f1929;          /* sidebar / titlebar chrome */
  --twfa-steel: #0060df;         /* primary / TeamViewer blue */
  --twfa-steel-hover: #0052c3;
  --twfa-offwhite: #e2e8f0;      /* text on dark */
  --twfa-unit: #1e2d42;          /* active nav */
  --twfa-rail: #1a2744;          /* elevated dark surface */
  --twfa-green: #10b981;         /* status / chart */
  --twfa-amber: #f59e0b;
  --twfa-success: #16a34a;
  --twfa-online-dot: #34d399;
  --twfa-online-text: #059669;
  /* Light canvas */
  --twfa-fg: #1a1d23;
  --twfa-content: #f0f2f5;
  --twfa-border: #e2e8f0;
  --twfa-muted: #6b7280;
  --twfa-muted-soft: #94a3b8;
  --twfa-body: #64748b;
  --twfa-navy-mid: #0052c3;
  --twfa-light: #cbd5e1;
  --twfa-white: #ffffff;
  --twfa-panel-soft: #f8fafc;
  --twfa-input-bg: #f3f4f6;
  --twfa-nav-muted: #64748b;
  --twfa-nav-icon: #475569;
  --twfa-accent: var(--twfa-steel);
  --twfa-radius: 0.5rem;         /* 8px fields / buttons */
  --twfa-radius-panel: 0.75rem;  /* 12px cards */

  --bs-primary: #0060df;
  --bs-primary-rgb: 0, 96, 223;
  --bs-success: #10b981;
  --bs-warning: #f59e0b;
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-font-monospace: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --bs-body-bg: #f0f2f5;
  --bs-body-color: #1a1d23;
  --bs-secondary-color: #6b7280;
  --bs-border-color: #e2e8f0;
  --bs-border-radius: 0.75rem;
  --bs-secondary-bg: #ffffff;
  --bs-tertiary-bg: #e2e8f0;
  --bs-link-color: #0060df;
  --bs-link-hover-color: #0052c3;
  --lte-sidebar-width: 220px;
  --lte-sidebar-icon-width: 1rem;
  color-scheme: light;
}

html[data-ui-skin='twfa'] body {
  font-family: var(--bs-body-font-family);
  font-weight: 400;
  background: var(--twfa-content) !important;
  color: var(--twfa-fg);
  -webkit-font-smoothing: antialiased;
}

/* Lock shell viewport so statusbar never scrolls away (login page unaffected) */
html[data-ui-skin='twfa']:has(body .app-wrapper) {
  height: 100%;
  overflow: hidden;
}

html[data-ui-skin='twfa'] body:has(.app-wrapper) {
  height: 100%;
  min-height: 0 !important;
  overflow: hidden;
}

html[data-ui-skin='twfa'] body:has(.app-wrapper) app-root {
  display: block;
  height: 100%;
  min-height: 0 !important;
  overflow: hidden;
}

/* Preview shell: titlebar full-bleed, then sidebar|main, then fixed statusbar */
html[data-ui-skin='twfa'] .app-wrapper {
  display: grid !important;
  grid-template-areas:
    'lte-app-header lte-app-header'
    'lte-app-sidebar lte-app-main'
    'lte-app-footer lte-app-footer';
  grid-template-rows: 44px minmax(0, 1fr) 24px !important;
  grid-template-columns: 220px minmax(0, 1fr) !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Titlebar — preview .titlebar */
html[data-ui-skin='twfa'] .app-header.twfa-titlebar,
html[data-ui-skin='twfa'] .twfa-titlebar {
  grid-area: lte-app-header;
  box-sizing: border-box;
  position: relative !important;
  top: auto !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  width: 100% !important;
  max-width: 100vw !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
  background: #0f1929 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: none !important;
  color: #e2e8f0 !important;
  z-index: 1040;
  overflow: visible !important;
  user-select: none;
}

html[data-ui-skin='twfa'] .twfa-titlebar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-shrink: 0;
}

html[data-ui-skin='twfa'] .twfa-titlebar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  color: #94a3b8;
  font-size: 12px;
  min-width: 0;
}

html[data-ui-skin='twfa'] .twfa-menu-toggle {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #94a3b8;
  display: inline-grid;
  place-items: center;
  padding: 0;
  flex-shrink: 0;
}

html[data-ui-skin='twfa'] .twfa-menu-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}

html[data-ui-skin='twfa'] .twfa-lang-wrap {
  position: relative;
  flex-shrink: 0;
}

html[data-ui-skin='twfa'] .twfa-lang-btn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: transparent;
  color: #e2e8f0;
  cursor: pointer;
  flex-shrink: 0;
}

html[data-ui-skin='twfa'] .twfa-lang-btn:hover,
html[data-ui-skin='twfa'] .twfa-lang-wrap.open .twfa-lang-btn {
  background: rgba(255, 255, 255, 0.1);
}

html[data-ui-skin='twfa'] .twfa-lang-flag {
  display: block;
  width: 20px;
  height: 14px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

html[data-ui-skin='twfa'] .twfa-lang-flag[data-lang='en'] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Cpath fill='%23012169' d='M0 0h60v30H0z'/%3E%3Cpath stroke='%23fff' stroke-width='6' d='M0 0l60 30M60 0L0 30'/%3E%3Cpath stroke='%23C8102E' stroke-width='2' d='M0 0l60 30M60 0L0 30'/%3E%3Cpath stroke='%23fff' stroke-width='10' d='M30 0v30M0 15h60'/%3E%3Cpath stroke='%23C8102E' stroke-width='6' d='M30 0v30M0 15h60'/%3E%3C/svg%3E");
}

html[data-ui-skin='twfa'] .twfa-lang-flag[data-lang='ru'] {
  background-image: linear-gradient(
    to bottom,
    #ffffff 0 33.33%,
    #0039a6 33.33% 66.66%,
    #d52b1e 66.66% 100%
  );
}

html[data-ui-skin='twfa'] .twfa-lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 160px;
  z-index: 70;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
  overflow: hidden;
  padding: 4px 0;
}

html[data-ui-skin='twfa'] .twfa-lang-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: 'Inter', system-ui, sans-serif;
  color: #1a1d23;
}

html[data-ui-skin='twfa'] .twfa-lang-item:hover {
  background: #f8fafc;
}

html[data-ui-skin='twfa'] .twfa-lang-item .twfa-lang-flag {
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
  flex-shrink: 0;
}

html[data-ui-skin='twfa'] .twfa-lang-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}

html[data-ui-skin='twfa'] .twfa-lang-check {
  color: #0060df;
  font-size: 14px;
  flex-shrink: 0;
}

html[data-ui-skin='twfa'] .app-sidebar {
  background: #0f1929 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: none;
  width: 220px !important;
  min-width: 220px;
  max-width: 220px;
  align-self: stretch;
  height: 100%;
  max-height: none;
}

/* Sidebar sits under full-width titlebar — fill the middle grid row (desktop).
   Classes live on <body>, not <html> — target body.sidebar-expand-lg. */
@media (min-width: 992px) {
  html[data-ui-skin='twfa'] body.sidebar-expand-lg.layout-fixed .app-sidebar,
  html[data-ui-skin='twfa'] body.sidebar-expand-lg .app-sidebar {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    max-height: none !important;
    height: 100% !important;
    margin-left: 0 !important;
  }

  html[data-ui-skin='twfa'] body.sidebar-expand-lg.layout-fixed .app-sidebar .sidebar-wrapper,
  html[data-ui-skin='twfa'] body.sidebar-expand-lg .app-sidebar .sidebar-wrapper,
  html[data-ui-skin='twfa'] .app-sidebar .sidebar-wrapper {
    height: 100% !important;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

/* Status bar — preview .statusbar */
html[data-ui-skin='twfa'] .app-footer.twfa-statusbar,
html[data-ui-skin='twfa'] .twfa-statusbar {
  grid-area: lte-app-footer;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100vw !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px;
  background: #0f1929 !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  color: #475569 !important;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px !important;
  line-height: 1 !important;
  box-shadow: none !important;
  overflow: hidden;
  position: relative !important;
  bottom: auto !important;
  z-index: 1035;
  flex-shrink: 0;
}

html[data-ui-skin='twfa'] .twfa-statusbar .statusbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

html[data-ui-skin='twfa'] .twfa-statusbar .statusbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
  color: #475569;
}

html[data-ui-skin='twfa'] .twfa-statusbar .statusbar-license {
  color: #475569 !important;
  white-space: nowrap;
  font-size: 11px !important;
}

/* Brand — preview .titlebar .brand */
html[data-ui-skin='twfa'] .twfa-titlebar .brand {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 !important;
  margin: 0 !important;
  color: #e2e8f0 !important;
  text-decoration: none !important;
  border: 0 !important;
  background: transparent !important;
  line-height: 1;
}

html[data-ui-skin='twfa'] .twfa-titlebar .brand:hover,
html[data-ui-skin='twfa'] .twfa-titlebar .brand:focus {
  color: #e2e8f0 !important;
  text-decoration: none !important;
}

html[data-ui-skin='twfa'] .twfa-titlebar .brand-mark {
  width: 28px !important;
  height: 28px !important;
  flex-shrink: 0;
  display: block !important;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  visibility: visible !important;
  opacity: 1 !important;
}

html[data-ui-skin='twfa'] .twfa-titlebar .brand-wordmark {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 18px !important;
  letter-spacing: -0.01em;
  line-height: 1 !important;
  color: #e2e8f0 !important;
  white-space: nowrap;
  visibility: visible !important;
  opacity: 1 !important;
}

html[data-ui-skin='twfa'] .twfa-titlebar .brand-wordmark .team {
  font-weight: 400 !important;
  color: #e2e8f0 !important;
}

html[data-ui-skin='twfa'] .twfa-titlebar .brand-wordmark .wfa {
  font-weight: 900 !important;
  color: #e2e8f0 !important;
}

/* Hide empty AdminLTE brand slot if present */
html[data-ui-skin='twfa'] .app-sidebar .sidebar-brand {
  display: none !important;
}

html[data-ui-skin='twfa'] .twfa-sidebar-stack {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

html[data-ui-skin='twfa'] .twfa-sidebar-stack > .sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overflow-anchor: none;
  overscroll-behavior: contain;
}

html[data-ui-skin='twfa'] .sidebar-menu .nav-link {
  overflow-anchor: none;
}

/* Org picker — desktop preview .org-trigger / .org-menu */
html[data-ui-skin='twfa'] .org-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

html[data-ui-skin='twfa'] .org-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 13.75rem;
  max-width: 20rem;
  padding: 0.3rem 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: #e2e8f0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.15s;
}

html[data-ui-skin='twfa'] .org-trigger:hover {
  background: rgba(255, 255, 255, 0.1);
}

html[data-ui-skin='twfa'] .org-trigger .org-ico {
  color: var(--twfa-steel);
  font-size: 0.8125rem;
  flex-shrink: 0;
}

html[data-ui-skin='twfa'] .org-trigger .org-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

html[data-ui-skin='twfa'] .org-trigger .org-name {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #e2e8f0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

html[data-ui-skin='twfa'] .org-trigger .org-sub {
  display: block;
  font-size: 0.625rem;
  color: #94a3b8;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

html[data-ui-skin='twfa'] .org-trigger .org-chev {
  font-size: 0.75rem;
  color: #94a3b8;
  flex-shrink: 0;
}

html[data-ui-skin='twfa'] .org-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 16.25rem;
  z-index: 1060;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
  overflow: hidden;
}

html[data-ui-skin='twfa'] .org-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 0;
  border-bottom: 1px solid #f1f5f9;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

html[data-ui-skin='twfa'] .org-item:last-child {
  border-bottom: 0;
}

html[data-ui-skin='twfa'] .org-item:hover {
  background: #f8fafc;
}

html[data-ui-skin='twfa'] .org-item .badge {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 96, 223, 0.12);
  color: var(--twfa-steel);
  padding: 0;
  font-size: 0.8125rem;
}

html[data-ui-skin='twfa'] .org-item .main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

html[data-ui-skin='twfa'] .org-item .name {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1a1d23;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

html[data-ui-skin='twfa'] .org-item .sub {
  display: block;
  font-size: 0.75rem;
  color: #94a3b8;
  line-height: 1.25;
}

html[data-ui-skin='twfa'] .org-item .check {
  color: var(--twfa-steel);
  font-size: 0.875rem;
  flex-shrink: 0;
}

/* Sidebar profile — desktop preview .profile */
html[data-ui-skin='twfa'] .sidebar-profile {
  margin-top: auto;
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
}

html[data-ui-skin='twfa'] .sidebar-profile .profile-main {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  flex: 1;
  text-decoration: none;
  color: inherit;
}

html[data-ui-skin='twfa'] .sidebar-profile .avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--twfa-steel);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

html[data-ui-skin='twfa'] .sidebar-profile .meta {
  min-width: 0;
  flex: 1;
}

html[data-ui-skin='twfa'] .sidebar-profile .name {
  color: var(--twfa-offwhite);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-ui-skin='twfa'] .sidebar-profile .role {
  color: #64748b;
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-ui-skin='twfa'] .sidebar-profile .profile-logout {
  margin-left: auto;
  color: #475569;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  border: 0;
  background: transparent;
  border-radius: 0.5rem;
  padding: 0;
  flex-shrink: 0;
}

html[data-ui-skin='twfa'] .sidebar-profile .profile-logout:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
}

html[data-ui-skin='twfa'] .sidebar-profile .profile-logout svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[data-ui-skin='twfa'] .sidebar-wrapper > .sidebar-nav,
html[data-ui-skin='twfa'] .sidebar-wrapper > nav {
  padding: 0.75rem 0; /* desktop nav.side-nav: 12px 0 */
  margin-top: 0 !important;
}

/* Main menu — preview .nav-item: Inter 400 13px/1.2 */
html[data-ui-skin='twfa'] .sidebar-menu,
html[data-ui-skin='twfa'] .sidebar-menu .nav-link,
html[data-ui-skin='twfa'] .sidebar-menu .nav-link p {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

html[data-ui-skin='twfa'] .sidebar-menu .nav-link {
  color: var(--twfa-nav-muted) !important;
  border-radius: 0;
  margin: 0;
  padding: 0.5rem 1rem !important; /* 8px 16px — desktop .nav-item */
  border-left: 2px solid transparent;
  transition: background 0.15s ease, color 0.15s ease;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 0.625rem; /* 10px */
  min-height: 0;
  overflow-anchor: none;
}

html[data-ui-skin='twfa'] .sidebar-menu .nav-link p {
  margin: 0;
  padding-left: 0 !important; /* AdminLTE adds .5rem; preview uses gap only */
  display: flex !important;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

html[data-ui-skin='twfa'] .sidebar-menu .nav-arrow {
  margin-left: auto;
  margin-right: 0;
  float: none;
  font-size: 0.875rem;
  line-height: 1;
  transition: transform 0.15s ease;
}

html[data-ui-skin='twfa'] .sidebar-menu .nav-item.menu-open > .nav-link .nav-arrow {
  transform: rotate(90deg);
}

html[data-ui-skin='twfa'] .sidebar-menu .nav-link:hover {
  color: var(--twfa-offwhite) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

html[data-ui-skin='twfa'] .sidebar-menu .nav-link:focus,
html[data-ui-skin='twfa'] .sidebar-menu .nav-link:focus-visible {
  color: var(--twfa-nav-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
}

html[data-ui-skin='twfa'] .sidebar-menu .nav-link.active,
html[data-ui-skin='twfa'] .sidebar-menu .nav-link.active:focus,
html[data-ui-skin='twfa'] .sidebar-menu .nav-link.active:focus-visible {
  color: var(--twfa-offwhite) !important;
  background: var(--twfa-unit) !important;
  border-left-color: var(--twfa-steel);
  font-weight: 400 !important; /* preview keeps Regular on active */
  box-shadow: none;
}

html[data-ui-skin='twfa'] .sidebar-menu .nav-link.active p {
  font-weight: 400 !important;
}

html[data-ui-skin='twfa'] .sidebar-menu .nav-icon {
  margin-right: 0; /* gap on .nav-link */
  width: 1rem;
  height: 1rem;
  font-size: 1rem; /* 16px — desktop .nav-item .ico */
  line-height: 1;
  text-align: center;
  flex-shrink: 0;
  color: var(--twfa-nav-icon);
}

html[data-ui-skin='twfa'] .sidebar-menu .nav-link.active .nav-icon {
  color: var(--twfa-steel);
}

html[data-ui-skin='twfa'] .sidebar-menu .nav-treeview .nav-link {
  padding: 0.5rem 1rem 0.5rem 2.25rem !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}

html[data-ui-skin='twfa'] .sidebar-menu .nav-treeview .nav-link p {
  font-size: 13px !important;
  font-weight: 400 !important;
}

html[data-ui-skin='twfa'] .sidebar-menu .nav-treeview .nav-link.active {
  background: rgba(0, 96, 223, 0.14) !important;
  border-left-color: transparent;
  font-weight: 400 !important;
}

html[data-ui-skin='twfa'] .app-main,
html[data-ui-skin='twfa'] .app-content {
  background: var(--twfa-content);
}

/* Only main content scrolls; header/footer stay put */
html[data-ui-skin='twfa'] .app-main {
  grid-area: lte-app-main;
  min-height: 0 !important;
  max-height: 100%;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding-bottom: 0 !important;
}

html[data-ui-skin='twfa'] .app-main > .app-content {
  min-height: 0;
}

/* Design page padding (TV UI: 24px) */
html[data-ui-skin='twfa'] .app-content {
  padding: 1.5rem !important;
}

html[data-ui-skin='twfa'] .app-content-header h3,
html[data-ui-skin='twfa'] .app-content-header .mb-0 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--twfa-fg);
  letter-spacing: -0.01em;
}

html[data-ui-skin='twfa'] .app-content-header .text-secondary,
html[data-ui-skin='twfa'] .app-content-header .small {
  color: var(--twfa-muted-soft) !important;
  font-size: 0.75rem;
}

/* Panels — white, var(--twfa-border) border, 12px radius (StatCard / table panel) */
html[data-ui-skin='twfa'] .card {
  background: var(--twfa-white);
  border: 1px solid var(--twfa-border);
  border-radius: var(--twfa-radius-panel);
  box-shadow: none;
  color: var(--twfa-fg);
  overflow: hidden;
}

html[data-ui-skin='twfa'] .card-header {
  background: var(--twfa-white);
  border-bottom: 1px solid var(--twfa-border);
  padding: 0.85rem 1.25rem;
}

html[data-ui-skin='twfa'] .card-footer {
  background: var(--twfa-white);
  border-top: 1px solid var(--twfa-border);
  padding: 0.85rem 1.25rem;
}

html[data-ui-skin='twfa'] .card-body {
  padding: 1.25rem;
}

html[data-ui-skin='twfa'] .card-title {
  color: var(--twfa-fg);
  font-family: var(--bs-body-font-family);
  font-weight: 600;
  font-size: 0.8125rem; /* 13px — block title, under page title */
  letter-spacing: -0.01em;
  margin: 0;
}

html[data-ui-skin='twfa'] .twfa-soft {
  background: var(--twfa-panel-soft);
  border: 1px solid var(--twfa-border);
  border-radius: var(--twfa-radius);
  padding: 0.65rem 0.85rem;
}

/* Section switcher (Users → All / Invitations, org detail tabs, …) */
html[data-ui-skin='twfa'] .nav-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid var(--twfa-border);
  border-radius: var(--twfa-radius-panel);
  background: var(--twfa-panel-soft);
  padding: 0.25rem;
  margin-bottom: 0;
}

html[data-ui-skin='twfa'] .nav-tabs .nav-item {
  margin-bottom: 0;
}

html[data-ui-skin='twfa'] .nav-tabs .nav-link {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid transparent;
  border-radius: var(--twfa-radius);
  background: transparent;
  color: var(--twfa-muted);
  font-family: var(--bs-body-font-family);
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.25;
  padding: 0.45rem 0.95rem;
  margin: 0;
  cursor: pointer;
}

html[data-ui-skin='twfa'] .nav-tabs .nav-link:hover,
html[data-ui-skin='twfa'] .nav-tabs .nav-link:focus {
  color: var(--twfa-fg);
  background: rgba(255, 255, 255, 0.65);
  border-color: transparent;
  isolation: isolate;
}

html[data-ui-skin='twfa'] .nav-tabs .nav-link.active {
  color: var(--twfa-fg);
  background: var(--twfa-white);
  border-color: var(--twfa-border);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* Page / tab intro — readable, not field-hint size */
html[data-ui-skin='twfa'] .section-intro {
  font-family: var(--bs-body-font-family);
  font-size: 0.8125rem;
  line-height: 1.45;
  font-weight: 400;
  color: var(--twfa-muted) !important;
}

html[data-ui-skin='twfa'] .btn-primary {
  background: var(--twfa-steel);
  border-color: var(--twfa-steel);
  color: var(--twfa-white);
  font-weight: 600;
  border-radius: var(--twfa-radius);
}

html[data-ui-skin='twfa'] .btn-primary:hover,
html[data-ui-skin='twfa'] .btn-primary:focus {
  background: var(--twfa-steel-hover);
  border-color: var(--twfa-steel-hover);
  color: var(--twfa-white);
}

/* Header Add — desktop preview .btn-add */
html[data-ui-skin='twfa'] .btn-add {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  border-radius: var(--twfa-radius);
  padding: 0.375rem 0.75rem;
  background: var(--twfa-steel);
  color: var(--twfa-white);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: none;
}
html[data-ui-skin='twfa'] .btn-add:hover,
html[data-ui-skin='twfa'] .btn-add:focus {
  background: var(--twfa-steel-hover);
  color: var(--twfa-white);
}
html[data-ui-skin='twfa'] .btn-add:disabled {
  opacity: 0.65;
  cursor: default;
}
html[data-ui-skin='twfa'] .btn-add .ti {
  font-size: 0.875rem;
  line-height: 1;
}

html[data-ui-skin='twfa'] .btn-outline-secondary {
  border: 1px solid var(--twfa-light);
  color: var(--twfa-fg);
  background: var(--twfa-white);
  border-radius: var(--twfa-radius);
}

html[data-ui-skin='twfa'] .btn-outline-secondary:hover {
  background: var(--twfa-panel-soft);
  border-color: var(--twfa-muted);
  color: var(--twfa-fg);
}

html[data-ui-skin='twfa'] .btn-sm {
  border-radius: var(--twfa-radius);
}

/* Table row action — icon-btn (desktop preview .icon-btn) */
html[data-ui-skin='twfa'] .table-action-btn {
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: var(--twfa-radius);
  background: transparent;
  color: var(--twfa-muted);
  line-height: 1;
  box-shadow: none;
}
html[data-ui-skin='twfa'] .table-action-btn:hover,
html[data-ui-skin='twfa'] .table-action-btn:focus,
html[data-ui-skin='twfa'] .table-action-btn.show,
html[data-ui-skin='twfa'] .dropdown.show > .table-action-btn {
  background: var(--twfa-panel-soft);
  color: var(--twfa-fg);
}
html[data-ui-skin='twfa'] .table-action-btn .ti {
  font-size: 1.125rem;
}

/* Table action menu — matches desktop .org-menu */
html[data-ui-skin='twfa'] .table-action-menu.dropdown-menu {
  min-width: 12.5rem;
  padding: 0.35rem;
  border: 1px solid var(--twfa-border);
  border-radius: var(--twfa-radius-panel);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
  background: var(--twfa-white);
}
html[data-ui-skin='twfa'] .table-action-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: var(--twfa-radius);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--twfa-fg);
  background: transparent;
}
html[data-ui-skin='twfa'] .table-action-menu .dropdown-item .ti {
  font-size: 1rem;
  color: var(--twfa-muted);
  width: 1.125rem;
  text-align: center;
  flex-shrink: 0;
}
html[data-ui-skin='twfa'] .table-action-menu .dropdown-item:hover,
html[data-ui-skin='twfa'] .table-action-menu .dropdown-item:focus {
  background: var(--twfa-panel-soft);
  color: var(--twfa-fg);
}
html[data-ui-skin='twfa'] .table-action-menu .dropdown-item:hover .ti,
html[data-ui-skin='twfa'] .table-action-menu .dropdown-item:focus .ti {
  color: var(--twfa-fg);
}
html[data-ui-skin='twfa'] .table-action-menu .dropdown-item.text-danger,
html[data-ui-skin='twfa'] .table-action-menu .dropdown-item.text-danger .ti {
  color: #dc3545;
}
html[data-ui-skin='twfa'] .table-action-menu .dropdown-item.text-danger:hover,
html[data-ui-skin='twfa'] .table-action-menu .dropdown-item.text-danger:focus {
  background: rgba(220, 53, 69, 0.08);
  color: #dc3545;
}
html[data-ui-skin='twfa'] .table-action-menu .dropdown-divider {
  margin: 0.35rem 0.25rem;
  border-color: var(--twfa-border);
  opacity: 1;
}

html[data-ui-skin='twfa'] .form-control,
html[data-ui-skin='twfa'] .form-select {
  border-radius: var(--twfa-radius); /* 8px — desktop */
  background-color: var(--twfa-white);
  border: 1px solid var(--twfa-border);
  color: var(--twfa-fg);
  font-family: var(--bs-body-font-family);
  font-size: 0.8125rem; /* 13px */
  font-weight: 400;
  line-height: 1.2;
  min-height: 2.75rem; /* 44px — desktop --field-h */
  padding: 0.5rem 0.75rem;
  box-shadow: none;
}

html[data-ui-skin='twfa'] textarea.form-control {
  height: auto;
  min-height: 5rem;
  padding: 0.5rem 0.75rem;
  line-height: 1.4;
}

html[data-ui-skin='twfa'] .form-control.form-control-sm,
html[data-ui-skin='twfa'] .form-select.form-select-sm,
html[data-ui-skin='twfa'] .form-control-sm,
html[data-ui-skin='twfa'] .form-select-sm {
  min-height: 1.875rem;
  height: 1.875rem;
  font-size: 0.75rem;
  line-height: 1.2;
  padding: 0.2rem 0.5rem;
  border-radius: 0.5rem;
}

html[data-ui-skin='twfa'] .input-group-text {
  font-size: 0.8125rem;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border-radius: var(--twfa-radius);
  border-color: var(--twfa-border);
  background: var(--twfa-input-bg);
  color: var(--twfa-muted);
}

html[data-ui-skin='twfa'] .input-group-sm > .form-control,
html[data-ui-skin='twfa'] .input-group-sm > .form-select,
html[data-ui-skin='twfa'] .input-group-sm > .input-group-text,
html[data-ui-skin='twfa'] .input-group-sm > .btn {
  min-height: 2rem;
  height: 2rem;
  font-size: 0.75rem;
}

html[data-ui-skin='twfa'] .form-control:focus,
html[data-ui-skin='twfa'] .form-select:focus {
  background-color: var(--twfa-white);
  border-color: var(--twfa-steel);
  color: var(--twfa-fg);
  box-shadow: 0 0 0 0.15rem rgba(0, 96, 223, 0.20);
}

html[data-ui-skin='twfa'] .form-control:disabled,
html[data-ui-skin='twfa'] .form-select:disabled {
  background-color: var(--twfa-input-bg);
  border-color: var(--twfa-border);
  color: var(--twfa-muted);
  opacity: 1;
}

/* Field caption — desktop .modal-field label */
html[data-ui-skin='twfa'] .form-label {
  color: var(--twfa-muted-soft);
  font-weight: 500;
  font-size: 0.6875rem; /* 11px */
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.375rem;
}

/* Field / block hints — quieter than page intro; Inter, not body-sized */
html[data-ui-skin='twfa'] .form-hint,
html[data-ui-skin='twfa'] .form-text,
html[data-ui-skin='twfa'] .card .form-hint,
html[data-ui-skin='twfa'] .modal .form-hint {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--bs-body-font-family);
  font-size: 0.6875rem !important; /* 11px — below page intro (13px) */
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--twfa-muted-soft) !important;
}

html[data-ui-skin='twfa'] .form-hint.text-secondary,
html[data-ui-skin='twfa'] .form-hint.small,
html[data-ui-skin='twfa'] .form-text.text-secondary {
  font-size: 0.6875rem !important;
  color: var(--twfa-muted-soft) !important;
}

/* Page intro under section title (Users, General, …) — keep readable */
html[data-ui-skin='twfa'] .text-secondary {
  color: var(--twfa-muted) !important;
}

html[data-ui-skin='twfa'] .small,
html[data-ui-skin='twfa'] small {
  font-size: 0.75rem;
}

html[data-ui-skin='twfa'] .page-header .text-secondary,
html[data-ui-skin='twfa'] .app-content-header .text-secondary {
  font-family: var(--bs-body-font-family);
  font-size: 0.8125rem; /* 13px section hint — OK as-is */
  line-height: 1.45;
  font-weight: 400;
}

/* Secondary line under a card/block title */
html[data-ui-skin='twfa'] .card-header .text-secondary,
html[data-ui-skin='twfa'] .card-header-main .text-secondary {
  font-family: var(--bs-body-font-family);
  font-size: 0.6875rem !important;
  line-height: 1.4;
  font-weight: 400;
  color: var(--twfa-muted-soft) !important;
}

html[data-ui-skin='twfa'] .card-body > .text-secondary:not(.form-hint),
html[data-ui-skin='twfa'] .card-body > .alert {
  font-size: 0.75rem;
  line-height: 1.45;
}

html[data-ui-skin='twfa'] p.text-secondary,
html[data-ui-skin='twfa'] .login-card .text-secondary,
html[data-ui-skin='twfa'] .page-center .text-secondary {
  font-family: var(--bs-body-font-family);
  font-size: 0.8125rem;
  line-height: 1.45;
}

html[data-ui-skin='twfa'] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--twfa-fg);
  --bs-table-border-color: #f1f5f9;
  --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: rgba(248, 250, 252, 0.7);
  margin-bottom: 0;
}

html[data-ui-skin='twfa'] .table thead th {
  color: var(--twfa-muted-soft) !important;
  font-family: var(--bs-body-font-family);
  font-size: 0.75rem; /* 12px — desktop .dev-table th */
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  border-bottom-color: var(--twfa-border) !important;
  background: var(--twfa-white);
  padding: 0.75rem 1.25rem;
  white-space: nowrap;
}

html[data-ui-skin='twfa'] .table tbody td {
  padding: 0.75rem 1.25rem;
  border-color: var(--twfa-border);
  vertical-align: middle;
  font-family: var(--bs-body-font-family);
  font-size: 0.75rem; /* 12px — desktop .dev-table td */
  font-weight: 400;
  color: var(--twfa-body);
}

/* List pager — «Показано…» / «Строк на странице» */
html[data-ui-skin='twfa'] .list-pager-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--twfa-border);
  font-family: var(--bs-body-font-family);
  font-size: 0.75rem; /* 12px */
  font-weight: 400;
  line-height: 1.4;
  color: var(--twfa-muted) !important;
}

html[data-ui-skin='twfa'] .card-footer > .list-pager-bar,
html[data-ui-skin='twfa'] .card-footer app-page-size-bar .list-pager-bar {
  padding: 0;
  border-top: 0;
}

html[data-ui-skin='twfa'] .list-pager-bar .text-secondary,
html[data-ui-skin='twfa'] .list-pager-bar label,
html[data-ui-skin='twfa'] .list-pager-bar .small {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  line-height: inherit !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--twfa-muted) !important;
  margin: 0;
}

html[data-ui-skin='twfa'] .list-pager-bar .form-select,
html[data-ui-skin='twfa'] .list-pager-bar .form-select-sm {
  min-height: 1.75rem;
  height: 1.75rem;
  font-size: 0.75rem;
  line-height: 1.2;
  padding: 0.15rem 1.75rem 0.15rem 0.5rem;
  color: var(--twfa-fg);
}

html[data-ui-skin='twfa'] .list-pager-bar .btn-sm {
  font-size: 0.75rem;
  line-height: 1.2;
  padding: 0.2rem 0.55rem;
}

html[data-ui-skin='twfa'] .modal-content {
  background: var(--twfa-white);
  border: 1px solid var(--twfa-border);
  color: var(--twfa-fg);
  border-radius: var(--twfa-radius-panel);
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.16);
}

html[data-ui-skin='twfa'] .modal-header,
html[data-ui-skin='twfa'] .modal-footer {
  border-color: var(--twfa-border);
}

html[data-ui-skin='twfa'] .page-pretitle,
html[data-ui-skin='twfa'] .subheader {
  color: var(--twfa-muted-soft) !important;
  font-family: var(--bs-body-font-family);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

html[data-ui-skin='twfa'] .page-title {
  color: var(--twfa-fg);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}

html[data-ui-skin='twfa'] .badge {
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  line-height: 1.25;
  padding: 0.3em 0.65em;
  color: var(--twfa-white) !important;
}

html[data-ui-skin='twfa'] .badge.bg-primary,
html[data-ui-skin='twfa'] .badge.text-bg-primary,
html[data-ui-skin='twfa'] .badge.bg-blue,
html[data-ui-skin='twfa'] .badge.bg-azure {
  background-color: var(--twfa-steel) !important;
  color: var(--twfa-white) !important;
}

html[data-ui-skin='twfa'] .badge.bg-green {
  background-color: var(--twfa-green) !important;
  color: var(--twfa-white) !important;
}

html[data-ui-skin='twfa'] .badge.bg-red,
html[data-ui-skin='twfa'] .badge.bg-danger {
  background-color: #e25555 !important;
  color: var(--twfa-white) !important;
}

html[data-ui-skin='twfa'] .badge.bg-orange,
html[data-ui-skin='twfa'] .badge.bg-warning {
  background-color: var(--twfa-amber) !important;
  color: var(--twfa-fg) !important;
}

html[data-ui-skin='twfa'] .badge.bg-purple {
  background-color: #6b5b95 !important;
  color: var(--twfa-white) !important;
}

html[data-ui-skin='twfa'] .badge.bg-secondary {
  background-color: var(--twfa-muted) !important;
  color: var(--twfa-white) !important;
}

html[data-ui-skin='twfa'] .badge.bg-azure-lt,
html[data-ui-skin='twfa'] .badge.bg-blue-lt {
  background-color: var(--twfa-panel-soft) !important;
  color: var(--twfa-fg) !important;
  border: 1px solid var(--twfa-border);
}

html[data-ui-skin='twfa'] .alert {
  border: 1px solid var(--twfa-border);
  background: var(--twfa-panel-soft);
  color: var(--twfa-fg);
  border-radius: var(--twfa-radius);
}

html[data-ui-skin='twfa'] .alert-danger {
  background: var(--twfa-panel-soft);
  border-color: var(--twfa-amber);
  color: var(--twfa-fg);
}

html[data-ui-skin='twfa'] .alert-success {
  background: var(--twfa-panel-soft);
  border-color: var(--twfa-green);
  color: var(--twfa-fg);
}

html[data-ui-skin='twfa'] .list-group-item {
  border-color: var(--twfa-border);
  background: var(--twfa-white);
}

/* Dashboard StatCard — white panel + tinted icon tile */
html[data-ui-skin='twfa'] .twfa-stat-box {
  background: var(--twfa-white) !important;
  border: 1px solid var(--twfa-border);
  border-radius: var(--twfa-radius-panel);
  color: var(--twfa-fg) !important;
  margin-bottom: 0;
  min-height: auto;
  box-shadow: none;
  display: block;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

html[data-ui-skin='twfa'] a.twfa-stat-box:hover {
  transform: none;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  border-color: var(--twfa-light);
  color: var(--twfa-fg) !important;
}

html[data-ui-skin='twfa'] .twfa-stat-box .inner {
  padding: 1.25rem;
  position: relative;
  z-index: 1;
}

html[data-ui-skin='twfa'] .twfa-stat-box .twfa-stat-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0;
}

html[data-ui-skin='twfa'] .twfa-stat-box .twfa-stat-top:has(+ .twfa-stat-sub) {
  margin-bottom: 0.75rem;
}

html[data-ui-skin='twfa'] .twfa-stat-box .twfa-stat-label,
html[data-ui-skin='twfa'] .twfa-stat-box .inner > p {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--twfa-muted-soft);
}

html[data-ui-skin='twfa'] .twfa-stat-box .inner h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--twfa-fg);
  margin: 0;
  line-height: 1.2;
}

html[data-ui-skin='twfa'] .twfa-stat-box .twfa-stat-sub {
  font-size: 0.75rem;
  color: var(--twfa-muted);
  margin: 0;
}

html[data-ui-skin='twfa'] .twfa-stat-box .icon {
  position: static;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  opacity: 1;
  line-height: 1;
}

html[data-ui-skin='twfa'] .twfa-stat-box.bg-info .icon,
html[data-ui-skin='twfa'] .twfa-stat-box.bg-primary .icon {
  background: rgba(0, 96, 223, 0.12);
  color: var(--twfa-steel);
}

html[data-ui-skin='twfa'] .twfa-stat-box.bg-success .icon {
  background: rgba(16, 185, 129, 0.14);
  color: var(--twfa-green);
}

html[data-ui-skin='twfa'] .twfa-stat-box.bg-warning .icon {
  background: rgba(245, 158, 11, 0.16);
  color: var(--twfa-amber);
}

html[data-ui-skin='twfa'] .twfa-stat-box.bg-info,
html[data-ui-skin='twfa'] .twfa-stat-box.bg-success,
html[data-ui-skin='twfa'] .twfa-stat-box.bg-warning,
html[data-ui-skin='twfa'] .twfa-stat-box.bg-primary {
  background: var(--twfa-white) !important;
  color: var(--twfa-fg) !important;
}

html[data-ui-skin='twfa'] .row > [class*='col'] > .twfa-stat-box {
  height: 100%;
}

html[data-ui-skin='twfa'] .row.g-3,
html[data-ui-skin='twfa'] .row.gy-3 {
  --bs-gutter-y: 1rem;
}

html[data-ui-skin='twfa'] .small-box {
  border-radius: var(--twfa-radius-panel);
  overflow: hidden;
  border: 1px solid var(--twfa-border);
  box-shadow: none;
  background: var(--twfa-white);
}

html[data-ui-skin='twfa'] .page-center {
  background: var(--twfa-content);
}

/* Login: Layout 2 — same mixed-weight wordmark on light, outline tile, no slogan */
html[data-ui-skin='twfa'] .login-brand.brand-v2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1.25rem; /* gap-5 */
}

html[data-ui-skin='twfa'] .login-brand.brand-v2 .brand-icon {
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  display: block;
  border-radius: 0.75rem;
}

html[data-ui-skin='twfa'] .login-brand.brand-v2 .brand-wordmark {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 2.25rem; /* 36px */
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--twfa-fg);
  white-space: nowrap;
}

html[data-ui-skin='twfa'] .login-brand.brand-v2 .brand-wordmark .tw {
  font-weight: 400;
}

html[data-ui-skin='twfa'] .login-brand.brand-v2 .brand-wordmark .wfa {
  font-weight: 900;
}

/* Logout confirm — preview #logoutConfirmModal */
html[data-ui-skin='twfa'] .twfa-logout-modal {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

html[data-ui-skin='twfa'] .twfa-logout-modal .modal-body {
  padding: 24px;
}

html[data-ui-skin='twfa'] .twfa-logout-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

html[data-ui-skin='twfa'] .twfa-logout-ico {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e8f4fc;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

html[data-ui-skin='twfa'] .twfa-logout-ico svg {
  width: 18px;
  height: 18px;
  stroke: #0060df;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[data-ui-skin='twfa'] .twfa-logout-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #1a1d23;
  line-height: 1.35;
}

html[data-ui-skin='twfa'] .twfa-logout-actions {
  display: flex;
  gap: 8px;
}

html[data-ui-skin='twfa'] .twfa-logout-actions .btn {
  flex: 1;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
}

html[data-ui-skin='twfa'] .twfa-logout-cancel {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
  font-weight: 500 !important;
}

html[data-ui-skin='twfa'] .twfa-logout-confirm {
  font-weight: 600 !important;
}

html[data-ui-skin='twfa'] .user-select-all,
html[data-ui-skin='twfa'] code,
html[data-ui-skin='twfa'] .font-monospace,
html[data-ui-skin='twfa'] .mono {
  font-family: var(--bs-font-monospace);
}

@media (prefers-reduced-motion: reduce) {
  html[data-ui-skin='twfa'] .sidebar-menu .nav-link {
    transition: none;
  }
}

/* Table / card row action — icon-btn */
html[data-ui-skin='twfa'] .table-action-btn {
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: var(--twfa-radius);
  background: transparent;
  color: var(--twfa-muted);
  line-height: 1;
  box-shadow: none;
}
html[data-ui-skin='twfa'] .table-action-btn:hover,
html[data-ui-skin='twfa'] .table-action-btn:focus,
html[data-ui-skin='twfa'] .table-action-btn.show,
html[data-ui-skin='twfa'] .dropdown.show > .table-action-btn {
  background: var(--twfa-panel-soft);
  color: var(--twfa-fg);
}
html[data-ui-skin='twfa'] .table-action-btn .ti {
  font-size: 1.125rem;
}

html[data-ui-skin='twfa'] .table-action-menu.dropdown-menu {
  min-width: 12.5rem;
  padding: 0.35rem;
  border: 1px solid var(--twfa-border);
  border-radius: var(--twfa-radius-panel);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
  background: var(--twfa-white);
}
html[data-ui-skin='twfa'] .table-action-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: var(--twfa-radius);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--twfa-fg);
  background: transparent;
}
html[data-ui-skin='twfa'] .table-action-menu .dropdown-item .ti {
  font-size: 1rem;
  color: var(--twfa-muted);
  width: 1.125rem;
  text-align: center;
  flex-shrink: 0;
}
html[data-ui-skin='twfa'] .table-action-menu .dropdown-item:hover,
html[data-ui-skin='twfa'] .table-action-menu .dropdown-item:focus {
  background: var(--twfa-panel-soft);
  color: var(--twfa-fg);
}
html[data-ui-skin='twfa'] .table-action-menu .dropdown-item:hover .ti,
html[data-ui-skin='twfa'] .table-action-menu .dropdown-item:focus .ti {
  color: var(--twfa-fg);
}

/* ID copy icon: visible on hover (same as device IDs in login UI). */
html[data-ui-skin='twfa'] .twfa-id-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
}
html[data-ui-skin='twfa'] .twfa-id-copy {
  opacity: 0;
  border: 0;
  background: transparent;
  color: var(--bs-secondary-color, #6b7a99);
  padding: 0;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.12s ease, color 0.12s ease;
}
html[data-ui-skin='twfa'] .twfa-id-cell:hover .twfa-id-copy,
html[data-ui-skin='twfa'] .twfa-id-cell:focus-within .twfa-id-copy,
html[data-ui-skin='twfa'] .twfa-id-copy:focus-visible {
  opacity: 1;
}
html[data-ui-skin='twfa'] .twfa-id-copy:hover,
html[data-ui-skin='twfa'] .twfa-id-copy:focus-visible {
  color: var(--bs-body-color, inherit);
}
html[data-ui-skin='twfa'] .twfa-id-copy.is-copied {
  opacity: 1;
  color: var(--bs-success, #2fb344);
}