:root {
  --bg-main: #0b1117;
  --bg-sidebar: #101821;
  --card: #141d26;
  --text-strong: #edf4fb;
  --text-soft: #8ea1b2;
  --line: #253342;
  --accent: #2f6dff;
  --accent-light: #18283a;
  --warn: #d8a044;
  --danger: #d35d75;
  --radius-xl: 22px;
  --radius-md: 14px;
}

* {
  box-sizing: border-box;
  font-family: "Manrope", sans-serif;
}

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, #0b1117 0%, #0d141b 100%);
  color: var(--text-strong);
}

body.mobile-nav-open {
  overflow: hidden;
}

body.theme-switching,
body.theme-switching .sidebar,
body.theme-switching .content,
body.theme-switching .logo,
body.theme-switching .menu button,
body.theme-switching .menu-icon,
body.theme-switching .ghost-btn,
body.theme-switching .account-card,
body.theme-switching .account-avatar,
body.theme-switching .account-popover,
body.theme-switching .account-popover-media,
body.theme-switching .account-popover-mini,
body.theme-switching .card,
body.theme-switching .kpi-card,
body.theme-switching .analytics-card,
body.theme-switching .insight-card,
body.theme-switching .workflow-panel,
body.theme-switching .workflow-alerts,
body.theme-switching .workflow-kpi-card,
body.theme-switching .stage-summary-card,
body.theme-switching .insight-panel,
body.theme-switching .screen-panel,
body.theme-switching .workflow-column,
body.theme-switching .workflow-card,
body.theme-switching .detail-panel,
body.theme-switching .empty-state-panel,
body.theme-switching .notifications-panel,
body.theme-switching input,
body.theme-switching select,
body.theme-switching textarea {
  transition:
    background 0.28s ease,
    background-color 0.28s ease,
    color 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease;
}

.hidden {
  display: none !important;
}

.mobile-only {
  display: none;
}

.login-container {
  position: absolute;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #ffffff;
}

.login-container,
.login-container input,
.login-container button {
  font-family: "Raleway", sans-serif;
}

.top,
.bottom {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.top::before,
.top::after,
.bottom::before,
.bottom::after {
  content: "";
  display: block;
  position: absolute;
  width: 200vmax;
  height: 200vmax;
  top: 50%;
  left: 50%;
  margin-top: -100vmax;
  margin-left: 0;
  transform-origin: 0 50%;
  transition: all 0.5s cubic-bezier(0.445, 0.05, 0, 1);
  transition-delay: 0.2s;
  z-index: 10;
  opacity: 0.65;
}

.top::before {
  transform: rotate(45deg);
  background: #edf5f0;
}

.top::after {
  transform: rotate(135deg);
  background: #c5cdc8;
}

.bottom::before {
  transform: rotate(-45deg);
  background: #dff3e8;
}

.bottom::after {
  transform: rotate(-135deg);
  background: #b6bdb8;
}

.login-center {
  position: absolute;
  width: 400px;
  height: 450px;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -225px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 18px 28px 22px;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.445, 0.05, 0, 1);
  transition-delay: 0s;
  color: #333333;
  z-index: 20;
}

.login-container:hover .top::before,
.login-container:hover .top::after,
.login-container:hover .bottom::before,
.login-container:hover .bottom::after,
.login-container:active .top::before,
.login-container:active .top::after,
.login-container:active .bottom::before,
.login-container:active .bottom::after {
  margin-left: 200px;
  transform-origin: -200px 50%;
}

.login-container:hover .login-center,
.login-container:active .login-center {
  opacity: 1;
  transition-delay: 0.2s;
}

.login-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.login-branding {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 10px;
  font-family: "Quicksand", sans-serif;
}

.login-brand-mark {
  width: 148px;
  height: 134px;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
  overflow: hidden;
}

.login-brand-mark svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.login-svg-logo {
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.03));
}

.login-rays-base {
  opacity: 0.92;
}

.login-rays-trace line {
  stroke-dasharray: 16 120;
  stroke-dashoffset: 120;
  opacity: 0;
  filter: drop-shadow(0 0 3px rgba(238, 247, 241, 0.75));
  animation: login-rays-flow 3.8s linear infinite;
}

.login-rays-trace line:nth-child(2) { animation-delay: 0.18s; }
.login-rays-trace line:nth-child(3) { animation-delay: 0.32s; }
.login-rays-trace line:nth-child(4) { animation-delay: 0.46s; }
.login-rays-trace line:nth-child(5) { animation-delay: 0.6s; }
.login-rays-trace line:nth-child(6) { animation-delay: 0.74s; }
.login-rays-trace line:nth-child(7) { animation-delay: 0.88s; }
.login-rays-trace line:nth-child(8) { animation-delay: 1.02s; }
.login-rays-trace line:nth-child(9) { animation-delay: 1.16s; }

.login-glow-green {
  filter: drop-shadow(0 0 6px rgba(105, 240, 174, 0.7));
}

.login-glow-gray {
  filter: drop-shadow(0 0 4px rgba(180, 185, 182, 0.6));
}

.login-trace-green path,
.login-trace-gray path {
  stroke-dasharray: 36 220;
  stroke-dashoffset: 240;
  opacity: 0;
}

.login-trace-green path {
  filter: drop-shadow(0 0 5px rgba(110, 240, 164, 0.85));
  animation: login-border-green 4.2s ease-in-out infinite;
}

.login-trace-gray path {
  filter: drop-shadow(0 0 4px rgba(201, 207, 202, 0.85));
  animation: login-border-gray 4.6s ease-in-out infinite;
}

.login-trace-green path:nth-child(2) { animation-delay: 0.35s; }
.login-trace-green path:nth-child(3) { animation-delay: 0.7s; }
.login-trace-gray path:nth-child(2) { animation-delay: 0.45s; }
.login-trace-gray path:nth-child(3) { animation-delay: 0.9s; }

@keyframes login-rays-flow {
  0% {
    stroke-dashoffset: 120;
    opacity: 0;
  }
  18% {
    opacity: 0.95;
  }
  58% {
    stroke-dashoffset: 0;
    opacity: 0.65;
  }
  100% {
    stroke-dashoffset: -80;
    opacity: 0;
  }
}

@keyframes login-border-green {
  0% {
    stroke-dashoffset: 240;
    opacity: 0;
  }
  16% {
    opacity: 1;
  }
  56% {
    stroke-dashoffset: 60;
    opacity: 0.72;
  }
  100% {
    stroke-dashoffset: -200;
    opacity: 0;
  }
}

@keyframes login-border-gray {
  0% {
    stroke-dashoffset: 240;
    opacity: 0;
  }
  18% {
    opacity: 0.95;
  }
  60% {
    stroke-dashoffset: 40;
    opacity: 0.68;
  }
  100% {
    stroke-dashoffset: -220;
    opacity: 0;
  }
}

.login-kicker {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(103, 116, 108, 0.86);
}

.login-brand {
  margin: 0;
  font-size: 56px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
  text-rendering: geometricPrecision;
  font-family: "Quicksand", sans-serif;
}

.login-brand-ori {
  color: #aeb5b1;
  font-weight: 300;
}

.login-brand-s {
  color: #61f2a3;
  font-weight: 400;
  text-shadow: 0 0 10px rgba(97, 242, 163, 0.4);
  margin-left: 2px;
}

.login-card h2 {
  margin: 0 0 18px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #333333;
  text-align: center;
}

.login-card input {
  width: min(320px, 100%);
  padding: 15px;
  margin: 5px auto;
  border-radius: 1px;
  border: 1px solid #cccccc;
  background: #ffffff;
  color: #333333;
  font-size: 14px;
  font-family: inherit;
}

.login-card input::placeholder {
  color: #8a8a8a;
}

.login-card input:focus {
  outline: none;
  border-color: #999999;
}

.login-button {
  width: min(320px, 100%);
  margin-top: 10px;
  padding: 15px;
  border: 1px solid #cccccc;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.96);
  color: #ffffff;
  color: #333333;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.login-button:hover {
  background: #f6f6f6;
  border-color: #bdbdbd;
}

.login-button:active {
  background: #eeeeee;
}

.login-message {
  display: block;
  min-height: 18px;
  margin-top: 10px;
  width: min(320px, 100%);
  font-size: 13px;
  color: #a84654;
  text-align: center;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

@media (max-width: 820px) {
  .login-container {
    padding: 18px;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    isolation: isolate;
  }

  .top::before,
  .top::after,
  .bottom::before,
  .bottom::after {
    width: 180vmax;
    height: 180vmax;
    margin-top: -90vmax;
    opacity: 0.52;
  }

  .login-center {
    position: relative;
    top: auto;
    left: auto;
    margin-left: 0;
    margin-top: 0;
    width: min(100%, 430px);
    min-height: auto;
    height: auto;
    padding: 24px 24px 22px;
    border-radius: 28px;
    border: 1px solid rgba(185, 202, 191, 0.75);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.93), rgba(249, 252, 250, 0.84)),
      radial-gradient(circle at top, rgba(112, 244, 168, 0.08), transparent 58%);
    box-shadow:
      0 24px 60px rgba(124, 151, 132, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.76);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 1;
  }

  .top::before,
  .bottom::before {
    animation: login-mobile-rotate-a 15s linear infinite;
  }

  .top::after,
  .bottom::after {
    animation: login-mobile-rotate-b 18s linear infinite;
  }
}

@media (max-width: 640px) {
  .login-container {
    padding:
      max(12px, env(safe-area-inset-top))
      14px
      max(14px, env(safe-area-inset-bottom));
    overflow: auto;
  }

  .top::before,
  .top::after,
  .bottom::before,
  .bottom::after {
    width: 165vmax;
    height: 165vmax;
    margin-top: -82.5vmax;
    opacity: 0.42;
  }

  .login-center {
    width: 100%;
    padding: 24px 18px 20px;
    border-radius: 24px;
  }

  .login-branding {
    margin-bottom: 12px;
  }

  .login-brand-mark {
    width: 104px;
  }

  .login-kicker {
    margin-bottom: 6px;
    letter-spacing: 0.2em;
  }

  .login-card h2 {
    margin-bottom: 14px;
  }

  .login-card input,
  .login-button,
  .login-message {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 420px) {
  .login-container {
    padding:
      max(10px, env(safe-area-inset-top))
      10px
      max(12px, env(safe-area-inset-bottom));
  }

  .login-center {
    padding: 22px 14px 18px;
    border-radius: 22px;
  }

  .login-brand-mark {
    width: 92px;
  }

  .login-brand {
    letter-spacing: 0.02em;
  }

  .login-kicker {
    font-size: 10px;
    letter-spacing: 0.16em;
  }
}

@media (max-width: 820px) and (max-height: 760px) {
  .login-container {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .login-center {
    height: auto;
    min-height: auto;
  }

  .login-brand-mark {
    width: 98px;
  }

  .login-branding {
    margin-bottom: 8px;
  }

  .login-card h2 {
    margin-bottom: 12px;
  }
}

@media (hover: none) {
  .login-container:hover .top::before,
  .login-container:hover .top::after,
  .login-container:hover .bottom::before,
  .login-container:hover .bottom::after,
  .login-container:active .top::before,
  .login-container:active .top::after,
  .login-container:active .bottom::before,
  .login-container:active .bottom::after {
    margin-left: 0;
    transform-origin: 0 50%;
  }

  .login-center {
    opacity: 1;
    transition-delay: 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top::before,
  .top::after,
  .bottom::before,
  .bottom::after,
  .login-center {
    transition: none;
  }

  .top::before,
  .top::after,
  .bottom::before,
  .bottom::after {
    animation: none;
  }
}

@keyframes login-mobile-rotate-a {
  0% {
    transform: rotate(45deg) scale(1);
  }
  50% {
    transform: rotate(53deg) scale(1.04);
  }
  100% {
    transform: rotate(45deg) scale(1);
  }
}

@keyframes login-mobile-rotate-b {
  0% {
    transform: rotate(135deg) scale(1);
  }
  50% {
    transform: rotate(127deg) scale(1.05);
  }
  100% {
    transform: rotate(135deg) scale(1);
  }
}

.app-shell {
  --sidebar-open-width: 250px;
  --sidebar-closed-width: 92px;
  position: relative;
  height: 100vh;
  padding: 14px;
  display: grid;
  grid-template-columns: var(--sidebar-open-width) 1fr;
  gap: 14px;
  transition: grid-template-columns 0.3s cubic-bezier(0.24, 0.9, 0.34, 1);
  overflow: hidden;
}

.app-shell.sidebar-collapsed {
  grid-template-columns: var(--sidebar-closed-width) 1fr;
}

.sidebar {
  position: relative;
  overflow: visible;
  background:
    linear-gradient(180deg, #101821 0%, #111a24 100%);
  border-radius: var(--radius-xl);
  padding: 18px 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(117, 154, 233, 0.24);
  box-shadow: 0 18px 40px rgba(9, 17, 19, 0.32);
  height: 100%;
  min-height: 0;
  transition:
    padding 0.28s cubic-bezier(0.24, 0.9, 0.34, 1),
    border-color 0.24s ease,
    box-shadow 0.24s ease,
    border-radius 0.28s cubic-bezier(0.24, 0.9, 0.34, 1);
  will-change: padding;
}

.sidebar-resizer {
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: calc(var(--sidebar-open-width) + 8px);
  width: 12px;
  border-radius: 999px;
  cursor: col-resize;
  z-index: 35;
  transition: left 0.3s cubic-bezier(0.24, 0.9, 0.34, 1), background 0.2s ease, opacity 0.2s ease;
}

.sidebar-resizer::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 82px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, rgba(113, 240, 178, 0.1), rgba(126, 171, 255, 0.28), rgba(113, 240, 178, 0.1));
  box-shadow: 0 0 0 1px rgba(112, 145, 210, 0.08);
  opacity: 0.65;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.sidebar-resizer:hover::before {
  opacity: 1;
  transform: translate(-50%, -50%) scaleX(1.2);
  background: linear-gradient(180deg, rgba(113, 240, 178, 0.16), rgba(126, 171, 255, 0.46), rgba(113, 240, 178, 0.16));
}

body.sidebar-resizing .sidebar-resizer::before {
  opacity: 1;
  transform: translate(-50%, -50%) scaleX(1.35);
}

.sidebar > div:first-child {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 18%, transparent 84%, rgba(255, 255, 255, 0.02)),
    radial-gradient(circle at top, rgba(88, 137, 255, 0.08), transparent 38%);
  pointer-events: none;
}

.logo {
  width: 100%;
  min-height: 60px;
  padding: 0 15px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 18% 50%, rgba(113, 240, 178, 0.12), transparent 22%),
    linear-gradient(135deg, rgba(30, 52, 78, 0.98) 0%, rgba(36, 76, 122, 0.98) 100%);
  color: #f2f7ff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 24px rgba(21, 74, 127, 0.22);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 18px;
  border: 1px solid rgba(118, 165, 242, 0.16);
  cursor: pointer;
  transition:
    background 0.24s ease,
    box-shadow 0.24s ease,
    border-color 0.24s ease,
    padding 0.26s cubic-bezier(0.24, 0.9, 0.34, 1),
    gap 0.24s cubic-bezier(0.24, 0.9, 0.34, 1),
    border-radius 0.26s cubic-bezier(0.24, 0.9, 0.34, 1);
}

.logo:hover {
  background: linear-gradient(135deg, rgba(37, 64, 97, 0.98) 0%, rgba(42, 89, 143, 0.98) 100%);
  border-color: rgba(128, 176, 255, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 16px 26px rgba(21, 74, 127, 0.28);
}

.logo-mark {
  position: relative;
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 42px;
  border-radius: 15px;
  isolation: isolate;
  overflow: visible;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.22), transparent 46%),
    linear-gradient(135deg, rgba(13, 25, 37, 0.94) 0%, rgba(24, 45, 67, 0.96) 100%);
  border: 1px solid rgba(166, 200, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 20px rgba(6, 18, 31, 0.24);
  transition:
    width 0.26s cubic-bezier(0.24, 0.9, 0.34, 1),
    height 0.26s cubic-bezier(0.24, 0.9, 0.34, 1),
    flex-basis 0.26s cubic-bezier(0.24, 0.9, 0.34, 1),
    border-radius 0.26s cubic-bezier(0.24, 0.9, 0.34, 1),
    transform 0.26s cubic-bezier(0.24, 0.9, 0.34, 1);
}

.logo-mark::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 18px;
  padding: 1.5px;
  background:
    linear-gradient(
      115deg,
      transparent 32%,
      rgba(111, 240, 164, 0.04) 42%,
      rgba(111, 240, 164, 0.92) 49%,
      rgba(153, 212, 255, 0.8) 52%,
      rgba(190, 198, 206, 0.14) 56%,
      transparent 66%
    ) 140% 0 / 220% 100% no-repeat,
    linear-gradient(135deg, rgba(121, 194, 255, 0.18), rgba(111, 240, 164, 0.22), rgba(190, 198, 206, 0.14)) 0 0 / 100% 100% no-repeat;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.92;
  z-index: 0;
  animation: logo-border-sweep 2.9s linear infinite;
  will-change: background-position, opacity;
}

.logo-mark::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 11px;
  background: radial-gradient(circle at 35% 35%, rgba(111, 240, 164, 0.16), transparent 62%);
  z-index: 0;
}

.logo-mark svg {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  overflow: visible;
  filter:
    brightness(1.08)
    saturate(1.08)
    contrast(1.06)
    drop-shadow(0 0 8px rgba(97, 242, 163, 0.18))
    drop-shadow(0 0 6px rgba(176, 184, 179, 0.14));
  transition:
    width 0.24s cubic-bezier(0.24, 0.9, 0.34, 1),
    height 0.24s cubic-bezier(0.24, 0.9, 0.34, 1),
    transform 0.24s cubic-bezier(0.24, 0.9, 0.34, 1);
}

.logo:hover .logo-mark::before {
  animation-duration: 2.2s;
  opacity: 1;
}

.logo-text {
  display: block;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  max-width: 140px;
  letter-spacing: -0.02em;
  font-size: 15px;
  font-weight: 800;
  text-shadow: 0 1px 0 rgba(10, 17, 25, 0.24);
  transition:
    max-width 0.26s cubic-bezier(0.24, 0.9, 0.34, 1),
    opacity 0.18s ease,
    transform 0.24s cubic-bezier(0.24, 0.9, 0.34, 1);
}

.menu-label {
  color: rgba(204, 222, 255, 0.7);
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.03em;
}

.menu {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.menu button {
  position: relative;
  border: 1px solid transparent;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.015));
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 14px;
  color: #d9e5ff;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease,
    padding 0.24s cubic-bezier(0.24, 0.9, 0.34, 1),
    gap 0.22s cubic-bezier(0.24, 0.9, 0.34, 1),
    border-radius 0.24s cubic-bezier(0.24, 0.9, 0.34, 1);
}

.menu button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(97, 138, 255, 0.12), transparent 45%);
  opacity: 0;
  transition: opacity 0.24s ease;
  pointer-events: none;
}

.menu button:hover {
  background: linear-gradient(180deg, rgba(38, 57, 84, 0.72), rgba(28, 41, 58, 0.72));
  border-color: rgba(101, 141, 228, 0.2);
  color: #eef4ff;
  box-shadow: 0 10px 22px rgba(4, 13, 22, 0.18);
}

.menu button:hover::before {
  opacity: 1;
}

.menu-icon {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  border: 1px solid rgba(140, 170, 238, 0.24);
  background: linear-gradient(180deg, rgba(240, 255, 252, 0.1), rgba(240, 255, 252, 0.04));
  display: inline-grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  flex: 0 0 28px;
  color: #b6ceff;
  box-shadow: inset 0 0 0 1px rgba(84, 129, 144, 0.08);
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease,
    width 0.24s cubic-bezier(0.24, 0.9, 0.34, 1),
    height 0.24s cubic-bezier(0.24, 0.9, 0.34, 1),
    flex-basis 0.24s cubic-bezier(0.24, 0.9, 0.34, 1),
    border-radius 0.24s cubic-bezier(0.24, 0.9, 0.34, 1),
    transform 0.24s cubic-bezier(0.24, 0.9, 0.34, 1);
}

.menu-icon svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.menu-text {
  display: block;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  max-width: 140px;
  transition:
    max-width 0.26s cubic-bezier(0.24, 0.9, 0.34, 1),
    opacity 0.18s ease,
    transform 0.24s cubic-bezier(0.24, 0.9, 0.34, 1);
}

