/*
  Zentrale Header-/Footer-Schicht.
  Wichtig: Diese Datei ueberschreibt bewusst keine generischen Seitenvariablen
  wie --white/--navy und kein body-Layout. Die einzelnen Page-CSS-Dateien
  behalten damit ihre Funktion, waehrend Header, Footer und Notifications
  ueberall identisch aussehen.
*/

body > nav {
  position:fixed !important;
  top:18px !important;
  left:28px !important;
  right:28px !important;
  z-index:1000 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:24px !important;
  padding:12px 28px !important;
  background:rgba(255,255,255,0.92) !important;
  backdrop-filter:blur(16px) !important;
  border:1px solid rgba(26,107,212,0.12) !important;
  border-radius:24px !important;
  box-shadow:0 10px 24px rgba(26,107,212,0.05) !important;
  transition:top .35s ease,left .35s ease,right .35s ease,padding .35s ease,background .35s ease,border-radius .35s ease,border-color .35s ease,box-shadow .35s ease !important;
}

body > nav.is-scrolled {
  top:0 !important;
  left:0 !important;
  right:0 !important;
  padding:14px 32px !important;
  background:#ffffff !important;
  border:0 !important;
  border-bottom:1px solid rgba(26,107,212,0.12) !important;
  border-radius:0 !important;
  box-shadow:0 14px 28px rgba(10,30,58,0.10) !important;
}

body > nav .nav-logo {
  display:flex !important;
  align-items:center !important;
  text-decoration:none !important;
  flex-shrink:0 !important;
}

body > nav .nav-brand {
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  flex-shrink:0 !important;
}

body > nav .nav-logo img {
  height:52px !important;
  width:auto !important;
  object-fit:contain !important;
  display:block !important;
  mix-blend-mode:multiply !important;
}

.header-session-timer {
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-height:46px !important;
  padding:8px 14px !important;
  border:1px solid rgba(26,107,212,.14) !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.94) !important;
  box-shadow:0 10px 22px rgba(26,107,212,.06) !important;
}

.header-session-timer .timer-icon {
  display:grid !important;
  place-items:center !important;
  width:32px !important;
  height:32px !important;
  border-radius:50% !important;
  background:#eef5ff !important;
  color:#1a6bd4 !important;
  font-size:15px !important;
}

.header-session-timer .timer-copy {
  display:grid !important;
  gap:2px !important;
}

.header-session-timer .timer-copy small {
  color:#5f769d !important;
  font-family:'Barlow Condensed',sans-serif !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:1.6px !important;
  text-transform:uppercase !important;
  line-height:1 !important;
}

.header-session-timer .timer-copy strong {
  color:#0a1e3a !important;
  font-family:'Barlow Condensed',sans-serif !important;
  font-size:20px !important;
  font-weight:700 !important;
  letter-spacing:1px !important;
  line-height:1 !important;
}

body > nav .nav-links {
  display:flex !important;
  gap:clamp(12px, 1.6vw, 24px) !important;
  list-style:none !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  padding:0 !important;
}

body > nav .nav-links a {
  color:#4a6a8a !important;
  text-decoration:none !important;
  font-family:'Barlow',sans-serif !important;
  font-size:11px !important;
  letter-spacing:1.8px !important;
  text-transform:uppercase !important;
  font-weight:600 !important;
  transition:color .25s ease !important;
}

body > nav .nav-links .tf-nav-disabled {
  color:#8ea0b5 !important;
  cursor:not-allowed !important;
  opacity:.45 !important;
  font-family:'Barlow',sans-serif !important;
  font-size:11px !important;
  letter-spacing:1.8px !important;
  text-transform:uppercase !important;
  font-weight:600 !important;
}

body > nav .nav-links a:hover,
body > nav .nav-links a.active {
  color:#1a6bd4 !important;
}

body > nav .nav-actions {
  display:flex !important;
  gap:14px !important;
  align-items:center !important;
  flex-shrink:0 !important;
}

body > nav .nav-mobile-toggle {
  display:none !important;
}

body > nav .header-task-link {
  position:relative !important;
  gap:8px !important;
  padding-right:40px !important;
}

body > nav .header-task-link.active {
  background:#eef5ff !important;
  color:#1a6bd4 !important;
  border-color:rgba(26,107,212,.32) !important;
}

body > nav .header-task-link .header-task-count {
  position:absolute !important;
  top:-7px !important;
  right:-7px !important;
  min-width:22px !important;
  height:22px !important;
  padding:0 6px !important;
  border:2px solid #fff !important;
  border-radius:999px !important;
  display:grid !important;
  place-items:center !important;
  background:#ffb020 !important;
  color:#0a1e3a !important;
  font-size:11px !important;
  font-weight:700 !important;
  line-height:1 !important;
}

body > nav .header-task-link .header-task-count.is-empty {
  background:#dbe7f5 !important;
  color:#5d7895 !important;
}

body > nav .task-notifier {
  position:relative !important;
  flex-shrink:0 !important;
}

body > nav .user-chip {
  position:relative !important;
  border:1px solid rgba(26,107,212,0.16) !important;
  font:inherit !important;
  cursor:pointer !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-height:48px !important;
  padding:6px 14px 6px 6px !important;
  background:#fff !important;
  border-radius:999px !important;
  color:#0a1e3a !important;
  outline:none !important;
}

body > nav .user-chip.user-chip-static {
  cursor:default !important;
  pointer-events:none !important;
}

body > nav .user-chip:hover,
body > nav .user-chip.active {
  border-color:rgba(26,107,212,0.34) !important;
  background:#eef6ff !important;
}

body > nav .user-chip.user-chip-static:hover,
body > nav .user-chip.user-chip-static.active {
  border-color:rgba(26,107,212,0.16) !important;
  background:#fff !important;
}

body > nav .user-chip:focus-visible {
  border-color:rgba(26,107,212,0.44) !important;
  box-shadow:0 0 0 4px rgba(26,107,212,0.10) !important;
}

body > nav .user-chip .avatar {
  width:36px !important;
  height:36px !important;
  border-radius:50% !important;
  background:linear-gradient(135deg,#2b69f6 0%,#1a57d8 100%) !important;
  color:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-family:'Barlow Condensed',sans-serif !important;
  font-weight:700 !important;
  font-size:14px !important;
  letter-spacing:1px !important;
}

body > nav .user-chip .user-meta {
  display:grid !important;
  gap:1px !important;
  text-align:left !important;
}

body > nav .user-chip .u-name {
  color:#0a1e3a !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1.2 !important;
}

body > nav .user-chip .u-role {
  color:#1a6bd4 !important;
  font-size:10px !important;
  letter-spacing:1.5px !important;
  text-transform:uppercase !important;
  font-weight:700 !important;
  line-height:1.2 !important;
}

body > nav .task-badge {
  position:absolute !important;
  top:-6px !important;
  right:-6px !important;
  min-width:22px !important;
  height:22px !important;
  padding:0 6px !important;
  border:2px solid #fff !important;
  border-radius:999px !important;
  display:grid !important;
  place-items:center !important;
  background:#ffb020 !important;
  color:#0a1e3a !important;
  font-size:11px !important;
  font-weight:700 !important;
  line-height:1 !important;
}

body > nav .task-badge.is-empty {
  background:#dbe7f5 !important;
  color:#5d7895 !important;
}

body > nav .task-popover {
  position:absolute !important;
  top:calc(100% + 12px) !important;
  right:0 !important;
  width:min(360px, calc(100vw - 32px)) !important;
  display:none !important;
  overflow:hidden !important;
  background:#fff !important;
  border:1px solid rgba(26,107,212,0.16) !important;
  border-radius:18px !important;
  box-shadow:0 18px 42px rgba(26,107,212,0.12) !important;
  z-index:1100 !important;
}

body > nav .task-popover.open {
  display:block !important;
}

body > nav .task-popover-head {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  padding:14px 16px !important;
  border-bottom:1px solid #d7e3f0 !important;
}

body > nav .task-popover-head strong {
  font-family:'Barlow Condensed',sans-serif !important;
  color:#0a1e3a !important;
  font-size:20px !important;
  letter-spacing:.5px !important;
  line-height:1 !important;
}

body > nav .task-popover-head span {
  padding:4px 9px !important;
  border-radius:999px !important;
  background:#eef5ff !important;
  color:#1a6bd4 !important;
  font-size:11px !important;
  font-weight:700 !important;
}

body > nav .task-popover-list {
  max-height:300px !important;
  overflow:auto !important;
  padding:6px !important;
}

body > nav .task-popover-item {
  display:block !important;
  padding:10px 11px !important;
  border-radius:14px !important;
  color:#0a1e3a !important;
  text-decoration:none !important;
  border-bottom:0 !important;
}

body > nav .task-popover-item:hover {
  background:#f7fbff !important;
}

body > nav .task-popover-item i {
  display:inline-block !important;
  margin-bottom:5px !important;
  padding:4px 8px !important;
  border-radius:999px !important;
  background:#edf5ff !important;
  color:#1a6bd4 !important;
  font-style:normal !important;
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:1px !important;
  text-transform:uppercase !important;
}

body > nav .task-popover-item strong {
  display:block !important;
  color:#0a1e3a !important;
  font-size:13px !important;
  line-height:1.25 !important;
}

body > nav .task-popover-item span {
  display:block !important;
  margin-top:2px !important;
  color:#4a6a8a !important;
  font-size:11px !important;
  line-height:1.35 !important;
}

body > nav .notify-empty {
  padding:16px !important;
  color:#4a6a8a !important;
  font-size:12px !important;
  line-height:1.4 !important;
}

body > nav .task-notifier--auftraggeber .task-popover {
  top:calc(100% + 17px) !important;
  right:0 !important;
  width:min(424px, calc(100vw - 32px)) !important;
  min-height:160px !important;
  border:1px solid #d4e2f3 !important;
  border-radius:24px !important;
  background:#ffffff !important;
  box-shadow:0 22px 60px rgba(26,107,212,0.10) !important;
}

body > nav .task-notifier--auftraggeber .task-popover-head {
  min-height:68px !important;
  padding:0 23px !important;
  border-bottom:1px solid #d4e2f3 !important;
}

body > nav .task-notifier--auftraggeber .task-popover-head strong {
  font-family:'Barlow Condensed',sans-serif !important;
  color:#0a1e3a !important;
  font-size:18px !important;
  font-weight:700 !important;
  letter-spacing:.2px !important;
}

body > nav .task-notifier--auftraggeber .task-popover-head span {
  padding:6px 12px !important;
  border-radius:999px !important;
  background:#eef5ff !important;
  color:#1a6bd4 !important;
  font-size:12px !important;
  font-weight:800 !important;
}

body > nav .task-notifier--auftraggeber .task-popover-list {
  max-height:300px !important;
  padding:27px 28px 26px !important;
}

body > nav .task-notifier--auftraggeber .notify-empty {
  padding:0 !important;
  max-width:315px !important;
  color:#6f86a7 !important;
  font-size:14px !important;
  line-height:1.35 !important;
}

body > nav .logout-btn,
body > nav .tf-btn {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:36px !important;
  padding:9px 16px !important;
  border:1px solid rgba(26,107,212,.18) !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.92) !important;
  color:#4a6a8a !important;
  font-family:'Barlow Condensed',sans-serif !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:2px !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
}

