:root {
  font-family: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color: #182943;
  background: #eaf0f8;
  font-size: 13px
}

* {
  box-sizing: border-box
}

body {
  margin: 0
}

button, input, select {
  font: inherit
}

button {
  cursor: pointer
}

  button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid #fb9c38;
    outline-offset: 2px
  }

#one {
  --paper: var(--ef-color-surface);
  --ink: var(--ef-color-text);
  --muted: var(--ef-color-text-muted);
  --line: var(--ef-color-border);
  --bg: var(--ef-color-bg);
  --blue: var(--ef-color-primary);
  --tint: var(--ef-color-tint);
  --rail: var(--ef-color-rail);
  --rail-text: var(--ef-color-rail-text);
  color: var(--ink);
  background: var(--bg);
  border-radius: 15px;
  border: 1px solid #dce4f1;
  overflow: hidden;
  max-width: 1400px;
  margin: 14px auto;
  box-shadow: 0 16px 65px #273b5718
}

  #one .demo-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
    padding: 11px 15px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap
  }

    #one .demo-toolbar strong {
      letter-spacing: .7px;
      color: var(--muted);
      font-size: 10px
    }

  #one .toggle-set {
    display: flex;
    gap: 3px;
    background: var(--bg);
    border-radius: 9px;
    padding: 3px;
    border: 1px solid var(--line)
  }

    #one .toggle-set button {
      font-size: 11px;
      padding: 7px 10px;
      border: 0;
      background: transparent;
      border-radius: 7px;
      color: var(--muted);
      font-weight: 700
    }

      #one .toggle-set button.is-active {
        background: #2758cf;
        color: #fff
      }

  #one .stage {
    max-width: 100%;
    margin: auto;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden
  }

  #one.tablet .stage {
    max-width: 780px
  }

  #one.mobile .stage {
    max-width: 392px
  }

  #one .topbar {
    height: 60px;
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--paper);
    padding: 0 19px;
    border-bottom: 1px solid var(--line)
  }

  #one .brand {
    font-weight: 850;
    font-size: 20px;
    letter-spacing: -.9px;
    white-space: nowrap
  }

    #one .brand i {
      color: #ec8343;
      font-style: normal
    }

    #one .brand sup {
      font-size: 9px
    }

    #one .brand b {
      color: #2459ce
    }

  #one .global-search {
    margin-left: 20px;
    width: 230px
  }

  #one .org {
    margin-left: auto;
    text-align: right;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap
  }

    #one .org small {
      font-size: 10px;
      font-weight: 500;
      color: var(--muted);
      display: block
    }

  #one .avatar {
    border: 0;
    background: #dce8fb;
    color: #1b428a;
    width: 33px;
    height: 33px;
    border-radius: 50%;
    font-weight: 800;
    flex-shrink: 0
  }

  #one .body {
    display: flex;
    flex: 1;
    min-height: 0;
    position: relative
  }

  #one .rail {
    background: var(--rail);
    color: var(--rail-text);
    width: 67px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    z-index: 2
  }

  #one .rail-top {
    height: 53px;
    min-height: 53px;
    display: grid;
    place-items: center;
    border-bottom: 1px solid #ffffff28
  }

    #one .rail-top button {
      background: none;
      border: 0;
      color: #fff;
      border-radius: 8px;
      padding: 9px
    }

  #one .rail-items {
    padding: 8px 4px;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    min-height: 0
  }

  #one .rail-bottom {
    border-top: 1px solid #ffffff30;
    padding: 7px 5px 10px;
    display: grid;
    place-items: center;
    flex-shrink: 0
  }

  #one .rail-button {
    width: 57px;
    height: 56px;
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 9px;
    position: relative
  }

    #one .rail-button:hover {
      background: #ffffff1d
    }

    #one .rail-button.active {
      background: #3359a3
    }

      #one .rail-button.active:before {
        content: "";
        position: absolute;
        left: 0;
        top: 9px;
        bottom: 9px;
        width: 3px;
        background: #b5cfff;
        border-radius: 4px
      }

  #one .rail-letter {
    border-radius: 7px;
    height: 27px;
    width: 27px;
    display: grid;
    place-items: center;
    color: white;
    font-size: 10px;
    font-weight: 850
  }

  #one .rail-label {
    font-size: 9px;
    font-weight: 700;
    line-height: 1.05;
    max-width: 53px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
  }

  #one .rail-popover {
    position: absolute;
    left: 71px;
    bottom: 15px;
    z-index: 7;
    width: 250px;
    max-height: 430px;
    overflow: auto;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 12px;
    box-shadow: 0 18px 60px #0c224550
  }

    #one .rail-popover button {
      display: flex;
      align-items: center;
      gap: 9px;
      border: 0;
      background: none;
      width: 100%;
      text-align: left;
      padding: 9px;
      border-radius: 8px;
      color: var(--ink);
      font-size: 11px;
      font-weight: 650
    }

      #one .rail-popover button:hover {
        background: var(--tint)
      }

  #one .sidebar {
    width: 226px;
    flex-shrink: 0;
    background: var(--paper);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    min-height: 0
  }

  #one .sidebar-head {
    padding: 21px 17px 17px;
    border-bottom: 1px solid var(--line)
  }

    #one .sidebar-head strong {
      display: block;
      font-size: 15px;
      line-height: 1.2
    }

    #one .sidebar-head small {
      font-size: 10px;
      color: var(--muted)
    }

  #one .sidebar-scroll {
    overflow: auto;
    flex: 1;
    padding: 8px 9px
  }

  #one .menu-group {
    font-size: 9px;
    letter-spacing: 1px;
    color: var(--muted);
    font-weight: 850;
    margin: 16px 10px 6px;
    text-transform: uppercase
  }

  #one .menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 10px;
    border: 0;
    background: transparent;
    color: #344962;
    border-radius: 8px;
    width: 100%;
    text-align: left;
    font-size: 11px;
    font-weight: 650
  }

    #one .menu-item.active {
      background: #dfe9ff;
      color: #1748ac;
      font-weight: 850
    }

    #one .menu-item:hover {
      background: #edf3fe
    }

  #one .sidebar-foot {
    border-top: 1px solid var(--line);
    padding: 8px
  }

  #one .main {
    min-width: 0;
    flex: 1;
    padding: 23px;
    overflow: auto
  }

  #one .crumb {
    font-size: 10px;
    color: var(--muted)
  }

  #one .subtle {
    font-size: 11px;
    color: var(--muted)
  }

  #one .role {
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--paper);
    color: var(--ink);
    padding: 9px;
    font-size: 11px
  }

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

  #one .dash-grid {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 12px;
    margin-top: 13px
  }

  #one .chart {
    height: 155px;
    display: flex;
    align-items: end;
    gap: 8px;
    border-bottom: 1px solid var(--line);
    margin: 19px 0 7px
  }

    #one .chart i {
      flex: 1;
      border-radius: 4px 4px 0 0;
      background: linear-gradient(#376bed,#a9c3ff)
    }

  #one .task {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    font-size: 11px
  }

    #one .task:last-child {
      border: 0
    }

    #one .task span {
      flex: 1
    }

    #one .task button {
      border: 0;
      border-radius: 7px;
      color: #234da9;
      background: var(--tint);
      padding: 6px 9px;
      font-weight: 700;
      font-size: 10px
    }

  #one .quick-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
    margin-top: 12px
  }

    #one .quick-grid button {
      background: var(--tint);
      color: #223e70;
      border: 1px solid #d9e5fd;
      border-radius: 8px;
      text-align: left;
      padding: 10px;
      font-size: 11px;
      font-weight: 700
    }

  #one .app-selection {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 23px
  }

  #one .app-banner {
    background: linear-gradient(115deg,#163364,#2a58b1);
    border-radius: 12px;
    padding: 24px;
    color: white;
    margin: 13px 0 18px
  }

    #one .app-banner h1 {
      font-size: 23px;
      margin: 3px 0 6px
    }

    #one .app-banner p {
      margin: 0;
      color: #d8e6ff;
      font-size: 11px
    }

  #one .filter-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 9px
  }

  #one .filter {
    padding: 7px 10px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 9px
  }

    #one .filter label {
      display: block;
      text-transform: uppercase;
      font-size: 9px;
      letter-spacing: .5px;
      font-weight: 850;
      color: var(--muted)
    }

    #one .filter select {
      width: 100%;
      border: 0;
      background: none;
      color: var(--ink);
      font-size: 11px;
      font-weight: 700;
      margin-top: 3px
    }

  #one select option {
    color: #182943;
    background: #fff
  }

  #one .catalog-search {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 11px 12px;
    background: var(--paper);
    margin-top: 10px;
    color: var(--ink)
  }

  #one .app-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 10px;
    margin-top: 12px
  }

  #one .app-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    min-height: 133px;
    gap: 8px
  }

    #one .app-card b {
      font-size: 11px;
      line-height: 1.35;
      min-height: 30px
    }

    #one .app-card button {
      border: 0;
      background: transparent;
      color: #2055c2;
      padding: 4px;
      font-weight: 800;
      font-size: 11px
    }

  #one .app-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    color: var(--muted);
    font-size: 9px
  }

  #one .mobile-bottom {
    display: none
  }

  #one .scrim {
    position: absolute;
    z-index: 10;
    inset: 0;
    background: #0c1b3380;
    border: 0;
    padding: 0
  }

  #one .mobile-drawer {
    position: absolute;
    z-index: 11;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: min(336px,87%);
    background: var(--paper);
    box-shadow: 12px 0 35px #091b383b;
    animation: slide .17s ease-out
  }

  #one .drawer-head {
    padding: 16px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 11px
  }

    #one .drawer-head b {
      display: block;
      font-size: 15px
    }

    #one .drawer-head small {
      color: var(--muted);
      font-size: 10px
    }

    #one .drawer-head button {
      margin-left: auto;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--paper);
      padding: 8px;
      color: var(--ink)
    }

  #one .drawer-list {
    overflow: auto;
    flex: 1;
    padding: 9px 11px
  }

  #one .drawer-footer {
    border-top: 1px solid var(--line);
    padding: 12px;
    display: grid;
    gap: 7px
  }

    #one .drawer-footer button {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--tint);
      font-weight: 750;
      color: #183f8d;
      text-align: left;
      padding: 11px
    }

  #one .drawer-app {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 0;
    background: transparent;
    color: var(--ink);
    text-align: left;
    border-radius: 8px;
    font-weight: 700;
    font-size: 11px
  }

    #one .drawer-app:hover, #one .drawer-app.current {
      background: var(--tint)
    }

    #one .drawer-app .app-emblem {
      flex-shrink: 0;
      width: 31px;
      height: 31px;
      display: grid;
      place-items: center;
      color: #fff;
      border-radius: 8px;
      font-size: 10px
    }

  #one svg {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    flex-shrink: 0
  }

  #one .menu-item svg {
    width: 16px;
    height: 16px
  }