.menu button.active {
  background: linear-gradient(180deg, rgba(32, 58, 108, 0.92), rgba(28, 49, 88, 0.92));
  color: #f3f7ff;
  border-color: rgba(97, 138, 255, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 24px rgba(25, 49, 102, 0.24);
}

.menu button.active::before {
  opacity: 1;
}

.menu button.active .menu-icon {
  border-color: rgba(145, 176, 255, 0.85);
  color: #f4f8ff;
  background: linear-gradient(135deg, #487fff, #365ecc);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 18px rgba(109, 150, 255, 0.35);
}

.app-shell.sidebar-collapsed .menu-label,
.app-shell.sidebar-collapsed .menu-text,
.app-shell.sidebar-collapsed .account-meta,
.app-shell.sidebar-collapsed .logo-text {
  opacity: 0;
  transform: translateX(-2px);
  pointer-events: none;
  max-width: 0;
}

.app-shell.sidebar-collapsed .menu button {
  justify-content: center;
  padding-left: 9px;
  padding-right: 9px;
  gap: 0;
}

.app-shell.sidebar-collapsed .sidebar {
  padding-left: 11px;
  padding-right: 11px;
}

.app-shell.sidebar-collapsed .sidebar-resizer {
  left: calc(var(--sidebar-closed-width) + 8px);
}

.app-shell.sidebar-collapsed .logo {
  padding-left: 9px;
  padding-right: 9px;
  justify-content: center;
  gap: 0;
}

.app-shell.sidebar-collapsed .logo-mark {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
}

.app-shell.sidebar-collapsed .logo-text,
.app-shell.sidebar-collapsed .menu-text {
  flex: 0 0 0;
}

.account-block {
  position: relative;
  overflow: visible;
  border-top: 1px solid rgba(144, 176, 242, 0.16);
  padding-top: 14px;
  color: #d7e4ff;
}

.rail-action-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.018));
  border: 1px solid rgba(128, 158, 217, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition:
    padding 0.26s cubic-bezier(0.24, 0.9, 0.34, 1),
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
}

.account-user {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
  flex: 1;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: gap 0.24s cubic-bezier(0.24, 0.9, 0.34, 1);
}

.account-user:focus-visible {
  outline: none;
}

.account-avatar {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #eff6ff;
  background: linear-gradient(135deg, #375ca9 0%, #223865 100%);
  border: 1px solid rgba(136, 174, 245, 0.22);
  box-shadow: 0 10px 20px rgba(22, 47, 92, 0.2);
  transition:
    width 0.24s cubic-bezier(0.24, 0.9, 0.34, 1),
    height 0.24s cubic-bezier(0.24, 0.9, 0.34, 1),
    flex-basis 0.24s cubic-bezier(0.24, 0.9, 0.34, 1),
    border-radius 0.24s cubic-bezier(0.24, 0.9, 0.34, 1),
    box-shadow 0.22s ease,
    transform 0.24s cubic-bezier(0.24, 0.9, 0.34, 1);
}

.account-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  max-width: 150px;
  transition:
    max-width 0.26s cubic-bezier(0.24, 0.9, 0.34, 1),
    opacity 0.18s ease,
    transform 0.24s cubic-bezier(0.24, 0.9, 0.34, 1);
}

.account-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(185, 201, 229, 0.6);
}

.account-meta strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  color: #edf5ff;
}

.account-popover {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  width: min(320px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  display: grid;
  gap: 0;
  padding: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(17, 27, 38, 0.99), rgba(11, 19, 28, 0.99));
  border: 1px solid rgba(86, 113, 144, 0.46);
  box-shadow:
    0 26px 44px rgba(4, 10, 16, 0.36),
    0 10px 22px rgba(4, 10, 16, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px) scale(0.98);
  transform-origin: left bottom;
  transition:
    opacity 0.18s ease,
    transform 0.24s ease;
  z-index: 120;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.account-popover[hidden] {
  display: none !important;
}

.account-popover::after {
  display: none;
}

.account-popover-media {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 18px 16px;
  background: linear-gradient(180deg, rgba(39, 57, 78, 0.98) 0%, rgba(29, 45, 63, 0.98) 100%);
  border-radius: 18px 18px 0 0;
}

.account-popover-photo {
  width: 78px;
  height: 78px;
  flex: 0 0 78px;
  border-radius: 999px;
  position: relative;
  background: linear-gradient(180deg, rgba(246, 249, 252, 0.98) 0%, rgba(225, 234, 244, 0.98) 100%);
  border: 1px solid rgba(122, 149, 181, 0.36);
  box-shadow: 0 12px 24px rgba(4, 10, 16, 0.18);
}

.account-popover-photo-ring {
  position: absolute;
  left: 50%;
  top: 14px;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  border-radius: 999px;
  border: 3px solid #9eb2c6;
}

.account-popover-photo-body {
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 38px;
  height: 22px;
  margin-left: -19px;
  border: 3px solid #9eb2c6;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
}

.account-popover-media-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.account-popover-media-copy strong {
  color: #edf5ff;
  font-size: 15px;
  font-weight: 800;
}

.account-popover-media-copy span {
  color: #9eb4c9;
  font-size: 12px;
  line-height: 1.45;
}

.account-popover-media-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.account-popover-mini {
  min-width: 0;
  flex: 1 1 104px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(109, 138, 171, 0.44);
  background: rgba(255, 255, 255, 0.08);
  color: #e1ecf7;
  font-size: 12px;
  font-weight: 700;
  cursor: not-allowed;
  opacity: 0.95;
}

.account-popover-mini.muted {
  color: #8da1b7;
  background: rgba(255, 255, 255, 0.04);
}

.account-popover-body {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.account-popover-identity {
  display: grid;
  gap: 8px;
}

.account-popover-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.account-popover-title-row strong {
  color: #f2f7ff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}

.account-popover-edit {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(93, 124, 160, 0.42);
  background: rgba(255, 255, 255, 0.04);
  color: #c79f47;
  display: grid;
  place-items: center;
  cursor: not-allowed;
}

.account-popover-edit svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account-popover-identity span {
  color: #8da4bb;
  font-size: 13px;
  text-align: center;
  line-height: 1.4;
  word-break: break-word;
}

.account-popover-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.account-popover-meta-grid article {
  display: grid;
  gap: 6px;
}

.account-popover-meta-grid small {
  color: #87a7c8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.account-popover-meta-grid strong {
  color: #d8e7f5;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

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

@media (max-width: 1320px) {
  .account-popover-media {
    gap: 12px;
    padding: 16px 16px 14px;
  }

  .account-popover-photo {
    width: 70px;
    height: 70px;
    flex-basis: 70px;
  }

  .account-popover-body {
    padding: 16px;
    gap: 14px;
  }

  .account-popover-actions {
    grid-template-columns: 1fr;
  }
}

.account-popover .sidebar-btn {
  width: 100%;
  justify-content: center;
}

.account-popover[data-side="left"] {
  transform-origin: right bottom;
}

.account-popover.is-open {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px) scale(0.98);
}

.account-popover.is-open[data-positioned="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.account-card.is-open {
  border-color: rgba(146, 178, 240, 0.22);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.022));
}

.app-shell.sidebar-collapsed .account-card {
  justify-content: center;
  padding: 8px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.app-shell.sidebar-collapsed .account-popover {
  width: min(320px, calc(100vw - 32px));
}

.app-shell.sidebar-collapsed .account-popover::after {
  display: none;
}

body[data-theme="light"] .app-shell.sidebar-collapsed .account-popover::after {
  display: none;
}

.app-shell.sidebar-collapsed .account-user {
  flex: 0 0 auto;
  justify-content: center;
  width: 100%;
  gap: 0;
}

.app-shell.sidebar-collapsed .account-avatar {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  transform: translateX(0);
}

.content {
  position: relative;
  background:
    linear-gradient(180deg, rgba(18, 24, 31, 0.98) 0%, rgba(15, 21, 28, 0.98) 100%);
  border-radius: var(--radius-xl);
  padding: 24px;
  border: 1px solid rgba(148, 208, 235, 0.2);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px rgba(2, 10, 14, 0.28);
}

.content::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.02));
  pointer-events: none;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex: 0 0 auto;
  min-width: 0;
}

.topbar > div:first-child,
.workflow-panel-head > div,
.detail-head > div,
.workflow-column-head > div {
  min-width: 0;
}

.screen {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.screen::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.breadcrumb {
  color: #8ea2b0;
  margin: 0;
  font-size: 13px;
}

.topbar h2 {
  margin: 4px 0 0;
  font-size: 36px;
  letter-spacing: -0.03em;
  color: #ecf7ff;
}

.ghost-btn {
  background: rgba(14, 26, 34, 0.9);
  border: 1px solid #2f4b5d;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
  color: #d4e8f6;
  cursor: pointer;
  transition: all 0.18s ease;
}

.ghost-btn:hover {
  border-color: #4f7ea0;
  color: #eff8ff;
  background: rgba(20, 36, 46, 0.96);
}

.sidebar-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.03));
  border-color: rgba(140, 171, 236, 0.18);
  color: #d9e6ff;
  min-width: 88px;
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 13px;
  letter-spacing: -0.01em;
}

.sidebar-btn:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.04));
  border-color: rgba(152, 183, 255, 0.28);
}

.sidebar-btn.danger {
  background: linear-gradient(180deg, rgba(154, 64, 83, 0.18), rgba(113, 44, 60, 0.18));
  border-color: rgba(235, 128, 149, 0.2);
  color: #ffd9e1;
}

.sidebar-btn.danger:hover {
  background: linear-gradient(180deg, rgba(177, 72, 94, 0.24), rgba(128, 49, 67, 0.24));
  border-color: rgba(243, 147, 166, 0.32);
}

.top-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

.notifications-panel {
  margin-bottom: 12px;
}

.notification-list {
  display: grid;
  gap: 8px;
}

.notification-list p {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(121, 155, 199, 0.18);
  background:
    linear-gradient(180deg, rgba(26, 38, 52, 0.96), rgba(15, 23, 31, 0.9)),
    radial-gradient(circle at top right, rgba(74, 119, 255, 0.16), transparent 52%);
  color: rgba(233, 242, 252, 0.92);
  box-shadow: 0 18px 34px rgba(3, 8, 16, 0.18);
}

.toast-region {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 1200;
  width: min(380px, calc(100vw - 28px));
  display: grid;
  gap: 12px;
  pointer-events: none;
}

.toast-card {
  position: relative;
  display: grid;
  grid-template-columns: 5px minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(125, 157, 204, 0.2);
  background:
    linear-gradient(180deg, rgba(20, 29, 38, 0.98), rgba(11, 17, 23, 0.96)),
    radial-gradient(circle at top right, rgba(91, 126, 255, 0.18), transparent 48%);
  box-shadow: 0 22px 42px rgba(4, 9, 18, 0.28);
  backdrop-filter: blur(18px);
  pointer-events: auto;
  animation: toast-slide-in 0.28s ease;
}