body > nav .logout-btn:hover,
body > nav .tf-btn:hover {
  background:#eef5ff !important;
  color:#1a6bd4 !important;
}

footer.tf-site-footer {
  position:static !important;
  inset:auto !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
  float:none !important;
  clear:both !important;
  transform:none !important;
  margin:18px 32px 20px !important;
  min-height:84px !important;
  padding:24px 24px 20px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  color:#4a6a8a !important;
  text-align:center !important;
  background:#ffffff !important;
  border:1px solid rgba(26,107,212,.12) !important;
  border-radius:22px !important;
  box-shadow:none !important;
}

footer.tf-site-footer p {
  margin:0 !important;
}

footer.tf-site-footer a {
  color:#2b69f6 !important;
  text-decoration:none !important;
}

footer.tf-site-footer a:hover {
  color:#1558b8 !important;
  text-decoration:underline !important;
}

footer.tf-site-footer .footer-copy {
  color:#3f6a9d !important;
  font-size:11px !important;
  font-weight:400 !important;
  letter-spacing:.2px !important;
  line-height:1.4 !important;
}

footer.tf-site-footer .footer-links {
  position:static !important;
  inset:auto !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
  width:auto !important;
  min-height:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
  flex-wrap:wrap !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  margin:0 !important;
  padding:0 !important;
  color:#9db1c8 !important;
  line-height:1.4 !important;
}

footer.tf-site-footer .footer-links a {
  font-size:11px !important;
  font-weight:400 !important;
  letter-spacing:.2px !important;
  text-transform:none !important;
}

footer.tf-site-footer .footer-links span {
  color:#9db1c8 !important;
  font-size:11px !important;
}

.tf-consent-banner {
  position:fixed;
  left:24px;
  right:24px;
  bottom:24px;
  z-index:1200;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding:20px 22px;
  border:1px solid rgba(26,107,212,.14);
  border-radius:24px;
  background:rgba(255,255,255,.98);
  box-shadow:0 18px 42px rgba(10,30,58,.18);
  backdrop-filter:blur(16px);
}

.tf-consent-banner[hidden] {
  display:none !important;
}

.tf-consent-copy {
  max-width:880px;
}

.tf-consent-copy strong {
  display:block;
  margin-bottom:8px;
  color:#0a1e3a;
  font-size:20px;
}

.tf-consent-copy p {
  margin:0;
  color:#567493;
  font-size:15px;
  line-height:1.65;
}

.tf-consent-actions {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.tf-consent-btn,
.tf-consent-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 16px;
  border-radius:14px;
  font:inherit;
}

.tf-consent-btn {
  border:1px solid rgba(26,107,212,.18);
  background:#2b69f6;
  color:#fff;
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:1.8px;
  text-transform:uppercase;
  cursor:pointer;
}

.tf-consent-btn.tf-consent-btn-secondary {
  background:#fff;
  color:#1a6bd4;
}

.tf-consent-link {
  border:0;
  background:transparent;
  color:#1a6bd4;
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:1.8px;
  text-transform:uppercase;
  cursor:pointer;
}

@media (max-width:980px) {
  body > nav {
    left:16px !important;
    right:16px !important;
    top:14px !important;
    padding:12px 18px !important;
  }

  body > nav .nav-logo img {
    height:42px !important;
  }

  body > nav .nav-brand {
    gap:8px !important;
  }

  body > nav .nav-links {
    gap:16px !important;
    flex-wrap:wrap !important;
  }

  .header-session-timer {
    padding:6px 10px !important;
  }

  .header-session-timer .timer-copy small {
    display:none !important;
  }

  .header-session-timer .timer-copy strong {
    font-size:16px !important;
  }

  footer.tf-site-footer {
    margin-left:16px !important;
    margin-right:16px !important;
    margin-bottom:20px !important;
    min-height:auto !important;
    padding:22px 18px !important;
  }

  .tf-consent-banner {
    left:12px;
    right:12px;
    bottom:12px;
    flex-direction:column;
    align-items:flex-start;
  }

  .tf-consent-actions {
    width:100%;
    justify-content:flex-start;
  }
}

/* Auth Modal Redesign */
.auth-redesign-modal.modal-box {
  width:min(1040px, calc(100vw - 32px)) !important;
  max-width:1040px !important;
  max-height:calc(100vh - 32px) !important;
  padding:0 !important;
  overflow:hidden !important;
  border-radius:24px !important;
}

.auth-redesign-shell {
  display:grid;
  grid-template-columns:minmax(260px, 330px) minmax(0, 1fr);
  min-height:min(720px, calc(100vh - 32px));
  max-height:calc(100vh - 32px);
  background:#ffffff;
}

.auth-redesign-sidebar {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:28px;
  min-width:0;
  padding:34px 30px;
  background:#071e38;
  color:#ffffff;
}

.auth-redesign-brand {
  font-family:'Barlow Condensed',sans-serif;
  font-size:18px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
}

.auth-redesign-brand-sub,
.auth-redesign-intro p,
.auth-redesign-sidebar-foot,
.auth-redesign-side-step small {
  color:#b8c9dd;
}

.auth-redesign-brand-sub {
  margin-top:5px;
  font-size:11px;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
}

.auth-redesign-intro h3 {
  margin:0 0 14px;
  color:#ffffff;
  font-family:'Barlow Condensed',sans-serif;
  font-size:34px;
  line-height:1;
  letter-spacing:0;
}

.auth-redesign-intro p,
.auth-redesign-sidebar-foot {
  margin:0;
  font-size:14px;
  line-height:1.55;
}

.auth-redesign-side-steps {
  display:grid;
  gap:12px;
}

.auth-redesign-side-step {
  display:grid;
  grid-template-columns:42px minmax(0, 1fr);
  align-items:center;
  gap:12px;
  padding:12px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
}

.auth-redesign-side-step.is-active {
  background:rgba(42,116,224,.22);
  border-color:rgba(92,190,255,.45);
}

.auth-redesign-side-step > span {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:14px;
  background:rgba(255,255,255,.08);
  color:#5bc8ff;
  font-family:'Barlow Condensed',sans-serif;
  font-size:18px;
  font-weight:700;
}

.auth-redesign-side-step strong,
.auth-redesign-side-step small {
  display:block;
}

.auth-redesign-side-step strong {
  color:#ffffff;
  font-size:13px;
}

.auth-redesign-side-step small {
  margin-top:2px;
  font-size:12px;
}

.auth-redesign-main {
  min-width:0;
  min-height:0;
  padding:0 !important;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.auth-redesign-top {
  flex:0 0 auto;
  padding:24px 32px 18px;
  border-bottom:1px solid #d7e5f5;
}

.auth-redesign-top h2 {
  margin:0 0 16px;
  color:#07142a;
  font-family:'Barlow Condensed',sans-serif;
  font-size:28px;
  line-height:1;
  letter-spacing:0;
}

.auth-redesign-modal .auth-tabs {
  display:flex;
  gap:10px;
}

.auth-redesign-modal .auth-tab {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:8px 14px;
  border:1px solid #d5e4f5;
  border-radius:999px;
  color:#4a6a8a;
  cursor:pointer;
}

.auth-redesign-modal .auth-tab.active {
  background:#eef5ff;
  color:#1a6bd4;
  border-color:#1a6bd4;
}

.auth-redesign-modal .auth-panel {
  display:none !important;
}

.auth-redesign-modal .auth-panel.active {
  display:flex !important;
  flex-direction:column;
  min-height:0;
}

.auth-redesign-modal #tab-login.auth-panel.active {
  gap:14px;
  padding:28px 32px 32px;
  overflow:auto;
}