@keyframes slide {
  from {
    transform: translateX(-25px);
    opacity: .65
  }

  to {
    transform: translateX(0);
    opacity: 1
  }
}

@media(max-width:860px) {
  #one .kpis {
    grid-template-columns: repeat(2,minmax(0,1fr))
  }

  #one .dash-grid {
    grid-template-columns: 1fr
  }

  #one .app-grid {
    grid-template-columns: repeat(3,minmax(0,1fr))
  }
}

#one.tablet .kpis {
  grid-template-columns: repeat(2,minmax(0,1fr))
}

#one.tablet .dash-grid {
  grid-template-columns: 1fr
}

#one.tablet .sidebar {
  width: 192px
}

#one.tablet .app-grid {
  grid-template-columns: repeat(3,minmax(0,1fr))
}

@media(max-width:600px) {
  #one .rail, #one .sidebar {
    display: none
  }

  #one .org, #one .global-search {
    display: none
  }

  #one .topbar {
    height: 57px;
    min-height: 57px;
    padding: 0 13px
  }

  #one .main {
    padding: 17px 13px
  }

  #one .kpis {
    grid-template-columns: repeat(2,minmax(0,1fr))
  }

  #one .dash-grid {
    grid-template-columns: 1fr
  }

  #one .mobile-bottom {
    display: flex
  }

  #one .app-selection {
    padding: 15px
  }

  #one .app-banner {
    padding: 18px
  }

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

  #one .filter-grid {
    grid-template-columns: repeat(2,minmax(0,1fr))
  }

    #one .filter-grid .filter:first-child {
      grid-column: span 2
    }
}