.toast-accent {
  min-height: 100%;
  background: linear-gradient(180deg, #5a8dff, #7fb8ff);
}

.toast-body {
  padding: 15px 14px 14px 16px;
  display: grid;
  gap: 6px;
}

.toast-body strong {
  color: #f3f8fd;
  font-size: 0.96rem;
}

.toast-body p {
  margin: 0;
  color: rgba(233, 241, 250, 0.9);
  font-size: 0.92rem;
  line-height: 1.45;
}

.toast-body small {
  color: rgba(163, 182, 203, 0.88);
  font-size: 0.78rem;
  line-height: 1.4;
}

.toast-close {
  margin: 12px 12px 0 0;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(240, 246, 252, 0.86);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.toast-close:hover {
  background: rgba(255, 255, 255, 0.14);
}

.toast-success .toast-accent {
  background: linear-gradient(180deg, #54d39d, #95f2b8);
}

.toast-error .toast-accent {
  background: linear-gradient(180deg, #e06d8d, #ffb0b0);
}

.toast-info .toast-accent {
  background: linear-gradient(180deg, #5a8dff, #7fb8ff);
}

@keyframes toast-slide-in {
  from {
    opacity: 0;
    transform: translate3d(0, -10px, 0) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.refresh-icon-btn {
  min-height: 44px;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(79, 126, 160, 0.12);
}

.top-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
}

.top-action-icon {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
}

.top-action-label {
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.mobile-menu-btn,
.sidebar-overlay {
  display: none;
}

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

.card {
  background: linear-gradient(160deg, rgba(18, 31, 40, 0.96), rgba(14, 24, 33, 0.94));
  border-radius: var(--radius-md);
  padding: 16px;
  border: 1px solid #234053;
  box-shadow: 0 10px 30px rgba(5, 13, 17, 0.34);
}

.card strong {
  display: block;
  font-size: 30px;
}

.card p {
  color: var(--text-soft);
  margin: 6px 0 0;
}

.kpi-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  margin-bottom: 14px;
}

.overview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.overview-meta small {
  color: #8ca7b8;
  font-weight: 600;
}

.overview-date-filter {
  display: flex;
  align-items: center;
  gap: 8px;
}

.overview-date-filter label {
  font-size: 12px;
  color: #84a1b2;
  font-weight: 700;
}

.overview-error {
  color: #ff8e98;
  font-weight: 700;
  margin: 0 0 10px;
}

.kpi-card {
  background: linear-gradient(155deg, rgba(19, 34, 44, 0.94), rgba(13, 24, 33, 0.98));
  border: 1px solid #27465b;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 14px 32px rgba(3, 11, 16, 0.4);
}

.kpi-card small {
  color: #8ea8b7;
  font-weight: 700;
}

.kpi-card strong {
  display: block;
  margin-top: 8px;
  font-size: 30px;
  letter-spacing: -0.01em;
}

.kpi-card p {
  margin: 8px 0 0;
  color: #8da3b0;
}

.overview-analytics {
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.analytics-card,
.insight-card {
  background: linear-gradient(155deg, rgba(17, 31, 40, 0.98), rgba(10, 20, 28, 0.96));
  border: 1px solid #28465a;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 12px 30px rgba(4, 10, 14, 0.34);
}

.analytics-head h3,
.insight-card h3 {
  margin: 0;
}

.analytics-head p {
  margin: 4px 0 12px;
  color: #89a0ae;
}

.flow-bars {
  display: grid;
  grid-template-columns: repeat(7, minmax(56px, 1fr));
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
}

.flow-day {
  text-align: center;
}

.flow-track {
  height: 115px;
  border-radius: 12px;
  background: linear-gradient(180deg, #1d3341, #12232e);
  border: 1px solid #2a485a;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 8px;
}

.flow-bar {
  width: 24px;
  border-radius: 8px;
  display: block;
}

.bar-positive {
  background: linear-gradient(180deg, #5b86ff, #3156bf);
  box-shadow: 0 0 16px rgba(98, 136, 255, 0.35);
}

.bar-negative {
  background: linear-gradient(180deg, #ff9db4, #d24767);
  box-shadow: 0 0 14px rgba(251, 128, 156, 0.3);
}

.flow-day small {
  margin-top: 6px;
  display: block;
  color: #87a1b0;
}

.cumulative-wrap h4 {
  margin: 2px 0 8px;
  font-size: 14px;
}

.cumulative-svg {
  width: 100%;
  height: 170px;
  border-radius: 12px;
  border: 1px solid #2a4658;
  background: linear-gradient(180deg, #152834, #10202b);
}

.cum-line {
  fill: none;
  stroke: #5e86ff;
  stroke-width: 2.8;
}

.cum-area {
  fill: rgba(94, 134, 255, 0.18);
  stroke: none;
}

.cum-dot {
  fill: #6f95ff;
}

.cum-baseline {
  stroke: #35566a;
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

.dollar-forecast-line {
  fill: none;
  stroke: #f7b267;
  stroke-width: 2.4;
  stroke-dasharray: 6 4;
}

.dollar-dot-forecast {
  fill: #f7b267;
}

.dollar-label {
  fill: #8fa8b6;
  font-size: 10px;
  text-anchor: middle;
}

.insight-card p {
  margin: 10px 0;
  color: #a5bcc9;
}

.empty-analytics {
  color: #8ea3b0;
  margin: 8px 0;
}

.panel-grid {
  margin-top: 14px;
  display: grid;
  gap: 12px;
  grid-template-columns: 2fr 1fr;
}

.table-wrap,
.status-board {
  background: linear-gradient(160deg, rgba(17, 29, 38, 0.98), rgba(11, 21, 28, 0.96));
  border-radius: var(--radius-md);
  border: 1px solid #264154;
  padding: 14px;
  box-shadow: 0 12px 28px rgba(4, 12, 17, 0.36);
}

.table-wrap h3,
.status-board h3,
.screen h3 {
  margin: 0 0 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

.table-scroll {
  max-height: 52vh;
  overflow: auto;
  min-height: 0;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #152733;
}

.list-full-height {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.list-full-height .table-scroll {
  flex: 1;
  max-height: none;
}

th,
td {
  border-bottom: 1px solid #233a49;
  text-align: left;
  padding: 10px 6px;
  font-size: 14px;
}

th {
  color: #d3e8f4;
}

td {
  color: #afc3cf;
}

.th-sort {
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.th-sort.active {
  color: #89aaff;
}

.tag {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
}

.tag.ok {
  background: rgba(84, 122, 247, 0.24);
  color: #a7c1ff;
}

.tag.warn {
  background: rgba(235, 176, 72, 0.2);
  color: #f1c67a;
}

.tag.bad {
  background: rgba(245, 115, 145, 0.2);
  color: #ff9fba;
}

.toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.toolbar > *,
.workflow-toolbar > * {
  min-width: 0;
}

.table-pagination {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.upload-input {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  background: rgba(14, 25, 34, 0.95);
  color: #d8ebf6;
}

.primary-btn {
  border: 0;
  background: linear-gradient(135deg, #2751b3 0%, #203f87 100%);
  color: #f3f7ff;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
}

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

.conc-column {
  border: 1px solid #28465a;
  border-radius: 14px;
  padding: 12px;
  background: linear-gradient(160deg, rgba(18, 32, 42, 0.98), rgba(12, 21, 29, 0.96));
}

.conc-column h4 {
  margin: 0;
}

.conc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.conc-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.conc-select-all {
  font-size: 12px;
  color: #9eb6c4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.column-list {
  margin-top: 10px;
  max-height: 420px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tx {
  background: linear-gradient(160deg, rgba(22, 37, 48, 0.9), rgba(14, 25, 33, 0.92));
  border: 1px solid #2a4558;
  border-radius: 10px;
  padding: 10px;
}

.tx-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #99b1bf;
  margin-bottom: 6px;
}

.tx p {
  margin: 0;
  font-size: 13px;
  color: #8ea6b3;
}

.tx strong {
  display: block;
  margin-top: 4px;
}

.workflow-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 20px;
}

.screen-stack {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.screen-workspace {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.screen-workspace.two-columns,
.screen-workspace.queue-layout {
  grid-template-columns: 1.05fr 1.4fr;
}

.queue-main-stack {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.screen-workspace.execution-layout,
.screen-workspace.delivery-layout {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.95fr);
}

.workflow-panel {
  background:
    linear-gradient(180deg, rgba(19, 27, 35, 0.98), rgba(16, 23, 30, 0.98));
  border-radius: 18px;
  border: 1px solid rgba(55, 72, 86, 0.84);
  padding: 18px;
  box-shadow: none;
  min-width: 0;
}

.workflow-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 16px;
  min-width: 0;
}

.workflow-panel-head small,
.workflow-alerts p,
.stage-summary-card small,
.workflow-kpi-card small,
.workflow-column-head small,
.detail-head small,
.detail-meta-grid article small {
  color: #8ea6b3;
  font-weight: 700;
}

.workflow-panel-head h3,
.detail-head h3 {
  margin: 4px 0 0;
  font-size: 22px;
}

.workflow-panel-head p,
.workflow-column-head p,
.workflow-kpi-card p,
.detail-head p,
.detail-copy p,
.action-stack p,
.empty-copy,
.board-empty p,
.loading-copy {
  margin: 0;
  color: #97adba;
  line-height: 1.6;
  min-width: 0;
}

.workflow-alerts {
  display: grid;
  gap: 10px;
}

.workflow-alert-list {
  display: grid;
  gap: 10px;
}

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

.workflow-alert-summary article {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(80, 97, 111, 0.55);
  background: rgba(20, 29, 37, 0.82);
}

.workflow-alert-summary small {
  color: #92a8b4;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.workflow-alert-summary strong {
  color: #edf6fe;
  font-size: 24px;
  letter-spacing: -0.04em;
}

.workflow-alert-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(80, 97, 111, 0.55);
  background: rgba(20, 29, 37, 0.82);
}

.workflow-alert-item p {
  margin: 0;
}

.workflow-alert-copy {
  display: grid;
  gap: 4px;
}

.workflow-alert-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.workflow-alert-copy strong {
  color: #eaf3fb;
  font-size: 13px;
}

.workflow-alert-copy small {
  color: #9db2bf;
  font-size: 12px;
}

.workflow-alert-dot {
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 999px;
  background: #78e4ac;
  box-shadow: 0 0 0 6px rgba(120, 228, 172, 0.12);
  flex: 0 0 auto;
}

.workflow-alert-dot.tone-error {
  background: #ef7b92;
  box-shadow: 0 0 0 6px rgba(239, 123, 146, 0.14);
}

.workflow-alert-dot.tone-warn {
  background: #f0bf67;
  box-shadow: 0 0 0 6px rgba(240, 191, 103, 0.14);
}

.workflow-alerts.is-empty .workflow-alert-dot {
  background: #9cb0a5;
  box-shadow: 0 0 0 6px rgba(156, 176, 165, 0.1);
}

.workflow-alert-item.tone-error {
  border-color: rgba(240, 123, 146, 0.26);
  background: linear-gradient(180deg, rgba(255, 193, 206, 0.96), rgba(244, 162, 181, 0.94));
}

.workflow-alert-item.tone-error .workflow-alert-copy strong,
.workflow-alert-item.tone-error .workflow-alert-copy p,
.workflow-alert-item.tone-error .workflow-alert-copy small {
  color: #24181b;
}

.workflow-alert-item.tone-warn {
  border-color: rgba(240, 191, 103, 0.24);
  background: linear-gradient(180deg, rgba(52, 33, 12, 0.92), rgba(29, 20, 11, 0.9));
}

.workflow-alert-severity {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(30, 42, 54, 0.9);
  border: 1px solid rgba(94, 112, 126, 0.42);
  color: #d7e4ef;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.workflow-alert-severity.tone-error {
  background: rgba(255, 241, 244, 0.72);
  border-color: rgba(140, 52, 72, 0.22);
  color: #311c21;
}

.workflow-alert-severity.tone-warn {
  background: rgba(140, 92, 21, 0.2);
  border-color: rgba(240, 191, 103, 0.26);
  color: #ffe0a3;
}

.workflow-alert-severity.tone-success {
  background: rgba(25, 112, 74, 0.18);
  border-color: rgba(111, 240, 164, 0.24);
  color: #c8f6d9;
}

.workflow-alert-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(23, 34, 45, 0.96);
  border: 1px solid rgba(62, 80, 95, 0.84);
  color: #cfdeea;
  font-size: 12px;
  font-weight: 800;
}

.work-section {
  display: grid;
  gap: 14px;
}

.work-section .workflow-panel-head {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.45fr);
  align-items: start;
  gap: 18px;
  margin-bottom: 0;
}

.work-section .workflow-panel-head p {
  max-width: 58ch;
}

.work-item-list {
  display: grid;
  gap: 12px;
}

.work-item {
  border-radius: 18px;
  border: 1px solid rgba(55, 72, 86, 0.84);
  background: linear-gradient(180deg, rgba(16, 24, 31, 0.96), rgba(12, 20, 26, 0.98));
  overflow: hidden;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.work-item:hover {
  border-color: rgba(112, 150, 127, 0.46);
  box-shadow: 0 16px 28px rgba(6, 13, 18, 0.18);
}

.work-item.expanded {
  border-color: rgba(109, 147, 255, 0.44);
  background:
    radial-gradient(circle at top right, rgba(109, 147, 255, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(17, 25, 32, 0.98), rgba(12, 20, 26, 0.98));
}

.work-item-toggle {
  width: 100%;
  border: 0;
  padding: 16px 18px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  text-align: left;
}

.work-item-main {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.work-item-title {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.work-item-title strong {
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #eff7ff;
}

.work-item-title span {
  color: #a2b7c3;
  font-size: 14px;
  line-height: 1.45;
}

.work-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.work-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(67, 84, 97, 0.82);
  background: rgba(255, 255, 255, 0.03);
  color: #cbdbe5;
  font-size: 12px;
  font-weight: 800;
}

.collapse-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  min-width: 120px;
  border-radius: 14px;
  border: 1px solid rgba(65, 84, 98, 0.82);
  background: rgba(255, 255, 255, 0.04);
  color: #d7e6ef;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.work-item.expanded .collapse-indicator svg {
  transform: rotate(180deg);
}

.work-item.closing .collapse-indicator svg {
  transform: rotate(180deg);
}

.collapse-indicator svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  transition: transform 0.2s ease;
}

.work-item-body {
  display: grid;
  grid-template-rows: 1fr;
  padding: 0 18px 18px;
  opacity: 1;
  will-change: grid-template-rows, opacity;
  transition:
    grid-template-rows 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.24s ease,
    padding 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.work-item-body-inner {
  overflow: hidden;
  transform-origin: top;
}

.work-item.expanded .work-item-body-inner {
  animation: work-item-body-enter 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.work-item-body .detail-panel {
  margin-top: 0;
}

.work-item.closing .work-item-body {
  grid-template-rows: 0fr;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.work-item.closing .work-item-body-inner {
  animation: work-item-body-exit 0.24s ease both;
}

@keyframes work-item-body-enter {
  from {
    opacity: 0;
    transform: translateY(-10px) scaleY(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

@keyframes work-item-body-exit {
  from {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }

  to {
    opacity: 0;
    transform: translateY(-8px) scaleY(0.98);
  }
}

.queue-support-panel {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
}

.queue-support-panel .workflow-panel-head {
  margin-bottom: 0;
}

.queue-support-panel .workflow-panel-head p {
  max-width: 34ch;
}

.queue-rail {
  display: grid;
  gap: 10px;
}

.queue-rail-item {
  width: 100%;
  border: 1px solid rgba(55, 72, 86, 0.84);
  border-radius: 16px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(18, 27, 35, 0.96), rgba(13, 21, 27, 0.98));
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 4px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.queue-rail-item:hover {
  transform: translateY(-1px);
  border-color: rgba(111, 152, 130, 0.44);
  box-shadow: 0 14px 24px rgba(5, 13, 18, 0.16);
}

.queue-rail-item strong {
  color: #9bc0ad;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.queue-rail-item span {
  color: #eff7ff;
  font-size: 15px;
  font-weight: 800;
}

.queue-rail-item small {
  color: #95aab7;
  font-size: 13px;
}

.queue-kanban-shell {
  display: grid;
  gap: 16px;
}

.queue-kanban-headline {
  margin-bottom: 0;
}

.queue-kanban-headline p {
  max-width: 60ch;
}

.queue-kanban-summary {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.queue-kanban-summary article {
  min-width: 180px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(55, 72, 86, 0.72);
  background: rgba(255, 255, 255, 0.03);
}

.queue-kanban-summary strong {
  display: block;
  color: #eef7ff;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.queue-kanban-summary span {
  display: block;
  margin-top: 8px;
  color: #8ea6b3;
  font-size: 13px;
  font-weight: 700;
}

.queue-board-wrap {
  padding-bottom: 0;
}

.queue-workflow-board {
  min-width: 0;
}

.queue-kanban-column {
  min-height: 620px;
}

.queue-kanban-column-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.queue-kanban-column-head h3 {
  font-size: 22px;
  line-height: 1.2;
}

.queue-kanban-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(126, 162, 142, 0.34);
  background: rgba(255, 255, 255, 0.05);
  color: #b5c8bb;
  font-size: 13px;
  font-weight: 800;
}

.queue-kanban-dropzone {
  min-height: 480px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.queue-kanban-dropzone.is-drag-over {
  background: rgba(111, 239, 167, 0.06);
}

.queue-kanban-empty {
  min-height: 220px;
  border-style: dashed;
}

.queue-kanban-card {
  cursor: grab;
}

.queue-kanban-card.is-dragging {
  opacity: 0.5;
  transform: scale(0.985);
}

.queue-kanban-open {
  padding: 8px 12px;
  border-radius: 12px;
}

body[data-theme="light"] .work-item,
body[data-theme="light"] .queue-rail-item,
body[data-theme="light"] .work-chip,
body[data-theme="light"] .collapse-indicator {
  border-color: rgba(193, 206, 198, 0.74);
}

body[data-theme="light"] .work-item,
body[data-theme="light"] .queue-rail-item {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(241, 247, 242, 0.98));
  box-shadow: 0 12px 24px rgba(139, 157, 146, 0.08);
}

body[data-theme="light"] .work-item.expanded {
  background:
    radial-gradient(circle at top right, rgba(97, 242, 163, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(248, 252, 249, 0.98), rgba(235, 245, 238, 0.99));
  border-color: rgba(114, 196, 154, 0.68);
}

body[data-theme="light"] .work-item-title strong,
body[data-theme="light"] .queue-rail-item span {
  color: #30453a;
}

body[data-theme="light"] .work-item-title span,
body[data-theme="light"] .queue-rail-item small {
  color: #6f8378;
}

body[data-theme="light"] .approval-queue-item {
  border-color: rgba(116, 182, 149, 0.34);
  background:
    linear-gradient(180deg, rgba(249, 252, 251, 0.98), rgba(241, 248, 245, 0.94)),
    radial-gradient(circle at top left, rgba(121, 232, 171, 0.16), transparent 56%);
  box-shadow: 0 18px 32px rgba(156, 186, 166, 0.18);
}

body[data-theme="light"] .approval-queue-item.active {
  border-color: rgba(84, 194, 131, 0.48);
  box-shadow: 0 20px 38px rgba(138, 182, 157, 0.22);
}

body[data-theme="light"] .approval-queue-item.tone-bad {
  border-color: rgba(231, 122, 140, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 248, 249, 0.98), rgba(255, 240, 243, 0.94)),
    radial-gradient(circle at top left, rgba(255, 128, 144, 0.14), transparent 56%);
}

body[data-theme="light"] .approval-queue-copy strong {
  color: #658075;
}

body[data-theme="light"] .approval-queue-copy h4,
body[data-theme="light"] .approval-decision-meta strong,
body[data-theme="light"] .approval-context-card strong {
  color: #2f463d;
}

body[data-theme="light"] .approval-queue-copy p,
body[data-theme="light"] .approval-notes-card p {
  color: #6e847c;
}

body[data-theme="light"] .approval-queue-meta span,
body[data-theme="light"] .approval-decision-meta article,
body[data-theme="light"] .approval-context-card,
body[data-theme="light"] .approval-notes-card,
body[data-theme="light"] .approval-context-details {
  border-color: rgba(126, 157, 142, 0.25);
  background: rgba(255, 255, 255, 0.72);
  color: #688077;
}

body[data-theme="light"] .approval-queue-reason {
  border-color: rgba(230, 130, 146, 0.28);
  background: rgba(255, 158, 171, 0.14);
  color: #6e4a50;
}

body[data-theme="light"] .approval-context-details summary {
  color: #3b564b;
}

body[data-theme="light"] .approval-context-details summary::after {
  color: #7a9488;
}

body[data-theme="light"] .queue-rail-item strong {
  color: #4f8c68;
}

body[data-theme="light"] .queue-kanban-summary article,
body[data-theme="light"] .queue-kanban-count {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(193, 206, 198, 0.74);
}

body[data-theme="light"] .queue-kanban-summary strong {
  color: #30453a;
}

body[data-theme="light"] .queue-kanban-summary span,
body[data-theme="light"] .queue-kanban-count {
  color: #6f8378;
}

body[data-theme="light"] .queue-kanban-dropzone.is-drag-over {
  background: rgba(111, 214, 160, 0.08);
}

body[data-theme="light"] .work-chip,
body[data-theme="light"] .collapse-indicator {
  background: rgba(255, 255, 255, 0.82);
  color: #5a7064;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

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

.workflow-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #d5e5f0;
  font-size: 13px;
  font-weight: 700;
}

.file-hint {
  color: #8fa6b7;
  font-size: 12px;
  font-weight: 600;
}

.workflow-form textarea.upload-input,
.workflow-form select.upload-input,
.workflow-form input.upload-input {
  width: 100%;
}

.workflow-form textarea.upload-input {
  resize: vertical;
  min-height: 104px;
}

.request-screen-stack {
  align-items: start;
}

.approval-summary-panel {
  display: grid;
  gap: 16px;
}

.approval-screen-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
  gap: 14px;
  align-items: start;
}

.approval-screen-main,
.approval-screen-side,
.approval-queue-panel,
.approval-queue-list,
.approval-action-shell {
  display: grid;
  gap: 14px;
}

.approval-queue-item {
  border-radius: 22px;
  border: 1px solid rgba(115, 210, 160, 0.22);
  background:
    linear-gradient(180deg, rgba(13, 28, 28, 0.9), rgba(9, 19, 22, 0.88)),
    radial-gradient(circle at top left, rgba(111, 239, 167, 0.1), transparent 56%);
  box-shadow: 0 18px 30px rgba(3, 10, 12, 0.2);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.approval-queue-item.active {
  border-color: rgba(111, 239, 167, 0.55);
  box-shadow: 0 24px 42px rgba(5, 18, 16, 0.24);
  transform: translateY(-1px);
}

.approval-queue-item.tone-bad {
  border-color: rgba(255, 120, 137, 0.3);
  background:
    linear-gradient(180deg, rgba(33, 16, 21, 0.92), rgba(23, 13, 17, 0.9)),
    radial-gradient(circle at top left, rgba(255, 120, 137, 0.08), transparent 56%);
}

.approval-queue-item-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  display: grid;
  gap: 12px;
  text-align: left;
  padding: 16px 18px;
  cursor: pointer;
}

.approval-queue-topline,
.approval-queue-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.approval-queue-copy {
  display: grid;
  gap: 4px;
}

.approval-queue-copy strong {
  font-size: 14px;
  letter-spacing: 0.04em;
  color: #b5c8cf;
}

.approval-queue-copy h4 {
  margin: 0;
  color: #f2fbff;
  font-size: 26px;
  line-height: 1.08;
}

.approval-queue-copy p {
  margin: 0;
  color: #a6bcc7;
  font-size: 15px;
}

.approval-queue-meta span {
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(109, 135, 148, 0.28);
  background: rgba(255, 255, 255, 0.04);
  color: #adc2cb;
  font-size: 12px;
  font-weight: 700;
}

.approval-queue-reason {
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid rgba(255, 120, 137, 0.24);
  background: rgba(255, 120, 137, 0.08);
  color: #ffdbe0;
  font-size: 13px;
  line-height: 1.5;
}

.approval-decision-panel {
  display: grid;
  gap: 14px;
  position: sticky;
  top: 10px;
}

.approval-decision-head {
  align-items: start;
}

.approval-decision-highlights {
  margin-top: -2px;
}

.approval-decision-actions {
  display: grid;
  gap: 12px;
}

.approval-decision-form textarea.upload-input {
  min-height: 74px;
}

.approval-decision-meta,
.approval-context-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.approval-decision-meta article,
.approval-context-card {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(96, 121, 135, 0.28);
  background: rgba(255, 255, 255, 0.03);
}

.approval-decision-meta small,
.approval-context-card small,
.approval-notes-card small {
  color: #8fa4ae;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.approval-decision-meta strong,
.approval-context-card strong {
  color: #f0f8fc;
  font-size: 15px;
  line-height: 1.35;
}

.approval-notes-card {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(96, 121, 135, 0.28);
  background: rgba(255, 255, 255, 0.03);
}

.approval-notes-card p {
  margin: 0;
  color: #c9d8df;
  line-height: 1.62;
}

.approval-context-details {
  display: grid;
  gap: 12px;
  padding: 12px 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(96, 121, 135, 0.28);
  background: rgba(255, 255, 255, 0.02);
}

.approval-context-details summary {
  cursor: pointer;
  list-style: none;
  color: #e8f1f5;
  font-size: 14px;
  font-weight: 800;
}

.approval-context-details summary::-webkit-details-marker {
  display: none;
}

.approval-context-details summary::after {
  content: "Mostrar/ocultar";
  margin-left: 10px;
  color: #8ea4af;
  font-size: 12px;
  font-weight: 700;
}

.request-list-panel {
  display: grid;
  gap: 14px;
}

.request-card-list {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.request-card-list .workflow-card {
  min-width: 0;
}

.request-list-empty {
  min-height: 180px;
  border-style: dashed;
}

.compact-form textarea.upload-input {
  min-height: 96px;
}

.form-span-2 {
  grid-column: 1 / -1;
}

.form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.workflow-kpis,
.stage-summary-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
}

.overview-stack,
.overview-summary-main,
.overview-summary-side,
.overview-insights-stack {
  display: grid;
  gap: 12px;
}

.overview-stack {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  grid-auto-flow: dense;
}

.overview-stack:not(.overview-stack--curated) {
  grid-auto-rows: var(--overview-masonry-row-height, 10px);
}

.overview-stack.is-drag-over-stack {
  outline: 1px dashed rgba(120, 228, 172, 0.4);
  outline-offset: 8px;
  border-radius: 28px;
}

.overview-widget {
  display: grid;
  gap: 12px;
  min-width: 0;
  height: fit-content;
  grid-column: span 12;
}

.overview-widget--full {
  grid-column: span 12;
}

.overview-widget--half {
  grid-column: span 6;
}

.overview-widget--third {
  grid-column: span 4;
}

.overview-widget--quarter {
  grid-column: span 3;
}

.overview-widget-body {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.overview-widget.is-customizable {
  padding: 10px;
  min-height: 160px;
  max-height: calc(100dvh - 220px);
  border-radius: 20px;
  border: 1px dashed rgba(120, 228, 172, 0.28);
  background: rgba(120, 228, 172, 0.03);
  resize: vertical;
  overflow: auto;
  scrollbar-width: none;
  transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.overview-widget.is-customizable::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.overview-widget.is-customizable:hover {
  border-color: rgba(120, 228, 172, 0.48);
  background: rgba(120, 228, 172, 0.05);
}

.overview-widget.is-dragging {
  opacity: 0.56;
  transform: scale(0.985);
}

.overview-widget.is-drag-over {
  border-color: rgba(120, 228, 172, 0.82);
  box-shadow: 0 16px 30px rgba(6, 15, 20, 0.16);
}

.overview-widget-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 0;
}

.overview-widget-handle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #a9c6b7;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: grab;
  user-select: none;
}

.overview-widget-handle::before {
  content: "⋮⋮";
  color: #78e4ac;
  font-size: 11px;
  letter-spacing: -0.1em;
}

.overview-widget.is-dragging .overview-widget-handle {
  cursor: grabbing;
}

.overview-widget-toolbar-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.overview-layout-panel {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
}

.overview-layout-panel,
.overview-stack > .empty-state-panel {
  grid-column: 1 / -1;
}

.overview-layout-panel.is-open {
  background:
    radial-gradient(circle at top right, rgba(120, 228, 172, 0.08), transparent 26%),
    linear-gradient(180deg, rgba(17, 25, 32, 0.98), rgba(12, 20, 26, 0.98));
}

.overview-layout-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.overview-layout-note {
  margin: 0;
  color: #97adba;
  line-height: 1.55;
}

.overview-layout-customizer {
  display: grid;
  gap: 12px;
}

.overview-layout-actions--secondary {
  justify-content: flex-start;
}

.overview-stack--curated .overview-layout-panel,
.overview-stack--curated .overview-section,
.overview-stack--curated > .empty-state-panel {
  grid-column: 1 / -1;
}

.overview-section {
  display: grid;
  gap: 12px;
}

.overview-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.overview-section-head small {
  color: #8ea6b3;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.overview-section-head h3 {
  margin: 4px 0 0;
  font-size: 18px;
}

.overview-section-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
}

.overview-section-grid--hero .overview-widget--overview_hero_main {
  grid-column: span 7;
}

.overview-section-grid--hero .overview-widget--overview_focus {
  grid-column: span 5;
}

.overview-section-grid--kpis .overview-widget,
.overview-section-grid--stages .overview-widget {
  grid-column: span 3;
}

.overview-section-grid--alerts .overview-widget,
.overview-section-grid--kanban .overview-widget {
  grid-column: 1 / -1;
}

.overview-section-grid--insights .overview-widget,
.overview-section-grid--extra .overview-widget {
  grid-column: span 4;
}

.overview-widget--curated {
  min-width: 0;
}

.overview-hero-copy-card {
  display: grid;
  gap: 14px;
  min-height: 100%;
  background:
    radial-gradient(circle at top left, rgba(120, 228, 172, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(19, 28, 35, 0.98), rgba(16, 24, 31, 0.98));
}

.overview-hero-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.overview-hero-copy-card h3 {
  margin: 0;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.overview-hero-copy-card p {
  margin: 0;
  max-width: 58ch;
}

.overview-status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(67, 88, 79, 0.54);
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.overview-status-chip.tone-error {
  border-color: rgba(200, 45, 45, 0.58);
  background: linear-gradient(180deg, rgba(244, 89, 89, 0.96), rgba(214, 45, 45, 0.94));
  color: #101010;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.overview-status-chip.tone-warn {
  border-color: rgba(240, 191, 103, 0.28);
  color: #ffe2ab;
}

.overview-status-chip.tone-success {
  border-color: rgba(111, 240, 164, 0.24);
  color: #cbf5db;
}

.overview-hero-primary {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(220px, 0.95fr) minmax(0, 1.35fr);
  align-items: stretch;
}

.overview-hero-primary-card {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(88, 112, 100, 0.44);
  background: rgba(255, 255, 255, 0.04);
}

.overview-hero-primary-label {
  color: #8ea6b3;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.overview-hero-primary-card strong {
  display: block;
  color: #eff7ff;
  font-size: clamp(46px, 5vw, 58px);
  letter-spacing: -0.06em;
  line-height: 0.95;
}

.overview-hero-primary-card p {
  color: #a8bac4;
  max-width: 18ch;
}

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

.overview-hero-summary article {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(67, 88, 79, 0.54);
  background: rgba(255, 255, 255, 0.03);
}

.overview-hero-summary span {
  display: block;
  color: #90a79b;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.overview-hero-summary strong {
  display: block;
  margin-top: 8px;
  color: #eef7ff;
  font-size: 26px;
  letter-spacing: -0.04em;
}

.overview-priority-banner {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(67, 88, 79, 0.54);
  background: rgba(255, 255, 255, 0.04);
}

.overview-priority-banner.tone-error {
  border-color: rgba(240, 123, 146, 0.26);
  background: linear-gradient(180deg, rgba(49, 18, 27, 0.86), rgba(28, 14, 19, 0.82));
}

.overview-priority-banner.tone-warn {
  border-color: rgba(240, 191, 103, 0.24);
  background: linear-gradient(180deg, rgba(52, 33, 12, 0.86), rgba(29, 20, 11, 0.82));
}

.overview-priority-copy {
  display: grid;
  gap: 4px;
}

.overview-priority-copy small,
.overview-priority-context {
  color: #9fb2be;
  font-size: 12px;
  font-weight: 700;
}

.overview-priority-copy strong {
  color: #eff7ff;
  font-size: 16px;
}

.overview-priority-copy p {
  color: #d8e4ec;
}

.overview-focus-widget {
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(78, 99, 90, 0.58);
  background: linear-gradient(180deg, rgba(13, 23, 29, 0.78), rgba(11, 19, 24, 0.92));
  display: grid;
  gap: 14px;
  align-content: start;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.overview-focus-widget.tone-error {
  border-color: rgba(240, 123, 146, 0.32);
  box-shadow: 0 22px 38px rgba(45, 10, 20, 0.22);
}

.overview-focus-widget.tone-warn {
  border-color: rgba(240, 191, 103, 0.28);
  box-shadow: 0 22px 38px rgba(45, 28, 7, 0.2);
}

.overview-focus-priority {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(67, 88, 79, 0.54);
  background: rgba(255, 255, 255, 0.04);
}

.overview-focus-priority span,
.overview-focus-priority small {
  color: #9fb2be;
  font-size: 12px;
  font-weight: 700;
}

.overview-focus-priority strong {
  color: #eff7ff;
}

.overview-stage-count-card {
  min-height: 100%;
  position: relative;
  overflow: hidden;
}

.overview-stage-count-card p {
  margin: 6px 0 0;
  color: #90a5b2;
  line-height: 1.45;
  font-size: 13px;
}

.overview-stage-count-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  opacity: 0.95;
}

.overview-stage-count-card--solicitacao_triagem::before {
  background: linear-gradient(90deg, #71d89f, rgba(113, 216, 159, 0));
}

.overview-stage-count-card--planejamento_fila::before {
  background: linear-gradient(90deg, #8fb7ad, rgba(143, 183, 173, 0));
}

.overview-stage-count-card--execucao_desenvolvimento::before {
  background: linear-gradient(90deg, #9adfb7, rgba(154, 223, 183, 0));
}

.overview-stage-count-card--entrega_feedback::before {
  background: linear-gradient(90deg, #c0cbc6, rgba(192, 203, 198, 0));
}

.overview-layout-list {
  display: grid;
  gap: 10px;
}

.overview-layout-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(55, 72, 86, 0.84);
  background: rgba(255, 255, 255, 0.03);
}

.overview-layout-copy {
  display: grid;
  gap: 4px;
}

.overview-layout-copy strong {
  color: #eff7ff;
  font-size: 15px;
}

.overview-layout-copy span {
  color: #8ea6b3;
  font-size: 13px;
}

.overview-layout-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.overview-layout-btn {
  min-width: 88px;
}

.overview-summary-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.95fr);
}

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

.overview-metric-card {
  position: relative;
  overflow: hidden;
  min-height: 132px;
}

.overview-metric-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  opacity: 0.95;
}

.overview-metric-card.accent-open::before {
  background: linear-gradient(90deg, #78e4ac, rgba(120, 228, 172, 0));
}

.overview-metric-card.accent-bottleneck::before {
  background: linear-gradient(90deg, #9ab2a5, rgba(154, 178, 165, 0));
}

.overview-metric-card.accent-efficiency::before {
  background: linear-gradient(90deg, #8be1ba, rgba(139, 225, 186, 0));
}

.overview-metric-card.accent-history::before {
  background: linear-gradient(90deg, #b5c0bb, rgba(181, 192, 187, 0));
}

.overview-stage-panel,
.workflow-alerts,
.overview-hero-panel,
.insight-panel {
  padding: 18px;
}

.overview-panel-head-compact {
  align-items: center;
  margin-bottom: 12px;
}

.overview-panel-head-compact h3 {
  font-size: 18px;
  margin-top: 3px;
}

.overview-panel-head-compact p {
  max-width: 34ch;
  font-size: 13px;
  line-height: 1.5;
}

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

.overview-stage-grid .stage-summary-card {
  padding: 14px 16px;
}

.overview-stage-grid .stage-summary-card strong {
  margin-top: 6px;
  font-size: 26px;
}

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

.workflow-kpi-card,
.stage-summary-card,
.insight-panel {
  background: linear-gradient(180deg, rgba(20, 29, 37, 0.98), rgba(17, 24, 31, 0.98));
  border: 1px solid rgba(55, 72, 86, 0.84);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 16px 30px rgba(5, 13, 18, 0.14);
}

.workflow-kpi-card strong,
.stage-summary-card strong {
  display: block;
  margin-top: 10px;
  font-size: 30px;
  letter-spacing: -0.03em;
}

.screen-panel {
  min-height: 100%;
}

.table-section-flat {
  padding: 12px;
  border-radius: 6px;
  background: #10161d;
}

.table-section-flat .workflow-panel-head {
  margin-bottom: 8px;
}

.screen-table-wrap {
  overflow: auto;
  border: 1px solid rgba(55, 72, 86, 0.84);
  border-radius: 4px;
  background: #111820;
}

.system-table {
  width: 100%;
  border-collapse: collapse;
}

.system-table th,
.system-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(51, 75, 92, 0.72);
  border-right: 1px solid rgba(45, 63, 77, 0.62);
  vertical-align: middle;
}

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

.system-table th {
  background: #18212b;
  color: #d7e7f0;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 800;
  position: sticky;
  top: 0;
  z-index: 2;
}

.system-table td {
  color: #c7d8e2;
  background: #111820;
}

.system-table tbody tr:nth-child(even) td {
  background: #0f171f;
}

.selected-row td {
  background: #16253a;
}

.empty-row {
  text-align: center;
  color: #97adba;
}

.table-link {
  border: 0;
  background: transparent;
  color: #9ec0ff;
  font-weight: 800;
  cursor: pointer;
  padding: 0;
}

.table-link.active {
  color: #eff6ff;
}

.screen-hero {
  display: grid;
  gap: 16px;
}

.overview-hero-panel {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.92fr);
  background:
    radial-gradient(circle at top left, rgba(120, 228, 172, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(19, 28, 35, 0.98), rgba(16, 24, 31, 0.98));
}

.overview-hero-copy {
  display: grid;
  gap: 12px;
  align-content: start;
}

.overview-hero-copy h3 {
  margin: 0;
  font-size: 32px;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.overview-hero-copy p {
  max-width: 58ch;
}

.overview-focus-card {
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(78, 99, 90, 0.58);
  background: linear-gradient(180deg, rgba(13, 23, 29, 0.78), rgba(11, 19, 24, 0.92));
  display: grid;
  gap: 14px;
  align-content: start;
}

.overview-focus-label {
  color: #8ea6b3;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.overview-focus-value {
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.overview-focus-note {
  margin: 0;
  color: #9bb0bc;
  line-height: 1.55;
}

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

.overview-focus-stats article {
  padding: 12px 12px 10px;
  border-radius: 14px;
  border: 1px solid rgba(66, 84, 76, 0.58);
  background: rgba(255, 255, 255, 0.03);
}

.overview-focus-stats small {
  color: #89a096;
  font-weight: 700;
}

.overview-focus-stats strong {
  display: block;
  margin-top: 6px;
  font-size: 22px;
  color: #eff7ff;
}

.screen-hero-main {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.hero-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(23, 34, 45, 0.96);
  border: 1px solid rgba(62, 80, 95, 0.84);
  color: #cfdeea;
  font-size: 12px;
  font-weight: 700;
}

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

.hero-stat {
  border: 1px solid rgba(55, 72, 86, 0.84);
  border-radius: 16px;
  padding: 14px 16px;
  background: rgba(12, 19, 25, 0.92);
}

.hero-stat small {
  color: #8ea6b3;
  font-weight: 700;
}

.hero-stat strong {
  display: block;
  margin-top: 8px;
  font-size: 28px;
}

.insight-panel-feature .insight-list {
  gap: 8px;
}

.overview-flow-shell {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.overview-flow-head {
  margin-bottom: 0;
}

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

.overview-stage-tab {
  display: grid;
  gap: 4px;
  text-align: left;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(55, 72, 86, 0.84);
  background: linear-gradient(180deg, rgba(16, 24, 31, 0.96), rgba(12, 20, 26, 0.98));
  color: #dbe7ef;
  cursor: pointer;
  transition:
    border-color 0.22s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease;
}

.overview-stage-tab:hover {
  transform: translateY(-1px);
  border-color: rgba(112, 144, 124, 0.56);
}

.overview-stage-tab small {
  color: #92a8b4;
  font-weight: 700;
}

.overview-stage-tab strong {
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.overview-stage-tab span {
  color: #8ea1ad;
  font-size: 13px;
  line-height: 1.45;
}

.overview-stage-tab.active {
  border-color: rgba(114, 223, 160, 0.56);
  background:
    linear-gradient(180deg, rgba(19, 35, 27, 0.96), rgba(14, 24, 29, 0.98)),
    linear-gradient(135deg, rgba(111, 239, 167, 0.08), transparent 54%);
  box-shadow: 0 18px 28px rgba(9, 15, 20, 0.22);
}

.overview-stage-tab.active small {
  color: #7fd6a3;
}

.overview-stage-tab.active span {
  color: #b3c5bd;
}

.overview-toolbar {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(53, 69, 83, 0.8);
  background: rgba(12, 18, 24, 0.72);
}

.overview-kanban-shell {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.overview-kanban-head {
  margin-bottom: 0;
}

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

.overview-stage-snapshot {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(55, 72, 86, 0.84);
  background: linear-gradient(180deg, rgba(16, 24, 31, 0.96), rgba(12, 20, 26, 0.98));
  position: relative;
  overflow: hidden;
}

.overview-stage-snapshot small {
  color: #8ca5b1;
  font-weight: 700;
}

.overview-stage-snapshot strong {
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.overview-stage-snapshot span {
  color: #8ea1ad;
  font-size: 13px;
  line-height: 1.45;
}

.overview-stage-snapshot-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
  color: #8ea6b3;
  font-size: 12px;
  font-weight: 700;
}

.overview-stage-snapshot::before,
.workflow-column::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 4px;
  opacity: 0.95;
}

.overview-stage-snapshot--solicitacao_triagem::before,
.workflow-column--solicitacao_triagem::before {
  background: linear-gradient(90deg, #71d89f, rgba(113, 216, 159, 0));
}

.overview-stage-snapshot--planejamento_fila::before,
.workflow-column--planejamento_fila::before {
  background: linear-gradient(90deg, #8fb7ad, rgba(143, 183, 173, 0));
}

.overview-stage-snapshot--execucao_desenvolvimento::before,
.workflow-column--execucao_desenvolvimento::before {
  background: linear-gradient(90deg, #9adfb7, rgba(154, 223, 183, 0));
}

.overview-stage-snapshot--entrega_feedback::before,
.workflow-column--entrega_feedback::before {
  background: linear-gradient(90deg, #c0cbc6, rgba(192, 203, 198, 0));
}

.overview-kanban-toolbar {
  margin-top: 2px;
}

.overview-flow-controls {
  display: flex;
  justify-content: flex-end;
}

.overview-board-wrap {
  overflow-x: auto;
  padding-bottom: 4px;
}

.overview-flow-alerts {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.overview-flow-alert {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(55, 72, 86, 0.84);
  background: linear-gradient(180deg, rgba(16, 24, 31, 0.96), rgba(12, 20, 26, 0.98));
}

.overview-flow-alert strong {
  color: #eff7ff;
}

.overview-flow-alert span {
  color: #8ea6b3;
  font-size: 13px;
}

.overview-flow-alert--warn {
  border-color: rgba(235, 186, 98, 0.38);
  box-shadow: inset 0 0 0 1px rgba(235, 186, 98, 0.08);
}

.overview-flow-alert--ok {
  border-color: rgba(97, 242, 163, 0.28);
  box-shadow: inset 0 0 0 1px rgba(97, 242, 163, 0.08);
}

.overview-map-layout {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.6fr);
  align-items: start;
}

.overview-map-selector,
.overview-map-canvas {
  border: 1px solid rgba(55, 72, 86, 0.84);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(16, 24, 31, 0.96), rgba(12, 20, 26, 0.98));
  padding: 16px;
  min-width: 0;
}

.overview-map-selector-list {
  display: grid;
  gap: 10px;
  max-height: min(72vh, 760px);
  overflow: auto;
  scrollbar-gutter: stable;
}

.overview-map-selector-item {
  width: 100%;
  text-align: left;
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(55, 72, 86, 0.84);
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.overview-map-selector-item:hover,
.overview-map-selector-item.is-active {
  transform: translateY(-1px);
  border-color: rgba(97, 242, 163, 0.42);
  background: rgba(97, 242, 163, 0.06);
}

.overview-map-selector-item strong {
  color: #eff7ff;
}

.overview-map-selector-item span,
.overview-map-selector-item small {
  color: #8ea6b3;
}

.overview-map-selector-item em {
  color: #f1c67a;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.overview-map-empty {
  min-height: 320px;
  display: grid;
  place-items: center;
  text-align: center;
}

.overview-map-empty strong {
  display: block;
  margin-bottom: 8px;
  color: #eff7ff;
}

.overview-map-empty p {
  margin: 0;
  color: #8ea6b3;
  max-width: 46ch;
}

.overview-map-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.overview-map-header h3 {
  margin: 4px 0 6px;
  font-size: 24px;
}

.overview-map-header p {
  margin: 0;
  color: #8ea6b3;
}

.overview-map-header-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.overview-logistic-map {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  position: relative;
}

.overview-logistic-stage {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(55, 72, 86, 0.84);
  background: linear-gradient(180deg, rgba(19, 28, 36, 0.98), rgba(15, 23, 30, 0.98));
}

.overview-logistic-stage:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 34px;
  left: -14px;
  width: 14px;
  height: 2px;
  background: linear-gradient(90deg, rgba(97, 242, 163, 0.18), rgba(97, 242, 163, 0.74));
}

.overview-logistic-stage::after {
  content: "";
  position: absolute;
  top: 28px;
  right: -8px;
  width: 16px;
  height: 12px;
  background:
    linear-gradient(90deg, rgba(97, 242, 163, 0.68), rgba(97, 242, 163, 0.68)) left center / 8px 2px no-repeat,
    linear-gradient(45deg, transparent 44%, rgba(97, 242, 163, 0.68) 45%, rgba(97, 242, 163, 0.68) 55%, transparent 56%) right center / 8px 12px no-repeat;
}

.overview-logistic-stage:last-child::after {
  display: none;
}

.overview-logistic-stage-index {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(97, 242, 163, 0.12);
  border: 1px solid rgba(97, 242, 163, 0.24);
  color: #b9ecd0;
  font-size: 12px;
  font-weight: 800;
}

.overview-logistic-stage small {
  color: #8ea6b3;
  font-weight: 700;
}

.overview-logistic-stage strong {
  color: #eff7ff;
  line-height: 1.35;
}

.overview-logistic-stage p {
  margin: 0;
  color: #8ea6b3;
}

.overview-logistic-stage-meta {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}

.overview-logistic-stage-meta span {
  color: #9db2be;
  font-size: 12px;
  font-weight: 700;
}

.overview-logistic-stage-transfer {
  padding-top: 8px;
  border-top: 1px solid rgba(69, 88, 102, 0.45);
  color: #cfe1eb;
}

.overview-logistic-stage.is-current {
  border-color: rgba(97, 242, 163, 0.45);
  box-shadow: 0 18px 28px rgba(6, 18, 13, 0.28);
}

.overview-logistic-stage.is-pending {
  opacity: 0.74;
}

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

.overview-map-summary-grid article {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(55, 72, 86, 0.84);
  background: rgba(255, 255, 255, 0.03);
}

.overview-map-summary-grid small {
  color: #8ea6b3;
  font-weight: 700;
}

.overview-map-summary-grid strong {
  color: #eff7ff;
}

.overview-map-summary-grid span {
  color: #9db2be;
  font-size: 13px;
}

.overview-map-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.overview-flow-body {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.8fr);
  align-items: start;
}

.overview-flow-main,
.overview-flow-side {
  display: grid;
  gap: 12px;
}

.overview-stage-highlight,
.overview-stage-side-card {
  border: 1px solid rgba(55, 72, 86, 0.84);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(17, 25, 32, 0.96), rgba(12, 20, 26, 0.98));
}

.overview-stage-highlight {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  padding: 18px;
}

.overview-stage-highlight h4,
.overview-stage-side-card h4 {
  margin: 4px 0 0;
  font-size: 22px;
  letter-spacing: -0.03em;
}

.overview-metric-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.overview-metric-topline span {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(69, 90, 81, 0.44);
  color: #97b0a3;
  font-size: 11px;
  font-weight: 800;
}

.overview-stage-highlight p {
  margin: 8px 0 0;
  max-width: 48ch;
  color: #97acb8;
}

.overview-stage-highlight-stats {
  display: grid;
  gap: 10px;
  min-width: 220px;
}

.overview-stage-highlight-stats span {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(63, 81, 72, 0.52);
  background: rgba(255, 255, 255, 0.03);
  color: #96ab9f;
  font-size: 13px;
}

.overview-stage-highlight-stats strong {
  color: #eff7ff;
  font-size: 16px;
}

.overview-hero-copy-card,
.overview-focus-widget,
.overview-metric-card,
.overview-stage-count-card,
.overview-stage-tab,
.overview-stage-snapshot,
.overview-stage-highlight,
.overview-stage-side-card,
.workflow-alert-item {
  min-width: 0;
}

.overview-hero-copy-card h3,
.overview-focus-value,
.overview-stage-tab strong,
.overview-stage-snapshot strong,
.workflow-kpi-card strong,
.stage-summary-card strong,
.hero-stat strong {
  overflow-wrap: anywhere;
}

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

.overview-stage-card-grid .workflow-card {
  min-height: 100%;
}

.overview-stage-card-grid .board-empty {
  grid-column: 1 / -1;
  min-height: 180px;
}

.overview-stage-side-card {
  padding: 18px;
}

.overview-stage-side-card small {
  color: #8ba198;
  font-weight: 700;
}

.overview-stage-side-list,
.overview-stage-mini-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.overview-stage-side-list div {
  display: grid;
  gap: 4px;
  padding: 12px 0;
  border-top: 1px solid rgba(53, 69, 83, 0.68);
}

.overview-stage-side-list div:first-child {
  padding-top: 0;
  border-top: 0;
}

.overview-stage-side-list span {
  color: #8fa3ae;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.overview-stage-side-list strong {
  color: #ecf5fb;
  line-height: 1.45;
}

.overview-stage-mini-item {
  display: grid;
  gap: 4px;
  text-align: left;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(55, 72, 86, 0.78);
  background: rgba(255, 255, 255, 0.02);
  color: inherit;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    background 0.2s ease;
}

.overview-stage-mini-item:hover {
  transform: translateY(-1px);
  border-color: rgba(116, 222, 160, 0.42);
  background: rgba(111, 239, 167, 0.05);
}

.overview-stage-mini-item strong {
  color: #eff7ff;
}

.overview-stage-mini-item span,
.overview-stage-mini-item small {
  color: #8fa3ae;
}

.overview-board .workflow-column {
  min-height: 0;
  max-height: min(74vh, 820px);
}

.overview-board .workflow-column-head {
  padding: 16px;
}

.overview-board .workflow-column-head h3 {
  font-size: 28px;
}

.overview-board .workflow-column-body {
  padding: 12px;
  gap: 8px;
  flex: 1;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
}

.overview-board .workflow-card {
  padding: 13px;
  border-radius: 14px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-content: start;
  gap: 8px;
  overflow: hidden;
  isolation: isolate;
}

.overview-board .workflow-card h4 {
  font-size: 16px;
  display: block;
  line-height: 1.28;
  overflow: visible;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
  word-break: break-word;
}

.overview-board .workflow-card p,
.overview-board .workflow-card strong,
.overview-board .workflow-card h4 {
  overflow-wrap: anywhere;
}

.overview-board {
  min-width: 0;
}

.overview-board .workflow-card-meta,
.overview-board .workflow-card-foot {
  margin-top: 10px;
}

.overview-board .workflow-card-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 8px 14px;
}

.overview-board .workflow-card-meta--event {
  grid-template-columns: 1fr;
}

.workflow-card-event {
  display: inline-flex;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(87, 113, 129, 0.34);
  background: rgba(255, 255, 255, 0.04);
  color: #d3e3eb;
  font-size: 12px;
  font-weight: 800;
}

.workflow-card-event.is-finalized {
  border-color: rgba(97, 242, 163, 0.3);
  background: rgba(97, 242, 163, 0.1);
  color: #d9f7e4;
}

.overview-board .workflow-card-foot {
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.overview-board .workflow-card-foot > * {
  min-width: 0;
}

.overview-board .workflow-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: flex-start;
  gap: 10px;
}

.overview-board .workflow-card-head-left {
  flex: 1 1 auto;
  min-width: 0;
}

.overview-board .workflow-card-head .status-pill {
  justify-self: flex-start;
  align-self: flex-start;
}

.overview-board .workflow-card-meta span,
.overview-board .workflow-card-foot span,
.overview-board .workflow-card-foot .mini-link-text,
.overview-board .workflow-card-foot .mini-tag {
  overflow-wrap: anywhere;
  min-width: 0;
}

.overview-board .workflow-card .mini-tag,
.overview-board .workflow-card .mini-link-text,
.overview-board .workflow-card .status-pill,
.overview-board .workflow-card .deadline-pill,
.overview-board .workflow-card .priority-pill {
  max-width: 100%;
  white-space: normal;
}

.overview-logistic-stage.is-complete {
  border-color: rgba(97, 242, 163, 0.42);
  box-shadow: 0 18px 28px rgba(6, 18, 13, 0.18);
}

.stage-focus-panel .workflow-panel-head {
  margin-bottom: 10px;
}

.compact-column {
  max-height: 520px;
  overflow: auto;
  padding: 0;
}

.workflow-toolbar {
  margin-bottom: 0;
}

.filter-panel .workflow-panel-head {
  margin-bottom: 12px;
}

.filter-field {
  min-width: 220px;
  flex: 1 1 220px;
}

.toggle-filter {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(61, 85, 102, 0.85);
  background: rgba(15, 26, 34, 0.9);
  color: #d2e1ea;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}

.toggle-filter input {
  accent-color: #5b87ff;
  cursor: pointer;
  flex: 0 0 auto;
}

.workflow-inline-note {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(74, 102, 118, 0.46);
  background: rgba(13, 24, 31, 0.52);
}

.workflow-inline-note strong {
  color: #eff7ff;
  font-size: 13px;
  font-weight: 800;
}

.workflow-inline-note p {
  margin: 0;
  color: #a5bac6;
  font-size: 13px;
  line-height: 1.55;
}

.workflow-inline-note.is-danger {
  border-color: rgba(255, 112, 138, 0.34);
  background: rgba(78, 23, 36, 0.18);
}

.workflow-inline-note.is-danger strong,
.workflow-inline-note.is-danger p {
  color: #f2d8dd;
}

.insight-list {
  display: grid;
  gap: 10px;
}

.insight-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(56, 79, 95, 0.78);
  background: rgba(10, 20, 27, 0.58);
}

.insight-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(111, 239, 167, 0.08);
  border: 1px solid rgba(111, 239, 167, 0.24);
  color: #8ed5a8;
  font-size: 12px;
  font-weight: 800;
}

.insight-copy {
  display: grid;
  gap: 4px;
}

.insight-row strong {
  color: #eff7ff;
}

.insight-row span {
  color: #96acb9;
  font-size: 13px;
}

.workflow-board {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}

.workflow-column {
  min-height: 540px;
  position: relative;
  background:
    linear-gradient(180deg, rgba(19, 27, 35, 0.98), rgba(15, 22, 28, 0.98));
  border: 1px solid rgba(55, 72, 86, 0.84);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.workflow-column-head {
  padding: 18px;
  border-bottom: 1px solid rgba(56, 79, 95, 0.78);
  background: linear-gradient(135deg, rgba(43, 73, 105, 0.2), rgba(15, 28, 36, 0.1));
}

.workflow-column-head h3 {
  margin: 6px 0;
  font-size: 34px;
}

.workflow-column-insights {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  color: #8ea6b3;
  font-size: 12px;
  font-weight: 700;
}

.workflow-column-insights strong {
  color: #eff7ff;
}

.workflow-column-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  min-height: 0;
}

.workflow-card {
  width: 100%;
  text-align: left;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(55, 72, 86, 0.84);
  background: linear-gradient(180deg, rgba(19, 28, 36, 0.98), rgba(16, 24, 31, 0.98));
  color: #eff7ff;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.workflow-card > * {
  min-width: 0;
}

.workflow-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, rgba(111, 239, 167, 0.75), rgba(111, 239, 167, 0));
  opacity: 0.92;
}

.workflow-card:hover,
.workflow-card.active {
  transform: translateY(-2px);
  border-color: rgba(109, 147, 255, 0.78);
  box-shadow: 0 14px 26px rgba(5, 13, 18, 0.34);
}

.workflow-card-draggable {
  cursor: grab;
}

.workflow-card-draggable.is-dragging {
  opacity: 0.4;
  transform: scale(0.985);
}

.overview-dropzone {
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.overview-dropzone.is-drag-over {
  background:
    radial-gradient(circle at top center, rgba(97, 242, 163, 0.08), transparent 50%),
    rgba(12, 23, 17, 0.38);
  box-shadow: inset 0 0 0 1px rgba(97, 242, 163, 0.25);
}

.workflow-card strong {
  display: block;
  font-size: 12px;
  color: #99b0be;
  letter-spacing: 0.08em;
  overflow-wrap: anywhere;
}

.workflow-card h4 {
  margin: 8px 0 6px;
  font-size: 18px;
  overflow-wrap: anywhere;
}

.workflow-card p {
  margin: 0;
  color: #9ab0bd;
  overflow-wrap: anywhere;
}

.workflow-card-head,
.workflow-card-meta,
.workflow-card-foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.workflow-card-head {
  margin-bottom: 10px;
}

.workflow-card-head-left {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.workflow-card-meta {
  margin-top: 12px;
  color: #87a0b0;
  font-size: 12px;
  font-weight: 700;
}

.workflow-card-foot {
  margin-top: 12px;
}

.priority-pill,
.status-pill,
.mini-tag,
.deadline-pill {
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

.deadline-pill {
  background: rgba(97, 242, 163, 0.1);
  border: 1px solid rgba(97, 242, 163, 0.2);
  color: #bfe8cf;
}

.deadline-pill.is-late {
  background: rgba(235, 186, 98, 0.16);
  border-color: rgba(235, 186, 98, 0.3);
  color: #f1c67a;
}

.priority-high {
  background: rgba(226, 110, 129, 0.2);
  border: 1px solid rgba(237, 136, 154, 0.35);
  color: #ffb4c3;
}

.priority-medium {
  background: rgba(230, 176, 83, 0.18);
  border: 1px solid rgba(224, 181, 106, 0.34);
  color: #f0cc86;
}

.priority-low {
  background: rgba(97, 174, 134, 0.16);
  border: 1px solid rgba(121, 196, 156, 0.3);
  color: #a9e0bc;
}

.status-pill.ok {
  background: rgba(84, 122, 247, 0.24);
  border: 1px solid rgba(118, 151, 255, 0.34);
  color: #abc3ff;
}

.status-pill.warn {
  background: rgba(235, 176, 72, 0.2);
  border: 1px solid rgba(235, 186, 98, 0.32);
  color: #f1c67a;
}

.status-pill.bad {
  background: rgba(245, 115, 145, 0.2);
  border: 1px solid rgba(255, 151, 177, 0.3);
  color: #ffacc1;
}

.mini-tag {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(126, 156, 176, 0.18);
  color: #c3d6e0;
}

.board-empty {
  min-height: 180px;
  border-radius: 16px;
  border: 1px dashed rgba(95, 122, 143, 0.55);
  background: rgba(16, 28, 36, 0.5);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.board-empty strong {
  color: #d5e4ee;
}

.detail-panel {
  margin-top: 2px;
  align-self: start;
  min-width: 0;
}

.detail-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 13, 17, 0.54);
  backdrop-filter: blur(10px);
}

.detail-modal-shell {
  width: min(1120px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  display: grid;
  gap: 14px;
  min-width: 0;
}

.detail-modal-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(55, 72, 86, 0.84);
  background: linear-gradient(180deg, rgba(17, 25, 32, 0.98), rgba(13, 21, 27, 0.98));
  box-shadow: 0 18px 40px rgba(5, 13, 18, 0.3);
}

.detail-modal-topbar small {
  color: #8ea6b3;
  font-weight: 700;
}

.detail-modal-topbar strong {
  display: block;
  margin-top: 4px;
  font-size: 20px;
  color: #eef7ff;
}

.detail-modal-close {
  flex: 0 0 auto;
}

.detail-modal-shell .detail-panel {
  margin-top: 0;
  box-shadow: 0 22px 48px rgba(5, 13, 18, 0.34);
}

.detail-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
  min-width: 0;
}

.detail-meta-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 14px;
}

.detail-meta-grid article,
.detail-link,
.timeline-item,
.attempt-item {
  border-radius: 16px;
  border: 1px solid rgba(55, 72, 86, 0.84);
  background: linear-gradient(180deg, rgba(19, 28, 36, 0.96), rgba(15, 23, 30, 0.98));
  padding: 14px;
}

.detail-meta-grid article strong {
  display: block;
  margin-top: 8px;
}

.detail-link {
  margin-bottom: 14px;
  color: #d9e8f1;
  font-weight: 700;
}

.detail-sections {
  display: grid;
  gap: 14px;
  grid-template-columns: 1.35fr 1fr;
}

.detail-section-wide {
  grid-column: 1 / -1;
}

.detail-sections section {
  border: 1px solid rgba(55, 72, 86, 0.84);
  border-radius: 18px;
  padding: 16px;
  background: rgba(12, 19, 25, 0.96);
}

.detail-sections section h4 {
  margin: 0 0 14px;
  font-size: 15px;
}

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

.detail-section-head small {
  color: #8ea6b3;
  font-weight: 700;
}

.detail-section-head h4 {
  margin: 4px 0 0;
}

.detail-section-head p {
  margin: 0;
  max-width: 360px;
  color: #90a7b4;
}

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

.detail-journey-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(55, 72, 86, 0.84);
  background: linear-gradient(180deg, rgba(18, 27, 34, 0.98), rgba(13, 21, 28, 0.98));
}

.detail-journey-topline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-journey-index {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(97, 242, 163, 0.12);
  border: 1px solid rgba(97, 242, 163, 0.26);
  color: #bdebd1;
  font-size: 11px;
  font-weight: 800;
}

.detail-journey-topline small {
  color: #8ea6b3;
  font-weight: 700;
}

.detail-journey-card strong {
  color: #eef7ff;
  line-height: 1.35;
}

.detail-journey-card p {
  margin: 0;
  color: #92a9b5;
}

.detail-journey-copy {
  display: grid;
  gap: 6px;
  margin-top: 4px;
}

.detail-journey-copy span {
  color: #9fb5c0;
  font-size: 12px;
  font-weight: 700;
}

.detail-journey-transfer {
  padding-top: 8px;
  border-top: 1px solid rgba(69, 88, 102, 0.45);
  color: #d5e7ef;
}

.detail-journey-card.is-current {
  border-color: rgba(97, 242, 163, 0.42);
  box-shadow: 0 14px 24px rgba(6, 18, 13, 0.18);
}

.detail-journey-card.is-complete {
  background: linear-gradient(180deg, rgba(17, 35, 27, 0.98), rgba(12, 26, 21, 0.98));
  border-color: rgba(97, 242, 163, 0.36);
}

.detail-journey-card.is-pending {
  opacity: 0.76;
}

.triage-experience-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.triage-toggle-group {
  display: grid;
  gap: 8px;
}

.triage-toggle-group span {
  color: #8ea6b3;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.triage-segmented-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 16px;
  border: 1px solid rgba(55, 72, 86, 0.84);
  background: rgba(15, 22, 28, 0.92);
}

.triage-segmented-control button {
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #9eb3bf;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 14px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.triage-segmented-control button.is-active {
  background: linear-gradient(135deg, rgba(97, 242, 163, 0.18), rgba(176, 184, 179, 0.1));
  color: #eef7ff;
  box-shadow: inset 0 0 0 1px rgba(97, 242, 163, 0.2);
}

.triage-journey-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.triage-mindmap {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(240px, 0.9fr) repeat(3, minmax(0, 1fr));
  align-items: start;
}

.triage-mindmap-center,
.triage-mindmap-branch {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(55, 72, 86, 0.84);
  padding: 18px;
  background: linear-gradient(180deg, rgba(19, 28, 36, 0.96), rgba(14, 21, 27, 0.98));
}

.triage-mindmap-center {
  min-height: 100%;
  display: grid;
  align-content: center;
  gap: 8px;
  background:
    radial-gradient(circle at top center, rgba(97, 242, 163, 0.12), transparent 46%),
    linear-gradient(180deg, rgba(19, 28, 36, 0.96), rgba(14, 21, 27, 0.98));
}

.triage-mindmap-center small,
.triage-mindmap-branch small {
  color: #8ea6b3;
  font-weight: 700;
}

.triage-mindmap-center strong,
.triage-mindmap-branch strong {
  color: #eef7ff;
}

.triage-mindmap-center p {
  margin: 0;
  color: #9db2be;
}

.triage-mindmap-branch::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 32px;
  width: 18px;
  height: 2px;
  background: rgba(97, 242, 163, 0.46);
}

.triage-mindmap-branch.branch-blue::before {
  background: rgba(108, 170, 255, 0.55);
}

.triage-mindmap-branch.branch-green::before {
  background: rgba(97, 242, 163, 0.55);
}

.triage-mindmap-branch.branch-amber::before {
  background: rgba(235, 186, 98, 0.55);
}

.triage-mindmap-branch.branch-red::before {
  background: rgba(255, 151, 177, 0.5);
}

.guided-action-layout {
  display: grid;
  gap: 14px;
}

.guided-action-steps {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.guided-action-steps article {
  border-radius: 16px;
  border: 1px solid rgba(55, 72, 86, 0.84);
  background: linear-gradient(180deg, rgba(18, 28, 35, 0.96), rgba(12, 21, 27, 0.98));
  padding: 14px;
}

.guided-action-steps small {
  color: #8ea6b3;
  font-weight: 700;
}

.guided-action-steps strong {
  display: block;
  margin: 6px 0 8px;
  color: #eef7ff;
}

.guided-action-steps p {
  margin: 0;
  color: #93a8b4;
}

.guided-action-form {
  border-radius: 18px;
  border: 1px solid rgba(55, 72, 86, 0.84);
  background: rgba(11, 19, 24, 0.7);
  padding: 14px;
}

@media (max-width: 1180px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

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

  .workflow-panel-head,
  .detail-head,
  .overview-head,
  .detail-section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .workflow-panel-head p,
  .detail-head p,
  .detail-section-head p,
  .queue-kanban-headline p,
  .work-section .workflow-panel-head p {
    max-width: none;
  }

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

  .detail-sections,
  .overview-summary-grid,
  .overview-flow-body {
    grid-template-columns: 1fr;
  }

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

  .workflow-toolbar > *,
  .toolbar > * {
    flex: 1 1 220px;
  }

  .triage-mindmap {
    grid-template-columns: 1fr;
  }

  .triage-mindmap-branch::before {
    display: none;
  }

  .overview-map-layout,
  .overview-logistic-map,
  .overview-map-summary-grid {
    grid-template-columns: 1fr;
  }

  .overview-logistic-stage::before,
  .overview-logistic-stage::after {
    display: none;
  }
}

.triage-step-card {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(55, 72, 86, 0.84);
  background: linear-gradient(180deg, rgba(19, 28, 36, 0.96), rgba(14, 21, 27, 0.98));
  padding: 16px;
  overflow: hidden;
}

.triage-step-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, rgba(97, 242, 163, 0.85), rgba(176, 184, 179, 0.2));
}

.triage-step-card small {
  color: #8ea6b3;
  font-weight: 700;
}

.triage-step-card > strong {
  display: block;
  margin: 8px 0 14px;
  font-size: 16px;
  color: #eef7ff;
}

.triage-step-card[class*="is-current-true"] {
  border-color: rgba(97, 242, 163, 0.45);
  box-shadow: 0 16px 26px rgba(6, 18, 13, 0.28);
}

.triage-step-list {
  display: grid;
  gap: 8px;
}

.triage-step-row {
  display: grid;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(69, 88, 102, 0.55);
}

.triage-step-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.triage-step-row span {
  color: #8ea6b3;
  font-size: 12px;
  font-weight: 700;
}

.triage-step-row strong {
  color: #e8f5ff;
  font-size: 14px;
  line-height: 1.4;
}

.triage-step-empty {
  margin: 0;
  color: #8ea6b3;
}

.detail-copy {
  display: grid;
  gap: 8px;
}

.detail-copy strong {
  color: #e8f5ff;
}

.workflow-gate-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.workflow-gate-item {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(83, 108, 122, 0.42);
  background: rgba(16, 28, 36, 0.72);
}

.workflow-gate-item strong {
  color: #e8f5ff;
  font-size: 14px;
}

.workflow-gate-item span {
  color: #8ea6b3;
  font-size: 12px;
  font-weight: 700;
}

.workflow-gate-item.tone-ok {
  border-color: rgba(99, 216, 151, 0.42);
}

.workflow-gate-item.tone-warn {
  border-color: rgba(242, 184, 86, 0.46);
}

.workflow-gate-item.tone-bad {
  border-color: rgba(255, 119, 145, 0.42);
  background: rgba(72, 22, 35, 0.42);
}

.workflow-gate-item.tone-neutral {
  opacity: 0.78;
}

.timeline-list,
.attempt-list,
.action-stack,
.action-split {
  display: grid;
  gap: 10px;
}

.timeline-item strong,
.attempt-item strong {
  display: block;
  margin-bottom: 6px;
}

.timeline-item small,
.attempt-item small,
.attempt-item span {
  color: #90a7b4;
  display: block;
}

.attempt-item p {
  margin: 10px 0 0;
  color: #dce8f0;
}

.empty-state-panel {
  text-align: center;
  min-height: 240px;
  display: grid;
  place-items: center;
}

.loading-copy {
  font-weight: 700;
}

.cadastro-stack {
  gap: 14px;
}

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

.cadastro-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

.cadastro-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cadastro-panel-head h3 {
  margin: 0;
  font-size: 16px;
}

.cadastro-panel-head p {
  margin: 6px 0 0;
  line-height: 1.45;
}

.cadastro-panel-dash {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(161, 175, 167, 0.38);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(173, 189, 180, 0.88);
  font-size: 18px;
}

.cadastro-primary-btn {
  width: 100%;
  border: 0;
  min-height: 40px;
  border-radius: 14px;
  font-weight: 700;
}

.cadastro-list {
  display: grid;
  gap: 10px;
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
}

.cadastro-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(53, 74, 63, 0.18);
  background: rgba(255, 255, 255, 0.04);
}

.cadastro-item-main {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.cadastro-item-main strong {
  font-size: 15px;
  line-height: 1.25;
}

.cadastro-item-main p,
.cadastro-item-main small {
  margin: 0;
  line-height: 1.4;
}

.cadastro-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cadastro-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(129, 153, 139, 0.18);
  color: #dce9e1;
  font-size: 12px;
  font-weight: 700;
}

.cadastro-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.cadastro-item-actions.single {
  align-self: stretch;
}

.cadastro-icon-btn {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

.cadastro-icon-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.cadastro-icon-btn svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cadastro-icon-btn.warning {
  background: linear-gradient(180deg, #f0b145 0%, #d89a33 100%);
  color: #fffef7;
  box-shadow: 0 10px 18px rgba(240, 177, 69, 0.22);
}

.cadastro-icon-btn.danger {
  background: linear-gradient(180deg, #e27686 0%, #d65a6d 100%);
  color: #fff6f8;
  box-shadow: 0 10px 18px rgba(214, 90, 109, 0.2);
}

.cadastro-user-item {
  align-items: flex-start;
}

.cadastro-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 84;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(7, 14, 18, 0.46);
  backdrop-filter: blur(10px);
}

.cadastro-modal-shell {
  width: min(540px, calc(100vw - 32px));
  border-radius: 24px;
  border: 1px solid rgba(63, 82, 72, 0.32);
  background: linear-gradient(180deg, rgba(14, 24, 20, 0.98), rgba(12, 20, 18, 0.98));
  box-shadow: 0 30px 60px rgba(5, 13, 11, 0.32);
  overflow: hidden;
}

.cadastro-modal-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(78, 98, 87, 0.2);
}

.cadastro-modal-kicker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.cadastro-modal-kicker-row small {
  color: #8ba293;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cadastro-modal-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(66, 124, 176, 0.28), rgba(49, 98, 145, 0.36));
  color: #d7edff;
  font-size: 12px;
  font-weight: 800;
}

.cadastro-modal-topbar strong {
  display: block;
  color: #edf6ef;
  font-size: 24px;
  line-height: 1.2;
}

.cadastro-modal-close {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 14px;
  font-size: 26px;
  line-height: 1;
}

.cadastro-modal-form {
  display: grid;
  gap: 14px;
  padding: 20px;
}

.cadastro-modal-field {
  display: grid;
  gap: 8px;
}

.cadastro-modal-field span {
  color: #d9e9df;
  font-size: 13px;
  font-weight: 800;
}

.cadastro-modal-helper-row {
  display: grid;
  gap: 10px;
}

.cadastro-modal-toggle-btn {
  justify-self: flex-start;
  min-height: 42px;
  border-radius: 14px;
}

.cadastro-modal-helper-copy,
.cadastro-modal-note {
  margin: 0;
  color: #8ea6b3;
  line-height: 1.5;
  font-size: 13px;
}

.cadastro-modal-new-gestor {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(90, 105, 114, 0.28);
  background: rgba(255, 255, 255, 0.05);
}

.cadastro-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 4px;
}

@media (max-width: 1320px) {
  .cadastro-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .topbar h2 {
    font-size: 30px;
  }

  .workflow-panel,
  .overview-kanban-shell,
  .overview-flow-shell,
  .detail-panel,
  .insight-panel,
  .workflow-alerts,
  .overview-hero-panel,
  .overview-stage-panel {
    padding: 14px;
  }

  .workflow-card-head,
  .workflow-card-head-left,
  .workflow-card-meta,
  .workflow-card-foot,
  .detail-section-head {
    align-items: flex-start;
  }

  .detail-meta-grid,
  .detail-journey-grid,
  .overview-map-summary-grid,
  .overview-stage-card-grid {
    grid-template-columns: 1fr;
  }

  .workflow-toolbar > *,
  .toolbar > * {
    flex: 1 1 100%;
  }

  .filter-field {
    min-width: 0;
    width: 100%;
  }

  .system-table {
    min-width: 0;
  }

  .cadastro-grid {
    grid-template-columns: 1fr;
  }

  .cadastro-item {
    align-items: flex-start;
  }

  .cadastro-modal-shell {
    width: min(100vw - 24px, 540px);
  }
}

body[data-theme="light"] {
  background:
    radial-gradient(circle at top left, rgba(97, 242, 163, 0.12), transparent 28%),
    radial-gradient(circle at bottom right, rgba(174, 181, 177, 0.18), transparent 34%),
    linear-gradient(180deg, #f7faf7 0%, #edf2ee 100%);
  color: #33433b;
}

body[data-theme="light"] .sidebar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(243, 247, 243, 0.96) 100%);
  border-color: rgba(181, 194, 185, 0.52);
  box-shadow:
    0 18px 36px rgba(145, 156, 149, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}

body[data-theme="light"] .sidebar::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), transparent 22%, transparent 84%, rgba(133, 147, 140, 0.06)),
    radial-gradient(circle at top, rgba(97, 242, 163, 0.16), transparent 40%);
}

body[data-theme="light"] .logo {
  background:
    radial-gradient(circle at 18% 50%, rgba(92, 215, 154, 0.14), transparent 22%),
    linear-gradient(135deg, #eef7f1 0%, #dff3e8 58%, #d4ebe0 100%);
  color: #4f6358;
  border-color: rgba(150, 182, 164, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 12px 24px rgba(130, 176, 153, 0.18);
}

body[data-theme="light"] .logo:hover {
  background:
    linear-gradient(135deg, #f3fbf6 0%, #e5f7ed 58%, #d7f1e4 100%);
}

body[data-theme="light"] .logo-mark {
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.82), transparent 46%),
    linear-gradient(135deg, rgba(233, 245, 238, 0.98) 0%, rgba(214, 235, 223, 0.98) 100%);
  border-color: rgba(152, 187, 168, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 10px 18px rgba(130, 176, 153, 0.18);
}

body[data-theme="light"] .logo-mark::before {
  background:
    linear-gradient(
      115deg,
      transparent 32%,
      rgba(120, 207, 164, 0.04) 42%,
      rgba(99, 214, 151, 0.88) 49%,
      rgba(129, 168, 233, 0.72) 52%,
      rgba(197, 207, 199, 0.14) 56%,
      transparent 66%
    ) 140% 0 / 220% 100% no-repeat,
    linear-gradient(135deg, rgba(132, 174, 149, 0.16), rgba(120, 207, 164, 0.18), rgba(197, 207, 199, 0.14)) 0 0 / 100% 100% no-repeat;
  opacity: 0.88;
}

body[data-theme="light"] .logo-mark::after {
  background: radial-gradient(circle at 35% 35%, rgba(111, 240, 164, 0.12), transparent 62%);
}

body[data-theme="light"] .logo-mark svg {
  filter:
    brightness(1.02)
    saturate(1.04)
    contrast(1.04)
    drop-shadow(0 0 8px rgba(120, 195, 152, 0.16))
    drop-shadow(0 0 5px rgba(167, 175, 170, 0.14));
}

body[data-theme="light"] .logo-text {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.82);
}

@keyframes logo-border-sweep {
  0% {
    background-position:
      140% 0,
      0 0;
    opacity: 0.92;
  }
  100% {
    background-position:
      -140% 0,
      0 0;
    opacity: 0.92;
  }
}

@keyframes account-rail-pulse {
  0%,
  100% {
    opacity: 0.56;
    transform: scale(0.985);
    filter: drop-shadow(0 0 8px rgba(111, 240, 164, 0.14));
  }
  50% {
    opacity: 0.92;
    transform: scale(1);
    filter: drop-shadow(0 0 14px rgba(111, 240, 164, 0.24));
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-mark::before,
  .account-card::before {
    animation: none;
  }
}

body[data-theme="light"] .menu button {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(243, 247, 243, 0.94));
  border-color: rgba(192, 204, 197, 0.56);
  color: #44584d;
}

body[data-theme="light"] .menu button::before {
  background: linear-gradient(90deg, rgba(97, 242, 163, 0.1), transparent 45%);
}

body[data-theme="light"] .menu button:hover {
  background: linear-gradient(180deg, rgba(246, 251, 247, 0.98), rgba(235, 245, 239, 0.98));
  border-color: rgba(151, 194, 169, 0.58);
  color: #31443a;
  box-shadow: 0 12px 22px rgba(127, 171, 147, 0.12);
}

body[data-theme="light"] .menu button.active {
  background:
    linear-gradient(180deg, #e4f8ec 0%, #d6f3e2 100%);
  border-color: rgba(113, 192, 151, 0.58);
  color: #2f463b;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 12px 22px rgba(112, 176, 143, 0.18),
    0 0 0 1px rgba(97, 242, 163, 0.14);
}

body[data-theme="light"] .menu-icon {
  background: linear-gradient(180deg, rgba(250, 252, 250, 0.98), rgba(239, 244, 240, 0.94));
  border-color: rgba(191, 204, 197, 0.72);
  color: #7f9186;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

body[data-theme="light"] .menu button.active .menu-icon {
  border-color: rgba(114, 196, 154, 0.75);
  color: #ffffff;
  background: linear-gradient(135deg, #74e7ae, #57c58c);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.56) inset,
    0 0 18px rgba(97, 242, 163, 0.22);
}

body[data-theme="light"] .account-block {
  border-top-color: rgba(188, 201, 193, 0.64);
}

body[data-theme="light"] .account-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(242, 247, 243, 0.94));
  border-color: rgba(191, 204, 196, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    0 12px 24px rgba(140, 160, 148, 0.1);
}

body[data-theme="light"] .account-card::before {
  background: linear-gradient(135deg, rgba(118, 214, 156, 0.42), rgba(153, 184, 255, 0.2), rgba(118, 214, 156, 0.14));
}

body[data-theme="light"] .account-card:hover,
body[data-theme="light"] .account-card.is-open {
  border-color: rgba(132, 188, 153, 0.66);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(233, 246, 238, 0.98));
}

body[data-theme="light"] .account-label {
  color: rgba(96, 113, 102, 0.7);
}

body[data-theme="light"] .account-meta strong {
  color: #31453a;
}

body[data-theme="light"] .account-popover {
  background: linear-gradient(180deg, rgba(254, 255, 254, 0.99), rgba(244, 248, 244, 0.99));
  border-color: rgba(190, 203, 195, 0.72);
  box-shadow:
    0 18px 34px rgba(137, 156, 144, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

body[data-theme="light"] .account-popover::after {
  display: none;
}

body[data-theme="light"] .account-popover-media {
  background: linear-gradient(180deg, #eef7f1 0%, #e4eee7 100%);
}

body[data-theme="light"] .account-popover-media-copy strong,
body[data-theme="light"] .account-popover-title-row strong {
  color: #31453a;
}

body[data-theme="light"] .account-popover-edit {
  border-color: rgba(201, 211, 204, 0.9);
  background: rgba(247, 250, 248, 0.98);
  color: #69d9a0;
}

body[data-theme="light"] .account-popover-media-copy span,
body[data-theme="light"] .account-popover-identity span,
body[data-theme="light"] .account-popover-meta-grid strong {
  color: #687b70;
}

body[data-theme="light"] .account-popover-photo {
  background: linear-gradient(180deg, #ffffff 0%, #f3f7f4 100%);
}

body[data-theme="light"] .account-popover-meta-grid small {
  color: #56856a;
}

body[data-theme="light"] .account-popover-mini {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(198, 209, 202, 0.88);
  color: #3c5146;
}

body[data-theme="light"] .account-popover-mini.muted {
  color: #9aa89f;
  background: rgba(246, 249, 247, 0.92);
}

body[data-theme="light"] .ghost-btn {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(192, 204, 197, 0.76);
  color: #40544a;
}

body[data-theme="light"] .ghost-btn:hover {
  background: rgba(245, 251, 247, 0.98);
  border-color: rgba(135, 190, 155, 0.82);
  color: #31443a;
  box-shadow: 0 10px 18px rgba(122, 173, 144, 0.12);
}

body[data-theme="light"] .sidebar-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(242, 247, 243, 0.98));
  border-color: rgba(192, 204, 197, 0.74);
  color: #405449;
}

body[data-theme="light"] .sidebar-btn.danger {
  background: linear-gradient(180deg, rgba(255, 242, 245, 0.98), rgba(252, 234, 238, 0.98));
  border-color: rgba(229, 173, 185, 0.78);
  color: #9a4258;
}

body[data-theme="light"] .content {
  background:
    radial-gradient(circle at top right, rgba(97, 242, 163, 0.08), transparent 26%),
    linear-gradient(180deg, rgba(252, 254, 252, 0.98) 0%, rgba(244, 248, 244, 0.98) 100%);
  border-color: rgba(189, 202, 194, 0.66);
  box-shadow: 0 18px 36px rgba(138, 158, 146, 0.14);
}

body[data-theme="light"] .content::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), transparent 18%, transparent 82%, rgba(122, 155, 136, 0.06));
}

body[data-theme="light"] .breadcrumb,
body[data-theme="light"] .overview-meta small,
body[data-theme="light"] .overview-date-filter label,
body[data-theme="light"] .hero-badge,
body[data-theme="light"] .hero-stat small,
body[data-theme="light"] .analytics-head p,
body[data-theme="light"] .kpi-card p,
body[data-theme="light"] .card p,
body[data-theme="light"] .insight-row span {
  color: #6c7d73;
}

body[data-theme="light"] .topbar h2,
body[data-theme="light"] .card strong,
body[data-theme="light"] .kpi-card strong,
body[data-theme="light"] .hero-stat strong,
body[data-theme="light"] .workflow-kpi-card strong,
body[data-theme="light"] .stage-summary-card strong,
body[data-theme="light"] .insight-row strong {
  color: #32453b;
}

body[data-theme="light"] .card,
body[data-theme="light"] .kpi-card,
body[data-theme="light"] .analytics-card,
body[data-theme="light"] .insight-card,
body[data-theme="light"] .workflow-kpi-card,
body[data-theme="light"] .stage-summary-card,
body[data-theme="light"] .workflow-column,
body[data-theme="light"] .workflow-card,
body[data-theme="light"] .hero-stat,
body[data-theme="light"] .insight-row,
body[data-theme="light"] .empty-state-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(242, 247, 243, 0.97));
  border-color: rgba(192, 204, 197, 0.66);
  color: #33463b;
  box-shadow:
    0 12px 24px rgba(139, 157, 146, 0.1),
    0 0 0 1px rgba(97, 242, 163, 0.04);
}

body[data-theme="light"] .workflow-board,
body[data-theme="light"] .screen-panel,
body[data-theme="light"] .screen-hero,
body[data-theme="light"] .screen-stack,
body[data-theme="light"] .screen-workspace {
  background: transparent;
  border: 0;
  box-shadow: none;
}

body[data-theme="light"] .workflow-column {
  background:
    linear-gradient(180deg, rgba(251, 253, 251, 0.98), rgba(243, 248, 244, 0.99));
}

body[data-theme="light"] .workflow-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(246, 250, 247, 1));
  background-color: #ffffff;
}

body[data-theme="light"] .workflow-card:hover,
body[data-theme="light"] .workflow-card.active {
  background: linear-gradient(180deg, rgba(236, 249, 241, 0.98), rgba(225, 243, 232, 0.98));
  border-color: rgba(120, 193, 154, 0.48);
}

body[data-theme="light"] .table-wrap,
body[data-theme="light"] .status-board,
body[data-theme="light"] .workflow-panel,
body[data-theme="light"] .table-section-flat,
body[data-theme="light"] .screen-table-wrap,
body[data-theme="light"] .conc-column,
body[data-theme="light"] .tx,
body[data-theme="light"] .workflow-alerts p,
body[data-theme="light"] .workflow-alert-item,
body[data-theme="light"] .detail-meta-grid article,
body[data-theme="light"] .detail-link,
body[data-theme="light"] .timeline-item,
body[data-theme="light"] .attempt-item,
body[data-theme="light"] .detail-journey-card,
body[data-theme="light"] .detail-sections section,
body[data-theme="light"] .workflow-column-head,
body[data-theme="light"] .board-empty {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 247, 243, 0.98));
  border-color: rgba(192, 204, 197, 0.66);
  color: #33463b;
  box-shadow: 0 12px 24px rgba(139, 157, 146, 0.1);
}

body[data-theme="light"] .workflow-column-head {
  background: linear-gradient(135deg, rgba(227, 245, 235, 0.78), rgba(248, 251, 248, 0.94));
  border-bottom-color: rgba(192, 204, 197, 0.66);
}

body[data-theme="light"] .triage-step-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 247, 243, 0.98));
  border-color: rgba(192, 204, 197, 0.66);
  box-shadow: 0 12px 24px rgba(139, 157, 146, 0.08);
}

body[data-theme="light"] .triage-segmented-control,
body[data-theme="light"] .guided-action-form {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(192, 204, 197, 0.66);
}

body[data-theme="light"] .triage-segmented-control button {
  color: #6c7d73;
}

body[data-theme="light"] .triage-segmented-control button.is-active {
  color: #32453b;
  background: linear-gradient(135deg, rgba(97, 242, 163, 0.16), rgba(220, 232, 223, 0.9));
  box-shadow: inset 0 0 0 1px rgba(120, 193, 154, 0.28);
}

body[data-theme="light"] .triage-mindmap-center,
body[data-theme="light"] .triage-mindmap-branch,
body[data-theme="light"] .guided-action-steps article {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 247, 243, 0.98));
  border-color: rgba(192, 204, 197, 0.66);
  box-shadow: 0 12px 24px rgba(139, 157, 146, 0.08);
}

body[data-theme="light"] .triage-step-card > strong,
body[data-theme="light"] .triage-step-row strong,
body[data-theme="light"] .triage-mindmap-center strong,
body[data-theme="light"] .triage-mindmap-branch strong,
body[data-theme="light"] .detail-journey-card strong,
body[data-theme="light"] .guided-action-steps strong {
  color: #32453b;
}

body[data-theme="light"] .triage-step-card small,
body[data-theme="light"] .triage-step-row span,
body[data-theme="light"] .triage-step-empty,
body[data-theme="light"] .detail-section-head small,
body[data-theme="light"] .detail-section-head p,
body[data-theme="light"] .triage-toggle-group span,
body[data-theme="light"] .triage-mindmap-center small,
body[data-theme="light"] .triage-mindmap-branch small,
body[data-theme="light"] .triage-mindmap-center p,
body[data-theme="light"] .detail-journey-topline small,
body[data-theme="light"] .detail-journey-card p,
body[data-theme="light"] .detail-journey-copy span,
body[data-theme="light"] .detail-journey-transfer,
body[data-theme="light"] .guided-action-steps small,
body[data-theme="light"] .guided-action-steps p {
  color: #6c7d73;
}

body[data-theme="light"] .detail-journey-index {
  background: rgba(97, 242, 163, 0.12);
  border-color: rgba(120, 193, 154, 0.3);
  color: #4b7b61;
}

body[data-theme="light"] .detail-journey-card.is-complete {
  background: linear-gradient(180deg, rgba(245, 252, 247, 0.98), rgba(236, 247, 240, 0.98));
  border-color: rgba(126, 203, 162, 0.72);
}

body[data-theme="light"] .overview-dropzone.is-drag-over {
  background:
    radial-gradient(circle at top center, rgba(97, 242, 163, 0.12), transparent 55%),
    rgba(231, 246, 236, 0.76);
  box-shadow: inset 0 0 0 1px rgba(120, 193, 154, 0.35);
}

body[data-theme="light"] thead th,
body[data-theme="light"] .table-section-flat,
body[data-theme="light"] .screen-table-wrap,
body[data-theme="light"] .system-table th {
  background: #edf4ef;
}

body[data-theme="light"] th,
body[data-theme="light"] td,
body[data-theme="light"] .system-table th,
body[data-theme="light"] .system-table td {
  border-color: rgba(201, 211, 205, 0.78);
}

body[data-theme="light"] th,
body[data-theme="light"] .system-table th {
  color: #5d7368;
}

body[data-theme="light"] td,
body[data-theme="light"] .system-table td,
body[data-theme="light"] .workflow-card-meta,
body[data-theme="light"] .workflow-card p,
body[data-theme="light"] .attempt-item span,
body[data-theme="light"] .attempt-item small,
body[data-theme="light"] .timeline-item small,
body[data-theme="light"] .empty-row,
body[data-theme="light"] .detail-copy p,
body[data-theme="light"] .empty-copy,
body[data-theme="light"] .loading-copy,
body[data-theme="light"] .board-empty p,
body[data-theme="light"] .workflow-panel-head p,
body[data-theme="light"] .workflow-column-head p,
body[data-theme="light"] .workflow-kpi-card p,
body[data-theme="light"] .detail-head p,
body[data-theme="light"] .action-stack p {
  color: #6c7d73;
}

body[data-theme="light"] .workflow-card strong,
body[data-theme="light"] .detail-copy strong,
body[data-theme="light"] .board-empty strong,
body[data-theme="light"] .detail-link,
body[data-theme="light"] .table-link,
body[data-theme="light"] .workflow-panel-head h3,
body[data-theme="light"] .detail-head h3,
body[data-theme="light"] .workflow-column-head h3,
body[data-theme="light"] .screen h3,
body[data-theme="light"] .workflow-card h4,
body[data-theme="light"] .detail-meta-grid article strong {
  color: #32453b;
}

body[data-theme="light"] .hero-badge,
body[data-theme="light"] .toggle-filter,
body[data-theme="light"] .workflow-alert-pill {
  background: rgba(243, 248, 244, 0.98);
  border-color: rgba(190, 203, 195, 0.76);
  color: #5f7568;
}

body[data-theme="light"] .notification-list p {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 247, 243, 0.98)),
    radial-gradient(circle at top right, rgba(97, 242, 163, 0.12), transparent 52%);
  border-color: rgba(190, 203, 195, 0.76);
  box-shadow: 0 12px 24px rgba(139, 157, 146, 0.08);
}

body[data-theme="light"] .workflow-alert-summary article {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 247, 243, 0.98));
  border-color: rgba(190, 203, 195, 0.76);
  box-shadow: 0 12px 24px rgba(139, 157, 146, 0.08);
}

body[data-theme="light"] .workflow-alert-summary small,
body[data-theme="light"] .workflow-alert-copy small {
  color: #6e8075;
}

body[data-theme="light"] .workflow-alert-summary strong,
body[data-theme="light"] .workflow-alert-copy strong {
  color: #32453b;
}

body[data-theme="light"] .workflow-alert-copy strong {
  color: #32453b;
}

body[data-theme="light"] .workflow-alert-item p {
  color: #66796e;
}

body[data-theme="light"] .overview-hero-panel {
  background:
    radial-gradient(circle at top left, rgba(97, 242, 163, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 247, 243, 0.98));
}

body[data-theme="light"] .overview-hero-copy-card {
  background:
    radial-gradient(circle at top left, rgba(97, 242, 163, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 247, 242, 0.98));
}

body[data-theme="light"] .overview-status-chip,
body[data-theme="light"] .overview-hero-primary-card,
body[data-theme="light"] .overview-priority-banner,
body[data-theme="light"] .overview-focus-priority {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(193, 206, 198, 0.74);
  box-shadow: 0 10px 20px rgba(139, 157, 146, 0.06);
}

body[data-theme="light"] .overview-status-chip.tone-error {
  border-color: rgba(200, 45, 45, 0.52);
  background: linear-gradient(180deg, rgba(255, 116, 116, 0.98), rgba(228, 72, 72, 0.96));
  color: #101010;
}

body[data-theme="light"] .overview-focus-card {
  background: linear-gradient(180deg, rgba(245, 250, 246, 0.98), rgba(236, 245, 239, 0.98));
  border-color: rgba(178, 200, 186, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 12px 24px rgba(132, 175, 149, 0.12);
}

body[data-theme="light"] .overview-focus-note,
body[data-theme="light"] .overview-focus-label,
body[data-theme="light"] .workflow-alert-item p,
body[data-theme="light"] .workflow-alert-pill {
  color: #66796e;
}

body[data-theme="light"] .overview-hero-primary-label,
body[data-theme="light"] .overview-priority-copy small,
body[data-theme="light"] .overview-priority-context,
body[data-theme="light"] .overview-focus-priority span,
body[data-theme="light"] .overview-focus-priority small {
  color: #6f8378;
}

body[data-theme="light"] .overview-focus-value,
body[data-theme="light"] .overview-focus-stats strong {
  color: #32453b;
}

body[data-theme="light"] .overview-hero-primary-card strong,
body[data-theme="light"] .overview-priority-copy strong,
body[data-theme="light"] .overview-focus-priority strong,
body[data-theme="light"] .overview-hero-summary strong {
  color: #30453a;
}

body[data-theme="light"] .overview-hero-primary-card p,
body[data-theme="light"] .overview-priority-copy p {
  color: #66796e;
}

body[data-theme="light"] .overview-focus-stats article {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(194, 207, 199, 0.78);
}

body[data-theme="light"] .overview-focus-stats small {
  color: #71917e;
}

body[data-theme="light"] .overview-stage-tab,
body[data-theme="light"] .overview-toolbar,
body[data-theme="light"] .overview-stage-highlight,
body[data-theme="light"] .overview-stage-side-card,
body[data-theme="light"] .overview-stage-mini-item,
body[data-theme="light"] .overview-stage-snapshot {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(241, 247, 242, 0.98));
  border-color: rgba(193, 206, 198, 0.74);
  box-shadow: 0 12px 24px rgba(139, 157, 146, 0.08);
}

body[data-theme="light"] .overview-stage-tab:hover,
body[data-theme="light"] .overview-stage-mini-item:hover {
  border-color: rgba(112, 199, 151, 0.68);
  background: linear-gradient(180deg, rgba(244, 252, 247, 0.98), rgba(234, 245, 237, 0.98));
}

body[data-theme="light"] .overview-stage-tab small,
body[data-theme="light"] .overview-stage-tab span,
body[data-theme="light"] .overview-stage-snapshot small,
body[data-theme="light"] .overview-stage-snapshot span,
body[data-theme="light"] .overview-stage-highlight p,
body[data-theme="light"] .overview-stage-side-list span,
body[data-theme="light"] .overview-stage-mini-item span,
body[data-theme="light"] .overview-stage-mini-item small {
  color: #6f8378;
}

body[data-theme="light"] .overview-stage-tab strong,
body[data-theme="light"] .overview-stage-snapshot strong,
body[data-theme="light"] .overview-stage-highlight h4,
body[data-theme="light"] .overview-stage-highlight-stats strong,
body[data-theme="light"] .overview-stage-side-card h4,
body[data-theme="light"] .overview-stage-side-list strong,
body[data-theme="light"] .overview-stage-mini-item strong {
  color: #30453a;
}

body[data-theme="light"] .overview-stage-snapshot-meta,
body[data-theme="light"] .workflow-column-insights,
body[data-theme="light"] .overview-flow-alert span,
body[data-theme="light"] .overview-map-selector-item span,
body[data-theme="light"] .overview-map-selector-item small,
body[data-theme="light"] .overview-map-header p,
body[data-theme="light"] .overview-logistic-stage p,
body[data-theme="light"] .overview-logistic-stage-meta span,
body[data-theme="light"] .overview-logistic-stage-transfer,
body[data-theme="light"] .overview-map-summary-grid small,
body[data-theme="light"] .overview-map-summary-grid span,
body[data-theme="light"] .overview-map-empty p {
  color: #6f8378;
}

body[data-theme="light"] .overview-flow-alert,
body[data-theme="light"] .overview-map-selector,
body[data-theme="light"] .overview-map-canvas,
body[data-theme="light"] .overview-map-selector-item,
body[data-theme="light"] .overview-logistic-stage,
body[data-theme="light"] .overview-map-summary-grid article {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(241, 247, 242, 0.98));
  border-color: rgba(193, 206, 198, 0.74);
  box-shadow: 0 12px 24px rgba(139, 157, 146, 0.08);
}

body[data-theme="light"] .overview-flow-alert strong,
body[data-theme="light"] .overview-map-selector-item strong,
body[data-theme="light"] .overview-map-empty strong,
body[data-theme="light"] .overview-map-header h3,
body[data-theme="light"] .overview-logistic-stage strong,
body[data-theme="light"] .workflow-column-insights strong,
body[data-theme="light"] .workflow-card-event,
body[data-theme="light"] .overview-map-summary-grid strong {
  color: #30453a;
}

body[data-theme="light"] .workflow-card-event {
  background: rgba(244, 248, 245, 0.94);
  border-color: rgba(189, 205, 196, 0.78);
}

body[data-theme="light"] .workflow-card-event.is-finalized,
body[data-theme="light"] .overview-logistic-stage.is-complete {
  background: linear-gradient(180deg, rgba(245, 252, 247, 0.98), rgba(236, 247, 240, 0.98));
  border-color: rgba(126, 203, 162, 0.72);
}

body[data-theme="light"] .overview-logistic-stage::before {
  background: linear-gradient(180deg, rgba(112, 199, 151, 0.78), rgba(112, 199, 151, 0.18));
}

body[data-theme="light"] .overview-logistic-stage::after {
  background:
    linear-gradient(90deg, rgba(112, 199, 151, 0.72), rgba(112, 199, 151, 0.72)) left center / 8px 2px no-repeat,
    linear-gradient(45deg, transparent 44%, rgba(112, 199, 151, 0.72) 45%, rgba(112, 199, 151, 0.72) 55%, transparent 56%) right center / 8px 12px no-repeat;
}

body[data-theme="light"] .overview-logistic-stage-index {
  background: rgba(97, 242, 163, 0.12);
  border-color: rgba(120, 193, 154, 0.3);
  color: #4b7b61;
}

body[data-theme="light"] .deadline-pill {
  background: rgba(227, 245, 235, 0.92);
  border-color: rgba(178, 200, 186, 0.72);
  color: #4f725f;
}

body[data-theme="light"] .deadline-pill.is-late {
  background: rgba(255, 246, 229, 0.96);
  border-color: rgba(229, 189, 113, 0.6);
  color: #9a6f17;
}

body[data-theme="light"] .priority-pill,
body[data-theme="light"] .status-pill,
body[data-theme="light"] .deadline-pill,
body[data-theme="light"] .mini-tag {
  color: #1f2a23;
}

body[data-theme="light"] .overview-stage-tab.active {
  border-color: rgba(97, 203, 145, 0.78);
  background:
    linear-gradient(180deg, rgba(238, 250, 242, 0.98), rgba(227, 244, 233, 0.99)),
    linear-gradient(135deg, rgba(97, 242, 163, 0.1), transparent 54%);
  box-shadow:
    0 18px 30px rgba(129, 167, 144, 0.14),
    0 0 0 1px rgba(97, 242, 163, 0.08);
}

body[data-theme="light"] .overview-stage-tab.active small {
  color: #54a776;
}

body[data-theme="light"] .overview-stage-highlight-stats span {
  background: rgba(248, 252, 249, 0.94);
  border-color: rgba(192, 205, 198, 0.82);
  color: #6b8175;
}

body[data-theme="light"] .overview-stage-side-list div {
  border-top-color: rgba(205, 214, 208, 0.72);
}

body[data-theme="light"] .workflow-alert-dot {
  background: #63d79c;
  box-shadow: 0 0 0 6px rgba(97, 242, 163, 0.14);
}

body[data-theme="light"] .workflow-alert-copy strong {
  color: #355044;
}

body[data-theme="light"] .overview-layout-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(241, 247, 242, 0.98));
  border-color: rgba(193, 206, 198, 0.74);
  box-shadow: 0 12px 24px rgba(139, 157, 146, 0.08);
}

body[data-theme="light"] .overview-layout-panel.is-open {
  background:
    radial-gradient(circle at top right, rgba(97, 242, 163, 0.08), transparent 26%),
    linear-gradient(180deg, rgba(249, 253, 250, 0.99), rgba(239, 247, 241, 0.99));
}

body[data-theme="light"] .overview-layout-item {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(193, 206, 198, 0.74);
}

body[data-theme="light"] .overview-layout-copy strong {
  color: #30453a;
}

body[data-theme="light"] .overview-layout-copy span,
body[data-theme="light"] .overview-layout-note {
  color: #6f8378;
}

body[data-theme="light"] .overview-widget.is-customizable {
  background: rgba(111, 214, 160, 0.06);
  border-color: rgba(114, 196, 154, 0.34);
}

body[data-theme="light"] .overview-widget.is-customizable:hover {
  background: rgba(111, 214, 160, 0.09);
  border-color: rgba(114, 196, 154, 0.54);
}

body[data-theme="light"] .overview-widget.is-drag-over {
  box-shadow: 0 16px 26px rgba(139, 157, 146, 0.12);
}

body[data-theme="light"] .overview-widget-handle {
  color: #4f6d5e;
}

body[data-theme="light"] .overview-hero-copy-card {
  background:
    radial-gradient(circle at top left, rgba(97, 242, 163, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 247, 242, 0.98));
}

body[data-theme="light"] .overview-focus-widget {
  background: linear-gradient(180deg, rgba(244, 251, 246, 0.98), rgba(236, 245, 239, 0.99));
  border-color: rgba(114, 196, 154, 0.52);
  box-shadow: 0 12px 24px rgba(139, 157, 146, 0.08);
}

body[data-theme="light"] .overview-hero-summary article,
body[data-theme="light"] .overview-focus-stats article,
body[data-theme="light"] .overview-metric-topline span,
body[data-theme="light"] .insight-rank {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(194, 207, 199, 0.78);
}

body[data-theme="light"] .overview-hero-summary span,
body[data-theme="light"] .overview-metric-topline span,
body[data-theme="light"] .insight-rank {
  color: #6b8576;
}

body[data-theme="light"] .overview-hero-summary strong {
  color: #30453a;
}

body[data-theme="light"] .overview-stage-count-card p {
  color: #6f8378;
}

body[data-theme="light"] .workflow-card::before {
  background: linear-gradient(90deg, rgba(97, 203, 145, 0.82), rgba(97, 203, 145, 0));
}

body[data-theme="light"] .detail-modal-backdrop {
  background: rgba(223, 233, 226, 0.48);
}

body[data-theme="light"] .detail-modal-topbar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 247, 243, 0.98));
  border-color: rgba(193, 206, 198, 0.76);
  box-shadow: 0 18px 38px rgba(139, 157, 146, 0.16);
}