.auth-redesign-modal #tab-register.auth-panel.active {
  flex:1 1 auto;
  padding:22px 32px 0;
  overflow:hidden;
}

.auth-redesign-panel-title h3,
.auth-step-head h3 {
  margin:0;
  color:#07142a;
}

.auth-redesign-panel-title p {
  margin:5px 0 0;
  color:#597391;
  font-size:13px;
}

.auth-role-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin:16px 0;
}

.auth-redesign-modal .auth-role-card {
  min-height:112px;
  padding:14px;
  border:1px solid #d5e4f5;
  border-radius:16px;
  background:#ffffff;
  cursor:pointer;
}

.auth-redesign-modal .auth-role-card.selected {
  border-color:#1a6bd4;
  background:#eef5ff;
  box-shadow:0 0 0 3px rgba(26,107,212,.12);
}

.auth-role-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  margin-bottom:10px;
  border-radius:12px;
  background:#eaf5ff;
  color:#1a6bd4;
}

.auth-redesign-modal .auth-role-card strong,
.auth-redesign-modal .auth-role-card small {
  display:block;
}

.auth-redesign-modal .auth-role-card strong {
  color:#07142a;
  font-size:14px;
}

.auth-redesign-modal .auth-role-card small {
  margin-top:4px;
  color:#5d7592;
  font-size:12px;
  line-height:1.35;
}

.auth-step-progress {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  margin-bottom:16px;
}

.auth-step-progress button {
  min-height:34px;
  border:1px solid #d5e4f5;
  border-radius:999px;
  background:#ffffff;
  color:#4a6a8a;
  font-weight:800;
}

.auth-step-progress button.is-active {
  background:#1f64e0;
  color:#ffffff;
  border-color:#1f64e0;
}

.auth-step-panel {
  display:none;
}

.auth-step-panel.is-active {
  display:block;
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding-right:4px;
}

.auth-step-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.auth-step-badge {
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:5px 10px;
  border-radius:999px;
  background:#eef5ff;
  color:#1a6bd4;
  font-size:11px;
  font-weight:800;
  letter-spacing:.8px;
  text-transform:uppercase;
}

.auth-role-status,
.auth-step-note,
.auth-step-summary {
  margin-bottom:14px;
  padding:14px;
  border:1px solid #d5e4f5;
  border-radius:16px;
  background:#f4f9ff;
}

.auth-role-status strong {
  color:#07142a;
}

.auth-role-status p,
.auth-step-note {
  color:#536f91;
  font-size:13px;
  line-height:1.45;
}

.auth-role-status p {
  margin:4px 0 0;
}

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

.auth-step-summary div {
  padding:12px;
  border-radius:14px;
  background:#ffffff;
}

.auth-step-summary span,
.auth-step-summary strong {
  display:block;
}

.auth-step-summary span {
  color:#5d7592;
  font-size:12px;
}

.auth-step-summary strong {
  margin-top:3px;
  color:#07142a;
}