#one.mobile .rail, #one.mobile .sidebar, #one.mobile .org, #one.mobile .global-search {
  display: none
}

#one.mobile .topbar {
  height: 57px;
  min-height: 57px;
  padding: 0 13px
}

#one.mobile .main {
  padding: 17px 13px
}

#one.mobile .kpis {
  grid-template-columns: repeat(2,minmax(0,1fr))
}

#one.mobile .dash-grid {
  grid-template-columns: 1fr
}

#one.mobile .mobile-bottom {
  display: flex
}

#one.mobile .app-selection {
  padding: 15px
}

#one.mobile .app-banner {
  padding: 18px
}

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

#one.mobile .filter-grid {
  grid-template-columns: repeat(2,minmax(0,1fr))
}

  #one.mobile .filter-grid .filter:first-child {
    grid-column: span 2
  }

#one .mobile-bottom {
  height: 61px;
  min-height: 61px;
  background: var(--paper);
  border-top: 1px solid var(--line);
  align-items: center;
  justify-content: space-around
}

  #one .mobile-bottom button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: transparent;
    border: 0;
    color: #385171;
    font-size: 10px;
    font-weight: 800;
    min-width: 55px;
    height: 55px
  }

    #one .mobile-bottom button.active {
      color: #2455c5
    }

  #one .mobile-bottom svg {
    height: 20px;
    width: 20px
  }