body[data-theme="light"] .detail-modal-topbar small {
  color: #6c7d73;
}

body[data-theme="light"] .detail-modal-topbar strong {
  color: #32453b;
}

body[data-theme="light"] .workflow-alerts.is-empty .workflow-alert-dot {
  background: #a7b6ad;
  box-shadow: 0 0 0 6px rgba(167, 182, 173, 0.14);
}

body[data-theme="light"] .upload-input,
body[data-theme="light"] .workflow-form textarea.upload-input,
body[data-theme="light"] .workflow-form select.upload-input,
body[data-theme="light"] .workflow-form input.upload-input {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(195, 207, 199, 0.84);
  color: #3a4f43;
}

body[data-theme="light"] .workflow-inline-note {
  border-color: rgba(154, 183, 167, 0.44);
  background: rgba(241, 248, 243, 0.92);
}

body[data-theme="light"] .workflow-inline-note strong {
  color: #31463d;
}

body[data-theme="light"] .workflow-inline-note p {
  color: #5d7568;
}

body[data-theme="light"] .workflow-inline-note.is-danger {
  border-color: rgba(236, 132, 132, 0.4);
  background: rgba(255, 235, 236, 0.96);
}

body[data-theme="light"] .workflow-inline-note.is-danger strong,
body[data-theme="light"] .workflow-inline-note.is-danger p {
  color: #3b3131;
}