.auth-redesign-modal .split-fields {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.auth-redesign-modal .auth-field {
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-bottom:12px;
}

.auth-redesign-modal .auth-field > span,
.auth-redesign-modal .auth-upload small {
  color:#1a5bb8;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.1px;
  text-transform:uppercase;
}

.tf-form-label-row{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.tf-form-label-copy{
  display:inline-flex;
  align-items:center;
}
.tf-form-optional-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:18px;
  padding:2px 8px;
  border:1px solid rgba(26,107,212,.16);
  border-radius:999px;
  background:#eef5ff;
  color:#1a6bd4;
  font-family:'Barlow Condensed',sans-serif;
  font-size:10px;
  font-weight:800;
  letter-spacing:1.1px;
  line-height:1;
  text-transform:uppercase;
}
.tf-form-info{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:999px;
  background:#e9f2ff;
  color:#1a6bd4;
  font-family:'Barlow',sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:0;
  line-height:1;
  text-transform:none;
  cursor:help;
}
.tf-form-info:focus,
.tf-form-info:focus-visible{
  outline:2px solid rgba(26,107,212,.24);
  outline-offset:2px;
}
.tf-form-tooltip{
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  width:min(240px, calc(100vw - 40px));
  padding:10px 12px;
  border-radius:12px;
  background:#0f2343;
  color:#ffffff;
  font-family:'Barlow',sans-serif;
  font-size:12px;
  font-weight:500;
  letter-spacing:0;
  line-height:1.45;
  text-transform:none;
  box-shadow:0 16px 34px rgba(7,23,47,.22);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(-50%) translateY(4px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index:20;
}
.tf-form-tooltip::after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  width:10px;
  height:10px;
  background:#0f2343;
  transform:translateX(-50%) rotate(45deg);
}
.tf-form-info:hover .tf-form-tooltip,
.tf-form-info:focus .tf-form-tooltip,
.tf-form-info:focus-visible .tf-form-tooltip{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}

.auth-redesign-modal .auth-upload small {
  color:#536f91;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
}

.auth-redesign-modal input,
.auth-redesign-modal select,
.auth-redesign-modal .auth-select {
  width:100%;
  max-width:100%;
  min-height:44px;
  border:1px solid #cfe0f3;
  border-radius:12px;
  background:#ffffff;
  color:#07142a;
  font:inherit;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.auth-redesign-modal input {
  padding:0 14px;
}

.auth-redesign-modal select,
.auth-redesign-modal .auth-select {
  padding:0 12px;
}

.auth-redesign-modal .phone-field {
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:10px;
}

.auth-redesign-modal .phone-field > input {
  grid-column:1 / -1;
  width:100%;
}

.auth-redesign-modal .auth-field.auth-field-invalid > span {
  color:#c92f2f;
}

.auth-redesign-modal .auth-field.auth-field-valid > span {
  color:#1f8a49;
}

.auth-redesign-modal .auth-inline-status {
  display:block;
  margin-top:8px;
  color:#5f7896;
  font-size:12px;
  line-height:1.4;
}

.auth-redesign-modal .auth-inline-status.is-loading {
  color:#4a6a8a;
}

.auth-redesign-modal .auth-inline-status.is-error {
  color:#b42318;
}

.auth-redesign-modal .auth-inline-status.is-valid {
  color:#157347;
}

.auth-redesign-modal .auth-inline-status.is-warning {
  color:#9a5b00;
}

.auth-redesign-modal input.auth-input-invalid,
.auth-redesign-modal select.auth-input-invalid,
.auth-redesign-modal .auth-select.auth-input-invalid {
  border-color:#e24b4b !important;
  background:#fff4f4 !important;
  box-shadow:0 0 0 3px rgba(226,75,75,0.16), inset 0 0 0 999px #fff4f4 !important;
  -webkit-text-fill-color:#7f1d1d;
}

.auth-redesign-modal input.auth-input-valid,
.auth-redesign-modal select.auth-input-valid,
.auth-redesign-modal .auth-select.auth-input-valid {
  border-color:#29a55a !important;
  background:#f2fff6 !important;
  box-shadow:0 0 0 3px rgba(41,165,90,0.14), inset 0 0 0 999px #f2fff6 !important;
  -webkit-text-fill-color:#14532d;
}

.auth-redesign-modal .country-picker {
  display:grid;
  gap:10px;
}
.auth-redesign-modal .auth-business-address,
.auth-redesign-modal .auth-business-hours {
  display:block;
}
.auth-redesign-modal .auth-address-grid,
.auth-redesign-modal .auth-hours-grid {
  display:grid;
  gap:10px;
  margin-top:8px;
}
.auth-redesign-modal .auth-address-grid {
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
.auth-redesign-modal .auth-address-street,
.auth-redesign-modal .auth-address-country {
  grid-column:1 / -1;
}
.auth-redesign-modal .auth-hours-grid {
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
.auth-redesign-modal .auth-address-grid label,
.auth-redesign-modal .auth-hours-grid label {
  display:flex;
  flex-direction:column;
  gap:6px;
}
.auth-redesign-modal .auth-address-grid small,
.auth-redesign-modal .auth-hours-grid small {
  color:#5f7896;
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
}

.auth-modal-feedback {
  margin:10px 0 18px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid #cfe0f6;
  background:#eef5ff;
  color:#15345f;
  font-weight:700;
  line-height:1.45;
  opacity:1;
  transform:translateY(0);
  transition:opacity .24s ease, transform .24s ease, margin .24s ease, padding .24s ease;
}

.auth-modal-feedback.is-hiding {
  margin-bottom:0;
  padding-top:0;
  padding-bottom:0;
  opacity:0;
  transform:translateY(-6px);
  overflow:hidden;
}

.auth-modal-feedback-error {
  border-color:#ffd1d1;
  background:#fff0f0;
  color:#9f1d1d;
}

.auth-modal-feedback-success {
  border-color:#bdebd3;
  background:#ecfff5;
  color:#08713f;
}

.tf-portal-toast {
  position:fixed;
  top:118px;
  right:28px;
  z-index:2200;
  width:min(390px, calc(100vw - 32px));
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 20px;
  border-radius:18px;
  background:#0b2343;
  color:#fff;
  box-shadow:0 22px 55px rgba(5, 19, 43, .25);
  opacity:0;
  transform:translateY(-12px);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}

.tf-portal-toast.is-visible {
  opacity:1;
  transform:translateY(0);
}

.tf-portal-toast-error {
  background:#411827;
}

.tf-portal-toast-badge {
  flex:0 0 auto;
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#2467dc;
  color:#fff;
  font-family:'Barlow Condensed', sans-serif;
  font-size:15px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.tf-portal-toast-error .tf-portal-toast-badge {
  background:#f2b2bc;
  color:#6d1323;
}

.tf-portal-toast-copy strong,
.tf-portal-toast-copy span {
  display:block;
}

.tf-portal-toast-copy strong {
  margin-bottom:2px;
  font-weight:800;
  font-size:15px;
}

.tf-portal-toast-copy span {
  color:rgba(255,255,255,.78);
  font-size:12px;
  line-height:1.5;
}

.auth-redesign-modal .country-pill {
  display:flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:9px 12px;
  border:1px solid #d5e4f5;
  border-radius:12px;
  background:#f8fbff;
}

.auth-redesign-modal .country-pill input {
  width:auto;
  min-height:0;
}

.auth-redesign-modal .invoice-email-check {
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:4px 0 12px 4px;
  color:#536f91;
  font-size:13px;
  line-height:1.35;
  cursor:pointer;
}

.auth-redesign-modal .invoice-email-check input {
  width:auto;
  min-height:0;
  margin-top:2px;
  flex:0 0 auto;
  cursor:pointer;
}

.auth-step-actions {
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:16px -32px 0;
  padding:16px 32px;
  border-top:1px solid #d7e5f5;
  background:#ffffff;
}

.auth-step-back,
.auth-redesign-modal .auth-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  border-radius:14px;
  font-weight:800;
}

.auth-step-back {
  min-width:120px;
  border:1px solid #cfe0f3;
  background:#ffffff;
  color:#4a6a8a;
}

.auth-redesign-modal .auth-step-next,
.auth-redesign-modal .auth-step-submit {
  width:auto;
  min-width:190px;
}

.auth-redesign-modal .auth-step-next:disabled,
.auth-redesign-modal .auth-step-submit:disabled {
  opacity:.65;
  cursor:wait;
}

.auth-redesign-modal .auth-step-back,
.auth-redesign-modal .auth-step-submit {
  display:none;
}

@media (max-width:900px) {
  .auth-redesign-modal.modal-box {
    width:calc(100vw - 20px) !important;
    max-height:calc(100vh - 20px) !important;
  }

  .auth-redesign-shell {
    grid-template-columns:1fr;
    min-height:0;
    max-height:calc(100vh - 20px);
    overflow:auto;
  }

  .auth-redesign-sidebar {
    padding:24px;
  }

  .auth-redesign-intro h3 {
    font-size:28px;
  }

  .auth-redesign-main {
    overflow:visible;
  }

  .auth-redesign-modal #tab-register.auth-panel.active,
  .auth-redesign-modal #tab-login.auth-panel.active {
    overflow:visible;
    padding-left:22px;
    padding-right:22px;
  }

  .auth-step-panel.is-active {
    overflow:visible;
  }

  .auth-step-actions {
    margin-left:-22px;
    margin-right:-22px;
    padding-left:22px;
    padding-right:22px;
  }
}

@media (max-width:560px) {
  .auth-redesign-top {
    padding:22px 20px 16px;
  }

  .auth-redesign-modal .auth-tabs,
  .auth-step-actions {
    flex-direction:column;
    align-items:stretch;
  }

  .auth-role-grid,
  .auth-redesign-modal .split-fields,
  .auth-step-summary,
  .auth-redesign-modal .phone-field {
    grid-template-columns:1fr;
  }

  .auth-redesign-modal .auth-step-next,
  .auth-redesign-modal .auth-step-submit,
  .auth-step-back {
    width:100%;
  }
}

/* Auth Modal Screenshot Alignment */
.auth-redesign-modal.modal-box {
  position:relative !important;
  width:min(976px, calc(100vw - 20px)) !important;
  max-width:976px !important;
  max-height:calc(100vh - 14px) !important;
  padding:0 !important;
  overflow:hidden !important;
  border:1px solid rgba(255,255,255,0.9) !important;
  border-radius:28px !important;
  background:#ffffff !important;
  box-shadow:0 24px 80px rgba(4,18,38,0.34) !important;
}

.auth-redesign-shell {
  display:grid !important;
  grid-template-columns:295px minmax(0, 1fr) !important;
  height:min(738px, calc(100vh - 14px)) !important;
  min-height:0 !important;
  max-height:calc(100vh - 14px) !important;
  overflow:hidden !important;
  background:#ffffff !important;
}

.auth-redesign-sidebar {
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  gap:0 !important;
  padding:31px 24px 30px !important;
  height:min(738px, calc(100vh - 14px)) !important;
  background:linear-gradient(180deg,#f0f5fb 0%,#dce8f5 100%) !important;
  color:#0a1e3a !important;
  border-right:1px solid rgba(26,107,212,0.14) !important;
}

.auth-redesign-brand-row {
  display:grid !important;
  grid-template-columns:46px minmax(0, 1fr) !important;
  align-items:center !important;
  gap:13px !important;
}

.auth-redesign-logo-badge {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:52px !important;
  height:52px !important;
  border-radius:14px !important;
  background:#ffffff !important;
  border:1px solid rgba(26,107,212,0.14) !important;
  box-shadow:0 10px 24px rgba(26,107,212,0.08) !important;
  overflow:hidden !important;
  color:#0a1e3a !important;
  font-family:'Barlow Condensed',sans-serif !important;
  font-size:20px !important;
  font-weight:800 !important;
  letter-spacing:0 !important;
}

.auth-redesign-logo-badge img {
  display:block !important;
  width:48px !important;
  height:48px !important;
  object-fit:contain !important;
  mix-blend-mode:multiply !important;
}

.auth-redesign-brand {
  color:#0a1e3a !important;
  font-family:'Barlow',sans-serif !important;
  font-size:17px !important;
  font-weight:800 !important;
  letter-spacing:0 !important;
  line-height:1.1 !important;
  text-transform:none !important;
}

.auth-redesign-brand-sub {
  margin-top:4px !important;
  color:#1a6bd4 !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:1.7px !important;
  text-transform:uppercase !important;
}

.auth-redesign-intro {
  margin-top:32px !important;
}

.auth-redesign-intro h3 {
  margin:0 0 16px !important;
  color:#0a1e3a !important;
  font-family:'Barlow',sans-serif !important;
  font-size:30px !important;
  font-weight:800 !important;
  line-height:1.1 !important;
  letter-spacing:0 !important;
}

.auth-redesign-intro p,
.auth-redesign-sidebar-foot {
  color:#4a6a8a !important;
  font-size:14px !important;
  line-height:1.52 !important;
}

.auth-redesign-side-steps {
  display:grid !important;
  gap:12px !important;
  margin-top:27px !important;
}

.auth-redesign-side-step {
  display:grid !important;
  grid-template-columns:46px minmax(0, 1fr) !important;
  align-items:center !important;
  gap:13px !important;
  min-height:61px !important;
  padding:12px !important;
  border:1px solid rgba(26,107,212,0.14) !important;
  border-radius:17px !important;
  background:#ffffff !important;
}

.auth-redesign-side-step.is-active {
  background:#eef5ff !important;
  border-color:rgba(26,107,212,0.32) !important;
}

.auth-redesign-side-step > span {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:34px !important;
  height:34px !important;
  border-radius:50% !important;
  background:#eef5ff !important;
  color:#1a6bd4 !important;
  font-family:'Barlow',sans-serif !important;
  font-size:16px !important;
  font-weight:800 !important;
  letter-spacing:0 !important;
}

.auth-redesign-side-step.is-active > span {
  background:#1a6bd4 !important;
  color:#ffffff !important;
}

.auth-redesign-side-step strong {
  color:#0a1e3a !important;
  font-size:14px !important;
  font-weight:800 !important;
}

.auth-redesign-side-step small {
  color:#4a6a8a !important;
  font-size:13px !important;
}

.auth-redesign-sidebar-foot {
  margin-top:auto !important;
  padding-top:34px !important;
}

.auth-redesign-main {
  position:relative !important;
  min-width:0 !important;
  min-height:0 !important;
  height:min(738px, calc(100vh - 14px)) !important;
  max-height:calc(100vh - 14px) !important;
  overflow:hidden !important;
  background:#ffffff !important;
}

.auth-redesign-close {
  position:absolute !important;
  top:30px !important;
  right:29px !important;
  z-index:5 !important;
  width:38px !important;
  height:38px !important;
  border:1px solid #d5e4f5 !important;
  border-radius:50% !important;
  background:#ffffff !important;
  color:#07142a !important;
  font-size:20px !important;
  line-height:1 !important;
  box-shadow:none !important;
}

.auth-redesign-top {
  padding:28px 30px 20px !important;
  border-bottom:1px solid #d5e4f5 !important;
}

.auth-redesign-top h2 {
  margin:0 !important;
  max-width:calc(100% - 58px) !important;
  color:#07142a !important;
  font-family:'Barlow',sans-serif !important;
  font-size:28px !important;
  font-weight:800 !important;
  line-height:1.12 !important;
  letter-spacing:0 !important;
}

.auth-redesign-subtitle {
  margin:8px 0 0 !important;
  max-width:calc(100% - 58px) !important;
  color:#536f91 !important;
  font-size:14px !important;
  line-height:1.4 !important;
}

.auth-redesign-modal[data-auth-mode="register"][data-auth-role-locked="true"] .auth-tabs,
.auth-redesign-modal[data-auth-mode="register"][data-auth-role-locked="true"] .auth-role-grid,
.auth-redesign-modal[data-auth-mode="register"][data-auth-role-locked="true"] #tab-register > .auth-redesign-panel-title,
.auth-redesign-modal[data-auth-mode="register"][data-auth-role-locked="true"] .auth-step-progress,
.auth-redesign-modal[data-auth-mode="register"][data-auth-role-locked="true"] #tab-register > .auth-hint {
  display:none !important;
}

.auth-redesign-modal .auth-tabs {
  margin-top:16px !important;
}

.auth-redesign-modal[data-auth-mode="login"] .auth-tabs,
.auth-redesign-modal[data-auth-mode="login"] .auth-redesign-side-steps {
  display:none !important;
}

.auth-redesign-modal #tab-register.auth-panel.active {
  min-height:0 !important;
  padding:25px 30px 0 !important;
  overflow:hidden !important;
}

.auth-redesign-modal #tab-login.auth-panel.active {
  padding:30px !important;
}

.auth-step-panel.is-active {
  padding-right:0 !important;
  overflow:auto !important;
  scrollbar-width:none !important;
}

.auth-step-panel.is-active::-webkit-scrollbar {
  width:0 !important;
  height:0 !important;
}

.auth-step-head {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  margin-bottom:19px !important;
}

.auth-step-head h3 {
  color:#07142a !important;
  font-family:'Barlow',sans-serif !important;
  font-size:21px !important;
  font-weight:800 !important;
  letter-spacing:0 !important;
}

.auth-step-badge {
  min-height:31px !important;
  padding:7px 12px !important;
  border-radius:999px !important;
  background:#dceaff !important;
  color:#155df2 !important;
  font-size:13px !important;
  font-weight:800 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  white-space:nowrap !important;
}

.auth-role-status {
  display:grid;
  grid-template-columns:54px minmax(0, 1fr) !important;
  align-items:center !important;
  gap:14px !important;
  min-height:82px !important;
  margin-bottom:18px !important;
  padding:16px !important;
  border:1px solid #cfe0f3 !important;
  border-radius:20px !important;
  background:#edf5ff !important;
}

.auth-role-status::before {
  content:"\1F69A" !important;
  grid-row:1 / span 2 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:48px !important;
  height:48px !important;
  border-radius:16px !important;
  background:#dceaff !important;
  font-size:20px !important;
}

.auth-role-status[data-auth-note="customer"]::before {
  content:"\1F3E2" !important;
}

.auth-role-status strong {
  grid-column:2 !important;
  color:#07142a !important;
  font-size:17px !important;
  font-weight:800 !important;
}

.auth-role-status p {
  grid-column:2 !important;
  margin:5px 0 0 !important;
  color:#435f82 !important;
  font-size:13px !important;
  line-height:1.35 !important;
}

.auth-redesign-modal .split-fields {
  gap:14px !important;
}

.auth-redesign-modal .auth-field {
  gap:7px !important;
  margin-bottom:13px !important;
}

.auth-redesign-modal .auth-field > span,
.auth-redesign-modal .auth-upload small {
  color:#687990 !important;
  font-family:'Barlow',sans-serif !important;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:1.2px !important;
  text-transform:uppercase !important;
}

.auth-redesign-modal input,
.auth-redesign-modal select,
.auth-redesign-modal .auth-select {
  min-height:44px !important;
  border:1px solid #cfe0f3 !important;
  border-radius:13px !important;
  background:#ffffff !important;
  color:#07142a !important;
  font-size:14px !important;
  box-shadow:none !important;
}

.auth-redesign-modal input::placeholder {
  color:#6d7f96 !important;
  opacity:0.9 !important;
}

.auth-redesign-modal .phone-field {
  grid-template-columns:90px minmax(0, 1fr) !important;
  gap:10px !important;
}

.auth-redesign-modal .auth-business-address,
.auth-redesign-modal .auth-business-hours {
  display:block !important;
}

.auth-redesign-modal .auth-address-grid,
.auth-redesign-modal .auth-hours-grid {
  display:grid !important;
  gap:10px !important;
  margin-top:8px !important;
}

.auth-redesign-modal .auth-address-grid {
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}

.auth-redesign-modal .auth-address-street,
.auth-redesign-modal .auth-address-country {
  grid-column:1 / -1 !important;
}

.auth-redesign-modal .auth-hours-grid {
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}

.auth-redesign-modal .auth-address-grid label,
.auth-redesign-modal .auth-hours-grid label {
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
}

.auth-redesign-modal .auth-address-grid small,
.auth-redesign-modal .auth-hours-grid small {
  color:#687990 !important;
  font-family:'Barlow',sans-serif !important;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:1.2px !important;
  text-transform:uppercase !important;
}

.auth-redesign-modal .invoice-email-check {
  align-items:center !important;
  margin:0 0 17px !important;
  color:#203955 !important;
  font-size:13px !important;
}

.auth-redesign-modal .invoice-email-check input {
  accent-color:#22b36a !important;
}

.auth-step-note,
.auth-step-summary {
  margin-bottom:0 !important;
  padding:16px !important;
  border:1px solid #cfe0f3 !important;
  border-radius:18px !important;
  background:#f6f9ff !important;
  color:#284462 !important;
  font-size:13px !important;
  line-height:1.45 !important;
}

.auth-step-actions {
  justify-content:flex-end !important;
  margin:21px -30px 0 !important;
  padding:13px 30px 18px !important;
  border-top:1px solid #d5e4f5 !important;
  background:#ffffff !important;
}

.auth-step-back,
.auth-redesign-modal .auth-btn {
  min-height:50px !important;
  border-radius:15px !important;
  font-family:'Barlow',sans-serif !important;
  font-size:14px !important;
  font-weight:800 !important;
}

.auth-redesign-modal .auth-step-next,
.auth-redesign-modal .auth-step-submit {
  min-width:190px !important;
  padding:0 28px !important;
  background:#2c66f0 !important;
  color:#ffffff !important;
}

.auth-step-back {
  min-width:128px !important;
  color:#45617f !important;
}

@media (max-width:900px) {
  .auth-redesign-modal.modal-box {
    width:calc(100vw - 16px) !important;
    max-height:calc(100vh - 16px) !important;
    border-radius:22px !important;
  }

  .auth-redesign-shell {
    grid-template-columns:1fr !important;
    min-height:0 !important;
    max-height:calc(100vh - 16px) !important;
    overflow:auto !important;
  }

  .auth-redesign-sidebar {
    padding:24px !important;
  }

  .auth-redesign-intro {
    margin-top:22px !important;
  }

  .auth-redesign-sidebar-foot {
    margin-top:24px !important;
    padding-top:0 !important;
  }

  .auth-redesign-main {
    overflow:visible !important;
  }

  .auth-redesign-modal #tab-register.auth-panel.active,
  .auth-redesign-modal #tab-login.auth-panel.active {
    overflow:visible !important;
    padding-left:22px !important;
    padding-right:22px !important;
  }

  .auth-step-panel.is-active {
    overflow:visible !important;
  }

  .auth-step-actions {
    margin-left:-22px !important;
    margin-right:-22px !important;
    padding-left:22px !important;
    padding-right:22px !important;
  }
}