/* Complete project shell: responsive to actual window height, not a fixed mockup canvas. */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden
}

body {
  background: #f4f7fc
}

#one {
  margin: 0 auto;
  width: 100%;
  height: 100dvh;
  max-width: none;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  font-size: 13px
}

  #one .stage {
    height: 100%;
    flex: 1;
    min-height: 0;
    max-width: 100%;
    overflow: hidden
  }

  #one .topbar {
    gap: 12px
  }

  #one .logo-action {
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    cursor: pointer
  }

  #one .header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px
  }

  #one .header-icon {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 9px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: var(--ink)
  }

    #one .header-icon:hover {
      background: var(--tint)
    }

  #one .signout {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    border: 1px solid var(--line);
    background: var(--paper);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 700
  }

    #one .signout svg {
      width: 15px;
      height: 15px
    }

  #one .topbar .org {
    margin-left: 0
  }

  #one .topbar .global-search {
    width: min(280px,32vw);
    margin-left: 14px
  }

  #one .sidebar, #one .rail {
    height: 100%
  }

  #one .rail-letter {
    font-size: 10px
  }

  #one .rail-button {
    color: #fff
  }

  #one .rail-bottom .rail-button {
    color: white
  }

  #one .menu-item:hover {
    cursor: pointer
  }

  #one .menu-item span {
    min-width: 0
  }
  /* Login */
  #one .login-screen {
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--paper)
  }

  #one .login-art {
    position: relative;
    min-height: 590px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: clamp(30px,4vw,65px);
    color: #fff;
    background: radial-gradient(ellipse at 90% 90%,#2c54ad 0,transparent 52%),linear-gradient(132deg,#101f3c,#193666 72%,#173a80)
  }

    #one .login-art::before {
      content: "";
      position: absolute;
      right: -120px;
      top: 15%;
      width: 360px;
      height: 360px;
      border: 1px solid #ffffff17;
      border-radius: 50%;
      box-shadow: 0 0 0 60px #ffffff06,0 0 0 130px #ffffff04;
      pointer-events: none
    }

  #one .login-brand {
    font-size: 27px;
    letter-spacing: -1px;
    font-weight: 850;
    color: #fff;
    position: relative;
    z-index: 1
  }

    #one .login-brand .e {
      color: #ffa168
    }

    #one .login-brand .one {
      color: #a1beff
    }

    #one .login-brand sup {
      font-size: 9px;
      vertical-align: super;
      margin-right: 4px
    }

  #one .login-art .brand-caption {
    color: #c9dafa;
    letter-spacing: 1.3px;
    font-size: 10px;
    font-weight: 700;
    margin-top: 5px
  }

  #one .login-title {
    font-size: clamp(29px,3.9vw,53px);
    line-height: 1.12;
    letter-spacing: -1.8px;
    font-weight: 850;
    margin: 74px 0 17px;
    max-width: 480px;
    position: relative;
    z-index: 1
  }

    #one .login-title span {
      color: #acc7ff
    }

  #one .login-art p {
    font-size: 13px;
    line-height: 1.8;
    color: #d2e1ff;
    max-width: 370px;
    margin: 0;
    position: relative;
    z-index: 1
  }

  #one .login-illustration {
    max-width: 440px;
    width: 90%;
    border: 1px solid #ffffff38;
    background: #ffffff15;
    border-radius: 18px;
    box-shadow: 0 25px 60px #071a4233;
    padding: 20px;
    margin-top: 55px;
    z-index: 1;
    position: relative
  }

    #one .login-illustration .mini-kpis {
      display: flex;
      gap: 12px;
      color: white
    }

      #one .login-illustration .mini-kpis b {
        font-size: 18px;
        display: block
      }

      #one .login-illustration .mini-kpis small {
        color: #dde9ff;
        font-size: 10px
      }

    #one .login-illustration .spark-bars {
      display: flex;
      align-items: flex-end;
      gap: 10px;
      height: 105px;
      margin-top: 12px;
      border-bottom: 1px solid #ffffff33
    }

      #one .login-illustration .spark-bars i {
        flex: 1;
        background: linear-gradient(#adc7ff,#5483e9);
        border-radius: 5px 5px 0 0
      }

  #one .login-copyright {
    margin-top: auto;
    color: #a9bfeb;
    font-size: 11px;
    padding-top: 25px;
    position: relative;
    z-index: 1
  }

  #one .login-right {
    height: 100%;
    min-height: 570px;
    padding: 40px clamp(25px,6vw,90px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--paper)
  }

    #one .login-right .secure-label {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 11px;
      letter-spacing: 1px;
      font-weight: 750;
      color: var(--muted);
      margin-bottom: 48px
    }

    #one .login-right h1 {
      font-size: 31px;
      letter-spacing: -1px;
      margin: 0 0 7px
    }

    #one .login-right .login-intro {
      font-size: 12px;
      color: var(--muted);
      margin: 0 0 27px
    }

  #one .login-field {
    margin-bottom: 18px
  }

    #one .login-field label {
      display: block;
      font-weight: 750;
      color: var(--ink);
      font-size: 11px;
      margin-bottom: 7px
    }

    #one .login-field input {
      width: 100%;
      height: 45px;
      padding: 0 13px;
      border: 1px solid var(--line);
      background: var(--paper);
      color: var(--ink);
      border-radius: 10px;
      font-size: 12px
    }

  #one .login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    gap: 8px;
    margin: 0 0 23px
  }

    #one .login-options label {
      display: flex;
      align-items: center;
      gap: 6px;
      color: var(--muted)
    }

    #one .login-options .reset {
      border: 0;
      background: transparent;
      color: #2559c5;
      font-weight: 750;
      padding: 4px
    }

  #one .demo-notice {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-top: 22px;
    padding: 13px;
    color: var(--muted);
    font-size: 11px
  }

    #one .demo-notice b {
      display: block;
      color: var(--ink);
      margin-bottom: 3px
    }

  #one .login-bottom {
    font-size: 10px;
    color: var(--muted);
    text-align: center;
    margin-top: 30px
  }

  #one .auth-error {
    color: #c52e43;
    font-size: 11px;
    margin: -8px 0 12px
  }

  /* Selector */
  #one .app-selection {
    display: grid;
    grid-template-columns: 188px minmax(0,1fr);
    gap: 26px;
    padding: 24px 30px 36px
  }

  #one .catalog-side {
    border-right: 1px solid var(--line);
    padding-right: 16px;
    min-width: 0
  }

  #one .side-caption {
    font-weight: 850;
    letter-spacing: .9px;
    font-size: 10px;
    color: var(--muted);
    margin: 10px 8px 12px
  }

  #one .hub-option {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ink);
    width: 100%;
    font-weight: 650;
    font-size: 11px;
    padding: 10px;
    text-align: left
  }

    #one .hub-option svg {
      width: 17px;
      height: 17px
    }

    #one .hub-option .hub-count {
      font-size: 10px;
      color: var(--muted);
      margin-left: auto
    }

    #one .hub-option.active {
      background: var(--tint);
      color: #1749a9;
      font-weight: 850;
      box-shadow: inset 3px 0 0 #3c70e5
    }

  #one .side-divider {
    border-top: 1px solid var(--line);
    margin: 17px 0
  }

  #one .catalog-body {
    min-width: 0
  }

  #one .app-banner {
    background: linear-gradient(112deg,#142950,#2453ac)
  }

    #one .app-banner .banner-stats {
      float: right;
      display: flex;
      gap: 9px;
      margin: 0 0 0 15px
    }

  #one .banner-stat {
    border: 1px solid #ffffff50;
    border-radius: 10px;
    background: #ffffff15;
    padding: 9px 13px;
    color: #fff;
    text-align: center;
    min-width: 78px
  }

    #one .banner-stat strong {
      display: block;
      font-size: 19px;
      color: #fff
    }

    #one .banner-stat small {
      color: #e4edff;
      font-size: 9px
    }

  #one .catalog-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 22px 0 12px
  }

    #one .catalog-label h2 {
      font-size: 14px;
      margin: 0
    }

    #one .catalog-label small {
      font-size: 10px;
      color: var(--muted)
    }

  #one .app-grid {
    grid-template-columns: repeat(4,minmax(0,1fr))
  }

  #one .app-card {
    min-height: 145px;
    gap: 8px;
    border-radius: 12px;
    box-shadow: 0 2px 12px #14294705
  }

    #one .app-card:hover {
      border-color: #90aaf1
    }

  #one .card-top {
    display: flex;
    align-items: center;
    justify-content: space-between
  }

  #one .app-card .app-meta {
    margin-top: auto
  }

    #one .app-card .app-meta button {
      white-space: nowrap
    }

  #one .catalog-empty {
    padding: 35px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    text-align: center;
    color: var(--muted);
    margin-top: 15px
  }

  #one .status {
    font-weight: 750;
    color: #207850
  }

    #one .status.locked {
      color: #8a651b
    }

  #one .rail-popover {
    left: 71px;
    top: auto;
    bottom: 12px
  }

    #one .rail-popover button {
      font-size: 11px
    }

  #one .user-chip {
    font-size: 11px;
    border: 1px solid var(--line);
    color: var(--muted);
    padding: 7px;
    border-radius: 9px;
    background: var(--paper)
  }

  #one .locked-app {
    background: #f8f9fc
  }

  /* Dark theme: contrast stays intentionally high */
  /* Shell colours come from ef-tokens.css (data-ef-theme on #one switches light/dark). */
  #one.dark .sidebar, #one.dark .login-right {
    background: var(--paper)
  }

    #one.dark .sidebar .menu-item, #one.dark .navitem, #one.dark .hub-option {
      color: var(--ink)
    }

      #one.dark .sidebar .menu-item.active, #one.dark .hub-option.active {
        background: #314b79;
        color: #f4f7ff
      }

      #one.dark .sidebar .menu-item:hover {
        background: #324562;
        color: #fff
      }

  #one.dark .app-card.locked-app {
    background: #202a3a
  }

  #one.dark .app-meta button, #one.dark .login-options .reset {
    color: #acc6ff
  }

  #one.dark .quick-grid button {
    background: #293e60;
    color: #f3f6ff;
    border-color: #445d89
  }

  #one.dark .task button {
    color: #e9f1ff;
    background: #344f7e
  }

  #one.dark .status {
    color: #95e9c1
  }

    #one.dark .status.locked {
      color: #f2c27e
    }

  #one.dark .menu-item.active {
    color: #fff;
    background: #314b7d
  }

  #one.dark select option {
    background: #1c293d;
    color: #fff
  }

  #one.dark .login-art {
    background: radial-gradient(ellipse at 90% 90%,#284a99 0,transparent 50%),linear-gradient(132deg,#09152a,#18366c)
  }