body[data-theme="light"] .upload-input::placeholder,
body[data-theme="light"] .workflow-form textarea.upload-input::placeholder,
body[data-theme="light"] .workflow-form input.upload-input::placeholder {
  color: #8a9b91;
}

body[data-theme="light"] .workflow-form label,
body[data-theme="light"] .conc-select-all,
body[data-theme="light"] .tx-select,
body[data-theme="light"] .workflow-panel-head small,
body[data-theme="light"] .workflow-alerts p,
body[data-theme="light"] .stage-summary-card small,
body[data-theme="light"] .workflow-kpi-card small,
body[data-theme="light"] .workflow-column-head small,
body[data-theme="light"] .detail-head small,
body[data-theme="light"] .detail-meta-grid article small {
  color: #6c7d73;
}

body[data-theme="light"] .file-hint {
  color: #728478;
}

body[data-theme="light"] .workflow-gate-item {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(194, 208, 199, 0.82);
}

body[data-theme="light"] .workflow-gate-item strong {
  color: #385046;
}

body[data-theme="light"] .workflow-gate-item span {
  color: #73867b;
}

body[data-theme="light"] .workflow-gate-item.tone-bad {
  border-color: rgba(236, 132, 132, 0.42);
  background: rgba(255, 238, 239, 0.96);
}