@media (max-width:560px) {
  .auth-redesign-close {
    top:18px !important;
    right:18px !important;
  }

  .auth-redesign-top {
    padding:24px 22px 18px !important;
  }

  .auth-redesign-top h2,
  .auth-redesign-subtitle {
    max-width:calc(100% - 52px) !important;
  }

  .auth-redesign-top h2 {
    font-size:23px !important;
  }

  .auth-redesign-intro h3 {
    font-size:26px !important;
  }

  .auth-step-head {
    align-items:flex-start !important;
    flex-direction:column !important;
    gap:10px !important;
  }

  .auth-role-status {
    grid-template-columns:1fr !important;
  }

  .auth-role-grid,
  .auth-redesign-modal .split-fields,
  .auth-step-summary,
  .auth-redesign-modal .phone-field {
    grid-template-columns:1fr !important;
  }

  .auth-step-actions {
    align-items:stretch !important;
    flex-direction:column !important;
  }

  .auth-redesign-modal .auth-step-next,
  .auth-redesign-modal .auth-step-submit,
  .auth-step-back {
    width:100% !important;
  }
}

/* Live responsive hardening */
html,
body {
  max-width:100%;
}

img,
svg,
video,
canvas {
  max-width:100%;
  height:auto;
}

a,
button,
input,
select,
textarea,
[class*="badge"],
[class*="chip"],
[class*="status"],
[class*="route"],
[class*="address"],
[class*="email"],
[class*="vin"],
[class*="fin"] {
  overflow-wrap:anywhere;
}

body > nav,
body > nav *,
.tf-site-footer,
.tf-site-footer * {
  min-width:0;
}