/* Responsive */
@media(max-width:1120px) {
  #one .app-grid {
    grid-template-columns: repeat(3,minmax(0,1fr))
  }

  #one .app-selection {
    gap: 18px;
    padding: 20px
  }
}

@media(max-width:820px) {
  #one .app-selection {
    grid-template-columns: 148px minmax(0,1fr);
    gap: 15px;
    padding: 16px
  }

  #one .catalog-side {
    padding-right: 9px
  }

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

  #one .banner-stat {
    display: none
  }

  #one .global-search {
    display: none
  }

  #one .sidebar {
    width: 192px
  }

  #one .main {
    padding: 17px
  }

  #one .login-art {
    padding: 35px
  }

  #one .login-right {
    padding: 35px
  }
}

@media(max-width:640px) {
  html, body, #one {
    height: 100dvh
  }

    #one .login-screen {
      display: block;
      overflow: auto;
      background: var(--paper)
    }

    #one .login-art {
      display: none
    }

    #one .login-right {
      min-height: 100%;
      padding: 36px 24px 24px
    }

      #one .login-right .secure-label {
        margin-bottom: 38px
      }

    #one .topbar {
      height: 56px;
      min-height: 56px;
      padding: 0 12px
    }

      #one .topbar .org, #one .topbar .signout {
        display: none
      }

      #one .topbar .header-actions {
        gap: 7px
      }

      #one .topbar .brand {
        font-size: 18px
      }

    #one .app-selection {
      display: block;
      padding: 15px 13px 85px
    }

    #one .catalog-side {
      display: none
    }

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

    #one .filter-grid {
      grid-template-columns: repeat(2,minmax(0,1fr))
    }

    #one .filter:first-child {
      grid-column: span 2
    }

    #one .app-banner {
      padding: 18px;
      margin: 11px 0 16px
    }

      #one .app-banner h1 {
        font-size: 20px
      }

    #one .banner-stat {
      display: none
    }

    #one .sidebar, #one .rail {
      display: none
    }

    #one .main {
      padding: 16px 13px 85px
    }

    #one .kpis {
      grid-template-columns: repeat(2,minmax(0,1fr))
    }

    #one .dash-grid {
      grid-template-columns: 1fr
    }

    #one .mobile-bottom {
      display: flex
    }

    #one .mobile-drawer {
      width: min(340px,88%)
    }

    #one .drawer-footer button {
      color: #234889;
      background: #eaf1ff
    }
}