body[data-theme="light"] .tx p,
body[data-theme="light"] .hero-stat small,
body[data-theme="light"] .insight-row span {
  color: #728478;
}

body[data-theme="light"] .selected-row td {
  background: #e4f6ec;
}

body[data-theme="light"] .table-link.active {
  color: #2d463a;
}

body[data-theme="light"] .primary-btn {
  background: linear-gradient(135deg, #7be5ad 0%, #58c38a 100%);
  color: #ffffff;
  box-shadow:
    0 12px 20px rgba(107, 185, 140, 0.22),
    0 0 18px rgba(97, 242, 163, 0.12);
}

body[data-theme="light"] .notification-list p {
  border-color: rgba(104, 129, 168, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 248, 252, 0.96)),
    radial-gradient(circle at top right, rgba(102, 145, 255, 0.12), transparent 52%);
  color: #425568;
  box-shadow: 0 16px 30px rgba(145, 170, 196, 0.18);
}

body[data-theme="light"] .toast-card {
  border-color: rgba(104, 129, 168, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 247, 251, 0.96)),
    radial-gradient(circle at top right, rgba(87, 132, 255, 0.12), transparent 50%);
  box-shadow: 0 20px 38px rgba(146, 171, 196, 0.22);
}

body[data-theme="light"] .toast-body strong {
  color: #21374b;
}