.modal-box,
.modal-card,
.contract-card,
.edit-modal-card,
.framework-preview-modal,
.rating-modal,
.carrier-rating-modal,
.auth-redesign-modal.modal-box {
  max-width:calc(100vw - 24px) !important;
}

.modal-overlay,
.contract-modal,
.edit-modal,
.framework-preview-modal.is-open,
.rating-modal-overlay,
.carrier-rating-modal-overlay {
  max-width:100vw;
  overflow-x:hidden;
}

@media (max-width:760px) {
  body > nav {
    left:12px !important;
    right:12px !important;
    top:10px !important;
    width:auto !important;
    max-width:calc(100vw - 24px) !important;
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) auto !important;
    align-items:center !important;
    gap:10px !important;
    padding:10px 12px !important;
  }

  body > nav.is-scrolled {
    left:0 !important;
    right:0 !important;
    max-width:100vw !important;
    grid-template-columns:minmax(0, 1fr) auto !important;
  }

  body > nav .nav-brand {
    min-width:0 !important;
    gap:8px !important;
  }

  body > nav .nav-logo img {
    height:38px !important;
    max-width:58px !important;
  }

  body > nav .header-session-timer {
    min-height:38px !important;
    padding:6px 9px !important;
  }

  body > nav .header-session-timer .timer-icon {
    width:28px !important;
    height:28px !important;
    font-size:13px !important;
  }

  body > nav .header-session-timer .timer-copy strong {
    font-size:15px !important;
  }

  body > nav .nav-actions {
    min-width:0 !important;
    max-width:100% !important;
    justify-content:flex-end !important;
    flex-wrap:wrap !important;
    gap:7px !important;
  }

  body > nav .nav-links {
    grid-column:1 / -1 !important;
    width:100% !important;
    min-width:0 !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    gap:10px !important;
    overflow-x:auto !important;
    padding:4px 0 2px !important;
    scrollbar-width:none !important;
  }

  body > nav .nav-links::-webkit-scrollbar {
    display:none !important;
  }

  body > nav .nav-links li {
    flex:0 0 auto !important;
  }

  body > nav .logout-btn,
  body > nav .tf-btn {
    min-height:38px !important;
    padding:8px 11px !important;
    white-space:normal !important;
    text-align:center !important;
  }

  body > nav .user-chip {
    min-height:40px !important;
    max-width:min(190px, 42vw) !important;
    padding:5px 9px 5px 5px !important;
  }

  body > nav .user-chip .avatar {
    width:30px !important;
    height:30px !important;
    font-size:12px !important;
  }

  body > nav .user-chip .u-name,
  body > nav .user-chip .u-role {
    max-width:112px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .tf-portal-toast {
    left:12px !important;
    right:12px !important;
    top:auto !important;
    bottom:12px !important;
    width:auto !important;
  }

  .tf-consent-banner {
    left:10px;
    right:10px;
    bottom:10px;
    max-height:calc(100vh - 20px);
    overflow:auto;
  }
}

@media (max-width:560px) {
  body > nav {
    left:8px !important;
    right:8px !important;
    max-width:calc(100vw - 16px) !important;
    grid-template-columns:minmax(0, 1fr) minmax(0, auto) !important;
    border-radius:18px !important;
  }

  body > nav .nav-actions {
    max-width:46vw !important;
  }

  body > nav .header-task-link {
    padding-right:26px !important;
  }

  body > nav .logout-btn,
  body > nav .tf-btn {
    min-height:36px !important;
    padding:7px 9px !important;
    font-size:9px !important;
    letter-spacing:.8px !important;
  }

  body > nav .task-popover,
  body > nav .task-notifier--auftraggeber .task-popover {
    position:fixed !important;
    top:calc(100px + env(safe-area-inset-top, 0px)) !important;
    left:8px !important;
    right:8px !important;
    width:auto !important;
    max-height:calc(100vh - 120px) !important;
    overflow:auto !important;
  }

  .modal-box,
  .modal-card,
  .contract-card,
  .edit-modal-card,
  .framework-preview-modal,
  .rating-modal,
  .carrier-rating-modal {
    max-width:calc(100vw - 16px) !important;
    max-height:calc(100vh - 16px) !important;
    border-radius:20px !important;
  }

  .modal-body,
  .contract-body,
  .rating-form,
  .carrier-rating-form {
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .modal-actions,
  .contract-actions,
  .edit-modal-actions,
  .carrier-rating-actions {
    align-items:stretch !important;
    flex-direction:column !important;
  }

  .modal-actions > *,
  .contract-actions > *,
  .edit-modal-actions > *,
  .carrier-rating-actions > * {
    width:100% !important;
  }
}

@media (max-width:768px) {
  html body > nav:has(.nav-login-btn) {
    display:grid !important;
    grid-template-columns:auto minmax(84px, 150px) minmax(84px, 150px) 34px !important;
    grid-template-areas:
      "brand partner partner toggle"
      ". login register ." !important;
    align-items:center !important;
    justify-content:center !important;
    column-gap:clamp(6px, 2.2vw, 12px) !important;
    row-gap:9px !important;
    left:clamp(8px, 2.8vw, 16px) !important;
    right:clamp(8px, 2.8vw, 16px) !important;
    top:clamp(8px, 2.2vw, 14px) !important;
    width:auto !important;
    max-width:calc(100vw - clamp(16px, 5.6vw, 32px)) !important;
    padding:10px clamp(10px, 3vw, 16px) !important;
    overflow:hidden !important;
  }

  html body > nav:has(.nav-login-btn).is-scrolled {
    left:0 !important;
    right:0 !important;
    top:0 !important;
    max-width:100vw !important;
    border-radius:0 0 18px 18px !important;
    padding-inline:clamp(12px, 3.8vw, 20px) !important;
  }

  html body > nav:has(.nav-login-btn) .nav-mobile-toggle {
    grid-area:toggle !important;
    display:grid !important;
    place-items:center !important;
    gap:1px !important;
    width:34px !important;
    height:34px !important;
    padding:0 !important;
    border:1px solid rgba(26,107,212,0.20) !important;
    border-radius:12px !important;
    background:#ffffff !important;
    box-shadow:0 8px 18px rgba(26,107,212,0.08) !important;
    cursor:pointer !important;
  }

  html body > nav:has(.nav-login-btn) .nav-mobile-toggle span {
    display:block !important;
    width:16px !important;
    height:2px !important;
    border-radius:999px !important;
    background:#1a6bd4 !important;
    pointer-events:none !important;
  }

  html body > nav:has(.nav-login-btn) .nav-brand {
    grid-area:brand !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    min-width:0 !important;
    gap:0 !important;
  }

  html body > nav:has(.nav-login-btn) .nav-logo img {
    height:clamp(36px, 8vw, 44px) !important;
    max-width:clamp(50px, 14vw, 72px) !important;
  }

  html body > nav:has(.nav-login-btn) .nav-actions {
    display:contents !important;
    min-width:0 !important;
    max-width:none !important;
  }

  html body > nav:has(.nav-login-btn) .nav-carrier-link,
  html body > nav:has(.nav-login-btn) .nav-customer-link {
    grid-area:partner !important;
    justify-self:center !important;
    max-width:100% !important;
    min-height:36px !important;
    padding:0 8px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:clamp(10px, 2.7vw, 12px) !important;
    letter-spacing:.35px !important;
    text-align:center !important;
  }

  html body > nav:has(.nav-login-btn) .nav-login-btn {
    grid-area:login !important;
  }

  html body > nav:has(.nav-login-btn) .nav-register-btn {
    grid-area:register !important;
  }

  html body > nav:has(.nav-login-btn):not(:has(.nav-register-btn)) .nav-login-btn {
    grid-column:2 / 4 !important;
    grid-row:2 !important;
    justify-self:center !important;
    width:min(150px, 100%) !important;
  }

  html body > nav:has(.nav-login-btn) .nav-login-btn,
  html body > nav:has(.nav-login-btn) .nav-register-btn {
    justify-self:stretch !important;
    justify-content:center !important;
    min-width:0 !important;
    min-height:36px !important;
    padding:8px 10px !important;
    border-radius:12px !important;
    font-size:clamp(10px, 2.55vw, 11px) !important;
    letter-spacing:.35px !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
    text-align:center !important;
  }

  html body > nav:has(.nav-login-btn) .nav-links {
    display:contents !important;
    margin:0 !important;
    padding:0 !important;
    width:auto !important;
    min-width:0 !important;
    overflow:visible !important;
  }

  html body > nav:has(.nav-login-btn) .nav-links li {
    display:none !important;
    min-width:0 !important;
  }

  html body > nav:has(.nav-login-btn).is-mobile-open .nav-links li {
    display:block !important;
    grid-column:1 / -1 !important;
    width:100% !important;
  }

  html body > nav:has(.nav-login-btn).is-mobile-open:not(:has(.nav-carrier-link)):not(:has(.nav-customer-link)) .nav-links li:nth-child(4) {
    grid-area:partner !important;
    grid-column:auto !important;
    justify-self:center !important;
    max-width:100% !important;
  }

  html body > nav:has(.nav-login-btn):not(:has(.nav-carrier-link)):not(:has(.nav-customer-link)) .nav-links li:nth-child(4) {
    display:block !important;
    grid-area:partner !important;
    justify-self:center !important;
    max-width:100% !important;
  }

  html body > nav:has(.nav-login-btn) .nav-links a {
    display:block !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    color:#1a6bd4 !important;
    font-size:clamp(10px, 2.7vw, 12px) !important;
    letter-spacing:.35px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    text-align:center !important;
  }

  html body > nav:has(.nav-login-btn).is-mobile-open .nav-links a {
    width:100% !important;
    min-height:38px !important;
    padding:10px 12px !important;
    border:1px solid rgba(26,107,212,0.12) !important;
    border-radius:12px !important;
    background:#ffffff !important;
  }

  html body > nav:has(.nav-login-btn).is-mobile-open:not(:has(.nav-carrier-link)):not(:has(.nav-customer-link)) .nav-links li:nth-child(4) a {
    width:auto !important;
    min-height:auto !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
  }
}

@media (max-width:768px) {
  .auth-redesign-modal.modal-box {
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
    height:auto !important;
    max-height:calc(100dvh - 16px) !important;
    overflow:hidden !important;
    border-radius:20px !important;
  }

  .auth-redesign-shell {
    display:block !important;
    height:auto !important;
    min-height:0 !important;
    max-height:calc(100dvh - 16px) !important;
    overflow:hidden !important;
  }

  .auth-redesign-sidebar {
    display:none !important;
  }

  .auth-redesign-main {
    display:flex !important;
    flex-direction:column !important;
    height:auto !important;
    min-height:0 !important;
    max-height:calc(100dvh - 16px) !important;
    overflow:hidden !important;
  }

  #tab-login.auth-panel.active {
    flex:0 1 auto !important;
    min-height:0 !important;
    max-height:calc(100dvh - 152px) !important;
    padding:20px 18px 22px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  #tab-register.auth-panel.active {
    flex:1 1 auto !important;
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
    max-height:calc(100dvh - 152px) !important;
    padding:18px 18px 0 !important;
    overflow:hidden !important;
  }

  .auth-step-panel.is-active {
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding-right:0 !important;
    padding-bottom:14px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    scrollbar-width:thin !important;
  }

  .auth-step-actions {
    position:static !important;
    flex:0 0 auto !important;
    align-items:stretch !important;
    flex-direction:column !important;
    gap:10px !important;
    margin:0 -18px !important;
    padding:12px 18px 16px !important;
    border-top:1px solid #d5e4f5 !important;
    background:#ffffff !important;
    z-index:auto !important;
  }

  .auth-redesign-modal .auth-role-grid,
  .auth-redesign-modal .split-fields,
  .auth-redesign-modal .auth-address-grid,
  .auth-redesign-modal .auth-hours-grid,
  .auth-redesign-modal .auth-step-summary,
  .auth-redesign-modal .phone-field {
    grid-template-columns:1fr !important;
    min-width:0 !important;
  }

  .auth-redesign-close {
    top:12px !important;
    right:12px !important;
    z-index:8 !important;
    width:34px !important;
    height:34px !important;
  }
}