@media(max-width:380px) {
  #one .app-selection {
    padding: 10px 10px 85px
  }

  #one .app-card {
    padding: 10px
  }
}

@media(max-height:580px) and (min-width:641px) {
  #one .login-art {
    min-height: 560px
  }

  #one .login-title {
    margin: 28px 0 10px
  }

  #one .login-illustration {
    margin-top: 20px
  }

  #one .login-right {
    min-height: 560px
  }
}
/* Force the application frame to span the real browser width (rather than shrink-to-fit). */
#one .stage {
  width: 100%;
  margin: 0
}
/* Accessibility fixes: retain visible navigation contrast in the dark theme. */
#one.dark .mobile-bottom {
  background: #20314d;
  border-top: 1px solid #4b6590
}

  #one.dark .mobile-bottom button {
    color: #e0e9ff
  }

    #one.dark .mobile-bottom button.active {
      color: #9dbfff
    }

#one.dark .rail-popover {
  background: #1b2940
}

  #one.dark .rail-popover button {
    color: #f2f6ff
  }

    #one.dark .rail-popover button:hover {
      background: #324b78
    }

#one.dark .drawer-footer button {
  color: #e6f0ff;
  background: #324b78;
  border-color: #5375aa
}

#one.dark .mobile-drawer {
  background: #1b293e
}

  #one.dark .mobile-drawer .drawer-app {
    color: #f5f7ff
  }

  #one.dark .mobile-drawer .drawer-head button {
    background: #2c4262;
    color: #fff;
    border-color: #4b668c
  }