body[data-theme="light"] .toast-body p {
  color: #466075;
}

body[data-theme="light"] .toast-body small {
  color: #6f8799;
}

body[data-theme="light"] .toast-close {
  background: rgba(36, 61, 90, 0.08);
  color: rgba(38, 59, 82, 0.8);
}

body[data-theme="light"] .toast-close:hover {
  background: rgba(36, 61, 90, 0.14);
}

body[data-theme="light"] .cadastro-panel-dash {
  border-color: rgba(205, 214, 208, 0.82);
  background: rgba(252, 254, 252, 0.94);
  color: #b7c2bb;
}

body[data-theme="light"] .cadastro-item {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(243, 247, 243, 0.98));
  border-color: rgba(201, 211, 205, 0.82);
  box-shadow: 0 10px 22px rgba(142, 160, 148, 0.08);
}

body[data-theme="light"] .cadastro-item-main strong {
  color: #2f463b;
}

body[data-theme="light"] .cadastro-item-main p,
body[data-theme="light"] .cadastro-item-main small,
body[data-theme="light"] .cadastro-panel-head p {
  color: #6e8075;
}

body[data-theme="light"] .cadastro-chip {
  background: linear-gradient(180deg, rgba(126, 170, 143, 0.18), rgba(108, 153, 126, 0.22));
  color: #4f6759;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64);
}

body[data-theme="light"] .cadastro-modal-backdrop {
  background: rgba(223, 233, 226, 0.48);
}

body[data-theme="light"] .cadastro-modal-shell {
  border-color: rgba(193, 206, 198, 0.76);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 247, 243, 0.98));
  box-shadow: 0 18px 38px rgba(139, 157, 146, 0.16);
}

body[data-theme="light"] .cadastro-modal-topbar {
  border-bottom-color: rgba(193, 206, 198, 0.66);
}

body[data-theme="light"] .cadastro-modal-kicker-row small {
  color: #6c7d73;
}

body[data-theme="light"] .cadastro-modal-topbar strong {
  color: #32453b;
}

body[data-theme="light"] .cadastro-modal-field span {
  color: #46594f;
}

body[data-theme="light"] .cadastro-modal-helper-copy,
body[data-theme="light"] .cadastro-modal-note {
  color: #6e8075;
}

body[data-theme="light"] .cadastro-modal-new-gestor {
  border-color: rgba(201, 211, 205, 0.82);
  background: linear-gradient(180deg, rgba(250, 252, 250, 0.96), rgba(240, 245, 241, 0.98));
}

