:root {
  --seed-primary: #007a8b;
  --seed-deep: #0d3d40;
  --seed-accent: #e8b04b;
  --seed-warn: #b45309;
  --primary: var(--seed-primary);
  --primary-hover: #006573;
  --primary-head: #006b7a;
  --primary-deep: var(--seed-deep);
  --primary-tint: #eaf6f7;
  --primary-tint2: #f4fafb;
  --primary-soft: #9fd3da;
  --primary-a10: rgba(0, 122, 139, 0.1);
  --primary-a20: rgba(0, 122, 139, 0.2);
  --primary-a30: rgba(0, 122, 139, 0.3);
  --accent: var(--seed-accent);
  --accent-wash: rgba(232, 176, 75, 0.18);
  --ink: #0f172a;
  --ink-2: #334155;
  --ink-3: #64748b;
  --ink-4: #94a3b8;
  --bg: #f5f8f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #f1f5f9;
  --line: #e2e8f0;
  --line-2: #cbd5e1;
  --line-soft: #f1f5f9;
  --ok: #0d9488;
  --ok-soft: #f1f7f6;
  --ok-ink: #115e59;
  --warn: var(--seed-warn);
  --warn-soft: #f8f6f0;
  --warn-ink: #92400e;
  --bad: #be123c;
  --bad-soft: #f9f3f3;
  --bad-ink: #9f1239;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --sh1: 0 1px 2px rgba(15, 23, 42, 0.06);
  --sh2: 0 4px 12px -4px rgba(15, 23, 42, 0.1), 0 1px 2px rgba(15, 23, 42, 0.05);
  --sh3: 0 20px 50px -20px rgba(15, 23, 42, 0.28), 0 6px 16px -8px rgba(15, 23, 42, 0.1);
  --font-sans:
    'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    Arial, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.22, 1, 0.36, 1);
  --pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 0.15s;
  --t-base: 0.25s;
  --t-slow: 0.45s;
  --hero-grad: linear-gradient(110deg, #0d3d40 0%, #006b7a 52%, #0a8d9f 100%);
  --shine-grad: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.05) 47%,
    rgba(255, 255, 255, 0.24) 50%,
    rgba(255, 255, 255, 0.05) 53%,
    transparent 60%
  );
  --glass: rgba(255, 255, 255, 0.14);
  --glass-line: rgba(255, 255, 255, 0.22);
  --side-w: 252px;
  --side-rail: 64px;
  --top-h: 56px;
  --flow-1: #0a8d9f;
  --flow-2: #4fb3bf;
  --flow-3: #0d3d40;
  --flow-n: #cbd5e1;
  color-scheme: light;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
}
html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  overflow: hidden;
}
button {
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
}
input {
  font-family: inherit;
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--primary-a30);
  outline-offset: 2px;
}
::selection {
  background: var(--primary-tint);
}
.tnum,
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
svg.i {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.view {
  position: fixed;
  inset: 0;
  transition:
    opacity 0.55s var(--ease),
    transform 0.55s var(--ease);
}
.view[hidden] {
  display: none !important;
}

/* ===== Login ===== */
.split {
  display: flex;
  height: 100%;
}
.lg-left {
  flex: 1.15;
  position: relative;
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 44px 56px;
  border-right: 1px solid var(--line);
}
.lg-logo {
  position: absolute;
  top: 40px;
  left: 56px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
}
.lg-logo b {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--primary-deep);
}
.lg-logo small {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
  padding-left: 12px;
  border-left: 1px solid var(--line-2);
}
.lg-art {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 11%;
  height: 50%;
}
.lg-art canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.lg-bottom {
  position: relative;
  z-index: 2;
}
.lg-title {
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0 0 14px;
  max-width: 600px;
  opacity: 0;
  animation: rise 0.8s var(--ease) 0.65s forwards;
  text-wrap: balance;
}
.lg-title .u {
  color: var(--primary);
  position: relative;
}
.lg-title .u::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0.04em;
  height: 0.12em;
  width: 100%;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  animation: draw 1s var(--ease) 1.6s forwards;
  z-index: -1;
}
.lg-rot {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-3);
  max-width: 520px;
  line-height: 1.5;
  opacity: 0;
  animation: rise 0.8s var(--ease) 0.9s forwards;
  min-height: 1.5em;
}
.lg-rot b {
  color: var(--primary);
  font-weight: 800;
  display: inline-block;
}
.lg-rot b.in {
  animation: rotin 0.55s var(--ease);
}
.lg-rot b.out {
  animation: rotout 0.35s ease forwards;
}
.lg-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 56px 40px 40px;
  overflow: auto;
}
.lg-form {
  width: min(520px, 100%);
  opacity: 0;
  animation: rise 0.7s var(--ease) 0.3s forwards;
}
.lg-eb {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--primary);
  padding-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.lg-eb::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line-2);
}
.roles {
  display: grid;
  gap: 10px;
}
.role {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr 36px;
  align-items: center;
  column-gap: 18px;
  height: 88px;
  padding: 0 20px 0 22px;
  text-align: left;
  isolation: isolate;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  transition:
    transform 0.25s var(--spring),
    border-color 0.2s,
    box-shadow 0.2s;
}
.role:hover {
  transform: translateX(3px);
  border-color: var(--line-2);
}
.role.on {
  border-color: var(--primary-a30);
  box-shadow: var(--sh2);
}
.role canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.22;
  pointer-events: none;
  border-radius: 10px;
}
.role-n {
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line-2);
  text-align: center;
  transition: 0.3s;
}
.role.on .role-n {
  color: var(--primary-deep);
  -webkit-text-stroke: 0;
}
.role-t {
  display: block;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.role-d {
  display: block;
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 3px;
  font-weight: 600;
}
.role-go {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--line-2);
  transition: 0.3s var(--spring);
}
.role.on .role-go {
  color: var(--primary-deep);
  transform: rotate(-45deg);
}
.btn-login {
  margin-top: 20px;
  width: 100%;
  padding: 0 24px;
  height: 64px;
  border-radius: 10px;
  background: var(--primary-deep);
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.btn-login::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--primary);
  transform: translateX(-101%);
  transition: transform 0.45s var(--ease);
}
.btn-login > * {
  position: relative;
  z-index: 1;
}
.btn-login:hover::before {
  transform: none;
}
.btn-login svg {
  transition: transform 0.3s var(--spring);
}
.btn-login:hover svg {
  transform: translateX(6px);
}
.btn-login.loading {
  pointer-events: none;
  color: transparent;
  background: repeating-linear-gradient(
    -45deg,
    var(--primary) 0 12px,
    var(--primary-deep) 12px 24px
  );
  background-size: 200% 100%;
  animation: hbar 0.7s linear infinite;
}
.btn-login.loading::before {
  display: none;
}
.lg-foot {
  margin-top: 18px;
  font-size: 11.5px;
  color: var(--ink-3);
  display: flex;
  justify-content: space-between;
}

/* ===== Transisi ink ===== */
.fx {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  display: none;
}
.fx.on {
  display: block;
  pointer-events: all;
}
.fx-ink {
  position: absolute;
  inset: 0;
  background: var(--hero-grad);
  clip-path: circle(0% at var(--fx-x, 50%) var(--fx-y, 50%));
  animation: ink 2.2s var(--ease) forwards;
}
.fx-art {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(46vw, 520px);
  aspect-ratio: 840/520;
  transform: translate(-50%, -66%);
  opacity: 0;
  animation: fxr 2.2s ease forwards;
}
.fx-hud {
  position: absolute;
  left: 50%;
  top: 64%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
  opacity: 0;
  animation: hud 2.2s var(--ease) forwards;
  width: min(90vw, 600px);
}
.fx-tag {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.fx-t {
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 10px 0 8px;
}
.fx-sub {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
}
.fx-tick {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 14px;
  text-transform: uppercase;
  font-weight: 600;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes draw {
  to {
    transform: scaleX(1);
  }
}
@keyframes rotin {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes rotout {
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}
@keyframes hbar {
  to {
    background-position: -34px 0;
  }
}
@keyframes ink {
  0% {
    clip-path: circle(0% at var(--fx-x, 50%) var(--fx-y, 50%));
  }
  28% {
    clip-path: circle(150% at var(--fx-x, 50%) var(--fx-y, 50%));
  }
  72% {
    clip-path: circle(150% at var(--fx-x, 50%) var(--fx-y, 50%));
  }
  100% {
    clip-path: circle(0% at 50% 50%);
  }
}
@keyframes fxr {
  0%,
  22% {
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  72% {
    opacity: 1;
  }
  85%,
  100% {
    opacity: 0;
  }
}
@keyframes hud {
  0%,
  22% {
    opacity: 0;
    transform: translate(-50%, -44%);
  }
  40% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  68% {
    opacity: 1;
  }
  82%,
  100% {
    opacity: 0;
    transform: translate(-50%, -54%);
  }
}

/* ===== Shell ===== */
.app {
  display: grid;
  grid-template-columns: var(--side-w) 1fr;
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  transition: grid-template-columns 0.28s var(--spring);
}
.app.rail {
  grid-template-columns: var(--side-rail) 1fr;
}
.side {
  min-height: 0;
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.sb-brand {
  height: var(--top-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 16px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.sb-brand svg.mk {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
}
.sb-brand .nm {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
  white-space: nowrap;
}
.sb-brand .nm b {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--primary-deep);
}
.sb-brand .nm span {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 600;
}
.sb-col {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  transition: background var(--t-fast);
}
.sb-col:hover {
  background: var(--surface-3);
  color: var(--ink);
}
.app.rail .sb-brand {
  padding: 0;
  justify-content: center;
}
.app.rail .sb-brand .nm,
.app.rail .sb-col {
  display: none;
}
.sb-scroll {
  flex: 1;
  overflow: auto;
  padding: 10px 10px 12px;
}
.sb-grp {
  margin-bottom: 4px;
}
.sb-gh {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
  text-align: left;
  transition: background var(--t-fast);
}
.sb-gh:hover {
  background: var(--surface-2);
}
.sb-gh .ix {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  flex: 0 0 auto;
}
.sb-grp.cur .sb-gh .ix {
  color: var(--primary);
}
.sb-grp.cur .sb-gh {
  color: var(--ink);
}
.sb-gh .tx {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-gh .lk {
  color: var(--ink-4);
}
.sb-gh .chev {
  color: var(--ink-4);
  transition: transform 0.28s var(--spring);
}
.sb-grp.open .sb-gh .chev {
  transform: rotate(90deg);
}
.sb-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--spring);
}
.sb-grp.open .sb-body {
  grid-template-rows: 1fr;
}
.sb-body > div {
  overflow: hidden;
}
.sb-list {
  margin: 2px 0 6px 22px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sb-link {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-3);
  text-align: left;
  width: 100%;
  position: relative;
  transition:
    background var(--t-fast),
    color var(--t-fast);
}
.sb-link:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.sb-link .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  flex: 0 0 auto;
  transition: background 0.2s;
}
.sb-link.on {
  background: var(--primary-tint);
  color: var(--primary-head);
  font-weight: 700;
}
.sb-link.on .dot {
  background: var(--primary);
}
.sb-link.on::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
  border: 1.5px solid var(--primary);
  opacity: 0;
  animation: ping 0.7s var(--ease);
}
.sb-link[aria-disabled='true'] {
  cursor: not-allowed;
  color: var(--ink-4);
}
.sb-link[aria-disabled='true']:hover {
  background: transparent;
  color: var(--ink-4);
}
.sb-foot {
  border-top: 1px solid var(--line);
  padding: 12px 16px;
  font-size: 11px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.sb-foot b {
  color: var(--ink-2);
  font-weight: 700;
}
.app.rail .sb-list,
.app.rail .sb-gh .tx,
.app.rail .sb-gh .chev,
.app.rail .sb-gh .lk,
.app.rail .sb-foot {
  display: none;
}
.app.rail .sb-body {
  grid-template-rows: 0fr;
}
.app.rail .sb-gh {
  justify-content: center;
  padding: 0;
}
.app.rail .sb-scroll {
  padding: 10px 8px;
}

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
}
.top {
  height: var(--top-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.crumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  white-space: nowrap;
}
.crumb b {
  color: var(--ink);
  font-weight: 700;
}
.crumb svg {
  width: 12px;
  height: 12px;
  color: var(--ink-4);
}
.top .sp {
  flex: 1;
}
.sim {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px dashed var(--line-2);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  white-space: nowrap;
}
.who {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 10px 0 4px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color var(--t-fast);
}
.who:hover {
  border-color: var(--line-2);
}
.av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
}
.who .t {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}
.who .t b {
  font-size: 12.5px;
  font-weight: 700;
}
.who .t span {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 600;
}
.menu {
  position: fixed;
  z-index: 1200;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--sh3);
  padding: 6px;
  animation: popIn 0.18s var(--ease);
}
.menu button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  text-align: left;
}
.menu button:hover {
  background: var(--surface-2);
}
.menu button.on {
  color: var(--primary-head);
}
.scroller {
  flex: 1;
  overflow: auto;
  scroll-behavior: smooth;
}
.page {
  max-width: 1480px;
  margin: 0 auto;
  padding: 18px 24px 40px;
}
.page.enter > * {
  animation: pgIn 0.55s var(--ease) both;
}
.page.enter > *:nth-child(2) {
  animation-delay: 0.06s;
}
.page.enter > *:nth-child(3) {
  animation-delay: 0.12s;
}
.page.enter > *:nth-child(4) {
  animation-delay: 0.18s;
}
.page.enter > *:nth-child(5) {
  animation-delay: 0.24s;
}
.page.enter > *:nth-child(6) {
  animation-delay: 0.3s;
}

/* ===== Hero ===== */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: var(--hero-grad);
  color: #fff;
  padding: 24px 28px;
  box-shadow: var(--sh2);
}
.hero-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: heroFloat 9s ease-in-out infinite;
}
.hero-b1 {
  top: -50px;
  right: -40px;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.1);
  filter: blur(40px);
}
.hero-b2 {
  bottom: -70px;
  right: 180px;
  width: 220px;
  height: 220px;
  background: var(--accent-wash);
  filter: blur(56px);
  animation-duration: 13s;
  animation-direction: reverse;
}
.hero-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: var(--shine-grad);
  background-size: 250% 100%;
  background-position: 130% 0;
  animation: heroShine 6s ease-in-out infinite;
}
.hero-map {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60%;
  padding: 6px 10px 6px 0;
  z-index: 1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%);
  mask-image: linear-gradient(90deg, transparent, #000 34%);
}
.hero-map svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hero-in {
  position: relative;
  z-index: 3;
}
.hero h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.hero .lead {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.8);
  max-width: 62ch;
}
.hero .lead b {
  color: #fff;
}
.map-hot {
  animation: mapPulse 2.8s ease-in-out infinite;
}
.map-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: ringOut 2.4s var(--ease) infinite;
}
.kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.kpi {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  padding: 12px 14px;
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  text-align: left;
  color: #fff;
  transition:
    background var(--t-fast),
    transform var(--t-fast);
  opacity: 0;
  animation: rise 0.6s var(--ease) forwards;
}
.kpi:hover {
  background: rgba(255, 255, 255, 0.2);
}
.kpi.sorot {
  opacity: 1;
  animation: kpiSorot 1.4s var(--ease);
}
@keyframes kpiSorot {
  0% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      0 0 0 0 rgba(255, 255, 255, 0.5);
  }
  30% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      0 0 0 4px rgba(255, 255, 255, 0.35);
  }
  100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      0 0 0 0 transparent;
  }
}
.kpi .l {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  display: flex;
  align-items: center;
  gap: 6px;
}
.kpi .v {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.kpi .v small {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  margin-left: 4px;
}
.kpi .s {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 2px;
}

@keyframes ping {
  0% {
    opacity: 0.9;
    transform: scale(0.98);
  }
  100% {
    opacity: 0;
    transform: scale(1.04);
  }
}
@keyframes popIn {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes pgIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes heroFloat {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-12px, 9px);
  }
}
@keyframes heroShine {
  0% {
    background-position: 130% 0;
  }
  45%,
  100% {
    background-position: -60% 0;
  }
}
@keyframes mapPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
@keyframes ringOut {
  0% {
    opacity: 0.8;
    transform: scale(0.6);
  }
  100% {
    opacity: 0;
    transform: scale(2.4);
  }
}

/* ===== Komponen ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-2);
  white-space: nowrap;
  transition:
    background var(--t-fast),
    border-color var(--t-fast),
    transform var(--t-fast),
    box-shadow var(--t-fast);
}
.btn:hover {
  background: var(--surface-2);
  border-color: var(--ink-4);
}
.btn:active {
  transform: translateY(1px);
}
.btn.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.btn.primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  box-shadow: 0 6px 16px -8px var(--primary);
}
.btn.lg {
  height: 40px;
  padding: 0 18px;
  font-size: 13px;
}
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink-2);
  white-space: nowrap;
}
.chip.ok {
  color: var(--ok-ink);
  background: var(--ok-soft);
  border-color: transparent;
}
.chip.warn {
  color: var(--warn-ink);
  background: var(--warn-soft);
  border-color: transparent;
}
.chip.brand {
  color: var(--primary-head);
  background: var(--primary-tint);
  border-color: var(--primary-a20);
}
.chip .d6 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.k-auto {
  --k: var(--primary-deep);
}
.k-assist {
  --k: var(--flow-2);
}
.k-man {
  --k: var(--ink-4);
}
.kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.kind i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--k);
}
.info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 10px;
  font-weight: 800;
  opacity: 0.7;
  cursor: help;
  line-height: 1;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition:
    border-color var(--t-fast),
    box-shadow 0.3s var(--ease);
}
.card-h {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.card-h h2 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
}
.card-h .sp {
  flex: 1;
}
.card-h .meta {
  font-size: 11.5px;
  color: var(--ink-3);
  font-weight: 600;
}
.card-b {
  padding: 14px 16px;
}
.grid2 {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 16px;
}
.grid-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}
.mt16 {
  margin-top: 16px;
}
.splitnum {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.splitnum > div {
  padding: 12px 16px;
  border-right: 1px solid var(--line);
  min-width: 0;
}
.splitnum > div:last-child {
  border-right: 0;
}
.splitnum .l {
  font-size: 11.5px;
  color: var(--ink-3);
  font-weight: 600;
  white-space: nowrap;
}
.splitnum .v {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--primary-head);
  margin-top: 2px;
  white-space: nowrap;
}
.splitnum .v small {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  margin-left: 4px;
}
.splitnum .v.ink {
  color: var(--ink);
}
.tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}
.tbl th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  padding: 9px 12px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.tbl td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.tbl tr:last-child td {
  border-bottom: 0;
}
.tbl th.num,
.tbl td.num {
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tbl td.num {
  font-weight: 700;
}
.tbl tbody tr.click {
  cursor: pointer;
  transition: background var(--t-fast);
}
.tbl tbody tr.click:hover {
  background: var(--surface-2);
}
.tbl tbody tr.sel {
  background: var(--primary-tint);
}
.tbl tfoot td {
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  font-weight: 800;
  background: var(--surface-2);
}
.tbl .nm {
  font-weight: 700;
  color: var(--ink);
}
.tbl .sub {
  font-size: 11.5px;
  color: var(--ink-3);
  font-weight: 500;
}
.tbl .chev {
  color: var(--ink-4);
  width: 28px;
}
.sorot {
  animation: sorot 1.4s var(--ease);
}
.keping {
  animation: keping 0.28s var(--pop);
}
details.note {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}
details.note summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
}
details.note summary::-webkit-details-marker {
  display: none;
}
details.note summary .chev {
  margin-left: auto;
  transition: transform 0.25s var(--spring);
  color: var(--ink-4);
}
details.note[open] summary .chev {
  transform: rotate(90deg);
}
details.note .body {
  padding: 0 12px 12px;
  font-size: 12px;
  color: var(--ink-2);
}
details.note ul {
  margin: 0;
  padding-left: 18px;
}
details.note li {
  margin: 3px 0;
}

/* Dropdown custom */
.dd {
  position: relative;
}
.dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: var(--surface);
  min-width: 300px;
  font-size: 13px;
  font-weight: 700;
  transition:
    border-color var(--t-fast),
    box-shadow var(--t-fast);
}
.dd-btn:hover {
  border-color: var(--ink-4);
}
.dd-btn .l {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 600;
}
.dd-btn .chev {
  margin-left: auto;
  color: var(--ink-3);
  transition: transform 0.25s var(--spring);
}
.dd.open .dd-btn {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-a10);
}
.dd.open .dd-btn .chev {
  transform: rotate(180deg);
}
.dd-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 300;
  width: 380px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--sh3);
  padding: 6px;
  display: none;
  animation: popIn 0.18s var(--ease);
}
.dd.open .dd-pop {
  display: block;
}
.dd-gl {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 8px 10px 4px;
}
.dd-opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  text-align: left;
}
.dd-opt:hover {
  background: var(--surface-2);
}
.dd-opt.on {
  background: var(--primary-tint);
}
.dd-opt .t {
  flex: 1;
  min-width: 0;
}
.dd-opt .t b {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
}
.dd-opt .t span {
  font-size: 11px;
  color: var(--ink-3);
}
.dd-opt .n {
  font-size: 12px;
  font-weight: 800;
  color: var(--primary-head);
  font-variant-numeric: tabular-nums;
}
.dd-opt[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Drawer */
.scrim {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 900;
  background: rgba(15, 23, 42, 0.38);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s;
}
.scrim.on {
  opacity: 1;
  pointer-events: auto;
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 680px;
  max-width: 50vw;
  min-width: 420px;
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: -24px 0 50px -30px rgba(15, 23, 42, 0.5);
  z-index: 901;
  display: flex;
  flex-direction: column;
  transform: translateX(105%);
  transition: transform 0.32s var(--spring);
}
.drawer.on {
  transform: none;
}
.dr-h {
  height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.dr-h h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}
.dr-x {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  margin-left: auto;
}
.dr-x:hover {
  background: var(--surface-3);
  color: var(--ink);
}
.dr-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.search {
  position: relative;
  flex: 1;
}
.search input {
  width: 100%;
  height: 34px;
  padding: 0 10px 0 34px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: var(--surface);
  font-size: 12.5px;
}
.search input:focus {
  outline: 0;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-a10);
}
.search svg {
  position: absolute;
  left: 10px;
  top: 9px;
  color: var(--ink-4);
}
.dr-b {
  flex: 1;
  overflow: auto;
}
.dr-f {
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--ink-3);
}
.empty {
  margin: 16px;
  padding: 16px;
  border: 1.5px dashed var(--line-2);
  border-radius: 10px;
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 12px;
  text-align: center;
}
.empty b {
  display: block;
  color: var(--ink);
  margin-bottom: 2px;
}

#tip {
  position: fixed;
  z-index: 99999;
  left: 0;
  top: 0;
  max-width: 280px;
  background: var(--ink);
  color: #f8fafc;
  font-size: 11.5px;
  line-height: 1.45;
  padding: 7px 10px;
  border-radius: 9px;
  box-shadow: var(--sh3);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
#tip.on {
  opacity: 1;
}
#tip b {
  color: #fff;
}
.toasts {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 99995;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--primary-deep);
  color: #e6f7f8;
  padding: 11px 16px;
  border-radius: 12px;
  box-shadow: var(--sh3);
  font-size: 12.5px;
  font-weight: 600;
  max-width: 560px;
  animation: toastIn 0.45s var(--spring);
}
.toast.out {
  animation: toastOut 0.3s ease forwards;
}
.toast svg {
  color: var(--accent);
}

@keyframes sorot {
  0% {
    box-shadow: 0 0 0 0 var(--primary-a30);
  }
  30% {
    box-shadow: 0 0 0 4px var(--primary-a20);
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}
@keyframes keping {
  from {
    transform: scale(0.7);
    opacity: 0.4;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes toastOut {
  to {
    opacity: 0;
    transform: translateY(8px);
  }
}
@keyframes growX {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes fadeCell {
  from {
    opacity: 0;
    transform: scale(0.88);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes pulseDot {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.85);
  }
  40% {
    opacity: 1;
    transform: scale(1.1);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== 1.1 Target ===== */
.hero.tall {
  min-height: 220px;
  display: flex;
  align-items: flex-end;
}
.hero .goal {
  display: flex;
  gap: 28px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.hero .goal div {
  min-width: 0;
}
.hero .goal .l {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 600;
}
.hero .goal .v {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hero .goal .v small {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin-left: 3px;
}
.ask {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.ask .q {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.ask .q span {
  color: var(--ink-3);
  font-weight: 600;
}
.ask .sp {
  flex: 1;
}
.prov {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.prov-r {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.prov-r i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-wash);
}
.prov-r b {
  font-size: 13px;
}
.prov-r span {
  font-size: 11.5px;
  color: var(--ink-3);
}
.prov-r .num {
  font-weight: 800;
  color: var(--ink-2);
}

/* ===== 1.2 Peta Kapasitas ===== */
.ctl {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.ctl .lab {
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.rng {
  position: relative;
  width: 340px;
  height: 36px;
  display: flex;
  align-items: center;
}
.rng input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--primary) var(--p, 66%), var(--line) var(--p, 66%));
  outline: 0;
  margin: 0;
}
.rng input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--primary);
  box-shadow: var(--sh2);
  cursor: grab;
  transition: transform 0.15s var(--spring);
}
.rng input:active::-webkit-slider-thumb {
  transform: scale(1.15);
  cursor: grabbing;
}
.rng .ticks {
  position: absolute;
  left: 0;
  right: 0;
  top: 26px;
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--ink-4);
  font-weight: 700;
  padding: 0 2px;
  pointer-events: none;
}
.rng-v {
  min-width: 56px;
  height: 30px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--primary-tint);
  color: var(--primary-head);
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ctl .sep {
  width: 1px;
  height: 28px;
  background: var(--line);
}
.found {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.found .chip {
  height: 28px;
  padding: 0 10px;
  font-weight: 600;
}
.found .chip b {
  font-weight: 800;
  color: var(--ink);
}
.bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bar-r {
  display: grid;
  grid-template-columns: 170px 1fr 92px;
  gap: 12px;
  align-items: center;
  padding: 8px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--t-fast);
}
.bar-r:hover {
  background: var(--surface-2);
}
.bar-r .n {
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-r .n span {
  display: block;
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 600;
}
.bar-t {
  height: 14px;
  border-radius: 4px;
  background: var(--surface-3);
  position: relative;
  overflow: hidden;
}
.bar-f {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--primary-head), var(--flow-1));
  transform-origin: left;
  animation: growX 0.8s var(--ease) both;
  transition: width 0.45s var(--ease);
}
.bar-r .v {
  text-align: right;
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bar-r .v small {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 600;
  margin-left: 2px;
}
.axis-note {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 8px;
  padding: 0 8px;
}
.hm {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.hm th {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 4px 8px;
  text-align: center;
  vertical-align: bottom;
  line-height: 1.25;
}
.hm th.rh {
  text-align: left;
  width: 150px;
}
.hm td {
  height: 46px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  animation: fadeCell 0.5s var(--ease) both;
  transition:
    filter var(--t-fast),
    box-shadow var(--t-fast);
  border: 0;
}
.hm td:hover {
  filter: brightness(0.94);
  box-shadow: inset 0 0 0 2px var(--primary-deep);
}
.hm td.rl {
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  cursor: default;
  animation: none;
  background: none;
  padding-right: 8px;
}
.hm td.rl:hover {
  filter: none;
  box-shadow: none;
}
.hm td.z {
  color: var(--ink-4);
  font-weight: 600;
}
.legend {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 10px;
}
.legend .ramp {
  width: 140px;
  height: 8px;
  border-radius: 99px;
  background: linear-gradient(90deg, #eef6f7, #9fd3da, #2a9aa8, #0d3d40);
}

/* ===== 1.3 Analisis Role ===== */
.rolebar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.rolebar .sp {
  flex: 1;
}
.prof {
  margin-top: 12px;
}
.skills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.jd {
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink-2);
}
.jd .s {
  border-radius: 4px;
  padding: 1px 2px;
  transition:
    background 0.35s var(--ease),
    color 0.35s;
  background-image: linear-gradient(var(--primary-a20), var(--primary-a20));
  background-repeat: no-repeat;
  background-size: 0% 100%;
}
.jd .s.hl {
  background-size: 100% 100%;
  color: var(--ink);
  animation: hlSweep 0.45s var(--ease);
}
.jd .s.done {
  background-size: 100% 100%;
  background-image: linear-gradient(var(--primary-tint), var(--primary-tint));
}
.aibox {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}
.ai-h {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.ai-ic {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  flex: 0 0 auto;
}
.ai-h h2 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
}
.ai-h .sp {
  flex: 1;
}
.ai-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--primary-tint2);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary-head);
}
.ai-status .dots {
  display: inline-flex;
  gap: 4px;
}
.ai-status .dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  animation: pulseDot 1.4s ease-in-out infinite;
}
.ai-status .dots i:nth-child(2) {
  animation-delay: 0.18s;
}
.ai-status .dots i:nth-child(3) {
  animation-delay: 0.36s;
}
.ai-status .skip {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--ink-3);
  font-weight: 600;
}
.ai-prog {
  height: 2px;
  background: var(--line-soft);
  position: relative;
  overflow: hidden;
}
.ai-prog i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--primary);
  transition: width 0.3s linear;
}
.ai-empty {
  padding: 28px 16px;
  text-align: center;
}
.ai-empty p {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.task-row {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.35s var(--ease),
    transform 0.35s var(--ease);
}
.task-row.in {
  opacity: 1;
  transform: none;
}
.pct {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
.pct .tr {
  width: 54px;
  height: 6px;
  border-radius: 99px;
  background: var(--surface-3);
  overflow: hidden;
}
.pct .tr i {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: 99px;
  transform-origin: left;
  animation: growX 0.6s var(--ease) both;
}
.prov-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--ink-3);
  background: var(--surface-2);
}
.prov-foot b {
  color: var(--ink-2);
}
.ev {
  position: sticky;
  top: 0;
}
.ev-t {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.ev-why {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 10px 0 0;
}
.ev-n {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-top: 12px;
  overflow: hidden;
}
.ev-n > div {
  padding: 9px 10px;
  border-right: 1px solid var(--line);
  min-width: 0;
}
.ev-n > div:last-child {
  border-right: 0;
}
.ev-n .l {
  white-space: nowrap;
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 600;
}
.ev-n .v {
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ev-src {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ev-src li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 12px;
  color: var(--ink-2);
}
.ev-src li span.ic {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--surface-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
}
.ev-src li b {
  display: block;
  font-size: 11.5px;
  color: var(--ink);
  font-weight: 700;
}
.ev-val {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.ev-val .t {
  font-size: 12px;
  color: var(--ink-3);
  flex: 1;
}
.ev-val .t b {
  display: block;
  color: var(--ink);
  font-size: 12.5px;
}
.sk {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--surface-3) 25%,
    var(--surface-2) 37%,
    var(--surface-3) 63%
  );
  background-size: 400% 100%;
  animation: shim 1.4s ease infinite;
}

/* ===== 1.4 Alokasi + Keputusan ===== */
.sankey-wrap {
  position: relative;
  padding: 8px 4px 4px;
}
.sankey {
  width: 100%;
  height: auto;
  max-height: 460px;
  display: block;
  overflow: visible;
}
.sankey .lnk {
  fill: none;
  stroke-opacity: 0.34;
  transition: stroke-opacity 0.2s;
  cursor: pointer;
}
.sankey .lnk:hover,
.sankey .lnk.hot {
  stroke-opacity: 0.62;
}
.sankey .lnk.draw {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: dash 1.1s var(--ease) forwards;
}
.sankey .nd {
  rx: 4px;
}
.sankey text {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  fill: var(--ink);
}
.sankey text.s {
  font-size: 11px;
  font-weight: 600;
  fill: var(--ink-3);
}
.sankey text.v {
  font-variant-numeric: tabular-nums;
}
.sankey .grp {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  fill: var(--ink-4);
  text-transform: uppercase;
}
.match {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.match i {
  width: 36px;
  height: 5px;
  border-radius: 99px;
  background: var(--surface-3);
  overflow: hidden;
  display: inline-block;
}
.match i b {
  display: block;
  height: 100%;
  background: var(--flow-1);
}
.decide {
  margin-top: 16px;
  transition: box-shadow 0.3s;
}
.dec-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 0;
}
.dec-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 20px 22px;
  border-right: 1px solid var(--line);
}
.dec-n {
  text-align: center;
  min-width: 92px;
}
.dec-n .v {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dec-n .l {
  font-size: 11.5px;
  color: var(--ink-3);
  font-weight: 700;
  margin-top: 6px;
  white-space: nowrap;
}
.dec-n.int .v {
  color: var(--primary);
}
.dec-n.fin .v {
  color: var(--primary-deep);
}
.dec-op {
  color: var(--ink-4);
  font-size: 20px;
  font-weight: 700;
}
.dec-cmp {
  padding: 6px 0;
}
.dec-cmp .tbl td {
  padding: 9px 16px;
}
.dec-cmp .tbl th {
  padding: 8px 16px;
  background: var(--surface);
}
.dec-cmp .tbl td.b {
  font-weight: 800;
  color: var(--primary-head);
}
.dec-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.dec-foot details {
  flex: 1;
}
.dec-foot details.note {
  background: var(--surface);
}
.approved {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ok-ink);
}
.decide.done .approved {
  display: inline-flex;
}
.decide.done .btn-approve {
  display: none;
}
@keyframes hlSweep {
  from {
    background-size: 0% 100%;
  }
  to {
    background-size: 100% 100%;
  }
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes shim {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.card-h h2,
.ai-h h2 {
  white-space: nowrap;
}
.tbl td .kind {
  display: flex;
}
@media (max-width: 1500px) {
  .grid-main {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}

/* ===== Komponen modul 2-5 ===== */
.hero.compact {
  padding: 20px 28px;
}
.hero.compact h1 {
  font-size: 22px;
}
.hero .who-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}
.hero .av {
  width: 44px;
  height: 44px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.hero .who-strip b {
  font-size: 15px;
  display: block;
}
.hero .who-strip span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.78);
}
.hero .facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 18px;
  position: relative;
  z-index: 3;
}
.hero .facts > div {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  padding: 12px 14px;
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  min-width: 0;
}
.hero .facts .l {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 600;
}
.hero .facts .v {
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 6px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hero .facts .v small {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  margin-left: 3px;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.grid-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}
@media (max-width: 1500px) {
  .grid-side {
    grid-template-columns: minmax(0, 1fr) 330px;
  }
}
.section-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.section-cta .q {
  font-size: 13.5px;
  font-weight: 700;
}
.section-cta .q span {
  color: var(--ink-3);
  font-weight: 600;
}
.section-cta .sp {
  flex: 1;
}
.kv {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 6px 14px;
  font-size: 12.5px;
}
.kv dt {
  color: var(--ink-3);
  font-weight: 600;
}
.kv dd {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
}
.pick {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--line-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--surface);
  flex: 0 0 auto;
}
.pick.on {
  background: var(--primary);
  border-color: var(--primary);
}
.tbl tr.alt td {
  opacity: 0.6;
}
.tbl tr.alt td:first-child {
  opacity: 1;
}
.rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 800;
  background: var(--surface-3);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.rank.r1 {
  background: linear-gradient(135deg, var(--primary-deep), var(--primary));
  color: #fff;
}
.rank.r2 {
  background: var(--primary-tint);
  color: var(--primary-head);
}
.gapchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn-ink);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.opt {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition:
    border-color 0.2s,
    box-shadow 0.3s;
}
.opt.rec {
  border-color: var(--primary-a30);
  box-shadow: 0 0 0 3px var(--primary-a10);
}
.opt-h {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
}
.opt-h h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
}
.opt-h .sp {
  flex: 1;
}
.opt-big {
  padding: 14px 16px;
  display: flex;
  gap: 22px;
}
.opt-big .l {
  font-size: 11.5px;
  color: var(--ink-3);
  font-weight: 600;
}
.opt-big .v {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.opt-rows {
  padding: 0 16px 12px;
}
.opt-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
}
.opt-row .k {
  color: var(--ink-3);
  font-weight: 600;
}
.opt-row .v {
  font-weight: 600;
}
.opt-row .v.good {
  color: var(--primary-head);
  font-weight: 700;
}
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.kpi-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.kpi-card:hover {
  border-color: var(--line-2);
  box-shadow: var(--sh1);
}
.kpi-card .l {
  font-size: 11.5px;
  color: var(--ink-3);
  font-weight: 600;
}
.kpi-card .v {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
.kpi-card .v small {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  margin-left: 3px;
}
.kpi-card .bar {
  height: 6px;
  border-radius: 99px;
  background: var(--surface-3);
  margin-top: 8px;
  overflow: hidden;
}
.kpi-card .bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--primary);
  transform-origin: left;
  animation: growX 0.8s var(--ease) both;
}
.kpi-card.low .bar i {
  background: var(--warn);
}
.kpi-card.sel {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-a10);
}
.bar-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bar-item {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.bar-item .n {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--surface-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
}
.bar-item b {
  display: block;
  font-size: 13px;
}
.bar-item p {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.55;
}
.bar-item .src {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.note-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.note-list li {
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: 10px;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.note-list li i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  margin-top: 7px;
}
.plan {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan-r {
  display: grid;
  grid-template-columns: 28px 1fr 160px 120px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.plan-r .n {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--surface-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  font-weight: 800;
  font-size: 12px;
}
.plan-r b {
  display: block;
  font-size: 13px;
}
.plan-r span.d {
  display: block;
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 2px;
}
.plan-r .ow {
  font-size: 12px;
  font-weight: 600;
}
.plan-r .ow small {
  display: block;
  color: var(--ink-3);
  font-weight: 600;
}
.plan-r .due {
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--surface-2);
  border-radius: var(--radius);
  min-height: 120px;
}
.msg {
  max-width: 78%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(6px);
  animation: msgIn 0.35s var(--ease) forwards;
}
.msg.them {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}
.msg.me {
  align-self: flex-end;
  background: var(--primary-deep);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.msg b {
  display: block;
  font-size: 11px;
  margin-bottom: 2px;
  opacity: 0.75;
}
.fb {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.fb h4 {
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 800;
}
.fb ul {
  margin: 0;
  padding-left: 18px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.fb li {
  margin: 3px 0;
}
.transcript {
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink-2);
  padding: 14px 16px;
  background: var(--surface-2);
  border-radius: var(--radius);
  max-height: 230px;
  overflow: auto;
}
.transcript p {
  margin: 0 0 10px;
}
.transcript p:last-child {
  margin: 0;
}
.transcript .t {
  color: var(--ink-4);
  font-size: 11.5px;
  font-weight: 700;
  margin-right: 6px;
  font-variant-numeric: tabular-nums;
}
.guide h4 {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}
.guide ol,
.guide ul {
  margin: 0;
  padding-left: 20px;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.55;
}
.guide li {
  margin: 4px 0;
}
.guide .blk {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.35s var(--ease),
    transform 0.35s var(--ease);
}
.guide .blk.in {
  opacity: 1;
  transform: none;
}
.guide .blk:last-child {
  border-bottom: 0;
}
.rev {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.rev .chip {
  height: 22px;
}
.lib {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.lib-i {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
}
.lib-i:hover {
  border-color: var(--line-2);
  box-shadow: var(--sh1);
}
.lib-i .ic {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--surface-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-head);
}
.lib-i b {
  display: block;
  font-size: 13px;
}
.lib-i .m {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 3px;
}
.lib-i .f {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.l3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.l3 .col {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.l3 .col-h {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 800;
}
.l3 .col-h span {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 600;
  margin-left: auto;
  white-space: nowrap;
}
.l3 .col-b {
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.55;
}
.l3 .big {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.l3 .big small {
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 600;
  margin-left: 4px;
}
.chk {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chk li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  align-items: start;
}
.chk li i {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-tint);
  color: var(--primary-head);
}
.chk li.no i {
  background: var(--surface-3);
  color: var(--ink-4);
}
.phone-wrap {
  display: flex;
  justify-content: center;
  padding: 18px 0 6px;
}
.phone {
  width: 380px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 28px;
  padding: 14px;
  box-shadow: var(--sh3);
}
.phone-in {
  border-radius: 18px;
  background: var(--bg);
  min-height: 560px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ph-top {
  padding: 14px 16px 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.ph-top b {
  font-size: 14px;
  display: block;
}
.ph-top span {
  font-size: 11.5px;
  color: var(--ink-3);
}
.ph-body {
  flex: 1;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rec-btn {
  align-self: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px -10px var(--primary);
  transition:
    transform 0.2s var(--spring),
    background 0.2s;
}
.rec-btn:hover {
  transform: scale(1.04);
}
.rec-btn.on {
  background: var(--bad);
}
.rec-btn.on::before {
  content: '';
  position: absolute;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 2px solid var(--bad);
  animation: recPing 1.6s var(--ease) infinite;
}
.rec-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}
.rec-wrap .t {
  font-size: 12.5px;
  color: var(--ink-3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 28px;
}
.wave i {
  width: 4px;
  border-radius: 2px;
  background: var(--primary);
  height: 8px;
}
.rec-wrap.on .wave i {
  animation: wave 0.9s ease-in-out infinite;
}
.wave i:nth-child(2) {
  animation-delay: 0.12s;
}
.wave i:nth-child(3) {
  animation-delay: 0.24s;
}
.wave i:nth-child(4) {
  animation-delay: 0.36s;
}
.wave i:nth-child(5) {
  animation-delay: 0.48s;
}
.wave i:nth-child(6) {
  animation-delay: 0.6s;
}
.wave i:nth-child(7) {
  animation-delay: 0.72s;
}
.ph-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12.5px;
}
.ph-card h5 {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.ph-card ul {
  margin: 0;
  padding-left: 16px;
  color: var(--ink-2);
  line-height: 1.5;
}
.ph-card.enter {
  animation: pgIn 0.4s var(--ease) both;
}
.sig {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.sig-i {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: start;
}
.sig-i h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
}
.sig-i p {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.sig-i .meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  align-items: center;
}
.cov {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
}
.cov i {
  width: 60px;
  height: 6px;
  border-radius: 99px;
  background: var(--surface-3);
  overflow: hidden;
  display: inline-block;
}
.cov i b {
  display: block;
  height: 100%;
  background: var(--primary);
}
.assign {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  min-width: 200px;
}
.assign .done {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-2);
}
.sig-i.assigned .assign .btn {
  display: none;
}
.sig-i.assigned .assign .done {
  display: flex;
}
.brief-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.alert-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 12.5px;
  background: var(--surface);
}
.alert-line .d6 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warn);
  flex: 0 0 auto;
}
.alert-line .sp {
  flex: 1;
}
.story-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.story-chip b {
  color: var(--primary-head);
}
@keyframes msgIn {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes recPing {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
@keyframes wave {
  0%,
  100% {
    height: 8px;
  }
  50% {
    height: 26px;
  }
}
.tbl td .gapchip {
  white-space: normal;
  height: auto;
  min-height: 24px;
  padding: 3px 9px;
  line-height: 1.3;
  text-align: left;
}
#candRows .sub {
  white-space: normal;
}
@media (max-width: 1500px) {
  .grid-side {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}
.ev .tbl {
  table-layout: fixed;
}
.ev .tbl th,
.ev .tbl td {
  padding: 8px 8px;
  white-space: normal;
}
.ev .tbl th:first-child,
.ev .tbl td:first-child {
  width: 38%;
}

.hero .goal {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
  max-width: 760px;
  position: relative;
  z-index: 3;
}
.hero .goal > div {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  padding: 12px 14px;
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  min-width: 0;
}
.hero .goal .v {
  font-size: 26px;
  margin-top: 6px;
}

.card-h,
.ai-h {
  margin: 10px 10px 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--primary-tint2);
  border: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.card-h h2,
.ai-h h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-h h2::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  flex: 0 0 auto;
}
.ai-h {
  background: linear-gradient(90deg, var(--primary-tint), var(--primary-tint2));
}
.card > .tbl,
.card > .card-b,
.aibox > .card-b,
.aibox > #aiBody,
.aibox > #skBody {
  margin-top: 4px;
}
.pf-card .h {
  margin: 10px 10px 0;
  border-radius: 12px;
  background: var(--primary-tint2);
  border: 1px solid var(--line);
}
.ev .card-h {
  margin: 10px 10px 0;
}

.ktbl td {
  vertical-align: middle;
}
.spark {
  width: 96px;
  height: 28px;
  display: block;
}
.spark path {
  fill: none;
  stroke: var(--primary);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.spark path.area {
  fill: var(--primary-a10);
  stroke: none;
}
.spark circle {
  fill: var(--primary);
  stroke: #fff;
  stroke-width: 1.2;
}
.spark.low path {
  stroke: var(--warn);
}
.spark.low path.area {
  fill: rgba(180, 83, 9, 0.1);
}
.spark.low circle {
  fill: var(--warn);
}
.kpi4 {
  display: inline-flex;
  gap: 4px;
}
.kpi4 i {
  width: 22px;
  height: 8px;
  border-radius: 3px;
  background: var(--primary);
  display: block;
}
.kpi4 i.lo {
  background: var(--warn);
}
.kpi4 i.mid {
  background: var(--primary-soft);
}
.score {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.score i {
  width: 64px;
  height: 6px;
  border-radius: 99px;
  background: var(--surface-3);
  overflow: hidden;
  display: inline-block;
}
.score i b {
  display: block;
  height: 100%;
  background: var(--primary);
}
.score.lo i b {
  background: var(--warn);
}
.trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.trend.up {
  color: var(--ok-ink);
}
.trend.dn {
  color: var(--warn-ink);
}
.trend.fl {
  color: var(--ink-3);
}
.nine.xs {
  gap: 1.5px;
}
.nine.xs i {
  width: 7px;
  height: 7px;
  background: var(--surface-3);
}
.nine.xs i.on {
  background: var(--primary);
  box-shadow: none;
}
.ktbl .kand .sub {
  white-space: nowrap;
}
.kin-legend {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 11.5px;
  color: var(--ink-3);
  padding: 10px 16px;
  border-top: 1px solid var(--line);
}
.kin-legend i {
  display: inline-block;
  width: 14px;
  height: 8px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: 0;
}
.dist {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.dist .kpi-card .v {
  font-size: 20px;
}

/* bagan organisasi */
.og {
  padding: 18px 16px 8px;
  overflow-x: auto;
}
.og-root {
  display: flex;
  justify-content: center;
}
.og-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  min-width: 0;
}
.og-card.root {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: linear-gradient(135deg, var(--primary-tint), #fff);
  border-color: var(--primary-a30);
}
.og-t b {
  display: block;
  font-size: 13px;
}
.og-t span {
  display: block;
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
.og-rs {
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
}
.og-rs b {
  color: var(--ink);
  font-size: 16px;
}
.og-trunk {
  height: 22px;
  position: relative;
}
.og-trunk::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--line-2);
}
.og-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 18px;
  position: relative;
  padding-top: 16px;
}
.og-row::before {
  content: '';
  position: absolute;
  left: calc(100% / 6);
  right: calc(100% / 6);
  top: 0;
  height: 2px;
  background: var(--line-2);
}
.og-node:nth-child(n + 4) .og-line {
  top: -14px;
  height: 14px;
  background: var(--line);
}
.og-node {
  position: relative;
  cursor: pointer;
}
.og-line {
  position: absolute;
  left: 50%;
  top: -16px;
  height: 16px;
  width: 2px;
  background: var(--line-2);
}
.og-node .og-card {
  height: 100%;
  transition:
    border-color 0.15s,
    box-shadow 0.2s,
    transform 0.15s;
}
.og-node:hover .og-card {
  border-color: var(--primary-a30);
  box-shadow: var(--sh-main);
  transform: translateY(-2px);
}
.og-node.rec .og-card {
  background: linear-gradient(180deg, var(--primary-tint2), #fff);
  border-color: var(--primary-a30);
}
.og-node.rec .og-head .pav {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--primary);
}
.og-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.og-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 10px;
  flex-wrap: wrap;
}
.og-stat b {
  color: var(--ink);
  font-size: 13px;
}
.og-mem {
  display: flex;
  align-items: center;
  margin-top: 10px;
  padding-left: 4px;
}
.og-mem .pav {
  margin-left: -6px;
  box-shadow: 0 0 0 2px #fff;
}
.og-more {
  margin-left: 4px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  border: 1px dashed var(--line-2);
}
/* squad */
.sq-lead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px 4px;
}
.sq-lead b {
  display: block;
  font-size: 14px;
}
.sq-lead span {
  display: block;
  font-size: 12px;
  color: var(--ink-3);
}
.sq-trunk {
  height: 18px;
  position: relative;
  margin-left: 38px;
}
.sq-trunk::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--line-2);
}
.sq-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  padding: 0 16px 16px;
  position: relative;
  align-items: start;
}
.sq-col {
  align-self: start;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
}
.sq-col.rek {
  background: repeating-linear-gradient(135deg, var(--surface-2) 0 10px, #eef2f4 10px 11px);
}
.sq-h b {
  display: block;
  font-size: 13px;
}
.sq-h span {
  display: block;
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 1px;
}
.sq-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}
.sq-slot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sq-slot .pav {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3px var(--primary-soft);
}
.sq-slot.empty {
  border: 1.5px dashed var(--line-2);
  color: var(--ink-4);
  background: #fff;
}
.sq-f {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
}
.sq-f .meta {
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* prioritas strategis */
.st-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 1500px) {
  .st-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.st-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition:
    border-color 0.15s,
    box-shadow 0.25s,
    transform 0.15s;
  box-shadow: var(--sh-main);
}
.st-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary-a30);
}
.st-card.on {
  border-color: var(--primary);
  box-shadow:
    0 0 0 3px var(--primary-a10),
    var(--sh-main);
}
.st-card.new {
  background: repeating-linear-gradient(135deg, var(--surface) 0 12px, var(--surface-2) 12px 13px);
  border-style: dashed;
  box-shadow: none;
}
.st-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.st-pil {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--primary-head);
}
.st-card h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.st-sub {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: -6px;
}
.st-imp {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: 10px;
}
.st-imp div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.st-imp b {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.st-imp span {
  font-size: 11.5px;
  color: var(--ink-3);
}
.st-wfl {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.st-bar {
  height: 8px;
  border-radius: 99px;
  background: var(--surface-3);
  overflow: hidden;
  margin: 6px 0;
}
.st-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--primary-head), var(--primary));
  border-radius: 99px;
  transform-origin: left;
  animation: growX 0.8s var(--ease) both;
}
.st-wfn {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--ink-3);
}
.st-wfn b {
  color: var(--ink);
}
.st-own {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
}
.st-own b {
  display: block;
  font-size: 12.5px;
}
.st-own span {
  font-size: 11px;
  color: var(--ink-3);
}
.st-new-b {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}
.st-new-b p {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.55;
}

/* penajaman terpandu */
.tj-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 14px;
}
.tj-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-3);
}
.tj-step i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-style: normal;
  background: var(--surface-3);
  color: var(--ink-3);
  flex: 0 0 auto;
}
.tj-step.cur {
  border-color: var(--primary);
  color: var(--primary-head);
  box-shadow: 0 0 0 3px var(--primary-a10);
}
.tj-step.cur i {
  background: var(--primary);
  color: #fff;
}
.tj-step.done {
  color: var(--ink);
}
.tj-step.done i {
  background: var(--primary-tint);
  color: var(--primary-head);
}
.tj-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 14px;
  align-items: start;
}
.tj-stage {
  background: var(--hero-grad);
  color: #fff;
  border-radius: 16px;
  padding: 28px 30px 24px;
  box-shadow: var(--sh-hero);
  position: relative;
  overflow: hidden;
  min-height: 380px;
  display: flex;
  flex-direction: column;
}
.tj-stage::after {
  content: '';
  position: absolute;
  right: -60px;
  top: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  filter: blur(30px);
}
.tj-eb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  position: relative;
  z-index: 1;
}
.tj-stage h2 {
  margin: 14px 0 8px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  position: relative;
  z-index: 1;
  min-height: 2.4em;
}
.tj-stage h2.typing::after {
  content: '';
  display: inline-block;
  width: 3px;
  height: 0.9em;
  background: var(--accent);
  margin-left: 4px;
  vertical-align: -2px;
  animation: caret 0.8s steps(1) infinite;
}
.tj-why {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  position: relative;
  z-index: 1;
}
.tj-stage.end h2 {
  font-size: 26px;
}
.tj-stage.end p {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.8);
  max-width: 60ch;
  position: relative;
  z-index: 1;
}
.tj-ans {
  margin-top: auto;
  padding-top: 22px;
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.4s var(--ease),
    transform 0.4s var(--ease);
}
.tj-ans.in {
  opacity: 1;
  transform: none;
}
.tj-ans-h {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}
.tj-ans-h b {
  color: #fff;
}
.tj-ans-t {
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.6;
  min-height: 64px;
}
.tj-ans-f {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.tj-ans-f .sp {
  flex: 1;
}
.tj-ans-f .btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--primary-deep);
}
.tj-ans-f .btn.primary:hover {
  background: #f0bb5a;
  border-color: #f0bb5a;
}
.tj-prof {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  transition:
    background 0.3s,
    border-color 0.3s;
}
.tj-prof .k {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.tj-prof .v {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 3px;
  line-height: 1.45;
}
.tj-prof .v span {
  color: var(--ink-4);
  font-weight: 500;
}
.tj-prof.on {
  background: var(--surface);
  border-color: var(--primary-a30);
}
.tj-prof.fresh {
  animation: sorot 1.4s var(--ease);
}
.tj-prof .cap {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.tj-prof .cap span {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--primary-tint);
  color: var(--primary-head);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
@keyframes caret {
  50% {
    opacity: 0;
  }
}
@media (max-width: 1400px) {
  .tj-grid {
    grid-template-columns: 1fr;
  }
  .tj-stage {
    min-height: 320px;
  }
}
.tj-sum {
  margin-top: auto;
  padding-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.tj-sum div {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  padding: 10px 12px;
}
.tj-sum b {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}
.tj-sum span {
  display: block;
  font-size: 12.5px;
  margin-top: 3px;
  line-height: 1.45;
}
.tj-sum div:last-child {
  grid-column: 1/-1;
}

/* ===== Avatar berfoto ===== */
.pav {
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--primary-tint);
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3px var(--primary-soft);
  cursor: pointer;
  transition: transform 0.15s var(--spring);
}
.pav:hover {
  transform: scale(1.06);
}
.pav.lg {
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 5px var(--primary-a30);
}
.pav.big {
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.9),
    0 0 0 6px rgba(255, 255, 255, 0.25);
}
.who .pav {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3px var(--primary-soft);
}
.kand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.kand .nm {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--ink);
}
.kand .sub {
  font-size: 11.5px;
  color: var(--ink-3);
}
.kand .sb {
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
/* ===== Modal profil ===== */
.pf-root {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: none;
}
.pf-root.on {
  display: block;
}
.pf-scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  animation: fade 0.2s var(--ease);
}
.pf {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(1180px, 96vw);
  height: min(92vh, 860px);
  background: var(--bg);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh3);
  animation: pfIn 0.22s var(--ease);
}
.pf-h {
  background: linear-gradient(90deg, var(--primary-deep), var(--primary-head));
  color: #fff;
  padding: 20px 24px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
}
.pf-h .pav {
  width: 64px;
  height: 64px;
}
.pf-h .eb {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.pf-h h2 {
  margin: 2px 0 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.pf-h .r {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
}
.pf-h .u {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
  margin-top: 1px;
}
.pf-h .sp {
  flex: 1;
}
.pf-h .ready {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ok-ink);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.pf-h .ready.warn {
  color: var(--warn-ink);
}
.pf-x {
  position: absolute;
  right: 14px;
  top: 12px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
.pf-x:hover {
  background: rgba(255, 255, 255, 0.22);
}
.pf-9 {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  padding: 8px 12px;
  margin-right: 44px;
}
.pf-9 .lbl {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.pf-9 .v {
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.nine {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.nine i {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.22);
}
.nine i.on {
  background: #b5d56a;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7);
}
.nine.big {
  gap: 6px;
  width: 150px;
}
.nine.big i {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: var(--surface-3);
}
.nine.big i.on {
  background: #b5d56a;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3px #8fb33c;
}
.pf-strip {
  display: inline-flex;
  margin: 14px 24px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
  flex: 0 0 auto;
}
.pf-strip > div {
  min-width: 140px;
  padding: 9px 14px 10px;
  border-right: 1px solid var(--line);
  position: relative;
}
.pf-strip > div:last-child {
  border-right: 0;
}
.pf-strip > div::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2.5px;
  background: linear-gradient(90deg, var(--primary-head), var(--primary));
}
.pf-strip > div.warn::before {
  background: linear-gradient(90deg, #b45309, #e8b04b);
}
.pf-strip > div.ok::before {
  background: linear-gradient(90deg, #065f46, #0d9488);
}
.pf-strip b {
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--primary-head);
}
.pf-strip > div.warn b {
  color: var(--warn-ink);
}
.pf-strip > div.ok b {
  color: var(--ok-ink);
}
.pf-strip span {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 600;
  margin-left: 6px;
}
.pf-tabs {
  display: inline-flex;
  gap: 4px;
  margin: 12px 24px 0;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  flex: 0 0 auto;
}
.pf-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  line-height: 1;
  white-space: nowrap;
}
.pf-tab:hover {
  background: var(--surface-2);
}
.pf-tab.on {
  background: var(--primary-tint);
  color: var(--primary-head);
  font-weight: 800;
}
.pf-body {
  flex: 1;
  overflow: auto;
  padding: 16px 24px 24px;
}
.pf-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.pf-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.pf-card .h {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: 800;
}
.pf-card .h .ic {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--primary-tint);
  color: var(--primary-head);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pf-card .h .sp {
  flex: 1;
}
.pf-card .b {
  padding: 16px 18px;
}
.dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  margin: 0;
}
.dl dt {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.dl dd {
  margin: 3px 0 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}
.pf-9grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.pf-9grid .box {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.pf-9grid .box .l {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.pf-9grid .box .v {
  font-size: 19px;
  font-weight: 800;
}
.gauge {
  width: 170px;
}
.gauge .ndl {
  transform-origin: 50px 50px;
  transition: transform 0.8s var(--ease);
}
.gv {
  font-size: 30px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.gv small {
  font-size: 14px;
}
.gl {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}
.tiles div {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 10px 12px;
}
.tiles .l {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.tiles .v {
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.seg2 {
  display: inline-flex;
  background: var(--surface-3);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  margin-bottom: 14px;
}
.seg2 button {
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.seg2 button.on {
  background: var(--primary-head);
  color: #fff;
}
.seg2 button b {
  margin-left: 6px;
  opacity: 0.75;
}
.pf-komp {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 16px;
  align-items: start;
}
.radar-pop {
  background: linear-gradient(180deg, var(--primary-tint), #fff);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
}
.radar-pop h4 {
  margin: 0 0 6px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-head);
}
.radar-pop svg {
  width: 100%;
  height: auto;
  display: block;
}
.radar-pop .lg {
  display: flex;
  justify-content: center;
  gap: 18px;
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 6px;
}
.radar-pop .lg i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: -1px;
}
.cgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.cc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
}
.cc .t {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
}
.cc .t .st {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 800;
  color: #c2410c;
  white-space: nowrap;
}
.cc .t .st.ok {
  color: var(--primary-head);
}
.cc .bars {
  display: flex;
  gap: 6px;
  margin: 12px 0 8px;
}
.cc .bars i {
  flex: 1;
  height: 6px;
  border-radius: 2px;
  background: var(--surface-3);
}
.cc .bars i.f {
  background: #f97316;
}
.cc.ok .bars i.f {
  background: var(--primary);
}
.cc .tg {
  text-align: right;
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 600;
}
.hist {
  margin: 0;
  padding: 0;
  list-style: none;
}
.hist li {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
  align-items: center;
}
.hist li:last-child {
  border-bottom: 0;
}
.hist .d {
  font-weight: 800;
  color: var(--primary-head);
  font-variant-numeric: tabular-nums;
}
@keyframes pfIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
@media (max-width: 1280px) {
  .pf-komp {
    grid-template-columns: 300px 1fr;
  }
}

/* ===== Polish: layering, aksen hangat, tipografi, motion ===== */
:root {
  --bg: #f3f6f7;
  --accent-deep: #b7801f;
  --sh-main: 0 1px 2px rgba(13, 61, 64, 0.05), 0 10px 28px -18px rgba(13, 61, 64, 0.22);
  --sh-hero: 0 14px 32px -18px rgba(13, 61, 64, 0.5);
}
body {
  background: var(--bg);
}
/* tiga tingkat permukaan */
.page > .card,
.stack > .card,
.stack > .aibox,
.page > .aibox,
.grid-main > div > .card,
.grid-main > div > .aibox,
.grid2 > .card,
.opt,
.decide {
  box-shadow: var(--sh-main);
}
.ev,
.grid-side > div:last-child > .card,
.grid-main > #evWrap > .card {
  box-shadow: none;
}
.hero {
  box-shadow: var(--sh-hero);
}
.grid2,
.grid-side,
.grid-main,
.ctl,
.kpi-row.mt16,
.splitnum.mt16,
.l3.mt16 {
  margin-top: 14px;
}
.ai-h {
  background: linear-gradient(180deg, var(--primary-tint2), #fff);
}
.ai-ic {
  background: linear-gradient(135deg, #e8b04b, #c98f2e);
  box-shadow: 0 4px 10px -6px rgba(201, 143, 46, 0.8);
}
/* aksen hangat terukur */
.dec-n.fin .v {
  color: var(--accent-deep);
}
.rank.r1 {
  background: linear-gradient(135deg, #e8b04b, #c98f2e);
  box-shadow: 0 4px 10px -6px rgba(201, 143, 46, 0.9);
}
#candRows tr[data-c='0'] {
  background: linear-gradient(90deg, rgba(232, 176, 75, 0.08), transparent 60%);
}
.bar-f.dim {
  background: var(--line-2);
}
.kpi:last-child {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}
/* tipografi dan ritme */
.card-h h2,
.ai-h h2 {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.005em;
}
.tbl th {
  font-size: 10px;
  letter-spacing: 0.07em;
}
.tbl th.num,
.tbl td.num {
  padding-left: 16px;
  padding-right: 16px;
}
.match i {
  width: 56px;
}
.dec-n .v {
  font-size: 48px;
  letter-spacing: -0.035em;
}
.dec-op {
  color: var(--ink-4);
  font-weight: 400;
  font-size: 24px;
}
.pf-h h2 {
  letter-spacing: -0.02em;
}
/* chip: tiga keluarga */
.chip.brand {
  background: var(--primary-tint);
  color: var(--primary-head);
  border-color: transparent;
}
.chip.warn,
.gapchip {
  background: #faf4e6;
  color: #8a5a12;
}
.chip.ok {
  background: var(--primary-tint);
  color: var(--primary-head);
}
/* momen tanda tangan */
.sankey .lnk {
  transition: stroke-opacity 0.25s var(--ease);
}
.sankey:hover .lnk {
  stroke-opacity: 0.14;
}
.sankey .lnk:hover {
  stroke-opacity: 0.8;
}
.gauge .ndl {
  animation: ndl 0.9s var(--ease) both;
}
@keyframes ndl {
  from {
    transform: rotate(-90deg);
  }
  to {
    transform: rotate(var(--rot));
  }
}
.radar-pop polygon.cur {
  transform-box: fill-box;
  transform-origin: center;
  animation: radarIn 0.7s var(--ease) both;
}
.radar-pop circle {
  animation: fade 0.5s var(--ease) 0.4s both;
}
@keyframes radarIn {
  from {
    transform: scale(0.25);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.lg-art::before {
  content: '';
  position: absolute;
  inset: 8% 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 122, 139, 0.11), transparent 72%);
  filter: blur(14px);
}
.lg-art canvas {
  position: relative;
}
/* detail dari jauh */
.sb-gh .lk {
  opacity: 0;
  transition: opacity 0.15s;
}
.sb-gh:hover .lk,
.app.rail .sb-gh .lk {
  opacity: 1;
}
.top .sim {
  display: none;
}
.sb-foot small {
  color: var(--ink-4);
  margin-left: auto;
  white-space: nowrap;
}
.btn.primary {
  transition:
    background 0.12s,
    transform 0.12s var(--ease),
    box-shadow 0.12s;
}
.btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -8px rgba(0, 122, 139, 0.7);
}
.btn.primary:active {
  transform: none;
  box-shadow: none;
}
.crumb {
  background: var(--surface);
  border-color: var(--line);
}
@media (prefers-reduced-motion: reduce) {
  .gauge .ndl,
  .radar-pop polygon.cur,
  .radar-pop circle {
    animation: none;
  }
}
.ev .tbl th,
.ev .tbl td {
  white-space: nowrap;
  padding-left: 8px;
  padding-right: 8px;
}
.ev .tbl th:first-child,
.ev .tbl td:first-child {
  white-space: normal;
  width: auto;
}
.ev .tbl {
  table-layout: auto;
}
.sankey .lnk {
  stroke-opacity: 0.55;
}
.sankey:hover .lnk {
  stroke-opacity: 0.18;
}
.sankey .lnk:hover {
  stroke-opacity: 0.9;
}
.grid-side {
  grid-template-columns: minmax(0, 1fr) 400px;
}
@media (max-width: 1500px) {
  .grid-side {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
}
.ev .tbl th.num {
  white-space: nowrap;
}
.chat {
  max-height: 420px;
  overflow: auto;
}
.search input[readonly] {
  background: var(--surface-2);
  color: var(--ink-2);
}
.hchip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.crumb .cb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 4px;
  border-radius: 6px;
  font: inherit;
  font-weight: 600;
  color: var(--ink-3);
  transition:
    background 0.12s,
    color 0.12s;
}
.crumb .cb:hover {
  background: var(--surface-3);
  color: var(--ink);
}
.btn.icon-only {
  width: 34px;
  padding: 0;
  justify-content: center;
}
.sb-grip {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -3px;
  width: 6px;
  cursor: col-resize;
  z-index: 5;
}
.sb-grip:hover {
  background: var(--primary-a20);
}
.side {
  position: relative;
}
.app.rail .sb-grip {
  display: none;
}
.app.rail .sb-grp.cur .sb-gh {
  background: var(--primary-tint);
}
.app.rail .sb-grp.cur .sb-gh .ix {
  color: var(--primary-head);
}
.app.rail .sb-brand {
  cursor: pointer;
}
.app.rail .sb-brand:hover {
  background: var(--surface-2);
}
.app.rail .sb-scroll {
  padding-bottom: 60px;
}
.sb-expand {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  justify-content: center;
}
.app.rail .sb-expand {
  display: flex;
}
.sb-expand button {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  border: 1px solid var(--line);
  background: var(--surface);
}
.sb-expand button:hover {
  background: var(--surface-2);
  color: var(--ink);
}

/* Pita navigasi atas: satu band teal di sidebar brand + top bar */
:root {
  --band: linear-gradient(100deg, #0d3d40 0%, #0e4a51 40%, #0a6a78 100%) fixed;
}
.top,
.sb-brand {
  background: var(--band);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.sb-brand:hover {
  background: var(--band);
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.04);
}
.sb-brand svg.mk use {
  fill: #fff;
}
.sb-brand .nm b {
  color: #fff;
}
.sb-brand .nm span {
  color: rgba(255, 255, 255, 0.68);
}
.sb-col {
  color: rgba(255, 255, 255, 0.72);
}
.sb-col:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.top .crumb {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.72);
}
.top .crumb b {
  color: #fff;
}
.top .crumb svg {
  color: rgba(255, 255, 255, 0.45);
}
.top .crumb .cb {
  color: rgba(255, 255, 255, 0.72);
}
.top .crumb .cb:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.top .btn.icon-only {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.top .btn.icon-only:hover {
  background: rgba(255, 255, 255, 0.16);
}
.top .who {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.top .who:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
}
.top .who .t span {
  color: rgba(255, 255, 255, 0.68);
}
.top .who .pav {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.9),
    0 0 0 3px var(--accent);
}
/* ===== REV-02 s.d. REV-06: Modul 1 alur kompetensi, WLA mingguan, alokasi parsial ===== */
.hero .facts.facts-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 860px;
}
.st-req {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.st-req-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.st-req-lbl {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.st-req-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.st-req-main b {
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.st-req-main span,
.st-req-sub {
  font-size: 11.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.st-req-sub {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.komp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 16px;
}
.komp-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition:
    border-color 0.15s,
    box-shadow 0.2s;
}
.komp-card:hover {
  border-color: var(--primary-a30);
  box-shadow: var(--sh1);
}
.komp-card .kt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}
.komp-card .kt .i {
  color: var(--primary);
}
.komp-card .kd {
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.45;
}
.komp-card .kn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  font-size: 11.5px;
  color: var(--ink-2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.komp-card .kn .go {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--primary-head);
}
.alloc-st {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
}
.alloc-st .tx {
  flex: 1;
  min-width: 0;
}
.alloc-st .tx b {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}
.alloc-st .tx span {
  font-size: 12.5px;
  color: var(--ink-3);
}
.alloc-nums {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.alloc-nums > div {
  padding: 12px 16px;
  border-right: 1px solid var(--line);
}
.alloc-nums > div:last-child {
  border-right: 0;
}
.alloc-nums .l {
  font-size: 11.5px;
  color: var(--ink-3);
  font-weight: 600;
  white-space: nowrap;
}
.alloc-nums .v {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--primary-head);
  white-space: nowrap;
}
.alloc-nums .v small {
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 600;
  margin-left: 4px;
}
.wla-trig {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.wla-trig .lab {
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.wla-trig .rng {
  width: 300px;
}
.wla-trig .acts {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.wla-trig .hint {
  font-size: 11.5px;
  color: var(--ink-3);
  max-width: 34ch;
  line-height: 1.4;
}
.wla-fbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}
.wla-fbar .fl {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-4);
  min-width: 82px;
}
.wla-fpill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.wla-fpill:hover {
  border-color: var(--line-2);
}
.wla-fpill b {
  font-weight: 800;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.wla-fpill.on {
  background: var(--primary-tint);
  border-color: var(--primary-a30);
  color: var(--primary-head);
}
.wla-fpill.on b {
  color: var(--primary-head);
}
.emp-id {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.emp-id .pav {
  border-radius: 50%;
  flex: 0 0 auto;
}
.emp-id .t {
  min-width: 0;
}
.emp-id .t .nm {
  white-space: nowrap;
}
.emp-id .t .sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
.komp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 240px;
}
.komp-tags span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--surface-3);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink-2);
  white-space: nowrap;
}
.komp-tags span.hit {
  background: var(--primary-tint);
  color: var(--primary-head);
}
.ld-bar {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 230px;
}
.ld-bar-t {
  display: flex;
  height: 12px;
  border-radius: 99px;
  overflow: hidden;
  background: var(--surface-3);
}
.ld-bar-t i {
  display: block;
  height: 100%;
  transition: width 0.55s var(--ease);
}
.ld-bar-t .man {
  background: var(--primary-head);
}
.ld-bar-t .full {
  background: var(--primary);
}
.ld-bar-t .enh {
  background: var(--flow-2);
}
.ld-bar-t .free {
  background: repeating-linear-gradient(135deg, var(--primary-tint) 0 5px, #cfe7eb 5px 7px);
}
.ld-bar-l {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ld-bar-l b {
  color: var(--ink);
}
.cut-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.cut-cell .sub {
  white-space: nowrap;
}
.role-clean {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1180px;
  margin: 0 auto;
}
.rc-head {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.rc-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
}
.rc-top .pav {
  border-radius: 50%;
}
.rc-top .rc-who b {
  display: block;
  font-size: 17px;
  font-weight: 800;
}
.rc-top .rc-who span {
  font-size: 12.5px;
  color: var(--ink-3);
}
.rc-top .sp {
  flex: 1;
}
.rc-plan {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 18px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 12.5px;
  color: var(--ink-2);
}
.rc-plan .i {
  color: var(--primary);
  flex: 0 0 auto;
}
.rc-plan b {
  color: var(--ink);
}
.rc-track {
  padding: 14px 18px 16px;
}
.rc-track .ld-bar-t {
  height: 16px;
}
.rc-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.rc-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.rc-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}
.rc-kpis {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}
.bdg-ai {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  background: var(--surface-3);
  color: var(--ink-2);
}
.bdg-ai i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-4);
}
.bdg-ai.full {
  background: var(--primary-tint);
  color: var(--primary-head);
}
.bdg-ai.full i {
  background: var(--primary);
}
.bdg-ai.enh {
  background: #eef7f8;
  color: #0f5f69;
}
.bdg-ai.enh i {
  background: var(--flow-2);
}
.jd-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 10px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.jd-cell {
  display: flex;
  align-items: flex-start;
}
.alok-sw {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.alok-sw-b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
}
.alok-sw-b b {
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.alok-sw-b.on {
  background: var(--primary-deep);
  border-color: var(--primary-deep);
  color: #fff;
}
.alok-sw-b.on b {
  color: rgba(255, 255, 255, 0.75);
}
.ws-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
  align-items: start;
}
.ws-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.ws-h {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.ws-h .t {
  flex: 1;
  min-width: 0;
}
.ws-h .t b {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
}
.ws-h .t span {
  font-size: 11.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.ws-cov {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ws-cov .ld-bar-t {
  height: 10px;
}
.ws-asg {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ws-p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface-2);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s;
}
.ws-p:hover {
  border-color: var(--primary-a30);
}
.ws-p .pav {
  border-radius: 50%;
}
.ws-p-t {
  min-width: 0;
}
.ws-p-t b {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-p-t span {
  display: block;
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.4;
}
.ws-p-t span em {
  font-style: normal;
  color: var(--ink-2);
  font-weight: 600;
}
.ws-p-n {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--primary-head);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.ws-p.pool {
  cursor: default;
  background: var(--surface);
}
.ws-p.pool .pc {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ws-ext {
  font-size: 12px;
  color: var(--ink-2);
  padding: 10px 12px;
  border: 1px dashed var(--line-2);
  border-radius: 10px;
  line-height: 1.5;
}
.ws-f {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.ws-f b {
  color: var(--ink);
}
@media (max-width: 1280px) {
  .ws-grid {
    grid-template-columns: 1fr;
  }
  .komp-grid {
    grid-template-columns: 1fr;
  }
}
/* ===== REV-07 s.d. REV-10: header filter ringkas, panggung AI, matriks kompetensi, bar beban terpadu ===== */
.wla-trig {
  flex-wrap: nowrap;
}
.wla-trig .rng {
  flex: 0 1 300px;
  min-width: 200px;
}
.wla-trig .acts {
  flex: 0 0 auto;
}
.wla-trig .btn {
  white-space: nowrap;
}
#wlaCard > .card-h {
  flex-wrap: nowrap;
}
#wlaCard > .card-h .meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.fdd-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.fdd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: var(--surface);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  max-width: 300px;
  transition: border-color var(--t-fast);
}
.fdd-btn:hover {
  border-color: var(--ink-4);
}
.fdd-btn .l {
  color: var(--ink-3);
  font-weight: 600;
}
.fdd-btn b {
  font-weight: 800;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 190px;
}
.fdd-btn .n {
  font-weight: 800;
  color: var(--primary-head);
  font-variant-numeric: tabular-nums;
}
.fdd-btn .i {
  color: var(--ink-3);
  transition: transform 0.25s var(--spring);
}
.fdd.open .fdd-btn {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-a10);
}
.fdd.open .fdd-btn .i {
  transform: rotate(180deg);
}
.fdd .dd-pop {
  left: auto;
  right: 0;
  width: 320px;
}
.wla-tbl th.km-h {
  white-space: normal;
  line-height: 1.25;
  width: 86px;
  text-align: center;
}
.wla-tbl td.km-c {
  width: 86px;
}
.wla-tbl td.km-c.hit {
  background: var(--primary-tint);
}
.km {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  vertical-align: middle;
}
.km:not(.on)::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-2);
}
.km.on {
  background: var(--primary);
  color: #fff;
}
.km.on .i {
  stroke-width: 3;
}
.wla-tbl th.lb-h {
  min-width: 380px;
}
.lb-key {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 10px;
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
  color: var(--ink-3);
}
.lb-key i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  display: inline-block;
  margin-left: 6px;
}
.lb-key i.m {
  background: var(--primary-head);
}
.lb-key i.f {
  background: #8fd0d8;
}
.lb-c {
  min-width: 380px;
}
.lb {
  display: flex;
  height: 30px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-3);
}
.lb i {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 100%;
  padding: 0 10px;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  transition: width 0.7s var(--ease);
  min-width: 0;
}
.lb i span {
  overflow: hidden;
  text-overflow: clip;
}
.lb .lb-m {
  background: var(--primary-head);
  color: #fff;
}
.lb .lb-x {
  color: #8fd0d8;
}
.lb .lb-f {
  background: repeating-linear-gradient(135deg, #8fd0d8 0 6px, #a9dce2 6px 9px);
  color: var(--primary-deep);
  justify-content: center;
  padding: 0 2px;
  font-size: 11px;
}
#wlaRows.reveal .wla-r {
  animation: rowIn 0.45s var(--ease) both;
  animation-delay: var(--d);
}
@keyframes rowIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
#wlaTblWrap {
  transition:
    opacity 0.25s,
    filter 0.25s;
}
#wlaTblWrap.dim {
  opacity: 0.18;
  filter: blur(1.5px);
  pointer-events: none;
}
.ai-stage {
  position: relative;
  margin: 14px 16px 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary-deep), var(--primary-head) 60%, #0f5b63);
  color: #fff;
  animation: popIn 0.3s var(--ease);
}
.ai-stage.out {
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.25s,
    transform 0.25s;
}
.ais-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: center;
  padding: 20px 24px;
}
.ais-viz {
  position: relative;
  height: 120px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.ais-wave {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 18px;
  bottom: 44px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ais-wave i {
  flex: 1;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(180deg, #e8b04b, #8fd0d8);
  transform-origin: center;
  animation: aisWave 1.1s ease-in-out infinite;
  animation-delay: calc(var(--i) * -70ms);
}
@keyframes aisWave {
  0%,
  100% {
    transform: scaleY(0.18);
    opacity: 0.55;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}
.ais-scan {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 70px;
  left: -70px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: aisScan 1.6s linear infinite;
}
@keyframes aisScan {
  to {
    left: 100%;
  }
}
.ais-docs {
  position: absolute;
  left: 16px;
  bottom: 10px;
  display: flex;
  gap: 6px;
}
.ais-docs span {
  display: inline-flex;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
  animation: aisPulse 1.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 180ms);
}
.ais-docs .pav {
  border-radius: 50%;
}
@keyframes aisPulse {
  0%,
  100% {
    transform: translateY(0);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
  }
  50% {
    transform: translateY(-3px);
    box-shadow: 0 0 0 3px #e8b04b;
  }
}
.ais-t {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
}
.ais-steps {
  list-style: none;
  margin: 12px 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ais-steps li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.2s;
}
.ais-steps .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  flex: 0 0 auto;
  transition: 0.2s;
}
.ais-steps li.on {
  color: #fff;
  font-weight: 700;
}
.ais-steps li.on .dot {
  border-color: #e8b04b;
  background: #e8b04b;
  box-shadow: 0 0 0 4px rgba(232, 176, 75, 0.25);
  animation: aisPulseDot 0.8s ease-in-out infinite;
}
.ais-steps li.done {
  color: rgba(255, 255, 255, 0.85);
}
.ais-steps li.done .dot {
  background: #8fd0d8;
  border-color: #8fd0d8;
}
@keyframes aisPulseDot {
  50% {
    box-shadow: 0 0 0 7px rgba(232, 176, 75, 0.08);
  }
}
.ais-prog {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ais-bar {
  flex: 1;
  height: 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}
.ais-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #8fd0d8, #e8b04b);
}
.ais-prog b {
  min-width: 42px;
  text-align: right;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.ais-spin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.wla-tbl .emp-id .nm {
  white-space: nowrap;
}
@media (max-width: 1366px) {
  .wla-tbl th.km-h,
  .wla-tbl td.km-c {
    width: 68px;
    padding-left: 4px;
    padding-right: 4px;
  }
  .wla-tbl th.lb-h,
  .lb-c {
    min-width: 300px;
  }
  .lb-key {
    display: none;
  }
  .wla-tbl td,
  .wla-tbl th {
    padding-left: 8px;
    padding-right: 8px;
  }
}
/* ===== REV-13 & REV-14: switcher karyawan, bar per butir JD, chip gelap kontras ===== */
.chip.dk {
  background: #0d3d40;
  border-color: #0d3d40;
  color: #fff;
}
.chip.dk2 {
  background: #007a8b;
  border-color: #007a8b;
  color: #fff;
}
.chip.dk .i,
.chip.dk2 .i {
  color: #fff;
}
.bdg-ai.full {
  background: #0d3d40;
  color: #fff;
}
.bdg-ai.full i {
  background: #8fd0d8;
}
.bdg-ai.enh {
  background: #007a8b;
  color: #fff;
}
.bdg-ai.enh i {
  background: #e6f3f5;
}
.emp-sw {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 4px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
}
.esw-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--ink-2);
}
.esw-nav:hover:not([disabled]) {
  background: var(--surface-2);
}
.esw-nav[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
.esw-nav .flip {
  transform: rotate(180deg);
}
.esw-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px 0 4px;
  border-radius: 999px;
  font-size: 12.5px;
  line-height: 1;
  white-space: nowrap;
}
.esw-btn:hover,
.emp-sw .dd.open .esw-btn {
  background: var(--surface-2);
}
.esw-btn .pav {
  border-radius: 50%;
}
.esw-btn b {
  font-weight: 800;
  color: var(--ink);
}
.esw-btn span {
  color: var(--ink-3);
  font-weight: 600;
}
.esw-btn .i {
  color: var(--ink-3);
  transition: transform 0.25s var(--spring);
}
.emp-sw .dd.open .esw-btn .i {
  transform: rotate(180deg);
}
.esw-n {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  padding: 0 2px;
}
.jd-tbl td.jd-no-c {
  color: var(--ink-3);
  font-weight: 800;
}
.jd-tbl th.lb-h,
.jd-tbl td.lb-c {
  width: 46%;
  min-width: 340px;
}
.jd-tbl tfoot td {
  white-space: nowrap;
}
.lb .lb-f.full {
  background: #007a8b;
  color: #fff;
  justify-content: space-between;
  padding: 0 10px;
}
.ws-p {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.ws-p-t b {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.ws-p-t b small {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-p-t .tk {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink-2);
  font-weight: 600;
}
.ws-p .chip.ws-p-n {
  height: 26px;
  font-size: 11.5px;
  text-align: center;
}
.dec-cmp .tbl th,
.dec-cmp .tbl td {
  white-space: nowrap;
}
.jd-tbl .lb {
  background: #f1f5f9;
}
.jd-tbl .lb .lb-m {
  background: #e2e8f0;
  color: var(--ink);
}
.jd-tbl .lb .lb-f {
  background: #007a8b;
  color: #fff;
}
.jd-tbl .lb .lb-x {
  color: #007a8b;
}
/* Header section gelap dengan ikon (21 Okt 2026 malam) */
.card-h,
.ai-h,
.ev .card-h {
  margin: 10px 10px 0;
  padding: 11px 14px;
  border-radius: 12px;
  border: 0;
  background: linear-gradient(90deg, #0d3d40 0%, #1d5960 55%, #2f7f8e 100%);
  color: #fff;
}
.card-h h2,
.ai-h h2 {
  color: #fff;
}
.card-h h2::before {
  content: none;
}
.card-h h2 > .i.hd-ic {
  width: 18px;
  height: 18px;
  flex: none;
  stroke: #fff;
  opacity: 0.92;
}
.ai-h .ai-ic {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.ai-h .ai-ic .i {
  stroke: #fff;
}
.card-h .meta,
.ai-h .meta {
  color: rgba(255, 255, 255, 0.78) !important;
}
.card-h .btn,
.ai-h .btn,
.card-h .btn.primary,
.ai-h .btn.primary {
  background: #fff;
  border-color: #fff;
  color: var(--primary-deep);
}
.card-h .btn:hover,
.ai-h .btn:hover {
  background: var(--primary-tint);
  border-color: var(--primary-tint);
  box-shadow: none;
}
.card-h .btn .i,
.ai-h .btn .i {
  stroke: var(--primary-deep);
}
.card-h .chip,
.ai-h .chip {
  border-color: transparent;
}
.card-h .chip:not(.ok):not(.warn):not(.brand),
.ai-h .chip:not(.ok):not(.warn):not(.brand) {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.alloc-card.done .card-h {
  background: linear-gradient(90deg, #0d3d40 0%, #1d5960 55%, #2f7f8e 100%);
}
/* KPI hero Detail Business Goal selebar hero, peta tanpa label lokasi */
.hero.tall .hero-in {
  width: 100%;
}
.hero.tall .goal {
  max-width: none;
}
@media (max-width: 900px) {
  .hero.tall .goal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Layar pas 16:9: ukuran stage mengikuti viewport, zoom dihitung fitStage() */
.view,
.fx,
.pf-root,
.scrim {
  width: var(--stage-w, 100vw);
  height: var(--stage-h, 100vh);
  right: auto;
  bottom: auto;
}
.drawer {
  height: var(--stage-h, 100vh);
  bottom: auto;
}
/* Header section seragam */
.card-h,
.ai-h,
.ev .card-h {
  min-height: 56px;
  padding-top: 8px;
  padding-bottom: 8px;
}
/* Dropdown di dalam header gelap tetap terbaca */
.card-h .dd-pop,
.ai-h .dd-pop {
  color: var(--ink);
}
.card-h .dd-pop .dd-opt b,
.card-h .dd-pop .dd-opt .t {
  color: var(--ink);
}
/* KPI hero selalu selebar hero */
.hero .hero-in {
  width: 100%;
}
.hero .facts,
.hero .facts.facts-3,
.hero .goal {
  max-width: none;
}
/* Kartu karyawan di workstream: bagian pekerjaan dijelaskan */
.ws-p.v2 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 12px;
}
.wp-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.wp-task {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  text-align: left;
}
.wp-lbl {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.wp-task b {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
}
.wp-d {
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.45;
}
.wp-split {
  display: flex;
  height: 6px;
  margin-top: 4px;
  border-radius: 99px;
  overflow: hidden;
  background: var(--surface-3);
}
.wp-split .k {
  background: var(--line-2);
}
.wp-split .g {
  background: var(--primary);
}
.wp-leg {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.wp-leg .g {
  color: var(--primary-head);
  font-weight: 700;
}
.ws-p.pool .tk {
  white-space: normal;
}
.ws-p.pool .wp-d {
  display: block;
  margin-top: 2px;
}
/* Login tersusun dari atas supaya judul dan tombol selalu terlihat; ruang scroll ekstra di dasar halaman */
.lg-left {
  justify-content: flex-start;
  padding-top: 96px;
}
.lg-art {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  height: min(52%, 420px);
  margin: 0 6% 24px;
  flex: none;
}
.lg-right {
  align-items: flex-start;
  padding-top: min(18vh, 150px);
}
#page::after {
  content: '';
  display: block;
  height: 72px;
}
/* Workstream accordion: ringkasan metrik dulu, klik untuk rincian orang */
.ws-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 2px 0;
}
.ws-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
}
.ws-head span {
  font-size: 12px;
  color: var(--ink-3);
}
.ws-head .btn {
  margin-left: auto;
}
.ws-grid.acc-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.ws-card.acc {
  padding: 0;
  gap: 0;
  overflow: hidden;
  transition:
    border-color var(--t-fast),
    box-shadow var(--t-fast);
}
.ws-card.acc:hover,
.ws-card.acc.open {
  border-color: var(--primary-a30);
}
.ws-card.acc.open {
  box-shadow: var(--sh-main);
}
.ws-sum {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) 88px 88px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 14px 18px;
  text-align: left;
  cursor: pointer;
}
.ws-sum:hover {
  background: var(--surface-2);
}
.ws-t {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ws-t b {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}
.ws-t span {
  font-size: 11.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.ws-mc {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.ws-mc .ld-bar-t {
  height: 8px;
}
.ws-m-s {
  font-size: 11.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ws-m-s b {
  color: var(--ink);
}
.ws-m {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.ws-m .l {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.ws-m b {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary-head);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ws-m b.h {
  color: var(--accent-deep);
}
.ws-m b small {
  margin-left: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
}
.ws-pp {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ws-av {
  display: flex;
  align-items: center;
}
.ws-av .pav {
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff;
  margin-left: -8px;
}
.ws-av .pav:first-child {
  margin-left: 0;
}
.ws-av .more {
  margin-left: -8px;
  height: 28px;
  min-width: 28px;
  padding: 0 6px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  box-shadow: 0 0 0 2px #fff;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.ws-chev {
  display: flex;
  justify-content: center;
  color: var(--ink-4);
  transition: transform 0.25s var(--spring);
}
.ws-card.acc.open .ws-chev {
  transform: rotate(180deg);
  color: var(--primary);
}
.ws-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--spring);
}
.ws-card.acc.open .ws-body {
  grid-template-rows: 1fr;
}
.ws-body > div {
  min-height: 0;
  overflow: hidden;
}
.ws-in {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 18px 18px;
  border-top: 1px solid var(--line-soft);
  padding-top: 14px;
}
.ws-card.acc .ws-asg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}
.ws-card.acc .ws-ext {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.ws-card.acc .ws-ext .i {
  flex: none;
  margin-top: 2px;
  color: var(--ink-4);
}
@media (max-width: 1100px) {
  .ws-sum {
    grid-template-columns: minmax(0, 1fr) 80px 80px 28px;
  }
  .ws-mc,
  .ws-pp {
    display: none;
  }
  .ws-card.acc .ws-asg {
    grid-template-columns: 1fr;
  }
}
/* kelompok pola tugas serupa bisa dibuka */
.ws-p.pool {
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition:
    border-color var(--t-fast),
    background var(--t-fast);
}
.ws-p.pool:hover {
  border-color: var(--primary-a30);
  background: var(--primary-tint2);
}
.pool-go {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--primary) !important;
}
.pool-intro {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.5;
}
.pool-intro b {
  color: var(--ink);
}
.dr-b > .pool-intro {
  margin: 14px 16px;
}
.ws-grid.acc-list {
  align-items: stretch;
}
/* Pita kelompok pola tugas sama: beda dari kartu perorangan */
.ws-card.acc .ws-p.pool {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  border: 1.5px dashed var(--primary-a30);
  border-radius: 12px;
  background: linear-gradient(90deg, var(--primary-tint), var(--primary-tint2));
}
.ws-card.acc .ws-p.pool:hover {
  border-style: solid;
  border-color: var(--primary);
  background: var(--primary-tint);
}
.pl-av {
  display: flex;
  align-items: center;
}
.pl-av .pav {
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff;
  margin-left: -10px;
}
.pl-av .pav:first-child {
  margin-left: 0;
}
.pl-n {
  margin-left: -10px;
  height: 32px;
  min-width: 32px;
  padding: 0 8px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-deep);
  color: #fff;
  box-shadow: 0 0 0 2px #fff;
  font-size: 11.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pl-t {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.pl-k {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--primary-head);
}
.pl-k .i {
  stroke: var(--primary-head);
}
.pl-t b {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.35;
}
.pl-t .wp-d {
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.45;
}
.pl-r {
  display: flex;
  align-items: center;
  gap: 16px;
}
.pl-h {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pl-h b {
  font-size: 15px;
  font-weight: 800;
  color: var(--primary-head);
}
.pl-h span {
  font-size: 11px;
  color: var(--ink-3);
}
.pl-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 9px;
  background: var(--primary-deep);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: transform var(--t-fast);
}
.pl-go .i {
  stroke: #fff;
}
.ws-p.pool:hover .pl-go {
  transform: translateX(2px);
}
@media (max-width: 1100px) {
  .ws-card.acc .ws-p.pool {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .pl-r {
    grid-column: 1/-1;
    justify-content: space-between;
  }
}
.ws-card.acc .ws-p.pool {
  grid-template-columns: 150px minmax(0, 1fr) 270px;
}
.pl-r {
  justify-content: flex-end;
}

/* ===== Login gaya Rakamin (animated) ===== */
#vLogin {
  overflow: auto;
  background:
    radial-gradient(ellipse at 18% 35%, #e3fbf6 0, transparent 36%),
    radial-gradient(ellipse at 75% 78%, #e2f8f5 0, transparent 34%),
    linear-gradient(125deg, #f8fcfd, #f0f6f7 54%, #fff);
  color: #142b35;
}
.rk {
  min-height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(400px, 0.85fr);
  gap: 64px;
  align-items: center;
  padding: 36px 72px;
  max-width: 1600px;
  margin: auto;
}
.rk-visual {
  position: relative;
  height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1100px;
  isolation: isolate;
}
.rk-visual:before {
  content: '';
  position: absolute;
  width: min(76%, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #c9fff0aa 0, #c7f8ef55 38%, transparent 70%);
  filter: blur(12px);
  animation: rkBreathe 6s ease-in-out infinite;
}
.rk-visual:after {
  content: '';
  position: absolute;
  bottom: 14%;
  width: 74%;
  height: 12%;
  border-radius: 50%;
  background: #6ccfc433;
  filter: blur(24px);
  transform: rotate(-5deg);
}
.rk-scene {
  position: relative;
  width: min(100%, 540px);
  aspect-ratio: 1.02;
  transform-style: preserve-3d;
  animation: rkScene 7s ease-in-out infinite;
  z-index: 1;
  margin-top: -190px;
}
.rk-orbit {
  position: absolute;
  left: 50%;
  top: 49%;
  width: 83%;
  height: 37%;
  border: 2px solid #63dfcb9c;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-23deg);
  box-shadow:
    0 0 22px #76edda35,
    inset 0 0 15px #8ae9dc24;
}
.rk-orbit.two {
  width: 76%;
  height: 53%;
  transform: translate(-50%, -50%) rotate(47deg);
  border-color: #a8e9d4a6;
  animation: rkOrbit 8s ease-in-out infinite;
}
.rk-orbit.three {
  width: 94%;
  height: 26%;
  transform: translate(-50%, -50%) rotate(12deg);
  border-color: #c4e9e9;
  opacity: 0.75;
}
.rk-platform {
  position: absolute;
  left: 50%;
  top: 66%;
  width: 54%;
  height: 13%;
  transform: translate(-50%, -50%) rotateX(62deg) rotateZ(-7deg);
  border-radius: 50%;
  background: linear-gradient(135deg, #fff, #d8f7ef 48%, #fff);
  border: 2px solid #fff;
  box-shadow:
    0 15px 25px #3a9c8b2b,
    0 0 0 5px #a6f2e355,
    inset 0 0 15px #72dacd66;
}
.rk-platform:after {
  content: '';
  position: absolute;
  inset: 15% 7%;
  border-radius: 50%;
  border: 2px solid #45d9c0;
  box-shadow: 0 0 16px #38d8c4;
}
.rk-core {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 36%;
  aspect-ratio: 1;
  border-radius: 35%;
  transform: translate(-50%, -50%) rotate(-9deg);
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #ffffffed, #dffbf5a8);
  border: 1px solid #fff;
  box-shadow:
    inset 0 0 28px #fff,
    0 22px 50px #309d9230,
    0 0 55px #8af0dd66;
  backdrop-filter: blur(10px);
  animation: rkCore 5s ease-in-out infinite;
}
.rk-core:before {
  content: '';
  position: absolute;
  inset: -7%;
  border-radius: 38%;
  border: 2px solid #fff9;
  box-shadow:
    0 0 25px #75dfd0a0,
    inset 0 0 25px #7fe6d455;
}
.rk-core img {
  width: 66%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 7px 9px #123e3322);
  transform: rotate(9deg);
}
.rk-tile {
  position: absolute;
  width: 112px;
  aspect-ratio: 1.03;
  border-radius: 24px;
  background: linear-gradient(145deg, #ffffffed, #f5fffcbb);
  border: 1px solid #fff;
  box-shadow:
    0 16px 35px #255c5520,
    inset 0 0 0 1px #d7f6ef;
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 8px;
  text-align: center;
  animation: rkTile 5.4s ease-in-out infinite;
}
.rk-tile .ico {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #d9fff5, #fff);
  color: #079c8e;
  box-shadow: inset 0 0 0 1px #bdeee2;
}
.rk-tile svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rk-tile span {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.rk-t1 {
  left: 18%;
  top: 12%;
  transform: rotate(-9deg);
  animation-delay: -1s;
}
.rk-t2 {
  right: 14%;
  top: 17%;
  transform: rotate(8deg);
  animation-delay: -2.4s;
}
.rk-t3 {
  left: 3%;
  top: 42%;
  transform: rotate(-12deg);
  animation-delay: -3s;
}
.rk-t4 {
  right: 4%;
  top: 47%;
  transform: rotate(10deg);
  animation-delay: -0.7s;
}
.rk-t5 {
  left: 19%;
  bottom: 8%;
  transform: rotate(7deg);
  animation-delay: -1.8s;
}
.rk-t6 {
  right: 20%;
  bottom: 4%;
  transform: rotate(-7deg);
  animation-delay: -3.8s;
}
.rk-spark {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(135deg, #ffe89b, #ffc938);
  box-shadow: 0 0 18px #ffda7c;
  animation: rkSpark 4s ease-in-out infinite;
}
.rk-s1 {
  top: 20%;
  left: 42%;
}
.rk-s2 {
  top: 36%;
  right: 13%;
  width: 7px;
  height: 7px;
  animation-delay: -2s;
}
.rk-s3 {
  bottom: 24%;
  left: 12%;
  width: 8px;
  height: 8px;
  animation-delay: -1s;
}
.rk-s4 {
  top: 58%;
  right: 35%;
  background: #77e8d8;
  box-shadow: 0 0 18px #77e8d8;
}
.rk-copy {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  max-width: 480px;
}
.rk-copy h1 {
  font-size: 44px;
  line-height: 1.04;
  letter-spacing: -0.045em;
  margin: 0 0 14px;
  font-weight: 800;
}
.rk-copy h1 em {
  font-style: normal;
  color: #079e93;
}
.rk-copy p {
  font-size: 16px;
  line-height: 1.6;
  color: #6b7d87;
  margin: 0;
  max-width: 420px;
}
.rk-dots {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.rk-dots i {
  width: 28px;
  height: 5px;
  border-radius: 10px;
  background: #dfe9e9;
}
.rk-dots i:first-child {
  background: #0bb5a6;
  width: 44px;
}
.rk-wrap {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 3;
}
.rk-card {
  width: min(100%, 480px);
  padding: 40px 44px;
  border: 1px solid #fff;
  background: #ffffffd9;
  border-radius: 30px;
  box-shadow:
    0 28px 90px #1b5b5310,
    0 4px 18px #27534d08;
  backdrop-filter: blur(22px);
  position: relative;
  overflow: hidden;
}
.rk-card:after {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  height: 110px;
  bottom: -64px;
  border-radius: 50%;
  background: linear-gradient(90deg, #b7f4e533, #d8fffa99, #b7f4e533);
  filter: blur(8px);
  pointer-events: none;
}
.rk-brand {
  height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}
.rk-brand img {
  max-width: 180px;
  max-height: 40px;
  object-fit: contain;
  object-position: left center;
}
.rk-card h2 {
  font-size: 31px;
  line-height: 1.15;
  letter-spacing: -1.1px;
  margin: 0 0 8px;
  font-weight: 800;
}
.rk-sub {
  margin: 0 0 22px;
  color: #6b7d87;
  font-size: 15px;
}
.rk-lbl {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
  color: #8a9ca5;
  margin: 0 0 8px;
}
.rk-acc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.rk-acc button {
  border: 1px solid #e1e9ec;
  background: #ffffffbd;
  border-radius: 12px;
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
  transition:
    border 0.2s,
    background 0.2s,
    box-shadow 0.2s;
  font: inherit;
  color: #263d46;
}
.rk-acc button b {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.2;
}
.rk-acc button small {
  display: block;
  font-size: 11px;
  color: #8a9ca5;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rk-acc button:hover {
  border-color: #b8e9e0;
  background: #fff;
}
.rk-acc button.on {
  border-color: #43cdbb;
  background: #fff;
  box-shadow: 0 0 0 3px #8ee9db30;
}
.rk-acc button.on b {
  color: #008b78;
}
.rk-field {
  display: block;
  margin-bottom: 14px;
  position: relative;
}
.rk-field input {
  width: 100%;
  height: 54px;
  border: 1px solid #dfe8eb;
  background: #f9fbfc;
  border-radius: 14px;
  padding: 0 48px 0 52px;
  font: inherit;
  font-size: 15px;
  color: #142b35;
  outline: none;
  transition:
    border 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}
.rk-field input:focus {
  border-color: #43cdbb;
  background: #fff;
  box-shadow: 0 0 0 4px #8ee9db30;
}
.rk-field input::placeholder {
  color: #91a0a9;
}
.rk-field .li {
  position: absolute;
  left: 18px;
  top: 16px;
  color: #8a9ca5;
  width: 21px;
  height: 21px;
  pointer-events: none;
}
.rk-field svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rk-eye {
  position: absolute;
  right: 14px;
  top: 12px;
  border: 0;
  background: transparent;
  color: #8799a1;
  padding: 5px;
  cursor: pointer;
  width: 30px;
  height: 30px;
}
.rk-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0 22px;
  font-size: 14px;
  color: #637680;
}
.rk-rem {
  display: flex;
  gap: 10px;
  align-items: center;
  cursor: pointer;
}
.rk-rem input {
  accent-color: #079e93;
  width: 17px;
  height: 17px;
}
.rk-link {
  border: 0;
  background: none;
  color: #009e96;
  font: inherit;
  cursor: pointer;
  padding: 0;
}
.rk-link:hover {
  text-decoration: underline;
}
.rk-submit {
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(105deg, #35c5b1, #008b78);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 24px #079d8a28;
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    filter 0.2s;
}
.rk-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 28px #079d8a36;
  filter: saturate(1.1);
}
.rk-submit:active {
  transform: none;
}
.rk-submit .ar {
  display: inline-block;
  margin-left: 9px;
  transition: transform 0.2s;
}
.rk-submit:hover .ar {
  transform: translateX(4px);
}
.rk-submit.loading {
  pointer-events: none;
  color: transparent;
  background: repeating-linear-gradient(-45deg, #35c5b1 0 12px, #008b78 12px 24px);
  background-size: 200% 100%;
  animation: hbar 0.7s linear infinite;
}
.rk-sep {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #8b9aa2;
  font-size: 13px;
  margin: 20px 0 16px;
}
.rk-sep:before,
.rk-sep:after {
  content: '';
  height: 1px;
  background: #e8eff1;
  flex: 1;
}
.rk-sso {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.rk-sso button {
  height: 50px;
  border: 1px solid #e1e9ec;
  border-radius: 14px;
  background: #ffffffbd;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #263d46;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition:
    background 0.2s,
    border 0.2s,
    transform 0.2s;
}
.rk-sso button:hover {
  background: #fff;
  border-color: #b8e9e0;
  transform: translateY(-1px);
}
.rk-g {
  font-size: 21px;
  font-weight: 800;
  background: conic-gradient(
    from -45deg,
    #4285f4 0 25%,
    #34a853 25% 48%,
    #fbbc05 48% 72%,
    #ea4335 72%
  );
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
.rk-ms {
  width: 17px;
  height: 17px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.rk-ms i:nth-child(1) {
  background: #f35325;
}
.rk-ms i:nth-child(2) {
  background: #81bc06;
}
.rk-ms i:nth-child(3) {
  background: #05a6f0;
}
.rk-ms i:nth-child(4) {
  background: #ffba08;
}
.rk-foot {
  margin-top: 22px;
  text-align: center;
  color: #9aa8ae;
  font-size: 12px;
}
@keyframes rkScene {
  0%,
  100% {
    transform: translateY(0) rotateX(0deg);
  }
  50% {
    transform: translateY(-9px) rotateX(1.5deg);
  }
}
@keyframes rkCore {
  0%,
  100% {
    translate: 0 0;
    rotate: -2deg;
  }
  50% {
    translate: 0 -12px;
    rotate: 2deg;
  }
}
@keyframes rkTile {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -13px;
  }
}
@keyframes rkBreathe {
  0%,
  100% {
    transform: scale(0.92);
    opacity: 0.65;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}
@keyframes rkOrbit {
  0%,
  100% {
    scale: 1;
    opacity: 0.75;
  }
  50% {
    scale: 1.04;
    opacity: 1;
  }
}
@keyframes rkSpark {
  0%,
  100% {
    transform: translateY(0) rotate(0) scale(0.8);
    opacity: 0.55;
  }
  50% {
    transform: translateY(-15px) rotate(90deg) scale(1.15);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  #vLogin *,
  #vLogin *:before,
  #vLogin *:after {
    animation: none !important;
    transition: none !important;
  }
}

/* ===== Kartu login v2 ===== */
.rk-card {
  width: min(100%, 460px);
  padding: 34px 36px 30px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow:
    0 1px 0 #fff inset,
    0 30px 80px -30px rgba(13, 61, 64, 0.28),
    0 8px 24px -12px rgba(13, 61, 64, 0.12);
}
.rk-card:after {
  display: none;
}
.rk-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}
.rk-logo {
  height: 34px;
  width: auto;
  margin-left: -4px;
}
.rk-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  background: #f1f7f6;
  color: #4a6670;
  font-size: 11.5px;
  font-weight: 700;
}
.rk-pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e8b04b;
  box-shadow: 0 0 0 3px #e8b04b33;
}
.rk-card h2 {
  font-size: 28px;
  letter-spacing: -0.035em;
  margin: 0 0 20px;
}
.rk-sub {
  margin: 0 0 20px;
  font-size: 14px;
  color: #6b7d87;
}
.rk-sub b {
  color: #142b35;
  font-weight: 700;
}
.rk-accs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.rk-a {
  display: grid;
  grid-template-columns: 42px 1fr 22px;
  align-items: center;
  gap: 13px;
  padding: 10px 14px 10px 10px;
  border-radius: 16px;
  border: 1px solid #e6eef0;
  background: #fbfdfd;
  text-align: left;
  font: inherit;
  color: #142b35;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}
.rk-a:hover {
  border-color: #bfe7df;
  background: #fff;
  transform: translateX(2px);
}
.rk-a .av {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  object-fit: cover;
  background: #e2f3f0;
  display: grid;
  place-items: center;
}
.rk-a .av.mk {
  background: #fff;
  border: 1px solid #e1ecee;
}
.rk-a .av.mk img {
  width: 62%;
  height: auto;
  display: block;
}
.rk-a b {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.rk-a small {
  display: block;
  font-size: 12px;
  color: #6b7d87;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rk-a .rd {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid #cdd9dd;
  display: grid;
  place-items: center;
  transition: 0.2s;
}
.rk-a .rd svg {
  width: 12px;
  height: 12px;
  stroke: #fff;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.6);
  transition: 0.2s var(--pop);
}
.rk-a.on {
  border-color: #2fbfab;
  background: #fff;
  box-shadow:
    0 0 0 4px #8ee9db2e,
    0 8px 20px -12px rgba(0, 139, 120, 0.45);
}
.rk-a.on .rd {
  background: #079e93;
  border-color: #079e93;
}
.rk-a.on .rd svg {
  opacity: 1;
  transform: none;
}
.rk-pwrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 2px 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #4a6670;
}
.rk-pwrow .rk-link {
  font-size: 12.5px;
  font-weight: 700;
}
.rk-field {
  margin-bottom: 16px;
}
.rk-field input {
  height: 50px;
  border-radius: 14px;
  letter-spacing: 0.08em;
}
.rk-field .li {
  top: 14.5px;
}
.rk-eye {
  top: 10px;
}
.rk-submit {
  height: 54px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 22px;
  font-size: 15.5px;
  background: linear-gradient(105deg, #14b3a0, #007a6b);
}
.rk-submit .ar {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
  margin: 0;
}
.rk-submit .ar svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rk-submit:hover .ar {
  transform: translateX(3px);
}
.rk-sso {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #edf2f3;
}
.rk-sso span {
  flex: 1;
  font-size: 12.5px;
  color: #8b9aa2;
}
.rk-sso button {
  height: 38px;
  padding: 0 13px;
  border-radius: 11px;
  font-size: 13px;
  gap: 8px;
  font-weight: 600;
}
.rk-sso .rk-g {
  font-size: 16px;
}
.rk-sso .rk-ms {
  width: 14px;
  height: 14px;
}
.rk-legal {
  margin-top: 16px;
  font-size: 12px;
  color: #9aa8ae;
}

/* ===== Scene 3D orbit (login) ===== */
.rk-visual {
  align-items: flex-start;
}
.rk-visual:before {
  top: 40px;
}
.rk3 {
  position: relative;
  width: 620px;
  height: 540px;
  margin-top: -6px;
  flex: none;
}
.rk3 .lay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.rk3 svg.ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.rk3 .floor {
  position: absolute;
  left: 50%;
  top: 430px;
  width: 520px;
  height: 120px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.6) 55%,
    rgba(255, 255, 255, 0)
  );
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.rk3 .floor:after {
  content: '';
  position: absolute;
  inset: 18% 14%;
  border-radius: 50%;
  border: 1.5px solid rgba(120, 220, 205, 0.45);
  box-shadow: 0 0 18px rgba(80, 215, 195, 0.25);
}
/* pedestal */
.rk3 .ped {
  position: absolute;
  left: 50%;
  top: 372px;
  width: 250px;
  transform: translateX(-50%);
  z-index: 44;
}
.rk3 .ped .cap {
  position: relative;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, #fff 0 45%, #e3f7f3 70%, #c9efe8);
  box-shadow:
    inset 0 -3px 6px rgba(40, 170, 150, 0.25),
    0 0 0 2px rgba(255, 255, 255, 0.9);
  z-index: 2;
}
.rk3 .ped .cap:after {
  content: '';
  position: absolute;
  inset: 16% 12%;
  border-radius: 50%;
  border: 2px solid #4fd8c3;
  box-shadow:
    0 0 14px #4fd8c3,
    inset 0 0 10px #8ef0e0;
}
.rk3 .ped .cyl {
  position: relative;
  margin: -25px auto 0;
  width: 100%;
  height: 58px;
  border-radius: 0 0 50% 50%/0 0 25px 25px;
  background: linear-gradient(90deg, #bdf0e6, #5fd6c3 22%, #1fb5a0 50%, #5fd6c3 78%, #bdf0e6);
  box-shadow: 0 18px 30px -12px rgba(16, 130, 115, 0.45);
}
.rk3 .ped .cyl:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 26px;
  height: 12px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0.2)
  );
  filter: blur(2px);
}
.rk3 .ped .base {
  position: relative;
  margin: -22px auto 0;
  width: 150%;
  left: -25%;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, #fff 0 50%, #e8f6f3 75%, #d3ece7);
  box-shadow: 0 22px 40px -18px rgba(13, 80, 75, 0.35);
  z-index: -1;
}
/* bola kaca */
.rk3 .sph {
  position: absolute;
  left: 50%;
  top: 248px;
  width: 250px;
  height: 250px;
  margin: -125px 0 0 -125px;
  border-radius: 50%;
  z-index: 50;
  overflow: hidden;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.08) 0 58%,
    rgba(190, 240, 232, 0.35) 72%,
    rgba(255, 255, 255, 0.75) 79%,
    rgba(150, 225, 212, 0.5) 81%,
    rgba(255, 255, 255, 0) 82%
  );
  -webkit-backdrop-filter: blur(3px) saturate(1.2);
  backdrop-filter: blur(3px) saturate(1.2);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.95),
    inset 0 -30px 50px rgba(30, 185, 165, 0.28),
    inset 0 18px 30px rgba(255, 255, 255, 0.8),
    inset 12px 0 30px rgba(170, 235, 225, 0.35),
    0 30px 60px -20px rgba(13, 90, 85, 0.35);
}
.rk3 .sph .liq {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -6%;
  height: 38%;
  background: linear-gradient(180deg, rgba(130, 230, 214, 0.55), rgba(25, 180, 160, 0.75));
  border-radius: 46% 54% 0 0/18% 22% 0 0;
  animation: rkSlosh 6s ease-in-out infinite;
}
.rk3 .sph .liq:before {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  top: -8px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(160, 240, 228, 0.5));
  filter: blur(0.5px);
}
.rk3 .sph .hl {
  position: absolute;
  left: 16%;
  top: 9%;
  width: 38%;
  height: 24%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 40% 40%,
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0) 70%
  );
  transform: rotate(-28deg);
}
.rk3 .sph .hl2 {
  position: absolute;
  right: 13%;
  bottom: 22%;
  width: 12%;
  height: 18%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 70%);
  transform: rotate(-30deg);
}
.rk3 .sph .rim {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.95);
  border-left-color: rgba(255, 255, 255, 0.5);
  transform: rotate(-20deg);
  filter: blur(0.6px);
}
.rk3 .rkmk {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  perspective: 500px;
  z-index: 51;
}
.rk3 .rkmk img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(1px 1px 0 #0a7f86) drop-shadow(1px 1px 0 #0a7f86)
    drop-shadow(1px 2px 0 #086a70) drop-shadow(0 12px 10px rgba(10, 110, 100, 0.35));
  animation: rkMark 7s ease-in-out infinite;
  transform-origin: 50% 50%;
}
/* tile kubus 3D */
.rk3 .tw {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--s);
  height: calc(var(--s) + 22px);
  margin-left: calc(var(--s) / -2);
  will-change: transform, filter;
  perspective: 520px;
}
.rk3 .plate {
  position: absolute;
  left: -14%;
  right: -14%;
  bottom: -11px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(255, 255, 255, 0.95) 0 40%,
    rgba(160, 238, 224, 0.6) 62%,
    rgba(160, 238, 224, 0) 72%
  );
  box-shadow: 0 0 0 1.5px rgba(120, 225, 208, 0.55);
  opacity: 0.95;
}
.rk3 .c3 {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--s);
  height: var(--s);
  transform-style: preserve-3d;
}
.rk3 .f {
  position: absolute;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 18px;
}
.rk3 .f.fr {
  inset: 0;
  transform: translateZ(calc(var(--d) / 2));
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.97),
    rgba(238, 251, 248, 0.92) 60%,
    rgba(214, 244, 238, 0.9)
  );
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 1),
    inset 0 -10px 20px rgba(120, 215, 200, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 0 8px;
}
.rk3 .f.bk {
  inset: 0;
  transform: rotateY(180deg) translateZ(calc(var(--d) / 2));
  background: #dff4f0;
}
.rk3 .f.rt,
.rk3 .f.lt {
  top: 0;
  height: var(--s);
  width: var(--d);
  left: calc((var(--s) - var(--d)) / 2);
  background: linear-gradient(180deg, #e9faf6, #bfeee5);
  border-radius: 12px;
}
.rk3 .f.rt {
  transform: rotateY(90deg) translateZ(calc(var(--s) / 2));
}
.rk3 .f.lt {
  transform: rotateY(-90deg) translateZ(calc(var(--s) / 2));
}
.rk3 .f.tp,
.rk3 .f.bt {
  left: 0;
  width: var(--s);
  height: var(--d);
  top: calc((var(--s) - var(--d)) / 2);
  border-radius: 12px;
}
.rk3 .f.tp {
  transform: rotateX(90deg) translateZ(calc(var(--s) / 2));
  background: linear-gradient(90deg, #fff, #f3fdfb);
}
.rk3 .f.bt {
  transform: rotateX(-90deg) translateZ(calc(var(--s) / 2));
  background: #a9e6da;
}
.rk3 .f.fr svg {
  width: 34px;
  height: 34px;
  stroke: url(#rkIco);
  fill: none;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 3px 3px rgba(0, 140, 120, 0.2));
}
.rk3 .f.fr span {
  font-size: 12.5px;
  font-weight: 700;
  color: #173a40;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
/* bola kecil dan kubus kaca kecil */
.rk3 .ob {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--r);
  height: var(--r);
  margin: calc(var(--r) / -2) 0 0 calc(var(--r) / -2);
  border-radius: 50%;
  will-change: transform;
}
.rk3 .ob.gold {
  background: radial-gradient(circle at 34% 30%, #fffbe6 0 10%, #ffd968 34%, #e2a52c 72%, #b77d12);
  box-shadow: 0 6px 12px rgba(190, 140, 30, 0.28);
}
.rk3 .ob.mint {
  background: radial-gradient(
    circle at 34% 30%,
    #fff 0 12%,
    rgba(190, 245, 235, 0.9) 36%,
    rgba(60, 200, 180, 0.85) 80%,
    #1ba591
  );
  box-shadow:
    0 6px 12px rgba(20, 150, 130, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}
.rk3 .gc {
  position: absolute;
  width: var(--g);
  height: var(--g);
  --s: var(--g);
  --d: var(--g);
  perspective: 300px;
  animation: rkBob 5s ease-in-out infinite;
}
.rk3 .gc .c3 {
  width: var(--g);
  height: var(--g);
  animation: rkSpin var(--sp, 14s) linear infinite;
}
.rk3 .gc .f {
  border-radius: 5px;
  background: rgba(170, 238, 226, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.85),
    inset 0 0 8px rgba(255, 255, 255, 0.6);
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}
.rk3 .gc .f.fr {
  display: block;
  padding: 0;
}
@keyframes rkSpin {
  to {
    transform: rotateX(360deg) rotateY(720deg);
  }
}
@keyframes rkBob {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -12px;
  }
}
@keyframes rkSlosh {
  0%,
  100% {
    transform: rotate(-3deg) translateX(-2%);
  }
  50% {
    transform: rotate(3deg) translateX(2%);
  }
}
@keyframes rkMark {
  0%,
  100% {
    transform: rotateY(-16deg) translateY(0);
  }
  50% {
    transform: rotateY(16deg) translateY(-6px);
  }
}

.rk3gl {
  position: absolute;
  left: -40px;
  top: -30px;
  width: 720px;
  height: 600px;
  z-index: 200;
}
.rk3gl canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.rk3.gl > :not(.rk3gl) {
  display: none;
}

/* ===== Transisi masuk: bola Rakamin ===== */
.fx2 .f2-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 42%, #ffffff 0, #e9fbf7 38%, #d3f3ec 75%, #c4ece4);
  clip-path: circle(0% at var(--fx-x) var(--fx-y));
  animation: f2Bg 2.7s cubic-bezier(0.7, 0, 0.2, 1) forwards;
}
.fx2 .f2-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  animation: f2Out 2.7s ease forwards;
}
.fx2 .f2-orb {
  position: relative;
  width: 300px;
  height: 300px;
  display: grid;
  place-items: center;
  perspective: 800px;
  animation: f2Zoom 2.7s cubic-bezier(0.6, 0, 0.3, 1) forwards;
}
.fx2 .f2-prog {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.fx2 .f2-prog circle {
  fill: none;
  stroke-width: 3;
}
.fx2 .f2-prog .trk {
  stroke: rgba(0, 122, 107, 0.1);
}
.fx2 .f2-prog .bar {
  stroke: url(#f2g);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: f2Prog 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.35s forwards;
  filter: drop-shadow(0 0 6px rgba(60, 210, 190, 0.6));
}
.fx2 .f2-ball {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.4);
  animation: f2Pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.35) 0 56%,
    rgba(190, 240, 232, 0.5) 72%,
    rgba(255, 255, 255, 0.95) 80%,
    rgba(150, 225, 212, 0.6) 82%
  );
  box-shadow:
    inset 0 0 0 1.5px #fff,
    inset 0 -24px 40px rgba(30, 185, 165, 0.35),
    inset 0 14px 26px rgba(255, 255, 255, 0.9),
    0 30px 60px -18px rgba(13, 90, 85, 0.45),
    0 0 60px rgba(95, 227, 207, 0.45);
}
.fx2 .f2-ball .liq {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -100%;
  height: 40%;
  background: linear-gradient(180deg, rgba(130, 230, 214, 0.7), rgba(25, 180, 160, 0.85));
  border-radius: 45% 55% 0 0/18% 22% 0 0;
  animation:
    f2Fill 1.6s cubic-bezier(0.3, 0.7, 0.3, 1) 0.4s forwards,
    rkSlosh 2s ease-in-out infinite;
}
.fx2 .f2-ball .hl {
  position: absolute;
  left: 16%;
  top: 9%;
  width: 40%;
  height: 24%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 40% 40%,
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0) 70%
  );
  transform: rotate(-28deg);
}
.fx2 .f2-mk {
  position: absolute;
  inset: 18%;
  width: 64%;
  height: 64%;
  overflow: visible;
  filter: drop-shadow(1px 2px 0 #086a70) drop-shadow(0 8px 8px rgba(10, 110, 100, 0.3));
  animation: f2Spin 2.7s cubic-bezier(0.5, 0, 0.2, 1) forwards;
}
.fx2 .f2-mk path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.fx2 .f2-mk .ch {
  stroke: #0a9aa4;
  stroke-width: 12;
  animation: f2Draw 0.55s cubic-bezier(0.6, 0, 0.2, 1) 0.45s forwards;
}
.fx2 .f2-mk .sl {
  stroke: #0a9aa4;
  stroke-width: 12;
  animation: f2Draw 0.4s cubic-bezier(0.6, 0, 0.2, 1) 0.85s forwards;
}
.fx2 .f2-mk .tip {
  stroke: #ffc53d;
  stroke-width: 12;
  animation: f2Draw 0.25s ease-out 1.15s forwards;
}
.fx2 .f2-orbit {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1.5px solid rgba(60, 205, 185, 0.55);
  transform-style: preserve-3d;
  opacity: 0;
  animation: f2Fade 0.5s ease 0.5s forwards;
}
.fx2 .f2-orbit.o1 {
  transform: rotateX(72deg) rotateY(-12deg);
}
.fx2 .f2-orbit.o2 {
  inset: 24px;
  transform: rotateX(70deg) rotateY(58deg);
}
.fx2 .f2-orbit.o3 {
  inset: 40px;
  transform: rotateX(66deg) rotateY(-62deg);
}
.fx2 .f2-orbit::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: f2Rot 1.6s linear infinite;
}
.fx2 .f2-orbit .d {
  position: absolute;
  left: 50%;
  top: -9px;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  transform-origin: 7px calc(50% + 7px);
}
.fx2 .f2-orbit.o1 .d {
  transform-origin: 9px 135px;
  animation: f2Rot 1.5s linear infinite;
}
.fx2 .f2-orbit.o2 .d {
  transform-origin: 9px 117px;
  animation: f2Rot 1.15s linear infinite reverse;
}
.fx2 .f2-orbit.o3 .d {
  transform-origin: 9px 101px;
  animation: f2Rot 1.9s linear infinite;
}
.fx2 .d.gold {
  background: radial-gradient(circle at 34% 30%, #fffbe6 0 10%, #ffd968 34%, #e2a52c 72%, #b77d12);
  box-shadow: 0 0 12px rgba(255, 200, 80, 0.7);
}
.fx2 .d.mint {
  background: radial-gradient(circle at 34% 30%, #fff 0 12%, #a8efe2 40%, #1ba591);
  box-shadow: 0 0 12px rgba(80, 220, 200, 0.8);
}
.fx2 .d.sm {
  width: 10px;
  height: 10px;
  margin-left: -5px;
  top: -5px;
}
.fx2 .f2-pct {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translate(-50%, 100%);
  font-size: 12px;
  font-weight: 800;
  color: #007a6b;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  animation: f2Fade 0.4s ease 0.4s forwards;
}
.fx2 .f2-hud {
  text-align: center;
  color: #142b35;
  opacity: 0;
  transform: translateY(12px);
  animation: f2Hud 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards;
}
.fx2 .f2-tag {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: #079e93;
}
.fx2 .f2-t {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin: 8px 0 6px;
}
.fx2 .f2-sub {
  font-size: 14px;
  color: #6b7d87;
}
.fx2 .f2-tick {
  margin-top: 14px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: #8a9ca5;
}
@keyframes f2Bg {
  0% {
    clip-path: circle(0% at var(--fx-x) var(--fx-y));
  }
  18% {
    clip-path: circle(150% at var(--fx-x) var(--fx-y));
  }
  80% {
    clip-path: circle(150% at 50% 50%);
    opacity: 1;
  }
  100% {
    clip-path: circle(150% at 50% 50%);
    opacity: 0;
  }
}
@keyframes f2Prog {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes f2Pop {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes f2Fill {
  to {
    bottom: -6%;
  }
}
@keyframes f2Draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes f2Fade {
  to {
    opacity: 1;
  }
}
@keyframes f2Rot {
  to {
    rotate: 360deg;
  }
}
@keyframes f2Hud {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes f2Spin {
  0%,
  55% {
    transform: rotateY(0);
  }
  75% {
    transform: rotateY(360deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes f2Zoom {
  0%,
  72% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}
@keyframes f2Out {
  0%,
  72% {
    opacity: 1;
  }
  96%,
  100% {
    opacity: 0;
  }
}

/* ===== Prioritas Strategis v2 (gaya login Rakamin) ===== */
.scroller:has(.tg) {
  background:
    radial-gradient(ellipse at 12% 0%, #e3fbf6 0, transparent 42%),
    radial-gradient(ellipse at 92% 40%, #e6f9f5 0, transparent 38%),
    linear-gradient(160deg, #f8fcfd, #f1f7f7 60%, #f7fbfb);
}
.tg {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: #142b35;
}
.tg-hero {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 34px 40px;
  min-height: 300px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 24px;
  align-items: center;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.92),
    rgba(240, 252, 249, 0.88) 55%,
    rgba(222, 247, 241, 0.9)
  );
  border: 1px solid #fff;
  box-shadow:
    0 30px 80px -40px rgba(13, 61, 64, 0.35),
    0 6px 20px -10px rgba(13, 61, 64, 0.12);
}
.tg-hero:before {
  content: '';
  position: absolute;
  right: -80px;
  top: -120px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, #c9fff0aa 0, #c7f8ef44 40%, transparent 70%);
  pointer-events: none;
}
.tg-eb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #dff1ed;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #079e93;
}
.tg-eb i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffc53d;
  box-shadow: 0 0 0 3px #ffc53d33;
}
.tg-hero h1 {
  margin: 16px 0 12px;
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -0.04em;
  font-weight: 800;
  max-width: 640px;
  text-wrap: balance;
}
.tg-hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, #14b3a0, #007a6b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tg-hero p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #5d717b;
  max-width: 600px;
}
.tg-cta {
  display: flex;
  gap: 10px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.tg-btn {
  height: 48px;
  padding: 0 10px 0 20px;
  border-radius: 14px;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(105deg, #14b3a0, #007a6b);
  box-shadow: 0 12px 26px -10px rgba(0, 139, 120, 0.55);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.tg-btn .ar {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
  transition: transform 0.2s;
}
.tg-btn .ar svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tg-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -10px rgba(0, 139, 120, 0.6);
}
.tg-btn:hover .ar {
  transform: translateX(3px);
}
.tg-btn.ghost {
  background: #fff;
  color: #173a40;
  border: 1px solid #dcebe8;
  box-shadow: none;
  padding: 0 18px;
}
.tg-btn.ghost:hover {
  border-color: #a9e3d8;
}
/* visual: bola permintaan */
.tg-vis {
  position: relative;
  height: 250px;
  perspective: 900px;
}
.tg-orb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  text-align: center;
  z-index: 5;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.4) 0 56%,
    rgba(190, 240, 232, 0.55) 72%,
    rgba(255, 255, 255, 0.95) 80%,
    rgba(150, 225, 212, 0.6) 82%
  );
  box-shadow:
    inset 0 0 0 1.5px #fff,
    inset 0 -22px 36px rgba(30, 185, 165, 0.35),
    inset 0 12px 24px rgba(255, 255, 255, 0.9),
    0 26px 50px -18px rgba(13, 90, 85, 0.45),
    0 0 50px rgba(95, 227, 207, 0.4);
  animation: tgBob 5s ease-in-out infinite;
}
.tg-orb .liq {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -6%;
  height: 40%;
  background: linear-gradient(180deg, rgba(130, 230, 214, 0.65), rgba(25, 180, 160, 0.8));
  border-radius: 45% 55% 0 0/18% 22% 0 0;
  animation: rkSlosh 4s ease-in-out infinite;
}
.tg-orb .hl {
  position: absolute;
  left: 16%;
  top: 9%;
  width: 40%;
  height: 24%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 40% 40%,
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0) 70%
  );
  transform: rotate(-28deg);
}
.tg-orb .num {
  position: relative;
  z-index: 2;
  margin-top: -6px;
}
.tg-orb .num b {
  display: block;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: #0d3d40;
}
.tg-orb .num span {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2c6a6c;
  margin-top: 4px;
}
.tg-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 2px solid rgba(60, 205, 185, 0.6);
  box-shadow: 0 0 14px rgba(80, 220, 200, 0.35);
  transform-style: preserve-3d;
}
.tg-ring.r1 {
  width: 330px;
  height: 330px;
  margin: -165px 0 0 -165px;
  transform: rotateX(74deg) rotateZ(0);
  animation: tgSpin 22s linear infinite;
}
.tg-ring.r2 {
  width: 250px;
  height: 250px;
  margin: -125px 0 0 -125px;
  border-color: rgba(150, 232, 218, 0.6);
  transform: rotateX(70deg) rotateY(40deg);
  animation: tgSpin2 16s linear infinite reverse;
}
.tg-sat {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #fff;
  box-shadow: 0 10px 24px -10px rgba(13, 61, 64, 0.35);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  animation: tgBob 5s ease-in-out infinite;
}
.tg-sat i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
}
.tg-sat b {
  font-size: 13px;
  font-weight: 800;
}
.tg-sat span {
  color: #6b7d87;
  font-weight: 600;
}
.tg-sat.s1 {
  transform: translate(-205px, -50px);
}
.tg-sat.s2 {
  transform: translate(-20px, -128px);
  animation-delay: -1.6s;
}
.tg-sat.s3 {
  transform: translate(40px, 84px);
  animation-delay: -3s;
}
.tg-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  z-index: 4;
}
.tg-dot.g {
  left: 22%;
  top: 18%;
  background: radial-gradient(circle at 34% 30%, #fffbe6 0 10%, #ffd968 34%, #e2a52c 72%, #b77d12);
  box-shadow: 0 0 12px rgba(255, 200, 80, 0.6);
  animation: tgBob 4s ease-in-out infinite;
}
.tg-dot.m {
  right: 14%;
  bottom: 16%;
  width: 16px;
  height: 16px;
  background: radial-gradient(circle at 34% 30%, #fff 0 12%, #a8efe2 40%, #1ba591);
  animation: tgBob 5s ease-in-out infinite -2s;
}
/* KPI strip */
.tg-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  position: relative;
  z-index: 2;
  grid-column: 1/-1;
  margin-top: 4px;
}
.tg-kpi {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid #fff;
  box-shadow: 0 8px 20px -14px rgba(13, 61, 64, 0.3);
  backdrop-filter: blur(10px);
}
.tg-kpi .k-ic {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #d9fff5, #fff);
  box-shadow: inset 0 0 0 1px #bdeee2;
  color: #079c8e;
  flex: none;
}
.tg-kpi .k-ic svg {
  width: 20px;
  height: 20px;
}
.tg-kpi .k-v {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.tg-kpi .k-l {
  font-size: 12.5px;
  color: #6b7d87;
  margin-top: 4px;
  font-weight: 600;
}
.tg-kpi.warn .k-ic {
  background: linear-gradient(145deg, #fff3d6, #fff);
  box-shadow: inset 0 0 0 1px #f6dfa6;
  color: #b07a0e;
}
/* section head */
.tg-sh {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin: 6px 4px -4px;
}
.tg-sh h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.tg-sh p {
  margin: 0;
  font-size: 13px;
  color: #6b7d87;
}
.tg-sh .sp {
  flex: 1;
}
/* kartu arahan */
.tg-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1400px) {
  .tg-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.tg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #fff;
  box-shadow:
    0 18px 40px -26px rgba(13, 61, 64, 0.4),
    0 2px 8px -4px rgba(13, 61, 64, 0.08);
  cursor: pointer;
  transition:
    transform 0.25s var(--spring),
    box-shadow 0.25s,
    border-color 0.2s;
  overflow: hidden;
}
.tg-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 50px -26px rgba(13, 61, 64, 0.5);
}
.tg-card.on {
  border-color: #2fbfab;
  box-shadow:
    0 0 0 4px #8ee9db33,
    0 26px 50px -26px rgba(0, 139, 120, 0.55);
}
.tg-card > * {
  position: relative;
  z-index: 1;
}
.tg-card:before {
  z-index: 0;
  content: '';
  position: absolute;
  right: -60px;
  top: -60px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--tint, #c9fff0) 0, transparent 70%);
  opacity: 0.7;
  pointer-events: none;
}
.tg-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tg-pil {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #079e93;
}
.tg-pil .pi {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #d9fff5, #fff);
  box-shadow: inset 0 0 0 1px #bdeee2;
}
.tg-st {
  margin-left: auto;
  white-space: nowrap;
  flex: none;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #0d3d40;
  color: #fff;
}
.tg-st.warn {
  background: #fff3d6;
  color: #8a5b00;
}
.tg-st.mute {
  background: #f1f6f7;
  color: #5d717b;
}
.tg-card h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.tg-sub {
  font-size: 13px;
  color: #6b7d87;
  margin-top: -8px;
  line-height: 1.45;
}
.tg-imp {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  padding: 12px 4px;
  border-top: 1px dashed #e1ecee;
  border-bottom: 1px dashed #e1ecee;
}
.tg-imp div {
  padding: 0 8px;
  border-left: 1px solid #edf3f4;
}
.tg-imp div:first-child {
  border-left: 0;
  padding-left: 4px;
}
.tg-imp b {
  display: block;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.tg-imp span {
  display: block;
  font-size: 11px;
  color: #6b7d87;
  margin-top: 3px;
  line-height: 1.3;
}
.tg-req {
  border-radius: 18px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #f0fbf8, #e3f7f2);
  border: 1px solid #d3efe8;
}
.tg-req .rl {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4a7a78;
}
.tg-req .rl .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e8b04b;
  box-shadow: 0 0 0 3px #e8b04b33;
  margin-left: auto;
}
.tg-req .rl em {
  white-space: nowrap;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  color: #8a5b00;
  font-size: 11.5px;
}
.tg-req .rm {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 8px 0 10px;
}
.tg-req .rm b {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: #0d3d40;
}
.tg-req .rm span {
  font-size: 13px;
  font-weight: 700;
  color: #2c5d60;
}
.tg-req .share {
  height: 6px;
  border-radius: 99px;
  background: rgba(13, 61, 64, 0.08);
  overflow: hidden;
}
.tg-req .share i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #5fe3cf, #007a6b);
  transform-origin: left;
  animation: tgGrow 1s var(--ease) both 0.2s;
}
.tg-req .rs {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: #5d717b;
  margin-top: 8px;
  font-weight: 600;
}
.tg-own {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}
.tg-own b {
  display: block;
  font-size: 13px;
  font-weight: 800;
}
.tg-own > div span {
  display: block;
  font-size: 11.5px;
  color: #6b7d87;
}
.tg-go {
  margin-left: auto;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: #f1f7f6;
  color: #079e93;
  transition: 0.25s var(--spring);
}
.tg-go svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tg-card:hover .tg-go {
  background: linear-gradient(105deg, #14b3a0, #007a6b);
  color: #fff;
  transform: rotate(-45deg);
}
.tg-card.new {
  background: rgba(255, 255, 255, 0.55);
  border: 1.5px dashed #a9e3d8;
  box-shadow: none;
}
.tg-card.new:hover {
  background: rgba(255, 255, 255, 0.85);
}
.tg-new {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 10px 6px;
}
.tg-new .ob {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #079e93;
  background: radial-gradient(circle at 34% 28%, #fff 0 18%, #d6f7f0 55%, #a8eadd);
  box-shadow:
    inset 0 0 0 1.5px #fff,
    0 14px 30px -14px rgba(0, 139, 120, 0.5);
  animation: tgBob 5s ease-in-out infinite;
}
.tg-new .ob svg {
  width: 28px;
  height: 28px;
}
.tg-new p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: #5d717b;
}
.tg-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.tg-steps span {
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #dcefea;
  font-size: 11.5px;
  font-weight: 700;
  color: #2c6a6c;
  display: inline-flex;
  align-items: center;
}
/* bar langkah berikutnya */
.tg-next {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px 16px 20px;
  border-radius: 22px;
  background: linear-gradient(110deg, #0d3d40, #006b7a 60%, #0a8d9f);
  color: #fff;
  box-shadow: 0 20px 40px -24px rgba(13, 61, 64, 0.6);
  position: relative;
  overflow: hidden;
}
.tg-next:after {
  content: '';
  position: absolute;
  right: 120px;
  top: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 245, 226, 0.25), transparent 70%);
}
.tg-next .ni {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.12);
  flex: none;
}
.tg-next .ni svg {
  width: 20px;
  height: 20px;
}
.tg-next b {
  display: block;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.tg-next span {
  display: block;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 2px;
}
.tg-next .tg-btn {
  margin-left: auto;
  background: #fff;
  color: #0d3d40;
  box-shadow: none;
  position: relative;
  z-index: 1;
}
.tg-next .tg-btn .ar {
  background: linear-gradient(105deg, #14b3a0, #007a6b);
}
@keyframes tgBob {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -8px;
  }
}
@keyframes tgSpin {
  to {
    transform: rotateX(74deg) rotateZ(360deg);
  }
}
@keyframes tgSpin2 {
  to {
    transform: rotateX(70deg) rotateY(40deg) rotateZ(360deg);
  }
}
@keyframes tgGrow {
  from {
    transform: scaleX(0);
  }
}

.tg-bc {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12.5px;
  font-weight: 600;
  color: #6b7d87;
}
.tg-bc a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6b7d87;
  cursor: default;
  text-decoration: none;
}
.tg-bc a svg {
  width: 13px;
  height: 13px;
}
.tg-bc .sep {
  color: #b5c4c9;
}
.tg-bc b {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #dff1ed;
  color: #079e93;
  font-weight: 800;
}
.tg-hero h1 {
  font-size: 46px;
  margin: 18px 0 0;
}
.tg-hero {
  min-height: 0;
}

.tg-hero {
  padding: 28px 40px 26px;
  row-gap: 18px;
}
.tg-vis {
  height: 190px;
  transform: scale(0.82);
  margin: -10px 0;
}
/* ===== Cascade arahan + WLA ===== */
.cc-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 0.9fr);
  gap: 10px;
}
.cc-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid #fff;
  background: rgba(255, 255, 255, 0.7);
  text-align: left;
  font: inherit;
  color: #142b35;
  cursor: pointer;
  box-shadow: 0 8px 20px -16px rgba(13, 61, 64, 0.35);
  transition: 0.2s;
}
.cc-tab .pi {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #d9fff5, #fff);
  box-shadow: inset 0 0 0 1px #bdeee2;
  color: #079c8e;
  flex: none;
}
.cc-tab small {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #079e93;
}
.cc-tab b {
  display: block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin-top: 1px;
}
.cc-tab em {
  margin-left: auto;
  font-style: normal;
  font-size: 13px;
  font-weight: 800;
  color: #8a5b00;
  background: #fff3d6;
  border-radius: 999px;
  padding: 3px 9px;
  flex: none;
}
.cc-tab:hover {
  background: #fff;
  transform: translateY(-1px);
}
.cc-tab.on {
  background: #fff;
  border-color: #2fbfab;
  box-shadow:
    0 0 0 4px #8ee9db33,
    0 14px 30px -18px rgba(0, 139, 120, 0.55);
}
.cc-tab.new {
  border: 1.5px dashed #a9e3d8;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: none;
}
.cc-tab.new small {
  color: #6b7d87;
}
.cc-tab.new b {
  font-size: 13px;
  color: #2c5d60;
}
.cc-board {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr 1fr;
  gap: 44px;
  padding: 22px 24px 24px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid #fff;
  box-shadow: 0 24px 60px -40px rgba(13, 61, 64, 0.4);
}
.cc-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.cc-lines path {
  fill: none;
  stroke: #cfe5e2;
  stroke-width: 1.5;
}
.cc-lines path.hot {
  stroke: url(#none);
  stroke: #2fbfab;
  stroke-width: 2.5;
  filter: drop-shadow(0 0 4px rgba(47, 191, 171, 0.5));
}
.cc-lines .pulse {
  fill: #ffc53d;
  filter: drop-shadow(0 0 4px #ffc53d);
}
.cc-col {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: flex-start;
}
.cc-lv {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 2px 2px;
}
.cc-lv b {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
  background: #0d3d40;
  border-radius: 8px;
  padding: 3px 8px;
}
.cc-lv span {
  font-size: 12px;
  color: #6b7d87;
  font-weight: 700;
}
.cc-node {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: #142b35;
  padding: 12px 13px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e3eef0;
  box-shadow: 0 6px 16px -12px rgba(13, 61, 64, 0.3);
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    opacity 0.2s;
}
.cc-node .cw {
  display: flex;
  align-items: center;
  gap: 9px;
}
.cc-node .cw b {
  display: block;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.cc-node .cw span {
  display: block;
  font-size: 11.5px;
  color: #6b7d87;
  margin-top: 1px;
}
.cc-node .obj {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px dashed #e3eef0;
  font-size: 12px;
  line-height: 1.4;
  color: #2c4a50;
  font-weight: 600;
}
.cc-node .obj svg {
  width: 13px;
  height: 13px;
  flex: none;
  margin-top: 2px;
  color: #079e93;
}
.cc-node:not(.hot):not(.bod) {
  opacity: 0.62;
}
.cc-node.hot {
  border-color: #9fe0d4;
}
.cc-node.bod {
  padding: 16px;
  border-radius: 20px;
  background: linear-gradient(150deg, #fff, #effbf8);
  border-color: #bfe9e0;
}
.bod-n {
  margin-top: 12px;
}
.bod-n small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #079e93;
}
.bod-n small svg {
  width: 13px;
  height: 13px;
}
.bod-n h3 {
  margin: 4px 0 4px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.bod-n p {
  margin: 0;
  font-size: 12px;
  color: #6b7d87;
}
.bod-k {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.bod-k div {
  padding: 9px 10px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e1f0ed;
}
.bod-k b {
  display: block;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.bod-k span {
  display: block;
  font-size: 11px;
  color: #6b7d87;
  margin-top: 2px;
}
.cc-link {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: #079e93;
  cursor: pointer;
}
.cc-link svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cc-node.role {
  cursor: pointer;
  padding: 11px 13px;
}
.cc-node.role:hover {
  border-color: #9fe0d4;
  opacity: 1;
}
.cc-node.role .rt {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.cc-node.role .rt b {
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.25;
  flex: 1;
}
.cc-node.role .rq {
  font-size: 11px;
  font-weight: 800;
  color: #8a5b00;
  background: #fff3d6;
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.cc-node.role .rq.ex {
  color: #2c5d60;
  background: #eaf6f4;
}
.cc-node.role .rm {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-size: 11.5px;
  color: #6b7d87;
  font-weight: 600;
}
.cc-node.role .rm b {
  color: #0d3d40;
}
.cc-node.role.sel {
  opacity: 1;
  border-color: #2fbfab;
  background: linear-gradient(150deg, #fff, #eafaf6);
  box-shadow:
    0 0 0 4px #8ee9db33,
    0 12px 26px -16px rgba(0, 139, 120, 0.55);
}
/* panel WLA */
.cc-wla {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #fff;
  box-shadow: 0 24px 60px -36px rgba(13, 61, 64, 0.45);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cc-wh {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.cc-chain {
  font-size: 12px;
  font-weight: 700;
  color: #6b7d87;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.cc-chain span {
  color: #b5c4c9;
}
.cc-chain b {
  color: #079e93;
}
.cc-wh h2 {
  margin: 6px 0 4px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.cc-wh h2 small {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #079e93;
}
.cc-goal {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #5d717b;
}
.cc-goal svg {
  width: 14px;
  height: 14px;
  color: #079e93;
}
.cc-goal b {
  color: #142b35;
}
.vd {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
}
.vd.warn {
  background: #fff3d6;
  color: #8a5b00;
}
.vd.ok {
  background: #e3f7f2;
  color: #00695c;
}
.vd.bad {
  background: #fde8ea;
  color: #9f1239;
}
.cc-wbody {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.cc-form {
  border-radius: 20px;
  padding: 18px;
  background: linear-gradient(160deg, #0d3d40, #006b7a 70%, #0a8d9f);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cc-form:after {
  content: '';
  position: absolute;
  right: -50px;
  top: -50px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 245, 226, 0.3), transparent 70%);
}
.cc-form .fl {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7ff5e2;
}
.fx-eq {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 16px;
  font-size: 15px;
  font-weight: 800;
}
.fx-eq .frac {
  display: inline-flex;
  flex-direction: column;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
}
.fx-eq .frac span:first-child {
  padding-bottom: 4px;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.7);
}
.fx-eq .frac span:last-child {
  padding-top: 4px;
  color: rgba(255, 255, 255, 0.8);
}
.fx-row {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  padding: 7px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
}
.fx-row b {
  color: #fff;
}
.fx-note {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: -2px;
}
.fx-res {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.fx-res div {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
}
.fx-res div:first-child {
  background: #fff;
  color: #0d3d40;
}
.fx-res span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.75;
}
.fx-res b {
  display: block;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin-top: 3px;
}
.fx-res b small {
  font-size: 12px;
  font-weight: 700;
  margin-left: 4px;
  letter-spacing: 0;
}
.fx-mix {
  margin-top: 14px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}
.fx-mix .mx {
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
  margin-bottom: 6px;
}
.fx-mix .mx i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ffd968, #ffc53d);
}
.fx-mix b {
  color: #ffd968;
}
.cc-tbl {
  border: 1px solid #e6eff1;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
}
.cc-tbl table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.cc-tbl th {
  text-align: left;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7d87;
  background: #f6fafa;
  padding: 10px 12px;
  border-bottom: 1px solid #e6eff1;
  white-space: nowrap;
}
.cc-tbl td {
  padding: 10px 12px;
  border-bottom: 1px solid #f0f5f6;
  vertical-align: middle;
}
.cc-tbl td:first-child b {
  display: block;
  font-weight: 700;
  font-size: 13px;
}
.cc-tbl .num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cc-tbl small {
  color: #8a9ca5;
  font-size: 11px;
}
.chx {
  display: inline-block;
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 800;
  border-radius: 999px;
  padding: 1px 8px;
}
.chx.r {
  background: #fff3d6;
  color: #8a5b00;
}
.chx.n {
  background: #e8f1ff;
  color: #1e4f9c;
}
.chx.l {
  background: #e3f7f2;
  color: #00695c;
}
.cc-tbl .ld {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 150px;
}
.cc-tbl .lb {
  flex: 1;
  height: 7px;
  border-radius: 99px;
  background: #eef5f4;
  overflow: hidden;
}
.cc-tbl .lb i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #5fe3cf, #007a6b);
  transform-origin: left;
  animation: tgGrow 0.8s var(--ease) both;
}
.cc-tbl .ld b {
  width: 48px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cc-tbl .src {
  font-size: 11.5px;
  color: #5d717b;
  background: #f3f7f8;
  border-radius: 8px;
  padding: 3px 8px;
  white-space: nowrap;
}
.cc-tbl tfoot td {
  font-weight: 800;
  background: #f6fafa;
  border-bottom: 0;
}
.cc-next {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px 14px 18px;
  border-radius: 18px;
  background: #f1faf8;
  border: 1px solid #d6efe9;
  font-size: 13px;
  color: #2c4a50;
}
.cc-next p {
  margin: 0;
  line-height: 1.5;
}
.cc-next > svg {
  width: 18px;
  height: 18px;
  color: #079e93;
  flex: none;
}
.cc-next .tg-btn {
  margin-left: auto;
  flex: none;
}

/* ===== Cascade vertikal + detail kanan ===== */
.vt-wrap {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.vt-side {
  padding: 18px 18px 20px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #fff;
  box-shadow: 0 24px 60px -40px rgba(13, 61, 64, 0.4);
}
.vt-bd {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 6px;
  background: #0d3d40;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  flex: none;
}
.vt-root {
  position: relative;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(150deg, #fff, #effbf8);
  border: 1px solid #bfe9e0;
}
.vt-root > .vt-bd {
  position: absolute;
  right: 12px;
  top: 12px;
}
.vt-root .cw {
  display: flex;
  align-items: center;
  gap: 9px;
}
.vt-root .cw b {
  display: block;
  font-size: 13px;
  font-weight: 800;
}
.vt-root .cw span {
  display: block;
  font-size: 11.5px;
  color: #6b7d87;
}
.vt-root h3 {
  margin: 10px 0 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.vt-root .bod-k {
  margin-top: 10px;
}
.vt,
.vt ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vt {
  margin: 0 0 0 22px;
  padding-top: 4px;
}
.vt ul {
  margin-left: 22px;
}
.vt li {
  position: relative;
  padding: 8px 0 0 22px;
}
.vt li:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 30px;
  border-left: 2px solid #d5e8e4;
}
.vt li:after {
  content: '';
  position: absolute;
  left: 0;
  top: 30px;
  width: 16px;
  border-top: 2px solid #d5e8e4;
}
.vt li:not(:last-child) > .vt-rail {
  position: absolute;
  left: 0;
  top: 30px;
  bottom: 0;
  border-left: 2px solid #d5e8e4;
}
.vt li:not(:last-child) {
  background: linear-gradient(#d5e8e4, #d5e8e4) no-repeat 0 30px/2px 100%;
}
.vt li.pass {
  background-image: linear-gradient(#2fbfab, #2fbfab);
}
.vt li.pass:before,
.vt li.hot:before {
  border-color: #2fbfab;
}
.vt li.hot:after {
  border-color: #2fbfab;
}
.vt-n {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e3eef0;
  opacity: 0.7;
}
.vt-n.on {
  opacity: 1;
  border-color: #9fe0d4;
  box-shadow: 0 8px 18px -14px rgba(0, 139, 120, 0.5);
}
.vt-n .nm {
  min-width: 0;
  flex: 1;
}
.vt-n .nm b {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vt-n .nm small {
  display: block;
  font-size: 11px;
  color: #6b7d87;
}
.vt-obj {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin: 6px 0 0 4px;
  font-size: 11.5px;
  line-height: 1.4;
  color: #2c5d60;
  font-weight: 600;
}
.vt-obj svg {
  width: 12px;
  height: 12px;
  flex: none;
  margin-top: 2px;
  color: #079e93;
}
.vt-role {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 11px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e3eef0;
  font: inherit;
  color: #142b35;
  text-align: left;
  cursor: pointer;
  transition: 0.2s;
}
.vt-role .vt-bd {
  background: #e3f4f1;
  color: #0d3d40;
}
.vt-role .nm {
  flex: 1;
  min-width: 0;
}
.vt-role .nm b {
  display: block;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}
.vt-role .nm small {
  display: block;
  font-size: 11px;
  color: #6b7d87;
  margin-top: 2px;
}
.vt-role .rq {
  font-size: 11.5px;
  font-weight: 800;
  color: #8a5b00;
  background: #fff3d6;
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}
.vt-role .rq.ex {
  color: #2c5d60;
  background: #eaf6f4;
}
.vt-role:hover {
  border-color: #9fe0d4;
}
.vt-role.sel {
  border-color: #2fbfab;
  background: linear-gradient(150deg, #fff, #eafaf6);
  box-shadow:
    0 0 0 4px #8ee9db33,
    0 10px 22px -14px rgba(0, 139, 120, 0.55);
}
.vt-role.sel .vt-bd {
  background: #0d3d40;
  color: #fff;
}
.vt-det {
  position: sticky;
  top: 12px;
}
.vt-det .cc-wh h2 {
  font-size: 26px;
  margin: 6px 0 6px;
}
.vt-eq {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.vt-eq .q {
  flex: 1;
  padding: 12px 14px;
  border-radius: 16px;
  background: #f3f9f8;
  border: 1px solid #e1f0ed;
}
.vt-eq .q span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #6b7d87;
  text-transform: uppercase;
}
.vt-eq .q b {
  display: block;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.035em;
  margin-top: 4px;
  line-height: 1;
}
.vt-eq .q b small {
  font-size: 11.5px;
  font-weight: 700;
  color: #6b7d87;
  margin-left: 4px;
  letter-spacing: 0;
}
.vt-eq .q.res {
  background: linear-gradient(140deg, #0d3d40, #006b7a);
  border-color: transparent;
  color: #fff;
}
.vt-eq .q.res span,
.vt-eq .q.res small {
  color: rgba(255, 255, 255, 0.75);
}
.vt-eq .q.alt {
  background: #fff8e6;
  border-color: #f6e2b0;
  margin-left: 6px;
}
.vt-eq em {
  align-self: center;
  font-style: normal;
  font-size: 20px;
  font-weight: 800;
  color: #9fb3b8;
}
.vt-mix {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #5d717b;
}
.vt-mix .mx {
  flex: 0 0 180px;
  height: 6px;
  border-radius: 99px;
  background: #eef3f3;
  overflow: hidden;
}
.vt-mix .mx i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ffd968, #e8b04b);
}
.vt-mix b {
  color: #8a5b00;
}
.vt-det .cc-tbl td:first-child b {
  font-size: 13px;
}
.vt-det .tm {
  display: flex;
  gap: 6px;
  margin-top: 5px;
  align-items: center;
}
.vt-det .tm .chx {
  margin-top: 0;
}
.vt-det .tm .src {
  font-size: 10.5px;
  padding: 1px 7px;
}
.vt-det .fq {
  display: block;
  font-size: 11px;
  color: #8a9ca5;
  margin-top: 2px;
}
.vt-foot {
  display: flex;
  justify-content: flex-end;
}

.vt-wrap {
  grid-template-columns: 430px minmax(0, 1fr);
}
.vt {
  margin-left: 14px;
}
.vt ul {
  margin-left: 10px;
}
.vt li {
  padding-left: 16px;
}
.vt li:after {
  width: 12px;
}
.vt-n,
.vt-role {
  gap: 7px;
  padding: 8px 10px;
}
.vt-role .nm small {
  white-space: nowrap;
}
/* ===== Modul 1 v4: Analisis peran & pemakaian kapasitas ===== */
.scroller:has(.ra),
.scroller:has(.pk) {
  background:
    radial-gradient(ellipse at 12% 0%, #e3fbf6 0, transparent 42%),
    radial-gradient(ellipse at 92% 40%, #e6f9f5 0, transparent 38%),
    linear-gradient(160deg, #f8fcfd, #f1f7f7 60%, #f7fbfb);
}
.ra-head {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  padding: 6px 4px 0;
}
.ra-head h1 {
  margin: 10px 0 0;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
}
.ra-head h1 em {
  font-style: normal;
  background: linear-gradient(100deg, #14b3a0, #007a6b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ra-steps {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.ra-step {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #e3eef0;
  font-size: 12.5px;
  font-weight: 700;
  color: #8a9ca5;
}
.ra-step i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  background: #eef4f4;
  color: #6b7d87;
}
.ra-step i svg {
  width: 12px;
  height: 12px;
}
.ra-step.on {
  background: #fff;
  border-color: #2fbfab;
  color: #0d3d40;
  box-shadow: 0 0 0 3px #8ee9db33;
}
.ra-step.on i {
  background: linear-gradient(105deg, #14b3a0, #007a6b);
  color: #fff;
}
.ra-step.done {
  color: #00695c;
}
.ra-step.done i {
  background: #d9f5ee;
  color: #00695c;
}
.ra-picks {
  display: flex;
  gap: 8px;
}
.ra-pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 16px;
  border-radius: 16px;
  border: 1px solid #fff;
  background: rgba(255, 255, 255, 0.7);
  font: inherit;
  color: #142b35;
  cursor: pointer;
  box-shadow: 0 8px 20px -16px rgba(13, 61, 64, 0.35);
}
.ra-pick b {
  font-size: 14px;
  font-weight: 800;
}
.ra-pick span {
  font-size: 11.5px;
  color: #6b7d87;
  margin-top: 2px;
}
.ra-pick.on {
  background: #fff;
  border-color: #2fbfab;
  box-shadow: 0 0 0 4px #8ee9db33;
}
.ra-grid {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.ra-jd {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid #fff;
  box-shadow: 0 24px 60px -40px rgba(13, 61, 64, 0.45);
}
.ra-jd.scan:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 60px;
  top: -60px;
  background: linear-gradient(180deg, transparent, rgba(95, 227, 207, 0.25), transparent);
  animation: raScan 1.6s linear infinite;
  pointer-events: none;
}
@keyframes raScan {
  to {
    top: 100%;
  }
}
.ra-jdh {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px dashed #e1ecee;
}
.ra-jdh .doc {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #d9fff5, #fff);
  box-shadow: inset 0 0 0 1px #bdeee2;
  color: #079c8e;
}
.ra-jdh .doc svg {
  width: 18px;
  height: 18px;
}
.ra-jdh b {
  display: block;
  font-size: 14px;
  font-weight: 800;
}
.ra-jdh span {
  display: block;
  font-size: 12px;
  color: #6b7d87;
}
.ra-list {
  margin: 12px 0 16px;
  padding: 0 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ra-s {
  padding: 7px 9px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #2c4a50;
  transition:
    background 0.3s,
    box-shadow 0.3s;
}
.ra-s .aitg {
  margin-left: 6px;
  vertical-align: 1px;
}
.ra-s.cur {
  background: rgba(95, 227, 207, 0.22);
  box-shadow: inset 3px 0 0 #14b3a0;
}
.ra-s.r.au {
  background: #fff8e3;
}
.ra-s.r.as {
  background: #eef5ff;
}
.ra-s.r.mn {
  background: #f4f7f8;
}
.aitg {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}
.aitg.au {
  background: #ffe9a8;
  color: #7a4f00;
}
.aitg.as {
  background: #dbe9ff;
  color: #1e4f9c;
}
.aitg.mn {
  background: #e6eef0;
  color: #4a6670;
}
.ra-sum {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ra-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #fff;
  box-shadow: 0 24px 60px -40px rgba(13, 61, 64, 0.45);
}
.ra-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.ra-kpis .k {
  padding: 14px 16px;
  border-radius: 18px;
  background: #f3f9f8;
  border: 1px solid #e1f0ed;
}
.ra-kpis .k span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b7d87;
}
.ra-kpis .k b {
  display: block;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.04em;
  margin-top: 4px;
  line-height: 1;
}
.ra-kpis .k b small {
  font-size: 12px;
  font-weight: 700;
  color: #6b7d87;
  margin-left: 5px;
  letter-spacing: 0;
}
.ra-kpis .k em {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: #6b7d87;
  margin-top: 6px;
}
.ra-kpis .k.hl {
  background: #fff8e6;
  border-color: #f6e2b0;
}
.ra-kpis .k.dk {
  background: linear-gradient(140deg, #0d3d40, #006b7a);
  border-color: transparent;
  color: #fff;
}
.ra-kpis .k.dk span,
.ra-kpis .k.dk small,
.ra-kpis .k.dk em {
  color: rgba(255, 255, 255, 0.75);
}
.ra-ctl {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.ra-src {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7d87;
}
.ra-src svg {
  width: 13px;
  height: 13px;
}
.ra-adopt {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ra-adopt > span {
  font-size: 12px;
  font-weight: 800;
  color: #2c4a50;
}
.seg {
  display: flex;
  padding: 3px;
  border-radius: 14px;
  background: #eef4f4;
  gap: 3px;
}
.seg button {
  border: 0;
  background: none;
  font: inherit;
  padding: 6px 14px;
  border-radius: 11px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  color: #4a6670;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}
.seg button small {
  font-size: 10px;
  font-weight: 700;
  color: #8a9ca5;
}
.seg button.on {
  background: #fff;
  color: #007a6b;
  box-shadow: 0 4px 10px -6px rgba(13, 61, 64, 0.4);
}
.tg-btn[disabled] {
  opacity: 0.45;
  pointer-events: none;
}
.tg-btn.ghost svg {
  width: 15px;
  height: 15px;
}
.ra-tbl td {
  vertical-align: top;
}
.ra-tbl .why {
  display: block;
  font-size: 11.5px;
  color: #6b7d87;
  margin-top: 3px;
  line-height: 1.4;
  max-width: 360px;
}
.ra-tbl .num small {
  display: block;
  font-size: 10.5px;
  color: #8a9ca5;
}
.ra-tbl .ph {
  color: #b5c4c9;
  font-size: 12px;
}
.ra-tbl td.fr b {
  color: #8a5b00;
  font-size: 14px;
}
.ra-tbl tr.man td:first-child b {
  color: #4a6670;
}
/* pemakaian kapasitas */
.pk-bar {
  padding: 18px 20px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 60px -40px rgba(13, 61, 64, 0.45);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pk-src {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.pk-src div {
  padding: 10px 14px;
  border-radius: 14px;
  background: #f3f9f8;
}
.pk-src b {
  display: block;
  font-size: 13px;
  font-weight: 800;
}
.pk-src span {
  display: block;
  font-size: 12px;
  color: #6b7d87;
  margin-top: 2px;
}
.pk-stack {
  display: flex;
  height: 18px;
  border-radius: 99px;
  overflow: hidden;
  background: #eef4f4;
}
.pk-stack i {
  display: block;
  height: 100%;
  transition: width 0.4s var(--ease);
}
.vol {
  --c: #007a8b;
}
.lay {
  --c: #5fd6c3;
}
.exp {
  --c: #0d3d40;
}
.buf {
  --c: #e8b04b;
}
.pk-stack i {
  background: var(--c);
}
.pk-leg {
  display: flex;
  gap: 16px;
  font-size: 12px;
  font-weight: 700;
  color: #4a6670;
}
.pk-leg span:before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--c);
  margin-right: 6px;
  vertical-align: -1px;
}
.pk-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.pk-card {
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #fff;
  box-shadow: 0 18px 40px -28px rgba(13, 61, 64, 0.45);
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 4px solid var(--c);
}
.pk-top {
  display: flex;
  gap: 10px;
}
.pk-top .pi {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #d9fff5, #fff);
  box-shadow: inset 0 0 0 1px #bdeee2;
  color: #079c8e;
  flex: none;
}
.pk-top b {
  display: block;
  font-size: 15px;
  font-weight: 800;
}
.pk-top span {
  display: block;
  font-size: 12px;
  color: #6b7d87;
  margin-top: 2px;
  line-height: 1.4;
}
.pk-ctl {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pk-ctl button {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid #dcebe8;
  background: #fff;
  font: inherit;
  font-size: 18px;
  font-weight: 800;
  color: #007a6b;
  cursor: pointer;
}
.pk-ctl button:hover {
  border-color: #2fbfab;
}
.pk-ctl div {
  flex: 1;
  text-align: center;
}
.pk-ctl b {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.04em;
}
.pk-ctl small {
  font-size: 12px;
  color: #6b7d87;
  font-weight: 700;
  margin-left: 4px;
}
.pk-out {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  color: #4a6670;
}
.pk-out span {
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: 10px;
  background: #f3f9f8;
}
.pk-out b {
  color: #0d3d40;
}
.pk-res {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 12px;
  align-items: start;
}
.pk-dec {
  padding: 20px;
  border-radius: 24px;
  background: linear-gradient(150deg, #0d3d40, #006b7a 70%, #0a8d9f);
  color: #fff;
  box-shadow: 0 24px 50px -28px rgba(13, 61, 64, 0.7);
}
.pk-dec .lbl {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7ff5e2;
}
.pk-dec .big {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 8px 0 10px;
}
.pk-dec .big b {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.045em;
}
.pk-dec .big span {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: line-through;
}
.pk-dec ul {
  margin: 0 0 16px;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}
.pk-dec .tg-btn {
  background: #fff;
  color: #0d3d40;
  box-shadow: none;
  width: 100%;
  justify-content: space-between;
}
.pk-dec .tg-btn .ar {
  background: linear-gradient(105deg, #14b3a0, #007a6b);
}
.pk-dec.done .tg-btn {
  background: #d9f5ee;
}
/* ===== Penempatan talenta ===== */
.scroller:has(.mb) {
  background:
    radial-gradient(ellipse at 12% 0%, #e3fbf6 0, transparent 42%),
    radial-gradient(ellipse at 92% 40%, #e6f9f5 0, transparent 38%),
    linear-gradient(160deg, #f8fcfd, #f1f7f7 60%, #f7fbfb);
}
.mb .ra-head .tg-btn {
  margin-left: auto;
}
.mb-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.mb-tab {
  position: relative;
  overflow: hidden;
  text-align: left;
  padding: 12px 16px 14px;
  border-radius: 18px;
  border: 1px solid #fff;
  background: rgba(255, 255, 255, 0.7);
  font: inherit;
  color: #142b35;
  cursor: pointer;
  box-shadow: 0 8px 20px -16px rgba(13, 61, 64, 0.35);
}
.mb-tab b {
  display: block;
  font-size: 14px;
  font-weight: 800;
}
.mb-tab span {
  display: block;
  font-size: 12px;
  color: #6b7d87;
  margin-top: 2px;
}
.mb-tab i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, #5fe3cf, #007a6b);
  transition: width 0.4s var(--ease);
}
.mb-tab.on {
  background: #fff;
  border-color: #2fbfab;
  box-shadow: 0 0 0 4px #8ee9db33;
}
.mb-grid {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.mb-prof {
  position: sticky;
  top: 12px;
  padding: 18px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 60px -40px rgba(13, 61, 64, 0.45);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mb-prof .fl {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #079e93;
}
.mb-prof h3 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.mb-comp {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid #e3eef0;
  background: #f9fcfc;
  font: inherit;
  color: #142b35;
  cursor: pointer;
}
.mb-comp:hover {
  border-color: #9fe0d4;
  background: #fff;
}
.mb-comp > div:first-child {
  flex: 1;
  min-width: 0;
}
.mb-comp b {
  display: block;
  font-size: 13px;
  font-weight: 800;
}
.mb-comp > div:first-child span {
  display: block;
  font-size: 11px;
  color: #6b7d87;
  margin-top: 2px;
  line-height: 1.35;
}
.mb-comp .lvq {
  text-align: right;
  flex: none;
}
.mb-comp .lvq small {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  color: #079e93;
  margin-bottom: 3px;
}
.dots {
  display: inline-flex;
  gap: 3px;
}
.dots i {
  position: relative;
  width: 12px;
  height: 7px;
  border-radius: 3px;
  background: #e6eef0;
}
.dots i.ok {
  background: #14b3a0;
}
.dots i.lo {
  background: #e8b04b;
}
.dots i.rq:after {
  content: '';
  position: absolute;
  right: -2px;
  top: -3px;
  bottom: -3px;
  width: 2px;
  border-radius: 2px;
  background: #0d3d40;
}
.mb-leg {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #6b7d87;
  margin-top: 4px;
}
.mb-src {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #4a6670;
  padding-top: 10px;
  border-top: 1px dashed #e1ecee;
}
.mb-src svg {
  width: 14px;
  height: 14px;
  color: #079e93;
}
.mb-list {
  padding: 16px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 24px 60px -40px rgba(13, 61, 64, 0.45);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mb-lh {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 2px 4px 6px;
}
.mb-lh b {
  font-size: 15px;
  font-weight: 800;
}
.mb-lh span {
  font-size: 12px;
  color: #6b7d87;
}
.mb-c {
  display: grid;
  grid-template-columns: 40px minmax(130px, 1fr) auto 118px 118px;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid #e9f1f2;
  background: #fff;
  transition: 0.2s;
}
.mb-c .pav {
  border-radius: 12px;
}
.mb-c .mbw b {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
}
.mb-c .mbw span {
  display: block;
  font-size: 11.5px;
  color: #6b7d87;
  margin-top: 2px;
}
.mb-c .cm {
  display: flex;
  gap: 12px;
}
.mb-c .cm small {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #8a9ca5;
  margin-bottom: 3px;
}
.mb-c .mt b {
  display: block;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0d3d40;
}
.mb-c .mt span {
  display: block;
  font-size: 11px;
  color: #6b7d87;
  line-height: 1.3;
}
.mb-as {
  height: 36px;
  border-radius: 11px;
  border: 1px solid #cfe7e2;
  background: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: #007a6b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.mb-as svg {
  width: 14px;
  height: 14px;
}
.mb-as.on {
  background: linear-gradient(105deg, #14b3a0, #007a6b);
  border-color: transparent;
  color: #fff;
}
.mb-as[disabled] {
  opacity: 0.4;
  cursor: default;
}
.mb-c.on {
  border-color: #9fe0d4;
  background: linear-gradient(150deg, #fff, #effbf8);
}
.mb-bar {
  position: sticky;
  bottom: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 20px;
  border-radius: 22px;
  background: linear-gradient(110deg, #0d3d40, #006b7a 60%, #0a8d9f);
  color: #fff;
  box-shadow: 0 20px 40px -20px rgba(13, 61, 64, 0.7);
}
.mb-bar > div {
  padding-right: 22px;
  margin-right: 6px;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.mb-bar span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7ff5e2;
}
.mb-bar b {
  display: block;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
}
.mb-bar b small {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  margin-left: 5px;
  letter-spacing: 0;
}
.mb-bar .tg-btn {
  margin-left: auto;
  background: #fff;
  color: #0d3d40;
  box-shadow: none;
}
.mb-bar .tg-btn .ar {
  background: linear-gradient(105deg, #14b3a0, #007a6b);
}
.mb-dict .dk {
  padding: 14px 0;
  border-bottom: 1px solid #eef3f3;
}
.mb-dict .dkh {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.mb-dict .dkh b {
  font-size: 14px;
}
.mb-dict .dkh span {
  font-size: 11px;
  font-weight: 800;
  color: #079e93;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.mb-dict p {
  margin: 4px 0 8px;
  font-size: 12.5px;
  color: #5d717b;
}
.mb-dict ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mb-dict li {
  display: flex;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.4;
}
.mb-dict li i {
  flex: none;
  font-style: normal;
  font-weight: 800;
  font-size: 11px;
  color: #fff;
  background: #0d3d40;
  border-radius: 6px;
  padding: 1px 6px;
  height: 18px;
}
.mb-c .cm {
  gap: 10px;
}
.mb-c .dots i {
  width: 10px;
}

/* ===== Hero gelap Prioritas Strategis ===== */
.tg-hero {
  background:
    radial-gradient(ellipse at 85% 20%, rgba(95, 227, 207, 0.28) 0, transparent 45%),
    radial-gradient(ellipse at 10% 110%, rgba(10, 141, 159, 0.45) 0, transparent 50%),
    linear-gradient(120deg, #082a2d 0%, #0d3d40 45%, #006b7a 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 70px -35px rgba(8, 42, 45, 0.75);
  color: #fff;
}
.tg-hero:before {
  background: radial-gradient(
    circle,
    rgba(127, 245, 226, 0.22) 0,
    rgba(127, 245, 226, 0.06) 40%,
    transparent 70%
  );
}
.tg-hero h1 {
  color: #fff;
}
.tg-hero h1 em {
  background: linear-gradient(100deg, #7ff5e2, #3fd2bc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tg-hero .tg-bc,
.tg-hero .tg-bc a {
  color: rgba(255, 255, 255, 0.65);
}
.tg-hero .tg-bc .sep {
  color: rgba(255, 255, 255, 0.35);
}
.tg-hero .tg-bc b {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
  color: #7ff5e2;
}
.tg-hero .tg-kpi {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
  backdrop-filter: blur(8px);
}
.tg-hero .tg-kpi .k-v {
  color: #fff;
}
.tg-hero .tg-kpi .k-l {
  color: rgba(255, 255, 255, 0.65);
}
.tg-hero .tg-kpi .k-ic {
  background: rgba(127, 245, 226, 0.12);
  box-shadow: inset 0 0 0 1px rgba(127, 245, 226, 0.3);
  color: #7ff5e2;
}
.tg-hero .tg-kpi.warn .k-ic {
  background: rgba(255, 197, 61, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 197, 61, 0.35);
  color: #ffc53d;
}
.tg-hero .tg-kpi.warn .k-v {
  color: #ffd968;
}
.tg-hero .tg-ring {
  border-color: rgba(127, 245, 226, 0.55);
  box-shadow: 0 0 18px rgba(127, 245, 226, 0.35);
}
.tg-hero .tg-ring.r2 {
  border-color: rgba(127, 245, 226, 0.3);
}
.tg-hero .tg-orb {
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.9),
    inset 0 -22px 36px rgba(30, 185, 165, 0.45),
    inset 0 12px 24px rgba(255, 255, 255, 0.7),
    0 0 60px rgba(95, 227, 207, 0.55),
    0 26px 50px -18px rgba(0, 0, 0, 0.5);
}
.tg-hero .tg-sat {
  background: rgba(8, 42, 45, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5);
}
.tg-hero .tg-sat span {
  color: rgba(255, 255, 255, 0.65);
}

/* ===== Hero gelap seragam untuk semua modul ===== */
.hero,
.ra-head {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  color: #fff;
  padding: 30px 36px;
  background:
    radial-gradient(ellipse at 85% 20%, rgba(95, 227, 207, 0.28) 0, transparent 45%),
    radial-gradient(ellipse at 10% 110%, rgba(10, 141, 159, 0.45) 0, transparent 50%),
    linear-gradient(120deg, #082a2d 0%, #0d3d40 45%, #006b7a 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 70px -35px rgba(8, 42, 45, 0.75);
}
.hero.compact {
  padding: 28px 36px;
}
.hero-map,
.hero-blob,
.hero-shine {
  display: none !important;
}
.hero .hero-in {
  position: relative;
  z-index: 3;
  padding-right: 250px;
  box-sizing: border-box;
}
.hero h1,
.hero.compact h1 {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin: 12px 0 0;
  color: #fff;
}
.hero .lead {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 8px;
}
.hero .facts > div,
.hero .goal > div {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: none;
}
.hero .facts .l,
.hero .goal .l {
  color: rgba(255, 255, 255, 0.65);
  font-weight: 700;
}
.hero .facts .v,
.hero .goal .v {
  color: #fff;
}
.hero .facts {
  margin-top: 20px;
}
.hx-vis {
  position: absolute;
  right: 34px;
  top: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  z-index: 2;
  pointer-events: none;
  perspective: 700px;
}
.hx-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 2px solid rgba(127, 245, 226, 0.5);
  box-shadow: 0 0 16px rgba(127, 245, 226, 0.3);
}
.hx-ring.r1 {
  width: 220px;
  height: 220px;
  margin: -110px 0 0 -110px;
  transform: rotateX(74deg);
  animation: hxSpin 20s linear infinite;
}
.hx-ring.r2 {
  width: 170px;
  height: 170px;
  margin: -85px 0 0 -85px;
  border-color: rgba(127, 245, 226, 0.28);
  transform: rotateX(70deg) rotateY(40deg);
  animation: hxSpin2 14s linear infinite reverse;
}
.hx-orb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 112px;
  height: 112px;
  margin: -56px 0 0 -56px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.35) 0 56%,
    rgba(190, 240, 232, 0.5) 72%,
    rgba(255, 255, 255, 0.9) 80%,
    rgba(150, 225, 212, 0.55) 82%
  );
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.9),
    inset 0 -18px 30px rgba(30, 185, 165, 0.45),
    inset 0 10px 20px rgba(255, 255, 255, 0.7),
    0 0 50px rgba(95, 227, 207, 0.5),
    0 20px 40px -16px rgba(0, 0, 0, 0.5);
  animation: tgBob 5s ease-in-out infinite;
}
.hx-orb .liq {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -6%;
  height: 40%;
  background: linear-gradient(180deg, rgba(130, 230, 214, 0.65), rgba(25, 180, 160, 0.8));
  border-radius: 45% 55% 0 0/18% 22% 0 0;
  animation: rkSlosh 4s ease-in-out infinite;
}
.hx-orb .hl {
  position: absolute;
  left: 16%;
  top: 9%;
  width: 40%;
  height: 24%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 40% 40%,
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0) 70%
  );
  transform: rotate(-28deg);
}
.hx-orb img {
  position: relative;
  z-index: 2;
  width: 46%;
  margin-top: -6px;
  filter: drop-shadow(1px 1px 0 #0a7f86) drop-shadow(0 6px 6px rgba(10, 110, 100, 0.3));
}
.hx-dot {
  position: absolute;
  border-radius: 50%;
  z-index: 3;
}
.hx-dot.g {
  left: 12%;
  top: 16%;
  width: 11px;
  height: 11px;
  background: radial-gradient(circle at 34% 30%, #fffbe6 0 10%, #ffd968 34%, #e2a52c 72%, #b77d12);
  box-shadow: 0 0 12px rgba(255, 200, 80, 0.6);
  animation: tgBob 4s ease-in-out infinite;
}
.hx-dot.m {
  right: 8%;
  bottom: 18%;
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 34% 30%, #fff 0 12%, #a8efe2 40%, #1ba591);
  animation: tgBob 5s ease-in-out infinite -2s;
}
@keyframes hxSpin {
  to {
    transform: rotateX(74deg) rotateZ(360deg);
  }
}
@keyframes hxSpin2 {
  to {
    transform: rotateX(70deg) rotateY(40deg) rotateZ(360deg);
  }
}
.hero .tg-bc,
.hero .tg-bc a,
.ra-head .tg-bc,
.ra-head .tg-bc a {
  color: rgba(255, 255, 255, 0.65);
}
.hero .tg-bc .sep,
.ra-head .tg-bc .sep {
  color: rgba(255, 255, 255, 0.35);
}
.hero .tg-bc b,
.ra-head .tg-bc b {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
  color: #7ff5e2;
}
/* ra-head (Analisis Peran, Pemakaian Kapasitas, Penempatan) */
.ra-head {
  align-items: center;
  padding: 28px 36px;
}
.ra-head h1 {
  color: #fff;
}
.ra-head h1 em {
  background: linear-gradient(100deg, #7ff5e2, #3fd2bc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ra-head .ra-step {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.6);
}
.ra-head .ra-step i {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.75);
}
.ra-head .ra-step.on {
  background: rgba(127, 245, 226, 0.14);
  border-color: #7ff5e2;
  color: #fff;
  box-shadow: none;
}
.ra-head .ra-step.done {
  color: #7ff5e2;
}
.ra-head .ra-step.done i {
  background: rgba(127, 245, 226, 0.2);
  color: #7ff5e2;
}
.ra-head .ra-adopt > span {
  color: rgba(255, 255, 255, 0.8);
}
.ra-head .seg {
  background: rgba(255, 255, 255, 0.08);
}
.ra-head .seg button {
  color: rgba(255, 255, 255, 0.75);
}
.ra-head .seg button small {
  color: rgba(255, 255, 255, 0.5);
}
.ra-head .seg button.on {
  background: #fff;
  color: #007a6b;
}
.ra-head .seg button.on small {
  color: #6b7d87;
}
.ra-head .tg-btn.ghost {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}
/* ===== Workforce Allocation ===== */
.scroller:has(.wa) {
  background:
    radial-gradient(ellipse at 12% 0%, #e3fbf6 0, transparent 42%),
    radial-gradient(ellipse at 92% 40%, #e6f9f5 0, transparent 38%),
    linear-gradient(160deg, #f8fcfd, #f1f7f7 60%, #f7fbfb);
}
.wa-hero {
  display: block;
  padding: 26px 34px;
}
.wa-hero h1 {
  font-size: 34px;
  margin: 12px 0 4px;
}
.wa-ht {
  display: flex;
  align-items: flex-end;
  gap: 20px;
}
.wa-ht p {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}
.wa-ht > .tg-btn {
  margin-left: auto;
  background: #fff;
  color: #0d3d40;
  box-shadow: none;
}
.wa-own {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.wa-own b {
  display: block;
  font-size: 13px;
}
.wa-own span {
  display: block;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.65);
}
.wa-kp {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 18px;
}
.wa-kp .tg-kpi {
  padding: 12px 16px;
}
.wa-kp .k-v {
  font-size: 21px;
}
.wa-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  padding: 6px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.18);
}
.wa-st {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 8px;
  border-radius: 13px;
  border: 0;
  background: none;
  font: inherit;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.wa-st i {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.12);
}
.wa-st i svg {
  width: 12px;
  height: 12px;
}
.wa-st.done {
  color: #7ff5e2;
}
.wa-st.done i {
  background: rgba(127, 245, 226, 0.2);
  color: #7ff5e2;
}
.wa-st.on {
  background: #fff;
  color: #0d3d40;
}
.wa-st.on i {
  background: linear-gradient(105deg, #14b3a0, #007a6b);
  color: #fff;
}
.wa-ln {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 2px;
  min-width: 12px;
}
.wa-g2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.wa-g64 {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
  align-items: stretch;
}
.wa-g31 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
  align-items: start;
}
.wa-card {
  padding: 18px 20px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #fff;
  box-shadow: 0 24px 60px -40px rgba(13, 61, 64, 0.45);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wa-ch {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wa-ch h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.wa-ch .pill,
.wa-ch .tg-btn,
.wa-ch .cc-link {
  margin-left: auto;
}
.wa-ch .wa-note + .tg-btn {
  margin-left: 12px;
}
.wa-note {
  margin-left: auto;
  font-size: 12px;
  color: #6b7d87;
}
.pill {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.pill.ok {
  background: #e3f7f2;
  color: #00695c;
}
.pill.t1,
.pill.bad {
  background: #fde8ea;
  color: #9f1239;
}
.pill.t2 {
  background: #fff3d6;
  color: #8a5b00;
}
.pill.t3 {
  background: #e8f1ff;
  color: #1e4f9c;
}
.wa-doc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f3f9f8;
  border: 1px solid #e1f0ed;
}
.wa-doc > svg {
  width: 16px;
  height: 16px;
  color: #079e93;
}
.wa-doc b {
  display: block;
  font-size: 13px;
}
.wa-doc span {
  display: block;
  font-size: 11.5px;
  color: #6b7d87;
}
.wa-doc em {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 800;
  color: #00695c;
}
.wa-doc em svg {
  width: 12px;
  height: 12px;
}
.wa-ext {
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(150deg, #fff, #effbf8);
  border: 1px solid #d6efe9;
}
.wa-ext .fl {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #079e93;
  margin-bottom: 8px;
}
.wa-ext ul {
  margin: 0;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #2c4a50;
}
.wa-caps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.wa-caps div {
  position: relative;
  padding: 8px 34px 8px 10px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e3eef0;
}
.wa-caps b {
  display: block;
  font-size: 12.5px;
}
.wa-caps span {
  display: block;
  font-size: 11px;
  color: #6b7d87;
}
.wa-caps em {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-style: normal;
  font-weight: 800;
  font-size: 15px;
  color: #007a6b;
}
.wa-cx {
  display: flex;
  align-items: center;
  gap: 16px;
}
.wa-cx .ring {
  --p: 60;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  background:
    radial-gradient(closest-side, #fff 78%, transparent 79%),
    conic-gradient(#14b3a0 calc(var(--p) * 1%), #e6eef0 0);
  flex: none;
}
.wa-cx .ring b {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
.wa-cx .ring span {
  font-size: 10.5px;
  color: #6b7d87;
}
.wa-cx > div:last-child b {
  font-size: 15px;
}
.wa-cx p {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: #6b7d87;
}
.wa-ind .t {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.wa-ind .t b {
  font-size: 13px;
}
.wa-ind .t span {
  font-size: 11px;
  color: #8a9ca5;
}
.wa-ind .t em {
  margin-left: auto;
  font-style: normal;
  font-weight: 800;
  color: #007a6b;
}
.wa-ind input {
  width: 100%;
  accent-color: #14b3a0;
  margin: 4px 0 0;
}
.wa-ind small {
  display: block;
  font-size: 11px;
  color: #8a9ca5;
}
.wa-fx {
  font-size: 12px;
  color: #4a6670;
  padding-top: 10px;
  border-top: 1px dashed #e1ecee;
}
.wa-opt {
  cursor: pointer;
  transition: 0.2s;
  border: 1.5px solid transparent;
}
.wa-opt.on {
  border-color: #2fbfab;
  box-shadow:
    0 0 0 4px #8ee9db33,
    0 24px 60px -36px rgba(0, 139, 120, 0.5);
}
.wa-sub {
  margin: -4px 0 0;
  font-size: 12.5px;
  color: #6b7d87;
  line-height: 1.5;
}
.wa-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 6px 0;
}
.wa-tree .n {
  position: relative;
  padding: 7px 14px;
  border-radius: 12px;
  background: #f3f9f8;
  border: 1px solid #e1f0ed;
  text-align: center;
  margin-top: 14px;
}
.wa-tree .n:first-child {
  margin-top: 0;
  background: #0d3d40;
  border-color: #0d3d40;
  color: #fff;
}
.wa-tree .n:first-child span {
  color: rgba(255, 255, 255, 0.7);
}
.wa-tree .n:not(:first-child):before {
  content: '';
  position: absolute;
  left: 50%;
  top: -15px;
  height: 14px;
  border-left: 2px solid #cfe5e2;
}
.wa-tree .n.l1 {
  background: #e3f7f2;
  border-color: #9fe0d4;
}
.wa-tree b {
  display: block;
  font-size: 12.5px;
}
.wa-tree span {
  display: block;
  font-size: 11px;
  color: #6b7d87;
}
.wa-m {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.wa-m div {
  padding: 9px 10px;
  border-radius: 12px;
  background: #f3f9f8;
}
.wa-m span {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  color: #6b7d87;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.wa-m b {
  display: block;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 2px;
}
.wa-pc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.wa-pc ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  line-height: 1.4;
}
.wa-pc li {
  padding-left: 18px;
  position: relative;
}
.wa-pc .p li:before {
  content: '+';
  position: absolute;
  left: 0;
  font-weight: 800;
  color: #00a389;
}
.wa-pc .c li:before {
  content: '−';
  position: absolute;
  left: 0;
  font-weight: 800;
  color: #c2410c;
}
.wa-pick {
  height: 40px;
  border-radius: 12px;
  border: 1px solid #cfe7e2;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  color: #007a6b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}
.wa-pick svg {
  width: 14px;
  height: 14px;
}
.wa-pick.on {
  background: linear-gradient(105deg, #14b3a0, #007a6b);
  color: #fff;
  border-color: transparent;
}
.wa-lead {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(140deg, #0d3d40, #006b7a 70%, #0a8d9f);
  box-shadow: 0 24px 50px -28px rgba(13, 61, 64, 0.7);
}
.wa-lead .pav {
  border-radius: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
}
.wa-lead .nm span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7ff5e2;
}
.wa-lead .nm b {
  display: block;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.wa-lead .nm em {
  display: block;
  font-style: normal;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.7);
}
.wa-ls {
  margin-left: auto;
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 8px;
}
.wa-ls div {
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  text-align: center;
}
.wa-ls b {
  display: block;
  font-size: 19px;
  font-weight: 800;
}
.wa-ls span {
  display: block;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.65);
}
.wa-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: #2c4a50;
}
.wa-form em {
  display: inline-block;
  width: 44px;
  font-style: normal;
  font-weight: 800;
  color: #007a6b;
}
.wa-pp {
  display: flex;
  align-items: center;
  gap: 9px;
}
.wa-pp b {
  display: block;
  font-size: 13px;
}
.wa-pp span {
  display: block;
  font-size: 11.5px;
  color: #6b7d87;
}
#waLeads tr.sel td {
  background: #f0fbf8;
}
.wa-flags {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}
.wa-flags .f {
  display: flex;
  gap: 9px;
  padding: 11px 12px;
  border-radius: 14px;
  background: #f6fafa;
  border: 1px solid #e6eff1;
}
.wa-flags .f i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
  margin-top: 4px;
}
.wa-flags .f.g i {
  background: #14b3a0;
}
.wa-flags .f.y i {
  background: #e8b04b;
}
.wa-flags .f.r i {
  background: #e5484d;
}
.wa-flags .f.r {
  background: #fff5f5;
  border-color: #f9d4d6;
}
.wa-flags .f.y {
  background: #fffaf0;
  border-color: #f6e2b0;
}
.wa-flags b {
  display: block;
  font-size: 12px;
  line-height: 1.3;
}
.wa-flags span {
  display: block;
  font-size: 11.5px;
  color: #6b7d87;
  margin-top: 2px;
}
.wa-lrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #0d3d40;
  color: #fff;
}
.wa-lrow b {
  display: block;
  font-size: 13px;
}
.wa-lrow span {
  display: block;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.7);
}
.wa-lrow .pill {
  margin-left: auto;
  background: rgba(127, 245, 226, 0.15);
  color: #7ff5e2;
}
.wa-role {
  padding: 12px 0;
  border-top: 1px solid #eef3f3;
}
.wa-role .rh {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.wa-role .rh b {
  font-size: 13.5px;
}
.wa-role .rh span {
  font-size: 12px;
  color: #6b7d87;
}
.wa-role .rc {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px;
}
.wa-cd {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 14px;
  border: 1px solid #e3eef0;
  background: #fff;
  text-align: left;
  font: inherit;
  color: #142b35;
  cursor: pointer;
}
.wa-cd b {
  display: block;
  font-size: 12.5px;
}
.wa-cd span {
  display: block;
  font-size: 11px;
  color: #6b7d87;
}
.wa-cd em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: #2c5d60;
  margin-top: 3px;
  line-height: 1.35;
}
.wa-cd.on {
  border-color: #2fbfab;
  background: linear-gradient(150deg, #fff, #eafaf6);
  box-shadow: 0 0 0 3px #8ee9db33;
}
.wa-cd[disabled] {
  opacity: 0.45;
  cursor: default;
}
.wa-cd.hire {
  border-style: dashed;
  border-color: #f0c96a;
  background: #fffaf0;
  cursor: default;
}
.wa-cd.hire > svg {
  width: 14px;
  height: 14px;
  color: #b07a0e;
  margin-top: 3px;
}
.wa-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 12px;
}
.wa-score {
  padding: 18px;
  border-radius: 24px;
  background: linear-gradient(150deg, #0d3d40, #006b7a 70%, #0a8d9f);
  color: #fff;
  box-shadow: 0 24px 50px -28px rgba(13, 61, 64, 0.7);
}
.wa-score > span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7ff5e2;
}
.wa-score > b {
  display: block;
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1.05;
}
.wa-score small {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
}
.wa-score .bar {
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.15);
  margin: 10px 0 8px;
  overflow: hidden;
}
.wa-score .bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #7ff5e2, #ffd968);
}
.wa-score .r {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}
.wa-score .r b {
  color: #fff;
}
.wa-fin {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wa-qs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.wa-qs div {
  padding: 14px 16px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 40px -30px rgba(13, 61, 64, 0.45);
}
.wa-qs span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7d87;
}
.wa-qs b {
  display: block;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.04em;
  margin-top: 3px;
}
.wa-qs em {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: #6b7d87;
}
.wa-sum .no {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #0d3d40;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.wa-sum p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #2c4a50;
}
.wa-save {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px 16px 22px;
  border-radius: 22px;
  background: linear-gradient(110deg, #0d3d40, #006b7a 60%, #0a8d9f);
  color: #fff;
}
.wa-save span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7ff5e2;
}
.wa-save b {
  display: block;
  font-size: 20px;
  font-weight: 800;
}
.wa-save em {
  display: block;
  font-style: normal;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.7);
}
.wa-save .tg-btn {
  margin-left: auto;
  background: #fff;
  color: #0d3d40;
  box-shadow: none;
}
.wa-save .tg-btn .ar {
  background: linear-gradient(105deg, #14b3a0, #007a6b);
}
.wa-nav {
  display: flex;
  justify-content: space-between;
}
.wa-empty {
  align-items: center;
  text-align: center;
  padding: 40px;
}
.wa-empty > svg {
  width: 28px;
  height: 28px;
  color: #079e93;
}
.wa-empty b {
  font-size: 16px;
}
.wa-empty span {
  font-size: 13px;
  color: #6b7d87;
}
.wa-paper {
  width: min(860px, 100%);
  margin: 0 auto;
  padding: 48px 56px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 30px 70px -40px rgba(13, 61, 64, 0.5);
  color: #1b2b30;
  font-size: 12.5px;
  line-height: 1.6;
}
.wa-paper header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 3px solid #0d3d40;
  margin-bottom: 8px;
}
.wa-paper header span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #007a6b;
}
.wa-paper h2 {
  margin: 4px 0 2px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.wa-paper header p {
  margin: 0;
  color: #4a6670;
}
.wa-paper .meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
}
.wa-paper .meta span {
  color: #8a9ca5;
  font-size: 10px;
  letter-spacing: 0.06em;
}
.wa-paper .meta b {
  display: block;
  font-size: 12px;
}
.wa-paper section {
  padding: 14px 0;
  border-bottom: 1px solid #eef3f3;
}
.wa-paper h4 {
  margin: 0 0 6px;
  font-size: 13.5px;
  font-weight: 800;
  color: #0d3d40;
}
.wa-paper p {
  margin: 0 0 8px;
}
.wa-paper table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.wa-paper th {
  text-align: left;
  background: #f3f9f8;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #4a6670;
  padding: 6px 8px;
}
.wa-paper td {
  padding: 6px 8px;
  border-bottom: 1px solid #eef3f3;
  vertical-align: top;
}
.wa-paper .sign td {
  height: 42px;
}
.wa-paper footer {
  padding-top: 16px;
  text-align: center;
  font-size: 10.5px;
  color: #8a9ca5;
}
@media print {
  html {
    zoom: 1 !important;
  }
  body {
    overflow: visible !important;
    height: auto !important;
  }
  body.pr-sel * {
    visibility: hidden !important;
  }
  body.pr-sel .pr-on,
  body.pr-sel .pr-on * {
    visibility: visible !important;
  }
  body.pr-sel .pr-on {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    box-shadow: none;
  }
  .sk-print {
    display: none;
  }
  body.pr-sel .sk-print.pr-on {
    display: block;
  }
  .sk-print .sk-paper {
    page-break-after: always;
    box-shadow: none;
    margin: 0;
  }
  .sk-print .sk-paper.pr-skip {
    display: none;
  }
  .view,
  .scroller {
    position: static !important;
    overflow: visible !important;
    height: auto !important;
  }
}
/* peta inisiatif */
.wa-mapg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
  align-items: stretch;
}
.wa-map {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #f4fbfa, #e8f4f2);
  border: 1px solid #e1f0ed;
}
.wa-map svg {
  display: block;
  width: 100%;
  height: auto;
}
.wa-map .near {
  fill: #e3ecec;
  stroke: #fff;
  stroke-width: 0.6;
}
.wa-map .land {
  fill: url(#waLand);
  stroke: #fff;
  stroke-width: 1;
  filter: drop-shadow(0 6px 10px rgba(13, 90, 85, 0.12));
}
.wa-map .arc {
  fill: none;
  stroke: #9fd8cf;
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
}
.wa-map .arc.on {
  stroke: #0a9a8a;
  stroke-width: 2.2;
  stroke-dasharray: 6 6;
  animation: waDash 1.2s linear infinite;
}
@keyframes waDash {
  to {
    stroke-dashoffset: -24;
  }
}
.wa-map .hq rect {
  fill: #0d3d40;
}
.wa-map .hq text {
  font-size: 13px;
  font-weight: 700;
  fill: #0d3d40;
}
.wa-map .pin {
  cursor: pointer;
}
.wa-map .pin .pd {
  fill: #14b3a0;
  stroke: #fff;
  stroke-width: 2.5;
}
.wa-map .pin .pl {
  fill: rgba(20, 179, 160, 0.25);
  transform-origin: center;
  transform-box: fill-box;
  animation: waPulse 2.2s ease-out infinite;
}
.wa-map .pin.on .pd {
  fill: #e8b04b;
}
.wa-map .pin.on .pl {
  fill: rgba(232, 176, 75, 0.35);
}
@keyframes waPulse {
  0% {
    transform: scale(0.4);
    opacity: 1;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
.wa-map .pin .lb rect {
  fill: #fff;
  stroke: #d6ebe7;
}
.wa-map .pin .lb text {
  font-size: 12.5px;
  font-weight: 700;
  fill: #173a40;
}
.wa-map .pin.on .lb rect {
  fill: #0d3d40;
  stroke: #0d3d40;
}
.wa-map .pin.on .lb text {
  fill: #fff;
}
.wa-map .pin:not(.on) .lb {
  opacity: 0.92;
}
.wa-plist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wa-pi {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid #e3eef0;
  background: #fff;
  text-align: left;
  font: inherit;
  color: #142b35;
  cursor: pointer;
  transition: 0.2s;
}
.wa-pi > div:first-child {
  flex: 1;
  min-width: 0;
}
.wa-pi b {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
}
.wa-pi span {
  display: block;
  font-size: 11.5px;
  color: #6b7d87;
  margin-top: 2px;
}
.wa-pi .r {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.wa-pi .r em {
  font-style: normal;
  font-size: 11px;
  color: #6b7d87;
}
.wa-pi .pill {
  height: 22px;
  font-size: 11px;
}
.wa-pi:hover {
  border-color: #9fe0d4;
}
.wa-pi.on {
  border-color: #2fbfab;
  background: linear-gradient(150deg, #fff, #eafaf6);
  box-shadow: 0 0 0 4px #8ee9db33;
}

.wa-ch h3 {
  white-space: nowrap;
}
.wa-ch .tg-btn {
  white-space: nowrap;
  height: 38px;
  padding: 0 14px;
}
.wa-note {
  text-align: right;
}
#waLeads .mb-as {
  min-width: 96px;
  padding: 0 12px;
}
.wa-ls b {
  white-space: nowrap;
}
.wa-tree .n {
  display: block !important;
  width: auto !important;
  min-width: 170px;
  max-width: 220px;
}
.wa-tree .n b,
.wa-tree .n span {
  display: block !important;
}

.wa-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px;
  border-radius: 16px;
  border: 1.5px dashed #9fd8cf;
  background: #f6fcfb;
  text-align: center;
  cursor: pointer;
  transition: 0.2s;
}
.wa-drop svg {
  width: 20px;
  height: 20px;
  color: #079e93;
  transform: rotate(180deg);
}
.wa-drop b {
  font-size: 13.5px;
}
.wa-drop span {
  font-size: 11.5px;
  color: #6b7d87;
}
.wa-drop:hover,
.wa-drop.ov {
  border-color: #14b3a0;
  background: #ecfaf6;
}
.wa-doc em.rd {
  color: #8a9ca5;
}
.wa-doc .spin {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid #cfe5e2;
  border-top-color: #14b3a0;
  animation: waSpin 0.8s linear infinite;
  display: inline-block;
}
@keyframes waSpin {
  to {
    transform: rotate(360deg);
  }
}

.wa-tiers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wa-tiers .tl {
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid #e6eff1;
  background: #f9fbfb;
  opacity: 0.6;
  transition: 0.25s;
}
.wa-tiers .tl .h {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.wa-tiers .tl b {
  font-size: 13.5px;
}
.wa-tiers .tl .h span {
  font-size: 11.5px;
  color: #6b7d87;
}
.wa-tiers .tl p {
  margin: 3px 0 2px;
  font-size: 12.5px;
  color: #2c4a50;
}
.wa-tiers .tl em {
  font-style: normal;
  font-size: 11.5px;
  color: #6b7d87;
}
.wa-tiers .tl.on {
  opacity: 1;
  background: #fff;
  box-shadow: 0 10px 22px -16px rgba(13, 61, 64, 0.5);
}
.wa-tiers .tl.t1.on {
  border-color: #f5b5bb;
}
.wa-tiers .tl.t2.on {
  border-color: #f0c96a;
}
.wa-tiers .tl.t3.on {
  border-color: #a9c6f5;
}

.wa-gen {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 18px 16px;
  border-radius: 18px;
  border: 1.5px dashed #b9e4dc;
  background: linear-gradient(160deg, #fbfefd, #f0fbf8);
}
.wa-gen .ob {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #079e93;
  background: radial-gradient(circle at 34% 28%, #fff 0 18%, #d6f7f0 55%, #a8eadd);
  box-shadow:
    inset 0 0 0 1.5px #fff,
    0 12px 24px -12px rgba(0, 139, 120, 0.5);
}
.wa-gen .ob svg {
  width: 22px;
  height: 22px;
}
.wa-gen > b {
  font-size: 15px;
}
.wa-gen > span {
  font-size: 12.5px;
  color: #5d717b;
  line-height: 1.5;
  max-width: 420px;
}
.wa-genl {
  list-style: none;
  margin: 4px 0 6px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.wa-genl li {
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #dcefea;
  font-size: 12px;
  font-weight: 700;
  color: #6b7d87;
  display: inline-flex;
  align-items: center;
  transition: 0.25s;
}
.wa-genl li.ok {
  background: #e3f7f2;
  border-color: #9fe0d4;
  color: #00695c;
}
.wa-genl li.ok:before {
  content: '✓';
  margin-right: 5px;
}
.wa-gen .tg-btn .spin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  animation: waSpin 0.8s linear infinite;
  display: inline-block;
}
.wa-par {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.wa-par > div {
  position: relative;
  overflow: hidden;
  padding: 9px 12px 11px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e3eef0;
}
.wa-par .h {
  display: flex;
  align-items: baseline;
}
.wa-par .h b {
  font-size: 13px;
}
.wa-par .h em {
  margin-left: auto;
  font-style: normal;
  font-weight: 800;
  color: #007a6b;
}
.wa-par span {
  display: block;
  font-size: 12px;
  color: #2c4a50;
  margin-top: 2px;
}
.wa-par small {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: #8a9ca5;
  margin-top: 3px;
}
.wa-par small svg {
  width: 11px;
  height: 11px;
}
.wa-par i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #5fe3cf, #007a6b);
}
.wa-parf {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #2c5d60;
}

/* ===== Chip pengganti kalimat bantu ===== */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}
.chp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: #eef5f4;
  color: #2c5d60;
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
  white-space: nowrap;
  line-height: 1;
}
.chp svg {
  width: 11px;
  height: 11px;
}
.chp.ok {
  background: #e3f7f2;
  color: #00695c;
}
.chp.warn {
  background: #fff3d6;
  color: #8a5b00;
}
.chp.src {
  background: #fff;
  border: 1px solid #e1ecee;
  color: #6b7d87;
}
.chips.dk .chp {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.ra-kpis .k em.chp {
  display: inline-flex;
  margin-top: 8px;
}
.ra-kpis .k.dk em.chp {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.mb-c .mt .chp {
  margin-top: 4px;
}
.wa-tiers .tl .h .chp {
  height: 20px;
}
/* kalimat bantu di modul lama */
.hero .lead,
.kin-legend > span:not(:has(i)):not(:has(.dot)),
.prov-foot,
.ai-empty p,
.empty,
.section-cta .q,
.pager > span,
.rec-wrap .t,
.ai-status .skip {
  display: none !important;
}
.card-h .meta {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 11px;
  font-weight: 700;
}
.sig-i > div > p {
  display: none;
}

/* ===== Chip & pill v2: warna lebih bersih, teks rata tengah ===== */
.chp,
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto !important;
  min-height: 0;
  padding: 4px 10px 5px !important;
  line-height: 1.25 !important;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0;
  vertical-align: middle;
  box-sizing: border-box;
}
.chp {
  background: #fff;
  border: 1px solid #dbe7e9;
  color: #3d5a60;
}
.chp.ok,
.pill.ok {
  background: #e6f6f2;
  border: 1px solid #bfe6dc;
  color: #00695c;
}
.chp.warn,
.pill.t2 {
  background: #fff7e6;
  border: 1px solid #f3dca4;
  color: #8a5b00;
}
.pill.t1,
.pill.bad {
  background: #fdf0f1;
  border: 1px solid #f5c9cd;
  color: #a8243a;
}
.pill.t3 {
  background: #eef4ff;
  border: 1px solid #cddcf7;
  color: #2a5aa8;
}
.chp.src {
  background: #f7fafa;
  border-color: #e6eef0;
  color: #6b7d87;
}
.chips.dk .chp {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.ra-kpis .k.dk em.chp {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.wa-lrow .pill {
  background: rgba(127, 245, 226, 0.12);
  border: 1px solid rgba(127, 245, 226, 0.3);
  color: #7ff5e2;
}
.wa-pi .pill {
  font-size: 11px;
  padding: 3px 9px 4px !important;
}

/* ===== Tier mengikuti palet brand (teal) ===== */
.pill.t1 {
  background: #0d3d40;
  border: 1px solid #0d3d40;
  color: #fff;
}
.pill.t2 {
  background: #d7f1ec;
  border: 1px solid #a9ddd3;
  color: #00695c;
}
.pill.t3 {
  background: #fff;
  border: 1px solid #cfe5e2;
  color: #4a7a78;
}
.wa-tiers .tl.t1.on {
  border-color: #0d3d40;
}
.wa-tiers .tl.t2.on {
  border-color: #14b3a0;
}
.wa-tiers .tl.t3.on {
  border-color: #9fd8cf;
}
.wa-tiers .tl.on .h b {
  color: #0d3d40;
}

.page.soft
  *:not(.hx-orb):not(.hx-ring):not(.hx-dot):not(.tg-orb):not(.tg-ring):not(.tg-sat):not(
    .tg-dot
  ):not(.liq):not(.pl):not(.arc):not(.spin):not(.stepin):not(.ra-jd):not(.ra-s):not(.toast):not(
    .aiL *
  ):not(.sd-load *):not(.sd-ld *):not(.ana2 *):not(.sd-cat):not(.sd-net):not(.sd-net *) {
  animation-name: none !important;
}
.page.soft .stepin {
  animation: stepIn 0.28s ease both !important;
}
@keyframes stepIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* loader & masuk ulang */
.page.busy > * {
  transition:
    filter 0.2s ease,
    opacity 0.2s ease;
  filter: blur(3px) saturate(0.8);
  opacity: 0.45;
  pointer-events: none;
}
.page.busy .tg-hero,
.page.busy .wa-hero,
.page.busy .ra-head,
.page.busy .hero {
  filter: none;
  opacity: 1;
}
.page.busy .tg > *:not(.tg-hero):not(.ra-head) {
  transition:
    filter 0.2s,
    opacity 0.2s;
  filter: blur(3px);
  opacity: 0.45;
}
.page.busy > .tg {
  filter: none;
  opacity: 1;
}
.page.rein .tg > *:not(.tg-hero):not(.ra-head),
.page.rein > *:not(.tg) {
  animation: reIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
.page.rein .tg > *:nth-child(2) {
  animation-delay: 0.04s !important;
}
.page.rein .tg > *:nth-child(3) {
  animation-delay: 0.09s !important;
}
.page.rein .tg > *:nth-child(4) {
  animation-delay: 0.14s !important;
}
.page.rein .tg > *:nth-child(5) {
  animation-delay: 0.19s !important;
}
@keyframes reIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.995);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
.main {
  position: relative;
}
#pgLoad {
  position: absolute;
  left: 50%;
  top: 55%;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
  transition:
    opacity 0.18s ease,
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#pgLoad.on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.pl-orb {
  position: relative;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
}
.pl-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: plSpin 0.9s linear infinite;
}
.pl-ring circle {
  fill: none;
  stroke: url(#plg);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 150 80;
  filter: drop-shadow(0 0 6px rgba(95, 227, 207, 0.7));
}
.pl-ball {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.6) 0 56%,
    rgba(190, 240, 232, 0.6) 72%,
    #fff 80%,
    rgba(150, 225, 212, 0.6) 82%
  );
  box-shadow:
    inset 0 0 0 1.5px #fff,
    inset 0 -10px 18px rgba(30, 185, 165, 0.4),
    0 14px 30px -10px rgba(13, 90, 85, 0.5),
    0 0 30px rgba(95, 227, 207, 0.45);
}
.pl-ball .liq {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -6%;
  height: 42%;
  background: linear-gradient(180deg, rgba(130, 230, 214, 0.75), rgba(25, 180, 160, 0.85));
  border-radius: 45% 55% 0 0/18% 22% 0 0;
  animation: rkSlosh 1.2s ease-in-out infinite;
}
.pl-mk {
  position: absolute;
  inset: 20%;
  width: 60%;
  height: 60%;
  overflow: visible;
  animation: plFlip 1.4s ease-in-out infinite;
}
.pl-mk path {
  fill: none;
  stroke: #0a9aa4;
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pl-mk .tip {
  stroke: #ffc53d;
}
.pl-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  margin: -5px;
}
.pl-dot.a {
  background: #ffc53d;
  box-shadow: 0 0 10px #ffc53d;
  animation: plOrbit 1.1s linear infinite;
}
.pl-dot.b {
  background: #5fe3cf;
  box-shadow: 0 0 10px #5fe3cf;
  animation: plOrbit 1.1s linear infinite -0.55s;
}
@keyframes plSpin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes plFlip {
  0%,
  100% {
    transform: rotateY(0);
  }
  50% {
    transform: rotateY(180deg);
  }
}
@keyframes plOrbit {
  from {
    transform: rotate(0) translateX(52px) rotate(0);
  }
  to {
    transform: rotate(360deg) translateX(52px) rotate(-360deg);
  }
}

/* kartu inisiatif v2 */
.wa-pi {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  padding: 12px 14px;
}
.wa-pi .t {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wa-pi .t b {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13.5px;
  font-weight: 800;
  display: block;
}
.wa-pi .t .pill {
  flex: none;
}
.wa-pi .lc,
.wa-pi .ow {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #4a6670;
  font-weight: 600;
}
.wa-pi .lc svg {
  width: 15px;
  height: 15px;
  stroke: #079e93;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
  margin: 0 3px 0 3px;
}
.wa-pi .ow .pav {
  border-radius: 50%;
  flex: none;
}
.wa-pi .lc span,
.wa-pi .ow span {
  display: block;
  margin: 0;
  font-size: 12px;
  color: #4a6670;
}
.wa-plist {
  justify-content: space-between;
}

.wa-aib {
  gap: 14px;
}
.wa-aib .wa-ch h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wa-aib .wa-ch h3 svg {
  width: 16px;
  height: 16px;
  color: #079e93;
}
.wa-aib .wa-ch .tg-btn {
  height: 42px;
}
.wa-aig {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.wa-aig .ap {
  position: relative;
  overflow: hidden;
  padding: 12px 12px 14px;
  border-radius: 16px;
  background: #f6fafa;
  border: 1px solid #e6eff1;
  transition:
    background 0.3s,
    border-color 0.3s;
}
.wa-aig .ap.ok {
  background: #fff;
  border-color: #bfe6dc;
  box-shadow: 0 10px 22px -18px rgba(0, 139, 120, 0.6);
}
.wa-aig .ap .h {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.wa-aig .ap .h b {
  font-size: 12.5px;
  line-height: 1.25;
}
.wa-aig .ap .h em {
  margin-left: auto;
  font-style: normal;
  font-size: 22px;
  font-weight: 800;
  color: #007a6b;
  letter-spacing: -0.03em;
}
.wa-aig .ap .chips {
  flex-direction: column;
  align-items: flex-start;
}
.wa-aig .ap .chp {
  white-space: normal;
  text-align: left;
  height: auto;
  line-height: 1.3;
}
.wa-aig .ap i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #5fe3cf, #007a6b);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.wa-aig .sk {
  display: block;
  height: 9px;
  border-radius: 6px;
  margin-top: 10px;
  background: linear-gradient(90deg, #e8f0f1, #f4f8f8, #e8f0f1);
  background-size: 200% 100%;
  animation: skSh 1.4s linear infinite;
  width: 85%;
}
.wa-aig .sk.s2 {
  width: 60%;
  margin-top: 6px;
}
@keyframes skSh {
  to {
    background-position: -200% 0;
  }
}
.wa-rng {
  position: relative;
}
.wa-rng .aim {
  position: absolute;
  top: 50%;
  width: 3px;
  height: 16px;
  margin: -8px 0 0 -1.5px;
  border-radius: 2px;
  background: #e8b04b;
  pointer-events: none;
  box-shadow: 0 0 0 2px #fff;
}
.chp.ai {
  background: #fff7e6;
  border-color: #f3dca4;
  color: #8a5b00;
  margin-left: 6px;
}
.wa-ind .t .chp.ai {
  margin-left: auto;
}
.wa-ind .t .chp.ai + em {
  margin-left: 8px;
}

.wa-rsk {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 6px 0 8px;
  align-items: center;
}
.wa-rsk .sk {
  display: block;
  height: 9px;
  border-radius: 6px;
  background: linear-gradient(90deg, #e8f0f1, #f4f8f8, #e8f0f1);
  background-size: 200% 100%;
  animation: skSh 1.4s linear infinite;
  width: 80%;
}
.wa-rsk .sk:nth-child(2) {
  width: 65%;
}
.wa-rsk .sk:nth-child(3) {
  width: 72%;
}
.wa-rsk .sk:nth-child(4) {
  width: 55%;
}
.wa-gen.run .wa-rsk .sk {
  background: linear-gradient(90deg, #c9efe7, #ecfbf7, #c9efe7);
  background-size: 200% 100%;
  animation-duration: 0.8s;
}
.wa-rsl {
  margin: 0;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #2c4a50;
}
.wa-rsl li.typ:after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 13px;
  margin-left: 2px;
  vertical-align: -2px;
  background: #14b3a0;
  animation: blink 0.6s steps(1) infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}

.wa-aig .ap.ld .sk {
  background: linear-gradient(90deg, #c9efe7, #ecfbf7, #c9efe7);
  background-size: 200% 100%;
  animation-duration: 0.8s;
}
.wa-aig .ap.ld {
  border-color: #bfe6dc;
}
.wa-aig .ap.ld .h em {
  color: transparent;
  width: 26px;
  height: 20px;
  border-radius: 6px;
  background: linear-gradient(90deg, #c9efe7, #ecfbf7, #c9efe7);
  background-size: 200% 100%;
  animation: skSh 0.8s linear infinite;
}
.wa-g31 {
  margin-top: 0;
}

/* kartu penilaian AI v2 */
.wa-aig .ap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 12px;
  min-width: 0;
}
.wa-aig .ap .lbl {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b7d87;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wa-aig .ap .val {
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.wa-aig .ap .val em {
  font-style: normal;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #0d3d40;
  line-height: 1;
}
.wa-aig .ap .val small {
  font-size: 12px;
  font-weight: 700;
  color: #8a9ca5;
}
.wa-aig .ap .bar {
  height: 5px;
  border-radius: 99px;
  background: #e6eff0;
  overflow: hidden;
  margin: 2px 0 4px;
}
.wa-aig .ap .bar i {
  position: static;
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #5fe3cf, #007a6b);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.wa-aig .ap > i {
  display: none;
}
.wa-aig .ap .ev {
  font-size: 12.5px;
  font-weight: 700;
  color: #173a40;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 34px;
}
.wa-aig .ap .src {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-top: 7px;
  border-top: 1px dashed #e1ecee;
  font-size: 11px;
  color: #8a9ca5;
  min-width: 0;
}
.wa-aig .ap .src svg {
  width: 12px;
  height: 12px;
  flex: none;
  color: #079e93;
}
.wa-aig .ap .src span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wa-aig .ap.ld .val em {
  color: transparent;
  width: 38px;
  height: 28px;
  border-radius: 7px;
  background: linear-gradient(90deg, #c9efe7, #ecfbf7, #c9efe7);
  background-size: 200% 100%;
  animation: skSh 0.8s linear infinite;
}
.wa-aib .wa-ch .pill {
  margin-left: 10px;
}
.wa-aib .wa-ch .cc-link {
  margin-left: auto;
}

/* target metrics */
.tm {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.tm-i {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(150deg, #fff, #f0fbf8);
  border: 1px solid #d6efe9;
  cursor: text;
  transition: 0.2s;
}
.tm-i:hover {
  border-color: #9fe0d4;
}
.tm-i:focus-within {
  border-color: #14b3a0;
  box-shadow: 0 0 0 4px #8ee9db33;
}
.tm-v {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #0d3d40;
  width: 100%;
  outline: none;
}
.tm-i span {
  font-size: 12px;
  font-weight: 700;
  color: #6b7d87;
}
.tm-c {
  width: 100px;
  border: 1px solid transparent;
  background: #f6fafa;
  border-radius: 8px;
  padding: 5px 8px;
  font: inherit;
  font-weight: 800;
  color: #0d3d40;
}
.tm-c:hover {
  border-color: #cfe5e2;
}
.tm-c:focus {
  outline: none;
  border-color: #14b3a0;
  background: #fff;
}
/* whiteboard */
.bw-tools {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.bw-tools .tg-btn {
  height: 36px;
  padding: 0 12px;
  font-size: 12.5px;
  gap: 6px;
}
.bw-tools .tg-btn svg {
  width: 14px;
  height: 14px;
}
.bw {
  position: relative;
  border-radius: 18px;
  overflow: auto;
  background: linear-gradient(#f7fbfb, #f7fbfb);
  border: 1px solid #e1f0ed;
  background-image:
    linear-gradient(rgba(13, 61, 64, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 61, 64, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  touch-action: none;
  user-select: none;
}
.bw-l {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  overflow: visible;
}
.bw-l path {
  fill: none;
  stroke: #9fcfc6;
  stroke-width: 1.6;
}
.bw-n {
  position: absolute;
  width: 176px;
  min-height: 58px;
  padding: 9px 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #d9e8e6;
  box-shadow: 0 6px 14px -10px rgba(13, 61, 64, 0.4);
  cursor: grab;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  transition:
    box-shadow 0.15s,
    border-color 0.15s;
}
.bw-n b {
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.25;
  outline: none;
}
.bw-n b[contenteditable='true'] {
  background: #eafaf6;
  border-radius: 5px;
  padding: 0 3px;
  cursor: text;
}
.bw-n .chp {
  align-self: flex-start;
  padding: 2px 8px 3px !important;
  font-size: 10.5px;
}
.bw-n.root {
  background: #0d3d40;
  border-color: #0d3d40;
  color: #fff;
}
.bw-n.root .chp {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.bw-n.lead {
  background: #e3f7f2;
  border-color: #9fe0d4;
}
.bw-n.grp {
  background: #f3faf8;
  border-color: #bfe6dc;
}
.bw-n.role {
  min-height: 64px;
  height: 64px;
}
.bw-n.drag {
  cursor: grabbing;
  z-index: 5;
  box-shadow: 0 20px 34px -14px rgba(13, 61, 64, 0.5);
  border-color: #14b3a0;
}
.bw-n.tgt {
  border-color: #e8b04b;
  box-shadow: 0 0 0 4px rgba(232, 176, 75, 0.3);
}
.bw-x {
  position: absolute;
  right: 5px;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 0;
  background: none;
  color: #8a9ca5;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
}
.bw-n:hover .bw-x {
  opacity: 1;
}
.bw-x:hover {
  background: #fdecec;
  color: #a8243a;
}
.bw-n.new {
  border-style: dashed;
}

.wa-score .sc-who {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 4px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
}
.wa-score .sc-who .pav {
  border-radius: 50%;
}
.wa-score .sc-who b {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.wa-score .sc-who em {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.65);
}
.wa-score .sc-ic {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(127, 245, 226, 0.15);
  color: #7ff5e2;
}
.wa-score .sc-ic svg {
  width: 16px;
  height: 16px;
}
.wa-score > b {
  margin-top: 4px;
}
.wa-g31 + .wa-g31 {
  margin-top: 0;
}

.wa-hero .hx-vis {
  top: 24px;
  margin-top: 0;
  right: 34px;
  transform: scale(0.62);
  transform-origin: top right;
}
.wa-hero .wa-ht {
  padding-right: 150px;
}
.wa-hero .tg-kpis,
.wa-hero .wa-stepper {
  position: relative;
  z-index: 3;
}

/* whiteboard node v2 */
.bw-n {
  width: 232px;
  min-height: 0 !important;
  height: 54px !important;
  padding: 8px 12px;
  gap: 5px;
  justify-content: center;
}
.bw-n b {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12.5px;
  padding-right: 12px;
}
.bw-n .mt {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 20px;
}
.bw-n .mt .pav {
  border-radius: 50%;
  border: 1.5px solid #fff;
  flex: none;
}
.bw-n .mt .nm {
  font-size: 11px;
  font-weight: 600;
  color: #5d717b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bw-n .mt .ct {
  font-size: 11px;
  font-weight: 700;
  color: #6b7d87;
  white-space: nowrap;
}
.bw-n .avs {
  display: flex;
}
.bw-n .avs > * {
  margin-left: -5px;
}
.bw-n .avs > *:first-child {
  margin-left: 0;
}
.bw-n .avs .hv {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px dashed #e8b04b;
  background: #fffaf0;
  color: #b07a0e;
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
  box-sizing: border-box;
}
.bw-n.role .mt .ct {
  margin-left: auto;
}
.bw-n.root .mt .nm {
  color: rgba(255, 255, 255, 0.75);
}
.bw-n.root .pav {
  border-color: #0d3d40;
}
.bw-n.grp .mt .ct {
  color: #00695c;
}
/* opsi: metrik & plus-minus */
.wa-m div {
  background: #fff;
  border: 1px solid #e3eef0;
  border-radius: 14px;
  padding: 10px 12px;
  position: relative;
  overflow: hidden;
}
.wa-m div:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #14b3a0;
}
.wa-m div:nth-child(2):before {
  background: #e8b04b;
}
.wa-m div:nth-child(3):before {
  background: #0d3d40;
}
.wa-m div:nth-child(4):before {
  background: #5fd6c3;
}
.wa-m b {
  color: #0d3d40;
}
.wa-pc {
  gap: 10px;
}
.wa-pc .pcb {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid;
}
.wa-pc .pcb.p {
  background: #f2fbf8;
  border-color: #cdeee5;
}
.wa-pc .pcb.c {
  background: #fff8f3;
  border-color: #f6dfcc;
}
.wa-pc .pch {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 8px;
}
.wa-pc .pch i {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-style: normal;
  font-weight: 800;
  color: #fff;
}
.wa-pc .p .pch {
  color: #00695c;
}
.wa-pc .p .pch i {
  background: #14b3a0;
}
.wa-pc .c .pch {
  color: #9a4a12;
}
.wa-pc .c .pch i {
  background: #e08a4a;
}
.wa-pc ul {
  gap: 6px;
}
.wa-pc .pcb li {
  padding-left: 12px;
}
.wa-pc .pcb li:before {
  content: '' !important;
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.wa-pc .p li:before {
  background: #14b3a0;
}
.wa-pc .c li:before {
  background: #e08a4a;
}
.bw-n {
  align-items: stretch;
  text-align: left;
}
.bw-n b,
.bw-n .mt {
  flex: none;
}
.bw-n b {
  line-height: 16px;
  height: 16px;
}

.wa-tree2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0;
}
.wa-tree2 .n {
  padding: 8px 14px;
  border-radius: 12px;
  background: #f3f9f8;
  border: 1px solid #e1f0ed;
  text-align: center;
  min-width: 150px;
}
.wa-tree2 .n b {
  display: block;
  font-size: 12.5px;
}
.wa-tree2 .n span {
  display: block;
  font-size: 11px;
  color: #6b7d87;
}
.wa-tree2 .l0 {
  background: #0d3d40;
  border-color: #0d3d40;
  color: #fff;
}
.wa-tree2 .l0 span {
  color: rgba(255, 255, 255, 0.7);
}
.wa-tree2 .l1 {
  background: #e3f7f2;
  border-color: #9fe0d4;
}
.wa-tree2 .v {
  display: block;
  width: 2px;
  height: 14px;
  background: #cfe5e2;
}
.wa-tree2 .kids {
  display: flex;
  gap: 16px;
  position: relative;
  padding-top: 0;
}
.wa-tree2 .kid {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.wa-tree2 .kids:before {
  content: '';
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 2px;
  background: #cfe5e2;
}

.wa-m div:before {
  display: none !important;
}
.wa-m div {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
}
.wa-m .mi {
  grid-row: 1/3;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid !important;
  place-items: center;
  background: #eef7f5;
  color: #079e93;
}
.wa-m .mi svg {
  width: 14px;
  height: 14px;
}
.wa-m div > span:not(.mi) {
  font-size: 10px;
}
.wa-m b {
  font-size: 16px;
  margin-top: 0;
}

.wa-m div {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 12px;
}
.wa-m .mi {
  grid-row: auto;
  width: 24px;
  height: 24px;
  border-radius: 8px;
}
.wa-m .mi svg {
  width: 13px;
  height: 13px;
}
.wa-m div > span:not(.mi) {
  font-size: 10px;
  white-space: nowrap;
  margin-top: -2px;
}
.wa-m b {
  font-size: 16px;
  white-space: nowrap;
  margin-top: -4px;
}

/* kartu kandidat tim v2 */
.wa-role .rc {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.wa-cd {
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-height: 84px;
  box-sizing: border-box;
}
.wa-cd .pav {
  border-radius: 50%;
  flex: none;
}
.cdi {
  min-width: 0;
  flex: 1;
}
.cdi > b,
.cdi > span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cdi > b {
  font-size: 13px;
}
.cdi > span {
  font-size: 11.5px;
  color: #6b7d87;
  margin-top: 1px;
}
.cdi .chips {
  margin-top: 6px;
  flex-wrap: nowrap;
}
.wa-cd.hire .hav {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px dashed #e8b04b;
  display: grid;
  place-items: center;
  color: #b07a0e;
  flex: none;
  background: #fff;
}
.wa-cd.hire .hav svg {
  width: 14px;
  height: 14px;
}
.wa-cd.hire > svg {
  display: none;
}
/* tabel peringkat */
#waLeads td {
  white-space: nowrap;
}
#waLeads .wa-pp {
  min-width: 0;
}
#waLeads .cdi {
  max-width: 230px;
}
#waLeads .cdi {
  max-width: 260px;
}
#waLeads .ld {
  min-width: 110px;
}
#waLeads .lb {
  width: 60px;
  flex: none;
}
#waLeads .mb-as {
  min-width: 84px;
}
.cc-tbl:has(#waLeads) th,
#waLeads td {
  padding-left: 9px;
  padding-right: 9px;
}

.wa-cd.hire {
  cursor: pointer;
  transition: 0.2s;
}
.wa-cd.hire:hover {
  border-color: #e8b04b;
  background: #fff5e0;
  box-shadow: 0 8px 18px -12px rgba(176, 122, 14, 0.5);
}
.wa-cd.hire.sent {
  border-style: solid;
  border-color: #bfe6dc;
  background: #f2fbf8;
}
.wa-cd.hire.sent .hav {
  border-style: solid;
  border-color: #14b3a0;
  color: #fff;
  background: #14b3a0;
}
#waModal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
}
#waModal .wm-b {
  position: absolute;
  inset: 0;
  background: rgba(8, 42, 45, 0.45);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.2s;
}
#waModal .wm-c {
  position: relative;
  width: min(440px, 90vw);
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 40px 80px -30px rgba(8, 42, 45, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transition: 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#waModal.on .wm-b {
  opacity: 1;
}
#waModal.on .wm-c {
  opacity: 1;
  transform: none;
}
#waModal .wm-ic {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #b07a0e;
  background: #fff3d6;
  box-shadow: inset 0 0 0 1.5px #f3dca4;
}
#waModal .wm-ic svg {
  width: 20px;
  height: 20px;
}
#waModal h3 {
  margin: 4px 0 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
#waModal .chips {
  justify-content: center;
}
#waModal .wm-a {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  width: 100%;
}
#waModal .wm-a .tg-btn {
  flex: 1;
  justify-content: center;
  padding: 0 16px;
}

/* rumus penilaian dropdown */
.fxd {
  margin: 6px 0 2px;
}
.fxb {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 10px 0 4px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s;
}
.fxb:hover {
  background: rgba(255, 255, 255, 0.14);
}
.fxb .i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #7ff5e2;
  color: #0d3d40;
  font-size: 11px;
  font-weight: 800;
  font-style: italic;
  font-family: Georgia, serif;
}
.fxb .cv {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  transition: transform 0.3s;
}
.fxd.on .fxb .cv {
  transform: rotate(180deg);
}
.fxp {
  display: grid;
  grid-template-rows: 0fr;
  transition:
    grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.25s;
  opacity: 0;
}
.fxd.on .fxp {
  grid-template-rows: 1fr;
  opacity: 1;
}
.fxi {
  overflow: hidden;
  min-height: 0;
}
.fxd.on .fxi {
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.fxi .fr {
  display: grid;
  grid-template-columns: 1fr 64px;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 5px;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
}
.fxi .fr .t {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.85);
  grid-column: 1;
}
.fxi .fr .t em {
  font-style: normal;
  font-weight: 800;
  color: #7ff5e2;
}
.fxi .fr .bb {
  grid-column: 1;
  height: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.fxi .fr .bb i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #7ff5e2, #ffd968);
  border-radius: 99px;
}
.fxi .fr .v {
  grid-column: 2;
  grid-row: 1/3;
  text-align: right;
  align-self: center;
}
.fxi .fr .v b {
  display: block;
  font-size: 14px;
  line-height: 1;
}
.fxi .fr .v span {
  display: block;
  font-size: 10.5px;
  color: #ffd968;
  font-weight: 700;
  margin-top: 2px;
}
.fxi .ft {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 8px;
  font-size: 12px;
  font-weight: 800;
  color: #7ff5e2;
}
.fxi .ft b {
  font-size: 18px;
  color: #fff;
}
.wa-score > .fxd + .bar {
  margin-top: 10px;
}
.fxi .fr .t span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fxi .fr .t em {
  white-space: nowrap;
  flex: none;
}
.fxi .fr {
  grid-template-columns: minmax(0, 1fr) 56px;
}
.fxi .fr .t {
  min-width: 0;
}

/* Risk Flagging */
.rf .wa-ch h3 {
  font-size: 17px;
}
.rf-sum {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.rf-c {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 5px;
  border-radius: 999px;
  background: #f4f8f8;
  border: 1px solid #e3eef0;
  font-size: 11.5px;
  font-weight: 800;
  color: #3d5a60;
  line-height: 1.25;
}
.rf-c i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.rf-c.g i {
  background: #14b3a0;
}
.rf-c.y i {
  background: #e8b04b;
}
.rf-c.r i {
  background: #d6455a;
}
.rf-g {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.rf-i {
  position: relative;
  padding: 14px 14px 12px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e3eef0;
  box-shadow: 0 10px 24px -20px rgba(13, 61, 64, 0.5);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}
.rf-i .h {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.rf-i .h b {
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rf-i .ri {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: none;
  background: #eef7f5;
  color: #079e93;
}
.rf-i .ri svg {
  width: 15px;
  height: 15px;
}
.rf-i .v {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #0d3d40;
  margin-top: 6px;
  line-height: 1.1;
}
.rf-i .u {
  font-size: 11.5px;
  color: #6b7d87;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rf-i .ft {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 9px;
  border-top: 1px solid #eef3f3;
}
.rf-i .m {
  display: flex;
  gap: 3px;
}
.rf-i .m i {
  width: 14px;
  height: 5px;
  border-radius: 3px;
  background: #e6eef0;
}
.rf-i em {
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  margin-left: auto;
}
.rf-i.g .m i.on {
  background: #14b3a0;
}
.rf-i.g em {
  color: #00695c;
}
.rf-i.y .m i.on {
  background: #e8b04b;
}
.rf-i.y em {
  color: #8a5b00;
}
.rf-i.r .m i.on {
  background: #d6455a;
}
.rf-i.r em {
  color: #a8243a;
}
.rf-i.r .ri {
  background: #fdf0f1;
  color: #d6455a;
}
.rf-i.y .ri {
  background: #fff7e6;
  color: #b07a0e;
}

/* skor card v3 */
.wa-score {
  position: relative;
  overflow: visible !important;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.wa-score .sc-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.wa-score .sc-h > span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7ff5e2;
}
.wa-score .sc-who {
  margin: 12px 0 0;
}
.wa-score .sc-num {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 14px 0 0;
}
.wa-score .sc-num b {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
}
.wa-score .sc-num small {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
}
.wa-score .bar {
  margin: 12px 0 6px !important;
}
.wa-score .r {
  padding: 8px 0;
}
.wa-score .fxd {
  position: relative;
  margin: 0;
}
.wa-score .fxb {
  height: 26px;
  font-size: 11px;
}
.wa-score .fxp {
  position: absolute;
  right: 0;
  top: 34px;
  width: 300px;
  z-index: 20;
  display: block;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition:
    opacity 0.2s,
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.wa-score .fxd.on .fxp {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.wa-score .fxi,
.wa-score .fxd.on .fxi {
  margin: 0;
  padding: 14px;
  border-radius: 16px;
  background: #0a3134;
  border: 1px solid rgba(127, 245, 226, 0.2);
  box-shadow: 0 24px 40px -16px rgba(0, 0, 0, 0.55);
}
.wa-side {
  overflow: visible;
}
.wa-score .sc-who > div {
  min-width: 0;
}
.wa-score .sc-who b,
.wa-score .sc-who em {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* SK penugasan */
.sk-sec {
  width: min(860px, 100%);
  margin: 6px auto 0;
  padding: 20px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 24px 60px -40px rgba(13, 61, 64, 0.45);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sk-sec .wa-ch .tg-btn {
  margin-left: auto;
  height: 40px;
  padding: 0 16px;
  gap: 8px;
}
.sk-sec .wa-ch .tg-btn svg {
  width: 15px;
  height: 15px;
}
.sk-sec .wa-ch .pill {
  margin-left: 6px;
}
.sk-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sk-row {
  border: 1px solid #e3eef0;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}
.sk-row.on {
  border-color: #9fe0d4;
}
.sk-h {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}
.sk-h .pav {
  border-radius: 50%;
  flex: none;
}
.sk-h .cdi {
  flex: 0 1 220px;
}
.sk-no {
  margin-left: auto;
  font-size: 11px;
  color: #8a9ca5;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sk-b {
  height: 32px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #dcebe8;
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  color: #007a6b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
}
.sk-b svg {
  width: 13px;
  height: 13px;
}
.sk-b.dl {
  background: linear-gradient(105deg, #14b3a0, #007a6b);
  border-color: transparent;
  color: #fff;
}
.sk-prev {
  padding: 14px;
  background: #f3f7f7;
  border-top: 1px solid #e3eef0;
}
.sk-print {
  display: none;
}
.sk-paper {
  background: #fff;
  padding: 40px 48px;
  border-radius: 6px;
  box-shadow: 0 20px 40px -30px rgba(13, 61, 64, 0.5);
  color: #1b2b30;
  font-size: 12.5px;
  line-height: 1.6;
}
.sk-paper header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 14px;
  border-bottom: 3px solid #0d3d40;
  margin-bottom: 14px;
}
.sk-paper header span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #007a6b;
}
.sk-paper h2 {
  margin: 4px 0 2px;
  font-size: 20px;
  font-weight: 800;
}
.sk-paper header p {
  margin: 0;
  color: #4a6670;
  font-size: 12px;
}
.sk-paper header img {
  width: 44px;
  height: 44px;
}
.sk-paper .c {
  text-align: center;
  margin: 0 0 12px;
}
.sk-paper h5 {
  margin: 12px 0 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0d3d40;
}
.sk-paper ol {
  margin: 0;
  padding-left: 18px;
}
.sk-paper table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 10px;
}
.sk-paper td {
  padding: 6px 8px;
  border-bottom: 1px solid #eef3f3;
  vertical-align: top;
}
.sk-paper td:first-child {
  width: 170px;
  color: #4a6670;
}
.sk-paper .sg {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 22px;
}
.sk-paper .sg div {
  display: flex;
  flex-direction: column;
}
.sk-paper .sg span {
  font-size: 11px;
  color: #6b7d87;
}
.sk-paper .sg b {
  margin-top: 44px;
  font-size: 13px;
}
.sk-paper .sg em {
  font-style: normal;
  font-size: 11.5px;
  color: #4a6670;
}

/* finalize v2 */
.fz {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fz-top {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.fz-k {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 40px -30px rgba(13, 61, 64, 0.5);
}
.fz-k .pav {
  border-radius: 50%;
}
.fz-k span:not(.fz-i) {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7d87;
}
.fz-k b {
  display: block;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #0d3d40;
  line-height: 1.15;
}
.fz-k b.pill {
  display: inline-flex;
  font-size: 12px;
  letter-spacing: 0;
  margin-top: 4px;
}
.fz-k .ring {
  --p: 60;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(closest-side, #fff 76%, transparent 77%),
    conic-gradient(#14b3a0 calc(var(--p) * 1%), #e6eef0 0);
  flex: none;
}
.fz-k .ring b {
  font-size: 18px;
}
.fz-i {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #d9fff5, #fff);
  box-shadow: inset 0 0 0 1px #bdeee2;
  color: #079c8e;
  flex: none;
}
.fz-i svg {
  width: 16px;
  height: 16px;
}
.fz-g {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.fz-b {
  padding: 18px 20px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 24px 60px -40px rgba(13, 61, 64, 0.45);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fz-h {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fz-h h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
}
.fz-h .fz-i {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}
.fz-n {
  font-size: 11px;
  font-weight: 800;
  color: #9fb3b8;
  letter-spacing: 0.05em;
}
.fz-h .cc-link {
  margin-left: auto;
}
.fz-t {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.fz-tg {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.fz-tg div {
  padding: 10px 12px;
  border-radius: 14px;
  background: #f3f9f8;
}
.fz-tg b {
  display: block;
  font-size: 17px;
  font-weight: 800;
  color: #0d3d40;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fz-tg span {
  display: block;
  font-size: 11px;
  color: #6b7d87;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fz-ind {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fz-ind > div {
  display: grid;
  grid-template-columns: 150px 1fr 30px;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}
.fz-ind span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #2c4a50;
  font-weight: 600;
}
.fz-ind .bb {
  height: 7px;
  border-radius: 99px;
  background: #eef4f4;
  overflow: hidden;
}
.fz-ind .bb i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #5fe3cf, #007a6b);
}
.fz-ind b {
  text-align: right;
  color: #0d3d40;
}
.fz-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 4px 0;
}
.fz-tree span {
  padding: 5px 12px;
  border-radius: 10px;
  background: #f3f9f8;
  border: 1px solid #e1f0ed;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.fz-tree > span:first-child {
  background: #0d3d40;
  color: #fff;
  border-color: #0d3d40;
}
.fz-tree i {
  width: 2px;
  height: 10px;
  background: #cfe5e2;
}
.fz-tree div {
  display: flex;
  gap: 8px;
}
.fz-pl {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #0d3d40;
  color: #fff;
}
.fz-pl .pav {
  border-radius: 50%;
}
.fz-pl .cdi span {
  color: rgba(255, 255, 255, 0.65);
}
.fz-av {
  display: flex;
  flex-wrap: wrap;
}
.fz-av > * {
  margin-right: -6px;
  border-radius: 50%;
  border: 2px solid #fff;
}
.fz-av .hv {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px dashed #e8b04b;
  background: #fffaf0;
  color: #b07a0e;
  font-weight: 800;
  display: grid;
  place-items: center;
  box-sizing: border-box;
}
.fz-save {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 22px;
  background: linear-gradient(110deg, #0d3d40, #006b7a 60%, #0a8d9f);
  color: #fff;
  box-shadow: 0 20px 40px -24px rgba(13, 61, 64, 0.7);
}
.fz-st {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.12);
  color: #7ff5e2;
}
.fz-st svg {
  width: 18px;
  height: 18px;
}
.fz-save.done .fz-st {
  background: #14b3a0;
  color: #fff;
}
.fz-save span:not(.fz-st):not(.chp) {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7ff5e2;
}
.fz-save b {
  display: block;
  font-size: 20px;
  font-weight: 800;
}
.fz-save .chips {
  margin: 0 0 0 12px;
}
.fz-save .tg-btn {
  margin-left: auto;
  background: #fff;
  color: #0d3d40;
  box-shadow: none;
}
.fz-save .tg-btn .ar {
  background: linear-gradient(105deg, #14b3a0, #007a6b);
}
@media print {
  .pr-on {
    width: 190mm !important;
  }
}

/* ===== Standar modul (mengikuti Workforce Allocation) untuk modul lama ===== */
.scroller {
  background:
    radial-gradient(ellipse at 12% 0%, #e3fbf6 0, transparent 42%),
    radial-gradient(ellipse at 92% 40%, #e6f9f5 0, transparent 38%),
    linear-gradient(160deg, #f8fcfd, #f1f7f7 60%, #f7fbfb);
}
.page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.page > * {
  margin-top: 0 !important;
}
.hero {
  display: block;
}
.hero .hero-in {
  padding-right: 220px;
}
.hero .who-strip span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 560px;
}
.hero .who-strip .btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 12px;
}
/* kartu */
.card,
.aibox,
section.card.ev {
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid #fff !important;
  box-shadow: 0 24px 60px -40px rgba(13, 61, 64, 0.45) !important;
  overflow: hidden;
}
.card-h,
.ai-h,
.ev .card-h {
  background: none !important;
  color: #142b35 !important;
  min-height: 0 !important;
  padding: 18px 20px 6px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.card-h::before,
.card-h::after,
.ai-h::before,
.ai-h::after {
  display: none !important;
}
.card-h h2,
.ai-h h2 {
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  color: #142b35 !important;
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-h h2 .hd-ic,
.ai-h .ai-ic {
  width: 32px;
  height: 32px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 10px;
  background: linear-gradient(145deg, #d9fff5, #fff);
  box-shadow: inset 0 0 0 1px #bdeee2;
  color: #079c8e !important;
  stroke: #079c8e;
}
.ai-h .ai-ic {
  display: grid;
  place-items: center;
}
.ai-h .ai-ic svg {
  width: 16px;
  height: 16px;
  color: #079c8e;
}
.card-h .meta,
.ai-h .meta,
.card-h .chip,
.ai-h .chip {
  background: #fff !important;
  border: 1px solid #dbe7e9 !important;
  color: #3d5a60 !important;
  border-radius: 999px;
  padding: 4px 10px 5px !important;
  height: auto !important;
  font-size: 11.5px !important;
  font-weight: 700;
}
.card-h .sp + .btn,
.card-h .btn {
  border-radius: 12px;
}
.card-b {
  padding: 12px 20px 20px !important;
}
/* tombol */
.btn.primary {
  background: linear-gradient(105deg, #14b3a0, #007a6b) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 26px -12px rgba(0, 139, 120, 0.55);
  font-weight: 700;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -12px rgba(0, 139, 120, 0.6);
}
.btn:not(.primary):not(.icon-only) {
  border-radius: 12px;
  border-color: #dcebe8;
}
/* KPI tiles */
.kpi-card {
  border-radius: 20px !important;
  background: #fff !important;
  border: 1px solid #fff !important;
  box-shadow: 0 18px 40px -30px rgba(13, 61, 64, 0.5) !important;
}
.kpi-card .bar,
.kpi-card [class*='bar'] {
  border-radius: 99px !important;
}
.hero .facts > div {
  border-radius: 18px;
}
/* tabel */
.tbl th {
  background: #f6fafa !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em;
  color: #6b7d87 !important;
}
.tbl td {
  border-color: #f0f5f6 !important;
}
.tbl tr.click:hover td {
  background: #f3faf8 !important;
}
.tbl td b,
.tbl td .n {
  white-space: nowrap;
}
.tbl td > div > span,
.tbl td small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 300px;
}
/* avatar bulat, chip seragam */
.pav {
  border-radius: 50% !important;
}
.chip {
  border-radius: 999px !important;
  padding: 4px 10px 5px !important;
  height: auto !important;
  line-height: 1.25 !important;
  font-size: 11.5px !important;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}
.chip:not(.ok):not(.warn):not(.bad):not(.dk):not(.brand) {
  background: #fff;
  border: 1px solid #dbe7e9;
  color: #3d5a60;
}
.chip.ok {
  background: #e6f6f2 !important;
  border: 1px solid #bfe6dc !important;
  color: #00695c !important;
}
.chip.warn {
  background: #fff7e6 !important;
  border: 1px solid #f3dca4 !important;
  color: #8a5b00 !important;
}
/* aksen kiri dihapus */
.plan-r,
.sig-i,
.lib-i,
.col,
.note-list li,
.alert-line,
.ev-val {
  border-left: 0 !important;
  box-shadow: none;
}
.plan-r::before,
.sig-i::before,
.lib-i::before,
.col::before,
.alert-line::before {
  display: none !important;
}
.plan-r,
.sig-i,
.lib-i,
.col {
  border: 1px solid #e3eef0 !important;
  border-radius: 18px !important;
  background: #fff !important;
}
.section-cta {
  border: 0 !important;
  background: none !important;
  padding-top: 4px !important;
}
/* teks penjelas satu baris */
.lib-i .m,
.sig-i h3,
.plan-r b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plan-r .d {
  display: none;
}

.card-h h2 svg.hd-ic {
  stroke: #079c8e !important;
  fill: none !important;
  color: #079c8e !important;
  width: 32px !important;
  height: 32px !important;
  flex: none;
}
.card-h h2 svg.hd-ic * {
  stroke: #079c8e !important;
}
.kpi-row {
  gap: 12px !important;
}
.kpi-row > * {
  border-radius: 20px !important;
  background: #fff !important;
  border: 1px solid #fff !important;
  box-shadow: 0 18px 40px -30px rgba(13, 61, 64, 0.5) !important;
}

.wa-ogsk {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  max-width: 560px;
  margin: 8px 0 10px;
}
.wa-ogsk > div {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: center;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e3eef0;
}
.wa-ogsk .sk {
  display: block;
  height: 10px;
  border-radius: 6px;
  width: 80%;
  background: linear-gradient(90deg, #e8f0f1, #f4f8f8, #e8f0f1);
  background-size: 200% 100%;
  animation: skSh 1.4s linear infinite;
}
.wa-ogsk .sk:nth-child(1) {
  width: 50%;
  height: 22px;
}
.wa-ogsk .sk:nth-child(3) {
  width: 65%;
}
.wa-gen.run .wa-ogsk .sk {
  background: linear-gradient(90deg, #c9efe7, #ecfbf7, #c9efe7);
  background-size: 200% 100%;
  animation-duration: 0.8s;
}
#waOg .wa-ch h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}
#waOg .wa-ch h3 svg {
  width: 16px;
  height: 16px;
  color: #079e93;
}

/* risk flag kotak berwarna */
.rf-i.r {
  background: linear-gradient(160deg, #fff4f5, #fde8eb);
  border-color: #f5c2c9;
}
.rf-i.r .v {
  color: #a8243a;
}
.rf-i.r .ft {
  border-color: #f7d3d8;
}
.rf-i.r .ri {
  background: #fff;
  color: #d6455a;
}
.rf-i.y {
  background: linear-gradient(160deg, #fffbf2, #fff2d9);
  border-color: #f3dca4;
}
.rf-i.y .v {
  color: #8a5b00;
}
.rf-i.y .ft {
  border-color: #f6e6bf;
}
.rf-i.y .ri {
  background: #fff;
  color: #b07a0e;
}
.rf-i.g {
  background: linear-gradient(160deg, #fff, #f2fbf8);
  border-color: #d6efe9;
}

/* tombol panah: ikon selalu di tengah */
.tg-btn .ar {
  display: grid !important;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  line-height: 0;
  padding: 0;
  margin: 0;
}
.tg-btn .ar svg {
  display: block;
  width: 16px !important;
  height: 16px !important;
  stroke: #fff !important;
  fill: none !important;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin: 0;
}
.fz-save .tg-btn,
.wa-save .tg-btn,
.mb-bar .tg-btn,
.pk-dec .tg-btn,
.tg-next .tg-btn {
  height: 50px;
  padding: 0 9px 0 20px;
  gap: 14px;
  border-radius: 15px;
  font-size: 14.5px;
  font-weight: 800;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.45);
}
.fz-save .tg-btn:hover,
.wa-save .tg-btn:hover {
  transform: translateY(-2px);
}
/* ===== Talent Profile ===== */
.tp-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tp-s {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e3eef0;
  color: #8a9ca5;
}
.tp-s svg {
  width: 15px;
  height: 15px;
}
.tp-s input {
  flex: 1;
  border: 0;
  outline: none;
  font: inherit;
  font-size: 14px;
  background: none;
  color: #142b35;
}
.tp-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.tp-c {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 44px -32px rgba(13, 61, 64, 0.5);
  overflow: hidden;
  cursor: pointer;
  font: inherit;
  color: #142b35;
  transition:
    transform 0.25s var(--spring),
    box-shadow 0.25s;
}
.tp-c:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 54px -30px rgba(13, 61, 64, 0.6);
}
.tp-h {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  background: linear-gradient(120deg, #082a2d, #0d3d40 50%, #006b7a);
  color: #fff;
}
.tp-h .pav {
  border: 2px solid rgba(255, 255, 255, 0.4);
}
.tp-h .cdi span {
  color: rgba(255, 255, 255, 0.7);
}
.tp-y {
  margin-left: auto;
  flex: none;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}
.tp-b {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 8px;
  align-items: center;
  padding: 12px 14px 4px;
}
.tp-b ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tp-b li {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
  color: #4a6670;
}
.tp-b li span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tp-b li b {
  color: #007a6b;
}
.tp-f {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  padding: 8px 14px 14px;
}
.rad .g {
  fill: none;
  stroke: #dbe9e7;
  stroke-width: 1;
}
.rad .v {
  fill: rgba(20, 179, 160, 0.22);
  stroke: #14b3a0;
  stroke-width: 1.6;
}
.rad .d {
  fill: #007a6b;
}
.rad text {
  font-size: 8px;
  fill: #8a9ca5;
  font-weight: 700;
}
.drawer.wide {
  width: 880px;
  max-width: 70vw;
}
.tpm {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
  background: #f5f9f9;
}
.tpm-hd {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  background: linear-gradient(120deg, #082a2d, #0d3d40 50%, #006b7a);
  color: #fff;
  position: relative;
}
.tpm-hd .pav {
  border: 2px solid rgba(255, 255, 255, 0.4);
}
.tpm-hd span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7ff5e2;
}
.tpm-hd b {
  display: block;
  font-size: 22px;
  font-weight: 800;
}
.tpm-hd em {
  display: block;
  font-style: normal;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}
.tpm-hd .chips {
  margin-left: auto;
  margin-right: 40px;
}
.tpm-hd .dr-x {
  position: absolute;
  right: 16px;
  top: 16px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 0;
  border-radius: 10px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.tpm-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 24px 0;
}
.tpm-tabs button {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 12px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #6b7d87;
  cursor: pointer;
}
.tpm-tabs svg {
  width: 14px;
  height: 14px;
}
.tpm-tabs button.on {
  background: #fff;
  color: #007a6b;
  box-shadow: 0 6px 14px -10px rgba(13, 61, 64, 0.4);
}
.tpm-b {
  padding: 14px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tpm-g {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 14px;
}
.kvg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
}
.kvg span {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a9ca5;
}
.kvg b {
  display: block;
  font-size: 13.5px;
  margin-top: 2px;
}
.tpm-sum {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tpm-sum div {
  padding: 12px;
  border-radius: 14px;
  background: #f3f9f8;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tpm-sum span {
  font-size: 11px;
  font-weight: 800;
  color: #079e93;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tpm-sum b {
  font-size: 13px;
}
.tl2 {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tl2 div {
  position: relative;
  display: grid;
  grid-template-columns: 90px 1fr;
  padding: 10px 0 10px 22px;
  border-left: 2px solid #d5e8e4;
  margin-left: 6px;
}
.tl2 i {
  position: absolute;
  left: -7px;
  top: 14px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #14b3a0;
  border: 2px solid #fff;
}
.tl2 span {
  font-size: 12px;
  color: #6b7d87;
  font-weight: 700;
}
.tl2 b {
  font-size: 13.5px;
}
.tl2 em {
  grid-column: 2;
  font-style: normal;
  font-size: 12px;
  color: #6b7d87;
}
.tpm-k {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  align-items: center;
}
.tpm-k .kl {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.tpm-k .kl div {
  display: grid;
  grid-template-columns: 140px 1fr 30px 70px;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}
.bb {
  height: 7px;
  border-radius: 99px;
  background: #eef4f4;
  overflow: hidden;
}
.bb i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #5fe3cf, #007a6b);
}
.tpm-kp,
.idp-mix {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.tpm-kp div {
  padding: 14px;
  border-radius: 16px;
  background: #f3f9f8;
}
.tpm-kp span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: #6b7d87;
  text-transform: uppercase;
}
.tpm-kp b {
  display: block;
  font-size: 22px;
  font-weight: 800;
  margin-top: 4px;
}
.pbar {
  height: 7px;
  border-radius: 99px;
  background: #eef4f4;
  overflow: hidden;
}
.pbar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #5fe3cf, #007a6b);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
/* ===== Dev Plan Monitoring ===== */
.idp-l {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.idp-team {
  position: sticky;
  top: 12px;
  gap: 6px;
}
.idp-m {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: none;
  text-align: left;
  font: inherit;
  color: #142b35;
  cursor: pointer;
}
.idp-m:hover {
  background: #f3f9f8;
}
.idp-m.on {
  background: #fff;
  border-color: #2fbfab;
  box-shadow: 0 0 0 3px #8ee9db33;
}
.idp-m .cdi {
  flex: 1;
}
.ring.sm {
  --p: 50;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(closest-side, #fff 74%, transparent 75%),
    conic-gradient(#14b3a0 calc(var(--p) * 1%), #e6eef0 0);
  flex: none;
}
.ring.sm b {
  font-size: 11px;
  font-weight: 800;
}
.idp-d {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.idp-hd {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 22px;
  background: linear-gradient(120deg, #082a2d, #0d3d40 50%, #006b7a);
  color: #fff;
}
.idp-hd .cdi b {
  font-size: 17px;
}
.idp-hd .cdi span {
  color: rgba(255, 255, 255, 0.7);
}
.idp-hd .chips {
  margin-left: auto;
}
.idp-hd .chp {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}
.idp-mix {
  grid-template-columns: repeat(3, 1fr);
}
.idp-mix > div {
  padding: 14px 16px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 30px -24px rgba(13, 61, 64, 0.5);
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  gap: 10px 10px;
  align-items: center;
}
.idp-mix > div b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.idp-mix .pc,
.idp-g .pc {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 26px;
  padding: 0 8px;
  border-radius: 9px;
  background: #0d3d40;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.idp-mix b {
  font-size: 13px;
}
.idp-mix .pbar {
  grid-column: 1/3;
  display: block;
}
.idp-mix em {
  font-style: normal;
  font-weight: 800;
  color: #007a6b;
  grid-row: 2;
  grid-column: 3;
}
.idp-g .wa-ch .fz-i {
  margin-left: auto;
}
.fz-i.sm {
  width: 30px;
  height: 30px;
  border-radius: 10px;
}
.fz-i.sm svg {
  width: 14px;
  height: 14px;
}
.idp-it {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto 128px;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid #e9f1f2;
  background: #fff;
}
.sp-b {
  width: 1px;
}
.tg-btn.sm {
  height: 36px;
  padding: 0 14px;
  font-size: 12.5px;
  gap: 6px;
  border-radius: 11px;
  justify-content: center;
}
.tg-btn.sm svg {
  width: 14px;
  height: 14px;
}
/* ===== 1-on-1 ===== */
.oo-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.oo-top .tg-btn.ghost {
  height: 38px;
  padding: 0 14px;
  gap: 6px;
}
.oo-top .tg-btn svg {
  width: 14px;
  height: 14px;
  transform: rotate(180deg);
}
.oo-g {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 14px;
  align-items: start;
}
.oo-l {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.oo-emp {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.oo-emp .cdi {
  flex: 1;
}
.oo-emp .cdi b {
  font-size: 15px;
}
.oo-rec {
  padding: 18px 20px;
  border-radius: 24px;
  background: linear-gradient(120deg, #082a2d, #0d3d40 50%, #006b7a);
  color: #fff;
  box-shadow: 0 24px 50px -28px rgba(13, 61, 64, 0.7);
}
.oo-rec .wa-ch h3 {
  color: #fff;
}
.oo-rec .ri {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(127, 245, 226, 0.14);
  color: #7ff5e2;
}
.oo-rec .ri svg {
  width: 16px;
  height: 16px;
}
.oo-rec .wa-ch .chp {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}
.oo-st {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 0 6px;
}
.wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 44px;
}
.wave i {
  width: 4px;
  height: 6px;
  border-radius: 3px;
  background: rgba(127, 245, 226, 0.35);
}
.oo-rec.rec .wave i {
  background: #7ff5e2;
  animation: wv 0.9s ease-in-out infinite;
  animation-delay: var(--d);
}
@keyframes wv {
  0%,
  100% {
    height: 6px;
  }
  50% {
    height: var(--h);
  }
}
.oo-rec.done .wave i {
  height: var(--h);
  background: rgba(127, 245, 226, 0.6);
}
.oo-rec .oo-tm {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.oo-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  border: 0;
  background: #fff;
  color: #0d3d40;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.5);
}
.oo-btn i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #d6455a;
  box-shadow: 0 0 0 4px rgba(214, 69, 90, 0.2);
}
.oo-btn.stop i {
  border-radius: 3px;
}
.oo-ana {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #7ff5e2;
}
.oo-ana .spin {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(127, 245, 226, 0.3);
  border-top-color: #7ff5e2;
  animation: waSpin 0.8s linear infinite;
}
.oo-tr {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.oo-tr .ln {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.oo-tr .ln .pav {
  flex: none;
}
.oo-tr .ln > div {
  padding: 9px 12px;
  border-radius: 14px;
  background: #f3f9f8;
  max-width: 78%;
}
.oo-tr .ln.e {
  flex-direction: row-reverse;
}
.oo-tr .ln.e > div {
  background: #e3f7f2;
}
.oo-tr b {
  display: block;
  font-size: 11.5px;
  color: #079e93;
}
.oo-tr p {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.5;
}
.oo-sk {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.oo-sk .sk,
.oo-bar .sk {
  display: block;
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, #e8f0f1, #f4f8f8, #e8f0f1);
  background-size: 200% 100%;
  animation: skSh 1.4s linear infinite;
}
.oo-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.oo-bar > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(160deg, #fffbf2, #fff2d9);
  border: 1px solid #f3dca4;
}
.oo-bar > div.ph {
  background: #f6fafa;
  border-color: #e6eff1;
}
.oo-bar > div.ph .sk {
  width: 90%;
}
.oo-bar b {
  font-size: 13px;
  line-height: 1.35;
}
.oo-g2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.oo-q {
  display: grid;
  grid-template-columns: 150px 1fr 42px;
  gap: 10px;
  align-items: center;
  font-size: 12.5px;
}
.oo-q b {
  text-align: right;
}
.oo-a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  background: #f6fafa;
}
.oo-a .no {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #0d3d40;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  flex: none;
}
.oo-a .cdi {
  flex: 1;
}
.oo-act .tg-btn {
  align-self: flex-start;
  height: 40px;
  padding: 0 16px;
  gap: 6px;
}
.oo-act .tg-btn svg {
  width: 15px;
  height: 15px;
}
.oo-r {
  position: sticky;
  top: 12px;
}
.oo-qq {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid #e3eef0;
  background: #fff;
  font: inherit;
  color: #142b35;
  cursor: pointer;
}
.oo-qq .cb {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid #cfe5e2;
  display: grid;
  place-items: center;
  flex: none;
  margin-top: 2px;
  color: #fff;
}
.oo-qq .cb svg {
  width: 12px;
  height: 12px;
}
.oo-qq b {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  margin-top: 5px;
}
.oo-qq small {
  display: block;
  font-size: 11px;
  color: #8a9ca5;
  margin-top: 3px;
}
.oo-qq.on {
  background: #f2fbf8;
  border-color: #bfe6dc;
}
.oo-qq.on .cb {
  background: #14b3a0;
  border-color: #14b3a0;
}
.oo-qq.on b {
  color: #4a6670;
}
.kt2-h,
.kt2 {
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) 140px 110px 150px 130px 130px 24px;
  align-items: center;
  gap: 12px;
}
.kt2-h {
  padding: 0 12px 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a9ca5;
}
.kt2 {
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid #edf3f4;
  background: #fff;
  cursor: pointer;
  transition: 0.2s;
  margin-top: 6px;
}
.kt2:hover {
  border-color: #bfe6dc;
  background: #f8fdfc;
}
.kt2 .pp {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.kt2 .sc {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kt2 .sc b {
  width: 24px;
  font-size: 14px;
}
.kt2 .sc b.lo {
  color: #b45309;
}
.kt2 .sc .bb {
  flex: 1;
}
.kt2 .bb i.lo {
  background: linear-gradient(90deg, #f3c27a, #d98a2b);
}
.kt2 .k4 {
  display: flex;
  align-items: center;
  gap: 3px;
}
.kt2 .k4 i {
  width: 14px;
  height: 7px;
  border-radius: 3px;
  background: #0a8d8f;
}
.kt2 .k4 i.mid {
  background: #9fd8cf;
}
.kt2 .k4 i.lo {
  background: #d98a2b;
}
.kt2 .k4 em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 800;
  color: #4a6670;
  margin-left: 6px;
}
.kt2 .tr {
  display: flex;
  align-items: center;
  gap: 6px;
}
.kt2 .tr svg {
  width: 90px;
  height: 26px;
}
.kt2 .tr span {
  font-size: 11.5px;
  font-weight: 800;
  color: #6b7d87;
}
.kt2 .tr .up {
  color: #00695c;
}
.kt2 .tr .dn {
  color: #a86f10;
}
.kt2 .act {
  display: flex;
  justify-content: flex-end;
}
.qp-wrap {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 14px;
}
.qp-wrap .wa-ch h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.qp-wrap .wa-ch h3 svg {
  width: 15px;
  height: 15px;
  color: #079e93;
}
.qp-k {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.qp-k div {
  padding: 11px 12px;
  border-radius: 14px;
  background: #f3f9f8;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.qp-k div.lo {
  background: linear-gradient(160deg, #fffbf2, #fff2d9);
}
.qp-k div.lo .bb i {
  background: linear-gradient(90deg, #f3c27a, #d98a2b);
}
.qp-k span {
  font-size: 11px;
  font-weight: 700;
  color: #6b7d87;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qp-k b {
  font-size: 20px;
  font-weight: 800;
  color: #0d3d40;
}
.qp-k b small {
  font-size: 11px;
  color: #8a9ca5;
  margin-left: 2px;
}
.qp-sp {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11.5px;
  font-weight: 700;
  color: #6b7d87;
}
.qp-sp svg {
  width: 110px;
  height: 30px;
}
.cal-lg {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.cal-lg span {
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
}
.c10 {
  background: #e8f1ff;
  color: #1e4f9c;
}
.c20 {
  background: #e3f7f2;
  color: #00695c;
}
.c70 {
  background: #fff3d6;
  color: #8a5b00;
}
.cal-w,
.cal-g {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-w span {
  font-size: 10.5px;
  font-weight: 800;
  color: #8a9ca5;
  text-align: center;
  padding-bottom: 4px;
}
.cd {
  min-height: 52px;
  padding: 4px 5px;
  border-radius: 10px;
  background: #f7fafa;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.cd b {
  font-size: 11px;
  color: #4a6670;
}
.cd.out {
  opacity: 0.35;
}
.cd.today {
  box-shadow: inset 0 0 0 1.5px #14b3a0;
  background: #fff;
}
.cd.today b {
  color: #007a6b;
}
.cd em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 4px;
  border-radius: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-nx {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 6px;
}
.cal-nx div {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #f7fafa;
  min-width: 0;
}
.cal-nx span {
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 7px;
  flex: none;
}
.cal-nx b {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qp-wrap {
  grid-template-columns: 1fr;
}
.qp-k {
  grid-template-columns: repeat(4, 1fr);
}
.qp-k > div {
  padding: 11px 12px;
  border-radius: 14px;
  background: #f3f9f8;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.qp-k > div.lo {
  background: linear-gradient(160deg, #fffbf2, #fff2d9);
}
.qp-k .bb {
  display: block !important;
  padding: 0 !important;
  background: #e6eff0 !important;
  border-radius: 99px !important;
  height: 6px !important;
}
.cd {
  min-height: 64px;
}
.cd em {
  font-size: 10.5px;
  padding: 3px 6px;
  white-space: normal;
  line-height: 1.2;
}
.cal-nx b {
  white-space: nowrap;
}
.kt2 .act .tg-btn {
  min-width: 112px;
}
.kt2 .act {
  color: #9fb3b8;
}
.kt2 .act svg {
  width: 16px;
  height: 16px;
}
.idp-it {
  grid-template-columns: minmax(0, 1fr) auto auto 150px;
}

.qpa-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 22px;
  background: linear-gradient(115deg, #3a2a05, #8a5b00 45%, #e8b04b);
  color: #fff;
  box-shadow: 0 22px 44px -24px rgba(138, 91, 0, 0.6);
  position: relative;
  overflow: hidden;
}
.qpa-card:after {
  content: '';
  position: absolute;
  right: -40px;
  top: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 170, 0.45), transparent 70%);
}
.qpa-card .qi {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.16);
  flex: none;
}
.qpa-card .qi svg {
  width: 20px;
  height: 20px;
}
.qpa-card .qlb {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffe9a8;
}
.qpa-card .cdi b {
  font-size: 18px;
}
.qpa-card .chips {
  margin-left: auto;
  position: relative;
  z-index: 1;
}
.qpa-card .chp {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
}
.qpa-card .tg-btn {
  position: relative;
  z-index: 1;
  background: #fff;
  color: #6b4500;
  box-shadow: none;
  height: 44px;
  padding: 0 18px;
  gap: 8px;
}
.qpa-card .tg-btn svg {
  width: 15px;
  height: 15px;
}
.ical .wa-ch h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ical .wa-ch h3 svg {
  width: 16px;
  height: 16px;
  color: #079e93;
}
.ical .seg {
  margin-left: 12px;
}
.ical .seg button {
  padding: 6px 14px;
  font-size: 12.5px;
}
.ical .cal-lg span {
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
}
.em,
.ev.em {
  background: #e3f7f2;
  color: #00695c;
}
.ef,
.ev.ef {
  background: #e8f1ff;
  color: #1e4f9c;
}
.er,
.ev.er {
  background: #f0eaff;
  color: #5b3fb0;
}
.ea,
.ev.ea {
  background: #fff3d6;
  color: #8a5b00;
}
.ical .cd {
  min-height: 60px;
  gap: 3px;
}
.ical .ev {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 2px 5px 2px 2px;
  border-radius: 999px;
  border: 0;
  font: inherit;
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
  text-align: left;
}
.ical .ev .pav {
  flex: none;
  border: 1px solid #fff;
}
.ical .ev span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ical .ev:hover {
  filter: brightness(0.95);
}
.oo-bar > div:has(.chp.ok) {
  background: linear-gradient(160deg, #f6fdfb, #e3f7f2);
  border-color: #bfe6dc;
}
.pf-top {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 14px;
}
.pf-score {
  padding: 18px;
  border-radius: 24px;
  background: linear-gradient(150deg, #082a2d, #0d3d40 50%, #006b7a);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.pf-score > span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7ff5e2;
}
.pf-score .ring {
  --p: 60;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(closest-side, #0d3d40 78%, transparent 79%),
    conic-gradient(#7ff5e2 calc(var(--p) * 1%), rgba(255, 255, 255, 0.12) 0);
}
.pf-score .ring b {
  font-size: 34px;
  font-weight: 800;
}
.pf-score .chips {
  justify-content: center;
}
.pf-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.pf-k {
  padding: 14px 14px 12px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 40px -30px rgba(13, 61, 64, 0.5);
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  min-width: 0;
}
.pf-k.lo {
  background: linear-gradient(160deg, #fffbf2, #fff2d9);
}
.pf-k .h {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pf-k .h span {
  font-size: 12px;
  font-weight: 700;
  color: #4a6670;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.pf-k > b {
  font-size: 26px;
  font-weight: 800;
  color: #0d3d40;
}
.pf-k > b small {
  font-size: 11.5px;
  color: #8a9ca5;
  margin-left: 3px;
  font-weight: 700;
}
.pf-k .mb {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  height: 64px;
  align-items: end;
}
.pf-k .mb div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  height: 100%;
  justify-content: flex-end;
}
.pf-k .mb i {
  display: block;
  width: 100%;
  max-width: 18px;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, #5fe3cf, #14b3a0);
}
.pf-k.lo .mb i {
  background: linear-gradient(180deg, #f3c27a, #d98a2b);
}
.pf-k .mb span {
  font-size: 9px;
  color: #8a9ca5;
  font-weight: 700;
}
.pf-tb .hd,
.pf-tb .rw {
  display: grid;
  grid-template-columns: minmax(180px, 1.6fr) 70px 120px 90px 170px 120px 110px;
  gap: 12px;
  align-items: center;
}
.pf-tb .hd {
  padding: 0 12px 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a9ca5;
}
.pf-tb .rw {
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid #edf3f4;
  margin-top: 6px;
  font-size: 13px;
}
.pf-tb .rw > span:nth-child(5) {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pf-tb .rw .bb {
  flex: 1;
}
.pf-tb .rw em {
  font-style: normal;
  font-weight: 800;
  font-size: 12px;
  width: 36px;
}
.pf-tb .rw svg {
  width: 100px;
  height: 26px;
}
.pf-tb .bb i.lo {
  background: linear-gradient(90deg, #f3c27a, #d98a2b);
}
.pf-g {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.pf-cm .seg {
  margin-left: auto;
}
.pf-cm .seg button {
  flex-direction: row;
  padding: 6px 11px;
  font-size: 12px;
}
.cm-hd,
.cm-r {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) 150px 100px 92px 92px;
  gap: 10px;
  align-items: center;
}
.cm-hd {
  padding: 0 12px 4px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a9ca5;
}
.cm-r {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid #edf3f4;
  background: #fff;
}
.cm-r.late {
  background: linear-gradient(160deg, #fff7f8, #fdecef);
  border-color: #f5c9cd;
}
.cm-r .cdi b {
  font-size: 12.5px;
}
.cm-r .cdi .bb {
  margin-top: 6px;
  height: 5px;
}
.cm-r.done .bb i {
  background: #14b3a0;
}
.cm-r.late .bb i {
  background: #d6455a;
}
.cm-r .src {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
}
.cm-r .src em {
  font-style: normal;
  font-size: 11px;
  color: #6b7d87;
}
.cm-r .ow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
}
.cm-r .dd {
  font-size: 12px;
  color: #4a6670;
  font-weight: 700;
}
.chp.bad {
  background: #fdf0f1;
  border: 1px solid #f5c9cd;
  color: #a8243a;
}
.pf-g .aibox .ai-empty {
  padding: 24px;
  display: grid;
  place-items: center;
}

.pf-g {
  grid-template-columns: 1fr;
}
.cm-hd,
.cm-r {
  grid-template-columns: minmax(0, 2.4fr) 180px 110px 110px 100px;
}
.pf-g .aibox .bar-item p {
  display: none;
}
.pf-g .aibox .bar-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.cm-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cm2 {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto 40px 96px 16px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid #e9f1f2;
  background: #fff;
  text-align: left;
  font: inherit;
  color: #142b35;
  cursor: pointer;
  transition: 0.2s;
}
.cm2:hover {
  border-color: #bfe6dc;
  box-shadow: 0 10px 22px -18px rgba(13, 61, 64, 0.5);
  transform: translateY(-1px);
}
.cm2 > svg {
  width: 14px;
  height: 14px;
  color: #9fb3b8;
}
.cm2 .si {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
}
.cm2 .si svg {
  width: 15px;
  height: 15px;
}
.cm2.done .si {
  background: #e3f7f2;
  color: #00695c;
}
.cm2.run .si {
  background: #fff3d6;
  color: #8a5b00;
}
.cm2.late .si {
  background: #fdf0f1;
  color: #a8243a;
}
.cm2.late {
  border-color: #f5c9cd;
  background: linear-gradient(90deg, #fff, #fff7f8);
}
.cm2 .mid {
  min-width: 0;
}
.cm2 .mid > b {
  display: block;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cm2 .mt {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  font-size: 11.5px;
  color: #6b7d87;
  white-space: nowrap;
}
.cm2 .mt svg {
  width: 11px;
  height: 11px;
}
.cm2 .mt .pav {
  flex: none;
}
.cm2 .mt .chp {
  padding: 2px 8px 3px !important;
  font-size: 10.5px;
}
.cm2 .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #c5d3d6;
}
.cm2 .ev {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 800;
  color: #4a6670;
  padding: 4px 9px;
  border-radius: 999px;
  background: #f3f7f8;
}
.cm2 .ev svg {
  width: 12px;
  height: 12px;
}
.cm2 .ring.sm {
  width: 38px;
  height: 38px;
}
.cm2.late .ring.sm {
  background:
    radial-gradient(closest-side, #fff 74%, transparent 75%),
    conic-gradient(#d6455a calc(var(--p) * 1%), #f6dfe2 0);
}
.cm2.run .ring.sm {
  background:
    radial-gradient(closest-side, #fff 74%, transparent 75%),
    conic-gradient(#e8b04b calc(var(--p) * 1%), #f6ecd2 0);
}
.cm2 > .chp {
  justify-content: center;
}
.cmd {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
  background: #f5f9f9;
}
.cmd-hd {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  background: linear-gradient(120deg, #082a2d, #0d3d40 50%, #006b7a);
  color: #fff;
  position: relative;
}
.cmd-hd .si {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.12);
  color: #7ff5e2;
  flex: none;
}
.cmd-hd .si svg {
  width: 18px;
  height: 18px;
}
.cmd-hd.late .si {
  color: #ffb4bf;
}
.cmd-hd.run .si {
  color: #ffd968;
}
.cmd-hd span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7ff5e2;
}
.cmd-hd b {
  display: block;
  font-size: 18px;
  line-height: 1.3;
  padding-right: 40px;
}
.cmd-hd .dr-x {
  position: absolute;
  right: 16px;
  top: 16px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 0;
  border-radius: 10px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.cmd-b {
  padding: 18px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cmd-k {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.cmd-k div {
  padding: 11px 12px;
  border-radius: 14px;
  background: #fff;
}
.cmd-k span {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  color: #8a9ca5;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cmd-k b {
  display: block;
  font-size: 13px;
  margin-top: 3px;
}
.cmd-p {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 18px;
  background: #fff;
}
.cmd-p > div:last-child {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.cmd-p .bb {
  width: 100%;
}
.cmd-p .ring {
  --p: 50;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(closest-side, #fff 76%, transparent 77%),
    conic-gradient(#14b3a0 calc(var(--p) * 1%), #e6eef0 0);
}
.cmd-p .ring b {
  font-size: 15px;
}
.cmd-b h4 {
  margin: 6px 0 0;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.evl {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.evi {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto 32px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e9f1f2;
}
.evt {
  width: 54px;
  height: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #fff, #f3f7f8);
  border: 1px solid #e3eef0;
  position: relative;
  overflow: hidden;
}
.evt:before {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  top: 9px;
  height: 3px;
  border-radius: 2px;
  background: #e3eaec;
  box-shadow:
    0 6px 0 #e3eaec,
    0 12px 0 #e3eaec;
}
.evt span {
  position: relative;
  margin-top: 16px;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  background: var(--c);
  padding: 2px 5px;
  border-radius: 4px;
}
.evi .cdi b {
  font-size: 12.5px;
}
.evi .by {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #6b7d87;
  white-space: nowrap;
}
.evi .sk-b {
  width: 32px;
  padding: 0;
  justify-content: center;
}
.vf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e9f1f2;
}
.vf .cdi {
  flex: 1;
}
.vf.ok {
  border-color: #bfe6dc;
  background: #f2fbf8;
}
.vf .chp svg {
  width: 11px;
  height: 11px;
}
/* hambatan rapi */
.pf-g .aibox .ai-ic svg {
  display: block;
  width: 16px;
  height: 16px;
  stroke: #079c8e;
  fill: none;
}
.pf-g .aibox .bar-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #e9f1f2 !important;
  background: #fff;
}
.pf-g .aibox .bar-item > .n {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #0d3d40;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.pf-g .aibox .bar-item b {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 6px;
  font-size: 13.5px;
  line-height: 1.35;
}
.pf-g .aibox .bar-item b .chip {
  margin: 0 !important;
}
.pf-g .aibox .bar-item .src {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}
.pf-g .aibox .bar-item .src .chip {
  background: #f7fafa !important;
  font-size: 10.5px !important;
}
.evi .sys {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eef7f5;
  color: #079e93;
}
.evi .sys svg {
  width: 11px;
  height: 11px;
}
.cmd-p.late .ring {
  background:
    radial-gradient(closest-side, #fff 76%, transparent 77%),
    conic-gradient(#d6455a calc(var(--p) * 1%), #f6dfe2 0);
}
.cmd-p.late .bb i {
  background: #d6455a;
}
.cmd-p.run .ring {
  background:
    radial-gradient(closest-side, #fff 76%, transparent 77%),
    conic-gradient(#e8b04b calc(var(--p) * 1%), #f6ecd2 0);
}
.cmd-p.run .bb i {
  background: #e8b04b;
}

.bx-g {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 6px 20px 20px;
}
.bx {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #e9f1f2;
  box-shadow: 0 14px 30px -26px rgba(13, 61, 64, 0.5);
}
.bx-h {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bx .bi {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--b);
  color: var(--c);
}
.bx .bi svg {
  width: 16px;
  height: 16px;
}
.bx .bk {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c);
}
.bx .bn {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
  color: #c5d3d6;
}
.bx .bt {
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.35;
  min-height: 40px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bx .bm {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--b);
}
.bx .bm strong {
  display: block;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--c);
  line-height: 1.1;
}
.bx .bm span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #2c4a50;
  margin-top: 2px;
}
.bx .bm em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: #6b7d87;
}
.bx .blb {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a9ca5;
  margin-bottom: 6px;
}
.bx .bs div {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #3d5a60;
  padding: 4px 0;
}
.bx .bs svg {
  width: 12px;
  height: 12px;
  color: #8a9ca5;
  flex: none;
}
.bx .bs span:not(.blb) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bx .ba {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed #e1ecee;
}
.bx .ba b {
  font-size: 12.5px;
  color: #0d3d40;
}

.kd {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
  background: #f5f9f9;
}
.kd-hd {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  background: linear-gradient(120deg, #082a2d, #0d3d40 50%, #006b7a);
  color: #fff;
  position: relative;
}
.kd-hd span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7ff5e2;
}
.kd-hd b {
  display: block;
  font-size: 22px;
  font-weight: 800;
}
.kd-hd .chips {
  margin-left: auto;
  margin-right: 44px;
}
.kd-hd .dr-x {
  position: absolute;
  right: 16px;
  top: 16px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 0;
  border-radius: 10px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.kd-b {
  padding: 18px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kd-top {
  display: flex;
  gap: 16px;
  align-items: stretch;
}
.kd-ring {
  --p: 50;
  width: 150px;
  height: 150px;
  flex: none;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(closest-side, #fff 78%, transparent 79%),
    conic-gradient(#14b3a0 calc(var(--p) * 1%), #e6eef0 0);
  box-shadow: 0 18px 36px -24px rgba(13, 61, 64, 0.5);
}
.kd-ring.lo {
  background:
    radial-gradient(closest-side, #fff 78%, transparent 79%),
    conic-gradient(#e8a23b calc(var(--p) * 1%), #f6ecd2 0);
}
.kd-ring b {
  font-size: 32px;
  font-weight: 800;
  color: #0d3d40;
}
.kd-ring span {
  font-size: 11px;
  font-weight: 700;
  color: #6b7d87;
}
.kd-n {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.kd-n div {
  padding: 14px 16px;
  border-radius: 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
}
.kd-n span {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a9ca5;
}
.kd-n b {
  font-size: 24px;
  font-weight: 800;
  color: #0d3d40;
}
.kd-n b.chp {
  font-size: 12px;
  align-self: flex-start;
}
.kd-c {
  padding: 16px 18px;
  border-radius: 20px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kd-c .h {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kd-c .h b {
  font-size: 14px;
}
.kd-ch {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  height: 170px;
  align-items: end;
  padding-top: 20px;
}
.kd-ch > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 5px;
  position: relative;
  z-index: 1;
}
.kd-ch i {
  display: block;
  width: 100%;
  max-width: 44px;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, #bfeee5, #9fd8cf);
}
.kd-ch .q i {
  background: linear-gradient(180deg, #5fe3cf, #14b3a0);
}
.kd-ch i.lo,
.kd-ch .q i.lo {
  background: linear-gradient(180deg, #f3c27a, #d98a2b);
}
.kd-ch > div {
  padding-top: 0;
}
.kd-ch i {
  max-height: calc(100% - 38px);
}
.kd-ch em {
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  color: #2c4a50;
}
.kd-ch span {
  font-size: 11px;
  font-weight: 700;
  color: #8a9ca5;
}
.kd-ch .kdl {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1.5px dashed #b9cfd2;
  z-index: 0;
}
.kd-ch .kdl span {
  position: absolute;
  right: 0;
  top: -16px;
  font-size: 10px;
  color: #8a9ca5;
  font-weight: 700;
}
.kd-r {
  display: grid;
  grid-template-columns: 150px 1fr 70px 56px;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid #f0f5f6;
  font-size: 12.5px;
}
.kd-r:first-of-type {
  border-top: 0;
}
.kd-r > span:first-child {
  font-weight: 700;
}
.kd-r b small {
  color: #8a9ca5;
  font-size: 11px;
}
.kd-r .bb i.lo {
  background: linear-gradient(90deg, #f3c27a, #d98a2b);
}
.kd-cm {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f7fafa;
}
.kd-cm .cdi {
  flex: 1;
}
.kd-cm .si {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: none;
}
.kd-cm .si svg {
  width: 13px;
  height: 13px;
}
.kd-cm.done .si {
  background: #e3f7f2;
  color: #00695c;
}
.kd-cm.run .si {
  background: #fff3d6;
  color: #8a5b00;
}
.kd-cm.late .si {
  background: #fdf0f1;
  color: #a8243a;
}
.fp-l {
  display: grid;
  grid-template-columns: 392px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.ph2 {
  position: sticky;
  top: 12px;
  width: 392px;
  height: 780px;
  border-radius: 44px;
  padding: 12px;
  background: #0a1f21;
  box-shadow:
    0 40px 80px -30px rgba(8, 42, 45, 0.7),
    inset 0 0 0 2px #1d3a3c;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}
.ph2-scr {
  flex: 1;
  overflow: auto;
  border-radius: 34px 34px 0 0;
  background: #f2f7f7;
  scrollbar-width: none;
}
.ph2-scr::-webkit-scrollbar {
  display: none;
}
.ph2-hd {
  padding: 22px 18px 20px;
  background: linear-gradient(120deg, #082a2d, #0d3d40 50%, #006b7a);
  color: #fff;
}
.ph2-hd .u {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ph2-hd .u b {
  display: block;
  font-size: 13.5px;
}
.ph2-hd .u span {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
}
.ph2-hd .bell {
  margin-left: auto;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  display: grid;
  place-items: center;
}
.ph2-hd .bell svg {
  width: 14px;
  height: 14px;
}
.ph2-hd h4 {
  margin: 16px 0 2px;
  font-size: 22px;
  font-weight: 800;
}
.ph2-hd p {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}
.ph2-b {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: -8px;
}
.ph2-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 8px;
  background: #0d2b2e;
  border-radius: 0 0 34px 34px;
}
.ph2-nav button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 0;
  border: 0;
  border-radius: 16px;
  background: none;
  color: rgba(255, 255, 255, 0.55);
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
}
.ph2-nav button svg {
  width: 16px;
  height: 16px;
}
.ph2-nav button.on {
  background: #14b3a0;
  color: #fff;
}
.ph2-nav i {
  position: absolute;
  top: 3px;
  right: 22px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #ffc53d;
  color: #3a2a05;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.pc {
  padding: 14px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 20px -16px rgba(13, 61, 64, 0.4);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pc .l {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a9ca5;
}
.pc .r {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pc .r > b {
  font-size: 40px;
  font-weight: 800;
  color: #007a6b;
  letter-spacing: -0.04em;
}
.pc .r strong {
  display: block;
  font-size: 17px;
}
.pc .r small {
  font-size: 11px;
  color: #6b7d87;
}
.pc .m3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.pc .m3 div,
.pc.m4 div,
.pc .m4 div {
  padding: 8px 9px;
  border-radius: 12px;
  background: #f3f7f7;
}
.pc .m3 span,
.pc.m4 span,
.pc .m4 span {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  color: #8a9ca5;
  text-transform: uppercase;
}
.pc .m3 b,
.pc.m4 b,
.pc .m4 b {
  display: block;
  font-size: 13.5px;
  margin-top: 2px;
}
.pc .lo {
  color: #b42318;
}
.pc.m4,
.pc .m4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  text-align: center;
}
.pc .m4.two {
  grid-template-columns: 1fr 1fr;
}
.pc .ph {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pc .ph b {
  font-size: 14px;
}
.rm {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 14px;
  background: #f6f9f9;
}
.rm .ri {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: none;
}
.rm .ri svg {
  width: 13px;
  height: 13px;
}
.rm .cdi {
  flex: 1;
}
.rm > svg {
  width: 12px;
  height: 12px;
  color: #9fb3b8;
}
.pc .ring {
  --p: 50;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(closest-side, #fff 74%, transparent 75%),
    conic-gradient(#e8b04b calc(var(--p) * 1%), #eef2f2 0);
}
.pc .ring b {
  font-size: 15px;
}
.ph-days {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  padding: 4px;
  background: #fff;
  border-radius: 18px;
}
.ph-days div {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7px 0;
  border-radius: 14px;
}
.ph-days span {
  font-size: 9.5px;
  font-weight: 800;
  color: #8a9ca5;
  text-transform: uppercase;
}
.ph-days b {
  font-size: 16px;
}
.ph-days i {
  display: flex;
  gap: 2px;
  height: 5px;
}
.ph-days em {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #e8b04b;
}
.ph-days div.on {
  background: #0d3d40;
  color: #fff;
}
.ph-days div.on span {
  color: #7ff5e2;
}
.fp-nofx,
.fp-nofx * {
  animation: none !important;
}
.ph2-scr {
  scroll-behavior: auto;
}
.ph2-scr.tin-r > * {
  animation: phInR 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.ph2-scr.tin-l > * {
  animation: phInL 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.ph2-scr.tin-r .ph2-b > *,
.ph2-scr.tin-l .ph2-b > * {
  animation: phUp 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.ph2-scr .ph2-b > *:nth-child(2) {
  animation-delay: 0.05s;
}
.ph2-scr .ph2-b > *:nth-child(3) {
  animation-delay: 0.1s;
}
.ph2-scr .ph2-b > *:nth-child(4) {
  animation-delay: 0.15s;
}
.ph2-scr .ph2-b > *:nth-child(n + 5) {
  animation-delay: 0.2s;
}
@keyframes phInR {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
}
@keyframes phInL {
  from {
    opacity: 0;
    transform: translateX(-18px);
  }
}
@keyframes phUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
.ph2-nav button {
  transition:
    background 0.25s,
    color 0.25s,
    transform 0.2s;
}
.ph2-nav button:active {
  transform: scale(0.94);
}
.ph-t .ana2 {
  margin-top: 8px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, #0d3d40, #0a5a57);
  color: #fff;
  animation: phUp 0.3s both;
}
.ana2 .ah {
  display: flex;
  align-items: center;
  gap: 9px;
}
.ana2 .ah b {
  font-size: 12.5px;
}
.ana2 .orb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #bafff2, #14b3a0 55%, #06514d);
  box-shadow: 0 0 0 0 rgba(94, 240, 214, 0.5);
  animation: aiPulse 1.2s ease-out infinite;
  position: relative;
}
.ana2 .orb i {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: #5ef0d6;
  animation: waSpin 0.9s linear infinite;
}
@keyframes aiPulse {
  70% {
    box-shadow: 0 0 0 9px rgba(94, 240, 214, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(94, 240, 214, 0);
  }
}
.ana2 .as {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0 10px;
}
.ana2 .as div {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  animation: aiStep 0.3s var(--d) forwards;
}
.ana2 .dt {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  flex: none;
  position: relative;
}
.ana2 .as div .dt {
  animation: aiDot 0.3s calc(var(--d) + 0.5s) forwards;
}
@keyframes aiStep {
  to {
    color: #fff;
  }
}
@keyframes aiDot {
  to {
    background: #5ef0d6;
    border-color: #5ef0d6;
    box-shadow: inset 0 0 0 3px #0b4f4c;
  }
}
.ana2 .sk {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ana2 .sk i {
  height: 8px;
  border-radius: 99px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.22),
    rgba(255, 255, 255, 0.08)
  );
  background-size: 200% 100%;
  animation: aiSh 1.1s linear infinite;
}
.ana2 .sk i:nth-child(2) {
  width: 80%;
}
.ana2 .sk i:nth-child(3) {
  width: 55%;
}
@keyframes aiSh {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
.ph-t .vr {
  animation: phUp 0.35s both;
}
.ph-t .vr > * {
  animation: phUp 0.35s both;
}
.ph-t .vr > *:nth-child(2) {
  animation-delay: 0.08s;
}
.ph-t .vr > *:nth-child(3) {
  animation-delay: 0.16s;
}
.ph-t .vr > *:nth-child(4) {
  animation-delay: 0.24s;
}
.ph-t .vr > *:nth-child(5) {
  animation-delay: 0.32s;
}
.ph-t .vr > *:nth-child(n + 6) {
  animation-delay: 0.4s;
}
.ph-t.op .tx {
  animation: phUp 0.3s both;
}
@media (prefers-reduced-motion: reduce) {
  .ph2-scr *,
  .ana2 * {
    animation-duration: 0.01s !important;
  }
}
.ph-t .tg2 .dn2 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #14b3a0;
  color: #fff;
}
.ph-t .tg2 .dn2 svg {
  width: 10px;
  height: 10px;
}
.ph-t.dn .cdi b {
  text-decoration: none !important;
  color: #142b35 !important;
}
.po-sum {
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, #0d3d40, #0a5a57);
  color: #fff;
}
.po-sum .wk-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.po-sum .wk-h span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7fe3d6;
}
.po-sum .wk-h em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 99px;
  background: rgba(255, 138, 138, 0.2);
  color: #ffb3b3;
}
.po-n {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 8px 0 10px;
}
.po-n > b {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.po-cls {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.po-cls div {
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 9.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.po-cls i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.po-cls b {
  font-size: 15px;
  color: #fff;
}
.po-sum .wk-bar {
  display: flex;
  gap: 3px;
  height: 6px;
}
.po-sum .wk-bar i {
  border-radius: 99px;
}
.po-r {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: #fff;
}
.po-r .cdi {
  flex: 1;
  min-width: 0;
}
.po-r .cdi b {
  font-size: 13px;
  display: block;
}
.po-r .cdi span {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #6b7d87;
}
.po-r .cdi span svg {
  width: 10px;
  height: 10px;
  color: #079e93;
}
.po-c {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 12.5px;
  font-weight: 800;
  flex: none;
}
.po-c.A {
  background: #e0f7f3;
  color: #00796b;
}
.po-c.B {
  background: #fff3d6;
  color: #a86400;
}
.po-c.C {
  background: #fdecee;
  color: #c62839;
}
.po-v {
  display: flex;
  align-items: center;
  gap: 8px;
}
.po-v em {
  font-style: normal;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 800;
  color: #5b6f78;
  padding: 3px 7px;
  border-radius: 99px;
  background: #f0f5f5;
  white-space: nowrap;
}
.po-v em svg {
  width: 10px;
  height: 10px;
}
.po-v em.bad {
  background: #fdecee;
  color: #c62839;
}
.po-ring {
  --c: #14b3a0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), #edf2f3 0);
  display: grid;
  place-items: center;
  flex: none;
}
.po-ring b {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 800;
  color: #142b35;
}
.po-ring.warn {
  --c: #f0a500;
}
.po-ring.bad {
  --c: #e5484d;
}
.ps-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, #0d3d40, #0a5a57);
  color: #fff;
}
.ps-ring {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  flex: none;
  background: conic-gradient(#5ef0d6 calc(var(--p) * 1%), rgba(255, 255, 255, 0.12) 0);
  display: grid;
  place-items: center;
}
.ps-ring b {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #0c4846;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}
.ps-ring small {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 2px;
}
.ps-hero > div > span {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7fe3d6;
  margin-bottom: 6px;
}
.ps-hero .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ps-k {
  padding: 11px 12px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #edf2f3;
}
.ps-k .h {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ps-k .h span {
  font-size: 11.5px;
  font-weight: 800;
  color: #5b6f78;
}
.ps-k .h em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
  background: #f0f5f5;
  color: #5b6f78;
}
.ps-k .m {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 4px 0 6px;
}
.ps-k .m b {
  font-size: 18px;
  font-weight: 800;
  color: #142b35;
  letter-spacing: -0.01em;
}
.ps-k .m small {
  font-size: 11px;
  font-weight: 700;
  color: #8a9ba2;
  margin-left: 3px;
}
.ps-k .m svg {
  width: 84px;
  height: 26px;
}
.ps-k .p {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ps-k .bb {
  flex: 1;
  height: 6px;
  border-radius: 99px;
  background: #edf2f3;
  overflow: hidden;
}
.ps-k .bb i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #5ee0cc, #079e93);
}
.ps-k .p strong {
  font-size: 11.5px;
  font-weight: 800;
  color: #00796b;
  min-width: 34px;
  text-align: right;
}
.ps-k.warn .bb i {
  background: linear-gradient(90deg, #ffd27a, #f0a500);
}
.ps-k.warn .p strong {
  color: #a86400;
}
.ps-k.bad {
  background: #fff7f7;
  border-color: #fbdcdf;
}
.ps-k.bad .bb i {
  background: linear-gradient(90deg, #ff9ea2, #e5484d);
}
.ps-k.bad .p strong {
  color: #c62839;
}
.ph-t .tg2 .dn2 {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #14b3a0 !important;
  color: #fff !important;
}
.ph-t .tg2 .dn2 svg {
  width: 10px;
  height: 10px;
}
.ph-t.dn .cdi b {
  text-decoration: none !important;
  color: #142b35 !important;
}
.fp-r .fz-k {
  align-items: center;
}
.fp-r .fz-k span:not(.fz-i) {
  white-space: nowrap;
}
.sdg > * + * {
  margin-top: 14px;
}
.sdg .ey {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #007a8b;
}
/* tiles */
.sd-k3 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.k3 {
  position: relative;
  padding: 14px 14px 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 30px -24px rgba(13, 61, 64, 0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.k3 .h {
  display: flex;
  align-items: center;
  gap: 8px;
}
.k3 .h span:last-child {
  font-size: 11.5px;
  font-weight: 800;
  color: #5b6f78;
  white-space: nowrap;
}
.k3 .ki {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #eaf6f7;
  color: #007a8b;
  flex: none;
}
.k3 .ki svg {
  width: 13px;
  height: 13px;
}
.k3 .v {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 10px 0 4px;
}
.k3 .v b {
  font-size: 26px;
  font-weight: 800;
  color: #0d3d40;
  letter-spacing: -0.02em;
}
.k3 .v em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  color: #007a8b;
  white-space: nowrap;
}
.k3 .spark {
  width: calc(100% + 28px);
  height: 34px;
  margin: 0 -14px;
  display: block;
}
.k3.lo .ki {
  background: #fff3d6;
  color: #b7801f;
}
.k3.lo .v em {
  color: #b7801f;
}
/* outlet explorer */
.sd-seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: #f1f5f6;
}
.sd-seg button {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 10px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  color: #5b6f78;
  cursor: pointer;
  transition: 0.2s;
}
.sd-seg button em {
  font-style: normal;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 99px;
  background: #e2eaec;
  color: #5b6f78;
}
.sd-seg button.on {
  background: #0d3d40;
  color: #fff;
}
.sd-seg button.on em {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.sd-od {
  min-width: 0;
}
.sd-oxg {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}
.sd-olw {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: #f6f9fa;
  padding: 8px;
}
.sd-olw .hd {
  display: flex;
  justify-content: space-between;
  padding: 4px 10px 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a9ba2;
}
.sd-ol {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 530px;
  overflow: auto;
  padding-right: 2px;
}
.sd-or {
  display: grid;
  grid-template-columns: 28px 1fr 80px 38px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  border: 0;
  background: #fff;
  font: inherit;
  color: #142b35;
  text-align: left;
  cursor: pointer;
  transition: 0.18s;
}
.sd-or:hover {
  box-shadow: 0 0 0 1px #9fd3da;
}
.sd-or .cls {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  background: #eaf6f7;
  color: #007a8b;
}
.sd-or .cdi b {
  font-size: 12.5px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sd-or .cdi span {
  font-size: 11px;
  color: #6b7d87;
}
.sd-or .bar {
  height: 6px;
  border-radius: 99px;
  background: #e6eef0;
  overflow: hidden;
}
.sd-or .bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
}
.bar.t1 i,
.sd-oc i.t1 {
  background: #0d3d40;
}
.bar.t2 i,
.sd-oc i.t2 {
  background: #14b3a0;
}
.bar.t3 i,
.sd-oc i.t3 {
  background: #e8b04b;
}
.sd-or strong {
  font-size: 12.5px;
  text-align: right;
}
.sd-or.on {
  background: #0d3d40;
  color: #fff;
  box-shadow: 0 10px 22px -14px rgba(13, 61, 64, 0.9);
}
.sd-or.on .cdi span {
  color: rgba(255, 255, 255, 0.65);
}
.sd-or.on .cls {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.sd-or.on .bar {
  background: rgba(255, 255, 255, 0.15);
}
.sd-or.on .bar.t1 i {
  background: #5fd6c3;
}
.sd-od {
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: phUp 0.35s both;
}
.sd-oh {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid #e6eef0;
}
.sd-ring {
  --c: #0d3d40;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), #e6eef0 0);
}
.sd-ring b {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 800;
  color: #0d3d40;
  letter-spacing: -0.02em;
}
.sd-ring small {
  font-size: 12px;
}
.sd-ring.t2 {
  --c: #14b3a0;
}
.sd-ring b {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sd-ring b small {
  align-self: center;
  margin-top: 4px;
}
.sdg .spark.low path {
  stroke: #b7801f;
}
.sdg .spark.low path.area {
  fill: rgba(232, 176, 75, 0.15);
}
.sdg .spark.low circle {
  fill: #b7801f;
}
.sd-ring.t3 {
  --c: #e8b04b;
}
.sd-oh .t {
  flex: 1;
  min-width: 0;
}
.sd-oh h4 {
  margin: 3px 0 8px;
  font-size: 20px;
  color: #0d3d40;
}
.sd-oh .chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.sd-oh .om {
  text-align: right;
  padding-left: 16px;
  border-left: 1px solid #e6eef0;
}
.sd-oh .om span {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  color: #8a9ba2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sd-oh .om b {
  display: block;
  font-size: 22px;
  color: #0d3d40;
  margin: 2px 0;
}
.sd-oh .om em {
  font-style: normal;
  font-size: 11.5px;
  color: #6b7d87;
}
.sd-os {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.sd-os > div {
  border-radius: 14px;
  background: #f6f9fa;
  min-width: 0;
}
.sd-os .spark {
  width: 100%;
  height: 24px;
}
.sd-os .w {
  background: #fff8e8;
}
.sd-os .w b {
  color: #8a5b00;
}
.sd-pj {
  flex: 1;
  padding: 16px;
  border-radius: 20px;
  background: linear-gradient(135deg, #0d3d40, #0a5a57 60%, #0f6c66);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.sd-pj:before {
  content: '';
  position: absolute;
  right: -60px;
  top: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(95, 214, 195, 0.25), transparent 70%);
}
.sd-pj .ey {
  color: #7fe3d6;
}
.sd-pj .pjh {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.sd-pj .chp {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}
.pjm {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0;
}
.pav {
  position: relative;
  padding: 3px;
  border-radius: 50%;
  background: conic-gradient(#e8b04b, #5fd6c3, #e8b04b);
}
.pav > i {
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
  background: linear-gradient(180deg, #ffd36b, #e8a317);
  color: #3a2a05;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.pjt {
  flex: 1;
  min-width: 0;
}
.pjt b {
  font-size: 16px;
  display: block;
}
.pjt > span {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.65);
}
.pjt .xp {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.pjt .xp div {
  flex: 1;
  height: 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.pjt .xp i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #5fd6c3, #e8b04b);
}
.pjt .xp em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  color: #ffd36b;
  white-space: nowrap;
}
.pjb {
  display: flex;
  gap: 6px;
}
.pjb .nb {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}
.pjs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.pjs > div {
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.pjs span {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.pjs b {
  display: block;
  font-size: 17px;
  margin: 2px 0 7px;
}
.pjs .sg {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
}
.pjs .sg i {
  height: 5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
}
.pjs .sg i.on {
  background: #5fd6c3;
}
.pjo {
  position: relative;
  margin-top: 12px;
}
.pjo .oc {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.sd-oc {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}
.sd-oc i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.sd-oc i.t1 {
  background: #5fd6c3;
}
.sd-oc b {
  color: rgba(255, 255, 255, 0.7);
}
.sd-oc.on {
  background: #fff;
  color: #0d3d40;
}
.sd-oc.on b {
  color: #007a8b;
}
.sd-oc.on i.t1 {
  background: #0d3d40;
}
/* medals */
.sd-md {
  --s: 34px;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  flex: none;
  background: linear-gradient(145deg, var(--a), var(--b));
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.35),
    0 3px 8px -3px rgba(0, 0, 0, 0.4);
}
.sd-md i {
  display: grid;
  place-items: center;
  color: #fff;
}
.sd-md i svg {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}
.sd-md.gold {
  --a: #ffd36b;
  --b: #c88a12;
}
.sd-md.teal {
  --a: #5fd6c3;
  --b: #0f8a7e;
}
.sd-md.blue {
  --a: #6fc2cf;
  --b: #007a8b;
}
.sd-md.deep {
  --a: #2a7a78;
  --b: #0d3d40;
}
/* leaderboard */
.sd-lb {
  padding: 20px;
  border-radius: 26px;
  background: radial-gradient(120% 140% at 0% 0%, #0f5a57 0%, #0d3d40 45%, #0a2c2f 100%);
  color: #fff;
  box-shadow: 0 24px 50px -30px rgba(13, 61, 64, 0.9);
}
.sd-lb .lbh {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.sd-lb .ey {
  color: #7fe3d6;
}
.sd-lb h3 {
  margin: 2px 0 0;
  font-size: 19px;
}
.sd-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.sd-tabs button {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 11px;
  border-radius: 10px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: 0.2s;
}
.sd-tabs button svg {
  width: 12px;
  height: 12px;
}
.sd-tabs button:hover {
  color: #fff;
}
.sd-tabs button.on {
  background: #fff;
  color: #0d3d40;
}
.sd-lbg {
  display: grid;
  grid-template-columns: 220px 1fr 260px;
  gap: 14px;
  align-items: stretch;
}
.sd-pod {
  display: flex;
  flex-direction: column;
  padding: 14px 10px 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.sd-pod .pt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
}
.sd-pod .pt span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7fe3d6;
}
.sd-pod .pt em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
}
.sd-pod .pg {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  align-items: end;
  margin-top: 12px;
}
.pd {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  animation: phUp 0.4s both;
}
.pd .av {
  position: relative;
  margin-bottom: 4px;
}
.pd .av > i {
  position: absolute;
  right: -4px;
  bottom: -2px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  color: #3a2a05;
  border: 2px solid #0d3d40;
}
.pd b {
  font-size: 12px;
}
.pd strong {
  font-size: 11px;
  color: #7fe3d6;
  white-space: nowrap;
}
.pd .blk {
  width: 100%;
  border-radius: 12px 12px 0 0;
  display: grid;
  place-items: start center;
  padding-top: 8px;
  margin-top: 6px;
}
.pd .blk span {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.18);
  color: #fff;
}
.pd.p1 .blk {
  height: 140px;
  background: linear-gradient(180deg, #ffd36b, #c88a12);
}
.pd.p2 .blk {
  height: 100px;
  background: linear-gradient(180deg, #e3edef, #9fb6bb);
}
.pd.p3 .blk {
  height: 72px;
  background: linear-gradient(180deg, #f1c59a, #b9763d);
}
.pd.p1 .av > i {
  background: #ffd36b;
}
.pd.p2 .av > i {
  background: #e3edef;
}
.pd.p3 .av > i {
  background: #f1c59a;
}
.pd.p1 .av {
  padding: 3px;
  border-radius: 50%;
  background: conic-gradient(#ffd36b, #fff3c4, #ffd36b);
}
.sd-lst {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.sd-lst .lhd,
.slr {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 40px 70px 130px 36px;
  gap: 10px;
  align-items: center;
}
.sd-lst .lhd {
  padding: 4px 10px 6px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.sd-lst .lhd span:last-child {
  text-align: right;
}
.slr {
  padding: 7px 10px;
  border-radius: 14px;
  animation: phUp 0.35s calc(var(--i) * 0.04s) both;
  transition: background 0.2s;
}
.slr:hover {
  background: rgba(255, 255, 255, 0.06);
}
.slr.top {
  background: rgba(255, 255, 255, 0.08);
}
.slr .srk {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 11.5px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
}
.slr:nth-child(2) .srk {
  background: #ffd36b;
  color: #3a2a05;
}
.slr:nth-child(3) .srk {
  background: #e3edef;
  color: #0d3d40;
}
.slr:nth-child(4) .srk {
  background: #f1c59a;
  color: #3a2a05;
}
.slr .sdw {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.slr .cdi {
  min-width: 0;
}
.slr .cdi b {
  display: block;
  font-size: 12.5px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slr .cdi span {
  display: block;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slr .slv {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 0;
  border-radius: 7px;
  background: rgba(255, 211, 107, 0.15);
  color: #ffd36b;
  text-align: center;
}
.slr .sbd {
  display: flex;
  gap: 4px;
}
.slr .sbd em {
  font-style: normal;
  color: rgba(255, 255, 255, 0.3);
}
.slr .val {
  display: grid;
  grid-template-columns: 1fr 62px;
  gap: 8px;
  align-items: center;
}
.slr .bb {
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.slr .bb i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #14b3a0, #5fd6c3);
  transition: width 0.5s;
}
.slr strong {
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
}
.slr .sdl {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.4);
  text-align: right;
}
.slr .sdl.up {
  color: #5fd6c3;
}
.slr .sdl.dn {
  color: #ffd36b;
}
.sd-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sd-ch {
  padding: 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.sd-ch .h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.sd-ch .h b {
  font-size: 13px;
}
.sd-ch .h span {
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}
.sd-ch .sdcc {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
}
.sd-ch .sdcc + .sdcc {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.sd-ch .ci {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255, 211, 107, 0.15);
  color: #ffd36b;
}
.sd-ch .ci svg {
  width: 14px;
  height: 14px;
}
.sd-ch .sdcc .r {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}
.sd-ch .sdcc b {
  font-size: 12px;
}
.sd-ch .sdcc em {
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  color: #ffd36b;
  white-space: nowrap;
}
.sd-ch .sdsg {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
  margin: 6px 0 3px;
}
.sd-ch .sdsg i {
  height: 5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
}
.sd-ch .sdsg i.on {
  background: #ffd36b;
}
.sd-ch .sdcc .cdi > span {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.55);
}
.sd-bdg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 6px;
}
.sd-bdg div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px 8px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}
.sd-bdg b {
  font-size: 10.5px;
  text-align: center;
}
.sd-bdg em {
  font-style: normal;
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.5);
}
/* AI */
.sd-ai {
  position: relative;
  padding: 20px;
  border-radius: 26px;
  background: linear-gradient(115deg, #3a2a05, #7a5206 45%, #c88a12);
  color: #fff;
  box-shadow: 0 24px 50px -28px rgba(138, 91, 0, 0.7);
  overflow: hidden;
}
.sd-ai:before {
  content: '';
  position: absolute;
  right: -80px;
  top: -100px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 211, 107, 0.35), transparent 70%);
}
.sd-ai-h {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
}
.sd-ai-h .ey {
  color: #ffd36b;
}
.sd-ai-h h3 {
  margin: 2px 0 6px;
  font-size: 18px;
}
.sd-ai-h .chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.sd-ai-h .chp {
  background: rgba(255, 255, 255, 0.12);
  color: #fff3d6;
  border-color: rgba(255, 255, 255, 0.18);
}
.sd-ai .ai-o {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ffd36b, #e8a317);
  box-shadow: 0 0 0 6px rgba(255, 211, 107, 0.15);
  flex: none;
}
.sd-ai .ai-o svg {
  width: 20px;
  height: 20px;
  color: #3a2a05;
}
.sd-rg2 {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.sd-rg2 svg {
  width: 13px;
  height: 13px;
}
.sd-ai.idle {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sd-gen {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border-radius: 14px;
  border: 0;
  background: #fff;
  color: #7a5206;
  font: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s;
}
.sd-gen:hover {
  transform: translateY(-1px);
}
.sd-gen svg {
  width: 15px;
  height: 15px;
}
.sd-load {
  position: relative;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  margin-top: 16px;
}
.sd-load .st {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.sd-load .st div {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
  animation: aiStep 0.3s var(--d) forwards;
}
.sd-load .dt {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  flex: none;
}
.sd-load .st div .dt {
  animation: sdDot 0.3s calc(var(--d) + 0.4s) forwards;
}
@keyframes sdDot {
  to {
    background: #ffd36b;
    border-color: #ffd36b;
    box-shadow: inset 0 0 0 3px #7a5206;
  }
}
.sd-load .sdsk {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.sd-load .sdsk div {
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.sd-load .sdsk i {
  display: block;
  height: 9px;
  border-radius: 99px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.26),
    rgba(255, 255, 255, 0.08)
  );
  background-size: 200% 100%;
  animation: aiSh 1.1s linear infinite;
}
.sd-load .sdsk i:nth-child(2) {
  width: 75%;
}
.sd-load .sdsk i:nth-child(3) {
  width: 50%;
}
.sd-cats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 16px;
}
.sd-cat {
  --k: #0d3d40;
  --ks: #eaf6f7;
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  color: #142b35;
  border-top: 4px solid var(--k);
  animation: phUp 0.4s calc(var(--i) * 0.08s) both;
}
.sd-cat .ch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.sd-cat .ch b {
  font-size: 13.5px;
}
.sd-cat .ch em {
  margin-left: auto;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ks);
  color: var(--k);
}
.sd-cat .ci {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--ks);
  color: var(--k);
}
.sd-cat .ci svg {
  width: 14px;
  height: 14px;
}
.sd-cat.gold {
  --k: #b7801f;
  --ks: #fff3d6;
}
.sd-cat.amber {
  --k: #92400e;
  --ks: #fdecd8;
}
.sd-cat.teal {
  --k: #007a8b;
  --ks: #eaf6f7;
}
.sd-cat.deep {
  --k: #0d3d40;
  --ks: #dcefee;
}
.sd-cat .it {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid #eef3f4;
}
.sd-cat .it .cdi b {
  font-size: 12.5px;
}
.sd-cat .it .cdi span {
  font-size: 11px;
}
.sd-cat .it .chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 5px;
}
.sd-cat .it .chp {
  background: var(--ks);
  color: var(--k);
  border-color: transparent;
}
.sd-act {
  height: 32px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #d7e4e6;
  background: #fff;
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
  color: #0d3d40;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: 0.2s;
}
.sd-act:hover {
  border-color: #007a8b;
}
.sd-act.dn {
  background: #0d3d40;
  border-color: #0d3d40;
  color: #fff;
}
.sd-act svg {
  width: 12px;
  height: 12px;
}

.sdb {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 34px;
}
.sdb i {
  flex: 1;
  border-radius: 4px 4px 2px 2px;
  background: #d7eeee;
  transition: height 0.4s;
}
.sdb i.on {
  background: linear-gradient(180deg, #14b3a0, #0d3d40);
}
.sdb.lo i {
  background: #f6e7c6;
}
.sdb.lo i.on {
  background: linear-gradient(180deg, #e8b04b, #b7801f);
}
.k3 {
  padding-bottom: 14px;
}
.k3 .sdb {
  margin-top: auto;
}
.sd-oh {
  display: grid !important;
  grid-template-columns: 84px minmax(0, 1fr) 200px;
  align-items: center;
}
.sd-oh .om {
  text-align: left !important;
}
.sd-oh .om .r {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.sd-oh .om .r em {
  font-style: normal;
  font-size: 11px;
  color: #6b7d87;
}
.sd-oh .om b {
  margin: 4px 0 8px !important;
}
.sd-oh .om b small {
  font-size: 12px;
  color: #8a9ba2;
  font-weight: 700;
}
.sd-oh .om > span {
  white-space: nowrap;
}
.sd-oh .om .bar {
  height: 7px;
  border-radius: 99px;
  background: #e6eef0;
  overflow: hidden;
}
.sd-oh .om .bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
}
.sd-os {
  grid-template-columns: 1fr 1fr 1.3fr !important;
}
.sd-os > div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px !important;
  min-height: 66px;
}
.sd-os .si {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #007a8b;
  flex: none;
}
.sd-os .si svg {
  width: 14px;
  height: 14px;
}
.sd-os .w .si {
  color: #b7801f;
}
.sd-os > div > div > span {
  display: block;
  font-size: 10px;
  font-weight: 800;
  color: #8a9ba2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.sd-os > div > div > b {
  display: block;
  font-size: 14px;
  color: #0d3d40;
  margin-top: 2px;
  white-space: nowrap;
}
.sd-os .w > div > b {
  color: #8a5b00;
}
.sd-os .tr {
  justify-content: space-between;
}
.sd-os .tr .sdb {
  width: 96px;
  height: 36px;
}
.sd-cats {
  grid-template-columns: repeat(4, 1fr) !important;
  align-items: stretch;
}
.sd-cat {
  display: flex;
  flex-direction: column;
}
.sd-cat .it {
  display: flex !important;
  flex-direction: column;
  gap: 9px;
  padding: 12px 0 14px !important;
}
.sd-cat .it .ip {
  display: flex;
  align-items: center;
  gap: 9px;
}
.sd-cat .it > .chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.sd-cat .im {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  border-radius: 12px;
  background: #f7fafa;
}
.sd-cat .im > div {
  display: grid;
  grid-template-columns: 86px 1fr 32px;
  gap: 8px;
  align-items: center;
}
.sd-cat .im span {
  font-size: 10.5px;
  font-weight: 700;
  color: #6b7d87;
  white-space: nowrap;
}
.sd-cat .im .bb {
  height: 5px;
  border-radius: 99px;
  background: #e6eef0;
  overflow: hidden;
}
.sd-cat .im .bb i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--k);
}
.sd-cat .im b {
  font-size: 10.5px;
  text-align: right;
}
.sdg .ins {
  position: relative;
  padding: 10px 11px 8px;
  border-radius: 13px;
  background: linear-gradient(135deg, #0d3d40, #0a5a57);
  color: #fff;
  overflow: hidden;
}
.sdg .ins:after {
  content: '';
  position: absolute;
  right: -30px;
  top: -30px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 211, 107, 0.3), transparent 70%);
}
.sdg .ins .il {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffd36b;
  margin-bottom: 6px;
}
.sdg .ins .il svg {
  width: 11px;
  height: 11px;
}
.sdg .ins > div {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  padding: 3px 0;
}
.sdg .ins em {
  font-style: normal;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  flex: none;
  font-size: 9.5px;
  font-weight: 800;
  background: rgba(255, 211, 107, 0.18);
  color: #ffd36b;
  margin-top: 1px;
}
.sd-cat .sd-act {
  width: 100%;
  justify-content: center;
}
.sd-net {
  position: relative;
  margin-top: 12px;
  padding: 16px;
  border-radius: 20px;
  background: #fff;
  color: #142b35;
  animation: phUp 0.4s 0.35s both;
}
.sd-net .nh {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.sd-net .nh b {
  font-size: 14px;
}
.sd-net .nh .chp {
  margin-left: auto;
}
.sd-net .ci {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #fff3d6;
  color: #b7801f;
}
.sd-net .ci svg {
  width: 14px;
  height: 14px;
}
.sd-net .ng {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.sd-net .nc {
  --k: #0d3d40;
  --ks: #dcefee;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #e6eef0;
  border-top: 4px solid var(--k);
  animation: phUp 0.4s calc(0.4s + var(--i) * 0.08s) both;
}
.sd-net .nc.t2 {
  --k: #14b3a0;
  --ks: #e0f6f2;
}
.sd-net .nc.t3 {
  --k: #b7801f;
  --ks: #fff3d6;
}
.sd-net .nt {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sd-net .nt b {
  font-size: 15px;
  color: #0d3d40;
}
.sd-net .vd {
  font-size: 10.5px;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 99px;
  background: var(--ks);
  color: var(--k);
}
.sd-net .nm {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.sd-net .nm div {
  padding: 8px;
  border-radius: 10px;
  background: #f7fafa;
}
.sd-net .nm span {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  color: #8a9ba2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.sd-net .nm b {
  display: block;
  font-size: 13px;
  color: #0d3d40;
  margin-top: 2px;
  white-space: nowrap;
}
.sd-net .ws {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
}
.sd-net .ws span {
  font-size: 10.5px;
  font-weight: 700;
  color: #6b7d87;
}
.sd-net .ws b {
  font-size: 12px;
  color: var(--k);
}
.sd-net .dots {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 2px;
}
.sd-net .dots i {
  height: 8px;
  border-radius: 2px;
  background: #e6eef0;
}
.sd-net .dots i.on {
  background: var(--k);
}
.sd-load .st .pg {
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  margin-top: 6px;
}
.sd-load .st .pg i {
  display: block;
  height: 100%;
  width: 0;
  background: #ffd36b;
  animation: sdPg 4.4s linear forwards;
}
@keyframes sdPg {
  to {
    width: 100%;
  }
}
.sd-load .sdsk div b {
  display: block;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  margin: 4px 0;
}
.sd-load {
  grid-template-columns: 280px 1fr !important;
}
.sd-cat .it {
  align-items: stretch !important;
  text-align: left !important;
}
.sd-cat .it .ip {
  justify-content: flex-start;
}
.sd-cat .it > .chips {
  justify-content: flex-start;
}
.sd-cat .im {
  align-self: stretch;
}
.sd-mapw {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
.sd-pvs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pvc {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid #e3eef0;
  background: #fff;
  font: inherit;
  color: #142b35;
  text-align: left;
  cursor: pointer;
  transition: 0.2s;
}
.pvc:hover {
  border-color: #9fd3da;
}
.pvc.on {
  background: #0d3d40;
  border-color: #0d3d40;
  color: #fff;
  box-shadow: 0 14px 28px -18px rgba(13, 61, 64, 0.9);
}
.pvc .h {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pvc .h b {
  display: block;
  font-size: 13.5px;
}
.pvc .h span {
  font-size: 11px;
  color: #6b7d87;
}
.pvc.on .h span {
  color: rgba(255, 255, 255, 0.65);
}
.sd-ring.sm {
  width: 40px;
  height: 40px;
}
.sd-ring.sm b {
  width: 31px;
  height: 31px;
  font-size: 12px;
}
.pvc.on .sd-ring b {
  background: #0d3d40;
  color: #fff;
}
.pvc.on .sd-ring {
  background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(255, 255, 255, 0.15) 0);
}
.pvc.on .sd-ring.t1 {
  --c: #5fd6c3;
}
.pvc .ob {
  display: flex;
  gap: 2px;
  height: 6px;
}
.pvc .ob i {
  border-radius: 2px;
}
.pvc .ob .t1 {
  background: #0d3d40;
}
.pvc .ob .t2 {
  background: #14b3a0;
}
.pvc .ob .t3 {
  background: #e8b04b;
}
.pvc.on .ob .t1 {
  background: #5fd6c3;
}
.pvc .ft {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: #6b7d87;
}
.pvc.on .ft {
  color: rgba(255, 255, 255, 0.7);
}
.ph-wk {
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, #0d3d40, #0a5a57);
  color: #fff;
  box-shadow: 0 8px 20px -12px rgba(6, 60, 60, 0.6);
}
.ph-wk .wk-h {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ph-wk .wk-h span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7fe3d6;
}
.ph-wk .wk-h em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
}
.ph-wk .wk-n {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.7fr;
  gap: 6px;
  margin: 10px 0;
}
.ph-wk .wk-n div {
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
}
.ph-wk .wk-n b {
  display: block;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.ph-wk .wk-n div:first-child b {
  color: #5ef0d6;
}
.ph-wk .wk-n span {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 700;
}
.ph-wk .wk-bar {
  display: flex;
  gap: 3px;
  height: 6px;
}
.ph-wk .wk-bar i {
  border-radius: 99px;
  filter: brightness(1.6) saturate(1.2);
}
.ph-wk .wk-l {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 8px;
}
.ph-wk .wk-l span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
}
.ph-wk .wk-l i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  filter: brightness(1.6) saturate(1.2);
}
.ph-wk .wk-l b {
  color: #fff;
}
.ph-day {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
}
.ph-day .dh {
  display: flex;
  justify-content: space-between;
  padding: 9px 12px;
  background: #eef5f4;
  font-size: 12px;
}
.ph-day .dh span {
  font-weight: 800;
  color: #6b7d87;
}
.ph-t {
  border-top: 1px solid #eef3f3;
}
.ph-t .tr {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  background: none;
  font: inherit;
  color: #142b35;
  text-align: left;
  cursor: pointer;
}
.ph-t .cb {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid #cfe0e2;
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
}
.ph-t .cb svg {
  width: 11px;
  height: 11px;
}
.ph-t.dn .cb {
  background: #14b3a0;
  border-color: #14b3a0;
}
.ph-t.dn .cdi b {
  color: #6b7d87;
  text-decoration: line-through;
}
.ph-t .cdi {
  flex: 1;
}
.ph-t .tg2 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  min-width: 0;
}
.ph-t .tg2 em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 5px;
  white-space: nowrap;
}
.ph-t .tg2 span {
  font-size: 11px;
  color: #6b7d87;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ph-t .tr strong {
  font-size: 11.5px;
  color: #00695c;
  white-space: nowrap;
}
.ph-t .tr > svg {
  width: 13px;
  height: 13px;
  color: #9fb3b8;
  transition: 0.2s;
}
.ph-t.op .tr > svg {
  transform: rotate(180deg);
}
.ph-t .tx {
  padding: 0 12px 12px;
}
.ph-t .wd2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.ph-t .wd2 div {
  padding: 8px 10px;
  border-radius: 12px;
  background: #f2f6f7;
}
.ph-t .wd2 span {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7b8e96;
}
.ph-t .wd2 b {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: #142b35;
  margin-top: 2px;
}
.ph-t .wd2 .w-bad {
  background: #fdecee;
}
.ph-t .wd2 .w-bad b {
  color: #c62839;
}
.ph-t .wd2 .w-warn {
  background: #fff5e0;
}
.ph-t .wd2 .w-warn b {
  color: #a86400;
}
.ph-t .wd2 .w-ok {
  background: #e6f7f3;
}
.ph-t .wd2 .w-ok b {
  color: #00796b;
}
.ph-t .wd2 .w-acc {
  background: #0d3d40;
}
.ph-t .wd2 .w-acc span {
  color: #7fe3d6;
}
.ph-t .wd2 .w-acc b {
  color: #fff;
}
.vb {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 6px;
  margin-top: 8px;
}
.vb button,
.ph-t .stop,
.ph-t .cf {
  height: 42px;
  border-radius: 13px;
  border: 0;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}
.vb svg,
.ph-t .cf svg {
  width: 14px;
  height: 14px;
}
.vb .ci {
  background: #fff;
  border: 1px solid #cfe7e2;
  color: #007a6b;
}
.vb .ci.on {
  background: #e3f7f2;
}
.vb .mic {
  background: linear-gradient(105deg, #14b3a0, #007a6b);
  color: #fff;
  box-shadow: 0 10px 20px -10px rgba(0, 139, 120, 0.6);
}
.ph-t .rec {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 14px;
  border-radius: 16px;
  background: #0d3d40;
  color: #fff;
}
.ph-t .wv {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 28px;
}
.ph-t .wv i {
  width: 3px;
  height: 5px;
  border-radius: 2px;
  background: #7ff5e2;
  animation: wv 0.9s ease-in-out infinite;
  animation-delay: var(--d);
}
.ph-t .tm {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ph-t .stop {
  width: 100%;
  background: #fff;
  color: #0d3d40;
}
.ph-t .stop i {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: #d6455a;
}
.ph-t .ana {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  padding: 16px;
  border-radius: 16px;
  background: #0d3d40;
  color: #7ff5e2;
  font-size: 12px;
  font-weight: 700;
}
.ph-t .ana .spin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(127, 245, 226, 0.3);
  border-top-color: #7ff5e2;
  animation: waSpin 0.8s linear infinite;
}
.ph-t .vr {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.ph-t .vr .q {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  background: #0d3d40;
  color: #fff;
}
.ph-t .vr .q svg {
  width: 14px;
  height: 14px;
  color: #7ff5e2;
  flex: none;
  margin-top: 2px;
}
.ph-t .vr .q p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
  font-style: italic;
}
.ph-t .fr {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  background: #f6f9f9;
  font-size: 11.5px;
}
.ph-t .fr span {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  color: #8a9ca5;
}
.ph-t .fr em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  color: #4a6670;
  white-space: nowrap;
}
.ph-t .fr.ok {
  background: #e9f8f4;
}
.ph-t .fr.ok em {
  color: #00695c;
}
.ph-t .fr.warn {
  background: #fff7e6;
}
.ph-t .fr.warn em {
  color: #8a5b00;
}
.ph-t .fr.bad {
  background: #fdf0f1;
}
.ph-t .fr.bad em {
  color: #a8243a;
}
.ph-t .cf {
  background: linear-gradient(105deg, #14b3a0, #007a6b);
  color: #fff;
  margin-top: 2px;
}
.ph-t .ok {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #e3f7f2;
  color: #00695c;
  font-size: 12px;
  font-weight: 800;
}
.ph-t .ok svg {
  width: 13px;
  height: 13px;
}
.ol {
  flex-direction: row !important;
  align-items: center;
}
.ol .cls {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 12px;
  background: #eef3f3;
  color: #4a6670;
  flex: none;
}
.ol .cls.A {
  background: #0d3d40;
  color: #fff;
}
.ol .cls.B {
  background: #e3f7f2;
  color: #00695c;
}
.ol .cdi {
  flex: 1;
}
.ol .pbar {
  margin-top: 6px;
  height: 5px;
}
.ol .rt {
  text-align: right;
}
.ol .rt em {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  color: #6b7d87;
}
.ol .rt em.lo {
  color: #b42318;
  font-weight: 800;
}
.ol .rt b {
  font-size: 13px;
}
.fp-r {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fz-top.three {
  grid-template-columns: repeat(3, 1fr);
}
.fz-k em.chp {
  display: inline-flex;
  margin-top: 4px;
  font-size: 10.5px;
}
.fp-r .wa-ch h3,
.sdg .wa-ch h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fp-r .wa-ch h3 svg,
.sdg .wa-ch h3 svg {
  width: 15px;
  height: 15px;
  color: #079e93;
}
.fd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid #edf3f4;
  margin-top: 6px;
}
.fd .cdi {
  flex: 1;
}
.fd .chips {
  margin: 0;
  flex-wrap: nowrap;
}
.fp-route {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.fp-route div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 16px;
  background: #f3f9f8;
}
.fp-route b {
  font-size: 13px;
}
.fp-route span:last-child {
  font-size: 11px;
  color: #6b7d87;
}
.sd-ht {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  padding-right: 150px;
}
.sd-ht h1 {
  margin: 12px 0 10px;
}
.sd-hk {
  margin-left: auto;
  display: flex;
  gap: 10px;
}
.sd-hk div {
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  min-width: 130px;
}
.sd-hk span {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.sd-hk b {
  display: block;
  font-size: 24px;
  font-weight: 800;
}
.sd-hk em {
  font-style: normal;
  font-size: 11px;
  color: #7ff5e2;
}
.sd-k {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.sk2 {
  padding: 14px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 30px -24px rgba(13, 61, 64, 0.5);
}
.sk2 .h {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
}
.sk2 .h span {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7d87;
}
.sk2 .h svg {
  width: 64px;
  height: 22px;
}
.sk2 b {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: #0d3d40;
  margin-top: 8px;
}
.sk2 em {
  font-style: normal;
  font-size: 11px;
}
.sk2 em.up {
  color: #00a389;
}
.sk2 em.dn {
  color: #d6455a;
}
.sd-g {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 14px;
}
.sd-g2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.lsv {
  width: 100%;
  height: auto;
}
.lsv .g {
  stroke: #eef3f3;
}
.lsv .tg {
  stroke: #9fb3b8;
  stroke-dasharray: 5 5;
}
.lsv text {
  font-size: 11px;
  fill: #8a9ca5;
}
.lsv .a {
  fill: rgba(20, 179, 160, 0.1);
}
.lsv .l {
  fill: none;
  stroke: #14b3a0;
  stroke-width: 2.5;
}
.lsv .p {
  fill: #fff;
  stroke: #14b3a0;
  stroke-width: 2;
}
.lsv .e {
  fill: #007a6b;
}
.lsv .lv {
  font-size: 13px;
  font-weight: 800;
  fill: #007a6b;
}
.sd-st {
  display: flex;
  height: 26px;
  border-radius: 9px;
  overflow: hidden;
  gap: 2px;
}
.sd-st i {
  display: grid;
  place-items: center;
  color: #fff;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
}
.sd-r2 {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 6px;
}
.sd-r2 .ring {
  --p: 50;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(closest-side, #fff 74%, transparent 75%),
    conic-gradient(#14b3a0 calc(var(--p) * 1%), #eef2f2 0);
}
.sd-r2 .ring.y {
  background:
    radial-gradient(closest-side, #fff 74%, transparent 75%),
    conic-gradient(#e8b04b calc(var(--p) * 1%), #eef2f2 0);
}
.sd-r2 span {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  color: #8a9ca5;
  text-transform: uppercase;
}
.sd-r2 > div > b {
  font-size: 13px;
}
.sd-rk {
  display: grid;
  grid-template-columns: 28px 150px 1fr 40px 30px;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
}
.sd-rk em {
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
}
.sd-rk em.up {
  color: #00a389;
}
.sd-rk em.dn {
  color: #d6455a;
}
.sd-rk .bb i.lo {
  background: linear-gradient(90deg, #f3c27a, #d98a2b);
}
.sd-rg {
  display: grid;
  grid-template-columns: 90px 1fr 40px auto;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
}
.sd-sg {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  background: #f7fafa;
  margin-top: 6px;
}
.sd-sg b {
  font-size: 12.5px;
}
.sd-map3 {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid #dcebec;
  background: #e6f2f3;
  aspect-ratio: 1000/520;
  box-shadow: inset 0 0 40px rgba(13, 61, 64, 0.06);
}
.sd-map3 svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sd-map3 .bs {
  fill: #dbe7e9;
  stroke: #fff;
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
}
.sd-map3 .kb {
  fill: #c4d7da;
  stroke: #fff;
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition:
    fill 0.35s,
    opacity 0.35s;
}
.sd-map3 .pv.on.t1 .kb {
  fill: #3f6f71;
}
.sd-map3 .pv.on.t2 .kb {
  fill: #5fc9b9;
}
.sd-map3 .pv.on.t3 .kb {
  fill: #eccb85;
}
.sd-map3 .pv.on .kb.has.t1 {
  fill: #0d3d40;
}
.sd-map3 .pv.on .kb.has.t2 {
  fill: #14b3a0;
}
.sd-map3 .pv.on .kb.has.t3 {
  fill: #d99b2b;
}
.sd-map3 .pv.off .kb {
  fill: #cfdcde;
}
.sd-map3 .pv.on .kb:hover {
  opacity: 0.82;
}
.sd-map3 .kb.cur {
  fill: #ffd36b !important;
  stroke: #7a5206;
  stroke-width: 1.6;
  filter: url(#sdGlow);
}
.sd-map3 .po {
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.sd-map3 .pv.sel .po {
  stroke: #0d3d40;
  stroke-width: 2;
}
.sd-map3 .odg {
  cursor: pointer;
  transition: opacity 0.3s;
}
.sd-map3 .odg.dim {
  opacity: 0.18;
}
.sd-map3 .od {
  stroke: #fff;
  stroke-width: 1.6;
}
.sd-map3 .od.t1 {
  fill: #0d3d40;
}
.sd-map3 .od.t2 {
  fill: #14b3a0;
}
.sd-map3 .od.t3 {
  fill: #e8a317;
}
.sd-map3 .odg.cur .od {
  stroke: #3a2a05;
  stroke-width: 2;
  fill: #ffd36b;
}
.sd-map3 .pulse {
  fill: rgba(255, 211, 107, 0.35);
  stroke: #e8a317;
  stroke-width: 1.2;
  animation: sdPulse2 1.6s ease-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes sdPulse2 {
  from {
    opacity: 1;
    transform: scale(0.5);
  }
  to {
    opacity: 0;
    transform: scale(2.2);
  }
}
.sd-map3 .pl {
  cursor: pointer;
}
.sd-map3 .pl rect {
  fill: rgba(255, 255, 255, 0.95);
  stroke: #d3e2e4;
  stroke-width: 1;
  filter: drop-shadow(0 4px 6px rgba(13, 61, 64, 0.15));
}
.sd-map3 .pl text {
  font-size: 12px;
  font-weight: 800;
  fill: #0d3d40;
  text-anchor: middle;
  font-family: inherit;
}
.sd-map3 .pl.sel rect,
.sd-map3 .pl:hover rect {
  fill: #0d3d40;
  stroke: #0d3d40;
}
.sd-map3 .pl.sel text,
.sd-map3 .pl:hover text {
  fill: #fff;
}
.sd-map3 .kl text {
  font-size: 11px;
}
.sd-map3 .kc circle {
  fill: #fff;
  stroke: #0d3d40;
  stroke-width: 1.5;
  filter: drop-shadow(0 3px 5px rgba(13, 61, 64, 0.25));
}
.sd-map3 .kc text {
  font-size: 11px;
}
.sd-map3 .kc:hover circle {
  fill: #0d3d40;
}
.sd-map3 .kc:hover text {
  fill: #fff;
}
.sd-map3 .mh {
  position: absolute;
  left: 12px;
  top: 12px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.sd-map3 .mh .chp {
  background: #0d3d40;
  color: #fff;
  border-color: #0d3d40;
}
.sd-map3 .mz {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 10px;
  border-radius: 99px;
  border: 1px solid #d3e2e4;
  background: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  color: #0d3d40;
  cursor: pointer;
}
.sd-map3 .mz svg {
  width: 11px;
  height: 11px;
}
.sd-map3 .lg {
  position: absolute;
  left: 12px;
  bottom: 10px;
  display: flex;
  gap: 6px;
}
.sd-map3 .src {
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: 9.5px;
  color: #6b7d87;
  background: rgba(255, 255, 255, 0.7);
  padding: 2px 6px;
  border-radius: 6px;
}
.sd-busy {
  position: relative;
}
.sd-busy > *:not(.sd-ld) {
  filter: blur(2px);
  opacity: 0.55;
  transition:
    filter 0.2s,
    opacity 0.2s;
}
.sd-ld {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(244, 250, 250, 0.35);
  border-radius: inherit;
  animation: sdLdIn 0.2s both;
}
.sd-lb .sd-ld {
  background: rgba(10, 44, 47, 0.35);
}
@keyframes sdLdIn {
  from {
    opacity: 0;
  }
}
.sd-rein {
  animation: sdRe 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes sdRe {
  from {
    opacity: 0.4;
    filter: blur(3px);
  }
}
.sd-map3 .lg span {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 10.5px;
  font-weight: 800;
  color: #3d5560;
}
.sd-map3 .lg i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
}
.sd-map3 .lg .t1 {
  background: #0d3d40;
}
.sd-map3 .lg .t2 {
  background: #14b3a0;
}
.sd-map3 .lg .t3 {
  background: #e8b04b;
}
.spark.sbars rect {
  fill: #cfeae7;
}
.spark.sbars rect.on {
  fill: #0d7d77;
}
.spark.sbars.low rect {
  fill: #f4e2bd;
}
.spark.sbars.low rect.on {
  fill: #c88a12;
}
.sd-net .ng {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.sd-net .nc {
  min-width: 0;
  overflow: hidden;
}
.sd-net .nt {
  flex-direction: column;
  align-items: flex-start !important;
  gap: 6px;
}
.sd-net .vd {
  white-space: nowrap;
  align-self: flex-start !important;
  margin: 0 !important;
}
.sd-net .nm {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.sd-net .nm b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sd-net .ws {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
}
.sd-net .ws span {
  white-space: nowrap;
}
.sd-cats {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.sd-cat {
  min-width: 0;
}
.sd-cat .im > div {
  grid-template-columns: minmax(0, 90px) minmax(0, 1fr) 32px !important;
}
.sd-cat .im span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.sd-ai-h .chips {
  min-width: 0;
}
.aiL-hide {
  display: none !important;
}
.aix > .aiL ~ * {
  display: none !important;
}
.aiL-on > .wa-ch .tg-btn,
.aiL-on > .wa-ch .cc-link,
.aiL-on > .ai-h .btn {
  visibility: hidden;
}
.aix > .aiL.aiL.aiL,
.aibox > .aiL.aiL.aiL,
.aiL {
  background: transparent !important;
  color: #fff !important;
  border-radius: 0 !important;
}
.aiL {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 8px 10px 12px !important;
  animation: phUp 0.3s both;
}
.aiL .st {
  flex: 1 1 240px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.aiL .st > div {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
  animation: aiStep 0.3s var(--d) forwards;
}
.aiL .dt {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  flex: none;
}
.aiL .st > div .dt {
  animation: sdDot 0.3s calc(var(--d) + 0.4s) forwards;
}
.aiL .pg {
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  margin-top: 6px;
}
.aiL .pg i {
  display: block;
  height: 100%;
  width: 0;
  background: #ffd36b;
  animation: sdPg 3s linear forwards;
}
.aiL .skg {
  flex: 999 1 320px;
  display: grid;
  grid-template-columns: repeat(var(--c), minmax(0, 1fr));
  gap: 10px;
}
.aiL .skg > div {
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.aiL .skg i {
  display: block;
  height: 9px;
  border-radius: 99px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.26),
    rgba(255, 255, 255, 0.08)
  );
  background-size: 200% 100%;
  animation: aiSh 1.1s linear infinite;
}
.aiL .skg i:nth-child(2) {
  width: 75%;
}
.aiL .skg i:nth-child(3) {
  width: 50%;
}
.aiL .skg i:nth-child(6) {
  width: 60%;
}
.aiL .skg b {
  display: block;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  margin: 3px 0;
}
.kcg > * + * {
  margin-top: 14px;
}
.kcg .ey {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #007a8b;
}
.kci {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  flex: none;
}
/* toolbar */
.kc-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kc-srch {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 16px;
  border-radius: 16px;
  background: #f4f8f8;
  border: 1px solid #e3eef0;
  color: #6b7d87;
  transition: 0.2s;
}
.kc-srch:focus-within {
  background: #fff;
  border-color: #14b3a0;
  box-shadow: 0 0 0 4px rgba(20, 179, 160, 0.12);
}
.kc-srch svg {
  width: 16px;
  height: 16px;
}
.kc-srch input {
  flex: 1;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: #142b35;
  outline: 0;
}
.kc-cats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.kc-cats button {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid #e3eef0;
  background: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: #3d5560;
  cursor: pointer;
  transition: 0.2s;
}
.kc-cats button svg {
  width: 13px;
  height: 13px;
  color: #007a8b;
}
.kc-cats button em {
  font-style: normal;
  font-size: 10.5px;
  padding: 1px 7px;
  border-radius: 99px;
  background: #eef4f5;
  color: #5b6f78;
}
.kc-cats button:hover {
  border-color: #9fd3da;
}
.kc-cats button.on {
  background: #0d3d40;
  border-color: #0d3d40;
  color: #fff;
}
.kc-cats button.on svg {
  color: #5fd6c3;
}
.kc-cats button.on em {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
/* rec */
.kc-recb {
  display: flex !important;
  align-items: center;
  gap: 16px;
  padding: 14px 16px !important;
  flex-wrap: wrap;
}
.kc-recb .kcw {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kc-recb .kcw .chp {
  margin-left: 6px;
}
.kc-recb .kcits {
  flex: 1;
  display: flex;
  gap: 8px;
  min-width: 0;
}
.kc-recb .kcit {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 13px;
  border: 1px solid #e9eff0;
  background: #f8fbfb;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: #142b35;
  transition: 0.2s;
}
.kc-recb .kcit:hover {
  border-color: #e8b04b;
  background: #fffaf0;
}
.kc-recb .kcit b {
  flex: 1;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kc-recb .kcit svg {
  width: 13px;
  height: 13px;
  color: #8a9ba2;
}
.kc-recb .kck {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 6px;
  background: #eaf6f7;
  color: #007a8b;
}
.kc-recb .kck.tc {
  background: #fff3d6;
  color: #b7801f;
}
/* section head */
.kc-sh {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 14px;
}
.kc-sh h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 3px 0 0;
  font-size: 18px;
  color: #0d3d40;
}
.kc-sh h3 svg {
  width: 17px;
  height: 17px;
  color: #007a8b;
}
.kc-sh .chips {
  display: flex;
  gap: 6px;
}
/* library */
.kc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.kc-bk {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #e9eff0;
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
  animation: phUp 0.4s calc(var(--i) * 0.05s) both;
}
.kc-bk:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -22px rgba(13, 61, 64, 0.55);
}
.kc-cv {
  position: relative;
  height: 118px;
  background: linear-gradient(135deg, var(--a), var(--b));
  overflow: hidden;
  color: #fff;
  flex: none;
}
.kc-cv .o1 {
  position: absolute;
  right: -30px;
  top: -40px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}
.kc-cv .o2 {
  position: absolute;
  left: -20px;
  bottom: -60px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 16px solid rgba(255, 255, 255, 0.08);
}
.kc-cv .kcty {
  position: absolute;
  left: 12px;
  top: 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4px);
}
.kc-cv .kcci {
  position: absolute;
  right: 16px;
  bottom: 14px;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.kc-cv .kcci svg {
  width: 26px;
  height: 26px;
}
.kc-cv .kcmn {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
}
.kc-cv .kcmn svg {
  width: 11px;
  height: 11px;
}
.kc-cv.big {
  height: 150px;
  border-radius: 18px;
  margin-bottom: 6px;
}
.kc-cv.big .kcci {
  width: 68px;
  height: 68px;
}
.kc-cv.big .kcci svg {
  width: 34px;
  height: 34px;
}
.kc-bk .kcbd {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px 14px;
}
.kc-bk .kctp {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kc-bk .kctp .chp {
  font-size: 10.5px;
}
.kc-bk b {
  font-size: 13.5px;
  line-height: 1.35;
  color: #142b35;
}
.kc-bk .kcmt {
  font-size: 11px;
  color: #6b7d87;
}
.kc-bk .kcft {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #6b7d87;
}
.kc-bk .kcft .rd {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
}
.kc-bk .kcft .rd svg {
  width: 11px;
  height: 11px;
}
.kc-bk .kcft .rt {
  color: #b7801f;
  font-weight: 800;
}
.kclv {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
}
.kclv.kv1 {
  background: #eaf6f7;
  color: #007a8b;
}
.kclv.kv2 {
  background: #e0f6f2;
  color: #0d7d77;
}
.kclv.kv3 {
  background: #fff3d6;
  color: #b7801f;
}
.kcpr {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kcpr > div {
  flex: 1;
  height: 5px;
  border-radius: 99px;
  background: #e6eef0;
  overflow: hidden;
}
.kcpr > div i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #5fd6c3, #0d7d77);
}
.kcpr em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  color: #0d7d77;
}
.kc-bm {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid #e3eef0;
  background: #fff;
  display: grid;
  place-items: center;
  color: #8a9ba2;
  cursor: pointer;
  transition: 0.2s;
}
.kc-bm:hover {
  color: #007a8b;
}
.kc-bm.on {
  background: #fff3d6;
  border-color: #f3dca4;
  color: #b7801f;
}
.kc-bm.on .kci {
  fill: currentColor;
}
.kc-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 30px;
  border-radius: 16px;
  background: #f6f9fa;
  color: #6b7d87;
}
.kc-empty svg {
  width: 18px;
  height: 18px;
}
.kc-empty.dk {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  grid-column: 1/-1;
}
/* tacit */
.kc-tk {
  padding: 20px;
  border-radius: 26px;
  background: radial-gradient(120% 140% at 0% 0%, #0f5a57 0%, #0d3d40 45%, #0a2c2f 100%);
  color: #fff;
  box-shadow: 0 24px 50px -30px rgba(13, 61, 64, 0.9);
}
.kc-tk .ey {
  color: #ffd36b;
}
.kc-tk .kc-sh h3 {
  color: #fff;
}
.kc-tk .kc-sh h3 svg {
  color: #ffd36b;
}
.kc-tk .kc-sh .chp {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}
.kc-flow {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 14px;
}
.kc-flow > div {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.06);
  animation: phUp 0.4s calc(var(--i) * 0.07s) both;
}
.kc-flow .fi {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ffd36b, #e8a317);
  color: #3a2a05;
  flex: none;
}
.kc-flow .fi svg {
  width: 15px;
  height: 15px;
}
.kc-flow b {
  display: block;
  font-size: 12px;
}
.kc-flow em {
  font-style: normal;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.6);
}
.kc-flow .ar {
  color: rgba(255, 255, 255, 0.35);
}
.kc-flow .ar svg {
  width: 14px;
  height: 14px;
}
.kc-tkg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 14px;
  align-items: start;
}
.kc-tcs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.kc-tc {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 20px;
  background: #fff;
  color: #142b35;
  cursor: pointer;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
  animation: phUp 0.4s calc(var(--i) * 0.05s) both;
}
.kc-tc:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 30px -18px rgba(0, 0, 0, 0.55);
}
.kc-tc .kchd {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kc-tc .kchd .chp {
  font-size: 10.5px;
}
.kc-tc .kcvf {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 800;
  color: #b7801f;
}
.kc-tc .kcvf svg {
  width: 11px;
  height: 11px;
}
.kc-tc .kcqt {
  position: relative;
  padding: 12px 14px 12px 34px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fffaf0, #fff3d6);
}
.kc-tc .qm {
  position: absolute;
  left: 10px;
  top: 2px;
  font-size: 38px;
  font-weight: 800;
  color: #e8b04b;
  line-height: 1;
}
.kc-tc .kcqt p {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: #3a2a05;
}
.kc-tc .kcw {
  display: flex;
  align-items: center;
  gap: 9px;
}
.kc-tc .kcw b {
  font-size: 12.5px;
}
.kc-tc .kcw span {
  font-size: 11px;
}
.kc-tc .kcsrc {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #6b7d87;
}
.kc-tc .kcsrc svg {
  width: 11px;
  height: 11px;
  color: #007a8b;
}
.kc-tc .kcft {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid #eef3f4;
  font-size: 11.5px;
  font-weight: 800;
  color: #6b7d87;
}
.kc-tc .kcft > span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.kc-tc .kcft .kci {
  width: 14px;
  height: 14px;
}
.kc-tc .kcft .kcap {
  margin-left: auto;
  color: #007a8b;
}
.kc-tc .kcft .kcap svg {
  width: 11px;
  height: 11px;
}
.kc-top {
  padding: 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kc-top > b {
  font-size: 13px;
  margin-bottom: 4px;
}
.kc-top .kctr {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px;
  border-radius: 12px;
}
.kc-top .kctr:first-of-type {
  background: rgba(255, 211, 107, 0.1);
}
.kc-top .kcrk {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.1);
  color: #ffd36b;
  flex: none;
}
.kc-top .cdi b {
  font-size: 12px;
  color: #fff;
}
.kc-top .cdi span {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.55);
}
/* like */
.kc-lk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border-radius: 99px;
  border: 1px solid #e3eef0;
  background: #fff;
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
  color: #5b6f78;
  cursor: pointer;
  transition: 0.2s;
}
.kc-lk:hover {
  border-color: #e8b04b;
  color: #b7801f;
}
.kc-lk.on {
  background: #fff3d6;
  border-color: #f3dca4;
  color: #b7801f;
}
.kc-lk.on .kci {
  fill: #e8a317;
  stroke: #e8a317;
}
.kc-lk.pop .kci {
  animation: kcPop 0.35s;
}
@keyframes kcPop {
  50% {
    transform: scale(1.4);
  }
}
.kc-lk.sm {
  height: 24px;
  padding: 0 8px;
  font-size: 10.5px;
}
.kc-lk.sm .kci {
  width: 12px;
  height: 12px;
}
.kc-lk.big,
.kc-bm.big {
  height: 42px;
  padding: 0 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 13px;
}
.kc-bm.big {
  width: 42px;
  padding: 0;
}
.kc-lk.big.on,
.kc-bm.big.on {
  background: #ffd36b;
  border-color: #ffd36b;
  color: #3a2a05;
}
.kc-lk.big.on .kci {
  fill: #3a2a05;
  stroke: #3a2a05;
}
/* feed */
.kc-fg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 16px;
  align-items: start;
}
.kc-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kc-cmp {
  display: flex;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: #f6f9fa;
  border: 1px solid #e9eff0;
}
.kc-cmp .kcci {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kc-cmp textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #e3eef0;
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  resize: none;
  background: #fff;
  outline: 0;
}
.kc-cmp textarea:focus {
  border-color: #14b3a0;
}
.kc-cmp .kccb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.kc-cmp .chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.kc-cmp .chp {
  font-size: 10.5px;
}
.kc-post {
  display: flex;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid #e9eff0;
  background: #fff;
  animation: phUp 0.35s both;
}
.kc-post .kcpb {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.kc-post .kcph {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.kc-post .kcph b {
  font-size: 13px;
}
.kc-post .kcph span {
  font-size: 11.5px;
  color: #6b7d87;
}
.kc-post .kcph em {
  margin-left: auto;
  font-style: normal;
  font-size: 11px;
  color: #8a9ba2;
  white-space: nowrap;
}
.kc-post p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #24404a;
}
.kc-ref {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: 10px;
  border: 1px solid #f3dca4;
  background: #fffaf0;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: #8a5b00;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kc-ref svg {
  width: 11px;
  height: 11px;
  flex: none;
}
.kc-post .kcpa {
  display: flex;
  gap: 6px;
}
.kc-rp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border-radius: 99px;
  border: 1px solid #e3eef0;
  background: #fff;
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
  color: #5b6f78;
  cursor: pointer;
}
.kc-rp:hover {
  border-color: #14b3a0;
  color: #007a8b;
}
.kc-reps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f6f9fa;
}
.kc-reps .kcrp {
  display: flex;
  gap: 9px;
}
.kc-reps .kcrp > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.kc-reps .kcph b {
  font-size: 12px;
}
.kc-reps p {
  font-size: 12.5px;
}
.kc-rin {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kc-rin input {
  flex: 1;
  height: 36px;
  border: 1px solid #e3eef0;
  border-radius: 11px;
  padding: 0 12px;
  font: inherit;
  font-size: 12.5px;
  outline: 0;
}
.kc-rin input:focus {
  border-color: #14b3a0;
}
.kc-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kc-side .bx {
  padding: 14px;
  border-radius: 18px;
  background: #f6f9fa;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kc-side .bx > b {
  font-size: 13px;
}
.kc-side .kctg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.kc-side .kctg span {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 99px;
  background: #fff;
  border: 1px solid #e3eef0;
  font-size: 11.5px;
  font-weight: 800;
  color: #0d3d40;
}
.kc-side .kctg em {
  font-style: normal;
  font-size: 10px;
  color: #8a9ba2;
}
.kc-side .kctr {
  display: flex;
  align-items: center;
  gap: 9px;
}
.kc-side .cdi b {
  font-size: 12px;
}
.kc-side .cdi span {
  font-size: 10.5px;
}
/* reader */
.kc-rh h1 {
  font-size: 30px !important;
  line-height: 1.25;
  max-width: 900px;
  margin: 12px 0 14px !important;
}
.kc-rht {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  padding-right: 150px;
}
.kc-rht > div:first-child {
  flex: 1;
  min-width: 0;
}
.kc-rht .kcby {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kc-rht .kcby .cdi b {
  color: #fff;
  font-size: 13.5px;
}
.kc-rht .kcby .cdi span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}
.kc-rht .kcsc {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.12);
}
.kc-rht .kcsc svg {
  width: 15px;
  height: 15px;
  color: #ffd36b;
}
.kc-rht .kcacts {
  display: flex;
  gap: 8px;
}
.kc-rd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 14px;
  align-items: start;
}
.kc-art {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 22px !important;
}
.kc-blk {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kc-blk .lead {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #0d3d40;
}
.kc-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kc-steps > div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f6f9fa;
  animation: phUp 0.35s both;
}
.kc-steps em {
  font-style: normal;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: none;
  font-size: 12px;
  font-weight: 800;
  background: linear-gradient(135deg, #ffd36b, #e8a317);
  color: #3a2a05;
}
.kc-steps b {
  font-size: 13.5px;
  color: #142b35;
}
.kc-res {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, #0d3d40, #0a5a57);
  color: #fff;
}
.kc-res span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7fe3d6;
}
.kc-res b {
  font-size: 26px;
  letter-spacing: -0.02em;
}
.kc-orig {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #e9eff0;
}
.kc-orig .kcln {
  width: 16px;
  height: 2px;
  background: #cfe0e2;
}
.kc-orig > svg {
  width: 13px;
  height: 13px;
  color: #007a8b;
}
.kc-orig .cdi {
  margin-right: auto;
}
.kc-orig .cdi b {
  font-size: 12.5px;
}
.kc-orig .cdi span {
  font-size: 11px;
}
.kc-con {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.kc-con div {
  padding: 12px;
  border-radius: 14px;
  background: #eaf6f7;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.kc-con b {
  font-size: 13px;
  color: #0d3d40;
}
.kc-con span {
  font-size: 11.5px;
  color: #4a6670;
}
.kc-prg {
  gap: 12px;
}
.kc-prg > div {
  height: 7px;
}
.kc-rs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kc-rel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kc-rel button {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: #142b35;
  cursor: pointer;
}
.kc-rel button > b {
  font-size: 13.5px;
}
.kc-rel .kc-cv {
  height: 96px;
  border-radius: 14px;
}
.kc-rel p {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fffaf0, #fff3d6);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: #3a2a05;
}
.kc-rel .kcw {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kc-rel .kcw b {
  font-size: 12px;
}
.kc-rel .kcw span {
  font-size: 10.5px;
}
.kc-stat {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.kc-stat > div {
  padding: 12px;
  border-radius: 14px;
  background: #f6f9fa;
}
.kc-stat span {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a9ba2;
}
.kc-stat b {
  font-size: 22px;
  color: #0d3d40;
}
.kc-stat em {
  font-style: normal;
  font-size: 11px;
  color: #6b7d87;
  margin-left: 4px;
}

.kc-cats {
  flex-wrap: nowrap !important;
}
.kc-cats button {
  flex: 1 1 auto;
  justify-content: center;
  padding: 0 10px !important;
  font-size: 12px !important;
  white-space: nowrap;
}
.kc-recb {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}
.kc-recb .kcits {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kc-recb .kcit b {
  white-space: normal !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.35;
}
.kc-tcs {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.kc-topr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 14px;
  overflow: hidden;
}
.kc-topr > b {
  font-size: 12px;
  white-space: nowrap;
  margin-right: 6px;
  color: #ffd36b;
}
.kc-topr .kctr {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}
.kc-topr .kctr:first-of-type {
  background: rgba(255, 211, 107, 0.12);
}
.kc-topr .kcrk {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.1);
  color: #ffd36b;
  flex: none;
}
.kc-topr .cdi {
  min-width: 0;
}
.kc-topr .cdi b {
  display: block;
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kc-topr .cdi span {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.55);
}
.kc-tc .kcqt p {
  font-size: 12.5px !important;
}
/* v3 */
.kc-fr {
  display: flex;
  gap: 8px;
  align-items: center;
}
.kc-fr .kc-srch {
  flex: 1;
}
.kc-dd {
  position: relative;
}
.kc-ddb {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 48px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid #e3eef0;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  color: #3d5560;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.2s;
}
.kc-ddb svg {
  width: 13px;
  height: 13px;
  color: #8a9ba2;
  transition: transform 0.2s;
}
.kc-ddb:hover {
  border-color: #9fd3da;
}
.kc-dd.op .kc-ddb {
  border-color: #14b3a0;
  box-shadow: 0 0 0 4px rgba(20, 179, 160, 0.12);
}
.kc-dd.op .kc-ddb > svg:last-child {
  transform: rotate(180deg);
}
.kc-ddb.on {
  background: #0d3d40;
  border-color: #0d3d40;
  color: #fff;
}
.kc-ddb.on svg {
  color: #5fd6c3;
}
.kc-ddb em {
  font-style: normal;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  display: grid;
  place-items: center;
  font-size: 10.5px;
  background: #ffd36b;
  color: #3a2a05;
}
.kc-ddb.srt svg:first-child {
  color: #007a8b;
}
.kc-pop {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 40;
  min-width: 230px;
  padding: 6px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e3eef0;
  box-shadow: 0 24px 50px -20px rgba(13, 61, 64, 0.45);
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: phUp 0.2s both;
}
.kc-pop.r {
  left: auto;
  right: 0;
}
.kc-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #142b35;
  text-align: left;
  cursor: pointer;
}
.kc-opt:hover {
  background: #f2f8f8;
}
.kc-opt em {
  margin-left: auto;
  font-style: normal;
  font-size: 11px;
  color: #8a9ba2;
}
.kc-opt .cb {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1.5px solid #cfe0e2;
  display: grid;
  place-items: center;
  color: #fff;
  flex: none;
}
.kc-opt .cb svg {
  width: 11px;
  height: 11px;
}
.kc-opt.on .cb {
  background: #0d3d40;
  border-color: #0d3d40;
}
.kc-opt .rd {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid #cfe0e2;
  flex: none;
}
.kc-opt.on .rd {
  border: 5px solid #0d3d40;
}
.kc-clr1 {
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 0;
  border-top: 1px solid #eef3f4;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  color: #b7801f;
  text-align: left;
  cursor: pointer;
}
.kc-act {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 28px;
}
.kc-act .n {
  font-size: 12.5px;
  color: #6b7d87;
  margin-right: 6px;
}
.kc-act .n b {
  color: #0d3d40;
}
.kc-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 6px 0 11px;
  border-radius: 99px;
  border: 1px solid #a9ddd3;
  background: #e6f6f3;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  color: #0d5c58;
  cursor: pointer;
}
.kc-tag svg {
  width: 18px !important;
  height: 18px !important;
  padding: 4px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #fff;
  color: #0d5c58;
  stroke-width: 3;
}
.kc-tag:hover {
  background: #d7f1ec;
}
.kc-rst {
  height: 28px;
  padding: 0 10px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  color: #b7801f;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.kc-ins {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fffaf0, #fff3d6);
}
.kc-ins .kcav {
  display: flex;
  flex: none;
  padding-left: 6px;
}
.kc-ins .kcav > * {
  margin-left: -6px;
  box-shadow: 0 0 0 2px #fff3d6;
  border-radius: 50%;
  flex: none;
}
.kc-ins span {
  white-space: nowrap;
}
.kc-ins span {
  font-size: 11.5px;
  color: #8a5b00;
}
.kc-ins span b {
  font-weight: 800;
}
.kc-mat {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}
.kc-vid,
.kc-rub {
  display: flex;
  flex-direction: column;
}
.kc-rub {
  gap: 16px;
}
.kc-rub .kc-sh,
.kc-vid .kc-sh {
  margin-bottom: 0;
}
.kc-vid .kc-sh {
  margin-bottom: 14px;
}
.kc-pl {
  position: relative;
  flex: 1;
  min-height: 300px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--a), var(--b));
  display: grid;
  place-items: center;
  color: #fff;
}
.kc-pl .o1 {
  position: absolute;
  right: -60px;
  top: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}
.kc-pl .o2 {
  position: absolute;
  left: -40px;
  bottom: -90px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 26px solid rgba(255, 255, 255, 0.07);
}
.kc-pl .pb {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.95);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow:
    0 0 0 12px rgba(255, 255, 255, 0.15),
    0 20px 40px -14px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s;
}
.kc-pl .pb:hover {
  transform: scale(1.06);
}
.kc-pl .pb svg {
  width: 30px;
  height: 30px;
  fill: #0d3d40;
  margin-left: 4px;
}
.kc-pl .bt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.45), transparent);
}
.kc-pl .bt span {
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 45%;
}
.kc-pl .bt .sk {
  flex: 1;
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}
.kc-pl .bt .sk i {
  display: block;
  height: 100%;
  background: #ffd36b;
}
.kc-pl .bt em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
}
.kc-pl .ph {
  position: absolute;
  left: 14px;
  top: 14px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.25);
}
.kc-con {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kc-il {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kc-ii {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 18px;
  background: #fff;
  color: #142b35;
  animation: phUp 0.4s calc(var(--i) * 0.06s) both;
}
.kc-ii .no {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 800;
  background: linear-gradient(135deg, #ffd36b, #e8a317);
  color: #3a2a05;
}
.kc-ii .tx {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
.kc-ii p {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.5;
  color: #0d3d40;
}
.kc-ii .mt {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: #6b7d87;
}
.kc-ii .mt b {
  font-size: 12px;
  color: #142b35;
}
.kc-ii .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #cfdcde;
}
.kc-ii .sr {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
}
.kc-ii .sr svg {
  width: 11px;
  height: 11px;
  color: #007a8b;
}
.kc-ii .vf {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 99px;
  background: #fff3d6;
  color: #8a5b00;
  font-weight: 800;
  font-size: 10.5px;
}
.kc-ii .vf svg {
  width: 10px;
  height: 10px;
}
.kc-ii .ac {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.kc-ii .ap {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  color: #007a8b;
  white-space: nowrap;
}
.kc-ii .ap svg {
  width: 11px;
  height: 11px;
}
.kc-tx {
  border-radius: 20px;
  background: #fff;
  color: #142b35;
  overflow: hidden;
  animation: phUp 0.4s calc(var(--i) * 0.06s) both;
}
.kc-txh {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 28px;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 16px 18px;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.kc-txh .no {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 800;
  background: linear-gradient(135deg, #ffd36b, #e8a317);
  color: #3a2a05;
}
.kc-txh .tt {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.kc-txh .tt > b {
  font-size: 15.5px;
  line-height: 1.5;
  color: #0d3d40;
}
.kc-txh .mt {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: #6b7d87;
}
.kc-txh .mt .nm {
  font-weight: 800;
  color: #142b35;
}
.kc-txh .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #cfdcde;
}
.kc-txh .sr {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
}
.kc-txh .sr svg {
  width: 11px;
  height: 11px;
  color: #007a8b;
}
.kc-txh .cv {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #f0f5f5;
  color: #5b6f78;
  transition: transform 0.25s;
}
.kc-tx.op .kc-txh .cv {
  transform: rotate(180deg);
  background: #0d3d40;
  color: #fff;
}
.kc-txh:hover .cv {
  background: #e2eef0;
}
.kc-txb {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  padding: 4px 18px 18px 72px;
  animation: phUp 0.3s both;
}
.kc-txb .kxmn {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kc-txb .kxsec {
  padding-left: 14px;
  position: relative;
}
.kc-txb .kxlb {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #007a8b;
  margin-bottom: 6px;
}
.kc-txb .kxlb i {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: #eaf6f7;
  color: #007a8b;
}
.kc-txb .kxlb i svg {
  width: 12px;
  height: 12px;
}
.kc-txb .kxsec {
  padding: 0;
}
.kc-txb p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: #2b4650;
}
.kc-txb .kxsec.bad .kxlb {
  color: #8a5b00;
}
.kc-txb .kxsec.bad .kxlb i {
  background: #fff3d6;
  color: #b7801f;
}
.kc-txb .kxsec.bad p {
  color: #5b6f78;
}
.kc-txb .kxsec.key {
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, #eaf6f7, #f6fbfb);
  border: 1px solid #d6ecee;
}
.kc-txb .kxsec.key .kxlb i {
  background: #0d3d40;
  color: #5fd6c3;
}
.kc-txb .kxsec.key p {
  color: #142b35;
  font-weight: 600;
}
.kc-txb ul {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kc-txb li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
  color: #24404a;
}
.kc-txb li:before {
  content: '';
  position: absolute;
  left: 4px;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #14b3a0;
}
.kc-txb .kxsd {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kc-txb .bx {
  padding: 14px;
  border-radius: 16px;
  background: #f6f9fa;
}
.kc-txb .bx ul {
  margin-top: 2px;
}
.kc-txb .bx li {
  font-size: 12.5px;
}
.kc-txb .bx.res {
  background: linear-gradient(135deg, #0d3d40, #0a5a57);
}
.kc-txb .bx.res .kxlb {
  color: #ffd36b;
}
.kc-txb .bx.res li {
  color: #fff;
}
.kc-txb .bx.res li:before {
  background: #ffd36b;
}
.kc-txb .ft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px;
}
.kc-txb .ft .ap {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 800;
  color: #007a8b;
}
.kc-txb .ft .ap svg {
  width: 11px;
  height: 11px;
}
.kc-txb .vf {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border-radius: 11px;
  background: #fff3d6;
  color: #8a5b00;
  font-size: 11.5px;
  font-weight: 800;
}
.kc-txb .vf svg {
  width: 11px;
  height: 11px;
}
.kc-txb {
  grid-template-columns: minmax(0, 1fr) 280px !important;
  gap: 22px !important;
  padding: 2px 22px 22px 72px !important;
}
.kc-txb .kxmn {
  gap: 18px !important;
}
.kc-txb .kxlb {
  margin-bottom: 8px !important;
  line-height: 1;
}
.kc-txb .kxsec.key {
  padding: 16px 18px !important;
}
.kc-txb .kxsec.key ul {
  margin-top: 12px !important;
  padding-top: 12px;
  border-top: 1px solid #d6ecee;
}
.kc-txb .kxsd {
  position: sticky;
  top: 12px;
  align-self: start;
  gap: 10px !important;
}
.kc-txb .bx {
  padding: 16px !important;
}
.kc-txb .bx .kxlb {
  margin-bottom: 12px !important;
}
.kc-txb .bx ul {
  margin: 0 !important;
  gap: 10px !important;
}
.kc-txb .bx.res li {
  font-size: 13px !important;
  line-height: 1.45;
}
.kc-txb .ft {
  padding: 2px 0 !important;
}
.ki-g2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
.ki-fn {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ki-fn .r {
  display: grid;
  grid-template-columns: 30px 170px minmax(0, 1fr) 44px 40px;
  gap: 10px;
  align-items: center;
  animation: phUp 0.4s calc(var(--i) * 0.06s) both;
}
.ki-fn .fi {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #eaf6f7;
  color: #007a8b;
}
.ki-fn .fi svg {
  width: 14px;
  height: 14px;
}
.ki-fn .r:last-child .fi {
  background: linear-gradient(135deg, #ffd36b, #e8a317);
  color: #3a2a05;
}
.ki-fn .l {
  font-size: 12.5px;
  font-weight: 700;
  color: #24404a;
  white-space: nowrap;
}
.ki-fn .b {
  height: 22px;
  border-radius: 7px;
  background: #f0f5f6;
  overflow: hidden;
}
.ki-fn .b i {
  display: block;
  height: 100%;
  border-radius: 7px;
  background: linear-gradient(90deg, #14b3a0, #0d3d40);
}
.ki-fn .r:last-child .b i {
  background: linear-gradient(90deg, #ffd36b, #c88a12);
}
.ki-fn b {
  font-size: 14px;
  color: #0d3d40;
  text-align: right;
}
.ki-fn em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  color: #007a8b;
  text-align: right;
}
.ki-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 3px;
  margin-right: 5px;
}
.ki-dot.a {
  background: #9fd9d1;
}
.ki-dot.b {
  background: #0d3d40;
}
.ki-bars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  height: 230px;
  align-items: end;
  padding-top: 10px;
}
.ki-bars .c {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
}
.ki-bars .c > span {
  font-size: 11.5px;
  font-weight: 800;
  color: #6b7d87;
}
.ki-bars .st {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
}
.ki-bars .st i {
  position: relative;
  width: 38%;
  border-radius: 8px 8px 3px 3px;
  animation: kiUp 0.6s calc(var(--i) * 0.06s) cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transform-origin: bottom;
}
.ki-bars .st i.a {
  background: #9fd9d1;
}
.ki-bars .st i.b {
  background: linear-gradient(180deg, #14b3a0, #0d3d40);
}
.ki-bars .c:last-child .st i.b {
  background: linear-gradient(180deg, #ffd36b, #c88a12);
}
.ki-bars .st em {
  position: absolute;
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  color: #0d3d40;
}
@keyframes kiUp {
  from {
    transform: scaleY(0);
  }
}
.ki-tb {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ki-tb .hd,
.ki-tb .rw {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) 60px minmax(0, 1.4fr) 80px;
  gap: 12px;
  align-items: center;
}
.ki-tb .hd {
  padding: 0 12px 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a9ba2;
}
.ki-tb .hd span:not(:first-child) {
  text-align: right;
}
.ki-tb .hd span:nth-child(3) {
  text-align: left;
}
.ki-tb .rw {
  padding: 10px 12px;
  border-radius: 13px;
  background: #f7fafa;
}
.ki-tb .rw > b {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #142b35;
  white-space: nowrap;
  overflow: hidden;
}
.ki-tb .rw > b i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex: none;
}
.ki-tb .rw > span {
  font-size: 12.5px;
  font-weight: 800;
  color: #0d3d40;
  text-align: right;
}
.ki-tb .rd {
  display: grid !important;
  grid-template-columns: 1fr 46px;
  gap: 8px;
  align-items: center;
  text-align: right;
}
.ki-tb .bb {
  height: 6px;
  border-radius: 99px;
  background: #e3eced;
  overflow: hidden;
}
.ki-tb .bb i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #5fd6c3, #0d7d77);
}
.ki-tb .ap strong {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 99px;
  background: #e0f6f2;
  color: #0d7d77;
  font-size: 11.5px;
}
.ki-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ki-top .it {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 15px;
  border: 1px solid #e9eff0;
  background: #fff;
  font: inherit;
  text-align: left;
  color: #142b35;
  cursor: pointer;
  transition: 0.2s;
  animation: phUp 0.4s calc(var(--i) * 0.05s) both;
}
.ki-top .it:hover {
  border-color: #e8b04b;
  background: #fffaf0;
}
.ki-top .no {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  background: linear-gradient(135deg, #ffd36b, #e8a317);
  color: #3a2a05;
}
.ki-top .tx {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ki-top p {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ki-top .mt {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ki-top .mt b {
  font-size: 11px;
  color: #6b7d87;
}
.ki-top .nm {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}
.ki-top .nm span {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 800;
  color: #b7801f;
}
.ki-top .nm span:last-child {
  color: #007a8b;
}
.ki-top .nm .kci {
  width: 13px;
  height: 13px;
}
.ki-top .nm svg {
  width: 11px;
  height: 11px;
}
.ki-lbg {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 270px;
  gap: 14px;
  align-items: stretch;
}
.ki-lst .lhd,
.ki-lst .slr {
  grid-template-columns: 24px minmax(0, 1fr) 170px 40px !important;
}
.ki-gp {
  padding: 9px 0;
}
.ki-gp + .ki-gp {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.ki-gp .r {
  display: flex;
  justify-content: space-between;
}
.ki-gp .r b {
  font-size: 12.5px;
}
.ki-gp .r em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  color: #ffd36b;
}
.ki-gp > span {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.55);
}
.ki-it {
  display: flex !important;
  flex-direction: column;
  gap: 8px !important;
  align-items: stretch !important;
}
.ki-it > b {
  font-size: 13px;
  color: #142b35;
}
.ki-it > .chp {
  align-self: flex-start;
  background: var(--ks) !important;
  color: var(--k) !important;
  border-color: transparent !important;
}
.ki-nd {
  position: relative;
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 18px;
  background: #fff;
  color: #142b35;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: phUp 0.4s both;
}
.ki-nd .nh {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.ki-nd .lg {
  display: flex;
  gap: 14px;
}
.ki-nd .lg span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #5b6f78;
}
.ki-nd .lg i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.ki-nd i.a {
  background: linear-gradient(90deg, #14b3a0, #0d3d40);
}
.ki-nd i.b {
  background: linear-gradient(90deg, #ffd36b, #c88a12);
}
.ki-nd .r {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 64px 90px;
  gap: 14px;
  align-items: center;
  padding: 6px 0;
  animation: phUp 0.35s calc(var(--i) * 0.05s) both;
}
.ki-nd .r + .r {
  border-top: 1px solid #eef3f4;
}
.ki-nd .r > b {
  font-size: 13px;
}
.ki-nd .bs {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ki-nd .bs > div {
  height: 7px;
  border-radius: 99px;
  background: #f0f5f6;
  overflow: hidden;
}
.ki-nd .bs i {
  display: block;
  height: 100%;
  border-radius: 99px;
}
.ki-nd .v {
  font-size: 12px;
  font-weight: 800;
  color: #0d3d40;
  text-align: right;
}
.ki-nd .st {
  justify-self: end;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 99px;
  background: #eaf6f7;
  color: #007a8b;
}
.ki-nd .st.g {
  background: #fff3d6;
  color: #8a5b00;
}
.ki-nd .st.s {
  background: #0d3d40;
  color: #fff;
}
.ki-dot.g {
  background: #e8b04b;
}
.td9 {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: 8px;
}
.td9 .yl {
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.td9 .yl span {
  transform: rotate(-90deg);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a9ba2;
  white-space: nowrap;
}
.td9 .xl {
  grid-column: 2;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a9ba2;
}
.td9 .gr {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.td9 .cl {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 2px;
  min-height: 74px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 2px solid transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  background: #e3f6f2;
  color: #0d3d40;
  transition: 0.2s;
}
.td9 .cl.hi {
  background: linear-gradient(135deg, #0d3d40, #0f6c66);
  color: #fff;
}
.td9 .cl.lo {
  background: #fff3d6;
  color: #8a5b00;
}
.td9 .cl b {
  font-size: 20px;
  letter-spacing: -0.02em;
}
.td9 .cl span {
  font-size: 11px;
  font-weight: 800;
  opacity: 0.85;
}
.td9 .cl:hover {
  transform: translateY(-2px);
}
.td9 .cl.on {
  border-color: #e8a317;
  box-shadow: 0 0 0 4px rgba(232, 163, 23, 0.2);
}
.td-cp {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 6px;
}
.td-cp .r {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 34px;
  gap: 12px;
  align-items: center;
}
.td-cp .r > span {
  font-size: 12.5px;
  font-weight: 700;
  color: #24404a;
}
.td-cp .b {
  position: relative;
  height: 12px;
  border-radius: 99px;
  background: #eef3f4;
}
.td-cp .b i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #5fd6c3, #0d3d40);
}
.td-cp .b em {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 3px;
  margin-left: -1px;
  border-radius: 2px;
  background: #e8a317;
}
.td-cp .r > b {
  font-size: 13px;
  color: #0d3d40;
  text-align: right;
}
.td-cp .r > b.lo {
  color: #b7801f;
}
.td-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}
.td-bar .kc-srch {
  flex: 1;
  height: 42px;
}
.td-bar .sd-seg button {
  white-space: nowrap;
}
#tdProf .wa-ch .chips {
  display: flex;
  gap: 6px;
  align-items: center;
}
/* org chart */
.org-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  padding: 4px 2px 6px;
}
.org-tree .nd {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 14px;
  border: 1px solid #e3eef0;
  background: #fff;
  text-align: left;
  font: inherit;
  color: #142b35;
}
.org-tree .nd .cdi {
  min-width: 0;
}
.org-tree .nd .cdi b {
  display: block;
  font-size: 12.5px;
  line-height: 1.3;
}
.org-tree .nd .cdi span {
  display: block;
  font-size: 11px;
  color: #6b7d87;
}
.org-tree .lv {
  position: absolute;
  top: -8px;
  right: 10px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 99px;
  background: #eaf6f7;
  color: #007a8b;
}
.org-l0 {
  position: relative;
  padding-bottom: 22px;
}
.org-l0:after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2px;
  height: 22px;
  background: #9fd3da;
}
.org-l0 .nd {
  background: linear-gradient(135deg, #0d3d40, #0a5a57);
  border-color: #0d3d40;
  color: #fff;
  min-width: 260px;
}
.org-l0 .nd .cdi span {
  color: rgba(255, 255, 255, 0.7);
}
.org-l0 .lv {
  background: #ffd36b;
  color: #3a2a05;
}
.org-l1 {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  position: relative;
  width: 100%;
}
.org-l1 .ocol {
  position: relative;
  flex: 1;
  min-width: 230px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 22px;
}
.org-l1 .ocol:before {
  content: '';
  position: absolute;
  top: 0;
  left: -7px;
  right: -7px;
  height: 2px;
  background: #9fd3da;
}
.org-l1 .ocol:first-child:before {
  left: 50%;
}
.org-l1 .ocol:last-child:before {
  right: 50%;
}
.org-l1 .ocol:after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 22px;
  background: #9fd3da;
}
.org-l1 .n1 {
  justify-content: flex-start;
}
.org-l1 .n1.pt {
  border-color: #14b3a0;
  box-shadow: 0 0 0 3px rgba(20, 179, 160, 0.12);
}
.org-l1 .obr {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 16px;
  background: #f6f9fa;
}
.org-l1 .obr.pt {
  background: #eef8f7;
}
.org-l1 .n2.pt {
  border-color: #14b3a0;
}
.org-l1 .ol3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 14px;
  border-left: 2px solid #d3e7e9;
  margin-left: 10px;
}
.org-l1 .n3 {
  cursor: pointer;
  justify-content: space-between;
  transition: 0.2s;
  padding: 8px 10px;
}
.org-l1 .n3:hover {
  border-color: #9fd3da;
  transform: translateX(2px);
}
.org-l1 .n3 em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
  background: #fff3d6;
  color: #8a5b00;
  flex: none;
}
.org-l1 .n3.on {
  background: #0d3d40;
  border-color: #0d3d40;
  color: #fff;
  box-shadow: 0 10px 22px -14px rgba(13, 61, 64, 0.9);
}
.org-l1 .n3.on .cdi span {
  color: rgba(255, 255, 255, 0.7);
}
.org-l1 .n3.on .lv {
  background: #5fd6c3;
  color: #0d3d40;
}
.org-l1 .n3.on em {
  background: #ffd36b;
  color: #3a2a05;
}
/* wla */
.org-fx {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 14px;
}
.org-fx > div {
  flex: 1;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f6f9fa;
}
.org-fx span {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a9ba2;
}
.org-fx b {
  display: block;
  font-size: 22px;
  color: #0d3d40;
  margin-top: 3px;
  letter-spacing: -0.02em;
}
.org-fx b small {
  font-size: 11px;
  color: #8a9ba2;
  margin-left: 4px;
  letter-spacing: 0;
}
.org-fx .op {
  flex: none;
  align-self: center;
  font-size: 20px;
  font-weight: 800;
  color: #9fb3b8;
  background: none;
  padding: 0;
}
.org-fx .dk {
  background: linear-gradient(135deg, #0d3d40, #0a5a57);
}
.org-fx .dk span {
  color: #7fe3d6;
}
.org-fx .dk b {
  color: #fff;
}
.org-fx .dk b small {
  color: rgba(255, 255, 255, 0.6);
}
.org-fx .gd {
  background: #fff3d6;
}
.org-fx .gd span {
  color: #8a5b00;
}
.org-fx .gd b {
  color: #8a5b00;
}
.org-tb {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.org-tb .hd,
.org-tb .rw {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) 90px 140px 90px minmax(0, 1.4fr);
  gap: 14px;
  align-items: center;
}
.org-tb .hd {
  padding: 0 14px 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a9ba2;
}
.org-tb .rw {
  padding: 11px 14px;
  border-radius: 13px;
  background: #f7fafa;
  font-size: 12.5px;
  color: #24404a;
}
.org-tb .rw > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.org-tb .rw > div b {
  font-size: 13px;
  color: #142b35;
}
.org-tb .rw .chp {
  font-size: 10px;
}
.org-tb small {
  color: #8a9ba2;
}
.org-tb .bh {
  display: grid;
  grid-template-columns: 1fr 56px;
  gap: 10px;
  align-items: center;
}
.org-tb .bh b {
  text-align: right;
  color: #0d3d40;
}
.org-tb .bb {
  height: 7px;
  border-radius: 99px;
  background: #e3eced;
  overflow: hidden;
}
.org-tb .bb i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #5fd6c3, #0d7d77);
}
/* kpi cascade */
.org-kc {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  position: relative;
}
.org-kc .st {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: phUp 0.4s calc(var(--i) * 0.07s) both;
}
.org-kc .st:not(:last-child):after {
  content: '';
  position: absolute;
  right: -12px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid #9fd3da;
  border-right: 2px solid #9fd3da;
  transform: rotate(45deg);
}
.org-kc .lv {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 99px;
  background: #eaf6f7;
  color: #007a8b;
}
.org-kc .bx {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  background: #f6f9fa;
  border: 1px solid #e9eff0;
}
.org-kc .okw {
  display: flex;
  align-items: center;
  gap: 9px;
}
.org-kc .okw b {
  font-size: 12.5px;
}
.org-kc .okw span {
  font-size: 11px;
}
.org-kc p {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: #0d3d40;
}
.org-kc .fin .lv {
  background: #0d3d40;
  color: #fff;
}
.org-kc .fin .bx {
  background: linear-gradient(135deg, #0d3d40, #0a5a57);
  border-color: #0d3d40;
  color: #fff;
}
.org-kc .fin .cdi b {
  color: #fff;
}
.org-kc .fin .cdi span {
  color: rgba(255, 255, 255, 0.65);
}
.org-kc .ri {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.14);
  color: #ffd36b;
}
.org-kc .ri svg {
  width: 14px;
  height: 14px;
}
.org-kc .ks {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.org-kc .ks div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
}
.org-kc .ks span {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.8);
}
.org-kc .ks b {
  font-size: 12px;
  color: #ffd36b;
  white-space: nowrap;
}
/* jd */
.org-jd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
}
.org-jd .mn {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.org-jd .pp p {
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
  color: #0d3d40;
}
.org-jd ol {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: jd;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.org-jd ol li {
  counter-increment: jd;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 13px;
  background: #f6f9fa;
}
.org-jd ol li:before {
  content: counter(jd);
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex: none;
  font-size: 11.5px;
  font-weight: 800;
  background: #0d3d40;
  color: #fff;
}
.org-jd ol b {
  flex: 1;
  font-size: 13px;
  color: #142b35;
}
.org-jd ol span {
  font-size: 11.5px;
  color: #6b7d87;
  white-space: nowrap;
}
.org-jd .sd {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.org-jd .bx {
  padding: 14px;
  border-radius: 16px;
  background: #f6f9fa;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.org-jd .cr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 26px;
  gap: 10px;
  align-items: center;
}
.org-jd .cr span {
  font-size: 12.5px;
  font-weight: 700;
  color: #24404a;
}
.org-jd .cr b {
  font-size: 11.5px;
  color: #007a8b;
  text-align: right;
}
.org-jd .dots {
  display: flex;
  gap: 3px;
}
.org-jd .dots i {
  width: 14px;
  height: 6px;
  border-radius: 3px;
  background: #dfe9eb;
}
.org-jd .dots i.on {
  background: #14b3a0;
}
.org-jd ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.org-jd ul li {
  position: relative;
  padding-left: 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: #24404a;
}
.org-jd ul li:before {
  content: '';
  position: absolute;
  left: 2px;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e8a317;
}
.tdg .tp-b ol {
  min-width: 0;
}
.tdg .tp-b li span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.org-tree button.nd {
  cursor: pointer;
  transition: 0.2s;
}
.org-tree button.nd:hover {
  border-color: #9fd3da;
}
.org-tree .n1.on,
.org-tree .n2.on {
  background: #0d3d40;
  border-color: #0d3d40;
  color: #fff;
  box-shadow: 0 10px 22px -14px rgba(13, 61, 64, 0.9);
}
.org-tree .n1.on .cdi span,
.org-tree .n2.on .cdi span {
  color: rgba(255, 255, 255, 0.7);
}
.org-tree .n1.on .lv,
.org-tree .n2.on .lv {
  background: #5fd6c3;
  color: #0d3d40;
}
.org-tree .n3 {
  justify-content: flex-start !important;
}
.org-tree .n3 .ri {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #eaf6f7;
  color: #007a8b;
  flex: none;
}
.org-tree .n3 .ri svg {
  width: 13px;
  height: 13px;
}
.org-tree .n3.on .ri {
  background: rgba(255, 255, 255, 0.14);
  color: #5fd6c3;
}
.org-l1 .ocol {
  min-width: 250px;
}
.org-fx .ok {
  background: #e0f6f2;
}
.org-fx .ok span {
  color: #0d7d77;
}
.org-fx .ok b {
  color: #0d5c58;
}
.org-fx .gd b small,
.org-fx .ok b small {
  display: block;
  margin: 2px 0 0;
  font-size: 10.5px;
}
.org-ch .sd-seg {
  flex-wrap: wrap;
}
/* vertical cascade */
.og-kv {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.og-kv .lvr {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 14px;
  animation: phUp 0.4s calc(var(--i) * 0.07s) both;
}
.og-kv .rl {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.og-kv .rl .lv {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 4px 9px;
  border-radius: 99px;
  background: #eaf6f7;
  color: #007a8b;
  white-space: nowrap;
  margin-top: 16px;
}
.og-kv .rl i {
  flex: 1;
  width: 2px;
  margin: 6px 0 -2px;
  background: linear-gradient(#9fd3da, #cfe7e9);
  min-height: 14px;
}
.og-kv .bx {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 16px;
  background: #f6f9fa;
  border: 1px solid #e9eff0;
  margin-bottom: 10px;
}
.og-kv .bx .hd {
  display: flex;
  align-items: center;
  gap: 10px;
}
.og-kv .bx .hd b {
  font-size: 13px;
}
.og-kv .bx .hd span {
  font-size: 11px;
}
.og-kv .ri {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #eaf6f7;
  color: #007a8b;
  flex: none;
}
.og-kv .ri svg {
  width: 14px;
  height: 14px;
}
.og-kv .ks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.og-kv .ks div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e9eff0;
  position: relative;
}
.og-kv .ks span {
  font-size: 11.5px;
  font-weight: 700;
  color: #5b6f78;
  padding-right: 34px;
}
.og-kv .ks b {
  font-size: 15px;
  color: #0d3d40;
}
.og-kv .ks em {
  position: absolute;
  top: 8px;
  right: 9px;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 99px;
  background: #eaf6f7;
  color: #007a8b;
}
.og-kv .lvr.cur .rl .lv {
  background: #0d3d40;
  color: #fff;
}
.og-kv .lvr.cur .bx {
  background: linear-gradient(135deg, #0d3d40, #0a5a57);
  border-color: #0d3d40;
}
.og-kv .lvr.cur .hd b {
  color: #fff;
}
.og-kv .lvr.cur .hd span {
  color: rgba(255, 255, 255, 0.7);
}
.og-kv .lvr.cur .ks div {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}
.og-kv .lvr.cur .ks span {
  color: rgba(255, 255, 255, 0.75);
}
.og-kv .lvr.cur .ks b {
  color: #ffd36b;
}
.og-kv .lvr.cur .ks em {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.og-kv .lvr.cur .ri {
  background: rgba(255, 255, 255, 0.14);
  color: #ffd36b;
}
.og-kv .kd {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0 4px;
}
.og-kv .ogkc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 13px;
  border: 1px dashed #b9dadd;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: #142b35;
  transition: 0.2s;
}
.og-kv .ogkc:hover {
  border-style: solid;
  border-color: #14b3a0;
}
.og-kv .ogkc b {
  font-size: 12.5px;
}
.og-kv .ogkc span {
  font-size: 11px;
  color: #6b7d87;
}
.og-kv .ogkc svg {
  width: 13px;
  height: 13px;
  color: #8a9ba2;
}
.og-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 14px;
  align-items: stretch;
}
.og-row .org-jd {
  grid-template-columns: 1fr;
  gap: 16px;
}
.og-row .org-jd .sd {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.og-row .org-jd .cr {
  grid-template-columns: minmax(0, 1fr) auto 26px;
}
.og-row .org-jd ol li span {
  display: none;
}
.og-row #orgJd .wa-ch,
.og-row #orgWla .wa-ch {
  flex-wrap: wrap;
  gap: 8px;
}
.og-row .org-fx {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.og-row .org-fx .op {
  display: none;
}
.og-row .org-fx > div:nth-of-type(4) {
  grid-column: span 1;
}
.og-row .org-fx > div:nth-of-type(5) {
  grid-column: span 2;
}
.og-row .org-fx b {
  font-size: 20px;
}
.og-row .org-tb .hd,
.og-row .org-tb .rw {
  grid-template-columns: minmax(0, 1.5fr) 110px minmax(0, 1fr);
}
.og-row .org-tb .hd span:nth-child(2),
.og-row .org-tb .hd span:nth-child(4),
.og-row .org-tb .rw > span:nth-child(2),
.og-row .org-tb .rw > span:nth-child(4) {
  display: none;
}
.kp-top {
  display: flex;
}
.kp-row {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.kp-nav {
  position: sticky;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: calc(100vh - 120px);
  overflow: auto;
}
.kp-bod {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0d3d40, #0a5a57);
  color: #fff;
}
.kp-bod .cdi {
  flex: 1;
  min-width: 0;
}
.kp-bod b {
  font-size: 12.5px;
}
.kp-bod span {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}
.kp-bod .lv {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
  background: #ffd36b;
  color: #3a2a05;
}
.kp-g {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 10px;
  border-left: 2px solid #d3e7e9;
  margin-left: 12px;
}
.kp-m {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 12px;
  margin-left: 8px;
  border-left: 2px dashed #e0eced;
}
.kp-r {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 12px;
  margin-left: 8px;
}
.kp-n {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: #24404a;
  transition: 0.18s;
}
.kp-n:hover {
  background: #f2f8f8;
}
.kp-n b {
  flex: 1;
  font-size: 12.5px;
  font-weight: 700;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kp-n.l1 b {
  font-weight: 800;
  color: #0d3d40;
}
.kp-n .lv {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 99px;
  background: #eaf6f7;
  color: #007a8b;
  flex: none;
}
.kp-n em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  color: #8a9ba2;
}
.kp-n.pt {
  background: #eef8f7;
  border-color: #cdeae6;
}
.kp-n.on {
  background: #0d3d40;
  border-color: #0d3d40;
  color: #fff;
}
.kp-n.on b {
  color: #fff;
}
.kp-n.on .lv {
  background: #5fd6c3;
  color: #0d3d40;
}
.kp-n.on em {
  color: #ffd36b;
}
.kpg #orgKpi {
  margin: 0;
}
.kpg .og-kv .bx {
  grid-template-columns: 1fr;
  gap: 12px;
}
.kpg .og-kv .ks span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kp-row2 {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.kp-row2 #orgChart {
  margin: 0;
}
.kp-row2 .org-ch .wa-ch {
  flex-wrap: wrap;
  gap: 10px;
}
.kp-row2 .org-ch .sd-seg button {
  padding: 0 10px;
  font-size: 11.5px;
}
.kp-row2 .org-l1 {
  gap: 10px;
}
.kp-row2 .org-l1 .ocol {
  min-width: 0;
}
.kp-row2 .org-tree .nd {
  padding: 8px 9px;
  gap: 7px;
}
.kp-row2 .org-tree .nd .cdi b {
  font-size: 11.5px;
}
.kp-row2 .org-tree .nd .cdi span {
  font-size: 10.5px;
}
.kp-row2 .org-tree .n1 .pav,
.kp-row2 .org-tree .n2 .pav {
  display: none;
}
.kp-row2 .org-tree .n3 .ri {
  display: none;
}
.kp-row2 .org-l1 .obr {
  padding: 8px;
}
.kp-row2 .org-l1 .ol3 {
  padding-left: 8px;
  margin-left: 4px;
}
.kp-row2 .org-l0 .nd {
  min-width: 220px;
}
.kp-row2 #orgKpi {
  position: sticky;
  top: 12px;
}
.kp-row2 .og-kv .lvr {
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 8px;
}
.kp-row2 .og-kv .rl .lv {
  font-size: 9px;
  padding: 3px 6px;
}
.kp-row2 .og-kv .bx {
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 12px;
}
.kp-row2 .og-kv .ks {
  grid-template-columns: 1fr;
  gap: 5px;
}
.kp-row2 .og-kv .ks div {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
}
.kp-row2 .og-kv .ks span {
  padding-right: 0;
  font-size: 11px;
  white-space: normal;
}
.kp-row2 .og-kv .ks b {
  font-size: 13px;
  white-space: nowrap;
  margin-left: auto;
}
.kp-row2 .og-kv .ks em {
  position: static;
  flex: none;
}
.kp-row2 .og-kv .kd {
  flex-direction: column;
}
.kp-row2 #orgKpi {
  min-width: 0;
  overflow: hidden;
}
.kp-row2 #orgKpi .wa-ch {
  flex-wrap: wrap;
}
.kp-row2 #orgKpi .wa-ch h3 {
  font-size: 15px;
  line-height: 1.35;
}
.kp-row2 .og-kv .lvr > * {
  min-width: 0;
}
.kp-row2 .og-kv .bx .hd .cdi {
  min-width: 0;
}
.kp-row2 .og-kv .bx .hd b {
  display: block;
  white-space: normal;
}
.kp-row2 .og-kv .ogkc {
  width: 100%;
  flex-wrap: wrap;
}
.kp-row2 .org-tree .nd .cdi b {
  white-space: normal !important;
  overflow: visible !important;
}
.kp-row2 #orgKpi .wa-ch h3 {
  white-space: normal !important;
  overflow: visible;
}
.og-row {
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) !important;
}
.og-row .org-fx {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
.og-row .org-fx > div:nth-of-type(5) {
  grid-column: span 1 !important;
}
.og-row .org-tb .hd,
.og-row .org-tb .rw {
  grid-template-columns: minmax(0, 1.8fr) 80px 120px 70px minmax(0, 1.3fr) !important;
}
.og-row .org-tb .hd span,
.og-row .org-tb .rw > span {
  display: block !important;
}
.og-row .org-tb .rw > span.bh {
  display: grid !important;
}
.kp-row2 {
  align-items: stretch !important;
}
.kp-row2 #orgKpi {
  position: relative !important;
  top: auto !important;
  display: flex;
  flex-direction: column;
}
.kp-row2 #orgKpi .og-kv {
  flex: 1 1 auto;
  contain: size;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  margin-right: -4px;
}
.kp-row2 .og-kv .ks div {
  min-width: 0;
}
.kp-row2 .og-kv .ks span {
  min-width: 0;
  flex: 1;
}
.kp-row2 .og-kv .bx {
  min-width: 0;
  overflow: hidden;
}
.kp-row2 #orgKpi .og-kv {
  position: relative;
  scroll-behavior: smooth;
}
.wx-g {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 14px;
  align-items: stretch;
}
.wx-g > div > section {
  height: 100%;
  box-sizing: border-box;
}
.wx-c .wa-ch {
  flex-wrap: wrap;
  gap: 8px;
}
.wx-lg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.wx-lg span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #5b6f78;
}
.wx-lg i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.wx-lg.c {
  justify-content: center;
  margin-top: 6px;
}
.wx-svg {
  width: 100%;
  height: auto;
  display: block;
  font-family: inherit;
}
.wx-svg .gl {
  stroke: #eef3f4;
  stroke-width: 1;
}
.wx-svg .ax {
  font-size: 10px;
  fill: #8a9ba2;
  font-weight: 600;
}
.wx-svg .lb {
  font-size: 11.5px;
  fill: #24404a;
  font-weight: 700;
}
.wx-svg .in {
  font-size: 10px;
  fill: #fff;
  font-weight: 800;
}
.wx-svg .vl {
  font-size: 11px;
  fill: #0d3d40;
  font-weight: 800;
}
.wx-svg .at {
  font-size: 10.5px;
  fill: #6b7d87;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.wx-bar {
  animation: wxIn 0.7s calc(var(--i) * 0.06s) cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transform-box: fill-box;
  transform-origin: left;
}
@keyframes wxIn {
  from {
    transform: scaleX(0);
  }
}
.wx-svg .qd {
  fill: rgba(232, 176, 75, 0.1);
  stroke: rgba(232, 176, 75, 0.4);
  stroke-dasharray: 4 4;
}
.wx-svg .qt {
  font-size: 10.5px;
  fill: #b7801f;
  font-weight: 800;
}
.wx-svg .rf {
  stroke: #c8d6d9;
  stroke-dasharray: 4 4;
}
.wx-bb circle {
  fill-opacity: 0.82;
  stroke: #fff;
  stroke-width: 1.5;
  transition: 0.2s;
  cursor: pointer;
}
.wx-bb:hover circle {
  fill-opacity: 1;
  stroke: #0d3d40;
}
.wx-bb {
  animation: phUp 0.5s calc(var(--i) * 0.03s) both;
}
.wx-svg .bl {
  font-size: 9.5px;
  font-weight: 800;
  fill: #24404a;
}
.wx-hm {
  display: grid;
  grid-template-columns: 130px repeat(3, minmax(0, 1fr));
  gap: 6px;
  align-items: center;
}
.wx-hm .ch {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #8a9ba2;
  text-align: center;
}
.wx-hm .rh {
  font-size: 12px;
  font-weight: 700;
  color: #24404a;
}
.wx-hm .cl {
  height: 42px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  transition: transform 0.2s;
}
.wx-hm .cl:hover {
  transform: scale(1.04);
}
.wx-tm {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 300px;
}
.wx-tm .rw {
  display: flex;
  gap: 4px;
  min-height: 0;
}
.wx-tm .tm {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  padding: 12px;
  border-radius: 12px;
  color: #fff;
  min-width: 0;
  overflow: hidden;
  transition: filter 0.2s;
}
.wx-tm .tm:hover {
  filter: brightness(1.08);
}
.wx-tm .tm b {
  font-size: 13px;
  line-height: 1.25;
}
.wx-tm .tm span {
  font-size: 11px;
  opacity: 0.85;
}
.wx-tm .tm em {
  position: absolute;
  top: 10px;
  right: 10px;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.2);
}
.wx-dn {
  display: flex;
  align-items: center;
  gap: 18px;
}
.wx-dn svg {
  width: 190px;
  flex: none;
}
.wx-dn .dv {
  font-size: 26px;
  font-weight: 800;
  fill: #0d3d40;
}
.wx-dn .dl {
  font-size: 10.5px;
  fill: #6b7d87;
  font-weight: 700;
}
.wx-dn .ls {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wx-dn .ls div {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
}
.wx-dn .ls i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.wx-dn .ls span {
  font-size: 12.5px;
  font-weight: 700;
  color: #24404a;
}
.wx-dn .ls b {
  font-size: 15px;
  color: #0d3d40;
}
.wx-dn .ls em {
  grid-column: 2/4;
  font-style: normal;
  font-size: 11px;
  color: #8a9ba2;
}
.wx-svg .ln {
  fill: none;
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.wx-svg .ln.s {
  stroke: #0d3d40;
}
.wx-svg .ln.d {
  stroke: #e8b04b;
}
.wx-svg .pt {
  fill: #fff;
  stroke: #e8b04b;
  stroke-width: 2;
}
.wx-svg .gap {
  fill: rgba(232, 176, 75, 0.14);
}
.wx-svg .ev line {
  stroke: #14b3a0;
  stroke-dasharray: 2 3;
}
.wx-svg .ev text {
  font-size: 9px;
  font-weight: 800;
  fill: #007a8b;
}
.wx-svg .gt {
  font-size: 11px;
  font-weight: 800;
  fill: #b7801f;
}
.wx-tb {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wx-tb .hd,
.wx-tb .rw {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr) minmax(0, 1.4fr) 70px minmax(
      0,
      1.3fr
    ) 80px 80px;
  gap: 12px;
  align-items: center;
}
.wx-tb .hd {
  padding: 0 12px 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a9ba2;
}
.wx-tb .rw {
  padding: 10px 12px;
  border-radius: 12px;
  background: #f7fafa;
  font-size: 12.5px;
  color: #24404a;
}
.wx-tb .rw b {
  font-size: 13px;
  color: #142b35;
}
.wx-tb .rw > span:nth-child(3) {
  display: flex;
  align-items: center;
  gap: 6px;
}
.wx-tb .rw > span i {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  flex: none;
}
.wx-tb .ut {
  display: grid;
  grid-template-columns: 1fr 44px;
  gap: 8px;
  align-items: center;
}
.wx-tb .ut .bb {
  height: 7px;
  border-radius: 99px;
  background: #e3eced;
  overflow: hidden;
}
.wx-tb .ut .bb i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #5fd6c3, #0d7d77);
}
.wx-tb .ut .bb i.hi {
  background: linear-gradient(90deg, #ffd27a, #c88a12);
}
.wx-tb .ut b {
  text-align: right;
  color: #0d3d40;
}
.wx-tb .ut b.hi {
  color: #b7801f;
}
.wx-tb .pos {
  font-weight: 800;
  color: #b7801f;
}
.wx-tb .neg {
  font-weight: 800;
  color: #007a8b;
}
.wx-rc {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.wx-rc div {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.wx-rc span {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffe2a3;
}
.wx-rc b {
  display: block;
  font-size: 24px;
  margin: 2px 0;
}
.wx-rc em {
  font-style: normal;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.75);
}
.sd-cat .ch em.pr {
  width: auto !important;
  padding: 0 8px;
  border-radius: 99px !important;
}
/* strategic initiatives */
.si-cs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.si-c {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid #e3eef0;
  background: #fff;
  font: inherit;
  text-align: left;
  color: #142b35;
  cursor: pointer;
  transition: 0.2s;
  box-shadow: 0 14px 30px -24px rgba(13, 61, 64, 0.5);
}
.si-c:hover {
  transform: translateY(-2px);
}
.si-c.on {
  background: linear-gradient(135deg, #0d3d40, #0a5a57);
  border-color: #0d3d40;
  color: #fff;
}
.si-c .h {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.si-c .st {
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 99px;
}
.si-c .st.ok {
  background: #e0f6f2;
  color: #0d7d77;
}
.si-c .st.warn {
  background: #fff3d6;
  color: #8a5b00;
}
.si-c > b {
  font-size: 15px;
  line-height: 1.3;
  min-height: 40px;
}
.si-c .o {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #5b6f78;
}
.si-c.on .o {
  color: rgba(255, 255, 255, 0.75);
}
.si-c.on .chp {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}
.si-c .kcpr {
  display: flex;
  align-items: center;
  gap: 8px;
}
.si-c .kcpr > div {
  flex: 1;
  height: 6px;
  border-radius: 99px;
  background: #e6eef0;
  overflow: hidden;
}
.si-c .kcpr i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #5fd6c3, #0d7d77);
}
.si-c .kcpr em {
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
}
.si-c.on .kcpr > div {
  background: rgba(255, 255, 255, 0.15);
}
.si-c.on .kcpr i {
  background: #ffd36b;
}
.si-c .f {
  display: flex;
  gap: 12px;
  font-size: 11.5px;
  color: #6b7d87;
  padding-top: 8px;
  border-top: 1px solid #eef3f4;
}
.si-c .f b {
  font-size: 15px;
  color: #0d3d40;
  margin-right: 3px;
}
.si-c.on .f {
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
}
.si-c.on .f b {
  color: #ffd36b;
}
.si-det {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.si-hd {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
}
.si-hd .t {
  flex: 1;
  min-width: 0;
}
.si-hd h2 {
  margin: 10px 0 6px;
  font-size: 24px;
  color: #0d3d40;
}
.si-hd p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.6;
  color: #3d5560;
  max-width: 760px;
}
.si-hd .chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.si-hd .o {
  display: flex;
  align-items: center;
  gap: 10px;
}
.si-hd .pg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.si-hd .pg > span {
  font-size: 11px;
  font-weight: 800;
  color: #8a9ba2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.si-g {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}
.si-k {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.si-k > div {
  padding: 12px 14px;
  border-radius: 14px;
  background: #f6f9fa;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
}
.si-k span {
  font-size: 12.5px;
  font-weight: 700;
  color: #5b6f78;
}
.si-k b {
  font-size: 18px;
  color: #0d3d40;
  text-align: right;
}
.si-k .kcpr {
  grid-column: 1/3;
  display: flex;
  align-items: center;
  gap: 8px;
}
.si-k .kcpr > div {
  flex: 1;
  height: 7px;
  border-radius: 99px;
  background: #e3eced;
  overflow: hidden;
}
.si-k .kcpr i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #5fd6c3, #0d7d77);
}
.si-k .kcpr em {
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  color: #0d7d77;
}
.si-ms {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: 4px;
}
.si-ms > div {
  position: relative;
  display: grid;
  grid-template-columns: 22px 80px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 9px 0;
}
.si-ms > div:not(:last-child):after {
  content: '';
  position: absolute;
  left: 10px;
  top: 30px;
  bottom: -10px;
  width: 2px;
  background: #e3eced;
}
.si-ms > div.dn:not(:last-child):after {
  background: #14b3a0;
}
.si-ms i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid #cfe0e2;
  background: #fff;
  color: #fff;
  z-index: 1;
}
.si-ms i svg {
  width: 11px;
  height: 11px;
}
.si-ms .dn i {
  background: #14b3a0;
  border-color: #14b3a0;
}
.si-ms span {
  font-size: 11.5px;
  font-weight: 800;
  color: #8a9ba2;
}
.si-ms b {
  font-size: 13px;
  color: #142b35;
}
.si-ms .dn b {
  color: #5b6f78;
}
.si-wf {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.si-wf .hd,
.si-wf .rw {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr) 54px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.si-wf .hd {
  padding: 0 12px 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a9ba2;
}
.si-wf .rw {
  padding: 10px 12px;
  border-radius: 12px;
  background: #f7fafa;
  font-size: 12px;
  color: #3d5560;
}
.si-wf .rw b {
  font-size: 13px;
  color: #142b35;
}
.si-wf .rw > span:nth-child(2) {
  display: flex;
  align-items: center;
  gap: 6px;
}
.si-wf .rw > span i {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  flex: none;
}
.si-wf strong {
  font-size: 15px;
  color: #0d3d40;
  text-align: center;
}
.si-wf .sp {
  display: grid;
  grid-template-columns: 1fr 46px;
  gap: 8px;
  align-items: center;
}
.si-wf .sp > div {
  display: flex;
  gap: 2px;
  height: 8px;
}
.si-wf .sp i {
  border-radius: 3px;
}
.si-wf .sp i.a {
  background: #14b3a0;
}
.si-wf .sp i.b {
  background: #e8b04b;
}
.si-wf .sp em {
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  color: #5b6f78;
  text-align: right;
}
.si-fm {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.si-fm > div {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 30px;
  gap: 10px;
  align-items: center;
}
.si-fm span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: #24404a;
}
.si-fm span i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
}
.si-fm .bb {
  height: 8px;
  border-radius: 99px;
  background: #eef3f4;
  overflow: hidden;
}
.si-fm .bb i {
  display: block;
  height: 100%;
  border-radius: 99px;
}
.si-fm b {
  font-size: 14px;
  color: #0d3d40;
  text-align: right;
}
.si-rk {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.si-rk div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  background: #f7fafa;
}
.si-rk b {
  font-size: 12.5px;
  color: #142b35;
}
.si-rk .lv {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 99px;
  background: #eaf6f7;
  color: #007a8b;
}
.si-rk .lv.hi {
  background: #fff3d6;
  color: #8a5b00;
}
.wx-a3 {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 12px;
  margin-top: 16px;
}
.wa3 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 20px;
  background: #fff;
  color: #142b35;
  animation: phUp 0.45s both;
}
.wa3.p3 {
  margin-top: 12px;
}
.wa3 .ph {
  display: flex;
  align-items: center;
  gap: 12px;
}
.wa3 .ph .no {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex: none;
  font-size: 15px;
  font-weight: 800;
  background: linear-gradient(135deg, #ffd36b, #e8a317);
  color: #3a2a05;
}
.wa3 .ph b {
  display: block;
  font-size: 15px;
  color: #0d3d40;
}
.wa3 .ph span {
  font-size: 11.5px;
  color: #6b7d87;
}
.wa3 .lw {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.wa3 .lw .r {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 1fr) 66px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  background: #f6f9fa;
  animation: phUp 0.35s calc(var(--i) * 0.04s) both;
}
.wa3 .lw .cdi b {
  font-size: 12.5px;
}
.wa3 .lw .cdi span {
  font-size: 10.5px;
}
.wa3 .lw .av {
  display: flex;
  padding-left: 6px;
}
.wa3 .lw .av > * {
  margin-left: -6px;
  box-shadow: 0 0 0 2px #f6f9fa;
  border-radius: 50%;
}
.wa3 .lw .u {
  display: grid;
  grid-template-columns: 1fr 36px;
  gap: 6px;
  align-items: center;
}
.wa3 .lw .bb {
  position: relative;
  height: 7px;
  border-radius: 99px;
  background: #e3eced;
}
.wa3 .lw .bb i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #9fd9d1, #14b3a0);
}
.wa3 .lw .u b {
  font-size: 12px;
  color: #0d3d40;
  text-align: right;
}
.wa3 .lw .fr {
  font-size: 11.5px;
  font-weight: 800;
  color: #0d7d77;
  text-align: right;
  padding: 3px 0;
  border-radius: 99px;
  background: #e0f6f2;
  text-align: center;
}
.wa3 .cm {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wa3 .cm .hd,
.wa3 .cm .rw {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(5, minmax(0, 0.55fr)) 44px;
  gap: 6px;
  align-items: center;
}
.wa3 .cm .hd span {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a9ba2;
  text-align: center;
}
.wa3 .cm .rw {
  padding: 6px 8px;
  border-radius: 11px;
  background: #f6f9fa;
  animation: phUp 0.35s calc(var(--i) * 0.04s) both;
}
.wa3 .cm .rw b {
  font-size: 12px;
}
.wa3 .cm .c {
  display: grid;
  place-items: center;
}
.wa3 .cm .c i {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  background: rgba(13, 61, 64, var(--o));
  color: #fff;
}
.wa3 .cm .c i.z {
  background: transparent;
  color: #c3d2d5;
}
.wa3 .cm strong {
  font-size: 13px;
  text-align: center;
  color: #0d3d40;
}
.wa3 .cm .rw.lo {
  background: #fff8e8;
  box-shadow: inset 0 0 0 1px #f3dca4;
}
.wa3 .cm .rw.lo strong {
  color: #b7801f;
}
.wa3 .cm .rw.lo .c i:not(.z) {
  background: rgba(200, 138, 18, var(--o));
}
.wa3 .wsk {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.wa3 .wsc {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background: #f6f9fa;
  animation: phUp 0.4s calc(var(--i) * 0.06s) both;
}
.wa3 .wsc .sh b {
  font-size: 13px;
  color: #0d3d40;
}
.wa3 .wnd {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.wa3 .wnd > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 2px 8px;
  align-items: center;
}
.wa3 .wnd span {
  grid-column: 1/3;
  font-size: 11px;
  font-weight: 700;
  color: #3d5560;
}
.wa3 .wnd .bb {
  display: flex;
  gap: 2px;
  height: 7px;
}
.wa3 .wnd .bb i {
  border-radius: 3px;
}
.wa3 .wnd .bb i.a {
  background: #14b3a0;
}
.wa3 .wnd .bb i.b {
  background: #e8b04b;
}
.wa3 .wnd em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  color: #0d7d77;
  text-align: right;
}
.wa3 .wnd em.g {
  color: #b7801f;
}
.wa3 .wpp {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px dashed #d3e2e4;
}
.wa3 .wpp .wlb {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #007a8b;
}
.wa3 .wpp > div {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.wa3 .wpp .cdi b {
  font-size: 11.5px;
}
.wa3 .wpp .cdi span {
  font-size: 10px;
}
.wa3 .wpp em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
  background: #0d3d40;
  color: #ffd36b;
}
.wa3 > .ins {
  margin-top: auto;
}
.wmk {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: block !important;
}
.wmk .wmh {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffd36b;
  margin-bottom: 10px;
}
.wmk .wmh svg {
  width: 12px;
  height: 12px;
}
.wmg {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.wmc {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.wmc > b {
  font-size: 12px;
  color: #fff;
  margin-bottom: 2px;
}
.wj {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
}
.wj span {
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
}
.wj em {
  font-style: normal;
  font-size: 10.5px;
  color: #7fe3d6;
}
.sdg .ins .wj em {
  width: auto !important;
  height: auto !important;
  display: block !important;
  background: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #7fe3d6 !important;
  text-align: left;
}
.sdg .ins .wmk > div,
.sdg .ins .wmc > div {
  display: flex;
}
.sdg .ins .wj {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding: 8px 10px !important;
}
.sdg .ins .wmg {
  display: grid !important;
}
.sdg .ins .wmc {
  display: flex !important;
  flex-direction: column !important;
  padding: 12px !important;
}
.tq {
  background: #f3f7f8 !important;
}
.tq-hd {
  position: relative;
  padding: 24px 26px 20px;
  background: radial-gradient(120% 160% at 0% 0%, #0f5a57, #0d3d40 50%, #082a2d);
  color: #fff;
  overflow: hidden;
}
.tq-hd:after {
  content: '';
  position: absolute;
  right: -60px;
  top: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(95, 214, 195, 0.25), transparent 70%);
}
.tq-hd .dr-x {
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 2;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 0;
  border-radius: 10px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.tq-id {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}
.tq-id .av {
  padding: 3px;
  border-radius: 50%;
  background: conic-gradient(#e8b04b, #5fd6c3, #e8b04b);
  flex: none;
}
.tq-id .ey {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7fe3d6;
}
.tq-id b {
  display: block;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 2px 0;
}
.tq-id em {
  display: block;
  font-style: normal;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 8px;
}
.tq-id .chips {
  display: flex;
  gap: 6px;
}
.tq-hs {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 18px;
}
.tq-hs div {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.tq-hs span {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.tq-hs b {
  display: block;
  font-size: 22px;
  font-weight: 800;
  margin: 2px 0 0;
}
.tq-hs em {
  font-style: normal;
  font-size: 11px;
  color: #7fe3d6;
}
.tq-tabs {
  padding: 14px 26px 0;
}
.tq-tabs .sd-seg {
  display: inline-flex;
  background: #fff;
  box-shadow: 0 8px 20px -16px rgba(13, 61, 64, 0.5);
}
.tq-tabs .sd-seg button {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
}
.tq-tabs .sd-seg svg {
  width: 13px;
  height: 13px;
}
.tq-b {
  padding: 14px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: phUp 0.3s both;
}
.tq-card {
  padding: 16px 18px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 30px -26px rgba(13, 61, 64, 0.5);
}
.tq-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.tq-h h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14.5px;
  color: #0d3d40;
}
.tq-h h3 > svg {
  width: 15px;
  height: 15px;
  color: #007a8b;
}
.tq-lk {
  display: flex;
  align-items: center;
  gap: 3px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
  color: #007a8b;
  cursor: pointer;
}
.tq-lk svg {
  width: 12px;
  height: 12px;
}
.tq-g2 {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 14px;
}
.tq-g3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.tq-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.tq-info > div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 13px;
  background: #f6f9fa;
}
.tq-info .ii {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #007a8b;
  flex: none;
  box-shadow: inset 0 0 0 1px #e3eef0;
}
.tq-info .ii svg {
  width: 14px;
  height: 14px;
}
.tq-info span {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a9ba2;
}
.tq-info b {
  display: block;
  font-size: 13px;
  color: #142b35;
  margin-top: 1px;
}
.tq-ai {
  position: relative;
  padding: 16px 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, #0d3d40, #0a5a57);
  color: #fff;
  overflow: hidden;
}
.tq-ai:after {
  content: '';
  position: absolute;
  right: -40px;
  top: -40px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 211, 107, 0.25), transparent 70%);
}
.tq-ai .tq-h h3 {
  color: #fff;
}
.tq-ai .ao {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ffd36b, #e8a317);
  color: #3a2a05;
}
.tq-ai .ao svg {
  width: 13px;
  height: 13px;
}
.tq-ai p {
  position: relative;
  z-index: 1;
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}
.tq-sw {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.tq-sw > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
}
.tq-sw span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7fe3d6;
}
.tq-sw .d span {
  color: #ffd36b;
}
.tq-sw b {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
}
.tq-sw b svg {
  width: 11px;
  height: 11px;
  color: #5fd6c3;
  flex: none;
}
.tq-sw .d b svg {
  color: #ffd36b;
}
.tq-cm {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tq-cm > svg {
  flex: none;
}
.tq-cm > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tq-cm > div > div {
  display: flex;
  justify-content: space-between;
  padding: 7px 9px;
  border-radius: 10px;
  background: #f6f9fa;
  font-size: 11.5px;
  font-weight: 700;
  color: #3d5560;
}
.tq-cm b {
  color: #007a8b;
}
.tq-kp {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tq-kp > div b {
  font-size: 30px;
  color: #0d3d40;
  letter-spacing: -0.02em;
}
.tq-kp > div span {
  margin-left: 6px;
  font-size: 11.5px;
  color: #8a9ba2;
}
.tq-kp .sdb {
  height: 70px;
}
.tq-ring {
  --c: #14b3a0;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), #e6eef0 0);
}
.tq-ring b {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 800;
  color: #0d3d40;
}
.tq-ring.lo {
  --c: #e8b04b;
}
.tq-ip {
  display: flex;
  align-items: center;
  gap: 14px;
}
.tq-ip span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: #8a9ba2;
}
.tq-ip b {
  font-size: 13.5px;
  color: #0d3d40;
}
.tq-tl {
  display: flex;
  flex-direction: column;
}
.tq-tl > div {
  position: relative;
  display: grid;
  grid-template-columns: 18px 80px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
}
.tq-tl > div:not(:last-child):after {
  content: '';
  position: absolute;
  left: 8px;
  top: 32px;
  bottom: -10px;
  width: 2px;
  background: #e3eced;
}
.tq-tl i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid #cfe0e2;
  background: #fff;
  z-index: 1;
}
.tq-tl .on i {
  border-color: #14b3a0;
  background: #14b3a0;
  box-shadow: 0 0 0 4px rgba(20, 179, 160, 0.15);
}
.tq-tl .d {
  font-size: 12px;
  font-weight: 800;
  color: #8a9ba2;
}
.tq-tl b {
  display: block;
  font-size: 14px;
  color: #142b35;
}
.tq-tl em {
  font-style: normal;
  font-size: 12px;
  color: #6b7d87;
}
.tq-kk {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}
.tq-kk .kl {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tq-kk .kl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 28px 64px;
  gap: 12px;
  align-items: center;
  padding: 9px 12px;
  border-radius: 12px;
  background: #f6f9fa;
}
.tq-kk .kl span {
  font-size: 13px;
  font-weight: 700;
  color: #24404a;
}
.tq-kk .kl b {
  font-size: 12px;
  color: #007a8b;
}
.tq-kk .dots {
  display: flex;
  gap: 3px;
}
.tq-kk .dots i {
  width: 18px;
  height: 7px;
  border-radius: 3px;
  background: #dfe9eb;
}
.tq-kk .dots i.on {
  background: #14b3a0;
}
.tq-kk .dots i.std {
  box-shadow: 0 0 0 1.5px #e8a317;
}
.tq-st {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.tq-st div {
  padding: 14px 16px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 30px -26px rgba(13, 61, 64, 0.5);
}
.tq-st span {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a9ba2;
}
.tq-st b {
  display: block;
  font-size: 24px;
  color: #0d3d40;
  margin: 4px 0 2px;
}
.tq-st em {
  font-style: normal;
  font-size: 11.5px;
  color: #6b7d87;
}
.tq-bars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  height: 200px;
  align-items: end;
}
.tq-bars > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  justify-content: flex-end;
}
.tq-bars i {
  width: 60%;
  border-radius: 8px 8px 3px 3px;
  background: #cfeae7;
  animation: kiUp 0.6s both;
  transform-origin: bottom;
}
.tq-bars i.on {
  background: linear-gradient(180deg, #14b3a0, #0d3d40);
}
.tq-bars b {
  font-size: 12px;
  color: #0d3d40;
}
.tq-bars span {
  font-size: 11.5px;
  font-weight: 700;
  color: #8a9ba2;
}
.tq-idp {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 16px;
}
.tq-idp .ls {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tq-idp .ls > div {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 40px;
  gap: 12px;
  align-items: center;
}
.tq-idp span {
  font-size: 12.5px;
  font-weight: 700;
  color: #24404a;
}
.tq-idp .bb {
  height: 8px;
  border-radius: 99px;
  background: #e6eef0;
  overflow: hidden;
}
.tq-idp .bb i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #5fd6c3, #0d7d77);
}
.tq-idp b {
  font-size: 12.5px;
  color: #0d3d40;
  text-align: right;
}
.tq-id .av {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
}
.tq-id .av .pav {
  position: static !important;
  width: 76px !important;
  height: 76px !important;
  margin: 0 !important;
  border: 3px solid #0d3d40 !important;
}
.tq-cm {
  flex-direction: column;
  align-items: stretch !important;
}
.tq-cm > svg {
  width: 150px !important;
  height: auto;
  align-self: center;
}
.tq-cm > div {
  flex-direction: row !important;
  flex-wrap: wrap;
}
.tq-cm > div > div {
  flex: 1 1 calc(50% - 6px);
  min-width: 0;
}
.tq-g3 > .tq-card {
  display: flex;
  flex-direction: column;
}
.tq-kp,
.tq-ip {
  flex: 1;
}
.tq-ip {
  justify-content: center;
}
.tq-cm > div {
  flex-direction: column !important;
  flex-wrap: nowrap;
}
.tq-cm > div > div {
  flex: none !important;
  gap: 8px;
}
.tq-kp .sdb {
  flex: 1;
  height: auto !important;
  min-height: 90px;
}
.kdv {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.wa3 .ins {
  overflow: visible !important;
  flex: none;
}
.kdv .r {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 1fr) 30px 76px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  background: #f6f9fa;
  animation: phUp 0.35s calc(var(--i) * 0.04s) both;
}
.kdv .cdi b {
  font-size: 12.5px;
}
.kdv .cdi span {
  font-size: 10.5px;
}
.kdv .av {
  display: flex;
  padding-left: 6px;
}
.kdv .av > * {
  margin-left: -6px;
  box-shadow: 0 0 0 2px #f6f9fa;
  border-radius: 50%;
}
.kdv .bb {
  height: 8px;
  border-radius: 99px;
  background: #e3eced;
  overflow: hidden;
}
.kdv .bb i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #14b3a0, #0d3d40);
}
.kdv .bb i.lo {
  background: linear-gradient(90deg, #ffd27a, #c88a12);
}
.kdv .n {
  font-size: 13px;
  color: #0d3d40;
  text-align: right;
}
.kdv em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  text-align: center;
  padding: 3px 0;
  border-radius: 99px;
  background: #e0f6f2;
  color: #0d7d77;
}
.kdv em.lo {
  background: #fff3d6;
  color: #8a5b00;
}
.kc2 {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.kc2 .hd,
.kc2 .rw {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) 46px 70px;
  gap: 10px;
  align-items: center;
}
.kc2 .hd {
  padding: 0 10px 2px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a9ba2;
}
.kc2 .hd span:nth-child(n + 4) {
  text-align: center;
}
.kc2 .rw {
  padding: 9px 10px;
  border-radius: 12px;
  background: #f6f9fa;
  animation: phUp 0.35s calc(var(--i) * 0.04s) both;
}
.kc2 .rw b {
  font-size: 12.5px;
}
.kc2 .rw.hot {
  background: #fff8e8;
  box-shadow: inset 0 0 0 1px #f3dca4;
}
.kc2 .br {
  display: grid;
  grid-template-columns: 1fr 38px;
  gap: 6px;
  align-items: center;
}
.kc2 .br i {
  display: block;
  height: 8px;
  border-radius: 99px;
  background: linear-gradient(90deg, #5fd6c3, #0d7d77);
}
.kc2 .br.q i {
  background: linear-gradient(90deg, #ffd27a, #c88a12);
}
.kc2 .br em {
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  color: #0d3d40;
  text-align: right;
}
.kc2 strong {
  font-size: 13px;
  color: #0d3d40;
  text-align: center;
}
.kc2 .rt {
  font-size: 11.5px;
  font-weight: 800;
  text-align: center;
  padding: 3px 0;
  border-radius: 99px;
  background: #e0f6f2;
  color: #0d7d77;
}
.kc2 .rt.hot {
  background: #c88a12;
  color: #fff;
}
.ka {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ka .it {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f6f9fa;
  border-left: 0;
  animation: phUp 0.35s calc(var(--i) * 0.05s) both;
}
.ka .ai2 {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #eaf6f7;
  color: #007a8b;
}
.ka .ai2 svg {
  width: 15px;
  height: 15px;
}
.ka .hi .ai2 {
  background: #0d3d40;
  color: #ffd36b;
}
.ka .md .ai2 {
  background: #fff3d6;
  color: #b7801f;
}
.ka .tx b {
  display: block;
  font-size: 13.5px;
  color: #0d3d40;
}
.ka .tx span {
  font-size: 12px;
  color: #5b6f78;
}
.ka .mt {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.ka .mt span {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #6b7d87;
  white-space: nowrap;
}
.ka .mt svg {
  width: 11px;
  height: 11px;
}
.ka .pr {
  padding: 2px 9px;
  border-radius: 99px;
  background: #eaf6f7;
  color: #007a8b !important;
  font-weight: 800 !important;
}
.ka .hi .pr {
  background: #0d3d40;
  color: #fff !important;
}
.ka .md .pr {
  background: #fff3d6;
  color: #8a5b00 !important;
}
.og-row .otb4 .hd,
.og-row .otb4 .rw {
  grid-template-columns: minmax(0, 2fr) 140px 100px minmax(0, 1.4fr) !important;
}
.og-upb {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 16px;
  padding: 16px !important;
}
.og-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 240px;
  border: 2px dashed #cfe0e2;
  border-radius: 18px;
  background: #f8fbfb;
  cursor: pointer;
  transition: 0.2s;
  text-align: center;
  padding: 20px;
}
.og-drop:hover,
.og-drop.ov {
  border-color: #e8b04b;
  background: #fffaf0;
}
.og-drop .di {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ffd36b, #e8a317);
  color: #3a2a05;
}
.og-drop .di svg {
  width: 22px;
  height: 22px;
}
.og-drop b {
  font-size: 14px;
  color: #0d3d40;
}
.og-drop .chips {
  display: flex;
  gap: 6px;
}
.og-req {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.og-req > div:not(.og-ub) {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f6f9fa;
  border: 1px solid #e9eff0;
}
.og-req .ri {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #8a9ba2;
  box-shadow: inset 0 0 0 1px #e3eef0;
}
.og-req .ri svg {
  width: 14px;
  height: 14px;
}
.og-req .ok {
  background: #eef8f7 !important;
  border-color: #cdeae6 !important;
}
.og-req .ok .ri {
  background: #14b3a0;
  color: #fff;
  box-shadow: none;
}
.og-req .cdi b {
  font-size: 13px;
}
.og-req .cdi span {
  font-size: 11.5px;
}
.og-ub {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}
.og-ub .tg-btn[disabled] {
  opacity: 0.45;
  pointer-events: none;
}
.ai-r2 {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.acp,
.aef {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.acp .r {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 44px;
  gap: 12px;
  align-items: center;
  padding: 9px 12px;
  border-radius: 12px;
  background: #f6f9fa;
  animation: phUp 0.35s calc(var(--i) * 0.04s) both;
}
.acp .t b,
.aef .aenm b {
  display: block;
  font-size: 12.5px;
  color: #142b35;
}
.acp .t span,
.aef .aenm span {
  font-size: 10.5px;
  color: #6b7d87;
}
.acp .bb,
.aef .bb {
  height: 8px;
  border-radius: 99px;
  background: #e3eced;
  overflow: hidden;
}
.acp .bb i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #ffd27a, #c88a12);
}
.acp strong {
  font-size: 13px;
  color: #8a5b00;
  text-align: right;
}
.atk {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.atk .hd,
.atk .rw {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 70px;
  gap: 10px;
  align-items: center;
}
.atk .hd {
  padding: 0 12px 2px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a9ba2;
}
.atk .hd span:not(:first-child) {
  text-align: right;
}
.atk .rw {
  padding: 8px 12px;
  border-radius: 12px;
  background: #f6f9fa;
  animation: phUp 0.35s calc(var(--i) * 0.04s) both;
}
.atk .t b {
  display: block;
  font-size: 12.5px;
  color: #142b35;
  text-decoration: line-through;
  text-decoration-color: rgba(229, 72, 77, 0.5);
}
.atk .t span {
  font-size: 10.5px;
  color: #6b7d87;
}
.atk .pc {
  justify-self: end;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 99px;
  background: #fdecee;
  color: #c62839;
}
.atk .pc.hi {
  background: #e5484d;
  color: #fff;
}
.atk strong {
  font-size: 13px;
  color: #0d3d40;
  text-align: right;
}
.aio {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.aio .sd-seg {
  align-self: flex-start;
  flex-wrap: wrap;
}
.aio .sd-seg button {
  font-size: 11.5px;
  padding: 0 10px;
}
.aot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  overflow-x: auto;
}
.aot .b0 {
  padding: 8px 16px;
  border-radius: 12px;
  background: #0d3d40;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  position: relative;
}
.aot .b0:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 2px;
  height: 14px;
  background: #cfe0e2;
}
.aot .l1 {
  display: flex;
  gap: 8px;
  width: 100%;
  align-items: flex-start;
  padding-top: 12px;
  border-top: 2px solid #cfe0e2;
}
.aot .c {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.aot .n1,
.aot .n2 {
  padding: 7px 9px;
  border-radius: 10px;
  border: 1px solid #e3eef0;
  background: #fff;
  font-size: 11px;
  font-weight: 800;
  color: #0d3d40;
  line-height: 1.3;
}
.aot .n1.hp,
.aot .n2.hp {
  border-color: #f3b5ba;
  background: #fff7f7;
}
.aot .g2 {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  border-radius: 12px;
  background: #f6f9fa;
}
.aot .n3 {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 7px 9px;
  border-radius: 10px;
  border: 1px solid #e3eef0;
  background: #fff;
}
.aot .n3 b {
  font-size: 11px;
  color: #142b35;
  line-height: 1.3;
  padding-right: 34px;
}
.aot .n3 span {
  font-size: 10px;
  color: #6b7d87;
}
.aot .n3.hit {
  background: #fdecee;
  border-color: #e5484d;
  box-shadow: 0 6px 14px -10px rgba(229, 72, 77, 0.8);
}
.aot .n3.hit b {
  color: #9f1f2e;
}
.aot .n3 em {
  position: absolute;
  top: 7px;
  right: 7px;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 6px;
  background: #e5484d;
  color: #fff;
}
.alg {
  display: flex;
  gap: 14px;
}
.alg span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #5b6f78;
}
.alg i {
  width: 12px;
  height: 12px;
  border-radius: 4px;
}
.alg .r {
  background: #fdecee;
  border: 1.5px solid #e5484d;
}
.alg .p {
  background: #fff7f7;
  border: 1.5px solid #f3b5ba;
}
.aef .r {
  display: grid;
  grid-template-columns: 22px minmax(0, 1.2fr) minmax(0, 1fr) 58px;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 12px;
  background: #f6f9fa;
  animation: phUp 0.35s calc(var(--i) * 0.04s) both;
}
.aef .aerk {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  background: #e3eced;
  color: #0d3d40;
}
.aef .r:nth-child(-n + 3) .aerk {
  background: linear-gradient(135deg, #ffd36b, #e8a317);
  color: #3a2a05;
}
.aef .bb i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #5fd6c3, #0d3d40);
}
.aef strong {
  font-size: 14px;
  color: #0d3d40;
  text-align: right;
}
.aef strong small {
  font-size: 9.5px;
  color: #8a9ba2;
  margin-left: 2px;
}
.aet {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0d3d40, #0a5a57);
  color: #fff;
}
.aet span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7fe3d6;
}
.aet b {
  font-size: 24px;
}
.aet em {
  font-style: normal;
  font-size: 11.5px;
  color: #ffd36b;
}
.aps {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.aps .hd,
.aps .rw {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) 150px minmax(0, 1.5fr) 80px 110px;
  gap: 14px;
  align-items: center;
}
.aps .hd {
  padding: 0 12px 2px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a9ba2;
}
.aps .rw {
  padding: 9px 12px;
  border-radius: 13px;
  background: #f6f9fa;
  animation: phUp 0.35s calc(var(--i) * 0.04s) both;
}
.aps .w {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.aps .cdi b {
  font-size: 12.5px;
}
.aps .cdi span {
  font-size: 11px;
}
.aps .ld {
  display: flex;
  align-items: center;
  gap: 6px;
}
.aps .ld svg {
  width: 12px;
  height: 12px;
  color: #8a9ba2;
}
.aps .ld .o {
  font-size: 12px;
  font-weight: 800;
  color: #b7801f;
  text-decoration: line-through;
}
.aps .ld .n {
  font-size: 13px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 99px;
  background: #e0f6f2;
  color: #0d7d77;
}
.aps .tg2 b {
  display: block;
  font-size: 12.5px;
  color: #0d3d40;
}
.aps .tg2 span {
  font-size: 11px;
  color: #6b7d87;
}
.aps .mt {
  justify-self: start;
  font-size: 11.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 99px;
  background: #0d3d40;
  color: #ffd36b;
}
.aps .sd-act {
  justify-self: end;
}
.wa-sp {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px;
  border-radius: 16px;
  background: #f6f9fa;
  border: 1px solid #e9eff0;
}
.wa-sp .h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.wa-sp .h b {
  font-size: 13px;
  color: #0d3d40;
}
.wa-sp .lg {
  display: flex;
  gap: 10px;
}
.wa-sp .lg span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  color: #3d5560;
}
.wa-sp .lg i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.wa-sp i.a {
  background: #14b3a0;
}
.wa-sp i.b {
  background: #e8b04b;
}
.wa-sp .r {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  border-radius: 11px;
  background: #fff;
}
.wa-sp .nm {
  font-size: 12.5px;
  font-weight: 700;
  color: #142b35;
}
.wa-sp .dt {
  display: flex;
  gap: 3px;
}
.wa-sp .dt i {
  width: 14px;
  height: 14px;
  border-radius: 4px;
}
.wa-sp .ct {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}
.wa-sp em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
}
.wa-sp em.a {
  background: #e0f6f2;
  color: #0d7d77;
}
.wa-sp em.b {
  background: #fff3d6;
  color: #8a5b00;
}
.wa-sp .nm b {
  display: block;
  font-size: 12.5px;
  color: #142b35;
}
.wa-sp .nm span {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  margin-top: 1px;
}
.wa-sp .nm .gp {
  color: #a86f10;
}
.wa-sp .nm .sr {
  color: #0d7d77;
}
.vn .wa-ch .chips {
  display: flex;
  gap: 6px;
}
.vn-k {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.vn-k .k3 {
  box-shadow: none;
  border: 1px solid #e9eff0;
}
.vn-k .k3 .v b {
  font-size: 22px;
}
.vn-k .k3 .v em {
  color: #6b7d87 !important;
  font-weight: 700;
}
.vn-g3 {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.vn-bx {
  padding: 14px;
  border-radius: 16px;
  background: #f6f9fa;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vn-bx .bh {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.vn-bx .bh b {
  font-size: 13px;
  color: #0d3d40;
}
.vn-bx .bh span {
  font-size: 11px;
  color: #8a9ba2;
}
.vn-day {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 4px;
  align-items: end;
  min-height: 170px;
}
.vn-day > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  height: 100%;
}
.vn-day i {
  width: 100%;
  border-radius: 5px 5px 2px 2px;
  background: #9fd9d1;
  animation: kiUp 0.6s calc(var(--i) * 0.03s) both;
  transform-origin: bottom;
}
.vn-day i.we {
  background: #d7eceb;
}
.vn-day i.on {
  background: linear-gradient(180deg, #14b3a0, #0d3d40);
}
.vn-day em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  color: #5b6f78;
}
.vn-day span {
  font-size: 9.5px;
  color: #8a9ba2;
  font-weight: 700;
}
.vn-tp {
  display: flex;
  align-items: center;
  gap: 12px;
}
.vn-tp svg {
  width: 130px;
  flex: none;
}
.vn-tp .v {
  font-size: 20px;
  font-weight: 800;
  fill: #0d3d40;
}
.vn-tp .l {
  font-size: 10px;
  font-weight: 700;
  fill: #6b7d87;
}
.vn-tp .ls {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vn-tp .ls div {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.vn-tp .ls i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
}
.vn-tp .ls span {
  font-size: 11.5px;
  font-weight: 700;
  color: #24404a;
}
.vn-tp .ls b {
  font-size: 12px;
  color: #0d3d40;
}
.vn-sl {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vn-sl > div {
  display: grid;
  grid-template-columns: 22px 56px minmax(0, 1fr) 36px;
  gap: 8px;
  align-items: center;
}
.vn-sl span {
  font-size: 11.5px;
  font-weight: 700;
  color: #24404a;
}
.vn-sl .bb {
  height: 7px;
  border-radius: 99px;
  background: #e3eced;
  overflow: hidden;
}
.vn-sl .bb i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #5fd6c3, #0d7d77);
}
.vn-sl .bb i.lo {
  background: linear-gradient(90deg, #ffd27a, #c88a12);
}
.vn-sl b {
  font-size: 11.5px;
  color: #0d3d40;
  text-align: right;
}
.vn-sl b.lo {
  color: #b7801f;
}
.vn-fd {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vn-fd .fh {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.vn-fd .fh b {
  font-size: 14px;
  color: #0d3d40;
}
.vi {
  border-radius: 16px;
  border: 1px solid #e9eff0;
  background: #fff;
  overflow: hidden;
  transition: 0.2s;
}
.vi.neg {
  border-color: #f3dca4;
}
.vi.op {
  box-shadow: 0 14px 30px -24px rgba(13, 61, 64, 0.6);
}
.vi .row {
  display: grid;
  grid-template-columns: 38px 170px 36px minmax(0, 1.3fr) minmax(0, 1fr) auto 30px;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
}
.vi .vnpb {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  background: #0d3d40;
  cursor: pointer;
  transition: 0.2s;
}
.vi .vnpb svg {
  width: 16px;
  height: 16px;
  fill: #fff;
}
.vi .vnpb.on {
  background: #e8a317;
}
.vi .vnpb:hover {
  transform: scale(1.06);
}
.vi .vnwv {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 30px;
}
.vi .vnwv i {
  width: 3px;
  height: var(--h);
  border-radius: 2px;
  background: #cfe0e2;
}
.vi .vnwv.pl i {
  background: #14b3a0;
  animation: vnWv 0.7s var(--d) ease-in-out infinite alternate;
}
@keyframes vnWv {
  to {
    transform: scaleY(0.35);
  }
}
.vi .vndu {
  font-size: 11px;
  font-weight: 800;
  color: #6b7d87;
}
.vi .vnw {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.vi .vnw .cdi {
  min-width: 0;
}
.vi .vnw b {
  display: block;
  font-size: 12.5px;
}
.vi .vnw span {
  display: block;
  font-size: 11px;
  color: #6b7d87;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vi .vntp {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.vi .vntp .chp {
  font-size: 10.5px;
}
.vi .vnex {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 0;
  background: #f0f5f5;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #5b6f78;
}
.vi .vnex svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s;
}
.vi.op .vnex svg {
  transform: rotate(180deg);
}
.vi .vnd {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 12px;
  padding: 0 12px 12px 62px;
  animation: phUp 0.3s both;
}
.vi .vnlb {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #007a8b;
  margin-bottom: 6px;
}
.vi .vnlb svg {
  width: 12px;
  height: 12px;
}
.vi .vnt {
  padding: 12px 14px;
  border-radius: 13px;
  background: #f6f9fa;
}
.vi .vnt p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #24404a;
  font-style: italic;
}
.vi .vnx {
  padding: 12px 14px;
  border-radius: 13px;
  background: linear-gradient(135deg, #0d3d40, #0a5a57);
  color: #fff;
}
.vi .vnx .lb {
  color: #ffd36b;
}
.vi .vnx > div {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 8px;
  padding: 5px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.vi .vnx span {
  font-size: 11px;
  color: #7fe3d6;
  font-weight: 700;
}
.vi .vnx b {
  font-size: 12.5px;
}
.wx-a3.eq {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.ac2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ac2 .ct {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: #f6f9fa;
  border: 1px solid #edf2f3;
  animation: phUp 0.35s calc(var(--i) * 0.05s) both;
}
.ac2 .ct.ft {
  grid-column: 1/-1;
  background: linear-gradient(135deg, #fffaf0, #fff3d6);
  border-color: #f3dca4;
  padding: 14px 16px;
}
.ac2 .g {
  width: 54px;
  height: 54px;
  flex: none;
}
.ac2 .g.bg {
  width: 72px;
  height: 72px;
}
.ac2 .g .tk {
  fill: none;
  stroke: #e3eced;
  stroke-width: 6;
}
.ac2 .g .vl {
  fill: none;
  stroke: #e8a317;
  stroke-width: 6;
  stroke-linecap: round;
}
.ac2 .hi .g .vl {
  stroke: #c88a12;
}
.ac2 .ct:not(.hi) .g .vl {
  stroke: #14b3a0;
}
.ac2 .g text {
  font-size: 13px;
  font-weight: 800;
  fill: #0d3d40;
}
.ac2 .tx {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ac2 .tx b {
  font-size: 13px;
  color: #0d3d40;
  line-height: 1.3;
}
.ac2 .ft .tx b {
  font-size: 15px;
}
.ac2 .rl {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ac2 .rl span {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  background: #fff;
  border: 1px solid #e3eef0;
  color: #3d5560;
  white-space: nowrap;
}
.at2h {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 8px;
}
.at2h div {
  padding: 12px 14px;
  border-radius: 14px;
  background: #f6f9fa;
}
.at2h div:first-child {
  background: linear-gradient(135deg, #0d3d40, #0a5a57);
  color: #fff;
}
.at2h span {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a9ba2;
}
.at2h div:first-child span {
  color: #7fe3d6;
}
.at2h b {
  font-size: 22px;
  color: #0d3d40;
  margin-right: 4px;
}
.at2h div:first-child b {
  color: #ffd36b;
}
.at2h em {
  font-style: normal;
  font-size: 11px;
  color: #6b7d87;
}
.at2h div:first-child em {
  color: rgba(255, 255, 255, 0.7);
}
.at2 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.at2 .r {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 12px;
  border-radius: 13px;
  background: #f6f9fa;
  animation: phUp 0.35s calc(var(--i) * 0.04s) both;
}
.at2 .hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.at2 .hd b {
  font-size: 12.5px;
  color: #142b35;
}
.at2 .pc {
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 99px;
  background: #fdecee;
  color: #c62839;
  flex: none;
}
.at2 .pc.hi {
  background: #e5484d;
  color: #fff;
}
.at2 .mt {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.at2 .mt span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
}
.at2 .rl {
  background: #eaf6f7;
  color: #007a8b;
}
.at2 .tl {
  background: #fff;
  border: 1px solid #e3eef0;
  color: #5b6f78;
}
.at2 .tl svg {
  width: 11px;
  height: 11px;
}
.at2 .bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px;
  gap: 10px;
  align-items: center;
}
.at2 .bar > div {
  display: flex;
  height: 9px;
  border-radius: 99px;
  overflow: hidden;
  background: #e3eced;
}
.at2 .bar i.ai {
  background: repeating-linear-gradient(135deg, #e8a317 0 4px, #ffd36b 4px 8px);
}
.at2 .bar i.hm {
  background: #14b3a0;
}
.at2 .bar strong {
  font-size: 12px;
  color: #8a5b00;
  text-align: right;
}
.ae2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 12px;
  align-items: stretch;
}
.ae2 .ls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.ae2 .r {
  display: grid;
  grid-template-columns: 24px minmax(0, 1.1fr) minmax(0, 1fr) 62px;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 13px;
  background: #f6f9fa;
  animation: phUp 0.35s calc(var(--i) * 0.04s) both;
}
.ae2 .r em {
  grid-column: 3/5;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  color: #8a9ba2;
  text-align: right;
}
.ae2 .aerk {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  background: #e3eced;
  color: #0d3d40;
  grid-row: 1/3;
}
.ae2 .r:nth-child(-n + 3) .aerk {
  background: linear-gradient(135deg, #ffd36b, #e8a317);
  color: #3a2a05;
}
.ae2 .aenm {
  grid-row: 1/3;
}
.ae2 .aenm b {
  display: block;
  font-size: 12.5px;
  color: #142b35;
}
.ae2 .aenm span {
  font-size: 10.5px;
  color: #6b7d87;
}
.ae2 .bb {
  height: 8px;
  border-radius: 99px;
  background: #e3eced;
  overflow: hidden;
}
.ae2 .bb i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #5fd6c3, #0d3d40);
}
.ae2 strong {
  font-size: 14px;
  color: #0d3d40;
  text-align: right;
}
.ae2 strong small {
  font-size: 9.5px;
  color: #8a9ba2;
  margin-left: 2px;
}
.ae2 .aet {
  justify-content: center;
  gap: 4px;
}
.ae2 .aet b {
  font-size: 30px;
}
.ae2 .aet .sp {
  display: flex;
  gap: 2px;
  height: 10px;
  margin-top: 10px;
}
.ae2 .aet .sp i {
  border-radius: 3px;
  background: #ffd36b;
}

.wx-a3.eq > .wa3 {
  display: flex;
  flex-direction: column;
}
.wx-a3.eq > .wa3 > .ins {
  margin-top: auto;
}
.ac2 {
  flex: 1;
  grid-auto-rows: 1fr;
}
.ac2 .ct.ft {
  grid-row: auto;
}
.at2 .r {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 110px 66px 48px;
  gap: 12px;
  align-items: center;
  flex-direction: row;
}
.at2 .nm {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.at2 .nm b {
  font-size: 12.5px;
  color: #142b35;
  line-height: 1.3;
}
.at2 .bar {
  display: block;
}
.at2 .bar > div {
  display: flex;
  height: 9px;
  border-radius: 99px;
  overflow: hidden;
  background: #e3eced;
}
.at2 .r > strong {
  font-size: 13px;
  color: #8a5b00;
  text-align: right;
  white-space: nowrap;
}
.at2 .r > strong small {
  font-size: 9.5px;
  color: #8a9ba2;
  margin-left: 2px;
  font-weight: 700;
}
.at2 .r > .pc {
  text-align: center;
}
.ae2 {
  grid-template-columns: minmax(0, 1fr) 280px;
}
.ae2 .ls {
  grid-template-columns: 1fr;
}
.ae2 .r {
  grid-template-columns: 28px minmax(0, 240px) minmax(0, 1fr) 110px 80px;
  grid-template-rows: auto;
  padding: 9px 14px;
}
.ae2 .aerk,
.ae2 .aenm {
  grid-row: auto;
}
.ae2 .r em {
  grid-column: auto;
  text-align: right;
}
.ae2 .aenm b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ae2 .aet {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  height: auto;
  padding: 22px;
}
.at2 .r {
  grid-template-columns: minmax(0, 1fr) 150px 70px 50px !important;
}
.at2 .mt {
  flex-wrap: wrap;
}
.at2 .mt span {
  white-space: nowrap;
}
.ae2 .aet {
  align-self: stretch !important;
  margin: 0 !important;
  justify-content: center !important;
  height: auto !important;
}
.ac2 .ct.ft {
  padding: 18px 20px;
}
.at2 .r {
  grid-template-columns: minmax(0, 1fr) 110px 72px !important;
  padding: 10px 12px;
}
.at2 .vl {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.at2 .vl strong {
  font-size: 13px;
  color: #8a5b00;
  white-space: nowrap;
}
.at2 .vl strong small {
  font-size: 9.5px;
  color: #8a9ba2;
  margin-left: 2px;
  font-weight: 700;
}
.ac2 .tx b .aicd {
  height: auto;
  width: auto;
  display: inline-block;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 6px;
  background: #0d3d40;
  color: #ffd36b;
  margin-right: 6px;
  vertical-align: 2px;
}
.ahm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px dashed #b9dadd;
  background: #fff;
}
.ahm .ahlb {
  background: none;
  padding: 0;
  height: auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #007a8b;
}
.ahm > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.ahm > div span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: #142b35;
  padding: 7px 10px;
  border-radius: 10px;
  background: #eaf6f7;
  min-width: 0;
}
.ahm em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 5px;
  background: #fff;
  color: #007a8b;
}
.ahm b {
  margin-left: auto;
  font-size: 11px;
  color: #0d7d77;
}
.acb {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: space-between;
}
.acb .r {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f6f9fa;
  animation: phUp 0.35s calc(var(--i) * 0.05s) both;
}
.acb .hd {
  display: flex;
  align-items: center;
  gap: 8px;
}
.acb .hd b {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: #142b35;
}
.acb .hd strong {
  font-size: 16px;
  color: #0d3d40;
}
.acb .aicd {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 6px;
  background: #0d3d40;
  color: #ffd36b;
  flex: none;
}
.acb .bb {
  height: 12px;
  border-radius: 99px;
  background: #e3eced;
  overflow: hidden;
}
.acb .bb i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #5fd6c3, #14b3a0);
}
.acb .hi .bb i {
  background: linear-gradient(90deg, #ffd36b, #e8a317);
}
.acb .dv {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.acb .dv span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: #3d5560;
  padding: 3px 8px 3px 3px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e3eef0;
}
.acb .dv em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 5px;
}
.acb .d0 em {
  background: #0d3d40;
  color: #fff;
}
.acb .d1 em {
  background: #e8a317;
  color: #3a2a05;
}
.acb .d2 em {
  background: #14b3a0;
  color: #fff;
}
.acb .d3 em {
  background: #fff3d6;
  color: #8a5b00;
}
.acb .d4 em {
  background: #eaf6f7;
  color: #007a8b;
}
.aeh {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.aeh div {
  padding: 12px 14px;
  border-radius: 14px;
  background: #f6f9fa;
}
.aeh div.dk {
  background: linear-gradient(135deg, #0d3d40, #0a5a57);
}
.aeh span {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a9ba2;
}
.aeh .dk span {
  color: #7fe3d6;
}
.aeh b {
  font-size: 22px;
  color: #0d3d40;
  margin-right: 4px;
}
.aeh .dk b {
  color: #ffd36b;
}
.aeh em {
  font-style: normal;
  font-size: 11px;
  color: #6b7d87;
}
.aeh .dk em {
  color: rgba(255, 255, 255, 0.7);
}
.aeg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.aec {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: #f6f9fa;
  border: 1px solid #edf2f3;
  animation: phUp 0.35s calc(var(--i) * 0.05s) both;
}
.aec .tp {
  display: flex;
  align-items: center;
  gap: 10px;
}
.aec .tp .nm {
  min-width: 0;
  flex: 1;
}
.aec .tp .nm b {
  display: block;
  font-size: 13.5px;
  color: #142b35;
}
.aec .tp .nm span {
  font-size: 11px;
  color: #6b7d87;
}
.aec .fr {
  flex: none;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 99px;
  background: #fff3d6;
  color: #8a5b00;
  white-space: nowrap;
}
.aec .ut {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) 14px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
}
.aec .ut > i {
  color: #9fb3b8;
  display: grid;
  place-items: center;
}
.aec .ut > i svg {
  width: 12px;
  height: 12px;
}
.aec .ut > div {
  padding: 8px 9px;
  border-radius: 11px;
  background: #fff;
  border: 1px solid #e9eff0;
  min-width: 0;
}
.aec .ut span {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a9ba2;
  white-space: nowrap;
}
.aec .ut b {
  font-size: 16px;
  color: #0d3d40;
}
.aec .ut .bb {
  height: 5px;
  border-radius: 99px;
  background: #e3eced;
  overflow: hidden;
  margin-top: 4px;
}
.aec .ut .bb i {
  display: block;
  height: 100%;
  border-radius: 99px;
}
.aec .ut .n .bb i {
  background: #e8a317;
}
.aec .ut .a .bb i {
  background: #5fd6c3;
}
.aec .ut .f {
  background: #0d3d40;
  border-color: #0d3d40;
}
.aec .ut .f span {
  color: #7fe3d6;
}
.aec .ut .f b {
  color: #ffd36b;
}
.aec .ut .f .bb {
  background: rgba(255, 255, 255, 0.15);
}
.aec .ut .f .bb i {
  background: #ffd36b;
}
.aec .sg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: 13px;
  background: #fff;
  border: 1px dashed #b9dadd;
  flex: 1;
}
.aec .sh {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: #5b6f78;
  margin-bottom: 2px;
}
.aec .sh b {
  color: #007a8b;
}
.aec .tk {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 10px;
  background: #f6f9fa;
}
.aec .tk b {
  font-size: 12px;
  color: #142b35;
  line-height: 1.3;
}
.aec .tk em {
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  color: #8a5b00;
  white-space: nowrap;
}
.aec .tk .aicd {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 6px;
  background: #0d3d40;
  color: #ffd36b;
}
.aec .aeb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px;
  border-radius: 11px;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  background: linear-gradient(135deg, #ffd36b, #e8a317);
  color: #3a2a05;
  transition: 0.2s;
}
.aec .aeb:hover {
  filter: brightness(1.05);
}
.aec .aeb svg {
  width: 13px;
  height: 13px;
}
.aec .aeb.ld {
  background: #eaf6f7;
  color: #007a8b;
  cursor: wait;
}
.aec .aeb.dn {
  background: #0d3d40;
  color: #7fe3d6;
  cursor: default;
}
.aec .aeb .spn {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid #9fd3da;
  border-top-color: #007a8b;
  animation: aeSp 0.7s linear infinite;
}
@keyframes aeSp {
  to {
    transform: rotate(360deg);
  }
}
.aec .tp .nm .r1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.aec .tp .nm > span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.ogu {
  background: #fff;
  border: 1px solid #e6eef0;
  border-radius: 24px;
  box-shadow: 0 24px 50px -36px rgba(13, 61, 64, 0.45);
  overflow: hidden;
}
.ogu-h {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid #eef3f4;
}
.ogu-h .oi {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ffd36b, #e8a317);
  color: #3a2a05;
  flex: none;
  box-shadow: 0 8px 18px -10px rgba(232, 163, 23, 0.9);
}
.ogu-h .tt {
  flex: 1;
  min-width: 0;
}
.ogu-h .ey {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #007a8b;
}
.ogu-h h3 {
  margin: 2px 0 0;
  font-size: 17px;
  color: #0d3d40;
}
.ogu-pg {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.ogu-pg > div:first-child b {
  font-size: 20px;
  color: #0d3d40;
  margin-right: 4px;
}
.ogu-pg > div:first-child span {
  font-size: 11.5px;
  font-weight: 700;
  color: #6b7d87;
}
.ogu-pg .sg {
  display: flex;
  gap: 4px;
}
.ogu-pg .sg i {
  width: 28px;
  height: 5px;
  border-radius: 99px;
  background: #e3eced;
  transition: 0.3s;
}
.ogu-pg .sg i.up {
  background: #ffd36b;
}
.ogu-pg .sg i.on {
  background: #14b3a0;
}
.ogu-b {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 18px;
  padding: 20px 22px 22px;
  transition:
    height 0.3s ease,
    opacity 0.25s,
    padding 0.3s;
  overflow: hidden;
}
.ogu-b.cl {
  height: 0 !important;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.ogu-l {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ogu-drop {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 220px;
  padding: 22px;
  border: 2px dashed #cfe0e2;
  border-radius: 20px;
  background: radial-gradient(120% 90% at 50% 0%, #f2fbfa, #f8fbfb 60%);
  cursor: pointer;
  transition: 0.25s;
  text-align: center;
}
.ogu-drop:hover,
.ogu-drop.ov {
  border-color: #14b3a0;
  background: radial-gradient(120% 90% at 50% 0%, #e6f8f5, #f4fbfa 60%);
}
.ogu-drop.ov {
  transform: scale(1.01);
}
.ogu-drop .ogil {
  position: relative;
  width: 120px;
  height: 78px;
  margin-bottom: 8px;
}
.ogu-drop .ogil span {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  transition: 0.35s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.ogu-drop .g1 {
  left: 8px;
  top: 12px;
  width: 46px;
  height: 58px;
  background: #eaf6f7;
  color: #007a8b;
  border: 1px solid #cfe7e9;
  transform: rotate(-12deg);
}
.ogu-drop .g2 {
  right: 8px;
  top: 12px;
  width: 46px;
  height: 58px;
  background: #fff3d6;
  color: #8a5b00;
  border: 1px solid #f3dca4;
  transform: rotate(12deg);
}
.ogu-drop .g3 {
  left: 36px;
  top: 0;
  width: 48px;
  height: 62px;
  background: linear-gradient(160deg, #0d3d40, #0a5a57);
  color: #ffd36b;
  box-shadow: 0 12px 22px -12px rgba(13, 61, 64, 0.8);
}
.ogu-drop:hover .g1 {
  transform: rotate(-18deg) translate(-6px, 2px);
}
.ogu-drop:hover .g2 {
  transform: rotate(18deg) translate(6px, 2px);
}
.ogu-drop:hover .g3 {
  transform: translateY(-6px);
}
.ogu-drop > b {
  font-size: 15px;
  color: #0d3d40;
}
.ogu-drop .or {
  font-size: 11px;
  color: #8a9ba2;
}
.ogu-drop .ogpk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 99px;
  background: #0d3d40;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.ogu-drop .ogpk svg {
  width: 13px;
  height: 13px;
}
.ogu-drop .fm {
  display: flex;
  gap: 5px;
  margin-top: 8px;
}
.ogu-drop .fm em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #e3eef0;
  color: #6b7d87;
}
.ogu-demo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, #fffaf0, #fff1cf);
  border: 1px solid #f3dca4;
}
.ogu-demo .st {
  position: relative;
  width: 46px;
  height: 34px;
  flex: none;
}
.ogu-demo .st span {
  position: absolute;
  top: 0;
  width: 24px;
  height: 30px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 6.5px;
  font-weight: 800;
  background: #fff;
  border: 1px solid #f0d290;
  color: #8a5b00;
}
.ogu-demo .st span:nth-child(1) {
  left: 0;
  transform: rotate(-10deg);
}
.ogu-demo .st span:nth-child(2) {
  left: 11px;
  top: 2px;
  z-index: 1;
}
.ogu-demo .st span:nth-child(3) {
  left: 22px;
  transform: rotate(10deg);
  background: #0d3d40;
  color: #ffd36b;
  border-color: #0d3d40;
}
.ogu-demo .tx {
  flex: 1;
  min-width: 0;
}
.ogu-demo .tx b {
  display: block;
  font-size: 13px;
  color: #3a2a05;
}
.ogu-demo .tx span {
  font-size: 11px;
  color: #8a6a2a;
}
.ogu-db {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 9px 14px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  background: linear-gradient(135deg, #ffd36b, #e8a317);
  color: #3a2a05;
  box-shadow: 0 8px 16px -10px rgba(232, 163, 23, 0.9);
  transition: 0.2s;
}
.ogu-db:hover {
  transform: translateY(-1px);
}
.ogu-db svg {
  width: 13px;
  height: 13px;
}
.ogu-db[disabled] {
  opacity: 0.5;
  pointer-events: none;
}
.ogu-r {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ogs {
  display: grid;
  grid-template-columns: 24px 46px minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 16px;
  background: #f6f9fa;
  border: 1px solid #edf2f3;
  transition: 0.3s;
  animation: phUp 0.35s calc(var(--i) * 0.05s) both;
}
.ogs .no {
  font-size: 11px;
  font-weight: 800;
  color: #9fb3b8;
}
.ogs .ft {
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: #fff;
  border: 1.5px dashed #cfe0e2;
  color: #9fb3b8;
}
.ogs .ft.upl {
  border: 0;
  background: #fff3d6;
  color: #8a5b00;
}
.ogs .ft.ok {
  border: 0;
  background: linear-gradient(160deg, #0d3d40, #0a5a57);
  color: #ffd36b;
}
.ogs .tx {
  min-width: 0;
}
.ogs .tx b {
  display: block;
  font-size: 13.5px;
  color: #142b35;
}
.ogs .tx span {
  display: block;
  font-size: 11.5px;
  color: #6b7d87;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ogs .pb {
  height: 5px;
  border-radius: 99px;
  background: #efe3c4;
  overflow: hidden;
  margin-top: 7px;
}
.ogs .pb i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #ffd36b, #e8a317);
  animation: ogPb 0.9s ease-out forwards;
}
@keyframes ogPb {
  to {
    width: 100%;
  }
}
.ogs .ch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 99px;
  background: #fff;
  border: 1px solid #e3eef0;
  color: #8a9ba2;
  white-space: nowrap;
}
.ogs .ch.up {
  background: #fff3d6;
  border-color: #f3dca4;
  color: #8a5b00;
}
.ogs .ch.ok {
  background: #e0f6f2;
  border-color: #bfe9e1;
  color: #0d7d77;
}
.ogs .ch svg {
  width: 12px;
  height: 12px;
}
.ogs .ch .spn {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #f0d290;
  border-top-color: #8a5b00;
  animation: aeSp 0.7s linear infinite;
}
.ogs .rm {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: #9fb3b8;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: 0.2s;
}
.ogs .rm:hover {
  background: #fff;
  color: #0d3d40;
}
.ogs .rm svg {
  width: 12px;
  height: 12px;
}
.ogs:not(.ok):not(.upl) .rm {
  display: none;
}
.ogs:not(.ok) {
  grid-template-columns: 24px 46px minmax(0, 1fr) auto;
}
.ogs.ok {
  background: #fff;
  border-color: #cdeae6;
  box-shadow: 0 10px 20px -18px rgba(13, 61, 64, 0.6);
}
.ogs.upl {
  background: #fffdf7;
  border-color: #f3e3bb;
}
.ogs.rmv {
  opacity: 0;
  transform: translateX(12px);
}
.ogu-go {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 16px;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  background: linear-gradient(135deg, #0d3d40, #0a6b66);
  color: #fff;
  box-shadow: 0 14px 26px -16px rgba(13, 61, 64, 0.9);
  transition: 0.25s;
}
.ogu-go svg {
  width: 16px;
  height: 16px;
  color: #ffd36b;
}
.ogu-go i {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.14);
  margin-left: 4px;
}
.ogu-go i svg {
  width: 14px;
  height: 14px;
  color: #fff;
}
.ogu-go:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 30px -16px rgba(13, 61, 64, 0.9);
}
.ogu-go[disabled] {
  background: #e9eff0;
  color: #9fb3b8;
  box-shadow: none;
  pointer-events: none;
}
.ogu-go[disabled] svg {
  color: #9fb3b8;
}
.ogu-go[disabled] i {
  background: #fff;
}
.ogu.proc {
  background: linear-gradient(115deg, #3a2a05, #7a5206 45%, #c88a12);
  border-color: transparent;
  box-shadow: 0 24px 50px -28px rgba(138, 91, 0, 0.7);
  transition: background 0.4s;
}
.ogu.proc .ogu-h {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
.ogu.proc .ogu-h .ey {
  color: #ffd36b;
}
.ogu.proc .ogu-h h3 {
  color: #fff;
}
.ogu.proc .ogu-pg > div:first-child b {
  color: #fff;
}
.ogu.proc .ogu-pg > div:first-child span {
  color: rgba(255, 255, 255, 0.7);
}
.ogu.proc .ogu-pg .sg i.on {
  background: #ffd36b;
}
.ogu.proc .aiL {
  padding: 18px 22px 22px !important;
}
.og-out {
  overflow: hidden;
  transition:
    height 0.35s ease,
    opacity 0.3s ease,
    transform 0.35s ease,
    margin 0.35s;
  opacity: 0;
  transform: translateY(-10px) scale(0.99);
  height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.og-rv {
  animation: ogRv 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--rv, 0) * 0.12s);
}
@keyframes ogRv {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.ogds {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 16px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e6eef0;
  box-shadow: 0 16px 30px -28px rgba(13, 61, 64, 0.5);
}
.ogds .oi {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: #e0f6f2;
  color: #0d7d77;
  flex: none;
}
.ogds .tx {
  flex: none;
}
.ogds .tx b {
  display: block;
  font-size: 13px;
  color: #0d3d40;
}
.ogds .tx span {
  font-size: 11px;
  color: #6b7d87;
}
.ogds .fl {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 6px;
  overflow: hidden;
}
.ogds .fl span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 5px 10px 5px 5px;
  border-radius: 10px;
  background: #f6f9fa;
  font-size: 11px;
  font-weight: 700;
  color: #3d5560;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ogds .fl em {
  font-style: normal;
  font-size: 8.5px;
  font-weight: 800;
  padding: 3px 5px;
  border-radius: 6px;
  background: #0d3d40;
  color: #ffd36b;
  flex: none;
}
.ogds .bt {
  display: flex;
  gap: 8px;
  flex: none;
}
.ogds-rg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 11px;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  background: linear-gradient(135deg, #ffd36b, #e8a317);
  color: #3a2a05;
  transition: 0.2s;
}
.ogds-rg:hover {
  transform: translateY(-1px);
}
.ogds-rg svg {
  width: 13px;
  height: 13px;
}
.ogu-drop .ogil {
  width: 150px;
}
.ogu-drop .g1 {
  left: 6px;
  align-items: end !important;
  padding-bottom: 8px;
}
.ogu-drop .g2 {
  right: 6px;
  align-items: end !important;
  padding-bottom: 8px;
}
.ogu-drop .g3 {
  left: 51px;
}
.ogu-drop .ogpk {
  line-height: 1;
  height: auto;
  width: auto;
}
.ogu-demo .dic {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid #f0d290;
  color: #c88a12;
  flex: none;
}
#wxAi .ph > div > span {
  display: none !important;
}
.aiw {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.aiw-h {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #e6eef0;
  box-shadow: 0 16px 30px -28px rgba(13, 61, 64, 0.5);
}
.aiw-h .oi {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ffd36b, #e8a317);
  color: #3a2a05;
  flex: none;
}
.aiw-h .tt {
  flex: 1;
  min-width: 0;
}
.aiw-h .ey {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c88a12;
}
.aiw-h h3 {
  margin: 2px 0 0;
  font-size: 17px;
  color: #0d3d40;
}
.aiw-h .tm {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #6b7d87;
  padding: 5px 10px;
  border-radius: 99px;
  background: #f6f9fa;
}
.aiw-h .tm svg {
  width: 12px;
  height: 12px;
}
.aiw .wa3 {
  border: 1px solid #e6eef0;
  box-shadow: 0 16px 30px -28px rgba(13, 61, 64, 0.5);
}
.aiw-h.idle {
  padding: 18px 20px;
}
.aiw-h .ch {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.aiw-h .ch span {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 99px;
  background: #fff8e6;
  border: 1px solid #f3dca4;
  color: #8a5b00;
}
.ogds-rg.big {
  padding: 12px 18px;
  font-size: 13.5px;
  border-radius: 14px;
  box-shadow: 0 10px 20px -12px rgba(232, 163, 23, 0.9);
}
.ogds-rg.big svg {
  width: 15px;
  height: 15px;
}
.wl-dv {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.wl-dv .r {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 46px;
  gap: 10px;
  align-items: center;
  animation: phUp 0.35s calc(var(--i) * 0.04s) both;
}
.wl-dv .nm b {
  display: block;
  font-size: 12px;
  color: #142b35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wl-dv .nm span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #8a9ba2;
}
.wl-dv .nm i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
}
.wl-dv .bs {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.wl-dv .bs i {
  display: block;
  height: 7px;
  border-radius: 99px;
}
.wl-dv .bs .k {
  background: #e8a317;
}
.wl-dv .bs .s {
  background: #0d3d40;
}
.wl-dv em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 800;
  color: #0d7d77;
  text-align: right;
}
.wl-dv em.up {
  color: #8a5b00;
}
.wl-ef {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wl-ef .wlr {
  display: grid;
  grid-template-columns: 24px minmax(0, 200px) minmax(0, 1fr) 72px;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 12px;
  background: #f7fafa;
  animation: phUp 0.35s calc(var(--i) * 0.04s) both;
}
.wl-ef .wlrk {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  background: #e3eced;
  color: #0d3d40;
}
.wl-ef .wlr:nth-child(-n + 3) .wlrk {
  background: linear-gradient(135deg, #ffd36b, #e8a317);
  color: #3a2a05;
}
.wl-ef .wlnm b {
  display: block;
  font-size: 12.5px;
  color: #142b35;
}
.wl-ef .wlnm span {
  font-size: 10.5px;
  color: #6b7d87;
}
.wl-ef .wlbb {
  height: 10px;
  border-radius: 99px;
  background: #e3eced;
  overflow: hidden;
}
.wl-ef .wlbb i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #ffd36b, #e8a317);
}
.wl-ef strong {
  font-size: 14px;
  color: #0d3d40;
  text-align: right;
}
.wl-ef strong small {
  font-size: 9.5px;
  color: #8a9ba2;
  margin-left: 2px;
}
.wl-hs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  height: 200px;
  padding: 6px 4px 0;
}
.wl-hs .c {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
}
.wl-hs .c b {
  font-size: 16px;
  color: #0d3d40;
}
.wl-hs .br {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  background: #f3f7f8;
  border-radius: 10px;
  overflow: hidden;
}
.wl-hs .br i {
  display: block;
  width: 100%;
  border-radius: 10px 10px 0 0;
  transform-origin: bottom;
  animation: wlUp 0.6s calc(var(--i) * 0.06s) both;
}
@keyframes wlUp {
  from {
    transform: scaleY(0);
  }
}
.wl-hs .c > span {
  font-size: 10.5px;
  font-weight: 700;
  color: #6b7d87;
  white-space: nowrap;
}
.wl-hl {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.wl-hl span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 99px;
  background: #fff3d6;
  color: #8a5b00;
}
.wl-hl b {
  color: #3a2a05;
}
.wl-tb .rw > span:nth-child(2) {
  display: flex;
  align-items: center;
  gap: 6px;
}
.wl-tb .rw > span:nth-child(3) {
  display: block !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wlbl {
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 4px;
  stroke-linejoin: round;
}
.gtg .sd-hk .gth b {
  font-size: 26px;
}
.gtg .sd-hk .gth.g b {
  color: #7fe3d6;
}
.gtg .sd-hk .gth.s b {
  color: #ffd36b;
}
.gtg .sd-hk .gth.x b {
  color: #fff;
}
.gt-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.gtc {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  background: #f6f9fa;
  border: 1px solid #edf2f3;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: 0.2s;
  animation: phUp 0.35s calc(var(--i) * 0.05s) both;
  color: #142b35;
}
.gtc:hover {
  background: #fff;
  border-color: #9fd3da;
  box-shadow: 0 14px 26px -20px rgba(13, 61, 64, 0.6);
  transform: translateY(-2px);
}
.gtc .hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.gtc .hd b {
  font-size: 13.5px;
  color: #0d3d40;
}
.gtc .hd svg {
  width: 13px;
  height: 13px;
  color: #8a9ba2;
}
.gtc .pp {
  font-size: 11px;
  color: #6b7d87;
  margin-top: -6px;
}
.gtc .st,
.gtd-hero .st {
  display: flex;
  gap: 2px;
  height: 10px;
  border-radius: 99px;
  overflow: hidden;
}
.gtc .st i,
.gtd-hero .st i {
  display: block;
}
.gtc .lg {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.gtc .lg div {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: #3d5560;
}
.gtc .lg i {
  width: 8px;
  height: 8px;
  border-radius: 3px;
}
.gtc .lg b {
  margin-left: auto;
  color: #0d3d40;
}
.gt-tb {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.gt-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gtr {
  display: grid;
  grid-template-columns: 26px minmax(0, 230px) minmax(0, 1fr) 56px 16px;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 14px;
  background: #f7fafa;
  border: 1px solid transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: 0.2s;
  animation: phUp 0.35s calc(var(--i) * 0.03s) both;
  color: #142b35;
}
.gtr:hover {
  background: #fff;
  border-color: #cfe7e9;
}
.gtr > svg {
  width: 14px;
  height: 14px;
  color: #9fb3b8;
}
.gtrk {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  background: #e3eced;
  color: #0d3d40;
}
.gtr:nth-child(-n + 3) .gtrk {
  background: linear-gradient(135deg, #ffd36b, #e8a317);
  color: #3a2a05;
}
.gtnm {
  font-size: 13px;
  color: #142b35;
}
.gtbs {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.gtbs > div {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 28px;
  gap: 8px;
  align-items: center;
}
.gtbs em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  color: #8a9ba2;
}
.gtbs .tr {
  height: 7px;
  border-radius: 99px;
  background: #e9eff0;
  overflow: hidden;
}
.gtbs .tr i {
  display: block;
  height: 100%;
  border-radius: 99px;
}
.gtbs span {
  font-size: 11px;
  font-weight: 700;
  color: #3d5560;
  text-align: right;
}
.gttot {
  text-align: right;
}
.gttot b {
  display: block;
  font-size: 17px;
  color: #0d3d40;
}
.gttot span {
  font-size: 10px;
  color: #8a9ba2;
}
.sd-seg.sm button {
  padding: 6px 11px;
  font-size: 11.5px;
}
.sd-seg button em {
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  margin-left: 6px;
  opacity: 0.7;
}
.gtd {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.gtd-hero {
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, #0d3d40, #0a5a57);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gtd-hero .ey {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7fe3d6;
}
.gtd-hero .ks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.gtd-hero .ks.k4 {
  grid-template-columns: repeat(4, 1fr);
}
.gtd-hero .ks div {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
}
.gtd-hero .ks b {
  display: block;
  font-size: 22px;
  color: #fff;
}
.gtd-hero .ks span {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
}
.gtd-hero .ks .g b {
  color: #7fe3d6;
}
.gtd-hero .ks .s b {
  color: #ffd36b;
}
.gtd-hero .ks.k4 b {
  color: #ffd36b !important;
}
.gtd-hero .ks .tt {
  background: rgba(255, 211, 107, 0.14);
}
.gtd-sec {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gtd-sec h4 {
  margin: 0;
  font-size: 13.5px;
  color: #0d3d40;
}
.gtd-th {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.gtd-th .col {
  padding: 12px;
  border-radius: 14px;
  background: #f6f9fa;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.gtd-th .ch {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  color: #0d3d40;
  margin-bottom: 2px;
}
.gtd-th .ch i {
  width: 8px;
  height: 8px;
  border-radius: 3px;
}
.gtd-th .r {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  font-size: 11.5px;
  color: #3d5560;
  line-height: 1.35;
}
.gtd-th .r b {
  color: #0d3d40;
}
.gtd-ss,
.gtd-cm {
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: opacity 0.2s;
}
.gt-ld {
  opacity: 0.35;
  pointer-events: none;
}
.gtd-ss .r,
.gtd-cm .r {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 13px;
  background: #f6f9fa;
  animation: phUp 0.3s calc(var(--i) * 0.03s) both;
}
.gtd-ss .nm,
.gtd-cm .nm {
  flex: 1;
  min-width: 0;
}
.gtd-ss .nm b,
.gtd-cm .mt b {
  font-size: 12.5px;
  color: #142b35;
}
.gtd-ss .nm span,
.gtd-cm .mt span {
  display: block;
  font-size: 11px;
  color: #6b7d87;
}
.gtd-ss .sn {
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 99px;
  white-space: nowrap;
}
.gtd-ss .sn.g {
  background: #e0f6f2;
  color: #0d7d77;
}
.gtd-ss .sn.s {
  background: #fff3d6;
  color: #8a5b00;
}
.gtd-ss .sn.x {
  background: #0d3d40;
  color: #ffd36b;
}
.gtd-cm .mt {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}
.gtd-cm .mt span {
  display: inline;
}
.gtd-cm p {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: #24404a;
}
.gtd-cm .gtfb {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  background: var(--c);
  color: #fff;
}
.wa-tree2 .n.ext {
  background: #fdecee;
  border-color: #f5b5bd;
}
.wa-tree2 .n.ext b {
  color: #b4232f;
}
.wa-tree2 .n.ext span {
  color: #c45560;
}
.fz-tree span.ext {
  background: #fdecee !important;
  border-color: #f5b5bd !important;
  color: #b4232f !important;
}
.wa-tlg {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 12px;
}
.wa-tlg span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #5b6f78;
}
.wa-tlg i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.wa-tlg .in {
  background: #f3f9f8;
  border: 1px solid #cfe5e2;
}
.wa-tlg .ex {
  background: #fdecee;
  border: 1px solid #f5b5bd;
}
.wa-sp i.ext {
  background: #e5484d !important;
}
.wa-sp em.ext {
  background: #fdecee !important;
  color: #b4232f !important;
}
.wa-sp .gp {
  color: #b4232f !important;
}
.wa-stc {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
  background: #e0f6f2;
  color: #0d7d77;
  margin-left: 6px;
  vertical-align: 1px;
}
.wa-cd.hire {
  background: #fff6f7 !important;
  border-color: #f5b5bd !important;
}
.wa-cd.hire .hav {
  background: #fdecee !important;
  color: #b4232f !important;
  border-color: #f5b5bd !important;
}
.wa-cd.hire .cdi > b {
  color: #b4232f;
}
.wa-tree2 .n .lf {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 6px;
  font-style: normal;
}
.wa-tree2 .n .lf i {
  display: flex;
  align-items: center;
  gap: 5px;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  color: #24404a;
  white-space: nowrap;
}
.wa-tree2 .n .lf.x {
  font-size: 10.5px;
  font-weight: 800;
  color: #b4232f;
}
.bw-n .mt {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.bw-nm {
  flex: 1;
  min-width: 0;
  font-size: 10.5px;
  font-weight: 700;
  color: #3d5560;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bw-nm em {
  font-style: normal;
  color: #b4232f;
}
.bw-pl {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
  background: #0d3d40;
  color: #7fe3d6;
}
.bw-n.ext {
  background: #fff6f7 !important;
  border-color: #f5b5bd !important;
}
.bw-n.ext > b {
  color: #b4232f;
}
/* ===== AI standard skin ===== */
.aix,
.aibox {
  position: relative;
  padding: 8px !important;
  border: 0 !important;
  border-radius: 26px !important;
  background: linear-gradient(115deg, #3a2a05, #7a5206 45%, #c88a12) !important;
  box-shadow: 0 24px 50px -30px rgba(138, 91, 0, 0.75) !important;
  overflow: hidden;
  color: #fff;
  display: flex !important;
  flex-direction: column;
  gap: 8px !important;
}
.aix:before,
.aibox:before {
  content: '' !important;
  display: block !important;
  position: absolute;
  right: -90px;
  top: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 211, 107, 0.35), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.aix > *,
.aibox > * {
  position: relative;
  z-index: 1;
}
.aix > .wa-ch,
.aix > .card-h,
.aibox > .ai-h {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 10px 10px 6px !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  color: #fff !important;
}
.aix > .wa-ch h3,
.aix > .card-h h2,
.aibox > .ai-h h2 {
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 16.5px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -0.01em;
}
.aix > .wa-ch h3 > svg,
.aix > .card-h h2 > svg {
  width: 38px !important;
  height: 38px !important;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 13px;
  background: linear-gradient(135deg, #ffd36b, #e8a317);
  color: #3a2a05 !important;
  stroke: #3a2a05 !important;
  box-shadow: 0 0 0 5px rgba(255, 211, 107, 0.15);
  flex: none;
}
.aibox > .ai-h .ai-ic {
  width: 38px !important;
  height: 38px !important;
  padding: 10px !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, #ffd36b, #e8a317) !important;
  box-shadow: 0 0 0 5px rgba(255, 211, 107, 0.15) !important;
  color: #3a2a05 !important;
}
.aibox > .ai-h .ai-ic svg {
  color: #3a2a05 !important;
  stroke: #3a2a05 !important;
  width: 18px !important;
  height: 18px !important;
}
.aix > .wa-ch h3:before,
.aix > .card-h h2:before,
.aibox > .ai-h h2:before {
  content: none;
}
.aix > .wa-ch .pill,
.aix > .wa-ch .chp,
.aix > .card-h .meta,
.aix > .card-h .chip,
.aibox > .ai-h .chip,
.aibox > .ai-h .meta {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #fff3d6 !important;
}
.aibox > .ai-h .chip svg,
.aibox > .ai-h .chip .i {
  stroke: #ffd36b !important;
  color: #ffd36b !important;
}
.aix > .wa-ch .cc-link,
.aibox > .ai-h .btn:not(.primary) {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}
.aix > .wa-ch .tg-btn {
  margin-left: auto;
  background: #fff !important;
  color: #7a5206 !important;
  border: 0 !important;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.5) !important;
}
.aix > .wa-ch .tg-btn svg {
  color: #c88a12 !important;
  stroke: #c88a12 !important;
}
.aix > *:not(.wa-ch):not(.card-h),
.aibox > *:not(.ai-h):not(.ai-prog) {
  background: #fff !important;
  border-radius: 18px !important;
  color: #142b35;
  border: 0 !important;
  margin: 0 !important;
}
.aibox > .ai-prog {
  margin: 0 10px !important;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.15) !important;
}
.aibox > .ai-prog i {
  background: #ffd36b !important;
}
.aibox > .ai-status {
  padding: 12px 16px !important;
}
.aix .wa-gen .tg-btn,
.aibox .ai-empty .btn,
.aibox .ai-empty button {
  background: linear-gradient(135deg, #e8b04b, #b7801f) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 12px 24px -12px rgba(183, 128, 31, 0.8) !important;
}
.aix .wa-gen .ob {
  background: linear-gradient(135deg, #ffd36b, #e8a317) !important;
  color: #3a2a05 !important;
}
.aix .wa-gen .ob svg {
  color: #3a2a05 !important;
  stroke: #3a2a05 !important;
}
.aix-list {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  padding: 12px !important;
}
.aix-list > div {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 13px;
  background: #f7f9f9;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: #142b35;
  animation: phUp 0.35s calc(var(--i) * 0.07s) both;
}
.aix-list em {
  font-style: normal;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  flex: none;
  font-size: 11px;
  font-weight: 800;
  background: linear-gradient(135deg, #ffd36b, #e8a317);
  color: #3a2a05;
}
.aix.wa-aib > .wa-aig {
  padding: 12px !important;
}
section.card.ev.aix {
  padding: 8px !important;
  border: 0 !important;
  border-radius: 26px !important;
  background: linear-gradient(115deg, #3a2a05, #7a5206 45%, #c88a12) !important;
  box-shadow: 0 24px 50px -30px rgba(138, 91, 0, 0.75) !important;
}
.aix > .card-h h2::before,
.aix > .card-h h2::after,
.aix > .card-h::before,
.aix > .card-h::after {
  display: none !important;
  content: none !important;
}
.aix > .card-h .ai-ic,
.aix > .card-h > .i {
  display: none !important;
}
.aibox > *:not(.ai-h) {
  min-width: 0;
  overflow-x: auto;
}
.aibox > .section-cta {
  background: transparent !important;
  padding: 0 4px 4px !important;
  justify-content: flex-end;
}
.aibox .section-cta .btn.primary,
.aix .section-cta .btn.primary {
  background: #fff !important;
  border-color: #fff !important;
  color: #7a5206 !important;
}
.aix .hd-ic {
  display: none !important;
}
.aix > .card-h .meta {
  white-space: nowrap;
}
.aibox > .section-cta.section-cta.section-cta {
  background: transparent !important;
  padding: 2px 4px 4px !important;
}

/* chip metadata (ganti teks tipis bertitik) + saran AI on-demand */
#page .mch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  background: #eaf6f7;
  color: #0d4f57;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  letter-spacing: 0;
}
#page .mch svg {
  width: 11px;
  height: 11px;
  stroke-width: 2.2;
  opacity: 0.8;
}
#page .mcs {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
  overflow: visible !important;
  font-size: inherit;
}
#page .aot .n3 .mch {
  align-self: flex-start;
  margin-top: 5px;
}
#page .aot .n3.hit .mch {
  background: #fff;
  color: #9f1f2e;
}
#page .aec .sh .mch {
  margin-left: auto;
  background: #f1f5f9;
  color: #475569;
}
#page .aec .sh > span:not(.mch) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aec .ut .f.wait {
  background: #fff;
  border: 1px dashed #b9dadd;
}
.aec .ut .f.wait span {
  color: #8a9ba2;
}
.aec .ut .f.wait b {
  color: #b6c4c8;
}
.aec .sg.idle {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 16px 14px;
  min-height: 132px;
  background: linear-gradient(180deg, #fff, #f4fafb);
}
.aec .sg.idle .aei {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: #0d3d40;
  color: #ffd36b;
}
.aec .sg.idle .aei svg {
  width: 16px;
  height: 16px;
}
.aec .sg.idle > b {
  font-size: 12.5px;
  color: #142b35;
}
.aec .sg.idle > span {
  font-size: 11px;
  color: #5b6f78;
  line-height: 1.45;
  max-width: 240px;
}
.aec .sg.run {
  justify-content: center;
  gap: 10px;
}
.aesk {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.aesk i {
  display: block;
  height: 30px;
  border-radius: 10px;
  background: linear-gradient(90deg, #eef4f5 0%, #f8fbfb 40%, #eef4f5 80%);
  background-size: 200% 100%;
  animation: aeShim 1.1s linear infinite;
}
.aest {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
}
.aest span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #a3b3b8;
  transition: color 0.2s;
}
.aest span::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.aest span.on {
  color: #007a8b;
  font-weight: 700;
}
.aest span.ok {
  color: #0d9488;
}
@keyframes aeShim {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
.aec .aeg-b {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px;
  border-radius: 11px;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  background: #0d3d40;
  color: #ffd36b;
  transition: 0.2s;
}
.aec .aeg-b:hover {
  background: #0f4a4e;
}
.aec .aeg-b svg {
  width: 13px;
  height: 13px;
}
.aec .aeg-b.ld {
  background: #eaf6f7;
  color: #007a8b;
  cursor: wait;
}
.aec .aeg-b .spn {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid #9fd3da;
  border-top-color: #007a8b;
  animation: aeSp 0.7s linear infinite;
}
.aec .sg.run {
  min-height: 132px;
}
.aec .sg.fresh .tk {
  animation: phUp 0.35s calc(var(--k) * 0.12s) both;
}
.aec .sg.fresh {
  animation: aeIn 0.3s both;
}
@keyframes aeIn {
  from {
    opacity: 0.4;
  }
}
#page .wl-dv .nm .mch {
  display: inline-flex;
  margin-top: 4px;
  width: max-content;
  max-width: 100%;
}
#page .wl-tb .rw .dcell {
  display: flex;
  align-items: center;
}

.wa-pi.wpi2 {
  position: relative;
  gap: 9px;
  padding: 14px 16px 13px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}
.wa-pi.wpi2:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -12px rgba(13, 61, 64, 0.35);
}
.wa-pi.wpi2 .wpd {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 10px;
  border-radius: 10px;
  background: #f4f8f9;
}
.wa-pi.wpi2 .wpd .wpd-k {
  display: block;
  margin: 0;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7b8f96;
}
.wa-pi.wpi2 .wpd b {
  font-size: 12.5px;
  font-weight: 800;
  color: #0d3d40;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wa-pi.wpi2 .wpf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.wa-pi.wpi2 .wpo {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  min-width: 0;
}
.wa-pi.wpi2 .wpo b {
  font-size: 12px;
  font-weight: 700;
  color: #24414a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wa-pi.wpi2 .wpl {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  flex: none;
  padding: 3px 9px;
  border-radius: 99px;
  background: #eaf6f7;
  color: #0d4f57;
  font-size: 11px;
  font-weight: 700;
}
.wa-pi.wpi2 .wpl svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
}
.wa-pi.wpi2.on {
  background: linear-gradient(150deg, #fff, #effaf8);
}
.wa-pi.wpi2.on .wpd {
  background: #fff;
}
.wds {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wd {
  background: #fff;
  border: 1px solid #e6eef0;
  border-radius: 14px;
  padding: 12px 14px;
  animation: phUp 0.35s calc(var(--i) * 0.1s) both;
}
.wdh {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.wdh .wdn {
  flex: none;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 7px;
  background: linear-gradient(135deg, #ffd36b, #e8a317);
  color: #3a2a05;
}
.wdh .wdt {
  flex: none;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 6px;
  border-radius: 6px;
  background: #fdecee;
  color: #b4232f;
}
.wdh .wdt.xlsx,
.wdh .wdt.csv {
  background: #e6f6ee;
  color: #13784a;
}
.wdh .wdt.docx {
  background: #e8f0fc;
  color: #1f5bb5;
}
.wdh b {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 800;
  color: #142b35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wdh em {
  flex: none;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  background: #f1f5f9;
  color: #475569;
}
.wd ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.wd li {
  position: relative;
  padding-left: 16px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #24414a;
}
.wd li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 9px;
  height: 2px;
  border-radius: 2px;
  background: #14b3a0;
}

.dv {
  margin-top: 18px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #e3eef0;
  box-shadow: 0 18px 40px -28px rgba(13, 61, 64, 0.45);
  overflow: hidden;
  scroll-margin-top: 16px;
  animation: phUp 0.4s both;
}
.dv-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(110deg, #0d3d40, #006b7a);
  color: #fff;
}
.dv-ic {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.14);
  flex: none;
}
.dv-ic svg {
  width: 18px;
  height: 18px;
}
.dv-t {
  flex: 1;
  min-width: 0;
}
.dv-t > b {
  font-size: 15px;
  font-weight: 800;
}
.dv-ch {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}
.dv-ch span {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.14);
  color: #d6f3f0;
}
.dv-ch span.w {
  background: #ffd36b;
  color: #3a2a05;
}
.dv-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
}
.dv-tabs button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 800;
  color: #cfeeea;
}
.dv-tabs button.on {
  background: #fff;
  color: #0d3d40;
}
.dv-tabs em {
  font-style: normal;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 99px;
  background: #ffd36b;
  color: #3a2a05;
}
.dv-bar .tg-btn {
  flex: none;
}
.dv-desk {
  padding: 28px;
  background: repeating-linear-gradient(45deg, #eef3f4 0 10px, #f2f6f7 10px 20px);
  max-height: 860px;
  overflow: auto;
}
.dv-desk .wa-paper {
  margin: 0 auto;
  max-width: 860px;
  box-shadow: 0 20px 40px -24px rgba(15, 23, 42, 0.35);
}
.dv-desk.dvs .sk-sec {
  margin: 0 auto;
  max-width: 900px;
}
.wai-k {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.wai-k .wk {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e9f0f1;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.wai-k .ki {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #eaf6f7;
  color: #007a8b;
  margin-bottom: 4px;
}
.wai-k .ki svg {
  width: 14px;
  height: 14px;
}
.wai-k .l {
  font-size: 11.5px;
  font-weight: 700;
  color: #4a6670;
}
.wai-k b {
  font-size: 24px;
  font-weight: 800;
  color: #0d3d40;
  line-height: 1.1;
}
.wai-k em {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: #6b7d87;
}
.wai-c {
  margin-top: 18px;
}
.wai-tb {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wai-tb .hd,
.wai-tb .rw {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) 120px minmax(0, 1.5fr) minmax(0, 1.6fr) 120px 160px;
  align-items: center;
  gap: 14px;
}
.wai-tb .hd {
  padding: 0 14px 4px;
}
.wai-tb .hd span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a9ba2;
}
.wai-tb .rw {
  position: relative;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f6f9fa;
  border: 1px solid transparent;
  text-align: left;
  font: inherit;
  color: #142b35;
  cursor: pointer;
  transition: 0.2s;
  overflow: hidden;
  animation: phUp 0.35s calc(var(--i) * 0.05s) both;
}
.wai-tb .rw:hover {
  background: #fff;
  border-color: #bfe6e0;
  box-shadow: 0 8px 18px -14px rgba(13, 61, 64, 0.4);
}
.wai-tb .nm b {
  display: block;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 5px;
}
.wai-tb .cx {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wai-tb .cx b {
  font-size: 15px;
  font-weight: 800;
  color: #0d3d40;
}
.wai-tb .cp .bar {
  display: flex;
  gap: 2px;
  height: 8px;
  min-width: 30%;
}
.wai-tb .cp .bar i {
  border-radius: 4px;
}
.wai-tb .cp .bar .a {
  background: #14b3a0;
}
.wai-tb .cp .bar .b {
  background: #e8a317;
}
.wai-tb .cp > span {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  color: #4a6670;
}
.wai-tb .cp > span b {
  color: #0d3d40;
}
.wai-tb .pl {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.wai-tb .pl > div {
  min-width: 0;
}
.wai-tb .pl b {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
#page .wai-tb .pl .mch {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}
.wai-tb .co b {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #0d3d40;
  margin-bottom: 4px;
}
.wai-tb .st {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: #9fb3b8;
}
.wai-tb .st svg {
  width: 14px;
  height: 14px;
}
.wst {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 99px;
  white-space: nowrap;
}
.wst.ok {
  background: #e3f6ef;
  color: #0f7a55;
}
.wst.run {
  background: #fff3d6;
  color: #8a5b00;
}
.wst.idle {
  background: #eef2f4;
  color: #5b6f78;
}
.wai-g {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 18px;
}
.wai-dn {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 6px 4px;
}
.wai-dn svg {
  width: 150px;
  height: 150px;
  flex: none;
}
.wai-dn .v {
  font-size: 22px;
  font-weight: 800;
  fill: #0d3d40;
}
.wai-dn .l {
  font-size: 9px;
  font-weight: 700;
  fill: #6b7d87;
}
.wai-lg {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wai-lg > div {
  display: grid;
  grid-template-columns: 12px auto;
  column-gap: 8px;
  align-items: center;
}
.wai-lg i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.wai-lg b {
  font-size: 20px;
  font-weight: 800;
  color: #0d3d40;
}
.wai-lg span {
  grid-column: 2;
  font-size: 12px;
  color: #4a6670;
  line-height: 1.4;
}
.wai-tr {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}
.wai-tr .tr {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: #f6f9fa;
}
.wai-tr .h {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wai-tr .h .rg {
  flex: 1;
  font-size: 11px;
  font-weight: 700;
  color: #6b7d87;
}
.wai-tr .h b {
  font-size: 20px;
  font-weight: 800;
  color: #0d3d40;
}
.wai-tr .ls {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
.wai-tr .ls span {
  font-size: 12px;
  font-weight: 700;
  padding: 6px 9px;
  border-radius: 9px;
  background: #fff;
  border: 1px solid #e6eef0;
  color: #24414a;
}
.wai-tr .ls em {
  font-style: normal;
  font-size: 11.5px;
  color: #9fb3b8;
  padding: 6px 0;
}
.wai-tr .ap {
  font-size: 11px;
  color: #5b6f78;
}
.wai-tr .ap b {
  color: #0d3d40;
}
.wai-ins {
  margin-top: 18px;
}
@media (max-width: 1100px) {
  .wai-k {
    grid-template-columns: repeat(2, 1fr);
  }
  .wai-g {
    grid-template-columns: 1fr;
  }
  .wai-tb .hd {
    display: none;
  }
  .wai-tb .rw {
    grid-template-columns: 1fr 1fr;
  }
}

.ical .cal-tg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  padding: 7px 12px;
  border-radius: 10px;
  background: #0d3d40;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  flex: none;
}
.ical .cal-tg svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s var(--ease);
}
.ical.open .cal-tg {
  background: #eaf6f7;
  color: #0d3d40;
}
.ical.open .cal-tg svg {
  transform: rotate(180deg);
}
.ical .cal-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}
.ical .cal-body > div {
  overflow: hidden;
  min-height: 0;
}
.ical.open .cal-body {
  grid-template-rows: 1fr;
}
.ical .cal-nx {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  transition: opacity 0.25s;
}
.ical.open .cal-nx {
  display: none;
}
.ical .cal-nx .nx {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f6f9fa;
  border: 1px solid #e9f0f1;
  text-align: left;
  min-width: 0;
}
.ical .cal-nx .nx:hover {
  border-color: #bfe6e0;
  background: #fff;
}
.ical .cal-nx .dt {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  width: 38px;
  padding: 4px 0;
  border-radius: 9px;
  background: #fff;
  border: 1px solid #e3eef0;
}
.ical .cal-nx .dt b {
  font-size: 15px;
  font-weight: 800;
  color: #0d3d40;
  line-height: 1.1;
}
.ical .cal-nx .dt em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  color: #8a9ba2;
}
.ical .cal-nx .tx {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ical .cal-nx .tx b {
  font-size: 12.5px;
  font-weight: 800;
  color: #142b35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ical .cal-nx .tx em {
  font-style: normal;
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  background: #e3f6f2;
  color: #0f6e64;
}
.ical .cal-nx .ef .tx em {
  background: #e8f0fc;
  color: #1f5bb5;
}
.ical .cal-nx .er .tx em {
  background: #efe8fb;
  color: #6b3fb5;
}
.ical .cal-nx .ea .tx em {
  background: #fff3d6;
  color: #8a5b00;
}
@media (max-width: 900px) {
  .ical .cal-nx {
    grid-template-columns: repeat(2, 1fr);
  }
}

.bha-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 22px;
  background: linear-gradient(115deg, #0b2f33, #0d4f57 45%, #14b3a0);
  color: #fff;
  box-shadow: 0 22px 44px -24px rgba(13, 79, 87, 0.6);
  position: relative;
  overflow: hidden;
  margin-top: 12px;
}
.bha-card:after {
  content: '';
  position: absolute;
  right: -40px;
  top: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 227, 214, 0.4), transparent 70%);
}
.bha-card .qi {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.16);
  flex: none;
  color: #ffd36b;
}
.bha-card .qi svg {
  width: 20px;
  height: 20px;
}
.bha-card .qlb {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a8f0e6;
}
.bha-card .cdi b {
  font-size: 18px;
}
.bha-card .cdi {
  flex: none;
  min-width: 0;
}
.bha-card .qlb,
.bha-card .cdi b {
  white-space: nowrap;
  overflow: visible;
}
.bha-card .chips {
  margin-left: auto;
  position: relative;
  z-index: 1;
}
.bha-card .chp {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
}
.bha-card .tg-btn {
  position: relative;
  z-index: 1;
  background: #fff;
  color: #0d4f57;
  box-shadow: none;
  height: 44px;
  padding: 0 18px;
  gap: 8px;
}
.bha-card .tg-btn svg {
  width: 15px;
  height: 15px;
}
.bha-card .tg-btn {
  white-space: nowrap;
  flex: none;
}
.bha-card .chips {
  flex-wrap: nowrap;
}
.ba-hero h1 em {
  font-style: normal;
  color: #ffd36b;
}
.ba-hero .lead {
  max-width: 640px;
  color: #cfeeea;
  font-size: 13.5px;
  line-height: 1.55;
  margin-top: 6px;
}
.ba-warn {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: 16px;
  background: #fff8e6;
  border: 1px solid #f3dd9f;
  color: #8a5b00;
}
.ba-warn svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
}
.ba-warn b {
  display: block;
  font-size: 14px;
  font-weight: 800;
}
.ba-warn span {
  font-size: 13px;
  line-height: 1.5;
}
.ba-live {
  margin-top: 18px;
  padding: 20px 22px;
  border-radius: 22px;
  background: linear-gradient(110deg, #0d3d40, #006b7a 60%, #0a8d9f);
  color: #fff;
  box-shadow: 0 22px 44px -26px rgba(13, 61, 64, 0.7);
}
.ba-lh {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ba-mi {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.14);
}
.ba-mi svg {
  width: 17px;
  height: 17px;
}
.ba-lh h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  flex: 1;
}
.ba-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 6px;
  background: #fff;
  color: #0d3d40;
}
.ba-live > p {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #d9f3f0;
}
.ba-live > p b {
  color: #fff;
}
.ba-lf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
.ba-st {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
  font-weight: 800;
}
.ba-st.live {
  background: #ffd36b;
  color: #3a2a05;
}
.ba-st.done {
  background: #e3f6ef;
  color: #0f7a55;
}
.ba-st .wv {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 14px;
}
.ba-st .wv i {
  width: 3px;
  border-radius: 2px;
  background: currentColor;
  animation: baWv 0.9s ease-in-out infinite;
}
.ba-st .wv i:nth-child(1) {
  height: 6px;
}
.ba-st .wv i:nth-child(2) {
  height: 12px;
  animation-delay: 0.15s;
}
.ba-st .wv i:nth-child(3) {
  height: 9px;
  animation-delay: 0.3s;
}
.ba-st .wv i:nth-child(4) {
  height: 13px;
  animation-delay: 0.45s;
}
.ba-st .wv i:nth-child(5) {
  height: 7px;
  animation-delay: 0.6s;
}
@keyframes baWv {
  50% {
    transform: scaleY(0.35);
  }
}
.ba-tm {
  font-size: 13px;
  font-weight: 800;
  color: #a8f0e6;
  font-variant-numeric: tabular-nums;
}
.ba-go {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 99px;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  transition: 0.2s;
}
.ba-go:hover {
  background: #fff;
  color: #0d3d40;
}
.ba-go svg {
  width: 15px;
  height: 15px;
}
.ba-go.end {
  border-color: #ffb4b4;
  color: #ffd6d6;
}
.ba-go.end:hover {
  background: #e5484d;
  border-color: #e5484d;
  color: #fff;
}
.ba-c {
  margin-top: 18px;
}
.ba-ch {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.ba-ci {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #eaf6f7;
  color: #007a8b;
  flex: none;
}
.ba-ci svg {
  width: 16px;
  height: 16px;
}
.ba-ch h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #142b35;
  flex: 1;
}
.ba-tx {
  margin: 0 0 12px;
  font-size: 13px;
  color: #4a6670;
}
.ba-ob {
  align-self: flex-start;
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid #d7e4e6;
  background: #fff;
  font-size: 12.5px;
  font-weight: 800;
  color: #142b35;
}
.ba-ob:hover {
  border-color: #9fd3da;
}
.ba-ob svg {
  width: 14px;
  height: 14px;
}
.ba-ph {
  margin: 0;
  font-size: 14px;
  color: #6b7d87;
}
.ba-cvh {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}
.ba-cvh b {
  font-size: 24px;
  font-weight: 800;
  color: #0d3d40;
}
.ba-cvh span {
  font-size: 13px;
  font-weight: 600;
  color: #4a6670;
}
.ba-cv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
}
.ba-cv .r {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 110px 62px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 11px;
  background: #f6f9fa;
}
.ba-cv .k {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 6px;
  background: #0d3d40;
  color: #ffd36b;
  text-align: center;
}
.ba-cv b {
  font-size: 12.5px;
  font-weight: 700;
  color: #142b35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ba-cv .bb {
  height: 6px;
  border-radius: 99px;
  background: #e3eced;
  overflow: hidden;
}
.ba-cv .bb i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: #14b3a0;
  transition: width 0.6s var(--ease);
}
.ba-cv .mid .bb i {
  background: #e8a317;
}
.ba-cv em {
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  color: #8a9ba2;
  text-align: right;
}
.ba-cv .ok em {
  color: #0f7a55;
}
.ba-cv .mid em {
  color: #8a5b00;
}
.ba-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ba-m {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 78%;
}
.ba-m.me {
  flex-direction: row-reverse;
  align-self: flex-end;
}
.ba-m.new {
  animation: phUp 0.35s both;
}
.ba-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #0d3d40;
  color: #ffd36b;
  flex: none;
}
.ba-av svg {
  width: 14px;
  height: 14px;
}
.ba-m > div {
  padding: 10px 14px;
  border-radius: 16px;
  background: #f1f6f7;
}
.ba-m.ai > div {
  border-top-left-radius: 4px;
}
.ba-m.me > div {
  background: #e3f6f2;
  border-top-right-radius: 4px;
}
.ba-m .bwho {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: #007a8b;
  margin-bottom: 3px;
}
.ba-m p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #142b35;
}
.ba-m .tg2 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
}
.ba-m .tg2 em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  background: #fff;
  color: #0d4f57;
  border: 1px solid #bfe6e0;
}
.ba-res {
  margin-top: 18px;
}
.ba-tag {
  font-size: 12px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 99px;
}
.ba-tag.ok {
  background: #e3f6ef;
  color: #0f7a55;
}
.ba-sg {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.ba-sg .sc {
  padding: 12px;
  border-radius: 14px;
  background: #f6f9fa;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ba-sg .h {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}
.ba-sg .h b {
  font-size: 12.5px;
  font-weight: 800;
  color: #142b35;
}
.ba-sg .blv {
  flex: none;
  width: auto;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 99px;
  background: #eaf6f7;
  color: #0d4f57;
}
.ba-sg .blv.bv5,
.ba-sg .blv.bv4 {
  background: #0d3d40;
  color: #ffd36b;
}
.ba-sg .dots {
  display: flex;
  gap: 3px;
}
.ba-sg .dots i {
  flex: 1;
  height: 5px;
  border-radius: 99px;
  background: #e3eced;
}
.ba-sg .dots i.on {
  background: #14b3a0;
}
.ba-sg p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #4a6670;
}
.ba-res .ins {
  margin-top: 14px;
}
.ba-act {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}
@media (max-width: 1000px) {
  .ba-cv {
    grid-template-columns: 1fr;
  }
  .ba-sg {
    grid-template-columns: repeat(2, 1fr);
  }
  .bha-card {
    flex-wrap: wrap;
  }
}

.wa-map {
  min-height: 420px;
}
.wa-map svg {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

.wn-fn .r {
  grid-template-columns: 30px 190px minmax(0, 1fr) 40px 70px;
}
.wn-split {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed #e3eced;
}
.wn-split > div {
  padding: 10px 12px;
  border-radius: 12px;
  background: #f6f9fa;
}
.wn-split b {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #142b35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wn-split .bar {
  display: flex;
  gap: 3px;
  margin: 8px 0 6px;
}
.wn-split .bar i {
  flex: 1;
  height: 8px;
  border-radius: 3px;
  background: #14b3a0;
}
.wn-split .bar i.x {
  background: #e8a317;
}
.wn-split span {
  font-size: 11px;
  color: #4a6670;
}
.wn-split em {
  font-style: normal;
  font-weight: 800;
  color: #0d3d40;
}
.wn-split em.x {
  color: #8a5b00;
}
.wn-src {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wn-src .r {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) 64px minmax(0, 1fr) 22px;
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  border-radius: 11px;
  background: #f6f9fa;
  animation: phUp 0.35s calc(var(--i) * 0.04s) both;
}
.wn-src .nm b {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #142b35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#page .wn-src .nm .mch {
  margin-top: 3px;
  font-size: 10px;
  padding: 1px 7px;
}
.wn-src .av {
  display: flex;
}
.wn-src .av > * {
  margin-left: -6px;
  border: 2px solid #f6f9fa;
  border-radius: 50%;
}
.wn-src .av > *:first-child {
  margin-left: 0;
}
.wn-src .hv,
.wn-ml .hv {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: #fff3d6;
  color: #8a5b00;
  font-size: 13px;
  font-weight: 800;
  border: 1.5px dashed #e8a317;
}
.wn-src .bb {
  height: 10px;
  border-radius: 99px;
  background: #e3eced;
  overflow: hidden;
}
.wn-src .bb i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #5fd6c3, #0d3d40);
}
.wn-src .r.pl .bb i {
  background: linear-gradient(90deg, #9fd3da, #007a8b);
}
.wn-src .r.ex .bb i {
  background: linear-gradient(90deg, #ffd36b, #e8a317);
}
.wn-src strong {
  font-size: 14px;
  font-weight: 800;
  color: #0d3d40;
  text-align: right;
}
.wn-src .r.ex strong {
  color: #8a5b00;
}
.wn-tl {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 6px;
}
.wn-tl .ax,
.wn-tl .row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.wn-tl .mo {
  position: relative;
  height: 16px;
}
.wn-tl .mo span {
  position: absolute;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 800;
  color: #8a9ba2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.wn-tl .mo em {
  font-style: normal;
  color: #007a8b;
}
.wn-tl .nm b {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  color: #142b35;
}
#page .wn-tl .nm .mch {
  margin-top: 4px;
}
.wn-tl .tr {
  position: relative;
  height: 58px;
  border-radius: 12px;
  background: #f6f9fa;
  animation: phUp 0.4s calc(var(--i) * 0.08s) both;
}
.wn-tl .gl {
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: #e3eced;
}
.wn-tl .sa,
.wn-tl .sb {
  position: absolute;
  top: 12px;
  height: 14px;
  border-radius: 7px;
}
.wn-tl .sa {
  background: linear-gradient(90deg, #14b3a0, #0d3d40);
}
.wn-tl .sb {
  background: repeating-linear-gradient(135deg, #cfeee9 0 6px, #e3f6f2 6px 12px);
}
.wn-tl .lbl {
  position: absolute;
  top: 32px;
  transform: translateX(-50%);
  font-size: 10.5px;
  font-weight: 800;
  color: #0d4f57;
  white-space: nowrap;
  background: #fff;
  padding: 2px 7px;
  border-radius: 99px;
  border: 1px solid #d6ebe7;
}
.wn-tl .st {
  position: absolute;
  top: 7px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wn-tl .st i {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: #e8a317;
  transform: rotate(45deg);
  border: 3px solid #fff;
  box-shadow: 0 4px 10px -4px rgba(138, 91, 0, 0.6);
}
.wn-tl .st em {
  margin-top: 6px;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  color: #8a5b00;
  white-space: nowrap;
}
.wn-tl .today {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(184px + (100% - 184px) * var(--x) / 100);
  width: 0;
  border-left: 2px dashed #e5484d;
  pointer-events: none;
}
.wn-tl .today span {
  position: absolute;
  bottom: -4px;
  left: -2px;
  transform: translate(-50%, 100%);
  font-size: 9.5px;
  font-weight: 800;
  color: #e5484d;
  white-space: nowrap;
}
.wn-hm {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(5, minmax(0, 1fr)) 92px;
  gap: 6px;
  align-items: center;
}
.wn-hm .ch {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a9ba2;
  text-align: center;
}
.wn-hm .rh {
  font-size: 12px;
  font-weight: 800;
  color: #142b35;
  line-height: 1.3;
}
.wn-hm .cl {
  height: 46px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
}
.wn-hm .tt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.wn-hm .tt b {
  font-size: 20px;
  font-weight: 800;
  color: #0d3d40;
  line-height: 1;
}
.wn-tier {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.wn-tier > div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 8px;
  padding: 10px;
  border-radius: 12px;
  background: #f6f9fa;
  opacity: 0.6;
}
.wn-tier > div.on {
  opacity: 1;
  background: #eaf6f7;
}
.wn-tier b {
  font-size: 18px;
  font-weight: 800;
  color: #0d3d40;
  text-align: right;
}
.wn-tier em,
.wn-tier > div > span:last-child {
  grid-column: 1/-1;
  font-style: normal;
  font-size: 10.5px;
  color: #5b6f78;
}
.wn-tier em {
  font-weight: 800;
  color: #24414a;
}
.wn-lb .sd-tabs button {
  white-space: nowrap;
}
.wn-tg {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 280px;
  gap: 14px;
  align-items: stretch;
}
.wn-pl {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.wn-pl .k {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7fe3d6;
}
.wn-pl .wnpa {
  margin-top: 10px;
  padding: 4px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd36b, #14b3a0);
}
.wn-pl .n {
  margin-top: 10px;
  font-size: 15px;
}
.wn-pl .r {
  font-size: 11px;
  font-weight: 700;
  color: #a8f0e6;
  margin-top: 3px;
}
.wn-pl .sc {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wn-pl .sc b {
  font-size: 34px;
  font-weight: 800;
  color: #ffd36b;
  line-height: 1;
}
.wn-pl .sc span {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 3px;
}
.wn-pl .ms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 100%;
  margin-top: 14px;
}
.wn-pl .ms div {
  padding: 8px 4px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.07);
}
.wn-pl .ms b {
  display: block;
  font-size: 13px;
}
.wn-pl .ms span {
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.55);
}
.wn-go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 11px;
  background: #fff;
  color: #0d3d40;
  font-size: 12px;
  font-weight: 800;
  transform: translateY(6px);
}
.wn-go svg {
  width: 13px;
  height: 13px;
}
.wn-ml {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.wn-ml .lhd,
.wn-ml .wnr {
  display: grid;
  grid-template-columns: 22px minmax(0, 1.3fr) minmax(0, 1fr) 110px 110px;
  gap: 10px;
  align-items: center;
}
.wn-ml .lhd {
  padding: 2px 10px 4px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.wn-ml .wnr {
  padding: 8px 10px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.06);
  animation: phUp 0.35s calc(var(--i) * 0.05s) both;
}
.wn-ml .wnr.hire {
  background: rgba(255, 211, 107, 0.08);
  border: 1px dashed rgba(255, 211, 107, 0.35);
}
.wn-ml .wnk {
  font-size: 11px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.5);
}
.wn-ml .w {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.wn-ml .w .cdi {
  min-width: 0;
}
.wn-ml .w b {
  display: block;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wn-ml .w .cdi > span {
  display: block;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wn-ml .hv {
  width: 30px;
  height: 30px;
  flex: none;
  background: rgba(255, 211, 107, 0.15);
  color: #ffd36b;
  border-color: #ffd36b;
}
.wn-ml .rl {
  font-size: 11.5px;
  font-weight: 700;
  color: #d6f3f0;
}
.wn-ml .ft,
.wn-ml .ld {
  display: grid;
  grid-template-columns: 1fr 34px;
  gap: 6px;
  align-items: center;
}
.wn-ml .bb {
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.wn-ml .bb i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: #5fd6c3;
}
.wn-ml .ld .bb i {
  background: #9fd3da;
}
.wn-ml .ld.hi .bb i {
  background: #ffd36b;
}
.wn-ml .ld.hi strong {
  color: #ffd36b;
}
.wn-ml strong {
  font-size: 11.5px;
  text-align: right;
}
.wn-ml .ex {
  justify-self: start;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 99px;
  background: #ffd36b;
  color: #3a2a05;
}
.wn-ml .sum {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
}
.wn-ml .sum div {
  padding: 9px 11px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
}
.wn-ml .sum span {
  display: block;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
}
.wn-ml .sum b {
  font-size: 17px;
}
.wn-ml .sum div:first-child {
  background: #ffd36b;
  color: #3a2a05;
}
.wn-ml .sum div:first-child span {
  color: #6b4500;
}
.wn-rk .it {
  padding: 9px 0;
}
.wn-rk .it + .it {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.wn-rk .it .r {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.wn-rk .it b {
  font-size: 12px;
}
.wn-rk .it em {
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 99px;
}
.wn-rk .it em.g {
  background: rgba(95, 214, 195, 0.16);
  color: #7fe3d6;
}
.wn-rk .it em.y {
  background: rgba(255, 211, 107, 0.18);
  color: #ffd36b;
}
.wn-rk .it em.r {
  background: rgba(229, 72, 77, 0.2);
  color: #ff9ea1;
}
.wn-rk .it > span {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.55);
}
.wn-us {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wn-us .r {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 70px 96px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 11px;
  background: #f6f9fa;
  animation: phUp 0.35s calc(var(--i) * 0.05s) both;
}
.wn-us b {
  font-size: 12px;
  font-weight: 800;
  color: #142b35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wn-us .bb {
  position: relative;
  height: 10px;
  border-radius: 99px;
  background: #e3eced;
  overflow: hidden;
}
.wn-us .bb i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 99px;
}
.wn-us .bb .f {
  background: #9fd9d1;
}
.wn-us .bb .t {
  background: #0d3d40;
}
.wn-us .r.nd .bb .t {
  background: #e8a317;
}
.wn-us .n {
  font-size: 11px;
  font-weight: 800;
  color: #0d3d40;
}
.wn-us em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  color: #0f7a55;
  text-align: right;
}
.wn-us .r.nd em {
  color: #8a5b00;
}
.wn-rl {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wn-rl .r {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 10px;
  border-radius: 11px;
  background: #f6f9fa;
  animation: phUp 0.35s calc(var(--i) * 0.05s) both;
}
.wn-rl .lv {
  flex: none;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 99px;
  background: #fff3d6;
  color: #8a5b00;
}
.wn-rl .lv.r {
  background: #fdecee;
  color: #b4232f;
}
.wn-rl b {
  display: block;
  font-size: 12px;
  color: #142b35;
  line-height: 1.35;
}
.wn-rl .r > div > span {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  color: #6b7d87;
}
@media (max-width: 1200px) {
  .wn-tg {
    grid-template-columns: 1fr;
  }
  .wn-split {
    grid-template-columns: 1fr;
  }
}

.wn-vb {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  margin-top: 6px;
}
.wn-vb .c {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  animation: phUp 0.4s calc(var(--i) * 0.05s) both;
}
.wn-vb .col {
  position: relative;
  width: 100%;
  height: 170px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  border-radius: 12px;
  background: #f6f9fa;
  padding: 0 18%;
}
.wn-vb .col i {
  display: block;
  width: 100%;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, #14b3a0, #0d3d40);
  min-height: 6px;
}
.wn-vb .col b {
  font-size: 18px;
  font-weight: 800;
  color: #0d3d40;
  margin-bottom: 6px;
}
.wn-vb .pl .col i {
  background: linear-gradient(180deg, #9fd3da, #3e98a5);
}
.wn-vb .ex .col i {
  background: linear-gradient(180deg, #ffd36b, #e8a317);
}
.wn-vb .ex .col b {
  color: #8a5b00;
}
.wn-vb .ppl {
  display: flex;
  height: 26px;
  align-items: center;
}
.wn-vb .ppl > * {
  margin-left: -7px;
  border-radius: 50%;
}
.wn-vb .ppl > *:first-child {
  margin-left: 0;
}
.wn-vb .hv {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: #fff3d6;
  color: #8a5b00;
  font-size: 13px;
  font-weight: 800;
  border: 1.5px dashed #e8a317;
}
.wn-vb .wnl {
  font-size: 11.5px;
  font-weight: 800;
  color: #142b35;
  line-height: 1.3;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#page .wn-vb .mch {
  font-size: 9.5px;
  padding: 2px 7px;
  white-space: normal;
}
.wn-vb .na {
  font-size: 10px;
  font-weight: 700;
  color: #8a9ba2;
  padding: 2px 0;
}
.wn-vb ~ .ins {
  margin-top: 14px;
}
.wn-hm {
  grid-template-columns: minmax(0, 1.7fr) repeat(5, minmax(0, 1fr)) 70px !important;
}
.wn-hm .ch {
  letter-spacing: 0.02em;
  font-size: 9px;
}
.wn-tl .ax,
.wn-tl .row {
  grid-template-columns: 210px minmax(0, 1fr);
}
.wn-tl .today {
  left: calc(224px + (100% - 224px) * var(--x) / 100);
}
.wn-ml .wnr {
  min-height: 0;
}

.wn-ml .lhd,
.wn-ml .wnr {
  grid-template-columns: 20px minmax(0, 1.5fr) minmax(0, 1fr) 92px 92px !important;
}
.wn-ml .rl {
  line-height: 1.35;
}
.wn-vb {
  align-items: stretch !important;
}
.wn-vb .c {
  justify-content: flex-start;
}

.wk > * + * {
  margin-top: 14px;
}
.wk .wk-hc {
  margin-left: auto;
}
.wk-sh {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px !important;
  padding: 0 4px;
}
.wk-sh .ey {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #007a8b;
}
.wk-sh h2 {
  margin: 3px 0 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0d3d40;
}
.wk-k em {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  color: #6b7d87;
  margin-top: 1px;
}
.wk-k.g .fz-i {
  color: #0f8a7c;
}
.wk-k.s .fz-i {
  background: linear-gradient(145deg, #fff3d6, #fff);
  box-shadow: inset 0 0 0 1px #f3dd9f;
  color: #b07a0c;
}
.wk-k.s b {
  color: #a86f10;
}
.wk-k.x .fz-i {
  background: linear-gradient(145deg, #0d3d40, #14706d);
  box-shadow: none;
  color: #ffd36b;
}
.wk-dh,
.wk-dr {
  display: grid;
  grid-template-columns: minmax(160px, 1.2fr) 80px minmax(140px, 1.4fr) 80px 70px 120px minmax(
      180px,
      1.6fr
    ) 24px;
  gap: 12px;
  align-items: center;
}
.wk-dh {
  padding: 0 12px 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a9ca5;
}
.wk-dr {
  padding: 12px;
  border-radius: 16px;
  border: 1px solid #edf3f4;
  background: #fff;
  cursor: pointer;
  transition: 0.2s;
  margin-top: 6px;
  animation: phUp 0.35s calc(var(--i) * 0.04s) both;
}
.wk-dr:hover,
.wk-tr:hover {
  border-color: #bfe6e0;
  box-shadow: 0 10px 22px -18px rgba(13, 61, 64, 0.5);
}
.wk-dr.hot {
  border-color: #f3dd9f;
  background: linear-gradient(90deg, #fffaf0, #fff);
}
.wk-dr b {
  font-size: 13.5px;
  font-weight: 800;
  color: #142b35;
}
.wk-dr .n {
  font-size: 13px;
  font-weight: 700;
  color: #4a6670;
}
.wk-dr .st {
  display: flex;
  gap: 2px;
  height: 10px;
}
.wk-dr .st i {
  border-radius: 3px;
}
.wk-dr .wkp {
  font-size: 13.5px;
  font-weight: 800;
}
.wk-dr .wkp.g {
  color: #0f8a7c;
}
.wk-dr .wkp.s {
  color: #a86f10;
}
.wk-dr .wkp.x {
  color: #0d3d40;
}
.wk-dr .th {
  font-size: 12px;
  color: #4a6670;
  line-height: 1.4;
}
.wk-dr .act,
.wk-tr .act {
  display: flex;
  justify-content: flex-end;
  color: #9fb3b8;
}
.wk-dr .act svg,
.wk-tr .act svg {
  width: 16px;
  height: 16px;
}
.wk-th,
.wk-tr {
  display: grid;
  grid-template-columns: 30px minmax(200px, 1.5fr) repeat(3, minmax(0, 1fr)) 60px 24px;
  gap: 14px;
  align-items: center;
}
.wk-th {
  padding: 12px 12px 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a9ca5;
}
.wk-th span:nth-child(6) {
  text-align: right;
}
.wk-tr {
  padding: 11px 12px;
  border-radius: 16px;
  border: 1px solid #edf3f4;
  background: #fff;
  cursor: pointer;
  transition: 0.2s;
  margin-top: 6px;
  animation: phUp 0.35s calc(var(--i) * 0.04s) both;
}
.wk-tr .wkk {
  width: 26px;
  flex: none;
  justify-self: start;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 11.5px;
  font-weight: 800;
  background: #eef3f4;
  color: #4a6670;
}
.wk-tr .wkk.wkt {
  background: linear-gradient(135deg, #ffd36b, #e8a317);
  color: #3a2a05;
}
.wk-tr > b {
  font-size: 13px;
  font-weight: 800;
  color: #142b35;
}
.wk-tr .br {
  display: grid;
  grid-template-columns: 1fr 30px;
  gap: 8px;
  align-items: center;
}
.wk-tr .bb {
  height: 8px;
  border-radius: 99px;
  background: #eef3f4;
  overflow: hidden;
}
.wk-tr .bb i {
  display: block;
  height: 100%;
  border-radius: 99px;
}
.wk-tr .br em {
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  color: #24414a;
  text-align: right;
}
.wk-tr strong {
  font-size: 16px;
  font-weight: 800;
  color: #0d3d40;
  text-align: right;
}
.wk-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px dashed #cfe2e4;
  font-size: 12.5px;
  font-weight: 800;
  color: #007a8b;
}
.wk-more:hover {
  background: #f4fafb;
}
.wk-more svg {
  width: 14px;
  height: 14px;
}
.wk .sn {
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 99px;
  white-space: nowrap;
}
.wk .sn.g {
  background: #e3f6f2;
  color: #0f6e64;
}
.wk .sn.s {
  background: #fff3d6;
  color: #8a5b00;
}
.wk .sn.x {
  background: #0d3d40;
  color: #ffd36b;
}
.kt2-h.wk-kt,
.kt2.wk-kt {
  grid-template-columns: minmax(210px, 1.6fr) 130px 100px 140px 120px 130px 120px 20px;
}
.wk-fg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.wk-f {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid #edf3f4;
  background: #f8fbfb;
}
.wk-f.x {
  background: linear-gradient(160deg, #0d3d40, #0f5a57);
  border-color: #0d3d40;
  color: #fff;
}
.wk-f.s {
  background: linear-gradient(160deg, #fffaf0, #fff);
  border-color: #f3dd9f;
}
.wk-f .h {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wk-f .h b {
  font-size: 24px;
  font-weight: 800;
  color: #0d3d40;
}
.wk-f.x .h b {
  color: #ffd36b;
}
.wk-f.x .sn.x {
  background: #ffd36b;
  color: #3a2a05;
}
.wk-f h4 {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 800;
}
.wk-f p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #5b6f78;
}
.wk-f.x p {
  color: #a8f0e6;
}
.wk-f .pl {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  flex: 1;
}
.wk-f .pe {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 7px 9px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e9f0f1;
  text-align: left;
}
.wk-f.x .pe {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.1);
}
.wk-f .pe span {
  min-width: 0;
}
.wk-f .pe b {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wk-f .pe em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  color: #6b7d87;
}
.wk-f.x .pe em {
  color: #7fe3d6;
}
.wk-f .pe .tp {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  background: #eaf6f7;
  color: #0d4f57;
  max-width: 130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wk-f.x .pe .tp {
  background: rgba(255, 211, 107, 0.15);
  color: #ffd36b;
}
.wk-ab {
  margin-top: 6px;
  padding: 10px;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 800;
  background: #0d3d40;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.wk-f.x .wk-ab {
  background: #ffd36b;
  color: #3a2a05;
}
.wk-f.s .wk-ab {
  background: linear-gradient(135deg, #ffd36b, #e8a317);
  color: #3a2a05;
}
.wk-ab.dn {
  background: #e3f6ef !important;
  color: #0f7a55 !important;
}
.wk-ab svg {
  width: 13px;
  height: 13px;
}
@media (max-width: 1100px) {
  .wk-fg {
    grid-template-columns: 1fr;
  }
}
.wk .wa-ch h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* tabel Work Insight: kolom boleh menyusut, tidak keluar kartu */
.kt2-h.wk-kt,
.kt2.wk-kt {
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 1.05fr) minmax(
      0,
      0.95fr
    ) minmax(0, 1fr) minmax(0, 0.95fr) 16px;
  gap: 10px;
}
.kt2.wk-kt > *,
.wk-dr > *,
.wk-tr > * {
  min-width: 0;
}
.kt2.wk-kt .pp .cdi {
  min-width: 0;
}
.kt2.wk-kt .pp b,
.kt2.wk-kt .pp .cdi span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kt2.wk-kt .chp,
.wk .sn {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}
.kt2.wk-kt .tr svg {
  width: 100%;
  max-width: 90px;
  min-width: 0;
  flex: 1 1 auto;
}
.kt2.wk-kt .sc .bb {
  min-width: 0;
}
.kt2-h.wk-kt span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wk-dh,
.wk-dr {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.55fr) minmax(0, 1.3fr) minmax(
      0,
      0.6fr
    ) minmax(0, 0.55fr) minmax(0, 0.85fr) minmax(0, 1.6fr) 16px;
  gap: 10px;
}
.wk-dh span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wk-th,
.wk-tr {
  grid-template-columns: 30px minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) 52px 16px;
  gap: 12px;
}
.wk-th span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wk-tr > b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kt2.wk-kt .act,
.wk-dr .act,
.wk-tr .act {
  justify-self: end;
}

.wa-optg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 14px;
  align-items: stretch;
}
.wa-optg .wo2 {
  grid-row: span 6;
  display: grid;
  grid-template-rows: subgrid;
  gap: 14px;
  margin: 0;
  align-content: start;
}
.wo-h {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.wo-h > div {
  flex: 1;
  min-width: 0;
}
.wo-k {
  flex: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  border-radius: 10px;
  background: #0d3d40;
  color: #ffd36b;
}
.wo2:not(.on) .wo-k {
  background: #eef3f4;
  color: #4a6670;
}
.wo-h h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #142b35;
  line-height: 1.3;
}
.wo-h p {
  margin: 3px 0 0;
  font-size: 12px;
  color: #5b6f78;
  line-height: 1.45;
}
.wo-h .pill {
  flex: none;
}
.ot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 16px 12px 12px;
  border-radius: 16px;
  background: #f8fbfb;
  border: 1px solid #edf3f4;
}
.ot-top {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ot-r0,
.ot-r1 {
  min-width: 200px;
  padding: 8px 16px;
  border-radius: 12px;
  text-align: center;
}
.ot-r0 {
  background: #0d3d40;
  color: #fff;
}
.ot-r0 b,
.ot-r1 b {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
}
.ot-r0 span {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}
.ot-r1 {
  background: #e3f7f2;
  border: 1px solid #9fe0d4;
}
.ot-r1 b {
  color: #0d3d40;
}
.ot-r1 span {
  font-size: 11px;
  color: #4a6670;
}
.ot-v {
  display: block;
  width: 2px;
  height: 16px;
  background: #bcd9d6;
}
.ot-kids {
  display: flex;
  align-items: stretch;
}
.ot-k {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  padding: 16px 6px 0;
  display: flex;
}
.ot-k:before,
.ot-k:after {
  content: '';
  position: absolute;
  top: 0;
  height: 2px;
  background: #bcd9d6;
  width: 50%;
}
.ot-k:before {
  left: 0;
}
.ot-k:after {
  right: 0;
}
.ot-k:first-child:before,
.ot-k:last-child:after {
  display: none;
}
.ot-k > .ot-n:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 16px;
  margin-left: -1px;
  background: #bcd9d6;
}
.ot-kids.one .ot-k:before,
.ot-kids.one .ot-k:after {
  display: none;
}
.ot-n {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 10px 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #d6ebe7;
}
.ot-n.ext {
  background: #fffaf0;
  border-color: #f3dd9f;
}
.ot-n b {
  font-size: 12.5px;
  font-weight: 800;
  color: #142b35;
  line-height: 1.3;
}
.ot-n .q {
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 99px;
  background: #eaf6f7;
  color: #0d4f57;
}
.ot-n.ext .q {
  background: #fff3d6;
  color: #8a5b00;
}
.ot-n .pp {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: 100%;
  margin-top: 4px;
}
.ot-n .pi {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border-radius: 99px;
  background: #f3f9f8;
  min-width: 0;
}
.ot-n .pi em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: #24414a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ot-n .pi.hr {
  background: #fff3d6;
}
.ot-n .pi.hr i {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-weight: 800;
  color: #8a5b00;
  border: 1.5px dashed #e8a317;
  background: #fff;
}
.ot-n .pi.hr em {
  color: #8a5b00;
}
.ot-lg,
.wo-sp .lg {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.ot-lg {
  margin-top: 12px;
}
.ot-lg span,
.wo-sp .lg span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #4a6670;
}
.ot-lg i,
.wo-sp .lg i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.ot-lg i.a,
.wo-sp i.a {
  background: #14b3a0;
}
.ot-lg i.b,
.wo-sp i.b {
  background: #e8a317;
}
.wo-m {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.wo-sp {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 16px;
  background: #f8fbfb;
  border: 1px solid #edf3f4;
}
.wo-sp .h {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
.wo-sp .h b {
  font-size: 13px;
  font-weight: 800;
  color: #0d3d40;
}
.wo-sp .r {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px 150px;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #edf3f4;
}
.wo-sp .nm b {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  color: #142b35;
}
.wo-sp .nm span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}
.wo-sp .nm .in {
  color: #0d7d77;
}
.wo-sp .nm .mx {
  color: #4a6670;
}
.wo-sp .nm .ex {
  color: #a86f10;
}
.wo-sp .dt {
  display: flex;
  gap: 3px;
}
.wo-sp .dt i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.wo-sp .ct {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.wo-sp em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 99px;
  white-space: nowrap;
}
.wo-sp em.a {
  background: #e0f6f2;
  color: #0d7d77;
}
.wo-sp em.b {
  background: #fff3d6;
  color: #8a5b00;
}
.wo-pc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: stretch;
}
.wo2 .wa-pick {
  align-self: end;
}
@media (max-width: 1100px) {
  .wa-optg {
    grid-template-columns: 1fr;
  }
  .wa-optg .wo2 {
    grid-row: auto;
    display: flex;
    flex-direction: column;
  }
}

.wn-vb .wnf {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 7px 4px;
  border-radius: 10px;
  background: #f6f9fa;
}
.wn-vb .wnf b {
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}
.wn-vb .wnf span {
  font-size: 10px;
  font-weight: 600;
  color: #6b7d87;
  line-height: 1.25;
  white-space: nowrap;
}
.wn-vb .wnf.ai {
  background: #e3f6f2;
}
.wn-vb .wnf.ai b {
  color: #0f6e64;
}
.wn-vb .wnf.no {
  background: #fff6e3;
}
.wn-vb .wnf.no b {
  color: #a86f10;
}
.wn-vb .wnf.no span {
  color: #8a5b00;
}
.wn-vb .wnf.pl b {
  color: #2b6f78;
}
.wn-vb .wnf.ex b {
  color: #8a5b00;
}
.wn-vb .wnf {
  margin-top: auto;
}
.wn-vb .c {
  height: 100%;
}

#sdAi .wa3 + .wa3 {
  margin-top: 14px;
}
.sdh {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.sdf {
  margin: 12px 0 4px;
  flex-wrap: wrap;
}
.sdf button em {
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 99px;
  background: rgba(13, 61, 64, 0.08);
}
.sdf button.on em {
  background: rgba(255, 255, 255, 0.2);
}
.sdg4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  margin-top: 10px;
}
.sdc .r1 .sdk {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 99px;
  white-space: nowrap;
}
.sdc .r1 .sdk svg {
  width: 11px;
  height: 11px;
}
.sdc.gold .sdk {
  background: #fff3d6;
  color: #8a5b00;
}
.sdc.amber .sdk {
  background: #fdecdc;
  color: #9a4a12;
}
.sdc.teal .sdk {
  background: #e3f6f2;
  color: #0f6e64;
}
.sdc.deep .sdk {
  background: #0d3d40;
  color: #ffd36b;
}
.sdc .r1 {
  flex-wrap: wrap;
  row-gap: 4px;
}
.sdm,
.sdnm {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 13px;
  background: #fff;
  border: 1px solid #e9eff0;
}
.sdm > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px 36px;
  gap: 8px;
  align-items: center;
}
.sdm span {
  font-size: 11px;
  font-weight: 700;
  color: #4a6670;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sdm .bb {
  height: 6px;
  border-radius: 99px;
  background: #e3eced;
  overflow: hidden;
}
.sdm .bb i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: #14b3a0;
}
.sdm .bb i.lo {
  background: #e8a317;
}
.sdm b {
  font-size: 12px;
  font-weight: 800;
  color: #0d3d40;
  text-align: right;
}
.sdm b.lo {
  color: #a86f10;
}
.sdnm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sdnm > div {
  padding: 6px 8px;
  border-radius: 9px;
  background: #f6f9fa;
}
.sdnm span {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a9ba2;
}
.sdnm b {
  font-size: 14px;
  font-weight: 800;
  color: #0d3d40;
}
.sdpin {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #0d3d40;
  color: #ffd36b;
  flex: none;
}
.sdpin svg {
  width: 16px;
  height: 16px;
}
.aec .sg .sdai {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: #0d3d40;
  color: #ffd36b;
  flex: none;
}
.aec .sg .sdai svg {
  width: 12px;
  height: 12px;
}
.sdc .sg .tk,
.sdn .sg .tk {
  grid-template-columns: auto minmax(0, 1fr);
}
.sdc .sg.idle,
.sdn .sg.idle {
  min-height: 118px;
}
@media (max-width: 1250px) {
  .sdg4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.sdc .sdtop {
  display: flex;
}
.sdc .sdk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 99px;
  white-space: nowrap;
}
.sdc .sdk svg {
  width: 12px;
  height: 12px;
}
.sdc .sdp {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.sdc .sdp > div {
  min-width: 0;
}
.sdc .sdp b {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: #142b35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sdc .sdp span {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  color: #5b6f78;
}
.sdc .sdp span svg {
  width: 11px;
  height: 11px;
}
.sdc .sdsig {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.sdc .sdsig span {
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 99px;
  background: #fff;
  border: 1px solid #e3eced;
  color: #24414a;
  white-space: nowrap;
}
.sdc.gold .sdsig span:first-child,
.sdc.amber .sdsig span:first-child {
  border-color: #f3dd9f;
  background: #fffaf0;
  color: #8a5b00;
}
.sdm > div {
  grid-template-columns: minmax(0, 1fr) 46px 34px !important;
}
.sdm span {
  font-size: 11px;
}

/* podium v2 */
.sd-pod .pg {
  gap: 8px;
  align-items: end;
}
.pdm {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  animation: phUp 0.4s both;
}
.pdav {
  position: relative;
  padding: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  margin-bottom: 6px;
  line-height: 0;
}
.pdm.p1 .pdav {
  background: conic-gradient(#ffd36b, #fff3c4, #ffd36b);
}
.pdav i {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  color: #3a2a05;
  border: 2px solid #0d3d40;
}
.pdm.p1 .pdav i {
  background: #ffd36b;
}
.pdm.p2 .pdav i {
  background: #e3edef;
}
.pdm.p3 .pdav i {
  background: #f1c59a;
}
.pdm > b {
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pdm > strong {
  font-size: 15px;
  font-weight: 800;
  color: #7fe3d6;
  line-height: 1.2;
  margin: 2px 0 8px;
  white-space: nowrap;
}
.pdm.p1 > strong {
  color: #ffd36b;
}
.pdbl {
  width: 100%;
  border-radius: 12px 12px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
  gap: 4px;
}
.pdbl span {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, 0.9);
}
.pdbl em {
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.16);
  color: #fff;
}
.pdm.p1 .pdbl {
  height: 118px;
  background: linear-gradient(180deg, #ffd36b, #c88a12);
}
.pdm.p1 .pdbl span {
  color: #5a3d00;
}
.pdm.p2 .pdbl {
  height: 86px;
  background: linear-gradient(180deg, #e3edef, #9fb6bb);
}
.pdm.p2 .pdbl span {
  color: #35505a;
}
.pdm.p3 .pdbl {
  height: 62px;
  background: linear-gradient(180deg, #f1c59a, #b9763d);
}
.pdm.p3 .pdbl span {
  color: #5a3415;
}

.wl2s {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.wl2s .g {
  padding: 12px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.wl2s .g.hi {
  background: #fffaf0;
  border: 1px solid #f3dd9f;
}
.wl2s .g.lo {
  background: #f2fbf8;
  border: 1px solid #cdeee5;
}
.wl2s .h {
  display: flex;
  flex-direction: column;
  margin-bottom: 4px;
}
.wl2s .h b {
  font-size: 13px;
  font-weight: 800;
  color: #142b35;
}
.wl2s .h span {
  font-size: 11px;
  font-weight: 700;
  color: #6b7d87;
}
.wl2s .r {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  padding: 5px 9px;
  border-radius: 9px;
  background: #fff;
}
.wl2s .r span {
  font-size: 11.5px;
  font-weight: 700;
  color: #24414a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wl2s .r b {
  font-size: 12px;
  font-weight: 800;
}
.wl2s .hi .r b {
  color: #a86f10;
}
.wl2s .lo .r b {
  color: #0f6e64;
}
.wl2s .ft {
  margin-top: auto;
  padding-top: 6px;
  font-size: 11px;
  font-weight: 800;
  color: #0f6e64;
}
.wl-hl {
  display: none !important;
}
.wl-ef .wlnm .mcs {
  flex-wrap: nowrap;
  overflow: hidden;
}
.wx5 {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
.wx5 .sdp b {
  white-space: normal;
  line-height: 1.25;
}
.sdpin.sm {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}
.sdpin.sm svg {
  width: 14px;
  height: 14px;
}
.wxlo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wxlo .r {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) 110px 24px minmax(0, 1.4fr) 150px;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f6f9fa;
  border: 1px solid #edf2f3;
  animation: phUp 0.35s calc(var(--i) * 0.06s) both;
}
.wxlo .a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.wxlo b {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #142b35;
}
.wxlo span {
  font-size: 11px;
  color: #5b6f78;
}
.wxlo .cap {
  padding: 6px 10px;
  border-radius: 10px;
  background: #e3f6f2;
  text-align: center;
}
.wxlo .cap b {
  color: #0f6e64;
}
.wxlo .cap span {
  font-size: 10px;
  font-weight: 700;
  color: #0f6e64;
}
.wxlo .ar {
  color: #9fb3b8;
  display: grid;
  place-items: center;
}
.wxlo .ar svg {
  width: 16px;
  height: 16px;
}
.wxlo .to {
  min-width: 0;
}
.wxlo .to span {
  display: block;
}
.wxlo .sd-act {
  justify-self: end;
}
#wxBal .wa3 + .wa3 {
  margin-top: 14px;
}
@media (max-width: 1250px) {
  .wx5 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .wxlo .r {
    grid-template-columns: 1fr 1fr;
  }
}

.wx5 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.wl2s {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.wl2s .g {
  min-width: 0;
}
#page .wlnm .mcs,
#page .aenm .mcs {
  flex-wrap: nowrap !important;
  overflow: hidden;
}
#page .wlnm .mch,
#page .aenm .mch {
  flex: none;
}

.sdc .sdp .wxav {
  display: flex;
  align-items: center;
  flex: none;
  color: inherit;
  margin: 0;
}
.sdc .sdp .wxav > * {
  margin-left: -10px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #f6f9fa;
}
.sdc .sdp .wxav > *:first-child {
  margin-left: 0;
}
.sdc .sdp .wxav em {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  background: #0d3d40;
  color: #ffd36b;
}
#wxAi > .wa3.p3:first-of-type {
  margin-top: 0;
}
#wxAi > .wx-a3.eq {
  margin-top: 14px;
}

.ae-sent {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ae-sent .ok {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  border-radius: 11px;
  background: #e3f6ef;
  color: #0f7a55;
  font-size: 12px;
  font-weight: 800;
}
.ae-sent .ok svg {
  width: 13px;
  height: 13px;
}
.aec .aeb.oo {
  background: #0d3d40;
  color: #ffd36b;
}
.aec .aeb.oo svg {
  width: 13px;
  height: 13px;
}
.oo-sug .wa-ch h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.oo-sp {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #4a6670;
}
.oo-sg {
  width: 100%;
  display: grid;
  grid-template-columns: 20px auto minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  margin-top: 6px;
  border-radius: 12px;
  background: #f6f9fa;
  border: 1px solid #edf2f3;
  text-align: left;
}
.oo-sg .cb {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid #bcd9d6;
  display: grid;
  place-items: center;
  background: #fff;
  color: #fff;
}
.oo-sg .cb svg {
  width: 12px;
  height: 12px;
}
.oo-sg.on {
  background: #f2fbf8;
  border-color: #cdeee5;
}
.oo-sg.on .cb {
  background: #14b3a0;
  border-color: #14b3a0;
}
.oo-sg .aicd {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  background: #0d3d40;
  color: #ffd36b;
}
.oo-sg b {
  font-size: 12.5px;
  font-weight: 800;
  color: #142b35;
}
.oo-sg em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 800;
  color: #8a5b00;
  white-space: nowrap;
}
.oo-sg .ss {
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 99px;
  background: #eef3f4;
  color: #5b6f78;
  white-space: nowrap;
}
.oo-sg.on .ss {
  background: #e3f6ef;
  color: #0f7a55;
}
.oo-sf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #0d3d40;
  color: #fff;
}
.oo-sf > span {
  font-size: 12px;
  font-weight: 700;
  color: #a8f0e6;
}
.oo-sf .ut {
  display: flex;
  align-items: center;
  gap: 8px;
}
.oo-sf .ut svg {
  width: 12px;
  height: 12px;
  color: #7fe3d6;
}
.oo-sf b {
  font-size: 16px;
  font-weight: 800;
}
.oo-sf b.f {
  color: #ffd36b;
}
.oo-a.sg .no {
  background: #0d3d40;
  color: #ffd36b;
  display: grid;
  place-items: center;
}
.oo-a.sg .no svg {
  width: 11px;
  height: 11px;
}
.cdf {
  margin: 0 0 12px;
  flex-wrap: wrap;
}
.cdf button em {
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 99px;
  background: rgba(13, 61, 64, 0.08);
}
.cdf button.on em {
  background: rgba(255, 255, 255, 0.2);
}

.aiot {
  margin-top: 14px;
}
.aiot .nd {
  cursor: default;
}
.aiot .n1.hp,
.aiot .n2.hp {
  border-color: #f5b5bd;
  background: #fff7f8;
}
.aiot .obr.hp {
  background: #fdf1f2;
}
.aiot .n3.hit {
  background: #fdecee;
  border-color: #e5484d;
  box-shadow: 0 6px 14px -10px rgba(229, 72, 77, 0.8);
}
.aiot .n3.hit .cdi b {
  color: #9f1f2e;
}
.aiot .n3.hit .ri {
  background: #fff;
  color: #e5484d;
}
.aiot .n3 .cut {
  position: absolute;
  top: -8px;
  right: 10px;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
  background: #e5484d;
  color: #fff;
}
.aiot .n3:hover {
  transform: none !important;
}

.aiot .n2 .cut.ov {
  position: absolute;
  top: -8px;
  right: 10px;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
  background: #e5484d;
  color: #fff;
}
.slj {
  border: 1.5px solid #f5b5bd !important;
  background: linear-gradient(180deg, #fff7f8, #fff 40%) !important;
}
.slj .ph .no {
  background: linear-gradient(135deg, #ff8a8f, #e5484d) !important;
  color: #fff !important;
}
.slj-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 14px;
  margin-top: 4px;
}
.slj-who {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #f3dadd;
}
.slj-who > div {
  flex: 1;
  min-width: 0;
}
.slj-who b {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: #142b35;
}
.slj-who span {
  font-size: 12px;
  color: #5b6f78;
}
.slj-who .tag {
  flex: none;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 99px;
  background: #fdecee;
  color: #b4232f;
}
.slj-ut {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #edf2f3;
}
.slj-ut .r {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 54px;
  gap: 10px;
  align-items: center;
}
.slj-ut .r > span {
  font-size: 12px;
  font-weight: 800;
  color: #4a6670;
}
.slj-ut .tr {
  position: relative;
  height: 14px;
  border-radius: 99px;
  background: #eef3f4;
}
.slj-ut .tr .b {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 99px;
}
.slj-ut .b.hi {
  background: linear-gradient(90deg, #ff9ea1, #e5484d);
}
.slj-ut .b.ok {
  background: linear-gradient(90deg, #5fd6c3, #0d3d40);
}
.slj-ut .tr .ln {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 0;
  border-left: 2px dashed #142b35;
  z-index: 2;
}
.slj-ut .r > b {
  font-size: 18px;
  font-weight: 800;
  text-align: right;
}
.slj-ut b.hi {
  color: #c0262f;
}
.slj-ut b.ok {
  color: #0f6e64;
}
.slj-ut em {
  font-style: normal;
  font-size: 10.5px;
  color: #8a9ba2;
  text-align: right;
}
.slj-vs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.slj-vs .o {
  padding: 14px 16px;
  border-radius: 16px;
}
.slj-vs .o.a {
  background: #f6f9fa;
  border: 1px dashed #cfdcde;
  opacity: 0.85;
}
.slj-vs .o.b {
  background: linear-gradient(135deg, #0d3d40, #0f5a57);
  color: #fff;
}
.slj-vs .k {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a9ba2;
}
.slj-vs .b .k {
  color: #ffd36b;
}
.slj-vs b {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 800;
}
.slj-vs .a b {
  color: #4a6670;
  text-decoration: line-through;
  text-decoration-color: #c0262f;
}
.slj-vs p {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #5b6f78;
}
.slj-vs .b p {
  color: #cfeeea;
}
.slj-tb {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}
.slj-tb .hd,
.slj-tb .rw {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.8fr);
  gap: 14px;
  align-items: center;
}
.slj-tb .hd {
  padding: 0 12px 2px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a9ba2;
}
.slj-tb .rw {
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #edf2f3;
  animation: phUp 0.35s calc(var(--i) * 0.05s) both;
}
.slj-tb .rw > b {
  font-size: 12.5px;
  font-weight: 800;
  color: #142b35;
}
.slj-tb .hb {
  display: grid;
  grid-template-columns: 1fr 48px;
  gap: 8px;
  align-items: center;
}
.slj-tb .hb.ai {
  grid-template-columns: 1fr 48px 46px;
}
.slj-tb .hb span {
  font-size: 12px;
  font-weight: 800;
  color: #24414a;
  text-align: right;
}
.slj-tb .bb {
  height: 8px;
  border-radius: 99px;
  background: #eef3f4;
  overflow: hidden;
}
.slj-tb .bb i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: #e8a317;
}
.slj-tb .hb.ai .bb i {
  background: #14b3a0;
}
.slj-tb .hb em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 99px;
  background: #e3f6f2;
  color: #0f6e64;
  text-align: center;
}
.slj-tb .hb em.z {
  background: #eef3f4;
  color: #8a9ba2;
}
.slj-tb .how {
  font-size: 12px;
  color: #4a6670;
  line-height: 1.4;
}
.slj-tb .rw.tt {
  background: #f6f9fa;
}
.slj-tb .rw.tt .v {
  font-size: 12.5px;
  font-weight: 800;
  color: #a86f10;
}
.slj-tb .rw.tt .v.ok {
  color: #0f6e64;
}
.slj .ins {
  margin-top: 12px;
}
.slj-act {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.slj-act .tg-btn.dn {
  background: #e3f6ef !important;
  color: #0f7a55 !important;
  box-shadow: none;
}
.slj-hint {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(90deg, #fff7f8, #fff);
  border: 1px solid #f5b5bd;
}
.slj-hint .ic {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #e5484d;
  color: #fff;
  flex: none;
}
.slj-hint .ic svg {
  width: 14px;
  height: 14px;
}
.slj-hint b {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #9f1f2e;
}
.slj-hint span {
  font-size: 12px;
  color: #5b6f78;
}
@media (max-width: 1100px) {
  .slj-top,
  .slj-vs {
    grid-template-columns: 1fr;
  }
}
.aiot .n2.ovl {
  border-color: #e5484d;
  background: #fdecee;
  box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.15);
}
.aiot .n2.ovl .cdi b {
  color: #9f1f2e;
}

.aiot .n2.ovl {
  box-shadow: none !important;
}
.aiot .n2 .tsum {
  display: inline-block !important;
  margin-top: 4px;
  font-size: 10.5px !important;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 99px;
  background: #fff;
  color: #c0262f !important;
  border: 1px solid #f5b5bd;
}
.aiot .n3 .cdi {
  flex: 1;
  min-width: 0;
}
.aiot .n3 .fgap {
  flex: none;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-style: normal;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  color: #c0262f;
}
.aiot .n3 .fgap small {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-top: 2px;
  color: #e5484d;
}
.aiot .n3.hit .lv {
  background: #fdecee;
  color: #c0262f;
}

.aiot .tsum2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px dashed #f5b5bd;
}
.aiot .tsum2 span {
  font-size: 11px;
  font-weight: 700;
  color: #7a4a50;
}
.aiot .tsum2 b {
  font-size: 12.5px;
  font-weight: 800;
  color: #c0262f;
}
.aiot .n3 .cdi .nd2 {
  display: block;
  font-size: 10.5px !important;
  font-weight: 800;
  color: #c0262f !important;
}
.aiot .n3 .fgap {
  background: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.ot-n .pi.wl {
  align-items: center;
  border-radius: 12px;
  padding: 5px 8px;
}
.ot-n .pi .pn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  flex: 1;
}
.ot-n .pi .lw {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
  font-size: 10.5px;
  font-weight: 800;
}
.ot-n .pi .lw s {
  color: #c0262f;
  text-decoration-thickness: 1.5px;
}
.ot-n .pi .lw svg {
  width: 10px;
  height: 10px;
  color: #9fb3b8;
}
.ot-n .pi .lw b {
  color: #0f6e64;
  padding: 0 6px;
  border-radius: 99px;
  background: #e3f6f2;
}
.ot-lg .lwk {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ot-lg .lwk s {
  color: #c0262f;
  font-weight: 800;
}
.ot-lg .lwk svg {
  width: 10px;
  height: 10px;
  color: #9fb3b8;
}
.ot-lg .lwk b {
  color: #0f6e64;
  padding: 0 6px;
  border-radius: 99px;
  background: #e3f6f2;
  margin-right: 3px;
}
.ot-lg {
  flex-wrap: wrap;
}

.slj-hd {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 24px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  margin-top: 4px;
}
.slj-hd .sljw {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #edf2f3;
}
.slj-hd .sljw > div {
  min-width: 0;
}
.slj-hd .sljw b {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: #142b35;
}
.slj-hd .sljw span {
  font-size: 12px;
  color: #5b6f78;
}
.slj-hd .st {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 12px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #edf2f3;
}
.slj-hd .st > span {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a9ba2;
}
.slj-hd .st b {
  font-size: 24px;
  font-weight: 800;
  color: #0d3d40;
  line-height: 1.15;
}
.slj-hd .st b small {
  font-size: 12px;
  font-weight: 700;
  color: #6b7d87;
  margin-left: 4px;
}
.slj-hd .st em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  color: #5b6f78;
}
.slj-hd .st.bad {
  background: #fdecee;
  border-color: #f5b5bd;
}
.slj-hd .st.bad b,
.slj-hd .st.bad em {
  color: #c0262f;
}
.slj-hd .st.good {
  background: #e3f6f2;
  border-color: #bfe6e0;
}
.slj-hd .st.good b,
.slj-hd .st.good em {
  color: #0f6e64;
}
.slj-hd .ar {
  display: grid;
  place-items: center;
  color: #9fb3b8;
}
.slj-hd .ar svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 1100px) {
  .slj-hd {
    grid-template-columns: 1fr 1fr;
  }
  .slj-hd .ar {
    display: none;
  }
}

.acb .ycn {
  margin-top: 8px;
  font-size: 11.5px;
  color: #4a6670;
}
.ye-tb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 12px 0 8px;
}
.ye-tb .sd-seg button em {
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 99px;
  background: rgba(13, 61, 64, 0.08);
}
.ye-tb .sd-seg button.on em {
  background: rgba(255, 255, 255, 0.2);
}
.ye-so {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  height: 36px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #dfe9eb;
  color: #4a6670;
}
.ye-so svg {
  width: 13px;
  height: 13px;
}
.ye-so select {
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: #142b35;
  cursor: pointer;
  outline: none;
}
.ye-l {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ye-l .hd,
.ye-l .rw {
  display: grid;
  grid-template-columns: 30px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 110px minmax(0, 1.3fr);
  gap: 12px;
  align-items: center;
}
.ye-l .hd {
  padding: 2px 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a9ba2;
}
.ye-l .rw {
  padding: 8px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #edf2f3;
  animation: phUp 0.3s calc(var(--i) * 0.03s) both;
}
.ye-l .yrk {
  font-size: 11px;
  font-weight: 800;
  color: #8a9ba2;
}
.ye-l .w {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.ye-l .w > div {
  min-width: 0;
}
.ye-l .w b {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  color: #142b35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ye-l .w span {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: #6b7d87;
}
.ye-l .w span svg {
  width: 10px;
  height: 10px;
}
.ye-l .u {
  display: grid;
  grid-template-columns: 1fr 40px;
  gap: 8px;
  align-items: center;
}
.ye-l .u .bb {
  height: 7px;
  border-radius: 99px;
  background: #eef3f4;
  overflow: hidden;
}
.ye-l .u .bb i {
  display: block;
  height: 100%;
  border-radius: 99px;
}
.ye-l .u.hi .bb i {
  background: #e8a317;
}
.ye-l .u.ok .bb i {
  background: #14b3a0;
}
.ye-l .u b {
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}
.ye-l .u.hi b {
  color: #a86f10;
}
.ye-l .u.ok b {
  color: #0f6e64;
}
.ye-l .rd {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ye-l .rd b {
  font-size: 13px;
  font-weight: 800;
  padding: 1px 8px;
  border-radius: 99px;
  background: #e3f6f2;
  color: #0f6e64;
}
.ye-l .rd em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  color: #6b7d87;
  margin-top: 2px;
}
.ye-l .tp {
  font-size: 11px;
  font-weight: 700;
  color: #24414a;
  line-height: 1.35;
}
.ye-ft {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.ye-ft > span {
  font-size: 11.5px;
  font-weight: 700;
  color: #6b7d87;
}

.ytr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.ytr .ytw {
  font-size: 11.5px;
  color: #4a6670;
  flex-basis: 100%;
  margin-top: 2px;
}
.aec .fr.rd {
  background: #e3f6f2;
  color: #0f6e64;
}
.aec .tp .nm .r1 {
  gap: 6px;
}
.aec .tp .nm .r1 b {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aef2 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 12px 0 10px;
}
.aef2 .sd-seg button em {
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 99px;
  background: rgba(13, 61, 64, 0.08);
}
.aef2 .sd-seg button.on em {
  background: rgba(255, 255, 255, 0.2);
}
.aeq {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid #e3eef0;
  background: #fff;
  color: #8a9ba2;
  flex: 1;
  min-width: 160px;
}
.aeq input {
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 12.5px;
  width: 100%;
  background: none;
  color: #142b35;
}
.aeq svg {
  width: 14px;
  height: 14px;
}
.aeso {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 800;
  color: #6b7d87;
}
.aeso select {
  height: 38px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid #e3eef0;
  background: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: #142b35;
}
.aedist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-bottom: 12px;
}
.aedist {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
}
.aedist > div {
  display: flex;
  height: 8px;
}
.aedist > div i {
  display: block;
  border-radius: 4px;
  width: 100%;
}
.aedist > div.hi {
  flex: var(--x, 1);
}
.aedist > span {
  flex-basis: 100%;
  margin-top: 6px;
  font-size: 12px;
  color: #4a6670;
}
.aedist b {
  color: #0d3d40;
}
.aedist .hi i {
  background: #0d3d40;
}
.aedist .md i {
  background: #14b3a0;
}
.aedist .lo i {
  background: #9fd9d1;
}
.aec .sg.idle.full {
  background: #fffaf0;
  border-color: #f3dd9f;
}
.aec .sg.idle.full .aei {
  background: #e8a317;
  color: #fff;
}
.aepg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 700;
  color: #6b7d87;
}
.aepg button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 11px;
  border: 1px dashed #cfe2e4;
  font-size: 12.5px;
  font-weight: 800;
  color: #007a8b;
}
.aepg button svg {
  width: 14px;
  height: 14px;
}
.aen {
  grid-column: 1/-1;
  text-align: center;
  color: #8a9ba2;
  font-size: 13px;
  padding: 20px;
}
.aedist {
  display: block !important;
  margin-bottom: 12px;
}
.aedist .bar {
  display: flex;
  gap: 3px;
  height: 10px;
}
.aedist .bar i {
  display: block;
  border-radius: 4px;
}
.aedist .bar .hi {
  background: #0d3d40;
}
.aedist .bar .md {
  background: #14b3a0;
}
.aedist .bar .lo {
  background: #9fd9d1;
}
.aedist > span {
  display: block;
  margin-top: 6px;
}
.aec .aetop {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #5b6f78;
  padding: 6px 10px;
  border-radius: 10px;
  background: #f6f9fa;
}
.aec .aetop svg {
  width: 11px;
  height: 11px;
  color: #007a8b;
}
.aec .aetop b {
  color: #142b35;
}

#wxAi .ins {
  display: none !important;
}
#yCmp .sd-seg.cdf {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
#yCmp .sd-seg.cdf button {
  flex: none;
  white-space: nowrap;
  padding: 0 11px;
  font-size: 12px;
}
#yCmp .acb .r {
  padding: 14px 16px;
}
#yCmp .ycn {
  margin-top: 8px;
  font-size: 12px;
  color: #5b6f78;
}
.at2h .eqv {
  background: #e3f6f2 !important;
}
.at2h .eqv b {
  color: #0f6e64 !important;
}
.slj-act {
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #f6f9fa;
  border: 1px solid #edf2f3;
}
.slj-act .tx {
  flex: 1;
  min-width: 0;
}
.slj-act .tx b {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #142b35;
}
.slj-act .tx span {
  font-size: 12px;
  color: #5b6f78;
}
.slj-act .tg-btn {
  box-shadow: none !important;
  height: 42px;
  padding: 0 18px;
}

.ycf {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  border-radius: 14px;
  background: #eef3f4;
  margin-bottom: 12px;
}
.ycf button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 8px 10px;
  border-radius: 10px;
  text-align: left;
  min-width: 0;
}
.ycf button b {
  font-size: 12px;
  font-weight: 800;
  color: #24414a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.ycf button span {
  font-size: 10.5px;
  font-weight: 700;
  color: #8a9ba2;
}
.ycf button:hover {
  background: rgba(255, 255, 255, 0.6);
}
.ycf button.on {
  background: #0d3d40;
}
.ycf button.on b {
  color: #fff;
}
.ycf button.on span {
  color: #7fe3d6;
}
#wxAi .at2 .mt {
  flex-wrap: nowrap !important;
  overflow: hidden;
}
#wxAi .at2 .mt .rl {
  flex: none;
}
#wxAi .at2 .mt .tl {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jdc span {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.jdc .aicd {
  flex: none;
  font-style: normal;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 6px;
  background: #0d3d40;
  color: #ffd36b;
}

.mrl {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mrl .hd,
.mrl .r {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 92px;
  gap: 14px;
  align-items: center;
}
.mrl .hd {
  padding: 0 12px 2px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a9ba2;
}
.mrl .hd span:last-child {
  text-align: right;
}
.mrl .r {
  padding: 10px 12px;
  border-radius: 13px;
  background: #f6f9fa;
  animation: phUp 0.35s calc(var(--i) * 0.04s) both;
}
.mrl .nm {
  min-width: 0;
}
.mrl .nm b {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  color: #142b35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mrl .mt {
  display: flex;
  gap: 6px;
  margin-top: 5px;
  overflow: hidden;
}
.mrl .rl {
  flex: none;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 99px;
  background: #e3f6f2;
  color: #0f6e64;
}
.mrl .tl {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 10.5px;
  font-weight: 700;
  color: #5b6f78;
  padding: 2px 8px;
  border-radius: 99px;
  background: #fff;
  border: 1px solid #e3eced;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mrl .tl svg {
  width: 11px;
  height: 11px;
  flex: none;
}
.mrl .pb {
  display: grid;
  grid-template-columns: 1fr 36px;
  gap: 8px;
  align-items: center;
}
.mrl .pb .bb {
  height: 8px;
  border-radius: 99px;
  background: #e3eced;
  overflow: hidden;
}
.mrl .pb .bb i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #ffd36b, #e8a317);
}
.mrl .pb em {
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  color: #8a5b00;
  text-align: right;
}
.mrl .hv {
  text-align: right;
}
.mrl .hv strong {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: #0d3d40;
}
.mrl .hv small {
  font-size: 10px;
  color: #8a9ba2;
}
.aet .aem {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 211, 107, 0.14);
  border: 1px solid rgba(255, 211, 107, 0.35);
}
.aet .aem span {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffd36b;
}
.aet .aem b {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  margin-top: 2px;
}
.aet .aem b small {
  font-size: 12px;
  font-weight: 700;
  color: #cfeeea;
  margin-left: 4px;
}
.aet .aem em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: #a8f0e6;
  margin-top: 2px;
}
.aeld {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 6px 0 4px;
}
.aeld .orb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #0d3d40;
  color: #ffd36b;
  position: relative;
}
.aeld .orb:after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #14b3a0;
  border-right-color: #14b3a0;
  animation: aeSp 0.9s linear infinite;
}
.aeld .orb svg {
  width: 16px;
  height: 16px;
}
.aeld b {
  font-size: 12.5px;
  font-weight: 800;
  color: #142b35;
}
.aeld .pg {
  width: 70%;
  height: 4px;
  border-radius: 99px;
  background: #e3eced;
  overflow: hidden;
}
.aeld .pg i {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 99px;
  background: linear-gradient(90deg, #5fd6c3, #0d3d40);
  animation: aePg 1.2s ease-in-out infinite;
}
@keyframes aePg {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(250%);
  }
}
.aec .sg.run {
  gap: 10px;
  padding: 14px 16px;
}
.aest {
  gap: 5px !important;
  padding: 0 6px;
}
.aest span {
  font-size: 11.5px !important;
}
.aest span::before {
  width: 7px !important;
  height: 7px !important;
}
.aest span.ok::before {
  background: #0d9488;
}
.mrl .hd,
.mrl .r {
  grid-template-columns: minmax(0, 1fr) 110px 76px !important;
  gap: 12px !important;
}
.mrl .mt {
  flex-wrap: wrap;
  overflow: visible;
}
.mrl .tl {
  overflow: visible;
}

.slj-act {
  align-items: flex-end !important;
}
.slj-act .tx ol {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.slj-act .tx li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 11px;
  background: #fff;
  border: 1px solid #e3eced;
}
.slj-act .tx li .wk {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
  background: #eaf6f7;
  color: #0d4f57;
  white-space: nowrap;
}
.slj-act .tx li b {
  display: inline;
  font-size: 12px;
  font-weight: 700;
  color: #142b35;
  line-height: 1.35;
}
.slj-act .tx li em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 800;
  color: #0f6e64;
  white-space: nowrap;
}
.slj-act .tx .res {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 10px;
  font-size: 12px;
  color: #4a6670;
}
.slj-act .tx .res b {
  display: inline;
  font-size: 12px;
  color: #0d3d40;
}
#aeSec .aec {
  animation: none !important;
}
#aeSec .aeg {
  position: relative;
  min-height: 240px;
}
.slj-tb .hd,
.slj-tb .rw {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr) !important;
}
.slj-act .tx > span b {
  display: inline;
  font-size: 12px;
  color: #0d3d40;
}
.slj-act {
  align-items: center !important;
}

.wa-ch .chp.bad {
  background: #fdecee !important;
  color: #c0262f !important;
  border-color: #f5b5bd !important;
}
.ws-l {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ws-l .wsr {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr) 64px 150px;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f6f9fa;
  border: 1px solid #edf2f3;
  animation: phUp 0.35s calc(var(--i) * 0.05s) both;
}
.ws-l .wsr.wsy {
  background: #fff7f8;
  border-color: #f5b5bd;
}
.ws-l .nm b {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #142b35;
}
.ws-l .nm span {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-size: 11px;
  color: #5b6f78;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-l .bars .b {
  position: relative;
  height: 12px;
  border-radius: 99px;
  background: #eef3f4;
}
.ws-l .bars .b i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 99px;
}
.ws-l i.nd {
  background: rgba(229, 72, 77, 0.25);
  border: 1.5px solid #e5484d;
}
.ws-l i.hc {
  background: #0d3d40;
  z-index: 1;
}
.ws-l .bars span {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #5b6f78;
}
.ws-l .wsg {
  text-align: right;
}
.ws-l .wsg b {
  font-size: 18px;
  font-weight: 800;
  color: #c0262f;
}
.ws-l .wsg small {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  color: #e5484d;
}
.ws-l .wsa {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 6px 10px;
  border-radius: 10px;
  background: #fff3d6;
  color: #8a5b00;
  font-size: 11.5px;
  font-weight: 800;
}
.ws-l .wsa.ok {
  background: #e3f6f2;
  color: #0f6e64;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.ws-l .wsa svg {
  width: 12px;
  height: 12px;
}
.ws-l .wsa em {
  flex-basis: 100%;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  color: #4a8a80;
}
.ws-lg {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  color: #5b6f78;
}
.ws-lg span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.ws-lg i {
  width: 14px;
  height: 8px;
  border-radius: 4px;
}
.ws-lg i.hc {
  background: #0d3d40;
}
.ws-lg i.nd {
  background: rgba(229, 72, 77, 0.25);
  border: 1.5px solid #e5484d;
}
.wq .q1 {
  fill: #fdf1f2;
}
.wq .q2 {
  fill: #fff8ea;
}
.wq .q3 {
  fill: #eef8f6;
}
.wq .ql {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.wq .ql.a {
  fill: #c0262f;
}
.wq .ql.b {
  fill: #a86f10;
}
.wq .ql.c {
  fill: #0f6e64;
}
.wq .z {
  stroke: #9fb3b8;
  stroke-dasharray: 4 4;
}
.wq .at {
  font-size: 10.5px;
  font-weight: 700;
  fill: #6b7d87;
}
.wq .dt {
  fill: #b8c9cc;
  stroke: #fff;
  stroke-width: 1.5;
}
.wq .dt.a {
  fill: #e5484d;
}
.wq .dt.b {
  fill: #e8a317;
}
.wq .dt.c {
  fill: #14b3a0;
}
.wq .dt.wqy {
  stroke: #7a0f17;
  stroke-width: 2.5;
}
.wq .dl {
  font-size: 9.5px;
  font-weight: 800;
  fill: #24404a;
}
.wd-l {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wd-l .r {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 150px;
  gap: 12px;
  align-items: center;
  animation: phUp 0.35s calc(var(--i) * 0.05s) both;
}
.wd-l .r > b {
  font-size: 12.5px;
  font-weight: 800;
  color: #142b35;
}
.wd-l .wdb {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.wd-l .wdb i {
  display: block;
  height: 9px;
  border-radius: 99px;
}
.wd-l .wdb .n {
  background: #e8a317;
}
.wd-l .wdb .a {
  background: #14b3a0;
}
.wd-l .wdb .hc {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 0;
  border-left: 2px dashed #0d3d40;
}
.wd-l .v span {
  display: block;
  font-size: 12px;
  color: #4a6670;
}
.wd-l .v b {
  color: #0f6e64;
}
.wd-l .v em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: #6b7d87;
}
.wd-l .v em.bad {
  color: #c0262f;
}
.wx-lg i.ln {
  width: 0 !important;
  height: 12px !important;
  border-left: 2px dashed #0d3d40;
  border-radius: 0 !important;
  background: none !important;
}
.wf-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.wf-top b {
  font-size: 34px;
  font-weight: 800;
  color: #0d3d40;
  line-height: 1;
}
.wf-top span {
  font-size: 12px;
  color: #5b6f78;
}
.wf-bar {
  display: flex;
  gap: 3px;
  height: 16px;
  margin: 14px 0;
}
.wf-bar i {
  border-radius: 5px;
}
.wf-l {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wf-l > div {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f6f9fa;
}
.wf-l > div > i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.wf-l b {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  color: #142b35;
}
.wf-l em {
  font-style: normal;
  font-size: 11px;
  color: #6b7d87;
}
.wf-l strong {
  font-size: 16px;
  font-weight: 800;
  color: #0d3d40;
}
.wf-l small {
  font-size: 10px;
  color: #8a9ba2;
  margin-left: 2px;
}
.wq .dl {
  font-size: 10.5px;
}

.wbg > * + * {
  margin-top: 16px;
}
.wb-k {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.wbk {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 18px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 40px -32px rgba(13, 61, 64, 0.5);
}
.wbk .ki {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #eaf6f7;
  color: #007a8b;
  margin-bottom: 8px;
}
.wbk .ki svg {
  width: 15px;
  height: 15px;
}
.wbk .l {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b7d87;
}
.wbk b {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0d3d40;
  line-height: 1.15;
}
.wbk em {
  font-style: normal;
  font-size: 11.5px;
  color: #6b7d87;
}
.wbk.bad .ki {
  background: #fdecee;
  color: #c0262f;
}
.wbk.bad b {
  color: #c0262f;
}
.wbk.ai .ki {
  background: #fff3d6;
  color: #a86f10;
}
.wbk.ai b {
  color: #8a5b00;
}
.wb-dg {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.wbd {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 40px -32px rgba(13, 61, 64, 0.5);
  animation: phUp 0.35s calc(var(--i) * 0.05s) both;
}
.wbd .t b {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #142b35;
}
.wbd .t span {
  font-size: 11px;
  color: #6b7d87;
}
.wbd .ut {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wbd .ut > span {
  font-size: 11px;
  font-weight: 700;
  color: #6b7d87;
}
.wbd .rg {
  --p: 60;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(closest-side, #fff 74%, transparent 75%),
    conic-gradient(#14b3a0 calc(var(--p) * 1%), #e6eef0 0);
}
.wbd .ut.hi .rg {
  background:
    radial-gradient(closest-side, #fff 74%, transparent 75%),
    conic-gradient(#e5484d calc(var(--p) * 1%), #e6eef0 0);
}
.wbd .rg b {
  font-size: 13px;
  font-weight: 800;
  color: #0d3d40;
}
.wbd .ut.hi .rg b {
  color: #c0262f;
}
.wbd .m {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.wbd .m > div {
  padding: 8px 10px;
  border-radius: 12px;
  background: #f6f9fa;
}
.wbd .m span {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8a9ba2;
}
.wbd .m b {
  font-size: 13px;
  font-weight: 800;
  color: #0d3d40;
  white-space: nowrap;
}
.wbd .m .bad {
  background: #fdecee;
}
.wbd .m .bad b {
  color: #c0262f;
}
.wbd .m .ai {
  background: #fff8ea;
}
.wbd .m .ai b {
  color: #8a5b00;
}
.wb-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.wb-c {
  padding: 20px 22px;
}
.wb-h {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.wb-h .ey {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #007a8b;
}
.wb-h h3 {
  margin: 3px 0 0;
  font-size: 16px;
  font-weight: 800;
  color: #142b35;
}
.wb-tot {
  text-align: right;
  padding: 8px 14px;
  border-radius: 14px;
}
.wb-tot b {
  display: block;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
}
.wb-tot span {
  font-size: 11px;
  font-weight: 700;
}
.wb-tot.bad {
  background: #fdecee;
  color: #c0262f;
}
.wb-tot.ai {
  background: #fff3d6;
  color: #8a5b00;
}
.wb-bl {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wb-bl .r {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 72px;
  gap: 14px;
  align-items: center;
  animation: phUp 0.35s calc(var(--i) * 0.05s) both;
}
.wb-bl .nm b {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #142b35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wb-bl .nm span {
  font-size: 11px;
  color: #6b7d87;
}
.wb-bl .br {
  height: 12px;
  border-radius: 99px;
  background: #f1f5f6;
  overflow: hidden;
}
.wb-bl .br i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #ff9ea1, #e5484d);
}
.wb-bl.ai .br i {
  background: linear-gradient(90deg, #ffd36b, #e8a317);
}
.wb-bl strong {
  font-size: 15px;
  font-weight: 800;
  color: #0d3d40;
  text-align: right;
}
.wb-bl strong small {
  font-size: 10px;
  color: #8a9ba2;
  margin-left: 2px;
}
.wb-nt {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px dashed #e3eced;
  font-size: 12px;
  color: #6b7d87;
}
.wb-tb {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wb-tb .hd,
.wb-tb .rw {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr) 80px 110px 120px 140px;
  gap: 12px;
  align-items: center;
}
.wb-tb .hd {
  padding: 0 14px 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a9ba2;
}
.wb-tb .rw {
  padding: 11px 14px;
  border-radius: 13px;
  background: #f6f9fa;
  font-size: 12.5px;
  color: #24414a;
}
.wb-tb .rw > b {
  font-size: 13px;
  font-weight: 800;
  color: #142b35;
}
.wb-tb .wbv {
  color: #5b6f78;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wb-tb .bad {
  font-weight: 800;
  color: #c0262f;
}
.wb-tb .mut {
  color: #8a9ba2;
}
.wb-tb .ai b {
  color: #8a5b00;
}
@media (max-width: 1200px) {
  .wb-k,
  .wb-dg {
    grid-template-columns: repeat(3, 1fr);
  }
  .wb-2 {
    grid-template-columns: 1fr;
  }
}

.wb6t {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wb6t .hd,
.wb6t .rw {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) 70px minmax(0, 1fr) 90px minmax(0, 1.2fr);
  gap: 12px;
  align-items: center;
}
.wb6t.r6 .hd,
.wb6t.r6 .rw {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr) 70px 100px 100px 120px;
}
.wb6t .hd {
  padding: 0 12px 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a9ba2;
}
.wb6t .rw {
  padding: 10px 12px;
  border-radius: 12px;
  background: #f7fafa;
  font-size: 12.5px;
  color: #24404a;
}
.wb6t .rw > b {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #142b35;
  min-width: 0;
}
.wb6t .rw > b i {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  flex: none;
}
.wb6t .ut,
.wb6t .ai {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.wb6t .bb {
  height: 7px;
  border-radius: 99px;
  background: #e3eced;
  overflow: hidden;
}
.wb6t .bb i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #5fd6c3, #0d7d77);
}
.wb6t .bb i.hi {
  background: linear-gradient(90deg, #ff9ea1, #e5484d);
}
.wb6t .ai .bb i {
  background: linear-gradient(90deg, #ffd27a, #c88a12);
}
.wb6t em {
  font-style: normal;
  font-weight: 800;
  color: #0d3d40;
  white-space: nowrap;
}
.wb6t em.hi {
  color: #c0262f;
}
.wb6t .ai em {
  color: #8a5b00;
}
.wb6t .bad {
  font-weight: 800;
  color: #c0262f;
}
.wb6t .mut {
  color: #8a9ba2;
}
.wb6t .aiv b {
  color: #8a5b00;
}
.wb6t .wbv {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #5b6f78;
}
.wb6b {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wb6b .r {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) 70px;
  gap: 12px;
  align-items: center;
  padding: 9px 12px;
  border-radius: 12px;
  background: #f7fafa;
  animation: phUp 0.35s calc(var(--i) * 0.04s) both;
}
.wb6b .nm b {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  color: #142b35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wb6b .nm span {
  display: block;
  font-size: 10.5px;
  color: #6b7d87;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wb6b .bb {
  height: 8px;
  border-radius: 99px;
  background: #e3eced;
  overflow: hidden;
}
.wb6b .bb i {
  display: block;
  height: 100%;
  border-radius: 99px;
}
.wb6b .bb i.bad {
  background: linear-gradient(90deg, #ff9ea1, #e5484d);
}
.wb6b .bb i.ai {
  background: linear-gradient(90deg, #ffd27a, #c88a12);
}
.wb6b strong {
  font-size: 14px;
  font-weight: 800;
  color: #0d3d40;
  text-align: right;
}
.wb6b strong small {
  font-size: 10px;
  color: #8a9ba2;
  margin-left: 2px;
}

#wbRole .sd-seg button em {
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 99px;
  background: rgba(13, 61, 64, 0.08);
}
#wbRole .sd-seg button.on em {
  background: rgba(255, 255, 255, 0.2);
}
.wb7 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wb7 .hd,
.wb7 .rw {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) 130px minmax(0, 1.2fr);
  gap: 16px;
  align-items: center;
}
.wb7 .hd {
  padding: 0 14px 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a9ba2;
}
.wb7 .rw {
  padding: 12px 14px;
  border-radius: 14px;
  background: #f7fafa;
  border: 1px solid transparent;
  animation: phUp 0.3s calc(var(--i) * 0.03s) both;
}
.wb7 .rw.sh {
  background: #fff7f8;
  border-color: #f8d3d7;
}
.wb7 .nm {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.wb7 .nm > div {
  min-width: 0;
}
.wb7 .wbi {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #eaf6f7;
  color: #007a8b;
  flex: none;
}
.wb7 .wbi svg {
  width: 13px;
  height: 13px;
}
.wb7 .rw.sh .wbi {
  background: #fdecee;
  color: #c0262f;
}
.wb7 .nm b {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #142b35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wb7 .nm span {
  display: block;
  font-size: 11px;
  color: #6b7d87;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wb7 .pv .tr {
  position: relative;
  height: 8px;
  border-radius: 99px;
  background: #e3eced;
}
.wb7 .pv .hc {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #5fd6c3, #0d7d77);
}
.wb7 .pv .nd {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 0;
  border-left: 2px solid #142b35;
}
.wb7 .rw.sh .pv .nd {
  border-color: #e5484d;
}
.wb7 .pv span {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: #5b6f78;
}
.wb7 .pv b {
  color: #142b35;
}
.wb7 .st {
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 99px;
  white-space: nowrap;
}
.wb7 .st.bad {
  background: #e5484d;
  color: #fff;
}
.wb7 .st.ok {
  background: #e3f6f2;
  color: #0f6e64;
}
.wb7 .ai {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
}
.wb7 .ai .bb {
  height: 8px;
  border-radius: 99px;
  background: #e3eced;
  overflow: hidden;
}
.wb7 .ai .bb i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #ffd27a, #c88a12);
}
.wb7 .ai span {
  font-size: 11.5px;
  color: #5b6f78;
  white-space: nowrap;
}
.wb7 .ai b {
  color: #8a5b00;
  font-size: 12.5px;
}
.wb7 .ai em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
  background: #fff3d6;
  color: #8a5b00;
}

.wb7 .wbi {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #eaf6f7;
  color: #007a8b;
  flex: none;
}
.wb7 .wbi svg {
  width: 13px;
  height: 13px;
}
.wb7 .rw.sh .wbi {
  background: #fdecee;
  color: #c0262f;
}
.wn2f {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wn2f .r {
  display: grid;
  grid-template-columns: 30px 170px minmax(0, 1fr) 34px 90px;
  gap: 12px;
  align-items: center;
  animation: phUp 0.35s calc(var(--i) * 0.05s) both;
}
.wn2f .fi {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #eaf6f7;
  color: #007a8b;
}
.wn2f .fi svg {
  width: 14px;
  height: 14px;
}
.wn2f .r.x .fi {
  background: #fff3d6;
  color: #a86f10;
}
.wn2f .r.ok .fi {
  background: #0d3d40;
  color: #ffd36b;
}
.wn2f .l {
  font-size: 12.5px;
  font-weight: 700;
  color: #24404a;
  white-space: nowrap;
}
.wn2f .b {
  height: 18px;
  border-radius: 7px;
  background: #f0f5f6;
  overflow: hidden;
}
.wn2f .b i {
  display: block;
  height: 100%;
  border-radius: 7px;
  background: linear-gradient(90deg, #14b3a0, #0d3d40);
}
.wn2f .r.x .b i {
  background: linear-gradient(90deg, #ffd36b, #c88a12);
}
.wn2f > .r > b {
  font-size: 15px;
  font-weight: 800;
  color: #0d3d40;
  text-align: right;
}
.wn2f em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  color: #007a8b;
  text-align: right;
  white-space: nowrap;
}
.wn2f .r.x em {
  color: #a86f10;
}
.wn2s {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed #e3eced;
}
.wn2s > div {
  padding: 10px 12px;
  border-radius: 12px;
  background: #f6f9fa;
  min-width: 0;
}
.wn2s b {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #142b35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wn2s .bar {
  display: flex;
  gap: 3px;
  margin: 8px 0 6px;
}
.wn2s .bar i {
  flex: 1;
  height: 8px;
  border-radius: 3px;
  background: #14b3a0;
}
.wn2s .bar i.x {
  background: #e8a317;
}
.wn2s span {
  font-size: 11px;
  color: #4a6670;
}
.wn2s em {
  font-style: normal;
  font-weight: 800;
  color: #0d3d40;
}
.wn2s em.x {
  color: #8a5b00;
}
.wn2h {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(5, minmax(0, 1fr)) 64px;
  gap: 6px;
  align-items: center;
}
.wn2h .ch {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a9ba2;
  text-align: center;
}
.wn2h .rh {
  font-size: 12px;
  font-weight: 800;
  color: #142b35;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wn2h .cl {
  height: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
}
.wn2h .tt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.wn2h .tt b {
  font-size: 18px;
  font-weight: 800;
  color: #0d3d40;
  line-height: 1;
}
.wn2h .tt em.pill {
  font-style: normal;
  font-size: 10px;
  padding: 2px 8px !important;
  height: auto;
}
.wn2t {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.wn2t > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f6f9fa;
  opacity: 0.55;
}
.wn2t > div.on {
  opacity: 1;
  background: #eaf6f7;
  box-shadow: inset 0 0 0 1px #bfe6e0;
}
.wn2t .h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.wn2t .h b {
  font-size: 18px;
  font-weight: 800;
  color: #0d3d40;
}
.wn2t > div > span {
  font-size: 11px;
  color: #5b6f78;
}
.wn2t > div > span:nth-of-type(1) {
  font-weight: 800;
  color: #24414a;
}
.wn2h {
  grid-template-columns: minmax(0, 1.3fr) repeat(5, minmax(0, 1fr)) 64px;
}
.wn2h .rh {
  white-space: nowrap;
  display: block;
  text-overflow: ellipsis;
}
.wn2h {
  grid-template-columns: 118px repeat(5, minmax(0, 1fr)) 58px !important;
  gap: 5px;
}
.wn2h .rh {
  white-space: normal !important;
  overflow: visible !important;
  font-size: 11.5px;
}
.wn2h .cl {
  height: 40px;
  font-size: 13px;
}

.oo-emp .chp.ooc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eaf6f7 !important;
  color: #0d4f57 !important;
  border-color: #bfe6e0 !important;
}
.oo-emp .chp.ooc em {
  font-style: normal;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 5px;
  background: #0d3d40;
  color: #ffd36b;
}
.oo2-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.oo2-bar .r {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  animation: phUp 0.35s calc(var(--i) * 0.06s) both;
}
.oo2-bar .tg {
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 99px;
  background: #fff3d6;
  color: #8a5b00;
}
.oo2-bar b {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: #142b35;
}
.oo2-bar p {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #5b6f78;
}
.oo2-bar em {
  display: flex;
  align-items: center;
  gap: 4px;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  color: #8a9ba2;
  white-space: nowrap;
}
.oo2-bar em svg {
  width: 11px;
  height: 11px;
}
.oo2-c,
.oo2-t,
.oo2-b {
  margin-top: 14px;
}
.oo2-cg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.oo2-cg .col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  background: #f6f9fa;
}
.oo2-cg .col.m {
  background: #f2fbf8;
}
.oo2-cg .ch {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 2px 2px 4px;
}
.oo2-cg .ch b {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #142b35;
}
.oo2-cg .ch span {
  font-size: 11px;
  color: #6b7d87;
}
.oo2-a {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e9eff0;
  animation: phUp 0.35s calc(var(--i) * 0.06s) both;
}
.oo2-a .no {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #0d3d40;
  color: #ffd36b;
  font-size: 11px;
  font-weight: 800;
}
.oo2-a .tx b {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  color: #142b35;
  line-height: 1.35;
}
.oo2-a .tx > span {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: #5b6f78;
  line-height: 1.4;
}
.oo2-a .mt {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}
.oo2-a .mt span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  background: #f1f5f6;
  color: #4a6670;
}
.oo2-a .mt svg {
  width: 11px;
  height: 11px;
}
.oo2-a .mt .k {
  background: #e3f6f2;
  color: #0f6e64;
}
.oo2-a .mt .i {
  background: #fff3d6;
  color: #8a5b00;
}
.oo2-sv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f6f9fa;
}
.oo2-sv > span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #4a6670;
}
.oo2-sv > span svg {
  width: 13px;
  height: 13px;
  color: #007a8b;
}
.oo2-sv .tg-btn {
  height: 38px;
  padding: 0 16px;
  box-shadow: none;
}
.oo2-tg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.oo2-tg .n {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f6f9fa;
  border-top: 3px solid var(--nc, #14b3a0);
  animation: phUp 0.35s calc(var(--i) * 0.05s) both;
}
.oo2-tg .n {
  --nc: #14b3a0;
}
.oo2-tg .nb {
  background: #0d3d40 !important;
  color: #ffd36b !important;
}
.oo2-tg .h {
  display: flex;
  align-items: center;
  gap: 8px;
}
.oo2-tg .nb {
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--nc);
  color: #fff;
}
.oo2-tg .n1 .nb {
  color: #0d3d40;
}
.oo2-tg .h b {
  font-size: 12.5px;
  font-weight: 800;
  color: #142b35;
}
.oo2-tg p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #24414a;
  flex: 1;
}
.oo2-tg em {
  display: flex;
  align-items: center;
  gap: 4px;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  color: #8a9ba2;
}
.oo2-tg em svg {
  width: 10px;
  height: 10px;
}
.oo2-b .bh {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e9eff0;
}
.oo2-b .bh .ic {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e3f6f2;
  color: #0f6e64;
}
.oo2-b .bh .ic svg {
  width: 12px;
  height: 12px;
}
.oo2-b .bh.warn {
  background: #fffaf0;
  border-color: #f3dd9f;
}
.oo2-b .bh.warn .ic {
  background: #fff3d6;
  color: #a86f10;
}
.oo2-b .bh b {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  color: #142b35;
}
.oo2-b .bh > div > span {
  display: block;
  font-size: 11px;
  color: #5b6f78;
}
.oo2-b .bh .aicd {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  background: #0d3d40;
  color: #ffd36b;
}
.oo2-q {
  margin-top: 14px;
}
@media (max-width: 1100px) {
  .oo2-cg {
    grid-template-columns: 1fr;
  }
  .oo2-tg {
    grid-template-columns: 1fr 1fr;
  }
}
.oo-emp {
  flex-wrap: wrap;
}
.oo-emp .chips {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 64px;
}
.oo2-c .wa-ch h3,
.oo2-t .wa-ch h3,
.oo2-b .wa-ch h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.oo2-c .wa-ch h3 svg,
.oo2-t .wa-ch h3 svg,
.oo2-b .wa-ch h3 svg {
  color: #007a8b;
}

.ph-t .vr2 .sm {
  padding: 12px;
  border-radius: 14px;
  background: #0d3d40;
  color: #fff;
}
.ph-t .vr2 .sh {
  display: flex;
  align-items: center;
  gap: 7px;
}
.ph-t .vr2 .sh .si {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: rgba(127, 245, 226, 0.16);
  color: #7ff5e2;
}
.ph-t .vr2 .sh .si svg {
  width: 12px;
  height: 12px;
}
.ph-t .vr2 .sh b {
  font-size: 12px;
  font-weight: 800;
  flex: 1;
}
.ph-t .vr2 .sh em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.ph-t .vr2 .sh em.ok {
  background: #5ef0d6;
  color: #0d3d40;
}
.ph-t .vr2 .sh em.bad {
  background: #ff8a8a;
  color: #4a0f18;
}
.ph-t .vr2 .sm p {
  margin: 8px 0 10px;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}
.ph-t .vr2 .vlb {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #7ff5e2;
  margin-bottom: 6px;
}
.ph-t .vr2 .oc {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.ph-t .vr2 .oc span {
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.ph-t .vr2 .oc span.ok {
  background: #5ef0d6;
  color: #0d3d40;
}
.ph-t .vr2 .oc span.warn {
  background: #ffd36b;
  color: #4a3200;
}
.ph-t .vr2 .oc span.bad {
  background: #ff8a8a;
  color: #4a0f18;
}
.ph-t .vr2 .vdh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 2px 0;
}
.ph-t .vr2 .vdh span {
  font-size: 11.5px;
  font-weight: 800;
  color: #142b35;
}
.ph-t .vr2 .vdh em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  color: #6b7d87;
}
.ph-t .vr2 .vfr {
  padding: 9px 11px;
  border-radius: 12px;
  background: #f6f9f9;
}
.ph-t .vr2 .vfr .t {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}
.ph-t .vr2 .vfr .t span {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #8a9ca5;
}
.ph-t .vr2 .vfr .t em {
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 99px;
  background: #fff;
  color: #4a6670;
  white-space: nowrap;
}
.ph-t .vr2 .vfr b {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  color: #142b35;
}
.ph-t .vr2 .vfr.v-ok {
  background: #e9f8f4;
}
.ph-t .vr2 .vfr.v-ok .t em {
  color: #00695c;
}
.ph-t .vr2 .vfr.v-warn {
  background: #fff7e6;
}
.ph-t .vr2 .vfr.v-warn .t em {
  color: #8a5b00;
}
.ph-t .vr2 .vfr.v-bad {
  background: #fdf0f1;
}
.ph-t .vr2 .vfr.v-bad .t em {
  color: #a8243a;
}
.ph-t .vr2 .tx2 {
  border-radius: 12px;
  background: #f6f9f9;
  padding: 8px 10px;
}
.ph-t .vr2 .tx2 summary {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  color: #4a6670;
  list-style: none;
}
.ph-t .vr2 .tx2 summary::-webkit-details-marker {
  display: none;
}
.ph-t .vr2 .tx2 summary svg {
  width: 12px;
  height: 12px;
  color: #079e93;
}
.ph-t .vr2 .tx2 p {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: #5b6f78;
  font-style: italic;
}
.idpq {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: none;
}
.idpq .ring b {
  font-size: 10.5px;
}
.idpq > span {
  font-size: 9px;
  font-weight: 700;
  color: #8a9ba2;
  white-space: nowrap;
}

.idp-hd .rk-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 99px;
  border: 0;
  background: #fff;
  color: #0d3d40;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.idp-hd .rk-btn svg {
  width: 14px;
  height: 14px;
}
.idp-hd .rk-btn:hover {
  background: #e3f7f2;
}
.rkw {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.rk-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.rk-hd > div {
  flex: 1;
}
.rk-hd > div span {
  display: block;
  font-size: 11px;
  color: #6b7d87;
}
.rk-hd > div b {
  font-size: 16px;
  font-weight: 800;
  color: #142b35;
}
.rk-hd .tg-btn {
  height: 34px;
  padding: 0 14px;
  box-shadow: none;
}
.rk-b {
  flex: 1;
  overflow: auto;
  padding: 20px;
  background: #eef3f4;
}
.rkd {
  background: #fff;
  border-radius: 18px;
  padding: 28px 30px;
  box-shadow: 0 10px 30px -18px rgba(13, 61, 64, 0.35);
  animation: phUp 0.35s both;
}
.rk-top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 2px solid #0d3d40;
}
.rk-k {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #079e93;
}
.rk-top h2 {
  margin: 4px 0 2px;
  font-size: 24px;
  color: #142b35;
}
.rk-top p {
  margin: 0;
  font-size: 12.5px;
  color: #5b6f78;
}
.rk-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
  flex: none;
}
.rk-meta span {
  display: block;
  font-size: 10px;
  color: #8a9ba2;
  font-weight: 700;
}
.rk-meta b {
  font-size: 12.5px;
  color: #142b35;
}
.rk-st {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 18px 0;
}
.rk-st > div {
  padding: 10px 12px;
  border-radius: 12px;
  background: #f4f7f8;
}
.rk-st span {
  display: block;
  font-size: 10.5px;
  color: #6b7d87;
  font-weight: 700;
}
.rk-st b {
  font-size: 20px;
  color: #142b35;
}
.rk-st .ok {
  background: #e9f8f4;
}
.rk-st .ok b {
  color: #00695c;
}
.rk-st .warn {
  background: #fff7e6;
}
.rk-st .warn b {
  color: #8a5b00;
}
.rk-st .bad {
  background: #fdf0f1;
}
.rk-st .bad b {
  color: #a8243a;
}
.rk-sec {
  margin-top: 18px;
}
.rk-sec h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 13.5px;
  color: #142b35;
}
.rk-sec > p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #33505a;
}
.rk-q {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.rk-q > div {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #e3ebed;
}
.rk-q .qn {
  font-size: 10.5px;
  font-weight: 800;
  color: #079e93;
}
.rk-q b {
  display: block;
  margin: 3px 0 8px;
  font-size: 12px;
  line-height: 1.35;
  color: #142b35;
  min-height: 32px;
}
.rk-q .qb {
  height: 5px;
  border-radius: 9px;
  background: #eef3f4;
  overflow: hidden;
}
.rk-q .qb i {
  display: block;
  height: 100%;
  background: #14b3a0;
  border-radius: 9px;
}
.rk-q .qm {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: #6b7d87;
}
.rk-t {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.rk-t th {
  text-align: left;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: #8a9ba2;
  padding: 6px 8px;
  border-bottom: 1px solid #e3ebed;
}
.rk-t td {
  padding: 9px 8px;
  border-bottom: 1px solid #f0f4f5;
  vertical-align: middle;
  color: #33505a;
}
.rk-t td:first-child b {
  display: block;
  color: #142b35;
  font-size: 12.5px;
}
.rk-t td:first-child span {
  font-size: 10.5px;
  color: #8a9ba2;
}
.rk-t td:nth-child(2) {
  width: 120px;
}
.rk-t td:last-child {
  width: 190px;
}
.rk-g2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.rk-c {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f4f5;
  font-size: 12px;
}
.rk-c em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 5px;
  background: #0d3d40;
  color: #ffd36b;
}
.rk-c b {
  color: #142b35;
}
.rk-c > span {
  font-weight: 800;
  color: #6b7d87;
}
.rk-c > span.up {
  color: #00695c;
}
.rk-p {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 7px 0;
  font-size: 12px;
  line-height: 1.4;
  color: #33505a;
}
.rk-p span {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e3f6f2;
  color: #0f6e64;
}
.rk-p.warn span {
  background: #fff3d6;
  color: #a86f10;
}
.rk-p svg {
  width: 11px;
  height: 11px;
}
.rk-n {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rk-n > div {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 9px 12px;
  border-radius: 12px;
  background: #f4f7f8;
  font-size: 12.5px;
  color: #142b35;
  font-weight: 600;
}
.rk-n span {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: #0d3d40;
  color: #ffd36b;
  font-size: 11px;
  font-weight: 800;
}
.rk-sg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px dashed #cfdcdf;
}
.rk-sg > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rk-sg b {
  display: block;
  font-size: 12px;
  color: #142b35;
}
.rk-sg span {
  font-size: 10.5px;
  color: #8a9ba2;
}
.rk-ld {
  padding: 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, #082a2d, #0d3d40 55%, #006b7a);
  color: #fff;
}
.rk-lh {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.rk-lh b {
  font-size: 14px;
}
.rk-lh .orb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #bff8ee, #14b3a0 55%, #0a6f66);
  box-shadow: 0 0 16px rgba(94, 240, 214, 0.5);
  animation: waSpin 3s linear infinite;
}

.kx-bd {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 8px;
}
.kx-bd .chp {
  background: #eaf6f7 !important;
  color: #0d4f57 !important;
  border-color: #bfe6e0 !important;
}
.kx-tp {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 4px;
}
.kx-tp > div {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #142b35;
  font-weight: 600;
}
.kx-tp em {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  background: #0d3d40;
  color: #ffd36b;
}
.oo2-cx {
  padding: 12px 14px;
  border-radius: 14px;
  background: #f2fbf8;
  margin-bottom: 12px;
}
.oo2-cx p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #24414a;
}
.oo2-cx .lbx,
.oo2-tl {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #007a8b;
  margin-bottom: 6px;
}
.oo2-cx .lbx svg,
.oo2-tl svg {
  width: 13px;
  height: 13px;
}
.oo2-tl {
  margin: 0 0 8px;
}

.rk-ai {
  margin: 4px 0 6px;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, #082a2d, #0d3d40 55%, #006b7a);
  color: #fff;
}
.rk-aih {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rk-aih > div {
  flex: 1;
}
.rk-aih b {
  display: block;
  font-size: 14px;
}
.rk-aih > div span {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.7);
}
.rk-ai .orb {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #bff8ee, #14b3a0 55%, #0a6f66);
  box-shadow: 0 0 16px rgba(94, 240, 214, 0.5);
}
.rk-gen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 99px;
  background: #ffd36b;
  color: #3d2a00;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}
.rk-gen svg {
  width: 14px;
  height: 14px;
}
.rk-gen:hover {
  background: #ffe08f;
}
.rk-ldw {
  margin-top: 14px;
}
.rk-ao {
  margin-top: 12px;
  animation: phUp 0.35s both;
}
.rk-ao > p {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}
.rk-ag {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.rk-ag > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
}
.rk-ag b {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #7ff5e2;
}
.rk-ag .g1 b {
  color: #ffd36b;
}
.rk-ag .g2 b {
  color: #bfe6ff;
}
.rk-ag span {
  font-size: 12px;
  line-height: 1.4;
  color: #fff;
}
.rk-tl {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rk-m {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 12px;
}
.rk-md {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 58px;
  border-radius: 12px;
  background: #0d3d40;
  color: #fff;
}
.rk-md b {
  font-size: 13px;
  font-weight: 800;
}
.rk-md span {
  font-size: 10.5px;
  color: #7ff5e2;
  font-weight: 700;
}
.rk-mb {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #e3ebed;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rk-mh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.rk-mh b {
  font-size: 13.5px;
  color: #142b35;
}
.rk-ci {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f6f9fa;
}
.rk-cr {
  display: flex;
  align-items: center;
  gap: 9px;
}
.rk-cr .cdi {
  flex: 1;
  min-width: 0;
}
.rk-cr .cdi b {
  display: block;
  font-size: 12.5px;
  color: #142b35;
}
.rk-cr .cdi span {
  font-size: 10.5px;
  color: #7a8d96;
}
.rk-ev {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 31px;
}
.rk-f {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 5px;
  border-radius: 10px;
  border: 1px solid #e3ebed;
  background: #fff;
  font: inherit;
  cursor: pointer;
  max-width: 100%;
}
.rk-f:hover {
  border-color: #14b3a0;
}
.rk-f .fi {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 6px;
  display: grid;
  place-items: center;
}
.rk-f .fi svg {
  width: 12px;
  height: 12px;
}
.rk-f .fn {
  font-size: 11.5px;
  font-weight: 700;
  color: #142b35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rk-f em {
  font-style: normal;
  font-size: 10px;
  color: #8a9ba2;
  white-space: nowrap;
}
.rk-nf {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #a86f10;
}
.rk-nf svg {
  width: 12px;
  height: 12px;
}