/* Unified prototype library and embedded canonical modules */
#one .module-library {
  margin-top: 14px;
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px
}

#one .module-library-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px
}

  #one .module-library-head h2 {
    font-size: 15px;
    margin: 3px 0 0
  }

#one .module-library a, #one .module-toolbar a, #one .module-cards a {
  color: #2457bd;
  font-size: 11px;
  font-weight: 750;
  text-decoration: none
}

  #one .module-library a:hover, #one .module-toolbar a:hover, #one .module-cards a:hover {
    text-decoration: underline
  }

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

  #one .module-cards article {
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg)
  }

    #one .module-cards article > span {
      color: var(--muted);
      font-size: 9px;
      font-weight: 850;
      letter-spacing: .55px;
      text-transform: uppercase
    }

  #one .module-cards h3 {
    font-size: 13px;
    margin: 7px 0 5px
  }

  #one .module-cards p {
    min-height: 48px;
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.55
  }

  #one .module-cards article > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px
  }

#one .module-main {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  background: var(--bg)
}

#one .module-toolbar {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  background: var(--paper);
  border-bottom: 1px solid var(--line)
}

  #one .module-toolbar strong {
    display: block;
    font-size: 14px;
    margin-top: 2px
  }

#one .module-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px
}

#one .module-frame {
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1;
  border: 0;
  background: #fff
}

#one.dark .module-cards article {
  background: #172438
}

#one.dark .module-library a, #one.dark .module-toolbar a, #one.dark .module-cards a {
  color: #acc6ff
}

@media(max-width:1050px) {
  #one .module-cards {
    grid-template-columns: repeat(2,minmax(0,1fr))
  }
}

@media(max-width:640px) {
  #one .module-library-head, #one .module-toolbar {
    align-items: flex-start;
    flex-direction: column
  }

  #one .module-cards {
    grid-template-columns: 1fr
  }

    #one .module-cards p {
      min-height: 0
    }

  #one .module-toolbar-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap
  }

  #one .module-main {
    padding-bottom: 61px
  }
}

/* Blazor port additions (eFacto Console). Replaced by ef- components later. */
#one a.menu-item, #one a.hub-option, #one .quick-grid a {
  text-decoration: none;
  display: flex
}

#one .quick-grid a {
  background: var(--tint);
  color: #223e70;
  border: 1px solid #d9e5fd;
  border-radius: 8px;
  padding: 10px;
  font-size: 11px;
  font-weight: 700
}

#one.dark .quick-grid a {
  background: #293e60;
  color: #f3f6ff;
  border-color: #445d89
}

#one a.rail-button {
  text-decoration: none
}

#one .screen-id {
  margin-left: auto;
  font-size: 9px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: .3px
}

#one .menu-item.active .screen-id {
  color: inherit
}

#one .blazor-error {
  display: none
}

#one .mobile-bottom a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #385171;
  font-size: 10px;
  font-weight: 800;
  min-width: 55px;
  height: 55px;
  text-decoration: none
}

  #one .mobile-bottom a.active {
    color: #2455c5
  }

  #one .mobile-bottom a svg {
    height: 20px;
    width: 20px
  }

#one .drawer-footer a {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--tint);
  font-weight: 750;
  color: #183f8d;
  text-align: left;
  padding: 11px;
  text-decoration: none;
  display: flex;
  gap: 6px;
  align-items: center
}

#one.dark .mobile-bottom a {
  color: #e0e9ff
}

#one.dark .drawer-footer a {
  color: #e6f0ff;
  background: #324b78;
  border-color: #5375aa
}