body[data-theme="light"] .flow-track,
body[data-theme="light"] .cumulative-svg {
  background: linear-gradient(180deg, #eef5f0, #dfe9e1);
  border-color: rgba(192, 204, 197, 0.72);
}

body[data-theme="light"] .cum-baseline {
  stroke: #aab8b0;
}

body[data-theme="light"] .dollar-label {
  fill: #6e8175;
}

body[data-theme="light"] .system-table th {
  background: #e8f0ea;
  color: #5d7368;
}

body[data-theme="light"] .system-table td {
  color: #23405b;
  background: #fdfefe;
}

body[data-theme="light"] .system-table tbody tr:nth-child(even) td {
  background: #f4f8fb;
}

@media (max-width: 1280px) {
  .app-shell {
    padding: 10px;
    gap: 10px;
    --sidebar-open-width: 220px;
  }

  .app-shell.sidebar-collapsed {
    --sidebar-closed-width: 88px;
  }

  .content {
    padding: 20px;
  }

  .topbar h2 {
    font-size: 32px;
  }

  .workflow-panel,
  .overview-kanban-shell,
  .overview-flow-shell,
  .overview-hero-panel,
  .overview-stage-panel,
  .workflow-alerts,
  .insight-panel {
    padding: 16px;
  }

  .workflow-panel-head h3,
  .detail-head h3 {
    font-size: 20px;
  }

  .overview-hero-copy h3 {
    font-size: 28px;
  }

  .overview-focus-value {
    font-size: 24px;
  }

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

  .overview-layout-item {
    align-items: flex-start;
  }

  .overview-insights-grid > :first-child {
    grid-column: 1 / -1;
  }

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

  .workflow-column-head h3 {
    font-size: 30px;
  }

  .work-section .workflow-panel-head {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1080px) {
  .app-shell {
    height: 100dvh;
    grid-template-columns: 88px 1fr;
    overflow: hidden;
    padding: 10px;
    gap: 10px;
    position: relative;
  }

  .sidebar-resizer {
    display: none;
  }

  .sidebar {
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    width: auto;
    max-width: none;
    z-index: auto;
    border-radius: 24px;
    transform: none;
    transition: padding 0.26s cubic-bezier(0.24, 0.9, 0.34, 1), box-shadow 0.24s ease;
    padding: 14px 10px;
    min-width: 0;
  }

  .app-shell.mobile-sidebar-open .sidebar {
    transform: none;
  }

  .mobile-menu-btn {
    display: none;
  }

  .sidebar-overlay {
    display: none;
  }

  .app-shell.mobile-sidebar-open .sidebar-overlay {
    opacity: 0;
    pointer-events: none;
  }

  .app-shell.sidebar-collapsed {
    grid-template-columns: 88px 1fr;
  }

  .logo {
    width: 100%;
    min-height: 56px;
    margin: 0 0 16px;
    padding: 0;
    justify-content: center;
    border-radius: 20px;
    gap: 0;
  }

  .logo-mark {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-radius: 14px;
  }

  .logo-mark svg {
    width: 26px;
    height: 26px;
  }

  .logo-text,
  .menu-label,
  .menu-text,
  .account-meta {
    opacity: 0;
    transform: translateX(-2px);
    pointer-events: none;
    max-width: 0;
    flex: 0 0 0;
  }

  .menu {
    align-items: center;
    gap: 10px;
    padding-right: 0;
    overflow: auto;
  }

  .menu button {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 10px 8px;
    justify-content: center;
    border-radius: 14px;
    gap: 0;
  }

  .menu-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    border-radius: 9px;
  }

  .menu button.active {
    background: linear-gradient(180deg, rgba(46, 161, 255, 0.26), rgba(36, 124, 211, 0.22));
    border-color: rgba(76, 177, 255, 0.28);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 18px rgba(43, 180, 255, 0.18);
  }

  .menu button.active .menu-icon {
    background: linear-gradient(180deg, rgba(64, 176, 255, 0.3), rgba(31, 118, 201, 0.26));
    border-color: rgba(124, 205, 255, 0.28);
    box-shadow: none;
  }

  .menu button:hover {
    box-shadow: none;
  }

  .content {
    border-radius: var(--radius-xl);
    height: 100dvh;
    overflow: auto;
    display: flex;
    padding: 16px;
  }

  .account-block {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-top: 12px;
    padding-inline: 0;
    border-top-color: rgba(146, 178, 240, 0.14);
  }

  .account-card {
    position: relative;
    width: auto;
    max-width: 54px;
    margin: 0 auto;
    padding: 6px;
    border-radius: 18px;
    isolation: isolate;
    overflow: visible;
  }

  .account-card::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(111, 240, 164, 0.34), rgba(163, 208, 255, 0.24), rgba(111, 240, 164, 0.1));
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.72;
    animation: account-rail-pulse 3.2s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
  }

  .account-user {
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin: 0 auto;
    border-radius: 14px;
  }

  .account-avatar {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    margin: 0;
  }

  .account-popover {
    width: min(300px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    padding: 0;
    border-radius: 20px;
    transform: translateY(8px) scale(0.97);
  }

  .account-popover::after {
    display: none;
  }

  body[data-theme="light"] .account-popover::after {
    display: none;
  }

  .account-popover-media {
    gap: 12px;
    padding: 14px 14px 12px;
  }

  .account-popover-photo {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
  }

  .account-popover-photo-ring {
    top: 10px;
  }

  .account-popover-photo-body {
    bottom: 10px;
  }

  .account-popover-body {
    padding: 14px;
    gap: 14px;
  }

  .account-popover-title-row strong {
    font-size: 14px;
  }

  .account-popover-identity span {
    font-size: 12px;
  }

  .account-popover-actions {
    grid-template-columns: 1fr;
  }

  .panel-grid,
  .cards-row,
  .kpi-grid,
  .overview-analytics,
  .conc-grid,
  .overview-summary-grid,
  .overview-kanban-strip,
  .overview-flow-body,
  .overview-stage-selector,
  .workflow-kpis,
  .stage-summary-grid,
  .overview-insights-grid,
  .screen-workspace,
  .detail-meta-grid,
  .detail-sections {
    grid-template-columns: 1fr;
  }

  .overview-kanban-toolbar > * {
    flex: 1 1 220px;
    min-width: 0;
  }

  .overview-kanban-toolbar > .toggle-filter,
  .overview-kanban-toolbar > .ghost-btn {
    flex: 1 1 180px;
  }

  .overview-section-grid--hero .overview-widget--overview_hero_main,
  .overview-section-grid--hero .overview-widget--overview_focus,
  .overview-section-grid--kpis .overview-widget,
  .overview-section-grid--stages .overview-widget,
  .overview-section-grid--insights .overview-widget,
  .overview-section-grid--extra .overview-widget {
    grid-column: span 12;
  }

  .overview-hero-primary {
    grid-template-columns: 1fr;
  }

  .overview-board-wrap,
  .queue-board-wrap,
  .table-scroll,
  .screen-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .overview-board,
  .queue-workflow-board {
    min-width: 0;
  }

  .workflow-board {
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    align-items: stretch;
  }

  .queue-workflow-board {
    min-width: 0;
  }

  .overview-board .workflow-column,
  .queue-kanban-column {
    max-height: none;
  }

  .overview-board .workflow-column-body,
  .queue-kanban-dropzone {
    max-height: min(52vh, 460px);
  }

  .overview-map-selector-list {
    max-height: none;
  }

  .overview-map-header,
  .overview-map-header-badges {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .overview-map-header-badges {
    width: 100%;
  }

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

  .conc-actions {
    justify-content: flex-start;
  }

  .overview-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .overview-date-filter {
    width: 100%;
    flex-wrap: wrap;
  }

  .workflow-panel-head,
  .detail-head,
  .screen-hero-main,
  .overview-hero-panel {
    flex-direction: column;
  }

  .workflow-form,
  .action-split {
    grid-template-columns: 1fr;
  }

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

  .hero-stats {
    grid-template-columns: 1fr;
  }

  .overview-hero-summary,
  .overview-focus-stats,
  .overview-stage-grid,
  .overview-stage-card-grid,
  .overview-map-summary-grid,
  .overview-flow-alerts {
    grid-template-columns: 1fr;
  }

  .queue-kanban-summary {
    flex-direction: column;
  }

  .queue-kanban-column-head {
    flex-direction: column;
    align-items: flex-start;
  }

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

  .approval-screen-layout {
    grid-template-columns: 1fr;
  }

  .approval-decision-panel {
    position: static;
  }

  .approval-decision-meta,
  .approval-context-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-hero-panel {
    grid-template-columns: 1fr;
  }

  .overview-hero-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .overview-focus-stats,
  .overview-stage-highlight-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-stage-selector,
  .overview-stage-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-map-layout,
  .overview-flow-body {
    grid-template-columns: 1fr;
  }

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

  .overview-logistic-stage::before,
  .overview-logistic-stage::after {
    display: none;
  }

  .overview-stage-highlight {
    gap: 14px;
  }

  .workflow-alert-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .overview-stage-highlight {
    flex-direction: column;
  }

  .overview-stage-highlight-stats {
    min-width: 0;
    width: 100%;
  }

  .hero-meta {
    justify-content: flex-start;
  }

  .detail-modal-backdrop {
    padding: 12px;
  }

  .detail-modal-shell {
    width: min(100vw - 24px, 1120px);
    max-height: calc(100vh - 24px);
  }

  .detail-modal-topbar {
    flex-direction: column;
  }

  .filter-field {
    min-width: 0;
    width: 100%;
  }

  .workflow-column {
    min-height: 0;
  }

  .flow-bars {
    grid-template-columns: repeat(7, minmax(42px, 1fr));
  }

  .screen {
    overflow: auto;
  }

  .table-scroll {
    max-height: 54vh;
    overflow: auto;
  }

  .topbar h2 {
    font-size: 28px;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: row;
    justify-content: space-between;
  }
}

@media (max-width: 820px) {
  .app-shell,
  .app-shell.sidebar-collapsed {
    grid-template-columns: 78px 1fr;
    height: 100dvh;
  }

  .content {
    height: 100dvh;
    padding: 12px;
  }

  .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
  }

  .top-actions {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .topbar h2 {
    font-size: 30px;
  }

  .workflow-shell,
  .screen-stack,
  .queue-main-stack {
    gap: 12px;
  }

  .request-card-list {
    grid-template-columns: 1fr;
  }

  .overview-layout-actions,
  .overview-layout-buttons,
  .overview-widget-toolbar-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .overview-layout-item,
  .overview-widget-toolbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .insight-row {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .overview-widget--third {
    grid-column: span 6;
  }

  .overview-widget--quarter {
    grid-column: span 6;
  }

  .overview-widget--half {
    grid-column: 1 / -1;
  }

  .overview-summary-grid,
  .overview-metrics-grid,
  .overview-stage-grid,
  .overview-stage-card-grid,
  .overview-stage-selector,
  .overview-focus-stats,
  .overview-stage-highlight-stats,
  .overview-map-summary-grid,
  .overview-logistic-map,
  .overview-flow-alerts {
    grid-template-columns: 1fr;
  }

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

  .overview-panel-head-compact,
  .workflow-alert-item,
  .overview-metric-topline {
    align-items: flex-start;
  }

  .overview-panel-head-compact,
  .overview-layout-item,
  .workflow-alert-item {
    gap: 10px;
  }

  .overview-metric-topline {
    flex-direction: column;
  }

  .overview-stage-snapshot-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .overview-hero-copy-card h3,
  .overview-hero-copy h3 {
    font-size: 24px;
  }

  .overview-focus-value,
  .workflow-kpi-card strong,
  .stage-summary-card strong,
  .overview-stage-tab strong,
  .overview-stage-snapshot strong,
  .hero-stat strong {
    font-size: 24px;
  }

  .overview-focus-widget,
  .overview-hero-copy-card,
  .overview-stage-highlight,
  .overview-stage-side-card,
  .workflow-alerts,
  .overview-map-selector,
  .overview-map-canvas {
    padding: 16px;
  }

  .overview-board .workflow-card {
    min-height: 0;
  }

  .work-item-toggle {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .collapse-indicator {
    justify-self: start;
  }

  .workflow-panel,
  .overview-kanban-shell,
  .overview-flow-shell,
  .detail-panel,
  .request-list-panel {
    padding: 14px;
    border-radius: 16px;
  }

  .workflow-panel-head {
    gap: 10px;
    margin-bottom: 12px;
  }

  .request-list-panel .workflow-panel-head p,
  .request-panel .workflow-panel-head p {
    max-width: none;
  }

  .workflow-panel-head h3,
  .detail-head h3 {
    font-size: 18px;
  }

  .overview-hero-copy h3 {
    font-size: 26px;
  }

  .hero-badge {
    padding: 7px 10px;
    font-size: 11px;
  }

  .overview-kanban-strip,
  .overview-insights-grid {
    grid-template-columns: 1fr;
  }

  .overview-board {
    min-width: 0;
  }

  .workflow-board,
  .queue-workflow-board {
    gap: 10px;
    grid-template-columns: 1fr;
  }

  .workflow-column-head {
    padding: 14px;
  }

  .workflow-column-head h3 {
    font-size: 28px;
  }

  .workflow-column-body,
  .overview-board .workflow-column-body {
    padding: 10px;
    max-height: none;
    min-height: 220px;
  }

  .workflow-card,
  .overview-board .workflow-card {
    padding: 14px;
  }

  .overview-board .workflow-card-meta {
    grid-template-columns: 1fr;
  }

  .overview-board .workflow-card-foot {
    flex-direction: column;
    align-items: stretch;
  }

  .request-card-list .workflow-card {
    border-radius: 16px;
  }

  .queue-kanban-dropzone {
    min-height: 220px;
    max-height: none;
  }

  .overview-board-wrap,
  .queue-board-wrap {
    overflow-x: visible;
  }

  .overview-map-layout {
    gap: 12px;
  }

  .overview-map-header {
    flex-direction: column;
  }

  .overview-map-header-badges {
    width: 100%;
    justify-content: flex-start;
  }

  .detail-modal-backdrop {
    padding: 8px;
  }

  .detail-modal-shell {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

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

  .detail-sections {
    grid-template-columns: 1fr;
  }

  .system-table {
    min-width: 0;
  }

  .cadastro-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .toast-region {
    top: 12px;
    right: 10px;
    width: calc(100vw - 20px);
  }

  .overview-stack {
    grid-template-columns: 1fr;
  }

  .overview-widget,
  .overview-widget--full,
  .overview-widget--half,
  .overview-widget--third,
  .overview-layout-panel,
  .overview-stack > .empty-state-panel {
    grid-column: auto;
  }

  .content {
    padding: 14px 10px 10px;
  }

  .request-screen-stack {
    gap: 10px;
  }

  .approval-decision-meta,
  .approval-context-grid,
  .approval-screen-layout {
    grid-template-columns: 1fr;
  }

  .approval-queue-copy h4 {
    font-size: 22px;
  }

  .refresh-icon-btn {
    min-height: 42px;
    border-radius: 12px;
  }

  .top-action-btn {
    justify-content: center;
    padding: 0 12px;
  }

  .top-action-label {
    font-size: 12px;
  }

  .topbar h2 {
    font-size: 26px;
  }

  .breadcrumb {
    font-size: 12px;
  }

  .workflow-panel,
  .overview-kanban-shell,
  .overview-flow-shell,
  .detail-panel,
  .overview-layout-panel,
  .detail-modal-topbar,
  .request-list-panel {
    padding: 12px;
  }

  .cadastro-modal-backdrop {
    padding: 10px;
  }

  .cadastro-modal-shell {
    width: calc(100vw - 20px);
    border-radius: 20px;
  }

  .cadastro-modal-topbar,
  .cadastro-modal-form {
    padding: 14px;
  }

  .cadastro-modal-topbar {
    flex-direction: column;
  }

  .cadastro-modal-topbar strong {
    font-size: 20px;
  }

  .cadastro-modal-actions {
    flex-direction: column-reverse;
  }

  .cadastro-modal-actions .ghost-btn,
  .cadastro-modal-actions .primary-btn,
  .cadastro-modal-toggle-btn {
    width: 100%;
    justify-content: center;
  }

  .overview-hero-copy-card,
  .overview-focus-widget,
  .overview-stage-highlight,
  .overview-stage-side-card,
  .workflow-alerts,
  .overview-metric-card,
  .overview-stage-count-card {
    padding: 14px;
  }

  .workflow-panel-head h3,
  .detail-head h3 {
    font-size: 17px;
  }

  .workflow-alert-item {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
  }

  .workflow-alert-dot {
    margin-top: 0;
  }

  .workflow-alert-copy strong {
    font-size: 12px;
  }

  .overview-hero-summary,
  .overview-focus-stats,
  .workflow-alert-summary,
  .overview-logistic-map,
  .overview-map-summary-grid,
  .overview-flow-alerts {
    grid-template-columns: 1fr;
  }

  .overview-map-layout,
  .overview-flow-body {
    grid-template-columns: 1fr;
  }

  .overview-map-selector-item,
  .overview-logistic-stage,
  .overview-flow-alert,
  .overview-stage-mini-item {
    padding: 12px;
  }

  .overview-map-header h3 {
    font-size: 20px;
  }

  .overview-logistic-stage strong,
  .overview-map-summary-grid strong,
  .overview-flow-alert strong {
    font-size: 15px;
    overflow-wrap: anywhere;
  }

  .overview-hero-copy-card h3,
  .overview-hero-copy h3 {
    font-size: 22px;
  }

  .overview-focus-value,
  .workflow-kpi-card strong,
  .stage-summary-card strong,
  .overview-stage-tab strong,
  .overview-stage-snapshot strong,
  .hero-stat strong {
    font-size: 22px;
  }

  .overview-stage-tab,
  .overview-stage-snapshot {
    padding: 12px 14px;
  }

  .overview-stage-highlight-stats span,
  .hero-badge {
    width: 100%;
  }

  .hero-meta {
    width: 100%;
    justify-content: flex-start;
  }

  .workflow-panel-head p,
  .detail-head p,
  .detail-copy p,
  .empty-copy,
  .board-empty p {
    font-size: 13px;
    line-height: 1.5;
  }

  .workflow-card h4,
  .overview-board .workflow-card h4 {
    font-size: 16px;
  }

  .overview-board .workflow-card-head {
    grid-template-columns: 1fr;
  }

  .overview-board .workflow-card-head .status-pill {
    justify-self: flex-start;
  }

  .request-card-list {
    gap: 10px;
  }

  .overview-kanban-toolbar > *,
  .toolbar > * {
    flex-basis: 100%;
  }

  .workflow-card-meta,
  .overview-board .workflow-card-meta {
    grid-template-columns: 1fr;
  }

  .workflow-card-foot,
  .overview-board .workflow-card-foot {
    flex-direction: column;
    align-items: flex-start;
  }

  .overview-map-selector,
  .overview-map-canvas {
    padding: 12px;
    border-radius: 16px;
  }

  .overview-logistic-stage {
    padding: 14px;
    border-radius: 16px;
  }

  .overview-map-summary-grid article {
    padding: 12px;
  }

  .work-item-toggle {
    padding: 14px;
  }

  .work-item-body {
    padding: 0 14px 14px;
  }

  .workflow-card-meta,
  .workflow-card-foot,
  .work-item-title span {
    font-size: 11px;
  }

  .request-card-list .workflow-card-head {
    gap: 10px;
  }

  .priority-pill,
  .status-pill,
  .mini-tag {
    padding: 5px 9px;
    font-size: 10px;
  }

  .detail-meta-grid {
    grid-template-columns: 1fr;
  }

  .detail-journey-grid {
    grid-template-columns: 1fr;
  }

  .form-actions {
    flex-direction: column;
  }

  .form-actions .primary-btn,
  .form-actions .ghost-btn {
    width: 100%;
  }

  .account-popover {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
  }
}

@media (max-width: 480px) {
  .top-actions {
    width: 100%;
  }

  .top-actions .refresh-icon-btn {
    flex: 1 1 0;
  }

  .top-action-btn {
    gap: 8px;
    padding: 0 10px;
  }

  .top-action-icon {
    width: 20px;
    height: 20px;
    font-size: 16px;
  }

  .content {
    padding: 12px 8px 8px;
  }

  .topbar {
    gap: 8px;
  }

  .topbar h2 {
    font-size: 22px;
  }

  .top-actions {
    gap: 6px;
  }

  .workflow-panel,
  .overview-kanban-shell,
  .detail-panel,
  .overview-layout-panel {
    padding: 12px 10px;
  }

  .overview-hero-copy-card,
  .overview-focus-widget,
  .overview-stage-highlight,
  .overview-stage-side-card,
  .workflow-alerts,
  .overview-metric-card,
  .overview-stage-count-card {
    padding: 12px;
  }

  .workflow-column-head h3 {
    font-size: 24px;
  }

  .overview-hero-copy-card h3,
  .overview-hero-copy h3 {
    font-size: 20px;
  }

  .overview-focus-value,
  .workflow-kpi-card strong,
  .stage-summary-card strong,
  .overview-stage-tab strong,
  .overview-stage-snapshot strong,
  .hero-stat strong {
    font-size: 20px;
  }

  .overview-focus-note,
  .overview-stage-highlight p,
  .overview-stage-tab span,
  .overview-stage-snapshot span,
  .overview-logistic-stage p,
  .overview-map-summary-grid span,
  .overview-flow-alert span {
    font-size: 12px;
  }

  .overview-map-selector,
  .overview-map-canvas,
  .overview-stage-mini-item,
  .overview-logistic-stage,
  .overview-flow-alert {
    padding: 10px;
  }

  .overview-map-header h3 {
    font-size: 18px;
  }

  .overview-map-selector-item {
    padding: 10px;
  }

  .workflow-board {
    grid-template-columns: 1fr;
  }

  .overview-board {
    min-width: 0;
  }

  .queue-workflow-board {
    min-width: 0;
  }

  .workflow-column-head,
  .queue-kanban-column-head {
    gap: 8px;
  }

  .workflow-column-body,
  .overview-board .workflow-column-body,
  .queue-kanban-dropzone {
    min-height: 190px;
    padding: 8px;
  }

  .overview-board .workflow-card {
    min-height: 0;
    padding: 12px;
  }

  .overview-stage-highlight-stats span {
    padding: 9px 10px;
    font-size: 12px;
  }

  .detail-modal-backdrop {
    padding: 6px;
  }

  .detail-modal-shell {
    width: calc(100vw - 12px);
    max-height: calc(100dvh - 12px);
    gap: 10px;
  }

  .detail-modal-topbar {
    padding: 12px 10px;
  }

  .detail-modal-topbar strong {
    font-size: 18px;
  }
}