@media (max-width:768px) {
  html body > nav:has(#auftraggeberIdentityChip) {
    display:grid !important;
    grid-template-columns:auto minmax(0, 1fr) 34px !important;
    grid-template-areas:"logo timer toggle" !important;
    align-items:center !important;
    justify-content:normal !important;
    column-gap:clamp(8px, 2.6vw, 12px) !important;
    row-gap:8px !important;
    left:clamp(8px, 2.8vw, 16px) !important;
    right:clamp(8px, 2.8vw, 16px) !important;
    top:clamp(8px, 2.2vw, 14px) !important;
    width:auto !important;
    max-width:calc(100vw - clamp(16px, 5.6vw, 32px)) !important;
    padding:10px clamp(10px, 3vw, 16px) !important;
    overflow:visible !important;
  }

  html body > nav:has(#auftraggeberIdentityChip).is-scrolled {
    left:0 !important;
    right:0 !important;
    top:0 !important;
    max-width:100vw !important;
    border-radius:0 0 18px 18px !important;
    padding-inline:clamp(12px, 3.8vw, 20px) !important;
  }

  html body > nav:has(#auftraggeberIdentityChip) .nav-brand {
    display:contents !important;
    min-width:0 !important;
  }

  html body > nav:has(#auftraggeberIdentityChip) .nav-logo {
    grid-area:logo !important;
    justify-self:start !important;
    min-width:0 !important;
  }

  html body > nav:has(#auftraggeberIdentityChip) .nav-logo img {
    height:clamp(36px, 8vw, 44px) !important;
    max-width:clamp(50px, 14vw, 72px) !important;
  }

  html body > nav:has(#auftraggeberIdentityChip) .header-session-timer {
    grid-area:timer !important;
    justify-self:center !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:36px !important;
    padding:6px 10px !important;
    border-radius:14px !important;
  }

  html body > nav:has(#auftraggeberIdentityChip) .header-session-timer .timer-icon {
    width:28px !important;
    height:28px !important;
    font-size:13px !important;
  }

  html body > nav:has(#auftraggeberIdentityChip) .header-session-timer .timer-copy strong {
    font-size:15px !important;
  }

  html body > nav:has(#auftraggeberIdentityChip) .nav-mobile-toggle {
    grid-area:toggle !important;
    display:grid !important;
    place-items:center !important;
    gap:1px !important;
    width:34px !important;
    height:34px !important;
    padding:0 !important;
    border:1px solid rgba(26,107,212,0.20) !important;
    border-radius:12px !important;
    background:#ffffff !important;
    box-shadow:0 8px 18px rgba(26,107,212,0.08) !important;
    cursor:pointer !important;
    justify-self:end !important;
  }

  html body > nav:has(#auftraggeberIdentityChip) .nav-mobile-toggle span {
    display:block !important;
    width:16px !important;
    height:2px !important;
    border-radius:999px !important;
    background:#1a6bd4 !important;
    pointer-events:none !important;
  }

  html body > nav:has(#auftraggeberIdentityChip) .nav-links,
  html body > nav:has(#auftraggeberIdentityChip) .nav-actions {
    display:contents !important;
    margin:0 !important;
    padding:0 !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    overflow:visible !important;
  }

  html body > nav:has(#auftraggeberIdentityChip) .nav-links li,
  html body > nav:has(#auftraggeberIdentityChip) .nav-actions > .header-task-link,
  html body > nav:has(#auftraggeberIdentityChip) .nav-actions > #auftraggeberIdentityChip,
  html body > nav:has(#auftraggeberIdentityChip) .nav-actions > .logout-btn {
    display:none !important;
    min-width:0 !important;
  }

  html body > nav:has(#auftraggeberIdentityChip).is-mobile-open .nav-links li {
    display:block !important;
    grid-column:1 / -1 !important;
    width:100% !important;
  }

  html body > nav:has(#auftraggeberIdentityChip).is-mobile-open .nav-actions > .header-task-link,
  html body > nav:has(#auftraggeberIdentityChip).is-mobile-open .nav-actions > #auftraggeberIdentityChip,
  html body > nav:has(#auftraggeberIdentityChip).is-mobile-open .nav-actions > .logout-btn {
    display:flex !important;
    grid-column:1 / -1 !important;
    width:100% !important;
    max-width:100% !important;
    min-height:40px !important;
  }

  html body > nav:has(#auftraggeberIdentityChip).is-mobile-open .nav-links a,
  html body > nav:has(#auftraggeberIdentityChip).is-mobile-open .nav-links .tf-nav-disabled,
  html body > nav:has(#auftraggeberIdentityChip).is-mobile-open .nav-actions > .header-task-link,
  html body > nav:has(#auftraggeberIdentityChip).is-mobile-open .nav-actions > .logout-btn {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:40px !important;
    padding:10px 12px !important;
    border:1px solid rgba(26,107,212,0.12) !important;
    border-radius:12px !important;
    background:#ffffff !important;
    color:#1a6bd4 !important;
    font-size:11px !important;
    letter-spacing:.55px !important;
    line-height:1.2 !important;
    text-align:center !important;
    white-space:normal !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  html body > nav:has(#auftraggeberIdentityChip).is-mobile-open .nav-actions > #auftraggeberIdentityChip {
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px !important;
    padding:6px 12px 6px 6px !important;
    border-radius:12px !important;
    background:#ffffff !important;
  }

  html body > nav:has(#auftraggeberIdentityChip).is-mobile-open .nav-actions > #auftraggeberIdentityChip .user-meta {
    min-width:0 !important;
  }

  html body > nav:has(#auftraggeberIdentityChip).is-mobile-open .nav-actions > #auftraggeberIdentityChip .u-name,
  html body > nav:has(#auftraggeberIdentityChip).is-mobile-open .nav-actions > #auftraggeberIdentityChip .u-role {
    max-width:none !important;
  }

  html body > nav:has(#auftraggeberIdentityChip).is-mobile-open .nav-actions > .header-task-link {
    position:relative !important;
  }

  html body > nav:has(#auftraggeberIdentityChip).is-mobile-open .nav-actions > .header-task-link .header-task-count {
    top:7px !important;
    right:9px !important;
  }
}

@media (max-width:768px) {
  html body > nav:has(#taskBell) {
    display:grid !important;
    grid-template-columns:auto minmax(0, 1fr) 34px !important;
    grid-template-areas:"logo timer toggle" !important;
    align-items:center !important;
    justify-content:normal !important;
    column-gap:clamp(8px, 2.6vw, 12px) !important;
    row-gap:8px !important;
    left:clamp(8px, 2.8vw, 16px) !important;
    right:clamp(8px, 2.8vw, 16px) !important;
    top:clamp(8px, 2.2vw, 14px) !important;
    width:auto !important;
    max-width:calc(100vw - clamp(16px, 5.6vw, 32px)) !important;
    padding:10px clamp(10px, 3vw, 16px) !important;
    overflow:visible !important;
  }

  html body > nav:has(#taskBell).is-scrolled {
    left:0 !important;
    right:0 !important;
    top:0 !important;
    max-width:100vw !important;
    border-radius:0 0 18px 18px !important;
    padding-inline:clamp(12px, 3.8vw, 20px) !important;
  }

  html body > nav:has(#taskBell) .nav-brand {
    display:contents !important;
    min-width:0 !important;
  }

  html body > nav:has(#taskBell) .nav-logo {
    grid-area:logo !important;
    justify-self:start !important;
    min-width:0 !important;
  }

  html body > nav:has(#taskBell) .nav-logo img {
    height:clamp(36px, 8vw, 44px) !important;
    max-width:clamp(50px, 14vw, 72px) !important;
  }

  html body > nav:has(#taskBell) .header-session-timer {
    grid-area:timer !important;
    justify-self:center !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:36px !important;
    padding:6px 10px !important;
    border-radius:14px !important;
  }

  html body > nav:has(#taskBell) .header-session-timer .timer-icon {
    width:28px !important;
    height:28px !important;
    font-size:13px !important;
  }

  html body > nav:has(#taskBell) .header-session-timer .timer-copy strong {
    font-size:15px !important;
  }

  html body > nav:has(#taskBell) .nav-mobile-toggle {
    grid-area:toggle !important;
    display:grid !important;
    place-items:center !important;
    gap:1px !important;
    width:34px !important;
    height:34px !important;
    padding:0 !important;
    border:1px solid rgba(26,107,212,0.20) !important;
    border-radius:12px !important;
    background:#ffffff !important;
    box-shadow:0 8px 18px rgba(26,107,212,0.08) !important;
    cursor:pointer !important;
    justify-self:end !important;
  }

  html body > nav:has(#taskBell) .nav-mobile-toggle span {
    display:block !important;
    width:16px !important;
    height:2px !important;
    border-radius:999px !important;
    background:#1a6bd4 !important;
    pointer-events:none !important;
  }

  html body > nav:has(#taskBell) .nav-links,
  html body > nav:has(#taskBell) .nav-actions {
    display:contents !important;
    margin:0 !important;
    padding:0 !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    overflow:visible !important;
  }

  html body > nav:has(#taskBell) .nav-links li,
  html body > nav:has(#taskBell) .nav-actions > .task-notifier,
  html body > nav:has(#taskBell) .nav-actions > .user-chip.user-chip-static,
  html body > nav:has(#taskBell) .nav-actions > .logout-btn {
    display:none !important;
    min-width:0 !important;
  }

  html body > nav:has(#taskBell).is-mobile-open .nav-links li {
    display:block !important;
    grid-column:1 / -1 !important;
    width:100% !important;
  }

  html body > nav:has(#taskBell).is-mobile-open .nav-actions > .task-notifier,
  html body > nav:has(#taskBell).is-mobile-open .nav-actions > .user-chip.user-chip-static,
  html body > nav:has(#taskBell).is-mobile-open .nav-actions > .logout-btn {
    grid-column:1 / -1 !important;
    width:100% !important;
    max-width:100% !important;
    min-height:40px !important;
  }

  html body > nav:has(#taskBell).is-mobile-open .nav-actions > .task-notifier {
    display:block !important;
    position:relative !important;
  }

  html body > nav:has(#taskBell).is-mobile-open .nav-actions > .user-chip.user-chip-static,
  html body > nav:has(#taskBell).is-mobile-open .nav-actions > .logout-btn {
    display:flex !important;
  }

  html body > nav:has(#taskBell).is-mobile-open .nav-links a,
  html body > nav:has(#taskBell).is-mobile-open .nav-links .tf-nav-disabled,
  html body > nav:has(#taskBell).is-mobile-open .nav-actions > .task-notifier > #taskBell,
  html body > nav:has(#taskBell).is-mobile-open .nav-actions > .logout-btn {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:40px !important;
    padding:10px 12px !important;
    border:1px solid rgba(26,107,212,0.12) !important;
    border-radius:12px !important;
    background:#ffffff !important;
    color:#1a6bd4 !important;
    font-size:11px !important;
    letter-spacing:.55px !important;
    line-height:1.2 !important;
    text-align:center !important;
    white-space:normal !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  html body > nav:has(#taskBell).is-mobile-open .nav-actions > .task-notifier > #taskBell {
    position:relative !important;
  }

  html body > nav:has(#taskBell).is-mobile-open .nav-actions > .task-notifier > #taskBell .task-badge {
    top:7px !important;
    right:9px !important;
  }

  html body > nav:has(#taskBell).is-mobile-open .nav-actions > .task-notifier > .task-popover {
    top:calc(100% + 8px) !important;
    right:0 !important;
    left:0 !important;
    width:100% !important;
    max-height:min(52dvh, 360px) !important;
  }

  html body > nav:has(#taskBell).is-mobile-open .nav-actions > .user-chip.user-chip-static {
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px !important;
    padding:6px 12px 6px 6px !important;
    border-radius:12px !important;
    background:#ffffff !important;
  }

  html body > nav:has(#taskBell).is-mobile-open .nav-actions > .user-chip.user-chip-static .user-meta {
    min-width:0 !important;
  }

  html body > nav:has(#taskBell).is-mobile-open .nav-actions > .user-chip.user-chip-static .u-name,
  html body > nav:has(#taskBell).is-mobile-open .nav-actions > .user-chip.user-chip-static .u-role {
    max-width:none !important;
  }
}

@media (max-width:768px) {
  html body > nav:has(#auftraggeberIdentityChip),
  html body > nav:has(#taskBell) {
    grid-template-columns:minmax(58px, auto) minmax(104px, 1fr) 34px !important;
    grid-template-areas:
      "logo dashboard toggle"
      "timer dashboard toggle" !important;
    align-items:center !important;
    row-gap:3px !important;
  }

  html body > nav:has(#auftraggeberIdentityChip) .header-session-timer,
  html body > nav:has(#taskBell) .header-session-timer {
    justify-self:start !important;
    align-self:start !important;
    min-height:22px !important;
    max-width:98px !important;
    padding:3px 6px !important;
    gap:4px !important;
    border-radius:10px !important;
    box-shadow:none !important;
  }

  html body > nav:has(#auftraggeberIdentityChip) .header-session-timer .timer-icon,
  html body > nav:has(#taskBell) .header-session-timer .timer-icon {
    width:16px !important;
    height:16px !important;
    font-size:10px !important;
  }

  html body > nav:has(#auftraggeberIdentityChip) .header-session-timer .timer-copy,
  html body > nav:has(#taskBell) .header-session-timer .timer-copy {
    gap:0 !important;
  }

  html body > nav:has(#auftraggeberIdentityChip) .header-session-timer .timer-copy small,
  html body > nav:has(#taskBell) .header-session-timer .timer-copy small {
    font-size:10px !important;
    letter-spacing:.7px !important;
  }

  html body > nav:has(#auftraggeberIdentityChip) .header-session-timer .timer-copy strong,
  html body > nav:has(#taskBell) .header-session-timer .timer-copy strong {
    font-size:12px !important;
    letter-spacing:.35px !important;
  }

  html body > nav:has(#auftraggeberIdentityChip) .nav-links li:first-child,
  html body > nav:has(#taskBell) .nav-links li:first-child,
  html body > nav:has(#auftraggeberIdentityChip).is-mobile-open .nav-links li:first-child,
  html body > nav:has(#taskBell).is-mobile-open .nav-links li:first-child {
    display:block !important;
    grid-area:dashboard !important;
    grid-column:auto !important;
    justify-self:center !important;
    align-self:center !important;
    width:min(136px, 100%) !important;
    min-width:0 !important;
  }

  html body > nav:has(#auftraggeberIdentityChip) .nav-links li:first-child a,
  html body > nav:has(#auftraggeberIdentityChip) .nav-links li:first-child .tf-nav-disabled,
  html body > nav:has(#taskBell) .nav-links li:first-child a,
  html body > nav:has(#taskBell) .nav-links li:first-child .tf-nav-disabled,
  html body > nav:has(#auftraggeberIdentityChip).is-mobile-open .nav-links li:first-child a,
  html body > nav:has(#auftraggeberIdentityChip).is-mobile-open .nav-links li:first-child .tf-nav-disabled,
  html body > nav:has(#taskBell).is-mobile-open .nav-links li:first-child a,
  html body > nav:has(#taskBell).is-mobile-open .nav-links li:first-child .tf-nav-disabled {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:36px !important;
    padding:9px 12px !important;
    border:1px solid rgba(26,107,212,0.16) !important;
    border-radius:12px !important;
    background:#ffffff !important;
    color:#1a6bd4 !important;
    font-size:11px !important;
    font-weight:800 !important;
    letter-spacing:.55px !important;
    line-height:1.15 !important;
    text-align:center !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    box-shadow:0 8px 18px rgba(26,107,212,0.08) !important;
  }
}