#blazor-error-ui {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 10px 16px;
  background: #fff4d6;
  color: #5c3b00;
  box-shadow: 0 -1px 4px #0002;
  font-size: 12px
}

  #blazor-error-ui .reload {
    margin-left: 8px
  }

  #blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 12px;
    top: 8px
  }

/* Slim scrollbars for the area rail (dark) and the area menu (light). */
#one .rail-items, #one .sidebar-scroll {
  scrollbar-gutter: auto
}

  #one .rail-items::-webkit-scrollbar, #one .sidebar-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px
  }

  #one .rail-items::-webkit-scrollbar-track, #one .sidebar-scroll::-webkit-scrollbar-track {
    background: transparent
  }

  #one .rail-items::-webkit-scrollbar-button, #one .sidebar-scroll::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0
  }

  #one .rail-items::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.22);
    border-radius: 6px
  }

    #one .rail-items::-webkit-scrollbar-thumb:hover {
      background: rgba(255,255,255,.42)
    }

  #one .sidebar-scroll::-webkit-scrollbar-thumb {
    background: #c5d0e3;
    border-radius: 6px
  }

    #one .sidebar-scroll::-webkit-scrollbar-thumb:hover {
      background: #9fb1cf
    }

@supports not selector(::-webkit-scrollbar) {
  #one .rail-items {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.3) transparent
  }

  #one .sidebar-scroll {
    scrollbar-width: thin;
    scrollbar-color: #c5d0e3 transparent
  }
}

/* Blazor's <FocusOnNavigate> focuses the page heading (tabindex=-1) for screen readers.
   It is not interactive, so hide the focus ring on it. Real controls keep their rings. */
#one h1[tabindex="-1"]:focus, #one h1[tabindex="-1"]:focus-visible {
  outline: none
}

/* Area menu (sidebar): open on wide screens, closed on tablets (<= 1024px); the rail's menu button overrides both. */
#one .sidebar {
  transition: width .18s ease
}

  #one .sidebar.sidebar--closed {
    width: 0;
    border-right: 0;
    overflow: hidden;
    visibility: hidden
  }

@media(min-width:641px) and (max-width:1024px) {
  #one .sidebar:not(.sidebar--open) {
    width: 0;
    border-right: 0;
    overflow: hidden;
    visibility: hidden
  }
}

#one .rail-letter--apps {
  background: #3f63ad
}

#one .rail-letter svg {
  width: 17px;
  height: 17px
}

#one .rail-top button:hover {
  background: #ffffff1d
}

/* The rail's menu-button row and the area menu heading share one height, so their bottom lines meet. */
#one {
  --shell-head-h: 72px
}

  #one .rail-top {
    height: var(--shell-head-h);
    min-height: var(--shell-head-h);
    box-sizing: border-box
  }

  #one .sidebar-head {
    height: var(--shell-head-h);
    min-height: var(--shell-head-h);
    box-sizing: border-box;
    padding: 0 17px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0
  }

  #one .main-class {
    min-width: 0;
    flex: 1;
    padding: 23px;
    overflow: hidden;      /* parent clips; child scrolls */
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* ── EfStfList: direct-child EfCard fills remaining height ─────────── */
  /* Use > so only the EfStfList card is targeted, NOT dashboard nested cards */
  #one .main-class > .ef-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  #one .main-class > .ef-card > .ef-card__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;          /* flush — filterbar/pagination add their own padding */
    overflow: hidden;
  }

  /* ── EfStfList table ───────────────────────────────────────── */
  #one .stf-tablewrap {
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow: auto;
  }

  /* filter bar and pagination — scoped inside the direct-child card only */
  #one .main-class > .ef-card > .ef-card__body > .ef-filterbar {
    flex-shrink: 0;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
  }

  #one .main-class > .ef-card > .ef-card__body > .ef-pagination {
    flex-shrink: 0;
    padding: 10px 14px;
    border-top: 1px solid var(--line);
  }


  #one .stf-tablewrap table {
    width: 100%;
    border-collapse: collapse;
  }

  #one .stf-tablewrap th,
  #one .stf-tablewrap td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    vertical-align: middle;
  }

  #one .stf-tablewrap thead th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    color: var(--muted);
    text-transform: uppercase;
    background: var(--bg);
    border-bottom: 2px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 1;
  }

  #one .stf-tablewrap tbody tr:last-child td {
    border-bottom: none;
  }

  #one .stf-tablewrap tbody tr:hover td {
    background: var(--tint);
  }

  #one .stf-end {
    text-align: right;
    white-space: nowrap;
    width: 1%;
  }

  #one .stf-action-th {
    text-align: right;
    width: 1%;
    white-space: nowrap;
  }